From 5f3b6b1807a3352b539fe943890887552f531df4 Mon Sep 17 00:00:00 2001
From: camperbot <camperbot@users.noreply.github.com>
Date: Thu, 20 Oct 2022 17:13:17 +0100
Subject: [PATCH] chore(i18n,learn): processed translations (#48152)

---
 ...end-development-and-apis-certification.yml |   22 +
 ...ata-analysis-with-python-certification.yml |   23 +
 .../data-visualization-certification.yml      |   22 +
 ...nd-development-libraries-certification.yml |   22 +
 .../information-security-certification.yml    |   22 +
 ...thms-and-data-structures-certification.yml |   22 +
 .../legacy-back-end-certification.yml         |   37 +
 ...egacy-data-visualization-certification.yml |   37 +
 .../legacy-front-end-certification.yml        |   37 +
 .../legacy-full-stack-certification.yml       |   25 +
 ...ty-and-quality-assurance-certification.yml |   22 +
 ...ine-learning-with-python-certification.yml |   23 +
 .../quality-assurance-certification.yml       |   23 +
 .../relational-database-certification.yml     |   22 +
 .../responsive-web-design-certification.yml   |   22 +
 ...ic-computing-with-python-certification.yml |   22 +
 ...ges-for-visually-impaired-accessibility.md |   46 +
 .../add-an-accessible-date-picker.md          |  105 ++
 ...choosing-colors-that-convey-information.md |   74 ++
 ...ess-issues-by-using-sufficient-contrast.md |   84 ++
 ...-meaning-by-using-descriptive-link-text.md |   75 ++
 ...of-audio-content-with-the-audio-element.md |  115 ++
 ...t-accessibility-with-the-figure-element.md |  161 +++
 ...ld-accessibility-with-the-label-element.md |  119 ++
 ...ove-readability-with-high-contrast-text.md |   80 ++
 ...t-to-the-content-using-the-main-element.md |   62 +
 ...know-when-alt-text-should-be-left-blank.md |   76 ++
 ...-to-a-screen-reader-by-using-custom-css.md |  244 ++++
 ...e-links-navigable-with-html-access-keys.md |  106 ++
 ...igation-easier-with-the-footer-landmark.md |  116 ++
 ...igation-easier-with-the-header-landmark.md |  111 ++
 ...navigation-easier-with-the-nav-landmark.md |  121 ++
 ...times-with-the-html5-datetime-attribute.md |  132 ++
 ...w-hierarchical-relationships-of-content.md |   92 ++
 ...dex-to-add-keyboard-focus-to-an-element.md |  144 +++
 ...-of-keyboard-focus-for-several-elements.md |  160 +++
 .../wrap-content-in-the-article-element.md    |   92 ++
 ...eldset-element-for-better-accessibility.md |  165 +++
 ...add-a-box-shadow-to-a-card-like-element.md |  154 +++
 ...t-the-background-color-property-of-text.md |  146 +++
 ...arious-elements-to-complementary-colors.md |  130 ++
 ...of-an-element-using-the-height-property.md |  118 ++
 ...adjust-the-hover-state-of-an-anchor-tag.md |   72 ++
 .../adjust-the-hue-of-a-color.md              |  129 ++
 ...ding-element-versus-a-paragraph-element.md |  119 ++
 .../adjust-the-tone-of-a-color.md             |  121 ++
 ...-of-an-element-using-the-width-property.md |  115 ++
 .../animate-elements-at-variable-rates.md     |  141 +++
 ...ually-using-an-infinite-animation-count.md |  107 ++
 ...ate-multiple-elements-at-variable-rates.md |  155 +++
 ...-horizontally-using-the-margin-property.md |   56 +
 .../change-an-elements-relative-position.md   |   77 ++
 .../change-animation-timing-with-keywords.md  |  127 ++
 ...ping-elements-with-the-z-index-property.md |   81 ++
 .../create-a-gradual-css-linear-gradient.md   |   76 ++
 .../create-a-graphic-using-css.md             |   89 ++
 ...-a-horizontal-line-using-the-hr-element.md |  122 ++
 ...a-more-complex-shape-using-css-and-html.md |  146 +++
 .../create-movement-using-css-animation.md    |  136 ++
 ...-a-subtle-pattern-as-a-background-image.md |   50 +
 ...l-balance-using-the-text-align-property.md |  118 ++
 ...by-fading-an-element-from-left-to-right.md |   95 ++
 .../decrease-the-opacity-of-an-element.md     |  134 ++
 .../learn-about-complementary-colors.md       |   90 ++
 .../learn-about-tertiary-colors.md            |  114 ++
 .../learn-how-bezier-curves-work.md           |  136 ++
 ...keyframes-and-animation-properties-work.md |  136 ++
 ...to-its-parent-with-absolute-positioning.md |   90 ++
 ...e-browser-window-with-fixed-positioning.md |  120 ++
 ...tbeat-using-an-infinite-animation-count.md |  181 +++
 ...otion-more-natural-using-a-bezier-curve.md |  121 ++
 .../modify-fill-mode-of-an-animation.md       |   92 ++
 ...ely-positioned-element-with-css-offsets.md |   70 ++
 ...s-left-or-right-with-the-float-property.md |  100 ++
 ...font-size-for-multiple-heading-elements.md |  121 ++
 .../set-the-font-size-of-paragraph-text.md    |   52 +
 ...nt-weight-for-multiple-heading-elements.md |  132 ++
 .../set-the-line-height-of-paragraphs.md      |   54 +
 .../use-a-bezier-curve-to-move-a-graphic.md   |  128 ++
 ...ar-gradient-to-create-a-striped-element.md |  113 ++
 ...n-to-change-the-hover-state-of-a-button.md |  103 ++
 ...ewx-to-skew-an-element-along-the-x-axis.md |   77 ++
 ...ewy-to-skew-an-element-along-the-y-axis.md |   71 ++
 ...operty-to-change-the-size-of-an-element.md |   95 ++
 ...e-property-to-scale-an-element-on-hover.md |   79 ++
 .../use-the-em-tag-to-italicize-text.md       |  118 ++
 .../use-the-s-tag-to-strikethrough-text.md    |  135 ++
 .../use-the-strong-tag-to-make-text-bold.md   |  128 ++
 ...ansform-property-to-make-text-uppercase.md |  138 +++
 .../use-the-u-tag-to-underline-text.md        |  120 ++
 .../add-a-negative-margin-to-an-element.md    |  115 ++
 .../add-borders-around-your-elements.md       |  190 +++
 ...rent-margins-to-each-side-of-an-element.md |  136 ++
 ...rent-padding-to-each-side-of-an-element.md |  136 ++
 .../add-rounded-corners-with-border-radius.md |  164 +++
 .../adjust-the-margin-of-an-element.md        |  116 ++
 .../adjust-the-padding-of-an-element.md       |  118 ++
 ...tach-a-fallback-value-to-a-css-variable.md |  272 ++++
 .../change-a-variable-for-a-specific-area.md  |  254 ++++
 .../basic-css/change-the-color-of-text.md     |  122 ++
 .../change-the-font-size-of-an-element.md     |  119 ++
 .../basic-css/create-a-custom-css-variable.md |  241 ++++
 ...ive-a-background-color-to-a-div-element.md |  176 +++
 .../basic-css/import-a-google-font.md         |  175 +++
 ...ve-compatibility-with-browser-fallbacks.md |   70 ++
 .../basic-css/inherit-css-variables.md        |  244 ++++
 .../inherit-styles-from-the-body-element.md   |  111 ++
 ...ke-circular-images-with-a-border-radius.md |  159 +++
 ...ide-all-other-styles-by-using-important.md |  114 ++
 ...s-declarations-by-styling-id-attributes.md |  123 ++
 ...e-class-declarations-with-inline-styles.md |  102 ++
 .../override-styles-in-subsequent-css.md      |   94 ++
 .../prioritize-one-style-over-another.md      |   73 ++
 .../set-the-font-family-of-an-element.md      |  132 ++
 .../basic-css/set-the-id-of-an-element.md     |  170 +++
 .../basic-css/size-your-images.md             |  155 +++
 .../specify-how-fonts-should-degrade.md       |  172 +++
 ...tyle-multiple-elements-with-a-css-class.md |  133 ++
 .../basic-css/style-the-html-body-element.md  |   70 ++
 ...derstand-absolute-versus-relative-units.md |  123 ++
 .../use-a-css-class-to-style-an-element.md    |  142 +++
 .../basic-css/use-a-custom-css-variable.md    |  287 +++++
 .../use-a-media-query-to-change-a-variable.md |  281 +++++
 .../basic-css/use-abbreviated-hex-code.md     |  128 ++
 ...use-an-id-attribute-to-style-an-element.md |  197 +++
 ...e-attribute-selectors-to-style-elements.md |  210 ++++
 ...ion-to-specify-the-margin-of-an-element.md |  143 +++
 ...on-to-specify-the-padding-of-an-element.md |  141 +++
 .../use-css-selectors-to-style-elements.md    |  158 +++
 ...bles-to-change-several-elements-at-once.md |  257 ++++
 .../use-hex-code-for-specific-colors.md       |   66 +
 .../basic-css/use-hex-code-to-mix-colors.md   |  132 ++
 .../basic-css/use-rgb-to-mix-colors.md        |  140 +++
 .../use-rgb-values-to-color-elements.md       |   76 ++
 .../add-a-submit-button-to-a-form.md          |  113 ++
 .../add-images-to-your-website.md             |   92 ++
 .../add-placeholder-text-to-a-text-field.md   |  108 ++
 ...radio-buttons-and-checkboxes-by-default.md |  116 ++
 .../basic-html-and-html5/comment-out-html.md  |   76 ++
 .../create-a-bulleted-unordered-list.md       |  102 ++
 .../create-a-form-element.md                  |  106 ++
 .../create-a-set-of-checkboxes.md             |  135 ++
 .../create-a-set-of-radio-buttons.md          |  160 +++
 .../create-a-text-field.md                    |   89 ++
 .../create-an-ordered-list.md                 |  157 +++
 ...declare-the-doctype-of-an-html-document.md |   70 ++
 ...e-the-head-and-body-of-an-html-document.md |  141 +++
 .../delete-html-elements.md                   |   56 +
 ...fill-in-the-blank-with-placeholder-text.md |   50 +
 .../headline-with-the-h2-element.md           |   70 ++
 .../inform-with-the-paragraph-element.md      |   64 +
 .../introduction-to-html5-elements.md         |   98 ++
 ...-to-external-pages-with-anchor-elements.md |   78 ++
 ...sections-of-a-page-with-anchor-elements.md |  120 ++
 .../make-dead-links-using-the-hash-symbol.md  |   58 +
 ...st-an-anchor-element-within-a-paragraph.md |  163 +++
 ...ny-elements-within-a-single-div-element.md |  121 ++
 .../say-hello-to-html-elements.md             |   60 +
 .../turn-an-image-into-a-link.md              |   80 ++
 .../basic-html-and-html5/uncomment-html.md    |   70 ++
 .../use-html5-to-require-a-field.md           |   86 ++
 ...ibute-with-radio-buttons-and-checkboxes.md |  148 +++
 ...add-flex-superpowers-to-the-tweet-embed.md |  258 ++++
 ...elements-using-the-align-items-property.md |   95 ++
 ...ents-using-the-justify-content-property.md |   95 ++
 ...y-to-create-a-column-in-the-tweet-embed.md |  218 ++++
 ...perty-to-create-rows-in-the-tweet-embed.md |  230 ++++
 .../use-display-flex-to-position-two-boxes.md |   82 ++
 ...align-items-property-in-the-tweet-embed.md |  222 ++++
 .../use-the-align-self-property.md            |   92 ++
 ...erty-to-set-the-initial-size-of-an-item.md |  102 ++
 ...lex-direction-property-to-make-a-column.md |   82 ++
 ...e-flex-direction-property-to-make-a-row.md |   86 ++
 ...-the-flex-grow-property-to-expand-items.md |   90 ++
 .../use-the-flex-shorthand-property.md        |  106 ++
 ...he-flex-shrink-property-to-shrink-items.md |   94 ++
 ...x-wrap-property-to-wrap-a-row-or-column.md |  138 +++
 ...ify-content-property-in-the-tweet-embed.md |  224 ++++
 ...e-the-order-property-to-rearrange-items.md |   90 ++
 .../add-columns-with-grid-template-columns.md |   72 ++
 .../css-grid/add-gaps-faster-with-grid-gap.md |   69 ++
 .../add-rows-with-grid-template-rows.md       |   68 +
 ...-items-horizontally-using-justify-items.md |   71 ++
 ...-all-items-vertically-using-align-items.md |   69 ++
 ...an-item-horizontally-using-justify-self.md |   79 ++
 ...ign-an-item-vertically-using-align-self.md |   71 ++
 ...eate-a-column-gap-using-grid-column-gap.md |   76 ++
 .../create-a-row-gap-using-grid-row-gap.md    |   68 +
 ...create-flexible-layouts-using-auto-fill.md |  140 +++
 .../create-flexible-layouts-using-auto-fit.md |   91 ++
 .../css-grid/create-grids-within-grids.md     |  106 ++
 .../css-grid/create-your-first-css-grid.md    |   64 +
 .../divide-the-grid-into-an-area-template.md  |  113 ++
 ...mit-item-size-using-the-minmax-function.md |   77 ++
 ...grid-areas-using-the-grid-area-property.md |   86 ++
 ...ce-repetition-using-the-repeat-function.md |   93 ++
 ...-to-change-the-size-of-columns-and-rows.md |   83 ++
 ...area-without-creating-an-areas-template.md |   86 ++
 .../use-grid-column-to-control-spacing.md     |  139 +++
 .../use-grid-row-to-control-spacing.md        |  122 ++
 ...ia-queries-to-create-responsive-layouts.md |  174 +++
 .../create-a-media-query.md                   |   91 ++
 .../make-an-image-responsive.md               |   76 ++
 .../make-typography-responsive.md             |   77 ++
 ...na-image-for-higher-resolution-displays.md |   64 +
 .../build-a-personal-portfolio-webpage.md     |  281 +++++
 .../build-a-product-landing-page.md           |  470 +++++++
 .../build-a-survey-form.md                    |  518 ++++++++
 .../build-a-technical-documentation-page.md   |  529 ++++++++
 .../build-a-tribute-page.md                   |  325 +++++
 .../basic-algorithm-scripting/boo-who.md      |   97 ++
 .../chunky-monkey.md                          |  110 ++
 .../confirm-the-ending.md                     |  113 ++
 .../convert-celsius-to-fahrenheit.md          |   75 ++
 .../factorialize-a-number.md                  |   73 ++
 .../falsy-bouncer.md                          |   71 ++
 .../find-the-longest-word-in-a-string.md      |   87 ++
 .../finders-keepers.md                        |   58 +
 .../basic-algorithm-scripting/mutations.md    |  117 ++
 .../repeat-a-string-repeat-a-string.md        |   84 ++
 .../return-largest-numbers-in-arrays.md       |   92 ++
 .../reverse-a-string.md                       |   63 +
 .../slice-and-splice.md                       |   98 ++
 .../title-case-a-sentence.md                  |   64 +
 .../truncate-a-string.md                      |   91 ++
 .../where-do-i-belong.md                      |  143 +++
 ...-arrays-contents-using-bracket-notation.md |   82 ++
 ...ss-property-names-with-bracket-notation.md |  101 ++
 ...items-to-an-array-with-push-and-unshift.md |   87 ++
 .../add-items-using-splice.md                 |   93 ++
 ...d-key-value-pairs-to-javascript-objects.md |  124 ++
 ...the-presence-of-an-element-with-indexof.md |   93 ++
 .../check-if-an-object-has-a-property.md      |  161 +++
 ...combine-arrays-with-the-spread-operator.md |   63 +
 .../copy-an-array-with-the-spread-operator.md |  102 ++
 .../copy-array-items-using-slice.md           |   65 +
 ...create-complex-multi-dimensional-arrays.md |  218 ++++
 ...ray-of-all-object-keys-with-object.keys.md |  111 ++
 ...ugh-all-an-arrays-items-using-for-loops.md |  138 +++
 ...-of-an-object-with-a-for...in-statement.md |  152 +++
 .../modify-an-array-stored-in-an-object.md    |  112 ++
 ...odify-an-object-nested-within-an-object.md |  101 ++
 ...-items-from-an-array-with-pop-and-shift.md |   86 ++
 .../remove-items-using-splice.md              |   87 ++
 ...-an-array-to-store-a-collection-of-data.md |   95 ++
 ...ete-keyword-to-remove-object-properties.md |   86 ++
 .../access-array-data-with-indexes.md         |   87 ++
 ...s-multi-dimensional-arrays-with-indexes.md |   77 ++
 .../accessing-nested-arrays.md                |  121 ++
 .../accessing-nested-objects.md               |  100 ++
 ...object-properties-with-bracket-notation.md |  103 ++
 ...ing-object-properties-with-dot-notation.md |  100 ++
 ...essing-object-properties-with-variables.md |  107 ++
 ...d-new-properties-to-a-javascript-object.md |   90 ++
 .../add-two-numbers-with-javascript.md        |   62 +
 ...g-a-default-option-in-switch-statements.md |  128 ++
 .../appending-variables-to-strings.md         |   77 ++
 ...ng-the-value-of-one-variable-to-another.md |   86 ++
 .../assignment-with-a-returned-value.md       |   72 ++
 .../build-javascript-objects.md               |  159 +++
 .../chaining-if-else-statements.md            |  149 +++
 .../comment-your-javascript-code.md           |   63 +
 .../comparison-with-the-equality-operator.md  |   89 ++
 ...mparison-with-the-greater-than-operator.md |  111 ++
 ...h-the-greater-than-or-equal-to-operator.md |  113 ++
 ...comparison-with-the-inequality-operator.md |   91 ++
 .../comparison-with-the-less-than-operator.md |  106 ++
 ...with-the-less-than-or-equal-to-operator.md |  112 ++
 ...rison-with-the-strict-equality-operator.md |   80 ++
 ...son-with-the-strict-inequality-operator.md |   83 ++
 ...mparisons-with-the-logical-and-operator.md |  130 ++
 ...omparisons-with-the-logical-or-operator.md |  135 ++
 ...ound-assignment-with-augmented-addition.md |  101 ++
 ...ound-assignment-with-augmented-division.md |   95 ++
 ...ssignment-with-augmented-multiplication.md |   95 ++
 ...d-assignment-with-augmented-subtraction.md |   93 ++
 ...oncatenating-strings-with-plus-operator.md |   89 ++
 ...g-strings-with-the-plus-equals-operator.md |   74 ++
 .../constructing-strings-with-variables.md    |   75 ++
 .../count-backwards-with-a-for-loop.md        |   77 ++
 .../basic-javascript/counting-cards.md        |  214 ++++
 .../create-decimal-numbers-with-javascript.md |   55 +
 ...ad-only-variable-with-the-const-keyword.md |   88 ++
 .../declare-javascript-variables.md           |   61 +
 .../declare-string-variables.md               |   87 ++
 .../decrement-a-number-with-javascript.md     |   84 ++
 ...ete-properties-from-a-javascript-object.md |   96 ++
 ...-one-decimal-by-another-with-javascript.md |   50 +
 ...e-one-number-by-another-with-javascript.md |   59 +
 .../escape-sequences-in-strings.md            |   91 ++
 .../escaping-literal-quotes-in-strings.md     |   72 ++
 ...rences-between-the-var-and-let-keywords.md |   74 ++
 .../find-the-length-of-a-string.md            |   68 +
 .../finding-a-remainder-in-javascript.md      |   67 +
 ...nerate-random-fractions-with-javascript.md |   69 ++
 ...te-random-whole-numbers-with-javascript.md |   90 ++
 ...ate-random-whole-numbers-within-a-range.md |  102 ++
 .../global-scope-and-functions.md             |  128 ++
 .../global-vs.-local-scope-in-functions.md    |   77 ++
 .../basic-javascript/golf-code.md             |  136 ++
 .../increment-a-number-with-javascript.md     |   80 ++
 ...-variables-with-the-assignment-operator.md |   44 +
 .../introducing-else-if-statements.md         |  114 ++
 .../introducing-else-statements.md            |  106 ++
 .../iterate-odd-numbers-with-a-for-loop.md    |   69 ++
 ...terate-through-an-array-with-a-for-loop.md |   81 ++
 ...terate-with-javascript-do...while-loops.md |  105 ++
 .../iterate-with-javascript-for-loops.md      |   81 ++
 .../iterate-with-javascript-while-loops.md    |   75 ++
 .../local-scope-and-functions.md              |   86 ++
 .../logical-order-in-if-else-statements.md    |  109 ++
 .../manipulate-arrays-with-pop.md             |   90 ++
 .../manipulate-arrays-with-push.md            |   78 ++
 .../manipulate-arrays-with-shift.md           |   88 ++
 .../manipulate-arrays-with-unshift.md         |   79 ++
 .../manipulating-complex-objects.md           |  165 +++
 .../modify-array-data-with-indexes.md         |   87 ++
 ...-identical-options-in-switch-statements.md |  149 +++
 .../multiply-two-decimals-with-javascript.md  |   52 +
 .../multiply-two-numbers-with-javascript.md   |   60 +
 .../nest-one-array-within-another-array.md    |   51 +
 .../basic-javascript/nesting-for-loops.md     |   92 ++
 ...sing-values-to-functions-with-arguments.md |  120 ++
 .../practice-comparing-different-values.md    |   78 ++
 .../basic-javascript/profile-lookup.md        |  144 +++
 .../quoting-strings-with-single-quotes.md     |   75 ++
 .../basic-javascript/record-collection.md     |  181 +++
 .../replace-loops-using-recursion.md          |  105 ++
 .../replacing-if-else-chains-with-switch.md   |  157 +++
 ...urn-a-value-from-a-function-with-return.md |   73 ++
 .../return-early-pattern-for-functions.md     |  106 ++
 ...returning-boolean-values-from-functions.md |   82 ++
 ...rom-many-options-with-switch-statements.md |  114 ++
 .../basic-javascript/shopping-list.md         |   97 ++
 .../basic-javascript/stand-in-line.md         |  118 ++
 ...in-one-variable-using-javascript-arrays.md |   63 +
 ...ing-values-with-the-assignment-operator.md |   77 ++
 ...one-number-from-another-with-javascript.md |   59 +
 .../testing-objects-for-properties.md         |   98 ++
 .../understand-string-immutability.md         |   70 ++
 .../understanding-boolean-values.md           |   60 +
 ...rstanding-case-sensitivity-in-variables.md |  100 ++
 ...ndefined-value-returned-from-a-function.md |   96 ++
 .../understanding-uninitialized-variables.md  |   79 ++
 .../updating-object-properties.md             |   78 ++
 ...to-find-the-first-character-in-a-string.md |   74 ++
 ...-to-find-the-last-character-in-a-string.md |   68 +
 ...n-to-find-the-nth-character-in-a-string.md |   68 +
 ...d-the-nth-to-last-character-in-a-string.md |   68 +
 ...se-conditional-logic-with-if-statements.md |   98 ++
 ...-multiple-conditional-ternary-operators.md |   96 ++
 .../use-recursion-to-create-a-countdown.md    |   99 ++
 ...-recursion-to-create-a-range-of-numbers.md |   88 ++
 .../use-the-conditional-ternary-operator.md   |   84 ++
 .../use-the-parseint-function-with-a-radix.md |   82 ++
 .../use-the-parseint-function.md              |   74 ++
 .../using-objects-for-lookups.md              |  155 +++
 .../basic-javascript/word-blanks.md           |  105 ++
 ...rite-reusable-javascript-with-functions.md |  101 ++
 ...the-wrong-order-when-calling-a-function.md |   57 +
 ...osing-parenthesis-after-a-function-call.md |   69 ++
 ...-misspelled-variable-and-function-names.md |   69 ++
 ...mixed-usage-of-single-and-double-quotes.md |   63 +
 ...h-off-by-one-errors-when-using-indexing.md |   93 ++
 ...-parentheses-brackets-braces-and-quotes.md |   49 +
 ...t-operator-instead-of-equality-operator.md |   81 ++
 ...e-loops-with-a-valid-terminal-condition.md |   63 +
 ...en-the-freecodecamp-and-browser-console.md |   65 +
 ...-reinitializing-variables-inside-a-loop.md |   97 ++
 ...onsole-to-check-the-value-of-a-variable.md |   54 +
 ...-typeof-to-check-the-type-of-a-variable.md |   66 +
 ...pare-scopes-of-the-var-and-let-keywords.md |  134 ++
 ...plete-a-promise-with-resolve-and-reject.md |   77 ++
 .../es6/create-a-javascript-promise.md        |   55 +
 .../es6/create-a-module-script.md             |   73 ++
 ...-an-export-fallback-with-export-default.md |   63 +
 .../create-strings-using-template-literals.md |  116 ++
 .../handle-a-fulfilled-promise-with-then.md   |   92 ++
 .../handle-a-rejected-promise-with-catch.md   |  100 ++
 .../es6/import-a-default-export.md            |   48 +
 .../mutate-an-array-declared-with-const.md    |   91 ++
 .../es6/prevent-object-mutation.md            |  104 ++
 .../es6/reuse-javascript-code-using-import.md |   70 ++
 ...t-default-parameters-for-your-functions.md |   64 +
 .../use--to-import-everything-from-a-file.md  |   60 +
 ...ns-to-write-concise-anonymous-functions.md |   91 ++
 ...syntax-to-define-a-constructor-function.md |  111 ++
 ...ignment-to-assign-variables-from-arrays.md |   71 ++
 ...to-assign-variables-from-nested-objects.md |  106 ++
 ...gnment-to-assign-variables-from-objects.md |   97 ++
 ...signment-to-extract-values-from-objects.md |  101 ++
 ...ass-an-object-as-a-functions-parameters.md |   94 ++
 ...st-parameter-to-reassign-array-elements.md |   85 ++
 .../es6/use-export-to-share-a-code-block.md   |   85 ++
 ...-setters-to-control-access-to-an-object.md |  174 +++
 ...rest-parameter-with-function-parameters.md |   80 ++
 ...ad-operator-to-evaluate-arrays-in-place.md |   84 ++
 .../write-arrow-functions-with-parameters.md  |   94 ++
 ...-concise-declarative-functions-with-es6.md |   87 ++
 ...rations-using-object-property-shorthand.md |   75 ++
 ...f-an-array-using-concat-instead-of-push.md |   88 ++
 ...ramming-to-convert-strings-to-url-slugs.md |   84 ++
 ...de-effects-using-functional-programming.md |   78 ++
 ...ray-into-a-string-using-the-join-method.md |   89 ++
 ...bine-two-arrays-using-the-concat-method.md |   77 ++
 .../implement-map-on-a-prototype.md           |   72 ++
 ...lement-the-filter-method-on-a-prototype.md |   67 +
 ...ion-to-currying-and-partial-application.md |  102 ++
 .../learn-about-functional-programming.md     |   86 ++
 ...avoid-external-dependence-in-a-function.md |   74 ++
 ...actor-global-variables-out-of-functions.md |  133 ++
 ...-an-array-using-slice-instead-of-splice.md |   84 ++
 ...ray-without-changing-the-original-array.md |   90 ++
 ...part-of-an-array-using-the-slice-method.md |   93 ++
 ...ay-alphabetically-using-the-sort-method.md |  101 ++
 ...ng-into-an-array-using-the-split-method.md |   87 ++
 ...tand-functional-programming-terminology.md |  112 ++
 ...nd-the-hazards-of-using-imperative-code.md |  139 +++
 ...er-or-reduce-to-solve-a-complex-problem.md |   97 ++
 ...ry-element-in-an-array-meets-a-criteria.md |   76 ++
 ...er-method-to-extract-data-from-an-array.md |  314 +++++
 ...ap-method-to-extract-data-from-an-array.md |  329 +++++
 .../use-the-reduce-method-to-analyze-data.md  |  345 ++++++
 ...ny-elements-in-an-array-meet-a-criteria.md |   76 ++
 .../arguments-optional.md                     |  103 ++
 .../binary-agents.md                          |   57 +
 .../convert-html-entities.md                  |   89 ++
 .../diff-two-arrays.md                        |  189 +++
 .../dna-pairing.md                            |   81 ++
 .../drop-it.md                                |  104 ++
 .../everything-be-true.md                     |  158 +++
 .../make-a-person.md                          |  198 +++
 .../map-the-debris.md                         |   83 ++
 .../missing-letters.md                        |   72 ++
 .../pig-latin.md                              |   93 ++
 .../search-and-replace.md                     |  100 ++
 .../seek-and-destroy.md                       |  104 ++
 .../smallest-common-multiple.md               |   89 ++
 .../sorted-union.md                           |   84 ++
 .../spinal-tap-case.md                        |   70 ++
 .../steamroller.md                            |   79 ++
 .../sum-all-numbers-in-a-range.md             |   70 ++
 .../sum-all-odd-fibonacci-numbers.md          |   82 ++
 .../sum-all-primes.md                         |   95 ++
 .../wherefore-art-thou.md                     |  139 +++
 .../caesars-cipher.md                         |   88 ++
 .../cash-register.md                          |  252 ++++
 .../palindrome-checker.md                     |  125 ++
 .../roman-numeral-converter.md                |  215 ++++
 .../telephone-number-validator.md             |  217 ++++
 .../add-methods-after-inheritance.md          |  165 +++
 .../change-the-prototype-to-a-new-object.md   |  103 ++
 .../create-a-basic-javascript-object.md       |   69 ++
 .../create-a-method-on-an-object.md           |   70 ++
 .../define-a-constructor-function.md          |   67 +
 ...xtend-constructors-to-receive-arguments.md |   89 ++
 .../inherit-behaviors-from-a-supertype.md     |  127 ++
 .../iterate-over-all-properties.md            |  106 ++
 ...ode-more-reusable-with-the-this-keyword.md |   75 ++
 .../override-inherited-methods.md             |  100 ++
 ...or-property-when-changing-the-prototype.md |   86 ++
 ...reset-an-inherited-constructor-property.md |   91 ++
 ...-prototype-to-an-instance-of-the-parent.md |   79 ++
 .../understand-own-properties.md              |  104 ++
 .../understand-the-constructor-property.md    |   85 ++
 ...iately-invoked-function-expression-iife.md |   83 ++
 .../understand-the-prototype-chain.md         |   74 ++
 ...d-where-an-objects-prototype-comes-from.md |   63 +
 .../use-a-constructor-to-create-objects.md    |   80 ++
 ...mmon-behavior-between-unrelated-objects.md |  111 ++
 .../use-an-iife-to-create-a-module.md         |  106 ++
 ...n-object-from-being-modified-externally.md |   81 ++
 ...n-to-access-the-properties-of-an-object.md |   62 +
 ...inheritance-so-you-dont-repeat-yourself.md |  142 +++
 ...ype-properties-to-reduce-duplicate-code.md |   77 ++
 ...-an-objects-constructor-with-instanceof.md |   79 ++
 .../check-for-all-or-none.md                  |   77 ++
 .../check-for-mixed-grouping-of-characters.md |   90 ++
 .../regular-expressions/extract-matches.md    |   73 ++
 .../find-characters-with-lazy-matching.md     |   61 +
 .../find-more-than-the-first-match.md         |   85 ++
 .../find-one-or-more-criminals-in-a-hunt.md   |  108 ++
 .../ignore-case-while-matching.md             |  109 ++
 ...ral-string-with-different-possibilities.md |   90 ++
 .../match-all-letters-and-numbers.md          |   98 ++
 .../match-all-non-numbers.md                  |   85 ++
 .../regular-expressions/match-all-numbers.md  |   85 ++
 .../match-anything-with-wildcard-period.md    |  119 ++
 .../match-beginning-string-patterns.md        |   73 ++
 ...characters-that-occur-one-or-more-times.md |   59 +
 ...haracters-that-occur-zero-or-more-times.md |   96 ++
 .../match-ending-string-patterns.md           |   66 +
 ...atch-everything-but-letters-and-numbers.md |   92 ++
 .../match-letters-of-the-alphabet.md          |   71 ++
 .../match-literal-strings.md                  |   74 ++
 .../match-non-whitespace-characters.md        |   78 ++
 ...tch-numbers-and-letters-of-the-alphabet.md |   63 +
 ...e-character-with-multiple-possibilities.md |   85 ++
 .../match-single-characters-not-specified.md  |   57 +
 .../regular-expressions/match-whitespace.md   |   77 ++
 .../positive-and-negative-lookahead.md        |  122 ++
 .../remove-whitespace-from-start-and-end.md   |   61 +
 .../restrict-possible-usernames.md            |  136 ++
 .../reuse-patterns-using-capture-groups.md    |  115 ++
 .../specify-exact-number-of-matches.md        |   92 ++
 ...pecify-only-the-lower-number-of-matches.md |   95 ++
 ...ecify-upper-and-lower-number-of-matches.md |   93 ++
 ...se-capture-groups-to-search-and-replace.md |   88 ++
 .../using-the-test-method.md                  |   59 +
 ...dd-elements-within-your-bootstrap-wells.md |   90 ++
 ...ont-awesome-icons-to-all-of-our-buttons.md |  178 +++
 .../add-font-awesome-icons-to-our-buttons.md  |  195 +++
 ...add-id-attributes-to-bootstrap-elements.md |   93 ++
 ...pply-the-default-bootstrap-button-style.md |   77 ++
 ...call-out-optional-actions-with-btn-info.md |  175 +++
 .../bootstrap/center-text-with-bootstrap.md   |  157 +++
 ...create-a-block-element-bootstrap-button.md |  185 +++
 .../bootstrap/create-a-bootstrap-button.md    |  176 +++
 .../bootstrap/create-a-bootstrap-headline.md  |   67 +
 .../bootstrap/create-a-bootstrap-row.md       |   68 +
 ...a-class-to-target-with-jquery-selectors.md |   71 ++
 .../bootstrap/create-a-custom-heading.md      |  177 +++
 .../bootstrap/create-bootstrap-wells.md       |   71 ++
 .../ditch-custom-css-for-bootstrap.md         |  188 +++
 .../give-each-element-a-unique-id.md          |  125 ++
 ...-within-a-bootstrap-container-fluid-div.md |   53 +
 .../bootstrap/label-bootstrap-buttons.md      |  105 ++
 .../bootstrap/label-bootstrap-wells.md        |  101 ++
 ...rm-elements-responsively-with-bootstrap.md |  215 ++++
 .../make-images-mobile-responsive.md          |  176 +++
 .../responsively-style-checkboxes.md          |  192 +++
 .../responsively-style-radio-buttons.md       |  176 +++
 .../bootstrap/split-your-bootstrap-row.md     |   57 +
 .../style-text-inputs-as-form-controls.md     |  202 +++
 ...aste-the-bootstrap-button-color-rainbow.md |  167 +++
 .../use-a-span-to-target-inline-elements.md   |  185 +++
 .../bootstrap/use-comments-to-clarify-code.md |   98 ++
 ...-design-with-bootstrap-fluid-containers.md |  170 +++
 ...strap-grid-to-put-elements-side-by-side.md |  196 +++
 ...s-of-a-dangerous-action-with-btn-danger.md |  176 +++
 .../build-a-25-5-clock.md                     |   81 ++
 .../build-a-drum-machine.md                   |   51 +
 .../build-a-javascript-calculator.md          |   62 +
 .../build-a-markdown-previewer.md             |   39 +
 .../build-a-random-quote-machine.md           |   49 +
 ...nge-text-inside-an-element-using-jquery.md |  131 ++
 ...ange-the-css-of-an-element-using-jquery.md |  119 ++
 .../jquery/clone-an-element-using-jquery.md   |  121 ++
 .../jquery/delete-your-jquery-functions.md    |  125 ++
 .../jquery/disable-an-element-using-jquery.md |  120 ++
 ...how-script-tags-and-document-ready-work.md |  118 ++
 .../jquery/remove-an-element-using-jquery.md  |  109 ++
 ...ove-classes-from-an-element-with-jquery.md |  122 ++
 ...ecific-child-of-an-element-using-jquery.md |  144 +++
 .../target-elements-by-class-using-jquery.md  |  113 ++
 .../target-elements-by-id-using-jquery.md     |  123 ++
 .../target-even-elements-using-jquery.md      |  139 +++
 ...ml-elements-with-selectors-using-jquery.md |  118 ++
 ...the-children-of-an-element-using-jquery.md |  125 ++
 ...t-the-parent-of-an-element-using-jquery.md |  140 +++
 ...-element-with-multiple-jquery-selectors.md |  143 +++
 ...e-appendto-to-move-elements-with-jquery.md |  117 ++
 .../use-jquery-to-modify-the-entire-page.md   |  118 ++
 .../react-and-redux/connect-redux-to-react.md |  156 +++
 .../connect-redux-to-the-messages-app.md      |  300 +++++
 .../extract-local-state-into-redux.md         |  397 ++++++
 .../extract-state-logic-to-redux.md           |  115 ++
 .../getting-started-with-react-redux.md       |  102 ++
 .../manage-state-locally-first.md             |  250 ++++
 .../react-and-redux/map-dispatch-to-props.md  |  107 ++
 .../react-and-redux/map-state-to-props.md     |   69 ++
 .../moving-forward-from-here.md               |   69 ++
 .../use-provider-to-connect-redux-to-react.md |  263 ++++
 .../react/access-props-using-this.props.md    |  148 +++
 .../react/add-comments-in-jsx.md              |   82 ++
 .../react/add-event-listeners.md              |  179 +++
 .../react/add-inline-styles-in-react.md       |  112 ++
 .../react/bind-this-to-a-class-method.md      |  136 ++
 ...-conditionally-based-on-component-state.md |  176 +++
 .../react/compose-react-components.md         |  199 +++
 .../react/create-a-complex-jsx-element.md     |  110 ++
 .../create-a-component-with-composition.md    |  134 ++
 .../react/create-a-controlled-form.md         |  220 ++++
 .../react/create-a-controlled-input.md        |  150 +++
 .../react/create-a-react-component.md         |  102 ++
 .../react/create-a-simple-jsx-element.md      |   57 +
 .../react/create-a-stateful-component.md      |  134 ++
 ...create-a-stateless-functional-component.md |  102 ++
 .../react/define-an-html-class-in-jsx.md      |   62 +
 ...sibling-elements-a-unique-key-attribute.md |  147 +++
 .../react/introducing-inline-styles.md        |  103 ++
 .../learn-about-self-closing-jsx-tags.md      |   75 ++
 ...e-re-renders-with-shouldcomponentupdate.md |  187 +++
 .../react/override-default-props.md           |  112 ++
 .../react/pass-a-callback-as-props.md         |  217 ++++
 .../react/pass-an-array-as-props.md           |  186 +++
 ...ops-to-a-stateless-functional-component.md |  164 +++
 ...pass-state-as-props-to-child-components.md |  145 +++
 .../render-a-class-component-to-the-dom.md    |  159 +++
 .../react/render-conditionally-from-props.md  |  307 +++++
 .../react/render-html-elements-to-the-dom.md  |   75 ++
 ...react-on-the-server-with-rendertostring.md |   76 ++
 ...state-in-the-user-interface-another-way.md |  119 ++
 .../render-state-in-the-user-interface.md     |  113 ++
 .../react/render-with-an-if-else-condition.md |  155 +++
 ...ps-with-stateless-functional-components.md |  145 +++
 .../react/set-state-with-this.setstate.md     |  143 +++
 .../use--for-a-more-concise-conditional.md    |  146 +++
 ...ry-expression-for-conditional-rendering.md |  280 +++++
 ...anced-javascript-in-react-render-method.md |  334 +++++
 ...y.filter-to-dynamically-filter-an-array.md |  236 ++++
 ...rray.map-to-dynamically-render-elements.md |  265 ++++
 .../react/use-default-props.md                |   78 ++
 ...roptypes-to-define-the-props-you-expect.md |  132 ++
 .../use-react-to-render-nested-components.md  |  150 +++
 .../react/use-state-to-toggle-an-element.md   |  189 +++
 ...-the-lifecycle-method-componentdidmount.md |  127 ++
 ...the-lifecycle-method-componentwillmount.md |   87 ++
 .../write-a-react-component-from-scratch.md   |   84 ++
 .../react/write-a-simple-counter.md           |  146 +++
 .../redux/combine-multiple-reducers.md        |  175 +++
 .../copy-an-object-with-object.assign.md      |  133 ++
 .../redux/create-a-redux-store.md             |   61 +
 .../redux/define-a-redux-action.md            |   55 +
 .../redux/define-an-action-creator.md         |   57 +
 .../redux/dispatch-an-action-event.md         |   85 ++
 .../redux/get-state-from-the-redux-store.md   |   55 +
 .../redux/handle-an-action-in-the-store.md    |  108 ++
 .../redux/never-mutate-state.md               |  133 ++
 .../redux/register-a-store-listener.md        |  118 ++
 .../redux/remove-an-item-from-an-array.md     |  114 ++
 .../redux/send-action-data-to-the-store.md    |  107 ++
 ...ch-statement-to-handle-multiple-actions.md |  152 +++
 .../redux/use-const-for-action-types.md       |  202 +++
 ...ddleware-to-handle-asynchronous-actions.md |  170 +++
 .../use-the-spread-operator-on-arrays.md      |  114 ++
 .../redux/write-a-counter-with-redux.md       |  122 ++
 ...yle-until-a-condition-is-met-with-while.md |  117 ++
 .../sass/create-reusable-css-with-mixins.md   |  132 ++
 ...ne-set-of-css-styles-to-another-element.md |  116 ++
 .../sass/nest-css-with-sass.md                |  105 ++
 ...tyles-into-smaller-chunks-with-partials.md |   47 +
 .../sass/store-data-with-sass-variables.md    |  121 ++
 .../use-each-to-map-over-items-in-a-list.md   |  135 ++
 .../sass/use-for-to-create-a-sass-loop.md     |  139 +++
 ...if-and-else-to-add-logic-to-your-styles.md |  145 +++
 .../visualize-data-with-a-bar-chart.md        |   53 +
 .../visualize-data-with-a-choropleth-map.md   |   52 +
 .../visualize-data-with-a-heat-map.md         |   61 +
 ...visualize-data-with-a-scatterplot-graph.md |   57 +
 .../visualize-data-with-a-treemap-diagram.md  |   53 +
 .../add-a-hover-effect-to-a-d3-element.md     |  118 ++
 .../add-a-tooltip-to-a-d3-element.md          |  175 +++
 .../add-attributes-to-the-circle-elements.md  |  211 ++++
 .../add-axes-to-a-visualization.md            |  198 +++
 .../add-classes-with-d3.md                    |   93 ++
 .../add-document-elements-with-d3.md          |  105 ++
 .../add-inline-styling-to-elements.md         |   76 ++
 .../add-labels-to-d3-elements.md              |  153 +++
 .../add-labels-to-scatter-plot-circles.md     |  224 ++++
 .../change-styles-based-on-data.md            |  123 ++
 .../change-the-color-of-an-svg-element.md     |   88 ++
 .../change-the-presentation-of-a-bar-chart.md |  161 +++
 ...te-a-bar-for-each-data-point-in-the-set.md |  110 ++
 .../create-a-linear-scale-with-d3.md          |   88 ++
 .../create-a-scatterplot-with-svg-circles.md  |  103 ++
 .../display-shapes-with-svg.md                |  103 ++
 ...namically-change-the-height-of-each-bar.md |  145 +++
 ...ically-set-the-coordinates-for-each-bar.md |  151 +++
 .../invert-svg-elements.md                    |  143 +++
 .../learn-about-svg-in-d3.md                  |   93 ++
 .../select-a-group-of-elements-with-d3.md     |   82 ++
 .../set-a-domain-and-a-range-on-a-scale.md    |  106 ++
 .../style-d3-labels.md                        |  110 ++
 ...te-the-height-of-an-element-dynamically.md |  137 +++
 ...e-a-pre-defined-scale-to-place-elements.md |  347 ++++++
 .../use-dynamic-scales.md                     |  156 +++
 ...minimum-and-maximum-values-in-a-dataset.md |   90 ++
 .../work-with-data-in-d3.md                   |  105 ++
 .../work-with-dynamic-data-in-d3.md           |  122 ++
 .../access-the-json-data-from-an-api.md       |  167 +++
 .../change-text-with-click-events.md          |  140 +++
 .../convert-json-data-to-html.md              |  199 +++
 ...on-data-to-find-a-users-gps-coordinates.md |   98 ++
 ...t-json-with-the-javascript-fetch-method.md |  174 +++
 ...th-the-javascript-xmlhttprequest-method.md |  196 +++
 ...h-javascript-using-the-onclick-property.md |  140 +++
 ...th-the-javascript-xmlhttprequest-method.md |  206 ++++
 ...re-filter-json-to-get-the-data-you-need.md |  171 +++
 .../render-images-from-data-sources.md        |  163 +++
 .../exercise-tracker.md                       |  621 ++++++++++
 .../file-metadata-microservice.md             |   88 ++
 .../request-header-parser-microservice.md     |   77 ++
 .../timestamp-microservice.md                 |  156 +++
 .../url-shortener-microservice.md             |  119 ++
 ...hain-middleware-to-create-a-time-server.md |   79 ++
 .../get-data-from-post-requests.md            |   78 ++
 ...t-query-parameter-input-from-the-client.md |   67 +
 ...t-route-parameter-input-from-the-client.md |   65 +
 ...-a-root-level-request-logger-middleware.md |   57 +
 .../meet-the-node-console.md                  |   53 +
 .../serve-an-html-file.md                     |   51 +
 .../serve-json-on-a-specific-route.md         |   47 +
 .../serve-static-assets.md                    |   51 +
 .../start-a-working-express-server.md         |   57 +
 .../use-body-parser-to-parse-post-requests.md |   63 +
 .../use-the-.env-file.md                      |   54 +
 .../add-a-description-to-your-package.json.md |   52 +
 .../add-a-license-to-your-package.json.md     |   48 +
 .../add-a-version-to-your-package.json.md     |   46 +
 .../add-keywords-to-your-package.json.md      |   84 ++
 ...project-with-external-packages-from-npm.md |   77 ++
 ...e-of-any-node.js-project-or-npm-package.md |   60 +
 ...es-by-understanding-semantic-versioning.md |   73 ++
 ...remove-a-package-from-your-dependencies.md |   52 +
 ...he-latest-minor-version-of-a-dependency.md |   75 ++
 ...he-latest-patch-version-of-a-dependency.md |   75 ++
 ...-query-helpers-to-narrow-search-results.md |   76 ++
 .../mongodb-and-mongoose/create-a-model.md    |   88 ++
 .../create-and-save-a-record-of-a-model.md    |   56 +
 .../create-many-records-with-model.create.md  |   68 +
 ...delete-many-documents-with-model.remove.md |   57 +
 ...-document-using-model.findbyidandremove.md |   53 +
 .../install-and-set-up-mongoose.md            |   79 ++
 ...-updates-by-running-find-edit-then-save.md |   54 +
 ...a-document-using-model.findoneandupdate.md |   58 +
 .../use-model.find-to-search-your-database.md |   53 +
 ....findbyid-to-search-your-database-by-id.md |   48 +
 ...le-matching-document-from-your-database.md |   51 +
 .../announce-new-users.md                     |   90 ++
 .../authentication-strategies.md              |   96 ++
 .../authentication-with-socket.io.md          |  154 +++
 .../clean-up-your-project-with-modules.md     |   64 +
 .../communicate-by-emitting.md                |  107 ++
 .../create-new-middleware.md                  |   87 ++
 .../handle-a-disconnect.md                    |   69 ++
 .../hashing-your-passwords.md                 |   86 ++
 .../how-to-put-a-profile-together.md          |   57 +
 .../how-to-use-passport-strategies.md         |   79 ++
 ...nt-the-serialization-of-a-passport-user.md |   91 ++
 ...lementation-of-social-authentication-ii.md |  116 ++
 ...ementation-of-social-authentication-iii.md |   80 ++
 ...implementation-of-social-authentication.md |  108 ++
 .../logging-a-user-out.md                     |   81 ++
 .../registration-of-new-users.md              |  205 +++
 .../send-and-display-chat-messages.md         |   79 ++
 .../serialization-of-a-user-object.md         |  131 ++
 .../set-up-a-template-engine.md               |  116 ++
 .../set-up-passport.md                        |  130 ++
 .../set-up-the-environment.md                 |  148 +++
 .../use-a-template-engines-powers.md          |   77 ++
 ...ality-with-.deepequal-and-.notdeepequal.md |   79 ++
 .../compare-the-properties-of-two-elements.md |  109 ++
 .../learn-how-javascript-assertions-work.md   |   75 ++
 ...sponse-using-chai-http-iii---put-method.md |  148 +++
 ...esponse-using-chai-http-iv---put-method.md |  126 ++
 ...sts-on-api-endpoints-using-chai-http-ii.md |   75 ++
 ...-tests-on-api-endpoints-using-chai-http.md |  100 ++
 ...ional-tests-using-a-headless-browser-ii.md |  115 ++
 ...nctional-tests-using-a-headless-browser.md |  148 +++
 ...mulate-actions-using-a-headless-browser.md |   72 ++
 .../test-for-truthiness.md                    |  101 ++
 .../test-if-a-string-contains-a-substring.md  |   79 ++
 ...f-a-value-falls-within-a-specific-range.md |   87 ++
 .../test-if-a-value-is-a-string.md            |   93 ++
 .../test-if-a-value-is-an-array.md            |   77 ++
 ...ue-is-of-a-specific-data-structure-type.md |  133 ++
 ...st-if-a-variable-or-function-is-defined.md |   95 ++
 .../test-if-an-array-contains-an-item.md      |   77 ++
 .../test-if-an-object-has-a-property.md       |   93 ++
 ...-object-is-an-instance-of-a-constructor.md |  115 ++
 ...s-below-or-at-least-as-large-as-another.md |  109 ++
 .../use-assert.isok-and-assert.isnotok.md     |   87 ++
 ...se-regular-expressions-to-test-a-string.md |   79 ++
 ...se-the-double-equals-to-assert-equality.md |  111 ++
 ...triple-equals-to-assert-strict-equality.md |  111 ++
 .../american-british-translator.md            |  337 +++++
 .../issue-tracker.md                          |  369 ++++++
 .../metric-imperial-converter.md              |  318 +++++
 .../personal-library.md                       |  220 ++++
 .../sudoku-solver.md                          |  407 ++++++
 .../build-your-own-functions.md               |   71 ++
 .../comparing-and-sorting-tuples.md           |   61 +
 .../conditional-execution.md                  |   54 +
 .../data-visualization-mailing-lists.md       |   56 +
 .../data-visualization-page-rank.md           |   34 +
 .../dictionaries-and-loops.md                 |   53 +
 .../dictionaries-common-applications.md       |   47 +
 .../files-as-a-sequence.md                    |   44 +
 .../intermediate-expressions.md               |   56 +
 .../intermediate-strings.md                   |   53 +
 .../introduction-elements-of-python.md        |   40 +
 .../introduction-hardware-achitecture.md      |   34 +
 .../introduction-python-as-a-language.md      |   43 +
 .../introduction-why-program.md               |   46 +
 .../iterations-definite-loops.md              |   43 +
 .../iterations-loop-idioms.md                 |   49 +
 .../iterations-more-patterns.md               |   52 +
 .../loops-and-iterations.md                   |   55 +
 .../make-a-relational-database.md             |   52 +
 .../more-conditional-structures.md            |   60 +
 .../networking-protocol.md                    |   38 +
 .../networking-text-processing.md             |   34 +
 .../networking-using-urllib-in-python.md      |   41 +
 .../networking-web-scraping-with-python.md    |   60 +
 .../networking-with-python.md                 |   38 +
 .../networking-write-a-web-browser.md         |   54 +
 .../python-for-everybody/object-lifecycle.md  |   71 ++
 .../objects-a-sample-class.md                 |   62 +
 .../objects-inheritance.md                    |   38 +
 .../python-dictionaries.md                    |   59 +
 .../python-for-everybody/python-functions.md  |   42 +
 .../python-for-everybody/python-lists.md      |   43 +
 .../python-for-everybody/python-objects.md    |   38 +
 .../python-for-everybody/reading-files.md     |   42 +
 ...xpressions-matching-and-extracting-data.md |   45 +
 ...ular-expressions-practical-applications.md |   38 +
 .../regular-expressions.md                    |   42 +
 .../relational-database-design.md             |   38 +
 .../relational-databases-and-sqlite.md        |   44 +
 .../relational-databases-join-operation.md    |   34 +
 ...al-databases-many-to-many-relationships.md |   52 +
 ...ational-databases-relationship-building.md |   34 +
 ...-relationships-in-a-relational-database.md |   38 +
 .../python-for-everybody/strings-and-lists.md |   51 +
 .../python-for-everybody/strings-in-python.md |   63 +
 .../the-tuples-collection.md                  |   63 +
 .../using-web-services.md                     |   42 +
 .../variables-expressions-and-statements.md   |   38 +
 .../visualizing-data-with-python.md           |   42 +
 ...services-api-rate-limiting-and-security.md |   50 +
 .../python-for-everybody/web-services-apis.md |   38 +
 .../python-for-everybody/web-services-json.md |   60 +
 .../web-services-service-oriented-approach.md |   34 +
 .../web-services-xml-schema.md                |   34 +
 .../python-for-everybody/web-services-xml.md  |   47 +
 .../working-with-lists.md                     |   38 +
 .../arithmetic-formatter.md                   |  100 ++
 .../budget-app.md                             |  102 ++
 .../polygon-area-calculator.md                |  112 ++
 .../probability-calculator.md                 |   86 ++
 .../time-calculator.md                        |   79 ++
 .../data-analysis-example-a.md                |   47 +
 .../data-analysis-example-b.md                |   43 +
 .../data-cleaning-and-visualizations.md       |   47 +
 .../data-cleaning-duplicates.md               |   43 +
 .../data-cleaning-introduction.md             |   62 +
 .../data-cleaning-with-dataframes.md          |   74 ++
 .../how-to-use-jupyter-notebooks-intro.md     |   43 +
 .../introduction-to-data-analysis.md          |   44 +
 .../jupyter-notebooks-cells.md                |   42 +
 ...-notebooks-importing-and-exporting-data.md |   51 +
 .../numpy-algebra-and-size.md                 |   47 +
 .../numpy-arrays.md                           |   63 +
 .../numpy-boolean-arrays.md                   |   61 +
 .../numpy-introduction-a.md                   |   43 +
 .../numpy-introduction-b.md                   |   47 +
 .../numpy-operations.md                       |   54 +
 ...onal-selection-and-modifying-dataframes.md |   77 ++
 .../pandas-creating-columns.md                |   62 +
 .../pandas-dataframes.md                      |   70 ++
 ...ndas-indexing-and-conditional-selection.md |   69 ++
 .../pandas-introduction.md                    |   72 ++
 .../parsing-html-and-saving-data.md           |   47 +
 .../python-functions-and-collections.md       |   43 +
 .../python-introduction.md                    |   47 +
 .../python-iteration-and-modules.md           |   60 +
 .../reading-data-csv-and-txt.md               |   59 +
 .../reading-data-from-databases.md            |   43 +
 .../reading-data-introduction.md              |   76 ++
 .../demographic-data-analyzer.md              |   79 ++
 ...-variance-standard-deviation-calculator.md |   81 ++
 .../medical-data-visualizer.md                |   91 ++
 .../page-view-time-series-visualizer.md       |   61 +
 .../sea-level-predictor.md                    |   66 +
 ...ng-and-changing-elements,-rows,-columns.md |   54 +
 .../numpy/basics-of-numpy.md                  |   49 +
 .../numpy/copying-arrays-warning.md           |   48 +
 .../numpy/initialize-array-problem.md         |   65 +
 .../numpy/initializing-different-arrays.md    |   48 +
 .../loading-data-and-advanced-indexing.md     |   60 +
 .../numpy/mathematics.md                      |   53 +
 .../numpy/reorganizing-arrays.md              |   53 +
 .../numpy/what-is-numpy.md                    |   38 +
 .../anonymous-message-board.md                |  393 ++++++
 .../port-scanner.md                           |   97 ++
 .../secure-real-time-multiplayer-game.md      |  186 +++
 .../sha-1-password-cracker.md                 |   74 ++
 .../stock-price-checker.md                    |  136 ++
 ...ur-site-via-https-only-with-helmet.hsts.md |   63 +
 ...-response-mime-type-with-helmet.nosniff.md |   42 +
 ...lmet-using-the-parent-helmet-middleware.md |   50 +
 ...client-side-caching-with-helmet.nocache.md |   47 +
 ...fetching-with-helmet.dnsprefetchcontrol.md |   44 +
 ...sh-and-compare-passwords-asynchronously.md |   81 ++
 ...ash-and-compare-passwords-synchronously.md |   66 +
 ...-information-using-helmet.hidepoweredby.md |   40 +
 .../install-and-require-helmet.md             |   53 +
 ...-of-clickjacking-with-helmet.frameguard.md |   64 +
 ...pting-xss-attacks-with-helmet.xssfilter.md |   51 +
 ...ing-untrusted-html-with-helmet.ienoopen.md |   44 +
 ...olicy-with-helmet.contentsecuritypolicy.md |   71 ++
 .../understand-bcrypt-hashes.md               |   72 ++
 .../creating-a-tcp-client.md                  |   34 +
 .../developing-a-banner-grabber.md            |   47 +
 .../developing-a-port-scanner.md              |   34 +
 .../developing-an-nmap-scanner-part-1.md      |   34 +
 .../developing-an-nmap-scanner-part-2.md      |   34 +
 .../introduction-and-setup.md                 |   34 +
 ...nding-sockets-and-creating-a-tcp-server.md |   34 +
 .../find-the-symmetric-difference.md          |  150 +++
 .../algorithms/implement-binary-search.md     |  155 +++
 .../algorithms/implement-bubble-sort.md       |  138 +++
 .../algorithms/implement-insertion-sort.md    |  135 ++
 .../algorithms/implement-merge-sort.md        |  156 +++
 .../algorithms/implement-quick-sort.md        |  142 +++
 .../algorithms/implement-selection-sort.md    |  131 ++
 .../algorithms/inventory-update.md            |  228 ++++
 .../algorithms/no-repeats-please.md           |  126 ++
 .../algorithms/pairwise.md                    |  100 ++
 ...d-a-new-element-to-a-binary-search-tree.md |  191 +++
 ...ts-at-a-specific-index-in-a-linked-list.md |  161 +++
 .../data-structures/adjacency-list.md         |   91 ++
 .../data-structures/adjacency-matrix.md       |  108 ++
 .../data-structures/breadth-first-search.md   |  182 +++
 ...ment-is-present-in-a-binary-search-tree.md |  175 +++
 .../check-if-binary-search-tree.md            |  154 +++
 .../create-a-circular-queue.md                |  235 ++++
 .../create-a-doubly-linked-list.md            |  216 ++++
 .../data-structures/create-a-hash-table.md    |  260 ++++
 .../create-a-linked-list-class.md             |  146 +++
 .../create-a-map-data-structure.md            |  204 +++
 .../create-a-priority-queue-class.md          |  231 ++++
 .../data-structures/create-a-queue-class.md   |  174 +++
 .../data-structures/create-a-set-class.md     |  219 ++++
 .../data-structures/create-a-stack-class.md   |  167 +++
 .../create-a-trie-search-tree.md              |  151 +++
 .../create-an-es6-javascript-map.md           |   53 +
 .../create-and-add-to-sets-in-es6.md          |   92 ++
 ...ete-a-leaf-node-in-a-binary-search-tree.md |  216 ++++
 ...-with-one-child-in-a-binary-search-tree.md |  286 +++++
 ...th-two-children-in-a-binary-search-tree.md |  399 ++++++
 .../data-structures/depth-first-search.md     |  225 ++++
 ...-maximum-height-of-a-binary-search-tree.md |  346 ++++++
 ...d-maximum-value-in-a-binary-search-tree.md |  369 ++++++
 .../implement-heap-sort-with-a-min-heap.md    |  144 +++
 .../data-structures/incidence-matrix.md       |  110 ++
 .../insert-an-element-into-a-max-heap.md      |  165 +++
 .../data-structures/invert-a-binary-tree.md   |  192 +++
 .../learn-how-a-stack-works.md                |   71 ++
 ...erform-a-difference-on-two-sets-of-data.md |  219 ++++
 ...form-a-subset-check-on-two-sets-of-data.md |  302 +++++
 .../perform-a-union-on-two-sets.md            |  155 +++
 ...orm-an-intersection-on-two-sets-of-data.md |  184 +++
 .../remove-an-element-from-a-max-heap.md      |  171 +++
 ...ve-elements-from-a-linked-list-by-index.md |  242 ++++
 .../remove-elements-from-a-linked-list.md     |  210 ++++
 .../remove-items-from-a-set-in-es6.md         |   67 +
 .../reverse-a-doubly-linked-list.md           |  205 +++
 .../search-within-a-linked-list.md            |  293 +++++
 .../data-structures/typed-arrays.md           |   94 ++
 .../use-.has-and-.size-on-an-es6-set.md       |   73 ++
 ...th-first-search-in-a-binary-search-tree.md |  261 ++++
 ...th-first-search-in-a-binary-search-tree.md |  328 +++++
 ...pread-and-notes-for-es5-set-integration.md |   59 +
 .../work-with-nodes-in-a-linked-list.md       |   55 +
 .../problem-1-multiples-of-3-and-5.md         |   73 ++
 .../problem-10-summation-of-primes.md         |  106 ++
 .../problem-100-arranged-probability.md       |   87 ++
 .../problem-101-optimum-polynomial.md         |   58 +
 .../problem-102-triangle-containment.md       |  156 +++
 ...problem-103-special-subset-sums-optimum.md |   56 +
 .../problem-104-pandigital-fibonacci-ends.md  |   44 +
 ...problem-105-special-subset-sums-testing.md |   59 +
 ...em-106-special-subset-sums-meta-testing.md |   49 +
 .../problem-107-minimal-network.md            |   71 ++
 .../problem-108-diophantine-reciprocals-i.md  |   48 +
 .../project-euler/problem-109-darts.md        |   57 +
 .../problem-11-largest-product-in-a-grid.md   |  182 +++
 .../problem-110-diophantine-reciprocals-ii.md |   46 +
 .../problem-111-primes-with-runs.md           |   61 +
 .../problem-112-bouncy-numbers.md             |   48 +
 .../problem-113-non-bouncy-numbers.md         |   46 +
 ...oblem-114-counting-block-combinations-i.md |   44 +
 ...blem-115-counting-block-combinations-ii.md |   50 +
 .../problem-116-red-green-or-blue-tiles.md    |   54 +
 .../problem-117-red-green-and-blue-tiles.md   |   44 +
 .../problem-118-pandigital-prime-sets.md      |   40 +
 .../problem-119-digit-power-sum.md            |   44 +
 ...m-12-highly-divisible-triangular-number.md |  139 +++
 .../problem-120-square-remainders.md          |   42 +
 .../problem-121-disc-game-prize-fund.md       |   44 +
 .../problem-122-efficient-exponentiation.md   |   57 +
 .../problem-123-prime-square-remainders.md    |   44 +
 .../problem-124-ordered-radicals.md           |  142 +++
 .../problem-125-palindromic-sums.md           |   79 ++
 .../problem-126-cuboid-layers.md              |   50 +
 .../project-euler/problem-127-abc-hits.md     |   56 +
 .../problem-128-hexagonal-tile-differences.md |  106 ++
 .../problem-129-repunit-divisibility.md       |   44 +
 .../project-euler/problem-13-large-sum.md     |  286 +++++
 ...-composites-with-prime-repunit-property.md |   46 +
 .../problem-131-prime-cube-partnership.md     |   44 +
 .../problem-132-large-repunit-factors.md      |   42 +
 .../problem-133-repunit-nonfactors.md         |   44 +
 .../problem-134-prime-pair-connection.md      |   42 +
 .../problem-135-same-differences.md           |   44 +
 .../problem-136-singleton-difference.md       |   44 +
 .../problem-137-fibonacci-golden-nuggets.md   |   59 +
 ...problem-138-special-isosceles-triangles.md |   46 +
 .../problem-139-pythagorean-tiles.md          |   46 +
 .../problem-14-longest-collatz-sequence.md    |  111 ++
 ...m-140-modified-fibonacci-golden-nuggets.md |   52 +
 ...ressive-numbers-n-which-are-also-square.md |   46 +
 .../problem-142-perfect-square-collection.md  |   38 +
 ...ting-the-torricelli-point-of-a-triangle.md |   46 +
 ...ng-multiple-reflections-of-a-laser-beam.md |   61 +
 ...ble-numbers-are-there-below-one-billion.md |   42 +
 ...oblem-146-investigating-a-prime-pattern.md |   40 +
 ...m-147-rectangles-in-cross-hatched-grids.md |   48 +
 .../problem-148-exploring-pascals-triangle.md |   54 +
 ...searching-for-a-maximum-sum-subsequence.md |   54 +
 .../project-euler/problem-15-lattice-paths.md |   68 +
 ...y-for-a-sub-triangle-having-minimum-sum.md |   63 +
 ...tandard-sizes-an-expected-value-problem.md |   52 +
 ...ng-one-half-as-a-sum-of-inverse-squares.md |   46 +
 ...lem-153-investigating-gaussian-integers.md |   84 ++
 .../problem-154-exploring-pascals-pyramid.md  |   46 +
 ...problem-155-counting-capacitor-circuits.md |   50 +
 .../problem-156-counting-digits.md            |   68 +
 ...em-157-solving-the-diophantine-equation.md |   47 +
 ...hically-after-its-neighbour-to-the-left.md |   54 +
 ...159-digital-root-sums-of-factorisations.md |   63 +
 .../problem-16-power-digit-sum.md             |   85 ++
 .../problem-160-factorial-trailing-digits.md  |   45 +
 .../project-euler/problem-161-triominoes.md   |   52 +
 .../problem-162-hexadecimal-numbers.md        |   58 +
 .../problem-163-cross-hatched-triangles.md    |   51 +
 ...s-have-a-sum-greater-than-a-given-value.md |   40 +
 .../problem-165-intersections.md              |   64 +
 .../project-euler/problem-166-criss-cross.md  |   48 +
 ...roblem-167-investigating-ulam-sequences.md |   46 +
 .../problem-168-number-rotations.md           |   82 ++
 ...an-be-expressed-as-a-sum-of-powers-of-2.md |   48 +
 .../problem-17-number-letter-counts.md        |  130 ++
 ...can-be-formed-by-concatenating-products.md |   49 +
 ...f-the-squares-of-the-digits-is-a-square.md |   46 +
 ...gating-numbers-with-few-repeated-digits.md |   38 +
 ...ent-hollow-square-laminae-can-be-formed.md |   44 +
 ...one-two-three-...-distinct-arrangements.md |   50 +
 ...an-be-expressed-as-a-sum-of-powers-of-2.md |   62 +
 ...-angled-triangles-that-share-a-cathetus.md |   40 +
 ...oblem-177-integer-angled-quadrilaterals.md |   48 +
 .../project-euler/problem-178-step-numbers.md |   46 +
 ...oblem-179-consecutive-positive-divisors.md |   38 +
 .../problem-18-maximum-path-sum-i.md          |  109 ++
 ...-zeros-of-a-function-of-three-variables.md |   53 +
 ...of-two-different-colours-can-be-grouped.md |   44 +
 .../problem-182-rsa-encryption.md             |  102 ++
 .../problem-183-maximum-product-of-parts.md   |   54 +
 ...lem-184-triangles-containing-the-origin.md |   46 +
 .../project-euler/problem-185-number-mind.md  |   66 +
 .../problem-186-connectedness-of-a-network.md |   57 +
 .../project-euler/problem-187-semiprimes.md   |   42 +
 ...188-the-hyperexponentiation-of-a-number.md |   44 +
 ...lem-189-tri-colouring-a-triangular-grid.md |   50 +
 .../problem-19-counting-sundays.md            |   76 ++
 ...oblem-190-maximising-a-weighted-product.md |   42 +
 .../problem-191-prize-strings.md              |   52 +
 .../problem-192-best-approximations.md        |   46 +
 .../problem-193-squarefree-numbers.md         |   40 +
 .../problem-194-coloured-configurations.md    |   46 +
 ...-triangles-with-one-angle-of-60-degrees.md |   46 +
 .../problem-196-prime-triplets.md             |   60 +
 ...viour-of-a-recursively-defined-sequence.md |   40 +
 .../problem-198-ambiguous-numbers.md          |   42 +
 .../problem-199-iterative-circle-packing.md   |   75 ++
 .../problem-2-even-fibonacci-numbers.md       |  103 ++
 .../problem-20-factorial-digit-sum.md         |   79 ++
 ...ontaining-the-contiguous-sub-string-200.md |   48 +
 .../problem-201-subsets-with-a-unique-sum.md  |   58 +
 .../project-euler/problem-202-laserbeam.md    |   46 +
 ...em-203-squarefree-binomial-coefficients.md |   50 +
 ...problem-204-generalised-hamming-numbers.md |   46 +
 .../project-euler/problem-205-dice-game.md    |   44 +
 .../problem-206-concealed-square.md           |   63 +
 ...problem-207-integer-partition-equations.md |   56 +
 .../project-euler/problem-208-robot-walks.md  |   46 +
 .../problem-209-circular-logic.md             |   58 +
 .../problem-21-amicable-numbers.md            |   84 ++
 .../problem-210-obtuse-angled-triangles.md    |   46 +
 .../problem-211-divisor-square-sum.md         |   42 +
 .../problem-212-combined-volume-of-cuboids.md |   57 +
 .../project-euler/problem-213-flea-circus.md  |   42 +
 .../problem-214-totient-chains.md             |   50 +
 .../problem-215-crack-free-walls.md           |   46 +
 ...-primality-of-numbers-of-the-form-2n2-1.md |   46 +
 .../problem-217-balanced-numbers.md           |   46 +
 ...blem-218-perfect-right-angled-triangles.md |   56 +
 .../problem-219-skew-cost-coding.md           |   50 +
 .../project-euler/problem-22-names-scores.md  |   90 ++
 .../problem-220-heighway-dragon.md            |   57 +
 .../problem-221-alexandrian-integers.md       |   49 +
 .../problem-222-sphere-packing.md             |   40 +
 ...lem-223-almost-right-angled-triangles-i.md |   40 +
 ...em-224-almost-right-angled-triangles-ii.md |   40 +
 .../problem-225-tribonacci-non-divisors.md    |   44 +
 .../problem-226-a-scoop-of-blancmange.md      |   46 +
 .../project-euler/problem-227-the-chase.md    |   50 +
 .../problem-228-minkowski-sums.md             |   51 +
 ...-229-four-representations-using-squares.md |   56 +
 .../problem-23-non-abundant-sums.md           |  101 ++
 .../problem-230-fibonacci-words.md            |   64 +
 ...-factorisation-of-binomial-coefficients.md |   44 +
 .../project-euler/problem-232-the-race.md     |   50 +
 .../problem-233-lattice-points-on-a-circle.md |   42 +
 .../problem-234-semidivisible-numbers.md      |   46 +
 ...em-235-an-arithmetic-geometric-sequence.md |   44 +
 .../problem-236-luxury-hampers.md             |   65 +
 ...blem-237-tours-on-a-4-x-n-playing-board.md |   49 +
 .../problem-238-infinite-string-tour.md       |   59 +
 .../problem-239-twenty-two-foolish-primes.md  |   42 +
 .../problem-24-lexicographic-permutations.md  |   66 +
 .../project-euler/problem-240-top-dice.md     |   44 +
 .../problem-241-perfection-quotients.md       |   44 +
 .../project-euler/problem-242-odd-triplets.md |   44 +
 .../project-euler/problem-243-resilience.md   |   50 +
 .../project-euler/problem-244-sliders.md      |   58 +
 .../project-euler/problem-245-coresilience.md |   48 +
 .../problem-246-tangents-to-an-ellipse.md     |   58 +
 .../problem-247-squares-under-a-hyperbola.md  |   56 +
 ...which-eulers-totient-function-equals-13.md |   40 +
 .../problem-249-prime-subset-sums.md          |   42 +
 .../problem-25-1000-digit-fibonacci-number.md |   85 ++
 .../project-euler/problem-250-250250.md       |   38 +
 .../problem-251-cardano-triplets.md           |   46 +
 .../project-euler/problem-252-convex-holes.md |   51 +
 .../project-euler/problem-253-tidying-up.md   |   69 ++
 .../problem-254-sums-of-digit-factorials.md   |   48 +
 .../problem-255-rounded-square-roots.md       |   67 +
 .../problem-256-tatami-free-rooms.md          |   56 +
 .../problem-257-angular-bisectors.md          |   46 +
 ...problem-258-a-lagged-fibonacci-sequence.md |   43 +
 .../problem-259-reachable-numbers.md          |   49 +
 .../problem-26-reciprocal-cycles.md           |   68 +
 .../project-euler/problem-260-stone-game.md   |   60 +
 .../problem-261-pivotal-square-sums.md        |   48 +
 .../problem-262-mountain-range.md             |   50 +
 ...roblem-263-an-engineers-dream-come-true.md |   57 +
 .../problem-264-triangle-centres.md           |   71 ++
 .../problem-265-binary-circles.md             |   53 +
 .../problem-266-pseudo-square-root.md         |   46 +
 .../project-euler/problem-267-billionaire.md  |   48 +
 ...ur-distinct-prime-factors-less-than-100.md |   42 +
 ...ynomials-with-at-least-one-integer-root.md |   54 +
 .../problem-27-quadratic-primes.md            |   78 ++
 .../problem-270-cutting-squares.md            |   48 +
 .../problem-271-modular-cubes-part-1.md       |   42 +
 .../problem-272-modular-cubes-part-2.md       |   42 +
 .../problem-273-sum-of-squares.md             |   48 +
 .../problem-274-divisibility-multipliers.md   |   52 +
 .../problem-275-balanced-sculptures.md        |   51 +
 .../problem-276-primitive-triangles.md        |   42 +
 ...problem-277-a-modified-collatz-sequence.md |   56 +
 ...m-278-linear-combinations-of-semiprimes.md |   44 +
 ...th-integral-sides-and-an-integral-angle.md |   38 +
 .../problem-28-number-spiral-diagonals.md     |   83 ++
 .../problem-280-ant-and-seeds.md              |   42 +
 .../problem-281-pizza-toppings.md             |   46 +
 .../problem-282-the-ackermann-function.md     |   45 +
 ...h-the-area--perimeter-ratio-is-integral.md |   48 +
 .../problem-284-steady-squares.md             |   50 +
 .../problem-285-pythagorean-odds.md           |   46 +
 .../problem-286-scoring-probabilities.md      |   42 +
 ...encoding-a-simple-compression-algorithm.md |   59 +
 .../problem-288-an-enormous-factorial.md      |   49 +
 .../problem-289-eulerian-cycles.md            |   50 +
 .../problem-29-distinct-powers.md             |   86 ++
 .../problem-290-digital-signature.md          |   38 +
 .../problem-291-panaitopol-primes.md          |   40 +
 .../problem-292-pythagorean-polygons.md       |   51 +
 .../problem-293-pseudo-fortunate-numbers.md   |   46 +
 ...oblem-294-sum-of-digits---experience-23.md |   47 +
 .../problem-295-lenticular-holes.md           |   59 +
 ...roblem-296-angular-bisector-and-tangent.md |   44 +
 .../problem-297-zeckendorf-representation.md  |   52 +
 .../problem-298-selective-amnesia.md          |   57 +
 .../problem-299-three-similar-triangles.md    |   56 +
 .../problem-3-largest-prime-factor.md         |   95 ++
 .../problem-30-digit-n-powers.md              |   74 ++
 .../problem-300-protein-folding.md            |   56 +
 .../project-euler/problem-301-nim.md          |   58 +
 .../problem-302-strong-achilles-numbers.md    |   50 +
 ...problem-303-multiples-with-small-digits.md |   44 +
 .../project-euler/problem-304-primonacci.md   |   46 +
 .../problem-305-reflexive-position.md         |   46 +
 .../problem-306-paper-strip-game.md           |   54 +
 .../project-euler/problem-307-chip-defects.md |   42 +
 ...8-an-amazing-prime-generating-automaton.md |   54 +
 .../problem-309-integer-ladders.md            |   46 +
 .../project-euler/problem-31-coin-sums.md     |   77 ++
 .../project-euler/problem-310-nim-square.md   |   46 +
 ...em-311-biclinic-integral-quadrilaterals.md |   50 +
 ...em-312-cyclic-paths-on-sierpiski-graphs.md |   53 +
 .../project-euler/problem-313-sliding-game.md |   48 +
 .../problem-314-the-mouse-on-the-moon.md      |   50 +
 .../problem-315-digital-root-clocks.md        |   72 ++
 ...oblem-316-numbers-in-decimal-expansions.md |   58 +
 .../project-euler/problem-317-firecracker.md  |   42 +
 .../project-euler/problem-318-2011-nines.md   |   56 +
 .../problem-319-bounded-sequences.md          |   48 +
 .../problem-32-pandigital-products.md         |  118 ++
 ...-factorials-divisible-by-a-huge-integer.md |   44 +
 .../problem-321-swapping-counters.md          |   52 +
 ...2-binomial-coefficients-divisible-by-10.md |   42 +
 ...itwise-or-operations-on-random-integers.md |   47 +
 .../problem-324-building-a-tower.md           |   46 +
 .../problem-325-stone-game-ii.md              |   50 +
 .../problem-326-modulo-summations.md          |   50 +
 .../problem-327-rooms-of-doom.md              |   62 +
 .../problem-328-lowest-cost-search.md         |   56 +
 .../project-euler/problem-329-prime-frog.md   |   54 +
 .../problem-33-digit-cancelling-fractions.md  |  102 ++
 .../problem-330-eulers-number.md              |   54 +
 .../project-euler/problem-331-cross-flips.md  |   52 +
 .../problem-332-spherical-triangles.md        |   52 +
 .../problem-333-special-partitions.md         |   53 +
 .../problem-334-spilling-the-beans.md         |   53 +
 .../problem-335-gathering-the-beans.md        |   46 +
 .../problem-336-maximix-arrangements.md       |   58 +
 ...problem-337-totient-stairstep-sequences.md |   52 +
 ...blem-338-cutting-rectangular-grid-paper.md |   52 +
 .../problem-339-peredur-fab-efrawg.md         |   44 +
 .../problem-34-digit-factorials.md            |   50 +
 .../problem-340-crazy-function.md             |   47 +
 ...em-341-golombs-self-describing-sequence.md |   47 +
 ...m-342-the-totient-of-a-square-is-a-cube.md |   45 +
 .../problem-343-fractional-sequences.md       |   55 +
 .../problem-344-silver-dollar-game.md         |   56 +
 .../project-euler/problem-345-matrix-sum.md   |   55 +
 .../problem-346-strong-repunits.md            |   42 +
 ...largest-integer-divisible-by-two-primes.md |   48 +
 .../problem-348-sum-of-a-square-and-a-cube.md |   48 +
 .../project-euler/problem-349-langtons-ant.md |   45 +
 .../problem-35-circular-primes.md             |  132 ++
 ...e-least-greatest-and-the-greatest-least.md |   50 +
 .../problem-351-hexagonal-orchards.md         |   48 +
 .../project-euler/problem-352-blood-tests.md  |   70 ++
 .../project-euler/problem-353-risky-moon.md   |   54 +
 ...oblem-354-distances-in-a-bees-honeycomb.md |   46 +
 .../problem-355-maximal-coprime-subset.md     |   42 +
 ...-356-largest-roots-of-cubic-polynomials.md |   44 +
 .../problem-357-prime-generating-integers.md  |   42 +
 .../problem-358-cyclic-numbers.md             |   57 +
 .../problem-359-hilberts-new-hotel.md         |   62 +
 .../problem-36-double-base-palindromes.md     |   66 +
 .../project-euler/problem-360-scary-sphere.md |   48 +
 ...-361-subsequence-of-thue-morse-sequence.md |   55 +
 .../problem-362-squarefree-factors.md         |   52 +
 .../project-euler/problem-363-bzier-curves.md |   56 +
 .../problem-364-comfortable-distance.md       |   50 +
 ...problem-365-a-huge-binomial-coefficient.md |   42 +
 .../problem-366-stone-game-iii.md             |   68 +
 .../project-euler/problem-367-bozo-sort.md    |   56 +
 .../problem-368-a-kempner-like-series.md      |   51 +
 .../project-euler/problem-369-badugi.md       |   42 +
 .../problem-37-truncatable-primes.md          |   66 +
 .../problem-370-geometric-triangles.md        |   44 +
 .../problem-371-licence-plates.md             |   48 +
 .../problem-372-pencils-of-rays.md            |   44 +
 .../problem-373-circumscribed-circles.md      |   44 +
 ...m-374-maximum-integer-partition-product.md |   54 +
 .../problem-375-minimum-of-subsequences.md    |   47 +
 .../problem-376-nontransitive-sets-of-dice.md |   69 ++
 ...problem-377-sum-of-digits-experience-13.md |   46 +
 .../problem-378-triangle-triples.md           |   44 +
 ...problem-379-least-common-multiple-count.md |   44 +
 .../problem-38-pandigital-multiples.md        |   98 ++
 .../problem-380-amazing-mazes.md              |   54 +
 .../problem-381-prime-k-factorial.md          |   48 +
 .../problem-382-generating-polygons.md        |   65 +
 ...isibility-comparison-between-factorials.md |   46 +
 .../problem-384-rudin-shapiro-sequence.md     |   65 +
 .../problem-385-ellipses-inside-triangles.md  |   55 +
 ...blem-386-maximum-length-of-an-antichain.md |   50 +
 .../problem-387-harshad-numbers.md            |   58 +
 .../problem-388-distinct-lines.md             |   44 +
 .../problem-389-platonic-dice.md              |   48 +
 .../problem-39-integer-right-triangles.md     |   91 ++
 ...th-non-rational-sides-and-integral-area.md |   46 +
 .../project-euler/problem-391-hopping-game.md |   59 +
 .../problem-392-enmeshed-unit-circle.md       |   58 +
 .../problem-393-migrating-ants.md             |   46 +
 .../project-euler/problem-394-eating-pie.md   |   53 +
 .../problem-395-pythagorean-tree.md           |   52 +
 .../problem-396-weak-goodstein-sequence.md    |   62 +
 .../problem-397-triangle-on-parabola.md       |   44 +
 .../project-euler/problem-398-cutting-rope.md |   42 +
 ...roblem-399-squarefree-fibonacci-numbers.md |   60 +
 .../problem-4-largest-palindrome-product.md   |   64 +
 .../problem-40-champernownes-constant.md      |   77 ++
 .../problem-400-fibonacci-tree-game.md        |   54 +
 .../problem-401-sum-of-squares-of-divisors.md |   46 +
 .../problem-402-integer-valued-polynomials.md |   51 +
 ...ce-points-enclosed-by-parabola-and-line.md |   46 +
 .../problem-404-crisscross-ellipses.md        |   54 +
 .../problem-405-a-rectangular-tiling.md       |   52 +
 .../problem-406-guessing-game.md              |   68 +
 .../project-euler/problem-407-idempotents.md  |   44 +
 ...lem-408-admissible-paths-through-a-grid.md |   46 +
 .../project-euler/problem-409-nim-extreme.md  |   48 +
 .../problem-41-pandigital-prime.md            |  117 ++
 .../problem-410-circle-and-tangent-line.md    |   46 +
 .../project-euler/problem-411-uphill-paths.md |   50 +
 .../problem-412-gnomon-numbering.md           |   52 +
 .../problem-413-one-child-numbers.md          |   46 +
 .../problem-414-kaprekar-constant.md          |   64 +
 .../project-euler/problem-415-titanic-sets.md |   46 +
 .../project-euler/problem-416-a-frogs-trip.md |   44 +
 .../problem-417-reciprocal-cycles-ii.md       |   53 +
 .../problem-418-factorisation-triples.md      |   47 +
 .../problem-419-look-and-say-sequence.md      |   65 +
 .../problem-42-coded-triangle-numbers.md      |   71 ++
 ...problem-420-2x2-positive-integer-matrix.md |   55 +
 .../problem-421-prime-factors-of-n151.md      |   50 +
 ...m-422-sequence-of-points-on-a-hyperbola.md |   54 +
 .../problem-423-consecutive-die-throws.md     |   59 +
 .../project-euler/problem-424-kakuro.md       |   77 ++
 .../problem-425-prime-connection.md           |   53 +
 .../problem-426-box-ball-system.md            |   61 +
 .../project-euler/problem-427-n-sequences.md  |   48 +
 .../problem-428-necklace-of-circles.md        |   59 +
 ...-429-sum-of-squares-of-unitary-divisors.md |   46 +
 .../problem-43-sub-string-divisibility.md     |  126 ++
 .../project-euler/problem-430-range-flips.md  |   50 +
 .../problem-431-square-space-silo.md          |   48 +
 .../project-euler/problem-432-totient-sum.md  |   42 +
 .../problem-433-steps-in-euclids-algorithm.md |   51 +
 .../project-euler/problem-434-rigid-graphs.md |   66 +
 ...em-435-polynomials-of-fibonacci-numbers.md |   44 +
 .../project-euler/problem-436-unfair-wager.md |   56 +
 .../problem-437-fibonacci-primitive-roots.md  |   56 +
 ...-part-of-polynomial-equations-solutions.md |   51 +
 .../problem-439-sum-of-sum-of-divisors.md     |   46 +
 .../problem-44-pentagon-numbers.md            |   77 ++
 .../problem-440-gcd-and-tiling.md             |   57 +
 ...he-inverse-summation-of-coprime-couples.md |   48 +
 .../problem-442-eleven-free-integers.md       |   44 +
 .../project-euler/problem-443-gcd-sequence.md |   50 +
 .../problem-444-the-roundtable-lottery.md     |   61 +
 .../problem-445-retractions-a.md              |   50 +
 .../problem-446-retractions-b.md              |   50 +
 .../problem-447-retractions-c.md              |   50 +
 ...oblem-448-average-least-common-multiple.md |   48 +
 .../problem-449-chocolate-covered-candy.md    |   46 +
 ...-45-triangular-pentagonal-and-hexagonal.md |   82 ++
 ...blem-450-hypocycloid-and-lattice-points.md |   63 +
 .../problem-451-modular-inverses.md           |   55 +
 .../problem-452-long-products.md              |   44 +
 .../problem-453-lattice-quadrilaterals.md     |   48 +
 ...problem-454-diophantine-reciprocals-iii.md |   46 +
 ...problem-455-powers-with-trailing-digits.md |   46 +
 ...-456-triangles-containing-the-origin-ii.md |   52 +
 ...polynomial-modulo-the-square-of-a-prime.md |   46 +
 .../problem-458-permutations-of-project.md    |   44 +
 .../problem-459-flipping-game.md              |   62 +
 .../problem-46-goldbachs-other-conjecture.md  |   99 ++
 .../problem-460-an-ant-on-the-move.md         |   57 +
 .../project-euler/problem-461-almost-pi.md    |  153 +++
 ...lem-462-permutation-of-3-smooth-numbers.md |   58 +
 ...problem-463-a-weird-recurrence-relation.md |   48 +
 ...roblem-464-mbius-function-and-intervals.md |   57 +
 .../problem-465-polar-polygons.md             |   54 +
 ...istinct-terms-in-a-multiplication-table.md |   54 +
 .../project-euler/problem-467-superinteger.md |   59 +
 ...mooth-divisors-of-binomial-coefficients.md |   54 +
 .../project-euler/problem-469-empty-chairs.md |   48 +
 .../problem-47-distinct-primes-factors.md     |   91 ++
 .../project-euler/problem-470-super-ramvok.md |   50 +
 ...oblem-471-triangle-inscribed-in-ellipse.md |   60 +
 .../problem-472-comfortable-distance-ii.md    |   56 +
 .../problem-473-phigital-number-base.md       |   56 +
 .../problem-474-last-digits-of-divisors.md    |   44 +
 .../problem-475-music-festival.md             |   48 +
 .../problem-476-circle-packing-ii.md          |   44 +
 .../problem-477-number-sequence-game.md       |   62 +
 .../project-euler/problem-478-mixtures.md     |   56 +
 .../problem-479-roots-on-the-rise.md          |   46 +
 .../project-euler/problem-48-self-powers.md   |   80 ++
 .../problem-480-the-last-question.md          |   82 ++
 .../problem-49-prime-permutations.md          |   93 ++
 .../problem-5-smallest-multiple.md            |   83 ++
 .../problem-50-consecutive-prime-sum.md       |  123 ++
 .../problem-51-prime-digit-replacements.md    |  128 ++
 .../problem-52-permuted-multiples.md          |   81 ++
 .../problem-53-combinatoric-selections.md     |   89 ++
 .../project-euler/problem-54-poker-hands.md   | 1096 +++++++++++++++++
 .../problem-55-lychrel-numbers.md             |  113 ++
 .../problem-56-powerful-digit-sum.md          |  101 ++
 .../problem-57-square-root-convergents.md     |   98 ++
 .../project-euler/problem-58-spiral-primes.md |  105 ++
 .../problem-59-xor-decryption.md              |   58 +
 .../problem-6-sum-square-difference.md        |   78 ++
 .../problem-60-prime-pair-sets.md             |   46 +
 .../problem-61-cyclical-figurate-numbers.md   |  252 ++++
 .../problem-62-cubic-permutations.md          |   97 ++
 .../problem-63-powerful-digit-counts.md       |  122 ++
 .../problem-64-odd-period-square-roots.md     |  148 +++
 .../problem-65-convergents-of-e.md            |  117 ++
 .../problem-66-diophantine-equation.md        |  129 ++
 .../problem-67-maximum-path-sum-ii.md         |   96 ++
 .../problem-68-magic-5-gon-ring.md            |   71 ++
 .../problem-69-totient-maximum.md             |  110 ++
 .../project-euler/problem-7-10001st-prime.md  |   86 ++
 .../problem-70-totient-permutation.md         |  118 ++
 .../problem-71-ordered-fractions.md           |   95 ++
 .../problem-72-counting-fractions.md          |   90 ++
 ...roblem-73-counting-fractions-in-a-range.md |   83 ++
 .../problem-74-digit-factorial-chains.md      |  127 ++
 ...lem-75-singular-integer-right-triangles.md |  117 ++
 .../problem-76-counting-summations.md         |   83 ++
 .../problem-77-prime-summations.md            |  110 ++
 .../problem-78-coin-partitions.md             |  103 ++
 .../problem-79-passcode-derivation.md         |  115 ++
 .../problem-8-largest-product-in-a-series.md  |   92 ++
 ...roblem-80-square-root-digital-expansion.md |  109 ++
 .../problem-81-path-sum-two-ways.md           |  185 +++
 .../problem-82-path-sum-three-ways.md         |  195 +++
 .../problem-83-path-sum-four-ways.md          |  215 ++++
 .../project-euler/problem-84-monopoly-odds.md |  268 ++++
 .../problem-85-counting-rectangles.md         |  109 ++
 .../project-euler/problem-86-cuboid-route.md  |   94 ++
 .../problem-87-prime-power-triples.md         |  131 ++
 .../problem-88-product-sum-numbers.md         |  110 ++
 .../problem-89-roman-numerals.md              |  117 ++
 .../problem-9-special-pythagorean-triplet.md  |   74 ++
 .../problem-90-cube-digit-pairs.md            |   65 +
 ...ight-triangles-with-integer-coordinates.md |  119 ++
 .../problem-92-square-digit-chains.md         |  153 +++
 .../problem-93-arithmetic-expressions.md      |   59 +
 ...problem-94-almost-equilateral-triangles.md |   84 ++
 .../problem-95-amicable-chains.md             |  124 ++
 .../project-euler/problem-96-su-doku.md       |  296 +++++
 .../problem-97-large-non-mersenne-prime.md    |   88 ++
 .../problem-98-anagramic-squares.md           |  205 +++
 .../problem-99-largest-exponential.md         |   83 ++
 .../rosetta-code/100-doors.md                 |   67 +
 .../rosetta-code/24-game.md                   |  248 ++++
 .../9-billion-names-of-god-the-integer.md     |  116 ++
 .../rosetta-code/abc-problem.md               |  136 ++
 ...ient-and-perfect-number-classifications.md |   95 ++
 .../rosetta-code/accumulator-factory.md       |   79 ++
 .../rosetta-code/ackermann-function.md        |   71 ++
 .../rosetta-code/align-columns.md             |  189 +++
 .../rosetta-code/amicable-pairs.md            |  128 ++
 .../rosetta-code/averages-mode.md             |   79 ++
 .../averages-pythagorean-means.md             |  144 +++
 .../rosetta-code/averages-root-mean-square.md |   55 +
 .../rosetta-code/babbage-problem.md           |   78 ++
 .../rosetta-code/balanced-brackets.md         |  188 +++
 ...cles-of-given-radius-through-two-points.md |  150 +++
 .../rosetta-code/closest-pair-problem.md      |  414 +++++++
 .../rosetta-code/combinations.md              |   95 ++
 .../rosetta-code/comma-quibbling.md           |  101 ++
 .../rosetta-code/compare-a-list-of-strings.md |  138 +++
 .../convert-seconds-to-compound-duration.md   |  129 ++
 .../count-occurrences-of-a-substring.md       |   79 ++
 .../rosetta-code/count-the-coins.md           |   93 ++
 .../rosetta-code/cramers-rule.md              |  171 +++
 .../cumulative-standard-deviation.md          |  126 ++
 .../rosetta-code/cusip.md                     |  118 ++
 .../rosetta-code/cut-a-rectangle.md           |  203 +++
 .../rosetta-code/date-format.md               |   90 ++
 .../rosetta-code/date-manipulation.md         |  109 ++
 .../rosetta-code/day-of-the-week.md           |   74 ++
 .../rosetta-code/deal-cards-for-freecell.md   |  208 ++++
 .../rosetta-code/deepcopy.md                  |   85 ++
 .../define-a-primitive-data-type.md           |  132 ++
 .../rosetta-code/department-numbers.md        |  126 ++
 .../rosetta-code/discordian-date.md           |  212 ++++
 .../rosetta-code/dot-product.md               |   75 ++
 .../rosetta-code/element-wise-operations.md   |  214 ++++
 .../rosetta-code/emirp-primes.md              |  138 +++
 .../rosetta-code/entropy.md                   |   96 ++
 .../rosetta-code/equilibrium-index.md         |  130 ++
 .../rosetta-code/ethiopian-multiplication.md  |  156 +++
 .../rosetta-code/euler-method.md              |  152 +++
 .../evaluate-binomial-coefficients.md         |   74 ++
 .../execute-a-markov-algorithm.md             |  178 +++
 .../rosetta-code/execute-brain.md             |  202 +++
 .../extensible-prime-generator.md             |  139 +++
 .../rosetta-code/factorial.md                 |   80 ++
 .../factors-of-a-mersenne-number.md           |  148 +++
 .../rosetta-code/factors-of-an-integer.md     |   74 ++
 .../rosetta-code/farey-sequence.md            |  109 ++
 .../fibonacci-n-step-number-sequences.md      |  133 ++
 .../rosetta-code/fibonacci-sequence.md        |   75 ++
 .../rosetta-code/fibonacci-word.md            |  115 ++
 .../rosetta-code/fizzbuzz.md                  |   92 ++
 .../rosetta-code/fractran.md                  |  139 +++
 .../rosetta-code/gamma-function.md            |  104 ++
 .../rosetta-code/gaussian-elimination.md      |  230 ++++
 .../rosetta-code/general-fizzbuzz.md          |  175 +++
 .../generate-lower-case-ascii-alphabet.md     |   99 ++
 .../rosetta-code/generator-exponential.md     |  117 ++
 .../rosetta-code/gray-code.md                 |  122 ++
 .../rosetta-code/greatest-common-divisor.md   |   79 ++
 .../greatest-subsequential-sum.md             |  113 ++
 .../rosetta-code/hailstone-sequence.md        |   98 ++
 .../rosetta-code/happy-numbers.md             |  129 ++
 .../rosetta-code/harshad-or-niven-series.md   |   87 ++
 .../rosetta-code/hash-from-two-arrays.md      |  109 ++
 .../rosetta-code/hash-join.md                 |  237 ++++
 .../rosetta-code/heronian-triangles.md        |  155 +++
 .../hofstadter-figure-figure-sequences.md     |  158 +++
 .../rosetta-code/hofstadter-q-sequence.md     |   92 ++
 .../rosetta-code/i-before-e-except-after-c.md |  101 ++
 .../rosetta-code/iban.md                      |  104 ++
 .../rosetta-code/identity-matrix.md           |   88 ++
 .../rosetta-code/iterated-digits-squaring.md  |   96 ++
 .../rosetta-code/jaro-distance.md             |  146 +++
 .../rosetta-code/jortsort.md                  |   90 ++
 .../rosetta-code/josephus-problem.md          |   98 ++
 .../rosetta-code/k-d-tree.md                  |  469 +++++++
 .../rosetta-code/kaprekar-numbers.md          |  110 ++
 .../rosetta-code/knapsack-problem-0-1.md      |  255 ++++
 .../rosetta-code/knapsack-problem-bounded.md  |  212 ++++
 .../knapsack-problem-continuous.md            |  169 +++
 .../knapsack-problem-unbounded.md             |  185 +++
 .../rosetta-code/knights-tour.md              |  225 ++++
 .../largest-int-from-concatenated-ints.md     |   85 ++
 .../rosetta-code/last-friday-of-each-month.md |   99 ++
 .../rosetta-code/last-letter-first-letter.md  |  211 ++++
 .../rosetta-code/leap-year.md                 |   79 ++
 .../rosetta-code/least-common-multiple.md     |   89 ++
 .../rosetta-code/left-factorials.md           |  115 ++
 .../rosetta-code/letter-frequency.md          |  209 ++++
 .../rosetta-code/levenshtein-distance.md      |  105 ++
 .../linear-congruential-generator.md          |   97 ++
 .../rosetta-code/long-multiplication.md       |  111 ++
 .../longest-common-subsequence.md             |   96 ++
 .../longest-increasing-subsequence.md         |  120 ++
 .../rosetta-code/longest-string-challenge.md  |  101 ++
 .../rosetta-code/look-and-say-sequence.md     |   92 ++
 ...oop-over-multiple-arrays-simultaneously.md |  139 +++
 .../rosetta-code/lu-decomposition.md          |  318 +++++
 .../rosetta-code/lucas-lehmer-test.md         |  109 ++
 .../rosetta-code/ludic-numbers.md             |  129 ++
 .../luhn-test-of-credit-card-numbers.md       |  125 ++
 .../rosetta-code/lychrel-numbers.md           |  151 +++
 .../rosetta-code/lzw-compression.md           |  237 ++++
 .../rosetta-code/s-expressions.md             |   96 ++
 .../sailors-coconuts-and-a-monkey-problem.md  |   91 ++
 .../rosetta-code/search-a-list-of-records.md  |  103 ++
 .../rosetta-code/sedols.md                    |   99 ++
 .../rosetta-code/self-describing-numbers.md   |  100 ++
 .../rosetta-code/self-referential-sequence.md |  202 +++
 .../rosetta-code/semiprime.md                 |  146 +++
 .../rosetta-code/set-consolidation.md         |  196 +++
 .../rosetta-code/set-of-real-numbers.md       |  239 ++++
 .../rosetta-code/sha-1.md                     |  180 +++
 .../rosetta-code/sha-256.md                   |  435 +++++++
 .../sort-an-array-of-composite-structures.md  |  116 ++
 .../rosetta-code/sort-disjoint-sublist.md     |  147 +++
 .../rosetta-code/sort-stability.md            |  168 +++
 .../sort-using-a-custom-comparator.md         |  121 ++
 .../sorting-algorithms-bead-sort.md           |  129 ++
 .../sorting-algorithms-bogosort.md            |  126 ++
 .../sorting-algorithms-cocktail-sort.md       |  118 ++
 .../sorting-algorithms-comb-sort.md           |  173 +++
 .../sorting-algorithms-gnome-sort.md          |  124 ++
 .../sorting-algorithms-pancake-sort.md        |  124 ++
 .../sorting-algorithms-permutation-sort.md    |  131 ++
 .../sorting-algorithms-shell-sort.md          |  106 ++
 .../sorting-algorithms-stooge-sort.md         |  125 ++
 .../sorting-algorithms-strand-sort.md         |  130 ++
 .../rosetta-code/soundex.md                   |  161 +++
 .../rosetta-code/spiral-matrix.md             |  109 ++
 ...ter-string-based-on-change-of-character.md |  145 +++
 .../rosetta-code/state-name-puzzle.md         |  162 +++
 .../rosetta-code/stern-brocot-sequence.md     |  114 ++
 .../rosetta-code/straddling-checkerboard.md   |  192 +++
 .../rosetta-code/stream-merge.md              |  140 +++
 ...s-and-extended-characters-from-a-string.md |   80 ++
 .../rosetta-code/subleq.md                    |  178 +++
 .../rosetta-code/sudoku.md                    |  321 +++++
 .../rosetta-code/sum-digits-of-an-integer.md  |   89 ++
 .../rosetta-code/sum-multiples-of-3-and-5.md  |   77 ++
 .../rosetta-code/sum-of-a-series.md           |   82 ++
 .../rosetta-code/sum-of-squares.md            |   79 ++
 .../rosetta-code/sum-to-100.md                |  180 +++
 .../sutherland-hodgman-polygon-clipping.md    |  199 +++
 .../rosetta-code/symmetric-difference.md      |  125 ++
 .../rosetta-code/taxicab-numbers.md           |  133 ++
 .../tokenize-a-string-with-escaping.md        |  124 ++
 .../rosetta-code/top-rank-per-group.md        |  192 +++
 .../rosetta-code/topological-sort.md          |  185 +++
 .../rosetta-code/towers-of-hanoi.md           |   87 ++
 .../rosetta-code/vector-cross-product.md      |   75 ++
 .../rosetta-code/vector-dot-product.md        |   96 ++
 .../rosetta-code/word-frequency.md            |  136 ++
 .../rosetta-code/word-wrap.md                 |  106 ++
 .../rosetta-code/y-combinator.md              |   85 ++
 .../zeckendorf-number-representation.md       |  205 +++
 .../zhang-suen-thinning-algorithm.md          |  320 +++++
 .../rosetta-code/zig-zag-matrix.md            |  117 ++
 .../build-a-camper-leaderboard.md             |   31 +
 .../build-a-light-bright-app.md               |   37 +
 .../build-a-nightlife-coordination-app.md     |   31 +
 .../build-a-pinterest-clone.md                |   37 +
 .../take-home-projects/build-a-pong-game.md   |   33 +
 .../take-home-projects/build-a-recipe-box.md  |   37 +
 .../build-a-roguelike-dungeon-crawler-game.md |   41 +
 .../take-home-projects/build-a-simon-game.md  |   41 +
 .../build-a-tic-tac-toe-game.md               |   29 +
 .../take-home-projects/build-a-voting-app.md  |   37 +
 .../build-a-wikipedia-viewer.md               |   31 +
 ...build-an-image-search-abstraction-layer.md |   27 +
 .../build-the-game-of-life.md                 |   46 +
 .../chart-the-stock-market.md                 |   29 +
 .../manage-a-book-trading-club.md             |   31 +
 .../map-data-across-the-globe.md              |   31 +
 .../p2p-video-chat-application.md             |   41 +
 ...-contiguity-with-a-force-directed-graph.md |   31 +
 .../show-the-local-weather.md                 |   33 +
 .../use-the-twitch-json-api.md                |   35 +
 .../deep-learning-demystified.md              |   34 +
 .../how-convolutional-neural-networks-work.md |   30 +
 .../how-deep-neural-networks-work.md          |   30 +
 ...rks-rnn-and-long-short-term-memory-lstm.md |   30 +
 .../book-recommendation-engine-using-knn.md   |   68 +
 .../cat-and-dog-image-classifier.md           |  117 ++
 ...near-regression-health-costs-calculator.md |   49 +
 .../neural-network-sms-text-classifier.md     |   41 +
 .../rock-paper-scissors.md                    |   73 ++
 .../tensorflow/conclusion.md                  |   34 +
 ...al-neural-networks-evaluating-the-model.md |   34 +
 ...ral-networks-picking-a-pretrained-model.md |   53 +
 ...neural-networks-the-convolutional-layer.md |   34 +
 .../convolutional-neural-networks.md          |   34 +
 ...-learning-algorithms-building-the-model.md |   34 +
 ...core-learning-algorithms-classification.md |   34 +
 .../core-learning-algorithms-clustering.md    |   42 +
 ...earning-algorithms-hidden-markov-models.md |   34 +
 ...earning-algorithms-the-training-process.md |   34 +
 ...ng-algorithms-training-and-testing-data.md |   34 +
 ...using-probabilities-to-make-predictions.md |   34 +
 ...e-learning-algorithms-working-with-data.md |   34 +
 .../tensorflow/core-learning-algorithms.md    |   40 +
 ...creating-a-convolutional-neural-network.md |   56 +
 ...roduction-machine-learning-fundamentals.md |   34 +
 .../tensorflow/introduction-to-tensorflow.md  |   42 +
 ...processing-with-rnns-building-the-model.md |   66 +
 ...ssing-with-rnns-create-a-play-generator.md |   44 +
 ...processing-with-rnns-making-predictions.md |   34 +
 ...al-language-processing-with-rnns-part-2.md |   34 +
 ...ing-with-rnns-recurring-neural-networks.md |   38 +
 ...ocessing-with-rnns-sentimental-analysis.md |   54 +
 ...processing-with-rnns-training-the-model.md |   58 +
 .../natural-language-processing-with-rnns.md  |   34 +
 .../neural-networks-activation-functions.md   |   34 +
 .../neural-networks-creating-a-model.md       |   54 +
 .../tensorflow/neural-networks-optimizers.md  |   34 +
 .../neural-networks-with-tensorflow.md        |   34 +
 ...cement-learning-with-q-learning-example.md |   50 +
 ...rcement-learning-with-q-learning-part-2.md |   30 +
 .../reinforcement-learning-with-q-learning.md |   34 +
 .../build-a-celestial-bodies-database.md      |   26 +
 .../build-a-number-guessing-game.md           |   26 +
 .../build-a-periodic-table-database.md        |   26 +
 .../build-a-salon-appointment-scheduler.md    |   26 +
 .../build-a-world-cup-database.md             |   26 +
 .../build-a-kitty-ipsum-translator.md         |   20 +
 .../build-a-bike-rental-shop.md               |   20 +
 .../build-a-boilerplate.md                    |   20 +
 .../build-five-programs.md                    |   20 +
 .../build-an-sql-reference-object.md          |   20 +
 .../build-a-castle.md                         |   20 +
 .../build-a-mario-database.md                 |   20 +
 .../build-a-student-database-part-1.md        |   20 +
 .../build-a-student-database-part-2.md        |   20 +
 .../build-a-personal-portfolio-webpage.md     |  281 +++++
 .../build-a-product-landing-page.md           |  470 +++++++
 .../build-a-survey-form.md                    |  518 ++++++++
 .../build-a-technical-documentation-page.md   |  529 ++++++++
 .../build-a-tribute-page.md                   |  325 +++++
 .../613297a923965e0703b64796.md               |   56 +
 .../61329b210dac0b08047fd6ab.md               |   61 +
 .../61329d52e5010e08d9b9d66b.md               |   68 +
 .../6133acc353338c0bba9cb553.md               |   63 +
 .../6133d11ef548f51f876149e3.md               |   68 +
 .../613e2546d0594208229ada50.md               |   93 ++
 .../613e275749ebd008e74bb62e.md               |   66 +
 .../6140827cff96e906bd38fc2b.md               |   93 ++
 .../6140883f74224508174794c0.md               |   89 ++
 .../61408e4ae3e35d08feb260eb.md               |   83 ++
 .../61408f155e798909b6908712.md               |  112 ++
 .../614090d5a22b6f0a5a6b464c.md               |  102 ++
 .../6141fabd6f75610664e908fd.md               |  125 ++
 .../6141fed65b61320743da5894.md               |  111 ++
 .../614202874ca576084fca625f.md               |  171 +++
 .../614206033d366c090ca7dd42.md               |  140 +++
 .../61435e3c0679a306c20f1acc.md               |  125 ++
 .../6143610161323a081b249c19.md               |  173 +++
 .../6143639d5eddc7094161648c.md               |  195 +++
 .../6143908b6aafb00a659ca189.md               |  161 +++
 .../6143920c8eafb00b735746ce.md               |  127 ++
 .../6143931a113bb80c45546287.md               |  139 +++
 .../614394fb41985e0d2012a93e.md               |  125 ++
 .../6143956ed76ed60e012faa51.md               |  197 +++
 .../614396f7ae83f20ea6f9f4b3.md               |  200 +++
 .../6143cb26f7edff2dc28f7da5.md               |  177 +++
 .../6144e818fd5ea704fe56081d.md               |  195 +++
 .../6144f8dc6849e405dd8bb829.md               |  231 ++++
 .../6145e6eeaa66c605eb087fe9.md               |  207 ++++
 .../6145e8b5080a5f06bb0223d0.md               |  287 +++++
 .../6145eb5f08a38a0786c7a80c.md               |  224 ++++
 .../6145ed1f22caab087630aaad.md               |  191 +++
 .../6145ee65e2e1530938cb594d.md               |  232 ++++
 .../6145f02240ff8f09f7ec913c.md               |  215 ++++
 .../6145f14f019a4b0adb94b051.md               |  250 ++++
 .../6145f3a5cd9be60b9459cdd6.md               |  222 ++++
 .../6145f47393fbe70c4d885f9c.md               |  229 ++++
 .../6145f59029474c0d3dc1c8b8.md               |  217 ++++
 .../6145f685797bd30df9784e8c.md               |  230 ++++
 .../6145f829ac6a920ebf5797d7.md               |  215 ++++
 .../6145f8f8bcd4370f6509078e.md               |  218 ++++
 .../6145fb5018cb5b100cb2a88c.md               |  229 ++++
 .../6145fc3707fc3310c277f5c8.md               |  256 ++++
 .../614796cb8086be482d60e0ac.md               |  260 ++++
 .../6147a14ef5668b5881ef2297.md               |  260 ++++
 .../614878f7a412310647873015.md               |  253 ++++
 .../61487b77d4a37707073a64e5.md               |  261 ++++
 .../61487da611a65307e78d2c20.md               |  275 +++++
 .../61487f703571b60899055cf9.md               |  287 +++++
 .../614880dc16070e093e29bc56.md               |  259 ++++
 .../614883b6fa720e09fb167de9.md               |  280 +++++
 .../614884c1f5d6f30ab3d78cde.md               |  364 ++++++
 .../61488ecfd05e290b5712e6da.md               |  286 +++++
 .../6148d99cdc7acd0c519862cb.md               |  291 +++++
 .../6148da157cc0bd0d06df5c0a.md               |  298 +++++
 .../6148dc095264000dce348bf5.md               |  323 +++++
 .../6148dcaaf2e8750e6cb4501a.md               |  316 +++++
 .../6148dd31d210990f0fb140f8.md               |  312 +++++
 .../6148defa9c01520fb9d178a0.md               |  315 +++++
 .../6148dfab9b54c110577de165.md               |  360 ++++++
 .../6148e0bcc13efd10f7d7a6a9.md               |  336 +++++
 .../6148e161ecec9511941f8833.md               |  356 ++++++
 .../6148e28706b34912340fd042.md               |  359 ++++++
 .../6148e335c1edd512d00e4691.md               |  342 +++++
 .../6148e41c728f65138addf9cc.md               |  360 ++++++
 .../6148e5aeb102e3142de026a2.md               |  685 +++++++++++
 .../614ccc21ea91ef1736b9b578.md               |   50 +
 .../5f33071498eb2472b87ddee4.md               |   43 +
 .../5f3313e74582ad9d063e3a38.md               |   61 +
 .../5f331e55dfab7a896e53c3a1.md               |   47 +
 .../5f3326b143638ee1a09ff1e3.md               |   54 +
 .../5f33294a6af5e9188dbdb8f3.md               |   55 +
 .../5f332a88dc25a0fd25c7687a.md               |   63 +
 .../5f332b23c2045fb843337579.md               |   64 +
 .../5f344f9c805cd193c33d829c.md               |   69 ++
 .../5f344fad8bf01691e71a30eb.md               |   55 +
 .../5f344fbc22624a2976425065.md               |   68 +
 .../5f344fc1520b6719f2e35605.md               |   60 +
 .../5f3477ae34c1239cafe128be.md               |   71 ++
 .../5f3477ae8466a9a3d2cc953c.md               |   65 +
 .../5f3477ae9675db8bb7655b30.md               |   92 ++
 .../5f3477aefa51bfc29327200b.md               |   73 ++
 .../5f3477cb2e27333b1ab2b955.md               |   86 ++
 .../5f3477cb303c5cb61b43aa9b.md               |   68 +
 .../5f3477cbcb6ba47918c1da92.md               |   70 ++
 .../5f34a1fd611d003edeafd681.md               |   62 +
 .../5f356ed60785e1f3e9850b6e.md               |   72 ++
 .../5f356ed60a5decd94ab66986.md               |   77 ++
 .../5f356ed6199b0cdef1d2be8f.md               |   83 ++
 .../5f356ed63c7807a4f1e6d054.md               |   74 ++
 .../5f356ed63e0fa262326eef05.md               |   72 ++
 .../5f356ed656a336993abd9f7c.md               |   81 ++
 .../5f356ed69db0a491745e2bb6.md               |   73 ++
 .../5f356ed6cf6eab5f15f5cfe6.md               |   75 ++
 .../5f35e5c4321f818cdc4bed30.md               |   84 ++
 .../5f35e5c44359872a137bd98f.md               |   90 ++
 .../5f3c866d0fc037f7311b4ac8.md               |  105 ++
 .../5f3c866d28d7ad0de6470505.md               |   98 ++
 .../5f3c866d5414453fc2d7b480.md               |  126 ++
 .../5f3c866daec9a49519871816.md               |   86 ++
 .../5f3c866dbf362f99b9a0c6d0.md               |  115 ++
 .../5f3c866dd0d0275f01d4d847.md               |  109 ++
 .../5f3c866de7a5b784048f94b1.md               |  106 ++
 .../5f3cade94c6576e7f7b7953f.md               |  106 ++
 .../5f3cade9993019e26313fa8e.md               |  117 ++
 .../5f3cade99dda4e6071a85dfd.md               |  112 ++
 .../5f3cade9fa77275d9f4efe62.md               |  101 ++
 .../5f3ef6e01f288a026d709587.md               |  156 +++
 .../5f3ef6e03d719d5ac4738993.md               |  120 ++
 .../5f3ef6e04559b939080db057.md               |  145 +++
 .../5f3ef6e050279c7a4a7101d3.md               |  142 +++
 .../5f3ef6e05473f91f948724ab.md               |  119 ++
 .../5f3ef6e056bdde6ae6892ba2.md               |  136 ++
 .../5f3ef6e06d34faac0447fc44.md               |  133 ++
 .../5f3ef6e07276f782bb46b93d.md               |  147 +++
 .../5f3ef6e0819d4f23ca7285e6.md               |  109 ++
 .../5f3ef6e087d56ed3ffdc36be.md               |  132 ++
 .../5f3ef6e0a81099d9a697b550.md               |  157 +++
 .../5f3ef6e0b431cc215bb16f55.md               |  139 +++
 .../5f3ef6e0e0c3feaebcf647ad.md               |  108 ++
 .../5f3ef6e0e9629bad967cd71e.md               |  119 ++
 .../5f3ef6e0eaa7da26e3d34d78.md               |  133 ++
 .../5f3ef6e0f8c230bdd2349716.md               |  145 +++
 .../5f3f26fa39591db45e5cd7a0.md               |  154 +++
 .../5f459225127805351a6ad057.md               |  146 +++
 .../5f459a7ceb8b5c446656d88b.md               |  150 +++
 .../5f459cf202c2a3472fae6a9f.md               |  151 +++
 .../5f459fd48bdc98491ca6d1a3.md               |  148 +++
 .../5f45a05977e2fa49d9119437.md               |  148 +++
 .../5f45a276c093334f0f6e9df4.md               |  174 +++
 .../5f45a5a7c49a8251f0bdb527.md               |  160 +++
 .../5f45a66d4a2b0453301e5a26.md               |  176 +++
 .../5f45b0731d39e15d54df4dfc.md               |  173 +++
 .../5f45b25e7ec2405f166b9de1.md               |  180 +++
 .../5f45b3c93c027860d9298dbd.md               |  184 +++
 .../5f45b45d099f3e621fbbb256.md               |  187 +++
 .../5f45b4c81cea7763550e40df.md               |  180 +++
 .../5f45b715301bbf667badc04a.md               |  182 +++
 .../5f46e270702a8456a664f0df.md               |  181 +++
 .../5f46e36e745ead58487aabf2.md               |  193 +++
 .../5f46e7a4750dd05b5a673920.md               |  189 +++
 .../5f46e8284aae155c83015dee.md               |  192 +++
 .../5f46ede1ff8fec5ba656b44c.md               |  153 +++
 .../5f46fc57528aa1c4b5ea7c2e.md               |  165 +++
 .../5f4701b942c824109626c3d8.md               |  155 +++
 .../5f475bb508746c16c9431d42.md               |  221 ++++
 .../5f475e1c7f71a61d913836c6.md               |  197 +++
 .../5f47633757ae3469f2d33d2e.md               |  104 ++
 .../5f47fe7e31980053a8d4403b.md               |  359 ++++++
 .../5f716ad029ee4053c7027a7a.md               |  117 ++
 .../5f716bee5838c354c728a7c5.md               |  151 +++
 .../5f7691dafd882520797cd2f0.md               |   98 ++
 .../5f7692f7c5b3ce22a57788b6.md               |  124 ++
 .../5f769541be494f25449b292f.md               |  103 ++
 .../5f76967fad478126d6552b0d.md               |  100 ++
 .../5f769702e6e33127d14aa120.md               |  104 ++
 .../5f7b87422a560036fd03ccff.md               |  118 ++
 .../5f7b88d37b1f98386f04edc0.md               |  102 ++
 .../6140c7e645d8e905819f1dd4.md               |  181 +++
 .../6140c9d35015ae0ba0c250e8.md               |   79 ++
 .../6140cbeec34e970dfe75e710.md               |   74 ++
 .../6140cd32d018ed0f600eefce.md               |   72 ++
 .../6140cdebd39d6a101e747529.md               |   85 ++
 .../6140cfc08ca9c5128c3e6478.md               |   83 ++
 .../6140d0069049f5139d78da40.md               |   77 ++
 .../6140d10d50636e14695013b2.md               |   85 ++
 .../6140d1a351e88f159ed54fca.md               |  126 ++
 .../6140d263016325162fd076fe.md               |  111 ++
 .../6140d2b687a2cd17bac5730c.md               |  103 ++
 .../6140d36b8b747718b50d4b7a.md               |  100 ++
 .../6140d3dc359b371b1a21d783.md               |  117 ++
 .../6140d4bc9db3c81c51a09ab7.md               |  199 +++
 .../6140d94b5fab7f1d73c9bedb.md               |  137 +++
 .../6140dc5e13d0c81e7496f182.md               |  139 +++
 .../6140dd77e0bc5a1f70bd7466.md               |  131 ++
 .../6140de31b1f5b420410728ff.md               |  146 +++
 .../6140df547f09402144e40b92.md               |  142 +++
 .../6140e0d875ec16262f26432b.md               |  144 +++
 .../6140f4b5c1555a2960de1e5f.md               |  191 +++
 .../614100d7d335bb2a5ff74f1f.md               |  149 +++
 .../61410126fa3a6d2b3cda502e.md               |  151 +++
 .../6141019eadec6d2c6c6f007b.md               |  148 +++
 .../6141026ec9882f2d39dcf2b8.md               |  291 +++++
 .../6169ab1aaeb4cd1174def700.md               |  154 +++
 .../6169b1357fcb701bb5efc619.md               |  164 +++
 .../6169b284950e171d8d0bb16a.md               |  304 +++++
 .../617ace7d831f9c16a569b38a.md               |   69 ++
 .../61695197ac34f0407e339882.md               |   66 +
 .../61695ab9f6ffe951c16d03dd.md               |  103 ++
 .../61695c4aad56f95497c19583.md               |   56 +
 .../61695d1fbc003856628bf561.md               |   52 +
 .../616965351e74d4689eb6de30.md               |   52 +
 .../616968c2c94c8071b349c146.md               |   72 ++
 .../61696ef7ac756c829f9e4048.md               |   65 +
 .../616971b3cd990186b66c99a1.md               |   59 +
 .../616d3a67ccf800ad94ec89ae.md               |   71 ++
 .../616d47bc9eedc4bc7f621bec.md               |   66 +
 .../616d4a84b756d9c4b8255093.md               |   68 +
 .../616d50b93ba424d6282c99cf.md               |   62 +
 .../616d525007b8c5d8b3308b1c.md               |   60 +
 .../616d55bd160a95e22453a081.md               |   91 ++
 .../616d595270d902f0e7086e18.md               |   65 +
 .../61764c602bee6974e7790f35.md               |   76 ++
 .../61764f23ea21477b76f3b80f.md               |   61 +
 .../61764f7e5240eb7ccc7f6a0a.md               |   68 +
 .../61764fdda535587e1fefb3aa.md               |   86 ++
 .../6176519636a76b810ab1219a.md               |   86 ++
 .../617b65579ce424bf5f02ca73.md               |   84 ++
 .../617b8b38f32bf2080a140675.md               |   90 ++
 .../617b8e0d93a8d10d9a90e720.md               |   98 ++
 .../617b92b9de349513466f6156.md               |   78 ++
 .../617b954d9f4f6217a749380e.md               |   84 ++
 .../617b97abd9f3f61d1590b815.md               |   79 ++
 .../617b9ad735109e217284e095.md               |   79 ++
 .../617bb5624a75e86463b7e638.md               |   79 ++
 .../617bb77353188166af43f3ac.md               |   77 ++
 .../617bb9fdef27bc6aa0470ac2.md               |   77 ++
 .../617bbb6b97a83f6d1f7d6e38.md               |   79 ++
 .../617bc3386dc7d07d6469bf20.md               |   79 ++
 .../617bc4824e233180553a8069.md               |   77 ++
 .../617bd6ec666b1da2587e4e37.md               |   95 ++
 .../618a00ed1ca871a2b3aca0cb.md               |   91 ++
 .../618a0927005553b74bfa05ae.md               |   87 ++
 .../618a0b2befb143baefab632b.md               |   87 ++
 .../618a1275e873dcc803c2d1aa.md               |   84 ++
 .../618a132676346ac9f7fd59dd.md               |   82 ++
 .../618a16873520a8d088ffdf44.md               |   79 ++
 .../618a16d21bd3dad1bb3aa8ef.md               |   87 ++
 .../619b72a0db211f1c29afb906.md               |   89 ++
 .../619b7396e57b771f903be90d.md               |   77 ++
 .../619b7424f43ec9215e538afe.md               |   99 ++
 .../619b74fa777a2b2473c94f82.md               |  107 ++
 .../619b761916dac02643940022.md               |   81 ++
 .../619b7c3c83de403126b69c1e.md               |   85 ++
 .../619b7fd56aa2253778bcf5f7.md               |   87 ++
 .../61a489b8579e87364b2d2cdb.md               |   83 ++
 .../61a493ead935c148d2b76312.md               |   87 ++
 .../61a498399534644f59cff05e.md               |   79 ++
 .../61a49d15bdbb5e57cc6fd280.md               |   85 ++
 .../61a4a53c4459446dc134a1c6.md               |   79 ++
 .../61a4a6e908bc34725b4c25ac.md               |   77 ++
 .../61a4a7877da33a73a1c1723e.md               |   79 ++
 .../61a4ac092eb21e7dbfe61c33.md               |   79 ++
 .../61a4acbb5587197f68544d00.md               |   79 ++
 .../61a4ada3aabeec822b2975d9.md               |   79 ++
 .../61a4ae5f29eb5584187201c3.md               |   79 ++
 .../61a5be9833e7dc178de2af10.md               |   79 ++
 .../61a5bfe091060f1d6a629dd0.md               |   81 ++
 .../61a5c906ab73313316e342f0.md               |   91 ++
 .../61a5ca57f50ded36d33eef96.md               |   79 ++
 .../61a5d594b887335228ee6533.md               |   77 ++
 .../61a5d6701ee08953ca375243.md               |   77 ++
 .../61a5d79c858bef560e26c685.md               |   77 ++
 .../61a5d7ef1cfcf45764df07a2.md               |   87 ++
 .../61adc60b69cd4b87739d2174.md               |   92 ++
 .../61adc91467b5d59328b9f781.md               |   98 ++
 .../61add79e739a5faee9d96080.md               |   97 ++
 .../61add929e41980b1edbdba7e.md               |  100 ++
 .../61addaf7e83988b59a7d18ff.md               |  123 ++
 .../61ade49b2dad60c076cbd32d.md               |   97 ++
 .../61b092eb9e7fc020b43b1bb2.md               |   85 ++
 .../61b093179e7fc020b43b1bb3.md               |   88 ++
 .../61b093219e7fc020b43b1bb4.md               |   89 ++
 .../61b093329e7fc020b43b1bb5.md               |   92 ++
 .../61b093429e7fc020b43b1bb6.md               |  103 ++
 .../61b0934c9e7fc020b43b1bb7.md               |   99 ++
 .../61b0936d9e7fc020b43b1bb8.md               |  104 ++
 .../61b095989e7fc020b43b1bb9.md               |   79 ++
 .../61b095a79e7fc020b43b1bba.md               |   79 ++
 .../61b095c79e7fc020b43b1bbb.md               |   77 ++
 .../61b09f739aa6572d2064f9b8.md               |   97 ++
 .../61b0a1b2af494934b7ec1a72.md               |  123 ++
 .../61b0a44a6b865738ba49b9fb.md               |  109 ++
 .../61b306305810f1c9040ce5a2.md               |  104 ++
 .../61b30995968123ceb6b76167.md               |  108 ++
 .../61b30a286c228bd0c493c09a.md               |  111 ++
 .../61b31287fb580ae75a486047.md               |  104 ++
 .../61b315e76a63b3ecbbb11b75.md               |  104 ++
 .../61b3183655ec10efd8c0bb07.md               |  110 ++
 .../61b31a451057fff645ec09be.md               |  102 ++
 .../61b31cd7b0c76bfc076b4719.md               |  184 +++
 .../61537485c4f2a624f18d7794.md               |  118 ++
 .../61537a8054753e2f1f2a1574.md               |   58 +
 .../61537bb9b1a29430ac15ad38.md               |   62 +
 .../61537c5f81f0cf325b4a854c.md               |   62 +
 .../61537c9eecea6a335db6da79.md               |   65 +
 .../61537d86bdc3dd343688fceb.md               |  111 ++
 .../615380dff67172357fcf0425.md               |   62 +
 .../6153893900438b4643590367.md               |   87 ++
 .../6153897c27f6334716ee5abe.md               |  114 ++
 .../615389bd81347947ea7ba896.md               |   91 ++
 .../6153908a366afb4d57185c8d.md               |   94 ++
 .../615392916d83fa4f02f7e2cf.md               |   88 ++
 .../6153938dce8b294ff8f5a4e9.md               |   87 ++
 .../6153947986535e5117e60615.md               |   88 ++
 .../61539e07e7430b528fbffe21.md               |  104 ++
 .../61539f32a206bd53ec116465.md               |   92 ++
 .../6153a04847abee57a3a406ac.md               |   95 ++
 .../6153a3485f0b20591d26d2a1.md               |   92 ++
 .../6153a3952facd25a83fe8083.md               |  112 ++
 .../6153a3ebb4f7f05b8401b716.md               |  181 +++
 .../615f171d05def3218035dc85.md               |   80 ++
 .../61437d575fb98f57fa8f7f36.md               |  135 ++
 .../614385513d91ae5c251c2052.md               |   96 ++
 .../6143862a5e54455d262c212e.md               |   75 ++
 .../6143869bb45bd85e3b1926aa.md               |  109 ++
 .../614387cbefeeba5f3654a291.md               |  152 +++
 .../614389f601bb4f611db98563.md               |  134 ++
 .../61438b5b66d76a6264430f2a.md               |  139 +++
 .../61438ec09438696391076d6a.md               |  129 ++
 .../61439dc084fa5f659cf75d7c.md               |  109 ++
 .../61439dfc811e12666b04be6f.md               |  113 ++
 .../61439e33e4fb7967609e0c83.md               |  148 +++
 .../6143a1a228f7d068ab16a130.md               |  130 ++
 .../6143a73279ce6369de4b9bcc.md               |  128 ++
 .../6143a778bffc206ac6b1dbe3.md               |  135 ++
 .../6143a83fcc32c26bcfae3efa.md               |  166 +++
 .../6143b97c06c3306d23d5da47.md               |  174 +++
 .../6143b9e1f5035c6e5f2a8231.md               |  228 ++++
 .../6143bb50e8e48c6f5ef9d8d5.md               |  195 +++
 .../6143c2a363865c715f1a3f72.md               |  206 ++++
 .../6143cd08fe927072ca3a371d.md               |  213 ++++
 .../6143cdf48b634a747de42104.md               |  220 ++++
 .../6143d003ad9e9d76766293ec.md               |  226 ++++
 .../6143d2842b497779bad947de.md               |  217 ++++
 .../6144d66a5358db0c80628757.md               |  226 ++++
 .../6144d7dbdd3e580da730ff45.md               |  234 ++++
 .../6144de308591ec10e27d5383.md               |  228 ++++
 .../6144e1ba93e435127a7f516d.md               |  232 ++++
 .../6144ee46a9d6e614c598cc05.md               |  241 ++++
 .../6144ee790af79815ad15a832.md               |  242 ++++
 .../6144f1410990ea17187a722b.md               |  238 ++++
 .../6144f3818bfbc51844152e36.md               |  239 ++++
 .../6144f42204c8c8195f1f3345.md               |  237 ++++
 .../6144f47b7c631e1a6f304dd5.md               |  250 ++++
 .../6148b07081759c2c691166a9.md               |  250 ++++
 .../6148b0d764e4192e5712ed92.md               |  248 ++++
 .../6148b185ef37522f688316b0.md               |  253 ++++
 .../6148b30464daf630848c21d4.md               |  250 ++++
 .../6148b4b150434734143db6f2.md               |  261 ++++
 .../6148b5623efa8f369f2c3643.md               |  255 ++++
 .../6148b59ef318e03875f35c4a.md               |  271 ++++
 .../6148bd62bbb8c83a5f1fc1b3.md               |  280 +++++
 .../6148be3d605d6b3ca9425d11.md               |  286 +++++
 .../6148be82ca63c63daa8cca49.md               |  287 +++++
 .../6148bf49fcc7913f05dbf9b7.md               |  287 +++++
 .../6148bfc43df3bc40fe0e6405.md               |  289 +++++
 .../6148c004ffc8434252940dc3.md               |  299 +++++
 .../6148c224ecb157439bc5247c.md               |  290 +++++
 .../6148c434bd731d45617a76c6.md               |  295 +++++
 .../6148c5036ddad94692a66230.md               |  294 +++++
 .../6148c58bace368497fb11bcf.md               |  295 +++++
 .../6148c6aa9981d74af202125e.md               |  300 +++++
 .../6148c721e74ecd4c619ae51c.md               |  298 +++++
 .../6148ceaf5d897d4d8b3554b3.md               |  299 +++++
 .../6148cf094b3f2b4e8a032c63.md               |  314 +++++
 .../6148d0b863d10d50544ace0e.md               |  309 +++++
 .../6148d1bdf39c5b5186f5974b.md               |  313 +++++
 .../6148d1f9eb63c252e1f8acc4.md               |  311 +++++
 .../6148d2444d01ab541e64a1e4.md               |  330 +++++
 .../6148d33e31fccf558696c745.md               |  317 +++++
 .../6148d3fff5186b57123d97e2.md               |  341 +++++
 .../6148d4d57b965358c9fa38bf.md               |  335 +++++
 .../6148d7720f0db36775db868a.md               |  335 +++++
 .../6148d94fdf6a5d6899f8ff15.md               |  331 +++++
 .../6148d9825b50a3698aeee644.md               |  340 +++++
 .../6148e162e255676ae0da6a76.md               |  336 +++++
 .../6148e19c3e26436be0155690.md               |  345 ++++++
 .../6148e246146b646cf4255f0c.md               |  349 ++++++
 .../6148e2dcdd60306dd77d41cc.md               |  355 ++++++
 .../6148e4d6861a486f60681f36.md               |  357 ++++++
 .../6148e5a204d99e70343a63e4.md               |  353 ++++++
 .../6148e62a6f768f71c4f04828.md               |  354 ++++++
 .../6148e789329dc9736ce59b85.md               |  361 ++++++
 .../6148f34ebedc2274bceeb99c.md               |  375 ++++++
 .../6148f600cde42b7670c2611f.md               |  379 ++++++
 .../6148f693e0728f77c87f3020.md               |  404 ++++++
 .../6148f6f7d8914c78e93136ca.md               |  780 ++++++++++++
 .../614e0e503b110f76d3ac2ff6.md               |  256 ++++
 .../614e0e588f0e8a772a8a81a6.md               |   69 ++
 .../6165d3b702a5d92ad970b30c.md               |  104 ++
 .../6169cd8a558aa8434e0ad7f6.md               |   77 ++
 .../619665c9abd72906f3ad30f9.md               |  134 ++
 .../61967e74a8e3690ab6292daa.md               |   56 +
 .../61968df2acd5550bf1616c34.md               |   53 +
 .../61968e9243a4090cc805531c.md               |   51 +
 .../61968f8877c6720d6d61aaf5.md               |   64 +
 .../619691693bc14b0e528f5a20.md               |   66 +
 .../6196928658b6010f28c39484.md               |   58 +
 .../619692ff79f5770fc6d8c0b4.md               |   73 ++
 .../6196990f966e8f10a40094f6.md               |   75 ++
 .../619699c10a0f6e11591d73c4.md               |   74 ++
 .../61969aa6acef5b12200f672e.md               |   83 ++
 .../61969c487ced6f12db8fef94.md               |   89 ++
 .../61969d66cfcdba137d021558.md               |   76 ++
 .../61969e7451455614217e901b.md               |   91 ++
 .../6196adc17f77a714d51485f2.md               |   90 ++
 .../6196aead7ac7bf1584b17a7f.md               |   86 ++
 .../6196ce0415498d2463989e84.md               |   92 ++
 .../6196cee94c6da1253809dff9.md               |  100 ++
 .../6196d00a5d7292262bc02f4c.md               |   87 ++
 .../6196d0cda039d026f7f78d1e.md               |  100 ++
 .../6196d1ac33c68d27dcda5796.md               |  119 ++
 .../6196d213d99f16287bff22ae.md               |  104 ++
 .../6196d2c0f22ca0293107c048.md               |  112 ++
 .../6196d32d1340d829f0f6f57d.md               |  105 ++
 .../6196d41d40bf9b2aaea5d520.md               |  107 ++
 .../6197cff995d03905b0cca8ad.md               |  118 ++
 .../6197f40a16afea068c7e60c8.md               |  125 ++
 .../6197f667297bb30a552ce017.md               |   65 +
 .../61993b72e874e709b8dfd666.md               |  128 ++
 .../61993cf26a8e0f0a553db223.md               |  122 ++
 .../61993dbb35adf30b10d49e38.md               |  139 +++
 .../61993e9adc9e9a0bb4d28fff.md               |  133 ++
 .../6199409834ccaf0d10736596.md               |  139 +++
 .../6199429802b7c10dc79ff871.md               |  154 +++
 .../619943285a41720e6370d985.md               |  156 +++
 .../619943876b706d0f35c01dbc.md               |  146 +++
 .../6199442866286d0ff421a4fc.md               |  148 +++
 .../619bcf239fc15905ecd66fce.md               |  145 +++
 .../619be73b3c806006ccc00bb0.md               |  158 +++
 .../619be7af7b0bf60770f5d2a4.md               |  155 +++
 .../619be80062551a080e32c821.md               |  160 +++
 .../619be8ce4ea49008c5bfbc30.md               |  152 +++
 .../619be946958c6009844f1dee.md               |  166 +++
 .../619c155df0063a0a3fec0e32.md               |  193 +++
 .../619c16debd0c270b01c5ce38.md               |  165 +++
 .../619cfdf2e63ddf05feab86ad.md               |  169 +++
 .../619d019488f98c06acbbb71a.md               |  171 +++
 .../619d022dc8400c0763829a17.md               |  177 +++
 .../619d02c7bc95bf0827a5d296.md               |  181 +++
 .../619d033915012509031f309a.md               |  184 +++
 .../619d03dadadb6509a16f4f5f.md               |  210 ++++
 .../619d0503e03a790a4179d463.md               |  206 ++++
 .../619d05c54dabca0b10058235.md               |  197 +++
 .../619d0882f54bf40bdc4671ed.md               |  197 +++
 .../619d090cd8d6db0c93dc5087.md               |  222 ++++
 .../619d0b51ca42ed0d74582186.md               |  207 ++++
 .../619d0bc9cb05360e1bf549c3.md               |  200 +++
 .../619d0c1594c38c0ebae75878.md               |  215 ++++
 .../619d0d18ca99870f884a7bff.md               |  225 ++++
 .../619d0daf214542102739b0da.md               |  227 ++++
 .../619d0e56f9ca9710fcb974e3.md               |  226 ++++
 .../619d0eec0ac40611b41e2ccc.md               |  247 ++++
 .../619d0fc9825c271253df28d4.md               |  238 ++++
 .../619d102d786c3d13124c37c6.md               |  231 ++++
 .../619d107edf7ddf13cc77106a.md               |  246 ++++
 .../619d10cc98145f14820399c5.md               |  271 ++++
 .../619d115e2adcd71538e82ebb.md               |  256 ++++
 .../619d11e6d5ef9515d2a16033.md               |  262 ++++
 .../619d129a417d0716a94de913.md               |  267 ++++
 .../619d1340361095175f4b5115.md               |  267 ++++
 .../619d15797b580c1828b05426.md               |  263 ++++
 .../619d15d955d9d418c4487bbc.md               |  264 ++++
 .../619d1629a8adc61960ca8b40.md               |  278 +++++
 .../619d1c5fc9f8941a400955da.md               |  272 ++++
 .../619d1dab9ff3421ae1976991.md               |  273 ++++
 .../619d1deb8b04811b8839ffe4.md               |  281 +++++
 .../619d1e7a8e81a61c5a819dc4.md               |  272 ++++
 .../619d1ed33c9a071cf657a0d6.md               |  306 +++++
 .../619d1fb5d244c31db8a7fdb7.md               |  295 +++++
 .../619d204bd73ae51e743b8e94.md               |  288 +++++
 .../619d20b12996101f430920fb.md               |  304 +++++
 .../619d21fe6a3f9b2016be9d9d.md               |  304 +++++
 .../619d229b0e542520cd91c685.md               |  300 +++++
 .../619d23089e787e216a7043d6.md               |  295 +++++
 .../619d237a107c10221ed743fa.md               |  328 +++++
 .../619d26b12e651022d80cd017.md               |  317 +++++
 .../619d2712853306238f41828e.md               |  332 +++++
 .../619d2b7a84e78b246f2d17a2.md               |  340 +++++
 .../619d2bd9c1d43c2526e96f1f.md               |  325 +++++
 .../619d2d4e80400325ff89664a.md               |  320 +++++
 .../619d2ebc81ba81271460850d.md               |  321 +++++
 .../619d2f0e9440bc27caee1cec.md               |  327 +++++
 .../619d2fd3ff4f772882e3d998.md               |  323 +++++
 .../619d30350883802921bfcccc.md               |  333 +++++
 .../619d324f5915c929f36ae91d.md               |  345 ++++++
 .../619d32c7fa21f32aaa91d499.md               |  338 +++++
 .../619d333b738e3c2b5d58b095.md               |  338 +++++
 .../619d337765b9f02c10e93722.md               |  344 ++++++
 .../619d33c51140292cc5a21742.md               |  357 ++++++
 .../619d3482f505452d861d0f62.md               |  347 ++++++
 .../619d3561a951bf2e41a24f10.md               |  346 ++++++
 .../619d36103839c82efa95dd34.md               |  357 ++++++
 .../619d3711d04d623000013e9e.md               |  670 ++++++++++
 .../61a8fe15a6a31306e60d1e89.md               |   55 +
 .../5d822fd413a79914d39e98c9.md               |   53 +
 .../5d822fd413a79914d39e98ca.md               |   54 +
 .../5d822fd413a79914d39e98cb.md               |   69 ++
 .../5d822fd413a79914d39e98cc.md               |  108 ++
 .../5d822fd413a79914d39e98cd.md               |   56 +
 .../5d822fd413a79914d39e98ce.md               |   61 +
 .../5d822fd413a79914d39e98cf.md               |   69 ++
 .../5d822fd413a79914d39e98d0.md               |   65 +
 .../5d822fd413a79914d39e98d1.md               |   68 +
 .../5d822fd413a79914d39e98d2.md               |   83 ++
 .../5d822fd413a79914d39e98d3.md               |  105 ++
 .../5d822fd413a79914d39e98d4.md               |  138 +++
 .../5d822fd413a79914d39e98d5.md               |  112 ++
 .../5d822fd413a79914d39e98d6.md               |  103 ++
 .../5d822fd413a79914d39e98d7.md               |  100 ++
 .../5d822fd413a79914d39e98d8.md               |  124 ++
 .../5d822fd413a79914d39e98d9.md               |   99 ++
 .../5d822fd413a79914d39e98da.md               |  133 ++
 .../5d822fd413a79914d39e98db.md               |  133 ++
 .../5d822fd413a79914d39e98dc.md               |  127 ++
 .../5d822fd413a79914d39e98dd.md               |  142 +++
 .../5d822fd413a79914d39e98de.md               |  140 +++
 .../5d822fd413a79914d39e98df.md               |  124 ++
 .../5d822fd413a79914d39e98e0.md               |  142 +++
 .../5d822fd413a79914d39e98e1.md               |  155 +++
 .../5d822fd413a79914d39e98e2.md               |  135 ++
 .../5d822fd413a79914d39e98e3.md               |  144 +++
 .../5d822fd413a79914d39e98e4.md               |  147 +++
 .../5d822fd413a79914d39e98e5.md               |  161 +++
 .../5d822fd413a79914d39e98e6.md               |  192 +++
 .../5d822fd413a79914d39e98e7.md               |  253 ++++
 .../5d822fd413a79914d39e98e8.md               |  190 +++
 .../5d822fd413a79914d39e98e9.md               |  223 ++++
 .../5d822fd413a79914d39e98ea.md               |  181 +++
 .../5d822fd413a79914d39e98eb.md               |  203 +++
 .../5d822fd413a79914d39e98ec.md               |  203 +++
 .../5d822fd413a79914d39e98ed.md               |  202 +++
 .../5d822fd413a79914d39e98ee.md               |  196 +++
 .../5d822fd413a79914d39e98ef.md               |  197 +++
 .../5d822fd413a79914d39e98f0.md               |  218 ++++
 .../5d822fd413a79914d39e98f1.md               |  223 ++++
 .../5d822fd413a79914d39e98f2.md               |  237 ++++
 .../5d822fd413a79914d39e98f3.md               |  222 ++++
 .../5d822fd413a79914d39e98f4.md               |  227 ++++
 .../5d822fd413a79914d39e98f5.md               |  198 +++
 .../5d822fd413a79914d39e98f6.md               |  207 ++++
 .../5d822fd413a79914d39e98f7.md               |  203 +++
 .../5d822fd413a79914d39e98f8.md               |  210 ++++
 .../5d822fd413a79914d39e98f9.md               |  207 ++++
 .../5d822fd413a79914d39e98fa.md               |  211 ++++
 .../5d822fd413a79914d39e98fb.md               |  240 ++++
 .../5d822fd413a79914d39e98fc.md               |  211 ++++
 .../5d822fd413a79914d39e98fd.md               |  209 ++++
 .../5d822fd413a79914d39e98fe.md               |  260 ++++
 .../5d822fd413a79914d39e98ff.md               |  238 ++++
 .../5d822fd413a79914d39e9900.md               |  224 ++++
 .../5d822fd413a79914d39e9901.md               |  224 ++++
 .../5d822fd413a79914d39e9902.md               |  227 ++++
 .../5d822fd413a79914d39e9903.md               |  223 ++++
 .../5d822fd413a79914d39e9904.md               |  245 ++++
 .../5d822fd413a79914d39e9905.md               |  223 ++++
 .../5d822fd413a79914d39e9906.md               |  249 ++++
 .../5d822fd413a79914d39e9907.md               |  258 ++++
 .../5d822fd413a79914d39e9908.md               |  258 ++++
 .../5d822fd413a79914d39e9909.md               |  245 ++++
 .../5d822fd413a79914d39e990a.md               |  277 +++++
 .../5d822fd413a79914d39e990b.md               |  254 ++++
 .../5d822fd413a79914d39e990c.md               |  253 ++++
 .../5d822fd413a79914d39e990d.md               |  255 ++++
 .../5d822fd413a79914d39e990e.md               |  265 ++++
 .../5d822fd413a79914d39e990f.md               |  286 +++++
 .../5d822fd413a79914d39e9910.md               |  266 ++++
 .../5d822fd413a79914d39e9911.md               |  291 +++++
 .../5d822fd413a79914d39e9912.md               |  287 +++++
 .../5d822fd413a79914d39e9913.md               |  280 +++++
 .../5d822fd413a79914d39e9914.md               |  284 +++++
 .../5d822fd413a79914d39e9915.md               |  391 ++++++
 .../5d822fd413a79914d39e9916.md               |  297 +++++
 .../5d822fd413a79914d39e9917.md               |  307 +++++
 .../5d822fd413a79914d39e9918.md               |  298 +++++
 .../5d822fd413a79914d39e9919.md               |  301 +++++
 .../5d822fd413a79914d39e991a.md               |  312 +++++
 .../5d822fd413a79914d39e991b.md               |  314 +++++
 .../5d822fd413a79914d39e991c.md               |  317 +++++
 .../5d822fd413a79914d39e991d.md               |  315 +++++
 .../5d822fd413a79914d39e991e.md               |  326 +++++
 .../5d822fd413a79914d39e991f.md               |  324 +++++
 .../5d822fd413a79914d39e9920.md               |  330 +++++
 .../5d822fd413a79914d39e9921.md               |  348 ++++++
 .../5d822fd413a79914d39e9922.md               |  347 ++++++
 .../5d822fd413a79914d39e9923.md               |  348 ++++++
 .../5d822fd413a79914d39e9924.md               |  340 +++++
 .../5d822fd413a79914d39e9925.md               |  346 ++++++
 .../5d822fd413a79914d39e9926.md               |  355 ++++++
 .../5d822fd413a79914d39e9927.md               |  350 ++++++
 .../5d822fd413a79914d39e9928.md               |  349 ++++++
 .../5d822fd413a79914d39e9929.md               |  362 ++++++
 .../5d822fd413a79914d39e992a.md               |  359 ++++++
 .../5d822fd413a79914d39e992b.md               |  361 ++++++
 .../5d822fd413a79914d39e992c.md               |  364 ++++++
 .../5d822fd413a79914d39e992d.md               |  377 ++++++
 .../5d822fd413a79914d39e992e.md               |  374 ++++++
 .../5d822fd413a79914d39e992f.md               |  377 ++++++
 .../5d822fd413a79914d39e9930.md               |  381 ++++++
 .../5d822fd413a79914d39e9931.md               |  404 ++++++
 .../5d822fd413a79914d39e9932.md               |  396 ++++++
 .../5d822fd413a79914d39e9933.md               |  402 ++++++
 .../5d822fd413a79914d39e9934.md               |  409 ++++++
 .../5d822fd413a79914d39e9935.md               |  409 ++++++
 .../5d822fd413a79914d39e9936.md               |  402 ++++++
 .../5d822fd413a79914d39e9937.md               |  403 ++++++
 .../5d822fd413a79914d39e9938.md               |  421 +++++++
 .../5d822fd413a79914d39e9939.md               |  410 ++++++
 .../5d822fd413a79914d39e993a.md               |  422 +++++++
 .../5d822fd413a79914d39e993b.md               |  424 +++++++
 .../5d822fd413a79914d39e993c.md               |  437 +++++++
 .../5d822fd413a79914d39e993d.md               |  450 +++++++
 .../5d822fd413a79914d39e993e.md               |  862 +++++++++++++
 .../5dc174fcf86c76b9248c6eb2.md               |   63 +
 .../5dc1798ff86c76b9248c6eb3.md               |   84 ++
 .../5dc17d3bf86c76b9248c6eb4.md               |   60 +
 .../5dc17dc8f86c76b9248c6eb5.md               |   70 ++
 .../5dc2385ff86c76b9248c6eb7.md               |   71 ++
 .../5dc23991f86c76b9248c6eb8.md               |  103 ++
 .../5dc23f9bf86c76b9248c6eba.md               |   61 +
 .../5dc24073f86c76b9248c6ebb.md               |   61 +
 .../5dc24165f86c76b9248c6ebc.md               |   59 +
 .../5dc24614f86c76b9248c6ebd.md               |   79 ++
 .../5ddbd81294d8ddc1510a8e56.md               |   57 +
 .../5dfa22d1b521be39a3de7be0.md               |   71 ++
 .../5dfa2407b521be39a3de7be1.md               |   55 +
 .../5dfa30b9eacea3f48c6300ad.md               |   88 ++
 .../5dfa3589eacea3f48c6300ae.md               |   75 ++
 .../5dfa371beacea3f48c6300af.md               |   84 ++
 .../5dfa37b9eacea3f48c6300b0.md               |   58 +
 .../5dfb5ecbeacea3f48c6300b1.md               |   79 ++
 .../5dfb6250eacea3f48c6300b2.md               |   94 ++
 .../5dfb655eeacea3f48c6300b3.md               |   76 ++
 .../5dfb6a35eacea3f48c6300b4.md               |   98 ++
 .../5ef9b03c81a63668521804d0.md               |   85 ++
 .../5ef9b03c81a63668521804d1.md               |   81 ++
 .../5ef9b03c81a63668521804d2.md               |   94 ++
 .../5ef9b03c81a63668521804d3.md               |   72 ++
 .../5ef9b03c81a63668521804d4.md               |   96 ++
 .../5ef9b03c81a63668521804d5.md               |  105 ++
 .../5ef9b03c81a63668521804d6.md               |   88 ++
 .../5ef9b03c81a63668521804d7.md               |  116 ++
 .../5ef9b03c81a63668521804d8.md               |  109 ++
 .../5ef9b03c81a63668521804d9.md               |  104 ++
 .../5ef9b03c81a63668521804da.md               |   93 ++
 .../5ef9b03c81a63668521804db.md               |   91 ++
 .../5ef9b03c81a63668521804dc.md               |  137 +++
 .../5ef9b03c81a63668521804dd.md               |  104 ++
 .../5ef9b03c81a63668521804de.md               |  105 ++
 .../5ef9b03c81a63668521804df.md               |   95 ++
 .../5ef9b03c81a63668521804e1.md               |  102 ++
 .../5ef9b03c81a63668521804e2.md               |  130 ++
 .../5ef9b03c81a63668521804e3.md               |  122 ++
 .../5ef9b03c81a63668521804e5.md               |  117 ++
 .../5ef9b03c81a63668521804e7.md               |  102 ++
 .../5ef9b03c81a63668521804e8.md               |  104 ++
 .../5ef9b03c81a63668521804e9.md               |  118 ++
 .../5ef9b03c81a63668521804ea.md               |  108 ++
 .../5ef9b03c81a63668521804eb.md               |  112 ++
 .../5ef9b03c81a63668521804ec.md               |  105 ++
 .../5ef9b03c81a63668521804ee.md               |   99 ++
 .../5efada803cbd2bbdab94e332.md               |   99 ++
 .../5efae0543cbd2bbdab94e333.md               |   99 ++
 .../5efae16e3cbd2bbdab94e334.md               |  123 ++
 .../5efb23e70dc218d6c85f89b1.md               |  104 ++
 .../5efb2c990dc218d6c85f89b2.md               |  101 ++
 .../5efc4f528d6a74d05e68af74.md               |  136 ++
 .../5efc518e8d6a74d05e68af75.md               |   98 ++
 .../5efc54138d6a74d05e68af76.md               |   86 ++
 .../5efc575c8d6a74d05e68af77.md               |  124 ++
 .../5f05a1d8e233dff4a68508d8.md               |  136 ++
 .../5f07be6ef7412fbad0c5626b.md               |   71 ++
 .../5f07c98cdb9413cbd4b16750.md               |   81 ++
 .../5f07fb1579dc934717801375.md               |   98 ++
 .../5f0d48e7b435f13ab6550051.md               |  105 ++
 .../5f0d4ab1b435f13ab6550052.md               |  128 ++
 .../5f0d4d04b435f13ab6550053.md               |  114 ++
 .../5f1a80975fc4bcae0edb3497.md               |  108 ++
 .../5f1a89f1190aff21ae42105a.md               |  106 ++
 .../62bb4009e3458a128ff57d5d.md               |  166 +++
 .../62dabe2ef403a12d5d295273.md               |   84 ++
 .../7cf9b03d81a65668421804c3.md               |  103 ++
 .../60eebd07ea685b0e777b5583.md               |   52 +
 .../60f027099a15b00485563dd2.md               |   54 +
 .../60f027c87bc98f050395c139.md               |   67 +
 .../60f0286404aefb0562a4fdf9.md               |   56 +
 .../60f02e7361b68405e27b62a5.md               |   44 +
 .../60f030d388cb74067cf291c3.md               |   55 +
 .../60f1922fcbd2410527b3bd89.md               |   56 +
 .../60f1a5e2d2c23707a4f9a660.md               |   52 +
 .../60f1a9cbd23023082e149fee.md               |   65 +
 .../60f5c3e399ff1a05629964e4.md               |   63 +
 .../60f5cb8875ab6a0610f05071.md               |   64 +
 .../60f5d2776c854e069560fbe6.md               |   62 +
 .../60f5dc35c07ac1078f140916.md               |   82 ++
 .../60f803d5241e6a0433a523a1.md               |   74 ++
 .../60f805f813eaf2049bc2ceea.md               |   95 ++
 .../60f80e0081e0f2052ae5b505.md               |   87 ++
 .../60f81167d0d4910809f88945.md               |   80 ++
 .../60f81616cff80508badf9ad5.md               |   94 ++
 .../60f83e7bfc09900959f41e20.md               |   74 ++
 .../60f84ec41116b209c280ba91.md               |   82 ++
 .../60f852f645b5310a8264f555.md               |   76 ++
 .../60f85a62fb30c80bcea0cedb.md               |   85 ++
 .../60f8604682407e0d017bbf7f.md               |   82 ++
 .../60f8618d191b940d62038513.md               |  106 ++
 .../60fab4a123ce4b04526b082b.md               |   84 ++
 .../60fab8367d35de04e5cb7929.md               |   86 ++
 .../60fab9f17fa294054b74228c.md               |   88 ++
 .../60fabf0dd4959805dbae09e6.md               |  103 ++
 .../60fac4095512d3066053d73c.md               |   84 ++
 .../60fac56271087806def55b33.md               |  100 ++
 .../60fac8d7fdfaee0796934f20.md               |  116 ++
 .../60faca286cb48b07f6482970.md               |  110 ++
 .../60facde2d0dc61085b41063f.md               |  105 ++
 .../60facf914c7b9b08d7510c2c.md               |   95 ++
 .../60fad0a812d9890938524f50.md               |   95 ++
 .../60fad1cafcde010995e15306.md               |  155 +++
 .../60fad6dfcc0d930a59becf12.md               |  102 ++
 .../60fad8e6148f310bba7890b1.md               |  103 ++
 .../60fad99e09f9d30c1657e790.md               |  120 ++
 .../60fadb18058e950c73925279.md               |  121 ++
 .../60fadce90f85c50d0bb0dd4f.md               |  106 ++
 .../60fadd972e6ffe0d6858fa2d.md               |  152 +++
 .../60fadfa2b540b70dcfa8b771.md               |  132 ++
 .../60fc219d333e37046f474a6e.md               |  126 ++
 .../60fc22d1e64d1b04cdd4e602.md               |  141 +++
 .../60fc236dc04532052926fdac.md               |  126 ++
 .../60ffe1bc30415f042faea936.md               |  143 +++
 .../60ffe3936796ac04959285a9.md               |  140 +++
 .../60ffe4f4ec18cd04dc470c56.md               |  145 +++
 .../60ffe69ee377c6055e192a46.md               |  153 +++
 .../60ffe7d8aae62c05bcc9e7eb.md               |  146 +++
 .../60ffe8a5ceb0e90618db06d9.md               |  144 +++
 .../60ffe947a868ec068f7850f6.md               |  146 +++
 .../60ffe9cb47809106eda2f2c9.md               |  151 +++
 .../60ffec2825da1007509ddd06.md               |  152 +++
 .../60ffecefac971607ae73c60f.md               |  153 +++
 .../60ffefd6479a3d084fb77cbc.md               |  286 +++++
 .../62b30924c5e4ef0daba23b5e.md               |  122 ++
 .../62cc5b1779e4d313466f73c5.md               |   70 ++
 .../62ff8b9dab5ac88e4d3d43a3.md               |  109 ++
 .../62ff8e998d3e7eae14d6ae3b.md               |  102 ++
 .../62ff919a7b5612c0670923a5.md               |  131 ++
 .../60b69a66b6ddb80858c51578.md               |  112 ++
 .../60b69a66b6ddb80858c51579.md               |   63 +
 .../60b69a66b6ddb80858c5157a.md               |   56 +
 .../60b69a66b6ddb80858c5157b.md               |   50 +
 .../60b69a66b6ddb80858c5157c.md               |   51 +
 .../60b69a66b6ddb80858c5157d.md               |   54 +
 .../60b69a66b6ddb80858c5157e.md               |   56 +
 .../60b69a66b6ddb80858c5157f.md               |   69 ++
 .../60b69a66b6ddb80858c51580.md               |   59 +
 .../60b69a66b6ddb80858c51581.md               |   68 +
 .../60b69a66b6ddb80858c51582.md               |   70 ++
 .../60b69a66b6ddb80858c51583.md               |   84 ++
 .../60b69a66b6ddb80858c51584.md               |   79 ++
 .../60b69a66b6ddb80858c51585.md               |   74 ++
 .../60b69a66b6ddb80858c51586.md               |   93 ++
 .../60b69a66b6ddb80858c51587.md               |   91 ++
 .../60b69a66b6ddb80858c51588.md               |  102 ++
 .../60b69a66b6ddb80858c51589.md               |   88 ++
 .../60b69a66b6ddb80858c5158a.md               |  107 ++
 .../60b69a66b6ddb80858c5158b.md               |  105 ++
 .../60b69a66b6ddb80858c5158c.md               |  116 ++
 .../60b69a66b6ddb80858c5158d.md               |  114 ++
 .../60b69a66b6ddb80858c5158e.md               |  105 ++
 .../60b69a66b6ddb80858c5158f.md               |  126 ++
 .../60b69a66b6ddb80858c51590.md               |  124 ++
 .../60b69a66b6ddb80858c51591.md               |  115 ++
 .../60b69a66b6ddb80858c51592.md               |  136 ++
 .../60b69a66b6ddb80858c51593.md               |  125 ++
 .../60b69a66b6ddb80858c51594.md               |  135 ++
 .../60b69a66b6ddb80858c51595.md               |  146 +++
 .../60b69a66b6ddb80858c51596.md               |  144 +++
 .../60b69a66b6ddb80858c51597.md               |  135 ++
 .../60b69a66b6ddb80858c51598.md               |  142 +++
 .../60b69a66b6ddb80858c51599.md               |  156 +++
 .../60b69a66b6ddb80858c5159a.md               |  158 +++
 .../60b69a66b6ddb80858c5159b.md               |  161 +++
 .../60b69a66b6ddb80858c5159c.md               |  169 +++
 .../60b69a66b6ddb80858c5159d.md               |  167 +++
 .../60b69a66b6ddb80858c5159e.md               |  178 +++
 .../60b69a66b6ddb80858c5159f.md               |  183 +++
 .../60b69a66b6ddb80858c515a0.md               |  181 +++
 .../60b69a66b6ddb80858c515a1.md               |  192 +++
 .../60b69a66b6ddb80858c515a2.md               |  190 +++
 .../60b69a66b6ddb80858c515a3.md               |  201 +++
 .../60b69a66b6ddb80858c515a4.md               |  199 +++
 .../60b69a66b6ddb80858c515a5.md               |  190 +++
 .../60b69a66b6ddb80858c515a6.md               |  211 ++++
 .../60b69a66b6ddb80858c515a7.md               |  217 ++++
 .../60b69a66b6ddb80858c515a8.md               |  207 ++++
 .../60b69a66b6ddb80858c515a9.md               |  217 ++++
 .../60b69a66b6ddb80858c515aa.md               |  220 ++++
 .../60b69a66b6ddb80858c515ab.md               |  225 ++++
 .../60b69a66b6ddb80858c515ac.md               |  228 ++++
 .../60b69a66b6ddb80858c515ad.md               |  225 ++++
 .../60b69a66b6ddb80858c515ae.md               |  245 ++++
 .../60b69a66b6ddb80858c515af.md               |  240 ++++
 .../60b69a66b6ddb80858c515b0.md               |  238 ++++
 .../60b69a66b6ddb80858c515b1.md               |  298 +++++
 .../60b69a66b6ddb80858c515b2.md               |  281 +++++
 .../60b69a66b6ddb80858c515b3.md               |  287 +++++
 .../60b69a66b6ddb80858c515b4.md               |  285 +++++
 .../60b69a66b6ddb80858c515b5.md               |  296 +++++
 .../60b69a66b6ddb80858c515b6.md               |  282 +++++
 .../60b69a66b6ddb80858c515b7.md               |  295 +++++
 .../60b69a66b6ddb80858c515b8.md               |  286 +++++
 .../60b69a66b6ddb80858c515b9.md               |  301 +++++
 .../60b69a66b6ddb80858c515ba.md               |  304 +++++
 .../60b69a66b6ddb80858c515bc.md               |  295 +++++
 .../60b69a66b6ddb80858c515bd.md               |  348 ++++++
 .../60b69a66b6ddb80858c515be.md               |  337 +++++
 .../60b69a66b6ddb80858c515bf.md               |  348 ++++++
 .../60b69a66b6ddb80858c515c0.md               |  359 ++++++
 .../60b69a66b6ddb80858c515c1.md               |  365 ++++++
 .../60b69a66b6ddb80858c515c2.md               |  363 ++++++
 .../60b69a66b6ddb80858c515c3.md               |  354 ++++++
 .../60b69a66b6ddb80858c515c4.md               |  381 ++++++
 .../60b69a66b6ddb80858c515c5.md               |  382 ++++++
 .../60b69a66b6ddb80858c515c6.md               |  388 ++++++
 .../60b69a66b6ddb80858c515c7.md               |  739 +++++++++++
 .../60b80da8676fb3227967a731.md               |   71 ++
 .../60ba890832b4940f24d1936b.md               |  312 +++++
 .../60ba89123a445e0f5c9e4022.md               |  326 +++++
 .../60ba8913f1704c0f7a8906b8.md               |  312 +++++
 .../60ba89146b25080f99ab54ad.md               |  315 +++++
 .../60ba8914bab51f0fb8228e9c.md               |  310 +++++
 .../60ba929345ab0714a3743655.md               |  327 +++++
 .../60ba9296d4d6b414c1b10995.md               |  330 +++++
 .../60ba92987c1e4914dfa7a0b9.md               |  321 +++++
 .../60bad32219ebcb4a8810ac6a.md               |  164 +++
 .../61fd5a93fd62bb35968adeab.md               |  131 ++
 .../61fd6343fb42013d99bcd7f3.md               |   48 +
 .../61fd66c687e610436494c6f1.md               |   52 +
 .../61fd67a656743144844941cb.md               |   78 ++
 .../61fd6ab779390f49148773bb.md               |   65 +
 .../61fd6b7c83dbf54a08cf0498.md               |   79 ++
 .../61fd6cc9475a784b7776233e.md               |   80 ++
 .../61fd70336ebb3e4f62ee81ba.md               |   73 ++
 .../61fd719788899952e67692b9.md               |   86 ++
 .../61fd71d596e8f253b9408b39.md               |   86 ++
 .../61fd75ea7f663457612dba02.md               |  125 ++
 .../61fd7648a7ba2e5882436831.md               |   96 ++
 .../61fd778081276b59d59abad6.md               |  134 ++
 .../61fd77f7ad2aeb5ae34d07d6.md               |  138 +++
 .../61fd78621573aa5e8b512f5e.md               |  142 +++
 .../61fd7a160ed17960e971f28b.md               |  140 +++
 .../61fd7b3fcaa5406257abc5d1.md               |  130 ++
 .../61fd8e491324ce717da97ffe.md               |  119 ++
 .../61fd8fd08af43372f02952d0.md               |  149 +++
 .../61fd9126aa72a474301fc49f.md               |  131 ++
 .../61fd933ba685de776a94997e.md               |  169 +++
 .../61fd94056e0355785fbba4d3.md               |  173 +++
 .../61fd986ddbcbd47ba8fbc5ec.md               |  177 +++
 .../61fd990577d8227dd93fbeeb.md               |  181 +++
 .../61fd9a4ff2fc4481b9157bd7.md               |  165 +++
 .../61fd9ad665a4a282c8106be3.md               |  198 +++
 .../61fd9b7285bde783ad5b8aac.md               |  208 ++++
 .../61fd9d9fbdfe078800317055.md               |  158 +++
 .../61fda307bde0b091cf7d884a.md               |  168 +++
 .../61fda339eadcfd92a6812bed.md               |  171 +++
 .../61fdac1e31692f9a9ad97295.md               |  178 +++
 .../61fdaea3999cb19d76ce717b.md               |  173 +++
 .../61fdaf9ff894b6a084ecdc1b.md               |  175 +++
 .../61fdafe6f07fd7a1c6785bc2.md               |  183 +++
 .../61fdb04d9939f0a26ca51c2b.md               |  193 +++
 .../620159cd5431aa34bc6a4c9c.md               |  199 +++
 .../62015a5da1c95c358f079ebb.md               |  195 +++
 .../62015cd2654a1139321a89d2.md               |  197 +++
 .../62015d8942384c3aed48329e.md               |  213 ++++
 .../620167374bb8b4455cd11125.md               |  225 ++++
 .../620174ed519dd7506c1a4b61.md               |  213 ++++
 .../620175b3710a0951cfa86edf.md               |  230 ++++
 .../6201782cc420715562f36271.md               |  233 ++++
 .../620179bc0a6a2358c72b90ad.md               |  225 ++++
 .../62017b6f47454059bf2d3bd1.md               |  231 ++++
 .../62017f47c87be96457c49f46.md               |  299 +++++
 .../62017fa5bbef406580ceb44f.md               |  237 ++++
 .../62018243f046a368fab8ffb6.md               |  239 ++++
 .../6201830cb0c74b69f1b41635.md               |  243 ++++
 .../620186f4b6b8356d2def576b.md               |  253 ++++
 .../62018ba1aa263770c953be66.md               |  252 ++++
 .../62018c3e94434a71af1d5eaa.md               |  262 ++++
 .../62018ec29b3ae674f40bef31.md               |  256 ++++
 .../62019093fe30e278e797d2f6.md               |  266 ++++
 .../620191707bc65579ddd3ce15.md               |  271 ++++
 .../620192a767533a7ad19d96d7.md               |  278 +++++
 .../6201995d9ab88e80f1989dce.md               |  275 +++++
 .../620199c7a7a32c81d4db3410.md               |  279 +++++
 .../6201a1a7af32c287bd6b8183.md               |  285 +++++
 .../6201a1cc668a34888f5b2f52.md               |  289 +++++
 .../6201a20d742f5c89736c8cfb.md               |  303 +++++
 .../6201a42e39bf3b95b6a33bf3.md               |  321 +++++
 .../6201a4adcc6414968b391592.md               |  297 +++++
 .../6201a5258af7b398b030bfaf.md               |  313 +++++
 .../6201a59be346d399c21d10b1.md               |  591 +++++++++
 .../612e6afc009b450a437940a1.md               |  133 ++
 .../612e77aba7ca691f598feb02.md               |   64 +
 .../612e78af05201622d4bab8aa.md               |   57 +
 .../612e7d1c29fb872d6384379c.md               |   60 +
 .../612e804c54d5e7308d7ebe56.md               |   60 +
 .../612e813b3ba67633222cbe54.md               |   95 ++
 .../612e8279827a28352ce83a72.md               |   74 ++
 .../612e83ec2eca1e370f830511.md               |  102 ++
 .../612e89562043183c86df287c.md               |   77 ++
 .../612e89d254fe5d3df7d6693d.md               |   83 ++
 .../612e8eebe3a6dc3fcc33a66f.md               |   95 ++
 .../612e95ef2e4bdf41f69067f9.md               |   81 ++
 .../612e96fc87fe8e44f69f7ec5.md               |  102 ++
 .../612e98f3245c98475e49cfc6.md               |   88 ++
 .../612e9a21381a1949327512e6.md               |   89 ++
 .../612e9d142affc44a453655db.md               |  117 ++
 .../612e9f1e7e5ccd4fa9ada0be.md               |  103 ++
 .../612ea4c4993aba52ab4aa32e.md               |  119 ++
 .../612ea97df5742154772f312e.md               |  110 ++
 .../612ead8788d28655ef8db056.md               |  112 ++
 .../612eaf56b7ba3257fdbfb0db.md               |  144 +++
 .../612eb4893b63c75bb9251ddf.md               |  129 ++
 .../612eb75153591b5e3b1ab65e.md               |  115 ++
 .../612eb7ca8c275d5f89c73333.md               |  116 ++
 .../612eb8e984cd73677a92b7e9.md               |  117 ++
 .../612eb934f64a4d6890a45518.md               |  118 ++
 .../612ebcba99bfa46a15370b11.md               |  139 +++
 .../612ebe7fe6d07e6b76d1cae2.md               |  133 ++
 .../612ebedec97e096c8bf64999.md               |  136 ++
 .../612ebf9a210f2b6d77001e68.md               |  139 +++
 .../612ec0490ae8626e9adf82e4.md               |  133 ++
 .../612ec19d5268da7074941f84.md               |  154 +++
 .../612ec29c84b9a6718b1f5cec.md               |  288 +++++
 .../60a3e3396c7b40068ad6996a.md               |   55 +
 .../60a3e3396c7b40068ad6996b.md               |   65 +
 .../60a3e3396c7b40068ad6996c.md               |   42 +
 .../60a3e3396c7b40068ad6996d.md               |   41 +
 .../60a3e3396c7b40068ad6996e.md               |   43 +
 .../60a3e3396c7b40068ad6996f.md               |   47 +
 .../60a3e3396c7b40068ad69970.md               |   53 +
 .../60a3e3396c7b40068ad69971.md               |   67 +
 .../60a3e3396c7b40068ad69972.md               |   54 +
 .../60a3e3396c7b40068ad69973.md               |   55 +
 .../60a3e3396c7b40068ad69974.md               |   67 +
 .../60a3e3396c7b40068ad69975.md               |   67 +
 .../60a3e3396c7b40068ad69976.md               |   64 +
 .../60a3e3396c7b40068ad69977.md               |   65 +
 .../60a3e3396c7b40068ad69978.md               |   66 +
 .../60a3e3396c7b40068ad69979.md               |   71 ++
 .../60a3e3396c7b40068ad6997a.md               |   74 ++
 .../60a3e3396c7b40068ad6997b.md               |   70 ++
 .../60a3e3396c7b40068ad6997c.md               |   71 ++
 .../60a3e3396c7b40068ad6997d.md               |   74 ++
 .../60a3e3396c7b40068ad6997e.md               |   75 ++
 .../60a3e3396c7b40068ad6997f.md               |   82 ++
 .../60a3e3396c7b40068ad69980.md               |   84 ++
 .../60a3e3396c7b40068ad69981.md               |   84 ++
 .../60a3e3396c7b40068ad69982.md               |   79 ++
 .../60a3e3396c7b40068ad69983.md               |   80 ++
 .../60a3e3396c7b40068ad69984.md               |   81 ++
 .../60a3e3396c7b40068ad69986.md               |   93 ++
 .../60a3e3396c7b40068ad69987.md               |   94 ++
 .../60a3e3396c7b40068ad69988.md               |   87 ++
 .../60a3e3396c7b40068ad69989.md               |   88 ++
 .../60a3e3396c7b40068ad6998a.md               |   89 ++
 .../60a3e3396c7b40068ad6998b.md               |   93 ++
 .../60a3e3396c7b40068ad6998c.md               |  100 ++
 .../60a3e3396c7b40068ad6998d.md               |  108 ++
 .../60a3e3396c7b40068ad6998e.md               |   95 ++
 .../60a3e3396c7b40068ad6998f.md               |   98 ++
 .../60a3e3396c7b40068ad69990.md               |   97 ++
 .../60a3e3396c7b40068ad69991.md               |   98 ++
 .../60a3e3396c7b40068ad69992.md               |  101 ++
 .../60a3e3396c7b40068ad69993.md               |  100 ++
 .../60a3e3396c7b40068ad69994.md               |  103 ++
 .../60a3e3396c7b40068ad69995.md               |  104 ++
 .../60a3e3396c7b40068ad69996.md               |  103 ++
 .../60a3e3396c7b40068ad69997.md               |  180 +++
 .../615f2abbe7d18d49a1e0e1c8.md               |   55 +
 .../615f2d4150fe0d4cbd0f2628.md               |   60 +
 .../615f34948891834dd77655a6.md               |   61 +
 .../615f34ecc1091b4fd5a8a484.md               |   68 +
 .../615f357957e370510f21ea16.md               |   53 +
 .../615f378014c2da526a109c81.md               |   55 +
 .../615f38279e5c3d53692ea441.md               |   64 +
 .../615f38cabc64e3556f98cc1a.md               |   63 +
 .../615f3949f58e12577dcefb00.md               |   59 +
 .../615f39d7da41b15851fa3fb9.md               |   64 +
 .../615f3b091162165948e1cb33.md               |   70 ++
 .../615f3cafd794015aa9547a6d.md               |   74 ++
 .../615f3d9e59db4b5b8e960762.md               |   68 +
 .../615f3e1b7233ee5c7595771f.md               |   69 ++
 .../615f3e4af8008c5d494d3afe.md               |   78 ++
 .../615f3ed16592445e57941aec.md               |   94 ++
 .../615f405b89a7ec5f8e2d11f4.md               |   89 ++
 .../615f40b01f680e608d360ed4.md               |   82 ++
 .../615f4172e9eec061d6456221.md               |   89 ++
 .../615f41c979787462e76dab90.md               |  102 ++
 .../615f423cf65d5864132a0956.md               |   84 ++
 .../615f42a021625f656101ef93.md               |  104 ++
 .../615f4bfb9de4a16703b56eb6.md               |   94 ++
 .../615f4ce9d877b668417c0c42.md               |  104 ++
 .../615f4dde9d72e3694cb9ee3b.md               |  105 ++
 .../615f4ec58334106a4170c2a8.md               |  105 ++
 .../615f4f9e4a40566b776a8f38.md               |  111 ++
 .../615f50473cc0196c6dd3892a.md               |  101 ++
 .../615f51257a8a516d80b6c743.md               |  113 ++
 .../615f51e4e5b24a6e80eccce1.md               |  116 ++
 .../615f522dea4f776f64dc3e91.md               |  113 ++
 .../615f5486b8fd4b71633f69b0.md               |  138 +++
 .../615f575b50b91e72af079480.md               |  119 ++
 .../615f5af373a68e744a3c5a76.md               |  120 ++
 .../615f5c1cb7575c7551ed8a40.md               |  116 ++
 .../615f5fd85d0062761f288364.md               |  119 ++
 .../615f61338c8ca176d6445574.md               |  126 ++
 .../615f666ac5edea782feb7e75.md               |  127 ++
 .../615f671b6d1919792745aa5d.md               |  153 +++
 .../615f6823d0815b7a991f2a75.md               |  139 +++
 .../615f6a7d4ba8037bc086c2c7.md               |  127 ++
 .../615f6b2d164f81809efd9bdc.md               |  165 +++
 .../615f6cc778f7698258467596.md               |  156 +++
 .../615f6fddaac1e083502d3e6a.md               |  130 ++
 .../615f70077a4ff98424236c1e.md               |  138 +++
 .../615f72a872354a850d4f533e.md               |  142 +++
 .../615f74a71f1e498619e38ee8.md               |  149 +++
 .../615f7ad94380408d971d14f6.md               |  161 +++
 .../615f7bc680f7168ea01ebf99.md               |  146 +++
 .../615f7c71eab8218f846e4503.md               |  165 +++
 .../615f7d489a581590d1350288.md               |  146 +++
 .../615f7de4487b64919bb4aa5e.md               |  178 +++
 .../615f7e7281626a92bbd62da8.md               |  179 +++
 .../615f7ecb09de9a938ef94756.md               |  180 +++
 .../615f7fa959ab75948f96a0d6.md               |  164 +++
 .../615f808d85793195b0f53be9.md               |  166 +++
 .../615f829d07b18f96f6f6684b.md               |  150 +++
 .../615f83ef928ec9982b785b6a.md               |  156 +++
 .../615f84f246e8ba98e3cd97be.md               |  193 +++
 .../615f887466db4ba14b5342cc.md               |  176 +++
 .../615f89e055040ba294719d2f.md               |  175 +++
 .../615f8bfe0f30a1a3c340356b.md               |  202 +++
 .../615f8f1223601fa546e93f31.md               |  184 +++
 .../615f905fbd1017a65ca224eb.md               |  192 +++
 .../615f94786869e1a7fec54375.md               |  176 +++
 .../615f951dff9317a900ef683f.md               |  325 +++++
 .../caesars-cipher.md                         |   88 ++
 .../cash-register.md                          |  252 ++++
 .../palindrome-checker.md                     |  125 ++
 .../roman-numeral-converter.md                |  215 ++++
 .../telephone-number-validator.md             |  217 ++++
 .../5d5a813321b9e3db6c106a46.md               |  154 +++
 .../62a115879a6d51422652cbfc.md               |   78 ++
 .../62a1166ed9a56d439c0770e7.md               |   70 ++
 .../62a23c1d505bfa13747c8a9b.md               |  167 +++
 .../62a23cb9bc467a147516b500.md               |   99 ++
 .../62a23d1c5f1c93161f3582ae.md               |  104 ++
 .../62a2401b9842721796b72850.md               |   62 +
 .../62a24068d60b671847d1d4e2.md               |   68 +
 .../62a2409897ec621942234cf6.md               |   86 ++
 .../62a240c67f3dbb1a1e6d95ee.md               |  113 ++
 .../62a24128d5e8af1b47ad1aab.md               |  101 ++
 .../62a24190868ca51c0b6e83c7.md               |  127 ++
 .../62a241df03c1f61ce936f5d9.md               |  101 ++
 .../62a2509ba163e020bb9d84ea.md               |  108 ++
 .../62a255dae245b52317da824a.md               |  108 ++
 .../62a257659d0d1e2456f24ba2.md               |  109 ++
 .../62a39f5a5790eb27c1e5d4bf.md               |  102 ++
 .../62a3a0a3c0a4b32915d26a6e.md               |  132 ++
 .../62a3a488b24fb32b91155d56.md               |  112 ++
 .../62a3a75d8466a12e009eff76.md               |  136 ++
 .../62a3a7e4f1060e2fc5ffb34b.md               |  122 ++
 .../62a3b365f1cdeb33efc2502e.md               |  138 +++
 .../62a3b3eab50e193608c19fc6.md               |  115 ++
 .../62a3b41c9494f937560640ab.md               |  140 +++
 .../62a3b49686792938718b90d3.md               |  118 ++
 .../62a3b506dbaead396f58a701.md               |  142 +++
 .../62a3b5843544ce3a77459c27.md               |  118 ++
 .../62a3b79d520a7f3d0e25afd6.md               |  128 ++
 .../62a3bb9aeefe4b3fc43c6d7b.md               |  116 ++
 .../62a3bec30ea7f941412512dc.md               |  181 +++
 .../62a3c0ab883fd9435cd5c518.md               |  134 ++
 .../62a3c2fccf186146b59c6e96.md               |  134 ++
 .../62a3c4a0e52767482c5202d4.md               |  151 +++
 .../62a3c668afc43b4a134cca81.md               |  150 +++
 .../62a3c8bf3980c14c438d2aed.md               |  138 +++
 .../62a3c91a2bab1b4d6fabb726.md               |  146 +++
 .../62a3cdb11478a34ff4a6470d.md               |  152 +++
 .../62a3cfc8328d3351b95d4f61.md               |  164 +++
 .../62a7beb1ad61211ac153707f.md               |  176 +++
 .../62a7bf06d2ad9d1c5024e833.md               |  202 +++
 .../62a7bfabe119461eb13ccbd6.md               |  157 +++
 .../62a7bfd9179b7f1f6a15fb1e.md               |  172 +++
 .../62a7c011eef9fb2084b966db.md               |  162 +++
 .../62a7c071219da921758a35bb.md               |  194 +++
 .../62a7c23e6b511f22ed71197a.md               |  164 +++
 .../62a7cc99577fbf25ee7a7d76.md               |  180 +++
 .../62a8a929e4260d08093756d2.md               |  176 +++
 .../62a8a9d876b2580943ba9351.md               |  171 +++
 .../62a8aa98a8289d0a698eee1d.md               |  187 +++
 .../62a8ab0e27cbaf0b54ba8a42.md               |  200 +++
 .../62a8ac194679e60cb561b0a8.md               |  194 +++
 .../62a8ad8e01d7cb0deae5ec66.md               |  198 +++
 .../62a8ade9b2f5b30ef0b606c2.md               |  181 +++
 .../62a8ae85fcaedc0fddc7ca4f.md               |  235 ++++
 .../62a8b0b5053f16111b0b6b5f.md               |  224 ++++
 .../62a8b1762b7775124622e1a3.md               |  176 +++
 .../62a8b3cc436db8139cc5fc09.md               |  170 +++
 .../62a8b6536156c51500739b41.md               |  190 +++
 .../62a8b711ab7a12161c7d9b67.md               |  176 +++
 .../62a8b9770050d217d2247801.md               |  176 +++
 .../62a8c0c8313e891a15ec23e7.md               |  188 +++
 .../62a8c1154d3ae11aee80353f.md               |  200 +++
 .../62a8c151b23bf21bc7c4fcba.md               |  176 +++
 .../62a8c173949f851c83c64756.md               |  178 +++
 .../62a8c242b25a531f2909e5bc.md               |  190 +++
 .../62a8c2bbbd8aa82052f47c53.md               |  234 ++++
 .../62a8c31ec0ec78216a1c36a0.md               |  204 +++
 .../62a8c370ad8c68227137e0bc.md               |  194 +++
 .../62a8c3ebc6c35e23785e1a19.md               |  192 +++
 .../62a8c41ecaf1bd24536129b8.md               |  203 +++
 .../62a8c465fa7b0c252f4a8f0c.md               |  207 ++++
 .../62a8c4db0710f3260f867a92.md               |  209 ++++
 .../62a8c56247609626fa4a8d6e.md               |  221 ++++
 .../62a8c5db7888af27af23f0dd.md               |  206 ++++
 .../62a8c65b75664c28a8e59c16.md               |  200 +++
 .../62a8c6815f5f1a29735efe1b.md               |  204 +++
 .../62a8c7322e42962ad53ad204.md               |  229 ++++
 .../62a8c7a59e72c02bb1c717d2.md               |  203 +++
 .../62a8c89e4272512d44fc1c66.md               |  215 ++++
 .../62a8c8cee8e5cf2e001789b4.md               |  219 ++++
 .../62a8ca22d29fe62f3952bdf5.md               |  208 ++++
 .../62a8cb19bd7f8a304e5427a1.md               |  206 ++++
 .../62a8cbd1e3595431d5a2b3f1.md               |  222 ++++
 .../62a8cce1b0c32c33017cf2e9.md               |  211 ++++
 .../62a8ce1dfc990134162b3bd9.md               |  203 +++
 .../62a8ce73d0dce43468f6689c.md               |  222 ++++
 .../62a8cf22272d6d35af80d4ac.md               |  229 ++++
 .../62a8d0337d7c67377a4a76c6.md               |  218 ++++
 .../62a8d08668fa8b38732486e9.md               |  211 ++++
 .../62a8d0c4f12c2239b6618582.md               |  226 ++++
 .../62a8d0fdf2dad83a92883a80.md               |  225 ++++
 .../62a8d143f2a58e3b6d6e9c33.md               |  215 ++++
 .../62a8d1c72e8bb13c2074d93c.md               |  215 ++++
 .../62a8d2146a3e853d0a6e28ca.md               |  224 ++++
 .../62a8d24c97461b3ddb9397c8.md               |  229 ++++
 .../62a8d2e2a073be3edb46116f.md               |  221 ++++
 .../62a8d31ebbc10e3fe1b28e03.md               |  223 ++++
 .../62a8d35660db4040ba292193.md               |  234 ++++
 .../62a8d382cd075f4169223e14.md               |  223 ++++
 .../62a8d539dc11cb42b5dd7ec8.md               |  233 ++++
 .../62a8d61ddfe35744369365b7.md               |  249 ++++
 .../62a8d6c7001ebc45350e3d16.md               |  243 ++++
 .../62a8d7b8ab568b4649998954.md               |  237 ++++
 .../62a8d81f539f004776dd9b1e.md               |  310 +++++
 .../62a8dd468debb449b4454086.md               |  250 ++++
 .../62a8dd9cdb16324b04cfd958.md               |  260 ++++
 .../62a8dfcf7fb1044d2f478fd1.md               |  259 ++++
 .../62a8e0d1d0110b4ec421489f.md               |  269 ++++
 .../62a8e142f7f0bd4fed898de3.md               |  288 +++++
 .../62a8e1dc897df55108bcb5e8.md               |  269 ++++
 .../62a8e21398ad61520edb724f.md               |  270 ++++
 .../62a8e24c673b075317cc0b09.md               |  281 +++++
 .../62a8e271f8e3d1541f9624ad.md               |  284 +++++
 .../62a8e35675c18c56354c08cf.md               |  285 +++++
 .../62a8e41e2f190c58404dd46e.md               |  293 +++++
 .../62a8e45cc600c3591cee671a.md               |  275 +++++
 .../62a8e49f4df7af5ae2d7a616.md               |  288 +++++
 .../62a8e4dc6a60f85bf256a0cb.md               |  316 +++++
 .../62a8ed36d7a7915dfa444ba2.md               |  289 +++++
 .../62a8edd05e27cc668051686f.md               |  285 +++++
 .../62a8ee154c8946678775c4a4.md               |  297 +++++
 .../62a8ee71f018e968a056d369.md               |  297 +++++
 .../62a8eec45f77bc69e8775294.md               |  291 +++++
 .../62a8eefe2e68b66ac563816b.md               |  299 +++++
 .../62a8ef6a52292f6bdca4f6f8.md               |  292 +++++
 .../62a8ef8f0c76a46cd221a68c.md               |  293 +++++
 .../62a8efb0e3ce826db8daf80f.md               |  295 +++++
 .../62a8eff21c0b0f6ebe5b8e38.md               |  319 +++++
 .../62a8f06fb318666fef69f91e.md               |  301 +++++
 .../62a8f14fe6d1fc72454648c7.md               |  308 +++++
 .../62a8f1d5f5ddbf74c07f733b.md               |  296 +++++
 .../62a8f20463b324759953edad.md               |  356 ++++++
 .../62a8f256b813a476cae51f49.md               |  353 ++++++
 .../62a8f2bc37675e77d5835235.md               |  355 ++++++
 .../62a8f35bde1750791f58773f.md               |  322 +++++
 .../62a94114ce0b8918b487390f.md               |  348 ++++++
 .../62aa1cea594f152ba626b872.md               |  326 +++++
 .../62aa1d6736ba262cfa74344b.md               |  332 +++++
 .../62aa1d9f535e102e4663e7a6.md               |  342 +++++
 .../62aa1e3c7c3d552fb04f0f18.md               |  328 +++++
 .../62aa1e8ccd579330e097ce44.md               |  338 +++++
 .../62aa1eec891ed731db227a36.md               |  350 ++++++
 .../62aa1fed3d4e873366ff3131.md               |  331 +++++
 .../62aa204c1e1d33348ff09944.md               |  333 +++++
 .../62aa20e9cf1be9358f5aceae.md               |  338 +++++
 .../62aa2136fc49b836dfedb959.md               |  342 +++++
 .../62aa21971e3b743844849985.md               |  354 ++++++
 .../62aa21ea8d9d9f396b95dd87.md               |  346 ++++++
 .../62aa226207f33d3ad4c6f546.md               |  367 ++++++
 .../62aa22aba186563bcbf2c395.md               |  350 ++++++
 .../62aa234322d4ad3e8bce42cc.md               |  364 ++++++
 .../62aa2469c77b363fdb4f0e06.md               |  358 ++++++
 .../62aa252c3b1073415ba2b898.md               |  355 ++++++
 .../62aa258da314ef42ba0a1858.md               |  384 ++++++
 .../62aa25fcb5837d43b4d9873d.md               |  389 ++++++
 .../62aa2626c3c10244b94c787b.md               |  364 ++++++
 .../62aa264d23cdaa45a20efada.md               |  381 ++++++
 .../62aa26cca3cd3d46c431e73b.md               |  379 ++++++
 .../62aa27227399d647e1c37a3c.md               |  380 ++++++
 .../62aa27560def7048d7b4a095.md               |  368 ++++++
 .../62aa27c40ca6f04ab8be5fac.md               |  375 ++++++
 .../62aa28032d863d4bd8058799.md               |  375 ++++++
 .../62aa287434dc284cea01157c.md               |  373 ++++++
 .../62aa28bbd6323e4dfb3ac43e.md               |  373 ++++++
 .../62aa28fb651bf14efa2dbb16.md               |  390 ++++++
 .../62aa2943669c9d5026af6985.md               |  387 ++++++
 .../62aa2999ec27ec516655eba6.md               |  386 ++++++
 .../62aa29d8f8f88152c91350ca.md               |  394 ++++++
 .../62aa2aec2f09d454253aad6c.md               |  394 ++++++
 .../62aa2ba9cd881355a6f0a5a8.md               |  746 +++++++++++
 .../62b46e3a8d4be31be5af793d.md               |  121 ++
 .../62ba17beef16c563069a65d8.md               |  339 +++++
 .../62fc1ee0c5a89717d4785729.md               |  114 ++
 .../62fc20387ef88d1d1998aac5.md               |  127 ++
 .../62fc211760bfc220f4734800.md               |  123 ++
 .../build-a-survey-form.md                    |   12 +-
 .../falsy-bouncer.md                          |    4 +-
 ...f-an-array-using-concat-instead-of-push.md |    8 +-
 .../visualize-data-with-a-bar-chart.md        |    2 +-
 .../visualize-data-with-a-choropleth-map.md   |    2 +-
 .../visualize-data-with-a-heat-map.md         |    2 +-
 ...visualize-data-with-a-scatterplot-graph.md |    2 +-
 .../visualize-data-with-a-treemap-diagram.md  |    2 +-
 .../mongodb-and-mongoose/create-a-model.md    |    4 +-
 .../build-your-own-functions.md               |    2 +-
 .../comparing-and-sorting-tuples.md           |    2 +-
 .../data-visualization-mailing-lists.md       |   10 +-
 .../dictionaries-and-loops.md                 |    2 +-
 .../intermediate-strings.md                   |    2 +-
 .../more-conditional-structures.md            |    4 +-
 .../relational-databases-and-sqlite.md        |    6 +-
 ...al-databases-many-to-many-relationships.md |   10 +-
 .../python-for-everybody/strings-and-lists.md |    2 +-
 ...services-api-rate-limiting-and-security.md |    8 +-
 .../arithmetic-formatter.md                   |    4 +-
 .../budget-app.md                             |    2 +-
 .../polygon-area-calculator.md                |    2 +-
 .../probability-calculator.md                 |    4 +-
 .../time-calculator.md                        |    2 +-
 .../demographic-data-analyzer.md              |    6 +-
 ...-variance-standard-deviation-calculator.md |    6 +-
 .../medical-data-visualizer.md                |    6 +-
 .../page-view-time-series-visualizer.md       |    6 +-
 .../sea-level-predictor.md                    |    6 +-
 .../anonymous-message-board.md                |    6 +-
 .../port-scanner.md                           |    8 +-
 .../sha-1-password-cracker.md                 |   10 +-
 .../stock-price-checker.md                    |    8 +-
 ...ur-site-via-https-only-with-helmet.hsts.md |    2 +-
 ...-response-mime-type-with-helmet.nosniff.md |    2 +-
 ...lmet-using-the-parent-helmet-middleware.md |    2 +-
 ...client-side-caching-with-helmet.nocache.md |    2 +-
 ...fetching-with-helmet.dnsprefetchcontrol.md |    2 +-
 ...sh-and-compare-passwords-asynchronously.md |    2 +-
 ...ash-and-compare-passwords-synchronously.md |    2 +-
 ...-information-using-helmet.hidepoweredby.md |    2 +-
 ...-of-clickjacking-with-helmet.frameguard.md |    2 +-
 ...pting-xss-attacks-with-helmet.xssfilter.md |    2 +-
 ...ing-untrusted-html-with-helmet.ienoopen.md |    2 +-
 ...olicy-with-helmet.contentsecuritypolicy.md |    2 +-
 .../understand-bcrypt-hashes.md               |    8 +-
 .../problem-125-palindromic-sums.md           |   51 +-
 .../build-a-survey-form.md                    |   12 +-
 .../6148da157cc0bd0d06df5c0a.md               |    4 +-
 .../5f33294a6af5e9188dbdb8f3.md               |   10 +-
 .../5f332a88dc25a0fd25c7687a.md               |   12 +-
 .../5f332b23c2045fb843337579.md               |   12 +-
 .../5f344f9c805cd193c33d829c.md               |    2 +-
 .../5f344fad8bf01691e71a30eb.md               |    2 +-
 .../5f344fbc22624a2976425065.md               |    2 +-
 .../5f344fc1520b6719f2e35605.md               |    2 +-
 .../5f3477ae34c1239cafe128be.md               |    2 +-
 .../5f3477ae8466a9a3d2cc953c.md               |    2 +-
 .../5f3477ae9675db8bb7655b30.md               |   16 +-
 .../5f3477aefa51bfc29327200b.md               |    2 +-
 .../5f3477cb2e27333b1ab2b955.md               |    2 +-
 .../5f3477cb303c5cb61b43aa9b.md               |    2 +-
 .../5f3477cbcb6ba47918c1da92.md               |    2 +-
 .../5f34a1fd611d003edeafd681.md               |    2 +-
 .../5f356ed60785e1f3e9850b6e.md               |    2 +-
 .../5f356ed60a5decd94ab66986.md               |    2 +-
 .../5f356ed6199b0cdef1d2be8f.md               |    2 +-
 .../5f356ed63c7807a4f1e6d054.md               |    2 +-
 .../5f356ed63e0fa262326eef05.md               |    2 +-
 .../5f356ed656a336993abd9f7c.md               |    2 +-
 .../5f356ed69db0a491745e2bb6.md               |    2 +-
 .../5f356ed6cf6eab5f15f5cfe6.md               |    2 +-
 .../5f35e5c4321f818cdc4bed30.md               |    2 +-
 .../5f35e5c44359872a137bd98f.md               |    2 +-
 .../5f3c866d0fc037f7311b4ac8.md               |    2 +-
 .../5f3c866d28d7ad0de6470505.md               |    2 +-
 .../5f3c866d5414453fc2d7b480.md               |    2 +-
 .../5f3c866daec9a49519871816.md               |    2 +-
 .../5f3c866dbf362f99b9a0c6d0.md               |    2 +-
 .../5f3c866dd0d0275f01d4d847.md               |    2 +-
 .../5f3c866de7a5b784048f94b1.md               |    2 +-
 .../5f3cade94c6576e7f7b7953f.md               |    2 +-
 .../5f3cade9993019e26313fa8e.md               |    2 +-
 .../5f3cade99dda4e6071a85dfd.md               |    2 +-
 .../5f3cade9fa77275d9f4efe62.md               |    2 +-
 .../5f3ef6e01f288a026d709587.md               |    8 +-
 .../5f3ef6e03d719d5ac4738993.md               |    2 +-
 .../5f3ef6e04559b939080db057.md               |    2 +-
 .../5f3ef6e050279c7a4a7101d3.md               |    2 +-
 .../5f3ef6e05473f91f948724ab.md               |    2 +-
 .../5f3ef6e056bdde6ae6892ba2.md               |    2 +-
 .../5f3ef6e06d34faac0447fc44.md               |    2 +-
 .../5f3ef6e07276f782bb46b93d.md               |    2 +-
 .../5f3ef6e0819d4f23ca7285e6.md               |    2 +-
 .../5f3ef6e087d56ed3ffdc36be.md               |    2 +-
 .../5f3ef6e0a81099d9a697b550.md               |    2 +-
 .../5f3ef6e0b431cc215bb16f55.md               |    2 +-
 .../5f3ef6e0e0c3feaebcf647ad.md               |    2 +-
 .../5f3ef6e0e9629bad967cd71e.md               |    2 +-
 .../5f3ef6e0eaa7da26e3d34d78.md               |    2 +-
 .../5f3ef6e0f8c230bdd2349716.md               |    2 +-
 .../5f3f26fa39591db45e5cd7a0.md               |    2 +-
 .../5f459225127805351a6ad057.md               |    2 +-
 .../5f459a7ceb8b5c446656d88b.md               |    2 +-
 .../5f459cf202c2a3472fae6a9f.md               |    2 +-
 .../5f459fd48bdc98491ca6d1a3.md               |    2 +-
 .../5f45a05977e2fa49d9119437.md               |    2 +-
 .../5f45a276c093334f0f6e9df4.md               |    2 +-
 .../5f45a5a7c49a8251f0bdb527.md               |    2 +-
 .../5f45a66d4a2b0453301e5a26.md               |    2 +-
 .../5f45b0731d39e15d54df4dfc.md               |    2 +-
 .../5f45b25e7ec2405f166b9de1.md               |    2 +-
 .../5f45b3c93c027860d9298dbd.md               |    2 +-
 .../5f45b45d099f3e621fbbb256.md               |    2 +-
 .../5f45b4c81cea7763550e40df.md               |    2 +-
 .../5f45b715301bbf667badc04a.md               |    2 +-
 .../5f46e270702a8456a664f0df.md               |    2 +-
 .../5f46e36e745ead58487aabf2.md               |    2 +-
 .../5f46e7a4750dd05b5a673920.md               |    2 +-
 .../5f46e8284aae155c83015dee.md               |    2 +-
 .../5f46ede1ff8fec5ba656b44c.md               |    2 +-
 .../5f46fc57528aa1c4b5ea7c2e.md               |    2 +-
 .../5f4701b942c824109626c3d8.md               |    2 +-
 .../5f475bb508746c16c9431d42.md               |    2 +-
 .../5f475e1c7f71a61d913836c6.md               |    2 +-
 .../5f47633757ae3469f2d33d2e.md               |    2 +-
 .../5f47fe7e31980053a8d4403b.md               |    2 +-
 .../5f716ad029ee4053c7027a7a.md               |    2 +-
 .../5f716bee5838c354c728a7c5.md               |    2 +-
 .../5f7691dafd882520797cd2f0.md               |    2 +-
 .../5f7692f7c5b3ce22a57788b6.md               |    2 +-
 .../5f769541be494f25449b292f.md               |    2 +-
 .../5f76967fad478126d6552b0d.md               |    2 +-
 .../5f769702e6e33127d14aa120.md               |    2 +-
 .../5f7b87422a560036fd03ccff.md               |    2 +-
 .../5f7b88d37b1f98386f04edc0.md               |    2 +-
 .../616965351e74d4689eb6de30.md               |    8 +-
 .../6153a3952facd25a83fe8083.md               |    2 +-
 .../5d822fd413a79914d39e98d5.md               |    2 +-
 .../5dc2385ff86c76b9248c6eb7.md               |    6 +-
 .../5dc23991f86c76b9248c6eb8.md               |    4 +-
 .../5ddbd81294d8ddc1510a8e56.md               |    4 +-
 .../5dfa22d1b521be39a3de7be0.md               |    6 +-
 .../5f07be6ef7412fbad0c5626b.md               |    4 +-
 .../60f1922fcbd2410527b3bd89.md               |   10 +-
 .../60f803d5241e6a0433a523a1.md               |   10 +-
 .../build-a-survey-form.md                    |   12 +-
 .../falsy-bouncer.md                          |    4 +-
 ...f-an-array-using-concat-instead-of-push.md |    8 +-
 .../visualize-data-with-a-bar-chart.md        |    2 +-
 .../visualize-data-with-a-choropleth-map.md   |    2 +-
 .../visualize-data-with-a-heat-map.md         |    2 +-
 ...visualize-data-with-a-scatterplot-graph.md |    2 +-
 .../visualize-data-with-a-treemap-diagram.md  |    2 +-
 .../mongodb-and-mongoose/create-a-model.md    |    4 +-
 .../build-your-own-functions.md               |    2 +-
 .../comparing-and-sorting-tuples.md           |    2 +-
 .../data-visualization-mailing-lists.md       |   10 +-
 .../dictionaries-and-loops.md                 |    2 +-
 .../intermediate-strings.md                   |    2 +-
 .../more-conditional-structures.md            |    4 +-
 .../relational-databases-and-sqlite.md        |    6 +-
 ...al-databases-many-to-many-relationships.md |   10 +-
 .../python-for-everybody/strings-and-lists.md |    2 +-
 ...services-api-rate-limiting-and-security.md |    8 +-
 .../arithmetic-formatter.md                   |    4 +-
 .../budget-app.md                             |    2 +-
 .../polygon-area-calculator.md                |    2 +-
 .../probability-calculator.md                 |    4 +-
 .../time-calculator.md                        |    2 +-
 .../demographic-data-analyzer.md              |    6 +-
 ...-variance-standard-deviation-calculator.md |    6 +-
 .../medical-data-visualizer.md                |    6 +-
 .../page-view-time-series-visualizer.md       |    6 +-
 .../sea-level-predictor.md                    |    6 +-
 .../anonymous-message-board.md                |    6 +-
 .../port-scanner.md                           |    8 +-
 .../sha-1-password-cracker.md                 |   10 +-
 .../stock-price-checker.md                    |    8 +-
 ...ur-site-via-https-only-with-helmet.hsts.md |    2 +-
 ...-response-mime-type-with-helmet.nosniff.md |    2 +-
 ...lmet-using-the-parent-helmet-middleware.md |    2 +-
 ...client-side-caching-with-helmet.nocache.md |    2 +-
 ...fetching-with-helmet.dnsprefetchcontrol.md |    2 +-
 ...sh-and-compare-passwords-asynchronously.md |    2 +-
 ...ash-and-compare-passwords-synchronously.md |    2 +-
 ...-information-using-helmet.hidepoweredby.md |    2 +-
 ...-of-clickjacking-with-helmet.frameguard.md |    2 +-
 ...pting-xss-attacks-with-helmet.xssfilter.md |    2 +-
 ...ing-untrusted-html-with-helmet.ienoopen.md |    2 +-
 ...olicy-with-helmet.contentsecuritypolicy.md |    2 +-
 .../understand-bcrypt-hashes.md               |    8 +-
 .../problem-125-palindromic-sums.md           |   51 +-
 .../build-a-survey-form.md                    |   12 +-
 .../6148da157cc0bd0d06df5c0a.md               |    4 +-
 .../5f33294a6af5e9188dbdb8f3.md               |   10 +-
 .../5f332a88dc25a0fd25c7687a.md               |   12 +-
 .../5f332b23c2045fb843337579.md               |   12 +-
 .../5f344f9c805cd193c33d829c.md               |    2 +-
 .../5f344fad8bf01691e71a30eb.md               |    2 +-
 .../5f344fbc22624a2976425065.md               |    2 +-
 .../5f344fc1520b6719f2e35605.md               |    2 +-
 .../5f3477ae34c1239cafe128be.md               |    2 +-
 .../5f3477ae8466a9a3d2cc953c.md               |    2 +-
 .../5f3477ae9675db8bb7655b30.md               |   16 +-
 .../5f3477aefa51bfc29327200b.md               |    2 +-
 .../5f3477cb2e27333b1ab2b955.md               |    2 +-
 .../5f3477cb303c5cb61b43aa9b.md               |    2 +-
 .../5f3477cbcb6ba47918c1da92.md               |    2 +-
 .../5f34a1fd611d003edeafd681.md               |    2 +-
 .../5f356ed60785e1f3e9850b6e.md               |    2 +-
 .../5f356ed60a5decd94ab66986.md               |    2 +-
 .../5f356ed6199b0cdef1d2be8f.md               |    2 +-
 .../5f356ed63c7807a4f1e6d054.md               |    2 +-
 .../5f356ed63e0fa262326eef05.md               |    2 +-
 .../5f356ed656a336993abd9f7c.md               |    2 +-
 .../5f356ed69db0a491745e2bb6.md               |    2 +-
 .../5f356ed6cf6eab5f15f5cfe6.md               |    2 +-
 .../5f35e5c4321f818cdc4bed30.md               |    2 +-
 .../5f35e5c44359872a137bd98f.md               |    2 +-
 .../5f3c866d0fc037f7311b4ac8.md               |    2 +-
 .../5f3c866d28d7ad0de6470505.md               |    2 +-
 .../5f3c866d5414453fc2d7b480.md               |    2 +-
 .../5f3c866daec9a49519871816.md               |    2 +-
 .../5f3c866dbf362f99b9a0c6d0.md               |    2 +-
 .../5f3c866dd0d0275f01d4d847.md               |    2 +-
 .../5f3c866de7a5b784048f94b1.md               |    2 +-
 .../5f3cade94c6576e7f7b7953f.md               |    2 +-
 .../5f3cade9993019e26313fa8e.md               |    2 +-
 .../5f3cade99dda4e6071a85dfd.md               |    2 +-
 .../5f3cade9fa77275d9f4efe62.md               |    2 +-
 .../5f3ef6e01f288a026d709587.md               |    8 +-
 .../5f3ef6e03d719d5ac4738993.md               |    2 +-
 .../5f3ef6e04559b939080db057.md               |    2 +-
 .../5f3ef6e050279c7a4a7101d3.md               |    2 +-
 .../5f3ef6e05473f91f948724ab.md               |    2 +-
 .../5f3ef6e056bdde6ae6892ba2.md               |    2 +-
 .../5f3ef6e06d34faac0447fc44.md               |    2 +-
 .../5f3ef6e07276f782bb46b93d.md               |    2 +-
 .../5f3ef6e0819d4f23ca7285e6.md               |    2 +-
 .../5f3ef6e087d56ed3ffdc36be.md               |    2 +-
 .../5f3ef6e0a81099d9a697b550.md               |    2 +-
 .../5f3ef6e0b431cc215bb16f55.md               |    2 +-
 .../5f3ef6e0e0c3feaebcf647ad.md               |    2 +-
 .../5f3ef6e0e9629bad967cd71e.md               |    2 +-
 .../5f3ef6e0eaa7da26e3d34d78.md               |    2 +-
 .../5f3ef6e0f8c230bdd2349716.md               |    2 +-
 .../5f3f26fa39591db45e5cd7a0.md               |    2 +-
 .../5f459225127805351a6ad057.md               |    2 +-
 .../5f459a7ceb8b5c446656d88b.md               |    2 +-
 .../5f459cf202c2a3472fae6a9f.md               |    2 +-
 .../5f459fd48bdc98491ca6d1a3.md               |    2 +-
 .../5f45a05977e2fa49d9119437.md               |    2 +-
 .../5f45a276c093334f0f6e9df4.md               |    2 +-
 .../5f45a5a7c49a8251f0bdb527.md               |    2 +-
 .../5f45a66d4a2b0453301e5a26.md               |    2 +-
 .../5f45b0731d39e15d54df4dfc.md               |    2 +-
 .../5f45b25e7ec2405f166b9de1.md               |    2 +-
 .../5f45b3c93c027860d9298dbd.md               |    2 +-
 .../5f45b45d099f3e621fbbb256.md               |    2 +-
 .../5f45b4c81cea7763550e40df.md               |    2 +-
 .../5f45b715301bbf667badc04a.md               |    2 +-
 .../5f46e270702a8456a664f0df.md               |    2 +-
 .../5f46e36e745ead58487aabf2.md               |    2 +-
 .../5f46e7a4750dd05b5a673920.md               |    2 +-
 .../5f46e8284aae155c83015dee.md               |    2 +-
 .../5f46ede1ff8fec5ba656b44c.md               |    2 +-
 .../5f46fc57528aa1c4b5ea7c2e.md               |    2 +-
 .../5f4701b942c824109626c3d8.md               |    2 +-
 .../5f475bb508746c16c9431d42.md               |    2 +-
 .../5f475e1c7f71a61d913836c6.md               |    2 +-
 .../5f47633757ae3469f2d33d2e.md               |    2 +-
 .../5f47fe7e31980053a8d4403b.md               |    2 +-
 .../5f716ad029ee4053c7027a7a.md               |    2 +-
 .../5f716bee5838c354c728a7c5.md               |    2 +-
 .../5f7691dafd882520797cd2f0.md               |    2 +-
 .../5f7692f7c5b3ce22a57788b6.md               |    2 +-
 .../5f769541be494f25449b292f.md               |    2 +-
 .../5f76967fad478126d6552b0d.md               |    2 +-
 .../5f769702e6e33127d14aa120.md               |    2 +-
 .../5f7b87422a560036fd03ccff.md               |    2 +-
 .../5f7b88d37b1f98386f04edc0.md               |    2 +-
 .../616965351e74d4689eb6de30.md               |    8 +-
 .../6153a3952facd25a83fe8083.md               |    2 +-
 .../5d822fd413a79914d39e98d5.md               |    2 +-
 .../5dc2385ff86c76b9248c6eb7.md               |    6 +-
 .../5dc23991f86c76b9248c6eb8.md               |    4 +-
 .../5ddbd81294d8ddc1510a8e56.md               |    4 +-
 .../5dfa22d1b521be39a3de7be0.md               |    6 +-
 .../5f07be6ef7412fbad0c5626b.md               |    4 +-
 .../60f1922fcbd2410527b3bd89.md               |   10 +-
 .../60f803d5241e6a0433a523a1.md               |   10 +-
 .../problem-125-palindromic-sums.md           |   51 +-
 .../problem-125-palindromic-sums.md           |   51 +-
 .../problem-125-palindromic-sums.md           |   51 +-
 .../problem-125-palindromic-sums.md           |   51 +-
 .../problem-125-palindromic-sums.md           |   51 +-
 .../problem-125-palindromic-sums.md           |   51 +-
 .../5d822fd413a79914d39e98d5.md               |    2 +-
 curriculum/dictionaries/arabic/comments.json  |  111 ++
 3199 files changed, 377341 insertions(+), 545 deletions(-)
 create mode 100644 curriculum/challenges/arabic/00-certifications/back-end-development-and-apis-certification/back-end-development-and-apis-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/data-analysis-with-python-certification/data-analysis-with-python-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/data-visualization-certification/data-visualization-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/information-security-certification/information-security-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/legacy-back-end-certification/legacy-back-end-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/legacy-data-visualization-certification/legacy-data-visualization-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/machine-learning-with-python-certification/machine-learning-with-python-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/quality-assurance-certification/quality-assurance-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/relational-database-certification/relational-database-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml
 create mode 100644 curriculum/challenges/arabic/00-certifications/scientific-computing-with-python-certification/scientific-computing-with-python-certification.yml
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-heading-element-versus-a-paragraph-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/change-the-color-of-text.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/create-a-custom-css-variable.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/import-a-google-font.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/inherit-css-variables.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/size-your-images.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/style-the-html-body-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/comment-out-html.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/delete-html-elements.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/uncomment-html.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-align-self-property.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-grids-within-grids.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-your-first-css-grid.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md
 create mode 100644 curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/chunky-monkey.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/confirm-the-ending.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/factorialize-a-number.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/find-the-longest-word-in-a-string.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/finders-keepers.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/mutations.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/repeat-a-string-repeat-a-string.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/return-largest-numbers-in-arrays.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/reverse-a-string.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/slice-and-splice.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/title-case-a-sentence.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/truncate-a-string.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/where-do-i-belong.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-an-arrays-contents-using-bracket-notation.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-property-names-with-bracket-notation.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-items-to-an-array-with-push-and-unshift.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-items-using-splice.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-key-value-pairs-to-javascript-objects.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/check-for-the-presence-of-an-element-with-indexof.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/check-if-an-object-has-a-property.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/combine-arrays-with-the-spread-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/copy-an-array-with-the-spread-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/copy-array-items-using-slice.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/create-complex-multi-dimensional-arrays.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/generate-an-array-of-all-object-keys-with-object.keys.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-all-an-arrays-items-using-for-loops.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/modify-an-array-stored-in-an-object.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/modify-an-object-nested-within-an-object.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/remove-items-from-an-array-with-pop-and-shift.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/remove-items-using-splice.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/use-an-array-to-store-a-collection-of-data.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/use-the-delete-keyword-to-remove-object-properties.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/add-new-properties-to-a-javascript-object.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/appending-variables-to-strings.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-or-equal-to-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-inequality-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-or-equal-to-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-equality-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-inequality-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-addition.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-division.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-multiplication.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-subtraction.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/constructing-strings-with-variables.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-a-read-only-variable-with-the-const-keyword.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-string-variables.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/decrement-a-number-with-javascript.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/delete-properties-from-a-javascript-object.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-decimal-by-another-with-javascript.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-number-by-another-with-javascript.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/escaping-literal-quotes-in-strings.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/finding-a-remainder-in-javascript.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-fractions-with-javascript.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-scope-and-functions.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/golf-code.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/increment-a-number-with-javascript.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-statements.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-odd-numbers-with-a-for-loop.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-do...while-loops.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-shift.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-decimals-with-javascript.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-numbers-with-javascript.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/nest-one-array-within-another-array.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/nesting-for-loops.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/profile-lookup.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/shopping-list.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/stand-in-line.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/store-multiple-values-in-one-variable-using-javascript-arrays.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-first-character-in-a-string.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-last-character-in-a-string.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-character-in-a-string.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-to-last-character-in-a-string.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-conditional-ternary-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function-with-a-radix.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-arguments-passed-in-the-wrong-order-when-calling-a-function.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-missing-open-and-closing-parenthesis-after-a-function-call.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-off-by-one-errors-when-using-indexing.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-unclosed-parentheses-brackets-braces-and-quotes.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/use-the-javascript-console-to-check-the-value-of-a-variable.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/handle-a-fulfilled-promise-with-then.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/prevent-object-mutation.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-arrow-functions-with-parameters.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-concise-declarative-functions-with-es6.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-object-property-shorthand.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/apply-functional-programming-to-convert-strings-to-url-slugs.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/combine-an-array-into-a-string-using-the-join-method.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/combine-two-arrays-using-the-concat-method.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/implement-the-filter-method-on-a-prototype.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/introduction-to-currying-and-partial-application.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-part-of-an-array-using-the-slice-method.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/sort-an-array-alphabetically-using-the-sort-method.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/split-a-string-into-an-array-using-the-split-method.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/understand-functional-programming-terminology.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-filter-method-to-extract-data-from-an-array.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-reduce-method-to-analyze-data.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/binary-agents.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/diff-two-arrays.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/map-the-debris.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/missing-letters.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/pig-latin.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/search-and-replace.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/smallest-common-multiple.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/spinal-tap-case.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-numbers-in-a-range.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/change-the-prototype-to-a-new-object.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-basic-javascript-object.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-method-on-an-object.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/define-a-constructor-function.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/extend-constructors-to-receive-arguments.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/iterate-over-all-properties.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/make-code-more-reusable-with-the-this-keyword.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/set-the-childs-prototype-to-an-instance-of-the-parent.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-own-properties.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-constructor-property.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-immediately-invoked-function-expression-iife.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-prototype-chain.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-constructor-to-create-objects.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-mixin-to-add-common-behavior-between-unrelated-objects.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-an-iife-to-create-a-module.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-closure-to-protect-properties-within-an-object-from-being-modified-externally.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-dot-notation-to-access-the-properties-of-an-object.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-inheritance-so-you-dont-repeat-yourself.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-prototype-properties-to-reduce-duplicate-code.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/verify-an-objects-constructor-with-instanceof.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-all-or-none.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-mixed-grouping-of-characters.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/extract-matches.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/find-characters-with-lazy-matching.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/find-more-than-the-first-match.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/find-one-or-more-criminals-in-a-hunt.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/ignore-case-while-matching.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-a-literal-string-with-different-possibilities.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-letters-and-numbers.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-non-numbers.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-numbers.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-anything-with-wildcard-period.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-beginning-string-patterns.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-one-or-more-times.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-zero-or-more-times.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-ending-string-patterns.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-everything-but-letters-and-numbers.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-letters-of-the-alphabet.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-literal-strings.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-non-whitespace-characters.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-numbers-and-letters-of-the-alphabet.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-character-with-multiple-possibilities.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-characters-not-specified.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-whitespace.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/positive-and-negative-lookahead.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/remove-whitespace-from-start-and-end.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/restrict-possible-usernames.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/specify-exact-number-of-matches.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/specify-only-the-lower-number-of-matches.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/specify-upper-and-lower-number-of-matches.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/use-capture-groups-to-search-and-replace.md
 create mode 100644 curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/using-the-test-method.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/apply-the-default-bootstrap-button-style.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/call-out-optional-actions-with-btn-info.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/center-text-with-bootstrap.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-block-element-bootstrap-button.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-bootstrap-button.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-bootstrap-headline.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-bootstrap-row.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-custom-heading.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-bootstrap-wells.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/ditch-custom-css-for-bootstrap.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/give-each-element-a-unique-id.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/label-bootstrap-buttons.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/label-bootstrap-wells.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/make-images-mobile-responsive.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/responsively-style-checkboxes.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/responsively-style-radio-buttons.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/split-your-bootstrap-row.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/style-text-inputs-as-form-controls.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-a-span-to-target-inline-elements.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-comments-to-clarify-code.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/change-the-css-of-an-element-using-jquery.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/clone-an-element-using-jquery.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/delete-your-jquery-functions.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/disable-an-element-using-jquery.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/learn-how-script-tags-and-document-ready-work.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/remove-an-element-using-jquery.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/remove-classes-from-an-element-with-jquery.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-elements-by-class-using-jquery.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-elements-by-id-using-jquery.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-even-elements-using-jquery.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-html-elements-with-selectors-using-jquery.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-children-of-an-element-using-jquery.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/use-appendto-to-move-elements-with-jquery.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/jquery/use-jquery-to-modify-the-entire-page.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/connect-redux-to-react.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/connect-redux-to-the-messages-app.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/extract-local-state-into-redux.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/extract-state-logic-to-redux.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/getting-started-with-react-redux.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/manage-state-locally-first.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/map-dispatch-to-props.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/map-state-to-props.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/moving-forward-from-here.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/access-props-using-this.props.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/add-comments-in-jsx.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/add-event-listeners.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/add-inline-styles-in-react.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/bind-this-to-a-class-method.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/change-inline-css-conditionally-based-on-component-state.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/compose-react-components.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-complex-jsx-element.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-component-with-composition.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-controlled-form.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-controlled-input.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-react-component.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-simple-jsx-element.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-stateful-component.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-stateless-functional-component.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/define-an-html-class-in-jsx.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/give-sibling-elements-a-unique-key-attribute.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/introducing-inline-styles.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/learn-about-self-closing-jsx-tags.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/optimize-re-renders-with-shouldcomponentupdate.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/override-default-props.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-a-callback-as-props.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-an-array-as-props.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-props-to-a-stateless-functional-component.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-state-as-props-to-child-components.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/render-a-class-component-to-the-dom.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/render-conditionally-from-props.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/render-html-elements-to-the-dom.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/render-react-on-the-server-with-rendertostring.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/render-state-in-the-user-interface-another-way.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/render-state-in-the-user-interface.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/render-with-an-if-else-condition.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/review-using-props-with-stateless-functional-components.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/set-state-with-this.setstate.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/use--for-a-more-concise-conditional.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/use-a-ternary-expression-for-conditional-rendering.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/use-advanced-javascript-in-react-render-method.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/use-array.filter-to-dynamically-filter-an-array.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/use-default-props.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/use-react-to-render-nested-components.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/use-state-to-toggle-an-element.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/use-the-lifecycle-method-componentdidmount.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/write-a-react-component-from-scratch.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/react/write-a-simple-counter.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/combine-multiple-reducers.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/copy-an-object-with-object.assign.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/create-a-redux-store.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/define-a-redux-action.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/define-an-action-creator.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/dispatch-an-action-event.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/get-state-from-the-redux-store.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/handle-an-action-in-the-store.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/never-mutate-state.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/register-a-store-listener.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/remove-an-item-from-an-array.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/send-action-data-to-the-store.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-const-for-action-types.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-middleware-to-handle-asynchronous-actions.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-the-spread-operator-on-arrays.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/redux/write-a-counter-with-redux.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/sass/extend-one-set-of-css-styles-to-another-element.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/sass/nest-css-with-sass.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/sass/store-data-with-sass-variables.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/sass/use-for-to-create-a-sass-loop.md
 create mode 100644 curriculum/challenges/arabic/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/style-d3-labels.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md
 create mode 100644 curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/get-data-from-post-requests.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/get-query-parameter-input-from-the-client.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/get-route-parameter-input-from-the-client.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/implement-a-root-level-request-logger-middleware.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-an-html-file.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-static-assets.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/start-a-working-express-server.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-a-description-to-your-package.json.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-a-license-to-your-package.json.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-a-version-to-your-package.json.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-keywords-to-your-package.json.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/create-and-save-a-record-of-a-model.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/create-many-records-with-model.create.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.find-to-search-your-database.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md
 create mode 100644 curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/announce-new-users.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/authentication-strategies.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/communicate-by-emitting.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/create-new-middleware.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-passport.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iii---put-method.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iv---put-method.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http-ii.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-double-equals-to-assert-equality.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/american-british-translator.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/issue-tracker.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/personal-library.md
 create mode 100644 curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/sudoku-solver.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-functions.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-lists.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-objects.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/reading-files.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/using-web-services.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-json.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
 create mode 100644 curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-a.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-b.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-and-visualizations.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-duplicates.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-introduction.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-with-dataframes.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/how-to-use-jupyter-notebooks-intro.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-algebra-and-size.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-arrays.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-boolean-arrays.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-a.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-b.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-operations.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-conditional-selection-and-modifying-dataframes.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-creating-columns.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-dataframes.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-indexing-and-conditional-selection.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-introduction.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/parsing-html-and-saving-data.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-functions-and-collections.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-introduction.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-iteration-and-modules.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/numpy/accessing-and-changing-elements,-rows,-columns.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/numpy/basics-of-numpy.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/numpy/copying-arrays-warning.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/numpy/initialize-array-problem.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/numpy/initializing-different-arrays.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/numpy/loading-data-and-advanced-indexing.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/numpy/mathematics.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/numpy/reorganizing-arrays.md
 create mode 100644 curriculum/challenges/arabic/08-data-analysis-with-python/numpy/what-is-numpy.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-projects/anonymous-message-board.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-projects/port-scanner.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-projects/sha-1-password-cracker.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/creating-a-tcp-client.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-a-banner-grabber.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-a-port-scanner.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-an-nmap-scanner-part-1.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-an-nmap-scanner-part-2.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/introduction-and-setup.md
 create mode 100644 curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/understanding-sockets-and-creating-a-tcp-server.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/algorithms/find-the-symmetric-difference.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-binary-search.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-bubble-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-insertion-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-merge-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-quick-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-selection-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/algorithms/inventory-update.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/algorithms/no-repeats-please.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/algorithms/pairwise.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/add-a-new-element-to-a-binary-search-tree.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/add-elements-at-a-specific-index-in-a-linked-list.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/adjacency-list.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/adjacency-matrix.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/breadth-first-search.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/check-if-an-element-is-present-in-a-binary-search-tree.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/check-if-binary-search-tree.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-circular-queue.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-doubly-linked-list.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-hash-table.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-linked-list-class.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-map-data-structure.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-priority-queue-class.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-queue-class.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-set-class.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-stack-class.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-trie-search-tree.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-an-es6-javascript-map.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-and-add-to-sets-in-es6.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/delete-a-leaf-node-in-a-binary-search-tree.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/delete-a-node-with-one-child-in-a-binary-search-tree.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/delete-a-node-with-two-children-in-a-binary-search-tree.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/depth-first-search.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/find-the-minimum-and-maximum-height-of-a-binary-search-tree.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/find-the-minimum-and-maximum-value-in-a-binary-search-tree.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/implement-heap-sort-with-a-min-heap.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/incidence-matrix.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/insert-an-element-into-a-max-heap.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/invert-a-binary-tree.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/learn-how-a-stack-works.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-a-difference-on-two-sets-of-data.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-a-subset-check-on-two-sets-of-data.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-a-union-on-two-sets.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-an-intersection-on-two-sets-of-data.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-an-element-from-a-max-heap.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-elements-from-a-linked-list-by-index.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-elements-from-a-linked-list.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-items-from-a-set-in-es6.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/reverse-a-doubly-linked-list.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/search-within-a-linked-list.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/typed-arrays.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-.has-and-.size-on-an-es6-set.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-breadth-first-search-in-a-binary-search-tree.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-depth-first-search-in-a-binary-search-tree.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-spread-and-notes-for-es5-set-integration.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/data-structures/work-with-nodes-in-a-linked-list.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-1-multiples-of-3-and-5.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-10-summation-of-primes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-100-arranged-probability.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-101-optimum-polynomial.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-102-triangle-containment.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-103-special-subset-sums-optimum.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-104-pandigital-fibonacci-ends.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-105-special-subset-sums-testing.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-106-special-subset-sums-meta-testing.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-107-minimal-network.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-108-diophantine-reciprocals-i.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-109-darts.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-11-largest-product-in-a-grid.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-110-diophantine-reciprocals-ii.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-111-primes-with-runs.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-112-bouncy-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-113-non-bouncy-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-114-counting-block-combinations-i.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-115-counting-block-combinations-ii.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-116-red-green-or-blue-tiles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-117-red-green-and-blue-tiles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-118-pandigital-prime-sets.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-119-digit-power-sum.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-12-highly-divisible-triangular-number.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-120-square-remainders.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-121-disc-game-prize-fund.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-122-efficient-exponentiation.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-123-prime-square-remainders.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-124-ordered-radicals.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-126-cuboid-layers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-127-abc-hits.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-128-hexagonal-tile-differences.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-129-repunit-divisibility.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-13-large-sum.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-130-composites-with-prime-repunit-property.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-131-prime-cube-partnership.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-132-large-repunit-factors.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-133-repunit-nonfactors.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-134-prime-pair-connection.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-135-same-differences.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-136-singleton-difference.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-137-fibonacci-golden-nuggets.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-138-special-isosceles-triangles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-139-pythagorean-tiles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-14-longest-collatz-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-140-modified-fibonacci-golden-nuggets.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-141-investigating-progressive-numbers-n-which-are-also-square.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-142-perfect-square-collection.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-143-investigating-the-torricelli-point-of-a-triangle.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-144-investigating-multiple-reflections-of-a-laser-beam.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-145-how-many-reversible-numbers-are-there-below-one-billion.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-146-investigating-a-prime-pattern.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-147-rectangles-in-cross-hatched-grids.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-148-exploring-pascals-triangle.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-149-searching-for-a-maximum-sum-subsequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-15-lattice-paths.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-150-searching-a-triangular-array-for-a-sub-triangle-having-minimum-sum.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-151-paper-sheets-of-standard-sizes-an-expected-value-problem.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-152-writing-one-half-as-a-sum-of-inverse-squares.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-153-investigating-gaussian-integers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-154-exploring-pascals-pyramid.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-155-counting-capacitor-circuits.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-156-counting-digits.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-157-solving-the-diophantine-equation.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-158-exploring-strings-for-which-only-one-character-comes-lexicographically-after-its-neighbour-to-the-left.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-159-digital-root-sums-of-factorisations.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-16-power-digit-sum.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-160-factorial-trailing-digits.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-161-triominoes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-162-hexadecimal-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-163-cross-hatched-triangles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-164-numbers-for-which-no-three-consecutive-digits-have-a-sum-greater-than-a-given-value.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-165-intersections.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-166-criss-cross.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-167-investigating-ulam-sequences.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-168-number-rotations.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-169-exploring-the-number-of-different-ways-a-number-can-be-expressed-as-a-sum-of-powers-of-2.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-17-number-letter-counts.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-170-find-the-largest-0-to-9-pandigital-that-can-be-formed-by-concatenating-products.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-171-finding-numbers-for-which-the-sum-of-the-squares-of-the-digits-is-a-square.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-172-investigating-numbers-with-few-repeated-digits.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-173-using-up-to-one-million-tiles-how-many-different-hollow-square-laminae-can-be-formed.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-174-counting-the-number-of-hollow-square-laminae-that-can-form-one-two-three-...-distinct-arrangements.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-175-fractions-involving-the-number-of-different-ways-a-number-can-be-expressed-as-a-sum-of-powers-of-2.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-176-right-angled-triangles-that-share-a-cathetus.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-177-integer-angled-quadrilaterals.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-178-step-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-179-consecutive-positive-divisors.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-18-maximum-path-sum-i.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-180-rational-zeros-of-a-function-of-three-variables.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-181-investigating-in-how-many-ways-objects-of-two-different-colours-can-be-grouped.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-182-rsa-encryption.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-183-maximum-product-of-parts.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-184-triangles-containing-the-origin.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-185-number-mind.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-186-connectedness-of-a-network.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-187-semiprimes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-188-the-hyperexponentiation-of-a-number.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-189-tri-colouring-a-triangular-grid.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-19-counting-sundays.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-190-maximising-a-weighted-product.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-191-prize-strings.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-192-best-approximations.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-193-squarefree-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-194-coloured-configurations.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-195-inscribed-circles-of-triangles-with-one-angle-of-60-degrees.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-196-prime-triplets.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-197-investigating-the-behaviour-of-a-recursively-defined-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-198-ambiguous-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-199-iterative-circle-packing.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-2-even-fibonacci-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-20-factorial-digit-sum.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-200-find-the-200th-prime-proof-sqube-containing-the-contiguous-sub-string-200.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-201-subsets-with-a-unique-sum.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-202-laserbeam.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-203-squarefree-binomial-coefficients.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-204-generalised-hamming-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-205-dice-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-206-concealed-square.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-207-integer-partition-equations.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-208-robot-walks.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-209-circular-logic.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-21-amicable-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-210-obtuse-angled-triangles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-211-divisor-square-sum.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-212-combined-volume-of-cuboids.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-213-flea-circus.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-214-totient-chains.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-215-crack-free-walls.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-216-investigating-the-primality-of-numbers-of-the-form-2n2-1.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-217-balanced-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-218-perfect-right-angled-triangles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-219-skew-cost-coding.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-22-names-scores.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-220-heighway-dragon.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-221-alexandrian-integers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-222-sphere-packing.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-223-almost-right-angled-triangles-i.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-224-almost-right-angled-triangles-ii.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-225-tribonacci-non-divisors.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-226-a-scoop-of-blancmange.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-227-the-chase.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-228-minkowski-sums.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-229-four-representations-using-squares.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-23-non-abundant-sums.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-230-fibonacci-words.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-231-the-prime-factorisation-of-binomial-coefficients.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-232-the-race.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-233-lattice-points-on-a-circle.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-234-semidivisible-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-235-an-arithmetic-geometric-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-236-luxury-hampers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-237-tours-on-a-4-x-n-playing-board.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-238-infinite-string-tour.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-239-twenty-two-foolish-primes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-24-lexicographic-permutations.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-240-top-dice.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-241-perfection-quotients.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-242-odd-triplets.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-243-resilience.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-244-sliders.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-245-coresilience.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-246-tangents-to-an-ellipse.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-247-squares-under-a-hyperbola.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-248-numbers-for-which-eulers-totient-function-equals-13.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-249-prime-subset-sums.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-25-1000-digit-fibonacci-number.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-250-250250.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-251-cardano-triplets.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-252-convex-holes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-253-tidying-up.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-254-sums-of-digit-factorials.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-255-rounded-square-roots.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-256-tatami-free-rooms.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-257-angular-bisectors.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-258-a-lagged-fibonacci-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-259-reachable-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-26-reciprocal-cycles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-260-stone-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-261-pivotal-square-sums.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-262-mountain-range.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-263-an-engineers-dream-come-true.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-264-triangle-centres.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-265-binary-circles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-266-pseudo-square-root.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-267-billionaire.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-268-counting-numbers-with-at-least-four-distinct-prime-factors-less-than-100.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-269-polynomials-with-at-least-one-integer-root.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-27-quadratic-primes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-270-cutting-squares.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-271-modular-cubes-part-1.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-272-modular-cubes-part-2.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-273-sum-of-squares.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-274-divisibility-multipliers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-275-balanced-sculptures.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-276-primitive-triangles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-277-a-modified-collatz-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-278-linear-combinations-of-semiprimes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-279-triangles-with-integral-sides-and-an-integral-angle.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-28-number-spiral-diagonals.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-280-ant-and-seeds.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-281-pizza-toppings.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-282-the-ackermann-function.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-283-integer-sided-triangles-for-which-the-area--perimeter-ratio-is-integral.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-284-steady-squares.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-285-pythagorean-odds.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-286-scoring-probabilities.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-287-quadtree-encoding-a-simple-compression-algorithm.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-288-an-enormous-factorial.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-289-eulerian-cycles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-29-distinct-powers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-290-digital-signature.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-291-panaitopol-primes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-292-pythagorean-polygons.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-293-pseudo-fortunate-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-294-sum-of-digits---experience-23.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-295-lenticular-holes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-296-angular-bisector-and-tangent.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-297-zeckendorf-representation.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-298-selective-amnesia.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-299-three-similar-triangles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-3-largest-prime-factor.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-30-digit-n-powers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-300-protein-folding.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-301-nim.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-302-strong-achilles-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-303-multiples-with-small-digits.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-304-primonacci.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-305-reflexive-position.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-306-paper-strip-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-307-chip-defects.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-308-an-amazing-prime-generating-automaton.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-309-integer-ladders.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-31-coin-sums.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-310-nim-square.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-311-biclinic-integral-quadrilaterals.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-312-cyclic-paths-on-sierpiski-graphs.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-313-sliding-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-314-the-mouse-on-the-moon.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-315-digital-root-clocks.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-316-numbers-in-decimal-expansions.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-317-firecracker.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-318-2011-nines.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-319-bounded-sequences.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-32-pandigital-products.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-320-factorials-divisible-by-a-huge-integer.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-321-swapping-counters.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-322-binomial-coefficients-divisible-by-10.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-323-bitwise-or-operations-on-random-integers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-324-building-a-tower.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-325-stone-game-ii.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-326-modulo-summations.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-327-rooms-of-doom.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-328-lowest-cost-search.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-329-prime-frog.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-33-digit-cancelling-fractions.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-330-eulers-number.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-331-cross-flips.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-332-spherical-triangles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-333-special-partitions.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-334-spilling-the-beans.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-335-gathering-the-beans.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-336-maximix-arrangements.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-337-totient-stairstep-sequences.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-338-cutting-rectangular-grid-paper.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-339-peredur-fab-efrawg.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-34-digit-factorials.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-340-crazy-function.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-341-golombs-self-describing-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-342-the-totient-of-a-square-is-a-cube.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-343-fractional-sequences.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-344-silver-dollar-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-345-matrix-sum.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-346-strong-repunits.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-347-largest-integer-divisible-by-two-primes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-348-sum-of-a-square-and-a-cube.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-349-langtons-ant.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-35-circular-primes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-350-constraining-the-least-greatest-and-the-greatest-least.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-351-hexagonal-orchards.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-352-blood-tests.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-353-risky-moon.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-354-distances-in-a-bees-honeycomb.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-355-maximal-coprime-subset.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-356-largest-roots-of-cubic-polynomials.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-357-prime-generating-integers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-358-cyclic-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-359-hilberts-new-hotel.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-36-double-base-palindromes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-360-scary-sphere.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-361-subsequence-of-thue-morse-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-362-squarefree-factors.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-363-bzier-curves.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-364-comfortable-distance.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-365-a-huge-binomial-coefficient.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-366-stone-game-iii.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-367-bozo-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-368-a-kempner-like-series.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-369-badugi.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-37-truncatable-primes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-370-geometric-triangles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-371-licence-plates.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-372-pencils-of-rays.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-373-circumscribed-circles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-374-maximum-integer-partition-product.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-375-minimum-of-subsequences.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-376-nontransitive-sets-of-dice.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-377-sum-of-digits-experience-13.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-378-triangle-triples.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-379-least-common-multiple-count.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-38-pandigital-multiples.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-380-amazing-mazes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-381-prime-k-factorial.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-382-generating-polygons.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-383-divisibility-comparison-between-factorials.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-384-rudin-shapiro-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-385-ellipses-inside-triangles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-386-maximum-length-of-an-antichain.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-387-harshad-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-388-distinct-lines.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-389-platonic-dice.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-39-integer-right-triangles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-390-triangles-with-non-rational-sides-and-integral-area.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-391-hopping-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-392-enmeshed-unit-circle.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-393-migrating-ants.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-394-eating-pie.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-395-pythagorean-tree.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-396-weak-goodstein-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-397-triangle-on-parabola.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-398-cutting-rope.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-399-squarefree-fibonacci-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-4-largest-palindrome-product.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-40-champernownes-constant.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-400-fibonacci-tree-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-401-sum-of-squares-of-divisors.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-402-integer-valued-polynomials.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-403-lattice-points-enclosed-by-parabola-and-line.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-404-crisscross-ellipses.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-405-a-rectangular-tiling.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-406-guessing-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-407-idempotents.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-408-admissible-paths-through-a-grid.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-409-nim-extreme.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-41-pandigital-prime.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-410-circle-and-tangent-line.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-411-uphill-paths.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-412-gnomon-numbering.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-413-one-child-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-414-kaprekar-constant.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-415-titanic-sets.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-416-a-frogs-trip.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-417-reciprocal-cycles-ii.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-418-factorisation-triples.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-419-look-and-say-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-42-coded-triangle-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-420-2x2-positive-integer-matrix.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-421-prime-factors-of-n151.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-422-sequence-of-points-on-a-hyperbola.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-423-consecutive-die-throws.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-424-kakuro.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-425-prime-connection.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-426-box-ball-system.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-427-n-sequences.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-428-necklace-of-circles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-429-sum-of-squares-of-unitary-divisors.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-43-sub-string-divisibility.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-430-range-flips.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-431-square-space-silo.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-432-totient-sum.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-433-steps-in-euclids-algorithm.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-434-rigid-graphs.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-435-polynomials-of-fibonacci-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-436-unfair-wager.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-437-fibonacci-primitive-roots.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-438-integer-part-of-polynomial-equations-solutions.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-439-sum-of-sum-of-divisors.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-44-pentagon-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-440-gcd-and-tiling.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-441-the-inverse-summation-of-coprime-couples.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-442-eleven-free-integers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-443-gcd-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-444-the-roundtable-lottery.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-445-retractions-a.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-446-retractions-b.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-447-retractions-c.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-448-average-least-common-multiple.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-449-chocolate-covered-candy.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-45-triangular-pentagonal-and-hexagonal.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-450-hypocycloid-and-lattice-points.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-451-modular-inverses.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-452-long-products.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-453-lattice-quadrilaterals.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-454-diophantine-reciprocals-iii.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-455-powers-with-trailing-digits.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-456-triangles-containing-the-origin-ii.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-457-a-polynomial-modulo-the-square-of-a-prime.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-458-permutations-of-project.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-459-flipping-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-46-goldbachs-other-conjecture.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-460-an-ant-on-the-move.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-461-almost-pi.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-462-permutation-of-3-smooth-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-463-a-weird-recurrence-relation.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-464-mbius-function-and-intervals.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-465-polar-polygons.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-466-distinct-terms-in-a-multiplication-table.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-467-superinteger.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-468-smooth-divisors-of-binomial-coefficients.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-469-empty-chairs.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-47-distinct-primes-factors.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-470-super-ramvok.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-471-triangle-inscribed-in-ellipse.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-472-comfortable-distance-ii.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-473-phigital-number-base.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-474-last-digits-of-divisors.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-475-music-festival.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-476-circle-packing-ii.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-477-number-sequence-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-478-mixtures.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-479-roots-on-the-rise.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-48-self-powers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-480-the-last-question.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-49-prime-permutations.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-5-smallest-multiple.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-50-consecutive-prime-sum.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-51-prime-digit-replacements.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-52-permuted-multiples.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-53-combinatoric-selections.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-54-poker-hands.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-55-lychrel-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-56-powerful-digit-sum.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-57-square-root-convergents.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-58-spiral-primes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-59-xor-decryption.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-6-sum-square-difference.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-60-prime-pair-sets.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-61-cyclical-figurate-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-62-cubic-permutations.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-63-powerful-digit-counts.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-64-odd-period-square-roots.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-65-convergents-of-e.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-66-diophantine-equation.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-67-maximum-path-sum-ii.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-68-magic-5-gon-ring.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-69-totient-maximum.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-7-10001st-prime.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-70-totient-permutation.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-71-ordered-fractions.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-72-counting-fractions.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-73-counting-fractions-in-a-range.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-74-digit-factorial-chains.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-75-singular-integer-right-triangles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-76-counting-summations.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-77-prime-summations.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-78-coin-partitions.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-79-passcode-derivation.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-8-largest-product-in-a-series.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-80-square-root-digital-expansion.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-81-path-sum-two-ways.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-82-path-sum-three-ways.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-83-path-sum-four-ways.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-84-monopoly-odds.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-85-counting-rectangles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-86-cuboid-route.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-87-prime-power-triples.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-88-product-sum-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-89-roman-numerals.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-9-special-pythagorean-triplet.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-90-cube-digit-pairs.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-91-right-triangles-with-integer-coordinates.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-92-square-digit-chains.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-93-arithmetic-expressions.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-94-almost-equilateral-triangles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-95-amicable-chains.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-96-su-doku.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-97-large-non-mersenne-prime.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-98-anagramic-squares.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-99-largest-exponential.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/100-doors.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/24-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/9-billion-names-of-god-the-integer.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/abc-problem.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/abundant-deficient-and-perfect-number-classifications.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/accumulator-factory.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/ackermann-function.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/align-columns.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/amicable-pairs.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/averages-mode.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/averages-pythagorean-means.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/averages-root-mean-square.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/babbage-problem.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/balanced-brackets.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/circles-of-given-radius-through-two-points.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/closest-pair-problem.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/combinations.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/comma-quibbling.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/compare-a-list-of-strings.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/convert-seconds-to-compound-duration.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/count-occurrences-of-a-substring.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/count-the-coins.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cramers-rule.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cumulative-standard-deviation.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cusip.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cut-a-rectangle.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/date-format.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/date-manipulation.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/day-of-the-week.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/deepcopy.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/define-a-primitive-data-type.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/department-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/discordian-date.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/dot-product.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/element-wise-operations.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/emirp-primes.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/entropy.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/equilibrium-index.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/ethiopian-multiplication.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/euler-method.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/evaluate-binomial-coefficients.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/execute-a-markov-algorithm.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/execute-brain.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/extensible-prime-generator.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/factorial.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/factors-of-a-mersenne-number.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/factors-of-an-integer.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/farey-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fibonacci-n-step-number-sequences.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fibonacci-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fibonacci-word.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fizzbuzz.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fractran.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/gamma-function.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/gaussian-elimination.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/general-fizzbuzz.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/generate-lower-case-ascii-alphabet.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/generator-exponential.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/gray-code.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/greatest-common-divisor.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/greatest-subsequential-sum.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hailstone-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/happy-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/harshad-or-niven-series.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hash-from-two-arrays.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hash-join.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/heronian-triangles.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hofstadter-figure-figure-sequences.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hofstadter-q-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/i-before-e-except-after-c.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/iban.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/identity-matrix.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/iterated-digits-squaring.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/jaro-distance.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/jortsort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/josephus-problem.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/k-d-tree.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/kaprekar-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-0-1.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-bounded.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-continuous.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-unbounded.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knights-tour.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/largest-int-from-concatenated-ints.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/last-friday-of-each-month.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/last-letter-first-letter.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/leap-year.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/least-common-multiple.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/left-factorials.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/letter-frequency.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/levenshtein-distance.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/linear-congruential-generator.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/long-multiplication.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/longest-common-subsequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/longest-increasing-subsequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/longest-string-challenge.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/look-and-say-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/loop-over-multiple-arrays-simultaneously.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lu-decomposition.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lucas-lehmer-test.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/ludic-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/luhn-test-of-credit-card-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lychrel-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lzw-compression.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/s-expressions.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sailors-coconuts-and-a-monkey-problem.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/search-a-list-of-records.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sedols.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/self-describing-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/self-referential-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/semiprime.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/set-consolidation.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/set-of-real-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sha-1.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sha-256.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-an-array-of-composite-structures.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-disjoint-sublist.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-stability.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-using-a-custom-comparator.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-bead-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-bogosort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-cocktail-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-comb-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-gnome-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-pancake-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-permutation-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-shell-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-stooge-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-strand-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/soundex.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/spiral-matrix.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/split-a-character-string-based-on-change-of-character.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/state-name-puzzle.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/stern-brocot-sequence.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/straddling-checkerboard.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/stream-merge.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/strip-control-codes-and-extended-characters-from-a-string.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/subleq.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sudoku.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-digits-of-an-integer.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-multiples-of-3-and-5.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-of-a-series.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-of-squares.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-to-100.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sutherland-hodgman-polygon-clipping.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/symmetric-difference.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/taxicab-numbers.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/tokenize-a-string-with-escaping.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/top-rank-per-group.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/topological-sort.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/towers-of-hanoi.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/vector-cross-product.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/vector-dot-product.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/word-frequency.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/word-wrap.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/y-combinator.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/zeckendorf-number-representation.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/zhang-suen-thinning-algorithm.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/zig-zag-matrix.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-camper-leaderboard.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-light-bright-app.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-pinterest-clone.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-pong-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-recipe-box.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-roguelike-dungeon-crawler-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-simon-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-tic-tac-toe-game.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-voting-app.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-wikipedia-viewer.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-the-game-of-life.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/manage-a-book-trading-club.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/map-data-across-the-globe.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/p2p-video-chat-application.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/show-national-contiguity-with-a-force-directed-graph.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/show-the-local-weather.md
 create mode 100644 curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/use-the-twitch-json-api.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/deep-learning-demystified.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/how-convolutional-neural-networks-work.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/how-deep-neural-networks-work.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/recurrent-neural-networks-rnn-and-long-short-term-memory-lstm.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/book-recommendation-engine-using-knn.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/cat-and-dog-image-classifier.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/linear-regression-health-costs-calculator.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/neural-network-sms-text-classifier.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/rock-paper-scissors.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/conclusion.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-evaluating-the-model.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-picking-a-pretrained-model.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-the-convolutional-layer.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-building-the-model.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-classification.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-clustering.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-hidden-markov-models.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-the-training-process.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-training-and-testing-data.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-using-probabilities-to-make-predictions.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-working-with-data.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/creating-a-convolutional-neural-network.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/introduction-machine-learning-fundamentals.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/introduction-to-tensorflow.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-building-the-model.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-create-a-play-generator.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-making-predictions.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-part-2.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-recurring-neural-networks.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-sentimental-analysis.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-training-the-model.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-activation-functions.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-creating-a-model.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-optimizers.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-with-tensorflow.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-example.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-part-2.md
 create mode 100644 curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning.md
 create mode 100644 curriculum/challenges/arabic/13-relational-databases/build-a-celestial-bodies-database-project/build-a-celestial-bodies-database.md
 create mode 100644 curriculum/challenges/arabic/13-relational-databases/build-a-number-guessing-game-project/build-a-number-guessing-game.md
 create mode 100644 curriculum/challenges/arabic/13-relational-databases/build-a-periodic-table-database-project/build-a-periodic-table-database.md
 create mode 100644 curriculum/challenges/arabic/13-relational-databases/build-a-salon-appointment-scheduler-project/build-a-salon-appointment-scheduler.md
 create mode 100644 curriculum/challenges/arabic/13-relational-databases/build-a-world-cup-database-project/build-a-world-cup-database.md
 create mode 100644 curriculum/challenges/arabic/13-relational-databases/learn-advanced-bash-by-building-a-kitty-ipsum-translator/build-a-kitty-ipsum-translator.md
 create mode 100644 curriculum/challenges/arabic/13-relational-databases/learn-bash-and-sql-by-building-a-bike-rental-shop/build-a-bike-rental-shop.md
 create mode 100644 curriculum/challenges/arabic/13-relational-databases/learn-bash-by-building-a-boilerplate/build-a-boilerplate.md
 create mode 100644 curriculum/challenges/arabic/13-relational-databases/learn-bash-scripting-by-building-five-programs/build-five-programs.md
 create mode 100644 curriculum/challenges/arabic/13-relational-databases/learn-git-by-building-an-sql-reference-object/build-an-sql-reference-object.md
 create mode 100644 curriculum/challenges/arabic/13-relational-databases/learn-nano-by-building-a-castle/build-a-castle.md
 create mode 100644 curriculum/challenges/arabic/13-relational-databases/learn-relational-databases-by-building-a-mario-database/build-a-mario-database.md
 create mode 100644 curriculum/challenges/arabic/13-relational-databases/learn-sql-by-building-a-student-database-part-1/build-a-student-database-part-1.md
 create mode 100644 curriculum/challenges/arabic/13-relational-databases/learn-sql-by-building-a-student-database-part-2/build-a-student-database-part-2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3313e74582ad9d063e3a38.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c9d35015ae0ba0c250e8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d2b687a2cd17bac5730c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d3dc359b371b1a21d783.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d4bc9db3c81c51a09ab7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f23ea21477b76f3b80f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764fdda535587e1fefb3aa.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc1798ff86c76b9248c6eb3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62b30924c5e4ef0daba23b5e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62cc5b1779e4d313466f73c5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8b9dab5ac88e4d3d43a3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff919a7b5612c0670923a5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6343fb42013d99bcd7f3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd70336ebb3e4f62ee81ba.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md
 create mode 100644 curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a115879a6d51422652cbfc.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a1166ed9a56d439c0770e7.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23cb9bc467a147516b500.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23d1c5f1c93161f3582ae.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24068d60b671847d1d4e2.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a240c67f3dbb1a1e6d95ee.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24128d5e8af1b47ad1aab.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24190868ca51c0b6e83c7.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2509ba163e020bb9d84ea.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a255dae245b52317da824a.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a39f5a5790eb27c1e5d4bf.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b49686792938718b90d3.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b506dbaead396f58a701.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b5843544ce3a77459c27.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b79d520a7f3d0e25afd6.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bb9aeefe4b3fc43c6d7b.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bec30ea7f941412512dc.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c0ab883fd9435cd5c518.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c2fccf186146b59c6e96.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c4a0e52767482c5202d4.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c071219da921758a35bb.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c23e6b511f22ed71197a.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7cc99577fbf25ee7a7d76.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a929e4260d08093756d2.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a9d876b2580943ba9351.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ade9b2f5b30ef0b606c2.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c1154d3ae11aee80353f.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c173949f851c83c64756.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c242b25a531f2909e5bc.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c2bbbd8aa82052f47c53.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c31ec0ec78216a1c36a0.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c370ad8c68227137e0bc.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c3ebc6c35e23785e1a19.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c41ecaf1bd24536129b8.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c465fa7b0c252f4a8f0c.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c4db0710f3260f867a92.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c56247609626fa4a8d6e.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c5db7888af27af23f0dd.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c65b75664c28a8e59c16.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c6815f5f1a29735efe1b.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7322e42962ad53ad204.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7a59e72c02bb1c717d2.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c8cee8e5cf2e001789b4.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ca22d29fe62f3952bdf5.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cb19bd7f8a304e5427a1.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cbd1e3595431d5a2b3f1.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cce1b0c32c33017cf2e9.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce1dfc990134162b3bd9.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce73d0dce43468f6689c.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cf22272d6d35af80d4ac.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0337d7c67377a4a76c6.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d08668fa8b38732486e9.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0c4f12c2239b6618582.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0fdf2dad83a92883a80.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d143f2a58e3b6d6e9c33.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d1c72e8bb13c2074d93c.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2146a3e853d0a6e28ca.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d24c97461b3ddb9397c8.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2e2a073be3edb46116f.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d31ebbc10e3fe1b28e03.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d35660db4040ba292193.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d382cd075f4169223e14.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d539dc11cb42b5dd7ec8.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d61ddfe35744369365b7.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d6c7001ebc45350e3d16.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d7b8ab568b4649998954.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d81f539f004776dd9b1e.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd468debb449b4454086.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd9cdb16324b04cfd958.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dfcf7fb1044d2f478fd1.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e0d1d0110b4ec421489f.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e142f7f0bd4fed898de3.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e1dc897df55108bcb5e8.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e21398ad61520edb724f.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e271f8e3d1541f9624ad.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e35675c18c56354c08cf.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e41e2f190c58404dd46e.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e49f4df7af5ae2d7a616.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e4dc6a60f85bf256a0cb.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ed36d7a7915dfa444ba2.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8edd05e27cc668051686f.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee154c8946678775c4a4.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee71f018e968a056d369.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eefe2e68b66ac563816b.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef6a52292f6bdca4f6f8.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef8f0c76a46cd221a68c.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8efb0e3ce826db8daf80f.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eff21c0b0f6ebe5b8e38.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f06fb318666fef69f91e.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f14fe6d1fc72454648c7.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f1d5f5ddbf74c07f733b.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f20463b324759953edad.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f35bde1750791f58773f.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a94114ce0b8918b487390f.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1cea594f152ba626b872.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d6736ba262cfa74344b.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d9f535e102e4663e7a6.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e3c7c3d552fb04f0f18.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e8ccd579330e097ce44.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1eec891ed731db227a36.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1fed3d4e873366ff3131.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa204c1e1d33348ff09944.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2136fc49b836dfedb959.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21971e3b743844849985.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21ea8d9d9f396b95dd87.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa226207f33d3ad4c6f546.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa22aba186563bcbf2c395.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa234322d4ad3e8bce42cc.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2469c77b363fdb4f0e06.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa252c3b1073415ba2b898.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa258da314ef42ba0a1858.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa264d23cdaa45a20efada.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa26cca3cd3d46c431e73b.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27227399d647e1c37a3c.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27c40ca6f04ab8be5fac.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28032d863d4bd8058799.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa287434dc284cea01157c.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28bbd6323e4dfb3ac43e.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28fb651bf14efa2dbb16.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2943669c9d5026af6985.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2999ec27ec516655eba6.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa29d8f8f88152c91350ca.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2aec2f09d454253aad6c.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2ba9cd881355a6f0a5a8.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62ba17beef16c563069a65d8.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc1ee0c5a89717d4785729.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc20387ef88d1d1998aac5.md
 create mode 100644 curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc211760bfc220f4734800.md
 create mode 100644 curriculum/dictionaries/arabic/comments.json

diff --git a/curriculum/challenges/arabic/00-certifications/back-end-development-and-apis-certification/back-end-development-and-apis-certification.yml b/curriculum/challenges/arabic/00-certifications/back-end-development-and-apis-certification/back-end-development-and-apis-certification.yml
new file mode 100644
index 00000000000..c2018b7e777
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/back-end-development-and-apis-certification/back-end-development-and-apis-certification.yml
@@ -0,0 +1,22 @@
+---
+id: 561add10cb82ac38a17523bc
+title: تطوير واجهات الخلفية وشهادة واجهات برمجة التطبيقات API
+certification: back-end-development-and-apis
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: bd7158d8c443edefaeb5bdef
+    title: الخدمة المصغرة للطابع الزمني
+  - 
+    id: bd7158d8c443edefaeb5bdff
+    title: الخدمة المصغرة لمحلل Request Header
+  - 
+    id: bd7158d8c443edefaeb5bd0e
+    title: الخدمة المصغرة لتقصير الروابط
+  - 
+    id: 5a8b073d06fa14fcfde687aa
+    title: متعقب التمارين
+  - 
+    id: bd7158d8c443edefaeb5bd0f
+    title: خدمة مصغرة للبيانات الوصفية للملفات
diff --git a/curriculum/challenges/arabic/00-certifications/data-analysis-with-python-certification/data-analysis-with-python-certification.yml b/curriculum/challenges/arabic/00-certifications/data-analysis-with-python-certification/data-analysis-with-python-certification.yml
new file mode 100644
index 00000000000..b146f7e4a0f
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/data-analysis-with-python-certification/data-analysis-with-python-certification.yml
@@ -0,0 +1,23 @@
+---
+id: 5e46fc95ac417301a38fb934
+title: تحليل البيانات بواسطة شهادة Python
+certification: data-analysis-with-python
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: 5e46f7e5ac417301a38fb928
+    title: حاسبة الانحراف المعياري و التباين و المتوسط
+  - 
+    id: 5e46f7e5ac417301a38fb929
+    title: محلل البيانات الديموغرافية
+  - 
+    id: 5e46f7f8ac417301a38fb92a
+    title: مصور البيانات الطبية
+  - 
+    id: 5e46f802ac417301a38fb92b
+    title: مصور السلسلة الزمنية لعرض الصفحة
+  - 
+    id: 5e4f5c4b570f7e3a4949899f
+    title: متوقّع مستوى البحر
+
diff --git a/curriculum/challenges/arabic/00-certifications/data-visualization-certification/data-visualization-certification.yml b/curriculum/challenges/arabic/00-certifications/data-visualization-certification/data-visualization-certification.yml
new file mode 100644
index 00000000000..2222485a58a
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/data-visualization-certification/data-visualization-certification.yml
@@ -0,0 +1,22 @@
+---
+id: 5a553ca864b52e1d8bceea14
+title: شهادة التصوير المرئي للبيانات
+certification: data-visualization
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: bd7168d8c242eddfaeb5bd13
+    title: التصوير المرئي للبيانات باستخدام الرسم البياني العمودي
+  - 
+    id: bd7178d8c242eddfaeb5bd13
+    title: التصوير المرئي للبيانات باستخدام مخطط التشتت
+  - 
+    id: bd7188d8c242eddfaeb5bd13
+    title: التصوير المرئي للبيانات باستخدام خريطة التمثيل الحراري
+  - 
+    id: 587d7fa6367417b2b2512bbf
+    title: التصوير المرئي للبيانات باستخدام خريطة التمثيل اللوني
+  - 
+    id: 587d7fa6367417b2b2512bc0
+    title: التصوير المرئي للبيانات باستخدام الخريطة الشجرية
diff --git a/curriculum/challenges/arabic/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml b/curriculum/challenges/arabic/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml
new file mode 100644
index 00000000000..e00138af76c
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/front-end-development-libraries-certification/front-end-development-libraries-certification.yml
@@ -0,0 +1,22 @@
+---
+id: 561acd10cb82ac38a17513bc
+title: شهادة مكتبات تطوير واجهة المستخدم
+certification: front-end-development-libraries
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: bd7158d8c442eddfaeb5bd13
+    title: بناء آلة عرض اقتباسات عشوائية
+  - 
+    id: bd7157d8c242eddfaeb5bd13
+    title: بناء عارض Markdown
+  - 
+    id: 587d7dbc367417b2b2512bae
+    title: بناء آلة الدرامز
+  - 
+    id: bd7158d8c442eddfaeb5bd17
+    title: بناء آلة حاسبة بإستخدام JavaScript
+  - 
+    id: bd7158d8c442eddfaeb5bd0f
+    title: بناء ساعة 25 + 5
diff --git a/curriculum/challenges/arabic/00-certifications/information-security-certification/information-security-certification.yml b/curriculum/challenges/arabic/00-certifications/information-security-certification/information-security-certification.yml
new file mode 100644
index 00000000000..9256a935721
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/information-security-certification/information-security-certification.yml
@@ -0,0 +1,22 @@
+---
+id: 5e6021435ac9d0ecd8b94b00
+title: شهادة امن المعلومات
+certification: information-security
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: 587d824a367417b2b2512c44
+    title: مدقق أسعار الأسهم
+  - 
+    id: 587d824a367417b2b2512c45
+    title: لوحة الرسائل المجهولة
+  - 
+    id: 5e46f979ac417301a38fb932
+    title: ماسح المنافذ
+  - 
+    id: 5e46f983ac417301a38fb933
+    title: كاسر كلمات المرور بتشفير SHA-1
+  - 
+    id: 5e601c775ac9d0ecd8b94aff
+    title: لعبة اونلاين متعددة اللاعبين و آمنة
diff --git a/curriculum/challenges/arabic/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml b/curriculum/challenges/arabic/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
new file mode 100644
index 00000000000..3349d7cd478
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/javascript-algorithms-and-data-structures-certification/javascript-algorithms-and-data-structures-certification.yml
@@ -0,0 +1,22 @@
+---
+id: 561abd10cb81ac38a17513bc
+title: شهادة خوارزميات وهياكل البيانات في JavaScript
+certification: javascript-algorithms-and-data-structures
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: aaa48de84e1ecc7c742e1124
+    title: فاحص الـ Palindrome
+  - 
+    id: a7f4d8f2483413a6ce226cac
+    title: محول الأرقام الرومانية
+  - 
+    id: 56533eb9ac21ba0edf2244e2
+    title: شفرة قيصر (Caesars Cipher)
+  - 
+    id: aff0395860f5d3034dc0bfc9
+    title: مدقق رقم الهاتف
+  - 
+    id: aa2e6f85cab2ab736c9a9b24
+    title: ماكينة تسجيل المدفوعات النقدية
diff --git a/curriculum/challenges/arabic/00-certifications/legacy-back-end-certification/legacy-back-end-certification.yml b/curriculum/challenges/arabic/00-certifications/legacy-back-end-certification/legacy-back-end-certification.yml
new file mode 100644
index 00000000000..72f813a9079
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/legacy-back-end-certification/legacy-back-end-certification.yml
@@ -0,0 +1,37 @@
+---
+id: 660add10cb82ac38a17513be
+title: شهادة الواجهة الخلفية القديمة
+certification: legacy-back-end
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: bd7158d8c443edefaeb5bdef
+    title: الخدمة المصغرة للطابع الزمني
+  - 
+    id: bd7158d8c443edefaeb5bdff
+    title: الخدمة المصغرة لمحلل Request Header
+  - 
+    id: bd7158d8c443edefaeb5bd0e
+    title: الخدمة المصغرة لتقصير الروابط
+  - 
+    id: bd7158d8c443edefaeb5bdee
+    title: طبقة مجرّدة للبحث عن الصور
+  - 
+    id: bd7158d8c443edefaeb5bd0f
+    title: خدمة مصغرة للبيانات الوصفية للملفات
+  - 
+    id: bd7158d8c443eddfaeb5bdef
+    title: بناء تطبيق تصويت
+  - 
+    id: bd7158d8c443eddfaeb5bdff
+    title: بناء تطبيق تنسيق الحياة الليلية
+  - 
+    id: bd7158d8c443eddfaeb5bd0e
+    title: رسم بياني لسوق الأسهم
+  - 
+    id: bd7158d8c443eddfaeb5bd0f
+    title: إدارة نادي تجارة الكتب
+  - 
+    id: bd7158d8c443eddfaeb5bdee
+    title: بناء نسخة من Pinterest
diff --git a/curriculum/challenges/arabic/00-certifications/legacy-data-visualization-certification/legacy-data-visualization-certification.yml b/curriculum/challenges/arabic/00-certifications/legacy-data-visualization-certification/legacy-data-visualization-certification.yml
new file mode 100644
index 00000000000..0bd55f21ee2
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/legacy-data-visualization-certification/legacy-data-visualization-certification.yml
@@ -0,0 +1,37 @@
+---
+id: 561add10cb82ac39a17513bc
+title: شهادة التصوير المرئي للبيانات
+certification: legacy-data-visualization
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: bd7157d8c242eddfaeb5bd13
+    title: بناء عارض Markdown
+  - 
+    id: bd7156d8c242eddfaeb5bd13
+    title: بناء لائحة المتصدرين
+  - 
+    id: bd7155d8c242eddfaeb5bd13
+    title: بناء صندوق وصفات
+  - 
+    id: bd7154d8c242eddfaeb5bd13
+    title: بناء لعبة الحياة
+  - 
+    id: bd7153d8c242eddfaeb5bd13
+    title: بناء لعبة Roguelike Dungeon Crawler
+  - 
+    id: bd7168d8c242eddfaeb5bd13
+    title: التصوير المرئي للبيانات باستخدام الرسم البياني العمودي
+  - 
+    id: bd7178d8c242eddfaeb5bd13
+    title: التصوير المرئي للبيانات باستخدام مخطط التشتت
+  - 
+    id: bd7188d8c242eddfaeb5bd13
+    title: التصوير المرئي للبيانات باستخدام خريطة التمثيل الحراري
+  - 
+    id: bd7198d8c242eddfaeb5bd13
+    title: إظهار الارتباط الوطني مع رسم بياني موجه بالقوة
+  - 
+    id: bd7108d8c242eddfaeb5bd13
+    title: بيانات الخرائط عبر الكرة الأرضية
diff --git a/curriculum/challenges/arabic/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml b/curriculum/challenges/arabic/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml
new file mode 100644
index 00000000000..41c89333ec8
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/legacy-front-end-certification/legacy-front-end-certification.yml
@@ -0,0 +1,37 @@
+---
+id: 561add10cb82ac38a17513be
+title: شهادة الواجهة الأمامية القديمة
+certification: legacy-front-end
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: bd7158d8c242eddfaeb5bd13
+    title: قم ببناء صفحة ويب لعرض نماذج الأعمال الشخصية
+  - 
+    id: bd7158d8c442eddfaeb5bd13
+    title: قم ببناء آلة عرض اقتباسات عشوائية
+  - 
+    id: bd7158d8c442eddfaeb5bd0f
+    title: قم ببناء ساعة 25 + 5
+  - 
+    id: bd7158d8c442eddfaeb5bd17
+    title: بناء آلة حاسبة بإستخدام JavaScript
+  - 
+    id: bd7158d8c442eddfaeb5bd10
+    title: إظهار الطقس المحلي
+  - 
+    id: bd7158d8c442eddfaeb5bd1f
+    title: استخدام Twitch JSON API
+  - 
+    id: bd7158d8c442eddfaeb5bd18
+    title: نسق قصص على Camper News
+  - 
+    id: bd7158d8c442eddfaeb5bd19
+    title: إنشاء عارض ويكيبيديا
+  - 
+    id: bd7158d8c442eedfaeb5bd1c
+    title: قم ببناء لعبة Tic Tac Toe
+  - 
+    id: bd7158d8c442eddfaeb5bd1c
+    title: قم ببناء لعبة سيمون
diff --git a/curriculum/challenges/arabic/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml b/curriculum/challenges/arabic/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml
new file mode 100644
index 00000000000..e9ca5686706
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/legacy-full-stack-certification/legacy-full-stack-certification.yml
@@ -0,0 +1,25 @@
+---
+id: 561add10cb82ac38a17213bd
+title: شهادة الـ Full Stack القديمة
+certification: legacy-full-stack
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: 561add10cb82ac38a17513bc
+    title: شهادة Responsive Web Design
+  - 
+    id: 561abd10cb81ac38a17513bc
+    title: شهادة الخوارزميات وهياكل البيانات في JavaScript
+  - 
+    id: 561acd10cb82ac38a17513bc
+    title: شهادة مكتبات تطوير واجهة المستخدم (Front End Libraries)
+  - 
+    id: 5a553ca864b52e1d8bceea14
+    title: شهادة Data Visualization
+  - 
+    id: 561add10cb82ac38a17523bc
+    title: شهادة API's and Microservice
+  - 
+    id: 561add10cb82ac38a17213bc
+    title: شهادة أمن المعلومات القديمة وشهادة ضمان الجودة
diff --git a/curriculum/challenges/arabic/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml b/curriculum/challenges/arabic/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml
new file mode 100644
index 00000000000..66f533142b3
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/legacy-information-security-and-quality-assurance-certification/legacy-information-security-and-quality-assurance-certification.yml
@@ -0,0 +1,22 @@
+---
+id: 561add10cb82ac38a17213bc
+title: شهادة أمن المعلومات القديمة وشهادة ضمان الجودة
+certification: legacy-information-security-and-quality-assurance
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: 587d8249367417b2b2512c41
+    title: محول Metric-Imperial
+  - 
+    id: 587d8249367417b2b2512c42
+    title: متعقب المشكلة (Issue Tracker)
+  - 
+    id: 587d824a367417b2b2512c43
+    title: المكتبة الشخصية
+  - 
+    id: 587d824a367417b2b2512c44
+    title: مدقق أسعار الأسهم
+  - 
+    id: 587d824a367417b2b2512c45
+    title: لوحة الرسائل المجهولة
diff --git a/curriculum/challenges/arabic/00-certifications/machine-learning-with-python-certification/machine-learning-with-python-certification.yml b/curriculum/challenges/arabic/00-certifications/machine-learning-with-python-certification/machine-learning-with-python-certification.yml
new file mode 100644
index 00000000000..7d39f5ee823
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/machine-learning-with-python-certification/machine-learning-with-python-certification.yml
@@ -0,0 +1,23 @@
+---
+id: 5e46fc95ac417301a38fb935
+title: مشاريع تعلم الآله باستخدام Python
+certification: machine-learning-with-python
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: 5e46f8d6ac417301a38fb92d
+    title: حجر ورقة مقص
+  - 
+    id: 5e46f8dcac417301a38fb92e
+    title: مصنف صور القطط والكلاب
+  - 
+    id: 5e46f8e3ac417301a38fb92f
+    title: محرك توصية للكتب باستخدام KNN
+  - 
+    id: 5e46f8edac417301a38fb930
+    title: حاسبة التكاليف الصحية بالانحدار الخطي
+  - 
+    id: 5e46f8edac417301a38fb931
+    title: مصنف الرسائل SMS بالشبكة العصبية
+
diff --git a/curriculum/challenges/arabic/00-certifications/quality-assurance-certification/quality-assurance-certification.yml b/curriculum/challenges/arabic/00-certifications/quality-assurance-certification/quality-assurance-certification.yml
new file mode 100644
index 00000000000..c9949843795
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/quality-assurance-certification/quality-assurance-certification.yml
@@ -0,0 +1,23 @@
+---
+id: 5e611829481575a52dc59c0e
+title: شهادة ضمان الجودة
+certification: quality-assurance
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: 587d8249367417b2b2512c41
+    title: محول Metric-Imperial
+  - 
+    id: 587d8249367417b2b2512c42
+    title: متعقب المشكلة
+  - 
+    id: 587d824a367417b2b2512c43
+    title: المكتبة الشخصية
+  - 
+    id: 5e601bf95ac9d0ecd8b94afd
+    title: حلال Sudoku
+  - 
+    id: 5e601c0d5ac9d0ecd8b94afe
+    title: مترجم أمريكي بريطاني
+
diff --git a/curriculum/challenges/arabic/00-certifications/relational-database-certification/relational-database-certification.yml b/curriculum/challenges/arabic/00-certifications/relational-database-certification/relational-database-certification.yml
new file mode 100644
index 00000000000..7162b7a3009
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/relational-database-certification/relational-database-certification.yml
@@ -0,0 +1,22 @@
+---
+id: 606243f50267e718b1e755f4
+title: شهادة Relational Databases
+certification: relational-database
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: 5f1a4ef5d5d6b5ab580fc6ae
+    title: قاعدة بيانات Celestial Bodies
+  - 
+    id: 5f9771307d4d22b9d2b75a94
+    title: قاعدة بيانات كأس العالم
+  - 
+    id: 5f87ac112ae598023a42df1a
+    title: مجدول مواعيد الصالون
+  - 
+    id: 602d9ff222201c65d2a019f2
+    title: قاعدة بيانات الجدول الدوري
+  - 
+    id: 602da04c22201c65d2a019f4
+    title: لُعْبَة تخمين العدد
diff --git a/curriculum/challenges/arabic/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml b/curriculum/challenges/arabic/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml
new file mode 100644
index 00000000000..341301ba269
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/responsive-web-design-certification/responsive-web-design-certification.yml
@@ -0,0 +1,22 @@
+---
+id: 561add10cb82ac38a17513bc
+title: شهادة Responsive Web Design
+certification: responsive-web-design
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: bd7158d8c442eddfaeb5bd18
+    title: بناء صفحة تحية
+  - 
+    id: 587d78af367417b2b2512b03
+    title: بناء نموذج استطلاع رأي
+  - 
+    id: 587d78af367417b2b2512b04
+    title: بناء الصفحة الرئيسة لمنتج
+  - 
+    id: 587d78b0367417b2b2512b05
+    title: أنشئ صفحة التوثيق الفني
+  - 
+    id: bd7158d8c242eddfaeb5bd13
+    title: قم ببناء مشروع صفحة ويب لعرض نماذج الاعمال الشخصية
diff --git a/curriculum/challenges/arabic/00-certifications/scientific-computing-with-python-certification/scientific-computing-with-python-certification.yml b/curriculum/challenges/arabic/00-certifications/scientific-computing-with-python-certification/scientific-computing-with-python-certification.yml
new file mode 100644
index 00000000000..eb30371458c
--- /dev/null
+++ b/curriculum/challenges/arabic/00-certifications/scientific-computing-with-python-certification/scientific-computing-with-python-certification.yml
@@ -0,0 +1,22 @@
+---
+id: 5e44431b903586ffb414c951
+title: مشاريع الحوسبة العلمية باستخدام Python
+certification: scientific-computing-with-python
+challengeType: 7
+isPrivate: true
+tests:
+  - 
+    id: 5e44412c903586ffb414c94c
+    title: منسق حسابي
+  - 
+    id: 5e444136903586ffb414c94d
+    title: آلة حاسبة للوقت
+  - 
+    id: 5e44413e903586ffb414c94e
+    title: تطبيق الميزانية
+  - 
+    id: 5e444147903586ffb414c94f
+    title: حاسبة مساحة المضلّع
+  - 
+    id: 5e44414f903586ffb414c950
+    title: حاسبة الاحتمالات
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md
new file mode 100644
index 00000000000..27f9c91bb75
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/add-a-text-alternative-to-images-for-visually-impaired-accessibility.md
@@ -0,0 +1,46 @@
+---
+id: 587d774c367417b2b2512a9c
+title: إضافة بديل نصي للصور لضعاف البصر
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cPp7VfD'
+forumTopicId: 16628
+dashedName: add-a-text-alternative-to-images-for-visually-impaired-accessibility
+---
+
+# --description--
+
+من المرجح أنك رأيت خاصية `alt` لوسم `img` في تحديات أخري. نص `alt` يصف محتوي الصورة ويوفر بديل نصي لها. هذا يساعد في حالة فشل الصورة في التحميل أو عدم قدرة المستخدم علي رؤيتها. تستخدم أيضا من قبل محركات البحث لفهم ما تحتوي عليه الصورة لتضمينها في نتائج البحث. إليك مثال:
+
+```html
+<img src="importantLogo.jpeg" alt="Company logo">
+```
+
+يعتمد الأشخاص الذين يعانون من إعاقات بصرية على برامج قراءة الشاشة لتحويل محتوى الويب إلى واجهة صوتية. لن يمكنهم الحصول على المعلومات المقدمة فقط بشكل بصري. في حالة الصور، يعتمد قارئ الشاشة على الوصول لخاصية `alt` وقراءة محتوياتها لإيصال المعلومات الرئيسية.
+
+من خواص نص `alt` الجيد أنه يقدم شرحا مختصرا لمحتوى الصورة. يجب عليك دائما إضافة خاصية `alt` للصور التي تستخدمها. فبحسب مواصفات HTML5، تعد إضافة نص بديل للصور أمرا إلزاميا.
+
+# --instructions--
+
+كامبر القط هو نينجا في البرمجة وهو أيضا نينجا حقيقي، يقوم ببناء صفحة ويب لمشاركة معرفتة. الصورة الشخصية التي يريد استخدامها تظهر مهاراته ويجب أن تحظي بتقدير جميع زوار الموقع. أضف خاصية (attribute) `alt` في الوسم (tag) `img` لتظهر أن كامبر القط يجيد لعبة الكاراتية. (خاصية الصورة `src` لا ترتبط بملف فعلي، لذا يجب أن ترى نص `alt` في العرض.)
+
+# --hints--
+
+يجب أن يحتوي وسم `img` الخاص بك علي خاصية `alt` ويجب ألا يكون فارغا.
+
+```js
+assert($('img').attr('alt'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<img src="doingKarateWow.jpeg">
+```
+
+# --solutions--
+
+```html
+<img src="doingKarateWow.jpeg" alt="Someone doing karate">
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md
new file mode 100644
index 00000000000..f54b40bdd31
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/add-an-accessible-date-picker.md
@@ -0,0 +1,105 @@
+---
+id: 587d778b367417b2b2512aa8
+title: إضافة منتقي تاريخ يمكن الوصول إليه
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cR3bRbCV'
+forumTopicId: 301008
+dashedName: add-an-accessible-date-picker
+---
+
+# --description--
+
+غالبًا ما تتضمن النماذج حقل `input` ، والذي يمكن استخدامه لإنشاء العديد من العناصر المختلفة للتحكم في النموذج. خاصية `type` على هذا العنصر تشير إلي أي نوع `input` سيتم إنشاؤه.
+
+ربما تكون قد لاحظت وجود أنواع المدخلات `text` و `submit` في تحديات سابقة، و HTML5 قد وفرت خيار حقل `date`. اعتمادا على دعم المتصفح، يظهر منتقي التاريخ في حقل `input` عندما يكون في التركيز، مما يجعل تعبئة النموذج أسهل لجميع المستخدمين.
+
+بالنسبة إلى المتصفحات الأقدم ، سيكون type افتراضيًا بقيمة ` text ` ،لساعد في إظهار تنسيق التاريخ المتوقع للمستخدمين في `label`  أو  `placeholder` في النص احتياطيا.
+
+إليك مثال:
+
+```html
+<label for="input1">Enter a date:</label>
+<input type="date" id="input1" name="input1">
+```
+
+# --instructions--
+
+يقوم Camper Cat بإعداد بطولة Mortal Kombat ويريد أن يطلب من منافسيه معرفة التاريخ الأفضل. أضف وسم `input` مع سمة `type` من نوع `date` ، وسمة `id` بقيمة `pickdate`، و سمة `name` بقيمة `date`.
+
+# --hints--
+
+يجب أن يحتوي الكود علي وسم `input` واحد لحقل محدد التاريخ.
+
+```js
+assert($('input').length == 2);
+```
+
+يجب أن يحتوي وسم `input` على سمة `type` بقيمة `date`.
+
+```js
+assert($('input').attr('type') == 'date');
+```
+
+يجب أن يحتوي وسم `input` على سمة `id` بقيمة `pickdate`.
+
+```js
+assert($('input').attr('id') == 'pickdate');
+```
+
+يجب أن يحتوي وسم `input` على سمة `name` بقيمة `date`.
+
+```js
+assert($('input').attr('name') == 'date');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <header>
+    <h1>Tournaments</h1>
+  </header>
+  <main>
+    <section>
+      <h2>Mortal Kombat Tournament Survey</h2>
+      <form>
+        <p>Tell us the best date for the competition</p>
+        <label for="pickdate">Preferred Date:</label>
+
+        <!-- Only change code below this line -->
+
+
+
+        <!-- Only change code above this line -->
+
+        <input type="submit" name="submit" value="Submit">
+      </form>
+    </section>
+  </main>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <header>
+    <h1>Tournaments</h1>
+  </header>
+  <main>
+    <section>
+      <h2>Mortal Kombat Tournament Survey</h2>
+      <form>
+        <p>Tell us the best date for the competition</p>
+        <label for="pickdate">Preferred Date:</label>
+        <input type="date" id="pickdate" name="date">
+        <input type="submit" name="submit" value="Submit">
+      </form>
+    </section>
+  </main>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md
new file mode 100644
index 00000000000..2f21941dc92
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information.md
@@ -0,0 +1,74 @@
+---
+id: 587d778f367417b2b2512aad
+title: >-
+  تجنب مشاكل عمى الألوان عن طريق اختيار الألوان التي تنقل المعلومات بعناية
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c437as3'
+forumTopicId: 301011
+dashedName: >-
+  avoid-colorblindness-issues-by-carefully-choosing-colors-that-convey-information
+---
+
+# --description--
+
+هناك أشكال مختلفة من عمى الألوان. يمكن أن تتراوح هذه من انخفاض الحساسية إلى طول موجي معين من الضوء إلى عدم القدرة على رؤية اللون على الإطلاق. أكثر الأشكال شيوعاً هو انخفاض الحساسية للكشف عن اللون الأخضر.
+
+على سبيل المثال، إذا كان لون المحتوى لديك في الواجهة الأمامية والخلفية ذا لون أخضر من درجتين متفاوتتين، قد لا يكون المستخدم المصاب بعمى الألوان قادراً على تمييزهما. يمكن النظر إلى الألوان المتشابهة على أنها جيران على عجلة الألوان، وينبغي تجنب تلك التركيبات عند نقل المعلومات الهامة.
+
+**ملاحظة:** بعض أدوات اختيار الألوان على الإنترنت تتضمن محاكاة مرئية لكيفية ظهور الألوان لأنواع مختلفة من عمى الألوان. هذه موارد رائعة بالإضافة إلى الآلات الحاسبة للتحقق من التباين عبر الإنترنت.
+
+# --instructions--
+
+تختبر Camper Cat أنماطًا مختلفة لزر مهم ، ولكن اللون الأصفر للخلفة (`#FFFF33`) `background-color` و الاخضر (`#33FF33`) `color`لون النص هي درجات مجاورة على عجلة الألوان ولا يمكن تمييزها فعليًا عند بعض المصابين بعمى الألوان. (خفتهم المتشابهة تفشل أيضًا في فحص نسبة التباين). غيّر لون النص `color` إلى اللون الأزرق المظلم (`#003366`) لحل كلتا المشكلتين.
+
+# --hints--
+
+يجب أن يغير الكود الخاص بك لون نص `color` للزر `button` إلى اللون الأزرق الداكن.
+
+```js
+assert($('button').css('color') == 'rgb(0, 51, 102)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<head>
+  <style>
+  button {
+    color: #33FF33;
+    background-color: #FFFF33;
+    font-size: 14px;
+    padding: 10px;
+  }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Danger!</h1>
+  </header>
+  <button>Delete Internet</button>
+</body>
+```
+
+# --solutions--
+
+```html
+<head>
+  <style>
+    button {
+      color: #003366;
+      background-color: #FFFF33;
+      font-size: 14px;
+      padding: 10px;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Danger!</h1>
+  </header>
+  <button>Delete Internet</button>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md
new file mode 100644
index 00000000000..133f49e990f
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/avoid-colorblindness-issues-by-using-sufficient-contrast.md
@@ -0,0 +1,84 @@
+---
+id: 587d778f367417b2b2512aac
+title: تجنب مشاكل عمى الألوان باستخدام تباين كافٍ
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cmzMEUw'
+forumTopicId: 301012
+dashedName: avoid-colorblindness-issues-by-using-sufficient-contrast
+---
+
+# --description--
+
+يشكل اللون جزءا كبيرا من التصميم البصري، ولكن استخدامه يطرح مسألتين تتعلقان بإمكانية الوصول. أولا، لا ينبغي استخدام اللون وحده كوسيلة وحيدة لنقل معلومات هامة لأن مستخدمي قارئ الشاشة لن يروها. ثانيًا ، تحتاج ألوان المقدمة والخلفية إلى تباين كافٍ حتى يتمكن المستخدمون الذين يعانون من عمى الألوان من تمييزها.
+
+شملت التحديات السابقة إيجاد بدائل نصية لمعالجة المسألة الأولى. أدخل التحدي الأخير أدوات للتحقق من التباين للمساعدة مع التحدي الثاني. نسبة التباين 4.5:1 الموصى بها من WCAG تنطبق على استخدام الألوان بالإضافة إلى تركيبات التدرج الرمادي.
+
+ويواجه المستخدمون الذين يعانون من عمى الألوان مشكلة في التمييز بين بعض الألوان والألوان الأخرى - عادة المشكلة تكون بدرجات اللون ولكن في بعض الأحيان بمدي خفة اللون ايضا. قد تتذكر أنه تم حساب نسبة التباين باستخدام قيم النصوع (أو الإضاءة) النسبية لألوان المقدمة والخلفية.
+
+من الناحية العملية ، يمكن الوصول إلى نسبة التباين 4.5:1 عن طريق التظليل (إضافة الأسود إلى) اللون الأغمق والتلوين (إضافة الأبيض إلى) اللون الأفتح. تعتبر الظلال الداكنة على عجلة الألوان عبارة عن ظلال من الأزرق والبنفسجي والأرجواني والأحمر ، بينما الألوان الفاتحة هي البرتقالي والأصفر والأخضر والأزرق والأخضر.
+
+# --instructions--
+
+يقوم Camper Cat بتجربة استخدام الألوان لنص مدونته وخلفيتها ، ولكن دمجة الحالي لللون الأخضر للخلفية `background-color` مع لون النص الماروني `color` له نسبة تباين 2.5:1. يمكنك بسهولة ضبط إضاءة الألوان بما اته عرفها، باستخدام خاصية في الـ CSS و هي `hsl()` (التي تمثل hue بمعني التدرج و saturation بمعني التشبع و lightness بمعني الخفة) بتغيير الوسيطة (argument) الثالثة. زيادة قيمة الخفة lightness للون الخلفية `background-color` من 35% إلى 55%، وتقليل قيمة الخفة لـ `color` من 20% إلى 15%. وهذا ما يحسّن التباين إلى 5.9:1.
+
+# --hints--
+
+يجب علي الكود الخاص بك فقط تغيير قيمة الخفة lightness لخاصية `color` للنص إلى قيمة 15%.
+
+```js
+assert(code.match(/color:\s*?hsl\(0,\s*?55%,\s*?15%\)/gi));
+```
+
+يجب علي الكود الخاص بك فقط تغيير قيمة الخفة lightness لخاصية `background-color` إلى قيمة 55%.
+
+```js
+assert(code.match(/background-color:\s*?hsl\(120,\s*?25%,\s*?55%\)/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<head>
+  <style>
+  body {
+    color: hsl(0, 55%, 20%);
+    background-color: hsl(120, 25%, 35%);
+  }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Deep Thoughts with Master Camper Cat</h1>
+  </header>
+  <article>
+    <h2>A Word on the Recent Catnip Doping Scandal</h2>
+    <p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
+    <p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
+  </article>
+</body>
+```
+
+# --solutions--
+
+```html
+<head>
+  <style>
+  body {
+    color: hsl(0, 55%, 15%);
+    background-color: hsl(120, 25%, 55%);
+  }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Deep Thoughts with Master Camper Cat</h1>
+  </header>
+  <article>
+    <h2>A Word on the Recent Catnip Doping Scandal</h2>
+    <p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
+    <p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
+  </article>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md
new file mode 100644
index 00000000000..91ab935f674
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/give-links-meaning-by-using-descriptive-link-text.md
@@ -0,0 +1,75 @@
+---
+id: 587d778f367417b2b2512aae
+title: Give Links Meaning by Using Descriptive Link Text
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c437DcV'
+forumTopicId: 301013
+dashedName: give-links-meaning-by-using-descriptive-link-text
+---
+
+# --description--
+
+Screen reader users have various options for what type of content their device reads. These options include skipping to (or over) landmark elements, jumping to the main content, or getting a page summary from the headings. Another option is to only hear the links available on a page.
+
+Screen readers do this by reading the link text, or what's between the anchor (`a`) tags. Having a list of "click here" or "read more" links isn't helpful. Instead, use brief but descriptive text within the `a` tags to provide more meaning for these users.
+
+# --instructions--
+
+The link text that Camper Cat is using is not very descriptive without the surrounding context. Move the anchor (`a`) tags so they wrap around the text `information about batteries` instead of `Click here`.
+
+# --hints--
+
+Your code should move the anchor `a` tags from around the words `Click here` to wrap around the words `information about batteries`.
+
+```js
+assert(
+  $('a')
+    .text()
+    .match(/^(information about batteries)$/g)
+);
+```
+
+The `a` element should have an `href` attribute with a value of an empty string `""`.
+
+```js
+assert($('a').attr('href') === '');
+```
+
+The `a` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/a>/g) &&
+    code.match(/<\/a>/g).length === code.match(/<a href=(''|"")>/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <header>
+    <h1>Deep Thoughts with Master Camper Cat</h1>
+  </header>
+  <article>
+    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
+    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. <a href="">Click here</a> for information about batteries</p>
+  </article>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <header>
+    <h1>Deep Thoughts with Master Camper Cat</h1>
+  </header>
+  <article>
+    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
+    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near. Click here for <a href="">information about batteries</a></p>
+  </article>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md
new file mode 100644
index 00000000000..8e5ff50fc46
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-accessibility-of-audio-content-with-the-audio-element.md
@@ -0,0 +1,115 @@
+---
+id: 587d7789367417b2b2512aa4
+title: Improve Accessibility of Audio Content with the audio Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cVJVkcZ'
+forumTopicId: 301014
+dashedName: improve-accessibility-of-audio-content-with-the-audio-element
+---
+
+# --description--
+
+HTML5's `audio` element gives semantic meaning when it wraps sound or audio stream content in your markup. Audio content also needs a text alternative to be accessible to people who are deaf or hard of hearing. This can be done with nearby text on the page or a link to a transcript.
+
+The `audio` tag supports the `controls` attribute. This shows the browser default play, pause, and other controls, and supports keyboard functionality. This is a boolean attribute, meaning it doesn't need a value, its presence on the tag turns the setting on.
+
+Here's an example:
+
+```html
+<audio id="meowClip" controls>
+  <source src="audio/meow.mp3" type="audio/mpeg">
+  <source src="audio/meow.ogg" type="audio/ogg">
+</audio>
+```
+
+**Note:** Multimedia content usually has both visual and auditory components. It needs synchronized captions and a transcript so users with visual and/or auditory impairments can access it. Generally, a web developer is not responsible for creating the captions or transcript, but needs to know to include them.
+
+# --instructions--
+
+Time to take a break from Camper Cat and meet fellow camper Zersiax (@zersiax), a champion of accessibility and a screen reader user. To hear a clip of his screen reader in action, add an `audio` element after the `p`. Include the `controls` attribute. Then place a `source` tag inside the `audio` tags with the `src` attribute set to `https://s3.amazonaws.com/freecodecamp/screen-reader.mp3` and `type` attribute set to `"audio/mpeg"`.
+
+**Note:** The audio clip may sound fast and be difficult to understand, but that is a normal speed for screen reader users.
+
+# --hints--
+
+Your code should have one `audio` tag.
+
+```js
+assert($('audio').length === 1);
+```
+
+Your `audio` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/audio>/g).length === 1 &&
+    code.match(/<audio.*>[\s\S]*<\/audio>/g)
+);
+```
+
+The `audio` tag should have the `controls` attribute.
+
+```js
+assert($('audio').attr('controls'));
+```
+
+Your code should have one `source` tag.
+
+```js
+assert($('source').length === 1);
+```
+
+Your `source` tag should be inside the `audio` tags.
+
+```js
+assert($('audio').children('source').length === 1);
+```
+
+The value for the `src` attribute on the `source` tag should match the link in the instructions exactly.
+
+```js
+assert(
+  $('source').attr('src') ===
+    'https://s3.amazonaws.com/freecodecamp/screen-reader.mp3'
+);
+```
+
+Your code should include a `type` attribute on the `source` tag with a value of audio/mpeg.
+
+```js
+assert($('source').attr('type') === 'audio/mpeg');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <header>
+    <h1>Real Coding Ninjas</h1>
+  </header>
+  <main>
+    <p>A sound clip of Zersiax's screen reader in action.</p>
+
+
+
+  </main>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <header>
+    <h1>Real Coding Ninjas</h1>
+  </header>
+  <main>
+    <p>A sound clip of Zersiax's screen reader in action.</p>
+    <audio controls>
+      <source src="https://s3.amazonaws.com/freecodecamp/screen-reader.mp3" type="audio/mpeg"/>
+    </audio>
+  </main>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md
new file mode 100644
index 00000000000..d677e66b940
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-chart-accessibility-with-the-figure-element.md
@@ -0,0 +1,161 @@
+---
+id: 587d778a367417b2b2512aa5
+title: Improve Chart Accessibility with the figure Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cGJMqtE'
+forumTopicId: 301015
+dashedName: improve-chart-accessibility-with-the-figure-element
+---
+
+# --description--
+
+HTML5 introduced the `figure` element and the related `figcaption`. Used together, these items wrap a visual representation (like an image, diagram, or chart) along with its caption. Wrapping these elements together gives a two-fold accessibility boost by semantically grouping related content and providing a text alternative explaining the `figure`.
+
+For data visualizations like charts, the caption can be used to briefly note the trends or conclusions for users with visual impairments. Another challenge covers how to move a table version of the chart's data off-screen (using CSS) for screen reader users.
+
+Here's an example - note that the `figcaption` goes inside the `figure` tags and can be combined with other elements:
+
+```html
+<figure>
+  <img src="roundhouseDestruction.jpeg" alt="Photo of Camper Cat executing a roundhouse kick">
+  <br>
+  <figcaption>
+    Master Camper Cat demonstrates proper form of a roundhouse kick.
+  </figcaption>
+</figure>
+```
+
+# --instructions--
+
+Camper Cat is hard at work creating a stacked bar chart showing the amount of time per week to spend training in stealth, combat, and weapons. Help him structure his page better by changing the `div` tag he used to a `figure` tag, and the `p` tag that surrounds the caption to a `figcaption` tag.
+
+# --hints--
+
+Your code should have one `figure` tag.
+
+```js
+assert($('figure').length == 1);
+```
+
+Your code should have one `figcaption` tag.
+
+```js
+assert($('figcaption').length == 1);
+```
+
+Your code should not have any `div` tags.
+
+```js
+assert($('div').length == 0);
+```
+
+Your code should not have any `p` tags.
+
+```js
+assert($('p').length == 0);
+```
+
+The `figcaption` should be a child of the `figure` tag.
+
+```js
+assert($('figure').children('figcaption').length == 1);
+```
+
+Your `figure` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/figure>/g) &&
+    code.match(/<\/figure>/g).length === code.match(/<figure>/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <header>
+    <h1>Training</h1>
+    <nav>
+      <ul>
+        <li><a href="#stealth">Stealth &amp; Agility</a></li>
+        <li><a href="#combat">Combat</a></li>
+        <li><a href="#weapons">Weapons</a></li>
+      </ul>
+    </nav>
+  </header>
+  <main>
+    <section>
+
+      <!-- Only change code below this line -->
+      <div>
+        <!-- Stacked bar chart will go here -->
+        <br>
+        <p>Breakdown per week of time to spend training in stealth, combat, and weapons.</p>
+      </div>
+      <!-- Only change code above this line -->
+
+    </section>
+    <section id="stealth">
+      <h2>Stealth &amp; Agility Training</h2>
+      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
+      <article><h3>No training is NP-complete without parkour</h3></article>
+    </section>
+    <section id="combat">
+      <h2>Combat Training</h2>
+      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
+      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
+    </section>
+    <section id="weapons">
+      <h2>Weapons Training</h2>
+      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
+      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
+    </section>
+  </main>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <header>
+    <h1>Training</h1>
+    <nav>
+      <ul>
+        <li><a href="#stealth">Stealth &amp; Agility</a></li>
+        <li><a href="#combat">Combat</a></li>
+        <li><a href="#weapons">Weapons</a></li>
+      </ul>
+    </nav>
+  </header>
+  <main>
+    <section>
+      <figure>
+        <!-- Stacked bar chart will go here -->
+        <br>
+        <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
+      </figure>
+    </section>
+    <section id="stealth">
+      <h2>Stealth &amp; Agility Training</h2>
+      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
+      <article><h3>No training is NP-complete without parkour</h3></article>
+    </section>
+    <section id="combat">
+      <h2>Combat Training</h2>
+      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
+      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
+    </section>
+    <section id="weapons">
+      <h2>Weapons Training</h2>
+      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
+      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
+    </section>
+  </main>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md
new file mode 100644
index 00000000000..55492a9a50e
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-form-field-accessibility-with-the-label-element.md
@@ -0,0 +1,119 @@
+---
+id: 587d778a367417b2b2512aa6
+title: Improve Form Field Accessibility with the label Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cGJMMAN'
+forumTopicId: 301016
+dashedName: improve-form-field-accessibility-with-the-label-element
+---
+
+# --description--
+
+Improving accessibility with semantic HTML markup applies to using both appropriate tag names and attributes. The next several challenges cover some important scenarios using attributes in forms.
+
+The `label` tag wraps the text for a specific form control item, usually the name or label for a choice. This ties meaning to the item and makes the form more readable. The `for` attribute on a `label` tag explicitly associates that `label` with the form control and is used by screen readers.
+
+You learned about radio buttons and their labels in a lesson in the Basic HTML section. In that lesson, we wrapped the radio button input element inside a `label` element along with the label text in order to make the text clickable. Another way to achieve this is by using the `for` attribute, as explained in this lesson.
+
+The value of the `for` attribute must be the same as the value of the `id` attribute of the form control. Here's an example:
+
+```html
+<form>
+  <label for="name">Name:</label>
+  <input type="text" id="name" name="name">
+</form>
+```
+
+# --instructions--
+
+Camper Cat expects a lot of interest in his thoughtful blog posts and wants to include an email sign up form. Add a `for` attribute on the email `label` that matches the `id` on its `input` field.
+
+# --hints--
+
+Your code should have a `for` attribute on the `label` tag that is not empty.
+
+```js
+assert($('label').attr('for'));
+```
+
+Your `for` attribute value should match the `id` value on the email `input`.
+
+```js
+assert($('label').attr('for') == 'email');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <header>
+    <h1>Deep Thoughts with Master Camper Cat</h1>
+  </header>
+  <section>
+    <form>
+      <p>Sign up to receive Camper Cat's blog posts by email here!</p>
+
+
+      <label>Email:</label>
+      <input type="text" id="email" name="email">
+
+
+      <input type="submit" name="submit" value="Submit">
+    </form>
+  </section>
+  <article>
+    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
+    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
+  </article>
+  <img src="samuraiSwords.jpeg" alt="">
+  <article>
+    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
+    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
+  </article>
+  <img src="samuraiSwords.jpeg" alt="">
+  <article>
+    <h2>Is Chuck Norris a Cat Person?</h2>
+    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
+  </article>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <header>
+    <h1>Deep Thoughts with Master Camper Cat</h1>
+  </header>
+  <section>
+    <form>
+      <p>Sign up to receive Camper Cat's blog posts by email here!</p>
+
+
+      <label for="email">Email:</label>
+      <input type="text" id="email" name="email">
+
+
+      <input type="submit" name="submit" value="Submit">
+    </form>
+  </section>
+  <article>
+    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
+    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
+  </article>
+  <img src="samuraiSwords.jpeg" alt="">
+  <article>
+    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
+    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
+  </article>
+  <img src="samuraiSwords.jpeg" alt="">
+  <article>
+    <h2>Is Chuck Norris a Cat Person?</h2>
+    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
+  </article>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md
new file mode 100644
index 00000000000..8bf9b62cf57
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/improve-readability-with-high-contrast-text.md
@@ -0,0 +1,80 @@
+---
+id: 587d778e367417b2b2512aab
+title: Improve Readability with High Contrast Text
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cKb3nCq'
+forumTopicId: 301017
+dashedName: improve-readability-with-high-contrast-text
+---
+
+# --description--
+
+Low contrast between the foreground and background colors can make text difficult to read. Sufficient contrast improves your content's readability, but what exactly does "sufficient" mean?
+
+The Web Content Accessibility Guidelines (WCAG) recommend at least a 4.5 to 1 contrast ratio for normal text. The ratio is calculated by comparing the relative luminance values of two colors. This ranges from 1:1 for the same color, or no contrast, to 21:1 for white against black, the most substantial contrast. There are many contrast checking tools available online that calculate this ratio for you.
+
+# --instructions--
+
+Camper Cat's choice of light gray text on a white background for his recent blog post has a 1.5:1 contrast ratio, making it hard to read. Change the `color` of the text from the current gray (`#D3D3D3`) to a darker gray (`#636363`) to improve the contrast ratio to 6:1.
+
+# --hints--
+
+Your code should change the text `color` for the `body` to the darker gray.
+
+```js
+assert($('body').css('color') == 'rgb(99, 99, 99)');
+```
+
+Your code should not change the `background-color` for the `body`.
+
+```js
+assert($('body').css('background-color') == 'rgb(255, 255, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<head>
+  <style>
+  body {
+    color: #D3D3D3;
+    background-color: #FFF;
+  }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Deep Thoughts with Master Camper Cat</h1>
+  </header>
+  <article>
+    <h2>A Word on the Recent Catnip Doping Scandal</h2>
+    <p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
+    <p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
+  </article>
+</body>
+```
+
+# --solutions--
+
+```html
+<head>
+  <style>
+  body {
+    color: #636363;
+    background-color: #FFF;
+  }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Deep Thoughts with Master Camper Cat</h1>
+  </header>
+  <article>
+    <h2>A Word on the Recent Catnip Doping Scandal</h2>
+    <p>The influence that catnip has on feline behavior is well-documented, and its use as an herbal supplement in competitive ninja circles remains controversial. Once again, the debate to ban the substance is brought to the public's attention after the high-profile win of Kittytron, a long-time proponent and user of the green stuff, at the Claw of Fury tournament.</p>
+    <p>As I've stated in the past, I firmly believe a true ninja's skills must come from within, with no external influences. My own catnip use shall continue as purely recreational.</p>
+  </article>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md
new file mode 100644
index 00000000000..83031edde59
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/jump-straight-to-the-content-using-the-main-element.md
@@ -0,0 +1,62 @@
+---
+id: 587d774e367417b2b2512a9f
+title: Jump Straight to the Content Using the main Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cPp7zuE'
+forumTopicId: 301018
+dashedName: jump-straight-to-the-content-using-the-main-element
+---
+
+# --description--
+
+HTML5 introduced several new elements that give developers more options while also incorporating accessibility features. These tags include `main`, `header`, `footer`, `nav`, `article`, and `section`, among others.
+
+By default, a browser renders these elements similar to the humble `div`. However, using them where appropriate gives additional meaning to your markup. The tag name alone can indicate the type of information it contains, which adds semantic meaning to that content. Assistive technologies can access this information to provide better page summary or navigation options to their users.
+
+The `main` element is used to wrap (you guessed it) the main content, and there should be only one per page. It's meant to surround the information related to your page's central topic. It's not meant to include items that repeat across pages, like navigation links or banners.
+
+The `main` tag also has an embedded landmark feature that assistive technology can use to navigate to the main content quickly. If you've ever seen a "Jump to Main Content" link at the top of a page, using the `main` tag automatically gives assistive devices that functionality.
+
+# --instructions--
+
+Camper Cat has some big ideas for his ninja weapons page. Help him set up his markup by adding opening and closing `main` tags between the `header` and `footer` (covered in other challenges). Keep the `main` tags empty for now.
+
+# --hints--
+
+Your code should have one `main` tag.
+
+```js
+assert($('main').length == 1);
+```
+
+The `main` tags should be between the closing `header` tag and the opening `footer` tag.
+
+```js
+assert(code.match(/<\/header>\s*?<main>\s*?<\/main>/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<header>
+  <h1>Weapons of the Ninja</h1>
+</header>
+
+
+
+<footer></footer>
+```
+
+# --solutions--
+
+```html
+<header>
+  <h1>Weapons of the Ninja</h1>
+</header>
+<main>
+
+</main>
+<footer></footer>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md
new file mode 100644
index 00000000000..695445ea37e
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/know-when-alt-text-should-be-left-blank.md
@@ -0,0 +1,76 @@
+---
+id: 587d774c367417b2b2512a9d
+title: Know When Alt Text Should be Left Blank
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cM9P4t2'
+forumTopicId: 301019
+dashedName: know-when-alt-text-should-be-left-blank
+---
+
+# --description--
+
+In the last challenge, you learned that including an `alt` attribute when using `img` tags is mandatory. However, sometimes images are grouped with a caption already describing them, or are used for decoration only. In these cases, `alt` text may seem redundant or unnecessary.
+
+When an image is already explained with text content or does not add meaning to a page, the `img` still needs an `alt` attribute, but it can be set to an empty string. Here's an example:
+
+```html
+<img src="visualDecoration.jpeg" alt="">
+```
+
+Background images usually fall under the 'decorative' label as well. However, they are typically applied with CSS rules, and therefore not part of the markup screen readers process.
+
+**Note:** For images with a caption, you may still want to include `alt` text since it helps search engines catalog the image's content.
+
+# --instructions--
+
+Camper Cat has coded a skeleton page for the blog part of his website. He's planning to add a visual break between his two articles with a decorative image of a samurai sword. Add an `alt` attribute to the `img` tag and set it to an empty string. (Note that the image `src` doesn't link to an actual file - don't worry that there are no swords showing in the display.)
+
+# --hints--
+
+Your `img` tag should have an `alt` attribute.
+
+```js
+assert(!($('img').attr('alt') == undefined));
+```
+
+The `alt` attribute should be set to an empty string.
+
+```js
+assert($('img').attr('alt') == '');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h1>Deep Thoughts with Master Camper Cat</h1>
+<article>
+  <h2>Defeating your Foe: the Red Dot is Ours!</h2>
+  <p>To Come...</p>
+</article>
+
+<img src="samuraiSwords.jpeg">
+
+<article>
+  <h2>Is Chuck Norris a Cat Person?</h2>
+  <p>To Come...</p>
+</article>
+```
+
+# --solutions--
+
+```html
+<h1>Deep Thoughts with Master Camper Cat</h1>
+<article>
+  <h2>Defeating your Foe: the Red Dot is Ours!</h2>
+  <p>To Come...</p>
+</article>
+
+<img src="samuraiSwords.jpeg" alt="">
+
+<article>
+  <h2>Is Chuck Norris a Cat Person?</h2>
+  <p>To Come...</p>
+</article>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md
new file mode 100644
index 00000000000..63bfea4b75c
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-elements-only-visible-to-a-screen-reader-by-using-custom-css.md
@@ -0,0 +1,244 @@
+---
+id: 587d778d367417b2b2512aaa
+title: Make Elements Only Visible to a Screen Reader by Using Custom CSS
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cJ8QGkhJ'
+forumTopicId: 301020
+dashedName: make-elements-only-visible-to-a-screen-reader-by-using-custom-css
+---
+
+# --description--
+
+Have you noticed that all of the applied accessibility challenges so far haven't used any CSS? This shows the importance of using a logical document outline and semantically meaningful tags around your content before introducing the visual design aspect.
+
+However, CSS's magic can also improve accessibility on your page when you want to visually hide content meant only for screen readers. This happens when information is in a visual format (like a chart), but screen reader users need an alternative presentation (like a table) to access the data. CSS is used to position the screen reader-only elements off the visual area of the browser window.
+
+Here's an example of the CSS rules that accomplish this:
+
+```css
+.sr-only {
+  position: absolute;
+  left: -10000px;
+  width: 1px;
+  height: 1px;
+  top: auto;
+  overflow: hidden;
+}
+```
+
+**Note:** The following CSS approaches will NOT do the same thing:
+
+<ul>
+<li><code>display: none;</code> or <code>visibility: hidden;</code> hides content for everyone, including screen reader users</li>
+<li>Zero values for pixel sizes, such as <code>width: 0px; height: 0px;</code> removes that element from the flow of your document, meaning screen readers will ignore it</li>
+</ul>
+
+# --instructions--
+
+Camper Cat created a really cool stacked bar chart for his training page, and put the data into a table for his visually impaired users. The table already has an `sr-only` class, but the CSS rules aren't filled in yet. Give the `position` an `absolute` value, the `left` a `-10000px` value, and the `width` and `height` both `1px` values.
+
+# --hints--
+
+Your code should set the `position` property of the `sr-only` class to a value of `absolute`.
+
+```js
+assert($('.sr-only').css('position') == 'absolute');
+```
+
+Your code should set the `left` property of the `sr-only` class to a value of `-10000px`.
+
+```js
+assert($('.sr-only').css('left') == '-10000px');
+```
+
+Your code should set the `width` property of the `sr-only` class to a value of `1` pixel.
+
+```js
+assert(code.match(/width:\s*?1px/gi));
+```
+
+Your code should set the `height` property of the `sr-only` class to a value of `1` pixel.
+
+```js
+assert(code.match(/height:\s*?1px/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<head>
+  <style>
+  .sr-only {
+    position: ;
+    left: ;
+    width: ;
+    height: ;
+    top: auto;
+    overflow: hidden;
+  }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Training</h1>
+    <nav>
+      <ul>
+        <li><a href="#stealth">Stealth &amp; Agility</a></li>
+        <li><a href="#combat">Combat</a></li>
+        <li><a href="#weapons">Weapons</a></li>
+      </ul>
+    </nav>
+  </header>
+  <section>
+    <h2>Master Camper Cat's Beginner Three Week Training Program</h2>
+    <figure>
+      <!-- Stacked bar chart of weekly training -->
+      <p>[Stacked bar chart]</p>
+      <br />
+      <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
+    </figure>
+    <table class="sr-only">
+      <caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
+      <thead>
+        <tr>
+          <th></th>
+          <th scope="col">Stealth &amp; Agility</th>
+          <th scope="col">Combat</th>
+          <th scope="col">Weapons</th>
+          <th scope="col">Total</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">Week One</th>
+          <td>3</td>
+          <td>5</td>
+          <td>2</td>
+          <td>10</td>
+        </tr>
+        <tr>
+          <th scope="row">Week Two</th>
+          <td>4</td>
+          <td>5</td>
+          <td>3</td>
+          <td>12</td>
+        </tr>
+        <tr>
+          <th scope="row">Week Three</th>
+          <td>4</td>
+          <td>6</td>
+          <td>3</td>
+          <td>13</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+  <section id="stealth">
+    <h2>Stealth &amp; Agility Training</h2>
+    <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
+    <article><h3>No training is NP-complete without parkour</h3></article>
+  </section>
+  <section id="combat">
+    <h2>Combat Training</h2>
+    <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
+    <article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
+  </section>
+  <section id="weapons">
+    <h2>Weapons Training</h2>
+    <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
+    <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
+  </section>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
+
+# --solutions--
+
+```html
+<head>
+  <style>
+  .sr-only {
+    position: absolute;
+    left: -10000px;
+    width: 1px;
+    height: 1px;
+    top: auto;
+    overflow: hidden;
+  }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Training</h1>
+    <nav>
+      <ul>
+        <li><a href="#stealth">Stealth &amp; Agility</a></li>
+        <li><a href="#combat">Combat</a></li>
+        <li><a href="#weapons">Weapons</a></li>
+      </ul>
+    </nav>
+  </header>
+  <section>
+    <h2>Master Camper Cat's Beginner Three Week Training Program</h2>
+    <figure>
+      <!-- Stacked bar chart of weekly training -->
+      <p>[Stacked bar chart]</p>
+      <br />
+      <figcaption>Breakdown per week of time to spend training in stealth, combat, and weapons.</figcaption>
+    </figure>
+    <table class="sr-only">
+      <caption>Hours of Weekly Training in Stealth, Combat, and Weapons</caption>
+      <thead>
+        <tr>
+          <th></th>
+          <th scope="col">Stealth &amp; Agility</th>
+          <th scope="col">Combat</th>
+          <th scope="col">Weapons</th>
+          <th scope="col">Total</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr>
+          <th scope="row">Week One</th>
+          <td>3</td>
+          <td>5</td>
+          <td>2</td>
+          <td>10</td>
+        </tr>
+        <tr>
+          <th scope="row">Week Two</th>
+          <td>4</td>
+          <td>5</td>
+          <td>3</td>
+          <td>12</td>
+        </tr>
+        <tr>
+          <th scope="row">Week Three</th>
+          <td>4</td>
+          <td>6</td>
+          <td>3</td>
+          <td>13</td>
+        </tr>
+      </tbody>
+    </table>
+  </section>
+  <section id="stealth">
+    <h2>Stealth &amp; Agility Training</h2>
+    <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
+    <article><h3>No training is NP-complete without parkour</h3></article>
+  </section>
+  <section id="combat">
+    <h2>Combat Training</h2>
+    <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
+    <article><h3>Goodbye, world: 5 proven ways to knock out an opponent</h3></article>
+  </section>
+  <section id="weapons">
+    <h2>Weapons Training</h2>
+    <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
+    <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
+  </section>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md
new file mode 100644
index 00000000000..ba72f6d7976
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-links-navigable-with-html-access-keys.md
@@ -0,0 +1,106 @@
+---
+id: 587d7790367417b2b2512aaf
+title: Make Links Navigable with HTML Access Keys
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cQvmaTp'
+forumTopicId: 301021
+dashedName: make-links-navigable-with-html-access-keys
+---
+
+# --description--
+
+HTML offers the `accesskey` attribute to specify a shortcut key to activate or bring focus to an element. Adding an `accesskey` attribute can make navigation more efficient for keyboard-only users.
+
+HTML5 allows this attribute to be used on any element, but it's particularly useful when it's used with interactive ones. This includes links, buttons, and form controls.
+
+Here's an example:
+
+```html
+<button accesskey="b">Important Button</button>
+```
+
+# --instructions--
+
+Camper Cat wants the links around the two blog article titles to have keyboard shortcuts so his site's users can quickly navigate to the full story. Add an `accesskey` attribute to both links and set the first one to `g` (for Garfield) and the second one to `c` (for Chuck Norris).
+
+# --hints--
+
+Your code should add an `accesskey` attribute to the `a` tag with the `id` of `first`.
+
+```js
+assert($('#first').attr('accesskey'));
+```
+
+Your code should add an `accesskey` attribute to the `a` tag with the `id` of `second`.
+
+```js
+assert($('#second').attr('accesskey'));
+```
+
+Your code should set the `accesskey` attribute on the `a` tag with the `id` of `first` to `g`. Note that case matters.
+
+```js
+assert($('#first').attr('accesskey') == 'g');
+```
+
+Your code should set the `accesskey` attribute on the `a` tag with the `id` of `second` to `c`. Note that case matters.
+
+```js
+assert($('#second').attr('accesskey') == 'c');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <header>
+    <h1>Deep Thoughts with Master Camper Cat</h1>
+  </header>
+  <article>
+
+
+    <h2><a id="first" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
+
+
+    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
+  </article>
+  <article>
+
+
+    <h2><a id="second" href="#">Is Chuck Norris a Cat Person?</a></h2>
+
+
+    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
+  </article>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <header>
+    <h1>Deep Thoughts with Master Camper Cat</h1>
+  </header>
+  <article>
+
+
+    <h2><a id="first" accesskey="g" href="#">The Garfield Files: Lasagna as Training Fuel?</a></h2>
+
+
+    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
+  </article>
+  <article>
+
+
+    <h2><a id="second" accesskey="c" href="#">Is Chuck Norris a Cat Person?</a></h2>
+
+
+    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
+  </article>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md
new file mode 100644
index 00000000000..3330ea186d7
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-footer-landmark.md
@@ -0,0 +1,116 @@
+---
+id: 587d7788367417b2b2512aa3
+title: Make Screen Reader Navigation Easier with the footer Landmark
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/crVrDh8'
+forumTopicId: 301022
+dashedName: make-screen-reader-navigation-easier-with-the-footer-landmark
+---
+
+# --description--
+
+Similar to `header` and `nav`, the `footer` element has a built-in landmark feature that allows assistive devices to quickly navigate to it. It's primarily used to contain copyright information or links to related documents that usually sit at the bottom of a page.
+
+# --instructions--
+
+Camper Cat's training page is making good progress. Change the `div` he used to wrap his copyright information at the bottom of the page to a `footer` element.
+
+# --hints--
+
+Your code should have one `footer` tag.
+
+```js
+assert($('footer').length == 1);
+```
+
+Your code should not have any `div` tags.
+
+```js
+assert($('div').length == 0);
+```
+
+Your code should have an opening and closing `footer` tag.
+
+```js
+assert(code.match(/<footer>\s*&copy; 2018 Camper Cat\s*<\/footer>/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <header>
+    <h1>Training</h1>
+    <nav>
+      <ul>
+        <li><a href="#stealth">Stealth &amp; Agility</a></li>
+        <li><a href="#combat">Combat</a></li>
+        <li><a href="#weapons">Weapons</a></li>
+      </ul>
+    </nav>
+  </header>
+  <main>
+    <section id="stealth">
+      <h2>Stealth &amp; Agility Training</h2>
+      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
+      <article><h3>No training is NP-complete without parkour</h3></article>
+    </section>
+    <section id="combat">
+      <h2>Combat Training</h2>
+      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
+      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
+    </section>
+    <section id="weapons">
+      <h2>Weapons Training</h2>
+      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
+      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
+    </section>
+  </main>
+
+
+  <div>&copy; 2018 Camper Cat</div>
+
+
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <header>
+    <h1>Training</h1>
+    <nav>
+      <ul>
+        <li><a href="#stealth">Stealth &amp; Agility</a></li>
+        <li><a href="#combat">Combat</a></li>
+        <li><a href="#weapons">Weapons</a></li>
+      </ul>
+    </nav>
+  </header>
+  <main>
+    <section id="stealth">
+      <h2>Stealth &amp; Agility Training</h2>
+      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
+      <article><h3>No training is NP-complete without parkour</h3></article>
+    </section>
+    <section id="combat">
+      <h2>Combat Training</h2>
+      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
+      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
+    </section>
+    <section id="weapons">
+      <h2>Weapons Training</h2>
+      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
+      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
+    </section>
+  </main>
+
+
+  <footer>&copy; 2018 Camper Cat</footer>
+
+
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md
new file mode 100644
index 00000000000..babce017089
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-header-landmark.md
@@ -0,0 +1,111 @@
+---
+id: 587d7787367417b2b2512aa1
+title: تسهيل تصفح قارئ الشاشة مع علامة الرأس header
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cB76vtv'
+forumTopicId: 301023
+dashedName: make-screen-reader-navigation-easier-with-the-header-landmark
+---
+
+# --description--
+
+عنصر الـ HTML5 التالي الذي يضيف المعنى الدلالي ويحسن إمكانية الوصول هو عنصر الـ `header`. يستخدم لإحتواء المعلومات التمهيدية أو روابط التنقل لعنصره الاساسي ويعمل بشكل جيد مع المحتوى المتكرر في الأعلى على الصفحات متعددة.
+
+`header` يشاركك الميزة البارزة المدمجة التي رأيتها مع `main`، مما يسمح للتكنولوجيات المساعدة بالانتقال بسرعة إلى ذلك المحتوى.
+
+**ملاحظة:** عنصر الـ `header` يستخدم في عنصر `body` بمستند HTML الخاص بك. وهذا يختلف عن عن عنصر الـ `head` الذي يحتوي على عنوان الصفحة، معلومات تعريفية، و الخ.
+
+# --instructions--
+
+يقوم Camper Cat بكتابة بعض المقالات الرائعة عن تدريب النينجا، ويريد إضافة صفحة لهم على موقعه. قم بتغيير `div` العلوية التي تحتوي حاليا على `h1` إلى عنصر `header` بدلا من ذلك.
+
+# --hints--
+
+يجب أن يحتوي الكود الخاص بك على `header` واحد فقط.
+
+```js
+assert($('header').length == 1);
+```
+
+يجب أن يحتوي عنصر `header` عنصر الـ `h1`.
+
+```js
+assert($('header').children('h1').length == 1);
+```
+
+يجب ألا يحتوي الكود الخاص بك على أي عنصر `div`.
+
+```js
+assert($('div').length == 0);
+```
+
+يجب أن يحتوي عنصر `header` الخاص بك على علامة إغلاق.
+
+```js
+assert(
+  code.match(/<\/header>/g) &&
+    code.match(/<\/header>/g).length === code.match(/<header>/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+
+  <div>
+    <h1>Training with Camper Cat</h1>
+  </div>
+
+
+  <main>
+    <section id="stealth">
+      <h2>Stealth &amp; Agility Training</h2>
+      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
+      <article><h3>No training is NP-complete without parkour</h3></article>
+    </section>
+    <section id="combat">
+      <h2>Combat Training</h2>
+      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
+      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
+    </section>
+    <section id="weapons">
+      <h2>Weapons Training</h2>
+      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
+      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
+    </section>
+  </main>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+
+  <header>
+    <h1>Training with Camper Cat</h1>
+  </header>
+
+
+  <main>
+    <section id="stealth">
+      <h2>Stealth &amp; Agility Training</h2>
+      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
+      <article><h3>No training is NP-complete without parkour</h3></article>
+    </section>
+    <section id="combat">
+      <h2>Combat Training</h2>
+      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
+      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
+    </section>
+    <section id="weapons">
+      <h2>Weapons Training</h2>
+      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
+      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
+    </section>
+  </main>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md
new file mode 100644
index 00000000000..906d7dd5c83
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/make-screen-reader-navigation-easier-with-the-nav-landmark.md
@@ -0,0 +1,121 @@
+---
+id: 587d7788367417b2b2512aa2
+title: Make Screen Reader Navigation Easier with the nav Landmark
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/czVwWSv'
+forumTopicId: 301024
+dashedName: make-screen-reader-navigation-easier-with-the-nav-landmark
+---
+
+# --description--
+
+The `nav` element is another HTML5 item with the embedded landmark feature for easy screen reader navigation. This tag is meant to wrap around the main navigation links in your page.
+
+If there are repeated site links at the bottom of the page, it isn't necessary to markup those with a `nav` tag as well. Using a `footer` (covered in the next challenge) is sufficient.
+
+# --instructions--
+
+Camper Cat included navigation links at the top of his training page, but wrapped them in a `div`. Change the `div` to a `nav` tag to improve the accessibility on his page.
+
+# --hints--
+
+Your code should have one `nav` tag.
+
+```js
+assert($('nav').length == 1);
+```
+
+Your `nav` tags should wrap around the `ul` and its list items.
+
+```js
+assert($('nav').children('ul').length == 1);
+```
+
+Your code should not have any `div` tags.
+
+```js
+assert($('div').length == 0);
+```
+
+Your `nav` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/nav>/g) &&
+    code.match(/<\/nav>/g).length === code.match(/<nav>/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <header>
+    <h1>Training with Camper Cat</h1>
+
+    <div>
+      <ul>
+        <li><a href="#stealth">Stealth &amp; Agility</a></li>
+        <li><a href="#combat">Combat</a></li>
+        <li><a href="#weapons">Weapons</a></li>
+      </ul>
+    </div>
+
+  </header>
+  <main>
+    <section id="stealth">
+      <h2>Stealth &amp; Agility Training</h2>
+      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
+      <article><h3>No training is NP-complete without parkour</h3></article>
+    </section>
+    <section id="combat">
+      <h2>Combat Training</h2>
+      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
+      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
+    </section>
+    <section id="weapons">
+      <h2>Weapons Training</h2>
+      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
+      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
+    </section>
+  </main>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <header>
+    <h1>Training with Camper Cat</h1>
+
+    <nav>
+      <ul>
+        <li><a href="#stealth">Stealth &amp; Agility</a></li>
+        <li><a href="#combat">Combat</a></li>
+        <li><a href="#weapons">Weapons</a></li>
+      </ul>
+    </nav>
+
+  </header>
+  <main>
+    <section id="stealth">
+      <h2>Stealth &amp; Agility Training</h2>
+      <article><h3>Climb foliage quickly using a minimum spanning tree approach</h3></article>
+      <article><h3>No training is NP-complete without parkour</h3></article>
+    </section>
+    <section id="combat">
+      <h2>Combat Training</h2>
+      <article><h3>Dispatch multiple enemies with multithreaded tactics</h3></article>
+      <article><h3>Goodbye world: 5 proven ways to knock out an opponent</h3></article>
+    </section>
+    <section id="weapons">
+      <h2>Weapons Training</h2>
+      <article><h3>Swords: the best tool to literally divide and conquer</h3></article>
+      <article><h3>Breadth-first or depth-first in multi-weapon training?</h3></article>
+    </section>
+  </main>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md
new file mode 100644
index 00000000000..d9318d50f7b
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/standardize-times-with-the-html5-datetime-attribute.md
@@ -0,0 +1,132 @@
+---
+id: 587d778c367417b2b2512aa9
+title: Standardize Times with the HTML5 datetime Attribute
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cmzMgtz'
+forumTopicId: 301025
+dashedName: standardize-times-with-the-html5-datetime-attribute
+---
+
+# --description--
+
+Continuing with the date theme, HTML5 also introduced the `time` element along with a `datetime` attribute to standardize times. The `time` element is an inline element that can wrap a date or time on a page. A `datetime` attribute holds a valid format of that date. This is the value accessed by assistive devices. It helps avoid confusion by stating a standardized version of a time, even if it's informally or colloquially written in the text.
+
+Here's an example:
+
+```html
+<p>Master Camper Cat officiated the cage match between Goro and Scorpion <time datetime="2013-02-13">last Wednesday</time>, which ended in a draw.</p>
+```
+
+# --instructions--
+
+Camper Cat's Mortal Kombat survey results are in! Wrap a `time` tag around the text `Thursday, September 15<sup>th</sup>` and add a `datetime` attribute to it set to `2016-09-15`.
+
+# --hints--
+
+Your code should have a `p` element which includes the text `Thank you to everyone for responding to Master Camper Cat's survey.` and include a `time` element.
+
+```js
+assert(timeElement);
+```
+
+Your added `time` tags should wrap around the text `Thursday, September 15<sup>th</sup>`.
+
+```js
+assert(
+  timeElement &&
+    timeElement?.innerHTML?.trim() === 'Thursday, September 15<sup>th</sup>'
+);
+```
+
+Your added `time` tag should have a `datetime` attribute that is not empty.
+
+```js
+assert(datetimeAttr && datetimeAttr?.length);
+```
+
+Your added `datetime` attribute should be set to a value of `2016-09-15`.
+
+```js
+assert(datetimeAttr === '2016-09-15');
+```
+
+# --seed--
+
+## --after-user-code--
+
+```html
+<script>
+const pElement = [...document.querySelectorAll("article > p")]
+  .filter(x => x?.textContent?.includes("Thank you to everyone for responding to Master Camper Cat's survey."));
+const timeElement = pElement[0] ? pElement[0].querySelector("time") : null;
+const datetimeAttr = timeElement?.getAttribute("datetime");
+</script>
+```
+
+## --seed-contents--
+
+```html
+<body>
+  <header>
+    <h1>Tournaments</h1>
+  </header>
+  <article>
+    <h2>Mortal Kombat Tournament Survey Results</h2>
+
+    <!-- Only change code below this line -->
+
+    <p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is Thursday, September 15<sup>th</sup>. May the best ninja win!</p>
+
+    <!-- Only change code above this line -->
+
+    <section>
+      <h3>Comments:</h3>
+      <article>
+        <p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
+        <p>Johnny Cage better be there, I'll finish him!</p>
+      </article>
+      <article>
+        <p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
+        <p>Wow, much combat, so mortal.</p>
+      </article>
+      <article>
+        <p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
+        <p>Looks like I'll be busy that day.</p>
+      </article>
+    </section>
+  </article>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <header>
+    <h1>Tournaments</h1>
+  </header>
+  <article>
+    <h2>Mortal Kombat Tournament Survey Results</h2>
+
+    <p>Thank you to everyone for responding to Master Camper Cat's survey. The best day to host the vaunted Mortal Kombat tournament is <time datetime="2016-09-15">Thursday, September 15<sup>th</sup></time>. May the best ninja win!</p>
+
+    <section>
+      <h3>Comments:</h3>
+      <article>
+        <p>Posted by: Sub-Zero on <time datetime="2016-08-13T20:01Z">August 13<sup>th</sup></time></p>
+        <p>Johnny Cage better be there, I'll finish him!</p>
+      </article>
+      <article>
+        <p>Posted by: Doge on <time datetime="2016-08-15T08:12Z">August 15<sup>th</sup></time></p>
+        <p>Wow, much combat, so mortal.</p>
+      </article>
+      <article>
+        <p>Posted by: The Grim Reaper on <time datetime="2016-08-16T00:00Z">August 16<sup>th</sup></time></p>
+        <p>Looks like I'll be busy that day.</p>
+      </article>
+    </section>
+  </article>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md
new file mode 100644
index 00000000000..fbb95eaf6b1
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/use-headings-to-show-hierarchical-relationships-of-content.md
@@ -0,0 +1,92 @@
+---
+id: 587d774d367417b2b2512a9e
+title: Use Headings to Show Hierarchical Relationships of Content
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cqVEktm'
+forumTopicId: 301026
+dashedName: use-headings-to-show-hierarchical-relationships-of-content
+---
+
+# --description--
+
+Headings (`h1` through `h6` elements) are workhorse tags that help provide structure and labeling to your content. Screen readers can be set to read only the headings on a page so the user gets a summary. This means it is important for the heading tags in your markup to have semantic meaning and relate to each other, not be picked merely for their size values.
+
+*Semantic meaning* means that the tag you use around content indicates the type of information it contains.
+
+If you were writing a paper with an introduction, a body, and a conclusion, it wouldn't make much sense to put the conclusion as a subsection of the body in your outline. It should be its own section. Similarly, the heading tags in a webpage need to go in order and indicate the hierarchical relationships of your content.
+
+Headings with equal (or higher) rank start new implied sections, headings with lower rank start subsections of the previous one.
+
+As an example, a page with an `h2` element followed by several subsections labeled with `h4` elements would confuse a screen reader user. With six choices, it's tempting to use a tag because it looks better in a browser, but you can use CSS to edit the relative sizing.
+
+One final point, each page should always have one (and only one) `h1` element, which is the main subject of your content. This and the other headings are used in part by search engines to understand the topic of the page.
+
+# --instructions--
+
+Camper Cat wants a page on his site dedicated to becoming a ninja. Help him fix the headings so his markup gives semantic meaning to the content, and shows the proper parent-child relationships of his sections. Change all the `h5` tags to the proper heading level to indicate they are subsections of the `h2` ones. Use `h3` tags for the purpose.
+
+# --hints--
+
+Your code should have 6 `h3` elements.
+
+```js
+assert($('h3').length === 6);
+```
+
+Your code should have 6 `h3` closing tags.
+
+```js
+assert((code.match(/\/h3/g) || []).length === 6);
+```
+
+Your code should not have any `h5` elements.
+
+```js
+assert($('h5').length === 0);
+```
+
+Your code should not have any `h5` closing tags.
+
+```js
+assert(/\/h5/.test(code) === false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h1>How to Become a Ninja</h1>
+<main>
+  <h2>Learn the Art of Moving Stealthily</h2>
+  <h5>How to Hide in Plain Sight</h5>
+  <h5>How to Climb a Wall</h5>
+
+  <h2>Learn the Art of Battle</h2>
+  <h5>How to Strengthen your Body</h5>
+  <h5>How to Fight like a Ninja</h5>
+
+  <h2>Learn the Art of Living with Honor</h2>
+  <h5>How to Breathe Properly</h5>
+  <h5>How to Simplify your Life</h5>
+</main>
+```
+
+# --solutions--
+
+```html
+<h1>How to Become a Ninja</h1>
+<main>
+  <h2>Learn the Art of Moving Stealthily</h2>
+  <h3>How to Hide in Plain Sight</h3>
+  <h3>How to Climb a Wall</h3>
+
+  <h2>Learn the Art of Battle</h2>
+  <h3>How to Strengthen your Body</h3>
+  <h3>How to Fight like a Ninja</h3>
+
+  <h2>Learn the Art of Living with Honor</h2>
+  <h3>How to Breathe Properly</h3>
+  <h3>How to Simplify your Life</h3>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md
new file mode 100644
index 00000000000..0ae730fc94b
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/use-tabindex-to-add-keyboard-focus-to-an-element.md
@@ -0,0 +1,144 @@
+---
+id: 587d7790367417b2b2512ab0
+title: Use tabindex to Add Keyboard Focus to an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cmzMDHW'
+forumTopicId: 301027
+dashedName: use-tabindex-to-add-keyboard-focus-to-an-element
+---
+
+# --description--
+
+The HTML `tabindex` attribute has three distinct functions relating to an element's keyboard focus. When it's on a tag, it indicates that the element can be focused on. The value (an integer that's positive, negative, or zero) determines the behavior.
+
+Certain elements, such as links and form controls, automatically receive keyboard focus when a user tabs through a page. It's in the same order as the elements come in the HTML source markup. This same functionality can be given to other elements, such as `div`, `span`, and `p`, by placing a `tabindex="0"` attribute on them. Here's an example:
+
+```html
+<div tabindex="0">I need keyboard focus!</div>
+```
+
+**Note:** A negative `tabindex` value (typically -1) indicates that an element is focusable, but is not reachable by the keyboard. This method is generally used to bring focus to content programmatically (like when a `div` used for a pop-up window is activated), and is beyond the scope of these challenges.
+
+# --instructions--
+
+Camper Cat created a new survey to collect information about his users. He knows input fields automatically get keyboard focus, but he wants to make sure his keyboard users pause at the instructions while tabbing through the items. Add a `tabindex` attribute to the `p` tag and set its value to `0`. Bonus - using `tabindex` also enables the CSS pseudo-class `:focus` to work on the `p` tag.
+
+# --hints--
+
+Your code should add a `tabindex` attribute to the `p` tag that holds the form instructions.
+
+```js
+assert($('p').attr('tabindex'));
+```
+
+Your code should set the `tabindex` attribute on the `p` tag to a value of 0.
+
+```js
+assert($('p').attr('tabindex') == '0');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<head>
+  <style>
+  p:focus {
+    background-color: yellow;
+  }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Ninja Survey</h1>
+  </header>
+  <section>
+    <form>
+
+
+      <p>Instructions: Fill in ALL your information then click <b>Submit</b></p>
+
+
+      <label for="username">Username:</label>
+      <input type="text" id="username" name="username"><br>
+      <fieldset>
+        <legend>What level ninja are you?</legend>
+        <input id="newbie" type="radio" name="levels" value="newbie">
+        <label for="newbie">Newbie Kitten</label><br>
+        <input id="intermediate" type="radio" name="levels" value="intermediate">
+        <label for="intermediate">Developing Student</label><br>
+        <input id="master" type="radio" name="levels" value="master">
+        <label for="master">9th Life Master</label>
+      </fieldset>
+      <br>
+      <fieldset>
+      <legend>Select your favorite weapons:</legend>
+      <input id="stars" type="checkbox" name="weapons" value="stars">
+      <label for="stars">Throwing Stars</label><br>
+      <input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
+      <label for="nunchucks">Nunchucks</label><br>
+      <input id="sai" type="checkbox" name="weapons" value="sai">
+      <label for="sai">Sai Set</label><br>
+      <input id="sword" type="checkbox" name="weapons" value="sword">
+      <label for="sword">Sword</label>
+      </fieldset>
+      <br>
+      <input type="submit" name="submit" value="Submit">
+    </form><br>
+  </section>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
+
+# --solutions--
+
+```html
+<head>
+  <style>
+  p:focus {
+    background-color: yellow;
+  }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Ninja Survey</h1>
+  </header>
+  <section>
+    <form>
+
+
+      <p tabindex="0">Instructions: Fill in ALL your information then click <b>Submit</b></p>
+
+
+      <label for="username">Username:</label>
+      <input type="text" id="username" name="username"><br>
+      <fieldset>
+        <legend>What level ninja are you?</legend>
+        <input id="newbie" type="radio" name="levels" value="newbie">
+        <label for="newbie">Newbie Kitten</label><br>
+        <input id="intermediate" type="radio" name="levels" value="intermediate">
+        <label for="intermediate">Developing Student</label><br>
+        <input id="master" type="radio" name="levels" value="master">
+        <label for="master">9th Life Master</label>
+      </fieldset>
+      <br>
+      <fieldset>
+      <legend>Select your favorite weapons:</legend>
+      <input id="stars" type="checkbox" name="weapons" value="stars">
+      <label for="stars">Throwing Stars</label><br>
+      <input id="nunchucks" type="checkbox" name="weapons" value="nunchucks">
+      <label for="nunchucks">Nunchucks</label><br>
+      <input id="sai" type="checkbox" name="weapons" value="sai">
+      <label for="sai">Sai Set</label><br>
+      <input id="sword" type="checkbox" name="weapons" value="sword">
+      <label for="sword">Sword</label>
+      </fieldset>
+      <br>
+      <input type="submit" name="submit" value="Submit">
+    </form><br>
+  </section>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md
new file mode 100644
index 00000000000..2ff85219755
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements.md
@@ -0,0 +1,160 @@
+---
+id: 587d7790367417b2b2512ab1
+title: Use tabindex to Specify the Order of Keyboard Focus for Several Elements
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cmzRRcb'
+forumTopicId: 301028
+dashedName: use-tabindex-to-specify-the-order-of-keyboard-focus-for-several-elements
+---
+
+# --description--
+
+The `tabindex` attribute also specifies the exact tab order of elements. This is achieved when the attribute's value is set to a positive number of 1 or higher.
+
+Setting a `tabindex="1"` will bring keyboard focus to that element first. Then it cycles through the sequence of specified `tabindex` values (2, 3, etc.), before moving to default and `tabindex="0"` items.
+
+It's important to note that when the tab order is set this way, it overrides the default order (which uses the HTML source). This may confuse users who are expecting to start navigation from the top of the page. This technique may be necessary in some circumstances, but in terms of accessibility, take care before applying it.
+
+Here's an example:
+
+```html
+<div tabindex="1">I get keyboard focus, and I get it first!</div>
+```
+
+```html
+<div tabindex="2">I get keyboard focus, and I get it second!</div>
+```
+
+# --instructions--
+
+Camper Cat has a search field on his Inspirational Quotes page that he plans to position in the upper right corner with CSS. He wants the search `input` and submit `input` form controls to be the first two items in the tab order. Add a `tabindex` attribute set to `1` to the `search` `input`, and a `tabindex` attribute set to `2` to the `submit` `input`.
+
+Another thing to note is that some browsers may place you in the middle of your tab order when an element is clicked. An element has been added to the page that ensures you will always start at the beginning of your tab order.
+
+# --hints--
+
+Your code should add a `tabindex` attribute to the `search` `input` tag.
+
+```js
+assert($('#search').attr('tabindex'));
+```
+
+Your code should add a `tabindex` attribute to the `submit` `input` tag.
+
+```js
+assert($('#submit').attr('tabindex'));
+```
+
+Your code should set the `tabindex` attribute on the `search` `input` tag to a value of 1.
+
+```js
+assert($('#search').attr('tabindex') == '1');
+```
+
+Your code should set the `tabindex` attribute on the `submit` `input` tag to a value of 2.
+
+```js
+assert($('#submit').attr('tabindex') == '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <div tabindex="1" class="overlay"></div>
+  <header>
+    <h1>Even Deeper Thoughts with Master Camper Cat</h1>
+    <nav>
+      <ul>
+        <li><a href="">Home</a></li>
+        <li><a href="">Blog</a></li>
+        <li><a href="">Training</a></li>
+      </ul>
+    </nav>
+  </header>
+  <form>
+    <label for="search">Search:</label>
+
+
+    <input type="search" name="search" id="search">
+    <input type="submit" name="submit" value="Submit" id="submit">
+
+
+  </form>
+  <h2>Inspirational Quotes</h2>
+  <blockquote>
+    <p>&ldquo;There's no Theory of Evolution, just a list of creatures I've allowed to live.&rdquo;<br>
+    - Chuck Norris</p>
+  </blockquote>
+  <blockquote>
+    <p>&ldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.&rdquo;<br>
+    - TMNT</p>
+  </blockquote>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+<style>
+  body {
+    height: 100%;
+    margin: 0 !important;
+    padding: 8px;
+  }
+  .overlay {
+    margin: -8px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+</style>
+```
+
+# --solutions--
+
+```html
+<body>
+  <div tabindex="1" class="overlay"></div>
+  <header>
+    <h1>Even Deeper Thoughts with Master Camper Cat</h1>
+    <nav>
+      <ul>
+        <li><a href="">Home</a></li>
+        <li><a href="">Blog</a></li>
+        <li><a href="">Training</a></li>
+      </ul>
+    </nav>
+  </header>
+  <form>
+    <label for="search">Search:</label>
+
+
+    <input tabindex="1" type="search" name="search" id="search">
+    <input tabindex="2" type="submit" name="submit" value="Submit" id="submit">
+
+
+  </form>
+  <h2>Inspirational Quotes</h2>
+  <blockquote>
+    <p>&ldquo;There's no Theory of Evolution, just a list of creatures I've allowed to live.&rdquo;<br>
+    - Chuck Norris</p>
+  </blockquote>
+  <blockquote>
+    <p>&ldquo;Wise men say forgiveness is divine, but never pay full price for late pizza.&rdquo;<br>
+    - TMNT</p>
+  </blockquote>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+<style>
+  body {
+    height: 100%;
+    margin: 0 !important;
+    padding: 8px;
+  }
+  .overlay {
+    margin: -8px;
+    position: absolute;
+    width: 100%;
+    height: 100%;
+  }
+</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md
new file mode 100644
index 00000000000..f6eaf6e3697
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/wrap-content-in-the-article-element.md
@@ -0,0 +1,92 @@
+---
+id: 587d774e367417b2b2512aa0
+title: غلف المحتوي بعنصر article
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cPp79S3'
+forumTopicId: 301029
+dashedName: wrap-content-in-the-article-element
+---
+
+# --description--
+
+`article` هو عنصر آخر من عناصر HTML5 الجديدة التي تضيف المعنى الدلالي الي الـ markup. `article` هو عنصر تقسيم ويستخدم لتغليف المحتوي القائم بذاته. يعمل الوسم بشكل جيد مع إدخالات المدونة أو مشاركات المنتدى أو المقالات الإخبارية.
+
+تحديد فيما إذا كان المحتوى يستطيع أن يكون مستقلا هو عادة حكم شخصي، ولكن هناك عدة اختبارات بسيطة يمكنك استخدامها. اسأل نفسك إذا كنت قد قمت بإزالة كل السياق المحيط، هل سيظل المحتوى منطقياً؟ وبالمثل بالنسبة للنص، هل سيظل المحتوى صحيحا إذا كان في RSS feed ؟
+
+تذكر أن الناس الذين يستخدمون التقنيات المساعدة يعتمدون على كود مكتوب بطريقه منظمه وذات معني لفهم عملك بشكل أفضل.
+
+**ملاحظة:** عنصر `section` جديد أيضا مع HTML5، ولديه معنى دلالي مختلف قليلا عن `article`. عنصر `article` هو لمحتوى مستقل، و `section` هو لتجميع المحتوى المرتبط بمواضيع محددة. ويمكن استخدامها داخل بعضها البعض حسب الحاجة. على سبيل المثال، إذا كان الكتاب عبارة عن `article`، فإن كل فصل في الكتاب عبارة عن `section`. عندما لا توجد علاقة بين مجموعات المحتوى، عندها استخدم عنصر `div`.
+
+`<div>` - محتوى المجموعات `<section>` - محتوى المجموعات ذات الصلة `<article>` - محتوى المجموعات المستقل القائم بذاته
+
+# --instructions--
+
+استخدم Camper Cat وسوم `article` لتغليف المشاركات على صفحة مدونته، لكنه نسي استخدامها حول المشاركة العلوية. قم بتغيير وسم `div` لاستخدام وسم `article` بدلاً منه.
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على ثلاث وسوم `article`.
+
+```js
+assert($('article').length == 3);
+```
+
+يجب ألا يحتوي الكود الخاص بك علي اي وسوم `div`.
+
+```js
+assert($('div').length == 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h1>Deep Thoughts with Master Camper Cat</h1>
+<main>
+  <div>
+    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
+    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
+  </div>
+
+  <img src="samuraiSwords.jpeg" alt="">
+
+  <article>
+    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
+    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
+  </article>
+
+  <img src="samuraiSwords.jpeg" alt="">
+
+  <article>
+    <h2>Is Chuck Norris a Cat Person?</h2>
+    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
+  </article>
+</main>
+```
+
+# --solutions--
+
+```html
+<h1>Deep Thoughts with Master Camper Cat</h1>
+<main>
+  <article>
+    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
+    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
+  </article>
+
+  <img src="samuraiSwords.jpeg" alt="">
+
+  <article>
+    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
+    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
+  </article>
+
+  <img src="samuraiSwords.jpeg" alt="">
+
+  <article>
+    <h2>Is Chuck Norris a Cat Person?</h2>
+    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
+  </article>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md
new file mode 100644
index 00000000000..dab2077c235
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-accessibility/wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility.md
@@ -0,0 +1,165 @@
+---
+id: 587d778b367417b2b2512aa7
+title: Wrap Radio Buttons in a fieldset Element for Better Accessibility
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cVJVefw'
+forumTopicId: 301030
+dashedName: wrap-radio-buttons-in-a-fieldset-element-for-better-accessibility
+---
+
+# --description--
+
+The next form topic covers the accessibility of radio buttons. Each choice is given a `label` with a `for` attribute tying to the `id` of the corresponding item as covered in the last challenge. Since radio buttons often come in a group where the user must choose one, there's a way to semantically show the choices are part of a set.
+
+The `fieldset` tag surrounds the entire grouping of radio buttons to achieve this. It often uses a `legend` tag to provide a description for the grouping, which screen readers read for each choice in the `fieldset` element.
+
+The `fieldset` wrapper and `legend` tag are not necessary when the choices are self-explanatory, like a gender selection. Using a `label` with the `for` attribute for each radio button is sufficient.
+
+Here's an example:
+
+```html
+<form>
+  <fieldset>
+    <legend>Choose one of these three items:</legend>
+    <input id="one" type="radio" name="items" value="one">
+    <label for="one">Choice One</label><br>
+    <input id="two" type="radio" name="items" value="two">
+    <label for="two">Choice Two</label><br>
+    <input id="three" type="radio" name="items" value="three">
+    <label for="three">Choice Three</label>
+  </fieldset>
+</form>
+```
+
+# --instructions--
+
+Camper Cat wants information about the ninja level of his users when they sign up for his email list. He's added a set of radio buttons and learned from our last lesson to use `label` tags with `for` attributes for each choice. Go Camper Cat! However, his code still needs some help. Change the `div` tag surrounding the radio buttons to a `fieldset` tag, and change the `p` tag inside it to a `legend`.
+
+# --hints--
+
+Your code should have a `fieldset` tag around the radio button set.
+
+```js
+assert($('fieldset').length == 1);
+```
+
+The `fieldset` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/fieldset>/g) &&
+    code.match(/<\/fieldset>/g).length === code.match(/<fieldset>/g).length
+);
+```
+
+Your code should have a `legend` tag around the text asking what level ninja a user is.
+
+```js
+assert($('legend').length == 1);
+```
+
+Your code should not have any `div` tags.
+
+```js
+assert($('div').length == 0);
+```
+
+Your code should no longer have a `p` tag around the text asking what level ninja a user is.
+
+```js
+assert($('p').length == 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <header>
+    <h1>Deep Thoughts with Master Camper Cat</h1>
+  </header>
+  <section>
+    <form>
+      <p>Sign up to receive Camper Cat's blog posts by email here!</p>
+      <label for="email">Email:</label>
+      <input type="text" id="email" name="email">
+
+
+      <!-- Only change code below this line -->
+      <div>
+        <p>What level ninja are you?</p>
+        <input id="newbie" type="radio" name="levels" value="newbie">
+        <label for="newbie">Newbie Kitten</label><br>
+        <input id="intermediate" type="radio" name="levels" value="intermediate">
+        <label for="intermediate">Developing Student</label><br>
+        <input id="master" type="radio" name="levels" value="master">
+        <label for="master">Master</label>
+      </div>
+      <!-- Only change code above this line -->
+
+
+      <input type="submit" name="submit" value="Submit">
+    </form>
+  </section>
+  <article>
+    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
+    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
+  </article>
+  <img src="samuraiSwords.jpeg" alt="">
+  <article>
+    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
+    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
+  </article>
+  <img src="samuraiSwords.jpeg" alt="">
+  <article>
+    <h2>Is Chuck Norris a Cat Person?</h2>
+    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
+  </article>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <header>
+    <h1>Deep Thoughts with Master Camper Cat</h1>
+  </header>
+  <section>
+    <form>
+      <p>Sign up to receive Camper Cat's blog posts by email here!</p>
+      <label for="email">Email:</label>
+      <input type="text" id="email" name="email">
+
+      <fieldset>
+        <legend>What level ninja are you?</legend>
+        <input id="newbie" type="radio" name="levels" value="newbie">
+        <label for="newbie">Newbie Kitten</label><br>
+        <input id="intermediate" type="radio" name="levels" value="intermediate">
+        <label for="intermediate">Developing Student</label><br>
+        <input id="master" type="radio" name="levels" value="master">
+        <label for="master">Master</label>
+      </fieldset>
+
+      <input type="submit" name="submit" value="Submit">
+    </form>
+  </section>
+  <article>
+    <h2>The Garfield Files: Lasagna as Training Fuel?</h2>
+    <p>The internet is littered with varying opinions on nutritional paradigms, from catnip paleo to hairball cleanses. But let's turn our attention to an often overlooked fitness fuel, and examine the protein-carb-NOM trifecta that is lasagna...</p>
+  </article>
+  <img src="samuraiSwords.jpeg" alt="">
+  <article>
+    <h2>Defeating your Foe: the Red Dot is Ours!</h2>
+    <p>Felines the world over have been waging war on the most persistent of foes. This red nemesis combines both cunning stealth and lightning speed. But chin up, fellow fighters, our time for victory may soon be near...</p>
+  </article>
+  <img src="samuraiSwords.jpeg" alt="">
+  <article>
+    <h2>Is Chuck Norris a Cat Person?</h2>
+    <p>Chuck Norris is widely regarded as the premier martial artist on the planet, and it's a complete coincidence that anyone who disagrees with this fact mysteriously disappears soon after. But the real question is, is he a cat person?...</p>
+  </article>
+  <footer>&copy; 2018 Camper Cat</footer>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md
new file mode 100644
index 00000000000..7879b89c2cd
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/add-a-box-shadow-to-a-card-like-element.md
@@ -0,0 +1,154 @@
+---
+id: 587d781b367417b2b2512abe
+title: Add a box-shadow to a Card-like Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cvVZdUd'
+forumTopicId: 301031
+dashedName: add-a-box-shadow-to-a-card-like-element
+---
+
+# --description--
+
+The `box-shadow` property applies one or more shadows to an element.
+
+The `box-shadow` property takes the following values, in order:
+
+<ul>
+  <li><code>offset-x</code> (how far to push the shadow horizontally from the element)</li>
+  <li><code>offset-y</code> (how far to push the shadow vertically from the element)</li>
+  <li><code>blur-radius</code></li>
+  <li><code>spread-radius</code></li>
+  <li><code>color</code></li>
+</ul>
+
+The `blur-radius` and `spread-radius` values are optional.
+
+Multiple box-shadows can be created by using commas to separate properties of each `box-shadow` element.
+
+Here's an example of the CSS to create multiple shadows with some blur, at mostly-transparent black colors:
+
+```css
+box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+```
+
+# --instructions--
+
+The element now has an id of `thumbnail`. With this selector, use the example CSS values above to place a `box-shadow` on the card.
+
+# --hints--
+
+Your code should add a `box-shadow` property for the `thumbnail` id.
+
+```js
+assert(code.match(/#thumbnail\s*?{\s*?box-shadow/g));
+```
+
+You should use the given CSS for the `box-shadow` value.
+
+```js
+assert(
+  code.match(
+    /box-shadow:\s*?0\s+?10px\s+?20px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.19\)\s*?,\s*?0\s+?6px\s+?6px\s+?rgba\(\s*?0\s*?,\s*?0\s*?,\s*?0\s*?,\s*?0?\.23\)/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    background-color: rgba(45, 45, 45, 0.1);
+    padding: 10px;
+    font-size: 27px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+
+
+
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard" id="thumbnail">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Alphabet</h4>
+      <hr>
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    background-color: rgba(45, 45, 45, 0.1);
+    padding: 10px;
+    font-size: 27px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  #thumbnail {
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard" id="thumbnail">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Alphabet</h4>
+      <hr>
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md
new file mode 100644
index 00000000000..5be456e6e6c
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-background-color-property-of-text.md
@@ -0,0 +1,146 @@
+---
+id: 587d781b367417b2b2512abc
+title: Adjust the background-color Property of Text
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cEDqwA6'
+forumTopicId: 301032
+dashedName: adjust-the-background-color-property-of-text
+---
+
+# --description--
+
+Instead of adjusting your overall background or the color of the text to make the foreground easily readable, you can add a `background-color` to the element holding the text you want to emphasize. This challenge uses `rgba()` instead of `hex` codes or normal `rgb()`.
+
+<blockquote>rgba stands for:<br>  r = red<br>  g = green<br>  b = blue<br>  a = alpha/level of opacity</blockquote>
+
+The RGB values can range from 0 to 255. The alpha value can range from 1, which is fully opaque or a solid color, to 0, which is fully transparent or clear. `rgba()` is great to use in this case, as it allows you to adjust the opacity. This means you don't have to completely block out the background.
+
+You'll use `background-color: rgba(45, 45, 45, 0.1)` for this challenge. It produces a dark gray color that is nearly transparent given the low opacity value of 0.1.
+
+# --instructions--
+
+To make the text stand out more, adjust the `background-color` of the `h4` element to the given `rgba()` value.
+
+Also for the `h4`, remove the `height` property and add `padding` of 10px.
+
+# --hints--
+
+Your code should add a `background-color` property to the `h4` element set to `rgba(45, 45, 45, 0.1)`.
+
+```js
+assert(
+  /(background-color|background):rgba\(45,45,45,0?\.1\)(;?}|;)/gi.test(
+    code.replace(/\s/g, '')
+  )
+);
+```
+
+Your code should add a `padding` property to the `h4` element and set it to 10 pixels.
+
+```js
+assert(
+  $('h4').css('padding-top') == '10px' &&
+    $('h4').css('padding-right') == '10px' &&
+    $('h4').css('padding-bottom') == '10px' &&
+    $('h4').css('padding-left') == '10px'
+);
+```
+
+The `height` property on the `h4` element should be removed.
+
+```js
+assert(!($('h4').css('height') == '25px'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    height: 25px;
+
+
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Alphabet</h4>
+      <hr>
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    padding: 10px;
+    background-color: rgba(45, 45, 45, 0.1);
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Alphabet</h4>
+      <hr>
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md
new file mode 100644
index 00000000000..430655f120c
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-color-of-various-elements-to-complementary-colors.md
@@ -0,0 +1,130 @@
+---
+id: 587d78a4367417b2b2512ad3
+title: Adjust the Color of Various Elements to Complementary Colors
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cWmPpud'
+forumTopicId: 301033
+dashedName: adjust-the-color-of-various-elements-to-complementary-colors
+---
+
+# --description--
+
+The Complementary Colors challenge showed that opposite colors on the color wheel can make each other appear more vibrant when placed side-by-side. However, the strong visual contrast can be jarring if it's overused on a website, and can sometimes make text harder to read if it's placed on a complementary-colored background. In practice, one of the colors is usually dominant and the complement is used to bring visual attention to certain content on the page.
+
+# --instructions--
+
+This page will use a shade of teal (`#09A7A1`) as the dominant color, and its orange (`#FF790E`) complement to visually highlight the sign-up buttons. Change the `background-color` of both the `header` and `footer` from black to the teal color. Then change the `h2` text `color` to teal as well. Finally, change the `background-color` of the `button` to the orange color.
+
+# --hints--
+
+The `header` element should have a `background-color` of #09A7A1.
+
+```js
+assert($('header').css('background-color') == 'rgb(9, 167, 161)');
+```
+
+The `footer` element should have a `background-color` of #09A7A1.
+
+```js
+assert($('footer').css('background-color') == 'rgb(9, 167, 161)');
+```
+
+The `h2` element should have a `color` of #09A7A1.
+
+```js
+assert($('h2').css('color') == 'rgb(9, 167, 161)');
+```
+
+The `button` element should have a `background-color` of #FF790E.
+
+```js
+assert($('button').css('background-color') == 'rgb(255, 121, 14)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    background-color: white;
+  }
+  header {
+    background-color: black;
+    color: white;
+    padding: 0.25em;
+  }
+  h2 {
+    color: black;
+  }
+  button {
+    background-color: white;
+  }
+  footer {
+    background-color: black;
+    color: white;
+    padding: 0.5em;
+  }
+</style>
+<header>
+  <h1>Cooking with FCC!</h1>
+</header>
+<main>
+  <article>
+    <h2>Machine Learning in the Kitchen</h2>
+    <p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
+    <button>Sign Up</button>
+  </article>
+  <article>
+    <h2>Bisection Vegetable Chopping</h2>
+    <p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
+    <button>Sign Up</button>
+  </article>
+</main>
+<br>
+<footer>&copy; 2018 FCC Kitchen</footer>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    background-color: white;
+  }
+  header {
+    background-color: #09A7A1;
+    color: white;
+    padding: 0.25em;
+  }
+  h2 {
+    color: #09A7A1;
+  }
+  button {
+    background-color: #FF790E;
+  }
+  footer {
+    background-color: #09A7A1;
+    color: white;
+    padding: 0.5em;
+  }
+</style>
+<header>
+  <h1>Cooking with FCC!</h1>
+</header>
+<main>
+  <article>
+    <h2>Machine Learning in the Kitchen</h2>
+    <p>Join this two day workshop that walks through how to implement cutting-edge snack-getting algorithms with a command line interface. Coding usually involves writing exact instructions, but sometimes you need your computer to execute flexible commands, like <code>fetch Pringles</code>.</p>
+    <button>Sign Up</button>
+  </article>
+  <article>
+    <h2>Bisection Vegetable Chopping</h2>
+    <p>This week-long retreat will level-up your coding ninja skills to actual ninja skills. No longer is the humble bisection search limited to sorted arrays or coding interview questions, applying its concepts in the kitchen will have you chopping carrots in O(log n) time before you know it.</p>
+    <button>Sign Up</button>
+  </article>
+</main>
+<br>
+<footer>&copy; 2018 FCC Kitchen</footer>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md
new file mode 100644
index 00000000000..f89a363afb4
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-height-of-an-element-using-the-height-property.md
@@ -0,0 +1,118 @@
+---
+id: 587d7791367417b2b2512ab5
+title: Adjust the Height of an Element Using the height Property
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cEDaDTN'
+forumTopicId: 301034
+dashedName: adjust-the-height-of-an-element-using-the-height-property
+---
+
+# --description--
+
+You can specify the height of an element using the `height` property in CSS, similar to the `width` property. Here's an example that changes the height of an image to 20px:
+
+```css
+img {
+  height: 20px;
+}
+```
+
+# --instructions--
+
+Add a `height` property to the `h4` tag and set it to 25px.
+
+**Note:** You may need to be at 100% zoom to pass the test on this challenge.
+
+# --hints--
+
+Your code should change the `h4` `height` property to a value of 25 pixels.
+
+```js
+assert(
+  Math.round(document.querySelector('h4').getBoundingClientRect().height) ===
+    25 &&
+    /h4{\S*height:25px(;\S*}|})/.test($('style').text().replace(/\s/g, ''))
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    margin-right: 20px;
+    text-align: left;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Google</h4>
+      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    height: 25px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    margin-right: 20px;
+    text-align: left;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Google</h4>
+      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md
new file mode 100644
index 00000000000..308491804b4
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-hover-state-of-an-anchor-tag.md
@@ -0,0 +1,72 @@
+---
+id: 587d781d367417b2b2512ac8
+title: Adjust the Hover State of an Anchor Tag
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cakRGcm'
+forumTopicId: 301035
+dashedName: adjust-the-hover-state-of-an-anchor-tag
+---
+
+# --description--
+
+This challenge will touch on the usage of pseudo-classes. A pseudo-class is a keyword that can be added to selectors, in order to select a specific state of the element.
+
+For example, the styling of an anchor tag can be changed for its hover state using the `:hover` pseudo-class selector. Here's the CSS to change the `color` of the anchor tag to red during its hover state:
+
+```css
+a:hover {
+  color: red;
+}
+```
+
+# --instructions--
+
+The code editor has a CSS rule to style all `a` tags black. Add a rule so that when the user hovers over the `a` tag, the `color` is blue.
+
+# --hints--
+
+The anchor tag `color` should remain black, only add CSS rules for the `:hover` state.
+
+```js
+assert($('a').css('color') == 'rgb(0, 0, 0)');
+```
+
+The anchor tag should have a `color` of blue on hover.
+
+```js
+assert(
+  code.match(
+    /a:hover\s*?{\s*?color:\s*?(blue|rgba\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?,\s*?1\s*?\)|#00F|rgb\(\s*?0\s*?,\s*?0\s*?,\s*?255\s*?\))\s*?;\s*?}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  a {
+    color: #000;
+  }
+
+
+
+</style>
+<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
+```
+
+# --solutions--
+
+```html
+<style>
+  a {
+    color: #000;
+  }
+  a:hover {
+    color: rgba(0,0,255,1);
+  }
+</style>
+<a href="https://freecatphotoapp.com/" target="_blank">CatPhotoApp</a>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md
new file mode 100644
index 00000000000..2d7852df615
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-hue-of-a-color.md
@@ -0,0 +1,129 @@
+---
+id: 587d78a4367417b2b2512ad4
+title: Adjust the Hue of a Color
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cPp38TZ'
+forumTopicId: 301036
+dashedName: adjust-the-hue-of-a-color
+---
+
+# --description--
+
+Colors have several characteristics including hue, saturation, and lightness. CSS3 introduced the `hsl()` function as an alternative way to pick a color by directly stating these characteristics.
+
+**Hue** is what people generally think of as 'color'. If you picture a spectrum of colors starting with red on the left, moving through green in the middle, and blue on right, the hue is where a color fits along this line. In `hsl()`, hue uses a color wheel concept instead of the spectrum, where the angle of the color on the circle is given as a value between 0 and 360.
+
+**Saturation** is the amount of gray in a color. A fully saturated color has no gray in it, and a minimally saturated color is almost completely gray. This is given as a percentage with 100% being fully saturated.
+
+**Lightness** is the amount of white or black in a color. A percentage is given ranging from 0% (black) to 100% (white), where 50% is the normal color.
+
+Here are a few examples of using `hsl()` with fully-saturated, normal lightness colors:
+
+<table class='table table-striped'><thead><tr><th>Color</th><th>HSL</th></tr></thead><tbody><tr><td>red</td><td>hsl(0, 100%, 50%)</td></tr><tr><td>yellow</td><td>hsl(60, 100%, 50%)</td></tr><tr><td>green</td><td>hsl(120, 100%, 50%)</td></tr><tr><td>cyan</td><td>hsl(180, 100%, 50%)</td></tr><tr><td>blue</td><td>hsl(240, 100%, 50%)</td></tr><tr><td>magenta</td><td>hsl(300, 100%, 50%)</td></tr></tbody></table>
+
+# --instructions--
+
+Change the `background-color` of each `div` element based on the class names (`green`, `cyan`, or `blue`) using `hsl()`. All three should have full saturation and normal lightness.
+
+# --hints--
+
+Your code should use the `hsl()` function to declare the color green.
+
+```js
+assert(code.match(/\.green\s*?{\s*?background-color\s*:\s*?hsl/gi));
+```
+
+Your code should use the `hsl()` function to declare the color cyan.
+
+```js
+assert(code.match(/\.cyan\s*?{\s*?background-color\s*:\s*?hsl/gi));
+```
+
+Your code should use the `hsl()` function to declare the color blue.
+
+```js
+assert(code.match(/\.blue\s*?{\s*?background-color\s*:\s*?hsl/gi));
+```
+
+The `div` element with class `green` should have a `background-color` of green.
+
+```js
+assert($('.green').css('background-color') == 'rgb(0, 255, 0)');
+```
+
+The `div` element with class `cyan` should have a `background-color` of cyan.
+
+```js
+assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
+```
+
+The `div` element with class `blue` should have a `background-color` of blue.
+
+```js
+assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    background-color: #FFFFFF;
+  }
+
+  .green {
+    background-color: #000000;
+  }
+
+  .cyan {
+    background-color: #000000;
+  }
+
+  .blue {
+    background-color: #000000;
+  }
+
+  div {
+    display: inline-block;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+
+<div class="green"></div>
+<div class="cyan"></div>
+<div class="blue"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    background-color: #FFFFFF;
+  }
+
+  .green {
+    background-color: hsl(120, 100%, 50%);
+  }
+
+  .cyan {
+    background-color:   hsl(180, 100%, 50%);
+  }
+
+  .blue {
+    background-color: hsl(240, 100%, 50%);
+  }
+
+  div {
+    display: inline-block;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<div class="green"></div>
+<div class="cyan"></div>
+<div class="blue"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-heading-element-versus-a-paragraph-element.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-heading-element-versus-a-paragraph-element.md
new file mode 100644
index 00000000000..58a206ad427
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-size-of-a-heading-element-versus-a-paragraph-element.md
@@ -0,0 +1,119 @@
+---
+id: 587d781b367417b2b2512abd
+title: Adjust the Size of a Heading Element Versus a Paragraph Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c3bRPTz'
+forumTopicId: 301037
+dashedName: adjust-the-size-of-a-heading-element-versus-a-paragraph-element
+---
+
+# --description--
+
+The font size of heading elements (`h1` through `h6`) should generally be larger than the font size of paragraph tags. This makes it easier for the user to visually understand the layout and level of importance of everything on the page. You use the `font-size` property to adjust the size of the text in an element.
+
+# --instructions--
+
+To make the heading significantly larger than the paragraph, change the `font-size` of the `h4` element to 27 pixels.
+
+# --hints--
+
+Your code should add a `font-size` property to the `h4` element set to 27 pixels.
+
+```js
+assert($('h4').css('font-size') == '27px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    background-color: rgba(45, 45, 45, 0.1);
+    padding: 10px;
+
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Alphabet</h4>
+      <hr>
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    background-color: rgba(45, 45, 45, 0.1);
+    padding: 10px;
+    font-size: 27px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Alphabet</h4>
+      <hr>
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md
new file mode 100644
index 00000000000..fdd9a21bfc4
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-tone-of-a-color.md
@@ -0,0 +1,121 @@
+---
+id: 587d78a4367417b2b2512ad5
+title: Adjust the Tone of a Color
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cEDJvT7'
+forumTopicId: 301038
+dashedName: adjust-the-tone-of-a-color
+---
+
+# --description--
+
+The `hsl()` option in CSS also makes it easy to adjust the tone of a color. Mixing white with a pure hue creates a tint of that color, and adding black will make a shade. Alternatively, a tone is produced by adding gray or by both tinting and shading. Recall that the 's' and 'l' of `hsl()` stand for saturation and lightness, respectively. The saturation percent changes the amount of gray and the lightness percent determines how much white or black is in the color. This is useful when you have a base hue you like, but need different variations of it.
+
+# --instructions--
+
+All elements have a default `background-color` of `transparent`. Our `nav` element currently appears to have a `cyan` background, because the element behind it has a `background-color` set to `cyan`. Add a `background-color` to the `nav` element so it uses the same `cyan` hue, but has `80%` saturation and `25%` lightness values to change its tone and shade.
+
+# --hints--
+
+The `nav` element should have a `background-color` of the adjusted cyan tone using the `hsl()` property.
+
+```js
+// Computed style of hsl(180, 80%, 25%) results in rgb(13,115,115)
+assert.equal(
+  new __helpers.CSSHelp(document).getStyle('nav').getPropVal('background-color', true), 
+  'rgb(13,115,115)'
+)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  header {
+    background-color: hsl(180, 90%, 35%);
+    color: #FFFFFF;
+  }
+
+  nav {
+
+  }
+
+  h1 {
+    text-indent: 10px;
+    padding-top: 10px;
+  }
+
+  nav ul {
+    margin: 0px;
+    padding: 5px 0px 5px 30px;
+  }
+
+  nav li {
+    display: inline;
+    margin-right: 20px;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+</style>
+
+<header>
+  <h1>Cooking with FCC!</h1>
+  <nav>
+    <ul>
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Classes</a></li>
+      <li><a href="#">Contact</a></li>
+    </ul>
+  </nav>
+</header>
+```
+
+# --solutions--
+
+```html
+<style>
+  header {
+    background-color: hsl(180, 90%, 35%);
+    color: #FFFFFF;
+  }
+
+  nav {
+    background-color: hsl(180, 80%, 25%);
+  }
+
+  h1 {
+    text-indent: 10px;
+    padding-top: 10px;
+  }
+
+  nav ul {
+    margin: 0px;
+    padding: 5px 0px 5px 30px;
+  }
+
+  nav li {
+    display: inline;
+    margin-right: 20px;
+  }
+
+  a {
+    text-decoration: none;
+    color: inherit;
+  }
+</style>
+<header>
+  <h1>Cooking with FCC!</h1>
+  <nav>
+    <ul>
+      <li><a href="#">Home</a></li>
+      <li><a href="#">Classes</a></li>
+      <li><a href="#">Contact</a></li>
+    </ul>
+  </nav>
+</header>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md
new file mode 100644
index 00000000000..7ed75a1ea50
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/adjust-the-width-of-an-element-using-the-width-property.md
@@ -0,0 +1,115 @@
+---
+id: 587d7791367417b2b2512ab4
+title: Adjust the Width of an Element Using the width Property
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cvVLPtN'
+forumTopicId: 301039
+dashedName: adjust-the-width-of-an-element-using-the-width-property
+---
+
+# --description--
+
+You can specify the width of an element using the `width` property in CSS. Values can be given in relative length units (such as `em`), absolute length units (such as `px`), or as a percentage of its containing parent element. Here's an example that changes the width of an image to 220px:
+
+```css
+img {
+  width: 220px;
+}
+```
+
+# --instructions--
+
+Add a `width` property to the entire card and set it to an absolute value of 245px. Use the `fullCard` class to select the element.
+
+# --hints--
+
+Your code should change the `width` property of the card to 245 pixels by using the `fullCard` class selector.
+
+```js
+const fullCard = code.match(/\.fullCard\s*{[\s\S]+?[^}]}/g);
+assert(
+  fullCard &&
+    /width\s*:\s*245px\s*(;|})/gi.test(fullCard[0]) &&
+    $('.fullCard').css('maxWidth') === 'none'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    margin-right: 20px;
+    text-align: left;
+  }
+  .fullCard {
+
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Google</h4>
+      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    margin-right: 20px;
+    text-align: left;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Google</h4>
+      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md
new file mode 100644
index 00000000000..da2020f4d5b
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/animate-elements-at-variable-rates.md
@@ -0,0 +1,141 @@
+---
+id: 587d78a8367417b2b2512ae5
+title: Animate Elements at Variable Rates
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cZ89WA4'
+forumTopicId: 301040
+dashedName: animate-elements-at-variable-rates
+---
+
+# --description--
+
+There are a variety of ways to alter the animation rates of similarly animated elements. So far, this has been achieved by applying an `animation-iteration-count` property and setting `@keyframes` rules.
+
+To illustrate, the animation on the right consists of two stars that each decrease in size and opacity at the 20% mark in the `@keyframes` rule, which creates the twinkle animation. You can change the `@keyframes` rule for one of the elements so the stars twinkle at different rates.
+
+# --instructions--
+
+Alter the animation rate for the element with the class name of `star-1` by changing its `@keyframes` rule to 50%.
+
+# --hints--
+
+The `@keyframes` rule for the `star-1` class should be 50%.
+
+```js
+assert(code.match(/twinkle-1\s*?{\s*?50%/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .stars {
+    background-color: white;
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    animation-iteration-count: infinite;
+  }
+
+  .star-1 {
+    margin-top: 15%;
+    margin-left: 60%;
+    animation-name: twinkle-1;
+    animation-duration: 1s;
+  }
+
+  .star-2 {
+    margin-top: 25%;
+    margin-left: 25%;
+    animation-name: twinkle-2;
+    animation-duration: 1s;
+  }
+
+  @keyframes twinkle-1 {
+    20% {
+      transform: scale(0.5);
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes twinkle-2 {
+    20% {
+      transform: scale(0.5);
+      opacity: 0.5;
+    }
+  }
+
+  #back {
+    position: fixed;
+    padding: 0;
+    margin: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
+  }
+</style>
+
+<div id="back"></div>
+<div class="star-1 stars"></div>
+<div class="star-2 stars"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .stars {
+    background-color: white;
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    animation-iteration-count: infinite;
+  }
+
+  .star-1 {
+    margin-top: 15%;
+    margin-left: 60%;
+    animation-name: twinkle-1;
+    animation-duration: 1s;
+  }
+
+  .star-2 {
+    margin-top: 25%;
+    margin-left: 25%;
+    animation-name: twinkle-2;
+    animation-duration: 1s;
+  }
+
+  @keyframes twinkle-1 {
+    50% {
+      transform: scale(0.5);
+      opacity: 0.5;
+    }
+  }
+
+  @keyframes twinkle-2 {
+    20% {
+      transform: scale(0.5);
+      opacity: 0.5;
+    }
+  }
+
+  #back {
+    position: fixed;
+    padding: 0;
+    margin: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
+  }
+</style>
+<div id="back"></div>
+<div class="star-1 stars"></div>
+<div class="star-2 stars"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md
new file mode 100644
index 00000000000..f3280fddbc7
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/animate-elements-continually-using-an-infinite-animation-count.md
@@ -0,0 +1,107 @@
+---
+id: 587d78a8367417b2b2512ae3
+title: Animate Elements Continually Using an Infinite Animation Count
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cVJDVfq'
+forumTopicId: 301041
+dashedName: animate-elements-continually-using-an-infinite-animation-count
+---
+
+# --description--
+
+The previous challenges covered how to use some of the animation properties and the `@keyframes` rule. Another animation property is the `animation-iteration-count`, which allows you to control how many times you would like to loop through the animation. Here's an example:
+
+```css
+animation-iteration-count: 3;
+```
+
+In this case the animation will stop after running 3 times, but it's possible to make the animation run continuously by setting that value to `infinite`.
+
+# --instructions--
+
+To keep the ball bouncing on the right on a continuous loop, change the `animation-iteration-count` property to `infinite`.
+
+# --hints--
+
+The `animation-iteration-count` property should have a value of `infinite`.
+
+```js
+assert($('#ball').css('animation-iteration-count') == 'infinite');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+
+  #ball {
+    width: 100px;
+    height: 100px;
+    margin: 50px auto;
+    position: relative;
+    border-radius: 50%;
+    background: linear-gradient(
+      35deg,
+      #ccffff,
+      #ffcccc
+    );
+    animation-name: bounce;
+    animation-duration: 1s;
+    animation-iteration-count: 3;
+  }
+
+  @keyframes bounce{
+    0% {
+      top: 0px;
+    }
+    50% {
+      top: 249px;
+      width: 130px;
+      height: 70px;
+    }
+    100% {
+      top: 0px;
+    }
+  }
+</style>
+<div id="ball"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  #ball {
+    width: 100px;
+    height: 100px;
+    margin: 50px auto;
+    position: relative;
+    border-radius: 50%;
+    background: linear-gradient(
+      35deg,
+      #ccffff,
+      #ffcccc
+    );
+    animation-name: bounce;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
+
+  @keyframes bounce{
+    0% {
+      top: 0px;
+    }
+    50% {
+      top: 249px;
+      width: 130px;
+      height: 70px;
+    }
+    100% {
+      top: 0px;
+    }
+  }
+</style>
+<div id="ball"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md
new file mode 100644
index 00000000000..7baaef275c3
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/animate-multiple-elements-at-variable-rates.md
@@ -0,0 +1,155 @@
+---
+id: 587d78a8367417b2b2512ae6
+title: Animate Multiple Elements at Variable Rates
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cnpWZc9'
+forumTopicId: 301042
+dashedName: animate-multiple-elements-at-variable-rates
+---
+
+# --description--
+
+In the previous challenge, you changed the animation rates for two similarly animated elements by altering their `@keyframes` rules. You can achieve the same goal by manipulating the `animation-duration` of multiple elements.
+
+In the animation running in the code editor, there are three stars in the sky that twinkle at the same rate on a continuous loop. To make them twinkle at different rates, you can set the `animation-duration` property to different values for each element.
+
+# --instructions--
+
+Set the `animation-duration` of the elements with the classes `star-1`, `star-2`, and `star-3` to 1s, 0.9s, and 1.1s, respectively.
+
+# --hints--
+
+The `animation-duration` property for the star with class `star-1` should remain at 1s.
+
+```js
+assert($('.star-1').css('animation-duration') == '1s');
+```
+
+The `animation-duration` property for the star with class `star-2` should be 0.9s.
+
+```js
+assert($('.star-2').css('animation-duration') == '0.9s');
+```
+
+The `animation-duration` property for the star with class `star-3` should be 1.1s.
+
+```js
+assert($('.star-3').css('animation-duration') == '1.1s');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .stars {
+    background-color: white;
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    animation-iteration-count: infinite;
+  }
+
+  .star-1 {
+    margin-top: 15%;
+    margin-left: 60%;
+    animation-duration: 1s;
+    animation-name: twinkle;
+  }
+
+  .star-2 {
+    margin-top: 25%;
+    margin-left: 25%;
+    animation-duration: 1s;
+    animation-name: twinkle;
+  }
+
+  .star-3 {
+    margin-top: 10%;
+    margin-left: 50%;
+    animation-duration: 1s;
+    animation-name: twinkle;
+  }
+
+  @keyframes twinkle {
+    20% {
+      transform: scale(0.5);
+      opacity: 0.5;
+    }
+  }
+
+  #back {
+    position: fixed;
+    padding: 0;
+    margin: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
+  }
+</style>
+
+<div id="back"></div>
+<div class="star-1 stars"></div>
+<div class="star-2 stars"></div>
+<div class="star-3 stars"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .stars {
+    background-color: white;
+    height: 30px;
+    width: 30px;
+    border-radius: 50%;
+    animation-iteration-count: infinite;
+  }
+
+  .star-1 {
+    margin-top: 15%;
+    margin-left: 60%;
+    animation-duration: 1s;
+    animation-name: twinkle;
+  }
+
+  .star-2 {
+    margin-top: 25%;
+    margin-left: 25%;
+    animation-duration: 0.9s;
+    animation-name: twinkle;
+  }
+
+  .star-3 {
+    margin-top: 10%;
+    margin-left: 50%;
+    animation-duration: 1.1s;
+    animation-name: twinkle;
+  }
+
+  @keyframes twinkle {
+    20% {
+      transform: scale(0.5);
+      opacity: 0.5;
+    }
+  }
+
+  #back {
+    position: fixed;
+    padding: 0;
+    margin: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(black, #000099, #66c2ff, #ffcccc, #ffeee6);
+  }
+</style>
+<div id="back"></div>
+<div class="star-1 stars"></div>
+<div class="star-2 stars"></div>
+<div class="star-3 stars"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md
new file mode 100644
index 00000000000..c4ec2289621
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/center-an-element-horizontally-using-the-margin-property.md
@@ -0,0 +1,56 @@
+---
+id: 587d78a3367417b2b2512ad0
+title: Center an Element Horizontally Using the margin Property
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cyLJqU4'
+forumTopicId: 301043
+dashedName: center-an-element-horizontally-using-the-margin-property
+---
+
+# --description--
+
+Another positioning technique is to center a block element horizontally. One way to do this is to set its `margin` to a value of auto.
+
+This method works for images, too. Images are inline elements by default, but can be changed to block elements when you set the `display` property to `block`.
+
+# --instructions--
+
+Center the `div` on the page by adding a `margin` property with a value of `auto`.
+
+# --hints--
+
+The `div` should have a `margin` set to `auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('div')?.margin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  div {
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+
+  }
+</style>
+<div></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  div {
+    background-color: blue;
+    height: 100px;
+    width: 100px;
+    margin: auto;
+  }
+</style>
+<div></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md
new file mode 100644
index 00000000000..91d8545abd4
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/change-an-elements-relative-position.md
@@ -0,0 +1,77 @@
+---
+id: 587d781e367417b2b2512ac9
+title: Change an Element's Relative Position
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/czVmMtZ'
+forumTopicId: 301044
+dashedName: change-an-elements-relative-position
+---
+
+# --description--
+
+CSS treats each HTML element as its own box, which is usually referred to as the <dfn>CSS Box Model</dfn>. Block-level items automatically start on a new line (think headings, paragraphs, and divs) while inline items sit within surrounding content (like images or spans). The default layout of elements in this way is called the <dfn>normal flow</dfn> of a document, but CSS offers the position property to override it.
+
+When the position of an element is set to `relative`, it allows you to specify how CSS should move it *relative* to its current position in the normal flow of the page. It pairs with the CSS offset properties of `left` or `right`, and `top` or `bottom`. These say how many pixels, percentages, or ems to move the item *away* from where it is normally positioned. The following example moves the paragraph 10 pixels away from the bottom:
+
+```css
+p {
+  position: relative;
+  bottom: 10px;
+}
+```
+
+Changing an element's position to relative does not remove it from the normal flow - other elements around it still behave as if that item were in its default position.
+
+**Note:** Positioning gives you a lot of flexibility and power over the visual layout of a page. It's good to remember that no matter the position of elements, the underlying HTML markup should be organized and make sense when read from top to bottom. This is how users with visual impairments (who rely on assistive devices like screen readers) access your content.
+
+# --instructions--
+
+Change the `position` of the `h2` to `relative`, and use a CSS offset to move it 15 pixels away from the `top` of where it sits in the normal flow. Notice there is no impact on the positions of the surrounding h1 and p elements.
+
+# --hints--
+
+The `h2` element should have a `position` property set to `relative`.
+
+```js
+assert($('h2').css('position') == 'relative');
+```
+
+Your code should use a CSS offset to relatively position the `h2` 15px away from the `top` of where it normally sits.
+
+```js
+assert($('h2').css('top') == '15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h2 {
+
+
+  }
+</style>
+<body>
+  <h1>On Being Well-Positioned</h1>
+  <h2>Move me!</h2>
+  <p>I still think the h2 is where it normally sits.</p>
+</body>
+```
+
+# --solutions--
+
+```html
+<style>
+  h2 {
+    position: relative;
+    top: 15px;
+  }
+</style>
+<body>
+  <h1>On Being Well-Positioned</h1>
+  <h2>Move me!</h2>
+  <p>I still think the h2 is where it normally sits.</p>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md
new file mode 100644
index 00000000000..f4bc236532d
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/change-animation-timing-with-keywords.md
@@ -0,0 +1,127 @@
+---
+id: 587d78a8367417b2b2512ae7
+title: Change Animation Timing with Keywords
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cJKvwCM'
+forumTopicId: 301045
+dashedName: change-animation-timing-with-keywords
+---
+
+# --description--
+
+In CSS animations, the `animation-timing-function` property controls how quickly an animated element changes over the duration of the animation. If the animation is a car moving from point A to point B in a given time (your `animation-duration`), the `animation-timing-function` says how the car accelerates and decelerates over the course of the drive.
+
+There are a number of predefined keywords available for popular options. For example, the default value is `ease`, which starts slow, speeds up in the middle, and then slows down again in the end. Other options include `ease-out`, which is quick in the beginning then slows down, `ease-in`, which is slow in the beginning, then speeds up at the end, or `linear`, which applies a constant animation speed throughout.
+
+# --instructions--
+
+For the elements with id of `ball1` and `ball2`, add an `animation-timing-function` property to each, and set `#ball1` to `linear`, and `#ball2` to `ease-out`. Notice the difference between how the elements move during the animation but end together, since they share the same `animation-duration` of 2 seconds.
+
+# --hints--
+
+The value of the `animation-timing-function` property for the element with the id `ball1` should be `linear`.
+
+```js
+const ball1Animation = __helpers.removeWhiteSpace(
+  $('#ball1').css('animation-timing-function')
+);
+assert(ball1Animation == 'linear' || ball1Animation == 'cubic-bezier(0,0,1,1)');
+```
+
+The value of the `animation-timing-function` property for the element with the id `ball2` should be `ease-out`.
+
+```js
+const ball2Animation = __helpers.removeWhiteSpace(
+  $('#ball2').css('animation-timing-function')
+);
+assert(
+  ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+
+  .balls {
+    border-radius: 50%;
+    background: linear-gradient(
+      35deg,
+      #ccffff,
+      #ffcccc
+    );
+    position: fixed;
+    width: 50px;
+    height: 50px;
+    margin-top: 50px;
+    animation-name: bounce;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+  }
+  #ball1 {
+    left:27%;
+
+  }
+  #ball2 {
+    left:56%;
+
+  }
+
+  @keyframes bounce {
+    0% {
+      top: 0px;
+    }
+    100% {
+      top: 249px;
+    }
+  }
+
+</style>
+
+<div class="balls" id="ball1"></div>
+<div class="balls" id="ball2"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .balls {
+    border-radius: 50%;
+    background: linear-gradient(
+      35deg,
+      #ccffff,
+      #ffcccc
+    );
+    position: fixed;
+    width: 50px;
+    height: 50px;
+    margin-top: 50px;
+    animation-name: bounce;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+  }
+  #ball1 {
+    left:27%;
+    animation-timing-function: linear;
+  }
+  #ball2 {
+    left:56%;
+    animation-timing-function: ease-out;
+  }
+
+  @keyframes bounce {
+    0% {
+      top: 0px;
+    }
+    100% {
+      top: 249px;
+    }
+  }
+</style>
+<div class="balls" id="ball1"></div>
+<div class="balls" id="ball2"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md
new file mode 100644
index 00000000000..1cc3f610376
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/change-the-position-of-overlapping-elements-with-the-z-index-property.md
@@ -0,0 +1,81 @@
+---
+id: 587d78a3367417b2b2512acf
+title: Change the Position of Overlapping Elements with the z-index Property
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cM94aHk'
+forumTopicId: 301046
+dashedName: change-the-position-of-overlapping-elements-with-the-z-index-property
+---
+
+# --description--
+
+When elements are positioned to overlap (i.e. using `position: absolute | relative | fixed | sticky`), the element coming later in the HTML markup will, by default, appear on the top of the other elements. However, the `z-index` property can specify the order of how elements are stacked on top of one another. It must be an integer (i.e. a whole number and not a decimal), and higher values for the `z-index` property of an element move it higher in the stack than those with lower values.
+
+# --instructions--
+
+Add a `z-index` property to the element with the class name of `first` (the red rectangle) and set it to a value of 2 so it covers the other element (blue rectangle).
+
+# --hints--
+
+The element with class `first` should have a `z-index` value of 2.
+
+```js
+assert($('.first').css('z-index') == '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  div {
+    width: 60%;
+    height: 200px;
+    margin-top: 20px;
+  }
+
+  .first {
+    background-color: red;
+    position: absolute;
+
+  }
+  .second {
+    background-color: blue;
+    position: absolute;
+    left: 40px;
+    top: 50px;
+    z-index: 1;
+  }
+</style>
+
+<div class="first"></div>
+<div class="second"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  div {
+    width: 60%;
+    height: 200px;
+    margin-top: 20px;
+  }
+
+  .first {
+    background-color: red;
+    position: absolute;
+    z-index: 2;
+  }
+  .second {
+    background-color: blue;
+    position: absolute;
+    left: 40px;
+    top: 50px;
+    z-index: 1;
+  }
+</style>
+<div class="first"></div>
+<div class="second"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md
new file mode 100644
index 00000000000..35787cfba38
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-gradual-css-linear-gradient.md
@@ -0,0 +1,76 @@
+---
+id: 587d78a5367417b2b2512ad6
+title: Create a Gradual CSS Linear Gradient
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cg4dpt9'
+forumTopicId: 301047
+dashedName: create-a-gradual-css-linear-gradient
+---
+
+# --description--
+
+Applying a color on HTML elements is not limited to one flat hue. CSS provides the ability to use color transitions, otherwise known as gradients, on elements. This is accessed through the `background` property's `linear-gradient()` function. Here is the general syntax:
+
+```css
+background: linear-gradient(gradient_direction, color 1, color 2, color 3, ...);
+```
+
+The first argument specifies the direction from which color transition starts - it can be stated as a degree, where `90deg` makes a horizontal gradient (from left to right) and `45deg` makes a diagonal gradient (from bottom left to top right). The following arguments specify the order of colors used in the gradient.
+
+Example:
+
+```css
+background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255));
+```
+
+# --instructions--
+
+Use a `linear-gradient()` for the `div` element's `background`, and set it from a direction of 35 degrees to change the color from `#CCFFFF` to `#FFCCCC`.
+
+# --hints--
+
+The `div` element should have a `linear-gradient` `background` with the specified direction and colors.
+
+```js
+assert(
+  $('div')
+    .css('background-image')
+    .match(
+      /linear-gradient\(35deg, rgb\(204, 255, 255\), rgb\(255, 204, 204\)\)/gi
+    )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  div {
+    border-radius: 20px;
+    width: 70%;
+    height: 400px;
+    margin: 50px auto;
+
+  }
+
+</style>
+
+<div></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  div {
+    border-radius: 20px;
+    width: 70%;
+    height: 400px;
+    margin: 50px auto;
+    background: linear-gradient(35deg, #CCFFFF, #FFCCCC);
+  }
+</style>
+<div></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md
new file mode 100644
index 00000000000..b3162a0453e
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-graphic-using-css.md
@@ -0,0 +1,89 @@
+---
+id: 587d78a6367417b2b2512add
+title: Create a Graphic Using CSS
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cEDWPs6'
+forumTopicId: 301048
+dashedName: create-a-graphic-using-css
+---
+
+# --description--
+
+By manipulating different selectors and properties, you can make interesting shapes. One of the easier ones to try is a crescent moon shape. For this challenge you need to work with the `box-shadow` property that sets the shadow of an element, along with the `border-radius` property that controls the roundness of the element's corners.
+
+You will create a round, transparent object with a crisp shadow that is slightly offset to the side - the shadow is actually going to be the moon shape you see.
+
+In order to create a round object, the `border-radius` property should be set to a value of 50%.
+
+You may recall from an earlier challenge that the `box-shadow` property takes values for `offset-x`, `offset-y`, `blur-radius`, `spread-radius` and a `color` value in that order. The `blur-radius` and `spread-radius` values are optional.
+
+# --instructions--
+
+Manipulate the square element in the editor to create the moon shape. First, change the `background-color` to `transparent`, then set the `border-radius` property to 50% to make the circular shape. Finally, change the `box-shadow` property to set the `offset-x` to 25px, the `offset-y` to 10px, `blur-radius` to 0, `spread-radius` to 0, and `color` to `blue`.
+
+# --hints--
+
+The value of the `background-color` property should be set to `transparent`.
+
+```js
+assert(code.match(/background-color:\s*?transparent;/gi));
+```
+
+The value of the `border-radius` property should be set to `50%`.
+
+```js
+assert(code.match(/border-radius:\s*?50%;/gi));
+```
+
+The value of the `box-shadow` property should be set to 25px for `offset-x`, 10px for `offset-y`, 0 for `blur-radius`, 0 for `spread-radius`, and finally `blue` for the `color`.
+
+```js
+assert(
+  code.match(/box-shadow:\s*?25px\s+?10px\s+?0(px)?\s+?0(px)?\s+?blue\s*?;/gi)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .center {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100px;
+    height: 100px;
+    background-color: blue;
+    border-radius: 0px;
+    box-shadow: 25px 10px 10px 10px green;
+  }
+
+</style>
+<div class="center"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .center {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    width: 100px;
+    height: 100px;
+    background-color: transparent;
+    border-radius: 50%;
+    box-shadow: 25px 10px 0 0 blue;
+  }
+</style>
+<div class="center"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md
new file mode 100644
index 00000000000..2db0b3baa57
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-horizontal-line-using-the-hr-element.md
@@ -0,0 +1,122 @@
+---
+id: 587d781b367417b2b2512abb
+title: Create a Horizontal Line Using the hr Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c3bR8t7'
+forumTopicId: 301049
+dashedName: create-a-horizontal-line-using-the-hr-element
+---
+
+# --description--
+
+You can use the `hr` tag to add a horizontal line across the width of its containing element. This can be used to define a change in topic or to visually separate groups of content.
+
+# --instructions--
+
+Add an `hr` tag underneath the `h4` which contains the card title.
+
+**Note:** In HTML, `hr` is a self-closing tag, and therefore doesn't need a separate closing tag.
+
+# --hints--
+
+Your code should add an `hr` tag to the markup.
+
+```js
+assert($('hr').length == 1);
+```
+
+The `hr` tag should come between the title and the paragraph.
+
+```js
+assert(code.match(/<\/h4>\s*?<hr(>|\s*?\/>)\s*?<p>/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    height: 25px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4><s>Google</s>Alphabet</h4>
+
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    height: 25px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4><s>Google</s>Alphabet</h4>
+      <hr>
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md
new file mode 100644
index 00000000000..8c8b5c1e5e5
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-a-more-complex-shape-using-css-and-html.md
@@ -0,0 +1,146 @@
+---
+id: 587d78a6367417b2b2512ade
+title: Create a More Complex Shape Using CSS and HTML
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cPpz4fr'
+forumTopicId: 301050
+dashedName: create-a-more-complex-shape-using-css-and-html
+---
+
+# --description--
+
+One of the most popular shapes in the world is the heart shape, and in this challenge you'll create one using pure CSS. But first, you need to understand the `::before` and `::after` pseudo-elements. `::before` creates a pseudo-element that is the first child of the selected element; `::after` creates a pseudo-element that is the last child of the selected element. In the following example, a `::before` pseudo-element is used to add a rectangle to an element with the class `heart`:
+
+```css
+.heart::before {
+  content: "";
+  background-color: yellow;
+  border-radius: 25%;
+  position: absolute;
+  height: 50px;
+  width: 70px;
+  top: -50px;
+  left: 5px;
+}
+```
+
+For the `::before` and `::after` pseudo-elements to function properly, they must have a defined `content` property. This property is usually used to add things like a photo or text to the selected element. When the `::before` and `::after` pseudo-elements are used to make shapes, the `content` property is still required, but it's set to an empty string. In the above example, the element with the class of `heart` has a `::before` pseudo-element that produces a yellow rectangle with height and width of `50px` and `70px`, respectively. This rectangle has round corners due to its 25% `border-radius` and is positioned absolutely at `5px` from the left and `50px` above the top of the element.
+
+# --instructions--
+
+Transform the element on the screen to a heart. In the `.heart::after` selector, change the `background-color` to `pink` and the `border-radius` to 50%.
+
+Next, target the element with the class `heart` (just `heart`) and fill in the `transform` property. Use the `rotate()` function with -45 degrees.
+
+Finally, in the `.heart::before` selector, set its `content` property to an empty string.
+
+# --hints--
+
+The `background-color` property of the `.heart::after` selector should be `pink`.
+
+```js
+const heartAfter = code.match(/\.heart::after\s*{[\s\S]+?[^\}]}/g)[0];
+assert(
+  /({|;)\s*background-color\s*:\s*pink\s*(;|})/g.test(heartAfter)
+);
+```
+
+The `border-radius` of the `.heart::after` selector should be 50%.
+
+```js
+assert(code.match(/border-radius\s*?:\s*?50%/gi).length == 2);
+```
+
+The `transform` property for the `heart` class should use a `rotate()` function set to -45 degrees.
+
+```js
+assert(code.match(/transform\s*?:\s*?rotate\(\s*?-45deg\s*?\)/gi));
+```
+
+The `content` of the `.heart::before` selector should be an empty string.
+
+```js
+assert(code.match(/\.heart::before\s*?{\s*?content\s*?:\s*?("|')\1\s*?;/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .heart {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: pink;
+    height: 50px;
+    width: 50px;
+    transform: ;
+  }
+  .heart::after {
+    background-color: blue;
+    content: "";
+    border-radius: 25%;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: 0px;
+    left: 25px;
+  }
+  .heart::before {
+    content: ;
+    background-color: pink;
+    border-radius: 50%;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: -25px;
+    left: 0px;
+  }
+</style>
+<div class="heart"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .heart {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: pink;
+    height: 50px;
+    width: 50px;
+    transform: rotate(-45deg);
+  }
+  .heart::after {
+    background-color: pink;
+    content: "";
+    border-radius: 50%;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: 0px;
+    left: 25px;
+  }
+  .heart::before {
+    content: "";
+    background-color: pink;
+    border-radius: 50%;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: -25px;
+    left: 0px;
+  }
+</style>
+<div class="heart"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md
new file mode 100644
index 00000000000..e962328bc6d
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-movement-using-css-animation.md
@@ -0,0 +1,136 @@
+---
+id: 587d78a7367417b2b2512ae1
+title: Create Movement Using CSS Animation
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c7amZfW'
+forumTopicId: 301051
+dashedName: create-movement-using-css-animation
+---
+
+# --description--
+
+When elements have a specified `position`, such as `fixed` or `relative`, the CSS offset properties `right`, `left`, `top`, and `bottom` can be used in animation rules to create movement.
+
+As shown in the example below, you can push the item downwards then upwards by setting the `top` property of the `50%` keyframe to 50px, but having it set to 0px for the first (`0%`) and the last (`100%`) keyframe.
+
+```css
+@keyframes rainbow {
+  0% {
+    background-color: blue;
+    top: 0px;
+  }
+  50% {
+    background-color: green;
+    top: 50px;
+  }
+  100% {
+    background-color: yellow;
+    top: 0px;
+  }
+}
+```
+
+# --instructions--
+
+Add a horizontal motion to the `div` animation. Using the `left` offset property, add to the `@keyframes` rule so rainbow starts at 0 pixels at `0%`, moves to 25 pixels at `50%`, and ends at -25 pixels at `100%`. Don't replace the `top` property in the editor - the animation should have both vertical and horizontal motion.
+
+# --hints--
+
+The `@keyframes` rule for `0%` should use the `left` offset of 0px.
+
+```js
+assert(code.match(/[^50]0%\s*?{[\s\S]*?left:\s*?0px(;[\s\S]*?|\s*?)}/gi));
+```
+
+The `@keyframes` rule for `50%` should use the `left` offset of 25px.
+
+```js
+assert(code.match(/50%\s*?{[\s\S]*?left:\s*?25px(;[\s\S]*?|\s*?)}/gi));
+```
+
+The `@keyframes` rule for `100%` should use the `left` offset of -25px.
+
+```js
+assert(code.match(/100%\s*?{[\s\S]*?left:\s*?-25px(;[\s\S]*?|\s*?)}/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  div {
+    height: 40px;
+    width: 70%;
+    background: black;
+    margin: 50px auto;
+    border-radius: 5px;
+    position: relative;
+  }
+
+  #rect {
+    animation-name: rainbow;
+    animation-duration: 4s;
+  }
+
+  @keyframes rainbow {
+    0% {
+      background-color: blue;
+      top: 0px;
+
+    }
+    50% {
+      background-color: green;
+      top: 50px;
+
+    }
+    100% {
+      background-color: yellow;
+      top: 0px;
+
+    }
+  }
+</style>
+
+<div id="rect"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  div {
+    height: 40px;
+    width: 70%;
+    background: black;
+    margin: 50px auto;
+    border-radius: 5px;
+    position: relative;
+  }
+
+  #rect {
+    animation-name: rainbow;
+    animation-duration: 4s;
+  }
+
+  @keyframes rainbow {
+    0% {
+      background-color: blue;
+      top: 0px;
+      left: 0px;
+    }
+    50% {
+      background-color: green;
+      top: 50px;
+      left: 25px;
+    }
+    100% {
+      background-color: yellow;
+      top: 0px;
+      left: -25px;
+    }
+  }
+</style>
+<div id="rect"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md
new file mode 100644
index 00000000000..9afa1f18228
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-texture-by-adding-a-subtle-pattern-as-a-background-image.md
@@ -0,0 +1,50 @@
+---
+id: 587d78a5367417b2b2512ad8
+title: Create Texture by Adding a Subtle Pattern as a Background Image
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cQdwJC8'
+forumTopicId: 301052
+dashedName: create-texture-by-adding-a-subtle-pattern-as-a-background-image
+---
+
+# --description--
+
+One way to add texture and interest to a background and have it stand out more is to add a subtle pattern. The key is balance, as you don't want the background to stand out too much, and take away from the foreground. The `background` property supports the `url()` function in order to link to an image of the chosen texture or pattern. The link address is wrapped in quotes inside the parentheses.
+
+# --instructions--
+
+Using the url of `https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png`, set the `background` of the whole page with the `body` selector.
+
+# --hints--
+
+Your `body` element should have a `background` property set to a `url()` with the given link.
+
+```js
+assert(
+  code.match(
+    /background(-image)?:\s*?url\(\s*("|'|)https:\/\/cdn-media-1\.freecodecamp\.org\/imgr\/MJAkxbh\.png\2\s*\)/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+
+  }
+</style>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    background: url("https://cdn-media-1.freecodecamp.org/imgr/MJAkxbh.png");
+  }
+</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md
new file mode 100644
index 00000000000..6706cf4c1bf
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-visual-balance-using-the-text-align-property.md
@@ -0,0 +1,118 @@
+---
+id: 587d7791367417b2b2512ab3
+title: Create Visual Balance Using the text-align Property
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c3b4EAp'
+forumTopicId: 301053
+dashedName: create-visual-balance-using-the-text-align-property
+---
+
+# --description--
+
+This section of the curriculum focuses on Applied Visual Design. The first group of challenges build on the given card layout to show a number of core principles.
+
+Text is often a large part of web content. CSS has several options for how to align it with the `text-align` property.
+
+`text-align: justify;` spaces the text so that each line has equal width.
+
+`text-align: center;` centers the text
+
+`text-align: right;` right-aligns the text
+
+And `text-align: left;` (the default) left-aligns the text.
+
+# --instructions--
+
+Align the `h4` tag's text, which says "Google", to the center. Then justify the paragraph tag which contains information about how Google was founded.
+
+# --hints--
+
+Your code should use the text-align property on the `h4` tag to set it to `center`.
+
+```js
+assert($('h4').css('text-align') == 'center');
+```
+
+Your code should use the text-align property on the `p` tag to set it to `justify`.
+
+```js
+assert($('p').css('text-align') == 'justify');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h4 {
+
+  }
+  p {
+
+  }
+  .links {
+    margin-right: 20px;
+
+  }
+  .fullCard {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Google</h4>
+      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    margin-right: 20px;
+
+  }
+  .fullCard {
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Google</h4>
+      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md
new file mode 100644
index 00000000000..288fc8ce760
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/create-visual-direction-by-fading-an-element-from-left-to-right.md
@@ -0,0 +1,95 @@
+---
+id: 587d78a7367417b2b2512ae2
+title: Create Visual Direction by Fading an Element from Left to Right
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cGJqqAE'
+forumTopicId: 301054
+dashedName: create-visual-direction-by-fading-an-element-from-left-to-right
+---
+
+# --description--
+
+For this challenge, you'll change the `opacity` of an animated element so it gradually fades as it reaches the right side of the screen.
+
+In the displayed animation, the round element with the gradient background moves to the right by the 50% mark of the animation per the `@keyframes` rule.
+
+# --instructions--
+
+Target the element with the id of `ball` and add the `opacity` property set to 0.1 at `50%`, so the element fades as it moves to the right.
+
+# --hints--
+
+The `keyframes` rule for fade should set the `opacity` property to 0.1 at 50%.
+
+```js
+assert(
+  code.match(
+    /@keyframes fade\s*?{\s*?50%\s*?{\s*?(?:left:\s*?60%;\s*?opacity:\s*?0?\.1;|opacity:\s*?0?\.1;\s*?left:\s*?60%;)/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+
+  #ball {
+    width: 70px;
+    height: 70px;
+    margin: 50px auto;
+    position: fixed;
+    left: 20%;
+    border-radius: 50%;
+    background: linear-gradient(
+      35deg,
+      #ccffff,
+      #ffcccc
+    );
+    animation-name: fade;
+    animation-duration: 3s;
+  }
+
+  @keyframes fade {
+    50% {
+      left: 60%;
+
+    }
+  }
+
+</style>
+
+<div id="ball"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  #ball {
+    width: 70px;
+    height: 70px;
+    margin: 50px auto;
+    position: fixed;
+    left: 20%;
+    border-radius: 50%;
+    background: linear-gradient(
+      35deg,
+      #ccffff,
+      #ffcccc
+    );
+    animation-name: fade;
+    animation-duration: 3s;
+  }
+
+  @keyframes fade {
+    50% {
+      left: 60%;
+      opacity: 0.1;
+    }
+  }
+</style>
+<div id="ball"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md
new file mode 100644
index 00000000000..b1f56806252
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/decrease-the-opacity-of-an-element.md
@@ -0,0 +1,134 @@
+---
+id: 587d781c367417b2b2512abf
+title: Decrease the Opacity of an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c7aKqu4'
+forumTopicId: 301055
+dashedName: decrease-the-opacity-of-an-element
+---
+
+# --description--
+
+The `opacity` property in CSS is used to adjust the opacity, or conversely, the transparency for an item.
+
+<blockquote>A value of 1 is opaque, which isn't transparent at all.<br>A value of 0.5 is half see-through.<br>A value of 0 is completely transparent.</blockquote>
+
+The value given will apply to the entire element, whether that's an image with some transparency, or the foreground and background colors for a block of text.
+
+# --instructions--
+
+Set the `opacity` of the anchor tags to 0.7 using `links` class to select them.
+
+# --hints--
+
+Your code should set the `opacity` property to 0.7 on the anchor tags by selecting the class of `links`.
+
+```js
+assert(
+  /\.links\s*{([\s\S]*?;)*\s*opacity\s*:\s*0*\.70*\s*(;[\s\S]*?|\s*)}/.test(
+    $('style').text()
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    background-color: rgba(45, 45, 45, 0.1);
+    padding: 10px;
+    font-size: 27px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+
+  }
+  #thumbnail {
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard" id="thumbnail">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Alphabet</h4>
+      <hr>
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    background-color: rgba(45, 45, 45, 0.1);
+    padding: 10px;
+    font-size: 27px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+    opacity: 0.7;
+  }
+  #thumbnail {
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard" id="thumbnail">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Alphabet</h4>
+      <hr>
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md
new file mode 100644
index 00000000000..233517e23d5
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-about-complementary-colors.md
@@ -0,0 +1,90 @@
+---
+id: 587d78a3367417b2b2512ad1
+title: Learn about Complementary Colors
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c2MD3Tr'
+forumTopicId: 301056
+dashedName: learn-about-complementary-colors
+---
+
+# --description--
+
+Color theory and its impact on design is a deep topic and only the basics are covered in the following challenges. On a website, color can draw attention to content, evoke emotions, or create visual harmony. Using different combinations of colors can really change the look of a website, and a lot of thought can go into picking a color palette that works with your content.
+
+The color wheel is a useful tool to visualize how colors relate to each other - it's a circle where similar hues are neighbors and different hues are farther apart. When two colors are opposite each other on the wheel, they are called complementary colors. They have the characteristic that if they are combined, they "cancel" each other out and create a gray color. However, when placed side-by-side, these colors appear more vibrant and produce a strong visual contrast.
+
+Some examples of complementary colors with their hex codes are:
+
+<blockquote>red (#FF0000) and cyan (#00FFFF)<br>green (#00FF00) and magenta (#FF00FF)<br>blue (#0000FF) and yellow (#FFFF00)</blockquote>
+
+This is different than the outdated RYB color model that many of us were taught in school, which has different primary and complementary colors. Modern color theory uses the additive RGB model (like on a computer screen) and the subtractive CMY(K) model (like in printing).
+
+There are many color picking tools available online that have an option to find the complement of a color.
+
+**Note:** Using color can be a powerful way to add visual interest to a page. However, color alone should not be used as the only way to convey important information because users with visual impairments may not understand that content. This issue will be covered in more detail in the Applied Accessibility challenges.
+
+# --instructions--
+
+Change the `background-color` property of the `blue` and `yellow` classes to their respective colors. Notice how the colors look different next to each other than they do compared against the white background.
+
+# --hints--
+
+The `div` element with class `blue` should have a `background-color` of blue.
+
+```js
+assert($('.blue').css('background-color') == 'rgb(0, 0, 255)');
+```
+
+The `div` element with class `yellow` should have a `background-color` of yellow.
+
+```js
+assert($('.yellow').css('background-color') == 'rgb(255, 255, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    background-color: #FFFFFF;
+  }
+  .blue {
+    background-color: #000000;
+  }
+  .yellow {
+    background-color: #000000;
+  }
+  div {
+    display: inline-block;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<div class="blue"></div>
+<div class="yellow"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    background-color: #FFFFFF;
+  }
+  .blue {
+    background-color: blue;
+  }
+  .yellow {
+    background-color: yellow;
+  }
+  div {
+    display: inline-block;
+    height: 100px;
+    width: 100px;
+  }
+</style>
+<div class="blue"></div>
+<div class="yellow"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md
new file mode 100644
index 00000000000..7f4bbbd27c9
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-about-tertiary-colors.md
@@ -0,0 +1,114 @@
+---
+id: 587d78a4367417b2b2512ad2
+title: Learn about Tertiary Colors
+challengeType: 0
+forumTopicId: 301057
+dashedName: learn-about-tertiary-colors
+---
+
+# --description--
+
+Computer monitors and device screens create different colors by combining amounts of red, green, and blue light. This is known as the RGB additive color model in modern color theory. Red (R), green (G), and blue (B) are called primary colors. Mixing two primary colors creates the secondary colors cyan (G + B), magenta (R + B) and yellow (R + G). You saw these colors in the Complementary Colors challenge. These secondary colors happen to be the complement to the primary color not used in their creation, and are opposite to that primary color on the color wheel. For example, magenta is made with red and blue, and is the complement to green.
+
+Tertiary colors are the result of combining a primary color with one of its secondary color neighbors. For example, within the RGB color model, red (primary) and yellow (secondary) make orange (tertiary). This adds six more colors to a simple color wheel for a total of twelve.
+
+There are various methods of selecting different colors that result in a harmonious combination in design. One example that can use tertiary colors is called the split-complementary color scheme. This scheme starts with a base color, then pairs it with the two colors that are adjacent to its complement. The three colors provide strong visual contrast in a design, but are more subtle than using two complementary colors.
+
+Here are three colors created using the split-complement scheme:
+
+<table class='table table-striped'><thead><tr><th>Color</th><th>Hex Code</th></tr></thead><thead></thead><tbody><tr><td>orange</td><td>#FF7F00</td></tr><tr><td>cyan</td><td>#00FFFF</td></tr><tr><td>raspberry</td><td>#FF007F</td></tr></tbody></table>
+
+# --instructions--
+
+Change the `background-color` property of the `orange`, `cyan`, and `raspberry` classes to their respective colors. Make sure to use the hex codes and not the color names.
+
+# --hints--
+
+The `div` element with class `orange` should have a `background-color` of orange.
+
+```js
+assert($('.orange').css('background-color') == 'rgb(255, 127, 0)');
+```
+
+The `div` element with class `cyan` should have a `background-color` of cyan.
+
+```js
+assert($('.cyan').css('background-color') == 'rgb(0, 255, 255)');
+```
+
+The `div` element with class `raspberry` should have a `background-color` of raspberry.
+
+```js
+assert($('.raspberry').css('background-color') == 'rgb(255, 0, 127)');
+```
+
+All `background-color` values for the color classes should be hex codes and not color names.
+
+```js
+assert(!/background-color:\s(orange|cyan|raspberry)/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    background-color: #FFFFFF;
+  }
+
+  .orange {
+    background-color: #000000;
+  }
+
+  .cyan {
+    background-color: #000000;
+  }
+
+  .raspberry {
+    background-color: #000000;
+  }
+
+  div {
+    height: 100px;
+    width: 100px;
+    margin-bottom: 5px;
+  }
+</style>
+
+<div class="orange"></div>
+<div class="cyan"></div>
+<div class="raspberry"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    background-color: #FFFFFF;
+  }
+
+  .orange {
+    background-color: #FF7F00;
+  }
+
+  .cyan {
+    background-color: #00FFFF;
+  }
+
+  .raspberry {
+    background-color: #FF007F;
+  }
+
+  div {
+    height: 100px;
+    width: 100px;
+    margin-bottom: 5px;
+  }
+</style>
+<div class="orange"></div>
+<div class="cyan"></div>
+<div class="raspberry"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md
new file mode 100644
index 00000000000..14f512c5533
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-how-bezier-curves-work.md
@@ -0,0 +1,136 @@
+---
+id: 587d78a9367417b2b2512ae8
+title: Learn How Bezier Curves Work
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c9bDrs8'
+forumTopicId: 301058
+dashedName: learn-how-bezier-curves-work
+---
+
+# --description--
+
+The last challenge introduced the `animation-timing-function` property and a few keywords that change the speed of an animation over its duration. CSS offers an option other than keywords that provides even finer control over how the animation plays out, through the use of Bezier curves.
+
+In CSS animations, Bezier curves are used with the `cubic-bezier` function. The shape of the curve represents how the animation plays out. The curve lives on a 1 by 1 coordinate system. The X-axis of this coordinate system is the duration of the animation (think of it as a time scale), and the Y-axis is the change in the animation.
+
+The `cubic-bezier` function consists of four main points that sit on this 1 by 1 grid: `p0`, `p1`, `p2`, and `p3`. `p0` and `p3` are set for you - they are the beginning and end points which are always located respectively at the origin (0, 0) and (1, 1). You set the x and y values for the other two points, and where you place them in the grid dictates the shape of the curve for the animation to follow. This is done in CSS by declaring the x and y values of the `p1` and `p2` "anchor" points in the form: `(x1, y1, x2, y2)`. Pulling it all together, here's an example of a Bezier curve in CSS code:
+
+```css
+animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
+```
+
+In the example above, the x and y values are equivalent for each point (x1 = 0.25 = y1 and x2 = 0.75 = y2), which if you remember from geometry class, results in a line that extends from the origin to point (1, 1). This animation is a linear change of an element during the length of an animation, and is the same as using the `linear` keyword. In other words, it changes at a constant speed.
+
+# --instructions--
+
+For the element with the id of `ball1`, change the value of the `animation-timing-function` property from `linear` to its equivalent `cubic-bezier` function value. Use the point values given in the example above.
+
+# --hints--
+
+The value of the `animation-timing-function` property for the element with the id `ball1` should be the linear-equivalent `cubic-bezier` function.
+
+```js
+assert(
+  $('#ball1').css('animation-timing-function') ==
+    'cubic-bezier(0.25, 0.25, 0.75, 0.75)'
+);
+```
+
+The value of the `animation-timing-function` property for the element with the id `ball2` should not change.
+
+```js
+const ball2Animation = __helpers.removeWhiteSpace(
+  $('#ball2').css('animation-timing-function')
+);
+assert(
+  ball2Animation == 'ease-out' || ball2Animation == 'cubic-bezier(0,0,0.58,1)'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+
+  .balls{
+    border-radius: 50%;
+    background: linear-gradient(
+      35deg,
+      #ccffff,
+      #ffcccc
+    );
+    position: fixed;
+    width: 50px;
+    height: 50px;
+    margin-top: 50px;
+    animation-name: bounce;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+  }
+  #ball1 {
+    left: 27%;
+    animation-timing-function: linear;
+  }
+  #ball2 {
+    left: 56%;
+    animation-timing-function: ease-out;
+  }
+
+  @keyframes bounce {
+    0% {
+      top: 0px;
+    }
+    100% {
+      top: 249px;
+    }
+  }
+
+</style>
+
+<div class="balls" id="ball1"></div>
+<div class="balls" id="ball2"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+
+  .balls{
+    border-radius: 50%;
+    background: linear-gradient(
+      35deg,
+      #ccffff,
+      #ffcccc
+    );
+    position: fixed;
+    width: 50px;
+    height: 50px;
+    margin-top: 50px;
+    animation-name: bounce;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+  }
+  #ball1 {
+    left: 27%;
+    animation-timing-function: cubic-bezier(0.25, 0.25, 0.75, 0.75);
+  }
+  #ball2 {
+    left: 56%;
+    animation-timing-function: ease-out;
+  }
+
+  @keyframes bounce {
+    0% {
+      top: 0px;
+    }
+    100% {
+      top: 249px;
+    }
+  }
+</style>
+<div class="balls" id="ball1"></div>
+<div class="balls" id="ball2"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md
new file mode 100644
index 00000000000..e91a65e334a
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/learn-how-the-css-keyframes-and-animation-properties-work.md
@@ -0,0 +1,136 @@
+---
+id: 587d78a7367417b2b2512adf
+title: Learn How the CSS @keyframes and animation Properties Work
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cakprhv'
+forumTopicId: 301059
+dashedName: learn-how-the-css-keyframes-and-animation-properties-work
+---
+
+# --description--
+
+To animate an element, you need to know about the animation properties and the `@keyframes` rule. The animation properties control how the animation should behave and the `@keyframes` rule controls what happens during that animation. There are eight animation properties in total. This challenge will keep it simple and cover the two most important ones first:
+
+`animation-name` sets the name of the animation, which is later used by `@keyframes` to tell CSS which rules go with which animations.
+
+`animation-duration` sets the length of time for the animation.
+
+`@keyframes` is how to specify exactly what happens within the animation over the duration. This is done by giving CSS properties for specific "frames" during the animation, with percentages ranging from 0% to 100%. If you compare this to a movie, the CSS properties for 0% is how the element displays in the opening scene. The CSS properties for 100% is how the element appears at the end, right before the credits roll. Then CSS applies the magic to transition the element over the given duration to act out the scene. Here's an example to illustrate the usage of `@keyframes` and the animation properties:
+
+```css
+#anim {
+  animation-name: colorful;
+  animation-duration: 3s;
+}
+
+@keyframes colorful {
+  0% {
+    background-color: blue;
+  }
+  100% {
+    background-color: yellow;
+  }
+}
+```
+
+For the element with the `anim` id, the code snippet above sets the `animation-name` to `colorful` and sets the `animation-duration` to 3 seconds. Then the `@keyframes` rule links to the animation properties with the name `colorful`. It sets the color to blue at the beginning of the animation (0%) which will transition to yellow by the end of the animation (100%). You aren't limited to only beginning-end transitions, you can set properties for the element for any percentage between 0% and 100%.
+
+# --instructions--
+
+Create an animation for the element with the id `rect`, by setting the `animation-name` to `rainbow` and the `animation-duration` to 4 seconds. Next, declare a `@keyframes` rule, and set the `background-color` at the beginning of the animation (`0%`) to blue, the middle of the animation (`50%`) to green, and the end of the animation (`100%`) to yellow.
+
+# --hints--
+
+The element with id of `rect` should have an `animation-name` property with a value of `rainbow`.
+
+```js
+assert($('#rect').css('animation-name') == 'rainbow');
+```
+
+The element with id of `rect` should have an `animation-duration` property with a value of 4s.
+
+```js
+assert($('#rect').css('animation-duration') == '4s');
+```
+
+The `@keyframes` rule should use the `animation-name` of `rainbow`.
+
+```js
+assert(code.match(/@keyframes\s+?rainbow\s*?{/g));
+```
+
+The `@keyframes` rule for `rainbow` should use a `background-color` of `blue` at 0%.
+
+```js
+assert(code.match(/0%\s*?{\s*?background-color:\s*?blue;\s*?}/gi));
+```
+
+The `@keyframes` rule for `rainbow` should use a `background-color` of `green` at 50%.
+
+```js
+assert(code.match(/50%\s*?{\s*?background-color:\s*?green;\s*?}/gi));
+```
+
+The `@keyframes` rule for rainbow should use a `background-color` of `yellow` at 100%.
+
+```js
+assert(code.match(/100%\s*?{\s*?background-color:\s*?yellow;\s*?}/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  div {
+    height: 40px;
+    width: 70%;
+    background: black;
+    margin: 50px auto;
+    border-radius: 5px;
+  }
+
+  #rect {
+
+
+  }
+
+
+
+
+</style>
+<div id="rect"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  div {
+    height: 40px;
+    width: 70%;
+    background: black;
+    margin: 50px auto;
+    border-radius: 5px;
+  }
+
+  #rect {
+    animation-name: rainbow;
+    animation-duration: 4s;
+  }
+
+  @keyframes rainbow {
+    0% {
+      background-color: blue;
+    }
+    50% {
+      background-color: green;
+    }
+    100% {
+      background-color: yellow;
+    }
+  }
+</style>
+<div id="rect"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md
new file mode 100644
index 00000000000..0eb38a456a4
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/lock-an-element-to-its-parent-with-absolute-positioning.md
@@ -0,0 +1,90 @@
+---
+id: 587d781e367417b2b2512acb
+title: Lock an Element to its Parent with Absolute Positioning
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cyLJ7c3'
+forumTopicId: 301060
+dashedName: lock-an-element-to-its-parent-with-absolute-positioning
+---
+
+# --description--
+
+The next option for the CSS `position` property is `absolute`, which locks the element in place relative to its parent container. Unlike the `relative` position, this removes the element from the normal flow of the document, so surrounding items ignore it. The CSS offset properties (top or bottom and left or right) are used to adjust the position.
+
+One nuance with absolute positioning is that it will be locked relative to its closest *positioned* ancestor. If you forget to add a position rule to the parent item, (this is typically done using `position: relative;`), the browser will keep looking up the chain and ultimately default to the `body` tag.
+
+# --instructions--
+
+Lock the `#searchbar` element to the top-right of its `section` parent by declaring its `position` as `absolute`. Give it `top` and `right` offsets of 50 pixels each.
+
+# --hints--
+
+The `#searchbar` element should have a `position` set to `absolute`.
+
+```js
+assert($('#searchbar').css('position') == 'absolute');
+```
+
+Your code should use the `top` CSS offset of 50 pixels on the `#searchbar` element.
+
+```js
+assert($('#searchbar').css('top') == '50px');
+```
+
+Your code should use the `right` CSS offset of 50 pixels on the `#searchbar` element.
+
+```js
+assert($('#searchbar').css('right') == '50px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  #searchbar {
+
+
+
+  }
+  section {
+    position: relative;
+  }
+</style>
+<body>
+  <h1>Welcome!</h1>
+  <section>
+    <form id="searchbar">
+      <label for="search">Search:</label>
+      <input type="search" id="search" name="search">
+      <input type="submit" name="submit" value="Go!">
+    </form>
+  </section>
+</body>
+```
+
+# --solutions--
+
+```html
+<style>
+  #searchbar {
+    position: absolute;
+    top: 50px;
+    right: 50px;
+  }
+  section {
+    position: relative;
+  }
+</style>
+<body>
+  <h1>Welcome!</h1>
+  <section>
+    <form id="searchbar">
+      <label for="search">Search:</label>
+      <input type="search" id="search" name="search">
+      <input type="submit" name="submit" value="Go!">
+    </form>
+  </section>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md
new file mode 100644
index 00000000000..3909a6ce24a
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/lock-an-element-to-the-browser-window-with-fixed-positioning.md
@@ -0,0 +1,120 @@
+---
+id: 587d781e367417b2b2512acc
+title: Lock an Element to the Browser Window with Fixed Positioning
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c2MDNUR'
+forumTopicId: 301061
+dashedName: lock-an-element-to-the-browser-window-with-fixed-positioning
+---
+
+# --description--
+
+The next layout scheme that CSS offers is the `fixed` position, which is a type of absolute positioning that locks an element relative to the browser window. Similar to absolute positioning, it's used with the CSS offset properties and also removes the element from the normal flow of the document. Other items no longer "realize" where it is positioned, which may require some layout adjustments elsewhere.
+
+One key difference between the `fixed` and `absolute` positions is that an element with a fixed position won't move when the user scrolls.
+
+# --instructions--
+
+The navigation bar in the code is labeled with an id of `navbar`. Change its `position` to `fixed`, and offset it 0 pixels from the `top` and 0 pixels from the `left`. After you have added the code, scroll the preview window to see how the navigation stays in place.
+
+# --hints--
+
+The `#navbar` element should have a `position` set to `fixed`.
+
+```js
+assert($('#navbar').css('position') == 'fixed');
+```
+
+Your code should use the `top` CSS offset of 0 pixels on the `#navbar` element.
+
+```js
+assert($('#navbar').css('top') == '0px');
+```
+
+Your code should use the `left` CSS offset of 0 pixels on the `#navbar` element.
+
+```js
+assert($('#navbar').css('left') == '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    min-height: 150vh;
+  }
+  #navbar {
+
+
+
+    width: 100%;
+    background-color: #767676;
+  }
+  nav ul {
+    margin: 0px;
+    padding: 5px 0px 5px 30px;
+  }
+  nav li {
+    display: inline;
+    margin-right: 20px;
+  }
+  a {
+    text-decoration: none;
+  }
+</style>
+<body>
+  <header>
+    <h1>Welcome!</h1>
+    <nav id="navbar">
+      <ul>
+        <li><a href="">Home</a></li>
+        <li><a href="">Contact</a></li>
+      </ul>
+    </nav>
+  </header>
+  <p>I shift up when the #navbar is fixed to the browser window.</p>
+</body>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    min-height: 150vh;
+  }
+  #navbar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    background-color: #767676;
+  }
+  nav ul {
+    margin: 0px;
+    padding: 5px 0px 5px 30px;
+  }
+  nav li {
+    display: inline;
+    margin-right: 20px;
+  }
+  a {
+    text-decoration: none;
+  }
+</style>
+<body>
+  <header>
+    <h1>Welcome!</h1>
+    <nav id="navbar">
+      <ul>
+        <li><a href="">Home</a></li>
+        <li><a href="">Contact</a></li>
+      </ul>
+    </nav>
+  </header>
+  <p>I shift up when the #navbar is fixed to the browser window.</p>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md
new file mode 100644
index 00000000000..651d36a0dd3
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/make-a-css-heartbeat-using-an-infinite-animation-count.md
@@ -0,0 +1,181 @@
+---
+id: 587d78a8367417b2b2512ae4
+title: Make a CSS Heartbeat using an Infinite Animation Count
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cDZpDUr'
+forumTopicId: 301062
+dashedName: make-a-css-heartbeat-using-an-infinite-animation-count
+---
+
+# --description--
+
+Here's one more continuous animation example with the `animation-iteration-count` property that uses the heart you designed in a previous challenge.
+
+The one-second long heartbeat animation consists of two animated pieces. The `heart` elements (including the `:before` and `:after` pieces) are animated to change size using the `transform` property, and the background `div` is animated to change its color using the `background` property.
+
+# --instructions--
+
+Keep the heart beating by adding the `animation-iteration-count` property for both the `back` class and the `heart` class and setting the value to `infinite`. The `heart:before` and `heart:after` selectors do not need any animation properties.
+
+# --hints--
+
+The `animation-iteration-count` property for the `heart` class should have a value of `infinite`.
+
+```js
+assert($('.heart').css('animation-iteration-count') == 'infinite');
+```
+
+The `animation-iteration-count` property for the `back` class should have a value of `infinite`.
+
+```js
+assert($('.back').css('animation-iteration-count') == 'infinite');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .back {
+    position: fixed;
+    padding: 0;
+    margin: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: white;
+    animation-name: backdiv;
+    animation-duration: 1s;
+
+  }
+
+  .heart {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: pink;
+    height: 50px;
+    width: 50px;
+    transform: rotate(-45deg);
+    animation-name: beat;
+    animation-duration: 1s;
+
+  }
+  .heart:after {
+    background-color: pink;
+    content: "";
+    border-radius: 50%;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: 0px;
+    left: 25px;
+  }
+  .heart:before {
+    background-color: pink;
+    content: "";
+    border-radius: 50%;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: -25px;
+    left: 0px;
+  }
+
+  @keyframes backdiv {
+    50% {
+      background: #ffe6f2;
+    }
+  }
+
+  @keyframes beat {
+    0% {
+      transform: scale(1) rotate(-45deg);
+    }
+    50% {
+      transform: scale(0.6) rotate(-45deg);
+    }
+  }
+
+</style>
+<div class="back"></div>
+<div class="heart"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .back {
+    position: fixed;
+    padding: 0;
+    margin: 0;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: white;
+    animation-name: backdiv;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
+
+  .heart {
+    position: absolute;
+    margin: auto;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: pink;
+    height: 50px;
+    width: 50px;
+    transform: rotate(-45deg);
+    animation-name: beat;
+    animation-duration: 1s;
+    animation-iteration-count: infinite;
+  }
+  .heart:after {
+    background-color: pink;
+    content: "";
+    border-radius: 50%;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: 0px;
+    left: 25px;
+  }
+  .heart:before {
+    background-color: pink;
+    content: "";
+    border-radius: 50%;
+    position: absolute;
+    width: 50px;
+    height: 50px;
+    top: -25px;
+    left: 0px;
+  }
+
+  @keyframes backdiv {
+    50% {
+      background: #ffe6f2;
+    }
+  }
+
+  @keyframes beat {
+    0% {
+      transform: scale(1) rotate(-45deg);
+    }
+    50% {
+      transform: scale(0.6) rotate(-45deg);
+    }
+  }
+</style>
+<div class="back"></div>
+<div class="heart"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md
new file mode 100644
index 00000000000..85932dd7b3c
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/make-motion-more-natural-using-a-bezier-curve.md
@@ -0,0 +1,121 @@
+---
+id: 587d78a9367417b2b2512aea
+title: Make Motion More Natural Using a Bezier Curve
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c7akWUv'
+forumTopicId: 301063
+dashedName: make-motion-more-natural-using-a-bezier-curve
+---
+
+# --description--
+
+This challenge animates an element to replicate the movement of a ball being juggled. Prior challenges covered the `linear` and `ease-out` cubic Bezier curves, however neither depicts the juggling movement accurately. You need to customize a Bezier curve for this.
+
+The `animation-timing-function` automatically loops at every keyframe when the `animation-iteration-count` is set to infinite. Since there is a keyframe rule set in the middle of the animation duration (at `50%`), it results in two identical animation progressions at the upward and downward movement of the ball.
+
+The following cubic Bezier curve simulates a juggling movement:
+
+```css
+cubic-bezier(0.3, 0.4, 0.5, 1.6);
+```
+
+Notice that the value of y2 is larger than 1. Although the cubic Bezier curve is mapped on a 1 by 1 coordinate system, and it can only accept x values from 0 to 1, the y value can be set to numbers larger than one. This results in a bouncing movement that is ideal for simulating the juggling ball.
+
+# --instructions--
+
+Change value of the `animation-timing-function` of the element with the id of `green` to a `cubic-bezier` function with x1, y1, x2, y2 values set respectively to 0.311, 0.441, 0.444, 1.649.
+
+# --hints--
+
+The value of the `animation-timing-function` property for the element with the id `green` should be a `cubic-bezier` function with x1, y1, x2, y2 values as specified.
+
+```js
+assert(
+  $('#green').css('animation-timing-function') ==
+    'cubic-bezier(0.311, 0.441, 0.444, 1.649)'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .balls {
+    border-radius: 50%;
+    position: fixed;
+    width: 50px;
+    height: 50px;
+    top: 60%;
+    animation-name: jump;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+  }
+  #red {
+    background: red;
+    left: 25%;
+    animation-timing-function: linear;
+  }
+  #blue {
+    background: blue;
+    left: 50%;
+    animation-timing-function: ease-out;
+  }
+  #green {
+    background: green;
+    left: 75%;
+    animation-timing-function: cubic-bezier(0.69, 0.1, 1, 0.1);
+  }
+
+  @keyframes jump {
+    50% {
+      top: 10%;
+    }
+  }
+</style>
+<div class="balls" id="red"></div>
+<div class="balls" id="blue"></div>
+<div class="balls" id="green"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .balls {
+    border-radius: 50%;
+    position: fixed;
+    width: 50px;
+    height: 50px;
+    top: 60%;
+    animation-name: jump;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+  }
+  #red {
+    background: red;
+    left: 25%;
+    animation-timing-function: linear;
+  }
+  #blue {
+    background: blue;
+    left: 50%;
+    animation-timing-function: ease-out;
+  }
+  #green {
+    background: green;
+    left: 75%;
+    animation-timing-function: cubic-bezier(0.311, 0.441, 0.444, 1.649);
+  }
+
+  @keyframes jump {
+    50% {
+      top: 10%;
+    }
+  }
+</style>
+<div class="balls" id="red"></div>
+<div class="balls" id="blue"></div>
+<div class="balls" id="green"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md
new file mode 100644
index 00000000000..ec59324e6d1
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/modify-fill-mode-of-an-animation.md
@@ -0,0 +1,92 @@
+---
+id: 58a7a6ebf9a6318348e2d5aa
+title: Modify Fill Mode of an Animation
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cVJDmcE'
+forumTopicId: 301064
+dashedName: modify-fill-mode-of-an-animation
+---
+
+# --description--
+
+That's great, but it doesn't work right yet. Notice how the animation resets after `500ms` has passed, causing the button to revert back to the original color. You want the button to stay highlighted.
+
+This can be done by setting the `animation-fill-mode` property to `forwards`. The `animation-fill-mode` specifies the style applied to an element when the animation has finished. You can set it like so:
+
+```css
+animation-fill-mode: forwards;
+```
+
+# --instructions--
+
+Set the `animation-fill-mode` property of `button:hover` to `forwards` so the button stays highlighted when a user hovers over it.
+
+# --hints--
+
+`button:hover` should have a `animation-fill-mode` property with a value of `forwards`.
+
+```js
+assert(
+  code.match(
+    /button\s*?:\s*?hover\s*?{[\s\S]*animation-fill-mode\s*?:\s*?forwards\s*?;[\s\S]*}/gi
+  ) &&
+    code.match(
+      /button\s*?:\s*?hover\s*?{[\s\S]*animation-name\s*?:\s*?background-color\s*?;[\s\S]*}/gi
+    ) &&
+    code.match(
+      /button\s*?:\s*?hover\s*?{[\s\S]*animation-duration\s*?:\s*?500ms\s*?;[\s\S]*}/gi
+    )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  button {
+    border-radius: 5px;
+    color: white;
+    background-color: #0F5897;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    animation-name: background-color;
+    animation-duration: 500ms;
+    /* Only change code below this line */
+
+    /* Only change code above this line */
+  }
+  @keyframes background-color {
+    100% {
+      background-color: #4791d0;
+    }
+  }
+</style>
+<button>Register</button>
+```
+
+# --solutions--
+
+```html
+<style>
+  button {
+    border-radius: 5px;
+    color: white;
+    background-color: #0F5897;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    animation-name: background-color;
+    animation-duration: 500ms;
+    animation-fill-mode: forwards;
+  }
+  @keyframes background-color {
+    100% {
+      background-color: #4791d0;
+    }
+  }
+</style>
+<button>Register</button>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md
new file mode 100644
index 00000000000..233713adda4
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/move-a-relatively-positioned-element-with-css-offsets.md
@@ -0,0 +1,70 @@
+---
+id: 587d781e367417b2b2512aca
+title: Move a Relatively Positioned Element with CSS Offsets
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c9bQEA4'
+forumTopicId: 301065
+dashedName: move-a-relatively-positioned-element-with-css-offsets
+---
+
+# --description--
+
+The CSS offsets of `top` or `bottom`, and `left` or `right` tell the browser how far to offset an item relative to where it would sit in the normal flow of the document. You're offsetting an element away from a given spot, which moves the element away from the referenced side (effectively, the opposite direction). As you saw in the last challenge, using the `top` offset moved the `h2` downwards. Likewise, using a `left` offset moves an item to the right.
+
+# --instructions--
+
+Use CSS offsets to move the `h2` 15 pixels to the right and 10 pixels up.
+
+# --hints--
+
+Your code should use a CSS offset to relatively position the `h2` 10px upwards. In other words, move it 10px away from the `bottom` of where it normally sits.
+
+```js
+assert($('h2').css('bottom') == '10px');
+```
+
+Your code should use a CSS offset to relatively position the `h2` 15px towards the right. In other words, move it 15px away from the `left` of where it normally sits.
+
+```js
+assert($('h2').css('left') == '15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<head>
+<style>
+  h2 {
+    position: relative;
+
+
+  }
+</style>
+</head>
+<body>
+  <h1>On Being Well-Positioned</h1>
+  <h2>Move me!</h2>
+  <p>I still think the h2 is where it normally sits.</p>
+</body>
+```
+
+# --solutions--
+
+```html
+<head>
+<style>
+  h2 {
+    position: relative;
+    left: 15px;
+    bottom: 10px;
+  }
+</style>
+</head>
+<body>
+  <h1>On Being Well-Positioned</h1>
+  <h2>Move me!</h2>
+  <p>I still think the h2 is where it normally sits.</p>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md
new file mode 100644
index 00000000000..a57caba304b
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/push-elements-left-or-right-with-the-float-property.md
@@ -0,0 +1,100 @@
+---
+id: 587d78a3367417b2b2512ace
+title: Push Elements Left or Right with the float Property
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c2MDqu2'
+forumTopicId: 301066
+dashedName: push-elements-left-or-right-with-the-float-property
+---
+
+# --description--
+
+The next positioning tool does not actually use `position`, but sets the `float` property of an element. Floating elements are removed from the normal flow of a document and pushed to either the `left` or `right` of their containing parent element. It's commonly used with the `width` property to specify how much horizontal space the floated element requires.
+
+# --instructions--
+
+The given markup would work well as a two-column layout, with the `section` and `aside` elements next to each other. Give the `#left` item a `float` of `left` and the `#right` item a `float` of `right`.
+
+# --hints--
+
+The element with id `left` should have a `float` value of `left`.
+
+```js
+assert($('#left').css('float') == 'left');
+```
+
+The element with id `right` should have a `float` value of `right`.
+
+```js
+assert($('#right').css('float') == 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<head>
+  <style>
+    #left {
+
+      width: 50%;
+    }
+    #right {
+
+      width: 40%;
+    }
+    aside, section {
+      padding: 2px;
+      background-color: #ccc;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Welcome!</h1>
+  </header>
+  <section id="left">
+    <h2>Content</h2>
+    <p>Good stuff</p>
+  </section>
+  <aside id="right">
+    <h2>Sidebar</h2>
+    <p>Links</p>
+  </aside>
+</body>
+```
+
+# --solutions--
+
+```html
+<head>
+  <style>
+    #left {
+      float: left;
+      width: 50%;
+    }
+    #right {
+      float: right;
+      width: 40%;
+    }
+    aside, section {
+      padding: 2px;
+      background-color: #ccc;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <h1>Welcome!</h1>
+  </header>
+  <section id="left">
+    <h2>Content</h2>
+    <p>Good stuff</p>
+  </section>
+  <aside id="right">
+    <h2>Sidebar</h2>
+    <p>Links</p>
+  </aside>
+</body>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md
new file mode 100644
index 00000000000..15fe7ce6dfa
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-font-size-for-multiple-heading-elements.md
@@ -0,0 +1,121 @@
+---
+id: 587d781c367417b2b2512ac2
+title: Set the font-size for Multiple Heading Elements
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cPpQNT3'
+forumTopicId: 301067
+dashedName: set-the-font-size-for-multiple-heading-elements
+---
+
+# --description--
+
+The `font-size` property is used to specify how large the text is in a given element. This rule can be used for multiple elements to create visual consistency of text on a page. In this challenge, you'll set the values for all `h1` through `h6` tags to balance the heading sizes.
+
+# --instructions--
+
+  <p>In the <code>style</code> tags, set the <code>font-size</code> of the:</p>
+
+  <ul>
+    <li><code>h1</code> tag to 68px.</li>
+    <li><code>h2</code> tag to 52px.</li>
+    <li><code>h3</code> tag to 40px.</li>
+    <li><code>h4</code> tag to 32px.</li>
+    <li><code>h5</code> tag to 21px.</li>
+    <li><code>h6</code> tag to 14px.</li>
+  </ul>
+
+# --hints--
+
+Your code should set the `font-size` property for the `h1` tag to 68 pixels.
+
+```js
+ const fontSizeOfh1 = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size');
+ assert(fontSizeOfh1 === '68px');
+```
+
+Your code should set the `font-size` property for the `h2` tag to 52 pixels.
+
+```js
+ const fontSizeOfh2 = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size');
+ assert(fontSizeOfh2 === '52px');
+```
+
+Your code should set the `font-size` property for the `h3` tag to 40 pixels.
+
+```js
+ const fontSizeOfh3 = new __helpers.CSSHelp(document).getStyle('h3')?.getPropertyValue('font-size');
+ assert(fontSizeOfh3 === '40px');
+```
+
+Your code should set the `font-size` property for the `h4` tag to 32 pixels.
+
+```js
+ const fontSizeOfh4 = new __helpers.CSSHelp(document).getStyle('h4')?.getPropertyValue('font-size');
+ assert(fontSizeOfh4 === '32px');
+```
+
+Your code should set the `font-size` property for the `h5` tag to 21 pixels.
+
+```js
+ const fontSizeOfh5 = new __helpers.CSSHelp(document).getStyle('h5')?.getPropertyValue('font-size');
+ assert(fontSizeOfh5 === '21px');
+```
+
+Your code should set the `font-size` property for the `h6` tag to 14 pixels.
+
+```js
+ const fontSizeOfh6 = new __helpers.CSSHelp(document).getStyle('h6')?.getPropertyValue('font-size');
+ assert(fontSizeOfh6 === '14px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+
+
+
+
+
+
+</style>
+<h1>This is h1 text</h1>
+<h2>This is h2 text</h2>
+<h3>This is h3 text</h3>
+<h4>This is h4 text</h4>
+<h5>This is h5 text</h5>
+<h6>This is h6 text</h6>
+```
+
+# --solutions--
+
+```html
+<style>
+  h1 {
+    font-size: 68px;
+  }
+  h2 {
+    font-size: 52px;
+  }
+  h3 {
+    font-size: 40px;
+  }
+  h4 {
+    font-size: 32px;
+  }
+  h5 {
+    font-size: 21px;
+  }
+  h6 {
+    font-size: 14px;
+  }
+</style>
+<h1>This is h1 text</h1>
+<h2>This is h2 text</h2>
+<h3>This is h3 text</h3>
+<h4>This is h4 text</h4>
+<h5>This is h5 text</h5>
+<h6>This is h6 text</h6>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.md
new file mode 100644
index 00000000000..d50c75f67bb
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-font-size-of-paragraph-text.md
@@ -0,0 +1,52 @@
+---
+id: 587d781c367417b2b2512ac4
+title: Set the font-size of Paragraph Text
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cVJ36Cr'
+forumTopicId: 301068
+dashedName: set-the-font-size-of-paragraph-text
+---
+
+# --description--
+
+The `font-size` property in CSS is not limited to headings, it can be applied to any element containing text.
+
+# --instructions--
+
+Change the value of the `font-size` property for the paragraph to 16px to make it more visible.
+
+# --hints--
+
+Your `p` tag should have a `font-size` of 16 pixels.
+
+```js
+assert($('p').css('font-size') == '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  p {
+    font-size: 10px;
+  }
+</style>
+<p>
+  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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+</p>
+```
+
+# --solutions--
+
+```html
+<style>
+  p {
+    font-size: 16px;
+  }
+</style>
+<p>
+  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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+</p>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.md
new file mode 100644
index 00000000000..aec407d16e1
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-font-weight-for-multiple-heading-elements.md
@@ -0,0 +1,132 @@
+---
+id: 587d781c367417b2b2512ac3
+title: Set the font-weight for Multiple Heading Elements
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/crVWRHq'
+forumTopicId: 301069
+dashedName: set-the-font-weight-for-multiple-heading-elements
+---
+
+# --description--
+
+You set the `font-size` of each heading tag in the last challenge, here you'll adjust the `font-weight`.
+
+The `font-weight` property sets how thick or thin characters are in a section of text.
+
+# --instructions--
+
+<ul><li>Set the <code>font-weight</code> of the <code>h1</code> tag to 800.</li><li>Set the <code>font-weight</code> of the <code>h2</code> tag to 600.</li><li>Set the <code>font-weight</code> of the <code>h3</code> tag to 500.</li><li>Set the <code>font-weight</code> of the <code>h4</code> tag to 400.</li><li>Set the <code>font-weight</code> of the <code>h5</code> tag to 300.</li><li>Set the <code>font-weight</code> of the <code>h6</code> tag to 200.</li></ul>
+
+# --hints--
+
+Your code should set the `font-weight` property for the `h1` tag to 800.
+
+```js
+assert($('h1').css('font-weight') == '800');
+```
+
+Your code should set the `font-weight` property for the `h2` tag to 600.
+
+```js
+assert($('h2').css('font-weight') == '600');
+```
+
+Your code should set the `font-weight` property for the `h3` tag to 500.
+
+```js
+assert($('h3').css('font-weight') == '500');
+```
+
+Your code should set the `font-weight` property for the `h4` tag to 400.
+
+```js
+assert($('h4').css('font-weight') == '400');
+```
+
+Your code should set the `font-weight` property for the `h5` tag to 300.
+
+```js
+assert($('h5').css('font-weight') == '300');
+```
+
+Your code should set the `font-weight` property for the `h6` tag to 200.
+
+```js
+assert($('h6').css('font-weight') == '200');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h1 {
+    font-size: 68px;
+
+  }
+  h2 {
+    font-size: 52px;
+
+  }
+  h3 {
+    font-size: 40px;
+
+  }
+  h4 {
+    font-size: 32px;
+
+  }
+  h5 {
+    font-size: 21px;
+
+  }
+  h6 {
+    font-size: 14px;
+
+  }
+</style>
+<h1>This is h1 text</h1>
+<h2>This is h2 text</h2>
+<h3>This is h3 text</h3>
+<h4>This is h4 text</h4>
+<h5>This is h5 text</h5>
+<h6>This is h6 text</h6>
+```
+
+# --solutions--
+
+```html
+<style>
+  h1 {
+    font-size: 68px;
+    font-weight: 800;
+  }
+  h2 {
+    font-size: 52px;
+    font-weight: 600;
+  }
+  h3 {
+    font-size: 40px;
+    font-weight: 500;
+  }
+  h4 {
+    font-size: 32px;
+    font-weight: 400;
+  }
+  h5 {
+    font-size: 21px;
+    font-weight: 300;
+  }
+  h6 {
+    font-size: 14px;
+    font-weight: 200;
+  }
+</style>
+<h1>This is h1 text</h1>
+<h2>This is h2 text</h2>
+<h3>This is h3 text</h3>
+<h4>This is h4 text</h4>
+<h5>This is h5 text</h5>
+<h6>This is h6 text</h6>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.md
new file mode 100644
index 00000000000..950e5d4c775
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/set-the-line-height-of-paragraphs.md
@@ -0,0 +1,54 @@
+---
+id: 587d781d367417b2b2512ac5
+title: Set the line-height of Paragraphs
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/crVWdcv'
+forumTopicId: 301070
+dashedName: set-the-line-height-of-paragraphs
+---
+
+# --description--
+
+CSS offers the `line-height` property to change the height of each line in a block of text. As the name suggests, it changes the amount of vertical space that each line of text gets.
+
+# --instructions--
+
+Add a `line-height` property to the `p` tag and set it to 25px.
+
+# --hints--
+
+Your code should set the `line-height` of the `p` tag to 25 pixels.
+
+```js
+assert($('p').css('line-height') == '25px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  p {
+    font-size: 16px;
+
+  }
+</style>
+<p>
+  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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+</p>
+```
+
+# --solutions--
+
+```html
+<style>
+  p {
+    font-size: 16px;
+    line-height: 25px;
+  }
+</style>
+<p>
+  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. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
+</p>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md
new file mode 100644
index 00000000000..f4907e34b6b
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-a-bezier-curve-to-move-a-graphic.md
@@ -0,0 +1,128 @@
+---
+id: 587d78a9367417b2b2512ae9
+title: Use a Bezier Curve to Move a Graphic
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c6bnRCK'
+forumTopicId: 301071
+dashedName: use-a-bezier-curve-to-move-a-graphic
+---
+
+# --description--
+
+A previous challenge discussed the `ease-out` keyword that describes an animation change that speeds up first and then slows down at the end of the animation. On the right, the difference between the `ease-out` keyword (for the blue element) and `linear` keyword (for the red element) is demonstrated. Similar animation progressions to the `ease-out` keyword can be achieved by using a custom cubic Bezier curve function.
+
+In general, changing the `p1` and `p2` anchor points drives the creation of different Bezier curves, which controls how the animation progresses through time. Here's an example of a Bezier curve using values to mimic the `ease-out` style:
+
+```css
+animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+```
+
+Remember that all `cubic-bezier` functions start with `p0` at (0, 0) and end with `p3` at (1, 1). In this example, the curve moves faster through the Y-axis (starts at 0, goes to `p1` y value of 0, then goes to `p2` y value of 1) than it moves through the X-axis (0 to start, then 0 for `p1`, up to 0.58 for `p2`). As a result, the change in the animated element progresses faster than the time of the animation for that segment. Towards the end of the curve, the relationship between the change in x and y values reverses - the y value moves from 1 to 1 (no change), and the x values move from 0.58 to 1, making the animation changes progress slower compared to the animation duration.
+
+# --instructions--
+
+To see the effect of this Bezier curve in action, change the `animation-timing-function` of the element with id of `red` to a `cubic-bezier` function with x1, y1, x2, y2 set respectively to `0, 0, 0.58, 1` as the values. This will make both elements progress through the animation similarly.
+
+# --hints--
+
+The value of the `animation-timing-function` property of the element with the id `red` should be a `cubic-bezier` function with x1, y1, x2, y2 values set respectively to 0, 0, 0.58, 1 .
+
+```js
+assert(
+  $('#red').css('animation-timing-function') == 'cubic-bezier(0, 0, 0.58, 1)'
+);
+```
+
+The element with the id `red` should no longer have the `animation-timing-function` property of `linear`.
+
+```js
+assert($('#red').css('animation-timing-function') !== 'linear');
+```
+
+The value of the `animation-timing-function` property for the element with the id `blue` should not change.
+
+```js
+const blueBallAnimation = __helpers.removeWhiteSpace(
+  $('#blue').css('animation-timing-function')
+);
+assert(
+  blueBallAnimation == 'ease-out' ||
+    blueBallAnimation == 'cubic-bezier(0,0,0.58,1)'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .balls{
+    border-radius: 50%;
+    position: fixed;
+    width: 50px;
+    height: 50px;
+    margin-top: 50px;
+    animation-name: bounce;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+  }
+  #red {
+    background: red;
+    left: 27%;
+    animation-timing-function: linear;
+  }
+  #blue {
+    background: blue;
+    left: 56%;
+    animation-timing-function: ease-out;
+  }
+  @keyframes bounce {
+    0% {
+      top: 0px;
+    }
+    100% {
+      top: 249px;
+    }
+  }
+</style>
+<div class="balls" id= "red"></div>
+<div class="balls" id= "blue"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .balls{
+    border-radius: 50%;
+    position: fixed;
+    width: 50px;
+    height: 50px;
+    margin-top: 50px;
+    animation-name: bounce;
+    animation-duration: 2s;
+    animation-iteration-count: infinite;
+  }
+  #red {
+    background: red;
+    left: 27%;
+    animation-timing-function: cubic-bezier(0, 0, 0.58, 1);
+  }
+  #blue {
+    background: blue;
+    left: 56%;
+    animation-timing-function: ease-out;
+  }
+  @keyframes bounce {
+    0% {
+      top: 0px;
+    }
+    100% {
+      top: 249px;
+    }
+  }
+</style>
+<div class="balls" id= "red"></div>
+<div class="balls" id= "blue"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md
new file mode 100644
index 00000000000..f2c9c9efef7
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-a-css-linear-gradient-to-create-a-striped-element.md
@@ -0,0 +1,113 @@
+---
+id: 587d78a5367417b2b2512ad7
+title: Use a CSS Linear Gradient to Create a Striped Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c6bmQh2'
+forumTopicId: 301072
+dashedName: use-a-css-linear-gradient-to-create-a-striped-element
+---
+
+# --description--
+
+The `repeating-linear-gradient()` function is very similar to `linear-gradient()` with the major difference that it repeats the specified gradient pattern. `repeating-linear-gradient()` accepts a variety of values, but for simplicity, you'll work with an angle value and color stop values in this challenge.
+
+The angle value is the direction of the gradient. Color stops are like width values that mark where a transition takes place, and are given with a percentage or a number of pixels.
+
+In the example demonstrated in the code editor, the gradient starts with the color `yellow` at 0 pixels which blends into the second color `blue` at 40 pixels away from the start. Since the next color stop is also at 40 pixels, the gradient immediately changes to the third color `green`, which itself blends into the fourth color value `red` as that is 80 pixels away from the beginning of the gradient.
+
+For this example, it helps to think about the color stops as pairs where every two colors blend together.
+
+```css
+0px [yellow -- blend -- blue] 40px [green -- blend -- red] 80px
+```
+
+If every two color stop values are the same color, the blending isn't noticeable because it's between the same color, followed by a hard transition to the next color, so you end up with stripes.
+
+# --instructions--
+
+Make stripes by changing the `repeating-linear-gradient()` to use a gradient angle of `45deg`, then set the first two color stops to `yellow`, and finally the second two color stops to `black`.
+
+# --hints--
+
+The angle of the `repeating-linear-gradient()` should be 45deg.
+
+```js
+assert(code.match(/background:\s*?repeating-linear-gradient\(\s*?45deg/gi));
+```
+
+The angle of the `repeating-linear-gradient()` should no longer be 90deg
+
+```js
+assert(!code.match(/90deg/gi));
+```
+
+The color stop at 0 pixels should be `yellow`.
+
+```js
+assert(code.match(/yellow\s+?0(px)?/gi));
+```
+
+The first color stop at 40 pixels should be `yellow`.
+
+```js
+assert(code.match(/yellow\s+?40px/gi));
+```
+
+The second color stop at 40 pixels should be `black`.
+
+```js
+assert(code.match(/yellow\s+?40px,\s*?black\s+?40px/gi));
+```
+
+The last color stop at 80 pixels should be `black`.
+
+```js
+assert(code.match(/black\s+?80px/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+
+  div{
+    border-radius: 20px;
+    width: 70%;
+    height: 400px;
+    margin:  50 auto;
+    background: repeating-linear-gradient(
+      90deg,
+      yellow 0px,
+      blue 40px,
+      green 40px,
+      red 80px
+    );
+  }
+
+</style>
+
+<div></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  div{
+    border-radius: 20px;
+    width: 70%;
+    height: 400px;
+    margin:  50 auto;
+    background: repeating-linear-gradient(
+      45deg,
+      yellow 0px,
+      yellow 40px,
+      black 40px,
+      black 80px
+    );
+  }
+</style>
+<div></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md
new file mode 100644
index 00000000000..f26d2585dd7
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-css-animation-to-change-the-hover-state-of-a-button.md
@@ -0,0 +1,103 @@
+---
+id: 587d78a7367417b2b2512ae0
+title: Use CSS Animation to Change the Hover State of a Button
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cg4vZAa'
+forumTopicId: 301073
+dashedName: use-css-animation-to-change-the-hover-state-of-a-button
+---
+
+# --description--
+
+You can use CSS `@keyframes` to change the color of a button in its hover state.
+
+Here's an example of changing the width of an image on hover:
+
+```html
+<style>
+  img {
+    width: 30px;
+  }
+  img:hover {
+    animation-name: width;
+    animation-duration: 500ms;
+  }
+
+  @keyframes width {
+    100% {
+      width: 40px;
+    }
+  }
+</style>
+
+<img src="https://cdn.freecodecamp.org/curriculum/applied-visual-design/google-logo.png" alt="Google's Logo" />
+```
+
+# --instructions--
+
+Note that `ms` stands for milliseconds, where 1000ms is equal to 1s.
+
+Use CSS `@keyframes` to change the `background-color` of the `button` element so it becomes `#4791d0` when a user hovers over it. The `@keyframes` rule should only have an entry for `100%`.
+
+# --hints--
+
+The @keyframes rule should use the `animation-name` background-color.
+
+```js
+assert(code.match(/@keyframes\s+?background-color\s*?{/g));
+```
+
+There should be one rule under `@keyframes` that changes the `background-color` to `#4791d0` at 100%.
+
+```js
+assert(code.match(/100%\s*?{\s*?background-color:\s*?#4791d0;\s*?}/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  button {
+    border-radius: 5px;
+    color: white;
+    background-color: #0F5897;
+    padding: 5px 10px 8px 10px;
+  }
+
+  button:hover {
+    animation-name: background-color;
+    animation-duration: 500ms;
+  }
+
+
+</style>
+
+<button>Register</button>
+```
+
+# --solutions--
+
+```html
+<style>
+  button {
+    border-radius: 5px;
+    color: white;
+    background-color: #0F5897;
+    padding: 5px 10px 8px 10px;
+  }
+
+  button:hover {
+    animation-name: background-color;
+    animation-duration: 500ms;
+  }
+
+  @keyframes background-color {
+    100% {
+      background-color: #4791d0;
+    }
+  }
+</style>
+<button>Register</button>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.md
new file mode 100644
index 00000000000..f474134e450
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis.md
@@ -0,0 +1,77 @@
+---
+id: 587d78a6367417b2b2512adb
+title: Use the CSS Transform Property skewX to Skew an Element Along the X-Axis
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cyLP8Sr'
+forumTopicId: 301074
+dashedName: use-the-css-transform-property-skewx-to-skew-an-element-along-the-x-axis
+---
+
+# --description--
+
+The next function of the `transform` property is `skewX()`, which skews the selected element along its X (horizontal) axis by a given degree.
+
+The following code skews the paragraph element by -32 degrees along the X-axis.
+
+```css
+p {
+  transform: skewX(-32deg);
+}
+```
+
+# --instructions--
+
+Skew the element with the id of `bottom` by 24 degrees along the X-axis by using the `transform` property.
+
+# --hints--
+
+The element with id `bottom` should be skewed by 24 degrees along its X-axis.
+
+```js
+assert(code.match(/#bottom\s*?{\s*?.*?\s*?transform:\s*?skewX\(24deg\);/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  div {
+    width: 70%;
+    height: 100px;
+    margin:  50px auto;
+  }
+  #top {
+    background-color: red;
+  }
+  #bottom {
+    background-color: blue;
+
+  }
+</style>
+
+<div id="top"></div>
+<div id="bottom"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  div {
+    width: 70%;
+    height: 100px;
+    margin:  50px auto;
+  }
+  #top {
+    background-color: red;
+  }
+  #bottom {
+    background-color: blue;
+    transform: skewX(24deg);
+  }
+</style>
+<div id="top"></div>
+<div id="bottom"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.md
new file mode 100644
index 00000000000..2874000540a
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis.md
@@ -0,0 +1,71 @@
+---
+id: 587d78a6367417b2b2512adc
+title: Use the CSS Transform Property skewY to Skew an Element Along the Y-Axis
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c2MZ2uB'
+forumTopicId: 301075
+dashedName: use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis
+---
+
+# --description--
+
+Given that the `skewX()` function skews the selected element along the X-axis by a given degree, it is no surprise that the `skewY()` property skews an element along the Y (vertical) axis.
+
+# --instructions--
+
+Skew the element with the id of `top` -10 degrees along the Y-axis by using the `transform` property.
+
+# --hints--
+
+The element with id `top` should be skewed by -10 degrees along its Y-axis.
+
+```js
+assert(code.match(/#top\s*?{\s*?.*?\s*?transform:\s*?skewY\(-10deg\);/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  div {
+    width: 70%;
+    height: 100px;
+    margin: 50px auto;
+  }
+  #top {
+    background-color: red;
+
+  }
+  #bottom {
+    background-color: blue;
+    transform: skewX(24deg);
+  }
+</style>
+
+<div id="top"></div>
+<div id="bottom"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  div {
+    width: 70%;
+    height: 100px;
+    margin: 50px auto;
+  }
+  #top {
+    background-color: red;
+    transform: skewY(-10deg);
+  }
+  #bottom {
+    background-color: blue;
+    transform: skewX(24deg);
+  }
+</style>
+<div id="top"></div>
+<div id="bottom"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.md
new file mode 100644
index 00000000000..6c30fe6ee78
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-change-the-size-of-an-element.md
@@ -0,0 +1,95 @@
+---
+id: 587d78a5367417b2b2512ad9
+title: Use the CSS Transform scale Property to Change the Size of an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c2MZVSg'
+forumTopicId: 301076
+dashedName: use-the-css-transform-scale-property-to-change-the-size-of-an-element
+---
+
+# --description--
+
+To change the scale of an element, CSS has the `transform` property, along with its `scale()` function. The following code example doubles the size of all the paragraph elements on the page:
+
+```css
+p {
+  transform: scale(2);
+}
+```
+
+# --instructions--
+
+Increase the size of the element with the id of `ball2` to 1.5 times its original size.
+
+# --hints--
+
+The `transform` property for `#ball2` should be set to scale it to 1.5 times its size.
+
+```js
+assert(
+  code.match(
+    /#ball2\s*?{\s*?left:\s*?65%;\s*?transform:\s*?scale\(1\.5\);\s*?}|#ball2\s*?{\s*?transform:\s*?scale\(1\.5\);\s*?left:\s*?65%;\s*?}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .ball {
+    width: 40px;
+    height: 40px;
+    margin: 50 auto;
+    position: fixed;
+    background: linear-gradient(
+      35deg,
+      #ccffff,
+      #ffcccc
+    );
+    border-radius: 50%;
+  }
+  #ball1 {
+    left: 20%;
+  }
+  #ball2 {
+    left: 65%;
+
+  }
+
+
+</style>
+
+<div class="ball" id= "ball1"></div>
+<div class="ball" id= "ball2"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .ball {
+    width: 40px;
+    height: 40px;
+    margin: 50 auto;
+    position: fixed;
+    background: linear-gradient(
+      35deg,
+      #ccffff,
+      #ffcccc
+    );
+    border-radius: 50%;
+  }
+  #ball1 {
+    left: 20%;
+  }
+  #ball2 {
+    left: 65%;
+    transform: scale(1.5);
+  }
+</style>
+<div class="ball" id= "ball1"></div>
+<div class="ball" id= "ball2"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.md
new file mode 100644
index 00000000000..2c55192985f
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-css-transform-scale-property-to-scale-an-element-on-hover.md
@@ -0,0 +1,79 @@
+---
+id: 587d78a5367417b2b2512ada
+title: Use the CSS Transform scale Property to Scale an Element on Hover
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cyLPJuM'
+forumTopicId: 301077
+dashedName: use-the-css-transform-scale-property-to-scale-an-element-on-hover
+---
+
+# --description--
+
+The `transform` property has a variety of functions that let you scale, move, rotate, skew, etc., your elements. When used with pseudo-classes such as `:hover` that specify a certain state of an element, the `transform` property can easily add interactivity to your elements.
+
+Here's an example to scale the paragraph elements to 2.1 times their original size when a user hovers over them:
+
+```css
+p:hover {
+  transform: scale(2.1);
+}
+```
+
+**Note:** Applying a transform to a `div` element will also affect any child elements contained in the div.
+
+# --instructions--
+
+Add a CSS rule for the `hover` state of the `div` and use the `transform` property to scale the `div` element to 1.1 times its original size when a user hovers over it.
+
+# --hints--
+
+The size of the `div` element should scale 1.1 times when the user hovers over it.
+
+```js
+assert(code.match(/div:hover\s*?{\s*?transform:\s*?scale\(1\.1\);/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  div {
+    width: 70%;
+    height: 100px;
+    margin:  50px auto;
+    background: linear-gradient(
+      53deg,
+      #ccfffc,
+      #ffcccf
+    );
+  }
+
+
+
+</style>
+
+<div></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  div {
+    width: 70%;
+    height: 100px;
+    margin:  50px auto;
+    background: linear-gradient(
+      53deg,
+      #ccfffc,
+      #ffcccf
+    );
+  }
+  div:hover {
+    transform: scale(1.1);
+  }
+</style>
+<div></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.md
new file mode 100644
index 00000000000..cccc37ef210
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-em-tag-to-italicize-text.md
@@ -0,0 +1,118 @@
+---
+id: 587d781a367417b2b2512ab9
+title: Use the em Tag to Italicize Text
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cVJRBtp'
+forumTopicId: 301078
+dashedName: use-the-em-tag-to-italicize-text
+---
+
+# --description--
+
+To emphasize text, you can use the `em` tag. This displays text as italicized, as the browser applies the CSS of `font-style: italic;` to the element.
+
+# --instructions--
+
+Wrap an `em` tag around the contents of the paragraph tag to give it emphasis.
+
+# --hints--
+
+Your code should add an `em` tag to the markup.
+
+```js
+assert($('em').length == 1);
+```
+
+The `em` tag should wrap around the contents of the `p` tag but not the `p` tag itself.
+
+```js
+assert($('p').children().length == 1 && $('em').children().length == 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    height: 25px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Google</h4>
+      <p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    height: 25px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Google</h4>
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.md
new file mode 100644
index 00000000000..3f8e0378ea4
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-s-tag-to-strikethrough-text.md
@@ -0,0 +1,135 @@
+---
+id: 587d781b367417b2b2512aba
+title: Use the s Tag to Strikethrough Text
+challengeType: 0
+videoUrl: ''
+forumTopicId: 301079
+dashedName: use-the-s-tag-to-strikethrough-text
+---
+
+# --description--
+
+To strikethrough text, which is when a horizontal line cuts across the characters, you can use the `s` tag. It shows that a section of text is no longer valid. With the `s` tag, the browser applies the CSS of `text-decoration: line-through;` to the element.
+
+# --instructions--
+
+Wrap the `s` tag around `Google` inside the `h4` tag and then add the word `Alphabet` beside it without the strikethrough formatting.
+
+# --hints--
+
+Your code should add one `s` tag to the markup.
+
+```js
+assert($('s').length == 1);
+```
+
+A `s` tag should wrap around the `Google` text in the `h4` tag. It should not contain the word `Alphabet`.
+
+```js
+assert(
+  $('h4 > s')
+    .text()
+    .match(/Google/gi) &&
+    !$('h4 > s')
+      .text()
+      .match(/Alphabet/gi)
+);
+```
+
+You should include the word `Alphabet` in the `h4` tag, without strikethrough formatting.
+
+```js
+assert(
+  $('h4')
+    .html()
+    .match(/Alphabet/gi)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    height: 25px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Google</h4>
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    height: 25px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4><s>Google</s> Alphabet</h4>
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.md
new file mode 100644
index 00000000000..74301e504ec
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-strong-tag-to-make-text-bold.md
@@ -0,0 +1,128 @@
+---
+id: 587d781a367417b2b2512ab7
+title: Use the strong Tag to Make Text Bold
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/ceJNBSb'
+forumTopicId: 301080
+dashedName: use-the-strong-tag-to-make-text-bold
+---
+
+# --description--
+
+To make text bold, you can use the `strong` tag. This is often used to draw attention to text and symbolize that it is important. With the `strong` tag, the browser applies the CSS of `font-weight: bold;` to the element.
+
+# --instructions--
+
+Wrap a `strong` tag around the text `Stanford University` inside the `p` tag (do not include the period).
+
+# --hints--
+
+Your code should add one `strong` tag to the markup.
+
+```js
+assert($('strong').length == 1);
+```
+
+The `strong` tag should be inside the `p` tag.
+
+```js
+assert($('p').children('strong').length == 1);
+```
+
+The `strong` tag should wrap around the words `Stanford University`.
+
+```js
+assert(
+  $('strong')
+    .text()
+    .match(/^Stanford University\.?$/gi)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    height: 25px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Google</h4>
+      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at Stanford University.</p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    height: 25px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Google</h4>
+      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.md
new file mode 100644
index 00000000000..e5dc9362c67
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-text-transform-property-to-make-text-uppercase.md
@@ -0,0 +1,138 @@
+---
+id: 587d781c367417b2b2512ac0
+title: Use the text-transform Property to Make Text Uppercase
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cvVZQSP'
+forumTopicId: 301081
+dashedName: use-the-text-transform-property-to-make-text-uppercase
+---
+
+# --description--
+
+The `text-transform` property in CSS is used to change the appearance of text. It's a convenient way to make sure text on a webpage appears consistently, without having to change the text content of the actual HTML elements.
+
+The following table shows how the different `text-transform`values change the example text "Transform me".
+
+<table class='table table-striped'><thead><tr><th>Value</th><th>Result</th></tr></thead><tbody><tr><td><code>lowercase</code></td><td>"transform me"</td></tr><tr><td><code>uppercase</code></td><td>"TRANSFORM ME"</td></tr><tr><td><code>capitalize</code></td><td>"Transform Me"</td></tr><tr><td><code>initial</code></td><td>Use the default value</td></tr><tr><td><code>inherit</code></td><td>Use the <code>text-transform</code> value from the parent element</td></tr><tr><td><code>none</code></td><td><strong>Default:</strong> Use the original text</td></tr></tbody></table>
+
+# --instructions--
+
+Transform the text of the `h4` to be uppercase using the `text-transform` property.
+
+# --hints--
+
+The `h4` text should be `uppercase`.
+
+```js
+assert($('h4').css('text-transform') === 'uppercase');
+```
+
+The original text of the h4 should not be changed.
+
+```js
+assert($('h4').text() !== $('h4').text().toUpperCase());
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    background-color: rgba(45, 45, 45, 0.1);
+    padding: 10px;
+    font-size: 27px;
+
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+    opacity: 0.7;
+  }
+  #thumbnail {
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard" id="thumbnail">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Alphabet</h4>
+      <hr>
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    background-color: rgba(45, 45, 45, 0.1);
+    padding: 10px;
+    font-size: 27px;
+    text-transform: uppercase;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+    opacity: 0.7;
+  }
+  #thumbnail {
+    box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard" id="thumbnail">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Alphabet</h4>
+      <hr>
+      <p><em>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</em></p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md
new file mode 100644
index 00000000000..a0444987da6
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/applied-visual-design/use-the-u-tag-to-underline-text.md
@@ -0,0 +1,120 @@
+---
+id: 587d781a367417b2b2512ab8
+title: Use the u Tag to Underline Text
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cN6aQCL'
+forumTopicId: 301082
+dashedName: use-the-u-tag-to-underline-text
+---
+
+# --description--
+
+To underline text, you can use the `u` tag. This is often used to signify that a section of text is important, or something to remember. With the `u` tag, the browser applies the CSS of `text-decoration: underline;` to the element.
+
+# --instructions--
+
+Wrap the `u` tag only around the text `Ph.D. students`.
+
+**Note:** Try to avoid using the `u` tag when it could be confused for a link. Anchor tags also have a default underlined formatting.
+
+# --hints--
+
+Your code should add a `u` tag to the markup.
+
+```js
+assert($('u').length === 1);
+```
+
+The `u` tag should wrap around the text `Ph.D. students`.
+
+```js
+assert($('u').text() === 'Ph.D. students');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    height: 25px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Google</h4>
+      <p>Google was founded by Larry Page and Sergey Brin while they were Ph.D. students at <strong>Stanford University</strong>.</p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  h4 {
+    text-align: center;
+    height: 25px;
+  }
+  p {
+    text-align: justify;
+  }
+  .links {
+    text-align: left;
+    color: black;
+  }
+  .fullCard {
+    width: 245px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    margin: 10px 5px;
+    padding: 4px;
+  }
+  .cardContent {
+    padding: 10px;
+  }
+  .cardText {
+    margin-bottom: 30px;
+  }
+</style>
+<div class="fullCard">
+  <div class="cardContent">
+    <div class="cardText">
+      <h4>Google</h4>
+      <p>Google was founded by Larry Page and Sergey Brin while they were <u>Ph.D. students</u> at <strong>Stanford University</strong>.</p>
+    </div>
+    <div class="cardLinks">
+      <a href="https://en.wikipedia.org/wiki/Larry_Page" target="_blank" class="links">Larry Page</a><br><br>
+      <a href="https://en.wikipedia.org/wiki/Sergey_Brin" target="_blank" class="links">Sergey Brin</a>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md
new file mode 100644
index 00000000000..200db3a4434
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-a-negative-margin-to-an-element.md
@@ -0,0 +1,115 @@
+---
+id: bad87fee1348bd9aedf08823
+title: Add a Negative Margin to an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cnpyGs3'
+forumTopicId: 16166
+dashedName: add-a-negative-margin-to-an-element
+---
+
+# --description--
+
+An element's `margin` controls the amount of space between an element's `border` and surrounding elements.
+
+If you set an element's `margin` to a negative value, the element will grow larger.
+
+# --instructions--
+
+Try to set the `margin` to a negative value like the one for the red box.
+
+Change the `margin` of the blue box to `-15px`, so it fills the entire horizontal width of the yellow box around it.
+
+# --hints--
+
+Your `blue-box` class should give elements `-15px` of `margin`.
+
+```js
+assert($('.blue-box').css('margin-top') === '-15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 10px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    padding: 20px;
+    margin: -15px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+    padding: 20px;
+    margin: 20px;
+  }
+</style>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 10px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    padding: 20px;
+    margin: -15px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+    padding: 20px;
+    margin: 20px;
+    margin-top: -15px;
+  }
+</style>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-borders-around-your-elements.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
new file mode 100644
index 00000000000..0aa95c6af1f
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-borders-around-your-elements.md
@@ -0,0 +1,190 @@
+---
+id: bad87fee1348bd9bedf08813
+title: Add Borders Around Your Elements
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c2MvnHZ'
+forumTopicId: 16630
+dashedName: add-borders-around-your-elements
+---
+
+# --description--
+
+CSS borders have properties like `style`, `color` and `width`.
+
+For example, if we wanted to create a red, 5 pixel border around an HTML element, we could use this class:
+
+```html
+<style>
+  .thin-red-border {
+    border-color: red;
+    border-width: 5px;
+    border-style: solid;
+  }
+</style>
+```
+
+# --instructions--
+
+Create a class called `thick-green-border`. This class should add a 10px, solid, green border around an HTML element. Apply the class to your cat photo.
+
+Remember that you can apply multiple classes to an element using its `class` attribute, by separating each class name with a space. For example:
+
+```html
+<img class="class1 class2">
+```
+
+# --hints--
+
+Your `img` element should have the class `smaller-image`.
+
+```js
+assert($('img').hasClass('smaller-image'));
+```
+
+Your `img` element should have the class `thick-green-border`.
+
+```js
+assert($('img').hasClass('thick-green-border'));
+```
+
+Your image should have a border width of `10px`.
+
+```js
+assert(
+  $('img').hasClass('thick-green-border') &&
+    parseInt($('img').css('border-top-width'), 10) >= 8 &&
+    parseInt($('img').css('border-top-width'), 10) <= 12
+);
+```
+
+Your image should have a border style of `solid`.
+
+```js
+assert($('img').css('border-right-style') === 'solid');
+```
+
+The border around your `img` element should be green.
+
+```js
+assert($('img').css('border-left-color') === 'rgb(0, 128, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+
+  .thick-green-border {
+    border-width: 10px;
+    border-color: green;
+    border-style: solid;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md
new file mode 100644
index 00000000000..f73e198f201
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-different-margins-to-each-side-of-an-element.md
@@ -0,0 +1,136 @@
+---
+id: bad87fee1248bd9aedf08824
+title: Add Different Margins to Each Side of an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cg4RWh4'
+forumTopicId: 16633
+dashedName: add-different-margins-to-each-side-of-an-element
+---
+
+# --description--
+
+Sometimes you will want to customize an element so that it has a different `margin` on each of its sides.
+
+CSS allows you to control the `margin` of all four individual sides of an element with the `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` properties.
+
+# --instructions--
+
+Give the blue box a `margin` of `40px` on its top and left side, but only `20px` on its bottom and right side.
+
+# --hints--
+
+Your `blue-box` class should give the top of elements `40px` of `margin`.
+
+```js
+assert($('.blue-box').css('margin-top') === '40px');
+```
+
+Your `blue-box` class should give the right of elements `20px` of `margin`.
+
+```js
+assert($('.blue-box').css('margin-right') === '20px');
+```
+
+Your `blue-box` class should give the bottom of elements `20px` of `margin`.
+
+```js
+assert($('.blue-box').css('margin-bottom') === '20px');
+```
+
+Your `blue-box` class should give the left of elements `40px` of `margin`.
+
+```js
+assert($('.blue-box').css('margin-left') === '40px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 10px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    margin-top: 40px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    margin-left: 40px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 10px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    margin-top: 40px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    margin-left: 40px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+    margin-top: 40px;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    margin-left: 40px;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md
new file mode 100644
index 00000000000..b0699d0fc87
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-different-padding-to-each-side-of-an-element.md
@@ -0,0 +1,136 @@
+---
+id: bad87fee1348bd9aedf08824
+title: Add Different Padding to Each Side of an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cB7mwUw'
+forumTopicId: 16634
+dashedName: add-different-padding-to-each-side-of-an-element
+---
+
+# --description--
+
+Sometimes you will want to customize an element so that it has different amounts of `padding` on each of its sides.
+
+CSS allows you to control the `padding` of all four individual sides of an element with the `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` properties.
+
+# --instructions--
+
+Give the blue box a `padding` of `40px` on its top and left side, but only `20px` on its bottom and right side.
+
+# --hints--
+
+Your `blue-box` class should give the top of the elements `40px` of `padding`.
+
+```js
+assert($('.blue-box').css('padding-top') === '40px');
+```
+
+Your `blue-box` class should give the right of the elements `20px` of `padding`.
+
+```js
+assert($('.blue-box').css('padding-right') === '20px');
+```
+
+Your `blue-box` class should give the bottom of the elements `20px` of `padding`.
+
+```js
+assert($('.blue-box').css('padding-bottom') === '20px');
+```
+
+Your `blue-box` class should give the left of the elements `40px` of `padding`.
+
+```js
+assert($('.blue-box').css('padding-left') === '40px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 10px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    padding-top: 40px;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    padding-left: 40px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 10px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    padding-top: 40px;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    padding-left: 40px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+    padding-top: 40px;
+    padding-right: 20px;
+    padding-bottom: 20px;
+    padding-left: 40px;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md
new file mode 100644
index 00000000000..3e24a525849
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/add-rounded-corners-with-border-radius.md
@@ -0,0 +1,164 @@
+---
+id: bad87fee1348bd9aedf08814
+title: Add Rounded Corners with border-radius
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cbZm2hg'
+forumTopicId: 16649
+dashedName: add-rounded-corners-with-border-radius
+---
+
+# --description--
+
+Your cat photo currently has sharp corners. We can round out those corners with a CSS property called `border-radius`.
+
+# --instructions--
+
+You can specify a `border-radius` with pixels. Give your cat photo a `border-radius` of `10px`.
+
+**Note:** This challenge allows for multiple possible solutions. For example, you may add `border-radius` to either the `.thick-green-border` class or the `.smaller-image` class.
+
+# --hints--
+
+Your image element should have the class `thick-green-border`.
+
+```js
+assert($('img').hasClass('thick-green-border'));
+```
+
+Your image should have a border radius of `10px`.
+
+```js
+assert(
+  $('img').css('border-top-left-radius') === '10px' &&
+    $('img').css('border-top-right-radius') === '10px' &&
+    $('img').css('border-bottom-left-radius') === '10px' &&
+    $('img').css('border-bottom-right-radius') === '10px'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+  }
+
+  .smaller-image {
+    width: 100px;
+    border-radius: 10px;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md
new file mode 100644
index 00000000000..31a48593e00
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/adjust-the-margin-of-an-element.md
@@ -0,0 +1,116 @@
+---
+id: bad87fee1348bd9aedf08822
+title: Adjust the Margin of an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cVJarHW'
+forumTopicId: 16654
+dashedName: adjust-the-margin-of-an-element
+---
+
+# --description--
+
+An element's `margin` controls the amount of space between an element's `border` and surrounding elements.
+
+Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has a bigger `margin` than the blue box, making it appear smaller.
+
+When you increase the blue box's `margin`, it will increase the distance between its border and surrounding elements.
+
+# --instructions--
+
+Change the `margin` of the blue box to match that of the red box.
+
+# --hints--
+
+Your `blue-box` class should give elements `20px` of `margin`.
+
+```js
+assert($('.blue-box').css('margin-top') === '20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 10px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    padding: 20px;
+    margin: 20px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+    padding: 20px;
+    margin: 10px;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 10px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    padding: 20px;
+    margin: 20px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+    padding: 20px;
+    margin: 20px;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md
new file mode 100644
index 00000000000..cbbd38c5d89
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/adjust-the-padding-of-an-element.md
@@ -0,0 +1,118 @@
+---
+id: bad88fee1348bd9aedf08825
+title: Adjust the Padding of an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cED8ZC2'
+forumTopicId: 301083
+dashedName: adjust-the-padding-of-an-element
+---
+
+# --description--
+
+Now let's put our Cat Photo App away for a little while and learn more about styling HTML.
+
+You may have already noticed this, but all HTML elements are essentially little rectangles.
+
+Three important properties control the space that surrounds each HTML element: `padding`, `border`, and `margin`.
+
+An element's `padding` controls the amount of space between the element's content and its `border`.
+
+Here, we can see that the blue box and the red box are nested within the yellow box. Note that the red box has more `padding` than the blue box.
+
+When you increase the blue box's `padding`, it will increase the distance (`padding`) between the text and the border around it.
+
+# --instructions--
+
+Change the `padding` of your blue box to match that of your red box.
+
+# --hints--
+
+Your `blue-box` class should give elements `20px` of `padding`.
+
+```js
+assert($('.blue-box').css('padding-top') === '20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 10px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+    padding: 10px;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 10px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    padding: 20px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+    padding: 20px;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md
new file mode 100644
index 00000000000..1d49492240f
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/attach-a-fallback-value-to-a-css-variable.md
@@ -0,0 +1,272 @@
+---
+id: 5a9d7286424fe3d0e10cad13
+title: Attach a Fallback value to a CSS Variable
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c6bDNfp'
+forumTopicId: 301084
+dashedName: attach-a-fallback-value-to-a-css-variable
+---
+
+# --description--
+
+When using your variable as a CSS property value, you can attach a fallback value that your browser will revert to if the given variable is invalid.
+
+**Note:** This fallback is not used to increase browser compatibility, and it will not work on IE browsers. Rather, it is used so that the browser has a color to display if it cannot find your variable.
+
+Here's how you do it:
+
+```css
+background: var(--penguin-skin, black);
+```
+
+This will set background to `black` if your variable wasn't set. Note that this can be useful for debugging.
+
+# --instructions--
+
+It looks like there is a problem with the variables supplied to the `.penguin-top` and `.penguin-bottom` classes. Rather than fix the typo, add a fallback value of `black` to the `background` property of the `.penguin-top` and `.penguin-bottom` classes.
+
+# --hints--
+
+The fallback value of `black` should be used in the `background` property of the `penguin-top` class.
+
+```js
+assert(
+  code.match(
+    /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
+  )
+);
+```
+
+The fallback value of `black` should be used in `background` property of the `penguin-bottom` class.
+
+```js
+assert(
+  code.match(
+    /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\(\s*?--pengiun-skin\s*?,\s*?black\s*?\)\s*?;[\s\S]*}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .penguin {
+    --penguin-skin: black;
+    --penguin-belly: gray;
+    --penguin-beak: yellow;
+    position: relative;
+    margin: auto;
+    display: block;
+    margin-top: 5%;
+    width: 300px;
+    height: 300px;
+  }
+
+  .penguin-top {
+    top: 10%;
+    left: 25%;
+
+    /* Change code below this line */
+    background: var(--pengiun-skin);
+    /* Change code above this line */
+
+    width: 50%;
+    height: 45%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .penguin-bottom {
+    top: 40%;
+    left: 23.5%;
+
+    /* Change code below this line */
+    background: var(--pengiun-skin);
+    /* Change code above this line */
+
+    width: 53%;
+    height: 45%;
+    border-radius: 70% 70% 100% 100%;
+  }
+
+  .right-hand {
+    top: 0%;
+    left: -5%;
+    background: var(--penguin-skin, black);
+    width: 30%;
+    height: 60%;
+    border-radius: 30% 30% 120% 30%;
+    transform: rotate(45deg);
+    z-index: -1;
+  }
+
+  .left-hand {
+    top: 0%;
+    left: 75%;
+    background: var(--penguin-skin, black);
+    width: 30%;
+    height: 60%;
+    border-radius: 30% 30% 30% 120%;
+    transform: rotate(-45deg);
+    z-index: -1;
+  }
+
+  .right-cheek {
+    top: 15%;
+    left: 35%;
+    background: var(--penguin-belly, white);
+    width: 60%;
+    height: 70%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .left-cheek {
+    top: 15%;
+    left: 5%;
+    background: var(--penguin-belly, white);
+    width: 60%;
+    height: 70%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .belly {
+    top: 60%;
+    left: 2.5%;
+    background: var(--penguin-belly, white);
+    width: 95%;
+    height: 100%;
+    border-radius: 120% 120% 100% 100%;
+  }
+
+  .right-feet {
+    top: 85%;
+    left: 60%;
+    background: var(--penguin-beak, orange);
+    width: 15%;
+    height: 30%;
+    border-radius: 50% 50% 50% 50%;
+    transform: rotate(-80deg);
+    z-index: -2222;
+  }
+
+  .left-feet {
+    top: 85%;
+    left: 25%;
+    background: var(--penguin-beak, orange);
+    width: 15%;
+    height: 30%;
+    border-radius: 50% 50% 50% 50%;
+    transform: rotate(80deg);
+    z-index: -2222;
+  }
+
+  .right-eye {
+    top: 45%;
+    left: 60%;
+    background: black;
+    width: 15%;
+    height: 17%;
+    border-radius: 50%;
+  }
+
+  .left-eye {
+    top: 45%;
+    left: 25%;
+    background: black;
+    width: 15%;
+    height: 17%;
+    border-radius: 50%;
+  }
+
+  .sparkle {
+    top: 25%;
+    left: 15%;
+    background: white;
+    width: 35%;
+    height: 35%;
+    border-radius: 50%;
+  }
+
+  .blush-right {
+    top: 65%;
+    left: 15%;
+    background: pink;
+    width: 15%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .blush-left {
+    top: 65%;
+    left: 70%;
+    background: pink;
+    width: 15%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .beak-top {
+    top: 60%;
+    left: 40%;
+    background: var(--penguin-beak, orange);
+    width: 20%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .beak-bottom {
+    top: 65%;
+    left: 42%;
+    background: var(--penguin-beak, orange);
+    width: 16%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  body {
+    background: #c6faf1;
+  }
+
+  .penguin * {
+    position: absolute;
+  }
+</style>
+<div class="penguin">
+  <div class="penguin-bottom">
+    <div class="right-hand"></div>
+    <div class="left-hand"></div>
+    <div class="right-feet"></div>
+    <div class="left-feet"></div>
+  </div>
+  <div class="penguin-top">
+    <div class="right-cheek"></div>
+    <div class="left-cheek"></div>
+    <div class="belly"></div>
+    <div class="right-eye">
+      <div class="sparkle"></div>
+    </div>
+    <div class="left-eye">
+      <div class="sparkle"></div>
+    </div>
+    <div class="blush-right"></div>
+    <div class="blush-left"></div>
+    <div class="beak-top"></div>
+    <div class="beak-bottom"></div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .penguin-top {
+    background: var(--pengiun-skin, black);
+  }
+  .penguin-bottom {
+    background: var(--pengiun-skin, black);
+  }
+</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md
new file mode 100644
index 00000000000..6521d7b110a
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/change-a-variable-for-a-specific-area.md
@@ -0,0 +1,254 @@
+---
+id: 5a9d72a1424fe3d0e10cad15
+title: Change a variable for a specific area
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cdRwbuW'
+forumTopicId: 301085
+dashedName: change-a-variable-for-a-specific-area
+---
+
+# --description--
+
+When you create your variables in `:root` they will set the value of that variable for the whole page.
+
+You can then overwrite these variables by setting them again within a specific selector.
+
+# --instructions--
+
+Change the value of `--penguin-belly` to `white` in the `penguin` class.
+
+# --hints--
+
+The `penguin` class should reassign the `--penguin-belly` variable to `white`.
+
+```js
+assert(
+  code.match(/\.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
+);
+```
+
+The `penguin` class should not contain the `background-color` property.
+
+```js
+assert(
+  code.match(/^((?!background-color\s*?:\s*?)[\s\S])*$/g)
+);
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  :root {
+    --penguin-skin: gray;
+    --penguin-belly: pink;
+    --penguin-beak: orange;
+  }
+
+  body {
+    background: var(--penguin-belly, #c6faf1);
+  }
+
+  .penguin {
+    /* Only change code below this line */
+
+    /* Only change code above this line */
+    position: relative;
+    margin: auto;
+    display: block;
+    margin-top: 5%;
+    width: 300px;
+    height: 300px;
+  }
+
+  .right-cheek {
+    top: 15%;
+    left: 35%;
+    background: var(--penguin-belly, pink);
+    width: 60%;
+    height: 70%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .left-cheek {
+    top: 15%;
+    left: 5%;
+    background: var(--penguin-belly, pink);
+    width: 60%;
+    height: 70%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .belly {
+    top: 60%;
+    left: 2.5%;
+    background: var(--penguin-belly, pink);
+    width: 95%;
+    height: 100%;
+    border-radius: 120% 120% 100% 100%;
+  }
+
+  .penguin-top {
+    top: 10%;
+    left: 25%;
+    background: var(--penguin-skin, gray);
+    width: 50%;
+    height: 45%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .penguin-bottom {
+    top: 40%;
+    left: 23.5%;
+    background: var(--penguin-skin, gray);
+    width: 53%;
+    height: 45%;
+    border-radius: 70% 70% 100% 100%;
+  }
+
+  .right-hand {
+    top: 0%;
+    left: -5%;
+    background: var(--penguin-skin, gray);
+    width: 30%;
+    height: 60%;
+    border-radius: 30% 30% 120% 30%;
+    transform: rotate(45deg);
+    z-index: -1;
+  }
+
+  .left-hand {
+    top: 0%;
+    left: 75%;
+    background: var(--penguin-skin, gray);
+    width: 30%;
+    height: 60%;
+    border-radius: 30% 30% 30% 120%;
+    transform: rotate(-45deg);
+    z-index: -1;
+  }
+
+  .right-feet {
+    top: 85%;
+    left: 60%;
+    background: var(--penguin-beak, orange);
+    width: 15%;
+    height: 30%;
+    border-radius: 50% 50% 50% 50%;
+    transform: rotate(-80deg);
+    z-index: -2222;
+  }
+
+  .left-feet {
+    top: 85%;
+    left: 25%;
+    background: var(--penguin-beak, orange);
+    width: 15%;
+    height: 30%;
+    border-radius: 50% 50% 50% 50%;
+    transform: rotate(80deg);
+    z-index: -2222;
+  }
+
+  .right-eye {
+    top: 45%;
+    left: 60%;
+    background: black;
+    width: 15%;
+    height: 17%;
+    border-radius: 50%;
+  }
+
+  .left-eye {
+    top: 45%;
+    left: 25%;
+    background: black;
+    width: 15%;
+    height: 17%;
+    border-radius: 50%;
+  }
+
+  .sparkle {
+    top: 25%;
+    left: 15%;
+    background: white;
+    width: 35%;
+    height: 35%;
+    border-radius: 50%;
+  }
+
+  .blush-right {
+    top: 65%;
+    left: 15%;
+    background: pink;
+    width: 15%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .blush-left {
+    top: 65%;
+    left: 70%;
+    background: pink;
+    width: 15%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .beak-top {
+    top: 60%;
+    left: 40%;
+    background: var(--penguin-beak, orange);
+    width: 20%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .beak-bottom {
+    top: 65%;
+    left: 42%;
+    background: var(--penguin-beak, orange);
+    width: 16%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .penguin * {
+    position: absolute;
+  }
+</style>
+<div class="penguin">
+  <div class="penguin-bottom">
+    <div class="right-hand"></div>
+    <div class="left-hand"></div>
+    <div class="right-feet"></div>
+    <div class="left-feet"></div>
+  </div>
+  <div class="penguin-top">
+    <div class="right-cheek"></div>
+    <div class="left-cheek"></div>
+    <div class="belly"></div>
+    <div class="right-eye">
+      <div class="sparkle"></div>
+    </div>
+    <div class="left-eye">
+      <div class="sparkle"></div>
+    </div>
+    <div class="blush-right"></div>
+    <div class="blush-left"></div>
+    <div class="beak-top"></div>
+    <div class="beak-bottom"></div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+.penguin {--penguin-belly: white;}
+</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/change-the-color-of-text.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/change-the-color-of-text.md
new file mode 100644
index 00000000000..7057023cd31
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/change-the-color-of-text.md
@@ -0,0 +1,122 @@
+---
+id: bad87fee1348bd9aedf08803
+title: Change the Color of Text
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cRkVmSm'
+forumTopicId: 16775
+dashedName: change-the-color-of-text
+---
+
+# --description--
+
+Now let's change the color of some of our text.
+
+We can do this by changing the `style` of your `h2` element.
+
+The property that is responsible for the color of an element's text is the `color` style property.
+
+Here's how you would set your `h2` element's text color to blue:
+
+```html
+<h2 style="color: blue;">CatPhotoApp</h2>
+```
+
+Note that it is a good practice to end inline `style` declarations with a `;` .
+
+# --instructions--
+
+Change your `h2` element's style so that its text color is red.
+
+# --hints--
+
+Your `h2` element should have a `style` declaration.
+
+```js
+assert($('h2').attr('style'));
+```
+
+Your `h2` element should have color set to `red`.
+
+```js
+assert($('h2')[0].style.color === 'red');
+```
+
+Your `style` declaration should end with a `;` .
+
+```js
+assert($('h2').attr('style') && $('h2').attr('style').endsWith(';'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<h2 style="color: red;">CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md
new file mode 100644
index 00000000000..bbd64626de7
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/change-the-font-size-of-an-element.md
@@ -0,0 +1,119 @@
+---
+id: bad87fee1348bd9aedf08806
+title: Change the Font Size of an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c3bvDc8'
+forumTopicId: 16777
+dashedName: change-the-font-size-of-an-element
+---
+
+# --description--
+
+Font size is controlled by the `font-size` CSS property, like this:
+
+```css
+h1 {
+  font-size: 30px;
+}
+```
+
+# --instructions--
+
+Inside the same `<style>` tag that contains your `red-text` class, create an entry for `p` elements and set the `font-size` to 16 pixels (`16px`).
+
+# --hints--
+
+Between the `style` tags, give the `p` elements `font-size` of `16px`. Browser and Text zoom should be at 100%.
+
+```js
+assert(code.match(/p\s*{\s*font-size\s*:\s*16\s*px\s*;\s*}/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .red-text {
+    color: red;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<style>
+  .red-text {
+    color: red;
+  }
+  p {
+    font-size: 16px;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/create-a-custom-css-variable.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/create-a-custom-css-variable.md
new file mode 100644
index 00000000000..e23df3927a3
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/create-a-custom-css-variable.md
@@ -0,0 +1,241 @@
+---
+id: 5a9d726c424fe3d0e10cad11
+title: Create a custom CSS Variable
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cQd27Hr'
+forumTopicId: 301086
+dashedName: create-a-custom-css-variable
+---
+
+# --description--
+
+To create a CSS variable, you just need to give it a name with two hyphens in front of it and assign it a value like this:
+
+```css
+--penguin-skin: gray;
+```
+
+This will create a variable named `--penguin-skin` and assign it the value of `gray`. Now you can use that variable elsewhere in your CSS to change the value of other properties to gray.
+
+# --instructions--
+
+In the `penguin` class, create a variable name `--penguin-skin` and give it a value of `gray`.
+
+# --hints--
+
+`penguin` class should declare the `--penguin-skin` variable and assign it to `gray`.
+
+```js
+assert(
+  code.match(/\.penguin\s*\{[^{}]*?--penguin-skin\s*:\s*gr[ae]y\s*;[^{}]*?\}/gi)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .penguin {
+    /* Only change code below this line */
+
+    /* Only change code above this line */
+    position: relative;
+    margin: auto;
+    display: block;
+    margin-top: 5%;
+    width: 300px;
+    height: 300px;
+  }
+
+  .penguin-top {
+    top: 10%;
+    left: 25%;
+    background: black;
+    width: 50%;
+    height: 45%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .penguin-bottom {
+    top: 40%;
+    left: 23.5%;
+    background: black;
+    width: 53%;
+    height: 45%;
+    border-radius: 70% 70% 100% 100%;
+  }
+
+  .right-hand {
+    top: 0%;
+    left: -5%;
+    background: black;
+    width: 30%;
+    height: 60%;
+    border-radius: 30% 30% 120% 30%;
+    transform: rotate(45deg);
+    z-index: -1;
+  }
+
+  .left-hand {
+    top: 0%;
+    left: 75%;
+    background: black;
+    width: 30%;
+    height: 60%;
+    border-radius: 30% 30% 30% 120%;
+    transform: rotate(-45deg);
+    z-index: -1;
+  }
+
+  .right-cheek {
+    top: 15%;
+    left: 35%;
+    background: white;
+    width: 60%;
+    height: 70%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .left-cheek {
+    top: 15%;
+    left: 5%;
+    background: white;
+    width: 60%;
+    height: 70%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .belly {
+    top: 60%;
+    left: 2.5%;
+    background: white;
+    width: 95%;
+    height: 100%;
+    border-radius: 120% 120% 100% 100%;
+  }
+
+  .right-feet {
+    top: 85%;
+    left: 60%;
+    background: orange;
+    width: 15%;
+    height: 30%;
+    border-radius: 50% 50% 50% 50%;
+    transform: rotate(-80deg);
+    z-index: -2222;
+  }
+
+  .left-feet {
+    top: 85%;
+    left: 25%;
+    background: orange;
+    width: 15%;
+    height: 30%;
+    border-radius: 50% 50% 50% 50%;
+    transform: rotate(80deg);
+    z-index: -2222;
+  }
+
+  .right-eye {
+    top: 45%;
+    left: 60%;
+    background: black;
+    width: 15%;
+    height: 17%;
+    border-radius: 50%;
+  }
+
+  .left-eye {
+    top: 45%;
+    left: 25%;
+    background: black;
+    width: 15%;
+    height: 17%;
+    border-radius: 50%;
+  }
+
+  .sparkle {
+    top: 25%;
+    left: 15%;
+    background: white;
+    width: 35%;
+    height: 35%;
+    border-radius: 50%;
+  }
+
+  .blush-right {
+    top: 65%;
+    left: 15%;
+    background: pink;
+    width: 15%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .blush-left {
+    top: 65%;
+    left: 70%;
+    background: pink;
+    width: 15%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .beak-top {
+    top: 60%;
+    left: 40%;
+    background: orange;
+    width: 20%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .beak-bottom {
+    top: 65%;
+    left: 42%;
+    background: orange;
+    width: 16%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  body {
+    background:#c6faf1;
+  }
+
+  .penguin * {
+    position: absolute;
+  }
+</style>
+<div class="penguin">
+  <div class="penguin-bottom">
+    <div class="right-hand"></div>
+    <div class="left-hand"></div>
+    <div class="right-feet"></div>
+    <div class="left-feet"></div>
+  </div>
+  <div class="penguin-top">
+    <div class="right-cheek"></div>
+    <div class="left-cheek"></div>
+    <div class="belly"></div>
+    <div class="right-eye">
+      <div class="sparkle"></div>
+    </div>
+    <div class="left-eye">
+      <div class="sparkle"></div>
+    </div>
+    <div class="blush-right"></div>
+    <div class="blush-left"></div>
+    <div class="beak-top"></div>
+    <div class="beak-bottom"></div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.penguin {--penguin-skin: gray;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md
new file mode 100644
index 00000000000..aad5fc61870
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/give-a-background-color-to-a-div-element.md
@@ -0,0 +1,176 @@
+---
+id: bad87fed1348bd9aede07836
+title: Give a Background Color to a div Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cdRKMCk'
+forumTopicId: 18190
+dashedName: give-a-background-color-to-a-div-element
+---
+
+# --description--
+
+You can set an element's background color with the `background-color` property.
+
+For example, if you wanted an element's background color to be `green`, you'd put this within your `style` element:
+
+```css
+.green-background {
+  background-color: green;
+}
+```
+
+# --instructions--
+
+Create a class called `silver-background` with the `background-color` of `silver`. Assign this class to your `div` element.
+
+# --hints--
+
+Your`div` element should have the class `silver-background`.
+
+```js
+assert($('div').hasClass('silver-background'));
+```
+
+Your `div` element should have a silver background.
+
+```js
+assert($('div').css('background-color') === 'rgb(192, 192, 192)');
+```
+
+A class named `silver-background` should be defined within the `style` element and the value of `silver` should be assigned to the `background-color` property.
+
+```js
+assert(code.match(/\.silver-background\s*{\s*background-color\s*:\s*silver\s*;?\s*}/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+
+  .silver-background {
+    background-color: silver;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div class="silver-background">
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/import-a-google-font.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/import-a-google-font.md
new file mode 100644
index 00000000000..7448cf89e1a
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/import-a-google-font.md
@@ -0,0 +1,175 @@
+---
+id: bad87fee1348bd9aedf08807
+title: Import a Google Font
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cM9MRsJ'
+forumTopicId: 18200
+dashedName: import-a-google-font
+---
+
+# --description--
+
+In addition to specifying common fonts that are found on most operating systems, we can also specify non-standard, custom web fonts for use on our website. There are many sources for web fonts on the Internet. For this example we will focus on the Google Fonts library.
+
+Google Fonts is a free library of web fonts that you can use in your CSS by referencing the font's URL.
+
+So, let's go ahead and import and apply a Google font (note that if Google is blocked in your country, you will need to skip this challenge).
+
+To import a Google Font, you can copy the font's URL from the Google Fonts library and then paste it in your HTML. For this challenge, we'll import the `Lobster` font. To do this, copy the following code snippet and paste it into the top of your code editor (before the opening `style` element):
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+```
+
+Now you can use the `Lobster` font in your CSS by using `Lobster` as the FAMILY_NAME as in the following example:
+
+```css
+font-family: FAMILY_NAME, GENERIC_NAME;
+```
+
+The GENERIC_NAME is optional, and is a fallback font in case the other specified font is not available. This is covered in the next challenge.
+
+Family names are case-sensitive and need to be wrapped in quotes if there is a space in the name. For example, you need quotes to use the `"Open Sans"` font, but not to use the `Lobster` font.
+
+# --instructions--
+
+Import the `Lobster` font to your web page. Then, use an element selector to set `Lobster` as the `font-family` for your `h2` element.
+
+# --hints--
+
+You should import the `Lobster` font.
+
+```js
+assert($('link[href*="googleapis" i]').length);
+```
+
+Your `h2` element should use the font `Lobster`.
+
+```js
+assert(
+  $('h2')
+    .css('font-family')
+    .match(/lobster/i)
+);
+```
+
+You should only use an `h2` element selector to change the font.
+
+```js
+assert(
+  /\s*[^\.]h2\s*\{\s*font-family\s*:\s*('|"|)Lobster\1\s*(,\s*('|"|)[a-z -]+\3\s*)?(;\s*\}|\})/gi.test(
+    code
+  )
+);
+```
+
+Your `p` element should still use the font `monospace`.
+
+```js
+assert(
+  $('p')
+    .css('font-family')
+    .match(/monospace/i)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .red-text {
+    color: red;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  h2 {
+    font-family: Lobster;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md
new file mode 100644
index 00000000000..214fac94d8a
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/improve-compatibility-with-browser-fallbacks.md
@@ -0,0 +1,70 @@
+---
+id: 5b7d72c338cd7e35b63f3e14
+title: Improve Compatibility with Browser Fallbacks
+challengeType: 0
+videoUrl: ''
+forumTopicId: 301087
+dashedName: improve-compatibility-with-browser-fallbacks
+---
+
+# --description--
+
+When working with CSS you will likely run into browser compatibility issues at some point. This is why it's important to provide browser fallbacks to avoid potential problems.
+
+When your browser parses the CSS of a webpage, it ignores any properties that it doesn't recognize or support. For example, if you use a CSS variable to assign a background color on a site, Internet Explorer will ignore the background color because it does not support CSS variables. In that case, the browser will use whatever value it has for that property. If it can't find any other value set for that property, it will revert to the default value, which is typically not ideal.
+
+This means that if you do want to provide a browser fallback, it's as easy as providing another more widely supported value immediately before your declaration. That way an older browser will have something to fall back on, while a newer browser will just interpret whatever declaration comes later in the cascade.
+
+# --instructions--
+
+It looks like a variable is being used to set the background color of the `.red-box` class. Let's improve our browser compatibility by adding another `background` declaration right before the existing declaration and set its value to `red`.
+
+# --hints--
+
+Your `.red-box` rule should include a fallback with the `background` set to `red` immediately before the existing `background` declaration.
+
+```js
+assert(
+  code
+    .replace(/\s/g, '')
+    .match(
+      /\.red-box{background:(red|#ff0000|#f00|rgb\(255,0,0\)|rgb\(100%,0%,0%\)|hsl\(0,100%,50%\));background:var\(--red-color\);height:200px;width:200px;}/gi
+    )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  :root {
+    --red-color: red;
+  }
+  .red-box {
+
+    background: var(--red-color);
+    height: 200px;
+    width:200px;
+  }
+</style>
+<div class="red-box"></div>
+```
+
+# --solutions--
+
+```html
+<style>
+  :root {
+    --red-color: red;
+  }
+  .red-box {
+    background: red;
+    background: var(--red-color);
+    height: 200px;
+    width:200px;
+  }
+</style>
+<div class="red-box"></div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/inherit-css-variables.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/inherit-css-variables.md
new file mode 100644
index 00000000000..5bc6b580ab8
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/inherit-css-variables.md
@@ -0,0 +1,244 @@
+---
+id: 5a9d7295424fe3d0e10cad14
+title: Inherit CSS Variables
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cyLZZhZ'
+forumTopicId: 301088
+dashedName: inherit-css-variables
+---
+
+# --description--
+
+When you create a variable, it is available for you to use inside the selector in which you create it. It also is available in any of that selector's descendants. This happens because CSS variables are inherited, just like ordinary properties.
+
+To make use of inheritance, CSS variables are often defined in the <dfn>:root</dfn> element.
+
+`:root` is a <dfn>pseudo-class</dfn> selector that matches the root element of the document, usually the `html` element. By creating your variables in `:root`, they will be available globally and can be accessed from any other selector in the style sheet.
+
+# --instructions--
+
+Define a variable named `--penguin-belly` in the `:root` selector and give it the value of `pink`. You can then see that the variable is inherited and that all the child elements which use it get pink backgrounds.
+
+# --hints--
+
+The `--penguin-belly` variable should be declared in the `:root` and assigned the value `pink`.
+
+```js
+assert(
+  code.match(/:root\s*?{[\s\S]*--penguin-belly\s*?:\s*?pink\s*?;[\s\S]*}/gi)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  :root {
+    /* Only change code below this line */
+
+    /* Only change code above this line */
+  }
+
+  body {
+    background: var(--penguin-belly, #c6faf1);
+  }
+
+  .penguin {
+    --penguin-skin: gray;
+    --penguin-beak: orange;
+    position: relative;
+    margin: auto;
+    display: block;
+    margin-top: 5%;
+    width: 300px;
+    height: 300px;
+  }
+
+  .right-cheek {
+    top: 15%;
+    left: 35%;
+    background: var(--penguin-belly, white);
+    width: 60%;
+    height: 70%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .left-cheek {
+    top: 15%;
+    left: 5%;
+    background: var(--penguin-belly, white);
+    width: 60%;
+    height: 70%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .belly {
+    top: 60%;
+    left: 2.5%;
+    background: var(--penguin-belly, white);
+    width: 95%;
+    height: 100%;
+    border-radius: 120% 120% 100% 100%;
+  }
+
+  .penguin-top {
+    top: 10%;
+    left: 25%;
+    background: var(--penguin-skin, gray);
+    width: 50%;
+    height: 45%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .penguin-bottom {
+    top: 40%;
+    left: 23.5%;
+    background: var(--penguin-skin, gray);
+    width: 53%;
+    height: 45%;
+    border-radius: 70% 70% 100% 100%;
+  }
+
+  .right-hand {
+    top: 0%;
+    left: -5%;
+    background: var(--penguin-skin, gray);
+    width: 30%;
+    height: 60%;
+    border-radius: 30% 30% 120% 30%;
+    transform: rotate(45deg);
+    z-index: -1;
+  }
+
+  .left-hand {
+    top: 0%;
+    left: 75%;
+    background: var(--penguin-skin, gray);
+    width: 30%;
+    height: 60%;
+    border-radius: 30% 30% 30% 120%;
+    transform: rotate(-45deg);
+    z-index: -1;
+  }
+
+  .right-feet {
+    top: 85%;
+    left: 60%;
+    background: var(--penguin-beak, orange);
+    width: 15%;
+    height: 30%;
+    border-radius: 50% 50% 50% 50%;
+    transform: rotate(-80deg);
+    z-index: -2222;
+  }
+
+  .left-feet {
+    top: 85%;
+    left: 25%;
+    background: var(--penguin-beak, orange);
+    width: 15%;
+    height: 30%;
+    border-radius: 50% 50% 50% 50%;
+    transform: rotate(80deg);
+    z-index: -2222;
+  }
+
+  .right-eye {
+    top: 45%;
+    left: 60%;
+    background: black;
+    width: 15%;
+    height: 17%;
+    border-radius: 50%;
+  }
+
+  .left-eye {
+    top: 45%;
+    left: 25%;
+    background: black;
+    width: 15%;
+    height: 17%;
+    border-radius: 50%;
+  }
+
+  .sparkle {
+    top: 25%;
+    left: 15%;
+    background: white;
+    width: 35%;
+    height: 35%;
+    border-radius: 50%;
+  }
+
+  .blush-right {
+    top: 65%;
+    left: 15%;
+    background: pink;
+    width: 15%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .blush-left {
+    top: 65%;
+    left: 70%;
+    background: pink;
+    width: 15%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .beak-top {
+    top: 60%;
+    left: 40%;
+    background: var(--penguin-beak, orange);
+    width: 20%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .beak-bottom {
+    top: 65%;
+    left: 42%;
+    background: var(--penguin-beak, orange);
+    width: 16%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .penguin * {
+    position: absolute;
+  }
+</style>
+<div class="penguin">
+  <div class="penguin-bottom">
+    <div class="right-hand"></div>
+    <div class="left-hand"></div>
+    <div class="right-feet"></div>
+    <div class="left-feet"></div>
+  </div>
+  <div class="penguin-top">
+    <div class="right-cheek"></div>
+    <div class="left-cheek"></div>
+    <div class="belly"></div>
+    <div class="right-eye">
+      <div class="sparkle"></div>
+    </div>
+    <div class="left-eye">
+      <div class="sparkle"></div>
+    </div>
+    <div class="blush-right"></div>
+    <div class="blush-left"></div>
+    <div class="beak-top"></div>
+    <div class="beak-bottom"></div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>:root {--penguin-belly: pink;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md
new file mode 100644
index 00000000000..fbb294a03a2
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/inherit-styles-from-the-body-element.md
@@ -0,0 +1,111 @@
+---
+id: bad87fee1348bd9aedf08746
+title: Inherit Styles from the Body Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c9bmdtR'
+forumTopicId: 18204
+dashedName: inherit-styles-from-the-body-element
+---
+
+# --description--
+
+Now we've proven that every HTML page has a `body` element, and that its `body` element can also be styled with CSS.
+
+Remember, you can style your `body` element just like any other HTML element, and all your other elements will inherit your `body` element's styles.
+
+# --instructions--
+
+First, create a `h1` element with the text `Hello World`
+
+Then, let's give all elements on your page the color of `green` by adding `color: green;` to your `body` element's style declaration.
+
+Finally, give your `body` element the font-family of `monospace` by adding `font-family: monospace;` to your `body` element's style declaration.
+
+# --hints--
+
+You should create an `h1` element.
+
+```js
+assert($('h1').length > 0);
+```
+
+Your `h1` element should have the text `Hello World`.
+
+```js
+assert(
+  $('h1').length > 0 &&
+    $('h1')
+      .text()
+      .match(/hello world/i)
+);
+```
+
+Your `h1` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/h1>/g) &&
+    code.match(/<h1/g) &&
+    code.match(/<\/h1>/g).length === code.match(/<h1/g).length
+);
+```
+
+Your `body` element should have the `color` property of `green`.
+
+```js
+assert($('body').css('color') === 'rgb(0, 128, 0)');
+```
+
+Your `body` element should have the `font-family` property of `monospace`.
+
+```js
+assert(
+  $('body')
+    .css('font-family')
+    .match(/monospace/i)
+);
+```
+
+Your `h1` element should inherit the font `monospace` from your `body` element.
+
+```js
+assert(
+  $('h1').length > 0 &&
+    $('h1')
+      .css('font-family')
+      .match(/monospace/i)
+);
+```
+
+Your `h1` element should inherit the color `green` from your `body` element.
+
+```js
+assert($('h1').length > 0 && $('h1').css('color') === 'rgb(0, 128, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    background-color: black;
+  }
+
+</style>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    background-color: black;
+    font-family: monospace;
+    color: green;
+  }
+
+</style>
+<h1>Hello World!</h1>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md
new file mode 100644
index 00000000000..a419b2eb155
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/make-circular-images-with-a-border-radius.md
@@ -0,0 +1,159 @@
+---
+id: bad87fee1348bd9aedf08815
+title: Make Circular Images with a border-radius
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c2MvrcB'
+forumTopicId: 18229
+dashedName: make-circular-images-with-a-border-radius
+---
+
+# --description--
+
+In addition to pixels, you can also specify the `border-radius` using a percentage.
+
+# --instructions--
+
+Give your cat photo a `border-radius` of `50%`.
+
+# --hints--
+
+Your image should have a border radius of `50%`, making it perfectly circular.
+
+```js
+assert(parseInt($('img').css('border-top-left-radius')) > 48);
+```
+
+The `border-radius` value should use a percentage value of `50%`.
+
+```js
+assert(code.match(/50%/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 10px;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 10px;
+  }
+
+  .smaller-image {
+    width: 100px;
+    border-radius: 50%;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md
new file mode 100644
index 00000000000..4c4c24d79d9
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-all-other-styles-by-using-important.md
@@ -0,0 +1,114 @@
+---
+id: bad87fee1348bd9aedf07756
+title: Override All Other Styles by using Important
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cm24rcp'
+forumTopicId: 18249
+dashedName: override-all-other-styles-by-using-important
+---
+
+# --description--
+
+Yay! We just proved that inline styles will override all the CSS declarations in your `style` element.
+
+But wait. There's one last way to override CSS. This is the most powerful method of all. But before we do it, let's talk about why you would ever want to override CSS.
+
+In many situations, you will use CSS libraries. These may accidentally override your own CSS. So when you absolutely need to be sure that an element has specific CSS, you can use `!important`.
+
+Let's go all the way back to our `pink-text` class declaration. Remember that our `pink-text` class was overridden by subsequent class declarations, id declarations, and inline styles.
+
+# --instructions--
+
+Let's add the keyword `!important` to your pink-text element's color declaration to make 100% sure that your `h1` element will be pink.
+
+An example of how to do this is:
+
+```css
+color: red !important;
+```
+
+# --hints--
+
+Your `h1` element should have the class `pink-text`.
+
+```js
+assert($('h1').hasClass('pink-text'));
+```
+
+Your `h1` element should have the class `blue-text`.
+
+```js
+assert($('h1').hasClass('blue-text'));
+```
+
+Your `h1` element should have the `id` of `orange-text`.
+
+```js
+assert($('h1').attr('id') === 'orange-text');
+```
+
+Your `h1` element should have the inline style of `color: white`.
+
+```js
+assert(code.match(/<h1.*style/gi) && code.match(/<h1.*style.*color\s*?:/gi));
+```
+
+Your `pink-text` class declaration should have the `!important` keyword to override all other declarations.
+
+```js
+assert(
+  code.match(/\.pink-text\s*?\{[\s\S]*?color:.*pink.*!important\s*;?[^\.]*\}/g)
+);
+```
+
+Your `h1` element should be pink.
+
+```js
+assert($('h1').css('color') === 'rgb(255, 192, 203)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    background-color: black;
+    font-family: monospace;
+    color: green;
+  }
+  #orange-text {
+    color: orange;
+  }
+  .pink-text {
+    color: pink;
+  }
+  .blue-text {
+    color: blue;
+  }
+</style>
+<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    background-color: black;
+    font-family: monospace;
+    color: green;
+  }
+  #orange-text {
+    color: orange;
+  }
+  .pink-text {
+    color: pink !important;
+  }
+  .blue-text {
+    color: blue;
+  }
+</style>
+<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
new file mode 100644
index 00000000000..5ab79faf828
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-class-declarations-by-styling-id-attributes.md
@@ -0,0 +1,123 @@
+---
+id: bad87fee1348bd8aedf06756
+title: Override Class Declarations by Styling ID Attributes
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cRkpDhB'
+forumTopicId: 18251
+dashedName: override-class-declarations-by-styling-id-attributes
+---
+
+# --description--
+
+We just proved that browsers read CSS from top to bottom in order of their declaration. That means that, in the event of a conflict, the browser will use whichever CSS declaration came last. Notice that if we even had put `blue-text` before `pink-text` in our `h1` element's classes, it would still look at the declaration order and not the order of their use!
+
+But we're not done yet. There are other ways that you can override CSS. Do you remember id attributes?
+
+Let's override your `pink-text` and `blue-text` classes, and make your `h1` element orange, by giving the `h1` element an id and then styling that id.
+
+# --instructions--
+
+Give your `h1` element the `id` attribute of `orange-text`. Remember, id styles look like this:
+
+```html
+<h1 id="orange-text">
+```
+
+Leave the `blue-text` and `pink-text` classes on your `h1` element.
+
+Create a CSS declaration for your `orange-text` id in your `style` element. Here's an example of what this looks like:
+
+```css
+#brown-text {
+  color: brown;
+}
+```
+
+**Note:** It doesn't matter whether you declare this CSS above or below `pink-text` class, since the `id` attribute will always take precedence.
+
+# --hints--
+
+Your `h1` element should have the class `pink-text`.
+
+```js
+assert($('h1').hasClass('pink-text'));
+```
+
+Your `h1` element should have the class `blue-text`.
+
+```js
+assert($('h1').hasClass('blue-text'));
+```
+
+Your `h1` element should have the id of `orange-text`.
+
+```js
+assert($('h1').attr('id') === 'orange-text');
+```
+
+There should be only one `h1` element.
+
+```js
+assert($('h1').length === 1);
+```
+
+Your `orange-text` id should have a CSS declaration.
+
+```js
+assert(code.match(/#orange-text\s*{/gi));
+```
+
+Your `h1` should not have any `style` attributes.
+
+```js
+assert(!code.match(/<h1.*style.*>/gi));
+```
+
+Your `h1` element should be orange.
+
+```js
+assert($('h1').css('color') === 'rgb(255, 165, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    background-color: black;
+    font-family: monospace;
+    color: green;
+  }
+  .pink-text {
+    color: pink;
+  }
+  .blue-text {
+    color: blue;
+  }
+</style>
+<h1 class="pink-text blue-text">Hello World!</h1>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    background-color: black;
+    font-family: monospace;
+    color: green;
+  }
+  .pink-text {
+    color: pink;
+  }
+  .blue-text {
+    color: blue;
+  }
+  #orange-text {
+    color: orange;
+  }  
+</style>
+<h1 id="orange-text"  class="pink-text blue-text">Hello World!</h1>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
new file mode 100644
index 00000000000..b74bc03043a
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-class-declarations-with-inline-styles.md
@@ -0,0 +1,102 @@
+---
+id: bad87fee1348bd9aedf06756
+title: Override Class Declarations with Inline Styles
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cGJDRha'
+forumTopicId: 18252
+dashedName: override-class-declarations-with-inline-styles
+---
+
+# --description--
+
+So we've proven that id declarations override class declarations, regardless of where they are declared in your `style` element CSS.
+
+There are other ways that you can override CSS. Do you remember inline styles?
+
+# --instructions--
+
+Use an inline style to try to make our `h1` element white. Remember, inline styles look like this:
+
+```html
+<h1 style="color: green;">
+```
+
+Leave the `blue-text` and `pink-text` classes on your `h1` element.
+
+# --hints--
+
+Your `h1` element should have the class `pink-text`.
+
+```js
+assert($('h1').hasClass('pink-text'));
+```
+
+Your `h1` element should have the class `blue-text`.
+
+```js
+assert($('h1').hasClass('blue-text'));
+```
+
+Your `h1` element should have the id of `orange-text`.
+
+```js
+assert($('h1').attr('id') === 'orange-text');
+```
+
+Your `h1` element should have an inline style.
+
+```js
+assert(document.querySelector('h1[style]'));
+```
+
+Your `h1` element should be white.
+
+```js
+assert($('h1').css('color') === 'rgb(255, 255, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    background-color: black;
+    font-family: monospace;
+    color: green;
+  }
+  #orange-text {
+    color: orange;
+  }
+  .pink-text {
+    color: pink;
+  }
+  .blue-text {
+    color: blue;
+  }
+</style>
+<h1 id="orange-text" class="pink-text blue-text">Hello World!</h1>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    background-color: black;
+    font-family: monospace;
+    color: green;
+  }
+  #orange-text {
+    color: orange;
+  }
+  .pink-text {
+    color: pink;
+  }
+  .blue-text {
+    color: blue;
+  }
+</style>
+<h1 id="orange-text" class="pink-text blue-text" style="color: white">Hello World!</h1>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
new file mode 100644
index 00000000000..5659ee41991
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/override-styles-in-subsequent-css.md
@@ -0,0 +1,94 @@
+---
+id: bad87fee1348bd9aedf04756
+title: Override Styles in Subsequent CSS
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cGJDQug'
+forumTopicId: 18253
+dashedName: override-styles-in-subsequent-css
+---
+
+# --description--
+
+Our `pink-text` class overrode our `body` element's CSS declaration!
+
+We just proved that our classes will override the `body` element's CSS. So the next logical question is, what can we do to override our `pink-text` class?
+
+# --instructions--
+
+Create an additional CSS class called `blue-text` that gives an element the color blue. Make sure it's below your `pink-text` class declaration.
+
+Apply the `blue-text` class to your `h1` element in addition to your `pink-text` class, and let's see which one wins.
+
+Applying multiple class attributes to a HTML element is done with a space between them like this:
+
+```html
+class="class1 class2"
+```
+
+**Note:** It doesn't matter which order the classes are listed in the HTML element.
+
+However, the order of the `class` declarations in the `<style>` section is what is important. The second declaration will always take precedence over the first. Because `.blue-text` is declared second, it overrides the attributes of `.pink-text`.
+
+# --hints--
+
+Your `h1` element should have the class `pink-text`.
+
+```js
+assert($('h1').hasClass('pink-text'));
+```
+
+Your `h1` element should have the class `blue-text`.
+
+```js
+assert($('h1').hasClass('blue-text'));
+```
+
+Both `blue-text` and `pink-text` should belong to the same `h1` element.
+
+```js
+assert($('.pink-text').hasClass('blue-text'));
+```
+
+Your `h1` element should be blue.
+
+```js
+assert($('h1').css('color') === 'rgb(0, 0, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    background-color: black;
+    font-family: monospace;
+    color: green;
+  }
+  .pink-text {
+    color: pink;
+  }
+</style>
+<h1 class="pink-text">Hello World!</h1>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    background-color: black;
+    font-family: monospace;
+    color: green;
+  }
+  .pink-text {
+    color: pink;
+  }
+
+  .blue-text {
+    color: blue;
+  }  
+</style>
+<h1 class="pink-text blue-text">Hello World!</h1>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
new file mode 100644
index 00000000000..2f040b7d6a6
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/prioritize-one-style-over-another.md
@@ -0,0 +1,73 @@
+---
+id: bad87fee1348bd9aedf08756
+title: Prioritize One Style Over Another
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cZ8wnHv'
+forumTopicId: 18258
+dashedName: prioritize-one-style-over-another
+---
+
+# --description--
+
+Sometimes your HTML elements will receive multiple styles that conflict with one another.
+
+For example, your `h1` element can't be both green and pink at the same time.
+
+Let's see what happens when we create a class that makes text pink, then apply it to an element. Will our class *override* the `body` element's `color: green;` CSS property?
+
+# --instructions--
+
+Create a CSS class called `pink-text` that gives an element the color pink.
+
+Give your `h1` element the class of `pink-text`.
+
+# --hints--
+
+Your `h1` element should have the class `pink-text`.
+
+```js
+assert($('h1').hasClass('pink-text'));
+```
+
+Your `<style>` should have a `pink-text` CSS class that changes the `color`.
+
+```js
+assert(code.match(/\.pink-text\s*\{\s*color\s*:\s*.+\s*;?\s*\}/g));
+```
+
+Your `h1` element should be pink.
+
+```js
+assert($('h1').css('color') === 'rgb(255, 192, 203)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    background-color: black;
+    font-family: monospace;
+    color: green;
+  }
+</style>
+<h1>Hello World!</h1>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    background-color: black;
+    font-family: monospace;
+    color: green;
+  }
+  .pink-text {
+    color: pink;
+  }
+</style>
+<h1 class="pink-text">Hello World!</h1>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md
new file mode 100644
index 00000000000..7361b23ca9a
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/set-the-font-family-of-an-element.md
@@ -0,0 +1,132 @@
+---
+id: bad87fee1348bd9aede08807
+title: Set the Font Family of an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c3bvpCg'
+forumTopicId: 18278
+dashedName: set-the-font-family-of-an-element
+---
+
+# --description--
+
+You can set which font an element should use, by using the `font-family` property.
+
+For example, if you wanted to set your `h2` element's font to `sans-serif`, you would use the following CSS:
+
+```css
+h2 {
+  font-family: sans-serif;
+}
+```
+
+# --instructions--
+
+Make all of your `p` elements use the `monospace` font.
+
+# --hints--
+
+Your `p` elements should use the font `monospace`.
+
+```js
+assert(
+  $('p')
+    .not('.red-text')
+    .css('font-family')
+    .match(/monospace/i)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .red-text {
+    color: red;
+  }
+
+  p {
+    font-size: 16px;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<style>
+  .red-text {
+    color: red;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/set-the-id-of-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
new file mode 100644
index 00000000000..f836a375a02
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/set-the-id-of-an-element.md
@@ -0,0 +1,170 @@
+---
+id: bad87eee1348bd9aede07836
+title: Set the id of an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cN6MEc2'
+forumTopicId: 18279
+dashedName: set-the-id-of-an-element
+---
+
+# --description--
+
+In addition to classes, each HTML element can also have an `id` attribute.
+
+There are several benefits to using `id` attributes: You can use an `id` to style a single element and later you'll learn that you can use them to select and modify specific elements with JavaScript.
+
+`id` attributes should be unique. Browsers won't enforce this, but it is a widely agreed upon best practice. So please don't give more than one element the same `id` attribute.
+
+Here's an example of how you give your `h2` element the id of `cat-photo-app`:
+
+```html
+<h2 id="cat-photo-app">
+```
+
+# --instructions--
+
+Give your `form` element the id `cat-photo-form`.
+
+# --hints--
+
+Your `form` element should have the id of `cat-photo-form`.
+
+```js
+assert($('form').attr('id') === 'cat-photo-form');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+
+  .silver-background {
+    background-color: silver;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div class="silver-background">
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+
+  .silver-background {
+    background-color: silver;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div class="silver-background">
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/size-your-images.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/size-your-images.md
new file mode 100644
index 00000000000..5276825a2a7
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/size-your-images.md
@@ -0,0 +1,155 @@
+---
+id: bad87fee1348bd9acdf08812
+title: Size Your Images
+challengeType: 0
+forumTopicId: 18282
+dashedName: size-your-images
+---
+
+# --description--
+
+CSS has a property called `width` that controls an element's width. Just like with fonts, we'll use `px` (pixels) to specify the image's width.
+
+For example, if we wanted to create a CSS class called `larger-image` that gave HTML elements a width of 500 pixels, we'd use:
+
+```html
+<style>
+  .larger-image {
+    width: 500px;
+  }
+</style>
+```
+
+# --instructions--
+
+Create a class called `smaller-image` and use it to resize the image so that it's only 100 pixels wide.
+
+# --hints--
+
+Your `img` element should have the class `smaller-image`.
+
+```js
+assert(
+  $("img[src='https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg']").attr('class')
+    .trim().split(/\s+/g).includes('smaller-image')
+);
+```
+
+Your image should be 100 pixels wide.
+
+```js
+assert(
+  $('img').width() < 200 &&
+    code.match(/\.smaller-image\s*{\s*width\s*:\s*100px\s*(;\s*}|})/i)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
new file mode 100644
index 00000000000..d026745ce7d
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/specify-how-fonts-should-degrade.md
@@ -0,0 +1,172 @@
+---
+id: bad87fee1348bd9aedf08808
+title: Specify How Fonts Should Degrade
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cpVKBfQ'
+forumTopicId: 18304
+dashedName: specify-how-fonts-should-degrade
+---
+
+# --description--
+
+There are several default fonts that are available in all browsers. These generic font families include `monospace`, `serif` and `sans-serif`.
+
+When one font isn't available, you can tell the browser to "degrade" to another font.
+
+For example, if you wanted an element to use the `Helvetica` font, but degrade to the `sans-serif` font when `Helvetica` isn't available, you will specify it as follows:
+
+```css
+p {
+  font-family: Helvetica, sans-serif;
+}
+```
+
+Generic font family names are not case-sensitive. Also, they do not need quotes because they are CSS keywords.
+
+# --instructions--
+
+To begin, apply the `monospace` font to the `h2` element, so that it now has two fonts - `Lobster` and `monospace`.
+
+In the last challenge, you imported the `Lobster` font using the `link` tag. Now comment out that import of the `Lobster` font (using the HTML comments you learned before) from Google Fonts so that it isn't available anymore. Notice how your `h2` element degrades to the `monospace` font.
+
+**Note:** If you have the `Lobster` font installed on your computer, you won't see the degradation because your browser is able to find the font.
+
+# --hints--
+
+Your h2 element should use the font `Lobster`.
+
+```js
+assert(
+  $('h2')
+    .css('font-family')
+    .match(/^"?lobster/i)
+);
+```
+
+Your h2 element should degrade to the font `monospace` when `Lobster` is not available.
+
+```js
+assert(
+  /\s*h2\s*\{\s*font-family\s*\:\s*(\'|"|)Lobster\1\s*,\s*monospace\s*;?\s*\}/gi.test(
+    code
+  )
+);
+```
+
+You should comment out your call to Google for the `Lobster` font by putting `<!--` in front of it.
+
+```js
+assert(new RegExp('<!--[^fc]', 'gi').test(code));
+```
+
+You should close your comment by adding `-->`.
+
+```js
+assert(new RegExp('[^fc]-->', 'gi').test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<!--<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">-->
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md
new file mode 100644
index 00000000000..4fbb6004bc7
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/style-multiple-elements-with-a-css-class.md
@@ -0,0 +1,133 @@
+---
+id: bad87fee1348bd9aefe08806
+title: Style Multiple Elements with a CSS Class
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cRkVbsQ'
+forumTopicId: 18311
+dashedName: style-multiple-elements-with-a-css-class
+---
+
+# --description--
+
+Classes allow you to use the same CSS styles on multiple HTML elements. You can see this by applying your `red-text` class to the first `p` element.
+
+# --hints--
+
+Your `h2` element should be red.
+
+```js
+assert($('h2').css('color') === 'rgb(255, 0, 0)');
+```
+
+Your `h2` element should have the class `red-text`.
+
+```js
+assert($('h2').hasClass('red-text'));
+```
+
+Your first `p` element should be red.
+
+```js
+assert($('p:eq(0)').css('color') === 'rgb(255, 0, 0)');
+```
+
+Your second and third `p` elements should not be red.
+
+```js
+assert(
+  !($('p:eq(1)').css('color') === 'rgb(255, 0, 0)') &&
+    !($('p:eq(2)').css('color') === 'rgb(255, 0, 0)')
+);
+```
+
+Your first `p` element should have the class `red-text`.
+
+```js
+assert($('p:eq(0)').hasClass('red-text'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .red-text {
+    color: red;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<style>
+  .red-text {
+    color: red;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/style-the-html-body-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/style-the-html-body-element.md
new file mode 100644
index 00000000000..26a469c1d1d
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/style-the-html-body-element.md
@@ -0,0 +1,70 @@
+---
+id: bad87fee1348bd9aedf08736
+title: Style the HTML Body Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cB77PHW'
+forumTopicId: 18313
+dashedName: style-the-html-body-element
+---
+
+# --description--
+
+Now let's start fresh and talk about CSS inheritance.
+
+Every HTML page has a `body` element.
+
+# --instructions--
+
+We can prove that the `body` element exists here by giving it a `background-color` of black.
+
+We can do this by adding the following to our `style` element:
+
+```css
+body {
+  background-color: black;
+}
+```
+
+# --hints--
+
+Your `body` element should have the `background-color` of black.
+
+```js
+assert($('body').css('background-color') === 'rgb(0, 0, 0)');
+```
+
+Your CSS rule should be properly formatted with both opening and closing curly brackets.
+
+```js
+assert(
+  code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
+);
+```
+
+Your CSS rule should end with a semi-colon.
+
+```js
+assert(
+  code.match(/<style>\s*body\s*\{\s*background.*\s*:\s*.*;\s*\}\s*<\/style>/i)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+
+</style>
+```
+
+# --solutions--
+
+```html
+<style>
+body {
+  background-color: black;
+}
+</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
new file mode 100644
index 00000000000..f9e32b8b401
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/understand-absolute-versus-relative-units.md
@@ -0,0 +1,123 @@
+---
+id: bad82fee1322bd9aedf08721
+title: Understand Absolute versus Relative Units
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cN66JSL'
+forumTopicId: 301089
+dashedName: understand-absolute-versus-relative-units
+---
+
+# --description--
+
+The last several challenges all set an element's margin or padding with pixels (`px`). Pixels are a type of length unit, which is what tells the browser how to size or space an item. In addition to `px`, CSS has a number of different length unit options that you can use.
+
+The two main types of length units are absolute and relative. Absolute units tie to physical units of length. For example, `in` and `mm` refer to inches and millimeters, respectively. Absolute length units approximate the actual measurement on a screen, but there are some differences depending on a screen's resolution.
+
+Relative units, such as `em` or `rem`, are relative to another length value. For example, `em` is based on the size of an element's font. If you use it to set the `font-size` property itself, it's relative to the parent's `font-size`.
+
+**Note:** There are several relative unit options that are tied to the size of the viewport. They are covered in the Responsive Web Design Principles section.
+
+# --instructions--
+
+Add a `padding` property to the element with class `red-box` and set it to `1.5em`.
+
+# --hints--
+
+Your `red-box` class should have a `padding` property.
+
+```js
+assert(
+  $('.red-box').css('padding-top') != '0px' &&
+    $('.red-box').css('padding-right') != '0px' &&
+    $('.red-box').css('padding-bottom') != '0px' &&
+    $('.red-box').css('padding-left') != '0px'
+);
+```
+
+Your `red-box` class should give elements 1.5em of `padding`.
+
+```js
+assert(code.match(/\.red-box\s*?{[\s\S]*padding\s*:\s*?1\.5em/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 20px 40px 20px 40px;
+  }
+
+  .red-box {
+    background-color: red;
+    margin: 20px 40px 20px 40px;
+
+  }
+
+  .green-box {
+    background-color: green;
+    margin: 20px 40px 20px 40px;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box green-box">padding</h5>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 20px 40px 20px 40px;
+  }
+
+  .red-box {
+    background-color: red;
+    margin: 20px 40px 20px 40px;
+    padding: 1.5em;
+  }
+
+  .green-box {
+    background-color: green;
+    margin: 20px 40px 20px 40px;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box green-box">padding</h5>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
new file mode 100644
index 00000000000..5e146068bc7
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-a-css-class-to-style-an-element.md
@@ -0,0 +1,142 @@
+---
+id: bad87fee1348bd9aecf08806
+title: Use a CSS Class to Style an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c2MvDtV'
+forumTopicId: 18337
+dashedName: use-a-css-class-to-style-an-element
+---
+
+# --description--
+
+Classes are reusable styles that can be added to HTML elements.
+
+Here's an example CSS class declaration:
+
+```html
+<style>
+  .blue-text {
+    color: blue;
+  }
+</style>
+```
+
+You can see that we've created a CSS class called `blue-text` within the `<style>` tag. You can apply a class to an HTML element like this: `<h2 class="blue-text">CatPhotoApp</h2>`. Note that in your CSS `style` element, class names start with a period. In your HTML elements' class attribute, the class name does not include the period.
+
+# --instructions--
+
+Inside your `style` element, change the `h2` selector to `.red-text` and update the color's value from `blue` to `red`.
+
+Give your `h2` element the `class` attribute with a value of `red-text`.
+
+# --hints--
+
+Your `h2` element should be red.
+
+```js
+assert($('h2').css('color') === 'rgb(255, 0, 0)');
+```
+
+Your `h2` element should have the class `red-text`.
+
+```js
+assert($('h2').hasClass('red-text'));
+```
+
+Your stylesheet should declare a `red-text` class and have its color set to `red`.
+
+```js
+assert(code.match(/\.red-text\s*\{\s*color\s*:\s*red;?\s*\}/g));
+```
+
+You should not use inline style declarations like `style="color: red"` in your `h2` element.
+
+```js
+assert($('h2').attr('style') === undefined);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  h2 {
+    color: blue;
+  }
+</style>
+
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<style>
+  .red-text {
+    color: red;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-a-custom-css-variable.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
new file mode 100644
index 00000000000..fca17c44c68
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-a-custom-css-variable.md
@@ -0,0 +1,287 @@
+---
+id: 5a9d727a424fe3d0e10cad12
+title: Use a custom CSS Variable
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cM989ck'
+forumTopicId: 301090
+dashedName: use-a-custom-css-variable
+---
+
+# --description--
+
+After you create your variable, you can assign its value to other CSS properties by referencing the name you gave it.
+
+```css
+background: var(--penguin-skin);
+```
+
+This will change the background of whatever element you are targeting to gray because that is the value of the `--penguin-skin` variable. Note that styles will not be applied unless the variable names are an exact match.
+
+# --instructions--
+
+Apply the `--penguin-skin` variable to the `background` property of the `penguin-top`, `penguin-bottom`, `right-hand` and `left-hand` classes.
+
+# --hints--
+
+The `--penguin-skin` variable should be applied to the `background` property of the `penguin-top` class.
+
+```js
+assert(
+  code.match(
+    /.penguin-top\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.penguin-bottom\s{/gi
+  )
+);
+```
+
+The `--penguin-skin` variable should be applied to the `background` property of the `penguin-bottom` class.
+
+```js
+assert(
+  code.match(
+    /.penguin-bottom\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.right-hand\s{/gi
+  )
+);
+```
+
+The `--penguin-skin` variable should be applied to the `background` property of the `right-hand` class.
+
+```js
+assert(
+  code.match(
+    /.right-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}[\s\S]*.left-hand\s{/gi
+  )
+);
+```
+
+The `--penguin-skin` variable should be applied to the `background` property of the `left-hand` class.
+
+```js
+assert(
+  code.match(
+    /.left-hand\s*?{[\s\S]*background\s*?:\s*?var\s*?\(\s*?--penguin-skin\s*?\)\s*?;[\s\S]*}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .penguin {
+    --penguin-skin: gray;
+    position: relative;
+    margin: auto;
+    display: block;
+    margin-top: 5%;
+    width: 300px;
+    height: 300px;
+  }
+
+  .penguin-top {
+    top: 10%;
+    left: 25%;
+
+    /* Change code below this line */
+    background: black;
+    /* Change code above this line */
+
+    width: 50%;
+    height: 45%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .penguin-bottom {
+    top: 40%;
+    left: 23.5%;
+
+    /* Change code below this line */
+    background: black;
+    /* Change code above this line */
+
+    width: 53%;
+    height: 45%;
+    border-radius: 70% 70% 100% 100%;
+  }
+
+  .right-hand {
+    top: 0%;
+    left: -5%;
+
+    /* Change code below this line */
+    background: black;
+    /* Change code above this line */
+
+    width: 30%;
+    height: 60%;
+    border-radius: 30% 30% 120% 30%;
+    transform: rotate(45deg);
+    z-index: -1;
+  }
+
+  .left-hand {
+    top: 0%;
+    left: 75%;
+
+    /* Change code below this line */
+    background: black;
+    /* Change code above this line */
+
+    width: 30%;
+    height: 60%;
+    border-radius: 30% 30% 30% 120%;
+    transform: rotate(-45deg);
+    z-index: -1;
+  }
+
+  .right-cheek {
+    top: 15%;
+    left: 35%;
+    background: white;
+    width: 60%;
+    height: 70%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .left-cheek {
+    top: 15%;
+    left: 5%;
+    background: white;
+    width: 60%;
+    height: 70%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .belly {
+    top: 60%;
+    left: 2.5%;
+    background: white;
+    width: 95%;
+    height: 100%;
+    border-radius: 120% 120% 100% 100%;
+  }
+
+  .right-feet {
+    top: 85%;
+    left: 60%;
+    background: orange;
+    width: 15%;
+    height: 30%;
+    border-radius: 50% 50% 50% 50%;
+    transform: rotate(-80deg);
+    z-index: -2222;
+  }
+
+  .left-feet {
+    top: 85%;
+    left: 25%;
+    background: orange;
+    width: 15%;
+    height: 30%;
+    border-radius: 50% 50% 50% 50%;
+    transform: rotate(80deg);
+    z-index: -2222;
+  }
+
+  .right-eye {
+    top: 45%;
+    left: 60%;
+    background: black;
+    width: 15%;
+    height: 17%;
+    border-radius: 50%;
+  }
+
+  .left-eye {
+    top: 45%;
+    left: 25%;
+    background: black;
+    width: 15%;
+    height: 17%;
+    border-radius: 50%;
+  }
+
+  .sparkle {
+    top: 25%;
+    left: 15%;
+    background: white;
+    width: 35%;
+    height: 35%;
+    border-radius: 50%;
+  }
+
+  .blush-right {
+    top: 65%;
+    left: 15%;
+    background: pink;
+    width: 15%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .blush-left {
+    top: 65%;
+    left: 70%;
+    background: pink;
+    width: 15%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .beak-top {
+    top: 60%;
+    left: 40%;
+    background: orange;
+    width: 20%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .beak-bottom {
+    top: 65%;
+    left: 42%;
+    background: orange;
+    width: 16%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  body {
+    background:#c6faf1;
+  }
+
+  .penguin * {
+    position: absolute;
+  }
+</style>
+<div class="penguin">
+  <div class="penguin-bottom">
+    <div class="right-hand"></div>
+    <div class="left-hand"></div>
+    <div class="right-feet"></div>
+    <div class="left-feet"></div>
+  </div>
+  <div class="penguin-top">
+    <div class="right-cheek"></div>
+    <div class="left-cheek"></div>
+    <div class="belly"></div>
+    <div class="right-eye">
+      <div class="sparkle"></div>
+    </div>
+    <div class="left-eye">
+      <div class="sparkle"></div>
+    </div>
+    <div class="blush-right"></div>
+    <div class="blush-left"></div>
+    <div class="beak-top"></div>
+    <div class="beak-bottom"></div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.penguin-top {background: var(--penguin-skin);} .penguin-bottom {background: var(--penguin-skin);} .right-hand {background: var(--penguin-skin);} .left-hand {background: var(--penguin-skin);}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
new file mode 100644
index 00000000000..0402ad0782c
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-a-media-query-to-change-a-variable.md
@@ -0,0 +1,281 @@
+---
+id: 5a9d72ad424fe3d0e10cad16
+title: Use a media query to change a variable
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cWmL8UP'
+forumTopicId: 301091
+dashedName: use-a-media-query-to-change-a-variable
+---
+
+# --description--
+
+CSS Variables can simplify the way you use media queries.
+
+For instance, when your screen is smaller or larger than your media query break point, you can change the value of a variable, and it will apply its style wherever it is used.
+
+# --instructions--
+
+In the `:root` selector of the media query, change it so `--penguin-size` is redefined and given a value of `200px`. Also, redefine `--penguin-skin` and give it a value of `black`. Then resize the preview to see this change in action.
+
+# --hints--
+
+`:root` should reassign the `--penguin-size` variable to `200px`.
+
+```js
+assert(
+  code.match(
+    /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-size\s*?:\s*?200px\s*?;[\s\S]*}[\s\S]*}/gi
+  )
+);
+```
+
+`:root` should reassign the `--penguin-skin` variable to `black`.
+
+```js
+assert(
+  code.match(
+    /media\s*?\(\s*?max-width\s*?:\s*?350px\s*?\)\s*?{[\s\S]*:root\s*?{[\s\S]*--penguin-skin\s*?:\s*?black\s*?;[\s\S]*}[\s\S]*}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  :root {
+    --penguin-size: 300px;
+    --penguin-skin: gray;
+    --penguin-belly: white;
+    --penguin-beak: orange;
+  }
+
+  @media (max-width: 350px) {
+    :root {
+      /* Only change code below this line */
+
+      /* Only change code above this line */
+    }
+  }
+
+  .penguin {
+    position: relative;
+    margin: auto;
+    display: block;
+    margin-top: 5%;
+    width: var(--penguin-size, 300px);
+    height: var(--penguin-size, 300px);
+  }
+
+  .right-cheek {
+    top: 15%;
+    left: 35%;
+    background: var(--penguin-belly, white);
+    width: 60%;
+    height: 70%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .left-cheek {
+    top: 15%;
+    left: 5%;
+    background: var(--penguin-belly, white);
+    width: 60%;
+    height: 70%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .belly {
+    top: 60%;
+    left: 2.5%;
+    background: var(--penguin-belly, white);
+    width: 95%;
+    height: 100%;
+    border-radius: 120% 120% 100% 100%;
+  }
+
+  .penguin-top {
+    top: 10%;
+    left: 25%;
+    background: var(--penguin-skin, gray);
+    width: 50%;
+    height: 45%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .penguin-bottom {
+    top: 40%;
+    left: 23.5%;
+    background: var(--penguin-skin, gray);
+    width: 53%;
+    height: 45%;
+    border-radius: 70% 70% 100% 100%;
+  }
+
+  .right-hand {
+    top: 5%;
+    left: 25%;
+    background: var(--penguin-skin, black);
+    width: 30%;
+    height: 60%;
+    border-radius: 30% 30% 120% 30%;
+    transform: rotate(130deg);
+    z-index: -1;
+    animation-duration: 3s;
+    animation-name: wave;
+    animation-iteration-count: infinite;
+    transform-origin:0% 0%;
+    animation-timing-function: linear;
+  }
+
+  @keyframes wave {
+      10% {
+        transform: rotate(110deg);
+      }
+      20% {
+        transform: rotate(130deg);
+      }
+      30% {
+        transform: rotate(110deg);
+      }
+      40% {
+        transform: rotate(130deg);
+      }
+    }
+
+  .left-hand {
+    top: 0%;
+    left: 75%;
+    background: var(--penguin-skin, gray);
+    width: 30%;
+    height: 60%;
+    border-radius: 30% 30% 30% 120%;
+    transform: rotate(-45deg);
+    z-index: -1;
+  }
+
+  .right-feet {
+    top: 85%;
+    left: 60%;
+    background: var(--penguin-beak, orange);
+    width: 15%;
+    height: 30%;
+    border-radius: 50% 50% 50% 50%;
+    transform: rotate(-80deg);
+    z-index: -2222;
+  }
+
+  .left-feet {
+    top: 85%;
+    left: 25%;
+    background: var(--penguin-beak, orange);
+    width: 15%;
+    height: 30%;
+    border-radius: 50% 50% 50% 50%;
+    transform: rotate(80deg);
+    z-index: -2222;
+  }
+
+  .right-eye {
+    top: 45%;
+    left: 60%;
+    background: black;
+    width: 15%;
+    height: 17%;
+    border-radius: 50%;
+  }
+
+  .left-eye {
+    top: 45%;
+    left: 25%;
+    background: black;
+    width: 15%;
+    height: 17%;
+    border-radius: 50%;
+  }
+
+  .sparkle {
+    top: 25%;
+    left:-23%;
+    background: white;
+    width: 150%;
+    height: 100%;
+    border-radius: 50%;
+  }
+
+  .blush-right {
+    top: 65%;
+    left: 15%;
+    background: pink;
+    width: 15%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .blush-left {
+    top: 65%;
+    left: 70%;
+    background: pink;
+    width: 15%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .beak-top {
+    top: 60%;
+    left: 40%;
+    background: var(--penguin-beak, orange);
+    width: 20%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .beak-bottom {
+    top: 65%;
+    left: 42%;
+    background: var(--penguin-beak, orange);
+    width: 16%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  body {
+    background:#c6faf1;
+  }
+
+  .penguin * {
+    position: absolute;
+  }
+</style>
+<div class="penguin">
+  <div class="penguin-bottom">
+    <div class="right-hand"></div>
+    <div class="left-hand"></div>
+    <div class="right-feet"></div>
+    <div class="left-feet"></div>
+  </div>
+  <div class="penguin-top">
+    <div class="right-cheek"></div>
+    <div class="left-cheek"></div>
+    <div class="belly"></div>
+    <div class="right-eye">
+      <div class="sparkle"></div>
+    </div>
+    <div class="left-eye">
+      <div class="sparkle"></div>
+    </div>
+    <div class="blush-right"></div>
+    <div class="blush-left"></div>
+    <div class="beak-top"></div>
+    <div class="beak-bottom"></div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>@media (max-width: 350px) {:root {--penguin-size: 200px; --penguin-skin: black;}}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
new file mode 100644
index 00000000000..fb6c62be8b6
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-abbreviated-hex-code.md
@@ -0,0 +1,128 @@
+---
+id: bad87fee1348bd9aedf08719
+title: Use Abbreviated Hex Code
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cRkpKAm'
+forumTopicId: 18338
+dashedName: use-abbreviated-hex-code
+---
+
+# --description--
+
+Many people feel overwhelmed by the possibilities of more than 16 million colors. And it's difficult to remember hex code. Fortunately, you can shorten it.
+
+For example, red's hex code `#FF0000` can be shortened to `#F00`. This shortened form gives one digit for red, one digit for green, and one digit for blue.
+
+This reduces the total number of possible colors to around 4,000. But browsers will interpret `#FF0000` and `#F00` as exactly the same color.
+
+# --instructions--
+
+Go ahead, try using the abbreviated hex codes to color the correct elements.
+
+<table class='table table-striped'><tbody><tr><th>Color</th><th>Short Hex Code</th></tr><tr><td>Cyan</td><td><code>#0FF</code></td></tr><tr><td>Green</td><td><code>#0F0</code></td></tr><tr><td>Red</td><td><code>#F00</code></td></tr><tr><td>Fuchsia</td><td><code>#F0F</code></td></tr></tbody></table>
+
+# --hints--
+
+Your `h1` element with the text `I am red!` should be given the `color` red.
+
+```js
+assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+```
+
+The abbreviated hex code for the color red should be used instead of the hex code `#FF0000`.
+
+```js
+assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?#F00\s*?;?\s*?}/gi));
+```
+
+Your `h1` element with the text `I am green!` should be given the `color` green.
+
+```js
+assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
+```
+
+The abbreviated hex code for the color green should be used instead of the hex code `#00FF00`.
+
+```js
+assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?#0F0\s*?;?\s*?}/gi));
+```
+
+Your `h1` element with the text `I am cyan!` should be given the `color` cyan.
+
+```js
+assert($('.cyan-text').css('color') === 'rgb(0, 255, 255)');
+```
+
+The abbreviated hex code for the color cyan should be used instead of the hex code `#00FFFF`.
+
+```js
+assert(code.match(/\.cyan-text\s*?{\s*?color\s*:\s*?#0FF\s*?;?\s*?}/gi));
+```
+
+Your `h1` element with the text `I am fuchsia!` should be given the `color` fuchsia.
+
+```js
+assert($('.fuchsia-text').css('color') === 'rgb(255, 0, 255)');
+```
+
+The abbreviated hex code for the color fuchsia should be used instead of the hex code `#FF00FF`.
+
+```js
+assert(code.match(/\.fuchsia-text\s*?{\s*?color\s*:\s*?#F0F\s*?;?\s*?}/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .red-text {
+    color: #000000;
+  }
+  .fuchsia-text {
+    color: #000000;
+  }
+  .cyan-text {
+    color: #000000;
+  }
+  .green-text {
+    color: #000000;
+  }
+</style>
+
+<h1 class="red-text">I am red!</h1>
+
+<h1 class="fuchsia-text">I am fuchsia!</h1>
+
+<h1 class="cyan-text">I am cyan!</h1>
+
+<h1 class="green-text">I am green!</h1>
+```
+
+# --solutions--
+
+```html
+<style>
+  .red-text {
+    color: #F00;
+  }
+  .fuchsia-text {
+    color: #F0F;
+  }
+  .cyan-text {
+    color: #0FF;
+  }
+  .green-text {
+    color: #0F0;
+  }
+</style>
+
+<h1 class="red-text">I am red!</h1>
+
+<h1 class="fuchsia-text">I am fuchsia!</h1>
+
+<h1 class="cyan-text">I am cyan!</h1>
+
+<h1 class="green-text">I am green!</h1>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
new file mode 100644
index 00000000000..e8e58a92159
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-an-id-attribute-to-style-an-element.md
@@ -0,0 +1,197 @@
+---
+id: bad87dee1348bd9aede07836
+title: Use an id Attribute to Style an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cakyZfL'
+forumTopicId: 18339
+dashedName: use-an-id-attribute-to-style-an-element
+---
+
+# --description--
+
+One cool thing about `id` attributes is that, like classes, you can style them using CSS.
+
+However, an `id` is not reusable and should only be applied to one element. An `id` also has a higher specificity (importance) than a class so if both are applied to the same element and have conflicting styles, the styles of the `id` will be applied.
+
+Here's an example of how you can take your element with the `id` attribute of `cat-photo-element` and give it the background color of green. In your `style` element:
+
+```css
+#cat-photo-element {
+  background-color: green;
+}
+```
+
+Note that inside your `style` element, you always reference classes by putting a `.` in front of their names. You always reference ids by putting a `#` in front of their names.
+
+# --instructions--
+
+Try giving your form, which now has the `id` attribute of `cat-photo-form`, a green background.
+
+# --hints--
+
+Your `form` element should have the id of `cat-photo-form`.
+
+```js
+assert($('form').attr('id') === 'cat-photo-form');
+```
+
+Your `form` element should have the `background-color` of green.
+
+```js
+assert($('#cat-photo-form').css('background-color') === 'rgb(0, 128, 0)');
+```
+
+Your `form` element should have an `id` attribute.
+
+```js
+assert(
+  code.match(/<form.*cat-photo-form.*>/gi) &&
+    code.match(/<form.*cat-photo-form.*>/gi).length > 0
+);
+```
+
+You should not give your `form` any `class` or `style` attributes.
+
+```js
+assert(!code.match(/<form.*style.*>/gi) && !code.match(/<form.*class.*>/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+
+  .silver-background {
+    background-color: silver;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div class="silver-background">
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+
+  .silver-background {
+    background-color: silver;
+  }
+
+  #cat-photo-form {
+    background-color: green;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div class="silver-background">
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
new file mode 100644
index 00000000000..219cf8699b6
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-attribute-selectors-to-style-elements.md
@@ -0,0 +1,210 @@
+---
+id: 58c383d33e2e3259241f3076
+title: Use Attribute Selectors to Style Elements
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cnpymfJ'
+forumTopicId: 301092
+dashedName: use-attribute-selectors-to-style-elements
+---
+
+# --description--
+
+You have been adding `id` or `class` attributes to elements that you wish to specifically style. These are known as ID and class selectors. There are other CSS Selectors you can use to select custom groups of elements to style.
+
+Let's bring out CatPhotoApp again to practice using CSS Selectors.
+
+For this challenge, you will use the `[attr=value]` attribute selector to style the checkboxes in CatPhotoApp. This selector matches and styles elements with a specific attribute value. For example, the below code changes the margins of all elements with the attribute `type` and a corresponding value of `radio`:
+
+```css
+[type='radio'] {
+  margin: 20px 0px 20px 0px;
+}
+```
+
+# --instructions--
+
+Using the `type` attribute selector, try to give the checkboxes in CatPhotoApp a top margin of 10px and a bottom margin of 15px.
+
+# --hints--
+
+The `type` attribute selector should be used to select the checkboxes.
+
+```js
+assert(
+  code.match(
+    /<style>[\s\S]*?\[\s*?type\s*?=\s*?("|')checkbox\1\s*?\]\s*?{[\s\S]*?}[\s\S]*?<\/style>/gi
+  )
+);
+```
+
+The top margins of the checkboxes should be 10px.
+
+```js
+assert(
+  (function () {
+    var count = 0;
+    $("[type='checkbox']").each(function () {
+      if ($(this).css('marginTop') === '10px') {
+        count++;
+      }
+    });
+    return count === 3;
+  })()
+);
+```
+
+The bottom margins of the checkboxes should be 15px.
+
+```js
+assert(
+  (function () {
+    var count = 0;
+    $("[type='checkbox']").each(function () {
+      if ($(this).css('marginBottom') === '15px') {
+        count++;
+      }
+    });
+    return count === 3;
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+
+  .silver-background {
+    background-color: silver;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div class="silver-background">
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+
+  .silver-background {
+    background-color: silver;
+  }
+  [type='checkbox'] {
+    margin-top: 10px;
+    margin-bottom: 15px;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+<main>
+  <p class="red-text">Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div class="silver-background">
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo" id="cat-photo-form">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
new file mode 100644
index 00000000000..00c60af5418
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-margin-of-an-element.md
@@ -0,0 +1,143 @@
+---
+id: bad87fee1348bd9afdf08726
+title: Use Clockwise Notation to Specify the Margin of an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cnpybAd'
+forumTopicId: 18345
+dashedName: use-clockwise-notation-to-specify-the-margin-of-an-element
+---
+
+# --description--
+
+Let's try this again, but with `margin` this time.
+
+Instead of specifying an element's `margin-top`, `margin-right`, `margin-bottom`, and `margin-left` properties individually, you can specify them all in one line, like this:
+
+```css
+margin: 10px 20px 10px 20px;
+```
+
+These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific margin instructions.
+
+# --instructions--
+
+Use Clockwise Notation to give the element with the `blue-box` class a margin of `40px` on its top and left side, but only `20px` on its bottom and right side.
+
+# --hints--
+
+Your `blue-box` class should give the top of elements `40px` of `margin`.
+
+```js
+assert($('.blue-box').css('margin-top') === '40px');
+```
+
+Your `blue-box` class should give the right of elements `20px` of `margin`.
+
+```js
+assert($('.blue-box').css('margin-right') === '20px');
+```
+
+Your `blue-box` class should give the bottom of elements `20px` of `margin`.
+
+```js
+assert($('.blue-box').css('margin-bottom') === '20px');
+```
+
+Your `blue-box` class should give the left of elements `40px` of `margin`.
+
+```js
+assert($('.blue-box').css('margin-left') === '40px');
+```
+
+You should use the clockwise notation to set the margin of `blue-box` class.
+
+```js
+assert(
+  /\.blue-box\s*{[\s\S]*margin[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
+    __helpers.removeCssComments($('style').text())
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 20px 40px 20px 40px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    margin: 20px 40px 20px 40px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 20px 40px 20px 40px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    margin: 20px 40px 20px 40px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+    margin: 40px 20px 20px 40px;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
new file mode 100644
index 00000000000..569d65f3b98
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-clockwise-notation-to-specify-the-padding-of-an-element.md
@@ -0,0 +1,141 @@
+---
+id: bad87fee1348bd9aedf08826
+title: Use Clockwise Notation to Specify the Padding of an Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cB7mBS9'
+forumTopicId: 18346
+dashedName: use-clockwise-notation-to-specify-the-padding-of-an-element
+---
+
+# --description--
+
+Instead of specifying an element's `padding-top`, `padding-right`, `padding-bottom`, and `padding-left` properties individually, you can specify them all in one line, like this:
+
+```css
+padding: 10px 20px 10px 20px;
+```
+
+These four values work like a clock: top, right, bottom, left, and will produce the exact same result as using the side-specific padding instructions.
+
+# --instructions--
+
+Use Clockwise Notation to give the `.blue-box` class a `padding` of `40px` on its top and left side, but only `20px` on its bottom and right side.
+
+# --hints--
+
+Your `blue-box` class should give the top of elements `40px` of `padding`.
+
+```js
+assert($('.blue-box').css('padding-top') === '40px');
+```
+
+Your `blue-box` class should give the right of elements `20px` of `padding`.
+
+```js
+assert($('.blue-box').css('padding-right') === '20px');
+```
+
+Your `blue-box` class should give the bottom of elements `20px` of `padding`.
+
+```js
+assert($('.blue-box').css('padding-bottom') === '20px');
+```
+
+Your `blue-box` class should give the left of elements `40px` of `padding`.
+
+```js
+assert($('.blue-box').css('padding-left') === '40px');
+```
+
+You should use the clockwise notation to set the padding of `blue-box` class.
+
+```js
+assert(
+  /\.blue-box\s*{[\s\S]*padding[\s]*:\s*\d+px\s+\d+px\s+\d+px\s+\d+px(;\s*[^}]+\s*}|;?\s*})/.test(
+    __helpers.removeCssComments($('style').text())
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 20px 40px 20px 40px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    padding: 20px 40px 20px 40px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .injected-text {
+    margin-bottom: -25px;
+    text-align: center;
+  }
+
+  .box {
+    border-style: solid;
+    border-color: black;
+    border-width: 5px;
+    text-align: center;
+  }
+
+  .yellow-box {
+    background-color: yellow;
+    padding: 20px 40px 20px 40px;
+  }
+
+  .red-box {
+    background-color: crimson;
+    color: #fff;
+    padding: 20px 40px 20px 40px;
+  }
+
+  .blue-box {
+    background-color: blue;
+    color: #fff;
+    padding: 40px 20px 20px 40px;
+  }
+</style>
+<h5 class="injected-text">margin</h5>
+
+<div class="box yellow-box">
+  <h5 class="box red-box">padding</h5>
+  <h5 class="box blue-box">padding</h5>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md
new file mode 100644
index 00000000000..a56e9494f24
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-css-selectors-to-style-elements.md
@@ -0,0 +1,158 @@
+---
+id: bad87fee1348bd9aedf08805
+title: Use CSS Selectors to Style Elements
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cJKMBT2'
+forumTopicId: 18349
+dashedName: use-css-selectors-to-style-elements
+---
+
+# --description--
+
+With CSS, there are hundreds of CSS properties that you can use to change the way an element looks on your page.
+
+When you entered `<h2 style="color: red;">CatPhotoApp</h2>`, you were styling that individual `h2` element with inline CSS, which stands for Cascading Style Sheets.
+
+That's one way to specify the style of an element, but there's a better way to apply CSS.
+
+At the top of your code, create a `style` block like this:
+
+```html
+<style>
+</style>
+```
+
+Inside that style block, you can create a <dfn>CSS selector</dfn> for all `h2` elements. For example, if you wanted all `h2` elements to be red, you would add a style rule that looks like this:
+
+```html
+<style>
+  h2 {
+    color: red;
+  }
+</style>
+```
+
+Note that it's important to have both opening and closing curly braces (`{` and `}`) around each element's style rule(s). You also need to make sure that your element's style definition is between the opening and closing style tags. Finally, be sure to add a semicolon to the end of each of your element's style rules.
+
+# --instructions--
+
+Delete your `h2` element's style attribute, and instead create a CSS `style` block. Add the necessary CSS to turn all `h2` elements blue.
+
+# --hints--
+
+The `style` attribute should be removed from your `h2` element.
+
+```js
+assert(!$('h2').attr('style'));
+```
+
+You should create a `style` element.
+
+```js
+assert($('style') && $('style').length >= 1);
+```
+
+Your `h2` element should be blue.
+
+```js
+assert($('h2').css('color') === 'rgb(0, 0, 255)');
+```
+
+Your stylesheet `h2` declaration should be valid with a semicolon and closing brace.
+
+```js
+assert(code.match(/h2\s*\{\s*color\s*:.*;\s*\}/g));
+```
+
+All your `style` elements should be valid and have closing tags.
+
+```js
+assert(
+  code.match(/<\/style>/g) &&
+    code.match(/<\/style>/g).length ===
+      (
+        code.match(
+          /<style((\s)*((type|media|scoped|title|disabled)="[^"]*")?(\s)*)*>/g
+        ) || []
+      ).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2 style="color: red;">CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<style>
+  h2 {
+    color: blue;
+  }
+</style>
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor" checked> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label><input type="checkbox" name="personality" checked> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
new file mode 100644
index 00000000000..61f62132c6f
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-css-variables-to-change-several-elements-at-once.md
@@ -0,0 +1,257 @@
+---
+id: 5a9d725e424fe3d0e10cad10
+title: Use CSS Variables to change several elements at once
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c6bDECm'
+forumTopicId: 301093
+dashedName: use-css-variables-to-change-several-elements-at-once
+---
+
+# --description--
+
+<dfn>CSS Variables</dfn> are a powerful way to change many CSS style properties at once by changing only one value.
+
+Follow the instructions below to see how changing just three values can change the styling of many elements.
+
+# --instructions--
+
+In the `penguin` class, change the `black` value to `gray`, the `gray` value to `white`, and the `yellow` value to `orange`.
+
+# --hints--
+
+`penguin` class should declare the `--penguin-skin` variable and assign it to `gray`.
+
+```js
+assert(
+  code.match(/.penguin\s*?{[\s\S]*--penguin-skin\s*?:\s*?gray\s*?;[\s\S]*}/gi)
+);
+```
+
+`penguin` class should declare the `--penguin-belly` variable and assign it to `white`.
+
+```js
+assert(
+  code.match(/.penguin\s*?{[\s\S]*--penguin-belly\s*?:\s*?white\s*?;[\s\S]*}/gi)
+);
+```
+
+`penguin` class should declare the `--penguin-beak` variable and assign it to `orange`.
+
+```js
+assert(
+  code.match(/.penguin\s*?{[\s\S]*--penguin-beak\s*?:\s*?orange\s*?;[\s\S]*}/gi)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .penguin {
+
+    /* Only change code below this line */
+    --penguin-skin: black;
+    --penguin-belly: gray;
+    --penguin-beak: yellow;
+    /* Only change code above this line */
+
+    position: relative;
+    margin: auto;
+    display: block;
+    margin-top: 5%;
+    width: 300px;
+    height: 300px;
+  }
+
+  .penguin-top {
+    top: 10%;
+    left: 25%;
+    background: var(--penguin-skin, gray);
+    width: 50%;
+    height: 45%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .penguin-bottom {
+    top: 40%;
+    left: 23.5%;
+    background: var(--penguin-skin, gray);
+    width: 53%;
+    height: 45%;
+    border-radius: 70% 70% 100% 100%;
+  }
+
+  .right-hand {
+    top: 0%;
+    left: -5%;
+    background: var(--penguin-skin, gray);
+    width: 30%;
+    height: 60%;
+    border-radius: 30% 30% 120% 30%;
+    transform: rotate(45deg);
+    z-index: -1;
+  }
+
+  .left-hand {
+    top: 0%;
+    left: 75%;
+    background: var(--penguin-skin, gray);
+    width: 30%;
+    height: 60%;
+    border-radius: 30% 30% 30% 120%;
+    transform: rotate(-45deg);
+    z-index: -1;
+  }
+
+  .right-cheek {
+    top: 15%;
+    left: 35%;
+    background: var(--penguin-belly, white);
+    width: 60%;
+    height: 70%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .left-cheek {
+    top: 15%;
+    left: 5%;
+    background: var(--penguin-belly, white);
+    width: 60%;
+    height: 70%;
+    border-radius: 70% 70% 60% 60%;
+  }
+
+  .belly {
+    top: 60%;
+    left: 2.5%;
+    background: var(--penguin-belly, white);
+    width: 95%;
+    height: 100%;
+    border-radius: 120% 120% 100% 100%;
+  }
+
+  .right-feet {
+    top: 85%;
+    left: 60%;
+    background: var(--penguin-beak, orange);
+    width: 15%;
+    height: 30%;
+    border-radius: 50% 50% 50% 50%;
+    transform: rotate(-80deg);
+    z-index: -2222;
+  }
+
+  .left-feet {
+    top: 85%;
+    left: 25%;
+    background: var(--penguin-beak, orange);
+    width: 15%;
+    height: 30%;
+    border-radius: 50% 50% 50% 50%;
+    transform: rotate(80deg);
+    z-index: -2222;
+  }
+
+  .right-eye {
+    top: 45%;
+    left: 60%;
+    background: black;
+    width: 15%;
+    height: 17%;
+    border-radius: 50%;
+  }
+
+  .left-eye {
+    top: 45%;
+    left: 25%;
+    background: black;
+    width: 15%;
+    height: 17%;
+    border-radius: 50%;
+  }
+
+  .sparkle {
+    top: 25%;
+    left: 15%;
+    background: white;
+    width: 35%;
+    height: 35%;
+    border-radius: 50%;
+  }
+
+  .blush-right {
+    top: 65%;
+    left: 15%;
+    background: pink;
+    width: 15%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .blush-left {
+    top: 65%;
+    left: 70%;
+    background: pink;
+    width: 15%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .beak-top {
+    top: 60%;
+    left: 40%;
+    background: var(--penguin-beak, orange);
+    width: 20%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  .beak-bottom {
+    top: 65%;
+    left: 42%;
+    background: var(--penguin-beak, orange);
+    width: 16%;
+    height: 10%;
+    border-radius: 50%;
+  }
+
+  body {
+    background:#c6faf1;
+  }
+
+  .penguin * {
+    position: absolute;
+  }
+</style>
+<div class="penguin">
+  <div class="penguin-bottom">
+    <div class="right-hand"></div>
+    <div class="left-hand"></div>
+    <div class="right-feet"></div>
+    <div class="left-feet"></div>
+  </div>
+  <div class="penguin-top">
+    <div class="right-cheek"></div>
+    <div class="left-cheek"></div>
+    <div class="belly"></div>
+    <div class="right-eye">
+      <div class="sparkle"></div>
+    </div>
+    <div class="left-eye">
+      <div class="sparkle"></div>
+    </div>
+    <div class="blush-right"></div>
+    <div class="blush-left"></div>
+    <div class="beak-top"></div>
+    <div class="beak-bottom"></div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.penguin {--penguin-skin: gray; --penguin-belly: white; --penguin-beak: orange;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
new file mode 100644
index 00000000000..5e66a0543dd
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-hex-code-for-specific-colors.md
@@ -0,0 +1,66 @@
+---
+id: bad87fee1348bd9aedf08726
+title: Use Hex Code for Specific Colors
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/c8W9mHM'
+forumTopicId: 18350
+dashedName: use-hex-code-for-specific-colors
+---
+
+# --description--
+
+Did you know there are other ways to represent colors in CSS? One of these ways is called hexadecimal code, or hex code for short.
+
+We usually use <dfn>decimals</dfn>, or base 10 numbers, which use the symbols 0 to 9 for each digit. <dfn>Hexadecimals</dfn> (or <dfn>hex</dfn>) are base 16 numbers. This means it uses sixteen distinct symbols. Like decimals, the symbols 0-9 represent the values zero to nine. Then A,B,C,D,E,F represent the values ten to fifteen. Altogether, 0 to F can represent a digit in hexadecimal, giving us 16 total possible values. You can find more information about <a href="https://www.freecodecamp.org/news/hexadecimal-number-system/" target="_blank" rel="noopener noreferrer nofollow">hexadecimal numbers here</a>.
+
+In CSS, we can use 6 hexadecimal digits to represent colors, two each for the red (R), green (G), and blue (B) components. For example, `#000000` is black and is also the lowest possible value. You can find more information about the <a href="https://www.freecodecamp.org/news/rgb-color-html-and-css-guide/#whatisthergbcolormodel" target="_blank" rel="noopener noreferrer nofollow">RGB color system here</a>.
+
+```css
+body {
+  color: #000000;
+}
+```
+
+# --instructions--
+
+Replace the word `black` in our `body` element's background-color with its hex code representation, `#000000`.
+
+# --hints--
+
+Your `body` element should have the `background-color` of black.
+
+```js
+assert($('body').css('background-color') === 'rgb(0, 0, 0)');
+```
+
+The hex code for the color black should be used instead of the word `black`.
+
+```js
+assert(
+  code.match(
+    /body\s*{(([\s\S]*;\s*?)|\s*?)background.*\s*:\s*?#000(000)?((\s*})|(;[\s\S]*?}))/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    background-color: black;
+  }
+</style>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    background-color: #000000;
+  }
+</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
new file mode 100644
index 00000000000..c72783eba8b
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-hex-code-to-mix-colors.md
@@ -0,0 +1,132 @@
+---
+id: bad87fee1348bd9aedf08721
+title: Use Hex Code to Mix Colors
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cK89PhP'
+forumTopicId: 18359
+dashedName: use-hex-code-to-mix-colors
+---
+
+# --description--
+
+To review, hex codes use 6 hexadecimal digits to represent colors, two each for red (R), green (G), and blue (B) components.
+
+From these three pure colors (red, green, and blue), we can vary the amounts of each to create over 16 million other colors!
+
+For example, orange is pure red, mixed with some green, and no blue. In hex code, this translates to being `#FFA500`.
+
+The digit `0` is the lowest number in hex code, and represents a complete absence of color.
+
+The digit `F` is the highest number in hex code, and represents the maximum possible brightness.
+
+# --instructions--
+
+Replace the color words in our `style` element with their correct hex codes.
+
+<table class='table table-striped'><tbody><tr><th>Color</th><th>Hex Code</th></tr><tr><td>Dodger Blue</td><td><code>#1E90FF</code></td></tr><tr><td>Green</td><td><code>#00FF00</code></td></tr><tr><td>Orange</td><td><code>#FFA500</code></td></tr><tr><td>Red</td><td><code>#FF0000</code></td></tr></tbody></table>
+
+# --hints--
+
+Your `h1` element with the text `I am red!` should be given the `color` red.
+
+```js
+assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+```
+
+The `hex code` for the color red should be used instead of the word `red`.
+
+```js
+assert(code.match(/\.red-text\s*?{\s*?color\s*:\s*?(#FF0000|#F00)\s*?;?\s*?}/gi));
+```
+
+Your `h1` element with the text `I am green!` should be given the `color` green.
+
+```js
+assert($('.green-text').css('color') === 'rgb(0, 255, 0)');
+```
+
+The `hex code` for the color green should be used instead of the word `green`.
+
+```js
+assert(code.match(/\.green-text\s*?{\s*?color\s*:\s*?(#00FF00|#0F0)\s*?;?\s*?}/gi));
+```
+
+Your `h1` element with the text `I am dodger blue!` should be given the `color` dodger blue.
+
+```js
+assert($('.dodger-blue-text').css('color') === 'rgb(30, 144, 255)');
+```
+
+The `hex code` for the color dodger blue should be used instead of the word `dodgerblue`.
+
+```js
+assert(code.match(/\.dodger-blue-text\s*?{\s*?color\s*:\s*?#1E90FF\s*?;?\s*?}/gi));
+```
+
+Your `h1` element with the text `I am orange!` should be given the `color` orange.
+
+```js
+assert($('.orange-text').css('color') === 'rgb(255, 165, 0)');
+```
+
+The `hex code` for the color orange should be used instead of the word `orange`.
+
+```js
+assert(code.match(/\.orange-text\s*?{\s*?color\s*:\s*?#FFA500\s*?;?\s*?}/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .red-text {
+    color: black;
+  }
+  .green-text {
+    color: black;
+  }
+  .dodger-blue-text {
+    color: black;
+  }
+  .orange-text {
+    color: black;
+  }
+</style>
+
+<h1 class="red-text">I am red!</h1>
+
+<h1 class="green-text">I am green!</h1>
+
+<h1 class="dodger-blue-text">I am dodger blue!</h1>
+
+<h1 class="orange-text">I am orange!</h1>
+```
+
+# --solutions--
+
+```html
+<style>
+  .red-text {
+    color: #FF0000;
+  }
+  .green-text {
+    color: #00FF00;
+  }
+  .dodger-blue-text {
+    color: #1E90FF;
+  }
+  .orange-text {
+    color: #FFA500;
+  }
+</style>
+
+<h1 class="red-text">I am red!</h1>
+
+<h1 class="green-text">I am green!</h1>
+
+<h1 class="dodger-blue-text">I am dodger blue!</h1>
+
+<h1 class="orange-text">I am orange!</h1>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
new file mode 100644
index 00000000000..65af4b7769e
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-rgb-to-mix-colors.md
@@ -0,0 +1,140 @@
+---
+id: bad82fee1348bd9aedf08721
+title: Use RGB to Mix Colors
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cm24JU6'
+forumTopicId: 18368
+dashedName: use-rgb-to-mix-colors
+---
+
+# --description--
+
+Just like with hex code, you can mix colors in RGB by using combinations of different values.
+
+# --instructions--
+
+Replace the hex codes in our `style` element with their correct RGB values.
+
+<table class='table table-striped'><tbody><tr><th>Color</th><th>RGB</th></tr><tr><td>Blue</td><td><code>rgb(0, 0, 255)</code></td></tr><tr><td>Red</td><td><code>rgb(255, 0, 0)</code></td></tr><tr><td>Orchid</td><td><code>rgb(218, 112, 214)</code></td></tr><tr><td>Sienna</td><td><code>rgb(160, 82, 45)</code></td></tr></tbody></table>
+
+# --hints--
+
+Your `h1` element with the text `I am red!` should have the `color` red.
+
+```js
+assert($('.red-text').css('color') === 'rgb(255, 0, 0)');
+```
+
+You should use `rgb` for the color red.
+
+```js
+assert(
+  code.match(
+    /\.red-text\s*{\s*color\s*:\s*rgb\(\s*255\s*,\s*0\s*,\s*0\s*\)\s*;?\s*}/gi
+  )
+);
+```
+
+Your `h1` element with the text `I am orchid!` should have the `color` orchid.
+
+```js
+assert($('.orchid-text').css('color') === 'rgb(218, 112, 214)');
+```
+
+You should use `rgb` for the color orchid.
+
+```js
+assert(
+  code.match(
+    /\.orchid-text\s*{\s*color\s*:\s*rgb\(\s*218\s*,\s*112\s*,\s*214\s*\)\s*;?\s*}/gi
+  )
+);
+```
+
+Your `h1` element with the text `I am blue!` should have the `color` blue.
+
+```js
+assert($('.blue-text').css('color') === 'rgb(0, 0, 255)');
+```
+
+You should use `rgb` for the color blue.
+
+```js
+assert(
+  code.match(
+    /\.blue-text\s*{\s*color\s*:\s*rgb\(\s*0\s*,\s*0\s*,\s*255\s*\)\s*;?\s*}/gi
+  )
+);
+```
+
+Your `h1` element with the text `I am sienna!` should have the `color` sienna.
+
+```js
+assert($('.sienna-text').css('color') === 'rgb(160, 82, 45)');
+```
+
+You should use `rgb` for the color sienna.
+
+```js
+assert(
+  code.match(
+    /\.sienna-text\s*{\s*color\s*:\s*rgb\(\s*160\s*,\s*82\s*,\s*45\s*\)\s*;?\s*}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .red-text {
+    color: #000000;
+  }
+  .orchid-text {
+    color: #000000;
+  }
+  .sienna-text {
+    color: #000000;
+  }
+  .blue-text {
+    color: #000000;
+  }
+</style>
+
+<h1 class="red-text">I am red!</h1>
+
+<h1 class="orchid-text">I am orchid!</h1>
+
+<h1 class="sienna-text">I am sienna!</h1>
+
+<h1 class="blue-text">I am blue!</h1>
+```
+
+# --solutions--
+
+```html
+<style>
+  .red-text {
+    color: rgb(255, 0, 0);
+  }
+  .orchid-text {
+    color: rgb(218, 112, 214);
+  }
+  .sienna-text {
+    color: rgb(160, 82, 45);
+  }
+  .blue-text {
+    color:rgb(0, 0, 255);
+  }
+</style>
+
+<h1 class="red-text">I am red!</h1>
+
+<h1 class="orchid-text">I am orchid!</h1>
+
+<h1 class="sienna-text">I am sienna!</h1>
+
+<h1 class="blue-text">I am blue!</h1>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
new file mode 100644
index 00000000000..a280b1cfad0
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-css/use-rgb-values-to-color-elements.md
@@ -0,0 +1,76 @@
+---
+id: bad87fee1348bd9aede08718
+title: Use RGB values to Color Elements
+challengeType: 0
+videoUrl: 'https://scrimba.com/c/cRkp2fr'
+forumTopicId: 18369
+dashedName: use-rgb-values-to-color-elements
+---
+
+# --description--
+
+Another way you can represent colors in CSS is by using `RGB` values.
+
+The `RGB` value for black looks like this:
+
+```css
+rgb(0, 0, 0)
+```
+
+The `RGB` value for white looks like this:
+
+```css
+rgb(255, 255, 255)
+```
+
+Instead of using six hexadecimal digits like you do with hex code, with `RGB` you specify the brightness of each color with a number between 0 and 255.
+
+If you do the math, the two digits for one color equal 16 times 16, which gives us 256 total values. So `RGB`, which starts counting from zero, has the exact same number of possible values as hex code.
+
+Here's an example of how you'd change the `body` background to orange using its RGB code.
+
+```css
+body {
+  background-color: rgb(255, 165, 0);
+}
+```
+
+# --instructions--
+
+Let's replace the hex code in our `body` element's background color with the RGB value for black: `rgb(0, 0, 0)`
+
+# --hints--
+
+Your `body` element should have a black background.
+
+```js
+assert($('body').css('background-color') === 'rgb(0, 0, 0)');
+```
+
+You should use `rgb` to give your `body` element a background of black.
+
+```js
+assert(code.match(/rgb\s*\(\s*0\s*,\s*0\s*,\s*0\s*\)/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    background-color: #F00;
+  }
+</style>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    background-color: rgb(0, 0, 0);
+  }
+</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
new file mode 100644
index 00000000000..25f446b403d
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/add-a-submit-button-to-a-form.md
@@ -0,0 +1,113 @@
+---
+id: bad87fee1348bd9aedd08830
+title: Add a Submit Button to a Form
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cp2Nkhz'
+forumTopicId: 16627
+dashedName: add-a-submit-button-to-a-form
+---
+
+# --description--
+
+Let's add a `submit` button to your form. Clicking this button will send the data from your form to the URL you specified with your form's `action` attribute.
+
+Here's an example submit button:
+
+```html
+<button type="submit">this button submits the form</button>
+```
+
+# --instructions--
+
+Add a button as the last element of your `form` element with a type of `submit`, and `Submit` as its text.
+
+# --hints--
+
+Your `form` should have a `button` inside it.
+
+```js
+assert($('form').children('button').length > 0);
+```
+
+Your submit button should have the attribute `type` set to `submit`.
+
+```js
+assert($('button').attr('type') === 'submit');
+```
+
+Your submit button should only have the text `Submit`.
+
+```js
+assert(
+  $('button')
+    .text()
+    .match(/^\s*submit\s*$/gi)
+);
+```
+
+Your `button` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/button>/g) &&
+    code.match(/<button/g) &&
+    code.match(/<\/button>/g).length === code.match(/<button/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+    <input type="text" placeholder="cat photo URL">
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+    <input type="text" placeholder="cat photo URL">
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
new file mode 100644
index 00000000000..9dcef620cf9
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/add-images-to-your-website.md
@@ -0,0 +1,92 @@
+---
+id: bad87fee1348bd9aedf08812
+title: Add Images to Your Website
+challengeType: 0
+forumTopicId: 16640
+dashedName: add-images-to-your-website
+---
+
+# --description--
+
+You can add images to your website by using the `img` element, and point to a specific image's URL using the `src` attribute.
+
+An example of this would be:
+
+```html
+<img src="https://www.freecatphotoapp.com/your-image.jpg">
+```
+
+Note that `img` elements are self-closing.
+
+All `img` elements **must** have an `alt` attribute. The text inside an `alt` attribute is used for screen readers to improve accessibility and is displayed if the image fails to load.
+
+**Note:** If the image is purely decorative, using an empty `alt` attribute is a best practice.
+
+Ideally the `alt` attribute should not contain special characters unless needed.
+
+Let's add an `alt` attribute to our `img` example above:
+
+```html
+<img src="https://www.freecatphotoapp.com/your-image.jpg" alt="freeCodeCamp logo">
+```
+
+# --instructions--
+
+Let's try to add an image to our website:
+
+Within the existing `main` element, insert an `img` element before the existing `p` elements.
+
+Now set the `src` attribute so that it points to the url `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`
+
+Finally, don't forget to give your `img` element an `alt` attribute with applicable text.
+
+# --hints--
+
+Your page should have an image element.
+
+```js
+assert($('img').length);
+```
+
+Your image should have a `src` attribute that points to the kitten image.
+
+```js
+assert(/^https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg$/i.test($('img').attr('src')));
+```
+
+Your image element's `alt` attribute should not be empty.
+
+```js
+assert(
+  $('img').attr('alt') &&
+    $('img').attr('alt').length &&
+    /<(?:img|IMG)\S*alt=(['"])(?!\1|>)\S+\1\S*\/?>/.test(
+      __helpers.removeWhiteSpace(code)
+    )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+
+
+  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md
new file mode 100644
index 00000000000..e0d1425d5f1
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/add-placeholder-text-to-a-text-field.md
@@ -0,0 +1,108 @@
+---
+id: bad87fee1348bd9aedf08830
+title: Add Placeholder Text to a Text Field
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cKdJDhg'
+forumTopicId: 16647
+dashedName: add-placeholder-text-to-a-text-field
+---
+
+# --description--
+
+Placeholder text is what is displayed in your `input` element before your user has inputted anything.
+
+You can create placeholder text like so:
+
+```html
+<input type="text" placeholder="this is placeholder text">
+```
+
+**Note:** Remember that `input` elements are self-closing.
+
+# --instructions--
+
+Set the `placeholder` value of your text `input` to "cat photo URL".
+
+# --hints--
+
+You should add a `placeholder` attribute to the existing text `input` element.
+
+```js
+assert($('input[placeholder]').length > 0);
+```
+
+You should set the value of your `placeholder` attribute to `cat photo URL`.
+
+```js
+assert(
+  $('input') &&
+    $('input').attr('placeholder') &&
+    $('input')
+      .attr('placeholder')
+      .match(/cat\s+photo\s+URL/gi)
+);
+```
+
+The finished `input` element should not have a closing tag.
+
+```js
+assert(!code.match(/<input.*\/?>.*<\/input>/gi));
+```
+
+The finished `input` element should have valid syntax.
+
+```js
+assert($('input[type=text]').length > 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <input type="text">
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <input type="text" placeholder="cat photo URL">
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
new file mode 100644
index 00000000000..a096fcbeeec
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/check-radio-buttons-and-checkboxes-by-default.md
@@ -0,0 +1,116 @@
+---
+id: bad87fee1348bd9aedd08835
+title: Check Radio Buttons and Checkboxes by Default
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cWk3Qh6'
+forumTopicId: 301094
+dashedName: check-radio-buttons-and-checkboxes-by-default
+---
+
+# --description--
+
+You can set a checkbox or radio button to be checked by default using the `checked` attribute.
+
+To do this, just add the word `checked` to the inside of an `input` element. For example:
+
+```html
+<input type="radio" name="test-name" checked>
+```
+
+# --instructions--
+
+Set the first of your radio buttons and the first of your checkboxes to both be checked by default.
+
+# --hints--
+
+Your first radio button on your form should be checked by default.
+
+```js
+assert($('input[type="radio"]').prop('checked'));
+```
+
+Your first checkbox on your form should be checked by default.
+
+```js
+assert($('input[type="checkbox"]').prop('checked'));
+```
+
+You should not change the inner text of the `Indoor` label.
+
+```js
+assert.equal(document.querySelector('label[for="indoor"]')?.innerText?.trim(), 'Indoor');
+```
+
+You should not change the inner text of the `Loving` label.
+
+```js
+assert.equal(document.querySelector('label[for="loving"]')?.innerText?.trim(), 'Loving');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
+    <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
+    <label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
+    <label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
+    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
+    <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
+    <label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
+    <label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/comment-out-html.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/comment-out-html.md
new file mode 100644
index 00000000000..178b029cc95
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/comment-out-html.md
@@ -0,0 +1,76 @@
+---
+id: bad87fee1348bd9aedf08804
+title: Comment out HTML
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cGyGbca'
+forumTopicId: 16782
+dashedName: comment-out-html
+---
+
+# --description--
+
+Remember that in order to start a comment, you need to use `<!--` and to end a comment, you need to use `-->`
+
+Here you'll need to end the comment before your `h2` element begins.
+
+# --instructions--
+
+Comment out your `h1` element and your `p` element, but not your `h2` element.
+
+# --hints--
+
+Your `h1` element should be commented out so that it is not visible on the page.
+
+```js
+assert($('h1').length === 0);
+```
+
+Your `h2` element should not be commented out so that it is visible on the page.
+
+```js
+assert($('h2').length > 0);
+```
+
+Your `p` element should be commented out so that it is not visible on the page.
+
+```js
+assert($('p').length === 0);
+```
+
+Each of your comments should be closed with `-->`.
+
+```js
+assert(code.match(/[^fc]-->/g).length > 1);
+```
+
+You should not change the order of the `h1`, `h2`, or `p` elements in the code.
+
+```js
+assert(
+  code.match(/<([a-z0-9]){1,2}>/g)[0] === '<h1>' &&
+    code.match(/<([a-z0-9]){1,2}>/g)[1] === '<h2>' &&
+    code.match(/<([a-z0-9]){1,2}>/g)[2] === '<p>'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!--
+<h1>Hello World</h1>
+
+<h2>CatPhotoApp</h2>
+
+<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+-->
+```
+
+# --solutions--
+
+```html
+<!--<h1>Hello World</h1>-->
+<h2>CatPhotoApp</h2> 
+<!--<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p> -->
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md
new file mode 100644
index 00000000000..c625011ae19
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-bulleted-unordered-list.md
@@ -0,0 +1,102 @@
+---
+id: bad87fee1348bd9aedf08827
+title: Create a Bulleted Unordered List
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cDKVPuv'
+forumTopicId: 16814
+dashedName: create-a-bulleted-unordered-list
+---
+
+# --description--
+
+HTML has a special element for creating <dfn>unordered lists</dfn>, or bullet point style lists.
+
+Unordered lists start with an opening `<ul>` element, followed by any number of `<li>` elements. Finally, unordered lists close with a `</ul>`.
+
+For example:
+
+```html
+<ul>
+  <li>milk</li>
+  <li>cheese</li>
+</ul>
+```
+
+would create a bullet point style list of `milk` and `cheese`.
+
+# --instructions--
+
+Remove the last two `p` elements and create an unordered list of three things that cats love at the bottom of the page.
+
+# --hints--
+
+Create a `ul` element.
+
+```js
+assert($('ul').length > 0);
+```
+
+You should have three `li` elements within your `ul` element.
+
+```js
+assert($('ul li').length > 2);
+```
+
+Your `ul` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/ul>/gi) &&
+    code.match(/<ul/gi) &&
+    code.match(/<\/ul>/gi).length === code.match(/<ul/gi).length
+);
+```
+
+Your `li` elements should have closing tags.
+
+```js
+assert(
+  code.match(/<\/li>/gi) &&
+    code.match(/<li[\s>]/gi) &&
+    code.match(/<\/li>/gi).length === code.match(/<li[\s>]/gi).length
+);
+```
+
+Your `li` elements should not contain an empty string or only white-space.
+
+```js
+assert($('ul li').filter((_, item) => !$(item).text().trim()).length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <ul>
+    <li>milk</li>
+    <li>mice</li>
+    <li>catnip</li>
+  </ul>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md
new file mode 100644
index 00000000000..8ab63d7a071
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-form-element.md
@@ -0,0 +1,106 @@
+---
+id: bad87fee1348bd9aede08830
+title: Create a Form Element
+challengeType: 0
+forumTopicId: 16817
+dashedName: create-a-form-element
+---
+
+# --description--
+
+You can build web forms that actually submit data to a server using nothing more than pure HTML. You can do this by specifying an `action` attribute on your `form` element.
+
+For example:
+
+```html
+<form action="url-where-you-want-to-submit-form-data">
+  <input>
+</form>
+```
+
+# --instructions--
+
+Nest the existing `input` element inside a `form` element and assign `"https://www.freecatphotoapp.com/submit-cat-photo"` to the `action` attribute of the `form` element.
+
+# --hints--
+
+The existing `input` element should be nested within a `form` element.
+
+```js
+const inputElem = document.querySelector('form input');
+assert(
+  inputElem.getAttribute('type') === 'text' &&
+    inputElem.getAttribute('placeholder') === 'cat photo URL'
+);
+```
+
+Your `form` should have an `action` attribute which is set to `https://www.freecatphotoapp.com/submit-cat-photo`.
+
+```js
+const action = $('form').attr('action');
+assert(action.match(/^https:\/\/(www\.)?freecatphotoapp\.com\/submit-cat-photo$/i))
+```
+
+Your `form` element should have well-formed open and close tags.
+
+```js
+assert(
+  code.match(/<\/form>/g) &&
+    code.match(/<form [^<]*>/g) &&
+    code.match(/<\/form>/g).length === code.match(/<form [^<]*>/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <input type="text" placeholder="cat photo URL">
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+    <input type="text" placeholder="cat photo URL">
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
new file mode 100644
index 00000000000..43bc88a6169
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-set-of-checkboxes.md
@@ -0,0 +1,135 @@
+---
+id: bad87fee1348bd9aedf08835
+title: Create a Set of Checkboxes
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cqrkJsp'
+forumTopicId: 16821
+dashedName: create-a-set-of-checkboxes
+---
+
+# --description--
+
+Forms commonly use <dfn>checkboxes</dfn> for questions that may have more than one answer.
+
+Checkboxes are a type of `input`.
+
+Each of your checkboxes can be nested within its own `label` element. By wrapping an `input` element inside of a `label` element it will automatically associate the checkbox input with the label element surrounding it.
+
+All related checkbox inputs should have the same `name` attribute.
+
+It is considered best practice to explicitly define the relationship between a checkbox `input` and its corresponding `label` by setting the `for` attribute on the `label` element to match the `id` attribute of the associated `input` element.
+
+Here's an example of a checkbox:
+
+```html
+<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
+```
+
+# --instructions--
+
+Add to your form a set of three checkboxes. Each checkbox should be nested within its own `label` element. All three should share the `name` attribute of `personality`.
+
+# --hints--
+
+Your page should have three checkbox elements.
+
+```js
+assert($('input[type="checkbox"]').length > 2);
+```
+
+Each of your three checkbox elements should be nested in its own `label` element.
+
+```js
+assert($('label > input[type="checkbox"]:only-child').length > 2);
+```
+
+Make sure each of your `label` elements has a closing tag.
+
+```js
+assert(
+  code.match(/<\/label>/g) &&
+    code.match(/<label/g) &&
+    code.match(/<\/label>/g).length === code.match(/<label/g).length
+);
+```
+
+Your checkboxes should be given the `name` attribute of `personality`.
+
+```js
+assert(
+  $('label > input[type="checkbox"]').filter('[name="personality"]').length > 2
+);
+```
+
+Each of your checkboxes should be added within the `form` tag.
+
+```js
+assert($('label').parent().get(0).tagName.match('FORM'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
+    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
+    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label for="playful"><input id="playful" type="checkbox" name="personality">Playful</label>
+    <label for="lazy"><input id="lazy" type="checkbox" 
+name="personality">Lazy</label>
+    <label for="evil"><input id="evil" type="checkbox" 
+name="personality">Evil</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md
new file mode 100644
index 00000000000..3a1fb4e602b
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-set-of-radio-buttons.md
@@ -0,0 +1,160 @@
+---
+id: bad87fee1348bd9aedf08834
+title: Create a Set of Radio Buttons
+challengeType: 0
+forumTopicId: 16822
+dashedName: create-a-set-of-radio-buttons
+---
+
+# --description--
+
+You can use <dfn>radio buttons</dfn> for questions where you want the user to only give you one answer out of multiple options.
+
+Radio buttons are a type of `input`.
+
+Each of your radio buttons can be nested within its own `label` element. By wrapping an `input` element inside of a `label` element it will automatically associate the radio button input with the label element surrounding it.
+
+All related radio buttons should have the same `name` attribute to create a radio button group. By creating a radio group, selecting any single radio button will automatically deselect the other buttons within the same group ensuring only one answer is provided by the user.
+
+Here's an example of a radio button:
+
+```html
+<label> 
+  <input type="radio" name="indoor-outdoor">Indoor 
+</label>
+```
+
+It is considered best practice to set a `for` attribute on the `label` element, with a value that matches the value of the `id` attribute of the `input` element. This allows assistive technologies to create a linked relationship between the label and the related `input` element. For example:
+
+```html
+<input id="indoor" type="radio" name="indoor-outdoor">
+<label for="indoor">Indoor</label>
+```
+
+We can also nest the `input` element within the `label` tags:
+
+```html
+<label for="indoor"> 
+  <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
+</label>
+```
+
+# --instructions--
+
+Add a pair of radio buttons to your form, each nested in its own `label` element. One should have the option of `indoor` and the other should have the option of `outdoor`. Both should share the `name` attribute of `indoor-outdoor` to create a radio group.
+
+# --hints--
+
+Your page should have two `radio` button elements.
+
+```js
+assert($('input[type="radio"]').length > 1);
+```
+
+Your radio buttons should be given the `name` attribute of `indoor-outdoor`.
+
+```js
+assert($('input[type="radio"]').filter("[name='indoor-outdoor']").length > 1);
+```
+
+Each of your two radio button elements should be nested in its own `label` element.
+
+```js
+assert($('label > input[type="radio"]:only-child').length > 1);
+```
+
+Each of your `label` elements should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/label>/g) &&
+    code.match(/<label/g) &&
+    code.match(/<\/label>/g).length === code.match(/<label/g).length
+);
+```
+
+One of your radio buttons should have the label `indoor`.
+
+```js
+assert(
+  $('label')
+    .text()
+    .match(/indoor/gi)
+);
+```
+
+One of your radio buttons should have the label `outdoor`.
+
+```js
+assert(
+  $('label')
+    .text()
+    .match(/outdoor/gi)
+);
+```
+
+Each of your radio button elements should be added within the `form` tag.
+
+```js
+assert($('label').parent().get(0).tagName.match('FORM'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+   <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
+    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
new file mode 100644
index 00000000000..27b4210292e
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-a-text-field.md
@@ -0,0 +1,89 @@
+---
+id: bad87fee1348bd9aedf08829
+title: Create a Text Field
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/c2EVnf6'
+forumTopicId: 16823
+dashedName: create-a-text-field
+---
+
+# --description--
+
+Now let's create a web form.
+
+`input` elements are a convenient way to get input from your user.
+
+You can create a text input like this:
+
+```html
+<input type="text">
+```
+
+Note that `input` elements are self-closing.
+
+# --instructions--
+
+Create an `input` element of type `text` below your lists.
+
+# --hints--
+
+Your app should have an `input` element of type `text`.
+
+```js
+assert($('input[type=text]').length > 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+
+
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form>
+    <input type="text">
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md
new file mode 100644
index 00000000000..2684bfe9035
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/create-an-ordered-list.md
@@ -0,0 +1,157 @@
+---
+id: bad87fee1348bd9aedf08828
+title: Create an Ordered List
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cQ3B8TM'
+forumTopicId: 16824
+dashedName: create-an-ordered-list
+---
+
+# --description--
+
+HTML has another special element for creating <dfn>ordered lists</dfn>, or numbered lists.
+
+Ordered lists start with an opening `<ol>` element, followed by any number of `<li>` elements. Finally, ordered lists are closed with the `</ol>` tag.
+
+For example:
+
+```html
+<ol>
+  <li>Garfield</li>
+  <li>Sylvester</li>
+</ol>
+```
+
+would create a numbered list of `Garfield` and `Sylvester`.
+
+# --instructions--
+
+Create an ordered list of the top 3 things cats hate the most.
+
+# --hints--
+
+You should have an ordered list for `Top 3 things cats hate:`
+
+```js
+assert(/Top 3 things cats hate:/i.test($('ol').prev().text()));
+```
+
+You should have an unordered list for `Things cats love:`
+
+```js
+assert(/Things cats love:/i.test($('ul').prev().text()));
+```
+
+You should have only one `ul` element.
+
+```js
+assert.equal($('ul').length, 1);
+```
+
+You should have only one `ol` element.
+
+```js
+assert.equal($('ol').length, 1);
+```
+
+You should have three `li` elements within your `ul` element.
+
+```js
+assert.equal($('ul li').length, 3);
+```
+
+You should have three `li` elements within your `ol` element.
+
+```js
+assert.equal($('ol li').length, 3);
+```
+
+Your `ul` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/ul>/g) &&
+    code.match(/<\/ul>/g).length === code.match(/<ul>/g).length
+);
+```
+
+Your `ol` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/ol>/g) &&
+    code.match(/<\/ol>/g).length === code.match(/<ol>/g).length
+);
+```
+
+Your `li` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/li>/g) &&
+    code.match(/<li>/g) &&
+    code.match(/<\/li>/g).length === code.match(/<li>/g).length
+);
+```
+
+The `li` elements in your unordered list should not be empty.
+
+```js
+$('ul li').each((i, val) =>
+  assert(__helpers.removeWhiteSpace(val.textContent))
+);
+```
+
+The `li` elements in your ordered list should not be empty.
+
+```js
+$('ol li').each((i, val) =>
+  assert(!!__helpers.removeWhiteSpace(val.textContent))
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>hate 1</li>
+    <li>hate 2</li>
+    <li>hate 3</li>
+  </ol>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md
new file mode 100644
index 00000000000..cab6e5cef3f
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/declare-the-doctype-of-an-html-document.md
@@ -0,0 +1,70 @@
+---
+id: 587d78aa367417b2b2512aed
+title: Declare the Doctype of an HTML Document
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cra98AJ'
+forumTopicId: 301095
+dashedName: declare-the-doctype-of-an-html-document
+---
+
+# --description--
+
+The challenges so far have covered specific HTML elements and their uses. However, there are a few elements that give overall structure to your page, and should be included in every HTML document.
+
+At the top of your document, you need to tell the browser which version of HTML your page is using. HTML is an evolving language, and is updated regularly. Most major browsers support the latest specification, which is HTML5. However, older web pages may use previous versions of the language.
+
+You tell the browser this information by adding the `<!DOCTYPE ...>` tag on the first line, where the `...` part is the version of HTML. For HTML5, you use `<!DOCTYPE html>`.
+
+The `!` and uppercase `DOCTYPE` is important, especially for older browsers. The `html` is not case sensitive.
+
+Next, the rest of your HTML code needs to be wrapped in `html` tags. The opening `<html>` goes directly below the `<!DOCTYPE html>` line, and the closing `</html>` goes at the end of the page.
+
+Here's an example of the page structure. Your HTML code would go in the space between the two `html` tags.
+
+```html
+<!DOCTYPE html>
+<html>
+
+</html>
+```
+
+# --instructions--
+
+Add a `DOCTYPE` tag for HTML5 to the top of the blank HTML document in the code editor. Under it, add opening and closing `html` tags, which wrap around an `h1` element. The heading can include any text.
+
+# --hints--
+
+Your code should include a `<!DOCTYPE html>` tag.
+
+```js
+assert(code.match(/<!DOCTYPE\s+?html\s*?>/gi));
+```
+
+There should be one `html` element.
+
+```js
+assert($('html').length == 1);
+```
+
+The `html` tags should wrap around one `h1` element.
+
+```js
+assert(code.match(/<html>\s*?<h1>\s*?.*?\s*?<\/h1>\s*?<\/html>/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html>
+  <h1> Hello world </h1>
+</html>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.md
new file mode 100644
index 00000000000..c847ac31fdf
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/define-the-head-and-body-of-an-html-document.md
@@ -0,0 +1,141 @@
+---
+id: 587d78aa367417b2b2512aec
+title: Define the Head and Body of an HTML Document
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cra9bfP'
+forumTopicId: 301096
+dashedName: define-the-head-and-body-of-an-html-document
+---
+
+# --description--
+
+You can add another level of organization in your HTML document within the `html` tags with the `head` and `body` elements. Any markup with information about your page would go into the `head` tag. Then any markup with the content of the page (what displays for a user) would go into the `body` tag.
+
+Metadata elements, such as `link`, `meta`, `title`, and `style`, typically go inside the `head` element.
+
+Here's an example of a page's layout:
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+   <meta charset="utf-8">
+   <title>Example title</title>
+  </head>
+  <body>
+    <div>
+    </div>
+  </body>
+</html>
+```
+
+# --instructions--
+
+Edit the markup so there's a `head` and a `body`. The `head` element should only include the `title`, and the `body` element should only include the `h1` and `p`.
+
+# --hints--
+
+There should be only one `head` element on the page.
+
+```js
+const headElems = code.replace(/\n/g, '').match(/\<head\s*>.*?\<\/head\s*>/g);
+assert(headElems && headElems.length === 1);
+```
+
+There should be only one `body` element on the page.
+
+```js
+const bodyElems = code.replace(/\n/g, '').match(/<body\s*>.*?<\/body\s*>/g);
+assert(bodyElems && bodyElems.length === 1);
+```
+
+The `head` element should be a child of the `html` element.
+
+```js
+const htmlChildren = code
+  .replace(/\n/g, '')
+  .match(/<html\s*>(?<children>.*)<\/html\s*>/);
+let foundHead;
+if (htmlChildren) {
+  const { children } = htmlChildren.groups;
+
+  foundHead = children.match(/<head\s*>.*<\/head\s*>/);
+}
+assert(foundHead);
+```
+
+The `body` element should be a child of the `html` element.
+
+```js
+const htmlChildren = code
+  .replace(/\n/g, '')
+  .match(/<html\s*>(?<children>.*?)<\/html\s*>/);
+let foundBody;
+if (htmlChildren) {
+  const { children } = htmlChildren.groups;
+  foundBody = children.match(/<body\s*>.*<\/body\s*>/);
+}
+assert(foundBody);
+```
+
+The `head` element should wrap around the `title` element.
+
+```js
+const headChildren = code
+  .replace(/\n/g, '')
+  .match(/<head\s*>(?<children>.*?)<\/head\s*>/);
+let foundTitle;
+if (headChildren) {
+  const { children } = headChildren.groups;
+  foundTitle = children.match(/<title\s*>.*?<\/title\s*>/);
+}
+assert(foundTitle);
+```
+
+The `body` element should wrap around both the `h1` and `p` elements.
+
+```js
+const bodyChildren = code
+  .replace(/\n/g, '')
+  .match(/<body\s*>(?<children>.*?)<\/body\s*>/);
+let foundElems;
+if (bodyChildren) {
+  const { children } = bodyChildren.groups;
+  const h1s = children.match(/<h1\s*>.*<\/h1\s*>/g);
+  const ps = children.match(/<p\s*>.*<\/p\s*>/g);
+  const numH1s = h1s ? h1s.length : 0;
+  const numPs = ps ? ps.length : 0;
+  foundElems = numH1s === 1 && numPs === 1;
+}
+assert(foundElems);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html>
+  <title>The best page ever</title>
+
+  <h1>The best page ever</h1>
+  <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+
+</html>
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html>
+ <head>
+  <title>The best page ever</title>
+ </head>
+ <body>
+  <h1>The best page ever</h1>
+  <p>Cat ipsum dolor sit amet, jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed. Go into a room to decide you didn't want to be in there anyway. I like big cats and i can not lie kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Meow i could pee on this if i had the energy for slap owner's face at 5am until human fills food dish yet scamper. Knock dish off table head butt cant eat out of my own dish scratch the furniture. Make meme, make cute face. Sleep in the bathroom sink chase laser but pee in the shoe. Paw at your fat belly licks your face and eat grass, throw it back up kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+ </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/delete-html-elements.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/delete-html-elements.md
new file mode 100644
index 00000000000..8115f9ef35f
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/delete-html-elements.md
@@ -0,0 +1,56 @@
+---
+id: bad87fed1348bd9aedf08833
+title: Delete HTML Elements
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/ckK73C9'
+forumTopicId: 17559
+dashedName: delete-html-elements
+---
+
+# --description--
+
+Our phone doesn't have much vertical space.
+
+Let's remove the unnecessary elements so we can start building our CatPhotoApp.
+
+# --instructions--
+
+Delete your `h1` element so we can simplify our view.
+
+# --hints--
+
+Your `h1` element should be deleted.
+
+```js
+assert(!code.match(/<h1>/gi) && !code.match(/<\/h1>/gi));
+```
+
+Your `h2` element should be on the page.
+
+```js
+assert(code.match(/<h2>[\w\W]*<\/h2>/gi));
+```
+
+Your `p` element should be on the page.
+
+```js
+assert(code.match(/<p>[\w\W]*<\/p>/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h1>Hello World</h1>
+
+<h2>CatPhotoApp</h2>
+
+<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2><p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md
new file mode 100644
index 00000000000..b9a9509f8ea
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/fill-in-the-blank-with-placeholder-text.md
@@ -0,0 +1,50 @@
+---
+id: bad87fee1348bd9aedf08833
+title: Fill in the Blank with Placeholder Text
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cgR7Dc7'
+forumTopicId: 18178
+dashedName: fill-in-the-blank-with-placeholder-text
+---
+
+# --description--
+
+Web developers traditionally use <dfn>lorem ipsum text</dfn> as placeholder text. The lorem ipsum text is randomly scraped from a famous passage by Cicero of Ancient Rome.
+
+Lorem ipsum text has been used as placeholder text by typesetters since the 16th century, and this tradition continues on the web.
+
+Well, 5 centuries is long enough. Since we're building a CatPhotoApp, let's use something called "kitty ipsum" text.
+
+# --instructions--
+
+Replace the text inside your `p` element with the first few words of this kitty ipsum text: `Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.`
+
+# --hints--
+
+Your `p` element should contain the first few words of the provided "kitty ipsum" text.
+
+```js
+assert.isTrue(/Kitty(\s)+ipsum/gi.test($('p').text()));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h1>Hello World</h1>
+
+<h2>CatPhotoApp</h2>
+
+<p>Hello Paragraph</p>
+```
+
+# --solutions--
+
+```html
+<h1>Hello World</h1>
+
+<h2>CatPhotoApp</h2>
+
+<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff</p>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.md
new file mode 100644
index 00000000000..7ad1af2e848
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/headline-with-the-h2-element.md
@@ -0,0 +1,70 @@
+---
+id: bad87fee1348bd9aedf0887a
+title: Headline with the h2 Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gqf3'
+forumTopicId: 18196
+dashedName: headline-with-the-h2-element
+---
+
+# --description--
+
+Over the next few lessons, we'll build an HTML5 cat photo web app piece-by-piece.
+
+The `h2` element you will be adding in this step will add a level two heading to the web page.
+
+This element tells the browser about the structure of your website. `h1` elements are often used for main headings, while `h2` elements are generally used for subheadings. There are also `h3`, `h4`, `h5` and `h6` elements to indicate different levels of subheadings.
+
+# --instructions--
+
+Add an `h2` tag that says "CatPhotoApp" to create a second HTML element below your "Hello World" `h1` element.
+
+# --hints--
+
+You should create an `h2` element.
+
+```js
+assert($('h2').length > 0);
+```
+
+Your `h2` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/h2>/g) &&
+    code.match(/<\/h2>/g).length === code.match(/<h2>/g).length
+);
+```
+
+Your `h2` element should have the text `CatPhotoApp`.
+
+```js
+assert.isTrue(/cat(\s)?photo(\s)?app/gi.test($('h2').text()));
+```
+
+Your `h1` element should have the text `Hello World`.
+
+```js
+assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
+```
+
+Your `h1` element should be before your `h2` element.
+
+```js
+assert(code.match(/<h1>\s*?.*?\s*?<\/h1>\s*<h2>\s*?.*?\s*?<\/h2>/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h1>Hello World</h1>
+```
+
+# --solutions--
+
+```html
+<h1>Hello World</h1>
+<h2>CatPhotoApp</h2>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md
new file mode 100644
index 00000000000..0d1eb0ef72d
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/inform-with-the-paragraph-element.md
@@ -0,0 +1,64 @@
+---
+id: bad87fee1348bd9aedf08801
+title: Inform with the Paragraph Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/ceZ7DtN'
+forumTopicId: 18202
+dashedName: inform-with-the-paragraph-element
+---
+
+# --description--
+
+The `p` element is the preferred element for paragraph text on websites. `p` is short for "paragraph".
+
+You can create a paragraph element like this:
+
+```html
+<p>I'm a p tag!</p>
+```
+
+# --instructions--
+
+Create a `p` element below your `h2` element, and give it the text `Hello Paragraph`.
+
+**Note:** As a convention, all HTML tags are written in lowercase, for example `<p></p>` and not `<P></P>`.
+
+# --hints--
+
+Your code should have a valid `p` element.
+
+```js
+assert($('p').length > 0);
+```
+
+Your `p` element should have the text `Hello Paragraph`.
+
+```js
+assert.isTrue(/hello(\s)+paragraph/gi.test($('p').text()));
+```
+
+Your `p` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/p>/g) &&
+    code.match(/<\/p>/g).length === code.match(/<p/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h1>Hello World</h1>
+<h2>CatPhotoApp</h2>
+```
+
+# --solutions--
+
+```html
+<h1>Hello World</h1>
+<h2>CatPhotoApp</h2>
+<p>Hello Paragraph</p>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.md
new file mode 100644
index 00000000000..d5b0ecf53d6
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/introduction-to-html5-elements.md
@@ -0,0 +1,98 @@
+---
+id: bad87fee1348bd9aecf08801
+title: Introduction to HTML5 Elements
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cBkZGpt7'
+forumTopicId: 301097
+dashedName: introduction-to-html5-elements
+---
+
+# --description--
+
+HTML5 introduces more descriptive HTML tags. These include `main`, `header`, `footer`, `nav`, `video`, `article`, `section` and others.
+
+These tags give a descriptive structure to your HTML, make your HTML easier to read, and help with Search Engine Optimization (SEO) and accessibility. The `main` HTML5 tag helps search engines and other developers find the main content of your page.
+
+Example usage, a `main` element with two child elements nested inside it:
+
+```html
+<main> 
+  <h1>Hello World</h1>
+  <p>Hello Paragraph</p>
+</main>
+```
+
+**Note:** Many of the new HTML5 tags and their benefits are covered in the Applied Accessibility section.
+
+# --instructions--
+
+Create a second `p` element with the following kitty ipsum text: `Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.`
+
+Then, create a `main` element and nest only the two `p` elements inside the `main` element.
+
+# --hints--
+
+You should have 2 `p` elements with Kitty Ipsum text.
+
+```js
+assert($('p').length > 1);
+```
+
+Each of your `p` elements should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/p>/g) &&
+    code.match(/<\/p>/g).length === code.match(/<p/g).length
+);
+```
+
+Your `p` element should contain the first few words of the provided additional `kitty ipsum` text.
+
+```js
+assert.isTrue(/Purr\s+jump\s+eat/gi.test($('p').text()));
+```
+
+Your code should have one `main` element.
+
+```js
+assert($('main').length === 1);
+```
+
+The `main` element should have two paragraph elements as children.
+
+```js
+assert($('main').children('p').length === 2);
+```
+
+The opening `main` tag should come before the first paragraph tag.
+
+```js
+assert(code.match(/<main>\s*?<p>/g));
+```
+
+The closing `main` tag should come after the second closing paragraph tag.
+
+```js
+assert(code.match(/<\/p>\s*?<\/main>/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+
+<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
new file mode 100644
index 00000000000..73a3eaed90b
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/link-to-external-pages-with-anchor-elements.md
@@ -0,0 +1,78 @@
+---
+id: bad87fee1348bd9aedf08816
+title: Link to External Pages with Anchor Elements
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/c8EkncB'
+forumTopicId: 18226
+dashedName: link-to-external-pages-with-anchor-elements
+---
+
+# --description--
+
+You can use `a` (*anchor*) elements to link to content outside of your web page.
+
+`a` elements need a destination web address called an `href` attribute. They also need anchor text. Here's an example:
+
+```html
+<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>
+```
+
+Then your browser will display the text `this links to freecodecamp.org` as a link you can click. And that link will take you to the web address `https://www.freecodecamp.org`.
+
+# --instructions--
+
+Create an `a` element that links to `https://www.freecatphotoapp.com` and has "cat photos" as its anchor text.
+
+# --hints--
+
+Your `a` element should have the anchor text of `cat photos`.
+
+```js
+assert(/cat photos/gi.test($('a').text()));
+```
+
+You need an `a` element that links to `https://www.freecatphotoapp.com`
+
+```js
+assert(/^https?:\/\/(www\.)?freecatphotoapp\.com\/?$/i.test($('a').attr('href')));
+```
+
+Your `a` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/a>/g) &&
+    code.match(/<\/a>/g).length === code.match(/<a/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+
+
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+
+  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+
+  <a href="https://www.freecatphotoapp.com">cat photos</a>
+  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md
new file mode 100644
index 00000000000..6e2b5097e21
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/link-to-internal-sections-of-a-page-with-anchor-elements.md
@@ -0,0 +1,120 @@
+---
+id: bad88fee1348bd9aedf08816
+title: Link to Internal Sections of a Page with Anchor Elements
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cyrDRUL'
+forumTopicId: 301098
+dashedName: link-to-internal-sections-of-a-page-with-anchor-elements
+---
+
+# --description--
+
+`a` (*anchor*) elements can also be used to create internal links to jump to different sections within a webpage.
+
+To create an internal link, you assign a link's `href` attribute to a hash symbol `#` plus the value of the `id` attribute for the element that you want to internally link to, usually further down the page. You then need to add the same `id` attribute to the element you are linking to. An `id` is an attribute that uniquely describes an element.
+
+Below is an example of an internal anchor link and its target element:
+
+```html
+<a href="#contacts-header">Contacts</a>
+...
+<h2 id="contacts-header">Contacts</h2>
+```
+
+When users click the `Contacts` link, they'll be taken to the section of the webpage with the **Contacts** heading element.
+
+# --instructions--
+
+Change your external link to an internal link by changing the `href` attribute to `#footer` and the text from `cat photos` to `Jump to Bottom`.
+
+Remove the `target="_blank"` attribute from the anchor tag since this causes the linked document to open in a new window tab.
+
+Then add an `id` attribute with a value of `footer` to the `<footer>` element at the bottom of the page.
+
+# --hints--
+
+There should be only one anchor tag on your page.
+
+```js
+assert($('a').length == 1);
+```
+
+There should be only one `footer` tag on your page.
+
+```js
+assert($('footer').length == 1);
+```
+
+The `a` tag should have an `href` attribute set to "#footer".
+
+```js
+assert($('a').eq(0).attr('href') == '#footer');
+```
+
+The `a` tag should not have a `target` attribute.
+
+```js
+assert(
+  typeof $('a').eq(0).attr('target') == typeof undefined ||
+    $('a').eq(0).attr('target') == true
+);
+```
+
+The `a` text should be "Jump to Bottom".
+
+```js
+assert(
+  $('a')
+    .eq(0)
+    .text()
+    .match(/Jump to Bottom/gi)
+);
+```
+
+The `footer` tag should have an `id` attribute set to "footer".
+
+```js
+assert($('footer').eq(0).attr('id') == 'footer');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+
+  <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+
+  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
+  <p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
+  <p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
+
+</main>
+
+<footer>Copyright Cat Photo App</footer>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+
+  <a href="#footer">Jump to Bottom</a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+
+  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched. Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff. Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
+  <p>Meowwww loved it, hated it, loved it, hated it yet spill litter box, scratch at owner, destroy all furniture, especially couch or lay on arms while you're using the keyboard. Missing until dinner time toy mouse squeak roll over. With tail in the air lounge in doorway. Man running from cops stops to pet cats, goes to jail.</p>
+  <p>Intently stare at the same spot poop in the plant pot but kitten is playing with dead mouse. Get video posted to internet for chasing red dot leave fur on owners clothes meow to be let out and mesmerizing birds leave fur on owners clothes or favor packaging over toy so purr for no reason. Meow to be let out play time intently sniff hand run outside as soon as door open yet destroy couch.</p>
+
+</main>
+
+<footer id="footer">Copyright Cat Photo App</footer>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.md
new file mode 100644
index 00000000000..0c3812a0a25
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/make-dead-links-using-the-hash-symbol.md
@@ -0,0 +1,58 @@
+---
+id: bad87fee1348bd9aedf08817
+title: Make Dead Links Using the Hash Symbol
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cMdkytL'
+forumTopicId: 18230
+dashedName: make-dead-links-using-the-hash-symbol
+---
+
+# --description--
+
+Sometimes you want to add `a` elements to your website before you know where they will link.
+
+This is also handy when you're changing the behavior of a link using `JavaScript`, which we'll learn about later.
+
+# --instructions--
+
+The current value of the `href` attribute is a link that points to "`https://www.freecatphotoapp.com`". Replace the `href` attribute value with a `#`, also known as a hash symbol, to create a dead link.
+
+For example: `href="#"`
+
+# --hints--
+
+Your `a` element should be a dead link with the value of the `href` attribute set to "#".
+
+```js
+assert($('a').attr('href') === '#');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>.</p>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+
+  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#" target="_blank">cat photos</a>.</p>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+
+  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
new file mode 100644
index 00000000000..de8ba56befb
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/nest-an-anchor-element-within-a-paragraph.md
@@ -0,0 +1,163 @@
+---
+id: bad87fee1348bd9aede08817
+title: Nest an Anchor Element within a Paragraph
+challengeType: 0
+forumTopicId: 18244
+dashedName: nest-an-anchor-element-within-a-paragraph
+---
+
+# --description--
+
+You can nest links within other text elements.
+
+```html
+<p>
+  Here's a <a target="_blank" href="https://www.freecodecamp.org"> link to www.freecodecamp.org</a> for you to follow.
+</p>
+```
+
+Let's break down the example. Normal text is wrapped in the `p` element:
+
+```html
+<p> Here's a ... for you to follow. </p>
+```
+
+Next is the *anchor* element `<a>` (which requires a closing tag `</a>`):
+
+```html
+<a> ... </a>
+```
+
+`target` is an anchor tag attribute that specifies where to open the link. The value `_blank` specifies to open the link in a new tab. The `href` is an anchor tag attribute that contains the URL address of the link:
+
+```html
+<a href="https://www.freecodecamp.org" target="_blank"> ... </a>
+```
+
+The text, `link to www.freecodecamp.org`, within the `a` element is called <dfn>anchor text</dfn>, and will display the link to click:
+
+```html
+<a href=" ... " target="...">link to freecodecamp.org</a>
+```
+
+The final output of the example will look like this:
+
+Here's a <a href="https://www.freecodecamp.org" target="_blank">link to www.freecodecamp.org</a> for you to follow.
+
+# --instructions--
+
+Nest the existing `a` element within a new `p` element. Do not create a new anchor tag. The new paragraph should have text that says `View more cat photos`, where `cat photos` is a link, and the rest is plain text.
+
+# --hints--
+
+You should only have one `a` element.
+
+```js
+assert(
+  $('a').length  === 1 
+);
+```
+
+The `a` element should link to "`https://www.freecatphotoapp.com`".
+
+```js
+assert(
+  $('a[href="https://www.freecatphotoapp.com"]').length  === 1 
+);
+```
+
+Your `a` element should have the anchor text of `cat photos`
+
+```js
+assert(
+  $('a')
+    .text()
+    .match(/cat\sphotos/gi)
+);
+```
+
+You should create a new `p` element. There should be at least 3 total `p` tags in your HTML code.
+
+```js
+assert($('p') && $('p').length > 2);
+```
+
+Your `a` element should be nested within your new `p` element.
+
+```js
+assert(
+  $('a[href="https://www.freecatphotoapp.com"]').parent().is('p')
+);
+```
+
+Your `p` element should have the text `View more` (with a space after it).
+
+```js
+assert(
+  $('a[href="https://www.freecatphotoapp.com"]')
+    .parent()
+    .text()
+    .match(/View\smore\s/gi)
+);
+```
+
+Your `a` element should <em>not</em> have the text `View more`.
+
+```js
+assert(
+  !$('a')
+    .text()
+    .match(/View\smore/gi)
+);
+```
+
+Each of your `p` elements should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/p>/g) &&
+    code.match(/<p/g) &&
+    code.match(/<\/p>/g).length === code.match(/<p/g).length
+);
+```
+
+Each of your `a` elements should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/a>/g) &&
+    code.match(/<a/g) &&
+    code.match(/<\/a>/g).length === code.match(/<a/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+
+  <a href="https://www.freecatphotoapp.com" target="_blank">cat photos</a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+
+  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>View more <a target="_blank" href="https://www.freecatphotoapp.com">cat photos</a></p>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+
+  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.md
new file mode 100644
index 00000000000..fb6f0ea966f
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/nest-many-elements-within-a-single-div-element.md
@@ -0,0 +1,121 @@
+---
+id: bad87fee1348bd9aede08835
+title: Nest Many Elements within a Single div Element
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cNW4kC3'
+forumTopicId: 18246
+dashedName: nest-many-elements-within-a-single-div-element
+---
+
+# --description--
+
+The `div` element, also known as a division element, is a general purpose container for other elements.
+
+The `div` element is probably the most commonly used HTML element of all.
+
+Just like any other non-self-closing element, you can open a `div` element with `<div>` and close it on another line with `</div>`.
+
+# --instructions--
+
+Nest your "Things cats love" and "Top 3 things cats hate" lists all within a single `div` element.
+
+Hint: Try putting your opening `div` tag above your "Things cats love" `p` element and your closing `div` tag after your closing `ol` tag so that both of your lists are within one `div`.
+
+# --hints--
+
+Your `p` elements should be nested inside your `div` element.
+
+```js
+assert($('div').children('p').length > 1);
+```
+
+Your `ul` element should be nested inside your `div` element.
+
+```js
+assert($('div').children('ul').length > 0);
+```
+
+Your `ol` element should be nested inside your `div` element.
+
+```js
+assert($('div').children('ol').length > 0);
+```
+
+Your `div` element should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/div>/g) &&
+    code.match(/<\/div>/g).length === code.match(/<div>/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
+    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
+    <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
+    <label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
+    <label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+  <div>
+    <p>Things cats love:</p>
+    <ul>
+      <li>cat nip</li>
+      <li>laser pointers</li>
+      <li>lasagna</li>
+    </ul>
+    <p>Top 3 things cats hate:</p>
+    <ol>
+      <li>flea treatment</li>
+      <li>thunder</li>
+      <li>other cats</li>
+    </ol>
+  </div>
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
+    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
+    <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
+    <label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
+    <label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md
new file mode 100644
index 00000000000..ce73f22e1b1
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/say-hello-to-html-elements.md
@@ -0,0 +1,60 @@
+---
+id: bd7123c8c441eddfaeb5bdef
+title: Say Hello to HTML Elements
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cE8Gpt2'
+forumTopicId: 18276
+dashedName: say-hello-to-html-elements
+---
+
+# --description--
+
+Welcome to freeCodeCamp's HTML coding challenges. These will walk you through web development step-by-step.
+
+First, you'll start by building a simple web page using HTML. You can edit code in your code editor, which is embedded into this web page.
+
+Do you see the code in your code editor that says `<h1>Hello</h1>`? That's an HTML element.
+
+Most HTML elements have an opening tag and a closing tag.
+
+Opening tags look like this:
+
+```html
+<h1>
+```
+
+Closing tags look like this:
+
+```html
+</h1>
+```
+
+The only difference between opening and closing tags is the forward slash after the opening bracket of a closing tag.
+
+Each challenge has tests you can run at any time by clicking the "Run tests" button. When you pass all tests, you'll be prompted to submit your solution and go to the next coding challenge.
+
+# --instructions--
+
+To pass the test on this challenge, change your `h1` element's text to say `Hello World`.
+
+# --hints--
+
+Your `h1` element should have the text `Hello World`.
+
+```js
+assert.isTrue(/hello(\s)+world/gi.test($('h1').text()));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h1>Hello</h1>
+```
+
+# --solutions--
+
+```html
+<h1>Hello World</h1>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
new file mode 100644
index 00000000000..94fd61e4930
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/turn-an-image-into-a-link.md
@@ -0,0 +1,80 @@
+---
+id: bad87fee1348bd9aedf08820
+title: Turn an Image into a Link
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cRdBnUr'
+forumTopicId: 18327
+dashedName: turn-an-image-into-a-link
+---
+
+# --description--
+
+You can make elements into links by nesting them within an `a` element.
+
+Nest your image within an `a` element. Here's an example:
+
+```html
+<a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="Three kittens running towards the camera."></a>
+```
+
+Remember to use `#` as your `a` element's `href` property in order to turn it into a dead link.
+
+# --instructions--
+
+Place the existing image element within an `a` (*anchor*) element.
+
+Once you've done this, hover over your image with your cursor. Your cursor's normal pointer should become the link clicking pointer. The photo is now a link.
+
+# --hints--
+
+The existing `img` element should be nested within an `a` element.
+
+```js
+assert($('a').children('img').length > 0);
+```
+
+Your `a` element should be a dead link with a `href` attribute set to `#`.
+
+```js
+assert(new RegExp('#').test($('a').children('img').parent().attr('href')));
+```
+
+Each of your `a` elements should have a closing tag.
+
+```js
+assert(
+  code.match(/<\/a>/g) &&
+    code.match(/<a/g) &&
+    code.match(/<\/a>/g).length === code.match(/<a/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+
+  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+  <p>Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.</p>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/uncomment-html.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/uncomment-html.md
new file mode 100644
index 00000000000..bb302c673f9
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/uncomment-html.md
@@ -0,0 +1,70 @@
+---
+id: bad87fee1348bd9aedf08802
+title: Uncomment HTML
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cBmG9T7'
+forumTopicId: 18329
+dashedName: uncomment-html
+---
+
+# --description--
+
+Commenting is a way that you can leave comments for other developers within your code without affecting the resulting output that is displayed to the end user.
+
+Commenting is also a convenient way to make code inactive without having to delete it entirely.
+
+Comments in HTML start with `<!--` and end with a `-->`
+
+# --instructions--
+
+Uncomment your `h1`, `h2` and `p` elements.
+
+# --hints--
+
+Your `h1` element should be visible on the page by uncommenting it.
+
+```js
+assert($('h1').length > 0);
+```
+
+Your `h2` element should be visible on the page by uncommenting it.
+
+```js
+assert($('h2').length > 0);
+```
+
+Your `p` element should be visible on the page by uncommenting it.
+
+```js
+assert($('p').length > 0);
+```
+
+No trailing comment tags should be visible on the page (i.e. `-->`).
+
+```js
+assert(!$('*:contains("-->")')[1]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!--
+<h1>Hello World</h1>
+
+<h2>CatPhotoApp</h2>
+
+<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+-->
+```
+
+# --solutions--
+
+```html
+<h1>Hello World</h1>
+
+<h2>CatPhotoApp</h2>
+
+<p>Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.</p>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field.md
new file mode 100644
index 00000000000..d4d2b233d01
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/use-html5-to-require-a-field.md
@@ -0,0 +1,86 @@
+---
+id: bad87fee1348bd9aedc08830
+title: Use HTML5 to Require a Field
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVMPUv/cMd4EcQ'
+forumTopicId: 18360
+dashedName: use-html5-to-require-a-field
+---
+
+# --description--
+
+You can require specific form fields so that your user will not be able to submit your form until he or she has filled them out.
+
+For example, if you wanted to make a text input field required, you can just add the attribute `required` within your `input` element, like this: `<input type="text" required>`
+
+# --instructions--
+
+Make your text `input` a `required` field, so that your user can't submit the form without completing this field.
+
+Then try to submit the form without inputting any text. See how your HTML5 form notifies you that the field is required?
+
+# --hints--
+
+Your text `input` element should have the `required` attribute.
+
+```js
+assert($('input').prop('required'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+    <input type="text" placeholder="cat photo URL">
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+    <input type="text" required placeholder="cat photo URL">
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md
new file mode 100644
index 00000000000..79dbae43b43
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/basic-html-and-html5/use-the-value-attribute-with-radio-buttons-and-checkboxes.md
@@ -0,0 +1,148 @@
+---
+id: 5c6c06847491271903d37cfd
+title: Use the value attribute with Radio Buttons and Checkboxes
+challengeType: 0
+forumTopicId: 301099
+dashedName: use-the-value-attribute-with-radio-buttons-and-checkboxes
+---
+
+# --description--
+
+When a form gets submitted, the data is sent to the server and includes entries for the options selected. Inputs of type `radio` and `checkbox` report their values from the `value` attribute.
+
+For example:
+
+```html
+<label for="indoor">
+  <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor
+</label>
+<label for="outdoor">
+  <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor
+</label>
+```
+
+Here, you have two `radio` inputs. When the user submits the form with the `indoor` option selected, the form data will include the line: `indoor-outdoor=indoor`. This is from the `name` and `value` attributes of the "indoor" input.
+
+If you omit the `value` attribute, the submitted form data uses the default value, which is `on`. In this scenario, if the user clicked the "indoor" option and submitted the form, the resulting form data would be `indoor-outdoor=on`, which is not useful. So the `value` attribute needs to be set to something to identify the option.
+
+# --instructions--
+
+Give each of the existing `radio` and `checkbox` inputs the `value` attribute. Do not create any new radio or checkbox elements. Use the input label text, in lowercase, as the value for the attribute.
+
+# --hints--
+
+One of your radio buttons should have the `value` attribute of `indoor`.
+
+```js
+assert(
+  $('label:contains("Indoor") > input[type="radio"]').filter("[value='indoor']")
+    .length > 0
+);
+```
+
+One of your radio buttons should have the `value` attribute of `outdoor`.
+
+```js
+assert(
+  $('label:contains("Outdoor") > input[type="radio"]').filter(
+    "[value='outdoor']"
+  ).length > 0
+);
+```
+
+One of your checkboxes should have the `value` attribute of `loving`.
+
+```js
+assert(
+  $('label:contains("Loving") > input[type="checkbox"]').filter(
+    "[value='loving']"
+  ).length > 0
+);
+```
+
+One of your checkboxes should have the `value` attribute of `lazy`.
+
+```js
+assert(
+  $('label:contains("Lazy") > input[type="checkbox"]').filter("[value='lazy']")
+    .length > 0
+);
+```
+
+One of your checkboxes should have the `value` attribute of `energetic`.
+
+```js
+assert(
+  $('label:contains("Energetic") > input[type="checkbox"]').filter(
+    "[value='energetic']"
+  ).length > 0
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
+    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label><br>
+    <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>
+    <label for="lazy"><input id="lazy" type="checkbox" name="personality"> Lazy</label>
+    <label for="energetic"><input id="energetic" type="checkbox" name="personality"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
+
+# --solutions--
+
+```html
+<h2>CatPhotoApp</h2>
+<main>
+  <p>Click here to view more <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://www.freecatphotoapp.com/submit-cat-photo">
+    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label><br>
+    <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving"> Loving</label>
+    <label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
+    <label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label><br>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</main>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md
new file mode 100644
index 00000000000..a57c1732b64
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/add-flex-superpowers-to-the-tweet-embed.md
@@ -0,0 +1,258 @@
+---
+id: 587d78ab367417b2b2512af1
+title: Add Flex Superpowers to the Tweet Embed
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/c9W7MhM'
+forumTopicId: 301100
+dashedName: add-flex-superpowers-to-the-tweet-embed
+---
+
+# --description--
+
+To the right is the tweet embed that will be used as a practical example. Some of the elements would look better with a different layout. The last challenge demonstrated `display: flex`. Here you'll add it to several components in the tweet embed to start adjusting their positioning.
+
+# --instructions--
+
+Add the CSS property `display: flex` to all of the following items - note that the selectors are already set up in the CSS:
+
+`header`, the header's `.profile-name`, the header's `.follow-btn`, the header's `h3` and `h4`, the `footer`, and the footer's `.stats`.
+
+# --hints--
+
+Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
+
+```js
+assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+```
+
+Your `header` should have a `display` property set to `flex`.
+
+```js
+assert($('header').css('display') == 'flex');
+```
+
+Your `footer` should have a `display` property set to `flex`.
+
+```js
+assert($('footer').css('display') == 'flex');
+```
+
+Your `h3` should have a `display` property set to `flex`.
+
+```js
+assert($('h3').css('display') == 'flex');
+```
+
+Your `h4` should have a `display` property set to `flex`.
+
+```js
+assert($('h4').css('display') == 'flex');
+```
+
+Your `.profile-name` should have a `display` property set to `flex`.
+
+```js
+assert($('.profile-name').css('display') == 'flex');
+```
+
+Your `.follow-btn` should have a `display` property set to `flex`.
+
+```js
+assert($('.follow-btn').css('display') == 'flex');
+```
+
+Your `.stats` should have a `display` property set to `flex`.
+
+```js
+assert($('.stats').css('display') == 'flex');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    font-family: Arial, sans-serif;
+  }
+  header {
+
+  }
+  header .profile-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  header .profile-name {
+
+    margin-left: 10px;
+  }
+  header .follow-btn {
+
+    margin: 0 0 0 auto;
+  }
+  header .follow-btn button {
+    border: 0;
+    border-radius: 3px;
+    padding: 5px;
+  }
+  header h3, header h4 {
+
+    margin: 0;
+  }
+  #inner p {
+    margin-bottom: 10px;
+    font-size: 20px;
+  }
+  #inner hr {
+    margin: 20px 0;
+    border-style: solid;
+    opacity: 0.1;
+  }
+  footer {
+
+  }
+  footer .stats {
+
+    font-size: 15px;
+  }
+  footer .stats strong {
+    font-size: 18px;
+  }
+  footer .stats .likes {
+    margin-left: 10px;
+  }
+  footer .cta {
+    margin-left: auto;
+  }
+  footer .cta button {
+    border: 0;
+    background: transparent;
+  }
+</style>
+<header>
+  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <div class="profile-name">
+    <h3>Quincy Larson</h3>
+    <h4>@ossia</h4>
+  </div>
+  <div class="follow-btn">
+    <button>Follow</button>
+  </div>
+</header>
+<div id="inner">
+  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <span class="date">1:32 PM - 12 Jan 2018</span>
+  <hr>
+</div>
+<footer>
+  <div class="stats">
+    <div class="Retweets">
+      <strong>107</strong> Retweets
+    </div>
+    <div class="likes">
+      <strong>431</strong> Likes
+    </div>
+  </div>
+  <div class="cta">
+    <button class="share-btn">Share</button>
+    <button class="retweet-btn">Retweet</button>
+    <button class="like-btn">Like</button>
+  </div>
+</footer>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    font-family: Arial, sans-serif;
+  }
+  header {
+   display: flex;
+  }
+  header .profile-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  header .profile-name {
+    display: flex;
+    margin-left: 10px;
+  }
+  header .follow-btn {
+    display: flex;
+    margin: 0 0 0 auto;
+  }
+  header .follow-btn button {
+    border: 0;
+    border-radius: 3px;
+    padding: 5px;
+  }
+  header h3, header h4 {
+    display: flex;
+    margin: 0;
+  }
+  #inner p {
+    margin-bottom: 10px;
+    font-size: 20px;
+  }
+  #inner hr {
+    margin: 20px 0;
+    border-style: solid;
+    opacity: 0.1;
+  }
+  footer {
+    display: flex;
+  }
+  footer .stats {
+    display: flex;
+    font-size: 15px;
+  }
+  footer .stats strong {
+    font-size: 18px;
+  }
+  footer .stats .likes {
+    margin-left: 10px;
+  }
+  footer .cta {
+    margin-left: auto;
+  }
+  footer .cta button {
+    border: 0;
+    background: transparent;
+  }
+</style>
+<header>
+  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <div class="profile-name">
+    <h3>Quincy Larson</h3>
+    <h4>@ossia</h4>
+  </div>
+  <div class="follow-btn">
+    <button>Follow</button>
+  </div>
+</header>
+<div id="inner">
+  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <span class="date">1:32 PM - 12 Jan 2018</span>
+  <hr>
+</div>
+<footer>
+  <div class="stats">
+    <div class="Retweets">
+      <strong>107</strong> Retweets
+    </div>
+    <div class="likes">
+      <strong>431</strong> Likes
+    </div>
+  </div>
+  <div class="cta">
+    <button class="share-btn">Share</button>
+    <button class="retweet-btn">Retweet</button>
+    <button class="like-btn">Like</button>
+  </div>
+</footer>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md
new file mode 100644
index 00000000000..c285cfb7453
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/align-elements-using-the-align-items-property.md
@@ -0,0 +1,95 @@
+---
+id: 587d78ad367417b2b2512af8
+title: Align Elements Using the align-items Property
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/c8aggtk'
+forumTopicId: 301101
+dashedName: align-elements-using-the-align-items-property
+---
+
+# --description--
+
+The `align-items` property is similar to `justify-content`. Recall that the `justify-content` property aligned flex items along the main axis. For rows, the main axis is a horizontal line and for columns it is a vertical line.
+
+Flex containers also have a **cross axis** which is the opposite of the main axis. For rows, the cross axis is vertical and for columns, the cross axis is horizontal.
+
+CSS offers the `align-items` property to align flex items along the cross axis. For a row, it tells CSS how to push the items in the entire row up or down within the container. And for a column, how to push all the items left or right within the container.
+
+The different values available for `align-items` include:
+
+<ul><li><code>flex-start</code>: aligns items to the start of the flex container. For rows, this aligns items to the top of the container. For columns, this aligns items to the left of the container.</li><li><code>flex-end</code>: aligns items to the end of the flex container. For rows, this aligns items to the bottom of the container. For columns, this aligns items to the right of the container.</li><li><code>center</code>: align items to the center. For rows, this vertically aligns items (equal space above and below the items). For columns, this horizontally aligns them (equal space to the left and right of the items).</li><li><code>stretch</code>: stretch the items to fill the flex container. For example, rows items are stretched to fill the flex container top-to-bottom. This is the default value if no <code>align-items</code> value is specified.</li><li><code>baseline</code>: align items to their baselines. Baseline is a text concept, think of it as the line that the letters sit on.</li></ul>
+
+# --instructions--
+
+An example helps show this property in action. Add the CSS property `align-items` to the `#box-container` element, and give it a value of `center`.
+
+**Bonus**  
+Try the other options for the `align-items` property in the code editor to see their differences. But note that a value of `center` is the only one that will pass this challenge.
+
+# --hints--
+
+The `#box-container` element should have an `align-items` property set to a value of `center`.
+
+```js
+assert($('#box-container').css('align-items') == 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  #box-container {
+    background: gray;
+    display: flex;
+    height: 500px;
+
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 200px;
+    font-size: 24px;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 200px;
+    font-size: 18px;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"><p>Hello</p></div>
+  <div id="box-2"><p>Goodbye</p></div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  #box-container {
+    background: gray;
+    display: flex;
+    height: 500px;
+    align-items: center;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 200px;
+    font-size: 24px;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 200px;
+    font-size: 18px;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"><p>Hello</p></div>
+  <div id="box-2"><p>Goodbye</p></div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md
new file mode 100644
index 00000000000..96fa19d0ece
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/align-elements-using-the-justify-content-property.md
@@ -0,0 +1,95 @@
+---
+id: 587d78ac367417b2b2512af6
+title: Align Elements Using the justify-content Property
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/c43gnHm'
+forumTopicId: 301102
+dashedName: align-elements-using-the-justify-content-property
+---
+
+# --description--
+
+Sometimes the flex items within a flex container do not fill all the space in the container. It is common to want to tell CSS how to align and space out the flex items a certain way. Fortunately, the `justify-content` property has several options to do this. But first, there is some important terminology to understand before reviewing those options.
+
+<a href="https://www.freecodecamp.org/news/flexbox-the-ultimate-css-flex-cheatsheet/" target="_blank" rel="noopener noreferrer nofollow">For more info about flex-box properties read here</a>
+
+Recall that setting a flex container as a row places the flex items side-by-side from left-to-right. A flex container set as a column places the flex items in a vertical stack from top-to-bottom. For each, the direction the flex items are arranged is called the **main axis**. For a row, this is a horizontal line that cuts through each item. And for a column, the main axis is a vertical line through the items.
+
+There are several options for how to space the flex items along the line that is the main axis. One of the most commonly used is `justify-content: center;`, which aligns all the flex items to the center inside the flex container. Other options include:
+
+<ul><li><code>flex-start</code>: aligns items to the start of the flex container. For a row, this pushes the items to the left of the container. For a column, this pushes the items to the top of the container. This is the default alignment if no <code>justify-content</code> is specified.</li><li><code>flex-end</code>: aligns items to the end of the flex container. For a row, this pushes the items to the right of the container. For a column, this pushes the items to the bottom of the container.</li><li><code>space-between</code>: aligns items to the center of the main axis, with extra space placed between the items. The first and last items are pushed to the very edge of the flex container. For example, in a row the first item is against the left side of the container, the last item is against the right side of the container, then the remaining space is distributed evenly among the other items.</li><li><code>space-around</code>: similar to <code>space-between</code> but the first and last items are not locked to the edges of the container, the space is distributed around all the items with a half space on either end of the flex container.</li><li><code>space-evenly</code>: Distributes space evenly between the flex items with a full space at either end of the flex container.</li></ul>
+
+# --instructions--
+
+An example helps show this property in action. Add the CSS property `justify-content` to the `#box-container` element, and give it a value of `center`.
+
+**Bonus**  
+Try the other options for the `justify-content` property in the code editor to see their differences. But note that a value of `center` is the only one that will pass this challenge.
+
+# --hints--
+
+The `#box-container` element should have a `justify-content` property set to a value of `center`.
+
+```js
+assert($('#box-container').css('justify-content') == 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  #box-container {
+    background: gray;
+    display: flex;
+    height: 500px;
+
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 25%;
+    height: 100%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 25%;
+    height: 100%;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  #box-container {
+    background: gray;
+    display: flex;
+    height: 500px;
+    justify-content: center;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 25%;
+    height: 100%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 25%;
+    height: 100%;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md
new file mode 100644
index 00000000000..ae884b649af
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed.md
@@ -0,0 +1,218 @@
+---
+id: 587d78ac367417b2b2512af5
+title: Apply the flex-direction Property to Create a Column in the Tweet Embed
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/cnzdVC9'
+forumTopicId: 301103
+dashedName: apply-the-flex-direction-property-to-create-a-column-in-the-tweet-embed
+---
+
+# --description--
+
+The tweet embed `header` and `footer` used the `flex-direction` property earlier with a row value. Similarly, the items inside the `.profile-name` element would work well stacked as a column.
+
+# --instructions--
+
+Add the CSS property `flex-direction` to the header's `.profile-name` element and set the value to `column`.
+
+# --hints--
+
+Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
+
+```js
+assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+```
+
+The `.profile-name` element should have a `flex-direction` property set to `column`.
+
+```js
+assert($('.profile-name').css('flex-direction') == 'column');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    font-family: Arial, sans-serif;
+  }
+  header, footer {
+    display: flex;
+    flex-direction: row;
+  }
+  header .profile-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  header .profile-name {
+    display: flex;
+
+    margin-left: 10px;
+  }
+  header .follow-btn {
+    display: flex;
+    margin: 0 0 0 auto;
+  }
+  header .follow-btn button {
+    border: 0;
+    border-radius: 3px;
+    padding: 5px;
+  }
+  header h3, header h4 {
+    display: flex;
+    margin: 0;
+  }
+  #inner p {
+    margin-bottom: 10px;
+    font-size: 20px;
+  }
+  #inner hr {
+    margin: 20px 0;
+    border-style: solid;
+    opacity: 0.1;
+  }
+  footer .stats {
+    display: flex;
+    font-size: 15px;
+  }
+  footer .stats strong {
+    font-size: 18px;
+  }
+  footer .stats .likes {
+    margin-left: 10px;
+  }
+  footer .cta {
+    margin-left: auto;
+  }
+  footer .cta button {
+    border: 0;
+    background: transparent;
+  }
+</style>
+<header>
+  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <div class="profile-name">
+    <h3>Quincy Larson</h3>
+    <h4>@ossia</h4>
+  </div>
+  <div class="follow-btn">
+    <button>Follow</button>
+  </div>
+</header>
+<div id="inner">
+  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <span class="date">1:32 PM - 12 Jan 2018</span>
+  <hr>
+</div>
+<footer>
+  <div class="stats">
+    <div class="Retweets">
+      <strong>107</strong> Retweets
+    </div>
+    <div class="likes">
+      <strong>431</strong> Likes
+    </div>
+  </div>
+  <div class="cta">
+    <button class="share-btn">Share</button>
+    <button class="retweet-btn">Retweet</button>
+    <button class="like-btn">Like</button>
+  </div>
+</footer>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    font-family: Arial, sans-serif;
+  }
+  header, footer {
+    display: flex;
+    flex-direction: row;
+  }
+  header .profile-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  header .profile-name {
+    display: flex;
+    flex-direction: column;
+    margin-left: 10px;
+  }
+  header .follow-btn {
+    display: flex;
+    margin: 0 0 0 auto;
+  }
+  header .follow-btn button {
+    border: 0;
+    border-radius: 3px;
+    padding: 5px;
+  }
+  header h3, header h4 {
+    display: flex;
+    margin: 0;
+  }
+  #inner p {
+    margin-bottom: 10px;
+    font-size: 20px;
+  }
+  #inner hr {
+    margin: 20px 0;
+    border-style: solid;
+    opacity: 0.1;
+  }
+  footer .stats {
+    display: flex;
+    font-size: 15px;
+  }
+  footer .stats strong {
+    font-size: 18px;
+  }
+  footer .stats .likes {
+    margin-left: 10px;
+  }
+  footer .cta {
+    margin-left: auto;
+  }
+  footer .cta button {
+    border: 0;
+    background: transparent;
+  }
+</style>
+<header>
+  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <div class="profile-name">
+    <h3>Quincy Larson</h3>
+    <h4>@ossia</h4>
+  </div>
+  <div class="follow-btn">
+    <button>Follow</button>
+  </div>
+</header>
+<div id="inner">
+  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <span class="date">1:32 PM - 12 Jan 2018</span>
+  <hr>
+</div>
+<footer>
+  <div class="stats">
+    <div class="Retweets">
+      <strong>107</strong> Retweets
+    </div>
+    <div class="likes">
+      <strong>431</strong> Likes
+    </div>
+  </div>
+  <div class="cta">
+    <button class="share-btn">Share</button>
+    <button class="retweet-btn">Retweet</button>
+    <button class="like-btn">Like</button>
+  </div>
+</footer>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md
new file mode 100644
index 00000000000..8458c968c3d
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed.md
@@ -0,0 +1,230 @@
+---
+id: 587d78ab367417b2b2512af3
+title: Apply the flex-direction Property to Create Rows in the Tweet Embed
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/cJb8yuq'
+forumTopicId: 301104
+dashedName: apply-the-flex-direction-property-to-create-rows-in-the-tweet-embed
+---
+
+# --description--
+
+The `header` and `footer` in the tweet embed example have child items that could be arranged as rows using the `flex-direction` property. This tells CSS to align the children horizontally.
+
+# --instructions--
+
+Add the CSS property `flex-direction` to both the `header` and `footer` and set the value to `row`.
+
+# --hints--
+
+Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
+
+```js
+assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+```
+
+The `header` should have a `flex-direction` property set to `row`.
+
+```js
+assert(code.match(/header\s*?{[^}]*?flex-direction:\s*?row;/g));
+```
+
+The `footer` should have a `flex-direction` property set to `row`.
+
+```js
+assert(code.match(/footer\s*?{[^}]*?flex-direction:\s*?row;/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    font-family: Arial, sans-serif;
+  }
+  header {
+    display: flex;
+
+  }
+  header .profile-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  header .profile-name {
+    display: flex;
+    margin-left: 10px;
+  }
+  header .follow-btn {
+    display: flex;
+    margin: 0 0 0 auto;
+  }
+  header .follow-btn button {
+    border: 0;
+    border-radius: 3px;
+    padding: 5px;
+  }
+  header h3, header h4 {
+    display: flex;
+    margin: 0;
+  }
+  #inner p {
+    margin-bottom: 10px;
+    font-size: 20px;
+  }
+  #inner hr {
+    margin: 20px 0;
+    border-style: solid;
+    opacity: 0.1;
+  }
+  footer {
+    display: flex;
+
+  }
+  footer .stats {
+    display: flex;
+    font-size: 15px;
+  }
+  footer .stats strong {
+    font-size: 18px;
+  }
+  footer .stats .likes {
+    margin-left: 10px;
+  }
+  footer .cta {
+    margin-left: auto;
+  }
+  footer .cta button {
+    border: 0;
+    background: transparent;
+  }
+</style>
+<header>
+  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <div class="profile-name">
+    <h3>Quincy Larson</h3>
+    <h4>@ossia</h4>
+  </div>
+  <div class="follow-btn">
+    <button>Follow</button>
+  </div>
+</header>
+<div id="inner">
+  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <span class="date">1:32 PM - 12 Jan 2018</span>
+  <hr>
+</div>
+<footer>
+  <div class="stats">
+    <div class="Retweets">
+      <strong>107</strong> Retweets
+    </div>
+    <div class="likes">
+      <strong>431</strong> Likes
+    </div>
+  </div>
+  <div class="cta">
+    <button class="share-btn">Share</button>
+    <button class="retweet-btn">Retweet</button>
+    <button class="like-btn">Like</button>
+  </div>
+</footer>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    font-family: Arial, sans-serif;
+  }
+  header {
+    display: flex;
+    flex-direction: row;
+  }
+  header .profile-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  header .profile-name {
+    display: flex;
+    margin-left: 10px;
+  }
+  header .follow-btn {
+    display: flex;
+    margin: 0 0 0 auto;
+  }
+  header .follow-btn button {
+    border: 0;
+    border-radius: 3px;
+    padding: 5px;
+  }
+  header h3, header h4 {
+    display: flex;
+    margin: 0;
+  }
+  #inner p {
+    margin-bottom: 10px;
+    font-size: 20px;
+  }
+  #inner hr {
+    margin: 20px 0;
+    border-style: solid;
+    opacity: 0.1;
+  }
+  footer {
+    display: flex;
+    flex-direction: row;
+  }
+  footer .stats {
+    display: flex;
+    font-size: 15px;
+  }
+  footer .stats strong {
+    font-size: 18px;
+  }
+  footer .stats .likes {
+    margin-left: 10px;
+  }
+  footer .cta {
+    margin-left: auto;
+  }
+  footer .cta button {
+    border: 0;
+    background: transparent;
+  }
+</style>
+<header>
+  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <div class="profile-name">
+    <h3>Quincy Larson</h3>
+    <h4>@ossia</h4>
+  </div>
+  <div class="follow-btn">
+    <button>Follow</button>
+  </div>
+</header>
+<div id="inner">
+  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <span class="date">1:32 PM - 12 Jan 2018</span>
+  <hr>
+</div>
+<footer>
+  <div class="stats">
+    <div class="Retweets">
+      <strong>107</strong> Retweets
+    </div>
+    <div class="likes">
+      <strong>431</strong> Likes
+    </div>
+  </div>
+  <div class="cta">
+    <button class="share-btn">Share</button>
+    <button class="retweet-btn">Retweet</button>
+    <button class="like-btn">Like</button>
+  </div>
+</footer>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md
new file mode 100644
index 00000000000..501416b7c2f
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-display-flex-to-position-two-boxes.md
@@ -0,0 +1,82 @@
+---
+id: 587d78ab367417b2b2512af0
+title: 'Use display: flex to Position Two Boxes'
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/cgz3QS7'
+forumTopicId: 301105
+dashedName: use-display-flex-to-position-two-boxes
+---
+
+# --description--
+
+This section uses alternating challenge styles to show how to use CSS to position elements in a flexible way. First, a challenge will explain theory, then a practical challenge using a simple tweet component will apply the flexbox concept.
+
+Placing the CSS property `display: flex;` on an element allows you to use other flex properties to build a responsive page.
+
+# --instructions--
+
+Add the CSS property `display` to `#box-container` and set its value to `flex`.
+
+# --hints--
+
+`#box-container` should have the `display` property set to a value of `flex`.
+
+```js
+assert($('#box-container').css('display') == 'flex');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  #box-container {
+    height: 500px;
+
+  }
+
+  #box-1 {
+    background-color: dodgerblue;
+    width: 50%;
+    height: 50%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 50%;
+    height: 50%;
+  }
+</style>
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  #box-container {
+    height: 500px;
+    display: flex;
+  }
+
+  #box-1 {
+    background-color: dodgerblue;
+    width: 50%;
+    height: 50%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 50%;
+    height: 50%;
+  }
+</style>
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md
new file mode 100644
index 00000000000..98b3d28d957
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-align-items-property-in-the-tweet-embed.md
@@ -0,0 +1,222 @@
+---
+id: 587d78ad367417b2b2512af9
+title: Use the align-items Property in the Tweet Embed
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PNfq'
+forumTopicId: 301106
+dashedName: use-the-align-items-property-in-the-tweet-embed
+---
+
+# --description--
+
+The last challenge introduced the `align-items` property and gave an example. This property can be applied to a few tweet embed elements to align the flex items inside them.
+
+# --instructions--
+
+Add the CSS property `align-items` to the header's `.follow-btn` element. Set the value to `center`.
+
+# --hints--
+
+Your `.follow-btn` should be rendered on the page. Be sure to turn off any extensions such as ad blockers.
+
+```js
+assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+```
+
+The `.follow-btn` element should have the `align-items` property set to a value of `center`.
+
+```js
+assert($('.follow-btn').css('align-items') == 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    font-family: Arial, sans-serif;
+  }
+  header, footer {
+    display: flex;
+    flex-direction: row;
+  }
+  header .profile-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  header .profile-name {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 10px;
+  }
+  header .follow-btn {
+    display: flex;
+
+    margin: 0 0 0 auto;
+  }
+  header .follow-btn button {
+    border: 0;
+    border-radius: 3px;
+    padding: 5px;
+  }
+  header h3, header h4 {
+    display: flex;
+    margin: 0;
+  }
+  #inner p {
+    margin-bottom: 10px;
+    font-size: 20px;
+  }
+  #inner hr {
+    margin: 20px 0;
+    border-style: solid;
+    opacity: 0.1;
+  }
+  footer .stats {
+    display: flex;
+    font-size: 15px;
+  }
+  footer .stats strong {
+    font-size: 18px;
+  }
+  footer .stats .likes {
+    margin-left: 10px;
+  }
+  footer .cta {
+    margin-left: auto;
+  }
+  footer .cta button {
+    border: 0;
+    background: transparent;
+  }
+</style>
+<header>
+  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <div class="profile-name">
+    <h3>Quincy Larson</h3>
+    <h4>@ossia</h4>
+  </div>
+  <div class="follow-btn">
+    <button>Follow</button>
+  </div>
+</header>
+<div id="inner">
+  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <span class="date">1:32 PM - 12 Jan 2018</span>
+  <hr>
+</div>
+<footer>
+  <div class="stats">
+    <div class="Retweets">
+      <strong>107</strong> Retweets
+    </div>
+    <div class="likes">
+      <strong>431</strong> Likes
+    </div>
+  </div>
+  <div class="cta">
+    <button class="share-btn">Share</button>
+    <button class="retweet-btn">Retweet</button>
+    <button class="like-btn">Like</button>
+  </div>
+</footer>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    font-family: Arial, sans-serif;
+  }
+  header, footer {
+    display: flex;
+    flex-direction: row;
+  }
+  header .profile-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  header .profile-name {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 10px;
+  }
+  header .follow-btn {
+    display: flex;
+    align-items: center;
+    margin: 0 0 0 auto;
+  }
+  header .follow-btn button {
+    border: 0;
+    border-radius: 3px;
+    padding: 5px;
+  }
+  header h3, header h4 {
+    display: flex;
+    margin: 0;
+  }
+  #inner p {
+    margin-bottom: 10px;
+    font-size: 20px;
+  }
+  #inner hr {
+    margin: 20px 0;
+    border-style: solid;
+    opacity: 0.1;
+  }
+  footer .stats {
+    display: flex;
+    font-size: 15px;
+  }
+  footer .stats strong {
+    font-size: 18px;
+  }
+  footer .stats .likes {
+    margin-left: 10px;
+  }
+  footer .cta {
+    margin-left: auto;
+  }
+  footer .cta button {
+    border: 0;
+    background: transparent;
+  }
+</style>
+<header>
+  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <div class="profile-name">
+    <h3>Quincy Larson</h3>
+    <h4>@ossia</h4>
+  </div>
+  <div class="follow-btn">
+    <button>Follow</button>
+  </div>
+</header>
+<div id="inner">
+  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <span class="date">1:32 PM - 12 Jan 2018</span>
+  <hr>
+</div>
+<footer>
+  <div class="stats">
+    <div class="Retweets">
+      <strong>107</strong> Retweets
+    </div>
+    <div class="likes">
+      <strong>431</strong> Likes
+    </div>
+  </div>
+  <div class="cta">
+    <button class="share-btn">Share</button>
+    <button class="retweet-btn">Retweet</button>
+    <button class="like-btn">Like</button>
+  </div>
+</footer>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-align-self-property.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-align-self-property.md
new file mode 100644
index 00000000000..acfa330961d
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-align-self-property.md
@@ -0,0 +1,92 @@
+---
+id: 587d78af367417b2b2512b00
+title: Use the align-self Property
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvzfv'
+forumTopicId: 301107
+dashedName: use-the-align-self-property
+---
+
+# --description--
+
+The final property for flex items is `align-self`. This property allows you to adjust each item's alignment individually, instead of setting them all at once. This is useful since other common adjustment techniques using the CSS properties `float`, `clear`, and `vertical-align` do not work on flex items.
+
+`align-self` accepts the same values as `align-items` and will override any value set by the `align-items` property.
+
+# --instructions--
+
+Add the CSS property `align-self` to both `#box-1` and `#box-2`. Give `#box-1` a value of `center` and give `#box-2` a value of `flex-end`.
+
+# --hints--
+
+The `#box-1` element should have the `align-self` property set to a value of `center`.
+
+```js
+assert($('#box-1').css('align-self') == 'center');
+```
+
+The `#box-2` element should have the `align-self` property set to a value of `flex-end`.
+
+```js
+assert($('#box-2').css('align-self') == 'flex-end');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+
+    height: 200px;
+    width: 200px;
+  }
+
+  #box-2 {
+    background-color: orangered;
+
+    height: 200px;
+    width: 200px;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    align-self: center;
+    height: 200px;
+    width: 200px;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    align-self: flex-end;
+    height: 200px;
+    width: 200px;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md
new file mode 100644
index 00000000000..905c259fa47
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-basis-property-to-set-the-initial-size-of-an-item.md
@@ -0,0 +1,102 @@
+---
+id: 587d78ae367417b2b2512afd
+title: Use the flex-basis Property to Set the Initial Size of an Item
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/c3d9nCa'
+forumTopicId: 301108
+dashedName: use-the-flex-basis-property-to-set-the-initial-size-of-an-item
+---
+
+# --description--
+
+The `flex-basis` property specifies the initial size of the item before CSS makes adjustments with `flex-shrink` or `flex-grow`.
+
+The units used by the `flex-basis` property are the same as other size properties (`px`, `em`, `%`, etc.). The value `auto` sizes items based on the content.
+
+# --instructions--
+
+Set the initial size of the boxes using `flex-basis`. Add the CSS property `flex-basis` to both `#box-1` and `#box-2`. Give `#box-1` a value of `10em` and `#box-2` a value of `20em`.
+
+# --hints--
+
+The `#box-1` element should have the `flex-basis` property.
+
+```js
+assert($('#box-1').css('flex-basis') != 'auto');
+```
+
+The `#box-1` element should have a `flex-basis` value of `10em`.
+
+```js
+assert(code.match(/#box-1\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?10em;/g));
+```
+
+The `#box-2` element should have the `flex-basis` property.
+
+```js
+assert($('#box-2').css('flex-basis') != 'auto');
+```
+
+The `#box-2` element should have a `flex-basis` value of `20em`.
+
+```js
+assert(code.match(/#box-2\s*?{\s*?.*?\s*?.*?\s*?flex-basis:\s*?20em;/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+
+  #box-1 {
+    background-color: dodgerblue;
+    height: 200px;
+
+  }
+
+  #box-2 {
+    background-color: orangered;
+    height: 200px;
+
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+
+  #box-1 {
+    background-color: dodgerblue;
+    height: 200px;
+    flex-basis: 10em;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    height: 200px;
+    flex-basis: 20em;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md
new file mode 100644
index 00000000000..3c4d4ed9ec7
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-column.md
@@ -0,0 +1,82 @@
+---
+id: 587d78ac367417b2b2512af4
+title: Use the flex-direction Property to Make a Column
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/cZmWeA4'
+forumTopicId: 301109
+dashedName: use-the-flex-direction-property-to-make-a-column
+---
+
+# --description--
+
+The last two challenges used the `flex-direction` property set to `row`. This property can also create a column by vertically stacking the children of a flex container.
+
+# --instructions--
+
+Add the CSS property `flex-direction` to the `#box-container` element, and give it a value of `column`.
+
+# --hints--
+
+The `#box-container` element should have a `flex-direction` property set to `column`.
+
+```js
+assert($('#box-container').css('flex-direction') == 'column');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 50%;
+    height: 50%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 50%;
+    height: 50%;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+    flex-direction: column;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 50%;
+    height: 50%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 50%;
+    height: 50%;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md
new file mode 100644
index 00000000000..0820808a7f6
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-direction-property-to-make-a-row.md
@@ -0,0 +1,86 @@
+---
+id: 587d78ab367417b2b2512af2
+title: Use the flex-direction Property to Make a Row
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/cBEkbfJ'
+forumTopicId: 301110
+dashedName: use-the-flex-direction-property-to-make-a-row
+---
+
+# --description--
+
+Adding `display: flex` to an element turns it into a flex container. This makes it possible to align any children of that element into rows or columns. You do this by adding the `flex-direction` property to the parent item and setting it to row or column. Creating a row will align the children horizontally, and creating a column will align the children vertically.
+
+Other options for `flex-direction` are `row-reverse` and `column-reverse`.
+
+**Note:** The default value for the `flex-direction` property is `row`.
+
+# --instructions--
+
+Add the CSS property `flex-direction` to the `#box-container` element, and give it a value of `row-reverse`.
+
+# --hints--
+
+The `#box-container` element should have a `flex-direction` property set to `row-reverse`.
+
+```js
+assert($('#box-container').css('flex-direction') == 'row-reverse');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 50%;
+    height: 50%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 50%;
+    height: 50%;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+    flex-direction: row-reverse;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 50%;
+    height: 50%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 50%;
+    height: 50%;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md
new file mode 100644
index 00000000000..7a2a0999460
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-grow-property-to-expand-items.md
@@ -0,0 +1,90 @@
+---
+id: 587d78ae367417b2b2512afc
+title: Use the flex-grow Property to Expand Items
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/c2p78cg'
+forumTopicId: 301111
+dashedName: use-the-flex-grow-property-to-expand-items
+---
+
+# --description--
+
+The opposite of `flex-shrink` is the `flex-grow` property. Recall that `flex-shrink` controls the size of the items when the container shrinks. The `flex-grow` property controls the size of items when the parent container expands.
+
+Using a similar example from the last challenge, if one item has a `flex-grow` value of `1` and the other has a `flex-grow` value of `3`, the one with the value of `3` will grow three times as much as the other.
+
+# --instructions--
+
+Add the CSS property `flex-grow` to both `#box-1` and `#box-2`. Give `#box-1` a value of `1` and `#box-2` a value of `2`.
+
+# --hints--
+
+The `#box-1` element should have the `flex-grow` property set to a value of `1`.
+
+```js
+assert($('#box-1').css('flex-grow') == '1');
+```
+
+The `#box-2` element should have the `flex-grow` property set to a value of `2`.
+
+```js
+assert($('#box-2').css('flex-grow') == '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+
+  #box-1 {
+    background-color: dodgerblue;
+    height: 200px;
+
+  }
+
+  #box-2 {
+    background-color: orangered;
+    height: 200px;
+
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+
+  #box-1 {
+    background-color: dodgerblue;
+    height: 200px;
+    flex-grow: 1;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    height: 200px;
+    flex-grow: 2;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md
new file mode 100644
index 00000000000..69cbf5e74cf
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-shorthand-property.md
@@ -0,0 +1,106 @@
+---
+id: 587d78ae367417b2b2512afe
+title: Use the flex Shorthand Property
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/cbpW2tE'
+forumTopicId: 301112
+dashedName: use-the-flex-shorthand-property
+---
+
+# --description--
+
+There is a shortcut available to set several flex properties at once. The `flex-grow`, `flex-shrink`, and `flex-basis` properties can all be set together by using the `flex` property.
+
+For example, `flex: 1 0 10px;` will set the item to `flex-grow: 1;`, `flex-shrink: 0;`, and `flex-basis: 10px;`.
+
+The default property settings are `flex: 0 1 auto;`.
+
+# --instructions--
+
+Add the CSS property `flex` to both `#box-1` and `#box-2`. Give `#box-1` the values so its `flex-grow` is `2`, its `flex-shrink` is `2`, and its `flex-basis` is `150px`. Give `#box-2` the values so its `flex-grow` is `1`, its `flex-shrink` is `1`, and its `flex-basis` is `150px`.
+
+These values will cause `#box-1` to grow to fill the extra space at twice the rate of `#box-2` when the container is greater than 300px and shrink at twice the rate of `#box-2` when the container is less than 300px. 300px is the combined size of the `flex-basis` values of the two boxes.
+
+# --hints--
+
+The `#box-1` element should have the `flex` property set to a value of `2 2 150px`.
+
+```js
+assert(
+  $('#box-1').css('flex-grow') == '2' &&
+    $('#box-1').css('flex-shrink') == '2' &&
+    $('#box-1').css('flex-basis') == '150px'
+);
+```
+
+The `#box-2` element should have the `flex` property set to a value of `1 1 150px`.
+
+```js
+assert(
+  $('#box-2').css('flex-grow') == '1' &&
+    $('#box-2').css('flex-shrink') == '1' &&
+    $('#box-2').css('flex-basis') == '150px'
+);
+```
+
+Your code should use the `flex` property for `#box-1` and `#box-2`.
+
+```js
+assert(code.match(/flex:\s*?\d\s+?\d\s+?150px;/g).length == 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+
+    height: 200px;
+  }
+
+  #box-2 {
+    background-color: orangered;
+
+    height: 200px;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    flex: 2 2 150px;
+    height: 200px;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    flex: 1 1 150px;
+    height: 200px;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md
new file mode 100644
index 00000000000..fc9b59ab23f
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-shrink-property-to-shrink-items.md
@@ -0,0 +1,94 @@
+---
+id: 587d78ad367417b2b2512afb
+title: Use the flex-shrink Property to Shrink Items
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/cd3PBfr'
+forumTopicId: 301113
+dashedName: use-the-flex-shrink-property-to-shrink-items
+---
+
+# --description--
+
+So far, all the properties in the challenges apply to the flex container (the parent of the flex items). However, there are several useful properties for the flex items.
+
+The first is the `flex-shrink` property. When it's used, it allows an item to shrink if the flex container is too small. Items shrink when the width of the parent container is smaller than the combined widths of all the flex items within it.
+
+The `flex-shrink` property takes numbers as values. The higher the number, the more it will shrink compared to the other items in the container. For example, if one item has a `flex-shrink` value of `1` and the other has a `flex-shrink` value of `3`, the one with the value of `3` will shrink three times as much as the other.
+
+# --instructions--
+
+Add the CSS property `flex-shrink` to both `#box-1` and `#box-2`. Give `#box-1` a value of `1` and `#box-2` a value of `2`.
+
+# --hints--
+
+The `#box-1` element should have the `flex-shrink` property set to a value of `1`.
+
+```js
+assert($('#box-1').css('flex-shrink') == '1');
+```
+
+The `#box-2` element should have the `flex-shrink` property set to a value of `2`.
+
+```js
+assert($('#box-2').css('flex-shrink') == '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 100%;
+    height: 200px;
+
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 100%;
+    height: 200px;
+
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 100%;
+    height: 200px;
+    flex-shrink: 1;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 100%;
+    height: 200px;
+    flex-shrink: 2;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md
new file mode 100644
index 00000000000..cc027815f1a
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-flex-wrap-property-to-wrap-a-row-or-column.md
@@ -0,0 +1,138 @@
+---
+id: 587d78ad367417b2b2512afa
+title: Use the flex-wrap Property to Wrap a Row or Column
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/cQv9ZtG'
+forumTopicId: 301114
+dashedName: use-the-flex-wrap-property-to-wrap-a-row-or-column
+---
+
+# --description--
+
+CSS flexbox has a feature to split a flex container into multiple rows (or columns). By default, a flex container will fit all flex items together. For example, a row will all be on one line.
+
+However, using the `flex-wrap` property tells CSS to wrap items. This means extra items move into a new row or column. The break point of where the wrapping happens depends on the size of the items and the size of the container.
+
+CSS also has options for the direction of the wrap:
+
+<ul><li><code>nowrap</code>: this is the default setting, and does not wrap items.</li><li><code>wrap</code>: wraps items onto multiple lines from top-to-bottom if they are in rows and left-to-right if they are in columns.</li><li><code>wrap-reverse</code>: wraps items onto multiple lines from bottom-to-top if they are in rows and right-to-left if they are in columns.</li></ul>
+
+# --instructions--
+
+The current layout has too many boxes for one row. Add the CSS property `flex-wrap` to the `#box-container` element, and give it a value of `wrap`.
+
+# --hints--
+
+The `#box-container` element should have the `flex-wrap` property set to a value of `wrap`.
+
+```js
+assert($('#box-container').css('flex-wrap') == 'wrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  #box-container {
+    background: gray;
+    display: flex;
+    height: 100%;
+
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 25%;
+    height: 50%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 25%;
+    height: 50%;
+  }
+  #box-3 {
+    background-color: violet;
+    width: 25%;
+    height: 50%;
+  }
+  #box-4 {
+    background-color: yellow;
+    width: 25%;
+    height: 50%;
+  }
+  #box-5 {
+    background-color: green;
+    width: 25%;
+    height: 50%;
+  }
+  #box-6 {
+    background-color: black;
+    width: 25%;
+    height: 50%;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+  <div id="box-3"></div>
+  <div id="box-4"></div>
+  <div id="box-5"></div>
+  <div id="box-6"></div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  #box-container {
+    background: gray;
+    display: flex;
+    height: 100%;
+    flex-wrap: wrap;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    width: 25%;
+    height: 50%;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    width: 25%;
+    height: 50%;
+  }
+  #box-3 {
+    background-color: violet;
+    width: 25%;
+    height: 50%;
+  }
+  #box-4 {
+    background-color: yellow;
+    width: 25%;
+    height: 50%;
+  }
+  #box-5 {
+    background-color: green;
+    width: 25%;
+    height: 50%;
+  }
+  #box-6 {
+    background-color: black;
+    width: 25%;
+    height: 50%;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+  <div id="box-3"></div>
+  <div id="box-4"></div>
+  <div id="box-5"></div>
+  <div id="box-6"></div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md
new file mode 100644
index 00000000000..b20ab078776
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-justify-content-property-in-the-tweet-embed.md
@@ -0,0 +1,224 @@
+---
+id: 587d78ac367417b2b2512af7
+title: استخدم خاصية justify-content في تضمين التغريدة
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/c43GgTa'
+forumTopicId: 301115
+dashedName: use-the-justify-content-property-in-the-tweet-embed
+---
+
+# --description--
+
+عرض التحدي الأخير مثال على خاصية `justify-content`. بالنسبة للتغريدة المضمنة، يمكن تطبيق هذه الخاصية لمحاذاة العناصر في عنصر `.profile-name`.
+
+# --instructions--
+
+أضف خاصية الـ CSS و هي `justify-content` الي عنصر `.profile-name` بالـ header وغير القيمة لأي من الخيارات من التحدي الأخير.
+
+# --hints--
+
+كود `.follow-btn` الخاص بك يجب أن يتم عرضه على الصفحة. تأكد من إيقاف تشغيل أي اضافات مثل مانعي الإعلانات ad blockers.
+
+```js
+assert($('.follow-btn').length > 0 && $('.follow-btn').css('display') !== 'none');
+```
+
+The `.profile-name` element should have the `justify-content` property set to any of these values: `center`, `flex-start`, `flex-end`, `space-between`, `space-around`, or `space-evenly`.
+
+```js
+assert(
+  code.match(
+    /header\s.profile-name\s*{\s*?.*?\s*?.*?\s*?\s*?.*?\s*?justify-content\s*:\s*(center|flex-start|flex-end|space-between|space-around|space-evenly)\s*;/g
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  body {
+    font-family: Arial, sans-serif;
+  }
+  header, footer {
+    display: flex;
+    flex-direction: row;
+  }
+  header .profile-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  header .profile-name {
+    display: flex;
+    flex-direction: column;
+
+    margin-left: 10px;
+  }
+  header .follow-btn {
+    display: flex;
+    margin: 0 0 0 auto;
+  }
+  header .follow-btn button {
+    border: 0;
+    border-radius: 3px;
+    padding: 5px;
+  }
+  header h3, header h4 {
+    display: flex;
+    margin: 0;
+  }
+  #inner p {
+    margin-bottom: 10px;
+    font-size: 20px;
+  }
+  #inner hr {
+    margin: 20px 0;
+    border-style: solid;
+    opacity: 0.1;
+  }
+  footer .stats {
+    display: flex;
+    font-size: 15px;
+  }
+  footer .stats strong {
+    font-size: 18px;
+  }
+  footer .stats .likes {
+    margin-left: 10px;
+  }
+  footer .cta {
+    margin-left: auto;
+  }
+  footer .cta button {
+    border: 0;
+    background: transparent;
+  }
+</style>
+<header>
+  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <div class="profile-name">
+    <h3>Quincy Larson</h3>
+    <h4>@ossia</h4>
+  </div>
+  <div class="follow-btn">
+    <button>Follow</button>
+  </div>
+</header>
+<div id="inner">
+  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <span class="date">1:32 PM - 12 Jan 2018</span>
+  <hr>
+</div>
+<footer>
+  <div class="stats">
+    <div class="Retweets">
+      <strong>107</strong> Retweets
+    </div>
+    <div class="likes">
+      <strong>431</strong> Likes
+    </div>
+  </div>
+  <div class="cta">
+    <button class="share-btn">Share</button>
+    <button class="retweet-btn">Retweet</button>
+    <button class="like-btn">Like</button>
+  </div>
+</footer>
+```
+
+# --solutions--
+
+```html
+<style>
+  body {
+    font-family: Arial, sans-serif;
+  }
+  header, footer {
+    display: flex;
+    flex-direction: row;
+  }
+  header .profile-thumbnail {
+    width: 50px;
+    height: 50px;
+    border-radius: 4px;
+  }
+  header .profile-name {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    margin-left: 10px;
+  }
+  header .follow-btn {
+    display: flex;
+    margin: 0 0 0 auto;
+  }
+  header .follow-btn button {
+    border: 0;
+    border-radius: 3px;
+    padding: 5px;
+  }
+  header h3, header h4 {
+    display: flex;
+    margin: 0;
+  }
+  #inner p {
+    margin-bottom: 10px;
+    font-size: 20px;
+  }
+  #inner hr {
+    margin: 20px 0;
+    border-style: solid;
+    opacity: 0.1;
+  }
+  footer .stats {
+    display: flex;
+    font-size: 15px;
+  }
+  footer .stats strong {
+    font-size: 18px;
+  }
+  footer .stats .likes {
+    margin-left: 10px;
+  }
+  footer .cta {
+    margin-left: auto;
+  }
+  footer .cta button {
+    border: 0;
+    background: transparent;
+  }
+</style>
+<header>
+  <img src="https://freecodecamp.s3.amazonaws.com/quincy-twitter-photo.jpg" alt="Quincy Larson's profile picture" class="profile-thumbnail">
+  <div class="profile-name">
+    <h3>Quincy Larson</h3>
+    <h4>@ossia</h4>
+  </div>
+  <div class="follow-btn">
+    <button>Follow</button>
+  </div>
+</header>
+<div id="inner">
+  <p>I meet so many people who are in search of that one trick that will help them work smart. Even if you work smart, you still have to work hard.</p>
+  <span class="date">1:32 PM - 12 Jan 2018</span>
+  <hr>
+</div>
+<footer>
+  <div class="stats">
+    <div class="Retweets">
+      <strong>107</strong> Retweets
+    </div>
+    <div class="likes">
+      <strong>431</strong> Likes
+    </div>
+  </div>
+  <div class="cta">
+    <button class="share-btn">Share</button>
+    <button class="retweet-btn">Retweet</button>
+    <button class="like-btn">Like</button>
+  </div>
+</footer>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md
new file mode 100644
index 00000000000..600e75391c2
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-flexbox/use-the-order-property-to-rearrange-items.md
@@ -0,0 +1,90 @@
+---
+id: 587d78ae367417b2b2512aff
+title: Use the order Property to Rearrange Items
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pVaDAv/cMbvNAG'
+forumTopicId: 301116
+dashedName: use-the-order-property-to-rearrange-items
+---
+
+# --description--
+
+The `order` property is used to tell CSS the order of how flex items appear in the flex container. By default, items will appear in the same order they come in the source HTML. The property takes numbers as values, and negative numbers can be used.
+
+# --instructions--
+
+Add the CSS property `order` to both `#box-1` and `#box-2`. Give `#box-1` a value of `2` and give `#box-2` a value of `1`.
+
+# --hints--
+
+The `#box-1` element should have the `order` property set to a value of `2`.
+
+```js
+assert($('#box-1').css('order') == '2');
+```
+
+The `#box-2` element should have the `order` property set to a value of `1`.
+
+```js
+assert($('#box-2').css('order') == '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+
+    height: 200px;
+    width: 200px;
+  }
+
+  #box-2 {
+    background-color: orangered;
+
+    height: 200px;
+    width: 200px;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  #box-container {
+    display: flex;
+    height: 500px;
+  }
+  #box-1 {
+    background-color: dodgerblue;
+    order: 2;
+    height: 200px;
+    width: 200px;
+  }
+
+  #box-2 {
+    background-color: orangered;
+    order: 1;
+    height: 200px;
+    width: 200px;
+  }
+</style>
+
+<div id="box-container">
+  <div id="box-1"></div>
+  <div id="box-2"></div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md
new file mode 100644
index 00000000000..d6f11a54417
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/add-columns-with-grid-template-columns.md
@@ -0,0 +1,72 @@
+---
+id: 5a9036d038fddaf9a66b5d32
+title: Add Columns with grid-template-columns
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/c7NzDHv'
+forumTopicId: 301117
+dashedName: add-columns-with-grid-template-columns
+---
+
+# --description--
+
+Simply creating a grid element doesn't get you very far. You need to define the structure of the grid as well. To add some columns to the grid, use the `grid-template-columns` property on a grid container as demonstrated below:
+
+```css
+.container {
+  display: grid;
+  grid-template-columns: 50px 50px;
+}
+```
+
+This will give your grid two columns that are each 50px wide. The number of parameters given to the `grid-template-columns` property indicates the number of columns in the grid, and the value of each parameter indicates the width of each column.
+
+# --instructions--
+
+Give the grid container three columns that are each `100px` wide.
+
+# --hints--
+
+`container` class should have a `grid-template-columns` property with three units of `100px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.container')?.gridTemplateColumns === '100px 100px 100px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .d1{background:LightSkyBlue;}
+  .d2{background:LightSalmon;}
+  .d3{background:PaleTurquoise;}
+  .d4{background:LightPink;}
+  .d5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    /* Only change code below this line */
+
+
+    /* Only change code above this line */
+  }
+</style>
+
+<div class="container">
+  <div class="d1">1</div>
+  <div class="d2">2</div>
+  <div class="d3">3</div>
+  <div class="d4">4</div>
+  <div class="d5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.container {grid-template-columns: 100px 100px 100px;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md
new file mode 100644
index 00000000000..aac1bbe8499
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/add-gaps-faster-with-grid-gap.md
@@ -0,0 +1,69 @@
+---
+id: 5a9036ee38fddaf9a66b5d37
+title: Add Gaps Faster with grid-gap
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/ca2qVtv'
+forumTopicId: 301118
+dashedName: add-gaps-faster-with-grid-gap
+---
+
+# --description--
+
+`grid-gap` is a shorthand property for `grid-row-gap` and `grid-column-gap` from the previous two challenges that's more convenient to use. If `grid-gap` has one value, it will create a gap between all rows and columns. However, if there are two values, it will use the first one to set the gap between the rows and the second value for the columns.
+
+# --instructions--
+
+Use `grid-gap` to introduce a `10px` gap between the rows and `20px` gap between the columns.
+
+# --hints--
+
+`container` class should have a `grid-gap` property that introduces a `10px` gap between the rows and a `20px` gap between the columns.
+
+```js
+assert(
+  code.match(
+    /.container\s*?{[\s\S]*grid-gap\s*?:\s*?10px\s+?20px\s*?;[\s\S]*}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .d1{background:LightSkyBlue;}
+  .d2{background:LightSalmon;}
+  .d3{background:PaleTurquoise;}
+  .d4{background:LightPink;}
+  .d5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    /* Only change code below this line */
+
+
+    /* Only change code above this line */
+  }
+</style>
+<div class="container">
+  <div class="d1">1</div>
+  <div class="d2">2</div>
+  <div class="d3">3</div>
+  <div class="d4">4</div>
+  <div class="d5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.container {grid-gap: 10px 20px;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md
new file mode 100644
index 00000000000..7663454d06e
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/add-rows-with-grid-template-rows.md
@@ -0,0 +1,68 @@
+---
+id: 5a9036e138fddaf9a66b5d33
+title: Add Rows with grid-template-rows
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/cbp9Pua'
+forumTopicId: 301119
+dashedName: add-rows-with-grid-template-rows
+---
+
+# --description--
+
+The grid you created in the last challenge will set the number of rows automatically. To adjust the rows manually, use the `grid-template-rows` property in the same way you used `grid-template-columns` in the previous challenge.
+
+# --instructions--
+
+Add two rows to the grid that are `50px` tall each.
+
+# --hints--
+
+`container` class should have a `grid-template-rows` property with two units of `50px`.
+
+```js
+assert(
+  code.match(
+    /.container\s*?{[\s\S]*grid-template-rows\s*?:\s*?50px\s*?50px\s*?;[\s\S]*}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .d1{background:LightSkyBlue;}
+  .d2{background:LightSalmon;}
+  .d3{background:PaleTurquoise;}
+  .d4{background:LightPink;}
+  .d5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 100px 100px 100px;
+    /* Only change code below this line */
+
+
+    /* Only change code above this line */
+  }
+</style>
+
+<div class="container">
+  <div class="d1">1</div>
+  <div class="d2">2</div>
+  <div class="d3">3</div>
+  <div class="d4">4</div>
+  <div class="d5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.container {grid-template-rows: 50px 50px;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md
new file mode 100644
index 00000000000..c3f786f5254
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-all-items-horizontally-using-justify-items.md
@@ -0,0 +1,71 @@
+---
+id: 5a90376038fddaf9a66b5d3c
+title: Align All Items Horizontally using justify-items
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/cJbpECn'
+forumTopicId: 301120
+dashedName: align-all-items-horizontally-using-justify-items
+---
+
+# --description--
+
+Sometimes you want all the items in your CSS Grid to share the same alignment. You can use the previously learned properties and align them individually, or you can align them all at once horizontally by using `justify-items` on your grid container. This property can accept all the same values you learned about in the previous two challenges, the difference being that it will move **all** the items in our grid to the desired alignment.
+
+# --instructions--
+
+Use this property to center all our items horizontally.
+
+# --hints--
+
+`container` class should have a `justify-items` property that has the value of `center`.
+
+```js
+assert(
+  code.match(
+    /.container\s*?{[\s\S]*justify-items\s*?:\s*?center\s*?;[\s\S]*}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+  .item5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+    /* Only change code below this line */
+
+
+    /* Only change code above this line */
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.container {justify-items: center;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md
new file mode 100644
index 00000000000..ef7d1e0e55d
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-all-items-vertically-using-align-items.md
@@ -0,0 +1,69 @@
+---
+id: 5a94fdf869fb03452672e45b
+title: Align All Items Vertically using align-items
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/ckzPeUv'
+forumTopicId: 301121
+dashedName: align-all-items-vertically-using-align-items
+---
+
+# --description--
+
+Using the `align-items` property on a grid container will set the vertical alignment for all the items in our grid.
+
+# --instructions--
+
+Use it now to move all the items to the end of each cell.
+
+# --hints--
+
+`container` class should have a `align-items` property that has the value of `end`.
+
+```js
+assert(
+  code.match(/.container\s*?{[\s\S]*align-items\s*?:\s*?end\s*?;[\s\S]*}/gi)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+  .item5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+    /* Only change code below this line */
+
+
+    /* Only change code above this line */
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.container {align-items: end;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md
new file mode 100644
index 00000000000..1d6ad1a7c32
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-an-item-horizontally-using-justify-self.md
@@ -0,0 +1,79 @@
+---
+id: 5a90374338fddaf9a66b5d3a
+title: Align an Item Horizontally using justify-self
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/cJbpKHq'
+forumTopicId: 301122
+dashedName: align-an-item-horizontally-using-justify-self
+---
+
+# --description--
+
+In CSS Grid, the content of each item is located in a box which is referred to as a <dfn>cell</dfn>. You can align the content's position within its cell horizontally using the `justify-self` property on a grid item. By default, this property has a value of `stretch`, which will make the content fill the whole width of the cell. This CSS Grid property accepts other values as well:
+
+`start`: aligns the content at the left of the cell,
+
+`center`: aligns the content in the center of the cell,
+
+`end`: aligns the content at the right of the cell.
+
+# --instructions--
+
+Use the `justify-self` property to center the item with the class `item2`.
+
+# --hints--
+
+`item2` class should have a `justify-self` property that has the value of `center`.
+
+```js
+assert(
+  code.match(/.item2\s*?{[\s\S]*justify-self\s*?:\s*?center\s*?;[\s\S]*}/gi)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .item1{background: LightSkyBlue;}
+
+  .item2 {
+    background: LightSalmon;
+    /* Only change code below this line */
+
+
+    /* Only change code above this line */
+  }
+
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+  .item5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.item2 {justify-self: center;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md
new file mode 100644
index 00000000000..ecb23b9412f
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/align-an-item-vertically-using-align-self.md
@@ -0,0 +1,71 @@
+---
+id: 5a90375238fddaf9a66b5d3b
+title: Align an Item Vertically using align-self
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/cmzd4fz'
+forumTopicId: 301123
+dashedName: align-an-item-vertically-using-align-self
+---
+
+# --description--
+
+Just as you can align an item horizontally, there's a way to align an item vertically as well. To do this, you use the `align-self` property on an item. This property accepts all of the same values as `justify-self` from the last challenge.
+
+# --instructions--
+
+Align the item with the class `item3` vertically at the `end`.
+
+# --hints--
+
+`item3` class should have a `align-self` property that has the value of `end`.
+
+```js
+assert(code.match(/.item3\s*?{[\s\S]*align-self\s*?:\s*?end\s*?;[\s\S]*}/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+
+  .item3 {
+    background: PaleTurquoise;
+    /* Only change code below this line */
+
+
+    /* Only change code above this line */
+  }
+
+  .item4{background:LightPink;}
+  .item5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.item3 {align-self: end;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md
new file mode 100644
index 00000000000..e8edd98a4d2
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-a-column-gap-using-grid-column-gap.md
@@ -0,0 +1,76 @@
+---
+id: 5a9036ee38fddaf9a66b5d35
+title: Create a Column Gap Using grid-column-gap
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/cVZ8vfD'
+forumTopicId: 301124
+dashedName: create-a-column-gap-using-grid-column-gap
+---
+
+# --description--
+
+So far in the grids you have created, the columns have all been tight up against each other. Sometimes you want a gap in between the columns. To add a gap between the columns, use the `grid-column-gap` property like this:
+
+```css
+grid-column-gap: 10px;
+```
+
+This creates 10px of empty space between all of our columns.
+
+# --instructions--
+
+Give the columns in the grid a `20px` gap.
+
+# --hints--
+
+`container` class should have a `grid-column-gap` property that has the value of `20px`.
+
+```js
+assert(
+  code.match(
+    /.container\s*?{[\s\S]*grid-column-gap\s*?:\s*?20px\s*?;[\s\S]*}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .d1{background:LightSkyBlue;}
+  .d2{background:LightSalmon;}
+  .d3{background:PaleTurquoise;}
+  .d4{background:LightPink;}
+  .d5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    /* Only change code below this line */
+
+
+    /* Only change code above this line */
+  }
+</style>
+
+<div class="container">
+  <div class="d1">1</div>
+  <div class="d2">2</div>
+  <div class="d3">3</div>
+  <div class="d4">4</div>
+  <div class="d5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.container {grid-column-gap: 20px;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md
new file mode 100644
index 00000000000..df5f8879dcf
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-a-row-gap-using-grid-row-gap.md
@@ -0,0 +1,68 @@
+---
+id: 5a9036ee38fddaf9a66b5d36
+title: Create a Row Gap using grid-row-gap
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/cPbJ2Cv'
+forumTopicId: 301125
+dashedName: create-a-row-gap-using-grid-row-gap
+---
+
+# --description--
+
+You can add a gap in between the rows of a grid using `grid-row-gap` in the same way that you added a gap in between columns in the previous challenge.
+
+# --instructions--
+
+Create a gap for the rows that is `5px` tall.
+
+# --hints--
+
+`container` class should have a `grid-row-gap` property that has the value of `5px`.
+
+```js
+assert(
+  code.match(/.container\s*?{[\s\S]*grid-row-gap\s*?:\s*?5px\s*?;[\s\S]*}/gi)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .d1{background:LightSkyBlue;}
+  .d2{background:LightSalmon;}
+  .d3{background:PaleTurquoise;}
+  .d4{background:LightPink;}
+  .d5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    /* Only change code below this line */
+
+
+    /* Only change code above this line */
+  }
+</style>
+
+<div class="container">
+  <div class="d1">1</div>
+  <div class="d2">2</div>
+  <div class="d3">3</div>
+  <div class="d4">4</div>
+  <div class="d5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.container {grid-row-gap: 5px;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md
new file mode 100644
index 00000000000..10e44e9f6bc
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fill.md
@@ -0,0 +1,140 @@
+---
+id: 5a94fe5469fb03452672e461
+title: Create Flexible Layouts Using auto-fill
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/cmzdycW'
+forumTopicId: 301126
+dashedName: create-flexible-layouts-using-auto-fill
+---
+
+# --description--
+
+The repeat function comes with an option called <dfn>auto-fill</dfn>. This allows you to automatically insert as many rows or columns of your desired size as possible depending on the size of the container. You can create flexible layouts when combining `auto-fill` with `minmax`, like this:
+
+```css
+repeat(auto-fill, minmax(60px, 1fr));
+```
+
+When the container changes size, this setup keeps inserting 60px columns and stretching them until it can insert another one. **Note:** If your container can't fit all your items on one row, it will move them down to a new one.
+
+# --instructions--
+
+In the first grid, use `auto-fill` with `repeat` to fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`. Then resize the preview to see auto-fill in action.
+
+# --hints--
+
+`container` class should have a `grid-template-columns` property with `repeat` and `auto-fill` that will fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`.
+
+```js
+assert(
+  code.match(
+    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fill\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+  .item5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    min-height: 100px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    /* Only change code below this line */
+
+    grid-template-columns: repeat(3, minmax(60px, 1fr));
+
+    /* Only change code above this line */
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+
+  .container2 {
+    font-size: 40px;
+    min-height: 100px;
+    width: 100%;
+    background: Silver;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(60px, 1fr));
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+<div class="container2">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+  .item5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    min-height: 100px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    /* Only change code below this line */
+
+    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+
+    /* Only change code above this line */
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+
+  .container2 {
+    font-size: 40px;
+    min-height: 100px;
+    width: 100%;
+    background: Silver;
+    display: grid;
+    grid-template-columns: repeat(3, minmax(60px, 1fr));
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+<div class="container2">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md
new file mode 100644
index 00000000000..89449f45de3
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-flexible-layouts-using-auto-fit.md
@@ -0,0 +1,91 @@
+---
+id: 5a94fe6269fb03452672e462
+title: Create Flexible Layouts Using auto-fit
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/c3dPph8'
+forumTopicId: 301127
+dashedName: create-flexible-layouts-using-auto-fit
+---
+
+# --description--
+
+`auto-fit` works almost identically to `auto-fill`. The only difference is that when the container's size exceeds the size of all the items combined, `auto-fill` keeps inserting empty rows or columns and pushes your items to the side, while `auto-fit` collapses those empty rows or columns and stretches your items to fit the size of the container.
+
+**Note:** If your container can't fit all your items on one row, it will move them down to a new one.
+
+# --instructions--
+
+In the second grid, use `auto-fit` with `repeat` to fill the grid with columns that have a minimum width of `60px` and maximum of `1fr`. Then resize the preview to see the difference.
+
+# --hints--
+
+`container2` class should have a `grid-template-columns` property with `repeat` and `auto-fit` that will fill the grid with columns that have a minimum width of `60px` and a maximum of `1fr`.
+
+```js
+assert(
+  code.match(
+    /.container2\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?auto-fit\s*?,\s*?minmax\s*?\(\s*?60px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+  .item5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    min-height: 100px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+
+  .container2 {
+    font-size: 40px;
+    min-height: 100px;
+    width: 100%;
+    background: Silver;
+    display: grid;
+    /* Only change code below this line */
+
+    grid-template-columns: repeat(3, minmax(60px, 1fr));
+
+    /* Only change code above this line */
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+<div class="container2">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.container {grid-template-columns: repeat( auto-fill, minmax(60px, 1fr));} .container2 {grid-template-columns: repeat(auto-fit, minmax(60px, 1fr));}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-grids-within-grids.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-grids-within-grids.md
new file mode 100644
index 00000000000..a980e76eaed
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-grids-within-grids.md
@@ -0,0 +1,106 @@
+---
+id: 5a94fe8569fb03452672e464
+title: Create Grids within Grids
+challengeType: 0
+forumTopicId: 301128
+dashedName: create-grids-within-grids
+---
+
+# --description--
+
+Turning an element into a grid only affects the behavior of its direct descendants. So by turning a direct descendant into a grid, you have a grid within a grid.
+
+For example, by setting the `display` and `grid-template-columns` properties of the element with the `item3` class, you create a grid within your grid.
+
+# --instructions--
+
+Turn the element with the `item3` class into a grid with two columns with a width of `auto` and `1fr` using `display` and `grid-template-columns`.
+
+# --hints--
+
+`item3` class should have a `grid-template-columns` property with `auto` and `1fr` as values.
+
+```js
+assert(
+  code.match(
+    /.item3\s*?{[\s\S]*grid-template-columns\s*?:\s*?auto\s*?1fr\s*?;[\s\S]*}/gi
+  )
+);
+```
+
+`item3` class should have a `display` property with the value of `grid`.
+
+```js
+assert(code.match(/.item3\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .container {
+    font-size: 1.5em;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr auto;
+    grid-gap: 10px;
+    grid-template-areas:
+      "advert header"
+      "advert content"
+      "advert footer";
+  }
+  .item1 {
+    background: LightSkyBlue;
+    grid-area: header;
+  }
+
+  .item2 {
+    background: LightSalmon;
+    grid-area: advert;
+  }
+
+  .item3 {
+    background: PaleTurquoise;
+    grid-area: content;
+    /* Only change code below this line */
+
+
+    /* Only change code above this line */
+  }
+
+  .item4 {
+    background: lightpink;
+    grid-area: footer;
+  }
+
+  .itemOne {
+    background: PaleGreen;
+  }
+
+  .itemTwo {
+    background: BlanchedAlmond;
+  }
+
+</style>
+
+<div class="container">
+  <div class="item1">header</div>
+  <div class="item2">advert</div>
+  <div class="item3">
+    <div class="itemOne">paragraph1</div>
+    <div class="itemTwo">paragraph2</div>
+  </div>
+  <div class="item4">footer</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.item3 {grid-template-columns: auto 1fr; display: grid;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-your-first-css-grid.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-your-first-css-grid.md
new file mode 100644
index 00000000000..0e93997a6ad
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/create-your-first-css-grid.md
@@ -0,0 +1,64 @@
+---
+id: 5a858944d96184f06fd60d61
+title: Create Your First CSS Grid
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/cqwREC4'
+forumTopicId: 301129
+dashedName: create-your-first-css-grid
+---
+
+# --description--
+
+Turn any HTML element into a grid container by setting its `display` property to `grid`. This gives you the ability to use all the other properties associated with CSS Grid.
+
+**Note:** In CSS Grid, the parent element is referred to as the <dfn>container</dfn> and its children are called <dfn>items</dfn>.
+
+# --instructions--
+
+Change the display of the div with the `container` class to `grid`.
+
+# --hints--
+
+`container` class should have a `display` property with a value of `grid`.
+
+```js
+assert(code.match(/.container\s*?{[\s\S]*display\s*?:\s*?grid\s*?;[\s\S]*}/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .d1{background:LightSkyBlue;}
+  .d2{background:LightSalmon;}
+  .d3{background:PaleTurquoise;}
+  .d4{background:LightPink;}
+  .d5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    width: 100%;
+    background: LightGray;
+    /* Only change code below this line */
+
+
+    /* Only change code above this line */
+  }
+</style>
+
+<div class="container">
+  <div class="d1">1</div>
+  <div class="d2">2</div>
+  <div class="d3">3</div>
+  <div class="d4">4</div>
+  <div class="d5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.container {display: grid;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md
new file mode 100644
index 00000000000..96261cee522
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/divide-the-grid-into-an-area-template.md
@@ -0,0 +1,113 @@
+---
+id: 5a94fe0569fb03452672e45c
+title: Divide the Grid Into an Area Template
+challengeType: 0
+forumTopicId: 301130
+dashedName: divide-the-grid-into-an-area-template
+---
+
+# --description--
+
+You can group cells of your grid together into an <dfn>area</dfn> and give the area a custom name. Do this by using `grid-template-areas` on the container like this:
+
+```css
+grid-template-areas:
+  "header header header"
+  "advert content content"
+  "advert footer footer";
+```
+
+The code above groups the cells of the grid into four areas: `header`, `advert`, `content`, and `footer`. Every word represents a cell and every pair of quotation marks represent a row.
+
+# --instructions--
+
+Change the template so the `footer` area spans the entire bottom row. Defining the areas won't have any visual effect right now. Later, you will make an item use an area to see how it works.
+
+# --hints--
+
+`container` class should have a `grid-template-areas` property similar to the example but with the `footer` area spanning the whole bottom row.
+
+```js
+assert(
+  __helpers
+    .removeCssComments(code)
+    .match(
+      /.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
+    )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+  .item5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+    grid-template-areas:
+    /* Only change code below this line */
+      "header header header"
+      "advert content content"
+      "advert footer footer";
+    /* Only change code above this line */
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+  .item5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+
+    grid-template-areas:
+      "header header header"
+      "advert content content"
+      "footer footer footer";
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md
new file mode 100644
index 00000000000..12edd170d71
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/limit-item-size-using-the-minmax-function.md
@@ -0,0 +1,77 @@
+---
+id: 5a94fe4469fb03452672e460
+title: Limit Item Size Using the minmax Function
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/cD97RTv'
+forumTopicId: 301131
+dashedName: limit-item-size-using-the-minmax-function
+---
+
+# --description--
+
+There's another built-in function to use with `grid-template-columns` and `grid-template-rows` called `minmax`. It's used to limit the size of items when the grid container changes size. To do this you need to specify the acceptable size range for your item. Here is an example:
+
+```css
+grid-template-columns: 100px minmax(50px, 200px);
+```
+
+In the code above, `grid-template-columns` is set to create two columns; the first is 100px wide, and the second has the minimum width of 50px and the maximum width of 200px.
+
+# --instructions--
+
+Using the `minmax` function, replace the `1fr` in the `repeat` function with a column size that has the minimum width of `90px` and the maximum width of `1fr`, and resize the preview panel to see the effect.
+
+# --hints--
+
+`container` class should have a `grid-template-columns` property that is set to repeat 3 columns with the minimum width of `90px` and maximum width of `1fr`.
+
+```js
+assert(
+  code.match(
+    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?minmax\s*?\(\s*?90px\s*?,\s*?1fr\s*?\)\s*?\)\s*?;[\s\S]*}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+  .item5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    /* Only change code below this line */
+
+    grid-template-columns: repeat(3, 1fr);
+
+    /* Only change code above this line */
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.container {grid-template-columns: repeat(3, minmax(90px, 1fr));}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md
new file mode 100644
index 00000000000..049dcbb9d62
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/place-items-in-grid-areas-using-the-grid-area-property.md
@@ -0,0 +1,86 @@
+---
+id: 5a94fe1369fb03452672e45d
+title: Place Items in Grid Areas Using the grid-area Property
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/cRrqmtV'
+forumTopicId: 301132
+dashedName: place-items-in-grid-areas-using-the-grid-area-property
+---
+
+# --description--
+
+After creating an area template for your grid container, as shown in the previous challenge, you can place an item in your custom area by referencing the name you gave it. To do this, you use the `grid-area` property on an item like this:
+
+```css
+.item1 {
+  grid-area: header;
+}
+```
+
+This lets the grid know that you want the `item1` class to go in the area named `header`. In this case, the item will use the entire top row because that whole row is named as the `header` area.
+
+# --instructions--
+
+Place an element with the `item5` class in the `footer` area using the `grid-area` property.
+
+# --hints--
+
+`item5` class should have a `grid-area` property that has the value of `footer`.
+
+```js
+assert(
+  __helpers
+    .removeCssComments(code)
+    .match(/.item5\s*?{[\s\S]*grid-area\s*?:\s*?footer\s*?;[\s\S]*}/gi)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+
+  .item5 {
+    background: PaleGreen;
+    /* Only change code below this line */
+
+
+    /* Only change code above this line */
+  }
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+    grid-template-areas:
+      "header header header"
+      "advert content content"
+      "footer footer footer";
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.item5 {grid-area: footer;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md
new file mode 100644
index 00000000000..866df68471f
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/reduce-repetition-using-the-repeat-function.md
@@ -0,0 +1,93 @@
+---
+id: 5a94fe3669fb03452672e45f
+title: Reduce Repetition Using the repeat Function
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/cQvqyHR'
+forumTopicId: 301133
+dashedName: reduce-repetition-using-the-repeat-function
+---
+
+# --description--
+
+When you used `grid-template-columns` and `grid-template-rows` to define the structure of a grid, you entered a value for each row or column you created.
+
+Let's say you want a grid with 100 rows of the same height. It isn't very practical to insert 100 values individually. Fortunately, there's a better way - by using the `repeat` function to specify the number of times you want your column or row to be repeated, followed by a comma and the value you want to repeat.
+
+Here's an example that would create the 100 row grid, each row at 50px tall.
+
+```css
+grid-template-rows: repeat(100, 50px);
+```
+
+You can also repeat multiple values with the repeat function and insert the function amongst other values when defining a grid structure. Here's what that looks like:
+
+```css
+grid-template-columns: repeat(2, 1fr 50px) 20px;
+```
+
+This translates to:
+
+```css
+grid-template-columns: 1fr 50px 1fr 50px 20px;
+```
+
+**Note:** The `1fr 50px` is repeated twice followed by 20px.
+
+# --instructions--
+
+Use `repeat` to remove repetition from the `grid-template-columns` property.
+
+# --hints--
+
+`container` class should have a `grid-template-columns` property that is set to repeat 3 columns with the width of `1fr`.
+
+```js
+assert(
+  code.match(
+    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?repeat\s*?\(\s*?3\s*?,\s*?1fr\s*?\)\s*?;[\s\S]*}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+  .item5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    /* Only change code below this line */
+
+    grid-template-columns: 1fr 1fr 1fr;
+
+    /* Only change code above this line */
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.container {grid-template-columns: repeat(3, 1fr);}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md
new file mode 100644
index 00000000000..909ff110a23
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-css-grid-units-to-change-the-size-of-columns-and-rows.md
@@ -0,0 +1,83 @@
+---
+id: 5a9036ee38fddaf9a66b5d34
+title: Use CSS Grid units to Change the Size of Columns and Rows
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/cvE8phd'
+forumTopicId: 301134
+dashedName: use-css-grid-units-to-change-the-size-of-columns-and-rows
+---
+
+# --description--
+
+You can use absolute and relative units like `px` and `em` in CSS Grid to define the size of rows and columns. You can use these as well:
+
+`fr`: sets the column or row to a fraction of the available space,
+
+`auto`: sets the column or row to the width or height of its content automatically,
+
+`%`: adjusts the column or row to the percent width of its container.
+
+Here's the code that generates the output in the preview:
+
+```css
+grid-template-columns: auto 50px 10% 2fr 1fr;
+```
+
+This snippet creates five columns. The first column is as wide as its content, the second column is 50px, the third column is 10% of its container, and for the last two columns; the remaining space is divided into three sections, two are allocated for the fourth column, and one for the fifth.
+
+# --instructions--
+
+Make a grid with three columns whose widths are as follows: 1fr, 100px, and 2fr.
+
+# --hints--
+
+Your `container` class should have a `grid-template-columns` property that has three columns with the following widths: `1fr`, `100px`, and `2fr`.
+
+```js
+assert(
+  code.match(
+    /.container\s*?{[\s\S]*grid-template-columns\s*?:\s*?1fr\s*?100px\s*?2fr\s*?;[\s\S]*}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .d1{background:LightSkyBlue;}
+  .d2{background:LightSalmon;}
+  .d3{background:PaleTurquoise;}
+  .d4{background:LightPink;}
+  .d5{background:PaleGreen;}
+
+  .container {
+    font-size: 40px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    /* Only change code below this line */
+
+    grid-template-columns: auto 50px 10% 2fr 1fr;
+
+    /* Only change code above this line */
+    grid-template-rows: 50px 50px;
+  }
+</style>
+
+<div class="container">
+  <div class="d1">1</div>
+  <div class="d2">2</div>
+  <div class="d3">3</div>
+  <div class="d4">4</div>
+  <div class="d5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.container {grid-template-columns: 1fr 100px 2fr;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md
new file mode 100644
index 00000000000..08aab8eb71d
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-grid-area-without-creating-an-areas-template.md
@@ -0,0 +1,86 @@
+---
+id: 5a94fe2669fb03452672e45e
+title: Use grid-area Without Creating an Areas Template
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/c6N7VhK'
+forumTopicId: 301135
+dashedName: use-grid-area-without-creating-an-areas-template
+---
+
+# --description--
+
+The `grid-area` property you learned in the last challenge can be used in another way. If your grid doesn't have an areas template to reference, you can create an area on the fly for an item to be placed like this:
+
+```css
+item1 { grid-area: 1/1/2/4; }
+```
+
+This is using the line numbers you learned about earlier to define where the area for this item will be. The numbers in the example above represent these values:
+
+```css
+grid-area: horizontal line to start at / vertical line to start at / horizontal line to end at / vertical line to end at;
+```
+
+So the item in the example will consume the rows between lines 1 and 2, and the columns between lines 1 and 4.
+
+# --instructions--
+
+Using the `grid-area` property, place the element with `item5` class between the third and fourth horizontal lines and between the first and fourth vertical lines.
+
+# --hints--
+
+The `item5` class should have a `grid-area` property to make it fill the whole area between the third and fourth horizontal lines, and first and fourth vertical lines.
+
+```js
+assert(
+  code.match(
+    /.item5\s*?{[\s\S]*grid-area\s*?:\s*?3\s*?\/\s*?1\s*?\/\s*?4\s*?\/\s*?4\s*?;[\s\S]*}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+
+  .item5 {
+    background: PaleGreen;
+    /* Only change code below this line */
+
+
+    /* Only change code above this line */
+  }
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>.item5 {grid-area: 3/1/4/4;}</style>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md
new file mode 100644
index 00000000000..42a72dcd35f
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-grid-column-to-control-spacing.md
@@ -0,0 +1,139 @@
+---
+id: 5a90372638fddaf9a66b5d38
+title: Use grid-column to Control Spacing
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/cnzkDSr'
+forumTopicId: 301136
+dashedName: use-grid-column-to-control-spacing
+---
+
+# --description--
+
+Up to this point, all the properties that have been discussed are for grid containers. The `grid-column` property is the first one for use on the grid items themselves.
+
+The hypothetical horizontal and vertical lines that create the grid are referred to as <dfn>lines</dfn>. These lines are numbered starting with 1 at the top left corner of the grid and move right for columns and down for rows, counting upward.
+
+This is what the lines look like for a 3x3 grid:
+
+<div style='position:relative;margin:auto;background:Gainsboro;display:block;margin-top:100px;margin-bottom:50px;width:200px;height:200px;'><p style='left:25%;top:-30%;font-size:130%;position:absolute;color:RoyalBlue;'>column lines</p><p style='left:0%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>1</p><p style='left:30%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>2</p><p style='left:63%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>3</p><p style='left:95%;top:-15%;font-size:130%;position:absolute;color:RoyalBlue;'>4</p><p style='left:-40%;top:45%;font-size:130%;transform:rotateZ(-90deg);position:absolute;'>row lines</p><p style='left:-10%;top:-10%;font-size:130%;position:absolute;'>1</p><p style='left:-10%;top:21%;font-size:130%;position:absolute;'>2</p><p style='left:-10%;top:53%;font-size:130%;position:absolute;'>3</p><p style='left:-10%;top:85%;font-size:130%;position:absolute;'>4</p><div style='left:0%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:31%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:63%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:95%;top:0%;width:5%;height:100%;background:RoyalBlue;position:absolute;'></div><div style='left:0%;top:0%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:31%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:63%;width:100%;height:5%;background:black;position:absolute;'></div><div style='left:0%;top:95%;width:100%;height:5%;background:black;position:absolute;'></div></div>
+
+To control the number of columns an item will consume, you can use the `grid-column` property in conjunction with the line numbers you want the item to start and stop at.
+
+Here's an example:
+
+```css
+grid-column: 1 / 3;
+```
+
+This will make the item start at the first vertical line of the grid on the left and span to the 3rd line of the grid, consuming two columns.
+
+# --instructions--
+
+Make the item with the class `item5` consume the last two columns of the grid.
+
+# --hints--
+
+`item5` class should have a `grid-column` property.
+
+```js
+assert(
+  __helpers
+    .removeWhiteSpace($('style').text())
+    .match(/\.item5{.*grid-column:.*}/g)
+);
+```
+
+`item5` class should have a `grid-column` property which results in it consuming the last two columns of the grid.
+
+```js
+const colStart = getComputedStyle($('.item5')[0]).gridColumnStart;
+const colEnd = getComputedStyle($('.item5')[0]).gridColumnEnd;
+const result = colStart.toString() + colEnd.toString();
+const correctResults = [
+  '24',
+  '2-1',
+  '2span 2',
+  '2span2',
+  'span 2-1',
+  '-12',
+  'span 2span 2',
+  'span 2auto',
+  'autospan 2'
+];
+assert(correctResults.includes(result));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+
+  .item5 {
+    background: PaleGreen;
+    /* Only change code below this line */
+
+
+    /* Only change code above this line */
+  }
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+
+  .item5 {
+    background: PaleGreen;
+    grid-column: 2 / 4;
+  }
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md
new file mode 100644
index 00000000000..93a364f7da0
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-grid-row-to-control-spacing.md
@@ -0,0 +1,122 @@
+---
+id: 5a90373638fddaf9a66b5d39
+title: Use grid-row to Control Spacing
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/c9WBLU4'
+forumTopicId: 301137
+dashedName: use-grid-row-to-control-spacing
+---
+
+# --description--
+
+Of course, you can make items consume multiple rows just like you can with columns. You define the horizontal lines you want an item to start and stop at using the `grid-row` property on a grid item.
+
+# --instructions--
+
+Make the element with the `item5` class consume the last two rows.
+
+# --hints--
+
+`item5` class should have a `grid-row` property.
+
+```js
+assert(
+  __helpers.removeWhiteSpace($('style').text()).match(/\.item5{.*grid-row:.*}/g)
+);
+```
+
+`item5` class should have a `grid-row` property which results in it consuming the last two rows of the grid.
+
+```js
+const rowStart = getComputedStyle($('.item5')[0]).gridRowStart;
+const rowEnd = getComputedStyle($('.item5')[0]).gridRowEnd;
+const result = rowStart.toString() + rowEnd.toString();
+const correctResults = [
+  '24',
+  '2-1',
+  '2span 2',
+  '2span2',
+  'span 2-1',
+  '-12',
+  'span 2span 2',
+  'span 2auto',
+  'autospan 2'
+];
+assert(correctResults.includes(result));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+
+  .item5 {
+    background: PaleGreen;
+    grid-column: 2 / 4;
+    /* Only change code below this line */
+
+    /* Only change code above this line */
+  }
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .item1{background:LightSkyBlue;}
+  .item2{background:LightSalmon;}
+  .item3{background:PaleTurquoise;}
+  .item4{background:LightPink;}
+
+  .item5 {
+    background: PaleGreen;
+    grid-column: 2 / 4;
+    grid-row: 2 / 4;
+  }
+
+  .container {
+    font-size: 40px;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    grid-template-rows: 1fr 1fr 1fr;
+    grid-gap: 10px;
+  }
+</style>
+
+<div class="container">
+  <div class="item1">1</div>
+  <div class="item2">2</div>
+  <div class="item3">3</div>
+  <div class="item4">4</div>
+  <div class="item5">5</div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md
new file mode 100644
index 00000000000..a973031154d
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/css-grid/use-media-queries-to-create-responsive-layouts.md
@@ -0,0 +1,174 @@
+---
+id: 5a94fe7769fb03452672e463
+title: Use Media Queries to Create Responsive Layouts
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pByETK/cMbqeHk'
+forumTopicId: 301138
+dashedName: use-media-queries-to-create-responsive-layouts
+---
+
+# --description--
+
+CSS Grid can be an easy way to make your site more responsive by using media queries to rearrange grid areas, change dimensions of a grid, and rearrange the placement of items.
+
+In the preview, when the viewport width is 300px or more, the number of columns changes from 1 to 2. The advertisement area then occupies the left column completely.
+
+# --instructions--
+
+When the viewport width is `400px` or more, make the header area occupy the top row completely and the footer area occupy the bottom row completely.
+
+# --hints--
+
+When the viewport is `400px` or more, `container` class should have a `grid-template-areas` property in which the header and footer areas occupy the top and bottom rows respectively and advert and content occupy the left and right columns of the middle row.
+
+```js
+assert(
+  __helpers
+    .removeCssComments(code)
+    .match(
+      /@media\s*?\(\s*?min-width\s*?:\s*?400px\s*?\)[\s\S]*.container\s*?{[\s\S]*grid-template-areas\s*?:\s*?"\s*?header\s*?header\s*?"\s*?"\s*?advert\s*?content\s*?"\s*?"\s*?footer\s*?footer\s*?"\s*?;[\s\S]*}/gi
+    )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .item1 {
+    background: LightSkyBlue;
+    grid-area: header;
+  }
+
+  .item2 {
+    background: LightSalmon;
+    grid-area: advert;
+  }
+
+  .item3 {
+    background: PaleTurquoise;
+    grid-area: content;
+  }
+
+  .item4 {
+    background: lightpink;
+    grid-area: footer;
+  }
+
+  .container {
+    font-size: 1.5em;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 50px auto 1fr auto;
+    grid-gap: 10px;
+    grid-template-areas:
+      "header"
+      "advert"
+      "content"
+      "footer";
+  }
+
+  @media (min-width: 300px){
+    .container{
+      grid-template-columns: auto 1fr;
+      grid-template-rows: auto 1fr auto;
+      grid-template-areas:
+        "advert header"
+        "advert content"
+        "advert footer";
+    }
+  }
+
+  @media (min-width: 400px){
+    .container{
+      grid-template-areas:
+      /* Only change code below this line */
+        "advert header"
+        "advert content"
+        "advert footer";
+      /* Only change code above this line */
+    }
+  }
+</style>
+
+<div class="container">
+  <div class="item1">header</div>
+  <div class="item2">advert</div>
+  <div class="item3">content</div>
+  <div class="item4">footer</div>
+</div>
+```
+
+# --solutions--
+
+```html
+<style>
+  .item1 {
+    background: LightSkyBlue;
+    grid-area: header;
+  }
+
+  .item2 {
+    background: LightSalmon;
+    grid-area: advert;
+  }
+
+  .item3 {
+    background: PaleTurquoise;
+    grid-area: content;
+  }
+
+  .item4 {
+    background: lightpink;
+    grid-area: footer;
+  }
+
+  .container {
+    font-size: 1.5em;
+    min-height: 300px;
+    width: 100%;
+    background: LightGray;
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: 50px auto 1fr auto;
+    grid-gap: 10px;
+    grid-template-areas:
+      "header"
+      "advert"
+      "content"
+      "footer";
+  }
+
+  @media (min-width: 300px){
+    .container{
+      grid-template-columns: auto 1fr;
+      grid-template-rows: auto 1fr auto;
+      grid-template-areas:
+        "advert header"
+        "advert content"
+        "advert footer";
+    }
+  }
+
+  @media (min-width: 400px){
+    .container{
+      grid-template-areas:
+        "header header"
+        "advert content"
+        "footer footer";
+    }
+  }
+</style>
+
+<div class="container">
+  <div class="item1">header</div>
+  <div class="item2">advert</div>
+  <div class="item3">content</div>
+  <div class="item4">footer</div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
new file mode 100644
index 00000000000..f126c72dc98
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/create-a-media-query.md
@@ -0,0 +1,91 @@
+---
+id: 587d78b0367417b2b2512b08
+title: Create a Media Query
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pzrPu4/cqwKrtm'
+forumTopicId: 301139
+dashedName: create-a-media-query
+---
+
+# --description--
+
+Media Queries are a new technique introduced in CSS3 that change the presentation of content based on different viewport sizes. The viewport is a user's visible area of a web page, and is different depending on the device used to access the site.
+
+Media Queries consist of a media type, and if that media type matches the type of device the document is displayed on, the styles are applied. You can have as many selectors and styles inside your media query as you want.
+
+Here's an example of a media query that returns the content when the device's width is less than or equal to `100px`:
+
+```css
+@media (max-width: 100px) { /* CSS Rules */ }
+```
+
+and the following media query returns the content when the device's height is more than or equal to `350px`:
+
+```css
+@media (min-height: 350px) { /* CSS Rules */ }
+```
+
+Remember, the CSS inside the media query is applied only if the media type matches that of the device being used.
+
+# --instructions--
+
+Add a media query, so that the `p` tag has a `font-size` of `10px` when the device's height is less than or equal to `800px`.
+
+# --hints--
+
+You should declare a `@media` query for devices with a `height` less than or equal to `800px`.
+
+```js
+const media = new __helpers.CSSHelp(document).getCSSRules('media');
+assert(media.some(x => x.media?.mediaText?.includes('(max-height: 800px)')));
+```
+
+Your `p` element should have a `font-size` of `10px` when the device `height` is less than or equal to `800px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-height: 800px)');
+assert(rules?.find(x => x.selectorText === 'p')?.style?.fontSize === "10px");
+```
+
+Your `p` element should have an initial `font-size` of `20px` when the device `height` is more than `800px`.
+
+```js
+const ifPFirst = new __helpers.CSSHelp(document).getCSSRules()?.find(x => x?.selectorText === 'p' || x?.media);
+assert(ifPFirst?.style?.fontSize === '20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  p {
+    font-size: 20px;
+  }
+
+  /* Only change code below this line */
+
+  /* Only change code above this line */
+</style>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
+```
+
+# --solutions--
+
+```html
+<style>
+  p {
+    font-size: 20px;
+  }
+
+  @media (max-height: 800px) {
+    p {
+      font-size: 10px;
+    }
+  }
+</style>
+
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md
new file mode 100644
index 00000000000..72bb0a43a2b
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/make-an-image-responsive.md
@@ -0,0 +1,76 @@
+---
+id: 587d78b1367417b2b2512b09
+title: Make an Image Responsive
+challengeType: 0
+forumTopicId: 301140
+dashedName: make-an-image-responsive
+---
+
+# --description--
+
+Making images responsive with CSS is actually very simple. You just need to add these properties to an image:
+
+```css
+img {
+  max-width: 100%;
+  height: auto;
+}
+```
+
+The `max-width` of `100%` will make sure the image is never wider than the container it is in, and the `height` of `auto` will make the image keep its original aspect ratio.
+
+# --instructions--
+
+Add the style rules to the `responsive-img` class to make it responsive. It should never be wider than its container (in this case, it's the preview window) and it should keep its original aspect ratio. After you have added your code, resize the preview to see how your images behave.
+
+# --hints--
+
+Your `responsive-img` class should have a `max-width` set to `100%`.
+
+```js
+assert(getComputedStyle($('.responsive-img')[0]).maxWidth === '100%');
+```
+
+Your `responsive-img` class should have a `height` set to `auto`.
+
+```js
+assert(code.match(/height:\s*?auto;/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+.responsive-img {
+
+
+}
+
+img {
+  width: 600px;
+}
+</style>
+
+<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
+<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
+```
+
+# --solutions--
+
+```html
+<style>
+.responsive-img {
+  max-width: 100%;
+  height: auto;
+}
+
+img {
+  width: 600px;
+}
+</style>
+
+<img class="responsive-img" src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
+<img src="https://s3.amazonaws.com/freecodecamp/FCCStickerPack.jpg" alt="freeCodeCamp stickers set">
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md
new file mode 100644
index 00000000000..bf80e0c75ef
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/make-typography-responsive.md
@@ -0,0 +1,77 @@
+---
+id: 587d78b1367417b2b2512b0c
+title: Make Typography Responsive
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pzrPu4/crzN7T8'
+forumTopicId: 301141
+dashedName: make-typography-responsive
+---
+
+# --description--
+
+Instead of using `em` or `px` to size text, you can use viewport units for responsive typography. Viewport units, like percentages, are relative units, but they are based off different items. Viewport units are relative to the viewport dimensions (width or height) of a device, and percentages are relative to the size of the parent container element.
+
+The four different viewport units are:
+
+<ul><li><code>vw</code> (viewport width): <code>10vw</code> would be 10% of the viewport's width.</li><li><code>vh</code> (viewport height): <code>3vh</code> would be 3% of the viewport's height.</li><li><code>vmin</code> (viewport minimum): <code>70vmin</code> would be 70% of the viewport's smaller dimension (height or width).</li><li><code>vmax</code> (viewport maximum): <code>100vmax</code> would be 100% of the viewport's bigger dimension (height or width).</li></ul>
+
+Here is an example that sets a `body` tag to 30% of the viewport's width.
+
+```css
+body { width: 30vw; }
+```
+
+# --instructions--
+
+Set the `width` of the `h2` tag to 80% of the viewport's width and the `width` of the paragraph as 75% of the viewport's smaller dimension.
+
+# --hints--
+
+Your `h2` tag should have a `width` of 80vw.
+
+```js
+assert(
+  __helpers
+    .removeCssComments(code)
+    .match(/h2\s*?{\s*?width:\s*?80vw;\s*?}/g)
+);
+```
+
+Your `p` tag should have a `width` of 75vmin.
+
+```js
+assert(
+  __helpers
+    .removeCssComments(code)
+    .match(/p\s*?{\s*?width:\s*?75vmin;\s*?}/g)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+
+</style>
+
+<h2>Importantus Ipsum</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
+```
+
+# --solutions--
+
+```html
+<style>
+  h2 {
+      width: 80vw;
+  }
+  p {
+      width: 75vmin;
+  }
+</style>
+
+<h2>Importantus Ipsum</h2>
+<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis tempus massa. Aenean erat nisl, gravida vel vestibulum cursus, interdum sit amet lectus. Sed sit amet quam nibh. Suspendisse quis tincidunt nulla. In hac habitasse platea dictumst. Ut sit amet pretium nisl. Vivamus vel mi sem. Aenean sit amet consectetur sem. Suspendisse pretium, purus et gravida consequat, nunc ligula ultricies diam, at aliquet velit libero a dui.</p>
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.md
new file mode 100644
index 00000000000..2e426957ae0
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-principles/use-a-retina-image-for-higher-resolution-displays.md
@@ -0,0 +1,64 @@
+---
+id: 587d78b1367417b2b2512b0a
+title: Use a Retina Image for Higher Resolution Displays
+challengeType: 0
+videoUrl: 'https://scrimba.com/p/pzrPu4/cVZ4Rfp'
+forumTopicId: 301142
+dashedName: use-a-retina-image-for-higher-resolution-displays
+---
+
+# --description--
+
+With the increase of internet connected devices, their sizes and specifications vary, and the displays they use could be different externally and internally. Pixel density is an aspect that could be different on one device from others and this density is known as Pixel Per Inch(PPI) or Dots Per Inch(DPI). The most famous such display is the one known as a "Retina Display" on the latest Apple MacBook Pro notebooks, and recently iMac computers. Due to the difference in pixel density between a "Retina" and "Non-Retina" displays, some images that have not been made with a High-Resolution Display in mind could look "pixelated" when rendered on a High-Resolution display.
+
+The simplest way to make your images properly appear on High-Resolution Displays, such as the MacBook Pros "retina display" is to define their `width` and `height` values as only half of what the original file is. Here is an example of an image that is only using half of the original height and width:
+
+```html
+<style>
+  img { height: 250px; width: 250px; }
+</style>
+<img src="coolPic500x500" alt="A most excellent picture">
+```
+
+# --instructions--
+
+Set the `width` and `height` of the `img` tag to half of their original values. In this case, both the original `height` and the original `width` are `200px`.
+
+# --hints--
+
+Your `img` tag should have a `width` of 100 pixels.
+
+```js
+assert(document.querySelector('img').width === 100);
+```
+
+Your `img` tag should have a `height` of 100 pixels.
+
+```js
+assert(document.querySelector('img').height === 100);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+
+</style>
+
+<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
+```
+
+# --solutions--
+
+```html
+<style>
+  img { 
+    height: 100px; 
+    width: 100px; 
+  }
+</style>
+
+<img src="https://s3.amazonaws.com/freecodecamp/FCCStickers-CamperBot200x200.jpg" alt="freeCodeCamp sticker that says 'Because CamperBot Cares'">
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md
new file mode 100644
index 00000000000..afe98f114e4
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-personal-portfolio-webpage.md
@@ -0,0 +1,281 @@
+---
+id: bd7158d8c242eddfaeb5bd13
+title: Build a Personal Portfolio Webpage
+challengeType: 14
+forumTopicId: 301143
+dashedName: build-a-personal-portfolio-webpage
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to <a href="https://personal-portfolio.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://personal-portfolio.freecodecamp.rocks</a>
+
+**User Stories:**
+
+1. Your portfolio should have a welcome section with an `id` of `welcome-section`
+1. The welcome section should have an `h1` element that contains text
+1. Your portfolio should have a projects section with an `id` of `projects`
+1. The projects section should contain at least one element with a `class` of `project-tile` to hold a project
+1. The projects section should contain at least one link to a project
+1. Your portfolio should have a navbar with an id of `navbar`
+1. The navbar should contain at least one link that you can click on to navigate to different sections of the page
+1. Your portfolio should have a link with an id of `profile-link`, which opens your GitHub or freeCodeCamp profile in a new tab
+1. Your portfolio should have at least one media query
+1. The height of the welcome section should be equal to the height of the viewport
+1. The navbar should always be at the top of the viewport
+
+Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
+
+**Note:** Be sure to add `<link rel="stylesheet" href="styles.css">` in your HTML to link your stylesheet and apply your CSS
+
+# --hints--
+
+Your portfolio should have a "Welcome" section with an `id` of `welcome-section`.
+
+```js
+const el = document.getElementById('welcome-section')
+assert(!!el);
+```
+
+Your `#welcome-section` element should contain an `h1` element.
+
+```js
+assert.isAbove(
+  document.querySelectorAll('#welcome-section h1').length,
+  0,
+  'Welcome section should contain an h1 element '
+);
+```
+
+You should not have any empty `h1` elements within `#welcome-section` element.
+
+```js
+assert.isAbove(
+  document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length,
+  0,
+  'h1 element in welcome section should contain your name or camper ' +
+    'name '
+);
+```
+
+You should have a "Projects" section with an `id` of `projects`.
+
+```js
+const el = document.getElementById('projects')
+assert(!!el);
+```
+
+Your portfolio should contain at least one element with a class of `project-tile`.
+
+```js
+assert.isAbove(
+  document.querySelectorAll('#projects .project-tile').length,
+  0
+);
+```
+
+Your `#projects` element should contain at least one `a` element.
+
+```js
+assert.isAbove(document.querySelectorAll('#projects a').length, 0);
+```
+
+Your portfolio should have a navbar with an `id` of `navbar`.
+
+```js
+const el = document.getElementById('navbar');
+assert(!!el);
+```
+
+Your `#navbar` element should contain at least one `a` element whose `href` attribute starts with `#`.
+
+```js
+const links = [...document.querySelectorAll('#navbar a')].filter(
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
+);
+
+assert.isAbove(
+  links.length,
+  0,
+  'Navbar should contain an anchor link '
+);
+```
+
+Your portfolio should have an `a` element with an `id` of `profile-link`.
+
+```js
+const el = document.getElementById('profile-link');
+assert(!!el && el.tagName === 'A')
+```
+
+Your `#profile-link` element should have a `target` attribute of `_blank`.
+
+```js
+const el = document.getElementById('profile-link');
+assert(!!el && el.target === '_blank')
+```
+
+Your portfolio should use at least one media query.
+
+```js
+const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
+const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
+assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
+```
+
+Your `#navbar` element should always be at the top of the viewport.
+
+```js
+(async () => {
+  const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
+
+  const navbar = document.getElementById('navbar');
+  assert.approximately(
+    navbar?.getBoundingClientRect().top,
+    0,
+    15,
+    "Navbar's parent should be body and it should be at the top of " +
+    'the viewport '
+  );
+
+  window.scroll(0, 500);
+
+  await timeout(1);
+
+  assert.approximately(
+    navbar?.getBoundingClientRect().top,
+    0,
+    15,
+    'Navbar should be at the top of the viewport even after ' +
+    'scrolling '
+  );
+  window.scroll(0, 0);
+})();
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+```css
+
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="styles.css">
+    <title>Personal Portfolio</title>
+</head>
+<body>
+    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
+<!--Font Reference-->
+<nav id="navbar">
+  <a href="#projects">Projects</a> |
+  <a href="#contact">Contact me</a>
+</nav>
+<main>
+  <section id="welcome-section">
+    <br>
+    <h1>It's me!</h1>
+    <img src="https://s.cdpn.io/profiles/user/4369153/512.jpg?1587151780" height=100px>
+    <h2>Naomi Carrigan</h2>
+    <p>Welcome to my portfolio page!</p>
+  </section><hr>
+  <section id="projects">
+    <h1>Projects</h1>
+    <h2><a href="https://codepen.io/nhcarrigan">Here's what I've worked on!</a></h2>
+    <p class="project-tile">
+<iframe height="265" style="width: 25;" scrolling="no" title="Algebraic Concepts" src="https://codepen.io/nhcarrigan/embed/preview/NWGrWBR?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
+  See the Pen <a href='https://codepen.io/nhcarrigan/pen/NWGrWBR'>Algebraic Concepts</a> by Naomi Carrigan
+  (<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
+<iframe height="265" style="width: 25;" scrolling="no" title="Pokemon Daycare Service" src="https://codepen.io/nhcarrigan/embed/preview/mdeEbeq?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
+  See the Pen <a href='https://codepen.io/nhcarrigan/pen/mdeEbeq'>Pokemon Daycare Service</a> by Naomi Carrigan
+  (<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
+<iframe height="265" style="width: 25;" scrolling="no" title="Togepi Fan Club" src="https://codepen.io/nhcarrigan/embed/preview/vYNGoBE?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
+  See the Pen <a href='https://codepen.io/nhcarrigan/pen/vYNGoBE'>Togepi Fan Club</a> by Naomi Carrigan
+  (<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
+<iframe height="265" style="width: 25;" scrolling="no" title="Togepi" src="https://codepen.io/nhcarrigan/embed/preview/yLYOWEN?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
+  See the Pen <a href='https://codepen.io/nhcarrigan/pen/yLYOWEN'>Togepi</a> by Naomi Carrigan
+  (<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
+    </p></section><hr>
+  <section id="contact">
+    <h1>Contact me!</h1>
+    <h2>Use the links below to get in touch.</h2>
+    <p><a href="https://www.freecodecamp.org/nhcarrigan" id="profile-link" target="_blank" rel="noopener noreferrer">FreeCodeCamp.org</a> | <a href="https://github.com/nhcarrigan" id="github-link" target="_blank" rel="noopener noreferrer">GitHub</a> | <a href="https://www.facebook.com/nhcarrigan" id="facebook-link" target="_blank" rel="noopener noreferrer">Facebook</a> | <a href="https://www.linkedin.com/in/Naomi-l-carrigan/" id="linkedin-link" target="_blank" rel="noopener noreferrer">LinkedIn</a>
+  </section>
+<footer><a href="../">Return to Project List</a> | <a href="https://www.nhcarrigan.com">Return to HomePage</a></footer>
+</body>
+</html>
+```
+
+```css
+nav{
+  position: fixed;
+  width: 100%;
+  text-align: right;
+  font-size: 24pt;
+  top: 0%;
+  right: 5px;
+  background-color: #000000;
+  color: #ffffff;
+}
+@media (max-width: 500px){
+  nav{
+    display: none;
+  }
+}
+a{
+  color: #ffffff;
+}
+main{
+  text-align: center;
+  background-color: black;
+  font-family:Pacifico
+}
+h1{
+  font-size: 48pt;
+}
+h2{
+  font-size: 24pt;
+}
+p{
+  font-size: 12pt;
+}
+#welcome-section{
+  background-color:#251a4a;
+  color: #FFFFFF;
+  display: table-cell;
+  vertical-align: middle;
+  width: 100vw;
+  height: 100vh;
+}
+#projects{
+  background-color: #060a9c;
+  color: #ffffff;
+  display: table-cell;
+  vertical-align: middle;
+  width: 100vw;
+  height: 100vh;
+}
+#contact{
+  background-color: #03300b;
+  color: #ffffff;
+  display: table-cell;
+  vertical-align: middle;
+  width: 100vw;
+  height: 100vh;
+}
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md
new file mode 100644
index 00000000000..1dbc840e0bb
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-product-landing-page.md
@@ -0,0 +1,470 @@
+---
+id: 587d78af367417b2b2512b04
+title: Build a Product Landing Page
+challengeType: 14
+forumTopicId: 301144
+dashedName: build-a-product-landing-page
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to <a href="https://product-landing-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://product-landing-page.freecodecamp.rocks</a>
+
+**User Stories:**
+
+1. Your product landing page should have a `header` element with a corresponding `id="header"`
+1. You can see an image within the `header` element with a corresponding `id="header-img"` (A logo would make a good image here)
+1. Within the `#header` element, you can see a `nav` element with a corresponding `id="nav-bar"`
+1. You can see at least three clickable elements inside the `nav` element, each with the class `nav-link`
+1. When you click a `.nav-link` button in the `nav` element, you are taken to the corresponding section of the landing page
+1. You can watch an embedded product video with `id="video"`
+1. Your landing page has a `form` element with a corresponding `id="form"`
+1. Within the form, there is an `input` field with `id="email"` where you can enter an email address
+1. The `#email` input field should have placeholder text to let users know what the field is for
+1. The `#email` input field uses HTML5 validation to confirm that the entered text is an email address
+1. Within the form, there is a submit `input` with a corresponding `id="submit"`
+1. When you click the `#submit` element, the email is submitted to a static page (use this mock URL: `https://www.freecodecamp.com/email-submit`)
+1. The navbar should always be at the top of the viewport
+1. Your product landing page should have at least one media query
+1. Your product landing page should utilize CSS flexbox at least once
+
+Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
+
+**Note:** Be sure to add `<link rel="stylesheet" href="styles.css">` in your HTML to link your stylesheet and apply your CSS
+
+# --hints--
+
+You should have a `header` element with an `id` of `header`.
+
+```js
+const el = document.getElementById('header')
+assert(!!el && el.tagName === 'HEADER')
+```
+
+You should have an `img` element with an `id` of `header-img`.
+
+```js
+const el = document.getElementById('header-img')
+assert(!!el && el.tagName === 'IMG')
+```
+
+Your `#header-img` should be a descendant of the `#header`.
+
+```js
+const els = document.querySelectorAll('#header #header-img')
+assert(els.length > 0)
+```
+
+Your `#header-img` should have a `src` attribute.
+
+```js
+const el = document.getElementById('header-img')
+assert(!!el && !!el.src)
+```
+
+Your `#header-img`’s `src` value should be a valid URL (starts with `http`).
+
+```js
+const el = document.getElementById('header-img')
+assert(!!el && /^http/.test(el.src))
+```
+
+You should have a `nav` element with an `id` of `nav-bar`.
+
+```js
+const el = document.getElementById('nav-bar')
+assert(!!el && el.tagName === 'NAV')
+```
+
+Your `#nav-bar` should be a descendant of the `#header`.
+
+```js
+const els = document.querySelectorAll('#header #nav-bar')
+assert(els.length > 0)
+```
+
+You should have at least 3 `.nav-link` elements within the `#nav-bar`.
+
+```js
+const els = document.querySelectorAll('#nav-bar .nav-link')
+assert(els.length >= 3)
+```
+
+Each `.nav-link` element should have an `href` attribute.
+
+```js
+const els = document.querySelectorAll('.nav-link')
+els.forEach(el => {
+  if (!el.href) assert(false)
+})
+assert(els.length > 0)
+```
+
+Each `.nav-link` element should link to a corresponding element on the landing page (has an `href` with a value of another element's id. e.g. `#footer`).
+
+```js
+const els = document.querySelectorAll('.nav-link')
+els.forEach(el => {
+  const linkDestination = el.getAttribute('href').slice(1)
+  if (!document.getElementById(linkDestination)) assert(false)
+})
+assert(els.length > 0)
+```
+
+You should have a `video` or `iframe` element with an `id` of `video`.
+
+```js
+const el = document.getElementById('video')
+assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME'))
+```
+
+Your `#video` should have a `src` attribute.
+
+```js
+let el = document.getElementById('video')
+const sourceNode = el.children;
+let sourceElement = null;
+if (sourceNode.length) {
+  sourceElement = [...video.children].filter(el => el.localName === 'source')[0];
+}
+if (sourceElement) {
+  el = sourceElement;
+}
+assert(el.hasAttribute('src'));
+```
+
+You should have a `form` element with an `id` of `form`.
+
+```js
+const el = document.getElementById('form')
+assert(!!el && el.tagName === 'FORM')
+```
+
+You should have an `input` element with an `id` of `email`.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && el.tagName === 'INPUT')
+```
+
+Your `#email` should be a descendant of the `#form`.
+
+```js
+const els = document.querySelectorAll('#form #email')
+assert(els.length > 0)
+```
+
+Your `#email` should have the `placeholder` attribute with placeholder text.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && !!el.placeholder && el.placeholder.length > 0)
+```
+
+Your `#email` should use HTML5 validation by setting its `type` to `email`.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && el.type === 'email')
+```
+
+You should have an `input` element with an `id` of `submit`.
+
+```js
+const el = document.getElementById('submit')
+assert(!!el && el.tagName === 'INPUT')
+```
+
+Your `#submit` should be a descendant of the `#form`.
+
+```js
+const els = document.querySelectorAll('#form #submit')
+assert(els.length > 0)
+```
+
+Your `#submit` should have a `type` of `submit`.
+
+```js
+const el = document.getElementById('submit')
+assert(!!el && el.type === 'submit')
+```
+
+Your `#form` should have an `action` attribute of `https://www.freecodecamp.com/email-submit`.
+
+```js
+const el = document.getElementById('form')
+assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit')
+```
+
+Your `#email` should have a `name` attribute of `email`.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && el.name === 'email')
+```
+
+Your `#nav-bar` should always be at the top of the viewport.
+
+```js
+(async () => {
+  const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
+
+  const header = document.getElementById('header');
+  const headerChildren = header.children;
+  const navbarCandidates = [header, ...headerChildren];
+
+  // Return smallest top position of all navbar candidates
+  const getNavbarPosition = (candidates = []) => {
+    return candidates.reduce(
+      (min, candidate) =>
+        Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)),
+      Infinity
+    );
+  };
+  assert.approximately(
+    getNavbarPosition(navbarCandidates),
+    0,
+    15,
+    '#header or one of its children should be at the top of the viewport '
+  );
+
+  window.scroll(0, 500);
+  await timeout(1);
+
+  assert.approximately(
+    getNavbarPosition(navbarCandidates),
+    0,
+    15,
+    '#header or one of its children should be at the top of the ' +
+      'viewport even after scrolling '
+  );
+
+  window.scroll(0, 0);
+})();
+```
+
+Your Product Landing Page should use at least one media query.
+
+```js
+const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
+const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
+assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
+```
+
+Your Product Landing Page should use CSS Flexbox at least once.
+
+```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
+const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
+const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
+})
+assert(usesFlex || usesFlexMedia)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+```css
+
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css" />
+    <title>Product Landing Page</title>
+  </head>
+  <body>
+    <header id="header">
+      <nav id="nav-bar">
+        <img
+          id="header-img"
+          src="https://upload.wikimedia.org/wikipedia/commons/3/39/Pokeball.PNG"
+          max-height="50px"
+        />
+        <a href="#Features" class="nav-link">Features</a> |
+        <a href="#Video" class="nav-link">See our facility!</a> |
+        <a href="#Pricing" class="nav-link">Purchase</a>
+        <hr />
+      </nav>
+    </header>
+    <main>
+      <h1>
+        Pokemon Daycare Service
+      </h1>
+      <section id="Features">
+        <h2>What we offer</h2>
+        <div class="flex-here">
+          <div class="flex-left">
+            <img
+              id="bullet"
+              src="https://upload.wikimedia.org/wikipedia/commons/3/39/Pokeball.PNG"
+              max-height="25px"
+            />
+          </div>
+          <div class="flex-right">Guaranteed friendly and loving staff!</div>
+        </div>
+        <div class="flex-here">
+          <div class="flex-left">
+            <img
+              id="bullet"
+              src="https://upload.wikimedia.org/wikipedia/commons/3/39/Pokeball.PNG"
+              max-height="25px"
+            />
+          </div>
+          <div class="flex-right">
+            Comfortable environment for Pokemon to explore and play!
+          </div>
+        </div>
+        <div class="flex-here">
+          <div class="flex-left">
+            <img
+              id="bullet"
+              src="https://upload.wikimedia.org/wikipedia/commons/3/39/Pokeball.PNG"
+              max-height="25px"
+            />
+          </div>
+          <div class="flex-right">
+            Multiple membership plans to fit your lifestyle!
+          </div>
+        </div>
+      </section>
+      <section id="Video">
+        <h2>Check us out!</h2>
+        A sneak peek into our facility:
+        <br />
+        <iframe
+          id="video"
+          width="520"
+          height="347"
+          src="https://www.youtube.com/embed/Nw-ksH2r6AQ"
+          frameborder="0"
+          allowfullscreen
+          alt="A video tour of our facility"
+        >
+        </iframe>
+      </section>
+      <section id="Pricing">
+        <h2>Membership Plans</h2>
+        <div class="flex-mem">
+          <div class="flex-mem-box">
+            <font size="+2">Basic Membership</font><br />
+            <ul>
+              <li>One Pokemon</li>
+              <li>Food and berries provided</li>
+            </ul>
+            <em>$9.99/month</em>
+          </div>
+          <div class="flex-mem-box">
+            <font size="+2">Silver Membership</font><br />
+            <ul>
+              <li>Up to Three Pokemon</li>
+              <li>Food and berries provided</li>
+              <li>Grooming and accessories included</li>
+            </ul>
+            <em>$19.99/month</em>
+          </div>
+          <div class="flex-mem-box">
+            <font size="+2">Gold Membership</font><br />
+            <ul>
+              <li>Up to six Pokemon!</li>
+              <li>Food and berries provided</li>
+              <li>Grooming and accessories included</li>
+              <li>Personal training for each Pokemon</li>
+              <li>Breeding and egg hatching</li>
+            </ul>
+            <em>$29.99/month</em>
+          </div>
+        </div>
+      </section>
+      <form id="form" action="https://www.freecodecamp.com/email-submit">
+        <p>Sign up for our newsletter!</p>
+        <label for="email"><p>Email:</p><input name="email" id="email" type="email" placeholder="johnsmith@email.com" required></label>
+        <input type="submit" id="submit">
+      </form>
+      <footer>
+        <a href="../">Return to Project List</a> |
+        <a href="https://www.nhcarrigan.com">Return to HomePage</a>
+      </footer>
+    </main>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: #3a3240;
+  color: white;
+}
+main {
+  max-width: 750px;
+  margin: 50px auto;
+}
+input {
+  background-color: #92869c;
+}
+a:not(.nav-link) {
+  color: white;
+}
+#header-img {
+  max-height: 25px;
+}
+#nav-bar {
+  position: fixed;
+  width: 100%;
+  text-align: center;
+  top: 0%;
+  background-color: #92869c;
+}
+h1 {
+  text-align: center;
+}
+body {
+  text-align: center;
+}
+footer {
+  text-align: center;
+}
+#bullet {
+  max-height: 25px;
+}
+.flex-here {
+  display: flex;
+  justify-content: center;
+}
+.flex-left {
+  height: 25px;
+}
+.flex-mem {
+  display: flex;
+  justify-content: center;
+}
+.flex-mem-box {
+  background-color: #92869c;
+  border-color: black;
+  border-width: 5px;
+  border-style: solid;
+  margin: 10px;
+  padding: 10px;
+  color: black;
+}
+@media (max-width: 350px) {
+  #video {
+    width: 300;
+    height: 200;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
new file mode 100644
index 00000000000..247fb17e35b
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
@@ -0,0 +1,518 @@
+---
+id: 587d78af367417b2b2512b03
+title: Build a Survey Form
+challengeType: 14
+forumTopicId: 301145
+dashedName: build-a-survey-form
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to <a href="https://survey-form.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://survey-form.freecodecamp.rocks</a>
+
+**User Stories:**
+
+1. You should have a page title in an `h1` element with an `id` of `title`
+1. You should have a short explanation in a `p` element with an `id` of `description`
+1. You should have a `form` element with an `id` of `survey-form`
+1. Inside the form element, you are **required** to enter your name in an `input` field that has an `id` of `name` and a `type` of `text`
+1. Inside the form element, you are **required** to enter your email in an `input` field that has an `id` of `email`
+1. If you enter an email that is not formatted correctly, you will see an HTML5 validation error
+1. Inside the form, you can enter a number in an `input` field that has an `id` of `number`
+1. If you enter non-numbers in the number input, you will see an HTML5 validation error
+1. If you enter numbers outside the range of the number input, which are defined by the `min` and `max` attributes, you will see an HTML5 validation error
+1. For the name, email, and number input fields, you can see corresponding `label` elements in the form, that describe the purpose of each field with the following ids: `id="name-label"`, `id="email-label"`, and `id="number-label"`
+1. For the name, email, and number input fields, you can see placeholder text that gives a description or instructions for each field
+1. Inside the form element, you should have a `select` dropdown element with an `id` of `dropdown` and at least two options to choose from
+1. Inside the form element, you can select an option from a group of at least two radio buttons that are grouped using the `name` attribute
+1. Inside the form element, you can select several fields from a series of checkboxes, each of which must have a `value` attribute
+1. Inside the form element, you are presented with a `textarea` for additional comments
+1. Inside the form element, you are presented with a button with `id` of `submit` to submit all the inputs
+
+Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
+
+**Note:** Be sure to add `<link rel="stylesheet" href="styles.css">` in your HTML to link your stylesheet and apply your CSS
+
+# --hints--
+
+You should have an `h1` element with an `id` of `title`.
+
+```js
+const el = document.getElementById('title')
+assert(!!el && el.tagName === 'H1')
+```
+
+Your `#title` should not be empty.
+
+```js
+const el = document.getElementById('title')
+assert(!!el && el.innerText.length > 0)
+```
+
+You should have a `p` element with an `id` of `description`.
+
+```js
+const el = document.getElementById('description')
+assert(!!el && el.tagName === 'P')
+```
+
+Your `#description` should not be empty.
+
+```js
+const el = document.getElementById('description')
+assert(!!el && el.innerText.length > 0)
+```
+
+You should have a `form` element with an `id` of `survey-form`.
+
+```js
+const el = document.getElementById('survey-form')
+assert(!!el && el.tagName === 'FORM')
+```
+
+You should have an `input` element with an `id` of `name`.
+
+```js
+const el = document.getElementById('name')
+assert(!!el && el.tagName === 'INPUT')
+```
+
+Your `#name` should have a `type` of `text`.
+
+```js
+const el = document.getElementById('name')
+assert(!!el && el.type === 'text')
+```
+
+Your `#name` should require input.
+
+```js
+const el = document.getElementById('name')
+assert(!!el && el.required)
+```
+
+Your `#name` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #name')
+assert(!!el)
+```
+
+You should have an `input` element with an `id` of `email`.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && el.tagName === 'INPUT')
+```
+
+Your `#email` should have a `type` of `email`.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && el.type === 'email')
+```
+
+Your `#email` should require input.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && el.required)
+```
+
+Your `#email` should be a descendant of `#survey-form`
+
+```js
+const el = document.querySelector('#survey-form #email')
+assert(!!el)
+```
+
+You should have an `input` element with an `id` of `number`.
+
+```js
+const el = document.getElementById('number')
+assert(!!el && el.tagName === 'INPUT')
+```
+
+Your `#number` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #number')
+assert(!!el)
+```
+
+Your `#number` should have a `type` of `number`.
+
+```js
+const el = document.getElementById('number')
+assert(!!el && el.type === 'number')
+```
+
+Your `#number` should have a `min` attribute with a numeric value.
+
+```js
+const el = document.getElementById('number')
+assert(!!el && el.min && isFinite(el.min))
+```
+
+Your `#number` should have a `max` attribute with a numeric value.
+
+```js
+const el = document.getElementById('number')
+assert(!!el && el.max && isFinite(el.max))
+```
+
+You should have a `label` element with an `id` of `name-label`.
+
+```js
+const el = document.getElementById('name-label')
+assert(!!el && el.tagName === 'LABEL')
+```
+
+You should have a `label` element with an `id` of `email-label`.
+
+```js
+const el = document.getElementById('email-label')
+assert(!!el && el.tagName === 'LABEL')
+```
+
+You should have a `label` element with an `id` of `number-label`.
+
+```js
+const el = document.getElementById('number-label')
+assert(!!el && el.tagName === 'LABEL')
+```
+
+Your `#name-label` should contain text that describes the input.
+
+```js
+const el = document.getElementById('name-label')
+assert(!!el && el.innerText.length > 0)
+```
+
+Your `#email-label` should contain text that describes the input.
+
+```js
+const el = document.getElementById('email-label')
+assert(!!el && el.innerText.length > 0)
+```
+
+Your `#number-label` should contain text that describes the input.
+
+```js
+const el = document.getElementById('number-label')
+assert(!!el && el.innerText.length > 0)
+```
+
+Your `#name-label` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #name-label')
+assert(!!el)
+```
+
+Your `#email-label` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #email-label')
+assert(!!el)
+```
+
+Your `#number-label` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #number-label')
+assert(!!el)
+```
+
+Your `#name` should have a `placeholder` attribute and value.
+
+```js
+const el = document.getElementById('name')
+assert(!!el && !!el.placeholder && el.placeholder.length > 0)
+```
+
+Your `#email` should have a `placeholder` attribute and value.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && !!el.placeholder && el.placeholder.length > 0)
+```
+
+Your `#number` should have a `placeholder` attribute and value.
+
+```js
+const el = document.getElementById('number')
+assert(!!el && !!el.placeholder && el.placeholder.length > 0)
+```
+
+You should have a `select` field with an `id` of `dropdown`.
+
+```js
+const el = document.getElementById('dropdown')
+assert(!!el && el.tagName === 'SELECT')
+```
+
+Your `#dropdown` should have at least two selectable (not disabled) `option` elements.
+
+```js
+const els = document.querySelectorAll('#dropdown option:not([disabled])')
+assert(els.length >= 2)
+```
+
+Your `#dropdown` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #dropdown')
+assert(!!el)
+```
+
+You should have at least two `input` elements with a `type` of `radio` (radio buttons).
+
+```js
+const els = document.querySelectorAll('input[type="radio"]')
+assert(els.length >= 2)
+```
+
+You should have at least two radio buttons that are descendants of `#survey-form`.
+
+```js
+const els = document.querySelectorAll('#survey-form input[type="radio"]')
+assert(els.length >= 2)
+```
+
+All your radio buttons should have a `value` attribute and value.
+
+```js
+const els1 = document.querySelectorAll('input[type="radio"]')
+const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])')
+assert(els1.length > 0 && els2.length === 0)
+```
+
+All your radio buttons should have a `name` attribute and value.
+
+```js
+const els1 = document.querySelectorAll('input[type="radio"]')
+const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])')
+assert(els1.length > 0 && els2.length === 0)
+```
+
+Every radio button group should have at least 2 radio buttons.
+
+```js
+const radioButtons = document.querySelectorAll('input[type="radio"]');
+const groups = {}
+
+if (radioButtons) {
+  radioButtons.forEach(el => {
+    if (!groups[el.name]) groups[el.name] = []
+    groups[el.name].push(el)
+  })
+}
+
+const groupKeys = Object.keys(groups)
+
+groupKeys.forEach(key => {
+  if (groups[key].length < 2) assert(false)
+})
+
+assert(groupKeys.length > 0)
+```
+
+You should have at least two `input` elements with a `type` of `checkbox` (checkboxes) that are descendants of `#survey-form`.
+
+```js
+const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
+assert(els.length >= 2)
+```
+
+All your checkboxes inside `#survey-form` should have a `value` attribute and value.
+
+```js
+const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
+const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])')
+assert(els1.length > 0 && els2.length === 0)
+```
+
+You should have at least one `textarea` element that is a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form textarea')
+assert(!!el)
+```
+
+You should have an `input` or `button` element with an `id` of `submit`.
+
+```js
+const el = document.getElementById('submit')
+assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))
+```
+
+Your `#submit` should have a `type` of `submit`.
+
+```js
+const el = document.getElementById('submit')
+assert(!!el && el.type === 'submit')
+```
+
+Your `#submit` should be a descendant of `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #submit')
+assert(!!el)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+```css
+
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css" />
+    <title>Survey Form</title>
+  </head>
+  <body>
+    <h1>Survey Form</h1>
+    <p>The card below was built as a sample survey form for freeCodeCamp.</p>
+    <main id="main">
+      <h1 id="title">Join the Togepi Fan Club!</h1>
+      <p id="description">
+        Enter your information here to receive updates about club activities,
+        our monthly newsletter, and other email communications.
+      </p>
+      <form id="survey-form" action="#">
+        <label for="name" id="name-label"
+          ><p>Name:</p>
+          <input type="text" id="name" placeholder="e.g. John Smith" required />
+        </label>
+        <label for="email" id="email-label"
+          ><p>Email:</p>
+          <input
+            type="email"
+            id="email"
+            placeholder="e.g. john.smith@email.com"
+            required
+          />
+        </label>
+        <label for="age" id="number-label"
+          ><p>Age<em>(optional)</em>:</p>
+          <input
+            type="number"
+            id="number"
+            placeholder="e.g. 19"
+            min="18"
+            max="99"
+          />
+        </label>
+        <label for="interest" id="interest-label"
+          ><p>What are you most interested in?</p>
+          <select id="dropdown">
+            <option selected disabled hidden></option>
+            <option id="battles">Battling</option>
+            <option id="breeding">Breeding</option>
+            <option id="catching">Completing my Pokedex</option>
+            <option id="exploring">Exploring new regions</option>
+          </select>
+        </label>
+        <p>Who is your favourite Pokemon?</p>
+        <label for="togepi">
+          <input
+            id="togepi"
+            type="radio"
+            name="favorite"
+            value="togepi"
+          />Togepi!
+        </label>
+        <label for="pikachu">
+          <input
+            id="pikachu"
+            type="radio"
+            name="favorite"
+            value="pikachu"
+          />Pikachu
+        </label>
+        <label for="other">
+          <input id="other" type="radio" name="favorite" value="other" />Other
+        </label>
+        <p>Which communications do you want to receive?</p>
+        <label for="newsletter">
+          <input
+            id="newsletter"
+            type="checkbox"
+            name="communications"
+            value="newsletter"
+          />Newsletter
+        </label>
+        <label for="events">
+          <input
+            id="events"
+            type="checkbox"
+            name="communications"
+            value="events"
+          />Event updates
+        </label>
+        <label for="updates">
+          <input
+            id="updates"
+            type="checkbox"
+            name="communications"
+            value="updates"
+          />Club updates
+        </label>
+        <p>Any other information you would like to share?</p>
+        <textarea id="additional-information" rows="4" cols="50">
+You can provide comments, suggestions, or feedback here.</textarea
+        >
+        <p>
+          <em
+            >Please note: This form is a proof of concept. Submitting the form
+            will not actually transmit your data.</em
+          >
+        </p>
+        <button type="Submit" id="submit">Submit</button>
+      </form>
+    </main>
+  </body>
+  <footer>
+    <a href="../">Return to Project List</a> |
+    <a href="https://www.nhcarrigan.com">Return to HomePage</a>
+  </footer>
+</html>
+```
+
+```css
+main {
+  text-align: center;
+  background-color: #92869c;
+  background-blend-mode: lighten;
+  max-width: 500px;
+  margin: 20px auto;
+  border-radius: 50px;
+  box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
+  color: black;
+}
+body {
+  text-align: center;
+  background: #3a3240;
+  color: white;
+}
+input, textarea, select, button {
+  background: #3a3240;
+  color: white;
+}
+a {
+  color: white;
+}
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md
new file mode 100644
index 00000000000..9b184a652c2
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-technical-documentation-page.md
@@ -0,0 +1,529 @@
+---
+id: 587d78b0367417b2b2512b05
+title: Build a Technical Documentation Page
+challengeType: 14
+forumTopicId: 301146
+dashedName: build-a-technical-documentation-page
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://technical-documentation-page.freecodecamp.rocks</a>
+
+**User Stories:**
+
+1. You can see a `main` element with a corresponding `id="main-doc"`, which contains the page's main content (technical documentation)
+1. Within the `#main-doc` element, you can see several `section` elements, each with a class of `main-section`. There should be a minimum of five
+1. The first element within each `.main-section` should be a `header` element, which contains text that describes the topic of that section.
+1. Each `section` element with the class of `main-section` should also have an `id` that corresponds with the text of each `header` contained within it. Any spaces should be replaced with underscores (e.g. The section that contains the header "JavaScript and Java" should have a corresponding `id="JavaScript_and_Java"`)
+1. The `.main-section` elements should contain at least ten `p` elements total (not each)
+1. The `.main-section` elements should contain at least five `code` elements total (not each)
+1. The `.main-section` elements should contain at least five `li` items total (not each)
+1. You can see a `nav` element with a corresponding `id="navbar"`
+1. The navbar element should contain one `header` element which contains text that describes the topic of the technical documentation
+1. Additionally, the navbar should contain link (`a`) elements with the class of `nav-link`. There should be one for every element with the class `main-section`
+1. The `header` element in the `#navbar` must come before any link (`a`) elements in the navbar
+1. Each element with the class of `nav-link` should contain text that corresponds to the `header` text within each `section` (e.g. if you have a "Hello world" section/header, your navbar should have an element which contains the text "Hello world")
+1. When you click on a navbar element, the page should navigate to the corresponding section of the `#main-doc` element (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id, and contains the corresponding header)
+1. On regular sized devices (laptops, desktops), the element with `id="navbar"` should be shown on the left side of the screen and should always be visible to the user
+1. Your technical documentation should use at least one media query
+
+Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
+
+**Note:** Be sure to add `<link rel="stylesheet" href="styles.css">` in your HTML to link your stylesheet and apply your CSS
+
+# --hints--
+
+You should have a `main` element with an `id` of `main-doc`.
+
+```js
+const el = document.getElementById('main-doc')
+assert(!!el)
+```
+
+You should have at least five `section` elements with a class of `main-section`.
+
+```js
+const els = document.querySelectorAll('#main-doc section')
+assert(els.length >= 5)
+```
+
+All of your `.main-section` elements should be `section` elements.
+
+```js
+const els = document.querySelectorAll('.main-section')
+els.forEach(el => {
+  if (el.tagName !== 'SECTION') assert(false)
+})
+assert(els.length > 0)
+```
+
+You should have at least five `.main-section` elements that are descendants of `#main-doc`.
+
+```js
+const els = document.querySelectorAll('#main-doc .main-section')
+assert(els.length >= 5)
+```
+
+The first child of each `.main-section` should be a `header` element.
+
+```js
+const els = document.querySelectorAll('.main-section')
+els.forEach(el => {
+  if(el.firstElementChild?.tagName !== 'HEADER') assert(false)
+})
+assert(els.length > 0)
+```
+
+None of your `header` elements should be empty.
+
+```js
+const els = document.querySelectorAll('header')
+els.forEach(el => {
+  if (el.innerText?.length <= 0) assert(false)
+})
+assert(els.length > 0)
+```
+
+All of your `.main-section` elements should have an `id`.
+
+```js
+const els = document.querySelectorAll('.main-section')
+els.forEach(el => {
+  if (!el.id || el.id === '') assert(false)
+})
+assert(els.length > 0)
+```
+
+Each `.main-section` should have an `id` that matches the text of its first child, having any spaces in the child's text replaced with underscores (`_`) for the id's.
+
+```js
+const els = document.querySelectorAll('.main-section')
+els.forEach(el => {
+  const text = el.firstElementChild?.innerText?.replaceAll(' ', '_')
+  if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false)
+})
+assert(els.length > 0)
+```
+
+You should have at least 10 `p` elements (total) within your `.main-section` elements.
+
+```js
+const els = document.querySelectorAll('.main-section p')
+assert(els.length >= 10)
+```
+
+You should have at least five `code` elements that are descendants of `.main-section` elements.
+
+```js
+const els = document.querySelectorAll('.main-section code')
+assert(els.length >= 5)
+```
+
+You should have at least five `li` elements that are descendants of `.main-section` elements.
+
+```js
+const els = document.querySelectorAll('.main-section li')
+assert(els.length >= 5)
+```
+
+You should have a `nav` element with an `id` of `navbar`.
+
+```js
+const el = document.getElementById('navbar')
+assert(!!el && el.tagName === 'NAV')
+```
+
+Your `#navbar` should have exactly one `header` element within it.
+
+```js
+const els = document.querySelectorAll('#navbar header')
+assert(els.length === 1)
+```
+
+You should have at least one `a` element with a class of `nav-link`.
+
+```js
+const els = document.querySelectorAll('a.nav-link')
+assert(els.length >= 1)
+```
+
+All of your `.nav-link` elements should be anchor (`a`) elements.
+
+```js
+const els = document.querySelectorAll('.nav-link')
+els.forEach(el => {
+  if (el.tagName !== 'A') assert(false)
+})
+assert(els.length > 0)
+```
+
+All of your `.nav-link` elements should be in the `#navbar`.
+
+```js
+const els1 = document.querySelectorAll('.nav-link')
+const els2 = document.querySelectorAll('#navbar .nav-link')
+assert(els2.length > 0 && els1.length === els2.length)
+```
+
+You should have the same number of `.nav-link` and `.main-section` elements.
+
+```js
+const els1 = document.querySelectorAll('.main-section')
+const els2 = document.querySelectorAll('.nav-link')
+assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
+```
+
+The `header` element in the `#navbar` should come before any link (`a`) elements also in the `#navbar`.
+
+```js
+const navLinks = document.querySelectorAll('#navbar a.nav-link');
+const header = document.querySelector('#navbar header');
+navLinks.forEach((navLink) => {
+  if (
+    (
+      header.compareDocumentPosition(navLink) &
+      Node.DOCUMENT_POSITION_PRECEDING
+    ) 
+  ) assert(false)
+});
+assert(!!header)
+```
+
+Each `.nav-link` should have text that corresponds to the `header` text of its related `section` (e.g. if you have a "Hello world" section/header, your `#navbar` should have a `.nav-link` which has the text "Hello world").
+
+```js
+const headerText = Array.from(document.querySelectorAll('.main-section')).map(el =>
+  el.firstElementChild?.innerText?.trim().toUpperCase()
+)
+const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el =>
+  el.innerText?.trim().toUpperCase()
+)
+const remainder = headerText.filter(str => linkText.indexOf(str) === -1)
+assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0)
+```
+
+Each `.nav-link` should have an `href` attribute that links to its corresponding `.main-section` (e.g. If you click on a `.nav-link` element that contains the text "Hello world", the page navigates to a `section` element with that id).
+
+```js
+const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href'))
+const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id)
+const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1)
+assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0)
+```
+
+Your `#navbar` should always be on the left edge of the window.
+
+```js
+const el = document.getElementById('navbar')
+const left1 = el?.offsetLeft
+const left2 = el?.offsetLeft
+assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15)
+```
+
+Your Technical Documentation project should use at least one media query.
+
+```js
+const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
+const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
+assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+```css
+
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css" />
+    <title>Technical Documentation Page</title>
+  </head>
+  <body>
+    <nav id="navbar">
+      <header><br />Algebraic Concepts</header>
+      <hr />
+      <a href="#introduction" class="nav-link">Introduction</a><br />
+      <hr />
+      <a href="#definitions" class="nav-link">Definitions</a><br />
+      <hr />
+      <a href="#examples" class="nav-link">Examples</a><br />
+      <hr />
+      <a href="#solving_equations" class="nav-link">Solving Equations</a><br />
+      <hr />
+      <a href="#solving_equations_ii" class="nav-link">Solving Equations II</a
+      ><br />
+      <hr />
+      <a href="#solving_equations_iii" class="nav-link">Solving Equations III</a
+      ><br />
+      <hr />
+      <a href="#system_of_equations" class="nav-link">System of Equations</a
+      ><br />
+      <hr />
+      <a href="#try_it_yourself!" class="nav-link">Try it Yourself!</a><br />
+      <hr />
+      <a href="#more_information" class="nav-link">More Information</a><br />
+    </nav>
+    <main id="main-doc">
+      <section class="main-section" id="introduction">
+        <header>Introduction</header>
+        <p>
+          Welcome to a basic introduction of algebra. In this tutorial, we will
+          review some of the more common algebraic concepts.
+        </p>
+      </section>
+      <section class="main-section" id="definitions">
+        <header>Definitions</header>
+        <p>
+          To start with, let's define some of the more common terms used in
+          algebra:
+        </p>
+        <ul>
+          <li>
+            <b>Variable:</b> A variable is an unknown value, usually represented
+            by a letter.
+          </li>
+          <li>
+            <b>Expression:</b> Essentially a mathematical object. For the
+            purpose of this tutorial, an expression is one part of an equation.
+          </li>
+          <li>
+            <b>Equation:</b> An equation is a mathematical argument in which two
+            expressions result in the same value.
+          </li>
+        </ul>
+      </section>
+      <section class="main-section" id="examples">
+        <header>Examples</header>
+        <p>
+          Sometimes it is easier to understand the definitions when you have a
+          physical example to look at. Here is an example of the above terms.<br /><br />
+          <code>x + 5 = 12 </code><br /><br />
+          In this above example, we have:
+        </p>
+        <ul>
+          <li><b>Variable:</b> The variable in the example is "x".</li>
+          <li>
+            <b>Expression:</b> There are two expressions in this example. They
+            are "x+5" and "12".
+          </li>
+          <li>
+            <b>Equation:</b> The entire example, "x+5=12", is an equation.
+          </li>
+        </ul>
+      </section>
+      <section class="main-section" id="solving_equations">
+        <header>Solving Equations</header>
+        <p>
+          The primary use for algebra is to determine an unknown value, the
+          "variable", with the information provided. Continuing to use our
+          example from above, we can find the value of the variable "x".<br /><br />
+          <code>x + 5 = 12 </code><br /><br />
+          In an equation, both sides result in the same value. So you can
+          manipulate the two expressions however you need, as long as you
+          perform the same operation (or change) to each side. You do this
+          because the goal when solving an equation is to
+          <b
+            >get the variable into its own expression, or by itself on one side
+            of the = sign.</b
+          ><br />For this example, we want to remove the "+5" so the "x" is
+          alone. To do this, we can <em>subtract 5</em>, because subtraction is
+          the opposite operation to addition. But remember, we have to perform
+          the same operation to both sides of the equation. Now our equation
+          looks like this.<br /><br />
+          <code>x + 5 - 5 = 12 - 5</code><br /><br />
+          The equation looks like a mess right now, because we haven't completed
+          the operations. We can <b>simplify</b> this equation to make it easier
+          to read by performing the operations "5-5" and "12-5". The result
+          is:<br /><br />
+          <code>x = 7</code><br /><br />
+          We now have our solution to this equation!
+        </p>
+      </section>
+      <section class="main-section" id="solving_equations_ii">
+        <header>Solving Equations II</header>
+        <p>
+          Let us look at a slightly more challenging equation.<br /><br />
+          <code>3x + 4 = 13</code><br /><br />
+          Again we can start with subtraction. In this case, we want to subtract
+          4 from each side of the equation. We will also go ahead and simplify
+          with each step. So now we have:<br /><br />
+          <code>3x = 9</code><br /><br />
+          "3x" translates to "3*x", where the "*" symbol indicates
+          multiplication. We use the "*" to avoid confusion, as the "x" is now a
+          variable instead of a multiplication symbol. The opposite operation
+          for multiplication is division, so we need to
+          <b>divide each expression by 3</b>.<br /><br />
+          <code>x = 3</code><br /><br />
+          And now we have our solution!
+        </p>
+      </section>
+      <section class="main-section" id="solving_equations_iii">
+        <header>Solving Equations III</header>
+        <p>
+          Now we are getting in to more complex operations. Here is another
+          equation for us to look at:<br /><br />
+          <code>x^2 - 8 = 8</code><br /><br />
+          Our very first step will be to <b>add</b> 8 to each side. This is
+          different from our previous examples, where we had to subtract. But
+          remember, our goal is to get the variable alone by performing opposite
+          operations.<br /><br />
+          <code>x^2 = 16</code><br /><br />
+          But what does the "^2" mean? The "^" symbol is used to denote
+          exponents in situations where superscript is not available. When
+          superscript <b>is</b> available, you would see it as x<sup>2</sup>.
+          For the sake of this project, however, we will use the "^" symbol.<br />
+          An exponent tells you how many times the base (in our case, "x") is
+          multiplied by itself. So, "x^2" would be the same as "x*x". Now the
+          opposite function of multiplication is division, but we would have to
+          <b>divide both sides by "x"</b>. We do not want to do this, as that
+          would put an "x" on the other side of the equation. So instead, we
+          need to use the root operation! For an exponent of "2", we call this
+          the "square root" and denote it with "√". Our equation is now:
+          <br /><br />
+          <code>x = √9</code><br /><br />
+          Performing a root operation by hand can be a tedious process, so we
+          recommend using a calculator when necessary. However, we are lucky in
+          that "9" is a
+          <a href="https://en.wikipedia.org/wiki/Square_number"
+            >perfect square</a
+          >, so we do not need to calculate anything. Instead, we find our
+          answer to be:<br /><br />
+          <code>x = 3</code>
+        </p>
+      </section>
+      <section class="main-section" id="system_of_equations">
+        <header>System of Equations</header>
+        <p>
+          As you explore your algebra studies further, you may start to run
+          across equations with more than one variable. The first such equations
+          will likely look like:<br /><br />
+          <code>y = 3x</code><br /><br />
+          An equation like this does <b>not have one single solution</b>.
+          Rather, there are a series of values for which the equation is true.
+          For example, if "x=3" and "y=9", the equation is true. These equations
+          are usually used to plot a graph. <br />
+          Getting more complicated, though, you may be given a <b>pair</b> of
+          equations. This is called a "system of equations", and CAN be solved.
+          Let's look at how we do this! Consider the following system of
+          equations:<br /><br />
+          <code>y = 3x | y - 6 = x</code>
+          A system of equations IS solvable, but it is a multi-step process. To
+          get started, we need to chose a variable we are solving for. Let's
+          solve for "x" first. From the second equation, we know that "x" equals
+          "y - 6", but we cannot simplify that further because we do not have a
+          value for "y". Except, thanks to the system of equations, we DO have a
+          value for "y". We know that "y" equals "3x". So, looking at our second
+          equation, we can replace "y" with "3x" because they have the same
+          value. We then get:<br /><br />
+          <code>3x - 6 = x</code><br /><br />
+          Now we can solve for "x"! We start by adding 6 to each side.<br /><br />
+          <code>3x = x + 6</code><br /><br />
+          We still need to get "x" by itself, so we subtract "x" from both sides
+          and get:<br /><br />
+          <code>2x = 6</code><br /><br />
+          If this confuses you, remember that "3x" is the same as "x+x+x".
+          Subtract an "x" from that and you get "x+x", or "2x". Now we divide
+          both sides by 2 and have our value for x!<br /><br />
+          <code>x = 3</code><br /><br />
+          However, our work is not done yet. We still need to find the value for
+          "y". Let's go back to our first equation:<br /><br />
+          <code>y = 3x</code><br /><br />
+          We have a value for "x" now, so let's see what happens if we put that
+          value in.<br /><br />
+          <code>y = 3*3</code><br /><br />
+          We perform the multiplication and discover that "y=9"! Our solution to
+          this system of equations then is:<br /><br />
+          <code>x = 3 and y = 9</code><br /><br />
+        </p>
+      </section>
+      <section class="main-section" id="try_it_yourself!">
+        <header>Try it Yourself!</header>
+        <p>Coming Soon!</p>
+        <p>Keep an eye out for new additions!</p>
+      </section>
+      <section class="main-section" id="more_information">
+        <header>More Information</header>
+        <p>Check out the following links for more information!</p>
+        <ul>
+          <li>
+            <a href="https://www.wolframalpha.com/examples/mathematics/algebra/"
+              >Wolfram Alpha</a
+            >
+            is a great source for multiple mathematic fields.
+          </li>
+          <li>
+            <a href="https://en.wikipedia.org/wiki/Algebra"
+              >Wikipedia's Algebra page</a
+            >
+            for more general information.
+          </li>
+        </ul>
+      </section>
+    </main>
+  </body>
+  <footer>
+    <a href="../">Return to Project List</a> |
+    <a href="https://www.nhcarrigan.com">Return to HomePage</a>
+  </footer>
+</html>
+```
+
+```css
+* {
+  background-color: #3a3240;
+}
+a {
+  color: #92869c;
+}
+a:hover {
+  background-color: #92869c;
+  color: #3a3240;
+}
+#navbar {
+  border-style: solid;
+  border-width: 5px;
+  border-color: #92869c;
+  height: 100%;
+  top: -5px;
+  left: -5px;
+  padding: 5px;
+  text-align: center;
+  color: #92869c
+}
+@media (min-width: 480px) {
+  #navbar {
+    position: fixed;
+  }
+}
+main {
+  margin-left: 220px;
+  color: #92869c
+}
+header {
+  font-size: 20pt;
+}
+code {
+  background-color: #92869c;
+  border-style: dashed;
+  border-width: 2px;
+  border-color: #92869c;
+  padding: 5px;
+  color: black;
+}
+footer {
+  text-align: center;
+}
+```
diff --git a/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md
new file mode 100644
index 00000000000..7b0ca1f4c23
--- /dev/null
+++ b/curriculum/challenges/arabic/01-responsive-web-design/responsive-web-design-projects/build-a-tribute-page.md
@@ -0,0 +1,325 @@
+---
+id: bd7158d8c442eddfaeb5bd18
+title: Build a Tribute Page
+challengeType: 14
+forumTopicId: 301147
+dashedName: build-a-tribute-page
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to <a href="https://tribute-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://tribute-page.freecodecamp.rocks</a>
+
+**User Stories:**
+
+1. Your tribute page should have a `main` element with a corresponding `id` of `main`, which contains all other elements
+1. You should see an element with an `id` of `title`, which contains a string (i.e. text), that describes the subject of the tribute page (e.g. "Dr. Norman Borlaug")
+1. You should see either a `figure` or a `div` element with an `id` of `img-div`
+1. Within the `#img-div` element, you should see an `img` element with a corresponding `id="image"`
+1. Within the `#img-div` element, you should see an element with a corresponding `id="img-caption"` that contains textual content describing the image shown in `#img-div`
+1. You should see an element with a corresponding `id="tribute-info"`, which contains textual content describing the subject of the tribute page
+1. You should see an `a` element with a corresponding `id="tribute-link"`, which links to an outside site, that contains additional information about the subject of the tribute page. HINT: You must give your element an attribute of `target` and set it to `_blank` in order for your link to open in a new tab
+1. Your `#image` should use `max-width` and `height` properties to resize responsively, relative to the width of its parent element, without exceeding its original size
+1. Your `img` element should be centered within its parent element
+
+Fulfill the user stories and pass all the tests below to complete this project. Give it your own personal style. Happy Coding!
+
+**Note:** Be sure to add `<link rel="stylesheet" href="styles.css">` in your HTML to link your stylesheet and apply your CSS
+
+# --hints--
+
+You should have a `main` element with an `id` of `main`.
+
+```js
+const el = document.getElementById('main')
+assert(!!el && el.tagName === 'MAIN')
+```
+
+Your `#img-div`, `#image`, `#img-caption`, `#tribute-info`, and `#tribute-link` should all be descendants of `#main`.
+
+```js
+const el1 = document.querySelector('#main #img-div')
+const el2 = document.querySelector('#main #image')
+const el3 = document.querySelector('#main #img-caption')
+const el4 = document.querySelector('#main #tribute-info')
+const el5 = document.querySelector('#main #tribute-link')
+assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5)
+```
+
+You should have an element with an `id` of `title`.
+
+```js
+const el = document.getElementById('title')
+assert(!!el)
+```
+
+Your `#title` should not be empty.
+
+```js
+const el = document.getElementById('title')
+assert(!!el && el.innerText.length > 0)
+
+```
+
+You should have a `figure` or `div` element with an `id` of `img-div`.
+
+```js
+const el = document.getElementById('img-div')
+assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE'))
+```
+
+You should have an `img` element with an `id` of `image`.
+
+```js
+const el = document.getElementById('image')
+assert(!!el && el.tagName === 'IMG')
+```
+
+Your `#image` should be a descendant of `#img-div`.
+
+```js
+const el = document.querySelector('#img-div #image')
+assert(!!el)
+```
+
+You should have a `figcaption` or `div` element with an `id` of `img-caption`.
+
+```js
+const el = document.getElementById('img-caption')
+assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION'))
+```
+
+Your `#img-caption` should be a descendant of `#img-div`.
+
+```js
+const el = document.querySelector('#img-div #img-caption')
+assert(!!el)
+```
+
+Your `#img-caption` should not be empty.
+
+```js
+const el = document.getElementById('img-caption')
+assert(!!el && el.innerText.length > 0)
+```
+
+You should have an element with an `id` of `tribute-info`.
+
+```js
+const el = document.getElementById('tribute-info')
+assert(!!el)
+```
+
+Your `#tribute-info` should not be empty.
+
+```js
+const el = document.getElementById('tribute-info')
+assert(!!el && el.innerText.length > 0)
+```
+
+You should have an `a` element with an `id` of `tribute-link`.
+
+```js
+const el = document.getElementById('tribute-link')
+assert(!!el && el.tagName === 'A')
+```
+
+Your `#tribute-link` should have an `href` attribute and value.
+
+```js
+const el = document.getElementById('tribute-link')
+assert(!!el && !!el.href && el.href.length > 0)
+```
+
+Your `#tribute-link` should have a `target` attribute set to `_blank`.
+
+```js
+const el = document.getElementById('tribute-link')
+assert(!!el && el.target === '_blank')
+```
+
+Your `img` element should have a `display` of `block`.
+
+```js
+const img = document.getElementById('image');
+const imgStyle = window.getComputedStyle(img);
+const style = imgStyle?.getPropertyValue('display')
+assert(style === 'block')
+```
+
+Your `#image` should have a `max-width` of `100%`.
+
+```js
+const img = document.getElementById('image');
+const imgStyle = window.getComputedStyle(img);
+const style = imgStyle?.getPropertyValue('max-width')
+assert(style === '100%')
+```
+
+Your `#image` should have a `height` of `auto`.
+
+```js
+// taken from the testable-projects repo
+const img = document.getElementById('image');
+const imgStyle = window.getComputedStyle(img);
+const oldDisplayValue = imgStyle.getPropertyValue('display');
+const oldDisplayPriority = imgStyle.getPropertyPriority('display');
+img?.style.setProperty('display', 'none', 'important');
+const heightValue = imgStyle?.getPropertyValue('height')
+img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
+assert(heightValue === 'auto')
+```
+
+Your `#image` should be centered within its parent.
+
+```js
+// taken from the testable-projects repo
+const img = document.getElementById('image'),
+  imgParent = img?.parentElement,
+  imgLeft = img?.getBoundingClientRect().left,
+  imgRight = img?.getBoundingClientRect().right,
+  parentLeft = imgParent?.getBoundingClientRect().left,
+  parentRight = imgParent?.getBoundingClientRect().right,
+  leftMargin = imgLeft - parentLeft,
+  rightMargin = parentRight - imgRight;
+assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+```css
+
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Pacifico"
+      rel="stylesheet"
+
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Lobster"
+      rel="stylesheet"
+
+    />
+    <link href="styles.css" rel="stylesheet" />
+    <title>Tribute Page</title>
+  </head>
+  <body>
+    <h1>Tribute Page</h1>
+    <p>The below card was designed as a tribute page for freeCodeCamp.</p>
+    <main id="main">
+      <div id="img-div">
+        <img
+          id="image"
+          class="border"
+          src="https://upload.wikimedia.org/wikipedia/en/5/53/Pok%C3%A9mon_Togepi_art.png"
+          alt="An image of Togepi"
+        />
+        <figcaption id="img-caption">Togepi, happy as always.</figcaption>
+      </div>
+      <h2 id="title">Togepi</h2>
+      <hr />
+      <div id="tribute-info">
+        <p>
+          Togepi was first discovered in the Johto region, when Ash Ketchum
+          discovered a mysterious egg. However, when the egg hatched, Togepi saw
+          Ash's friend Misty first and imprinted on her. Like many other
+          creatures, this imprinting process created a bond and Togepi views
+          Misty as his mother.
+        </p>
+        <p>
+          Togepi is a very childlike Pokemon, and is very emotionally
+          expressive. He demonstrates extreme levels of joy and sadness.
+        </p>
+        <hr />
+        <p><u>Battle Information</u></p>
+        <ul style="list-style-type: none">
+          <li>Type: Fairy</li>
+          <li>Evolutions: Togepi -> Togetic -> Togekiss</li>
+          <li>Moves: Growl, Pound, Sweet Kiss, Charm</li>
+          <li>Weaknesses: Poison, Steel</li>
+          <li>Resistances: Dragon</li>
+        </ul>
+        <p>
+          Check out this
+          <a
+            id="tribute-link"
+            href="https://bulbapedia.bulbagarden.net/wiki/Togepi_(Pok%C3%A9mon)"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Bulbapedia article on Togepi</a
+          >
+          for more information on this great Pokemon.
+        </p>
+      </div>
+    </main>
+  </body>
+  <footer>
+    <a href="../">Return to Project List</a> |
+    <a href="https://www.nhcarrigan.com">Return to HomePage</a>
+  </footer>
+</html>
+```
+
+```css
+body {
+  background-color: #3a3240;
+  color: white;
+}
+main {
+  background-color: #92869c;
+  font-family: Lobster;
+  max-width: 500px;
+  margin: 20px auto;
+  color: black;
+  border-radius: 50px;
+  box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
+}
+h2 {
+  text-align: center;
+  font-size: 20pt;
+  font-family: Pacifico;
+}
+body {
+  text-align: center;
+  font-size: 12pt;
+}
+footer {
+  text-align: center;
+  font-size: 10pt;
+}
+.border {
+  border-color: black;
+  border-width: 5px;
+  border-style: solid;
+}
+#image {
+  height: auto;
+  display: block;
+  margin: auto;
+  max-width: 100%;
+  border-radius: 50%;
+}
+#img-caption {
+  font-size: 10pt;
+}
+a:not(#tribute-link) {
+  color: white;
+}
+hr {
+  border-color: black;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who.md
new file mode 100644
index 00000000000..8b60b049762
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/boo-who.md
@@ -0,0 +1,97 @@
+---
+id: a77dbc43c33f39daa4429b4f
+title: ما هي المقارنة (Boo who)
+challengeType: 1
+forumTopicId: 16000
+dashedName: boo-who
+---
+
+# --description--
+
+تحقق مما إذا كانت القيمة تصنف كقيمة boolean المنطقية. أنتج القيم `true` أو `false`.
+
+قيم المقارنة (Boolean primitives) تكون `true` و `false`.
+
+# --hints--
+
+يجب أن ينتج `booWho(true)` القيمة باسم `true`.
+
+```js
+assert.strictEqual(booWho(true), true);
+```
+
+`booWho(false)` يجب أن ينتج `true`.
+
+```js
+assert.strictEqual(booWho(false), true);
+```
+
+`booWho([1, 2, 3])` يجب أن ينتج `false`.
+
+```js
+assert.strictEqual(booWho([1, 2, 3]), false);
+```
+
+`booWho([].slice)` يجب أن يتنج `false`.
+
+```js
+assert.strictEqual(booWho([].slice), false);
+```
+
+`booWho({ "a": 1 })` يجب أن ينتج `false`.
+
+```js
+assert.strictEqual(booWho({ a: 1 }), false);
+```
+
+`booWho(1)` يجب أن ينتج `false`.
+
+```js
+assert.strictEqual(booWho(1), false);
+```
+
+`booWho(NaN)` يجب أن ينتج `false`.
+
+```js
+assert.strictEqual(booWho(NaN), false);
+```
+
+`booWho("a")` يجب أن ينتج `false`.
+
+```js
+assert.strictEqual(booWho('a'), false);
+```
+
+`booWho("true")` يجب أن ينتج `false`.
+
+```js
+assert.strictEqual(booWho('true'), false);
+```
+
+`booWho("false")` يجب أن ينتج `false`.
+
+```js
+assert.strictEqual(booWho('false'), false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function booWho(bool) {
+  return bool;
+}
+
+booWho(null);
+```
+
+# --solutions--
+
+```js
+function booWho(bool) {
+  return typeof bool === "boolean";
+}
+
+booWho(null);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/chunky-monkey.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/chunky-monkey.md
new file mode 100644
index 00000000000..86d93fd119f
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/chunky-monkey.md
@@ -0,0 +1,110 @@
+---
+id: a9bd25c716030ec90084d8a1
+title: تقسيم المصفوفة إلي مجموعات
+challengeType: 1
+forumTopicId: 16005
+dashedName: chunky-monkey
+---
+
+# --description--
+
+كتابة وظيفة (function) تقسم القائمة (array) (الحَجَّة الأولى) إلى مجموعات لها طول `size` (الحَجَّة الثانية) وتنشئهما كقائمة (array) ثنائية الأبعاد.
+
+# --hints--
+
+`chunkArrayInGroups(["a", "b", "c", "d"], 2)` يجب أن ينتج `[["a", "b"], ["c", "d"]]`.
+
+```js
+assert.deepEqual(chunkArrayInGroups(['a', 'b', 'c', 'd'], 2), [
+  ['a', 'b'],
+  ['c', 'd']
+]);
+```
+
+`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3)`> يجب أن ينتج `[[0, 1, 2], [3, 4, 5]]`.
+
+```js
+assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 3), [
+  [0, 1, 2],
+  [3, 4, 5]
+]);
+```
+
+`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2)` يجب أن ينتج `[[0, 1], [2, 3], [4, 5]]`.
+
+```js
+assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 2), [
+  [0, 1],
+  [2, 3],
+  [4, 5]
+]);
+```
+
+`chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4)` يجب أن ينتج `[[0, 1, 2, 3], [4, 5]]`.
+
+```js
+assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5], 4), [
+  [0, 1, 2, 3],
+  [4, 5]
+]);
+```
+
+`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3)` يجب أن ينتج `[[0, 1, 2], [3, 4, 5], [6]]`.
+
+```js
+assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6], 3), [
+  [0, 1, 2],
+  [3, 4, 5],
+  [6]
+]);
+```
+
+`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4)` يجب أن ينتج `[[0, 1, 2, 3], [4, 5, 6, 7], [8]]`.
+
+```js
+assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 4), [
+  [0, 1, 2, 3],
+  [4, 5, 6, 7],
+  [8]
+]);
+```
+
+`chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2)` يجب أن ينتج `[[0, 1], [2, 3], [4, 5], [6, 7], [8]]`.
+
+```js
+assert.deepEqual(chunkArrayInGroups([0, 1, 2, 3, 4, 5, 6, 7, 8], 2), [
+  [0, 1],
+  [2, 3],
+  [4, 5],
+  [6, 7],
+  [8]
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function chunkArrayInGroups(arr, size) {
+  return arr;
+}
+
+chunkArrayInGroups(["a", "b", "c", "d"], 2);
+```
+
+# --solutions--
+
+```js
+function chunkArrayInGroups(arr, size) {
+  let out = [];
+
+  for (let i = 0; i < arr.length; i += size) {
+    out.push(arr.slice(i, i + size));
+  }
+
+  return out;
+}
+
+chunkArrayInGroups(["a", "b", "c", "d"], 2);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/confirm-the-ending.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/confirm-the-ending.md
new file mode 100644
index 00000000000..8e44a491f3c
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/confirm-the-ending.md
@@ -0,0 +1,113 @@
+---
+id: acda2fb1324d9b0fa741e6b5
+title: تيقن من الأخير
+challengeType: 1
+forumTopicId: 16006
+dashedName: confirm-the-ending
+---
+
+# --description--
+
+تحقق مما إذا كان string (الحَجَّة الأولى، `str`) أخر string المطلوب (الحَجَّة الثانية، `target`).
+
+*يمكنك* حل هذا التحدي بطريقة `.endsWith()`، التي تم تقديمها في ES2015. لكن لغرض هذا التحدي، نود أن تستخدموا واحدة من طرق subnstrings فى JavaScript بدلاً من ذلك.
+
+# --hints--
+
+`confirmEnding("Bastian", "n")` يجب أن ينتج `true`.
+
+```js
+assert(confirmEnding('Bastian', 'n') === true);
+```
+
+`confirmEnding("Congratulation", "on")` يجب أن ينتج `true`.
+
+```js
+assert(confirmEnding('Congratulation', 'on') === true);
+```
+
+`confirmEnding("Connor", "n")` يجب أن ينتج `false`.
+
+```js
+assert(confirmEnding('Connor', 'n') === false);
+```
+
+`confirmEnding("Walking on water and developing software from a specification are easy if both are frozen", "specification")` يجب أن ينتج `false`.
+
+```js
+assert(
+  confirmEnding(
+    'Walking on water and developing software from a specification are easy if both are frozen',
+    'specification'
+  ) === false
+);
+```
+
+`confirmEnding("He has to give me a new name", "name")` يجب أن ينتج `true`.
+
+```js
+assert(confirmEnding('He has to give me a new name', 'name') === true);
+```
+
+`confirmEnding("Open sesame", "same")` يجب أن ينتج `true`.
+
+```js
+assert(confirmEnding('Open sesame', 'same') === true);
+```
+
+`confirmEnding("Open sesame", "sage")` يجب أن ينتج `false`.
+
+```js
+assert(confirmEnding('Open sesame', 'sage') === false);
+```
+
+`confirmEnding("Open sesame", "game")` يجب أن ينتج `false`.
+
+```js
+assert(confirmEnding('Open sesame', 'game') === false);
+```
+
+`confirmEnding("If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing", "mountain")` يجب أن ينتج `false`.
+
+```js
+assert(
+  confirmEnding(
+    'If you want to save our world, you must hurry. We dont know how much longer we can withstand the nothing',
+    'mountain'
+  ) === false
+);
+```
+
+`confirmEnding("Abstraction", "action")` يجب أن ينتج `true`.
+
+```js
+assert(confirmEnding('Abstraction', 'action') === true);
+```
+
+برنامجك يجب ألا يستخدم طريقة مبنية داخلياً (built-in method) باسم `.endsWith()` لحل التحدي.
+
+```js
+assert(!/\.endsWith\(.*?\)\s*?;?/.test(code) && !/\['endsWith'\]/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function confirmEnding(str, target) {
+  return str;
+}
+
+confirmEnding("Bastian", "n");
+```
+
+# --solutions--
+
+```js
+function confirmEnding(str, target) {
+  return str.substring(str.length - target.length) === target;
+}
+
+confirmEnding("Bastian", "n");
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md
new file mode 100644
index 00000000000..a4f5d5ea085
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/convert-celsius-to-fahrenheit.md
@@ -0,0 +1,75 @@
+---
+id: 56533eb9ac21ba0edf2244b3
+title: تحويل الدرجات المئوية (Celsius) إلى فهرنهايت (Fahrenheit)
+challengeType: 1
+forumTopicId: 16806
+dashedName: convert-celsius-to-fahrenheit
+---
+
+# --description--
+
+معادلة تحويل درجة الحرارة من الدرجة المئوية إلى درجة فهرنهايت هي: درجة الحرارة المئوية مضروبة في `9/5`, مضاف إليها `32`.
+
+لديك المتغير `celsius` ويمثل درجة الحرارة المئوية. استخدم المتغير `fahrenheit` الذي سبق تعريفه وعيّن درجة حرارة فهرنهايت المعادلة لدرجة الحرارة المئوية المعطاة. استخدم المعادلة في السطر الأول، لتحويل درجة الحرارة المئوية إلى فهرنهايت.
+
+# --hints--
+
+`convertCtoF(0)` يجب أن ينتج رقماً
+
+```js
+assert(typeof convertCtoF(0) === 'number');
+```
+
+`convertCtoF(-30)` يجب أن ينتج قيمة `-22`
+
+```js
+assert(convertCtoF(-30) === -22);
+```
+
+`convertCtoF(-10)` يجب أن ينتج قيمة `14`
+
+```js
+assert(convertCtoF(-10) === 14);
+```
+
+`convertCtoF(0)` يجب أن ينتج قيمة `32`
+
+```js
+assert(convertCtoF(0) === 32);
+```
+
+`convertCtoF(20)` يجب أن ينتج قيمة `68`
+
+```js
+assert(convertCtoF(20) === 68);
+```
+
+`convertCtoF(30)` يجب أن ينتج قيمة `86`
+
+```js
+assert(convertCtoF(30) === 86);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function convertCtoF(celsius) {
+  let fahrenheit;
+  return fahrenheit;
+}
+
+convertCtoF(30);
+```
+
+# --solutions--
+
+```js
+function convertCtoF(celsius) {
+  let fahrenheit = celsius * 9/5 + 32;
+  return fahrenheit;
+}
+
+convertCtoF(30);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/factorialize-a-number.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/factorialize-a-number.md
new file mode 100644
index 00000000000..4b339f7c27f
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/factorialize-a-number.md
@@ -0,0 +1,73 @@
+---
+id: a302f7aae1aa3152a5b413bc
+title: عامل الضرب للرَّقَم (Factorialize a Number)
+challengeType: 1
+forumTopicId: 16013
+dashedName: factorialize-a-number
+---
+
+# --description--
+
+أرجع عامل الضرب للرقم الصحيح الذي تم تزويدك به.
+
+إذا كان الرَّقَم الصحيح مُمَثل بحرف `n`، عامل الضرب للرقم هو حاصل ضرب كل الأرقام الموجبة التي هي أصغر أو تساوي الرقم`n`.
+
+عوامل الضرب غالبا ما يتم تمثيله كالترميز التالي `n!`
+
+مثال: `5! = 1 * 2 * 3 * 4 * 5 = 120`
+
+فقط الأرقام التي هي أكبر أو تساوي الصفر سيتم إدخالها في الوظيفة (function).
+
+# --hints--
+
+`factorialize(5)` يجب أن ينتج رقماً.
+
+```js
+assert(typeof factorialize(5) === 'number');
+```
+
+`factorialize(5)` يجب أن ينتج `120`.
+
+```js
+assert(factorialize(5) === 120);
+```
+
+`factorialize(10)` يجب أن ينتج `3628800`.
+
+```js
+assert(factorialize(10) === 3628800);
+```
+
+`factorialize(20)` يجب أن ينتج `2432902008176640000`.
+
+```js
+assert(factorialize(20) === 2432902008176640000);
+```
+
+`factorialize(0)` يجب أن ينتج `1`.
+
+```js
+assert(factorialize(0) === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function factorialize(num) {
+  return num;
+}
+
+factorialize(5);
+```
+
+# --solutions--
+
+```js
+function factorialize(num) {
+  return num < 1 ? 1 : num * factorialize(num - 1);
+}
+
+factorialize(5);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md
new file mode 100644
index 00000000000..38c86fc3863
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md
@@ -0,0 +1,71 @@
+---
+id: adf08ec01beb4f99fc7a68f2
+title: التنقل بين قيم زائفة (Falsy Bouncer)
+challengeType: 1
+forumTopicId: 16014
+dashedName: falsy-bouncer
+---
+
+# --description--
+
+أزل جميع القيم الزائفة falsy من القائمة (array). أنتج قائمة (array) جديدة ولا تغير قيمة القائمة (array) الأصلية.
+
+القيم الزائفة Falsy في لغة JavaScript هي `false`, `null`, `0`, `""`, `undefined`, و `NaN`.
+
+تلميح: حاول تحويل كل قيمة إلى Boolean.
+
+# --hints--
+
+`bouncer([7, "ate", "", false, 9])` يجب أن ينتج `[7, "ate", 9]`.
+
+```js
+assert.deepEqual(bouncer([7, 'ate', '', false, 9]), [7, 'ate', 9]);
+```
+
+`bouncer(["a", "b", "c"])` يجب أن تنتج `["a", "b", "c"]`.
+
+```js
+assert.deepEqual(bouncer(['a', 'b', 'c']), ['a', 'b', 'c']);
+```
+
+`bouncer([false, null, 0, NaN, undefined, ""])`يجب أن تنتج `[]`.
+
+```js
+assert.deepEqual(bouncer([false, null, 0, NaN, undefined, '']), []);
+```
+
+`bouncer([null, NaN, 1, 2, undefined])` يجب أن تنتج `[1, 2]`.
+
+```js
+assert.deepEqual(bouncer([null, NaN, 1, 2, undefined]), [1, 2]);
+```
+
+لا يجب عليك تغيير `arr`.
+
+```js
+const arr = ['a', false, 0, 'Naomi'];
+bouncer(arr);
+assert.deepEqual(arr, ['a', false, 0, 'Naomi'])
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function bouncer(arr) {
+  return arr;
+}
+
+bouncer([7, "ate", "", false, 9]);
+```
+
+# --solutions--
+
+```js
+function bouncer(arr) {
+  return arr.filter(e => e);
+}
+
+bouncer([7, "ate", "", false, 9]);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/find-the-longest-word-in-a-string.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/find-the-longest-word-in-a-string.md
new file mode 100644
index 00000000000..fd3d1825b31
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/find-the-longest-word-in-a-string.md
@@ -0,0 +1,87 @@
+---
+id: a26cbbe9ad8655a977e1ceb5
+title: جد أطول كلمة في المقطع (String)
+challengeType: 1
+forumTopicId: 16015
+dashedName: find-the-longest-word-in-a-string
+---
+
+# --description--
+
+أرجع طول (length) أطول كلمة في الجملة المزودة.
+
+يجب أن تكون القيمة التي إرجاعاتها رقما (number).
+
+# --hints--
+
+`findLongestWordLength("The quick brown fox jumped over the lazy dog")` يجب أن ينتج رقما.
+
+```js
+assert(
+  typeof findLongestWordLength(
+    'The quick brown fox jumped over the lazy dog'
+  ) === 'number'
+);
+```
+
+`findLongestWordLength("The quick brown fox jumped over the lazy dog")` يجب أن ينتج `6`.
+
+```js
+assert(
+  findLongestWordLength('The quick brown fox jumped over the lazy dog') === 6
+);
+```
+
+`findLongestWordLength("May the force be with you")` يجب أن ينتج `5`.
+
+```js
+assert(findLongestWordLength('May the force be with you') === 5);
+```
+
+`findLongestWordLength("Google do a barrel roll")` يجب أن ينتج `6`.
+
+```js
+assert(findLongestWordLength('Google do a barrel roll') === 6);
+```
+
+`findLongestWordLength("What is the average airspeed velocity of an unladen swallow")`يجب أن ينتج `8`.
+
+```js
+assert(
+  findLongestWordLength(
+    'What is the average airspeed velocity of an unladen swallow'
+  ) === 8
+);
+```
+
+`findLongestWordLength("What if we try a super-long word such as otorhinolaryngology")` يجب أن ينتج `19`.
+
+```js
+assert(
+  findLongestWordLength(
+    'What if we try a super-long word such as otorhinolaryngology'
+  ) === 19
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function findLongestWordLength(str) {
+  return str.length;
+}
+
+findLongestWordLength("The quick brown fox jumped over the lazy dog");
+```
+
+# --solutions--
+
+```js
+function findLongestWordLength(str) {
+  return str.split(' ').sort((a, b) => b.length - a.length)[0].length;
+}
+
+findLongestWordLength("The quick brown fox jumped over the lazy dog");
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/finders-keepers.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/finders-keepers.md
new file mode 100644
index 00000000000..fd7587b03af
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/finders-keepers.md
@@ -0,0 +1,58 @@
+---
+id: a6e40f1041b06c996f7b2406
+title: من يجد شيئا يحتفظ به Finders Keepers
+challengeType: 1
+forumTopicId: 16016
+dashedName: finders-keepers
+---
+
+# --description--
+
+أنشئ وظيفة تبحث في القائمة `arr` وترجع العنصر الأول فيها الذي يجتاز 'اختبار الحقيقة'. وهذا يعني أنه نظراً لعنصر `x`، يتم اجتياز 'اختبار الحقيقة' إذا كان `func(x)` صحيحا `true`. إذا لم ينجح أي عنصر في الاختبار، انتج `undefined`.
+
+# --hints--
+
+يجب إن `findElement([1, 3, 5, 8, 9, 10], function(num) { return num % 2 === 0; })` ينتج `8`.
+
+```js
+assert.strictEqual(
+  findElement([1, 3, 5, 8, 9, 10], function (num) {
+    return num % 2 === 0;
+  }),
+  8
+);
+```
+
+يجب إن `findElement([1, 3, 5, 9], function(num) { return num % 2 === 0; })` ينتج `undefined`.
+
+```js
+assert.strictEqual(
+  findElement([1, 3, 5, 9], function (num) {
+    return num % 2 === 0;
+  }),
+  undefined
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function findElement(arr, func) {
+  let num = 0;
+  return num;
+}
+
+findElement([1, 2, 3, 4], num => num % 2 === 0);
+```
+
+# --solutions--
+
+```js
+function findElement(arr, func) {
+  return arr.filter(func)[0];
+}
+
+findElement([1, 2, 3, 4], num => num % 2 === 0);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/mutations.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/mutations.md
new file mode 100644
index 00000000000..e8e3bf0647c
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/mutations.md
@@ -0,0 +1,117 @@
+---
+id: af2170cad53daa0770fabdea
+title: التحولات (Mutations)
+challengeType: 1
+forumTopicId: 16025
+dashedName: mutations
+---
+
+# --description--
+
+ققم يإرجاع `true` إذا كانت المقطع النصي (string) في العنصر الأول من القائمة تحتوي على جميع الأحرف من القطع النصي (string) في العنصر الثاني من القائمة.
+
+على سبيل المثال، `["hello", "Hello"]`, يجب أن ينتج `true` لأن جميع الحروف في المقطع النصي (string) الثانية موجودة في المقطع النصي (string) الأولى، وذلك بتجاهل حالة الحروف سواء كانت كبيرة أو صغيرة.
+
+الحجج `["hello", "hey"]` يجب أن ينتح `false` لأن المقطع النصي (string) باسم `hello` لا تحتوي على حرف `y`.
+
+أخراً, يجب إن`["Alien", "line"]` ينتج `true` لان كل الحروف في `line` موجودة في `Alien`.
+
+# --hints--
+
+يجب إن `mutation(["hello", "hey"])` ينتج `false`.
+
+```js
+assert(mutation(['hello', 'hey']) === false);
+```
+
+يجب إن `mutation(["hello", "Hello"])` ينتج `true`.
+
+```js
+assert(mutation(['hello', 'Hello']) === true);
+```
+
+يجب إن `mutation(["zyxwvutsrqponmlkjihgfedcba", "qrstu"])` ينتج `true`.
+
+```js
+assert(mutation(['zyxwvutsrqponmlkjihgfedcba', 'qrstu']) === true);
+```
+
+يجب إن `mutation(["Mary", "Army"])` ينتج `true`.
+
+```js
+assert(mutation(['Mary', 'Army']) === true);
+```
+
+يجب إن `mutation(["Mary", "Aarmy"])` ينتج `true`.
+
+```js
+assert(mutation(['Mary', 'Aarmy']) === true);
+```
+
+يجب إن `mutation(["Alien", "line"])` ينتج `true`.
+
+```js
+assert(mutation(['Alien', 'line']) === true);
+```
+
+يجب إن `mutation(["floor", "for"])` ينتج `true`.
+
+```js
+assert(mutation(['floor', 'for']) === true);
+```
+
+يجب إن `mutation(["hello", "neo"])` ينتج `false`.
+
+```js
+assert(mutation(['hello', 'neo']) === false);
+```
+
+يجب إن `mutation(["voodoo", "no"])` ينتج `false`.
+
+```js
+assert(mutation(['voodoo', 'no']) === false);
+```
+
+يجب إن `mutation(["ate", "date"])` ينتج `false`.
+
+```js
+assert(mutation(['ate', 'date']) === false);
+```
+
+يجب إن `mutation(["Tiger", "Zebra"])` ينتج `false`.
+
+```js
+assert(mutation(['Tiger', 'Zebra']) === false);
+```
+
+يجب إن `mutation(["Noel", "Ole"])` ينتج `true`.
+
+```js
+assert(mutation(['Noel', 'Ole']) === true);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function mutation(arr) {
+  return arr;
+}
+
+mutation(["hello", "hey"]);
+```
+
+# --solutions--
+
+```js
+function mutation(arr) {
+  let hash = Object.create(null);
+
+  arr[0].toLowerCase().split('').forEach(c => hash[c] = true);
+
+  return !arr[1].toLowerCase().split('').filter(c => !hash[c]).length;
+}
+
+mutation(["hello", "hey"]);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/repeat-a-string-repeat-a-string.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/repeat-a-string-repeat-a-string.md
new file mode 100644
index 00000000000..5ad936f1598
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/repeat-a-string-repeat-a-string.md
@@ -0,0 +1,84 @@
+---
+id: afcc8d540bea9ea2669306b6
+title: تكرار مقطع (String) نصي تكرار مقطع (String) نصي
+challengeType: 1
+forumTopicId: 16041
+dashedName: repeat-a-string-repeat-a-string
+---
+
+# --description--
+
+كرر مقطع (String) نصي معين `str` (الحجَّة الأولى) لعدد `num` مرات (الحِجَّة الثانية). انتج مقطع (String) نصي فارغ إذا كان `num` ليس رقماً موجباً. لأغراض هذا التحدي، *لا* تستخدم الوظيفة `.repeat()` المدمجة.
+
+# --hints--
+
+`repeatStringNumTimes("*", 3)` يجب أن ينتج المقطع `***`.
+
+```js
+assert(repeatStringNumTimes('*', 3) === '***');
+```
+
+`repeatStringNumTimes("abc", 3)` يجب أن ينتج المقطع `abcabcabc`.
+
+```js
+assert(repeatStringNumTimes('abc', 3) === 'abcabcabc');
+```
+
+`repeatStringNumTimes("abc", 4)` يجب أن ينتج المقطع `abcabcabcabc`.
+
+```js
+assert(repeatStringNumTimes('abc', 4) === 'abcabcabcabc');
+```
+
+`repeatStringNumTimes("abc", 1)` يجب أن ينتج المقطع `abc`.
+
+```js
+assert(repeatStringNumTimes('abc', 1) === 'abc');
+```
+
+`repeatStringNumTimes("*", 8)` يجب أن ينتج المقطع `********`.
+
+```js
+assert(repeatStringNumTimes('*', 8) === '********');
+```
+
+`repeatStringNumTimes("abc", -2)` يجب أن ينتج مقطع فارغة (`""`).
+
+```js
+assert(repeatStringNumTimes('abc', -2) === '');
+```
+
+لا ينبغي استخدام الوظيفة `repeat()` المدمجة.
+
+```js
+assert(!/\.repeat/g.test(code));
+```
+
+`repeatStringNumTimes("abc", 0)` يجب أن ينتج `""`.
+
+```js
+assert(repeatStringNumTimes('abc', 0) === '');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function repeatStringNumTimes(str, num) {
+  return str;
+}
+
+repeatStringNumTimes("abc", 3);
+```
+
+# --solutions--
+
+```js
+function repeatStringNumTimes(str, num) {
+  if (num < 1) return '';
+  return num === 1 ? str : str + repeatStringNumTimes(str, num-1);
+}
+
+repeatStringNumTimes("abc", 3);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/return-largest-numbers-in-arrays.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/return-largest-numbers-in-arrays.md
new file mode 100644
index 00000000000..144df5e6849
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/return-largest-numbers-in-arrays.md
@@ -0,0 +1,92 @@
+---
+id: a789b3483989747d63b0e427
+title: أنشئ أكبر أعداد في القوائم (Arrays)
+challengeType: 1
+forumTopicId: 16042
+dashedName: return-largest-numbers-in-arrays
+---
+
+# --description--
+
+أنشئ قائمة تتكون من أكبر رَقَم من كل قائمة فرعية. من أجل البساطة، سوف تحتوي القائمة على 4 قوائم فرعية بالضبط.
+
+تذكر، يمكنك المرور علي قائمة باستخدام for loop البسيطة، والوصول إلى كل عنصر باستخدام اسم القائمة `arr[i]`.
+
+# --hints--
+
+`largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]])` يجب أن ينتج القائمة.
+
+```js
+assert(
+  largestOfFour([
+    [4, 5, 1, 3],
+    [13, 27, 18, 26],
+    [32, 35, 37, 39],
+    [1000, 1001, 857, 1]
+  ]).constructor === Array
+);
+```
+
+`largestOfFour([[13, 27, 18, 26], [4, 5, 1, 3], [32, 35, 37, 39], [1000, 1001, 857, 1]])` يجب أن ينتج `[27, 5, 39, 1001]`.
+
+```js
+assert.deepEqual(
+  largestOfFour([
+    [13, 27, 18, 26],
+    [4, 5, 1, 3],
+    [32, 35, 37, 39],
+    [1000, 1001, 857, 1]
+  ]),
+  [27, 5, 39, 1001]
+);
+```
+
+`largestOfFour([[4, 9, 1, 3], [13, 35, 18, 26], [32, 35, 97, 39], [1000000, 1001, 857, 1]])` يجب أن ينتج `[9, 35, 97, 1000000]`.
+
+```js
+assert.deepEqual(
+  largestOfFour([
+    [4, 9, 1, 3],
+    [13, 35, 18, 26],
+    [32, 35, 97, 39],
+    [1000000, 1001, 857, 1]
+  ]),
+  [9, 35, 97, 1000000]
+);
+```
+
+`largestOfFour([[17, 23, 25, 12], [25, 7, 34, 48], [4, -10, 18, 21], [-72, -3, -17, -10]])` يجب أن ينتج `[25, 48, 21, -3]`.
+
+```js
+assert.deepEqual(
+  largestOfFour([
+    [17, 23, 25, 12],
+    [25, 7, 34, 48],
+    [4, -10, 18, 21],
+    [-72, -3, -17, -10]
+  ]),
+  [25, 48, 21, -3]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function largestOfFour(arr) {
+  return arr;
+}
+
+largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);
+```
+
+# --solutions--
+
+```js
+function largestOfFour(arr) {
+  return arr.map(subArr => Math.max.apply(null, subArr));
+}
+
+largestOfFour([[4, 5, 1, 3], [13, 27, 18, 26], [32, 35, 37, 39], [1000, 1001, 857, 1]]);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/reverse-a-string.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/reverse-a-string.md
new file mode 100644
index 00000000000..ab213d176c6
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/reverse-a-string.md
@@ -0,0 +1,63 @@
+---
+id: a202eed8fc186c8434cb6d61
+title: قلب المقطع النصي String
+challengeType: 1
+forumTopicId: 16043
+dashedName: reverse-a-string
+---
+
+# --description--
+
+أقلب المقطع النصي المقدم.
+
+قد تحتاج إلى تحويل المقطع النصي (string) إلى قائمة قبل أن تتمكن من قلبها.
+
+يجب أن تكون نتيجتك مقطع نصي (string).
+
+# --hints--
+
+`reverseString("hello")` يجب أن ينتج مقطع نصي.
+
+```js
+assert(typeof reverseString('hello') === 'string');
+```
+
+`reverseString("hello")` يجب أن ينتج مقطع `olleh`.
+
+```js
+assert(reverseString('hello') === 'olleh');
+```
+
+`reverseString("Howdy")` يجب أن ينتج مقطع `ydwoH`.
+
+```js
+assert(reverseString('Howdy') === 'ydwoH');
+```
+
+`reverseString("Greetings from Earth")` يجب أن ينتج المقطع `htraE morf sgniteerG`.
+
+```js
+assert(reverseString('Greetings from Earth') === 'htraE morf sgniteerG');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function reverseString(str) {
+  return str;
+}
+
+reverseString("hello");
+```
+
+# --solutions--
+
+```js
+function reverseString(str) {
+  return str.split('').reverse().join('');
+}
+
+reverseString("hello");
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/slice-and-splice.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/slice-and-splice.md
new file mode 100644
index 00000000000..6ef3233e997
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/slice-and-splice.md
@@ -0,0 +1,98 @@
+---
+id: 579e2a2c335b9d72dd32e05c
+title: Slice و Splice
+challengeType: 1
+forumTopicId: 301148
+dashedName: slice-and-splice
+---
+
+# --description--
+
+يتم منحك قائمتين وترتيب (index).
+
+انسخ كل عنصر من القائمة الأولى إلى القائمة الثانية، بالترتيب.
+
+ابدأ في إدراج عناصر بالترتيب `n` في القائمة الثانية.
+
+انتج القائمة الناتجة عن ذلك. وينبغي أن تظل قائمات المدخلات (input arrays) على حالها بعد تشغيل الوظيفة (function).
+
+# --hints--
+
+`frankenSplice([1, 2, 3], [4, 5], 1)` يجب أن ينتج `[4, 1, 2, 3, 5]`.
+
+```js
+assert.deepEqual(frankenSplice([1, 2, 3], [4, 5], 1), [4, 1, 2, 3, 5]);
+```
+
+`frankenSplice([1, 2], ["a", "b"], 1)` يجب أن ينتج `["a", 1, 2, "b"]`.
+
+```js
+assert.deepEqual(frankenSplice(testArr1, testArr2, 1), ['a', 1, 2, 'b']);
+```
+
+`frankenSplice(["claw", "tentacle"], ["head", "shoulders", "knees", "toes"], 2)` يجب أن ينتج `["head", "shoulders", "claw", "tentacle", "knees", "toes"]`.
+
+```js
+assert.deepEqual(
+  frankenSplice(
+    ['claw', 'tentacle'],
+    ['head', 'shoulders', 'knees', 'toes'],
+    2
+  ),
+  ['head', 'shoulders', 'claw', 'tentacle', 'knees', 'toes']
+);
+```
+
+يجب إضافة جميع العناصر من القائمة الأولى إلى القائمة الثانية بالترتيب الأصلي. `frankenSplice([1, 2, 3, 4], [], 0)` يجب أن ينتج `[1, 2, 3, 4]`.
+
+```js
+assert.deepEqual(frankenSplice([1, 2, 3, 4], [], 0), [1, 2, 3, 4]);
+```
+
+وينبغي أن تظل القائمة الأولى على حالها بعد تشغيل الوظيفة.
+
+```js
+frankenSplice(testArr1, testArr2, 1);
+assert.deepEqual(testArr1, [1, 2]);
+```
+
+وينبغي أن تظل القائمة الثانية على حالها بعد تشغيل الوظيفة.
+
+```js
+frankenSplice(testArr1, testArr2, 1);
+assert.deepEqual(testArr2, ['a', 'b']);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+let testArr1 = [1, 2];
+let testArr2 = ["a", "b"];
+```
+
+## --seed-contents--
+
+```js
+function frankenSplice(arr1, arr2, n) {
+  return arr2;
+}
+
+frankenSplice([1, 2, 3], [4, 5, 6], 1);
+```
+
+# --solutions--
+
+```js
+function frankenSplice(arr1, arr2, n) {
+  // It's alive. It's alive!
+  let result = arr2.slice();
+  for (let i = 0; i < arr1.length; i++) {
+    result.splice(n+i, 0, arr1[i]);
+  }
+  return result;
+}
+
+frankenSplice([1, 2, 3], [4, 5], 1);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/title-case-a-sentence.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/title-case-a-sentence.md
new file mode 100644
index 00000000000..458de161b03
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/title-case-a-sentence.md
@@ -0,0 +1,64 @@
+---
+id: ab6137d4e35944e21037b769
+title: تكبير الحرف الأول لكل كلمة في الجملة
+challengeType: 1
+forumTopicId: 16088
+dashedName: title-case-a-sentence
+---
+
+# --description--
+
+أنشئ مقطع (string) مقدم مع تكبير الحرف الأول (capitalize) من كل كلمة في الجملة. تحقق أن بقية حروف الكلمة في حالة عادية (lower case).
+
+لأغراض هذا التمرين، يجب عليك أيضًا تكبير حروف كلمات التوصيل مثل `the` و `of`.
+
+# --hints--
+
+`titleCase("I'm a little tea pot")` يجب أن ينشئ مقطع نصية.
+
+```js
+assert(typeof titleCase("I'm a little tea pot") === 'string');
+```
+
+`titleCase("I'm a little tea pot")` يجب أن ينتج المقطع `I'm A Little Tea Pot`.
+
+```js
+assert(titleCase("I'm a little tea pot") === "I'm A Little Tea Pot");
+```
+
+`titleCase("sHoRt AnD sToUt")` يجب أن ينشئ المقطع `Short And Stout`.
+
+```js
+assert(titleCase('sHoRt AnD sToUt') === 'Short And Stout');
+```
+
+`titleCase("HERE IS MY HANDLE HERE IS MY SPOUT")` يجب أن ينشئ المقطع `Here Is My Handle Here Is My Spout`.
+
+```js
+assert(
+  titleCase('HERE IS MY HANDLE HERE IS MY SPOUT') ===
+    'Here Is My Handle Here Is My Spout'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function titleCase(str) {
+  return str;
+}
+
+titleCase("I'm a little tea pot");
+```
+
+# --solutions--
+
+```js
+function titleCase(str) {
+  return str.split(' ').map(word => word.charAt(0).toUpperCase() + word.substring(1).toLowerCase()).join(' ');
+}
+
+titleCase("I'm a little tea pot");
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/truncate-a-string.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/truncate-a-string.md
new file mode 100644
index 00000000000..7aab5a927e7
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/truncate-a-string.md
@@ -0,0 +1,91 @@
+---
+id: ac6993d51946422351508a41
+title: اقتطاع (Truncate) القطع (String) النصي
+challengeType: 1
+forumTopicId: 16089
+dashedName: truncate-a-string
+---
+
+# --description--
+
+اقتطع المقطع النصي (الحَجَّة الأولى) إذا كانت أطول من الحد الأقصى المحدد لطول المقطع النصي (الحَجَّة الثانية). أنشئ المقطع النصي المتقطع حيث ينتهي بـ `...` ثلاث نُقَط.
+
+# --hints--
+
+`truncateString("A-tisket a-tasket A green and yellow basket", 8)` يجب أن يُنشئ المقطع النصي `A-tisket...`.
+
+```js
+assert(
+  truncateString('A-tisket a-tasket A green and yellow basket', 8) ===
+    'A-tisket...'
+);
+```
+
+`truncateString("Peter Piper picked a peck of pickled peppers", 11)` يجب أن يُنشئ المقطع `Peter Piper...`.
+
+```js
+assert(
+  truncateString('Peter Piper picked a peck of pickled peppers', 11) ===
+    'Peter Piper...'
+);
+```
+
+`truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length)` يجب أن ينشئ المقطع `A-tisket a-tasket A green and yellow basket`.
+
+```js
+assert(
+  truncateString(
+    'A-tisket a-tasket A green and yellow basket',
+    'A-tisket a-tasket A green and yellow basket'.length
+  ) === 'A-tisket a-tasket A green and yellow basket'
+);
+```
+
+`truncateString("A-tisket a-tasket A green and yellow basket", "A-tisket a-tasket A green and yellow basket".length + 2)` يجب أن يرجع المقطع `A-tisket a-tasket A green and yellow basket`.
+
+```js
+assert(
+  truncateString(
+    'A-tisket a-tasket A green and yellow basket',
+    'A-tisket a-tasket A green and yellow basket'.length + 2
+  ) === 'A-tisket a-tasket A green and yellow basket'
+);
+```
+
+`truncateString("A-", 1)` يجب أن ينشئ المقطع `A...`.
+
+```js
+assert(truncateString('A-', 1) === 'A...');
+```
+
+`truncateString("Absolutely Longer", 2)` يجب أن ينشئ المقطع `Ab...`.
+
+```js
+assert(truncateString('Absolutely Longer', 2) === 'Ab...');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function truncateString(str, num) {
+  return str;
+}
+
+truncateString("A-tisket a-tasket A green and yellow basket", 8);
+```
+
+# --solutions--
+
+```js
+function truncateString(str, num) {
+  if (num >= str.length) {
+    return str;
+  }
+
+  return str.slice(0, num) + '...';
+}
+
+truncateString("A-tisket a-tasket A green and yellow basket", 8);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/where-do-i-belong.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/where-do-i-belong.md
new file mode 100644
index 00000000000..f9038e273b9
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/where-do-i-belong.md
@@ -0,0 +1,143 @@
+---
+id: a24c1a4622e3c05097f71d67
+title: أين انتمي
+challengeType: 1
+forumTopicId: 16094
+dashedName: where-do-i-belong
+---
+
+# --description--
+
+انتج أدنى الترتيب حيث إدراج قيمته (الحَجَّة الثانية) في القائمة (الحَجَّة الأولى) بمجرد ترتيبها. القيمة المنتجة يجب أن تكون رقما.
+
+على سبيل المثال، `getIndexToIns([1,2,3,4], 1.5)` يجب أن ينتج `1` لأنه أكبر من `1` (الترتيب 0)، ولكن أقل من `2` (الترتيب 1).
+
+كذلك، `getIndexToIns([20,3,5], 19)` يجب أن ينتج `2` لأنه بمجرد ترتيب القائمة سوف تبدو مثل `[3,5,20]`, و `19` هي أقل من `20` (الترتيب 2) وأكثر من `5` (الترتيب 1).
+
+# --hints--
+
+`getIndexToIns([10, 20, 30, 40, 50], 35)` يجب أن ينتج `3`.
+
+```js
+assert(getIndexToIns([10, 20, 30, 40, 50], 35) === 3);
+```
+
+`getIndexToIns([10, 20, 30, 40, 50], 35)` يجب أن ينتج رَقَم.
+
+```js
+assert(typeof getIndexToIns([10, 20, 30, 40, 50], 35) === 'number');
+```
+
+`getIndexToIns([10, 20, 30, 40, 50], 30)` يجب ينتج `2`.
+
+```js
+assert(getIndexToIns([10, 20, 30, 40, 50], 30) === 2);
+```
+
+`getIndexToIns([10, 20, 30, 40, 50], 30)` يجب أن ينتج رَقَم.
+
+```js
+assert(typeof getIndexToIns([10, 20, 30, 40, 50], 30) === 'number');
+```
+
+`getIndexToIns([40, 60], 50)` يجب أن ينتج `1`.
+
+```js
+assert(getIndexToIns([40, 60], 50) === 1);
+```
+
+`getIndexToIns([40, 60], 50)` يجب أن ينتج رَقَم.
+
+```js
+assert(typeof getIndexToIns([40, 60], 50) === 'number');
+```
+
+`getIndexToIns([3, 10, 5], 3)` يجب أن ينتج `0`.
+
+```js
+assert(getIndexToIns([3, 10, 5], 3) === 0);
+```
+
+`getIndexToIns([3, 10, 5], 3)` يجب أن ينتج رَقَم.
+
+```js
+assert(typeof getIndexToIns([3, 10, 5], 3) === 'number');
+```
+
+`getIndexToIns([5, 3, 20, 3], 5)` يجب أن ينتج `2`.
+
+```js
+assert(getIndexToIns([5, 3, 20, 3], 5) === 2);
+```
+
+`getIndexToIns([5, 3, 20, 3], 5)` يجب أن ينتج رَقَم.
+
+```js
+assert(typeof getIndexToIns([5, 3, 20, 3], 5) === 'number');
+```
+
+`getIndexToIns([2, 20, 10], 19)` يجب أن ينتج `2`.
+
+```js
+assert(getIndexToIns([2, 20, 10], 19) === 2);
+```
+
+`getIndexToIns([2, 20, 10], 19)` يجب أن ينتج رَقَم.
+
+```js
+assert(typeof getIndexToIns([2, 20, 10], 19) === 'number');
+```
+
+`getIndexToIns([2, 5, 10], 15)` يجب أن ينتج `3`.
+
+```js
+assert(getIndexToIns([2, 5, 10], 15) === 3);
+```
+
+`getIndexToIns([2, 5, 10], 15)` يجب أن ينتج رَقَم.
+
+```js
+assert(typeof getIndexToIns([2, 5, 10], 15) === 'number');
+```
+
+`getIndexToIns([], 1)` يجب أن ينتج `0`.
+
+```js
+assert(getIndexToIns([], 1) === 0);
+```
+
+`getIndexToIns([], 1)` يجب أن ينتج رَقَم.
+
+```js
+assert(typeof getIndexToIns([], 1) === 'number');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function getIndexToIns(arr, num) {
+  return num;
+}
+
+getIndexToIns([40, 60], 50);
+```
+
+# --solutions--
+
+```js
+function getIndexToIns(arr, num) {
+  arr = arr.sort((a, b) => a - b);
+
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i] >= num) {
+      return i;
+    }
+  }
+
+  return arr.length;
+}
+
+getIndexToIns([40, 60], 50);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-an-arrays-contents-using-bracket-notation.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-an-arrays-contents-using-bracket-notation.md
new file mode 100644
index 00000000000..7b6010e1202
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-an-arrays-contents-using-bracket-notation.md
@@ -0,0 +1,82 @@
+---
+id: 5a661e0f1068aca922b3ef17
+title: الوصول إلى محتويات القائمة (Array) باستخدام رمز القوس (Bracket Notation)
+challengeType: 1
+forumTopicId: 301149
+dashedName: access-an-arrays-contents-using-bracket-notation
+---
+
+# --description--
+
+السمة الأساسية لأي هيكل للبيانات هي، بالطبع، القدرة ليس فقط على تخزين البيانات، ولكن على أن تكون قادراً على استرداد تلك البيانات في حال رغبت بذلك. لذا، الآن بعد أن تعلمنا كيفية إنشاء القائمة، لنبدأ بالتفكير حول كيفية الوصول إلى معلومات القائمة.
+
+عندما نحدد القائمة بسيطة كما هو مبين أدناه، هناك 3 عناصر فيها:
+
+```js
+let ourArray = ["a", "b", "c"];
+```
+
+في القائمة، يحتوي كل عنصر على ترتيب <dfn>index</dfn>. هذا الترتيب يتضاعف كموقع ذلك العنصر في القائمة، وكيف تشير إليه. ومع ذلك، من المهم ملاحظة أن القائمات JavaScript هي <dfn>قائمات مترتبة من الصفر</dfn>، بمعنى أن العنصر الأول للقائمة هو في الواقع في موضع ***صفر*** وليس الأول. من أجل استرجاع عنصر من قائمة يمكننا إرفاق ترتيب بين قوسين وإلحاقه إلى نهاية القائمة، أو أكثر شيوعاً، إلى متغير يشير إلى كائن من نوع قائمة. هذا معروف باسم رمز الاقواس <dfn>bracket notation</dfn>. على سبيل المثال، إذا أردنا استرداد `a` من `ourArray`و تعيينه إلى متغير، يمكننا أن نفعل ذلك بواسطة التعليمات البرمجية التالية:
+
+```js
+let ourVariable = ourArray[0];
+```
+
+الآن `ourVariable` لديه قيمة `a`.
+
+بالإضافة إلى الوصول إلى القيمة المرتبطة بالترتيب، يمكنك أيضًا *تعيين* ترتيب إلى قيمة باستخدام نفس الطريقة:
+
+```js
+ourArray[1] = "not b anymore";
+```
+
+باستخدام رمز الأقواس، قمنا الآن بإعادة تعيين العنصر في الترتيب 1 من السلسلة `b`، إلى `not b anymore`. الآن `ourArray` هو `["a", "not b anymore", "c"]`.
+
+# --instructions--
+
+من أجل استكمال هذا التحدي، عيّن الموضع الثاني (ترتيب `1`) من `myArray` إلى أي شيء تريده، إلا الحرف `b`.
+
+# --hints--
+
+`myArray[0]` يجب أن يساوي الحرف `a`
+
+```js
+assert.strictEqual(myArray[0], 'a');
+```
+
+`myArray[1]` يجب ألّا يساوي الحرف `b`
+
+```js
+assert.notStrictEqual(myArray[1], 'b');
+```
+
+`myArray[2]` يجب أن يساوي الحرف `c`
+
+```js
+assert.strictEqual(myArray[2], 'c');
+```
+
+`myArray[3]` يجب أن يساوي الحرف `d`
+
+```js
+assert.strictEqual(myArray[3], 'd');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let myArray = ["a", "b", "c", "d"];
+// Only change code below this line
+
+// Only change code above this line
+console.log(myArray);
+```
+
+# --solutions--
+
+```js
+let myArray = ["a", "b", "c", "d"];
+myArray[1] = "e";
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-property-names-with-bracket-notation.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-property-names-with-bracket-notation.md
new file mode 100644
index 00000000000..194fd0634aa
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/access-property-names-with-bracket-notation.md
@@ -0,0 +1,101 @@
+---
+id: 587d7b7c367417b2b2512b1a
+title: الوصول إلى أسماء الخاصية (Property) برمز القوس Bracket Notation
+challengeType: 1
+forumTopicId: 301150
+dashedName: access-property-names-with-bracket-notation
+---
+
+# --description--
+
+في تحدي الكائن الأول ذكرنا استخدام رمز القوس كوسيلة للوصول إلى قيم الخاصية باستخدام تقييم متغير. على سبيل المثال، تخيل أن كائن `foods` الخاص بنا يتم استخدامه في برنامَج لتسجيل النقود في محل تجارة. لدينا وظيفة ما و التي تعين `selectedFood` ونحن نريد التحقق من كائن `foods` للتأكد من وجود ذلك الطعام. وقد يبدو ذلك كالتالي:
+
+```js
+let selectedFood = getCurrentFood(scannedItem);
+let inventory = foods[selectedFood];
+```
+
+سيقوم هذا الكود بتقييم القيمة المخزنة في متغير `selectedFood` وإرجاع قيمة هذا المفتاح في كائن `foods`، أو `undefined` إذا لم يكن موجودا. Bracket notation مفيد جداً لأن خصائص الكائن في بعض الأحيان غير معروفة قبل وقت التشغيل أو نحتاج إلى الوصول إليها بطريقة أكثر ديناميكية.
+
+# --instructions--
+
+لقد حددنا الوظيفة `checkInventory`، التي تتلقى عنصر scannedItem كحجة. انتج القيمة الحالية لمفتاح `scannedItem` في الكائن `foods`. يمكنك أن تفترض أنه سيتم توفير المفاتيح الصحيحة فقط كحجة لـ `checkInventory`.
+
+# --hints--
+
+`checkInventory` يجب أن تكون وظيفة.
+
+```js
+assert.strictEqual(typeof checkInventory, 'function');
+```
+
+يجب أن يحتوي الكائن `foods` على أزواج key-value التالية فقط: `apples: 25`, و`oranges: 32`, و`plums: 28`, و`bananas: 13`, و`grapes: 35`, و`strawberries: 27`.
+
+```js
+assert.deepEqual(foods, {
+  apples: 25,
+  oranges: 32,
+  plums: 28,
+  bananas: 13,
+  grapes: 35,
+  strawberries: 27
+});
+```
+
+`checkInventory("apples")` يجب أن ينتج `25`.
+
+```js
+assert.strictEqual(checkInventory('apples'), 25);
+```
+
+`checkInventory("bananas")` يجب أن ينتج `13`.
+
+```js
+assert.strictEqual(checkInventory('bananas'), 13);
+```
+
+`checkInventory("strawberries")` يجب أن ينتج `27`.
+
+```js
+assert.strictEqual(checkInventory('strawberries'), 27);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let foods = {
+  apples: 25,
+  oranges: 32,
+  plums: 28,
+  bananas: 13,
+  grapes: 35,
+  strawberries: 27
+};
+
+function checkInventory(scannedItem) {
+  // Only change code below this line
+
+  // Only change code above this line
+}
+
+console.log(checkInventory("apples"));
+```
+
+# --solutions--
+
+```js
+let foods = {
+  apples: 25,
+  oranges: 32,
+  plums: 28,
+  bananas: 13,
+  grapes: 35,
+  strawberries: 27
+};
+
+function checkInventory(scannedItem) {
+  return foods[scannedItem];
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-items-to-an-array-with-push-and-unshift.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-items-to-an-array-with-push-and-unshift.md
new file mode 100644
index 00000000000..4a677ecfe2b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-items-to-an-array-with-push-and-unshift.md
@@ -0,0 +1,87 @@
+---
+id: 587d78b2367417b2b2512b0e
+title: إضافة عناصر إلى القائمة (array) باستخدام push() و unshift()
+challengeType: 1
+forumTopicId: 301151
+dashedName: add-items-to-an-array-with-push-and-unshift
+---
+
+# --description--
+
+طول القائمة، مثل أنواع البيانات التي يمكن أن تحتويها، غير ثابت. ويمكن تعريف القائمات بطول أي عدد من العناصر، ويمكن إضافة العناصر أو إزالتها بمرور الوقت؛ وبعبارة أخرى، القائمات هي قابلة للتغير <dfn>mutable</dfn>. في هذا التحدي، سننظر إلى وظيفتين يمكن بهما تعديل القائمة: `Array.push()` و `Array.unshift()`.
+
+تأخذ كلتا الوظيفتين عنصراً واحداً أو أكثر من العناصر كمعلمات وتضيف هذه العناصر إلى القائمة التي تستدعيها الوظيفة؛ وظيفة `push()` تضيف عناصر إلى نهاية القائمة، و `unshift()` تضيف عناصر إلى البداية. انظر ما يلي:
+
+```js
+let twentyThree = 'XXIII';
+let romanNumerals = ['XXI', 'XXII'];
+
+romanNumerals.unshift('XIX', 'XX');
+```
+
+`romanNumerals` سيكون لها القيمة `['XIX', 'XX', 'XXI', 'XXII']`.
+
+```js
+romanNumerals.push(twentyThree);
+```
+
+`romanNumerals` سيكون لها القيمة `['XIX', 'XX', 'XXI', 'XXII', 'XXIII']`. لاحظ أنه يمكننا أيضا تمرير المتغيرات، مما يسمح لنا بمرونة أكبر في التعديل الديناميكي لبيانات القائمة.
+
+# --instructions--
+
+لقد حددنا الوظيفة `mixedNumbers`، التي سنمرر إليها قائمة كحجة. عدل الوظيفة باستخدام `push()` و `unshift()` لإضافة `'I', 2, 'three'` إلى بداية القائمة و `7, 'VIII', 9` إلي النهاية بحيث تحتوي القائمة المعادة على الأرقام 1-9 بالترتيب.
+
+# --hints--
+
+`mixedNumbers(["IV", 5, "six"])` الآن يجب أن ينتج `["I", 2, "three", "IV", 5, "six", 7, "VIII", 9]`
+
+```js
+assert.deepEqual(mixedNumbers(['IV', 5, 'six']), [
+  'I',
+  2,
+  'three',
+  'IV',
+  5,
+  'six',
+  7,
+  'VIII',
+  9
+]);
+```
+
+يجب أن تستخدم وظيفة `mixedNumbers` الطريقة `push()`
+
+```js
+assert(mixedNumbers.toString().match(/\.push/));
+```
+
+يجب أن تستخدم وظيفة `mixedNumbers` الطريقة `unshift()`
+
+```js
+assert(mixedNumbers.toString().match(/\.unshift/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function mixedNumbers(arr) {
+  // Only change code below this line
+
+  // Only change code above this line
+  return arr;
+}
+
+console.log(mixedNumbers(['IV', 5, 'six']));
+```
+
+# --solutions--
+
+```js
+function mixedNumbers(arr) {
+  arr.push(7,'VIII',9);
+  arr.unshift('I',2,'three');
+  return arr;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-items-using-splice.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-items-using-splice.md
new file mode 100644
index 00000000000..eb69c8bbac4
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-items-using-splice.md
@@ -0,0 +1,93 @@
+---
+id: 587d78b3367417b2b2512b11
+title: إضافة عناصر باستخدام splice()
+challengeType: 1
+forumTopicId: 301152
+dashedName: add-items-using-splice
+---
+
+# --description--
+
+تذكر في التحدي الأخير الذي ذكرناه أن `splice()` يمكن أن يأخذ ما يصل إلى ثلاث حجج؟ حسناً، يمكنك استخدام المعلم الثالث، المكون من عنصر واحد أو أكثر، للإضافة إلى القائمة. يمكن أن يكون هذا مفيدًا بشكل لا يصدق للتبديل السريع لعنصر، أو مجموعة من العناصر، بعنصر آخر.
+
+```js
+const numbers = [10, 11, 12, 12, 15];
+const startIndex = 3;
+const amountToDelete = 1;
+
+numbers.splice(startIndex, amountToDelete, 13, 14);
+console.log(numbers);
+```
+
+تمت إزالة الحدث الثاني من `12`, وإضافة `13` و `14` في نفس الترتيب. القائمة `numbers` ستكون الآن `[ 10, 11, 12, 13, 14, 15 ]`.
+
+وهنا نبدأ بالقائمة من الأرقام. ثم نمرر ما يلي إلى `splice()`: الترتيب الذي نبدأ منه لحذف العناصر (3)، وعدد العناصر المراد حذفها (1)، والوسيطات المتبقية (13، 14) سيتم أدخالها بدءا في نفس الترتيب. لاحظ أنه يمكن أن يكون هناك أي عدد من العناصر (مفصولة بفواصل) بعد `amountToDelete`، وكل عنصر منهم يتم إدخاله.
+
+# --instructions--
+
+لقد حددنا الوظيفة `htmlColorNames`، التي تأخذ قائمة من ألوان HTML كحجة. عدّل الوظيفة باستخدام `splice()` لإزالة العنصرين الأولين من القائمة وإضافة `'DarkSalmon'` و `'BlanchedAlmond'` في الأماكن الخاصة بهم.
+
+# --hints--
+
+`htmlColorNames` يجب ينتج `["DarkSalmon", "BlanchedAlmond", "LavenderBlush", "PaleTurquoise", "FireBrick"]`
+
+```js
+assert.deepEqual(
+  htmlColorNames([
+    'DarkGoldenRod',
+    'WhiteSmoke',
+    'LavenderBlush',
+    'PaleTurquoise',
+    'FireBrick'
+  ]),
+  [
+    'DarkSalmon',
+    'BlanchedAlmond',
+    'LavenderBlush',
+    'PaleTurquoise',
+    'FireBrick'
+  ]
+);
+```
+
+يجب أن تستخدم وظيفة `htmlColorNames` الطريقة `splice()`
+
+```js
+assert(/.splice/.test(code));
+```
+
+لا يجب عليك استخدام `shift()` أو `unshift()`.
+
+```js
+assert(!/shift|unshift/.test(code));
+```
+
+لا يجب عليك استخدام bracket notation القائمة.
+
+```js
+assert(!/\[\d\]\s*=/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function htmlColorNames(arr) {
+  // Only change code below this line
+
+  // Only change code above this line
+  return arr;
+}
+
+console.log(htmlColorNames(['DarkGoldenRod', 'WhiteSmoke', 'LavenderBlush', 'PaleTurquoise', 'FireBrick']));
+```
+
+# --solutions--
+
+```js
+function htmlColorNames(arr) {
+  arr.splice(0,2,'DarkSalmon', 'BlanchedAlmond');
+  return arr;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-key-value-pairs-to-javascript-objects.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-key-value-pairs-to-javascript-objects.md
new file mode 100644
index 00000000000..a7f3d0e66ea
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/add-key-value-pairs-to-javascript-objects.md
@@ -0,0 +1,124 @@
+---
+id: 587d7b7c367417b2b2512b18
+title: إضافة أزواج key-value القيمة و المفتاح إلى كائنات JavaScript
+challengeType: 1
+forumTopicId: 301153
+dashedName: add-key-value-pairs-to-javascript-objects
+---
+
+# --description--
+
+الكائنات في أبسط صورها، هي فقط مجموعات من أزواج <dfn>key-value</dfn>. بمعنى آخر هي قطع من البيانات (<dfn>القيم</dfn>) التي تم تعيينها إلى معرّفات فريدة تسمى <dfn>خصائص</dfn> (<dfn>هُوِيَّات</dfn>). ألقي نَّظْرَة على المثال:
+
+```js
+const tekkenCharacter = {
+  player: 'Hwoarang',
+  fightingStyle: 'Tae Kwon Doe',
+  human: true
+};
+```
+
+يحدد التعليمات البرمجية كائن لشخصية في لُعْبَة Tekken يسمى `tekkenCharacter`. له ثلاث خصائص، كل منها يرتبط بقيمة محددة. إذا كنت ترغب في إضافة خاصية إضافية، مثل "origin"، فيمكن ذلك عن طريق تعيين `origin` إلى الكائن:
+
+```js
+tekkenCharacter.origin = 'South Korea';
+```
+
+يستخدم هذا رمز النقطة (dot notation). إذا لاحظت كائن `tekkenCharacter`، فسيتضمن الآن خاصية `origin`. وكان Hwoarang أيضا شعر برتقالي متميز. يمكنك إضافة هذه الخاصية باستخدام bracket notation عن طريق القيام بما يلي:
+
+```js
+tekkenCharacter['hair color'] = 'dyed orange';
+```
+
+Bracket notation مطلوب إذا كانت الخاصية الخاصة بك تحتوي على مساحة فيها أو إذا كنت ترغب في استخدام متغير لتسمية الخاصية. في الحالة المذكورة أعلاه، يتم وضع الخاصية بين علامتي اقتباس للإشارة إليها كمقطع وسيتم إضافتها تمامًا كما هو موضح. دون علامتا التنصيص، سيتم تقييمها كمتغير وسيكون اسم الخاصية قيمة المتغير. إليك مثال مع متغير:
+
+```js
+const eyes = 'eye color';
+
+tekkenCharacter[eyes] = 'brown';
+```
+
+بعد إضافة جميع الأمثلة، سيبدو الكائن هكذا:
+
+```js
+{
+  player: 'Hwoarang',
+  fightingStyle: 'Tae Kwon Doe',
+  human: true,
+  origin: 'South Korea',
+  'hair color': 'dyed orange',
+  'eye color': 'brown'
+};
+```
+
+# --instructions--
+
+تم إنشاء كائن `foods` مع ثلاث إدخالات. باستخدام الصيغة التي تختارها، أضف ثلاث إدخالات أخرى إليها: `bananas` بقيمة `13` و `grapes` بقيمة `35` و `strawberries` بقيمة `27`.
+
+# --hints--
+
+`foods` يجب أن تكون كائناً.
+
+```js
+assert(typeof foods === 'object');
+```
+
+يجب أن يحتوي الكائن `foods` على هُوِيَّة `bananas` بقيمة `13`.
+
+```js
+assert(foods.bananas === 13);
+```
+
+يجب أن يحتوي الكائن `foods` على هُوِيَّة `grapes` بقيمة `35`.
+
+```js
+assert(foods.grapes === 35);
+```
+
+يجب أن يحتوي الكائن `foods` على هُوِيَّة `strawberries` بقيمة `27`.
+
+```js
+assert(foods.strawberries === 27);
+```
+
+يجب تعيين أزواج key-value باستخدام dot او bracket notation.
+
+```js
+assert(
+  code.search(/bananas:/) === -1 &&
+    code.search(/grapes:/) === -1 &&
+    code.search(/strawberries:/) === -1
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let foods = {
+  apples: 25,
+  oranges: 32,
+  plums: 28
+};
+
+// Only change code below this line
+
+// Only change code above this line
+
+console.log(foods);
+```
+
+# --solutions--
+
+```js
+let foods = {
+  apples: 25,
+  oranges: 32,
+  plums: 28
+};
+
+foods['bananas'] = 13;
+foods['grapes']  = 35;
+foods['strawberries'] = 27;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/check-for-the-presence-of-an-element-with-indexof.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/check-for-the-presence-of-an-element-with-indexof.md
new file mode 100644
index 00000000000..3a029cc5f4a
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/check-for-the-presence-of-an-element-with-indexof.md
@@ -0,0 +1,93 @@
+---
+id: 587d7b7b367417b2b2512b14
+title: تحقق من وجود عنصر باستخدام indexOf()
+challengeType: 1
+forumTopicId: 301154
+dashedName: check-for-the-presence-of-an-element-with-indexof
+---
+
+# --description--
+
+نظرًا لأنه يمكن تغيير القوائم، أو *يتم تحويرها* في أي وقت، لا يوجد ضمان حول مكان وجود جزء معين من البيانات في قائمة معينة، أو حتي إذا كان هذا العنصر لا يزال موجودا. لحسن الحظ، يوفر لنا JavaScript وظيفة مدمجة أخرى، `indexOf()`، وهذه تسمح لنا بالتحقق بسرعة وسهولة من وجود عنصر في القائمة. `indexOf()` تأخذ عنصرا كمعلم, و عندما تستدعي، فإنها ترجع المكان، أو الترتيب (index)، لهذا العنصر، أو `-1` إذا كان العنصر غير موجود في القائمة.
+
+على سبيل المثال:
+
+```js
+let fruits = ['apples', 'pears', 'oranges', 'peaches', 'pears'];
+
+fruits.indexOf('dates');
+fruits.indexOf('oranges');
+fruits.indexOf('pears');
+```
+
+`indexOf('dates')` يرجع `-1`، و `indexOf('oranges')` يرجع `2`، و `indexOf('pears')` يرجع `1` (اول ترتيب يوجد فيه كل عنصر).
+
+# --instructions--
+
+`indexOf()` يمكن أن تكون مفيدة بشكل لا يصدق للتحقق بسرعة من وجود عنصر في القائمة. لقد حددنا الوظيفة `quickCheck`، التي تأخذ القائمة وعناصر كوسيطات (arguments). عدل الوظيفة باستخدام `indexOf()` بحيث تنتج `true` إذا كان العنصر الذي تم تمريره موجود في القائمة، و `false` إذا لم يكن موجود.
+
+# --hints--
+
+يجب أن تقوم الوظيفة `quickCheck` بإرجاع منطقي (boolean) (`true` أو `false`)، ليس سلسلة (string) نصية (`"true"` أو `"false"`)
+
+```js
+assert.isBoolean(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'));
+```
+
+`quickCheck(["squash", "onions", "shallots"], "mushrooms")` يجب أن ترجع `false`
+
+```js
+assert.strictEqual(
+  quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'),
+  false
+);
+```
+
+`quickCheck(["onions", "squash", "shallots"], "onions")` يجب ان ترجع `true`
+
+```js
+assert.strictEqual(
+  quickCheck(['onions', 'squash', 'shallots'], 'onions'),
+  true
+);
+```
+
+`quickCheck([3, 5, 9, 125, 45, 2], 125)` يجب ان ترجع `true`
+
+```js
+assert.strictEqual(quickCheck([3, 5, 9, 125, 45, 2], 125), true);
+```
+
+`quickCheck([true, false, false], undefined)` يجب ان ترجع `false`
+
+```js
+assert.strictEqual(quickCheck([true, false, false], undefined), false);
+```
+
+يجب أن تستخدم الوظيفة `quickCheck` طريقة `indexOf()`
+
+```js
+assert.notStrictEqual(quickCheck.toString().search(/\.indexOf\(/), -1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function quickCheck(arr, elem) {
+  // Only change code below this line
+
+  // Only change code above this line
+}
+
+console.log(quickCheck(['squash', 'onions', 'shallots'], 'mushrooms'));
+```
+
+# --solutions--
+
+```js
+function quickCheck(arr, elem) {
+  return arr.indexOf(elem) >= 0; 
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/check-if-an-object-has-a-property.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/check-if-an-object-has-a-property.md
new file mode 100644
index 00000000000..ea89a8e8d67
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/check-if-an-object-has-a-property.md
@@ -0,0 +1,161 @@
+---
+id: 587d7b7d367417b2b2512b1c
+title: تحقق مما إذا كان الكائن (Object) يحتوي على خاصية (Property)
+challengeType: 1
+forumTopicId: 301155
+dashedName: check-if-an-object-has-a-property
+---
+
+# --description--
+
+الآن يمكننا إضافة وتعديل وإزالة الهُوِيَّات (keys) من الكائنات (objects). ولكن ماذا لو أردنا فقط معرفة إذا كان object يملك خاصية معينة؟ يوفر لنا JavaScript طريقتين مختلفتين لفعل ذلك. تستخدم أحدهما طريقة `hasOwnProperty()` وتستخدم الأخرى كلمة `in`. إذا كان لدينا كائن `users` مع خاصية `Alan`، يمكننا التحقق من وجودها بأي من الطريقتين التاليتين:
+
+```js
+users.hasOwnProperty('Alan');
+'Alan' in users;
+```
+
+وسترجع كليتهما `true`.
+
+# --instructions--
+
+أنهي كتابة الوظيفة بحيث ترجع `true` إذا كان object الذي مرر إليه يحتوي على جميع الأسماء الأربعة، `Alan`, و `Jeff`, و `Sarah`, و `Ryan`, وإنتاج `false` خلاف ذلك.
+
+# --hints--
+
+يجب عدم أستخدام إلى object باسم `users` قاصدًا
+
+```js 
+
+assert(code.match(/users/gm).length <= 2)
+
+```
+
+يجب أن يحتوي object باسم `users` فقط على الهُوِيَّات `Alan`, و`Jeff`, و`Sarah`, و `Ryan`
+
+```js
+assert(
+  'Alan' in users &&
+    'Jeff' in users &&
+    'Sarah' in users &&
+    'Ryan' in users &&
+    Object.keys(users).length === 4
+);
+```
+
+الوظيفة `isEveryoneHere` يجب أن تنتج `true` إذا `Alan`، و`Jeff`، و`Sarah`، و `Ryan` هي خصائص في object الذي تم تمريرها إلى الوظيفة.
+
+```js
+assert(isEveryoneHere(users) === true);
+```
+
+الوظيفة `isEveryoneHere` يجب أن تنتج `false` إذا `Alan` ليست خاصية في object الذي تم تمريره.
+
+```js
+assert(
+  (function () {
+    delete users.Alan;
+    return isEveryoneHere(users);
+  })() === false
+);
+```
+
+الوظيفة `isEveryoneHere` يجب أن ترجع `false` إذا `Jeff` ليست خاصية في object الذي تم تمريره.
+
+```js
+assert(
+  (function () {
+    delete users.Jeff;
+    return isEveryoneHere(users);
+  })() === false
+);
+```
+
+الوظيفة `isEveryoneHere` يجب أن ترجع `false` إذا `Sarah` ليست خاصية في object الذي تم تمريره.
+
+```js
+assert(
+  (function () {
+    delete users.Sarah;
+    return isEveryoneHere(users);
+  })() === false
+);
+```
+
+الوظيفة `isEveryoneHere` يجب أن ترجع `false` إذا `Ryan` ليست خاصية في object الذي تم تمريره.
+
+```js
+assert(
+  (function () {
+    delete users.Ryan;
+    return isEveryoneHere(users);
+  })() === false
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let users = {
+  Alan: {
+    age: 27,
+    online: true
+  },
+  Jeff: {
+    age: 32,
+    online: true
+  },
+  Sarah: {
+    age: 48,
+    online: true
+  },
+  Ryan: {
+    age: 19,
+    online: true
+  }
+};
+
+function isEveryoneHere(userObj) {
+  // Only change code below this line
+
+  // Only change code above this line
+}
+
+console.log(isEveryoneHere(users));
+```
+
+# --solutions--
+
+```js
+let users = {
+  Alan: {
+    age: 27,
+    online: true
+  },
+  Jeff: {
+    age: 32,
+    online: true
+  },
+  Sarah: {
+    age: 48,
+    online: true
+  },
+  Ryan: {
+    age: 19,
+    online: true
+  }
+};
+
+function isEveryoneHere(userObj) {
+  return [
+    'Alan',
+    'Jeff',
+    'Sarah',
+    'Ryan'
+  ].every(user => userObj.hasOwnProperty(user));
+}
+
+console.log(isEveryoneHere(users));
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/combine-arrays-with-the-spread-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/combine-arrays-with-the-spread-operator.md
new file mode 100644
index 00000000000..360bffbf0b4
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/combine-arrays-with-the-spread-operator.md
@@ -0,0 +1,63 @@
+---
+id: 587d7b7b367417b2b2512b17
+title: دمج القوائم باستخدام Spread Operator
+challengeType: 1
+forumTopicId: 301156
+dashedName: combine-arrays-with-the-spread-operator
+---
+
+# --description--
+
+مِيزة كبيرة أخرى لمشغل <dfn>spread</dfn> هي القدرة على الدمج بين القوائم، أو إدراج جميع عناصر قائمة في قائمة أخرى، في أي ترتيب. في معظم اللغات التقليدية، يمكننا أن نجمع بين القوائم، لكن هذا يسمح لنا فقط بالدمج بين القوائم في نهاية واحدة منهم، وفي بداية الأخرى. تجعل صيغة Spread العملية التالية بسيطة للغاية:
+
+```js
+let thisArray = ['sage', 'rosemary', 'parsley', 'thyme'];
+
+let thatArray = ['basil', 'cilantro', ...thisArray, 'coriander'];
+```
+
+`thatArray` ستكون لها القيمة `['basil', 'cilantro', 'sage', 'rosemary', 'parsley', 'thyme', 'coriander']`.
+
+وباستخدام صيغة spread، حققت للتو عملية كان من شأنها أن تكون أكثر تعقيدا وأكثر تعمقا لو استخدمنا أساليب تقليدية.
+
+# --instructions--
+
+لقد حددت وظيفة `spreadOut` التي ترجع المتغير `sentence`. عدل الوظيفة باستخدام مشغل <dfn>spread</dfn> بحيث تنتج القائمة `['learning', 'to', 'code', 'is', 'fun']`.
+
+# --hints--
+
+`spreadOut` يجب أن تنتج <`["learning", "to", "code", "is", "fun"]`
+
+```js
+assert.deepEqual(spreadOut(), ['learning', 'to', 'code', 'is', 'fun']);
+```
+
+يجب أن تستخدم وظيفة `spreadOut` صيغة spread
+
+```js
+assert.notStrictEqual(spreadOut.toString().search(/[...]/), -1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function spreadOut() {
+  let fragment = ['to', 'code'];
+  let sentence; // Change this line
+  return sentence;
+}
+
+console.log(spreadOut());
+```
+
+# --solutions--
+
+```js
+function spreadOut() {
+  let fragment = ['to', 'code'];
+  let sentence = ['learning', ...fragment, 'is', 'fun'];
+  return sentence;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/copy-an-array-with-the-spread-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/copy-an-array-with-the-spread-operator.md
new file mode 100644
index 00000000000..1285b21ee19
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/copy-an-array-with-the-spread-operator.md
@@ -0,0 +1,102 @@
+---
+id: 587d7b7b367417b2b2512b13
+title: نسخ القائمة باستخدام Spread Operator
+challengeType: 1
+forumTopicId: 301157
+dashedName: copy-an-array-with-the-spread-operator
+---
+
+# --description--
+
+بينما `slice()` تسمح لنا بأن نكون انتقائيين حول أي من عناصر القائمة يجب نسخها، من بين عدة مهام مفيدة أخرى، يتيح لنا <dfn>spread operator</dfn> نسخ *كل* عناصر القائمة بسهولة وبالترتيب، باستخدام كود بسيط ومقروء بسهولة. صيغة spread تبدو ببساطة هكذا: `...`
+
+من الناحية العملية، يمكننا استخدام spread operator لنسخ قائمة هكذا مثلا:
+
+```js
+let thisArray = [true, true, undefined, false, null];
+let thatArray = [...thisArray];
+```
+
+`thatArray` تساوي `[true, true, undefined, false, null]`. `thisArray` تبقى دون تغيير و `thatArray` تحتوي على نفس العناصر مثل `thisArray`.
+
+# --instructions--
+
+لقد حددنا الوظيفة `copyMachine`, التي تأخذ `arr` (قائمة) و `num` (رَقْم) كحجج (arguments). من المفترض أن ترجع الوظيفة قائمة جديدة تتكون من `num` نسخ من `arr`. لقد قمنا بمعظم العمل من أجلكم، ولكن مازال لا يعمل بشكل صحيح حتى الآن. عدّل الوظيفة باستخدام صيغة spread بحيث تعمل بشكل صحيح (تلميح: وظيفة أخرى غطيتنها من قبل قد تكون مفيدة هنا!).
+
+# --hints--
+
+`copyMachine([true, false, true], 2)` يجب أن تنتج `[[true, false, true], [true, false, true]]`
+
+```js
+assert.deepEqual(copyMachine([true, false, true], 2), [
+  [true, false, true],
+  [true, false, true]
+]);
+```
+
+`copyMachine([1, 2, 3], 5)` يجب أن تنتج `[[1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3], [1, 2, 3]]`
+
+```js
+assert.deepEqual(copyMachine([1, 2, 3], 5), [
+  [1, 2, 3],
+  [1, 2, 3],
+  [1, 2, 3],
+  [1, 2, 3],
+  [1, 2, 3]
+]);
+```
+
+`copyMachine([true, true, null], 1)` يجب أن تنتج `[[true, true, null]]`
+
+```js
+assert.deepEqual(copyMachine([true, true, null], 1), [[true, true, null]]);
+```
+
+`copyMachine(["it works"], 3)` يجب أن تنتج `[["it works"], ["it works"], ["it works"]]`
+
+```js
+assert.deepEqual(copyMachine(['it works'], 3), [
+  ['it works'],
+  ['it works'],
+  ['it works']
+]);
+```
+
+يجب أن تستخدم وظيفة `copyMachine` عملية `spread operator` مع القائمة `arr`
+
+```js
+assert(code.match(/\.\.\.arr/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function copyMachine(arr, num) {
+  let newArr = [];
+  while (num >= 1) {
+    // Only change code below this line
+
+    // Only change code above this line
+    num--;
+  }
+  return newArr;
+}
+
+console.log(copyMachine([true, false, true], 2));
+```
+
+# --solutions--
+
+```js
+function copyMachine(arr,num){
+    let newArr=[];
+    while(num >=1){
+    newArr.push([...arr]);
+    num--;
+    }
+    return newArr;
+}
+console.log(copyMachine([true, false, true], 2));
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/copy-array-items-using-slice.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/copy-array-items-using-slice.md
new file mode 100644
index 00000000000..170d63e5985
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/copy-array-items-using-slice.md
@@ -0,0 +1,65 @@
+---
+id: 587d7b7a367417b2b2512b12
+title: نسخ عناصر القائمة باستخدام slice()
+challengeType: 1
+forumTopicId: 301158
+dashedName: copy-array-items-using-slice
+---
+
+# --description--
+
+الوظيفة التالية التي سنغطيها هي `slice()`. بدلا من تعديل القائمة، `slice()` تنسخ أو *تستخرج* عدد معين من العناصر إلى قائمة جديدة، دون تغيير للقائمة التي استدعت عليها الوظيفة. تأخذ `slice()` معلمتين فقط - الأولى هي ترتيب الذي يبدأ عنده الاستخراج، والثانية هي الترتيب الذي يتم عنده إيقاف الاستخراج (سيحدث الاستخراج حتى الترتيب، ولكن لا يشمل العنصر في هذا الترتيب). ضع في اعتبارك هذا المثال:
+
+```js
+let weatherConditions = ['rain', 'snow', 'sleet', 'hail', 'clear'];
+
+let todaysWeather = weatherConditions.slice(1, 3);
+```
+
+`todaysWeather` ستكون له القيمة `['snow', 'sleet']`، بينما `weatherConditions` ستظل تحتوي على `['rain', 'snow', 'sleet', 'hail', 'clear']`.
+
+وفي الواقع، أنشأنا قائمة جديدة بواسطة استخراج عناصر من قائمة موجودة.
+
+# --instructions--
+
+لقد حددنا الوظيفة `forecast`، التي تأخذ قائمة كحجة (argument). عدل الوظيفة باستخدام `slice()` لاستخراج المعلومات من قائمة الوسيط وأنتج قائمة جديدة تحتوي على عناصر المقاطع النصية `warm` و `sunny`.
+
+# --hints--
+
+`forecast` يجب أن ينتج `["warm", "sunny"]`
+
+```js
+assert.deepEqual(
+  forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']),
+  ['warm', 'sunny']
+);
+```
+
+يجب أن تستخدم وظيفة `forecast` الطريقة `slice()`
+
+```js
+assert(/\.slice\(/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function forecast(arr) {
+  // Only change code below this line
+
+  return arr;
+}
+
+// Only change code above this line
+console.log(forecast(['cold', 'rainy', 'warm', 'sunny', 'cool', 'thunderstorms']));
+```
+
+# --solutions--
+
+```js
+function forecast(arr) {
+  return arr.slice(2,4);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/create-complex-multi-dimensional-arrays.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/create-complex-multi-dimensional-arrays.md
new file mode 100644
index 00000000000..efc1762b435
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/create-complex-multi-dimensional-arrays.md
@@ -0,0 +1,218 @@
+---
+id: 587d7b7b367417b2b2512b16
+title: إنشاء القوائم معقدة متعددة الأبعاد
+challengeType: 1
+forumTopicId: 301159
+dashedName: create-complex-multi-dimensional-arrays
+---
+
+# --description--
+
+رائع! لقد تعلمت للتو طناً من المعلومات عن القوائم! لقد كانت هذه النِّظْرة عامة عالية المستوى إلى حد ما، وهناك الكثير لتتعلمه حول العمل مع القائمات، التي سترى الكثير منها في الأقسام اللاحقة. ولكن قبل الانتقال إلى <dfn>Objects</dfn>، دعنا نلقي النِّظْرة أخرى ونرى كيف يمكن أن تصبح القوائم (arrays) أكثر تعقيدًا قليلاً مما رأيناه في التحديات السابقة.
+
+واحدة من أقوى السمات عند التفكير في القوائم كهياكل للبيانات، هو أن القوائم يمكن أن تحتوي، أو حتى إن تكون مكونة بالكامل من قوائم أخرى. ورأيت القوائم التي تحتوي على قوائم في تحديات سابقة، ولكنها بسيطة إلى حد ما. ومع ذلك، فإن القوائم يمكن أن تحتوي على عمق لا حدود له من القوائم التي يمكن أن تحتوي على قوائم أخرى، لكل منها مستويات عشوائية من العمق وما إلى ذلك. بهذه الطريقة، يمكن للقائمة أن تصبح بسرعة هيكل بيانات معقد جداً، يعرف باسم <dfn>multi-dimensional</dfn> أو قائمة متداخلة (nested array). انظر إلى المثال التالي:
+
+```js
+let nestedArray = [
+  ['deep'],
+  [
+    ['deeper'], ['deeper'] 
+  ],
+  [
+    [
+      ['deepest'], ['deepest']
+    ],
+    [
+      [
+        ['deepest-est?']
+      ]
+    ]
+  ]
+];
+```
+
+قائمة `deep` متداخلة على مستويين عميقين. قوائم `deeper` بعمق 3 مستويات. قوائم `deepest` هي 4 مستويات، و `deepest-est?` هي 5 مستويات.
+
+وفي حين أن هذا المثال قد يبدو متشابكا فإن هذا المستوى من التعقيد ليس مستغربا أو غير عادي عند التعامل مع كميات كبيرة من البيانات. ومع ذلك، لا يزال بإمكاننا الوصول بسهولة إلى أعمق مستويات قائمة بهذا التعقيد باستخدام رمز القوس:
+
+```js
+console.log(nestedArray[2][1][0][0][0]);
+```
+
+يسجل هذا المقطع `deepest-est?`. والآن بعد أن عرفنا أين توجد هذه القطعة من البيانات، يمكننا إعادة تعيينها إذا كنا بحاجة إلى ذلك:
+
+```js
+nestedArray[2][1][0][0][0] = 'deeper still';
+
+console.log(nestedArray[2][1][0][0][0]);
+```
+
+الآن يطبع `deeper still`.
+
+# --instructions--
+
+لقد حددنا متغير `myNestedArray`، تم تعيينه مساوياً لقائمة. عدل `myNestedArray` باستخدام أي مجموعة من <dfn>strings</dfn>، و <dfn>numbers</dfn>، و <dfn>booleans</dfn> لعناصر البيانات، بحيث يكون لديها على وجه التحديد خمس مستويات من العمق (تذكر، أن القائمة الخارجية هي المستوى 1). في مكان ما على المستوى الثالث ضف المقطع `deep`, وعلى المستوى الرابع ضف المقطع `deeper`, وعلى المستوى الخامس ضف المقطع `deepest`.
+
+# --hints--
+
+`myNestedArray` يجب أن تحتوي فقط على numbers و booleans و strings كعناصر بيانات
+
+```js
+assert.strictEqual(
+  (function (arr) {
+    let flattened = (function flatten(arr) {
+      const flat = [].concat(...arr);
+      return flat.some(Array.isArray) ? flatten(flat) : flat;
+    })(arr);
+    for (let i = 0; i < flattened.length; i++) {
+      if (
+        typeof flattened[i] !== 'number' &&
+        typeof flattened[i] !== 'string' &&
+        typeof flattened[i] !== 'boolean'
+      ) {
+        return false;
+      }
+    }
+    return true;
+  })(myNestedArray),
+  true
+);
+```
+
+`myNestedArray` يجب أن تحتوي على 5 مستويات بالضبط من العمق
+
+```js
+assert.strictEqual(
+  (function (arr) {
+    let depth = 0;
+    function arrayDepth(array, i, d) {
+      if (Array.isArray(array[i])) {
+        arrayDepth(array[i], 0, d + 1);
+      } else {
+        depth = d > depth ? d : depth;
+      }
+      if (i < array.length) {
+        arrayDepth(array, i + 1, d);
+      }
+    }
+    arrayDepth(arr, 0, 0);
+    return depth;
+  })(myNestedArray),
+  4
+);
+```
+
+`myNestedArray` يجب أن تحتوي بالضبط على عنصر واحد من المقطع `deep` في قائمة بعمق ثلاث مستويات
+
+```js
+assert(
+  (function howDeep(array, target, depth = 0) {
+    return array.reduce((combined, current) => {
+      if (Array.isArray(current)) {
+        return combined.concat(howDeep(current, target, depth + 1));
+      } else if (current === target) {
+        return combined.concat(depth);
+      } else {
+        return combined;
+      }
+    }, []);
+  })(myNestedArray, 'deep').length === 1 &&
+    (function howDeep(array, target, depth = 0) {
+      return array.reduce((combined, current) => {
+        if (Array.isArray(current)) {
+          return combined.concat(howDeep(current, target, depth + 1));
+        } else if (current === target) {
+          return combined.concat(depth);
+        } else {
+          return combined;
+        }
+      }, []);
+    })(myNestedArray, 'deep')[0] === 2
+);
+```
+
+`myNestedArray` يجب أن تحتوي بالضبط على عنصر واحد من السلسلة `deeper` في قائمة بعمق اربع مستويات
+
+```js
+assert(
+  (function howDeep(array, target, depth = 0) {
+    return array.reduce((combined, current) => {
+      if (Array.isArray(current)) {
+        return combined.concat(howDeep(current, target, depth + 1));
+      } else if (current === target) {
+        return combined.concat(depth);
+      } else {
+        return combined;
+      }
+    }, []);
+  })(myNestedArray, 'deeper').length === 1 &&
+    (function howDeep(array, target, depth = 0) {
+      return array.reduce((combined, current) => {
+        if (Array.isArray(current)) {
+          return combined.concat(howDeep(current, target, depth + 1));
+        } else if (current === target) {
+          return combined.concat(depth);
+        } else {
+          return combined;
+        }
+      }, []);
+    })(myNestedArray, 'deeper')[0] === 3
+);
+```
+
+`myNestedArray` يجب أن تحتوي بالضبط على عنصر واحد من المقطع `deepest` في قائمة بعمق خمس مستويات
+
+```js
+assert(
+  (function howDeep(array, target, depth = 0) {
+    return array.reduce((combined, current) => {
+      if (Array.isArray(current)) {
+        return combined.concat(howDeep(current, target, depth + 1));
+      } else if (current === target) {
+        return combined.concat(depth);
+      } else {
+        return combined;
+      }
+    }, []);
+  })(myNestedArray, 'deepest').length === 1 &&
+    (function howDeep(array, target, depth = 0) {
+      return array.reduce((combined, current) => {
+        if (Array.isArray(current)) {
+          return combined.concat(howDeep(current, target, depth + 1));
+        } else if (current === target) {
+          return combined.concat(depth);
+        } else {
+          return combined;
+        }
+      }, []);
+    })(myNestedArray, 'deepest')[0] === 4
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let myNestedArray = [
+  // Only change code below this line
+  ['unshift', false, 1, 2, 3, 'complex', 'nested'],
+  ['loop', 'shift', 6, 7, 1000, 'method'],
+  ['concat', false, true, 'spread', 'array'],
+  ['mutate', 1327.98, 'splice', 'slice', 'push'],
+  ['iterate', 1.3849, 7, '8.4876', 'arbitrary', 'depth']
+  // Only change code above this line
+];
+```
+
+# --solutions--
+
+```js
+let myNestedArray = [
+  ['unshift', ['deep', ['deeper', ['deepest']]],false, 1, 2, 3, 'complex', 'nested'],
+  ['loop', 'shift', 6, 7, 1000, 'method'],
+  ['concat', false, true, 'spread', 'array'],
+  ['mutate', 1327.98, 'splice', 'slice', 'push'],
+  ['iterate', 1.3849, 7, '8.4876', 'arbitrary', 'depth']
+];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/generate-an-array-of-all-object-keys-with-object.keys.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/generate-an-array-of-all-object-keys-with-object.keys.md
new file mode 100644
index 00000000000..9f73038446f
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/generate-an-array-of-all-object-keys-with-object.keys.md
@@ -0,0 +1,111 @@
+---
+id: 587d7b7d367417b2b2512b1e
+title: إنشاء قائمة (Array) من جميع هُوِيَّات الكائن (Object Keys) باستخدام Object.keys()
+challengeType: 1
+forumTopicId: 301160
+dashedName: generate-an-array-of-all-object-keys-with-object-keys
+---
+
+# --description--
+
+يمكننا أيضا إنشاء array تحتوي على جميع الهُوِيَّات المخزنة في object باستخدام method تدعي `Object.keys()`. تأخذ هذه الطريقة (method) كائن (object) كحجة (argument) وتنتج قائمة من المقاطع (array of strings) تمثل كل خاصية (property) في الكائن (object). مرة أخرى، لن يكون هناك ترتيب محدد للمدخلات في القائمة.
+
+# --instructions--
+
+انهي كتابة وظيفة `getArrayOfUsers` بحيث تنتج قائمة تحتوي على جميع الخصائص في الكائن الذي تتلقاه كحجة (argument).
+
+# --hints--
+
+يجب أن يحتوي كائن `users` فقط على الهُوِيَّات `Alan`, و `Jeff`, و `Sarah`, و `Ryan`
+
+```js
+assert(
+  'Alan' in users &&
+    'Jeff' in users &&
+    'Sarah' in users &&
+    'Ryan' in users &&
+    Object.keys(users).length === 4
+);
+```
+
+يجب أن تقوم وظيفة `getArrayOfUsers` بإنتاج قائمة تحتوي على جميع الهُوِيَّات في كائن `users`
+
+```js
+assert(
+  (function () {
+    users.Sam = {};
+    users.Lewis = {};
+    let R = getArrayOfUsers(users);
+    return (
+      R.indexOf('Alan') !== -1 &&
+      R.indexOf('Jeff') !== -1 &&
+      R.indexOf('Sarah') !== -1 &&
+      R.indexOf('Ryan') !== -1 &&
+      R.indexOf('Sam') !== -1 &&
+      R.indexOf('Lewis') !== -1
+    );
+  })() === true
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let users = {
+  Alan: {
+    age: 27,
+    online: false
+  },
+  Jeff: {
+    age: 32,
+    online: true
+  },
+  Sarah: {
+    age: 48,
+    online: false
+  },
+  Ryan: {
+    age: 19,
+    online: true
+  }
+};
+
+function getArrayOfUsers(obj) {
+  // Only change code below this line
+
+  // Only change code above this line
+}
+
+console.log(getArrayOfUsers(users));
+```
+
+# --solutions--
+
+```js
+let users = {
+  Alan: {
+    age: 27,
+    online: false
+  },
+  Jeff: {
+    age: 32,
+    online: true
+  },
+  Sarah: {
+    age: 48,
+    online: false
+  },
+  Ryan: {
+    age: 19,
+    online: true
+  }
+};
+
+function getArrayOfUsers(obj) {
+  return Object.keys(obj);
+}
+
+console.log(getArrayOfUsers(users));
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-all-an-arrays-items-using-for-loops.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-all-an-arrays-items-using-for-loops.md
new file mode 100644
index 00000000000..781ca657474
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-all-an-arrays-items-using-for-loops.md
@@ -0,0 +1,138 @@
+---
+id: 587d7b7b367417b2b2512b15
+title: المرور علي كل عناصر القائمة باستخدام For Loops
+challengeType: 1
+forumTopicId: 301161
+dashedName: iterate-through-all-an-arrays-items-using-for-loops
+---
+
+# --description--
+
+في بعض الأحيان عند العمل مع القوائم، من المفيد جدا أن نكون قادرين على المرور علي كل عنصر للعثور على عنصر أو أكثر قد تحتاجه، أو للتلاعب بالقائمة استنادا على عناصر تستوفي مجموعة معينة من المعايير. توفر JavaScript العديد من الوظائف المدمجة كل منها تمر علي عناصر القوائم بطرق مختلفة قليلاً لتحقيق نتائج مختلفة (مثل `every()`, و `forEach()`, و `map()`, والخ.) ، ولكن التقنية الأكثر مرونة التي توفر لنا أكبر قدر من التحكم هي حلقة `for`.
+
+انظر إلى المثال التالي:
+
+```js
+function greaterThanTen(arr) {
+  let newArr = [];
+  for (let i = 0; i < arr.length; i++) {
+    if (arr[i] > 10) {
+      newArr.push(arr[i]);
+    }
+  }
+  return newArr;
+}
+
+greaterThanTen([2, 12, 8, 14, 80, 0, 1]);
+```
+
+باستخدام حلقة `for`، هذه الوظيفة تمر علي كل عنصر في القائمة، وتخضعه لاختبار بسيط قمنا بإنشائه. بهذه الطريقة، حددت بسهولة وبرمجيًا العناصر التي هي أكبر من `10`، وأنشئت قائمة جديدة تحتوي على تلك العناصر `[12, 14, 80]`.
+
+# --instructions--
+
+لقد حددنا وظيفة `filteredArray`، التي تأخذ `arr`، وقائمة متداخلة، و `elem`، كحجج، وتنتج قائمة جديدة. `elem` يمثل عنصرا قد يكون أو لا يكون موجودا على واحد أو أكثر من القوائم المتداخلة داخل `arr`. عدّل الوظيفة باستخدام حلقة `for`، لإنتاج قائمة تم تصفيتها بحيث تمت إزالة أي قائمة متداخلة داخل `arr` تحتوي على `elem`.
+
+# --hints--
+
+`filteredArray([[10, 8, 3], [14, 6, 23], [3, 18, 6]], 18)` يجب أن ينتج `[[10, 8, 3], [14, 6, 23]]`
+
+```js
+assert.deepEqual(
+  filteredArray(
+    [
+      [10, 8, 3],
+      [14, 6, 23],
+      [3, 18, 6]
+    ],
+    18
+  ),
+  [
+    [10, 8, 3],
+    [14, 6, 23]
+  ]
+);
+```
+
+`filteredArray([["trumpets", 2], ["flutes", 4], ["saxophones", 2]], 2)` يجب أن ينتج `[["flutes", 4]]`
+
+```js
+assert.deepEqual(
+  filteredArray(
+    [
+      ['trumpets', 2],
+      ['flutes', 4],
+      ['saxophones', 2]
+    ],
+    2
+  ),
+  [['flutes', 4]]
+);
+```
+
+`filteredArray([["amy", "beth", "sam"], ["dave", "sean", "peter"]], "peter")` يجب أن ينتج `[["amy", "beth", "sam"]]`
+
+```js
+assert.deepEqual(
+  filteredArray(
+    [
+      ['amy', 'beth', 'sam'],
+      ['dave', 'sean', 'peter']
+    ],
+    'peter'
+  ),
+  [['amy', 'beth', 'sam']]
+);
+```
+
+`filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3)` يجب أن ينتج `[]`
+
+```js
+assert.deepEqual(
+  filteredArray(
+    [
+      [3, 2, 3],
+      [1, 6, 3],
+      [3, 13, 26],
+      [19, 3, 9]
+    ],
+    3
+  ),
+  []
+);
+```
+
+يجب أن تستخدم وظيفة `filteredArray` الحلقة `for`
+
+```js
+assert.notStrictEqual(filteredArray.toString().search(/for/), -1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function filteredArray(arr, elem) {
+  let newArr = [];
+  // Only change code below this line
+
+  // Only change code above this line
+  return newArr;
+}
+
+console.log(filteredArray([[3, 2, 3], [1, 6, 3], [3, 13, 26], [19, 3, 9]], 3));
+```
+
+# --solutions--
+
+```js
+function filteredArray(arr, elem) {
+  let newArr = [];
+  for (let i = 0; i<arr.length; i++) {
+    if (arr[i].indexOf(elem) < 0) {
+      newArr.push(arr[i]);
+    }
+  }
+  return newArr;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md
new file mode 100644
index 00000000000..c1a2632741d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/iterate-through-the-keys-of-an-object-with-a-for...in-statement.md
@@ -0,0 +1,152 @@
+---
+id: 587d7b7d367417b2b2512b1d
+title: المرور علي هُوِيَّات الكائن باستخدام for في تعبيرات (Iterate Through the Keys of an Object with a for...in Statement)
+challengeType: 1
+forumTopicId: 301162
+dashedName: iterate-through-the-keys-of-an-object-with-a-for---in-statement
+---
+
+# --description--
+
+في بعض الأحيان قد تحتاج إلى المرور علي جميع keys داخل object. يتطلب هذه صياغة محددة في JavaScript تسمى <dfn>for...in</dfn>. بالنسبة إلى object باسم `users`، يمكن أن يبدو هذا كالتالي:
+
+```js
+for (let user in users) {
+  console.log(user);
+}
+```
+
+سيؤدي هذا إلى تسجيل `Alan`, و `Jeff`, و `Sarah` - كل قيمة على سطرها الخاص.
+
+في هذه العبارة حددت متغيرًا `user`، وكما ترى, تمت إعادة تعيين هذا المتغير خلال كل دورة لكل key من keys في object، مما أدى إلى ظهور اسم كل مستخدم مطبوع في وحدة التحكم.
+
+**ملاحظة:** لا تحتفظ كائن (objects) بترتيب هُوِيَّات (keys) المخزنة مثل قوائم (arrays)؛ لذا فإنّ مكان الهُوِيَّة (key) على كائن (object) ما، أو الترتيب النسبي الذي يظهر به، لا يهم عند الإشارة إلى تلك الهُوِيَّة (key) أو الوصول إليه.
+
+# --instructions--
+
+لقد حددنا وظيفة `countOnline` التي تقبل حجة (argument) واحدة (وهي users object). استخدم <dfn>for...in</dfn> داخل هذه الوظيفة (function) للمرور بتكرار علي users object الذي تم تمريره في (function) وإنتاج عدد المستخدمين الذين تم تعيين خاصية `online` الخاصة بهم إلى `true`. مثال على users object الذي يمكن تمريره إلى `countOnline` يظهر أدناه. سيكون لكل مستخدم خاصية `online` بقيمة `true` أو `false`.
+
+```js
+{
+  Alan: {
+    online: false
+  },
+  Jeff: {
+    online: true
+  },
+  Sarah: {
+    online: false
+  }
+}
+```
+
+# --hints--
+
+الوظيفة `countOnline` يجب أن تستخدم `for in` للمرور علي هُوِيَّات الكائن (object keys) من كائن (object) المّرر إليه.
+
+```js
+assert(
+  code.match(
+    /for\s*\(\s*(var|let|const)\s+[a-zA-Z_$]\w*\s+in\s+[a-zA-Z_$]\w*\s*\)/
+  )
+);
+```
+
+الوظيفة `countOnline` يجب أن تنتج `1` عندما يمّرر إليها الكائن (object) الآتي `{ Alan: { online: false }, Jeff: { online: true }, Sarah: { online: false } }`
+
+```js
+assert(countOnline(usersObj1) === 1);
+```
+
+الوظيفة `countOnline` يجب أن تنتج `2` عندما يمّرر إليها الكائن (object) الآتي `{ Alan: { online: true }, Jeff: { online: false }, Sarah: { online: true } }`
+
+```js
+assert(countOnline(usersObj2) === 2);
+```
+
+الوظيفة `countOnline` يجب أن تنتج `0` عندما يمّرر إليها الكائن (object) الآتي `{ Alan: { online: false }, Jeff: { online: false }, Sarah: { online: false } }`
+
+```js
+assert(countOnline(usersObj3) === 0);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const usersObj1 = {
+  Alan: {
+    online: false
+  },
+  Jeff: {
+    online: true
+  },
+  Sarah: {
+    online: false
+  }
+}
+
+const usersObj2 = {
+  Alan: {
+    online: true
+  },
+  Jeff: {
+    online: false
+  },
+  Sarah: {
+    online: true
+  }
+}
+
+
+const usersObj3 = {
+  Alan: {
+    online: false
+  },
+  Jeff: {
+    online: false
+  },
+  Sarah: {
+    online: false
+  }
+}
+```
+
+## --seed-contents--
+
+```js
+const users = {
+  Alan: {
+    online: false
+  },
+  Jeff: {
+    online: true
+  },
+  Sarah: {
+    online: false
+  }
+}
+
+function countOnline(usersObj) {
+  // Only change code below this line
+
+  // Only change code above this line
+}
+
+console.log(countOnline(users));
+```
+
+# --solutions--
+
+```js
+function countOnline(usersObj) {
+  let online = 0;
+  for(let user in usersObj){
+    if(usersObj[user].online) {
+      online++;
+    }
+  }
+  return online;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/modify-an-array-stored-in-an-object.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/modify-an-array-stored-in-an-object.md
new file mode 100644
index 00000000000..9822d9b83ce
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/modify-an-array-stored-in-an-object.md
@@ -0,0 +1,112 @@
+---
+id: 587d7b7d367417b2b2512b1f
+title: تعديل القائمة مخزنة في كائن
+challengeType: 1
+forumTopicId: 301163
+dashedName: modify-an-array-stored-in-an-object
+---
+
+# --description--
+
+الآن لقد رأيتم جميع العمليات الأساسية لكائنات JavaScript. يمكنك إضافة وتعديل وإزالة أزواج key-value، والتحقق مما إذا كانت الهُوِيَّات موجودة، والمرور فوق جميع الهُوِيَّات في الكائن. بينما تستمر في تعلم JavaScript سترى تطبيقات أكثر تنوعاً للكائنات. وبالإضافة إلى ذلك، دروس هياكل البيانات الموجودة في قسم تمهيد مقابلة العمل من المنهج الدراسي تغطي أيضًا الكائنات <dfn>Map ES6</dfn> و <dfn>Set</dfn>, وكلاهما يشبه الكائنات العادية ولكنهما يوفران بعض السمات الإضافية. الآن بعد أن تعلمت أساسيات القوائم والكائنات، أنت مستعد تماما للبدء في معالجة مشكلات أكثر تعقيدا باستخدام JavaScript!
+
+# --instructions--
+
+ألقي النِّظْرة على الكائن الذي قدمناه في محرر التعليمات البرمجية. يحتوي كائن `user` على ثلاث هُوِيَّات. يحتوي هُوِيَّة `data` على خمس هُوِيَّات، يحتوي أحدها على القائمة من `friends`. من هذا، يمكنك أن ترى مدى مرونة الكائنات مثل هياكل البيانات. لقد بدأنا كتابة وظيفة `addFriend`. إنهاء الكتابة بحيث يأخذ كائن `user` ويضيف اسم وسيطة `friend` للقائمة المخزنة في `user.data.friends` وأنشئ تلك القائمة.
+
+# --hints--
+
+يجب أن يكون الكائن `user` لديه هُوِيَّات `name`, و `age`, و `data`.
+
+```js
+assert('name' in user && 'age' in user && 'data' in user);
+```
+
+يجب أن تقبل وظيفة `addFriend` كائن `user` مقطع نصي `friend` كوسيطات و أضف friend إلى قائمة `friends` في كائن `user`.
+
+```js
+assert(
+  (function () {
+    let L1 = user.data.friends.length;
+    addFriend(user, 'Sean');
+    let L2 = user.data.friends.length;
+    return L2 === L1 + 1;
+  })()
+);
+```
+
+`addFriend(user, "Pete")` يجب أن ينشئ `["Sam", "Kira", "Tomo", "Pete"]`.
+
+```js
+assert.deepEqual(
+  (function () {
+    delete user.data.friends;
+    user.data.friends = ['Sam', 'Kira', 'Tomo'];
+    return addFriend(user, 'Pete');
+  })(),
+  ['Sam', 'Kira', 'Tomo', 'Pete']
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let user = {
+  name: 'Kenneth',
+  age: 28,
+  data: {
+    username: 'kennethCodesAllDay',
+    joinDate: 'March 26, 2016',
+    organization: 'freeCodeCamp',
+    friends: [
+      'Sam',
+      'Kira',
+      'Tomo'
+    ],
+    location: {
+      city: 'San Francisco',
+      state: 'CA',
+      country: 'USA'
+    }
+  }
+};
+
+function addFriend(userObj, friend) {
+  // Only change code below this line
+
+  // Only change code above this line
+}
+
+console.log(addFriend(user, 'Pete'));
+```
+
+# --solutions--
+
+```js
+let user = {
+  name: 'Kenneth',
+  age: 28,
+  data: {
+    username: 'kennethCodesAllDay',
+    joinDate: 'March 26, 2016',
+    organization: 'freeCodeCamp',
+    friends: [
+      'Sam',
+      'Kira',
+      'Tomo'
+    ],
+    location: {
+      city: 'San Francisco',
+      state: 'CA',
+      country: 'USA'
+    }
+  }
+};
+
+function addFriend(userObj, friend) {
+  userObj.data.friends.push(friend);
+  return userObj.data.friends;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/modify-an-object-nested-within-an-object.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/modify-an-object-nested-within-an-object.md
new file mode 100644
index 00000000000..f3a9f1376c7
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/modify-an-object-nested-within-an-object.md
@@ -0,0 +1,101 @@
+---
+id: 587d7b7c367417b2b2512b19
+title: تعديل كائن متداخل داخل كائن (Modify an Object Nested Within an Object)
+challengeType: 1
+forumTopicId: 301164
+dashedName: modify-an-object-nested-within-an-object
+---
+
+# --description--
+
+ألقي نَّظْرَة على كائن أكثر تعقيداً قليلاً. يمكن أن تكون خصائص object متداخلة إلى عمق اعتباطي، ويمكن أن تكون قيمهم أي نوع من البيانات المدعومة من قبل JavaScript، بما في ذلك القائمات (arrays) حتى الكائنات (objects) أخرى. انظر إلى ما يلي:
+
+```js
+let nestedObject = {
+  id: 28802695164,
+  date: 'December 31, 2016',
+  data: {
+    totalUsers: 99,
+    online: 80,
+    onlineStatus: {
+      active: 67,
+      away: 13,
+      busy: 8
+    }
+  }
+};
+```
+
+`nestedObject` له ثلاث خواص: `id` (القيمة رَقَم)، `date` (القيمة هي string)، و `data` (القيمة object مع بنيته المتداخلة). ومع أن الهياكل يمكن أن تصبح معقدة بسرعة، إلا أننا لا نزال نستطيع استخدام نفس الوظائف للوصول إلى المعلومات التي تحتاجها. لتعيين قيمة `10` إلى خاصية `busy` من object المتداخل `onlineStatus`، نحن نستخدم dot notation للإشارة إلى الخاصية:
+
+```js
+nestedObject.data.onlineStatus.busy = 10;
+```
+
+# --instructions--
+
+هنا تعرف كائن `userActivity`، الذي يتضمن object آخر داخله. عيّن قيمة هُوِيَّة `online` بقيمة `45`.
+
+# --hints--
+
+`userActivity` يجب أن يحتوي على الخواص `id`, و `date`, و `data`.
+
+```js
+assert(
+  'id' in userActivity && 'date' in userActivity && 'data' in userActivity
+);
+```
+
+`userActivity` يجب أن يحتوي على هُوِيَّة `data` بقيمة object يحتوي على الهُوِيَّات الآتية `totalUsers` و `online`.
+
+```js
+assert('totalUsers' in userActivity.data && 'online' in userActivity.data);
+```
+
+الخاصية `online` المتداخلة في هُوِيَّة `data` من `userActivity` يجب أن تكون قيمتها `45`
+
+```js
+assert(userActivity.data.online === 45);
+```
+
+يجب تعيين خاصية `online` باستخدام dot او bracket notation.
+
+```js
+assert.strictEqual(code.search(/online: 45/), -1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let userActivity = {
+  id: 23894201352,
+  date: 'January 1, 2017',
+  data: {
+    totalUsers: 51,
+    online: 42
+  }
+};
+
+// Only change code below this line
+
+// Only change code above this line
+
+console.log(userActivity);
+```
+
+# --solutions--
+
+```js
+let userActivity = {
+  id: 23894201352,
+  date: 'January 1, 2017',
+  data: {
+    totalUsers: 51,
+    online: 42
+  }
+};
+
+userActivity.data.online = 45;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/remove-items-from-an-array-with-pop-and-shift.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/remove-items-from-an-array-with-pop-and-shift.md
new file mode 100644
index 00000000000..82de3b5f502
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/remove-items-from-an-array-with-pop-and-shift.md
@@ -0,0 +1,86 @@
+---
+id: 587d78b2367417b2b2512b0f
+title: إزالة العناصر من Array باستخدام pop() و shift()
+challengeType: 1
+forumTopicId: 301165
+dashedName: remove-items-from-an-array-with-pop-and-shift
+---
+
+# --description--
+
+كلاً من `push()` و `unshift()` لديهما functions معارضة و هما: `pop()` و `shift()`. ربما خمنت الآن انه بدلاً من إضافة بواسطة `pop()` تقوم *بإزالة* عنصر من نهاية array، بينما `shift()` يزيل عنصر من البداية. الفرق الرئيس بين `pop()` و `shift()` وأمثالهم `push()` و `unshift()`, هو أن أيا من الطريقتين لا يأخذ parameters، ويسمح كل منهما فقط بتعديل array بعنصر واحد فقط في كل مرة.
+
+ألقي نَّظْرَة:
+
+```js
+let greetings = ['whats up?', 'hello', 'see ya!'];
+
+greetings.pop();
+```
+
+`greetings` ستكون لها القيمة `['whats up?', 'hello']`.
+
+```js
+greetings.shift();
+```
+
+`greetings` ستكون لها القيمة `['hello']`.
+
+يمكننا أيضًا إرجاع قيمة العنصر الذي تمت إزالته بأي من الطريقتين مثل:
+
+```js
+let popped = greetings.pop();
+```
+
+ستكون `greetings` لها قيمة `[]`، وستكون `popped` لها قيمة `hello`.
+
+# --instructions--
+
+لقد حددنا الوظيفة `popShift` التي تأخذ array مثل argument وتُنشئ array جديدة. عدل function، باستخدام `pop()` و `shift()`، لإزالة العنصرين الأول والأخير من argument في array, عيّن العناصر التي تمت إزالتها إلى المتغيرات المقابلة، بحيث تحتوي array المنتج على قيمهم.
+
+# --hints--
+
+`popShift(["challenge", "is", "not", "complete"])` يجب أن ينتج `["challenge", "complete"]`
+
+```js
+assert.deepEqual(popShift(['challenge', 'is', 'not', 'complete']), [
+  'challenge',
+  'complete'
+]);
+```
+
+يجب أن تستخدم وظيفة `popShift` الطريقة `pop()`
+
+```js
+assert.notStrictEqual(popShift.toString().search(/\.pop\(/), -1);
+```
+
+يجب أن تستخدم وظيفة `popShift` الطريقة `shift()`
+
+```js
+assert.notStrictEqual(popShift.toString().search(/\.shift\(/), -1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function popShift(arr) {
+  let popped; // Change this line
+  let shifted; // Change this line
+  return [shifted, popped];
+}
+
+console.log(popShift(['challenge', 'is', 'not', 'complete']));
+```
+
+# --solutions--
+
+```js
+function popShift(arr) {
+  let popped = arr.pop(); // Change this line
+  let shifted = arr.shift(); // Change this line
+  return [shifted, popped];
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/remove-items-using-splice.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/remove-items-using-splice.md
new file mode 100644
index 00000000000..147ad02896e
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/remove-items-using-splice.md
@@ -0,0 +1,87 @@
+---
+id: 587d78b2367417b2b2512b10
+title: أستخدم splice() لإزالة عناصر
+challengeType: 1
+forumTopicId: 301166
+dashedName: remove-items-using-splice
+---
+
+# --description--
+
+حسنًا، لقد تعلمنا كيفية إزالة العناصر من بداية ونهاية arrays باستخدام `shift()` و `pop()`، ولكن ماذا لو أردت إزالة عنصر من مكان ما في المنتصف؟ أم إزالة أكثر من عنصر واحد في المرة الواحدة؟ هنا يأتي دور `splice()`. `splice()` تسمح لنا بالقيام بما يلي: **إزالة أي عدد من العناصر المتتالية** من أي مكان في array.
+
+`splice()` يمكن أن يأخذ ما يصل إلى 3 parameters، ولكن في الوقت الحالي، سنركز على أول 2 parameters. أول ٢ parameters في `splice()` هما أعداد صحيحة تمثل indexes، أو أماكن العناصر في array التي تستدعهم `splice()`. وتذكر أن arrays هم *zero-indexed*، بحيث لنشير إلى العنصر الأول في array، سوف تستخدم `0`. يمثل أول parameter في `splice()` الترتيب (index) في array التي تبدأ منها إزالة العناصر، بينما parameter الثاني يشير إلى عدد العناصر المراد حذفها. على سبيل المثال:
+
+```js
+let array = ['today', 'was', 'not', 'so', 'great'];
+
+array.splice(2, 2);
+```
+
+هنا تزل عنصرين بدءاً بالعنصر الثالث (عند index ٢). سيكون `array` بقيمة `['today', 'was', 'great']`.
+
+لا يعدل `splice()` القائمة فقط الذي يتم استدعاؤها فحسب، بل تقوم أيضًا بإنتاج array جديدة تحتوي على قيمة العناصر المُزالة:
+
+```js
+let array = ['I', 'am', 'feeling', 'really', 'happy'];
+
+let newArray = array.splice(3, 2);
+```
+
+`newArray` لديه القيمة `['really', 'happy']`.
+
+# --instructions--
+
+لقد قمنا بتهيئة array بأسم `arr`. استخدم `splice()` لإزالة العناصر من `arr`، بحيث لا تحتوي إلا على عناصر نتيجة جمعها يكون `10`.
+
+# --hints--
+
+لا ينبغي تغيير السطر الأصلي `const arr = [2, 4, 5, 1, 7, 5, 2, 1];`.
+
+```js
+assert(
+  __helpers.removeWhiteSpace(code).match(/constarr=\[2,4,5,1,7,5,2,1\];?/)
+);
+```
+
+`arr` يجب أن يحتوي فقط على عناصر مجموعها يكون `10`.
+
+```js
+assert.strictEqual(
+  arr.reduce((a, b) => a + b),
+  10
+);
+```
+
+يجب أن يستخدم التعلميات البرمجية الخاص بك وظيفة `splice()` علي `arr`.
+
+```js
+assert(__helpers.removeWhiteSpace(code).match(/arr\.splice\(/));
+```
+
+يجب فقط إزالة العناصر من `arr` وعدم إضافة أي عناصر إضافية إلى `arr`.
+
+```js
+assert(
+  !__helpers.removeWhiteSpace(code).match(/arr\.splice\(\d+,\d+,\d+.*\)/g)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const arr = [2, 4, 5, 1, 7, 5, 2, 1];
+// Only change code below this line
+
+// Only change code above this line
+console.log(arr);
+```
+
+# --solutions--
+
+```js
+const arr = [2, 4, 5, 1, 7, 5, 2, 1];
+arr.splice(1, 4);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/use-an-array-to-store-a-collection-of-data.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/use-an-array-to-store-a-collection-of-data.md
new file mode 100644
index 00000000000..ef3dbe392a7
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/use-an-array-to-store-a-collection-of-data.md
@@ -0,0 +1,95 @@
+---
+id: 587d7b7e367417b2b2512b20
+title: استخدام القائمة لتخزين مجموعة من البيانات (Use an Array to Store a Collection of Data)
+challengeType: 1
+forumTopicId: 301167
+dashedName: use-an-array-to-store-a-collection-of-data
+---
+
+# --description--
+
+أدناه مثال على أبسط تنفيذ لهيكل البيانات Array. هذا معروف باسم <dfn>one-dimensional array</dfn>، بمعنى أن لديه مستوى واحد فقط، أو أنه ليس لديه أي Arrays أخرى داخله. لاحظ أنه يحتوي على <dfn>booleans</dfn> و <dfn>strings</dfn> و <dfn>numbers</dfn> من بين أنواع بيانات أخرى في JavaScript:
+
+```js
+let simpleArray = ['one', 2, 'three', true, false, undefined, null];
+console.log(simpleArray.length);
+```
+
+استدعاء `console.log` سوف يطبع `7`.
+
+جميع Arrays لديها خاصية length، التي كما هو مبين أعلاه، يمكن الوصول إليها بسهولة عن طريق syntax الآتي`Array.length`. ويمكن الاطلاع أدناه على تنفيذ array أكثر تعقيداً. هذا معروف باسم <dfn>multi-dimensional array</dfn>، أو Array تحتوي على Arrays أخرى. لاحظ أن هذه Array تحتوي أيضًا على <dfn>كائنات</dfn> JavaScript، التي سوف تفحصها بدقة كبيرة في القسم التالي، لكن في الوقت الحالي، ما تحتاج معرفته هو أن arrays قادرة أيضا على تخزين objects المعقدة.
+
+```js
+let complexArray = [
+  [
+    {
+      one: 1,
+      two: 2
+    },
+    {
+      three: 3,
+      four: 4
+    }
+  ],
+  [
+    {
+      a: "a",
+      b: "b"
+    },
+    {
+      c: "c",
+      d: "d"
+    }
+  ]
+];
+```
+
+# --instructions--
+
+لقد حددنا متغير يسمى `yourArray`. أكمل البيان بتعيين array من 5 عناصر في الأقل في الطول لمتغير `yourArray`. يجب أن تحتوي array على <dfn>string</dfn>واحد علي الأفل و <dfn>number</dfn> واحد و <dfn>boolean</dfn> واحد.
+
+# --hints--
+
+`yourArray` يجب أن تكون array.
+
+```js
+assert.strictEqual(Array.isArray(yourArray), true);
+```
+
+يجب أن يكون `yourArray` طوله 5 عناصر في الأقل.
+
+```js
+assert.isAtLeast(yourArray.length, 5);
+```
+
+يجب أن يحتوي `yourArray` على `boolean` واحد في الأقل.
+
+```js
+assert(yourArray.filter((el) => typeof el === 'boolean').length >= 1);
+```
+
+يجب أن يحتوي `yourArray` على `number` واحد في الأقل.
+
+```js
+assert(yourArray.filter((el) => typeof el === 'number').length >= 1);
+```
+
+يجب أن يحتوي `yourArray` على `string` واحد في الأقل.
+
+```js
+assert(yourArray.filter((el) => typeof el === 'string').length >= 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let yourArray; // Change this line
+```
+
+# --solutions--
+
+```js
+let yourArray = ['a string', 100, true, ['one', 2], 'another string'];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/use-the-delete-keyword-to-remove-object-properties.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/use-the-delete-keyword-to-remove-object-properties.md
new file mode 100644
index 00000000000..57e8875e52d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-data-structures/use-the-delete-keyword-to-remove-object-properties.md
@@ -0,0 +1,86 @@
+---
+id: 587d7b7c367417b2b2512b1b
+title: استخدم كلمة delete لإزالة خصائص الكائن (Use the delete Keyword to Remove Object Properties)
+challengeType: 1
+forumTopicId: 301168
+dashedName: use-the-delete-keyword-to-remove-object-properties
+---
+
+# --description--
+
+الآن أنت تعرف ما هي objects ومميزاتها الأساسية. وباختصار، فهي مخازن بطريقه key-value توفر طريقة مرنة وبديهية لهيكلة البيانات، ***و***، و توفر وقت بحث سريع جدا. وطوال بقية هذه التحديات، سوف نصف عدة عمليات مشتركة يمكنك القيام بها على objects حتى تصبح مرتاحا في تطبيق هياكل البيانات المفيدة هذه في برامجك.
+
+في تحديات سابقة، إضافة وتعديل أزواج key-value في object ما. هنا سنرى كيف يمكننا *إزالة* زوج key-value من object.
+
+عد النظر في مثال object باسم `foods` مرة أخيرة. إذا أردنا إزالة key باسم `apples`، يمكننا إزالته باستخدام كلمة `delete` هكذا:
+
+```js
+delete foods.apples;
+```
+
+# --instructions--
+
+استخدم كلمة delete لإزالة keys الآتية `oranges`, و `plums`, و `strawberries` من object باسم `foods`.
+
+# --hints--
+
+يجب أن يحتوي object باسم `foods` على ثلاث keys فقط: `apples`, و `grapes`, و `bananas`.
+
+```js
+assert(
+  !foods.hasOwnProperty('oranges') &&
+    !foods.hasOwnProperty('plums') &&
+    !foods.hasOwnProperty('strawberries') &&
+    Object.keys(foods).length === 3
+);
+```
+
+يجب إزالة keys الآتية `oranges`, و `plums`, و `strawberries` باستخدام `delete`.
+
+```js
+assert(
+  code.search(/oranges:/) !== -1 &&
+    code.search(/plums:/) !== -1 &&
+    code.search(/strawberries:/) !== -1
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let foods = {
+  apples: 25,
+  oranges: 32,
+  plums: 28,
+  bananas: 13,
+  grapes: 35,
+  strawberries: 27
+};
+
+// Only change code below this line
+
+// Only change code above this line
+
+console.log(foods);
+```
+
+# --solutions--
+
+```js
+let foods = {
+  apples: 25,
+  oranges: 32,
+  plums: 28,
+  bananas: 13,
+  grapes: 35,
+  strawberries: 27
+};
+
+delete foods.oranges;
+delete foods.plums;
+delete foods.strawberries;
+
+console.log(foods);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md
new file mode 100644
index 00000000000..f7ec3c9a182
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-array-data-with-indexes.md
@@ -0,0 +1,87 @@
+---
+id: 56bbb991ad1ed5201cd392ca
+title: الوصول إلى بيانات القائمة باستخدام الترتيب (Access Array Data with Indexes)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cBZQbTz'
+forumTopicId: 16158
+dashedName: access-array-data-with-indexes
+---
+
+# --description--
+
+يمكننا الوصول إلى البيانات داخل القائمات باستخدام <dfn>الترتيب</dfn>.
+
+Array indexes تكتب بنفس الأقواس التي تستخدم في مقاطع النصية (strings)، باستثناء أنه بدلاً من تحديد رمز، فإنهم يحددون عنصرا في القائمة (array). مثل المقاطع النصية (strings)، فإن القائمات (arrays) تستخدم القائمة <dfn>تبدأ بالصفر</dfn>، لذا فإن العنصر الأول في القائمة (array) لديه الترتيب (index) برقم `0`.
+
+<br>
+
+**على سبيل المثال**
+
+```js
+const array = [50, 60, 70];
+console.log(array[0]);
+const data = array[1];
+```
+
+`console.log(array[0])` تطبع `50` و `data` بقيمة `60`.
+
+# --instructions--
+
+أنشئ متغير يسمى `myData` وعيّنه ليساوي القيمة الأولى في `myArray` باستخدام bracket notation.
+
+# --hints--
+
+المتغير `myData` يجب أن يساوي القيمة الأولى في `myArray`.
+
+```js
+assert(
+  (function () {
+    if (
+      typeof myArray !== 'undefined' &&
+      typeof myData !== 'undefined' &&
+      myArray[0] === myData
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  })()
+);
+```
+
+البيانات في المتغير `myArray` يجب الوصول إليها باستخدام bracket notation.
+
+```js
+assert(
+  (function () {
+    if (code.match(/\s*=\s*myArray\[0\]/g)) {
+      return true;
+    } else {
+      return false;
+    }
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+if(typeof myArray !== "undefined" && typeof myData !== "undefined"){(function(y,z){return 'myArray = ' + JSON.stringify(y) + ', myData = ' + JSON.stringify(z);})(myArray, myData);}
+```
+
+## --seed-contents--
+
+```js
+const myArray = [50, 60, 70];
+
+
+```
+
+# --solutions--
+
+```js
+const myArray = [50, 60, 70];
+const myData = myArray[0];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md
new file mode 100644
index 00000000000..b0449ba0401
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/access-multi-dimensional-arrays-with-indexes.md
@@ -0,0 +1,77 @@
+---
+id: 56592a60ddddeae28f7aa8e1
+title: الوصول إلى القائمات المتعددة الأبعاد باستخدام الترتيب (Access Multi-Dimensional Arrays With Indexes)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/ckND4Cq'
+forumTopicId: 16159
+dashedName: access-multi-dimensional-arrays-with-indexes
+---
+
+# --description--
+
+إحدى الطرق للتفكير في قائمة <dfn>عديده الأبعاد(multi-dimensional)</dfn> هي تكون *قائمة من قائمات (array of arrays)*. عندما تستخدم أقواس للوصول إلى القائمة (array)، تشير المجموعة الأولى من الأقواس إلى المواد الموجودة في أعلى فئة (المستوى الأول)، ويشير كل زوج إضافي من الأقواس إلى المستوى التالي من الإدخالات في الداخل.
+
+**مثال**
+
+```js
+const arr = [
+  [1, 2, 3],
+  [4, 5, 6],
+  [7, 8, 9],
+  [[10, 11, 12], 13, 14]
+];
+
+const subarray = arr[3];
+const nestedSubarray = arr[3][0];
+const element = arr[3][0][1];
+```
+
+في هذا المثال، لدي `subarray` قيمة `[[10, 11, 12], 13, 14]`, ولدي `nestedSubarray` قيمة `[10, 11, 12]`, ولدي `element` قيمة `11`.
+
+**ملاحظة:** لا ينبغي أن تكون هناك أي مسافات بين اسم القائمة (array) والأقواس المربعة، مثل `array [0][0]` و حتي ذلك `array [0] [0]` ممنوع أيضاً. مع أنّ JavaScript قادر على معالجة هذا الأمر بشكل صحيح، إلا أن هذا قد يحير المبرمجين الآخرين الذين يقرؤون التعليمات البرمجية الخاص بك.
+
+# --instructions--
+
+باستخدام bracket notation، اختر عنصرا من `myArray` بحيث أن `myData` يساوي `8`.
+
+# --hints--
+
+يجب أن يساوي `myData` قيمة `8`.
+
+```js
+assert(myData === 8);
+```
+
+يجب أن تستخدم bracket notation لقراءة القيمة الصحيحة من `myArray`.
+
+```js
+assert(/myData=myArray\[2\]\[1\]/.test(__helpers.removeWhiteSpace(code)));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+if(typeof myArray !== "undefined"){(function(){return "myData: " + myData + " myArray: " + JSON.stringify(myArray);})();}
+```
+
+## --seed-contents--
+
+```js
+const myArray = [
+  [1, 2, 3],
+  [4, 5, 6],
+  [7, 8, 9],
+  [[10, 11, 12], 13, 14],
+];
+
+const myData = myArray[0][0];
+```
+
+# --solutions--
+
+```js
+const myArray = [[1, 2, 3], [4, 5, 6], [7, 8, 9], [[10, 11, 12], 13, 14]];
+const myData = myArray[2][1];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.md
new file mode 100644
index 00000000000..d1cbafdca3b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-arrays.md
@@ -0,0 +1,121 @@
+---
+id: 56533eb9ac21ba0edf2244cd
+title: الوصول إلى القائمات المتداخلة (Accessing Nested Arrays)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cLeGDtZ'
+forumTopicId: 16160
+dashedName: accessing-nested-arrays
+---
+
+# --description--
+
+وكما رأينا في أمثلة سابقة، يمكن أن تحتوي الكائنات (objects) على كائنات متدخلة (nested objects) و قائمات متداخلة (nested arrays). على غرار الوصول إلى الكائنات متدخلة nested objects، يمكن ربط bracket notation في القائمة للوصول إلى القائمات متداخلة (nested arrays).
+
+وفيما يلي مثال على كيفية الوصول إلى القائمة متداخلة nested) array):
+
+```js
+const ourPets = [
+  {
+    animalType: "cat",
+    names: [
+      "Meowzer",
+      "Fluffy",
+      "Kit-Cat"
+    ]
+  },
+  {
+    animalType: "dog",
+    names: [
+      "Spot",
+      "Bowser",
+      "Frankie"
+    ]
+  }
+];
+
+ourPets[0].names[1];
+ourPets[1].names[0];
+```
+
+`ourPets[0].names[1]` ستكوون المقطع نصي (string) الآتي `Fluffy` و `ourPets[1].names[0]` ستكون المقطع نصي (string) الآتي `Spot`.
+
+# --instructions--
+
+باستخدام dot و bracket notation، وعيّن المتغير `secondTree` إلى العنصر الثاني في قائمة `trees` من object باسم `myPlants`.
+
+# --hints--
+
+يجب أن تساوي `secondTree` مقطع (string) الآتي `pine`.
+
+```js
+assert(secondTree === 'pine');
+```
+
+التعليمات البرميجة الخاص بك يجب أن يستخدم dot و bracket notation للوصول إلى `myPlants`.
+
+```js
+assert(/=\s*myPlants\[1\].list\[1\]/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(x) {
+  if(typeof x != 'undefined') {
+    return "secondTree = " + x;
+  }
+  return "secondTree is undefined";
+})(secondTree);
+```
+
+## --seed-contents--
+
+```js
+const myPlants = [
+  {
+    type: "flowers",
+    list: [
+      "rose",
+      "tulip",
+      "dandelion"
+    ]
+  },
+  {
+    type: "trees",
+    list: [
+      "fir",
+      "pine",
+      "birch"
+    ]
+  }
+];
+
+const secondTree = "";
+```
+
+# --solutions--
+
+```js
+const myPlants = [
+  {
+    type: "flowers",
+    list: [
+      "rose",
+      "tulip",
+      "dandelion"
+    ]
+  },
+  {
+    type: "trees",
+    list: [
+      "fir",
+      "pine",
+      "birch"
+    ]
+  }
+];
+
+const secondTree = myPlants[1].list[1];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
new file mode 100644
index 00000000000..3d9ffacd3b8
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-nested-objects.md
@@ -0,0 +1,100 @@
+---
+id: 56533eb9ac21ba0edf2244cc
+title: الوصول إلى الكائنات المتداخلة (Accessing Nested Objects)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cRnRnfa'
+forumTopicId: 16161
+dashedName: accessing-nested-objects
+---
+
+# --description--
+
+يمكن الوصول للخصائص الفرعية (sub-properties) للكائنات (objects) من طريق ربطه برمز النقطة أو القوس.
+
+فيما يلي كائن متداخل (nested object):
+
+```js
+const ourStorage = {
+  "desk": {
+    "drawer": "stapler"
+  },
+  "cabinet": {
+    "top drawer": { 
+      "folder1": "a file",
+      "folder2": "secrets"
+    },
+    "bottom drawer": "soda"
+  }
+};
+
+ourStorage.cabinet["top drawer"].folder2;
+ourStorage.desk.drawer;
+```
+
+سيكون `ourStorage.cabinet["top drawer"].folder2` مقطع (string) الآتي `secrets`, وسيكون `ourStorage.desk.drawer` مقطع (string) الآتي `stapler`.
+
+# --instructions--
+
+الوصول إلى الكائن `myStorage` وعيّن محتوى الخاصية `glove box` إلى المتغير `gloveBoxContents`. حاول استخدام النُّقَط (dot notation) للوصول للخصائص (properties) بقدر الإمكان، وإلا فيمكنك استخدام الأقواس[] (bracket notation).
+
+# --hints--
+
+يجب أن يساوي `gloveBoxContents` مقطع (string) الآتي `maps`.
+
+```js
+assert(gloveBoxContents === 'maps');
+```
+
+التعليمات البرمجية الخاص بك يجب أن يستخدم dot notation و bracket notation للوصول إلى `myStorage`.
+
+```js
+assert(/=\s*myStorage\.car\.inside\[\s*("|')glove box\1\s*\]/g.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(x) { 
+  if(typeof x != 'undefined') { 
+    return "gloveBoxContents = " + x;
+  }
+  return "gloveBoxContents is undefined";
+})(gloveBoxContents);
+```
+
+## --seed-contents--
+
+```js
+const myStorage = {
+  "car": {
+    "inside": {
+      "glove box": "maps",
+      "passenger seat": "crumbs"
+     },
+    "outside": {
+      "trunk": "jack"
+    }
+  }
+};
+
+const gloveBoxContents = undefined;
+```
+
+# --solutions--
+
+```js
+const myStorage = {
+  "car":{
+    "inside":{
+      "glove box":"maps",
+      "passenger seat":"crumbs"
+    },
+    "outside":{
+      "trunk":"jack"
+    }
+  }
+};
+const gloveBoxContents = myStorage.car.inside["glove box"];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md
new file mode 100644
index 00000000000..095d4fe8801
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-bracket-notation.md
@@ -0,0 +1,103 @@
+---
+id: 56533eb9ac21ba0edf2244c8
+title: الوصول خصائص (Properties) الكائن (Object) بواسطة Bracket Notation
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cBvmEHP'
+forumTopicId: 16163
+dashedName: accessing-object-properties-with-bracket-notation
+---
+
+# --description--
+
+الطريقة الثانية للوصول إلى خصائص الكائن هي القوسان المعكوفان (`[]`). في حال إن خاصية الكائن الذي تحاول الوصول إليه يحتوي على مسافة في اسمه, سوف تحتاج إلى استخدام القوسان المعكوفان (bracket notation).
+
+على أية حال, فانه يمكنك أستخدام bracket notation على خصائص الكائن من دون مسافات.
+
+هذا مثال على استخدام bracket notation لقراءة خاصية الكائن:
+
+```js
+const myObj = {
+  "Space Name": "Kirk",
+  "More Space": "Spock",
+  "NoSpace": "USS Enterprise"
+};
+
+myObj["Space Name"];
+myObj['More Space'];
+myObj["NoSpace"];
+```
+
+سوف يحتوي `myObj["Space Name"]` على نص `Kirk`, و سوف يحتوي `myObj['More Space']` على نص `Spock`, و سوف يحتوي `myObj["NoSpace"]` على نص `USS Enterprise`.
+
+لاحظ يجب أن تكون أسماء الخاصية مع المسافات في علامتا التنصيص (أحاديا أو ثنائيا).
+
+# --instructions--
+
+أقراء قيم خصائص `an entree` و `the drink` في `testObj` باستخدام القوسان المعكوفان وتعينهم إلى `entreeValue` و `drinkValue` على التوالي.
+
+# --hints--
+
+يجب أن يكون `entreeValue` مقطع نصي
+
+```js
+assert(typeof entreeValue === 'string');
+```
+
+يجب ان يكون قيمة `entreeValue` نص `hamburger`
+
+```js
+assert(entreeValue === 'hamburger');
+```
+
+يجب أن تكون `drinkValue` نص
+
+```js
+assert(typeof drinkValue === 'string');
+```
+
+يجب أن تكون قيمة `drinkValue` نص `water`
+
+```js
+assert(drinkValue === 'water');
+```
+
+يجب عليك أستخدام القوسان المعكوفان مرتين
+
+```js
+assert(code.match(/testObj\s*?\[('|")[^'"]+\1\]/g).length > 1);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(a,b) { return "entreeValue = '" + a + "', drinkValue = '" + b + "'"; })(entreeValue,drinkValue);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const testObj = {
+  "an entree": "hamburger",
+  "my side": "veggies",
+  "the drink": "water"
+};
+
+// Only change code below this line
+const entreeValue = testObj;   // Change this line
+const drinkValue = testObj;    // Change this line
+```
+
+# --solutions--
+
+```js
+const testObj = {
+  "an entree": "hamburger",
+  "my side": "veggies",
+  "the drink": "water"
+};
+const entreeValue = testObj["an entree"];
+const drinkValue = testObj['the drink'];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md
new file mode 100644
index 00000000000..140c7560b18
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-dot-notation.md
@@ -0,0 +1,100 @@
+---
+id: 56533eb9ac21ba0edf2244c7
+title: الوصول إلى خصائص الكائن مع النقطة التأشير (Accessing Object Properties with Dot Notation)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cGryJs8'
+forumTopicId: 16164
+dashedName: accessing-object-properties-with-dot-notation
+---
+
+# --description--
+
+هناك طريقتان للوصول إلى خصائص الكائن: نقطة التأشير (`.`) وتدوين الأقواس (`[]`)، على غرار القائمة.
+
+ترميز النقطة هو ما تستخدمه عندما تعرف اسم الخاصية التي تحاول الوصول إليها مسبقاً.
+
+هذا مثال من استخدام النقطة التأشير (`.`) لقراءة خاصية الكائن:
+
+```js
+const myObj = {
+  prop1: "val1",
+  prop2: "val2"
+};
+
+const prop1val = myObj.prop1;
+const prop2val = myObj.prop2;
+```
+
+سيكون إلى `prop1val` قيمة نص `val1`، و سيكون إلى `prop2val` قيمة نص `val2`.
+
+# --instructions--
+
+اقرأ في قيم الخاصية `testObj` باستخدام النقطة التأشير. عيّن المتغير `hatValue` مساوية لخاصية الكائن `hat`, وعيّن المتغير `shirtValue` مساوية لخاصية الكائن `shirt`.
+
+# --hints--
+
+قيمة `hatVvalue` يجب أن تكون نص
+
+```js
+assert(typeof hatValue === 'string');
+```
+
+يجب أن تكون قيمة `hatValue` نص `ballcap`
+
+```js
+assert(hatValue === 'ballcap');
+```
+
+يجب أن تكون قيمة `shirtValue` نص
+
+```js
+assert(typeof shirtValue === 'string');
+```
+
+يجب أن تكون قيمة `shirtValue` نص `jersey`
+
+```js
+assert(shirtValue === 'jersey');
+```
+
+يجب عليك استخدام النقطة التأشير مرتين
+
+```js
+assert(code.match(/testObj\.\w+/g).length > 1);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(a,b) { return "hatValue = '" + a + "', shirtValue = '" + b + "'"; })(hatValue,shirtValue);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const testObj = {
+  "hat": "ballcap",
+  "shirt": "jersey",
+  "shoes": "cleats"
+};
+
+// Only change code below this line
+const hatValue = testObj;      // Change this line
+const shirtValue = testObj;    // Change this line
+```
+
+# --solutions--
+
+```js
+const testObj = {
+  "hat": "ballcap",
+  "shirt": "jersey",
+  "shoes": "cleats"
+};
+
+const hatValue = testObj.hat;
+const shirtValue = testObj.shirt;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md
new file mode 100644
index 00000000000..37c8d3ad711
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/accessing-object-properties-with-variables.md
@@ -0,0 +1,107 @@
+---
+id: 56533eb9ac21ba0edf2244c9
+title: الوصول إلى خصائص الكائن باستخدام المتغيرات (Accessing Object Properties with Variables)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cnQyKur'
+forumTopicId: 16165
+dashedName: accessing-object-properties-with-variables
+---
+
+# --description--
+
+وثمة استخدام آخر لترميز آلأقواس للوصول إلى الخصائص المخزنة كقيمة للمتغير. يمكن أن يكون هذا مفيداً جداً خلال تكرار خصائص الكائن أو عند الوصول إلى جدول البحث.
+
+فيما يلي, مثال على استخدام متغير للوصول إلى خاصية ما:
+
+```js
+const dogs = {
+  Fido: "Mutt",
+  Hunter: "Doberman",
+  Snoopie: "Beagle"
+};
+
+const myDog = "Hunter";
+const myBreed = dogs[myDog];
+console.log(myBreed);
+```
+
+سوف يتم عرض `Doberman` في وحدة التحكم (console).
+
+لاحظ أننا *لا* نستخدم علامات التنصيص حول اسم المتغير عند استخدامه للوصول إلى الخاصية لأننا نستخدم *قيمة* المتغير، ليس *الاسم*.
+
+# --instructions--
+
+عيّن متغير `playerNumber` إلى `16`. ثم استخدم المتغير للبحث عن اسم اللاعب وتعيينه إلى `player`.
+
+# --hints--
+
+`playerNumber` يجب أن يكون رقما
+
+```js
+assert(typeof playerNumber === 'number');
+```
+
+المتغير `player` يجب أن يكون مقطع نصي (string)
+
+```js
+assert(typeof player === 'string');
+```
+
+يجب أن تكون قيمة `player` مقطع نصي `Montana`
+
+```js
+assert(player === 'Montana');
+```
+
+يجب عليك استخدام ترميز ألأقواس للوصول إلى `testObj`
+
+```js
+assert(/testObj\s*?\[.*?\]/.test(code));
+```
+
+لا يجب عليك تعيين قيمة `Montana` للمتغير `player` مباشرة.
+
+```js
+assert(!code.match(/player\s*=\s*"|\'\s*Montana\s*"|\'\s*;/gi));
+```
+
+يجب أن تستخدم المتغير `playerNumber` في رمز القوس
+
+```js
+assert(/testObj\s*?\[\s*playerNumber\s*\]/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+if(typeof player !== "undefined"){(function(v){return v;})(player);}
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const testObj = {
+  12: "Namath",
+  16: "Montana",
+  19: "Unitas"
+};
+
+// Only change code below this line
+const playerNumber = 42;  // Change this line
+const player = testObj;   // Change this line
+```
+
+# --solutions--
+
+```js
+const testObj = {
+  12: "Namath",
+  16: "Montana",
+  19: "Unitas"
+};
+const playerNumber = 16;
+const player = testObj[playerNumber];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/add-new-properties-to-a-javascript-object.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/add-new-properties-to-a-javascript-object.md
new file mode 100644
index 00000000000..0c1222e7830
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/add-new-properties-to-a-javascript-object.md
@@ -0,0 +1,90 @@
+---
+id: 56bbb991ad1ed5201cd392d2
+title: إضافة خصائص جديدة إلى كائن في JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cQe38UD'
+forumTopicId: 301169
+dashedName: add-new-properties-to-a-javascript-object
+---
+
+# --description--
+
+بإمكانك إضافة خصائص جديدة إلى كائنات في JavaScript موجودة فعلًا بنفس الطريقة التي تعديلها.
+
+هذه هي طريقة إضافة خاصية `bark` إلى `ourDog`:
+
+```js
+ourDog.bark = "bow-wow";
+```
+
+أو
+
+```js
+ourDog["bark"] = "bow-wow";
+```
+
+الآن عندما نشغل `ourDog.bark`، سنحصل على صوت نُباحه `bow-wow`.
+
+مثال:
+
+```js
+const ourDog = {
+  "name": "Camper",
+  "legs": 4,
+  "tails": 1,
+  "friends": ["everything!"]
+};
+
+ourDog.bark = "bow-wow";
+```
+
+# --instructions--
+
+أضف خاصية `bark` إلى `myDog` وعيّنها إلى صوت الكلاب، مثل "woof". يمكنك استخدام أي من علامة نقط أو علامة الأقواس.
+
+# --hints--
+
+يجب عليك إضافة الخاصية `bark` إلى الكائن `myDog`.
+
+```js
+assert(myDog.bark !== undefined);
+```
+
+لا ينبغي أن تضيف `bark` إلى التعليمات البرمجية تهيئة الكائن `myDog`.
+
+```js
+assert(!/bark[^\n]:/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(z){return z;})(myDog);
+```
+
+## --seed-contents--
+
+```js
+const myDog = {
+  "name": "Happy Coder",
+  "legs": 4,
+  "tails": 1,
+  "friends": ["freeCodeCamp Campers"]
+};
+
+
+```
+
+# --solutions--
+
+```js
+const myDog = {
+  "name": "Happy Coder",
+  "legs": 4,
+  "tails": 1,
+  "friends": ["freeCodeCamp Campers"]
+};
+myDog.bark = "Woof Woof";
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.md
new file mode 100644
index 00000000000..7b572bcb22f
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/add-two-numbers-with-javascript.md
@@ -0,0 +1,62 @@
+---
+id: cf1111c1c11feddfaeb3bdef
+title: إضافة رقمين باستخدام JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cM2KBAG'
+forumTopicId: 16650
+dashedName: add-two-numbers-with-javascript
+---
+
+# --description--
+
+`Number` (رَقَم) هو نوع من أنواع البيانات في لغة JavaScript و هو يمثل بيانات رقمية.
+
+حاول إضافة رقمين باستخدام JavaScript.
+
+تستخدم JavaScript رمز `+` كمعامل الإضافة عند وضعه بين رقمين.
+
+**مثال:**
+
+```js
+const myVar = 5 + 10;
+```
+
+لدي `myVar` الآن القيمة `15`.
+
+# --instructions--
+
+غير `0` بحيث يكون المجموع `20`.
+
+# --hints--
+
+يجب أن `sum` يساوي `20`.
+
+```js
+assert(sum === 20);
+```
+
+يجب عليك استخدام المعامل `+`.
+
+```js
+assert(/\+/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(z){return 'sum = '+z;})(sum);
+```
+
+## --seed-contents--
+
+```js
+const sum = 10 + 0;
+```
+
+# --solutions--
+
+```js
+const sum = 10 + 10;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.md
new file mode 100644
index 00000000000..d72ac1e7b41
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/adding-a-default-option-in-switch-statements.md
@@ -0,0 +1,128 @@
+---
+id: 56533eb9ac21ba0edf2244de
+title: إضافة خِيار افتراضي (Default) في عبارات التبديل (Switch)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c3JvVfg'
+forumTopicId: 16653
+dashedName: adding-a-default-option-in-switch-statements
+---
+
+# --description--
+
+في عبارة `switch` قد لا تكون قادراً على تحديد جميع القيم المحتملة كعبارات `case`. بدلاً من ذلك، يمكنك إضافة عبارة `default` التي سيتم تنفيذها إذا لم يتم العثور على عبارات `case` مطابقة. فكر بالأمر مثل العبارة `else` في `if/else`.
+
+يجب أن تكون عبارة `default` آخر حالة.
+
+```js
+switch (num) {
+  case value1:
+    statement1;
+    break;
+  case value2:
+    statement2;
+    break;
+...
+  default:
+    defaultStatement;
+    break;
+}
+```
+
+# --instructions--
+
+اكتب عبارة التبديل لتعيين `answer` للشروط التالية:  
+`a` - `apple`  
+`b` - `bird`  
+`c` - `cat`  
+`default` - `stuff`
+
+# --hints--
+
+`switchOfStuff("a")` يجب أن يعيد مقطع نصي (string) باسم `apple`
+
+```js
+assert(switchOfStuff('a') === 'apple');
+```
+
+`switchOfStuff("b")` يجب أن ينتج مقطع نصي (string) باسم `bird`
+
+```js
+assert(switchOfStuff('b') === 'bird');
+```
+
+`switchOfStuff("c")` يجب أن ينتج مقطع نصي (string) باسم `cat`
+
+```js
+assert(switchOfStuff('c') === 'cat');
+```
+
+`switchOfStuff("d")` يجب أن ينتج مقطع نصي (string) باسم `stuff`
+
+```js
+assert(switchOfStuff('d') === 'stuff');
+```
+
+`switchOfStuff(4)` يجب أن ينتج مقطع نصي (string) باسم `stuff`
+
+```js
+assert(switchOfStuff(4) === 'stuff');
+```
+
+يجب ألا تستخدم أي عبارات `if` أو `else`
+
+```js
+assert(!/else/g.test(code) || !/if/g.test(code));
+```
+
+يجب أن تستخدم عبارة `default`
+
+```js
+assert(switchOfStuff('string-to-trigger-default-case') === 'stuff');
+```
+
+يجب أن يكون لديك في الأقل ٣ عبارات `break`
+
+```js
+assert(code.match(/break/g).length > 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function switchOfStuff(val) {
+  let answer = "";
+  // Only change code below this line
+
+
+
+  // Only change code above this line
+  return answer;
+}
+
+switchOfStuff(1);
+```
+
+# --solutions--
+
+```js
+function switchOfStuff(val) {
+  let answer = "";
+
+  switch(val) {
+    case "a":
+      answer = "apple";
+      break;
+    case "b":
+      answer = "bird";
+      break;
+    case "c":
+      answer = "cat";
+      break;
+    default:
+      answer = "stuff";
+  }
+  return answer;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/appending-variables-to-strings.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/appending-variables-to-strings.md
new file mode 100644
index 00000000000..1e706f40dcc
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/appending-variables-to-strings.md
@@ -0,0 +1,77 @@
+---
+id: 56533eb9ac21ba0edf2244ed
+title: إلحاق المتغيرات بالمقاطع النصية (Appending Variables to Strings)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cbQmZfa'
+forumTopicId: 16656
+dashedName: appending-variables-to-strings
+---
+
+# --description--
+
+تماما كما يمكننا بناء مقطع نصي (string) مكونة من عدة سطور باستخدام <dfn>الاحرف مقطع نصي (string literals)</dfn>، يمكننا أيضا إلحاق المتغيرات في مقطع نصي (string) معينة باستخدام (`+=`).
+
+على سبيل المثال:
+
+```js
+const anAdjective = "awesome!";
+let ourStr = "freeCodeCamp is ";
+ourStr += anAdjective;
+```
+
+المتغير `ourStr` ستكون قيمته النهائية `freeCodeCamp is awesome!`.
+
+# --instructions--
+
+عرف متغير جديد `someAdjective` بحيث يكون string قيمته مكون من 3 أحرف في الأقل, ثم إلحاقه بمتغير آخر `myStr` باستخدام `+=`.
+
+# --hints--
+
+يجب إن تكون قيمة المتغير `someAdjective` مقطع نصي (string) مكون من 3 حروف في الأقل.
+
+```js
+assert(typeof someAdjective !== 'undefined' && someAdjective.length > 2);
+```
+
+يجب عليك إلحاق المتغير `someAdjective` إلى `myStr` باستخدام `+=`.
+
+```js
+assert(code.match(/myStr\s*\+=\s*someAdjective\s*/).length > 0);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(){
+  var output = [];
+  if(typeof someAdjective === 'string') {
+    output.push('someAdjective = "' + someAdjective + '"');
+  } else {
+    output.push('someAdjective is not a string');
+  }
+  if(typeof myStr === 'string') {
+    output.push('myStr = "' + myStr + '"');
+  } else {
+    output.push('myStr is not a string');
+  }
+  return output.join('\n');
+})();
+```
+
+## --seed-contents--
+
+```js
+// Change code below this line
+const someAdjective = "";
+let myStr = "Learning to code is ";
+```
+
+# --solutions--
+
+```js
+const someAdjective = "neat";
+let myStr = "Learning to code is ";
+myStr += someAdjective;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md
new file mode 100644
index 00000000000..8327934880c
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/assigning-the-value-of-one-variable-to-another.md
@@ -0,0 +1,86 @@
+---
+id: 5ee127a03c3b35dd45426493
+title: تعيين قيمة متغير إلى متغير آخر (Assigning the Value of One Variable to Another)
+challengeType: 1
+videoUrl: ''
+forumTopicId: 418265
+dashedName: assigning-the-value-of-one-variable-to-another
+---
+
+# --description--
+
+بعد تعيين قيمة إلى متغير باستخدام عملية <dfn>تكليف (=)</dfn>، يمكنك تعيين قيمة هذا المتغير إلى متغير آخر باستخدام عملية<dfn>تكليف (=)</dfn> ذاتها.
+
+```js
+var myVar;
+myVar = 5;
+var myNum;
+myNum = myVar;
+```
+
+ما ورد أعلاه يظهر تعريف المتغير `myVar` دون قيمة، ثم يعين له القيمة `5`. بعد ذلك، يتم تعريف متغير آخر يدعى `myNum` دون قيمة. ثم يتم تعيين قيمة المتغير `myVar` (التي تساوي `5`) إلى المتغير `myNum`. الآن المتغير `myNum` لديه القيمة `5`.
+
+# --instructions--
+
+عيًن قيمة المتغير`a` إلى المتغير `b`.
+
+# --hints--
+
+لا يجب عليك تعديل التعليمات البرمجية فوق التعليق المحدد.
+
+```js
+assert(/var a;/.test(code) && /a = 7;/.test(code) && /var b;/.test(code));
+```
+
+المتغير `b` يجب أن يساوي `7`.
+
+```js
+assert(typeof b === 'number' && b === 7);
+```
+
+قيمة المتغير `a` يجب أن يتم تعيينها إلى المتغير `b` باستخدام `=`.
+
+```js
+assert(/b\s*=\s*a\s*/g.test(code));
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+if (typeof a != 'undefined') {
+  a = undefined;
+}
+if (typeof b != 'undefined') {
+  b = undefined;
+}
+```
+
+## --after-user-code--
+
+```js
+(function(a, b) {
+  return 'a = ' + a + ', b = ' + b;
+})(a, b);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+var a;
+a = 7;
+var b;
+
+// Only change code below this line
+```
+
+# --solutions--
+
+```js
+var a;
+a = 7;
+var b;
+b = a;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md
new file mode 100644
index 00000000000..1a44bd6728e
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/assignment-with-a-returned-value.md
@@ -0,0 +1,72 @@
+---
+id: 56533eb9ac21ba0edf2244c3
+title: استخدام القيمة الناتجة للتعيين
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/ce2pEtB'
+forumTopicId: 16658
+dashedName: assignment-with-a-returned-value
+---
+
+# --description--
+
+إذا كنت ستتذكر من مناقشتنا حول <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank" rel="noopener noreferrer nofollow">تخزين القيم مع مشغل التعيين (=)</a>، يتم عزم كل شيء لحق الإشارة المتساوية قبل تعيين القيمة. وهذا يعني أنه يمكننا أخذ قيمة الناتجة من وظيفة وتعيينها إلى متغير.
+
+افترض أن لدينا وظيفة معرف سلفًا يدعي `sum`، التي تضيف رقمين معا، ثم:
+
+```js
+ourSum = sum(5, 12);
+```
+
+يستعي الوظيفة `sum` التي ترجع قيمة `17` وتعيينها إلى متغير `ourSum`.
+
+# --instructions--
+
+استدعي الوظيفة `processArg` باستخدام حَجَّة بقيمة `7`, وعيّن قيمة إرجاع لوظيفة للمتغير `processed`.
+
+# --hints--
+
+يجب أن تكون `processed` قيمته `2`
+
+```js
+assert(processed === 2);
+```
+
+يجب عليك تعيين `processArg` إلى `processed`
+
+```js
+assert(/processed\s*=\s*processArg\(\s*7\s*\)/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(){return "processed = " + processed})();
+```
+
+## --seed-contents--
+
+```js
+// Setup
+let processed = 0;
+
+function processArg(num) {
+  return (num + 3) / 5;
+}
+
+// Only change code below this line
+
+```
+
+# --solutions--
+
+```js
+var processed = 0;
+
+function processArg(num) {
+  return (num + 3) / 5;
+}
+
+processed = processArg(7);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.md
new file mode 100644
index 00000000000..918dd5582d5
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/build-javascript-objects.md
@@ -0,0 +1,159 @@
+---
+id: 56bbb991ad1ed5201cd392d0
+title: بناء الكائنات في JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cWGkbtd'
+forumTopicId: 16769
+dashedName: build-javascript-objects
+---
+
+# --description--
+
+ربما قد سمعت عن مصطلح `object` من قبل.
+
+الكائنات تشبه `arrays`، باستثناء انه بدلا من استخدام الترتيب للوصول إلى بياناتها وتعديلها، يمكنك الوصول إلى البيانات في الكائنات بواسطة `properties`.
+
+تكون الكائنات مفيدة لتخزين البيانات بطريقة منظمة، ويمكن تمثل الكائن في الواقع، مثل القطة.
+
+هذا مثال مبسط عن كائن القطة:
+
+```js
+const cat = {
+  "name": "Whiskers",
+  "legs": 4,
+  "tails": 1,
+  "enemies": ["Water", "Dogs"]
+};
+```
+
+في المثال، يتم تخزين جميع الخصائص كمقاطع مثل `name`، و`legs`، و `tails`. ومع ذلك، يمكنك استخدام الأرقام كالخواص أيضاً. يمكنك حذف علامتان التنصيص (" ") لخصائص النص المكون من كلمة واحدة، على النحو التالي:
+
+```js
+const anotherObject = {
+  make: "Ford",
+  5: "five",
+  "model": "focus"
+};
+```
+
+ومع ذلك، إذا كان الكائن الخاص بك يحتوي على خصائص غير المقطع النصي، فإن JavaScript سيحتسبها تلقائياً كمقاطع.
+
+# --instructions--
+
+أنشئ كائن يمثل كلبا يسمى `myDog` الذي يحتوي على الخواص `name` (مقطع نصي)، `legs`, و `tails`, و `friends`.
+
+يمكنك وضع خصائص الكائن الذي تريدها، مادام أن `name` هو مقطع، `legs` و `tails` هي أرقام، و`friends` هو قائمة (array).
+
+# --hints--
+
+يجب أن يحتوي `myDog` على الخاصية `name`, ويجب أن تكون الخاصية بنوع `string`.
+
+```js
+assert(
+  (function (z) {
+    if (
+      z.hasOwnProperty('name') &&
+      z.name !== undefined &&
+      typeof z.name === 'string'
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  })(myDog)
+);
+```
+
+يجب أن يحتوي `myDog` على الخاصية `legs`, ويجب أن تكون الخاصية بنوع `number`.
+
+```js
+assert(
+  (function (z) {
+    if (
+      z.hasOwnProperty('legs') &&
+      z.legs !== undefined &&
+      typeof z.legs === 'number'
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  })(myDog)
+);
+```
+
+يجب أن يحتوي `myDog` على الخاصية `tails`, ويجب أن تكون الخاصية بنوع `number`.
+
+```js
+assert(
+  (function (z) {
+    if (
+      z.hasOwnProperty('tails') &&
+      z.tails !== undefined &&
+      typeof z.tails === 'number'
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  })(myDog)
+);
+```
+
+يجب أن يحتوي `myDog` على الخاصية `friends`, ويجب أن تكون الخاصية بنوع `array`.
+
+```js
+assert(
+  (function (z) {
+    if (
+      z.hasOwnProperty('friends') &&
+      z.friends !== undefined &&
+      Array.isArray(z.friends)
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  })(myDog)
+);
+```
+
+يجب أن يحتوي `myDog` على جميع الخصائص المعطاة فقط.
+
+```js
+assert(
+  (function (z) {
+    return Object.keys(z).length === 4;
+  })(myDog)
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(z){return z;})(myDog);
+```
+
+## --seed-contents--
+
+```js
+const myDog = {
+  // Only change code below this line
+
+
+  // Only change code above this line
+};
+```
+
+# --solutions--
+
+```js
+const myDog = {
+  "name": "Camper",
+  "legs": 4,
+  "tails": 1,
+  "friends": ["everything!"]
+};
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.md
new file mode 100644
index 00000000000..004466526db
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/chaining-if-else-statements.md
@@ -0,0 +1,149 @@
+---
+id: 56533eb9ac21ba0edf2244dc
+title: تَسلسل تعبيرات If Else الشرطية
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/caeJgsw'
+forumTopicId: 16772
+dashedName: chaining-if-else-statements
+---
+
+# --description--
+
+يمكن تسلسل -ربط- عدة تعبيرات `if/else` معًا في السياقات المنطقية المعقدة. إليك مثال من <dfn>pseudocode</dfn> أو ما يسمى بالتعليمات البرمجية الزائفة -وهن التعليمات الغير مرتبط بلغة برمجة معينة ولكنه قريب من لغة الإنسان- لعدة تعبير `if` و `else if`:
+
+```js
+if (condition1) {
+  statement1
+} else if (condition2) {
+  statement2
+} else if (condition3) {
+  statement3
+. . .
+} else {
+  statementN
+}
+```
+
+# --instructions--
+
+اكتب تعبيرات متسلسلة `if`/`else if` للتحقق من الشروط التالية:
+
+`num < 5` - تنتج (return) `Tiny`  
+`num < 10` - تنتج (return) `Small`  
+`num < 15` - تنتج (return) `Medium`  
+`num < 20` - تنتج (return) `Large`  
+`num >= 20` - تنتج (return) `Huge`
+
+# --hints--
+
+يجب أن يكون لديك في الأقل أربع تعبيرات `else`
+
+```js
+assert(code.match(/else/g).length > 3);
+```
+
+يجب أن يكون لديك في الأقل أربع تعبيرات `if`
+
+```js
+assert(code.match(/if/g).length > 3);
+```
+
+يجب أن يكون لديك في الأقل تعبير `return`
+
+```js
+assert(code.match(/return/g).length >= 1);
+```
+
+`testSize(0)` يجب ان تنتج (return) المقطع (string) `Tiny`
+
+```js
+assert(testSize(0) === 'Tiny');
+```
+
+`testSize(4)` يجب ان تنتج (return) المقطع (string) `Tiny`
+
+```js
+assert(testSize(4) === 'Tiny');
+```
+
+`testSize(5)` يجب ان تنتج (return) المقطع (string) `Small`
+
+```js
+assert(testSize(5) === 'Small');
+```
+
+`testSize(8)` يجب ان تنتج (return) المقطع (string) `Small`
+
+```js
+assert(testSize(8) === 'Small');
+```
+
+`testSize(10)` يجب ان تنتج (return) المقطع (string) `Medium`
+
+```js
+assert(testSize(10) === 'Medium');
+```
+
+`testSize(14)` يجب ان تنتج (return) المقطع (string) `Medium`
+
+```js
+assert(testSize(14) === 'Medium');
+```
+
+`testSize(15)` يجب ان تنتج (return) المقطع (string) `Large`
+
+```js
+assert(testSize(15) === 'Large');
+```
+
+`testSize(17)` يجب ان تنتج (return) المقطع (string) `Large`
+
+```js
+assert(testSize(17) === 'Large');
+```
+
+`testSize(20)` يجب ان تنتج (return) المقطع (string) `Huge`
+
+```js
+assert(testSize(20) === 'Huge');
+```
+
+`testSize(25)` يجب ان تنتج (return) المقطع (string) `Huge`
+
+```js
+assert(testSize(25) === 'Huge');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function testSize(num) {
+  // Only change code below this line
+
+
+  return "Change Me";
+  // Only change code above this line
+}
+
+testSize(7);
+```
+
+# --solutions--
+
+```js
+function testSize(num) {
+  if (num < 5) {
+    return "Tiny";
+  } else if (num < 10) {
+    return "Small";
+  } else if (num < 15) {
+    return "Medium";
+  } else if (num < 20) {
+    return "Large";
+  } else {
+    return "Huge";
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md
new file mode 100644
index 00000000000..9e9f0282e7e
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comment-your-javascript-code.md
@@ -0,0 +1,63 @@
+---
+id: bd7123c9c441eddfaeb4bdef
+title: التعليق علي تعليماتك البرمجية في JavaScript
+challengeType: 1
+removeComments: false
+videoUrl: 'https://scrimba.com/c/c7ynnTp'
+forumTopicId: 16783
+dashedName: comment-your-javascript-code
+---
+
+# --description--
+
+التعليقات هي أسطر من التعليمات البرمجية التي سيتجاهلها JavaScript عمداً. التعليقات هي طريقة رائعة لترك الملاحظات لنفسك وللأشخاص الآخرين الذين سيحتاجون لاحقاً إلى معرفة ما تفعله تلك التعليمات البرمجية.
+
+هناك طريقتان لكتابة التعليقات في JavaScript:
+
+استخدام `//` سيخبر JavaScript بتجاهل بقية النص في السطر الحالي. وهذه طريقة كتابة تعليق من سطر واحد:
+
+```js
+// This is an in-line comment.
+```
+
+يمكنك إنشاء تعليق متعدد الأسطر يبدأ من `/*` وينتهي في `*/`. وهذا تعليق متعدد الأسطر:
+
+```js
+/* This is a
+multi-line comment */
+```
+
+**ملاحظة:** عند كتابة التعليمات البرمجية، يجب عليك إضافة تعليقات بانتظام لتوضيح وظيفة أجزاء من التعليمات البرمجية الخاص بك. التعليق الجيد يمكن أن يساعد على إيصال المغزى من التعليمات البرمجية الخاص بك - للآخرين *و* لنفسك في المستقبل.
+
+# --instructions--
+
+حاول إنشاء واحد من كل نوع من التعليقات.
+
+# --hints--
+
+يجب عليك إنشاء تعليق باستخدام `//` يحتوي على خمس أحرف في الأقل.
+
+```js
+assert(code.match(/(\/\/)...../g));
+```
+
+يجب عليك إنشاء تعليق باستخدام `/* */` يحتوي على خمس أحرف في الأقل.
+
+```js
+assert(code.match(/(\/\*)([^\/]{5,})(?=\*\/)/gm));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+
+```
+
+# --solutions--
+
+```js
+// Fake Comment
+/* Another Comment */
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md
new file mode 100644
index 00000000000..ba99c3632e3
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator.md
@@ -0,0 +1,89 @@
+---
+id: 56533eb9ac21ba0edf2244d0
+title: المقارنات باستخدام عملية المساواة (==)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cKyVMAL'
+forumTopicId: 16784
+dashedName: comparison-with-the-equality-operator
+---
+
+# --description--
+
+هناك العديد من <dfn>عمليات المساواة</dfn> في JavaScript. كل هذه العمليات يعيدون قيمة boolean منطقية `true` أو `false`.
+
+ابسط أنواع هذه العمليات هي عملية مقارنة المساواة `==`. تقارن عملية المساواة بين قيمتين وتعيد `true` إذا كانتا القيمتين متساويتين أو `false` إذا لم تكونا متساويتين. لاحظ أن المساواة تختلف عن تعيين (`=`)، التي تعطي القيمة على يمين العملية إلى متغير على يسارها.
+
+```js
+function equalityTest(myVal) {
+  if (myVal == 10) {
+    return "Equal";
+  }
+  return "Not Equal";
+}
+```
+
+إذا كانت قيمة `myVal` تساوي `10`، عملية المساواة تعيد `true`، و بهذا سيتم تنفيذ التعليمات البرمجية في الأقواس، وستعيد الدالة `Equal`. وإلا فإن الوظيفة ستعيد `Not Equal`. لكي تقوم JavaScript بمقارنة نوعين مختلفين في ا <dfn> نوع البيانات</dfn> (على سبيل المثال، مقارنة بين نوع `numbers` و نوع `strings`)، يجب أن تحول احدمها إلى نوع الآخر. هذا يُعرف بالقسر النوع (Type Coercion). بمجرد فعل ذلك، يتمكن Javascript من المقارنة بين المصطلحات التالية:
+
+```js
+1   ==  1  // true
+1   ==  2  // false
+1   == '1' // true
+"3" ==  3  // true
+```
+
+# --instructions--
+
+اضف عملية المساواة إلى المكان المشار أليه كي تعيد الوظيفة `Equal` إذا تساوي `val` قيمة `12`.
+
+# --hints--
+
+يجب أن `testEqual(10)` تعيد `Not Equal`
+
+```js
+assert(testEqual(10) === 'Not Equal');
+```
+
+يجب أن `testEqual(12)` تعيد `Equal`
+
+```js
+assert(testEqual(12) === 'Equal');
+```
+
+يجب أن `testEqual("12")` تعيد `Equal`
+
+```js
+assert(testEqual('12') === 'Equal');
+```
+
+يجب عليك أن تستخدم العملية `==`
+
+```js
+assert(code.match(/==/g) && !code.match(/===/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Setup
+function testEqual(val) {
+  if (val) { // Change this line
+    return "Equal";
+  }
+  return "Not Equal";
+}
+
+testEqual(10);
+```
+
+# --solutions--
+
+```js
+function testEqual(val) {
+  if (val == 12) {
+    return "Equal";
+  }
+  return "Not Equal";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.md
new file mode 100644
index 00000000000..2615e15bf79
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-operator.md
@@ -0,0 +1,111 @@
+---
+id: 56533eb9ac21ba0edf2244d4
+title: المقارنات باستخدام مشغل أكبر من (>)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cp6GbH4'
+forumTopicId: 16786
+dashedName: comparison-with-the-greater-than-operator
+---
+
+# --description--
+
+مشغل أكبر من (`>`) يقارن بين قيم رقمين. إذا كان الرَّقَم إلى اليسار أكبر من الرَّقَم إلى اليمين (لأن التعليمات البرمجية بالإنكليزية)، فإنه ينتج `true`. خلاف ذلك، فإنه ينتج `false`.
+
+وعلى غرار المشغل المعني بالمساواة، فإن مشغل أكبر من سيحول أنواع البيانات من القيم عند مقارنتها.
+
+**على سبيل المثال**
+
+```js
+5   >  3  // true
+7   > '3' // true
+2   >  3  // false
+'1' >  9  // false
+```
+
+# --instructions--
+
+أضف مشغل أكبر من (<) إلى الخطوط المشار إليها بحيث تكون التعبيرات المنتجة منطقية.
+
+# --hints--
+
+يجب أن ينتج `testGreaterThan(0)` مقطع نصي `10 or Under`
+
+```js
+assert(testGreaterThan(0) === '10 or Under');
+```
+
+يجب أن ينتج `testGreaterThan(10)` مقطع نصي `10 or Under`
+
+```js
+assert(testGreaterThan(10) === '10 or Under');
+```
+
+يجب أن ينتج `testGreaterThan(11)` مقطع نصي `Over 10`
+
+```js
+assert(testGreaterThan(11) === 'Over 10');
+```
+
+يجب أن ينتج `testGreaterThan(99)` مقطع نصي `Over 10`
+
+```js
+assert(testGreaterThan(99) === 'Over 10');
+```
+
+يجب أن ينتج `testGreaterThan(100)` مقطع نصي `Over 10`
+
+```js
+assert(testGreaterThan(100) === 'Over 10');
+```
+
+يجب أن ينتج `testGreaterThan(101)` مقطع نصي `Over 100`
+
+```js
+assert(testGreaterThan(101) === 'Over 100');
+```
+
+يجب أن ينتج `testGreaterThan(150)` مقطع نصي `Over 100`
+
+```js
+assert(testGreaterThan(150) === 'Over 100');
+```
+
+يجب عليك استخدام مشغل `>` مرتين في الأقل
+
+```js
+assert(code.match(/val\s*>\s*('|")*\d+('|")*/g).length > 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function testGreaterThan(val) {
+  if (val) {  // Change this line
+    return "Over 100";
+  }
+
+  if (val) {  // Change this line
+    return "Over 10";
+  }
+
+  return "10 or Under";
+}
+
+testGreaterThan(10);
+```
+
+# --solutions--
+
+```js
+function testGreaterThan(val) {
+  if (val > 100) {  // Change this line
+    return "Over 100";
+  }
+  if (val > 10) {  // Change this line
+    return "Over 10";
+  }
+  return "10 or Under";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-or-equal-to-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-or-equal-to-operator.md
new file mode 100644
index 00000000000..6be5d8971e1
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-greater-than-or-equal-to-operator.md
@@ -0,0 +1,113 @@
+---
+id: 56533eb9ac21ba0edf2244d5
+title: المقارنات باستخدام مشغل أكبر من أو يساوي (=>)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c6KBqtV'
+forumTopicId: 16785
+dashedName: comparison-with-the-greater-than-or-equal-to-operator
+---
+
+# --description--
+
+يقارن مشغل أكبر من أو يساوي (`>=`) بين قيمتين لرقمين. إذا كان الرَّقَم إلى اليسار أكبر من لو يساوي الرَّقَم إلى اليمين، فإنه يرجع `true`. خلاف ذلك، فإنه يرجع `false`.
+
+وعلى غرار المشغل المعني بالمساواة، سيحول مشغل أكبر من أو يساوي أنواع البيانات من القيم عند مقارنتها.
+
+**على سبيل المثال**
+
+```js
+6   >=  6  // true
+7   >= '3' // true
+2   >=  3  // false
+'7' >=  9  // false
+```
+
+# --instructions--
+
+أضف أكبر من أو يساوي إلى الخطوط المشار إليها بحيث تكون عبارات المراجعة منطقية.
+
+# --hints--
+
+يجب أن ينتج `testGreaterOrEqual(0)` مقطع `Less than 10`
+
+```js
+assert(testGreaterOrEqual(0) === 'Less than 10');
+```
+
+يجب أن ينتج `testGreaterOrEqual(9)` مقطع `Less than 10`
+
+```js
+assert(testGreaterOrEqual(9) === 'Less than 10');
+```
+
+يجب أن ينتج `testGreaterOrEqual(10)` مقطع `10 or Over`
+
+```js
+assert(testGreaterOrEqual(10) === '10 or Over');
+```
+
+يجب أن ينتج `testGreaterOrEqual(11)` مقطع `10 or Over`
+
+```js
+assert(testGreaterOrEqual(11) === '10 or Over');
+```
+
+يجب أن ينتج `testGreaterOrEqual(19)` مقطع `10 or Over`
+
+```js
+assert(testGreaterOrEqual(19) === '10 or Over');
+```
+
+يجب أن ينتج `testGreaterOrEqual(100)` مقطع `20 or Over`
+
+```js
+assert(testGreaterOrEqual(100) === '20 or Over');
+```
+
+يجب أن ينتج `testGreaterOrEqual(21)` مقطع `20 or Over`
+
+```js
+assert(testGreaterOrEqual(21) === '20 or Over');
+```
+
+يجب عليك استخدام مشغل `>=` مرتين في الأقل
+
+```js
+assert(code.match(/val\s*>=\s*('|")*\d+('|")*/g).length > 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function testGreaterOrEqual(val) {
+  if (val) {  // Change this line
+    return "20 or Over";
+  }
+
+  if (val) {  // Change this line
+    return "10 or Over";
+  }
+
+  return "Less than 10";
+}
+
+testGreaterOrEqual(10);
+```
+
+# --solutions--
+
+```js
+function testGreaterOrEqual(val) {
+  if (val >= 20) {  // Change this line
+    return "20 or Over";
+  }
+
+  if (val >= 10) {  // Change this line
+    return "10 or Over";
+  }
+
+  return "Less than 10";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-inequality-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-inequality-operator.md
new file mode 100644
index 00000000000..2152a1203e1
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-inequality-operator.md
@@ -0,0 +1,91 @@
+---
+id: 56533eb9ac21ba0edf2244d2
+title: المقارنات باستخدام مشغل لا مساواة (!=)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cdBm9Sr'
+forumTopicId: 16787
+dashedName: comparison-with-the-inequality-operator
+---
+
+# --description--
+
+مشغل لا مساواة (`!=`) هو يخالف مشغل المساواة. وهذا يعني لا مساواة يرجع `false` عندما ترجع المساواة `true` و*العكس كذلك*. وعلى غرار المشغل المعني بالمساواة، فإن مشغل لا مساواة سيحول أنواع البيانات من القيم عند مقارنتها.
+
+**على سبيل المثال**
+
+```js
+1 !=  2    // true
+1 != "1"   // false
+1 != '1'   // false
+1 != true  // false
+0 != false // false
+```
+
+# --instructions--
+
+أضف مشغل لا مساواة `!=` في `if` بحيث تقوم الوظيفة بإنشاء مقطع الآتي `Not Equal` عندما لا يساوي `val` القيمة `99`.
+
+# --hints--
+
+يجب أن ينتج `testNotEqual(99)` مقطع `Equal`
+
+```js
+assert(testNotEqual(99) === 'Equal');
+```
+
+يجب أن ينتج `testNotEqual("99")` مقطع `Equal`
+
+```js
+assert(testNotEqual('99') === 'Equal');
+```
+
+يجب أن ينتج `testNotEqual(12)` مقطع `Not Equal`
+
+```js
+assert(testNotEqual(12) === 'Not Equal');
+```
+
+يجب أن ينتج `testNotEqual("12")` مقطع `Not Equal`
+
+```js
+assert(testNotEqual('12') === 'Not Equal');
+```
+
+يجب أن ينتج `testNotEqual("bob")` مقطع `Not Equal`
+
+```js
+assert(testNotEqual('bob') === 'Not Equal');
+```
+
+يجب عليك استخدام المشغل `!=`
+
+```js
+assert(code.match(/(?!!==)!=/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Setup
+function testNotEqual(val) {
+  if (val) { // Change this line
+    return "Not Equal";
+  }
+  return "Equal";
+}
+
+testNotEqual(10);
+```
+
+# --solutions--
+
+```js
+function testNotEqual(val) {
+  if (val != 99) {
+    return "Not Equal";
+  }
+  return "Equal";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-operator.md
new file mode 100644
index 00000000000..c6267e78e2c
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-operator.md
@@ -0,0 +1,106 @@
+---
+id: 56533eb9ac21ba0edf2244d6
+title: المقارنات باستخدام مشغل ألأصغر من (>)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cNVRWtB'
+forumTopicId: 16789
+dashedName: comparison-with-the-less-than-operator
+---
+
+# --description--
+
+يقارن مشغل آلأصغر من (`<`) بين قيمتين رقمين. إذا كان الرَّقَم إلى اليسار أصغر من الرَّقَم إلى اليمين، فإنه يرجع `true`. خلاف ذلك، فإنه يرجع `false`. وعلى غرار المشغل المعني بالمساواة، يقوم المشغل أقل من بتحويل أنواع البيانات عند مقارنتها.
+
+**مثال**
+
+```js
+2   < 5 // true
+'3' < 7 // true
+5   < 5 // false
+3   < 2 // false
+'8' < 4 // false
+```
+
+# --instructions--
+
+أضف مشغل أقل من إلى الخطوط المشار إليها بحيث تكون تعبيرات مراجعة منطقية.
+
+# --hints--
+
+يجب أن ينتج `testLessThan(0)` مقطع `Under 25`
+
+```js
+assert(testLessThan(0) === 'Under 25');
+```
+
+يجب أن ينتج `testLessThan(24)` مقطع `Under 25`
+
+```js
+assert(testLessThan(24) === 'Under 25');
+```
+
+يجب أن ينتج `testLessThan(25)` مقطع `Under 55`
+
+```js
+assert(testLessThan(25) === 'Under 55');
+```
+
+يجب أن ينتج `testLessThan(54)` مقطع `Under 55`
+
+```js
+assert(testLessThan(54) === 'Under 55');
+```
+
+يجب أن ينتج `testLessThan(55)` مقطع `55 or Over`
+
+```js
+assert(testLessThan(55) === '55 or Over');
+```
+
+يجب أن ينتج `testLessThan(99)` مقطع `55 or Over`
+
+```js
+assert(testLessThan(99) === '55 or Over');
+```
+
+يجب عليك استخدام مشغل `<` مرتين في الأقل
+
+```js
+assert(code.match(/val\s*<\s*('|")*\d+('|")*/g).length > 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function testLessThan(val) {
+  if (val) {  // Change this line
+    return "Under 25";
+  }
+
+  if (val) {  // Change this line
+    return "Under 55";
+  }
+
+  return "55 or Over";
+}
+
+testLessThan(10);
+```
+
+# --solutions--
+
+```js
+function testLessThan(val) {
+  if (val < 25) {  // Change this line
+    return "Under 25";
+  }
+
+  if (val < 55) {  // Change this line
+    return "Under 55";
+  }
+
+  return "55 or Over";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-or-equal-to-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-or-equal-to-operator.md
new file mode 100644
index 00000000000..1711aa9696d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-less-than-or-equal-to-operator.md
@@ -0,0 +1,112 @@
+---
+id: 56533eb9ac21ba0edf2244d7
+title: المقارنات باستخدام مشغل اصغر من أو يساوي
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cNVR7Am'
+forumTopicId: 16788
+dashedName: comparison-with-the-less-than-or-equal-to-operator
+---
+
+# --description--
+
+مشغل اصغر من أو يساوي، (`<=`) يقارن بين قيم رقمين. إذا كان الرَّقَم إلى اليسار أقل من أو يساوي الرَّقَم إلى اليمين، فإنه يعيد `true`. إذا كان الرَّقَم الموجود على اليسار أكبر من الرَّقَم الموجود على اليمين، فإنه يعيد `false`. وعلى غرار المشغل المعني بالمساواة، يحول مشغل اصغر من أو يساوي أنواع البيانات من القيم عند مقارنتها.
+
+**مثال**
+
+```js
+4   <= 5 // true
+'7' <= 7 // true
+5   <= 5 // true
+3   <= 2 // false
+'8' <= 4 // false
+```
+
+# --instructions--
+
+أضف مشغل اصغر من أو يساوي إلى السطور المشار إليها بحيث تكون تعبيرات المراجعة منطقية.
+
+# --hints--
+
+يجب أن ينتج `testLessOrEqual(0)` المقطع `Smaller Than or Equal to 12`
+
+```js
+assert(testLessOrEqual(0) === 'Smaller Than or Equal to 12');
+```
+
+يجب أن ينتج `testLessOrEqual(11)` مقطع `Smaller Than or Equal to 12`
+
+```js
+assert(testLessOrEqual(11) === 'Smaller Than or Equal to 12');
+```
+
+يجب أن ينتج `testLessOrEqual(12)` مقطع `Smaller Than or Equal to 12`
+
+```js
+assert(testLessOrEqual(12) === 'Smaller Than or Equal to 12');
+```
+
+يجب أن ينتج `testLessOrEqual(23)` مقطع `Smaller Than or Equal to 24`
+
+```js
+assert(testLessOrEqual(23) === 'Smaller Than or Equal to 24');
+```
+
+يجب أن ينتج `testLessOrEqual(24)` مقطع `Smaller Than or Equal to 24`
+
+```js
+assert(testLessOrEqual(24) === 'Smaller Than or Equal to 24');
+```
+
+يجب أن ينتج `testLessOrEqual(25)` مقطع `More Than 24`
+
+```js
+assert(testLessOrEqual(25) === 'More Than 24');
+```
+
+يجب أن ينتج `testLessOrEqual(55)` مقطع `More Than 24`
+
+```js
+assert(testLessOrEqual(55) === 'More Than 24');
+```
+
+يجب عليك استخدام مشغل `<=` مرتين في الأقل
+
+```js
+assert(code.match(/val\s*<=\s*('|")*\d+('|")*/g).length > 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function testLessOrEqual(val) {
+  if (val) {  // Change this line
+    return "Smaller Than or Equal to 12";
+  }
+
+  if (val) {  // Change this line
+    return "Smaller Than or Equal to 24";
+  }
+
+  return "More Than 24";
+}
+
+testLessOrEqual(10);
+```
+
+# --solutions--
+
+```js
+function testLessOrEqual(val) {
+  if (val <= 12) {  // Change this line
+    return "Smaller Than or Equal to 12";
+  }
+
+  if (val <= 24) {  // Change this line
+    return "Smaller Than or Equal to 24";
+  }
+
+  return "More Than 24";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-equality-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-equality-operator.md
new file mode 100644
index 00000000000..13af72577bc
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-equality-operator.md
@@ -0,0 +1,80 @@
+---
+id: 56533eb9ac21ba0edf2244d1
+title: المقارنات باستخدام المساواة الصارمة
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cy87atr'
+forumTopicId: 16790
+dashedName: comparison-with-the-strict-equality-operator
+---
+
+# --description--
+
+يكون مشغل المساواة الصارمة (`===`) نظير مشغل المساواة (`==`). ومع ذلك، وخلافاً لمشغل المساواة، الذي يحاول تحويل القيمتين إلى نوع مشترك، لا يقوم مشغل المساواة الصارمة (strict equality) بإجراء تحويل من نوع إلى آخر.
+
+وإذا كانت القيم التي تجري مقارنتها ذات أنواع مختلفة، فإنها تعدّ غير متساوية، وسيعيد مشغل المساواة الصارمة القيمة false.
+
+**على سبيل المثال**
+
+```js
+3 ===  3  // true
+3 === '3' // false
+```
+
+في المثال الثاني، تكون `3` من نوع `Number` ويكون `'3'` من نوع `String`.
+
+# --instructions--
+
+استخدام مشغل المساواة الصارمة في بيان `if` حتي تنتج الوظيفة مقطع باسم `Equal` عندما يكون `val` مساوية بطريقة صارمة (strictly equal) إلى `7`.
+
+# --hints--
+
+يجب أن ينتج `testStrict(10)` مقطع `Not Equal`
+
+```js
+assert(testStrict(10) === 'Not Equal');
+```
+
+يجب أن ينتج `testStrict(7)` مقطع `Equal`
+
+```js
+assert(testStrict(7) === 'Equal');
+```
+
+يجب أن ينتج `testStrict("7")` مقطع `Not Equal`
+
+```js
+assert(testStrict('7') === 'Not Equal');
+```
+
+يجب عليك استخدام مشغل `===`
+
+```js
+assert(code.match(/(val\s*===\s*\d+)|(\d+\s*===\s*val)/g).length > 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Setup
+function testStrict(val) {
+  if (val) { // Change this line
+    return "Equal";
+  }
+  return "Not Equal";
+}
+
+testStrict(10);
+```
+
+# --solutions--
+
+```js
+function testStrict(val) {
+  if (val === 7) {
+    return "Equal";
+  }
+  return "Not Equal";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-inequality-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-inequality-operator.md
new file mode 100644
index 00000000000..18ad4c5aaa0
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-strict-inequality-operator.md
@@ -0,0 +1,83 @@
+---
+id: 56533eb9ac21ba0edf2244d3
+title: المقارنات باستخدام لا مساواة الصارمة
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cKekkUy'
+forumTopicId: 16791
+dashedName: comparison-with-the-strict-inequality-operator
+---
+
+# --description--
+
+مشغل لا مساواة الصارمة (`!==`) هو المضاد المنطقي لمشغل المساواة الصارمة. إنه يعني "ليس متساوياً تماماً" (Strictly Not Equal) ويعيد `false` عندما تعيد المساواة الصارمة `true` و *العكس صحيح*. ولن يحول مشغِّل لا المساواة الصارمة أنواع البيانات.
+
+**على سبيل المثال**
+
+```js
+3 !==  3  // false
+3 !== '3' // true
+4 !==  3  // true
+```
+
+# --instructions--
+
+استخدام مشغل لا مساواة صارمة في تعبير `if` حتي تعيد الوظيفة مقطع `Not Equal` عندما يكون `val` لا مساواة صارمة إلى `17`
+
+# --hints--
+
+يجب أن ينتج `testStrictNotEqual(17)` مقطع `Equal`
+
+```js
+assert(testStrictNotEqual(17) === 'Equal');
+```
+
+يجب أن ينتج `testStrictNotEqual("17")` مقطع `Not Equal`
+
+```js
+assert(testStrictNotEqual('17') === 'Not Equal');
+```
+
+يجب أن ينتج `testStrictNotEqual(12)` مقطع `Not Equal`
+
+```js
+assert(testStrictNotEqual(12) === 'Not Equal');
+```
+
+يجب أن ينتج `testStrictNotEqual("bob")` مقطع `Not Equal`
+
+```js
+assert(testStrictNotEqual('bob') === 'Not Equal');
+```
+
+يجب عليك استخدام المشغل `!==`
+
+```js
+assert(code.match(/(val\s*!==\s*\d+)|(\d+\s*!==\s*val)/g).length > 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Setup
+function testStrictNotEqual(val) {
+  if (val) { // Change this line
+    return "Not Equal";
+  }
+  return "Equal";
+}
+
+testStrictNotEqual(10);
+```
+
+# --solutions--
+
+```js
+function testStrictNotEqual(val) {
+  if (val !== 17) {
+    return "Not Equal";
+  }
+  return "Equal";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.md
new file mode 100644
index 00000000000..76498e5720d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-and-operator.md
@@ -0,0 +1,130 @@
+---
+id: 56533eb9ac21ba0edf2244d8
+title: المقارنات باستخدام مشغل الإضافة المنطقي (&&)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cvbRVtr'
+forumTopicId: 16799
+dashedName: comparisons-with-the-logical-and-operator
+---
+
+# --description--
+
+ستحتاج أحيانًا إلى اختبار أكثر من شيء في وقت واحد. مشغل <dfn>الإضافة المنطقي</dfn> ورمزه (`&&`) يرجع `true` فقط إذا كان <dfn>المعاملتين</dfn> إلى اليسار واليمين صحيحين.
+
+ويمكن تحقيق نفس التأثير عن طريق أدخال if statement داخل if أخري:
+
+```js
+if (num > 5) {
+  if (num < 10) {
+    return "Yes";
+  }
+}
+return "No";
+```
+
+سوف يعيد `Yes` فقط إذا كان `num` أكبر من `5` وأقل من `10`. ويمكن كتابة نفس المنطق كما يلي:
+
+```js
+if (num > 5 && num < 10) {
+  return "Yes";
+}
+return "No";
+```
+
+# --instructions--
+
+استبدل بيانين if إلى if statement واحدة، باستخدام المشغل `&&`، الذي سوف يعيد المقطع `Yes` إذا كان `val` أقل من أو يساوي `50` وأكثر من أو يساوي `25`. خلاف ذلك، سوف يعيد المقطع `No`.
+
+# --hints--
+
+يجب عليك استخدام المشغل `&&` مرة واحدة
+
+```js
+assert(code.match(/&&/g).length === 1);
+```
+
+يجب أن يكون لديك بيان `if` واحد فقط
+
+```js
+assert(code.match(/if/g).length === 1);
+```
+
+يجب أن ينتج `testLogicalAnd(0)` مقطع `No`
+
+```js
+assert(testLogicalAnd(0) === 'No');
+```
+
+يجب أن ينتج `testLogicalAnd(24)` المقطع `No`
+
+```js
+assert(testLogicalAnd(24) === 'No');
+```
+
+يجب أن ينتج `testLogicalAnd(25)` المقطع `Yes`
+
+```js
+assert(testLogicalAnd(25) === 'Yes');
+```
+
+يجب أن ينتج `testLogicalAnd(30)` المقطع `Yes`
+
+```js
+assert(testLogicalAnd(30) === 'Yes');
+```
+
+يجب أن ينتج `testLogicalAnd(50)` المقطع `Yes`
+
+```js
+assert(testLogicalAnd(50) === 'Yes');
+```
+
+يجب أن ينتج `testLogicalAnd(51)` المقطع `No`
+
+```js
+assert(testLogicalAnd(51) === 'No');
+```
+
+يجب أن ينتج `testLogicalAnd(75)` المقطع `No`
+
+```js
+assert(testLogicalAnd(75) === 'No');
+```
+
+يجب أن ينتج `testLogicalAnd(80)` المقطع `No`
+
+```js
+assert(testLogicalAnd(80) === 'No');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function testLogicalAnd(val) {
+  // Only change code below this line
+
+  if (val) {
+    if (val) {
+      return "Yes";
+    }
+  }
+
+  // Only change code above this line
+  return "No";
+}
+
+testLogicalAnd(10);
+```
+
+# --solutions--
+
+```js
+function testLogicalAnd(val) {
+  if (val >= 25 && val <= 50) {
+    return "Yes";
+  }
+  return "No";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.md
new file mode 100644
index 00000000000..9560f668cf3
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/comparisons-with-the-logical-or-operator.md
@@ -0,0 +1,135 @@
+---
+id: 56533eb9ac21ba0edf2244d9
+title: المقارنات باستخدام مشغل إي من المنطقي
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cEPrGTN'
+forumTopicId: 16800
+dashedName: comparisons-with-the-logical-or-operator
+---
+
+# --description--
+
+يرجع مشغل <dfn>إي من</dfn> الآتي (`||`) القيمة `true` إذا كان أي من <dfn>المعاملتين</dfn> هما `true`. خلاف ذلك، فإنه يرجع `false`.
+
+يتكون مشغل <dfn>المعاملات</dfn> من رمزين و هما خطين مستقيمين ألآتيه: (`||`). يمكن العثور على هذا الرمز عادة بين مفاتيح Backspace و Enter.
+
+يجب أن يبدو النمط أدناه مألوفًا من الدروس السابقة:
+
+```js
+if (num > 10) {
+  return "No";
+}
+if (num < 5) {
+  return "No";
+}
+return "Yes";
+```
+
+سوف يعيد `Yes` فقط إذا كان `num` بين `5` و `10` (5 و 10 مشمولين). ويمكن كتابة نفس المنطق كما يلي:
+
+```js
+if (num > 10 || num < 5) {
+  return "No";
+}
+return "Yes";
+```
+
+# --instructions--
+
+قم بدمج تعبيرات `if` في تعبير واحدة تعيد المقطع `Outside` إذا كان `val` ليس بين `10` و `20` بشمول 10 و 20. خلاف ذلك، ارجع المقطع `Inside`.
+
+# --hints--
+
+يجب عليك استخدام المشغل `||` مرة واحدة
+
+```js
+assert(code.match(/\|\|/g).length === 1);
+```
+
+يجب أن يكون لديك تعبير `if` واحد فقط
+
+```js
+assert(code.match(/if/g).length === 1);
+```
+
+يجب أن ينتج `testLogicalOr(0)` مقطع `Outside`
+
+```js
+assert(testLogicalOr(0) === 'Outside');
+```
+
+يجب أن ينتج `testLogicalOr(9)` مقطع `Outside`
+
+```js
+assert(testLogicalOr(9) === 'Outside');
+```
+
+يجب أن ينتج `testLogicalOr(10)` مقطع `Inside`
+
+```js
+assert(testLogicalOr(10) === 'Inside');
+```
+
+يجب أن ينتج `testLogicalOr(15)` مقطع `Inside`
+
+```js
+assert(testLogicalOr(15) === 'Inside');
+```
+
+يجب أن ينتج `testLogicalOr(19)` مقطع `Inside`
+
+```js
+assert(testLogicalOr(19) === 'Inside');
+```
+
+يجب أن ينتج `testLogicalOr(20)` مقطع `Inside`
+
+```js
+assert(testLogicalOr(20) === 'Inside');
+```
+
+يجب أن ينتج `testLogicalOr(21)` مقطع `Outside`
+
+```js
+assert(testLogicalOr(21) === 'Outside');
+```
+
+يجب أن ينتج `testLogicalOr(25)` مقطع `Outside`
+
+```js
+assert(testLogicalOr(25) === 'Outside');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function testLogicalOr(val) {
+  // Only change code below this line
+
+  if (val) {
+    return "Outside";
+  }
+
+  if (val) {
+    return "Outside";
+  }
+
+  // Only change code above this line
+  return "Inside";
+}
+
+testLogicalOr(15);
+```
+
+# --solutions--
+
+```js
+function testLogicalOr(val) {
+  if (val < 10 || val > 20) {
+    return "Outside";
+  }
+  return "Inside";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-addition.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-addition.md
new file mode 100644
index 00000000000..919d753d4e1
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-addition.md
@@ -0,0 +1,101 @@
+---
+id: 56533eb9ac21ba0edf2244af
+title: التخصيص المركب مع الجمع المعزز (Compound Assignment With Augmented Addition)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cDR6LCb'
+forumTopicId: 16661
+dashedName: compound-assignment-with-augmented-addition
+---
+
+# --description--
+
+في البرمجة، من الشائع استخدام assignments (التعيينات) لتعديل محتوي المتغير. تذكر أن كل شيء إلى يمين علامة المساواة يتم تقييمه أولا، لذلك يمكننا القول:
+
+```js
+myVar = myVar + 5;
+```
+
+لإضافة `5` إلى `myVar`. نظرًا لأن هذا نمط شائع، فهناك مشغلين يقوموا بعملية رياضية وتعيين في خطوة واحدة.
+
+أحد هؤلاء المشغلين هو مشغل `+=`.
+
+```js
+let myVar = 1;
+myVar += 5;
+console.log(myVar);
+```
+
+سوف يتم عرض `6` في وحدة التحكم.
+
+# --instructions--
+
+تحويل التعيينات `a`, و `b`, و `c` لتستخدم المشغل `+=`.
+
+# --hints--
+
+يجب أن يساوي `a` قيمة `15`.
+
+```js
+assert(a === 15);
+```
+
+يجب أن يساوي `b` قيمة `26`.
+
+```js
+assert(b === 26);
+```
+
+يجب أن يساوي `c` قيمة `19`.
+
+```js
+assert(c === 19);
+```
+
+يجب عليك استخدام مشغل `+=` لكل متغير.
+
+```js
+assert(code.match(/\+=/g).length === 3);
+```
+
+لا يجب عليك تعديل الكود فوق التعليق المحدد.
+
+```js
+assert(
+  /let a = 3;/.test(code) &&
+    /let b = 17;/.test(code) &&
+    /let c = 12;/.test(code)
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = " + c; })(a,b,c);
+```
+
+## --seed-contents--
+
+```js
+let a = 3;
+let b = 17;
+let c = 12;
+
+// Only change code below this line
+a = a + 12;
+b = 9 + b;
+c = c + 7;
+```
+
+# --solutions--
+
+```js
+let a = 3;
+let b = 17;
+let c = 12;
+
+a += 12;
+b += 9;
+c += 7;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-division.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-division.md
new file mode 100644
index 00000000000..0cb5a2a5c80
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-division.md
@@ -0,0 +1,95 @@
+---
+id: 56533eb9ac21ba0edf2244b2
+title: التخصيص المركب مع التقسيم المعزز (Compound Assignment With Augmented Division)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c2QvKT2'
+forumTopicId: 16659
+dashedName: compound-assignment-with-augmented-division
+---
+
+# --description--
+
+يقوم المشغل `/=` بتقسيم متغير علي رَقَم أخر.
+
+```js
+myVar = myVar / 5;
+```
+
+سيتم تقسيم `myVar` علي `5`. ويمكن إعادة كتابة هذا على النحو التالي:
+
+```js
+myVar /= 5;
+```
+
+# --instructions--
+
+حول التعيينات `a`, و `b`, و `c` لتستخدم المشغل `/=`.
+
+# --hints--
+
+يجب أن يساوي `a` قيمة `4`.
+
+```js
+assert(a === 4);
+```
+
+يجب أن يساوي `b` قيمة `27`.
+
+```js
+assert(b === 27);
+```
+
+يجب أن يساوي `c` قيمة `3`.
+
+```js
+assert(c === 3);
+```
+
+يجب عليك استخدام مشغل `/=` لكل متغير.
+
+```js
+assert(code.match(/\/=/g).length === 3);
+```
+
+لا يجب عليك تعديل الكود فوق التعليق المحدد.
+
+```js
+assert(
+  /let a = 48;/.test(code) &&
+    /let b = 108;/.test(code) &&
+    /let c = 33;/.test(code)
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = " + c; })(a,b,c);
+```
+
+## --seed-contents--
+
+```js
+let a = 48;
+let b = 108;
+let c = 33;
+
+// Only change code below this line
+a = a / 12;
+b = b / 4;
+c = c / 11;
+```
+
+# --solutions--
+
+```js
+let a = 48;
+let b = 108;
+let c = 33;
+
+a /= 12;
+b /= 4;
+c /= 11;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-multiplication.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-multiplication.md
new file mode 100644
index 00000000000..050c27a8f25
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-multiplication.md
@@ -0,0 +1,95 @@
+---
+id: 56533eb9ac21ba0edf2244b1
+title: التخصيص المركب مع الضرب المعزز (Compound Assignment With Augmented Multiplication)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c83vrfa'
+forumTopicId: 16662
+dashedName: compound-assignment-with-augmented-multiplication
+---
+
+# --description--
+
+يقوم المشغل `*=` مضاعفة متغير في عدد.
+
+```js
+myVar = myVar * 5;
+```
+
+سوف تضاعف `myVar` في `5`. ويمكن إعادة كتابة هذا على النحو التالي:
+
+```js
+myVar *= 5;
+```
+
+# --instructions--
+
+حول التعيينات `a`, و `b`, و `c` لتستخدم المشغل `*=`.
+
+# --hints--
+
+يجب أن يساوي `a` قيمة `25`.
+
+```js
+assert(a === 25);
+```
+
+يجب أن يساوي `b` قيمة `36`.
+
+```js
+assert(b === 36);
+```
+
+يجب أن يساوي `c` قيمة `46`.
+
+```js
+assert(c === 46);
+```
+
+يجب عليك استخدام مشغل `*=` لكل متغير.
+
+```js
+assert(code.match(/\*=/g).length === 3);
+```
+
+لا يجب عليك تعديل الكود فوق التعليق المحدد.
+
+```js
+assert(
+  /let a = 5;/.test(code) &&
+    /let b = 12;/.test(code) &&
+    /let c = 4\.6;/.test(code)
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = " + c; })(a,b,c);
+```
+
+## --seed-contents--
+
+```js
+let a = 5;
+let b = 12;
+let c = 4.6;
+
+// Only change code below this line
+a = a * 5;
+b = 3 * b;
+c = c * 10;
+```
+
+# --solutions--
+
+```js
+let a = 5;
+let b = 12;
+let c = 4.6;
+
+a *= 5;
+b *= 3;
+c *= 10;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-subtraction.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-subtraction.md
new file mode 100644
index 00000000000..77ffd07f38d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/compound-assignment-with-augmented-subtraction.md
@@ -0,0 +1,93 @@
+---
+id: 56533eb9ac21ba0edf2244b0
+title: التخصيص المركب مع الطرح المعزز (Compound Assignment With Augmented Subtraction)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c2Qv7AV'
+forumTopicId: 16660
+dashedName: compound-assignment-with-augmented-subtraction
+---
+
+# --description--
+
+مثل مشغل `+=`, يقوم مشغل`-=` بطرح رقماً من متغير.
+
+```js
+myVar = myVar - 5;
+```
+
+سيتم طرح `5` من `myVar`. ويمكن إعادة كتابة هذا على النحو التالي:
+
+```js
+myVar -= 5;
+```
+
+# --instructions--
+
+حول التعيينات `a`, و `b`, و `c` لتستخدم المشغل `-=`.
+
+# --hints--
+
+يجب أن يساوي `a` قيمة `5`.
+
+```js
+assert(a === 5);
+```
+
+يجب أن يساوي `b` قيمة `-6`.
+
+```js
+assert(b === -6);
+```
+
+يجب أن يساوي `c` قيمة `2`.
+
+```js
+assert(c === 2);
+```
+
+يجب عليك استخدام مشغل `-=` لكل متغير.
+
+```js
+assert(code.match(/-=/g).length === 3);
+```
+
+لا يجب عليك تعديل الكود فوق التعليق المحدد.
+
+```js
+assert(
+  /let a = 11;/.test(code) && /let b = 9;/.test(code) && /let c = 3;/.test(code)
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = " + c; })(a,b,c);
+```
+
+## --seed-contents--
+
+```js
+let a = 11;
+let b = 9;
+let c = 3;
+
+// Only change code below this line
+a = a - 6;
+b = b - 15;
+c = c - 1;
+```
+
+# --solutions--
+
+```js
+let a = 11;
+let b = 9;
+let c = 3;
+
+a -= 6;
+b -= 15;
+c -= 1;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md
new file mode 100644
index 00000000000..2b3549a3d8b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-plus-operator.md
@@ -0,0 +1,89 @@
+---
+id: 56533eb9ac21ba0edf2244b7
+title: ربط المقاطع النصية باستخدام مشغل الجمع (Concatenating Strings with Plus Operator)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cNpM8AN'
+forumTopicId: 16802
+dashedName: concatenating-strings-with-plus-operator
+---
+
+# --description--
+
+في JavaScript، عندما يستخدم مشغل `+` مع `String`، فإنه يسمى مشغل <dfn>سلسلة</dfn>. يمكنك بناء مقطع جديد من المقاطع الأخرى من طريق تجميع <dfn>السلسلة</dfn> بعضها مع بعض.
+
+**مثال**
+
+```js
+'My name is Alan,' + ' I concatenate.'
+```
+
+**ملاحظة:** احترس من المسافات. لإن ربط السلسلة لا تضيف مسافات بين المقاطع الذي تم جمعها، لذا ستحتاج إلى إضافتها بنفسك.
+
+مثال:
+
+```js
+const ourStr = "I come first. " + "I come second.";
+```
+
+المقطع الآتي `I come first. I come second.` سيتم عرضه في وحدة التحكم.
+# --instructions--
+
+أنشئ `myStr` من المقاطع الآتية `This is the start.` و `This is the end.` باستخدام المشغل `+`. تيقن من تضمين مسافة بين المقاطع.
+
+# --hints--
+
+يجب أن يوجد حرف الفراغ واحد بين المقطعين في `myStr`.
+
+```js
+assert(/start\. This/.test(myStr));
+```
+
+يجب أن يكون قيمة `myStr` النص الآتي `This is the start. This is the end.`
+
+```js
+assert(myStr === 'This is the start. This is the end.');
+```
+
+يجب عليك استخدام مشغل `+` لبناء `myStr`.
+
+```js
+assert(code.match(/(["']).*\1\s*\+\s*(["']).*\2/g));
+```
+
+يجب أن يتم إنشاء `myStr` باستخدام كلمة `const`.
+
+```js
+assert(/const\s+myStr/.test(code));
+```
+
+يجب عليك تعيين النتيجة إلى متغير `myStr`.
+
+```js
+assert(/myStr\s*=/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(){
+  if(typeof myStr === 'string') {
+    return 'myStr = "' + myStr + '"';
+  } else {
+    return 'myStr is not a string';
+  }
+})();
+```
+
+## --seed-contents--
+
+```js
+const myStr = ""; // Change this line
+```
+
+# --solutions--
+
+```js
+const myStr = "This is the start. " + "This is the end.";
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md
new file mode 100644
index 00000000000..17d0739b800
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/concatenating-strings-with-the-plus-equals-operator.md
@@ -0,0 +1,74 @@
+---
+id: 56533eb9ac21ba0edf2244b8
+title: ربط المقاطع النصية باستخدام مشغل =+ (Concatenating Strings with the Plus Equals Operator)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cbQmmC4'
+forumTopicId: 16803
+dashedName: concatenating-strings-with-the-plus-equals-operator
+---
+
+# --description--
+
+يمكننا أيضًا استخدام المشغل `+=` لربط مقطع <dfn>كسلسلة</dfn> في نهاية متغير مقطع نصي أخر موجود. ويمكن أن يكون ذلك مفيدا جدا لكسر المقطع طويل على عدة اسطر.
+
+**ملاحظة:** احترس من المسافات. لا يضيف التسلسل مسافات بين مقاطع نصية المتسلسلة التي تم جمعها، لذا ستحتاج إلى إضافتها بنفسك.
+
+مثال:
+
+```js
+let ourStr = "I come first. ";
+ourStr += "I come second.";
+```
+
+يحتوي `ourStr` قيمة مقطع الآتي `I come first. I come second.` الآن.
+
+# --instructions--
+
+أبني `myStr` على عدة اسطر بواسطة عمل سلسلة من المقاطع الآتية: `This is the first sentence.` و `This is the second sentence.` باستخدام المشغل `+=`. استخدم مشغل `+=` بطريقة مشابهة لكيفية عرضه في المثال وتيقن من تضمين مسافة بين المقاطع. ابدأ بتعيين المقطع الأول إلى `myStr`، ثم أضف المقطع الثاني.
+
+# --hints--
+
+يجب أن يوجد حرف الفراغ واحد بين المقطعين في `myStr`.
+
+```js
+assert(/sentence\. This/.test(myStr));
+```
+
+يجب أن يكون قيمة `myStr` مقطع الآتي `This is the first sentence. This is the second sentence.`
+
+```js
+assert(myStr === 'This is the first sentence. This is the second sentence.');
+```
+
+يجب عليك استخدام مشغل `+=` لبناء `myStr`.
+
+```js
+assert(code.match(/myStr\s*\+=\s*(["']).*\1/g));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(){
+  if(typeof myStr === 'string') {
+    return 'myStr = "' + myStr + '"';
+  } else {
+    return 'myStr is not a string';
+  }
+})();
+```
+
+## --seed-contents--
+
+```js
+let myStr;
+```
+
+# --solutions--
+
+```js
+let myStr = "This is the first sentence. ";
+myStr += "This is the second sentence.";
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/constructing-strings-with-variables.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/constructing-strings-with-variables.md
new file mode 100644
index 00000000000..7283a670b96
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/constructing-strings-with-variables.md
@@ -0,0 +1,75 @@
+---
+id: 56533eb9ac21ba0edf2244b9
+title: بناء المقاطع النصية باستخدام المتغيرات (Constructing Strings with Variables)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cqk8rf4'
+forumTopicId: 16805
+dashedName: constructing-strings-with-variables
+---
+
+# --description--
+
+أحيانا قد تحتاج إلي إنشاء مقطع. في أثناء استخدام مشغل التسلسل الآتي (`+`)، يمكنك إدخال متغير واحد أو أكثر في مقطع الذي تقوم ببنائه.
+
+مثال:
+
+```js
+const ourName = "freeCodeCamp";
+const ourStr = "Hello, our name is " + ourName + ", how are you?";
+```
+
+سيحتوي `ourStr` على قيمة المقطع الآتي `Hello, our name is freeCodeCamp, how are you?`.
+
+# --instructions--
+
+عيّن `myName` إلى مقطع مساوي لأسمك وأبني `myStr` بقيمة `myName` بين المقطعين الآتيين `My name is` و `and I am well!`
+
+# --hints--
+
+يجب تعيين `myName` كمقطع يحتوي 3 رموز في الأقل.
+
+```js
+assert(typeof myName !== 'undefined' && myName.length > 2);
+```
+
+يجب عليك استخدام مشغلين اثنين من `+` لبناء `myStr` يحتوي `myName` داخله.
+
+```js
+assert(code.match(/["']\s*\+\s*myName\s*\+\s*["']/g).length > 0);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(){
+  var output = [];
+  if(typeof myName === 'string') {
+    output.push('myName = "' + myName + '"');
+  } else {
+    output.push('myName is not a string');
+  }
+  if(typeof myStr === 'string') {
+    output.push('myStr = "' + myStr + '"');
+  } else {
+    output.push('myStr is not a string');
+  }
+  return output.join('\n');
+})();
+```
+
+## --seed-contents--
+
+```js
+// Only change code below this line
+const myName = "";
+const myStr = "";
+```
+
+# --solutions--
+
+```js
+const myName = "Bob";
+const myStr = "My name is " + myName + " and I am well!";
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.md
new file mode 100644
index 00000000000..8640a6e7e2e
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/count-backwards-with-a-for-loop.md
@@ -0,0 +1,77 @@
+---
+id: 56105e7b514f539506016a5e
+title: العد إلى الوراء باستخدام الحلقة التكرارية (Count Backwards With a For Loop)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c2R6BHa'
+forumTopicId: 16808
+dashedName: count-backwards-with-a-for-loop
+---
+
+# --description--
+
+يمكن لحلقة التكرارية (for loop) أن تعد للوراء أيضا، مادام تستطيع تحديد الشروط الصحيحة.
+
+من أجل التراجع بمقدار اثنين في كل دورة (iteration)، سنحتاج إلى تغيير البادئ (initialization) و الشرط (condition) و التعبير الأخير (final expression).
+
+سنبدأ عند `i = 10` وتكرر مادام `i > 0`. خفض `i` بمقدار 2 مع كل تكرار باستخدام `i -= 2`.
+
+```js
+const ourArray = [];
+
+for (let i = 10; i > 0; i -= 2) {
+  ourArray.push(i);
+}
+```
+
+سوف تحتوي `ourArray` الآن على `[10, 8, 6, 4, 2]`. غير التغيير البادئ (initialization) و التعبير الأخير (final expression) حتى نتمكن من العد إلى الوراء بمقدار اثنين لإنشاء قائمة (array) من الأعداد التنازلية الفردية.
+
+# --instructions--
+
+اضغط الأرقام الفردية من 9 إلى 1 إلى `myArray` باستخدام الحلقة التكرارية `for`.
+
+# --hints--
+
+يجب أن تستخدم الحلقة التكرارية `for`.
+
+```js
+assert(/for\s*\([^)]+?\)/.test(code));
+```
+
+يجب أن تستخدم طريقة للقائمة (array method) باسم `push`.
+
+```js
+assert(code.match(/myArray.push/));
+```
+
+يجب أن تساوي `myArray` قيمة `[9, 7, 5, 3, 1]`.
+
+```js
+assert.deepEqual(myArray, [9, 7, 5, 3, 1]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+if(typeof myArray !== "undefined"){(function(){return myArray;})();}
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const myArray = [];
+
+// Only change code below this line
+
+```
+
+# --solutions--
+
+```js
+const myArray = [];
+for (let i = 9; i > 0; i -= 2) {
+  myArray.push(i);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md
new file mode 100644
index 00000000000..5b7d22358c7
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/counting-cards.md
@@ -0,0 +1,214 @@
+---
+id: 565bbe00e9cc8ac0725390f4
+title: عدد الأوراق (Counting Cards)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c6KE7ty'
+forumTopicId: 16809
+dashedName: counting-cards
+---
+
+# --description--
+
+في لُعْبَة النادي بلاك جاك، يمكن للاعب أن يحدد ما إذا كان يتمتع بميزة على المنزل بواسطة تتبع العدد النسبي للبطاقات المرتفعة والمنخفضة المتبقية في مجموعة الورق. هذا يسمى إحصاء الورق (Card Counting).
+
+يكون وجود المزيد من الورق عالي القيمة المتبقي في المجموعة, أفضل للاعب. يتم تعيين قيمة لكل بطاقة وفقاً للجدول بالأدنى. عندما يكون العد موجبًا، يجب على اللاعب المراهنة بشكل مرتفع. عندما يكون العد صفرًا أو سلبيًا، يجب أن يراهن اللاعب على انخفاض.
+
+<table class='table table-striped'><thead><tr><th>تغيير العد</th><th>الأوراق</th></tr></thead><tbody><tr><td>+1</td><td>2, 3, 4, 5, 6</td></tr><tr><td>0</td><td>7, 8, 9</td></tr><tr><td>-1</td><td>10, 'J', 'Q', 'K', 'A'</td></tr></tbody></table>
+
+سوف تكتب وظيفة لعد الورق. سوف يتلقى حِجَّة `card`, الذي يمكن أن يكون رقما أو مقطع، ويزيد أو يخفض متغير `count` وفقا لقيمة الورقة (انظر إلى الجدول). ثم ستقوم الوظيفة (function) بإنشاء مقطع (string) يحتوي علي العد الحالي والمقطع `Bet` إذا كان العد إيجابياً، أو `Hold` إذا كان العد صفر أو سلبي. يجب أن يفصل العد الحالي وقرار اللاعب (`Bet` أو `Hold`) بمسافة واحدة.
+
+**مثال على النتائج:** كالآتي `-3 Hold` أو `5 Bet`
+
+**تلميح**  
+لا تعيد تعيين `count` إلى 0 عندما تكون القيمة 7 أو 8 أو 9. لا بإنشاء قائمة.  
+لا تتضمن الاقتباسات (واحدة أو مزدوجة) في الإخراج.
+
+# --hints--
+
+يجب أن تعيد وظيفتك قيمة للعدد والنص (`Bet` أو `Hold`) مع حرف فارغ واحد بينهما.
+
+```js
+assert(//
+  (function () {
+    count = 0;
+    let out = cc(10);
+    const hasSpace = /-?\d+ (Bet|Hold)/.test('' + out);
+    return hasSpace;
+  })()
+);
+```
+
+يجب أن ينتج تسلسل الورق 2، 3، 4، 5، 6 المقطع `5 Bet`
+
+```js
+assert(
+  (function () {
+    count = 0;
+    cc(2);
+    cc(3);
+    cc(4);
+    cc(5);
+    var out = cc(6);
+    if (out === '5 Bet') {
+      return true;
+    }
+    return false;
+  })()
+);
+```
+
+يجب أن ينتج تسلسل الورق 7، 8، 9 المقطع `0 Hold`
+
+```js
+assert(
+  (function () {
+    count = 0;
+    cc(7);
+    cc(8);
+    var out = cc(9);
+    if (out === '0 Hold') {
+      return true;
+    }
+    return false;
+  })()
+);
+```
+
+يجب أن ينتج تسلسل الورق 10, J, Q, K, A المقطع `-5 Hold`
+
+```js
+assert(
+  (function () {
+    count = 0;
+    cc(10);
+    cc('J');
+    cc('Q');
+    cc('K');
+    var out = cc('A');
+    if (out === '-5 Hold') {
+      return true;
+    }
+    return false;
+  })()
+);
+```
+
+يجب أن ينتج تسلسل الورق 3, 7, Q, 8, A المقطع `-1 Hold`
+
+```js
+assert(
+  (function () {
+    count = 0;
+    cc(3);
+    cc(7);
+    cc('Q');
+    cc(8);
+    var out = cc('A');
+    if (out === '-1 Hold') {
+      return true;
+    }
+    return false;
+  })()
+);
+```
+
+يجب أن ينتج تسلسل الورق 2, J, 9, 2, 7 المقطع `1 Bet`
+
+```js
+assert(
+  (function () {
+    count = 0;
+    cc(2);
+    cc('J');
+    cc(9);
+    cc(2);
+    var out = cc(7);
+    if (out === '1 Bet') {
+      return true;
+    }
+    return false;
+  })()
+);
+```
+
+يجب أن ينتج تسلسل الورق 2، 2، 10 المقطع `1 Bet`
+
+```js
+assert(
+  (function () {
+    count = 0;
+    cc(2);
+    cc(2);
+    var out = cc(10);
+    if (out === '1 Bet') {
+      return true;
+    }
+    return false;
+  })()
+);
+```
+
+يجب أن ينتج تسلسل الورق 3, 2, A, 10, K المقطع `-1 Hold`
+
+```js
+assert(
+  (function () {
+    count = 0;
+    cc(3);
+    cc(2);
+    cc('A');
+    cc(10);
+    var out = cc('K');
+    if (out === '-1 Hold') {
+      return true;
+    }
+    return false;
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let count = 0;
+
+function cc(card) {
+  // Only change code below this line
+
+
+  return "Change Me";
+  // Only change code above this line
+}
+
+cc(2); cc(3); cc(7); cc('K'); cc('A');
+```
+
+# --solutions--
+
+```js
+let count = 0;
+function cc(card) {
+  switch(card) {
+    case 2:
+    case 3:
+    case 4:
+    case 5:
+    case 6:
+      count++;
+      break;
+    case 10:
+    case 'J':
+    case 'Q':
+    case 'K':
+    case 'A':
+      count--;
+  }
+  if(count > 0) {
+    return count + " Bet";
+  } else {
+    return count + " Hold";
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md
new file mode 100644
index 00000000000..aa074aa8881
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/create-decimal-numbers-with-javascript.md
@@ -0,0 +1,55 @@
+---
+id: cf1391c1c11feddfaeb4bdef
+title: إنشاء أرقام عشرية باستخدام JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/ca8GEuW'
+forumTopicId: 16826
+dashedName: create-decimal-numbers-with-javascript
+---
+
+# --description--
+
+يمكننا تخزين أرقام عشرية في المتغيرات أيضا. يشار أحياناً إلى الأرقام العشرية على أنها أرقام <dfn>نُقَط عائمة (floating point)</dfn> أو <dfn>عائمات (floats)</dfn>.
+
+**ملاحظة:** عندما حساب الأرقام، يتم حسابها بدقة محدودة. وقد تؤدي العمليات التي تستخدم نُقَط عائمة إلى نتائج مختلفة عن النتائج المرجوة. إذا حصلت على واحدة من هذه النتائج، أفتح موضوع في <a href="https://forum.freecodecamp.org/" target="_blank" rel="noopener noreferrer nofollow">منتدى freeCodeCamp</a>.
+
+# --instructions--
+
+أنشئ متغير `myDecimal` وإعطائه قيمة عشرية بجزء كسري (على سبيل المثال `5.7`).
+
+# --hints--
+
+يجب أن يكون `myDecimal` رقما.
+
+```js
+assert(typeof myDecimal === 'number');
+```
+
+يجب أن يحتوي `myDecimal` على نقطة عشرية
+
+```js
+assert(myDecimal % 1 != 0);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(){if(typeof myDecimal !== "undefined"){return myDecimal;}})();
+```
+
+## --seed-contents--
+
+```js
+const ourDecimal = 5.7;
+
+// Only change code below this line
+
+```
+
+# --solutions--
+
+```js
+const myDecimal = 9.9;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-a-read-only-variable-with-the-const-keyword.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-a-read-only-variable-with-the-const-keyword.md
new file mode 100644
index 00000000000..8793f815ee9
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-a-read-only-variable-with-the-const-keyword.md
@@ -0,0 +1,88 @@
+---
+id: 587d7b87367417b2b2512b41
+title: تعريف متغير للقراءة ثابت باستخدام كلمة Const
+challengeType: 1
+forumTopicId: 301201
+dashedName: declare-a-read-only-variable-with-the-const-keyword
+---
+
+# --description--
+
+لا يكون أستخدام كلمة `let` الطريقة الجديدة الوحيدة لتعريف المتغيرات. في ES6، يمكنك أيضا تعريف المتغيرات باستخدام كلمة `const`.
+
+تحتوي `const` كل الميزات الرائعة الموجودة في `let`، مع المكافأة المضافة و هي أن المتغيرات المعرفة بواسطة `const` ثابته. هي قيمة ثابتة، مما يعني أنه بمجرد تعيين متغير باستخدام `const`، فلا يمكن إعادة تعيينه:
+
+```js
+const FAV_PET = "Cats";
+FAV_PET = "Dogs";
+```
+
+سيتم عرض خطأ في وحدة التحكم بسبب إعادة تعيين قيمة `FAV_PET`.
+
+يجب عليك دائماً تسمية المتغيرات التي لا ترد إعادة تعيينها باستخدام كلمة `const`. يساعد هذا عندما تحاول بالخطأ إعادة تعيين متغير من المفترض أن يظل ثابتًا.
+
+**ملاحظة:** من الشائع عند المطورين استخدام معرّفات uppercase للمتغيرات ذات القيم الثابتة و lowercase أو camelCase للقيم القابلة للتغيير (objects و arrays). سوف تتعلم المزيد عن الكائنات والقوائم و القيم الثابتة والقابلة للتغيير في تحديات لاحقة. أيضا في التحديات اللاحقة، سترى أمثلة لمعرِّفات المتغيرات uppercase أو lowercase أو camelCase.
+
+# --instructions--
+
+غيّر التعليمات البرمجية بحيث يتم تعريف جميع المتغيرات باستخدام `let` أو `const`. استخدم `let` عندما ترغب بتغير المتغير، و استخدم `const` عندما ترغب ببقي المتغير ثابتاً. كذلك اعد تسمية المتغيرات المعرفة باستخدام `const` لتتوافق مع الممارسات الشائعة. لا تغيير المقاطع المعينة للمتغيرات.
+
+# --hints--
+
+يجب ألا تكون `var` موجودة في التعليمات البرمجية.
+
+```js
+assert.notMatch(code, /var/g);
+```
+
+يجب عليك تغيير `fCC` لتكون كلها uppercase.
+
+```js
+assert.match(code, /(FCC)/);
+assert.notMatch(code, /(fCC)/);
+```
+
+يجب أن يكون متغير `FCC` ثابت تم تعريفه باستخدام `const`.
+
+```js
+assert.match(code, /const\s+FCC/);
+```
+
+لا ينبغي تغيير المقطع المسندة في المتغير `FCC`.
+
+```js
+assert.equal(FCC, 'freeCodeCamp');
+```
+
+يجب أن يتم تعريف `fact` باستخدام `let`.
+
+```js
+assert.match(code, /(let\s+fact)/g);
+```
+
+يجب تغيير `console.log` لطباعة المتغيرات `FCC` و `fact`.
+
+```js
+assert.match(code, /console\.log\(\s*FCC\s*\,\s*fact\s*\)\s*;?/g);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+var fCC = "freeCodeCamp"; // Change this line
+var fact = "is cool!"; // Change this line
+fact = "is awesome!";
+console.log(fCC, fact); // Change this line
+```
+
+# --solutions--
+
+```js
+const FCC = "freeCodeCamp";
+let fact = "is cool!";
+
+fact = "is awesome!";
+console.log(FCC, fact);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md
new file mode 100644
index 00000000000..5827e6bece2
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-javascript-variables.md
@@ -0,0 +1,61 @@
+---
+id: bd7123c9c443eddfaeb5bdef
+title: إنشاء متغيرات في JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cNanrHq'
+forumTopicId: 17556
+dashedName: declare-javascript-variables
+---
+
+# --description--
+
+في علوم الحاسب، تكون <dfn>البيانات</dfn> أي شيء ذو معني للحواسيب. يوفر JavaScript ثماني <dfn>أنواع بيانات</dfn> مختلفة و هي كالآتي `undefined`, و`null`, و`boolean`, و`string`, و`symbol`, و`bigint`, و`number`, و `object`.
+
+على سبيل المثال، تقوم الحاسوب بالتمييز بين الأرقام، مثل الرَّقَم `12` و `strings` مثل `"12"` و `"dog"` أو `"123 cats"`, وهي مجموعات من الرموز. يمكن للحواسيب عمليات رياضية على الأعداد، ولكن ليس على المقاطع النصية (strings).
+
+تسمح <dfn>المتغيرات</dfn> للحواسيب بتخزين البيانات ومعالجتها بطريقة ديناميكية. وهم يفعلون ذلك باستخدام "تسمية" للإشارة إلى البيانات بدلاً من استخدام البيانات نفسها. ويمكن تخزين أي نوع من أنواع البيانات الثمانية في متغير.
+
+المتغيرات مشابهة للمتغيرات x و y التي تستخدمها في الرياضيات، مما يعني أنهم اسم بسيط لتمثيل البيانات التي نريد الرجوع إليها. وتختلف متغيرات الحاسوب عن المتغيرات الرياضية من حيث أنها تستطيع تخزين قيم مختلفة في أوقات مختلفة.
+
+نحن نطلب من JavaScript إنشاء أو <dfn>تعين</dfn> متغير عن طريق وضع الكلمة `var` أمامه، مثل ذلك:
+
+```js
+var ourName;
+```
+
+هذا ينشئ متغير يسمى `ourName`. في JavaScript تنهي التعبيرات باستخدام الفاصلة المنقوطة (;). أسماء المتغيرات يمكن أن تتكون من أرقام وحروف و `$` أو `_`، ولكن قد لا تحتوي على مسافات أو تبدأ برقم.
+
+# --instructions--
+
+استخدم كلمة `var` لإنشاء متغير يسمى `myName`.
+
+**تلميح**  
+أنظر إلى مثال `ourName` أعلاه إذا علقت.
+
+# --hints--
+
+يجب أن تعرف `myName` باستخدام كلمة `var` و تنهي بالفاصلة المنقوطة (;)
+
+```js
+assert(/var\s+myName\s*;/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+if(typeof myName !== "undefined"){(function(v){return v;})(myName);}
+```
+
+## --seed-contents--
+
+```js
+
+```
+
+# --solutions--
+
+```js
+var myName;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-string-variables.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-string-variables.md
new file mode 100644
index 00000000000..7a9cc285755
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/declare-string-variables.md
@@ -0,0 +1,87 @@
+---
+id: bd7123c9c444eddfaeb5bdef
+title: أنشاء متغيرات المقاطع نصية (Declare String Variables)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c2QvWU6'
+forumTopicId: 17557
+dashedName: declare-string-variables
+---
+
+# --description--
+
+في السابق كنت تستخدم الكود التالي لإنشاء متغير:
+
+```js
+var myName;
+```
+
+ولكن يمكنك أيضا أنشاء متغير المقطع بهذه الطريقة:
+
+```js
+var myName = "your name";
+```
+
+`"your name"` يسمي <dfn>مقطع</dfn> <dfn>حرفي</dfn>. المقطع النصي أو مقطع هي مقطع تتكون من رمز أو أكثر، مرفقين في علامات اقتباس (Quotes) مفردة أو مزدوجة.
+
+# --instructions--
+
+إنشاء متغيرين مقطعين جديدين: `myFirstName` و `myLastName` وعيين قيم الاسم الأول والاسم الأخير على التوالي.
+
+# --hints--
+
+يجب أن يحتوي مقطع `myFirstName` على حرف واحد في الأقل.
+
+```js
+assert(
+  (function () {
+    if (
+      typeof myFirstName !== 'undefined' &&
+      typeof myFirstName === 'string' &&
+      myFirstName.length > 0
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  })()
+);
+```
+
+يجب أن يحتوي مقطع `myLastName` على حرف واحد في الأقل.
+
+```js
+assert(
+  (function () {
+    if (
+      typeof myLastName !== 'undefined' &&
+      typeof myLastName === 'string' &&
+      myLastName.length > 0
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+if(typeof myFirstName !== "undefined" && typeof myLastName !== "undefined"){(function(){return myFirstName + ', ' + myLastName;})();}
+```
+
+## --seed-contents--
+
+```js
+
+```
+
+# --solutions--
+
+```js
+var myFirstName = "Alan";
+var myLastName = "Turing";
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/decrement-a-number-with-javascript.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/decrement-a-number-with-javascript.md
new file mode 100644
index 00000000000..ea0af524bf3
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/decrement-a-number-with-javascript.md
@@ -0,0 +1,84 @@
+---
+id: 56533eb9ac21ba0edf2244ad
+title: إنقاص رَقَم باستخدام JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cM2KeS2'
+forumTopicId: 17558
+dashedName: decrement-a-number-with-javascript
+---
+
+# --description--
+
+يمكنك بسهولة <dfn>أنقاص</dfn> أو تقليل متغير بواحد باستخدام المشغل `--`.
+
+```js
+i--;
+```
+
+هو ما يعادل
+
+```js
+i = i - 1;
+```
+
+**ملاحظة:** السطر بِرُمَّته يصبح `i--;`، وإلغاء الحاجة إلى علامة المساواة.
+
+# --instructions--
+
+غير الكود لاستخدام المشغل `--` على `myVar`.
+
+# --hints--
+
+يجب أن يساوي `myVar` قيمة `10`.
+
+```js
+assert(myVar === 10);
+```
+
+يجب تغيير `myVar = myVar - 1;`.
+
+```js
+assert(!code.match(/myVar\s*=\s*myVar\s*[-]\s*1.*?;?/));
+```
+
+لا يجب عليك تعيين `myVar` بقيمة `10`.
+
+```js
+assert(!code.match(/myVar\s*=\s*10.*?;?/));
+```
+
+يجب عليك استخدام المشغل `--` على `myVar`.
+
+```js
+assert(/[-]{2}\s*myVar|myVar\s*[-]{2}/.test(code));
+```
+
+لا يجب عليك تعديل الكود فوق التعليق المحدد.
+
+```js
+assert(/let myVar = 11;/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(z){return 'myVar = ' + z;})(myVar);
+```
+
+## --seed-contents--
+
+```js
+let myVar = 11;
+
+// Only change code below this line
+myVar = myVar - 1;
+```
+
+# --solutions--
+
+```js
+let myVar = 11;
+myVar--;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/delete-properties-from-a-javascript-object.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/delete-properties-from-a-javascript-object.md
new file mode 100644
index 00000000000..5a8b2c45e64
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/delete-properties-from-a-javascript-object.md
@@ -0,0 +1,96 @@
+---
+id: 56bbb991ad1ed5201cd392d3
+title: حذف الخصائص من كائن JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cDqKdTv'
+forumTopicId: 17560
+dashedName: delete-properties-from-a-javascript-object
+---
+
+# --description--
+
+يمكننا أيضا حذف الخصائص من كائنات (objects) كالآتي:
+
+```js
+delete ourDog.bark;
+```
+
+مثال:
+
+```js
+const ourDog = {
+  "name": "Camper",
+  "legs": 4,
+  "tails": 1,
+  "friends": ["everything!"],
+  "bark": "bow-wow"
+};
+
+delete ourDog.bark;
+```
+
+بعد السطر الأخير المبين أعلاه، يبدو `ourDog` كذلك:
+
+```js
+{
+  "name": "Camper",
+  "legs": 4,
+  "tails": 1,
+  "friends": ["everything!"]
+}
+```
+
+# --instructions--
+
+احذف خاصية `tails` من `myDog`. يمكنك استخدام النقطة (dot) أو القوسان المعكوفان (bracket notation).
+
+# --hints--
+
+يجب عليك حذف الخاصية `tails` من `myDog`.
+
+```js
+assert(typeof myDog === 'object' && myDog.tails === undefined);
+```
+
+لا يجب عليك تعديل أسس `myDog`.
+
+```js
+assert(code.match(/"tails": 1/g).length > 0);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(z){return z;})(myDog);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const myDog = {
+  "name": "Happy Coder",
+  "legs": 4,
+  "tails": 1,
+  "friends": ["freeCodeCamp Campers"],
+  "bark": "woof"
+};
+
+// Only change code below this line
+
+```
+
+# --solutions--
+
+```js
+const myDog = {
+  "name": "Happy Coder",
+  "legs": 4,
+  "tails": 1,
+  "friends": ["freeCodeCamp Campers"],
+  "bark": "woof"
+};
+delete myDog.tails;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-decimal-by-another-with-javascript.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-decimal-by-another-with-javascript.md
new file mode 100644
index 00000000000..c1f945ffe6a
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-decimal-by-another-with-javascript.md
@@ -0,0 +1,50 @@
+---
+id: bd7993c9ca9feddfaeb7bdef
+title: قسّم رَقَم عشري على رَقَم عشري آخر باستخدام JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cBZe9AW'
+forumTopicId: 18255
+dashedName: divide-one-decimal-by-another-with-javascript
+---
+
+# --description--
+
+قسم رَقَم عشري على أخر.
+
+# --instructions--
+
+غيّر `0.0` بحيث أن `quotient` تساوي `2.2`.
+
+# --hints--
+
+يجب أن يساوي المتغير `quotient` قيمة `2.2`
+
+```js
+assert(quotient === 2.2);
+```
+
+يجب عليك استخدام المشغل `/` لتقسيم 4.4 على 2
+
+```js
+assert(/4\.40*\s*\/\s*2\.*0*/.test(code));
+```
+
+يجب تعيين متغير quotient مرة واحدة فقط
+
+```js
+assert(code.match(/quotient/g).length === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const quotient = 0.0 / 2.0; // Change this line
+```
+
+# --solutions--
+
+```js
+const quotient = 4.4 / 2.0;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-number-by-another-with-javascript.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-number-by-another-with-javascript.md
new file mode 100644
index 00000000000..b10b10c0f7a
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/divide-one-number-by-another-with-javascript.md
@@ -0,0 +1,59 @@
+---
+id: cf1111c1c11feddfaeb6bdef
+title: قسّم رقمًا على رَقْم آخر باستخدام JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cqkbdAr'
+forumTopicId: 17566
+dashedName: divide-one-number-by-another-with-javascript
+---
+
+# --description--
+
+يمكننا أيضًا قسمة رَقْم على آخر.
+
+يستخدم JavaScript رمز `/` لعملية القسمة.
+
+**مثال**
+
+```js
+const myVar = 16 / 2;
+```
+
+لدي `myVar` قيمة `8` الآن.
+# --instructions--
+
+غيّر `0` بحيث أن `quotient` تساوي `2`.
+
+# --hints--
+
+يجب أن يساوي المتغير `quotient` قيمة 2.
+
+```js
+assert(quotient === 2);
+```
+
+يجب عليك استخدام المشغل `/`.
+
+```js
+assert(/\d+\s*\/\s*\d+/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(z){return 'quotient = '+z;})(quotient);
+```
+
+## --seed-contents--
+
+```js
+const quotient = 66 / 0;
+```
+
+# --solutions--
+
+```js
+const quotient = 66 / 33;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md
new file mode 100644
index 00000000000..e1a578f092a
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/escape-sequences-in-strings.md
@@ -0,0 +1,91 @@
+---
+id: 56533eb9ac21ba0edf2244b6
+title: تسلسلات الهروب في المقاطع (Escape Sequences in Strings)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cvmqRh6'
+forumTopicId: 17567
+dashedName: escape-sequences-in-strings
+---
+
+# --description--
+
+الاقتباسات (Quotes) ليست الرموز الوحيدة التي يمكن أن تكتب <dfn>باحتياليه</dfn> داخل المقطع (string). وهناك سببان لاستخدام رموز احتيالية (escaping characters):
+
+1.  للسماح لك باستخدام الرموز التي قد لا تتمكن من استخدامها، مثل سطر جديد (newline).
+2.  للسماح لك بتمثيل الاقتباسات (Quotes) متعددة في مقطع دون أن يسيء JavaScript فهم ما تعنيه.
+
+وقد تعلمنا ذلك في التحدي السابق.
+
+<table class='table table-striped'><thead><tr><th>الكود</th><th>الناتج</th></tr></thead><tbody><tr><td><code>\'</code></td><td>single quote</td></tr><tr><td><code>\"</code></td><td>double quote</td></tr><tr><td><code>\\</code></td><td>backslash</td></tr><tr><td><code>\n</code></td><td>newline</td></tr><tr><td><code>\t</code></td><td>مساحة يختارها المستخدم (tab)</td></tr><tr><td><code>\r</code></td><td>إعادة التنقل إلى أول السطر (carriage return)</td></tr><tr><td><code>\b</code></td><td>word boundary</td></tr><tr><td><code>\f</code></td><td>form feed</td></tr></tbody></table>
+
+*لاحظ أن يجب أن تكون الخط المائل (backslash) نفسه أحتيالي (escaped) ليتم عرضها كخط مائل backslash.*
+
+# --instructions--
+
+عيّن الأسطر الثلاثة التالية من النص في المتغير `myStr` الوحيد باستخدام تسلسل احتيالي (escape sequences).
+
+<blockquote>FirstLine<br>    \SecondLine<br>ThirdLine</blockquote>
+
+سوف تحتاج إلى استخدام تسلسل احتيالي لإدراج الرموز الخاصة (special characters) بشكل صحيح. ستحتاج أيضًا إلى اتباع التباعد كما هو موضح أعلاه، دون مسافات بين التسلسل الاحتيالي escape sequences أو الكلمات.
+
+**ملاحظة:** يتم الحصول على التباعد (indentation) في `SecondLine` باستخدام رمز التحايل الشريط (tab escape character) وليس المسافة الفارغة (space).
+
+# --hints--
+
+يجب ألا يحتوي `myStr` على أي مسافات
+
+```js
+assert(!/ /.test(myStr));
+```
+
+يجب أن يحتوي `myStr` على المقطع (string) الآتي `FirstLine`, و `SecondLine`, و `ThirdLine` (تذكر الحساسية حالة الحرف (case sensitivity))
+
+```js
+assert(
+  /FirstLine/.test(myStr) && /SecondLine/.test(myStr) && /ThirdLine/.test(myStr)
+);
+```
+
+يجب أن يتبع `FirstLine` رمز السطر الجديد (newline character) الاتي `\n`
+
+```js
+assert(/FirstLine\n/.test(myStr));
+```
+
+يجب أن يحتوي `myStr` على رمز الشريط (tab character) وهو `\t` الذي يتبع رمز السطر الجديد (newline character)
+
+```js
+assert(/\n\t/.test(myStr));
+```
+
+يجب أن يسبق `SecondLine` رمز خط مائل (backslash character) يكتب هكذا `\`
+
+```js
+assert(/\\SecondLine/.test(myStr));
+```
+
+يجب أن يكون هناك رمز السطر الجديد (newline character) بين `SecondLine` و `ThirdLine`
+
+```js
+assert(/SecondLine\nThirdLine/.test(myStr));
+```
+
+يجب أن يحتوي `myStr` فقط على الرموز التي تظهر في التعليمات
+
+```js
+assert(myStr === 'FirstLine\n\t\\SecondLine\nThirdLine');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const myStr = ""; // Change this line
+```
+
+# --solutions--
+
+```js
+const myStr = "FirstLine\n\t\\SecondLine\nThirdLine";
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/escaping-literal-quotes-in-strings.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/escaping-literal-quotes-in-strings.md
new file mode 100644
index 00000000000..0e7ff5dcda4
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/escaping-literal-quotes-in-strings.md
@@ -0,0 +1,72 @@
+---
+id: 56533eb9ac21ba0edf2244b5
+title: الاحتيال على علامات التنصيص في المقاطع النصية
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c2QvgSr'
+forumTopicId: 17568
+dashedName: escaping-literal-quotes-in-strings
+---
+
+# --description--
+
+عندما تحديد مقطع نصي يجب أن تبدأ وتنتهي علامتا التنصيص واحد ('') أو مزدوج (""). ماذا يحدث عندما تحتاج إلى استخدام علامتا التنصيص مثل: `"` أو `'` داخل مقطع نصي خاص بك؟
+
+في JavaScript، يمكنك عمل <dfn>خدعة</dfn> داخل علامتا التنصيص حتي لا تعدّ نهاية للعلامة الأولى في المقطع النصي عن طريق وضع <dfn>خط مائل</dfn> بشكل (`\`) أمام علامتا التنصيص.
+
+```js
+const sampleStr = "Alan said, \"Peter is learning JavaScript\".";
+```
+
+هذا يوضح إلى JavaScript أن علامة التنصيص التالية ليس نهاية للمقطع، بل يجب أن تظهر داخل المقطع. لذا عند طبع هذا إلى وحدة التحكم ستحصل على:
+
+```js
+Alan said, "Peter is learning JavaScript".
+```
+
+# --instructions--
+
+استخدم <dfn>خطوط مائلة</dfn> لتعيين مقطع إلى متغير `myStr` بحيث إذا كنت تريد طباعته إلى وحدة التحكم، ستري ما يلي:
+
+```js
+I am a "double quoted" string inside "double quotes".
+```
+
+# --hints--
+
+يجب عليك استخدام علامة التنصيص المزدوجة (`"`) وتتحايل على العلامات أربع مرات مثل (`\"`).
+
+```js
+assert(code.match(/\\"/g).length === 4 && code.match(/[^\\]"/g).length === 2);
+```
+
+يجب أن يحتوي المتغير `myStr` على المقطع النصي الآتي: `I am a "double quoted" string inside "double quotes".`
+
+```js
+assert(/I am a "double quoted" string inside "double quotes(\."|"\.)$/.test(myStr));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(){
+  if(typeof myStr === 'string') {
+    console.log("myStr = \"" + myStr + "\"");
+  } else {
+    console.log("myStr is undefined");
+  }
+})();
+```
+
+## --seed-contents--
+
+```js
+const myStr = ""; // Change this line
+```
+
+# --solutions--
+
+```js
+const myStr = "I am a \"double quoted\" string inside \"double quotes\".";
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords.md
new file mode 100644
index 00000000000..7cfbc07cab4
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords.md
@@ -0,0 +1,74 @@
+---
+id: 587d7b87367417b2b2512b3f
+title: استكشاف الاختلافات بين كلمتين var و let
+challengeType: 1
+forumTopicId: 301202
+dashedName: explore-differences-between-the-var-and-let-keywords
+---
+
+# --description--
+
+واحدة من أكبر مشكلات إنشاء المتغيرات باستخدام كلمة `var` هي أنه يمكنك بسهولة تغيير تعريفات المتغيرات السابقة:
+
+```js
+var camper = "James";
+var camper = "David";
+console.log(camper);
+```
+
+في الكود أعلاه، تم أنشاء متغير `camper` في الأصل بقيمة `James`، وتم تغيره بعد ذلك ليصبح `David`. ثم يعرض وحدة التحكم المقطع (string) الآتي `David`.
+
+في تطبيق صغير، قد لا تواجه هذا النوع من المشاكل. لكن كلما أصبح الكود الخاص بك أكبر، قد تغير المتغير عن طريق الخطأ الذي لم تكن تنوي تغييره. ولأذن هذا السلوك لا يوقع خطأ، يصبح البحث عن الأخطاء وإصلاحها أكثر صعوبة.
+
+تم تقديم كلمة `let` في ES6، وهو تحديث رئيس JavaScript، لحل هذه المشكلة المحتملة باستخدام `var`. ستتعرف إلى ميزات ES6 الأخرى في التحديات اللاحقة.
+
+إذا استبدلت `var` إلى `let` في الكود أعلاه، فإنه يؤدي إلى خطأ:
+
+```js
+let camper = "James";
+let camper = "David";
+```
+
+يمكن رؤية الخطأ في وحدة تحكم المتصفح الخاص بك.
+
+لذلك على خلاف `var`، عندما تستخدم `let`، يمكن تعريف متغير بنفس الاسم مرة واحدة فقط.
+
+# --instructions--
+
+حديث الكود بحيث يستخدم فقط كلمة `let`.
+
+# --hints--
+
+يجب ألا تكون `var` موجودة في الكود.
+
+```js
+assert.notMatch(code, /var/g);
+```
+
+يجب أن تساوي `catName` المقطع (string) الآتي `Oliver`.
+
+```js
+assert.equal(catName, 'Oliver');
+```
+
+يجب أن تساوي `catSound` المقطع (string) الآتي `Meow!`
+
+```js
+assert.equal(catSound, 'Meow!');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+var catName = "Oliver";
+var catSound = "Meow!";
+```
+
+# --solutions--
+
+```js
+let catName = "Oliver";
+let catSound = "Meow!";
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md
new file mode 100644
index 00000000000..e91b7bc1c56
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/find-the-length-of-a-string.md
@@ -0,0 +1,68 @@
+---
+id: bd7123c9c448eddfaeb5bdef
+title: العثور على طول مقطع نصي (Find the Length of a String)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cvmqEAd'
+forumTopicId: 18182
+dashedName: find-the-length-of-a-string
+---
+
+# --description--
+
+يمكنك العثور على قيمة طول `String` بكتابة `.length` بعد متغير المقطع (string) أو المقطع النصي (string literal).
+
+```js
+console.log("Alan Peter".length);
+```
+
+سوف يتم عرض القيمة `10` في وحدة التحكم. لاحظ أن رمز المسافة بين "Alan" و "Peter" يتم حسابه أيضا.
+
+على سبيل المثال، إذا أنشئت متغير `const firstName = "Ada"`، يمكننا معرفة طول المقطع (string) الآتي `Ada` باستخدام `firstName.length`.
+
+# --instructions--
+
+استخدم خاصية `.length` لتعيين `lastNameLength` إلى عدد الأحرف في `lastName`.
+
+# --hints--
+
+لا يجب عليك تغيير تعريفات المتغيرات في قسم `// Setup`.
+
+```js
+assert(
+  code.match(/let lastNameLength = 0;/) &&
+    code.match(/const lastName = "Lovelace";/)
+);
+```
+
+يجب أن يساوي `lastNameLength` ثمانية.
+
+```js
+assert(typeof lastNameLength !== 'undefined' && lastNameLength === 8);
+```
+
+يجب الحصول على الطول `lastName` باستخدام `.length` مثل: `lastName.length`.
+
+```js
+assert(code.match(/=\s*lastName\.length/g) && !code.match(/lastName\s*=\s*8/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Setup
+let lastNameLength = 0;
+const lastName = "Lovelace";
+
+// Only change code below this line
+lastNameLength = lastName;
+```
+
+# --solutions--
+
+```js
+let lastNameLength = 0;
+const lastName = "Lovelace";
+lastNameLength = lastName.length;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/finding-a-remainder-in-javascript.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/finding-a-remainder-in-javascript.md
new file mode 100644
index 00000000000..f95f97cd5b5
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/finding-a-remainder-in-javascript.md
@@ -0,0 +1,67 @@
+---
+id: 56533eb9ac21ba0edf2244ae
+title: العثور على باقي القسمة باستخدام JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cWP24Ub'
+forumTopicId: 18184
+dashedName: finding-a-remainder-in-javascript
+---
+
+# --description--
+
+مشغل <dfn>المتبقي</dfn> الآتي `%` يعطي الجزء المتبقي من عملية تقسيم رقمين.
+
+**مثال**
+
+<blockquote>5 % 2 = 1 لأن <br>Math.floor(5 / 2) = 2 (الناتج)<br>2 * 2 = 4<br>5 - 4 = 1 (المتبقي)</blockquote>
+
+**الاستخدام**  
+في الرياضيات، يمكن التحقق من أن الرَّقَم زوجي أو فردي عن طريق التحقق من بقية قسمة العدد على `2`.
+
+<blockquote>17 % 2 = 1 (17 فردي)<br>48 % 2 = 0 (48 زوجي)</blockquote>
+
+**ملاحظة:** مشغل <dfn>المتبقي</dfn> يشار إليه أحياناً بشكل غير صحيح على أنه مشغل بالمائة (modulus operator). إنه شبيه جداً بالـمائه (modulus)، ولكنه لا يعمل بشكل صحيح مع الأعداد السالبة.
+
+# --instructions--
+
+عيّن `remainder` مساوية لبقية `11` مقسوما على `3` باستخدام مشغل <dfn>المتبقي</dfn> الآتي (`%`).
+
+# --hints--
+
+يجب تهيئة المتغير `remainder` بمعني أخر يجب أن يكون initialized
+
+```js
+assert(/(const|let|var)\s+?remainder/.test(code));
+```
+
+يجب أن تكون قيمة `remainder` تساوي `2`
+
+```js
+assert(remainder === 2);
+```
+
+يجب عليك استخدام المشغل `%`
+
+```js
+assert(/\s+?remainder\s*?=\s*?.*%.*;?/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(y){return 'remainder = '+y;})(remainder);
+```
+
+## --seed-contents--
+
+```js
+const remainder = 0;
+```
+
+# --solutions--
+
+```js
+const remainder = 11 % 3;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-fractions-with-javascript.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-fractions-with-javascript.md
new file mode 100644
index 00000000000..cac2415e043
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-fractions-with-javascript.md
@@ -0,0 +1,69 @@
+---
+id: cf1111c1c11feddfaeb9bdef
+title: إنشاء كسور عشوائية باستخدام JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cyWJJs3'
+forumTopicId: 18185
+dashedName: generate-random-fractions-with-javascript
+---
+
+# --description--
+
+الأرقام العشوائية مفيدة لخلق سلوك عشوائي.
+
+لدى JavaScript وظيفة `Math.random()` التي تولد رَقَم عشري عشوائي بين `0` (مشمول) و `1` (غير مشمول). ولذلك يمكن أن ينتج `Math.random()` رَقَم `0` ولكن لا يمكن أبدا أن ينتج رَقَم `1`.
+
+**ملاحظة:** مثل <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator" target="_blank" rel="noopener noreferrer nofollow">قيم التخزين مع مشغل التعيين (=)</a>، سيتم حل جميع مكالمات الوظيفة قبل تنفيذ `return` حتى نتمكن من `return` قيمة وظيفة `Math.random()`.
+
+# --instructions--
+
+غيّر `randomFraction` لإنتاج رَقَم عشوائي بدلا من إنتاج `0`.
+
+# --hints--
+
+يجب أن ينتج `randomFraction` رقما عشوائيا.
+
+```js
+assert(typeof randomFraction() === 'number');
+```
+
+يجب أن يكون الرَّقْم المنتج بواسطة `randomFraction` عشري.
+
+```js
+assert((randomFraction() + '').match(/\./g));
+```
+
+يجب أن تستخدم `Math.random` لإنشاء رَقَم عشري عشوائي.
+
+```js
+assert(code.match(/Math\.random/g).length >= 0);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(){return randomFraction();})();
+```
+
+## --seed-contents--
+
+```js
+function randomFraction() {
+
+  // Only change code below this line
+
+  return 0;
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function randomFraction() {
+  return Math.random();
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
new file mode 100644
index 00000000000..32fee899c59
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-with-javascript.md
@@ -0,0 +1,90 @@
+---
+id: cf1111c1c12feddfaeb1bdef
+title: إنشاء أرقام صحيحة عشوائية باستخدام JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cRn6bfr'
+forumTopicId: 18186
+dashedName: generate-random-whole-numbers-with-javascript
+---
+
+# --description--
+
+من الرائع أنه يمكننا توليد أرقام عشرية عشوائية، ولكن من المفيد أكثر إذا استخدمنا ذلك لتوليد أعداد عشوائية صحيحة.
+
+<ol><li>استخدم <code>Math.random()</code> لإنشاء رَقَم عشري عشوائي.</li><li>ضاعف هذا الرَّقَم العشري العشوائي في <code>20</code>.</li><li>استخدم الوظيفة أخر، <code>Math.floor()</code> لتقريب الرَّقْم إلى أقرب رَقَم صحيح.</li></ol>
+
+تذكر ألا يمكن `Math.random()` أن يعيد `1` و لأنك تقريب لأقل رَقْم، من المستحيل في الواقع الحصول على `20`. ستعطينا هذه التقنية رَقَما صحيحا بين `0` و `19`.
+
+بتجميع كل شيء معًا، هذا هو الكود الخاص بنا:
+
+```js
+Math.floor(Math.random() * 20);
+```
+
+نحن نستدعي `Math.random()` ثم نضرب النتيجة في 20، ثم نمرر القيمة إلى وظيفة `Math.floor()` لتقريب القيمة إلى أقرب عدد صحيح.
+
+# --instructions--
+
+استخدم هذه التقنية لإنشاء وإعادة عدد صحيح عشوائي بين `0` و `9`.
+
+# --hints--
+
+يجب أن تكون نتيجة `randomWholeNum` عدداً صحيحاً.
+
+```js
+assert(
+  typeof randomWholeNum() === 'number' &&
+    (function () {
+      var r = randomWholeNum();
+      return Math.floor(r) === r;
+    })()
+);
+```
+
+يجب عليك استخدام `Math.random` لتوليد رَقَم عشوائي.
+
+```js
+assert(code.match(/Math.random/g).length >= 1);
+```
+
+عليك ضرب نتيجة `Math.random` في 10 لجعلها رقما بين صفر و تسعة.
+
+```js
+assert(
+  code.match(/\s*?Math.random\s*?\(\s*?\)\s*?\*\s*?10[\D]\s*?/g) ||
+    code.match(/\s*?10\s*?\*\s*?Math.random\s*?\(\s*?\)\s*?/g)
+);
+```
+
+يجب عليك استخدام `Math.floor` لإزالة الجزء العشري من الرَّقَم.
+
+```js
+assert(code.match(/Math.floor/g).length >= 1);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(){return randomWholeNum();})();
+```
+
+## --seed-contents--
+
+```js
+function randomWholeNum() {
+
+  // Only change code below this line
+
+  return Math.random();
+}
+```
+
+# --solutions--
+
+```js
+function randomWholeNum() {
+  return Math.floor(Math.random() * 10);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
new file mode 100644
index 00000000000..95344ace352
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/generate-random-whole-numbers-within-a-range.md
@@ -0,0 +1,102 @@
+---
+id: cf1111c1c12feddfaeb2bdef
+title: توليد أعداد صحيحة عشوائية داخل نطاق (Generate Random Whole Numbers within a Range)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cm83yu6'
+forumTopicId: 18187
+dashedName: generate-random-whole-numbers-within-a-range
+---
+
+# --description--
+
+بدلاً من إنشاء رَقَم صحيح عشوائي بين صفر ورَقَم أخر معين، كما فعلنا من قبل، يمكننا إنشاء رَقَم صحيح عشوائي يقع ضمن نطاق رَقَمين محددين.
+
+لفعل ذلك، سنحدد الحد الأدنى للرَقْم `min` والحد الأقصى `max`.
+
+هذه هي الصيغة التي سنستخدمها. خذ لحظة لقراءتها ومحاولة فهم ما يفعله هذا الكود:
+
+```js
+Math.floor(Math.random() * (max - min + 1)) + min
+```
+
+# --instructions--
+
+أنشئ وظيفة (function) تسمى `randomRange` التي تأخذ نطاق `myMin` و `myMax` وترجع رَقَماً صحيحاً عشوائياً أكبر من أو يساوي `myMax`، و أقل من أو يساوي `myMin`، بشمول الاثنين.
+
+# --hints--
+
+أقل عدد عشوائي يمكن إنشاؤه بواسطة `randomRange` يجب أن يكون مساويا للحد الأدنى من الرَّقْم الخاص بك `myMin`.
+
+```js
+assert(calcMin === 5);
+```
+
+أعلى رقم عشوائي يمكن إنشاؤه بواسطة `randomRange` يجب أن يكون مساوياً للحد الأقصى من الرقم الخاص بك `myMax`.
+
+```js
+assert(calcMax === 15);
+```
+
+الرَّقَم العشوائي التي تم إنشاؤه بواسطة `randomRange` يجب أن يكون عددًا صحيحًا وليس عشريًا.
+
+```js
+assert(randomRange(0, 1) % 1 === 0);
+```
+
+يجب أن يستخدم `randomRange` كلا من `myMax` و `myMin`, لإنتاج رَقَم عشوائي في نطاقك.
+
+```js
+assert(
+  (function () {
+    if (
+      code.match(/myMax/g).length > 1 &&
+      code.match(/myMin/g).length > 2 &&
+      code.match(/Math.floor/g) &&
+      code.match(/Math.random/g)
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+var calcMin = 100;
+var calcMax = -100;
+for(var i = 0; i < 100; i++) {
+  var result = randomRange(5,15);
+  calcMin = Math.min(calcMin, result);
+  calcMax = Math.max(calcMax, result);
+}
+(function(){
+  if(typeof myRandom === 'number') {
+    return "myRandom = " + myRandom;
+  } else {
+    return "myRandom undefined";
+  }
+})()
+```
+
+## --seed-contents--
+
+```js
+function randomRange(myMin, myMax) {
+  // Only change code below this line
+  return 0;
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function randomRange(myMin, myMax) {
+  return Math.floor(Math.random() * (myMax - myMin + 1)) + myMin;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-scope-and-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-scope-and-functions.md
new file mode 100644
index 00000000000..67f5036a9a3
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-scope-and-functions.md
@@ -0,0 +1,128 @@
+---
+id: 56533eb9ac21ba0edf2244be
+title: النطاق الشامل والوظائف
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cQM7mCN'
+forumTopicId: 18193
+dashedName: global-scope-and-functions
+---
+
+# --description--
+
+في JavaScript، يشير <dfn>النطاق</dfn> إلى رؤية المتغيرات. يكون إلى المتغيرات التي تم تعريفها خارج الوظيفة نطاق يسمي <dfn>شامل</dfn>. وهذا يعني أنه يمكن رؤيتها في كل مكان في التعليمات البرمجية JavaScript الخاص بك.
+
+يتم تعريف المتغيرات دون استخدام الكلمات الآتية `let` أو `const` يتم إنشاؤها تلقائيًا في نطاق `global`. هذا يمكن أن يؤدي إلى عواقب غير مقصودة في مكان آخر من التعليمات البرمجية الخاص بك أو عند تشغيل الوظيفة مرة أخرى. يجب عليك دائماً تعريف المتغيرات الخاصة بك باستخدام `let` أو `const`.
+
+# --instructions--
+
+باستخدام `let` أو `const`، عرف متغير شامل يسمى `myGlobal` خارج الوظيفة ما. قم بتهيئته بقيمة `10`.
+
+داخل الوظيفة `fun1`، عيّّن `5` إلى `oopsGlobal` ولكن ***دون*** استخدام `var`, أو `let`, أو `const`.
+
+# --hints--
+
+يجب أن يتم تعريف `myGlobal`
+
+```js
+assert(typeof myGlobal != 'undefined');
+```
+
+يجب أن يساوي `myGlobal` قيمة `10`
+
+```js
+assert(myGlobal === 10);
+```
+
+يجب تعريف `myGlobal` باستخدام `let` أو `const`
+
+```js
+assert(/(let|const)\s+myGlobal/.test(code));
+```
+
+يجب أن يكون متغير `oopsGlobal` شامل وأن يساوي `5`
+
+```js
+assert(typeof oopsGlobal != 'undefined' && oopsGlobal === 5);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+var logOutput = "";
+var originalConsole = console
+function capture() {
+    var nativeLog = console.log;
+    console.log = function (message) {
+        logOutput = message;
+        if(nativeLog.apply) {
+          nativeLog.apply(originalConsole, arguments);
+        } else {
+          var nativeMsg = Array.prototype.slice.apply(arguments).join(' ');
+          nativeLog(nativeMsg);
+        }
+    };
+}
+
+function uncapture() {
+  console.log = originalConsole.log;
+}
+var oopsGlobal;
+capture();
+```
+
+## --after-user-code--
+
+```js
+fun1();
+fun2();
+uncapture();
+(function() { return logOutput || "console.log never called"; })();
+```
+
+## --seed-contents--
+
+```js
+// Declare the myGlobal variable below this line
+
+
+function fun1() {
+  // Assign 5 to oopsGlobal Here
+
+}
+
+// Only change code above this line
+
+function fun2() {
+  var output = "";
+  if (typeof myGlobal != "undefined") {
+    output += "myGlobal: " + myGlobal;
+  }
+  if (typeof oopsGlobal != "undefined") {
+    output += " oopsGlobal: " + oopsGlobal;
+  }
+  console.log(output);
+}
+```
+
+# --solutions--
+
+```js
+const myGlobal = 10;
+
+function fun1() {
+  oopsGlobal = 5;
+}
+
+function fun2() {
+  var output = "";
+  if(typeof myGlobal != "undefined") {
+    output += "myGlobal: " + myGlobal;
+  }
+  if(typeof oopsGlobal != "undefined") {
+    output += " oopsGlobal: " + oopsGlobal;
+  }
+  console.log(output);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md
new file mode 100644
index 00000000000..efc9557e8b7
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/global-vs.-local-scope-in-functions.md
@@ -0,0 +1,77 @@
+---
+id: 56533eb9ac21ba0edf2244c0
+title: النطاق العام مقابل النطاق المحلي في الوظائف (Global vs. Local Scope in Functions)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c2QwKH2'
+forumTopicId: 18194
+dashedName: global-vs--local-scope-in-functions
+---
+
+# --description--
+
+من الممكن الحصول على متغيرات <dfn>محالية (Local)</dfn> و <dfn>عامة (Global)</dfn> بنفس الاسم. عندما تقوم ذلك، يكون المتغير المحالي (local) له الأسبقية على المتغير العام (global).
+
+وفي هذا المثال:
+
+```js
+const someVar = "Hat";
+
+function myFun() {
+  const someVar = "Head";
+  return someVar;
+}
+```
+
+سوف تنتج الوظيفة `myFun` السلسلة `Head` لأن النسخة المحالية (local) من المتغير موجودة.
+
+# --instructions--
+
+أضف متغير محالي (local) إلى وظيفة `myOutfit` لتجاوز قيمة `outerWear` بالمقطع `sweater`.
+
+# --hints--
+
+لا يجب عليك تغيير قيمة العام (global) الآتي `outerWear`.
+
+```js
+assert(outerWear === 'T-Shirt');
+```
+
+يجب أن ينتج `myOutfit` المقطع `sweater`.
+
+```js
+assert(myOutfit() === 'sweater');
+```
+
+لا يجب عليك تغيير التعبير المنتج (return statement).
+
+```js
+assert(/return outerWear/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Setup
+const outerWear = "T-Shirt";
+
+function myOutfit() {
+  // Only change code below this line
+
+  // Only change code above this line
+  return outerWear;
+}
+
+myOutfit();
+```
+
+# --solutions--
+
+```js
+const outerWear = "T-Shirt";
+function myOutfit() {
+  const outerWear = "sweater";
+  return outerWear;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/golf-code.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/golf-code.md
new file mode 100644
index 00000000000..649e46e30aa
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/golf-code.md
@@ -0,0 +1,136 @@
+---
+id: 5664820f61c48e80c9fa476c
+title: تعليمات برمجية للعبة الجولف
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c9ykNUR'
+forumTopicId: 18195
+dashedName: golf-code
+---
+
+# --description--
+
+في لُعْبَة الجولف، كل ثقب لديه `par`، التي تصف متوسط عدد الضربات `strokes` المتوقعة من اللاعب من أجل أدخال الكرة في الثَّقب لإكمال اللعب. اعتمادًا على مدى بعد `strokes` من `par` سواء البعد كان فوق أو تحت، يوجد اسم مستعار مختلف لكل منهم.
+
+سيتم تمرير `par` و `strokes` كحجة الوظائف الخاص بك. أرجع المقطع الصحيح وفقًا لهذا الجدول الذي يسرد strokes حسب الأولوية؛ من الأعلى إلى الأسفل:
+
+<table class='table table-striped'><thead><tr><th>Strokes</th><th>Return</th></tr></thead><tbody><tr><td>1</td><td>"Hole-in-one!"</td></tr><tr><td>&#x3C;= par - 2</td><td>"Eagle"</td></tr><tr><td>par - 1</td><td>"Birdie"</td></tr><tr><td>par</td><td>"Par"</td></tr><tr><td>par + 1</td><td>"Bogey"</td></tr><tr><td>par + 2</td><td>"Double Bogey"</td></tr><tr><td>>= par + 3</td><td>"Go Home!"</td></tr></tbody></table>
+
+يكونان `par` و `strokes` دائما من نوع رَقْم أيحابى. لقد أضفنا القائمة من جميع الأسماء لمساعدتك.
+
+# --hints--
+
+يجب أن ينتج `golfScore(4, 1)` المقطع `Hole-in-one!`
+
+```js
+assert(golfScore(4, 1) === 'Hole-in-one!');
+```
+
+يجب أن ينتج `golfScore(4, 2)` المقطع `Eagle`
+
+```js
+assert(golfScore(4, 2) === 'Eagle');
+```
+
+يجب أن ينتج `golfScore(5, 2)` المقطع `Eagle`
+
+```js
+assert(golfScore(5, 2) === 'Eagle');
+```
+
+يجب أن ينشئ `golfScore(4, 3)` المقطع `Birdie`
+
+```js
+assert(golfScore(4, 3) === 'Birdie');
+```
+
+يجب أن ينشئ `golfScore(4, 4)` المقطع `Par`
+
+```js
+assert(golfScore(4, 4) === 'Par');
+```
+
+يجب أن ينشئ `golfScore(1, 1)` المقطع `Hole-in-one!`
+
+```js
+assert(golfScore(1, 1) === 'Hole-in-one!');
+```
+
+يجب أن ينشئ `golfScore(5, 5)` المقطع `Par`
+
+```js
+assert(golfScore(5, 5) === 'Par');
+```
+
+يجب أن ينشئ `golfScore(4, 5)` المقطع `Bogey`
+
+```js
+assert(golfScore(4, 5) === 'Bogey');
+```
+
+يجب أن ينشئ `golfScore(4, 6)` المقطع `Double Bogey`
+
+```js
+assert(golfScore(4, 6) === 'Double Bogey');
+```
+
+يجب أن ينشئ `golfScore(4, 7)` المقطع `Go Home!`
+
+```js
+assert(golfScore(4, 7) === 'Go Home!');
+```
+
+يجب أن ينشئ `golfScore(5, 9)` المقطع `Go Home!`
+
+```js
+assert(golfScore(5, 9) === 'Go Home!');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const names = ["Hole-in-one!", "Eagle", "Birdie", "Par", "Bogey", "Double Bogey", "Go Home!"];
+
+function golfScore(par, strokes) {
+  // Only change code below this line
+
+
+  return "Change Me";
+  // Only change code above this line
+}
+
+golfScore(5, 4);
+```
+
+# --solutions--
+
+```js
+function golfScore(par, strokes) {
+  if (strokes === 1) {
+    return "Hole-in-one!";
+  }
+
+  if (strokes <= par - 2) {
+    return "Eagle";
+  }
+
+  if (strokes === par - 1) {
+    return "Birdie";
+  }
+
+  if (strokes === par) {
+    return "Par";
+  }
+
+  if (strokes === par + 1) {
+    return "Bogey";
+  }
+
+  if(strokes === par + 2) {
+    return "Double Bogey";
+  }
+
+  return "Go Home!";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/increment-a-number-with-javascript.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/increment-a-number-with-javascript.md
new file mode 100644
index 00000000000..58c323c61a5
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/increment-a-number-with-javascript.md
@@ -0,0 +1,80 @@
+---
+id: 56533eb9ac21ba0edf2244ac
+title: زيادة رَقْم باستخدام JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/ca8GLT9'
+forumTopicId: 18201
+dashedName: increment-a-number-with-javascript
+---
+
+# --description--
+
+يمكنك بسهولة <dfn>زيادة</dfn> أو إضافة واحد إلى متغير مع مشغل `+ +`.
+
+```js
+i++;
+```
+
+هو ما يعادل
+
+```js
+i = i + 1;
+```
+
+**ملاحظة:** السطر بِرُمَّته يصبح `i++;`، مما يزيل الحاجة إلى علامة يساوي (equal sign).
+
+# --instructions--
+
+غيّر الكود لاستخدام المشغل `++` على المتغير `myVar`.
+
+# --hints--
+
+يجب أن يساوي `myVar` قيمة `88`.
+
+```js
+assert(myVar === 88);
+```
+
+لا يجب عليك استخدام مشغل التعيين.
+
+```js
+assert(
+  /let\s*myVar\s*=\s*87;\s*\/*.*\s*([+]{2}\s*myVar|myVar\s*[+]{2})/.test(code)
+);
+```
+
+يجب عليك استخدام المشغل `++`.
+
+```js
+assert(/[+]{2}\s*myVar|myVar\s*[+]{2}/.test(code));
+```
+
+لا يجب عليك تعديل الكود فوق التعليق المحدد.
+
+```js
+assert(/let myVar = 87;/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(z){return 'myVar = ' + z;})(myVar);
+```
+
+## --seed-contents--
+
+```js
+let myVar = 87;
+
+// Only change code below this line
+myVar = myVar + 1;
+```
+
+# --solutions--
+
+```js
+let myVar = 87;
+myVar++;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md
new file mode 100644
index 00000000000..a6fc9d7dc04
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/initializing-variables-with-the-assignment-operator.md
@@ -0,0 +1,44 @@
+---
+id: 56533eb9ac21ba0edf2244a9
+title: تهيئة المتغيرات باستخدام مشغل التعيين (Initializing Variables with the Assignment Operator)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cWJ4Bfb'
+forumTopicId: 301171
+dashedName: initializing-variables-with-the-assignment-operator
+---
+
+# --description--
+
+من الشائع <dfn>تعيين</dfn> للمتغير قيمة أولية في نفس السطر المعلن عنه.
+
+```js
+var myVar = 0;
+```
+
+ينشئ متغيرًا جديدًا يسمى `myVar` ويعينه قيمة مبدئية تبلغ `0`.
+
+# --instructions--
+
+عرّف متغير `a` باستخدام `var` و عيّن له قيمة `9`.
+
+# --hints--
+
+يجب عليك تهيئة `a` بقيمة `9`.
+
+```js
+assert(/var\s+a\s*=\s*9(\s*;?\s*)$/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+
+```
+
+# --solutions--
+
+```js
+var a = 9;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements.md
new file mode 100644
index 00000000000..b9e62828b9d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-if-statements.md
@@ -0,0 +1,114 @@
+---
+id: 56533eb9ac21ba0edf2244db
+title: مقدمة ألى تعبيرات Else/If
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/caeJ2hm'
+forumTopicId: 18206
+dashedName: introducing-else-if-statements
+---
+
+# --description--
+
+إذا كان لديك شروط متعددة تحتاج التعامل معها، يمكنك استخدام `if` بالإضافة مع `else if`.
+
+```js
+if (num > 15) {
+  return "Bigger than 15";
+} else if (num < 5) {
+  return "Smaller than 5";
+} else {
+  return "Between 5 and 15";
+}
+```
+
+# --instructions--
+
+حول المنطق (logic) لاستخدام `else if`.
+
+# --hints--
+
+يجب أن يكون لديك اثنين من تعبيرات `else` في الأقل
+
+```js
+assert(code.match(/else/g).length > 1);
+```
+
+يجب أن يكون لديك اثنين من تعبيرات `if` في الأقل
+
+```js
+assert(code.match(/if/g).length > 1);
+```
+
+يجب أن يكون لديك قوسين منحين (curly braces) لكل `if else` لكتابه الكود بداخلها.
+
+```js
+assert(
+  code.match(
+    /if\s*\((.+)\)\s*\{[\s\S]+\}\s*else\s+if\s*\((.+)\)\s*\{[\s\S]+\}\s*else\s*\{[\s\S]+\s*\}/
+  )
+);
+```
+
+يجب أن تنتج `testElseIf(0)` المقطع `Smaller than 5`
+
+```js
+assert(testElseIf(0) === 'Smaller than 5');
+```
+
+يجب أن تنتج `testElseIf(5)` مقطع `Between 5 and 10`
+
+```js
+assert(testElseIf(5) === 'Between 5 and 10');
+```
+
+يجب أن تنتج `testElseIf(7)` مقطع `Between 5 and 10`
+
+```js
+assert(testElseIf(7) === 'Between 5 and 10');
+```
+
+يجب أن تنتج `testElseIf(10)` مقطع `Between 5 and 10`
+
+```js
+assert(testElseIf(10) === 'Between 5 and 10');
+```
+
+يجب أن تنتج `testElseIf(12)` مقطع `Greater than 10`
+
+```js
+assert(testElseIf(12) === 'Greater than 10');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function testElseIf(val) {
+  if (val > 10) {
+    return "Greater than 10";
+  }
+
+  if (val < 5) {
+    return "Smaller than 5";
+  }
+
+  return "Between 5 and 10";
+}
+
+testElseIf(7);
+```
+
+# --solutions--
+
+```js
+function testElseIf(val) {
+  if(val > 10) {
+    return "Greater than 10";
+  } else if(val < 5) {
+    return "Smaller than 5";
+  } else {
+    return "Between 5 and 10";
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-statements.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-statements.md
new file mode 100644
index 00000000000..476ae2c66ef
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/introducing-else-statements.md
@@ -0,0 +1,106 @@
+---
+id: 56533eb9ac21ba0edf2244da
+title: مقدمة ألى تعبيرات Else
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cek4Efq'
+forumTopicId: 18207
+dashedName: introducing-else-statements
+---
+
+# --description--
+
+عندما يكون شرط العبارة `if` صحيحًا، يتم تنفيذ كتلة التعليمات البرمجية التي تليها. ماذا عن عندما يكون هذا الشرط خطأ؟ عادة لن يحدث شيء. باستخدام عبارة `else`، يمكن تنفيذ كتلة بديلة من التعليمات البرمجية.
+
+```js
+if (num > 10) {
+  return "Bigger than 10";
+} else {
+  return "10 or Less";
+}
+```
+
+# --instructions--
+
+ادمج عبارات `if` في عبارة واحدة `if/else`.
+
+# --hints--
+
+يجب أن يكون لديك عبارة `if` واحدة فقط في المحرر
+
+```js
+assert(code.match(/if/g).length === 1);
+```
+
+يجب عليك استخدام عبارة `else`
+
+```js
+assert(/else/g.test(code));
+```
+
+يجب أن تنتج `testElse(4)` مقطع `5 or Smaller`
+
+```js
+assert(testElse(4) === '5 or Smaller');
+```
+
+يجب أن تنتج `testElse(5)` مقطع `5 or Smaller`
+
+```js
+assert(testElse(5) === '5 or Smaller');
+```
+
+يجب أن تنتج `testElse(6)` مقطع `Bigger than 5`
+
+```js
+assert(testElse(6) === 'Bigger than 5');
+```
+
+يجب أن تنتج `testElse(10)` مقطع `Bigger than 5`
+
+```js
+assert(testElse(10) === 'Bigger than 5');
+```
+
+لا يجب عليك تعديل الكود فوق التعليق المحدد.
+
+```js
+assert(/let result = "";/.test(code) && /return result;/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function testElse(val) {
+  let result = "";
+  // Only change code below this line
+
+  if (val > 5) {
+    result = "Bigger than 5";
+  }
+
+  if (val <= 5) {
+    result = "5 or Smaller";
+  }
+
+  // Only change code above this line
+  return result;
+}
+
+testElse(4);
+```
+
+# --solutions--
+
+```js
+function testElse(val) {
+  let result = "";
+  if(val > 5) {
+    result = "Bigger than 5";
+  } else {
+    result = "5 or Smaller";
+  }
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-odd-numbers-with-a-for-loop.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-odd-numbers-with-a-for-loop.md
new file mode 100644
index 00000000000..ab02052f5b7
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-odd-numbers-with-a-for-loop.md
@@ -0,0 +1,69 @@
+---
+id: 56104e9e514f539506016a5c
+title: تكرار الأرقام الفردية باستخدام حلقة For التكرارية (Iterate Odd Numbers With a For Loop)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cm8n7T9'
+forumTopicId: 18212
+dashedName: iterate-odd-numbers-with-a-for-loop
+---
+
+# --description--
+
+لا تتطلب For loops مرور علي عناصر واحد تلو الآخر. بتغيير `final-expression` الخاص بك، يمكننا أن تعد بأرقام زوجية.
+
+سنبدأ عند `i = 0` والحلقة (loop) مادام `i < 10`. أكثر قيمة `i` بمقدار 2 في كل loop باستخدام `i += 2`.
+
+```js
+const ourArray = [];
+
+for (let i = 0; i < 10; i += 2) {
+  ourArray.push(i);
+}
+```
+
+سوف تحتوي `ourArray` على `[0, 2, 4, 6, 8]` الآن. غيّر `initialization` حتى نتمكن من عد بالأرقام الفردية.
+
+# --instructions--
+
+اضف الأرقام الفردية من 1 ألى 9 ألى `myArray` باستخدام حلقة `for`.
+
+# --hints--
+
+يجب أن تستخدم حلقة `for`.
+
+```js
+assert(/for\s*\([^)]+?\)/.test(code));
+```
+
+يجب أن يساوي `myArray` قيمة `[1, 3, 5, 7, 9]`.
+
+```js
+assert.deepEqual(myArray, [1, 3, 5, 7, 9]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+if(typeof myArray !== "undefined"){(function(){return myArray;})();}
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const myArray = [];
+
+// Only change code below this line
+
+```
+
+# --solutions--
+
+```js
+const myArray = [];
+for (let i = 1; i < 10; i += 2) {
+  myArray.push(i);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop.md
new file mode 100644
index 00000000000..26f1a4db648
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-through-an-array-with-a-for-loop.md
@@ -0,0 +1,81 @@
+---
+id: 5675e877dbd60be8ad28edc6
+title: التكرار عبر محتويات قائمة باستخدام حلقة for
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/caeR3HB'
+forumTopicId: 18216
+dashedName: iterate-through-an-array-with-a-for-loop
+---
+
+# --description--
+
+من المهام الشائعة في JavaScript، التكرار عبر محتويات القائمة. إحدى الطرق لفعل ذلك هي استخدام حلقة `for`. سينتج هذا الكود كل عنصر من قائمة `arr` إلى وحدة التحكم:
+
+```js
+const arr = [10, 9, 8, 7, 6];
+
+for (let i = 0; i < arr.length; i++) {
+   console.log(arr[i]);
+}
+```
+
+تذكر أن القوائم (arrays) لديها ترتيب (index) قائم على الصفر، مما يعني أن ترتيب الأخير في القائمة (array) هو `length - 1`. يكون شرطك لهذه الحلقة (loop) هو `i < arr.length`، الذي يوقف الحلقة (loop) عندما `i` يساوي `length`. في هذه الحالة يكون آخر تكرار `i === 4`, بمعنى عندما تصبح `i` مساوي `arr.length - 1` وتنتج `6` ألى وحدة التحكم. ثم `i` يزيد إلى `5`، وتنتهي الحلقة (loop) لأن `i < arr.length` يكون `false`.
+
+# --instructions--
+
+عرف وهيئ المتغير `total` ليساوي `0`. استخدم الحلقة (loop) باسم `for` لإضافة قيمة كل عنصر من `myArr` إلى `total`.
+
+# --hints--
+
+يجب تعريف وتهيئة `total` إلى 0.
+
+```js
+assert(code.match(/(var|let|const)\s*?total\s*=\s*0.*?;?/));
+```
+
+يجب أن يساوي `total` قيمة 20.
+
+```js
+assert(total === 20);
+```
+
+يجب عليك استخدام حلقة `for` للتكرار عبر `myArr`.
+
+```js
+assert(/for\s*\(/g.test(code) && /myArr\s*\[/g.test(code));
+```
+
+لا يجب عليك محاولة تعيين القيمة 20 إلى `total` قاصدًا.
+
+```js
+assert(!__helpers.removeWhiteSpace(code).match(/total[=+-]0*[1-9]+/gm));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(){if(typeof total !== 'undefined') { return "total = " + total; } else { return "total is undefined";}})()
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const myArr = [2, 3, 4, 5, 6];
+
+// Only change code below this line
+
+```
+
+# --solutions--
+
+```js
+const myArr = [2, 3, 4, 5, 6];
+let total = 0;
+
+for (let i = 0; i < myArr.length; i++) {
+  total += myArr[i];
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-do...while-loops.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-do...while-loops.md
new file mode 100644
index 00000000000..7ca0dacd2b3
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-do...while-loops.md
@@ -0,0 +1,105 @@
+---
+id: 5a2efd662fb457916e1fe604
+title: التكرار مع الحلَقات Do...While في JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cDqWGcp'
+forumTopicId: 301172
+dashedName: iterate-with-javascript-do---while-loops
+---
+
+# --description--
+
+النوع التالي من الحلَقات (loops) التي سوف تتعلمها يسمى حلقة `do...while`. إنه يسمى حلقة `do...while` لأنه سيقوم أولاً `do` بتطبيق الكود داخل الحلقة لمرة واحدة بغض النظر عن أي شيء، ثم يستمر في تشغيل الحلقة بينما `while` الشرط المحدد يقيم إلى `true`.
+
+```js
+const ourArray = [];
+let i = 0;
+
+do {
+  ourArray.push(i);
+  i++;
+} while (i < 5);
+```
+
+المثال أعلاه يتصرف بطريقة مشابهة للأنواع الأخرى من حلَقات، والحلقة الناتجة عنه ستبدو مثل `[0, 1, 2, 3, 4]`. ومع ذلك، فإن ما يجعل `do...while` يختلف عن الحلَقات الأخرى هو كيف يتصرف عندما يفشل الشرط في الفحص الأول. سوف ترى هذا في الواقع. إليك حلقة `while` عادية, سوف يشغل الكود الحلقة (loop) مادام أن `i < 5`:
+
+```js
+const ourArray = []; 
+let i = 5;
+
+while (i < 5) {
+  ourArray.push(i);
+  i++;
+}
+```
+
+في هذا المثال، نقوم بتهيئة قيمة `ourArray` إلى قائمة (array) فارغة وقيمة `i` إلى 5. عندما تنفيذ حلقة `while`, يتم تقييم الشرط إلى `false` لأن `i` لم يقل عن 5، لذلك نحن لا ننفذ الكود داخل الحلقة. والنتيجة هي أن `ourArray` سينتهي به الأمر إلى عدم إضافة قيم إليه، وسيظل يبدو مثل `[]` عندما يكون الكود في المثال أعلاه قد انتهي من التنفيذ. الآن، ألقي النَّظْرَة على حلقة `do...while`:
+
+```js
+const ourArray = []; 
+let i = 5;
+
+do {
+  ourArray.push(i);
+  i++;
+} while (i < 5);
+```
+
+في هذه الحالة، نقوم بتهيئة قيمة `i` إلى 5، تماما كما فعلنا مع حلقة `while`. عندما نصل إلى السطر التالي، لا يوجد شرط للتقييم، لذا نذهب إلى الكود داخل الأقواس {} وننفذه. سوف نضيف عنصرا واحدا إلى القائمة ثم نزيد `i` قبل أن نصل إلى التحقق من الشرط. عندما نقوم أخيرا بتقييم الشرط `i < 5` في السطر الأخير، نحن نرى أن `i` هو 6 الآن، و بالتالي أخفق في الفحص الشرطي، لذلك الخروج من الحلقة و ينتهي التنفيذ. في نهاية المثال الوارد أعلاه، قيمة `ourArray` هي `[5]`. في الأساس `do...while` تضمن أن الكود داخل الحلقة سوف يعمل مرة واحدة في الأقل. حاول جعل `do...while` تعمل عن طريق أضافه القيم إلى القائمة.
+
+# --instructions--
+
+غيّر `while` في الكود إلى `do...while` حتى تقوم الحلقة بإضافة فقط الرَّقْم `10` إلى `myArray`، و `i` سيكون مساويا ألى `11` عند الانتهاء من تشغيل الكود الخاص بك.
+
+# --hints--
+
+يجب أن تستخدم حلقة `do...while` لهذا التمرين.
+
+```js
+assert(code.match(/do/g));
+```
+
+يجب أن يساوي `myArray` قيمة `[10]`.
+
+```js
+assert.deepEqual(myArray, [10]);
+```
+
+يجب أن يساوي `i` قيمة `11`
+
+```js
+assert.equal(i, 11);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+if(typeof myArray !== "undefined"){(function(){return myArray;})();}
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const myArray = [];
+let i = 10;
+
+// Only change code below this line
+while (i < 5) {
+  myArray.push(i);
+  i++;
+}
+```
+
+# --solutions--
+
+```js
+const myArray = [];
+let i = 10;
+do {
+  myArray.push(i);
+  i++;
+} while (i < 5)
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md
new file mode 100644
index 00000000000..bce01c3e9ef
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-for-loops.md
@@ -0,0 +1,81 @@
+---
+id: cf1111c1c11feddfaeb5bdef
+title: التكرار مع الحلَقات For في JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c9yNVCe'
+forumTopicId: 18219
+dashedName: iterate-with-javascript-for-loops
+---
+
+# --description--
+
+يمكنك تشغيل نفس الكود عدة مرات باستخدام حلقة.
+
+النوع الأكثر شيوعاً من حلقة JavaScript يسمى حلقة `for` لأنه يعمل لعدد محدد من المرات.
+
+تعريف حلَقات For مع ثلاث عبارات اختيارية تفصل بينها الفاصلات المنقوطة (semicolons):
+
+`for (a; b; c)`، حيث ان `a` هي عبارة التهيئة، `b` هي عبارة الشرط، و `c` هي العبارة النهائية.
+
+يتم تنفيذ عبارة التهيئة مرة واحدة فقط قبل بَدْء الحلقة. يستخدم عادة لتحديد وإعداد متغير الحلقة الخاص بك.
+
+يتم تقييم عبارة الشرط في بداية كل حلقة وسوف يستمر مادام أنه يقيّم إلى `true`. عندما يكون الشرط `false` في بداية الحلقة سوف تتوقف الحلقة عن التنفيذ. هذا يعني أن إذا بدأ الشرط كزائف (false)، لن تنفذ الحلقة (loop) الخاصة بك أبدا.
+
+يتم تنفيذ العبارة النهائية في نهاية كل حلقة (loop)، قبل التحقق من الشرط التالي وعادة ما يتم استخدامه لزيادة أو إنقاص عداد الحلقة.
+
+في المثال التالي نقوم بالتهيئة بواسطة `i = 0` ونكرر مادام الشرط `i < 5` هو حقيقي (true). زد `i` بمقدار `1` في كل حلقة (loop) مع `i++` كعبارة نهائية.
+
+```js
+const ourArray = [];
+
+for (let i = 0; i < 5; i++) {
+  ourArray.push(i);
+}
+```
+
+سيحتوي `ourArray` على قيمة `[0, 1, 2, 3, 4]`.
+
+# --instructions--
+
+استخدم حلقة `for` لإضافة القيم من 1 إلى 5 إلى `myArray`.
+
+# --hints--
+
+يجب أن تستخدم حلقة `for`.
+
+```js
+assert(/for\s*\([^)]+?\)/.test(code));
+```
+
+يجب أن يساوي `myArray` قيمة `[1, 2, 3, 4, 5]`.
+
+```js
+assert.deepEqual(myArray, [1, 2, 3, 4, 5]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+if (typeof myArray !== "undefined"){(function(){return myArray;})();}
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const myArray = [];
+
+// Only change code below this line
+
+```
+
+# --solutions--
+
+```js
+const myArray = [];
+for (let i = 1; i < 6; i++) {
+  myArray.push(i);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops.md
new file mode 100644
index 00000000000..61bedb3e28f
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/iterate-with-javascript-while-loops.md
@@ -0,0 +1,75 @@
+---
+id: cf1111c1c11feddfaeb1bdef
+title: التكرار حلَقات While في JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c8QbnCM'
+forumTopicId: 18220
+dashedName: iterate-with-javascript-while-loops
+---
+
+# --description--
+
+يمكنك تشغيل نفس الكود عدة مرات باستخدام حلقة.
+
+النوع الأول من الحلقة التي سنتعلمها تسمى حلقة `while` لأنها تعمل بينما يكون الشرط المحدد صحيحا ويتوقف عندما يصبح الشرط غير صحيح.
+
+```js
+const ourArray = [];
+let i = 0;
+
+while (i < 5) {
+  ourArray.push(i);
+  i++;
+}
+```
+
+في مثال الكود أعلاه، `while` سوف تنفذ 5 مرات و تضيف الأرقام من 0 إلى 4 إلى `ourArray`.
+
+دعونا نحاول جعل حلقة while تعمل عن طريق أضافة القيم إلى قائمة.
+
+# --instructions--
+
+أضف الأرقام 5 إلى 0 (شاملة) بترتيب تنازلي إلى `myArray` باستخدام `while`.
+
+# --hints--
+
+يجب أن تستخدم حلقة `while`.
+
+```js
+assert(code.match(/while/g));
+```
+
+يجب أن يساوي `myArray` قيمة `[5, 4, 3, 2, 1, 0]`.
+
+```js
+assert.deepEqual(myArray, [5, 4, 3, 2, 1, 0]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+if(typeof myArray !== "undefined"){(function(){return myArray;})();}
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const myArray = [];
+
+// Only change code below this line
+
+```
+
+# --solutions--
+
+```js
+const myArray = [];
+let i = 5;
+while (i >= 0) {
+  myArray.push(i);
+  i--;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.md
new file mode 100644
index 00000000000..bf3b3880efd
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/local-scope-and-functions.md
@@ -0,0 +1,86 @@
+---
+id: 56533eb9ac21ba0edf2244bf
+title: النطاق المحلي والوظائف (Local Scope and Functions)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cd62NhM'
+forumTopicId: 18227
+dashedName: local-scope-and-functions
+---
+
+# --description--
+
+المتغيرات التي يتم تعريفها داخل وظيفة، وكذلك الحجج الوظيفة لديها نطاق و يكون <dfn>محلي</dfn>. وهذا يعني أنها لا تبد مرئية إلا في إطار الوظيفة.
+
+هذه وظيفة `myTest` مع متغير محلي يسمى `loc`.
+
+```js
+function myTest() {
+  const loc = "foo";
+  console.log(loc);
+}
+
+myTest();
+console.log(loc);
+```
+
+استدعاء الوظيفة `myTest()` ستعرض المقطع `foo` في وحدة التحكم. سيؤدي سطر `console.log(loc)` (خارج وظيفة `myTest`) إلى ظهور خطأ، حيث إن `loc` لم يتم تعريفها خارج الوظيفة.
+
+# --instructions--
+
+يحتوي المحرر على اثنين `console.log` لمساعدتك على رؤية ما يحدث. تحقق من وحدة التحكم خلال كتابة الكود لترى كيف يتغير. عرف متغير محلي اسمه `myVar` داخل `myLocalScope` وشغل الاختبارات.
+
+**ملاحظة:** وحدة التحكم ستظل تعرض `ReferenceError: myVar is not defined`، ولكن هذا لن يتسبب في فشل الاختبارات.
+
+# --hints--
+
+لا ينبغي أن يحتوي الكود على متغير عام يدعي `myVar`.
+
+```js
+function declared() {
+  myVar;
+}
+
+assert.throws(declared, ReferenceError);
+```
+
+يجب عليك إضافة متغير محلي يدعي `myVar`.
+
+```js
+assert(
+  /functionmyLocalScope\(\)\{.*(var|let|const)myVar[\s\S]*}/.test(
+    __helpers.removeWhiteSpace(code)
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function myLocalScope() {
+  // Only change code below this line
+
+  console.log('inside myLocalScope', myVar);
+}
+myLocalScope();
+
+// Run and check the console
+// myVar is not defined outside of myLocalScope
+console.log('outside myLocalScope', myVar);
+```
+
+# --solutions--
+
+```js
+function myLocalScope() {
+  // Only change code below this line
+  let myVar;
+  console.log('inside myLocalScope', myVar);
+}
+myLocalScope();
+
+// Run and check the console
+// myVar is not defined outside of myLocalScope
+console.log('outside myLocalScope', myVar);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements.md
new file mode 100644
index 00000000000..060fbe9594b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/logical-order-in-if-else-statements.md
@@ -0,0 +1,109 @@
+---
+id: 5690307fddb111c6084545d7
+title: الترتيب المنطقي في تعبيرات If Else
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cwNvMUV'
+forumTopicId: 18228
+dashedName: logical-order-in-if-else-statements
+---
+
+# --description--
+
+الترتيب مهم في عبارات `if` و `else if`.
+
+يتم تنفيذ الوظيفة من الأعلى إلى الأسفل، لذا سترغب في توخي الحذر بشأن العبارة التي تأتي أولاً.
+
+ولنأخذ هاتين الوظيفتين كمثال.
+
+إليك الأول:
+
+```js
+function foo(x) {
+  if (x < 1) {
+    return "Less than one";
+  } else if (x < 2) {
+    return "Less than two";
+  } else {
+    return "Greater than or equal to two";
+  }
+}
+```
+
+أما الثاني فيغير ترتيب العبارات فقط:
+
+```js
+function bar(x) {
+  if (x < 2) {
+    return "Less than two";
+  } else if (x < 1) {
+    return "Less than one";
+  } else {
+    return "Greater than or equal to two";
+  }
+}
+```
+
+بينما تبدو هاتان الوظيفتان متطابقتان تقريباً، إذا مررنا رَقْم إلى كليهما نحصل على نواتج مختلفة.
+
+```js
+foo(0)
+bar(0)
+```
+
+سوف ينتج `foo(0)` المقطع `Less than one`، وسوف ينتج `bar(0)` المقطع `Less than two`.
+
+# --instructions--
+
+غيّر ترتيب المنطق في الوظيفة بحيث تنتج العبارات الصحيحة في جميع الحالات.
+
+# --hints--
+
+يجب أن تنتج `orderMyLogic(4)` المقطع `Less than 5`
+
+```js
+assert(orderMyLogic(4) === 'Less than 5');
+```
+
+يجب أن تنتج `orderMyLogic(6)` المقطع `Less than 10`
+
+```js
+assert(orderMyLogic(6) === 'Less than 10');
+```
+
+يجب أن تنتج `orderMyLogic(11)` المقطع `Greater than or equal to 10`
+
+```js
+assert(orderMyLogic(11) === 'Greater than or equal to 10');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function orderMyLogic(val) {
+  if (val < 10) {
+    return "Less than 10";
+  } else if (val < 5) {
+    return "Less than 5";
+  } else {
+    return "Greater than or equal to 10";
+  }
+}
+
+orderMyLogic(7);
+```
+
+# --solutions--
+
+```js
+function orderMyLogic(val) {
+  if(val < 5) {
+    return "Less than 5";
+  } else if (val < 10) {
+    return "Less than 10";
+  } else {
+    return "Greater than or equal to 10";
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop.md
new file mode 100644
index 00000000000..96021be6e80
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-pop.md
@@ -0,0 +1,90 @@
+---
+id: 56bbb991ad1ed5201cd392cc
+title: تغيير القوائم (Arrays) باستخدام pop()
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cRbVZAB'
+forumTopicId: 18236
+dashedName: manipulate-arrays-with-pop
+---
+
+# --description--
+
+طريقة أخرى لتغيير البيانات في قائمة (Array) هي باستخدام الوظيفة `.pop()`.
+
+تستخدم الوظيفة `.pop()` لإزالة قيمة من نهاية القائمة. يمكننا تخزين هذه القيمة المستخرجة عن طريق تعيينها إلى متغير. بعبارة أخرى، تزيل الوظيفة `.pop()` العنصر الأخير من قائمة وتنتج ذلك العنصر.
+
+أي نوع من البيانات يمكن أن تستخرج من القائمة - الأرقام، المقاطع، حتى القوائم المتداخلة.
+
+```js
+const threeArr = [1, 4, 6];
+const oneDown = threeArr.pop();
+console.log(oneDown);
+console.log(threeArr);
+```
+
+سيعرض أول `console.log` قيمة `6`، وسيعرض الثاني قيمة `[1, 4]`.
+
+# --instructions--
+
+استخدم وظيفة `.pop()` لإزالة العنصر الأخير من `myArray` وعيّن القيمة المستخرجة إلى متغير جديد `removedFromMyArray`.
+
+# --hints--
+
+يجب أن يحتوي `myArray` على `[["John", 23]]` فقط.
+
+```js
+assert(
+  (function (d) {
+    if (d[0][0] == 'John' && d[0][1] === 23 && d[1] == undefined) {
+      return true;
+    } else {
+      return false;
+    }
+  })(myArray)
+);
+```
+
+يجب عليك استخدام `pop()` على `myArray`.
+
+```js
+assert(/removedFromMyArray\s*=\s*myArray\s*.\s*pop\s*(\s*)/.test(code));
+```
+
+يجب أن يحتوي `removedFromMyArray` على `["cat", 2]` فقط.
+
+```js
+assert(
+  (function (d) {
+    if (d[0] == 'cat' && d[1] === 2 && d[2] == undefined) {
+      return true;
+    } else {
+      return false;
+    }
+  })(removedFromMyArray)
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+if (typeof removedFromMyArray !== 'undefined') (function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removedFromMyArray = ' + JSON.stringify(z);})(myArray, removedFromMyArray);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const myArray = [["John", 23], ["cat", 2]];
+
+// Only change code below this line
+
+```
+
+# --solutions--
+
+```js
+const myArray = [["John", 23], ["cat", 2]];
+const removedFromMyArray = myArray.pop();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push.md
new file mode 100644
index 00000000000..e23d53c49e7
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-push.md
@@ -0,0 +1,78 @@
+---
+id: 56bbb991ad1ed5201cd392cb
+title: تغيير القوائم (Arrays) باستخدام push()
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cnqmVtJ'
+forumTopicId: 18237
+dashedName: manipulate-arrays-with-push
+---
+
+# --description--
+
+طريقة سهلة لإضافة البيانات إلى نهاية القائمة هي عن طريق وظيفة `push()`.
+
+يأخذ `.push()` واحد أو أكثر من <dfn>الحجج</dfn> و "يدفعها" إلى نهاية القائمة.
+
+على سبيل المثال:
+
+```js
+const arr1 = [1, 2, 3];
+arr1.push(4);
+
+const arr2 = ["Stimpson", "J", "cat"];
+arr2.push(["happy", "joy"]);
+```
+
+لدي `arr1` قيمة `[1, 2, 3, 4]` الآن ولدي `arr2` قيمة `["Stimpson", "J", "cat", ["happy", "joy"]]`.
+
+# --instructions--
+
+اضف `["dog", 3]` إلي نهاية المتغير `myArray`.
+
+# --hints--
+
+يجب أن يساوي `myArray` قيمة `[["John", 23], ["cat", 2], ["dog", 3]]` الآن.
+
+```js
+assert(
+  (function (d) {
+    if (
+      d[2] != undefined &&
+      d[0][0] == 'John' &&
+      d[0][1] === 23 &&
+      d[2][0] == 'dog' &&
+      d[2][1] === 3 &&
+      d[2].length == 2
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  })(myArray)
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(z){return 'myArray = ' + JSON.stringify(z);})(myArray);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const myArray = [["John", 23], ["cat", 2]];
+
+// Only change code below this line
+
+```
+
+# --solutions--
+
+```js
+const myArray = [["John", 23], ["cat", 2]];
+myArray.push(["dog",3]);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-shift.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-shift.md
new file mode 100644
index 00000000000..60cf7a9381a
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-shift.md
@@ -0,0 +1,88 @@
+---
+id: 56bbb991ad1ed5201cd392cd
+title: تغيير القوائم (Arrays) باستخدام shift()
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cRbVETW'
+forumTopicId: 18238
+dashedName: manipulate-arrays-with-shift
+---
+
+# --description--
+
+يزيل `pop()` العنصر الأخير من القائمة دائما. ماذا لو كنت تريد إزالة الأول؟
+
+هنا يأتي دور `.shift()`. يعمل تماما مثل `.pop()`، ولكنه يزيل العنصر الأول بدلا من العنصر الأخير.
+
+مثال:
+
+```js
+const ourArray = ["Stimpson", "J", ["cat"]];
+const removedFromOurArray = ourArray.shift();
+```
+
+سيحتوي `removedFromOurArray` قيمة المقطع `Stimpson`، وسيحتوي `ourArray` على `["J", ["cat"]]`.
+
+# --instructions--
+
+استخدم الوظيفة `.shift()` لإزالة العنصر الأول من `myArray` وعيّن القيمة التي "تم نقلها" إلى متغير جديد `removedFromMyArray`.
+
+# --hints--
+
+يجب أن يساوي `myArray` قيمة `[["dog", 3]]` الآن.
+
+```js
+assert(
+  (function (d) {
+    if (d[0][0] == 'dog' && d[0][1] === 3 && d[1] == undefined) {
+      return true;
+    } else {
+      return false;
+    }
+  })(myArray)
+);
+```
+
+يجب أن يحتوي `removedFromMyArray` على `["John", 23]`.
+
+```js
+assert(
+  (function (d) {
+    if (
+      d[0] == 'John' &&
+      d[1] === 23 &&
+      typeof removedFromMyArray === 'object'
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  })(removedFromMyArray)
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+if (typeof removedFromMyArray !== 'undefined') (function(y, z){return 'myArray = ' + JSON.stringify(y) + ' & removedFromMyArray = ' + JSON.stringify(z);})(myArray, removedFromMyArray);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const myArray = [["John", 23], ["dog", 3]];
+
+// Only change code below this line
+
+```
+
+# --solutions--
+
+```js
+const myArray = [["John", 23], ["dog", 3]];
+
+// Only change code below this line
+const removedFromMyArray = myArray.shift();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift.md
new file mode 100644
index 00000000000..2a4c9aaa4fb
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulate-arrays-with-unshift.md
@@ -0,0 +1,79 @@
+---
+id: 56bbb991ad1ed5201cd392ce
+title: تغيير القوائم (Arrays) باستخدام unshift()
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/ckNDESv'
+forumTopicId: 18239
+dashedName: manipulate-arrays-with-unshift
+---
+
+# --description--
+
+ليس من ممكن استخدام `shift` في عناصر من بداية القائمة فقط، ولكن يمكنك استخدام `unshift` في عناصر في بداية القائمة أيضًا، أي يمكن أن تضيف عناصر ألى بداية القائمة.
+
+يعمل `.unshift()` تماما مثل `.push()`، ولكن بدلا من إضافة العنصر في نهاية القائمة، يضيف `unshift()` العنصر إلى بداية القائمة.
+
+مثال:
+
+```js
+const ourArray = ["Stimpson", "J", "cat"];
+ourArray.shift();
+ourArray.unshift("Happy");
+```
+
+بعد `shift` سيحتوي `ourArray` على قيمة `["J", "cat"]`. بعد `unshift` سيحتوي `ourArray` على قيمة `["Happy", "J", "cat"]`.
+
+# --instructions--
+
+أضف `["Paul", 35]` إلى بداية المتغير `myArray` باستخدام `unshift()`.
+
+# --hints--
+
+يجب أن يساوي `myArray` قيمة `[["Paul", 35], ["dog", 3]]` الآن.
+
+```js
+assert(
+  (function (d) {
+    if (
+      typeof d[0] === 'object' &&
+      d[0][0] == 'Paul' &&
+      d[0][1] === 35 &&
+      d[1][0] != undefined &&
+      d[1][0] == 'dog' &&
+      d[1][1] != undefined &&
+      d[1][1] == 3
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  })(myArray)
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(y, z){return 'myArray = ' + JSON.stringify(y);})(myArray);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const myArray = [["John", 23], ["dog", 3]];
+myArray.shift();
+
+// Only change code below this line
+
+```
+
+# --solutions--
+
+```js
+const myArray = [["John", 23], ["dog", 3]];
+myArray.shift();
+myArray.unshift(["Paul", 35]);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md
new file mode 100644
index 00000000000..e6ce9333588
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/manipulating-complex-objects.md
@@ -0,0 +1,165 @@
+---
+id: 56533eb9ac21ba0edf2244cb
+title: معالجة الكائنات المعقدة (Manipulating Complex Objects)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c9yNMfR'
+forumTopicId: 18208
+dashedName: manipulating-complex-objects
+---
+
+# --description--
+
+في بعض الأحيان قد ترغب في تخزين البيانات في <dfn>هيكل بيانات</dfn> مرن. يكون كائن JavaScript إحدى الطرق للتعامل مع البيانات المرنة. أنها تسمح بتركيبات عشوائية من <dfn>المقاطع</dfn> و <dfn>الأرقام</dfn> و <dfn>الحالات المنطقية</dfn> و <dfn>القوائم</dfn> و <dfn>الوظائف</dfn> و <dfn>الكائنات</dfn>.
+
+إليك مثال لهيكل بيانات معقد:
+
+```js
+const ourMusic = [
+  {
+    "artist": "Daft Punk",
+    "title": "Homework",
+    "release_year": 1997,
+    "formats": [ 
+      "CD", 
+      "Cassette", 
+      "LP"
+    ],
+    "gold": true
+  }
+];
+```
+
+هذه قائمة تحتوي على كائن واحد داخلها. يحتوي الكائن على أجزاء مختلفة من البيانات الوصفية إي <dfn>بيانات وصفية</dfn> حول مجموعة الصور. وهو إلى ذلك, يحتوي على قائمة داخلية تدعي `formats`. إذا كنت ترغب في إضافة المزيد من سجلات الصور، يمكنك فعل ذلك عن طريق إضافة السجلات إلى القائمة العليا. تخزن كائنات البيانات في الخواص التي لها قيمة وهُوِيَّة (key-value). وفي المثال الوارد أعلاه، `"artist": "Daft Punk"` هي خاصية لها هُوِيَّة تدعى `artist` وقيمة `Daft Punk`.
+
+**ملاحظة:** ستحتاج إلى وضع فاصلة بعد كل كائن في القائمة، إلا إذا كان كائن في القائمة أخير.
+
+# --instructions--
+
+أضف السجلات الصور جديد إلى قائمة `myMusic`. أضف مقاطع `artist`, و `title`, و رَقْم `release_year`، و قائمة من المقاطع تدعي `formats`.
+
+# --hints--
+
+يجب أن تكون `myMusic` قائمة
+
+```js
+assert(Array.isArray(myMusic));
+```
+
+يجب أن يحتوي `myMusic` على عنصرين في الأقل
+
+```js
+assert(myMusic.length > 1);
+```
+
+يجب أن تكون العناصر في `myMusic` كائنات
+
+```js
+myMusic.forEach(object => {assert.typeOf(object, 'object')})
+```
+
+الكائن الخاص بك في `myMusic` يجب أن يحتوي على 4 خصائص في الأقل
+
+```js
+myMusic.forEach(object => {assert(Object.keys(object).length > 3); });
+```
+
+يجب أن يحتوي الكائن الخاص بك في `myMusic` على الخاصية `artist` التي من نوع مقطع
+
+```js
+myMusic.forEach(object => {
+  assert.containsAllKeys(object, ['artist']);
+  assert.typeOf(object.artist, 'string')
+})
+```
+
+يجب أن يحتوي الكائن الخاص بك في `myMusic` على الخاصية `title` التي من نوع مقطع
+
+```js
+myMusic.forEach(object => {
+  assert.containsAllKeys(object, ['title']);
+  assert.typeOf(object.title, 'string')
+})
+```
+
+يجب أن يحتوي الكائن الخاص بك في `myMusic` على الخاصية `release_year` التي من نوع رَقْم
+
+```js
+myMusic.forEach(object => {
+  assert.containsAllKeys(object, ['release_year']);
+  assert.typeOf(object.release_year, 'number')
+})
+```
+
+يجب أن يحتوي الكائن الخاص بك في `myMusic` على الخاصية `formats` التي من نوع قائمة
+
+```js
+myMusic.forEach(object => {
+  assert.containsAllKeys(object, ['formats']);
+  assert.typeOf(object.formats, 'array')
+})
+```
+
+يجب أن تكون `formats` قائمة من مقاطع ذات عنصرين في الأقل
+
+```js
+myMusic.forEach(object => {
+  object.formats.forEach(format => {
+    assert.typeOf(format, 'string')
+  });
+  assert.isAtLeast(object.formats.length, 2)
+})
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(x){ if (Array.isArray(x)) { return JSON.stringify(x); } return "myMusic is not an array"})(myMusic);
+```
+
+## --seed-contents--
+
+```js
+const myMusic = [
+  {
+    "artist": "Billy Joel",
+    "title": "Piano Man",
+    "release_year": 1973,
+    "formats": [
+      "CD",
+      "8T",
+      "LP"
+    ],
+    "gold": true
+  }
+];
+```
+
+# --solutions--
+
+```js
+const myMusic = [
+  {
+    "artist": "Billy Joel",
+    "title": "Piano Man",
+    "release_year": 1973,
+    "formats": [
+      "CS",
+      "8T",
+      "LP" ],
+    "gold": true
+  },
+  {
+    "artist": "ABBA",
+    "title": "Ring Ring",
+    "release_year": 1973,
+    "formats": [
+      "CS",
+      "8T",
+      "LP",
+    "CD",
+  ]
+  }
+];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.md
new file mode 100644
index 00000000000..dfa6cf54e9b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/modify-array-data-with-indexes.md
@@ -0,0 +1,87 @@
+---
+id: cf1111c1c11feddfaeb8bdef
+title: تعديل بيانات القوائم بالترتيب (Modify Array Data With Indexes)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/czQM4A8'
+forumTopicId: 18241
+dashedName: modify-array-data-with-indexes
+---
+
+# --description--
+
+على عكس المقاطع، عناصر القائمة هي <dfn>قابلة للتغيير</dfn> ويمكن تغييرها بحرية، حتى لو تم تعريف القائمة بواسطة `const`.
+
+**مثال**
+
+```js
+const ourArray = [50, 40, 30];
+ourArray[0] = 15;
+```
+
+يحتوي `ourArray` على قيمة `[15, 40, 30]`.
+
+**ملاحظة:** لا ينبغي أن تكون هناك أي مسافات بين اسم القائمة والأقواس المربعة، مثل `array [0]`. مع أنّ JavaScript قادر على معالجة هذا الأمر بشكل صحيح، إلا أن هذا قد يحير المبرمجين الآخرين الذين يقرؤون الكود الخاص بك.
+
+# --instructions--
+
+عدل البيانات المخزنة في الترتيب `0` من `myArray` إلى قيمة `45`.
+
+# --hints--
+
+يجب أن يساوي `myArray` قيمة `[45, 64, 99]` الآن.
+
+```js
+assert(
+  (function () {
+    if (
+      typeof myArray != 'undefined' &&
+      myArray[0] == 45 &&
+      myArray[1] == 64 &&
+      myArray[2] == 99
+    ) {
+      return true;
+    } else {
+      return false;
+    }
+  })()
+);
+```
+
+يجب عليك استخدام الترتيب الصحيح لتعديل القيمة في `myArray`.
+
+```js
+assert(
+  (function () {
+    if (code.match(/myArray\[0\]\s*=\s*/g)) {
+      return true;
+    } else {
+      return false;
+    }
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+if(typeof myArray !== "undefined"){(function(){return myArray;})();}
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const myArray = [18, 64, 99];
+
+// Only change code below this line
+
+```
+
+# --solutions--
+
+```js
+const myArray = [18, 64, 99];
+myArray[0] = 45;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md
new file mode 100644
index 00000000000..2d4e56080b1
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/multiple-identical-options-in-switch-statements.md
@@ -0,0 +1,149 @@
+---
+id: 56533eb9ac21ba0edf2244df
+title: خيرات عدّة متشابهة في تعبيرات Switch
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cdBKWCV'
+forumTopicId: 18242
+dashedName: multiple-identical-options-in-switch-statements
+---
+
+# --description--
+
+إذا تم حذف عبارات `break` من عبارات `switch` لكل `case`، سيتم تنفيذ عبارات `case` التالية حتى تقابلهم عبارة `break`. إذا كان لديك مدخلات متعددة بنفس المخرج، يمكنك تمثيلها في عبارة `switch`, أليك مثال:
+
+```js
+let result = "";
+switch (val) {
+  case 1:
+  case 2:
+  case 3:
+    result = "1, 2, or 3";
+    break;
+  case 4:
+    result = "4 alone";
+}
+```
+
+ستنتج الحالات 1 و 2 و 3 جميعها نفس النتيجة.
+
+# --instructions--
+
+اكتب عبارة switch لتعيين `answer` للنطاقات التالية   
+`1-3` - `Low`  
+`4-6` - `Mid`  
+`7-9` - `High`
+
+**ملاحظة:** ستحتاج إلى `case` لكل رَقْم في النطاق.
+
+# --hints--
+
+يجب أن ينتج `sequentialSizes(1)` مقطع `Low`
+
+```js
+assert(sequentialSizes(1) === 'Low');
+```
+
+يجب أن ينتج `sequentialSizes(2)` مقطع `Low`
+
+```js
+assert(sequentialSizes(2) === 'Low');
+```
+
+يجب أن ينتج `sequentialSizes(3)` مقطع `Low`
+
+```js
+assert(sequentialSizes(3) === 'Low');
+```
+
+يجب أن ينتج `sequentialSizes(4)` مقطع `Mid`
+
+```js
+assert(sequentialSizes(4) === 'Mid');
+```
+
+يجب أن ينتج `sequentialSizes(5)` مقطع `Mid`
+
+```js
+assert(sequentialSizes(5) === 'Mid');
+```
+
+يجب أن ينتج `sequentialSizes(6)` مقطع `Mid`
+
+```js
+assert(sequentialSizes(6) === 'Mid');
+```
+
+يجب أن ينتج `sequentialSizes(7)` مقطع `High`
+
+```js
+assert(sequentialSizes(7) === 'High');
+```
+
+يجب أن ينتج `sequentialSizes(8)` مقطع `High`
+
+```js
+assert(sequentialSizes(8) === 'High');
+```
+
+يجب أن ينتج `sequentialSizes(9)` مقطع `High`
+
+```js
+assert(sequentialSizes(9) === 'High');
+```
+
+يجب ألا تستخدم أي عبارات `if` أو `else`
+
+```js
+assert(!/else/g.test(code) || !/if/g.test(code));
+```
+
+يجب أن يكون لديك تسع `case`
+
+```js
+assert(code.match(/case/g).length === 9);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sequentialSizes(val) {
+  let answer = "";
+  // Only change code below this line
+
+
+
+  // Only change code above this line
+  return answer;
+}
+
+sequentialSizes(1);
+```
+
+# --solutions--
+
+```js
+function sequentialSizes(val) {
+  let answer = "";
+
+  switch (val) {
+    case 1:
+    case 2:
+    case 3:
+      answer = "Low";
+      break;
+    case 4:
+    case 5:
+    case 6:
+      answer = "Mid";
+      break;
+    case 7:
+    case 8:
+    case 9:
+      answer = "High";
+  }
+
+  return answer;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-decimals-with-javascript.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-decimals-with-javascript.md
new file mode 100644
index 00000000000..a79323144c7
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-decimals-with-javascript.md
@@ -0,0 +1,52 @@
+---
+id: bd7993c9c69feddfaeb7bdef
+title: اضرب رقمين عشريين بواسطة JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/ce2GeHq'
+forumTopicId: 301173
+dashedName: multiply-two-decimals-with-javascript
+---
+
+# --description--
+
+في JavaScript، يمكنك أيضًا إجراء حسابات بأرقام عشرية، تماما مثل الأرقام صحيحة.
+
+لنضرب عددين عشريين معًا لنحصل على حاصل ضربهما.
+
+# --instructions--
+
+غيّر `0.0` بحيث يساوي الناتج `5.0`.
+
+# --hints--
+
+يجب أن يساوي المتغير `product` قيمة `5.0`.
+
+```js
+assert(product === 5.0);
+```
+
+يجب عليك استخدام المشغل `*`
+
+```js
+assert(/\*/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(y){return 'product = '+y;})(product);
+```
+
+## --seed-contents--
+
+```js
+const product = 2.0 * 0.0;
+```
+
+# --solutions--
+
+```js
+const product = 2.0 * 2.5;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-numbers-with-javascript.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-numbers-with-javascript.md
new file mode 100644
index 00000000000..01b5aea176e
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/multiply-two-numbers-with-javascript.md
@@ -0,0 +1,60 @@
+---
+id: cf1231c1c11feddfaeb5bdef
+title: ضرب رقمين باستخدام JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cP3y3Aq'
+forumTopicId: 18243
+dashedName: multiply-two-numbers-with-javascript
+---
+
+# --description--
+
+يمكننا أيضًا ضرب رَقْم في آخر.
+
+يستخدم JavaScript رمز `*` لضرب رقمين.
+
+**مثال**
+
+```js
+const myVar = 13 * 13;
+```
+
+لدي `myVar` القيمة `169` الآن.
+
+# --instructions--
+
+غيّر `0` بحيث يساوي الناتج `80`.
+
+# --hints--
+
+يجب أن يساوي المتغير `product` قيمة 80.
+
+```js
+assert(product === 80);
+```
+
+يجب عليك استخدام المشغل `*`.
+
+```js
+assert(/\*/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(z){return 'product = '+z;})(product);
+```
+
+## --seed-contents--
+
+```js
+const product = 8 * 0;
+```
+
+# --solutions--
+
+```js
+const product = 8 * 10;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/nest-one-array-within-another-array.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/nest-one-array-within-another-array.md
new file mode 100644
index 00000000000..f023c235b75
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/nest-one-array-within-another-array.md
@@ -0,0 +1,51 @@
+---
+id: cf1111c1c11feddfaeb7bdef
+title: أدخال قائمة في قائمة اخري
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/crZQZf8'
+forumTopicId: 18247
+dashedName: nest-one-array-within-another-array
+---
+
+# --description--
+
+يمكنك أيضًا ادخال قوائم داخل القوائم الأخرى، مثل أدناه:
+
+```js
+const teams = [["Bulls", 23], ["White Sox", 45]];
+```
+
+هذا يسمى أيضا <dfn>قوائم متعددة الأبعاد</dfn>.
+
+# --instructions--
+
+أنشئ قوائم متداخلة تسمى `myArray`.
+
+# --hints--
+
+يجب أن تحتوي `myArray` على الأقل علي قائمة واحدة متداخلة داخل قائمة أخرى.
+
+```js
+assert(Array.isArray(myArray) && myArray.some(Array.isArray));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+if(typeof myArray !== "undefined"){(function(){return myArray;})();}
+```
+
+## --seed-contents--
+
+```js
+// Only change code below this line
+const myArray = [];
+```
+
+# --solutions--
+
+```js
+const myArray = [[1, 2, 3]];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/nesting-for-loops.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/nesting-for-loops.md
new file mode 100644
index 00000000000..6df73fd1e2b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/nesting-for-loops.md
@@ -0,0 +1,92 @@
+---
+id: 56533eb9ac21ba0edf2244e1
+title: الحلَقات For المتداخلة
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cRn6GHM'
+forumTopicId: 18248
+dashedName: nesting-for-loops
+---
+
+# --description--
+
+إذا كان لديك قائمة متعددة الأبعاد، يمكنك استخدام نفس المنطق مثل النقطة السابقة للمرور علي من كل من القائمة وأي قوائم فرعية. إليك مثال:
+
+```js
+const arr = [
+  [1, 2], [3, 4], [5, 6]
+];
+
+for (let i = 0; i < arr.length; i++) {
+  for (let j = 0; j < arr[i].length; j++) {
+    console.log(arr[i][j]);
+  }
+}
+```
+
+هذا يخرج كل عنصر فرعي في `arr` واحد تلو الأخر. لاحظ أنه فيما يتعلق بالحلقة الداخلية، نحن نتحقق من `.length` الخاص إلى `arr[i]`، لما كان `arr[i]` هو نفسه قائمة.
+
+# --instructions--
+
+عدل الوظيفة `multiplyAll` بحيث تظهر ناتج ضرب جميع الأرقام في القائمات الفرعية من `arr`.
+
+# --hints--
+
+يجب أن ينتج `multiplyAll([[1], [2], [3]])` قيمة `6`
+
+```js
+assert(multiplyAll([[1], [2], [3]]) === 6);
+```
+
+يجب أن ينتج `multiplyAll([[1, 2], [3, 4], [5, 6, 7]])` قيمة `5040`
+
+```js
+assert(
+  multiplyAll([
+    [1, 2],
+    [3, 4],
+    [5, 6, 7]
+  ]) === 5040
+);
+```
+
+يجب أن ينتج `multiplyAll([[5, 1], [0.2, 4, 0.5], [3, 9]])` قيمة `54`
+
+```js
+assert(
+  multiplyAll([
+    [5, 1],
+    [0.2, 4, 0.5],
+    [3, 9]
+  ]) === 54
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function multiplyAll(arr) {
+  let product = 1;
+  // Only change code below this line
+
+  // Only change code above this line
+  return product;
+}
+
+multiplyAll([[1, 2], [3, 4], [5, 6, 7]]);
+```
+
+# --solutions--
+
+```js
+function multiplyAll(arr) {
+  let product = 1;
+  for (let i = 0; i < arr.length; i++) {
+    for (let j = 0; j < arr[i].length; j++) {
+      product *= arr[i][j];
+    }
+  }
+  return product;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.md
new file mode 100644
index 00000000000..a22959f3fae
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/passing-values-to-functions-with-arguments.md
@@ -0,0 +1,120 @@
+---
+id: 56533eb9ac21ba0edf2244bd
+title: تمرير القيم إلى الوظائف باستخدام الوسيطات
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cy8rahW'
+forumTopicId: 18254
+dashedName: passing-values-to-functions-with-arguments
+---
+
+# --description--
+
+<dfn>الحجج</dfn> هي متغيرات تعمل كعناصر ناقلة للقيم الذي يجب أن تكون مدخلة للوظيفة عند استدعائها. عندما يتم تعريف الوظيفة، فإنها تُعرَّف عادة مع واحد أو أكثر من الحجج. القيم الفعلية التي تدخل (أو <dfn>"تمرر"</dfn>) إلى وظيفة عند استدعائها هي معروفة باسم <dfn>الحجج (arguments)</dfn>.
+
+إليك وظيفة ذات حجتين، `param1` و `param2`:
+
+```js
+function testFun(param1, param2) {
+  console.log(param1, param2);
+}
+```
+
+ثم يمكننا استدعاء `testFun` مثل: `testFun("Hello", "World");`. لقد تمريرنا حجج من نوع مقطع, `Hello` و `World`. داخل الحجة، `param1` سيتساوى مع المقطع `Hello` و `param2` سيتساوى مع المقطع `World`. لاحظ أنه يمكنك استدعاء `testFun` مرة أخرى مع حجج مختلفة والمعلمات سوف تأخذ قيمة الحجج الجديدة.
+
+# --instructions--
+
+<ol><li>أنشاء وظيفة تسمى <code>functionWithArgs</code> تقبل حجج وتخرج المجموع الخاص بهم إلى وحدة التحكم.</li><li>استدعي الوظيفة برقمين كحجتين.</li></ol>
+
+# --hints--
+
+يجب أن تكون `functionWithArgs` وظيفة.
+
+```js
+assert(typeof functionWithArgs === 'function');
+```
+
+يجب أن تنتج `functionWithArgs(1,2)` قيمة `3`.
+
+```js
+if (typeof functionWithArgs === 'function') {
+  capture();
+  functionWithArgs(1, 2);
+  uncapture();
+}
+assert(logOutput == 3);
+```
+
+يجب أن تنتج `functionWithArgs(7,9)` قيمة `16`.
+
+```js
+if (typeof functionWithArgs === 'function') {
+  capture();
+  functionWithArgs(7, 9);
+  uncapture();
+}
+assert(logOutput == 16);
+```
+
+يجب عليك استدعاء `functionWithArgs` برقمين بعد تعريفه.
+
+```js
+assert(
+  /functionWithArgs\([-+]?\d*\.?\d*,[-+]?\d*\.?\d*\)/.test(
+    code.replace(/\s/g, '')
+  )
+);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+var logOutput = "";
+var originalConsole = console
+function capture() {
+    var nativeLog = console.log;
+    console.log = function (message) {
+        if(message) logOutput = JSON.stringify(message).trim();
+        if(nativeLog.apply) {
+          nativeLog.apply(originalConsole, arguments);
+        } else {
+          var nativeMsg = Array.prototype.slice.apply(arguments).join(' ');
+          nativeLog(nativeMsg);
+        }
+    };
+}
+
+function uncapture() {
+  console.log = originalConsole.log;
+}
+
+capture();
+```
+
+## --after-user-code--
+
+```js
+uncapture();
+
+if (typeof functionWithArgs !== "function") { 
+  (function() { return "functionWithArgs is not defined"; })();
+} else {
+  (function() { return logOutput || "console.log never called"; })();
+}
+```
+
+## --seed-contents--
+
+```js
+
+```
+
+# --solutions--
+
+```js
+function functionWithArgs(a, b) {
+  console.log(a + b);
+}
+functionWithArgs(10, 5);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md
new file mode 100644
index 00000000000..5df8a9bd80a
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/practice-comparing-different-values.md
@@ -0,0 +1,78 @@
+---
+id: 599a789b454f2bbd91a3ff4d
+title: التدريب على مقارنة القيم المختلفة (Practice comparing different values)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cm8PqCa'
+forumTopicId: 301174
+dashedName: practice-comparing-different-values
+---
+
+# --description--
+
+في التحديين الأخيرين، لقد تعلمنا عن مشغل المساواة (`==`) ومشغل المساواة الصارمة (`===`). راجع بسريعة وتتدرب باستخدام هؤلاء المشغلين.
+
+إذا لم تكن القيم الذي يجري مقارنتهم من نفس النوع، يقوم المشغل المعني بالمساواة بإجراء تحويل نوعي، ثم يقوم بتقييم القيم. ومع ذلك، فإن عامل المساواة الصارمة (strict equality operator) سيقارن بين نوع البيانات والقيمة كما هي، دون تحويل نوع إلى آخر.
+
+**على سبيل المثال**
+
+`3 == '3'` يرجع `true` لأن JavaScript تحويل المقطع إلى رَقْم. يرجع `3 === '3'` حالة `false` لأن الأنواع مختلفة ولا يتم إجراء تحويل.
+
+**ملاحظة:** في JavaScript، يمكنك تحديد نوع متغير أو قيمة باستخدام مشغل `typeof` على النحو التالي:
+
+```js
+typeof 3
+typeof '3'
+```
+
+ينتج `typeof 3` المقطع `number`، ويرجع `typeof '3'` المقطع `string`.
+
+# --instructions--
+
+تقوم وظيفة `compareEquality` في المحرر بمقارنة قيمتين باستخدام مشغل المساواة. عدل الوظيفة بحيث تنتج المقطع `Equal` فقط عندما تكون القيم متساوية بصرامة (strictly equal).
+
+# --hints--
+
+يجب أن ينتج `compareEquality(10, "10")` مقطع `Not Equal`
+
+```js
+assert(compareEquality(10, '10') === 'Not Equal');
+```
+
+يجب أن ينتج `compareEquality("20", 20)` مقطع `Not Equal`
+
+```js
+assert(compareEquality('20', 20) === 'Not Equal');
+```
+
+يجب عليك استخدام المشغل `===`
+
+```js
+assert(code.match(/===/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Setup
+function compareEquality(a, b) {
+  if (a == b) { // Change this line
+    return "Equal";
+  }
+  return "Not Equal";
+}
+
+compareEquality(10, "10");
+```
+
+# --solutions--
+
+```js
+function compareEquality(a,b) {
+  if (a === b) {
+    return "Equal";
+  }
+  return "Not Equal";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/profile-lookup.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/profile-lookup.md
new file mode 100644
index 00000000000..8f94638355f
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/profile-lookup.md
@@ -0,0 +1,144 @@
+---
+id: 5688e62ea601b2482ff8422b
+title: البحث عن الملف الشخصي (Profile Lookup)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cDqW2Cg'
+forumTopicId: 18259
+dashedName: profile-lookup
+---
+
+# --description--
+
+لدينا قائمة من الكائنات التي تمثل أشخاص مختلفين في قوائم جهات الاتصال.
+
+تأخذ وظيفة `lookUpProfile` كائن `name` والخاصية (`prop`) كحجج تم كتابتها مسبقاً لك.
+
+يجب أن تتحقق الوظيفة مما إذا كان `name` هو `firstName` جهة الاتصال الفعلية والخاصية (`prop`) هي خاصية جهة الاتصال تلك.
+
+إذا كان كلاهما true، أنتج "قيمة" تلك الخاصية.
+
+إذا كان `name` لا يتطابق مع أي جهات اتصال، أرجع المقطع `No such contact`.
+
+إذا كان `prop` لا يتوافق مع أي خصائص صالحة لجهة اتصال وجدت أنها تتطابق مع `name` أنتج المقطع `No such property`.
+
+# --hints--
+
+يجب أن ينتج `lookUpProfile("Kristian", "lastName")` مقطع `Vos`
+
+```js
+assert(lookUpProfile('Kristian', 'lastName') === 'Vos');
+```
+
+يجب أن ينتج `lookUpProfile("Sherlock", "likes")` قائمة `["Intriguing Cases", "Violin"]`
+
+```js
+assert.deepEqual(lookUpProfile('Sherlock', 'likes'), [
+  'Intriguing Cases',
+  'Violin'
+]);
+```
+
+يجب أن ينتج `lookUpProfile("Harry", "likes")` قائمة
+
+```js
+assert(typeof lookUpProfile('Harry', 'likes') === 'object');
+```
+
+يجب أن ينتج `lookUpProfile("Bob", "number")` مقطع `No such contact`
+
+```js
+assert(lookUpProfile('Bob', 'number') === 'No such contact');
+```
+
+يجب أن ينتج `lookUpProfile("Bob", "potato")` مقطع `No such contact`
+
+```js
+assert(lookUpProfile('Bob', 'potato') === 'No such contact');
+```
+
+يجب أن ينتج `lookUpProfile("Akira", "address")` مقطع `No such property`
+
+```js
+assert(lookUpProfile('Akira', 'address') === 'No such property');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Setup
+const contacts = [
+  {
+    firstName: "Akira",
+    lastName: "Laine",
+    number: "0543236543",
+    likes: ["Pizza", "Coding", "Brownie Points"],
+  },
+  {
+    firstName: "Harry",
+    lastName: "Potter",
+    number: "0994372684",
+    likes: ["Hogwarts", "Magic", "Hagrid"],
+  },
+  {
+    firstName: "Sherlock",
+    lastName: "Holmes",
+    number: "0487345643",
+    likes: ["Intriguing Cases", "Violin"],
+  },
+  {
+    firstName: "Kristian",
+    lastName: "Vos",
+    number: "unknown",
+    likes: ["JavaScript", "Gaming", "Foxes"],
+  },
+];
+
+function lookUpProfile(name, prop) {
+  // Only change code below this line
+
+  // Only change code above this line
+}
+
+lookUpProfile("Akira", "likes");
+```
+
+# --solutions--
+
+```js
+const contacts = [
+  {
+    firstName: "Akira",
+    lastName: "Laine",
+    number: "0543236543",
+    likes: ["Pizza", "Coding", "Brownie Points"],
+  },
+  {
+    firstName: "Harry",
+    lastName: "Potter",
+    number: "0994372684",
+    likes: ["Hogwarts", "Magic", "Hagrid"],
+  },
+  {
+    firstName: "Sherlock",
+    lastName: "Holmes",
+    number: "0487345643",
+    likes: ["Intriguing Cases", "Violin"],
+  },
+  {
+    firstName: "Kristian",
+    lastName: "Vos",
+    number: "unknown",
+    likes: ["JavaScript", "Gaming", "Foxes"],
+  },
+];
+function lookUpProfile(name, prop) {
+  for (let i in contacts) {
+    if (contacts[i].firstName === name) {
+      return contacts[i][prop] || "No such property";
+    }
+  }
+  return "No such contact";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.md
new file mode 100644
index 00000000000..fc86bbac9ec
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/quoting-strings-with-single-quotes.md
@@ -0,0 +1,75 @@
+---
+id: 56533eb9ac21ba0edf2244b4
+title: اقتباس مقاطع بعلامات اقتباس منفردة (Quoting Strings with Single Quotes)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cbQmnhM'
+forumTopicId: 18260
+dashedName: quoting-strings-with-single-quotes
+---
+
+# --description--
+
+قيم <dfn>مقطع</dfn> في JavaScript يمكن كتابتها بعلامات اقتباس فردية أو مزدوجة، مادام تبدأ وتنتهي بنفس النوع من العلامات. وخلافا لبعض لغات البرمجة الأخرى، يفعل الاقتباس المنفرد والاقتباس المزدوج الشيء نفسه في JavaScript.
+
+```js
+const doubleQuoteStr = "This is a string"; 
+const singleQuoteStr = 'This is also a string';
+```
+
+السبب في رغبتك في استخدام نوع من الاقتباس فوق الآخر هو إذا كنت ترغب في استخدام كلا النوعين في المقطع. قد يحدث هذا إذا كنت ترغب في حفظ محادثة في المقطع ووضع المحادثة بين علامات الاقتباس. استخدام آخر له هو حفظ علامة `<a>` مع سمات مختلفة في علامات الاقتباس، كل ذلك ضمن مقطع.
+
+```js
+const conversation = 'Finn exclaims to Jake, "Algebraic!"';
+```
+
+ومع ذلك، تصبح هذه مشكلة إذا كنت بحاجة إلى استخدام علامات الاقتباس الخارجية بداخلها. تذكر أن المقطع يحتوي على نفس النوع من علامات الاقتباس في البداية والنهاية. ولكن إذا كان لديك نفس علامات الاقتباس في مكان ما في المنتصف، فإن المقطع سيتوقف مبكراً وسيتسبب بخطأ.
+
+```js
+const goodStr = 'Jake asks Finn, "Hey, let\'s go on an adventure?"'; 
+const badStr = 'Finn responds, "Let's go!"';
+```
+
+هنا `badStr` سوف تسبب بخطأ.
+
+في <dfn>goodStr</dfn> أعلاه، يمكنك استخدام أي من علامات الاقتباس بأمان باستخدام الخط المائل (backslash) الآتية `\` كرمز متحايل (escape character).
+
+**ملاحظة:** يجب عدم الخلط بين الخط المائل (blackslash) الآتية `\` والخط المائل للأمام (forward slash) الآتية `/`. إنهم لا يفعلون الشيء نفسه.
+
+# --instructions--
+
+غيّر المقطع المقدم إلى مقطع مع اقتباسات فردية في البداية والنهاية وبدون رموز متحايلة (escape characters).
+
+الآن، العلامة `<a>` في المقطع تستخدم اقتباسات مزدوجة في كل مكان. سوف تحتاج إلى تغيير الاقتباسات الخارجية إلى اقتباسات فردية حتى تتمكن من إزالة الرموز متحايلة (escape characters).
+
+# --hints--
+
+يجب عليك إزالة جميع الخطوط المائلة (`\`).
+
+```js
+assert(
+  !/\\/g.test(code) &&
+    myStr.match(
+      '\\s*<a href\\s*=\\s*"http://www.example.com"\\s*target\\s*=\\s*"_blank">\\s*Link\\s*</a>\\s*'
+    )
+);
+```
+
+يجب أن يكون لديك علامتا اقتباس مفردتان `'` وأربع علامات اقتباس مزدوجة `"`.
+
+```js
+assert(code.match(/"/g).length === 4 && code.match(/'/g).length === 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const myStr = "<a href=\"http://www.example.com\" target=\"_blank\">Link</a>";
+```
+
+# --solutions--
+
+```js
+const myStr = '<a href="http://www.example.com" target="_blank">Link</a>';
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
new file mode 100644
index 00000000000..d305f50923e
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/record-collection.md
@@ -0,0 +1,181 @@
+---
+id: 56533eb9ac21ba0edf2244cf
+title: مجموعة السجلات (Record Collection)
+challengeType: 1
+forumTopicId: 18261
+dashedName: record-collection
+---
+
+# --description--
+
+لديك object literal يمثل جزءا من مجموعة سجلات موسيقية الخاصة بك. يحتوي كل سجل على رقم معرف فريد يعدّ الهُوِيَّة والعديد من الخصائص الأخرى. ليست كل السجلات لديها معلومات كاملة.
+
+أنت تبدأ بالوظيفة `updateRecords` التي تأخذ object literal يدعي `records`، يحتوي على مجموعة ألبومات موسيقية. و `id`, و `prop` (مثل `artist` أو `tracks`)، و `value`. أكمل الوظيفة باستخدام القواعد أدناه لتعديل الكائن الممرر إلى الوظيفة.
+
+-   الوظيفة الخاص بك يجب أن يرجع دائما كائن مجموعة السجلات بِرُمَّته.
+-   إذا كان `prop` ليس `tracks` و `value` ليس مقطع فارغ، حديث أو تعيين `prop` السجلات إلى `value`.
+-   إذا كان `prop` هو `tracks` ولكن السجلات ليس لديه خاصية `tracks`، أنشئ قائمة فارغة واضف إليها `value`.
+-   إذا كان `prop` هو `tracks` و `value` ليس مقطع فارغ، أضف مقطع `value` إلي أخر سجل موجودة داخل قائمة `tracks`.
+-   إذا كان `value` هو مقطع فارغ، قم بحذف خاصية `prop` من السجلات.
+
+**ملاحظة:** يتم استخدام نسخة من `recordCollection` للاختبارات.
+
+# --hints--
+
+بعد `updateRecords(recordCollection, 5439, "artist", "ABBA")`, يجب أن يكون `artist` مقطع الآتي `ABBA`
+
+```js
+assert(
+  updateRecords(_recordCollection, 5439, 'artist', 'ABBA')[5439]['artist'] ===
+    'ABBA'
+);
+```
+
+بعد `updateRecords(recordCollection, 5439, "tracks", "Take a Chance on Me")`, يجب أن يحتوي `tracks` مقطع `Take a Chance on Me` كآخر عنصر والعنصر الوحيد.
+
+```js
+assert(
+  updateRecords(_recordCollection, 5439, 'tracks', 'Take a Chance on Me') &&
+  _recordCollection[5439]['tracks'].length === 1 &&
+  _recordCollection[5439]['tracks'].pop() === 'Take a Chance on Me'
+);
+```
+
+بعد `updateRecords(recordCollection, 2548, "artist", "")`, لا ينبغي تعيين `artist`
+
+```js
+updateRecords(_recordCollection, 2548, 'artist', '');
+assert(!_recordCollection[2548].hasOwnProperty('artist'));
+```
+
+بعد `updateRecords(recordCollection, 1245, "tracks", "Addicted to Love")`, يجب أن يحتوي `tracks` مقطع `Addicted to Love` كآخر عنصر.
+
+```js
+assert(
+  updateRecords(_recordCollection, 1245, 'tracks', 'Addicted to Love')[1245][
+    'tracks'
+  ].pop() === 'Addicted to Love'
+);
+```
+
+بعد `updateRecords(recordCollection, 2468, "tracks", "Free")`, يجب أن يحتوي `tracks` المقطع `1999` كأول عنصر.
+
+```js
+assert(
+  updateRecords(_recordCollection, 2468, 'tracks', 'Free')[2468][
+    'tracks'
+  ][0] === '1999'
+);
+```
+
+بعد `updateRecords(recordCollection, 2548, "tracks", "")`, لا ينبغي تعيين `tracks`
+
+```js
+updateRecords(_recordCollection, 2548, 'tracks', '');
+assert(!_recordCollection[2548].hasOwnProperty('tracks'));
+```
+
+بعد `updateRecords(recordCollection, 1245, "albumTitle", "Riptide")`, يجب أن يحتوي `albumTitle` مقطع `Riptide` الأتي
+
+```js
+assert(
+  updateRecords(_recordCollection, 1245, 'albumTitle', 'Riptide')[1245][
+    'albumTitle'
+  ] === 'Riptide'
+);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+const _recordCollection = {
+  2548: {
+    albumTitle: 'Slippery When Wet',
+    artist: 'Bon Jovi',
+    tracks: ['Let It Rock', 'You Give Love a Bad Name']
+  },
+  2468: {
+    albumTitle: '1999',
+    artist: 'Prince',
+    tracks: ['1999', 'Little Red Corvette']
+  },
+  1245: {
+    artist: 'Robert Palmer',
+    tracks: []
+  },
+  5439: {
+    albumTitle: 'ABBA Gold'
+  }
+};
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const recordCollection = {
+  2548: {
+    albumTitle: 'Slippery When Wet',
+    artist: 'Bon Jovi',
+    tracks: ['Let It Rock', 'You Give Love a Bad Name']
+  },
+  2468: {
+    albumTitle: '1999',
+    artist: 'Prince',
+    tracks: ['1999', 'Little Red Corvette']
+  },
+  1245: {
+    artist: 'Robert Palmer',
+    tracks: []
+  },
+  5439: {
+    albumTitle: 'ABBA Gold'
+  }
+};
+
+// Only change code below this line
+function updateRecords(records, id, prop, value) {
+  return records;
+}
+
+updateRecords(recordCollection, 5439, 'artist', 'ABBA');
+```
+
+# --solutions--
+
+```js
+const recordCollection = {
+  2548: {
+    albumTitle: 'Slippery When Wet',
+    artist: 'Bon Jovi',
+    tracks: ['Let It Rock', 'You Give Love a Bad Name']
+  },
+  2468: {
+    albumTitle: '1999',
+    artist: 'Prince',
+    tracks: ['1999', 'Little Red Corvette']
+  },
+  1245: {
+    artist: 'Robert Palmer',
+    tracks: []
+  },
+  5439: {
+    albumTitle: 'ABBA Gold'
+  }
+};
+
+// Only change code below this line
+function updateRecords(records, id, prop, value) {
+  if (value === '') delete records[id][prop];
+  else if (prop === 'tracks') {
+    records[id][prop] = records[id][prop] || [];
+    records[id][prop].push(value);
+  } else {
+    records[id][prop] = value;
+  }
+
+  return records;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion.md
new file mode 100644
index 00000000000..4fe860ce2ad
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion.md
@@ -0,0 +1,105 @@
+---
+id: 5cfa3679138e7d9595b9d9d4
+title: استبدال الحلقات باستخدام التكرار (Replace Loops using Recursion)
+challengeType: 1
+videoUrl: >-
+  https://www.freecodecamp.org/news/how-recursion-works-explained-with-flowcharts-and-a-video-de61f40cb7f9/
+forumTopicId: 301175
+dashedName: replace-loops-using-recursion
+---
+
+# --description--
+
+التكرار معناه أنه يمكن استخدام الوظيفة بداخل نفسه. للمساعدة في فهم هذا، ابدأ بالتفكير في المهمة التالية: أضرب أول عناصر `n` من قائمة ليصبح لديك ناتج ضرب هذه العناصر. باستخدام حلقة `for`، يمكنك القيام بما يلي:
+
+```js
+  function multiply(arr, n) {
+    let product = 1;
+    for (let i = 0; i < n; i++) {
+      product *= arr[i];
+    }
+    return product;
+  }
+```
+
+لكن، لاحظ أن `multiply(arr, n) == multiply(arr, n - 1) * arr[n - 1]`. وهذا يعني أنه يمكنك إعادة كتابة `multiply` بداخل نفسه ولا تحتاج أبدا إلى استخدام حلقة.
+
+```js
+  function multiply(arr, n) {
+    if (n <= 0) {
+      return 1;
+    } else {
+      return multiply(arr, n - 1) * arr[n - 1];
+    }
+  }
+```
+
+النسخة المتكررة (recursive) من `multiply` توضح تفاصيل ذلك. في <dfn>حالة أصلية</dfn>، حيث `n <= 0`، فإنه ينتج 1. بالنسبة للقيم الذين أكبر من `n`، فإنه يستدعي نفسه، ولكن مع `n - 1`. يتم تقييم هذا الاستدعاء بنفس الطريقة، فيقوم باستدعاء `multiply` مرة أخرى حتى `n <= 0`. في هذه المرحلة، جميع الـ functions يمكن إرجاعها (can return) و `multiply` الأصلية ترجع (returns) الإجابة.
+
+**ملاحظة:** الـ Recursive functions يجب أن يكون لها base case عندما يتم ارجاعها دون استدعاء الـ function مره أخرى (في هذا المثال ، عندما يكون `n <= 0`) ، وإلا فلن يتمكنوا أبدا من إنهاء التنفيذ.
+
+# --instructions--
+
+اكتب الـ recursive function الآتية `sum(arr, n)`، والتي سترجع مجموع العناصر الأولى `n` من الـ array الآتية `arr`.
+
+# --hints--
+
+`sum([1], 0)` يجب أن يساوي 0.
+
+```js
+assert.equal(sum([1], 0), 0);
+```
+
+`sum([2, 3, 4], 1)` يجب أن يساوي 2.
+
+```js
+assert.equal(sum([2, 3, 4], 1), 2);
+```
+
+`sum([2, 3, 4, 5], 3)` يجب أن يساوي 9.
+
+```js
+assert.equal(sum([2, 3, 4, 5], 3), 9);
+```
+
+لا ينبغي أن يعتمد الكود الخاص بك على أي نوع من الـ loops سواء (`for` أو `while` أو functions مثل `forEach` او `map` او `filter` أو `reduce`).
+
+```js
+assert(
+  !code.match(/for|while|forEach|map|filter|reduce/g)
+);
+```
+
+يجب عليك استخدام الـ recursion لحل هذه المشكلة.
+
+```js
+assert(
+  sum.toString().match(/sum\(.*\)/g).length > 1
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sum(arr, n) {
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function sum(arr, n) {
+  // Only change code below this line
+  if(n <= 0) {
+    return 0;
+  } else {
+    return sum(arr, n - 1) + arr[n - 1];
+  }
+  // Only change code above this line
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md
new file mode 100644
index 00000000000..6b117f568ad
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/replacing-if-else-chains-with-switch.md
@@ -0,0 +1,157 @@
+---
+id: 56533eb9ac21ba0edf2244e0
+title: استبدال If Else Chains بـ Switch
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c3JE8fy'
+forumTopicId: 18266
+dashedName: replacing-if-else-chains-with-switch
+---
+
+# --description--
+
+إذا كان لديك العديد من الخيارات للاختيار منها، `switch` يمكن أن يكون أسهل في الكتابة من الكثير من `if`/`else if`. ما يلي:
+
+```js
+if (val === 1) {
+  answer = "a";
+} else if (val === 2) {
+  answer = "b";
+} else {
+  answer = "c";
+}
+```
+
+يمكن استبداله بما يلي:
+
+```js
+switch (val) {
+  case 1:
+    answer = "a";
+    break;
+  case 2:
+    answer = "b";
+    break;
+  default:
+    answer = "c";
+}
+```
+
+# --instructions--
+
+قم بتغيير سلسلة `if`/`else if` إلى `switch`.
+
+# --hints--
+
+لا يجب عليك استخدام أي `else` في أي مكان في المحرر
+
+```js
+assert(!/else/g.test(code));
+```
+
+لا يجب عليك استخدام أي `if` في أي مكان في المحرر
+
+```js
+assert(!/if/g.test(code));
+```
+
+يجب أن يكون لديك على الأقل ٤ عبارات `break`
+
+```js
+assert(code.match(/break/g).length >= 4);
+```
+
+`chainToSwitch("bob")` يجب أن تساوي الـ string الآتي `Marley`
+
+```js
+assert(chainToSwitch('bob') === 'Marley');
+```
+
+`chainToSwitch(42)` يجب أن تساوي الـ string الآتي `The Answer`
+
+```js
+assert(chainToSwitch(42) === 'The Answer');
+```
+
+`chainToSwitch(1)` يجب أن تساوي الـ string الآتي `There is no #1`
+
+```js
+assert(chainToSwitch(1) === 'There is no #1');
+```
+
+`chainToSwitch(99)` يجب أن تساوي الـ string الآتي `Missed me by this much!`
+
+```js
+assert(chainToSwitch(99) === 'Missed me by this much!');
+```
+
+`chainToSwitch(7)` يجب أن تساوي الـ string الآتي `Ate Nine`
+
+```js
+assert(chainToSwitch(7) === 'Ate Nine');
+```
+
+`chainToSwitch("John")` يجب أن يكون `""` (string فارغ)
+
+```js
+assert(chainToSwitch('John') === '');
+```
+
+`chainToSwitch(156)` يجب أن يكون `""` (string فارغ)
+
+```js
+assert(chainToSwitch(156) === '');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function chainToSwitch(val) {
+  let answer = "";
+  // Only change code below this line
+
+  if (val === "bob") {
+    answer = "Marley";
+  } else if (val === 42) {
+    answer = "The Answer";
+  } else if (val === 1) {
+    answer = "There is no #1";
+  } else if (val === 99) {
+    answer = "Missed me by this much!";
+  } else if (val === 7) {
+    answer = "Ate Nine";
+  }
+
+  // Only change code above this line
+  return answer;
+}
+
+chainToSwitch(7);
+```
+
+# --solutions--
+
+```js
+function chainToSwitch(val) {
+  let answer = "";
+
+  switch (val) {
+    case "bob":
+      answer = "Marley";
+      break;
+    case 42:
+      answer = "The Answer";
+      break;
+    case 1:
+      answer = "There is no #1";
+      break;
+    case 99:
+      answer = "Missed me by this much!";
+      break;
+    case 7:
+      answer = "Ate Nine";
+  }
+  return answer;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.md
new file mode 100644
index 00000000000..418da705952
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-a-value-from-a-function-with-return.md
@@ -0,0 +1,73 @@
+---
+id: 56533eb9ac21ba0edf2244c2
+title: إرجاع قيمة من وظيفة (Return a Value from a Function with Return)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cy87wue'
+forumTopicId: 18271
+dashedName: return-a-value-from-a-function-with-return
+---
+
+# --description--
+
+يمكننا نقل القيم إلى وظيفة باستخدام <dfn>حجج</dfn>. يمكنك استخدام `return` لإرسال قيمة إلى خارج الوظيفة.
+
+**مثال**
+
+```js
+function plusThree(num) {
+  return num + 3;
+}
+
+const answer = plusThree(5);
+```
+
+لدي `answer` القيمة `8` الآن.
+
+يأخذ `plusThree` من <dfn>الحجج</dfn> ما يقابل `num` وينتج قيمة تساوي `num + 3`.
+
+# --instructions--
+
+أنشئ وظيفة `timesFive` التي تقبل حجة واحد، وتضربه في `5`، وترجع القيمة الجديدة.
+
+# --hints--
+
+يجب أن تكون `timesFive` وظيفة
+
+```js
+assert(typeof timesFive === 'function');
+```
+
+يجب أن ينتج `timesFive(5)` قيمة `25`
+
+```js
+assert(timesFive(5) === 25);
+```
+
+يجب أن ينتج `timesFive(2)` قيمة `10`
+
+```js
+assert(timesFive(2) === 10);
+```
+
+يجب أن ينتج `timesFive(0)` قيمة `0`
+
+```js
+assert(timesFive(0) === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+
+```
+
+# --solutions--
+
+```js
+function timesFive(num) {
+  return num * 5;
+}
+timesFive(10);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md
new file mode 100644
index 00000000000..83f0157139c
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/return-early-pattern-for-functions.md
@@ -0,0 +1,106 @@
+---
+id: 56533eb9ac21ba0edf2244c4
+title: نمط الإنشاء المبكر للوظائف (Return Early Pattern for Functions)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cQe39Sq'
+forumTopicId: 18272
+dashedName: return-early-pattern-for-functions
+---
+
+# --description--
+
+عندما يتم الوصول إلى `return`، يتوقف تنفيذ الوظيفة الحالي ويعود التحكم إلى مكان الاستدعاء.
+
+**مثال**
+
+```js
+function myFun() {
+  console.log("Hello");
+  return "World";
+  console.log("byebye")
+}
+myFun();
+```
+
+سيتم عرض مقطع `Hello` في وحدة التحكم، وإنشاء مقطع `World`. لن يعرض مقطع `byebye` في وحدة التحكم أبدا، لأن الوظيفة تنتج عند `return`.
+
+# --instructions--
+
+عدّل الوظيفة `abTest` بحيث إذا كان `a` أو `b` أقل من `0` ستنتج الوظيفة قيمة `undefined` فوراً.
+
+**تلميح**  
+تذكر أن <a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables" target="_blank" rel="noopener noreferrer nofollow">تكون <code>undefined</code> كلمة</a> وليست مقتطع.
+
+# --hints--
+
+يجب أن ينتج `abTest(2, 2)` رَقْم
+
+```js
+assert(typeof abTest(2, 2) === 'number');
+```
+
+يجب أن ينتج `abTest(2, 2)` رَقْم `8`
+
+```js
+assert(abTest(2, 2) === 8);
+```
+
+يجب أن ينتج `abTest(-2, 2)` قيمة `undefined`
+
+```js
+assert(abTest(-2, 2) === undefined);
+```
+
+يجب أن ينتج `abTest(2, -2)` قيمة `undefined`
+
+```js
+assert(abTest(2, -2) === undefined);
+```
+
+يجب أن ينتج `abTest(2, 8)` رَقْم `18`
+
+```js
+assert(abTest(2, 8) === 18);
+```
+
+يجب أن ينتج `abTest(3, 3)` رَقْم `12`
+
+```js
+assert(abTest(3, 3) === 12);
+```
+
+يجب أن ينتج `abTest(0, 0)` رَقْم `0`
+
+```js
+assert(abTest(0, 0) === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Setup
+function abTest(a, b) {
+  // Only change code below this line
+
+
+
+  // Only change code above this line
+
+  return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
+}
+
+abTest(2,2);
+```
+
+# --solutions--
+
+```js
+function abTest(a, b) {
+  if(a < 0 || b < 0) {
+    return undefined;
+  }
+  return Math.round(Math.pow(Math.sqrt(a) + Math.sqrt(b), 2));
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.md
new file mode 100644
index 00000000000..ade4664fcdc
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/returning-boolean-values-from-functions.md
@@ -0,0 +1,82 @@
+---
+id: 5679ceb97cbaa8c51670a16b
+title: عودة القيم المنطقية من الوظيفة (Returning Boolean Values from Functions)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cp62qAQ'
+forumTopicId: 18273
+dashedName: returning-boolean-values-from-functions
+---
+
+# --description--
+
+قد تتذكر من <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/comparison-with-the-equality-operator" target="_blank" rel="noopener noreferrer nofollow">المقارنات باستخدام عملية المساواة (==)</a> أن جميع مشغلي المقارنات يرجعون حالة منطقية (boolean) سواء `true` أو `false`.
+
+في بعض الأحيان يستخدم الناس `if/else` لإجراء المقارنة، مثلا:
+
+```js
+function isEqual(a, b) {
+  if (a === b) {
+    return true;
+  } else {
+    return false;
+  }
+}
+```
+
+لكن هناك طريقة أفضل لفعل ذلك. نظرًا لأن `===` يرجع `true` أو `false`، يمكنك إعادة نتيجة المقارنة:
+
+```js
+function isEqual(a, b) {
+  return a === b;
+}
+```
+
+# --instructions--
+
+أصلح الوظيفة `isLess` لإزالة تعبيرات `if/else`.
+
+# --hints--
+
+يجب أن يرجع `isLess(10, 15)` حالة `true`
+
+```js
+assert(isLess(10, 15) === true);
+```
+
+يجب أن يرجع `isLess(15, 10)` حالة `false`
+
+```js
+assert(isLess(15, 10) === false);
+```
+
+يجب ألا تستخدم أي عبارات `if` أو `else`
+
+```js
+assert(!/if|else/g.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function isLess(a, b) {
+  // Only change code below this line
+  if (a < b) {
+    return true;
+  } else {
+    return false;
+  }
+  // Only change code above this line
+}
+
+isLess(10, 15);
+```
+
+# --solutions--
+
+```js
+function isLess(a, b) {
+  return a < b;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md
new file mode 100644
index 00000000000..d81cc2da545
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/selecting-from-many-options-with-switch-statements.md
@@ -0,0 +1,114 @@
+---
+id: 56533eb9ac21ba0edf2244dd
+title: الاختيار من بين العديد من الخيارات باستخدام عبارات Switch
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c4mv4fm'
+forumTopicId: 18277
+dashedName: selecting-from-many-options-with-switch-statements
+---
+
+# --description--
+
+إذا كان لديك العديد من الخيارات للاختيار من بينهما، استخدم عبارة <dfn>switch</dfn>. تختبر عبارة `switch` قيمة ويمكن أن تحتوي على العديد من عبارات <dfn>case</dfn> التي تحدد القيم المختلفة الممكنة. يتم تنفيذ العبارات من أول قيمة `case` متطابقة حتى يتم العثور على `break`.
+
+فيما يلي مثال على عبارة `switch`:
+
+```js
+switch (lowercaseLetter) {
+  case "a":
+    console.log("A");
+    break;
+  case "b":
+    console.log("B");
+    break;
+}
+```
+
+يتم اختبار قيم `case` مساواة تامة strict equality (`===`). كلمة `break` تخبر JavaScript بالتوقف عن تنفيذ العبارات. إذا تم حذف كلمة `break`, سيتم تنفيذ العبارة التالية.
+
+# --instructions--
+
+اكتب عبارة switch تختبر `val` وتعين `answer` للشروط التالية:  
+`1` - `alpha`  
+`2` - `beta`  
+`3` - `gamma`  
+`4` - `delta`
+
+# --hints--
+
+`caseInSwitch(1)` يجب أن يكون له قيمة السلسلة (string) النصية `alpha`
+
+```js
+assert(caseInSwitch(1) === 'alpha');
+```
+
+`caseInSwitch(2)` يجب أن يكون له قيمة السلسلة (string) النصية `beta`
+
+```js
+assert(caseInSwitch(2) === 'beta');
+```
+
+`caseInSwitch(3)` يجب أن يكون له قيمة السلسلة (string) النصية `gamma`
+
+```js
+assert(caseInSwitch(3) === 'gamma');
+```
+
+`caseInSwitch(4)` يجب أن يكون له قيمة السلسلة (string) النصية `delta`
+
+```js
+assert(caseInSwitch(4) === 'delta');
+```
+
+يجب ألا تستخدم أي عبارات `if` أو `else`
+
+```js
+assert(!/else/g.test(code) || !/if/g.test(code));
+```
+
+يجب أن يكون لديك على الأقل ٣ عبارات `break`
+
+```js
+assert(code.match(/break/g).length > 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function caseInSwitch(val) {
+  let answer = "";
+  // Only change code below this line
+
+
+
+  // Only change code above this line
+  return answer;
+}
+
+caseInSwitch(1);
+```
+
+# --solutions--
+
+```js
+function caseInSwitch(val) {
+  let answer = "";
+
+  switch (val) {
+    case 1:
+      answer = "alpha";
+      break;
+    case 2:
+      answer = "beta";
+      break;
+    case 3:
+      answer = "gamma";
+      break;
+    case 4:
+      answer = "delta";
+  }
+  return answer;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/shopping-list.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/shopping-list.md
new file mode 100644
index 00000000000..1bcd107cda4
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/shopping-list.md
@@ -0,0 +1,97 @@
+---
+id: 56533eb9ac21ba0edf2244bc
+title: قائمة التسوق (Shopping List)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c9MEKHZ'
+forumTopicId: 18280
+dashedName: shopping-list
+---
+
+# --description--
+
+قم إنشاء قائمة تسوق في المتغير `myList`. وينبغي أن تكون القائمة multi-dimensional array (مصفوفة متعددة الأبعاد) تحتوي على عدة sub-arrays (مصفوفات فرعية).
+
+يجب أن يحتوي العنصر الأول في كل sub-array على string يحمل اسم الصنف. أما العنصر الثاني فيجب أن يكون رقماً يمثل الكمية مثل.
+
+```js
+["Chocolate Bar", 15]
+```
+
+وينبغي أن يكون في القائمة خمسة sub-arrays على الأقل.
+
+# --hints--
+
+`myList` يجب أن تكون array.
+
+```js
+assert(isArray);
+```
+
+العناصر الأولى في كل الـ sub-arrays الخاصة بك يجب أن تكون كلها strings.
+
+```js
+assert(hasString);
+```
+
+العناصر الثانية في كل الـ sub-arrays الخاصة بك يجب أن تكون كلها numbers.
+
+```js
+assert(hasNumber);
+```
+
+يجب أن يكون لديك 5 عناصر على الأقل في قائمتك.
+
+```js
+assert(count > 4);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+var count = 0;
+var isArray = false;
+var hasString = false;
+var hasNumber = false;
+(function(list){
+  if(Array.isArray(myList)) {
+    isArray = true;
+    if(myList.length > 0) {
+      hasString = true;
+      hasNumber = true;
+      for (var elem of myList) {
+        if(!elem || !elem[0] || typeof elem[0] !== 'string') {
+          hasString = false;
+        }
+        if(!elem || typeof elem[1] !== 'number') {
+          hasNumber = false;
+        }
+      }
+    }
+    count = myList.length;
+    return JSON.stringify(myList);
+  } else {
+    return "myList is not an array";
+  }
+
+})(myList);
+```
+
+## --seed-contents--
+
+```js
+const myList = [];
+```
+
+# --solutions--
+
+```js
+const myList = [
+  ["Candy", 10],
+  ["Potatoes", 12],
+  ["Eggs", 12],
+  ["Catfood", 1],
+  ["Toads", 9]
+];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/stand-in-line.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/stand-in-line.md
new file mode 100644
index 00000000000..3b14387ec79
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/stand-in-line.md
@@ -0,0 +1,118 @@
+---
+id: 56533eb9ac21ba0edf2244c6
+title: قف في الصف (Stand in Line)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/ca8Q8tP'
+forumTopicId: 18307
+dashedName: stand-in-line
+---
+
+# --description--
+
+في علوم الحاسب <dfn>الصف</dfn> هو <dfn>هيكل بيانات</dfn> مجرد، حيث يتم حفظ العناصر بالترتيب. يمكن إضافة عناصر جديدة في الجزء الخلفي من الصف ويتم إزالة العناصر القديمة من مقدمة الصف.
+
+# --instructions--
+
+اكتب الوظيفة `nextInLine` و التي تأخذ القائمة الآتية (`arr`) ورَقْم (`item`) كحجج.
+
+أضف الرَقْم إلى نهاية القائمة، ثم أزل العنصر الأول من القائمة.
+
+يجب أن تقوم وظيفة `nextInLine` بإرجاع العنصر الذي تمت إزالته.
+
+# --hints--
+
+يجب أن ينتج `nextInLine([], 5)` رَقْم.
+
+```js
+assert.isNumber(nextInLine([], 5));
+```
+
+يجب أن ينتج `nextInLine([], 1)` رَقْم `1`
+
+```js
+assert(nextInLine([], 1) === 1);
+```
+
+يجب أن ينتج `nextInLine([2], 1)` رَقْم `2`
+
+```js
+assert(nextInLine([2], 1) === 2);
+```
+
+يجب أن ينتج `nextInLine([5,6,7,8,9], 1)` رَقْم `5`
+
+```js
+assert(nextInLine([5, 6, 7, 8, 9], 1) === 5);
+```
+
+بعد `nextInLine(testArr, 10)`, يجب أن يتكون `testArr[4]` من `10`
+
+```js
+nextInLine(testArr, 10);
+assert(testArr[4] === 10);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+var logOutput = [];
+var originalConsole = console
+function capture() {
+    var nativeLog = console.log;
+    console.log = function (message) {
+        logOutput.push(message);
+        if(nativeLog.apply) {
+          nativeLog.apply(originalConsole, arguments);
+        } else {
+          var nativeMsg = Array.prototype.slice.apply(arguments).join(' ');
+          nativeLog(nativeMsg);
+        }
+    };
+}
+
+function uncapture() {
+  console.log = originalConsole.log;
+}
+
+capture();
+```
+
+## --after-user-code--
+
+```js
+uncapture();
+testArr = [1,2,3,4,5];
+(function() { return logOutput.join("\n");})();
+```
+
+## --seed-contents--
+
+```js
+function nextInLine(arr, item) {
+  // Only change code below this line
+
+  return item;
+  // Only change code above this line
+}
+
+// Setup
+let testArr = [1, 2, 3, 4, 5];
+
+// Display code
+console.log("Before: " + JSON.stringify(testArr));
+console.log(nextInLine(testArr, 6));
+console.log("After: " + JSON.stringify(testArr));
+```
+
+# --solutions--
+
+```js
+let testArr = [1, 2, 3, 4, 5];
+
+function nextInLine(arr, item) {
+    arr.push(item);
+    return arr.shift();
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/store-multiple-values-in-one-variable-using-javascript-arrays.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/store-multiple-values-in-one-variable-using-javascript-arrays.md
new file mode 100644
index 00000000000..a800d8f6b14
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/store-multiple-values-in-one-variable-using-javascript-arrays.md
@@ -0,0 +1,63 @@
+---
+id: bd7993c9c69feddfaeb8bdef
+title: تخزين قيم متعددة في متغير واحد باستخدام مصفوفات جافا سكريبت (Store Multiple Values in one Variable using JavaScript Arrays)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/crZQWAm'
+forumTopicId: 18309
+dashedName: store-multiple-values-in-one-variable-using-javascript-arrays
+---
+
+# --description--
+
+مع متغير جافا سكريبت الـ `array`، يمكننا تخزين عدة قطع من البيانات في مكان واحد.
+
+تبدأ تعريف الـ array بأقواس مربعه (square bracke) وتنهيها بأقواس مربعه، ووضع فاصلة بين كل إدخال، مثال:
+
+```js
+const sandwich = ["peanut butter", "jelly", "bread"];
+```
+
+# --instructions--
+
+قم بتعديل الـ array الجديدة `myArray` بحيث تحتوي على string ورقم في نفس الوقت (بهذا الترتيب).
+
+# --hints--
+
+`myArray` يجب أن يكون array.
+
+```js
+assert(typeof myArray == 'object');
+```
+
+العنصر الأول في `myArray` يجب أن يكون string.
+
+```js
+assert(typeof myArray[0] !== 'undefined' && typeof myArray[0] == 'string');
+```
+
+العنصر الثاني في `myArray` يجب أن يكون رقما.
+
+```js
+assert(typeof myArray[1] !== 'undefined' && typeof myArray[1] == 'number');
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(z){return z;})(myArray);
+```
+
+## --seed-contents--
+
+```js
+// Only change code below this line
+const myArray = [];
+```
+
+# --solutions--
+
+```js
+const myArray = ["The Answer", 42];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.md
new file mode 100644
index 00000000000..e0180d01f20
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/storing-values-with-the-assignment-operator.md
@@ -0,0 +1,77 @@
+---
+id: 56533eb9ac21ba0edf2244a8
+title: تخزين القيم مع مشغل التعيين (Storing Values with the Assignment Operator)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cEanysE'
+forumTopicId: 18310
+dashedName: storing-values-with-the-assignment-operator
+---
+
+# --description--
+
+في JavaScript، يمكنك تخزين قيمة في متغير باستخدام مشغل <dfn>تعيين</dfn> يبدو (`=`).
+
+```js
+myVariable = 5;
+```
+
+هذا يعين `Number` بقيمة `5` إلى `myVariable`.
+
+إذا كانت هناك أي حسابات إلى يمين مشغل `=`، يتم أداء هذه حسابات قبل تعيين القيمة إلى المتغير الموجود على يسار المشغل.
+
+```js
+var myVar;
+myVar = 5;
+```
+
+أولا، هذا الكود ينشئ متغير يسمى `myVar`. ثم، الكود يعين `5` إلى `myVar`. الآن، إذا ظهر `myVar` مرة أخرى في الكود، فإن البرنامَج سيعامله كما لو أنه `5`.
+
+# --instructions--
+
+عيين قيمة `7` إلى المتغير `a`.
+
+# --hints--
+
+لا يجب عليك تعديل الكود فوق التعليق المحدد.
+
+```js
+assert(/var a;/.test(code));
+```
+
+يجب أن يحتوي `a` قيمة 7.
+
+```js
+assert(typeof a === 'number' && a === 7);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+if (typeof a != 'undefined') {
+  a = undefined;
+}
+```
+
+## --after-user-code--
+
+```js
+(function(a){return "a = " + a;})(a);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+var a;
+
+// Only change code below this line
+```
+
+# --solutions--
+
+```js
+var a;
+a = 7;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md
new file mode 100644
index 00000000000..9614b3609db
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/subtract-one-number-from-another-with-javascript.md
@@ -0,0 +1,59 @@
+---
+id: cf1111c1c11feddfaeb4bdef
+title: طرح رقم من الآخر باستخدام JavaScript
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cP3yQtk'
+forumTopicId: 18314
+dashedName: subtract-one-number-from-another-with-javascript
+---
+
+# --description--
+
+يمكننا أيضا أن نطرح رقما من الآخر.
+
+يستخدم JavaScript رمز `-` للطرح.
+
+**مثال**
+
+```js
+const myVar = 12 - 6;
+```
+
+لدي `myVar` قيمة `6` الآن.
+# --instructions--
+
+غيّر `0` بحيث يكون الفرق `12`.
+
+# --hints--
+
+يجب أن يساوي `difference` قيمة 12.
+
+```js
+assert(difference === 12);
+```
+
+يجب عليك طرح رَقَم واحد فقط من 45.
+
+```js
+assert(/difference=45-33;?/.test(__helpers.removeWhiteSpace(code)));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(z){return 'difference = '+z;})(difference);
+```
+
+## --seed-contents--
+
+```js
+const difference = 45 - 0;
+```
+
+# --solutions--
+
+```js
+const difference = 45 - 33;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md
new file mode 100644
index 00000000000..88f783a5d99
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/testing-objects-for-properties.md
@@ -0,0 +1,98 @@
+---
+id: 567af2437cbaa8c51670a16c
+title: اختبار الكائنات للخصائص (Testing Objects for Properties)
+challengeType: 1
+forumTopicId: 18324
+dashedName: testing-objects-for-properties
+---
+
+# --description--
+
+في بعض الأحيان يكون من المفيد التحقق مما إذا كانت خاصية كائن (object property) معين موجودة أم لا. يمكننا استخدام وظيفة `.hasOwnProperty(propname)` لتحديد ما إذا كان لهذا الكائن اسم خاصية معين. يرجع `.hasOwnProperty()` حالة `true` أو `false` إذا تم العثور على الخاصية أو لا.
+
+**مثال**
+
+```js
+const myObj = {
+  top: "hat",
+  bottom: "pants"
+};
+
+myObj.hasOwnProperty("top");
+myObj.hasOwnProperty("middle");
+```
+
+يرجع أول `hasOwnProperty` حالة `true`، في حين أن يرجع الثاني `false`.
+
+# --instructions--
+
+عدّل الوظيفة `checkObj` لاختبار ما إذا كان كائن تم تمريره إلى الوظيفة (`obj`) يحتوي على خاصية محددة (`checkProp`). إذا تم العثور على الخاصية، قم إرجاع قيمة تلك الخاصية. إذا لم يكن الأمر كذلك، قم إرجاع `"Not Found"`.
+
+# --hints--
+
+يجب أن ينتج `checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "gift")` مقطع `pony`.
+
+```js
+assert(
+  checkObj({ gift: 'pony', pet: 'kitten', bed: 'sleigh' }, 'gift') === 'pony'
+);
+```
+
+يجب أن ينتج `checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "pet")` مقطع `kitten`.
+
+```js
+assert(
+  checkObj({ gift: 'pony', pet: 'kitten', bed: 'sleigh' }, 'pet') === 'kitten'
+);
+```
+
+يجب أن ينتج `checkObj({gift: "pony", pet: "kitten", bed: "sleigh"}, "house")` مقطع `Not Found`.
+
+```js
+assert(
+  checkObj({ gift: 'pony', pet: 'kitten', bed: 'sleigh' }, 'house') ===
+    'Not Found'
+);
+```
+
+يجب أن ينتج `checkObj({city: "Seattle"}, "city")` مقطع `Seattle`.
+
+```js
+assert(checkObj({ city: 'Seattle' }, 'city') === 'Seattle');
+```
+
+يجب أن ينتج `checkObj({city: "Seattle"}, "district")` مقطع`Not Found`.
+
+```js
+assert(checkObj({ city: 'Seattle' }, 'district') === 'Not Found');
+```
+
+يجب أن ينتج `checkObj({pet: "kitten", bed: "sleigh"}, "gift")` مقطع `Not Found`.
+
+```js
+assert(checkObj({ pet: 'kitten', bed: 'sleigh' }, 'gift') === 'Not Found');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function checkObj(obj, checkProp) {
+  // Only change code below this line
+  return "Change Me!";
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function checkObj(obj, checkProp) {
+  if(obj.hasOwnProperty(checkProp)) {
+    return obj[checkProp];
+  } else {
+    return "Not Found";
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md
new file mode 100644
index 00000000000..0479edcfc81
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understand-string-immutability.md
@@ -0,0 +1,70 @@
+---
+id: 56533eb9ac21ba0edf2244ba
+title: فهم عدم قابلية المقطع على التغيير (Understand String Immutability)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cWPVaUR'
+forumTopicId: 18331
+dashedName: understand-string-immutability
+---
+
+# --description--
+
+في JavaScript، قيم `String` هي قيم <dfn>قابلة للتغيير</dfn>، مما يعني أنه لا يمكن تغييرها بمجرد إنشائها.
+
+على سبيل المثال الكود التالي سيحدث خطأ لأن الحرف `B` في المقطع `Bob` لا يمكن تغييره إلى الحرف `J`:
+
+```js
+let myStr = "Bob";
+myStr[0] = "J";
+```
+
+لاحظ أن هذا *لا* يعني أنه لا يمكن إعادة تعيين `myStr`. الطريقة الوحيدة لتغيير `myStr` هي تعيينه بمقطع جديدة، هكذا:
+
+```js
+let myStr = "Bob";
+myStr = "Job";
+```
+
+# --instructions--
+
+صحّ تعيين `myStr` بحيث يحتوي على قيمة المقطع `Hello World` باستخدام النهج الموضح في المثال أعلاه.
+
+# --hints--
+
+يجب أن يكون لدي `myStr` قيمة المقطع الآتي `Hello World`.
+
+```js
+assert(myStr === 'Hello World');
+```
+
+لا يجب عليك تعديل الكود فوق التعليق المحدد.
+
+```js
+assert(/myStr = "Jello World"/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(v){return "myStr = " + v;})(myStr);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+let myStr = "Jello World";
+
+// Only change code below this line
+myStr[0] = "H"; // Change this line
+// Only change code above this line
+```
+
+# --solutions--
+
+```js
+let myStr = "Jello World";
+myStr = "Hello World";
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md
new file mode 100644
index 00000000000..5df0a28bef3
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-boolean-values.md
@@ -0,0 +1,60 @@
+---
+id: bd7123c9c441eddfaeb5bdef
+title: فهم الحالات المنطقية (Understanding Boolean Values)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c9Me8t4'
+forumTopicId: 301176
+dashedName: understanding-boolean-values
+---
+
+# --description--
+
+نوع آخر من البيانات هو <dfn>حالة المنطقية</dfn>. يمكن أن يكون للحالات المنطقية حالة واحدة فقط من حالتين: `true` أو `false`. إنها في الأساس كمفاتيح تشغيل صغيرة لإيقاف وبدء التشغيل، حيث إن `true` يبدأ التشغيل و `false` يوقفه. وهاتان الحالتان تستبعد إحداهما الأخرى.
+
+**ملاحظة:** القيم الحالة المنطقية لا تكتب أبدا باستخدام علامات الاقتباس. المقطعين `"true"` و `"false"` ليست حالتي منطقية وليس لها معنى خاص في JavaScript.
+
+# --instructions--
+
+عدّل الوظيفة `welcomeToBooleans` بحيث ترجع `true` بدلاً من `false` عند النقر على زر التشغيل.
+
+# --hints--
+
+يجب أن تقوم الوظيفة `welcomeToBooleans()` بإرجاع حالة منطقية (`true`, أو `false`).
+
+```js
+assert(typeof welcomeToBooleans() === 'boolean');
+```
+
+يجب أن يرجع `welcomeToBooleans()` حالة `true`.
+
+```js
+assert(welcomeToBooleans() === true);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+welcomeToBooleans();
+```
+
+## --seed-contents--
+
+```js
+function welcomeToBooleans() {
+  // Only change code below this line
+
+  return false; // Change this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function welcomeToBooleans() {
+  return true; // Change this line
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.md
new file mode 100644
index 00000000000..f0747b19f17
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-case-sensitivity-in-variables.md
@@ -0,0 +1,100 @@
+---
+id: 56533eb9ac21ba0edf2244ab
+title: فهم حساسية الحالة الحروف في المتغيرات (Understanding Case Sensitivity in Variables)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cd6GDcD'
+forumTopicId: 18334
+dashedName: understanding-case-sensitivity-in-variables
+---
+
+# --description--
+
+في JavaScript جميع المتغيرات وأسماء الوظائف حساسة لحالة الأحرف أي case sensitive. هذا يعني أن الكتابة بالأحرف الكبيرة (capitalization) شيئ مؤثر.
+
+لا يكون `MYVAR` مثل `MyVar` أو `myvar`. من الممكن أن يكون لديك متغيرات مميزة متعددة بنفس الاسم ولكن بحالات مختلف. يوصى بشدة، من أجل الوضوح، *عدم* استخدام مِيزة اللغة هذه.
+
+**أفضل ممارسة**
+
+كتابة أسماء المتغيرات في JavaScript باستخدام <dfn>camelCase</dfn>. في <dfn>camelCase</dfn>، تحتوي أسماء المتغيرات المتعددة الكلمات على الكلمة الأولى بالأحرف الصغيرة ويتم كتابة الحرف الأول من كل كلمة لاحقة بحروف كبيرة.
+
+**على سبيل المثال:**
+
+```js
+var someVariable;
+var anotherVariableName;
+var thisVariableNameIsSoLong;
+```
+
+# --instructions--
+
+عدّل التعريفات والتخصيصات الحالية بحيث تستخدم أسماؤها <dfn>camelCase</dfn>.
+
+لا تنشئ أي متغيرات جديدة.
+
+# --hints--
+
+يجب أن يتم تعريف `studlyCapVar` وأن تكون قيمتها `10`.
+
+```js
+assert(typeof studlyCapVar !== 'undefined' && studlyCapVar === 10);
+```
+
+يجب أن يتم تعريف`properCamelCase` وأن تكون له قيمة `A String` بنوع مقطع.
+
+```js
+assert(
+  typeof properCamelCase !== 'undefined' && properCamelCase === 'A String'
+);
+```
+
+يجب أن يتم تعريف `titleCaseOver` وأن تكون قيمتها `9000`.
+
+```js
+assert(typeof titleCaseOver !== 'undefined' && titleCaseOver === 9000);
+```
+
+يجب أن يستخدم `studlyCapVar` حالة camelCase في كل من أقسام التعريف والتخصيص.
+
+```js
+assert(code.match(/studlyCapVar/g).length === 2);
+```
+
+يجب أن يستخدم `properCamelCase` حالة camelCase في كل من أقسام التعريف والتخصيص.
+
+```js
+assert(code.match(/properCamelCase/g).length === 2);
+```
+
+يجب أن يستخدم `titleCaseOver` حالة camelCase في كل من أقسام التعريف و التخصيص.
+
+```js
+assert(code.match(/titleCaseOver/g).length === 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Variable declarations
+var StUdLyCapVaR;
+var properCamelCase;
+var TitleCaseOver;
+
+// Variable assignments
+STUDLYCAPVAR = 10;
+PRoperCAmelCAse = "A String";
+tITLEcASEoVER = 9000;
+```
+
+# --solutions--
+
+```js
+var studlyCapVar;
+var properCamelCase;
+var titleCaseOver;
+
+studlyCapVar = 10;
+properCamelCase = "A String";
+titleCaseOver = 9000;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.md
new file mode 100644
index 00000000000..bb19d74f0ba
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-undefined-value-returned-from-a-function.md
@@ -0,0 +1,96 @@
+---
+id: 598e8944f009e646fc236146
+title: فهم القيم غير المحددة المرتجعة من الوظيفة (Understanding Undefined Value returned from a Function)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/ce2p7cL'
+forumTopicId: 301177
+dashedName: understanding-undefined-value-returned-from-a-function
+---
+
+# --description--
+
+يمكن أن يتضمن الوظيفة عبارة `return` ولكن ليس عليه أن يفعل ذلك. في حالة أن الوظيفة لا يحتوي على عبارة `return` عندما يتم استدعائه، تتم معالجة الكود الداخلي في الوظيفة ولكن القيمة التي يتم إرجاعها هي `undefined`.
+
+**مثال**
+
+```js
+let sum = 0;
+
+function addSum(num) {
+  sum = sum + num;
+}
+
+addSum(3);
+```
+
+تكون `addSum` وظيفة دون `return`. سيغير وظيفة المتغير `sum` العالمي الآتي, ولكن تكون القيمة المرتجعة للوظيفة `undefined`.
+
+# --instructions--
+
+أنشئ وظيفة `addFive` دون أي حجج. تضيف الوظيفة 5 إلى متغير `sum` ولكن تكون قيمته المرتجعة `undefined`.
+
+# --hints--
+
+يجب أن تكون `addFive` وظيفة.
+
+```js
+assert(typeof addFive === 'function');
+```
+
+بمجرد تشغيل كلتا الوظيفتين، يجب أن يكون `sum` يساوي `8`.
+
+```js
+assert(sum === 8);
+```
+
+يجب أن تنتج `addFive` القيمة المرتجعة `undefined`.
+
+```js
+assert(addFive() === undefined);
+```
+
+داخل وظيفة `addFive`، يجب عليك إضافة `5` إلى متغير `sum`.
+
+```js
+assert(
+  __helpers.removeWhiteSpace(addFive.toString()).match(/sum=sum\+5|sum\+=5/)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Setup
+let sum = 0;
+
+function addThree() {
+  sum = sum + 3;
+}
+
+// Only change code below this line
+
+
+// Only change code above this line
+
+addThree();
+addFive();
+```
+
+# --solutions--
+
+```js
+let sum = 0;
+
+function addThree() {
+  sum = sum + 3;
+}
+
+function addFive() {
+  sum = sum + 5;
+}
+
+addThree();
+addFive();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md
new file mode 100644
index 00000000000..c0754503ba8
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/understanding-uninitialized-variables.md
@@ -0,0 +1,79 @@
+---
+id: 56533eb9ac21ba0edf2244aa
+title: فهم المتغيرات غير المهيأة (Understanding Uninitialized Variables)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cBa2JAL'
+forumTopicId: 18335
+dashedName: understanding-uninitialized-variables
+---
+
+# --description--
+
+عند تعريف متغيرات JavaScript، يكون لها قيمة أولية وهي `undefined`. إذا قمت بعملية رياضية على متغير `undefined` ستكون نتيجتك `NaN` مما يعني <dfn>"Not a Number"</dfn> إي "ليس رقما". إذا ربط مقطع مع متغير `undefined`، فستحصل على <dfn>مقطع</dfn> بقيمة `undefined`.
+
+# --instructions--
+
+قم بتهيئة المتغيرات الثلاثة `a`, و `b`, و `c` بالقيم `5`, و `10`, و `"I am a"` على التوالي، حتى لا يكونوا `undefined`.
+
+# --hints--
+
+يجب أن يتم تعريف `a` وأن تكون قيمتها `6`.
+
+```js
+assert(typeof a === 'number' && a === 6);
+```
+
+يجب أن يتم تعريف `b` وأن تكون قيمتها `15`.
+
+```js
+assert(typeof b === 'number' && b === 15);
+```
+
+يجب ألّا يحتوي `c` على `undefined` ويجب أن يكون لديه مقطع بقيمة `I am a String!`
+
+```js
+assert(!/undefined/.test(c) && c === 'I am a String!');
+```
+
+لا يجب عليك تعديل الكود فوق التعليق المحدد.
+
+```js
+assert(
+  /a = a \+ 1;/.test(code) &&
+    /b = b \+ 5;/.test(code) &&
+    /c = c \+ " String!";/.test(code)
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(a,b,c){ return "a = " + a + ", b = " + b + ", c = '" + c + "'"; })(a,b,c);
+```
+
+## --seed-contents--
+
+```js
+// Only change code below this line
+var a;
+var b;
+var c;
+// Only change code above this line
+
+a = a + 1;
+b = b + 5;
+c = c + " String!";
+```
+
+# --solutions--
+
+```js
+var a = 5;
+var b = 10;
+var c = "I am a";
+a = a + 1;
+b = b + 5;
+c = c + " String!";
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.md
new file mode 100644
index 00000000000..4bd3ae7b170
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/updating-object-properties.md
@@ -0,0 +1,78 @@
+---
+id: 56bbb991ad1ed5201cd392d1
+title: تحديث خصائص الكائن (Updating Object Properties)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c9yEJT4'
+forumTopicId: 18336
+dashedName: updating-object-properties
+---
+
+# --description--
+
+بعد إنشاء كائن JavaScript، يمكنك تحديث خصائصه في أي وقت كما يمكنك تحديث أي متغير آخر. يمكنك استخدام أي من تدوين النِّقَاط أو تدوين الأقواس المعكوفان (dot or bracket notation).
+
+على سبيل المثال، دعونا ننظر إلى `ourDog`:
+
+```js
+const ourDog = {
+  "name": "Camper",
+  "legs": 4,
+  "tails": 1,
+  "friends": ["everything!"]
+};
+```
+
+بما أنه كلب سعيد، دعونا نغير اسمه إلى مقطع `Happy Camper`. إليك كيف, تحدث الاسم: `ourDog.name = "Happy Camper";` أو `ourDog["name"] = "Happy Camper";`، الآن عندما نقيّم `ourDog.name`، بدلا من الحصول علي `Camper`، سوف نحصل علي اسمه الجديد `Happy Camper`.
+
+# --instructions--
+
+حدث خاصية اسم الكائن `myDog`. غيّر اسمه من `Coder` إلى `Happy Coder`. يمكنك استخدام أي من تدوين النِّقَاط أو تدوين الأقواس المعكوفان (dot or bracket notation).
+
+# --hints--
+
+يجب عليك تحديث خاصية `name` في `myDog` لتساوي مقطع `Happy Coder`.
+
+```js
+assert(/happy coder/gi.test(myDog.name));
+```
+
+لا يجب عليك تعديل تعريف `myDog`.
+
+```js
+assert(/"name": "Coder"/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(z){return z;})(myDog);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const myDog = {
+  "name": "Coder",
+  "legs": 4,
+  "tails": 1,
+  "friends": ["freeCodeCamp Campers"]
+};
+
+// Only change code below this line
+
+```
+
+# --solutions--
+
+```js
+const myDog = {
+  "name": "Coder",
+  "legs": 4,
+  "tails": 1,
+  "friends": ["freeCodeCamp Campers"]
+};
+myDog.name = "Happy Coder";
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-first-character-in-a-string.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-first-character-in-a-string.md
new file mode 100644
index 00000000000..a28608ed664
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-first-character-in-a-string.md
@@ -0,0 +1,74 @@
+---
+id: bd7123c9c549eddfaeb5bdef
+title: استخدم رمز الاقواس للعثور على اول حرف في مقطع (Use Bracket Notation to Find the First Character in a String)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/ca8JwhW'
+forumTopicId: 18341
+dashedName: use-bracket-notation-to-find-the-first-character-in-a-string
+---
+
+# --description--
+
+<dfn>القوسان المعكوفان</dfn> هي طريقة للحصول على رمز في ترتيب معين داخل المقطع.
+
+معظم لغات البرمجة الحديثة، مثل JavaScript، لا تبدأ في العد من 1 كما يفعل البشر. إنهم يبدؤون عند الصفر. يشار إلى هذا بالترتيب <dfn>مبني على الصفر</dfn>.
+
+على سبيل المثال، رمز ترتيب 0 في كلمة `Charles` هو `C`. إذن إذا `const firstName = "Charles"`، يمكنك الحصول على قيمة الرمز الأول من المقطع باستخدام `firstName[0]`.
+
+مثال:
+
+```js
+const firstName = "Charles";
+const firstLetter = firstName[0];
+```
+
+سيكون إلى `firstLetter` قيمة تساوي المقطع `C`.
+
+# --instructions--
+
+استخدم رمز الأقواس للعثور على الرمز الأول في متغير `lastName` وتعيينه إلى `firstLetterOfLastName`.
+
+**تلميح:** حاول النظر إلى المثال أعلاه إذا كنت عالق.
+
+# --hints--
+
+يجب أن يحتوي متغير `firstLetterOfLastName` قيمة `L`.
+
+```js
+assert(firstLetterOfLastName === 'L');
+```
+
+يجب عليك استخدام رمز الأقواس المعكوفان.
+
+```js
+assert(code.match(/firstLetterOfLastName\s*=\s*lastName\s*\[\s*\d\s*\]/));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(v){return v;})(firstLetterOfLastName);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+let firstLetterOfLastName = "";
+const lastName = "Lovelace";
+
+// Only change code below this line
+firstLetterOfLastName = lastName; // Change this line
+```
+
+# --solutions--
+
+```js
+let firstLetterOfLastName = "";
+const lastName = "Lovelace";
+
+// Only change code below this line
+firstLetterOfLastName = lastName[0];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-last-character-in-a-string.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-last-character-in-a-string.md
new file mode 100644
index 00000000000..12d33734835
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-last-character-in-a-string.md
@@ -0,0 +1,68 @@
+---
+id: bd7123c9c451eddfaeb5bdef
+title: استخدم رمز آلأقواس (Bracket Notation) للعثور على آخر حرف في سلسلة (String)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cBZQGcv'
+forumTopicId: 18342
+dashedName: use-bracket-notation-to-find-the-last-character-in-a-string
+---
+
+# --description--
+
+للحصول على آخر حرف من سلسلة (String)، يمكنك طرح واحد من طول السلسلة (String).
+
+على سبيل المثال، إذا `const firstName = "Ada"`، يمكنك الحصول على قيمة الحرف الأخير من السلسلة باستخدام `firstName[firstName.length - 1]`.
+
+مثال:
+
+```js
+const firstName = "Ada";
+const lastLetter = firstName[firstName.length - 1];
+```
+
+`lastLetter` سيكون لها قيمة تساوي السلسلة `a`.
+
+# --instructions--
+
+استخدم <dfn>رمز الأقواس</dfn> للعثور على الحرف الأخير في المتغير `lastName`.
+
+**تلميح:** حاول النظر إلى المثال أعلاه إذا كنت عالق.
+
+# --hints--
+
+`lastLetterOfLastName` يجب أن يكون الحرف `e`.
+
+```js
+assert(lastLetterOfLastName === 'e');
+```
+
+يجب عليك استخدام `.length` للحصول على آخر حرف.
+
+```js
+assert(code.match(/\.length/g).length > 0);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(v){return v;})(lastLetterOfLastName);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const lastName = "Lovelace";
+
+// Only change code below this line
+const lastLetterOfLastName = lastName; // Change this line
+```
+
+# --solutions--
+
+```js
+const lastName = "Lovelace";
+const lastLetterOfLastName = lastName[lastName.length - 1];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-character-in-a-string.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-character-in-a-string.md
new file mode 100644
index 00000000000..df2d282fa50
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-character-in-a-string.md
@@ -0,0 +1,68 @@
+---
+id: bd7123c9c450eddfaeb5bdef
+title: استخدم رمز آلأقواس المعكوفان للعثور على حرف معين في مقطع
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cWPVJua'
+forumTopicId: 18343
+dashedName: use-bracket-notation-to-find-the-nth-character-in-a-string
+---
+
+# --description--
+
+يمكنك أيضًا استخدام <dfn>رمز الأقواس المعكوفان</dfn> للحصول على الحرف في مواقع أخرى داخل مقطع.
+
+تذكر أن أجهزة الكمبيوتر تبدأ في العد في `0`، لذا فإن الحرف الأول هو في الواقع الحرف صفر.
+
+مثال:
+
+```js
+const firstName = "Ada";
+const secondLetterOfFirstName = firstName[1];
+```
+
+سيحتوي `secondLetterOfFirstName` على قيمة مقطع `d`.
+
+# --instructions--
+
+دعونا نحاول تعيين `thirdLetterOfLastName` مساوية للحرف الثالث من متغير `lastName` باستخدام رمز آلأقواس المعكوفان.
+
+**تلميح:** حاول النظر إلى المثال أعلاه إذا كنت عالق.
+
+# --hints--
+
+يجب أن يحتوي متغير `thirdLetterOfLastName` على قيمة `v`.
+
+```js
+assert(thirdLetterOfLastName === 'v');
+```
+
+يجب عليك استخدام رمز آلأقواس المعكوفان.
+
+```js
+assert(code.match(/thirdLetterOfLastName\s*=\s*lastName\s*\[\s*\d\s*\]/));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(v){return v;})(thirdLetterOfLastName);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const lastName = "Lovelace";
+
+// Only change code below this line
+const thirdLetterOfLastName = lastName; // Change this line
+```
+
+# --solutions--
+
+```js
+const lastName = "Lovelace";
+const thirdLetterOfLastName = lastName[2];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-to-last-character-in-a-string.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-to-last-character-in-a-string.md
new file mode 100644
index 00000000000..d1054668e31
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-bracket-notation-to-find-the-nth-to-last-character-in-a-string.md
@@ -0,0 +1,68 @@
+---
+id: bd7123c9c452eddfaeb5bdef
+title: استخدم رمز آلأقواس المعكوفان للعثور على حرف معين قبل الأخر في مقطع
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cw4vkh9'
+forumTopicId: 18344
+dashedName: use-bracket-notation-to-find-the-nth-to-last-character-in-a-string
+---
+
+# --description--
+
+يمكنك استخدام نفس المبدأ الذي استخدمناه للتو لاسترداد الحرف الأخير في مقطع لاسترداد الحرف ما قبل أخر حرف.
+
+على سبيل المثال يمكنك الحصول على قيمة الحرف الثالث إلى الأخير من مقطع `const firstName = "Augusta"` باستخدام `firstName[firstName.length - 3]`
+
+مثال:
+
+```js
+const firstName = "Augusta";
+const thirdToLastLetter = firstName[firstName.length - 3];
+```
+
+سيحتوي `thirdToLastLetter` قيمة من المقطع `s`.
+
+# --instructions--
+
+استخدم <dfn>رمز آلأقواس المعكوفان</dfn> للعثور على الحرف الثاني إلى الأخير في مقطع `lastName`.
+
+**تلميح:** حاول النظر إلى المثال أعلاه إذا كنت عالق.
+
+# --hints--
+
+يجب أن ينتج `secondToLastLetterOfLastName` حرف `c`.
+
+```js
+assert(secondToLastLetterOfLastName === 'c');
+```
+
+يجب عليك استخدام `.length` للحصول على الحرف الثاني الأخير.
+
+```js
+assert(code.match(/\.length/g).length > 0);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+(function(v){return v;})(secondToLastLetterOfLastName);
+```
+
+## --seed-contents--
+
+```js
+// Setup
+const lastName = "Lovelace";
+
+// Only change code below this line
+const secondToLastLetterOfLastName = lastName; // Change this line
+```
+
+# --solutions--
+
+```js
+const lastName = "Lovelace";
+const secondToLastLetterOfLastName = lastName[lastName.length - 2];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
new file mode 100644
index 00000000000..0d2d17c3e8b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-conditional-logic-with-if-statements.md
@@ -0,0 +1,98 @@
+---
+id: cf1111c1c12feddfaeb3bdef
+title: استخدام المنطق الشرطي مع تعبيرات If
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cy87mf3'
+forumTopicId: 18348
+dashedName: use-conditional-logic-with-if-statements
+---
+
+# --description--
+
+تستخدم تعبيرات `if` لإخذ القرارات في الكود البرمجي. تخبر كلمة `if` لغة JavaScript بتنفيذ التعليمات البرمجية داخل الأقواس المتعرجة (curly braces) تحت شروط معينة, تكون معرفة في الأقواس (parentheses). تعرف هذه الشروط بالشروط المنطقية `Boolean` ويمكن أن تكون فقط صحيحة `true` أو خاطئة `false`.
+
+عندما يتم تقييم الشرط إلى صحيح `true`، يقوم البرنامج بتنفيذ التعبيرات البرمجية داخل الأقواس المتعرجة (curly braces). عندما يتم تقييم الشرط إلى خطأ `false`، التعليمات البرمجية داخل الأقواس المتعرجة (curly braces) لن تنفذ.
+
+**كود زائف (Pseudocode)**
+
+<blockquote>عندما (<i>تكون حالة الشرط true</i>) {<br>  <i>يتم تنفيذ التعبير</i><br>}</blockquote>
+
+**مثال**
+
+```js
+function test (myCondition) {
+  if (myCondition) {
+    return "It was true";
+  }
+  return "It was false";
+}
+
+test(true);
+test(false);
+```
+
+ينتج `test(true)` مقطع `It was true`، وينتج `test(false)` مقطع `It was false`.
+
+عندما يتم استدعاء `test` بقيمة `true`، ويكون تعبير `if` يقيّم `myCondition` لتتيقن من أنها `true` أو لا. نظرًا لأنه `true`، فإن الوظيفة تنتج `It was true`. عندما تتصل ب `test` بقيمة `false`، يكون `myCondition` بقيمة *غير* `true` ولم يتم تنفيذ العبارة الواردة في الأقواس المنحنية وتنتج الوظيفة `It was false`.
+
+# --instructions--
+
+أنشئ تعبير `if` داخل الوظيفة لينتج `Yes, that was true` إذا حالة الحجة `wasThatTrue` تكون `true` وتنتج `No, that was false` خلافا لذلك.
+
+# --hints--
+
+يجب أن تكون `trueOrFalse` وظيفة
+
+```js
+assert(typeof trueOrFalse === 'function');
+```
+
+يجب أن تنتج `trueOrFalse(true)` مقطع نصي
+
+```js
+assert(typeof trueOrFalse(true) === 'string');
+```
+
+يجب أن تنتج `trueOrFalse(false)` مقطع نصي
+
+```js
+assert(typeof trueOrFalse(false) === 'string');
+```
+
+يجب أن تنتج `trueOrFalse(true)` مقطع نصي `Yes, that was true`
+
+```js
+assert(trueOrFalse(true) === 'Yes, that was true');
+```
+
+يجب أن تنتج `trueOrFalse(false)` مقطع نصي `No, that was false`
+
+```js
+assert(trueOrFalse(false) === 'No, that was false');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function trueOrFalse(wasThatTrue) {
+  // Only change code below this line
+
+
+
+  // Only change code above this line
+
+}
+```
+
+# --solutions--
+
+```js
+function trueOrFalse(wasThatTrue) {
+  if (wasThatTrue) {
+    return "Yes, that was true";
+  }
+  return "No, that was false";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.md
new file mode 100644
index 00000000000..4253e56fa1a
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-multiple-conditional-ternary-operators.md
@@ -0,0 +1,96 @@
+---
+id: 587d7b7e367417b2b2512b21
+title: استخدام مشغلان (Ternary) مشروطان متعددان
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cyWJBT4'
+forumTopicId: 301179
+dashedName: use-multiple-conditional-ternary-operators
+---
+
+# --description--
+
+في التحدي السابق، كنت تستخدم مشغلاً شرطياً واحداً. يمكنك أيضًا تجميعهم معاً للتحقق من وجود ظروف متعددة.
+
+تستخدم الوظيفة التالية `else if`، و `if`، و `else` بيانات للتحقق من عدّة شروط:
+
+```js
+function findGreaterOrEqual(a, b) {
+  if (a === b) {
+    return "a and b are equal";
+  }
+  else if (a > b) {
+    return "a is greater";
+  }
+  else {
+    return "b is greater";
+  }
+}
+```
+
+ويمكن إعادة صياغة الوظيفة المذكورة أعلاه باستخدام متعهدين شرطيين متعددين:
+
+```js
+function findGreaterOrEqual(a, b) {
+  return (a === b) ? "a and b are equal" 
+    : (a > b) ? "a is greater" 
+    : "b is greater";
+}
+```
+
+ويعدّ من أفضل الممارسات تشكيل متعهدين شرطيين متعددين، بحيث يكون كل شرط على خط منفصل، كما هو مبين أعلاه. استخدام عدة مشغلين مشروطين دون إهدار مناسب قد يجعل من الصعب قراءة التعليمات البرمجية الخاصة بك. على سبيل المثال:
+
+```js
+function findGreaterOrEqual(a, b) {
+  return (a === b) ? "a and b are equal" : (a > b) ? "a is greater" : "b is greater";
+}
+```
+
+# --instructions--
+
+في وظيفة `checkSign`، استخدام العديد من المشغلين الشرطيين - باتباع التنسيق الموصى به المستخدم في `findGreaterOrEqual` - للتحقق مما إذا كان الرقم إيجابياً، سلبي أو صفر. يجب أن ينتج الوظيفة `positive`, أو `negative`, أو `zero`.
+
+# --hints--
+
+يجب أن يستخدم `checkSign` مشغلين مشروطين متعددين
+
+```js
+assert(/.+?\s*?\?\s*?.+?\s*?:\s*?.+?\s*?\?\s*?.+?\s*?:\s*?.+?/gi.test(code));
+```
+
+يجب أن ينتج `checkSign(10)` مقطع `positive`. هذا يعني أن الكتابة بالأحرف الكبيرة (capitalization) شيئ مؤثر
+
+```js
+assert(checkSign(10) === 'positive');
+```
+
+يجب أن ينتج `checkSign(-12)` مقطع `negative`. هذا يعني أن الكتابة بالأحرف الكبيرة (capitalization) شيئ مؤثر
+
+```js
+assert(checkSign(-12) === 'negative');
+```
+
+يجب أن ينتج `checkSign(0)` مقطع `zero`. هذا يعني أن الكتابة بالأحرف الكبيرة (capitalization) شيئ مؤثر
+
+```js
+assert(checkSign(0) === 'zero');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function checkSign(num) {
+
+}
+
+checkSign(10);
+```
+
+# --solutions--
+
+```js
+function checkSign(num) {
+  return (num > 0) ? 'positive' : (num < 0) ? 'negative' : 'zero';
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md
new file mode 100644
index 00000000000..4fe4ea0c029
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-countdown.md
@@ -0,0 +1,99 @@
+---
+id: 5cd9a70215d3c4e65518328f
+title: استخدم التكرار لإنشاء العد التنازلي (Use Recursion to Create a Countdown)
+challengeType: 1
+forumTopicId: 305925
+dashedName: use-recursion-to-create-a-countdown
+---
+
+# --description--
+
+في <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/replace-loops-using-recursion" target="_blank" rel="noopener noreferrer nofollow">تحدي سابق</a>، تعلمت كيفية استخدام التكرار لاستبدال حلقة `for`. الآن، أنطر إلى وظيفة أكثر تعقيدا تنتج قائمة من الأعداد الصحيحة المتتالية بدءاً من `1` إلى الرقم الذي تم تمريره إلى الوظيفة.
+
+كما ذكر في التحدي السابق، سيكون هناك <dfn>base case (حالة أساسية)</dfn>. الحالة أساسية تخبر الوظيفة المكررة في أي حالة لا تحتاج إلى استدعاء نفسها مرة أخرى. وهذه حالة بسيطة تكون فيها القيمة المنتجة معروفة فعلًا. سيكون هناك أيضًا <dfn>recursive call (استدعاء متكرر)</dfn> الذي ينفذ الوظيفة الأصلية بحجج مختلفة. إذا كانت الوظيفة مكتوبة بشكل صحيح، سيتم الوصول إلى الحالة أساسية في النهاية.
+
+على سبيل المثال، قل أنك تريد كتابة وظيفة مكررة تُرجع قائمة تحتوي على الأعداد من `1` إلى `n`. هذه الوظيفة ستحتاج إلى قَبُول حجة هو `n`، الذي يمثل الرقم النهائي. ثم ستحتاج إلى استدعاء نفسها مع قيم أصغر تدريجياً من `n` حتى تصل إلى `1`. يمكنك كتابة الوظيفة على النحو التالي:
+
+```javascript
+function countup(n) {
+  if (n < 1) {
+    return [];
+  } else {
+    const countArray = countup(n - 1);
+    countArray.push(n);
+    return countArray;
+  }
+}
+console.log(countup(5));
+```
+
+سيتم عرض القيمة `[1, 2, 3, 4, 5]` في الوحدة التحكم.
+
+في البداية، يبدو هذا غير بديهي لأن قيمة `n` *تنخفض*، لكن القيم في القائمة النهائية *تزداد*. ويحدث هذا لأن الزيادة تحدث في نهاية، بعد تفعيل المتكررة. فعند النقطة التي يتم فيها إضافة `n` إلى القائمة، يكون قد تم تقييم `countup(n - 1)` فعلًا وتم إعادة `[1, 2, ..., n - 1]`.
+
+# --instructions--
+
+لقد عرفنا وظيفة تسمى `countdown` مع حجة واحدة (`n`). يجب أن تستخدم الوظيفة التكرار لإعادة قائمة تحتوي على الأعداد من `n` إلى `1` استنادًا إلى حجة وهي `n`. إذا تم تفعيل الوظيفة بعدد أقل من 1، يجب أن تنتج قائمة فارغة. على سبيل المثال، استدعاء هذه الوظيفة مع `n = 5` يجب أن تنتج القائمة التالية `[5, 4, 3, 2, 1]`. يجب أن تستخدم الوظيفة التكرار بواسطة تفعيل نفسها، ويجب ألا تستخدم الحلقات من أي نوع.
+
+# --hints--
+
+يجب أن ينتج `countdown(-1)` قائمة فارغة.
+
+```js
+assert.isEmpty(countdown(-1));
+```
+
+يجب أن ينتج `countdown(10)` قائمة `[10, 9, 8, 7, 6, 5, 4, 3, 2, 1]`
+
+```js
+assert.deepStrictEqual(countdown(10), [10, 9, 8, 7, 6, 5, 4, 3, 2, 1]);
+```
+
+يجب أن ينتج `countdown(5)` قائمة `[5, 4, 3, 2, 1]`
+
+```js
+assert.deepStrictEqual(countdown(5), [5, 4, 3, 2, 1]);
+```
+
+لا ينبغي أن يعتمد الكود الخاص بك على أي نوع من الحلَقات سواء (`for`, أو `while`, أو وظائف ذو مستوي عالى التجريد مثل `forEach`, أو `map`, أو `filter`, أو `reduce`).
+
+```js
+assert(
+  !code.match(/for|while|forEach|map|filter|reduce/g)
+);
+```
+
+يجب عليك استخدام التكرار لحل هذه المشكلة.
+
+```js
+assert(
+  countdown.toString().match(/countdown\s*\(.+\)/)
+);
+```
+
+لا ينبغي استخدام المتغيرات العالمية (Global variables) للتخزين المؤقت القائمة (array).
+
+```js
+countdown(1)
+assert.deepStrictEqual(countdown(5), [5, 4, 3, 2, 1]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Only change code below this line
+function countdown(n){
+  return;
+}
+// Only change code above this line
+```
+
+# --solutions--
+
+```js
+function countdown(n){
+   return n < 1 ? [] : [n].concat(countdown(n - 1));
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers.md
new file mode 100644
index 00000000000..1f582ecbcfa
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-recursion-to-create-a-range-of-numbers.md
@@ -0,0 +1,88 @@
+---
+id: 5cc0bd7a49b71cb96132e54c
+title: استخدم التكرار لإنشاء نطاق من الأرقام (Use Recursion to Create a Range of Numbers)
+challengeType: 1
+forumTopicId: 301180
+dashedName: use-recursion-to-create-a-range-of-numbers
+---
+
+# --description--
+
+مع الاستمرار في التحدي السابق، نوفر لك فرصة لحل مشكلة أخرى باستخدام الوظيفة المتكررة.
+
+# --instructions--
+
+لقد عرفنا وظيفة تسمى `rangeOfNumbers` مع اثنين من الحجج. يجب أن تنتج الوظيفة قيمة القائمة من الأعداد الصحيحة التي تبدأ بعدد يمثله حجة وهي `startNum` وتنتهي بعدد يمثله حجة آخرة وهي `endNum`. سيكون رقم البداية دائماً أقل من أو يساوي رقم النهاية. يجب أن تستخدم الوظيفة التكرار بواسطة تفعيل نفسها، ويجب ألا تستخدم الحلَقات من أي نوع. يجب أن تعمل أيضا في الحالات التي يكون فيها كل من `startNum` و `endNum` متماثلين.
+
+# --hints--
+
+يجب أن تنتج الوظيفة قيمة القائمة.
+
+```js
+assert(Array.isArray(rangeOfNumbers(5, 10)));
+```
+
+لا ينبغي أن يعتمد الكود الخاص بك على أي نوع من الحلَقات سواءً (`for`, أو `while`, أو وظائف ذو مستوي عالى التجريد مثل `forEach`, أو `map`, أو `filter`, أو `reduce`).
+
+```js
+assert(
+  !code.match(/for|while|forEach|map|filter|reduce/g)
+);
+```
+
+يجب أن يستخدم `rangeOfNumbers` التكرار (استدعاء نفسه) لحل هذا التحدي.
+
+```js
+assert(
+  rangeOfNumbers.toString().match(/rangeOfNumbers\s*\(.+\)/)
+);
+```
+
+يجب أن ينتج `rangeOfNumbers(1, 5)` قائمة `[1, 2, 3, 4, 5]`.
+
+```js
+assert.deepStrictEqual(rangeOfNumbers(1, 5), [1, 2, 3, 4, 5]);
+```
+
+يجب أن ينتج `rangeOfNumbers(6, 9)` قائمة `[6, 7, 8, 9]`.
+
+```js
+assert.deepStrictEqual(rangeOfNumbers(6, 9), [6, 7, 8, 9]);
+```
+
+يجب أن ينتج `rangeOfNumbers(4, 4)` قائمة `[4]`.
+
+```js
+assert.deepStrictEqual(rangeOfNumbers(4, 4), [4]);
+```
+
+لا ينبغي استخدام المتغيرات العالمية (Global variables) للتخزين المؤقت القائمة (array).
+
+```js
+rangeOfNumbers(1, 3)
+assert.deepStrictEqual(rangeOfNumbers(6, 9), [6, 7, 8, 9]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function rangeOfNumbers(startNum, endNum) {
+  return [];
+};
+```
+
+# --solutions--
+
+```js
+function rangeOfNumbers(startNum, endNum) {
+  if (endNum - startNum === 0) {
+    return [startNum];
+  } else {
+    const numbers = rangeOfNumbers(startNum, endNum - 1);
+    numbers.push(endNum);
+    return numbers;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-conditional-ternary-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-conditional-ternary-operator.md
new file mode 100644
index 00000000000..b3b080d7a84
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-conditional-ternary-operator.md
@@ -0,0 +1,84 @@
+---
+id: 587d7b7e367417b2b2512b24
+title: استخدام مشغل (Ternary) المشروط
+challengeType: 1
+forumTopicId: 301181
+dashedName: use-the-conditional-ternary-operator
+---
+
+# --description--
+
+<dfn>conditional operator (المشغل الشرطي)</dfn>، الذي يسمى أيضًا <dfn>ternary operator (المشغل الثلاثي)</dfn>، يمكن استخدامه كبديل من if-else مكون من سطر واحد.
+
+يكون تركيب الجملة كذلك `a ? b : c`، حيث `a` هو الشرط، ويكون `b` الكود المراد تشغيله عندما يرجع الشرط `true`، ويكون `c` الكود المراد تشغيله عندما يرجع الشرط `false`.
+
+الوظيفة التالية تستخدم تعبير `if/else` للتحقق من شرط:
+
+```js
+function findGreater(a, b) {
+  if(a > b) {
+    return "a is greater";
+  }
+  else {
+    return "b is greater or equal";
+  }
+}
+```
+
+ويمكن إعادة صياغة الوظيفة المذكورة أعلاه باستخدام المشغل المشروط:
+
+```js
+function findGreater(a, b) {
+  return a > b ? "a is greater" : "b is greater or equal";
+}
+```
+
+# --instructions--
+
+استخدم المشغل المشروط في الوظيفة اسمها `checkEqual` للتحقق مما إذا كان رقمان متساويان أم لا. يجب أن تنتج الوظيفة مقطع `Equal` أو مقطع `Not Equal`.
+
+# --hints--
+
+يجب أن يستخدم `checkEqual` المشغل مشروط
+
+```js
+assert(/.+?\s*?\?\s*?.+?\s*?:\s*?.+?/.test(code));
+```
+
+يجب أن ينتج `checkEqual(1, 2)` مقطع الآتي: `Not Equal`
+
+```js
+assert(checkEqual(1, 2) === 'Not Equal');
+```
+
+يجب أن ينتج `checkEqual(1, 1)` مقطع الآتي: `Equal`
+
+```js
+assert(checkEqual(1, 1) === 'Equal');
+```
+
+يجب أن ينتج `checkEqual(1, -1)` مقطع الآتي: `Not Equal`
+
+```js
+assert(checkEqual(1, -1) === 'Not Equal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function checkEqual(a, b) {
+
+}
+
+checkEqual(1, 2);
+```
+
+# --solutions--
+
+```js
+function checkEqual(a, b) {
+  return a === b ? "Equal" : "Not Equal";
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function-with-a-radix.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function-with-a-radix.md
new file mode 100644
index 00000000000..d8d905eb38b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function-with-a-radix.md
@@ -0,0 +1,82 @@
+---
+id: 587d7b7e367417b2b2512b22
+title: استخدام وظيفة parseInt مع Radix
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/c6K4Kh3'
+forumTopicId: 301182
+dashedName: use-the-parseint-function-with-a-radix
+---
+
+# --description--
+
+تحلل وظيفة `parseInt()` مقطع وتعيد منه عدداً صحيحاً. وهو يأخذ حجة Radix ثاني الذي يحدد أساس الرقم في مقطع. يمكن أن يكون Radix عدداً صحيحاً بين 2 و 36.
+
+يكون استدعاء الوظيفة كالتالي:
+
+```js
+parseInt(string, radix);
+```
+
+إليك مثال:
+
+```js
+const a = parseInt("11", 2);
+```
+
+يشير Radix أن `11` هو رقم في النظام عد ثنائي، أو أساس 2. هذا المثال يحول المقطع المكون من `11` إلى عدد صحيح `3`.
+
+# --instructions--
+
+استخدم `parseInt()` في وظيفة اسمها `convertToInteger` بحيث تحول الرقم الثنائي إلى عدد صحيح وتعيده.
+
+# --hints--
+
+يجب أن يستخدم `convertToInteger` وظيفة `parseInt()`
+
+```js
+assert(/parseInt/g.test(code));
+```
+
+يجب أن ينتج `convertToInteger("10011")` رقماً
+
+```js
+assert(typeof convertToInteger('10011') === 'number');
+```
+
+يجب أن ينتج `convertToInteger("10011")` رَقَم 19
+
+```js
+assert(convertToInteger('10011') === 19);
+```
+
+يجب أن ينتج `convertToInteger("111001")` رَقَم 57
+
+```js
+assert(convertToInteger('111001') === 57);
+```
+
+يجب أن يرجع `convertToInteger("JamesBond")` كلمة `NaN`
+
+```js
+assert.isNaN(convertToInteger('JamesBond'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function convertToInteger(str) {
+
+}
+
+convertToInteger("10011");
+```
+
+# --solutions--
+
+```js
+function convertToInteger(str) {
+  return parseInt(str, 2);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function.md
new file mode 100644
index 00000000000..b94905c0c00
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/use-the-parseint-function.md
@@ -0,0 +1,74 @@
+---
+id: 587d7b7e367417b2b2512b23
+title: استخدام وظيفة تحليل العدد الصحيح (Use the parseInt Function)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cm83LSW'
+forumTopicId: 301183
+dashedName: use-the-parseint-function
+---
+
+# --description--
+
+تحلل وظيفة `parseInt()` مقطع وتعيد منه عدداً صحيحاً. إليك مثال:
+
+```js
+const a = parseInt("007");
+```
+
+هذا المثال يحول مقطع المكون من `007` إلى العدد الصحيح `7`. إذا كان الرمز الأول في مقطع لا يمكن تحويله إلى عدد، فإنه يرجع `NaN`.
+
+# --instructions--
+
+استخدم `parseInt()` في وظيفة اسمها `convertToInteger` تقبل حجة اسمها `str` هي مقطع، تحوله إلى عدد صحيح وترجعه.
+
+# --hints--
+
+يجب أن يستخدم `convertToInteger` وظيفة `parseInt()`
+
+```js
+assert(/parseInt/g.test(code));
+```
+
+يجب أن ينتج `convertToInteger("56")` رقماً
+
+```js
+assert(typeof convertToInteger('56') === 'number');
+```
+
+يجب أن ينتج `convertToInteger("56")` رَقَم 56
+
+```js
+assert(convertToInteger('56') === 56);
+```
+
+يجب أن ينتج `convertToInteger("77")` رَقَم 77
+
+```js
+assert(convertToInteger('77') === 77);
+```
+
+يجب أن يرجع `convertToInteger("JamesBond")` كلمة `NaN`
+
+```js
+assert.isNaN(convertToInteger('JamesBond'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function convertToInteger(str) {
+
+}
+
+convertToInteger("56");
+```
+
+# --solutions--
+
+```js
+function convertToInteger(str) {
+  return parseInt(str);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md
new file mode 100644
index 00000000000..7a847136684
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/using-objects-for-lookups.md
@@ -0,0 +1,155 @@
+---
+id: 56533eb9ac21ba0edf2244ca
+title: استخدام الكائنات للبحث (Using Objects for Lookups)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cdBk8sM'
+forumTopicId: 18373
+dashedName: using-objects-for-lookups
+---
+
+# --description--
+
+يمكن اعتبار الكائنات كمخزن بطريقة هُوِيَّة/قيمة، مثل القاموس. إذا كانت لديك بيانات جدولية، فيمكنك استخدام كائن للبحث عن القيم بدلاً من عبارة `switch` أو تسلسل `if/else`. هذا مفيد للغاية عندما تعرف أن بيانات الإدخال الخاصة بك محدودة بمدى معين.
+
+وفيما يلي مثال على بحث أبجدي عكسي بسيط:
+
+```js
+const alpha = {
+  1:"Z",
+  2:"Y",
+  3:"X",
+  4:"W",
+  ...
+  24:"C",
+  25:"B",
+  26:"A"
+};
+
+const thirdLetter = alpha[2];
+const lastLetter = alpha[24];
+
+const value = 2;
+const valueLookup = alpha[value];
+```
+
+يكون `thirdLetter` مقطع `Y`، ويكون `lastLetter` مقطع `C`، ويكون `valueLookup` مقطع `Y`.
+
+# --instructions--
+
+حوّل تعبير switch إلى كائن يسمى `lookup`. استخدمه للبحث عن `val` وتعيين المقطع المرتبط بمتغير `result`.
+
+# --hints--
+
+يجب أن تساوي `phoneticLookup("alpha")` مقطع `Adams`
+
+```js
+assert(phoneticLookup('alpha') === 'Adams');
+```
+
+يجب أن تساوي `phoneticLookup("bravo")` مقطع `Boston`
+
+```js
+assert(phoneticLookup('bravo') === 'Boston');
+```
+
+يجب أن تساوي `phoneticLookup("charlie")` مقطع `Chicago`
+
+```js
+assert(phoneticLookup('charlie') === 'Chicago');
+```
+
+يجب أن تساوي `phoneticLookup("delta")` مقطع `Denver`
+
+```js
+assert(phoneticLookup('delta') === 'Denver');
+```
+
+يجب أن تساوي `phoneticLookup("echo")` مقطع `Easy`
+
+```js
+assert(phoneticLookup('echo') === 'Easy');
+```
+
+يجب أن تساوي `phoneticLookup("foxtrot")` مقطع `Frank`
+
+```js
+assert(phoneticLookup('foxtrot') === 'Frank');
+```
+
+يجب أن تساوي `phoneticLookup("")` كلمة `undefined`
+
+```js
+assert(typeof phoneticLookup('') === 'undefined');
+```
+
+لا يجب عليك تعديل تعبير `return`
+
+```js
+assert(code.match(/return\sresult;/));
+```
+
+لا يجب عليك استخدام تعبيرات `case`, أو `switch`, أو `if`
+
+```js
+assert(
+  !/case|switch|if/g.test(code.replace(/([/]{2}.*)|([/][*][^/*]*[*][/])/g, ''))
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Setup
+function phoneticLookup(val) {
+  let result = "";
+
+  // Only change code below this line
+  switch(val) {
+    case "alpha":
+      result = "Adams";
+      break;
+    case "bravo":
+      result = "Boston";
+      break;
+    case "charlie":
+      result = "Chicago";
+      break;
+    case "delta":
+      result = "Denver";
+      break;
+    case "echo":
+      result = "Easy";
+      break;
+    case "foxtrot":
+      result = "Frank";
+  }
+
+  // Only change code above this line
+  return result;
+}
+
+phoneticLookup("charlie");
+```
+
+# --solutions--
+
+```js
+function phoneticLookup(val) {
+  let result = "";
+
+  const lookup = {
+    alpha: "Adams",
+    bravo: "Boston",
+    charlie: "Chicago",
+    delta: "Denver",
+    echo: "Easy",
+    foxtrot: "Frank"
+  };
+
+  result = lookup[val];
+
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md
new file mode 100644
index 00000000000..7fcd7baa7d7
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/word-blanks.md
@@ -0,0 +1,105 @@
+---
+id: 56533eb9ac21ba0edf2244bb
+title: فراغات الكلمة (Word Blanks)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/caqn8zuP'
+forumTopicId: 18377
+dashedName: word-blanks
+---
+
+# --description--
+
+لقد تم تزويدك بجمل مع بعض الكلمات الناقصة، مثل الأسماء و الأفعال و النعوت و الظروف. ثم تملأ القطع المفقودة بكلمات من اختيارك بطريقة تجعل الجملة المكتملة منطقية.
+
+فكر في هذه الجملة - كانت حقاً **\_\_\_\_\_**، ونحن **\_\_\_\_** أيضا **\_\_\_\_\_**. هذه الجملة لها ثلاث قطع مفقودة - نعمة و فعل و ظرف، ويمكنك إضافة كلمات من اختيارك لإكمالها. ويمكن بعد ذلك أن نحيل الجملة المستكملة إلى متغير (variable) على النحو التالي:
+
+```js
+const sentence = "It was really " + "hot" + ", and we " + "laughed" + " ourselves " + "silly" + ".";
+```
+
+# --instructions--
+
+في هذا التحدي، نقدم لكم اسماً وفعلاً ووصفاً وظرفاً. تحتاج إلى تشكيل جملة كاملة باستخدام كلمات من اختيارك، إلى جانب الكلمات التي نقدمها.
+
+سوف تحتاج إلى استخدام مشغل يربط المقاطع (string concatenation operator) `+` لبناء مقطع (string) جديدة، باستخدام المتغيرات المتاحة: `myNoun`، و `myAdjective`، و `myVerb`، و `myAdverb`. بعد ذلك عيين مقطع الذي تم تشكيلها إلى متغير `wordBlanks`. لا يجب عليك تغيير الكلمات المسندة إلى متغيرات.
+
+سوف تحتاج أيضا إلى حساب المسافات الموجودة في مقطع، بحيث تحتوي الجملة الأخيرة على مسافات بين جميع الكلمات. ينبغي أن تكون النتيجة الجملة الكاملة.
+
+# --hints--
+
+يجب أن تكون `wordBlanks` مقطع.
+
+```js
+assert(typeof wordBlanks === 'string');
+```
+
+لا يجب عليك تغيير القيم المعينة إلى `myNoun` أو `myVerb`, أو `myAdjective`, أو `myAdverb`.
+
+```js
+assert(
+  myNoun === 'dog' &&
+    myVerb === 'ran' &&
+    myAdjective === 'big' &&
+    myAdverb === 'quickly'
+);
+```
+
+يجب ألا تستخدم القيم `dog` أو `ran`, أو `big`, أو `quickly` لإنشاء `wordBlanks`.
+
+```js
+const newCode = removeAssignments(code);
+assert(
+  !/dog/.test(newCode) &&
+    !/ran/.test(newCode) &&
+    !/big/.test(newCode) &&
+    !/quickly/.test(newCode)
+);
+```
+
+يجب أن يحتوي `wordBlanks` على جميع الكلمات المخصصة للمتغيرات `myNoun`, و `myVerb`, و `myAdjective`, و `myAdverb` المفصولة برموز ليست بكلمات (و أي كلمات إضافية من اختيارك).
+
+```js
+assert(
+  /\bdog\b/.test(wordBlanks) &&
+    /\bbig\b/.test(wordBlanks) &&
+    /\bran\b/.test(wordBlanks) &&
+    /\bquickly\b/.test(wordBlanks)
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const removeAssignments = str => str
+  .replace(/myNoun\s*=\s*["']dog["']/g, '')
+  .replace(/myAdjective\s*=\s*["']big["']/g, '')
+  .replace(/myVerb\s*=\s*["']ran["']/g, '')
+  .replace(/myAdverb\s*=\s*["']quickly["']/g, '');
+```
+
+## --seed-contents--
+
+```js
+const myNoun = "dog";
+const myAdjective = "big";
+const myVerb = "ran";
+const myAdverb = "quickly";
+
+// Only change code below this line
+const wordBlanks = ""; // Change this line
+// Only change code above this line
+```
+
+# --solutions--
+
+```js
+const myNoun = "dog";
+const myAdjective = "big";
+const myVerb = "ran";
+const myAdverb = "quickly";
+
+let wordBlanks = "Once there was a " + myNoun + " which was very " + myAdjective + ". ";
+wordBlanks += "It " + myVerb + " " + myAdverb + " around the yard.";
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions.md
new file mode 100644
index 00000000000..b5c0f3a7d9d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/basic-javascript/write-reusable-javascript-with-functions.md
@@ -0,0 +1,101 @@
+---
+id: 56bbb991ad1ed5201cd392cf
+title: كتابة JavaScript قابل لإعادة الاستخدام مع الوظائف (Write Reusable JavaScript with Functions)
+challengeType: 1
+videoUrl: 'https://scrimba.com/c/cL6dqfy'
+forumTopicId: 18378
+dashedName: write-reusable-javascript-with-functions
+---
+
+# --description--
+
+في JavaScript، يمكننا تقسيم الكود إلى أجزاء قابلة لإعادة الاستخدام تسمى <dfn>وظائف</dfn>.
+
+إليك مثال لوظيفة:
+
+```js
+function functionName() {
+  console.log("Hello World");
+}
+```
+
+يمكنك استدعاء أو <dfn>تفعيل</dfn> هذه الوظيفة باستخدام اسمه متبوعا بقوسين، هكذا: `functionName();` في كل مرة يستدعي الوظيفة، ستطبع الرسالة `Hello World` في وحدة التحكم. سيتم تنفيذ الكود بين الأقواس المتعرجة في كل مرة يستدعي الوظيفة.
+
+# --instructions--
+
+<ol>
+  <li>
+    أنشئ وظيفة تسمى <code>reusableFunction</code> الذي يطبع مقطع <code>Hi World</code> إلى وحدة التحكم.
+  </li>
+  <li>
+    أستدعي الوظيفة.
+  </li>
+</ol>
+
+# --hints--
+
+يجب أن تكون `reusableFunction` وظيفة.
+
+```js
+assert(typeof reusableFunction === 'function');
+```
+
+إذا تم استدعاء `reusableFunction`، فيجب طباعة مقطع `Hi World` علي وحدة التحكم.
+
+```js
+assert(testConsole());
+```
+
+يجب عليك استدعاء `reusableFunction` بمجرد تعريفها.
+
+```js
+const functionStr = reusableFunction && __helpers.removeWhiteSpace(reusableFunction.toString());
+const codeWithoutFunction = __helpers.removeWhiteSpace(code).replace(/reusableFunction\(\)\{/g, '');
+assert(/reusableFunction\(\)/.test(codeWithoutFunction));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+
+function testConsole() {
+  var logOutput = "";
+  var originalConsole = console;
+  var nativeLog = console.log;
+  var hiWorldWasLogged = false;
+  console.log = function (message) {
+    if(message === 'Hi World')  {
+      console.warn(message)
+      hiWorldWasLogged = true;
+    }
+    if(message && message.trim) logOutput = message.trim();
+    if(nativeLog.apply) {
+      nativeLog.apply(originalConsole, arguments);
+    } else {
+      var nativeMsg = Array.prototype.slice.apply(arguments).join(' ');
+      nativeLog(nativeMsg);
+    }
+  };
+  reusableFunction();
+  console.log = nativeLog;
+  return hiWorldWasLogged;
+}
+
+```
+
+## --seed-contents--
+
+```js
+
+```
+
+# --solutions--
+
+```js
+function reusableFunction() {
+  console.log("Hi World");
+}
+reusableFunction();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-arguments-passed-in-the-wrong-order-when-calling-a-function.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-arguments-passed-in-the-wrong-order-when-calling-a-function.md
new file mode 100644
index 00000000000..fb40b0f7931
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-arguments-passed-in-the-wrong-order-when-calling-a-function.md
@@ -0,0 +1,57 @@
+---
+id: 587d7b85367417b2b2512b3a
+title: Catch Arguments Passed in the Wrong Order When Calling a Function
+challengeType: 1
+forumTopicId: 301184
+dashedName: catch-arguments-passed-in-the-wrong-order-when-calling-a-function
+---
+
+# --description--
+
+متابعة للمناقشة حول استدعاد الـ functions، الخطأ التالي الذي يجب مراقبته هو عندما يتم تقديم الـ function's arguments بالترتيب غير الصحيح. إذا كانت الـ arguments مختلفة الأنواع، مثل الـ function التي تتوقع array وعدد صحيح، فمن المرجح أن يؤدي ذلك إلى خطأ في وقت التشغيل. إذا كانت الـ arguments هي من نفس النوع (كلها أعداد، على سبيل المثال)، فلن يكون لمنطق الكود أي معنى. تأكد من تقديم جميع الـ arguments المطلوبة، بالترتيب الصحيح لتجنب هذه المشاكل.
+
+# --instructions--
+
+ترفع الدالة `raiseToPower` الأساس (base) إلى الأس (exponent). لسوء الحظ، لم يتم استدعائها بشكل صحيح - أصلح الكود حتي تكون قيمة `power` هي 8 المتوقعة.
+
+# --hints--
+
+الكود الخاص بك يجب أن يصلح المتغير `power` بحيث يساوي 2 مرفوعًا إلى الاس الثالث، وليس 3 مرفوعًا إلى الأس الثاني.
+
+```js
+assert(power == 8);
+```
+
+يجب أن يستخدم الكود الخاص بك الترتيب الصحيح للـ arguments لاستدعاء الدالة `raiseToPower`.
+
+```js
+assert(code.match(/raiseToPower\(\s*?base\s*?,\s*?exp\s*?\);/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function raiseToPower(b, e) {
+  return Math.pow(b, e);
+}
+
+let base = 2;
+let exp = 3;
+let power = raiseToPower(exp, base);
+console.log(power);
+```
+
+# --solutions--
+
+```js
+function raiseToPower(b, e) {
+ return Math.pow(b, e);
+}
+
+let base = 2;
+let exp = 3;
+let power = raiseToPower(base, exp);
+console.log(power);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-missing-open-and-closing-parenthesis-after-a-function-call.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-missing-open-and-closing-parenthesis-after-a-function-call.md
new file mode 100644
index 00000000000..f2d3ea8dff5
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-missing-open-and-closing-parenthesis-after-a-function-call.md
@@ -0,0 +1,69 @@
+---
+id: 587d7b85367417b2b2512b39
+title: إدراك أقواس الفتح والإغلاق المفقودة بعد استدعاء دالة (Catch Missing Open and Closing Parenthesis After a Function Call)
+challengeType: 1
+forumTopicId: 301185
+dashedName: catch-missing-open-and-closing-parenthesis-after-a-function-call
+---
+
+# --description--
+
+عندما لا تأخذ الfunction أو الmethod أي arguments، قد تنسى إدراج أقواس الفتح والإغلاق (فارغة) عند استدعائها. غالباً ما يتم حفظ نتيجة استدعاء function في variable لاستخدام آخر في الكود الخاص بك. يمكن اكتشاف هذا الخطأ عن طريق تسجيل قيم الvariables (أو أنواعها) إلى الconsole وملاحظة أن القيمة المعينة للvariable هي function reference (مرجع دالة)، بدلاً من القيمة المتوقعة وهي ناتج تنفيذ ال الfunction.
+
+فتختلف المتغيرات الواردة في المثال التالي:
+
+```js
+function myFunction() {
+  return "You rock!";
+}
+let varOne = myFunction;
+let varTwo = myFunction();
+```
+
+هنا `varOne` هو الـ function المسماه `myFunction`، و `varTwo` هو الـ string المكون من `You rock!`.
+
+# --instructions--
+
+أصلح الـ code بحيث يتم تعيين الـ variable المسمى `result` القيمة العائدة من استعداء الـ function المسماه `getNine`.
+
+# --hints--
+
+يجب أن يصلح الـ code الـ variable المسمى `result` حيث يتم تعيينه الرقم الذي يعيده الـ function المسمى `getNine`.
+
+```js
+assert(result == 9);
+```
+
+يجب أن يستدعي الكود الخاص بك دالة `getNine`.
+
+```js
+assert(code.match(/getNine\(\)/g).length == 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function getNine() {
+  let x = 6;
+  let y = 3;
+  return x + y;
+}
+
+let result = getNine;
+console.log(result);
+```
+
+# --solutions--
+
+```js
+function getNine() {
+ let x = 6;
+ let y = 3;
+ return x + y;
+}
+
+let result = getNine();
+console.log(result);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
new file mode 100644
index 00000000000..5a4692222eb
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-misspelled-variable-and-function-names.md
@@ -0,0 +1,69 @@
+---
+id: 587d7b84367417b2b2512b35
+title: إدراك الأخطاء الإملائية في أسماء المتغيرات والوظيفة (Catch Misspelled Variable and Function Names)
+challengeType: 1
+forumTopicId: 301186
+dashedName: catch-misspelled-variable-and-function-names
+---
+
+# --description--
+
+يكونا `console.log()` و `typeof` الطرقتان الرئيستان للتحقق من القيم وأنواعها في الكود. الآن حان الوقت للدخول في الأشكال الشائعة التي تأخذها الأخطاء (bugs). أحد المشاكل ويقع فيه بالذات الكتبة السريعين هو الخطأ الإملائي المتواضع (humble spelling error).
+
+الأحرف المبدلة، المفقودة، أو الأحرف كبيرة بالخطأ (mis-capitalized) في اسم متغير أو وظيفة سيجعل المتصفح يبحث عن شيء غير موجود - ويبلغ عن خطأ مرجعي (reference error). في لغة JavaScript أسماء المتغير والوظائف هي حساسة لحالة الأحرف (case-sensitive).
+
+# --instructions--
+
+أصحّح الخطأين الإملائيان في الكود بحيث تجري العملية الحسابية `netWorkingCapital` بشكل صحيح.
+
+# --hints--
+
+تحقق من أملاء المتغيرات المستخدمَين في حساب netWorkingCapital، يجب أن يظهر النص الآتي "Net working capital is: 2" في وحدة التحكم.
+
+```js
+assert(netWorkingCapital === 2);
+```
+
+لا ينبغي أن تكون هناك استخدامات للمتغيرات تملى بشكل خاطئ في الكود.
+
+```js
+assert(!code.match(/recievables/g));
+```
+
+يجب تعريف متغير باسم `receivables` واستخدامه بشكل صحيح في الكود.
+
+```js
+assert(code.match(/receivables/g).length == 2);
+```
+
+لا ينبغي أن تكون هناك استخدامات للمتغيرات تملى بشكل خاطئ في الكود.
+
+```js
+assert(!code.match(/payable;/g));
+```
+
+يجب تعريف متغير باسم `payables` واستخدامه بشكل صحيح في الكود.
+
+```js
+assert(code.match(/payables/g).length == 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let receivables = 10;
+let payables = 8;
+let netWorkingCapital = recievables - payable;
+console.log(`Net working capital is: ${netWorkingCapital}`);
+```
+
+# --solutions--
+
+```js
+let receivables = 10;
+let payables = 8;
+let netWorkingCapital = receivables - payables;
+console.log(`Net working capital is: ${netWorkingCapital}`);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.md
new file mode 100644
index 00000000000..2fe24359cce
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-mixed-usage-of-single-and-double-quotes.md
@@ -0,0 +1,63 @@
+---
+id: 587d7b84367417b2b2512b37
+title: إدراك الاستخدام المختلط لعلامات التنصيص الفردية والزوجية (Catch Mixed Usage of Single and Double Quotes)
+challengeType: 1
+forumTopicId: 301188
+dashedName: catch-mixed-usage-of-single-and-double-quotes
+---
+
+# --description--
+
+يسمح JavaScript باستخدام كلا علامات التنصيص، الفردية (`'`) والزوجية (`"`) لتعريف مقطع. انتقاء أحد الخيارين هو تفضيل شخصي، مع بعض الاستثناءات.
+
+وجدود الخيارين مجدٍ عندما يحوي المقطع اختصارات أو نص آخر داخل علامات تنصيص. فقط كن حذراً من إغلاق المقطع مبكراً، مما يسبب خطأ في تركيب الجملة.
+
+فيما يلي بعض الأمثلة على خلط علامات التنصيص:
+
+```js
+const grouchoContraction = "I've had a perfectly wonderful evening, but this wasn't it.";
+const quoteInString = "Groucho Marx once said 'Quote me as saying I was mis-quoted.'";
+const uhOhGroucho = 'I've had a perfectly wonderful evening, but this wasn't it.';
+```
+
+أما الاثنان الأولان فهما صحيحان، ولكن الثالث غير صحيح.
+
+وبطبيعة الحال، لا بأس من الاستمرار على نوع واحد من علامات التنصيص. يمكنك التعامل مع علامات التنصيص داخل المقطع باستخدام رمز التحايل (`\`):
+
+```js
+const allSameQuotes = 'I\'ve had a perfectly wonderful evening, but this wasn\'t it.';
+```
+
+# --instructions--
+
+أصلح المقطع بحيث يستخدم علامات تنصيص مختلفة لقيمة `href` أو تحايل على علامات التنصيص الموجودة. حافظ على علامات التنصيص المزدوجة حول المقطع كُلََّه.
+
+# --hints--
+
+يجب أن يصلح الكود الخاص بك علامات التنصيص حول قيمة `href` وهي `#Home` إما بتغييرها أو معالجتها برمز التحايل (\).
+
+```js
+assert(code.match(/<a href=\s*?('|\\")#Home\1\s*?>/g));
+```
+
+يجب أن يحافظ الكود الخاص بك على علامات التنصيص المزدوجة حول المقطع كُلََّه.
+
+```js
+assert(code.match(/"<p>.*?<\/p>";/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let innerHtml = "<p>Click here to <a href="#Home">return home</a></p>";
+console.log(innerHtml);
+```
+
+# --solutions--
+
+```js
+let innerHtml = "<p>Click here to <a href=\"#Home\">return home</a></p>";
+console.log(innerHtml);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-off-by-one-errors-when-using-indexing.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-off-by-one-errors-when-using-indexing.md
new file mode 100644
index 00000000000..3c81d537b7c
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-off-by-one-errors-when-using-indexing.md
@@ -0,0 +1,93 @@
+---
+id: 587d7b86367417b2b2512b3b
+title: التقاط أخطاء يفتقد واحد (Off By One Errors) عند استخدام الترتيب
+challengeType: 1
+forumTopicId: 301189
+dashedName: catch-off-by-one-errors-when-using-indexing
+---
+
+# --description--
+
+<dfn>أخطاء يفتقد واحد</dfn> (يطلق عليه أحياناً OBOE) تظهر عندما تحاول استهداف ترتيب معين لمقطع أو قائمة (لتقسيم مقطع أو الوصول إليه)، أو عند محاولة تكرار ترتيب أكبر من الترتيب (indicies) الخاصة بهم. تبدأ ترتيب JavaScript عند الصفر، وليس عند واحد، مما يعني أن الترتيب الأخير هو دائما أقل من طول العنصر بواحد. إذا حاولت الوصول إلى ترتيب يساوي الطول، قد يقع خطأ "index out of range" مرجعي في البرنامَج أو يطبع `undefined`.
+
+عندما تستخدم طرق المقطع أو القائمة التي تأخذ نطاقات الترتيب كحجج، فمن المفيد قراءة الوثائق (documentation) وفهم ما إذا كانت شاملة (العنصر في الترتيب المحدد هو جزء مما تم إرجاعه) أم لا. وفيما يلي بعض الأمثلة عن الأخطاء من نوع يفتقد واحد:
+
+```js
+let alphabet = "abcdefghijklmnopqrstuvwxyz";
+let len = alphabet.length;
+for (let i = 0; i <= len; i++) {
+  console.log(alphabet[i]);
+}
+for (let j = 1; j < len; j++) {
+  console.log(alphabet[j]);
+}
+for (let k = 0; k < len; k++) {
+  console.log(alphabet[k]);
+}
+```
+
+المثال الأول هنا يتكرر عدة مرات، والثاني يتكرر مرات قليلة (ينقصه الترتيب الأول، 0). المثال الثالث صحيح.
+
+# --instructions--
+
+أصحّح أخطاء الترتيب في الوظيفة (function) التالية بحيث يتم طباعة جميع الأرقام من 1 إلى 5 إلى وحدة التحكم.
+
+# --hints--
+
+يجب أن يقوم الكود الخاص بك بتعيين الشرط الأولي للحلقة (loop) بحيث يبدأ من الترتيب الأول.
+
+```js
+assert(code.match(/i\s*?=\s*?0\s*?;/g).length == 1);
+```
+
+يجب أن يقوم الكود الخاص بك بإصلاح الشرط الأولي للحلقة بحيث يبدأ الترتيب من 0.
+
+```js
+assert(!code.match(/i\s?=\s*?1\s*?;/g));
+```
+
+يجب أن يضبط الكود الخاص بك الشرط الطرفي (terminal condition) للحلقة بحيث يتوقف عند الترتيب الأخير.
+
+```js
+assert(code.match(/i\s*<\s*len\s*;|i\s*<=\s*len\s*-\s*1\s*;/g).length == 1);
+```
+
+يجب أن يصلح الكود الخاص بك الشرط الطرفي للحلقة بحيث يتوقف عند 1 قبل الطول.
+
+```js
+assert(!code.match(/i\s*?<=\s*?len;/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countToFive() {
+  let firstFive = "12345";
+  let len = firstFive.length;
+  // Only change code below this line
+  for (let i = 1; i <= len; i++) {
+  // Only change code above this line
+    console.log(firstFive[i]);
+  }
+}
+
+countToFive();
+```
+
+# --solutions--
+
+```js
+function countToFive() {
+ let firstFive = "12345";
+ let len = firstFive.length;
+ // Only change code below this line
+ for (let i = 0; i < len; i++) {
+ // Only change code above this line
+   console.log(firstFive[i]);
+ }
+}
+
+countToFive();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-unclosed-parentheses-brackets-braces-and-quotes.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-unclosed-parentheses-brackets-braces-and-quotes.md
new file mode 100644
index 00000000000..78f9424726d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-unclosed-parentheses-brackets-braces-and-quotes.md
@@ -0,0 +1,49 @@
+---
+id: 587d7b84367417b2b2512b36
+title: 'التقاط الاقواس و الاقتباسات الغير مغلقة (Catch Unclosed Parentheses, Brackets, Braces and Quotes)'
+challengeType: 1
+forumTopicId: 301190
+dashedName: catch-unclosed-parentheses-brackets-braces-and-quotes
+---
+
+# --description--
+
+يجب أن تكون على علم بخطأ آخر في بناء الجملة, هو أن جميع الأقواس الافتتاحية، والأقواس المعقوفة، والاقتباسات تحتوي على زوج إقفال. يحدث نسيان قطعة ما عندما تحرير كود موجود وإدخال عناصر بأحد أنواع الأزواج. أيضًا، كن حذرًا عند دمج مجموعة الكود في أخري، مثل إضافة وظيفة تعيد التفعيل كحجة إلى طريقة.
+
+إحدى الطرق لتجنب هذا الخطأ هي بمجرد كتابة الرمز الافتتاحي، قم على الفور بكتابة رمز الإغلاق، ثم قم بتحريك المؤشر مرة أخرى بينهما، ثم استمر في البرمجة. لحسن الحظ، فإن معظم برامج تحرير الكود الحديثة تولد النصف الثاني من الزوج تلقائيًا.
+
+# --instructions--
+
+قم بإصلاح أخطاء الزوجين في الكود.
+
+# --hints--
+
+يجب أن يصلح الكود الخاص بك القطعة المفقودة من القائمة.
+
+```js
+assert(code.match(/myArray\s*?=\s*?\[\s*?1\s*?,\s*?2\s*?,\s*?3\s*?\];/g));
+```
+
+يجب أن يصلح الكود الخاص بك القطعة المفقودة من `.reduce()`. يجب أن يظهر إخراج وحدة التحكم أن `Sum of array values is: 6`.
+
+```js
+assert(arraySum === 6);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let myArray = [1, 2, 3;
+let arraySum = myArray.reduce((previous, current =>  previous + current);
+console.log(`Sum of array values is: ${arraySum}`);
+```
+
+# --solutions--
+
+```js
+let myArray = [1, 2, 3];
+let arraySum = myArray.reduce((previous, current) =>  previous + current);
+console.log(`Sum of array values is: ${arraySum}`);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.md
new file mode 100644
index 00000000000..ca6cc699cf2
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/catch-use-of-assignment-operator-instead-of-equality-operator.md
@@ -0,0 +1,81 @@
+---
+id: 587d7b85367417b2b2512b38
+title: استخدام مشغل التعيين بدلاً من مشغل المساواة (Catch Use of Assignment Operator Instead of Equality Operator)
+challengeType: 1
+forumTopicId: 301191
+dashedName: catch-use-of-assignment-operator-instead-of-equality-operator
+---
+
+# --description--
+
+البرامج المتفرعة، أي تلك الذي تقوم بأشياء مختلفة إذا تم الوفاء بشروط معينة، تعتمد على بيانات `if`, و `else if`, و `else` في JavaScript. يأخذ الشرط أحيانًا شكل اختبار ما إذا كانت النتيجة مساوية لقيمة.
+
+هذا المنطق ينطق (باللغة الإنجليزية، على الأقل) كـ "... if x equals y, then" الذي يمكن ترجمته حرفيا إلى كود باستخدام `=` أو مشغل التعيين. هذا يؤدي إلى جعل برنامجك يعمل بشكل غير متوقع.
+
+كما تم تغطيته في التحديات السابقة، يقوم مشغل التعيين (`=`) في JavaScript بإسناد قيمة إلى اسم متغير. و يقوم المشغلون `==` و `===` بالتحقق من المساواة (الثلاثية `===` تتحقق من المساواة الصارمة بمعنى أن كل من القيمة والنوع يطبقان).
+
+الكود أدناه يعين `x` ليكون 2، الذي يقيّم إلى `true`. تقريبا كل قيمة بنفسها في JavaScript تقيّم إلى `true`، باستثناء ما يعرف بقيم falsy أو "كاذبة": `false`, و `0`, و `""` (مقطع فارغ), و `NaN`, و `undefined`, و `null`.
+
+```js
+let x = 1;
+let y = 2;
+if (x = y) {
+
+} else {
+
+}
+```
+
+في هذا المثال، الكود داخل `if` سيتم تشغيله لأي قيمة بقدار `y`، إلا إذا كان `y` أصلا كاذب (falsy). أما `else` التي تتوقع أن تعمل هنا, لن تعمل في الواقع.
+
+# --instructions--
+
+قم بإصلاح الشرط حتى يقوم البرنامج بتشغيل الفرع الصحيح، ويتم تعيين القيمة المناسبة إلى النتيجة `result`.
+
+# --hints--
+
+يجب أن يصلح الكود الخاص بك الشرط حتى يتحقق من المساواة، بدلاً من استخدام التعيين.
+
+```js
+assert(result == 'Not equal!');
+```
+
+يجب أن يستخدم الشرط إما `==` أو `===` لاختبار المساواة.
+
+```js
+assert(code.match(/x\s*?===?\s*?y/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let x = 7;
+let y = 9;
+let result = "to come";
+
+if(x = y) {
+  result = "Equal!";
+} else {
+  result = "Not equal!";
+}
+
+console.log(result);
+```
+
+# --solutions--
+
+```js
+let x = 7;
+let y = 9;
+let result = "to come";
+
+if(x === y) {
+ result = "Equal!";
+} else {
+ result = "Not equal!";
+}
+
+console.log(result);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.md
new file mode 100644
index 00000000000..030951c4415
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/prevent-infinite-loops-with-a-valid-terminal-condition.md
@@ -0,0 +1,63 @@
+---
+id: 587d7b86367417b2b2512b3d
+title: منع الحلقات اللانهائية ( Infinite Loops) باستخدام شرط انتهائي صالح (Valid Terminal Condition)
+challengeType: 1
+forumTopicId: 301192
+dashedName: prevent-infinite-loops-with-a-valid-terminal-condition
+---
+
+# --description--
+
+الموضوع الأخير هو الحلقة اللانهائية المخيفة (dreaded infinite loop). الحلقات التكرارية (loops) هي أدوات رائعة عندما يحتاج برنامجك لتشغيل كتلة الكود عدد معين من المرات أو حتى يتم الوفاء بشرط ما، ولكنها تحتاج إلى حالة نهائية تنهي التكرار. الحلقات اللانهائية (Infinite loops) من المحتمل أن تجمد أو تعطل المتصفح، وقد تسبب في فشل تنفيذ البرامج، وهو ما لا يريده أحد.
+
+كان هناك مثال لحلقة لانهائية في مقدمة هذا القسم - لم يكن لديها أي شرط نهائي للخروج من حلقة `while` داخل `loopy()`. لا تستدعي هذه الدالة!
+
+```js
+function loopy() {
+  while(true) {
+    console.log("Hello, world!");
+  }
+}
+```
+
+مهمة المبرمج هي التأكد من الوصول في نهاية المطاف إلى حالة الشرط الانتهائي، التي تخبر البرنامج متى يتم الخروج من كود الحلقة. احد الاخطاء هو زيادة أو تخطي متغير مضاد في الاتجاه الخطأ من حالة الشرط الانتهائي. وهناك واحد آخر هو إعادة تعيين متغير العداد أو الفهرسة (counter or index variable) عن طريق الخطأ داخل كود الحلقة بدلاً من زيادته أو تقليصه.
+
+# --instructions--
+
+تحتوي دالة `myFunc()` على حلقة لانهائية لأن حالة الشرط الانتهائي `i != 4` لن تقيّم أبدا الي `false` (وتخرج من التكرار) - `i` سوف يزداد بمقدار 2 في كل تكرار، ويقفز مباشرة فوق 4 حيث ان `i` عدد فردي من البداية. أصلح مشغل المقارنة (comparison operator) في حالة الشرط الانتهائي بحيث تعمل الحلقة فقط ل `i` بقيمة أقل من أو يساوي 4.
+
+# --hints--
+
+الكود الخاص بك يجب أن يغير مشغل المقارنة في حالة الشرط الانتهائي (الجزء الوسط) من حلقة `for`.
+
+```js
+assert(code.match(/i\s*?<=\s*?4;/g).length == 1);
+```
+
+الكود الخاص بك يجب أن يصلح مشغل المقارنة (comparison operator) في حالة الشرط الانتهائي للحلقة (terminal condition of the loop).
+
+```js
+assert(!code.match(/i\s*?!=\s*?4;/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function myFunc() {
+  for (let i = 1; i != 4; i += 2) {
+    console.log("Still going!");
+  }
+}
+```
+
+# --solutions--
+
+```js
+function myFunc() {
+ for (let i = 1; i <= 4; i += 2) {
+   console.log("Still going!");
+ }
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.md
new file mode 100644
index 00000000000..ea9679fa268
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/understanding-the-differences-between-the-freecodecamp-and-browser-console.md
@@ -0,0 +1,65 @@
+---
+id: 587d7b83367417b2b2512b37
+title: فهم الاختلافات بين وحدة تحكم المتصفح (Browser Console) و freeCodeCamp
+challengeType: 1
+forumTopicId: 301193
+dashedName: understanding-the-differences-between-the-freecodecamp-and-browser-console
+---
+
+# --description--
+
+ربما لاحظتم أن بعض تحديات freeCodeCamp تشمل وحدة التحكم الخاصة بها. تتصرف هذه الوحدة بشكل مختلف قليلا عن وحدة تحكم المتصفح.
+
+هناك العديد من الطرق لاستخدام `console` لإخراج الرسائل. علي سبيل المثال `log`, و`warn`, و `clear`. وحدة تحكم freeCodeCamp ستخرج فقط `log` رسائل، في حين أن وحدة التحكم في المتصفح ستخرج جميع الرسائل. عند إجراء تغييرات على الكود الخاص بك، سيتم تشغيلها تلقائياً وإظهار السجلات. ثم يتم مسح وحدة تحكم freeCodeCamp في كل مرة يتم فيها تشغيل الكود.
+
+# --instructions--
+
+أولا، افتح وحدة تحكم المتصفح الخاصة بك حتى تتمكن من رؤية السجلات. للقيام بذلك، يمكنك النقر بزر الماوس الأيمن (right-click) على شريط freeCodeCamp في الأعلى وانقر فوق `inspect`. ثم اعثر على علامة التبويب `console` في النافذة التي تفتح.
+
+بعد ذلك، استخدم `console.log` لتسجيل `output` المتغير. قم بعرض وحدتي التحكم لمشاهدة السجل. أخيرا، استخدم `console.clear` بعد السجل الخاص بك لمسح وحدة تحكم المتصفح. قم بعرض الفرق في وحدتي التحكم.
+
+# --hints--
+
+يجب عليك استخدام `console.log()` لطباعة `output` المتغير.
+
+```js
+assert(__helpers.removeWhiteSpace(code).match(/console\.log\(output\)/));
+```
+
+يجب عليك استخدام `console.clear()` لمسح وحدة تحكم المتصفح.
+
+```js
+assert(
+  __helpers
+    .removeWhiteSpace(code)
+    .match(/console.clear\(\)/)
+);
+```
+
+يجب عليك مسح وحدة التحكم بعد السجل الخاص بك.
+
+```js
+assert(
+  __helpers
+    .removeWhiteSpace(code)
+    .match(/console\.log\(output\)[\s\S]*console.clear\(\)/)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let output = "Get this to show once in the freeCodeCamp console and not at all in the browser console";
+
+```
+
+# --solutions--
+
+```js
+let output = "Get this to show once in the freeCodeCamp console and not at all in the browser console";
+
+console.log(output);
+console.clear();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop.md
new file mode 100644
index 00000000000..58fe172d57d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/use-caution-when-reinitializing-variables-inside-a-loop.md
@@ -0,0 +1,97 @@
+---
+id: 587d7b86367417b2b2512b3c
+title: توخي الحذر عند إعادة تهيئة المتغيرات داخل حلقة تكرارية
+challengeType: 1
+forumTopicId: 301194
+dashedName: use-caution-when-reinitializing-variables-inside-a-loop
+---
+
+# --description--
+
+في بعض الأحيان من الضروري حفظ المعلومات، تزويد العدادات، أو إعادة تعيين المتغيرات ضمن الحلقة التكرارية. تتمثل المشكلة المحتملة في الوقت الذي يجب إعادة تهيئة المتغيرات فيه ، وعدم حدوث ذلك ، أو العكس. هذا أمر خطير بشكل خاص إذا قمت عن طريق الخطأ بإعادة تعيين المتغير المستخدم في حالة الشرط الانتهائي، مما يسبب حلقة لا نهائية.
+
+يمكن أن تكشف طباعة القيم المتغيرة مع كل دورة من الحلقة باستخدام `console.log()` عن سلوك خاطئ متعلق بإعادة التعيين أو الفشل في إعادة تعيين متغير.
+
+# --instructions--
+
+من المفترض أن تنشئ الوظيفة التالية قائمة ذات بعدين بعدد `m` صفوف و `n` أعمدة من الأصفار. لسوء الحظ إنه لا ينتج الإخراج المتوقع لأن متغير `row` لا يتم إعادة تهيئته (ضبطه إلى قائمة فارغة) في الحلقة الخارجية. أصلح الكود بحيث ينتج قائمة 3x2 تتكون من الأصفار، التي تبدو مثل `[[0, 0], [0, 0], [0, 0]]`.
+
+# --hints--
+
+يجب أن يقوم الكود الخاصة بك بتعيين متغير `matrix` إلى قائمة تحتوي علي 3 صفوف من عمودين من الأصفار.
+
+```js
+assert(JSON.stringify(matrix) == '[[0,0],[0,0],[0,0]]');
+```
+
+يجب أن يحتوي متغير `matrix` على 3 قائمة.
+
+```js
+assert(matrix.length == 3);
+```
+
+يجب أن يحتوي متغير `matrix` على عمودين في كل صف.
+
+```js
+assert(
+  matrix[0].length == 2 && matrix[1].length === 2 && matrix[2].length === 2
+);
+```
+
+يجب أن ينتج `zeroArray(4,3)` قائمة تحتوي علي 4 صفوف من 3 أعمدة من الأصفار.
+
+```js
+assert(JSON.stringify(zeroArray(4,3)) == '[[0,0,0],[0,0,0],[0,0,0],[0,0,0]]');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function zeroArray(m, n) {
+  // Creates a 2-D array with m rows and n columns of zeroes
+  let newArray = [];
+  let row = [];
+  for (let i = 0; i < m; i++) {
+    // Adds the m-th row into newArray
+
+    for (let j = 0; j < n; j++) {
+      // Pushes n zeroes into the current row to create the columns
+      row.push(0);
+    }
+    // Pushes the current row, which now has n zeroes in it, to the array
+    newArray.push(row);
+  }
+  return newArray;
+}
+
+let matrix = zeroArray(3, 2);
+console.log(matrix);
+
+```
+
+# --solutions--
+
+```js
+function zeroArray(m, n) {
+ // Creates a 2-D array with m rows and n columns of zeroes
+ let newArray = [];
+ for (let i = 0; i < m; i++) {
+   let row = [];
+   // Adds the m-th row into newArray
+
+   for (let j = 0; j < n; j++) {
+     // Pushes n zeroes into the current row to create the columns
+     row.push(0);
+   }
+   // Pushes the current row, which now has n zeroes in it, to the array
+   newArray.push(row);
+ }
+ return newArray;
+}
+
+let matrix = zeroArray(3, 2);
+console.log(matrix);
+
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/use-the-javascript-console-to-check-the-value-of-a-variable.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/use-the-javascript-console-to-check-the-value-of-a-variable.md
new file mode 100644
index 00000000000..644a4fd8659
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/use-the-javascript-console-to-check-the-value-of-a-variable.md
@@ -0,0 +1,54 @@
+---
+id: 587d7b83367417b2b2512b33
+title: استخدام وحدة تحكم JavaScript للتحقق من قيمة متغير
+challengeType: 1
+forumTopicId: 18372
+dashedName: use-the-javascript-console-to-check-the-value-of-a-variable
+---
+
+# --description--
+
+لكل من Chrome و Firefox وحدات تحكم JavaScript ممتازة، تعرف أيضًا باسم DevTools، لتصحيح أخطاء JavaScript الخاص بك.
+
+يمكنك العثور على أدوات المطور في قائمة Chrome أو وحدة تحكم الويب في قائمة Firefox. إذا كنت تستخدم متصفحًا مختلفًا أو هاتفًا جوالاً، فإننا نوصي بشدة بالتبديل إلى Firefox أو Chrome لسطح المكتب.
+
+طريقة`console.log()`، التي "تطبع" إخراج ما يوجد بين القوسين إلى وحدة التحكم، من المرجح أن تكون أداة تصحيح الأخطاء الأكثر فائدة. وضعها في أماكن استراتيجية في الكود الخاص بك يمكن أن يظهر لك قيم المتغيرات. من الممارسات الجيدة أن يكون لديك فكرة عما يجب أن يكون عليه الناتج قبل النظر إلى ماهيته. سيساعد وجود نقاط لمعرفة حالة حساباتك في الكود الخاص بك على تضييق نطاق المشكلة.
+
+إليك مثال لطباعة السلسلة `Hello world!` إلى وحدة التحكم:
+
+```js
+console.log('Hello world!');
+```
+
+# --instructions--
+
+استخدم طريقة `console.log()` لطباعة قيمة المتغير `a` حيث تمت الإشارة أليها في الكود.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك `console.log()` للتحقق من قيمة المتغير `a`.
+
+```js
+assert(code.match(/console\.log\(a\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let a = 5;
+let b = 1;
+a++;
+// Only change code below this line
+
+
+let sumAB = a + b;
+console.log(sumAB);
+```
+
+# --solutions--
+
+```js
+var a = 5; console.log(a);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md
new file mode 100644
index 00000000000..8555dd002d9
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/debugging/use-typeof-to-check-the-type-of-a-variable.md
@@ -0,0 +1,66 @@
+---
+id: 587d7b84367417b2b2512b34
+title: استخدام typeof للتحقق من نوع المتغير
+challengeType: 1
+forumTopicId: 18374
+dashedName: use-typeof-to-check-the-type-of-a-variable
+---
+
+# --description--
+
+يمكنك استخدام `typeof` للتحقق من نوع البيانات، أو نوع المتغير. هذا مفيد في تصحيح الأخطاء عند العمل مع أنواع متعددة من البيانات. إذا كنت تعتقد أنك تضيف رقمين، ولكن في الواقع يكون واحد منهم مقطع، يمكن أن تكون النتيجة غير متوقعة. يمكن أن تكمن أخطاء النوع (Type errors) في العمليات الحسابية أو استدعاءات الوظائف. كن حذرًا خاصةً عند العامل مع البيانات الخارجية في شكل كائن JavaScript يختصر إلى (JSON).
+
+فيما يلي بعض الأمثلة التي تستخدم `typeof`:
+
+```js
+console.log(typeof "");
+console.log(typeof 0);
+console.log(typeof []);
+console.log(typeof {});
+```
+
+بالترتيب، ستعرض وحدة التحكم المقاطع `string`, و `number`, و `object`, و `object`.
+
+يتعرف JavaScript على سبعة أنواع بيانات أولية (غير قابلة للتغيير): `Boolean`, و `Null`, و `Undefined`, و `Number`, و `String`, و`Symbol` (أضاف في ES6), و `BigInt` (أضاف في ES2020), ونوع واحد للعناصر القابلة للتغيير: `Object`. لاحظ أن القوائم في JavaScript, هي من الناحية التقنية عبارة من كائن.
+
+# --instructions--
+
+أضف اثنين من تعبيرات `console.log()` للتحقق من `typeof` كل من المتغيرين `seven` و `three` في الكود.
+
+# --hints--
+
+الكود الخاص بك يجب أن يستخدم `typeof` في تعبيرات `console.log()` للتحقق من نوع المتغيرات.
+
+```js
+assert(code.match(/console\.log\s*\(typeof[\( ].*\)?\)/g).length == 2);
+```
+
+الكود الخاص بك يجب أن يستخدم `typeof` للتحقق من نوع المتغير `seven`.
+
+```js
+assert(code.match(/typeof[\( ]seven\)?/g));
+```
+
+الكود الخاص بك يجب أن يستخدم `typeof` للتحقق من نوع المتغير `three`.
+
+```js
+assert(code.match(/typeof[\( ]three\)?/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let seven = 7;
+let three = "3";
+console.log(seven + three);
+// Only change code below this line
+```
+
+# --solutions--
+
+```js
+let seven = 7;let three = "3";console.log(typeof seven);
+console.log(typeof three);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md
new file mode 100644
index 00000000000..e05082d8e40
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/compare-scopes-of-the-var-and-let-keywords.md
@@ -0,0 +1,134 @@
+---
+id: 587d7b87367417b2b2512b40
+title: مقارنة نطاقات var و let
+challengeType: 1
+forumTopicId: 301195
+dashedName: compare-scopes-of-the-var-and-let-keywords
+---
+
+# --description--
+
+إذا كانت `let` غير مألوف، تحقق <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/explore-differences-between-the-var-and-let-keywords" target="_blank" rel="noopener noreferrer nofollow">هذا التحدي عن أختلاف بين كلمة (<code>let</code>) وكلمة (<code>var</code>)</a>.
+
+عندما تعلن متغير باستخدام كلمة `var`، يتم الإعلان عنه عالميًا (declared globally)، أو محليًا (locally) إذا تم الإعلان عنه داخل وظيفة.
+
+كلمة `let` تتصرف بالمثل، ولكن مع بعض الميزات الإضافية. عندما تعلن متغير باستخدام `let` داخل الكتلة أو تعبير أو عبارة، فنطاق المتغير يقتصر على تلك الكتلة (block) أو التعبير (statement) أو العبارة (expression).
+
+على سبيل المثال:
+
+```js
+var numArray = [];
+for (var i = 0; i < 3; i++) {
+  numArray.push(i);
+}
+console.log(numArray);
+console.log(i);
+```
+
+هنا ستعرض وحدة التحكم القيم `[0, 1, 2]` و `3`.
+
+مع كلمة `var`، يتم الإعلان عن `i` عالميا. لذلك عندما يتم تنفيذ `i++`، فإنه يحدث المتغير العالمي. وهذا الكود مماثل لما يلي:
+
+```js
+var numArray = [];
+var i;
+for (i = 0; i < 3; i++) {
+  numArray.push(i);
+}
+console.log(numArray);
+console.log(i);
+```
+
+هنا ستعرض وحدة التحكم القيم `[0, 1, 2]` و `3`.
+
+هذا السلوك سوف يسبب مشكلات إذا كنت تريد إنشاء وظيفة وتخزينها لاستخدامها لاحقاً داخل حلقة `for` تستخدم متغير `i`. هذا لأن الوظيفة المخزنة سوف تشير دائما إلى قيمة متغير `i` العالمي المحدث.
+
+```js
+var printNumTwo;
+for (var i = 0; i < 3; i++) {
+  if (i === 2) {
+    printNumTwo = function() {
+      return i;
+    };
+  }
+}
+console.log(printNumTwo());
+```
+
+هنا ستعرض وحدة التحكم القيمة `3`.
+
+كما تري، `printNumTwo()` يطبع 3 وليس 2. هذا لأن القيمة التي تم تعيينها إلى `i` تم تحديثها و `printNumTwo()` يرجع القيمة `i` العالمية وليس القيمة التي احتواها `i` عندما تم إنشاء الوظيفة في حلقة التكرار. لا تتبع كلمة `let` هذا السلوك:
+
+```js
+let printNumTwo;
+for (let i = 0; i < 3; i++) {
+  if (i === 2) {
+    printNumTwo = function() {
+      return i;
+    };
+  }
+}
+console.log(printNumTwo());
+console.log(i);
+```
+
+هنا ستعرض وحدة التحكم القيمة `2`، وخطأ `i is not defined`.
+
+`i` غير معرف لأنه لم يتم إعلانه في النطاق العالمي (global scope). تم الإعلان عنه فقط ضمن حلقة `for`. أنتج `printNumTwo()` القيمة الصحيحة لأن ثلاث متغيرات `i` مختلفة مع قيم فريدة (0, 1, و 2) تم إنشاؤها بواسطة `let` داخل كود الحلقة التكرارية.
+
+# --instructions--
+
+أصلح الكود بحيث أن `i` المعلن عنها في `if` تصبح متغير منفصل عن `i` المعلن عنها في السطر الأول من الوظيفة. كن متأكدا من عدم استخدام كلمة `var` في أي مكان في الكود الخاص بك.
+
+تم تصميم هذا التمرين لتوضيح الفرق بين كيفية تعيين الكلمات `var` و `let` نطاقًا للمتغير المعلن. عند برمجة وظيفة مماثلة لتلك المستخدمة في هذه الممارسة، كثيرا ما يكون من الأفضل استخدام أسماء مختلفة للمتغيرات لتجنب الخلط.
+
+# --hints--
+
+يجب ألا تكون `var` موجودة في الكود.
+
+```js
+assert(!code.match(/var/g));
+```
+
+المتغير `i` المعلن عنه في `if` يجب أن يساوي المقطع `block scope`.
+
+```js
+assert(code.match(/(i\s*=\s*).*\s*.*\s*.*\1('|")block\s*scope\2/g));
+```
+
+يجب أن ينتج `checkScope()` مقطع `function scope`
+
+```js
+assert(checkScope() === 'function scope');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function checkScope() {
+  var i = 'function scope';
+  if (true) {
+    i = 'block scope';
+    console.log('Block scope i is: ', i);
+  }
+  console.log('Function scope i is: ', i);
+  return i;
+}
+```
+
+# --solutions--
+
+```js
+function checkScope() {
+  let i = 'function scope';
+  if (true) {
+    let i = 'block scope';
+    console.log('Block scope i is: ', i);
+  }
+
+  console.log('Function scope i is: ', i);
+  return i;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md
new file mode 100644
index 00000000000..53e0be3a158
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/complete-a-promise-with-resolve-and-reject.md
@@ -0,0 +1,77 @@
+---
+id: 5cdafbc32913098997531680
+title: أكمل كائن Promise باستخدام resolve و reject
+challengeType: 1
+forumTopicId: 301196
+dashedName: complete-a-promise-with-resolve-and-reject
+---
+
+# --description--
+
+يكون للوعد (promise) ثلاث حالات: `pending`, و `fulfilled`, و `rejected`. كائن Promise الذي قمت بإنشائه في التحدي السابق معلق إلى الأبد في حالة `pending` لأنك لم تضف طريقة لإكمال كائن Promise. حجج `resolve` و `reject` المعطاة لوظفية الكائن promise تستخدم لفعل ذلك. تستخدم `resolve` عندما تريد أن ينجح الكائن promise وتستخدم `reject` عندما تريد أن يفشل الكائن promise. هذا الطرق تستقبل حَجَّة (argument)، كما هو مبين بالإدانة.
+
+```js
+const myPromise = new Promise((resolve, reject) => {
+  if(condition here) {
+    resolve("Promise was fulfilled");
+  } else {
+    reject("Promise was rejected");
+  }
+});
+```
+
+المثال الوارد أعلاه يستخدم strings نصية كوسيطة لهذه الحَجَّة (argument)، ولكن يمكن أن يكون أي شيء حقا. في كثير من الأحيان، قد يكون كائناً، يمكنك استخدام البيانات منه، لوضع البيانات على موقعك أو في أي مكان آخر.
+
+# --instructions--
+
+اجعل كائن promise يتعامل مع النجاح والفشل. إذا كان `responseFromServer` صحيحاً `true`، فاستدعي طريقة `resolve` لإكمال كائن promisie بنجاح. مرر `resolve` إلى سلسلة (string) نصية بقيمة `We got the data`. إذا كان `responseFromServer` بـ `false`، استخدم دالة `reject` كبديل و مرر اليها الـ string الآتي: `Data not received`.
+
+# --hints--
+
+`resolve` يجب أن تُستدعى مع الـ string المتوقع عندما يكون شرط `if` صحيح، اي `true`.
+
+```js
+assert(
+  code.match(/if\s*\(\s*responseFromServer\s*\)\s*{\s*resolve\s*\(\s*('|"|`)We got the data\1\s*\)(\s*|\s*;\s*)}/g)
+);
+```
+
+`reject` يجب أن تُستدعى مع الـ string المتوقع عندما يكون شرط `if` خاطئ، اي `false`.
+
+```js
+assert(
+  code.match(/}\s*else\s*{\s*reject\s*\(\s*('|"|`)Data not received\1\s*\)(\s*|\s*;\s*)}/g)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const makeServerRequest = new Promise((resolve, reject) => {
+  // responseFromServer represents a response from a server
+  let responseFromServer;
+
+  if(responseFromServer) {
+    // Change this line
+  } else {  
+    // Change this line
+  }
+});
+```
+
+# --solutions--
+
+```js
+const makeServerRequest = new Promise((resolve, reject) => {
+  // responseFromServer represents a response from a server
+  let responseFromServer;
+
+  if(responseFromServer) {
+    resolve("We got the data");
+  } else {  
+    reject("Data not received");
+  }
+});
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.md
new file mode 100644
index 00000000000..730db3bdcda
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-a-javascript-promise.md
@@ -0,0 +1,55 @@
+---
+id: 5cdafbb0291309899753167f
+title: إنشاء promise في جافا سكريبت (Create a JavaScript Promise)
+challengeType: 1
+forumTopicId: 301197
+dashedName: create-a-javascript-promise
+---
+
+# --description--
+
+الوعد (promise) في لغة JavaScript هو التوعد بالقيام بشيء ما، عادة بشكل غير متزامن. وعندما تنتهي المهمة، إما أن تفي بالوعد أو أن تخفق في ذلك. يكون `Promise` منشئ للوظيفة، لذا تحتاج إلى استخدام كلمة `new` لإنشاء واحد. إنه يأخذ وظيفة (كحجة) مع حجتين - `resolve` و `reject`. وهذه هي الطرق المستخدمة لتحديد نتيجة الوعد. يبدو بناء الجملة كهذا:
+
+```js
+const myPromise = new Promise((resolve, reject) => {
+
+});
+```
+
+# --instructions--
+
+قم بإنشاء وعد جديد يسمى `makeServerRequest`. قم بتمرير وظيفة بحجج `resolve` و `reject` ألى المنشئ (constructor).
+
+# --hints--
+
+يجب عليك تعيين وعد إلى متغير معرف اسمه `makeServerRequest`.
+
+```js
+assert(makeServerRequest instanceof Promise);
+```
+
+يجب أن يتلقى الوعد الخاص بك الوظيفة مع `resolve` و `reject` كحجج.
+
+```js
+assert(
+  code.match(
+    /Promise\s*\(\s*(function\s*\(\s*resolve\s*,\s*reject\s*\)\s*{|\(\s*resolve\s*,\s*reject\s*\)\s*=>\s*{)[^}]*}/g
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+
+```
+
+# --solutions--
+
+```js
+const makeServerRequest = new Promise((resolve, reject) => {
+
+});
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.md
new file mode 100644
index 00000000000..dbb3efb9de0
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-a-module-script.md
@@ -0,0 +1,73 @@
+---
+id: 5cddbfd622f1a59093ec611d
+title: أنشاء برنامَج Module
+challengeType: 6
+forumTopicId: 301198
+dashedName: create-a-module-script
+---
+
+# --description--
+
+بدأت JavaScript بدور صغير تلعبه على شبكة ويب بتنسيق HTML. اليوم، إنها ضخمة، وبعض المواقع يتم بناؤها بالكامل تقريبا باستخدام JavaScript. من أجل جعل JavaScript أكثر نمطية ونظيفة وقابلة للصيانة؛ قدم ES6 طريقة لمشاركة الكود بسهولة بين ملفات JavaScript. يتضمن هذا تصدير أجزاء من ملف لاستخدامها في ملف أو أكثر من الملفات الأخرى، واستيراد الأجزاء التي تحتاجها، حيث تحتاجها. من أجل الاستفادة من هذه العملية، تحتاج إلى إنشاء script في مستند HTML الخاص بك مع `type` من `module`. إليك مثال:
+
+```html
+<script type="module" src="filename.js"></script>
+```
+
+يتمكن script الذي يستخدم نوع `module` هذا من أن يستخدم `import` و `export`, سوف تتعلم عنهم في التحديات القادمة.
+
+# --instructions--
+
+قم بإضافة script إلى مستند HTML من نوع `module` وإعطائه الملف المصدر `index.js`
+
+# --hints--
+
+يجب عليك إنشاء علامة `script`.
+
+```js
+assert(code.match(/<\s*script[^>]*>\s*<\/\s*script\s*>/g));
+```
+
+يجب أن يحتوي علامة `script` على سمة `type` بقيمة `module`.
+
+```js
+assert(
+  code.match(
+    /<\s*script\s+[^t]*type\s*=\s*('|")module\1[^>]*>\s*<\/\s*script\s*>/g
+  )
+);
+```
+
+يجب أن يحتوي علامة `script` علي `src` بقيمة `index.js`.
+
+```js
+assert(
+  code.match(
+    /<\s*script\s+[^s]*src\s*=\s*('|")index\.js\1[^>]*>\s*<\/\s*script\s*>/g
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <!-- Only change code below this line -->
+
+    <!-- Only change code above this line -->
+  </body>
+</html>
+```
+
+# --solutions--
+
+```html
+<html>
+  <body>
+    <script type="module" src="index.js"></script>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md
new file mode 100644
index 00000000000..017f682dad2
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-an-export-fallback-with-export-default.md
@@ -0,0 +1,63 @@
+---
+id: 587d7b8c367417b2b2512b58
+title: Create an Export Fallback with export default
+challengeType: 1
+forumTopicId: 301199
+dashedName: create-an-export-fallback-with-export-default
+---
+
+# --description--
+
+في درس `export`، تعلمت عن الجملة المشار إليها بـ <dfn>named export</dfn>. سمح لك هذا بإتاحة functions ومتغيرات متعددة للاستخدام في ملفات أخرى.
+
+هناك بنية `export` أخرى تحتاج إلى معرفتها، والمعروفة باسم <dfn>export default</dfn>. عادة سوف تستخدم هذه الجملة إذا تم تصدير قيمة واحدة فقط من ملف. يتم استخدامه أيضا لإنشاء قيمة احتياطية لملف أو module.
+
+فيما يلي أمثلة تستخدم `export default`:
+
+```js
+export default function add(x, y) {
+  return x + y;
+}
+
+export default function(x, y) {
+  return x + y;
+}
+```
+
+الأول هو named function، والثاني هو anonymous function.
+
+بما أن `export default` يستخدم لتعريف قيمة احتياطية لـ module أو ملف، يمكن أن يكون لديك قيمة واحدة فقط هي الـ default export في كل module أو ملف. بالإضافة إلى ذلك، لا يمكنك استخدام `export default` مع `var` أو `let` أو `const`
+
+# --instructions--
+
+الدالة التالية يجب أن تكون القيمة الاحتياطية للـ module. الرجاء إضافة الكود اللازم للقيام بذلك.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك `export` احتياطيًا.
+
+```js
+assert(
+  code.match(
+    /export\s+default\s+function(\s+subtract\s*|\s*)\(\s*x,\s*y\s*\)\s*{/g
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function subtract(x, y) {
+  return x - y;
+}
+```
+
+# --solutions--
+
+```js
+export default function subtract(x, y) {
+  return x - y;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.md
new file mode 100644
index 00000000000..8231fc497e4
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/create-strings-using-template-literals.md
@@ -0,0 +1,116 @@
+---
+id: 587d7b8a367417b2b2512b4e
+title: Create Strings using Template Literals
+challengeType: 1
+forumTopicId: 301200
+dashedName: create-strings-using-template-literals
+---
+
+# --description--
+
+احدي الميزات الجديدة لـ ES6 هي <dfn>template literal</dfn>. هذا نوع خاص من الـ strings يجعل إنشاء سلاسل معقدة أسهل.
+
+Template literals تتيح لك إنشاء strings متعددة السطور واستخدام ميزات الـ string interpolation لإنشاء strings.
+
+انظر الي الكود أدناه:
+
+```js
+const person = {
+  name: "Zodiac Hasbro",
+  age: 56
+};
+
+const greeting = `Hello, my name is ${person.name}!
+I am ${person.age} years old.`;
+
+console.log(greeting);
+```
+
+ستعرض وحدة التحكم السلاسل `Hello, my name is Zodiac Hasbro!` و `I am 56 years old.`.
+
+لقد حدث الكثير من الأشياء هنا. أولاً، يستخدم المثال الـ backticks الآتية (`` ` ``)، وليس علامات الاقتباس (`'` أو `"`) لاحتواء الـ string. ثانياً، لاحظ أن الـ string متعدد الأسطر في كل من الكود والناتج. هذا يوفر من إدخال `\n` داخل الـ strings. بناء الجملة `${variable}` المستخدم أعلاه هو placeholder. بشكل أساسي، لن تضطر إلى استخدام التسلسل مع عامل التشغيل `+` بعد الآن. لإضافة متغيرات إلى الـ strings، فقط قم بإسقاط المتغير في template string و حاوطه بـ `${` و `}`. وبالمثل، يمكنك تضمين عبارات أخرى في الـ string literal، على سبيل المثال `${a + b}`. هذه الطريقة الجديدة لإنشاء الـ strings تمنحك المزيد من المرونة لإنشاء strings قوية.
+
+# --instructions--
+
+استخدم template literal مع backticks لإنشاء array من سلاسل عناصر القائمة (`li`). يجب أن يكون نص كل عنصر من عناصر القائمة أحد عناصر الـ array من خاصية `failure` في كائن `result` وأن يحتوي على سمة `class` مع القيمة `text-warning`. يجب أن تقوم دالة `makeList` بإرجاع مجموعة من سلاسل عناصر القائمة.
+
+قم باستخدام iterator method (أي نوع من الـ loops) للحصول على المخرجات المطلوبة (موضحة أدناه).
+
+```js
+[
+  '<li class="text-warning">no-var</li>',
+  '<li class="text-warning">var-on-top</li>',
+  '<li class="text-warning">linebreak</li>'
+]
+```
+
+# --hints--
+
+`failuresList` يجب أن تكون array تحتوي على رسائل الـ `result failure`.
+
+```js
+assert(
+  typeof makeList(result.failure) === 'object' && failuresList.length === 3
+);
+```
+
+`failuresList` يجب أن تكون مساوية للمخرجات المحددة.
+
+```js
+assert(
+  makeList(result.failure).every(
+    (v, i) =>
+      v === `<li class="text-warning">${result.failure[i]}</li>` ||
+      v === `<li class='text-warning'>${result.failure[i]}</li>`
+  )
+);
+```
+
+وينبغي استخدام Template strings و expression interpolation.
+
+```js
+(getUserInput) => assert(getUserInput('index').match(/(`.*\${.*}.*`)/));
+```
+
+ينبغي استخدام iterator.
+
+```js
+(getUserInput) =>
+  assert(getUserInput('index').match(/for|map|reduce|forEach|while/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const result = {
+  success: ["max-length", "no-amd", "prefer-arrow-functions"],
+  failure: ["no-var", "var-on-top", "linebreak"],
+  skipped: ["no-extra-semi", "no-dup-keys"]
+};
+function makeList(arr) {
+  // Only change code below this line
+  const failureItems = [];
+  // Only change code above this line
+
+  return failureItems;
+}
+
+const failuresList = makeList(result.failure);
+```
+
+# --solutions--
+
+```js
+const result = {
+  success: ["max-length", "no-amd", "prefer-arrow-functions"],
+  failure: ["no-var", "var-on-top", "linebreak"],
+  skipped: ["no-extra-semi", "no-dup-keys"]
+};
+function makeList(arr) {
+  return arr.map(val => `<li class="text-warning">${val}</li>`);
+}
+
+const failuresList = makeList(result.failure);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/handle-a-fulfilled-promise-with-then.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/handle-a-fulfilled-promise-with-then.md
new file mode 100644
index 00000000000..79d390ccb4a
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/handle-a-fulfilled-promise-with-then.md
@@ -0,0 +1,92 @@
+---
+id: 5cdafbd72913098997531681
+title: Handle a Fulfilled Promise with then
+challengeType: 1
+forumTopicId: 301203
+dashedName: handle-a-fulfilled-promise-with-then
+---
+
+# --description--
+
+الـ Promises مفيدة للغاية عندما تكون لديك عملية تستغرق قدرا غير معروف من الوقت في الكود الخاص بك (شيء غير متزامن)، غالبا ما يكون server request. عندما تقوم بـ server request يستغرق ذلك بعض الوقت، وبعد اكتمالها تريد عادة أن تفعل شيئا بالـ response المعادة من الـ server. يمكن تحقيق ذلك باستخدام method الـ `then`. يتم تنفيذ method الـ `then` مباشرة بعد الوفاء بالـ promise باستخدام `resolve`. إليك مثال:
+
+```js
+myPromise.then(result => {
+
+});
+```
+
+`result` تأتي من الـ argument المعطاة لـ method الـ`resolve`.
+
+# --instructions--
+
+أضف method الـ `then` إلى الـ promise الخاص بك. استخدم `result` كمعلمة لـ callback function واخرج الـ `result` إلى وحدة التحكم.
+
+# --hints--
+
+يجب عليك استدعاء method الـ `then` على الـ promise.
+
+```js
+assert(
+  __helpers.removeWhiteSpace(code).match(/(makeServerRequest|\))\.then\(/g)
+);
+```
+
+يجب أن تكون لـ method الـ `then` الـ callback function مع `result` كمعلمتها (parameter).
+
+```js
+assert(resultIsParameter);
+```
+
+يجب عليك اخراج `result` إلى وحدة التحكم.
+
+```js
+assert(
+  resultIsParameter &&
+    __helpers
+      .removeWhiteSpace(code)
+      .match(/\.then\(.*?result.*?console.log\(result\).*?\)/)
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const resultIsParameter = /\.then\((function\(result\){|result|\(result\)=>)/.test(__helpers.removeWhiteSpace(code));
+```
+
+## --seed-contents--
+
+```js
+const makeServerRequest = new Promise((resolve, reject) => {
+  // responseFromServer is set to true to represent a successful response from a server
+  let responseFromServer = true;
+
+  if(responseFromServer) {
+    resolve("We got the data");
+  } else {  
+    reject("Data not received");
+  }
+});
+```
+
+# --solutions--
+
+```js
+const makeServerRequest = new Promise((resolve, reject) => {
+  // responseFromServer is set to true to represent a successful response from a server
+  let responseFromServer = true;
+
+  if(responseFromServer) {
+    resolve("We got the data");
+  } else {  
+    reject("Data not received");
+  }
+});
+
+makeServerRequest.then(result => {
+  console.log(result);
+});
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.md
new file mode 100644
index 00000000000..1a668f8e2ee
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/handle-a-rejected-promise-with-catch.md
@@ -0,0 +1,100 @@
+---
+id: 5cdafbe72913098997531682
+title: Handle a Rejected Promise with catch
+challengeType: 1
+forumTopicId: 301204
+dashedName: handle-a-rejected-promise-with-catch
+---
+
+# --description--
+
+`catch` هي method مستخدمة عند رفض الـ promise. يتم تنفيذها مباشرة بعد أن يتم استدعاء method الـ `reject` الخاصة بالـ promise. إليك بناء الجملة:
+
+```js
+myPromise.catch(error => {
+
+});
+```
+
+`error` هو الـ argument الممرر إلى method الـ `reject`.
+
+# --instructions--
+
+أضف method الـ `catch` إلى الـ promise الخاص بك. استخدم `error` كمعلمة لـ callback function واخرج الـ `error` إلى وحدة التحكم.
+
+# --hints--
+
+يجب عليك استدعاء method الـ `catch` على الـ promise.
+
+```js
+assert(
+  __helpers.removeWhiteSpace(code).match(/(makeServerRequest|\))\.catch\(/g)
+);
+```
+
+يجب أن تكون لـ method الـ `catch` الـ callback function مع `error` كمعلمتها (parameter).
+
+```js
+assert(errorIsParameter);
+```
+
+يجب عليك اخراج `error` إلى وحدة التحكم.
+
+```js
+assert(
+  errorIsParameter &&
+    __helpers
+      .removeWhiteSpace(code)
+      .match(/\.catch\(.*?error.*?console.log\(error\).*?\)/)
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const errorIsParameter = /\.catch\((function\(error\){|error|\(error\)=>)/.test(__helpers.removeWhiteSpace(code));
+```
+
+## --seed-contents--
+
+```js
+const makeServerRequest = new Promise((resolve, reject) => {
+  // responseFromServer is set to false to represent an unsuccessful response from a server
+  let responseFromServer = false;
+
+  if(responseFromServer) {
+    resolve("We got the data");
+  } else {  
+    reject("Data not received");
+  }
+});
+
+makeServerRequest.then(result => {
+  console.log(result);
+});
+```
+
+# --solutions--
+
+```js
+const makeServerRequest = new Promise((resolve, reject) => {
+  // responseFromServer is set to false to represent an unsuccessful response from a server
+  let responseFromServer = false;
+
+  if(responseFromServer) {
+    resolve("We got the data");
+  } else {  
+    reject("Data not received");
+  }
+});
+
+makeServerRequest.then(result => {
+  console.log(result);
+});
+
+makeServerRequest.catch(error => {
+  console.log(error);
+});
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.md
new file mode 100644
index 00000000000..c2e20d2b64b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/import-a-default-export.md
@@ -0,0 +1,48 @@
+---
+id: 587d7b8d367417b2b2512b59
+title: Import a Default Export
+challengeType: 1
+forumTopicId: 301205
+dashedName: import-a-default-export
+---
+
+# --description--
+
+في التحدي الأخير، تعلمت عن `export default` واستخداماته. لاستيراد default export، تحتاج إلى استخدام صيغة `import` مختلفة. في المثال التالي، `add` هو الـ default export لملف `math_functions.js`. إليك كيفية استيرادها (import):
+
+```js
+import add from "./math_functions.js";
+```
+
+الـ syntax يختلف في مكان رئيسي واحد. القيمة المستوردة (imported)، `add`، ليست محاطة بأقواس متعرجة (`{}`). `add` هنا ببساطة اسم متغير لأيا كان الـ default export لـ ملف `math_functions.js`. يمكنك استخدام أي اسم هنا عند استيراد default.
+
+# --instructions--
+
+في الكود التالي، قم باستيراد default export من ملف `math_functions.js`، الموجود في نفس الدليل مثل هذا الملف. قم بإعطاء الاستيراد اسم `subtract`.
+
+# --hints--
+
+يجب عليك استيراد `subtract` بشكل صحيح من `math_functions.js`.
+
+```js
+assert(code.match(/import\s+subtract\s+from\s+('|")\.\/math_functions\.js\1/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+
+// Only change code above this line
+
+subtract(7,4);
+```
+
+# --solutions--
+
+```js
+import subtract from "./math_functions.js";
+
+subtract(7,4);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md
new file mode 100644
index 00000000000..5fac37f460b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/mutate-an-array-declared-with-const.md
@@ -0,0 +1,91 @@
+---
+id: 587d7b87367417b2b2512b42
+title: Mutate an Array Declared with const
+challengeType: 1
+forumTopicId: 301206
+dashedName: mutate-an-array-declared-with-const
+---
+
+# --description--
+
+إذا كنت غير مألوفة مع `const`، تحقق <a href="/learn/javascript-algorithms-and-data-structures/basic-javascript/declare-a-read-only-variable-with-the-const-keyword" target="_blank" rel="noopener noreferrer nofollow">من هذا التحدي حول كلمة <code>const</code> الثابتة</a>.
+
+يحتوي تعريف `const` على العديد من حالات الاستخدام في JavaScript الحديثة.
+
+بعض المطورين يفضلون تعيين جميع متغيراتهم باستخدام `const` بشكل افتراضي، ما لم يعلموا أنهم سيحتاجون إلى إعادة تعيين القيمة. فقط في تلك الحالة، يستخدمون `let`.
+
+ومع ذلك، من المهم أن نفهم أن الـ objects (بما في ذلك arrays و functions) المخصصة للمتغير باستخدام `const` لا تزال قابلة للتغيير. استخدام تعريف `const` يمنع فقط إعادة تعيين معرف المتغير.
+
+```js
+const s = [5, 6, 7];
+s = [1, 2, 3];
+s[2] = 45;
+console.log(s);
+```
+
+`s = [1, 2, 3]` سيؤدي إلى خطأ. بعد التعليق على هذا السطر، سيعرض `console.log` القيمة `[5, 6, 45]`.
+
+كما ترون، يمكنك تغيير الكائن `[5, 6, 7]` نفسه والمتغير `s` سيظل يشير إلى الـ array المعدلة `[5, 6, 45]`. مثل جميع الـ arrays، عناصر الـ array في `s` قابلة للتغيير، ولكن لأن `const` تم استخدامها، لا يمكنك استخدام معرف المتغير `s` للإشارة إلى array مختلفة باستخدام مشغل التعيين (assignment operator).
+
+# --instructions--
+
+الـ array معرفة كـ `const s = [5, 7, 2]`. قم بتغيير الـ array إلى `[2, 5, 7]` باستخدام تعيينات العناصر المتنوعة.
+
+# --hints--
+
+لا ينبغي أن تستبدل كلمة `const`.
+
+```js
+(getUserInput) => assert(getUserInput('index').match(/const/g));
+```
+
+`s` يجب أن يكون متغير ثابت (باستخدام `const`).
+
+```js
+(getUserInput) => assert(getUserInput('index').match(/const\s+s/g));
+```
+
+لا يجب عليك تغيير تعريف الـ array الأصلي.
+
+```js
+(getUserInput) =>
+  assert(
+    getUserInput('index').match(
+      /const\s+s\s*=\s*\[\s*5\s*,\s*7\s*,\s*2\s*\]\s*;?/g
+    )
+  );
+```
+
+`s` يجب أن يساوي `[2, 5, 7]`.
+
+```js
+assert.deepEqual(s, [2, 5, 7]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const s = [5, 7, 2];
+function editInPlace() {
+  // Only change code below this line
+
+  // Using s = [2, 5, 7] would be invalid
+
+  // Only change code above this line
+}
+editInPlace();
+```
+
+# --solutions--
+
+```js
+const s = [5, 7, 2];
+function editInPlace() {
+  s[0] = 2;
+  s[1] = 5;
+  s[2] = 7;
+}
+editInPlace();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/prevent-object-mutation.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/prevent-object-mutation.md
new file mode 100644
index 00000000000..cb506a046a2
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/prevent-object-mutation.md
@@ -0,0 +1,104 @@
+---
+id: 598f48a36c8c40764b4e52b3
+title: منع تغيير الكائن (Prevent Object Mutation)
+challengeType: 1
+forumTopicId: 301207
+dashedName: prevent-object-mutation
+---
+
+# --description--
+
+كما رأينا في التحدي السابق، استخدام `const` وحده لا يحمي بياناتك من امكانية تغييرها. لضمان عدم تغيير بياناتك، توفر جافا سكريبت دالة `Object.freeze` لمنع تغيير البيانات.
+
+سيتم رفض أي محاولة لتغيير الـ object، مع اظهار خطأ إذا كان السكريبت يعمل في strict mode.
+
+```js
+let obj = {
+  name:"FreeCodeCamp",
+  review:"Awesome"
+};
+Object.freeze(obj);
+obj.review = "bad";
+obj.newProp = "Test";
+console.log(obj); 
+```
+
+الكود `obj.review` و `obj.newProp` سيسفر عن أخطاء، لأن محررنا يعمل في وضع الـ strict mode افتراضيا، وسوف تعرض وحدة التحكم القيمة `{ name: "FreeCodeCamp", review: "Awesome" }`.
+
+# --instructions--
+
+في هذا التحدي سوف تستخدم `Object.freeze` لمنع تغيير الثوابت الرياضية. تحتاج إلى تجميد الـ object الآتي `MATH_CONSTANTS` بحيث لا يستطيع أحد تغيير قيمة `PI`،او إضافة أو حذف properties (خصائص).
+
+# --hints--
+
+لا ينبغي أن تستبدل كلمة `const`.
+
+```js
+(getUserInput) => assert(getUserInput('index').match(/const/g));
+```
+
+`MATH_CONSTANTS` يجب أن يكون متغير ثابت (باستخدام `const`).
+
+```js
+(getUserInput) =>
+  assert(getUserInput('index').match(/const\s+MATH_CONSTANTS/g));
+```
+
+لا يجب عليك تغيير التعريف الأصلي لـ `MATH_CONSTANTS`.
+
+```js
+(getUserInput) =>
+  assert(
+    getUserInput('index').match(
+      /const\s+MATH_CONSTANTS\s+=\s+{\s+PI:\s+3.14\s+};/g
+    )
+  );
+```
+
+`PI` يجب أن يساوي `3.14`.
+
+```js
+assert(PI === 3.14);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function freezeObj() {
+  const MATH_CONSTANTS = {
+    PI: 3.14
+  };
+  // Only change code below this line
+
+
+  // Only change code above this line
+  try {
+    MATH_CONSTANTS.PI = 99;
+  } catch(ex) {
+    console.log(ex);
+  }
+  return MATH_CONSTANTS.PI;
+}
+const PI = freezeObj();
+```
+
+# --solutions--
+
+```js
+function freezeObj() {
+  const MATH_CONSTANTS = {
+    PI: 3.14
+  };
+  Object.freeze(MATH_CONSTANTS);
+
+  try {
+    MATH_CONSTANTS.PI = 99;
+  } catch(ex) {
+    console.log(ex);
+  }
+  return MATH_CONSTANTS.PI;
+}
+const PI = freezeObj();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.md
new file mode 100644
index 00000000000..b82f70a7ae6
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/reuse-javascript-code-using-import.md
@@ -0,0 +1,70 @@
+---
+id: 587d7b8c367417b2b2512b55
+title: إعادة استخدام كود جافا سكريبت باستخدام الاستيراد (Reuse JavaScript Code Using import)
+challengeType: 1
+forumTopicId: 301208
+dashedName: reuse-javascript-code-using-import
+---
+
+# --description--
+
+يسمح لك `import` باختيار أجزاء الملف أو الوحدة المراد تحميلها. في الدرس السابق، تم تصدير `add` من ملف `math_functions.js`. إليك كيف يمكنك استيراده لاستخدامه في ملف آخر:
+
+```js
+import { add } from './math_functions.js';
+```
+
+هنا ، `import` سوف تجد `add` في `math_functions.js`، قم باستيراد هذه الدالة فقط لاستخدامها، وتجاهل البقية. الكود `./` يخبر الـ import بالبحث عن ملف `math_functions.js` في نفس المجلد مثل الملف الحالي. مسار الملف النسبي (`./`) وملحق الملف (`.js`) مطلوبين عند استخدام الاستيراد بهذه الطريقة.
+
+يمكنك استيراد أكثر من عنصر واحد من الملف عن طريق إضافته في بيان `import` مثل هذا:
+
+```js
+import { add, subtract } from './math_functions.js';
+```
+
+# --instructions--
+
+أضف بيان `import` المناسب الذي سيسمح للملف الحالي باستخدام الدوال `uppercaseString` و `lowercaseString` التي قمت بتصديرها في الدرس السابق. هذه الدوال موجودة في ملف يسمى `string_functions.js`، وهو في نفس المجلد مثل الملف الحالي.
+
+# --hints--
+
+يجب عليك استيراد `uppercaseString` بشكل صحيح.
+
+```js
+assert(
+  code.match(
+    /import\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g
+  )
+);
+```
+
+يجب عليك استيراد `lowercaseString` بشكل صحيح.
+
+```js
+assert(
+  code.match(
+    /import\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)}\s+from\s+('|")\.\/string_functions\.js\2/g
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+
+// Only change code above this line
+
+uppercaseString("hello");
+lowercaseString("WORLD!");
+```
+
+# --solutions--
+
+```js
+import { uppercaseString, lowercaseString } from './string_functions.js';
+
+uppercaseString("hello");
+lowercaseString("WORLD!");
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions.md
new file mode 100644
index 00000000000..4bf466bf1f6
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions.md
@@ -0,0 +1,64 @@
+---
+id: 587d7b88367417b2b2512b46
+title: تعيين المعلمات الافتراضية للدوال (Set Default Parameters for Your Functions)
+challengeType: 1
+forumTopicId: 301209
+dashedName: set-default-parameters-for-your-functions
+---
+
+# --description--
+
+من أجل مساعدتنا في إنشاء functions أكثر مرونة، يوفر ES6 الـ <dfn>default parameters</dfn> للـ functions.
+
+تحقق من هذا الكود:
+
+```js
+const greeting = (name = "Anonymous") => "Hello " + name;
+
+console.log(greeting("John"));
+console.log(greeting());
+```
+
+ستعرض وحدة التحكم الـ strings الآتية `Hello John` و `Hello Anonymous`.
+
+يبدأ الـ default parameter في العمل عندما لا يتم تحديد الـ argument (عندما تكون undefined). كما ترون في المثال أعلاه، الـ parameter الآتي `name` سوف يتلقى القيمة الافتراضية `Anonymous` ، عندما لا تقدم قيمة للـ parameter. يمكنك إضافة القيم الافتراضية لاي عدد من الـ parameters كما تريد.
+
+# --instructions--
+
+قم بتعديل الدالة `increment` بإضافة الـ default parameters بحيث تضيف 1 إلى `number` إذا لم يتم تحديد `value`.
+
+# --hints--
+
+نتيجة `increment(5, 2)` يجب أن تكون `7`.
+
+```js
+assert(increment(5, 2) === 7);
+```
+
+نتيجة `increment(5)` يجب أن تكون `6`.
+
+```js
+assert(increment(5) === 6);
+```
+
+قيمة الـ default parameter لـ `1` يجب استخدامها لـ `value`.
+
+```js
+assert(code.match(/value\s*=\s*1/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Only change code below this line
+const increment = (number, value) => number + value;
+// Only change code above this line
+```
+
+# --solutions--
+
+```js
+const increment = (number, value = 1) => number + value;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.md
new file mode 100644
index 00000000000..b7bd92f124d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use--to-import-everything-from-a-file.md
@@ -0,0 +1,60 @@
+---
+id: 587d7b8c367417b2b2512b57
+title: استخدم * لاستيراد كل شيء من ملف (Use * to Import Everything from a File)
+challengeType: 1
+forumTopicId: 301210
+dashedName: use--to-import-everything-from-a-file
+---
+
+# --description--
+
+افترض أن لديك ملفًا وأنت ترغب في استيراد جميع محتوياته إلى الملف الحالي. يمكن القيام بذلك باستخدام `import * as`. إليك مثال حيث يتم استيراد محتويات ملف يسمى `math_functions.js` إلى ملف في نفس المجلد:
+
+```js
+import * as myMathModule from "./math_functions.js";
+```
+
+سيتم في بيان الاستيراد `import` أعلاه إنشاء object يسمى `myMathModule`. هذا مجرد اسم متغير، يمكنك تسميته أي شيء. سيحتوي الـ object على جميع الصادرات من `math_functions.js` بداخله، فيمكنك استخدام الـ functions مثل أي object property آخري. إليك كيف يمكنك استخدام دالة `add` و `subtract` التي تم استيرادهم:
+
+```js
+myMathModule.add(2,3);
+myMathModule.subtract(5,3);
+```
+
+# --instructions--
+
+يتطلب الكود في هذا الملف محتويات الملف: `string_functions.js`، وذلك في نفس المجلد مثل الملف الحالي. استخدم `import * as` لاستيراد كل شيء من الملف إلى object يسمى `stringFunctions`.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك `import * as` بشكل صحيح.
+
+```js
+assert(
+  code.match(
+    /import\s*\*\s*as\s+stringFunctions\s+from\s*('|")\.\/string_functions\.js\1/g
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+
+// Only change code above this line
+
+stringFunctions.uppercaseString("hello");
+stringFunctions.lowercaseString("WORLD!");
+```
+
+# --solutions--
+
+```js
+import * as stringFunctions from "./string_functions.js";
+
+// add code above this line
+stringFunctions.uppercaseString("hello");
+stringFunctions.lowercaseString("WORLD!");
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.md
new file mode 100644
index 00000000000..0f42e31706b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-arrow-functions-to-write-concise-anonymous-functions.md
@@ -0,0 +1,91 @@
+---
+id: 587d7b87367417b2b2512b43
+title: استخدام Arrow Functions لكتابة الدوال المجهولة الموجزة (Use Arrow Functions to Write Concise Anonymous Functions)
+challengeType: 1
+forumTopicId: 301211
+dashedName: use-arrow-functions-to-write-concise-anonymous-functions
+---
+
+# --description--
+
+في جافا سكريبت، غالبا ما لا نحتاج إلى تسمية الـ functions، خاصة عند تمرير الـ fuction كـ argument لـ function أخر. وبدلا من ذلك، نحن ننشئ inline functions. نحن لسنا بحاجة إلى تسمية هذه الـ functions لأننا لا نعيد استخدامها في أي مكان آخر.
+
+ولتحقيق ذلك، كثيرا ما نستخدم الصيغة التالية:
+
+```js
+const myFunc = function() {
+  const myVar = "value";
+  return myVar;
+}
+```
+
+يزودنا ES6 بـ syntactic sugar اي طريقة مبسطة لكي لا نضطر إلى كتابة anonymous functions بهذه الطريقة. بدلاً من ذلك، يمكنك استخدام **arrow function syntax**:
+
+```js
+const myFunc = () => {
+  const myVar = "value";
+  return myVar;
+}
+```
+
+عندما لا يكون هناك function body، و يوجد فقط قيمة إرجاع، تسمح لك الـ arrow function بحذف كلمة `return` وكذلك الأقواس المحيطة بالكود. وهذا يساعد على تبسيط الـ functions الأصغر حجماً في بيانات ذات سطر واحد:
+
+```js
+const myFunc = () => "value";
+```
+
+سيظل هذا الكود يعيد string بقيمة `value` افتراضيا.
+
+# --instructions--
+
+أعد كتابة الـ function المسندة إلى المتغير `magic` الذي يرجع `new Date()` لتستخدم الـ arrow function syntax. أيضا، تأكد من عدم تعريف أي شيء باستخدام كلمة `var`.
+
+# --hints--
+
+يجب عليك استبدال كلمة `var`.
+
+```js
+assert.notMatch(code, /var/g)
+```
+
+`magic` يجب أن يكون متغير ثابت (باستخدام `const`).
+
+```js
+assert.match(code, /const\s+magic/g)
+```
+
+`magic` يجب أن يكون `function`.
+
+```js
+assert(typeof magic === 'function');
+```
+
+`magic()` يجب أن يعيد التاريخ الصحيح.
+
+```js
+assert(magic().setHours(0, 0, 0, 0) === new Date().setHours(0, 0, 0, 0));
+```
+
+لا ينبغي استخدام كلمة `function`.
+
+```js
+assert.notMatch(code, /function/g)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+var magic = function() {
+  return new Date();
+};
+```
+
+# --solutions--
+
+```js
+const magic = () => {
+  return new Date();
+};
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md
new file mode 100644
index 00000000000..2228503d757
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-class-syntax-to-define-a-constructor-function.md
@@ -0,0 +1,111 @@
+---
+id: 587d7b8b367417b2b2512b53
+title: Use class Syntax to Define a Constructor Function
+challengeType: 1
+forumTopicId: 301212
+dashedName: use-class-syntax-to-define-a-constructor-function
+---
+
+# --description--
+
+يوفر ES6 طريقة syntax جديدة لإنشاء objects، باستخدام كلمة <dfn>class</dfn>.
+
+وتجدر الإشارة إلى أن syntax الـ `class` هو مجرد syntax وليس تنفيذًا كاملًا للـ class لنموذج البرمجة الشيئية (object-oriented)، على عكس لغات مثل Java و Python و Ruby ، إلخ.
+
+في ES5، ينشئ كائن (object) عند تحدد وظيفة (function) يسمى `constructor` واستخدام مصطلح `new` لتمثيل كائن (object).
+
+في ES6، يحتوي إعلان `class` على طريقة `constructor` التي يتم استدعاؤها مع مصطلح `new` جديدة. إذا لم يتم تعريف طريقة `constructor` بوضوح، فعندها يتم تعريفها ضمنيا دون أي حجج (arguments).
+
+```js
+// Explicit constructor
+class SpaceShuttle {
+  constructor(targetPlanet) {
+    this.targetPlanet = targetPlanet;
+  }
+  takeOff() {
+    console.log("To " + this.targetPlanet + "!");
+  }
+}
+
+// Implicit constructor 
+class Rocket {
+  launch() {
+    console.log("To the moon!");
+  }
+}
+
+const zeus = new SpaceShuttle('Jupiter');
+// prints To Jupiter! in console
+zeus.takeOff();
+
+const atlas = new Rocket();
+// prints To the moon! in console
+atlas.launch();
+```
+
+وتجدر الإشارة إلى أن كلمة `class` تعرف function جديد، تمت إضافة الـ constructor إليه. يتم استدعاء هذا الـ constructor عندما يتم استدعاء `new` لإنشاء object جديد.
+
+**ملاحظة:** يجب أن تستخدم UpperCamelCase لاسماء الـ class في ES6، كما في `SpaceShuttle` المستخدمة أعلاه.
+
+Method الـ `constructor` هي method خاصة لإنشاء وتهيئة object تم إنشاؤه عن طريق class. سوف تتعلم المزيد عنها في قسم البرمجة الشيئية في شهادة خوارزميات جافا سكريبت وهياكل البيانات.
+
+# --instructions--
+
+استخدم كلمة `class` واكتب `constructor` لإنشاء class الـ `Vegetable`.
+
+Class الـ `Vegetable` يتيح لك إنشاء vegetable object مع خاصية `name` والتي يتم تمريرها إلى الـ `constructor`.
+
+# --hints--
+
+`Vegetable` يجب أن تكون `class` مع method معرفة للـ `constructor`.
+
+```js
+assert(
+  typeof Vegetable === 'function' && typeof Vegetable.constructor === 'function'
+);
+```
+
+يجب استخدام كلمة `class`.
+
+```js
+assert(code.match(/class/g));
+```
+
+`Vegetable` يجب أن يتم انشاء مثيل له.
+
+```js
+assert(() => {
+  const a = new Vegetable('apple');
+  return typeof a === 'object';
+});
+```
+
+`carrot.name` يجب أن يرجع `carrot`.
+
+```js
+assert(carrot.name == 'carrot');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Only change code below this line
+
+// Only change code above this line
+
+const carrot = new Vegetable('carrot');
+console.log(carrot.name); // Should display 'carrot'
+```
+
+# --solutions--
+
+```js
+class Vegetable {
+  constructor(name) {
+    this.name = name;
+  }
+}
+const carrot = new Vegetable('carrot');
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays.md
new file mode 100644
index 00000000000..0710d83fe2b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-arrays.md
@@ -0,0 +1,71 @@
+---
+id: 587d7b89367417b2b2512b4b
+title: Use Destructuring Assignment to Assign Variables from Arrays
+challengeType: 1
+forumTopicId: 301213
+dashedName: use-destructuring-assignment-to-assign-variables-from-arrays
+---
+
+# --description--
+
+ES6 يجعل تفصيص الـ arrays بمعني destructuring arrays سهل مثل تفصيص الـ objects او destructuring objects.
+
+ويتمثل أحد الاختلافات الرئيسية بين spread operator و array destructuring في أن الـ spread operator يقوم بفك جميع محتويات الـ array في قائمة مفصولة بفواصل. وبالتالي، لا يمكنك اختيار العناصر التي تريد تعيينها للمتغيرات.
+
+ويسمح لنا Destructuring الـ array بالقيام بذلك بالتحديد:
+
+```js
+const [a, b] = [1, 2, 3, 4, 5, 6];
+console.log(a, b);
+```
+
+ستعرض وحدة التحكم قيم `a` و `b` كـ `1, 2`.
+
+المتغير `a` تم تعيينه القيمة الأولى من الـ array، و `b` تم تعيينه القيمة الثانية من الـ array. يمكننا أيضًا الوصول إلى القيمة في أي فهرس في اي array باستخدام الـ destructuring باستخدام الفواصل للوصول إلى الفهرس المطلوب:
+
+```js
+const [a, b,,, c] = [1, 2, 3, 4, 5, 6];
+console.log(a, b, c);
+```
+
+ستعرض وحدة التحكم قيم `a` و `b` و `c` كـ `1, 2, 5`.
+
+# --instructions--
+
+استخدم destructuring assignment لمبادلة القيم `a` و `b` بحيث أن `a` يتلقى القيمة المخزنة في `b`، و `b` يتلقى القيمة المخزنة في `a`.
+
+# --hints--
+
+قيمة `a` يجب أن تكون `6`، بعد التبديل.
+
+```js
+assert(a === 6);
+```
+
+قيمة `b` يجب أن تكون `8`، بعد التبديل.
+
+```js
+assert(b === 8);
+```
+
+يجب عليك استخدام array destructuring لمبادلة `a` و `b`.
+
+```js
+assert(/\[\s*(\w)\s*,\s*(\w)\s*\]\s*=\s*\[\s*\2\s*,\s*\1\s*\]/g.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let a = 8, b = 6;
+// Only change code below this line
+```
+
+# --solutions--
+
+```js
+let a = 8, b = 6;
+[a, b] = [b, a];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects.md
new file mode 100644
index 00000000000..b1a3078336b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-nested-objects.md
@@ -0,0 +1,106 @@
+---
+id: 587d7b89367417b2b2512b4a
+title: Use Destructuring Assignment to Assign Variables from Nested Objects
+challengeType: 1
+forumTopicId: 301214
+dashedName: use-destructuring-assignment-to-assign-variables-from-nested-objects
+---
+
+# --description--
+
+يمكنك استخدام نفس المبادئ من الدرسين السابقين لعمل destructure للقيم من الـ nested objects او الكائنات المتداخلة.
+
+استخدام object مشابه للأمثلة السابقة:
+
+```js
+const user = {
+  johnDoe: { 
+    age: 34,
+    email: 'johnDoe@freeCodeCamp.com'
+  }
+};
+```
+
+إليك كيفية استخراج قيم خصائص الـ object وتعيينها للمتغيرات بنفس الاسم:
+
+```js
+const { johnDoe: { age, email }} = user;
+```
+
+واليك كيف يمكنك تعيين قيم خصائص الـ object إلى متغيرات بأسماء مختلفة:
+
+```js
+const { johnDoe: { age: userAge, email: userEmail }} = user;
+```
+
+# --instructions--
+
+استبدل التعينين بـ destructuring assignment معادلة لها. يجب أن يستمر في تعيين المتغيرين `lowToday` و `highToday` القيم `today.low` و `today.high` من الـ object الآتي `LOCAL_FORECAST`.
+
+# --hints--
+
+يجب عليك إزالة صيغة تعيين ES5.
+
+```js
+assert(
+  !code.match(/lowToday = LOCAL_FORECAST\.today\.low/g) &&
+    !code.match(/highToday = LOCAL_FORECAST\.today.high/g)
+);
+```
+
+يجب عليك استخدام الـ destructuring لإنشاء المتغير `lowToday`.
+
+```js
+assert(
+  code.match(
+    /(var|const|let)\s*{\s*today\s*:\s*{\s*(low\s*:\s*lowToday[^}]*|[^,]*,\s*low\s*:\s*lowToday\s*)}\s*}\s*=\s*LOCAL_FORECAST(;|\s+|\/\/)/g
+  )
+);
+```
+
+يجب عليك استخدام الـ destructuring لإنشاء المتغير `highToday`.
+
+```js
+assert(
+  code.match(
+    /(var|const|let)\s*{\s*today\s*:\s*{\s*(high\s*:\s*highToday[^}]*|[^,]*,\s*high\s*:\s*highToday\s*)}\s*}\s*=\s*LOCAL_FORECAST(;|\s+|\/\/)/g
+  )
+);
+```
+
+`lowToday` يجب أن يساوي `64` و `highToday` يجب أن يساوي `77`.
+
+```js
+assert(lowToday === 64 && highToday === 77);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const LOCAL_FORECAST = {
+  yesterday: { low: 61, high: 75 },
+  today: { low: 64, high: 77 },
+  tomorrow: { low: 68, high: 80 }
+};
+
+// Only change code below this line
+
+const lowToday = LOCAL_FORECAST.today.low;
+const highToday = LOCAL_FORECAST.today.high;
+
+// Only change code above this line
+```
+
+# --solutions--
+
+```js
+const LOCAL_FORECAST = {
+  yesterday: { low: 61, high: 75 },
+  today: { low: 64, high: 77 },
+  tomorrow: { low: 68, high: 80 }
+};
+
+const { today: { low: lowToday, high: highToday }} = LOCAL_FORECAST;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects.md
new file mode 100644
index 00000000000..9c5d0e5dca1
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-assign-variables-from-objects.md
@@ -0,0 +1,97 @@
+---
+id: 587d7b89367417b2b2512b49
+title: Use Destructuring Assignment to Assign Variables from Objects
+challengeType: 1
+forumTopicId: 301215
+dashedName: use-destructuring-assignment-to-assign-variables-from-objects
+---
+
+# --description--
+
+Destructuring يسمح لك بتعيين اسم متغير جديد عند استخراج القيم. يمكنك القيام بذلك بوضع الاسم الجديد بعد colon و هي علامة النقطتين (:) عند تعيين القيمة.
+
+استخدام نفس الـ object من المثال الأخير:
+
+```js
+const user = { name: 'John Doe', age: 34 };
+```
+
+إليك كيف يمكنك إعطاء أسماء متغيرة جديدة عند التعيين:
+
+```js
+const { name: userName, age: userAge } = user;
+```
+
+يمكنك قراءتها كـ "احصل على قيمة `user.name` وقم بتعيينه إلى متغير جديد يسمى `userName`" وما الي ذلك. قيمة `userName` ستكون السلسلة `John Doe`، وقيمة `userAge` ستكون الرقم `34`.
+
+# --instructions--
+
+استبدل التعينين بـ destructuring assignment معادلة لها. يجب أن يستمر في تعيين المتغيرين `highToday` و `highTomorrow` القيم `today` و `tomorrow` من الـ object الآتي `HIGH_TEMPERATURES`.
+
+# --hints--
+
+يجب عليك إزالة صيغة تعيين ES5.
+
+```js
+assert(
+  !code.match(/highToday = HIGH_TEMPERATURES\.today/g) &&
+    !code.match(/highTomorrow = HIGH_TEMPERATURES\.tomorrow/g)
+);
+```
+
+يجب عليك استخدام الـ destructuring لإنشاء المتغير `highToday`.
+
+```js
+assert(
+  code.match(
+    /(var|const|let)\s*{\s*(today\s*:\s*highToday[^}]*|[^,]*,\s*today\s*:\s*highToday\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g
+  )
+);
+```
+
+يجب عليك استخدام الـ destructuring لإنشاء المتغير `highTomorrow`.
+
+```js
+assert(
+  code.match(
+    /(var|const|let)\s*{\s*(tomorrow\s*:\s*highTomorrow[^}]*|[^,]*,\s*tomorrow\s*:\s*highTomorrow\s*)}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g
+  )
+);
+```
+
+`highToday` يجب أن يساوي `77` و `highTomorrow` يجب أن يساوي `80`.
+
+```js
+assert(highToday === 77 && highTomorrow === 80);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const HIGH_TEMPERATURES = {
+  yesterday: 75,
+  today: 77,
+  tomorrow: 80
+};
+
+// Only change code below this line
+
+const highToday = HIGH_TEMPERATURES.today;
+const highTomorrow = HIGH_TEMPERATURES.tomorrow; 
+
+// Only change code above this line
+```
+
+# --solutions--
+
+```js
+const HIGH_TEMPERATURES = {
+  yesterday: 75,
+  today: 77,
+  tomorrow: 80
+};
+
+const { today: highToday, tomorrow: highTomorrow } = HIGH_TEMPERATURES;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects.md
new file mode 100644
index 00000000000..0f8968774f6
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-extract-values-from-objects.md
@@ -0,0 +1,101 @@
+---
+id: 5cfa550e84205a357704ccb6
+title: Use Destructuring Assignment to Extract Values from Objects
+challengeType: 1
+forumTopicId: 301216
+dashedName: use-destructuring-assignment-to-extract-values-from-objects
+---
+
+# --description--
+
+<dfn>Destructuring assignment</dfn> هي syntax خاص في ES6، لتعيين القيم المأخوذة مباشرة من object.
+
+انظر إلى مثال كود ES5 التالي:
+
+```js
+const user = { name: 'John Doe', age: 34 };
+
+const name = user.name;
+const age = user.age;
+```
+
+`name` ستكون له قيمة السلسلة `John Doe`، و `age` سيكون الرقم `34`.
+
+إليك بيان تعيين (assignment statement) معادل باستخدام ES6 destructuring syntax:
+
+```js
+const { name, age } = user;
+```
+
+مرة أخرى، `name` سيكون له قيمة للسلسلة `John Doe`، و `age` سيكون الرقم `34`.
+
+هنا، سيتم إنشاء متغيرات `name` و `age` وتعيين القيم الخاصة بها من كائن `user`. يمكنكم أن تروا كم هذا افضل بكثير.
+
+يمكنك استخراج العديد أو القليل من القيم من الـ object كما تريد.
+
+# --instructions--
+
+استبدل التعينين بـ destructuring assignment معادلة لها. يجب أن يستمر في تعيين المتغيرين `today` و `tomorrow` القيم `today` و `tomorrow` من الـ object الآتي `HIGH_TEMPERATURES`.
+
+# --hints--
+
+يجب عليك إزالة صيغة تعيين ES5.
+
+```js
+assert(
+  !code.match(/today\s*=\s*HIGH_TEMPERATURES\.(today|tomorrow)/g)
+);
+```
+
+يجب عليك استخدام الـ destructuring لإنشاء المتغير `today`.
+
+```js
+assert(
+  code.match(/(var|let|const)\s*{\s*(today[^}]*|[^,]*,\s*today)\s*}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g)
+);
+```
+
+يجب عليك استخدام الـ destructuring لإنشاء المتغير `tomorrow`.
+
+```js
+assert(
+  code.match(/(var|let|const)\s*{\s*(tomorrow[^}]*|[^,]*,\s*tomorrow)\s*}\s*=\s*HIGH_TEMPERATURES(;|\s+|\/\/)/g)
+);
+```
+
+`today` يجب أن يساوي `77` و `tomorrow` يجب أن يساوي `80`.
+
+```js
+assert(today === 77 && tomorrow === 80);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const HIGH_TEMPERATURES = {
+  yesterday: 75,
+  today: 77,
+  tomorrow: 80
+};
+
+// Only change code below this line
+
+const today = HIGH_TEMPERATURES.today;
+const tomorrow = HIGH_TEMPERATURES.tomorrow;
+
+// Only change code above this line
+```
+
+# --solutions--
+
+```js
+const HIGH_TEMPERATURES = {
+  yesterday: 75,
+  today: 77,
+  tomorrow: 80
+};
+
+const { today, tomorrow } = HIGH_TEMPERATURES;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.md
new file mode 100644
index 00000000000..e4d9dba8766
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters.md
@@ -0,0 +1,94 @@
+---
+id: 587d7b8a367417b2b2512b4d
+title: Use Destructuring Assignment to Pass an Object as a Function's Parameters
+challengeType: 1
+forumTopicId: 301217
+dashedName: use-destructuring-assignment-to-pass-an-object-as-a-functions-parameters
+---
+
+# --description--
+
+في بعض الحالات، يمكنك تفصيص (destructure) الـ object في argument الـ function نفسها.
+
+انظر الي الكود أدناه:
+
+```js
+const profileUpdate = (profileData) => {
+  const { name, age, nationality, location } = profileData;
+
+}
+```
+
+يؤدي هذا فعلياً إلى destructing الـ object الذي يتم إرساله إلى الـ function. يمكن القيام بذلك أيضًا في نفس المكان:
+
+```js
+const profileUpdate = ({ name, age, nationality, location }) => {
+
+}
+```
+
+عندما يتم تمرير `profileData` إلى الـ function أعلاه، يتم تفصيص القيم من معلمة (parameter) الـ function لاستخدامها داخل الـ function.
+
+# --instructions--
+
+استخدم destructuring assignment داخل الـ argument للدالة `half` لإرسال `max` و `min` داخل الـ function.
+
+# --hints--
+
+`stats` يجب أن تكون `object`.
+
+```js
+assert(typeof stats === 'object');
+```
+
+`half(stats)` يجب أن تكون `28.015`
+
+```js
+assert(half(stats) === 28.015);
+```
+
+وينبغي استخدام الـ Destructuring.
+
+```js
+assert(__helpers.removeWhiteSpace(code).match(/half=\({\w+,\w+}\)/));
+```
+
+وينبغي استخدام Destructured parameter.
+
+```js
+assert(!code.match(/stats\.max|stats\.min/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const stats = {
+  max: 56.78,
+  standard_deviation: 4.34,
+  median: 34.54,
+  mode: 23.87,
+  min: -0.75,
+  average: 35.85
+};
+
+// Only change code below this line
+const half = (stats) => (stats.max + stats.min) / 2.0; 
+// Only change code above this line
+```
+
+# --solutions--
+
+```js
+const stats = {
+  max: 56.78,
+  standard_deviation: 4.34,
+  median: 34.54,
+  mode: 23.87,
+  min: -0.75,
+  average: 35.85
+};
+
+const half = ( {max, min} ) => (max + min) / 2.0;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements.md
new file mode 100644
index 00000000000..4710f6775d8
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements.md
@@ -0,0 +1,85 @@
+---
+id: 587d7b8a367417b2b2512b4c
+title: >-
+  Use Destructuring Assignment with the Rest Parameter to Reassign Array Elements
+challengeType: 1
+forumTopicId: 301218
+dashedName: >-
+  use-destructuring-assignment-with-the-rest-parameter-to-reassign-array-elements
+---
+
+# --description--
+
+في بعض المواقف التي تتضمن array destructuring، قد نرغب في تجميع باقي العناصر في array منفصلة.
+
+النتيجة مشابهة لـ `Array.prototype.slice()`، كما هو موضح أدناه:
+
+```js
+const [a, b, ...arr] = [1, 2, 3, 4, 5, 7];
+console.log(a, b);
+console.log(arr);
+```
+
+ستعرض وحدة التحكم القيم `1, 2` و `[3, 4, 5, 7]`.
+
+المتغيرات `a` و `b` تأخذ القيم الأولى والثانية من الـ array. بعد ذلك، بسبب وجود rest parameter، الـ `arr` يحصل على بقية القيم في شكل array. يعمل العنصر rest بشكل صحيح فقط كآخر متغير في القائمة. بمعني انه لا يمكنك استخدام rest parameter لالتقاط subarray (اي array فرعية) تترك العنصر الأخير من الـ array الأصلية.
+
+# --instructions--
+
+استخدم destructuring assignment مع rest parameter لأداء `Array.prototype.slice()` بحيث يكون `arr` هو sub-array من الـ array الأصلية `source` مع حذف العنصرين الأولين.
+
+# --hints--
+
+`arr` يجب أن يكون `[3,4,5,6,7,8,9,10]`
+
+```js
+assert(arr.every((v, i) => v === i + 3) && arr.length === 8);
+```
+
+`source` يجب ان يكون `[1,2,3,4,5,6,7,8,9,10]`
+
+```js
+assert(source.every((v, i) => v === i + 1) && source.length === 10);
+```
+
+`Array.slice()` لا ينبغي استخدامه.
+
+```js
+(getUserInput) => assert(!getUserInput('index').match(/slice/g));
+```
+
+يجب استخدام Destructuring علي `list`.
+
+```js
+assert(
+  __helpers
+    .removeWhiteSpace(code)
+    .match(/\[(([_$a-z]\w*)?,){1,}\.\.\.arr\]=list/i)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const source = [1,2,3,4,5,6,7,8,9,10];
+function removeFirstTwo(list) {
+  // Only change code below this line
+  const arr = list; // Change this line
+  // Only change code above this line
+  return arr;
+}
+const arr = removeFirstTwo(source);
+```
+
+# --solutions--
+
+```js
+const source = [1,2,3,4,5,6,7,8,9,10];
+function removeFirstTwo(list) {
+  const [, , ...arr] = list;
+  return arr;
+}
+const arr = removeFirstTwo(source);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.md
new file mode 100644
index 00000000000..fadc144a1bd
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-export-to-share-a-code-block.md
@@ -0,0 +1,85 @@
+---
+id: 587d7b8c367417b2b2512b56
+title: Use export to Share a Code Block
+challengeType: 1
+forumTopicId: 301219
+dashedName: use-export-to-share-a-code-block
+---
+
+# --description--
+
+تخيل ملف يسمى `math_functions.js` يحتوي على عدة functions ذات صلة بالعمليات الرياضية. واحد منها مخزن في متغير، `add`، والذي يأخذ رقمين ويعيد مجموعهم. تريد استخدام هذه الدالة في عدة ملفات جافا سكريبت مختلفة. من أجل مشاركتها مع هذه الملفات الأخرى، تحتاج أولاً الي ان تصدرها باستخدام `export`.
+
+```js
+export const add = (x, y) => {
+  return x + y;
+}
+```
+
+بالاعلى طريقة شائعة لتصدير دالة واحدة (export single function)، ولكن يمكنك تحقيق نفس الشيء هكذا:
+
+```js
+const add = (x, y) => {
+  return x + y;
+}
+
+export { add };
+```
+
+عند تصدير (export) متغير أو دالة، يمكنك استيراده (import) في ملف آخر واستخدامه دون الحاجة إلى إعادة كتابة الكود. يمكنك تصدير (export) أشياء متعددة بتكرار المثال الأول لكل شيء تريد تصديره، أو بوضعها كلها في export statement من المثال الثاني، مثل هذا:
+
+```js
+export { add, subtract };
+```
+
+# --instructions--
+
+هناك دالتين متعلقتين بالـ strings في المحرر. قم بعمل export لكليهما باستخدام الطريقة التي تختارها.
+
+# --hints--
+
+يجب عليك تصدير `uppercaseString` بشكل صحيح.
+
+```js
+assert(
+  code.match(
+    /(export\s+const\s+uppercaseString|export\s*{\s*(uppercaseString[^}]*|[^,]*,\s*uppercaseString\s*)})/g
+  )
+);
+```
+
+يجب عليك تصدير `lowercaseString` بشكل صحيح.
+
+```js
+assert(
+  code.match(
+    /(export\s+const\s+lowercaseString|export\s*{\s*(lowercaseString[^}]*|[^,]*,\s*lowercaseString\s*)})/g
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const uppercaseString = (string) => {
+  return string.toUpperCase();
+}
+
+const lowercaseString = (string) => {
+  return string.toLowerCase()
+}
+```
+
+# --solutions--
+
+```js
+export const uppercaseString = (string) => {
+  return string.toUpperCase();
+}
+
+export const lowercaseString = (string) => {
+  return string.toLowerCase()
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md
new file mode 100644
index 00000000000..1018ec1e630
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-getters-and-setters-to-control-access-to-an-object.md
@@ -0,0 +1,174 @@
+---
+id: 587d7b8c367417b2b2512b54
+title: استخدام الـ getters والـ setters للتحكم في الوصول إلى الكائن
+challengeType: 1
+forumTopicId: 301220
+dashedName: use-getters-and-setters-to-control-access-to-an-object
+---
+
+# --description--
+
+يمكنك الحصول على قيم من الكائن وتعيين قيمة لخاصية داخل الكائن.
+
+هذه تسمى تقليديا بـ <dfn>getters</dfn> و <dfn>setters</dfn>.
+
+الغرض من دوال Getter هو ببساطة إرجاع قيمة المتغير الخاص (private) لكائن ما إلى المستخدم دون الوصول قاصدًا إلى المتغير الخاص.
+
+الغرض من وظائف Setter هو ببساطة تعيين قيمة المتغير الخاص لكائن ما استناداً إلى القيمة التي تمرر إلى وظيفة الـ setter. قد يتضمن هذا التغيير عمليات حسابية، أو حتى الكتابة فوق القيمة السابقة بالكامل.
+
+```js
+class Book {
+  constructor(author) {
+    this._author = author;
+  }
+  // getter
+  get writer() {
+    return this._author;
+  }
+  // setter
+  set writer(updatedAuthor) {
+    this._author = updatedAuthor;
+  }
+}
+const novel = new Book('anonymous');
+console.log(novel.writer);
+novel.writer = 'newAuthor';
+console.log(novel.writer);
+```
+
+ستعرض وحدة التحكم السلسلتين strings باسم `anonymous` و `newAuthor`.
+
+لاحظ الصيغة المستخدمة لاستدعاء getter و setter. حتى أنها لا تشبه الوظائف العادية. تعتبر الـ Getters و Setters مهمة لأنها تخفي تفاصيل التنفيذ الداخلية.
+
+**ملاحظة:** من المألوف أن يسبق اسم المتغير الخاص برمز underscore هيئته (`_`). ومع ذلك، فإن الرمز نفسه لا يجعل المتغير خاصًا.
+
+# --instructions--
+
+استخدم كلمة `class` لإنشاء فئة `Thermostat`. يقبل `constructor` درجة حرارة فهرنهايت (Fahrenheit).
+
+في الفئة، أنشئ `getter` للحصول على درجة الحرارة بالدرجة المئوية و `setter` لضبط درجة الحرارة بالدرجة المئوية.
+
+تذكر أن `C = 5/9 * (F - 32)` و `F = C * 9.0 / 5 + 32`، حيث `F` هي قيمة درجة الحرارة بالفهرنهايت، و `C` هي قيمة درجة الحرارة نفسها بالدرجة المئوية.
+
+**ملاحظة:** عند تنفيذ هذا، فسوف تتبع درجة الحرارة داخل الفئة في مقياس واحد، إما فهرنهايت أو مئوية.
+
+هذه هي قوة الـ setter و getter. أنت تقوم بإنشاء API لمستخدم آخر، يمكنه الحصول على النتيجة الصحيحة بغض النظر عن أي واحد تتبعه.
+
+بمعنى آخر، أنت تجرد تفاصيل التنفيذ من المستخدم.
+
+# --hints--
+
+`Thermostat` يجب أن يكون `class` مع وظيفة `constructor` محددة.
+
+```js
+assert(
+  typeof Thermostat === 'function' &&
+    typeof Thermostat.constructor === 'function'
+);
+```
+
+يجب استخدام كلمة `class`.
+
+```js
+assert(code.match(/class/g));
+```
+
+`Thermostat` يجب أن يتم انشاء مثيل له.
+
+```js
+assert(
+  (() => {
+    const t = new Thermostat(122);
+    return typeof t === 'object';
+  })()
+);
+```
+
+عند إنشاء مثيل بقيمة فهرنهايت، يجب أن يضبط `Thermostat` درجة الحرارة الصحيحة `temperature`.
+
+```js
+assert(
+  (() => {
+    const t = new Thermostat(122);
+    return t.temperature === 50;
+  })()
+);
+```
+
+يجب تعريف `getter`.
+
+```js
+assert(
+  (() => {
+    const desc = Object.getOwnPropertyDescriptor(
+      Thermostat.prototype,
+      'temperature'
+    );
+    return !!desc && typeof desc.get === 'function';
+  })()
+);
+```
+
+يجب تعريف `setter`.
+
+```js
+assert(
+  (() => {
+    const desc = Object.getOwnPropertyDescriptor(
+      Thermostat.prototype,
+      'temperature'
+    );
+    return !!desc && typeof desc.set === 'function';
+  })()
+);
+```
+
+استدعاء `setter` مع قيمة مئوية يجب أن تحدد `temperature`.
+
+```js
+assert(
+  (() => {
+    const t = new Thermostat(32);
+    t.temperature = 26;
+    const u = new Thermostat(32);
+    u.temperature = 50;
+    return t.temperature === 26 && u.temperature === 50;
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Only change code below this line
+
+// Only change code above this line
+
+const thermos = new Thermostat(76); // Setting in Fahrenheit scale
+let temp = thermos.temperature; // 24.44 in Celsius
+thermos.temperature = 26;
+temp = thermos.temperature; // 26 in Celsius
+```
+
+# --solutions--
+
+```js
+class Thermostat {
+  constructor(fahrenheit) {
+    this._tempInCelsius = 5/9 * (fahrenheit - 32);
+  }
+  get temperature(){
+    return this._tempInCelsius;
+  }
+  set temperature(newTemp){
+    this._tempInCelsius = newTemp;
+  }
+}
+
+const thermos = new Thermostat(76); // Setting in Fahrenheit scale
+let temp = thermos.temperature; // 24.44 in Celsius
+thermos.temperature = 26;
+temp = thermos.temperature; // 26 in Celsius
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md
new file mode 100644
index 00000000000..2f8b50dcff9
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-the-rest-parameter-with-function-parameters.md
@@ -0,0 +1,80 @@
+---
+id: 587d7b88367417b2b2512b47
+title: Use the Rest Parameter with Function Parameters
+challengeType: 1
+forumTopicId: 301221
+dashedName: use-the-rest-parameter-with-function-parameters
+---
+
+# --description--
+
+من أجل مساعدتنا في إنشاء functions أكثر مرونة، يوفر ES6 الـ <dfn>rest parameters</dfn> للـ function parameters. مع rest parameter، يمكنك إنشاء functions تأخذ عددا متغيرا من الـ arguments. يتم تخزين هذه الـ arguments في array يمكن الوصول إليها في وقت لاحق من داخل الـ function.
+
+تحقق من هذا الكود:
+
+```js
+function howMany(...args) {
+  return "You have passed " + args.length + " arguments.";
+}
+console.log(howMany(0, 1, 2));
+console.log(howMany("string", null, [1, 2, 3], { }));
+```
+
+ستعرض وحدة التحكم السلاسل `You have passed 3 arguments.` و `You have passed 4 arguments.`.
+
+الـ rest parameter تزيل الحاجة إلى التحقق من array الـ `args` وتسمح لنا بتطبيق `map()` و `filter()` و `reduce()` على array المعلمات (parameters).
+
+# --instructions--
+
+قم بتعديل الدالة `sum` باستخدام rest parameter بطريقة تجعل الدالة `sum` قادرة على أخذ أي عدد من الـ arguments وإرجاع مجموعها.
+
+# --hints--
+
+نتيجة `sum(0,1,2)` يجب أن تكون 3
+
+```js
+assert(sum(0, 1, 2) === 3);
+```
+
+نتيجة `sum(1,2,3,4)` يجب ان تكون 10
+
+```js
+assert(sum(1, 2, 3, 4) === 10);
+```
+
+نتيجة `sum(5)` يجب أن تكون 5
+
+```js
+assert(sum(5) === 5);
+```
+
+نتيجة `sum()` يجب أن تكون 0
+
+```js
+assert(sum() === 0);
+```
+
+`sum` يجب أن يكون arrow function يستخدم rest parameter syntax الآتي (`...`) على معلمة `args`.
+
+```js
+assert(__helpers.removeWhiteSpace(code).match(/sum=\(\.\.\.args\)=>/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const sum = (x, y, z) => {
+  const args = [x, y, z];
+  return args.reduce((a, b) => a + b, 0);
+}
+```
+
+# --solutions--
+
+```js
+const sum = (...args) => {
+  return args.reduce((a, b) => a + b, 0);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md
new file mode 100644
index 00000000000..373f3c0d440
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/use-the-spread-operator-to-evaluate-arrays-in-place.md
@@ -0,0 +1,84 @@
+---
+id: 587d7b89367417b2b2512b48
+title: Use the Spread Operator to Evaluate Arrays In-Place
+challengeType: 1
+forumTopicId: 301222
+dashedName: use-the-spread-operator-to-evaluate-arrays-in-place
+---
+
+# --description--
+
+ES6 يقدم <dfn>spread operator</dfn>، والذي يسمح لنا بتوسيع الـ arrays وغيرها من التعبيرات في الأماكن التي يتوقع أن تكون فيها معلمات أو عناصر متعددة.
+
+كود ES5 أدناه يستخدم `apply()` لحساب القيمة القصوى في الـ array:
+
+```js
+var arr = [6, 89, 3, 45];
+var maximus = Math.max.apply(null, arr);
+```
+
+`maximus` ستكون لة القيمة `89`.
+
+كان علينا استخدام `Math.max.apply(null, arr)` لأن `Math.max(arr)` يرجع `NaN`. `Math.max()` يتوقع الـ arguments مفصولة بفواصل ولكن ليس array. spread operator يجعل قراءة الجملة هذه وصيانتها أفضل بكثير.
+
+```js
+const arr = [6, 89, 3, 45];
+const maximus = Math.max(...arr);
+```
+
+`maximus` ستكون لة القيمة `89`.
+
+`...arr` يعيد array غير معبأ. بعبارة أخرى، إنه يقوم بـ *spread* للـ array. ومع ذلك، فإن spread operator يعمل في مكانه فقط، كما هو الحال في argument لـ functiom أو في array. الكود التالي لن يعمل:
+
+```js
+const spreaded = ...arr;
+```
+
+# --instructions--
+
+انسخ جميع محتويات `arr1` إلى array أخرى `arr2` باستخدام spread operator.
+
+# --hints--
+
+`arr2` يجب أن تكون نسخة صحيحة من `arr1`.
+
+```js
+assert(arr2.every((v, i) => v === arr1[i]) && arr2.length);
+```
+
+`...` يجب استخدام spread operator لتكرار `arr1`.
+
+```js
+assert(code.match(/Array\(\s*\.\.\.arr1\s*\)|\[\s*\.\.\.arr1\s*\]/));
+```
+
+`arr2` يجب أن يبقى دون تغيير عندما يتم تغيير `arr1`.
+
+```js
+assert((arr1, arr2) => {
+  arr1.push('JUN');
+  return arr2.length < arr1.length;
+});
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
+let arr2;
+
+arr2 = [];  // Change this line
+
+console.log(arr2);
+```
+
+# --solutions--
+
+```js
+const arr1 = ['JAN', 'FEB', 'MAR', 'APR', 'MAY'];
+let arr2;
+
+arr2 = [...arr1];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-arrow-functions-with-parameters.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-arrow-functions-with-parameters.md
new file mode 100644
index 00000000000..c05c3287a32
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-arrow-functions-with-parameters.md
@@ -0,0 +1,94 @@
+---
+id: 587d7b88367417b2b2512b44
+title: Write Arrow Functions with Parameters
+challengeType: 1
+forumTopicId: 301223
+dashedName: write-arrow-functions-with-parameters
+---
+
+# --description--
+
+تماما مثل اي function عادي، يمكنك تمرير الـ arguments إلى arrow function.
+
+```js
+const doubler = (item) => item * 2;
+doubler(4);
+```
+
+`doubler(4)` سوف يعيد القيمة `8`.
+
+إذا كان للـ arrow function معلمة واحدة، يمكن حذف الأقواس المرفقة بالمعلمة.
+
+```js
+const doubler = item => item * 2;
+```
+
+ومن الممكن تمرير أكثر من argument واحدة إلى الـ arrow function.
+
+```js
+const multiplier = (item, multi) => item * multi;
+multiplier(4, 2);
+```
+
+`multiplier(4, 2)` سوف يعيد القيمة `8`.
+
+# --instructions--
+
+قم بإعادة كتابة دالة `myConcat` التي تضيف محتويات `arr2` إلى `arr1` بحيث تستخدم الدالة الـ arrow function syntax.
+
+# --hints--
+
+يجب عليك استبدال كلمة `var`.
+
+```js
+(getUserInput) => assert(!getUserInput('index').match(/var/g));
+```
+
+`myConcat` يجب أن يكون متغير ثابت (باستخدام `const`).
+
+```js
+(getUserInput) => assert(getUserInput('index').match(/const\s+myConcat/g));
+```
+
+`myConcat` يجب أن تكون arrow function مع معلمين (two parameters)
+
+```js
+assert(
+  /myConcat=\(\w+,\w+\)=>/.test(code.replace(/\s/g, '')) &&
+    typeof myConcat === 'function'
+);
+```
+
+`myConcat()` يجب أن يعيد `[1, 2, 3, 4, 5]`.
+
+```js
+assert.deepEqual(myConcat([1, 2], [3, 4, 5]), [1, 2, 3, 4, 5]);
+```
+
+لا ينبغي استخدام كلمة `function`.
+
+```js
+(getUserInput) => assert(!getUserInput('index').match(/function/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+var myConcat = function(arr1, arr2) {
+  return arr1.concat(arr2);
+};
+
+console.log(myConcat([1, 2], [3, 4, 5]));
+```
+
+# --solutions--
+
+```js
+const myConcat = (arr1, arr2) =>  {
+  return arr1.concat(arr2);
+};
+
+console.log(myConcat([1, 2], [3, 4, 5]));
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-concise-declarative-functions-with-es6.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-concise-declarative-functions-with-es6.md
new file mode 100644
index 00000000000..8c7482db724
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-concise-declarative-functions-with-es6.md
@@ -0,0 +1,87 @@
+---
+id: 587d7b8b367417b2b2512b50
+title: Write Concise Declarative Functions with ES6
+challengeType: 1
+forumTopicId: 301224
+dashedName: write-concise-declarative-functions-with-es6
+---
+
+# --description--
+
+عند تعريف الـ functions داخل الـ objects في ES5، علينا استخدام الكلمة `function` كما يلي:
+
+```js
+const person = {
+  name: "Taylor",
+  sayHello: function() {
+    return `Hello! My name is ${this.name}.`;
+  }
+};
+```
+
+مع ES6، يمكنك إزالة كلمة `function` والـ colon كلياً عند تعريف الـ functions في الـ objects. إليك مثال على هذا الـ syntax:
+
+```js
+const person = {
+  name: "Taylor",
+  sayHello() {
+    return `Hello! My name is ${this.name}.`;
+  }
+};
+```
+
+# --instructions--
+
+قم بإعادة تشكيل الدالة `setGear` داخل الكائن `bicycle` لاستخدام الـ syntax القصير الموصوف أعلاه.
+
+# --hints--
+
+وينبغي عدم استخدام الـ function expression التقليدي.
+
+```js
+(getUserInput) => assert(!code.match(/function/));
+```
+
+`setGear` يجب أن تكون declarative function.
+
+```js
+assert(
+  typeof bicycle.setGear === 'function' && code.match(/setGear\s*\(.+\)\s*\{/)
+);
+```
+
+`bicycle.setGear(48)` يجب أن تغير قيمة `gear` إلى 48.
+
+```js
+bicycle.setGear(48);
+assert(bicycle.gear === 48);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Only change code below this line
+const bicycle = {
+  gear: 2,
+  setGear: function(newGear) {
+    this.gear = newGear;
+  }
+};
+// Only change code above this line
+bicycle.setGear(3);
+console.log(bicycle.gear);
+```
+
+# --solutions--
+
+```js
+const bicycle = {
+  gear: 2,
+  setGear(newGear) {
+    this.gear = newGear;
+  }
+};
+bicycle.setGear(3);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-object-property-shorthand.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-object-property-shorthand.md
new file mode 100644
index 00000000000..41f458c2c94
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/es6/write-concise-object-literal-declarations-using-object-property-shorthand.md
@@ -0,0 +1,75 @@
+---
+id: 587d7b8a367417b2b2512b4f
+title: Write Concise Object Literal Declarations Using Object Property Shorthand
+challengeType: 1
+forumTopicId: 301225
+dashedName: write-concise-object-literal-declarations-using-object-property-shorthand
+---
+
+# --description--
+
+يضيف ES6 بعض الدعم اللطيف لتعريف الـ objects بسهولة.
+
+ضع في اعتبارك الكود التالي:
+
+```js
+const getMousePosition = (x, y) => ({
+  x: x,
+  y: y
+});
+```
+
+`getMousePosition` هي function بسيطة تعيد object يحتوي على خاصيتين. يوفر ES6 بناء الجملة السهل لإزالة الازدواجية في كتابة `x: x`. يمكنك ببساطة كتابة `x` مرة واحدة، وسيتم تحويله إلى`x: x` (أو ما يعادلها من شيء) خلف الكواليس. إليك نفس الـ function من الأعلى المعاد كتابته لاستخدام هذ الـ syntax الجديد:
+
+```js
+const getMousePosition = (x, y) => ({ x, y });
+```
+
+# --instructions--
+
+قم باستخدام خاصية الـ object القصير مع object literals لإنشاء وإرجاع object بخصائص `name` و `age` و `gender`.
+
+# --hints--
+
+`createPerson("Zodiac Hasbro", 56, "male")` يجب أن يرجع `{name: "Zodiac Hasbro", age: 56, gender: "male"}`.
+
+```js
+assert.deepEqual(
+  { name: 'Zodiac Hasbro', age: 56, gender: 'male' },
+  createPerson('Zodiac Hasbro', 56, 'male')
+);
+```
+
+يجب أن لا يستخدم الكود `key:value`.
+
+```js
+(getUserInput) => assert(!getUserInput('index').match(/:/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const createPerson = (name, age, gender) => {
+  // Only change code below this line
+  return {
+    name: name,
+    age: age,
+    gender: gender
+  };
+  // Only change code above this line
+};
+```
+
+# --solutions--
+
+```js
+const createPerson = (name, age, gender) => {
+  return {
+    name,
+    age,
+    gender
+  };
+};
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md
new file mode 100644
index 00000000000..abe219f0563
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md
@@ -0,0 +1,88 @@
+---
+id: 587d7da9367417b2b2512b67
+title: Add Elements to the End of an Array Using concat Instead of push
+challengeType: 1
+forumTopicId: 301226
+dashedName: add-elements-to-the-end-of-an-array-using-concat-instead-of-push
+---
+
+# --description--
+
+تدور Functional programming حول إنشاء واستخدام functions غير متغيرة.
+
+قدم التحدي الأخير `concat` كطريقة لدمج بين القائمات (arrays) إلى قائمة (array) واحدة جديدة دون تغيير القائمات (arrays) الأصلية. قارن `concat` بـ `push`. يضيف `push` عنصر إلى نهاية قائمة (array) ذاتها التي تفعيل الطريقة عليها، التي تغير تلك القائمة (array). على سبيل المثال:
+
+```js
+const arr = [1, 2, 3];
+arr.push(4, 5, 6);
+```
+
+ستكون `arr` لها قيمة معدلة `[1, 2, 3, 4, 5, 6]`, وهي ليست طريقة البرمجة الوظيفة (functional).
+
+يوفر`concat` طريقة لإضافة عناصر جديدة إلى نهاية قائمة (array) دون أي تأثيرات جانبية متغيرة.
+
+# --instructions--
+
+غيّر وظيفة `nonMutatingPush` بحيث تستخدم `concat` لإضافة `newItem` إلى نهاية `original` دون تغير قائمات `original` أو `newItem`. يجب أن تعيد الدالة array.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك دالة `concat`.
+
+```js
+assert(code.match(/\.concat/g));
+```
+
+يجب ألا يستخدم الكود الخاص بك دالة `push`.
+
+```js
+assert(!code.match(/\.?[\s\S]*?push/g));
+```
+
+يجب ألا تتغير مصفوفة `first`.
+
+```js
+assert(JSON.stringify(first) === JSON.stringify([1, 2, 3]));
+```
+
+يجب ألا تتغير مصفوفة `second`.
+
+```js
+assert(JSON.stringify(second) === JSON.stringify([4, 5]));
+```
+
+`nonMutatingPush([1, 2, 3], [4, 5])` يجب أن ترجع `[1, 2, 3, 4, 5]`.
+
+```js
+assert(
+  JSON.stringify(nonMutatingPush([1, 2, 3], [4, 5])) ===
+    JSON.stringify([1, 2, 3, 4, 5])
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function nonMutatingPush(original, newItem) {
+  // Only change code below this line
+  return original.push(newItem);
+
+  // Only change code above this line
+}
+
+const first = [1, 2, 3];
+const second = [4, 5];
+nonMutatingPush(first, second);
+```
+
+# --solutions--
+
+```js
+function nonMutatingPush(original, newItem) {
+  return original.concat(newItem);
+}
+const first = [1, 2, 3];
+const second = [4, 5];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/apply-functional-programming-to-convert-strings-to-url-slugs.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/apply-functional-programming-to-convert-strings-to-url-slugs.md
new file mode 100644
index 00000000000..91ca7918cf6
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/apply-functional-programming-to-convert-strings-to-url-slugs.md
@@ -0,0 +1,84 @@
+---
+id: 587d7dab367417b2b2512b6d
+title: Apply Functional Programming to Convert Strings to URL Slugs
+challengeType: 1
+forumTopicId: 301227
+dashedName: apply-functional-programming-to-convert-strings-to-url-slugs
+---
+
+# --description--
+
+قد غطت التحديات العديدة الأخيرة عددا من الـ methods المفيدة للـ arrays والـ strings والتي تتبع مبادئ الـ functional programming. لقد تعلمنا أيضًا عن `reduce`، وهي method قوية تستخدم للحد من المشاكل إلى أشكال أبسط. من حساب المتوسطات الي الفرز، اي عملية علي array يمكن تحقيقها بتطبيقا. تذكر أن `map` و `filter` هم حالات خاصة من `reduce`.
+
+دعونا نجمع ما تعلمناه لحل مشكلة عملية.
+
+تحتوي العديد من مواقع إدارة المحتوى (CMS) على عناوين منشور تمت إضافتها إلى جزء من عنوان URL لأغراض مرجعية. على سبيل المثال، إذا قمت بكتابة منشور علي موقع Medium بعنوان `Stop Using Reduce`، من المحتمل أن يكون عنوان URL يحتوي على جزء ما من عنوان المنشور (`.../stop-using-reduce`). ربما كنت قد لاحظت هذا بالفعل على موقع freeCodeCamp.
+
+# --instructions--
+
+قم بملء دالة `urlSlug` بحيث تقوم بتحويل `title` وإرجاع النسخة الموصولة بعلامة الشرطة للـ URL. يمكنك استخدام أي من الـ methods التي يغطيها هذا القسم، ولكن لا تستخدم `replace`. وفيما يلي المتطلبات:
+
+الإدخال عبارة عن string مع مسافات وكلمات title-cased، اي ان اول حرف من كل كلمة يكون حرف كبير (Uppercase)
+
+الإخراج عبارة عن string مع مسافات بين الكلمات التي تم استبدالها بعلامة الشرطة (`-`)
+
+يجب ان تكون جميع الحروف المخرجة lower-case
+
+لا ينبغي أن يحتوي الناتج على أي مسافات
+
+# --hints--
+
+لا ينبغي أن يستخدم الكود الخاص بك `replace` لهذا التحدي.
+
+```js
+assert(!code.match(/\.?[\s\S]*?replace/g));
+```
+
+`urlSlug("Winter Is Coming")` يجب أن يعيد السلسلة `winter-is-coming`.
+
+```js
+assert(urlSlug('Winter Is Coming') === 'winter-is-coming');
+```
+
+`urlSlug(" Winter Is  Coming")`  يجب أن يعيد السلسلة `winter-is-coming`.
+
+```js
+assert(urlSlug(' Winter Is  Coming') === 'winter-is-coming');
+```
+
+`urlSlug("A Mind Needs Books Like A Sword Needs A Whetstone")` يجب أن يعيد السلسلة `a-mind-needs-books-like-a-sword-needs-a-whetstone`.
+
+```js
+assert(
+  urlSlug('A Mind Needs Books Like A Sword Needs A Whetstone') ===
+    'a-mind-needs-books-like-a-sword-needs-a-whetstone'
+);
+```
+
+`urlSlug("Hold The Door")` يجب أن يعيد السلسلة `hold-the-door`.
+
+```js
+assert(urlSlug('Hold The Door') === 'hold-the-door');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Only change code below this line
+function urlSlug(title) {
+
+
+}
+// Only change code above this line
+urlSlug("A Mind Needs Books Like A Sword Needs A Whetstone");
+```
+
+# --solutions--
+
+```js
+function urlSlug(title) {
+  return title.trim().split(/\s+/).join("-").toLowerCase();
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md
new file mode 100644
index 00000000000..1ef26464b18
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/avoid-mutations-and-side-effects-using-functional-programming.md
@@ -0,0 +1,78 @@
+---
+id: 587d7b8e367417b2b2512b5e
+title: تجنب التحولات والآثار الجانبية باستخدام البرمجة الوظيفية Functional Programming
+challengeType: 1
+forumTopicId: 301228
+dashedName: avoid-mutations-and-side-effects-using-functional-programming
+---
+
+# --description--
+
+إذا لم تكتشف ذلك سلفًا، المشكلة في التحدي السابق كانت مع استدعاء `splice` في وظيفة `tabClose()`. لسوء الحظ، `splice` يغير القائمة (array) الأصلية التي تم استدعاء الوظيفة عليها، لذا ففي الاستدعاء الثاني لها استخدمت قائمة (array) معدلة، وأعطت نتائج غير متوقعة.
+
+هذا مثال صغير لنمط أكبر بكثير- يمكنك استدعاء وظيفة (function) على متغير (variable)، قائمة (array)، أو كائن(object)، والوظيفة تغير المتغير أو شيء ما في الكائن.
+
+وأحد المبادئ الأساسية للبرمجة الوظيفية هو عدم تغيير الأشياء. التغييرات تؤدي إلى أعطال. من الأسهل منع الأعطال علما بأن الوظائف الخاصة بك لا تغير أي شيء، بما في ذلك وسيطات الوظيفة أو أي متغير عام.
+
+المثال السابق لم يكن به أي عمليات معقدة ولكن دالة `splice` غيرت القائمة الأصلية، وأسفرت عن حدوث خطأ.
+
+تذكر أنه في البرمجة الوظيفية، تغيير الأشياء يسمى طفرة <dfn>mutation</dfn>، وتسمى النتيجة تأثير جانبي <dfn>side effect</dfn>. من الناحية المثالية، يجب أن تكون الوظيفة <dfn>pure function</dfn>، مما يعني أنها لا تسبب أي تأثيرات جانبية.
+
+حاول أن تتقن هذا النظام وألا تغير أي متغير أو كائن في التعليمات البرمجية.
+
+# --instructions--
+
+اكتب التعليمات البرمجية للوظيفة `incrementer` حتي ترجع قيمة المتغير العام `fixedValue` بعد زيادة قيمته بواحد.
+
+# --hints--
+
+لا ينبغي للوظيفة `incrementer` أن تغير قيمة `fixedValue` (التي هي `4`).
+
+```js
+incrementer();
+assert(fixedValue === 4);
+```
+
+يجب أن تنتج الوظيفة `incrementer` قيمة أكبر من `fixedValue` بواحد.
+
+```js
+const __newValue = incrementer();
+assert(__newValue === 5);
+```
+
+يجب أن تنتج الوظيفة `incrementer` قيمة استناداً إلى قيمة المتغير العام `fixedValue`.
+
+```js
+(function () {
+  fixedValue = 10;
+  const newValue = incrementer();
+  assert(fixedValue === 10 && newValue === 11);
+  fixedValue = 4;
+})();
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// The global variable
+let fixedValue = 4;
+
+function incrementer() {
+  // Only change code below this line
+
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+let fixedValue = 4
+
+function incrementer() {
+  return fixedValue + 1
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/combine-an-array-into-a-string-using-the-join-method.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/combine-an-array-into-a-string-using-the-join-method.md
new file mode 100644
index 00000000000..d51e0e10a2d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/combine-an-array-into-a-string-using-the-join-method.md
@@ -0,0 +1,89 @@
+---
+id: 587d7daa367417b2b2512b6c
+title: Combine an Array into a String Using the join Method
+challengeType: 1
+forumTopicId: 18221
+dashedName: combine-an-array-into-a-string-using-the-join-method
+---
+
+# --description--
+
+يتم استخدام `join` لربط عناصر الـ array معًا لإنشاء string. يأخذ argument للمحدد الذي يتم استخدامه لفصل عناصر الـ array في الـ string.
+
+إليك مثال:
+
+```js
+const arr = ["Hello", "World"];
+const str = arr.join(" ");
+```
+
+`str` ستكون لها قيمة السلسلة `Hello World`.
+# --instructions--
+
+استخدم `join` (من بين methods آخري) داخل الدالة `sentensify` لتكوين جملة من الكلمات في السلسلة `str`. ينبغي أن تعيد الدالة string. على سبيل المثال، `I-like-Star-Wars`> سيتم تحويلها إلى `I like Star Wars`. لهذا التحدي، لا تستخدم `replace`.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك دالة `join`.
+
+```js
+assert(code.match(/\.join/g));
+```
+
+يجب ألا يستخدم الكود الخاص بك دالة `replace`.
+
+```js
+assert(!code.match(/\.?[\s\S]*?replace/g));
+```
+
+`sentensify("May-the-force-be-with-you")` يجب أن يعيد string.
+
+```js
+assert(typeof sentensify('May-the-force-be-with-you') === 'string');
+```
+
+`sentensify("May-the-force-be-with-you")` يجب أن يعيد السلسلة `May the force be with you`.
+
+```js
+assert(sentensify('May-the-force-be-with-you') === 'May the force be with you');
+```
+
+`sentensify("The.force.is.strong.with.this.one")` يجب أن يعيد السلسلة `The force is strong with this one`.
+
+```js
+assert(
+  sentensify('The.force.is.strong.with.this.one') ===
+    'The force is strong with this one'
+);
+```
+
+`sentensify("There,has,been,an,awakening")` يجب أن يعيد السلسلة `There has been an awakening`.
+
+```js
+assert(
+  sentensify('There,has,been,an,awakening') === 'There has been an awakening'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sentensify(str) {
+  // Only change code below this line
+
+
+  // Only change code above this line
+}
+
+sentensify("May-the-force-be-with-you");
+```
+
+# --solutions--
+
+```js
+function sentensify(str) {
+  return str.split(/\W/).join(' ');
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/combine-two-arrays-using-the-concat-method.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/combine-two-arrays-using-the-concat-method.md
new file mode 100644
index 00000000000..54929ec6016
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/combine-two-arrays-using-the-concat-method.md
@@ -0,0 +1,77 @@
+---
+id: 587d7da9367417b2b2512b66
+title: Combine Two Arrays Using the concat Method
+challengeType: 1
+forumTopicId: 301229
+dashedName: combine-two-arrays-using-the-concat-method
+---
+
+# --description--
+
+<dfn>Concatenation</dfn> يعني ضم العناصر من النهاية إلى النهاية. يقدم جافا سكريبت `concat` لكل من الـ strings والـ arrays والتي تعمل بنفس الطريقة. بالنسبة للـ arrays ، يتم استدعاء الـ method علي واحدة، ثم يتم تمرير array أخرى كـ argument لـ `concat`، تضاف إلى نهاية الـ array الأولى. وهي تعيد array جديدة ولا تغير أيا من الـ arrays الأصلية. إليك مثال:
+
+```js
+[1, 2, 3].concat([4, 5, 6]);
+```
+
+الـ array المعادة ستكون `[1, 2, 3, 4, 5, 6]`.
+
+# --instructions--
+
+استخدم `concat` في دالة `nonMutatingConcat` لاضافة `attach` إلى نهاية `original`. يجب أن تعيد الـ function الـ concatenated array.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك دالة `concat`.
+
+```js
+assert(code.match(/\.concat/g));
+```
+
+يجب ألا تتغير مصفوفة `first`.
+
+```js
+assert(JSON.stringify(first) === JSON.stringify([1, 2, 3]));
+```
+
+يجب ألا تتغير مصفوفة `second`.
+
+```js
+assert(JSON.stringify(second) === JSON.stringify([4, 5]));
+```
+
+`nonMutatingConcat([1, 2, 3], [4, 5])` يجب أن ترجع `[1, 2, 3, 4, 5]`.
+
+```js
+assert(
+  JSON.stringify(nonMutatingConcat([1, 2, 3], [4, 5])) ===
+    JSON.stringify([1, 2, 3, 4, 5])
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function nonMutatingConcat(original, attach) {
+  // Only change code below this line
+
+
+  // Only change code above this line
+}
+
+const first = [1, 2, 3];
+const second = [4, 5];
+nonMutatingConcat(first, second);
+```
+
+# --solutions--
+
+```js
+function nonMutatingConcat(original, attach) {
+  return original.concat(attach);
+}
+const first = [1, 2, 3];
+const second = [4, 5];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md
new file mode 100644
index 00000000000..d43f99a977a
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/implement-map-on-a-prototype.md
@@ -0,0 +1,72 @@
+---
+id: 587d7b8f367417b2b2512b62
+title: تنفيذ دالة map على Prototype
+challengeType: 1
+forumTopicId: 301230
+dashedName: implement-map-on-a-prototype
+---
+
+# --description--
+
+كما رأيتم من تطبيق `Array.prototype.map()`، أو `map()` من قبل، فدالة `map` ترجع array من نفس طول الـ array التي استُدعت الدالة عليها. كما أنها لا تغير الـ array الأصلية، طالما أن دالة الـ callback الخاصة بها لا تفعل ذلك.
+
+بمعنى آخر، `map` هي دالة خالصة (pure function)، ومخرجها يعتمد فقط على مدخلاتها. وعلاوة على ذلك، فإنها تأخذ دالة أخرى كوسيطه (argument) لها.
+
+قد تتعلم الكثير عن دالة `map` إذا قمت بتنفيذ الإصدار الخاص بك منها. من المستحسن أن تستخدم حلقات `for` التكرارية أو `Array.prototype.forEach()`.
+
+# --instructions--
+
+اكتب `Array.prototype.myMap()` الخاص بك، والذي يجب أن يتصرف مثل `Array.prototype.map()`. يجب ألا تستخدم دالة `map` المدمجة. يمكن الوصول إلى مثيل (instance) `Array` في دالة `myMap` باستخدام `this`.
+
+# --hints--
+
+`new_s` يجب أن يساوي `[46, 130, 196, 10]`.
+
+```js
+assert(JSON.stringify(new_s) === JSON.stringify([46, 130, 196, 10]));
+```
+
+يجب ألا يستخدم الكود الخاص بك دالة `map`.
+
+```js
+assert(!code.match(/\.?[\s\S]*?map/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// The global variable
+const s = [23, 65, 98, 5];
+
+Array.prototype.myMap = function(callback) {
+  const newArray = [];
+  // Only change code below this line
+
+  // Only change code above this line
+  return newArray;
+};
+
+const new_s = s.myMap(function(item) {
+  return item * 2;
+});
+```
+
+# --solutions--
+
+```js
+const s = [23, 65, 98, 5];
+
+Array.prototype.myMap = function(callback) {
+  const newArray = [];
+  for (const elem of this) {
+    newArray.push(callback(elem));
+  }
+  return newArray;
+};
+
+const new_s = s.myMap(function(item) {
+  return item * 2;
+});
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/implement-the-filter-method-on-a-prototype.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/implement-the-filter-method-on-a-prototype.md
new file mode 100644
index 00000000000..7ecc1798e0a
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/implement-the-filter-method-on-a-prototype.md
@@ -0,0 +1,67 @@
+---
+id: 587d7b8f367417b2b2512b64
+title: Implement the filter Method on a Prototype
+challengeType: 1
+forumTopicId: 301231
+dashedName: implement-the-filter-method-on-a-prototype
+---
+
+# --description--
+
+قد تتعلم الكثير عن دالة `filter` إذا قمت بتنفيذ الإصدار الخاص بك منها. من المستحسن أن تستخدم حلقات `for` التكرارية أو `Array.prototype.forEach()`.
+
+# --instructions--
+
+اكتب `Array.prototype.myFilter()`الخاص بك، والذي يجب أن يتصرف مثل `Array.prototype.filter()`. يجب ألا تستخدم دالة `filter` المدمجة. يمكن الوصول إلى مثيل (instance) `Array` في دالة `myFilter` باستخدام `this`.
+
+# --hints--
+
+`new_s` يجب أن يساوي `[23, 65, 5]`.
+
+```js
+assert(JSON.stringify(new_s) === JSON.stringify([23, 65, 5]));
+```
+
+يجب ألا يستخدم الكود الخاص بك دالة `filter`.
+
+```js
+assert(!code.match(/\.?[\s\S]*?filter/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// The global variable
+const s = [23, 65, 98, 5];
+
+Array.prototype.myFilter = function(callback) {
+  // Only change code below this line
+  const newArray = [];
+  // Only change code above this line
+  return newArray;
+};
+
+const new_s = s.myFilter(function(item) {
+  return item % 2 === 1;
+});
+```
+
+# --solutions--
+
+```js
+const s = [23, 65, 98, 5];
+
+Array.prototype.myFilter = function(callback) {
+  const newArray = [];
+  for (let i = 0; i < this.length; i++) {
+    if (callback(this[i])) newArray.push(this[i]);
+  }
+  return newArray;
+};
+
+const new_s = s.myFilter(function(item) {
+  return item % 2 === 1;
+});
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/introduction-to-currying-and-partial-application.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/introduction-to-currying-and-partial-application.md
new file mode 100644
index 00000000000..e0b29911441
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/introduction-to-currying-and-partial-application.md
@@ -0,0 +1,102 @@
+---
+id: 587d7dab367417b2b2512b70
+title: Introduction to Currying and Partial Application
+challengeType: 1
+forumTopicId: 301232
+dashedName: introduction-to-currying-and-partial-application
+---
+
+# --description--
+
+<dfn>arity</dfn> الـ function هو عدد الـ arguments التي يتطلبها. <dfn>Currying</dfn> الـ function يعني تحويل function من N arity الي N functions of arity 1، اي عدد N من الـ functions التي تأخذ argument واحد.
+
+وبعبارة أخرى، فهي تعيد هيكلة الـ function بحيث يأخذ argument واحدة، ثم يعيد function أخر يأخذ الـ argument التالية، وهكذا.
+
+إليك مثال:
+
+```js
+function unCurried(x, y) {
+  return x + y;
+}
+
+function curried(x) {
+  return function(y) {
+    return x + y;
+  }
+}
+
+const curried = x => y => x + y
+
+curried(1)(2)
+```
+
+`curried(1)(2)` سيعيد `3`.
+
+هذا مفيد في لرنامجك إذا كنت لا تستطيع توفير جميع الـ arguments للـ function في وقت واحد. يمكنك حفظ كل استدعاء للـ function في متغير، والذي سيحتفظ بمرجع الـ function المرتجع الذي يأخذ الـ argument التالية عندما تكون متاحة. إليك مثال يستخدم الـ curried function في المثال أعلاه:
+
+```js
+const funcForY = curried(1);
+console.log(funcForY(2)); // 3
+```
+
+وبالمثل، <dfn>partial application</dfn> يمكن وصفه بأنه تطبيق بعض الـ arguments على function في وقت واحد وإعادة function أخر يطبق على المزيد من الـ arguments. إليك مثال:
+
+```js
+function impartial(x, y, z) {
+  return x + y + z;
+}
+
+const partialFn = impartial.bind(this, 1, 2);
+partialFn(10); // 13
+```
+
+# --instructions--
+
+املأ نص الدالة `add` بحيث تستخدم خاصية curry لإضافة المعلمات `x` و `y` و `z`.
+
+# --hints--
+
+`add(10)(20)(30)` يجب أن يرجع `60`.
+
+```js
+assert(add(10)(20)(30) === 60);
+```
+
+`add(1)(2)(3)` يجب أن يرجع `6`.
+
+```js
+assert(add(1)(2)(3) === 6);
+```
+
+`add(11)(22)(33)` يجب أن يرجع `66`.
+
+```js
+assert(add(11)(22)(33) === 66);
+```
+
+يجب أن يتضمن الكود الخاص بك بيانا نهائيا يرجع `x + y + z`.
+
+```js
+assert(code.match(/[xyz]\s*?\+\s*?[xyz]\s*?\+\s*?[xyz]/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function add(x) {
+  // Only change code below this line
+
+
+  // Only change code above this line
+}
+
+add(10)(20)(30);
+```
+
+# --solutions--
+
+```js
+const add = x => y => z => x + y + z
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md
new file mode 100644
index 00000000000..0bdc441e18c
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/learn-about-functional-programming.md
@@ -0,0 +1,86 @@
+---
+id: 587d7b8d367417b2b2512b5b
+title: Learn About Functional Programming
+challengeType: 1
+forumTopicId: 301233
+dashedName: learn-about-functional-programming
+---
+
+# --description--
+
+الـ Functional programming هي أسلوب للبرمجة تكون فيه الحلول عبارة عن functions بسيطة ومنعزلة، بدون أي تأثيرات جانبية خارج نطاق الدالة: `INPUT -> PROCESS -> OUTPUT`
+
+Functional programming تتعلق بما يلي:
+
+1) Isolated functions - لا يوجد اعتماد على حالة البرنامج، الذي يشمل المتغيرات الـ global القابلة للتغيير
+
+2) Pure functions - نفس الإدخال يعطي دائمًا نفس الإخراج
+
+(3) الـ functions ذات التأثيرات الجانبية المحدودة - أي تغييرات أو تحولات في حالة البرنامج خارج الـ function تخضع للتحكم الدقيق
+
+# --instructions--
+
+يصادف أن أعضاء freeCodeCamp يحبون الشاي.
+
+في محرر الكود، تم بالفعل تعريف الدوال `prepareTea` و `getTea` من أجلك. قم باستدعاء دالة `getTea` للحصول على 40 كوب من الشاي للفريق، وتخزينها في متغير `tea4TeamFCC`.
+
+# --hints--
+
+يجب أن يحتوي متغير `tea4TeamFCC` على 40 كوب من الشاي للفريق.
+
+```js
+assert(tea4TeamFCC.length === 40);
+```
+
+يجب أن يحتوي متغير `tea4TeamFCC` على أكواب الشاي الأخضر.
+
+```js
+assert(tea4TeamFCC[0] === 'greenTea');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Function that returns a string representing a cup of green tea
+const prepareTea = () => 'greenTea';
+
+/*
+Given a function (representing the tea type) and number of cups needed, the
+following function returns an array of strings (each representing a cup of
+a specific type of tea).
+*/
+const getTea = (numOfCups) => {
+  const teaCups = [];
+
+  for(let cups = 1; cups <= numOfCups; cups += 1) {
+    const teaCup = prepareTea();
+    teaCups.push(teaCup);
+  }
+  return teaCups;
+};
+
+// Only change code below this line
+const tea4TeamFCC = null;
+// Only change code above this line
+```
+
+# --solutions--
+
+```js
+const prepareTea = () => 'greenTea';
+
+const getTea = (numOfCups) => {
+  const teaCups = [];
+
+  for(let cups = 1; cups <= numOfCups; cups += 1) {
+    const teaCup = prepareTea();
+    teaCups.push(teaCup);
+  }
+
+  return teaCups;
+};
+
+const tea4TeamFCC = getTea(40); 
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md
new file mode 100644
index 00000000000..a5fc5dda085
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/pass-arguments-to-avoid-external-dependence-in-a-function.md
@@ -0,0 +1,74 @@
+---
+id: 587d7b8e367417b2b2512b5f
+title: Pass Arguments to Avoid External Dependence in a Function
+challengeType: 1
+forumTopicId: 301234
+dashedName: pass-arguments-to-avoid-external-dependence-in-a-function
+---
+
+# --description--
+
+التحدي الأخير كان يقترب خطوة من مبادئ الـ functional programming، ولكن لا يزال هناك شيء مفقود.
+
+لم نقم بتغيير قيمة المتغير الـ global، ولكن الدالة `incrementer` لن تعمل بدون وجود المتغير الـ global و هو `fixedValue`، هناك.
+
+وهناك مبدأ آخر للـ functional programming وهو تعريف تبعياتك بشكل صريح. هذا يعني إذا كان الـ function يعتمد على متغير أو object موجود، قم بتمرير هذا المتغير أو الـ object مباشرة إلى الـ function كـ argument.
+
+وهناك عدة نتائج جيدة لهذا المبدأ. الـ function يصبح أسهل لاختباره، فأنت تعرف بالضبط المدخلات التي يتطلبها، ولن يعتمد على أي شيء آخر في برنامجك.
+
+يمكن أن يمنحك هذا المزيد من الثقة عند تغيير أو إزالة أو إضافة كود جديد. ستعرف ما يمكنك تغييره وما لا يمكنك تغييره ويمكنك أن ترى مكان الافخاخ المحتملة.
+
+وأخيرا، سينتج الـ function دائما نفس الناتج لنفس المجموعة من المدخلات، بغض النظر عن الجزء من الكود الذي ينفذه.
+
+# --instructions--
+
+دعونا نقوم بتحديث دالة `incrementer` لنعرف بوضوح تبعياتها.
+
+اكتب دالة `incrementer` بحيث أنها تأخذ arguments، ثم ترجع نتيجة بعد زيادة القيمة بواحد.
+
+# --hints--
+
+لا ينبغي للدالة `incrementer` أن تغير قيمة `fixedValue` (والتي هي `4`).
+
+```js
+assert(fixedValue === 4);
+```
+
+يجب أن تأخذ دالة `incrementer` الخاصة بك، argument.
+
+```js
+assert(incrementer.length === 1);
+```
+
+يجب أن تعيد دالة `incrementer` قيمة أكبر من `fixedValue` بواحد.
+
+```js
+const __newValue = incrementer(fixedValue);
+assert(__newValue === 5);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// The global variable
+let fixedValue = 4;
+
+// Only change code below this line
+function incrementer() {
+
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+let fixedValue = 4;
+
+function incrementer(fixedValue) {
+  return fixedValue + 1;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md
new file mode 100644
index 00000000000..bf621c24905
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/refactor-global-variables-out-of-functions.md
@@ -0,0 +1,133 @@
+---
+id: 587d7b8f367417b2b2512b60
+title: Refactor Global Variables Out of Functions
+challengeType: 1
+forumTopicId: 301235
+dashedName: refactor-global-variables-out-of-functions
+---
+
+# --description--
+
+وقد شهدنا حتى الآن مبدأين متميزين للـ functional programming:
+
+1) لا تغير متغير (variable) أو object - قم بإنشاء متغيرات و objects جديدة و قم بإرجاعها إذا لزم الأمر من function. تلميح: باستخدام شيء مثل `const newArr = arrVar`، حيث `arrVar` هو array، سوف يقوم ببساطة بإنشاء مرجع إلى المتغير الحالي وليس نسخة. لذا فإن تغيير قيمة في `newArr` سيغير القيمة في `arrVar`.
+
+2) تعريف معلمات الدالة - أي حساب داخل الـ function يعتمد فقط على الـ arguments التي تحال إلى الـ function، وليس على أي global object أو متغير.
+
+إن إضافة واحد إلى رقما ليس مثيراً جداً، ولكن يمكننا تطبيق هذه المبادئ عند العمل مع arrays أو objects أكثر تعقيداً.
+
+# --instructions--
+
+أعد كتابة الكود حتى لا يتم تغيير الـ array العامة `bookList` داخل أي من الـ functions. يجب أن تضيف دالة `add` الـ `bookName` إلى نهاية الـ array الذي تم تمريره إليه وإعادة array جديدة (قائمة). يجب أن تقوم دالة `remove` بإزالة `bookName` من الـ array الذي تم تمريره إليه.
+
+**ملاحظة:** يجب أن تعيد كلتا الدالتين، array، وينبغي إضافة أي معلمات جديدة قبل معلمة `bookName`.
+
+# --hints--
+
+`bookList` لا يجب أن تتغير وان تظل متساوية الي `["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"]`.
+
+```js
+add(bookList, "Test");
+remove(bookList, "The Hound of the Baskervilles");
+assert(
+  JSON.stringify(bookList) ===
+    JSON.stringify([
+      'The Hound of the Baskervilles',
+      'On The Electrodynamics of Moving Bodies',
+      'Philosophiæ Naturalis Principia Mathematica',
+      'Disquisitiones Arithmeticae'
+    ])
+);
+```
+
+`add(bookList, "A Brief History of Time")` يجب أن تعيد `["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"]`.
+
+```js
+assert(
+  JSON.stringify(add(bookList, "A Brief History of Time")) ===
+    JSON.stringify([
+      'The Hound of the Baskervilles',
+      'On The Electrodynamics of Moving Bodies',
+      'Philosophiæ Naturalis Principia Mathematica',
+      'Disquisitiones Arithmeticae',
+      'A Brief History of Time'
+    ])
+);
+```
+
+`remove(bookList, "On The Electrodynamics of Moving Bodies")` يجب أن تعيد `["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"]`.
+
+```js
+assert(
+  JSON.stringify(remove(bookList, 'On The Electrodynamics of Moving Bodies')) ===
+    JSON.stringify([
+      'The Hound of the Baskervilles',
+      'Philosophiæ Naturalis Principia Mathematica',
+      'Disquisitiones Arithmeticae'
+    ])
+);
+```
+
+`remove(add(bookList, "A Brief History of Time"), "On The Electrodynamics of Moving Bodies");` يجب أن تعيد `["The Hound of the Baskervilles", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae", "A Brief History of Time"]`.
+
+```js
+assert(
+  JSON.stringify(remove(add(bookList, 'A Brief History of Time'), 'On The Electrodynamics of Moving Bodies')) ===
+    JSON.stringify([
+      'The Hound of the Baskervilles',
+      'Philosophiæ Naturalis Principia Mathematica',
+      'Disquisitiones Arithmeticae',
+      'A Brief History of Time'
+    ])
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// The global variable
+const bookList = ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"];
+
+// Change code below this line
+function add(bookName) {
+
+  bookList.push(bookName);
+  return bookList;
+
+  // Change code above this line
+}
+
+// Change code below this line
+function remove(bookName) {
+  const book_index = bookList.indexOf(bookName);
+  if (book_index >= 0) {
+
+    bookList.splice(book_index, 1);
+    return bookList;
+
+    // Change code above this line
+    }
+}
+```
+
+# --solutions--
+
+```js
+// The global variable
+const bookList = ["The Hound of the Baskervilles", "On The Electrodynamics of Moving Bodies", "Philosophiæ Naturalis Principia Mathematica", "Disquisitiones Arithmeticae"];
+
+function add(bookList, bookName) {
+  return [...bookList, bookName];
+}
+
+function remove(bookList, bookName) {
+  const bookListCopy = [...bookList];
+  const bookNameIndex = bookList.indexOf(bookName);
+  if (bookNameIndex >= 0) {
+    bookListCopy.splice(bookNameIndex, 1);
+  }
+  return bookListCopy;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md
new file mode 100644
index 00000000000..50b435c671f
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/remove-elements-from-an-array-using-slice-instead-of-splice.md
@@ -0,0 +1,84 @@
+---
+id: 9d7123c8c441eeafaeb5bdef
+title: Remove Elements from an Array Using slice Instead of splice
+challengeType: 1
+forumTopicId: 301236
+dashedName: remove-elements-from-an-array-using-slice-instead-of-splice
+---
+
+# --description--
+
+من الانماط الشائعة أثناء العمل مع ال arrays هو عندما تريد إزالة العناصر والحفاظ على بقية الـ array. يقدم JavaScript طريقة `splice` للقيام بذلك، والتي تأخذ arguments لفهرس مكان بدء إزالة العناصر، ثم عدد العناصر المراد إزالتها. إذا لم يتم تقديم الـ argument الثانية، فالافتراضي هو إزالة العناصر حتي النهاية. ومع ذلك، فإن طريقة `splice` تغير الـ array الأصلية التي يتم استدعاؤها عليها. إليك مثال:
+
+```js
+const cities = ["Chicago", "Delhi", "Islamabad", "London", "Berlin"];
+cities.splice(3, 1);
+```
+
+هنا `splice` ترجع السلسلة `London` وتحذفها من cities array. `cities` سيكون لها القيمة `["Chicago", "Delhi", "Islamabad", "Berlin"]`.
+
+وكما رأينا في التحدي الأخير، فإن طريقة `slice` لا تغير الـ array الأصلية، ولكن ترجع واحدة جديدة يمكن حفظها في متغير. تذكر أن طريقة `slice` تأخذ وسيطين (arguments) للفهارس لبدء الـ slice وإنهائه (النهاية غير مشمولة) ، وإرجاع هذه العناصر في array جديدة. ويساعد استخدام طريقة `slice` بدلاً من `splice` على تجنب أي تأثيرات جانبية تغير في الـ array.
+
+# --instructions--
+
+قم بإعادة كتابة الدالة `nonMutatingSplice` باستخدام `slice` بدلاً من `splice`. يجب أن يقصر طول مصفوفة `cities` المقدمة على 3، ويعيد array جديدة تحتوي على العناصر الثلاثة الأولى فقط.
+
+لا تقم بتغيير ال array الأصلية المقدمة للـ function.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك دالة `slice`.
+
+```js
+assert(code.match(/\.slice/g));
+```
+
+يجب ألا يستخدم الكود الخاص بك دالة `splice`.
+
+```js
+assert(!code.match(/\.?[\s\S]*?splice/g));
+```
+
+يجب ألا تتغير مصفوفة `inputCities`.
+
+```js
+assert(
+  JSON.stringify(inputCities) ===
+    JSON.stringify(['Chicago', 'Delhi', 'Islamabad', 'London', 'Berlin'])
+);
+```
+
+`nonMutatingSplice(["Chicago", "Delhi", "Islamabad", "London", "Berlin"])` يجب أن ترجع `["Chicago", "Delhi", "Islamabad"]`.
+
+```js
+assert(
+  JSON.stringify(
+    nonMutatingSplice(['Chicago', 'Delhi', 'Islamabad', 'London', 'Berlin'])
+  ) === JSON.stringify(['Chicago', 'Delhi', 'Islamabad'])
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function nonMutatingSplice(cities) {
+  // Only change code below this line
+  return cities.splice(3);
+
+  // Only change code above this line
+}
+
+const inputCities = ["Chicago", "Delhi", "Islamabad", "London", "Berlin"];
+nonMutatingSplice(inputCities);
+```
+
+# --solutions--
+
+```js
+function nonMutatingSplice(cities) {
+  return cities.slice(0,3);
+}
+const inputCities = ["Chicago", "Delhi", "Islamabad", "London", "Berlin"];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md
new file mode 100644
index 00000000000..cc07df5eb51
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-a-sorted-array-without-changing-the-original-array.md
@@ -0,0 +1,90 @@
+---
+id: 587d7da9367417b2b2512b6a
+title: Return a Sorted Array Without Changing the Original Array
+challengeType: 1
+forumTopicId: 301237
+dashedName: return-a-sorted-array-without-changing-the-original-array
+---
+
+# --description--
+
+التأثير الجانبي لـ `sort` هو أنه يغير ترتيب العناصر في ال array الأصلية. وبعبارة أخرى، فإنه يغير ال array في مكانها. إحدى الطرق لتجنب ذلك هي أن تقوم أولاً بلزق array فارغة إلى ال array التي يتم فرزها (تذكر أن `slice` و `concat` تعيد array جديدة)، ثم قم بتشغيل `sort`.
+
+# --instructions--
+
+استخدم `sort` في الدالة `nonMutatingSort` لفرز عناصر array بالترتيب التصاعدي. يجب أن تعيد الدالة array جديدا، وليس تغيير متغير `globalArray`.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك دالة `sort`.
+
+```js
+assert(nonMutatingSort.toString().match(/\.sort/g));
+```
+
+متغير `globalArray` يجب ألا يتغير.
+
+```js
+assert(JSON.stringify(globalArray) === JSON.stringify([5, 6, 3, 2, 9]));
+```
+
+`nonMutatingSort(globalArray)` يجب أن يعيد `[2, 3, 5, 6, 9]`.
+
+```js
+assert(
+  JSON.stringify(nonMutatingSort(globalArray)) ===
+    JSON.stringify([2, 3, 5, 6, 9])
+);
+```
+
+`nonMutatingSort(globalArray)` لا ينبغي أن تكون hard coded.
+
+```js
+assert(!nonMutatingSort.toString().match(/\[.*?[23569].*?\]/gs));
+```
+
+وينبغي أن تعيد الدالة array جديدا، وليس ال array التي تمرر إليها.
+
+```js
+assert(nonMutatingSort(globalArray) !== globalArray);
+```
+
+`nonMutatingSort([1, 30, 4, 21, 100000])` يجب ان يعيد `[1, 4, 21, 30, 100000]`.
+
+```js
+assert(JSON.stringify(nonMutatingSort([1, 30, 4, 21, 100000])) ===
+    JSON.stringify([1, 4, 21, 30, 100000]))
+```
+
+`nonMutatingSort([140000, 104, 99])` يجب ان يعيد `[99, 104, 140000]`.
+
+```js
+assert(JSON.stringify(nonMutatingSort([140000, 104, 99])) ===
+    JSON.stringify([99, 104, 140000]))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const globalArray = [5, 6, 3, 2, 9];
+
+function nonMutatingSort(arr) {
+  // Only change code below this line
+
+
+  // Only change code above this line
+}
+
+nonMutatingSort(globalArray);
+```
+
+# --solutions--
+
+```js
+const globalArray = [5, 6, 3, 2, 9];
+function nonMutatingSort(arr) {
+  return [].concat(arr).sort((a,b) => a-b);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-part-of-an-array-using-the-slice-method.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-part-of-an-array-using-the-slice-method.md
new file mode 100644
index 00000000000..8880fc4cc50
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/return-part-of-an-array-using-the-slice-method.md
@@ -0,0 +1,93 @@
+---
+id: 587d7b90367417b2b2512b65
+title: Return Part of an Array Using the slice Method
+challengeType: 1
+forumTopicId: 301239
+dashedName: return-part-of-an-array-using-the-slice-method
+---
+
+# --description--
+
+طريقة `slice` ترجع نسخة من عناصر معينة من ال array. يمكن أن يتطلب الأمر وسيطتين (arguments)، الأولى تعطي فهرس مكان بدء ال slice ، والثانية هي فهرس مكان إنهاء ال slice (وهي غير مشمولة). إذا لم يتم تقديم ال arguments، فإن الافتراضي هو أن يبدأ من بداية ال array حتى النهاية، وهي طريقة سهلة لصنع نسخة من ال array بأكملها. طريقة `slice` لا تغير ال array الأصلية، ولكنها تعيد array جديدة.
+
+إليك مثال:
+
+```js
+const arr = ["Cat", "Dog", "Tiger", "Zebra"];
+const newArray = arr.slice(1, 3);
+```
+
+`newArray` سيكون لها القيمة `["Dog", "Tiger"]`.
+
+# --instructions--
+
+استخدم طريقة `slice` في `sliceArray` لإرجاع جزء من مصفوفة `anim` بالنظر إلى مؤشري `beginSlice` و `endSlice`. يجب أن تعيد الدالة array.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك دالة `slice`.
+
+```js
+assert(code.match(/\.slice/g));
+```
+
+متغير `inputAnim` يجب ألا يتغير.
+
+```js
+assert(
+  JSON.stringify(inputAnim) ===
+    JSON.stringify(['Cat', 'Dog', 'Tiger', 'Zebra', 'Ant'])
+);
+```
+
+`sliceArray(["Cat", "Dog", "Tiger", "Zebra", "Ant"], 1, 3)` يجب ان يعيد `["Dog", "Tiger"]`.
+
+```js
+assert(
+  JSON.stringify(sliceArray(['Cat', 'Dog', 'Tiger', 'Zebra', 'Ant'], 1, 3)) ===
+    JSON.stringify(['Dog', 'Tiger'])
+);
+```
+
+`sliceArray(["Cat", "Dog", "Tiger", "Zebra", "Ant"], 0, 1)` يجب ان يعيد `["Cat"]`.
+
+```js
+assert(
+  JSON.stringify(sliceArray(['Cat', 'Dog', 'Tiger', 'Zebra', 'Ant'], 0, 1)) ===
+    JSON.stringify(['Cat'])
+);
+```
+
+`sliceArray(["Cat", "Dog", "Tiger", "Zebra", "Ant"], 1, 4)` يجب ان يعيد `["Dog", "Tiger", "Zebra"]`.
+
+```js
+assert(
+  JSON.stringify(sliceArray(['Cat', 'Dog', 'Tiger', 'Zebra', 'Ant'], 1, 4)) ===
+    JSON.stringify(['Dog', 'Tiger', 'Zebra'])
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sliceArray(anim, beginSlice, endSlice) {
+  // Only change code below this line
+
+
+  // Only change code above this line
+}
+
+const inputAnim = ["Cat", "Dog", "Tiger", "Zebra", "Ant"];
+sliceArray(inputAnim, 1, 3);
+```
+
+# --solutions--
+
+```js
+function sliceArray(anim, beginSlice, endSlice) {
+  return anim.slice(beginSlice, endSlice);
+}
+const inputAnim = ["Cat", "Dog", "Tiger", "Zebra", "Ant"];
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/sort-an-array-alphabetically-using-the-sort-method.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/sort-an-array-alphabetically-using-the-sort-method.md
new file mode 100644
index 00000000000..b8d6118e5fa
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/sort-an-array-alphabetically-using-the-sort-method.md
@@ -0,0 +1,101 @@
+---
+id: 587d7da9367417b2b2512b69
+title: Sort an Array Alphabetically using the sort Method
+challengeType: 1
+forumTopicId: 18303
+dashedName: sort-an-array-alphabetically-using-the-sort-method
+---
+
+# --description--
+
+طريقة `sort` تقوم بتصنيف عناصر array وفقا ل callback function.
+
+على سبيل المثال:
+
+```js
+function ascendingOrder(arr) {
+  return arr.sort(function(a, b) {
+    return a - b;
+  });
+}
+
+ascendingOrder([1, 5, 2, 3, 4]);
+```
+
+هذا من شأنه أن يعيد القيمة `[1, 2, 3, 4, 5]`.
+
+```js
+function reverseAlpha(arr) {
+  return arr.sort(function(a, b) {
+    return a === b ? 0 : a < b ? 1 : -1;
+  });
+}
+
+reverseAlpha(['l', 'h', 'z', 'b', 's']);
+```
+
+هذا سوف يعيد القيمة `['z', 's', 'l', 'h', 'b']`.
+
+طريقة فرز جافا سكريبت الافتراضية هي بواسطة قيمة string Unicode point، التي قد ترجع نتائج غير متوقعة. لذلك ، يوصى بتوفير callback function لتحديد كيفية فرز عناصر ال array. عندما يتم توفير وظيفة callback function هذه ، والتي تسمى عادةً `compareFunction`، يتم فرز عناصر ال array وفقًا لقيمة الإرجاع الخاصة بـ `compareFunction`: إذا كانت `compareFunction(a,b)` ترجع قيمة أقل من 0 لعنصرين `a` و `b` ، فـ `a` سيأتي قبل `b`. إذا `compareFunction(a,b)` ترجع قيمة أكبر من 0 لعنصرين `a` و `b`، فـ `b` ستأتي قبل `a`. إذا `compareFunction(a,b)` ترجع قيمة تساوي 0 لعنصرين `a` و `b`، ثم سيبقى `a` و `b` دون تغيير.
+
+# --instructions--
+
+استخدم طريقة `sort` في دالة `alphabeticalOrder` لفرز عناصر `arr` بالترتيب الأبجدي. يجب أن تعيد الـ function الـ array مرتبة اي sorted array.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك دالة `sort`.
+
+```js
+assert(code.match(/\.sort/g));
+```
+
+`alphabeticalOrder(["a", "d", "c", "a", "z", "g"])` يجب ان تعيد `["a", "a", "c", "d", "g", "z"]`.
+
+```js
+assert(
+  JSON.stringify(alphabeticalOrder(['a', 'd', 'c', 'a', 'z', 'g'])) ===
+    JSON.stringify(['a', 'a', 'c', 'd', 'g', 'z'])
+);
+```
+
+`alphabeticalOrder(["x", "h", "a", "m", "n", "m"])` يجب ان تعيد `["a", "h", "m", "m", "n", "x"]`.
+
+```js
+assert(
+  JSON.stringify(alphabeticalOrder(['x', 'h', 'a', 'm', 'n', 'm'])) ===
+    JSON.stringify(['a', 'h', 'm', 'm', 'n', 'x'])
+);
+```
+
+`alphabeticalOrder(["a", "a", "a", "a", "x", "t"])` يجب ان تعيد `["a", "a", "a", "a", "t", "x"]`.
+
+```js
+assert(
+  JSON.stringify(alphabeticalOrder(['a', 'a', 'a', 'a', 'x', 't'])) ===
+    JSON.stringify(['a', 'a', 'a', 'a', 't', 'x'])
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function alphabeticalOrder(arr) {
+  // Only change code below this line
+
+  return arr
+  // Only change code above this line
+}
+
+alphabeticalOrder(["a", "d", "c", "a", "z", "g"]);
+```
+
+# --solutions--
+
+```js
+function alphabeticalOrder(arr) {
+  return arr.sort();
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/split-a-string-into-an-array-using-the-split-method.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/split-a-string-into-an-array-using-the-split-method.md
new file mode 100644
index 00000000000..bc2734eea03
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/split-a-string-into-an-array-using-the-split-method.md
@@ -0,0 +1,87 @@
+---
+id: 587d7daa367417b2b2512b6b
+title: Split a String into an Array Using the split Method
+challengeType: 1
+forumTopicId: 18305
+dashedName: split-a-string-into-an-array-using-the-split-method
+---
+
+# --description--
+
+تقسم طريقة `split` سلسلة إلى مجموعة من السلاسل. يتطلب الأمر argument للمحدد ، والذي يمكن أن يكون رمزا لاستخدامه في تفكيك الـ string أو regular expression. على سبيل المثال ، إذا كان المحدِّد مسافة، فستحصل على array من الكلمات ، وإذا كان المحدِّد string فارغ، فستحصل على array من كل رمز في ال string.
+
+في ما يلي مثالان يقسمان string واحد بمسافات، ثم آخر بأرقام باستخدام regular expression:
+
+```js
+const str = "Hello World";
+const bySpace = str.split(" ");
+
+const otherString = "How9are7you2today";
+const byDigits = otherString.split(/\d/);
+```
+
+`bySpace` ستكون له القيمة`["Hello", "World"]` and `byDigits` ستكون له القيمة `["How", "are", "you", "today"]`.
+
+نظرًا لأن ال strings غير قابلة للتغيير، فإن طريقة `split` تجعل من الأسهل التعامل معهم.
+
+# --instructions--
+
+استخدم طريقة `split` داخل دالة `splitify` لتقسيم `str` إلى array من الكلمات. يجب أن تعيد الدالة array. لاحظ أن الكلمات لا تفصل دائما بمسافات ولا ينبغي أن تحتوي ال array على علامات الترقيم.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك دالة `split`.
+
+```js
+assert(code.match(/\.split/g));
+```
+
+`splitify("Hello World,I-am code")` يجب ان يعيد `["Hello", "World", "I", "am", "code"]`.
+
+```js
+assert(
+  JSON.stringify(splitify('Hello World,I-am code')) ===
+    JSON.stringify(['Hello', 'World', 'I', 'am', 'code'])
+);
+```
+
+`splitify("Earth-is-our home")` يجب ان يعيد `["Earth", "is", "our", "home"]`.
+
+```js
+assert(
+  JSON.stringify(splitify('Earth-is-our home')) ===
+    JSON.stringify(['Earth', 'is', 'our', 'home'])
+);
+```
+
+`splitify("This.is.a-sentence")` يجب ان يعيد `["This", "is", "a", "sentence"]`.
+
+```js
+assert(
+  JSON.stringify(splitify('This.is.a-sentence')) ===
+    JSON.stringify(['This', 'is', 'a', 'sentence'])
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function splitify(str) {
+  // Only change code below this line
+
+
+  // Only change code above this line
+}
+
+splitify("Hello World,I-am code");
+```
+
+# --solutions--
+
+```js
+function splitify(str) {
+  return str.split(/\W/);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/understand-functional-programming-terminology.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/understand-functional-programming-terminology.md
new file mode 100644
index 00000000000..5fd8006a04a
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/understand-functional-programming-terminology.md
@@ -0,0 +1,112 @@
+---
+id: 587d7b8e367417b2b2512b5c
+title: Understand Functional Programming Terminology
+challengeType: 1
+forumTopicId: 301240
+dashedName: understand-functional-programming-terminology
+---
+
+# --description--
+
+كان لدى فريق FCC تقلبات مزاجية ويريد الآن نوعين من الشاي: الشاي الأخضر والشاي الأسود. حقائق عامة: تقلبات مزاج العميل شائعة جدًا.
+
+بهذه المعلومات، سنحتاج إلى مراجعة دالة `getTea` من التحدي الأخير للتعامل مع مختلف طلبات الشاي. يمكننا تعديل `getTea` لقبول function كمعلمة (parameter) لتكون قادرة على تغيير نوع الشاي الذي تعيده. هذا يجعل `getTea` أكثر مرونة، ويعطي المبرمج المزيد من التحكم عندما يطلب العميل التغيير.
+
+ولكن أولاً، دعونا نغطي بعض المصطلحات المتعلقة بالـ functions:
+
+<dfn>Callbacks</dfn> هي ال functions التي تمرر إلى fuction أخرى لتحديد استدعاء تلك الـ function. ربما تكون قد رأيت انه قد تم تمريرها إلى methods أخرى ، على سبيل المثال في `filter`، تخبر callback function الجافاسكريبت بمعايير كيفية تصفية (filter) ال array.
+
+ال functions التي يمكن تعيينها إلى متغير، او تمريرها إلى function أخر، أو تعاد من function أخر تماما مثل أي قيمة عادية أخرى، تسمى <dfn>first class</dfn>. في جافا سكريبت، جميع ال functions هي first class functions.
+
+الوظيفة التي تأخذ الوظيفة كحجة، أو تنتج وظيفة كقيمة أنتاج، تسمى <dfn>وظيفة عالي التجريد (higher order function)</dfn>.
+
+عندما يتم تمرير ال functions إلى function أخر أو إرجاعها منه، فإن تلك ال functions التي تم تمريرها أو إرجاعها يمكن أن تسمى <dfn>lambda</dfn>.
+
+# --instructions--
+
+قم بإعداد 27 كوبا من الشاي الأخضر و 13 كوب من الشاي الأسود وتخزينها في متغيرات `tea4GreenTeamFCC` و `tea4BlackTeamFCC` على التوالي. لاحظ أن دالة `getTea` قد تم تعديلها بحيث تأخذ ال function الآن كأول argument.
+
+ملحوظة: البيانات (عدد أكواب الشاي) مقدمة كـ argument أخيرة. سوف نناقش هذا أكثر في دروس لاحقة.
+
+# --hints--
+
+يجب أن يحتوي متغير `tea4GreenTeamFCC` على 27 كوب من الشاي للفريق.
+
+```js
+assert(tea4GreenTeamFCC.length === 27);
+```
+
+يجب أن يحتوي متغير `tea4GreenTeamFCC` على أكواب الشاي الأخضر.
+
+```js
+assert(tea4GreenTeamFCC[0] === 'greenTea');
+```
+
+يجب أن يحتوي متغير `tea4BlackTeamFCC` على 13 كوب من الشاي للفريق.
+
+```js
+assert(tea4BlackTeamFCC.length === 13);
+```
+
+يجب أن يحتوي متغير `tea4BlackTeamFCC` على أكواب من الشاي الأسود.
+
+```js
+assert(tea4BlackTeamFCC[0] === 'blackTea');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Function that returns a string representing a cup of green tea
+const prepareGreenTea = () => 'greenTea';
+
+// Function that returns a string representing a cup of black tea
+const prepareBlackTea = () => 'blackTea';
+
+/*
+Given a function (representing the tea type) and number of cups needed, the
+following function returns an array of strings (each representing a cup of
+a specific type of tea).
+*/
+const getTea = (prepareTea, numOfCups) => {
+  const teaCups = [];
+
+  for(let cups = 1; cups <= numOfCups; cups += 1) {
+    const teaCup = prepareTea();
+    teaCups.push(teaCup);
+  }
+  return teaCups;
+};
+
+// Only change code below this line
+const tea4GreenTeamFCC = null;
+const tea4BlackTeamFCC = null;
+// Only change code above this line
+
+console.log(
+  tea4GreenTeamFCC,
+  tea4BlackTeamFCC
+);
+```
+
+# --solutions--
+
+```js
+const prepareGreenTea = () => 'greenTea';
+const prepareBlackTea = () => 'blackTea';
+
+const getTea = (prepareTea, numOfCups) => {
+  const teaCups = [];
+
+  for(let cups = 1; cups <= numOfCups; cups += 1) {
+    const teaCup = prepareTea();
+    teaCups.push(teaCup);
+  }
+  return teaCups;
+};
+
+const tea4BlackTeamFCC = getTea(prepareBlackTea, 13);
+const tea4GreenTeamFCC = getTea(prepareGreenTea, 27);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.md
new file mode 100644
index 00000000000..e7240dc2c74
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/understand-the-hazards-of-using-imperative-code.md
@@ -0,0 +1,139 @@
+---
+id: 587d7b8e367417b2b2512b5d
+title: Understand the Hazards of Using Imperative Code
+challengeType: 1
+forumTopicId: 301241
+dashedName: understand-the-hazards-of-using-imperative-code
+---
+
+# --description--
+
+Functional programming هي عادة جيدة. إنها تجعل الكود الخاص بك سهل الإدارة، وتحفظك من الأخطاء الخادعة. ولكن قبل أن نصل إلى هناك ، دعنا نلقي نظرة على نهج حتمي للبرمجة لتسليط الضوء على المشكلات التي قد تواجهك.
+
+في اللغة الإنجليزية (والعديد من اللغات الأخرى) ، يتم استخدام صيغة الأمر لإعطاء الأوامر. وبالمثل ، فإن أسلوب الأمر في البرمجة هو الذي يعطي الكمبيوتر مجموعة من العبارات لأداء مهمة ما.
+
+غالبًا ما تغير البيانات حالة البرنامج ، مثل تحديث المتغيرات العالمية(global variables). المثال الكلاسيكي هو كتابة حلقة `for` تعطي توجيهات دقيقة للتكرار على فهارس ال array.
+
+في المقابل ، ال functional programming هي شكل من أشكال البرمجة التصريحية (declarative programming). أنت تخبر الكمبيوتر بما تريد فعله عن طريق استدعاء method أو function.
+
+يقدم جافا سكريبت العديد من ال methods المحددة مسبقاً التي تتعامل مع المهام الشائعة حتى لا تحتاج إلى كتابة كيفية قيام الكمبيوتر بتنفيذها. على سبيل المثال، بدلا من استخدام حلقة `for` المذكورة أعلاه، يمكنك استدعاء `map` التي تتعامل مع تفاصيل التكرار علي array. يساعد هذا في تجنب الأخطاء الدلالية ، مثل "Off By One Errors" التي تمت تغطيتها في قسم ال Debugging.
+
+ضع في اعتبارك هذا السيناريو: أنت تتصفح الويب في متصفحك، وتريد تتبع علامات التبويب التي فتحتها. دعنا نحاول نمذجة هذا باستخدام بعض الكود البسيط ال object-oriented.
+
+Window object مكون من علامات التبويب، وعادة ما يكون لديك أكثر من نافذة مفتوحة. عناوين كل موقع مفتوح في كل Window object محفوظة في array. بعد العمل في المتصفح (فتح علامات تبويب جديدة، دمج النوافذ، وإغلاق علامات التبويب)، تريد طباعة علامات التبويب التي لا تزال مفتوحة. يتم إزالة علامات التبويب المغلقة من ال array ويتم إضافة علامات التبويب الجديدة (للبساطة) إلى نهايتها.
+
+يعرض محرر الكود تنفيذ هذه العملية بدوال لـ `tabOpen()` و `tabClose()` و `join()`. المصفوفة `tabs` هي جزء من الـ Window object التي تخزن اسم الصفحات المفتوحة.
+
+# --instructions--
+
+افحص الكود في المحرر. إنه يستخدم طريقة لها تأثيرات جانبية في البرنامج، تسبب سلوكا خاطئا. القائمة النهائية لعلامات التبويب المفتوحة المخزنة في `finalTabs.tabs` ، يجب أن تكون `['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab']` ولكن القائمة التي ينتجها الكود مختلفة قليلاً.
+
+قم بتغيير `Window.prototype.tabClose` بحيث يزيل التبويب الصحيح.
+
+# --hints--
+
+`finalTabs.tabs` يجب ان تكون `['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium', 'new tab', 'Netflix', 'YouTube', 'Vine', 'GMail', 'Work mail', 'Docs', 'freeCodeCamp', 'new tab']`
+
+```js
+assert.deepEqual(finalTabs.tabs, [
+  'FB',
+  'Gitter',
+  'Reddit',
+  'Twitter',
+  'Medium',
+  'new tab',
+  'Netflix',
+  'YouTube',
+  'Vine',
+  'GMail',
+  'Work mail',
+  'Docs',
+  'freeCodeCamp',
+  'new tab'
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// tabs is an array of titles of each site open within the window
+const Window = function(tabs) {
+  this.tabs = tabs; // We keep a record of the array inside the object
+};
+
+// When you join two windows into one window
+Window.prototype.join = function(otherWindow) {
+  this.tabs = this.tabs.concat(otherWindow.tabs);
+  return this;
+};
+
+// When you open a new tab at the end
+Window.prototype.tabOpen = function(tab) {
+  this.tabs.push('new tab'); // Let's open a new tab for now
+  return this;
+};
+
+// When you close a tab
+Window.prototype.tabClose = function(index) {
+
+  // Only change code below this line
+
+  const tabsBeforeIndex = this.tabs.splice(0, index); // Get the tabs before the tab
+  const tabsAfterIndex = this.tabs.splice(index + 1); // Get the tabs after the tab
+
+  this.tabs = tabsBeforeIndex.concat(tabsAfterIndex); // Join them together
+
+  // Only change code above this line
+
+  return this;
+ };
+
+// Let's create three browser windows
+const workWindow = new Window(['GMail', 'Inbox', 'Work mail', 'Docs', 'freeCodeCamp']); // Your mailbox, drive, and other work sites
+const socialWindow = new Window(['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium']); // Social sites
+const videoWindow = new Window(['Netflix', 'YouTube', 'Vimeo', 'Vine']); // Entertainment sites
+
+// Now perform the tab opening, closing, and other operations
+const finalTabs = socialWindow
+  .tabOpen() // Open a new tab for cat memes
+  .join(videoWindow.tabClose(2)) // Close third tab in video window, and join
+  .join(workWindow.tabClose(1).tabOpen());
+console.log(finalTabs.tabs);
+```
+
+# --solutions--
+
+```js
+const Window = function(tabs) {
+  this.tabs = tabs;
+};
+
+Window.prototype.join = function(otherWindow) {
+  this.tabs = this.tabs.concat(otherWindow.tabs);
+  return this;
+};
+
+Window.prototype.tabOpen = function(tab) {
+  this.tabs.push('new tab');
+  return this;
+};
+
+Window.prototype.tabClose = function(index) {
+  const tabsBeforeIndex = this.tabs.slice(0, index);
+  const tabsAfterIndex = this.tabs.slice(index + 1);
+
+  this.tabs = tabsBeforeIndex.concat(tabsAfterIndex);
+  return this;
+ };
+
+const workWindow = new Window(['GMail', 'Inbox', 'Work mail', 'Docs', 'freeCodeCamp']);
+const socialWindow = new Window(['FB', 'Gitter', 'Reddit', 'Twitter', 'Medium']);
+const videoWindow = new Window(['Netflix', 'YouTube', 'Vimeo', 'Vine']);
+
+const finalTabs = socialWindow
+  .tabOpen()
+  .join(videoWindow.tabClose(2))
+  .join(workWindow.tabClose(1).tabOpen());
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.md
new file mode 100644
index 00000000000..809234df9cd
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem.md
@@ -0,0 +1,97 @@
+---
+id: 587d7b88367417b2b2512b45
+title: 'استخدام Higher-Order Functions map او filter او reduce لحل مشكلة معقدة (Use Higher-Order Functions map, filter, or reduce to Solve a Complex Problem)'
+challengeType: 1
+forumTopicId: 301311
+dashedName: use-higher-order-functions-map-filter-or-reduce-to-solve-a-complex-problem
+---
+
+# --description--
+
+الآن بعد أن تدربت على بعض التحديات باستخدام higher-order functions مثل `map()` و `filter()` و `reduce()`، يمكنك الآن تطبيقها لحل تحدي أكثر تعقيدا.
+
+# --instructions--
+
+أكمل الكود لدالة `squareList` باستخدام أي مزيج من `map()` و `filter()` و `reduce()`. يجب أن تعيد الدالة array جديدة تحتوي على تربيع *فقط* الأعداد الصحيحة الموجبة (الأرقام العشرية ليست عدد صحيح) عندما تمرر إليها array من الأرقام الحقيقية. مثال لـ array من الأعداد الحقيقية (real numbers) هو `[-3, 4.8, 5, 3, -3.2]`.
+
+**ملاحظة:** يجب ألا تستخدم دالتك أي نوع من حلقات `for` أو `while` أو `forEach()`.
+
+# --hints--
+
+`squareList` يجب أن يكون `function`.
+
+```js
+assert.typeOf(squareList, 'function'),
+  '<code>squareList</code> should be a <code>function</code>';
+```
+
+`for` و `while` و `forEach` يجب عدم استخدامها.
+
+```js
+assert(!code.match(/for|while|forEach/g));
+```
+
+`map` او `filter` او `reduce` ينبغي استخدامها.
+
+```js
+assert(
+  __helpers
+    .removeWhiteSpace(code)
+    .match(/\.(map|filter|reduce)\(/g)
+);
+```
+
+يجب أن تعيد الدالة `array`.
+
+```js
+assert(Array.isArray(squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2])));
+```
+
+`squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2])` يجب أن ترجع `[16, 1764, 36]`.
+
+```js
+assert.deepStrictEqual(squareList([4, 5.6, -9.8, 3.14, 42, 6, 8.34, -2]), [
+  16,
+  1764,
+  36
+]);
+```
+
+`squareList([-3.7, -5, 3, 10, 12.5, 7, -4.5, -17, 0.3])` يجب أن ترجع `[9, 100, 49]`.
+
+```js
+assert.deepStrictEqual(squareList([-3.7, -5, 3, 10, 12.5, 7, -4.5, -17, 0.3]), [
+  9,
+  100,
+  49
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const squareList = arr => {
+  // Only change code below this line
+  return arr;
+  // Only change code above this line
+};
+
+const squaredIntegers = squareList([-3, 4.8, 5, 3, -3.2]);
+console.log(squaredIntegers);
+```
+
+# --solutions--
+
+```js
+const squareList = arr => {
+  const positiveIntegers = arr.filter(num => {
+    return num >= 0 && Number.isInteger(num);
+  });
+  const squaredIntegers = positiveIntegers.map(num => {
+    return num ** 2;
+  });
+  return squaredIntegers;
+};
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria.md
new file mode 100644
index 00000000000..77ae3abd24a
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria.md
@@ -0,0 +1,76 @@
+---
+id: 587d7dab367417b2b2512b6e
+title: استخدم every Method للتحقق من أن كل عنصر في array يستوفي معايير
+challengeType: 1
+forumTopicId: 301312
+dashedName: use-the-every-method-to-check-that-every-element-in-an-array-meets-a-criteria
+---
+
+# --description--
+
+دالة `every` تعمل مع الـ arrays للتحقق مما إذا كان كل *every* عنصر يجتاز اختبار معين. إنها ترجع قيمة `true` إذا كانت جميع القيم تفي بالمعايير، `false` إن لم تكن كذلك.
+
+على سبيل المثال، الكود التالي سيتحقق مما إذا كان كل عنصر في array الـ `numbers` أقل من 10:
+
+```js
+const numbers = [1, 5, 8, 0, 10, 11];
+
+numbers.every(function(currentValue) {
+  return currentValue < 10;
+});
+```
+
+`every` ستعيد `false` هنا.
+
+# --instructions--
+
+استخدم دالة `every` داخل دالة `checkPositive` للتحقق مما إذا كان كل عنصر في `arr` موجبا. يجب أن يعيد الـ function قيمة Boolean.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك دالة `every`.
+
+```js
+assert(code.match(/\.every/g));
+```
+
+`checkPositive([1, 2, 3, -4, 5])` يجب أن ترجع `false`.
+
+```js
+assert.isFalse(checkPositive([1, 2, 3, -4, 5]));
+```
+
+`checkPositive([1, 2, 3, 4, 5])` يجب أن يرجع `true`.
+
+```js
+assert.isTrue(checkPositive([1, 2, 3, 4, 5]));
+```
+
+`checkPositive([1, -2, 3, -4, 5])` يجب أن يرجع `false`.
+
+```js
+assert.isFalse(checkPositive([1, -2, 3, -4, 5]));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function checkPositive(arr) {
+  // Only change code below this line
+
+
+  // Only change code above this line
+}
+
+checkPositive([1, 2, 3, -4, 5]);
+```
+
+# --solutions--
+
+```js
+function checkPositive(arr) {
+  return arr.every(num => num > 0);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-filter-method-to-extract-data-from-an-array.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-filter-method-to-extract-data-from-an-array.md
new file mode 100644
index 00000000000..f6f898a8e06
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-filter-method-to-extract-data-from-an-array.md
@@ -0,0 +1,314 @@
+---
+id: 587d7b8f367417b2b2512b63
+title: استخدام دالة filter لاستخراج البيانات من مصفوفة (Use the filter Method to Extract Data from an Array)
+challengeType: 1
+forumTopicId: 18179
+dashedName: use-the-filter-method-to-extract-data-from-an-array
+---
+
+# --description--
+
+Array function أخر مفيد هو `Array.prototype.filter()`أو ببساطة `filter()`.
+
+`filter` يستدعي function على كل عنصر من array ويعيد array جديدة تحتوي فقط على العناصر التي ترجع لها هذه الدالة `true`. وبعبارة أخرى، تقوم بتصفية ال array، استنادا إلى ال function التي مررت إليها. مثل `map`، تقوم بذلك دون الحاجة إلى تعديل ال array الأصلية.
+
+الـ callback function تقبل ثلاث arguments. وال argument الأولى هي العنصر الحالي الذي تجري معالجته. والثاني هو فهرس ذلك العنصر والثالث هو ال array التي تم على أساسها استدعاء `filter`.
+
+انظر أدناه للحصول على مثال باستخدام `filter` على `users` لإرجاع array جديدة تحتوي على المستخدمين دون سن 30 سنة فقط. ومن أجل البساطة، لا يستخدم المثال سوى ال argument الأولى للـ callback.
+
+```js
+const users = [
+  { name: 'John', age: 34 },
+  { name: 'Amy', age: 20 },
+  { name: 'camperCat', age: 10 }
+];
+
+const usersUnder30 = users.filter(user => user.age < 30);
+console.log(usersUnder30); 
+```
+
+ستعرض وحدة التحكم القيمة `[ { name: 'Amy', age: 20 }, { name: 'camperCat', age: 10 } ]`.
+
+# --instructions--
+
+يحتوي المتغير `watchList` على مجموعة من ال objects التي تحتوي على معلومات عن عدة أفلام. استخدام مزيج من `filter` و `map` على `watchList` لتعيين مجموعة جديدة من ال objects مع فقط keys الـ `title` و `rating`. يجب أن تتضمن ال array الجديدة فقط ال objects حيث `imdbRating` أكبر من أو يساوي 8.0. لاحظ أن قيم `rating` تم حفظها كـ strings في ال object وقد تحتاج إلى تحويلها إلى أرقام للقيام بعمليات رياضية عليها.
+
+# --hints--
+
+متغير `watchList` يجب ألا يتغير.
+
+```js
+assert(
+  watchList[0].Title === 'Inception' && watchList[4].Director == 'James Cameron'
+);
+```
+
+يجب أن يستخدم الكود الخاص بك دالة `filter`.
+
+```js
+assert(code.match(/\s*\.\s*filter/g));
+```
+
+يجب ألا يستخدم الكود الخاص بك حلقة `for`.
+
+```js
+assert(!code.match(/for\s*?\([\s\S]*?\)/g));
+```
+
+`filteredList` يجب أن يساوي `[{"title": "Inception", "rating": "8.8"}, {"title": "Interstellar", "rating": "8.6"}, {"title": "The Dark Knight", "rating": "9.0"}, {"title": "Batman Begins", "rating": "8.3"}]`.
+
+```js
+assert.deepEqual(filteredList, [
+  { title: 'Inception', rating: '8.8' },
+  { title: 'Interstellar', rating: '8.6' },
+  { title: 'The Dark Knight', rating: '9.0' },
+  { title: 'Batman Begins', rating: '8.3' }
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// The global variable
+const watchList = [
+  {
+    "Title": "Inception",
+    "Year": "2010",
+    "Rated": "PG-13",
+    "Released": "16 Jul 2010",
+    "Runtime": "148 min",
+    "Genre": "Action, Adventure, Crime",
+    "Director": "Christopher Nolan",
+    "Writer": "Christopher Nolan",
+    "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
+    "Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
+    "Language": "English, Japanese, French",
+    "Country": "USA, UK",
+    "Awards": "Won 4 Oscars. Another 143 wins & 198 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
+    "Metascore": "74",
+    "imdbRating": "8.8",
+    "imdbVotes": "1,446,708",
+    "imdbID": "tt1375666",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Interstellar",
+    "Year": "2014",
+    "Rated": "PG-13",
+    "Released": "07 Nov 2014",
+    "Runtime": "169 min",
+    "Genre": "Adventure, Drama, Sci-Fi",
+    "Director": "Christopher Nolan",
+    "Writer": "Jonathan Nolan, Christopher Nolan",
+    "Actors": "Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow",
+    "Plot": "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.",
+    "Language": "English",
+    "Country": "USA, UK",
+    "Awards": "Won 1 Oscar. Another 39 wins & 132 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg",
+    "Metascore": "74",
+    "imdbRating": "8.6",
+    "imdbVotes": "910,366",
+    "imdbID": "tt0816692",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "The Dark Knight",
+    "Year": "2008",
+    "Rated": "PG-13",
+    "Released": "18 Jul 2008",
+    "Runtime": "152 min",
+    "Genre": "Action, Adventure, Crime",
+    "Director": "Christopher Nolan",
+    "Writer": "Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)",
+    "Actors": "Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine",
+    "Plot": "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",
+    "Language": "English, Mandarin",
+    "Country": "USA, UK",
+    "Awards": "Won 2 Oscars. Another 146 wins & 142 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg",
+    "Metascore": "82",
+    "imdbRating": "9.0",
+    "imdbVotes": "1,652,832",
+    "imdbID": "tt0468569",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Batman Begins",
+    "Year": "2005",
+    "Rated": "PG-13",
+    "Released": "15 Jun 2005",
+    "Runtime": "140 min",
+    "Genre": "Action, Adventure",
+    "Director": "Christopher Nolan",
+    "Writer": "Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)",
+    "Actors": "Christian Bale, Michael Caine, Liam Neeson, Katie Holmes",
+    "Plot": "After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.",
+    "Language": "English, Urdu, Mandarin",
+    "Country": "USA, UK",
+    "Awards": "Nominated for 1 Oscar. Another 15 wins & 66 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg",
+    "Metascore": "70",
+    "imdbRating": "8.3",
+    "imdbVotes": "972,584",
+    "imdbID": "tt0372784",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Avatar",
+    "Year": "2009",
+    "Rated": "PG-13",
+    "Released": "18 Dec 2009",
+    "Runtime": "162 min",
+    "Genre": "Action, Adventure, Fantasy",
+    "Director": "James Cameron",
+    "Writer": "James Cameron",
+    "Actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang",
+    "Plot": "A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.",
+    "Language": "English, Spanish",
+    "Country": "USA, UK",
+    "Awards": "Won 3 Oscars. Another 80 wins & 121 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg",
+    "Metascore": "83",
+    "imdbRating": "7.9",
+    "imdbVotes": "876,575",
+    "imdbID": "tt0499549",
+    "Type": "movie",
+    "Response": "True"
+  }
+];
+
+// Only change code below this line
+
+const filteredList = "";
+
+// Only change code above this line
+
+console.log(filteredList);
+```
+
+# --solutions--
+
+```js
+const watchList = [
+  {
+    "Title": "Inception",
+    "Year": "2010",
+    "Rated": "PG-13",
+    "Released": "16 Jul 2010",
+    "Runtime": "148 min",
+    "Genre": "Action, Adventure, Crime",
+    "Director": "Christopher Nolan",
+    "Writer": "Christopher Nolan",
+    "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
+    "Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
+    "Language": "English, Japanese, French",
+    "Country": "USA, UK",
+    "Awards": "Won 4 Oscars. Another 143 wins & 198 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
+    "Metascore": "74",
+    "imdbRating": "8.8",
+    "imdbVotes": "1,446,708",
+    "imdbID": "tt1375666",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Interstellar",
+    "Year": "2014",
+    "Rated": "PG-13",
+    "Released": "07 Nov 2014",
+    "Runtime": "169 min",
+    "Genre": "Adventure, Drama, Sci-Fi",
+    "Director": "Christopher Nolan",
+    "Writer": "Jonathan Nolan, Christopher Nolan",
+    "Actors": "Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow",
+    "Plot": "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.",
+    "Language": "English",
+    "Country": "USA, UK",
+    "Awards": "Won 1 Oscar. Another 39 wins & 132 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg",
+    "Metascore": "74",
+    "imdbRating": "8.6",
+    "imdbVotes": "910,366",
+    "imdbID": "tt0816692",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "The Dark Knight",
+    "Year": "2008",
+    "Rated": "PG-13",
+    "Released": "18 Jul 2008",
+    "Runtime": "152 min",
+    "Genre": "Action, Adventure, Crime",
+    "Director": "Christopher Nolan",
+    "Writer": "Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)",
+    "Actors": "Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine",
+    "Plot": "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",
+    "Language": "English, Mandarin",
+    "Country": "USA, UK",
+    "Awards": "Won 2 Oscars. Another 146 wins & 142 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg",
+    "Metascore": "82",
+    "imdbRating": "9.0",
+    "imdbVotes": "1,652,832",
+    "imdbID": "tt0468569",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Batman Begins",
+    "Year": "2005",
+    "Rated": "PG-13",
+    "Released": "15 Jun 2005",
+    "Runtime": "140 min",
+    "Genre": "Action, Adventure",
+    "Director": "Christopher Nolan",
+    "Writer": "Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)",
+    "Actors": "Christian Bale, Michael Caine, Liam Neeson, Katie Holmes",
+    "Plot": "After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.",
+    "Language": "English, Urdu, Mandarin",
+    "Country": "USA, UK",
+    "Awards": "Nominated for 1 Oscar. Another 15 wins & 66 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg",
+    "Metascore": "70",
+    "imdbRating": "8.3",
+    "imdbVotes": "972,584",
+    "imdbID": "tt0372784",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Avatar",
+    "Year": "2009",
+    "Rated": "PG-13",
+    "Released": "18 Dec 2009",
+    "Runtime": "162 min",
+    "Genre": "Action, Adventure, Fantasy",
+    "Director": "James Cameron",
+    "Writer": "James Cameron",
+    "Actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang",
+    "Plot": "A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.",
+    "Language": "English, Spanish",
+    "Country": "USA, UK",
+    "Awards": "Won 3 Oscars. Another 80 wins & 121 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg",
+    "Metascore": "83",
+    "imdbRating": "7.9",
+    "imdbVotes": "876,575",
+    "imdbID": "tt0499549",
+    "Type": "movie",
+    "Response": "True"
+  }
+];
+
+const filteredList = watchList.filter(e => e.imdbRating >= 8).map( ({Title: title, imdbRating: rating}) => ({title, rating}) );
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array.md
new file mode 100644
index 00000000000..e9f557ab118
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-map-method-to-extract-data-from-an-array.md
@@ -0,0 +1,329 @@
+---
+id: 587d7b8f367417b2b2512b61
+title: Use the map Method to Extract Data from an Array
+challengeType: 1
+forumTopicId: 18214
+dashedName: use-the-map-method-to-extract-data-from-an-array
+---
+
+# --description--
+
+حتى الآن تعلمنا استخدام ال pure functions لتجنب التأثيرات الجانبية في البرنامج. أيضًا ، رأينا القيمة في وجود function تعتمد فقط على arguments الإدخال الخاصة بها.
+
+هذه هي البداية فقط. وكما يوحي اسمها، فإن ال functional programming تتمحور حول نظرية ال functions.
+
+سيكون من المنطقي أن تكون قادرًا على تمريرها كـ arguments ل functions أخرى ، وإرجاع function من function أخر. تعتبر الدوال <dfn>first class objects</dfn> في جافا سكريبت، مما يعني أنه يمكن استخدامها مثل أي object آخر. يمكن حفظها في المتغيرات، أو تخزينها في object ما، أو تمريرها كـ function arguments.
+
+دعونا نبدأ ببعض الـ array functions البسيطة، التي هي methods على ال array object prototype. في هذا التمرين نحن ننظر إلى `Array.prototype.map()`أو ببساطة `map`.
+
+تتكرر طريقة `map` علي كل عنصر في array وتُرجع array جديدة تحتوي على نتائج استدعاء الـ callback function على كل عنصر. وهو يقوم بذلك دون تغيير في الـ array الأصلية.
+
+عند استخدام الـ callback، يتم تمرير ثلاثة arguments. وال argument الأولى هي العنصر الحالي الذي تجري معالجته. والثاني هو فهرس ذلك العنصر والثالث هو ال array التي تم على أساسها استدعاء `map`.
+
+انظر أدناه للحصول على مثال باستخدام `map` على `users` لإرجاع array جديدة تحتوي فقط على اسماء المستخدمين كعناصر. ومن أجل البساطة، لا يستخدم المثال سوى ال argument الأولى للـ callback.
+
+```js
+const users = [
+  { name: 'John', age: 34 },
+  { name: 'Amy', age: 20 },
+  { name: 'camperCat', age: 10 }
+];
+
+const names = users.map(user => user.name);
+console.log(names);
+```
+
+ستعرض وحدة التحكم القيمة `[ 'John', 'Amy', 'camperCat' ]`.
+
+# --instructions--
+
+يحتوي المتغير `watchList` على مجموعة من ال objects التي تحتوي على معلومات عن عدة أفلام. استخدم `map` على `watchList` لتعيين array جديدة من ال objects إلى متغير `ratings`. يجب أن يكون لكل فيلم في ال array الجديدة key الـ `title` فقط باسم الفيلم، و key الـ `rating` مع تقييم IMDB. الكود في المحرر يستخدم حاليا حلقة `for` للقيام بذلك، لذا يجب أن تستبدل loop functionality بتعبير `map` الخاص بك.
+
+# --hints--
+
+متغير `watchList` يجب ألا يتغير.
+
+```js
+assert(
+  watchList[0].Title === 'Inception' && watchList[4].Director == 'James Cameron'
+);
+```
+
+يجب ألا يستخدم الكود الخاص بك حلقة `for`.
+
+```js
+assert(!code.match(/for\s*?\([\s\S]*?\)/));
+```
+
+يجب أن يستخدم الكود الخاص بك دالة `map`.
+
+```js
+assert(code.match(/\.map/g));
+```
+
+`ratings` يجب أن يساوي `[{"title": "Inception", "rating": "8.8"}, {"title": "Interstellar", "rating": "8.6"}, {"title": "The Dark Knight", "rating": "9.0"},{"title": "Batman Begins", "rating": "8.3"}, {"title": "Avatar", "rating": "7.9"}]`.
+
+```js
+assert.deepEqual(ratings, [
+  { title: 'Inception', rating: '8.8' },
+  { title: 'Interstellar', rating: '8.6' },
+  { title: 'The Dark Knight', rating: '9.0' },
+  { title: 'Batman Begins', rating: '8.3' },
+  { title: 'Avatar', rating: '7.9' }
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// The global variable
+const watchList = [
+  {
+    "Title": "Inception",
+    "Year": "2010",
+    "Rated": "PG-13",
+    "Released": "16 Jul 2010",
+    "Runtime": "148 min",
+    "Genre": "Action, Adventure, Crime",
+    "Director": "Christopher Nolan",
+    "Writer": "Christopher Nolan",
+    "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
+    "Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
+    "Language": "English, Japanese, French",
+    "Country": "USA, UK",
+    "Awards": "Won 4 Oscars. Another 143 wins & 198 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
+    "Metascore": "74",
+    "imdbRating": "8.8",
+    "imdbVotes": "1,446,708",
+    "imdbID": "tt1375666",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Interstellar",
+    "Year": "2014",
+    "Rated": "PG-13",
+    "Released": "07 Nov 2014",
+    "Runtime": "169 min",
+    "Genre": "Adventure, Drama, Sci-Fi",
+    "Director": "Christopher Nolan",
+    "Writer": "Jonathan Nolan, Christopher Nolan",
+    "Actors": "Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow",
+    "Plot": "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.",
+    "Language": "English",
+    "Country": "USA, UK",
+    "Awards": "Won 1 Oscar. Another 39 wins & 132 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg",
+    "Metascore": "74",
+    "imdbRating": "8.6",
+    "imdbVotes": "910,366",
+    "imdbID": "tt0816692",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "The Dark Knight",
+    "Year": "2008",
+    "Rated": "PG-13",
+    "Released": "18 Jul 2008",
+    "Runtime": "152 min",
+    "Genre": "Action, Adventure, Crime",
+    "Director": "Christopher Nolan",
+    "Writer": "Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)",
+    "Actors": "Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine",
+    "Plot": "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",
+    "Language": "English, Mandarin",
+    "Country": "USA, UK",
+    "Awards": "Won 2 Oscars. Another 146 wins & 142 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg",
+    "Metascore": "82",
+    "imdbRating": "9.0",
+    "imdbVotes": "1,652,832",
+    "imdbID": "tt0468569",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Batman Begins",
+    "Year": "2005",
+    "Rated": "PG-13",
+    "Released": "15 Jun 2005",
+    "Runtime": "140 min",
+    "Genre": "Action, Adventure",
+    "Director": "Christopher Nolan",
+    "Writer": "Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)",
+    "Actors": "Christian Bale, Michael Caine, Liam Neeson, Katie Holmes",
+    "Plot": "After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.",
+    "Language": "English, Urdu, Mandarin",
+    "Country": "USA, UK",
+    "Awards": "Nominated for 1 Oscar. Another 15 wins & 66 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg",
+    "Metascore": "70",
+    "imdbRating": "8.3",
+    "imdbVotes": "972,584",
+    "imdbID": "tt0372784",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Avatar",
+    "Year": "2009",
+    "Rated": "PG-13",
+    "Released": "18 Dec 2009",
+    "Runtime": "162 min",
+    "Genre": "Action, Adventure, Fantasy",
+    "Director": "James Cameron",
+    "Writer": "James Cameron",
+    "Actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang",
+    "Plot": "A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.",
+    "Language": "English, Spanish",
+    "Country": "USA, UK",
+    "Awards": "Won 3 Oscars. Another 80 wins & 121 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg",
+    "Metascore": "83",
+    "imdbRating": "7.9",
+    "imdbVotes": "876,575",
+    "imdbID": "tt0499549",
+    "Type": "movie",
+    "Response": "True"
+  }
+];
+
+// Only change code below this line
+
+const ratings = [];
+for (let i = 0; i < watchList.length; i++) {
+  ratings.push({title: watchList[i]["Title"], rating: watchList[i]["imdbRating"]});
+}
+
+// Only change code above this line
+
+console.log(JSON.stringify(ratings));
+```
+
+# --solutions--
+
+```js
+const watchList = [
+  {
+    "Title": "Inception",
+    "Year": "2010",
+    "Rated": "PG-13",
+    "Released": "16 Jul 2010",
+    "Runtime": "148 min",
+    "Genre": "Action, Adventure, Crime",
+    "Director": "Christopher Nolan",
+    "Writer": "Christopher Nolan",
+    "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
+    "Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
+    "Language": "English, Japanese, French",
+    "Country": "USA, UK",
+    "Awards": "Won 4 Oscars. Another 143 wins & 198 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
+    "Metascore": "74",
+    "imdbRating": "8.8",
+    "imdbVotes": "1,446,708",
+    "imdbID": "tt1375666",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Interstellar",
+    "Year": "2014",
+    "Rated": "PG-13",
+    "Released": "07 Nov 2014",
+    "Runtime": "169 min",
+    "Genre": "Adventure, Drama, Sci-Fi",
+    "Director": "Christopher Nolan",
+    "Writer": "Jonathan Nolan, Christopher Nolan",
+    "Actors": "Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow",
+    "Plot": "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.",
+    "Language": "English",
+    "Country": "USA, UK",
+    "Awards": "Won 1 Oscar. Another 39 wins & 132 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg",
+    "Metascore": "74",
+    "imdbRating": "8.6",
+    "imdbVotes": "910,366",
+    "imdbID": "tt0816692",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "The Dark Knight",
+    "Year": "2008",
+    "Rated": "PG-13",
+    "Released": "18 Jul 2008",
+    "Runtime": "152 min",
+    "Genre": "Action, Adventure, Crime",
+    "Director": "Christopher Nolan",
+    "Writer": "Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)",
+    "Actors": "Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine",
+    "Plot": "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",
+    "Language": "English, Mandarin",
+    "Country": "USA, UK",
+    "Awards": "Won 2 Oscars. Another 146 wins & 142 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg",
+    "Metascore": "82",
+    "imdbRating": "9.0",
+    "imdbVotes": "1,652,832",
+    "imdbID": "tt0468569",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Batman Begins",
+    "Year": "2005",
+    "Rated": "PG-13",
+    "Released": "15 Jun 2005",
+    "Runtime": "140 min",
+    "Genre": "Action, Adventure",
+    "Director": "Christopher Nolan",
+    "Writer": "Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)",
+    "Actors": "Christian Bale, Michael Caine, Liam Neeson, Katie Holmes",
+    "Plot": "After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.",
+    "Language": "English, Urdu, Mandarin",
+    "Country": "USA, UK",
+    "Awards": "Nominated for 1 Oscar. Another 15 wins & 66 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg",
+    "Metascore": "70",
+    "imdbRating": "8.3",
+    "imdbVotes": "972,584",
+    "imdbID": "tt0372784",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Avatar",
+    "Year": "2009",
+    "Rated": "PG-13",
+    "Released": "18 Dec 2009",
+    "Runtime": "162 min",
+    "Genre": "Action, Adventure, Fantasy",
+    "Director": "James Cameron",
+    "Writer": "James Cameron",
+    "Actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang",
+    "Plot": "A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.",
+    "Language": "English, Spanish",
+    "Country": "USA, UK",
+    "Awards": "Won 3 Oscars. Another 80 wins & 121 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg",
+    "Metascore": "83",
+    "imdbRating": "7.9",
+    "imdbVotes": "876,575",
+    "imdbID": "tt0499549",
+    "Type": "movie",
+    "Response": "True"
+  }
+];
+
+const ratings = watchList.map(function(movie) {
+  return {
+    title: movie["Title"],
+    rating: movie["imdbRating"]
+  }
+});
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-reduce-method-to-analyze-data.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-reduce-method-to-analyze-data.md
new file mode 100644
index 00000000000..95865d47f0c
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-reduce-method-to-analyze-data.md
@@ -0,0 +1,345 @@
+---
+id: 587d7da9367417b2b2512b68
+title: Use the reduce Method to Analyze Data
+challengeType: 1
+forumTopicId: 301313
+dashedName: use-the-reduce-method-to-analyze-data
+---
+
+# --description--
+
+`Array.prototype.reduce()` او ببساطة `reduce()`، هي أكثر عمليات ال array عمومية في JavaScript. يمكنك حل أي مشكلة في معالجة ال arrays تقريبًا باستخدام `reduce`.
+
+تسمح طريقة `reduce` بمزيد من الأشكال العامة لمعالجة ال array ، ومن الممكن إظهار أن كلاً من `filter` و `map` يمكن اشتقاقهما كتطبيقات خاصة لـ `reduce`. تتكرر طريقة `reduce` علي كل عنصر في array وتقوم بإرجاع قيمة واحدة (أي string او رقم او object او array). يتم تحقيق ذلك من خلال الـ callback function التي يتم استدعاؤها في كل تكرار.
+
+الـ callback function تقبل اربعة arguments. وتعرف ال argument الأولى بأنها المجمع الذي يعين قيمة إرجاع الـ callback function من التكرار السابق، والـ argument الثاني هو العنصر الحالي الذي يجري معالجته، وال argument الثالث هو فهرس ذلك العنصر والرابع هو ال array التي يستدعي عليها `reduce`.
+
+بالإضافة إلى الـ callback function فـ `reduce` لديه معلمة إضافية تأخذ قيمة أولية للمجمع. إذا لم يتم استخدام هذا المعامل الثاني، يتم تخطي التكرار الأول ويتم تمرير التكرار الثاني العنصر الأول من ال array كالمجمع.
+
+انظر أدناه للحصول على مثال يستخدم `reduce` على مصفوفة `users` لإرجاع مجموع أعمار المستخدمين. ومن أجل البساطة، لا يستخدم المثال سوى ال arguments الأولى والثانية.
+
+```js
+const users = [
+  { name: 'John', age: 34 },
+  { name: 'Amy', age: 20 },
+  { name: 'camperCat', age: 10 }
+];
+
+const sumOfAges = users.reduce((sum, user) => sum + user.age, 0);
+console.log(sumOfAges);
+```
+
+ستعرض وحدة التحكم القيمة `64`.
+
+في مثال آخر ، انظر كيف يمكن إرجاع object يحتوي على أسماء المستخدمين كخصائص بأعمارهم كقيم.
+
+```js
+const users = [
+  { name: 'John', age: 34 },
+  { name: 'Amy', age: 20 },
+  { name: 'camperCat', age: 10 }
+];
+
+const usersObj = users.reduce((obj, user) => {
+  obj[user.name] = user.age;
+  return obj;
+}, {});
+console.log(usersObj);
+```
+
+ستعرض وحدة التحكم القيمة `{ John: 34, Amy: 20, camperCat: 10 }`.
+
+# --instructions--
+
+يحتوي المتغير `watchList` على array من ال objects التي تحتوي على معلومات عن عدة أفلام. استخدم `reduce` للعثور على متوسط تصنيف IMDB للأفلام التي اخرجها `Christopher Nolan`. استرجع من التحديات السابقة كيفية عمل `filter` للبيانات و تطبيق `map` عليها لسحب ما تحتاج إليه. قد تحتاج إلى إنشاء متغيرات أخرى، وإرجاع متوسط التقييم من دالة `getRating`. لاحظ أن قيم التصنيف يتم حفظها كـ strings في ال object ويجب تحويلها إلى أرقام قبل استخدامها في أي عمليات رياضية.
+
+# --hints--
+
+متغير `watchList` يجب ألا يتغير.
+
+```js
+assert(
+  watchList[0].Title === 'Inception' && watchList[4].Director == 'James Cameron'
+);
+```
+
+يجب أن يستخدم الكود الخاص بك دالة `reduce`.
+
+```js
+assert(code.match(/\.reduce/g));
+```
+
+The `getRating(watchList)` يجب أن يساوي 8.675.
+
+```js
+assert(getRating(watchList) === 8.675);
+```
+
+يجب ألا يستخدم الكود الخاص بك حلقة `for`.
+
+```js
+assert(!code.match(/for\s*?\([\s\S]*?\)/g));
+```
+
+يجب أن يعيد الكود الإخراج الصحيح بعد تعديل كائن `watchList`.
+
+```js
+assert(getRating(watchList.filter((_, i) => i < 1 || i > 2)) === 8.55);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// The global variable
+const watchList = [
+  {
+    "Title": "Inception",
+    "Year": "2010",
+    "Rated": "PG-13",
+    "Released": "16 Jul 2010",
+    "Runtime": "148 min",
+    "Genre": "Action, Adventure, Crime",
+    "Director": "Christopher Nolan",
+    "Writer": "Christopher Nolan",
+    "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
+    "Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
+    "Language": "English, Japanese, French",
+    "Country": "USA, UK",
+    "Awards": "Won 4 Oscars. Another 143 wins & 198 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
+    "Metascore": "74",
+    "imdbRating": "8.8",
+    "imdbVotes": "1,446,708",
+    "imdbID": "tt1375666",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Interstellar",
+    "Year": "2014",
+    "Rated": "PG-13",
+    "Released": "07 Nov 2014",
+    "Runtime": "169 min",
+    "Genre": "Adventure, Drama, Sci-Fi",
+    "Director": "Christopher Nolan",
+    "Writer": "Jonathan Nolan, Christopher Nolan",
+    "Actors": "Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow",
+    "Plot": "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.",
+    "Language": "English",
+    "Country": "USA, UK",
+    "Awards": "Won 1 Oscar. Another 39 wins & 132 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg",
+    "Metascore": "74",
+    "imdbRating": "8.6",
+    "imdbVotes": "910,366",
+    "imdbID": "tt0816692",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "The Dark Knight",
+    "Year": "2008",
+    "Rated": "PG-13",
+    "Released": "18 Jul 2008",
+    "Runtime": "152 min",
+    "Genre": "Action, Adventure, Crime",
+    "Director": "Christopher Nolan",
+    "Writer": "Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)",
+    "Actors": "Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine",
+    "Plot": "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",
+    "Language": "English, Mandarin",
+    "Country": "USA, UK",
+    "Awards": "Won 2 Oscars. Another 146 wins & 142 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg",
+    "Metascore": "82",
+    "imdbRating": "9.0",
+    "imdbVotes": "1,652,832",
+    "imdbID": "tt0468569",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Batman Begins",
+    "Year": "2005",
+    "Rated": "PG-13",
+    "Released": "15 Jun 2005",
+    "Runtime": "140 min",
+    "Genre": "Action, Adventure",
+    "Director": "Christopher Nolan",
+    "Writer": "Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)",
+    "Actors": "Christian Bale, Michael Caine, Liam Neeson, Katie Holmes",
+    "Plot": "After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.",
+    "Language": "English, Urdu, Mandarin",
+    "Country": "USA, UK",
+    "Awards": "Nominated for 1 Oscar. Another 15 wins & 66 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg",
+    "Metascore": "70",
+    "imdbRating": "8.3",
+    "imdbVotes": "972,584",
+    "imdbID": "tt0372784",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Avatar",
+    "Year": "2009",
+    "Rated": "PG-13",
+    "Released": "18 Dec 2009",
+    "Runtime": "162 min",
+    "Genre": "Action, Adventure, Fantasy",
+    "Director": "James Cameron",
+    "Writer": "James Cameron",
+    "Actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang",
+    "Plot": "A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.",
+    "Language": "English, Spanish",
+    "Country": "USA, UK",
+    "Awards": "Won 3 Oscars. Another 80 wins & 121 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg",
+    "Metascore": "83",
+    "imdbRating": "7.9",
+    "imdbVotes": "876,575",
+    "imdbID": "tt0499549",
+    "Type": "movie",
+    "Response": "True"
+  }
+];
+
+function getRating(watchList) {
+  // Only change code below this line
+  let averageRating;
+
+
+  // Only change code above this line
+  return averageRating;
+}
+
+console.log(getRating(watchList));
+```
+
+# --solutions--
+
+```js
+const watchList = [
+  {
+    "Title": "Inception",
+    "Year": "2010",
+    "Rated": "PG-13",
+    "Released": "16 Jul 2010",
+    "Runtime": "148 min",
+    "Genre": "Action, Adventure, Crime",
+    "Director": "Christopher Nolan",
+    "Writer": "Christopher Nolan",
+    "Actors": "Leonardo DiCaprio, Joseph Gordon-Levitt, Elliot Page, Tom Hardy",
+    "Plot": "A thief, who steals corporate secrets through use of dream-sharing technology, is given the inverse task of planting an idea into the mind of a CEO.",
+    "Language": "English, Japanese, French",
+    "Country": "USA, UK",
+    "Awards": "Won 4 Oscars. Another 143 wins & 198 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjAxMzY3NjcxNF5BMl5BanBnXkFtZTcwNTI5OTM0Mw@@._V1_SX300.jpg",
+    "Metascore": "74",
+    "imdbRating": "8.8",
+    "imdbVotes": "1,446,708",
+    "imdbID": "tt1375666",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Interstellar",
+    "Year": "2014",
+    "Rated": "PG-13",
+    "Released": "07 Nov 2014",
+    "Runtime": "169 min",
+    "Genre": "Adventure, Drama, Sci-Fi",
+    "Director": "Christopher Nolan",
+    "Writer": "Jonathan Nolan, Christopher Nolan",
+    "Actors": "Ellen Burstyn, Matthew McConaughey, Mackenzie Foy, John Lithgow",
+    "Plot": "A team of explorers travel through a wormhole in space in an attempt to ensure humanity's survival.",
+    "Language": "English",
+    "Country": "USA, UK",
+    "Awards": "Won 1 Oscar. Another 39 wins & 132 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMjIxNTU4MzY4MF5BMl5BanBnXkFtZTgwMzM4ODI3MjE@._V1_SX300.jpg",
+    "Metascore": "74",
+    "imdbRating": "8.6",
+    "imdbVotes": "910,366",
+    "imdbID": "tt0816692",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "The Dark Knight",
+    "Year": "2008",
+    "Rated": "PG-13",
+    "Released": "18 Jul 2008",
+    "Runtime": "152 min",
+    "Genre": "Action, Adventure, Crime",
+    "Director": "Christopher Nolan",
+    "Writer": "Jonathan Nolan (screenplay), Christopher Nolan (screenplay), Christopher Nolan (story), David S. Goyer (story), Bob Kane (characters)",
+    "Actors": "Christian Bale, Heath Ledger, Aaron Eckhart, Michael Caine",
+    "Plot": "When the menace known as the Joker wreaks havoc and chaos on the people of Gotham, the caped crusader must come to terms with one of the greatest psychological tests of his ability to fight injustice.",
+    "Language": "English, Mandarin",
+    "Country": "USA, UK",
+    "Awards": "Won 2 Oscars. Another 146 wins & 142 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTMxNTMwODM0NF5BMl5BanBnXkFtZTcwODAyMTk2Mw@@._V1_SX300.jpg",
+    "Metascore": "82",
+    "imdbRating": "9.0",
+    "imdbVotes": "1,652,832",
+    "imdbID": "tt0468569",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Batman Begins",
+    "Year": "2005",
+    "Rated": "PG-13",
+    "Released": "15 Jun 2005",
+    "Runtime": "140 min",
+    "Genre": "Action, Adventure",
+    "Director": "Christopher Nolan",
+    "Writer": "Bob Kane (characters), David S. Goyer (story), Christopher Nolan (screenplay), David S. Goyer (screenplay)",
+    "Actors": "Christian Bale, Michael Caine, Liam Neeson, Katie Holmes",
+    "Plot": "After training with his mentor, Batman begins his fight to free crime-ridden Gotham City from the corruption that Scarecrow and the League of Shadows have cast upon it.",
+    "Language": "English, Urdu, Mandarin",
+    "Country": "USA, UK",
+    "Awards": "Nominated for 1 Oscar. Another 15 wins & 66 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BNTM3OTc0MzM2OV5BMl5BanBnXkFtZTYwNzUwMTI3._V1_SX300.jpg",
+    "Metascore": "70",
+    "imdbRating": "8.3",
+    "imdbVotes": "972,584",
+    "imdbID": "tt0372784",
+    "Type": "movie",
+    "Response": "True"
+  },
+  {
+    "Title": "Avatar",
+    "Year": "2009",
+    "Rated": "PG-13",
+    "Released": "18 Dec 2009",
+    "Runtime": "162 min",
+    "Genre": "Action, Adventure, Fantasy",
+    "Director": "James Cameron",
+    "Writer": "James Cameron",
+    "Actors": "Sam Worthington, Zoe Saldana, Sigourney Weaver, Stephen Lang",
+    "Plot": "A paraplegic marine dispatched to the moon Pandora on a unique mission becomes torn between following his orders and protecting the world he feels is his home.",
+    "Language": "English, Spanish",
+    "Country": "USA, UK",
+    "Awards": "Won 3 Oscars. Another 80 wins & 121 nominations.",
+    "Poster": "http://ia.media-imdb.com/images/M/MV5BMTYwOTEwNjAzMl5BMl5BanBnXkFtZTcwODc5MTUwMw@@._V1_SX300.jpg",
+    "Metascore": "83",
+    "imdbRating": "7.9",
+    "imdbVotes": "876,575",
+    "imdbID": "tt0499549",
+    "Type": "movie",
+    "Response": "True"
+  }
+];
+
+function getRating(watchList) {
+  let averageRating;
+  const rating = watchList
+    .filter(obj => obj.Director === "Christopher Nolan")
+    .map(obj => Number(obj.imdbRating));
+  averageRating = rating.reduce((accum, curr) => accum + curr)/rating.length;
+  return averageRating;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria.md
new file mode 100644
index 00000000000..3d680d0dc0c
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/functional-programming/use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria.md
@@ -0,0 +1,76 @@
+---
+id: 587d7dab367417b2b2512b6f
+title: Use the some Method to Check that Any Elements in an Array Meet a Criteria
+challengeType: 1
+forumTopicId: 301314
+dashedName: use-the-some-method-to-check-that-any-elements-in-an-array-meet-a-criteria
+---
+
+# --description--
+
+دالة `some` تعمل مع الـ arrays للتحقق مما إذا كان *اي* عنصر يجتاز اختبار معين. إنها ترجع قيمة منطقية - `true` إذا كان أي من القيم تستوفي المعايير، `false` إن لم تستوف.
+
+على سبيل المثال، الكود التالي سيتحقق مما إذا كان اي عنصر في array الـ `numbers` أقل من 10:
+
+```js
+const numbers = [10, 50, 8, 220, 110, 11];
+
+numbers.some(function(currentValue) {
+  return currentValue < 10;
+});
+```
+
+دالة `some`، ستعيد `true`.
+
+# --instructions--
+
+استخدم دالة `some` داخل دالة `checkPositive` للتحقق مما إذا كان اي عنصر في `arr` موجبا. يجب أن يعيد الـ function قيمة Boolean.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك دالة `some`.
+
+```js
+assert(code.match(/\.some/g));
+```
+
+`checkPositive([1, 2, 3, -4, 5])` يجب أن يرجع `true`.
+
+```js
+assert(checkPositive([1, 2, 3, -4, 5]));
+```
+
+`checkPositive([1, 2, 3, 4, 5])` يجب أن يرجع `true`.
+
+```js
+assert(checkPositive([1, 2, 3, 4, 5]));
+```
+
+`checkPositive([-1, -2, -3, -4, -5])` يجب أن يرجع `false`.
+
+```js
+assert(!checkPositive([-1, -2, -3, -4, -5]));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function checkPositive(arr) {
+  // Only change code below this line
+
+
+  // Only change code above this line
+}
+
+checkPositive([1, 2, 3, -4, 5]);
+```
+
+# --solutions--
+
+```js
+function checkPositive(arr) {
+  return arr.some(elem => elem > 0);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
new file mode 100644
index 00000000000..c28bbba8b9f
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/arguments-optional.md
@@ -0,0 +1,103 @@
+---
+id: a97fd23d9b809dac9921074f
+title: Arguments Optional
+challengeType: 1
+forumTopicId: 14271
+dashedName: arguments-optional
+---
+
+# --description--
+
+قم بإنشاء دالة تجمع وسيطين (arrguments) معًا. إذا تم توفير argument واحدة فقط ، فقم بإرجاع function تتوقع argument واحدة وتعيد المجموع.
+
+على سبيل المثال ، `addTogether(2, 3)` يجب أن تعيد `5`، و `addTogether(2)` يجب أن تعيد function.
+
+استخدام هذه ال function المرتجعة مع argument واحدة سوف يعيد المجموع:
+
+```js
+var sumTwoAnd = addTogether(2);
+```
+
+`sumTwoAnd(3)` يرجع `5`.
+
+إذا لم تكن أي من الوسيطتين (arguments) رقمًا صالحًا ، قم بارجع undefined.
+
+# --hints--
+
+`addTogether(2, 3)` يجب ان يعيد 5.
+
+```js
+assert.deepEqual(addTogether(2, 3), 5);
+```
+
+`addTogether(23, 30)` يجب ان يعيد 53.
+
+```js
+assert.deepEqual(addTogether(23, 30), 53);
+```
+
+`addTogether(5)(7)` يجب ان يعيد 12.
+
+```js
+assert.deepEqual(addTogether(5)(7), 12);
+```
+
+`addTogether("https://www.youtube.com/watch?v=dQw4w9WgXcQ")` يجب ان يعيد `undefined`.
+
+```js
+assert.isUndefined(addTogether('https://www.youtube.com/watch?v=dQw4w9WgXcQ'));
+```
+
+`addTogether(2, "3")` يجب ان يعيد `undefined`.
+
+```js
+assert.isUndefined(addTogether(2, '3'));
+```
+
+`addTogether(2)([3])` يجب ان يعيد `undefined`.
+
+```js
+assert.isUndefined(addTogether(2)([3]));
+```
+
+`addTogether("2", 3)` يجب ان يعيد `undefined`.
+
+```js
+assert.isUndefined(addTogether('2', 3));
+```
+
+`addTogether(5, undefined)` يجب أن يعيد `undefined`.
+
+```js
+assert.isUndefined(addTogether(5, undefined));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function addTogether() {
+  return false;
+}
+
+addTogether(2,3);
+```
+
+# --solutions--
+
+```js
+function addTogether() {
+  var a = arguments[0];
+  if (toString.call(a) !== '[object Number]') return;
+  if (arguments.length === 1) {
+    return function(b) {
+      if (toString.call(b) !== '[object Number]') return;
+      return a + b;
+    };
+  }
+  var b = arguments[1];
+  if (toString.call(b) !== '[object Number]') return;
+  return a + arguments[1];
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/binary-agents.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/binary-agents.md
new file mode 100644
index 00000000000..0e386375cd0
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/binary-agents.md
@@ -0,0 +1,57 @@
+---
+id: a8d97bd4c764e91f9d2bda01
+title: Binary Agents
+challengeType: 1
+forumTopicId: 14273
+dashedName: binary-agents
+---
+
+# --description--
+
+قم بإرجاع جملة مترجمة باللغة الإنجليزية لل binary string الذي تم تمريره.
+
+سيكون ال binary string مفصول بمسافة.
+
+# --hints--
+
+`binaryAgent("01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111")` يجب ان يعيد السلسة `Aren't bonfires fun!?`
+
+```js
+assert.deepEqual(
+  binaryAgent(
+    '01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111'
+  ),
+  "Aren't bonfires fun!?"
+);
+```
+
+`binaryAgent("01001001 00100000 01101100 01101111 01110110 01100101 00100000 01000110 01110010 01100101 01100101 01000011 01101111 01100100 01100101 01000011 01100001 01101101 01110000 00100001")` يجب ان يعيد السلسة `I love FreeCodeCamp!`
+
+```js
+assert.deepEqual(
+  binaryAgent(
+    '01001001 00100000 01101100 01101111 01110110 01100101 00100000 01000110 01110010 01100101 01100101 01000011 01101111 01100100 01100101 01000011 01100001 01101101 01110000 00100001'
+  ),
+  'I love FreeCodeCamp!'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function binaryAgent(str) {
+  return str;
+}
+
+binaryAgent("01000001 01110010 01100101 01101110 00100111 01110100 00100000 01100010 01101111 01101110 01100110 01101001 01110010 01100101 01110011 00100000 01100110 01110101 01101110 00100001 00111111");
+```
+
+# --solutions--
+
+```js
+function binaryAgent(str) {
+  return str.split(' ').map(function(s) { return parseInt(s, 2); }).map(function(b) { return String.fromCharCode(b);}).join('');
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities.md
new file mode 100644
index 00000000000..33cf6d09ecc
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/convert-html-entities.md
@@ -0,0 +1,89 @@
+---
+id: a6b0bb188d873cb2c8729495
+title: Convert HTML Entities
+challengeType: 1
+forumTopicId: 16007
+dashedName: convert-html-entities
+---
+
+# --description--
+
+قم بتحويل الأحرف `&`, `<`, `>`, `"` (علامات اقتباس ازدواجية) و `'` (الفاصلة العليا) ، في string لكيانات الـ HTML المقابلة لها.
+
+# --hints--
+
+`convertHTML("Dolce & Gabbana")` يجب أن يعيد السلسلة `Dolce &amp; Gabbana`.
+
+```js
+assert.match(convertHTML('Dolce & Gabbana'), /Dolce &amp; Gabbana/);
+```
+
+`convertHTML("Hamburgers < Pizza < Tacos")` يجب أن يعيد السلسلة `Hamburgers &lt; Pizza &lt; Tacos`.
+
+```js
+assert.match(
+  convertHTML('Hamburgers < Pizza < Tacos'),
+  /Hamburgers &lt; Pizza &lt; Tacos/
+);
+```
+
+`convertHTML("Sixty > twelve")` يجب أن يعيد السلسلة `Sixty &gt; twelve`.
+
+```js
+assert.match(convertHTML('Sixty > twelve'), /Sixty &gt; twelve/);
+```
+
+`convertHTML('Stuff in "quotation marks"')` يجب أن يعيد السلسلة `Stuff in &quot;quotation marks&quot;`.
+
+```js
+assert.match(
+  convertHTML('Stuff in "quotation marks"'),
+  /Stuff in &quot;quotation marks&quot;/
+);
+```
+
+`convertHTML("Schindler's List")` يجب أن يعيد السلسلة `Schindler&apos;s List`.
+
+```js
+assert.match(convertHTML("Schindler's List"), /Schindler&apos;s List/);
+```
+
+`convertHTML("<>")` يجب أن يعيد السلسلة `&lt;&gt;`.
+
+```js
+assert.match(convertHTML('<>'), /&lt;&gt;/);
+```
+
+`convertHTML("abc")` يجب أن يعيد السلسلة `abc`.
+
+```js
+assert.strictEqual(convertHTML('abc'), 'abc');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function convertHTML(str) {
+  return str;
+}
+
+convertHTML("Dolce & Gabbana");
+```
+
+# --solutions--
+
+```js
+var MAP = { '&': '&amp;',
+            '<': '&lt;',
+            '>': '&gt;',
+            '"': '&quot;',
+            "'": '&apos;'};
+
+function convertHTML(str) {
+  return str.replace(/[&<>"']/g, function(c) {
+    return MAP[c];
+  });
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/diff-two-arrays.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/diff-two-arrays.md
new file mode 100644
index 00000000000..b4d2ec80dd6
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/diff-two-arrays.md
@@ -0,0 +1,189 @@
+---
+id: a5de63ebea8dbee56860f4f2
+title: Diff Two Arrays
+challengeType: 1
+forumTopicId: 16008
+dashedName: diff-two-arrays
+---
+
+# --description--
+
+قارن بين مصفوفتين (arrays) وأعد array جديدة بأية عناصر موجودة فقط في أحد ال arrays المحددتين ، ولكن ليس كلاهما. بمعنى آخر ، قم بإرجاع الاختلاف المتماثل بين ال arrays.
+
+**ملاحظة:** يمكنك إرجاع ال array بعناصرها بأي ترتيب.
+
+# --hints--
+
+`diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5])` يجب أن يعيد array.
+
+```js
+assert(typeof diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]) === 'object');
+```
+
+`["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` يجب ان يعيد `["pink wool"]`.
+
+```js
+assert.sameMembers(
+  diffArray(
+    ['diorite', 'andesite', 'grass', 'dirt', 'pink wool', 'dead shrub'],
+    ['diorite', 'andesite', 'grass', 'dirt', 'dead shrub']
+  ),
+  ['pink wool']
+);
+```
+
+`["diorite", "andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` يجب ان يعيد array بعنصر واحد.
+
+```js
+assert(
+  diffArray(
+    ['diorite', 'andesite', 'grass', 'dirt', 'pink wool', 'dead shrub'],
+    ['diorite', 'andesite', 'grass', 'dirt', 'dead shrub']
+  ).length === 1
+);
+```
+
+`["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` يجب ان يعيد `["diorite", "pink wool"]`.
+
+```js
+assert.sameMembers(
+  diffArray(
+    ['andesite', 'grass', 'dirt', 'pink wool', 'dead shrub'],
+    ['diorite', 'andesite', 'grass', 'dirt', 'dead shrub']
+  ),
+  ['diorite', 'pink wool']
+);
+```
+
+`["andesite", "grass", "dirt", "pink wool", "dead shrub"], ["diorite", "andesite", "grass", "dirt", "dead shrub"]` يجب ان يعيد array بعنصرين.
+
+```js
+assert(
+  diffArray(
+    ['andesite', 'grass', 'dirt', 'pink wool', 'dead shrub'],
+    ['diorite', 'andesite', 'grass', 'dirt', 'dead shrub']
+  ).length === 2
+);
+```
+
+`["andesite", "grass", "dirt", "dead shrub"], ["andesite", "grass", "dirt", "dead shrub"]` يجب ان يعيد `[]`.
+
+```js
+assert.sameMembers(
+  diffArray(
+    ['andesite', 'grass', 'dirt', 'dead shrub'],
+    ['andesite', 'grass', 'dirt', 'dead shrub']
+  ),
+  []
+);
+```
+
+`["andesite", "grass", "dirt", "dead shrub"], ["andesite", "grass", "dirt", "dead shrub"]`يجب ان يعيد array فارغة.
+
+```js
+assert(
+  diffArray(
+    ['andesite', 'grass', 'dirt', 'dead shrub'],
+    ['andesite', 'grass', 'dirt', 'dead shrub']
+  ).length === 0
+);
+```
+
+`[1, 2, 3, 5], [1, 2, 3, 4, 5]` يجب ان يعيد `[4]`.
+
+```js
+assert.sameMembers(diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]), [4]);
+```
+
+`[1, 2, 3, 5], [1, 2, 3, 4, 5]` يجب ان يعيد array بعنصر واحد.
+
+```js
+assert(diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]).length === 1);
+```
+
+`[1, "calf", 3, "piglet"], [1, "calf", 3, 4]` يجب ان يعيد `["piglet", 4]`.
+
+```js
+assert.sameMembers(diffArray([1, 'calf', 3, 'piglet'], [1, 'calf', 3, 4]), [
+  'piglet',
+  4
+]);
+```
+
+`[1, "calf", 3, "piglet"], [1, "calf", 3, 4]` يجب ان يعيد array بعنصرين.
+
+```js
+assert(diffArray([1, 'calf', 3, 'piglet'], [1, 'calf', 3, 4]).length === 2);
+```
+
+`[], ["snuffleupagus", "cookie monster", "elmo"]` يجب ان يعيد `["snuffleupagus", "cookie monster", "elmo"]`.
+
+```js
+assert.sameMembers(diffArray([], ['snuffleupagus', 'cookie monster', 'elmo']), [
+  'snuffleupagus',
+  'cookie monster',
+  'elmo'
+]);
+```
+
+`[], ["snuffleupagus", "cookie monster", "elmo"]` يجب ان يعيد array بثلالث عناصر.
+
+```js
+assert(diffArray([], ['snuffleupagus', 'cookie monster', 'elmo']).length === 3);
+```
+
+`[1, "calf", 3, "piglet"], [7, "filly"]` يجب ان يعيد `[1, "calf", 3, "piglet", 7, "filly"]`.
+
+```js
+assert.sameMembers(diffArray([1, 'calf', 3, 'piglet'], [7, 'filly']), [
+  1,
+  'calf',
+  3,
+  'piglet',
+  7,
+  'filly'
+]);
+```
+
+`[1, "calf", 3, "piglet"], [7, "filly"]` يجب ان يعيد array بستة عناصر.
+
+```js
+assert(diffArray([1, 'calf', 3, 'piglet'], [7, 'filly']).length === 6);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function diffArray(arr1, arr2) {
+  const newArr = [];
+  return newArr;
+}
+
+diffArray([1, 2, 3, 5], [1, 2, 3, 4, 5]);
+```
+
+# --solutions--
+
+```js
+function diffArray(arr1, arr2) {
+  const newArr = [];
+  const h1 = Object.create(null);
+  arr1.forEach(function(e) {
+    h1[e] = e;
+  });
+  const h2 = Object.create(null);
+  arr2.forEach(function(e) {
+    h2[e] = e;
+  });
+
+  Object.keys(h1).forEach(function(e) {
+     if (!(e in h2)) newArr.push(h1[e]);
+  });
+  Object.keys(h2).forEach(function(e) {
+     if (!(e in h1)) newArr.push(h2[e]);
+  });
+  return newArr;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md
new file mode 100644
index 00000000000..1c618315bba
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/dna-pairing.md
@@ -0,0 +1,81 @@
+---
+id: afd15382cdfb22c9efe8b7de
+title: DNA Pairing
+challengeType: 1
+forumTopicId: 16009
+dashedName: dna-pairing
+---
+
+# --description--
+
+تتكوّن مقاطع الحمض النووي من أزواج نووية. يتم تمثيل أزواج القاعدة بأحرف <em>AT</em> و <em>CG</em> التي تكون هيكل بناء الحمض النووي المزدوج.
+
+خيط الحمض النووي يفتقد عنصر الاقتران. كتابة وظيفة لمطابقة أزواج القاعدة المفقودة لشريط الحمض النووي المقدم. لكل رمز في مقطع المقدمة، ابحث عن رمز زوج أساسي. إرجاع النتائج كقائمة 2d.
+
+على سبيل المثال، للمدخل `GCG`، ينتج `[["G", "C"], ["C","G"], ["G", "C"]]`
+
+يتم إقران الرمز مع مثيله الخاص به في قائمة، ويتم تجميع كل القوائم في قائمة مغلفة واحدة.
+
+# --hints--
+
+يجب أن ينتج `pairElement("ATCGA")` قائمة `[["A","T"],["T","A"],["C","G"],["G","C"],["A","T"]]`.
+
+```js
+assert.deepEqual(pairElement('ATCGA'), [
+  ['A', 'T'],
+  ['T', 'A'],
+  ['C', 'G'],
+  ['G', 'C'],
+  ['A', 'T']
+]);
+```
+
+يجب أن ينتج `pairElement("TTGAG")` قائمة `[["T","A"],["T","A"],["G","C"],["A","T"],["G","C"]]`.
+
+```js
+assert.deepEqual(pairElement('TTGAG'), [
+  ['T', 'A'],
+  ['T', 'A'],
+  ['G', 'C'],
+  ['A', 'T'],
+  ['G', 'C']
+]);
+```
+
+يجب أن ينتج `pairElement("CTCTA")` قائمة `[["C","G"],["T","A"],["C","G"],["T","A"],["A","T"]]`.
+
+```js
+assert.deepEqual(pairElement('CTCTA'), [
+  ['C', 'G'],
+  ['T', 'A'],
+  ['C', 'G'],
+  ['T', 'A'],
+  ['A', 'T']
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pairElement(str) {
+  return str;
+}
+
+pairElement("GCG");
+```
+
+# --solutions--
+
+```js
+var lookup = Object.create(null);
+lookup.A = 'T';
+lookup.T = 'A';
+lookup.C = 'G';
+lookup.G = 'C';
+
+function pairElement(str) {
+ return str.split('').map(function(p) {return [p, lookup[p]];});
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md
new file mode 100644
index 00000000000..06b9b57d7db
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/drop-it.md
@@ -0,0 +1,104 @@
+---
+id: a5deed1811a43193f9f1c841
+title: Drop it
+challengeType: 1
+forumTopicId: 16010
+dashedName: drop-it
+---
+
+# --description--
+
+بالنظر إلى المصفوفة `arr` ، كرر وأزل كل عنصر بدءًا من العنصر الأول (الفهرس 0) حتى تعرض الدالة `func` القيمة `true` عندما يتم تمرير العنصر المتكرر من خلالها.
+
+ثم ارجع بقية ال array بمجرد استيفاء الشرط، وإلا ، يجب إرجاع `arr` كـ array فارغة.
+
+# --hints--
+
+`dropElements([1, 2, 3, 4], function(n) {return n >= 3;})` يجب ان يرجع `[3, 4]`.
+
+```js
+assert.deepEqual(
+  dropElements([1, 2, 3, 4], function (n) {
+    return n >= 3;
+  }),
+  [3, 4]
+);
+```
+
+`dropElements([0, 1, 0, 1], function(n) {return n === 1;})` يجب ان يرجع `[1, 0, 1]`.
+
+```js
+assert.deepEqual(
+  dropElements([0, 1, 0, 1], function (n) {
+    return n === 1;
+  }),
+  [1, 0, 1]
+);
+```
+
+`dropElements([1, 2, 3], function(n) {return n > 0;})` يجب ان يرجع `[1, 2, 3]`.
+
+```js
+assert.deepEqual(
+  dropElements([1, 2, 3], function (n) {
+    return n > 0;
+  }),
+  [1, 2, 3]
+);
+```
+
+`dropElements([1, 2, 3, 4], function(n) {return n > 5;})` يجب ان يرجع `[]`.
+
+```js
+assert.deepEqual(
+  dropElements([1, 2, 3, 4], function (n) {
+    return n > 5;
+  }),
+  []
+);
+```
+
+`dropElements([1, 2, 3, 7, 4], function(n) {return n > 3;})` يجب ان يرجع `[7, 4]`.
+
+```js
+assert.deepEqual(
+  dropElements([1, 2, 3, 7, 4], function (n) {
+    return n > 3;
+  }),
+  [7, 4]
+);
+```
+
+`dropElements([1, 2, 3, 9, 2], function(n) {return n > 2;})` يجب ان يرجع `[3, 9, 2]`.
+
+```js
+assert.deepEqual(
+  dropElements([1, 2, 3, 9, 2], function (n) {
+    return n > 2;
+  }),
+  [3, 9, 2]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function dropElements(arr, func) {
+  return arr;
+}
+
+dropElements([1, 2, 3], function(n) {return n < 3; });
+```
+
+# --solutions--
+
+```js
+function dropElements(arr, func) {
+  while (arr.length && !func(arr[0])) {
+    arr.shift();
+  }
+  return arr;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md
new file mode 100644
index 00000000000..45513e2d8af
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/everything-be-true.md
@@ -0,0 +1,158 @@
+---
+id: a10d2431ad0c6a099a4b8b52
+title: كل شيء كن صحيح (Everything Be True)
+challengeType: 1
+forumTopicId: 16011
+dashedName: everything-be-true
+---
+
+# --description--
+
+تحقق مما إذا كان الـ argument الثاني صحيح <dfn>truthy</dfn> على جميع عناصر المجموعة (الـ argument الأول).
+
+بمعنى آخر ، يتم إعطاؤك array لمجموعة من الـ objects. سيكون المسند `pre` خاصية للـ object وتحتاج إلى إرجاع `true` إذا كانت قيمته `truthy`. خلاف ذلك، قم بإرجاع `false`.
+
+في Javascript، القيم `truthy` هي القيم التي تترجم إلى `true` عند تقييمها في سياق منطقي (Boolean).
+
+تذكر، يمكنك الوصول إلى خصائص الـ object إما من خلال علامة النقطة أو علامة القوسين `[]`.
+
+# --hints--
+
+`truthCheck([{name: "Quincy", role: "Founder", isBot: false}, {name: "Naomi", role: "", isBot: false}, {name: "Camperbot", role: "Bot", isBot: true}], "isBot")` يجب أن يرجع `false`.
+
+```js
+assert.strictEqual(truthCheck(
+  [
+    { name: "Quincy", role: "Founder", isBot: false },
+    { name: "Naomi", role: "", isBot: false },
+    { name: "Camperbot", role: "Bot", isBot: true }
+  ],
+  "isBot"), false);
+```
+
+`truthCheck([{name: "Quincy", role: "Founder", isBot: false}, {name: "Naomi", role: "", isBot: false}, {name: "Camperbot", role: "Bot", isBot: true}], "name")` يجب أن يرجع `true`.
+
+```js
+assert.strictEqual(truthCheck(
+  [
+    { name: "Quincy", role: "Founder", isBot: false },
+    { name: "Naomi", role: "", isBot: false },
+    { name: "Camperbot", role: "Bot", isBot: true }
+  ],
+  "name"), true);
+```
+
+`truthCheck([{name: "Quincy", role: "Founder", isBot: false}, {name: "Naomi", role: "", isBot: false}, {name: "Camperbot", role: "Bot", isBot: true}], "role")` يجب أن يرجع `false`.
+
+```js
+assert.strictEqual(truthCheck(
+  [
+    { name: "Quincy", role: "Founder", isBot: false },
+    { name: "Naomi", role: "", isBot: false },
+    { name: "Camperbot", role: "Bot", isBot: true }
+  ],
+  "role"), false);
+```
+
+`truthCheck([{name: "Pikachu", number: 25, caught: 3}, {name: "Togepi", number: 175, caught: 1}], "number")` يجب أن يرجع `true`.
+
+```js
+assert.strictEqual(truthCheck(
+  [
+    { name: "Pikachu", number: 25, caught: 3 },
+    { name: "Togepi", number: 175, caught: 1 },
+  ],
+  "number"), true);
+```
+
+`truthCheck([{name: "Pikachu", number: 25, caught: 3}, {name: "Togepi", number: 175, caught: 1}, {name: "MissingNo", number: NaN, caught: 0}], "caught")` يجب أن يرجع `false`.
+
+```js
+assert.strictEqual(truthCheck(
+  [
+    { name: "Pikachu", number: 25, caught: 3 },
+    { name: "Togepi", number: 175, caught: 1 },
+    { name: "MissingNo", number: NaN, caught: 0 },
+  ],
+  "caught"), false);
+```
+
+`truthCheck([{name: "Pikachu", number: 25, caught: 3}, {name: "Togepi", number: 175, caught: 1}, {name: "MissingNo", number: NaN, caught: 0}], "number")` يجب أن يرجع `false`.
+
+```js
+assert.strictEqual(truthCheck(
+  [
+    { name: "Pikachu", number: 25, caught: 3 },
+    { name: "Togepi", number: 175, caught: 1 },
+    { name: "MissingNo", number: NaN, caught: 0 },
+  ],
+  "number"), false);
+```
+
+`truthCheck([{name: "Quincy", username: "QuincyLarson"}, {name: "Naomi", username: "nhcarrigan"}, {name: "Camperbot"}], "username")` يجب أن يرجع `false`.
+
+```js
+assert.strictEqual(truthCheck(
+  [
+    { name: "Quincy", username: "QuincyLarson" },
+    { name: "Naomi", username: "nhcarrigan" },
+    { name: "Camperbot" }
+  ],
+  "username"), false);
+```
+
+`truthCheck([{name: "freeCodeCamp", users: [{name: "Quincy"}, {name: "Naomi"}]}, {name: "Code Radio", users: [{name: "Camperbot"}]}, {name: "", users: []}], "users")` يجب أن يرجع `true`.
+
+```js
+assert.strictEqual(truthCheck(
+  [
+    { name: "freeCodeCamp", users: [{ name: "Quincy" }, { name: "Naomi" }] },
+    { name: "Code Radio", users: [{ name: "Camperbot" }] },
+    { name: "", users: [] },
+  ],
+  "users"), true);
+```
+
+`truthCheck([{id: 1, data: {url: "https://freecodecamp.org", name: "freeCodeCamp"}}, {id: 2, data: {url: "https://coderadio.freecodecamp.org/", name: "CodeRadio"}}, {id: null, data: {}}], "data")` يجب أن يرجع `true`.
+
+```js
+assert.strictEqual(truthCheck(
+  [
+    { id: 1, data: { url: "https://www.freecodecamp.org", name: "freeCodeCamp" } },
+    { id: 2, data: { url: "https://coderadio.freecodecamp.org/", name: "CodeRadio" } },
+    { id: null, data: {} },
+  ],
+  "data"), true);
+```
+
+`truthCheck([{id: 1, data: {url: "https://freecodecamp.org", name: "freeCodeCamp"}}, {id: 2, data: {url: "https://coderadio.freecodecamp.org/", name: "CodeRadio"}}, {id: null, data: {}}], "id")` يجب أن يرجع `false`.
+
+```js
+assert.strictEqual(truthCheck(
+  [
+    { id: 1, data: { url: "https://www.freecodecamp.org", name: "freeCodeCamp" } },
+    { id: 2, data: { url: "https://coderadio.freecodecamp.org/", name: "CodeRadio" } },
+    { id: null, data: {} },
+  ],
+  "id"), false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function truthCheck(collection, pre) {
+  return pre;
+}
+
+truthCheck([{name: "Quincy", role: "Founder", isBot: false}, {name: "Naomi", role: "", isBot: false}, {name: "Camperbot", role: "Bot", isBot: true}], "isBot");
+```
+
+# --solutions--
+
+```js
+function truthCheck(collection, pre) {
+  return collection.every(function(e) { return e[pre]; });
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md
new file mode 100644
index 00000000000..ac12cdecc5b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/make-a-person.md
@@ -0,0 +1,198 @@
+---
+id: a2f1d72d9b908d0bd72bb9f6
+title: اصنع شخصا (Make a Person)
+challengeType: 1
+forumTopicId: 16020
+dashedName: make-a-person
+---
+
+# --description--
+
+املأ الـ object constructor بالـ methods التالية أدناه:
+
+```js
+getFirstName()
+getLastName()
+getFullName()
+setFirstName(first)
+setLastName(last)
+setFullName(firstAndLast)
+```
+
+قم بتشغيل الاختبارات لرؤية المخرجات المتوقعة لكل method. الـ methods التي تأخذ argument يجب أن تقبل argument واحدة فقط ويجب أن تكون string. يجب أن تكون هذه الـ methods هي الوسيلة الوحيدة المتاحة للتفاعل مع الـ object.
+
+# --hints--
+
+لا يجب إضافة أي خواص. `Object.keys(bob).length` يجب دائما أن يرجع 6.
+
+```js
+assert.strictEqual(
+  Object.keys((function () {
+    let bob = new Person('Bob Ross');
+    bob.setFirstName('Haskell');
+    bob.setLastName('Curry');
+    bob.setFullName('John Smith');
+    return bob;
+  })()).length,
+  6
+ );
+```
+
+`bob instanceof Person` يجب أن يرجع `true`.
+
+```js
+assert.deepEqual(bob instanceof Person, true);
+```
+
+`bob.firstName` يجب أن يرجع `undefined`.
+
+```js
+assert.deepEqual(bob.firstName, undefined);
+```
+
+`bob.lastName` يجب أن يرجع `undefined`.
+
+```js
+assert.deepEqual(bob.lastName, undefined);
+```
+
+`bob.getFirstName()` يجب أن يرجع السلسلة `Bob`.
+
+```js
+assert.deepEqual(bob.getFirstName(), 'Bob');
+```
+
+`bob.getLastName()` يجب أن يعيد السلسلة `Ross`.
+
+```js
+assert.deepEqual(bob.getLastName(), 'Ross');
+```
+
+`bob.getFullName()` يجب أن يعيد السلسلة `Bob Ross`.
+
+```js
+assert.deepEqual(bob.getFullName(), 'Bob Ross');
+```
+
+`bob.getFullName()` يجب أن يعيد السلسلة `Haskell Ross` بعد `bob.setFirstName("Haskell")`.
+
+```js
+assert.strictEqual(
+  (function () {
+    bob.setFirstName('Haskell');
+    return bob.getFullName();
+  })(),
+  'Haskell Ross'
+);
+```
+
+`bob.getFullName()` يجب أن يعيد السلسلة `Haskell Curry` بعد `bob.setLastName("Curry")`.
+
+```js
+assert.strictEqual(
+  (function () {
+    var _bob = new Person('Haskell Ross');
+    _bob.setLastName('Curry');
+    return _bob.getFullName();
+  })(),
+  'Haskell Curry'
+);
+```
+
+`bob.getFullName()` يجب أن يعيد السلسلة `Haskell Curry` بعد `bob.setFullName("Haskell Curry")`.
+
+```js
+assert.strictEqual(
+  (function () {
+    bob.setFullName('Haskell Curry');
+    return bob.getFullName();
+  })(),
+  'Haskell Curry'
+);
+```
+
+`bob.getFirstName()` يجب أن يعيد السلسلة `Haskell` بعد `bob.setFullName("Haskell Curry")`.
+
+```js
+assert.strictEqual(
+  (function () {
+    bob.setFullName('Haskell Curry');
+    return bob.getFirstName();
+  })(),
+  'Haskell'
+);
+```
+
+`bob.getLastName()` يجب أن يعيد السلسلة `Curry` بعد `bob.setFullName("Haskell Curry")`.
+
+```js
+assert.strictEqual(
+  (function () {
+    bob.setFullName('Haskell Curry');
+    return bob.getLastName();
+  })(),
+  'Curry'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const Person = function(firstAndLast) {
+  // Only change code below this line
+  // Complete the method below and implement the others similarly
+  this.getFullName = function() {
+    return "";
+  };
+  return firstAndLast;
+};
+
+const bob = new Person('Bob Ross');
+bob.getFullName();
+```
+
+# --solutions--
+
+```js
+const Person = function(firstAndLast) {
+
+  let firstName, lastName;
+
+  function updateName(str) {
+    firstName = str.split(" ")[0];
+    lastName = str.split(" ")[1];
+  }
+
+  updateName(firstAndLast);
+
+  this.getFirstName = function(){
+    return firstName;
+  };
+
+  this.getLastName = function(){
+    return lastName;
+  };
+
+  this.getFullName = function(){
+    return firstName + " " + lastName;
+  };
+
+  this.setFirstName = function(str){
+    firstName = str;
+  };
+
+
+  this.setLastName = function(str){
+    lastName = str;
+  };
+
+  this.setFullName = function(str){
+    updateName(str);
+  };
+};
+
+const bob = new Person('Bob Ross');
+bob.getFullName();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/map-the-debris.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/map-the-debris.md
new file mode 100644
index 00000000000..cc32d99464f
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/map-the-debris.md
@@ -0,0 +1,83 @@
+---
+id: af4afb223120f7348cdfc9fd
+title: Map the Debris
+challengeType: 1
+forumTopicId: 16021
+dashedName: map-the-debris
+---
+
+# --description--
+
+وفقا لقانون كيبلر الثالث، فإن المدّة المدارية $T$ من كتلتين نقطتين تدور في مدار دائري أو إهليجي هي:
+
+$$ T = 2 \pi \sqrt{\frac{a^{3}}{\mu}} $$
+
+- $a$ هو المحور شبه الرئيس للمدار
+- $μ = GM$ هو معلمة الجاذبية القياسية
+- $G$ هو الثبات الجاذبي،
+- $M$ هو كتلة الجسم الأكثر كثافة.
+
+أنشئ قائمة جديدة تحوِّل الارتفاع المتوسط للعناصر إلى فترات مدارية (بالثواني).
+
+سوف تحتوي القائمة على كائنات بالتنسيق الآتي `{name: 'name', avgAlt: avgAlt}`.
+
+وينبغي تقريب القيم إلى أقرب عدد صحيح. الجسم الموجود في المدار هو الأرض.
+
+نصف قطر الأرض هو 6367.4447 كيلومتر، و GM الأرض هو 398600.4418 km<sup>3</sup>s<sup>-2</sup>.
+
+# --hints--
+
+يجب أن ينتج `orbitalPeriod([{name : "sputnik", avgAlt : 35873.5553}])` قائمة `[{name: "sputnik", orbitalPeriod: 86400}]`.
+
+```js
+assert.deepEqual(orbitalPeriod([{ name: 'sputnik', avgAlt: 35873.5553 }]), [
+  { name: 'sputnik', orbitalPeriod: 86400 }
+]);
+```
+
+يجب أن ينتج `orbitalPeriod([{name: "iss", avgAlt: 413.6}, {name: "hubble", avgAlt: 556.7}, {name: "moon", avgAlt: 378632.553}])` قائمة `[{name : "iss", orbitalPeriod: 5557}, {name: "hubble", orbitalPeriod: 5734}, {name: "moon", orbitalPeriod: 2377399}]`.
+
+```js
+assert.deepEqual(
+  orbitalPeriod([
+    { name: 'iss', avgAlt: 413.6 },
+    { name: 'hubble', avgAlt: 556.7 },
+    { name: 'moon', avgAlt: 378632.553 }
+  ]),
+  [
+    { name: 'iss', orbitalPeriod: 5557 },
+    { name: 'hubble', orbitalPeriod: 5734 },
+    { name: 'moon', orbitalPeriod: 2377399 }
+  ]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function orbitalPeriod(arr) {
+  const GM = 398600.4418;
+  const earthRadius = 6367.4447;
+  return arr;
+}
+
+orbitalPeriod([{name : "sputnik", avgAlt : 35873.5553}]);
+```
+
+# --solutions--
+
+```js
+function orbitalPeriod(arr) {
+  const GM = 398600.4418;
+  const earthRadius = 6367.4447;
+  const TAU = 2 * Math.PI;
+  return arr.map(function(obj) {
+    return {
+      name: obj.name,
+      orbitalPeriod: Math.round(TAU * Math.sqrt(Math.pow(obj.avgAlt+earthRadius, 3)/GM))
+    };
+  });
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/missing-letters.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/missing-letters.md
new file mode 100644
index 00000000000..554d829b317
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/missing-letters.md
@@ -0,0 +1,72 @@
+---
+id: af7588ade1100bde429baf20
+title: الأحرف المفقودة (Missing letters)
+challengeType: 1
+forumTopicId: 16023
+dashedName: missing-letters
+---
+
+# --description--
+
+ابحث عن الحرف المفقود في نطاق الحروف الذي تم تمريرها وقم بارجاعه.
+
+إذا كانت جميع الحروف موجودة في النطاق، إرجع `undefined`.
+
+# --hints--
+
+`fearNotLetter("abce")` يجب أن يعيد السلسلة `d`.
+
+```js
+assert.deepEqual(fearNotLetter('abce'), 'd');
+```
+
+`fearNotLetter("abcdefghjklmno")` يجب أن يعيد السلسلة `i`.
+
+```js
+assert.deepEqual(fearNotLetter('abcdefghjklmno'), 'i');
+```
+
+`fearNotLetter("stvwx")` يجب أن يعيد السلسلة `u`.
+
+```js
+assert.deepEqual(fearNotLetter('stvwx'), 'u');
+```
+
+`fearNotLetter("bcdf")` يجب أن يعيد السلسلة `e`.
+
+```js
+assert.deepEqual(fearNotLetter('bcdf'), 'e');
+```
+
+`fearNotLetter("abcdefghijklmnopqrstuvwxyz")` يجب أن يعيد `undefined`.
+
+```js
+assert.isUndefined(fearNotLetter('abcdefghijklmnopqrstuvwxyz'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function fearNotLetter(str) {
+  return str;
+}
+
+fearNotLetter("abce");
+```
+
+# --solutions--
+
+```js
+function fearNotLetter (str) {
+  for (var i = str.charCodeAt(0); i <= str.charCodeAt(str.length - 1); i++) {
+    var letter = String.fromCharCode(i);
+    if (str.indexOf(letter) === -1) {
+      return letter;
+    }
+  }
+
+  return undefined;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/pig-latin.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/pig-latin.md
new file mode 100644
index 00000000000..15c0bc1f8b5
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/pig-latin.md
@@ -0,0 +1,93 @@
+---
+id: aa7697ea2477d1316795783b
+title: Pig Latin
+challengeType: 1
+forumTopicId: 16039
+dashedName: pig-latin
+---
+
+# --description--
+
+Pig Latin هي طريقة لتغيير الكلمات الإنجليزية. و القواعد هي كما يلي:
+
+\- إذا كانت الكلمة تبدأ بـ consonant فخذ الـ consonant الاول او مجموعة الـ consonants، وحركها إلى نهاية الكلمة، وأضف `ay` إليها.
+
+\- إذا كانت الكلمة تبدأ بـ vowel، فقط أضف `way` في النهاية.
+
+# --instructions--
+
+ترجم الـ string المقدم إلى Pig Latin. Input strings ستكون كلمات إنجليزية بأحرف صغيرة.
+
+# --hints--
+
+`translatePigLatin("california")` يجب أن يعيد السلسلة `aliforniacay`.
+
+```js
+assert.deepEqual(translatePigLatin('california'), 'aliforniacay');
+```
+
+`translatePigLatin("paragraphs")` يجب أن يعيد السلسلة `aragraphspay`.
+
+```js
+assert.deepEqual(translatePigLatin('paragraphs'), 'aragraphspay');
+```
+
+`translatePigLatin("glove")` يجب أن يعيد السلسلة `oveglay`.
+
+```js
+assert.deepEqual(translatePigLatin('glove'), 'oveglay');
+```
+
+`translatePigLatin("algorithm")` يجب أن يعيد السلسلة `algorithmway`.
+
+```js
+assert.deepEqual(translatePigLatin('algorithm'), 'algorithmway');
+```
+
+`translatePigLatin("eight")` يجب أن يعيد السلسلة `eightway`.
+
+```js
+assert.deepEqual(translatePigLatin('eight'), 'eightway');
+```
+
+يجب أن تتعامل مع الكلمات التي يأتي فيها أول vowel في منتصف الكلمة.  `translatePigLatin("schwartz")` يجب أن يعيد السلسلة `artzschway`.
+
+```js
+assert.deepEqual(translatePigLatin('schwartz'), 'artzschway');
+```
+
+يجب أن تتعامل مع الكلمات بدون vowels. `translatePigLatin("rhythm")` يجب أن يعيد السلسلة `rhythmay`.
+
+```js
+assert.deepEqual(translatePigLatin('rhythm'), 'rhythmay');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function translatePigLatin(str) {
+  return str;
+}
+
+translatePigLatin("consonant");
+```
+
+# --solutions--
+
+```js
+function translatePigLatin(str) {
+  if (isVowel(str.charAt(0))) return str + "way";
+  var front = [];
+  str = str.split('');
+  while (str.length && !isVowel(str[0])) {
+    front.push(str.shift());
+  }
+  return [].concat(str, front).join('') + 'ay';
+}
+
+function isVowel(c) {
+  return ['a', 'e', 'i', 'o', 'u'].indexOf(c.toLowerCase()) !== -1;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/search-and-replace.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/search-and-replace.md
new file mode 100644
index 00000000000..08bf9f2447e
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/search-and-replace.md
@@ -0,0 +1,100 @@
+---
+id: a0b5010f579e69b815e7c5d6
+title: البحث والاستبدال
+challengeType: 1
+forumTopicId: 16045
+dashedName: search-and-replace
+---
+
+# --description--
+
+قم بإجراء بحث واستبدال علي الجملة باستخدام الوسيطات المقدمة و ارجع الجملة الجديدة.
+
+الوسيطة الأولى هي الجملة التي سيجري البحث والاستبدال عليها.
+
+الوسيطة الثانية هي الكلمة التي سيتم استبدالها.
+
+أما الوسيطة الثالثة فهي ما ستحل محل الوسيطة الثانية.
+
+**ملاحظة:** احتفظ بحالة الحرف الأول في الكلمة الأصلية عند استبدالها. على سبيل المثال إذا كنت تقصد استبدال كلمة `Book` بكلمة `dog`، ينبغي استبدالها كـ `Dog`
+
+# --hints--
+
+`myReplace("Let us go to the store", "store", "mall")` يجب أن يعيد السلسلة النصية `Let us go to the mall`.
+
+```js
+assert.deepEqual(
+  myReplace('Let us go to the store', 'store', 'mall'),
+  'Let us go to the mall'
+);
+```
+
+`myReplace("He is Sleeping on the couch", "Sleeping", "sitting")` يجب أن يعيد السلسلة النصية `He is Sitting on the couch`.
+
+```js
+assert.deepEqual(
+  myReplace('He is Sleeping on the couch', 'Sleeping', 'sitting'),
+  'He is Sitting on the couch'
+);
+```
+
+`myReplace("I think we should look up there", "up", "Down")` يجب أن يعيد السلسلة النصية `I think we should look down there`.
+
+```js
+assert.deepEqual(
+  myReplace('I think we should look up there', 'up', 'Down'),
+  'I think we should look down there'
+);
+```
+
+`myReplace("This has a spellngi error", "spellngi", "spelling")` يجب أن يعيد السلسلة النصية `This has a spelling error`.
+
+```js
+assert.deepEqual(
+  myReplace('This has a spellngi error', 'spellngi', 'spelling'),
+  'This has a spelling error'
+);
+```
+
+`myReplace("His name is Tom", "Tom", "john")` يجب أن يعيد السلسلة النصية `His name is John`.
+
+```js
+assert.deepEqual(
+  myReplace('His name is Tom', 'Tom', 'john'),
+  'His name is John'
+);
+```
+
+`myReplace("Let us get back to more Coding", "Coding", "algorithms")` يجب أن يعيد السلسلة النصية `Let us get back to more Algorithms`.
+
+```js
+assert.deepEqual(
+  myReplace('Let us get back to more Coding', 'Coding', 'algorithms'),
+  'Let us get back to more Algorithms'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function myReplace(str, before, after) {
+  return str;
+}
+
+myReplace("A quick brown fox jumped over the lazy dog", "jumped", "leaped");
+```
+
+# --solutions--
+
+```js
+function myReplace(str, before, after) {
+  if (before.charAt(0) === before.charAt(0).toUpperCase()) {
+    after = after.charAt(0).toUpperCase() + after.substring(1);
+  } else {
+    after = after.charAt(0).toLowerCase() + after.substring(1);
+  }
+  return str.replace(before, after);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md
new file mode 100644
index 00000000000..1f21f014636
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/seek-and-destroy.md
@@ -0,0 +1,104 @@
+---
+id: a39963a4c10bc8b4d4f06d7e
+title: ابحث ودمر (Seek and Destroy)
+challengeType: 1
+forumTopicId: 16046
+dashedName: seek-and-destroy
+---
+
+# --description--
+
+سيتم تزويدك بمصفوفة أولية (أول وسيطة في دالة `destroyer`)، تليها وسيطة واحدة أو أكثر. قم بإزالة جميع العناصر من المصفوفة الأولية التي لها نفس قيمة هذه الوسيطات.
+
+**ملاحظة:** يجب عليك استخدام كائن `arguments`.
+
+# --hints--
+
+`destroyer([1, 2, 3, 1, 2, 3], 2, 3)` يجب أن ترجع `[1, 1]`.
+
+```js
+assert.deepEqual(destroyer([1, 2, 3, 1, 2, 3], 2, 3), [1, 1]);
+```
+
+`destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3)` يجب ان ترجع `[1, 5, 1]`.
+
+```js
+assert.deepEqual(destroyer([1, 2, 3, 5, 1, 2, 3], 2, 3), [1, 5, 1]);
+```
+
+`destroyer([3, 5, 1, 2, 2], 2, 3, 5)` يجب ان ترجع `[1]`.
+
+```js
+assert.deepEqual(destroyer([3, 5, 1, 2, 2], 2, 3, 5), [1]);
+```
+
+`destroyer([2, 3, 2, 3], 2, 3)` يجب ان ترجع `[]`.
+
+```js
+assert.deepEqual(destroyer([2, 3, 2, 3], 2, 3), []);
+```
+
+`destroyer(["tree", "hamburger", 53], "tree", 53)` يجب ان ترجع `["hamburger"]`.
+
+```js
+assert.deepEqual(destroyer(['tree', 'hamburger', 53], 'tree', 53), [
+  'hamburger'
+]);
+```
+
+`destroyer(["possum", "trollo", 12, "safari", "hotdog", 92, 65, "grandma", "bugati", "trojan", "yacht"], "yacht", "possum", "trollo", "safari", "hotdog", "grandma", "bugati", "trojan")` يجب ان ترجع `[12,92,65]`.
+
+```js
+assert.deepEqual(
+  destroyer(
+    [
+      'possum',
+      'trollo',
+      12,
+      'safari',
+      'hotdog',
+      92,
+      65,
+      'grandma',
+      'bugati',
+      'trojan',
+      'yacht'
+    ],
+    'yacht',
+    'possum',
+    'trollo',
+    'safari',
+    'hotdog',
+    'grandma',
+    'bugati',
+    'trojan'
+  ),
+  [12, 92, 65]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function destroyer(arr) {
+  return arr;
+}
+
+destroyer([1, 2, 3, 1, 2, 3], 2, 3);
+```
+
+# --solutions--
+
+```js
+function destroyer(arr) {
+  var hash = Object.create(null);
+  [].slice.call(arguments, 1).forEach(function(e) {
+    hash[e] = true;
+  });
+  return arr.filter(function(e) { return !(e in hash);});
+}
+
+destroyer([1, 2, 3, 1, 2, 3], 2, 3);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/smallest-common-multiple.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/smallest-common-multiple.md
new file mode 100644
index 00000000000..1edd5fb8923
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/smallest-common-multiple.md
@@ -0,0 +1,89 @@
+---
+id: ae9defd7acaf69703ab432ea
+title: أصغر مضاعف مشترك (Smallest Common Multiple)
+challengeType: 1
+forumTopicId: 16075
+dashedName: smallest-common-multiple
+---
+
+# --description--
+
+اعثر عن أصغر مضاعف مشترك للمعلمات المتوفرة والتي يمكن تقسيمها بالتساوي على كليهما ، وكذلك على جميع الأرقام المتسلسلة في النطاق بين هذه المعلمات.
+
+سيكون النطاق عبارة عن مصفوفة من رقمين لن يكونا بالضرورة بالترتيب العددي.
+
+على سبيل المثال ، إذا أعطيت 1 و 3 ، فابحث عن أصغر مضاعف مشترك لكل من 1 و 3 الذي يمكن أيضًا القسمة عليه بالتساوي على جميع الأرقام *بين* الرقم 1 و 3. الإجابة هنا هي 6.
+
+# --hints--
+
+`smallestCommons([1, 5])` يجب أن ترجع رقماً.
+
+```js
+assert.deepEqual(typeof smallestCommons([1, 5]), 'number');
+```
+
+`smallestCommons([1, 5])` يجب أن ترجع 60.
+
+```js
+assert.deepEqual(smallestCommons([1, 5]), 60);
+```
+
+`smallestCommons([5, 1])` يجب أن ترجع 60.
+
+```js
+assert.deepEqual(smallestCommons([5, 1]), 60);
+```
+
+`smallestCommons([2, 10])` يجب أن ترجع 2520.
+
+```js
+assert.deepEqual(smallestCommons([2, 10]), 2520);
+```
+
+`smallestCommons([1, 13])` يجب أن ترجع 360360.
+
+```js
+assert.deepEqual(smallestCommons([1, 13]), 360360);
+```
+
+`smallestCommons([23, 18])` يجب أن ترجع 6056820.
+
+```js
+assert.deepEqual(smallestCommons([23, 18]), 6056820);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function smallestCommons(arr) {
+  return arr;
+}
+
+smallestCommons([1,5]);
+```
+
+# --solutions--
+
+```js
+function gcd(a, b) {
+    while (b !== 0) {
+        a = [b, b = a % b][0];
+    }
+    return a;
+}
+
+function lcm(a, b) {
+    return (a * b) / gcd(a, b);
+}
+
+function smallestCommons(arr) {
+  arr.sort(function(a,b) {return a-b;});
+  var rng = [];
+  for (var i = arr[0]; i <= arr[1]; i++) {
+    rng.push(i);
+  }
+  return rng.reduce(lcm);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md
new file mode 100644
index 00000000000..55d2496f405
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sorted-union.md
@@ -0,0 +1,84 @@
+---
+id: a105e963526e7de52b219be9
+title: اتحاد مرتب (Sorted Union)
+challengeType: 1
+forumTopicId: 16077
+dashedName: sorted-union
+---
+
+# --description--
+
+أكتب وظيفة (function) تأخذ قائمتين أو أكثر وتعيد مجموعة جديدة من القيم الفريدة حسب ترتيب القوائم (arrays) الأصلية المقدمة.
+
+بعبارة أخرى، ينبغي إدراج جميع القيم الموجودة من جميع القوائم (arrays) بترتيبها الأصلي، ولكن دون تكرار لها في القائمة (array) النهائية.
+
+ينبغي فرز الأرقام الفريدة حسب الترتيب الأصلي، ولكن لا ينبغي فرز القائمة (array) النهائية بالترتيب العددي.
+
+تحقق إن اختبارات التأكيد من الأمثلة.
+
+# --hints--
+
+`uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1])` يجب أن يرجع `[1, 3, 2, 5, 4]`.
+
+```js
+assert.deepEqual(uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]), [1, 3, 2, 5, 4]);
+```
+
+`uniteUnique([1, 2, 3], [5, 2, 1])` يجب أن يرجع `[1, 2, 3, 5]`.
+
+```js
+assert.deepEqual(uniteUnique([1, 2, 3], [5, 2, 1]), [1, 2, 3, 5]);
+```
+
+`uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8])` يجب أن يرجع `[1, 2, 3, 5, 4, 6, 7, 8]`.
+
+```js
+assert.deepEqual(uniteUnique([1, 2, 3], [5, 2, 1, 4], [2, 1], [6, 7, 8]), [
+  1,
+  2,
+  3,
+  5,
+  4,
+  6,
+  7,
+  8
+]);
+```
+
+`uniteUnique([1, 3, 2], [5, 4], [5, 6])` يجب أن يرجع `[1, 3, 2, 5, 4, 6]`.
+
+```js
+assert.deepEqual(uniteUnique([1, 3, 2], [5, 4], [5, 6]), [1, 3, 2, 5, 4, 6]);
+```
+
+`uniteUnique([1, 3, 2, 3], [5, 2, 1, 4], [2, 1])` يجب أن يرجع `[1, 3, 2, 5, 4]`.
+
+```js
+assert.deepEqual(uniteUnique([1, 3, 2, 3], [5, 2, 1, 4], [2, 1]), [1, 3, 2, 5, 4]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function uniteUnique(arr) {
+  return arr;
+}
+
+uniteUnique([1, 3, 2], [5, 2, 1, 4], [2, 1]);
+```
+
+# --solutions--
+
+```js
+function uniteUnique(arr) {
+  return [].slice.call(arguments).reduce(function(a, b) {
+    return [].concat(
+      a, 
+      b.filter(function(e, currentIndex) {
+        return b.indexOf(e) === currentIndex && a.indexOf(e) === -1;
+      }));
+  }, []);
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/spinal-tap-case.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/spinal-tap-case.md
new file mode 100644
index 00000000000..beef1374bc0
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/spinal-tap-case.md
@@ -0,0 +1,70 @@
+---
+id: a103376db3ba46b2d50db289
+title: Spinal Tap Case
+challengeType: 1
+forumTopicId: 16078
+dashedName: spinal-tap-case
+---
+
+# --description--
+
+قم بتحويل سلسلة إلى حالة spinal. الحالة spinal هي "all-lowercase-words-joined-by-dashes" كلمات بحروف صغيرة تفصل بشرطة.
+
+# --hints--
+
+`spinalCase("This Is Spinal Tap")` يجب أن يعيد السلسلة `this-is-spinal-tap`.
+
+```js
+assert.deepEqual(spinalCase('This Is Spinal Tap'), 'this-is-spinal-tap');
+```
+
+`spinalCase("thisIsSpinalTap")` يجب أن يعيد السلسلة `this-is-spinal-tap`.
+
+```js
+assert.strictEqual(spinalCase('thisIsSpinalTap'), 'this-is-spinal-tap');
+```
+
+`spinalCase("The_Andy_Griffith_Show")` يجب أن يعيد السلسلة `the-andy-griffith-show`.
+
+```js
+assert.strictEqual(
+  spinalCase('The_Andy_Griffith_Show'),
+  'the-andy-griffith-show'
+);
+```
+
+`spinalCase("Teletubbies say Eh-oh")` يجب أن يعيد السلسلة `teletubbies-say-eh-oh`.
+
+```js
+assert.strictEqual(
+  spinalCase('Teletubbies say Eh-oh'),
+  'teletubbies-say-eh-oh'
+);
+```
+
+`spinalCase("AllThe-small Things")` يجب أن يعيد السلسلة `all-the-small-things`.
+
+```js
+assert.strictEqual(spinalCase('AllThe-small Things'), 'all-the-small-things');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function spinalCase(str) {
+  return str;
+}
+
+spinalCase('This Is Spinal Tap');
+```
+
+# --solutions--
+
+```js
+function spinalCase(str) {
+  str = str.replace(/([a-z](?=[A-Z]))/g, '$1 ');
+  return str.toLowerCase().replace(/\ |\_/g, '-');
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md
new file mode 100644
index 00000000000..47943c19594
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/steamroller.md
@@ -0,0 +1,79 @@
+---
+id: ab306dbdcc907c7ddfc30830
+title: عربة البخار (Steamroller)
+challengeType: 1
+forumTopicId: 16079
+dashedName: steamroller
+---
+
+# --description--
+
+قم بتسطيح مصفوفة متداخلة (Flatten a nested array). يجب عليك أن تأخذ في الحسبان مستويات مختلفة من التداخل.
+
+# --hints--
+
+`steamrollArray([[["a"]], [["b"]]])` يجب أن يرجع `["a", "b"]`.
+
+```js
+assert.deepEqual(steamrollArray([[['a']], [['b']]]), ['a', 'b']);
+```
+
+`steamrollArray([1, [2], [3, [[4]]]])` يجب أن يرجع `[1, 2, 3, 4]`.
+
+```js
+assert.deepEqual(steamrollArray([1, [2], [3, [[4]]]]), [1, 2, 3, 4]);
+```
+
+`steamrollArray([1, [], [3, [[4]]]])` يجب أن يرجع `[1, 3, 4]`.
+
+```js
+assert.deepEqual(steamrollArray([1, [], [3, [[4]]]]), [1, 3, 4]);
+```
+
+`steamrollArray([1, {}, [3, [[4]]]])` يجب أن يرجع `[1, {}, 3, 4]`.
+
+```js
+assert.deepEqual(steamrollArray([1, {}, [3, [[4]]]]), [1, {}, 3, 4]);
+```
+
+يجب ألا يستخدم الحل الخاص بك الدوال `Array.prototype.flat()` أو `Array.prototype.flatMap()`.
+
+```js
+assert(!code.match(/\.\s*flat\s*\(/) && !code.match(/\.\s*flatMap\s*\(/));
+```
+
+وينبغي عدم استخدام المتغيرات العالمية (Global variables).
+
+```js
+steamrollArray([1, {}, [3, [[4]]]])
+assert.deepEqual(steamrollArray([1, {}, [3, [[4]]]]), [1, {}, 3, 4])
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function steamrollArray(arr) {
+  return arr;
+}
+
+steamrollArray([1, [2], [3, [[4]]]]);
+```
+
+# --solutions--
+
+```js
+function steamrollArray(arr) {
+  if (!Array.isArray(arr)) {
+    return [arr];
+  }
+  var out = [];
+  arr.forEach(function(e) {
+    steamrollArray(e).forEach(function(v) {
+      out.push(v);
+    });
+  });
+  return out;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-numbers-in-a-range.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-numbers-in-a-range.md
new file mode 100644
index 00000000000..4e6a89ee780
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-numbers-in-a-range.md
@@ -0,0 +1,70 @@
+---
+id: a3566b1109230028080c9345
+title: جمع كل الأعداد في نطاق معين (Sum All Numbers in a Range)
+challengeType: 1
+forumTopicId: 16083
+dashedName: sum-all-numbers-in-a-range
+---
+
+# --description--
+
+سنقوم بتمرير مصفوفة من رقمين. قم بإرجاع مجموع هذين الرقمين بالإضافة إلى مجموع جميع الأرقام بينهما. لن يأتي أقل رقم دائماً أولاً.
+
+على سبيل المثال، `sumAll([4,1])` يجب أن يرجع `10` لأن مجموع جميع الأرقام بين 1 و 4 (وكلاهما شامل) هو `10`.
+
+# --hints--
+
+`sumAll([1, 4])` يجب أن يرجع رقم.
+
+```js
+assert(typeof sumAll([1, 4]) === 'number');
+```
+
+`sumAll([1, 4])` يجب أن يرجع 10.
+
+```js
+assert.deepEqual(sumAll([1, 4]), 10);
+```
+
+`sumAll([4, 1])` يجب أن يرجع 10.
+
+```js
+assert.deepEqual(sumAll([4, 1]), 10);
+```
+
+`sumAll([5, 10])` يجب أن يرجع 45.
+
+```js
+assert.deepEqual(sumAll([5, 10]), 45);
+```
+
+`sumAll([10, 5])` يجب أن يرجع 45.
+
+```js
+assert.deepEqual(sumAll([10, 5]), 45);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumAll(arr) {
+  return 1;
+}
+
+sumAll([1, 4]);
+```
+
+# --solutions--
+
+```js
+function sumAll(arr) {
+  var sum = 0;
+  arr.sort(function(a,b) {return a-b;});
+  for (var i = arr[0]; i <= arr[1]; i++) {
+    sum += i;
+  }
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md
new file mode 100644
index 00000000000..8c7c5178e43
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-odd-fibonacci-numbers.md
@@ -0,0 +1,82 @@
+---
+id: a5229172f011153519423690
+title: جمع كل أرقام فيبوناتشي الفردية (Sum All Odd Fibonacci Numbers)
+challengeType: 1
+forumTopicId: 16084
+dashedName: sum-all-odd-fibonacci-numbers
+---
+
+# --description--
+
+بإعطائك عدد صحيح موجب `num` ، قم بإرجاع مجموع كل أرقام فيبوناتشي الفردية الأقل من أو تساوي `num`.
+
+الرقمان الأولان في تسلسل فيبوناتشي هما 1 و 1. وكل رقم إضافي في التسلسل هو مجموع الرقمين السابقين. والأرقام الستة الأولى من سلسلة فيبوناتشي هي 1 و 1 و 2 و 3 و 5 و 8.
+
+على سبيل المثال `sumFibs(10)` يجب أن يرجع `10` لأن جميع أرقام فيبوناتشي الفردية التي هي أقل من أو تساوي `10` هي 1 و 1 و 3 و 5.
+
+# --hints--
+
+`sumFibs(1)` يجب أن يرجع رقم.
+
+```js
+assert(typeof sumFibs(1) === 'number');
+```
+
+`sumFibs(1000)` يجب أن يرجع 1785.
+
+```js
+assert(sumFibs(1000) === 1785);
+```
+
+`sumFibs(4000000)` يجب أن يرجع 4613732.
+
+```js
+assert(sumFibs(4000000) === 4613732);
+```
+
+`sumFibs(4)` يجب أن يرجع 5.
+
+```js
+assert(sumFibs(4) === 5);
+```
+
+`sumFibs(75024)` يجب أن يرجع 60696.
+
+```js
+assert(sumFibs(75024) === 60696);
+```
+
+`sumFibs(75025)` يجب أن يرجع 135721.
+
+```js
+assert(sumFibs(75025) === 135721);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumFibs(num) {
+  return num;
+}
+
+sumFibs(4);
+```
+
+# --solutions--
+
+```js
+function sumFibs(num) {
+  var a = 1;
+  var b = 1;
+  var s = 0;
+  while (a <= num) {
+    if (a % 2 !== 0) {
+      s += a;
+    }
+    a = [b, b=b+a][0];
+  }
+  return s;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
new file mode 100644
index 00000000000..bf63a0b28ed
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/sum-all-primes.md
@@ -0,0 +1,95 @@
+---
+id: a3bfc1673c0526e06d3ac698
+title: جمع كل الأعداد الأولية (Sum All Primes)
+challengeType: 1
+forumTopicId: 16085
+dashedName: sum-all-primes
+---
+
+# --description--
+
+الـ <dfn>prime number</dfn> هو رقم صحيح أكبر من 1 يقبل القسمة علي رقمين بالضبط: 1 و نفسه. فعلى سبيل المثال، 2 هو prime number لأنه لا يمكن قسمته إلا علي 1 و 2. وعلى النقيض من ذلك، فإن 4 ليس prime number لأنه قابل للقسمة علي 1 و 2 و 4.
+
+أعد كتابة `sumPrimes` حتى يرجع مجموع جميع الـ prime numbers التي هي أقل من أو تساوي num.
+
+# --hints--
+
+`sumPrimes(10)` يجب أن يعيد رقم.
+
+```js
+assert.deepEqual(typeof sumPrimes(10), 'number');
+```
+
+`sumPrimes(10)` يجب أن يرجع 17.
+
+```js
+assert.deepEqual(sumPrimes(10), 17);
+```
+
+`sumPrimes(977)` يجب أن يرجع 73156.
+
+```js
+assert.deepEqual(sumPrimes(977), 73156);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumPrimes(num) {
+  return num;
+}
+
+sumPrimes(10);
+```
+
+# --solutions--
+
+```js
+class PrimeSeive {
+  constructor(num) {
+    const seive = Array(Math.floor((num - 1) / 2)).fill(true);
+    const upper = Math.floor((num - 1) / 2);
+    const sqrtUpper = Math.floor((Math.sqrt(num) - 1) / 2);
+
+    for (let i = 0; i <= sqrtUpper; i++) {
+      if (seive[i]) {
+        // Mark value in seive array
+        const prime = 2 * i + 3;
+        // Mark all multiples of this number as false (not prime)
+        const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
+        for (let j = primeSqaredIndex; j < upper; j += prime) {
+          seive[j] = false;
+        }
+      }
+    }
+
+    this._seive = seive;
+  }
+
+  isPrime(num) {
+    return num === 2
+      ? true
+      : num % 2 === 0
+        ? false
+        : this.isOddPrime(num);
+  }
+
+  isOddPrime(num) {
+    return this._seive[(num - 3) / 2];
+  }
+};
+
+function sumPrimes(num) {
+  const primeSeive = new PrimeSeive(num);
+
+  let sum = 2;
+  for (let i = 3; i <= num; i += 2) {
+    if (primeSeive.isOddPrime(i)) sum += i;
+  }
+  return sum;
+}
+
+sumPrimes(10);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md
new file mode 100644
index 00000000000..33eb554dbe2
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/intermediate-algorithm-scripting/wherefore-art-thou.md
@@ -0,0 +1,139 @@
+---
+id: a8e512fbe388ac2f9198f0fa
+title: حيث الفن (Wherefore art thou)
+challengeType: 1
+forumTopicId: 16092
+dashedName: wherefore-art-thou
+---
+
+# --description--
+
+قم بإنشاء function يبحث في array من الـ objects (الـ argument الأولى) ويرجع array من جميع الـ objects التي لديها أزواج مطابقة من name و value (الـ argument الثانية). يجب أن يكون كل name و value من الـ object المصدر، موجودا في الـ object من الـ collection، إذا كان يراد إدراجه في الـ array التي تم ارجاعها.
+
+على سبيل المثال، إذا كانت الـ argument الأولى هي `[{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }]`, والـ argument الثانية هي `{ last: "Capulet" }`، يجب عليك إعادة الـ object الثالث من الـ array (الـ argument الأولى)، لأنه يحتوي على الاسم وقيمته، وهذا ما تم إرساله كـ argument ثانية.
+
+# --hints--
+
+`whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" })` يجب ان يرجع `[{ first: "Tybalt", last: "Capulet" }]`.
+
+```js
+assert.deepEqual(
+  whatIsInAName(
+    [
+      { first: 'Romeo', last: 'Montague' },
+      { first: 'Mercutio', last: null },
+      { first: 'Tybalt', last: 'Capulet' }
+    ],
+    { last: 'Capulet' }
+  ),
+  [{ first: 'Tybalt', last: 'Capulet' }]
+);
+```
+
+`whatIsInAName([{ "apple": 1 }, { "apple": 1 }, { "apple": 1, "bat": 2 }], { "apple": 1 })` يجب ان يرجع `[{ "apple": 1 }, { "apple": 1 }, { "apple": 1, "bat": 2 }]`.
+
+```js
+assert.deepEqual(
+  whatIsInAName([{ apple: 1 }, { apple: 1 }, { apple: 1, bat: 2 }], {
+    apple: 1
+  }),
+  [{ apple: 1 }, { apple: 1 }, { apple: 1, bat: 2 }]
+);
+```
+
+`whatIsInAName([{ "apple": 1, "bat": 2 }, { "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "bat": 2 })` يجب ان يرجع `[{ "apple": 1, "bat": 2 }, { "apple": 1, "bat": 2, "cookie": 2 }]`.
+
+```js
+assert.deepEqual(
+  whatIsInAName(
+    [{ apple: 1, bat: 2 }, { bat: 2 }, { apple: 1, bat: 2, cookie: 2 }],
+    { apple: 1, bat: 2 }
+  ),
+  [
+    { apple: 1, bat: 2 },
+    { apple: 1, bat: 2, cookie: 2 }
+  ]
+);
+```
+
+`whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }], { "apple": 1, "cookie": 2 })` يجب ان يرجع `[{ "apple": 1, "bat": 2, "cookie": 2 }]`.
+
+```js
+assert.deepEqual(
+  whatIsInAName(
+    [{ apple: 1, bat: 2 }, { apple: 1 }, { apple: 1, bat: 2, cookie: 2 }],
+    { apple: 1, cookie: 2 }
+  ),
+  [{ apple: 1, bat: 2, cookie: 2 }]
+);
+```
+
+`whatIsInAName([{ "apple": 1, "bat": 2 }, { "apple": 1 }, { "apple": 1, "bat": 2, "cookie": 2 }, { "bat":2 }], { "apple": 1, "bat": 2 })` يجب ان يرجع `[{ "apple": 1, "bat": 2 }, { "apple": 1, "bat": 2, "cookie":2 }]`.
+
+```js
+assert.deepEqual(
+  whatIsInAName(
+    [
+      { apple: 1, bat: 2 },
+      { apple: 1 },
+      { apple: 1, bat: 2, cookie: 2 },
+      { bat: 2 }
+    ],
+    { apple: 1, bat: 2 }
+  ),
+  [
+    { apple: 1, bat: 2 },
+    { apple: 1, bat: 2, cookie: 2 }
+  ]
+);
+```
+
+`whatIsInAName([{"a": 1, "b": 2, "c": 3}], {"a": 1, "b": 9999, "c": 3})` يجب ان يرجع `[]`
+
+```js
+assert.deepEqual(
+  whatIsInAName([{ a: 1, b: 2, c: 3 }], { a: 1, b: 9999, c: 3 }),
+  []
+);
+```
+
+`whatIsInAName([{"a": 1, "b": 2, "c": 3, "d": 9999}], {"a": 1, "b": 9999, "c": 3})` يجب أن يرجع `[]`
+
+```js
+assert.deepEqual(
+  whatIsInAName([{ a: 1, b: 2, c: 3, d: 9999 }], { a: 1, b: 9999, c: 3 }),
+  []
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function whatIsInAName(collection, source) {
+  const arr = [];
+  // Only change code below this line
+
+
+  // Only change code above this line
+  return arr;
+}
+
+whatIsInAName([{ first: "Romeo", last: "Montague" }, { first: "Mercutio", last: null }, { first: "Tybalt", last: "Capulet" }], { last: "Capulet" });
+```
+
+# --solutions--
+
+```js
+function whatIsInAName(collection, source) {
+  const arr = [];
+  const keys = Object.keys(source);
+  collection.forEach(function(e) {
+    if(keys.every(function(key) {return e[key] === source[key];})) {
+      arr.push(e);
+    }
+  });
+  return arr;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md
new file mode 100644
index 00000000000..d1cc9e41f3f
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/caesars-cipher.md
@@ -0,0 +1,88 @@
+---
+id: 56533eb9ac21ba0edf2244e2
+title: Caesars Cipher
+challengeType: 5
+forumTopicId: 16003
+dashedName: caesars-cipher
+---
+
+# --description--
+
+واحدة من الشفرات <dfn>ciphers</dfn> الابسط و الاكثر شهرة هي <dfn>Caesar cipher</dfn>، وتعرف أيضا بأسم <dfn>shift cipher</dfn>. في عملية تشفير shift cipher، يتم تبديل معاني الحروف بمقدار معين.
+
+من الاستخدامات الحديثة الشائعة تشفير <a href="https://www.freecodecamp.org/news/how-to-code-the-caesar-cipher-an-introduction-to-basic-encryption-3bf77b4e19f7/" target="_blank" rel="noopener noreferrer nofollow">ROT13</a> ، حيث يتم تبديل قيم الحروف بمقدار 13 مكانًا. وهكذا `A ↔ N`، `B ↔ O` وما إلى ذلك.
+
+اكتب دالة تأخذ سلسلة نصية مشفرة من نوع <a href="https://www.freecodecamp.org/news/how-to-code-the-caesar-cipher-an-introduction-to-basic-encryption-3bf77b4e19f7/" target="_blank" rel="noopener noreferrer nofollow">ROT13</a> كمدخل وترجع سلسلة نصية مشفرة.
+
+جميع الحروف ستكون كبيرة (uppercase). لا تغير أي حرف غير أبجدي (مثل المسافات وعلامات الترقيم)، ولكن مررها.
+
+# --hints--
+
+`rot13("SERR PBQR PNZC")` تُفك هذه الشفرة إلي كلمة `FREE CODE CAMP`
+
+```js
+assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP');
+```
+
+`rot13("SERR CVMMN!")` تُفك هذه الشفرة إلي كلمة `FREE PIZZA!`
+
+```js
+assert(rot13('SERR CVMMN!') === 'FREE PIZZA!');
+```
+
+`rot13("SERR YBIR?")` تُفك هذه الشفرة إلي كلمة `FREE LOVE?`
+
+```js
+assert(rot13('SERR YBIR?') === 'FREE LOVE?');
+```
+
+`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` تُفك هذه الشفرة إلي كلمة `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.`
+
+```js
+assert(
+  rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') ===
+    'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function rot13(str) {
+  return str;
+}
+
+rot13("SERR PBQR PNZC");
+```
+
+# --solutions--
+
+```js
+var lookup = {
+  'A': 'N','B': 'O','C': 'P','D': 'Q',
+  'E': 'R','F': 'S','G': 'T','H': 'U',
+  'I': 'V','J': 'W','K': 'X','L': 'Y',
+  'M': 'Z','N': 'A','O': 'B','P': 'C',
+  'Q': 'D','R': 'E','S': 'F','T': 'G',
+  'U': 'H','V': 'I','W': 'J','X': 'K',
+  'Y': 'L','Z': 'M'
+};
+
+function rot13(encodedStr) {
+  var codeArr = encodedStr.split("");  // String to Array
+  var decodedArr = []; // Your Result goes here
+  // Only change code below this line
+
+  decodedArr = codeArr.map(function(letter) {
+    if(lookup.hasOwnProperty(letter)) {
+      letter = lookup[letter];
+    }
+    return letter;
+  });
+
+  // Only change code above this line
+  return decodedArr.join(""); // Array to String
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md
new file mode 100644
index 00000000000..cb62927815d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/cash-register.md
@@ -0,0 +1,252 @@
+---
+id: aa2e6f85cab2ab736c9a9b24
+title: ماكينة تسجيل المدفوعات النقدية
+challengeType: 5
+forumTopicId: 16012
+dashedName: cash-register
+---
+
+# --description--
+
+قم بتصميم دالة درج تسجيل المدفوعات `checkCashRegister()` التي تقبل سعر الشراء كـ argument أولى (`price`)، و الدفع كـ argument ثانية (`cash`) ، و cash-in-drawer اي النقود في الدرج (`cid`) كـ argument ثالثة.
+
+`cid` عبارة عن array ثنائية الأبعاد للعملة المتاحة.
+
+يجب أن تقوم دالة `checkCashRegister()` دائما بإرجاع object يحتوي على key الـ `status` و key الـ `change`.
+
+قم بإرجاع `{status: "INSUFFICIENT_FUNDS", change: []}` إذا كان cash-in-drawer أقل من الباقي المستحق، أو إذا كنت لا تستطيع إرجاع الباقي بالضبط.
+
+قم بإرجاع `{status: "CLOSED", change: [...]}` مع cash-in-drawer كقيمة للمفتاح `change` إذا كان مساويا للباقي المستحق.
+
+خلاف ذلك، قم بإرجاع `{status: "OPEN", change: [...]}`، مع الباقي المستحق من العملات المعدنية والورقية، مرتبة من الأعلى إلى الأدنى، كقيمة للمفتاح `change`.
+
+<table class='table table-striped'><tbody><tr><th>وحدة العملة</th><th>المبلغ</th></tr><tr><td>Penny</td><td>$0.01 (PENNY)</td></tr><tr><td>Nickel</td><td>$0.05 (NICKEL)</td></tr><tr><td>Dime</td><td>$0.1 (DIME)</td></tr><tr><td>Quarter</td><td>$0.25 (QUARTER)</td></tr><tr><td>Dollar</td><td>$1 (ONE)</td></tr><tr><td>Five Dollars</td><td>$5 (FIVE)</td></tr><tr><td>Ten Dollars</td><td>$10 (TEN)</td></tr><tr><td>Twenty Dollars</td><td>$20 (TWENTY)</td></tr><tr><td>One-hundred Dollars</td><td>$100 (ONE HUNDRED)</td></tr></tbody></table>
+
+انظر أدناه للحصول على مثال لـ cash-in-drawer array:
+
+```js
+[
+  ["PENNY", 1.01],
+  ["NICKEL", 2.05],
+  ["DIME", 3.1],
+  ["QUARTER", 4.25],
+  ["ONE", 90],
+  ["FIVE", 55],
+  ["TEN", 20],
+  ["TWENTY", 60],
+  ["ONE HUNDRED", 100]
+]
+```
+
+# --hints--
+
+`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` يجب ان يرجع object.
+
+```js
+assert.deepEqual(
+  Object.prototype.toString.call(
+    checkCashRegister(19.5, 20, [
+      ['PENNY', 1.01],
+      ['NICKEL', 2.05],
+      ['DIME', 3.1],
+      ['QUARTER', 4.25],
+      ['ONE', 90],
+      ['FIVE', 55],
+      ['TEN', 20],
+      ['TWENTY', 60],
+      ['ONE HUNDRED', 100]
+    ])
+  ),
+  '[object Object]'
+);
+```
+
+`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` يجب ان يرجع `{status: "OPEN", change: [["QUARTER", 0.5]]}`.
+
+```js
+assert.deepEqual(
+  checkCashRegister(19.5, 20, [
+    ['PENNY', 1.01],
+    ['NICKEL', 2.05],
+    ['DIME', 3.1],
+    ['QUARTER', 4.25],
+    ['ONE', 90],
+    ['FIVE', 55],
+    ['TEN', 20],
+    ['TWENTY', 60],
+    ['ONE HUNDRED', 100]
+  ]),
+  { status: 'OPEN', change: [['QUARTER', 0.5]] }
+);
+```
+
+`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` يجب ان يرجع `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`.
+
+```js
+assert.deepEqual(
+  checkCashRegister(3.26, 100, [
+    ['PENNY', 1.01],
+    ['NICKEL', 2.05],
+    ['DIME', 3.1],
+    ['QUARTER', 4.25],
+    ['ONE', 90],
+    ['FIVE', 55],
+    ['TEN', 20],
+    ['TWENTY', 60],
+    ['ONE HUNDRED', 100]
+  ]),
+  {
+    status: 'OPEN',
+    change: [
+      ['TWENTY', 60],
+      ['TEN', 20],
+      ['FIVE', 15],
+      ['ONE', 1],
+      ['QUARTER', 0.5],
+      ['DIME', 0.2],
+      ['PENNY', 0.04]
+    ]
+  }
+);
+```
+
+`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` يجب ان يرجع `{status: "INSUFFICIENT_FUNDS", change: []}`.
+
+```js
+assert.deepEqual(
+  checkCashRegister(19.5, 20, [
+    ['PENNY', 0.01],
+    ['NICKEL', 0],
+    ['DIME', 0],
+    ['QUARTER', 0],
+    ['ONE', 0],
+    ['FIVE', 0],
+    ['TEN', 0],
+    ['TWENTY', 0],
+    ['ONE HUNDRED', 0]
+  ]),
+  { status: 'INSUFFICIENT_FUNDS', change: [] }
+);
+```
+
+`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` يجب ان يرجع `{status: "INSUFFICIENT_FUNDS", change: []}`.
+
+```js
+assert.deepEqual(
+  checkCashRegister(19.5, 20, [
+    ['PENNY', 0.01],
+    ['NICKEL', 0],
+    ['DIME', 0],
+    ['QUARTER', 0],
+    ['ONE', 1],
+    ['FIVE', 0],
+    ['TEN', 0],
+    ['TWENTY', 0],
+    ['ONE HUNDRED', 0]
+  ]),
+  { status: 'INSUFFICIENT_FUNDS', change: [] }
+);
+```
+
+`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` يجب ان يرجع `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`.
+
+```js
+assert.deepEqual(
+  checkCashRegister(19.5, 20, [
+    ['PENNY', 0.5],
+    ['NICKEL', 0],
+    ['DIME', 0],
+    ['QUARTER', 0],
+    ['ONE', 0],
+    ['FIVE', 0],
+    ['TEN', 0],
+    ['TWENTY', 0],
+    ['ONE HUNDRED', 0]
+  ]),
+  {
+    status: 'CLOSED',
+    change: [
+      ['PENNY', 0.5],
+      ['NICKEL', 0],
+      ['DIME', 0],
+      ['QUARTER', 0],
+      ['ONE', 0],
+      ['FIVE', 0],
+      ['TEN', 0],
+      ['TWENTY', 0],
+      ['ONE HUNDRED', 0]
+    ]
+  }
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function checkCashRegister(price, cash, cid) {
+  let change;
+  return change;
+}
+
+checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]);
+```
+
+# --solutions--
+
+```js
+const denom = [
+  { name: "ONE HUNDRED", val: 100 },
+  { name: "TWENTY", val: 20 },
+  { name: "TEN", val: 10 },
+  { name: "FIVE", val: 5 },
+  { name: "ONE", val: 1 },
+  { name: "QUARTER", val: 0.25 },
+  { name: "DIME", val: 0.1 },
+  { name: "NICKEL", val: 0.05 },
+  { name: "PENNY", val: 0.01 },
+];
+
+function checkCashRegister(price, cash, cid) {
+  const output = { status: null, change: [] };
+  let change = cash - price;
+  const register = cid.reduce(
+    function (acc, curr) {
+      acc.total += curr[1];
+      acc[curr[0]] = curr[1];
+      return acc;
+    },
+    { total: 0 }
+  );
+  if (register.total === change) {
+    output.status = "CLOSED";
+    output.change = cid;
+    return output;
+  }
+  if (register.total < change) {
+    output.status = "INSUFFICIENT_FUNDS";
+    return output;
+  }
+  const change_arr = denom.reduce(function (acc, curr) {
+    let value = 0;
+    while (register[curr.name] > 0 && change >= curr.val) {
+      change -= curr.val;
+      register[curr.name] -= curr.val;
+      value += curr.val;
+      change = Math.round(change * 100) / 100;
+    }
+    if (value > 0) {
+      acc.push([curr.name, value]);
+    }
+    return acc;
+  }, []);
+  if (change_arr.length < 1 || change > 0) {
+    output.status = "INSUFFICIENT_FUNDS";
+    return output;
+  }
+  output.status = "OPEN";
+  output.change = change_arr;
+  return output;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md
new file mode 100644
index 00000000000..6d07135f341
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/palindrome-checker.md
@@ -0,0 +1,125 @@
+---
+id: aaa48de84e1ecc7c742e1124
+title: Palindrome Checker
+challengeType: 5
+forumTopicId: 16004
+dashedName: palindrome-checker
+---
+
+# --description--
+
+قم بإرجاع `true` إذا كان الـ string المعطي هو palindrome. خلاف ذلك، قم بإرجاع `false`.
+
+<dfn>palindrome</dfn> هي كلمة أو جملة يتم تهجئتها بنفس الطريقة من بدايتها او من نهايتها ، مع تجاهل علامات الترقيم، والحالة، والمسافات.
+
+**ملاحظة:** ستحتاج إلى إزالة **جميع الأحرف غير الأبجدية والرقمية** (علامات الترقيم، المساحات والرموز) وتحويل كل شيء إلى نفس الحالة (lower او upper case) من أجل التحقق من وجود الـ palindromes.
+
+سنمرر strings بتنسيقات مختلفة ، مثل `racecar` و `RaceCar` و `race CAR` وغيرهم.
+
+سنمرر أيضًا strings برموز خاصة ، مثل `2A3*3a2` و `2A3 3a2` و `2_A3*3#A2`.
+
+# --hints--
+
+`palindrome("eye")` يجب أن يعيد boolean.
+
+```js
+assert(typeof palindrome('eye') === 'boolean');
+```
+
+`palindrome("eye")` يجب أن يعيد `true`.
+
+```js
+assert(palindrome('eye') === true);
+```
+
+`palindrome("_eye")` يجب أن يعيد `true`.
+
+```js
+assert(palindrome('_eye') === true);
+```
+
+`palindrome("race car")` يجب أن يعيد `true`.
+
+```js
+assert(palindrome('race car') === true);
+```
+
+`palindrome("not a palindrome")` يجب أن يعيد `false`.
+
+```js
+assert(palindrome('not a palindrome') === false);
+```
+
+`palindrome("A man, a plan, a canal. Panama")` يجب أن يعيد `true`.
+
+```js
+assert(palindrome('A man, a plan, a canal. Panama') === true);
+```
+
+`palindrome("never odd or even")` يجب أن يعيد `true`.
+
+```js
+assert(palindrome('never odd or even') === true);
+```
+
+`palindrome("nope")` يجب أن يعيد `false`.
+
+```js
+assert(palindrome('nope') === false);
+```
+
+`palindrome("almostomla")` يجب أن يعيد `false`.
+
+```js
+assert(palindrome('almostomla') === false);
+```
+
+`palindrome("My age is 0, 0 si ega ym.")` يجب أن يعيد `true`.
+
+```js
+assert(palindrome('My age is 0, 0 si ega ym.') === true);
+```
+
+`palindrome("1 eye for of 1 eye.")` يجب أن يعيد `false`.
+
+```js
+assert(palindrome('1 eye for of 1 eye.') === false);
+```
+
+`palindrome("0_0 (: /-\ :) 0-0")` يجب أن يعيد `true`.
+
+```js
+assert(palindrome('0_0 (: /- :) 0-0') === true);
+```
+
+`palindrome("five|\_/|four")` يجب أن يعيد `false`.
+
+```js
+assert(palindrome('five|_/|four') === false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function palindrome(str) {
+  return true;
+}
+
+palindrome("eye");
+```
+
+# --solutions--
+
+```js
+function palindrome(str) {
+  var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join('');
+  var aux = string.split('');
+  if (aux.join('') === aux.reverse().join('')){
+    return true;
+  }
+
+  return false;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md
new file mode 100644
index 00000000000..cae6e022074
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/roman-numeral-converter.md
@@ -0,0 +1,215 @@
+---
+id: a7f4d8f2483413a6ce226cac
+title: Roman Numeral Converter
+challengeType: 5
+forumTopicId: 16044
+dashedName: roman-numeral-converter
+---
+
+# --description--
+
+تحويل الرقم المعطى إلى رقم روماني.
+
+| Roman numerals | Arabic numerals |
+| -------------- | --------------- |
+| M              | 1000            |
+| CM             | 900             |
+| D              | 500             |
+| CD             | 400             |
+| C              | 100             |
+| XC             | 90              |
+| L              | 50              |
+| XL             | 40              |
+| X              | 10              |
+| IX             | 9               |
+| V              | 5               |
+| IV             | 4               |
+| I              | 1               |
+
+وينبغي أن تقدم جميع الإجابات أرقام الرومانية في الحالة العليا.
+
+# --hints--
+
+`convertToRoman(2)` يجب أن يعيد السلسلة `II`.
+
+```js
+assert.deepEqual(convertToRoman(2), 'II');
+```
+
+`convertToRoman(3)` يجب أن يعيد السلسلة `III`.
+
+```js
+assert.deepEqual(convertToRoman(3), 'III');
+```
+
+`convertToRoman(4)` يجب أن يعيد السلسلة `IV`.
+
+```js
+assert.deepEqual(convertToRoman(4), 'IV');
+```
+
+`convertToRoman(5)` يجب أن يعيد السلسلة `V`.
+
+```js
+assert.deepEqual(convertToRoman(5), 'V');
+```
+
+`convertToRoman(9)` يجب أن يعيد السلسلة `IX`.
+
+```js
+assert.deepEqual(convertToRoman(9), 'IX');
+```
+
+`convertToRoman(12)` يجب أن يعيد السلسلة `XII`.
+
+```js
+assert.deepEqual(convertToRoman(12), 'XII');
+```
+
+`convertToRoman(16)` يجب أن يعيد السلسلة `XVI`.
+
+```js
+assert.deepEqual(convertToRoman(16), 'XVI');
+```
+
+`convertToRoman(29)` يجب أن يعيد السلسلة `XXIX`.
+
+```js
+assert.deepEqual(convertToRoman(29), 'XXIX');
+```
+
+`convertToRoman(44)` يجب أن يعيد السلسلة `XLIV`.
+
+```js
+assert.deepEqual(convertToRoman(44), 'XLIV');
+```
+
+`convertToRoman(45)` يجب أن يعيد السلسلة `XLV`.
+
+```js
+assert.deepEqual(convertToRoman(45), 'XLV');
+```
+
+`convertToRoman(68)` يجب أن يعيد السلسلة `LXVIII`
+
+```js
+assert.deepEqual(convertToRoman(68), 'LXVIII');
+```
+
+`convertToRoman(83)` يجب أن يعيد السلسلة `LXXXIII`
+
+```js
+assert.deepEqual(convertToRoman(83), 'LXXXIII');
+```
+
+`convertToRoman(97)` يجب أن يعيد السلسلة `XCVII`
+
+```js
+assert.deepEqual(convertToRoman(97), 'XCVII');
+```
+
+`convertToRoman(99)` يجب أن يعيد السلسلة `XCIX`
+
+```js
+assert.deepEqual(convertToRoman(99), 'XCIX');
+```
+
+`convertToRoman(400)` يجب أن يعيد السلسلة `CD`
+
+```js
+assert.deepEqual(convertToRoman(400), 'CD');
+```
+
+`convertToRoman(500)` يجب أن يعيد السلسلة `D`
+
+```js
+assert.deepEqual(convertToRoman(500), 'D');
+```
+
+`convertToRoman(501)` يجب أن يعيد السلسلة `DI`
+
+```js
+assert.deepEqual(convertToRoman(501), 'DI');
+```
+
+`convertToRoman(649)` يجب أن يعيد السلسلة `DCXLIX`
+
+```js
+assert.deepEqual(convertToRoman(649), 'DCXLIX');
+```
+
+`convertToRoman(798)` يجب أن يعيد السلسلة `DCCXCVIII`
+
+```js
+assert.deepEqual(convertToRoman(798), 'DCCXCVIII');
+```
+
+`convertToRoman(891)` يجب أن يعيد السلسلة `DCCCXCI`
+
+```js
+assert.deepEqual(convertToRoman(891), 'DCCCXCI');
+```
+
+`convertToRoman(1000)` يجب أن يعيد السلسلة `M`
+
+```js
+assert.deepEqual(convertToRoman(1000), 'M');
+```
+
+`convertToRoman(1004)` يجب أن يعيد السلسلة `MIV`
+
+```js
+assert.deepEqual(convertToRoman(1004), 'MIV');
+```
+
+`convertToRoman(1006)` يجب أن يعيد السلسلة `MVI`
+
+```js
+assert.deepEqual(convertToRoman(1006), 'MVI');
+```
+
+`convertToRoman(1023)` يجب أن يعيد السلسلة `MXXIII`
+
+```js
+assert.deepEqual(convertToRoman(1023), 'MXXIII');
+```
+
+`convertToRoman(2014)` يجب أن يعيد السلسلة `MMXIV`
+
+```js
+assert.deepEqual(convertToRoman(2014), 'MMXIV');
+```
+
+`convertToRoman(3999)` يجب أن يعيد السلسلة `MMMCMXCIX`
+
+```js
+assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function convertToRoman(num) {
+ return num;
+}
+
+convertToRoman(36);
+```
+
+# --solutions--
+
+```js
+function convertToRoman(num) {
+  var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]];
+  var res = [];
+  ref.forEach(function(p) {
+    while (num >= p[1]) {
+      res.push(p[0]);
+      num -= p[1];
+    }
+  });
+  return res.join('');
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md
new file mode 100644
index 00000000000..75eb18e70b8
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/javascript-algorithms-and-data-structures-projects/telephone-number-validator.md
@@ -0,0 +1,217 @@
+---
+id: aff0395860f5d3034dc0bfc9
+title: مدقق رقم الهاتف
+challengeType: 5
+forumTopicId: 16090
+dashedName: telephone-number-validator
+---
+
+# --description--
+
+قم بإرجاع `true` إذا كان ال string الذي تم تمريره يبدو كرقم هاتف صالح في الولايات المتحدة.
+
+يمكن للمستخدم ملء حقل النموذج بأي طريقة يختارها طالما أنه يحتوي على تنسيق رقم أمريكي صالح. فيما يلي أمثلة على التنسيقات الصالحة للأرقام الأمريكية (راجع الاختبارات أدناه للتعرف على المتغيرات الأخرى):
+
+<blockquote>555-555-5555<br>(555)555-5555<br>(555) 555-5555<br>555 555 5555<br>5555555555<br>1 555 555 5555</blockquote>
+
+من أجل هذا التحدي، سيتم تقديم string مثل `800-692-7753` أو `8oo-six427676;laskdjf`. وظيفتك هي التحقق من صحة رقم الهاتف الأمريكي أو رفضه استناداً إلى أي مجموعة من الصيغ المقدمة أعلاه. كود المنطقة مطلوب. إذا تم توفير كود البلد، يجب عليك تأكيد أن كود البلد هو `1`. قم بإرجاع `true` إذا كان ال string رقم هاتف أمريكي صالح؛ وإلا أرجع `false`.
+
+# --hints--
+
+`telephoneCheck("555-555-5555")` يجب أن يعيد boolean.
+
+```js
+assert(typeof telephoneCheck('555-555-5555') === 'boolean');
+```
+
+`telephoneCheck("1 555-555-5555")` يجب أن يعيد `true`.
+
+```js
+assert(telephoneCheck('1 555-555-5555') === true);
+```
+
+`telephoneCheck("1 (555) 555-5555")` يجب أن يعيد `true`.
+
+```js
+assert(telephoneCheck('1 (555) 555-5555') === true);
+```
+
+`telephoneCheck("5555555555")` يجب أن يعيد `true`.
+
+```js
+assert(telephoneCheck('5555555555') === true);
+```
+
+`telephoneCheck("555-555-5555")` يجب أن يعيد `true`.
+
+```js
+assert(telephoneCheck('555-555-5555') === true);
+```
+
+`telephoneCheck("(555)555-5555")` يجب أن يعيد `true`.
+
+```js
+assert(telephoneCheck('(555)555-5555') === true);
+```
+
+`telephoneCheck("1(555)555-5555")` يجب أن يعيد `true`.
+
+```js
+assert(telephoneCheck('1(555)555-5555') === true);
+```
+
+`telephoneCheck("555-5555")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('555-5555') === false);
+```
+
+`telephoneCheck("5555555")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('5555555') === false);
+```
+
+`telephoneCheck("1 555)555-5555")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('1 555)555-5555') === false);
+```
+
+`telephoneCheck("1 555 555 5555")` يجب أن يعيد `true`.
+
+```js
+assert(telephoneCheck('1 555 555 5555') === true);
+```
+
+`telephoneCheck("1 456 789 4444")` يجب أن يعيد `true`.
+
+```js
+assert(telephoneCheck('1 456 789 4444') === true);
+```
+
+`telephoneCheck("123**&!!asdf#")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('123**&!!asdf#') === false);
+```
+
+`telephoneCheck("55555555")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('55555555') === false);
+```
+
+`telephoneCheck("(6054756961)")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('(6054756961)') === false);
+```
+
+`telephoneCheck("2 (757) 622-7382")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('2 (757) 622-7382') === false);
+```
+
+`telephoneCheck("0 (757) 622-7382")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('0 (757) 622-7382') === false);
+```
+
+`telephoneCheck("-1 (757) 622-7382")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('-1 (757) 622-7382') === false);
+```
+
+`telephoneCheck("2 757 622-7382")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('2 757 622-7382') === false);
+```
+
+`telephoneCheck("10 (757) 622-7382")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('10 (757) 622-7382') === false);
+```
+
+`telephoneCheck("27576227382")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('27576227382') === false);
+```
+
+`telephoneCheck("(275)76227382")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('(275)76227382') === false);
+```
+
+`telephoneCheck("2(757)6227382")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('2(757)6227382') === false);
+```
+
+`telephoneCheck("2(757)622-7382")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('2(757)622-7382') === false);
+```
+
+`telephoneCheck("555)-555-5555")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('555)-555-5555') === false);
+```
+
+`telephoneCheck("(555-555-5555")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('(555-555-5555') === false);
+```
+
+`telephoneCheck("(555)5(55?)-5555")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('(555)5(55?)-5555') === false);
+```
+
+`telephoneCheck("55 55-55-555-5")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('55 55-55-555-5') === false);
+```
+
+`telephoneCheck("11 555-555-5555")` يجب أن يعيد `false`.
+
+```js
+assert(telephoneCheck('11 555-555-5555') === false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function telephoneCheck(str) {
+  return true;
+}
+
+telephoneCheck("555-555-5555");
+```
+
+# --solutions--
+
+```js
+var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/;
+
+function telephoneCheck(str) {
+  return re.test(str);
+}
+
+telephoneCheck("555-555-5555");
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md
new file mode 100644
index 00000000000..960c65a0459
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/add-methods-after-inheritance.md
@@ -0,0 +1,165 @@
+---
+id: 587d7db1367417b2b2512b87
+title: إضافة الدوال بعد الميراث (Add Methods After Inheritance)
+challengeType: 1
+forumTopicId: 301315
+dashedName: add-methods-after-inheritance
+---
+
+# --description--
+
+الـ constructor function الذي يرث `prototype` الـ object الخاص به من الـ supertype constructor function يمكن أن يكون له الـ methods الخاصة به بالإضافة إلى الـ methods الموروثة.
+
+على سبيل المثال، `Bird` هو constructor يرث `prototype` من `Animal`:
+
+```js
+function Animal() { }
+Animal.prototype.eat = function() {
+  console.log("nom nom nom");
+};
+function Bird() { }
+Bird.prototype = Object.create(Animal.prototype);
+Bird.prototype.constructor = Bird;
+```
+
+بالإضافة إلى ما هو موروث من `Animal`، تريد إضافة سلوك فريد إلى objects الـ `Bird`. هنا ، `Bird` سيحصل على دالة `fly()`. يتم إضافة الدوال إلى `prototype` ال `Bird's` بنفس الطريقة مثل أي constructor function:
+
+```js
+Bird.prototype.fly = function() {
+  console.log("I'm flying!");
+};
+```
+
+الآن سيكون لمثيلات `Bird` الـ methods الاتية `eat()` و `fly()`:
+
+```js
+let duck = new Bird();
+duck.eat();
+duck.fly();
+```
+
+`duck.eat()` يعرض السلسلة `nom nom nom` في وحدة التحكم و `duck.fly()` سيعرض السلسلة `I'm flying!`.
+
+# --instructions--
+
+أضف كل الكود الضروري حتى يرث كائن `Dog` من `Animal` و الـ constructor الخاص بـ `prototype` الـ `Dog` تم تعيينه إلى `Dog`. ثم أضف `bark()` إلى الكائن `Dog` بحيث أن `beagle` يمكن أن يفعل `eat()` و `bark()`. يجب أن تطبع method الـ `bark()` الكلمة `Woof!` إلى وحدة التحكم.
+
+# --hints--
+
+`Animal` لا يجب أن يستجيب لـ `bark()`.
+
+```js
+assert(typeof Animal.prototype.bark == 'undefined');
+```
+
+`Dog` يجب أن يرث `eat()` من `Animal`.
+
+```js
+assert(typeof Dog.prototype.eat == 'function');
+```
+
+يجب أن يحتوي prototype الـ `Dog` على `bark()`.
+
+```js
+assert('bark' in Dog.prototype);
+```
+
+`beagle` يجب أن يكون `instanceof` من `Animal`.
+
+```js
+assert(beagle instanceof Animal);
+```
+
+يجب تعيين constructor الـ `beagle` إلى `Dog`.
+
+```js
+assert(beagle.constructor === Dog);
+```
+
+`beagle.eat()` يجب أن يطبع السلسلة `nom nom nom`
+
+```js
+capture();
+beagle.eat();
+uncapture();
+assert(logOutput == 'nom nom nom');
+```
+
+`beagle.bark()` يجب ان يطبع السلسلة `Woof!`
+
+```js
+capture();
+beagle.bark();
+uncapture();
+assert(logOutput == 'Woof!');
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+var logOutput = "";
+var originalConsole = console
+function capture() {
+    var nativeLog = console.log;
+    console.log = function (message) {
+        logOutput = message;
+        if(nativeLog.apply) {
+          nativeLog.apply(originalConsole, arguments);
+        } else {
+          var nativeMsg = Array.prototype.slice.apply(arguments).join(' ');
+          nativeLog(nativeMsg);
+        }
+    };
+}
+
+function uncapture() {
+  console.log = originalConsole.log;
+}
+
+capture();
+```
+
+## --after-user-code--
+
+```js
+uncapture();
+(function() { return logOutput || "console.log never called"; })();
+```
+
+## --seed-contents--
+
+```js
+function Animal() { }
+Animal.prototype.eat = function() { console.log("nom nom nom"); };
+
+function Dog() { }
+
+// Only change code below this line
+
+
+
+
+// Only change code above this line
+
+let beagle = new Dog();
+```
+
+# --solutions--
+
+```js
+function Animal() { }
+Animal.prototype.eat = function() { console.log("nom nom nom"); };
+
+function Dog() { }
+Dog.prototype = Object.create(Animal.prototype);
+Dog.prototype.constructor = Dog;
+Dog.prototype.bark = function () {
+  console.log('Woof!');
+};
+let beagle = new Dog();
+
+beagle.eat();
+beagle.bark();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/change-the-prototype-to-a-new-object.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/change-the-prototype-to-a-new-object.md
new file mode 100644
index 00000000000..05c0d16a0ad
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/change-the-prototype-to-a-new-object.md
@@ -0,0 +1,103 @@
+---
+id: 587d7daf367417b2b2512b7f
+title: تغيير النموذج الأولي إلى كائن جديد
+challengeType: 1
+forumTopicId: 301316
+dashedName: change-the-prototype-to-a-new-object
+---
+
+# --description--
+
+حتى الآن كنت تقوم بإضافة خصائص إلى الـ `prototype` بشكل فردي:
+
+```js
+Bird.prototype.numLegs = 2;
+```
+
+يصبح هذا مملاً مع ازدياد عدد الخصائص.
+
+```js
+Bird.prototype.eat = function() {
+  console.log("nom nom nom");
+}
+
+Bird.prototype.describe = function() {
+  console.log("My name is " + this.name);
+}
+```
+
+الطريقة الأكثر فعالية هي تعيين `prototype` إلى object جديد يحتوي بالفعل على الخواص. بهذه الطريقة، يتم إضافة جميع الخصائص في وقت واحد:
+
+```js
+Bird.prototype = {
+  numLegs: 2, 
+  eat: function() {
+    console.log("nom nom nom");
+  },
+  describe: function() {
+    console.log("My name is " + this.name);
+  }
+};
+```
+
+# --instructions--
+
+أضف الخاصية `numLegs` و `eat()` و `describe()` إلى `prototype` الـ `Dog` عن طريق تعيين `prototype` إلى object جديد.
+
+# --hints--
+
+`Dog.prototype` يجب أن يتم تعيينه إلى object جديد.
+
+```js
+assert(/Dog\.prototype\s*?=\s*?{/.test(code));
+```
+
+`Dog.prototype` يجب أن تحتوي على الخاصية `numLegs`.
+
+```js
+assert(Dog.prototype.numLegs !== undefined);
+```
+
+`Dog.prototype` يجب أن تحتوي على `eat()`.
+
+```js
+assert(typeof Dog.prototype.eat === 'function');
+```
+
+`Dog.prototype` يجب أن تحتوي على `describe()`.
+
+```js
+assert(typeof Dog.prototype.describe === 'function');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Dog(name) {
+  this.name = name;
+}
+
+Dog.prototype = {
+  // Only change code below this line
+
+};
+```
+
+# --solutions--
+
+```js
+function Dog(name) {
+  this.name = name;
+}
+Dog.prototype = {
+numLegs: 4,
+  eat () {
+    console.log('nom nom nom');
+  },
+  describe () {
+    console.log('My name is ' + this.name);
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-basic-javascript-object.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-basic-javascript-object.md
new file mode 100644
index 00000000000..2569fde8d5b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-basic-javascript-object.md
@@ -0,0 +1,69 @@
+---
+id: 587d7dac367417b2b2512b73
+title: إنشاء كائن جافا سكريبت بسيط
+challengeType: 1
+forumTopicId: 301317
+dashedName: create-a-basic-javascript-object
+---
+
+# --description--
+
+فكر في الأشياء التي يراها الناس كل يوم، مثل السيارات والمتاجر والطيور. هذه كلها <dfn>objects</dfn>: أشياء ملموسة يمكن للناس مراقبتها والتفاعل معها.
+
+ما هي بعض الصفات لهذه الكائنات؟ السيارة لديها عجلات. المتاجر تبيع السلع. الطيور لها أجنحة.
+
+هذه الصفات، أو <dfn>الخصائص</dfn>، تحدد ما الذي يشكل الكائن. لاحظ أن الـ objects المتشابهة تشترك في نفس الخواص، ولكن قد تكون لها قيم مختلفة لتلك الخواص. على سبيل المثال، جميع السيارات لديها عجلات ولكن ليس كل السيارات لديها نفس العدد من العجلات.
+
+الـ objects في جافا سكريبت تستخدم في نمذجة الكائنات في العالم الحقيقي، وتعطيهم خصائص وسلوكيات مثل نظرائهم في العالم الحقيقي. إليك مثال باستخدام هذه المفاهيم لإنشاء كائن `duck`:
+
+```js
+let duck = {
+  name: "Aflac",
+  numLegs: 2
+};
+```
+
+هذا الكائن `duck` يحتوي على زوجين من خواص/قيمة: `name` من `Aflac` و `numLegs` من 2.
+
+# --instructions--
+
+قم بإنشاء كائن `dog` مع `name` و `numLegs` و قم بتعيينه إلى string ورقم، على التوالي.
+
+# --hints--
+
+`dog` يجب أن يكون object.
+
+```js
+assert(typeof dog === 'object');
+```
+
+`dog` يجب أن يكون لديه خاصية `name` من نوع string.
+
+```js
+assert(typeof dog.name === 'string');
+```
+
+`dog` يجب أن يكون لديه خاصية `numLegs` من نوع number.
+
+```js
+assert(typeof dog.numLegs === 'number');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let dog = {
+
+};
+```
+
+# --solutions--
+
+```js
+let dog = {
+  name: '',
+  numLegs: 4
+};
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-method-on-an-object.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-method-on-an-object.md
new file mode 100644
index 00000000000..5dc31a813ea
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/create-a-method-on-an-object.md
@@ -0,0 +1,70 @@
+---
+id: 587d7dad367417b2b2512b75
+title: إنشاء method في الكائن
+challengeType: 1
+forumTopicId: 301318
+dashedName: create-a-method-on-an-object
+---
+
+# --description--
+
+يمكن أن يكون لل objects نوع خاص من الخواص، يسمى <dfn>method</dfn>.
+
+الـ methods نوع من الخصائص عبارة عن functions. هذا يضيف سلوكا مختلفا إلى الـ object. فيما يلي مثال `duck` مع method:
+
+```js
+let duck = {
+  name: "Aflac",
+  numLegs: 2,
+  sayName: function() {return "The name of this duck is " + duck.name + ".";}
+};
+duck.sayName();
+```
+
+المثال يضيف `sayName` ، التي هي function ترجع جملة تعطي اسم الـ `duck`. لاحظ أن الـ method وصلت إلى خاصية `name` في الـ return statement باستخدام `duck.name`. والتحدي التالي سيغطي طريقة أخرى للقيام بذلك.
+
+# --instructions--
+
+باستخدام كائن `dog` ، أعطه method تسمى `sayLegs`. الـ method يجب ان تعيد الجملة `This dog has 4 legs.`
+
+# --hints--
+
+`dog.sayLegs()` يجب أن تكون function.
+
+```js
+assert(typeof dog.sayLegs === 'function');
+```
+
+يجب أن تعيد `dog.sayLegs()` السلسلة المحددة - لاحظ أن علامات الترقيم والتباعد مهمان.
+
+```js
+assert(dog.sayLegs() === 'This dog has 4 legs.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let dog = {
+  name: "Spot",
+  numLegs: 4,
+
+};
+
+dog.sayLegs();
+```
+
+# --solutions--
+
+```js
+let dog = {
+  name: "Spot",
+  numLegs: 4,
+  sayLegs () {
+    return 'This dog has ' + this.numLegs + ' legs.';
+  }
+};
+
+dog.sayLegs();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/define-a-constructor-function.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/define-a-constructor-function.md
new file mode 100644
index 00000000000..0195f9492bc
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/define-a-constructor-function.md
@@ -0,0 +1,67 @@
+---
+id: 587d7dad367417b2b2512b77
+title: تعريف دالة البناء (Define a Constructor Function)
+challengeType: 1
+forumTopicId: 16804
+dashedName: define-a-constructor-function
+---
+
+# --description--
+
+الـ <dfn>Constructors</dfn> هي functions تقوم بأنشاء objects جديدة. وهي تحدد الخصائص والسلوكيات التي ستنتمي إلى الـ object الجديد. فكر فيها كمخطط لإنشاء objects جديدة.
+
+وفيما يلي مثال على constructor:
+
+```js
+function Bird() {
+  this.name = "Albert";
+  this.color = "blue";
+  this.numLegs = 2;
+}
+```
+
+هذا الـ constructor يعرف object الـ `Bird` ذو خصائص `name`, `color` و `numLegs` تم تعيينهم إلى Albert و blue و 2 على التوالي. ويتبع الـ Constructors بعض الاتفاقيات:
+
+<ul><li>يتم تعريف الـ Constructors مع اسم capitalized لتمييزهم عن الـ functions الأخرى التي ليست <code>constructors</code>.</li><li>يستخدم الـ Constructors كلمة <code>this</code> لتعيين خصائص الـ object الذي سينشئونه. داخل الـ constructor الكلمة <code>this</code> تشير إلى الـ object الجديد الذي ستقوم بإنشائه.</li><li>يقوم الـ Constructors بتحديد الخصائص والسلوكيات بدلاً من إرجاع قيمة مثل ما قد يفعل الـ functions الأخرى.</li></ul>
+
+# --instructions--
+
+قم بإنشاء constructor الـ `Dog`، بخصائص `name` و `color` و `numLegs` التي تم تعيينهم على string و string و رقم، على التوالي.
+
+# --hints--
+
+`Dog` يجب أن يكون لديه خاصية `name` من نوع string.
+
+```js
+assert(typeof new Dog().name === 'string');
+```
+
+`Dog` يجب أن يكون لديه خاصية `color` من نوع string.
+
+```js
+assert(typeof new Dog().color === 'string');
+```
+
+`Dog` يجب أن يكون لديه خاصية `numLegs` من نوع number.
+
+```js
+assert(typeof new Dog().numLegs === 'number');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+
+```
+
+# --solutions--
+
+```js
+function Dog (name, color, numLegs) {
+  this.name = 'name';
+  this.color = 'color';
+  this.numLegs = 4;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/extend-constructors-to-receive-arguments.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/extend-constructors-to-receive-arguments.md
new file mode 100644
index 00000000000..70600f84216
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/extend-constructors-to-receive-arguments.md
@@ -0,0 +1,89 @@
+---
+id: 587d7dae367417b2b2512b79
+title: Extend Constructors to Receive Arguments
+challengeType: 1
+forumTopicId: 18235
+dashedName: extend-constructors-to-receive-arguments
+---
+
+# --description--
+
+الـ constructors الآتية `Bird` و `Dog` من التحدي الآخير عملوا بشكل جيد. ومع ذلك، لاحظ أن جميع الـ `Birds` التي تم إنشاؤها باستخدام `Bird` يتم تسميتها تلقائيًا باسم Albert، وهي زرقاء اللون، ولديها ساقان. ماذا لو أردت طيور ذات قيم مختلفة للاسم واللون؟ من الممكن تغيير خصائص كل طائر يدوياً ولكن هذا سيكون مجهد:
+
+```js
+let swan = new Bird();
+swan.name = "Carlos";
+swan.color = "white";
+```
+
+لنفترض أنك كنت تكتب برنامجاً لتعقب مئات أو حتى آلاف الطيور المختلفة في مطير. سوف يستغرق الأمر الكثير من الوقت لإنشاء كل الطيور، ثم تغيير الخصائص إلى قيم مختلفة لكل منها. من أجل إنشاء objects الـ `Bird` المختلفة بسهولة، يمكنك تصميم constructor الطيور الخاص بك بحيث يقبل الـ parameters:
+
+```js
+function Bird(name, color) {
+  this.name = name;
+  this.color = color;
+  this.numLegs = 2;
+}
+```
+
+ثم مرر القيم كحجج (arguments) لتعريف كل طائر فريد إلى constructor باسم `Bird`: التعليمات البرمجية `let cardinal = new Bird("Bruce", "red");` ينشئ مثيل جديد من `Bird` بخصائص `name` و `color` بقيم `Bruce` و `red` علي التوالي. مازالت خاصية `numLegs` بقيمة 2. يحتوي `cardinal` على هذه الخواص:
+
+```js
+cardinal.name
+cardinal.color
+cardinal.numLegs
+```
+
+يكون constructor أكثر مرونة. من الممكن الآن تحديد الخصائص لكل `Bird` في وقت إنشائه، وهي إحدى الطرق الذي تجعل من constructor في JavaScript مفيد جداً. يقوم constructor بتجميع objects معاً استناداً إلى الخصائص والسلوك المشترك وتحديد مخطط يقوم بإنشائها تلقائياً.
+
+# --instructions--
+
+إنشاء constructor آخر باسم `Dog`. هذه المرة، اضبطه لأخذ حجج (Parameters) الآتية `name` و `color`، و اجعل الخاصية `numLegs` ثابتة عند 4. ثم قم بإنشاء `Dog` جديد محفوظ في متغير اسمه `terrier`. مرر اليه اثنان strings كـ arguments للخصائص `name` و `color`.
+
+# --hints--
+
+`Dog` يجب أن يتلقى argument لـ `name`.
+
+```js
+assert(new Dog('Clifford').name === 'Clifford');
+```
+
+`Dog` يجب أن يتلقى argument لـ `color`.
+
+```js
+assert(new Dog('Clifford', 'yellow').color === 'yellow');
+```
+
+`Dog` يجب أن يكون لديه خاصية `numLegs` بقيمة محددة بـ 4.
+
+```js
+assert(new Dog('Clifford').numLegs === 4);
+```
+
+`terrier` يجب أن يتم إنشاؤه باستخدام constructor الـ `Dog`.
+
+```js
+assert(terrier instanceof Dog);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Dog() {
+
+}
+```
+
+# --solutions--
+
+```js
+function Dog (name, color) {
+  this.numLegs = 4;
+  this.name = name;
+  this.color = color;
+}
+
+const terrier = new Dog();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md
new file mode 100644
index 00000000000..56250f9b544
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/inherit-behaviors-from-a-supertype.md
@@ -0,0 +1,127 @@
+---
+id: 587d7db0367417b2b2512b84
+title: وراثة السلوكيات من type خارق (Inherit Behaviors from a Supertype)
+challengeType: 1
+forumTopicId: 301319
+dashedName: inherit-behaviors-from-a-supertype
+---
+
+# --description--
+
+في التحدي السابق، قمت بإنشاء `supertype` يسمى `Animal` و الذي يحدد السلوكيات المشتركة بين جميع الحيوانات:
+
+```js
+function Animal() { }
+Animal.prototype.eat = function() {
+  console.log("nom nom nom");
+};
+```
+
+هذا والتحدي التالي سيغطيان كيفية إعادة استخدام دوال `Animal` داخل `Bird` و `Dog` دون تعريفها مرة أخرى. وهو يستخدم تقنية تسمى inheritance. هذا التحدي يغطي الخطوة الأولى: اصنع instance من `supertype` (أو parent). أنت تعرف بالفعل طريقة واحدة لإنشاء instance من `Animal` باستخدام المشغل `new`:
+
+```js
+let animal = new Animal();
+```
+
+هناك بعض العيوب عند استخدام هذا الـ syntax للـ inheritance، وهي معقدة للغاية بالنسبة لنطاق هذا التحدي. وبدلا من ذلك، هناك نهج بديل يخلو من هذه المساوئ:
+
+```js
+let animal = Object.create(Animal.prototype);
+```
+
+`Object.create(obj)` ينشئ object جديد، ويضع `obj` كالـ `prototype` للـ object الجديد. تذكر أن `prototype` هو مثل "الوصفة" لإنشاء object. عن طريق إعداد الـ `prototype` لـ `animal` ليكون `prototype` لـ `Animal`، أنت تعطي instance الـ `animal` نفس "وصفة" أي instance آخر من `Animal`.
+
+```js
+animal.eat();
+animal instanceof Animal;
+```
+
+دالة `instanceof` هنا، ستعيد `true`.
+
+# --instructions--
+
+استخدم `Object.create` لعمل ٢ instances من `Animal` يدعوا `duck` و `beagle`.
+
+# --hints--
+
+يجب تعريف متغير `duck`.
+
+```js
+assert(typeof duck !== 'undefined');
+```
+
+يجب تعريف متغير `beagle`.
+
+```js
+assert(typeof beagle !== 'undefined');
+```
+
+يجب عمل initialise لـ متغير `duck` باستخدام `Object.create`.
+
+```js
+assert(
+  /(let|const|var)\s{1,}duck\s*=\s*Object\.create\s*\(\s*Animal\.prototype\s*\)\s*/.test(
+    code
+  )
+);
+```
+
+يجب عمل initialise لـ متغير `beagle` باستخدام `Object.create`.
+
+```js
+assert(
+  /(let|const|var)\s{1,}beagle\s*=\s*Object\.create\s*\(\s*Animal\.prototype\s*\)\s*/.test(
+    code
+  )
+);
+```
+
+`duck` يجب أن يحتوي على `prototype` من `Animal`.
+
+```js
+assert(duck instanceof Animal);
+```
+
+`beagle` يجب أن يحتوي على `prototype` من `Animal`.
+
+```js
+assert(beagle instanceof Animal);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Animal() { }
+
+Animal.prototype = {
+  constructor: Animal,
+  eat: function() {
+    console.log("nom nom nom");
+  }
+};
+
+// Only change code below this line
+
+let duck; // Change this line
+let beagle; // Change this line
+```
+
+# --solutions--
+
+```js
+function Animal() { }
+
+Animal.prototype = {
+  constructor: Animal,
+  eat: function() {
+    console.log("nom nom nom");
+  }
+};
+let duck = Object.create(Animal.prototype);
+let beagle = Object.create(Animal.prototype);
+
+duck.eat();
+beagle.eat();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/iterate-over-all-properties.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/iterate-over-all-properties.md
new file mode 100644
index 00000000000..23edd5b7dcc
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/iterate-over-all-properties.md
@@ -0,0 +1,106 @@
+---
+id: 587d7daf367417b2b2512b7d
+title: التكرار علي جميعع العناصر (Iterate Over All Properties)
+challengeType: 1
+forumTopicId: 301320
+dashedName: iterate-over-all-properties
+---
+
+# --description--
+
+لقد رأيت الآن نوعين من الخواص: <dfn>own properties</dfn> و `prototype`. Own properties يتم تعريفها مباشرة في iinstance الـ object نفسه. ويتم تعريف خصائص الـ prototype على الـ `prototype`.
+
+```js
+function Bird(name) {
+  this.name = name;  //own property
+}
+
+Bird.prototype.numLegs = 2; // prototype property
+
+let duck = new Bird("Donald");
+```
+
+إليك كيفية إضافة خصائص `duck` الخاصة إلى الـ array الآتية `ownProps` و خصائص `prototype` إلى الـ array الآتية `prototypeProps`:
+
+```js
+let ownProps = [];
+let prototypeProps = [];
+
+for (let property in duck) {
+  if(duck.hasOwnProperty(property)) {
+    ownProps.push(property);
+  } else {
+    prototypeProps.push(property);
+  }
+}
+
+console.log(ownProps);
+console.log(prototypeProps);
+```
+
+`console.log(ownProps)` يعرض `["name"]` في وحدة التحكم و `console.log(prototypeProps)` يعرض `["numLegs"]`.
+
+# --instructions--
+
+أضف جميع الخصائص الخاصة بـ `beagle` إلى الـ array الآتية `ownProps`. أضف جميع خصائص `prototype` لـ `Dog` إلى الـ array الآتية `prototypeProps`.
+
+# --hints--
+
+يجب أن تحتوي array الـ `ownProps` فقط على `name`.
+
+```js
+assert.deepEqual(ownProps, ['name']);
+```
+
+يجب أن تحتوي array الـ `prototypeProps` فقط على `numLegs`.
+
+```js
+assert.deepEqual(prototypeProps, ['numLegs']);
+```
+
+يجب عليك حل هذا التحدي دون استخدام الدالة المدمجة في `Object.keys()`.
+
+```js
+assert(!/\Object.keys/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Dog(name) {
+  this.name = name;
+}
+
+Dog.prototype.numLegs = 4;
+
+let beagle = new Dog("Snoopy");
+
+let ownProps = [];
+let prototypeProps = [];
+
+// Only change code below this line
+```
+
+# --solutions--
+
+```js
+function Dog(name) {
+  this.name = name;
+}
+
+Dog.prototype.numLegs = 4;
+
+let beagle = new Dog("Snoopy");
+
+let ownProps = [];
+let prototypeProps = [];
+for (let prop in beagle) {
+  if (beagle.hasOwnProperty(prop)) {
+    ownProps.push(prop);
+  } else {
+    prototypeProps.push(prop);
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/make-code-more-reusable-with-the-this-keyword.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/make-code-more-reusable-with-the-this-keyword.md
new file mode 100644
index 00000000000..3e741eee12e
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/make-code-more-reusable-with-the-this-keyword.md
@@ -0,0 +1,75 @@
+---
+id: 587d7dad367417b2b2512b76
+title: جعل الكود أكثر قابلية لإعادة الاستخدام (Make Code More Reusable with the this Keyword)
+challengeType: 1
+forumTopicId: 301321
+dashedName: make-code-more-reusable-with-the-this-keyword
+---
+
+# --description--
+
+قدمنا في التحدي الأخير method لـ object الـ `duck`. وقد استخدمنا `duck.name` للوصول إلى قيمة الخاصية `name` ضمن الـ return statement:
+
+```js
+sayName: function() {return "The name of this duck is " + duck.name + ".";}
+```
+
+في حين أن هذه طريقة صالحة للوصول إلى خصائص الـ object، هناك مشكلة هنا. إذا تغير اسم المتغير، فسيلزم تحديث أي كود يشير إلى الاسم الأصلي أيضا. في تعريف object قصير، ليست مشكلة ولكن إذا كان الـ object يحتوي على العديد من الإشارات إلى خصائصه، هناك فرصة أكبر للخطأ.
+
+احدي طرق تجنب هذه المشكلات هي استخدام كلمة `this`:
+
+```js
+let duck = {
+  name: "Aflac",
+  numLegs: 2,
+  sayName: function() {return "The name of this duck is " + this.name + ".";}
+};
+```
+
+`this` هو موضوع عميق، والمثال أعلاه ليس سوى طريقة واحدة لاستخدامه. في السياق الحالي، `this` يشير إلى الـ object الذي ترتبط به الدالة: `duck`. إذا تم تغيير اسم الـ object إلى `mallard`، ليس من الضروري العثور على جميع الإشارات إلى `duck` في الكود. وهو يجعل الكود قابلا لإعادة الاستخدام ويسهل قراءته.
+
+# --instructions--
+
+قم بتعديل دالة `dog.sayLegs` لإزالة أي اشارات إلى `dog`. استخدم مثال `duck` للإرشاد.
+
+# --hints--
+
+`dog.sayLegs()` يجب أن يعيد الـ string الآتي.
+
+```js
+assert(dog.sayLegs() === 'This dog has 4 legs.');
+```
+
+يجب أن يستخدم الكود كلمة `this` للوصول إلى خاصية `numLegs` لـ `dog`.
+
+```js
+assert(code.match(/this\.numLegs/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let dog = {
+  name: "Spot",
+  numLegs: 4,
+  sayLegs: function() {return "This dog has " + dog.numLegs + " legs.";}
+};
+
+dog.sayLegs();
+```
+
+# --solutions--
+
+```js
+let dog = {
+  name: "Spot",
+  numLegs: 4,
+  sayLegs () {
+    return 'This dog has ' + this.numLegs + ' legs.';
+  }
+};
+
+dog.sayLegs();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.md
new file mode 100644
index 00000000000..5fa685b0506
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/override-inherited-methods.md
@@ -0,0 +1,100 @@
+---
+id: 587d7db1367417b2b2512b88
+title: تجاوز الـ methods الموروثة (Override Inherited Methods)
+challengeType: 1
+forumTopicId: 301322
+dashedName: override-inherited-methods
+---
+
+# --description--
+
+في الدروس السابقة، تعلمت أن الـ object يمكن أن يرث سلوكه (methods) من object آخر عن طريق الإشارة إلى الـ `prototype` الخاص بهذا الـ object:
+
+```js
+ChildObject.prototype = Object.create(ParentObject.prototype);
+```
+
+ثم تلقّى الـ `ChildObject` الـ methods الخاصة به من خلال تبيانها في الـ `prototype` الخاص به:
+
+```js
+ChildObject.prototype.methodName = function() {...};
+```
+
+من الممكن تجاوز inherited method. يتم ذلك بنفس الطريقة - عن طريق إضافة method إلى `ChildObject.prototype` باستخدام نفس اسم الـ method الذي يتم تجاوزه. إليك مثال على `Bird` تتجاوز method الـ `eat()` الموروثة من `Animal`:
+
+```js
+function Animal() { }
+Animal.prototype.eat = function() {
+  return "nom nom nom";
+};
+function Bird() { }
+
+Bird.prototype = Object.create(Animal.prototype);
+
+Bird.prototype.eat = function() {
+  return "peck peck peck";
+};
+```
+
+إذا كان لديك instance مثل `let duck = new Bird();` واستدعيت `duck.eat()`، هذه هي الطريقة التي يبحث بها جافا سكريبت عن method على سلسلة الـ `prototype` الخاص بـ `duck`:
+
+1.  `duck` => Is `eat()` معرف هنا؟ لا.
+2.  `Bird` => Is `eat()` معرف هنا؟ => نعم. قم بتنفيذه و إيقاف البحث.
+3.  `Animal` => `eat()` تم تعريفه أيضًا ، ولكن جافا سكريبت توقف عن البحث قبل الوصول إلى هذا المستوى.
+4.  Object => جافا سكريبت توقف عن البحث قبل الوصول إلى هذا المستوى.
+
+# --instructions--
+
+تجاوز method الـ `fly()` لـ `Penguin` بحيث تعيد الـ string الآتي `Alas, this is a flightless bird.`
+
+# --hints--
+
+`penguin.fly()` يجب أن يعيد `Alas, this is a flightless bird.`
+
+```js
+assert(penguin.fly() === 'Alas, this is a flightless bird.');
+```
+
+The `bird.fly()` يجب أن يعيد `I am flying!`
+
+```js
+assert(new Bird().fly() === 'I am flying!');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Bird() { }
+
+Bird.prototype.fly = function() { return "I am flying!"; };
+
+function Penguin() { }
+Penguin.prototype = Object.create(Bird.prototype);
+Penguin.prototype.constructor = Penguin;
+
+// Only change code below this line
+
+
+
+// Only change code above this line
+
+let penguin = new Penguin();
+console.log(penguin.fly());
+```
+
+# --solutions--
+
+```js
+function Bird() { }
+
+Bird.prototype.fly = function() { return "I am flying!"; };
+
+function Penguin() { }
+Penguin.prototype = Object.create(Bird.prototype);
+Penguin.prototype.constructor = Penguin;
+Penguin.prototype.fly = () => 'Alas, this is a flightless bird.';
+let penguin = new Penguin();
+console.log(penguin.fly());
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md
new file mode 100644
index 00000000000..1547af05ec1
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/remember-to-set-the-constructor-property-when-changing-the-prototype.md
@@ -0,0 +1,86 @@
+---
+id: 587d7daf367417b2b2512b80
+title: تذكر أن تعين خاصية Constructor عند تغيير Prototype
+challengeType: 1
+forumTopicId: 301323
+dashedName: remember-to-set-the-constructor-property-when-changing-the-prototype
+---
+
+# --description--
+
+هناك تأثير جانبي مهم لضبط prototype يدويًا إلى كائن (object) جديد. إنه يمحو خاصية `constructor`! يمكن استخدام هذه الخاصية لمعرفة إي وظيفة constructor هي التي أنشأت instance، ولكن بما انه تم التعديل علي الخاصية، فإنها تعطي الآن نتائج خاطئة:
+
+```js
+duck.constructor === Bird;
+duck.constructor === Object;
+duck instanceof Bird;
+```
+
+بالترتيب، سيتم تقييم هذه التعبيرات إلى `false`، و `true`، و `true`.
+
+لإصلاح هذا، عندما يتم تعيين prototype يدوياً إلى كائن جديد، تذكر أن تحدد خاصية `constructor`:
+
+```js
+Bird.prototype = {
+  constructor: Bird,
+  numLegs: 2,
+  eat: function() {
+    console.log("nom nom nom");
+  },
+  describe: function() {
+    console.log("My name is " + this.name); 
+  }
+};
+```
+
+# --instructions--
+
+حدد خاصية `constructor` على `Dog` يكون `prototype`.
+
+# --hints--
+
+`Dog.prototype` يجب أن يعيّن خاصية `constructor`.
+
+```js
+assert(Dog.prototype.constructor === Dog);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Dog(name) {
+  this.name = name;
+}
+
+// Only change code below this line
+Dog.prototype = {
+
+  numLegs: 4,
+  eat: function() {
+    console.log("nom nom nom");
+  },
+  describe: function() {
+    console.log("My name is " + this.name);
+  }
+};
+```
+
+# --solutions--
+
+```js
+function Dog(name) {
+  this.name = name;
+}
+Dog.prototype = {
+  constructor: Dog,
+  numLegs: 4,
+  eat: function() {
+    console.log("nom nom nom");
+  },
+  describe: function() {
+    console.log("My name is " + this.name);
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md
new file mode 100644
index 00000000000..4cc528aec6d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/reset-an-inherited-constructor-property.md
@@ -0,0 +1,91 @@
+---
+id: 587d7db1367417b2b2512b86
+title: إعادة تعيين خاصية موروثة (Reset an Inherited Constructor Property)
+challengeType: 1
+forumTopicId: 301324
+dashedName: reset-an-inherited-constructor-property
+---
+
+# --description--
+
+عندما يرث الـ object الـ `prototype` من object آخر، فإنه يرث أيضا الـ supertype's constructor property.
+
+على سبيل المثال:
+
+```js
+function Bird() { }
+Bird.prototype = Object.create(Animal.prototype);
+let duck = new Bird();
+duck.constructor
+```
+
+ولكن `duck` وجميع الـ instances من `Bird` يجب أن تظهر أنها بنيت اي constructed، بواسطة `Bird` وليس `Animal`. للقيام بذلك، يمكنك تعيين constructor property لـ `Bird` إلى object الـ `Bird`:
+
+```js
+Bird.prototype.constructor = Bird;
+duck.constructor
+```
+
+# --instructions--
+
+أصلح الكود بحيث يقوم `duck.constructor` و `beagle.constructor` بإرجاع الـ constructors لكل منهم.
+
+# --hints--
+
+`Bird.prototype` يجب أن يكون instance لـ `Animal`.
+
+```js
+assert(Animal.prototype.isPrototypeOf(Bird.prototype));
+```
+
+`duck.constructor` يجب أن يرجع `Bird`.
+
+```js
+assert(duck.constructor === Bird);
+```
+
+`Dog.prototype` يجب أن يكون instance لـ `Animal`.
+
+```js
+assert(Animal.prototype.isPrototypeOf(Dog.prototype));
+```
+
+`beagle.constructor` يجب أن يرجع `Dog`.
+
+```js
+assert(beagle.constructor === Dog);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Animal() { }
+function Bird() { }
+function Dog() { }
+
+Bird.prototype = Object.create(Animal.prototype);
+Dog.prototype = Object.create(Animal.prototype);
+
+// Only change code below this line
+
+
+
+let duck = new Bird();
+let beagle = new Dog();
+```
+
+# --solutions--
+
+```js
+function Animal() { }
+function Bird() { }
+function Dog() { }
+Bird.prototype = Object.create(Animal.prototype);
+Dog.prototype = Object.create(Animal.prototype);
+Dog.prototype.constructor = Dog;
+Bird.prototype.constructor = Bird;
+let duck = new Bird();
+let beagle = new Dog();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/set-the-childs-prototype-to-an-instance-of-the-parent.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/set-the-childs-prototype-to-an-instance-of-the-parent.md
new file mode 100644
index 00000000000..80263a98337
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/set-the-childs-prototype-to-an-instance-of-the-parent.md
@@ -0,0 +1,79 @@
+---
+id: 587d7db1367417b2b2512b85
+title: Set the Child's Prototype to an Instance of the Parent
+challengeType: 1
+forumTopicId: 301325
+dashedName: set-the-childs-prototype-to-an-instance-of-the-parent
+---
+
+# --description--
+
+في التحدي السابق رأيت الخطوة الأولى لوراثة السلوك من الـ supertype (أو الاب) `Animal`: إنشاء مثيل جديد لـ `Animal`.
+
+هذا التحدي يغطي الخطوة التالية: تعيين `prototype` للنوع الفرعي (subtype) (أو الابن)- في هذه الحالة، `Bird`-تكون مثيلًا لـ `Animal`.
+
+```js
+Bird.prototype = Object.create(Animal.prototype);
+```
+
+تذكر أن `prototype` هو مثل "الوصفة" لإنشاء object. بطريقة ما، تتضمن وصفة `Bird` الآن كل "المكونات" الاساسية من `Animal`.
+
+```js
+let duck = new Bird("Donald");
+duck.eat();
+```
+
+`duck` ترث كل خصائص `Animal` بما في ذلك method الـ `eat`.
+
+# --instructions--
+
+قم بتعديل الكود بحيث ترث مثيلات `Dog` من `Animal`.
+
+# --hints--
+
+`Dog.prototype` يجب أن يكون مثيل (instance) لـ `Animal`.
+
+```js
+assert(Animal.prototype.isPrototypeOf(Dog.prototype));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Animal() { }
+
+Animal.prototype = {
+  constructor: Animal,
+  eat: function() {
+    console.log("nom nom nom");
+  }
+};
+
+function Dog() { }
+
+// Only change code below this line
+
+
+let beagle = new Dog();
+```
+
+# --solutions--
+
+```js
+function Animal() { }
+
+Animal.prototype = {
+  constructor: Animal,
+  eat: function() {
+    console.log("nom nom nom");
+  }
+};
+
+function Dog() { }
+Dog.prototype = Object.create(Animal.prototype);
+
+let beagle = new Dog();
+beagle.eat();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-own-properties.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-own-properties.md
new file mode 100644
index 00000000000..007005a1373
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-own-properties.md
@@ -0,0 +1,104 @@
+---
+id: 587d7dae367417b2b2512b7b
+title: فهم الخصائص المملوكة (Understand Own Properties)
+challengeType: 1
+forumTopicId: 301326
+dashedName: understand-own-properties
+---
+
+# --description--
+
+في المثال التالي، يقوم constructor الـ `Bird` بتحديد خاصيتين: `name` و `numLegs`:
+
+```js
+function Bird(name) {
+  this.name = name;
+  this.numLegs = 2;
+}
+
+let duck = new Bird("Donald");
+let canary = new Bird("Tweety");
+```
+
+`name` و `numLegs` تسمى <dfn>own properties</dfn>، لأنها تعرف مباشرة على الـ instance object. وهذا يعني أن كل من `duck` و `canary` لديهم نسخة منفصلة خاصة بهم من هذه الخواص. في الواقع كل instance من `Bird` سيكون لديها نسخة خاصة بها من هذه الخواص. الكود التالي يضيف جميع الخصائص الخاصة بـ `duck` إلى مصفوفة `ownProps`:
+
+```js
+let ownProps = [];
+
+for (let property in duck) {
+  if(duck.hasOwnProperty(property)) {
+    ownProps.push(property);
+  }
+}
+
+console.log(ownProps);
+```
+
+ستعرض وحدة التحكم القيمة `["name", "numLegs"]`.
+
+# --instructions--
+
+أضف جميع الخصائص الخاصة بـ `canary` إلى الـ array الآتية `ownProps`.
+
+# --hints--
+
+`ownProps` يجب أن تتضمن القيم `numLegs` و `name`.
+
+```js
+assert(ownProps.indexOf('name') !== -1 && ownProps.indexOf('numLegs') !== -1);
+```
+
+يجب عليك حل هذا التحدي دون استخدام الدالة المدمجة في `Object.keys()`.
+
+```js
+assert(!/Object(\.keys|\[(['"`])keys\2\])/.test(code));
+```
+
+يجب عليك حل هذا التحدي بدون hardcoding مصفوفة `ownProps`.
+
+```js
+assert(
+  !/\[\s*(?:'|")(?:name|numLegs)|(?:push|concat)\(\s*(?:'|")(?:name|numLegs)/.test(
+    code
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Bird(name) {
+  this.name = name;
+  this.numLegs = 2;
+}
+
+let canary = new Bird("Tweety");
+let ownProps = [];
+// Only change code below this line
+```
+
+# --solutions--
+
+```js
+function Bird(name) {
+  this.name = name;
+  this.numLegs = 2;
+}
+
+let canary = new Bird("Tweety");
+function getOwnProps (obj) {
+  const props = [];
+
+  for (let prop in obj) {
+    if (obj.hasOwnProperty(prop)) {
+      props.push(prop);
+    }
+  }
+
+  return props;
+}
+
+const ownProps = getOwnProps(canary);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-constructor-property.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-constructor-property.md
new file mode 100644
index 00000000000..a188f882d81
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-constructor-property.md
@@ -0,0 +1,85 @@
+---
+id: 587d7daf367417b2b2512b7e
+title: Understand the Constructor Property
+challengeType: 1
+forumTopicId: 301327
+dashedName: understand-the-constructor-property
+---
+
+# --description--
+
+هناك خاصية خاصة للـ `constructor` موجودة على كائنات `duck` و `beagle` تم إنشاؤها في التحديات السابقة:
+
+```js
+let duck = new Bird();
+let beagle = new Dog();
+
+console.log(duck.constructor === Bird); 
+console.log(beagle.constructor === Dog);
+```
+
+كل من هذه الاستدعائات لـ `console.log` سوف تعرض `true` في وحدة التحكم.
+
+لاحظ أن خاصية الـ `constructor` هي مرجع للـ constructor function التي أنشأت الـ instance. ميزة خاصية للـ `constructor` هي أنه من الممكن التحقق من هذه الخاصية لمعرفة نوع الـ object. اليك مثال على كيفية استخدام هذا:
+
+```js
+function joinBirdFraternity(candidate) {
+  if (candidate.constructor === Bird) {
+    return true;
+  } else {
+    return false;
+  }
+}
+```
+
+**ملاحظة:** بما أن خاصية الـ `constructor` يمكن الكتابة عليها (والتي سيتم تغطيتها في التحديين التاليين) من الأفضل عموماً استخدام `instanceof` للتحقق من نوع الـ object.
+
+# --instructions--
+
+اكتب دالة `joinDogFraternity` التي تأخذ معلمة `candidate` و باستخدام الـ `constructor` ،قم بإرجاع `true` إذا كان المرشح `Dog`، وإلا أرجع `false`.
+
+# --hints--
+
+`joinDogFraternity` يجب تعريفه كـ function.
+
+```js
+assert(typeof joinDogFraternity === 'function');
+```
+
+`joinDogFraternity` يجب أن يرجع `true` إذا كان `candidate` هو instance لـ `Dog`.
+
+```js
+assert(joinDogFraternity(new Dog('')) === true);
+```
+
+`joinDogFraternity` يجب أن تستخدم خاصية الـ `constructor`.
+
+```js
+assert(/\.constructor/.test(code) && !/instanceof/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Dog(name) {
+  this.name = name;
+}
+
+// Only change code below this line
+function joinDogFraternity(candidate) {
+
+}
+```
+
+# --solutions--
+
+```js
+function Dog(name) {
+  this.name = name;
+}
+function joinDogFraternity(candidate) {
+  return candidate.constructor === Dog;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-immediately-invoked-function-expression-iife.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-immediately-invoked-function-expression-iife.md
new file mode 100644
index 00000000000..364153abf98
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-immediately-invoked-function-expression-iife.md
@@ -0,0 +1,83 @@
+---
+id: 587d7db2367417b2b2512b8b
+title: Understand the Immediately Invoked Function Expression (IIFE)
+challengeType: 1
+forumTopicId: 301328
+dashedName: understand-the-immediately-invoked-function-expression-iife
+---
+
+# --description--
+
+النمط الشائع في جافا سكريبت هو تنفيذ الـ function بمجرد إعلانه:
+
+```js
+(function () {
+  console.log("Chirp, chirp!");
+})();
+```
+
+هذا اسمه anonymous function expression الذي ينفذ على الفور، ويخرج `Chirp, chirp!` على الفور.
+
+لاحظ أن ال function ليس له اسم وليس مخزن في متغير. ويؤدي القوسان () الواردان في نهاية ال function expression إلى تنفيذه أو استدعاءه على الفور. هذا النمط يعرف بـ <dfn>immediately invoked function expression</dfn> او <dfn>IIFE</dfn>.
+
+# --instructions--
+
+أعد كتابة الدالة `makeNest` وأزيل استدعائها بحيث أنها تصبح anonymous immediately invoked function expression (IIFE).
+
+# --hints--
+
+وينبغي أن يكون ال function مجهول اي anonymous.
+
+```js
+assert(/\((function|\(\))(=>|\(\)){?/.test(code.replace(/\s/g, '')));
+```
+
+يجب أن يكون ال function الخاص بك بين قوسين في نهاية التعبير لاستدعائه على الفور.
+
+```js
+assert(/\(.*(\)\(|\}\(\))\)/.test(code.replace(/[\s;]/g, '')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function makeNest() {
+  console.log("A cozy nest is ready");
+}
+
+makeNest();
+```
+
+# --solutions--
+
+```js
+(function () {
+  console.log("A cozy nest is ready");
+})();
+```
+
+---
+
+```js
+(function () {
+  console.log("A cozy nest is ready");
+}());
+```
+
+---
+
+```js
+(() => {
+  console.log("A cozy nest is ready");
+})();
+```
+
+---
+
+```js
+(() =>
+  console.log("A cozy nest is ready")
+)();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-prototype-chain.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-prototype-chain.md
new file mode 100644
index 00000000000..5ddeeef034c
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-the-prototype-chain.md
@@ -0,0 +1,74 @@
+---
+id: 587d7db0367417b2b2512b82
+title: Understand the Prototype Chain
+challengeType: 1
+forumTopicId: 301329
+dashedName: understand-the-prototype-chain
+---
+
+# --description--
+
+جميع ال objects في جافا سكريبت (مع بعض الاستثناءات) لديها `prototype`. أيضًا ، يعتبر الـ `prototype` لل object هو نفسه object.
+
+```js
+function Bird(name) {
+  this.name = name;
+}
+
+typeof Bird.prototype;
+```
+
+لأن `prototype` هو object، فـ `prototype` يمكن أن يكون له الـ `prototype` الخاص به! في هذه الحالة، الـ `prototype` لـ `Bird.prototype` هو `Object.prototype`:
+
+```js
+Object.prototype.isPrototypeOf(Bird.prototype);
+```
+
+كيف يكون ذلك مفيداً؟ قد تتذكر `hasOwnProperty` من تحدي سابق:
+
+```js
+let duck = new Bird("Donald");
+duck.hasOwnProperty("name");
+```
+
+تم تعريف `hasOwnProperty` في `Object.prototype`، والتي يمكن الوصول إليها بواسطة `Bird.prototype` والذي يمكن الوصول إليه من قبل `duck`. هذا مثال على سلسلة الـ `prototype`. في سلسلة `prototype` هذه، `Bird` هو `supertype` لـ `duck`، بينما `duck` هو الـ `subtype`. `Object` هو `supertype` لكلا من `Bird` و `duck`. `Object` هو `supertype` لجميع ال objects في جافا سكريبت. لذلك، يمكن لأي object أن يستخدم `hasOwnProperty`.
+
+# --instructions--
+
+قم بتعديل الكود لإظهار سلسلة ال prototype الصحيحة.
+
+# --hints--
+
+يجب أن يظهر الكود الخاص بك أن `Object.prototype` هو ال prototype لـ `Dog.prototype`
+
+```js
+assert(/Object\.prototype\.isPrototypeOf/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Dog(name) {
+  this.name = name;
+}
+
+let beagle = new Dog("Snoopy");
+
+Dog.prototype.isPrototypeOf(beagle);  // yields true
+
+// Fix the code below so that it evaluates to true
+???.isPrototypeOf(Dog.prototype);
+```
+
+# --solutions--
+
+```js
+function Dog(name) {
+  this.name = name;
+}
+let beagle = new Dog("Snoopy");
+Dog.prototype.isPrototypeOf(beagle);
+Object.prototype.isPrototypeOf(Dog.prototype);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from.md
new file mode 100644
index 00000000000..2850a4349a9
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/understand-where-an-objects-prototype-comes-from.md
@@ -0,0 +1,63 @@
+---
+id: 587d7db0367417b2b2512b81
+title: Understand Where an Object’s Prototype Comes From
+challengeType: 1
+forumTopicId: 301330
+dashedName: understand-where-an-objects-prototype-comes-from
+---
+
+# --description--
+
+تمامًا مثل الأشخاص الذين يرثون الجينات من آبائهم ، يرث الكائن الـ `prototype` مباشرةً من الـ constructor function الذي أنشئه. على سبيل المثال ، هنا constructor الـ `Bird` يقوم بإنشاء كائن `duck`:
+
+```js
+function Bird(name) {
+  this.name = name;
+}
+
+let duck = new Bird("Donald");
+```
+
+`duck` يرث الـ `prototype` من الـ constructor function الخاص بـ `Bird`. يمكنك إظهار هذه العلاقة باستخدام `isPrototypeOf`:
+
+```js
+Bird.prototype.isPrototypeOf(duck);
+```
+
+سيؤدي هذا إلى إعادة `true`.
+
+# --instructions--
+
+استخدم `isPrototypeOf` للتحقق من `prototype` الـ `beagle`.
+
+# --hints--
+
+يجب أن تظهر أن `Dog.prototype` هو `prototype` الـ `beagle`
+
+```js
+assert(/Dog\.prototype\.isPrototypeOf\(beagle\)/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Dog(name) {
+  this.name = name;
+}
+
+let beagle = new Dog("Snoopy");
+
+// Only change code below this line
+```
+
+# --solutions--
+
+```js
+function Dog(name) {
+  this.name = name;
+}
+let beagle = new Dog("Snoopy");
+Dog.prototype.isPrototypeOf(beagle);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-constructor-to-create-objects.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-constructor-to-create-objects.md
new file mode 100644
index 00000000000..3eb00fc833c
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-constructor-to-create-objects.md
@@ -0,0 +1,80 @@
+---
+id: 587d7dad367417b2b2512b78
+title: Use a Constructor to Create Objects
+challengeType: 1
+forumTopicId: 18233
+dashedName: use-a-constructor-to-create-objects
+---
+
+# --description--
+
+إليك constructor الـ `Bird` من التحدي السابق:
+
+```js
+function Bird() {
+  this.name = "Albert";
+  this.color  = "blue";
+  this.numLegs = 2;
+}
+
+let blueBird = new Bird();
+```
+
+**ملاحظة:** كلمة `this` داخل الـ constructor تشير دائما إلى الـ object الذي يتم إنشاؤه.
+
+لاحظ أن مشغل `new` يستخدم عند استدعاء الـ constructor. هذا يخبر جافا سكريبت بإنشاء instance جديد من `Bird` يسمى `blueBird`. بدون مشغل `new`، كلمة `this` داخل الـ constructor لن تشير إلى ال object المنشأ حديثا، مما يعطي نتائج غير متوقعة. الآن `blueBird` لديه جميع الخصائص المرفة داخل constructor الـ `Bird`:
+
+```js
+blueBird.name;
+blueBird.color;
+blueBird.numLegs;
+```
+
+تماما مثل أي object آخر، يمكن الوصول إلى خصائصه وتعديلها:
+
+```js
+blueBird.name = 'Elvira';
+blueBird.name;
+```
+
+# --instructions--
+
+استخدم constructor الـ `Dog` من الدرس الأخير لإنشاء instance جديد من `Dog` و تعيينه إلى متغير `hound`.
+
+# --hints--
+
+`hound` يجب أن يتم إنشاؤه باستخدام constructor الـ `Dog`.
+
+```js
+assert(hound instanceof Dog);
+```
+
+الكود الخاص بك يجب أن يستخدم مشغل `new` لإنشاء instance الـ `Dog`.
+
+```js
+assert(code.match(/new/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Dog() {
+  this.name = "Rupert";
+  this.color = "brown";
+  this.numLegs = 4;
+}
+// Only change code below this line
+```
+
+# --solutions--
+
+```js
+function Dog() {
+  this.name = "Rupert";
+  this.color = "brown";
+  this.numLegs = 4;
+}
+const hound = new Dog();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-mixin-to-add-common-behavior-between-unrelated-objects.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-mixin-to-add-common-behavior-between-unrelated-objects.md
new file mode 100644
index 00000000000..9c4f8a04598
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-a-mixin-to-add-common-behavior-between-unrelated-objects.md
@@ -0,0 +1,111 @@
+---
+id: 587d7db2367417b2b2512b89
+title: Use a Mixin to Add Common Behavior Between Unrelated Objects
+challengeType: 1
+forumTopicId: 301331
+dashedName: use-a-mixin-to-add-common-behavior-between-unrelated-objects
+---
+
+# --description--
+
+كما رأيتم، فإن السلوك يتم تشاركه من خلال الميراث. ومع ذلك ، هناك حالات لا يكون فيها الميراث هو الحل الأفضل. الميراث لا يعمل بشكل جيد لـ objects غير ذات صلة مثل `Bird` و `Airplane`. يمكن لكل منهما الطيران ، ولكن `Bird` ليس نوعا من `Airplane` والعكس صحيح.
+
+بالنسبة للـ objects غير ذات صلة، من الأفضل استخدام <dfn>mixins</dfn>. يسمح ال mixin للـ objects الأخرى باستخدام مجموعة من الـ functions.
+
+```js
+let flyMixin = function(obj) {
+  obj.fly = function() {
+    console.log("Flying, wooosh!");
+  }
+};
+```
+
+`flyMixin` يأخذ أي object ويعطيه method الـ `fly`.
+
+```js
+let bird = {
+  name: "Donald",
+  numLegs: 2
+};
+
+let plane = {
+  model: "777",
+  numPassengers: 524
+};
+
+flyMixin(bird);
+flyMixin(plane);
+```
+
+هنا `bird` و `plane` يتم تمريرها إلى `flyMixin`، الذي يقوم بعد ذلك بتعيين دالة `fly` لكل object. الآن يمكن لكل من `bird` و `plane` الطيران:
+
+```js
+bird.fly();
+plane.fly();
+```
+
+ستعرض وحدة التحكم السلسلة `Flying, wooosh!` مرتين، مرة واحدة لكل استدعاء لـ `.fly()`.
+
+لاحظ كيف أن الـ mixin يسمح بإعادة استخدام نفس method الـ `fly` من قبل objects غير ذات صلة كـ `bird` و `plane`.
+
+# --instructions--
+
+قم بإنشاء mixin يسمى `glideMixin` الذي يعرف method تسمى `glide`. ثم استخدم `glideMixin` لإعطاء `bird` و `boat` القدرة على الانزلاق.
+
+# --hints--
+
+يجب أن يعرف الكود الخاص بك عن متغير `glideMixin` وهو function.
+
+```js
+assert(typeof glideMixin === 'function');
+```
+
+يجب أن يستخدم الكود الخاص بك `glideMixin` على كائن `bird` لإعطائه method الـ `glide`.
+
+```js
+assert(typeof bird.glide === 'function');
+```
+
+يجب أن يستخدم الكود الخاص بك `glideMixin` على كائن `boat` لإعطائه method الـ `glide`.
+
+```js
+assert(typeof boat.glide === 'function');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let bird = {
+  name: "Donald",
+  numLegs: 2
+};
+
+let boat = {
+  name: "Warrior",
+  type: "race-boat"
+};
+
+// Only change code below this line
+```
+
+# --solutions--
+
+```js
+let bird = {
+  name: "Donald",
+  numLegs: 2
+};
+
+let boat = {
+  name: "Warrior",
+  type: "race-boat"
+};
+function glideMixin (obj) {
+  obj.glide = () => 'Gliding!';
+}
+
+glideMixin(bird);
+glideMixin(boat);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-an-iife-to-create-a-module.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-an-iife-to-create-a-module.md
new file mode 100644
index 00000000000..cab380b64fe
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-an-iife-to-create-a-module.md
@@ -0,0 +1,106 @@
+---
+id: 587d7db2367417b2b2512b8c
+title: Use an IIFE to Create a Module
+challengeType: 1
+forumTopicId: 301332
+dashedName: use-an-iife-to-create-a-module
+---
+
+# --description--
+
+غالباً ما يستخدم immediately invoked function expression (IIFE) لتجميع الــ functionality ذات الصلة في object واحد أو <dfn>module</dfn>. فعلى سبيل المثال، كان هناك تحد سابق حدد اثنان mixins:
+
+```js
+function glideMixin(obj) {
+  obj.glide = function() {
+    console.log("Gliding on the water");
+  };
+}
+function flyMixin(obj) {
+  obj.fly = function() {
+    console.log("Flying, wooosh!");
+  };
+}
+```
+
+يمكننا تجميع هذه ال mixins في module على النحو التالي:
+
+```js
+let motionModule = (function () {
+  return {
+    glideMixin: function(obj) {
+      obj.glide = function() {
+        console.log("Gliding on the water");
+      };
+    },
+    flyMixin: function(obj) {
+      obj.fly = function() {
+        console.log("Flying, wooosh!");
+      };
+    }
+  }
+})();
+```
+
+لاحظ أن لديك immediately invoked function expression (IIFE) الذي يرجع كائن `motionModule`. هذا الـ object المعاد يحتوي على جميع سلوكيات ال mixin كخصائص لل object. ميزة نمط ال module هو أنه يمكن تعبئة جميع سلوكيات الحركة في object واحد يمكن استخدامه بعد ذلك في أجزاء أخرى من الكود الخاص بك. هنا مثال على استخدامه:
+
+```js
+motionModule.glideMixin(duck);
+duck.glide();
+```
+
+# --instructions--
+
+قم بإنشاء module يسمى `funModule` لتغليف ال mixins الآتيان `isCuteMixin` و `singMixin`. `funModule` يجب أن ترجع object.
+
+# --hints--
+
+`funModule` يجب أن يتم تعريفها وأن تعيد object.
+
+```js
+assert(typeof funModule === 'object');
+```
+
+`funModule.isCuteMixin` يجب أن يصل إلى function.
+
+```js
+assert(typeof funModule.isCuteMixin === 'function');
+```
+
+`funModule.singMixin` يجب أن يصل إلى function.
+
+```js
+assert(typeof funModule.singMixin === 'function');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let isCuteMixin = function(obj) {
+  obj.isCute = function() {
+    return true;
+  };
+};
+let singMixin = function(obj) {
+  obj.sing = function() {
+    console.log("Singing to an awesome tune");
+  };
+};
+```
+
+# --solutions--
+
+```js
+const funModule = (function () {
+  return {
+    isCuteMixin: obj => {
+      obj.isCute = () => true;
+    },
+    singMixin: obj => {
+      obj.sing = () => console.log("Singing to an awesome tune");
+    }
+  };
+})();
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-closure-to-protect-properties-within-an-object-from-being-modified-externally.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-closure-to-protect-properties-within-an-object-from-being-modified-externally.md
new file mode 100644
index 00000000000..83935b14b5b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-closure-to-protect-properties-within-an-object-from-being-modified-externally.md
@@ -0,0 +1,81 @@
+---
+id: 587d7db2367417b2b2512b8a
+title: >-
+  Use Closure to Protect Properties Within an Object from Being Modified Externally
+challengeType: 1
+forumTopicId: 18234
+dashedName: >-
+  use-closure-to-protect-properties-within-an-object-from-being-modified-externally
+---
+
+# --description--
+
+في التحدي السابق، `bird` كان لديه خاصية عامة و هي `name`. تعتبر عامة لأنه يمكن الوصول إليها وتغييرها خارج تعريف `bird`.
+
+```js
+bird.name = "Duffy";
+```
+
+لذلك، يمكن لأي جزء من الكود الخاص بك تغيير اسم `bird` بسهولة إلى أي قيمة. فكروا في أشياء مثل كلمات المرور والحسابات المصرفية التي يسهل تغييرها من قبل أي جزء من الكود الخاص بك. وهذا يمكن أن يسبب الكثير من المشاكل.
+
+وأبسط طريقة لجعل هذه الخاصية العامة، خاصة، هي عن طريق إنشاء متغير داخل الـ constructor function. وهذا يغير نطاق ذلك المتغير بحيث يكون ضمن الـ constructor function علي عكس أن يكون متاحا بشكل global. وبهذه الطريقة، لا يمكن الوصول إلى المتغير وتغييره إلا بواسطة method تكون أيضا ضمن الـ constructor function.
+
+```js
+function Bird() {
+  let hatchedEgg = 10;
+
+  this.getHatchedEggCount = function() { 
+    return hatchedEgg;
+  };
+}
+let ducky = new Bird();
+ducky.getHatchedEggCount();
+```
+
+هنا `getHatchedEggCount` هي method مميزة، لأنها لديها حق الوصول إلى المتغير الخاص `hatchedEgg`. هذا ممكن لأن `hatchedEgg` تم تعريفها في نفس السياق مثل `getHatchedEggCount`. في جافا سكريبت، الدالة دائما لها حق الوصول إلى السياق الذي تم إنشاؤها فيه. هذا يسمى `closure`.
+
+# --instructions--
+
+قم بتغيير كيفية تعريف `weight` في دالة `Bird` بحيث يصبح متغير خاص. ثم قم بإنشاء `getWeight` لإرجاع قيمة `weight` والتي هي 15.
+
+# --hints--
+
+يجب أن تكون خاصية `weight` متغير خاص ويجب تعيينه قيمة `15`.
+
+```js
+assert(code.match(/(var|let|const)\s+weight\s*\=\s*15\;?/g));
+```
+
+يجب أن ينشئ الكود الخاص بك method في `Bird` تسمى `getWeight` لإرجاع قيمة المتغير الخاص `weight`.
+
+```js
+assert(new Bird().getWeight() === 15);
+```
+
+يجب أن تقوم دالة `getWeight` بإرجاع المتغير الخاص `weight`.
+
+```js
+assert(code.match(/((return\s+)|(\(\s*\)\s*\=\>\s*))weight\;?/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Bird() {
+  this.weight = 15;
+
+
+}
+```
+
+# --solutions--
+
+```js
+function Bird() {
+  let weight = 15;
+
+  this.getWeight = () => weight;
+}
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-dot-notation-to-access-the-properties-of-an-object.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-dot-notation-to-access-the-properties-of-an-object.md
new file mode 100644
index 00000000000..16d268fdd75
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-dot-notation-to-access-the-properties-of-an-object.md
@@ -0,0 +1,62 @@
+---
+id: 587d7dac367417b2b2512b74
+title: Use Dot Notation to Access the Properties of an Object
+challengeType: 1
+forumTopicId: 301333
+dashedName: use-dot-notation-to-access-the-properties-of-an-object
+---
+
+# --description--
+
+أحدث التحدي الأخير object ذو خصائص مختلفة. الآن سترى كيفية الوصول إلى قيم هذه الخواص. إليك مثال:
+
+```js
+let duck = {
+  name: "Aflac",
+  numLegs: 2
+};
+console.log(duck.name);
+```
+
+يتم استخدام تدوين Dot على اسم الكائن، `duck`، يليها اسم الخاصية، `name`، للوصول إلى قيمة `Aflac`.
+
+# --instructions--
+
+قم بطباعة خواص كائن `dog` إلى وحدة التحكم الخاصة بك.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك `console.log` لطباعة قيمة خاصية `name` لكائن `dog`.
+
+```js
+assert(/console.log\(.*dog\.name.*\)/g.test(code));
+```
+
+يجب أن يستخدم الكود الخاص بك `console.log` لطباعة قيمة خاصية `numLegs` لكائن `dog`.
+
+```js
+assert(/console.log\(.*dog\.numLegs.*\)/g.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let dog = {
+  name: "Spot",
+  numLegs: 4
+};
+// Only change code below this line
+```
+
+# --solutions--
+
+```js
+let dog = {
+  name: "Spot",
+  numLegs: 4
+};
+console.log(dog.name);
+console.log(dog.numLegs);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-inheritance-so-you-dont-repeat-yourself.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-inheritance-so-you-dont-repeat-yourself.md
new file mode 100644
index 00000000000..6445636bf59
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-inheritance-so-you-dont-repeat-yourself.md
@@ -0,0 +1,142 @@
+---
+id: 587d7db0367417b2b2512b83
+title: Use Inheritance So You Don't Repeat Yourself
+challengeType: 1
+forumTopicId: 301334
+dashedName: use-inheritance-so-you-dont-repeat-yourself
+---
+
+# --description--
+
+هناك مبدأ في البرمجة يسمى <dfn>Don't Repeat Yourself (DRY)</dfn>. السبب في أن الكود المتكرر مشكلة هو أن أي تغيير يتطلب إصلاح الكود في أماكن متعددة. وهذا يعني عادة المزيد من العمل للمبرمجين والمزيد من الحيز للأخطاء.
+
+لاحظ في المثال أدناه أن `describe` مشتركة من قبل `Bird` و `Dog`:
+
+```js
+Bird.prototype = {
+  constructor: Bird,
+  describe: function() {
+    console.log("My name is " + this.name);
+  }
+};
+
+Dog.prototype = {
+  constructor: Dog,
+  describe: function() {
+    console.log("My name is " + this.name);
+  }
+};
+```
+
+يتم تكرار `describe` في مكانين. يمكن تعديل الكود لاتباع مبدأ DRY عن طريق إنشاء `supertype` (أو الاب) يسمى `Animal`:
+
+```js
+function Animal() { };
+
+Animal.prototype = {
+  constructor: Animal, 
+  describe: function() {
+    console.log("My name is " + this.name);
+  }
+};
+```
+
+بما أن `Animal` يتضمن method الـ `describe` ، يمكنك إزالته من `Bird` و `Dog`:
+
+```js
+Bird.prototype = {
+  constructor: Bird
+};
+
+Dog.prototype = {
+  constructor: Dog
+};
+```
+
+# --instructions--
+
+يتم تكرار method الـ `eat` في كل من `Cat` و `Bear`. قم بتعديل الكود بروح DRY عن طريق نقل method الـ `eat` إلى `supertype` الـ `Animal`.
+
+# --hints--
+
+`Animal.prototype` يجب أن تحتوي على خاصية `eat`.
+
+```js
+assert(Animal.prototype.hasOwnProperty('eat'));
+```
+
+`Bear.prototype` يجب ألا يحتوي على خاصية `eat`.
+
+```js
+assert(!Bear.prototype.hasOwnProperty('eat'));
+```
+
+`Cat.prototype` يجب ألا تحتوي على خاصية `eat`.
+
+```js
+assert(!Cat.prototype.hasOwnProperty('eat'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Cat(name) {
+  this.name = name;
+}
+
+Cat.prototype = {
+  constructor: Cat,
+  eat: function() {
+    console.log("nom nom nom");
+  }
+};
+
+function Bear(name) {
+  this.name = name;
+}
+
+Bear.prototype = {
+  constructor: Bear,
+  eat: function() {
+    console.log("nom nom nom");
+  }
+};
+
+function Animal() { }
+
+Animal.prototype = {
+  constructor: Animal,
+
+};
+```
+
+# --solutions--
+
+```js
+function Cat(name) {
+  this.name = name;
+}
+
+Cat.prototype = {
+  constructor: Cat
+};
+
+function Bear(name) {
+  this.name = name;
+}
+
+Bear.prototype = {
+  constructor: Bear
+};
+
+function Animal() { }
+
+Animal.prototype = {
+  constructor: Animal,
+  eat: function() {
+    console.log("nom nom nom");
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-prototype-properties-to-reduce-duplicate-code.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-prototype-properties-to-reduce-duplicate-code.md
new file mode 100644
index 00000000000..8a20ad37792
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/use-prototype-properties-to-reduce-duplicate-code.md
@@ -0,0 +1,77 @@
+---
+id: 587d7dae367417b2b2512b7c
+title: Use Prototype Properties to Reduce Duplicate Code
+challengeType: 1
+forumTopicId: 301336
+dashedName: use-prototype-properties-to-reduce-duplicate-code
+---
+
+# --description--
+
+نظرًا لأن `numLegs` سيكون لها نفس القيمة لجميع مثيلات `Bird`، لديك أساسا متغير مكرر `numLegs` داخل كل مثيل `Bird`.
+
+وقد لا تكون هذه مشكلة عندما لا تكون هناك سوى حالتين، ولكن تخيل، إذا كانت هناك ملايين الحالات. سيكون ذلك الكثير من المتغيرات المتكررة.
+
+طريقة أفضل هي استخدام `prototype` الـ `Bird`. تتم مشاركة الخصائص في الـ `prototype` بين جميع مثيلات `Bird`. إليك كيفية إضافة `numLegs` إلى `Bird prototype`:
+
+```js
+Bird.prototype.numLegs = 2;
+```
+
+الآن جميع مثيلات `Bird` لديها خاصية `numLegs`.
+
+```js
+console.log(duck.numLegs);
+console.log(canary.numLegs);
+```
+
+بما أن جميع ال instances تحتوي تلقائياً على الخصائص في الـ `prototype`، فكر في `prototype` كـ "وصفة" لإنشاء الـ objects. لاحظ أن الـ `prototype` لـ `duck` و `canary` هو جزء من constructor الـ`Bird` كـ `Bird.prototype`. كل object تقريبا في جافا سكريبت لديه خاصية `prototype` التي هي جزء من الـ constructor function التي أنشأتها.
+
+# --instructions--
+
+قم بإضافة خاصية `numLegs` إلى `prototype` الـ `Dog`
+
+# --hints--
+
+`beagle` يجب أن يكون لديه خاصية `numLegs`.
+
+```js
+assert(beagle.numLegs !== undefined);
+```
+
+`beagle.numLegs` يجب أن يكون رقما.
+
+```js
+assert(typeof beagle.numLegs === 'number');
+```
+
+`numLegs` يجب أن تكون خاصية `prototype` ليست خاصية خاصة (own property).
+
+```js
+assert(beagle.hasOwnProperty('numLegs') === false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Dog(name) {
+  this.name = name;
+}
+
+
+
+// Only change code above this line
+let beagle = new Dog("Snoopy");
+```
+
+# --solutions--
+
+```js
+function Dog (name) {
+  this.name = name;
+}
+Dog.prototype.numLegs = 4;
+let beagle = new Dog("Snoopy");
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/verify-an-objects-constructor-with-instanceof.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/verify-an-objects-constructor-with-instanceof.md
new file mode 100644
index 00000000000..e969e1df811
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/object-oriented-programming/verify-an-objects-constructor-with-instanceof.md
@@ -0,0 +1,79 @@
+---
+id: 587d7dae367417b2b2512b7a
+title: Verify an Object's Constructor with instanceof
+challengeType: 1
+forumTopicId: 301337
+dashedName: verify-an-objects-constructor-with-instanceof
+---
+
+# --description--
+
+في أي وقت تقوم الـ constructor function بإنشاء object جديد، يقال إن هذا ال object هو <dfn>instance</dfn> من الـ constructor الخاص به. يعطي جافا سكريبت طريقة مناسبة للتحقق من هذا مع مشغل `instanceof`. `instanceof` يسمح لك بمقارنة object مع constructor، و إرجاع `true` أو `false` استناداً إلى ما إذا كان هذا ال object قد تم إنشاؤه باستخدام الـ constructor أم لا. إليك مثال:
+
+```js
+let Bird = function(name, color) {
+  this.name = name;
+  this.color = color;
+  this.numLegs = 2;
+}
+
+let crow = new Bird("Alexis", "black");
+
+crow instanceof Bird;
+```
+
+دالة `instanceof` هنا، ستعيد `true`.
+
+إذا تم إنشاء object دون استخدام constructor، فـ `instanceof` سيتحقق من أنه ليس instance لذلك الـ constructor:
+
+```js
+let canary = {
+  name: "Mildred",
+  color: "Yellow",
+  numLegs: 2
+};
+
+canary instanceof Bird;
+```
+
+دالة `instanceof` هنا، ستعيد `false`.
+
+# --instructions--
+
+قم بإنشاء instance جديد لـ `House` ، واسمه `myHouse` و مرر اليه عدد من غرف النوم. ثم استخدم `instanceof` للتحقق من أنه instance لـ `House`.
+
+# --hints--
+
+يجب أن يحتوي `myHouse` على سمة `numBedrooms` معينة إلى رقم.
+
+```js
+assert(typeof myHouse.numBedrooms === 'number');
+```
+
+يجب عليك التحقق من أن `myHouse` هو instance لـ `House` باستخدام مشغل `instanceof`.
+
+```js
+assert(/myHouse\s*instanceof\s*House/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function House(numBedrooms) {
+  this.numBedrooms = numBedrooms;
+}
+
+// Only change code below this line
+```
+
+# --solutions--
+
+```js
+function House(numBedrooms) {
+  this.numBedrooms = numBedrooms;
+}
+const myHouse = new House(4);
+console.log(myHouse instanceof House);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-all-or-none.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-all-or-none.md
new file mode 100644
index 00000000000..27dbf007db2
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-all-or-none.md
@@ -0,0 +1,77 @@
+---
+id: 587d7dba367417b2b2512ba8
+title: تحقق من الكل أو لا شيء (Check for All or None)
+challengeType: 1
+forumTopicId: 301338
+dashedName: check-for-all-or-none
+---
+
+# --description--
+
+في بعض الأحيان قد تحتوي الأنماط التي تريد البحث عنها على أجزاء قد تكون موجودة أو غير موجودة. ومع ذلك، قد يكون من المهم التحقق من هؤلاء.
+
+يمكنك تحديد احتمالية وجود عنصر ما باستخدام علامة استفهام `?`. هذا يتحقق من وجود صفر أو واحد من العناصر التي تسبقة. يمكنك أن تفكر في هذا الرمز على أنه يقول أن العنصر السابق اختياري.
+
+على سبيل المثال هناك اختلافات طفيفة في الإنجليزية الأمريكية والبريطانية ويمكنك استخدام علامة الاستفهام لمطابقة التهجئة.
+
+```js
+let american = "color";
+let british = "colour";
+let rainbowRegex= /colou?r/;
+rainbowRegex.test(american);
+rainbowRegex.test(british);
+```
+
+كل من استدعائات دالة `test` سيرجعان `true`.
+
+# --instructions--
+
+غيّر `favRegex` ليقوم بمطابقة كل من النسخة الإنجليزية الأمريكية (`favorite`) و الإنجليزية البريطانية (`favourite`) من الكلمة.
+
+# --hints--
+
+يجب أن يستخدم الـ regex علامة الاستفهام، `?`.
+
+```js
+favRegex.lastIndex = 0;
+assert(favRegex.source.match(/\?/).length > 0);
+```
+
+يجب أن يطابق الـ regex الخاص بك `favorite`
+
+```js
+favRegex.lastIndex = 0;
+assert(favRegex.test('favorite'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `favourite`
+
+```js
+favRegex.lastIndex = 0;
+assert(favRegex.test('favourite'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `fav`
+
+```js
+favRegex.lastIndex = 0;
+assert(!favRegex.test('fav'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let favWord = "favorite";
+let favRegex = /change/; // Change this line
+let result = favRegex.test(favWord);
+```
+
+# --solutions--
+
+```js
+let favWord = "favorite";
+let favRegex = /favou?r/;
+let result = favRegex.test(favWord);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-mixed-grouping-of-characters.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-mixed-grouping-of-characters.md
new file mode 100644
index 00000000000..763ca1f3ffa
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/check-for-mixed-grouping-of-characters.md
@@ -0,0 +1,90 @@
+---
+id: 5c3dda8b4d8df89bea71600f
+title: تحقق من التجميع المختلط للرموز (Check For Mixed Grouping of Characters)
+challengeType: 1
+forumTopicId: 301339
+dashedName: check-for-mixed-grouping-of-characters
+---
+
+# --description--
+
+في بعض الأحيان نريد التحقق من مجموعات الرموز باستخدام Regular Expression ولتحقيق هذا أننا نستخدم الأقواس `()`.
+
+إذا كنت ترغب في العثور على `Penguin` او `Pumpkin` في string، يمكنك استخدام Regular Expression التالي: `/P(engu|umpk)in/g`
+
+ثم تحقق مما إذا كانت مجموعات الـ string المطلوبة موجودة في الـ test string باستخدام دالة `test()`.
+
+```js
+let testStr = "Pumpkin";
+let testRegex = /P(engu|umpk)in/;
+testRegex.test(testStr);
+```
+
+دالة `test` هنا، ستعيد `true`.
+
+# --instructions--
+
+أصلح الـ regex بحيث يتحقق من الأسماء `Franklin Roosevelt` او `Eleanor Roosevelt` > بطريقة case sensitive وينبغي أن يقدم تنازلات للأسماء المتوسطة.
+
+ثم أصلح الكود بحيث يتم التحقق من الـ regex الذي قمت بإنشائه مقابل `myString` و يتم إرجاع `true` أو `false` اعتماداً على ما إذا كان الـ regex مطابق.
+
+# --hints--
+
+الـ regex الآتي `myRegex` يجب أن يرجع `true` للسلسلة `Franklin D. Roosevelt`
+
+```js
+myRegex.lastIndex = 0;
+assert(myRegex.test('Franklin D. Roosevelt'));
+```
+
+الـ regex الآتي `myRegex` يجب أن يرجع `true` للسلسلة `Eleanor Roosevelt`
+
+```js
+myRegex.lastIndex = 0;
+assert(myRegex.test('Eleanor Roosevelt'));
+```
+
+الـ regex الآتي `myRegex` يجب أن يرجع `false` للسلسلة `Franklin Rosevelt`
+
+```js
+myRegex.lastIndex = 0;
+assert(!myRegex.test('Franklin Rosevelt'));
+```
+
+الـ regex الآتي `myRegex` يجب أن يرجع `false` للسلسلة `Frank Roosevelt`
+
+```js
+myRegex.lastIndex = 0;
+assert(!myRegex.test('Frank Roosevelt'));
+```
+
+يجب عليك استخدام `.test()` لاختبار الـ regex.
+
+```js
+assert(code.match(/myRegex.test\(\s*myString\s*\)/));
+```
+
+يجب أن ترجع نتيجتك `true`.
+
+```js
+assert(result === true);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let myString = "Eleanor Roosevelt";
+let myRegex = /False/; // Change this line
+let result = false; // Change this line
+// After passing the challenge experiment with myString and see how the grouping works
+```
+
+# --solutions--
+
+```js
+let myString = "Eleanor Roosevelt";
+let myRegex = /(Franklin|Eleanor).*Roosevelt/;
+let result = myRegex.test(myString);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/extract-matches.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/extract-matches.md
new file mode 100644
index 00000000000..1c334275991
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/extract-matches.md
@@ -0,0 +1,73 @@
+---
+id: 587d7db4367417b2b2512b92
+title: استخراج المطابقات (Extract Matches)
+challengeType: 1
+forumTopicId: 301340
+dashedName: extract-matches
+---
+
+# --description--
+
+حتى الآن، كنت تتحقق فقط من وجود أو عدم وجود نمط داخل string. يمكنك أيضا استخراج المطابقات الفعلية التي وجدتها باستخدام دالة `.match()`.
+
+لاستخدام دالة `.match()` ، قم بتطبيق الدالة على string ومرر بداخلها الـ regex في الأقواس.
+
+إليك مثال:
+
+```js
+"Hello, World!".match(/Hello/);
+let ourStr = "Regular expressions";
+let ourRegex = /expressions/;
+ourStr.match(ourRegex);
+```
+
+ستعيد أول `match` القيمة `["Hello"]` والثانية ستعيد `["expressions"]`.
+
+لاحظ أن الـ syntax لـ`.match` هو "عكس" لدالة `.test` التي تستخدمها حتى الآن:
+
+```js
+'string'.match(/regex/);
+/regex/.test('string');
+```
+
+# --instructions--
+
+قم بتطبيق دالة `.match()` لاستخراج الـ string الآتي `coding`.
+
+# --hints--
+
+`result` يجب أن تحتوي على `coding`
+
+```js
+assert(result.join() === 'coding');
+```
+
+الـ regex الخاص بك `codingRegex` يجب أن يبحث عن الـ string الآتي `coding`
+
+```js
+assert(codingRegex.source === 'coding');
+```
+
+يجب أن يستخدم الكود الخاص بك دالة `.match()`.
+
+```js
+assert(code.match(/\.match\(.*\)/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let extractStr = "Extract the word 'coding' from this string.";
+let codingRegex = /change/; // Change this line
+let result = extractStr; // Change this line
+```
+
+# --solutions--
+
+```js
+let extractStr = "Extract the word 'coding' from this string.";
+let codingRegex = /coding/; // Change this line
+let result = extractStr.match(codingRegex); // Change this line
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/find-characters-with-lazy-matching.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/find-characters-with-lazy-matching.md
new file mode 100644
index 00000000000..db9f849d4a5
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/find-characters-with-lazy-matching.md
@@ -0,0 +1,61 @@
+---
+id: 587d7db6367417b2b2512b9b
+title: Find Characters with Lazy Matching
+challengeType: 1
+forumTopicId: 301341
+dashedName: find-characters-with-lazy-matching
+---
+
+# --description--
+
+في الـ regular expressions ، تعثر المطابقة من نوع <dfn>greedy</dfn> على أطول جزء ممكن من الـ string الذي يلائم نمط الـ regex، وترجعه كمطابق. البديل يسمى مطابقة من نوع <dfn>lazy</dfn> والتي تجد أصغر جزء ممكن من الـ string الذي يستوفي نمط الـ regex.
+
+يمكنك تطبيق الـ regex الآتي `/t[a-z]*i/` على السلسلة `"titanic"`. الـ regex هذا هو في الأساس نمط يبدأ بـ `t`، وينتهي بـ `i`، ولديه بعض الحروف بينهما.
+
+الـ Regular expressions هي greedy بشكل افتراضي، لذا فإن المطابقة ستعيد `["titani"]`. وهي تجد أكبر سلسلة فرعية (sub-string) ممكنة لتتناسب مع النمط.
+
+ومع ذلك، يمكنك استخدام رمز `?` لتغييره إلى تطابق lazy. مطابقة `"titanic"` للـ regex المعدل `/t[a-z]*?i/`  يعيد `["ti"]`.
+
+**ملاحظة:** يجب تجنب تحليل HTML باستخدام الـ regular expressions، ولكن لا بأس من مطابقة نمط لـ HTML string مع الـ regular expressions.
+
+# --instructions--
+
+قم بإصلاح `/<.*>/` لإرجاع الـ HTML tag الآتي `<h1>` وليس النص `"<h1>Winter is coming</h1>"`. تذكر ان الرمز `.` في الـ regular expression، يطابق أي حرف.
+
+# --hints--
+
+متغير `result` يجب أن يكون array مع `<h1>` بداخله
+
+```js
+assert(result[0] == '<h1>');
+```
+
+`myRegex` يجب أن يستخدم المطابقة الـ lazy
+
+```js
+assert(/[^\\][\*\+\?]\?/.test(myRegex));
+```
+
+`myRegex` لا يجب أن يتضمن السلسلة `h1`
+
+```js
+assert(!myRegex.source.match('h1'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let text = "<h1>Winter is coming</h1>";
+let myRegex = /<.*>/; // Change this line
+let result = text.match(myRegex);
+```
+
+# --solutions--
+
+```js
+let text = "<h1>Winter is coming</h1>";
+let myRegex = /<.*?>/; // Change this line
+let result = text.match(myRegex);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/find-more-than-the-first-match.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/find-more-than-the-first-match.md
new file mode 100644
index 00000000000..3c96e495948
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/find-more-than-the-first-match.md
@@ -0,0 +1,85 @@
+---
+id: 587d7db4367417b2b2512b93
+title: العثور على اكثر من التطابق الاول (Find More Than the First Match)
+challengeType: 1
+forumTopicId: 301342
+dashedName: find-more-than-the-first-match
+---
+
+# --description--
+
+حتى الآن، لم تتمكن من استخراج أو البحث عن نمط إلا مرة واحدة.
+
+```js
+let testStr = "Repeat, Repeat, Repeat";
+let ourRegex = /Repeat/;
+testStr.match(ourRegex);
+```
+
+هنا `match` سترجع `["Repeat"]`.
+
+للبحث عن نمط أو استخراجه أكثر من مرة، يمكنك استخدام global search flag: `g`.
+
+```js
+let repeatRegex = /Repeat/g;
+testStr.match(repeatRegex);
+```
+
+وهنا `match` ترجع القيمة `["Repeat", "Repeat", "Repeat"]`
+
+# --instructions--
+
+باستخدام الـ regex الآتي `starRegex`، ابحث عن واستخرج كلمتي `Twinkle` من الـ string الآتي `twinkleStar`.
+
+**ملاحظة**  
+يمكن أن يكون لديك العديد من الـ flags في الـ regex الخاص بك مثل `/search/gi`
+
+# --hints--
+
+يجب أن يستخدم الـ regex الخاص بك `starRegex` الـ global flag الآتي `g`
+
+```js
+assert(starRegex.flags.match(/g/).length == 1);
+```
+
+يجب أن يستخدم الـ regex الخاص بك`starRegex` الـ case insensitive flag الآتي `i`
+
+```js
+assert(starRegex.flags.match(/i/).length == 1);
+```
+
+يجب أن يتطابق التطابق مع تكراري الكلمة `Twinkle`
+
+```js
+assert(
+  result.sort().join() ==
+    twinkleStar
+      .match(/twinkle/gi)
+      .sort()
+      .join()
+);
+```
+
+نتيجة التطابق `result` الخاصة بك يجب أن تحتوي على عنصرين.
+
+```js
+assert(result.length == 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let twinkleStar = "Twinkle, twinkle, little star";
+let starRegex = /change/; // Change this line
+let result = twinkleStar; // Change this line
+```
+
+# --solutions--
+
+```js
+let twinkleStar = "Twinkle, twinkle, little star";
+let starRegex = /twinkle/gi;
+let result = twinkleStar.match(starRegex);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/find-one-or-more-criminals-in-a-hunt.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/find-one-or-more-criminals-in-a-hunt.md
new file mode 100644
index 00000000000..39caef83bbb
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/find-one-or-more-criminals-in-a-hunt.md
@@ -0,0 +1,108 @@
+---
+id: 587d7db7367417b2b2512b9c
+title: العثور علي مجرم واحد أو أكثر في مطاردة (Find One or More Criminals in a Hunt)
+challengeType: 1
+forumTopicId: 301343
+dashedName: find-one-or-more-criminals-in-a-hunt
+---
+
+# --description--
+
+حان الوقت للإيقاف المؤقت واختبار مهاراتك الكتابية الجديدة لـ regex. هربت مجموعة من المجرمين من السجن وهربوا بعيدا، لكنك لا تعرف عددهم. ومع ذلك، فإنك تعلم أنهم يبقون على مقربة من بعضهم البعض عندما يكونون حول أشخاص آخرين. أنت مسؤول عن العثور على جميع المجرمين فورا.
+
+إليك مثال لمراجعة كيفية القيام بذلك:
+
+يطابق الـ regex الآتي `/z+/` الحرف `z` عندما يظهر مرة أو أكثر على التوالي. وسيجد مطابقات في جميع الـ strings التالية:
+
+```js
+"z"
+"zzzzzz"
+"ABCzzzz"
+"zzzzABC"
+"abczzzzzzzzzzzzzzzzzzzzzabc"
+```
+
+لكنه لا يجد مطابقات في الـ strings التالية لأنه لا يوجد حرف `z`:
+
+```js
+""
+"ABC"
+"abcabc"
+```
+
+# --instructions--
+
+اكتب regex يجد مجرماً واحداً أو أكثر ضمن مجموعة من الناس الآخرين. ويمثّل المجرم بالحرف التالي `C`.
+
+# --hints--
+
+يجب أن يطابق الـ regex مع مجرم واحد (`C`) في الـ string الآتي `C`
+
+```js
+assert('C'.match(reCriminals) && 'C'.match(reCriminals)[0] == 'C');
+```
+
+يجب أن يطابق regex مع مجرمين (`CC`) في الـ string الآتي (`CC`
+
+```js
+assert('CC'.match(reCriminals) && 'CC'.match(reCriminals)[0] == 'CC');
+```
+
+يجب أن يطابق regex ثلاثة مجرمين (`CCC`) في `P1P5P4CCCcP2P6P3`.
+
+```js
+assert(
+  'P1P5P4CCCcP2P6P3'.match(reCriminals) &&
+    'P1P5P4CCCcP2P6P3'.match(reCriminals)[0] == 'CCC'
+);
+```
+
+يجب أن يطابق الـ regex خمسة مجرمين (`CCCCC`) في `P6P2P7P4P5CCCCCP3P1`
+
+```js
+assert(
+  'P6P2P7P4P5CCCCCP3P1'.match(reCriminals) &&
+    'P6P2P7P4P5CCCCCP3P1'.match(reCriminals)[0] == 'CCCCC'
+);
+```
+
+لا يجب أن يطابق regex أي مجرمين في الـ string الفارغ `""`
+
+```js
+reCriminals.lastIndex = 0;
+assert(!reCriminals.test(''));
+```
+
+لا يجب أن يطابق regex أي مجرمين في الـ string الآتي `P1P2P3`
+
+```js
+reCriminals.lastIndex = 0;
+assert(!reCriminals.test('P1P2P3'));
+```
+
+يجب ان يطابق الـ regex خمسين مجرم (`CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC`) في `P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3`.
+
+```js
+assert(
+  'P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3'.match(
+    reCriminals
+  ) &&
+    'P2P1P5P4CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCP3'.match(
+      reCriminals
+    )[0] == 'CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let reCriminals = /./; // Change this line
+```
+
+# --solutions--
+
+```js
+let reCriminals = /C+/; // Change this line
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/ignore-case-while-matching.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/ignore-case-while-matching.md
new file mode 100644
index 00000000000..2569210eee0
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/ignore-case-while-matching.md
@@ -0,0 +1,109 @@
+---
+id: 587d7db4367417b2b2512b91
+title: تجاهل الحالة أثناء المطابقة (Ignore Case While Matching)
+challengeType: 1
+forumTopicId: 301344
+dashedName: ignore-case-while-matching
+---
+
+# --description--
+
+حتى الآن، لقد نظرتم إلى regex للقيام بمطابقة حرفية من الـ strings. ولكن في بعض الأحيان قد ترغب في مطابقة الاختلافات في الحالة.
+
+Case و هي الحالة (او في بعض الاحيان letter case) هي الفرق بين uppercase letters و lowercase letters اي الاحرف الكبيرة و الاحرف الصغيرة. أمثلة للحروف الكبيرة هي `A` و `B` و `C`. أمثلة للحروف الصغيرة هي `a` و `b` و `c`.
+
+يمكنك مطابقة الحالتين باستخدام ما يسمى بالـ flag. هناك flags أخرى ولكن هنا سوف تركز على الـ flag الذي يتجاهل الـ case و رمزه كالآتي `i`. يمكنك استخدامه من خلال إلحاقه بـ regex. مثال على استخدام هذا الـ flag هو `/ignorecase/i`. هذا الـ regex يمكن أن يتطابق مع الـ strings الآتية `ignorecase` و `igNoreCase` و `IgnoreCase`.
+
+# --instructions--
+
+اكتب `fccRegex` لمطابقة `freeCodeCamp` بغض النظر عن حالته. لا ينبغي أن يتطابق regex مع أي اختصارات أو اختلافات مع المسافات.
+
+# --hints--
+
+يجب أن يطابق الـ regex الخاص بك `freeCodeCamp`
+
+```js
+fccRegex.lastIndex = 0; 
+assert(fccRegex.test('freeCodeCamp'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `FreeCodeCamp`
+
+```js
+fccRegex.lastIndex = 0;
+assert(fccRegex.test('FreeCodeCamp'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `FreecodeCamp`
+
+```js
+fccRegex.lastIndex = 0;
+assert(fccRegex.test('FreecodeCamp'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `FreeCodecamp`
+
+```js
+fccRegex.lastIndex = 0;
+assert(fccRegex.test('FreeCodecamp'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `Free Code Camp`
+
+```js
+fccRegex.lastIndex = 0;
+assert(!fccRegex.test('Free Code Camp'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `FreeCOdeCamp`
+
+```js
+fccRegex.lastIndex = 0;
+assert(fccRegex.test('FreeCOdeCamp'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `FCC`
+
+```js
+fccRegex.lastIndex = 0;
+assert(!fccRegex.test('FCC'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `FrEeCoDeCamp`
+
+```js
+fccRegex.lastIndex = 0;
+assert(fccRegex.test('FrEeCoDeCamp'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `FrEeCodECamp`
+
+```js
+fccRegex.lastIndex = 0;
+assert(fccRegex.test('FrEeCodECamp'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `FReeCodeCAmp`
+
+```js
+fccRegex.lastIndex = 0;
+assert(fccRegex.test('FReeCodeCAmp'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let myString = "freeCodeCamp";
+let fccRegex = /change/; // Change this line
+let result = fccRegex.test(myString);
+```
+
+# --solutions--
+
+```js
+let myString = "freeCodeCamp";
+let fccRegex = /freecodecamp/i; // Change this line
+let result = fccRegex.test(myString);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-a-literal-string-with-different-possibilities.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-a-literal-string-with-different-possibilities.md
new file mode 100644
index 00000000000..2ea80cd2c00
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-a-literal-string-with-different-possibilities.md
@@ -0,0 +1,90 @@
+---
+id: 587d7db4367417b2b2512b90
+title: طابق سلسلة حرفية (Literal String) مع احتمالات مختلفة
+challengeType: 1
+forumTopicId: 301345
+dashedName: match-a-literal-string-with-different-possibilities
+---
+
+# --description--
+
+باستخدام regexes مثل `/coding/`، يمكنك البحث عن النمط `coding` في سلسلة (string) أخرى.
+
+هذا جيد للبحث عن سلسلة (string) واحدة، لكنه يقتصر على نمط واحد فقط. يمكنك البحث عن أنماط متعددة باستخدام `alternation` أو رمز `OR` التالي: `|`.
+
+هذا المشغل يطابق الأنماط قبله أو بعده. على سبيل المثال، إذا كنت ترغب في مطابقة السلاسل (strings) باسم `yes` أو `no`، تريد regex إن يكون `/yes|no/`.
+
+يمكنك أيضا البحث عن أكثر من نمطين فقط. يمكنك القيام بذلك عن طريق إضافة المزيد من الأنماط مع المزيد من رموز `OR` الذين يفصلونهم، مثل `/yes|no|maybe/`.
+
+# --instructions--
+
+أكمل الـ regex الآتي `petRegex` لمطابقة الحيوانات الأليفة `dog`، `cat`، `bird`، او `fish`.
+
+# --hints--
+
+الـ regex الآتي `petRegex` يجب أن يرجع `true` للسلسلة `John has a pet dog.`
+
+```js
+petRegex.lastIndex = 0;
+assert(petRegex.test('John has a pet dog.'));
+```
+
+الـ regexا لآتي `petRegex` يجب أن يرجع `false` للسلسلة `Emma has a pet rock.`
+
+```js
+petRegex.lastIndex = 0;
+assert(!petRegex.test('Emma has a pet rock.'));
+```
+
+الـ regex الآتي `petRegex` يجب أن يرجع `true` للسلسلة `Emma has a pet bird.`
+
+```js
+petRegex.lastIndex = 0;
+assert(petRegex.test('Emma has a pet bird.'));
+```
+
+الـ regex الآتي `petRegex` يجب أن يرجع `true` للسلسلة `Liz has a pet cat.`
+
+```js
+petRegex.lastIndex = 0;
+assert(petRegex.test('Liz has a pet cat.'));
+```
+
+الـ regex الآتي `petRegex` يجب أن يرجع `false` للسلسلة `Kara has a pet dolphin.`
+
+```js
+petRegex.lastIndex = 0;
+assert(!petRegex.test('Kara has a pet dolphin.'));
+```
+
+الـ regex الآتي `petRegex` يجب أن يرجع `true` للسلسلة `Alice has a pet fish.`
+
+```js
+petRegex.lastIndex = 0;
+assert(petRegex.test('Alice has a pet fish.'));
+```
+
+الـ regex الآتي `petRegex` يجب أن يرجع `false` للسلسلة `Jimmy has a pet computer.`
+
+```js
+petRegex.lastIndex = 0;
+assert(!petRegex.test('Jimmy has a pet computer.'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let petString = "James has a pet cat.";
+let petRegex = /change/; // Change this line
+let result = petRegex.test(petString);
+```
+
+# --solutions--
+
+```js
+let petString = "James has a pet cat.";
+let petRegex = /dog|cat|bird|fish/; // Change this line
+let result = petRegex.test(petString);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-letters-and-numbers.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-letters-and-numbers.md
new file mode 100644
index 00000000000..d1950508d8f
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-letters-and-numbers.md
@@ -0,0 +1,98 @@
+---
+id: 587d7db7367417b2b2512b9f
+title: مطابقة جميع الحروف والأرقام (Match All Letters and Numbers)
+challengeType: 1
+forumTopicId: 301346
+dashedName: match-all-letters-and-numbers
+---
+
+# --description--
+
+باستخدام character classes ، كنت قادرا على البحث عن جميع الأحرف الأبجدية مع `[a-z]`. هذا النوع منcharacter class شائع بما فيه الكفاية بحيث يكون هناك اختصار له، على الرغم من أنه يتضمن بعض الأحرف الإضافية أيضا.
+
+أقرب حرف في جافا سكريبت لمطابقة الأبجدية هو `\w`. هذا الاختصار يعادل `[A-Za-z0-9_]`. Character class هذه تتطابق مع الأحرف الكبيرة والاحرف الصغيرة بالإضافة إلى الأرقام. ملاحظة، تشمل character class هذه أيضا رمز الـ underscore (`_`).
+
+```js
+let longHand = /[A-Za-z0-9_]+/;
+let shortHand = /\w+/;
+let numbers = "42";
+let varNames = "important_var";
+longHand.test(numbers);
+shortHand.test(numbers);
+longHand.test(varNames);
+shortHand.test(varNames);
+```
+
+جميع هذه الاستدعائات `test` الأربعة سترجع `true`.
+
+Character classes هذه معروفة أيضًا باسم <dfn>shorthand character classes</dfn>.
+
+# --instructions--
+
+استخدم shorthand character class الآتي `\w` لحساب عدد الأحرف الأبجدية والارقام في مختلف الاقتباسات والـ strings.
+
+# --hints--
+
+يجب أن يستخدم regex الخاص بك الـ global flag.
+
+```js
+assert(alphabetRegexV2.global);
+```
+
+يجب أن يستخدم regex الخاص بك الرمز `\w` لمطابقة جميع الحروف الابجدية و الارقام.
+
+```js
+assert(/\\w/.test(alphabetRegexV2.source));
+```
+
+يجب أن يجد الـ regex الخاص بك 31 رمزا أبجديًا او رقميًا في الـ string الآتي `The five boxing wizards jump quickly.`
+
+```js
+assert(
+  'The five boxing wizards jump quickly.'.match(alphabetRegexV2).length === 31
+);
+```
+
+يجب أن يجد الـ regex الخاص بك 32 رمزا أبجديًا او رقميًا في الـ string الآتي `Pack my box with five dozen liquor jugs.`
+
+```js
+assert(
+  'Pack my box with five dozen liquor jugs.'.match(alphabetRegexV2).length ===
+    32
+);
+```
+
+يجب أن يجد الـ regex الخاص بك 30 رمزا أبجديًا او رقميًا في الـ string الآتي `How vexingly quick daft zebras jump!`
+
+```js
+assert(
+  'How vexingly quick daft zebras jump!'.match(alphabetRegexV2).length === 30
+);
+```
+
+يجب أن يجد الـ regex الخاص بك 36 رمزا أبجديًا او رقميًا في الـ string الآتي `123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.`
+
+```js
+assert(
+  '123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.'.match(alphabetRegexV2)
+    .length === 36
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let quoteSample = "The five boxing wizards jump quickly.";
+let alphabetRegexV2 = /change/; // Change this line
+let result = quoteSample.match(alphabetRegexV2).length;
+```
+
+# --solutions--
+
+```js
+let quoteSample = "The five boxing wizards jump quickly.";
+let alphabetRegexV2 = /\w/g; // Change this line
+let result = quoteSample.match(alphabetRegexV2).length;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-non-numbers.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-non-numbers.md
new file mode 100644
index 00000000000..186f58c5e1d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-non-numbers.md
@@ -0,0 +1,85 @@
+---
+id: 587d7db8367417b2b2512ba1
+title: مطابقة جميع غير الأرقام (Match All Non-Numbers)
+challengeType: 1
+forumTopicId: 301347
+dashedName: match-all-non-numbers
+---
+
+# --description--
+
+أظهر التحدي الأخير كيفية البحث عن الأرقام باستخدام الاختصار `\d` مع حرف صغير `d`. يمكنك أيضا البحث عن غير أرقام (non-digits) باستخدام اختصار مماثل يستخدم حرف كبير `D` بدلا من ذلك.
+
+الاختصار للبحث عن رموز ليست أرقام هو `\D`. هذا يساوي الـ character class الآتي `[^0-9]`، والذي يبحث عن رمز واحد ليس رقما بين الصفر و التاسعة.
+
+# --instructions--
+
+استخدم shorthand character class لغير الأرقام `\D` لحساب عدد غير الأرقام (non-digits) في عناوين الأفلام.
+
+# --hints--
+
+يجب أن يستخدم الـ regex الخاص بك رمز الاختصار (shortcut character) لمطابقة الرموز التي ليست أرقام (non-digit characters)
+
+```js
+assert(/\\D/.test(noNumRegex.source));
+```
+
+يجب أن يستخدم regex الخاص بك الـ global flag.
+
+```js
+assert(noNumRegex.global);
+```
+
+يجب أن لا يجد regex الخاص بك أي أرقام في السلسلة `9`.
+
+```js
+assert('9'.match(noNumRegex) == null);
+```
+
+يجب على regex الخاص بك أن يجد 6 رموز ليست أرقام، في السلسلة `Catch 22`.
+
+```js
+assert('Catch 22'.match(noNumRegex).length == 6);
+```
+
+يجب على regex الخاص بك أن يجد 11 رموز ليست أرقام، في السلسلة `101 Dalmatians`.
+
+```js
+assert('101 Dalmatians'.match(noNumRegex).length == 11);
+```
+
+يجب على regex الخاص بك أن يجد 15 رموز ليست أرقام، في السلسلة `One, Two, Three`.
+
+```js
+assert('One, Two, Three'.match(noNumRegex).length == 15);
+```
+
+يجب على regex الخاص بك أن يجد 12 رموز ليست أرقام، في السلسلة `21 Jump Street`.
+
+```js
+assert('21 Jump Street'.match(noNumRegex).length == 12);
+```
+
+يجب على regex الخاص بك أن يجد 17 رموز ليست أرقام، في السلسلة `2001: A Space Odyssey`.
+
+```js
+assert('2001: A Space Odyssey'.match(noNumRegex).length == 17);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let movieName = "2001: A Space Odyssey";
+let noNumRegex = /change/; // Change this line
+let result = movieName.match(noNumRegex).length;
+```
+
+# --solutions--
+
+```js
+let movieName = "2001: A Space Odyssey";
+let noNumRegex = /\D/g; // Change this line
+let result = movieName.match(noNumRegex).length;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-numbers.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-numbers.md
new file mode 100644
index 00000000000..c436ed04e1a
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-all-numbers.md
@@ -0,0 +1,85 @@
+---
+id: 5d712346c441eddfaeb5bdef
+title: مطابقة جميع الأرقام (Match All Numbers)
+challengeType: 1
+forumTopicId: 18181
+dashedName: match-all-numbers
+---
+
+# --description--
+
+لقد تعلمت اختصارات لأنماط string شائعة مثل الأبجدية العددية (alphanumerics). نمط شائع آخر هو البحث عن أرقام فقط.
+
+الاختصار للبحث عن الأرقام هو `\d`، مع حرف صغير `d`. هذا يساوي الـ character class الآتي `[0-9]`، والذي يبحث عن رقم واحد بين الصفر و التاسعة.
+
+# --instructions--
+
+استخدم shorthand character class الآتي `\d` لحساب عدد الأرقام في عناوين الأفلام. ولا تحسب الأرقام المكتوبة ("six" بدلاً من 6).
+
+# --hints--
+
+يجب أن يستخدم الـ regex الخاص بك رمز الاختصار (shortcut character) لمطابقة الأرقام
+
+```js
+assert(/\\d/.test(numRegex.source));
+```
+
+يجب أن يستخدم regex الخاص بك الـ global flag.
+
+```js
+assert(numRegex.global);
+```
+
+يجب أن يجد الـ regex الخاص بك رقم واحد في السلسلة `9`.
+
+```js
+assert('9'.match(numRegex).length == 1);
+```
+
+يجب على regex الخاص بك أن يجد رقمان، في السلسلة `Catch 22`.
+
+```js
+assert('Catch 22'.match(numRegex).length == 2);
+```
+
+يجب على regex الخاص بك أن يجد 3 أرقام، في السلسلة `101 Dalmatians`.
+
+```js
+assert('101 Dalmatians'.match(numRegex).length == 3);
+```
+
+يجب على regex الخاص بك أن لا يجد أرقام، في السلسلة `One, Two, Three`.
+
+```js
+assert('One, Two, Three'.match(numRegex) == null);
+```
+
+يجب على regex الخاص بك أن يجد رقمان، في السلسلة `21 Jump Street`.
+
+```js
+assert('21 Jump Street'.match(numRegex).length == 2);
+```
+
+يجب على regex الخاص بك أن يجد 4 أرقام، في السلسلة `2001: A Space Odyssey`.
+
+```js
+assert('2001: A Space Odyssey'.match(numRegex).length == 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let movieName = "2001: A Space Odyssey";
+let numRegex = /change/; // Change this line
+let result = movieName.match(numRegex).length;
+```
+
+# --solutions--
+
+```js
+let movieName = "2001: A Space Odyssey";
+let numRegex = /\d/g; // Change this line
+let result = movieName.match(numRegex).length;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-anything-with-wildcard-period.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-anything-with-wildcard-period.md
new file mode 100644
index 00000000000..f39787a62ae
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-anything-with-wildcard-period.md
@@ -0,0 +1,119 @@
+---
+id: 587d7db5367417b2b2512b94
+title: Match Anything with Wildcard Period
+challengeType: 1
+forumTopicId: 301348
+dashedName: match-anything-with-wildcard-period
+---
+
+# --description--
+
+في بعض الأحيان لن (أو لا تحتاج إلى) معرفة الأحرف بالضبط في أنماطك. التفكير في كل الكلمات المطابقة، على سبيل المثال لخطأ إملائي، سيستغرق وقتًا طويلاً. لحسن الحظ، يمكنك توفير الوقت باستخدام الـ wildcard character الآتي: `.`
+
+الـ wildcard character الآتي `.` سيطابق اي حرف واحد. يدعى الـ wildcard أيضًا `dot` و `period`. يمكنك استخدام الـ wildcard تماما مثل أي رمز آخر في regex. على سبيل المثال، إذا كنت ترغب في مطابقة `hug` و `huh` و `hut` و `hum`، يمكنك استخدام الـ regex الآتي `/hu./` لمطابقة جميع الكلمات الأربعة.
+
+```js
+let humStr = "I'll hum a song";
+let hugStr = "Bear hug";
+let huRegex = /hu./;
+huRegex.test(humStr);
+huRegex.test(hugStr);
+```
+
+كل من هذه الاستدعائات لـ `test` ستعيد `true`.
+
+# --instructions--
+
+أكمل الـ regex الآتي `unRegex` بحيث يتطابق مع السلاسل `run` و `sun` و `fun` و `pun` و `nun` و `bun`. يجب أن يستخدم الـ regex الخاص بك الـ wildcard character.
+
+# --hints--
+
+يجب أن يستخدم الكود الخاص بك دالة `.test()`.
+
+```js
+assert(code.match(/\.test\(.*\)/));
+```
+
+يجب عليك استخدام الـ wildcard character في الـ regex الخاص بك `unRegex`
+
+```js
+assert(/\./.test(unRegex.source));
+```
+
+`unRegex` يجب أن يطابق `run` في السلسلة `Let us go on a run.`
+
+```js
+unRegex.lastIndex = 0;
+assert(unRegex.test('Let us go on a run.'));
+```
+
+`unRegex` يجب أن يطابق `sun` في السلسلة `The sun is out today.`
+
+```js
+unRegex.lastIndex = 0;
+assert(unRegex.test('The sun is out today.'));
+```
+
+`unRegex` يجب أن يطابق `fun` في السلسلة `Coding is a lot of fun.`
+
+```js
+unRegex.lastIndex = 0;
+assert(unRegex.test('Coding is a lot of fun.'));
+```
+
+`unRegex` يجب أن يطابق `pun` في السلسلة `Seven days without a pun makes one weak.`
+
+```js
+unRegex.lastIndex = 0;
+assert(unRegex.test('Seven days without a pun makes one weak.'));
+```
+
+`unRegex` يجب أن يطابق `nun` في السلسلة `One takes a vow to be a nun.`
+
+```js
+unRegex.lastIndex = 0;
+assert(unRegex.test('One takes a vow to be a nun.'));
+```
+
+`unRegex` يجب أن يطابق `bun` في السلسلة `She got fired from the hot dog stand for putting her hair in a bun.`
+
+```js
+unRegex.lastIndex = 0;
+assert(
+  unRegex.test(
+    'She got fired from the hot dog stand for putting her hair in a bun.'
+  )
+);
+```
+
+`unRegex` يجب أن لا يطابق السلسلة `There is a bug in my code.`
+
+```js
+unRegex.lastIndex = 0;
+assert(!unRegex.test('There is a bug in my code.'));
+```
+
+`unRegex` يجب أن لا يطابق السلسلة `Catch me if you can.`
+
+```js
+unRegex.lastIndex = 0;
+assert(!unRegex.test('Catch me if you can.'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let exampleStr = "Let's have fun with regular expressions!";
+let unRegex = /change/; // Change this line
+let result = unRegex.test(exampleStr);
+```
+
+# --solutions--
+
+```js
+let exampleStr = "Let's have fun with regular expressions!";
+let unRegex = /.un/; // Change this line
+let result = unRegex.test(exampleStr);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-beginning-string-patterns.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-beginning-string-patterns.md
new file mode 100644
index 00000000000..ec746b7dd9e
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-beginning-string-patterns.md
@@ -0,0 +1,73 @@
+---
+id: 587d7db7367417b2b2512b9d
+title: Match Beginning String Patterns
+challengeType: 1
+forumTopicId: 301349
+dashedName: match-beginning-string-patterns
+---
+
+# --description--
+
+أظهرت التحديات السابقة أنه يمكن استخدام الـ regular expressions للبحث عن عدد من التطابقات. وهي تستخدم أيضا للبحث عن أنماط في مواقع محددة في ال strings.
+
+وفي تحد سابق، لقد استخدمت رمز الـ caret character الآتي (`^`) داخل مجموعة رموز لإنشاء negated character set في شكل `[^thingsThatWillNotBeMatched]`. خارج مجموعة الرموز، يتم استخدام الـ caret للبحث عن أنماط في بداية ال strings.
+
+```js
+let firstString = "Ricky is first and can be found.";
+let firstRegex = /^Ricky/;
+firstRegex.test(firstString);
+let notFirst = "You can't find Ricky now.";
+firstRegex.test(notFirst);
+```
+
+أول استدعاء لـ `test` سيعيد `true` والثاني سيعيد `false`.
+
+# --instructions--
+
+استخدم رمز الـ caret في regex لإيجاد `Cal` فقط في بداية السلسلة `rickyAndCal`.
+
+# --hints--
+
+يجب أن يبحث regex الخاص بك عن السلسلة `Cal` بحرف كبير (capital).
+
+```js
+assert(calRegex.source == '^Cal');
+```
+
+لا يجب أن يستخدم الـ regex الخاص بك أي flags.
+
+```js
+assert(calRegex.flags == '');
+```
+
+يجب أن يطابق الـ regex الخاص بك السلسلة `Cal` في بداية السلسلة.
+
+```js
+calRegex.lastIndex = 0;
+assert(calRegex.test('Cal and Ricky both like racing.'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك السلسلة `Cal` في وسط السلسلة.
+
+```js
+calRegex.lastIndex = 0;
+assert(!calRegex.test('Ricky and Cal both like racing.'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let rickyAndCal = "Cal and Ricky both like racing.";
+let calRegex = /change/; // Change this line
+let result = calRegex.test(rickyAndCal);
+```
+
+# --solutions--
+
+```js
+let rickyAndCal = "Cal and Ricky both like racing.";
+let calRegex = /^Cal/; // Change this line
+let result = calRegex.test(rickyAndCal);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-one-or-more-times.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-one-or-more-times.md
new file mode 100644
index 00000000000..14837e7498f
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-one-or-more-times.md
@@ -0,0 +1,59 @@
+---
+id: 587d7db6367417b2b2512b99
+title: Match Characters that Occur One or More Times
+challengeType: 1
+forumTopicId: 301350
+dashedName: match-characters-that-occur-one-or-more-times
+---
+
+# --description--
+
+في بعض الأحيان، تحتاج إلى مطابقة رمز (أو مجموعة من الرموز) يظهر مرة أو أكثر على التوالي. وهذا يعني أنه يحدث مرة واحدة على الأقل، ويمكن تكراره.
+
+يمكنك استخدام رمز `+` للتحقق مما إذا كان الأمر كذلك. تذكر ، يجب أن يكون الرمز أو النمط موجودًا على التوالي. وهذا يعني أن الرمز يجب أن يتكرر واحدًا تلو الآخر.
+
+على سبيل المثال، `/a+/g` سيجد تطابق واحد في `abc` وسيعيد `["a"]`. بسبب `+`، سوف يجد أيضا مطابقة واحدة في `aabc` ويعيد `["aa"]`.
+
+إذا كان بدلاً من ذلك يفحص السلسلة `abab`، فسيتم العثور على تطابقين وإرجاع `["a", "a"]` لأن احرف `a` ليست متتالية - هناك `b` بينها. أخيرا، بما أنه لا يوجد `a` في السلسلة `bcd`، فإنه لن يجد مطابقة.
+
+# --instructions--
+
+تريد العثور على مطابقات عندما يحدث الحرف `s` مرة أو أكثر في `Mississippi`. اكتب regex يستخدم علامة `+`.
+
+# --hints--
+
+يجب أن يستخدم `myRegex` علامة `+` لمطابقة حرف `s` واحد أو أكثر.
+
+```js
+assert(/\+/.test(myRegex.source));
+```
+
+يجب أن يطابق الـ regex الخاص بك `myRegex` عنصرين.
+
+```js
+assert(result.length == 2);
+```
+
+متغير `result` يجب أن يكون array مع تطابقين من `ss`
+
+```js
+assert(result[0] == 'ss' && result[1] == 'ss');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let difficultSpelling = "Mississippi";
+let myRegex = /change/; // Change this line
+let result = difficultSpelling.match(myRegex);
+```
+
+# --solutions--
+
+```js
+let difficultSpelling = "Mississippi";
+let myRegex = /s+/g; // Change this line
+let result = difficultSpelling.match(myRegex);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-zero-or-more-times.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-zero-or-more-times.md
new file mode 100644
index 00000000000..6d8fb095bd5
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-characters-that-occur-zero-or-more-times.md
@@ -0,0 +1,96 @@
+---
+id: 587d7db6367417b2b2512b9a
+title: تطابق الرموز التي تحدث صفرًا أو أكثر من المرات (Match Characters that Occur Zero or More Times)
+challengeType: 1
+forumTopicId: 301351
+dashedName: match-characters-that-occur-zero-or-more-times
+---
+
+# --description--
+
+استخدم التحدي الأخير علامة `+` للبحث عن الرموز التي تحدث مرة أو أكثر. هناك أيضًا خيار يطابق الرموز التي تحدث صفرًا أو أكثر من المرات.
+
+الرمز الذي يقوم بذلك هو النجمة: `*`.
+
+```js
+let soccerWord = "gooooooooal!";
+let gPhrase = "gut feeling";
+let oPhrase = "over the moon";
+let goRegex = /go*/;
+soccerWord.match(goRegex);
+gPhrase.match(goRegex);
+oPhrase.match(goRegex);
+```
+
+بالترتيب، ستعيد الاستدعائات الثلاث لـ `match` القيم `["goooooooo"]` و `["g"]` و `null`.
+
+# --instructions--
+
+من أجل هذا التحدي، تم تهيئة `chewieQuote` كسلسلة `Aaaaaaaaaaaaaaaarrrgh!` خلف الكواليس. قم بإنشاء حرف `chewieRegex` الذي يستخدم الرمز `*` لمطابقة حرف كبير `A` يتبعه على الفور صفر أو أكثر من الأحرف الصغيرة `a` في `chewieQuote`. لا يحتاج regex الخاص بك إلى ال flags أو character classes، ولا ينبغي أن يتطابق مع أي من الاقتباسات الأخرى.
+
+# --hints--
+
+يجب أن يستخدم `chewieRegex` رمز `*` لمطابقة صفر أو أكثر من حرف `a`.
+
+```js
+assert(/\*/.test(chewieRegex.source));
+```
+
+يجب أن يطابق regex الخاص بك السلسلة `A` في `chewieQuote`.
+
+```js
+assert(result[0][0] === 'A');
+```
+
+يجب أن يطابق regex الخاص بك السلسلة `Aaaaaaaaaaaaaaaa` في `chewieQuote`.
+
+```js
+assert(result[0] === 'Aaaaaaaaaaaaaaaa');
+```
+
+يجب أن يطابق `chewieRegex` الخاص بك 16 رمزا في `chewieQuote`.
+
+```js
+assert(result[0].length === 16);
+```
+
+لا يجب أن يطابق الـ regex مع أي رمز في السلسلة `He made a fair move. Screaming about it can't help you.`
+
+```js
+assert(
+  !"He made a fair move. Screaming about it can't help you.".match(chewieRegex)
+);
+```
+
+لا يجب أن يطابق الـ regex مع أي رمز في السلسلة `Let him have it. It's not wise to upset a Wookiee.`
+
+```js
+assert(
+  !"Let him have it. It's not wise to upset a Wookiee.".match(chewieRegex)
+);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+const chewieQuote = "Aaaaaaaaaaaaaaaarrrgh!";
+```
+
+## --seed-contents--
+
+```js
+// Only change code below this line
+let chewieRegex = /change/; // Change this line
+// Only change code above this line
+
+let result = chewieQuote.match(chewieRegex);
+```
+
+# --solutions--
+
+```js
+  let chewieRegex = /Aa*/;
+  let result = chewieQuote.match(chewieRegex);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-ending-string-patterns.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-ending-string-patterns.md
new file mode 100644
index 00000000000..097801f8194
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-ending-string-patterns.md
@@ -0,0 +1,66 @@
+---
+id: 587d7db7367417b2b2512b9e
+title: Match Ending String Patterns
+challengeType: 1
+forumTopicId: 301352
+dashedName: match-ending-string-patterns
+---
+
+# --description--
+
+في التحدي الأخير، تعلمت استخدام رمز الـ caret للبحث عن أنماط في بداية ال strings. وهناك أيضا طريقة للبحث عن أنماط في نهاية ال strings.
+
+يمكنك البحث في نهاية ال strings باستخدام رمز إشارة الدولار `$` في نهاية الـ regex.
+
+```js
+let theEnding = "This is a never ending story";
+let storyRegex = /story$/;
+storyRegex.test(theEnding);
+let noEnding = "Sometimes a story will have to end";
+storyRegex.test(noEnding);
+```
+
+أول استدعاء لـ `test` سيعيد `true` والثاني سيعيد `false`.
+
+# --instructions--
+
+استخدم رمز الدولار (`$`) لمطابقة السلسلة `caboose` في نهاية السلسة `caboose`.
+
+# --hints--
+
+يجب عليك البحث عن `caboose` باستخدام علامة الدولار `$` في الـ regex.
+
+```js
+assert(lastRegex.source == 'caboose$');
+```
+
+لا يجب أن يستخدم الـ regex الخاص بك أي flags.
+
+```js
+assert(lastRegex.flags == '');
+```
+
+يجب عليك مطابقة `caboose` في نهاية السلسلة `The last car on a train is the caboose`
+
+```js
+lastRegex.lastIndex = 0;
+assert(lastRegex.test('The last car on a train is the caboose'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let caboose = "The last car on a train is the caboose";
+let lastRegex = /change/; // Change this line
+let result = lastRegex.test(caboose);
+```
+
+# --solutions--
+
+```js
+let caboose = "The last car on a train is the caboose";
+let lastRegex = /caboose$/; // Change this line
+let result = lastRegex.test(caboose);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-everything-but-letters-and-numbers.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-everything-but-letters-and-numbers.md
new file mode 100644
index 00000000000..6614bb3720b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-everything-but-letters-and-numbers.md
@@ -0,0 +1,92 @@
+---
+id: 587d7db8367417b2b2512ba0
+title: مطابقة كل شيء ما عدا الحروف والأرقام
+challengeType: 1
+forumTopicId: 301353
+dashedName: match-everything-but-letters-and-numbers
+---
+
+# --description--
+
+لقد تعلمت أنه يمكنك استخدام اختصار لمطابقة الحروف و الارقام `[A-Za-z0-9_]` باستخدام `\w`. نمط طبيعي قد ترغب في البحث عنه و هو ما عكس الحروف و الأرقام.
+
+يمكنك البحث عن العكس الـ `\w` باستخدام `\W`. ملاحظة: النمط المعاكس يستخدم حرف كبير. هذا الاختصار هو نفسه مثل `[^A-Za-z0-9_]`.
+
+```js
+let shortHand = /\W/;
+let numbers = "42%";
+let sentence = "Coding!";
+numbers.match(shortHand);
+sentence.match(shortHand);
+```
+
+ستعيد أول `match` القيمة `["%"]` والثانية ستعيد `["!"]`.
+
+# --instructions--
+
+استخدم الـ shorthand character class الآتي `\W` لحساب عدد الأحرف الأبجدية والارقام في مختلف الاقتباسات والـ strings.
+
+# --hints--
+
+يجب أن يستخدم regex الخاص بك الـ global flag.
+
+```js
+assert(nonAlphabetRegex.global);
+```
+
+يجب أن يجد الـ regex الخاص بك 6 رموز لا أبجدية او رقمية في الـ string الآتي `The five boxing wizards jump quickly.`.
+
+```js
+assert(
+  'The five boxing wizards jump quickly.'.match(nonAlphabetRegex).length == 6
+);
+```
+
+يجب أن يستخدم regex الخاص بك shorthand character لمطابقة جميع الرموز غير الحروف الابجدية و الارقام.
+
+```js
+assert(/\\W/.test(nonAlphabetRegex.source));
+```
+
+يجب أن يجد الـ regex الخاص بك 8 رموز لا أبجدية او رقمية في الـ string الآتي `Pack my box with five dozen liquor jugs.`
+
+```js
+assert(
+  'Pack my box with five dozen liquor jugs.'.match(nonAlphabetRegex).length == 8
+);
+```
+
+يجب أن يجد الـ regex الخاص بك 6 رموز لا أبجدية او رقمية في الـ string الآتي `How vexingly quick daft zebras jump!`
+
+```js
+assert(
+  'How vexingly quick daft zebras jump!'.match(nonAlphabetRegex).length == 6
+);
+```
+
+يجب أن يجد الـ regex الخاص بك 6 رموز لا أبجدية او رقمية في الـ string الآتي `123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.`
+
+```js
+assert(
+  '123 456 7890 ABC def GHI jkl MNO pqr STU vwx YZ.'.match(nonAlphabetRegex)
+    .length == 12
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let quoteSample = "The five boxing wizards jump quickly.";
+let nonAlphabetRegex = /change/; // Change this line
+let result = quoteSample.match(nonAlphabetRegex).length;
+```
+
+# --solutions--
+
+```js
+let quoteSample = "The five boxing wizards_jump quickly.";
+let nonAlphabetRegex = /\W/g; // Change this line
+let result = quoteSample.match(nonAlphabetRegex).length;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-letters-of-the-alphabet.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-letters-of-the-alphabet.md
new file mode 100644
index 00000000000..7ba93546e57
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-letters-of-the-alphabet.md
@@ -0,0 +1,71 @@
+---
+id: 587d7db5367417b2b2512b96
+title: مطابقة الحروف الابجدية
+challengeType: 1
+forumTopicId: 301354
+dashedName: match-letters-of-the-alphabet
+---
+
+# --description--
+
+لقد رأيت كيف يمكنك استخدام <dfn>character sets</dfn> لتحديد مجموعة من الأحرف للمطابقة، لكن هذا يؤدي الي الكثير من الكتابة عندما تحتاج إلى مطابقة مجموعة كبيرة من الأحرف (على سبيل المثال، كل الحروف في الأبجدية). لحسن الحظ، هناك ميزة داخلية تجعل هذا قصير وبسيط.
+
+داخل character set، يمكنك تحديد مجموعة من الأحرف لتطابق باستخدام رمز الشَرطة: `-`.
+
+على سبيل المثال ، لمطابقة الأحرف الصغيرة `a` حتى `e` سوف تستخدم `[a-e]`.
+
+```js
+let catStr = "cat";
+let batStr = "bat";
+let matStr = "mat";
+let bgRegex = /[a-e]at/;
+catStr.match(bgRegex);
+batStr.match(bgRegex);
+matStr.match(bgRegex);
+```
+
+بالترتيب، ستعيد الاستدعائات الثلاث لـ `match` القيم `["cat"]` و `["bat"]`، و `null`.
+
+# --instructions--
+
+طابق جميع الأحرف في الـ string الآتي `quoteSample`.
+
+**ملاحظة**: تأكد من مطابقة الحروف الكبيرة والحروف الصغيرة.
+
+# --hints--
+
+يجب أن يطابق الـ regex الخاص بك <`alphabetRegex` ٣٥ عناصر.
+
+```js
+assert(result.length == 35);
+```
+
+يجب أن يستخدم الـ regex الخاص بك `alphabetRegex` الـ global flag.
+
+```js
+assert(alphabetRegex.flags.match(/g/).length == 1);
+```
+
+يجب أن يستخدم الـ regex الخاص بك `alphabetRegex` الـ case insensitive flag.
+
+```js
+assert(alphabetRegex.flags.match(/i/).length == 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let quoteSample = "The quick brown fox jumps over the lazy dog.";
+let alphabetRegex = /change/; // Change this line
+let result = alphabetRegex; // Change this line
+```
+
+# --solutions--
+
+```js
+let quoteSample = "The quick brown fox jumps over the lazy dog.";
+let alphabetRegex = /[a-z]/gi; // Change this line
+let result = quoteSample.match(alphabetRegex); // Change this line
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-literal-strings.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-literal-strings.md
new file mode 100644
index 00000000000..12e58822420
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-literal-strings.md
@@ -0,0 +1,74 @@
+---
+id: 587d7db3367417b2b2512b8f
+title: مطابقة السلاسل النصية (Match Literal Strings)
+challengeType: 1
+forumTopicId: 301355
+dashedName: match-literal-strings
+---
+
+# --description--
+
+في التحدي الأخير، بحثت عن كلمة `Hello` باستخدام regular expression الاتي `/Hello/`. هذا regex يبحث عن مطابقة حرفية في string الآتي `Hello`. إليك مثال آخر يبحث عن مطابقة حرفية في string الآتي `Kevin`:
+
+```js
+let testStr = "Hello, my name is Kevin.";
+let testRegex = /Kevin/;
+testRegex.test(testStr);
+```
+
+هذا الاختبار `test` سيرجع `true`.
+
+لن تتطابق أي أشكال أخرى من `Kevin`. على سبيل المثال، لن يتطابق الـ regex الاتي `/Kevin/` مع `kevin` أو `KEVIN`.
+
+```js
+let wrongRegex = /kevin/;
+wrongRegex.test(testStr);
+```
+
+هذا الاختبار `test` سيرجع `false`.
+
+والتحدي المستقبلي سيبين كيفية مطابقة تلك الأشكال الأخرى أيضا.
+
+# --instructions--
+
+أكمل regex الأتي `waldoRegex` للعثور على `"Waldo"` في السلسلة (string) النصية `waldoIsHiding` مع مطابقة حرفية.
+
+# --hints--
+
+إن regex الخاص بك `waldoRegex` يجب أن يجد string الآتي `Waldo`
+
+```js
+waldoRegex.lastIndex = 0;
+assert(waldoRegex.test(waldoIsHiding));
+```
+
+يَجِبُ ألاّ يبحث regex الخاص بك `waldoRegex` عن أي شئ أخر.
+
+```js
+waldoRegex.lastIndex = 0;
+assert(!waldoRegex.test('Somewhere is hiding in this text.'));
+```
+
+يجب عليك إجراء مطابقة حرفية للسلسلة (string) النصية باستخدام regex الخاص بك.
+
+```js
+assert(!/\/.*\/i/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let waldoIsHiding = "Somewhere Waldo is hiding in this text.";
+let waldoRegex = /search/; // Change this line
+let result = waldoRegex.test(waldoIsHiding);
+```
+
+# --solutions--
+
+```js
+let waldoIsHiding = "Somewhere Waldo is hiding in this text.";
+let waldoRegex = /Waldo/; // Change this line
+let result = waldoRegex.test(waldoIsHiding);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-non-whitespace-characters.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-non-whitespace-characters.md
new file mode 100644
index 00000000000..40497b2eaf7
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-non-whitespace-characters.md
@@ -0,0 +1,78 @@
+---
+id: 587d7db9367417b2b2512ba4
+title: مطابقة رموز ليست بمسافة فارغة (Match Non-Whitespace Characters)
+challengeType: 1
+forumTopicId: 18210
+dashedName: match-non-whitespace-characters
+---
+
+# --description--
+
+لقد تعلمت البحث عن الـ whitespace باستخدام `\s`، وهو حرف `s` صغير بمعني lowercase. يمكنك أيضًا البحث عن كل شيء باستثناء الـ whitespace.
+
+البحث عن whitespace باستخدام `\S`، وهو نسخة الحرف الكبير من الـ `s`. لن يتطابق هذا النمط الـ whitespace، و الـ carriage return و tab و form feed و new line. يمكنك أن تفكر فيها مثل مجموعة الرموز الآتية `[^ \r\t\f\n\v]`.
+
+```js
+let whiteSpace = "Whitespace. Whitespace everywhere!"
+let nonSpaceRegex = /\S/g;
+whiteSpace.match(nonSpaceRegex).length;
+```
+
+القيمة التي تم إرجاعها بواسطة دالة `.length` ستكون `32`.
+
+# --instructions--
+
+قم بتغيير الـ regex الآتي `countNonWhiteSpace` ليقوم بالبحث عن عدة رموز غير الـ whitespace في string.
+
+# --hints--
+
+يجب أن يستخدم regex الخاص بك الـ global flag.
+
+```js
+assert(countNonWhiteSpace.global);
+```
+
+يجب أن يستخدم regex الخاص بك الرمز `\S` لمطابقة جميع الرموز ماعدا الـ whitespace.
+
+```js
+assert(/\\S/.test(countNonWhiteSpace.source));
+```
+
+يجب أن يجد الـ regex ٣٥ رمز يكون ليس مسافة في الـ string الآتي `Men are from Mars and women are from Venus.`
+
+```js
+assert(
+  'Men are from Mars and women are from Venus.'.match(countNonWhiteSpace)
+    .length == 35
+);
+```
+
+يجب أن يجد الـ regex ٢٣ رمز يكون ليس مسافة في الـ string الآتي `Space: the final frontier.`
+
+```js
+assert('Space: the final frontier.'.match(countNonWhiteSpace).length == 23);
+```
+
+يجب أن يجد الـ regex ٢١ رمز يكون ليس مسافة في الـ string الآتي `MindYourPersonalSpace`
+
+```js
+assert('MindYourPersonalSpace'.match(countNonWhiteSpace).length == 21);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let sample = "Whitespace is important in separating words";
+let countNonWhiteSpace = /change/; // Change this line
+let result = sample.match(countNonWhiteSpace);
+```
+
+# --solutions--
+
+```js
+let sample = "Whitespace is important in separating words";
+let countNonWhiteSpace = /\S/g; // Change this line
+let result = sample.match(countNonWhiteSpace);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-numbers-and-letters-of-the-alphabet.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-numbers-and-letters-of-the-alphabet.md
new file mode 100644
index 00000000000..8f14b3c2425
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-numbers-and-letters-of-the-alphabet.md
@@ -0,0 +1,63 @@
+---
+id: 587d7db5367417b2b2512b97
+title: مطابقة أرقام وحروف الأبجدية (Match Numbers and Letters of the Alphabet)
+challengeType: 1
+forumTopicId: 301356
+dashedName: match-numbers-and-letters-of-the-alphabet
+---
+
+# --description--
+
+استخدام الشَرطة (`-`) لمطابقة مجموعة من الرموز لا يقتصر على الأحرف فقط. هي تعمل أيضا لمطابقة مجموعة من الأرقام.
+
+على سبيل المثال، `/[0-5]/` يطابق أي رقم بين `0` و `5`، يشمل `0` و `5`.
+
+ومن الممكن أيضا الجمع بين مجموعة من الأحرف والأرقام في character set واحدة.
+
+```js
+let jennyStr = "Jenny8675309";
+let myRegex = /[a-z0-9]/ig;
+jennyStr.match(myRegex);
+```
+
+# --instructions--
+
+قم بإنشاء regex واحد يتطابق مع مجموعة من الحروف بين `h` و `s`، ومجموعة من الأرقام بين `2` و `6`. تذكر أن تدرج الـ flags المناسبة في الـ regex.
+
+# --hints--
+
+يجب أن يطابق الـ regex الخاص بك `myRegex` ١٧ عنصر.
+
+```js
+assert(result.length == 17);
+```
+
+يجب أن يستخدم الـ regex الخاص بك `myRegex` الـ global flag.
+
+```js
+assert(myRegex.flags.match(/g/).length == 1);
+```
+
+يجب أن يستخدم الـ regex الخاص بك `myRegex` الـ case insensitive flag.
+
+```js
+assert(myRegex.flags.match(/i/).length == 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let quoteSample = "Blueberry 3.141592653s are delicious.";
+let myRegex = /change/; // Change this line
+let result = myRegex; // Change this line
+```
+
+# --solutions--
+
+```js
+let quoteSample = "Blueberry 3.141592653s are delicious.";
+let myRegex = /[h-s2-6]/gi; // Change this line
+let result = quoteSample.match(myRegex); // Change this line
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-character-with-multiple-possibilities.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-character-with-multiple-possibilities.md
new file mode 100644
index 00000000000..b8c50b627d7
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-character-with-multiple-possibilities.md
@@ -0,0 +1,85 @@
+---
+id: 587d7db5367417b2b2512b95
+title: مطابقة رمز فردي مع احتمالات متعددة (Match Single Character with Multiple Possibilities)
+challengeType: 1
+forumTopicId: 301357
+dashedName: match-single-character-with-multiple-possibilities
+---
+
+# --description--
+
+تعلمت كيفية مطابقة الأنماط الحرفية (`/literal/`) و wildcard character (`/./`). هذه هي أقصى درجات التعبيرات النمطية، حيث يجد احدهم التطابقات الدقيقة والآخر يطابق كل شيء. وهناك خيارات تمثل توازنا بين الطرفين.
+
+يمكنك البحث عن نمط حرفي مع بعض المرونة باستخدام <dfn>character classes</dfn>. تتيح لك Character classes تعريف مجموعة من الأحرف التي ترغب في تطابقها عن طريق وضعها داخل الأقواس المربعة (`[` و `]`).
+
+على سبيل المثال، تريد مطابقة `bag` و `big` و `bug` ولكن ليس `bog`. يمكنك إنشاء regex الآتي `/b[aiu]g/` للقيام بذلك. `[aiu]` هي character class التي ستطابق فقط الأحرف `a` او `i` او `u`.
+
+```js
+let bigStr = "big";
+let bagStr = "bag";
+let bugStr = "bug";
+let bogStr = "bog";
+let bgRegex = /b[aiu]g/;
+bigStr.match(bgRegex);
+bagStr.match(bgRegex);
+bugStr.match(bgRegex);
+bogStr.match(bgRegex);
+```
+
+بالترتيب، ستعيد الاستدعائات الاربعة لـ `match` القيم `["big"]` و `["bag"]` و `["bug"]` و `null`.
+
+# --instructions--
+
+استخدم character class مع حروف (`a`, `e`, `i`, `o`, `u`) في regex الخاص بك `vowelRegex` للعثور على جميع الـ vowels في السلسلة `quoteSample`.
+
+**ملاحظة**: تأكد من مطابقة الـ vowels الكبيرة و الصغيرة.
+
+# --hints--
+
+يجب أن تجد جميع الـ 25 vowels.
+
+```js
+assert(result.length == 25);
+```
+
+يجب أن يستخدم الـ regex الخاص بك `vowelRegex` الـ character class.
+
+```js
+assert(/\[.*\]/.test(vowelRegex.source));
+```
+
+يجب أن يستخدم الـ regex الخاص بك `vowelRegex` الـ global flag.
+
+```js
+assert(vowelRegex.flags.match(/g/).length == 1);
+```
+
+يجب أن يستخدم الـ regex الخاص بك `vowelRegex` الـ case insensitive flag.
+
+```js
+assert(vowelRegex.flags.match(/i/).length == 1);
+```
+
+لا يجب أن يتطابق regex مع أي consonants.
+
+```js
+assert(!/[b-df-hj-np-tv-z]/gi.test(result.join()));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let quoteSample = "Beware of bugs in the above code; I have only proved it correct, not tried it.";
+let vowelRegex = /change/; // Change this line
+let result = vowelRegex; // Change this line
+```
+
+# --solutions--
+
+```js
+let quoteSample = "Beware of bugs in the above code; I have only proved it correct, not tried it.";
+let vowelRegex = /[aeiou]/gi; // Change this line
+let result = quoteSample.match(vowelRegex); // Change this line
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-characters-not-specified.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-characters-not-specified.md
new file mode 100644
index 00000000000..532a0f9fd14
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-single-characters-not-specified.md
@@ -0,0 +1,57 @@
+---
+id: 587d7db6367417b2b2512b98
+title: مطابقة رموز فردية غير محددة (Match Single Characters Not Specified)
+challengeType: 1
+forumTopicId: 301358
+dashedName: match-single-characters-not-specified
+---
+
+# --description--
+
+حتى الآن، لقد أنشأت مجموعة من الرموز التي تريد أن تطابقها، ولكن يمكنك أيضا إنشاء مجموعة من الرموز التي لا ترد أن تطابقها. هذه الأنواع من مجموعات الرموز تسمى <dfn>negated character sets</dfn>.
+
+لإنشاء negated character set، يمكنك وضع رمز (`^`) بعد قوس الفتح وقبل الرموز التي لا ترد مطابقتها.
+
+على سبيل المثال، `/[^aeiou]/gi` يطابق جميع الرموز التي ليست حرف متحرك (vowel). لاحظ أن رموز مثل `.`, و`!`, و `[`, و`@`, و `/` والمسافة الفارغة (white space)، يتم مطابقتهم - تستبعد negated vowel character set أحرف العلة فقط (vowel characters).
+
+# --instructions--
+
+أنشئ regex واحد يطابق جميع الرموز التي ليست رقما أو vowel. تذكر أن تدرج الـ flags المناسبة في الـ regex.
+
+# --hints--
+
+يجب أن يطابق الـ regex الخاص بك `myRegex` ٩ عناصر.
+
+```js
+assert(result.length == 9);
+```
+
+يجب أن يستخدم الـ regex الخاص بك `myRegex` خاصية global flag.
+
+```js
+assert(myRegex.flags.match(/g/).length == 1);
+```
+
+يجب أن يستخدم الـ regex الخاص بك `myRegex` خاصية case insensitive flag.
+
+```js
+assert(myRegex.flags.match(/i/).length == 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let quoteSample = "3 blind mice.";
+let myRegex = /change/; // Change this line
+let result = myRegex; // Change this line
+```
+
+# --solutions--
+
+```js
+let quoteSample = "3 blind mice.";
+let myRegex = /[^0-9aeiou]/gi; // Change this line
+let result = quoteSample.match(myRegex); // Change this line
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-whitespace.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-whitespace.md
new file mode 100644
index 00000000000..591abca5c4c
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/match-whitespace.md
@@ -0,0 +1,77 @@
+---
+id: 587d7db8367417b2b2512ba3
+title: مطابقة الـ Whitespace (المسافة الفارغة)
+challengeType: 1
+forumTopicId: 301359
+dashedName: match-whitespace
+---
+
+# --description--
+
+غطت التحديات حتى الآن الرموز المطابقة للحروف الأبجدية والأرقام. يمكنك أيضا مطابقة الـ Whitespace (المسافة الفارغة) أو المسافات بين الحروف.
+
+يمكنك البحث عن الـ whitespace باستخدام `\s`، وهو حرف `s` صغير بمعني lowercase. هذا النمط لا يتطابق مع الـ whitespace فحسب، بل أيضا مع رموز الـ carriage return و tab و form feed و new line. يمكنك أن تفكر فيها مثل مجموعة الرموز الآتية `[ \r\t\f\n\v]`.
+
+```js
+let whiteSpace = "Whitespace. Whitespace everywhere!"
+let spaceRegex = /\s/g;
+whiteSpace.match(spaceRegex);
+```
+
+هذا الاستدعاء لـ `match` سيرجع الآتي `[" ", " "]`.
+# --instructions--
+
+قم بتغيير الـ regex الآتي `countWhiteSpace` ليقوم بالبحث عن عدة رموز للـ whitespace في string.
+
+# --hints--
+
+يجب أن يستخدم regex الخاص بك الـ global flag.
+
+```js
+assert(countWhiteSpace.global);
+```
+
+يجب أن يستخدم regex الخاص بك الرمز `\s` لمطابقة جميع رموز الـ whitespace.
+
+```js
+assert(/\\s/.test(countWhiteSpace.source));
+```
+
+يجب أن يجد الـ regex ثمانية مسافات في الـ string الآتي `Men are from Mars and women are from Venus.`
+
+```js
+assert(
+  'Men are from Mars and women are from Venus.'.match(countWhiteSpace).length ==
+    8
+);
+```
+
+يجب أن يجد الـ regex ثلاثة مسافات في الـ string الآتي `Space: the final frontier.`
+
+```js
+assert('Space: the final frontier.'.match(countWhiteSpace).length == 3);
+```
+
+يجب أن لا يجد الـ regex اي مسافات في الـ string الآتي `MindYourPersonalSpace`
+
+```js
+assert('MindYourPersonalSpace'.match(countWhiteSpace) == null);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let sample = "Whitespace is important in separating words";
+let countWhiteSpace = /change/; // Change this line
+let result = sample.match(countWhiteSpace);
+```
+
+# --solutions--
+
+```js
+let sample = "Whitespace is important in separating words";
+let countWhiteSpace = /\s/g;
+let result = sample.match(countWhiteSpace);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/positive-and-negative-lookahead.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/positive-and-negative-lookahead.md
new file mode 100644
index 00000000000..6ea15078c0e
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/positive-and-negative-lookahead.md
@@ -0,0 +1,122 @@
+---
+id: 587d7dba367417b2b2512ba9
+title: نظرة إيجابية وسلبية (Positive and Negative Lookahead)
+challengeType: 1
+forumTopicId: 301360
+dashedName: positive-and-negative-lookahead
+---
+
+# --description--
+
+<dfn>Lookahead</dfn> هي الأنماط التي تخبر جافا سكريبت بالبحث في الـ string الخاص بك للتحقق من الأنماط بداخله. يمكن أن يكون هذا مفيداً عندما تريد البحث عن أنماط متعددة في نفس الـ string.
+
+هناك نوعان من الـ lookaheads: الـ: <dfn>positive lookahead</dfn> و <dfn>negative lookahead</dfn>.
+
+Positive lookahead تنظر للتأكد من أن العنصر في نمط البحث متواجد، ولكن لن نطابقه في الواقع. يتم استخدام الـ positive lookahead كـ `(?=...)` حيث `...` هو الجزء المطلوب غير المتطابق.
+
+ومن ناحية أخرى، فإن الـ negative lookahead ستنظر للتأكد من عدم وجود عنصر في نمط البحث. يتم استخدام الـ negative lookahead كـ `(?!...)` حيث `...` هو النمط الذي لا تريد ان يكون متواجد. ويعاد ما تبقى من النمط إذا لم يكن جزء الـ negative lookahead موجودا.
+
+Lookaheads مربكة بعض الشيء ولكن بعض الأمثلة سوف تساعد.
+
+```js
+let quit = "qu";
+let noquit = "qt";
+let quRegex= /q(?=u)/;
+let qRegex = /q(?!u)/;
+quit.match(quRegex);
+noquit.match(qRegex);
+```
+
+هذان الاستدعائان لـ `match` سيرجعان `["q"]`.
+
+وهناك استخدام عملي أكثر للـ lookaheads يتمثل في فحص نمطين أو أكثر في string واحد. إليك مدقق كلمة مرور بسيط يبحث عن ما بين 3 و 6 أحرف ورقم واحد على الأقل:
+
+```js
+let password = "abc123";
+let checkPass = /(?=\w{3,6})(?=\D*\d)/;
+checkPass.test(password);
+```
+
+# --instructions--
+
+استخدم lookaheads في `pwRegex` لمطابقة كلمات المرور التي يزيد طولها عن 5 أحرف ولديها رقمان متتاليين.
+
+# --hints--
+
+يجب أن يستخدم الـ regex الخاص بك اثنين `lookaheads` يكونان positive.
+
+```js
+assert(pwRegex.source.match(/\(\?=.*?\)\(\?=.*?\)/) !== null);
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `astronaut`
+
+```js
+pwRegex.lastIndex = 0;
+assert(!pwRegex.test('astronaut'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `banan1`
+
+```js
+pwRegex.lastIndex = 0;
+assert(!pwRegex.test('banan1'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `bana12`
+
+```js
+pwRegex.lastIndex = 0;
+assert(pwRegex.test('bana12'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `abc123`
+
+```js
+pwRegex.lastIndex = 0;
+assert(pwRegex.test('abc123'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `12345`
+
+```js
+pwRegex.lastIndex = 0;
+assert(!pwRegex.test('12345'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `8pass99`
+
+```js
+pwRegex.lastIndex = 0;
+assert(pwRegex.test('8pass99'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `1a2bcde`
+
+```js
+pwRegex.lastIndex = 0;
+assert(!pwRegex.test('1a2bcde'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `astr1on11aut`
+
+```js
+pwRegex.lastIndex = 0;
+assert(pwRegex.test('astr1on11aut'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let sampleWord = "astronaut";
+let pwRegex = /change/; // Change this line
+let result = pwRegex.test(sampleWord);
+```
+
+# --solutions--
+
+```js
+let pwRegex =  /(?=\w{6})(?=\w*\d{2})/;
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/remove-whitespace-from-start-and-end.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/remove-whitespace-from-start-and-end.md
new file mode 100644
index 00000000000..d25e5f3bb03
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/remove-whitespace-from-start-and-end.md
@@ -0,0 +1,61 @@
+---
+id: 587d7dbb367417b2b2512bac
+title: إزالة Whitespace من البداية و النهاية (Remove Whitespace from Start and End)
+challengeType: 1
+forumTopicId: 301362
+dashedName: remove-whitespace-from-start-and-end
+---
+
+# --description--
+
+في بعض الأحيان لا تكون الـ whitespaces حول الـ strings مطلوبة ولكنها موجودة. المعالجة النموذجية للـ strings هي إزالة الـ whitespace في بدايتها ونهايتها.
+
+# --instructions--
+
+اكتب regex و استخدم الطرق المناسبة لإزالة الـ whitespace في بداية و نهاية الـ strings.
+
+**ملاحظة:** دالة `String.prototype.trim()` ستعمل هنا، ولكن ستحتاج إلى إكمال هذا التحدي باستخدام regular expressions.
+
+# --hints--
+
+`result` يجب أن تكون مساوية للـ string الآتي `Hello, World!`
+
+```js
+assert(result === 'Hello, World!');
+```
+
+يجب ألا يستخدم الحل الخاص بك دالة `String.prototype.trim()`.
+
+```js
+assert(!code.match(/\.?[\s\S]*?trim/));
+```
+
+متغير النتيجة `result` يجب ألا يتم تعيينه مباشرة إلى string
+
+```js
+assert(!code.match(/result\s*=\s*["'`].*?["'`]/));
+```
+
+لا ينبغي تغيير قيمة متغير `hello`.
+
+```js
+assert(hello === '   Hello, World!  ');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let hello = "   Hello, World!  ";
+let wsRegex = /change/; // Change this line
+let result = hello; // Change this line
+```
+
+# --solutions--
+
+```js
+let hello = "   Hello, World!  ";
+let wsRegex = /^(\s+)(.+[^\s])(\s+)$/;
+let result = hello.replace(wsRegex, '$2');
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/restrict-possible-usernames.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/restrict-possible-usernames.md
new file mode 100644
index 00000000000..fbe1cb6fbc9
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/restrict-possible-usernames.md
@@ -0,0 +1,136 @@
+---
+id: 587d7db8367417b2b2512ba2
+title: تقييد أسماء المستخدمين المحتملة (Restrict Possible Usernames)
+challengeType: 1
+forumTopicId: 301363
+dashedName: restrict-possible-usernames
+---
+
+# --description--
+
+يتم استخدام أسماء المستخدمين في كل مكان على الإنترنت. هم الذين يعطون للمستخدمين هوية فريدة علي مواقعهم المفضلة.
+
+تحتاج إلى التحقق من جميع أسماء المستخدمين في قاعدة البيانات. فيما يلي بعض القواعد البسيطة التي يتعين على المستخدمين اتباعها عند إنشاء اسم المستخدم الخاص بهم.
+
+1) يمكن أن تستخدم أسماء المستخدمين أحرف أبجدية و رقمية فقط.
+
+2) الأرقام في اسم المستخدم يجب أن تكون في النهاية. ويمكن أن يكون هناك رقما واحدا أو أكثر في النهاية. اسم المستخدم لا يمكن أن يبدأ برقم.
+
+3) يمكن أن تكون أحرف اسم المستخدم صغيرة وكبيرة.
+
+4) يجب أن يكون طول أسماء المستخدمين رمزين على الأقل. يمكن لاسم المستخدم المكون من حرفين استخدام الأحرف الأبجدية كرموز فقط.
+
+# --instructions--
+
+قم بتغيير الـ regex الآتي `userCheck` ليتناسب مع القيود المذكورة أعلاه.
+
+# --hints--
+
+يجب أن يطابق الـ regex الخاص بك `JACK`
+
+```js
+userCheck.lastIndex = 0;
+assert(userCheck.test('JACK'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `J`
+
+```js
+userCheck.lastIndex = 0;
+assert(!userCheck.test('J'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `Jo`
+
+```js
+userCheck.lastIndex = 0;
+assert(userCheck.test('Jo'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `Oceans11`
+
+```js
+userCheck.lastIndex = 0;
+assert(userCheck.test('Oceans11'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `RegexGuru`
+
+```js
+userCheck.lastIndex = 0;
+assert(userCheck.test('RegexGuru'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `007`
+
+```js
+userCheck.lastIndex = 0;
+assert(!userCheck.test('007'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `9`
+
+```js
+userCheck.lastIndex = 0;
+assert(!userCheck.test('9'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `A1`
+
+```js
+userCheck.lastIndex = 0;
+assert(!userCheck.test('A1'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `BadUs3rnam3`
+
+```js
+userCheck.lastIndex = 0;
+assert(!userCheck.test('BadUs3rnam3'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `Z97`
+
+```js
+userCheck.lastIndex = 0;
+assert(userCheck.test('Z97'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `c57bT3`
+
+```js
+userCheck.lastIndex = 0;
+assert(!userCheck.test('c57bT3'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `AB1`
+
+```js
+userCheck.lastIndex = 0;
+assert(userCheck.test('AB1'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `J%4`
+
+```js
+userCheck.lastIndex = 0;
+assert(!userCheck.test('J%4'))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let username = "JackOfAllTrades";
+let userCheck = /change/; // Change this line
+let result = userCheck.test(username);
+```
+
+# --solutions--
+
+```js
+let username = "JackOfAllTrades";
+const userCheck = /^[a-z]([0-9]{2,}|[a-z]+\d*)$/i;
+let result = userCheck.test(username);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md
new file mode 100644
index 00000000000..255d756788b
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/reuse-patterns-using-capture-groups.md
@@ -0,0 +1,115 @@
+---
+id: 587d7dbb367417b2b2512baa
+title: إعادة استخدام الأنماط باستخدام مجموعات التقاط (Reuse Patterns Using Capture Groups)
+challengeType: 1
+forumTopicId: 301364
+dashedName: reuse-patterns-using-capture-groups
+---
+
+# --description--
+
+لنقل أنك تريد مطابقة كلمة تتكرر عدة مرات كما هو الحال أدناه.
+
+```js
+let repeatStr = "row row row your boat";
+```
+
+يمكنك استخدام `/row row row/`,، ولكن ماذا إذا كنت لا تعرف الكلمة المتكررة؟ <dfn>Capture groups</dfn> يمكن استخدامها للعثور على الـ substrings المتكررة.
+
+يتم بناء الـ Capture groups عن طريق إرفاق نمط الـ regex الذي سيتم متابقطه بين قوسين. وفي هذه الحالة، الهدف هو التقاط كلمة تتكون من أحرف أبجدية و رقمية فستكون الـ capture group كالآتي `\w+` مرفقة بين قوسين: `/(\w+)/`.
+
+يتم حفظ الـ substring المطابق من قبل المجموعة إلى "متغير" مؤقتاً. والذي يمكن الوصول إليها داخل نفس الـ regex باستخدام backslash ورقم الـ capture group (كمثال `\1`). يتم ترقيم الـ Capture group بواسطة موقع الأقواس الافتتاحية (اليسار إلى اليمين)، بدءاً من 1.
+
+المثال أدناه يطابق كلمة تكرر ثلاث مرات مفصولة بمسافات:
+
+```js
+let repeatRegex = /(\w+) \1 \1/;
+repeatRegex.test(repeatStr); // Returns true
+repeatStr.match(repeatRegex); // Returns ["row row row", "row"]
+```
+
+سيؤدي استخدام دالة `.match()` على string إلى ارجاع array بداخله الـ substring المطابق، جنبا إلى جنب مع الـ captured groups الخاصين به.
+
+
+# --instructions--
+
+استخدم capture groups في `reRegex` لمطابقة string يتكون من نفس الرقم مكرر ثلاث مرات مفصولين بمسافات واحدة.
+
+# --hints--
+
+يجب على regex الخاص بك استخدام shorthand character class للأرقام.
+
+```js
+assert(reRegex.source.match(/\\d/));
+```
+
+يجب على regex الخاص بك إعادة استخدام capture group مرتين.
+
+```js
+assert(reRegex.source.match(/\\1|\\2/g).length >= 2);
+```
+
+يجب أن يطابق الـ regex الخاص بك `42 42 42`.
+
+```js
+reRegex.lastIndex = 0;
+assert(reRegex.test('42 42 42'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `100 100 100`.
+
+```js
+reRegex.lastIndex = 0;
+assert(reRegex.test('100 100 100'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `42 42 42 42`.
+
+```js
+assert.equal('42 42 42 42'.match(reRegex.source), null);
+```
+
+يجب أن لا يطابق الـ regex الخاص بك ` 42 42`.
+
+```js
+assert.equal('42 42'.match(reRegex.source), null);
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `101 102 103`.
+
+```js
+reRegex.lastIndex = 0;
+assert(!reRegex.test('101 102 103'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `1 2 3`.
+
+```js
+reRegex.lastIndex = 0;
+assert(!reRegex.test('1 2 3'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `10 10 10`.
+
+```js
+reRegex.lastIndex = 0;
+assert(reRegex.test('10 10 10'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let repeatNum = "42 42 42";
+let reRegex = /change/; // Change this line
+let result = reRegex.test(repeatNum);
+```
+
+# --solutions--
+
+```js
+let repeatNum = "42 42 42";
+let reRegex = /^(\d+)\s\1\s\1$/;
+let result = reRegex.test(repeatNum);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/specify-exact-number-of-matches.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/specify-exact-number-of-matches.md
new file mode 100644
index 00000000000..35f0de402b8
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/specify-exact-number-of-matches.md
@@ -0,0 +1,92 @@
+---
+id: 587d7db9367417b2b2512ba7
+title: تحديد عدد المطابقات بالضبط (Specify Exact Number of Matches)
+challengeType: 1
+forumTopicId: 301365
+dashedName: specify-exact-number-of-matches
+---
+
+# --description--
+
+يمكنك تحديد العدد الأدنى والأعلى من الأنماط مع محددات كمية باستخدام أقواس متعرجة curly brackets. أحيانا لا تريد سوى عدد محدد من المطابقات.
+
+لتحديد عدد معين من الأنماط ، فقط ضع هذا الرقم بين الأقواس المتعرجة.
+
+على سبيل المثال لمطابقة كلمة `hah` فقط مع الحرف `a` بعدد `3` مرات، سيكون الـ regex الخاص بك `/ha{3}h/`.
+
+```js
+let A4 = "haaaah";
+let A3 = "haaah";
+let A100 = "h" + "a".repeat(100) + "h";
+let multipleHA = /ha{3}h/;
+multipleHA.test(A4);
+multipleHA.test(A3);
+multipleHA.test(A100);
+```
+
+بالترتيب، الاستدعائات الثلاث لـ `test` ستعيد `false` و `true` و `false`.
+
+# --instructions--
+
+قم بتغيير `timRegex` ليطابق كلمة `Timber` فقط عندما يكون لها أربعة حروف `m`.
+
+# --hints--
+
+يجب أن يستخدم الـ regex الخاص بك الأقواس المتعرجة.
+
+```js
+assert(timRegex.source.match(/{.*?}/).length > 0);
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `Timber`
+
+```js
+timRegex.lastIndex = 0;
+assert(!timRegex.test('Timber'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `Timmber`
+
+```js
+timRegex.lastIndex = 0;
+assert(!timRegex.test('Timmber'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك `Timmmber`
+
+```js
+timRegex.lastIndex = 0;
+assert(!timRegex.test('Timmmber'));
+```
+
+يجب أن يطابق الـ regex الخاص بك `Timmmmber`
+
+```js
+timRegex.lastIndex = 0;
+assert(timRegex.test('Timmmmber'));
+```
+
+لا يجب أن يطابق الـ regex الخاص بك الـ string الآتي `Timber` مع ٣٠ حرف `m` بداخله.
+
+```js
+timRegex.lastIndex = 0;
+assert(!timRegex.test('Ti' + 'm'.repeat(30) + 'ber'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let timStr = "Timmmmber";
+let timRegex = /change/; // Change this line
+let result = timRegex.test(timStr);
+```
+
+# --solutions--
+
+```js
+let timStr = "Timmmmber";
+let timRegex = /Tim{4}ber/; // Change this line
+let result = timRegex.test(timStr);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/specify-only-the-lower-number-of-matches.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/specify-only-the-lower-number-of-matches.md
new file mode 100644
index 00000000000..30be5b2d75f
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/specify-only-the-lower-number-of-matches.md
@@ -0,0 +1,95 @@
+---
+id: 587d7db9367417b2b2512ba6
+title: Specify Only the Lower Number of Matches
+challengeType: 1
+forumTopicId: 301366
+dashedName: specify-only-the-lower-number-of-matches
+---
+
+# --description--
+
+يمكنك تحديد العدد الأدنى والأعلى من الأنماط باستخدام محددات الكمية باستخدام الأقواس المتعرجة. في بعض الأحيان تريد فقط تحديد العدد الأدنى من الأنماط بدون حد أعلى.
+
+لتحديد العدد الأدنى فقط من الأنماط، حافظ على أول رقم يتبعه فاصلة.
+
+على سبيل المثال لمطابقة كلمة `hah` فقط مع ظهور الحرف `a` علي الاقل `3` مرات، سيكون الـ regex الخاص بك `/ha{3,}h/`.
+
+```js
+let A4 = "haaaah";
+let A2 = "haah";
+let A100 = "h" + "a".repeat(100) + "h";
+let multipleA = /ha{3,}h/;
+multipleA.test(A4);
+multipleA.test(A2);
+multipleA.test(A100);
+```
+
+بالترتيب، الاستدعائات الثلاث لـ `test` ستعيد `true` و `false` و `true`.
+
+# --instructions--
+
+قم بتغيير `haRegex` ليطابق الكلمة `Hazzah` فقط عندما يكون لديه أربعة حروف `z` أو أكثر.
+
+# --hints--
+
+يجب أن يستخدم الـ regex الخاص بك الأقواس المتعرجة.
+
+```js
+assert(haRegex.source.match(/{.*?}/).length > 0);
+```
+
+يجب أن لا يطابق الـ regex الخاص بك السلسلة `Hazzah`
+
+```js
+haRegex.lastIndex = 0;
+assert(!haRegex.test('Hazzah'));
+```
+
+يجب أن لا يطابق الـ regex الخاص بك السلسلة `Hazzzah`
+
+```js
+haRegex.lastIndex = 0;
+assert(!haRegex.test('Hazzzah'));
+```
+
+يجب أن يطابق الـ regex الخاص بك السلسلة `Hazzzzah`
+
+```js
+assert('Hazzzzah'.match(haRegex)[0].length === 8);
+```
+
+يجب أن يطابق الـ regex الخاص بك السلسلة `Hazzzzzah`
+
+```js
+assert('Hazzzzzah'.match(haRegex)[0].length === 9);
+```
+
+يجب أن يطابق الـ regex الخاص بك السلسلة `Hazzzzzzah`
+
+```js
+assert('Hazzzzzzah'.match(haRegex)[0].length === 10);
+```
+
+يجب أن يطابق الـ regex الخاص بك السلسلة `Hazzah` مع 30 حرف `z` بداخله.
+
+```js
+assert('Hazzzzzzzzzzzzzzzzzzzzzzzzzzzzzzah'.match(haRegex)[0].length === 34);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let haStr = "Hazzzzah";
+let haRegex = /change/; // Change this line
+let result = haRegex.test(haStr);
+```
+
+# --solutions--
+
+```js
+let haStr = "Hazzzzah";
+let haRegex = /Haz{4,}ah/; // Change this line
+let result = haRegex.test(haStr);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/specify-upper-and-lower-number-of-matches.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/specify-upper-and-lower-number-of-matches.md
new file mode 100644
index 00000000000..fc09f141afb
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/specify-upper-and-lower-number-of-matches.md
@@ -0,0 +1,93 @@
+---
+id: 587d7db9367417b2b2512ba5
+title: Specify Upper and Lower Number of Matches
+challengeType: 1
+forumTopicId: 301367
+dashedName: specify-upper-and-lower-number-of-matches
+---
+
+# --description--
+
+تذكر أنك تستخدم علامة `+` للبحث عن واحد أو أكثر من الرموز والنجمة `*` للبحث عن صفر أو أكثر من الرموز. هذا مناسب ولكن في بعض الأحيان تريد مطابقة مجموعة معينة من الأنماط.
+
+يمكنك تحديد العدد الأدنى والأعلى من الأنماط باستخدام <dfn>quantity specifiers</dfn>. يتم استخدام محددات الكمية (Quantity specifiers) مع أقواس متعرجة (`{` و `}`). يمكنك وضع رقمين بين الأقواس المتعرجة - للعدد الأدنى والاعلي من الأنماط.
+
+على سبيل المثال لمطابقة فقط حرف `a` يظهر بين `3` و `5` مرات في السلسلة `ah`، سيكون الـ regex الخاص بك `/a{3,5}h/`.
+
+```js
+let A4 = "aaaah";
+let A2 = "aah";
+let multipleA = /a{3,5}h/;
+multipleA.test(A4);
+multipleA.test(A2);
+```
+
+أول استدعاء لـ `test` سيعيد `true` والثاني سيعيد `false`.
+
+# --instructions--
+
+قم بتغيير `ohRegex` ليطابق كامل العبارة `Oh no` فقط عندما يكون لديه من `3` إلى `6` احرف `h`.
+
+# --hints--
+
+يجب أن يستخدم الـ regex الخاص بك الأقواس المتعرجة.
+
+```js
+assert(ohRegex.source.match(/{.*?}/).length > 0);
+```
+
+يجب أن لا يطابق الـ regex الخاص بك السلسلة `Ohh no`
+
+```js
+ohRegex.lastIndex = 0;
+assert(!ohRegex.test('Ohh no'));
+```
+
+يجب أن يطابق الـ regex الخاص بك السلسلة `Ohhh no`
+
+```js
+assert('Ohhh no'.match(ohRegex)[0].length === 7);
+```
+
+يجب أن يطابق الـ regex الخاص بك السلسلة `Ohhhh no`
+
+```js
+assert('Ohhhh no'.match(ohRegex)[0].length === 8);
+```
+
+يجب أن يطابق الـ regex الخاص بك السلسلة `Ohhhhh no`
+
+```js
+assert('Ohhhhh no'.match(ohRegex)[0].length === 9);
+```
+
+يجب أن يطابق الـ regex الخاص بك السلسلة `Ohhhhhh no`
+
+```js
+assert('Ohhhhhh no'.match(ohRegex)[0].length === 10);
+```
+
+يجب أن لا يطابق الـ regex الخاص بك السلسلة `Ohhhhhhh no`
+
+```js
+ohRegex.lastIndex = 0;
+assert(!ohRegex.test('Ohhhhhhh no'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let ohStr = "Ohhh no";
+let ohRegex = /change/; // Change this line
+let result = ohRegex.test(ohStr);
+```
+
+# --solutions--
+
+```js
+let ohStr = "Ohhh no";
+let ohRegex = /Oh{3,6} no/; // Change this line
+let result = ohRegex.test(ohStr);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/use-capture-groups-to-search-and-replace.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/use-capture-groups-to-search-and-replace.md
new file mode 100644
index 00000000000..6a42887571d
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/use-capture-groups-to-search-and-replace.md
@@ -0,0 +1,88 @@
+---
+id: 587d7dbb367417b2b2512bab
+title: Use Capture Groups to Search and Replace
+challengeType: 1
+forumTopicId: 301368
+dashedName: use-capture-groups-to-search-and-replace
+---
+
+# --description--
+
+البحث أمر مفيد. ومع ذلك ، يمكنك جعل البحث أكثر قوة عندما يغير أيضًا (أو يستبدل) النص الذي تطابقه.
+
+يمكنك البحث عن النص واستبداله في سلسلة باستخدام `.replace()` على string. المدخلات لـ `.replace()` هي أولا نمط الـ regex الذي تريد البحث عنه. المعلمة الثانية هي الـ string الذي يحل محل المطابقة أو function للقيام بشيء ما.
+
+```js
+let wrongText = "The sky is silver.";
+let silverRegex = /silver/;
+wrongText.replace(silverRegex, "blue");
+```
+
+استدعاء `replace` سوف يعيد السلسلة `The sky is blue.`.
+
+يمكنك أيضًا الوصول إلى مجموعات الالتقاط في السلسلة البديلة بعلامات الدولار (`$`).
+
+```js
+"Code Camp".replace(/(\w+)\s(\w+)/, '$2 $1');
+```
+
+استدعاء `replace` سوف يعيد السلسلة `Camp Code`.
+
+# --instructions--
+
+اكتب `fixRegex` باستخدام ثلاث مجموعات التقاط تبحث عن كل كلمة في السلسلة `one two three`. ثم قم بتحديث متغير `replaceText` لاستبدال السلسة `one two three` بالسلسلة `three two one` وتعيين النتيجة إلى متغير `result`. تأكد من استخدام مجموعات التقاط في السلسلة البديلة باستخدام علامة الدولار (`$`).
+
+# --hints--
+
+يجب عليك استخدام `.replace()` للبحث والاستبدال.
+
+```js
+assert(code.match(/\.replace\(.*\)/));
+```
+
+يجب أن يقوم الـ regex الخاص بك بتغيير السلسلة `one two three` إلى السلسلة `three two one`
+
+```js
+assert(result === 'three two one');
+```
+
+لا يجب عليك تغيير السطر الأخير.
+
+```js
+assert(code.match(/result\s*=\s*str\.replace\(.*?\)/));
+```
+
+`fixRegex` يجب أن تستخدم ثلاث مجموعات التقاط على الأقل.
+
+```js
+assert(new RegExp(fixRegex.source + '|').exec('').length - 1 >= 3);
+```
+
+`replaceText` يجب أن يستخدمparenthesized submatch string(s) (مثال the nth parenthesized submatch string, $n, corresponds to the nth capture group).
+
+```js
+{
+  const re = /(\$\d{1,2})+(?:[\D]|\b)/g;
+  assert(replaceText.match(re).length >= 3);
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let str = "one two three";
+let fixRegex = /change/; // Change this line
+let replaceText = ""; // Change this line
+let result = str.replace(fixRegex, replaceText);
+```
+
+# --solutions--
+
+```js
+let str = "one two three";
+let fixRegex = /(\w+) (\w+) (\w+)/g; // Change this line
+let replaceText = "$3 $2 $1"; // Change this line
+let result = str.replace(fixRegex, replaceText);
+```
diff --git a/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/using-the-test-method.md b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/using-the-test-method.md
new file mode 100644
index 00000000000..8090e071b36
--- /dev/null
+++ b/curriculum/challenges/arabic/02-javascript-algorithms-and-data-structures/regular-expressions/using-the-test-method.md
@@ -0,0 +1,59 @@
+---
+id: 587d7db3367417b2b2512b8e
+title: Using the Test Method
+challengeType: 1
+forumTopicId: 301369
+dashedName: using-the-test-method
+---
+
+# --description--
+
+تستخدم الـ Regular expressions في لغات البرمجة لمطابقة أجزاء من الـ strings. أنت تنشئ أنماطا لمساعدتك على القيام بهذه المطابقة.
+
+إذا كنت ترغب في العثور على كلمة `the` في السلسلة `The dog chased the cat`، يمكنك استخدام الـ regular expression التالي: `/the/`. لاحظ أن علامات الاقتباس غير مطلوبة في ال regular expression.
+
+لدى جافا سكريبت طرق متعددة لاستخدام regexes. إحدى الطرق لاختبار regex هي استخدام `.test()`. `.test()` تأخذ regex، وتطبقه على سلسلة (توضع داخل الأقواس)، وتعيد `true` أو `false` إذا عثر النمط الخاص بك على شيء أو لا.
+
+```js
+let testStr = "freeCodeCamp";
+let testRegex = /Code/;
+testRegex.test(testStr);
+```
+
+دالة `test` هنا، ستعيد `true`.
+
+# --instructions--
+
+طبق `myRegex` على السلسلة `myString` باستخدام `.test()`.
+
+# --hints--
+
+يجب عليك استخدام `.test()` لاختبار الـ regex.
+
+```js
+assert(code.match(/myRegex.test\(\s*myString\s*\)/));
+```
+
+يجب أن ترجع نتيجتك `true`.
+
+```js
+assert(result === true);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+let myString = "Hello, World!";
+let myRegex = /Hello/;
+let result = myRegex; // Change this line
+```
+
+# --solutions--
+
+```js
+let myString = "Hello, World!";
+let myRegex = /Hello/;
+let result = myRegex.test(myString); // Change this line
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md
new file mode 100644
index 00000000000..f51bda449cd
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-elements-within-your-bootstrap-wells.md
@@ -0,0 +1,90 @@
+---
+id: bad87fee1348bd9aec908849
+title: إضافة عناصر داخل آبارك من Bootstrap
+challengeType: 0
+forumTopicId: 16636
+dashedName: add-elements-within-your-bootstrap-wells
+---
+
+# --description--
+
+يوجد العديد من عناصر `div` المتداخلة في كل عمود في صفك. هذا عميق بالقدر الكاف بالنسبة إليك. الآن يمكنك إضافة عناصر `button` الخاصة بك.
+
+ضع ثلاث عناصر `button` لكل عنصر `div` لديه اسم المجموعة `well`.
+
+# --hints--
+
+أدخل ثلاث عناصر `button` لكل عنصر `div` وتحمل فئة باسم `well`.
+
+```js
+assert(
+  $('div.well:eq(0)').children('button').length === 3 &&
+    $('div.well:eq(1)').children('button').length === 3
+);
+```
+
+يجب أن يكون لديك ست عناصر من `button`.
+
+```js
+assert($('button') && $('button').length > 5);
+```
+
+لا بد من وجود علامات إغلاق `button`.
+
+```js
+assert(
+  code.match(/<\/button>/g) &&
+    code.match(/<button/g) &&
+    code.match(/<\/button>/g).length === code.match(/<button/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well">
+
+
+
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well">
+
+
+
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well">
+        <button></button>
+        <button></button>
+        <button></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well">
+        <button></button>
+        <button></button>
+        <button></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md
new file mode 100644
index 00000000000..b30f55eecb6
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-all-of-our-buttons.md
@@ -0,0 +1,178 @@
+---
+id: bad87fee1348bd9aedc08845
+title: إضافة أيقونات Font Awesome إلى الأزرار
+challengeType: 0
+forumTopicId: 16637
+required:
+  - 
+    link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
+    raw: true
+dashedName: add-font-awesome-icons-to-all-of-our-buttons
+---
+
+# --description--
+
+تكون Font Awesome مكتبة عملية من الأيقونات. تكون هذه الأيقونات خطوط ويب أو رُسُوم تشكلية. هن الأيقونات تتعامل مثل الخطوط. يمكنك تحديد حجمها باستخدام وحدات بكسل، وسيفترض الأيقونات حجم الخط لعناصر الأساسية الخاصة بهم (their parent HTML).
+
+# --instructions--
+
+باستخدام Font Awesome, كم بإضافة `info-circle` إلى زر المعلومات, وأيقونة `trash` إلى زر الحذف.
+
+**لاحظ:** يكون عنصر `span` بديل مقبول لعنصر `i` للمتطلبات بالأدنى.
+
+# --hints--
+
+ضف `<i class="fas fa-info-circle"></i>` بداخل عنصر الزر الذي يحتوي على نص `info`.
+
+```js
+assert(
+  $('.btn-info > i').is('.fas.fa-info-circle') ||
+    $('.btn-info > span').is('.fas.fa-info-circle')
+);
+```
+
+ضف `<i class="fas fa-trash"></i>` بداخل عنصر الزر الذي يحتوي على نص `delete`.
+
+```js
+assert(
+  $('.btn-danger > i').is('.fas.fa-trash') ||
+    $('.btn-danger > span').is('.fas.fa-trash')
+);
+```
+
+ضف `<i class="fas fa-thumbs-up"></i>` بداخل عنصر الزر الذي يحتوي على نص `like`. تأكد أن عناصر `i` تحتوي على علامة أغلاق.
+
+```js
+assert(
+  code.match(/<\/i>|<\/span/g) &&
+    code.match(/<\/i|<\/span>/g).length > 2 &&
+    ($('.btn-primary > i').is('.fas.fa-thumbs-up') ||
+      $('.btn-primary > span').is('.fas.fa-thumbs-up'))
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info"><i class="fas fa-info-circle"></i> Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger"><i class="fas fa-trash"></i> Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md
new file mode 100644
index 00000000000..093923b0552
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-font-awesome-icons-to-our-buttons.md
@@ -0,0 +1,195 @@
+---
+id: bad87fee1348bd9aedd08845
+title: إضافة أيقونات الخط الرائع (Font Awesome) إلى الأزرار
+challengeType: 0
+forumTopicId: 16638
+required:
+  - 
+    link: 'https://use.fontawesome.com/releases/v5.8.1/css/all.css'
+    raw: true
+dashedName: add-font-awesome-icons-to-our-buttons
+---
+
+# --description--
+
+الخط الرائع (Font Awesome) هي مكتبة عملية من الأيقونات. تكون هذه الأيقونات خطوط ويب أو رُسُوم تشكلية. هن الأيقونات تتعامل مثل الخطوط. يمكنك تحديد حجمها باستخدام وحدات بكسل، وسيفترض الأيقونات حجم الخط لعناصر الأساسية الخاصة بهم (their parent HTML).
+
+يمكنك إضافة الخط الرائع (Font Awesome) في أي تطبيق خلال إضافة الرمز التالي إلى الجزء العلوي من HTML:
+
+```html
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
+```
+
+في هذه الاختبارات، لقد أضفنا لك فعلًا إلى هذه الصفحة خلف الكواليس.
+
+تم استخدام عنصر `i` في الأصل لجعل عناصر أخرى مائلة (italic) ولكن يشيع استخدامه الآن للأيقونات. يمكنك إضافة فئات الخط الرائع (Font Awesome) إلى عنصر `i` لتحويله إلى أيقونة، على سبيل المثال:
+
+```html
+<i class="fas fa-info-circle"></i>
+```
+
+لاحظ يقبل أستخدام عنصر `span` أيضا مع الأيقونات.
+
+# --instructions--
+
+استخدم الخط الرائع (Font Awesome) لإضافة أيقونة `thumbs-up` إلى زر الإعجاب الخاص بك بواسطة إعطائه عنصر `i` مع الفصول `fas` و`fa-thumbs-up`. تحقق أن النص بقي `Like` بجانب الأيقونة.
+
+# --hints--
+
+يجب عليك إضافة عنصر `i` مع الفئات `fas` و `fa-thumbs-up`.
+
+```js
+assert($('i').is('.fas.fa-thumbs-up') || $('span').is('.fas.fa-thumbs-up'));
+```
+
+أيقونة `fa-thumbs-up`. الخاصة بك يجب أن تكون داخل زر الإعجاب.
+
+```js
+assert(
+  ($('i.fa-thumbs-up').parent().text().match(/Like/gi) &&
+    $('.btn-primary > i').is('.fas.fa-thumbs-up')) ||
+    ($('span.fa-thumbs-up').parent().text().match(/Like/gi) &&
+      $('.btn-primary > span').is('.fas.fa-thumbs-up'))
+);
+```
+
+عنصر `i` الخاص بك يجب أن يكون داخل عنصر `button` الخاص بك.
+
+```js
+assert(
+  $('button').children('i').length > 0 ||
+    $('button').children('span').length > 0
+);
+```
+
+يجب أن يكون عنصر الأيقونة الخاص بك علامة إغلاق.
+
+```js
+assert(code.match(/<\/i>|<\/span>/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary">Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fas fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md
new file mode 100644
index 00000000000..763d623ef88
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/add-id-attributes-to-bootstrap-elements.md
@@ -0,0 +1,93 @@
+---
+id: bad87fee1348bd9aec908853
+title: إضافة id Attributes إلی عناصر Bootstrap
+challengeType: 0
+forumTopicId: 16639
+dashedName: add-id-attributes-to-bootstrap-elements
+---
+
+# --description--
+
+تذكر أنه بالإضافة إلى سمات الفئة، يمكنك إعطاء كل عنصر من عناصرك السمة `id`.
+
+يجب أن يكون كل معرف فريد لعنصر معين وأن يستخدم مرة واحدة فقط في الصفحة.
+
+دعونا نعطي معرفًا فريدًا لكل عنصر من عناصر `div` الخاصة بالفئة `well`.
+
+تذكر أنه يمكنك إعطاء عنصر معرف مثل:
+
+```html
+<div class="well" id="center-well">
+```
+
+أعط البئر على اليسار معرف (id) بقيمة `left-well`. أعط البئر على اليمين معرف (id) بقيمة `right-well`.
+
+# --hints--
+
+يجب أن يكون `well` في اليسار يحمل معرف (id) بقيمة `left-well`.
+
+```js
+assert(
+  $('.col-xs-6').children('#left-well') &&
+    $('.col-xs-6').children('#left-well').length > 0
+);
+```
+
+يجب أن يكون `well` في اليمين يحمل معرف (id) بقيمة `right-well`.
+
+```js
+assert(
+  $('.col-xs-6').children('#right-well') &&
+    $('.col-xs-6').children('#right-well').length > 0
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well" id="left-well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well" id="right-well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/apply-the-default-bootstrap-button-style.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/apply-the-default-bootstrap-button-style.md
new file mode 100644
index 00000000000..6013763ec3a
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/apply-the-default-bootstrap-button-style.md
@@ -0,0 +1,77 @@
+---
+id: bad87fee1348bd9aec908850
+title: تطبيق نمط الافتراضي إلي زر Bootstrap
+challengeType: 0
+forumTopicId: 16657
+dashedName: apply-the-default-bootstrap-button-style
+---
+
+# --description--
+
+Bootstrap لديه فئة أخرى للزر تسمى `btn-default`.
+
+تطبيق كل من فئتي `btn` و `btn-default` على كل عنصر من عناصر `button`.
+
+# --hints--
+
+يجب عليك إضافة فئة `btn` إلى عنصر `button` الخاص بك.
+
+```js
+assert($('.btn').length > 5);
+```
+
+يجب عليك إضافة فئة `btn-default` إلى عنصر `button` الخاص بك.
+
+```js
+assert($('.btn-default').length > 5);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well">
+        <button></button>
+        <button></button>
+        <button></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well">
+        <button></button>
+        <button></button>
+        <button></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/call-out-optional-actions-with-btn-info.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/call-out-optional-actions-with-btn-info.md
new file mode 100644
index 00000000000..95b2cdaf296
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/call-out-optional-actions-with-btn-info.md
@@ -0,0 +1,175 @@
+---
+id: bad87fee1348cd8acef08813
+title: استدعاء الإجراءات الاختيارية باستخدام btn-info
+challengeType: 0
+forumTopicId: 16770
+dashedName: call-out-optional-actions-with-btn-info
+---
+
+# --description--
+
+Bootstrap يأتي مع عدة ألوان محددة سلفًا للأزرار. يستخدم فئة `btn-info` لتوجيه الانتباه إلى الإجراءات الاختيارية التي يمكن للمستخدم اتخاذها.
+
+إنشاء زر Bootstrap جديد على مستوى البلوك (block-level) أسفل زر `Like` الخاص بك مع النص `Info`، وأضف فئة Bootstrap باسم `btn-info` إليه.
+
+لاحظ أن هذه الأزرار لا تزل تحتاج إلى فئات `btn` و `btn-block`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `button` جديد بالنص `Info`.
+
+```js
+assert(new RegExp('info', 'gi').test($('button').text()));
+```
+
+يجب أن يكون لكل من أزرار Bootstrap الخاص بك فئة `btn` و `btn-block`.
+
+```js
+assert($('button.btn-block.btn').length > 1);
+```
+
+الزر الجديد الخاص بك يجب أن يحتوي على الفئة `btn-info`.
+
+```js
+assert($('button').hasClass('btn-info'));
+```
+
+لا بد أن يوجد وسم إغلاق للعناصر `button`.
+
+```js
+assert(
+  code.match(/<\/button>/g) &&
+    code.match(/<button/g) &&
+    code.match(/<\/button>/g).length === code.match(/<button/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-block btn-primary">Like</button>
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-block btn-primary">Like</button>
+  <button class="btn btn-block btn-info">Info</button>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/center-text-with-bootstrap.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/center-text-with-bootstrap.md
new file mode 100644
index 00000000000..6a1b47fec5b
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/center-text-with-bootstrap.md
@@ -0,0 +1,157 @@
+---
+id: bad87fee1348bd8acde08812
+title: وضع النص في المنتصف باستخدام Bootstrap
+challengeType: 0
+forumTopicId: 16771
+dashedName: center-text-with-bootstrap
+---
+
+# --description--
+
+الآن بعد أن كنا نستخدم Bootstrap، يمكننا أن وضع عنصر العنوان في المنتصف لجعله يبدو أفضل. ما تحتاج القيام به هو إضافة صف `text-center` إلى عنصر `h2` لدينا.
+
+تذكر أنه يمكنك إضافة عدة فئات إلى نفس العنصر بفصل كل منها مع مساحة، مثل:
+
+```html
+<h2 class="red-text text-center">your text</h2>
+```
+
+# --hints--
+
+عنصر `h2` الخاص بك يجب أن يتمركز بتطبيق فئة `text-center`
+
+```js
+assert($('h2').hasClass('text-center'));
+```
+
+عُنصر `h2` يجب يحتوي فئة باسم `red-text`
+
+```js
+assert($('h2').hasClass('red-text'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-block-element-bootstrap-button.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-block-element-bootstrap-button.md
new file mode 100644
index 00000000000..b6171e77941
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-block-element-bootstrap-button.md
@@ -0,0 +1,185 @@
+---
+id: bad87fee1348cd8acef08812
+title: أنشئ عنصر Button بشكل Block بواسطة Bootstrap
+challengeType: 0
+forumTopicId: 16810
+dashedName: create-a-block-element-bootstrap-button
+---
+
+# --description--
+
+عادة، عناصر `button` الخاص بك وفئات `btn` و`btn-default` هي واسعة فقط حسب النص الذي تحتوي عليه. على سبيل المثال:
+
+```html
+<button class="btn btn-default">Submit</button>
+```
+
+سيكون هذا الزر واسعا فقط مثل الكلمة `Submit`.
+
+<button class='btn btn-default'>Submit</button>
+
+بواسطة جعلها عناصر صندوق (block) مع الفئة الإضافية من `btn-block`، سيمتد الزر الخاص بك لملء كامل المساحة الأفقية لصفحتك وأي عناصر تليها ستمتد على "سطر جديد" أسفل الصندوق.
+
+```html
+<button class="btn btn-default btn-block">Submit</button>
+```
+
+هذا الزر سوف يستغرق 100% من العرض المتاح.
+
+<button class='btn btn-default btn-block'>Submit</button>
+
+لاحظ أن هذه الأزرار لا تزل تحتاج إلى فئة `btn`.
+
+إضافة فئة Bootstrap باسم `btn-block` إلى زر Bootstrap الخاص بك.
+
+# --hints--
+
+يجب أن يحتوي الزر الخاص بك على فئات `btn` و `btn-default`.
+
+```js
+assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
+```
+
+الزر الخاص بك يجب أن يحتوي على الفئة `btn-block`.
+
+```js
+assert($('button').hasClass('btn-block'));
+```
+
+لا بد أن يوجد وسم إغلاق للعناصر `button`.
+
+```js
+assert(
+  code.match(/<\/button>/g) &&
+    code.match(/<button/g) &&
+    code.match(/<\/button>/g).length === code.match(/<button/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-default">Like</button>
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-block btn-default">Like</button>
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-bootstrap-button.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-bootstrap-button.md
new file mode 100644
index 00000000000..2a2ba1eae2f
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-bootstrap-button.md
@@ -0,0 +1,176 @@
+---
+id: bad87fee1348cd8acdf08812
+title: إنشاء عنصر Button بأسلوب Bootstrap
+challengeType: 0
+forumTopicId: 16811
+dashedName: create-a-bootstrap-button
+---
+
+# --description--
+
+Bootstrap لديه أساليبه الخاصة لعناصر `button` التي تبدو أفضل بكثير من عناصر HTML العادية.
+
+أنشئ عنصر `button` أسفل صورة الكتل الكبيرة. أعطاها فئات `btn` و `btn-default`, مع نص `Like`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `button` جديد بالنص `Like`.
+
+```js
+assert(
+  new RegExp('like', 'gi').test($('button').text()) &&
+    $('img.img-responsive + button.btn').length > 0
+);
+```
+
+الزر الجديد الخاص بك يجب أن يحتوي على فئتين: `btn` و `btn-default`.
+
+```js
+assert($('button').hasClass('btn') && $('button').hasClass('btn-default'));
+```
+
+لا بد من وجود وسم إغلاق لعناصر `button`.
+
+```js
+assert(
+  code.match(/<\/button>/g) &&
+    code.match(/<button/g) &&
+    code.match(/<\/button>/g).length === code.match(/<button/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<html>
+<head>
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+</head>
+<body>
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+
+   <!-- ADD Bootstrap Styled Button -->
+  <button class="btn btn-default">Like</button> 
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+</html>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-bootstrap-headline.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-bootstrap-headline.md
new file mode 100644
index 00000000000..0e7afdd4d3c
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-bootstrap-headline.md
@@ -0,0 +1,67 @@
+---
+id: bad87fee1348bd9aec908846
+title: إنشاء Headline بأسلوب Bootstrap
+challengeType: 0
+forumTopicId: 16812
+dashedName: create-a-bootstrap-headline
+---
+
+# --description--
+
+أبني شيئا من الصفر لممارسة مهاراتك في HTML و CSS و Bootstrap.
+
+سوف تبني ملعب jQuery، الذي سوف نستخدمه قريبا في تحديات jQuery الخاصة بنا.
+
+لبدء ذلك، أنشئ عنصر `h3` بنص `jQuery Playground`.
+
+لون عنصر `h3` الخاص بك مع `text-primary`، وضعه في المنتصف مع فئة `text-center` بأسلوب Bootstrap.
+
+# --hints--
+
+يجب عليك إضافة عنصر `h3` إلى الصفحة الخاصة بك.
+
+```js
+assert($('h3') && $('h3').length > 0);
+```
+
+يجب أن يحتوي العنصر `h3` على وسم إغلاق.
+
+```js
+assert(
+  code.match(/<\/h3>/g) &&
+    code.match(/<h3/g) &&
+    code.match(/<\/h3>/g).length === code.match(/<h3/g).length
+);
+```
+
+عنصر `h3` الخاص بك يجب أن يتمركز بتطبيق فئة `text-primary`
+
+```js
+assert($('h3').hasClass('text-primary'));
+```
+
+عنصر `h3` الخاص بك يجب أن يتمركز بتطبيق فئة `text-center`
+
+```js
+assert($('h3').hasClass('text-center'));
+```
+
+يجب أن يحتوي العنصر `h3` على النص `jQuery Playground`.
+
+```js
+assert.isTrue(/jquery(\s)+playground/gi.test($('h3').text()));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+# --solutions--
+
+```html
+<h3 class="text-primary text-center">jQuery Playground</h3>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-bootstrap-row.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-bootstrap-row.md
new file mode 100644
index 00000000000..1170074b2b0
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-bootstrap-row.md
@@ -0,0 +1,68 @@
+---
+id: bad87fee1348bd9bec908846
+title: إنشاء Row بأسلوب Bootstrap
+challengeType: 0
+forumTopicId: 16813
+dashedName: create-a-bootstrap-row
+---
+
+# --description--
+
+الآن ستنشئ صف Bootstrap لعناصرك المضمنة (inline).
+
+إنشاء عنصر `div` أسفل العلامة `h3` مع فئة `row`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` تحت عنصر `h3` الخاص بك.
+
+```js
+assert(
+  $('div').length > 1 &&
+    $('div.row h3.text-primary').length == 0 &&
+    $('div.row + h3.text-primary').length == 0 &&
+    $('h3.text-primary + div.row').length > 0
+);
+```
+
+يجب يحتوي عنصر `div` على فئة `row`
+
+```js
+assert($('div').hasClass('row'));
+```
+
+يجب أدخال `row div` في `container-fluid div`
+
+```js
+assert($('div.container-fluid div.row').length > 0);
+```
+
+يجب أن يحتوى عنصر `div` على علامة إغلاق.
+
+```js
+assert(
+  code.match(/<\/div>/g) &&
+    code.match(/<div/g) &&
+    code.match(/<\/div>/g).length === code.match(/<div/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+
+</div>
+```
+
+# --solutions--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row"></div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md
new file mode 100644
index 00000000000..b734400846c
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.md
@@ -0,0 +1,71 @@
+---
+id: bad87fee1348bd9aec908852
+title: إنشاء فئة لاستهداف منتقاة jQuery
+challengeType: 0
+forumTopicId: 16815
+dashedName: create-a-class-to-target-with-jquery-selectors
+---
+
+# --description--
+
+ليس كل فئة بحاجة إلى مقابلها في CSS. في بعض الأحيان تنشئ فئات لغرض اختيار هذه العناصر بسهولة أكبر باستخدام jQuery.
+
+اعطي كل عنصر من عناصر `button` الخاص بك `target`.
+
+# --hints--
+
+يجب عليك إضافة فئة `target` إلى عنصر `button` الخاص بك.
+
+```js
+assert($('.target').length > 5);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="target btn btn-default"></button>
+        <button class="target btn btn-default"></button>
+        <button class="target btn btn-default"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="target btn btn-default"></button>
+        <button class="target btn btn-default"></button>
+        <button class="target btn btn-default"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-custom-heading.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-custom-heading.md
new file mode 100644
index 00000000000..37565bd39d7
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-a-custom-heading.md
@@ -0,0 +1,177 @@
+---
+id: bad87fee1348bd9aede08845
+title: إنشاء Heading مخصص
+challengeType: 0
+forumTopicId: 16816
+dashedName: create-a-custom-heading
+---
+
+# --description--
+
+صنع عنوان بسيط لتطبيق Cat Photo App عن طريق وضع العنوان وإرخاء صورة القطط في الصف نفسه.
+
+تذكر، Bootstrap يستخدم نظام شبكة مستجيبة (responsive grid)، مما يجعل من السهل وضع العناصر في صفوف وتحديد العرض النسبي لكل عنصر. يمكن تطبيق معظم فئات Bootstrap على عنصر `div`.
+
+أدخل صورتك الأولى و عنصر `h2` الخاص بك ضمن عنصر واحد `<div class="row">`. أدخل عنصر `h2` الخاص بك داخل `<div class="col-xs-8">` وصورتك في `<div class="col-xs-4">` بحيث تكون على نفس الخط.
+
+لاحظ كيف أن حجم الصورة يتناسب مع النص بشكل صحيح الآن؟
+
+# --hints--
+
+عنصر `h2` الخاص بك و أعلى `img` يجب أن يتداخل مع عنصر `div` مع `row`.
+
+```js
+assert($('div.row:has(h2)').length > 0 && $('div.row:has(img)').length > 0);
+```
+
+يجب أدخال أعلى عنصر `img` الخاصة بك في `div` مع فئة يسمي `col-xs-4`.
+
+```js
+assert(
+  $('div.col-xs-4:has(img)').length > 0 &&
+    $('div.col-xs-4:has(div)').length === 0
+);
+```
+
+يجب أدخال عنصر `h2` الخاصة بك في `div` مع فئة يسمي `col-xs-8`.
+
+```js
+assert(
+  $('div.col-xs-8:has(h2)').length > 0 &&
+    $('div.col-xs-8:has(div)').length === 0
+);
+```
+
+لا بد أن يوجد وسم إغلاق لكل عناصر `div`.
+
+```js
+assert(
+  code.match(/<\/div>/g) &&
+    code.match(/<div/g) &&
+    code.match(/<\/div>/g).length === code.match(/<div/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="text-primary text-center">CatPhotoApp</h2>
+
+  <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary">Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary  text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+        <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary">Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-bootstrap-wells.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-bootstrap-wells.md
new file mode 100644
index 00000000000..7429b23f927
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/create-bootstrap-wells.md
@@ -0,0 +1,71 @@
+---
+id: bad87fee1348bd9aec908848
+title: إنشاء Wells بأسلوب Bootstrap
+challengeType: 0
+forumTopicId: 16825
+dashedName: create-bootstrap-wells
+---
+
+# --description--
+
+Bootstrap لديه فئة يسمى `well` يمكنه إنشاء إحساس بصري بالعمق للعمود.
+
+أدخل عنصر `div` واحد مع فئة `well` داخل كل عنصر من عناصر `col-xs-6` في `div`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` مع فئة `well` داخل كل عنصر من عناصر `div` مع فئة `col-xs-6`
+
+```js
+assert($('div.col-xs-6').not(':has(>div.well)').length < 1);
+```
+
+يجب أن يتداخل عنصري `div` مع فئة `col-xs-6` داخل عنصر `div` مع فئة `row`.
+
+```js
+assert($('div.row > div.col-xs-6').length > 1);
+```
+
+لا بد وجود وسم إغلاق لكل عناصر `div`.
+
+```js
+assert(
+  code.match(/<\/div>/g) &&
+    code.match(/<div/g) &&
+    code.match(/<\/div>/g).length === code.match(/<div/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+
+    </div>
+    <div class="col-xs-6">
+
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well"></div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well"></div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/ditch-custom-css-for-bootstrap.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/ditch-custom-css-for-bootstrap.md
new file mode 100644
index 00000000000..2f6af5a88bf
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/ditch-custom-css-for-bootstrap.md
@@ -0,0 +1,188 @@
+---
+id: bad87fee1347bd9aedf08845
+title: حذف مخصص CSS في Bootstrap
+challengeType: 0
+forumTopicId: 17565
+dashedName: ditch-custom-css-for-bootstrap
+---
+
+# --description--
+
+يمكننا تنظيف تعليماتنا البرمجية وجعل Cat Photo App أكثر تقليدية باستخدام الأنماط المدمجة في Bootstrap، بدلاً من الأنماط المخصصة التي أنشأناها سابقاً.
+
+لا تقلق - سيكون هناك الكثير من الوقت لتخصيص CSS في وقت لاحق.
+
+حذف `.red-text` و`p` و`.smaller-image` تعريفات CSS من عنصر `style` بحيث تكون تعريغات الوحيدة المتبقية داخل عنصر `style` هي `h2` و `thick-green-border`.
+
+ثم قم بحذف عنصر `p` الذي يحتوي على رابط زائد. ثم إزال فئة `red-text` من عنصر `h2` الخاص بك واستبداله بفئة Bootstrap باسم `text-primary`.
+
+أخيراً، إزال فئة `smaller-image` في أول العنصر `img` الخاص بك واستبداله بفئة `img-responsive` الخاص بك.
+
+# --hints--
+
+عُنصر `h2` يجب ألّا يحتوي على فئة باسم `red-text`.
+
+```js
+assert(!$('h2').hasClass('red-text'));
+```
+
+عُنصر `h2` يجب يحتوي فئة باسم `text-primary` حالياً.
+
+```js
+assert($('h2').hasClass('text-primary'));
+```
+
+عناصر الفِقْرة الخاصة بك يجب ألّا يستخدم خط `Monospace`.
+
+```js
+assert(
+  !$('p')
+    .css('font-family')
+    .match(/monospace/i)
+);
+```
+
+يجب إزالة فئة `smaller-image` من أعلى صورتك.
+
+```js
+assert(!$('img').hasClass('smaller-image'));
+```
+
+يجب عليك إضافة فئة `img-responsive` إلى أعلى صورتك.
+
+```js
+assert($('.img-responsive').length > 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary">Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">Delete</button>
+    </div>
+  </div>
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="text-primary text-center">CatPhotoApp</h2>
+
+  <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary">Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">Delete</button>
+    </div>
+  </div>
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/give-each-element-a-unique-id.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/give-each-element-a-unique-id.md
new file mode 100644
index 00000000000..b9298fecfe6
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/give-each-element-a-unique-id.md
@@ -0,0 +1,125 @@
+---
+id: bad87fee1348bd9aec908855
+title: إعطاء كل عنصر معرف فريد
+challengeType: 0
+forumTopicId: 18191
+dashedName: give-each-element-a-unique-id
+---
+
+# --description--
+
+سوف تريد أيضا أن تكون قادر على استخدام jQuery لاستهداف كل زر بواسطة معرف فريد.
+
+منح كل من الأزرار الخاصة بك معرف فريد من نوعها، بدءاً من `target1` وانتهاء إلى `target6`.
+
+تحقق أن `target1` إلى `target3` موجودة في `#left-well`، و `target4` إلى `target6` موجودة في `#right-well`.
+
+# --hints--
+
+عنصر `button` واحد يجب أن يحتوي على معرف (id) باسم `target1`.
+
+```js
+assert(
+  $('#left-well').children('#target1') &&
+    $('#left-well').children('#target1').length > 0
+);
+```
+
+عنصر `button` واحد يجب أن يحتوي على معرف (id) باسم `target2`.
+
+```js
+assert(
+  $('#left-well').children('#target2') &&
+    $('#left-well').children('#target2').length > 0
+);
+```
+
+عنصر `button` واحد يجب أن يحتوي على معرف (id) باسم `target3`.
+
+```js
+assert(
+  $('#left-well').children('#target3') &&
+    $('#left-well').children('#target3').length > 0
+);
+```
+
+عنصر `button` واحد يجب أن يحتوي على معرف (id) باسم `target4`.
+
+```js
+assert(
+  $('#right-well').children('#target4') &&
+    $('#right-well').children('#target4').length > 0
+);
+```
+
+عنصر `button` واحد يجب أن يحتوي على معرف (id) باسم `target5`.
+
+```js
+assert(
+  $('#right-well').children('#target5') &&
+    $('#right-well').children('#target5').length > 0
+);
+```
+
+عنصر `button` واحد يجب أن يحتوي على معرف (id) باسم `target6`.
+
+```js
+assert(
+  $('#right-well').children('#target6') &&
+    $('#right-well').children('#target6').length > 0
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1"></button>
+        <button class="btn btn-default target" id="target2"></button>
+        <button class="btn btn-default target" id="target3"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4"></button>
+        <button class="btn btn-default target" id="target5"></button>
+        <button class="btn btn-default target" id="target6"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md
new file mode 100644
index 00000000000..a2221fb0aeb
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.md
@@ -0,0 +1,53 @@
+---
+id: bad87fee1348bd9aec908746
+title: أسكن صفحك في عنصر container-fluid باستخدام Bootstrap
+challengeType: 0
+forumTopicId: 18198
+dashedName: house-our-page-within-a-bootstrap-container-fluid-div
+---
+
+# --description--
+
+الآن تحقق أن كل المحتويات الموجودة في صفحتك مستجيبة للجوال (mobile-responsive).
+
+أدخل عنصر `h3` الخاص بك داخل عنصر `div` مع الفئة `container-fluid`.
+
+# --hints--
+
+يجب أن يمتلك عنصر `div` الخاص بك فئة `container-fluid`.
+
+```js
+assert($('div').hasClass('container-fluid'));
+```
+
+لا بد أن يوجد وسم إغلاق لكل عناصر `div`.
+
+```js
+assert(
+  code.match(/<\/div>/g) &&
+    code.match(/<div/g) &&
+    code.match(/<\/div>/g).length === code.match(/<div/g).length
+);
+```
+
+عنصر `h3` الخاص بك يجب أن يكون متداخلا داخل عنصر `div`.
+
+```js
+assert($('div').children('h3').length > 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<h3 class="text-primary text-center">jQuery Playground</h3>
+```
+
+# --solutions--
+
+```html
+<div class="container-fluid">
+    <h3 class="text-primary text-center">jQuery Playground</h3>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/label-bootstrap-buttons.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/label-bootstrap-buttons.md
new file mode 100644
index 00000000000..e8c6bd0082b
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/label-bootstrap-buttons.md
@@ -0,0 +1,105 @@
+---
+id: bad87fee1348bd9aec908856
+title: توصيف أزرار (Button) في Bootstrap
+challengeType: 0
+forumTopicId: 18222
+dashedName: label-bootstrap-buttons
+---
+
+# --description--
+
+تماما كما وصفت آبارك، تريد أن تضيف وصف ألى أزرارك.
+
+اعطي كل عنصر من العناصر `button` الخاص بك التي تتوافق مع منتقي المعرف الخاص به.
+
+# --hints--
+
+`button` الخاص بك مع المعرف `target1` يجب أن يحتوي على النص `#target1`.
+
+```js
+assert(new RegExp('#target1', 'gi').test($('#target1').text()));
+```
+
+`button` الخاص بك مع المعرف `target2` يجب أن يحتوي على النص `#target2`.
+
+```js
+assert(new RegExp('#target2', 'gi').test($('#target2').text()));
+```
+
+`button` الخاص بك مع المعرف `target3` يجب أن يحتوي على النص `#target3`.
+
+```js
+assert(new RegExp('#target3', 'gi').test($('#target3').text()));
+```
+
+`button` الخاص بك مع المعرف `target4` يجب أن يحتوي على النص `#target4`.
+
+```js
+assert(new RegExp('#target4', 'gi').test($('#target4').text()));
+```
+
+`button` الخاص بك مع المعرف `target5` يجب أن يحتوي على النص `#target5`.
+
+```js
+assert(new RegExp('#target5', 'gi').test($('#target5').text()));
+```
+
+`button` الخاص بك مع المعرف `target6` يجب أن يحتوي على النص `#target6`.
+
+```js
+assert(new RegExp('#target6', 'gi').test($('#target6').text()));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1"></button>
+        <button class="btn btn-default target" id="target2"></button>
+        <button class="btn btn-default target" id="target3"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4"></button>
+        <button class="btn btn-default target" id="target5"></button>
+        <button class="btn btn-default target" id="target6"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/label-bootstrap-wells.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/label-bootstrap-wells.md
new file mode 100644
index 00000000000..00fa3d69d28
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/label-bootstrap-wells.md
@@ -0,0 +1,101 @@
+---
+id: bad87fee1348bd9aec908854
+title: توصيف أبرار (Wells) بواسطة Bootstrap
+challengeType: 0
+forumTopicId: 18223
+dashedName: label-bootstrap-wells
+---
+
+# --description--
+
+من أجل الوضوح، ضع وصف على كلا الآبار مع معرفيهما.
+
+فوق البئر الأيسر (left-well), داخل عنصر `col-xs-6` في `div`، أضف عنصر `h4` مع النص `#left-well`.
+
+فوق البئر الأيمن (right-well), داخل عنصر `col-xs-6` في `div`، أضف عنصر `h4` مع النص `#right-well`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `h4` لكل عنصر من عناصرك `<div class="col-xs-6">`.
+
+```js
+assert(
+  $('.col-xs-6').children('h4') && $('.col-xs-6').children('h4').length > 1
+);
+```
+
+عنصر `h4` يجب أن يحتوي على النص `#left-well`.
+
+```js
+assert(new RegExp('#left-well', 'gi').test($('h4').text()));
+```
+
+عنصر `h4` يجب أن يحتوي على النص `#right-well`.
+
+```js
+assert(new RegExp('#right-well', 'gi').test($('h4').text()));
+```
+
+لا بد أن يوجد وسم إغلاق لكل عناصر `h4`.
+
+```js
+assert(
+  code.match(/<\/h4>/g) &&
+    code.match(/<h4/g) &&
+    code.match(/<\/h4>/g).length === code.match(/<h4/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+
+      <div class="well" id="left-well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+
+      <div class="well" id="right-well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md
new file mode 100644
index 00000000000..93841d95e2e
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.md
@@ -0,0 +1,215 @@
+---
+id: bad87fee1348bd9aec908845
+title: نظم عناصر Form بشكل متجاوب بأسلوب Bootstrap
+challengeType: 0
+forumTopicId: 18225
+required:
+  - 
+    link: >-
+      https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
+    raw: true
+dashedName: line-up-form-elements-responsively-with-bootstrap
+---
+
+# --description--
+
+الآن أحصل على النموذج (form) الخاص بك `input` و`button` الإرسال الخاص بك على نفس الخط. ذلك بنفس الطريقة التي قمت بها سابقاً: باستخدام عنصر `div` مع فئة `row`، وعناصر `div` أخرى داخله باستخدام فئة `col-xs-*`.
+
+لا يمكنك إدخال نص النموذج الخاص بك `input` و`button` الإرسال ضمن `div` مع فئة `row`. أدخل نص النموذج الخاص بك `input` داخل عنصر مع فئة `col-xs-7`. أدخل زر إرسال النموذج الخاص بك `button` في `div` مع فئة `col-xs-5`.
+
+هذا هو التحدي الأخير الذي سنقوم به في Cat Photo App الحالياً. نأمل أن تكون قد استمتعت بتعلم Font Awesome، وBootstrap، وresponsive design!
+
+# --hints--
+
+زر الإرسال النموذج الخاص بك وإدخال النص يجب أن يتداخلا في حوار يحتوي على فئة `row`.
+
+```js
+assert(
+  $('div.row:has(input[type="text"])').length > 0 &&
+    $('div.row:has(button[type="submit"])').length > 0
+);
+```
+
+يجب أن يكون إدخال النص الخاص بك متداخلا في عنصر مع الفئة `col-xs-7`.
+
+```js
+assert($('div.col-xs-7:has(input[type="text"])').length > 0);
+```
+
+زر الإرسال النموذج الخاص بك يجب أن يكون متداخلا في عنصر مع الفئة `col-xs-5`.
+
+```js
+assert($('div.col-xs-5:has(button[type="submit"])').length > 0);
+```
+
+لا بد أن يوجد وسم إغلاق لكل عناصر `div`.
+
+```js
+assert(
+  code.match(/<\/div>/g) &&
+    code.match(/<div/g) &&
+    code.match(/<\/div>/g).length === code.match(/<div/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <div class="row">
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+      </div>
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Loving</label>
+      </div>
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Lazy</label>
+      </div>
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Crazy</label>
+      </div>
+    </div>
+    <input type="text" class="form-control" placeholder="cat photo URL" required>
+    <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <div class="row">
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+      </div>
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Loving</label>
+      </div>
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Lazy</label>
+      </div>
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Crazy</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-7">
+        <input type="text" class="form-control" placeholder="cat photo URL" required>
+      </div>
+      <div class="col-xs-5">
+        <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
+      </div>
+    </div>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/make-images-mobile-responsive.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/make-images-mobile-responsive.md
new file mode 100644
index 00000000000..f4353aa7934
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/make-images-mobile-responsive.md
@@ -0,0 +1,176 @@
+---
+id: bad87fee1348bd9acde08812
+title: جعل الصور مستجيبة للجوال (Mobile Responsive)
+challengeType: 0
+forumTopicId: 18232
+dashedName: make-images-mobile-responsive
+---
+
+# --description--
+
+أولا، أضف صورة جديدة أسفل الصورة الحالية. عيّن سمة `src` إلى `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+سيكون من الرائع أن تكون هذه الصورة بالضبط عرض شاشة هاتفك.
+
+لحسن الحظ، مع Bootstrap، ما تحتاج أليه هو إضافة فئة `img-responsive` إلى صورتك. قم بهذا، والصورة يجب أن تتناسب تماما مع عرض صفحتك.
+
+# --hints--
+
+يجب أن يكون لك صورتين بالإجمال.
+
+```js
+assert($('img').length === 2);
+```
+
+يجب أن تقع صورتك الجديدة أسفل صورتك القديمة و تحمل فئة `img-responsive`.
+
+```js
+assert($('img:eq(1)').hasClass('img-responsive'));
+```
+
+يجب ألّا تحمل صورتك الجديدة فئة `smaller-image`.
+
+```js
+assert(!$('img:eq(1)').hasClass('smaller-image'));
+```
+
+يجب أن تحمل صورتك الجديدة سمة `src` بقيمة `https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg`.
+
+```js
+assert($('img:eq(1)').attr('src') === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg');
+```
+
+في عنصر`img` الجديد يجب أن يوجد علامة أغلاق.
+
+```js
+assert(
+  code.match(/<img/g) &&
+    code.match(/<img[^<]*>/g).length === 2 &&
+    code.match(/<img/g).length === 2
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive">
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/responsively-style-checkboxes.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/responsively-style-checkboxes.md
new file mode 100644
index 00000000000..5a8b2681210
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/responsively-style-checkboxes.md
@@ -0,0 +1,192 @@
+---
+id: bad87fee1348bd9aeda08845
+title: صمم Checkboxes باستجابية
+challengeType: 0
+forumTopicId: 18269
+required:
+  - 
+    link: >-
+      https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
+    raw: true
+dashedName: responsively-style-checkboxes
+---
+
+# --description--
+
+أن فئات Bootstrap باسم `col-xs-*` تنطبق على جميع عناصر `form`، يمكنك استخدامها على خانات الاختيار (checkboxes) أيضًا! بهذه الطريقة، ستكون خانات الاختيار (checkboxes) موزعة بالتساوي عبر الصفحة، بغض النظر عن مدى سَعَة الشاشة.
+
+# --instructions--
+
+أدخل جميع خانات الاختيار (checkboxes) الثلاث الخاصة بك في عنصر `<div class="row">`. ثم أدخلهم في عنصر `<div class="col-xs-4">`.
+
+# --hints--
+
+جميع خانات الاختيار (checkboxes) الخاصة بك يجب أن تكون متداخلة داخل `div` واحد مع فئة `row`.
+
+```js
+assert($('div.row:has(input[type="checkbox"])').length > 0);
+```
+
+كل خانة من خانات الاختيار (checkboxes) الخاصة بك يجب أن تكون متداخلة داخل `div` مع الفئة `col-xs-4`.
+
+```js
+assert($('div.col-xs-4:has(input[type="checkbox"])').length > 2);
+```
+
+لا بد أن يوجد وسم إغلاق لكل عناصر `div`.
+
+```js
+assert(
+  code.match(/<\/div>/g) &&
+    code.match(/<div/g) &&
+    code.match(/<\/div>/g).length === code.match(/<div/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <div class="row">
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+      </div>
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+      </div>
+    </div>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <div class="row">
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+      </div>
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Loving</label>   
+      </div>
+      <div class="col-xs-4">
+         <label><input type="checkbox" name="personality"> Lazy</label>
+      </div>
+      <div class="col-xs-4">
+         <label><input type="checkbox" name="personality"> Crazy</label>
+      </div>
+    </div>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/responsively-style-radio-buttons.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/responsively-style-radio-buttons.md
new file mode 100644
index 00000000000..e944ad7935a
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/responsively-style-radio-buttons.md
@@ -0,0 +1,176 @@
+---
+id: bad87fee1348bd9aedb08845
+title: صمم Radio Buttons باستجابة
+challengeType: 0
+forumTopicId: 18270
+required:
+  - 
+    link: >-
+      https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
+    raw: true
+dashedName: responsively-style-radio-buttons
+---
+
+# --description--
+
+يمكنك استخدام فئات Bootstrap باسم `col-xs-*` على عناصر `form` أيضًا! بهذه الطريقة، سيتم توزيع أزرار الراديو (radio buttons) الخاصة بك بالتساوي عبر الصفحة، بغض النظر عن مدى اتساع نطاق الشاشة.
+
+أدخل أزرار الراديو (radio button) الخاصة بك ضمن عنصر `<div class="row">`. ثم أدخلهم في عنصر `<div class="col-xs-6">`.
+
+**ملاحظة:** تذكير، أزرار الراديو هي `input` عناصر من نوع `radio`.
+
+# --hints--
+
+جميع أزرار الراديو الخاصة بك يجب أن تكون متداخلة داخل `div` مع فئة `row`.
+
+```js
+assert($('div.row:has(input[type="radio"])').length > 0);
+```
+
+كل من أزرار الراديو الخاصة بك يجب أن تكون متداخلة داخل `div` مع الفئة `col-xs-6`.
+
+```js
+assert($('div.col-xs-6:has(input[type="radio"])').length > 1);
+```
+
+لا بد أن يوجد وسم إغلاق لكل عناصر `div`.
+
+```js
+assert(
+  code.match(/<\/div>/g) &&
+    code.match(/<div/g) &&
+    code.match(/<\/div>/g).length === code.match(/<div/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+  <div class="row">
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+      </div>
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+      </div>
+    </div>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/split-your-bootstrap-row.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/split-your-bootstrap-row.md
new file mode 100644
index 00000000000..a79c1cc6496
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/split-your-bootstrap-row.md
@@ -0,0 +1,57 @@
+---
+id: bad87fee1348bd9aec908847
+title: تقسيم Row بواسطة Bootstrap
+challengeType: 0
+forumTopicId: 18306
+dashedName: split-your-bootstrap-row
+---
+
+# --description--
+
+الآن بعد أن كان لدينا صف Bootstrap، دعونا نقسمه إلى عمودين لإيواء عناصرنا.
+
+أنشئ عنصرين `div` داخل الصف الخاص بك، وكلاهما يحتوي فئة باسم `col-xs-6`.
+
+# --hints--
+
+عنصري `div class="col-xs-6"` يجب أن يكونا متداخلة داخل عنصر `div class="row"` الخاص بك.
+
+```js
+assert($('div.row > div.col-xs-6').length > 1);
+```
+
+لا بد وجود وسم إغلاق لكل عناصر `div`.
+
+```js
+assert(
+  code.match(/<\/div>/g) &&
+    code.match(/<div/g) &&
+    code.match(/<\/div>/g).length === code.match(/<div/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+
+
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6"></div>
+    <div class="col-xs-6"></div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/style-text-inputs-as-form-controls.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/style-text-inputs-as-form-controls.md
new file mode 100644
index 00000000000..8326c75022e
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/style-text-inputs-as-form-controls.md
@@ -0,0 +1,202 @@
+---
+id: bad87fee1348bd9aed908845
+title: صمم Text Inputs مثل Form Controls
+challengeType: 0
+forumTopicId: 18312
+required:
+  - 
+    link: >-
+      https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css
+    raw: true
+dashedName: style-text-inputs-as-form-controls
+---
+
+# --description--
+
+يمكنك إضافة `fa-paper-plane` هي أيقونة Font Awesome, عن طريق إضافة `<i class="fa fa-paper-plane"></i>` داخل عنصر `button` للإرسال.
+
+امنح حقل إدخال النص الخاص بك فئة `form-control`. امنح زر إرسال النموذج الخاص بك الفئات `btn btn-primary`. اعطي هذا الزر أيضًا أيقونة Font Awesome باسم `fa-paper-plane`.
+
+اجعل كل النصوص `<input>`، و `<textarea>`، و `<select>` عناصر مع فئة `.form-control` يكونوا بعرض 100%.
+
+# --hints--
+
+زر الإرسال في النموذج الخاص بك يجب أن يحتوي على فئات `btn btn-primary`.
+
+```js
+assert($('button[type="submit"]').hasClass('btn btn-primary'));
+```
+
+يجب عليك إضافة عنصر `<i class="fa fa-paper-plane"></i>` داخل عنصر `button` الإرسال الخاص بك.
+
+```js
+assert($('button[type="submit"]:has(i.fa.fa-paper-plane)').length > 0);
+```
+
+يجب أن يحتوي `input` للنص في النموذج الخاص بك على `form-control`.
+
+```js
+assert($('input[type="text"]').hasClass('form-control'));
+```
+
+كل عنصر من عناصر ال `i` الخاص بك يجب أن يحتوي على وسم إغلاق (closing tag).
+
+```js
+assert(code.match(/<\/i>/g) && code.match(/<\/i/g).length > 3);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <div class="row">
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+      </div>
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Loving</label>
+      </div>
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Lazy</label>
+      </div>
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Crazy</label>
+      </div>
+    </div>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+</style>
+
+<div class="container-fluid">
+  <div class="row">
+    <div class="col-xs-8">
+      <h2 class="text-primary text-center">CatPhotoApp</h2>
+    </div>
+    <div class="col-xs-4">
+      <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love:</span></p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <div class="row">
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+      </div>
+      <div class="col-xs-6">
+        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Loving</label>
+      </div>
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Lazy</label>
+      </div>
+      <div class="col-xs-4">
+        <label><input type="checkbox" name="personality"> Crazy</label>
+      </div>
+    </div>
+    <input type="text" class="form-control" placeholder="cat photo URL" required>
+    <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.md
new file mode 100644
index 00000000000..c3f82bf98c0
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.md
@@ -0,0 +1,167 @@
+---
+id: bad87fee1348cd8acef08811
+title: تذوق لون قوس قزح بواسطة Bootstrap
+challengeType: 0
+forumTopicId: 18323
+dashedName: taste-the-bootstrap-button-color-rainbow
+---
+
+# --description--
+
+فئة `btn-primary` هي اللون الرئيسة التي ستستخدمه في التطبيق الخاص بك. هي مفيدة لتسليط الضوء على الإجراءات التي تريد من المستخدم أن يتخذها.
+
+استبدل فئة `btn-default` الخاص بفئة `btn-primary` في الزر الخاص بك.
+
+لاحظ أن هذا الزر سيظل بحاجة إلى فئة `btn` و `btn-block`.
+
+# --hints--
+
+يجب أن يحتوي الزر الخاص بك على الفئة `btn-primary`.
+
+```js
+assert($('button').hasClass('btn-primary'));
+```
+
+يجب أن يحتوي الزر الخاص بك على فئات `btn` و `btn-block`.
+
+```js
+assert($('button').hasClass('btn-block') && $('button').hasClass('btn'));
+```
+
+لا بد أن يوجد وسم إغلاق للعناصر `button`.
+
+```js
+assert(
+  code.match(/<\/button>/g) &&
+    code.match(/<button/g) &&
+    code.match(/<\/button>/g).length === code.match(/<button/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-default btn-block">Like</button>
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-primary btn-block">Like</button>
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-a-span-to-target-inline-elements.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-a-span-to-target-inline-elements.md
new file mode 100644
index 00000000000..5ed2cd419c7
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-a-span-to-target-inline-elements.md
@@ -0,0 +1,185 @@
+---
+id: bad87fee1348bd9aedf08845
+title: استخدام Span لاستهداف عناصر المتضمنة
+challengeType: 0
+forumTopicId: 18370
+dashedName: use-a-span-to-target-inline-elements
+---
+
+# --description--
+
+يمكنك استخدام الإنطاق (spans) لإنشاء عناصر مضمنة. تذكر عندما تستخدم فئة `btn-block` لجعل الزر يملأ الصف بِرُمَّته؟
+
+<button class='btn' style='background-color: rgb(0, 100, 0);  color: rgb(255, 255, 255);'>normal button</button>
+
+<button class='btn btn-block' style='background-color: rgb(0, 100, 0);  color: rgb(255, 255, 255);'>btn-block button</button>
+
+هذا يوضح الفرق بين عنصر "inline" وعنصر "block".
+
+باستخدام عنصر `span` الضمني، يمكنك وضع عدة عناصر على نفس السطر و حتى تصمم أجزاء مختلفة من نفس الخط بشكل مختلف.
+
+استخدام عنصر `span`، ضع الكلمة `love` داخل عنصر `p` الذي يحتوي حاليا على النص `Things cats love`. ثم أعطِ `span` الفئة `text-danger` لجعل النص أحمر.
+
+إليك كيف ستفعل هذا لعنصر `p` الذي يحتوي على النص `Top 3 things cats hate`:
+
+```html
+<p>Top 3 things cats <span class="text-danger">hate:</span></p>
+```
+
+# --hints--
+
+يجب أن يكون عنصر `span` داخل عنصر `p` الخاص بك.
+
+```js
+assert($('p span') && $('p span').length > 0);
+```
+
+يجب أن يحتوي عنصر `span` على النص `love` فقط.
+
+```js
+assert(
+  $('p span') &&
+    $('p span').text().match(/love/i) &&
+    !$('p span')
+      .text()
+      .match(/Things cats/i)
+);
+```
+
+يجب أن يحتوي عنصر `span` الخاص بك على فئة `text-danger`.
+
+```js
+assert($('span').hasClass('text-danger'));
+```
+
+يجب أن يكون عنصر `span` الخاص بك علامة إغلاق.
+
+```js
+assert(
+  code.match(/<\/span>/g) &&
+    code.match(/<span/g) &&
+    code.match(/<\/span>/g).length === code.match(/<span/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+</style>
+
+<div class="container-fluid">
+  <h2 class="text-primary text-center">CatPhotoApp</h2>
+
+  <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary">Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">Delete</button>
+    </div>
+  </div>
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+</style>
+
+<div class="container-fluid">
+  <h2 class="text-primary text-center">CatPhotoApp</h2>
+
+  <a href="#"><img class="img-responsive thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary">Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">Delete</button>
+    </div>
+  </div>
+  <p>Things cats <span class="text-danger">love</span>:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-comments-to-clarify-code.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-comments-to-clarify-code.md
new file mode 100644
index 00000000000..cb420273a0c
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-comments-to-clarify-code.md
@@ -0,0 +1,98 @@
+---
+id: bad87fee1348bd9aec908857
+title: استخدام Comments لتوضيح Code
+challengeType: 0
+forumTopicId: 18347
+dashedName: use-comments-to-clarify-code
+---
+
+# --description--
+
+عندما نبدأ باستخدام jQuery، تعدل عناصر HTML دون الحاجة إلى تغييرها فعليا في HTML.
+
+تيقن من أن الجميع يعلم أنه لا ينبغي لهم في الواقع تعديل أي من هذه التعليمات البرمجية قاصدًا.
+
+تذكر أنه يمكنك بَدْء تعليق مع `<!--` وإنهاء تعليق مع `-->`
+
+إضافة تعليق في الجزء العلوي من HTML الخاص بك يقول `Code below this line should not be changed`
+
+# --hints--
+
+يجب عليك بَدْء تعليق مع `<!--` في الجزء العلوي من HTML.
+
+```js
+assert(code.match(/^\s*<!--/));
+```
+
+يجب أن يحتوي تعليقك على نص `Code below this line should not be changed`.
+
+```js
+assert(code.match(/<!--(?!(>|->|.*-->.*this line))\s*.*this line.*\s*-->/gi));
+```
+
+يجب عليك إغلاق تعليقك مع `-->`.
+
+```js
+assert(code.match(/-->.*\n+.+/g));
+```
+
+يجب أن يكون لديك نفس العدد من علامات فتح التعليقات وعلامات غلقهم.
+
+```js
+assert(code.match(/<!--/g).length === code.match(/-->/g).length);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<!-- Code below this line should not be changed -->
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md
new file mode 100644
index 00000000000..97d586e01e8
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.md
@@ -0,0 +1,170 @@
+---
+id: bad87fee1348bd9acde08712
+title: تصميم Fluid Containers بشكل مستجيب بواسطة Bootstrap
+challengeType: 0
+forumTopicId: 18362
+dashedName: use-responsive-design-with-bootstrap-fluid-containers
+---
+
+# --description--
+
+في قسم HTML5 و CSS من freeCodeCamp بنيت Cat Photo App. الآن دعونا نعود إليها. هذه المرة، سوف تبنيها باستخدام Bootstrap responsive CSS framework.
+
+سوف يكتشف Bootstrap مدى اتساع شاشتك ويستجيب عن طريق تغيير حجم عناصر HTML الخاصة بك - ومن اجل هذه يسمى <dfn>التصميم المستجيب</dfn>.
+
+مع التصميم المستجيب، لا حاجة لتصميم نسخة محمولة من موقعك. ستبدو جيدة على الأجهزة التي بها شاشات من أي عرض.
+
+يمكنك إضافة Bootstrap إلى أي تطبيق بواسطة إضافة التعليمات البرمجية التالية إلى الجزء العلوي من HTML:
+
+```html
+<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"/>
+```
+
+في هذه الاختبارات، لقد أضفنا لك فعلًا إلى هذه الصفحة خلف الكواليس. لاحظ أن استخدام الوسم إما `>` أو `/>` لإغلاق `link` مقبول.
+
+للبدء، يجب أن نضع جميع HTML الخاص بنا (باستثناء عنصر `link` وعنصر `style`) في عنصر `div` مع الفئة `container-fluid`.
+
+# --hints--
+
+يجب أن يمتلك عنصر `div` الخاص بك فئة `container-fluid`.
+
+```js
+assert($('div').hasClass('container-fluid'));
+```
+
+يجب أن يحتوى عنصر `div` على علامة إغلاق.
+
+```js
+assert(
+  code.match(/<\/div>/g) &&
+    code.match(/<div/g) &&
+    code.match(/<\/div>/g).length === code.match(/<div/g).length
+);
+```
+
+جميع عناصر HTML بعد الإغلاق `style` يجب أن تكون داخل `.container-fluid`.
+
+```js
+assert($('.container-fluid').children().length >= 8 && !$('.container-fluid').has("style").length && !$('.container-fluid').has("link").length);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<h2 class="red-text">CatPhotoApp</h2>
+
+<p>Click here for <a href="#">cat photos</a>.</p>
+
+<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+<p>Things cats love:</p>
+<ul>
+  <li>cat nip</li>
+  <li>laser pointers</li>
+  <li>lasagna</li>
+</ul>
+<p>Top 3 things cats hate:</p>
+<ol>
+  <li>flea treatment</li>
+  <li>thunder</li>
+  <li>other cats</li>
+</ol>
+<form action="https://freecatphotoapp.com/submit-cat-photo">
+  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+  <label><input type="checkbox" name="personality"> Loving</label>
+  <label><input type="checkbox" name="personality"> Lazy</label>
+  <label><input type="checkbox" name="personality"> Crazy</label>
+  <input type="text" placeholder="cat photo URL" required>
+  <button type="submit">Submit</button>
+</form>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+<div class="container-fluid">
+  <h2 class="red-text">CatPhotoApp</h2>
+
+<p>Click here for <a href="#">cat photos</a>.</p>
+
+<a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+<p>Things cats love:</p>
+<ul>
+  <li>cat nip</li>
+  <li>laser pointers</li>
+  <li>lasagna</li>
+</ul>
+<p>Top 3 things cats hate:</p>
+<ol>
+  <li>flea treatment</li>
+  <li>thunder</li>
+  <li>other cats</li>
+</ol>
+<form action="https://freecatphotoapp.com/submit-cat-photo">
+  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+  <label><input type="checkbox" name="personality"> Loving</label>
+  <label><input type="checkbox" name="personality"> Lazy</label>
+  <label><input type="checkbox" name="personality"> Crazy</label>
+  <input type="text" placeholder="cat photo URL" required>
+  <button type="submit">Submit</button>
+</form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.md
new file mode 100644
index 00000000000..930b70ca32d
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side.md
@@ -0,0 +1,196 @@
+---
+id: bad88fee1348ce8acef08815
+title: استخدام Bootstrap Grid لوضع العناصر جانب بعضها البعض
+challengeType: 0
+forumTopicId: 18371
+dashedName: use-the-bootstrap-grid-to-put-elements-side-by-side
+---
+
+# --description--
+
+يستخدم Bootstrap نظام شبكة (grid) مستجيبة من 12 عمود، مما يجعل من السهل وضع العناصر في صفوف وتحديد العرض النسبي لكل عنصر. يمكن تطبيق معظم فئات Bootstrap على عنصر `div`.
+
+Bootstrap له خصائص عرض عمود مختلفة يستخدمها اعتمادا على مدى اتساع شاشة المستخدم. على سبيل المثال، الهواتف لديها شاشات ضيقة، وأجهزة الحاسوب المحمولة لديها شاشات أوسع.
+
+خذ على سبيل المثال فئة `col-md-*` الخاص بـ Bootstrap. هنا، `md` يعني المتوسط، و `*` هو رَقْم يحدد عدد الأعمدة التي يجب أن تكون على نطاق العنصر. وفي هذه الحالة، يجري تحديد عرض العمود لعنصر على شاشة متوسطة الحجم، مثل حاسوب محمول.
+
+في Cat Photo App الذي بناءته، سوف نستخدم `col-xs-*`، حيث `xs` يعني صغيرا إضافيا (مثل شاشة الهاتف المحمول الصغيرة للغاية)، و `*` هو عدد الأعمدة التي تحدد عدد الأعمدة التي ينبغي أن تكون واسعة في العنصر.
+
+ضع أزرار `Like`، و `Info` و `Delete` جنبا إلى جنب من طريق تداخل كل الأزرار الثلاثة في `<div class="row">` عنصر، ثم كل واحد منهم ضمن عنصر `<div class="col-xs-4">`.
+
+يتم تطبيق فئة `row` على `div`، ويمكن أن تكون الأزرار نفسها داخله.
+
+# --hints--
+
+يجب أن تكون جميع الأزرار متداخلة داخل نفس عنصر `div` مع الفئة `row`.
+
+```js
+assert($('div.row:has(button)').length > 0);
+```
+
+كل من أزرار Bootstrap الخاصة بك يجب أن تكون متداخلة داخل عنصر `div` الخاص بها مع فئة `col-xs-4`.
+
+```js
+assert($('div.col-xs-4:has(button)').length > 2);
+```
+
+كل عنصر من عناصر `button` الخاص بك يجب أن يحتوي على وسم إغلاق (closing tag).
+
+```js
+assert(
+  code.match(/<\/button>/g) &&
+    code.match(/<button/g) &&
+    code.match(/<\/button>/g).length === code.match(/<button/g).length
+);
+```
+
+كل عنصر من عناصر `div` الخاص بك يجب أن يحتوي على وسم إغلاق (closing tag).
+
+```js
+assert(
+  code.match(/<\/div>/g) &&
+    code.match(/<div/g) &&
+    code.match(/<\/div>/g).length === code.match(/<div/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-block btn-primary">Like</button>
+  <button class="btn btn-block btn-info">Info</button>
+  <button class="btn btn-block btn-danger">Delete</button>
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary">Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">Delete</button>
+    </div>
+  </div>
+
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md
new file mode 100644
index 00000000000..66f0256c6f7
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.md
@@ -0,0 +1,176 @@
+---
+id: bad87fee1348ce8acef08814
+title: تحذير مستخدميك من Dangerous Action باستخدام btn-danger
+challengeType: 0
+forumTopicId: 18375
+dashedName: warn-your-users-of-a-dangerous-action-with-btn-danger
+---
+
+# --description--
+
+Bootstrap يأتي مع عدة ألوان محددة سلفًا للأزرار. فئة `btn-danger` هي لون الزر الذي ستستخدمه لإعلام المستخدمين بأن الزر يعمل كمدمر، مثل حذف صورة القطة.
+
+إنشاء زر باستخدام النص `Delete` وإعطائه الفئة `btn-danger`.
+
+لاحظ أن هذه الأزرار لا تزل تحتاج إلى فئات `btn` و `btn-block`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `button` جديد بالنص `Delete`.
+
+```js
+assert(new RegExp('Delete', 'gi').test($('button').text()));
+```
+
+يجب أن يكون لكل من أزرار Bootstrap الخاص بك فئة `btn` و `btn-block`.
+
+```js
+assert($('button.btn-block.btn').length > 2);
+```
+
+الزر الجديد الخاص بك يجب أن يحتوي على الفئة `btn-danger`.
+
+```js
+assert($('button').hasClass('btn-danger'));
+```
+
+لا بد أن يوجد وسم إغلاق للعناصر `button`.
+
+```js
+assert(
+  code.match(/<\/button>/g) &&
+    code.match(/<button/g) &&
+    code.match(/<\/button>/g).length === code.match(/<button/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-block btn-primary">Like</button>
+  <button class="btn btn-block btn-info">Info</button>
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
+
+# --solutions--
+
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-block btn-primary">Like</button>
+  <button class="btn btn-block btn-info">Info</button>
+  <button class="btn btn-block btn-danger">Delete</button>
+  <p>Things cats love:</p>
+  <ul>
+    <li>cat nip</li>
+    <li>laser pointers</li>
+    <li>lasagna</li>
+  </ul>
+  <p>Top 3 things cats hate:</p>
+  <ol>
+    <li>flea treatment</li>
+    <li>thunder</li>
+    <li>other cats</li>
+  </ol>
+  <form action="https://freecatphotoapp.com/submit-cat-photo">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md
new file mode 100644
index 00000000000..ea4275dc175
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-25-5-clock.md
@@ -0,0 +1,81 @@
+---
+id: bd7158d8c442eddfaeb5bd0f
+title: Build a 25 + 5 Clock
+challengeType: 3
+forumTopicId: 301373
+dashedName: build-a-25--5-clock
+---
+
+# --description--
+
+**متطلبات:** كم ببناء تطبيق يشبه وظيفيا إلي <a href="https://25--5-clock.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://25--5-clock.freecodecamp.rocks</a>.
+
+أكمل قصص المستخدم بالأسفل وأجتاز جميع الاختبارات للنجاح. استخدم أي libraries أو APIs تحتاج إليها. أعطيها أسلوبك الشخصي الخاص.
+
+يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام frontend framework (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم frontend framework. لا ينصح باستخدام التكنولوجيات الإضافية غير المدرجة أعلاه و استخدامها على مسؤوليتك الخاصة. ونحن ننظر في دعم frontend frameworks أخرى، مثل Angular و Vue، ولكنها غير مدعومة حاليا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم حُزْمَة التكنولوجيات المقترحة لهذا المشروع. برمجة سعيدة!
+
+**قصة المستخدم رَقَم 1:** يمكنني رؤية عنصر مع `id="break-label"` الذي يحتوي على سلسلة (على سبيل المثال "Break Length").
+
+**قصة المستخدم #2:** يمكنني رؤية عنصر مع `id="session-label"` الذي يحتوي على سلسلة (على سبيل المثال "Session Length").
+
+**قصة المستخدم #3:** يمكنني أن أرى عنصرين يمكن النقر عليهما معرفين بشكل: `id="break-decrement"` و `id="session-decrement"`.
+
+**قصة المستخدم #4:** يمكنني أن أرى عنصرين يمكن النقر عليهما معرفين بشكل: `id="break-increment"` و `id="session-increment"`.
+
+**قصة المستخدم #5:** يمكنني مشاهدة عنصر مع `id="break-length"`, الذي يعرض (display) بشكل افتراضي (في التحميل) بقيمة 5.
+
+**قصة المستخدم #6:** يمكنني أن أرى عنصرا مع `id="session-length"`، الذي يعرض بشكل افتراضي بقيمة 25.
+
+**قصة المستخدم #7:** يمكنني أن أرى عنصرا مع `id="timer-label"`، يحتوي على سلسلة تشير إلى أن الجَلسة تم تهيئتها ("e.g. "Session).
+
+**قصة المستخدم #8:** يمكنني مشاهدة عنصر مع `id="time-left"`. ملاحظة: أيقاف أو تشغيل القيمة في هذا الحقل يجب أن تظهر دائما بصيغة `mm:ss` (مثل 25:00).
+
+**قصة المستخدم #9:** يمكنني رؤية عنصر قابل للنقر مع `id="start_stop"`.
+
+**قصة المستخدم #10:** يمكنني رؤية عنصر قابل للنقر مع `id="reset"`.
+
+**قصة المستخدم #11:** عندما أنقر على العنصر مع معرف `reset`، أي مؤقت قيد التشغيل يجب إيقافه، القيمة ضمن `id="break-length"` يجب أن تنتج `5`، القيمة ضمن `id="session-length"` يجب أن تعود إلى 25، والعنصر مع `id="time-left"` يجب أن يعاد تعيينه إلى حالته الافتراضية.
+
+**قصة المستخدم #12:** عندما أنقر على العنصر مع معرف `break-decrement`، القيمة ضمن `id="break-length"` مراسيم بقيمة 1، ويمكنني أن أرى القيمة المحدثة.
+
+**قصة المستخدم #13:** عندما أنقر على العنصر مع معرف `break-increment`، القيمة ضمن `id="break-length"` زيادة بقيمة 1، ويمكنني أن أرى القيمة المحدثة.
+
+**قصة المستخدم #14:** عندما أنقر على العنصر مع معرف `session-decrement`، القيمة ضمن `id="session-length"` تقل بقيمة 1، ويمكنني أن أرى القيمة المحدثة.
+
+**قصة المستخدم #15:** عندما أنقر على العنصر مع معرف `session-increment`، القيمة ضمن `id="session-length"` تزداد بقيمة 1، ويمكنني أن أرى القيمة المحدثة.
+
+**قصة المستخدم #16:** يجب ألا أكون قادرا على تعيين جَلسة أو طول الاستراحة إلى &lt;= 0.
+
+**قصة المستخدم #17:** يجب ألا أكون قادرا على تعيين جَلسة أو طول الاستراحة إلى > 60.
+
+**قصة المستخدم #18:** عندما أنقر أول مرة على العنصر باستخدام `id="start_stop"`، يجب أن يبدأ المؤقت تشغيل من القيمة المعروضة حاليا في `id="session-length"`، حتى إذا تم زيادة القيمة أو تخفيضها من القيمة الأصلية البالغة 25.
+
+**قصة المستخدم #19:** إذا كان المؤقت قيد التشغيل، يجب أن يعرض العنصر الذي يحتوي على معرف `time-left` الوقت المتبقي في تنسيق `mm:ss` (قلل القيمة مرة 1 وتحديث العرض كل 1000ms).
+
+**قصة المستخدم #20:** إذا كان المؤقت قيد التشغيل وانقر على العنصر مع `id="start_stop"`، يجب أن يتوقف العد التنازلي.
+
+**قصة المستخدم #21:** إذا تم إيقاف مؤقت وانقر على العنصر مع `id="start_stop"`، وينبغي أن يستأنف العد التنازلي من النقطة التي توقف عندها العد.
+
+**قصة المستخدم #22:** عندما يصل العد التنازلي للجلسات إلى صفر (لاحظ: مؤقت يصل إلى 00:00)، ويبدأ العد التنازلي جديد، يجب أن يعرض العنصر الذي يحتوي على معرف `timer-label` سلسلة تشير إلى أن مدّة الاستراحة قد بدأت.
+
+**قصة المستخدم #23:** عندما يصل العد التنازلي للجلسات إلى صفر (لاحظ: مؤقت يصل إلى 00:00)، ينبغي أن يبدأ العد التنازلي الجديد في الاستراحة، مع العد التنازلي من القيمة المعروضة حاليا في عنصر `id="break-length"`.
+
+**قصة المستخدم #24:** عندما يصل العد التنازلي للاستراحة إلى صفر (لاحظ: مؤقت يصل إلى 00:00)، ويبدأ العد التنازلي جديد، يجب أن يعرض العنصر الذي يحتوي على معرف `timer-label` سلسلة تشير إلى أن مدّة للجلسات قد بدأت.
+
+**قصة المستخدم #25:** عندما يصل العد التنازلي للاستراحة إلى صفر (لاحظ: مؤقت يصل إلى 00:00)، ينبغي أن يبدأ العد التنازلي الجديد في الجلسات، مع العد التنازلي من القيمة المعروضة حاليا في عنصر `id="session-length"`.
+
+**قصة المستخدم #26:** عندما يصل العد التنازلي إلى صفر (لاحظ: المؤقت يجب أن يصل إلى 00:00)، يجب تشغيل صوت يشير إلى أن الوقت في الأعلى. يجب أن تستخدم هذا وسم `audio` في HTML5 وأن يحتوي على `id="beep"`.
+
+**قصة المستخدم #27:** عنصر الصوت مع `id="beep"` يجب أن يكون ثانية واحدة أو أكثر.
+
+**قصة المستخدم #28:** عنصر الصوت مع معرف `beep` يجب أن يتوقف عن التشغيل وأن يعاد جرح إلى البداية عند النقر على العنصر مع معرف `reset`.
+
+يمكنك بناء مشروعك عن طريق <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">استخدام هذا نموذج CodePen</a> والنقر على `Save` لإنشاء طبقيك الخاص بك. أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+بمجرد أن تنتهي، إرسال عنوان URL لمشروع العمل الخاص بك مع اجتياز جميع الاختبارات.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
new file mode 100644
index 00000000000..7f6cdf99636
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-drum-machine.md
@@ -0,0 +1,51 @@
+---
+id: 587d7dbc367417b2b2512bae
+title: أنشاء Drum Machine
+challengeType: 3
+forumTopicId: 301370
+dashedName: build-a-drum-machine
+---
+
+# --description--
+
+**متطلبات:** كم ببناء تطبيق يشبه وظيفيا إلي <a href="https://drum-machine.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://drum-machine.freecodecamp.rocks/</a>.
+
+أكمل قصص المستخدم بالأسفل وأجتاز جميع الاختبارات للنجاح. استخدم أي libraries أو APIs تحتاج إليها. أعطيها أسلوبك الشخصي الخاص.
+
+يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام frontend framework (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم frontend framework. لا ينصح باستخدام التكنولوجيات الإضافية غير المدرجة أعلاه و استخدامها على مسؤوليتك الخاصة. ونحن ننظر في دعم frontend frameworks أخرى، مثل Angular و Vue، ولكنها غير مدعومة حاليا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم حُزْمَة التكنولوجيات المقترحة لهذا المشروع. برمجة سعيدة!
+
+**قصة المستخدم رقم 1:** يجب أن أكون قادرا على رؤية حاوية خارجية ذات `id="drum-machine"` تحتوي على جميع العناصر الأخرى.
+
+**قصة المستخدم #2:** في `#drum-machine` يمكنني رؤية عنصر يحمل `id="display"`.
+
+**قصة المستخدم #3:** في `#drum-machine` يمكنني أن أرى 9 عناصر لوحة الطبل القابلة للنقر، كل منها يحمل اسم فئة من `drum-pad`, معرف فريد يصف مقطع الصوت الذي سيتم إعداد لوحة الطبل للتشغيل، ونص داخلي يقابل أحد المفاتيح التالية على لوحة المفاتيح: `Q`، و`W`، و`E`، و`A`، و`S`، و`D`، و`Z`، و`X`، و`C`. لوحات الطبل (drum pads) تكن بهذا الترتيب.
+
+**قصة المستخدم #4:** داخل كل `.drum-pad`، يجب أن يكون هناك عنصر HTML5 صوتي `audio` يحتوي على سمة `src` يشير إلى قالب صوتي، اسم فئة من `clip` ومعرف موافق النص الداخلي لأبيه `.drum-pad` (على سبيل المثال `id="Q"`، و`id="W"`، و`id="E"`، إلخ.
+
+**قصة المستخدم #4:** عندما أضغت على عنصر `.drum-pad`, يشتغل الصوت المسجل في عنصر `audio` الإبن.
+
+**قصة المستخدم #6:** عندما أضغط على مفتاح المشغل المرتبط بكل `.drum-pad`، يجب تشغيل المقطع الصوتي الموجود في عنصر صوت `audio` الأبن (مثلاً الضغط على مفتاح `Q` يجب أن يفعل لوحة الطبل الذي تحتوي على السلسلة `Q`، الضغط على مفتاح `W` يجب أن يطلق لوحة الطبل الذي تحتوي على السلسلة `W` وما إلى ذلك).
+
+**قصة المستخدم #7:** عندما `.drum-pad`، يتم عرض سلسلة تصف مقطع الصوت المرتبط به كالنص الداخلي لعنصر `#display` (يجب أن تكون كل سلسلة فريدة من نوعها).
+
+فيما يلي بعض العينات الصوتية التي يمكنك استخدامها لآلة الطبل الخاصة بك:
+
+- [Heater 1](https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3)
+- [Heater 2](https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3)
+- [Heater 3](https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3)
+- [Heater 4](https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3)
+- [Clap](https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3)
+- [Open-HH](https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3)
+- [Kick-n'-Hat](https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3)
+- [Kick](https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3)
+- [Closed-HH](https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3)
+
+يمكنك بناء مشروعك عن طريق <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel="noopener noreferrer nofollow">استخدام هذا نموذج CodePen</a> والنقر على `Save` لإنشاء طبقيك الخاص بك. أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+بمجرد أن تنتهي، ارسل عنوان URL لمشروع العمل الخاص بك مع اجتياز جميع الاختبارات.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md
new file mode 100644
index 00000000000..943d7956ed7
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-javascript-calculator.md
@@ -0,0 +1,62 @@
+---
+id: bd7158d8c442eddfaeb5bd17
+title: بناء حاسبة باستخدام JavaScript
+challengeType: 3
+forumTopicId: 301371
+dashedName: build-a-javascript-calculator
+---
+
+# --description--
+
+**متطلبات:** كم ببناء تطبيق يشبه وظيفيا إلي <a href="https://javascript-calculator.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://javascript-calculator.freecodecamp.rocks/</a>.
+
+أكمل قصص المستخدم بالأسفل وأجتاز جميع الاختبارات للنجاح. استخدم أي libraries أو APIs تحتاج إليها. أعطيها أسلوبك الشخصي الخاص.
+
+يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام frontend framework (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم frontend framework. لا ينصح باستخدام التكنولوجيات الإضافية غير المدرجة أعلاه و استخدامها على مسؤوليتك الخاصة. ونحن ننظر في دعم frontend frameworks أخرى، مثل Angular و Vue، ولكنها غير مدعومة حاليا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم حُزْمَة التكنولوجيات المقترحة لهذا المشروع. برمجة سعيدة!
+
+**قصة المستخدم #1:** آلة حاسبة يجب أن تحتوي على عنصر قابل للنقر يحتوي على `=` (علامة متساوية) مع ما يقابلها `id="equals"`.
+
+**قصة المستخدم #2:** آلة حاسبة الخاصة بي يجب أن تحتوي على 10 عناصر قابلة للنقر تحتوي على أرقام تبدأ من 0 ألى 9 مع المعرف المقابل التالي: `id="zero"`، و`id="one"`, و`id="two"`, و`id="three"`, و`id="four"`, و`id="five"`, و`id="six"`، و`id="seven"`, و`id="eight"`، و`id="nine"`.
+
+**قصة المستخدم #3:** آلة حاسبة الخاصة بي يجب أن تحتوي على 4 عناصر قابلة للنقر يحتوي كل منها على واحد من أربع عمليات رياضية أساسية لهم المعرفات المطابقة التالية: `id="add"`، و`id="subtract"`، و`id="multiply"`، و`id="divide"`.
+
+**قصة المستخدم #4:** آلة حاسبة يجب أن تحتوي على عنصر قابل للنقر يحتوي على `.` رمز (النقطة العشرية) مع ما مطابقه `id="decimal"`.
+
+**قصة المستخدم #5:** آلة حاسبة الخاصة بي يجب أن تحتوي على عنصر قابل للنقر مع `id="clear"`.
+
+**قصة المستخدم #6:** آلة حاسبة الخاصة بي يجب أن تحتوي على عنصر لعرض القيم مع مطابقه `id="display"`.
+
+**قصة المستخدم #7:** في أي وقت، الضغط على زر `clear` يؤدي إلى مسح قيم الإدخال والإخراج، ويعيد الآلة الحاسبة إلى حالتها المبدئية؛ 0 يجب أن يظهر في العنصر بمعرف `display`.
+
+**قصة المستخدم #8:** مع إدخال الأرقام، يجب أن أكون قادراً على رؤية مدخلاتي في العنصر مع معرف `display`.
+
+**قصة المستخدم #9:** في أي ترتيب، يجب أن أكون قادرا على الإضافة، طرح ضرب وقسم سلسلة من الأعداد من أي كَمَيَّة، وعندما ضغط على `=`، النتيجة الصحيحة يجب أن تظهر في العنصر مع معرف `display`.
+
+**قصة المستخدم #10:** عند إدخال الأرقام، يجب ألا تسمح آلة الحاسبة الخاصة بي لعدد أن يبدأ بعدة أصفار.
+
+**قصة المستخدم #11:** عند النقر على العنصر العشري، `.` يجب إلحاق القيمة المعروضة حالياً؛ اثنان `.` في رَقْم واحد يجب عدم قبوله.
+
+**قصة المستخدم #12:** يجب أن أكون قادرا على تنفيذ أي عملية (`+`، و`-`, و`*`, و`/`) على الأرقام التي تحتوي على النُّقَط العشرية.
+
+**قصة المستخدم #13:** إذا تم إدخال عملتين اثنين أو أكثر على التوالي، يجب أن تكون العملية المنفذة هي آخر عملية أُدخلت (باستثناء علامة السالب (`-`). على سبيل المثال، إذا تم إدخال `5 + * 7 =`، يجب أن تكون النتيجة `35` (بمعنى `5 * 7`)؛ إذا تم إدخال `5 * - 5 =`، ينبغي أن تكون النتيجة `-25` (مثل `5 * (-5)`).
+
+**قصة المستخدم #14:** الضغط على المشغل مباشرة بعد `=` يجب أن يبدأ حساب جديد يعمل بناء على نتيجة التقييم السابق.
+
+**قصة المستخدم #15:** آلة حاسبة الخاصة بي يجب أن تكون دقيقة بالنسبة لعدد أرقام عشرية عندما يتعلق الأمر بالتقريب (لاحظ أنه لا يوجد معيار دقيق، ولكن يجب أن تكون قادراً على التعامل مع حسابات مثل `2 / 7` بدقة معقولة إلى 4 أرقام عشرية في الأقل).
+
+**ملاحظة على منطق الحاسبة:** لاحظ إلى أن هناك مدرستين فكريتين رئيستين على منطق إدخال الحاسبة: <dfn>منطق التنفيذ الفوري (immediate execution logic)</dfn> و <dfn>منطق الصيغة (formula logic)</dfn>. ويستخدم مثالنا منطق الصيغة ويراعي ترتيب الأسبقية في العمليات، ولا يطبق التنفيذ الفوري. أحدهما مقبول، ولكن يرجى ملاحظة ذلك اعتمادا على أختيارك، الحاسبة الخاصة بك قد تنتج نتائج مختلفة عن النتائج الخاصة بنا في معادلات معينة (انظر أدناه على سبيل المثال). مادام أنه يمكن التحقق من حساباتك بواسطة آلة حاسبة إنتاج أخرى، يرجى عدم اعتبار هذا خطأ.
+
+**مثال:** `3 + 5 x 6 - 2 / 4 =`
+
+-   **منطق التنفيذ الفوري:** `11.5`
+-   **الصيغة/منطق التعبير:** `32.5`
+
+يمكنك بناء مشروعك عن طريق <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">استخدام هذا نموذج CodePen</a> والنقر على `Save` لإنشاء طبقيك الخاص بك. أو يمكنك استخدام رابط الـ CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+بمجرد أن تنتهي، ارسل عنوان URL لمشروع العمل الخاص بك مع اجتياز جميع الاختبارات.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md
new file mode 100644
index 00000000000..6a715529146
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-markdown-previewer.md
@@ -0,0 +1,39 @@
+---
+id: bd7157d8c242eddfaeb5bd13
+title: بناء عارض Markdown
+challengeType: 3
+forumTopicId: 301372
+dashedName: build-a-markdown-previewer
+---
+
+# --description--
+
+**متطلبات:** كم ببناء تطبيق يشبه وظيفيا إلي <a href="https://markdown-previewer.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://markdown-previewer.freecodecamp.rocks/</a>.
+
+أكمل قصص المستخدم بالأسفل وأجتاز جميع الاختبارات للنجاح. استخدم أي libraries أو APIs تحتاج إليها. أعطيها أسلوبك الشخصي الخاص.
+
+يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام frontend framework (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم frontend framework. لا ينصح باستخدام التكنولوجيات الإضافية غير المدرجة أعلاه و استخدامها على مسؤوليتك الخاصة. ونحن ننظر في دعم frontend frameworks أخرى، مثل Angular و Vue، ولكنها غير مدعومة حاليا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم حُزْمَة التكنولوجيات المقترحة لهذا المشروع. برمجة سعيدة!
+
+**قصة المستخدم رقم 1:** يمكنني أن أرى عنصر `textarea` مع مطابقة `id="editor"`.
+
+**قصة المستخدم رقم 2:** يمكنني رؤية عنصر مع `id="preview"`.
+
+**قصة المستخدم #3:** عندما أدخل النص في `#editor` عنصر, يتم تحديث عنصر `#preview` عندما أكتب لعرض محتوى النصوص.
+
+**قصة المستخدم #4:** عندما أدخل علامة GitHub في `#editor`، يتم تقديم النص كعنصر HTML في `#preview` كما أكتبه (تلميح: لا تحتج إلى تحليل Markdown بنفسك - يمكنك استيراد المكتبة المعلَّمة لهذا الغرض: <https://cdnjs.com/libraries/marked>).
+
+**قصة المستخدم #5:** عندما تقوم معاينة العلامات بالتحميل أول مرة، النص الافتراضي في `#editor` الحقل يجب أن يحتوي على علامة صحيحة تمثل في الأقل واحدا من كل عنصر من العناصر التالية: عنصر العنوان (H1 size)، عنصر عنوان فرعي (H2 size)، ورابط (link)، ورمز داخلي (inline code)، وكتلة رموز (code block)، وعنصر قائمة (list item)، وكتلة (blockquote)، صورة (image) ونص بحروف داكنة (bolded text).
+
+**قصة المستخدم #6:** عندما تقوم معاينة العلامات (markdown previewer) بالتحميل أول مرة، يجب تقديم العلامات (markdown) الافتراضية في الحقل `#editor` تتكون من HTML في عنصر `#preview`.
+
+**أختبار اختياري (أنت لست بحاجة إلى اجتياز هذا الاختبار):** عينة العرض الخاص بي تفسر إرجاع النقل وتجعلها كعناصر `br` (راحة سطر).
+
+يمكنك بناء مشروعك عن طريق <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">استخدام هذا نموذج CodePen</a> والنقر على `Save` لإنشاء طبقيك الخاص بك. أو يمكنك استخدام رابط CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+بمجرد أن تنتهي، أرسل عنوان URL لمشروع العمل الخاص بك مع اجتياز جميع الاختبارات.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md
new file mode 100644
index 00000000000..d4af045655a
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/front-end-development-libraries-projects/build-a-random-quote-machine.md
@@ -0,0 +1,49 @@
+---
+id: bd7158d8c442eddfaeb5bd13
+title: بناء آلة Random Quote
+challengeType: 3
+forumTopicId: 301374
+dashedName: build-a-random-quote-machine
+---
+
+# --description--
+
+**متطلبات:** كم ببناء تطبيق يشبه وظيفيا إلي <a href="https://random-quote-machine.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://random-quote-machine.freecodecamp.rocks/</a>.
+
+أكمل قصص المستخدم بالأسفل وأجتاز جميع الاختبارات للنجاح. استخدم أي libraries أو APIs تحتاج إليها. أعطيها أسلوبك الشخصي الخاص.
+
+يمكنك استخدام أي مزيج من HTML و JavaScript و CSS و Bootstrap و SASS و React و Redux و jQuery لإكمال هذا المشروع. يجب عليك استخدام frontend framework (مثل React على سبيل المثال) لأن هذا القسم يدور حول تعلم frontend framework. لا ينصح باستخدام التكنولوجيات الإضافية غير المدرجة أعلاه و استخدامها على مسؤوليتك الخاصة. ونحن ننظر في دعم frontend frameworks أخرى، مثل Angular و Vue، ولكنها غير مدعومة حاليا. سنقبل ونحاول إصلاح جميع تقارير المشكلات التي تستخدم حُزْمَة التكنولوجيات المقترحة لهذا المشروع. برمجة سعيدة!
+
+**قصة المستخدم رقم 1:** يمكنني رؤية عنصر تغليف مع `id="quote-box"`.
+
+**قصة المستخدم #2:** في `#quote-box`، يمكنني أن أرى عنصرا يحتوي `id="text"`.
+
+**قصة المستخدم #3:** في `#quote-box`، يمكنني أن أرى عنصرا يحتوي `id="author"`.
+
+**قصة المستخدم #4:** في `#quote-box`، يمكنني رؤية عنصر قابل للنقر مع `id="new-quote"`.
+
+**قصة المستخدم #5:** في `#quote-box`، يمكنني رؤية عنصر قابل للنقر `a` مع عنصر يحتوي `id="tweet-quote"`.
+
+**قصة المستخدم #6:** عند التحميل ألأوله، تعرض آلة الاقتباس الخاصة بي اقتباس عشوائي في العنصر مع `id="text"`.
+
+**قصة المستخدم #7:** عند التحميل الأول، تعرض آلة الاقتباس الخاصة بي مؤلف الاقتباس العشوائي في العنصر مع `id="author"`.
+
+**قصة المستخدم #8:** عندما يتم النقر على زر `#new-quote`، آلة الاقتباس الخاصة بي يجب أن تجلب اقتباساً جديداً وأن تعرضه في عنصر `#text`.
+
+**قصة المستخدم #9:** آلة الاقتباس الخاصة بي يجب أن تجلب مؤلف الاقتباس الجديد عندما يتم النقر على زر `#new-quote` وعرضه في عنصر `#author`.
+
+**قصة المستخدم #10:** يمكنني تغليف الاقتباس الحالي بالنقر على `#tweet-quote` في `a` عنصر. هذا عنصر `a` يجب أن يتضمن `"twitter.com/intent/tweet"` في السمة `href` لتغريد الاقتباس الحالي.
+
+**قصة المستخدم #11:** عنصر تغليف `#quote-box` يجب أن يكون مركزيا أفقيا. يرجى إجراء الاختبارات مع تكبير مستوى المتصفح بنسبة 100% وتعظيم الصفحة.
+
+يمكنك بناء مشروعك عن طريق <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">استخدام هذا نموذج CodePen</a> والنقر على `Save` لإنشاء طبقيك الخاص بك. أو يمكنك استخدام رابط الـ CDN هذا لتشغيل الاختبارات في أي بيئة تفضلها: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+بمجرد أن تنتهي، ارسل عنوان URL لمشروع العمل الخاص بك مع اجتياز جميع الاختبارات.
+
+**ملاحظة:** twitter لا يسمح بتحميل الروابط في iframe. حاول استخدام `target="_blank"` أو `target="_top"` سمة على عنصر `#tweet-quote` إذا لم يتم تحميل التغريدة الخاصة بك. `target="_top"` سوف يحل محل علامة التبويب الحالية لتتيقن من حفظ عملك.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md
new file mode 100644
index 00000000000..52b017141a3
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/change-text-inside-an-element-using-jquery.md
@@ -0,0 +1,131 @@
+---
+id: 564944c91be2204b269d51e3
+title: تغيير النص داخل عنصر باستخدام jQuery
+challengeType: 6
+forumTopicId: 16773
+dashedName: change-text-inside-an-element-using-jquery
+---
+
+# --description--
+
+باستخدام jQuery، يمكنك تغيير النص بين علامات البداية والنهاية لعنصر ما. يمكنك حتى تغيير علامة HTML.
+
+jQuery لديه دالة تسمى `.html()` التي تتيح لك إضافة وسوم HTML ونص داخل عنصر ما. سيتم استبدال أي محتوى سابق داخل العنصر بالكامل بالمحتوى الذي توفره باستخدام هذه الوظيفة.
+
+إليك كيفية إعادة الكتابة والتأكيد على نص عنواننا:
+
+```js
+$("h3").html("<em>jQuery Playground</em>");
+```
+
+jQuery لديه أيضا وظيفة مماثلة تسمى `.text()` التي تغير النص فقط دون إضافة العلامات. بعبارة أخرى، هذه الوظيفة لن تقيّم أي وسوم HTML انتقلت إليها، ولكن عوضا عن ذلك سوف يعامل كالنص الذي تريد استبدال المحتوى الحالي به.
+
+تغيير الزر مع معرف `target4` بالتشديد على نصه.
+
+<a href="https://www.freecodecamp.org/news/html-elements-explained-what-are-html-tags/#em-element" target="_blank" rel="noopener noreferrer nofollow">زور مقالاتنا الإخبارية &lt;em&gt;</a> لتعلم الفرق بين `<i>` و `<em>` واستخداماتها.
+
+لاحظ أنه في حين أن العلامة `<i>` تستخدم تقليديا للتأكيد على النص، وقد اعتمد منذ ذلك الحين لاستخدامه كعلامة على الأيقونة. العلامة `<em>` مقبولة الآن على نطاق واسع بوصفها العلامة التي تحتاج إلى تأكيد. وسيعمل أي منهما على مواجهة هذا التحدي.
+
+# --hints--
+
+يجب أن تشدد على النص في زر `target4` الخاص بك عن طريق إضافة وسوم HTML.
+
+```js
+assert.isTrue(
+  /<em>|<i>\s*#target4\s*<\/em>|<\/i>/gi.test($('#target4').html())
+);
+```
+
+وخلافا لذلك، ينبغي أن يظل النص دون تغيير.
+
+```js
+assert($('#target4') && $('#target4').text().trim() === '#target4');
+```
+
+لا يجب عليك تغيير أي نص آخر.
+
+```js
+assert.isFalse(/<em>|<i>/gi.test($('h3').html()));
+```
+
+يجب أن تستخدم `.html()` وليس `.text()`.
+
+```js
+assert(code.match(/\.html\(/g));
+```
+
+يجب عليك تحديد `button id="target4"` باستخدام jQuery.
+
+```js
+assert(code.match(/\$\(\s*?(\"|\')#target4(\"|\')\s*?\)\.html\(/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target4").html('<em>#target4</em>');
+  });
+</script>
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/change-the-css-of-an-element-using-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/change-the-css-of-an-element-using-jquery.md
new file mode 100644
index 00000000000..5ad6fe32631
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/change-the-css-of-an-element-using-jquery.md
@@ -0,0 +1,119 @@
+---
+id: bad87fee1348bd9aed908826
+title: تغيير CSS لعنصر باستخدام jQuery
+challengeType: 6
+forumTopicId: 16776
+required:
+  - 
+    link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
+dashedName: change-the-css-of-an-element-using-jquery
+---
+
+# --description--
+
+يمكننا أيضا تغيير CSS لعنصر HTML مباشرة باستخدام jQuery.
+
+jQuery لديه دالة تسمى `.css()` تسمح لك بتغيير CSS لعنصر ما.
+
+هنا كيف يمكننا تغيير لونه إلى اللون الأزرق:
+
+```js
+$("#target1").css("color", "blue");
+```
+
+هذا يختلف قليلاً عن إعلان CSS العادي، لأن خاصية CSS وقيمتها موجودة في علامات اقتباس، وفصلت بفاصلة (,) بدلاً من علامة الترقيم (:).
+
+احذف محددات jQuery الخاصة بك، أترك `document ready function` فارغة.
+
+أستهدف `target1` و غيّر لونه إلى أحمر.
+
+# --hints--
+
+يجب أن يكون عنصر `target1` الخاص بك نص أحمر.
+
+```js
+assert($('#target1').css('color') === 'rgb(255, 0, 0)');
+```
+
+يجب عليك استخدام jQuery فقط لإضافة هذه الفئات إلى العنصر.
+
+```js
+assert(!code.match(/class.*animated/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+    $(".well").addClass("animated shake");
+    $("#target3").addClass("animated fadeOut");
+    $("button").removeClass("btn-default");
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+    $(".well").addClass("animated shake");
+    $("#target3").addClass("animated fadeOut");
+    $("button").removeClass("btn-default");
+    $("#target1").css("color", "red");
+  });
+</script>
+
+<!-- Only change code above this line -->
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/clone-an-element-using-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/clone-an-element-using-jquery.md
new file mode 100644
index 00000000000..5a3c2cb911d
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/clone-an-element-using-jquery.md
@@ -0,0 +1,121 @@
+---
+id: bad87fee1348bd9aed508826
+title: استنساخ عنصر باستخدام jQuery
+challengeType: 6
+forumTopicId: 16780
+dashedName: clone-an-element-using-jquery
+---
+
+# --description--
+
+بالإضافة إلى نقل العناصر، يمكنك أيضا نسخها من مكان إلى آخر.
+
+jQuery لديه عملية تسمى `clone()` التي تقوم بنسخة من عنصر.
+
+على سبيل المثال، إذا أردنا نسخ `target2` من `left-well` إلى `right-well`، سنستخدم:
+
+```js
+$("#target2").clone().appendTo("#right-well");
+```
+
+هل لاحظت أن هذا ينطوي على تثبيت وظيفتين من دالات jQuery معاً؟ هذا يسمى <dfn>سلسلة وظائف</dfn> وهي طريقة مناسبة لعمل المهام باستخدام jQuery.
+
+استنسخ عنصر `target5` وبعده `left-well` الخاص بك.
+
+# --hints--
+
+عنصر `target5` الخاص بك يجب أن يكون داخل `right-well` الخاص بك.
+
+```js
+assert($('#right-well').children('#target5').length > 0);
+```
+
+يجب أن تكون نسخة من عنصر `target5` داخل `left-well`.
+
+```js
+assert($('#left-well').children('#target5').length > 0);
+```
+
+يجب عليك استخدام jQuery فقط لنقل هذه العناصر.
+
+```js
+assert(!code.match(/class.*animated/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/delete-your-jquery-functions.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/delete-your-jquery-functions.md
new file mode 100644
index 00000000000..6b09808d9b1
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/delete-your-jquery-functions.md
@@ -0,0 +1,125 @@
+---
+id: bad87fee1348bd9aeda08726
+title: حذف وظائف jQuery الخاصة بك
+challengeType: 6
+forumTopicId: 17561
+required:
+  - 
+    link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
+dashedName: delete-your-jquery-functions
+---
+
+# --description--
+
+هذه الرسوم المتحركة كانت رائعة في البداية، لكنها الآن تشتت ألانتباه نوعا ما.
+
+احذف جميع وظائف jQuery الثلاث هذه `document ready function` الخاصة بك، ولكن اترك `document ready function` نفسها سليمة.
+
+# --hints--
+
+يجب حذف جميع وظائف jQuery الثلاث الخاصة بك من `document ready function`.
+
+```js
+assert(code.match(/\{\s*\}\);/g));
+```
+
+يجب أن تترك عنصر `script` سليما.
+
+```js
+assert(code.match(/<script>/g));
+```
+
+يجب أن تترك `$(document).ready(function() {` في بداية عنصر `script` الخاص بك.
+
+```js
+assert(code.match(/\$\(document\)\.ready\(function\(\)\s?\{/g));
+```
+
+يجب أن تترك `document.ready` وظيفة الإغلاق `})` سليمة.
+
+```js
+assert(code.match(/.*\s*\}\);/g));
+```
+
+يجب أن تترك علامة إغلاق عنصر `script` سليمة.
+
+```js
+assert(
+  code.match(/<\/script>/g) &&
+    code.match(/<script/g) &&
+    code.match(/<\/script>/g).length === code.match(/<script/g).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+    $(".well").addClass("animated shake");
+    $("#target3").addClass("animated fadeOut");
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/disable-an-element-using-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/disable-an-element-using-jquery.md
new file mode 100644
index 00000000000..ae39e950db9
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/disable-an-element-using-jquery.md
@@ -0,0 +1,120 @@
+---
+id: bad87fee1348bd9aed808826
+title: تعطيل عنصر باستخدام jQuery
+challengeType: 6
+forumTopicId: 17563
+dashedName: disable-an-element-using-jquery
+---
+
+# --description--
+
+يمكنك أيضًا تغيير الخصائص non-CSS لعناصر HTML باستخدام jQuery. على سبيل المثال، يمكنك تعطيل الأزرار.
+
+عندما تعطيل الزر، فإنه سيصبح رماديًا ولا يمكن النقر عليه بعد الآن.
+
+jQuery لديه وظيفة تسمى `.prop()` تسمح لك بضبط خصائص العناصر.
+
+إليك كيف يمكنك تعطيل جميع الأزرار:
+
+```js
+$("button").prop("disabled", true);
+```
+
+تعطيل زر `target1` فقط.
+
+# --hints--
+
+يجب تعطيل زر `target1` الخاص بك.
+
+```js
+assert(
+  $('#target1') &&
+    $('#target1').prop('disabled') &&
+    code.match(/["']disabled["'],( true|true)/g)
+);
+```
+
+لا يجب تعطيل أي أزرار أخرى.
+
+```js
+assert($('#target2') && !$('#target2').prop('disabled'));
+```
+
+يجب عليك استخدام jQuery فقط لإضافة هذه الفئات إلى العنصر.
+
+```js
+assert(!code.match(/disabled[^<]*>/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/learn-how-script-tags-and-document-ready-work.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/learn-how-script-tags-and-document-ready-work.md
new file mode 100644
index 00000000000..26032c1c56b
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/learn-how-script-tags-and-document-ready-work.md
@@ -0,0 +1,118 @@
+---
+id: bad87fee1348bd9acdd08826
+title: تعلم كيف يمكن وضع علامات Script وعمل Document محضرا
+challengeType: 6
+forumTopicId: 18224
+dashedName: learn-how-script-tags-and-document-ready-work
+---
+
+# --description--
+
+نحن الآن مستعدون لتعلم jQuery، أداة JavaScript الأكثر شعبية في جميع الأوقات.
+
+قبل أن نتمكن من استخدام jQuery، نحتاج إلى إضافة بعض الأشياء إلى HTML.
+
+أولا، إضافة عنصر `script` في الجزء العلوي من الصفحة. تيقن من إغلاقه على السطر التالي.
+
+سيقوم متصفحك بتشغيل أي JavaScript داخل عنصر `script`، بما في ذلك jQuery.
+
+في داخل عنصر البرنامَج `script` الخاص بك، أضف هذا الرمز: `$(document).ready(function() {` إلى `script` الخاص بك. ثم أغلقه على السطر التالي (لا يزال داخل عنصر `script` الخاص بك) مع: `});`
+
+سنتعلم المزيد عن `functions` لاحقاً. الشيء المهم الذي يجب أن نعلمه هو أن التعليمات البرمجية التي تضعها داخل هذه `function` سيتم تشغيلها بمجرد أن يقوم المتصفح بتحميل صفحتك.
+
+هذا مهم لأنه دون أن يعمل `document ready function`, قد يعمل تعليماتك البرمجية قبل أن يتم تقديم HTML الخاص بك، ما من شأنه أن يسبب أخطاء.
+
+# --hints--
+
+يجب عليك إنشاء `script` للتأكد من أنه صالح ولديه علامة إغلاق.
+
+```js
+assert(
+  code.match(/<\/script\s*>/g) &&
+    code.match(
+      /<script(\sasync|\sdefer)*(\s(charset|src|type)\s*=\s*["\"]+[^"\"]*["\"]+)*(\sasync|\sdefer)*\s*>/g
+    ) &&
+    code.match(/<\/script\s*>/g).length ===
+      code.match(
+        /<script(\sasync|\sdefer)*(\s(charset|src|type)\s*=\s*["\"]+[^"\"]*["\"]+)*(\sasync|\sdefer)*\s*>/g
+      ).length
+);
+```
+
+يجب عليك إضافة `$(document).ready(function() {` إلى بداية عنصر `script` الخاص بك.
+
+```js
+assert(
+  code.match(
+    /\$\s*?\(\s*?document\s*?\)\.ready\s*?\(\s*?function\s*?\(\s*?\)\s*?\{/g
+  )
+);
+```
+
+يجب عليك إغلاق وظيفة `$(document).ready(function() {` مع `});`
+
+```js
+assert(code.match(/\n*?\s*?\}\s*?\);/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+  });
+</script>
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/remove-an-element-using-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/remove-an-element-using-jquery.md
new file mode 100644
index 00000000000..5aeb1a4f6a1
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/remove-an-element-using-jquery.md
@@ -0,0 +1,109 @@
+---
+id: bad87fee1348bd9aed708826
+title: إزالة عنصر باستخدام jQuery
+challengeType: 6
+forumTopicId: 18262
+dashedName: remove-an-element-using-jquery
+---
+
+# --description--
+
+الآن أزل عنصر HTML من صفحتك باستخدام jQuery.
+
+jQuery لديه دالة تسمى `.remove()` التي ستزيل عنصر HTML بالكامل
+
+أزل عنصر `#target4` من الصفحة باستخدام وظيفة `.remove()`.
+
+# --hints--
+
+يجب عليك استخدام jQuery لإزالة عنصر `target4` الخاص بك من الصفحة الخاصة بك.
+
+```js
+assert(
+  $('#target4').length === 0 && code.match(/\$\(["']#target4["']\).remove\(\)/g)
+);
+```
+
+يجب عليك فقط استخدام jQuery لإزالة هذا العنصر.
+
+```js
+assert(
+  code.match(/id="target4/g) &&
+    !code.match(/<!--.*id="target4".*-->/g) &&
+    $('#right-well').length > 0
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/remove-classes-from-an-element-with-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/remove-classes-from-an-element-with-jquery.md
new file mode 100644
index 00000000000..4082e7f56b1
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/remove-classes-from-an-element-with-jquery.md
@@ -0,0 +1,122 @@
+---
+id: bad87fee1348bd9aed918626
+title: إزالة الفئات من عنصر باستخدام jQuery
+challengeType: 6
+forumTopicId: 18264
+required:
+  - 
+    link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
+dashedName: remove-classes-from-an-element-with-jquery
+---
+
+# --description--
+
+بنفس الطريقة يمكنك إضافة فئات إلى عنصر مع وظيفة jQuery's `addClass()`، يمكنك إزالتها باستخدام وظيفة jQuery's `removeClass()`.
+
+إليك كيف ستفعل هذا لزر محدد:
+
+```js
+$("#target2").removeClass("btn-default");
+```
+
+أزل فئة `btn-default` من جميع عناصر `button` لدينا.
+
+# --hints--
+
+يجب إزالة فئة `btn-default` من جميع عناصر `button` الخاص بك.
+
+```js
+assert($('.btn-default').length === 0);
+```
+
+يجب عليك فقط استخدام jQuery لإزالة هذه الفئة من العنصر.
+
+```js
+assert(code.match(/btn btn-default/g));
+```
+
+يجب عليك فقط إزالة فئة `btn-default` فقط.
+
+```js
+assert(
+  code.match(
+    /\.[\v\s]*removeClass[\s\v]*\([\s\v]*('|")\s*btn-default\s*('|")[\s\v]*\)/gm
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+    $(".well").addClass("animated shake");
+    $("#target3").addClass("animated fadeOut");
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+    $(".well").addClass("animated shake");
+    $("#target3").addClass("animated fadeOut");
+    $("button").removeClass("btn-default");
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.md
new file mode 100644
index 00000000000..8893db5af93
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-a-specific-child-of-an-element-using-jquery.md
@@ -0,0 +1,144 @@
+---
+id: bad87fee1348bd9aed108826
+title: أستهدف Child قصداً في عنصر باستخدام jQuery
+challengeType: 6
+forumTopicId: 18315
+required:
+  - 
+    link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
+dashedName: target-a-specific-child-of-an-element-using-jquery
+---
+
+# --description--
+
+لقد رأيت لماذا سمات المعرف مناسبة جدا للاستهداف مع محددات jQuery. ولكن لن يكون لديك دائما مثل هذه المعرفات الأنيقة للعمل معها.
+
+لحسن الحظ، لدى jQuery بعض الحيل الأخرى لاستهداف العناصر الصحيحة.
+
+jQuery يستخدم منتقات CSS لاستهداف العناصر. يتيح لك `target:nth-child(n)` منتقي CSS تحديد جميع العناصر nth مع نوع الفئة أو العنصر المستهدف.
+
+إليك كيف ستعطي العنصر الثالث في كل بئر فئة مرتدة (bounce):
+
+```js
+$(".target:nth-child(3)").addClass("animated bounce");
+```
+
+اجعل الطفل الثاني في كل عنصر من عناصر البئر الخاصة بك ترتد. يجب عليك تحديد أطفال العناصر مع فئة `target`.
+
+# --hints--
+
+العنصر الثاني في عناصر `target` الخاصة بك يجب أن ترتد.
+
+```js
+assert(
+  $('.target:nth-child(2)').hasClass('animated') &&
+    $('.target:nth-child(2)').hasClass('bounce')
+);
+```
+
+ولا ينبغي أن يرتد سوى عنصرين.
+
+```js
+assert($('.animated.bounce').length === 2);
+```
+
+يجب عليك استخدام منتقي `:nth-child()` لتعديل هذه العناصر.
+
+```js
+assert(code.match(/\:nth-child\(/g));
+```
+
+يجب عليك استخدام jQuery فقط لإضافة هذه الفئات إلى العنصر.
+
+```js
+assert(
+  code.match(/\$\(".target:nth-child\(2\)"\)/g) ||
+    code.match(/\$\('.target:nth-child\(2\)'\)/g) ||
+    code.match(/\$\(".target"\).filter\(":nth-child\(2\)"\)/g) ||
+    code.match(/\$\('.target'\).filter\(':nth-child\(2\)'\)/g)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+    $("#right-well").children().css("color", "orange");
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+    $("#right-well").children().css("color", "orange");
+    $(".target:nth-child(2)").addClass("animated bounce");
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-elements-by-class-using-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-elements-by-class-using-jquery.md
new file mode 100644
index 00000000000..7cf7df9f628
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-elements-by-class-using-jquery.md
@@ -0,0 +1,113 @@
+---
+id: bad87fee1348bd9aedc08826
+title: أستهدف عناصر بواسطة الفئة باستخدام jQuery
+challengeType: 6
+forumTopicId: 18316
+required:
+  - 
+    link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
+dashedName: target-elements-by-class-using-jquery
+---
+
+# --description--
+
+هل تُرَى كيف ربط جميع عناصر `button` الخاص بك؟ لقد اخترناهم `$("button")`، ثم أضفنا لهم بعض فئات CSS مع `.addClass("animated bounce");`.
+
+لقد استخدمت للتو وظائف jQuery باسم `.addClass()`، التي تسمح لك بإضافة فئات إلى العناصر.
+
+أولا، دعونا نستهدف عناصر `div` مع الفئة `well` باستخدام منتقي `$(".well")`.
+
+لاحظ ذلك، تماما مثل إعلانات CSS، يمكنك كتابة `.` قبل اسم الفئة.
+
+ثم استخدم وظيفة jQuery باسم `.addClass()` لإضافة الفئات `animated` و `shake`.
+
+على سبيل المثال يمكنك أن تجعل جميع العناصر `text-primary` تهتز بواسطة إضافة ما يلي إلى `document ready function` الخاصة بك:
+
+```js
+$(".text-primary").addClass("animated shake");
+```
+
+# --hints--
+
+يجب عليك استخدام وظيفة jQuery باسم `addClass()` لإعطاء الفئات `animated` و `shake` لجميع العناصر الخاصة بك مع الفئة `well`.
+
+```js
+assert($('.well').hasClass('animated') && $('.well').hasClass('shake'));
+```
+
+يجب عليك استخدام jQuery فقط لإضافة هذه الفئات إلى العنصر.
+
+```js
+assert(!code.match(/class\.\*animated/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+    $(".well").addClass("animated shake");
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-elements-by-id-using-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-elements-by-id-using-jquery.md
new file mode 100644
index 00000000000..53a83a560ea
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-elements-by-id-using-jquery.md
@@ -0,0 +1,123 @@
+---
+id: bad87fee1348bd9aeda08826
+title: أستهدف عناصر بواسطة المعرف باستخدام jQuery
+challengeType: 6
+forumTopicId: 18317
+required:
+  - 
+    link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
+dashedName: target-elements-by-id-using-jquery
+---
+
+# --description--
+
+يمكنك أيضا استهداف العناصر بطريقة سماتها المعرفية.
+
+أولا، أستهدف عناصر `button` مع الفئة `target3` باستخدام منتقي `$("#target3")`.
+
+لاحظ ذلك، تماما مثل إعلانات CSS، يمكنك كتابة `#` قبل اسم المُعرف.
+
+ثم استخدم وظيفة jQuery باسم `.addClass()` لإضافة الفئات `animated` و `fadeOut`.
+
+إليك كيف ستجعل عنصر `button` مع معرف `target6` يتلاشى:
+
+```js
+$("#target6").addClass("animated fadeOut");
+```
+
+# --hints--
+
+يجب عليك تحديد عنصر `button` مع `id` باسم `target3` واستخدام وظيفة jQuery باسم `addClass()` لإعطائه فئة `animated`.
+
+```js
+assert($('#target3').hasClass('animated'));
+```
+
+يجب عليك تحديد عنصر تحتوي على معرف باسم `target3` واستخدام وظيفة jQuery باسم `addClass()` لإعطائه فئة `fadeOut`.
+
+```js
+assert(
+  ($('#target3').hasClass('fadeOut') || $('#target3').hasClass('fadeout')) &&
+    code.match(/\$\(\s*.#target3.\s*\)/g)
+);
+```
+
+يجب عليك استخدام jQuery فقط لإضافة هذه الفئات إلى العنصر.
+
+```js
+assert(!code.match(/class.*animated/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+    $(".well").addClass("animated shake");
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+    $(".well").addClass("animated shake");
+    $("#target3").addClass("animated fadeOut");
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-even-elements-using-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-even-elements-using-jquery.md
new file mode 100644
index 00000000000..2a831ae794f
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-even-elements-using-jquery.md
@@ -0,0 +1,139 @@
+---
+id: bad87fee1348bd9aed008826
+title: استهدف العناصر الزوجية باستخدام jQuery
+challengeType: 6
+forumTopicId: 18318
+required:
+  - 
+    link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
+dashedName: target-even-elements-using-jquery
+---
+
+# --description--
+
+يمكنك أيضًا استهداف العناصر استنادًا إلى مواقفها باستخدام منتقات `:odd` أو `:even`.
+
+لاحظ أن jQuery مقدسة صفر مما يعني أن العنصر الأول في الاختيار له وضع صفر. يمكن أن يكون هذا مربكا بعض الشيء, وغير البديهي, يختار `:odd` العنصر الثاني (الموضع 1)، العنصر الرابع (الموضع 3)، وهكذا.
+
+إليك كيف يمكنك استهداف جميع العناصر الفردية مع الفئة `target` وإعطائهم فئات:
+
+```js
+$(".target:odd").addClass("animated shake");
+```
+
+حاول تحديد جميع العناصر الزوجية `target` وإعطائها فئات `animated` و `shake`. تذكر أن **الأرقام الزوجية** تشير إلى موضع العناصر التي لها نظام قائم على الصفر.
+
+# --hints--
+
+كل عناصر `target` التي يعدّها jQuery يجب أن تهزز.
+
+```js
+assert(
+  $('.target:even').hasClass('animated') && $('.target:even').hasClass('shake')
+);
+```
+
+يجب عليك استخدام منتقي `:even` لتعديل هذه العناصر.
+
+```js
+assert(code.match(/\:even/g));
+```
+
+يجب عليك استخدام jQuery فقط لإضافة هذه الفئات إلى العنصر.
+
+```js
+assert(
+  code.match(/\$\(".target:even"\)/g) ||
+    code.match(/\$\('.target:even'\)/g) ||
+    code.match(/\$\(".target"\).filter\(":even"\)/g) ||
+    code.match(/\$\('.target'\).filter\(':even'\)/g)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+    $("#right-well").children().css("color", "orange");
+    $("#left-well").children().css("color", "green");
+    $(".target:nth-child(2)").addClass("animated bounce");
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+    $("#right-well").children().css("color", "orange");
+    $("#left-well").children().css("color", "green");
+    $(".target:nth-child(2)").addClass("animated bounce");
+    $(".target:even").addClass("animated shake");
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-html-elements-with-selectors-using-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-html-elements-with-selectors-using-jquery.md
new file mode 100644
index 00000000000..c4c99cf7535
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-html-elements-with-selectors-using-jquery.md
@@ -0,0 +1,118 @@
+---
+id: bad87fee1348bd9bedc08826
+title: استهداف عناصر HTML مع منتقاة باستخدام jQuery
+challengeType: 6
+forumTopicId: 18319
+required:
+  - 
+    link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
+dashedName: target-html-elements-with-selectors-using-jquery
+---
+
+# --description--
+
+الآن لدينا وظيفة `document ready` جاهزة.
+
+الآن دعونا نكتب أول بيان jQuery لدينا. تبدأ جميع وظائف jQuery بعلامة `$`، يشار إليها عادة كعملية علامة الدولار، أو سلسلة (bling).
+
+غالباً ما يقوم jQuery بتحديد عنصر HTML مع <dfn>منتقي</dfn>، ثم يقوم بشيء لهذا العنصر.
+
+على سبيل المثال، أجعل كل عناصر `button` الخاص بك مرتدة. فقط أضف هذا الرمز داخل وظيفة الوثيقة الجاهزة:
+
+```js
+$("button").addClass("animated bounce");
+```
+
+لاحظ أننا قد قمنا فعلًا بإدراج مكتبة jQuery ومكتبة Animate.css في الخلفية حتى يمكنك استخدامهما في المحرر (editor). إذاً أنت تستخدم jQuery لتطبيق فئة `bounce` إلى عناصر `button` الخاص بك.
+
+# --hints--
+
+يجب عليك استخدام وظيفة jQuery باسم `addClass()` لإعطاء الفئات `animated` و `bounce` إلى عناصر `button`.
+
+```js
+assert($('button').hasClass('animated') && $('button').hasClass('bounce'));
+```
+
+يجب عليك استخدام jQuery فقط لإضافة هذه الفئات إلى العنصر.
+
+```js
+assert(!code.match(/class.*animated/g));
+```
+
+يجب أن يكون رمز jQuery الخاص بك ضمن الوظيفة `$(document).ready();`.
+
+```js
+assert(
+  code.replace(/\s/g, '').match(/\$\(document\)\.ready\(function\(\)\{\$/g)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated bounce");
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-children-of-an-element-using-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-children-of-an-element-using-jquery.md
new file mode 100644
index 00000000000..203ff3d3ac8
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-children-of-an-element-using-jquery.md
@@ -0,0 +1,125 @@
+---
+id: bad87fee1348bd9aed208826
+title: أستهدف Children لعنصر باستخدام jQuery
+challengeType: 6
+forumTopicId: 18320
+dashedName: target-the-children-of-an-element-using-jquery
+---
+
+# --description--
+
+عندما توضع عناصر HTML في مستوى اسفل مستوى آخر فإنهم يسمون <dfn>أبناء</dfn> ذلك العنصر. على سبيل المثال، عناصر الزر في هذا التحدي مع النص `#target1`، و`#target2`، و `#target3` هم جميع الأطفال من عنصر `<div class="well" id="left-well">`.
+
+jQuery لديه وظيفة تسمى `children()` التي تسمح لك بالوصول إلى الأطفال من أي عنصر واختارته.
+
+إليك مثال على كيفية استخدام وظيفة `children()` لإعطاء أطفال عنصر `left-well` اللون `blue`:
+
+```js
+$("#left-well").children().css("color", "blue")
+```
+
+# --instructions--
+
+امنح جميع أطفال عنصر `right-well` الخاص بك اللون البرتقالي (orange).
+
+# --hints--
+
+جميع أطفال `#right-well` يجب أن يكون لديهم نص برتقالي.
+
+```js
+assert($('#right-well').children().css('color') === 'rgb(255, 165, 0)');
+```
+
+يجب عليك استخدام وظيفة `children()` لتعديل هذه العناصر.
+
+```js
+assert(code.match(/\.children\(\)\.css/g));
+```
+
+يجب عليك استخدام jQuery فقط لإضافة هذه الفئات إلى العنصر.
+
+```js
+assert(code.match(/<div class="well" id="right-well">/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+    $("#right-well").children().css("color", "orange");
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md
new file mode 100644
index 00000000000..e5dec4479a5
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-parent-of-an-element-using-jquery.md
@@ -0,0 +1,140 @@
+---
+id: bad87fee1348bd9aed308826
+title: أستهدف Parent لعنصر باستخدام jQuery
+challengeType: 6
+forumTopicId: 18321
+dashedName: target-the-parent-of-an-element-using-jquery
+---
+
+# --description--
+
+يحتوي كل عنصر HTML على عنصر `parent` الذي `inherits` خصائص.
+
+على سبيل المثال يحتوي `jQuery Playground` على عنصر `h3` يكون الأبُ لعنصر `<div class="container-fluid">`، الذي نفسه يملك الأبُ `body`.
+
+jQuery لديه وظيفة تسمى `parent()` التي تسمح لك بالوصول إلى الأبُ من أي عنصر واختارته.
+
+إليك مثال على كيفية استخدام الوظيفة `parent()` إذا كنت ترغب في إعطاء العنصر الأبُ في `left-well` لون خلفية (background color) باللون الأزرق (blue):
+
+```js
+$("#left-well").parent().css("background-color", "blue")
+```
+
+اعطِ الأبُ للعنصر `#target1` لون خلفية (background-color) باللون الأحمر (red).
+
+# --hints--
+
+يجب أن يكون عنصر `left-well` الخاص بك لون خلفية أحمر.
+
+```js
+assert(
+  $('#left-well').css('background-color') === 'red' ||
+    $('#left-well').css('background-color') === 'rgb(255, 0, 0)' ||
+    $('#left-well').css('background-color').toLowerCase() === '#ff0000' ||
+    $('#left-well').css('background-color').toLowerCase() === '#f00'
+);
+```
+
+يجب عليك استخدام وظيفة `.parent()` لتعديل هذا العنصر.
+
+```js
+assert(code.match(/\.parent\s*\(\s*\)\s*\.css/g));
+```
+
+يجب استدعاء طريقة `.parent()` على عنصر `#target1`.
+
+```js
+assert(
+  code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")\s*?\)\s*?\.parent/gi)
+);
+```
+
+يجب عليك استخدام jQuery فقط لإضافة هذه الفئات إلى العنصر.
+
+```js
+assert(code.match(/<div class="well" id="left-well">/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<body>
+  <div class="container-fluid">
+    <h3 class="text-primary text-center">jQuery Playground</h3>
+    <div class="row">
+      <div class="col-xs-6">
+        <h4>#left-well</h4>
+        <div class="well" id="left-well">
+          <button class="btn btn-default target" id="target1">#target1</button>
+          <button class="btn btn-default target" id="target2">#target2</button>
+          <button class="btn btn-default target" id="target3">#target3</button>
+        </div>
+      </div>
+      <div class="col-xs-6">
+        <h4>#right-well</h4>
+        <div class="well" id="right-well">
+          <button class="btn btn-default target" id="target4">#target4</button>
+          <button class="btn btn-default target" id="target5">#target5</button>
+          <button class="btn btn-default target" id="target6">#target6</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<body>
+  <div class="container-fluid">
+    <h3 class="text-primary text-center">jQuery Playground</h3>
+    <div class="row">
+      <div class="col-xs-6">
+        <h4>#left-well</h4>
+        <div class="well" id="left-well">
+          <button class="btn btn-default target" id="target1">#target1</button>
+          <button class="btn btn-default target" id="target2">#target2</button>
+          <button class="btn btn-default target" id="target3">#target3</button>
+        </div>
+      </div>
+      <div class="col-xs-6">
+        <h4>#right-well</h4>
+        <div class="well" id="right-well">
+          <button class="btn btn-default target" id="target4">#target4</button>
+          <button class="btn btn-default target" id="target5">#target5</button>
+          <button class="btn btn-default target" id="target6">#target6</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</body>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.md
new file mode 100644
index 00000000000..ff95ab46afd
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/target-the-same-element-with-multiple-jquery-selectors.md
@@ -0,0 +1,143 @@
+---
+id: bad87fee1348bd9aed908626
+title: استهدف نفس العنصر مع منتقاة jQuery متعددة
+challengeType: 6
+forumTopicId: 18322
+required:
+  - 
+    link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
+dashedName: target-the-same-element-with-multiple-jquery-selectors
+---
+
+# --description--
+
+الآن أنت تعرف ثلاث طرق لاستهداف العناصر: حسب النوع: `$("button")`، حسب الفئة: `$(".btn")`، والمعرف `$("#target1")`.
+
+مع أنّه من الممكن إضافة فئات متعددة في وظيفة `.addClass()`، ضيفها إلى نفس العنصر في *ثلاث طرق مختلفة*.
+
+باستخدام `.addClass()`، أضف فئة واحد فقط في كل مرة لنفس العنصر، ثلاث طرق مختلفة:
+
+أضف فئة `animated` إلى جميع العناصر مع نوع `button`.
+
+أضف فئة `shake` إلى جميع العناصر مع نوع `.btn`.
+
+إضافة فئة `btn-primary` إلى الزر مع معرف `#target1`.
+
+**ملاحظة:** يجب أن تستهدف عنصرا واحدا فقط وأن تضيف فئة واحد في كل مرة. إجمالاً، سوف ينتهي بك الأمر إلى إضافة ثلاث فئات `shake`، و`animated`، و `btn-primary` إلى `#target1`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `$("button")`.
+
+```js
+assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?button\s*?(?:'|")/gi));
+```
+
+يجب عليك استخدام منتقي `$(".btn")`.
+
+```js
+assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?\.btn\s*?(?:'|")/gi));
+```
+
+يجب عليك استخدام منتقي `$("#target1")`.
+
+```js
+assert(code.match(/\$\s*?\(\s*?(?:'|")\s*?#target1\s*?(?:'|")/gi));
+```
+
+يجب عليك إضافة فئة واحد فقط مع كل محدد من المحددات الثلاثة الخاصة بك.
+
+```js
+assert(
+  code.match(/addClass/g) &&
+    code.match(/addClass\s*?\(\s*?('|")\s*?[\w-]+\s*?\1\s*?\)/g).length > 2
+);
+```
+
+يجب أن يحتوي عنصر `#target1` الخاص بك على الفئات `animated`, و`shake`, و `btn-primary`.
+
+```js
+assert(
+  $('#target1').hasClass('animated') &&
+    $('#target1').hasClass('shake') &&
+    $('#target1').hasClass('btn-primary')
+);
+```
+
+يجب عليك استخدام jQuery فقط لإضافة هذه الفئات إلى العنصر.
+
+```js
+assert(!code.match(/class.*animated/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("button").addClass("animated");
+    $(".btn").addClass("shake");
+    $("#target1").addClass("btn-primary");
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/use-appendto-to-move-elements-with-jquery.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/use-appendto-to-move-elements-with-jquery.md
new file mode 100644
index 00000000000..9ab88b61188
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/use-appendto-to-move-elements-with-jquery.md
@@ -0,0 +1,117 @@
+---
+id: bad87fee1348bd9aed608826
+title: استخدام appendTo لنقل العناصر باستخدام jQuery
+challengeType: 6
+forumTopicId: 18340
+dashedName: use-appendto-to-move-elements-with-jquery
+---
+
+# --description--
+
+الآن دعونا نحاول نقل العناصر من `div` إلى آخر.
+
+jQuery لديه وظيفة تسمى `appendTo()` التي تسمح لك بتحديد عناصر HTML وإلحاقها بعنصر آخر.
+
+على سبيل المثال، إذا أردنا نقل `target4` من right well إلى left well سنستخدم:
+
+```js
+$("#target4").appendTo("#left-well");
+```
+
+نقل عنصر `target2` الخاص بك من `left-well` إلى `right-well`.
+
+# --hints--
+
+يجب ألا يكون عنصر `target2` الخاص بك داخل `left-well`.
+
+```js
+assert($('#left-well').children('#target2').length === 0);
+```
+
+عنصر `target2` الخاص بك يجب أن يكون داخل `right-well` الخاص بك.
+
+```js
+assert($('#right-well').children('#target2').length > 0);
+```
+
+يجب عليك استخدام jQuery فقط لنقل هذه العناصر.
+
+```js
+assert(!code.match(/class.*animated/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/use-jquery-to-modify-the-entire-page.md b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/use-jquery-to-modify-the-entire-page.md
new file mode 100644
index 00000000000..49ba3d3230b
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/jquery/use-jquery-to-modify-the-entire-page.md
@@ -0,0 +1,118 @@
+---
+id: bad87fee1348bd9aecb08826
+title: استخدام jQuery لتعديل كامل الصفحة
+challengeType: 6
+forumTopicId: 18361
+required:
+  - 
+    link: 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.0/animate.css'
+dashedName: use-jquery-to-modify-the-entire-page
+---
+
+# --description--
+
+لقد انتهينا من اللعب مع jQuery playground. مزقه!
+
+يمكن لـ jQuery أن يستهدف عنصر `body` أيضًا.
+
+هنا كيف يمكننا جعل الجسم كُلََّه يتلاشى: `$("body").addClass("animated fadeOut");`
+
+ولكن ستفعل شيئا أكثر دراماتيكية. أضف الفئات `animated` و `hinge` إلى عنصر `body`.
+
+# --hints--
+
+أضف الفئات `animated` و `hinge` إلى عنصر `body`.
+
+```js
+assert($('body').hasClass('animated') && $('body').hasClass('hinge'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+    $("#right-well").children().css("color", "orange");
+    $("#left-well").children().css("color", "green");
+    $(".target:nth-child(2)").addClass("animated bounce");
+    $(".target:even").addClass("animated shake");
+
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  $(document).ready(function() {
+    $("#target1").css("color", "red");
+    $("#target1").prop("disabled", true);
+    $("#target4").remove();
+    $("#target2").appendTo("#right-well");
+    $("#target5").clone().appendTo("#left-well");
+    $("#target1").parent().css("background-color", "red");
+    $("#right-well").children().css("color", "orange");
+    $("#left-well").children().css("color", "green");
+    $(".target:nth-child(2)").addClass("animated bounce");
+    $(".target:even").addClass("animated shake");
+    $("body").addClass("animated hinge");
+  });
+</script>
+
+<!-- Only change code above this line -->
+
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/connect-redux-to-react.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/connect-redux-to-react.md
new file mode 100644
index 00000000000..ac715553f87
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/connect-redux-to-react.md
@@ -0,0 +1,156 @@
+---
+id: 5a24c314108439a4d4036147
+title: تواصل Redux مع React
+challengeType: 6
+forumTopicId: 301426
+dashedName: connect-redux-to-react
+---
+
+# --description--
+
+الآن بعد أن كتبت كل من وظائف `mapStateToProps()` و `mapDispatchToProps()`، يمكنك استخدامها لتهيئة `state` و `dispatch` إلى `props` من أحد مكونات React الخاصة بك. طريقة `connect` من React مرتبط مع Redux يمكنها التعامل مع هذه المهمة. هذه الطريقة تأخذ حَجَّتا اختياريتان، `mapStateToProps()` و `mapDispatchToProps()`. هي اختيارية لأنه قد يكون لديك مكون يحتاج فقط إلى الوصول إلى `state` ولكن لا يحتاج إلى إرسال أي إجراءات، أو العكس كذلك.
+
+لاستخدام هذه الطريقة، مرر الوظائف كحجج، وأستدعي فورا بالنتيجة المكون الخاص بك. هذه الجملة غير عادية بعض الشيء ويبدو كذلك:
+
+```js
+connect(mapStateToProps, mapDispatchToProps)(MyComponent)
+```
+
+**ملاحظة:** إذا كنت ترغب في حذف أحد الحجج في طريقة `connect`، مرر `null` في مكانها.
+
+# --instructions--
+
+يحتوي محرر التعليمات البرمجية على وظائف `mapStateToProps()`, و `mapDispatchToProps()`, و مكون React جديد يسمى `Presentational`. توصيل هذا المكون إلى Redux باستخدام طريقة `connect` من الكائن العالمي `ReactRedux`، ودعوها فورا على عنصر `Presentational`. عيّن النتيجة إلى `const` جديد يسمى `ConnectedComponent` الذي يمثل المكون المتصل. هذا كل شيء، أنت الآن متصل إلى Redux! حاول تغيير أي من الحجج `connect` إلى `null` وقم بملاحظة نتائج الاختبار.
+
+# --hints--
+
+يجب أن يقدم مكون `Presentational`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    return mockedComponent.find('Presentational').length === 1;
+  })()
+);
+```
+
+يجب أن يتلقى مكون `Presentational` مِيزة (prop) باسم `messages` عن طريق `connect`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    const props = mockedComponent.find('Presentational').props();
+    return props.messages === '__INITIAL__STATE__';
+  })()
+);
+```
+
+يجب أن يتلقى مكون `Presentational` مِيزة (prop) باسم `submitNewMessage` عن طريق `connect`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    const props = mockedComponent.find('Presentational').props();
+    return typeof props.submitNewMessage === 'function';
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+const store = Redux.createStore(
+  (state = '__INITIAL__STATE__', action) => state
+);
+class AppWrapper extends React.Component {
+  render() {
+    return (
+      <ReactRedux.Provider store = {store}>
+        <ConnectedComponent/>
+      </ReactRedux.Provider>
+    );
+  }
+};
+ReactDOM.render(<AppWrapper />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const addMessage = (message) => {
+  return {
+    type: 'ADD',
+    message: message
+  }
+};
+
+const mapStateToProps = (state) => {
+  return {
+    messages: state
+  }
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    submitNewMessage: (message) => {
+      dispatch(addMessage(message));
+    }
+  }
+};
+
+class Presentational extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <h3>This is a Presentational Component</h3>
+  }
+};
+
+const connect = ReactRedux.connect;
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+const addMessage = (message) => {
+  return {
+    type: 'ADD',
+    message: message
+  }
+};
+
+const mapStateToProps = (state) => {
+  return {
+    messages: state
+  }
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    submitNewMessage: (message) => {
+      dispatch(addMessage(message));
+    }
+  }
+};
+
+class Presentational extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <h3>This is a Presentational Component</h3>
+  }
+};
+
+const connect = ReactRedux.connect;
+// Change code below this line
+
+const ConnectedComponent = connect(mapStateToProps, mapDispatchToProps)(Presentational);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/connect-redux-to-the-messages-app.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/connect-redux-to-the-messages-app.md
new file mode 100644
index 00000000000..1f45e1ac74a
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/connect-redux-to-the-messages-app.md
@@ -0,0 +1,300 @@
+---
+id: 5a24c314108439a4d4036148
+title: إيصال Redux إلى تطبيق الرسائل
+challengeType: 6
+forumTopicId: 301427
+dashedName: connect-redux-to-the-messages-app
+---
+
+# --description--
+
+الآن بعد أن فهمت كيفية استخدام `connect` لتوصيل React إلى Redux، يمكنك تطبيق ما تعلمته على مكون React الخاص بك الذي يتعامل مع الرسائل.
+
+في الدرس الأخير، المكون الذي يتصل إلى Redux يسما `Presentational`، وهذا لم يكن غير مقصود. هذا المصطلح *عمومًا* يشير إلى مكونات React غير متصلة قاصدًا إلى Redux. وهم ببساطة مسؤولون عن عرض واجهة المستخدم ويفعلون ذلك كوظيفة (function) من الميزات (props) التي يتلقُها. وعلى النقيض من ذلك، فإن مكونات المحتوي موصولة إلى Redux. وعادة ما تكون هذه المؤسسات مسؤولة عن إرسال الإجراءات إلى المتجر (store) وكثيراً ما تنقل إلى مكونات الفرعية كميزات (props).
+
+# --instructions--
+
+محرر التعليمات البرمجية لديه كل التعليمات البرمجية التي كتبتها في هذا القسم حتى الآن. التغيير الوحيد هو أن مكون React قد أعيد تسميته إلى `Presentational`. أنشئ مكون جديد محتفظ به في ثابتة تسمى `Container` التي تستخدم `connect` لربط مكون `Presentational` ألى Redux. ثم في `AppWrapper`، انتج مكون React المربوط ألى Redux باسم`Provider`. مرر `Provider` من `store` في Redux كمِيزة (prop) وتنشئ `Container` كفرع. بمجرد إعداد كل شيء، سترى تطبيق الرسائل الذي يتم أنتاجه إلى الصفحة مرة أخرى.
+
+# --hints--
+
+يجب أن ينشئ `AppWrapper` إلى الصفحة.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    return mockedComponent.find('AppWrapper').length === 1;
+  })()
+);
+```
+
+يجب أن يقدم مكون `Presentational` إلى الصفحة.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    return mockedComponent.find('Presentational').length === 1;
+  })()
+);
+```
+
+يجب أن ينشئ مكون `Presentational` عناصر `h2`، و `input`، و `button`، و `ul`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    const PresentationalComponent = mockedComponent.find('Presentational');
+    return (
+      PresentationalComponent.find('div').length === 1 &&
+      PresentationalComponent.find('h2').length === 1 &&
+      PresentationalComponent.find('button').length === 1 &&
+      PresentationalComponent.find('ul').length === 1
+    );
+  })()
+);
+```
+
+يجب أن يتلقى مكون `Presentational` مِيزة (prop) باسم `messages` من متجر Redux.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    const PresentationalComponent = mockedComponent.find('Presentational');
+    const props = PresentationalComponent.props();
+    return Array.isArray(props.messages);
+  })()
+);
+```
+
+يجب أن يتلقى عنصر `Presentational` مِيزة (prop) على هيئة منشئ أجراء (action creator) باسم `submitMessage`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    const PresentationalComponent = mockedComponent.find('Presentational');
+    const props = PresentationalComponent.props();
+    return typeof props.submitNewMessage === 'function';
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<AppWrapper />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+// Redux:
+const ADD = 'ADD';
+
+const addMessage = (message) => {
+  return {
+    type: ADD,
+    message: message
+  }
+};
+
+const messageReducer = (state = [], action) => {
+  switch (action.type) {
+    case ADD:
+      return [
+        ...state,
+        action.message
+      ];
+    default:
+      return state;
+  }
+};
+
+const store = Redux.createStore(messageReducer);
+
+// React:
+class Presentational extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: '',
+      messages: []
+    }
+    this.handleChange = this.handleChange.bind(this);
+    this.submitMessage = this.submitMessage.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      input: event.target.value
+    });
+  }
+  submitMessage() {
+    this.setState((state) => {
+      const currentMessage = state.input;
+      return {
+        input: '',
+        messages: state.messages.concat(currentMessage)
+      };
+    });
+  }
+  render() {
+    return (
+      <div>
+        <h2>Type in a new Message:</h2>
+        <input
+          value={this.state.input}
+          onChange={this.handleChange}/><br/>
+        <button onClick={this.submitMessage}>Submit</button>
+        <ul>
+          {this.state.messages.map( (message, idx) => {
+              return (
+                 <li key={idx}>{message}</li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    );
+  }
+};
+
+// React-Redux:
+const mapStateToProps = (state) => {
+  return { messages: state }
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    submitNewMessage: (newMessage) => {
+       dispatch(addMessage(newMessage))
+    }
+  }
+};
+
+const Provider = ReactRedux.Provider;
+const connect = ReactRedux.connect;
+
+// Define the Container component here:
+
+
+class AppWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    // Complete the return statement:
+    return (null);
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+// Redux:
+const ADD = 'ADD';
+
+const addMessage = (message) => {
+  return {
+    type: ADD,
+    message: message
+  }
+};
+
+const messageReducer = (state = [], action) => {
+  switch (action.type) {
+    case ADD:
+      return [
+        ...state,
+        action.message
+      ];
+    default:
+      return state;
+  }
+};
+
+const store = Redux.createStore(messageReducer);
+
+// React:
+class Presentational extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: '',
+      messages: []
+    }
+ this.handleChange = this.handleChange.bind(this);
+ this.submitMessage = this.submitMessage.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      input: event.target.value
+    });
+  }
+  submitMessage() {
+    this.setState((state) => {
+      const currentMessage = state.input;
+      return {
+        input: '',
+        messages: state.messages.concat(currentMessage)
+      };
+    });
+  }
+  render() {
+    return (
+      <div>
+        <h2>Type in a new Message:</h2>
+        <input
+          value={this.state.input}
+          onChange={this.handleChange}/><br/>
+        <button onClick={this.submitMessage}>Submit</button>
+        <ul>
+          {this.state.messages.map( (message, idx) => {
+              return (
+                 <li key={idx}>{message}</li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    );
+  }
+};
+
+// React-Redux:
+const mapStateToProps = (state) => {
+  return { messages: state }
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    submitNewMessage: (newMessage) => {
+       dispatch(addMessage(newMessage))
+    }
+  }
+};
+
+const Provider = ReactRedux.Provider;
+const connect = ReactRedux.connect;
+
+const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
+
+class AppWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <Provider store={store}>
+        <Container/>
+      </Provider>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/extract-local-state-into-redux.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/extract-local-state-into-redux.md
new file mode 100644
index 00000000000..f9cfa5ccfab
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/extract-local-state-into-redux.md
@@ -0,0 +1,397 @@
+---
+id: 5a24c314108439a4d4036149
+title: استخراج المنطقة المحلية (Local State) إلى Redux
+challengeType: 6
+forumTopicId: 301428
+dashedName: extract-local-state-into-redux
+---
+
+# --description--
+
+أنت على وشك الانتهاء! قم بالتذكير بأنك كتبت كل تعلمات Redux البرمجية بحيث يتمكن Redux من التحكم في إدارة حالة تطبيق React للرسائل الخاص بك. الآن بعد أن تم توصيل Redux، تحتاج إلى استخراج إدارة الحالة من مكون `Presentational` ومررها إلى Redux. حالياً، لديك Redux متصل، لكنك تتعامل مع الحالة محلياً ضمن مكون `Presentational`.
+
+# --instructions--
+
+في مكون `Presentational` أولاً، إزال خاصية `messages` في `state` المحلية. سيتم إدارة هذه الرسائل بواسطة Redux. بعد ذلك، عدل طريقة `submitMessage()` بحيث ترسل `submitNewMessage()` من `this.props`، ومرر في إدخال الرسالة الحالية من `state` كحاجة. لأنك إزالة `messages` من الحالة المحلية، إزالة خاصية `messages` من المكالمة إلى `this.setState()` هنا أيضا. وأخيرا، عدل طريقة `render()` بحيث تنشئ الرسائل الواردة من `props` بدلا من `state`.
+
+بمجرد إجراء هذه التغييرات، ستستمر وظيفة التطبيق بنفس القدر، إلا أن Redux يدير الحالة. يوضح هذا المثال أيضًا كيف أن المكون قد يحتوي على `state` المحلية: مكونك لا يزال يتتبع إدخال المستخدم محليًا في `state` الخاصة به. يمكنك أن ترى كيف يوفر Redux أداة framework لإدارة الحالة مفيدة على رأس React. في البداية لقد حققت نفس النتيجة باستخدام حالة React المحلية فقط، وهذا ممكن عادة مع التطبيقات البسيطة. ومع ذلك، كلما أصبحت تطبيقاتك أكبر وأكثر تعقيدا، وكتلك إدارة حالتك، وهذه هي المشكلة في الحلول Redux.
+
+# --hints--
+
+يجب أن ينشئ `AppWrapper` في الصفحة.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    return mockedComponent.find('AppWrapper').length === 1;
+  })()
+);
+```
+
+يجب أن يقدم مكون `Presentational` في الصفحة.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    return mockedComponent.find('Presentational').length === 1;
+  })()
+);
+```
+
+يجب أن ينشئ مكون `Presentational` عناصر `h2`، و `input`، و `button`، و `ul`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    const PresentationalComponent = mockedComponent.find('Presentational');
+    return (
+      PresentationalComponent.find('div').length === 1 &&
+      PresentationalComponent.find('h2').length === 1 &&
+      PresentationalComponent.find('button').length === 1 &&
+      PresentationalComponent.find('ul').length === 1
+    );
+  })()
+);
+```
+
+يجب أن يتلقى مكون `Presentational` مِيزة (prop) باسم `messages` من متجر Redux.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    const PresentationalComponent = mockedComponent.find('Presentational');
+    const props = PresentationalComponent.props();
+    return Array.isArray(props.messages);
+  })()
+);
+```
+
+يجب أن يتلقى مكون `Presentational` مِيزة (prop) على هيئة منشئ أجراء (action creator) باسم `submitMessage`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    const PresentationalComponent = mockedComponent.find('Presentational');
+    const props = PresentationalComponent.props();
+    return typeof props.submitNewMessage === 'function';
+  })()
+);
+```
+
+حالة مكون `Presentational` يجب أن تحتوي على خاصية واحدة، و`input`، الذي تم تهيئته إلى string فارغة.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    const PresentationalState = mockedComponent
+      .find('Presentational')
+      .instance().state;
+    return (
+      typeof PresentationalState.input === 'string' &&
+      Object.keys(PresentationalState).length === 1
+    );
+  })()
+);
+```
+
+الكتابة في عنصر `input` يجب أن حديث حالة `Presentational`.
+
+```js
+async () => {
+  const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+  const testValue = '__MOCK__INPUT__';
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
+  const causeChange = (c, v) =>
+    c.find('input').simulate('change', { target: { value: v } });
+  let initialInput = mockedComponent.find('Presentational').find('input');
+  const changed = () => {
+    causeChange(mockedComponent, testValue);
+    return waitForIt(() => mockedComponent);
+  };
+  const updated = await changed();
+  const updatedInput = updated.find('Presentational').find('input');
+  assert(
+    initialInput.props().value === '' &&
+      updatedInput.props().value === '__MOCK__INPUT__'
+  );
+};
+```
+
+إرسال `submitMessage` على `Presentational` يجب أن يحديث متجر Redux ويمسح الإدخال (input) في الحالة (state) المحلية.
+
+```js
+async () => {
+  const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
+  let beforeProps = mockedComponent.find('Presentational').props();
+  const testValue = '__TEST__EVENT__INPUT__';
+  const causeChange = (c, v) =>
+    c.find('input').simulate('change', { target: { value: v } });
+  const changed = () => {
+    causeChange(mockedComponent, testValue);
+    return waitForIt(() => mockedComponent);
+  };
+  const clickButton = () => {
+    mockedComponent.find('button').simulate('click');
+    return waitForIt(() => mockedComponent);
+  };
+  const afterChange = await changed();
+  const afterChangeInput = afterChange.find('input').props().value;
+  const afterClick = await clickButton();
+  const afterProps = mockedComponent.find('Presentational').props();
+  assert(
+    beforeProps.messages.length === 0 &&
+      afterChangeInput === testValue &&
+      afterProps.messages.pop() === testValue &&
+      afterClick.find('input').props().value === ''
+  );
+};
+```
+
+يجب أن يكون مكون `Presentational` مِيزة (prop) باسم `messages` من متجر Redux.
+
+```js
+async () => {
+  const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
+  let beforeProps = mockedComponent.find('Presentational').props();
+  const testValue = '__TEST__EVENT__INPUT__';
+  const causeChange = (c, v) =>
+    c.find('input').simulate('change', { target: { value: v } });
+  const changed = () => {
+    causeChange(mockedComponent, testValue);
+    return waitForIt(() => mockedComponent);
+  };
+  const clickButton = () => {
+    mockedComponent.find('button').simulate('click');
+    return waitForIt(() => mockedComponent);
+  };
+  const afterChange = await changed();
+  const afterChangeInput = afterChange.find('input').props().value;
+  const afterClick = await clickButton();
+  const afterProps = mockedComponent.find('Presentational').props();
+  assert(
+    beforeProps.messages.length === 0 &&
+      afterChangeInput === testValue &&
+      afterProps.messages.pop() === testValue &&
+      afterClick.find('input').props().value === '' &&
+      afterClick.find('ul').childAt(0).text() === testValue
+  );
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<AppWrapper />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+// Redux:
+const ADD = 'ADD';
+
+const addMessage = (message) => {
+  return {
+    type: ADD,
+    message: message
+  }
+};
+
+const messageReducer = (state = [], action) => {
+  switch (action.type) {
+    case ADD:
+      return [
+        ...state,
+        action.message
+      ];
+    default:
+      return state;
+  }
+};
+
+const store = Redux.createStore(messageReducer);
+
+// React:
+const Provider = ReactRedux.Provider;
+const connect = ReactRedux.connect;
+
+// Change code below this line
+class Presentational extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: '',
+      messages: []
+    }
+    this.handleChange = this.handleChange.bind(this);
+    this.submitMessage = this.submitMessage.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      input: event.target.value
+    });
+  }
+  submitMessage() {
+    this.setState((state) => ({
+      input: '',
+      messages: state.messages.concat(state.input)
+    }));
+  }
+  render() {
+    return (
+      <div>
+        <h2>Type in a new Message:</h2>
+        <input
+          value={this.state.input}
+          onChange={this.handleChange}/><br/>
+        <button onClick={this.submitMessage}>Submit</button>
+        <ul>
+          {this.state.messages.map( (message, idx) => {
+              return (
+                 <li key={idx}>{message}</li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    );
+  }
+};
+// Change code above this line
+
+const mapStateToProps = (state) => {
+  return {messages: state}
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    submitNewMessage: (message) => {
+      dispatch(addMessage(message))
+    }
+  }
+};
+
+const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
+
+class AppWrapper extends React.Component {
+  render() {
+    return (
+      <Provider store={store}>
+        <Container/>
+      </Provider>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+// Redux:
+const ADD = 'ADD';
+
+const addMessage = (message) => {
+  return {
+    type: ADD,
+    message: message
+  }
+};
+
+const messageReducer = (state = [], action) => {
+  switch (action.type) {
+    case ADD:
+      return [
+        ...state,
+        action.message
+      ];
+    default:
+      return state;
+  }
+};
+
+const store = Redux.createStore(messageReducer);
+
+// React:
+const Provider = ReactRedux.Provider;
+const connect = ReactRedux.connect;
+
+// Change code below this line
+class Presentational extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: ''
+    }
+ this.handleChange = this.handleChange.bind(this);
+ this.submitMessage = this.submitMessage.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      input: event.target.value
+    });
+  }
+  submitMessage() {
+    this.props.submitNewMessage(this.state.input);
+    this.setState({
+      input: ''
+    });
+  }
+  render() {
+    return (
+      <div>
+        <h2>Type in a new Message:</h2>
+        <input
+          value={this.state.input}
+          onChange={this.handleChange}/><br/>
+        <button onClick={this.submitMessage}>Submit</button>
+        <ul>
+          {this.props.messages.map( (message, idx) => {
+              return (
+                 <li key={idx}>{message}</li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    );
+  }
+};
+// Change code above this line
+
+const mapStateToProps = (state) => {
+  return {messages: state}
+};
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    submitNewMessage: (message) => {
+      dispatch(addMessage(message))
+    }
+  }
+};
+
+const Container = connect(mapStateToProps, mapDispatchToProps)(Presentational);
+
+class AppWrapper extends React.Component {
+  render() {
+    return (
+      <Provider store={store}>
+        <Container/>
+      </Provider>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/extract-state-logic-to-redux.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/extract-state-logic-to-redux.md
new file mode 100644
index 00000000000..7f9e365fbc8
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/extract-state-logic-to-redux.md
@@ -0,0 +1,115 @@
+---
+id: 5a24c314108439a4d4036143
+title: استخراج منطق حالة (State Logic) في Redux
+challengeType: 6
+forumTopicId: 301429
+dashedName: extract-state-logic-to-redux
+---
+
+# --description--
+
+الآن بعد الانتهاء من مكون React، تحتاج إلى نقل المنطق الذي يُقوم به محليا في `state` إلى Redux. هذه هي الخطوة الأولى لتوصيل تطبيق React البسيط إلى Redux. الوظيفة الوحيدة لتطبيقك هي إضافة رسائل جديدة من المستخدم إلى قائمة غير منظمة (unordered list). المثال بسيط من أجل توضيح كيفية عمل React و Redux معا.
+
+# --instructions--
+
+أولاً، حدد نوع الإجراء `ADD` ثم عيّنه إلى ثابت باسم `ADD`. بعد ذلك، حدد منشئ العمل `addMessage()` الذي ينشئ الإجراء لإضافة رسالة. ستحتاج إلى تمرير `message` إلى منشئ الإجراءات (action creator) وإدراج الرسالة في `action` الذي تم أنشئه.
+
+ثم إنشاء مختصر يسمى `messageReducer()` الذي يتعامل مع الحالة للرسائل. يجب أن تساوي حالة أولى القائمة الفارغة. يجب أن يضيف هذا reducer رسالة إلى قائمة الرسائل المحفوظة في الحالة أو أن يعيد الحالة الحالية. أخيراً، أنشئ متجر Redux ومرر به reducer.
+
+# --hints--
+
+يجب أن يكون ثابت `ADD` موجود وأن تحتفظ بقيمة مساوية string باسم `ADD`
+
+```js
+assert(ADD === 'ADD');
+```
+
+يجب على منشئ الإجراء `addMessage` أن ينتج كائن مع `type` باسم `ADD` و `message` بقيمة الرسالة التي يتم تمريرها.
+
+```js
+assert(
+  (function () {
+    const addAction = addMessage('__TEST__MESSAGE__');
+    return addAction.type === ADD && addAction.message === '__TEST__MESSAGE__';
+  })()
+);
+```
+
+يجب أن تكون `messageReducer` وظيفة function.
+
+```js
+assert(typeof messageReducer === 'function');
+```
+
+يجب أن يكون المتجر موجوداً وأن تكون لديه حالة أولية إلى قائمة فارغة.
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState();
+    return typeof store === 'object' && initialState.length === 0;
+  })()
+);
+```
+
+إرسال `addMessage` إلى المتجر يجب أن يضيف رسالة جديدة بشكل ثابت إلى قائمة من الرسائل المحفوظة في الحالة.
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState();
+    const isFrozen = DeepFreeze(initialState);
+    store.dispatch(addMessage('__A__TEST__MESSAGE'));
+    const addState = store.getState();
+    return isFrozen && addState[0] === '__A__TEST__MESSAGE';
+  })()
+);
+```
+
+يجب أن ينتج `messageReducer` الحالة الحالية إذا تم الاتصال بها مع أي إجراءات أخرى.
+
+```js
+assert(
+  (function () {
+    const addState = store.getState();
+    store.dispatch({ type: 'FAKE_ACTION' });
+    const testState = store.getState();
+    return addState === testState;
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```jsx
+// Define ADD, addMessage(), messageReducer(), and store here:
+```
+
+# --solutions--
+
+```jsx
+const ADD = 'ADD';
+
+const addMessage = (message) => {
+  return {
+    type: ADD,
+    message
+  }
+};
+
+const messageReducer = (state = [], action) => {
+  switch (action.type) {
+    case ADD:
+      return [
+        ...state,
+        action.message
+      ];
+    default:
+      return state;
+  }
+};
+
+const store = Redux.createStore(messageReducer);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/getting-started-with-react-redux.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/getting-started-with-react-redux.md
new file mode 100644
index 00000000000..dccdf0a59f8
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/getting-started-with-react-redux.md
@@ -0,0 +1,102 @@
+---
+id: 5a24c314108439a4d4036141
+title: البدء مع React Redux
+challengeType: 6
+forumTopicId: 301430
+dashedName: getting-started-with-react-redux
+---
+
+# --description--
+
+هذه السلسلة من التحديات تعرض كيفية استخدام Redux مع React. أولا، هنا استعراض لبعض المبادئ الرئيسية لكل التقنية (technology). React هي مكتبة عرض تزويدها بالبيانات، ثم تنشئ العرض بطريقة فعالة وقابلة للتنبؤ. Redux هو framework إدارة الحالة (state management) التي يمكنك استخدامه لتبسيط إدارة حالة تطبيقك. عادة في تطبيق React يرتبط إلى Redux، أنشئ متجر واحد Redux الذي يدير حالة التطبيق بِرُمَّته. مكونات React الخاصة بك تشترك فقط في أجزاء من البيانات في المتجر ذات الصلة بدورها. ثم ارسل الإجراءات من مكونات React قاصدًا، التي تشن ذلك بتشغيل تحديثات المتجر.
+
+مع أنّ عناصر React يمكن أن تدير حالتها المحلية، عندما يكون لديك تطبيق معقد، من الأفضل عموماً الحفاظ على حالة التطبيق في موقع واحد في Redux. وهناك استثناءات عندما تكون المكونات فرادية لها حالة محلية خاصة بهم فقط. أخيرا، لأن Redux غير مصمم للعمل مع React خارج المئلوف، تحتاج إلى استخدام حُزْمَة `react-redux`. يوفر لك طريقة لتمرير `state` و `dispatch` من Redux إلى مكونات React الخاصة بك على شكل `props`.
+
+خلال التحديات القليلة التالية، أولاً، ستنشئ مكوناً React بسيطاً يسمح لك بإدخال رسائل نصية جديدة. هذه تضاف إلى قائمة تظهر في شاشة العرض. يجب أن يكون هذا استعراضا جميلا لما تعلمته من دروس React. بعد ذلك، ستنشئ متجر Redux والإجراءات التي تدير حالة قائمة الرسائل. وأخيرا، ستستخدم `react-redux` لتوصيل متجر Redux مع مكونك، وبذلك ستستخرج الحالة المحلية إلى متجر Redux.
+
+# --instructions--
+
+ابدأ بمكون `DisplayMessages`. أضف عامل بناء إلى هذا المكون وتهيئته مع حالة ذات خصيتين: `input`، تم تعيين هذا إلى string فارغ، و `messages`، التي تم تعيينها إلى قائمة فارغة.
+
+# --hints--
+
+يجب أن يجعل مكون `DisplayMessages` عنصر `div` فارغاً.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
+    return mockedComponent.find('div').text() === '';
+  })()
+);
+```
+
+يجب أن يتم استدعاء `DisplayMessages` يجب أن يتم استدعاء بشكل صحيح مع `super`، مرره إلى `props`.
+
+```js
+(getUserInput) =>
+  assert(
+    (function () {
+      const noWhiteSpace = __helpers.removeWhiteSpace(getUserInput('index'));
+      return (
+        noWhiteSpace.includes('constructor(props)') &&
+        noWhiteSpace.includes('super(props')
+      );
+    })()
+  );
+```
+
+يجب أن يكون للمكون `DisplayMessages` حالة أولية تساوي `{input: "", messages: []}`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
+    const initialState = mockedComponent.state();
+    return (
+      typeof initialState === 'object' &&
+      initialState.input === '' &&
+      Array.isArray(initialState.messages) &&
+      initialState.messages.length === 0
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<DisplayMessages />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class DisplayMessages extends React.Component {
+  // Change code below this line
+
+  // Change code above this line
+  render() {
+    return <div />
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class DisplayMessages extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: '',
+      messages: []
+    }
+  }
+  render() {
+    return <div/>
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/manage-state-locally-first.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/manage-state-locally-first.md
new file mode 100644
index 00000000000..582c8ae3e8e
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/manage-state-locally-first.md
@@ -0,0 +1,250 @@
+---
+id: 5a24c314108439a4d4036142
+title: إدارة الحالة محلياً (State Locally) أولا
+challengeType: 6
+forumTopicId: 301431
+dashedName: manage-state-locally-first
+---
+
+# --description--
+
+هنا ستنتهي من إنشاء مكون `DisplayMessages`.
+
+# --instructions--
+
+أولا، في طريقة `render()`، يحتوي المكون على عنصر `input`، وعنصر `button`، وعنصر `ul`. عندما يتغير عنصر `input`، يجب أن يؤدي إلى طريقة `handleChange()`. أيضًا، يجب أن ينتج عنصر `input` قيمة `input` الموجودة في حالة المكون. يشغل عنصر `button` طريقة `submitMessage()` عند النقر عليه.
+
+ثانياً، كتابة هاتين الطريقتين. يجب أن تقوم طريقة `handleChange()` بتحديث `input` بما يكتبه المستخدم. يجب أن تتوافق طريقة `submitMessage()` مع الرسالة الحالية (المخزنة في `input`) إلى قائمة `messages` في الحالة المحلية، ومسح قيمة `input`.
+
+أخيرا استخدم `ul` لترطيب قائمة `messages` ووضعها على الشاشة كقائمة من عناصر `li`.
+
+# --hints--
+
+يجب على مكون `DisplayMessages` تهيئته مع حالة تساوي `{ input: "", messages: [] }`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
+    const initialState = mockedComponent.state();
+    return (
+      typeof initialState === 'object' &&
+      initialState.input === '' &&
+      initialState.messages.length === 0
+    );
+  })()
+);
+```
+
+يجب أن يوفر مكون `DisplayMessages` عنصر `div` يحتوي على عنصر `h2`، وعنصر `button`، وعنصر `ul`، و عنصر `li` كعناصر فرعية.
+
+```js
+() => {
+  const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
+  const state = () => {
+    mockedComponent.setState({ messages: ['__TEST__MESSAGE'] });
+    return mockedComponent;
+  };
+  const updated = state();
+  assert(
+    updated.find('div').length === 1 &&
+      updated.find('h2').length === 1 &&
+      updated.find('button').length === 1 &&
+      updated.find('ul').length === 1 &&
+      updated.find('li').length > 0
+  );
+};
+```
+
+`.map` يجب أن تستخدم على قائمة `messages`.
+
+```js
+assert(code.match(/this\.state\.messages\.map/g));
+```
+
+يجب أن يجعل عنصر `input` قيمة `input` في الحالة المحلية.
+
+```js
+() => {
+  const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
+  const causeChange = (c, v) =>
+    c.find('input').simulate('change', { target: { value: v } });
+  const testValue = '__TEST__EVENT__INPUT';
+  const changed = () => {
+    causeChange(mockedComponent, testValue);
+    return mockedComponent;
+  };
+  const updated = changed();
+  assert(updated.find('input').props().value === testValue);
+};
+```
+
+يحدث الاتصال بالطريقة `handleChange` قيمة `input` في الحالة إلى قيمة المدخل الحالي.
+
+```js
+() => {
+  const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
+  const causeChange = (c, v) =>
+    c.find('input').simulate('change', { target: { value: v } });
+  const initialState = mockedComponent.state();
+  const testMessage = '__TEST__EVENT__MESSAGE__';
+  const changed = () => {
+    causeChange(mockedComponent, testMessage);
+    return mockedComponent;
+  };
+  const afterInput = changed();
+  assert(
+    initialState.input === '' &&
+      afterInput.state().input === '__TEST__EVENT__MESSAGE__'
+  );
+};
+```
+
+الضغط على زر `Add message` يجب أن يتصل بالطريقة `submitMessage` التي يجب أن تضيف `input` الحالة إلى قائمة `messages` في الحالة.
+
+```js
+() => {
+  const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
+  const causeChange = (c, v) =>
+    c.find('input').simulate('change', { target: { value: v } });
+  const initialState = mockedComponent.state();
+  const testMessage_1 = '__FIRST__MESSAGE__';
+  const firstChange = () => {
+    causeChange(mockedComponent, testMessage_1);
+    return mockedComponent;
+  };
+  const firstResult = firstChange();
+  const firstSubmit = () => {
+    mockedComponent.find('button').simulate('click');
+    return mockedComponent;
+  };
+  const afterSubmit_1 = firstSubmit();
+  const submitState_1 = afterSubmit_1.state();
+  const testMessage_2 = '__SECOND__MESSAGE__';
+  const secondChange = () => {
+    causeChange(mockedComponent, testMessage_2);
+    return mockedComponent;
+  };
+  const secondResult = secondChange();
+  const secondSubmit = () => {
+    mockedComponent.find('button').simulate('click');
+    return mockedComponent;
+  };
+  const afterSubmit_2 = secondSubmit();
+  const submitState_2 = afterSubmit_2.state();
+  assert(
+    initialState.messages.length === 0 &&
+      submitState_1.messages.length === 1 &&
+      submitState_2.messages.length === 2 &&
+      submitState_2.messages[1] === testMessage_2
+  );
+};
+```
+
+يجب على طريقة `submitMessage` مسح الإدخال الحالي.
+
+```js
+() => {
+  const mockedComponent = Enzyme.mount(React.createElement(DisplayMessages));
+  const causeChange = (c, v) =>
+    c.find('input').simulate('change', { target: { value: v } });
+  const initialState = mockedComponent.state();
+  const testMessage = '__FIRST__MESSAGE__';
+  const firstChange = () => {
+    causeChange(mockedComponent, testMessage);
+    return mockedComponent;
+  };
+  const firstResult = firstChange();
+  const firstState = firstResult.state();
+  const firstSubmit = () => {
+    mockedComponent.find('button').simulate('click');
+    return mockedComponent;
+  };
+  const afterSubmit = firstSubmit();
+  const submitState = afterSubmit.state();
+  assert(firstState.input === testMessage && submitState.input === '');
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<DisplayMessages />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class DisplayMessages extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: '',
+      messages: []
+    }
+  }
+  // Add handleChange() and submitMessage() methods here
+
+  render() {
+    return (
+      <div>
+        <h2>Type in a new Message:</h2>
+        { /* Render an input, button, and ul below this line */ }
+
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class DisplayMessages extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: '',
+      messages: []
+    }
+ this.handleChange = this.handleChange.bind(this);
+   this.submitMessage = this.submitMessage.bind(this);
+ }
+  handleChange(event) {
+    this.setState({
+      input: event.target.value
+    });
+  }
+  submitMessage() {
+    this.setState((state) => {
+      const currentMessage = state.input;
+      return {
+        input: '',
+        messages: state.messages.concat(currentMessage)
+      };  
+    });
+  }
+  render() {
+    return (
+      <div>
+        <h2>Type in a new Message:</h2>
+        <input
+          value={this.state.input}
+          onChange={this.handleChange}/><br/>
+        <button onClick={this.submitMessage}>Submit</button>
+        <ul>
+          {this.state.messages.map( (message, idx) => {
+              return (
+                 <li key={idx}>{message}</li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/map-dispatch-to-props.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/map-dispatch-to-props.md
new file mode 100644
index 00000000000..ded9b4c8042
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/map-dispatch-to-props.md
@@ -0,0 +1,107 @@
+---
+id: 5a24c314108439a4d4036146
+title: ركّب (Map) الإرسال (Dispatch) في مِيزات (Props)
+challengeType: 6
+forumTopicId: 301432
+dashedName: map-dispatch-to-props
+---
+
+# --description--
+
+تستخدم الوظيفة `mapDispatchToProps()` لتوفير منشئي إجراءات (action creators) محددة لمكونات React الخاصة بك حتى يتمكنوا من إرسال إجراءات (dispatch actions) ضد متجر Redux. إنها مشابهة في التركيب الوظيفة `mapStateToProps()` التي كتبتها في التحدي الأخير. إنها ترسل كائنا يركّب إجراءات الإرسال (dispatch) إلى أسماء الخواص، التي تصبح مكونا `props`. مع ذلك، بدلاً من إعادة قطعة من `state`، ترجع كل خاصية وظيفة تستدعي `dispatch` مع منشئ العمل وأي بيانات عمل ذات صلة. لديك حق الوصول إلى هذا `dispatch` لأنه يُمرر إلى `mapDispatchToProps()` كحجة عند تعريف الوظيفة، تماما كما مررت `state` إلى `mapStateToProps()`. خلف المشاهد, React المرتبط إلى Redux يستخدم `store.dispatch()` في Redux لإجراء هذه الرسائل مع `mapDispatchToProps()`. يشبه هذه كيفية أستخدام `store.subscribe()` إلى المكونات التي تركب في `state`.
+
+على سبيل المثال، لديك منشئ إجراء `loginUser()` يأخذ `username` كحمولة للإجراء. هذا الكائن ينتج من `mapDispatchToProps()` لمنشئ هذا الإجراء سيبدو شيئا مثل:
+
+```jsx
+{
+  submitLoginUser: function(username) {
+    dispatch(loginUser(username));
+  }
+}
+```
+
+# --instructions--
+
+يوفر محرر التعليمات البرمجية منشئ إجراء يسمى `addMessage()`. اكتب الوظيفة `mapDispatchToProps()` التي تأخذ `dispatch` كحجة، ثم ارجع كائن. يجب أن يكون هذا الكائن خاصيّة `submitNewMessage` التي تم تعيينها إلى وظيفة الإرسال (dispatch)، الذي يأخذ حِجَّة الرسالة الجديدة لإضافتها عندما ترسل `addMessage()`.
+
+# --hints--
+
+يجب أن ينتج `addMessage` كائن مع هُوِيَّتين `type` و `message`.
+
+```js
+assert(
+  (function () {
+    const addMessageTest = addMessage();
+    return (
+      addMessageTest.hasOwnProperty('type') &&
+      addMessageTest.hasOwnProperty('message')
+    );
+  })()
+);
+```
+
+يجب أن تكون `mapDispatchToProps` وظيفة function.
+
+```js
+assert(typeof mapDispatchToProps === 'function');
+```
+
+يجب أن تكون `mapDispatchToProps` كائن object.
+
+```js
+assert(typeof mapDispatchToProps() === 'object');
+```
+
+إرسال `addMessage` مع `submitNewMessage` من `mapDispatchToProps` يجب أن ينتج رسالة إلى وظيفة الإرسال.
+
+```js
+assert(
+  (function () {
+    let testAction;
+    const dispatch = (fn) => {
+      testAction = fn;
+    };
+    let dispatchFn = mapDispatchToProps(dispatch);
+    dispatchFn.submitNewMessage('__TEST__MESSAGE__');
+    return (
+      testAction.type === 'ADD' && testAction.message === '__TEST__MESSAGE__'
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```jsx
+const addMessage = (message) => {
+  return {
+    type: 'ADD',
+    message: message
+  }
+};
+
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+const addMessage = (message) => {
+  return {
+    type: 'ADD',
+    message: message
+  }
+};
+
+// Change code below this line
+
+const mapDispatchToProps = (dispatch) => {
+  return {
+    submitNewMessage: function(message) {
+      dispatch(addMessage(message));
+    }
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/map-state-to-props.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/map-state-to-props.md
new file mode 100644
index 00000000000..29d8bbeccc3
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/map-state-to-props.md
@@ -0,0 +1,69 @@
+---
+id: 5a24c314108439a4d4036145
+title: ركّب (Map) الحالة (State) في مِيزات (Props)
+challengeType: 6
+forumTopicId: 301433
+dashedName: map-state-to-props
+---
+
+# --description--
+
+مكون `Provider` يسمح لك بتوفير `state` و `dispatch` إلى مكونات React الخاصة بك، ولكن يجب عليك أن تحدد بالضبط ما هي الحالة والإجراءات التي تريدها. وبهذه الطريقة، تتيقن من أن كل مكون له حق الوصول إلى الحالة التي يحتاج إليها. هذه الطريقة تأخذ حَجَّتا اختياريتان، `mapStateToProps()` و `mapDispatchToProps()`.
+
+وفي هذه الوظائف، أنت تعلن ما هي القطع الذي تريد الوصول إليها وما هو منشئ الإجراء الذي تحتاج إلى أن يكون قادراً على إرساله (dispatch). وبمجرد إنشاء هذه المهام، سترى كيفية استخدام طريقة React مرتبط إلى Redux باسم `connect` لتوصيلها بالمكونات الخاصة بك في تحد آخر.
+
+**ملاحظة:** خلف المشاهد, يستخدم React مرتبط إلى Redux طريقة `store.subscribe()` لتنفيذ `mapStateToProps()`.
+
+# --instructions--
+
+إنشاء وظيفة `mapStateToProps()`. يجب أن تأخذ هذه الوظيفة `state` كحجة، ثم إرجاع كائن يركيب تلك الحالة إلى أسماء خاصية محددة. ستصبح هذه الخصائص متاحة للمكون الخاص بك بواسطة `props`. نظرًا لأن هذا المثال يحافظ على كامل حالة التطبيق في قائمة واحد، يمكنك نقل تلك الحالة جميعها إلى المكون الخاص بك. إنشاء خاصية `messages` في الكائن الذي يتم أنشئه، وتعيين هذه الخاصية إلى `state`.
+
+# --hints--
+
+يجب أن تكون `state` قائمة فارغة.
+
+```js
+assert(Array.isArray(state) && state.length === 0);
+```
+
+يجب أن تكون `mapStateToProps` وظيفة function.
+
+```js
+assert(typeof mapStateToProps === 'function');
+```
+
+يجب أن تكون `mapStateToProps` كائن object.
+
+```js
+assert(typeof mapStateToProps() === 'object');
+```
+
+نقل قائمة كحالة إلى `mapStateToProps` يجب أن يعيد هذه القائمة المسندة إلى هُوِيَّة `messages`.
+
+```js
+assert(mapStateToProps(['messages']).messages.pop() === 'messages');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```jsx
+const state = [];
+
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+const state = [];
+
+// Change code below this line
+
+const mapStateToProps = (state) => {
+  return {
+    messages: state
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/moving-forward-from-here.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/moving-forward-from-here.md
new file mode 100644
index 00000000000..404fc997c82
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/moving-forward-from-here.md
@@ -0,0 +1,69 @@
+---
+id: 5a24c314108439a4d403614a
+title: ما بعد ذالك
+challengeType: 6
+forumTopicId: 301434
+dashedName: moving-forward-from-here
+---
+
+# --description--
+
+تهانينا! أنهيت الدروس في React و Redux. هناك عنصر أخير يستحق الإشارة قبل المضي قدما. عادة، لن تكتب تطبيقات React في محرر التعليمات البرمجية مثل ذلك. هذا التحدي يعطيك لمحة من الشكل الذي تبدو عليه الجملة إذا كنت تعمل مع npm ونظام الملفات على جهازك الخاص. يجب أن تبدو التعليمات البرمجية متشابهة، باستثناء استخدام تعبيرات `import` (هذه تجذب في جميع التبعيات التي تم توفيرها لك في التحديات). قسم "Managing Packages with npm" يغطي npm بمزيد من التفصيل.
+
+وأخيرا، تتطلب كتابة تعليمات React و Redux البرمجية بعض الترتيب (configuration) عمومًا. وهذا يمكن أن يصبح معقدا بسرعة. إذا كنت مهتما بالتجربة على جهازك الخاص، فإن <a href="https://www.freecodecamp.org/news/install-react-with-create-react-app/" target="_blank" rel="noopener noreferrer nofollow">إنشاء تطبيق React</a> يتم تكوينه واستعداده للذهاب.
+
+بدلاً من ذلك، يمكنك تمكين Babel كمعالج تمهيدي إلى JavaScript في CodePen، إضافة React و ReactDOM كموارد JavaScript خارجية، والعمل هناك أيضًا.
+
+# --instructions--
+
+سجل الرسالة `'Now I know React and Redux!'` إلى وحدة التحكم.
+
+# --hints--
+
+الرسالة `Now I know React and Redux!` يجب تسجيل إلى وحدة التحكم.
+
+```js
+(getUserInput) =>
+  assert(
+    /console\s*\.\s*log\s*\(\s*('|"|`)Now I know React and Redux!\1\s*\)/.test(
+      getUserInput('index')
+    )
+  );
+```
+
+# --seed--
+
+## --seed-contents--
+
+```jsx
+/*
+import React from 'react'
+import ReactDOM from 'react-dom'
+import { Provider, connect } from 'react-redux'
+import { createStore, combineReducers, applyMiddleware } from 'redux'
+import thunk from 'redux-thunk'
+
+import rootReducer from './redux/reducers'
+import App from './components/App'
+
+const store = createStore(
+  rootReducer,
+  applyMiddleware(thunk)
+);
+
+ReactDOM.render(
+  <Provider store={store}>
+    <App/>
+  </Provider>,
+  document.getElementById('root')
+);
+*/
+
+// Only change code below this line
+```
+
+# --solutions--
+
+```jsx
+console.log('Now I know React and Redux!');
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md
new file mode 100644
index 00000000000..14f38b8df1e
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react-and-redux/use-provider-to-connect-redux-to-react.md
@@ -0,0 +1,263 @@
+---
+id: 5a24c314108439a4d4036144
+title: استخدم المزود (Provider) لربط Redux ألى React
+challengeType: 6
+forumTopicId: 301435
+dashedName: use-provider-to-connect-redux-to-react
+---
+
+# --description--
+
+في التحدي السابق، أنشئ متجر Redux للتعامل مع قائمة الرسائل وإنشاء إجراء لإضافة رسائل جديدة. الخطوة التالية هي توفير وصول React إلى متجر Redux والإجراءات التي يحتاج إليها لإرسال (dispatch) التحديثات. يرتبط React إلى Redux يوفر حُزْمَة `react-redux` للمساعدة في إنجاز هذه المهام.
+
+يرتبط React إلى Redux يوفر API تطبيقات صغيرة مع ميزتين رئيستين: `Provider` و `connect`. تحدي آخر يغطي `connect`. يغلف مكون `Provider` من React المرتبط إلى Redux الذي يغلف تطبيق React الخاص بك. ثم يسمح لك هذا التغليف بالوصول إلى وظائف `store` و `dispatch` في Redux, يعمل في كل هيكل المكون (component tree) الخاص بك. `Provider` يأخذ مِيزتان، متجر Redux والمكونات الفرعية للتطبيق الخاص بك. تعريف `Provider` لمكون التطبيق قد يبدو هكذا:
+
+```jsx
+<Provider store={store}>
+  <App/>
+</Provider>
+```
+
+# --instructions--
+
+يعرض محرر التعليمات البرمجية الآن جميع التعليمات Redux و React البرمجية الخاصة بك من عدة تحديات سابقة. يحتوي على متجر Redux، والإجراءات، والمكون `DisplayMessages`. القطعة الجديدة الوحيدة هي مكون `AppWrapper` في الأسفل. استخدم هذا المكون العلوي المستوى لجعل `Provider` من `ReactRedux`، وتمرير متجر Redux كمِيزة (prop). ثم أنتج `DisplayMessages` كعنصر فرعي. بمجرد الانتهاء منك، يجب أن ترى مكون React الخاص بك الذي تم إنتاجه في الصفحة.
+
+**ملاحظة:** يكون React المرتبط إلى Redux متوفر كمتغير عالمي هنا، حتى تتمكن من الوصول (Provider) إلى المزود بتدوين النُّقَط(dot notation). يستغل التعليمات البرمجية في المحرر هذا وينشئ ثابت `Provider` لاستخدامه في طريقة عرض `AppWrapper`.
+
+# --hints--
+
+يجب أن ينشئ `AppWrapper`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    return mockedComponent.find('AppWrapper').length === 1;
+  })()
+);
+```
+
+يجب أن يحتوي مغلف المكون `Provider` مِيزة (prop) من `store` مرر إليه، يساوي متجر Redux.
+
+```js
+(getUserInput) =>
+  assert(
+    (function () {
+      const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+      return __helpers
+        .removeWhiteSpace(getUserInput('index'))
+        .includes('<Providerstore={store}>');
+    })()
+  );
+```
+
+يجب أن يكون `DisplayMessages` كفارعي من `AppWrapper`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    return (
+      mockedComponent.find('AppWrapper').find('DisplayMessages').length === 1
+    );
+  })()
+);
+```
+
+يجب أن ينشئ مكون `DisplayMessages` عناصر `h2`، و `input`، و `button`، و `ul`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(AppWrapper));
+    return (
+      mockedComponent.find('div').length === 1 &&
+      mockedComponent.find('h2').length === 1 &&
+      mockedComponent.find('button').length === 1 &&
+      mockedComponent.find('ul').length === 1
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<AppWrapper />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+// Redux:
+const ADD = 'ADD';
+
+const addMessage = (message) => {
+  return {
+    type: ADD,
+    message
+  }
+};
+
+const messageReducer = (state = [], action) => {
+  switch (action.type) {
+    case ADD:
+      return [
+        ...state,
+        action.message
+      ];
+    default:
+      return state;
+  }
+};
+
+
+
+const store = Redux.createStore(messageReducer);
+
+// React:
+
+class DisplayMessages extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: '',
+      messages: []
+    }
+    this.handleChange = this.handleChange.bind(this);
+    this.submitMessage = this.submitMessage.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      input: event.target.value
+    });
+  }
+  submitMessage() {  
+    this.setState((state) => {
+      const currentMessage = state.input;
+      return {
+        input: '',
+        messages: state.messages.concat(currentMessage)
+      };
+    });
+  }
+  render() {
+    return (
+      <div>
+        <h2>Type in a new Message:</h2>
+        <input
+          value={this.state.input}
+          onChange={this.handleChange}/><br/>
+        <button onClick={this.submitMessage}>Submit</button>
+        <ul>
+          {this.state.messages.map( (message, idx) => {
+              return (
+                 <li key={idx}>{message}</li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    );
+  }
+};
+
+const Provider = ReactRedux.Provider;
+
+class AppWrapper extends React.Component {
+  // Render the Provider below this line
+
+  // Change code above this line
+};
+```
+
+# --solutions--
+
+```jsx
+// Redux:
+const ADD = 'ADD';
+
+const addMessage = (message) => {
+  return {
+    type: ADD,
+    message
+  }
+};
+
+const messageReducer = (state = [], action) => {
+  switch (action.type) {
+    case ADD:
+      return [
+        ...state,
+        action.message
+      ];
+    default:
+      return state;
+  }
+};
+
+const store = Redux.createStore(messageReducer);
+
+// React:
+
+class DisplayMessages extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: '',
+      messages: []
+    }
+ this.handleChange = this.handleChange.bind(this);
+ this.submitMessage = this.submitMessage.bind(this);
+ }
+  handleChange(event) {
+    this.setState({
+      input: event.target.value
+    });
+  }
+  submitMessage() {
+    this.setState((state) => {
+      const currentMessage = state.input;
+      return {
+        input: '',
+        messages: state.messages.concat(currentMessage)
+      };  
+    });
+  }
+  render() {
+    return (
+      <div>
+        <h2>Type in a new Message:</h2>
+        <input
+          value={this.state.input}
+          onChange={this.handleChange}/><br/>
+        <button onClick={this.submitMessage}>Submit</button>
+        <ul>
+          {this.state.messages.map( (message, idx) => {
+              return (
+                 <li key={idx}>{message}</li>
+              )
+            })
+          }
+        </ul>
+      </div>
+    );
+  }
+};
+
+const Provider = ReactRedux.Provider;
+
+class AppWrapper extends React.Component {
+  // Change code below this line
+  render() {
+    return (
+      <Provider store = {store}>
+        <DisplayMessages/>
+      </Provider>
+    );
+  }
+  // Change code above this line
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/access-props-using-this.props.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/access-props-using-this.props.md
new file mode 100644
index 00000000000..65a5be67802
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/access-props-using-this.props.md
@@ -0,0 +1,148 @@
+---
+id: 5a24c314108439a4d403616e
+title: الوصول إلى Props باستخدام this.props
+challengeType: 6
+forumTopicId: 301375
+dashedName: access-props-using-this-props
+---
+
+# --description--
+
+وشملت التحديات العدّة الأخيرة الطرق الأساسية لإيصال props المتعلقة بمكونات الأطفال (child components). ولكن ماذا لو كان مكون الطفل (child component) الذي تمرره هو مكون لفئة ES6 بدلاً من مكون وظيفي عديم الحالة؟ ويستخدم مكون لفئة ES6 اتفاقية مختلفة قليلاً للوصول إلى props.
+
+في أي وقت تشير إلى مكون لفئة (class component) داخل نفسه، تستخدم الكلمة `this`. للوصول إلى props ضمن مكون لفئة، يمكنك إعداد التعليمات البرمجية التي تستخدمها للوصول إليها مع `this`. على سبيل المثال، إذا كان مكون لفئة ES6 يحتوي على props يسمى `data`، فإنك تكتب `{this.props.data}` في JSX.
+
+# --instructions--
+
+تقديم (render) خطوة للمكون `Welcome` في المكون الأصلي `App`. هنا، أعط `Welcome` دعمه (prop) من `name` وتعيين قيمة string. داخل الطفل، `Welcome`، الوصول إلى دعمه (prop) باسم `name` ضمن `strong` قوية.
+
+# --hints--
+
+يجب أن يعيد مكون `App` عنصر `div` واحد.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(App));
+    return mockedComponent.children().type() === 'div';
+  })()
+);
+```
+
+يجب أن يكون ابن `App` مكون `Welcome`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(App));
+    return (
+      mockedComponent.children().childAt(0).name() === 'Welcome'
+    );
+  })()
+);
+```
+
+يجب أن يحتوي مكون `Welcome` على دعمه (prop) يسمى `name`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(App));
+    return mockedComponent.find('Welcome').props().name;
+  })()
+);
+```
+
+يجب أن يعرض مكون `Welcome` المقطع (string) الذي تمرره دعمه (prop) باسم `name` ضمن دعمه باسم `strong` داخل وسوم.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(App));
+    return (
+      mockedComponent.find('strong').text() ===
+      mockedComponent.find('Welcome').props().name
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+
+  }
+  render() {
+    return (
+        <div>
+            { /* Change code below this line */ }
+            <Welcome />
+            { /* Change code above this line */ }
+        </div>
+    );
+  }
+};
+
+class Welcome extends React.Component {
+  constructor(props) {
+    super(props);
+
+  }
+  render() {
+    return (
+        <div>
+          { /* Change code below this line */ }
+          <p>Hello, <strong></strong>!</p>
+          { /* Change code above this line */ }
+        </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class Welcome extends React.Component {
+  constructor(props) {
+    super(props);
+
+  }
+  render() {
+    return (
+        <div>
+          { /* Change code below this line */ }
+          <p>Hello, <strong>{this.props.name}</strong>!</p>
+          { /* Change code above this line */ }
+        </div>
+    );
+  }
+};
+
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+
+  }
+  render() {
+    return (
+        <div>
+            { /* Change code below this line */ }
+            <Welcome name="Quincy"/>
+            { /* Change code above this line */ }
+        </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/add-comments-in-jsx.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/add-comments-in-jsx.md
new file mode 100644
index 00000000000..8dd29fc1120
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/add-comments-in-jsx.md
@@ -0,0 +1,82 @@
+---
+id: 5a24bbe0dba28a8d3cbd4c5e
+title: إضافة تعليقات في JSX
+challengeType: 6
+forumTopicId: 301376
+dashedName: add-comments-in-jsx
+---
+
+# --description--
+
+JSX هو بناء الجملة التي يتم تجميعها في JavaScript صالحة. في بعض الأحيان، للحصول على قراءة سلسة، قد تحتاج إلى إضافة تعليقات إلى الكود الخاص بك. مثل معظم لغات البرمجة، لدى JSX طريقتها الخاصة للقيام بذلك.
+
+لوضع التعليقات داخل JSX، يمكنك استخدام بناء الجملة `{/* */}` حول نص التعليق.
+
+# --instructions--
+
+يحتوي محرر التعليمات البرمجية على عنصر JSX مماثل لما أنشأته في التحدي الأخير. أضف تعليق في مكان ما داخل عنصر `div` المقدم، دون تعديل العناصر `h1` أو `p` الموجودة.
+
+# --hints--
+
+يجب أن يُنتج `JSX` عنصر `div`.
+
+```js
+assert(JSX.type === 'div');
+```
+
+يجب أن يحتوي `div` على `h1` كالعنصر الأول.
+
+```js
+assert(JSX.props.children[0].type === 'h1');
+```
+
+يجب أن يحتوي `div` على `p` كالعنصر الثاني.
+
+```js
+assert(JSX.props.children[1].type === 'p');
+```
+
+يجب عدم تعديل العناصر `h1` و `p` الموجودة.
+
+```js
+assert(
+  JSX.props.children[0].props.children === 'This is a block of JSX' &&
+    JSX.props.children[1].props.children === "Here's a subtitle"
+);
+```
+
+يجب أن يستخدم `JSX` لبناء تعليق صحيح.
+
+```js
+assert(/<div>[\s\S]*{\s*\/\*[\s\S]*\*\/\s*}[\s\S]*<\/div>/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(JSX, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const JSX = (
+  <div>
+    <h1>This is a block of JSX</h1>
+    <p>Here's a subtitle</p>
+  </div>
+);
+```
+
+# --solutions--
+
+```jsx
+const JSX = (
+<div>
+  <h1>This is a block of JSX</h1>
+  { /* this is a JSX comment */ }
+  <p>Here's a subtitle</p>
+</div>);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/add-event-listeners.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/add-event-listeners.md
new file mode 100644
index 00000000000..b6762e48e98
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/add-event-listeners.md
@@ -0,0 +1,179 @@
+---
+id: 5a24c314108439a4d403617e
+title: إضافة Event Listeners
+challengeType: 6
+forumTopicId: 301377
+dashedName: add-event-listeners
+---
+
+# --description--
+
+طريقة `componentDidMount()` هي أيضا أفضل مكان لإرفاق أي مستمعي الأحداث (event listeners) الذين تحتاج إلى إضافتهم لوظائف محددة. يوفر React نظام الأحداث الاصطناعية التي تغلف نظام الأحداث الأصلية الموجود في المتصفحات. وهذا يعني أن نظام الأحداث الاصطناعية يتصرف بنفس الطريقة بغض النظر عن متصفح المستخدم - حتى لو كانت الأحداث الأصلية تتصرف بطريقة مختلفة بين المتصفحات المختلفة.
+
+لقد كنت تستخدم فعلًا بعض هذه المعالجات الاصطناعية للأحداث مثل `onClick()`. نظام الحدث الاصطناعي في React رائع لاستخدامه في معظم التفاعلات التي ستديرها على عناصر DOM. ومع ذلك، إذا كنت ترغب في إرفاق معالج الحدث (event handler) إلى عناصر المستند أو النافذة، فيجب عليك القيام بذلك مباشرة.
+
+# --instructions--
+
+إرفاق مستمع الحدث (event listener) في طريقة `componentDidMount()` للأحداث `keydown` وجعل هذه الأحداث تشغل رد الاتصال `handleKeyPress()`. يمكنك استخدام `document.addEventListener()` الذي يأخذ الحدث (بالاقتباس) كأول حَجَّة واستدعاء (callback) كحجة ثانية.
+
+ثم، في `componentWillUnmount()`، أزل مستمع هذا الحدث نفسه. يمكنك تمرير نفس الحجج إلى `document.removeEventListener()`. من الممارسات الجيدة أن تستخدم طريقة دورة الحياة (lifecycle) هذه للقيام بأي تنظيف على مكونات React قبل أن يتم تفكيكها وتدميرها. إزالة مستمعي الأحداث مثال على إجراء تنظيف من هذا القبيل.
+
+# --hints--
+
+`MyComponent` يجب أن يقدم عنصر `div` الذي يلم علامة `h1`.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.find('div').children().find('h1').length === 1;
+  })()
+);
+```
+
+يجب إلحاق مستمع `keydown` بالمستند في `componentDidMount`.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    const didMountString = mockedComponent
+      .instance()
+      .componentDidMount.toString();
+    return new RegExp(
+      'document.addEventListener(.|\n|\r)+keydown(.|\n|\r)+this.handleKeyPress'
+    ).test(didMountString);
+  })()
+);
+```
+
+يجب إزالة مستمع `keydown` من المستند في `componentWillUnmount`.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    const willUnmountString = mockedComponent
+      .instance()
+      .componentWillUnmount.toString();
+    return new RegExp(
+      'document.removeEventListener(.|\n|\r)+keydown(.|\n|\r)+this.handleKeyPress'
+    ).test(willUnmountString);
+  })()
+);
+```
+
+بمجرد تركيب المكون، الضغط على `enter` يجب أن تحدِيث حالته وعلامة `h1` المقدمة.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const beforeState = mockedComponent.state('message');
+  const beforeText = mockedComponent.find('h1').text();
+  const pressEnterKey = () => {
+    mockedComponent.instance().handleKeyPress({ keyCode: 13 });
+    return waitForIt(() => {
+      mockedComponent.update();
+      return {
+        state: mockedComponent.state('message'),
+        text: mockedComponent.find('h1').text()
+      };
+    });
+  };
+  const afterKeyPress = await pressEnterKey();
+  assert(
+    beforeState !== afterKeyPress.state && beforeText !== afterKeyPress.text
+  );
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      message: ''
+    };
+    this.handleEnter = this.handleEnter.bind(this);
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+  }
+  // Change code below this line
+  componentDidMount() {
+
+  }
+  componentWillUnmount() {
+
+  }
+  // Change code above this line
+  handleEnter() {
+    this.setState((state) => ({
+      message: state.message + 'You pressed the enter key! '
+    }));
+  }
+  handleKeyPress(event) {
+    if (event.keyCode === 13) {
+      this.handleEnter();
+    }
+  }
+  render() {
+    return (
+      <div>
+        <h1>{this.state.message}</h1>
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      message: ''
+    };
+    this.handleKeyPress = this.handleKeyPress.bind(this);
+    this.handleEnter = this.handleEnter.bind(this);  }
+  componentDidMount() {
+    // Change code below this line
+    document.addEventListener('keydown', this.handleKeyPress);
+    // Change code above this line
+  }
+  componentWillUnmount() {
+    // Change code below this line
+    document.removeEventListener('keydown', this.handleKeyPress);
+    // Change code above this line
+  }
+  handleEnter() {
+    this.setState((state) => ({
+      message: state.message + 'You pressed the enter key! '
+    }));
+  }
+  handleKeyPress(event) {
+    if (event.keyCode === 13) {
+      this.handleEnter();
+    }
+  }
+  render() {
+    return (
+      <div>
+        <h1>{this.state.message}</h1>
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/add-inline-styles-in-react.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/add-inline-styles-in-react.md
new file mode 100644
index 00000000000..fdfcd749b3b
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/add-inline-styles-in-react.md
@@ -0,0 +1,112 @@
+---
+id: 5a24c314108439a4d4036182
+title: إضافة Inline Styles في React
+challengeType: 6
+forumTopicId: 301378
+dashedName: add-inline-styles-in-react
+---
+
+# --description--
+
+ربما لاحظت في التحدي الأخير أن هناك عدة اختلافات بناء الجملة الأخرى من أنماط HTML المضمنة بالإضافة إلى `style` السمة المعينة إلى كائن JavaScript. أولاً، تستخدم بعض أساليب خصائص CSS أسماء في حالة الجمال (camel case). على سبيل المثال، آخر تحد تعيّن فيه حجم الخط مع `fontSize` بدلاً من `font-size`. الكلمات المهيمنة مثل `font-size` هي صيغة غير صالحة لخصائص كائن JavaScript، لذلك يستخدم React حالة الجمال. وكقاعدة، يتم كتابة أي أساليب خصائص مميزة باستخدام حالة الجمال في JSX.
+
+جميع وحدات طول قيمة الخاصية (مثل `height`، و `width`، و `fontSize`) سيفترض أنهم في `px` ما لم يذكر خلاف ذلك. إذا كنت ترغب في استخدام `em`، على سبيل المثال، أنت تلف القيمة والوحدات في علامتا التنصيص (quotes)، مثل `{fontSize: "4em"}`. بخلاف قيم الطول التي هي افتراضية إلى `px`، يجب تغليف جميع قيم الخصائص الأخرى في علامتا التنصيص.
+
+# --instructions--
+
+إذا كان لديك مجموعة كبيرة من الأساليب، يمكنك تعيين أسلوب ألى `object` على ثابت (constant) للحفاظ على تنظيمك البرمجي. إعلان أساليبك ثابتة (constant) كمتغير عالمي (global variable) في الجزء العلوي من المِلَفّ. تهيئة `styles` ثابتة وتعيين `object` مع ثلاث خصائص و قيمها له. اعطي `div` لون `purple`، حجم الخط (font-size) بقيمة `40` و حدود (border) بقيمة `2px solid purple`. ثم عيّن سمة `style` مساوية ثابتة (constant) باسم `styles`.
+
+# --hints--
+
+يجب أن يكون متغير `styles` على شكل `object` ذو ثلاث خواص.
+
+```js
+assert(Object.keys(styles).length === 3);
+```
+
+المتغير `styles` يحصل على خاصية `color` و يعطى قيمة `purple`.
+
+```js
+assert(styles.color === 'purple');
+```
+
+المتغير `styles` يحصل على خاصية `fontSize` و يعطى قيمة `40`.
+
+```js
+assert(styles.fontSize == 40);
+```
+
+المتغير `styles` يحصل على خاصية `border` و يعطى قيمة `2px solid purple`.
+
+```js
+assert(styles.border === '2px solid purple');
+```
+
+يجب أن ينتج من المكون عنصر `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.shallow(React.createElement(Colorful));
+    return mockedComponent.type() === 'div';
+  })()
+);
+```
+
+يجب أن يكون عنصر `div` قد تم تعريف أساليبه بواسطة كائن `styles`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.shallow(React.createElement(Colorful));
+    return (
+      mockedComponent.props().style.color === 'purple' &&
+      mockedComponent.props().style.fontSize == 40 &&
+      mockedComponent.props().style.border === '2px solid purple'
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<Colorful />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+// Change code above this line
+class Colorful extends React.Component {
+  render() {
+    // Change code below this line
+    return (
+      <div style={{color: "yellow", fontSize: 24}}>Style Me!</div>
+    );
+    // Change code above this line
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+const styles = {
+  color: "purple",
+  fontSize: 40,
+  border: "2px solid purple"
+};
+// Change code above this line
+class Colorful extends React.Component {
+  render() {
+    // Change code below this line
+    return (
+      <div style={styles}>Style Me!</div>
+    );
+    // Change code above this line
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/bind-this-to-a-class-method.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/bind-this-to-a-class-method.md
new file mode 100644
index 00000000000..6bc108a08f1
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/bind-this-to-a-class-method.md
@@ -0,0 +1,136 @@
+---
+id: 5a24c314108439a4d4036174
+title: ربط 'this' إلى Class Method
+challengeType: 6
+forumTopicId: 301379
+dashedName: bind-this-to-a-class-method
+---
+
+# --description--
+
+بالإضافة إلى إعداد وتحديث `state`، يمكنك أيضًا تحديد طرق لفئة المكونات الخاصة بك. عادة ما تحتاج طريقة الفئة (class method) إلى استخدام الكلمة المفتاحية `this` حتى تتمكن من الوصول إلى الخصائص في الفئة (مثل `state` و `props`) داخل نطاق الطريقة. هناك بعض الطرق للسماح لطرقية الفئة الخاص بك بالوصول إلى `this`.
+
+إحدى الطرق الشائعة هي ربط `this` صراحة في الإنشاء لذلك يصبح `this` مرتبطاً بأساليب الفئة (class method) عندما يتم تهيئة المكون. ربما لاحظت التحدي الأخير المستخدم `this.handleClick = this.handleClick.bind(this)` لطريقة `handleClick` في البناء. بعد ذلك، عندما تتصل بالوظيفة مثل `this.setState()` ضمن طريقة الفئة الخاص بك، `this` يشير إلى الفئة ولن يكون `undefined`.
+
+**ملاحظة:** الكلمة المفتاحية `this` هي واحدة من أكثر الجوانب ارتباكاً في JavaScript ولكنها تؤدي دوراً هاماً في React. مع أنّ أن سلوكها هنا طبيعي تماما، هذه الدروس ليست المكان المناسب لإجراء استعراض متعمق لكلمة `this` لذا يرجى الرجوع إلى الدروس الأخرى إذا كان ما ورد أعلا مثيرا للارتباك!
+
+# --instructions--
+
+يحتوي محرر التعليمات البرمجية على مكون مع `state` التي تتابع حالة النص. ثم أن لديها طريقة تسمح لك بتعيين النص إلى `You clicked!`. ومع ذلك، فإن الطريقة لا تعمل لأنها تستخدم الكلمة المفتاحية `this` التي لم يتم تعريفها. أصلحة بواسطة ربط `this` بشكل معتمد للطريقة `handleClick()` في بناء المكوّن.
+
+بعد ذلك، أضف معالج النقر (click handler) إلى عنصر `button` في طريقة التقديم. يجب أن تشغل طريقة `handleClick()` عندما يتلقى الزر حدثا بالنقر عليه. تذكر أن الطريقة التي تمررها إلى معالج `onClick` تحتاج إلى أقواس غريبة لأنه يجب أن تفسر قاصدًا على أنها JavaScript.
+
+بمجرد الانتهاء من الخطوات المذكورة أعلاه، يجب أن تكون قادراً على النقر على الزر ومشاهدة `You clicked!`.
+
+# --hints--
+
+`MyComponent` يجب أن يعيد عنصر `div` الذي يغلق عنصرين، button و `h1` في ذلك الترتيب.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MyComponent)).find('div').length === 1 &&
+    Enzyme.mount(React.createElement(MyComponent))
+      .find('div')
+      .childAt(0)
+      .type() === 'button' &&
+    Enzyme.mount(React.createElement(MyComponent))
+      .find('div')
+      .childAt(1)
+      .type() === 'h1'
+);
+```
+
+حالة `MyComponent` يجب أن تهيئ مع زوج القيمة الرئيسة `{ text: "Hello" }`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MyComponent)).state('text') === 'Hello'
+);
+```
+
+النقر على `button` يجب تشغيل طريقة `handleClick` وتعيين `text` إلى `You clicked!`.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const first = () => {
+    mockedComponent.setState({ text: 'Hello' });
+    return waitForIt(() => mockedComponent.state('text'));
+  };
+  const second = () => {
+    mockedComponent.find('button').simulate('click');
+    return waitForIt(() => mockedComponent.state('text'));
+  };
+  const firstValue = await first();
+  const secondValue = await second();
+  assert(firstValue === 'Hello' && secondValue === 'You clicked!');
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: "Hello"
+    };
+    // Change code below this line
+
+    // Change code above this line
+  }
+  handleClick() {
+    this.setState({
+      text: "You clicked!"
+    });
+  }
+  render() {
+    return (
+      <div>
+        { /* Change code below this line */ }
+        <button>Click Me</button>
+        { /* Change code above this line */ }
+        <h1>{this.state.text}</h1>
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      text: "Hello"
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    this.setState({
+      text: "You clicked!"
+    });
+  }
+  render() {
+    return (
+      <div>
+        <button onClick = {this.handleClick}>Click Me</button>
+        <h1>{this.state.text}</h1>
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/change-inline-css-conditionally-based-on-component-state.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/change-inline-css-conditionally-based-on-component-state.md
new file mode 100644
index 00000000000..0a3886eadec
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/change-inline-css-conditionally-based-on-component-state.md
@@ -0,0 +1,176 @@
+---
+id: 5a24c314108439a4d4036189
+title: تغيير Inline CSS على أساس حالة المكون (Component State)
+challengeType: 6
+forumTopicId: 301380
+dashedName: change-inline-css-conditionally-based-on-component-state
+---
+
+# --description--
+
+في هذه المرحلة، رأيتم عدة تطبيقات للعرض المشروط و استخدام التصميمات الداخلية. هذا مثال آخر يجمع بين هذين الموضوعين. يمكنك أيضا جعل CSS مشروطا استنادا على حالة (state) مكون React. للقيام بذلك، يمكنك التحقق من وجود حالة، وإذا تم الوفاء بهذا الشرط، عدّل كائن التصميمات التي تم تعيينها لعناصر JSX في طريقة التقديم.
+
+ومن المهم فهم هذا النموذج لأنه تحولاً جذرياً عن النهج الأكثر تقليدية المتمثل في تطبيق التصميمات عن طريق تعديل عناصر DOM قاصدًا (وهو أمر شائع جداً مع JQuery، مثلاً). وفي ذلك النهج، يجب أن تتتبع متى تتغير العناصر وأن تتعامل أيضا مع التلاعب الفعلي قاصدًا. قد يصبح من الصعب تتبع التغييرات، مما قد يجعل واجهة المستخدم (UI) الخاصة بك غير قابلة للتنبؤ. عندما تضبط كائن الأسلوب بناءً على شرط، فإنك تصف كيف يجب أن تبدو واجهة المستخدم (UI) بناء على وظيفة لحالة التطبيق. وهناك تدفق واضح للمعلومات لا يتحرك إلا في اتجاه واحد. هذه هي الطريقة المفضلة عند كتابة الطلبات مع React.
+
+# --instructions--
+
+يحتوي محرر التعليمات البرمجية على مكون مدخل بسيط محكوم به حدود (border) مصممة. تريد تصميم هذا الحدود الحمراء إذا قام المستخدم بطبع أكثر من 15 حرفاً من النص في مربع الإدخال. إضافة شرط للتحقق من ذلك، وإذا كان الشرط صحيحا، عيّن أسلوب الحدود المدخل إلى `3px solid red`. يمكنك محاولة ذلك بإدخال النص في المدخل.
+
+# --hints--
+
+يجب أن يوفر مكون `GateKeeper` عنصر `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(GateKeeper));
+    return mockedComponent.find('div').length === 1;
+  })()
+);
+```
+
+يجب تهيئة المكون `GateKeeper` بمفتاح الحالة `input` إلى string فارغة.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(GateKeeper));
+    return mockedComponent.state().input === '';
+  })()
+);
+```
+
+يجب أن يقدم مكون `GateKeeper` علامة `h3` و علامة `input`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(GateKeeper));
+    return (
+      mockedComponent.find('h3').length === 1 &&
+      mockedComponent.find('input').length === 1
+    );
+  })()
+);
+```
+
+يجب أن تحتوي علامة `input` في البداية على أسلوب `1px solid black` لخاصية `border`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(GateKeeper));
+    return (
+      mockedComponent.find('input').props().style.border === '1px solid black'
+    );
+  })()
+);
+```
+
+يجب أن يتم تصميم علامة `input` بحدود `3px solid red` إذا كانت قيمة الإدخال في الحالة أطول من 15 حرفاً.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 100));
+  const mockedComponent = Enzyme.mount(React.createElement(GateKeeper));
+  const simulateChange = (el, value) =>
+    el.simulate('change', { target: { value } });
+  let initialStyle = mockedComponent.find('input').props().style.border;
+  const state_1 = () => {
+    mockedComponent.setState({ input: 'this is 15 char' });
+    return waitForIt(() => mockedComponent.find('input').props().style.border);
+  };
+  const state_2 = () => {
+    mockedComponent.setState({
+      input: 'A very long string longer than 15 characters.'
+    });
+    return waitForIt(() => mockedComponent.find('input').props().style.border);
+  };
+  const style_1 = await state_1();
+  const style_2 = await state_2();
+  assert(
+    initialStyle === '1px solid black' &&
+      style_1 === '1px solid black' &&
+      style_2 === '3px solid red'
+  );
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<GateKeeper />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class GateKeeper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(event) {
+    this.setState({ input: event.target.value })
+  }
+  render() {
+    let inputStyle = {
+      border: '1px solid black'
+    };
+    // Change code below this line
+
+    // Change code above this line
+    return (
+      <div>
+        <h3>Don't Type Too Much:</h3>
+        <input
+          type="text"
+          style={inputStyle}
+          value={this.state.input}
+          onChange={this.handleChange} />
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class GateKeeper extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(event) {
+    this.setState({ input: event.target.value })
+  }
+  render() {
+    let inputStyle = {
+      border: '1px solid black'
+    };
+    if (this.state.input.length > 15) {
+      inputStyle.border = '3px solid red';
+    };
+    return (
+      <div>
+        <h3>Don't Type Too Much:</h3>
+        <input
+          type="text"
+          style={inputStyle}
+          value={this.state.input}
+          onChange={this.handleChange} />
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/compose-react-components.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/compose-react-components.md
new file mode 100644
index 00000000000..ed42bbe9957
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/compose-react-components.md
@@ -0,0 +1,199 @@
+---
+id: 5a24c314108439a4d4036166
+title: إنشاء مكونات React
+challengeType: 6
+forumTopicId: 301381
+dashedName: compose-react-components
+---
+
+# --description--
+
+ومع استمرار التحديات في استخدام تركيبات أكثر تعقيدا مع مكونات React و JSX، ثمة نقطة هامة جديرة يحب ملاحظتها. لا يختلف تقديم مكونات أسلوب ES6 ضمن مكونات أخرى عن تقديم المكونات البسيطة التي استخدمتها في التحديات القليلة الأخيرة. يمكنك تقديم عناصر JSX، والمكونات التي لا جنسية لها، ومكونات الفئة ES6 ضمن مكونات أخرى.
+
+# --instructions--
+
+في محرر التعليمات البرمجية، يقوم مكون `TypesOfFood` فعلًا بتقديم مكون يسمى `Vegetables`. وهناك مكون `Fruits` من التحدي الأخير.
+
+أدخل مكونين داخل `Fruits` - أولا `NonCitrus`، ثم `Citrus`. كل من هذين العنصرين تم توفيره لك خلف الكواليس. بعد ذلك، عش مكون فئة `Fruits` في مكون `TypesOfFood`، تحت عنصر العنوان `h1` وما فوق `Vegetables`. وينبغي أن تكون النتيجة سلسلة من المكونات المتداخلة التي تستخدم نوعين مختلفين من المكونات.
+
+# --hints--
+
+يجب أن ينتج مكون `TypesOfFood` عنصر `div` واحد.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
+    return mockedComponent.children().type() === 'div';
+  })()
+);
+```
+
+يجب أن ينتج مكون `TypesOfFood` مكون `Fruits`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
+    return mockedComponent.children().childAt(1).name() === 'Fruits';
+  })()
+);
+```
+
+مكون `Fruits` يجب أن يعيد مكون `NonCitrus` و مكون `Citrus`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
+    return (
+      mockedComponent.find('Fruits').children().find('NonCitrus').length ===
+        1 &&
+      mockedComponent.find('Fruits').children().find('Citrus').length === 1
+    );
+  })()
+);
+```
+
+يجب أن ينتج مكون `TypesOfFood` مكون `Vegetables` تحت مكون `Fruits`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
+    return mockedComponent.children().childAt(2).name() === 'Vegetables';
+  })()
+);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```jsx
+class NonCitrus extends React.Component {
+  render() {
+    return (
+      <div>
+        <h4>Non-Citrus:</h4>
+        <ul>
+          <li>Apples</li>
+          <li>Blueberries</li>
+          <li>Strawberries</li>
+          <li>Bananas</li>
+        </ul>
+      </div>
+    );
+  }
+};
+class Citrus extends React.Component {
+  render() {
+    return (
+      <div>
+        <h4>Citrus:</h4>
+        <ul>
+          <li>Lemon</li>
+          <li>Lime</li>
+          <li>Orange</li>
+          <li>Grapefruit</li>
+        </ul>
+      </div>
+    );
+  }
+};
+class Vegetables extends React.Component {
+  render() {
+    return (
+      <div>
+        <h2>Vegetables:</h2>
+        <ul>
+          <li>Brussel Sprouts</li>
+          <li>Broccoli</li>
+          <li>Squash</li>
+        </ul>
+      </div>
+    );
+     }
+};
+```
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<TypesOfFood />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class Fruits extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h2>Fruits:</h2>
+        { /* Change code below this line */ }
+
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+
+class TypesOfFood extends React.Component {
+  constructor(props) {
+     super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>Types of Food:</h1>
+        { /* Change code below this line */ }
+
+        { /* Change code above this line */ }
+        <Vegetables />
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class Fruits extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h2>Fruits:</h2>
+        { /* Change code below this line */ }
+        <NonCitrus />
+        <Citrus />
+        { /* Change code above this line */ }
+      </div>
+    )
+  }
+}
+
+class TypesOfFood extends React.Component {
+  constructor(props) {
+     super(props);
+  }
+    render() {
+      return (
+        <div>
+        <h1>Types of Food:</h1>
+          { /* Change code below this line */ }
+          <Fruits />
+          { /* Change code above this line */ }
+          <Vegetables />
+        </div>
+      );
+    }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-complex-jsx-element.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-complex-jsx-element.md
new file mode 100644
index 00000000000..fdd1c5a07f3
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-complex-jsx-element.md
@@ -0,0 +1,110 @@
+---
+id: 5a24bbe0dba28a8d3cbd4c5d
+title: إنشاء عنصر JSX معقد
+challengeType: 6
+forumTopicId: 301382
+dashedName: create-a-complex-jsx-element
+---
+
+# --description--
+
+التحدي الأخير كان المثال بسيطاً على JSX، ولكن JSX يمكن أن يمثل HTML أكثر تعقيداً أيضاً.
+
+أحد الأشياء المهمة التي يجب أن تعلمها عن تداخل JSX هو أنه يجب أن ينتج عنصر واحد.
+
+هذا العنصر الأصلي الواحد سيغلف جميع المستويات الأخرى للعناصر المتداخلة.
+
+وعلى سبيل المثال، فإن العديد من عناصر JSX المكتوبة كأخوة لا يوجد فيها عنصر تغليف أصلي لن يتم نقلها.
+
+إليك مثال:
+
+**Valid JSX:**
+
+```jsx
+<div>
+  <p>Paragraph One</p>
+  <p>Paragraph Two</p>
+  <p>Paragraph Three</p>
+</div>
+```
+
+**Invalid JSX:**
+
+```jsx
+<p>Paragraph One</p>
+<p>Paragraph Two</p>
+<p>Paragraph Three</p>
+```
+
+# --instructions--
+
+أعلن ثابت جديد `JSX` يجعل `div` يحتوي على العناصر التالية بالترتيب:
+
+`h1`، و`p`، وقائمة غير مرتبة (unordered list) تحتوي على ثلاث عناصر `li`. يمكنك تضمين أي نص تريده داخل كل عنصر.
+
+**ملاحظة:** عند تقديم عناصر متعددة مثل، يمكنك إلصاقها كلها بين قوسين، لكنها ليست مطلوبة بدقة. لاحظ أيضًا أن هذا التحدي يستخدم علامة `div` لإغلاق جميع العناصر الفرعية داخل عنصر أحد الوالدين. إذا أزالت `div`، فلن يتم نقل JSX. ضع هذا في اعتباره، لأنه سيطبق أيضا عند أنتاج عناصر JSX في مكونات React.
+
+# --hints--
+
+يجب أن يعيد عنصر `div` الثابت `JSX`.
+
+```js
+assert(JSX.type === 'div');
+```
+
+يجب أن يحتوي `div` على علامة `h1` كالعنصر الأول.
+
+```js
+assert(JSX.props.children[0].type === 'h1');
+```
+
+يجب أن يحتوي `div` على علامة `p` كالعنصر الثاني.
+
+```js
+assert(JSX.props.children[1].type === 'p');
+```
+
+يجب أن يحتوي `div` على علامة `ul` كعنصر ثالث.
+
+```js
+assert(JSX.props.children[2].type === 'ul');
+```
+
+يجب أن يحتوي `ul` على ثلاث عناصر `li`.
+
+```js
+assert(
+  JSX.props.children
+    .filter((ele) => ele.type === 'ul')[0]
+    .props.children.filter((ele) => ele.type === 'li').length === 3
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(JSX, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+
+```
+
+# --solutions--
+
+```jsx
+const JSX = (
+<div>
+  <h1>Hello JSX!</h1>
+  <p>Some info</p>
+  <ul>
+    <li>An item</li>
+    <li>Another item</li>
+    <li>A third item</li>
+  </ul>
+</div>);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-component-with-composition.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-component-with-composition.md
new file mode 100644
index 00000000000..38fdf910039
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-component-with-composition.md
@@ -0,0 +1,134 @@
+---
+id: 5a24c314108439a4d4036164
+title: إنشاء مكون (Component) مع التكوين (Composition)
+challengeType: 6
+forumTopicId: 301383
+dashedName: create-a-component-with-composition
+---
+
+# --description--
+
+الآن سوف تنظر في كيفية تكوين مكونات متعددة من React. تخيل أنك تبني تطبيق وأنشأت ثلاث مكونات: `Navbar`, و `Dashboard`, و `Footer`.
+
+لتجميع هذه المكونات معا، يمكنك إنشاء عنصر `App` تكون مكون *الأصل* الذي يجعل كل واحد من هذه المكونات الثلاثة *أبنائه*. لجعل مكون أبن في مكون React، ضف اسم المكون المكتوب كعلامة HTML مخصصة في JSX. على سبيل المثال، في طريقة `render` يمكنك الكتابة:
+
+```jsx
+return (
+ <App>
+  <Navbar />
+  <Dashboard />
+  <Footer />
+ </App>
+)
+```
+
+عندما يقرا React علامة HTML مخصصة تشير إلى مكون آخر (اسم مكون مغلف في `< />` مثل المثال)، فهو يجعل تكوين ذلك المكون في موقع العلامة. هذا يجب أن يوضح العِلاقة بين الوالد والابن بين عنصر `App` و `Navbar`, و`Dashboard`, و `Footer`.
+
+# --instructions--
+
+في محرر التعليمات البرمجية، هناك مكون وظيفي بسيط يسمى `ChildComponent` ومكون فئة يسمى `ParentComponent`. تكوين الاثنين معاً بواسطة تقديم `ChildComponent` ضمن `ParentComponent`. تيقن من إغلاق علامة `ChildComponent` مع خط المائل إلى الأمام.
+
+**ملاحظة:** إن `ChildComponent` يعرف مع وظيفة سهم ES6 لأن هذه ممارسة شائعة جدا عند استخدام React. ومع ذلك، أعرف أن هذا مجرد وظيفة. إذا لم تكن على دراية بصيغة وظيفة السهم، يرجى الرجوع إلى قسم JavaScript.
+
+# --hints--
+
+يجب أن يعيد مكون React عنصر `div` واحد.
+
+```js
+assert(
+  (function () {
+    var shallowRender = Enzyme.shallow(React.createElement(ParentComponent));
+    return shallowRender.type() === 'div';
+  })()
+);
+```
+
+وينبغي للمكون أن ينتج عنصرين متداخلين (two nested elements).
+
+```js
+assert(
+  (function () {
+    var shallowRender = Enzyme.shallow(React.createElement(ParentComponent));
+    return shallowRender.children().length === 2;
+  })()
+);
+```
+
+يجب أن ينتج المكون `ChildComponent` يكون أبن الثاني.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ParentComponent));
+    return (
+      mockedComponent.find('ParentComponent').find('ChildComponent').length ===
+      1
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<ParentComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const ChildComponent = () => {
+  return (
+    <div>
+      <p>I am the child</p>
+    </div>
+  );
+};
+
+class ParentComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>I am the parent</h1>
+        { /* Change code below this line */ }
+
+
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+const ChildComponent = () => {
+  return (
+    <div>
+      <p>I am the child</p>
+    </div>
+  );
+};
+
+class ParentComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>I am the parent</h1>
+        { /* Change code below this line */ }
+        <ChildComponent />
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-controlled-form.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-controlled-form.md
new file mode 100644
index 00000000000..7dd042d038e
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-controlled-form.md
@@ -0,0 +1,220 @@
+---
+id: 5a24c314108439a4d4036179
+title: إنشاء نموذج المتحكم بيه (Controlled Form)
+challengeType: 6
+forumTopicId: 301384
+dashedName: create-a-controlled-form
+---
+
+# --description--
+
+وأظهر التحدي الأخير أن React يمكنها التحكم في الحالة الداخلية لعناصر معينة مثل `input` و `textarea`, الذي يجعلها مكونات خاضعة للتحكم. ينطبق هذا على عناصر النموذج (form) الأخرى أيضا، بما في ذلك عنصر `form` الذي يكون HTML العادي.
+
+# --instructions--
+
+تم إعداد مكون `MyForm` مع `form` فارغ مع معالج الإرسال. وسيتم استدعاء المعالج الإرسال (submit handler) عند تقديم النموذج.
+
+لقد أضفت الزر الذي يرسل النموذج. يمكنك أن ترى أنه يحتوي على `type` إلى `submit` مما يشير إلى أنه الزر الذي يتحكم في النموذج. أضف عنصر `input` في `form` وقم بتعيين سمات `value` و `onChange()` مثل التحدي الأخير. يجب عليك بعد ذلك إكمال طريقة `handleSubmit` بحيث يتعين ممتلكات الحالة المكونة `submit` إلى قيمة الإدخال الحالية في `state` المحلية.
+
+**ملاحظة:** يجب عليك أيضًا الاتصال بوظيفة `event.preventDefault()` في المعالج الإرسال، لمنع إرسال النموذج الافتراضي للسلوك الذي يحديث صفحة الويب. لتسهله استخداما، تم تعطيل السلوك الافتراضي هنا لمنع التحديثات من إعادة تعيين رمز التحدي (resetting challenge code).
+
+أخيرا إنشاء علامة `h1` بعد `form` الذي يجعل `submit` قيمة من `state` المكون. يمكنك كتابة النموذج ثم انقر فوق الزر (أو اضغط على الإدخال)، ويجب أن ترى ما أدخلت ينتج على الصفحة.
+
+# --hints--
+
+`MyForm` يجب أن يعيد عنصر `div` الذي يحتوي على علامة `form` و `h1`. يجب أن يحتوي النموذج على `input` و `button`.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(MyForm));
+    return (
+      mockedComponent.find('div').children().find('form').length === 1 &&
+      mockedComponent.find('div').children().find('h1').length === 1 &&
+      mockedComponent.find('form').children().find('input').length === 1 &&
+      mockedComponent.find('form').children().find('button').length === 1
+    );
+  })()
+);
+```
+
+حالة `MyForm` يجب أن تهيئتها باستخدام خواص `input` و `submit`، وكلاهما يحمل strings فارغة.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MyForm)).state('input') === '' &&
+    Enzyme.mount(React.createElement(MyForm)).state('submit') === ''
+);
+```
+
+الكتابة في عنصر `input` يجب أن تحديث خاصية `input` في حالة المكون.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(MyForm));
+  const _1 = () => {
+    mockedComponent.setState({ input: '' });
+    return mockedComponent.state('input');
+  };
+  const _2 = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: 'TestInput' } });
+    return {
+      state: mockedComponent.state('input'),
+      inputVal: mockedComponent.find('input').props().value
+    };
+  };
+  const before = _1();
+  const after = _2();
+  assert(
+    before === '' &&
+      after.state === 'TestInput' &&
+      after.inputVal === 'TestInput'
+  );
+})();
+```
+
+يجب أن يقوم إرسال النموذج بتشغيل `handleSubmit` الذي يجب أن يحدد خاصية `submit` أذي تساوي الحالة في مدخلات الحالية.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(MyForm));
+  const _1 = () => {
+    mockedComponent.setState({ input: '' });
+    mockedComponent.setState({ submit: '' });
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: 'SubmitInput' } });
+    return mockedComponent.state('submit');
+  };
+  const _2 = () => {
+    mockedComponent.find('form').simulate('submit');
+    return mockedComponent.state('submit');
+  };
+  const before = _1();
+  const after = _2();
+  assert(before === '' && after === 'SubmitInput');
+})();
+```
+
+`handleSubmit` يجب أن يصل `event.preventDefault`
+
+```js
+assert(
+  __helpers.isCalledWithNoArgs(
+    'event.preventDefault',
+    MyForm.prototype.handleSubmit.toString()
+  )
+);
+```
+
+عنصر العنوان `h1` يجب أن يأثر على قيمة الخانة `submit` من حالة المكون.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(MyForm));
+  const _1 = () => {
+    mockedComponent.setState({ input: '' });
+    mockedComponent.setState({ submit: '' });
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: 'TestInput' } });
+    return mockedComponent.find('h1').text();
+  };
+  const _2 = () => {
+    mockedComponent.find('form').simulate('submit');
+    return mockedComponent.find('h1').text();
+  };
+  const before = _1();
+  const after = _2();
+  assert(before === '' && after === 'TestInput');
+})();
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyForm />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+class MyForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: '',
+      submit: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      input: event.target.value
+    });
+  }
+  handleSubmit(event) {
+    // Change code below this line
+
+    // Change code above this line
+  }
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.handleSubmit}>
+          {/* Change code below this line */}
+
+          {/* Change code above this line */}
+          <button type='submit'>Submit!</button>
+        </form>
+        {/* Change code below this line */}
+
+        {/* Change code above this line */}
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+class MyForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: '',
+      submit: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      input: event.target.value
+    });
+  }
+  handleSubmit(event) {
+    event.preventDefault();
+    this.setState(state => ({
+      submit: state.input
+    }));
+  }
+  render() {
+    return (
+      <div>
+        <form onSubmit={this.handleSubmit}>
+          <input value={this.state.input} onChange={this.handleChange} />
+          <button type='submit'>Submit!</button>
+        </form>
+        <h1>{this.state.submit}</h1>
+      </div>
+    );
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-controlled-input.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-controlled-input.md
new file mode 100644
index 00000000000..e1bc86e3c74
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-controlled-input.md
@@ -0,0 +1,150 @@
+---
+id: 5a24c314108439a4d4036178
+title: إنشاء أدخال المتحكم فيه (Controlled Form)
+challengeType: 6
+forumTopicId: 301385
+dashedName: create-a-controlled-input
+---
+
+# --description--
+
+قد يحتوي تطبيقك على تعامُلات أكثر تعقيدا بين `state` وواجهة المستخدم المقدمة (UI). على سبيل المثال، عناصر التحكم في النموذج للمدخلات النصية، مثل `input` و `textarea`، الحفاظ على حالتها الخاصة في DOM كنوع من المستخدم. مع React، يمكنك نقل هذه الحالة القابلة للتغيير إلى `state` للمكون React. يصبح إدخال المستخدم جزءا من التطبيق `state`، لذا يتحكم React في قيمة حقل الإدخال هذا. في الأغلب، إذا كان لديك مكونات React مع حقول الإدخال الذي يمكن للمستخدم أن يكتبها، فسيكون نموذج الإدخال المتحكم فيه.
+
+# --instructions--
+
+يحتوي محرر التعليمات البرمجية على الهيكل العظمي لمكون يسمى `ControlledInput` لإنشاء عنصر `input` المتحكم بيه. تم فعلًا تهيئة `state` المكون مع خاصية `input` التي تحتوي على سلسلة فارغة. هذه القيمة تمثل نوع النص المستخدم في حقل `input`.
+
+أولا، إنشاء طريقة تسمى `handleChange()` تحتوي على الوسيطة تسمى `event`. عندما يتم تسمية الطريقة، فإنها تتلقى كائن `event` يحتوي على سلسلة من النص من عنصر `input`. يمكنك الوصول إلى هذه السلسلة باستخدام `event.target.value` داخل الطريقة. حديث خاصية `input` في المكون `state` مع هذه السلسلة الجديدة.
+
+في طريقة `render`، أنشئ عنصر `input` فوق علامة `h4`. أضف خاصية `value` تساوي خاصية `input` في المكون `state`. ثم أضف معالج الحدث `onChange()` إلى طريقة `handleChange()`.
+
+عندما تكتب في صندوق الإدخال، يتم معالجة هذا النص بواسطة طريقة `handleChange()`، تُعيين كخاصية `input` في `state` المحلية، وتم أنتاجها كقيمة في صندوق `input` على الصفحة. المكون `state` هو المصدر الوحيد للحقيقة (single source of truth) فيما يتعلق ببيانات الإدخال.
+
+أخيرا وليس آخرا، لا تنس أن تضيف الارتباطات اللازمة في البناء (constructor).
+
+# --hints--
+
+`ControlledInput` يجب أن يعيد عنصر `div` الذي يحتوي على علامات `input` و `p`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(ControlledInput))
+    .find('div')
+    .children()
+    .find('input').length === 1 &&
+    Enzyme.mount(React.createElement(ControlledInput))
+      .find('div')
+      .children()
+      .find('p').length === 1
+);
+```
+
+حالة `ControlledInput` يجب أن تهيئ خاصية `input` محددة إلى سلسلة فارغة.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(ControlledInput)).state('input'),
+  ''
+);
+```
+
+الكتابة في عنصر الإدخال يجب أن تحديث الحالة (state) وقيمة الإدخال (input)، و عنصر `p` يجب أن يجعل هذه الحالة (state) كما تكتب.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(ControlledInput));
+  const _1 = () => {
+    mockedComponent.setState({ input: '' });
+    return waitForIt(() => mockedComponent.state('input'));
+  };
+  const _2 = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: 'TestInput' } });
+    return waitForIt(() => ({
+      state: mockedComponent.state('input'),
+      text: mockedComponent.find('p').text(),
+      inputVal: mockedComponent.find('input').props().value
+    }));
+  };
+  const before = await _1();
+  const after = await _2();
+  assert(
+    before === '' &&
+      after.state === 'TestInput' &&
+      after.text === 'TestInput' &&
+      after.inputVal === 'TestInput'
+  );
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<ControlledInput />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class ControlledInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: ''
+    };
+    // Change code below this line
+
+    // Change code above this line
+  }
+  // Change code below this line
+
+  // Change code above this line
+  render() {
+    return (
+      <div>
+        { /* Change code below this line */}
+
+        { /* Change code above this line */}
+        <h4>Controlled Input:</h4>
+        <p>{this.state.input}</p>
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class ControlledInput extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      input: ''
+    };
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      input: event.target.value
+    });
+  }
+  render() {
+    return (
+      <div>
+        <input
+          value={this.state.input}
+          onChange={this.handleChange} />
+        <h4>Controlled Input:</h4>
+
+        <p>{this.state.input}</p>
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-react-component.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-react-component.md
new file mode 100644
index 00000000000..a514fedb7d1
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-react-component.md
@@ -0,0 +1,102 @@
+---
+id: 5a24c314108439a4d4036163
+title: إنشاء مكون React
+challengeType: 6
+forumTopicId: 301386
+dashedName: create-a-react-component
+---
+
+# --description--
+
+الطريقة الأخرى لتعريف مكون React هي مع بناء `class` الجملة في ES6. في المثال التالي، `Kitten` يمد `React.Component`:
+
+```jsx
+class Kitten extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <h1>Hi</h1>
+    );
+  }
+}
+```
+
+هذا ينشئ ES6 فئة `Kitten` التي توسع فئة `React.Component`. إذاً فئة `Kitten` لديها الآن إمكانية الوصول إلى العديد من ميزات React المفيدة، مثل حالة المحالية (local state) ودورة الحياة (lifecycle hooks). لا تقلق إذا لم تكن على دراية بهذه المصطلحات حتى الآن، فسيتم تغطيتها بمزيد من التفصيل في تحديات لاحقة. لاحظ أيضا أن فئة `Kitten` تحتوي على `constructor` معرف داخلها ويتصل بطريقة `super()`. إنها تستخدم `super()` للاتصال بمنشئ الفئة الأصلي، في هذه الحالة `React.Component`. الإنشاء هو طريقة خاصة تستخدم خلال تهيئة الكائنات التي يتم إنشاؤها باستخدام الكلمة الرئيسة `class`. من الأفضل استدعاء مكون `constructor` مع `super` ونقل `props` لكليهما. هذا يضمن أن يتم تهيئة المكون بشكل صحيح. في الوقت الحالي، أغرف أنه من المعيار أن يتم إدراج هذا التعليمات البرمجية (code). قريباً سترى استخدامات أخرى للبناء (constructor) وكذلك `props`.
+
+# --instructions--
+
+يعرف `MyComponent` في محرر التعليمات البرمجية (code editor) باستخدام بناء الفئة (class syntax). إنهاء كتابة طريقة `render` حتى ترجع عنصر `div` الذي يحتوي على `h1` بالنص `Hello React!`.
+
+# --hints--
+
+يجب أن ينتج مكون React عنصر `div`.
+
+```js
+assert(Enzyme.shallow(React.createElement(MyComponent)).type() === 'div');
+```
+
+يجب أن يوفر `div` عنصر `h1` العنوان داخله.
+
+```js
+assert(
+  /<div><h1>.*<\/h1><\/div>/.test(
+    Enzyme.shallow(React.createElement(MyComponent)).html()
+  )
+);
+```
+
+عنصر العنوان `h1` يجب أن يحتوي على المقطع `Hello React!`.
+
+```js
+assert(
+  Enzyme.shallow(React.createElement(MyComponent)).html() ===
+    '<div><h1>Hello React!</h1></div>'
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    // Change code below this line
+
+
+
+    // Change code above this line
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    // Change code below this line
+    return (
+      <div>
+        <h1>Hello React!</h1>
+      </div>
+    );
+    // Change code above this line
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-simple-jsx-element.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-simple-jsx-element.md
new file mode 100644
index 00000000000..79a0923c208
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-simple-jsx-element.md
@@ -0,0 +1,57 @@
+---
+id: 587d7dbc367417b2b2512bb1
+title: إنشاء عنصر JSX بسيط
+challengeType: 6
+forumTopicId: 301390
+dashedName: create-a-simple-jsx-element
+---
+
+# --description--
+
+React هي مكتبة عرض مفتوح المصدر (Open Source) تم إنشاؤها وصيانتها بواسطة Facebook. إنها أداة رائعة لإنشاء واجهة المستخدم (UI) لتطبيقات الويب الحديثة.
+
+يستخدم React امتداد بناء الجملة JavaScript يسمى JSX الذي يسمح لك بكتابة HTML قاصدًا داخل JavaScript. وهذا يحتوي عدة فوائد. يتيح لك استخدام القوة البرنامجية JavaScript الكاملة داخل HTML، ويساعد على إبقاء التعليمات البرمجية (code) الخاصة بك مقروءة. في الغالب، JSX شبيه HTML الذي تعلمته من قبل، غير أن هناك بعض الاختلافات الرئيسية التي سيتم تغطيتها في جميع مراحل هذه التحديات.
+
+على سبيل المثال، لأن JSX هو امتداد تكتيكي JavaScript، يمكنك في الواقع كتابة JavaScript قاصدًا داخل JSX. للقيام بذلك، قم ببساطة بإدراج الرمز الذي تريد معاملته مثل JavaScript ضمن أقواس منحنية: `{ 'this is treated as JavaScript code' }`. ضع هذا في اعتبارنا، لأنه يستخدم في العديد من التحديات المستقبلية.
+
+لكن، لأن JSX غير صالح مثل JavaScript، يجب تحويل رموز JSX إلى JavaScript. والناقل Babel هو أداة شعبية لهذه العملية. من أجل راحتك، تمت إضافتها فعلًا خلف الكواليس لهذه التحديات. إذا حدث لك أن تكتب JSX غير صالح، فسترى الاختبار الأول في هذه التحديات يفشل.
+
+وتجدر الإشارة إلى أن التحديات في ظل هذه البيئة تستخدم `ReactDOM.render(JSX, document.getElementById('root'))`. مكالمة الوظيفة هذه هي ما يضع JSX الخاص بك في تمثيل React الخفيف الوزن يخص DOM. ثم يستخدم لقطات React في DOM الخاصة به لتحسين التحديث فقط أجزاء محددة من DOM الفعلية.
+
+# --instructions--
+
+الكود الحالي يستخدم JSX لتعيين عنصر `div` إلى الثابت `JSX`. استبدال عنصر `div` بعنصر `h1` وإضافة النص `Hello JSX!` داخله.
+
+# --hints--
+
+يجب أن ينتج الثابت `JSX` عنصر `h1`.
+
+```js
+assert(JSX.type === 'h1');
+```
+
+يجب أن تتضمن علامة `h1` النص `Hello JSX!`
+
+```js
+assert(Enzyme.shallow(JSX).contains('Hello JSX!'));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(JSX, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const JSX = <div></div>;
+```
+
+# --solutions--
+
+```jsx
+const JSX = <h1>Hello JSX!</h1>;
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-stateful-component.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-stateful-component.md
new file mode 100644
index 00000000000..a6b755c510c
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-stateful-component.md
@@ -0,0 +1,134 @@
+---
+id: 5a24c314108439a4d4036170
+title: إنشاء مكون Stateful
+challengeType: 6
+forumTopicId: 301391
+dashedName: create-a-stateful-component
+---
+
+# --description--
+
+واحد من أهم المواضيع في React هو `state`. الحالة (State) تتكون من أي بيانات يحتاج التطبيق الخاص بك إلى معرفتها، التي يمكن أن تتغير بمرور الوقت. تريد من تطبيقاتك أن تستجيب لتغييرات الحالة وأن تقدم واجهة المستخدم (UI) المحدثة عند الضرورة. يوفر React حلاً جيداً لإدارة الدولة لتطبيقات الويب الحديثة.
+
+يمكنك إنشاء الحالة (state) في مكون React عن طريق الإعلان عن `state` خاصية في فئة المكون في `constructor` الخاص به. هذا يهيئ المكون `state` عند إنشائه. يجب تعيين خاصية `state` إلى `object` من JavaScript. تكونها يبدو كهذا:
+
+```jsx
+this.state = {
+
+}
+```
+
+لديك حق الوصول إلى كائن `state` طوال عمر المكون الخاص بك. يمكنك تحديثه، توفيره في واجهة المستخدم الخاصة بك، وتمريره مثل props لمكونات ألابن. يمكن أن يكون الكائن `state` معقداً أو بسيطاً بقدر ما تحتاج. لاحظ أنه يجب عليك إنشاء عنصر فئة بواسطة تمديد `React.Component` لإنشاء `state` مثلما ذكر.
+
+# --instructions--
+
+هناك مكون في محرر التعليمات البرمجية يحاول تقديم خاصية `firstName` من `state`. ومع ذلك، لا يوجد `state` معرفة. قم بتهيئة المكون يحتوي `state` في `constructor` وقم بتعيين اسمك إلى خاصية `firstName`.
+
+# --hints--
+
+`StatefulComponent` يجب أن يكون موجودا ويقدم.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(
+      React.createElement(StatefulComponent)
+    );
+    return mockedComponent.find('StatefulComponent').length === 1;
+  })()
+);
+```
+
+`StatefulComponent` يجب أن يقدم عناصر `div` و `h1`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(
+      React.createElement(StatefulComponent)
+    );
+    return (
+      mockedComponent.find('div').length === 1 &&
+      mockedComponent.find('h1').length === 1
+    );
+  })()
+);
+```
+
+يجب تهيئة حالة (state) بقيمة `StatefulComponent` باستخدام خاصية `firstName` إلى string.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(
+      React.createElement(StatefulComponent)
+    );
+    const initialState = mockedComponent.state();
+    return (
+      typeof initialState === 'object' && typeof initialState.firstName === 'string'
+    );
+  })()
+);
+```
+
+الخاصية `firstName` في حالة `StatefulComponent` يجب أن تكون في عنصر `h1`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(
+      React.createElement(StatefulComponent)
+    );
+    const initialState = mockedComponent.state();
+    return mockedComponent.find('h1').text() === initialState.firstName;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<StatefulComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class StatefulComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    // Only change code below this line
+
+    // Only change code above this line
+  }
+  render() {
+    return (
+      <div>
+        <h1>{this.state.firstName}</h1>
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class StatefulComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      firstName: 'freeCodeCamp!'
+    }
+  }
+  render() {
+    return (
+      <div>
+        <h1>{this.state.firstName}</h1>
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-stateless-functional-component.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-stateless-functional-component.md
new file mode 100644
index 00000000000..fcf382b17a5
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/create-a-stateless-functional-component.md
@@ -0,0 +1,102 @@
+---
+id: 5a24c314108439a4d4036162
+title: إنشاء مكون وظيفي عديم الحالة (Stateless Functional Component)
+challengeType: 6
+forumTopicId: 301392
+dashedName: create-a-stateless-functional-component
+---
+
+# --description--
+
+المكونات هي مركز React. كل شيء في React هو مكون وسوف تتعلم كيفية إنشاء مكون.
+
+هناك طريقتان لإنشاء مكون React. الطريقة الأولى هي استخدام وظيفية JavaScript. تعريف المكون بهذه الطريقة يخلق مكون *وظيفي عديم الحالة*. وسيتم تناول مفهوم الحالة (state) في التطبيق في تحديات لاحقة. في الوقت الحاضر، فكر في المكون عديم الحالة كمكون يمكن أن يتلقى البيانات ويقدمها، ولكنه لا يدير أو يتتبع التغييرات في تلك البيانات. (سنقوم بتغطية الطريقة الثانية لإنشاء عنصر React في التحدي التالي.)
+
+لإنشاء مكون مع وظيفة، يمكنك ببساطة كتابة دالة JavaScript التي تنتج إما JSX أو `null`. من الأمور المهمة التي نلاحظها أن React يتطلب اسم الوظيفية الخاص بك أن يبدأ بحرف كبير. إليك مثال لمكون وظيفي عديم الحالة يعيين فئة HTML في JSX:
+
+```jsx
+const DemoComponent = function() {
+  return (
+    <div className='customClass' />
+  );
+};
+```
+
+بعد أن يتم نقلها، سيحمل `<div>` فئة CSS من `customClass`.
+
+لأن مكون JSX يمثل HTML، يمكنك وضع عدة مكونات معا لإنشاء صفحة HTML أكثر تعقيدا. وهذه واحدة من المزايا الرئيسية للهيكل المعماري للمكوّن (component architecture) الذي يوفره React. يسمح لك بتكوين واجهة المستخدم (UI) الخاصة بك من العديد من المكونات المنفصلة والمعزولة. وهذا يجعل من الأسهل بناء وصيانة واجهات المستخدم المعقدة (UI).
+
+# --instructions--
+
+يحتوي محرر التعليمات البرمجية على وظيفية تسمى `MyComponent`. أكمل هذه الوظيفة بحيث تنتج عنصر `div` واحد يحتوي على string من النص.
+
+**ملاحظة:** يعدّ النص فرداً من عناصر `div`، لذلك لن تتمكن من استخدام علامة إغلاق ذاتي.
+
+# --hints--
+
+`MyComponent` يجب أن ينتج JSX.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.length === 1;
+  })()
+);
+```
+
+`MyComponent` يجب أن ينتج عنصر `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.children().type() === 'div';
+  })()
+);
+```
+
+يجب أن يحتوي عنصر `div` على string من النص.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.find('div').text() !== '';
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const MyComponent = function() {
+  // Change code below this line
+
+
+
+  // Change code above this line
+}
+```
+
+# --solutions--
+
+```jsx
+const MyComponent = function() {
+  // Change code below this line
+  return (
+    <div>
+      Demo Solution
+    </div>
+  );
+  // Change code above this line
+}
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/define-an-html-class-in-jsx.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/define-an-html-class-in-jsx.md
new file mode 100644
index 00000000000..9d305a6bac5
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/define-an-html-class-in-jsx.md
@@ -0,0 +1,62 @@
+---
+id: 5a24c314108439a4d4036160
+title: تحديد فئة HTML في JSX
+challengeType: 6
+forumTopicId: 301393
+dashedName: define-an-html-class-in-jsx
+---
+
+# --description--
+
+الآن بعد أن أصبحت كتابة JSX مريحاً، قد تتساءل كيف تختلف عن HTML.
+
+حتى الآن، قد يبدو أن HTML و JSX متماثلان تماما.
+
+أحد الاختلافات الرئيسية في JSX هو أنه لم يعد بإمكانك استخدام كلمة `class` لتعريف فئات HTML. هذا لأن `class` هي كلمة محجوزة في JavaScript. بدلاً من ذلك، يستخدم JSX خاصية `className`.
+
+في الواقع، اتفاقية تسمية جميع سمات HTML ومراجع الأحداث في JSX تصبح حالة جمال (camelCase). على سبيل المثال، حدث النقر في JSX هو `onClick` بدلاً من `onclick`. بالمثل، `onchange` يصبح `onChange`. وفي حين أن هذا فرق دقيق، فإن من المهم ألا يغيب عن بالك في المستقبل.
+
+# --instructions--
+
+أضف فئة `myDiv` ألى عنصر `div` المقدمة في كود JSX.
+
+# --hints--
+
+يجب أن يُنتج عنصر `div` من الثابت `JSX`.
+
+```js
+assert.strictEqual(JSX.type, 'div');
+```
+
+يجب أن يحتوي `div` على فئة من `myDiv`.
+
+```js
+assert.strictEqual(JSX.props.className, 'myDiv');
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(JSX, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const JSX = (
+  <div>
+    <h1>Add a class to this div</h1>
+  </div>
+);
+```
+
+# --solutions--
+
+```jsx
+const JSX = (
+<div className = 'myDiv'>
+  <h1>Add a class to this div</h1>
+</div>);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/give-sibling-elements-a-unique-key-attribute.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/give-sibling-elements-a-unique-key-attribute.md
new file mode 100644
index 00000000000..8aeff307bed
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/give-sibling-elements-a-unique-key-attribute.md
@@ -0,0 +1,147 @@
+---
+id: 5a24c314108439a4d403618b
+title: إعطاء عناصر الأخوة (Sibling Elements) خاصية هُوِيَّة فريدة (Unique Key Attribute)
+challengeType: 6
+forumTopicId: 301394
+dashedName: give-sibling-elements-a-unique-key-attribute
+---
+
+# --description--
+
+وأظهر التحدي السابق كيفية استخدام طريقة `map` لتقديم عدد من العناصر بشكل ديناميكي بناء على مدخلات المستخدم. غير أن هناك قطعة هامة مفقودة من ذلك المثال. عند إنشاء مجموعة من العناصر، يحتاج كل واحد إلى خاصية `key` مجموعة إلى قيمة فريدة. يستخدم React هذه المفاتيح لتتبع العناصر التي يتم إضافتها أو تغييرها أو إزالتها. وهذا يساعد على جعل عملية إعادة جعلها أكثر كفائه عندما يتم تعديل القائمة بأي من الأشكال.
+
+**ملاحظة:** هُوِيَّات تحتاج فقط إلى أن تكون فريدة من نوعها بين العناصر الشقيقة، فهي لا تحتج إلى أن تكون فريدة عالميا في تطبيقاتك.
+
+# --instructions--
+
+يحتوي محرر التعليمات البرمجية على مصفوفة مع بعض front end frameworks وعنصر عديم الحالة (stateless functional component) يطلق عليه `Frameworks()`. `Frameworks()` تحتاج إلى رسم خريطة (map) للتكوين قائمة غير منظمة (unordered list)، مثل التحدي السابق. إنهاء كتابة `map` رد الاتصال لإرجاع عنصر `li` لكل إطار (framework) في مصفوفة `frontEndFrameworks`. هذه المرة، تيقن من إعطاء كل `li` سمة `key`، بقيمة فريدة. يجب أن تحتوي عناصر `li` أيضًا على نص من `frontEndFrameworks`.
+
+عادة، تريد أن تصنع هُوِيَّة (key) الذي يحدد الشكل فريد للعنصر الذي يتم تقديمه. كملاذ أخير، يمكن استخدام index المصفوف (array)، ولكن يجب عليك عادة أن تحاول استخدام بطاقة هُوِيَّة فريدة.
+
+# --hints--
+
+يجب أن يكون مكون `Frameworks` موجوداً وأن يُنتج في الصفحة.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(Frameworks)).find('Frameworks').length === 1
+);
+```
+
+`Frameworks` يجب أن ينتج عنصر `h1`.
+
+```js
+assert(Enzyme.mount(React.createElement(Frameworks)).find('h1').length === 1);
+```
+
+`Frameworks` يجب أن ينتج عنصر `ul`.
+
+```js
+assert(Enzyme.mount(React.createElement(Frameworks)).find('ul').length === 1);
+```
+
+يجب أن ينتج `ul` ست عناصر `li`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(Frameworks)).find('ul').children().length ===
+    6 &&
+    Enzyme.mount(React.createElement(Frameworks))
+      .find('ul')
+      .childAt(0)
+      .name() === 'li' &&
+    Enzyme.mount(React.createElement(Frameworks)).find('li').length === 6
+);
+```
+
+يجب أن يكون لكل عنصر من عناصر القائمة خاصية `key` فريدة.
+
+```js
+assert(
+  (() => {
+    const ul = Enzyme.mount(React.createElement(Frameworks)).find('ul');
+    const keys = new Set([
+      ul.childAt(0).key(),
+      ul.childAt(1).key(),
+      ul.childAt(2).key(),
+      ul.childAt(3).key(),
+      ul.childAt(4).key(),
+      ul.childAt(5).key()
+    ]);
+    return keys.size === 6;
+  })()
+);
+```
+
+كل عنصر من عناصر القائمة يجب أن يحتوي على نص من `frontEndFrameworks`.
+
+```js
+assert(
+  (() => {
+    const li = Enzyme.mount(React.createElement(Frameworks))
+      .find('ul')
+      .children();
+    return [...Array(5)].every((_, i) =>
+      frontEndFrameworks.includes(li.at(i).text())
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<Frameworks />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const frontEndFrameworks = [
+  'React',
+  'Angular',
+  'Ember',
+  'Knockout',
+  'Backbone',
+  'Vue'
+];
+
+function Frameworks() {
+  const renderFrameworks = null; // Change this line
+  return (
+    <div>
+      <h1>Popular Front End JavaScript Frameworks</h1>
+      <ul>
+        {renderFrameworks}
+      </ul>
+    </div>
+  );
+};
+```
+
+# --solutions--
+
+```jsx
+const frontEndFrameworks = [
+  'React',
+  'Angular',
+  'Ember',
+  'Knockout',
+  'Backbone',
+  'Vue'
+];
+
+function Frameworks() {
+  const renderFrameworks = frontEndFrameworks.map((fw, i) => <li key={i}>{fw}</li>);
+  return (
+    <div>
+      <h1>Popular Front End JavaScript Frameworks</h1>
+      <ul>
+        {renderFrameworks}
+      </ul>
+    </div>
+  );
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/introducing-inline-styles.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/introducing-inline-styles.md
new file mode 100644
index 00000000000..853e1d4ea61
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/introducing-inline-styles.md
@@ -0,0 +1,103 @@
+---
+id: 5a24c314108439a4d4036181
+title: تقديم التصميمات الداخلي (Inline Styles)
+challengeType: 6
+forumTopicId: 301395
+dashedName: introducing-inline-styles
+---
+
+# --description--
+
+هناك مفاهيم معقدة أخرى تضيف قدرات قوية إلى رمز React الخاص بك. لكنك قد تتساءل عن المشكلة البسيطة لكيفية تصميم عناصر JSX التي تنشئها في React. على الأرجح أنت تعلم أنه لن يكون نفس الطريقة مع HTML بالضبط بسبب أختلاف <a href="/learn/front-end-development-libraries/react/define-an-html-class-in-jsx" target="_blank" rel="noopener noreferrer nofollow">الطريقة التي تطبق بها الفئات على عناصر JSX</a>.
+
+إذا استرد التصميمات من ورقة التصميم، فإنها ليست مختلفة على الإطلاق. يمكنك تطبيق فئة على عنصر JSX الخاص بك باستخدام السمة `className`، وتطبيق التصميمات على الفئات في ورقة التصميمات الخاصة بك. وثمة خِيار آخر يتمثل في تطبيق تصميمات داخلية (inline styles) شائعة جدا في تطوير ReactJS.
+
+يمكنك تطبيق التصميمات الداخلية (inline styles) على عناصر JSX مشابهة في كيفية تطبيق HTML، ولكن مع بعض الاختلافات JSX. إليك مثال لتصميم داخلي (inline styles) في HTML:
+
+```jsx
+<div style="color: yellow; font-size: 16px">Mellow Yellow</div>
+```
+
+تستخدم عناصر JSX سمة `style` ولكن بسبب طريقة نقل JSX، لا يمكنك تعيين قيمة إلى `string`. بدلاً من ذلك، عيّنه مساوياً `object` من JavaScript. على سبيل المثال:
+
+```jsx
+<div style={{color: "yellow", fontSize: 16}}>Mellow Yellow</div>
+```
+
+لاحظ كيف تجمِل (camelCase) خاصية `fontSize`؟ هذا لأن React لن تقبل الهُوِيَّات بشكل kebab-case في كائن التصميم. سيقوم React بتطبيق اسم الخاصية الصحيح لنا في HTML.
+
+# --instructions--
+
+أضف خاصية `style` إلى `div` في محرر التعليمات البرمجية لإعطاء النص لون أحمر (red) وحجم خط يبلغ `72px`.
+
+لاحظ أنه يمكنك اختياريا تعيين حجم الخط ليكون رقما، حذف وحدات `px`، أو كتابتها مثل `72px`.
+# --hints--
+
+يجب أن يكون المكون عنصر `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(Colorful));
+    return mockedComponent.children().type() === 'div';
+  })()
+);
+```
+
+يجب أن يكون نص عنصر `div` بلون `red`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(Colorful));
+    return mockedComponent.children().props().style.color === 'red';
+  })()
+);
+```
+
+يجب أن يكون حجم الخط عنصر `div` بقيمة `72px`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(Colorful));
+    return (
+      mockedComponent.children().props().style.fontSize === 72 ||
+      mockedComponent.children().props().style.fontSize === '72' ||
+      mockedComponent.children().props().style.fontSize === '72px'
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<Colorful />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class Colorful extends React.Component {
+  render() {
+    return (
+      <div>Big Red</div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class Colorful extends React.Component {
+  render() {
+    return (
+      <div style={{color: "red", fontSize: 72}}>Big Red</div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/learn-about-self-closing-jsx-tags.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/learn-about-self-closing-jsx-tags.md
new file mode 100644
index 00000000000..3da2ebee1bc
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/learn-about-self-closing-jsx-tags.md
@@ -0,0 +1,75 @@
+---
+id: 5a24c314108439a4d4036161
+title: تعلم حول إغلاق علامات JSX الذاتي (Self-Closing JSX Tags)
+challengeType: 6
+forumTopicId: 301396
+dashedName: learn-about-self-closing-jsx-tags
+---
+
+# --description--
+
+حتى الآن، رأيت كيف يختلف JSX عن HTML بطريقة رئيسة باستخدام `className` ضد `class` لتحديد فئات HTML.
+
+وهناك طريقة هامة أخرى تختلف فيها JSX عن HTML وهي ظريقة علامة الإغلاق الذاتي (self-closing tag).
+
+في HTML، جميع العلامات تقريبا لديها علامات فتح وإغلاق على حد سواء: `<div></div>`؛ علامة الإغلاق تحتوي دائما على قطع أمامي قبل اسم العلامة التي تغلقاها. غير أن هناك حالات خاصة في HTML تسمى "علامات الإغلاق الذاتي". أو العلامات التي لا تتطلب علامة فتح أو إغلاق قبل أن تبدأ علامة أخرى.
+
+على سبيل المثال، يمكن كتابة علامة مثل `<br>` أو `<br />`، ولكن لا ينبغي أن يكتب على أنه `<br></br>` لأنه لا يحتوي على أي محتوى.
+
+في JSX، القواعد مختلفة قليلاً. يمكن كتابة أي عنصر من عناصر JSX مع علامة إغلاق ذاتي، ويجب إغلاق كل عنصر. على سبيل المثال، يجب أن يكتب دائما مثل `<br />` لكي تكون JSX صالحة يمكن نقلها. يمكن كتابة `<div>`، من ناحية أخرى مثل `<div />` أو `<div></div>`. الفرق هو أنه في أول إصدار لبناء الجملة لا تجد طريقة لإدراج أي شيء في `<div />`. سوف ترى في تحديات ألاحقه أن هذا تركيب الجملة مفيدة عند تقديم مكونات React.
+
+# --instructions--
+
+إصلاح الأخطاء في محرر التعليمات البرمجية بحيث تكون JSX صالحة و عمليات النقل تنجح. تيقن من عدم تغيير أي من المحتويات - تحتاج فقط إلى إغلاق العلامات حيث هناك حاجة إليها.
+
+# --hints--
+
+يجب أن يُنتج عنصر `div` من الثابت `JSX`.
+
+```js
+assert.strictEqual(JSX.type, 'div');
+```
+
+يجب أن يحتوي `div` على علامة `br`.
+
+```js
+assert(Enzyme.shallow(JSX).find('br').length === 1);
+```
+
+يجب أن يحتوي `div` على وسم `hr`.
+
+```js
+assert(Enzyme.shallow(JSX).find('hr').length === 1);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(JSX, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const JSX = (
+  <div>
+    <h2>Welcome to React!</h2> <br >
+    <p>Be sure to close all tags!</p>
+    <hr >
+  </div>
+);
+```
+
+# --solutions--
+
+```jsx
+const JSX = (
+<div>
+  <h2>Welcome to React!</h2> <br />
+  <p>Be sure to close all tags!</p>
+  <hr />
+</div>
+);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/optimize-re-renders-with-shouldcomponentupdate.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/optimize-re-renders-with-shouldcomponentupdate.md
new file mode 100644
index 00000000000..6b2704d7079
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/optimize-re-renders-with-shouldcomponentupdate.md
@@ -0,0 +1,187 @@
+---
+id: 5a24c314108439a4d4036180
+title: تحسين جهات إعادة الإرسال (Re-Renders) مع shouldComponentUpdate
+challengeType: 6
+forumTopicId: 301398
+dashedName: optimize-re-renders-with-shouldcomponentupdate
+---
+
+# --description--
+
+حتى الآن، إذا حصل أي عنصر على `state` جديدة أو `props` جديدة فإنه ينتج نفسه وجميع أطفاله. وعادة ما يكون هذا على ما يرام. لكن React يوفر طريقة دورة الحياة (lifecycle) التي يمكنك الاتصال بها عندما تتلقى المكونات الفرعية `state` جديدة أو `props` جديدة، و أعلن على وجه التحديد إذا كان يجب تحديث المكونات أو عدم تحديثها. الطريقة هي `shouldComponentUpdate()`، و تأخذ `nextProps` و `nextState` حجّات.
+
+وهذه الطريقة وسيلة مفيدة لتحسين الأداء. على سبيل المثال، السلوك الافتراضي هو أن المكون الخاص بك ينتج من جديد عندما يتلقى `props` جديدة، حتى لو لم يتغير `props`. يمكنك استخدام `shouldComponentUpdate()` لمنع هذا عن طريق مقارنة `props`. يجب أن تعيد الطريقة قيمة `boolean` التي تخبر React ما إذا كانت تريد تحديث المكون أم لا. يمكنك مقارنة الاقتراحات الحالية (`this.props`) إلى الاقتراحات التالية (`nextProps`) لتحديد ما إذا كنت بحاجة إلى التحديث أم لا، و إرجاع `true` أو `false` وفقا لذلك.
+
+# --instructions--
+
+تمت إضافة طريقة `shouldComponentUpdate()` في مكون يسمى `OnlyEvens`. حاليا، هذه الطريقة ترجع `true` لذلك `OnlyEvens` تُنتج كل مرة تتلقى فيها `props` جديدة. عدّل الطريقة بحيث `OnlyEvens` فقط إذا كانت `value` الميزات الجديدة (new props) بقيمة even. انقر فوق زر `Add` ومشاهدة ترتيب الأحداث في وحدة تحكم المتصفح الخاص بك مع تشغيل روابط دورة الحياة.
+
+# --hints--
+
+يجب أن ينتج مكون `Controller` المكون `OnlyEvens` بهيئة أبن.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(Controller));
+    return (
+      mockedComponent.find('Controller').length === 1 &&
+      mockedComponent.find('OnlyEvens').length === 1
+    );
+  })()
+);
+```
+
+يجب تعريف طريقة `shouldComponentUpdate` على مكون `OnlyEvens`.
+
+```js
+assert(
+  (() => {
+    const child = React.createElement(OnlyEvens)
+      .type.prototype.shouldComponentUpdate.toString()
+      .replace(/s/g, '');
+    return child !== 'undefined';
+  })()
+);
+```
+
+يجب أن يعيد مكون `OnlyEvens` علامة `h1` التي تعطي قيمة `this.props.value`.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(Controller));
+  const first = () => {
+    mockedComponent.setState({ value: 1000 });
+    return mockedComponent.find('h1').html();
+  };
+  const second = () => {
+    mockedComponent.setState({ value: 10 });
+    return mockedComponent.find('h1').html();
+  };
+  const firstValue = first();
+  const secondValue = second();
+  assert(firstValue === '<h1>1000</h1>' && secondValue === '<h1>10</h1>');
+})();
+```
+
+`OnlyEvens` يجب أن يتم تقديمها فقط عندما يكون `nextProps.value` بقيمة أعداد زوجية (even).
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(Controller));
+  const first = () => {
+    mockedComponent.setState({ value: 8 });
+    return mockedComponent.find('h1').text();
+  };
+  const second = () => {
+    mockedComponent.setState({ value: 7 });
+    return mockedComponent.find('h1').text();
+  };
+  const third = () => {
+    mockedComponent.setState({ value: 42 });
+    return mockedComponent.find('h1').text();
+  };
+  const firstValue = first();
+  const secondValue = second();
+  const thirdValue = third();
+  assert(firstValue === '8' && secondValue === '8' && thirdValue === '42');
+})();
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<Controller />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+class OnlyEvens extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    console.log('Should I update?');
+    // Change code below this line
+    return true;
+    // Change code above this line
+  }
+  componentDidUpdate() {
+    console.log('Component re-rendered.');
+  }
+  render() {
+    return <h1>{this.props.value}</h1>;
+  }
+}
+
+class Controller extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 0
+    };
+    this.addValue = this.addValue.bind(this);
+  }
+  addValue() {
+    this.setState(state => ({
+      value: state.value + 1
+    }));
+  }
+  render() {
+    return (
+      <div>
+        <button onClick={this.addValue}>Add</button>
+        <OnlyEvens value={this.state.value} />
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+class OnlyEvens extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  shouldComponentUpdate(nextProps, nextState) {
+    console.log('Should I update?');
+    // Change code below this line
+    return nextProps.value % 2 === 0;
+    // Change code above this line
+  }
+  componentDidUpdate() {
+    console.log('Component re-rendered.');
+  }
+  render() {
+    return <h1>{this.props.value}</h1>;
+  }
+}
+
+class Controller extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      value: 0
+    };
+    this.addValue = this.addValue.bind(this);
+  }
+  addValue() {
+    this.setState(state => ({
+      value: state.value + 1
+    }));
+  }
+  render() {
+    return (
+      <div>
+        <button onClick={this.addValue}>Add</button>
+        <OnlyEvens value={this.state.value} />
+      </div>
+    );
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/override-default-props.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/override-default-props.md
new file mode 100644
index 00000000000..60232ae8064
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/override-default-props.md
@@ -0,0 +1,112 @@
+---
+id: 5a24c314108439a4d403616c
+title: أعد صياغة الميزات الافتراضية (Override Default Props)
+challengeType: 6
+forumTopicId: 301399
+dashedName: override-default-props
+---
+
+# --description--
+
+القدرة على تعيين الميزات الافتراضية (default props) هي خاصية مفيدة في React. طريقة تجاوز الاحتياطات الافتراضية هي تعيين قيم المِيزة صراحة لمكون ما.
+
+# --instructions--
+
+عنصر `ShoppingCart` يوفر الآن مكون فرعي `Items`. هذا المكون `Items` لديه مِيزة (prop) افتراضي `quantity` بقيمة عدد `0`. تجاوز المِيزة الافتراضية عن طريق تمرير قيمة `10` لمِيزة `quantity`.
+
+**ملاحظة:** تذكر أن بناء الجملة لإضافة عنصر المِيزة إلى المكون يبدو شبيهاً بكيفية إضافة سمات HTML. لكن، قيمة `quantity` هي عدد صحيح، فإنها لن تذهب في علامتا التنصيص (quotes) ولكن يجب تغليفها في أقواس غريبة (curly braces). على سبيل المثال، `{100}`. هذه الجملة تخبر JSX لتفسير القيمة داخل الأقواس قاصدًا مثل JavaScript.
+
+# --hints--
+
+يجب أن ينتج المكون `ShoppingCart`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
+    return mockedComponent.find('ShoppingCart').length === 1;
+  })()
+);
+```
+
+يجب أن ينتج المكون `Items`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
+    return mockedComponent.find('Items').length === 1;
+  })()
+);
+```
+
+يجب أن يحتوي المكون `Items` على المزيّة `{ quantity: 10 }` يمر من مكون `ShoppingCart`.
+
+```js
+(getUserInput) =>
+  assert(
+    (function () {
+      const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
+      return (
+        mockedComponent.find('Items').props().quantity == 10 &&
+        getUserInput('index')
+          .replace(/ /g, '')
+          .includes('<Itemsquantity={10}/>')
+      );
+    })()
+  );
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const Items = (props) => {
+  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
+}
+
+Items.defaultProps = {
+  quantity: 0
+}
+
+class ShoppingCart extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    { /* Change code below this line */ }
+    return <Items />
+    { /* Change code above this line */ }
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+const Items = (props) => {
+  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
+}
+
+Items.defaultProps = {
+  quantity: 0
+}
+
+class ShoppingCart extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    { /* Change code below this line */ }
+    return <Items quantity = {10} />
+    { /* Change code above this line */ }
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-a-callback-as-props.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-a-callback-as-props.md
new file mode 100644
index 00000000000..6aabfe057bc
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-a-callback-as-props.md
@@ -0,0 +1,217 @@
+---
+id: 5a24c314108439a4d403617b
+title: تمرير معاودة الاتصال (Callback) مثل ميزات (Props)
+challengeType: 6
+forumTopicId: 301400
+dashedName: pass-a-callback-as-props
+---
+
+# --description--
+
+يمكنك تمرير `state` مثل مِيزة للمكونات الفرعية، ولكن لا تقتصر على تمرير البيانات. يمكنك أيضا تمرير وظائف المعالجين (handler functions) أو أي طريقة يتم تعريفها على مكون React لمكون الفرعي. هذه هي الطريقة التي تسمح بها لمكونات الفرعية للتفاعل مع مكوناتهم الأسلية. تمرير طرق الفرعي مثل مِيزة عادية. تم تعيين اسم ولديك حق الوصول إلى اسم هذه الطريقة تحت `this.props` في المكون الفرعي.
+
+# --instructions--
+
+هناك ثلاث مكونات مبينة في محرر التعليمات البرمجية. مكون `MyApp` هو أساسي الذي سيوفر مكونات `GetInput` و `RenderInput` فرعية. أضف مكون `GetInput` إلى طريقة التقديم في `MyApp`، ثم اجتازه مِيزة يسمى `input` تم تعيينه إلى `inputValue` في حالة `MyApp` التي تكون `state`. قم أيضا بإنشاء مِيزة باسم `handleChange` وتمرير معالج المدخلات (input handler) باسم `handleChange` إليه.
+
+أضف مكون `RenderInput` إلى طريقة التقديم في `MyApp`، ثم أنشاء مِيزة باسم `input` تم تعيينه إلى `inputValue` في `state`. بمجرد انتهائك سوف تكون قادراً على كتابة `input` في مكون `GetInput`، التي تستخدم طريقة المعالج عن طريق الميزات في أصلها. يقوم هذا بتحديث الإدخال في `state` للأساس، الذي يتم تمريره كمستلزمات لكلا الفرعي. لاحظ كيف تتدفق البيانات بين المكونات وكيف يبقى المصدر الوحيد للحقيقة (single source of truth) يكون `state` للمكون الأساسي. ومن المسلم به أن هذا المثال مخيف بعض الشيء، ولكن ينبغي يوضح للكيفية التي يمكن بها تمرير البيانات والاستدعاءات (callbacks) بين مكونات React.
+
+# --hints--
+
+يجب أن يقدم مكون `MyApp`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+    return mockedComponent.find('MyApp').length === 1;
+  })()
+);
+```
+
+يجب أن يقدم مكون `GetInput`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+    return mockedComponent.find('GetInput').length === 1;
+  })()
+);
+```
+
+يجب أن يقدم مكون `RenderInput`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+    return mockedComponent.find('RenderInput').length === 1;
+  })()
+);
+```
+
+يجب أن يتلقى مكون `GetInput` ألى `MyApp` خاصية الحالة `inputValue` كمِيزة ويحتوي على عنصر `input` الذي يعدل حالة `MyApp`.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+  const state_1 = () => {
+    mockedComponent.setState({ inputValue: '' });
+    return waitForIt(() => mockedComponent.state());
+  };
+  const state_2 = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: 'TestInput' } });
+    return waitForIt(() => mockedComponent.state());
+  };
+  const updated_1 = await state_1();
+  const updated_2 = await state_2();
+  assert(updated_1.inputValue === '' && updated_2.inputValue === 'TestInput');
+};
+```
+
+يجب أن يتلقى مكون `RenderInput` إلى `MyApp` خاصية الحالة `inputValue` كمِيزات.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+  const state_1 = () => {
+    mockedComponent.setState({ inputValue: 'TestName' });
+    return waitForIt(() => mockedComponent);
+  };
+  const updated_1 = await state_1();
+  assert(updated_1.find('p').text().includes('TestName'));
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyApp />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputValue: ''
+    }
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      inputValue: event.target.value
+    });
+  }
+  render() {
+    return (
+       <div>
+        { /* Change code below this line */ }
+
+        { /* Change code above this line */ }
+       </div>
+    );
+  }
+};
+
+class GetInput extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h3>Get Input:</h3>
+        <input
+          value={this.props.input}
+          onChange={this.props.handleChange}/>
+      </div>
+    );
+  }
+};
+
+class RenderInput extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h3>Input Render:</h3>
+        <p>{this.props.input}</p>
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      inputValue: ''
+    }
+  this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(event) {
+    this.setState({
+      inputValue: event.target.value
+    });
+  }
+  render() {
+    return (
+       <div>
+         <GetInput
+           input={this.state.inputValue}
+           handleChange={this.handleChange}/>
+         <RenderInput
+           input={this.state.inputValue}/>
+       </div>
+    );
+  }
+};
+
+class GetInput extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h3>Get Input:</h3>
+        <input
+          value={this.props.input}
+          onChange={this.props.handleChange}/>
+      </div>
+    );
+  }
+};
+
+class RenderInput extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h3>Input Render:</h3>
+        <p>{this.props.input}</p>
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-an-array-as-props.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-an-array-as-props.md
new file mode 100644
index 00000000000..eb184c4f16c
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-an-array-as-props.md
@@ -0,0 +1,186 @@
+---
+id: 5a24c314108439a4d403616a
+title: مرر قائمة (Array) مثل مِيزات (Props)
+challengeType: 6
+forumTopicId: 301401
+dashedName: pass-an-array-as-props
+---
+
+# --description--
+
+وأظهر التحدي السابق كيفية نقل المعلومات من عنصر الأساسي إلى مكون الفرعي مثل عنصر `props` أو الخواص. هذا التحدي يظهر كيفية تمرير القائمات (arrays) مثل `props`. لتمرير قائمة (array) إلى عنصر JSX، يجب معاملته JavaScript ومغلف في أقواس منحنية (curly braces).
+
+```jsx
+<ParentComponent>
+  <ChildComponent colors={["green", "blue", "red"]} />
+</ParentComponent>
+```
+
+بعد ذلك يمكن لمكون الفرعي الوصول إلى خاصية قائمة (array) باسم `colors`. وسائل القائمة مثل `join()` يمكن استخدامها عند اللجوء إلى الخاصية. سيؤدي `const ChildComponent = (props) => <p>{props.colors.join(', ')}</p>` إلى ضم جميع عناصر قائمة `colors` إلى string مفصولة بالفصلة (comma) وينتج: <`<p>green, blue, red</p>` لاحقا، ستتعلم عن الطرق الشائعة الأخرى لإنتاج قائمات البيانات في React.
+
+# --instructions--
+
+هناك `List` و `ToDo` في محرر التعليمات البرمجية. عند أنتاج كل `List` من المكون `ToDo`، مرر خاصية `tasks` تم تعيينها لقائمة من المهام للقيام بها، على سبيل المثال `["walk dog", "workout"]`. ثم أستخدم قائمة `tasks` في مكون القائمة `List`، تظهر قيمتها داخل عنصر `p`. استخدم `join(", ")` لعرض `props.tasks` في عنصر `p` كقائمة مفصولة بفواصل (comma). وينبغي لقائمة اليوم أن تتضمن مهمتين في الأقل، وينبغي أن يكون للغد 3 مهام في الأقل.
+
+# --hints--
+
+مكون `ToDo` يجب أن ينتج `div` خارجي واحد.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
+    return mockedComponent.children().first().type() === 'div';
+  })()
+);
+```
+
+يجب أن يكون العنصر الفرعي الثالث من مكون `ToDo` جزء من مكون `List`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
+    return mockedComponent.children().first().childAt(2).name() === 'List';
+  })()
+);
+```
+
+يجب أن يكون العنصر الفرعي الخامس من مكون `ToDo` جزء من مكون `List`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
+    return mockedComponent.children().first().childAt(4).name() === 'List';
+  })()
+);
+```
+
+يجب أن يكون لكلا مثالين من مكون `List` خاصية تسمى `tasks` و يجب أن تكون `tasks` من نوع القائمة (array).
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
+    return (
+      Array.isArray(mockedComponent.find('List').get(0).props.tasks) &&
+      Array.isArray(mockedComponent.find('List').get(1).props.tasks)
+    );
+  })()
+);
+```
+
+يجب أن يحتوي المكون `List` الأول الذي يمثل مهام اليوم على عنصرين أو أكثر.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
+    return mockedComponent.find('List').get(0).props.tasks.length >= 2;
+  })()
+);
+```
+
+المكون `List` الثاني الذي يمثل مهام الغد يجب أن يحتوي على 3 عناصر أو أكثر.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
+    return mockedComponent.find('List').get(1).props.tasks.length >= 3;
+  })()
+);
+```
+
+يجب أن يقدم المكون `List` القيمة من مِيزة `tasks` في علامة `p`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ToDo));
+    return (
+      mockedComponent
+        .find('p')
+        .get(0)
+        .props.children.replace(/\s*,\s*/g, ',') ===
+        mockedComponent
+          .find('List')
+          .get(0)
+          .props.tasks.join(',')
+          .replace(/\s*,\s*/g, ',') &&
+      mockedComponent
+        .find('p')
+        .get(1)
+        .props.children.replace(/\s*,\s*/g, ',') ===
+        mockedComponent
+          .find('List')
+          .get(1)
+          .props.tasks.join(',')
+          .replace(/\s*,\s*/g, ',')
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<ToDo />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const List = (props) => {
+  { /* Change code below this line */ }
+  return <p>{}</p>
+  { /* Change code above this line */ }
+};
+
+class ToDo extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>To Do Lists</h1>
+        <h2>Today</h2>
+        { /* Change code below this line */ }
+        <List/>
+        <h2>Tomorrow</h2>
+        <List/>
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+const List= (props) => {
+  return <p>{props.tasks.join(', ')}</p>
+};
+
+class ToDo extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>To Do Lists</h1>
+        <h2>Today</h2>
+        <List tasks={['study', 'exercise']} />
+        <h2>Tomorrow</h2>
+        <List tasks={['call Sam', 'grocery shopping', 'order tickets']} />
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-props-to-a-stateless-functional-component.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-props-to-a-stateless-functional-component.md
new file mode 100644
index 00000000000..347449d3d77
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-props-to-a-stateless-functional-component.md
@@ -0,0 +1,164 @@
+---
+id: 5a24c314108439a4d4036169
+title: مرر ميزات (Props) ألى مكون وظيفي عديم الحالة (Stateless Functional Component)
+challengeType: 6
+forumTopicId: 301402
+dashedName: pass-props-to-a-stateless-functional-component
+---
+
+# --description--
+
+شملت التحديات السابقة الكثير حول إنشاء وتكوين عناصر JSX، والمكونات الوظيفية (functional components)، ومكونات الفئة التصميم ES6 في React. مع هذه المؤسسة، حان الوقت للنظر إلى خاصية أخرى شائعة جدا في React هي: **ميزات (props)**. في React، يمكنك تمرير مِيزات (props)، أو الخواص (properties)، إلى مكونات الفرعية (child components). قل أن لديك مكون `App` الذي يجعل مكون الفرعي يسمى `Welcome` وهو مكون وظيفي عديم الحالة (stateless functional component). يمكنك تمرير `Welcome` ألى خاصية `user` عن طريق الكتابة:
+
+```jsx
+<App>
+  <Welcome user='Mark' />
+</App>
+```
+
+أنت تستخدم **سمات HTML المخصصة** التي أنشأتها وتدعمها React ليتم تمريرها إلى المكون. في هذه الحالة، يتم تمرير الخاصية `user` التي تم إنشاؤها إلى المكون `Welcome`. لما كان `Welcome` هو مكون وظيفي عديم الحالة (stateless functional component)، فلديه حق الوصول إلى هذه القيمة مثل:
+
+```jsx
+const Welcome = (props) => <h1>Hello, {props.user}!</h1>
+```
+
+إنه معيار لاستدعاء هذه القيمة `props` وعند التعامل مع المكونات الوظيفية عديمة الحالة (stateless functional components)، أنت في الأساس تعدّ حَجَّة لوظيفة تنتج JSX. يمكنك الوصول إلى قيمة الحِجَّة في هيكل الوظيفة. مع مكونات الفئة، سترى أن هذا مختلف بعض الشيء.
+
+# --instructions--
+
+هناك مكونات `Calendar` و `CurrentDate` في محرر التعليمات البرمجية. عند أنتاج `CurrentDate` من مكون `Calendar`، اجر في خاصية `date` المحدد للتاريخ الحالي من JavaScript الكائن `Date`. ثم الوصول إلى عنصر `prop` هذا في مكون `CurrentDate`، مظهراً قيمته داخل العلامات `p`. لاحظ أنه من أجل `prop` أن يتم تقييم مثل قيم JavaScript، يجب أن تكون مرفقة في أقواس منحنية curly brackets، على سبيل المثال `date={Date()}`.
+
+# --hints--
+
+يجب أن يعيد مكون `Calendar` عنصر `div` واحد.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(Calendar));
+    return mockedComponent.children().type() === 'div';
+  })()
+);
+```
+
+يجب أن يكون العنصر الفرعي الثاني من عنصر `Calendar` هو مكون `CurrentDate`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(Calendar));
+    return mockedComponent.children().childAt(1).name() === 'CurrentDate';
+  })()
+);
+```
+
+يجب أن يحتوي مكون `CurrentDate` على دعمه (prop) يسمى `date`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(Calendar));
+    return mockedComponent.children().childAt(1).props().date;
+  })()
+);
+```
+
+يجب أن يحتوي مِيزة `date` في `CurrentDate` على string من النص.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(Calendar));
+    const prop = mockedComponent.children().childAt(1).props().date;
+    return typeof prop === 'string' && prop.length > 0;
+  })()
+);
+```
+
+يجب إنشاء مِيزة `date` عن طريق الاتصال `Date()`
+
+```js
+assert(/<CurrentDatedate={Date\(\)}\/>/.test(__helpers.removeWhiteSpace(code)));
+```
+
+يجب أن ينتج المكون `CurrentDate` القيمة من مِيزة `date` في علامة `p`.
+
+```js
+let date = 'dummy date';
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(
+      React.createElement(CurrentDate, { date })
+    );
+    return mockedComponent.find('p').html().includes(date);
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<Calendar />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const CurrentDate = (props) => {
+  return (
+    <div>
+      { /* Change code below this line */ }
+      <p>The current date is: </p>
+      { /* Change code above this line */ }
+    </div>
+  );
+};
+
+class Calendar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h3>What date is it?</h3>
+        { /* Change code below this line */ }
+        <CurrentDate />
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+const CurrentDate = (props) => {
+  return (
+    <div>
+      { /* Change code below this line */ }
+      <p>The current date is: {props.date}</p>
+      { /* Change code above this line */ }
+    </div>
+  );
+};
+
+class Calendar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h3>What date is it?</h3>
+        { /* Change code below this line */ }
+        <CurrentDate date={Date()} />
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-state-as-props-to-child-components.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-state-as-props-to-child-components.md
new file mode 100644
index 00000000000..b0a5b22228b
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/pass-state-as-props-to-child-components.md
@@ -0,0 +1,145 @@
+---
+id: 5a24c314108439a4d403617a
+title: تمرير الحالة (State) مثل عناصر فرعية (Child Components)
+challengeType: 6
+forumTopicId: 301403
+dashedName: pass-state-as-props-to-child-components
+---
+
+# --description--
+
+لقد رأيتم الكثير من الأمثلة التي انتقلت إلى عناصر JSX الفرعية ومكونات React الفرعية في التحديات السابقة. ربما تتساءل من أين تأتي تلك المِيزات (props). النمط الشائع هو أن يكون هناك مكون حالة يحتوي على `state` مهمة للتطبيق الخاص بك، ثم ينتج مكونات فرعية. تريد أن يكون لهذه المكونات حق الوصول إلى بعض القطع من تلك `state`، التي تمرّ مِيزات (props).
+
+على سبيل المثال، ربما لديك مكون `App` الذي ينتج `Navbar`, من بين مكونات أخرى. في `App` الخاص بك، لديك `state` تحتوي على الكثير من معلومات المستخدم، ولكن `Navbar` يحتاج فقط إلى الوصول إلى اسم المستخدم حتى يتمكن من عرضه. تمرير هذه القطعة من `state` إلى مكون `Navbar` كمِيزة.
+
+ويوضح هذا النمط بعض الأنموذجات (paradigms) الهامة في React. الأول هو *تدفق البيانات الأحادية الاتجاه (unidirectional data flow)*. تتدفق الدولة في اتجاه واحد لأسفل شجرة عناصر تطبيقك، من مكون الحالة الأساسي (stateful parent component) إلى مكونات الفرعية (child components). ولا تحصل مكونات الفرعية إلا على بيانات الحالة التي تحتجاها. والثاني هو أن تطبيقات الحالة المعقدة (complex stateful apps) يمكن تقسيمها إلى مكونات قليلة أو ربما إلى مكون واحد من مكونات الحالة (stateful component). بقية المكونات الخاصة بك تتلقى ببساطة الحالة من الأصل كميزات، وتنتج واجهة المستخدم (UI) من تلك الحالة. يبدأ في إنشاء فصل حيث يتم التعامل مع إدارة الحالة في جزء واحد من الكود و واجهة المستخدم (UI) الذي يتم تقديمه في جزء آخر. هذا المبدأ لفصل منطق الحالة عن منطق واجهة المستخدم (UI) هو أحد المبادئ React الرئيسية. عندما يتم استخدامها بشكل صحيح، فإنها تجعل تصميم التطبيقات المعقدة ذات الصَّلاحِيَة (stateful applications) أسهل بكثير لإدارتها.
+
+# --instructions--
+
+مكون `MyApp` هو مكون حالة ويجعل `Navbar` مكوناً فرعياً. اجتياز خاصية `name` في `state` خاصة بها لأسفل إلى عنصر الفرعي، ثم إظهار `name` في العلامة `h1` التي هي جزء من طريقة التقديم `Navbar`. `name` يجب أن يظهر بعد النص `Hello, my name is:`.
+
+# --hints--
+
+يجب أن يقدم مكون `MyApp` مع مكون `Navbar` داخله.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+    return (
+      mockedComponent.find('MyApp').length === 1 &&
+      mockedComponent.find('Navbar').length === 1
+    );
+  })()
+);
+```
+
+يجب أن يتلقى مكون `Navbar` إلى `MyApp` خاصية الحالة `name` كمِيزات.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+  const setState = () => {
+    mockedComponent.setState({ name: 'TestName' });
+    return waitForIt(() => mockedComponent.find('Navbar').props());
+  };
+  const navProps = await setState();
+  assert(navProps.name === 'TestName');
+};
+```
+
+عنصر `h1` في `Navbar` يجب أن ينتج مِيزة `name`.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyApp));
+  const navH1Before = mockedComponent.find('Navbar').find('h1').text();
+  const setState = () => {
+    mockedComponent.setState({ name: 'TestName' });
+    return waitForIt(() => mockedComponent.find('Navbar').find('h1').text());
+  };
+  const navH1After = await setState();
+  assert(new RegExp('TestName').test(navH1After) && navH1After !== navH1Before);
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyApp />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'CamperBot'
+    }
+  }
+  render() {
+    return (
+       <div>
+         {/* Change code below this line */}
+         <Navbar />
+         {/* Change code above this line */}
+       </div>
+    );
+  }
+};
+
+class Navbar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+    <div>
+      {/* Change code below this line */}
+      <h1>Hello, my name is: </h1>
+      {/* Change code above this line */}
+    </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyApp extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'CamperBot'
+    }
+  }
+  render() {
+    return (
+       <div>
+         <Navbar name={this.state.name}/>
+       </div>
+    );
+  }
+};
+class Navbar extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+    <div>
+      <h1>Hello, my name is: {this.props.name}</h1>
+    </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-a-class-component-to-the-dom.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-a-class-component-to-the-dom.md
new file mode 100644
index 00000000000..d34c6fdd953
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-a-class-component-to-the-dom.md
@@ -0,0 +1,159 @@
+---
+id: 5a24c314108439a4d4036167
+title: أنتاج مكون فئة (Class Component) إلى DOM
+challengeType: 6
+forumTopicId: 301404
+dashedName: render-a-class-component-to-the-dom
+---
+
+# --description--
+
+يمكنك تذكر استخدام API ReactDOM في تحدي سابق لإضافة عناصر JSX إلى DOM. وستبدو عملية تقديم مكونات React متشابهة جدا. لقد ركزت التحديات القليلة الماضية على المكونات (components) والتكوين (composition)، لذلك تم التقديم لك خلف الكواليس. ومع ذلك، لن يقدم أي من رمز React الذي تكتبه إلى DOM دون أستدعاء API ReactDOM.
+
+إليك تذكير بكفية كتابة الصيغة: `ReactDOM.render(componentToRender, targetNode)`. الحَجَّة الأولى هي عنصر React الذي تريد أنتاجه. الحجة الثانية هي نقطة التواصل DOM التي تريد أن تجعل ذلك المكون داخلها.
+
+يتم تمرير مكونات React إلى `ReactDOM.render()` بشكل مختلف قليلا عن عناصر JSX. بالنسبة لعناصر JSX ، يمكنك تمرير اسم العنصر الذي تريد أنتاجه. لكن، بالنسبة لمكونات React، تحتاج إلى استخدام نفس الجملة كما لو كنت تقدم مكوناً متداخلاً، على سبيل المثال `ReactDOM.render(<ComponentToRender />, targetNode)`. أنت تستخدم هذه الجملة لكل من مكونات فئة ES6 والمكونات الوظيفية ES6.
+
+# --instructions--
+
+كل من مكونين `Fruits` و `Vegetables` تم تعريفهما لك خلف الكواليس. أنتج كلا المكونين كمكون `TypesOfFood` فرعي، ثم أنشئ `TypesOfFood` على DOM. هناك `div` مع `id='challenge-node'` متاح لك للاستخدام.
+
+# --hints--
+
+يجب أن ينتج مكون `TypesOfFood` عنصر `div` واحد.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
+    return mockedComponent.children().type() === 'div';
+  })()
+);
+```
+
+يجب أن ينتج مكون `TypesOfFood` المكون `Fruits` بعد عنصر `h1`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
+    return mockedComponent.children().childAt(1).name() === 'Fruits';
+  })()
+);
+```
+
+يجب أن ينتج مكون `TypesOfFood` المكون `Vegetables` بعد `Fruits`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(TypesOfFood));
+    return mockedComponent.children().childAt(2).name() === 'Vegetables';
+  })()
+);
+```
+
+يجب أن يقدم مكون `TypesOfFood` إلى DOM ضمن `div` مع معرف `challenge-node`.
+
+```js
+assert(
+  (function () {
+    const html = document.getElementById('challenge-node').childNodes[0]
+      .innerHTML;
+    return (
+      html.includes(
+        '<div><h2>Fruits:</h2><h4>Non-Citrus:</h4><ul><li>Apples</li><li>Blueberries</li><li>Strawberries</li><li>Bananas</li></ul><h4>Citrus:</h4><ul><li>Lemon</li><li>Lime</li><li>Orange</li><li>Grapefruit</li></ul></div>'
+      ) &&
+      html.includes(
+        '<div><h2>Vegetables:</h2><ul><li>Brussel Sprouts</li><li>Broccoli</li><li>Squash</li></ul></div>'
+      )
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```jsx
+const Fruits = () => {
+  return (
+    <div>
+      <h2>Fruits:</h2>
+      <h4>Non-Citrus:</h4>
+        <ul>
+          <li>Apples</li>
+          <li>Blueberries</li>
+          <li>Strawberries</li>
+          <li>Bananas</li>
+        </ul>
+      <h4>Citrus:</h4>
+        <ul>
+          <li>Lemon</li>
+          <li>Lime</li>
+          <li>Orange</li>
+          <li>Grapefruit</li>
+        </ul>
+    </div>
+  );
+};
+const Vegetables = () => {
+  return (
+    <div>
+      <h2>Vegetables:</h2>
+      <ul>
+        <li>Brussel Sprouts</li>
+        <li>Broccoli</li>
+        <li>Squash</li>
+      </ul>
+    </div>
+  );
+};
+```
+
+## --seed-contents--
+
+```jsx
+class TypesOfFood extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>Types of Food:</h1>
+        {/* Change code below this line */}
+
+        {/* Change code above this line */}
+      </div>
+    );
+  }
+};
+
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+class TypesOfFood extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>Types of Food:</h1>
+        {/* Change code below this line */}
+          <Fruits />
+           <Vegetables />
+         {/* Change code above this line */}
+      </div>
+    );
+  }
+};
+
+// Change code below this line
+ReactDOM.render(<TypesOfFood />, document.getElementById('challenge-node'));
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-conditionally-from-props.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-conditionally-from-props.md
new file mode 100644
index 00000000000..8345c1775db
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-conditionally-from-props.md
@@ -0,0 +1,307 @@
+---
+id: 5a24c314108439a4d4036188
+title: أنتاج مشروطاً (Conditionally) من مِيزات Props
+challengeType: 6
+forumTopicId: 301405
+dashedName: render-conditionally-from-props
+---
+
+# --description--
+
+حتى الآن، لقد رأيت كيفية استخدام `if/else`، و `&&`، وternary operator مثل (`condition ? expressionIfTrue : expressionIfFalse`) لاتخاذ قرارات مشروطة حول ما يجب القيام به ومتى. ومع ذلك، هناك موضوع مهم متبقي للمناقشة يسمح لك بالجمع بين أي أو كل هذه المفاهيم مع خاصية أخرى قوية React: مِيزات (props). استخدام مِيزات (props) لجعل التعليمات البرمجية مشروطة أمر شائع جدا مع مطوري الذي يستخدموا React، فهم يستخدمون قيمة مِيزة (prop) معين لاتخاذ القرارات تلقائياً حول ما يجب القيام به.
+
+في هذا التحدي، ستضع مكوناً فرعياً لاتخاذ القرارات بناءً على مِيزات. ستستخدم أيضًا ternary operator، ولكن يمكنكم أن ترى كيف أن العديد من المفاهيم الأخرى التي تمت تغطيتها في التحديات القليلة السابقة قد تكون مفيدة بنفس القدر في هذا السياق.
+
+# --instructions--
+
+يحتوي محرر التعليمات البرمجية على مكونين محددين بشكل جزئي لك: أحد الأساسين يسمى `GameOfChance`، والفرعي يسمى `Results`. تستخدم لإنشاء لُعْبَة بسيطة حيث يقوم المستخدم بالضغط على زر لمعرفة ما إذا كان يفوز أو يخسر.
+
+أولا، ستحتاج إلى تعبير بسيط ينتج قيمة عشوائيا مختلفة في كل مرة يتم تشغيلها. يمكنك استخدام `Math.random()`. هذه الطريقة تنتج قيمة بين `0` (شامل) و `1` (حصري) في كل مرة يتم تسميتها. إذاً الإمكانات تكون 50/50،أستخدم `Math.random() >= .5` في التعبير الخاص بك. من الناحية الإحصائية، سيعود هذا التعبير `true` بنسبة 50% من الوقت، و `false` بنسبة 50%. في طريقة الإنتاج، استبدل `null` بالتعبير الوارد أعلاه لإكمال إعلان المتغير.
+
+الآن لديك تعبير يمكنك استخدامه لاتخاذ قرار عشوائي في التعليمات البرمجية. بعد ذلك تحتاج إلى تنفيذ هذا. تقديم `Results` كعنصر فرعي من `GameOfChance`، وتمرير في `expression` كمِيزة يسمى `fiftyFifty`. في مكون `Results`، كتابة ternary expression لإنتاج عنصر `h1` بالنص `You Win!` أو `You Lose!` بناء على مِيزة `fiftyFifty` التي يتم تمريره من `GameOfChance`. وأخيرا، تحقق أن طريقة `handleClick()` تحسب كل دورة، بحيث يعرف المستخدم عدد المرات التي تلعبها. وهذا يساعد أيضا على إبلاغ المستخدم بأن المكون قد تم تحديثه فعلًا في حالة فوزه أو فقدانه مرتين على التوالي.
+
+# --hints--
+
+يجب أن يكون مكون `GameOfChance` موجوداً وأن يُنتج في الصفحة.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(GameOfChance)).find('GameOfChance').length,
+  1
+);
+```
+
+`GameOfChance` يجب أن يعيد عنصر `button` واحد.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(GameOfChance)).find('button').length,
+  1
+);
+```
+
+`GameOfChance` يجب أن بنتج مكون `Results` مرة واحد، الذي يحتوي على مِيزة تسمى `fiftyFifty`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(GameOfChance)).find('Results').length ===
+    1 &&
+    Enzyme.mount(React.createElement(GameOfChance))
+      .find('Results')
+      .props()
+      .hasOwnProperty('fiftyFifty') === true
+);
+```
+
+`GameOfChance` يجب تبدئ حالة تحتوي على خاصية `counter` بقيمة `1`.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(GameOfChance)).state().counter,
+  1
+);
+```
+
+عندما يتم تسليم المكون `GameOfChance` أول مرة إلى DOM، يجب إرجاع عنصر `p` مع النص الداخلي من `Turn: 1`.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(GameOfChance)).find('p').text(),
+  'Turn: 1'
+);
+```
+
+في كل مرة يتم النقر على الزر، يجب زيادة حالة counter بقيمة 1، وينبغي تقديم عنصر واحد `p` إلى DOM الذي يحتوي على نص `Turn: N`، حيث `N` هي قيمة الحالة counter.
+
+```js
+(() => {
+  const comp = Enzyme.mount(React.createElement(GameOfChance));
+  const simulate = () => {
+    comp.find('button').simulate('click');
+  };
+  const result = () => ({
+    count: comp.state('counter'),
+    text: comp.find('p').text()
+  });
+  const _1 = () => {
+    simulate();
+    return result();
+  };
+  const _2 = () => {
+    simulate();
+    return result();
+  };
+  const _3 = () => {
+    simulate();
+    return result();
+  };
+  const _4 = () => {
+    simulate();
+    return result();
+  };
+  const _5 = () => {
+    simulate();
+    return result();
+  };
+  const _1_val = _1();
+  const _2_val = _2();
+  const _3_val = _3();
+  const _4_val = _4();
+  const _5_val = _5();
+  assert(
+    _1_val.count === 2 &&
+      _1_val.text === 'Turn: 2' &&
+      _2_val.count === 3 &&
+      _2_val.text === 'Turn: 3' &&
+      _3_val.count === 4 &&
+      _3_val.text === 'Turn: 4' &&
+      _4_val.count === 5 &&
+      _4_val.text === 'Turn: 5' &&
+      _5_val.count === 6 &&
+      _5_val.text === 'Turn: 6'
+  );
+})();
+```
+
+عندما يتم تحميل عنصر `GameOfChance` أول مرة إلى DOM وفي كل مرة يتم النقر على الزر بعد ذلك، يتم إنتاج عنصر `h1` واحد الذي يمنحك عشوائياً `You Win!` أو `You Lose!`. ملاحظة: هذا قد يفشل عشوائيا. إذا حدث ذلك، يرجى المحاولة مرة أخرى.
+
+```js
+(() => {
+  const comp = Enzyme.mount(React.createElement(GameOfChance));
+  const simulate = () => {
+    comp.find('button').simulate('click');
+  };
+  const result = () => ({
+    h1: comp.find('h1').length,
+    text: comp.find('h1').text()
+  });
+  const _1 = result();
+  const _2 = () => {
+    simulate();
+    return result();
+  };
+  const _3 = () => {
+    simulate();
+    return result();
+  };
+  const _4 = () => {
+    simulate();
+    return result();
+  };
+  const _5 = () => {
+    simulate();
+    return result();
+  };
+  const _6 = () => {
+    simulate();
+    return result();
+  };
+  const _7 = () => {
+    simulate();
+    return result();
+  };
+  const _8 = () => {
+    simulate();
+    return result();
+  };
+  const _9 = () => {
+    simulate();
+    return result();
+  };
+  const _10 = () => {
+    simulate();
+    return result();
+  };
+  const _2_val = _2();
+  const _3_val = _3();
+  const _4_val = _4();
+  const _5_val = _5();
+  const _6_val = _6();
+  const _7_val = _7();
+  const _8_val = _8();
+  const _9_val = _9();
+  const _10_val = _10();
+  const __text = new Set([
+    _1.text,
+    _2_val.text,
+    _3_val.text,
+    _4_val.text,
+    _5_val.text,
+    _6_val.text,
+    _7_val.text,
+    _8_val.text,
+    _9_val.text,
+    _10_val.text
+  ]);
+  const __h1 = new Set([
+    _1.h1,
+    _2_val.h1,
+    _3_val.h1,
+    _4_val.h1,
+    _5_val.h1,
+    _6_val.h1,
+    _7_val.h1,
+    _8_val.h1,
+    _9_val.h1,
+    _10_val.h1
+  ]);
+  assert(__text.size === 2 && __h1.size === 1);
+})();
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<GameOfChance />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+class Results extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    {/* Change code below this line */}
+    return <h1></h1>;
+    {/* Change code above this line */}
+  }
+}
+
+class GameOfChance extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      counter: 1
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    this.setState(prevState => {
+      // Complete the return statement:
+      return {
+        counter: prevState
+      }
+    });
+  }
+  render() {
+    const expression = null; // Change this line
+    return (
+      <div>
+        <button onClick={this.handleClick}>Play Again</button>
+        {/* Change code below this line */}
+
+        {/* Change code above this line */}
+        <p>{'Turn: ' + this.state.counter}</p>
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+// We want this to be deterministic for testing purposes.
+const randomSequence = [true, false, false, true, true, false, false, true, true, false];
+let index = 0;
+const fiftyFifty = () => randomSequence[index++ % randomSequence.length];
+
+class Results extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <h1>{this.props.fiftyFifty ? 'You Win!' : 'You Lose!'}</h1>;
+  }
+}
+
+class GameOfChance extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      counter: 1
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    this.setState(prevState => {
+      return {
+        counter: prevState.counter + 1
+      }
+    });
+  }
+  render() {
+    return (
+      <div>
+        <button onClick={this.handleClick}>Play Again</button>
+        <Results fiftyFifty={fiftyFifty()} />
+        <p>{'Turn: ' + this.state.counter}</p>
+      </div>
+    );
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-html-elements-to-the-dom.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-html-elements-to-the-dom.md
new file mode 100644
index 00000000000..092b3ab7208
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-html-elements-to-the-dom.md
@@ -0,0 +1,75 @@
+---
+id: 5a24bbe0dba28a8d3cbd4c5f
+title: أنتاج عناصر HTML في DOM
+challengeType: 6
+forumTopicId: 301406
+dashedName: render-html-elements-to-the-dom
+---
+
+# --description--
+
+حتى الآن، تعلمت أن JSX أداة مناسبة لكتابة HTML مقروءة داخل JavaScript. مع React، يمكننا تقديم JSX قاصدًا إلى HTML DOM باستخدام React الذي يقدم API المعروف باسم ReactDOM.
+
+ReactDOM يوفر طريقة بسيطة لتقديم عناصر React إلى DOM التي تبدو مثل: `ReactDOM.render(componentToRender, targetNode)`, حيث الحَجَّة الأولى هي عنصر React أو المكون الذي تريد أن تنتجه، والحجة الثانية هي نقطة التواصل DOM التي تريد تقديم المكون إليها.
+
+كما تتوقع، `ReactDOM.render()` يجب أن يستدعى بعد إعلانات عناصر JSX، تماما مثل كيفية الإعلان عن المتغيرات قبل استخدامها.
+
+# --instructions--
+
+يحتوي محرر التعليمات البرمجية على مكون JSX بسيط. استخدم طريقة `ReactDOM.render()` لإضافة هذا المكون إلى الصفحة. يمكنك تمرير عناصر JSX المحددة قاصدًا كالحجة الأولى واستخدام `document.getElementById()` لتحديد نقطة التواصل DOM لتقديمها إليها. هناك `div` مع `id='challenge-node'` متاح لك للاستخدام. تيقن من عدم تغيير ثابت `JSX`.
+
+# --hints--
+
+يجب أن يُنتج `JSX` عنصر `div`.
+
+```js
+assert(JSX.type === 'div');
+```
+
+يجب أن يحتوي `div` على علامة `h1` كالعنصر الأول.
+
+```js
+assert(JSX.props.children[0].type === 'h1');
+```
+
+يجب أن يحتوي `div` على `p` كالعنصر الثاني.
+
+```js
+assert(JSX.props.children[1].type === 'p');
+```
+
+يجب أن ينتج عنصر JSX المقدم إلى نقطة التواصل DOM مع معرف `challenge-node`.
+
+```js
+assert(
+  document.getElementById('challenge-node').childNodes[0].innerHTML ===
+    '<h1>Hello World</h1><p>Lets render this to the DOM</p>'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```jsx
+const JSX = (
+  <div>
+    <h1>Hello World</h1>
+    <p>Lets render this to the DOM</p>
+  </div>
+);
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+const JSX = (
+<div>
+  <h1>Hello World</h1>
+  <p>Lets render this to the DOM</p>
+</div>
+);
+// Change code below this line
+ReactDOM.render(JSX, document.getElementById('challenge-node'));
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-react-on-the-server-with-rendertostring.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-react-on-the-server-with-rendertostring.md
new file mode 100644
index 00000000000..37fb1c1d2e3
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-react-on-the-server-with-rendertostring.md
@@ -0,0 +1,76 @@
+---
+id: 5a24c314108439a4d403618d
+title: تقديم React على حاسب ألى (Server) مع renderToString
+challengeType: 6
+forumTopicId: 301407
+dashedName: render-react-on-the-server-with-rendertostring
+---
+
+# --description--
+
+حتى الآن، كنت تقدم مكونات React على العميل (client). عادةً، هذا ما ستفعله دائماً. ومع ذلك، هناك بعض حالات الاستخدام الذي يكون فيها من المنطقي وضع عنصر React على حاسب ألى (server). يكون React مكتبة عرض JavaScript ويمكنك تشغيل JavaScript على حاسب ألى (server) مع نقطة التواصل (Node)، فإن هذا ممكن. في الواقع، React يوفر طريقة `renderToString()` يمكنك استخدامها لهذا الغرض.
+
+هناك سببان رئيسان وراء إمكانية استخدام الإنتاج على حاسب ألى (server) في تطبيق على أرض الواقع. أولا، دون فعل ذلك، ستتكون تطبيقات React الخاصة بك من مِلَفّ HTML فارغ نسبياً وحزمة كبيرة من JavaScript عندما يتم تحميلها في البداية تحميل المتصفح. قد لا يكون هذا مثالياً لمحركات البحث التي تحاول تحليل محتوى صفحاتك حتى يتمكن الناس من العثور عليك. إذا قديمت علامة HTML الأولية على حاسب ألى (server) وإرسال هذا إلى العميل (client)، تحتوي الحمولة الأولية للصفحة على جميع علامات الصفحة التي يمكن تحليلها بواسطة محركات البحث. ثانياً، هذا ينشئ تجرِبة تحميل صفحة أولية أسرع لأن HTML المقدمة أصغر من رمز JavaScript للتطبيق بِرُمَّته. سيظل React قادراً على التعرف على التطبيق الخاص بك وإدارتها بعد التحميل الأولي.
+
+# --instructions--
+
+يتم توفير طريقة `renderToString()` على `ReactDOMServer`، والمتاحة مثل كائن عالمي (global). وتأخذ الطريقة حَجَّة واحدة هي عنصر React. استخدم هذا لوضع `App` على شكل string.
+
+# --hints--
+
+يجب أن يقدم مكون `App` على شكل string باستخدام `ReactDOMServer.renderToString`.
+
+```js
+(getUserInput) =>
+  assert(
+    getUserInput('index')
+      .replace(/ /g, '')
+      .includes('ReactDOMServer.renderToString(<App/>)') &&
+      Enzyme.mount(React.createElement(App)).children().name() === 'div'
+  );
+```
+
+# --seed--
+
+## --before-user-code--
+
+```jsx
+var ReactDOMServer = { renderToString(x) { return null; } };
+```
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<App />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <div/>
+  }
+};
+
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+class App extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <div/>
+  }
+};
+
+// Change code below this line
+ReactDOMServer.renderToString(<App/>);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-state-in-the-user-interface-another-way.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-state-in-the-user-interface-another-way.md
new file mode 100644
index 00000000000..cc19efed612
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-state-in-the-user-interface-another-way.md
@@ -0,0 +1,119 @@
+---
+id: 5a24c314108439a4d4036172
+title: أنتاج الحالة (State) في واجهة المستخدم (User Interface) بطريقة أخرى
+challengeType: 6
+forumTopicId: 301408
+dashedName: render-state-in-the-user-interface-another-way
+---
+
+# --description--
+
+هناك طريقة أخرى للوصول إلى `state` في مكون. في طريقة `render()`، قبل بيان `return`، يمكنك كتابة JavaScript مباشرة. على سبيل المثال، يمكنك الإعلان عن الحالة، والوصول إلى البيانات من `state` أو `props`، وإجراء حسابات على هذه البيانات، وكذلك. ثم يمكنك تعيين أي بيانات للمتغيرات، التي لديك حق الوصول إليها في بيان `return`.
+
+# --instructions--
+
+في طريقة التقديم `MyComponent`، حدد `const` باسم `name` وعيّنه يساوي قيمة الاسم في `state` المكون. لأنه يمكنك كتابة JavaScript قاصدًا في هذا الجزء من التعليمات البرمجية، ليس عليك تغلفه هذا المرجع بأقواس منحنية (curly braces).
+
+بعد ذلك، في بيان الإرجاع، أنتج هذه القيمة في وسم `h1` باستخدام المتغير `name`. تذكر، تحتاج إلى استخدام جملة JSX (الأقواس المنحنية في JavaScript) في بيان أنتاج (return statement).
+
+# --hints--
+
+`MyComponent` يجب أن يكون لديه هُوِيَّة `name` بقيمة `freeCodeCamp` مخزنة في الحالة (state).
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MyComponent)).state('name') ===
+    'freeCodeCamp'
+);
+```
+
+`MyComponent` يجب أن يجعل عنصر `h1` عنوان مغلف في `div` واحد.
+
+```js
+assert(
+  /<div><h1>.*<\/h1><\/div>/.test(
+    Enzyme.mount(React.createElement(MyComponent)).html()
+  )
+);
+```
+
+يجب أن تتضمن العلامة `h1` المنشئة مرجع `{name}`.
+
+```js
+(getUserInput) =>
+  assert(/<h1>\n*\s*\{\s*name\s*\}\s*\n*<\/h1>/.test(getUserInput('index')));
+```
+
+يجب أن يحتوي عنصر العنوان `h1` المُنتج على النص المقدم من حالة المكون.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const first = () => {
+    mockedComponent.setState({ name: 'TestName' });
+    return waitForIt(() => mockedComponent.html());
+  };
+  const firstValue = await first();
+  assert(firstValue === '<div><h1>TestName</h1></div>');
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'freeCodeCamp'
+    }
+  }
+  render() {
+    // Change code below this line
+
+    // Change code above this line
+    return (
+      <div>
+        { /* Change code below this line */ }
+
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'freeCodeCamp'
+    }
+  }
+  render() {
+    // Change code below this line
+    const name = this.state.name;
+    // Change code above this line
+    return (
+      <div>
+        { /* Change code below this line */ }
+        <h1>{name}</h1>
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-state-in-the-user-interface.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-state-in-the-user-interface.md
new file mode 100644
index 00000000000..abd0b90513c
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-state-in-the-user-interface.md
@@ -0,0 +1,113 @@
+---
+id: 5a24c314108439a4d4036171
+title: أنتاج الحالة (State) في واجهة المستخدم (User Interface)
+challengeType: 6
+forumTopicId: 301409
+dashedName: render-state-in-the-user-interface
+---
+
+# --description--
+
+بمجرد تحديد الحالة الأولية للمكون (component's initial state)، يمكنك عرض أي جزء منه في واجهة المستخدم (UI) التي يتم إنتاجها. إذا كان المكون حالة، فسيكون لديه دائماً حق الوصول إلى البيانات في `state` بطريقته `render()`. يمكنك الوصول إلى البيانات باستخدام `this.state`.
+
+إذا كنت ترغب في الوصول إلى قيمة الحالة ضمن `return` من طريقة الإنتاج، يجب عليك إرفاق القيمة بأقواس منحنية (curly braces).
+
+`state` هي واحدة من أقوى خاصيات المكونات في React. يتيح لك تتبع البيانات المهمة في التطبيق الخاص بك وتقديم واجهة المستخدم (UI) لاستجابه للتغييرات في هذه البيانات. إذا تغيرت بياناتك، سوف يتغير واجهة المستخدم (UI). يستخدم React ما يسمى "DOM" الافتراضي، لأتابع التغيرات خلف الكواليس. وعندما تستكمل بيانات الحالة فإنها تؤدي إلى إعادة تقديم المكونات باستخدام تلك البيانات - بما في ذلك المكونات الفرعية التي تتلقى البيانات كمِيزة (prop). React يحدث DOM، ولكن فقط عند الضرورة. وهذا يعني أنه ليس عليك أن تقلق حول تغيير DOM. أنت ببساطة تعلن ما يجب أن تبدو عليه واجهة المستخدم (UI).
+
+لاحظ أنه إذا إنشاءت حالة مكونات، لا توجد مكونات أخرى تعلم `state` بالمكون. `state` الخاصة بها مغلفة تماما، أو محلية لذلك المكون، إلا إذا مررت بيانات الحالة إلى عنصر الفرعي بواسطة `props`. مفهوم `state` المغلقة (encapsulated) مهم جدا لأنه يسمح لك بكتابة منطق معين، ثم احتواء هذا المنطق و عزله في مكان واحد في التعليمات البرمجية الخاص بك.
+
+# --instructions--
+
+في محرر التعليمات البرمجية، `MyComponent` هو فعلًا يحتوى حالة. حدد علامة `h1` في طريقة تقديم المكون التي تجعل قيمة `name` تُأخذ من حالة المكون.
+
+**ملاحظة:** أن `h1` يجب أن يأخذ القيمة من `state` ولا شيء آخر. في JSX، سيتم التعامل مع أي التعليمات البرمجية تكتبه بأقواس منحنية `{ }` على أنها JavaScript. إذاً للوصول إلى القيمة من `state` غلف المرجع في أقواس (reference) منحنية (curly braces).
+
+# --hints--
+
+`MyComponent` يجب أن يكون لديه مفتاح `name` بقيمة `freeCodeCamp` مخزنة في الحالة (state).
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MyComponent)).state('name') ===
+    'freeCodeCamp'
+);
+```
+
+`MyComponent` يجب أن يجعل عنصر `h1` عنوان مغلف في `div` واحد.
+
+```js
+assert(
+  /<div><h1>.*<\/h1><\/div>/.test(
+    Enzyme.mount(React.createElement(MyComponent)).html()
+  )
+);
+```
+
+يجب أن يحتوي عنصر العنوان `h1` المُنتج على النص المقدم من حالة المكون فقط.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const first = () => {
+    mockedComponent.setState({ name: 'TestName' });
+    return waitForIt(() => mockedComponent.html());
+  };
+  const firstValue = await first();
+  const getValue = firstValue.replace(/\s/g, '');
+  assert(getValue === '<div><h1>TestName</h1></div>');
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'freeCodeCamp'
+    }
+  }
+  render() {
+    return (
+      <div>
+        { /* Change code below this line */ }
+
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'freeCodeCamp'
+    }
+  }
+  render() {
+    return (
+      <div>
+        { /* Change code below this line */ }
+        <h1>{this.state.name}</h1>
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-with-an-if-else-condition.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-with-an-if-else-condition.md
new file mode 100644
index 00000000000..c0a1af4dcd7
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/render-with-an-if-else-condition.md
@@ -0,0 +1,155 @@
+---
+id: 5a24c314108439a4d4036184
+title: أنتاج باستخدام شرط If-Else
+challengeType: 6
+forumTopicId: 301410
+dashedName: render-with-an-if-else-condition
+---
+
+# --description--
+
+طريقة أخرة لاستخدام JavaScript للتحكم في طريقة العرض المنشئة هو ربط العناصر التي تم إنتاجها بشرط. عندما يكون الشرط صحيحا (true)، يُعرض مكون. عندما تكون خاطئة (false)، إنها وجهة نظر مختلفة. يمكنك فعل ذلك باستخدام الشرط المعتادة `if/else` في طريقة `render()` لمكون React.
+
+# --instructions--
+
+يحتوي MyComponent على `boolean` في الحالة, التي تتتبع ما إذا كنت تريد عرض بعض العناصر في واجهة المستخدم (UI) أم لا. `button` يبدل حالة هذه القيمة. حالياً، ينتج نفس واجهة المستخدم (UI) في كل مرة. أعد كتابة طريقة `render()` مع بيان `if/else` بحيث إذا كان `display` هو `true`، أنشئ العلامة الحالية (current markup). خلاف ذلك، إرجاع العلامة دون عنصر `h1`.
+
+**ملاحظة:** يجب أن تكتب `if/else` لتجتاز الاختبارات. ولن يمر استخدام ternary operator هنا.
+
+# --hints--
+
+`MyComponent` يجب أن يكون موجودا وينتج.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.find('MyComponent').length === 1;
+  })()
+);
+```
+
+عندما يتم تعيين `display` إلى `true`، و سوف ينتج `div`، و`button`, و `h1`.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const state_1 = () => {
+    mockedComponent.setState({ display: true });
+    return waitForIt(() => mockedComponent);
+  };
+  const updated = await state_1();
+  assert(
+    mockedComponent.find('div').length === 1 &&
+      mockedComponent.find('div').children().length === 2 &&
+      mockedComponent.find('button').length === 1 &&
+      mockedComponent.find('h1').length === 1
+  );
+};
+```
+
+عندما يتم تعيين `display` إلى `false`، يتم إنتاج `div` و `button` فقط.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const state_1 = () => {
+    mockedComponent.setState({ display: false });
+    return waitForIt(() => mockedComponent);
+  };
+  const updated = await state_1();
+  assert(
+    mockedComponent.find('div').length === 1 &&
+      mockedComponent.find('div').children().length === 1 &&
+      mockedComponent.find('button').length === 1 &&
+      mockedComponent.find('h1').length === 0
+  );
+};
+```
+
+يجب أن تستخدم طريقة العرض بيان `if/else` للتحقق من شرط `this.state.display`.
+
+```js
+(getUserInput) =>
+  assert(
+    getUserInput('index').includes('if') &&
+      getUserInput('index').includes('else')
+  );
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      display: true
+    }
+    this.toggleDisplay = this.toggleDisplay.bind(this);
+  }
+  toggleDisplay() {
+    this.setState((state) => ({
+      display: !state.display
+    }));
+  }
+  render() {
+    // Change code below this line
+
+    return (
+       <div>
+         <button onClick={this.toggleDisplay}>Toggle Display</button>
+         <h1>Displayed!</h1>
+       </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      display: true
+    }
+ this.toggleDisplay = this.toggleDisplay.bind(this);
+ }
+  toggleDisplay() {
+    this.setState((state) => ({
+      display: !state.display
+    }));
+  }
+  render() {
+    // Change code below this line
+    if (this.state.display) {
+      return (
+         <div>
+           <button onClick={this.toggleDisplay}>Toggle Display</button>
+           <h1>Displayed!</h1>
+         </div>
+      );
+    } else {
+      return (
+        <div>
+           <button onClick={this.toggleDisplay}>Toggle Display</button>
+         </div>
+      );
+    }
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/review-using-props-with-stateless-functional-components.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/review-using-props-with-stateless-functional-components.md
new file mode 100644
index 00000000000..4d039c6a0ce
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/review-using-props-with-stateless-functional-components.md
@@ -0,0 +1,145 @@
+---
+id: 5a24c314108439a4d403616f
+title: مراجعة باستخدام مِيزات Props مع المكونات الوظيفية عديمة الحالة (Stateless Functional Components)
+challengeType: 6
+forumTopicId: 301411
+dashedName: review-using-props-with-stateless-functional-components
+---
+
+# --description--
+
+باستثناء التحدي الأخير، كنت تمرير المِيزات (props) إلى مكونات وظيفية عديمة الجنسية (tateless functional components). هذه المكونات تعمل مثل وظائف خالصة (pure functions). فهم يقبلون الميزات مثل مدخلات وينتجون نفس النظرة في كل مرة تمرر فيها نفس الميزات. قد تتساءل ما هي الحالة (state)، التحدي التالي سيغطيها بمزيد من التفصيل. وقبل ذلك، هنا استعراض لمصطلحات المكونات.
+
+*مكون وظيفي عديم الحالة (stateless functional component)* هو وظيفية تكتبها تقبل الميزات (props) و تنتج JSX. *مكون عديم الحالة (stateless component)*، من ناحية أخرى، هو فئة تمدد `React.Component`، ولكنه لا يستخدم الحالة الداخلية (internal state) (المشمولة في التحدي التالي). وأخيرا، فإن *مكون حالة (stateful component)* هو مكون فئة يحتفظ بحالته الداخلية. قد ترى المكونات الحالة المشار إليها ببساطة مثل مكونات أو مكونات React.
+
+ومن الأنماط الشائعة محاولة التقليل إلى أدنى حد من الوضع الحالة واستحداث عناصر وظيفية عديمة الحالة كلما أمكن ذلك. هذا يساعدك في احتواء إدارة الحالة الخاصة بك إلى منطقة معينة في تطبيقك. يؤدي هذا بدوره إلى تحسين تطوير وصيانة التطبيق الخاص بك, عن طريق تيسير متابعة كيفية تأثير التغييرات في الحالة على سلوكها.
+
+# --instructions--
+
+يحتوي محرر التعليمات البرمجية على مكون `CampSite` الذي يجعل مكون `Camper` فرعي. حدد مكون `Camper` وعيّن ميزته الافتراضية إلى `{ name: 'CamperBot' }`. داخل مكون `Camper`، قدم أي تعليمات برمجية تريده، ولكن تيقن من وجود عنصر `p` الذي يتضمن القيمة `name` فقط الذي يتم تمريرها على شكل `prop`. أخيراً, حدد `propTypes` على مكون `Camper` لطلب `name` أن يتم توفيره كميزة وتحقق أنه من نوع `string`.
+
+# --hints--
+
+يجب أن يقدم مكون `CampSite`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(CampSite));
+    return mockedComponent.find('CampSite').length === 1;
+  })()
+);
+```
+
+يجب أن يقدم مكون `Camper`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(CampSite));
+    return mockedComponent.find('Camper').length === 1;
+  })()
+);
+```
+
+يجب أن يتضمن مكون `Camper` الميزات الافتراضية التي تعين string بقيمة `CamperBot` إلى اسم هُوِيَّة `name`.
+
+```js
+assert(
+  /Camper.defaultProps={name:(['"`])CamperBot\1,?}/.test(
+    __helpers.removeWhiteSpace(code)
+  )
+);
+```
+
+يجب أن يتضمن مكون `Camper` أنواع المِيزة التي تحتاج مِيزة `name` أن يكون من نوع `string`.
+
+```js
+assert(
+  /Camper.propTypes={name:PropTypes.string.isRequired,?}/.test(
+    __helpers.removeWhiteSpace(code)
+  )
+);
+```
+
+يجب أن يحتوي مكون `Camper` على عنصر `p` مع النص فقط من مِيزة `name`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(CampSite));
+    return (
+      mockedComponent.find('p').text() ===
+      mockedComponent.find('Camper').props().name
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```jsx
+var PropTypes = {
+   string: { isRequired: true }
+};
+```
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<CampSite />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class CampSite extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <Camper/>
+      </div>
+    );
+  }
+};
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+class CampSite extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <Camper/>
+      </div>
+    );
+  }
+};
+// Change code below this line
+
+const Camper = (props) => {
+   return (
+     <div>
+       <p>{props.name}</p>
+     </div>
+   );
+};
+
+Camper.propTypes = {
+  name: PropTypes.string.isRequired
+};
+
+Camper.defaultProps = {
+  name: 'CamperBot'
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/set-state-with-this.setstate.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/set-state-with-this.setstate.md
new file mode 100644
index 00000000000..12ba6d20cab
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/set-state-with-this.setstate.md
@@ -0,0 +1,143 @@
+---
+id: 5a24c314108439a4d4036173
+title: تعيين الحالة (State) مع طريقة this.setState
+challengeType: 6
+forumTopicId: 301412
+dashedName: set-state-with-this-setstate
+---
+
+# --description--
+
+التحديات السابقة غط المكون `state` وكيفية تهيئة الحالة في `constructor`. وهناك أيضا طريقة لتغيير `state` المكون. يوفر React طريقة لتحديث المكون `state` يسمى `setState`. يمكنك التواصل بطريقة `setState` داخل فئة المكون الخاص بك مثل: `this.setState()`، المرور في كائن مع أزواج القيمة الرئيسة. هُوِيَّات (keys) هي خصائص الحالة الخاصة بك والقيم بيانات الحالتهم المحدثة. على سبيل المثال، إذا كنا نخزن `username` في الحالة و أردنا تحديثه، فسيبدو كذلك:
+
+```jsx
+this.setState({
+  username: 'Lewis'
+});
+```
+
+React يتوقع منك عدم تعديل `state` قاصدًا، بدلاً من ذلك استخدم `this.setState()` دائماً عند حدوث تغييرات في الحالة. كما يجب أن تشير إلى أن React قد تركيب تحديث حالة متعدد من أجل تحسين الأداء. ما يعنيه هذا هو أن تحديثات الحالة بواسطة طريقة `setState` يمكن أن تكون غير متزامن. هناك صيغة بديلة لطريقة `setState` التي توفر طريقة حول هذه المشكلة. هذا نادراً ما تكون هناك حاجة إليه ولكن من الجيد أن معرفته! يرجى الرجوع إلى <a href="https://www.freecodecamp.org/news/what-is-state-in-react-explained-with-examples/" target="_blank" rel="noopener noreferrer nofollow">React Article</a> لمزيد من التفاصيل.
+
+# --instructions--
+
+هناك عنصر `button` في محرر التعليمات البرمجية له معالج `onClick()`. يتم تشغيل هذا المعالج عندما يستقبل `button` حدث النقر في المتصفح، يشغل الطريقة `handleClick` المعرَّفة في `MyComponent`. في إطار طريقة `handleClick` حدث المكون `state` باستخدام `this.setState()`. عيّن خاصية `name` في `state` لتساوي string باسم `React Rocks!`.
+
+انقر على الزر (button) لمشاهدة تحديث الحالة التي تم تقديمها. لا تقلق إذا كنت لا تفهم تماما كيف يعمل رمز المعالج في هذه المرحلة. إنه مغطى في التحديات القادمة.
+
+# --hints--
+
+حالة `MyComponent` يجب أن تهيئ مع زوج القيمة الهُوِيَّة `{ name: Initial State }`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MyComponent)).state('name') ===
+    'Initial State'
+);
+```
+
+`MyComponent` يجب أن يٌنتج عنصر عنوان `h1`.
+
+```js
+assert(Enzyme.mount(React.createElement(MyComponent)).find('h1').length === 1);
+```
+
+يجب أن يحتوي عنصر العنوان `h1` المُنتج على النص المقدم من حالة المكون.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const first = () => {
+    mockedComponent.setState({ name: 'TestName' });
+    return waitForIt(() => mockedComponent.html());
+  };
+  const firstValue = await first();
+  assert(/<h1>TestName<\/h1>/.test(firstValue));
+};
+```
+
+أستدعي طريقة `handleClick` في `MyComponent` لتعيين خاصية الاسم في الحالة لتكون `React Rocks!`.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const first = () => {
+    mockedComponent.setState({ name: 'Before' });
+    return waitForIt(() => mockedComponent.state('name'));
+  };
+  const second = () => {
+    mockedComponent.instance().handleClick();
+    return waitForIt(() => mockedComponent.state('name'));
+  };
+  const firstValue = await first();
+  const secondValue = await second();
+  assert(firstValue === 'Before' && secondValue === 'React Rocks!');
+};
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'Initial State'
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+    // Change code below this line
+
+    // Change code above this line
+  }
+  render() {
+    return (
+      <div>
+        <button onClick={this.handleClick}>Click Me</button>
+        <h1>{this.state.name}</h1>
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      name: 'Initial State'
+    };
+    this.handleClick = this.handleClick.bind(this);
+  }
+  handleClick() {
+     // Change code below this line
+    this.setState({
+      name: 'React Rocks!'
+    });
+    // Change code above this line
+  }
+  render() {
+    return (
+      <div>
+        <button onClick = {this.handleClick}>Click Me</button>
+        <h1>{this.state.name}</h1>
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/use--for-a-more-concise-conditional.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use--for-a-more-concise-conditional.md
new file mode 100644
index 00000000000..44ab0f34de4
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use--for-a-more-concise-conditional.md
@@ -0,0 +1,146 @@
+---
+id: 5a24c314108439a4d4036185
+title: استخدم && لمزيد من تشرط متسق (Concise Conditional)
+challengeType: 6
+forumTopicId: 301413
+dashedName: use--for-a-more-concise-conditional
+---
+
+# --description--
+
+لقد نجحت تعبيرات `if/else` في التحدي السابق، ولكن هناك طريقة أكثر إيجازاً لتحقيق نفس النتيجة. تخيل أنك تتتبع عدة شروط في مكون وأنت تريد عناصر مختلفة أن تنتج تبعاً كل من هذه الشروط. إذا كتبت الكثير من تعبيرات `else if` لإنشاء واجهة مستخدم مختلفة (UI) قليلاً، فيمكنك تكرار التعليمات البرمجية التي تترك مجال للخطأ. بدلاً من ذلك، يمكنك استخدام `&&` المشغل المنطقي (logical operators) لتنفيذ المنطق المشروط (conditional logic) بطريقة أكثر إيجازاً. هذا ممكن لأنك تريد التحقق من أن الشرط هو `true`، وإذا كان الأمر كذلك، إرجاع بعض العلامة. إليك مثال:
+
+```jsx
+{condition && <p>markup</p>}
+```
+
+إذا كان `condition` تكون `true`، سيتم إرجاع العلامة. إذا كان الشرط هو `false`، فإن العملية سوف تعود `false` فوراً بعد قياس `condition` وعدم إرجاع أي شيء. يمكنك تضمين هذه البيانات قاصدًا في JSX الخاص بك وكتابة الشروط المتعددة (string multiple conditions) معاً بكتابة `&&` بعد كل واحدة منها. يتيح لك هذا التعامل مع المنطق الشرطي الأكثر تعقيداً في طريقة `render()` الخاصة بك دون تكرار الكثير من التعليمات البرمجية.
+
+# --instructions--
+
+حل المثال السابق مرة أخرى، لذلك `h1` فقط إذا `display` تكون `true`، ولكن استخدم `&&` المشغل المنطقي بدلاً من `if/else`.
+
+# --hints--
+
+`MyComponent` يجب أن يكون موجودا وينتج.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.find('MyComponent').length;
+  })()
+);
+```
+
+عندما يتم تعيين `display` إلى `true`، و سوف ينتج `div`، و`button`, و `h1`.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const state_1 = () => {
+    mockedComponent.setState({ display: true });
+    return waitForIt(() => mockedComponent);
+  };
+  const updated = await state_1();
+  assert(
+    updated.find('div').length === 1 &&
+      updated.find('div').children().length === 2 &&
+      updated.find('button').length === 1 &&
+      updated.find('h1').length === 1
+  );
+};
+```
+
+عندما يتم تعيين `display` إلى `false`، يتم إنتاج `div` و `button` فقط.
+
+```js
+async () => {
+  const waitForIt = (fn) =>
+    new Promise((resolve, reject) => setTimeout(() => resolve(fn()), 250));
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const state_1 = () => {
+    mockedComponent.setState({ display: false });
+    return waitForIt(() => mockedComponent);
+  };
+  const updated = await state_1();
+  assert(
+    updated.find('div').length === 1 &&
+      updated.find('div').children().length === 1 &&
+      updated.find('button').length === 1 &&
+      updated.find('h1').length === 0
+  );
+};
+```
+
+يجب أن تستخدم طريقة التقديم `&&` المشغل المنطقي (logical operator) للتحقق من حالة `this.state.display`.
+
+```js
+(getUserInput) => assert(getUserInput('index').includes('&&'));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      display: true
+    }
+    this.toggleDisplay = this.toggleDisplay.bind(this);
+  }
+  toggleDisplay() {
+    this.setState(state => ({
+      display: !state.display
+    }));
+  }
+  render() {
+    // Change code below this line
+    return (
+       <div>
+         <button onClick={this.toggleDisplay}>Toggle Display</button>
+         <h1>Displayed!</h1>
+       </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      display: true
+    }
+ this.toggleDisplay = this.toggleDisplay.bind(this);
+  }
+  toggleDisplay() {
+    this.setState(state => ({
+      display: !state.display
+    }));
+  }
+  render() {
+    // Change code below this line
+    return (
+       <div>
+         <button onClick={this.toggleDisplay}>Toggle Display</button>
+         {this.state.display && <h1>Displayed!</h1>}
+       </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-a-ternary-expression-for-conditional-rendering.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-a-ternary-expression-for-conditional-rendering.md
new file mode 100644
index 00000000000..8ec54c08b56
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-a-ternary-expression-for-conditional-rendering.md
@@ -0,0 +1,280 @@
+---
+id: 5a24c314108439a4d4036187
+title: استخدام Ternary Expression للإنتاج المشروط (Conditional Rendering)
+challengeType: 6
+forumTopicId: 301414
+dashedName: use-a-ternary-expression-for-conditional-rendering
+---
+
+# --description--
+
+قبل الانتقال إلى تقنيات العرض الديناميكي، هناك طريقة أخيرة لاستخدام اشتراطات JavaScript المدمجة لتقديم ما تريده, تسمى: <dfn>ternary operator</dfn>. غالباً ما يستخدم ternary operator كاختصار لتعبيرات `if/else` في JavaScript. إنها ليست قوية تماما مثل تعبيرات `if/else` التقليدية، لكنها تحظى بشعبية كبيرة بين مطوري React. أحد أسباب هذا هو بسبب كيفية تجميع JSX، أن `if/else` البيانات لا يمكن إدراجها قاصدًا في تعليمات البرمجية JSX. ربما كنت قد لاحظت هذا في تحديين السابقين - عندما يكون تعبير `if/else` مطلوب، كان دائماً *خارج* كلمة `return`. Ternary expressions يمكن أن تكون بديلا ممتازا إذا كنت تريد تنفيذ المنطق الشرط (conditional logic) داخل JSX. تذكر أن ternary operator له ثلاث أجزاء، ولكن يمكنك الجمع بين عدة ternary expressions. إليك الجملة الأساسية:
+
+```jsx
+condition ? expressionIfTrue : expressionIfFalse;
+```
+
+# --instructions--
+
+يحتوي محرر التعليمات البرمجية على ثلاث ثوابت تُعرف في مكون `CheckUserAge` داخل طريقة `render()`. يطلق عليهم `buttonOne`, و `buttonTwo`, و `buttonThree`. يتم تعيين كل من هذه عبارة JSX بسيطة تمثل عنصر الزر (button). أولا، تهيئة حالة `CheckUserAge` مع `input` و `userAge` وكلاهما مجموعة string بقيم فارغة.
+
+وبمجرد أن يقدم المكون المعلومات إلى الصفحة، ينبغي أن يكون لدى المستخدمين طريقة للتفاعل معها. ضمن تعبير `return` للمكون، أنشئ ternary expression يطبق المنطق التالي: عند تحميل الصفحة أول مرة، يعرض زر الإرسال (submit button)، باسم `buttonOne`، إلى الصفحة. بعد ذلك، عندما يدخل المستخدم عمره وينقر على الزر، ينتج زر مختلف تبعاً لعمره. إذا دخل المستخدم رقماً أقل من `18`، أنشئ `buttonThree`. إذا دخل المستخدم رقما أكبر من أو يساوي `18`، أنشئ `buttonTwo`.
+
+# --hints--
+
+أنشئ المكون `CheckUserAge` مع عنصر واحد `input` وعنصر `button` واحد.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('input')
+    .length === 1 &&
+    Enzyme.mount(React.createElement(CheckUserAge)).find('div').find('button')
+      .length === 1
+);
+```
+
+يجب تهيئة حالة المكون `CheckUserAge` بخاصية `userAge` وخاصية `input`، كل منما يحمل string بقيمة فارغة.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(CheckUserAge)).state().input === '' &&
+    Enzyme.mount(React.createElement(CheckUserAge)).state().userAge === ''
+);
+```
+
+عندما يتم تسليم المكون `CheckUserAge` أول مرة إلى DOM، يجب إرسال نص `button` الداخلي.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(CheckUserAge)).find('button').text() ===
+    'Submit'
+);
+```
+
+عندما يتم إدخال عدد من أقل من 18 في عنصر `input` ويتم النقر على `button`، يجب أن يكون النص `button` الداخلي بقيمة `You Shall Not Pass`.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge));
+  const initialButton = mockedComponent.find('button').text();
+  const enter3AndClickButton = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: '3' } });
+    mockedComponent.find('button').simulate('click');
+    mockedComponent.update();
+    return mockedComponent.find('button').text();
+  };
+  const enter17AndClickButton = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: '17' } });
+    mockedComponent.find('button').simulate('click');
+    mockedComponent.update();
+    return mockedComponent.find('button').text();
+  };
+  const userAge3 = enter3AndClickButton();
+  const userAge17 = enter17AndClickButton();
+  assert(
+    initialButton === 'Submit' &&
+      userAge3 === 'You Shall Not Pass' &&
+      userAge17 === 'You Shall Not Pass'
+  );
+})();
+```
+
+عندما يتم إدخال عدد من أكبر أو يساوي 18 في عنصر `input` ويتم النقر على `button`، يجب أن يكون النص `button` الداخلي بقيمة `You May Enter`.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge));
+  const initialButton = mockedComponent.find('button').text();
+  const enter18AndClickButton = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: '18' } });
+    mockedComponent.find('button').simulate('click');
+    mockedComponent.update();
+    return mockedComponent.find('button').text();
+  };
+  const enter35AndClickButton = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: '35' } });
+    mockedComponent.find('button').simulate('click');
+    mockedComponent.update();
+    return mockedComponent.find('button').text();
+  };
+  const userAge18 = enter18AndClickButton();
+  const userAge35 = enter35AndClickButton();
+  assert(
+    initialButton === 'Submit' &&
+      userAge18 === 'You May Enter' &&
+      userAge35 === 'You May Enter'
+  );
+})();
+```
+
+حالما يتم إرسال رَقَم، ويتم مرة أخرى تغيير قيمة `input`، يجب أن ينشئ `button` نص حسب قراءة `Submit`.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(CheckUserAge));
+  const enter18AndClickButton = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: '18' } });
+    mockedComponent.find('button').simulate('click');
+    mockedComponent.update();
+    return mockedComponent.find('button').text();
+  };
+  const changeInputDontClickButton = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: '5' } });
+    mockedComponent.update();
+    return mockedComponent.find('button').text();
+  };
+  const enter10AndClickButton = () => {
+    mockedComponent
+      .find('input')
+      .simulate('change', { target: { value: '10' } });
+    mockedComponent.find('button').simulate('click');
+    mockedComponent.update();
+    return mockedComponent.find('button').text();
+  };
+  const userAge18 = enter18AndClickButton();
+  const changeInput1 = changeInputDontClickButton();
+  const userAge10 = enter10AndClickButton();
+  const changeInput2 = changeInputDontClickButton();
+  assert(
+    userAge18 === 'You May Enter' &&
+      changeInput1 === 'Submit' &&
+      userAge10 === 'You Shall Not Pass' &&
+      changeInput2 === 'Submit'
+  );
+})();
+```
+
+يجب ألا يحتوي تعليماتك البرمجية على أي تعبيرات `if/else`.
+
+```js
+assert(
+  new RegExp(/(\s|;)if(\s|\()/).test(
+    code
+  ) === false
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<CheckUserAge />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+const inputStyle = {
+  width: 235,
+  margin: 5
+};
+
+class CheckUserAge extends React.Component {
+  constructor(props) {
+    super(props);
+    // Change code below this line
+
+    // Change code above this line
+    this.submit = this.submit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(e) {
+    this.setState({
+      input: e.target.value,
+      userAge: ''
+    });
+  }
+  submit() {
+    this.setState(state => ({
+      userAge: state.input
+    }));
+  }
+  render() {
+    const buttonOne = <button onClick={this.submit}>Submit</button>;
+    const buttonTwo = <button>You May Enter</button>;
+    const buttonThree = <button>You Shall Not Pass</button>;
+    return (
+      <div>
+        <h3>Enter Your Age to Continue</h3>
+        <input
+          style={inputStyle}
+          type='number'
+          value={this.state.input}
+          onChange={this.handleChange}
+        />
+        <br />
+        {/* Change code below this line */}
+
+        {/* Change code above this line */}
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+const inputStyle = {
+  width: 235,
+  margin: 5
+};
+
+class CheckUserAge extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userAge: '',
+      input: ''
+    };
+    this.submit = this.submit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleChange(e) {
+    this.setState({
+      input: e.target.value,
+      userAge: ''
+    });
+  }
+  submit() {
+    this.setState(state => ({
+      userAge: state.input
+    }));
+  }
+  render() {
+    const buttonOne = <button onClick={this.submit}>Submit</button>;
+    const buttonTwo = <button>You May Enter</button>;
+    const buttonThree = <button>You Shall Not Pass</button>;
+    return (
+      <div>
+        <h3>Enter Your Age to Continue</h3>
+        <input
+          style={inputStyle}
+          type='number'
+          value={this.state.input}
+          onChange={this.handleChange}
+        />
+        <br />
+        {this.state.userAge === ''
+          ? buttonOne
+          : this.state.userAge >= 18
+          ? buttonTwo
+          : buttonThree}
+      </div>
+    );
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-advanced-javascript-in-react-render-method.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-advanced-javascript-in-react-render-method.md
new file mode 100644
index 00000000000..3d9d768eb9c
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-advanced-javascript-in-react-render-method.md
@@ -0,0 +1,334 @@
+---
+id: 5a24c314108439a4d4036183
+title: استخدام JavaScript المتقدمة في طريقة React Render
+challengeType: 6
+forumTopicId: 301415
+dashedName: use-advanced-javascript-in-react-render-method
+---
+
+# --description--
+
+في التحديات السابقة، تعلمت كيفية حقن تعليمات JavaScript البرمجية في تعليمات JSX البرمجية باستخدام الأقواس المنحنية، `{ }`، للمهام مثل الوصول إلى مِيزات، وتمرير مِيزات، والوصول إلى الحالة، وإدراج التعليقات في الكود الخاص بك، ومؤخراً تصميم المكونات الخاصة بك. هذا كلها حالات استخدام شائعة لوضع JavaScript في JSX، لكنهم ليسوا الطريقة الوحيدة التي يمكنك بها استخدام تعلميات JavaScript البرمجية في مكونات React الخاصة بك.
+
+يمكنك أيضًا كتابة JavaScript قاصدًا في طرق `render` الخاصة بك، قبل بيان `return`، و***دون*** إدراجه داخل أقواس منحنية (curly braces). هذا لأنه ليس ضمن تعلميات JSX البرمجية. عندما تريد استخدام متغير في وقت لاحق في تعليمات JSX البرمجية *داخل* بيان `return`، ضع اسم المتغير داخل الأقواس المنحنية (curly braces).
+
+# --instructions--
+
+في التعليمات البرمجية المقدمة، طريقة `render` تحتوي على مصفوفة التي تحتوي على 20 عبارة لتمثيل الإجابات الموجودة في لُعْبَة Magic Eight Ball toy بالثمانينيات. أن حدث النقر فوق الزر مرتبط بطريقة `ask` لذلك في كل مرة يتم النقر على الزر سيتم إنشاء رَقَم عشوائي وتخزينه كمؤشر في الحالة `randomIndex`. في السطر 52، حذف string بقيمة `change me!` وإعادة تعيين `answer` حتى تصل التعليمات البرمجية الخاصة بك عشوائيا إلى ترتيب مختلف في مصفوفة `possibleAnswers` كل مرة يتم فيها تحديث المكون. أخيرا، أدخل ثابت `answer` داخل العلامات `p`.
+
+# --hints--
+
+يجب أن يكون مكون `MagicEightBall` موجوداً وأن يُنتج في الصفحة.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(MagicEightBall)).find('MagicEightBall')
+    .length,
+  1
+);
+```
+
+عنصر `MagicEightBall` الفرعي الأول يجب أن يكون عنصر `input`.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(MagicEightBall))
+    .children()
+    .childAt(0)
+    .name(),
+  'input'
+);
+```
+
+عنصر `MagicEightBall` الفرعي الثالث يجب أن يكون عنصر `button`.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(MagicEightBall))
+    .children()
+    .childAt(2)
+    .name(),
+  'button'
+);
+```
+
+يجب تهيئة حالة `MagicEightBall` بخاصية `userInput` وخاصية `randomIndex` وكلاهما مجموعة إلى قيمة string فارغة.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MagicEightBall)).state('randomIndex') ===
+    '' &&
+    Enzyme.mount(React.createElement(MagicEightBall)).state('userInput') === ''
+);
+```
+
+عندما يتم تحميل `MagicEightBall` أول مرة إلى DOM، يجب أن يعود عنصر `p` فارغ.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(MagicEightBall)).find('p').length === 1 &&
+    Enzyme.mount(React.createElement(MagicEightBall)).find('p').text() === ''
+);
+```
+
+عندما يتم إدخال النص في عنصر `input` ويتم النقر على الزر، يجب أن ينتج مكون `MagicEightBall` عنصر `p` الذي يحتوي على عنصر عشوائي من قائمة `possibleAnswers`.
+
+```js
+(() => {
+  const comp = Enzyme.mount(React.createElement(MagicEightBall));
+  const simulate = () => {
+    comp.find('input').simulate('change', { target: { value: 'test?' } });
+    comp.find('button').simulate('click');
+  };
+  const result = () => comp.find('p').text();
+  const _1 = () => {
+    simulate();
+    return result();
+  };
+  const _2 = () => {
+    simulate();
+    return result();
+  };
+  const _3 = () => {
+    simulate();
+    return result();
+  };
+  const _4 = () => {
+    simulate();
+    return result();
+  };
+  const _5 = () => {
+    simulate();
+    return result();
+  };
+  const _6 = () => {
+    simulate();
+    return result();
+  };
+  const _7 = () => {
+    simulate();
+    return result();
+  };
+  const _8 = () => {
+    simulate();
+    return result();
+  };
+  const _9 = () => {
+    simulate();
+    return result();
+  };
+  const _10 = () => {
+    simulate();
+    return result();
+  };
+  const _1_val = _1();
+  const _2_val = _2();
+  const _3_val = _3();
+  const _4_val = _4();
+  const _5_val = _5();
+  const _6_val = _6();
+  const _7_val = _7();
+  const _8_val = _8();
+  const _9_val = _9();
+  const _10_val = _10();
+  const actualAnswers = [
+    _1_val,
+    _2_val,
+    _3_val,
+    _4_val,
+    _5_val,
+    _6_val,
+    _7_val,
+    _8_val,
+    _9_val,
+    _10_val
+  ];
+  const hasIndex = actualAnswers.filter(
+    (answer, i) => possibleAnswers.indexOf(answer) !== -1
+  );
+  const notAllEqual = new Set(actualAnswers);
+  assert(notAllEqual.size > 1 && hasIndex.length === 10);
+})();
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+var possibleAnswers = [
+  'It is certain',
+  'It is decidedly so',
+  'Without a doubt',
+  'Yes, definitely',
+  'You may rely on it',
+  'As I see it, yes',
+  'Outlook good',
+  'Yes',
+  'Signs point to yes',
+  'Reply hazy try again',
+  'Ask again later',
+  'Better not tell you now',
+  'Cannot predict now',
+  'Concentrate and ask again',
+  "Don't count on it",
+  'My reply is no',
+  'My sources say no',
+  'Outlook not so good',
+  'Very doubtful',
+  'Most likely'
+];
+ReactDOM.render(<MagicEightBall />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+const inputStyle = {
+  width: 235,
+  margin: 5
+};
+
+class MagicEightBall extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userInput: '',
+      randomIndex: ''
+    };
+    this.ask = this.ask.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  ask() {
+    if (this.state.userInput) {
+      this.setState({
+        randomIndex: Math.floor(Math.random() * 20),
+        userInput: ''
+      });
+    }
+  }
+  handleChange(event) {
+    this.setState({
+      userInput: event.target.value
+    });
+  }
+  render() {
+    const possibleAnswers = [
+      'It is certain',
+      'It is decidedly so',
+      'Without a doubt',
+      'Yes, definitely',
+      'You may rely on it',
+      'As I see it, yes',
+      'Outlook good',
+      'Yes',
+      'Signs point to yes',
+      'Reply hazy try again',
+      'Ask again later',
+      'Better not tell you now',
+      'Cannot predict now',
+      'Concentrate and ask again',
+      "Don't count on it",
+      'My reply is no',
+      'My sources say no',
+      'Most likely',
+      'Outlook not so good',
+      'Very doubtful'
+    ];
+    const answer = 'change me!'; // Change this line
+    return (
+      <div>
+        <input
+          type='text'
+          value={this.state.userInput}
+          onChange={this.handleChange}
+          style={inputStyle}
+        />
+        <br />
+        <button onClick={this.ask}>Ask the Magic Eight Ball!</button>
+        <br />
+        <h3>Answer:</h3>
+        <p>
+          {/* Change code below this line */}
+
+          {/* Change code above this line */}
+        </p>
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+const inputStyle = {
+  width: 235,
+  margin: 5
+};
+
+class MagicEightBall extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      userInput: '',
+      randomIndex: ''
+    };
+    this.ask = this.ask.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  ask() {
+    if (this.state.userInput) {
+      this.setState({
+        randomIndex: Math.floor(Math.random() * 20),
+        userInput: ''
+      });
+    }
+  }
+  handleChange(event) {
+    this.setState({
+      userInput: event.target.value
+    });
+  }
+  render() {
+    const possibleAnswers = [
+      'It is certain',
+      'It is decidedly so',
+      'Without a doubt',
+      'Yes, definitely',
+      'You may rely on it',
+      'As I see it, yes',
+      'Outlook good',
+      'Yes',
+      'Signs point to yes',
+      'Reply hazy try again',
+      'Ask again later',
+      'Better not tell you now',
+      'Cannot predict now',
+      'Concentrate and ask again',
+      "Don't count on it",
+      'My reply is no',
+      'My sources say no',
+      'Outlook not so good',
+      'Very doubtful',
+      'Most likely'
+    ];
+    const answer = possibleAnswers[this.state.randomIndex];
+    return (
+      <div>
+        <input
+          type='text'
+          value={this.state.userInput}
+          onChange={this.handleChange}
+          style={inputStyle}
+        />
+        <br />
+        <button onClick={this.ask}>Ask the Magic Eight Ball!</button>
+        <br />
+        <h3>Answer:</h3>
+        <p>{answer}</p>
+      </div>
+    );
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-array.filter-to-dynamically-filter-an-array.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-array.filter-to-dynamically-filter-an-array.md
new file mode 100644
index 00000000000..7e671a57659
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-array.filter-to-dynamically-filter-an-array.md
@@ -0,0 +1,236 @@
+---
+id: 5a24c314108439a4d403618c
+title: استخدام Array.filter() لتصفية القائمة (Array) ديناميكياً
+challengeType: 6
+forumTopicId: 301416
+dashedName: use-array-filter-to-dynamically-filter-an-array
+---
+
+# --description--
+
+طريقة `map` للقائمة هي أداة قوية سوف تستخدمها غالبا عند العمل مع React. طريقة أخرى ذات صلة `map` هي `filter`، الذي تصفي محتويات القائمة على أساس شرط ما، ثم يعيد قائمة جديدة. على سبيل المثال إذا كان لديك مجموعة من المستخدمين الذين لديهم جميعا خاصية `online` التي يمكن تعيينها إلى `true` أو `false`، يمكنك تصفية فقط للمستخدمين الذين هم على الإنترنت عن طريق الكتابة:
+
+```js
+let onlineUsers = users.filter(user => user.online);
+```
+
+# --instructions--
+
+في محرر التعليمات البرمجية، تم تهيئة `MyComponent` في `state` تحمل قائمة من المستخدمين. بعض المستخدمين على الإنترنت وبعضهم لا يفعل ذلك. تصفية القائمة بحيث ترى فقط المستخدمين الذين هم على الإنترنت. للقيام بذلك، أولاً استخدم `filter` لإرجاع قائمة جديدة تحتوي فقط على المستخدمين الذين خاصية `online` بقيمة `true`. ثم في متغير `renderOnline` تعيين (map) القائمة المصفى، و إرجاع عنصر `li` لكل مستخدم يحتوي على نص `username` الخاص به. تحقق تضمين `key` فريد أيضا، مثل التحديات السابقة.
+
+# --hints--
+
+`MyComponent` يجب أن يكون موجودا وأن يقدم إلى الصفحة.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(MyComponent)).find('MyComponent').length,
+  1
+);
+```
+
+يجب تهيئة حالة `MyComponent` لقائمة من المستخدمين الستة.
+
+```js
+assert(
+  Array.isArray(
+    Enzyme.mount(React.createElement(MyComponent)).state('users')
+  ) === true &&
+    Enzyme.mount(React.createElement(MyComponent)).state('users').length === 6
+);
+```
+
+`MyComponent` يجب أن ينتج `div`، و`h1`، ومن ثم قائمة غير مرتبة تحتوي على `li` لكل مستخدم تم تعيين حالته على الإنترنت بقيمة `true`.
+
+```js
+(() => {
+  const comp = Enzyme.mount(React.createElement(MyComponent));
+  const users = (bool) => ({
+    users: [
+      { username: 'Jeff', online: bool },
+      { username: 'Alan', online: bool },
+      { username: 'Mary', online: bool },
+      { username: 'Jim', online: bool },
+      { username: 'Laura', online: bool }
+    ]
+  });
+  const result = () => comp.find('li').length;
+  const _1 = result();
+  const _2 = () => {
+    comp.setState(users(true));
+    return result();
+  };
+  const _3 = () => {
+    comp.setState(users(false));
+    return result();
+  };
+  const _4 = () => {
+    comp.setState({ users: [] });
+    return result();
+  };
+  const _2_val = _2();
+  const _3_val = _3();
+  const _4_val = _4();
+  assert(
+    comp.find('div').length === 1 &&
+      comp.find('h1').length === 1 &&
+      comp.find('ul').length === 1 &&
+      _1 === 4 &&
+      _2_val === 5 &&
+      _3_val === 0 &&
+      _4_val === 0
+  );
+})();
+```
+
+يجب أن ينتج `MyComponent` عناصر `li` التي يحتوي على `username` لكل مستخدم على الإنترنت.
+
+```js
+(() => {
+  const comp = Enzyme.mount(React.createElement(MyComponent));
+  const users = (bool) => ({
+    users: [
+      { username: 'Jeff', online: bool },
+      { username: 'Alan', online: bool },
+      { username: 'Mary', online: bool },
+      { username: 'Jim', online: bool },
+      { username: 'Laura', online: bool }
+    ]
+  });
+  const ul = () => {
+    comp.setState(users(true));
+    return comp.find('ul').html();
+  };
+  const html = ul();
+  assert(
+    html ===
+      '<ul><li>Jeff</li><li>Alan</li><li>Mary</li><li>Jim</li><li>Laura</li></ul>'
+  );
+})();
+```
+
+يجب أن يكون لكل عنصر من عناصر القائمة خاصية `key` فريدة.
+
+```js
+assert(
+  (() => {
+    const ul = Enzyme.mount(React.createElement(MyComponent)).find('ul');
+    console.log(ul.debug());
+    const keys = new Set([
+      ul.childAt(0).key(),
+      ul.childAt(1).key(),
+      ul.childAt(2).key(),
+      ul.childAt(3).key()
+    ]);
+    return keys.size === 4;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      users: [
+        {
+          username: 'Jeff',
+          online: true
+        },
+        {
+          username: 'Alan',
+          online: false
+        },
+        {
+          username: 'Mary',
+          online: true
+        },
+        {
+          username: 'Jim',
+          online: false
+        },
+        {
+          username: 'Sara',
+          online: true
+        },
+        {
+          username: 'Laura',
+          online: true
+        }
+      ]
+    };
+  }
+  render() {
+    const usersOnline = null; // Change this line
+    const renderOnline = null; // Change this line
+    return (
+      <div>
+        <h1>Current Online Users:</h1>
+        <ul>{renderOnline}</ul>
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      users: [
+        {
+          username: 'Jeff',
+          online: true
+        },
+        {
+          username: 'Alan',
+          online: false
+        },
+        {
+          username: 'Mary',
+          online: true
+        },
+        {
+          username: 'Jim',
+          online: false
+        },
+        {
+          username: 'Sara',
+          online: true
+        },
+        {
+          username: 'Laura',
+          online: true
+        }
+      ]
+    };
+  }
+  render() {
+    const usersOnline = this.state.users.filter(user => {
+      return user.online;
+    });
+    const renderOnline = usersOnline.map(user => {
+      return <li key={user.username}>{user.username}</li>;
+    });
+    return (
+      <div>
+        <h1>Current Online Users:</h1>
+        <ul>{renderOnline}</ul>
+      </div>
+    );
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md
new file mode 100644
index 00000000000..8eea28ed63b
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-array.map-to-dynamically-render-elements.md
@@ -0,0 +1,265 @@
+---
+id: 5a24c314108439a4d403618a
+title: استخدام Array.map() لإنتاج عناصر ديناميكية
+challengeType: 6
+forumTopicId: 301417
+dashedName: use-array-map-to-dynamically-render-elements
+---
+
+# --description--
+
+الإنتاج الشرطي (Conditional rendering) مفيد، لكنك قد تحتاج إلى مكوناتك لإنتاج عدد غير معروف من العناصر. في كثير من الأحيان في البرمجة التفاعلية، لا يملك المبرمج طريقة لمعرفة ما هي حالة التطبيق حتى وقت التشغيل، لأن الكثير يعتمد على تفاعل المستخدم مع ذلك البرنامَج. يحتاج المبرمجون إلى كتابة تعليماتهم البرمجية للتعامل بشكل صحيح مع تلك الحالة غير المعروفة مسبقاً. باستخدام `Array.map()` في React ستوضح هذا المفهوم.
+
+على سبيل المثال، يمكنك إنشاء تطبيق بسيط "To Do List". كمبرمج، ليس لديك أي طريقة لمعرفة عدد العناصر التي قد يكون لدى المستخدم في قائمته. تحتاج إلى إعداد المكون الخاص بك لإنتاج العدد الصحيح من عناصر القائمة بشكل ديناميكي, قبل أن يقرر شخص ما يستخدم البرنامَج أن اليوم هو يوم للتنظيف.
+
+# --instructions--
+
+يحتوي محرر التعليمات البرمجية على معظم مكون `MyToDoList` الذي تم إنشائه. بعض هذه التعليمات البرمجية تبدو مألوفة إذا قمت بملء تحدي النموذج الخاضع للتحكم (controlled form). ستلاحظ `textarea` و `button`، بالإضافة إلى بعض الطرق الذي تتتبع حالتهم، ولكن لا يوجد شيء حتى الآن في الصفحة.
+
+داخل `constructor`، أنشئ `this.state` الكائن وحدد حالتين: `userInput` يجب تهيئته مثل string فارغة، و `toDoList` يجب تهيئتها كقائمة فارغة. بعد ذلك، احذف قيمة `null` في طريقة `render()` بجانب متغير `items`. في مكانها، عين (map) القيم في القائمة `toDoList` المخزنة في الحالة الداخلية للمكون وتنتج `li` بشكل ديناميكي لكل عنصر. حاول إدخال string بقيمة `eat, code, sleep, repeat` في `textarea`, ثم انقر فوق الزر وشاهد ما يحدث.
+
+**ملاحظة:** قد تعلم أن جميع العناصر الفرعية الإخوة التي تم إنشاؤها بواسطة عملية تعيين مثل هذه تحتاج إلى تزويدها بخاصية `key` فريد. لا تقلق، هذا هو موضوع التحدي التالي.
+
+# --hints--
+
+يجب أن يكون مكون MyToDoList موجوداً وأن يُنتج في الصفحة.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
+    return mockedComponent.find('MyToDoList').length === 1;
+  })()
+);
+```
+
+أول عنصر فرعي لكل `MyToDoList` يجب أن يكون عنصر `textarea`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
+    return (
+      mockedComponent.find('MyToDoList').children().childAt(0).type() ===
+      'textarea'
+    );
+  })()
+);
+```
+
+ثاني عنصر فرعي لكل `MyToDoList` يجب أن يكون عنصر `br`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
+    return (
+      mockedComponent.find('MyToDoList').children().childAt(1).type() === 'br'
+    );
+  })()
+);
+```
+
+ثالث عنصر فرعي لكل `MyToDoList` يجب أن يكون عنصر `button`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
+    return (
+      mockedComponent.find('MyToDoList').children().childAt(2).type() ===
+      'button'
+    );
+  })()
+);
+```
+
+يجب تهيئة حالة `MyToDoList` مع `toDoList` كقائمة فارغة.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
+    const initialState = mockedComponent.state();
+    return (
+      Array.isArray(initialState.toDoList) === true &&
+      initialState.toDoList.length === 0
+    );
+  })()
+);
+```
+
+يجب تهيئة حالة `MyToDoList` مع `userInput` على شكل string فارغ.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
+    const initialState = mockedComponent.state();
+    return (
+      typeof initialState.userInput === 'string' &&
+      initialState.userInput.length === 0
+    );
+  })()
+);
+```
+
+عند النقر على زر `Create List`، عنصر `MyToDoList` يجب أن يعيد ديناميكيا قائمة غير مرتبة تحتوي على عنصر قائمة لكل عنصر من قائمة مفصولة بفواصل (comma-separated list) تم إدخاله في عنصر `textarea`.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(MyToDoList));
+  const simulateChange = (el, value) =>
+    el.simulate('change', { target: { value } });
+  const state_1 = () => {
+    return mockedComponent.find('ul').find('li');
+  };
+  const setInput = () => {
+    return simulateChange(
+      mockedComponent.find('textarea'),
+      'testA, testB, testC'
+    );
+  };
+  const click = () => {
+    return mockedComponent.find('button').simulate('click');
+  };
+  const state_2 = () => {
+    const nodes = mockedComponent.find('ul').find('li');
+    return { nodes, text: nodes.reduce((t, n) => t + n.text().trim(), '') };
+  };
+  const setInput_2 = () => {
+    return simulateChange(
+      mockedComponent.find('textarea'),
+      't1, t2, t3, t4, t5, t6'
+    );
+  };
+  const click_1 = () => {
+    return mockedComponent.find('button').simulate('click');
+  };
+  const state_3 = () => {
+    const nodes = mockedComponent.find('ul').find('li');
+    return { nodes, text: nodes.reduce((t, n) => t + n.text().trim(), '') };
+  };
+  const awaited_state_1 = state_1();
+  const awaited_setInput = setInput();
+  const awaited_click = click();
+  const awaited_state_2 = state_2();
+  const awaited_setInput_2 = setInput_2();
+  const awaited_click_1 = click_1();
+  const awaited_state_3 = state_3();
+  assert(
+    awaited_state_1.length === 0 &&
+      awaited_state_2.nodes.length === 3 &&
+      awaited_state_3.nodes.length === 6 &&
+      awaited_state_2.text === 'testAtestBtestC' &&
+      awaited_state_3.text === 't1t2t3t4t5t6'
+  );
+})();
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyToDoList />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+const textAreaStyles = {
+  width: 235,
+  margin: 5
+};
+
+class MyToDoList extends React.Component {
+  constructor(props) {
+    super(props);
+    // Change code below this line
+
+    // Change code above this line
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleSubmit() {
+    const itemsArray = this.state.userInput.split(',');
+    this.setState({
+      toDoList: itemsArray
+    });
+  }
+  handleChange(e) {
+    this.setState({
+      userInput: e.target.value
+    });
+  }
+  render() {
+    const items = null; // Change this line
+    return (
+      <div>
+        <textarea
+          onChange={this.handleChange}
+          value={this.state.userInput}
+          style={textAreaStyles}
+          placeholder='Separate Items With Commas'
+        />
+        <br />
+        <button onClick={this.handleSubmit}>Create List</button>
+        <h1>My "To Do" List:</h1>
+        <ul>{items}</ul>
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+const textAreaStyles = {
+  width: 235,
+  margin: 5
+};
+
+class MyToDoList extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      toDoList: [],
+      userInput: ''
+    };
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleChange = this.handleChange.bind(this);
+  }
+  handleSubmit() {
+    const itemsArray = this.state.userInput.split(',');
+    this.setState({
+      toDoList: itemsArray
+    });
+  }
+  handleChange(e) {
+    this.setState({
+      userInput: e.target.value
+    });
+  }
+  render() {
+    const items = this.state.toDoList.map((item, i) => {
+      return <li key={i}>{item}</li>;
+    });
+    return (
+      <div>
+        <textarea
+          onChange={this.handleChange}
+          value={this.state.userInput}
+          style={textAreaStyles}
+          placeholder='Separate Items With Commas'
+        />
+        <br />
+        <button onClick={this.handleSubmit}>Create List</button>
+        <h1>My "To Do" List:</h1>
+        <ul>{items}</ul>
+      </div>
+    );
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-default-props.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-default-props.md
new file mode 100644
index 00000000000..1ad2030e99a
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-default-props.md
@@ -0,0 +1,78 @@
+---
+id: 5a24c314108439a4d403616b
+title: استخدام الميزات الافتراضية (Default Props)
+challengeType: 6
+forumTopicId: 301418
+dashedName: use-default-props
+---
+
+# --description--
+
+React أيضا لديه خِيار لتعيين الميزات الافتراضية (default props). يمكنك تعيين الميزات الافتراضية (default props) للمكون كخاصية في المكون نفسه ويقوم React بتعيين الميزات الافتراضية (default props) إذا لزم الأمر. هذا يسمح لك بتحديد قيمة المِيزة إذا لم يتم تقديم قيمة قصداً. على سبيل المثال، إذا أعلنت `MyComponent.defaultProps = { location: 'San Francisco' }`، لقد عرفت مكان المِيزة التي تم تعيينه بشكل string بقيمة `San Francisco`، إذا لم تحدد خلاف ذلك. إعادة تعيين الميزات React الافتراضية إذا كانت الميزات غير معرفة (React)، ولكن إذا مررت `null` كقيمة للمِيزة، فسيبقى `null`.
+
+# --instructions--
+
+يعرض محرر التعليمات البرمجية مكون `ShoppingCart`. تحديد المِيزات الافتراضية في هذا المكون الذي تحدد مِيزة `items` بقيمة `0`.
+
+# --hints--
+
+يجب أن يقدم مكون `ShoppingCart`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
+    return mockedComponent.find('ShoppingCart').length === 1;
+  })()
+);
+```
+
+يجب أن يحتوي المكون `ShoppingCart` على مِيزة افتراضي من `{ items: 0 }`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
+    mockedComponent.setProps({ items: undefined });
+    return mockedComponent.find('ShoppingCart').props().items === 0;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const ShoppingCart = (props) => {
+  return (
+    <div>
+      <h1>Shopping Cart Component</h1>
+    </div>
+  )
+};
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+const ShoppingCart = (props) => {
+  return (
+    <div>
+      <h1>Shopping Cart Component</h1>
+    </div>
+  )
+};
+
+// Change code below this line
+ShoppingCart.defaultProps = {
+  items: 0
+}
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md
new file mode 100644
index 00000000000..2a5e18c3ae1
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-proptypes-to-define-the-props-you-expect.md
@@ -0,0 +1,132 @@
+---
+id: 5a24c314108439a4d403616d
+title: استخدام PropTypes لتعريف Props التي تتوقعها
+challengeType: 6
+forumTopicId: 301419
+dashedName: use-proptypes-to-define-the-props-you-expect
+---
+
+# --description--
+
+يوفر React ميزات مفيدة للتحقق من نوع المكونات تتلقى مِيزات من النوع الصحيح. على سبيل المثال، يقوم تطبيقك بإجراء مكالمة API لاسترداد البيانات التي تتوقع أن تكون في قائمة، ويحال بعد ذلك إلى مكون كمِيزة. يمكنك تعيين `propTypes` على المكون الخاص بك لطلب أن تكون البيانات من نوع `array`. وهذا سيظهر تحذيرا مفيدا عندما تكون البيانات من أي نوع آخر.
+
+يعدّ ممارسة أفضل لتعيين `propTypes` عندما تعرف نوع prop قبل الوقت. يمكنك تحديد خاصية `propTypes` لمكون بنفس الطريقة التي حددت بها `defaultProps`. فعل ذلك سيتحقق أن مِيزات من هُوِيَّة معينة موجود مع نوع مُعين. إليك مثال لطلب نوع `function` لمِيزة يسمى `handleClick`:
+
+```js
+MyComponent.propTypes = { handleClick: PropTypes.func.isRequired }
+```
+
+في المثال أعلاه، يقوم جزء `PropTypes.func` بالتحقق من أن `handleClick` تكون وظيفة. إضافة `isRequired` يخبر React أن `handleClick` هي خاصية مطلوبة لهذا العنصر. سترى تحذيرا إذا لم يتم توفير المِيزة. لاحظ أيضًا أن `func` تمثل `function`. من بين سبع أنواع بدائية من JavaScript، مثل `function` و `boolean` (مكتوبة على شكل `bool`) هي الدالتين الوحيدتين اللتين تستخدمان تهجئة غريبة. وبالإضافة إلى الأنواع البدائية، هناك أنواع أخرى متاحة. على سبيل المثال، يمكنك التحقق من أن مِيزة (prop) هو عنصر React. يرجى الرجوع إلى الوثائق <a href="https://reactjs.org/docs/typechecking-with-proptypes.html#proptypes" target="_blank" rel="noopener noreferrer nofollow"></a> لجميع الخيارات.
+
+**ملاحظة:** اعتبارا من React v15.5.0, يتم استيراد `PropTypes` بشكل مستقل من React، مثل هذا: `import PropTypes from 'prop-types';`
+
+# --instructions--
+
+حدد `propTypes` في مكون `Items` لتحصل `quantity` كميزة (prop) والتحقق من أنها من النوع `number`.
+
+# --hints--
+
+يجب أن يقدم مكون `ShoppingCart`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
+    return mockedComponent.find('ShoppingCart').length === 1;
+  })()
+);
+```
+
+يجب أن يقدم مكون `Items`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(ShoppingCart));
+    return mockedComponent.find('Items').length === 1;
+  })()
+);
+```
+
+يجب أن يتضمن المكون `Items` خاصية `propTypes` لتيقن من قيمة `quantity` والتأكد من أنها على شكل عدد.
+
+```js
+(getUserInput) =>
+  assert(
+    (function () {
+      const noWhiteSpace = __helpers.removeWhiteSpace(getUserInput('index'));
+      return (
+        noWhiteSpace.includes('quantity:PropTypes.number.isRequired') &&
+        noWhiteSpace.includes('Items.propTypes=')
+      );
+    })()
+  );
+```
+
+# --seed--
+
+## --before-user-code--
+
+```jsx
+var PropTypes = {
+  number: { isRequired: true }
+};
+```
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<ShoppingCart />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const Items = (props) => {
+  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
+};
+
+// Change code below this line
+
+// Change code above this line
+
+Items.defaultProps = {
+  quantity: 0
+};
+
+class ShoppingCart extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <Items />
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+const Items = (props) => {
+  return <h1>Current Quantity of Items in Cart: {props.quantity}</h1>
+};
+
+// Change code below this line
+Items.propTypes = {
+  quantity: PropTypes.number.isRequired
+};
+// Change code above this line
+
+Items.defaultProps = {
+  quantity: 0
+};
+
+class ShoppingCart extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return <Items />
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-react-to-render-nested-components.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-react-to-render-nested-components.md
new file mode 100644
index 00000000000..d9d39ba821f
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-react-to-render-nested-components.md
@@ -0,0 +1,150 @@
+---
+id: 5a24c314108439a4d4036165
+title: استخدام React لتقديم المكونات المتداخلة (Nested Components)
+challengeType: 6
+forumTopicId: 301420
+dashedName: use-react-to-render-nested-components
+---
+
+# --description--
+
+وأظهر التحدي السابق طريقة بسيطة لتكوين مكونين، ولكن هناك العديد من الطرق المختلفة التي يمكنك تكوين المكونات مع React.
+
+تكوين المكون هو أحد الميزات React القوية. عندما تعمل مع React، من المهم البَدْء بالتفكير في واجهة المستخدم الخاصة بك من حيث المكونات مثل مثال التطبيق في التحدي السابق. تقسم واجهة المستخدم الخاصة بك إلى أجزاء مشروع الأساسية، وهن القطع تصبح مكونات. هذا يساعد على فصل التعليمات البرمجية المسؤول عن واجهة المستخدم عن التعليمات البرمجية المسؤول عن التعامل مع منطق التطبيق الخاص بك. ويمكن أن يبسِّط بشكل كبير تطوير المشروعات المعقدة وصيانتها.
+
+# --instructions--
+
+هناك عنصران وظيفيان محددان في محرر التعليمات البرمجية، يسميان `TypesOfFruit` و `Fruits`. خذ مكون `TypesOfFruit` وإنشائه، أو *أدخاله* ضمن مكون `Fruits`. ثم خذ مكون `Fruits` وإدخاله ضمن مكون `TypesOfFood`. يجب أن تكون النتيجة مكون فرعي، متداخل داخل مكون الأساسي، يتم تداخله داخل مكون الأساسي خاص به!
+
+# --hints--
+
+يجب أن ينتج مكون `TypesOfFood` عنصر `div` واحد.
+
+```js
+assert(Enzyme.shallow(React.createElement(TypesOfFood)).type() === 'div');
+```
+
+يجب أن ينتج مكون `TypesOfFood` مكون `Fruits`.
+
+```js
+assert(
+  Enzyme.shallow(React.createElement(TypesOfFood)).props().children[1].type
+    .name === 'Fruits'
+);
+```
+
+يجب أن ينتج مكون `Fruits` المكون `TypesOfFruit`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(TypesOfFood)).find('h2').html() ===
+    '<h2>Fruits:</h2>'
+);
+```
+
+يجب أن يعيد مكون `TypesOfFruit` عناصر `h2` و `ul`.
+
+```js
+assert(
+  Enzyme.mount(React.createElement(TypesOfFood)).find('ul').text() ===
+    'ApplesBlueberriesStrawberriesBananas'
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<TypesOfFood />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+const TypesOfFruit = () => {
+  return (
+    <div>
+      <h2>Fruits:</h2>
+      <ul>
+        <li>Apples</li>
+        <li>Blueberries</li>
+        <li>Strawberries</li>
+        <li>Bananas</li>
+      </ul>
+    </div>
+  );
+};
+
+const Fruits = () => {
+  return (
+    <div>
+      { /* Change code below this line */ }
+
+      { /* Change code above this line */ }
+    </div>
+  );
+};
+
+class TypesOfFood extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Types of Food:</h1>
+        { /* Change code below this line */ }
+
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+const TypesOfFruit = () => {
+  return (
+    <div>
+      <h2>Fruits:</h2>
+      <ul>
+        <li>Apples</li>
+        <li>Blueberries</li>
+        <li>Strawberries</li>
+        <li>Bananas</li>
+      </ul>
+    </div>
+  );
+};
+
+const Fruits = () => {
+  return (
+    <div>
+      { /* Change code below this line */ }
+        <TypesOfFruit />
+      { /* Change code above this line */ }
+    </div>
+  );
+};
+
+class TypesOfFood extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+
+  render() {
+    return (
+      <div>
+        <h1>Types of Food:</h1>
+        { /* Change code below this line */ }
+        <Fruits />
+        { /* Change code above this line */ }
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-state-to-toggle-an-element.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-state-to-toggle-an-element.md
new file mode 100644
index 00000000000..7f5c1ccb069
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-state-to-toggle-an-element.md
@@ -0,0 +1,189 @@
+---
+id: 5a24c314108439a4d4036176
+title: استخدام الحالة (State) لتبديل العنصر
+challengeType: 6
+forumTopicId: 301421
+dashedName: use-state-to-toggle-an-element
+---
+
+# --description--
+
+في بعض الأحيان قد تحتاج إلى معرفة الحالة السابقة عند تحديث الحالة (state). ومع ذلك، قد تكون تعديلات الحالة غير متزامنة - وهذا يعني أن React قد إجراء مكالمات متعددة `setState()` في تحديث واحد. وهذا يعني أنه لا يمكنك الاعتماد على القيمة السابقة في `this.state` أو `this.props` عند حساب القيمة التالية. لذلك يجب ألا تستخدم التعليمات البرمجية مثل:
+
+```jsx
+this.setState({
+  counter: this.state.counter + this.props.increment
+});
+```
+
+بدلاً من ذلك، يجب عليك تمرير وظيفة `setState` تسمح لك بالوصول إلى الحالة ومِيزات. استخدام الحالة مع `setState` يضمن لك العمل مع أكثر القيم حداثة من الحالة والمِيزات. وهذا يعني أنه ينبغي إعادة كتابة ما ورد أعلاه على النحو التالي:
+
+```jsx
+this.setState((state, props) => ({
+  counter: state.counter + props.increment
+}));
+```
+
+يمكنك أيضًا استخدام نموذج دون `props` إذا كنت بحاجة فقط إلى `state`:
+
+```jsx
+this.setState(state => ({
+  counter: state.counter + 1
+}));
+```
+
+لاحظ أنه يجب عليك تغليف object literal بين قوسين، وإلا فإن JavaScript تعتقد أنها كتلة من التعليمات البرمجية.
+
+# --instructions--
+
+`MyComponent` لها خاصية `visibility` التي تم تهيئتها إلى `false`. تنتج طريقة العرض طريقة عرض واحدة إذا كانت قيمة `visibility` صحيحة، وعرضًا مختلفًا إذا كانت خاطئة (false).
+
+حاليا، لا توجد طريقة لتحديث خاصية `visibility` في المكون `state`. يجب أن تبديل القيمة ذهابا وإيابا بين الحقيقة (true) والخاطئة (false). هناك معالج ضغط على الزر الذي يشغل طريقة فئة تسمى `toggleVisibility()`. مرر الوظيفة إلى `setState` لتعريف هذه الطريقة بحيث تبديل `state` بقيمة `visibility` إلى القيمة المضادة عند تشغيل الطريقة. إذا كان `visibility` يكون `false`، فالطريقة تغيره إلى `true`، والعكس كذلك.
+
+وأخيراً، انقر على الزر لرؤية العرض المشروط (conditional rendering) للمكون استناداً إلى `state`.
+
+**تلميح:** لا تنس أن تربط الكلمة `this` بالطريقة في `constructor`!
+
+# --hints--
+
+يجب أن ينتج `MyComponent` عنصر `div` الذي يحتوي علامة `button`.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(MyComponent)).find('div').find('button')
+    .length,
+  1
+);
+```
+
+حالة `MyComponent` يجب أن تَبدء بخاصية `visibility` محددة إلى سلسلة `false`.
+
+```js
+assert.strictEqual(
+  Enzyme.mount(React.createElement(MyComponent)).state('visibility'),
+  false
+);
+```
+
+النقر على عنصر الزر يجب أن يغير خاصية `visibility` في الحالة بين `true` و `false`.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const first = () => {
+    mockedComponent.setState({ visibility: false });
+    return mockedComponent.state('visibility');
+  };
+  const second = () => {
+    mockedComponent.find('button').simulate('click');
+    return mockedComponent.state('visibility');
+  };
+  const third = () => {
+    mockedComponent.find('button').simulate('click');
+    return mockedComponent.state('visibility');
+  };
+  const firstValue = first();
+  const secondValue = second();
+  const thirdValue = third();
+  assert(!firstValue && secondValue && !thirdValue);
+})();
+```
+
+يجب تمرير وظيفة مجهولة (anonymous function) إلى `setState`.
+
+```js
+const paramRegex = '[a-zA-Z$_]\\w*(,[a-zA-Z$_]\\w*)?';
+assert(
+  new RegExp(
+    'this\\.setState\\((function\\(' +
+      paramRegex +
+      '\\){|([a-zA-Z$_]\\w*|\\(' +
+      paramRegex +
+      '\\))=>)'
+  ).test(__helpers.removeWhiteSpace(code))
+);
+```
+
+`this` يجب عدم استخدامه داخل `setState`
+
+```js
+assert(!/this\.setState\([^}]*this/.test(code));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visibility: false
+    };
+    // Change code below this line
+
+    // Change code above this line
+  }
+  // Change code below this line
+
+  // Change code above this line
+  render() {
+    if (this.state.visibility) {
+      return (
+        <div>
+          <button onClick={this.toggleVisibility}>Click Me</button>
+          <h1>Now you see me!</h1>
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <button onClick={this.toggleVisibility}>Click Me</button>
+        </div>
+      );
+    }
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      visibility: false
+    };
+    this.toggleVisibility = this.toggleVisibility.bind(this);
+  }
+  toggleVisibility() {
+    this.setState(state => ({
+      visibility: !state.visibility
+    }));
+  }
+  render() {
+    if (this.state.visibility) {
+      return (
+        <div>
+          <button onClick={this.toggleVisibility}>Click Me</button>
+          <h1>Now you see me!</h1>
+        </div>
+      );
+    } else {
+      return (
+        <div>
+          <button onClick={this.toggleVisibility}>Click Me</button>
+        </div>
+      );
+    }
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-the-lifecycle-method-componentdidmount.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-the-lifecycle-method-componentdidmount.md
new file mode 100644
index 00000000000..5d023cdd376
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-the-lifecycle-method-componentdidmount.md
@@ -0,0 +1,127 @@
+---
+id: 5a24c314108439a4d403617d
+title: أستخدام Lifecycle Method componentDidMount
+challengeType: 6
+forumTopicId: 301422
+dashedName: use-the-lifecycle-method-componentdidmount
+---
+
+# --description--
+
+يحتاج معظم مطوري الشبكة الإلكترونية في وقت ما، إلى استدعاء نقطة نهاية API لاسترداد البيانات. إذا كنت تستخدم React، من المهم معرفة أين تنفذ هذا الإجراء.
+
+أفضل ممارسة مع React هي إجراء مكالمات API أو أي مكالمات إلى الحاسب الألى (server) الخاص بك في طريقة lifecycle باسم `componentDidMount()`. ويدعى هذا الأسلوب بعد تركيب مكون في DOM. ستؤدي أي مكالمات إلى `setState()` إلى إنتاج عرض المكون الخاص بك. عند استدعاء API بهذه الطريقة، وتعيين حالتك بواسطة البيانات التي ينتجها API، سيتم تحديث تلقائياً بمجرد تلقي البيانات.
+
+# --instructions--
+
+هناك مكالمة API وهمية في `componentDidMount()`. عيّن الحالة بعد 2.5 ثانية لمحاكاة الاتصال بالحاسب ألى (server) لاسترداد البيانات. هذا المثال يطلب مجموع المستخدمين النشاطين الحاليين للموقع. في طريقة الإنشاء، تقدم قيمة `activeUsers` في `h1` بعد نص `Active Users:`. شاهد ما يحدث في النظرة، ولا تتردد في تغيير المهلة الزمنية لرؤية التأثيرات المختلفة.
+
+# --hints--
+
+`MyComponent` يجب أن يقدم عنصر `div` الذي يغلف علامة `h1`.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return (
+      mockedComponent.find('div').length === 1 &&
+      mockedComponent.find('h1').length === 1
+    );
+  })()
+);
+```
+
+يجب تحديث حالة المكون مع وظيفة timeout في `componentDidMount`.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return new RegExp('setTimeout(.|\n)+setState(.|\n)+activeUsers').test(
+      String(mockedComponent.instance().componentDidMount)
+    );
+  })()
+);
+```
+
+علامة `h1` يجب أن تعطي قيمة `activeUsers` من حالة `MyComponent`.
+
+```js
+(() => {
+  const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+  const first = () => {
+    mockedComponent.setState({ activeUsers: 1237 });
+    return mockedComponent.find('h1').text();
+  };
+  const second = () => {
+    mockedComponent.setState({ activeUsers: 1000 });
+    return mockedComponent.find('h1').text();
+  };
+  assert(new RegExp('1237').test(first()) && new RegExp('1000').test(second()));
+})();
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'));
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeUsers: null
+    };
+  }
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({
+        activeUsers: 1273
+      });
+    }, 2500);
+  }
+  render() {
+    return (
+      <div>
+        {/* Change code below this line */}
+        <h1>Active Users: </h1>
+        {/* Change code above this line */}
+      </div>
+    );
+  }
+}
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      activeUsers: null
+    };
+  }
+  componentDidMount() {
+    setTimeout(() => {
+      this.setState({
+        activeUsers: 1273
+      });
+    }, 2500);
+  }
+  render() {
+    return (
+      <div>
+        <h1>Active Users: {this.state.activeUsers}</h1>
+      </div>
+    );
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md
new file mode 100644
index 00000000000..1f5d2b46278
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/use-the-lifecycle-method-componentwillmount.md
@@ -0,0 +1,87 @@
+---
+id: 5a24c314108439a4d403617c
+title: أستخدام Lifecycle Method componentWillMount
+challengeType: 6
+forumTopicId: 301423
+dashedName: use-the-lifecycle-method-componentwillmount
+---
+
+# --description--
+
+لمكونات React عدة طرق مميزة تتيح فرصاً لعمل أفعال في نُقَط محددة من دورة حياة (lifecycle) أحد المكونات. هذه تسمى طرق دورة الحياة (lifecycle)، أو وظائف (hooks) دورة الحياة (lifecycle)، وتسمح بالتقاط المكونات في نُقَط زمنية معينة. ويمكن أن يحدث ذلك قبل أنتاجها، قبل تحديثهم، وقبل أن يتلقوا ميزات (props)، وقبل أن وقف التحميل (unmount)، وكذلك. فيما يلي قائمة ببعض طرق دورة الحياة (lifecycle) الرئيسة: `componentWillMount()` `componentDidMount()` `shouldComponentUpdate()` `componentDidUpdate()` `componentWillUnmount()` سوف تغطي الدروس العدّة التالية بعض حالات الاستخدام الأساسي لهذا طرق دورة الحياة (lifecycle).
+
+**ملاحظة:** سيتم تجاهل `componentWillMount` طريقة دورة الحياة (Lifecycle) في إصدار بعد نوع 16.X وإزالتها في الإصدار نوع 17. تعلم المزيد في هذه <a href="https://www.freecodecamp.org/news/how-to-safely-use-reacts-life-cycles-with-fiber-s-async-rendering-fd4469ebbd8f/" target="_blank" rel="noopener noreferrer nofollow">المقالة</a>
+
+# --instructions--
+
+يتم استدعاء طريقة `componentWillMount()` قبل طريقة `render()` عندما يتم تحميل مكون إلى DOM. سجل شيء ما إلى وحدة التحكم (console) داخل `componentWillMount()` - قد ترغب في فتح وحدة تحكم المتصفح (browser console) الخاصة بك لمشاهدة الناتج.
+
+# --hints--
+
+`MyComponent` يجب أن ينتج عنصر `div`.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.find('div').length === 1;
+  })()
+);
+```
+
+`console.log` يجب استدعاءه في `componentWillMount`.
+
+```js
+assert(
+  (function () {
+    const lifecycle = React.createElement(MyComponent)
+      .type.prototype.componentWillMount.toString()
+      .replace(/ /g, '');
+    return lifecycle.includes('console.log(');
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<MyComponent />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  componentWillMount() {
+    // Change code below this line
+
+    // Change code above this line
+  }
+  render() {
+    return <div />
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  componentWillMount() {
+    // Change code below this line
+    console.log('Component is mounting...');
+    // Change code above this line
+  }
+  render() {
+    return <div />
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/write-a-react-component-from-scratch.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/write-a-react-component-from-scratch.md
new file mode 100644
index 00000000000..3ab6022da1a
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/write-a-react-component-from-scratch.md
@@ -0,0 +1,84 @@
+---
+id: 5a24c314108439a4d4036168
+title: كتابة مكون React من الصفر
+challengeType: 6
+forumTopicId: 301424
+dashedName: write-a-react-component-from-scratch
+---
+
+# --description--
+
+الآن بعد أن تعلمت أساسيات JSX و المكونات React، حان الوقت لكتابة مكون بمفردك. مكونات React هي لبنات البناء الأساسية لتطبيقات React لذا من المهم أن تصبح مألوفة جداً بكتابتها. تذكر، مكون React النموذجي هو `class` من ES6 التي توسع `React.Component`. لديه طريقة عرض تنتج HTML (من JSX) أو `null`. وهذا هو الشكل الأساسي لمكون React. بمجرد أن تفهموا هذا جيداً، سوف تكون مستعداً لبدء بناء المزيد من مشروعات React المعقدة.
+
+# --instructions--
+
+تحديد الفئة `MyComponent` التي تمدد `React.Component`. طريقة التقديم يجب أن ينتج `div` الذي يحتوي على علامة `h1` مع النص: `My First React Component!` فيها. استخدم هذا النص بالضبط، الحالة وعلامات الترقيم مهمة. تيقن من الاتصال بالبناء للمكون (constructor) الخاص بك أيضا.
+
+قدم هذا المكون إلى DOM باستخدام `ReactDOM.render()`. هناك `div` مع `id='challenge-node'` متاح لك للاستخدام.
+
+# --hints--
+
+يجب أن يكون هناك مكون React يسمى `MyComponent`.
+
+```js
+(getUserInput) =>
+  assert(
+    __helpers
+      .removeWhiteSpace(getUserInput('index'))
+      .includes('classMyComponentextendsReact.Component{')
+  );
+```
+
+يجب أن يحتوي `MyComponent` على علامة `h1` مع النص `My First React Component!`, مهم الحالة وعلامات الترقيم.
+
+```js
+assert(
+  (function () {
+    const mockedComponent = Enzyme.mount(React.createElement(MyComponent));
+    return mockedComponent.find('h1').text() === 'My First React Component!';
+  })()
+);
+```
+
+`MyComponent` يجب أن يُنتج في DOM.
+
+```js
+assert(document.getElementById('challenge-node').childNodes.length === 1);
+```
+
+`MyComponent` يجب أن يكون لديه بناء (constructor) يتصل بطريقة `super` مع `props`.
+
+```js
+assert(
+  MyComponent.toString().includes('MyComponent(props)') &&
+    MyComponent.toString().includes('_super.call(this, props)')
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```jsx
+// Change code below this line
+```
+
+# --solutions--
+
+```jsx
+// Change code below this line
+class MyComponent extends React.Component {
+  constructor(props) {
+    super(props);
+  }
+  render() {
+    return (
+      <div>
+        <h1>My First React Component!</h1>
+      </div>
+    );
+  }
+};
+
+ReactDOM.render(<MyComponent />, document.getElementById('challenge-node'));
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/react/write-a-simple-counter.md b/curriculum/challenges/arabic/03-front-end-development-libraries/react/write-a-simple-counter.md
new file mode 100644
index 00000000000..a388a570e53
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/react/write-a-simple-counter.md
@@ -0,0 +1,146 @@
+---
+id: 5a24c314108439a4d4036177
+title: كتابة العداد (Counter) البسيط
+challengeType: 6
+forumTopicId: 301425
+dashedName: write-a-simple-counter
+---
+
+# --description--
+
+يمكنك تصميم حالة مكون أكثر تعقيداً عن طريق الجمع بين المفاهيم التي تم تغطيتها حتى الآن. هذه تشمل تهيئة `state`، كتابة الطرق الذي تعيّن `state`، وتعيين معالج النقر لتشغيل هذا الطرق.
+
+# --instructions--
+
+`Counter` يتتبع قيمة `count` في `state`. هناك زرين يستدعيان طرق `increment()` و `decrement()`. اكتب هذا الطرق (methods) بحيث يتم زيادة القيمة المقابلة أو تقسيمها بواسطة 1 عندما يتم النقر على الزر المناسب. وأيضا، قم بإنشاء طريقة `reset()` بحيث عندما يتم النقر على زر إعادة التعيين (reset)، يتم تعيين العد إلى 0.
+
+**ملاحظة:** تيقن من عدم تعديل اسم خاصية `className` في الأزرار. وتذكروا أيضا إضافة الارتباطات اللازمة للطرق المنشأة حديثا في البناء.
+
+# --hints--
+
+`Counter` يجب أن يعيد عنصر `div` الذي يحتوي على ثلاث أزرار مع محتوى النص في هذا الترتيب `Increment!`، و`Decrement!`، و`Reset`.
+
+```js
+assert(
+  (() => {
+    const mockedComponent = Enzyme.mount(React.createElement(Counter));
+    return (
+      mockedComponent.find('.inc').text() === 'Increment!' &&
+      mockedComponent.find('.dec').text() === 'Decrement!' &&
+      mockedComponent.find('.reset').text() === 'Reset'
+    );
+  })()
+);
+```
+
+يجب بدء حالة `Counter` بخاصية `count` بقيمة `0`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(Counter));
+assert(mockedComponent.find('h1').text() === 'Current Count: 0');
+```
+
+النقر على زر الزيادة (increment) يجب أن يزيد العد بمقدار `1`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(Counter));
+mockedComponent.find('.inc').simulate('click');
+assert(mockedComponent.find('h1').text() === 'Current Count: 1');
+```
+
+النقر على زر الخفض (decrement) يجب أن يخفض العد بمقدار `1`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(Counter));
+mockedComponent.find('.dec').simulate('click');
+assert(mockedComponent.find('h1').text() === 'Current Count: -1');
+```
+
+النقر على زر إعادة التعيين (reset) يجب إعادة تعيين العد إلى `0`.
+
+```js
+const mockedComponent = Enzyme.mount(React.createElement(Counter));
+mockedComponent.setState({ count: 5 });
+const currentCountElement = mockedComponent.find('h1');
+assert(currentCountElement.text() === 'Current Count: 5');
+mockedComponent.find('.reset').simulate('click');
+assert(currentCountElement.text() === 'Current Count: 0');
+```
+
+# --seed--
+
+## --after-user-code--
+
+```jsx
+ReactDOM.render(<Counter />, document.getElementById('root'))
+```
+
+## --seed-contents--
+
+```jsx
+class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: 0
+    };
+    // Change code below this line
+
+    // Change code above this line
+  }
+  // Change code below this line
+
+  // Change code above this line
+  render() {
+    return (
+      <div>
+        <button className='inc' onClick={this.increment}>Increment!</button>
+        <button className='dec' onClick={this.decrement}>Decrement!</button>
+        <button className='reset' onClick={this.reset}>Reset</button>
+        <h1>Current Count: {this.state.count}</h1>
+      </div>
+    );
+  }
+};
+```
+
+# --solutions--
+
+```jsx
+class Counter extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      count: 0
+    };
+  this.increment = this.increment.bind(this);
+ this.decrement = this.decrement.bind(this);
+ this.reset = this.reset.bind(this);
+ }
+  reset() {
+    this.setState({
+      count: 0
+    });
+  }
+  increment() {
+    this.setState(state => ({
+      count: state.count + 1
+    }));
+  }
+  decrement() {
+    this.setState(state => ({
+      count: state.count - 1
+    }));
+  }
+  render() {
+    return (
+      <div>
+        <button className='inc' onClick={this.increment}>Increment!</button>
+        <button className='dec' onClick={this.decrement}>Decrement!</button>
+        <button className='reset' onClick={this.reset}>Reset</button>
+        <h1>Current Count: {this.state.count}</h1>
+      </div>
+    );
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/combine-multiple-reducers.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/combine-multiple-reducers.md
new file mode 100644
index 00000000000..c8bf41194a0
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/combine-multiple-reducers.md
@@ -0,0 +1,175 @@
+---
+id: 5a24c314108439a4d4036154
+title: دمج Reducers المتعددة
+challengeType: 6
+forumTopicId: 301436
+dashedName: combine-multiple-reducers
+---
+
+# --description--
+
+عندما تبدأ حالة التطبيق الخاص بك في النمو أكثر تعقيدا، قد يكون من المغري تقسيم الحالة إلى قطع متعددة. بدلاً من ذلك، تذكر المبدأ الأول في Redux: كل حالة التطبيق موجودة في كائن حالة واحدة في المتجر (store). ولذلك، فإن Redux يوفر تركيبة reducer كحل لنموذج معقد للحالة. يمكنك تعريف مخفضات (reducers) متعددة للتعامل مع أجزاء مختلفة من حالة تطبيقك، ثم كون هذه المخفضات (reducers) معاً في مختصر أساسي واحد. يُمرر تقصير (reducer) أساسي إلى طريقة Redux باسم `createStore()`.
+
+من أجل السماح لنا بالجمع بين عدة مخفضات (reducers) معا، يوفر Redux طريقة `combineReducers()`. تَقبل هذه الطريقة الكائن كحجة تحدد فيها الخصائص التي تربط المفاتيح بوظائف مخفيضة (reducer) معينة. الاسم الذي تعطيه للهُوِيَّات (keys) سوف يستخدم بواسطة Redux كاسم للقطعة المرتبطة بالحالة (state).
+
+وعادة ما يكون من الممارسات الجيدة إنشاء تخفيض (reducer) لكل حالة من حالات التطبيق عندما تكون متميزة أو فريدة بطريقة ما. على سبيل المثال، في تطبيق أخذ ملاحظات مع توثيق المستخدم (user authentication)، يمكن لأحد المختصرات (reducer) التعامل مع التوثيق بينما يتعامل آخر مع النص ويلاحظ أن المستخدم إرساله. من أجل مثل التطبيق، قد نكتب طريقة `combineReducers()` مثل:
+
+```js
+const rootReducer = Redux.combineReducers({
+  auth: authenticationReducer,
+  notes: notesReducer
+});
+```
+
+الآن، سوف تحتوي هُوِيَّة على `notes` التي تحمل الحالة المرتبطة بملاحظاتنا ويعالجها `notesReducer` لدينا. هذه هي الطريقة التي يمكن بها تكوين وحدات خفض متعددة لإدارة حالة التطبيق الأكثر تعقيدا. في هذا المثال، ستكون الحالة المحتفظ بها في متجر Redux كائناً واحدًا يحتوي على خصائص `auth` و `notes`.
+
+# --instructions--
+
+هناك وظائف `counterReducer()` و `authReducer()` مقدمة في محرر التعليمات البرمجية، بالإضافة إلى متجر Redux. إنهاء كتابة وظيفة `rootReducer()` باستخدام طريقة `Redux.combineReducers()`. تعيين `counterReducer` لهُوِيَّة (key) تسمى `count` و `authReducer` لهُوِيَّة تسمى `auth`.
+
+# --hints--
+
+`counterReducer` يجب أن يزيد ويقلل قيمة `state`.
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState().count;
+    store.dispatch({ type: INCREMENT });
+    store.dispatch({ type: INCREMENT });
+    const firstState = store.getState().count;
+    store.dispatch({ type: DECREMENT });
+    const secondState = store.getState().count;
+    return firstState === initialState + 2 && secondState === firstState - 1;
+  })()
+);
+```
+
+يجب أن يغير `authReducer` مكون `state` بقيمة `authenticated` بين `true` و `false`.
+
+```js
+assert(
+  (function () {
+    store.dispatch({ type: LOGIN });
+    const loggedIn = store.getState().auth.authenticated;
+    store.dispatch({ type: LOGOUT });
+    const loggedOut = store.getState().auth.authenticated;
+    return loggedIn === true && loggedOut === false;
+  })()
+);
+```
+
+يجب أن يحتوي المتجر `state` على هُوِيَّتين: `count`، يحتوي على عدد، و `auth`، التي تحتوي على كائن. يجب أن يكون الكائن `auth` خاصية `authenticated`، التي تحتوي على منطق (boolean).
+
+```js
+assert(
+  (function () {
+    const state = store.getState();
+    return (
+      typeof state.auth === 'object' &&
+      typeof state.auth.authenticated === 'boolean' &&
+      typeof state.count === 'number'
+    );
+  })()
+);
+```
+
+يجب أن يكون وظيفة `rootReducer` تجمع `counterReducer` و `authReducer`.
+
+```js
+(getUserInput) =>
+  assert(
+    (function () {
+      const noWhiteSpace = __helpers.removeWhiteSpace(getUserInput('index'));
+      return (
+        typeof rootReducer === 'function' &&
+        noWhiteSpace.includes('Redux.combineReducers')
+      );
+    })()
+  );
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const INCREMENT = 'INCREMENT';
+const DECREMENT = 'DECREMENT';
+
+const counterReducer = (state = 0, action) => {
+  switch(action.type) {
+    case INCREMENT:
+      return state + 1;
+    case DECREMENT:
+      return state - 1;
+    default:
+      return state;
+  }
+};
+
+const LOGIN = 'LOGIN';
+const LOGOUT = 'LOGOUT';
+
+const authReducer = (state = {authenticated: false}, action) => {
+  switch(action.type) {
+    case LOGIN:
+      return {
+        authenticated: true
+      }
+    case LOGOUT:
+      return {
+        authenticated: false
+      }
+    default:
+      return state;
+  }
+};
+
+const rootReducer = // Define the root reducer here
+
+const store = Redux.createStore(rootReducer);
+```
+
+# --solutions--
+
+```js
+const INCREMENT = 'INCREMENT';
+const DECREMENT = 'DECREMENT';
+
+const counterReducer = (state = 0, action) => {
+  switch(action.type) {
+    case INCREMENT:
+      return state + 1;
+    case DECREMENT:
+      return state - 1;
+    default:
+      return state;
+  }
+};
+
+const LOGIN = 'LOGIN';
+const LOGOUT = 'LOGOUT';
+
+const authReducer = (state = {authenticated: false}, action) => {
+  switch(action.type) {
+    case LOGIN:
+      return {
+        authenticated: true
+      }
+    case LOGOUT:
+      return {
+        authenticated: false
+      }
+    default:
+      return state;
+  }
+};
+
+const rootReducer = Redux.combineReducers({
+  count: counterReducer,
+  auth: authReducer
+});
+
+const store = Redux.createStore(rootReducer);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/copy-an-object-with-object.assign.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/copy-an-object-with-object.assign.md
new file mode 100644
index 00000000000..0947d84dfa6
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/copy-an-object-with-object.assign.md
@@ -0,0 +1,133 @@
+---
+id: 5a24c314108439a4d403615b
+title: نسخ كائن (Object) من كائن (Object) معين
+challengeType: 6
+forumTopicId: 301437
+dashedName: copy-an-object-with-object-assign
+---
+
+# --description--
+
+في التحديات العدّة السابقة تعاملت مع القائمة، ولكن هناك طرق للمساعدة في دعم عدم قدرة الحالة على التغيير عندما تكون الحالة `object` أيضًا. أداة مفيدة للتعامل مع الكائنات هي فائدة `Object.assign()`. `Object.assign()` يأخذ كائن مستهدف و كائنات من المصدر و خرائط الخصائص من الكائنات من المصدر إلى الكائن المستهدف. أي خصائص مطابقة يتم الكتابة عليها بواسطة الخصائص الموجودة في الكائنات من المصدر. يستخدم هذا السلوك عادة لصنع نسخ ضحله (shallow) من الكائنات عن طريق تمرير كائن فارغ كالحجة الأولى, يتبعها الكائن (الكائنات) الذي تريد نسخه. إليك مثال:
+
+```js
+const newObject = Object.assign({}, obj1, obj2);
+```
+
+هذا ينشئ `newObject` يكون `object` جديد، يحتوي على الخصائص الموجودة حاليا في `obj1` و `obj2`.
+
+# --instructions--
+
+تم تعديل حالة Redux والإجراءات للتعامل مع `object` من أجل `state`. حرر التعليمات البرمجية لإنتاج كائن `state` جديدة للإجراءات مع نوع `ONLINE`، الذي تعيين خاصية `status` إلى خاصية `online`. حاول استخدام `Object.assign()` لإكمال التحدي.
+
+# --hints--
+
+يجب أن يكون متجر Redux موجوداً ويبدأ مع حالة تساوي الكائن باسم `defaultState` المعلن عنه في السطر 1 من التعليمات البرمجية.
+
+```js
+assert(
+  (function () {
+    const expectedState = {
+      user: 'CamperBot',
+      status: 'offline',
+      friends: '732,982',
+      community: 'freeCodeCamp'
+    };
+    const initialState = store.getState();
+    return DeepEqual(expectedState, initialState);
+  })()
+);
+```
+
+يجب أن يكون كلاً من `wakeUp` و `immutableReducer` وظائف (functions).
+
+```js
+assert(typeof wakeUp === 'function' && typeof immutableReducer === 'function');
+```
+
+إرسال إجراء من نوع `ONLINE` بتحديث قيمة حالة الخاصية `status` إلى `online` ولا ينبغي تغيير الحالة الأساسية.
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState();
+    const isFrozen = DeepFreeze(initialState);
+    store.dispatch({ type: 'ONLINE' });
+    const finalState = store.getState();
+    const expectedState = {
+      user: 'CamperBot',
+      status: 'online',
+      friends: '732,982',
+      community: 'freeCodeCamp'
+    };
+    return isFrozen && DeepEqual(finalState, expectedState);
+  })()
+);
+```
+
+`Object.assign` يجب أن تستخدم لإنتاج حالة جديدة.
+
+```js
+(getUserInput) => assert(getUserInput('index').includes('Object.assign'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const defaultState = {
+  user: 'CamperBot',
+  status: 'offline',
+  friends: '732,982',
+  community: 'freeCodeCamp'
+};
+
+const immutableReducer = (state = defaultState, action) => {
+  switch(action.type) {
+    case 'ONLINE':
+      // Don't mutate state here or the tests will fail
+      return
+    default:
+      return state;
+  }
+};
+
+const wakeUp = () => {
+  return {
+    type: 'ONLINE'
+  }
+};
+
+const store = Redux.createStore(immutableReducer);
+```
+
+# --solutions--
+
+```js
+const defaultState = {
+  user: 'CamperBot',
+  status: 'offline',
+  friends: '732,982',
+  community: 'freeCodeCamp'
+};
+
+const immutableReducer = (state = defaultState, action) => {
+  switch(action.type) {
+    case 'ONLINE':
+      return Object.assign({}, state, {
+        status: 'online'
+      });
+    default:
+      return state;
+  }
+};
+
+const wakeUp = () => {
+  return {
+    type: 'ONLINE'
+  }
+};
+
+const store = Redux.createStore(immutableReducer);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/create-a-redux-store.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/create-a-redux-store.md
new file mode 100644
index 00000000000..81aa64665c9
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/create-a-redux-store.md
@@ -0,0 +1,61 @@
+---
+id: 5a24c314108439a4d403614b
+title: إنشاء متجر Redux
+challengeType: 6
+forumTopicId: 301439
+dashedName: create-a-redux-store
+---
+
+# --description--
+
+Redux هو framework لإدارة الحالة التي يمكن استخدامه مع عدد من تكنولوجيات الشبكة الإلكترونية المختلفة، بما في ذلك React.
+
+في Redux، هناك كائن حالة (state) واحد مسؤول عن حالة تطبيقك بالكامل. هذا يعني إذا كان لديك تطبيق React يحتوي على عشرة مكونات، ولكل مكون حالته المحلية الخاصة به، سيتم تحديد حالة تطبيقك بالكامل من قبل كائن وحيد موجود في `store` فى Redux. هذا هو أول مبدأ هام يمكن فهمه عند تعلم Redux: متجر Redux هو المصدر الوحيد للحقيقة (single source of truth) عندما يتعلق الأمر بحالة (state) التطبيق.
+
+وهذا يعني أيضًا أنه في أي وقت يرغب أي جزء من تطبيقك في تحديث الحالة، **يجب أن يفعل ذلك** بواسطة متجر Redux. التدفق الأحادي الاتجاه للبيانات (unidirectional data flow) يجعل من الأسهل تتبع إدارة الحالة في تطبيقك.
+
+# --instructions--
+
+يكون `store` في Redux, كائن يحمل ويدير `state` في التطبيق. هناك طريقة تسمى `createStore()` في كائن Redux، الذي تستخدمه لإنشاء `store` في Redux. هذه الطريقة تستخدم وظيفة `reducer` كحجة مطلوبة. تتم تغطية وظيفة `reducer` في تحد لاحق، وقد تم تحديدها لك فعلًا في محرر التعليمات البرمجية. ببساطة تأخذ `state` كحجة و تنتج `state`.
+
+إعلان متغير `store` عيينه إلى طريقة `createStore()`، مرورا في `reducer` كحجة.
+
+**ملاحظة:** الكود في المحرر يستخدم بناء الجملة الافتراضي في ES6 لتهيئة هذه الحالة (reducer) للاحتفاظ بقيمة `5`. إذا لم تكن على دراية بالحجج الافتراضية (default arguments)، يمكنك الرجوع إلى قسم <a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/es6/set-default-parameters-for-your-functions" target="_blank" rel="noopener noreferrer nofollow">ES6 في المنهج الدراسي</a> الذي يغطي هذا الموضوع.
+
+# --hints--
+
+يجب أن يوجد متجر Redux.
+
+```js
+assert(typeof store.getState === 'function');
+```
+
+يجب أن يكون للمتجر Redux حالة بقيمة 5.
+
+```js
+assert(store.getState() === 5);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const reducer = (state = 5) => {
+  return state;
+}
+
+// Redux methods are available from a Redux object
+// For example: Redux.createStore()
+// Define the store here:
+```
+
+# --solutions--
+
+```js
+const reducer = (state = 5) => {
+  return state;
+}
+
+const store = Redux.createStore(reducer);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/define-a-redux-action.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/define-a-redux-action.md
new file mode 100644
index 00000000000..9f6b4d538e8
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/define-a-redux-action.md
@@ -0,0 +1,55 @@
+---
+id: 5a24c314108439a4d403614d
+title: تحديد إجراء Redux
+challengeType: 6
+forumTopicId: 301440
+dashedName: define-a-redux-action
+---
+
+# --description--
+
+وبما أن Redux هو framework لإدارة الحالة، فإن تحديث الحالة هو أحد مهامها الأساسية. في Redux، يتم تشغيل جميع تحديثات الحالة عن طريق إرسال الإجراءات (actions). الإجراء (action) هو ببساطة كائن JavaScript الذي يحتوي على معلومات حول إجراء حدث الذي وقع. يستقبل متجر Redux هذه العناصر الإجرائية (action)، ثم تحديث حالته وفقاً لذلك. وفي بعض الأحيان يحمل إجراء Redux أيضا بعض البيانات. على سبيل المثال، يحمل الإجراء (action) اسم مستخدم بعد تسجيل دخول المستخدم. في حين أن البيانات اختيارية، يجب أن تحمل الإجراءات خاصية `type` التي تحدد 'نوع' الإجراء الذي وقع.
+
+فكر إن الإجراءات Redux كمراسلين يسليمون معلومات عن الأحداث التي تقع في التطبيق الخاص بك فى متجر Redux. ثم يقوم المتجر بأعمال تحديث للحالة استناداً على الإجراء الذي وقع.
+
+# --instructions--
+
+كتابة إجراء Redux بسيط مثل الإعلان عن كائن ذو خاصية نوعية. إعلان كائن `action` وإعطائه خاصية `type` مجموعة إلى السلسلة `'LOGIN'`.
+
+# --hints--
+
+يجب أن يكون كائن `action` موجود.
+
+```js
+assert(
+  (function () {
+    return typeof action === 'object';
+  })()
+);
+```
+
+يجب أن يحتوي الكائن `action` على خاصية هُوِيَّة `type` بقيمة `LOGIN`.
+
+```js
+assert(
+  (function () {
+    return action.type === 'LOGIN';
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+// Define an action here:
+```
+
+# --solutions--
+
+```js
+const action = {
+  type: 'LOGIN'
+}
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/define-an-action-creator.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/define-an-action-creator.md
new file mode 100644
index 00000000000..fe8dd66e1d2
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/define-an-action-creator.md
@@ -0,0 +1,57 @@
+---
+id: 5a24c314108439a4d403614e
+title: تعريف منشئ إجراء (Action Creator)
+challengeType: 6
+forumTopicId: 301441
+dashedName: define-an-action-creator
+---
+
+# --description--
+
+بعد إنشاء الإجراء، الخطوة التالية هي إرسال الإجراء إلى متجر Redux حتى يتمكن من تحديث حالته. في Redux، يمكنك تعريف منشئي (creators) الإجراء لتحقيق هذا. مُنشئ الإجراء هو ببساطة وظيفة JavaScript التي ترجع إجراء. بعبارة أخرى، يقوم منشئو العمل بإنشاء كائنات تمثل أحداث الإجراء.
+
+# --instructions--
+
+تعريف وظيفة تسمى `actionCreator()` التي ترجع الكائن `action` عند استدعائه.
+
+# --hints--
+
+وظيفة `actionCreator` يجب أن تكون موجودة.
+
+```js
+assert(typeof actionCreator === 'function');
+```
+
+تشغيل وظيفة `actionCreator` يجب أن ينتج الكائن `action`.
+
+```js
+assert(typeof action === 'object');
+```
+
+يجب أن ينتج `action` خاصية هُوِيَّة باسم `type` بقيمة `LOGIN`.
+
+```js
+assert(action.type === 'LOGIN');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const action = {
+  type: 'LOGIN'
+}
+// Define an action creator here:
+```
+
+# --solutions--
+
+```js
+const action = {
+  type: 'LOGIN'
+}
+const actionCreator = () => {
+  return action;
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/dispatch-an-action-event.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/dispatch-an-action-event.md
new file mode 100644
index 00000000000..a12463e2bad
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/dispatch-an-action-event.md
@@ -0,0 +1,85 @@
+---
+id: 5a24c314108439a4d403614f
+title: أرسال حدث أجراء (Action Event)
+challengeType: 6
+forumTopicId: 301442
+dashedName: dispatch-an-action-event
+---
+
+# --description--
+
+طريقة `dispatch` هي ما تستخدمه لإرسال الإجراءات إلى متجر Redux. الاتصال بـ `store.dispatch()` ومرر القيمة الناتجة من منشئ الإجراءات لإرسال إجراء إلى المتجر.
+
+تذكر أن منشئي الإجراءات يرسلون كائنا له نوع من الخصائص يحدد الإجراء الذي وقع. ثم ترسل الطريقة dispatches كائن إجراء (action) إلى متجر Redux. استنادا إلى مثال التحدي السابق، الأسطر التالية متساويا، وكلاهما يرسل إجراء من نوع `LOGIN`:
+
+```js
+store.dispatch(actionCreator());
+store.dispatch({ type: 'LOGIN' });
+```
+
+# --instructions--
+
+متجر Redux في محرر التعليمات البرمجية لديه حالة تهيئة تحتوي على كائن يحتوي على `login` خاصية محددة حاليا إلى `false`. هناك أيضا منشئ عمل يسمى `loginAction()` الذي ينتج إجراء من نوع `LOGIN`. إرسال إجراء `LOGIN` إلى متجر Redux عن طريق الاتصال بطريقة `dispatch`، و اجتاز الإجراء الذي أنشأه `loginAction()`.
+
+# --hints--
+
+الاتصال بالوظيفة `loginAction` يجب أن يعيد كائن يحمل مجموعة الخصائص `type` من string باسم `LOGIN`.
+
+```js
+assert(loginAction().type === 'LOGIN');
+```
+
+يجب تهيئة المتجر مع كائن ذو خاصية `login` بقيمة `false`.
+
+```js
+assert(store.getState().login === false);
+```
+
+يجب استخدام طريقة `store.dispatch()` لإرسال إجراء من نوع `LOGIN`.
+
+```js
+(getUserInput) =>
+  assert(
+    (function () {
+      let noWhiteSpace = getUserInput('index').replace(/\s/g, '');
+      return (
+        noWhiteSpace.includes('store.dispatch(loginAction())') ||
+        noWhiteSpace.includes("store.dispatch({type: 'LOGIN'})") === true
+      );
+    })()
+  );
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const store = Redux.createStore(
+  (state = {login: false}) => state
+);
+
+const loginAction = () => {
+  return {
+    type: 'LOGIN'
+  }
+};
+
+// Dispatch the action here:
+```
+
+# --solutions--
+
+```js
+const store = Redux.createStore(
+  (state = {login: false}) => state
+);
+
+const loginAction = () => {
+  return {
+    type: 'LOGIN'
+  }
+};
+
+store.dispatch(loginAction());
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/get-state-from-the-redux-store.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/get-state-from-the-redux-store.md
new file mode 100644
index 00000000000..7299e3494c1
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/get-state-from-the-redux-store.md
@@ -0,0 +1,55 @@
+---
+id: 5a24c314108439a4d403614c
+title: احصل على الحالة (false) من متجر Redux
+challengeType: 6
+forumTopicId: 301443
+dashedName: get-state-from-the-redux-store
+---
+
+# --description--
+
+يوفر عنصر متجر Redux عدة طرق تسمح لك بالتفاعل معه. على سبيل المثال، يمكنك استرداد `state` الحالية, الموجودة في كائن متجر Redux باستخدام طريقة `getState()`.
+
+# --instructions--
+
+تم إعادة كتابة التعليمات البرمجية من التحدي السابق بشكل أكثر إيجازا في محرر التعليمات البرمجية. استخدم `store.getState()` لاسترداد `state` من `store`، وتعيين هذا إلى متغير جديد `currentState`.
+
+# --hints--
+
+يجب أن يكون للمتجر Redux حالة بقيمة 5 المبدئة.
+
+```js
+assert(store.getState() === 5);
+```
+
+يجب أن يكون المتغير `currentState` موجوداً ويجب تعيين الحالة (state) الحالية لمتجر Redux.
+
+```js
+(getUserInput) =>
+  assert(
+    currentState === 5 && getUserInput('index').includes('store.getState()')
+  );
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const store = Redux.createStore(
+  (state = 5) => state
+);
+
+// Change code below this line
+```
+
+# --solutions--
+
+```js
+const store = Redux.createStore(
+  (state = 5) => state
+);
+
+// Change code below this line
+const currentState = store.getState();
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/handle-an-action-in-the-store.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/handle-an-action-in-the-store.md
new file mode 100644
index 00000000000..4e1b0f042dc
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/handle-an-action-in-the-store.md
@@ -0,0 +1,108 @@
+---
+id: 5a24c314108439a4d4036150
+title: التعامل مع إجراء (Action) في المتجر (Store)
+challengeType: 6
+forumTopicId: 301444
+dashedName: handle-an-action-in-the-store
+---
+
+# --description--
+
+بعد إنشاء الإجراء وإرساله، يحتاج متجر Redux إلى معرفة كيفية الاستجابة لذلك الإجراء. هذه هي وظيفة `reducer`. تعدل التخفيضات (Reducers) في Redux الحالة التي تحدث كاستجابة للإجراءات. يأخذ `reducer` حجج `state` و `action`، و دائما ينتج `state` جديدة. من المهم أن نرى أن هذا هو الدور reducer **فقط**. وليس لها آثار جانبية - فهي لا تستدع نقطة نهاية API قط ولم تكن لها أي مفاجآت خفية. الخفض (reducer) هو ببساطة وظيفة خالصة تأخذ الحالة والإجراءات، ثم تنتج حالة جديدة.
+
+مبدأ رئيس آخر في Redux هو أن `state` مقروء فقط. بمعنى آخر، يجب أن الدالة `reducer` ينتج **دائما** إرجاع نسخة جديدة من `state` وعدم تعديل الحالة قاصدًا أبدا. Redux لا يفرض حالة غير قابلة للتغير، ولكن أنت مسؤول عن إنفاذه في تعليمات البرمجية وظائف الاختصار (reducer) الخاصة بك. ستمارس هذا في تحديات لاحقة.
+
+# --instructions--
+
+محرر التعليمات البرمجية لديه المثال السابق بالإضافة إلى بداية الوظائف `reducer` لك. قم بملء جسم الوظيفة `reducer` بحيث أنه إذا تلقى إجراء من نوع `'LOGIN'` فإنه يرجع كائن حالة مع `login` بقيمة `true`. خلاف ذلك، فإنه ينتج `state` الحالية. لاحظ أن `state` الحالية و `action` الذي تم إرساله يتم تمريره إلى المخفض (reducer)، حتى تتمكن من الوصول إلى نوع الإجراء قاصدًا مع `action.type`.
+
+# --hints--
+
+الاتصال بالوظيفة `loginAction` يجب أن يعيد كائن يحمل مجموعة الخصائص type من string باسم `LOGIN`.
+
+```js
+assert(loginAction().type === 'LOGIN');
+```
+
+يجب تهيئة المتجر مع كائن ذو خاصية `login` بقيمة `false`.
+
+```js
+assert(store.getState().login === false);
+```
+
+إرسال `loginAction` يجب أن تحديث خاصية `login` في حالة المتجر إلى `true`.
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState();
+    store.dispatch(loginAction());
+    const afterState = store.getState();
+    return initialState.login === false && afterState.login === true;
+  })()
+);
+```
+
+إذا لم يكن الإجراء من نوع `LOGIN`، يجب على المتجر أن يعيد الحالة الحالية.
+
+```js
+assert(
+  (function () {
+    store.dispatch({ type: '__TEST__ACTION__' });
+    let afterTest = store.getState();
+    return typeof afterTest === 'object' && afterTest.hasOwnProperty('login');
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const defaultState = {
+  login: false
+};
+
+const reducer = (state = defaultState, action) => {
+  // Change code below this line
+
+  // Change code above this line
+};
+
+const store = Redux.createStore(reducer);
+
+const loginAction = () => {
+  return {
+    type: 'LOGIN'
+  }
+};
+```
+
+# --solutions--
+
+```js
+const defaultState = {
+  login: false
+};
+
+const reducer = (state = defaultState, action) => {
+
+  if (action.type === 'LOGIN') {
+    return {login: true}
+  }
+
+  else {
+    return state
+  }
+
+};
+
+const store = Redux.createStore(reducer);
+
+const loginAction = () => {
+  return {
+    type: 'LOGIN'
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/never-mutate-state.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/never-mutate-state.md
new file mode 100644
index 00000000000..1625df6c4e5
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/never-mutate-state.md
@@ -0,0 +1,133 @@
+---
+id: 5a24c314108439a4d4036158
+title: لا تغير الحالة أبدا (Mutate State)
+challengeType: 6
+forumTopicId: 301445
+dashedName: never-mutate-state
+---
+
+# --description--
+
+وتصف هذه التحديات الأخيرة عدة أساليب لإنفاذ المبدأ الرئيس المتمثل في عدم قابلية تغيير الحالة (state immutability) في عملية Redux. تعني الحالة غير المتغيرة لا تعدل الحالة بشكل قصداً، بدلاً من ذلك، يمكنك إعادة نسخة جديدة من الحالة.
+
+إذا أخذت لقطة (snapshot) عن حالة تطبيق Redux على مر الزمن، سترى شيئا مثل `state 1`، و`state 2`، و`state 3`، و`state 4`، وكذلك `...`، حيث يمكن لكل الحالة أن تكون مماثلة للحالة الأخيرة، ولكن كل منها جزء مستقل من البيانات. هذا عدم التغير، في الواقع، هو ما يوفر خاصيات مثل تصحيح أخطاء السفر الزمني (time-travel debugging) الذي ربما سمعتم عنها.
+
+لا يؤدي Redux بشكل نشيطٌ إلى فرض عدم قابلية الحالة للتغيير في متجرها (store) أو تخفيضها (reducers)، وهذه المسؤولية تقع على عاتق المبرمج. لحسن الحظ، يوفر JavaScript (بخصوص ES6) عدة أدوات مفيدة يمكنك استخدامها لفرض عدم قابلية وضعك للتغيير، سواء كان `string` أو `number`, أو `array`, أو `object`. لاحظ أن strings والأرقام هي قيم بدائية ولا يمكن تغييرها بالطبيعة. وبعبارة أخرى، فإن 3 هي دائما 3. لا يمكنك تغيير قيمة الرَّقَم 3. غير أنه يمكن تغيير `array` أو `object`. من الناحية العملية، ربما ستتألف حالتك من `array` أو `object`، وبما أن هذه الهياكل هي هياكل بيانات (data structures) مفيدة لتمثيل أنواع عدّة من المعلومات.
+
+# --instructions--
+
+هناك `store` و `reducer` في محرر التعليمات البرمجية لإدارة العناصر المراد القيام بها (to-do). إنهاء كتابة منطق `ADD_TO_DO` في الحد لإلحاق جديد للحالة. هناك بعض الطرق لتحقيق ذلك باستخدام JavaScript المعتاد أو ES6. انظر إذا كنت تستطيع العثور على طريقة لإعادة قائمة جديدة مع العنصر من `action.todo` الملحق بالنهاية.
+
+# --hints--
+
+يجب أن يكون متجر Redux موجوداً وأن يهيئ مع حالة مساوية لقائمة `todos` في محرر الكود البرمجي.
+
+```js
+assert(
+  (function () {
+    const todos = [
+      'Go to the store',
+      'Clean the house',
+      'Cook dinner',
+      'Learn to code'
+    ];
+    const initialState = store.getState();
+    return (
+      Array.isArray(initialState) && initialState.join(',') === todos.join(',')
+    );
+  })()
+);
+```
+
+يجب أن يكون كلاً من `addToDo` و `immutableReducer` وظائف (functions).
+
+```js
+assert(typeof addToDo === 'function' && typeof immutableReducer === 'function');
+```
+
+إرسال إجراء من نوع `ADD_TO_DO` على متجر Redux يجب أن يضيف عنصر `todo` وينبغي ألا يغير الحالة.
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState();
+    const isFrozen = DeepFreeze(initialState);
+    store.dispatch(addToDo('__TEST__TO__DO__'));
+    const finalState = store.getState();
+    const expectedState = [
+      'Go to the store',
+      'Clean the house',
+      'Cook dinner',
+      'Learn to code',
+      '__TEST__TO__DO__'
+    ];
+    return isFrozen && DeepEqual(finalState, expectedState);
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const ADD_TO_DO = 'ADD_TO_DO';
+
+// A list of strings representing tasks to do:
+const todos = [
+  'Go to the store',
+  'Clean the house',
+  'Cook dinner',
+  'Learn to code',
+];
+
+const immutableReducer = (state = todos, action) => {
+  switch(action.type) {
+    case ADD_TO_DO:
+      // Don't mutate state here or the tests will fail
+      return
+    default:
+      return state;
+  }
+};
+
+const addToDo = (todo) => {
+  return {
+    type: ADD_TO_DO,
+    todo
+  }
+}
+
+const store = Redux.createStore(immutableReducer);
+```
+
+# --solutions--
+
+```js
+const ADD_TO_DO = 'ADD_TO_DO';
+
+const todos = [
+  'Go to the store',
+  'Clean the house',
+  'Cook dinner',
+  'Learn to code',
+];
+
+const immutableReducer = (state = todos, action) => {
+  switch(action.type) {
+    case ADD_TO_DO:
+      return state.concat(action.todo);
+    default:
+      return state;
+  }
+};
+
+const addToDo = (todo) => {
+  return {
+    type: ADD_TO_DO,
+    todo
+  }
+}
+
+const store = Redux.createStore(immutableReducer);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/register-a-store-listener.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/register-a-store-listener.md
new file mode 100644
index 00000000000..763f9512410
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/register-a-store-listener.md
@@ -0,0 +1,118 @@
+---
+id: 5a24c314108439a4d4036153
+title: تسجيل مستمع المتجر (Store Listener)
+challengeType: 6
+forumTopicId: 301446
+dashedName: register-a-store-listener
+---
+
+# --description--
+
+طريقة أخرى لديك حق الوصول إليها على الكائن `store` في Redux هي `store.subscribe()`. هذا يسمح لك باشتراك وظائف المستمع في المتجر، التي يتم استدعاؤها كلما تم إرسال إجراء ضد المتجر. أحد الاستخدامات البسيطة لهذه الطريقة هو أرتباط وظيفة في متجرك تبسط تسجيل رسالة في كل مرة يتم فيها تلقي إجراء ويتم تحديث المتجر (store).
+
+# --instructions--
+
+اكتب وظيفة رد الاتصال الذي تزيد المتغير العالمي `count` في كل مرة يتلقى فيها المتجر إجراء، وتمرير هذه الوظيفة إلى طريقة `store.subscribe()`. سترى أن `store.dispatch()` يستدعي ثلاث مرات على التوالي، في كل مرة يمر قصداً في كائن الإجراء. مشاهدة إخراج وحدة التحكم بين إرسال الإجراءات لرؤية التحديثات.
+
+# --hints--
+
+إرسال إجراء `ADD` من المتجر يجب أن يزيد الحالة بقيمة `1`.
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState();
+    store.dispatch({ type: 'ADD' });
+    const newState = store.getState();
+    return newState === initialState + 1;
+  })()
+);
+```
+
+يجب أن تكون هناك وظيفة مستمع (listener function) مشتركة في المتجر باستخدام `store.subscribe`.
+
+```js
+(getUserInput) => assert(getUserInput('index').match(/store\s*\.\s*subscribe\(/gm));
+```
+
+يجب أن يتلقى `store.subscribe` وظيفة.
+
+```js
+(getUserInput) => assert(getUserInput('index').match(/(\s*function\s*)|(\s*\(\s*\)\s*=>)/gm)) 
+```
+
+إعادة الاتصال إلى `store.subscribe` يجب أن تزيد أيضا متغير `count` العام عندما يتم تحديث المتجر.
+
+```js
+assert(store.getState() === count);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+count = 0;
+```
+
+## --seed-contents--
+
+```js
+const ADD = 'ADD';
+
+const reducer = (state = 0, action) => {
+  switch(action.type) {
+    case ADD:
+      return state + 1;
+    default:
+      return state;
+  }
+};
+
+const store = Redux.createStore(reducer);
+
+// Global count variable:
+let count = 0;
+
+// Change code below this line
+
+// Change code above this line
+
+store.dispatch({type: ADD});
+console.log(count);
+store.dispatch({type: ADD});
+console.log(count);
+store.dispatch({type: ADD});
+console.log(count);
+```
+
+# --solutions--
+
+```js
+const ADD = 'ADD';
+
+const reducer = (state = 0, action) => {
+  switch(action.type) {
+    case ADD:
+      return state + 1;
+    default:
+      return state;
+  }
+};
+
+const store = Redux.createStore(reducer);
+ let count = 0;
+// Change code below this line
+
+store.subscribe( () =>
+ {
+ count++;
+ }
+);
+
+// Change code above this line
+
+store.dispatch({type: ADD});
+store.dispatch({type: ADD});
+store.dispatch({type: ADD});
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/remove-an-item-from-an-array.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/remove-an-item-from-an-array.md
new file mode 100644
index 00000000000..bb250d68614
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/remove-an-item-from-an-array.md
@@ -0,0 +1,114 @@
+---
+id: 5a24c314108439a4d403615a
+title: إزالة عنصر من قائمة (Array)
+challengeType: 6
+forumTopicId: 301447
+dashedName: remove-an-item-from-an-array
+---
+
+# --description--
+
+الوقت المتاح لإزالة العناصر من القائمة (array). يمكن استخدام مشغل الانتشار هنا أيضا. وتشمل طرق JavaScript المفيدة الأخرى `slice()` و `concat()`.
+
+# --instructions--
+
+تم تعديل reducer ولإجراء (action) لإزالة عنصر من قائمة استنادًا على ترتيب العنصر. إنهاء كتابة reducer حتى يتم إعادة حالة قائمة (state array) جديدة مع هذا العنصر في الترتيب المحدد.
+
+# --hints--
+
+يجب أن يكون متجر Redux موجوداً ويبدأ مع حالة مساوية `[0,1,2,3,4,5]`
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState();
+    return (
+      Array.isArray(initialState) === true &&
+      DeepEqual(initialState, [0, 1, 2, 3, 4, 5])
+    );
+  })()
+);
+```
+
+يجب أن يكون كلاً من `removeItem` و `immutableReducer` وظائف (functions).
+
+```js
+assert(
+  typeof removeItem === 'function' && typeof immutableReducer === 'function'
+);
+```
+
+إرسال منشئ إجراء `removeItem` لإزالة العناصر من الحالة ويجب ألا يغير الحالة.
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState();
+    const isFrozen = DeepFreeze(initialState);
+    store.dispatch(removeItem(3));
+    const state_1 = store.getState();
+    store.dispatch(removeItem(2));
+    const state_2 = store.getState();
+    store.dispatch(removeItem(0));
+    store.dispatch(removeItem(0));
+    store.dispatch(removeItem(0));
+    const state_3 = store.getState();
+    return (
+      isFrozen &&
+      DeepEqual(state_1, [0, 1, 2, 4, 5]) &&
+      DeepEqual(state_2, [0, 1, 4, 5]) &&
+      DeepEqual(state_3, [5])
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const immutableReducer = (state = [0,1,2,3,4,5], action) => {
+  switch(action.type) {
+    case 'REMOVE_ITEM':
+      // Don't mutate state here or the tests will fail
+      return
+    default:
+      return state;
+  }
+};
+
+const removeItem = (index) => {
+  return {
+    type: 'REMOVE_ITEM',
+    index
+  }
+}
+
+const store = Redux.createStore(immutableReducer);
+```
+
+# --solutions--
+
+```js
+const immutableReducer = (state = [0,1,2,3,4,5], action) => {
+  switch(action.type) {
+    case 'REMOVE_ITEM':
+      return [
+        ...state.slice(0, action.index),
+        ...state.slice(action.index + 1)
+      ];
+    default:
+      return state;
+  }
+};
+
+const removeItem = (index) => {
+  return {
+    type: 'REMOVE_ITEM',
+    index
+  }
+}
+
+const store = Redux.createStore(immutableReducer);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/send-action-data-to-the-store.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/send-action-data-to-the-store.md
new file mode 100644
index 00000000000..78598a610e6
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/send-action-data-to-the-store.md
@@ -0,0 +1,107 @@
+---
+id: 5a24c314108439a4d4036155
+title: إرسال بيانات الإجراء (Action Data) إلى المتجر
+challengeType: 6
+forumTopicId: 301448
+dashedName: send-action-data-to-the-store
+---
+
+# --description--
+
+لقد تعلمت الآن كيفية إرسال الإجراءات إلى متجر Redux، ولكن حتى الآن لم تحتوي هذه الإجراءات على أي معلومات غير `type`. يمكنك أيضا إرسال بيانات محددة مع إجراءاتك. والواقع أن هذا أمر شائع جدا, لأن الإجراءات تنشأ بالعادة من التفاعل بين المستعملين وتميل إلى حمل بعض البيانات مع الإجراءات. غالباً ما يحتاج متجر Redux إلى معرفة عن هذه البيانات.
+
+# --instructions--
+
+هناك `notesReducer()` أساسية و `addNoteText()` منشئ إجراءات معرف في محرر التعليمات البرمجية. إنهاء جسم وظيفة `addNoteText()` بحيث تنتج كائن `action`. يجب أن يتضمن الكائن `type` خاصية بقيمة `ADD_NOTE`، كما تم تعيين خاصية `text` إلى `note` البيانات التي انتقلت إلى منشئ الإجراء. عند استدعاء منشئ الإجراء، سوف تمر في ملاحظة محددة معلومات يمكنك الوصول إليها من أجل الكائن.
+
+بعد ذلك، أكمل كتابة بيان `switch` في `notesReducer()`. تحتاج إلى إضافة حالة تتعامل مع إجراءات `addNoteText()`. يجب تشغيل هذه الحالة كلما كان هناك إجراء من نوع `ADD_NOTE` وينبغي أن تنشئ خاصية `text` في `action` الوارد يكون مثل `state` جديدة.
+
+يتم إرسال الإجراء في الجزء السفلي من تعليمات برمجية. بمجرد الانتهاء منك، شغل التعليمات البرمجية وشاهد وحدة التحكم. هذا ما تحتاج إليه لإرسال بيانات محددة إلى المتجر (store) واستخدامه عند تحديث المتجر `state`.
+
+# --hints--
+
+منشئ الإجراءات `addNoteText` يجب أن يعيد كائن هُوِيَّات من `type` و `text`.
+
+```js
+assert(
+  (function () {
+    const addNoteFn = addNoteText('__TEST__NOTE');
+    return addNoteFn.type === ADD_NOTE && addNoteFn.text === '__TEST__NOTE';
+  })()
+);
+```
+
+إرسال إجراء من نوع `ADD_NOTE` مع `addNoteText` يجب أن يقوم منشئ الإجراء بتحديث `state` إلى string الذي تم تمريره إلى منشئ الإجراء (action creator).
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState();
+    store.dispatch(addNoteText('__TEST__NOTE'));
+    const newState = store.getState();
+    return initialState !== newState && newState === '__TEST__NOTE';
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const ADD_NOTE = 'ADD_NOTE';
+
+const notesReducer = (state = 'Initial State', action) => {
+  switch(action.type) {
+    // Change code below this line
+
+    // Change code above this line
+    default:
+      return state;
+  }
+};
+
+const addNoteText = (note) => {
+  // Change code below this line
+
+  // Change code above this line
+};
+
+const store = Redux.createStore(notesReducer);
+
+console.log(store.getState());
+store.dispatch(addNoteText('Hello!'));
+console.log(store.getState());
+```
+
+# --solutions--
+
+```js
+const ADD_NOTE = 'ADD_NOTE';
+
+const notesReducer = (state = 'Initial State', action) => {
+  switch(action.type) {
+    // Change code below this line
+    case ADD_NOTE:
+      return action.text;
+    // Change code above this line
+    default:
+      return state;
+  }
+};
+
+const addNoteText = (note) => {
+  // Change code below this line
+  return {
+    type: ADD_NOTE,
+    text: note
+  }
+  // Change code above this line
+};
+
+const store = Redux.createStore(notesReducer);
+
+console.log(store.getState());
+store.dispatch(addNoteText('Hello Redux!'));
+console.log(store.getState());
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.md
new file mode 100644
index 00000000000..8360c7d5570
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-a-switch-statement-to-handle-multiple-actions.md
@@ -0,0 +1,152 @@
+---
+id: 5a24c314108439a4d4036151
+title: استخدام تبديل التعبير (Switch Statement) للتعامل مع الإجراءات (Actions) المتعددة
+challengeType: 6
+forumTopicId: 301449
+dashedName: use-a-switch-statement-to-handle-multiple-actions
+---
+
+# --description--
+
+يمكنك إخبار متجر Redux كيفية التعامل مع أنواع متعددة من الإجراءات. قل أنك إدارة توثيق المستخدم (user authentication) في متجرك Redux. تريد أن يكون لديك تمثيل للحالة عندما يتم تسجيل دخول المستخدمين وعندما يتم تسجيل خروجهم. أنت تمثل هذا مع كائن حالة (state) واحد مع الخاصية `authenticated`. تحتاج أيضًا إلى منشئي الإجراءات الذين ينشئ إجراءات مناظرة لتسجيل دخول المستخدم وتسجيل خروجه، إلى جانب كائنات الإجراء نفسها.
+
+# --instructions--
+
+يحتوي محرر التعليمات البرمجية على متجر، وإجراءات، وناشئ إجراءات تم إعدادهم لك. املأ الوظيفة `reducer` للتعامل مع إجراءات الموثقة المتعددة. استخدم تعبير `switch` من JavaScript في `reducer` للرد على أحداث الإجراء مختلفة. هذا نمط قياسي في كتابة reducers في Redux. يجب أن يبدل تعبير التبديل إلى `action.type` وأن يعيد حالة التوثيق المناسبة.
+
+**ملاحظة:** في هذه المرحلة، لا تقلق حول عدم قدرة الحالة على التغيير، لأنها صغيرة وبسيطة في هذا المثال. لكل إجراء، يمكنك إعادة كائن جديد - على سبيل المثال `{authenticated: true}`. كما لا تنس كتابة قاعدة (case) باسم `default` في تعبير التبديل الخاص بك الذي يعيد الحالة `state`. هذا مهم لأنه بمجرد أن يكون التطبيق الخاص بك يحتوي على reducers متعددة، يتم تشغيلها جميعا في أي وقت يتم فيه إرسال إجراء، حتى عندما لا يكون الإجراء متصلا بذلك reducer. في مثل هذه الحالة، تريد التأكد من إعادة `state` الحالية.
+
+# --hints--
+
+الاتصال بالوظيفة `loginUser` يجب أن يعيد كائن يحمل مجموعة الخصائص type من string باسم `LOGIN`.
+
+```js
+assert(loginUser().type === 'LOGIN');
+```
+
+الاتصال بالوظيفة `logoutUser` يجب أن يعيد كائن يحمل مجموعة الخصائص type من string باسم `LOGOUT`.
+
+```js
+assert(logoutUser().type === 'LOGOUT');
+```
+
+يجب أن يتم تهيئة المتجر مع كائن يحتوي خاصية `authenticated` بقيمة `false`.
+
+```js
+assert(store.getState().authenticated === false);
+```
+
+إرسال `loginUser` يجب أن تحديث خاصية `authenticated` في حالة المتجر إلى `true`.
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState();
+    store.dispatch(loginUser());
+    const afterLogin = store.getState();
+    return (
+      initialState.authenticated === false && afterLogin.authenticated === true
+    );
+  })()
+);
+```
+
+إرسال `logoutUser` يجب أن تحديث خاصية `authenticated` في حالة المتجر إلى `false`.
+
+```js
+assert(
+  (function () {
+    store.dispatch(loginUser());
+    const loggedIn = store.getState();
+    store.dispatch(logoutUser());
+    const afterLogout = store.getState();
+    return (
+      loggedIn.authenticated === true && afterLogout.authenticated === false
+    );
+  })()
+);
+```
+
+يجب أن تتعامل وظيفة `authReducer` مع أنواع متعددة من الإجراءات مع تعبير `switch`.
+
+```js
+(getUserInput) =>
+  assert(
+    getUserInput('index').toString().includes('switch') &&
+      getUserInput('index').toString().includes('case') &&
+      getUserInput('index').toString().includes('default')
+  );
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const defaultState = {
+  authenticated: false
+};
+
+const authReducer = (state = defaultState, action) => {
+  // Change code below this line
+
+  // Change code above this line
+};
+
+const store = Redux.createStore(authReducer);
+
+const loginUser = () => {
+  return {
+    type: 'LOGIN'
+  }
+};
+
+const logoutUser = () => {
+  return {
+    type: 'LOGOUT'
+  }
+};
+```
+
+# --solutions--
+
+```js
+const defaultState = {
+  authenticated: false
+};
+
+const authReducer = (state = defaultState, action) => {
+
+  switch (action.type) {
+
+    case 'LOGIN':
+      return {
+        authenticated: true
+      }
+
+    case 'LOGOUT':
+      return {
+        authenticated: false
+      }
+
+    default:
+      return state;
+
+  }
+
+};
+
+const store = Redux.createStore(authReducer);
+
+const loginUser = () => {
+  return {
+    type: 'LOGIN'
+  }
+};
+
+const logoutUser = () => {
+  return {
+    type: 'LOGOUT'
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-const-for-action-types.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-const-for-action-types.md
new file mode 100644
index 00000000000..44cdef98d41
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-const-for-action-types.md
@@ -0,0 +1,202 @@
+---
+id: 5a24c314108439a4d4036152
+title: استخدام ثابت (const) في لأنواع الإجراء (Action Types)
+challengeType: 6
+forumTopicId: 301450
+dashedName: use-const-for-action-types
+---
+
+# --description--
+
+والممارسة الشائعة عند العمل مع Redux هي تعيين أنواع الإجراءات كثوابت للقراءة فقط، ثم الرجوع إلى هذه الثوابت (constants) أينما استخدمت. يمكنك إعادة تعديل التعليمات البرمجية التي تعمل معها لكتابة أنواع الإجراءات كإعلانات `const`.
+
+# --instructions--
+
+إعلان `LOGIN` و `LOGOUT` بقيمة `const` وتعيينها إلى strings بقيمة `'LOGIN'` و `'LOGOUT'`، على التوالي. ثم حرر `authReducer()` ومباني العمل للإشارة إلى هذه الثوابت بدلاً من قيم المقطع (string).
+
+**ملاحظة:** هي عادة متفق عليها وهي كتابة الثوابت في كل الحروف على هيئة uppercase، وهذه ممارسة عادية في Redux أيضا.
+
+# --hints--
+
+الاتصال بالوظيفة `loginUser` يجب أن يعيد كائن يحمل مجموعة الخصائص `type` من string باسم `LOGIN`.
+
+```js
+assert(loginUser().type === 'LOGIN');
+```
+
+الاتصال بالوظيفة `logoutUser` يجب أن يعيد كائن يحمل مجموعة الخصائص `type` من string باسم `LOGOUT`.
+
+```js
+assert(logoutUser().type === 'LOGOUT');
+```
+
+يجب تهيئة المتجر مع كائن ذو خاصية `login` بقيمة `false`.
+
+```js
+assert(store.getState().authenticated === false);
+```
+
+إرسال `loginUser` يجب أن تحديث خاصية `login` في حالة المتجر إلى `true`.
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState();
+    store.dispatch(loginUser());
+    const afterLogin = store.getState();
+    return (
+      initialState.authenticated === false && afterLogin.authenticated === true
+    );
+  })()
+);
+```
+
+إرسال `logoutUser` يجب أن تحديث خاصية `login` في حالة المتجر إلى `false`.
+
+```js
+assert(
+  (function () {
+    store.dispatch(loginUser());
+    const loggedIn = store.getState();
+    store.dispatch(logoutUser());
+    const afterLogout = store.getState();
+    return (
+      loggedIn.authenticated === true && afterLogout.authenticated === false
+    );
+  })()
+);
+```
+
+يجب أن تتعامل وظيفة `authReducer` مع أنواع متعددة من الإجراءات مع تعبير switch.
+
+```js
+(getUserInput) =>
+  assert(
+    (function () {
+      return (
+        typeof authReducer === 'function' &&
+        getUserInput('index').toString().includes('switch') &&
+        getUserInput('index').toString().includes('case') &&
+        getUserInput('index').toString().includes('default')
+      );
+    })()
+  );
+```
+
+`LOGIN` و `LOGOUT` يجب إعلانه باسم `const` وينبغي تعيين strings بقيم `LOGIN` و `LOGOUT`.
+
+```js
+const noWhiteSpace = __helpers.removeWhiteSpace(code);
+assert(LOGIN === 'LOGIN' && LOGOUT === 'LOGOUT')
+assert(noWhiteSpace.includes('const'))
+```
+
+يجب أن يشير منشئو الإجراءات و reducer إلى الثوابت `LOGIN` و `LOGOUT`.
+
+```js
+(getUserInput) =>
+  assert(
+    (function () {
+      const noWhiteSpace = __helpers.removeWhiteSpace(
+        getUserInput('index').toString()
+      );
+      return (
+        noWhiteSpace.includes('caseLOGIN:') &&
+        noWhiteSpace.includes('caseLOGOUT:') &&
+        noWhiteSpace.includes('type:LOGIN') &&
+        noWhiteSpace.includes('type:LOGOUT')
+      );
+    })()
+  );
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+
+
+const defaultState = {
+  authenticated: false
+};
+
+const authReducer = (state = defaultState, action) => {
+
+  switch (action.type) {
+    case 'LOGIN': 
+      return {
+        authenticated: true
+      }
+    case 'LOGOUT': 
+      return {
+        authenticated: false
+      }
+
+    default:
+      return state;
+
+  }
+
+};
+
+const store = Redux.createStore(authReducer);
+
+const loginUser = () => {
+  return {
+    type: 'LOGIN'
+  }
+};
+
+const logoutUser = () => {
+  return {
+    type: 'LOGOUT'
+  }
+};
+```
+
+# --solutions--
+
+```js
+const LOGIN = 'LOGIN';
+const LOGOUT = 'LOGOUT';
+
+const defaultState = {
+  authenticated: false
+};
+
+const authReducer = (state = defaultState, action) => {
+
+  switch (action.type) {
+
+    case LOGIN:
+      return {
+        authenticated: true
+      }
+
+    case LOGOUT:
+      return {
+        authenticated: false
+      }
+
+    default:
+      return state;
+
+  }
+
+};
+
+const store = Redux.createStore(authReducer);
+
+const loginUser = () => {
+  return {
+    type: LOGIN
+  }
+};
+
+const logoutUser = () => {
+  return {
+    type: LOGOUT
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-middleware-to-handle-asynchronous-actions.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-middleware-to-handle-asynchronous-actions.md
new file mode 100644
index 00000000000..ad4230173b1
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-middleware-to-handle-asynchronous-actions.md
@@ -0,0 +1,170 @@
+---
+id: 5a24c314108439a4d4036156
+title: استخدام البرامج الوسيط (Middleware) للتعامل مع الإجراءات المتزامنة (Asynchronous Actions)
+challengeType: 6
+forumTopicId: 301451
+dashedName: use-middleware-to-handle-asynchronous-actions
+---
+
+# --description--
+
+وقد تجنبت هذه التحديات حتى الآن مناقشة الإجراءات غير المتزامنة، ولكنها جزء لا يمكن تجنبه من تطوير الشبكة الإلكترونية. في مرحلة ما ستحتاج إلى استدعاء نُقَط النهاية غير متزامنة في تطبيق Redux الخاص بك، لذلك كيف تتعامل مع هذه الأنواع من الطلبات؟ Redux يوفر وسيط (middleware) مصمم خصيصاً لهذا الغرض، يسمى Redux Thunk middleware. إليك وصف موجز لكيفية استخدام هذا مع Redux.
+
+لتضمين Redux Thunk middleware، يمكنك تمريره كحجة إلى `Redux.applyMiddleware()`. ثم يتم تقديم هذا التعبير كحجة اختيارية ثانية لوظيفة `createStore()`. ألقي النَّظْرَة على التعليمات البرمجية في أسفل المحرر لرؤية هذا. ثم لإنشاء إجراء غير متزامن، يمكنك إرجاع وظيفة في منشئ العمل الذي يأخذ `dispatch` كحجة. في إطار هذه الوظيفة، يمكنك إرسال الإجراءات وتنفيذ طلبات غير متزامنة.
+
+في هذا المثال، يتم محاكاة طلب غير متزامن مع مكالمة `setTimeout()`. من الشائع إرسال إجراء قبل الشروع في أي سلوك غير متزامن, حتى يتعرف حالة التطبيق الخاص بك على بعض البيانات مطلوبة (هذه الحالة يمكن أن تعرض أيقونة التحميل, مثلاً). بعد ذلك، بمجرد تلقي البيانات، ارسل إجراء آخر يحمل البيانات كحمولة مربوطة بالمعلومات التي تم إكمالها.
+
+تذكر أنك تمرير `dispatch` كحجة إلى منشئ العمل الخاص هذا. هذا ما ستستخدمه لإرسال إجراءاتك، أنت ببساطة تمرير الإجراء قاصدًا إلى dispatch، ويقوم البرنامَج الوسيط (Middleware) بالقيام بالباقي.
+
+# --instructions--
+
+كتابة كلا الرسالتين في `handleAsync()` منشئ الإجراء. إرسال `requestingData()` قبل `setTimeout()` (لمحاكاة مكالمة API). ثم بعد تلقي البيانات (زائفة)، أرسل إجراء `receivedData()`، مرورا في هذه البيانات. الآن أنت تعرف كيفية التعامل مع الإجراءات غير المتزامنة في Redux. وكل شيء آخر لا يزال يتصرف كما كان من قبل.
+
+# --hints--
+
+يجب أن ينتج إجراء `requestingData` كائن من نوع مساو لقيمة `REQUESTING_DATA`.
+
+```js
+assert(requestingData().type === REQUESTING_DATA);
+```
+
+يجب أن ينتج إجراء `receivedData` كائن من نوع مساو لقيمة `RECEIVED_DATA`.
+
+```js
+assert(receivedData('data').type === RECEIVED_DATA);
+```
+
+`asyncDataReducer` يجب أن تكون وظيفة function.
+
+```js
+assert(typeof asyncDataReducer === 'function');
+```
+
+إرسال `requestingData` يجب أن يقوم منشئ الإجراءات بتحديث خاصية `state` المتجر لجلب `true`.
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState();
+    store.dispatch(requestingData());
+    const reqState = store.getState();
+    return initialState.fetching === false && reqState.fetching === true;
+  })()
+);
+```
+
+إرسال `handleAsync` يجب أن يرسل إجراء طلب البيانات ثم يرسل إجراء البيانات المستلمة بعد تأخير.
+
+```js
+assert(
+  (function () {
+    const noWhiteSpace = __helpers.removeWhiteSpace(handleAsync.toString());
+    return (
+      noWhiteSpace.includes('dispatch(requestingData())') === true &&
+      noWhiteSpace.includes('dispatch(receivedData(data))') === true
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const REQUESTING_DATA = 'REQUESTING_DATA'
+const RECEIVED_DATA = 'RECEIVED_DATA'
+
+const requestingData = () => { return {type: REQUESTING_DATA} }
+const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }
+
+const handleAsync = () => {
+  return function(dispatch) {
+    // Dispatch request action here
+
+    setTimeout(function() {
+      let data = {
+        users: ['Jeff', 'William', 'Alice']
+      }
+      // Dispatch received data action here
+
+    }, 2500);
+  }
+};
+
+const defaultState = {
+  fetching: false,
+  users: []
+};
+
+const asyncDataReducer = (state = defaultState, action) => {
+  switch(action.type) {
+    case REQUESTING_DATA:
+      return {
+        fetching: true,
+        users: []
+      }
+    case RECEIVED_DATA:
+      return {
+        fetching: false,
+        users: action.users
+      }
+    default:
+      return state;
+  }
+};
+
+const store = Redux.createStore(
+  asyncDataReducer,
+  Redux.applyMiddleware(ReduxThunk.default)
+);
+```
+
+# --solutions--
+
+```js
+const REQUESTING_DATA = 'REQUESTING_DATA'
+const RECEIVED_DATA = 'RECEIVED_DATA'
+
+const requestingData = () => { return {type: REQUESTING_DATA} }
+const receivedData = (data) => { return {type: RECEIVED_DATA, users: data.users} }
+
+const handleAsync = () => {
+  return function(dispatch) {
+    dispatch(requestingData());
+    setTimeout(function() {
+      let data = {
+        users: ['Jeff', 'William', 'Alice']
+      }
+      dispatch(receivedData(data));
+    }, 2500);
+  }
+};
+
+const defaultState = {
+  fetching: false,
+  users: []
+};
+
+const asyncDataReducer = (state = defaultState, action) => {
+  switch(action.type) {
+    case REQUESTING_DATA:
+      return {
+        fetching: true,
+        users: []
+      }
+    case RECEIVED_DATA:
+      return {
+        fetching: false,
+        users: action.users
+      }
+    default:
+      return state;
+  }
+};
+
+const store = Redux.createStore(
+  asyncDataReducer,
+  Redux.applyMiddleware(ReduxThunk.default)
+);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-the-spread-operator-on-arrays.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-the-spread-operator-on-arrays.md
new file mode 100644
index 00000000000..dcfc5c66086
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/use-the-spread-operator-on-arrays.md
@@ -0,0 +1,114 @@
+---
+id: 5a24c314108439a4d4036159
+title: استخدام مشغل الانتشار (Spread Operator) على القائمات (Arrays)
+challengeType: 6
+forumTopicId: 301452
+dashedName: use-the-spread-operator-on-arrays
+---
+
+# --description--
+
+أحد الحلول من ES6 للمساعدة في إنفاذ ثبات الحالة في Redux هو مشغل الانتشار (spread operator) على هئة: `...`. مشغل الانتشار (spread operator) لديه مجموعة متنوعة من التطبيقات، وهو واحد من هذه الحالات تناسب تماما التحدي السابق المتمثل في إنتاج قائمة جديدة من قائمة موجودة فعلاً. هذه صيغة جديدة نسبياً ولكنها شائعة الاستخدام. على سبيل المثال، إذا كان لديك قائمة `myArray` وكتب:
+
+```js
+let newArray = [...myArray];
+```
+
+`newArray` هي الآن نسخة من `myArray`. ولا يزال كلا القائمتين قائمين بشكل منفصل في الذاكرة (memory). إذا نفذ تغير قيمة الأصلية (mutation) مثل `newArray.push(5)`، و`myArray` لا يتغير. `...` هو *ينشر* بفعالية القيم في `myArray` إلى قائمة جديدة. لاستنساخ قائمة ولكن إضافة قيم إضافية في القائمة الجديدة، يمكنك كتابة `[...myArray, 'new value']`. هذا من شأنه أن ينتج قائمة جديدة تتكون من القيم في `myArray` ومقطع (string) باسم `new value` كالقيمة السابقة. يمكن استخدام صيغة الانتشار (spread syntax) عدة مرات في تركيبة قائمة مثل، ولكن من المهم أن نلاحظ أنها تصنع فقط نسخة ضحله (shallow) من القائمة. وهذا يعني أنه لا يوفر سوى عمليات قائمة ثابتة (immutable array operations) لقائمة أحادية البعد (dimensional arrays).
+
+# --instructions--
+
+استخدم مشغل الانتشار (spread operator) لإرجاع نسخة جديدة من الحالة عند إضافة قائمة (to-do).
+
+# --hints--
+
+يجب أن يكون متجر Redux موجوداً ويبدأ مع حالة تساوي `["Do not mutate state!"]`.
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState();
+    return (
+      Array.isArray(initialState) === true &&
+      initialState[0] === 'Do not mutate state!'
+    );
+  })()
+);
+```
+
+يجب أن يكون كلاً من `addToDo` و `immutableReducer` وظائف (functions).
+
+```js
+assert(typeof addToDo === 'function' && typeof immutableReducer === 'function');
+```
+
+إرسال إجراء من نوع `ADD_TO_DO` على متجر Redux يجب أن يضيف عنصر `todo` وينبغي ألا يغير الحالة.
+
+```js
+assert(
+  (function () {
+    const initialState = store.getState();
+    const isFrozen = DeepFreeze(initialState);
+    store.dispatch(addToDo('__TEST__TO__DO__'));
+    const finalState = store.getState();
+    const expectedState = ['Do not mutate state!', '__TEST__TO__DO__'];
+    return isFrozen && DeepEqual(finalState, expectedState);
+  })()
+);
+```
+
+وينبغي استخدام مشغل الانتشار (spread operator) لإعادة حالة جديدة.
+
+```js
+(getUserInput) => assert(getUserInput('index').includes('...state'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const immutableReducer = (state = ['Do not mutate state!'], action) => {
+  switch(action.type) {
+    case 'ADD_TO_DO':
+      // Don't mutate state here or the tests will fail
+      return
+    default:
+      return state;
+  }
+};
+
+const addToDo = (todo) => {
+  return {
+    type: 'ADD_TO_DO',
+    todo
+  }
+}
+
+const store = Redux.createStore(immutableReducer);
+```
+
+# --solutions--
+
+```js
+const immutableReducer = (state = ['Do not mutate state!'], action) => {
+  switch(action.type) {
+    case 'ADD_TO_DO':
+      return [
+        ...state,
+        action.todo
+      ];
+    default:
+      return state;
+  }
+};
+
+const addToDo = (todo) => {
+  return {
+    type: 'ADD_TO_DO',
+    todo
+  }
+}
+
+const store = Redux.createStore(immutableReducer);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/redux/write-a-counter-with-redux.md b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/write-a-counter-with-redux.md
new file mode 100644
index 00000000000..27ff3e6e914
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/redux/write-a-counter-with-redux.md
@@ -0,0 +1,122 @@
+---
+id: 5a24c314108439a4d4036157
+title: اكتب العداد (Counter) باستخدام Redux
+challengeType: 6
+forumTopicId: 301453
+dashedName: write-a-counter-with-redux
+---
+
+# --description--
+
+الآن لقد تعلمت جميع المبادئ الأساسية Redux! لقد رأيت كيفية إنشاء الإجراءات ومبتكري الإجراءات، إنشاء متجر Redux، إرسال إجراءاتك إلى المتجر، وتصميم الحالة تحديث مع reducers النقيين. لقد رأيت حتى كيفية إدارة الحالة المعقدة مع reducer والتعامل مع الإجراءات غير المتزامنة (asynchronous actions). وهذه الأمثلة تبسيطية، ولكن هذه المفاهيم هي المبادئ الأساسية Redux. إذا كنت تفهمهم جيداً، فأنت على استعداد لبدء بناء تطبيقك بواسطة Redux. التحديات التالية تغطي بعض التفاصيل المتعلقة بكائن `state` عدم قابلية التغير، ولكن أولاً، إليك استعراض لكل ما تعلمته حتى الآن.
+
+# --instructions--
+
+في هذا الدرس، ستطبق عددًا بسيطًا مع Redux من الصفر. يتم توفير أساسيات في محرر التعليمات البرمجية، ولكن يجب عليك ملء التفاصيل! استخدم الأسماء التي تم توفيرها وحدد `incAction` و `decAction`، ونشئ الإجرائيات `counterReducer()`، و`INCREMENT`, و `DECREMENT`، وأخيراً `store` قي Redux. بمجرد انتهائك، يجب أن تكون قادراً على إرسال إجراءات `INCREMENT` أو `DECREMENT` لزيادة أو تخفيض الحالة الموجودة في `store`. حظًا سعيدًا لبناء أول تطبيق Redux الخاص بك!
+
+# --hints--
+
+يجب على منشئ الإجراء `incAction` أن يعيد كائن إجراء مع `type` يساوي قيمة `INCREMENT`
+
+```js
+assert(incAction().type === INCREMENT);
+```
+
+يجب على منشئ الإجراء `decAction` أن يعيد كائن إجراء مع `type` يساوي قيمة `DECREMENT`
+
+```js
+assert(decAction().type === DECREMENT);
+```
+
+يجب أن يفتح متجر Redux مع `state` بقيمة 0.
+
+```js
+assert(_store.getState() === 0);
+```
+
+إرسال `incAction` على متجر Redux يجب أن يزيد من `state` بمقدار 1.
+
+```js
+assert(
+  (function () {
+    const initialState = _store.getState();
+    _store.dispatch(incAction());
+    const incState = _store.getState();
+    return initialState + 1 === incState;
+  })()
+);
+```
+
+إرسال `decAction` على متجر Redux يجب أن يقلل من `state` بمقدار 1.
+
+```js
+assert(
+  (function () {
+    const initialState = _store.getState();
+    _store.dispatch(decAction());
+    const decState = _store.getState();
+    return initialState - 1 === decState;
+  })()
+);
+```
+
+يجب أن تكون `counterReducer` وظيفة function
+
+```js
+assert(typeof counterReducer === 'function');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+const INCREMENT = null; // Define a constant for increment action types
+const DECREMENT = null; // Define a constant for decrement action types
+
+const counterReducer = null; // Define the counter reducer which will increment or decrement the state based on the action it receives
+
+const incAction = null; // Define an action creator for incrementing
+
+const decAction = null; // Define an action creator for decrementing
+
+const store = null; // Define the Redux store here, passing in your reducers
+```
+
+## --after-user-code--
+
+```js
+const _store = Redux.createStore(counterReducer)
+```
+
+# --solutions--
+
+```js
+const INCREMENT = 'INCREMENT';
+const DECREMENT = 'DECREMENT';
+
+const counterReducer = (state = 0, action) => {
+  switch(action.type) {
+    case INCREMENT:
+      return state + 1;
+    case DECREMENT:
+      return state - 1;
+    default:
+      return state;
+  }
+};
+
+const incAction = () => {
+  return {
+    type: INCREMENT
+  }
+};
+
+const decAction = () => {
+  return {
+    type: DECREMENT
+  }
+};
+
+const store = Redux.createStore(counterReducer);
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.md b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.md
new file mode 100644
index 00000000000..c64c9e4fa14
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/apply-a-style-until-a-condition-is-met-with-while.md
@@ -0,0 +1,117 @@
+---
+id: 587d7dbf367417b2b2512bbb
+title: تطبيق التصميم (Style) حتى يتم تلبية الشرط مع @while
+challengeType: 0
+forumTopicId: 301454
+dashedName: apply-a-style-until-a-condition-is-met-with-while
+---
+
+# --description--
+
+التوجيه `@while` هو خِيار له وظيفة مشابهة لوظيفة `while` إلى JavaScript loop. أنشئ قواعد CSS حتى يتم تحقيق الشرط.
+
+وأعطى تحدي `@for` مثالاً لإنشاء نظام شبكي (grid) بسيط. يمكن أن يعمل هذا أيضًا مع `@while`.
+
+```scss
+$x: 1;
+@while $x < 13 {
+  .col-#{$x} { width: 100%/12 * $x;}
+  $x: $x + 1;
+}
+```
+
+أولا، حدد متغير `$x` وقيمته إلى 1. بعد ذلك، استخدم توجيه `@while` لإنشاء نظام الشبكة (grid), *بينما* يكون `$x` أقل من 13. بعد تعيين قاعدة CSS إلى `width`، و`$x` يتم زيادتها ب 1 لتجنب حلقة لا محدود (infinite loop).
+
+# --instructions--
+
+استخدم `@while` لإنشاء سلسلة من الفئات مع `font-sizes` مختلفة.
+
+يجب أن يكون هناك 5 فئات مختلفة من `text-1` إلى `text-5`. ثم عيّن `font-size` إلى `15px` مضروباً في الرَّقَم الترتيبي الحالي (index number). تيقن من تجنب الحلقة اللانهائية (infinite loop)!
+
+# --hints--
+
+يجب أن تستخدم التعليمات البرمجية الخاصة بك توجيه `@while`.
+
+```js
+assert(code.match(/@while /g));
+```
+
+يجب أن تستخدم التعليمات البرمجية الخاصة بك متغير الترتيب يبدأ عند ترتيب من 1.
+
+```js
+assert(code.match(/\$.*:\s*?1;/gi));
+```
+
+الكود الخاص بك يجب أن يزيد متغير العداد.
+
+```js
+assert(code.match(/\$(.*)\s*?:\s*\$\1\s*\+\s*1\s*;/gi));
+```
+
+يجب أن يكون للفئة `.text-1` الخاص بك `font-size` بقيمة `15px`.
+
+```js
+assert($('.text-1').css('font-size') == '15px');
+```
+
+يجب أن يكون للفئة `.text-2` الخاص بك `font-size` بقيمة `30px`.
+
+```js
+assert($('.text-2').css('font-size') == '30px');
+```
+
+يجب أن يكون للفئة `.text-3` الخاص بك `font-size` بقيمة `45px`.
+
+```js
+assert($('.text-3').css('font-size') == '45px');
+```
+
+يجب أن يكون للفئة `.text-4` الخاص بك `font-size` بقيمة `60px`.
+
+```js
+assert($('.text-4').css('font-size') == '60px');
+```
+
+يجب أن يكون للفئة `.text-5` الخاص بك `font-size` بقيمة `75px`.
+
+```js
+assert($('.text-5').css('font-size') == '75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style type='text/scss'>
+
+
+
+</style>
+
+<p class="text-1">Hello</p>
+<p class="text-2">Hello</p>
+<p class="text-3">Hello</p>
+<p class="text-4">Hello</p>
+<p class="text-5">Hello</p>
+```
+
+# --solutions--
+
+```html
+<style type='text/scss'>
+  $x: 1;
+  @while $x < 6 {
+    .text-#{$x}{
+      font-size: 15px * $x;
+    }
+    $x: $x + 1;
+  }
+</style>
+
+<p class="text-1">Hello</p>
+<p class="text-2">Hello</p>
+<p class="text-3">Hello</p>
+<p class="text-4">Hello</p>
+<p class="text-5">Hello</p>
+```
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
new file mode 100644
index 00000000000..7a3150ab57b
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/create-reusable-css-with-mixins.md
@@ -0,0 +1,132 @@
+---
+id: 587d7dbd367417b2b2512bb6
+title: إنشاء CSS قابل لاعادة الاستخدام مع Mixins
+challengeType: 0
+forumTopicId: 301455
+dashedName: create-reusable-css-with-mixins
+---
+
+# --description--
+
+في الـ Sass، الـ <dfn>mixin</dfn> هو مجموعة من تعريفات الـ CSS التي يمكن إعادة استخدامها في الـ stylesheet.
+
+تتطلب ميزات CSS الأحدث وقتاً قبل اعتمادها بالكامل و قبل ان تكون جاهزة للاستخدام في جميع المتصفحات. مع إضافة الميزات إلى المتصفحات، قد تحتاج قواعد CSS التي تستخدمها إلى vendor prefixes. فكّر في `box-shadow`:
+
+```scss
+div {
+  -webkit-box-shadow: 0px 0px 4px #fff;
+  -moz-box-shadow: 0px 0px 4px #fff;
+  -ms-box-shadow: 0px 0px 4px #fff;
+  box-shadow: 0px 0px 4px #fff;
+}
+```
+
+يعتبر الامر الكثير من الكتابة لاعادة كتابة هذه القاعدة لجميع العناصر التي تحتوي على `box-shadow` أو لتغيير كل قيمة لاختبار تأثيرات مختلفة. يعدّ Mixins مثل الوظائف (functions) في CSS. إليك كيفية كتابة واحدة:
+
+```scss
+@mixin box-shadow($x, $y, $blur, $c){ 
+  -webkit-box-shadow: $x $y $blur $c;
+  -moz-box-shadow: $x $y $blur $c;
+  -ms-box-shadow: $x $y $blur $c;
+  box-shadow: $x $y $blur $c;
+}
+```
+
+يبدأ تعريف `@mixin` يتبعه اسم مخصص. هذه الحجج ( `$x`, و `$y`, و `$blur`, و `$c` في المثال أعلاه) اختيارية. الآن في أي وقت تكون قاعدة `box-shadow` مطلوبة، خط واحد فقط يستبدل mixin الذي يضطر إلى كتابة جميع رموز (vendor prefixes). يتم استدعاء mixin مع توجيه `@include`:
+
+```scss
+div {
+  @include box-shadow(0px, 0px, 4px, #fff);
+}
+```
+
+# --instructions--
+
+اكتب mixin إلى `border-radius` وأعطيه حجة `$radius`. ينبغي أن تستخدم جميع الرموز (vendor prefixes) من المثال. ثم استخدم mixin باسم `border-radius` لإعطاء عنصر `#awesome` حدود نصف قطر بقيمة `15px`.
+
+# --hints--
+
+يجب أن تعلن التعليمات البرمجية الخاصة بك mixin اسمه `border-radius` يحتوي على حِجَّة اسمها `$radius`.
+
+```js
+assert(code.match(/@mixin\s+?border-radius\s*?\(\s*?\$radius\s*?\)\s*?{/gi));
+```
+
+يجب أن يتضمن تعليماتك البرمجية `-webkit-border-radius` رموز (vendor prefix) التي تستخدم حِجَّة `$radius`.
+
+```js
+assert(
+  __helpers.removeWhiteSpace(code).match(/-webkit-border-radius:\$radius;/gi)
+);
+```
+
+يجب أن يتضمن تعليماتك البرمجية `-moz-border-radius` رموز (vendor prefix) التي تستخدم حِجَّة `$radius`.
+
+```js
+assert(
+  __helpers.removeWhiteSpace(code).match(/-moz-border-radius:\$radius;/gi)
+);
+```
+
+يجب أن يتضمن تعليماتك البرمجية `-ms-border-radius` رموز (vendor prefix) التي تستخدم حِجَّة `$radius`.
+
+```js
+assert(__helpers.removeWhiteSpace(code).match(/-ms-border-radius:\$radius;/gi));
+```
+
+يجب أن يتضمن تعليماتك البرمجية `border-radius` رموز (vendor prefix) التي تستخدم حِجَّة `$radius`.
+
+```js
+assert(
+  __helpers.removeWhiteSpace(code).match(/border-radius:\$radius;/gi).length ==
+    4
+);
+```
+
+يجب أن تتصل التعليمات البرمجية الخاصة بك إلى `border-radius mixin` باستخدام الكلمة المفتاحية `@include`، ثم تضعها إلى `15px`.
+
+```js
+assert(code.match(/@include\s+?border-radius\(\s*?15px\s*?\)\s*;/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style type='text/scss'>
+
+
+
+  #awesome {
+    width: 150px;
+    height: 150px;
+    background-color: green;
+
+  }
+</style>
+
+<div id="awesome"></div>
+```
+
+# --solutions--
+
+```html
+<style type='text/scss'>
+  @mixin border-radius($radius) {
+    -webkit-border-radius: $radius;
+    -moz-border-radius: $radius;
+    -ms-border-radius: $radius;
+    border-radius: $radius;
+  }
+
+  #awesome {
+    width: 150px;
+    height: 150px;
+    background-color: green;
+    @include border-radius(15px);
+  }
+</style>
+
+<div id="awesome"></div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/sass/extend-one-set-of-css-styles-to-another-element.md b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/extend-one-set-of-css-styles-to-another-element.md
new file mode 100644
index 00000000000..2501d0014ef
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/extend-one-set-of-css-styles-to-another-element.md
@@ -0,0 +1,116 @@
+---
+id: 587d7fa5367417b2b2512bbd
+title: تمديد مجموعة واحدة من تصميمات CSS إلى عنصر آخر
+challengeType: 0
+forumTopicId: 301456
+dashedName: extend-one-set-of-css-styles-to-another-element
+---
+
+# --description--
+
+Sass لديها مزيّة تسمى `extend` التي تجعل من السهل استعارة قواعد CSS من عنصر واحد والبناء عليها في عنصر آخر.
+
+على سبيل المثال، الكتلة أدناه من قواعد CSS تعمل على تصميم فئة `.panel`. لديه `background-color`, و `height`, و `border`.
+
+```scss
+.panel{
+  background-color: red;
+  height: 70px;
+  border: 2px solid green;
+}
+```
+
+الآن تريد لوحة أخرى تسمى `.big-panel`. لديها نفس الخصائص الأساسية مثل `.panel`، ولكنها تحتاج أيضًا إلى `width` و `font-size`. من الممكن نسخ ولصق قواعد CSS الأولية من `.panel`، ولكن التعليمات البرمجية يصبح متكرراً مع إضافة المزيد من أنواع الألواح. يكون التوجيه `extend` طريقة بسيطة لإعادة استخدام القواعد المكتوبة لعنصر واحد، ثم إضافة المزيد لعنصر آخر:
+
+```scss
+.big-panel{
+  @extend .panel;
+  width: 150px;
+  font-size: 2em;
+}
+```
+
+سيكون `.big-panel` نفس الخصائص مثل `.panel` بالإضافة إلى التصميمات الجديدة.
+
+# --instructions--
+
+اصنع فئة `.info-important` التي يمتد `.info` وأيضاً يحتوي على `background-color` بقيمة magenta.
+
+# --hints--
+
+يجب أن يكون في لفئة `info-important` الخاص بك `background-color` تعيين إلى `magenta`.
+
+```js
+assert(
+  code.match(
+    /\.info-important\s*?{[\s\S]*background-color\s*?:\s*?magenta\s*?;[\s\S]*}/gi
+  )
+);
+```
+
+يجب أن يستخدم فئة `info-important` الخاص بك `@extend` لوراثة التصميم من فئة `info`.
+
+```js
+assert(
+  code.match(/\.info-important\s*?{[\s\S]*@extend\s*?.info\s*?;[\s\S]*/gi)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style type='text/scss'>
+  h3{
+    text-align: center;
+  }
+  .info{
+    width: 200px;
+    border: 1px solid black;
+    margin: 0 auto;
+  }
+
+
+
+
+</style>
+<h3>Posts</h3>
+<div class="info-important">
+  <p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
+</div>
+
+<div class="info">
+  <p>This is a simple post. It has basic styling and can be extended for other uses.</p>
+</div>
+```
+
+# --solutions--
+
+```html
+<style type='text/scss'>
+  h3{
+    text-align: center;
+  }
+  .info{
+    width: 200px;
+    border: 1px solid black;
+    margin: 0 auto;
+  }
+  .info-important{
+    @extend .info;
+    background-color: magenta;
+  }
+
+
+
+</style>
+<h3>Posts</h3>
+<div class="info-important">
+  <p>This is an important post. It should extend the class ".info" and have its own CSS styles.</p>
+</div>
+
+<div class="info">
+  <p>This is a simple post. It has basic styling and can be extended for other uses.</p>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/sass/nest-css-with-sass.md b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/nest-css-with-sass.md
new file mode 100644
index 00000000000..65a377f9a8f
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/nest-css-with-sass.md
@@ -0,0 +1,105 @@
+---
+id: 587d7dbd367417b2b2512bb5
+title: أدخال CSS مع Sass
+challengeType: 0
+forumTopicId: 301457
+dashedName: nest-css-with-sass
+---
+
+# --description--
+
+يسمح Sass بتداخل قواعد CSS، وهي طريقة مفيدة لتنظيم مِلَفّ التصميم (style sheet).
+
+وعادة ما يكون كل عنصر مستهدفاً على خط مختلف لتصميمه، مثل:
+
+```scss
+nav {
+  background-color: red;
+}
+
+nav ul {
+  list-style: none;
+}
+
+nav ul li {
+  display: inline-block;
+}
+```
+
+بالنسبة لمشروع كبير، سيكون مِلَفّ CSS يحتوي على العديد من الأسطر والقواعد. هنا حيث يمكن للتداخل أن يساعد في تنظيم التعليمات البرمجية الخاصة بك عن طريق وضع قواعد تصميم فرعي ضمن العناصر الرئيسية لكل منهما:
+
+```scss
+nav {
+  background-color: red;
+
+  ul {
+    list-style: none;
+
+    li {
+      display: inline-block;
+    }
+  }
+}
+
+```
+
+# --instructions--
+
+استخدم تقنية التعزيز المبينة أعلاه لإعادة تنظيم قواعد CSS لكلا الفرعين من عنصر `.blog-post`. لأغراض الاختبار، يجب أن يأتي `h1` قبل عنصر `p`.
+
+# --hints--
+
+يجب أن تعيد تعليماتك البرمجية تنظيم قواعد CSS بحيث يتم تداخل `h1` و `p` في عنصر الأساسي `.blog-post`.
+
+```js
+assert(
+  code.match(
+    /\.blog-post\s*?{\s*?h1\s*?{\s*?text-align:\s*?center;\s*?color:\s*?blue;\s*?}\s*?p\s*?{\s*?font-size:\s*?20px;\s*?}\s*?}/gi
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style type='text/scss'>
+  .blog-post {
+
+  }
+  h1 {
+    text-align: center;
+    color: blue;
+  }
+  p {
+    font-size: 20px;
+  }
+</style>
+
+<div class="blog-post">
+  <h1>Blog Title</h1>
+  <p>This is a paragraph</p>
+</div>
+```
+
+# --solutions--
+
+```html
+<style type='text/scss'>
+  .blog-post {
+    h1 {
+      text-align: center;
+      color: blue;
+    }
+    p {
+      font-size: 20px;
+    }
+  }
+</style>
+
+<div class="blog-post">
+  <h1>Blog Title</h1>
+  <p>This is a paragraph</p>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md
new file mode 100644
index 00000000000..9b93760d5d1
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/split-your-styles-into-smaller-chunks-with-partials.md
@@ -0,0 +1,47 @@
+---
+id: 587d7dbf367417b2b2512bbc
+title: تقسيم تصميماتك إلى قطع (Chunks) أصغر مع أجزاء (Partials)
+challengeType: 0
+forumTopicId: 301459
+dashedName: split-your-styles-into-smaller-chunks-with-partials
+---
+
+# --description--
+
+<dfn>الأجزاء (Partials)</dfn> في Sass هي ملفات منفصلة تحتوي على أجزاء من تعلميات برمجية CSS. وهي مستوردة ومستخدمة في ملفات Sass الأخرى. هذه طريقة رائعة لتجميع تعليمات برمجية مماثلة إلى نموذج (module) للحفاظ على تنظيمها.
+
+أسماء الجزئيات (partials) تبدأ بحرف السطر (`_`)، الذي يخبر Sass أنه جزء صغير من CSS ولا يتحول الجزء إلى مِلَفّ CSS. كذلك تنتهي ملفات Sass بملحق المِلَفّ `.scss`. لجلب التعليمات البرمجية في الجزء الجزئي (partial) إلى مِلَفّ Sass آخر، استخدم التوجيه `@import`.
+
+على سبيل المثال، إذا تم حفظ جميع mixins الخاصة بك في اسم جزئي "\_mixins.scss"، وهي ضرورية في مِلَفّ "main.scss"، هذه هي كيفية استخدامها في المِلَفّ الرئيس:
+
+```scss
+@import 'mixins'
+```
+
+لاحظ أن امتداد السطر والملف غير ضروري في تعبير `import` - تفهمه Sass على أنه جزئي. بمجرد استيراد جزء (partial) إلى مِلَفّ، تكون جميع المتغيرات (variables), و mixins, والتعليمات البرمجية الأخرى متاحة للاستخدام.
+
+# --instructions--
+
+اكتب بيان `@import` لاستيراد اسم جزئي `_variables.scss` إلى المِلَفّ main.scss.
+
+# --hints--
+
+يجب أن تستخدم التعليمات البرمجية الخاصة بك توجيه `@import` ولا يجب أن تتضمن أسفل السطر في اسم المِلَفّ.
+
+```js
+assert(code.match(/@import\s+?('|")variables\1/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!-- The main.scss file -->
+```
+
+# --solutions--
+
+```html
+@import 'variables'
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/sass/store-data-with-sass-variables.md b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/store-data-with-sass-variables.md
new file mode 100644
index 00000000000..b037972d455
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/store-data-with-sass-variables.md
@@ -0,0 +1,121 @@
+---
+id: 587d7dbd367417b2b2512bb4
+title: تخزين البيانات مع المتغيرات Variables في Sass
+challengeType: 0
+forumTopicId: 301460
+dashedName: store-data-with-sass-variables
+---
+
+# --description--
+
+إحدى ميزات Sass التي تختلف عن CSS هي أنها تستخدم المتغيرات. يتم الإعلان عنها وتجهيزها لتخزين البيانات، شبيهاً إلى JavaScript.
+
+في JavaScript، يتم تعريف المتغيرات باستخدام كلمات `let` و `const`. في الأسعار، تبدأ المتغيرات بعلامة `$` يتبعها اسم المتغير.
+
+وفيما يلي بعض الأمثلة على ذلك:
+
+```scss
+$main-fonts: Arial, sans-serif;
+$headings-color: green;
+```
+
+ولاستخدام المتغيرات:
+
+```scss
+h1 {
+  font-family: $main-fonts;
+  color: $headings-color;
+}
+```
+
+وأحد الأمثلة التي تكون فيها المتغيرات مفيدة هو عندما يلزم أن يكون عدد من العناصر نفس اللون. إذا تم تغيير هذا اللون، فإن المكان الوحيد لتعديل الكود هو قيمة المتغير.
+
+# --instructions--
+
+أنشئ متغير `$text-color` بقيمة `red`. ثم غير قيمة خاصية `color` إلى `.blog-post` و `h2` إلى متغير `$text-color`.
+
+# --hints--
+
+يجب أن يحتوي التعليمات البرمجية الخاص بك على متغير Sass معلن باسم `$text-color` بقيمة `red`.
+
+```js
+assert(code.match(/\$text-color\s*:\s*?red\s*;/g));
+```
+
+يجب أن تستخدم التعليمات البرمجية متغير `$text-color` لتغيير `color` في عناصر `.blog-post` و `h2`.
+
+```js
+assert(code.match(/color\s*:\s*\$text-color\s*;?/g));
+```
+
+يجب أن يحتوي عنصر `.blog-post` الخاص بك على `color` الأحمر (red).
+
+```js
+assert($('.blog-post').css('color') == 'rgb(255, 0, 0)');
+```
+
+يجب أن تحتوي عناصر `h2` الخاصة بك على `color` الأحمر (red).
+
+```js
+assert($('h2').css('color') == 'rgb(255, 0, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style type='text/scss'>
+
+
+  .header{
+    text-align: center;
+  }
+  .blog-post, h2 {
+    color: red;
+  }
+</style>
+
+<h1 class="header">Learn Sass</h1>
+<div class="blog-post">
+  <h2>Some random title</h2>
+  <p>This is a paragraph with some random text in it</p>
+</div>
+<div class="blog-post">
+  <h2>Header #2</h2>
+  <p>Here is some more random text.</p>
+</div>
+<div class="blog-post">
+  <h2>Here is another header</h2>
+  <p>Even more random text within a paragraph</p>
+</div>
+```
+
+# --solutions--
+
+```html
+<style type='text/scss'>
+  $text-color: red;
+
+  .header{
+    text-align: center;
+  }
+  .blog-post, h2 {
+    color: $text-color;
+  }
+</style>
+
+<h1 class="header">Learn Sass</h1>
+<div class="blog-post">
+  <h2>Some random title</h2>
+  <p>This is a paragraph with some random text in it</p>
+</div>
+<div class="blog-post">
+  <h2>Header #2</h2>
+  <p>Here is some more random text.</p>
+</div>
+<div class="blog-post">
+  <h2>Here is another header</h2>
+  <p>Even more random text within a paragraph</p>
+</div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md
new file mode 100644
index 00000000000..f846c0b4970
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/use-each-to-map-over-items-in-a-list.md
@@ -0,0 +1,135 @@
+---
+id: 587d7dbf367417b2b2512bba
+title: استخدام @each لتركيب (Map) العناصر في القائمة (List)
+challengeType: 0
+forumTopicId: 301461
+dashedName: use-each-to-map-over-items-in-a-list
+---
+
+# --description--
+
+وأظهر التحدي الأخير كيف يستخدم التوجيه `@for` قيمة البَدْء و النهاية لتكرار عدد معين من المرات. يوفر Sass أيضًا التوجيه `@each` الذي يدور حول كل عنصر في قائمة (list) أو مركَب (map). في كل تكرار (iteration)، يتم تعيين المتغير للقيمة الحالية من القائمة (list) أو المركَب (map).
+
+```scss
+@each $color in blue, red, green {
+  .#{$color}-text {color: $color;}
+}
+```
+
+المركَب لها صياغة مختلفة قليلاً. وهذا مثال على ذلك:
+
+```scss
+$colors: (color1: blue, color2: red, color3: green);
+
+@each $key, $color in $colors {
+  .#{$color}-text {color: $color;}
+}
+```
+
+لاحظ أن المتغير `$key` مطلوب للإشارة إلى الهُوِيَّات (keys) في الخريطة (map). وإلا فإن CSS المنشئة (compiled) سيكون لديها `color1` و `color2`... فيها. يتم تحويل مثالي التعليمات البرمجية أعلاه إلى CSS التالية:
+
+```scss
+.blue-text {
+  color: blue;
+}
+
+.red-text {
+  color: red;
+}
+
+.green-text {
+  color: green;
+}
+```
+
+# --instructions--
+
+كتابة توجيه `@each` الذي يمر من طريق قائمة: `blue, black, red` ويعين كل متغير إلى فئة `.color-bg`, حيث يتغير `color` الجزء لكل عنصر. يجب على كل فئة أن يعين اللون `background-color` كاللون المعني.
+
+# --hints--
+
+يجب أن تستخدم التعليمات البرمجية الخاصة بك توجيه `@each`.
+
+```js
+assert(code.match(/@each /g));
+```
+
+يجب أن يكون لفئة `.blue-bg` الخاص بك `background-color` باللون الأزرق.
+
+```js
+assert($('.blue-bg').css('background-color') == 'rgb(0, 0, 255)');
+```
+
+يجب أن يكون لفئة `.black-bg` الخاص بك `background-color` من الأسود.
+
+```js
+assert($('.black-bg').css('background-color') == 'rgb(0, 0, 0)');
+```
+
+يجب أن يكون لفئة `.red-bg` الخاص بك `background-color` باللون الأحمر.
+
+```js
+assert($('.red-bg').css('background-color') == 'rgb(255, 0, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style type='text/scss'>
+
+
+
+  div {
+    height: 200px;
+    width: 200px;
+  }
+</style>
+
+<div class="blue-bg"></div>
+<div class="black-bg"></div>
+<div class="red-bg"></div>
+```
+
+# --solutions--
+
+```html
+<style type='text/scss'>
+
+  @each $color in blue, black, red {
+    .#{$color}-bg {background-color: $color;}
+  }
+
+  div {
+    height: 200px;
+    width: 200px;
+  }
+</style>
+
+<div class="blue-bg"></div>
+<div class="black-bg"></div>
+<div class="red-bg"></div>
+```
+
+---
+
+```html
+<style type='text/scss'>
+
+  $colors: (color1: blue, color2: black, color3: red);
+
+  @each $key, $color in $colors {
+    .#{$color}-bg {background-color: $color;}
+  }
+
+  div {
+    height: 200px;
+    width: 200px;
+  }
+</style>
+
+<div class="blue-bg"></div>
+<div class="black-bg"></div>
+<div class="red-bg"></div>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/sass/use-for-to-create-a-sass-loop.md b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/use-for-to-create-a-sass-loop.md
new file mode 100644
index 00000000000..9ff8f919128
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/use-for-to-create-a-sass-loop.md
@@ -0,0 +1,139 @@
+---
+id: 587d7dbe367417b2b2512bb9
+title: استخدم @for لأنشاء حلقة Sass
+challengeType: 0
+forumTopicId: 301462
+dashedName: use-for-to-create-a-sass-loop
+---
+
+# --description--
+
+يضيف التوجيه `@for` لتصميم بواسطة حلقة (loop)، شبيهة `for` جداً لحلقة (loop) في JavaScript.
+
+`@for` يستخدم بطريقتين: "start through end" أو "start to end". الفرق الرئيس هو أن "بداية **إلى** نهاية" *يستبعد* الرَّقَم النهائي كجزء من العد، و "ابدأ **حتى** نهاية" *يتضمن* الرَّقَم النهائي كجزء من العد.
+
+إليك بداية **حتى** مثال نهاية:
+
+```scss
+@for $i from 1 through 12 {
+  .col-#{$i} { width: 100%/12 * $i; }
+}
+```
+
+جزء `#{$i}` هو بناء الجملة للجمع بين المتغير (`i`) مع النص لنشئ string. عندما يتم تحويل مِلَفّ Sass إلى CSS، يبدو كذلك:
+
+```scss
+.col-1 {
+  width: 8.33333%;
+}
+
+.col-2 {
+  width: 16.66667%;
+}
+
+...
+
+.col-12 {
+  width: 100%;
+}
+```
+
+هذه طريقة قوية لإنشاء تخطيط شبكي (grid layout). الآن لديك 12 خياراً لعرض الأعمدة المتاحة كفئات CSS.
+
+# --instructions--
+
+كتابة توجيه `@for` الذي يأخذ متغير `$j` الذي ينتقل من 1 **إلى** 6.
+
+يجب أن ينشئ 5 فئات تسمى `.text-1` إلى `.text-5` حيث كل واحد لديه `font-size` بقيمه 15px مضروبة بالترتيب.
+
+# --hints--
+
+يجب أن تستخدم التعليمات البرمجية الخاصة بك توجيه `@for`.
+
+```js
+assert(code.match(/@for /g));
+```
+
+يجب أن يكون للفئة `.text-1` الخاص بك `font-size` بقيمة 15px.
+
+```js
+assert($('.text-1').css('font-size') == '15px');
+```
+
+يجب أن يكون للفئة `.text-2` الخاص بك `font-size` بقيمة 30px.
+
+```js
+assert($('.text-2').css('font-size') == '30px');
+```
+
+يجب أن يكون للفئة `.text-3` الخاص بك `font-size` بقيمة 45px.
+
+```js
+assert($('.text-3').css('font-size') == '45px');
+```
+
+يجب أن يكون للفئة `.text-4` الخاص بك `font-size` بقيمة 60px.
+
+```js
+assert($('.text-4').css('font-size') == '60px');
+```
+
+يجب أن يكون للفئة `.text-5` الخاص بك `font-size` بقيمة 75px.
+
+```js
+assert($('.text-5').css('font-size') == '75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style type='text/scss'>
+
+
+
+</style>
+
+<p class="text-1">Hello</p>
+<p class="text-2">Hello</p>
+<p class="text-3">Hello</p>
+<p class="text-4">Hello</p>
+<p class="text-5">Hello</p>
+```
+
+# --solutions--
+
+```html
+<style type='text/scss'>
+
+@for $i from 1 through 5 {
+  .text-#{$i} { font-size: 15px * $i; }
+}
+
+</style>
+
+<p class="text-1">Hello</p>
+<p class="text-2">Hello</p>
+<p class="text-3">Hello</p>
+<p class="text-4">Hello</p>
+<p class="text-5">Hello</p>
+```
+
+---
+
+```html
+<style type='text/scss'>
+
+@for $i from 1 to 6 {
+  .text-#{$i} { font-size: 15px * $i; }
+}
+
+</style>
+
+<p class="text-1">Hello</p>
+<p class="text-2">Hello</p>
+<p class="text-3">Hello</p>
+<p class="text-4">Hello</p>
+<p class="text-5">Hello</p>
+```
diff --git a/curriculum/challenges/arabic/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md
new file mode 100644
index 00000000000..b6e04b41787
--- /dev/null
+++ b/curriculum/challenges/arabic/03-front-end-development-libraries/sass/use-if-and-else-to-add-logic-to-your-styles.md
@@ -0,0 +1,145 @@
+---
+id: 587d7dbe367417b2b2512bb8
+title: استخدم @if و @else لإضافة المنطق إلى التصميم الخاصة بك
+challengeType: 0
+forumTopicId: 301463
+dashedName: use-if-and-else-to-add-logic-to-your-styles
+---
+
+# --description--
+
+التوجيه `@if` في Sass مفيد لاختبار حالة محددة - إنه يعمل تماما مثل `if` بيان في JavaScript.
+
+```scss
+@mixin make-bold($bool) {
+  @if $bool == true {
+    font-weight: bold;
+  }
+}
+```
+
+ومثلها تماما في JavaScript، يختبرا `@else if` و `@else` المزيد من الشروط:
+
+```scss
+@mixin text-effect($val) {
+  @if $val == danger {
+    color: red;
+  }
+  @else if $val == alert {
+    color: yellow;
+  }
+  @else if $val == success {
+    color: green;
+  }
+  @else {
+    color: black;
+  }
+}
+```
+
+# --instructions--
+
+إنشاء mixin يسمى `border-stroke` التي تأخذ حَجَّة `$val`. يجب على mixin التحقق من الشروط التالية باستخدام `@if`، و `@else if`، و `@else`:
+
+```scss
+light - 1px solid black
+medium - 3px solid black
+heavy - 6px solid black
+```
+
+إذا كان `$val` ليس `light`، أو `medium`، أو `heavy`، ينبغي تعيين border إلى `none`.
+
+# --hints--
+
+يجب أن تعلن التعليمات البرمجية الخاصة بك mixin اسمه `border-stroke` يحتوي على حِجَّة اسمها `$val`.
+
+```js
+assert(code.match(/@mixin\s+?border-stroke\s*?\(\s*?\$val\s*?\)\s*?{/gi));
+```
+
+يجب أن يكون لدى mixin الخاص بك تعبير `@if` يتحقق مما إذا كان `$val` هو `light`، ولتحديد `border` بقيمة `1px solid black`.
+
+```js
+assert(
+  code.match(
+    /@if\s+?\$val\s*?===?\s*?light\s*?{\s*?border\s*?:\s*?1px\s+?solid\s+?black\s*?;\s*?}/gi
+  )
+);
+```
+
+يجب أن يكون لدى mixin الخاص بك تعبير `@else if` يتحقق مما إذا كان `$val` هو `medium`، ولتحديد `border` بقيمة `3px solid black`.
+
+```js
+assert(
+  code.match(
+    /@else\s+?if\s+?\$val\s*?===?\s*?medium\s*?{\s*?border\s*?:\s*?3px\s+?solid\s+?black\s*?;\s*?}/gi
+  )
+);
+```
+
+يجب أن يكون لدى mixin الخاص بك تعبير `@else if` يتحقق مما إذا كان `$val` هو `heavy`، ولتحديد `border` بقيمة `6px solid black`.
+
+```js
+assert(
+  code.match(
+    /@else\s+?if\s+?\$val\s*?===?\s*?heavy\s*?{\s*?border\s*?:\s*?6px\s+?solid\s+?black\s*?;\s*?}/gi
+  )
+);
+```
+
+يجب أن يحتوي mixin الخاص بك على تعبير `@else` لتحديد `border` إلى `none`.
+
+```js
+assert(code.match(/@else\s*?{\s*?border\s*?:\s*?none\s*?;\s*?}/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style type='text/scss'>
+
+
+
+  #box {
+    width: 150px;
+    height: 150px;
+    background-color: red;
+    @include border-stroke(medium);
+  }
+</style>
+
+<div id="box"></div>
+```
+
+# --solutions--
+
+```html
+<style type='text/scss'>
+  @mixin border-stroke($val) {
+    @if $val == light {
+      border: 1px solid black;
+    }
+    @else if $val == medium {
+      border: 3px solid black;
+    }
+    @else if $val == heavy {
+      border: 6px solid black;
+    }
+    @else {
+      border: none;
+    }
+  }
+
+
+  #box {
+    width: 150px;
+    height: 150px;
+    background-color: red;
+    @include border-stroke(medium);
+  }
+</style>
+
+<div id="box"></div>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md
new file mode 100644
index 00000000000..4e648ec9b72
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md
@@ -0,0 +1,53 @@
+---
+id: bd7168d8c242eddfaeb5bd13
+title: Visualize Data with a Bar Chart
+challengeType: 3
+forumTopicId: 301464
+dashedName: visualize-data-with-a-bar-chart
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://bar-chart.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://bar-chart.freecodecamp.rocks</a>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
+
+**User Story #1:** My chart should have a title with a corresponding `id="title"`.
+
+**User Story #2:** My chart should have a `g` element x-axis with a corresponding `id="x-axis"`.
+
+**User Story #3:** My chart should have a `g` element y-axis with a corresponding `id="y-axis"`.
+
+**User Story #4:** Both axes should contain multiple tick labels, each with a corresponding `class="tick"`.
+
+**User Story #5:** My chart should have a `rect` element for each data point with a corresponding `class="bar"` displaying the data.
+
+**User Story #6:** Each bar should have the properties `data-date` and `data-gdp` containing `date` and `GDP` values.
+
+**User Story #7:** The bar elements' `data-date` properties should match the order of the provided data.
+
+**User Story #8:** The bar elements' `data-gdp` properties should match the order of the provided data.
+
+**User Story #9:** Each bar element's height should accurately represent the data's corresponding `GDP`.
+
+**User Story #10:** The `data-date` attribute and its corresponding bar element should align with the corresponding value on the x-axis.
+
+**User Story #11:** The `data-gdp` attribute and its corresponding bar element should align with the corresponding value on the y-axis.
+
+**User Story #12:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
+
+**User Story #13:** My tooltip should have a `data-date` property that corresponds to the `data-date` of the active area.
+
+Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
+
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`.
+
+Once you're done, submit the URL to your working project with all its tests passing.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md
new file mode 100644
index 00000000000..7d17875db05
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md
@@ -0,0 +1,52 @@
+---
+id: 587d7fa6367417b2b2512bbf
+title: Visualize Data with a Choropleth Map
+challengeType: 3
+forumTopicId: 301465
+dashedName: visualize-data-with-a-choropleth-map
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://choropleth-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://choropleth-map.freecodecamp.rocks</a>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
+
+**User Story #1:** My choropleth should have a title with a corresponding `id="title"`.
+
+**User Story #2:** My choropleth should have a description element with a corresponding `id="description"`.
+
+**User Story #3:** My choropleth should have counties with a corresponding `class="county"` that represent the data.
+
+**User Story #4:** There should be at least 4 different fill colors used for the counties.
+
+**User Story #5:** My counties should each have `data-fips` and `data-education` properties containing their corresponding `fips` and `education` values.
+
+**User Story #6:** My choropleth should have a county for each provided data point.
+
+**User Story #7:** The counties should have `data-fips` and `data-education` values that match the sample data.
+
+**User Story #8:** My choropleth should have a legend with a corresponding `id="legend"`.
+
+**User Story #9:** There should be at least 4 different fill colors used for the legend.
+
+**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
+
+**User Story #11:** My tooltip should have a `data-education` property that corresponds to the `data-education` of the active area.
+
+Here are the datasets you will need to complete this project:
+
+-   **US Education Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
+-   **US County Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
+
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Once you're done, submit the URL to your working project with all its tests passing.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md
new file mode 100644
index 00000000000..cd7e5632a5d
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md
@@ -0,0 +1,61 @@
+---
+id: bd7188d8c242eddfaeb5bd13
+title: Visualize Data with a Heat Map
+challengeType: 3
+forumTopicId: 301466
+dashedName: visualize-data-with-a-heat-map
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://heat-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://heat-map.freecodecamp.rocks</a>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
+
+**User Story #1:** My heat map should have a title with a corresponding `id="title"`.
+
+**User Story #2:** My heat map should have a description with a corresponding `id="description"`.
+
+**User Story #3:** My heat map should have an x-axis with a corresponding `id="x-axis"`.
+
+**User Story #4:** My heat map should have a y-axis with a corresponding `id="y-axis"`.
+
+**User Story #5:** My heat map should have `rect` elements with a `class="cell"` that represent the data.
+
+**User Story #6:** There should be at least 4 different fill colors used for the cells.
+
+**User Story #7:** Each cell will have the properties `data-month`, `data-year`, `data-temp` containing their corresponding `month`, `year`, and `temperature` values.
+
+**User Story #8:** The `data-month`, `data-year` of each cell should be within the range of the data.
+
+**User Story #9:** My heat map should have cells that align with the corresponding month on the y-axis.
+
+**User Story #10:** My heat map should have cells that align with the corresponding year on the x-axis.
+
+**User Story #11:** My heat map should have multiple tick labels on the y-axis with the full month name.
+
+**User Story #12:** My heat map should have multiple tick labels on the x-axis with the years between 1754 and 2015.
+
+**User Story #13:** My heat map should have a legend with a corresponding `id="legend"`.
+
+**User Story #14:** My legend should contain `rect` elements.
+
+**User Story #15:** The `rect` elements in the legend should use at least 4 different fill colors.
+
+**User Story #16:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
+
+**User Story #17:** My tooltip should have a `data-year` property that corresponds to the `data-year` of the active area.
+
+Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
+
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Once you're done, submit the URL to your working project with all its tests passing.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md
new file mode 100644
index 00000000000..1091fe8f598
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md
@@ -0,0 +1,57 @@
+---
+id: bd7178d8c242eddfaeb5bd13
+title: Visualize Data with a Scatterplot Graph
+challengeType: 3
+forumTopicId: 301467
+dashedName: visualize-data-with-a-scatterplot-graph
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://scatterplot-graph.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://scatterplot-graph.freecodecamp.rocks</a>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
+
+**User Story #1:** I can see a title element that has a corresponding `id="title"`.
+
+**User Story #2:** I can see an x-axis that has a corresponding `id="x-axis"`.
+
+**User Story #3:** I can see a y-axis that has a corresponding `id="y-axis"`.
+
+**User Story #4:** I can see dots, that each have a class of `dot`, which represent the data being plotted.
+
+**User Story #5:** Each dot should have the properties `data-xvalue` and `data-yvalue` containing their corresponding `x` and `y` values.
+
+**User Story #6:** The `data-xvalue` and `data-yvalue` of each dot should be within the range of the actual data and in the correct data format. For `data-xvalue`, integers (full years) or `Date` objects are acceptable for test evaluation. For `data-yvalue` (minutes), use `Date` objects.
+
+**User Story #7:** The `data-xvalue` and its corresponding dot should align with the corresponding point/value on the x-axis.
+
+**User Story #8:** The `data-yvalue` and its corresponding dot should align with the corresponding point/value on the y-axis.
+
+**User Story #9:** I can see multiple tick labels on the y-axis with `%M:%S` time format.
+
+**User Story #10:** I can see multiple tick labels on the x-axis that show the year.
+
+**User Story #11:** I can see that the range of the x-axis labels are within the range of the actual x-axis data.
+
+**User Story #12:** I can see that the range of the y-axis labels are within the range of the actual y-axis data.
+
+**User Story #13:** I can see a legend containing descriptive text that has `id="legend"`.
+
+**User Story #14:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
+
+**User Story #15:** My tooltip should have a `data-year` property that corresponds to the `data-xvalue` of the active area.
+
+Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
+
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Once you're done, submit the URL to your working project with all its tests passing.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md
new file mode 100644
index 00000000000..3e26785b9ec
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md
@@ -0,0 +1,53 @@
+---
+id: 587d7fa6367417b2b2512bc0
+title: Visualize Data with a Treemap Diagram
+challengeType: 3
+forumTopicId: 301468
+dashedName: visualize-data-with-a-treemap-diagram
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://treemap-diagram.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://treemap-diagram.freecodecamp.rocks</a>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
+
+**User Story #1:** My tree map should have a title with a corresponding `id="title"`.
+
+**User Story #2:** My tree map should have a description with a corresponding `id="description"`.
+
+**User Story #3:** My tree map should have `rect` elements with a corresponding `class="tile"` that represent the data.
+
+**User Story #4:** There should be at least 2 different fill colors used for the tiles.
+
+**User Story #5:** Each tile should have the properties `data-name`, `data-category`, and `data-value` containing their corresponding `name`, `category`, and `value`.
+
+**User Story #6:** The area of each tile should correspond to the `data-value` amount: tiles with a larger `data-value` should have a bigger area.
+
+**User Story #7:** My tree map should have a legend with corresponding `id="legend"`.
+
+**User Story #8:** My legend should have `rect` elements with a corresponding `class="legend-item"`.
+
+**User Story #9:** The `rect` elements in the legend should use at least 2 different fill colors.
+
+**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
+
+**User Story #11:** My tooltip should have a `data-value` property that corresponds to the `data-value` of the active area.
+
+For this project you can use any of the following datasets:
+
+-   **Kickstarter Pledges:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
+-   **Movie Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
+-   **Video Game Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
+
+You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target="_blank" rel="noopener noreferrer nofollow">using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
+
+Once you're done, submit the URL to your working project with all its tests passing.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.md
new file mode 100644
index 00000000000..beb4f349927
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.md
@@ -0,0 +1,118 @@
+---
+id: 587d7faa367417b2b2512bd4
+title: Add a Hover Effect to a D3 Element
+challengeType: 6
+forumTopicId: 301469
+dashedName: add-a-hover-effect-to-a-d3-element
+---
+
+# --description--
+
+It's possible to add effects that highlight a bar when the user hovers over it with the mouse. So far, the styling for the rectangles is applied with the built-in D3 and SVG methods, but you can use CSS as well.
+
+You set the CSS class on the SVG elements with the `attr()` method. Then the `:hover` pseudo-class for your new class holds the style rules for any hover effects.
+
+# --instructions--
+
+Use the `attr()` method to add a class of `bar` to all the `rect` elements. This changes the `fill` color of the bar to brown when you mouse over it.
+
+# --hints--
+
+Your `rect` elements should have a class of `bar`.
+
+```js
+assert($('rect').attr('class').trim().split(/\s+/g).includes('bar'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .bar:hover {
+    fill: brown;
+  }
+</style>
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - 3 * d)
+       .attr("width", 25)
+       .attr("height", (d, i) => 3 * d)
+       .attr("fill", "navy")
+       // Add your code below this line
+
+
+
+       // Add your code above this line
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       .text((d) => d)
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - (3 * d) - 3);
+
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<style>
+  .bar:hover {
+    fill: brown;
+  }
+</style>
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - 3 * d)
+       .attr("width", 25)
+       .attr("height", (d, i) => 3 * d)
+       .attr("fill", "navy")
+       // Add your code below this line
+       .attr('class', 'bar')
+       // Add your code above this line
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       .text((d) => d)
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - (3 * d) - 3);
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md
new file mode 100644
index 00000000000..869ca675f99
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md
@@ -0,0 +1,175 @@
+---
+id: 587d7faa367417b2b2512bd6
+title: Add a Tooltip to a D3 Element
+challengeType: 6
+forumTopicId: 301470
+dashedName: add-a-tooltip-to-a-d3-element
+---
+
+# --description--
+
+A tooltip shows more information about an item on a page when the user hovers over that item. There are several ways to add a tooltip to a visualization, this challenge uses the SVG `title` element.
+
+`title` pairs with the `text()` method to dynamically add data to the bars.
+
+# --instructions--
+
+Append a `title` element under each `rect` node. Then call the `text()` method with a callback function so the text displays the data value.
+
+# --hints--
+
+Your code should have 9 `title` elements.
+
+```js
+assert($('title').length == 9);
+```
+
+The first `title` element should have tooltip text of `12`.
+
+```js
+assert($('title').eq(0).text() == '12');
+```
+
+The second `title` element should have tooltip text of `31`.
+
+```js
+assert($('title').eq(1).text() == '31');
+```
+
+The third `title` element should have tooltip text of `22`.
+
+```js
+assert($('title').eq(2).text() == '22');
+```
+
+The fourth `title` element should have tooltip text of `17`.
+
+```js
+assert($('title').eq(3).text() == '17');
+```
+
+The fifth `title` element should have tooltip text of `25`.
+
+```js
+assert($('title').eq(4).text() == '25');
+```
+
+The sixth `title` element should have tooltip text of `18`.
+
+```js
+assert($('title').eq(5).text() == '18');
+```
+
+The seventh `title` element should have tooltip text of `29`.
+
+```js
+assert($('title').eq(6).text() == '29');
+```
+
+The eighth `title` element should have tooltip text of `14`.
+
+```js
+assert($('title').eq(7).text() == '14');
+```
+
+The ninth `title` element should have tooltip text of `9`.
+
+```js
+assert($('title').eq(8).text() == '9');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .bar:hover {
+    fill: brown;
+  }
+</style>
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - 3 * d)
+       .attr("width", 25)
+       .attr("height", (d, i) => d * 3)
+       .attr("fill", "navy")
+       .attr("class", "bar")
+       // Add your code below this line
+
+
+
+       // Add your code above this line
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       .text((d) => d)
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - (d * 3 + 3))
+
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<style>
+  .bar:hover {
+    fill: brown;
+  }
+</style>
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - 3 * d)
+       .attr("width", 25)
+       .attr("height", (d, i) => d * 3)
+       .attr("fill", "navy")
+       .attr("class", "bar")
+       .append("title")
+       .text((d) => d)
+
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       .text((d) => d)
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - (d * 3 + 3))
+
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md
new file mode 100644
index 00000000000..f8ad5729131
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md
@@ -0,0 +1,211 @@
+---
+id: 587d7fab367417b2b2512bd8
+title: Add Attributes to the Circle Elements
+challengeType: 6
+forumTopicId: 301471
+dashedName: add-attributes-to-the-circle-elements
+---
+
+# --description--
+
+The last challenge created the `circle` elements for each point in the `dataset`, and appended them to the SVG canvas. But D3 needs more information about the position and size of each `circle` to display them correctly.
+
+A `circle` in SVG has three main attributes. The `cx` and `cy` attributes are the coordinates. They tell D3 where to position the *center* of the shape on the SVG canvas. The radius (`r` attribute) gives the size of the `circle`.
+
+Just like the `rect` `y` coordinate, the `cy` attribute for a `circle` is measured from the top of the SVG canvas, not from the bottom.
+
+All three attributes can use a callback function to set their values dynamically. Remember that all methods chained after `data(dataset)` run once per item in `dataset`. The `d` parameter in the callback function refers to the current item in `dataset`, which is an array for each point. You use bracket notation, like `d[0]`, to access the values in that array.
+
+# --instructions--
+
+Add `cx`, `cy`, and `r` attributes to the `circle` elements. The `cx` value should be the first number in the array for each item in `dataset`. The `cy` value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. The `r` value should be `5` for all circles.
+
+# --hints--
+
+Your code should have 10 `circle` elements.
+
+```js
+assert($('circle').length == 10);
+```
+
+The first `circle` element should have a `cx` value of `34`, a `cy` value of `422`, and an `r` value of `5`.
+
+```js
+assert(
+  $('circle').eq(0).attr('cx') == '34' &&
+    $('circle').eq(0).attr('cy') == '422' &&
+    $('circle').eq(0).attr('r') == '5'
+);
+```
+
+The second `circle` element should have a `cx` value of `109`, a `cy` value of `220`, and an `r` value of `5`.
+
+```js
+assert(
+  $('circle').eq(1).attr('cx') == '109' &&
+    $('circle').eq(1).attr('cy') == '220' &&
+    $('circle').eq(1).attr('r') == '5'
+);
+```
+
+The third `circle` element should have a `cx` value of `310`, a `cy` value of `380`, and an `r` value of `5`.
+
+```js
+assert(
+  $('circle').eq(2).attr('cx') == '310' &&
+    $('circle').eq(2).attr('cy') == '380' &&
+    $('circle').eq(2).attr('r') == '5'
+);
+```
+
+The fourth `circle` element should have a `cx` value of `79`, a `cy` value of `89`, and an `r` value of `5`.
+
+```js
+assert(
+  $('circle').eq(3).attr('cx') == '79' &&
+    $('circle').eq(3).attr('cy') == '89' &&
+    $('circle').eq(3).attr('r') == '5'
+);
+```
+
+The fifth `circle` element should have a `cx` value of `420`, a `cy` value of `280`, and an `r` value of `5`.
+
+```js
+assert(
+  $('circle').eq(4).attr('cx') == '420' &&
+    $('circle').eq(4).attr('cy') == '280' &&
+    $('circle').eq(4).attr('r') == '5'
+);
+```
+
+The sixth `circle` element should have a `cx` value of `233`, a `cy` value of `355`, and an `r` value of `5`.
+
+```js
+assert(
+  $('circle').eq(5).attr('cx') == '233' &&
+    $('circle').eq(5).attr('cy') == '355' &&
+    $('circle').eq(5).attr('r') == '5'
+);
+```
+
+The seventh `circle` element should have a `cx` value of `333`, a `cy` value of `404`, and an `r` value of `5`.
+
+```js
+assert(
+  $('circle').eq(6).attr('cx') == '333' &&
+    $('circle').eq(6).attr('cy') == '404' &&
+    $('circle').eq(6).attr('r') == '5'
+);
+```
+
+The eighth `circle` element should have a `cx` value of `222`, a `cy` value of `167`, and an `r` value of `5`.
+
+```js
+assert(
+  $('circle').eq(7).attr('cx') == '222' &&
+    $('circle').eq(7).attr('cy') == '167' &&
+    $('circle').eq(7).attr('r') == '5'
+);
+```
+
+The ninth `circle` element should have a `cx` value of `78`, a `cy` value of `180`, and an `r` value of `5`.
+
+```js
+assert(
+  $('circle').eq(8).attr('cx') == '78' &&
+    $('circle').eq(8).attr('cy') == '180' &&
+    $('circle').eq(8).attr('r') == '5'
+);
+```
+
+The tenth `circle` element should have a `cx` value of `21`, a `cy` value of `377`, and an `r` value of `5`.
+
+```js
+assert(
+  $('circle').eq(9).attr('cx') == '21' &&
+    $('circle').eq(9).attr('cy') == '377' &&
+    $('circle').eq(9).attr('r') == '5'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [
+                  [ 34,    78 ],
+                  [ 109,   280 ],
+                  [ 310,   120 ],
+                  [ 79,    411 ],
+                  [ 420,   220 ],
+                  [ 233,   145 ],
+                  [ 333,   96 ],
+                  [ 222,   333 ],
+                  [ 78,    320 ],
+                  [ 21,    123 ]
+                ];
+
+
+    const w = 500;
+    const h = 500;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("circle")
+       .data(dataset)
+       .enter()
+       .append("circle")
+       // Add your code below this line
+
+
+
+       // Add your code above this line
+
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [
+                  [ 34,    78 ],
+                  [ 109,   280 ],
+                  [ 310,   120 ],
+                  [ 79,    411 ],
+                  [ 420,   220 ],
+                  [ 233,   145 ],
+                  [ 333,   96 ],
+                  [ 222,   333 ],
+                  [ 78,    320 ],
+                  [ 21,    123 ]
+                ];
+
+
+    const w = 500;
+    const h = 500;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("circle")
+       .data(dataset)
+       .enter()
+       .append("circle")
+       .attr("cx", (d) => d[0])
+       .attr("cy", (d) => h - d[1])
+       .attr("r", 5)
+
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md
new file mode 100644
index 00000000000..a1f0bd70dd8
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md
@@ -0,0 +1,198 @@
+---
+id: 587d7fad367417b2b2512bdf
+title: Add Axes to a Visualization
+challengeType: 6
+forumTopicId: 301472
+dashedName: add-axes-to-a-visualization
+---
+
+# --description--
+
+Another way to improve the scatter plot is to add an x-axis and a y-axis.
+
+D3 has two methods, `axisLeft()` and `axisBottom()`, to render the y-axis and x-axis, respectively. Here's an example to create the x-axis based on the `xScale` in the previous challenges:
+
+```js
+const xAxis = d3.axisBottom(xScale);
+```
+
+The next step is to render the axis on the SVG canvas. To do so, you can use a general SVG component, the `g` element. The `g` stands for group. Unlike `rect`, `circle`, and `text`, an axis is just a straight line when it's rendered. Because it is a simple shape, using `g` works. The last step is to apply a `transform` attribute to position the axis on the SVG canvas in the right place. Otherwise, the line would render along the border of SVG canvas and wouldn't be visible. SVG supports different types of `transforms`, but positioning an axis needs `translate`. When it's applied to the `g` element, it moves the whole group over and down by the given amounts. Here's an example:
+
+```js
+const xAxis = d3.axisBottom(xScale);
+
+svg.append("g")
+   .attr("transform", "translate(0, " + (h - padding) + ")")
+   .call(xAxis);
+```
+
+The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the `call()` method. The y-axis works in the same way, except the `translate` argument is in the form `(x, 0)`. Because `translate` is a string in the `attr()` method above, you can use concatenation to include variable values for its arguments.
+
+# --instructions--
+
+The scatter plot now has an x-axis. Create a y-axis in a variable named `yAxis` using the `axisLeft()` method. Then render the axis using a `g` element. Make sure to use a `transform` attribute to translate the axis by the amount of padding units right, and `0` units down. Remember to `call()` the axis.
+
+# --hints--
+
+Your code should use the `axisLeft()` method with `yScale` passed as the argument.
+
+```js
+assert(code.match(/\.axisLeft\(yScale\)/g));
+```
+
+The y-axis `g` element should have a `transform` attribute to translate the axis by `(60, 0)`.
+
+```js
+assert(
+  $('g')
+    .eq(10)
+    .attr('transform')
+    .match(/translate\(60\s*?,\s*?0\)/g)
+);
+```
+
+Your code should call the `yAxis`.
+
+```js
+assert(code.match(/\.call\(\s*yAxis\s*\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [
+                  [ 34,     78 ],
+                  [ 109,   280 ],
+                  [ 310,   120 ],
+                  [ 79,   411 ],
+                  [ 420,   220 ],
+                  [ 233,   145 ],
+                  [ 333,   96 ],
+                  [ 222,    333 ],
+                  [ 78,    320 ],
+                  [ 21,   123 ]
+                ];
+
+    const w = 500;
+    const h = 500;
+    const padding = 60;
+
+    const xScale = d3.scaleLinear()
+                     .domain([0, d3.max(dataset, (d) => d[0])])
+                     .range([padding, w - padding]);
+
+    const yScale = d3.scaleLinear()
+                     .domain([0, d3.max(dataset, (d) => d[1])])
+                     .range([h - padding, padding]);
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("circle")
+       .data(dataset)
+       .enter()
+       .append("circle")
+       .attr("cx", (d) => xScale(d[0]))
+       .attr("cy",(d) => yScale(d[1]))
+       .attr("r", (d) => 5);
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       .text((d) =>  (d[0] + "," + d[1]))
+       .attr("x", (d) => xScale(d[0] + 10))
+       .attr("y", (d) => yScale(d[1]))
+
+    const xAxis = d3.axisBottom(xScale);
+    // Add your code below this line
+    const yAxis = undefined;
+    // Add your code above this line
+
+    svg.append("g")
+       .attr("transform", "translate(0," + (h - padding) + ")")
+       .call(xAxis);
+
+    // Add your code below this line
+
+
+
+    // Add your code above this line
+
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [
+                  [ 34,     78 ],
+                  [ 109,   280 ],
+                  [ 310,   120 ],
+                  [ 79,   411 ],
+                  [ 420,   220 ],
+                  [ 233,   145 ],
+                  [ 333,   96 ],
+                  [ 222,    333 ],
+                  [ 78,    320 ],
+                  [ 21,   123 ]
+                ];
+
+    const w = 500;
+    const h = 500;
+    const padding = 60;
+
+    const xScale = d3.scaleLinear()
+                     .domain([0, d3.max(dataset, (d) => d[0])])
+                     .range([padding, w - padding]);
+
+    const yScale = d3.scaleLinear()
+                     .domain([0, d3.max(dataset, (d) => d[1])])
+                     .range([h - padding, padding]);
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("circle")
+       .data(dataset)
+       .enter()
+       .append("circle")
+       .attr("cx", (d) => xScale(d[0]))
+       .attr("cy",(d) => yScale(d[1]))
+       .attr("r", (d) => 5);
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       .text((d) =>  (d[0] + "," + d[1]))
+       .attr("x", (d) => xScale(d[0] + 10))
+       .attr("y", (d) => yScale(d[1]))
+
+    const xAxis = d3.axisBottom(xScale);
+
+    const yAxis = d3.axisLeft(yScale);
+
+
+    svg.append("g")
+       .attr("transform", "translate(0," + (h - padding) + ")")
+       .call(xAxis);
+
+    svg.append("g")
+       .attr("transform", "translate(" + padding + ",0)")
+       .call(yAxis)
+
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md
new file mode 100644
index 00000000000..a2911cf1788
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md
@@ -0,0 +1,93 @@
+---
+id: 587d7fa7367417b2b2512bc8
+title: Add Classes with D3
+challengeType: 6
+forumTopicId: 301473
+dashedName: add-classes-with-d3
+---
+
+# --description--
+
+Using a lot of inline styles on HTML elements gets hard to manage, even for smaller apps. It's easier to add a class to elements and style that class one time using CSS rules. D3 has the `attr()` method to add any HTML attribute to an element, including a class name.
+
+The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of `container` to a selection:
+
+```js
+selection.attr("class", "container");
+```
+
+Note that the `class` parameter will remain the same whenever you need to add a class and only the `container` parameter will change.
+
+# --instructions--
+
+Add the `attr()` method to the code in the editor and put a class of `bar` on the `div` elements.
+
+# --hints--
+
+Your `div` elements should have a class of `bar`.
+
+```js
+assert($('div').attr('class').trim().split(/\s+/g).includes('bar'));
+```
+
+Your code should use the `attr()` method.
+
+```js
+assert(code.match(/\.attr/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .bar {
+    width: 25px;
+    height: 100px;
+    display: inline-block;
+    background-color: blue;
+  }
+</style>
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    d3.select("body").selectAll("div")
+      .data(dataset)
+      .enter()
+      .append("div")
+      // Add your code below this line
+
+
+
+      // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<style>
+  .bar {
+    width: 25px;
+    height: 100px;
+    display: inline-block;
+    background-color: blue;
+  }
+</style>
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    d3.select("body").selectAll("div")
+      .data(dataset)
+      .enter()
+      .append("div")
+      // Add your code below this line
+      .attr("class","bar");
+      // Add your code above this line
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md
new file mode 100644
index 00000000000..ea44782e9cd
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md
@@ -0,0 +1,105 @@
+---
+id: 587d7fa6367417b2b2512bc2
+title: Add Document Elements with D3
+challengeType: 6
+forumTopicId: 301474
+dashedName: add-document-elements-with-d3
+---
+
+# --description--
+
+D3 has several methods that let you add and change elements in your document.
+
+The `select()` method selects one element from the document. It takes an argument for the name of the element you want and returns an HTML node for the first element in the document that matches the name. Here's an example:
+
+```js
+const anchor = d3.select("a");
+```
+
+The above example finds the first anchor tag on the page and saves an HTML node for it in the variable `anchor`. You can use the selection with other methods. The `d3` part of the example is a reference to the D3 object, which is how you access D3 methods.
+
+Two other useful methods are `append()` and `text()`.
+
+The `append()` method takes an argument for the element you want to add to the document. It appends an HTML node to a selected item, and returns a handle to that node.
+
+The `text()` method either sets the text of the selected node, or gets the current text. To set the value, you pass a string as an argument inside the parentheses of the method.
+
+Here's an example that selects an unordered list, appends a list item, and adds text:
+
+```js
+d3.select("ul")
+  .append("li")
+  .text("Very important item");
+```
+
+D3 allows you to chain several methods together with periods to perform a number of actions in a row.
+
+# --instructions--
+
+Use the `select` method to select the `body` tag in the document. Then `append` an `h1` tag to it, and add the text `Learning D3` into the `h1` element.
+
+# --hints--
+
+The `body` should have one `h1` element.
+
+```js
+assert($('body').children('h1').length == 1);
+```
+
+The `h1` element should have the text `Learning D3` in it.
+
+```js
+assert($('h1').text() == 'Learning D3');
+```
+
+Your code should access the `d3` object.
+
+```js
+assert(code.match(/d3/g));
+```
+
+Your code should use the `select` method.
+
+```js
+assert(code.match(/\.select/g));
+```
+
+Your code should use the `append` method.
+
+```js
+assert(code.match(/\.append/g));
+```
+
+Your code should use the `text` method.
+
+```js
+assert(code.match(/\.text/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    // Add your code below this line
+
+
+
+    // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    d3.select("body")
+      .append("h1")
+      .text("Learning D3")
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md
new file mode 100644
index 00000000000..9c538755d74
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md
@@ -0,0 +1,76 @@
+---
+id: 587d7fa7367417b2b2512bc6
+title: Add Inline Styling to Elements
+challengeType: 6
+forumTopicId: 301475
+dashedName: add-inline-styling-to-elements
+---
+
+# --description--
+
+D3 lets you add inline CSS styles on dynamic elements with the `style()` method.
+
+The `style()` method takes a comma-separated key-value pair as an argument. Here's an example to set the selection's text color to blue:
+
+```js
+selection.style("color","blue");
+```
+
+# --instructions--
+
+Add the `style()` method to the code in the editor to make all the displayed text have a `font-family` of `verdana`.
+
+# --hints--
+
+Your `h2` elements should have a `font-family` of `verdana`.
+
+```js
+assert($('h2').css('font-family') == 'verdana');
+```
+
+Your code should use the `style()` method.
+
+```js
+assert(code.match(/\.style/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    d3.select("body").selectAll("h2")
+      .data(dataset)
+      .enter()
+      .append("h2")
+      .text((d) => (d + " USD"))
+      // Add your code below this line
+
+
+
+      // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    d3.select("body").selectAll("h2")
+      .data(dataset)
+      .enter()
+      .append("h2")
+      .text((d) => (d + " USD"))
+      .style("font-family", "verdana")
+
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md
new file mode 100644
index 00000000000..d0da292c769
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md
@@ -0,0 +1,153 @@
+---
+id: 587d7faa367417b2b2512bd2
+title: Add Labels to D3 Elements
+challengeType: 6
+forumTopicId: 301476
+dashedName: add-labels-to-d3-elements
+---
+
+# --description--
+
+D3 lets you label a graph element, such as a bar, using the SVG `text` element.
+
+Like the `rect` element, a `text` element needs to have `x` and `y` attributes, to place it on the SVG canvas. It also needs to access the data to display those values.
+
+D3 gives you a high level of control over how you label your bars.
+
+# --instructions--
+
+The code in the editor already binds the data to each new `text` element. First, append `text` nodes to the `svg`. Next, add attributes for the `x` and `y` coordinates. They should be calculated the same way as the `rect` ones, except the `y` value for the `text` should make the label sit 3 units higher than the bar. Finally, use the D3 `text()` method to set the label equal to the data point value.
+
+**Note:** For the label to sit higher than the bar, decide if the `y` value for the `text` should be 3 greater or 3 less than the `y` value for the bar.
+
+# --hints--
+
+The first `text` element should have a label of `12` and a `y` value of `61`.
+
+```js
+assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61');
+```
+
+The second `text` element should have a label of `31` and a `y` value of `4`.
+
+```js
+assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4');
+```
+
+The third `text` element should have a label of `22` and a `y` value of `31`.
+
+```js
+assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31');
+```
+
+The fourth `text` element should have a label of `17` and a `y` value of `46`.
+
+```js
+assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46');
+```
+
+The fifth `text` element should have a label of `25` and a `y` value of `22`.
+
+```js
+assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22');
+```
+
+The sixth `text` element should have a label of `18` and a `y` value of `43`.
+
+```js
+assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43');
+```
+
+The seventh `text` element should have a label of `29` and a `y` value of `10`.
+
+```js
+assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10');
+```
+
+The eighth `text` element should have a label of `14` and a `y` value of `55`.
+
+```js
+assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55');
+```
+
+The ninth `text` element should have a label of `9` and a `y` value of `70`.
+
+```js
+assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - 3 * d)
+       .attr("width", 25)
+       .attr("height", (d, i) => 3 * d)
+       .attr("fill", "navy");
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       // Add your code below this line
+
+
+
+
+       // Add your code above this line
+  </script>
+<body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - 3 * d)
+       .attr("width", 25)
+       .attr("height", (d, i) => 3 * d)
+       .attr("fill", "navy");
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - (3 * d) - 3)
+       .text((d) => d)
+  </script>
+<body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md
new file mode 100644
index 00000000000..a2cd64c0a42
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md
@@ -0,0 +1,224 @@
+---
+id: 587d7fab367417b2b2512bd9
+title: Add Labels to Scatter Plot Circles
+challengeType: 6
+forumTopicId: 301477
+dashedName: add-labels-to-scatter-plot-circles
+---
+
+# --description--
+
+You can add text to create labels for the points in a scatter plot.
+
+The goal is to display the comma-separated values for the first (`x`) and second (`y`) fields of each item in `dataset`.
+
+The `text` nodes need `x` and `y` attributes to position it on the SVG canvas. In this challenge, the `y` value (which determines height) can use the same value that the `circle` uses for its `cy` attribute. The `x` value can be slightly larger than the `cx` value of the `circle`, so the label is visible. This will push the label to the right of the plotted point.
+
+# --instructions--
+
+Label each point on the scatter plot using the `text` elements. The text of the label should be the two values separated by a comma and a space. For example, the label for the first point is `34, 78`. Set the `x` attribute so it's `5` units more than the value you used for the `cx` attribute on the `circle`. Set the `y` attribute the same way that's used for the `cy` value on the `circle`.
+
+# --hints--
+
+Your code should have 10 `text` elements.
+
+```js
+assert($('text').length == 10);
+```
+
+The first label should have text of `34, 78`, an `x` value of `39`, and a `y` value of `422`.
+
+```js
+assert(
+  $('text').eq(0).text() == '34, 78' &&
+    $('text').eq(0).attr('x') == '39' &&
+    $('text').eq(0).attr('y') == '422'
+);
+```
+
+The second label should have text of `109, 280`, an `x` value of `114`, and a `y` value of `220`.
+
+```js
+assert(
+  $('text').eq(1).text() == '109, 280' &&
+    $('text').eq(1).attr('x') == '114' &&
+    $('text').eq(1).attr('y') == '220'
+);
+```
+
+The third label should have text of `310, 120`, an `x` value of `315`, and a `y` value of `380`.
+
+```js
+assert(
+  $('text').eq(2).text() == '310, 120' &&
+    $('text').eq(2).attr('x') == '315' &&
+    $('text').eq(2).attr('y') == '380'
+);
+```
+
+The fourth label should have text of `79, 411`, an `x` value of `84`, and a `y` value of `89`.
+
+```js
+assert(
+  $('text').eq(3).text() == '79, 411' &&
+    $('text').eq(3).attr('x') == '84' &&
+    $('text').eq(3).attr('y') == '89'
+);
+```
+
+The fifth label should have text of `420, 220`, an `x` value of `425`, and a `y` value of `280`.
+
+```js
+assert(
+  $('text').eq(4).text() == '420, 220' &&
+    $('text').eq(4).attr('x') == '425' &&
+    $('text').eq(4).attr('y') == '280'
+);
+```
+
+The sixth label should have text of `233, 145`, an `x` value of `238`, and a `y` value of `355`.
+
+```js
+assert(
+  $('text').eq(5).text() == '233, 145' &&
+    $('text').eq(5).attr('x') == '238' &&
+    $('text').eq(5).attr('y') == '355'
+);
+```
+
+The seventh label should have text of `333, 96`, an `x` value of `338`, and a `y` value of `404`.
+
+```js
+assert(
+  $('text').eq(6).text() == '333, 96' &&
+    $('text').eq(6).attr('x') == '338' &&
+    $('text').eq(6).attr('y') == '404'
+);
+```
+
+The eighth label should have text of `222, 333`, an `x` value of `227`, and a `y` value of `167`.
+
+```js
+assert(
+  $('text').eq(7).text() == '222, 333' &&
+    $('text').eq(7).attr('x') == '227' &&
+    $('text').eq(7).attr('y') == '167'
+);
+```
+
+The ninth label should have text of `78, 320`, an `x` value of `83`, and a `y` value of `180`.
+
+```js
+assert(
+  $('text').eq(8).text() == '78, 320' &&
+    $('text').eq(8).attr('x') == '83' &&
+    $('text').eq(8).attr('y') == '180'
+);
+```
+
+The tenth label should have text of `21, 123`, an `x` value of `26`, and a `y` value of `377`.
+
+```js
+assert(
+  $('text').eq(9).text() == '21, 123' &&
+    $('text').eq(9).attr('x') == '26' &&
+    $('text').eq(9).attr('y') == '377'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [
+                  [ 34,    78 ],
+                  [ 109,   280 ],
+                  [ 310,   120 ],
+                  [ 79,    411 ],
+                  [ 420,   220 ],
+                  [ 233,   145 ],
+                  [ 333,   96 ],
+                  [ 222,   333 ],
+                  [ 78,    320 ],
+                  [ 21,    123 ]
+                ];
+
+
+    const w = 500;
+    const h = 500;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("circle")
+       .data(dataset)
+       .enter()
+       .append("circle")
+       .attr("cx", (d, i) => d[0])
+       .attr("cy", (d, i) => h - d[1])
+       .attr("r", 5);
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       // Add your code below this line
+
+
+
+       // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [
+                  [ 34,    78 ],
+                  [ 109,   280 ],
+                  [ 310,   120 ],
+                  [ 79,    411 ],
+                  [ 420,   220 ],
+                  [ 233,   145 ],
+                  [ 333,   96 ],
+                  [ 222,   333 ],
+                  [ 78,    320 ],
+                  [ 21,    123 ]
+                ];
+
+
+    const w = 500;
+    const h = 500;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("circle")
+       .data(dataset)
+       .enter()
+       .append("circle")
+       .attr("cx", (d, i) => d[0])
+       .attr("cy", (d, i) => h - d[1])
+       .attr("r", 5);
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       .attr("x", (d) => d[0] + 5)
+       .attr("y", (d) => h - d[1])
+       .text((d) => (d[0] + ", " + d[1]))
+
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md
new file mode 100644
index 00000000000..1ed6ae7d5e2
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md
@@ -0,0 +1,123 @@
+---
+id: 587d7fa7367417b2b2512bc7
+title: Change Styles Based on Data
+challengeType: 6
+forumTopicId: 301479
+dashedName: change-styles-based-on-data
+---
+
+# --description--
+
+D3 is about visualization and presentation of data. It's likely you'll want to change the styling of elements based on the data. You can use a callback function in the `style()` method to change the styling for different elements.
+
+For example, you may want to color a data point blue if it has a value less than 20, and red otherwise. You can use a callback function in the `style()` method and include the conditional logic. The callback function uses the `d` parameter to represent the data point:
+
+```js
+selection.style("color", (d) => {
+
+});
+```
+
+The `style()` method is not limited to setting the `color` - it can be used with other CSS properties as well.
+
+# --instructions--
+
+Add the `style()` method to the code in the editor to set the `color` of the `h2` elements conditionally. Write the callback function so if the data value is less than 20, it returns red, otherwise it returns green.
+
+**Note:** You can use if-else logic, or the ternary operator.
+
+# --hints--
+
+The first `h2` should have a `color` of red.
+
+```js
+assert($('h2').eq(0).css('color') == 'rgb(255, 0, 0)');
+```
+
+The second `h2` should have a `color` of green.
+
+```js
+assert($('h2').eq(1).css('color') == 'rgb(0, 128, 0)');
+```
+
+The third `h2` should have a `color` of green.
+
+```js
+assert($('h2').eq(2).css('color') == 'rgb(0, 128, 0)');
+```
+
+The fourth `h2` should have a `color` of red.
+
+```js
+assert($('h2').eq(3).css('color') == 'rgb(255, 0, 0)');
+```
+
+The fifth `h2` should have a `color` of green.
+
+```js
+assert($('h2').eq(4).css('color') == 'rgb(0, 128, 0)');
+```
+
+The sixth `h2` should have a `color` of red.
+
+```js
+assert($('h2').eq(5).css('color') == 'rgb(255, 0, 0)');
+```
+
+The seventh `h2` should have a `color` of green.
+
+```js
+assert($('h2').eq(6).css('color') == 'rgb(0, 128, 0)');
+```
+
+The eighth `h2` should have a `color` of red.
+
+```js
+assert($('h2').eq(7).css('color') == 'rgb(255, 0, 0)');
+```
+
+The ninth `h2` should have a `color` of red.
+
+```js
+assert($('h2').eq(8).css('color') == 'rgb(255, 0, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    d3.select("body").selectAll("h2")
+      .data(dataset)
+      .enter()
+      .append("h2")
+      .text((d) => (d + " USD"))
+      // Add your code below this line
+
+
+
+      // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    d3.select("body").selectAll("h2")
+      .data(dataset)
+      .enter()
+      .append("h2")
+      .text((d) => (d + " USD"))
+      .style("color", (d) => d < 20 ? "red" : "green")
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.md
new file mode 100644
index 00000000000..4e0d47f93cd
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.md
@@ -0,0 +1,88 @@
+---
+id: 587d7fa9367417b2b2512bd1
+title: Change the Color of an SVG Element
+challengeType: 6
+forumTopicId: 301480
+dashedName: change-the-color-of-an-svg-element
+---
+
+# --description--
+
+The bars are in the right position, but they are all the same black color. SVG has a way to change the color of the bars.
+
+In SVG, a `rect` shape is colored with the `fill` attribute. It supports hex codes, color names, and rgb values, as well as more complex options like gradients and transparency.
+
+# --instructions--
+
+Add an `attr()` method to set the `fill` of all the bars to the color navy.
+
+# --hints--
+
+The bars should all have a `fill` color of navy.
+
+```js
+assert($('rect').css('fill') == 'rgb(0, 0, 128)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - 3 * d)
+       .attr("width", 25)
+       .attr("height", (d, i) => 3 * d)
+       // Add your code below this line
+
+
+
+       // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - 3 * d)
+       .attr("width", 25)
+       .attr("height", (d, i) => 3 * d)
+       .attr("fill", "navy");
+
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.md
new file mode 100644
index 00000000000..46b6e2613d1
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.md
@@ -0,0 +1,161 @@
+---
+id: 587d7fa8367417b2b2512bca
+title: Change the Presentation of a Bar Chart
+challengeType: 6
+forumTopicId: 301481
+dashedName: change-the-presentation-of-a-bar-chart
+---
+
+# --description--
+
+The last challenge created a bar chart, but there are a couple of formatting changes that could improve it:
+
+1) Add space between each bar to visually separate them, which is done by adding a margin to the CSS for the `bar` class
+
+2) Increase the height of the bars to better show the difference in values, which is done by multiplying the value by a number to scale the height
+
+# --instructions--
+
+First, add a `margin` of `2px` to the `bar` class in the `style` tag. Next, change the callback function in the `style()` method so it returns a value `10` times the original data value (plus the `px`).
+
+**Note:** Multiplying each data point by the *same* constant only alters the scale. It's like zooming in, and it doesn't change the meaning of the underlying data.
+
+# --hints--
+
+The first `div` should have a `height` of `120` pixels and a `margin` of `2` pixels.
+
+```js
+assert(
+  $('div').eq(0).css('height') == '120px' &&
+    $('div').eq(0).css('margin-right') == '2px'
+);
+```
+
+The second `div` should have a `height` of `310` pixels and a `margin` of `2` pixels.
+
+```js
+assert(
+  $('div').eq(1).css('height') == '310px' &&
+    $('div').eq(1).css('margin-right') == '2px'
+);
+```
+
+The third `div` should have a `height` of `220` pixels and a `margin` of `2` pixels.
+
+```js
+assert(
+  $('div').eq(2).css('height') == '220px' &&
+    $('div').eq(2).css('margin-right') == '2px'
+);
+```
+
+The fourth `div` should have a `height` of `170` pixels and a `margin` of `2` pixels.
+
+```js
+assert(
+  $('div').eq(3).css('height') == '170px' &&
+    $('div').eq(3).css('margin-right') == '2px'
+);
+```
+
+The fifth `div` should have a `height` of `250` pixels and a `margin` of `2` pixels.
+
+```js
+assert(
+  $('div').eq(4).css('height') == '250px' &&
+    $('div').eq(4).css('margin-right') == '2px'
+);
+```
+
+The sixth `div` should have a `height` of `180` pixels and a `margin` of `2` pixels.
+
+```js
+assert(
+  $('div').eq(5).css('height') == '180px' &&
+    $('div').eq(5).css('margin-right') == '2px'
+);
+```
+
+The seventh `div` should have a `height` of `290` pixels and a `margin` of `2` pixels.
+
+```js
+assert(
+  $('div').eq(6).css('height') == '290px' &&
+    $('div').eq(6).css('margin-right') == '2px'
+);
+```
+
+The eighth `div` should have a `height` of `140` pixels and a `margin` of `2` pixels.
+
+```js
+assert(
+  $('div').eq(7).css('height') == '140px' &&
+    $('div').eq(7).css('margin-right') == '2px'
+);
+```
+
+The ninth `div` should have a `height` of `90` pixels and a `margin` of `2` pixels.
+
+```js
+assert(
+  $('div').eq(8).css('height') == '90px' &&
+    $('div').eq(8).css('margin-right') == '2px'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .bar {
+    width: 25px;
+    height: 100px;
+    /* Add your code below this line */
+
+
+    /* Add your code above this line */
+    display: inline-block;
+    background-color: blue;
+  }
+</style>
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    d3.select("body").selectAll("div")
+      .data(dataset)
+      .enter()
+      .append("div")
+      .attr("class", "bar")
+      .style("height", (d) => (d + "px")) // Change this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<style>
+  .bar {
+    width: 25px;
+    height: 100px;
+    margin: 2px;
+    display: inline-block;
+    background-color: blue;
+  }
+</style>
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    d3.select("body").selectAll("div")
+      .data(dataset)
+      .enter()
+      .append("div")
+      .attr("class", "bar")
+      .style("height", (d) => (d * 10 + "px"))
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md
new file mode 100644
index 00000000000..e988030673b
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.md
@@ -0,0 +1,110 @@
+---
+id: 587d7fa8367417b2b2512bcd
+title: Create a Bar for Each Data Point in the Set
+challengeType: 6
+forumTopicId: 301482
+dashedName: create-a-bar-for-each-data-point-in-the-set
+---
+
+# --description--
+
+The last challenge added only one rectangle to the `svg` element to represent a bar. Here, you'll combine what you've learned so far about `data()`, `enter()`, and SVG shapes to create and append a rectangle for each data point in `dataset`.
+
+A previous challenge showed the format for how to create and append a `div` for each item in `dataset`:
+
+```js
+d3.select("body").selectAll("div")
+  .data(dataset)
+  .enter()
+  .append("div")
+```
+
+There are a few differences working with `rect` elements instead of `div` elements. The `rect` elements must be appended to an `svg` element, not directly to the `body`. Also, you need to tell D3 where to place each `rect` within the `svg` area. The bar placement will be covered in the next challenge.
+
+# --instructions--
+
+Use the `data()`, `enter()`, and `append()` methods to create and append a `rect` for each item in `dataset`. The bars should display all on top of each other; this will be fixed in the next challenge.
+
+# --hints--
+
+Your document should have 9 `rect` elements.
+
+```js
+assert($('rect').length == 9);
+```
+
+Your code should use the `data()` method.
+
+```js
+assert(code.match(/\.data/g));
+```
+
+Your code should use the `enter()` method.
+
+```js
+assert(code.match(/\.enter/g));
+```
+
+Your code should use the `append()` method.
+
+```js
+assert(code.match(/\.append/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       // Add your code below this line
+
+
+
+       // Add your code above this line
+       .attr("x", 0)
+       .attr("y", 0)
+       .attr("width", 25)
+       .attr("height", 100);
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", 0)
+       .attr("y", 0)
+       .attr("width", 25)
+       .attr("height", 100);
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md
new file mode 100644
index 00000000000..d118740df6c
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md
@@ -0,0 +1,88 @@
+---
+id: 587d7fab367417b2b2512bda
+title: Create a Linear Scale with D3
+challengeType: 6
+forumTopicId: 301483
+dashedName: create-a-linear-scale-with-d3
+---
+
+# --description--
+
+The bar and scatter plot charts both plotted data directly onto the SVG canvas. However, if the height of a bar or one of the data points were larger than the SVG height or width values, it would go outside the SVG area.
+
+In D3, there are scales to help plot data. `scales` are functions that tell the program how to map a set of raw data points onto the pixels of the SVG canvas.
+
+For example, say you have a 100x500-sized SVG canvas and you want to plot Gross Domestic Product (GDP) for a number of countries. The set of numbers would be in the billion or trillion-dollar range. You provide D3 a type of scale to tell it how to place the large GDP values into that 100x500-sized area.
+
+It's unlikely you would plot raw data as-is. Before plotting it, you set the scale for your entire data set, so that the `x` and `y` values fit your canvas width and height.
+
+D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method `scaleLinear()`:
+
+```js
+const scale = d3.scaleLinear()
+```
+
+By default, a scale uses the identity relationship. The value of the input is the same as the value of the output. A separate challenge covers how to change this.
+
+# --instructions--
+
+Change the `scale` variable to create a linear scale. Then set the `output` variable to the scale called with an input argument of `50`.
+
+# --hints--
+
+The text in the `h2` should be `50`.
+
+```js
+assert($('h2').text() == '50');
+```
+
+Your code should use the `scaleLinear()` method.
+
+```js
+assert(code.match(/\.scaleLinear/g));
+```
+
+The `output` variable should call `scale` with an argument of `50`.
+
+```js
+assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    // Add your code below this line
+
+    const scale = undefined; // Create the scale here
+    const output = scale(); // Call scale with an argument here
+
+    // Add your code above this line
+
+    d3.select("body")
+      .append("h2")
+      .text(output);
+
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+
+    const scale = d3.scaleLinear();
+    const output = scale(50); 
+
+    d3.select("body")
+      .append("h2")
+      .text(output);
+
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md
new file mode 100644
index 00000000000..5f4bd1e056f
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md
@@ -0,0 +1,103 @@
+---
+id: 587d7fab367417b2b2512bd7
+title: Create a Scatterplot with SVG Circles
+challengeType: 6
+forumTopicId: 301484
+dashedName: create-a-scatterplot-with-svg-circles
+---
+
+# --description--
+
+A scatter plot is another type of visualization. It usually uses circles to map data points, which have two values each. These values tie to the `x` and `y` axes, and are used to position the circle in the visualization.
+
+SVG has a `circle` tag to create the circle shape. It works a lot like the `rect` elements you used for the bar chart.
+
+# --instructions--
+
+Use the `data()`, `enter()`, and `append()` methods to bind `dataset` to new `circle` elements that are appended to the SVG canvas.
+
+**Note:** The circles won't be visible because we haven't set their attributes yet. We'll do that in the next challenge.
+
+# --hints--
+
+Your code should have 10 `circle` elements.
+
+```js
+assert($('circle').length == 10);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [
+                  [ 34,    78 ],
+                  [ 109,   280 ],
+                  [ 310,   120 ],
+                  [ 79,    411 ],
+                  [ 420,   220 ],
+                  [ 233,   145 ],
+                  [ 333,   96 ],
+                  [ 222,   333 ],
+                  [ 78,    320 ],
+                  [ 21,    123 ]
+                ];
+
+
+    const w = 500;
+    const h = 500;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("circle")
+       // Add your code below this line
+
+
+
+       // Add your code above this line
+
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [
+                  [ 34,    78 ],
+                  [ 109,   280 ],
+                  [ 310,   120 ],
+                  [ 79,    411 ],
+                  [ 420,   220 ],
+                  [ 233,   145 ],
+                  [ 333,   96 ],
+                  [ 222,   333 ],
+                  [ 78,    320 ],
+                  [ 21,    123 ]
+                ];
+
+
+    const w = 500;
+    const h = 500;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("circle")
+       .data(dataset)
+       .enter()
+       .append("circle")
+
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md
new file mode 100644
index 00000000000..71a39ddaf10
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md
@@ -0,0 +1,103 @@
+---
+id: 587d7fa8367417b2b2512bcc
+title: Display Shapes with SVG
+challengeType: 6
+forumTopicId: 301485
+dashedName: display-shapes-with-svg
+---
+
+# --description--
+
+The last challenge created an `svg` element with a given width and height, which was visible because it had a `background-color` applied to it in the `style` tag. The code made space for the given width and height.
+
+The next step is to create a shape to put in the `svg` area. There are a number of supported shapes in SVG, such as rectangles and circles. They are used to display data. For example, a rectangle (`<rect>`) SVG shape could create a bar in a bar chart.
+
+When you place a shape into the `svg` area, you can specify where it goes with `x` and `y` coordinates. The origin point of (0, 0) is in the upper-left corner. Positive values for `x` push the shape to the right, and positive values for `y` push the shape down from the origin point.
+
+To place a shape in the middle of the 500 (width) x 100 (height) `svg` from last challenge, the `x` coordinate would be 250 and the `y` coordinate would be 50.
+
+An SVG `rect` has four attributes. There are the `x` and `y` coordinates for where it is placed in the `svg` area. It also has a `height` and `width` to specify the size.
+
+# --instructions--
+
+Add a `rect` shape to the `svg` using `append()`, and give it a `width` attribute of `25` and `height` attribute of `100`. Also, give the `rect` `x` and `y` attributes each set to `0`.
+
+# --hints--
+
+Your document should have 1 `rect` element.
+
+```js
+assert($('rect').length == 1);
+```
+
+The `rect` element should have a `width` attribute set to `25`.
+
+```js
+assert($('rect').attr('width') == '25');
+```
+
+The `rect` element should have a `height` attribute set to `100`.
+
+```js
+assert($('rect').attr('height') == '100');
+```
+
+The `rect` element should have an `x` attribute set to `0`.
+
+```js
+assert($('rect').attr('x') == '0');
+```
+
+The `rect` element should have a `y` attribute set to `0`.
+
+```js
+assert($('rect').attr('y') == '0');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h)
+                  // Add your code below this line
+
+
+
+                  // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h)
+                  .append("rect")
+                  .attr("width", 25)
+                  .attr("height", 100)
+                  .attr("x", 0)
+                  .attr("y", 0);
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md
new file mode 100644
index 00000000000..33463161a26
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md
@@ -0,0 +1,145 @@
+---
+id: 587d7fa9367417b2b2512bcf
+title: Dynamically Change the Height of Each Bar
+challengeType: 6
+forumTopicId: 301486
+dashedName: dynamically-change-the-height-of-each-bar
+---
+
+# --description--
+
+The height of each bar can be set to the value of the data point in the array, similar to how the `x` value was set dynamically.
+
+```js
+selection.attr("property", (d, i) => {
+
+})
+```
+
+Here `d` would be the data point value, and `i` would be the index of the data point in the array.
+
+# --instructions--
+
+Change the callback function for the `height` attribute to return the data value times 3.
+
+**Note:** Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example.
+
+# --hints--
+
+The first `rect` should have a `height` of `36`.
+
+```js
+assert($('rect').eq(0).attr('height') == '36');
+```
+
+The second `rect` should have a `height` of `93`.
+
+```js
+assert($('rect').eq(1).attr('height') == '93');
+```
+
+The third `rect` should have a `height` of `66`.
+
+```js
+assert($('rect').eq(2).attr('height') == '66');
+```
+
+The fourth `rect` should have a `height` of `51`.
+
+```js
+assert($('rect').eq(3).attr('height') == '51');
+```
+
+The fifth `rect` should have a `height` of `75`.
+
+```js
+assert($('rect').eq(4).attr('height') == '75');
+```
+
+The sixth `rect` should have a `height` of `54`.
+
+```js
+assert($('rect').eq(5).attr('height') == '54');
+```
+
+The seventh `rect` should have a `height` of `87`.
+
+```js
+assert($('rect').eq(6).attr('height') == '87');
+```
+
+The eighth `rect` should have a `height` of `42`.
+
+```js
+assert($('rect').eq(7).attr('height') == '42');
+```
+
+The ninth `rect` should have a `height` of `27`.
+
+```js
+assert($('rect').eq(8).attr('height') == '27');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", 0)
+       .attr("width", 25)
+       .attr("height", (d, i) => {
+         // Add your code below this line
+
+
+
+         // Add your code above this line
+       });
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", 0)
+       .attr("width", 25)
+       .attr("height", (d, i) => {
+         return d * 3
+       });
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md
new file mode 100644
index 00000000000..ad10065163f
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md
@@ -0,0 +1,151 @@
+---
+id: 587d7fa9367417b2b2512bce
+title: Dynamically Set the Coordinates for Each Bar
+challengeType: 6
+forumTopicId: 301487
+dashedName: dynamically-set-the-coordinates-for-each-bar
+---
+
+# --description--
+
+The last challenge created and appended a rectangle to the `svg` element for each point in `dataset` to represent a bar. Unfortunately, they were all stacked on top of each other.
+
+The placement of a rectangle is handled by the `x` and `y` attributes. They tell D3 where to start drawing the shape in the `svg` area. The last challenge set them each to 0, so every bar was placed in the upper-left corner.
+
+For a bar chart, all of the bars should sit on the same vertical level, which means the `y` value stays the same (at 0) for all bars. The `x` value, however, needs to change as you add new bars. Remember that larger `x` values push items farther to the right. As you go through the array elements in `dataset`, the `x` value should increase.
+
+The `attr()` method in D3 accepts a callback function to dynamically set that attribute. The callback function takes two arguments, one for the data point itself (usually `d`) and one for the index of the data point in the array. The second argument for the index is optional. Here's the format:
+
+```js
+selection.attr("property", (d, i) => {
+
+})
+```
+
+It's important to note that you do NOT need to write a `for` loop or use `forEach()` to iterate over the items in the data set. Recall that the `data()` method parses the data set, and any method that's chained after `data()` is run once for each item in the data set.
+
+# --instructions--
+
+Change the `x` attribute callback function so it returns the index times 30.
+
+**Note:** Each bar has a width of 25, so increasing each `x` value by 30 adds some space between the bars. Any value greater than 25 would work in this example.
+
+# --hints--
+
+The first `rect` should have an `x` value of `0`.
+
+```js
+assert($('rect').eq(0).attr('x') == '0');
+```
+
+The second `rect` should have an `x` value of `30`.
+
+```js
+assert($('rect').eq(1).attr('x') == '30');
+```
+
+The third `rect` should have an `x` value of `60`.
+
+```js
+assert($('rect').eq(2).attr('x') == '60');
+```
+
+The fourth `rect` should have an `x` value of `90`.
+
+```js
+assert($('rect').eq(3).attr('x') == '90');
+```
+
+The fifth `rect` should have an `x` value of `120`.
+
+```js
+assert($('rect').eq(4).attr('x') == '120');
+```
+
+The sixth `rect` should have an `x` value of `150`.
+
+```js
+assert($('rect').eq(5).attr('x') == '150');
+```
+
+The seventh `rect` should have an `x` value of `180`.
+
+```js
+assert($('rect').eq(6).attr('x') == '180');
+```
+
+The eighth `rect` should have an `x` value of `210`.
+
+```js
+assert($('rect').eq(7).attr('x') == '210');
+```
+
+The ninth `rect` should have an `x` value of `240`.
+
+```js
+assert($('rect').eq(8).attr('x') == '240');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => {
+         // Add your code below this line
+
+
+
+         // Add your code above this line
+       })
+       .attr("y", 0)
+       .attr("width", 25)
+       .attr("height", 100);
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => {
+         return i * 30
+       })
+       .attr("y", 0)
+       .attr("width", 25)
+       .attr("height", 100);
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md
new file mode 100644
index 00000000000..66156ef8878
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md
@@ -0,0 +1,143 @@
+---
+id: 587d7fa9367417b2b2512bd0
+title: Invert SVG Elements
+challengeType: 6
+forumTopicId: 301488
+dashedName: invert-svg-elements
+---
+
+# --description--
+
+You may have noticed the bar chart looked like it's upside-down, or inverted. This is because of how SVG uses (x, y) coordinates.
+
+In SVG, the origin point for the coordinates is in the upper-left corner. An `x` coordinate of 0 places a shape on the left edge of the SVG area. A `y` coordinate of 0 places a shape on the top edge of the SVG area. Higher `x` values push the rectangle to the right. Higher `y` values push the rectangle down.
+
+To make the bars right-side-up, you need to change the way the `y` coordinate is calculated. It needs to account for both the height of the bar and the total height of the SVG area.
+
+The height of the SVG area is 100. If you have a data point of 0 in the set, you would want the bar to start at the bottom of the SVG area (not the top). To do this, the `y` coordinate needs a value of 100. If the data point value were 1, you would start with a `y` coordinate of 100 to set the bar at the bottom. Then you need to account for the height of the bar of 1, so the final `y` coordinate would be 99.
+
+The `y` coordinate that is `y = heightOfSVG - heightOfBar` would place the bars right-side-up.
+
+# --instructions--
+
+Change the callback function for the `y` attribute to set the bars right-side-up. Remember that the `height` of the bar is 3 times the data value `d`.
+
+**Note:** In general, the relationship is `y = h - m * d`, where `m` is the constant that scales the data points.
+
+# --hints--
+
+The first `rect` should have a `y` value of `64`.
+
+```js
+assert($('rect').eq(0).attr('y') == h - dataset[0] * 3);
+```
+
+The second `rect` should have a `y` value of `7`.
+
+```js
+assert($('rect').eq(1).attr('y') == h - dataset[1] * 3);
+```
+
+The third `rect` should have a `y` value of `34`.
+
+```js
+assert($('rect').eq(2).attr('y') == h - dataset[2] * 3);
+```
+
+The fourth `rect` should have a `y` value of `49`.
+
+```js
+assert($('rect').eq(3).attr('y') == h - dataset[3] * 3);
+```
+
+The fifth `rect` should have a `y` value of `25`.
+
+```js
+assert($('rect').eq(4).attr('y') == h - dataset[4] * 3);
+```
+
+The sixth `rect` should have a `y` value of `46`.
+
+```js
+assert($('rect').eq(5).attr('y') == h - dataset[5] * 3);
+```
+
+The seventh `rect` should have a `y` value of `13`.
+
+```js
+assert($('rect').eq(6).attr('y') == h - dataset[6] * 3);
+```
+
+The eighth `rect` should have a `y` value of `58`.
+
+```js
+assert($('rect').eq(7).attr('y') == h - dataset[7] * 3);
+```
+
+The ninth `rect` should have a `y` value of `73`.
+
+```js
+assert($('rect').eq(8).attr('y') == h - dataset[8] * 3);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => {
+         // Add your code below this line
+
+
+
+         // Add your code above this line
+       })
+       .attr("width", 25)
+       .attr("height", (d, i) => 3 * d);
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - 3 * d)
+       .attr("width", 25)
+       .attr("height", (d, i) => 3 * d);
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md
new file mode 100644
index 00000000000..f5fba672e99
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md
@@ -0,0 +1,93 @@
+---
+id: 587d7fa8367417b2b2512bcb
+title: Learn About SVG in D3
+challengeType: 6
+forumTopicId: 301489
+dashedName: learn-about-svg-in-d3
+---
+
+# --description--
+
+<dfn>SVG</dfn> stands for <dfn>Scalable Vector Graphics</dfn>.
+
+Here "scalable" means that, if you zoom in or out on an object, it would not appear pixelated. It scales with the display system, whether it's on a small mobile screen or a large TV monitor.
+
+SVG is used to make common geometric shapes. Since D3 maps data into a visual representation, it uses SVG to create the shapes for the visualization. SVG shapes for a web page must go within an HTML `svg` tag.
+
+CSS can be scalable when styles use relative units (such as `vh`, `vw`, or percentages), but using SVG is more flexible to build data visualizations.
+
+# --instructions--
+
+Add an `svg` node to the `body` using `append()`. Give it a `width` attribute set to the provided `w` constant and a `height` attribute set to the provided `h` constant using the `attr()` or `style()` methods for each. You'll see it in the output because there's a `background-color` of pink applied to it in the `style` tag.
+
+**Note:** When using `attr()` width and height attributes do not have units. This is the building block of scaling - the element will always have a 5:1 width to height ratio, no matter what the zoom level is.
+
+# --hints--
+
+Your document should have 1 `svg` element.
+
+```js
+assert($('svg').length == 1);
+```
+
+The `svg` element should have a `width` attribute set to `500` or styled to have a width of `500px`.
+
+```js
+assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px');
+```
+
+The `svg` element should have a `height` attribute set to `100` or styled to have a height of `100px`.
+
+```js
+assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  svg {
+    background-color: pink;
+  }
+</style>
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  // Add your code below this line
+
+
+
+                  // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<style>
+  svg {
+    background-color: pink;
+  }
+</style>
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h)
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md
new file mode 100644
index 00000000000..bf0acc7b43a
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md
@@ -0,0 +1,82 @@
+---
+id: 587d7fa6367417b2b2512bc3
+title: Select a Group of Elements with D3
+challengeType: 6
+forumTopicId: 301490
+dashedName: select-a-group-of-elements-with-d3
+---
+
+# --description--
+
+D3 also has the `selectAll()` method to select a group of elements. It returns an array of HTML nodes for all the items in the document that match the input string. Here's an example to select all the anchor tags in a document:
+
+```js
+const anchors = d3.selectAll("a");
+```
+
+Like the `select()` method, `selectAll()` supports method chaining, and you can use it with other methods.
+
+# --instructions--
+
+Select all of the `li` tags in the document, and change their text to the string `list item` by chaining the `.text()` method.
+
+# --hints--
+
+There should be 3 `li` elements on the page, and the text in each one should say `list item`. Capitalization and spacing should match exactly.
+
+```js
+assert(
+  $('li')
+    .text()
+    .match(/list item/g).length == 3
+);
+```
+
+Your code should access the `d3` object.
+
+```js
+assert(code.match(/d3/g));
+```
+
+Your code should use the `selectAll` method.
+
+```js
+assert(code.match(/\.selectAll/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <ul>
+    <li>Example</li>
+    <li>Example</li>
+    <li>Example</li>
+  </ul>
+  <script>
+    // Add your code below this line
+
+
+
+    // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <ul>
+    <li>Example</li>
+    <li>Example</li>
+    <li>Example</li>
+  </ul>
+  <script>
+    d3.selectAll("li")
+      .text("list item")
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md
new file mode 100644
index 00000000000..5a678c5dd0d
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md
@@ -0,0 +1,106 @@
+---
+id: 587d7fac367417b2b2512bdb
+title: Set a Domain and a Range on a Scale
+challengeType: 6
+forumTopicId: 301491
+dashedName: set-a-domain-and-a-range-on-a-scale
+---
+
+# --description--
+
+By default, scales use the identity relationship. This means the input value maps to the output value. However, scales can be much more flexible and interesting.
+
+Say a dataset has values ranging from 50 to 480. This is the input information for a scale, also known as the <dfn>domain</dfn>.
+
+You want to map those points along the `x` axis on the SVG canvas, between 10 units and 500 units. This is the output information, also known as the <dfn>range</dfn>.
+
+The `domain()` and `range()` methods set these values for the scale. Both methods take an array of at least two elements as an argument. Here's an example:
+
+```js
+scale.domain([50, 480]);
+scale.range([10, 500]);
+scale(50)
+scale(480)
+scale(325)
+scale(750)
+d3.scaleLinear()
+```
+
+In order, the following values would be displayed in the console: `10`, `500`, `323.37`, and `807.67`.
+
+Notice that the scale uses the linear relationship between the domain and range values to figure out what the output should be for a given number. The minimum value in the domain (50) maps to the minimum value (10) in the range.
+
+# --instructions--
+
+Create a scale and set its domain to `[250, 500]` and range to `[10, 150]`.
+
+**Note:** You can chain the `domain()` and `range()` methods onto the `scale` variable.
+
+# --hints--
+
+Your code should use the `domain()` method.
+
+```js
+assert(code.match(/\.domain/g));
+```
+
+The `domain()` of the `scale` should be set to `[250, 500]`.
+
+```js
+assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));
+```
+
+Your code should use the `range()` method.
+
+```js
+assert(code.match(/\.range/g));
+```
+
+The `range()` of the `scale` should be set to `[10, 150]`.
+
+```js
+assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));
+```
+
+The text in the `h2` should be `-102`.
+
+```js
+assert($('h2').text() == '-102');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    // Add your code below this line
+    const scale = d3.scaleLinear();
+
+
+
+    // Add your code above this line
+    const output = scale(50);
+    d3.select("body")
+      .append("h2")
+      .text(output);
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const scale = d3.scaleLinear();
+    scale.domain([250, 500])
+    scale.range([10, 150])
+    const output = scale(50);
+    d3.select("body")
+      .append("h2")
+      .text(output);
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/style-d3-labels.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/style-d3-labels.md
new file mode 100644
index 00000000000..934932f51ff
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/style-d3-labels.md
@@ -0,0 +1,110 @@
+---
+id: 587d7faa367417b2b2512bd3
+title: Style D3 Labels
+challengeType: 6
+forumTopicId: 301492
+dashedName: style-d3-labels
+---
+
+# --description--
+
+D3 methods can add styles to the bar labels. The `fill` attribute sets the color of the text for a `text` node. The `style()` method sets CSS rules for other styles, such as `font-family` or `font-size`.
+
+# --instructions--
+
+Set the `font-size` of the `text` elements to `25px`, and the color of the text to red.
+
+# --hints--
+
+The labels should all have a `fill` color of red.
+
+```js
+assert($('text').css('fill') == 'rgb(255, 0, 0)');
+```
+
+The labels should all have a `font-size` of `25` pixels.
+
+```js
+assert($('text').css('font-size') == '25px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - 3 * d)
+       .attr("width", 25)
+       .attr("height", (d, i) => d * 3)
+       .attr("fill", "navy");
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       .text((d) => d)
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - (3 * d) - 3)
+       // Add your code below this line
+
+
+
+       // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    const w = 500;
+    const h = 100;
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("rect")
+       .data(dataset)
+       .enter()
+       .append("rect")
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - 3 * d)
+       .attr("width", 25)
+       .attr("height", (d, i) => d * 3)
+       .attr("fill", "navy");
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       .text((d) => d)
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - (3 * d) - 3)
+       .style("font-size", 25)
+       .attr("fill", "red")
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md
new file mode 100644
index 00000000000..27dd13a1b97
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md
@@ -0,0 +1,137 @@
+---
+id: 587d7fa8367417b2b2512bc9
+title: Update the Height of an Element Dynamically
+challengeType: 6
+forumTopicId: 301493
+dashedName: update-the-height-of-an-element-dynamically
+---
+
+# --description--
+
+The previous challenges covered how to display data from an array and how to add CSS classes. You can combine these lessons to create a simple bar chart. There are two steps to this:
+
+1) Create a `div` for each data point in the array
+
+2) Give each `div` a dynamic height, using a callback function in the `style()` method that sets height equal to the data value
+
+Recall the format to set a style using a callback function:
+
+```js
+selection.style("cssProperty", (d) => d)
+```
+
+# --instructions--
+
+Add the `style()` method to the code in the editor to set the `height` property for each element. Use a callback function to return the value of the data point with the string `px` added to it.
+
+# --hints--
+
+The first `div` should have a `height` of `12` pixels.
+
+```js
+assert($('div').eq(0)[0].style.height === '12px');
+```
+
+The second `div` should have a `height` of `31` pixels.
+
+```js
+assert($('div').eq(1)[0].style.height === '31px');
+```
+
+The third `div` should have a `height` of `22` pixels.
+
+```js
+assert($('div').eq(2)[0].style.height === '22px');
+```
+
+The fourth `div` should have a `height` of `17` pixels.
+
+```js
+assert($('div').eq(3)[0].style.height === '17px');
+```
+
+The fifth `div` should have a `height` of `25` pixels.
+
+```js
+assert($('div').eq(4)[0].style.height === '25px');
+```
+
+The sixth `div` should have a `height` of `18` pixels.
+
+```js
+assert($('div').eq(5)[0].style.height === '18px');
+```
+
+The seventh `div` should have a `height` of `29` pixels.
+
+```js
+assert($('div').eq(6)[0].style.height === '29px');
+```
+
+The eighth `div` should have a `height` of `14` pixels.
+
+```js
+assert($('div').eq(7)[0].style.height === '14px');
+```
+
+The ninth `div` should have a `height` of `9` pixels.
+
+```js
+assert($('div').eq(8)[0].style.height === '9px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<style>
+  .bar {
+    width: 25px;
+    height: 100px;
+    display: inline-block;
+    background-color: blue;
+  }
+</style>
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    d3.select("body").selectAll("div")
+      .data(dataset)
+      .enter()
+      .append("div")
+      .attr("class", "bar")
+      // Add your code below this line
+
+
+
+      // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<style>
+  .bar {
+    width: 25px;
+    height: 100px;
+    display: inline-block;
+    background-color: blue;
+  }
+</style>
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    d3.select("body").selectAll("div")
+      .data(dataset)
+      .enter()
+      .append("div")
+      .attr("class", "bar")
+      .style('height', d => `${d}px`)
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md
new file mode 100644
index 00000000000..e02248743c2
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md
@@ -0,0 +1,347 @@
+---
+id: 587d7fac367417b2b2512bde
+title: Use a Pre-Defined Scale to Place Elements
+challengeType: 6
+forumTopicId: 301494
+dashedName: use-a-pre-defined-scale-to-place-elements
+---
+
+# --description--
+
+With the scales set up, it's time to map the scatter plot again. The scales are like processing functions that turn the `x` and `y` raw data into values that fit and render correctly on the SVG canvas. They keep the data within the screen's plotting area.
+
+You set the coordinate attribute values for an SVG shape with the scaling function. This includes `x` and `y` attributes for `rect` or `text` elements, or `cx` and `cy` for `circles`. Here's an example:
+
+```js
+shape
+  .attr("x", (d) => xScale(d[0]))
+```
+
+Scales set shape coordinate attributes to place the data points onto the SVG canvas. You don't need to apply scales when you display the actual data value, for example, in the `text()` method for a tooltip or label.
+
+# --instructions--
+
+Use `xScale` and `yScale` to position both the `circle` and `text` shapes onto the SVG canvas. For the `circles`, apply the scales to set the `cx` and `cy` attributes. Give them a radius of `5` units, too.
+
+For the `text` elements, apply the scales to set the `x` and `y` attributes. The labels should be offset to the right of the dots. To do this, add `10` units to the `x` data value before passing it to the `xScale`.
+
+# --hints--
+
+Your code should have 10 `circle` elements.
+
+```js
+assert($('circle').length == 10);
+```
+
+The first `circle` element should have a `cx` value of approximately `91` and a `cy` value of approximately `368` after applying the scales. It should also have an `r` value of `5`.
+
+```js
+assert(
+  Math.round($('circle').eq(0).attr('cx')) == '91' &&
+    Math.round($('circle').eq(0).attr('cy')) == '368' &&
+    $('circle').eq(0).attr('r') == '5'
+);
+```
+
+The second `circle` element should have a `cx` value of approximately `159` and a `cy` value of approximately `181` after applying the scales. It should also have an `r` value of `5`.
+
+```js
+assert(
+  Math.round($('circle').eq(1).attr('cx')) == '159' &&
+    Math.round($('circle').eq(1).attr('cy')) == '181' &&
+    $('circle').eq(1).attr('r') == '5'
+);
+```
+
+The third `circle` element should have a `cx` value of approximately `340` and a `cy` value of approximately `329` after applying the scales. It should also have an `r` value of `5`.
+
+```js
+assert(
+  Math.round($('circle').eq(2).attr('cx')) == '340' &&
+    Math.round($('circle').eq(2).attr('cy')) == '329' &&
+    $('circle').eq(2).attr('r') == '5'
+);
+```
+
+The fourth `circle` element should have a `cx` value of approximately `131` and a `cy` value of approximately `60` after applying the scales. It should also have an `r` value of `5`.
+
+```js
+assert(
+  Math.round($('circle').eq(3).attr('cx')) == '131' &&
+    Math.round($('circle').eq(3).attr('cy')) == '60' &&
+    $('circle').eq(3).attr('r') == '5'
+);
+```
+
+The fifth `circle` element should have a `cx` value of approximately `440` and a `cy` value of approximately `237` after applying the scales. It should also have an `r` value of `5`.
+
+```js
+assert(
+  Math.round($('circle').eq(4).attr('cx')) == '440' &&
+    Math.round($('circle').eq(4).attr('cy')) == '237' &&
+    $('circle').eq(4).attr('r') == '5'
+);
+```
+
+The sixth `circle` element should have a `cx` value of approximately `271` and a `cy` value of approximately `306` after applying the scales. It should also have an `r` value of `5`.
+
+```js
+assert(
+  Math.round($('circle').eq(5).attr('cx')) == '271' &&
+    Math.round($('circle').eq(5).attr('cy')) == '306' &&
+    $('circle').eq(5).attr('r') == '5'
+);
+```
+
+The seventh `circle` element should have a `cx` value of approximately `361` and a `cy` value of approximately `351` after applying the scales. It should also have an `r` value of `5`.
+
+```js
+assert(
+  Math.round($('circle').eq(6).attr('cx')) == '361' &&
+    Math.round($('circle').eq(6).attr('cy')) == '351' &&
+    $('circle').eq(6).attr('r') == '5'
+);
+```
+
+The eighth `circle` element should have a `cx` value of approximately `261` and a `cy` value of approximately `132` after applying the scales. It should also have an `r` value of `5`.
+
+```js
+assert(
+  Math.round($('circle').eq(7).attr('cx')) == '261' &&
+    Math.round($('circle').eq(7).attr('cy')) == '132' &&
+    $('circle').eq(7).attr('r') == '5'
+);
+```
+
+The ninth `circle` element should have a `cx` value of approximately `131` and a `cy` value of approximately `144` after applying the scales. It should also have an `r` value of `5`.
+
+```js
+assert(
+  Math.round($('circle').eq(8).attr('cx')) == '131' &&
+    Math.round($('circle').eq(8).attr('cy')) == '144' &&
+    $('circle').eq(8).attr('r') == '5'
+);
+```
+
+The tenth `circle` element should have a `cx` value of approximately `79` and a `cy` value of approximately `326` after applying the scales. It should also have an `r` value of `5`.
+
+```js
+assert(
+  Math.round($('circle').eq(9).attr('cx')) == '79' &&
+    Math.round($('circle').eq(9).attr('cy')) == '326' &&
+    $('circle').eq(9).attr('r') == '5'
+);
+```
+
+Your code should have 10 `text` elements.
+
+```js
+assert($('text').length == 10);
+```
+
+The first label should have an `x` value of approximately `100` and a `y` value of approximately `368` after applying the scales.
+
+```js
+assert(
+  Math.round($('text').eq(0).attr('x')) == '100' &&
+    Math.round($('text').eq(0).attr('y')) == '368'
+);
+```
+
+The second label should have an `x` value of approximately `168` and a `y` value of approximately `181` after applying the scales.
+
+```js
+assert(
+  Math.round($('text').eq(1).attr('x')) == '168' &&
+    Math.round($('text').eq(1).attr('y')) == '181'
+);
+```
+
+The third label should have an `x` value of approximately `350` and a `y` value of approximately `329` after applying the scales.
+
+```js
+assert(
+  Math.round($('text').eq(2).attr('x')) == '350' &&
+    Math.round($('text').eq(2).attr('y')) == '329'
+);
+```
+
+The fourth label should have an `x` value of approximately `141` and a `y` value of approximately `60` after applying the scales.
+
+```js
+assert(
+  Math.round($('text').eq(3).attr('x')) == '141' &&
+    Math.round($('text').eq(3).attr('y')) == '60'
+);
+```
+
+The fifth label should have an `x` value of approximately `449` and a `y` value of approximately `237` after applying the scales.
+
+```js
+assert(
+  Math.round($('text').eq(4).attr('x')) == '449' &&
+    Math.round($('text').eq(4).attr('y')) == '237'
+);
+```
+
+The sixth label should have an `x` value of approximately `280` and a `y` value of approximately `306` after applying the scales.
+
+```js
+assert(
+  Math.round($('text').eq(5).attr('x')) == '280' &&
+    Math.round($('text').eq(5).attr('y')) == '306'
+);
+```
+
+The seventh label should have an `x` value of approximately `370` and a `y` value of approximately `351` after applying the scales.
+
+```js
+assert(
+  Math.round($('text').eq(6).attr('x')) == '370' &&
+    Math.round($('text').eq(6).attr('y')) == '351'
+);
+```
+
+The eighth label should have an `x` value of approximately `270` and a `y` value of approximately `132` after applying the scales.
+
+```js
+assert(
+  Math.round($('text').eq(7).attr('x')) == '270' &&
+    Math.round($('text').eq(7).attr('y')) == '132'
+);
+```
+
+The ninth label should have an `x` value of approximately `140` and a `y` value of approximately `144` after applying the scales.
+
+```js
+assert(
+  Math.round($('text').eq(8).attr('x')) == '140' &&
+    Math.round($('text').eq(8).attr('y')) == '144'
+);
+```
+
+The tenth label should have an `x` value of approximately `88` and a `y` value of approximately `326` after applying the scales.
+
+```js
+assert(
+  Math.round($('text').eq(9).attr('x')) == '88' &&
+    Math.round($('text').eq(9).attr('y')) == '326'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [
+                  [ 34,     78 ],
+                  [ 109,   280 ],
+                  [ 310,   120 ],
+                  [ 79,   411 ],
+                  [ 420,   220 ],
+                  [ 233,   145 ],
+                  [ 333,   96 ],
+                  [ 222,    333 ],
+                  [ 78,    320 ],
+                  [ 21,   123 ]
+                ];
+
+    const w = 500;
+    const h = 500;
+    const padding = 60;
+
+    const xScale = d3.scaleLinear()
+                     .domain([0, d3.max(dataset, (d) => d[0])])
+                     .range([padding, w - padding]);
+
+    const yScale = d3.scaleLinear()
+                     .domain([0, d3.max(dataset, (d) => d[1])])
+                     .range([h - padding, padding]);
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("circle")
+       .data(dataset)
+       .enter()
+       .append("circle")
+       // Add your code below this line
+
+
+
+       // Add your code above this line
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       .text((d) =>  (d[0] + ", "
+ + d[1]))
+       // Add your code below this line
+
+
+
+       // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [
+                  [ 34,     78 ],
+                  [ 109,   280 ],
+                  [ 310,   120 ],
+                  [ 79,   411 ],
+                  [ 420,   220 ],
+                  [ 233,   145 ],
+                  [ 333,   96 ],
+                  [ 222,    333 ],
+                  [ 78,    320 ],
+                  [ 21,   123 ]
+                ];
+
+    const w = 500;
+    const h = 500;
+    const padding = 60;
+
+    const xScale = d3.scaleLinear()
+                     .domain([0, d3.max(dataset, (d) => d[0])])
+                     .range([padding, w - padding]);
+
+    const yScale = d3.scaleLinear()
+                     .domain([0, d3.max(dataset, (d) => d[1])])
+                     .range([h - padding, padding]);
+
+    const svg = d3.select("body")
+                  .append("svg")
+                  .attr("width", w)
+                  .attr("height", h);
+
+    svg.selectAll("circle")
+       .data(dataset)
+       .enter()
+       .append("circle")
+       .attr("cx", (d) => xScale(d[0]))
+       .attr("cy", (d) => yScale(d[1]))
+       .attr("r", 5)
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       .text((d) =>  (d[0] + ", "
+ + d[1]))
+       .attr("x", (d) => xScale(d[0] + 10))
+       .attr("y", (d) => yScale(d[1]))
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md
new file mode 100644
index 00000000000..92889986bd6
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md
@@ -0,0 +1,156 @@
+---
+id: 587d7fac367417b2b2512bdd
+title: Use Dynamic Scales
+challengeType: 6
+forumTopicId: 301495
+dashedName: use-dynamic-scales
+---
+
+# --description--
+
+The D3 `min()` and `max()` methods are useful to help set the scale.
+
+Given a complex data set, one priority is to set the scale so the visualization fits the SVG container's width and height. You want all the data plotted inside the SVG canvas so it's visible on the web page.
+
+The example below sets the x-axis scale for scatter plot data. The `domain()` method passes information to the scale about the raw data values for the plot. The `range()` method gives it information about the actual space on the web page for the visualization.
+
+In the example, the domain goes from 0 to the maximum in the set. It uses the `max()` method with a callback function based on the x values in the arrays. The range uses the SVG canvas' width (`w`), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG canvas.
+
+```js
+const dataset = [
+  [ 34,    78 ],
+  [ 109,   280 ],
+  [ 310,   120 ],
+  [ 79,    411 ],
+  [ 420,   220 ],
+  [ 233,   145 ],
+  [ 333,   96 ],
+  [ 222,   333 ],
+  [ 78,    320 ],
+  [ 21,    123 ]
+];
+const w = 500;
+const h = 500;
+
+const padding = 30;
+const xScale = d3.scaleLinear()
+  .domain([0, d3.max(dataset, (d) => d[0])])
+  .range([padding, w - padding]);
+```
+
+The padding may be confusing at first. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG canvas). Including the padding in the `range()` method forces the plot to start at 30 along that line (instead of 0), and end at 470 (instead of 500).
+
+# --instructions--
+
+Use the `yScale` variable to create a linear y-axis scale. The domain should start at zero and go to the maximum `y` value in the set. The range should use the SVG height (`h`) and include padding.
+
+**Note:** Remember to keep the plot right-side-up. When you set the range for the y coordinates, the higher value (height minus padding) is the first argument, and the lower value is the second argument.
+
+# --hints--
+
+The text in the `h2` should be `30`.
+
+```js
+assert(output == 30 && $('h2').text() == '30');
+```
+
+The `domain()` of yScale should be equivalent to `[0, 411]`.
+
+```js
+assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]));
+```
+
+The `range()` of yScale should be equivalent to `[470, 30]`.
+
+```js
+assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [
+                  [ 34,    78 ],
+                  [ 109,   280 ],
+                  [ 310,   120 ],
+                  [ 79,    411 ],
+                  [ 420,   220 ],
+                  [ 233,   145 ],
+                  [ 333,   96 ],
+                  [ 222,   333 ],
+                  [ 78,    320 ],
+                  [ 21,    123 ]
+                ];
+
+    const w = 500;
+    const h = 500;
+
+    // Padding between the SVG canvas boundary and the plot
+    const padding = 30;
+
+    // Create an x and y scale
+
+    const xScale = d3.scaleLinear()
+                    .domain([0, d3.max(dataset, (d) => d[0])])
+                    .range([padding, w - padding]);
+
+    // Add your code below this line
+
+    const yScale = undefined;
+
+
+    // Add your code above this line
+
+    const output = yScale(411); // Returns 30
+    d3.select("body")
+      .append("h2")
+      .text(output)
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [
+                  [ 34,    78 ],
+                  [ 109,   280 ],
+                  [ 310,   120 ],
+                  [ 79,    411 ],
+                  [ 420,   220 ],
+                  [ 233,   145 ],
+                  [ 333,   96 ],
+                  [ 222,   333 ],
+                  [ 78,    320 ],
+                  [ 21,    123 ]
+                ];
+
+    const w = 500;
+    const h = 500;
+
+
+    const padding = 30;
+
+    const xScale = d3.scaleLinear()
+                    .domain([0, d3.max(dataset, (d) => d[0])])
+                    .range([padding, w - padding]);
+
+
+    const yScale = d3.scaleLinear()
+                     .domain([0, d3.max(dataset, (d) => d[1])])
+                     .range([h - padding, padding]);
+
+
+    const output = yScale(411);
+    d3.select("body")
+      .append("h2")
+      .text(output)
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.md
new file mode 100644
index 00000000000..7736dd35ef9
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.md
@@ -0,0 +1,90 @@
+---
+id: 587d7fac367417b2b2512bdc
+title: >-
+  Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset
+challengeType: 6
+forumTopicId: 301496
+dashedName: >-
+  use-the-d3-max-and-d3-min-functions-to-find-minimum-and-maximum-values-in-a-dataset
+---
+
+# --description--
+
+The D3 methods `domain()` and `range()` set that information for your scale based on the data. There are a couple methods to make that easier.
+
+Often when you set the domain, you'll want to use the minimum and maximum values within the data set. Trying to find these values manually, especially in a large data set, may cause errors.
+
+D3 has two methods - `min()` and `max()` to return this information. Here's an example:
+
+```js
+const exampleData = [34, 234, 73, 90, 6, 52];
+d3.min(exampleData)
+d3.max(exampleData)
+```
+
+A dataset may have nested arrays, like the `[x, y]` coordinate pairs that were in the scatter plot example. In that case, you need to tell D3 how to calculate the maximum and minimum. Fortunately, both the `min()` and `max()` methods take a callback function. In this example, the callback function's argument `d` is for the current inner array. The callback needs to return the element from the inner array (the `x` or `y` value) over which you want to compute the maximum or minimum. Here's an example for how to find the min and max values with an array of arrays:
+
+```js
+const locationData = [[1, 7],[6, 3],[8, 3]];
+const minX = d3.min(locationData, (d) => d[0]);
+```
+
+`minX` would have the value `1`.
+
+# --instructions--
+
+The `positionData` array holds sub arrays of x, y, and z coordinates. Use a D3 method to find the maximum value of the z coordinate (the third value) from the arrays and save it in the `output` variable.
+
+# --hints--
+
+The text in the `h2` should be `8`.
+
+```js
+assert(output == 8 && $('h2').text() == '8');
+```
+
+Your code should use the `max()` method.
+
+```js
+assert(
+  code.match(/\.max/g),
+  'Your code should use the <code>max()</code> method.'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const positionData = [[1, 7, -4],[6, 3, 8],[2, 9, 3]]
+    // Add your code below this line
+
+    const output = undefined; // Change this line
+
+    // Add your code above this line
+
+    d3.select("body")
+      .append("h2")
+      .text(output)
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const positionData = [[1, 7, -4],[6, 3, 8],[2, 9, 3]]
+
+    const output = d3.max(positionData, (d) => d[2])
+
+    d3.select("body")
+      .append("h2")
+      .text(output)
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.md
new file mode 100644
index 00000000000..bcf31464caa
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.md
@@ -0,0 +1,105 @@
+---
+id: 587d7fa7367417b2b2512bc4
+title: Work with Data in D3
+challengeType: 6
+forumTopicId: 301497
+dashedName: work-with-data-in-d3
+---
+
+# --description--
+
+The D3 library focuses on a data-driven approach. When you have a set of data, you can apply D3 methods to display it on the page. Data comes in many formats, but this challenge uses a simple array of numbers.
+
+The first step is to make D3 aware of the data. The `data()` method is used on a selection of DOM elements to attach the data to those elements. The data set is passed as an argument to the method.
+
+A common workflow pattern is to create a new element in the document for each piece of data in the set. D3 has the `enter()` method for this purpose.
+
+When `enter()` is combined with the `data()` method, it looks at the selected elements from the page and compares them to the number of data items in the set. If there are fewer elements than data items, it creates the missing elements.
+
+Here is an example that selects a `ul` element and creates a new list item based on the number of entries in the array:
+
+```html
+<body>
+  <ul></ul>
+  <script>
+    const dataset = ["a", "b", "c"];
+    d3.select("ul").selectAll("li")
+      .data(dataset)
+      .enter()
+      .append("li")
+      .text("New item");
+  </script>
+</body>
+```
+
+It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the `ul` on the page. Next, select all list items, which returns an empty selection. Then the `data()` method reviews the dataset and runs the following code three times, once for each item in the array. The `enter()` method sees there are no `li` elements on the page, but it needs 3 (one for each piece of data in `dataset`). New `li` elements are appended to the `ul` and have the text `New item`.
+
+# --instructions--
+
+Select the `body` node, then select all `h2` elements. Have D3 create and append an `h2` tag for each item in the `dataset` array. The text in the `h2` should say `New Title`. Your code should use the `data()` and `enter()` methods.
+
+# --hints--
+
+Your document should have 9 `h2` elements.
+
+```js
+assert($('h2').length == 9);
+```
+
+The text in the `h2` elements should say `New Title`. The capitalization and spacing should match exactly.
+
+```js
+assert(
+  $('h2')
+    .text()
+    .match(/New Title/g).length == 9
+);
+```
+
+Your code should use the `data()` method.
+
+```js
+assert(code.match(/\.data/g));
+```
+
+Your code should use the `enter()` method.
+
+```js
+assert(code.match(/\.enter/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    // Add your code below this line
+
+
+
+    // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    d3.select("body")
+      .selectAll("h2")
+      .data(dataset)
+      .enter()
+      .append("h2")
+      .text("New Title")
+
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md
new file mode 100644
index 00000000000..3b4a59ff1f4
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md
@@ -0,0 +1,122 @@
+---
+id: 587d7fa7367417b2b2512bc5
+title: Work with Dynamic Data in D3
+challengeType: 6
+forumTopicId: 301498
+dashedName: work-with-dynamic-data-in-d3
+---
+
+# --description--
+
+The last two challenges cover the basics of displaying data dynamically with D3 using the `data()` and `enter()` methods. These methods take a data set and, together with the `append()` method, create a new DOM element for each entry in the data set.
+
+In the previous challenge, you created a new `h2` element for each item in the `dataset` array, but they all contained the same text, `New Title`. This is because you have not made use of the data that is bound to each of the `h2` elements.
+
+The D3 `text()` method can take a string or a callback function as an argument:
+
+```js
+selection.text((d) => d)
+```
+
+In the example above, the parameter `d` refers to a single entry in the dataset that a selection is bound to.
+
+Using the current example as context, the first `h2` element is bound to 12, the second `h2` element is bound to 31, the third `h2` element is bound to 22, and so on.
+
+# --instructions--
+
+Change the `text()` method so that each `h2` element displays the corresponding value from the `dataset` array with a single space and the string `USD`. For example, the first heading should be `12 USD`.
+
+# --hints--
+
+The first `h2` should have the text `12 USD`.
+
+```js
+assert($('h2').eq(0).text() == '12 USD');
+```
+
+The second `h2` should have the text `31 USD`.
+
+```js
+assert($('h2').eq(1).text() == '31 USD');
+```
+
+The third `h2` should have the text `22 USD`.
+
+```js
+assert($('h2').eq(2).text() == '22 USD');
+```
+
+The fourth `h2` should have the text `17 USD`.
+
+```js
+assert($('h2').eq(3).text() == '17 USD');
+```
+
+The fifth `h2` should have the text `25 USD`.
+
+```js
+assert($('h2').eq(4).text() == '25 USD');
+```
+
+The sixth `h2` should have the text `18 USD`.
+
+```js
+assert($('h2').eq(5).text() == '18 USD');
+```
+
+The seventh `h2` should have the text `29 USD`.
+
+```js
+assert($('h2').eq(6).text() == '29 USD');
+```
+
+The eighth `h2` should have the text `14 USD`.
+
+```js
+assert($('h2').eq(7).text() == '14 USD');
+```
+
+The ninth `h2` should have the text `9 USD`.
+
+```js
+assert($('h2').eq(8).text() == '9 USD');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    d3.select("body").selectAll("h2")
+      .data(dataset)
+      .enter()
+      .append("h2")
+      // Add your code below this line
+
+      .text("New Title");
+
+      // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<body>
+  <script>
+    const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
+
+    d3.select("body").selectAll("h2")
+      .data(dataset)
+      .enter()
+      .append("h2")
+      .text((d) => `${d} USD`);
+
+  </script>
+</body>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md
new file mode 100644
index 00000000000..b77c40d31e6
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md
@@ -0,0 +1,167 @@
+---
+id: 587d7fae367417b2b2512be4
+title: Access the JSON Data from an API
+challengeType: 6
+forumTopicId: 301499
+dashedName: access-the-json-data-from-an-api
+---
+
+# --description--
+
+In the previous challenge, you saw how to get JSON data from the freeCodeCamp Cat Photo API.
+
+Now you'll take a closer look at the returned data to better understand the JSON format. Recall some notation in JavaScript:
+
+<blockquote>[ ] -> Square brackets represent an array.<br>{ } -> Curly brackets represent an object.<br>" " -> Double quotes represent a string. They are also used for key names in JSON.</blockquote>
+
+Understanding the structure of the data that an API returns is important because it influences how you retrieve the values you need.
+
+On the right, click the `Get Message` button to load the freeCodeCamp Cat Photo API JSON into the HTML.
+
+The first and last character you see in the JSON data are square brackets `[ ]`. This means that the returned data is an array. The second character in the JSON data is a curly `{` bracket, which starts an object. Looking closely, you can see that there are three separate objects. The JSON data is an array of three objects, where each object contains information about a cat photo.
+
+You learned earlier that objects contain "key-value pairs" that are separated by commas. In the Cat Photo example, the first object has `"id":0` where `id` is a key and `0` is its corresponding value. Similarly, there are keys for `imageLink`, `altText`, and `codeNames`. Each cat photo object has these same keys, but with different values.
+
+Another interesting "key-value pair" in the first object is `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Here `codeNames` is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.
+
+Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the `altText` property of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called `json`:
+
+```js
+console.log(json[0].altText);
+```
+
+The console would display the string `A white cat wearing a green helmet shaped melon on its head.`.
+
+# --instructions--
+
+For the cat with the `id` of 2, print to the console the second value in the `codeNames` array. You should use bracket and dot notation on the object (which is saved in the variable `json`) to access the value.
+
+# --hints--
+
+Your code should use bracket and dot notation to access the proper code name, and print `Loki` to the console.
+
+```js
+assert(
+  code.match(
+    /console\s*\.\s*log\s*\(\s*json\s*\[2\]\s*(\.\s*codeNames|\[\s*('|`|")codeNames\2\s*\])\s*\[\s*1\s*\]\s*\)/g
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
+      const req = new XMLHttpRequest();
+      req.open("GET",'/json/cats.json', true);
+      req.send();
+      req.onload=function(){
+        const json = JSON.parse(req.responseText);
+        document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
+        // Add your code below this line
+
+        // Add your code above this line
+      };
+    };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Photo Finder</h1>
+<p class="message box">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
+
+# --solutions--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
+      const req = new XMLHttpRequest();
+      req.open("GET",'/json/cats.json', true);
+      req.send();
+      req.onload=function(){
+        const json = JSON.parse(req.responseText);
+        document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
+        // Add your code below this line
+        console.log(json[2].codeNames[1]);
+        // Add your code above this line
+      };
+    };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Photo Finder</h1>
+<p class="message">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md
new file mode 100644
index 00000000000..4550322262e
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md
@@ -0,0 +1,140 @@
+---
+id: 587d7fad367417b2b2512be2
+title: Change Text with click Events
+challengeType: 6
+forumTopicId: 301500
+dashedName: change-text-with-click-events
+---
+
+# --description--
+
+When the click event happens, you can use JavaScript to update an HTML element.
+
+For example, when a user clicks the `Get Message` button, it changes the text of the element with the class `message` to say `Here is the message`.
+
+This works by adding the following code within the click event:
+
+```js
+document.getElementsByClassName('message')[0].textContent="Here is the message";
+```
+
+# --instructions--
+
+Add code inside the `onclick` event handler to change the text inside the `message` element to say `Here is the message`.
+
+# --hints--
+
+Your code should use the `document.getElementsByClassName` method to select the element with class `message` and set its `textContent` to the given string.
+
+```js
+assert(
+  code.match(
+    /document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.textContent\s*?=\s*?('|")Here is the message\2/g
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
+      // Add your code below this line
+
+
+      // Add your code above this line
+    }
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Photo Finder</h1>
+<p class="message box">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
+
+# --solutions--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded',function(){
+    document.getElementById('getMessage').onclick = function(){
+      // Add your code below this line
+      document.getElementsByClassName('message')[0].textContent = "Here is the message";
+      // Add your code above this line
+    }
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Photo Finder</h1>
+<p class="message">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md
new file mode 100644
index 00000000000..8678469f291
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md
@@ -0,0 +1,199 @@
+---
+id: 587d7fae367417b2b2512be5
+title: Convert JSON Data to HTML
+challengeType: 6
+forumTopicId: 16807
+dashedName: convert-json-data-to-html
+---
+
+# --description--
+
+Now that you're getting data from a JSON API, you can display it in the HTML.
+
+You can use a `forEach` method to loop through the data since the cat photo objects are held in an array. As you get to each item, you can modify the HTML elements.
+
+First, declare an html variable with `let html = "";`.
+
+Then, loop through the JSON, adding HTML to the variable that wraps the key names in `strong` tags, followed by the value. When the loop is finished, you render it.
+
+Here's the code that does this:
+
+```js
+let html = "";
+json.forEach(function(val) {
+  const keys = Object.keys(val);
+  html += "<div class = 'cat'>";
+  keys.forEach(function(key) {
+    html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
+  });
+  html += "</div><br>";
+});
+```
+
+**Note:** For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to cross-site scripting attacks.
+
+# --instructions--
+
+Add a `forEach` method to loop over the JSON data and create the HTML elements to display it.
+
+Here is some example JSON:
+
+```json
+[
+  {
+    "id":0,
+      "imageLink":"https://s3.amazonaws.com/freecodecamp/funny-cat.jpg",
+      "altText":"A white cat wearing a green helmet shaped melon on its head. ",
+      "codeNames":[ "Juggernaut", "Mrs. Wallace", "Buttercup"
+    ]
+  }
+]
+```
+
+# --hints--
+
+Your code should store the data in the `html` variable
+
+```js
+assert(__helpers.removeWhiteSpace(code).match(/html(\+=|=html\+)/g))
+```
+
+Your code should use a `forEach` method to loop over the JSON data from the API.
+
+```js
+assert(code.match(/json\.forEach/g));
+```
+
+Your code should wrap the key names in `strong` tags.
+
+```js
+assert(code.match(/<strong>.+<\/strong>/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
+      const req = new XMLHttpRequest();
+      req.open("GET",'/json/cats.json',true);
+      req.send();
+      req.onload = function(){
+        const json = JSON.parse(req.responseText);
+        let html = "";
+        // Add your code below this line
+
+
+        // Add your code above this line
+        document.getElementsByClassName('message')[0].innerHTML = html;
+      };
+    };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Photo Finder</h1>
+<p class="message box">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
+
+# --solutions--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
+      const req = new XMLHttpRequest();
+      req.open("GET",'/json/cats.json',true);
+      req.send();
+      req.onload = function(){
+        const json = JSON.parse(req.responseText);
+        let html = "";
+        // Add your code below this line
+        json.forEach(function(val) {
+          var keys = Object.keys(val);
+          html += "<div class = 'cat'>";
+          keys.forEach(function(key) {
+          html += "<strong>" + key + "</strong>: " + val[key] + "<br>";
+        });
+        html += "</div><br>";
+        });
+        // Add your code above this line
+        document.getElementsByClassName('message')[0].innerHTML = html;
+      };
+    };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Photo Finder</h1>
+<p class="message">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md
new file mode 100644
index 00000000000..bed1c43e989
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md
@@ -0,0 +1,98 @@
+---
+id: 587d7faf367417b2b2512be8
+title: Get Geolocation Data to Find A User's GPS Coordinates
+challengeType: 6
+forumTopicId: 18188
+dashedName: get-geolocation-data-to-find-a-users-gps-coordinates
+---
+
+# --description--
+
+Another cool thing you can do is access your user's current location. Every browser has a built in navigator that can give you this information.
+
+The navigator will get the user's current longitude and latitude.
+
+You will see a prompt to allow or block this site from knowing your current location. The challenge can be completed either way, as long as the code is correct.
+
+By selecting allow, you will see the text on the output phone change to your latitude and longitude.
+
+Here's code that does this:
+
+```js
+if (navigator.geolocation){
+  navigator.geolocation.getCurrentPosition(function(position) {
+    document.getElementById('data').innerHTML="latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;
+  });
+}
+```
+
+First, it checks if the `navigator.geolocation` object exists. If it does, the `getCurrentPosition` method on that object is called, which initiates an asynchronous request for the user's position. If the request is successful, the callback function in the method runs. This function accesses the `position` object's values for latitude and longitude using dot notation and updates the HTML.
+
+# --instructions--
+
+Add the example code inside the `script` tags to check a user's current location and insert it into the HTML.
+
+# --hints--
+
+Your code should use `navigator.geolocation` to access the user's current location.
+
+```js
+assert(code.match(/navigator\.geolocation\.getCurrentPosition/g));
+```
+
+Your code should use `position.coords.latitude` to display the user's latitudinal location.
+
+```js
+assert(code.match(/position\.coords\.latitude/g));
+```
+
+Your code should use `position.coords.longitude` to display the user's longitudinal location.
+
+```js
+assert(code.match(/position\.coords\.longitude/g));
+```
+
+You should display the user's position within the `div` element with `id="data"`.
+
+```js
+assert(
+  code.match(/document\.getElementById\(\s*?('|")data\1\s*?\)\.innerHTML/g)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  // Add your code below this line
+
+
+  // Add your code above this line
+</script>
+<h4>You are here:</h4>
+<div id="data">
+
+</div>
+```
+
+# --solutions--
+
+```html
+<script>
+  // Add your code below this line
+  if (navigator.geolocation) {
+    navigator.geolocation.getCurrentPosition(function(position) {
+      document.getElementById('data').innerHTML = "latitude: " + position.coords.latitude + "<br>longitude: " + position.coords.longitude;
+    });
+  }
+  // Add your code above this line
+</script>
+<h4>You are here:</h4>
+<div id="data">
+
+</div>
+
+</section>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md
new file mode 100644
index 00000000000..b13644c2473
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md
@@ -0,0 +1,174 @@
+---
+id: 5ccfad82bb2dc6c965a848e5
+title: Get JSON with the JavaScript fetch method
+challengeType: 6
+forumTopicId: 301501
+dashedName: get-json-with-the-javascript-fetch-method
+---
+
+# --description--
+
+Another way to request external data is to use the JavaScript `fetch()` method. It is equivalent to `XMLHttpRequest`, but the syntax is considered easier to understand.
+
+Here is the code for making a GET request to `/json/cats.json`
+
+```js
+
+fetch('/json/cats.json')
+  .then(response => response.json())
+  .then(data => {
+    document.getElementById('message').innerHTML = JSON.stringify(data);
+  })
+
+```
+
+Take a look at each piece of this code.
+
+The first line is the one that makes the request. So, `fetch(URL)` makes a `GET` request to the URL specified. The method returns a Promise.
+
+After a Promise is returned, if the request was successful, the `then` method is executed, which takes the response and converts it to JSON format.
+
+The `then` method also returns a Promise, which is handled by the next `then` method. The argument in the second `then` is the JSON object you are looking for!
+
+Now, it selects the element that will receive the data by using `document.getElementById()`. Then it modifies the HTML code of the element by inserting a string created from the JSON object returned from the request.
+
+# --instructions--
+
+Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. But this time, using the `fetch` method instead of `XMLHttpRequest`.
+
+# --hints--
+
+Your code should make a `GET` request with `fetch`.
+
+```js
+assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g));
+```
+
+Your code should use `then` to convert the response to JSON.
+
+```js
+assert(
+  code.match(
+    /\.then\s*\(\s*\(?(?<var>\w+)\)?\s*=>\s*\k<var>\s*\.json\s*\(\s*\)\s*\)/g
+  )
+);
+```
+
+Your code should use `then` to handle the data converted to JSON by the other `then`.
+
+```js
+assert(__helpers.removeWhiteSpace(code).match(/\.then\(\(?\w+\)?=>{[^}]*}\)/g));
+```
+
+Your code should get the element with id `message` and change its inner HTML to the string of JSON data.
+
+```js
+assert(
+  __helpers.removeWhiteSpace(code).match(
+    /document\.getElementById\(('|")message\1\)\.innerHTML=JSON\.stringify\(?\w+\)/g
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded',function(){
+    document.getElementById('getMessage').onclick= () => {
+      // Add your code below this line
+
+
+      // Add your code above this line
+    };
+  });
+</script>
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+<h1>Cat Photo Finder</h1>
+<p id="message" class="box">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
+
+# --solutions--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded',function(){
+    document.getElementById('getMessage').onclick= () => {
+      fetch('/json/cats.json')
+        .then(response => response.json())
+        .then(data => {
+          document.getElementById('message').innerHTML=JSON.stringify(data);
+        })
+    };
+  });
+</script>
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+<h1>Cat Photo Finder</h1>
+<p id="message" class="box">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md
new file mode 100644
index 00000000000..01366753963
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md
@@ -0,0 +1,196 @@
+---
+id: 587d7fae367417b2b2512be3
+title: Get JSON with the JavaScript XMLHttpRequest Method
+challengeType: 6
+forumTopicId: 301502
+dashedName: get-json-with-the-javascript-xmlhttprequest-method
+---
+
+# --description--
+
+You can also request data from an external source. This is where APIs come into play.
+
+Remember that APIs - or Application Programming Interfaces - are tools that computers use to communicate with one another. You'll learn how to update HTML with the data we get from APIs using a technology called AJAX.
+
+Most web APIs transfer data in a format called JSON. JSON stands for JavaScript Object Notation.
+
+JSON syntax looks very similar to JavaScript object literal notation. JSON has object properties and their current values, sandwiched between a `{` and a `}`.
+
+These properties and their values are often referred to as "key-value pairs".
+
+However, JSON transmitted by APIs are sent as `bytes`, and your application receives it as a `string`. These can be converted into JavaScript objects, but they are not JavaScript objects by default. The `JSON.parse` method parses the string and constructs the JavaScript object described by it.
+
+You can request the JSON from freeCodeCamp's Cat Photo API. Here's the code you can put in your click event to do this:
+
+```js
+const req = new XMLHttpRequest();
+req.open("GET",'/json/cats.json',true);
+req.send();
+req.onload = function(){
+  const json = JSON.parse(req.responseText);
+  document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
+};
+```
+
+Here's a review of what each piece is doing. The JavaScript `XMLHttpRequest` object has a number of properties and methods that are used to transfer data. First, an instance of the `XMLHttpRequest` object is created and saved in the `req` variable. Next, the `open` method initializes a request - this example is requesting data from an API, therefore is a `GET` request. The second argument for `open` is the URL of the API you are requesting data from. The third argument is a Boolean value where `true` makes it an asynchronous request. The `send` method sends the request. Finally, the `onload` event handler parses the returned data and applies the `JSON.stringify` method to convert the JavaScript object into a string. This string is then inserted as the message text.
+
+# --instructions--
+
+Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. Then click the `Get Message` button. Your AJAX function will replace the `The message will go here` text with the raw JSON output from the API.
+
+# --hints--
+
+Your code should create a new `XMLHttpRequest`.
+
+```js
+assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
+```
+
+Your code should use the `open` method to initialize a `GET` request to the freeCodeCamp Cat Photo API.
+
+```js
+assert(
+  code.match(
+    /\.open\(\s*?('|")GET\1\s*?,\s*?('|")\/json\/cats\.json\2\s*?,\s*?true\s*?\)/g
+  )
+);
+```
+
+Your code should use the `send` method to send the request.
+
+```js
+assert(code.match(/\.send\(\s*\)/g));
+```
+
+Your code should have an `onload` event handler set to a function.
+
+```js
+assert(
+  code.match(/\.onload\s*=\s*(function|\(\s*?\))\s*?(\(\s*?\)|\=\>)\s*?{/g)
+);
+```
+
+Your code should use the `JSON.parse` method to parse the `responseText`.
+
+```js
+assert(code.match(/JSON\s*\.parse\(\s*.*\.responseText\s*\)/g));
+```
+
+Your code should get the element with class `message` and change its inner HTML to the string of JSON data.
+
+```js
+assert(
+  code.match(
+    /document\s*\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\s*\.innerHTML\s*?=\s*?JSON\.stringify\(.+?\)/g
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
+      // Add your code below this line
+
+
+      // Add your code above this line
+    };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Photo Finder</h1>
+<p class="message box">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
+
+# --solutions--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded',function(){
+    document.getElementById('getMessage').onclick = function(){
+      const req = new XMLHttpRequest();
+      req.open('GET', '/json/cats.json', true);
+      req.send();
+      req.onload = () => {
+        const json = JSON.parse(req.responseText);
+        document.getElementsByClassName('message')[0].innerHTML = JSON.stringify(json);
+      };
+    };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Photo Finder</h1>
+<p class="message box">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md
new file mode 100644
index 00000000000..5d57a07236d
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/handle-click-events-with-javascript-using-the-onclick-property.md
@@ -0,0 +1,140 @@
+---
+id: 587d7fad367417b2b2512be1
+title: Handle Click Events with JavaScript using the onclick property
+challengeType: 6
+forumTopicId: 301503
+dashedName: handle-click-events-with-javascript-using-the-onclick-property
+---
+
+# --description--
+
+You want your code to execute only once your page has finished loading. For that purpose, you can attach a JavaScript event to the document called `DOMContentLoaded`. Here's the code that does this:
+
+```js
+document.addEventListener('DOMContentLoaded', function() {
+
+});
+```
+
+You can implement event handlers that go inside of the `DOMContentLoaded` function. You can implement an `onclick` event handler which triggers when the user clicks on the element with id `getMessage`, by adding the following code:
+
+```js
+document.getElementById('getMessage').onclick = function(){};
+```
+
+# --instructions--
+
+Add a click event handler inside of the `DOMContentLoaded` function for the element with id of `getMessage`.
+
+# --hints--
+
+Your code should use the `document.getElementById` method to select the `getMessage` element.
+
+```js
+assert(code.match(/document\s*\.getElementById\(\s*?('|")getMessage\1\s*?\)/g));
+```
+
+Your code should add an `onclick` event handler.
+
+```js
+assert(typeof document.getElementById('getMessage').onclick === 'function');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    // Add your code below this line
+
+
+    // Add your code above this line
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+<h1>Cat Photo Finder</h1>
+<p class="message box">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
+
+# --solutions--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    // Add your code below this line
+    document.getElementById('getMessage').onclick = function(){ };
+    // Add your code above this line
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+<h1>Cat Photo Finder</h1> 
+<p class="message box">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md
new file mode 100644
index 00000000000..b1a807c2be2
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md
@@ -0,0 +1,206 @@
+---
+id: 587d7faf367417b2b2512be9
+title: Post Data with the JavaScript XMLHttpRequest Method
+challengeType: 6
+forumTopicId: 301504
+dashedName: post-data-with-the-javascript-xmlhttprequest-method
+---
+
+# --description--
+
+In the previous examples, you received data from an external resource. You can also send data to an external resource, as long as that resource supports AJAX requests and you know the URL.
+
+JavaScript's `XMLHttpRequest` method is also used to post data to a server. Here's an example:
+
+```js
+const xhr = new XMLHttpRequest();
+xhr.open('POST', url, true);
+xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+xhr.onreadystatechange = function () {
+  if (xhr.readyState === 4 && xhr.status === 201){
+    const serverResponse = JSON.parse(xhr.response);
+    document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;
+  }
+};
+const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
+xhr.send(body);
+```
+
+You've seen several of these methods before. Here the `open` method initializes the request as a `POST` to the given URL of the external resource, and uses the `true` Boolean to make it asynchronous. The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header. Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of `4` means the operation is complete, and a `status` of `201` means it was a successful request. The document's HTML can be updated. Finally, the `send` method sends the request with the `body` value, which the `userName` key was given by the user in the `input` field.
+
+# --instructions--
+
+Update the code so it makes a `POST` request to the API endpoint. Then type your name in the input field and click `Send Message`. Your AJAX function should replace `Reply from Server will be here.` with data from the server. Format the response to display your name appended with the text `loves cats`.
+
+# --hints--
+
+Your code should create a new `XMLHttpRequest`.
+
+```js
+assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
+```
+
+Your code should use the `open` method to initialize a `POST` request to the server.
+
+```js
+assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
+```
+
+Your code should use the `setRequestHeader` method.
+
+```js
+assert(
+  code.match(
+    /\.setRequestHeader\(\s*?('|")Content-Type\1\s*?,\s*?('|")application\/json;\s*charset=UTF-8\2\s*?\)/g
+  )
+);
+```
+
+Your code should have an `onreadystatechange` event handler set to a function.
+
+```js
+assert(code.match(/\.onreadystatechange\s*?=/g));
+```
+
+Your code should get the element with class `message` and change its `textContent` to `userName loves cats`
+
+```js
+assert(
+  code.match(
+    /document\.getElementsByClassName\(\s*?('|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?.+?\.userName\s*?\+\s*?.+?\.suffix/g
+  )
+);
+```
+
+Your code should use the `send` method.
+
+```js
+assert(code.match(/\.send\(\s*?body\s*?\)/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('sendMessage').onclick = function(){
+
+      const userName = document.getElementById('name').value;
+      const url = 'https://jsonplaceholder.typicode.com/posts';
+      // Add your code below this line
+
+
+      // Add your code above this line
+    };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Friends</h1>
+<p class="message box">
+  Reply from Server will be here
+</p>
+<p>
+  <label for="name">Your name:
+    <input type="text" id="name"/>
+  </label>
+  <button id="sendMessage">
+    Send Message
+  </button>
+</p>
+```
+
+# --solutions--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('sendMessage').onclick = function(){
+
+      const userName = document.getElementById('name').value;
+      const url = 'https://jsonplaceholder.typicode.com/posts';
+      // Add your code below this line
+      const xhr = new XMLHttpRequest();
+      xhr.open('POST', url, true);
+      xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
+      xhr.onreadystatechange = function () {
+        if (xhr.readyState === 4 && xhr.status === 201){
+          const serverResponse = JSON.parse(xhr.response);
+          document.getElementsByClassName('message')[0].textContent = serverResponse.userName + serverResponse.suffix;
+       }
+     };
+     const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
+     xhr.send(body);
+      // Add your code above this line
+    };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Friends</h1>
+<p class="message">
+  Reply from Server will be here
+</p>
+<p>
+  <label for="name">Your name:
+    <input type="text" id="name"/>
+  </label>
+  <button id="sendMessage">
+    Send Message
+  </button>
+</p>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md
new file mode 100644
index 00000000000..749e3e35896
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md
@@ -0,0 +1,171 @@
+---
+id: 587d7fae367417b2b2512be7
+title: Pre-filter JSON to Get the Data You Need
+challengeType: 6
+forumTopicId: 18257
+dashedName: pre-filter-json-to-get-the-data-you-need
+---
+
+# --description--
+
+If you don't want to render every cat photo you get from the freeCodeCamp Cat Photo API, you can pre-filter the JSON before looping through it.
+
+Given that the JSON data is stored in an array, you can use the `filter` method to filter out the cat whose `id` key has a value of `1`.
+
+Here's the code to do this:
+
+```js
+json = json.filter(function(val) {
+  return (val.id !== 1);
+});
+```
+
+# --instructions--
+
+Add code to `filter` the json data to remove the cat with the `id` value of `1`.
+
+# --hints--
+
+Your code should use the `filter` method.
+
+```js
+assert(code.match(/json\.filter/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
+      const req = new XMLHttpRequest();
+      req.open("GET",'/json/cats.json', true);
+      req.send();
+      req.onload=function(){
+        let json = JSON.parse(req.responseText);
+        let html = "";
+        // Add your code below this line
+
+
+        // Add your code above this line
+         json.forEach(function(val) {
+           html += "<div class = 'cat'>"
+
+           html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"
+
+           html += "</div>"
+         });
+         document.getElementsByClassName('message')[0].innerHTML = html;
+       };
+     };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Photo Finder</h1>
+<p class="message box">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
+
+# --solutions--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
+      const req = new XMLHttpRequest();
+      req.open("GET",'/json/cats.json', true);
+      req.send();
+      req.onload = function(){
+        let json = JSON.parse(req.responseText);
+        let html = "";
+        // Add your code below this line
+        json = json.filter(function(val) {
+          return (val.id !== 1);
+        });
+
+        // Add your code above this line
+         json.forEach(function(val) {
+           html += "<div class = 'cat'>"
+
+           html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"
+
+           html += "</div>"
+         });
+         document.getElementsByClassName('message')[0].innerHTML = html;
+       };
+     };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+
+<h1>Cat Photo Finder</h1>
+<p class="message">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
diff --git a/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md
new file mode 100644
index 00000000000..2091e71567d
--- /dev/null
+++ b/curriculum/challenges/arabic/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md
@@ -0,0 +1,163 @@
+---
+id: 587d7fae367417b2b2512be6
+title: Render Images from Data Sources
+challengeType: 6
+forumTopicId: 18265
+dashedName: render-images-from-data-sources
+---
+
+# --description--
+
+The last few challenges showed that each object in the JSON array contains an `imageLink` key with a value that is the URL of a cat's image.
+
+When you're looping through these objects, you can use this `imageLink` property to display this image in an `img` element.
+
+Here's the code that does this:
+
+```js
+html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
+```
+
+# --instructions--
+
+Add code to use the `imageLink` and `altText` properties in an `img` tag.
+
+# --hints--
+
+You should use the `imageLink` property to display the images.
+
+```js
+assert(code.match(/val\.imageLink/g));
+```
+
+You should use the `altText` for the `alt` attribute values of the images.
+
+```js
+assert(code.match(/val\.altText/g));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
+      const req=new XMLHttpRequest();
+      req.open("GET",'/json/cats.json',true);
+      req.send();
+      req.onload = function(){
+        const json = JSON.parse(req.responseText);
+        let html = "";
+        json.forEach(function(val) {
+          html += "<div class = 'cat'>";
+          // Add your code below this line
+
+
+          // Add your code above this line
+          html += "</div><br>";
+        });
+        document.getElementsByClassName('message')[0].innerHTML=html;
+      };
+     };
+  });
+</script>
+
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+<h1>Cat Photo Finder</h1>
+<p class="message box">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
+
+# --solutions--
+
+```html
+<script>
+  document.addEventListener('DOMContentLoaded', function(){
+    document.getElementById('getMessage').onclick = function(){
+      const req = new XMLHttpRequest();
+      req.open("GET",'/json/cats.json',true);
+      req.send();
+      req.onload = function(){
+        const json = JSON.parse(req.responseText);
+        let html = "";
+        json.forEach(function(val) {
+          html += "<div class = 'cat'>";
+          // Add your code below this line
+          html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";
+          // Add your code above this line
+          html += "</div><br>";
+        });
+        document.getElementsByClassName('message')[0].innerHTML = html;
+      };
+     };
+  });
+</script>
+<style>
+  body {
+    text-align: center;
+    font-family: "Helvetica", sans-serif;
+  }
+  h1 {
+    font-size: 2em;
+    font-weight: bold;
+  }
+  .box {
+    border-radius: 5px;
+    background-color: #eee;
+    padding: 20px 5px;
+  }
+  button {
+    color: white;
+    background-color: #4791d0;
+    border-radius: 5px;
+    border: 1px solid #4791d0;
+    padding: 5px 10px 8px 10px;
+  }
+  button:hover {
+    background-color: #0F5897;
+    border: 1px solid #0F5897;
+  }
+</style>
+<h1>Cat Photo Finder</h1>
+<p class="message">
+  The message will go here
+</p>
+<p>
+  <button id="getMessage">
+    Get Message
+  </button>
+</p>
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md
new file mode 100644
index 00000000000..b596eaef9cd
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/exercise-tracker.md
@@ -0,0 +1,621 @@
+---
+id: 5a8b073d06fa14fcfde687aa
+title: Exercise Tracker
+challengeType: 4
+forumTopicId: 301505
+dashedName: exercise-tracker
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://exercise-tracker.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://exercise-tracker.freecodecamp.rocks</a>. Working on this project will involve you writing your code using one of the following methods:
+
+-   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-exercisetracker/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
+-   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-exercisetracker" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --instructions--
+
+Your responses should have the following structures.
+
+Exercise:
+
+```js
+{
+  username: "fcc_test",
+  description: "test",
+  duration: 60,
+  date: "Mon Jan 01 1990",
+  _id: "5fb5853f734231456ccb3b05"
+}
+```
+
+User:
+
+```js
+{
+  username: "fcc_test",
+  _id: "5fb5853f734231456ccb3b05"
+}
+```
+
+Log:
+
+```js
+{
+  username: "fcc_test",
+  count: 1,
+  _id: "5fb5853f734231456ccb3b05",
+  log: [{
+    description: "test",
+    duration: 60,
+    date: "Mon Jan 01 1990",
+  }]
+}
+```
+
+**Hint:** For the `date` property, the `toDateString` method of the `Date` API can be used to achieve the expected output.
+
+# --hints--
+
+You should provide your own project, not the example URL.
+
+```js
+(getUserInput) => {
+  const url = getUserInput('url');
+  assert(
+    !/.*\/exercise-tracker\.freecodecamp\.rocks/.test(getUserInput('url'))
+  );
+};
+```
+
+You can `POST` to `/api/users` with form data `username` to create a new user.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/users', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
+  });
+  assert.isTrue(res.ok);
+  if(!res.ok) {
+    throw new Error(`${res.status} ${res.statusText}`)
+  };
+};
+```
+
+The returned response from `POST /api/users` with form data `username` will be an object with `username` and `_id` properties.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/users', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
+  });
+  if (res.ok) {
+    const { _id, username } = await res.json();
+    assert.exists(_id);
+    assert.exists(username);
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+You can make a `GET` request to `/api/users` to get a list of all users.
+
+```js
+async(getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/users');
+  assert.isTrue(res.ok);
+  if(!res.ok) {
+    throw new Error(`${res.status} ${res.statusText}`)
+  };
+};
+```
+
+The `GET` request to `/api/users` returns an array.
+
+```js
+async(getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/users');
+  if(res.ok){
+    const users = await res.json();
+    assert.isArray(users);
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  };
+};
+```
+
+Each element in the array returned from `GET /api/users` is an object literal containing a user's `username` and `_id`.
+
+```js
+async(getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/users');
+  if(res.ok){
+    const users = await res.json();
+    const user = users[0];
+    assert.exists(user);
+    assert.exists(user.username);
+    assert.exists(user._id);
+    assert.isString(user.username);
+    assert.isString(user._id);
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  };
+};
+```
+
+You can `POST` to `/api/users/:_id/exercises` with form data `description`, `duration`, and optionally `date`. If no date is supplied, the current date will be used.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/users', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
+  });
+  if (res.ok) {
+    const { _id, username } = await res.json();
+    const expected = {
+      username,
+      description: 'test',
+      duration: 60,
+      _id,
+      date: 'Mon Jan 01 1990'
+    };
+    const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01`
+    });
+  assert.isTrue(addRes.ok);
+  if(!addRes.ok) {
+    throw new Error(`${addRes.status} ${addRes.statusText}`)
+  };
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+The response returned from `POST /api/users/:_id/exercises` will be the user object with the exercise fields added.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/users', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
+  });
+  if (res.ok) {
+    const { _id, username } = await res.json();
+    const expected = {
+      username,
+      description: 'test',
+      duration: 60,
+      _id,
+      date: 'Mon Jan 01 1990'
+    };
+    const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01`
+    });
+    if (addRes.ok) {
+      const actual = await addRes.json();
+      assert.deepEqual(actual, expected);
+      assert.isString(actual.description);
+      assert.isNumber(actual.duration);
+      assert.isString(actual.date);
+    } else {
+      throw new Error(`${addRes.status} ${addRes.statusText}`);
+    }
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+You can make a `GET` request to `/api/users/:_id/logs` to retrieve a full exercise log of any user.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/users', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
+  });
+  if (res.ok) {
+    const { _id, username } = await res.json();
+    const expected = {
+      username,
+      description: 'test',
+      duration: 60,
+      _id,
+      date: new Date().toDateString()
+    };
+    const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: `description=${expected.description}&duration=${expected.duration}`
+    });
+    if (addRes.ok) {
+      const logRes = await fetch(url + `/api/users/${_id}/logs`);
+    assert.isTrue(logRes.ok);
+    if(!logRes.ok) {
+      throw new Error(`${logRes.status} ${logRes.statusText}`)
+    };
+    } else {
+      throw new Error(`${addRes.status} ${addRes.statusText}`);
+    }
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+A request to a user's log `GET /api/users/:_id/logs` returns a user object with a `count` property representing the number of exercises that belong to that user.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/users', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
+  });
+  if (res.ok) {
+    const { _id, username } = await res.json();
+    const expected = {
+      username,
+      description: 'test',
+      duration: 60,
+      _id,
+      date: new Date().toDateString()
+    };
+    const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: `description=${expected.description}&duration=${expected.duration}`
+    });
+    if (addRes.ok) {
+      const logRes = await fetch(url + `/api/users/${_id}/logs`);
+      if (logRes.ok) {
+        const { count } = await logRes.json();
+        assert(count);
+      } else {
+        throw new Error(`${logRes.status} ${logRes.statusText}`);
+      }
+    } else {
+      throw new Error(`${addRes.status} ${addRes.statusText}`);
+    }
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+A `GET` request to `/api/users/:_id/logs` will return the user object with a `log` array of all the exercises added.
+
+```js
+async(getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/users', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
+  })
+  if(res.ok){
+    const {_id, username} = await res.json();
+    const expected = {
+      username,
+      description: 'test',
+      duration: 60,
+      _id,
+      date: new Date().toDateString()
+    };
+    const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: `description=${expected.description}&duration=${expected.duration}`
+    });
+    if(addRes.ok){
+      const logRes = await fetch(url + `/api/users/${_id}/logs`);
+      if(logRes.ok) {
+        const {log} = await logRes.json();
+        assert.isArray(log);
+        assert.equal(1, log.length);
+      } else {
+        throw new Error(`${logRes.status} ${logRes.statusText}`);
+      }
+    } else {
+      throw new Error(`${addRes.status} ${addRes.statusText}`);
+    };
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`)
+  };
+};
+```
+
+Each item in the `log` array that is returned from `GET /api/users/:_id/logs` is an object that should have a `description`, `duration`, and `date` properties.
+
+```js
+async(getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + `/api/users`, {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded'
+    },
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
+  });
+  if(res.ok) {
+    const {_id, username} = await res.json();
+     const expected = {
+      username,
+      description: 'test',
+      duration: 60,
+      _id,
+      date: new Date().toDateString()
+    };
+    const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: `description=${expected.description}&duration=${expected.duration}`
+    });
+    if(addRes.ok) {
+      const logRes = await fetch(url + `/api/users/${_id}/logs`);
+      if(logRes.ok) {
+        const {log} = await logRes.json();
+        const exercise = log[0];
+        assert.exists(exercise);
+        assert.exists(exercise.description);
+        assert.exists(exercise.duration);
+        assert.exists(exercise.date);
+      } else {
+        throw new Error(`${logRes.status} ${logRes.statusText}`);
+      };
+    } else {
+      throw new Error(`${addRes.status} ${addRes.statusText}`);
+    };
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`)
+  };
+};
+```
+
+The `description` property of any object in the `log` array that is returned from `GET /api/users/:_id/logs` should be a string.
+
+```js
+async(getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/users/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
+  });
+  if(res.ok) {
+    const {_id, username} = await res.json();
+    const expected = {
+      username,
+      description: 'test',
+      duration: 60,
+      _id,
+      date: new Date().toDateString()
+    };
+    const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: `description=${expected.description}&duration=${expected.duration}`
+    });
+    if(addRes.ok) {
+      const logRes = await fetch(url + `/api/users/${_id}/logs`);
+      if(logRes.ok){
+        const {log} = await logRes.json();
+        const exercise = log[0];
+        assert.isString(exercise.description);
+        assert.equal(exercise.description, expected.description);
+      } else {
+        throw new Error(`${logRes.status} ${logRes.statusText}`);
+      }
+    } else {
+      throw new Error(`${addRes.status} ${addRes.statusText}`);
+    };
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  };
+};
+```
+
+The `duration` property of any object in the `log` array that is returned from `GET /api/users/:_id/logs` should be a number.
+
+```js
+async(getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/users/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
+  });
+  if(res.ok) {
+    const {_id, username} = await res.json();
+    const expected = {
+      username,
+      description: 'test',
+      duration: 60,
+      _id,
+      date: new Date().toDateString()
+    };
+    const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: `description=${expected.description}&duration=${expected.duration}`
+    });
+    if(addRes.ok) {
+      const logRes = await fetch(url + `/api/users/${_id}/logs`);
+      if(logRes.ok){
+        const {log} = await logRes.json();
+        const exercise = log[0];
+        assert.isNumber(exercise.duration);
+        assert.equal(exercise.duration, expected.duration);
+      } else {
+        throw new Error(`${logRes.status} ${logRes.statusText}`);
+      }
+    } else {
+      throw new Error(`${addRes.status} ${addRes.statusText}`);
+    };
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  };
+};
+```
+
+The `date` property of any object in the `log` array that is returned from `GET /api/users/:_id/logs` should be a string. Use the `dateString` format of the `Date` API.
+
+```js
+async(getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/users/', {
+    method: 'POST',
+    headers: {
+      'Content-Type': 'application/x-www-form-urlencoded',
+    },
+    body: `username=fcc_test_${Date.now()}`.substring(0,29)
+  });
+  if(res.ok) {
+    const {_id, username} = await res.json();
+    const expected = {
+      username,
+      description: 'test',
+      duration: 60,
+      _id,
+      date: new Date().toDateString()
+    };
+    const addRes = await fetch(url + `/api/users/${_id}/exercises`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/x-www-form-urlencoded',
+      },
+      body: `description=${expected.description}&duration=${expected.duration}`
+    });
+    if(addRes.ok) {
+      const logRes = await fetch(url + `/api/users/${_id}/logs`);
+      if(logRes.ok){
+        const {log} = await logRes.json();
+        const exercise = log[0];
+        assert.isString(exercise.date);
+        assert.equal(exercise.date, expected.date);
+      } else {
+        throw new Error(`${logRes.status} ${logRes.statusText}`);
+      }
+    } else {
+      throw new Error(`${addRes.status} ${addRes.statusText}`);
+    };
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  };
+};
+```
+
+You can add `from`, `to` and `limit` parameters to a `GET /api/users/:_id/logs` request to retrieve part of the log of any user. `from` and `to` are dates in `yyyy-mm-dd` format. `limit` is an integer of how many logs to send back.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/users', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: `username=fcc_test_${Date.now()}`.substring(0, 29)
+  });
+  if (res.ok) {
+    const { _id, username } = await res.json();
+    const expected = {
+      username,
+      description: 'test',
+      duration: 60,
+      _id,
+      date: new Date().toDateString()
+    };
+    const addExerciseRes = await fetch(url + `/api/users/${_id}/exercises`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-01`
+    });
+    const addExerciseTwoRes = await fetch(url + `/api/users/${_id}/exercises`, {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+      body: `description=${expected.description}&duration=${expected.duration}&date=1990-01-03`
+    });
+    if (addExerciseRes.ok && addExerciseTwoRes.ok) {
+      const logRes = await fetch(
+        url + `/api/users/${_id}/logs?from=1989-12-31&to=1990-01-04`
+      );
+      if (logRes.ok) {
+        const { log } = await logRes.json();
+        assert.isArray(log);
+        assert.equal(2, log.length);
+      } else {
+        throw new Error(`${logRes.status} ${logRes.statusText}`);
+      }
+      const limitRes = await fetch(
+        url + `/api/users/${_id}/logs?limit=1`
+      );
+      if (limitRes.ok) {
+        const { log } = await limitRes.json();
+        assert.isArray(log);
+        assert.equal(1, log.length);
+      } else {
+        throw new Error(`${limitRes.status} ${limitRes.statusText}`);
+      }
+      const filterDateBeforeLimitRes = await fetch(
+        url + `/api/users/${_id}/logs?from=1990-01-02&to=1990-01-04&limit=1`
+      );
+      if (filterDateBeforeLimitRes.ok) {
+        const { log } = await filterDateBeforeLimitRes.json();
+        assert.isArray(log);
+        assert.equal(1, log.length);
+      } else {
+        throw new Error(`${filterDateBeforeLimitRes.status} ${filterDateBeforeLimitRes.statusText}`);
+      }
+    } else {
+      throw new Error(`${res.status} ${res.statusText}`);
+    }
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions,
+  because they would need to be tested against a full working project.
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md
new file mode 100644
index 00000000000..72a58702744
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/file-metadata-microservice.md
@@ -0,0 +1,88 @@
+---
+id: bd7158d8c443edefaeb5bd0f
+title: File Metadata Microservice
+challengeType: 4
+forumTopicId: 301506
+dashedName: file-metadata-microservice
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://file-metadata-microservice.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://file-metadata-microservice.freecodecamp.rocks</a>. Working on this project will involve you writing your code using one of the following methods:
+
+-   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-filemetadata/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
+-   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-filemetadata" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --instructions--
+
+**HINT:** You can use the `multer` npm package to handle file uploading.
+
+# --hints--
+
+You should provide your own project, not the example URL.
+
+```js
+(getUserInput) => {
+  assert(
+    !/.*\/file-metadata-microservice\.freecodecamp\.rocks/.test(
+      getUserInput('url')
+    )
+  );
+};
+```
+
+You can submit a form that includes a file upload.
+
+```js
+async (getUserInput) => {
+  const site = await fetch(getUserInput('url'));
+  const data = await site.text();
+  const doc = new DOMParser().parseFromString(data, 'text/html');
+  assert(doc.querySelector('input[type="file"]'));
+};
+```
+
+The form file input field has the `name` attribute set to `upfile`.
+
+```js
+async (getUserInput) => {
+  const site = await fetch(getUserInput('url'));
+  const data = await site.text();
+  const doc = new DOMParser().parseFromString(data, 'text/html');
+  assert(doc.querySelector('input[name="upfile"]'));
+};
+```
+
+When you submit a file, you receive the file `name`, `type`, and `size` in bytes within the JSON response.
+
+```js
+async (getUserInput) => {
+  const formData = new FormData();
+  const fileData = await fetch(
+    'https://cdn.freecodecamp.org/weather-icons/01d.png'
+  );
+  const file = await fileData.blob();
+  formData.append('upfile', file, 'icon');
+  const data = await fetch(getUserInput('url') + '/api/fileanalyse', {
+    method: 'POST',
+    body: formData
+  });
+  const parsed = await data.json();
+  assert.property(parsed, 'size');
+  assert.equal(parsed.name, 'icon');
+  assert.equal(parsed.type, 'image/png');
+};
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md
new file mode 100644
index 00000000000..08d8e684c37
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/request-header-parser-microservice.md
@@ -0,0 +1,77 @@
+---
+id: bd7158d8c443edefaeb5bdff
+title: Request Header Parser Microservice
+challengeType: 4
+forumTopicId: 301507
+dashedName: request-header-parser-microservice
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://request-header-parser-microservice.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://request-header-parser-microservice.freecodecamp.rocks/</a>. Working on this project will involve you writing your code using one of the following methods:
+
+-   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-headerparser/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
+-   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-headerparser" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --hints--
+
+You should provide your own project, not the example URL.
+
+```js
+(getUserInput) => {
+  assert(
+    !/.*\/request-header-parser-microservice\.freecodecamp\.rocks/.test(
+      getUserInput('url')
+    )
+  );
+};
+```
+
+A request to `/api/whoami` should return a JSON object with your IP address in the `ipaddress` key.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/api/whoami').then(
+    (data) => assert(data.ipaddress && data.ipaddress.length > 0),
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+A request to `/api/whoami` should return a JSON object with your preferred language in the `language` key.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/api/whoami').then(
+    (data) => assert(data.language && data.language.length > 0),
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+A request to `/api/whoami` should return a JSON object with your software in the `software` key.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/api/whoami').then(
+    (data) => assert(data.software && data.software.length > 0),
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md
new file mode 100644
index 00000000000..78a70e1eb31
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice.md
@@ -0,0 +1,156 @@
+---
+id: bd7158d8c443edefaeb5bdef
+title: Timestamp Microservice
+challengeType: 4
+forumTopicId: 301508
+dashedName: timestamp-microservice
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://timestamp-microservice.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://timestamp-microservice.freecodecamp.rocks</a>. Working on this project will involve you writing your code using one of the following methods:
+
+-   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-timestamp/"  target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
+-   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-timestamp"  target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+**Note:** Time zones conversion is not a purpose of this project, so assume all sent valid dates will be parsed with `new Date()` as GMT dates.
+
+# --hints--
+
+You should provide your own project, not the example URL.
+
+```js
+(getUserInput) => {
+  assert(
+    !/.*\/timestamp-microservice\.freecodecamp\.rocks/.test(getUserInput('url'))
+  );
+};
+```
+
+A request to `/api/:date?` with a valid date should return a JSON object with a `unix` key that is a Unix timestamp of the input date in milliseconds (as type Number)
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/api/2016-12-25').then(
+    (data) => {
+      assert.equal(
+        data.unix,
+        1482624000000,
+        'Should be a valid unix timestamp'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+A request to `/api/:date?` with a valid date should return a JSON object with a `utc` key that is a string of the input date in the format: `Thu, 01 Jan 1970 00:00:00 GMT`
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/api/2016-12-25').then(
+    (data) => {
+      assert.equal(
+        data.utc,
+        'Sun, 25 Dec 2016 00:00:00 GMT',
+        'Should be a valid UTC date string'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+A request to `/api/1451001600000` should return `{ unix: 1451001600000, utc: "Fri, 25 Dec 2015 00:00:00 GMT" }`
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/api/1451001600000').then(
+    (data) => {
+      assert(
+        data.unix === 1451001600000 &&
+          data.utc === 'Fri, 25 Dec 2015 00:00:00 GMT'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+Your project can handle dates that can be successfully parsed by `new Date(date_string)`
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/api/05 October 2011, GMT').then(
+    (data) => {
+      assert(
+        data.unix === 1317772800000 &&
+          data.utc === 'Wed, 05 Oct 2011 00:00:00 GMT'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+If the input date string is invalid, the api returns an object having the structure `{ error : "Invalid Date" }`
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/api/this-is-not-a-date').then(
+    (data) => {
+      assert.equal(data.error.toLowerCase(), 'invalid date');
+    },
+    (xhr) => {
+      assert(xhr.responseJSON.error.toLowerCase() === 'invalid date');
+    }
+  );
+```
+
+An empty date parameter should return the current time in a JSON object with a `unix` key
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/api').then(
+    (data) => {
+      var now = Date.now();
+      assert.approximately(data.unix, now, 20000);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+An empty date parameter should return the current time in a JSON object with a `utc` key
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/api').then(
+    (data) => {
+      var now = Date.now();
+      var serverTime = new Date(data.utc).getTime();
+      assert.approximately(serverTime, now, 20000);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md
new file mode 100644
index 00000000000..64eb51f8e6f
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/back-end-development-and-apis-projects/url-shortener-microservice.md
@@ -0,0 +1,119 @@
+---
+id: bd7158d8c443edefaeb5bd0e
+title: URL Shortener Microservice
+challengeType: 4
+forumTopicId: 301509
+dashedName: url-shortener-microservice
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://url-shortener-microservice.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://url-shortener-microservice.freecodecamp.rocks</a>. Working on this project will involve you writing your code using one of the following methods:
+
+-   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-urlshortener/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
+-   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-urlshortener" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --instructions--
+
+**HINT:** Do not forget to use a body parsing middleware to handle the POST requests. Also, you can use the function `dns.lookup(host, cb)` from the `dns` core module to verify a submitted URL.
+
+# --hints--
+
+You should provide your own project, not the example URL.
+
+```js
+(getUserInput) => {
+  assert(
+    !/.*\/url-shortener-microservice\.freecodecamp\.rocks/.test(
+      getUserInput('url')
+    )
+  );
+};
+```
+
+You can POST a URL to `/api/shorturl` and get a JSON response with `original_url` and `short_url` properties. Here's an example: `{ original_url : 'https://freeCodeCamp.org', short_url : 1}`
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  const urlVariable = Date.now();
+  const fullUrl = `${url}/?v=${urlVariable}`
+  const res = await fetch(url + '/api/shorturl', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: `url=${fullUrl}`
+  });
+  if (res.ok) {
+    const { short_url, original_url } = await res.json();
+    assert.isNotNull(short_url);
+    assert.strictEqual(original_url, `${url}/?v=${urlVariable}`);
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+When you visit `/api/shorturl/<short_url>`, you will be redirected to the original URL.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  const urlVariable = Date.now();
+  const fullUrl = `${url}/?v=${urlVariable}`
+  let shortenedUrlVariable;
+  const postResponse = await fetch(url + '/api/shorturl', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: `url=${fullUrl}`
+  });
+  if (postResponse.ok) {
+    const { short_url } = await postResponse.json();
+    shortenedUrlVariable = short_url;
+  } else {
+    throw new Error(`${postResponse.status} ${postResponse.statusText}`);
+  }
+  const getResponse = await fetch(
+    url + '/api/shorturl/' + shortenedUrlVariable
+  );
+  if (getResponse) {
+    const { redirected, url } = getResponse;
+    assert.isTrue(redirected);
+    assert.strictEqual(url,fullUrl);
+  } else {
+    throw new Error(`${getResponse.status} ${getResponse.statusText}`);
+  }
+};
+```
+
+If you pass an invalid URL that doesn't follow the valid `http://www.example.com` format, the JSON response will contain `{ error: 'invalid url' }`
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/shorturl', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+    body: `url=ftp:/john-doe.invalidTLD`
+  });
+  if (res.ok) {
+    const { error } = await res.json();
+    assert.isNotNull(error);
+    assert.strictEqual(error.toLowerCase(), 'invalid url');
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md
new file mode 100644
index 00000000000..9d9fa53b85d
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/chain-middleware-to-create-a-time-server.md
@@ -0,0 +1,79 @@
+---
+id: 587d7fb1367417b2b2512bf4
+title: Chain Middleware to Create a Time Server
+challengeType: 2
+forumTopicId: 301510
+dashedName: chain-middleware-to-create-a-time-server
+---
+
+# --description--
+
+Middleware can be mounted at a specific route using `app.METHOD(path, middlewareFunction)`. Middleware can also be chained within a route definition.
+
+Look at the following example:
+
+```js
+app.get('/user', function(req, res, next) {
+  req.user = getTheUserSync();  // Hypothetical synchronous operation
+  next();
+}, function(req, res) {
+  res.send(req.user);
+});
+```
+
+This approach is useful to split the server operations into smaller units. That leads to a better app structure, and the possibility to reuse code in different places. This approach can also be used to perform some validation on the data. At each point of the middleware stack you can block the execution of the current chain and pass control to functions specifically designed to handle errors. Or you can pass control to the next matching route, to handle special cases. We will see how in the advanced Express section.
+
+# --instructions--
+
+In the route `app.get('/now', ...)` chain a middleware function and the final handler. In the middleware function you should add the current time to the request object in the `req.time` key. You can use `new Date().toString()`. In the handler, respond with a JSON object, taking the structure `{time: req.time}`.
+
+**Note:** The test will not pass if you don’t chain the middleware. If you mount the function somewhere else, the test will fail, even if the output result is correct.
+
+# --hints--
+
+The /now endpoint should have mounted middleware
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/chain-middleware-time').then(
+    (data) => {
+      assert.equal(
+        data.stackLength,
+        2,
+        '"/now" route has no mounted middleware'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+The `/now` endpoint should return the current time.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/chain-middleware-time').then(
+    (data) => {
+      var now = new Date();
+      assert.isAtMost(
+        Math.abs(new Date(data.time) - now),
+        20000,
+        'the returned time is not between +- 20 secs from now'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/get-data-from-post-requests.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/get-data-from-post-requests.md
new file mode 100644
index 00000000000..8398c13973f
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/get-data-from-post-requests.md
@@ -0,0 +1,78 @@
+---
+id: 587d7fb2367417b2b2512bf8
+title: Get Data from POST Requests
+challengeType: 2
+forumTopicId: 301511
+dashedName: get-data-from-post-requests
+---
+
+# --description--
+
+Mount a POST handler at the path `/name`. It’s the same path as before. We have prepared a form in the html frontpage. It will submit the same data of exercise 10 (Query string). If the body-parser is configured correctly, you should find the parameters in the object `req.body`. Have a look at the usual library example:
+
+<blockquote>route: POST '/library'<br>urlencoded_body: userId=546&#x26;bookId=6754 <br>req.body: {userId: '546', bookId: '6754'}</blockquote>
+
+Respond with the same JSON object as before: `{name: 'firstname lastname'}`. Test if your endpoint works using the html form we provided in the app frontpage.
+
+Tip: There are several other http methods other than GET and POST. And by convention there is a correspondence between the http verb, and the operation you are going to execute on the server. The conventional mapping is:
+
+POST (sometimes PUT) - Create a new resource using the information sent with the request,
+
+GET - Read an existing resource without modifying it,
+
+PUT or PATCH (sometimes POST) - Update a resource using the data sent,
+
+DELETE => Delete a resource.
+
+There are also a couple of other methods which are used to negotiate a connection with the server. Except from GET, all the other methods listed above can have a payload (i.e. the data into the request body). The body-parser middleware works with these methods as well.
+
+# --hints--
+
+Test 1 : Your API endpoint should respond with the correct name
+
+```js
+(getUserInput) =>
+  $.post(getUserInput('url') + '/name', { first: 'Mick', last: 'Jagger' }).then(
+    (data) => {
+      assert.equal(
+        data.name,
+        'Mick Jagger',
+        'Test 1: "POST /name" route does not behave as expected'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+Test 2 : Your API endpoint should respond with the correct name
+
+```js
+(getUserInput) =>
+  $.post(getUserInput('url') + '/name', {
+    first: 'Keith',
+    last: 'Richards'
+  }).then(
+    (data) => {
+      assert.equal(
+        data.name,
+        'Keith Richards',
+        'Test 2: "POST /name" route does not behave as expected'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/get-query-parameter-input-from-the-client.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/get-query-parameter-input-from-the-client.md
new file mode 100644
index 00000000000..0d301a9f5e3
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/get-query-parameter-input-from-the-client.md
@@ -0,0 +1,67 @@
+---
+id: 587d7fb2367417b2b2512bf6
+title: Get Query Parameter Input from the Client
+challengeType: 2
+forumTopicId: 301512
+dashedName: get-query-parameter-input-from-the-client
+---
+
+# --description--
+
+Another common way to get input from the client is by encoding the data after the route path, using a query string. The query string is delimited by a question mark (?), and includes field=value couples. Each couple is separated by an ampersand (&). Express can parse the data from the query string, and populate the object `req.query`. Some characters, like the percent (%), cannot be in URLs and have to be encoded in a different format before you can send them. If you use the API from JavaScript, you can use specific methods to encode/decode these characters.
+
+<blockquote>route_path: '/library'<br>actual_request_URL: '/library?userId=546&#x26;bookId=6754' <br>req.query: {userId: '546', bookId: '6754'}</blockquote>
+
+# --instructions--
+
+Build an API endpoint, mounted at `GET /name`. Respond with a JSON document, taking the structure `{ name: 'firstname lastname'}`. The first and last name parameters should be encoded in a query string e.g. `?first=firstname&last=lastname`.
+
+**Note:** In the following exercise you are going to receive data from a POST request, at the same `/name` route path. If you want, you can use the method `app.route(path).get(handler).post(handler)`. This syntax allows you to chain different verb handlers on the same path route. You can save a bit of typing, and have cleaner code.
+
+# --hints--
+
+Test 1 : Your API endpoint should respond with the correct name
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/name?first=Mick&last=Jagger').then(
+    (data) => {
+      assert.equal(
+        data.name,
+        'Mick Jagger',
+        'Test 1: "GET /name" route does not behave as expected'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+Test 2 : Your API endpoint should respond with the correct name
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/name?last=Richards&first=Keith').then(
+    (data) => {
+      assert.equal(
+        data.name,
+        'Keith Richards',
+        'Test 2: "GET /name" route does not behave as expected'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/get-route-parameter-input-from-the-client.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/get-route-parameter-input-from-the-client.md
new file mode 100644
index 00000000000..b0055f569ea
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/get-route-parameter-input-from-the-client.md
@@ -0,0 +1,65 @@
+---
+id: 587d7fb2367417b2b2512bf5
+title: Get Route Parameter Input from the Client
+challengeType: 2
+forumTopicId: 301513
+dashedName: get-route-parameter-input-from-the-client
+---
+
+# --description--
+
+When building an API, we have to allow users to communicate to us what they want to get from our service. For example, if the client is requesting information about a user stored in the database, they need a way to let us know which user they're interested in. One possible way to achieve this result is by using route parameters. Route parameters are named segments of the URL, delimited by slashes (/). Each segment captures the value of the part of the URL which matches its position. The captured values can be found in the `req.params` object.
+
+<blockquote>route_path: '/user/:userId/book/:bookId'<br>actual_request_URL: '/user/546/book/6754' <br>req.params: {userId: '546', bookId: '6754'}</blockquote>
+
+# --instructions--
+
+Build an echo server, mounted at the route `GET /:word/echo`. Respond with a JSON object, taking the structure `{echo: word}`. You can find the word to be repeated at `req.params.word`. You can test your route from your browser's address bar, visiting some matching routes, e.g. `your-app-rootpath/freecodecamp/echo`.
+
+# --hints--
+
+Test 1 : Your echo server should repeat words correctly
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/eChOtEsT/echo').then(
+    (data) => {
+      assert.equal(
+        data.echo,
+        'eChOtEsT',
+        'Test 1: the echo server is not working as expected'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+Test 2 : Your echo server should repeat words correctly
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/ech0-t3st/echo').then(
+    (data) => {
+      assert.equal(
+        data.echo,
+        'ech0-t3st',
+        'Test 2: the echo server is not working as expected'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/implement-a-root-level-request-logger-middleware.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/implement-a-root-level-request-logger-middleware.md
new file mode 100644
index 00000000000..2a2faa35c39
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/implement-a-root-level-request-logger-middleware.md
@@ -0,0 +1,57 @@
+---
+id: 587d7fb1367417b2b2512bf3
+title: Implement a Root-Level Request Logger Middleware
+challengeType: 2
+forumTopicId: 301514
+dashedName: implement-a-root-level-request-logger-middleware
+---
+
+# --description--
+
+Earlier, you were introduced to the `express.static()` middleware function. Now it’s time to see what middleware is, in more detail. Middleware functions are functions that take 3 arguments: the request object, the response object, and the next function in the application’s request-response cycle. These functions execute some code that can have side effects on the app, and usually add information to the request or response objects. They can also end the cycle by sending a response when some condition is met. If they don’t send the response when they are done, they start the execution of the next function in the stack. This triggers calling the 3rd argument, `next()`.
+
+Look at the following example:
+
+```js
+function(req, res, next) {
+  console.log("I'm a middleware...");
+  next();
+}
+```
+
+Let’s suppose you mounted this function on a route. When a request matches the route, it displays the string “I’m a middleware…”, then it executes the next function in the stack. In this exercise, you are going to build root-level middleware. As you have seen in challenge 4, to mount a middleware function at root level, you can use the `app.use(<mware-function>)` method. In this case, the function will be executed for all the requests, but you can also set more specific conditions. For example, if you want a function to be executed only for POST requests, you could use `app.post(<mware-function>)`. Analogous methods exist for all the HTTP verbs (GET, DELETE, PUT, …).
+
+# --instructions--
+
+Build a simple logger. For every request, it should log to the console a string taking the following format: `method path - ip`. An example would look like this: `GET /json - ::ffff:127.0.0.1`. Note that there is a space between `method` and `path` and that the dash separating `path` and `ip` is surrounded by a space on both sides. You can get the request method (http verb), the relative route path, and the caller’s ip from the request object using `req.method`, `req.path` and `req.ip`. Remember to call `next()` when you are done, or your server will be stuck forever. Be sure to have the ‘Logs’ opened, and see what happens when some request arrives.
+
+**Note:** Express evaluates functions in the order they appear in the code. This is true for middleware too. If you want it to work for all the routes, it should be mounted before them.
+
+# --hints--
+
+Root level logger middleware should be active
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/root-middleware-logger').then(
+    (data) => {
+      assert.isTrue(
+        data.passed,
+        'root-level logger is not working as expected'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md
new file mode 100644
index 00000000000..9f32d837b79
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/meet-the-node-console.md
@@ -0,0 +1,53 @@
+---
+id: 587d7fb0367417b2b2512bed
+title: Meet the Node console
+challengeType: 2
+forumTopicId: 301515
+dashedName: meet-the-node-console
+---
+
+# --description--
+
+Working on these challenges will involve you writing your code using one of the following methods:
+
+- Clone <a href="https://github.com/freeCodeCamp/boilerplate-express/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete these challenges locally.
+- Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-express" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete these challenges.
+- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
+
+During the development process, it is important to be able to check what’s going on in your code.
+
+Node is just a JavaScript environment. Like client side JavaScript, you can use the console to display useful debug information. On your local machine, you would see console output in a terminal. On Replit, a terminal is open in the right pane by default.
+
+We recommend to keep the terminal open while working at these challenges. By reading the output in the terminal, you can see any errors that may occur.
+
+# --instructions--
+
+Modify the `myApp.js` file to log "Hello World" to the console.
+
+# --hints--
+
+`"Hello World"` should be in the console
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/hello-console').then(
+    (data) => {
+      assert.isTrue(data.passed, '"Hello World" is not in the server console');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-an-html-file.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-an-html-file.md
new file mode 100644
index 00000000000..1d618673227
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-an-html-file.md
@@ -0,0 +1,51 @@
+---
+id: 587d7fb0367417b2b2512bef
+title: Serve an HTML File
+challengeType: 2
+forumTopicId: 301516
+dashedName: serve-an-html-file
+---
+
+# --description--
+
+You can respond to requests with a file using the `res.sendFile(path)` method. You can put it inside the `app.get('/', ...)` route handler. Behind the scenes, this method will set the appropriate headers to instruct your browser on how to handle the file you want to send, according to its type. Then it will read and send the file. This method needs an absolute file path. We recommend you to use the Node global variable `__dirname` to calculate the path like this:
+
+```js
+absolutePath = __dirname + relativePath/file.ext
+```
+
+# --instructions--
+
+Send the `/views/index.html` file as a response to GET requests to the `/` path. If you view your live app, you should see a big HTML heading (and a form that we will use later…), with no style applied.
+
+**Note:** You can edit the solution of the previous challenge or create a new one. If you create a new solution, keep in mind that Express evaluates routes from top to bottom, and executes the handler for the first match. You have to comment out the preceding solution, or the server will keep responding with a string.
+
+# --hints--
+
+Your app should serve the file views/index.html
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url')).then(
+    (data) => {
+      assert.match(
+        data,
+        /<h1>.*<\/h1>/,
+        'Your app does not serve the expected HTML'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md
new file mode 100644
index 00000000000..1e977061c7c
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-json-on-a-specific-route.md
@@ -0,0 +1,47 @@
+---
+id: 587d7fb1367417b2b2512bf1
+title: Serve JSON on a Specific Route
+challengeType: 2
+forumTopicId: 301517
+dashedName: serve-json-on-a-specific-route
+---
+
+# --description--
+
+While an HTML server serves HTML, an API serves data. A <dfn>REST</dfn> (REpresentational State Transfer) API allows data exchange in a simple way, without the need for clients to know any detail about the server. The client only needs to know where the resource is (the URL), and the action it wants to perform on it (the verb). The GET verb is used when you are fetching some information, without modifying anything. These days, the preferred data format for moving information around the web is JSON. Simply put, JSON is a convenient way to represent a JavaScript object as a string, so it can be easily transmitted.
+
+Let's create a simple API by creating a route that responds with JSON at the path `/json`. You can do it as usual, with the `app.get()` method. Inside the route handler, use the method `res.json()`, passing in an object as an argument. This method closes the request-response loop, returning the data. Behind the scenes, it converts a valid JavaScript object into a string, then sets the appropriate headers to tell your browser that you are serving JSON, and sends the data back. A valid object has the usual structure `{key: data}`. `data` can be a number, a string, a nested object or an array. `data` can also be a variable or the result of a function call, in which case it will be evaluated before being converted into a string.
+
+# --instructions--
+
+Serve the object `{"message": "Hello json"}` as a response, in JSON format, to GET requests to the `/json` route. Then point your browser to `your-app-url/json`, you should see the message on the screen.
+
+# --hints--
+
+The endpoint `/json` should serve the json object `{"message": "Hello json"}`
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/json').then(
+    (data) => {
+      assert.equal(
+        data.message,
+        'Hello json',
+        "The '/json' endpoint does not serve the right data"
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-static-assets.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-static-assets.md
new file mode 100644
index 00000000000..f3e2796c54e
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/serve-static-assets.md
@@ -0,0 +1,51 @@
+---
+id: 587d7fb0367417b2b2512bf0
+title: Serve Static Assets
+challengeType: 2
+forumTopicId: 301518
+dashedName: serve-static-assets
+---
+
+# --description--
+
+An HTML server usually has one or more directories that are accessible by the user. You can place there the static assets needed by your application (stylesheets, scripts, images).
+
+In Express, you can put in place this functionality using the middleware `express.static(path)`, where the `path` parameter is the absolute path of the folder containing the assets.
+
+If you don’t know what middleware is... don’t worry, we will discuss in detail later. Basically, middleware are functions that intercept route handlers, adding some kind of information. A middleware needs to be mounted using the method `app.use(path, middlewareFunction)`. The first `path` argument is optional. If you don’t pass it, the middleware will be executed for all requests.
+
+# --instructions--
+
+Mount the `express.static()` middleware to the path `/public` with `app.use()`. The absolute path to the assets folder is `__dirname + /public`.
+
+Now your app should be able to serve a CSS stylesheet. Note that the `/public/style.css` file is referenced in the `/views/index.html` in the project boilerplate. Your front-page should look a little better now!
+
+# --hints--
+
+Your app should serve asset files from the `/public` directory to the `/public` path
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/public/style.css').then(
+    (data) => {
+      assert.match(
+        data,
+        /body\s*\{[^\}]*\}/,
+        'Your app does not serve static assets'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/start-a-working-express-server.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/start-a-working-express-server.md
new file mode 100644
index 00000000000..e8e3e82fc5a
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/start-a-working-express-server.md
@@ -0,0 +1,57 @@
+---
+id: 587d7fb0367417b2b2512bee
+title: Start a Working Express Server
+challengeType: 2
+forumTopicId: 301519
+dashedName: start-a-working-express-server
+---
+
+# --description--
+
+In the first two lines of the file `myApp.js`, you can see how easy it is to create an Express app object. This object has several methods, and you will learn many of them in these challenges. One fundamental method is `app.listen(port)`. It tells your server to listen on a given port, putting it in running state. For testing reasons, we need the app to be running in the background so we added this method in the `server.js` file for you.
+
+Let’s serve our first string! In Express, routes takes the following structure: `app.METHOD(PATH, HANDLER)`. METHOD is an http method in lowercase. PATH is a relative path on the server (it can be a string, or even a regular expression). HANDLER is a function that Express calls when the route is matched. Handlers take the form `function(req, res) {...}`, where req is the request object, and res is the response object. For example, the handler
+
+```js
+function(req, res) {
+  res.send('Response String');
+}
+```
+
+will serve the string 'Response String'.
+
+# --instructions--
+
+Use the `app.get()` method to serve the string "Hello Express" to GET requests matching the `/` (root) path. Be sure that your code works by looking at the logs, then see the results in the preview if you are using Replit.
+
+**Note:** All the code for these lessons should be added in between the few lines of code we have started you off with.
+
+# --hints--
+
+Your app should serve the string 'Hello Express'
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url')).then(
+    (data) => {
+      assert.equal(
+        data,
+        'Hello Express',
+        'Your app does not serve the text "Hello Express"'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md
new file mode 100644
index 00000000000..f3eb31ef9eb
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/use-body-parser-to-parse-post-requests.md
@@ -0,0 +1,63 @@
+---
+id: 587d7fb2367417b2b2512bf7
+title: Use body-parser to Parse POST Requests
+challengeType: 2
+forumTopicId: 301520
+dashedName: use-body-parser-to-parse-post-requests
+---
+
+# --description--
+
+Besides GET, there is another common HTTP verb, it is POST. POST is the default method used to send client data with HTML forms. In REST convention, POST is used to send data to create new items in the database (a new user, or a new blog post). You don’t have a database in this project, but you are going to learn how to handle POST requests anyway.
+
+In these kind of requests, the data doesn’t appear in the URL, it is hidden in the request body. The body is a part of the HTTP request, also called the payload. Even though the data is not visible in the URL, this does not mean that it is private. To see why, look at the raw content of an HTTP POST request:
+
+```http
+POST /path/subpath HTTP/1.0
+From: john@example.com
+User-Agent: someBrowser/1.0
+Content-Type: application/x-www-form-urlencoded
+Content-Length: 20
+
+name=John+Doe&age=25
+```
+
+As you can see, the body is encoded like the query string. This is the default format used by HTML forms. With Ajax, you can also use JSON to handle data having a more complex structure. There is also another type of encoding: multipart/form-data. This one is used to upload binary files. In this exercise, you will use a URL encoded body. To parse the data coming from POST requests, you must use the `body-parser` package. This package allows you to use a series of middleware, which can decode data in different formats.
+
+# --instructions--
+
+`body-parser` has already been installed and is in your project's `package.json` file. `require` it at the top of the `myApp.js` file and store it in a variable named `bodyParser`. The middleware to handle URL encoded data is returned by `bodyParser.urlencoded({extended: false})`. Pass the function returned by the previous method call to `app.use()`. As usual, the middleware must be mounted before all the routes that depend on it.
+
+**Note:** `extended` is a configuration option that tells `body-parser` which parsing needs to be used. When `extended=false` it uses the classic encoding `querystring` library. When `extended=true` it uses `qs` library for parsing.
+
+When using `extended=false`, values can be only strings or arrays. The object returned when using `querystring` does not prototypically inherit from the default JavaScript `Object`, which means functions like `hasOwnProperty`, `toString` will not be available. The extended version allows more data flexibility, but it is outmatched by JSON.
+
+# --hints--
+
+The 'body-parser' middleware should be mounted
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/add-body-parser').then(
+    (data) => {
+      assert.isAbove(
+        data.mountedAt,
+        0,
+        '"body-parser" is not mounted correctly'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md
new file mode 100644
index 00000000000..80708e3fdb9
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/basic-node-and-express/use-the-.env-file.md
@@ -0,0 +1,54 @@
+---
+id: 587d7fb1367417b2b2512bf2
+title: Use the .env File
+challengeType: 2
+forumTopicId: 301521
+dashedName: use-the--env-file
+---
+
+# --description--
+
+The `.env` file is a hidden file that is used to pass environment variables to your application. This file is secret, no one but you can access it, and it can be used to store data that you want to keep private or hidden. For example, you can store API keys from external services or your database URI. You can also use it to store configuration options. By setting configuration options, you can change the behavior of your application, without the need to rewrite some code.
+
+The environment variables are accessible from the app as `process.env.VAR_NAME`. The `process.env` object is a global Node object, and variables are passed as strings. By convention, the variable names are all uppercase, with words separated by an underscore. The `.env` is a shell file, so you don’t need to wrap names or values in quotes. It is also important to note that there cannot be space around the equals sign when you are assigning values to your variables, e.g. `VAR_NAME=value`. Usually, you will put each variable definition on a separate line.
+
+# --instructions--
+
+Let's add an environment variable as a configuration option.
+
+Create a `.env` file in the root of your project directory, and store the variable `MESSAGE_STYLE=uppercase` in it.
+
+Then, in the `/json` GET route handler you created in the last challenge access `process.env.MESSAGE_STYLE` and transform the response object's `message` to uppercase if the variable equals `uppercase`. The response object should either be `{"message": "Hello json"}` or `{"message": "HELLO JSON"}`, depending on the `MESSAGE_STYLE` value.
+
+**Note:** If you are using Replit, you cannot create a `.env` file. Instead, use the built-in <dfn>SECRETS</dfn> tab to add the variable.
+
+If you are working locally, you will need the `dotenv` package. It loads environment variables from your `.env` file into `process.env`. The `dotenv` package has already been installed, and is in your project's `package.json` file. At the top of your `myApp.js` file, import and load the variables with `require('dotenv').config()`.
+
+# --hints--
+
+The response of the endpoint `/json` should change according to the environment variable `MESSAGE_STYLE`
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/use-env-vars').then(
+    (data) => {
+      assert.isTrue(
+        data.passed,
+        'The response of "/json" does not change according to MESSAGE_STYLE'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-a-description-to-your-package.json.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-a-description-to-your-package.json.md
new file mode 100644
index 00000000000..d4f4da4d681
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-a-description-to-your-package.json.md
@@ -0,0 +1,52 @@
+---
+id: 587d7fb3367417b2b2512bfc
+title: Add a Description to Your package.json
+challengeType: 2
+forumTopicId: 301522
+dashedName: add-a-description-to-your-package-json
+---
+
+# --description--
+
+The next part of a good package.json file is the `description` field; where a short, but informative description about your project belongs.
+
+If you some day plan to publish a package to npm, this is the string that should sell your idea to the user when they decide whether to install your package or not. However, that’s not the only use case for the description, it’s a great way to summarize what a project does. It’s just as important in any Node.js project to help other developers, future maintainers or even your future self understand the project quickly.
+
+Regardless of what you plan for your project, a description is definitely recommended. Here's an example:
+
+```json
+"description": "A project that does something awesome",
+```
+
+# --instructions--
+
+Add a `description` to the package.json file of your project.
+
+**Note:** Remember to use double-quotes for field-names (") and commas (,) to separate fields.
+
+# --hints--
+
+package.json should have a valid "description" key
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert(packJson.description, '"description" is missing');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-a-license-to-your-package.json.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-a-license-to-your-package.json.md
new file mode 100644
index 00000000000..d97b0134019
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-a-license-to-your-package.json.md
@@ -0,0 +1,48 @@
+---
+id: 587d7fb4367417b2b2512bfe
+title: Add a License to Your package.json
+challengeType: 2
+forumTopicId: 301523
+dashedName: add-a-license-to-your-package-json
+---
+
+# --description--
+
+The `license` field is where you inform users of what they are allowed to do with your project.
+
+Some common licenses for open source projects include MIT and BSD. License information is not required, and copyright laws in most countries will give you ownership of what you create by default. However, it’s always a good practice to explicitly state what users can and can’t do. Here's an example of the license field:
+
+```json
+"license": "MIT",
+```
+
+# --instructions--
+
+Fill the `license` field in the package.json file of your project as you find suitable.
+
+# --hints--
+
+package.json should have a valid "license" key
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert(packJson.license, '"license" is missing');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-a-version-to-your-package.json.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-a-version-to-your-package.json.md
new file mode 100644
index 00000000000..a5b3b8b2453
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-a-version-to-your-package.json.md
@@ -0,0 +1,46 @@
+---
+id: 587d7fb4367417b2b2512bff
+title: Add a Version to Your package.json
+challengeType: 2
+forumTopicId: 301525
+dashedName: add-a-version-to-your-package-json
+---
+
+# --description--
+
+A `version` is one of the required fields of your package.json file. This field describes the current version of your project. Here's an example:
+
+```json
+"version": "1.2.0",
+```
+
+# --instructions--
+
+Add a `version` to the package.json file of your project.
+
+# --hints--
+
+package.json should have a valid "version" key
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert(packJson.version, '"version" is missing');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-keywords-to-your-package.json.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-keywords-to-your-package.json.md
new file mode 100644
index 00000000000..33c9742e8bc
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/add-keywords-to-your-package.json.md
@@ -0,0 +1,84 @@
+---
+id: 587d7fb4367417b2b2512bfd
+title: Add Keywords to Your package.json
+challengeType: 2
+forumTopicId: 301526
+dashedName: add-keywords-to-your-package-json
+---
+
+# --description--
+
+The `keywords` field is where you can describe your project using related keywords. Here's an example:
+
+```json
+"keywords": [ "descriptive", "related", "words" ],
+```
+
+As you can see, this field is structured as an array of double-quoted strings.
+
+# --instructions--
+
+Add an array of suitable strings to the `keywords` field in the package.json file of your project.
+
+One of the keywords should be "freecodecamp".
+
+# --hints--
+
+package.json should have a valid "keywords" key
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert(packJson.keywords, '"keywords" is missing');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+"keywords" field should be an Array
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.isArray(packJson.keywords, '"keywords" is not an array');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+"keywords" should include "freecodecamp"
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.include(
+        packJson.keywords,
+        'freecodecamp',
+        '"keywords" does not include "freecodecamp"'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md
new file mode 100644
index 00000000000..fa9056e0992
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/expand-your-project-with-external-packages-from-npm.md
@@ -0,0 +1,77 @@
+---
+id: 587d7fb4367417b2b2512c00
+title: Expand Your Project with External Packages from npm
+challengeType: 2
+forumTopicId: 301527
+dashedName: expand-your-project-with-external-packages-from-npm
+---
+
+# --description--
+
+One of the biggest reasons to use a package manager, is their powerful dependency management. Instead of manually having to make sure that you get all dependencies whenever you set up a project on a new computer, npm automatically installs everything for you. But how can npm know exactly what your project needs? Meet the `dependencies` section of your package.json file.
+
+In this section, packages your project requires are stored using the following format:
+
+```json
+"dependencies": {
+  "package-name": "version",
+  "express": "4.14.0"
+}
+
+```
+
+# --instructions--
+
+Add version "1.1.0" of the `@freecodecamp/example` package to the `dependencies` field of your `package.json` file.
+
+**Note:** `@freecodecamp/example` is a faux package used as a learning tool.
+
+# --hints--
+
+`"dependencies"` should include `"@freecodecamp/example"`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(
+        packJson.dependencies,
+        '@freecodecamp/example',
+        '"dependencies" does not include "@freecodecamp/example"'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+`"@freecodecamp/example"` version should be `"1.1.0"`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.match(
+        packJson.dependencies["@freecodecamp/example"],
+        /^[\^\~]?1\.1\.0/,
+        'Wrong version of "@freecodecamp/example" installed. It should be 1.1.0'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md
new file mode 100644
index 00000000000..8d9100376d5
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/how-to-use-package.json-the-core-of-any-node.js-project-or-npm-package.md
@@ -0,0 +1,60 @@
+---
+id: 587d7fb3367417b2b2512bfb
+title: 'How to Use package.json, the Core of Any Node.js Project or npm Package'
+challengeType: 2
+forumTopicId: 301528
+dashedName: how-to-use-package-json-the-core-of-any-node-js-project-or-npm-package
+---
+
+# --description--
+
+Working on these challenges will involve you writing your code using one of the following methods:
+
+- Clone <a href="https://github.com/freeCodeCamp/boilerplate-npm/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete these challenges locally.
+- Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-npm" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete these challenges.
+- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
+
+The `package.json` file is the center of any Node.js project or npm package. It stores information about your project, similar to how the &lt;head> section of an HTML document describes the content of a webpage. It consists of a single JSON object where information is stored in key-value pairs. There are only two required fields; "name" and "version", but it’s good practice to provide additional information about your project that could be useful to future users or maintainers.
+
+If you look at the file tree of your project, you will find the package.json file on the top level of the tree. This is the file that you will be improving in the next couple of challenges.
+
+One of the most common pieces of information in this file is the `author` field. It specifies who created the project, and can consist of a string or an object with contact or other details. An object is recommended for bigger projects, but a simple string like the following example will do for this project.
+
+```json
+"author": "Jane Doe",
+```
+
+# --instructions--
+
+Add your name as the `author` of the project in the package.json file.
+
+**Note:** Remember that you’re writing JSON, so all field names must use double-quotes (") and be separated with a comma (,).
+
+# --hints--
+
+package.json should have a valid "author" key
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert(packJson.author, '"author" is missing');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md
new file mode 100644
index 00000000000..fa43e78268a
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/manage-npm-dependencies-by-understanding-semantic-versioning.md
@@ -0,0 +1,73 @@
+---
+id: 587d7fb5367417b2b2512c01
+title: Manage npm Dependencies By Understanding Semantic Versioning
+challengeType: 2
+forumTopicId: 301529
+dashedName: manage-npm-dependencies-by-understanding-semantic-versioning
+---
+
+# --description--
+
+`Versions` of the npm packages in the dependencies section of your package.json file follow what’s called Semantic Versioning (SemVer), an industry standard for software versioning aiming to make it easier to manage dependencies. Libraries, frameworks or other tools published on npm should use SemVer in order to clearly communicate what kind of changes projects can expect if they update.
+
+Knowing SemVer can be useful when you develop software that uses external dependencies (which you almost always do). One day, your understanding of these numbers will save you from accidentally introducing breaking changes to your project without understanding why things that worked yesterday suddenly don’t work today. This is how Semantic Versioning works according to the official website:
+
+```json
+"package": "MAJOR.MINOR.PATCH"
+```
+
+The MAJOR version should increment when you make incompatible API changes. The MINOR version should increment when you add functionality in a backwards-compatible manner. The PATCH version should increment when you make backwards-compatible bug fixes. This means that PATCHes are bug fixes and MINORs add new features but neither of them break what worked before. Finally, MAJORs add changes that won’t work with earlier versions.
+
+# --instructions--
+
+In the dependencies section of your `package.json` file, change the version of `@freecodecamp/example` to match MAJOR version 1, MINOR version 2 and PATCH version 13
+
+# --hints--
+
+`"dependencies"` should include `"@freecodecamp/example"`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(
+        packJson.dependencies,
+        '@freecodecamp/example',
+        '"dependencies" does not include "@freecodecamp/example"'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+`"@freecodecamp/example"` version should be `"1.2.13"`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.equal(
+        packJson.dependencies["@freecodecamp/example"],
+        '1.2.13',
+        'Wrong version of "@freecodecamp/example". It should be 1.2.13'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md
new file mode 100644
index 00000000000..2d05d271d17
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/remove-a-package-from-your-dependencies.md
@@ -0,0 +1,52 @@
+---
+id: 587d7fb5367417b2b2512c04
+title: Remove a Package from Your Dependencies
+challengeType: 2
+forumTopicId: 301530
+dashedName: remove-a-package-from-your-dependencies
+---
+
+# --description--
+
+You have now tested a few ways you can manage dependencies of your project by using the package.json's dependencies section. You have also included external packages by adding them to the file and even told npm what types of versions you want, by using special characters such as the tilde or the caret.
+
+But what if you want to remove an external package that you no longer need? You might already have guessed it, just remove the corresponding key-value pair for that package from your dependencies.
+
+This same method applies to removing other fields in your package.json as well.
+
+# --instructions--
+
+Remove the `@freecodecamp/example` package from your dependencies.
+
+**Note:** Make sure you have the right amount of commas after removing it.
+
+# --hints--
+
+`"dependencies"` should not include `"@freecodecamp/example"`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.notProperty(
+        packJson.dependencies,
+        '@freecodecamp/example',
+        '"dependencies" still includes "@freecodecamp/example"'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md
new file mode 100644
index 00000000000..84b47b8d7b7
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency.md
@@ -0,0 +1,75 @@
+---
+id: 587d7fb5367417b2b2512c03
+title: Use the Caret-Character to Use the Latest Minor Version of a Dependency
+challengeType: 2
+forumTopicId: 301531
+dashedName: use-the-caret-character-to-use-the-latest-minor-version-of-a-dependency
+---
+
+# --description--
+
+Similar to how the tilde we learned about in the last challenge allows npm to install the latest PATCH for a dependency, the caret (`^`) allows npm to install future updates as well. The difference is that the caret will allow both MINOR updates and PATCHes.
+
+Your current version of `@freecodecamp/example` should be "~1.2.13" which allows npm to install to the latest 1.2.x version. If you were to use the caret (^) as a version prefix instead, npm would be allowed to update to any 1.x.x version.
+
+```json
+"package": "^1.3.8"
+```
+
+This would allow updates to any 1.x.x version of the package.
+
+# --instructions--
+
+Use the caret (`^`) to prefix the version of `@freecodecamp/example` in your dependencies and allow npm to update it to any new MINOR release.
+
+**Note:** The version numbers themselves should not be changed.
+
+# --hints--
+
+`"dependencies"` should include `"@freecodecamp/example"`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(
+        packJson.dependencies,
+        '@freecodecamp/example',
+        '"dependencies" does not include "@freecodecamp/example"'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+`"@freecodecamp/example"` version should match `"^1.x.x"`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.match(
+        packJson.dependencies["@freecodecamp/example"],
+        /^\^1\./,
+        'Wrong version of "@freecodecamp/example". It should be ^1.2.13'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md
new file mode 100644
index 00000000000..0ef31ff5846
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/managing-packages-with-npm/use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency.md
@@ -0,0 +1,75 @@
+---
+id: 587d7fb5367417b2b2512c02
+title: Use the Tilde-Character to Always Use the Latest Patch Version of a Dependency
+challengeType: 2
+forumTopicId: 301532
+dashedName: use-the-tilde-character-to-always-use-the-latest-patch-version-of-a-dependency
+---
+
+# --description--
+
+In the last challenge, you told npm to only include a specific version of a package. That’s a useful way to freeze your dependencies if you need to make sure that different parts of your project stay compatible with each other. But in most use cases, you don’t want to miss bug fixes since they often include important security patches and (hopefully) don’t break things in doing so.
+
+To allow an npm dependency to update to the latest PATCH version, you can prefix the dependency’s version with the tilde (`~`) character. Here's an example of how to allow updates to any 1.3.x version.
+
+```json
+"package": "~1.3.8"
+```
+
+# --instructions--
+
+In the package.json file, your current rule for how npm may upgrade `@freecodecamp/example` is to use a specific version (1.2.13). But now, you want to allow the latest 1.2.x version.
+
+Use the tilde (`~`) character to prefix the version of `@freecodecamp/example` in your dependencies, and allow npm to update it to any new _patch_ release.
+
+**Note:** The version numbers themselves should not be changed.
+
+# --hints--
+
+`"dependencies"` should include `"@freecodecamp/example"`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(
+        packJson.dependencies,
+        '@freecodecamp/example',
+        '"dependencies" does not include "@freecodecamp/example"'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+`"@freecodecamp/example"` version should match `"~1.2.13"`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.match(
+        packJson.dependencies["@freecodecamp/example"],
+        /^\~1\.2\.13/,
+        'Wrong version of "@freecodecamp/example". It should be ~1.2.13'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md
new file mode 100644
index 00000000000..12be099f8ab
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/chain-search-query-helpers-to-narrow-search-results.md
@@ -0,0 +1,76 @@
+---
+id: 587d7fb9367417b2b2512c12
+title: Chain Search Query Helpers to Narrow Search Results
+challengeType: 2
+forumTopicId: 301533
+dashedName: chain-search-query-helpers-to-narrow-search-results
+---
+
+# --description--
+
+If you don’t pass the callback as the last argument to `Model.find()` (or to the other search methods), the query is not executed. You can store the query in a variable for later use. This kind of object enables you to build up a query using chaining syntax. The actual db search is executed when you finally chain the method `.exec()`. You always need to pass your callback to this last method. There are many query helpers, here we'll use the most commonly used.
+
+# --instructions--
+
+Modify the `queryChain` function to find people who like the food specified by the variable named `foodToSearch`. Sort them by `name`, limit the results to two documents, and hide their age. Chain `.find()`, `.sort()`, `.limit()`, `.select()`, and then `.exec()`. Pass the `done(err, data)` callback to `exec()`.
+
+# --hints--
+
+Chaining query helpers should succeed
+
+```js
+(getUserInput) =>
+  $.ajax({
+    url: getUserInput('url') + '/_api/query-tools',
+    type: 'POST',
+    contentType: 'application/json',
+    data: JSON.stringify([
+      { name: 'Pablo', age: 26, favoriteFoods: ['burrito', 'hot-dog'] },
+      { name: 'Bob', age: 23, favoriteFoods: ['pizza', 'nachos'] },
+      { name: 'Ashley', age: 32, favoriteFoods: ['steak', 'burrito'] },
+      { name: 'Mario', age: 51, favoriteFoods: ['burrito', 'prosciutto'] }
+    ])
+  }).then(
+    (data) => {
+      assert.isArray(data, 'the response should be an Array');
+      assert.equal(
+        data.length,
+        2,
+        'the data array length is not what expected'
+      );
+      assert.notProperty(
+        data[0],
+        'age',
+        'The returned first item has too many properties'
+      );
+      assert.equal(
+        data[0].name,
+        'Ashley',
+        'The returned first item name is not what expected'
+      );
+      assert.notProperty(
+        data[1],
+        'age',
+        'The returned second item has too many properties'
+      );
+      assert.equal(
+        data[1].name,
+        'Mario',
+        'The returned second item name is not what expected'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md
new file mode 100644
index 00000000000..443db8e5930
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md
@@ -0,0 +1,88 @@
+---
+id: 587d7fb6367417b2b2512c07
+title: Create a Model
+challengeType: 2
+forumTopicId: 301535
+dashedName: create-a-model
+---
+
+# --description--
+
+**C**RUD Part I - CREATE
+
+First of all, we need a Schema. Each schema maps to a MongoDB collection. It defines the shape of the documents within that collection. Schemas are building blocks for Models. They can be nested to create complex models, but in this case, we'll keep things simple. A model allows you to create instances of your objects, called documents.
+
+Replit is a real server, and in real servers, the interactions with the database happen in handler functions. These functions are executed when some event happens (e.g. someone hits an endpoint on your API). We’ll follow the same approach in these exercises. The `done()` function is a callback that tells us that we can proceed after completing an asynchronous operation such as inserting, searching, updating, or deleting. It's following the Node convention, and should be called as `done(null, data)` on success, or `done(err)` on error.
+
+Warning - When interacting with remote services, errors may occur!
+
+```js
+/* Example */
+
+const someFunc = function(done) {
+  //... do something (risky) ...
+  if (error) return done(error);
+  done(null, result);
+};
+```
+
+# --instructions--
+
+Create a person schema called `personSchema` having this prototype:
+
+```markup
+- Person Prototype -
+--------------------
+name : string [required]
+age :  number
+favoriteFoods : array of strings (*)
+```
+
+Use the Mongoose basic schema types. If you want you can also add more fields, use simple validators like required or unique, and set default values. See our <a href="https://www.freecodecamp.org/news/introduction-to-mongoose-for-mongodb-d2a7aa593c57/" target="_blank" rel="noopener noreferrer nofollow">Mongoose article</a>.
+
+Now, create a model called `Person` from the `personSchema`.
+
+# --hints--
+
+Creating an instance from a mongoose schema should succeed
+
+```js
+(getUserInput) =>
+  $.post(getUserInput('url') + '/_api/mongoose-model', {
+    name: 'Mike',
+    age: 28,
+    favoriteFoods: ['pizza', 'cheese']
+  }).then(
+    (data) => {
+      assert.equal(data.name, 'Mike', '"model.name" is not what expected');
+      assert.equal(data.age, '28', '"model.age" is not what expected');
+      assert.isArray(
+        data.favoriteFoods,
+        '"model.favoriteFoods" is not an Array'
+      );
+      assert.include(
+        data.favoriteFoods,
+        'pizza',
+        '"model.favoriteFoods" does not include the expected items'
+      );
+      assert.include(
+        data.favoriteFoods,
+        'cheese',
+        '"model.favoriteFoods" does not include the expected items'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/create-and-save-a-record-of-a-model.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/create-and-save-a-record-of-a-model.md
new file mode 100644
index 00000000000..ae385b6b21d
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/create-and-save-a-record-of-a-model.md
@@ -0,0 +1,56 @@
+---
+id: 587d7fb6367417b2b2512c09
+title: Create and Save a Record of a Model
+challengeType: 2
+forumTopicId: 301536
+dashedName: create-and-save-a-record-of-a-model
+---
+
+# --description--
+
+In this challenge you will have to create and save a record of a model.
+
+# --instructions--
+
+Within the `createAndSavePerson` function, create a document instance using the `Person` model constructor you built before. Pass to the constructor an object having the fields `name`, `age`, and `favoriteFoods`. Their types must conform to the ones in the `personSchema`. Then, call the method `document.save()` on the returned document instance. Pass to it a callback using the Node convention. This is a common pattern; all the following CRUD methods take a callback function like this as the last argument.
+
+```js
+/* Example */
+
+// ...
+person.save(function(err, data) {
+  //   ...do your stuff here...
+});
+```
+
+# --hints--
+
+Creating and saving a db item should succeed
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/create-and-save-person').then(
+    (data) => {
+      assert.isString(data.name, '"item.name" should be a String');
+      assert.isNumber(data.age, '28', '"item.age" should be a Number');
+      assert.isArray(
+        data.favoriteFoods,
+        '"item.favoriteFoods" should be an Array'
+      );
+      assert.equal(data.__v, 0, 'The db item should be not previously edited');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/create-many-records-with-model.create.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/create-many-records-with-model.create.md
new file mode 100644
index 00000000000..08812efbd1b
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/create-many-records-with-model.create.md
@@ -0,0 +1,68 @@
+---
+id: 587d7fb7367417b2b2512c0a
+title: Create Many Records with model.create()
+challengeType: 2
+forumTopicId: 301537
+dashedName: create-many-records-with-model-create
+---
+
+# --description--
+
+Sometimes you need to create many instances of your models, e.g. when seeding a database with initial data. `Model.create()` takes an array of objects like `[{name: 'John', ...}, {...}, ...]` as the first argument, and saves them all in the db.
+
+# --instructions--
+
+Modify the `createManyPeople` function to create many people using `Model.create()` with the argument `arrayOfPeople`.
+
+**Note:** You can reuse the model you instantiated in the previous exercise.
+
+# --hints--
+
+Creating many db items at once should succeed
+
+```js
+(getUserInput) =>
+  $.ajax({
+    url: getUserInput('url') + '/_api/create-many-people',
+    type: 'POST',
+    contentType: 'application/json',
+    data: JSON.stringify([
+      { name: 'John', age: 24, favoriteFoods: ['pizza', 'salad'] },
+      { name: 'Mary', age: 21, favoriteFoods: ['onions', 'chicken'] }
+    ])
+  }).then(
+    (data) => {
+      assert.isArray(data, 'the response should be an array');
+      assert.equal(
+        data.length,
+        2,
+        'the response does not contain the expected number of items'
+      );
+      assert.equal(data[0].name, 'John', 'The first item is not correct');
+      assert.equal(
+        data[0].__v,
+        0,
+        'The first item should be not previously edited'
+      );
+      assert.equal(data[1].name, 'Mary', 'The second item is not correct');
+      assert.equal(
+        data[1].__v,
+        0,
+        'The second item should be not previously edited'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md
new file mode 100644
index 00000000000..7709b5fd5d3
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/delete-many-documents-with-model.remove.md
@@ -0,0 +1,57 @@
+---
+id: 587d7fb8367417b2b2512c11
+title: Delete Many Documents with model.remove()
+challengeType: 2
+forumTopicId: 301538
+dashedName: delete-many-documents-with-model-remove
+---
+
+# --description--
+
+`Model.remove()` is useful to delete all the documents matching given criteria.
+
+# --instructions--
+
+Modify the `removeManyPeople` function to delete all the people whose name is within the variable `nameToRemove`, using `Model.remove()`. Pass it to a query document with the `name` field set, and a callback.
+
+**Note:** The `Model.remove()` doesn’t return the deleted document, but a JSON object containing the outcome of the operation, and the number of items affected. Don’t forget to pass it to the `done()` callback, since we use it in tests.
+
+# --hints--
+
+Deleting many items at once should succeed
+
+```js
+(getUserInput) =>
+  $.ajax({
+    url: getUserInput('url') + '/_api/remove-many-people',
+    type: 'POST',
+    contentType: 'application/json',
+    data: JSON.stringify([
+      { name: 'Mary', age: 16, favoriteFoods: ['lollipop'] },
+      { name: 'Mary', age: 21, favoriteFoods: ['steak'] }
+    ])
+  }).then(
+    (data) => {
+      assert.isTrue(!!data.ok, 'The mongo stats are not what expected');
+      assert.equal(
+        data.n,
+        2,
+        'The number of items affected is not what expected'
+      );
+      assert.equal(data.count, 0, 'the db items count is not what expected');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md
new file mode 100644
index 00000000000..f010b51c40e
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/delete-one-document-using-model.findbyidandremove.md
@@ -0,0 +1,53 @@
+---
+id: 587d7fb8367417b2b2512c10
+title: Delete One Document Using model.findByIdAndRemove
+challengeType: 2
+forumTopicId: 301539
+dashedName: delete-one-document-using-model-findbyidandremove
+---
+
+# --description--
+
+`findByIdAndRemove` and `findOneAndRemove` are like the previous update methods. They pass the removed document to the db. As usual, use the function argument `personId` as the search key.
+
+# --instructions--
+
+Modify the `removeById` function to delete one person by the person's `_id`. You should use one of the methods `findByIdAndRemove()` or `findOneAndRemove()`.
+
+# --hints--
+
+Deleting an item should succeed
+
+```js
+(getUserInput) =>
+  $.post(getUserInput('url') + '/_api/remove-one-person', {
+    name: 'Jason Bourne',
+    age: 36,
+    favoriteFoods: ['apples']
+  }).then(
+    (data) => {
+      assert.equal(data.name, 'Jason Bourne', 'item.name is not what expected');
+      assert.equal(data.age, 36, 'item.age is not what expected');
+      assert.deepEqual(
+        data.favoriteFoods,
+        ['apples'],
+        'item.favoriteFoods is not what expected'
+      );
+      assert.equal(data.__v, 0);
+      assert.equal(data.count, 0, 'the db items count is not what expected');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md
new file mode 100644
index 00000000000..826b4b3ab6c
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/install-and-set-up-mongoose.md
@@ -0,0 +1,79 @@
+---
+id: 587d7fb6367417b2b2512c06
+title: Install and Set Up Mongoose
+challengeType: 2
+forumTopicId: 301540
+dashedName: install-and-set-up-mongoose
+---
+
+# --description--
+
+Working on these challenges will involve you writing your code using one of the following methods:
+
+- Clone <a href="https://github.com/freeCodeCamp/boilerplate-mongomongoose/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete these challenges locally.
+- Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-mongomongoose" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete these challenges.
+- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
+
+In this challenge, you will set up a MongoDB Atlas database and import the required packages to connect to it.
+
+Follow <a href='https://www.freecodecamp.org/news/get-started-with-mongodb-atlas/' target="_blank" rel="noopener noreferrer nofollow">this tutorial</a> to set up a hosted database on MongoDB Atlas.
+
+# --instructions--
+
+`mongoose@^5.11.15` has been added to your project’s `package.json` file. First, require mongoose as `mongoose` in `myApp.js`. Next, create a `.env` file and add a `MONGO_URI` variable to it. Its value should be your MongoDB Atlas database URI. Be sure to surround the URI with single or double quotes, and remember that you can't use spaces around the `=` in environment variables. For example, `MONGO_URI='VALUE'`.
+
+**Note:** If you are using Replit, you cannot create a `.env` file. Instead, use the built-in <dfn>SECRETS</dfn> tab to add the variable. <em>Do not</em> surround the values with quotes when using the <em>SECRETS</em> tab.
+
+When you are done, connect to the database using the following syntax:
+
+```js
+mongoose.connect(<Your URI>, { useNewUrlParser: true, useUnifiedTopology: true });
+```
+
+# --hints--
+
+"mongoose version ^5.11.15" dependency should be in package.json
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/file/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(packJson.dependencies, 'mongoose');
+      assert.match(
+        packJson.dependencies.mongoose,
+        /^\^5\.11\.15/,
+        'Wrong version of "mongoose". It should be ^5.11.15'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+"mongoose" should be connected to a database
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/is-mongoose-ok').then(
+    (data) => {
+      assert.isTrue(data.isMongooseOk, 'mongoose is not connected');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md
new file mode 100644
index 00000000000..b25e2cf8ba8
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/perform-classic-updates-by-running-find-edit-then-save.md
@@ -0,0 +1,54 @@
+---
+id: 587d7fb8367417b2b2512c0e
+title: 'Perform Classic Updates by Running Find, Edit, then Save'
+challengeType: 2
+forumTopicId: 301541
+dashedName: perform-classic-updates-by-running-find-edit-then-save
+---
+
+# --description--
+
+In the good old days, this was what you needed to do if you wanted to edit a document, and be able to use it somehow (e.g. sending it back in a server response). Mongoose has a dedicated updating method: `Model.update()`. It is bound to the low-level mongo driver. It can bulk-edit many documents matching certain criteria, but it doesn’t send back the updated document, only a 'status' message. Furthermore, it makes model validations difficult, because it just directly calls the mongo driver.
+
+# --instructions--
+
+Modify the `findEditThenSave` function to find a person by `_id` (use any of the above methods) with the parameter `personId` as search key. Add `"hamburger"` to the list of the person's `favoriteFoods` (you can use `Array.push()`). Then - inside the find callback - `save()` the updated `Person`.
+
+**Note:** This may be tricky, if in your Schema, you declared `favoriteFoods` as an Array, without specifying the type (i.e. `[String]`). In that case, `favoriteFoods` defaults to Mixed type, and you have to manually mark it as edited using `document.markModified('edited-field')`. See our <a href="https://www.freecodecamp.org/news/introduction-to-mongoose-for-mongodb-d2a7aa593c57/" target="_blank" rel="noopener noreferrer nofollow">Mongoose article</a>.
+
+# --hints--
+
+Find-edit-update an item should succeed
+
+```js
+(getUserInput) =>
+  $.post(getUserInput('url') + '/_api/find-edit-save', {
+    name: 'Poldo',
+    age: 40,
+    favoriteFoods: ['spaghetti']
+  }).then(
+    (data) => {
+      assert.equal(data.name, 'Poldo', 'item.name is not what is expected');
+      assert.equal(data.age, 40, 'item.age is not what expected');
+      assert.deepEqual(
+        data.favoriteFoods,
+        ['spaghetti', 'hamburger'],
+        'item.favoriteFoods is not what expected'
+      );
+      assert.equal(data.__v, 1, 'The item should be previously edited');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md
new file mode 100644
index 00000000000..ddd4ecd80ad
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/perform-new-updates-on-a-document-using-model.findoneandupdate.md
@@ -0,0 +1,58 @@
+---
+id: 587d7fb8367417b2b2512c0f
+title: Perform New Updates on a Document Using model.findOneAndUpdate()
+challengeType: 2
+forumTopicId: 301542
+dashedName: perform-new-updates-on-a-document-using-model-findoneandupdate
+---
+
+# --description--
+
+Recent versions of Mongoose have methods to simplify documents updating. Some more advanced features (i.e. pre/post hooks, validation) behave differently with this approach, so the classic method is still useful in many situations. `findByIdAndUpdate()` can be used when searching by id.
+
+# --instructions--
+
+Modify the `findAndUpdate` function to find a person by `Name` and set the person's age to `20`. Use the function parameter `personName` as the search key.
+
+**Note:** You should return the updated document. To do that, you need to pass the options document `{ new: true }` as the 3rd argument to `findOneAndUpdate()`. By default, these methods return the unmodified object.
+
+# --hints--
+
+findOneAndUpdate an item should succeed
+
+```js
+(getUserInput) =>
+  $.post(getUserInput('url') + '/_api/find-one-update', {
+    name: 'Dorian Gray',
+    age: 35,
+    favoriteFoods: ['unknown']
+  }).then(
+    (data) => {
+      assert.equal(data.name, 'Dorian Gray', 'item.name is not what expected');
+      assert.equal(data.age, 20, 'item.age is not what expected');
+      assert.deepEqual(
+        data.favoriteFoods,
+        ['unknown'],
+        'item.favoriteFoods is not what expected'
+      );
+      assert.equal(
+        data.__v,
+        0,
+        'findOneAndUpdate does not increment version by design!'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.find-to-search-your-database.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.find-to-search-your-database.md
new file mode 100644
index 00000000000..a3e22a5b1eb
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.find-to-search-your-database.md
@@ -0,0 +1,53 @@
+---
+id: 587d7fb7367417b2b2512c0b
+title: Use model.find() to Search Your Database
+challengeType: 2
+forumTopicId: 301543
+dashedName: use-model-find-to-search-your-database
+---
+
+# --description--
+
+In its simplest usage, `Model.find()` accepts a query document (a JSON object) as the first argument, then a callback. It returns an array of matches. It supports an extremely wide range of search options. Read more in the docs.
+
+# --instructions--
+
+Modify the `findPeopleByName` function to find all the people having a given name, using <code>Model.find() -\> [Person]</code>
+
+Use the function argument `personName` as the search key.
+
+# --hints--
+
+Find all items corresponding to a criteria should succeed
+
+```js
+(getUserInput) =>
+  $.post(getUserInput('url') + '/_api/find-all-by-name', {
+    name: 'r@nd0mN4m3',
+    age: 24,
+    favoriteFoods: ['pizza']
+  }).then(
+    (data) => {
+      assert.isArray(data, 'the response should be an Array');
+      assert.equal(
+        data[0].name,
+        'r@nd0mN4m3',
+        'item.name is not what expected'
+      );
+      assert.equal(data[0].__v, 0, 'The item should be not previously edited');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md
new file mode 100644
index 00000000000..36c2b551e1d
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findbyid-to-search-your-database-by-id.md
@@ -0,0 +1,48 @@
+---
+id: 587d7fb7367417b2b2512c0d
+title: Use model.findById() to Search Your Database By _id
+challengeType: 2
+forumTopicId: 301544
+dashedName: use-model-findbyid-to-search-your-database-by-id
+---
+
+# --description--
+
+When saving a document, MongoDB automatically adds the field `_id`, and set it to a unique alphanumeric key. Searching by `_id` is an extremely frequent operation, so Mongoose provides a dedicated method for it.
+
+# --instructions--
+
+Modify the `findPersonById` to find the only person having a given `_id`, using `Model.findById() -> Person`. Use the function argument `personId` as the search key.
+
+# --hints--
+
+Find an item by Id should succeed
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/find-by-id').then(
+    (data) => {
+      assert.equal(data.name, 'test', 'item.name is not what expected');
+      assert.equal(data.age, 0, 'item.age is not what expected');
+      assert.deepEqual(
+        data.favoriteFoods,
+        ['none'],
+        'item.favoriteFoods is not what expected'
+      );
+      assert.equal(data.__v, 0, 'The item should be not previously edited');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md
new file mode 100644
index 00000000000..e7f9c78278b
--- /dev/null
+++ b/curriculum/challenges/arabic/05-back-end-development-and-apis/mongodb-and-mongoose/use-model.findone-to-return-a-single-matching-document-from-your-database.md
@@ -0,0 +1,51 @@
+---
+id: 587d7fb7367417b2b2512c0c
+title: Use model.findOne() to Return a Single Matching Document from Your Database
+challengeType: 2
+forumTopicId: 301545
+dashedName: use-model-findone-to-return-a-single-matching-document-from-your-database
+---
+
+# --description--
+
+`Model.findOne()` behaves like `Model.find()`, but it returns only one document (not an array), even if there are multiple items. It is especially useful when searching by properties that you have declared as unique.
+
+# --instructions--
+
+Modify the `findOneByFood` function to find just one person which has a certain food in the person's favorites, using `Model.findOne() -> Person`. Use the function argument `food` as search key.
+
+# --hints--
+
+Find one item should succeed
+
+```js
+(getUserInput) =>
+  $.post(getUserInput('url') + '/_api/find-one-by-food', {
+    name: 'Gary',
+    age: 46,
+    favoriteFoods: ['chicken salad']
+  }).then(
+    (data) => {
+      assert.equal(data.name, 'Gary', 'item.name is not what expected');
+      assert.deepEqual(
+        data.favoriteFoods,
+        ['chicken salad'],
+        'item.favoriteFoods is not what expected'
+      );
+      assert.equal(data.__v, 0, 'The item should be not previously edited');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/announce-new-users.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/announce-new-users.md
new file mode 100644
index 00000000000..5c2e33a0aa8
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/announce-new-users.md
@@ -0,0 +1,90 @@
+---
+id: 589fc832f9fc0f352b528e78
+title: Announce New Users
+challengeType: 2
+forumTopicId: 301546
+dashedName: announce-new-users
+---
+
+# --description--
+
+Many chat rooms are able to announce when a user connects or disconnects and then display that to all of the connected users in the chat. Seeing as though you already are emitting an event on connect and disconnect, you will just have to modify this event to support such a feature. The most logical way of doing so is sending 3 pieces of data with the event: the name of the user who connected/disconnected, the current user count, and if that name connected or disconnected.
+
+Change the event name to `'user'`, and pass an object along containing the fields 'name', 'currentUsers', and 'connected' (to be `true` in case of connection, or `false` for disconnection of the user sent). Be sure to change both 'user count' events and set the disconnect one to send `false` for the field 'connected' instead of `true` like the event emitted on connect.
+
+```js
+io.emit('user', {
+  name: socket.request.user.name,
+  currentUsers,
+  connected: true
+});
+```
+
+Now your client will have all the necessary information to correctly display the current user count and announce when a user connects or disconnects! To handle this event on the client side we should listen for `'user'`, then update the current user count by using jQuery to change the text of `#num-users` to `'{NUMBER} users online'`, as well as append a `<li>` to the unordered list with id `messages` with `'{NAME} has {joined/left} the chat.'`.
+
+An implementation of this could look like the following:
+
+```js
+socket.on('user', data => {
+  $('#num-users').text(data.currentUsers + ' users online');
+  let message =
+    data.name +
+    (data.connected ? ' has joined the chat.' : ' has left the chat.');
+  $('#messages').append($('<li>').html('<b>' + message + '</b>'));
+});
+```
+
+Submit your page when you think you've got it right. If you're running into errors, you can check out <a href="https://gist.github.com/camperbot/bf95a0f74b756cf0771cd62c087b8286" target="_blank" rel="noopener noreferrer nofollow">the project completed up to this point </a>.
+
+# --hints--
+
+Event `'user'` should be emitted with name, currentUsers, and connected.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /io.emit.*('|")user\1.*name.*currentUsers.*connected/gis,
+        'You should have an event emitted named user sending name, currentUsers, and connected'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Client should properly handle and display the new data from event `'user'`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/public/client.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /socket.on.*('|")user\1[^]*num-users/gi,
+        'You should change the text of "#num-users" within on your client within the "user" event listener to show the current users connected'
+      );
+      assert.match(
+        data,
+        /socket.on.*('|")user\1[^]*messages.*li/gi,
+        'You should append a list item to "#messages" on your client within the "user" event listener to announce a user came or went'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/authentication-strategies.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/authentication-strategies.md
new file mode 100644
index 00000000000..cefe1bd8493
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/authentication-strategies.md
@@ -0,0 +1,96 @@
+---
+id: 5895f70df9fc0f352b528e68
+title: Authentication Strategies
+challengeType: 2
+forumTopicId: 301547
+dashedName: authentication-strategies
+---
+
+# --description--
+
+A strategy is a way of authenticating a user. You can use a strategy for allowing users to authenticate based on locally saved information (if you have them register first) or from a variety of providers such as Google or GitHub. For this project, we will use Passport middleware. Passport provides a comprehensive set of strategies that support authentication using a username and password, GitHub, Google, and more.
+
+`passport-local@~1.0.0` has already been added as a dependency, so add it to your server as follows: `const LocalStrategy = require('passport-local');`
+
+Now you will have to tell passport to **use** an instantiated LocalStrategy object with a few settings defined. Make sure this (as well as everything from this point on) is encapsulated in the database connection since it relies on it!
+
+```js
+passport.use(new LocalStrategy(
+  function(username, password, done) {
+    myDataBase.findOne({ username: username }, function (err, user) {
+      console.log('User '+ username +' attempted to log in.');
+      if (err) { return done(err); }
+      if (!user) { return done(null, false); }
+      if (password !== user.password) { return done(null, false); }
+      return done(null, user);
+    });
+  }
+));
+```
+
+This is defining the process to use when we try to authenticate someone locally. First, it tries to find a user in our database with the username entered, then it checks for the password to match, then finally, if no errors have popped up that we checked for, like an incorrect password, the `user`'s object is returned and they are authenticated.
+
+Many strategies are set up using different settings, but generally it is easy to set it up based on the README in that strategy's repository. A good example of this is the GitHub strategy where we don't need to worry about a username or password because the user will be sent to GitHub's auth page to authenticate. As long as they are logged in and agree then GitHub returns their profile for us to use.
+
+In the next step, we will set up how to actually call the authentication strategy to validate a user based on form data!
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/53b495c02b92adeee0aa1bd3f3be8a4b" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+Passport-local should be a dependency.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(
+        packJson.dependencies,
+        'passport-local',
+        'Your project should list "passport-local " as a dependency'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Passport-local should be correctly required and setup.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /require.*("|')passport-local("|')/gi,
+        'You should have required passport-local'
+      );
+      assert.match(
+        data,
+        /new LocalStrategy/gi,
+        'You should have told passport to use a new strategy'
+      );
+      assert.match(
+        data,
+        /findOne/gi,
+        'Your new local strategy should use the findOne query to find a username based on the inputs'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md
new file mode 100644
index 00000000000..62b0aa99510
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/authentication-with-socket.io.md
@@ -0,0 +1,154 @@
+---
+id: 589fc831f9fc0f352b528e77
+title: Authentication with Socket.IO
+challengeType: 2
+forumTopicId: 301548
+dashedName: authentication-with-socket-io
+---
+
+# --description--
+
+Currently, you cannot determine who is connected to your web socket. While `req.user` contains the user object, that's only when your user interacts with the web server, and with web sockets you have no `req` (request) and therefore no user data. One way to solve the problem of knowing who is connected to your web socket is by parsing and decoding the cookie that contains the passport session then deserializing it to obtain the user object. Luckily, there is a package on NPM just for this that turns a once complex task into something simple!
+
+`passport.socketio@~3.7.0`, `connect-mongo@~3.2.0`, and `cookie-parser@~1.4.5` have already been added as dependencies. Require them as `passportSocketIo`, `MongoStore`, and `cookieParser` respectively. Also, we need to initialize a new memory store, from `express-session` which we previously required. It should look like this:
+
+```js
+const MongoStore = require('connect-mongo')(session);
+const URI = process.env.MONGO_URI;
+const store = new MongoStore({ url: URI });
+```
+
+Now we just have to tell Socket.IO to use it and set the options. Be sure this is added before the existing socket code and not in the existing connection listener. For your server, it should look like this:
+
+```js
+io.use(
+  passportSocketIo.authorize({
+    cookieParser: cookieParser,
+    key: 'express.sid',
+    secret: process.env.SESSION_SECRET,
+    store: store,
+    success: onAuthorizeSuccess,
+    fail: onAuthorizeFail
+  })
+);
+```
+
+Note that configuring Passport authentication for Socket.IO is very similar to the way we configured the `session` middleware for the API. This is because they are meant to use the same authentication method — get the session id from a cookie and validate it.
+
+Previously, when we configured the `session` middleware, we didn't explicitly set the cookie name for session (`key`). This is because the `session` package was using the default value. Now that we've added another package which needs access to the same value from the cookies, we need to explicitly set the `key` value in both configuration objects.
+
+Be sure to add the `key` with the cookie name to the `session` middleware that matches the Socket.IO key. Also, add the `store` reference to the options, near where we set `saveUninitialized: true`. This is necessary to tell Socket.IO which session to relate to.
+
+<hr />
+
+Now, define the `success`, and `fail` callback functions:
+
+```js
+function onAuthorizeSuccess(data, accept) {
+  console.log('successful connection to socket.io');
+
+  accept(null, true);
+}
+
+function onAuthorizeFail(data, message, error, accept) {
+  if (error) throw new Error(message);
+  console.log('failed connection to socket.io:', message);
+  accept(null, false);
+}
+```
+
+The user object is now accessible on your socket object as `socket.request.user`. For example, now you can add the following:
+
+```js
+console.log('user ' + socket.request.user.name + ' connected');
+```
+
+It will log to the server console who has connected!
+
+Submit your page when you think you've got it right. If you're running into errors, you can check out the project up to this point <a href="https://gist.github.com/camperbot/1414cc9433044e306dd7fd0caa1c6254" target="_blank" rel="noopener noreferrer nofollow">https://gist.github.com/camperbot/1414cc9433044e306dd7fd0caa1c6254</a>.
+
+# --hints--
+
+`passport.socketio` should be a dependency.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(
+        packJson.dependencies,
+        'passport.socketio',
+        'Your project should list "passport.socketio" as a dependency'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+`cookie-parser` should be a dependency.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(
+        packJson.dependencies,
+        'cookie-parser',
+        'Your project should list "cookie-parser" as a dependency'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+passportSocketIo should be properly required.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /require\((['"])passport\.socketio\1\)/gi,
+        'You should correctly require and instantiate "passport.socketio"'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+passportSocketIo should be properly setup.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /io\.use\(\s*\w+\.authorize\(/,
+        'You should register "passport.socketio" as socket.io middleware and provide it correct options'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md
new file mode 100644
index 00000000000..417ca5d7c41
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/clean-up-your-project-with-modules.md
@@ -0,0 +1,64 @@
+---
+id: 589690e6f9fc0f352b528e6e
+title: Clean Up Your Project with Modules
+challengeType: 2
+forumTopicId: 301549
+dashedName: clean-up-your-project-with-modules
+---
+
+# --description--
+
+Right now, everything you have is in your `server.js` file. This can lead to hard to manage code that isn't very expandable. Create 2 new files: `routes.js` and `auth.js`
+
+Both should start with the following code:
+
+```js
+module.exports = function (app, myDataBase) {
+
+}
+```
+
+Now, in the top of your server file, require these files like so: `const routes = require('./routes.js');` Right after you establish a successful connection with the database, instantiate each of them like so: `routes(app, myDataBase)`
+
+Finally, take all of the routes in your server and paste them into your new files, and remove them from your server file. Also take the `ensureAuthenticated` function, since it was specifically created for routing. Now, you will have to correctly add the dependencies in which are used, such as `const passport = require('passport');`, at the very top, above the export line in your `routes.js` file.
+
+Keep adding them until no more errors exist, and your server file no longer has any routing (**except for the route in the catch block**)!
+
+Now do the same thing in your auth.js file with all of the things related to authentication such as the serialization and the setting up of the local strategy and erase them from your server file. Be sure to add the dependencies in and call `auth(app, myDataBase)` in the server in the same spot.
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/2d06ac5c7d850d8cf073d2c2c794cc92" target="_blank" rel="noopener noreferrer nofollow">check out an example of the completed project</a>.
+
+# --hints--
+
+Modules should be present.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /require\s*\(('|")\.\/routes(\.js)?\1\)/gi,
+        'You should have required your new files'
+      );
+      assert.match(
+        data,
+        /client\s*\.db[^]*routes/gi,
+        'Your new modules should be called after your connection to the database'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/communicate-by-emitting.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/communicate-by-emitting.md
new file mode 100644
index 00000000000..168908a3841
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/communicate-by-emitting.md
@@ -0,0 +1,107 @@
+---
+id: 589fc831f9fc0f352b528e75
+title: Communicate by Emitting
+challengeType: 2
+forumTopicId: 301550
+dashedName: communicate-by-emitting
+---
+
+# --description--
+
+<dfn>Emit</dfn> is the most common way of communicating you will use. When you emit something from the server to 'io', you send an event's name and data to all the connected sockets. A good example of this concept would be emitting the current count of connected users each time a new user connects!
+
+Start by adding a variable to keep track of the users, just before where you are currently listening for connections.
+
+```js
+let currentUsers = 0;
+```
+
+Now, when someone connects, you should increment the count before emitting the count. So, you will want to add the incrementer within the connection listener.
+
+```js
+++currentUsers;
+```
+
+Finally, after incrementing the count, you should emit the event (still within the connection listener). The event should be named 'user count', and the data should just be the `currentUsers`.
+
+```js
+io.emit('user count', currentUsers);
+```
+
+Now, you can implement a way for your client to listen for this event! Similar to listening for a connection on the server, you will use the `on` keyword.
+
+```js
+socket.on('user count', function(data) {
+  console.log(data);
+});
+```
+
+Now, try loading up your app, authenticate, and you should see in your client console '1' representing the current user count! Try loading more clients up, and authenticating to see the number go up.
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/28ef7f1078f56eb48c7b1aeea35ba1f5" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+currentUsers should be defined.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /currentUsers/gi,
+        'You should have variable currentUsers defined'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Server should emit the current user count at each new connection.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /io.emit.*('|")user count('|").*currentUsers/gi,
+        'You should emit "user count" with data currentUsers'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Your client should be listening for 'user count' event.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/public/client.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /socket.on.*('|")user count('|")/gi,
+        'Your client should be connection to server with the connection defined as socket'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/create-new-middleware.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/create-new-middleware.md
new file mode 100644
index 00000000000..b750b36c42f
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/create-new-middleware.md
@@ -0,0 +1,87 @@
+---
+id: 5895f70df9fc0f352b528e6a
+title: Create New Middleware
+challengeType: 2
+forumTopicId: 301551
+dashedName: create-new-middleware
+---
+
+# --description--
+
+As is, any user can just go to `/profile` whether they have authenticated or not, by typing in the url. We want to prevent this, by checking if the user is authenticated first before rendering the profile page. This is the perfect example of when to create a middleware.
+
+The challenge here is creating the middleware function `ensureAuthenticated(req, res, next)`, which will check if a user is authenticated by calling passport's `isAuthenticated` method on the `request` which, in turn, checks if `req.user` is defined. If it is, then `next()` should be called, otherwise, we can just respond to the request with a redirect to our homepage to login. An implementation of this middleware is:
+
+```js
+function ensureAuthenticated(req, res, next) {
+  if (req.isAuthenticated()) {
+    return next();
+  }
+  res.redirect('/');
+};
+```
+
+Now add *ensureAuthenticated* as a middleware to the request for the profile page before the argument to the get request containing the function that renders the page.
+
+```js
+app
+ .route('/profile')
+ .get(ensureAuthenticated, (req,res) => {
+    res.render(process.cwd() + '/views/pug/profile');
+ });
+```
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/ae49b8778cab87e93284a91343da0959" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+Middleware ensureAuthenticated should be implemented and on our /profile route.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /ensureAuthenticated[^]*req.isAuthenticated/gi,
+        'Your ensureAuthenticated middleware should be defined and utilize the req.isAuthenticated function'
+      );
+      assert.match(
+        data,
+        /profile[^]*get[^]*ensureAuthenticated/gi,
+        'Your ensureAuthenticated middleware should be attached to the /profile route'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+A Get request to /profile should correctly redirect to / since we are not authenticated.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/profile').then(
+    (data) => {
+      assert.match(
+        data,
+        /Home page/gi,
+        'An attempt to go to the profile at this point should redirect to the homepage since we are not logged in'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md
new file mode 100644
index 00000000000..e7781482206
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/handle-a-disconnect.md
@@ -0,0 +1,69 @@
+---
+id: 589fc831f9fc0f352b528e76
+title: Handle a Disconnect
+challengeType: 2
+forumTopicId: 301552
+dashedName: handle-a-disconnect
+---
+
+# --description--
+
+You may notice that up to now you have only been increasing the user count. Handling a user disconnecting is just as easy as handling the initial connect, except you have to listen for it on each socket instead of on the whole server.
+
+To do this, add another listener inside the existing `'connect'` listener that listens for `'disconnect'` on the socket with no data passed through. You can test this functionality by just logging that a user has disconnected to the console.
+
+```js
+socket.on('disconnect', () => {
+  /*anything you want to do on disconnect*/
+});
+```
+
+To make sure clients continuously have the updated count of current users, you should decrease the currentUsers by 1 when the disconnect happens then emit the 'user count' event with the updated count!
+
+**Note:** Just like `'disconnect'`, all other events that a socket can emit to the server should be handled within the connecting listener where we have 'socket' defined.
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/ab1007b76069884fb45b215d3c4496fa" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+Server should handle the event disconnect from a socket.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(data, /socket.on.*('|")disconnect('|")/gi, '');
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Your client should be listening for 'user count' event.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/public/client.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /socket.on.*('|")user count('|")/gi,
+        'Your client should be connection to server with the connection defined as socket'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md
new file mode 100644
index 00000000000..f897185c9b9
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/hashing-your-passwords.md
@@ -0,0 +1,86 @@
+---
+id: 58a25c98f9fc0f352b528e7f
+title: Hashing Your Passwords
+challengeType: 2
+forumTopicId: 301553
+dashedName: hashing-your-passwords
+---
+
+# --description--
+
+Going back to the information security section, you may remember that storing plaintext passwords is *never* okay. Now it is time to implement BCrypt to solve this issue.
+
+`bcrypt@~5.0.0` has already been added as a dependency, so require it in your server. You will need to handle hashing in 2 key areas: where you handle registering/saving a new account, and when you check to see that a password is correct on login.
+
+Currently on our registration route, you insert a user's password into the database like so: `password: req.body.password`. An easy way to implement saving a hash instead is to add the following before your database logic `const hash = bcrypt.hashSync(req.body.password, 12);`, and replacing the `req.body.password` in the database saving with just `password: hash`.
+
+Finally, on our authentication strategy, we check for the following in our code before completing the process: `if (password !== user.password) { return done(null, false); }`. After making the previous changes, now `user.password` is a hash. Before making a change to the existing code, notice how the statement is checking if the password is **not** equal then return non-authenticated. With this in mind, your code could look as follows to properly check the password entered against the hash:
+
+```js
+if (!bcrypt.compareSync(password, user.password)) { 
+  return done(null, false);
+}
+```
+
+That is all it takes to implement one of the most important security features when you have to store passwords!
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/dc16cca09daea4d4151a9c36a1fab564" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+BCrypt should be a dependency.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(
+        packJson.dependencies,
+        'bcrypt',
+        'Your project should list "bcrypt" as a dependency'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+BCrypt should be correctly required and implemented.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /require.*("|')bcrypt\1/gi,
+        'You should have required bcrypt'
+      );
+      assert.match(
+        data,
+        /bcrypt.hashSync/gi,
+        'You should use hash the password in the registration'
+      );
+      assert.match(
+        data,
+        /bcrypt.compareSync/gi,
+        'You should compare the password to the hash in your strategy'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md
new file mode 100644
index 00000000000..2c35bb056b1
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/how-to-put-a-profile-together.md
@@ -0,0 +1,57 @@
+---
+id: 5895f70ef9fc0f352b528e6b
+title: How to Put a Profile Together
+challengeType: 2
+forumTopicId: 301554
+dashedName: how-to-put-a-profile-together
+---
+
+# --description--
+
+Now that we can ensure the user accessing the `/profile` is authenticated, we can use the information contained in `req.user` on our page!
+
+Pass an object containing the property `username` and value of `req.user.username` as the second argument for the render method of the profile view. Then, go to your `profile.pug` view, and add the following line below the existing `h1` element, and at the same level of indentation:
+
+```pug
+h2.center#welcome Welcome, #{username}!
+```
+
+This creates an `h2` element with the class '`center`' and id '`welcome`' containing the text '`Welcome,`' followed by the username.
+
+Also, in `profile.pug`, add a link referring to the `/logout` route, which will host the logic to unauthenticate a user.
+
+```pug
+a(href='/logout') Logout
+```
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/136b3ad611cc80b41cab6f74bb460f6a" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+You should correctly add a Pug render variable to /profile.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /username:( |)req.user.username/gi,
+        'You should be passing the variable username with req.user.username into the render function of the profile page'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md
new file mode 100644
index 00000000000..e656a184424
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/how-to-use-passport-strategies.md
@@ -0,0 +1,79 @@
+---
+id: 5895f70df9fc0f352b528e69
+title: How to Use Passport Strategies
+challengeType: 2
+forumTopicId: 301555
+dashedName: how-to-use-passport-strategies
+---
+
+# --description--
+
+In the `index.pug` file supplied, there is actually a login form. It has previously been hidden because of the inline JavaScript `if showLogin` with the form indented after it. Before `showLogin` as a variable was never defined, so it never rendered the code block containing the form. Go ahead and on the `res.render` for that page add a new variable to the object `showLogin: true`. When you refresh your page, you should then see the form! This form is set up to **POST** on `/login`, so this is where we should set up to accept the POST and authenticate the user.
+
+For this challenge you should add the route `/login` to accept a POST request. To authenticate on this route, you need to add a middleware to do so before then sending a response. This is done by just passing another argument with the middleware before your `function(req,res)` with your response! The middleware to use is `passport.authenticate('local')`.
+
+`passport.authenticate` can also take some options as an argument such as: `{ failureRedirect: '/' }` which is incredibly useful, so be sure to add that in as well. The response after using the middleware (which will only be called if the authentication middleware passes) should be to redirect the user to `/profile` and that route should render the view `profile.pug`.
+
+If the authentication was successful, the user object will be saved in `req.user`.
+
+At this point, if you enter a username and password in the form, it should redirect to the home page `/`, and the console of your server should display `'User {USERNAME} attempted to log in.'`, since we currently cannot login a user who isn't registered.
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/7ad011ac54612ad53188b500c5e99cb9" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+All steps should be correctly implemented in the server.js.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /showLogin:( |)true/gi,
+        'You should be passing the variable "showLogin" as true to your render function for the homepage'
+      );
+      assert.match(
+        data,
+        /failureRedirect:( |)('|")\/('|")/gi,
+        'Your code should include a failureRedirect to the "/" route'
+      );
+      assert.match(
+        data,
+        /login[^]*post[^]*local/gi,
+        'You should have a route for login which accepts a POST and passport.authenticates local'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+A POST request to /login should correctly redirect to /.
+
+```js
+(getUserInput) =>
+  $.post(getUserInput('url') + '/login').then(
+    (data) => {
+      assert.match(
+        data,
+        /Looks like this page is being rendered from Pug into HTML!/gi,
+        'A login attempt at this point should redirect to the homepage since we do not have any registered users'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md
new file mode 100644
index 00000000000..87e1780eb4c
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implement-the-serialization-of-a-passport-user.md
@@ -0,0 +1,91 @@
+---
+id: 5895f70cf9fc0f352b528e67
+title: Implement the Serialization of a Passport User
+challengeType: 2
+forumTopicId: 301556
+dashedName: implement-the-serialization-of-a-passport-user
+---
+
+# --description--
+
+Right now, we're not loading an actual user object since we haven't set up our database. This can be done many different ways, but for our project we will connect to the database once when we start the server and keep a persistent connection for the full life-cycle of the app. To do this, add your database's connection string (for example: `mongodb+srv://:@cluster0-jvwxi.mongodb.net/?retryWrites=true&w=majority`) to the environment variable `MONGO_URI`. This is used in the `connection.js` file.
+
+*If you are having issues setting up a free database on MongoDB Atlas, check out <a href="https://www.freecodecamp.org/news/get-started-with-mongodb-atlas/" target="_blank" rel="noopener noreferrer nofollow">tutorial</a>.*
+
+Now we want to connect to our database then start listening for requests. The purpose of this is to not allow requests before our database is connected or if there is a database error. To accomplish this, you will want to encompass your serialization and your app routes in the following code:
+
+```js
+myDB(async client => {
+  const myDataBase = await client.db('database').collection('users');
+
+  // Be sure to change the title
+  app.route('/').get((req, res) => {
+    //Change the response to render the Pug template
+    res.render('pug', {
+      title: 'Connected to Database',
+      message: 'Please login'
+    });
+  });
+
+  // Serialization and deserialization here...
+
+  // Be sure to add this...
+}).catch(e => {
+  app.route('/').get((req, res) => {
+    res.render('pug', { title: e, message: 'Unable to login' });
+  });
+});
+// app.listen out here...
+```
+
+Be sure to uncomment the `myDataBase` code in `deserializeUser`, and edit your `done(null, null)` to include the `doc`.
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/175f2f585a2d8034044c7e8857d5add7" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+Database connection should be present.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/').then(
+    (data) => {
+      assert.match(
+        data,
+        /Connected to Database/gi,
+        'You successfully connected to the database!'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Deserialization should now be correctly using the DB and `done(null, null)` should be called with the `doc`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /null,\s*doc/gi,
+        'The callback in deserializeUser of (null, null) should be altered to (null, doc)'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md
new file mode 100644
index 00000000000..f4552257d4b
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-ii.md
@@ -0,0 +1,116 @@
+---
+id: 589a69f5f9fc0f352b528e71
+title: Implementation of Social Authentication II
+challengeType: 2
+forumTopicId: 301557
+dashedName: implementation-of-social-authentication-ii
+---
+
+# --description--
+
+The last part of setting up your GitHub authentication is to create the strategy itself. `passport-github@~1.1.0` has already been added as a dependency, so require it in your `auth.js` file as `GithubStrategy` like this: `const GitHubStrategy = require('passport-github').Strategy;`. Do not forget to require and configure `dotenv` to use your environment variables.
+
+To set up the GitHub strategy, you have to tell Passport to use an instantiated `GitHubStrategy`, which accepts 2 arguments: an object (containing `clientID`, `clientSecret`, and `callbackURL`) and a function to be called when a user is successfully authenticated, which will determine if the user is new and what fields to save initially in the user's database object. This is common across many strategies, but some may require more information as outlined in that specific strategy's GitHub README. For example, Google requires a *scope* as well which determines what kind of information your request is asking to be returned and asks the user to approve such access.
+
+The current strategy we are implementing authenticates users using a GitHub account and OAuth 2.0 tokens. The client ID and secret obtained when creating an application are supplied as options when creating the strategy. The strategy also requires a `verify` callback, which receives the access token and optional refresh token, as well as `profile` which contains the authenticated user's GitHub profile. The `verify` callback must call `cb` providing a user to complete authentication.
+
+Here's how your new strategy should look at this point:
+
+```js
+passport.use(new GitHubStrategy({
+  clientID: process.env.GITHUB_CLIENT_ID,
+  clientSecret: process.env.GITHUB_CLIENT_SECRET,
+  callbackURL: /*INSERT CALLBACK URL ENTERED INTO GITHUB HERE*/
+},
+  function(accessToken, refreshToken, profile, cb) {
+    console.log(profile);
+    //Database logic here with callback containing our user object
+  }
+));
+```
+
+Your authentication won't be successful yet, and it will actually throw an error without the database logic and callback, but it should log your GitHub profile to your console if you try it!
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/ff3a1166684c1b184709ac0bee30dee6" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+passport-github dependency should be added.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(
+        packJson.dependencies,
+        'passport-github',
+        'Your project should list "passport-github" as a dependency'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+passport-github should be required.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/auth.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /require.*("|')passport-github("|')/gi,
+        'You should have required passport-github'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+GitHub strategy should be setup correctly thus far.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/auth.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /passport\.use.*new GitHubStrategy/gis,
+        'Passport should use a new GitHubStrategy'
+      );
+      assert.match(
+        data,
+        /callbackURL:\s*("|').*("|')/gi,
+        'You should have a callbackURL'
+      );
+      assert.match(
+        data,
+        /process\.env(\.GITHUB_CLIENT_SECRET|\[(?<q>"|')GITHUB_CLIENT_SECRET\k<q>\])/g,
+        'You should use process.env.GITHUB_CLIENT_SECRET'
+      );
+      assert.match(
+        data,
+        /process\.env(\.GITHUB_CLIENT_ID|\[(?<q>"|')GITHUB_CLIENT_ID\k<q>\])/g,
+        'You should use process.env.GITHUB_CLIENT_ID'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions,
+  because they would need to be tested against a full working project.
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md
new file mode 100644
index 00000000000..87feb7dfca3
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication-iii.md
@@ -0,0 +1,80 @@
+---
+id: 589a8eb3f9fc0f352b528e72
+title: Implementation of Social Authentication III
+challengeType: 2
+forumTopicId: 301558
+dashedName: implementation-of-social-authentication-iii
+---
+
+# --description--
+
+The final part of the strategy is handling the profile returned from GitHub. We need to load the user's database object if it exists, or create one if it doesn't, and populate the fields from the profile, then return the user's object. GitHub supplies us a unique *id* within each profile which we can use to search with to serialize the user with (already implemented). Below is an example implementation you can use in your project--it goes within the function that is the second argument for the new strategy, right below where `console.log(profile);` currently is:
+
+```js
+myDataBase.findOneAndUpdate(
+  { id: profile.id },
+  {
+    $setOnInsert: {
+      id: profile.id,
+      name: profile.displayName || 'John Doe',
+      photo: profile.photos[0].value || '',
+      email: Array.isArray(profile.emails)
+        ? profile.emails[0].value
+        : 'No public email',
+      created_on: new Date(),
+      provider: profile.provider || ''
+    },
+    $set: {
+      last_login: new Date()
+    },
+    $inc: {
+      login_count: 1
+    }
+  },
+  { upsert: true, new: true },
+  (err, doc) => {
+    return cb(null, doc.value);
+  }
+);
+```
+
+`findOneAndUpdate` allows you to search for an object and update it. If the object doesn't exist, it will be inserted and made available to the callback function. In this example, we always set `last_login`, increment the `login_count` by `1`, and only populate the majority of the fields when a new object (new user) is inserted. Notice the use of default values. Sometimes a profile returned won't have all the information filled out or the user will keep it private. In this case, you handle it to prevent an error.
+
+You should be able to login to your app now--try it!
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/183e968f0e01d81dde015d45ba9d2745" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+GitHub strategy setup should be complete.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/auth.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /GitHubStrategy[^]*myDataBase/gi,
+        'Strategy should use now use the database to search for the user'
+      );
+      assert.match(
+        data,
+        /GitHubStrategy[^]*return cb/gi,
+        'Strategy should return the callback function "cb"'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md
new file mode 100644
index 00000000000..a744f418598
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/implementation-of-social-authentication.md
@@ -0,0 +1,108 @@
+---
+id: 589a69f5f9fc0f352b528e70
+title: Implementation of Social Authentication
+challengeType: 2
+forumTopicId: 301559
+dashedName: implementation-of-social-authentication
+---
+
+# --description--
+
+The basic path this kind of authentication will follow in your app is:
+
+1.  User clicks a button or link sending them to our route to authenticate using a specific strategy (e.g. GitHub).
+2.  Your route calls `passport.authenticate('github')` which redirects them to GitHub.
+3.  The page the user lands on, on GitHub, allows them to login if they aren't already. It then asks them to approve access to their profile from our app.
+4.  The user is then returned to our app at a specific callback url with their profile if they are approved.
+5.  They are now authenticated, and your app should check if it is a returning profile, or save it in your database if it is not.
+
+Strategies with OAuth require you to have at least a *Client ID* and a *Client Secret* which is a way for the service to verify who the authentication request is coming from and if it is valid. These are obtained from the site you are trying to implement authentication with, such as GitHub, and are unique to your app--**THEY ARE NOT TO BE SHARED** and should never be uploaded to a public repository or written directly in your code. A common practice is to put them in your `.env` file and reference them like so: `process.env.GITHUB_CLIENT_ID`. For this challenge we're going to use the GitHub strategy.
+
+Obtaining your *Client ID and Secret* from GitHub is done in your account profile settings under 'developer settings', then <a href="https://github.com/settings/developers" target="_blank" rel="noopener noreferrer nofollow">'OAuth applications'</a>. Click 'Register a new application', name your app, paste in the url to your Replit homepage (**Not the project code's url**), and lastly, for the callback url, paste in the same url as the homepage but with `/auth/github/callback` added on. This is where users will be redirected for us to handle after authenticating on GitHub. Save the returned information as `'GITHUB_CLIENT_ID'` and `'GITHUB_CLIENT_SECRET'` in your `.env` file.
+
+In your `routes.js` file, add `showSocialAuth: true` to the homepage route, after `showRegistration: true`. Now, create 2 routes accepting GET requests: `/auth/github` and `/auth/github/callback`. The first should only call passport to authenticate `'github'`. The second should call passport to authenticate `'github'` with a failure redirect to `/`, and then if that is successful redirect to `/profile` (similar to our last project).
+
+An example of how `/auth/github/callback` should look is similar to how we handled a normal login:
+
+```js
+app.route('/login')
+  .post(passport.authenticate('local', { failureRedirect: '/' }), (req,res) => {
+    res.redirect('/profile');
+  });
+```
+
+Submit your page when you think you've got it right. If you're running into errors, you can check out the project up to this point <a href="https://gist.github.com/camperbot/1f7f6f76adb178680246989612bea21e" target="_blank" rel="noopener noreferrer nofollow">https://gist.github.com/camperbot/1f7f6f76adb178680246989612bea21e</a>.
+
+# --hints--
+
+Route `/auth/github` should be correct.
+
+```js
+async (getUserInput) => {
+  try {
+    const res = await fetch(getUserInput('url') + '/_api/routes.js');
+    if (res.ok) {
+      const data = await res.text();
+      assert.match(
+          data.replace(/\s/g, ''),
+          /passport.authenticate.*?github/g,
+          'Route auth/github should only call passport.authenticate with github'
+        );
+    } else {
+      throw new Error(res.statusText);
+    }
+    const res2 = await fetch(getUserInput('url') + '/_api/app-stack');
+    if (res2.ok) {
+      const data2 = JSON.parse(await res2.json());
+      const dataLayer = data2.find(layer => layer?.route?.path === '/auth/github');
+      assert.deepInclude(dataLayer?.route, { methods: {get: true}, path: "/auth/github"});
+      assert.deepInclude(dataLayer?.route?.stack?.[0], {method: "get", name: "authenticate"});
+    } else {
+      throw new Error(res2.statusText);
+    }
+  } catch (err) {
+    throw new Error(err);
+  }
+}
+```
+
+Route `/auth/github/callback` should be correct.
+
+```js
+async (getUserInput) => {
+  try {
+    const res = await fetch(getUserInput('url') + '/_api/routes.js');
+    if (res.ok) {
+      const data = await res.text();
+      assert.match(
+        data.replace(/\s/g, ''),
+        /failureRedirect:("|')\/\1/g,
+        'Route auth/github/callback should accept a get request and call passport.authenticate for github with a failure redirect to home'
+      );
+    } else {
+      throw new Error(res.statusText);
+    }
+    const res2 = await fetch(getUserInput('url') + '/_api/app-stack');
+    if (res2.ok) {
+      const data2 = JSON.parse(await res2.json());
+      const dataLayer = data2.find(layer => layer?.route?.path === '/auth/github/callback');
+      assert.deepInclude(dataLayer?.route, { methods: {get: true}, path: "/auth/github/callback"});
+      assert.deepInclude(dataLayer?.route?.stack?.[0], {method: "get", name: "authenticate"});
+    } else {
+      throw new Error(res2.statusText);
+    }
+  } catch (err) {
+    throw new Error(err);
+  }
+}
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md
new file mode 100644
index 00000000000..69686500bf0
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/logging-a-user-out.md
@@ -0,0 +1,81 @@
+---
+id: 58965611f9fc0f352b528e6c
+title: Logging a User Out
+challengeType: 2
+forumTopicId: 301560
+dashedName: logging-a-user-out
+---
+
+# --description--
+
+Creating the logout logic is easy. The route should just unauthenticate the user and redirect to the home page instead of rendering any view.
+
+In passport, unauthenticating a user is as easy as just calling `req.logout();` before redirecting.
+
+```js
+app.route('/logout')
+  .get((req, res) => {
+    req.logout();
+    res.redirect('/');
+});
+```
+
+You may have noticed that we're not handling missing pages (404). The common way to handle this in Node is with the following middleware. Go ahead and add this in after all your other routes:
+
+```js
+app.use((req, res, next) => {
+  res.status(404)
+    .type('text')
+    .send('Not Found');
+});
+```
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/c3eeb8a3ebf855e021fd0c044095a23b" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+`req.logout()` should be called in your `/logout` route.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /req.logout/gi,
+        'You should be calling req.logout() in your /logout route'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Logout should redirect to the home page.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/logout').then(
+    (data) => {
+      assert.match(
+        data,
+        /Home page/gi,
+        'When a user logs out they should be redirected to the homepage'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md
new file mode 100644
index 00000000000..2b64f9d1b5d
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/registration-of-new-users.md
@@ -0,0 +1,205 @@
+---
+id: 58966a17f9fc0f352b528e6d
+title: Registration of New Users
+challengeType: 2
+forumTopicId: 301561
+dashedName: registration-of-new-users
+---
+
+# --description--
+
+Now we need to allow a new user on our site to register an account. On the `res.render` for the home page add a new variable to the object passed along--`showRegistration: true`. When you refresh your page, you should then see the registration form that was already created in your `index.pug` file! This form is set up to **POST** on `/register`, so this is where we should set up to accept the **POST** and create the user object in the database.
+
+The logic of the registration route should be as follows: Register the new user > Authenticate the new user > Redirect to /profile
+
+The logic of step 1, registering the new user, should be as follows: Query database with a findOne command > if user is returned then it exists and redirect back to home *OR* if user is undefined and no error occurs then 'insertOne' into the database with the username and password, and, as long as no errors occur, call *next* to go to step 2, authenticating the new user, which we've already written the logic for in our POST */login* route.
+
+```js
+app.route('/register')
+  .post((req, res, next) => {
+    myDataBase.findOne({ username: req.body.username }, function(err, user) {
+      if (err) {
+        next(err);
+      } else if (user) {
+        res.redirect('/');
+      } else {
+        myDataBase.insertOne({
+          username: req.body.username,
+          password: req.body.password
+        },
+          (err, doc) => {
+            if (err) {
+              res.redirect('/');
+            } else {
+              // The inserted document is held within
+              // the ops property of the doc
+              next(null, doc.ops[0]);
+            }
+          }
+        )
+      }
+    })
+  },
+    passport.authenticate('local', { failureRedirect: '/' }),
+    (req, res, next) => {
+      res.redirect('/profile');
+    }
+  );
+```
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/b230a5b3bbc89b1fa0ce32a2aa7b083e" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+**NOTE:** From this point onwards, issues can arise relating to the use of the *picture-in-picture* browser. If you are using an online IDE which offers a preview of the app within the editor, it is recommended to open this preview in a new tab.
+
+# --hints--
+
+You should register route and display on home.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /showRegistration:( |)true/gi,
+        'You should be passing the variable showRegistration as true to your render function for the homepage'
+      );
+      assert.match(
+        data,
+        /register[^]*post[^]*findOne[^]*username:( |)req.body.username/gi,
+        'You should have a route accepted a post request on register that querys the db with findone and the query being username: req.body.username'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Registering should work.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  const user = `freeCodeCampTester${Date.now()}`;
+  const xhttp = new XMLHttpRequest();
+  xhttp.onreadystatechange = function () {
+    if (this.readyState == 4 && this.status == 200) {
+      test(this);
+    } else {
+      throw new Error(`${this.status} ${this.statusText}`);
+    }
+  };
+  xhttp.open('POST', url + '/register', true);
+  xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+  xhttp.send(`username=${user}&password=${user}`);
+  function test(xhttpRes) {
+    const data = xhttpRes.responseText;
+    assert.match(
+      data,
+      /Profile/gi,
+      'Register should work, and redirect successfully to the profile.'
+    );
+  }
+};
+```
+
+Login should work.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  const user = `freeCodeCampTester${Date.now()}`;
+  const xhttpReg = new XMLHttpRequest();
+  xhttpReg.onreadystatechange = function () {
+    if (this.readyState == 4 && this.status == 200) {
+      login();
+    } else {
+      throw new Error(`${this.status} ${this.statusText}`);
+    }
+  };
+  xhttpReg.open('POST', url + '/register', true);
+  xhttpReg.setRequestHeader(
+    'Content-type',
+    'application/x-www-form-urlencoded'
+  );
+  xhttpReg.send(`username=${user}&password=${user}`);
+  function login() {
+    const xhttp = new XMLHttpRequest();
+    xhttp.onreadystatechange = function () {
+      if (this.readyState == 4 && this.status == 200) {
+        test(this);
+      } else {
+        throw new Error(`${this.status} ${this.statusText}`);
+      }
+    };
+    xhttp.open('POST', url + '/login', true);
+    xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
+    xhttp.send(`username=${user}&password=${user}`);
+  }
+  function test(xhttpRes) {
+    const data = xhttpRes.responseText;
+    assert.match(
+      data,
+      /Profile/gi,
+      'Login should work if previous test was done successfully and redirect successfully to the profile.'
+    );
+    assert.match(
+      data,
+      new RegExp(user, 'g'),
+      'The profile should properly display the welcome to the user logged in'
+    );
+  }
+};
+```
+
+Logout should work.
+
+```js
+(getUserInput) =>
+  $.ajax({
+    url: getUserInput('url') + '/logout',
+    type: 'GET',
+    xhrFields: { withCredentials: true }
+  }).then(
+    (data) => {
+      assert.match(data, /Home/gi, 'Logout should redirect to home');
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Profile should no longer work after logout.
+
+```js
+(getUserInput) =>
+  $.ajax({
+    url: getUserInput('url') + '/profile',
+    type: 'GET',
+    crossDomain: true,
+    xhrFields: { withCredentials: true }
+  }).then(
+    (data) => {
+      assert.match(
+        data,
+        /Home/gi,
+        'Profile should redirect to home when we are logged out now again'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md
new file mode 100644
index 00000000000..ab19e7387f2
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/send-and-display-chat-messages.md
@@ -0,0 +1,79 @@
+---
+id: 589fc832f9fc0f352b528e79
+title: Send and Display Chat Messages
+challengeType: 2
+forumTopicId: 301562
+dashedName: send-and-display-chat-messages
+---
+
+# --description--
+
+It's time you start allowing clients to send a chat message to the server to emit to all the clients! In your `client.js` file, you should see there is already a block of code handling when the message form is submitted.
+
+```js
+$('form').submit(function() {
+  /*logic*/
+});
+```
+
+Within the form submit code, you should emit an event after you define `messageToSend` but before you clear the text box `#m`. The event should be named `'chat message'` and the data should just be `messageToSend`.
+
+```js
+socket.emit('chat message', messageToSend);
+```
+
+Now, on your server, you should be listening to the socket for the event `'chat message'` with the data being named `message`. Once the event is received, it should emit the event `'chat message'` to all sockets `io.emit` with the data being an object containing `name` and `message`.
+
+In `client.js`, you should now listen for event `'chat message'` and, when received, append a list item to `#messages` with the name, a colon, and the message!
+
+At this point, the chat should be fully functional and sending messages across all clients!
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/d7af9864375207e254f73262976d2016" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+Server should listen for `'chat message'` and then emit it properly.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /socket.on.*('|")chat message('|")[^]*io.emit.*('|")chat message('|").*name.*message/gis,
+        'Your server should listen to the socket for "chat message" then emit to all users "chat message" with name and message in the data object'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Client should properly handle and display the new data from event `'chat message'`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/public/client.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /socket.on.*('|")chat message('|")[^]*messages.*li/gis,
+        'You should append a list item to #messages on your client within the "chat message" event listener to display the new message'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md
new file mode 100644
index 00000000000..eb99213c0b8
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/serialization-of-a-user-object.md
@@ -0,0 +1,131 @@
+---
+id: 5895f70cf9fc0f352b528e66
+title: Serialization of a User Object
+challengeType: 2
+forumTopicId: 301563
+dashedName: serialization-of-a-user-object
+---
+
+# --description--
+
+Serialization and deserialization are important concepts in regards to authentication. To serialize an object means to convert its contents into a small *key* that can then be deserialized into the original object. This is what allows us to know who has communicated with the server without having to send the authentication data, like the username and password, at each request for a new page.
+
+To set this up properly, we need to have a serialize function and a deserialize function. In Passport, we create these with `passport.serializeUser( OURFUNCTION )` and `passport.deserializeUser( OURFUNCTION )`
+
+The `serializeUser` is called with 2 arguments, the full user object and a callback used by passport. A unique key to identify that user should be returned in the callback, the easiest one to use being the user's `_id` in the object. It should be unique as it is generated by MongoDB. Similarly, `deserializeUser` is called with that key and a callback function for passport as well, but, this time, we have to take that key and return the full user object to the callback. To make a query search for a Mongo `_id`, you will have to create `const ObjectID = require('mongodb').ObjectID;`, and then to use it you call `new ObjectID(THE_ID)`. `mongodb@~3.6.0` has already been added as a dependency. You can see this in the examples below:
+
+```js
+passport.serializeUser((user, done) => {
+  done(null, user._id);
+});
+
+passport.deserializeUser((id, done) => {
+  myDataBase.findOne({ _id: new ObjectID(id) }, (err, doc) => {
+    done(null, null);
+  });
+});
+```
+
+NOTE: This `deserializeUser` will throw an error until we set up the DB in the next step, so for now comment out the whole block and just call `done(null, null)` in the function `deserializeUser`.
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/7068a0d09e61ec7424572b366751f048" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+You should serialize user function correctly.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /passport.serializeUser/gi,
+        'You should have created your passport.serializeUser function'
+      );
+      assert.match(
+        data,
+        /null,\s*user._id/gi,
+        'There should be a callback in your serializeUser with (null, user._id)'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+You should deserialize user function correctly.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /passport.deserializeUser/gi,
+        'You should have created your passport.deserializeUser function'
+      );
+      assert.match(
+        data,
+        /null,\s*null/gi,
+        'There should be a callback in your deserializeUser with (null, null) for now'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+MongoDB should be a dependency.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(
+        packJson.dependencies,
+        'mongodb',
+        'Your project should list "mongodb" as a dependency'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Mongodb should be properly required including the ObjectId.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /require.*("|')mongodb\1/gi,
+        'You should have required mongodb'
+      );
+      assert.match(
+        data,
+        /new ObjectID.*id/gi,
+        'Even though the block is commented out, you should use new ObjectID(id) for when we add the database'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md
new file mode 100644
index 00000000000..08d21a01237
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-a-template-engine.md
@@ -0,0 +1,116 @@
+---
+id: 5895f700f9fc0f352b528e63
+title: Set up a Template Engine
+challengeType: 2
+forumTopicId: 301564
+dashedName: set-up-a-template-engine
+---
+
+# --description--
+
+Working on these challenges will involve you writing your code using one of the following methods:
+
+- Clone <a href="https://github.com/freeCodeCamp/boilerplate-advancednode/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete these challenges locally.
+- Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-advancednode" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete these challenges.
+- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
+
+A template engine enables you to use static template files (such as those written in *Pug*) in your app. At runtime, the template engine replaces variables in a template file with actual values which can be supplied by your server. Then it transforms the template into a static HTML file that is sent to the client. This approach makes it easier to design an HTML page and allows for displaying variables on the page without needing to make an API call from the client.
+
+`pug@~3.0.0` has already been installed, and is listed as a dependency in your `package.json` file.
+
+Express needs to know which template engine you are using. We will use the `set` method to assign `pug` as the `view engine` property's value: `app.set('view engine', 'pug')`
+
+Your page will be blank until you correctly render the index file in the `views/pug` directory.
+
+To render the `pug` template, you need to use `res.render()` in the `/` route. Pass the file path to the `views/pug` directory as the argument to the method. The path can be a relative path (relative to views), or an absolute path, and does not require a file extension.
+
+If all went as planned, your app home page will no longer be blank and will display a message indicating you've successfully rendered the Pug template!
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/3515cd676ea4dfceab4e322f59a37791" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+Pug should be a dependency.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(
+        packJson.dependencies,
+        'pug',
+        'Your project should list "pug" as a dependency'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+View engine should be Pug.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /('|")view engine('|"),( |)('|")pug('|")/gi,
+        'Your project should set Pug as a view engine'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Use the correct ExpressJS method to render the index page from the response.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/').then(
+    (data) => {
+      assert.match(
+        data,
+        /FCC Advanced Node and Express/gi,
+        'You successfully rendered the Pug template!'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Pug should be working.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/').then(
+    (data) => {
+      assert.match(
+        data,
+        /pug-success-message/gi,
+        'Your projects home page should now be rendered by pug with the projects .pug file unaltered'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-passport.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-passport.md
new file mode 100644
index 00000000000..52d64d22cdc
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-passport.md
@@ -0,0 +1,130 @@
+---
+id: 5895f70cf9fc0f352b528e65
+title: Set up Passport
+challengeType: 2
+forumTopicId: 301565
+dashedName: set-up-passport
+---
+
+# --description--
+
+It's time to set up *Passport* so we can finally start allowing a user to register or login to an account! In addition to Passport, we will use Express-session to handle sessions. Express-session has a ton of advanced features you can use, but for now we're just going to use the basics! Using this middleware saves the session id as a cookie in the client and allows us to access the session data using that id on the server. This way we keep personal account information out of the cookie used by the client to verify to our server they are authenticated and just keep the *key* to access the data stored on the server.
+
+`passport@~0.4.1` and `express-session@~1.17.1` are already installed, and are both listed as dependencies in your `package.json` file.
+
+You will need to set up the session settings now and initialize Passport. Be sure to first create the variables 'session' and 'passport' to require 'express-session' and 'passport' respectively.
+
+To set up your express app to use the session we'll define just a few basic options. Be sure to add 'SESSION_SECRET' to your .env file and give it a random value. This is used to compute the hash used to encrypt your cookie!
+
+```js
+app.use(session({
+  secret: process.env.SESSION_SECRET,
+  resave: true,
+  saveUninitialized: true,
+  cookie: { secure: false }
+}));
+```
+
+As well you can go ahead and tell your express app to **use** 'passport.initialize()' and 'passport.session()'. (For example, `app.use(passport.initialize());`)
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/4068a7662a2f9f5d5011074397d6788c" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+Passport and Express-session should be dependencies.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(
+        packJson.dependencies,
+        'passport',
+        'Your project should list "passport" as a dependency'
+      );
+      assert.property(
+        packJson.dependencies,
+        'express-session',
+        'Your project should list "express-session" as a dependency'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Dependencies should be correctly required.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /require.*("|')passport("|')/gi,
+        'You should have required passport'
+      );
+      assert.match(
+        data,
+        /require.*("|')express-session("|')/gi,
+        'You should have required express-session'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Express app should use new dependencies.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /passport.initialize/gi,
+        'Your express app should use "passport.initialize()"'
+      );
+      assert.match(
+        data,
+        /passport.session/gi,
+        'Your express app should use "passport.session()"'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Session and session secret should be correctly set up.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /secret *: *process\.env(\.SESSION_SECRET|\[(?<q>"|')SESSION_SECRET\k<q>\])/g,
+        'Your express app should have express-session set up with your secret as process.env.SESSION_SECRET'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md
new file mode 100644
index 00000000000..853b0779305
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/set-up-the-environment.md
@@ -0,0 +1,148 @@
+---
+id: 589fc830f9fc0f352b528e74
+title: Set up the Environment
+challengeType: 2
+forumTopicId: 301566
+dashedName: set-up-the-environment
+---
+
+# --description--
+
+The following challenges will make use of the `chat.pug` file. So, in your `routes.js` file, add a GET route pointing to `/chat` which makes use of `ensureAuthenticated`, and renders `chat.pug`, with `{ user: req.user }` passed as an argument to the response. Now, alter your existing `/auth/github/callback` route to set the `req.session.user_id = req.user.id`, and redirect to `/chat`.
+
+`socket.io@~2.3.0` has already been added as a dependency, so require/instantiate it in your server as follows with `http` (comes built-in with Nodejs):
+
+```javascript
+const http = require('http').createServer(app);
+const io = require('socket.io')(http);
+```
+
+Now that the *http* server is mounted on the *express app*, you need to listen from the *http* server. Change the line with `app.listen` to `http.listen`.
+
+The first thing needing to be handled is listening for a new connection from the client. The <dfn>on</dfn> keyword does just that- listen for a specific event. It requires 2 arguments: a string containing the title of the event that's emitted, and a function with which the data is passed through. In the case of our connection listener, we use *socket* to define the data in the second argument. A socket is an individual client who is connected.
+
+To listen for connections to your server, add the following within your database connection:
+
+```javascript
+io.on('connection', socket => {
+  console.log('A user has connected');
+});
+```
+
+Now for the client to connect, you just need to add the following to your `client.js` which is loaded by the page after you've authenticated:
+
+```js
+/*global io*/
+let socket = io();
+```
+
+The comment suppresses the error you would normally see since 'io' is not defined in the file. We've already added a reliable CDN to the Socket.IO library on the page in chat.pug.
+
+Now try loading up your app and authenticate and you should see in your server console 'A user has connected'!
+
+**Note:**`io()` works only when connecting to a socket hosted on the same url/server. For connecting to an external socket hosted elsewhere, you would use `io.connect('URL');`.
+
+Submit your page when you think you've got it right. If you're running into errors, you can <a href="https://gist.github.com/camperbot/aae41cf59debc1a4755c9a00ee3859d1" target="_blank" rel="noopener noreferrer nofollow">check out the project completed up to this point</a>.
+
+# --hints--
+
+`socket.io` should be a dependency.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(
+        packJson.dependencies,
+        'socket.io',
+        'Your project should list "socket.io" as a dependency'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+You should correctly require and instantiate `http` as `http`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /http.*=.*require.*('|")http\1/gi,
+        'Your project should list "http" as a dependency'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+You should correctly require and instantiate `socket.io` as `io`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /io.*=.*require.*('|")socket.io\1.*http/gi,
+        'You should correctly require and instantiate socket.io as io.'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Socket.IO should be listening for connections.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /io.on.*('|")connection\1.*socket/gi,
+        'io should listen for "connection" and socket should be the 2nd arguments variable'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+Your client should connect to your server.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/public/client.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /socket.*=.*io/gi,
+        'Your client should be connection to server with the connection defined as socket'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md
new file mode 100644
index 00000000000..d7481da8931
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/advanced-node-and-express/use-a-template-engines-powers.md
@@ -0,0 +1,77 @@
+---
+id: 5895f70bf9fc0f352b528e64
+title: Use a Template Engine's Powers
+challengeType: 2
+forumTopicId: 301567
+dashedName: use-a-template-engines-powers
+---
+
+# --description--
+
+One of the greatest features of using a template engine is being able to pass variables from the server to the template file before rendering it to HTML.
+
+In your Pug file, you're able to use a variable by referencing the variable name as `#{variable_name}` inline with other text on an element or by using an equal sign on the element without a space such as `p=variable_name` which assigns the variable's value to the p element's text.
+
+ Pug is all about using whitespace and tabs to show nested elements and cutting down on the amount of code needed to make a beautiful site. Read the Pug documentation for more information on usage and syntax.
+
+ Here is an example:
+
+ ```html
+ <!--Typing this using Pug-->
+ head
+    script(type='text/javascript').
+      if (foo) bar(1 + 5);
+  body
+    if youAreUsingPug
+        p You are amazing
+      else
+        p Get on it!
+
+<!--will lead to creating this code-->
+  <head>
+    <script type="text/javascript">
+      if (foo) bar(1 + 5);
+    </script>
+  </head>
+  <body>
+    <p>You are amazing</p>
+  </body>
+  ```
+
+Looking at our pug file `index.pug` included in your project, we used the variables `title` and `message`.
+
+To pass those along from our server, you will need to add an object as a second argument to your `res.render` with the variables and their values. For example, pass this object along setting the variables for your index view: `{title: 'Hello', message: 'Please login'}`
+
+It should look like: `res.render(process.cwd() + '/views/pug/index', {title: 'Hello', message: 'Please login'});` Now refresh your page and you should see those values rendered in your view in the correct spot as laid out in your `index.pug` file!
+
+Submit your page when you think you've got it right. If you're running into errors, you can check out the <a href="https://gist.github.com/camperbot/4af125119ed36e6e6a8bb920db0c0871" target="_blank" rel="noopener noreferrer nofollow">project completed up to this point</a>.
+
+# --hints--
+
+Pug should correctly render variables.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/').then(
+    (data) => {
+      assert.match(
+        data,
+        /pug-variable("|')>Please login/gi,
+        'Your projects home page should now be rendered by pug with the projects .pug file unaltered'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md
new file mode 100644
index 00000000000..dce3842b690
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/assert-deep-equality-with-.deepequal-and-.notdeepequal.md
@@ -0,0 +1,79 @@
+---
+id: 587d824c367417b2b2512c4c
+title: Assert Deep Equality with .deepEqual and .notDeepEqual
+challengeType: 2
+forumTopicId: 301587
+dashedName: assert-deep-equality-with--deepequal-and--notdeepequal
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>  or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+`deepEqual()` asserts that two objects are deep equal.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#7` in the `Equality` suite, change each `assert` to either `assert.deepEqual` or `assert.notDeepEqual` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=6').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `deepEqual` vs. `notDeepEqual`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=6').then(
+    (data) => {
+      assert.equal(
+        data.assertions[0].method,
+        'deepEqual',
+        'The order of the keys does not matter'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `deepEqual` vs. `notDeepEqual`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=6').then(
+    (data) => {
+      assert.equal(
+        data.assertions[1].method,
+        'notDeepEqual',
+        'The position of elements within an array does matter'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md
new file mode 100644
index 00000000000..9f141e9c038
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/compare-the-properties-of-two-elements.md
@@ -0,0 +1,109 @@
+---
+id: 587d824c367417b2b2512c4d
+title: Compare the Properties of Two Elements
+challengeType: 2
+forumTopicId: 301588
+dashedName: compare-the-properties-of-two-elements
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#8` in the `Comparisons` suite, change each `assert` to either `assert.isAbove` or `assert.isAtMost` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `isAbove` vs. `isAtMost`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then(
+    (data) => {
+      assert.equal(
+        data.assertions[0].method,
+        'isAtMost',
+        '5 is at most (<=) 5'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `isAbove` vs. `isAtMost`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then(
+    (data) => {
+      assert.equal(data.assertions[1].method, 'isAbove', '1 is greater than 0');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the third assertion - `isAbove` vs. `isAtMost`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then(
+    (data) => {
+      assert.equal(
+        data.assertions[2].method,
+        'isAbove',
+        'Math.PI = 3.14159265 is greater than 3'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the fourth assertion - `isAbove` vs. `isAtMost`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=7').then(
+    (data) => {
+      assert.equal(
+        data.assertions[3].method,
+        'isAtMost',
+        '1 - Math.random() is > 0 and <= 1. It is atMost 1 !'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md
new file mode 100644
index 00000000000..cd9a19586d2
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/learn-how-javascript-assertions-work.md
@@ -0,0 +1,75 @@
+---
+id: 587d824a367417b2b2512c46
+title: Learn How JavaScript Assertions Work
+challengeType: 2
+forumTopicId: 301589
+dashedName: learn-how-javascript-assertions-work
+---
+
+# --description--
+
+Working on these challenges will involve you writing your code using one of the following methods:
+
+- Clone <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete these challenges locally.
+- Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete these challenges.
+- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#1` in the `Basic Assertions` suite, change each `assert` to either `assert.isNull` or `assert.isNotNull` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=0').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `isNull` vs. `isNotNull`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=0').then(
+    (data) => {
+      assert.equal(data.assertions[0].method, 'isNull', 'Null is null');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `isNull` vs. `isNotNull`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=0').then(
+    (data) => {
+      assert.equal(data.assertions[1].method, 'isNotNull', '1 is not null');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iii---put-method.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iii---put-method.md
new file mode 100644
index 00000000000..ce8f9f979d4
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iii---put-method.md
@@ -0,0 +1,148 @@
+---
+id: 587d824f367417b2b2512c5a
+title: Run Functional Tests on an API Response using Chai-HTTP III - PUT method
+challengeType: 2
+forumTopicId: 301590
+dashedName: run-functional-tests-on-an-api-response-using-chai-http-iii---put-method
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+When you test a `PUT` request, you'll often send data along with it. The data you include with your `PUT` request is called the body of the request.
+
+To send a `PUT` request and a JSON object to the `'/travellers'` endpoint, you can use `chai-http` plugin's `put` and `send` methods:
+
+```js
+chai
+  .request(server)
+  .put('/travellers')
+  .send({
+    "surname": [last name of a traveller of the past]
+  })
+  ...
+```
+
+And the route responds with:
+
+```json
+{
+  "name": [first name],
+  "surname": [last name],
+  "dates": [birth - death years]
+}
+```
+
+See the server code for the different responses to the `'/travellers'` endpoint.
+
+# --instructions--
+
+Within `tests/2_functional-tests.js`, alter the `'Send {surname: "Colombo"}'` test (`// #3`) and use the `put` and `send` methods to test the  `'/travellers'` endpoint.
+
+Send the following JSON object with your PUT request:
+
+```json
+{
+  "surname": "Colombo"
+}
+```
+
+Check for the following within the `request.end` callback:
+
+1.  The `status` should be `200`
+2.  The `type` should be `application/json`
+3.  The `body.name` should be `Cristoforo`
+4.  The `body.surname` should be `Colombo`
+
+Follow the assertion order above - we rely on it. Also, be sure to remove `assert.fail()` once complete.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=2').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should test for `res.status` to be 200.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=2').then(
+    (data) => {
+      assert.equal(data.assertions[0].method, 'equal');
+      assert.equal(data.assertions[0].args[0], 'res.status');
+      assert.equal(data.assertions[0].args[1], '200');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should test for `res.type` to be `'application/json'`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=2').then(
+    (data) => {
+      assert.equal(data.assertions[1].method, 'equal');
+      assert.equal(data.assertions[1].args[0], 'res.type');
+      assert.match(data.assertions[1].args[1], /('|")application\/json\1/);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should test for `res.body.name` to be `'Cristoforo'`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=2').then(
+    (data) => {
+      assert.equal(data.assertions[2].method, 'equal');
+      assert.equal(data.assertions[2].args[0], 'res.body.name');
+      assert.match(data.assertions[2].args[1], /('|")Cristoforo\1/);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should test for `res.body.surname` to be `'Colombo'`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=2').then(
+    (data) => {
+      assert.equal(data.assertions[3].method, 'equal');
+      assert.equal(data.assertions[3].args[0], 'res.body.surname');
+      assert.match(data.assertions[3].args[1], /('|")Colombo\1/);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iv---put-method.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iv---put-method.md
new file mode 100644
index 00000000000..5b62f40dfa4
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-an-api-response-using-chai-http-iv---put-method.md
@@ -0,0 +1,126 @@
+---
+id: 587d824f367417b2b2512c5b
+title: Run Functional Tests on an API Response using Chai-HTTP IV - PUT method
+challengeType: 2
+forumTopicId: 301591
+dashedName: run-functional-tests-on-an-api-response-using-chai-http-iv---put-method
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+This exercise is similar to the previous one.
+
+Now that you know how to test a `PUT` request, it's your turn to do it from scratch.
+
+# --instructions--
+
+Within `tests/2_functional-tests.js`, alter the `'Send {surname: "da Verrazzano"}'` test (`// #4`) and use the `put` and `send` methods to test the  `'/travellers'` endpoint.
+
+Send the following JSON object with your PUT request:
+
+```json
+{
+  "surname": "da Verrazzano"
+}
+```
+
+Check for the following within the `request.end` callback:
+
+1.  The `status` should be `200`
+2.  The `type` should be `application/json`
+3.  The `body.name` should be `Giovanni`
+4.  The `body.surname` should be `da Verrazzano`
+
+Follow the assertion order above - we rely on it. Also, be sure to remove `assert.fail()` once complete.
+
+# --hints--
+
+All tests should pass
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should test for `res.status` to be 200
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then(
+    (data) => {
+      assert.equal(data.assertions[0].method, 'equal');
+      assert.equal(data.assertions[0].args[0], 'res.status');
+      assert.equal(data.assertions[0].args[1], '200');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should test for `res.type` to be `'application/json'`
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then(
+    (data) => {
+      assert.equal(data.assertions[1].method, 'equal');
+      assert.equal(data.assertions[1].args[0], 'res.type');
+      assert.match(data.assertions[1].args[1], /('|")application\/json\1/);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should test for `res.body.name` to be `'Giovanni'`
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then(
+    (data) => {
+      assert.equal(data.assertions[2].method, 'equal');
+      assert.equal(data.assertions[2].args[0], 'res.body.name');
+      assert.match(data.assertions[2].args[1], /('|")Giovanni\1/);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should test for `res.body.surname` to be `'da Verrazzano'`
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=3').then(
+    (data) => {
+      assert.equal(data.assertions[3].method, 'equal');
+      assert.equal(data.assertions[3].args[0], 'res.body.surname');
+      assert.match(data.assertions[3].args[1], /('|")da Verrazzano\1/);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http-ii.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http-ii.md
new file mode 100644
index 00000000000..d5ef5fa8260
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http-ii.md
@@ -0,0 +1,75 @@
+---
+id: 587d824f367417b2b2512c59
+title: Run Functional Tests on API Endpoints using Chai-HTTP II
+challengeType: 2
+forumTopicId: 301592
+dashedName: run-functional-tests-on-api-endpoints-using-chai-http-ii
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+# --instructions--
+
+Within `tests/2_functional-tests.js`, alter the `'Test GET /hello with your name'` test (`// #2`) to assert the `status` and the `text` of the response to make the test pass.
+
+Send your name as a URL query by appending `?name=<your_name>` to the route. The endpoint responds with `'hello <your_name>'`.
+
+# --hints--
+
+All tests should pass
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=1').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should test for `res.status` == 200
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=1').then(
+    (data) => {
+      assert.equal(data.assertions[0].method, 'equal');
+      assert.equal(data.assertions[0].args[0], 'res.status');
+      assert.equal(data.assertions[0].args[1], '200');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should test for `res.text` == `'hello <your_name>'`
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=1').then(
+    (data) => {
+      assert.equal(data.assertions[1].method, 'equal');
+      assert.equal(data.assertions[1].args[0], 'res.text');
+      assert.match(data.assertions[1].args[1], /hello [\w\d_-]/);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http.md
new file mode 100644
index 00000000000..81d5a938d4e
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-on-api-endpoints-using-chai-http.md
@@ -0,0 +1,100 @@
+---
+id: 587d824e367417b2b2512c58
+title: Run Functional Tests on API Endpoints using Chai-HTTP
+challengeType: 2
+forumTopicId: 301593
+dashedName: run-functional-tests-on-api-endpoints-using-chai-http
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+Mocha allows you to test asynchronous operations like calls to API endpoints with a plugin called `chai-http`.
+
+The following is an example of a test using `chai-http` for a suite called `'GET /hello?name=[name] => "hello [name]"'`:
+
+```js
+suite('GET /hello?name=[name] => "hello [name]"', function () {
+  test('?name=John', function (done) {
+    chai
+      .request(server)
+      .get('/hello?name=John')
+      .end(function (err, res) {
+        assert.equal(res.status, 200, 'Response status should be 200');
+        assert.equal(res.text, 'hello John', 'Response should be "hello John"');
+        done();
+      });
+  });
+});
+```
+
+The test sends a `GET` request to the server with a name as a URL query string (`?name=John`). In the `end` method's callback function, the response object (`res`) is received and contains the `status` property.
+
+The first `assert.equal` checks if the status is equal to `200`. The second `assert.equal` checks that the response string (`res.text`) is equal to `"hello John"`.
+
+Also, notice the `done` parameter in the test's callback function. Calling it without an argument at the end of a test is necessary to signal that the asynchronous operation is complete.
+
+# --instructions--
+
+Within `tests/2_functional-tests.js`, alter the `'Test GET /hello with no name'` test (`// #1`) to assert the `status` and the `text` of the response to make the test pass. Do not alter the arguments passed to the asserts.
+
+There should be no URL query. Without a name URL query, the endpoint responds with `hello Guest`.
+
+# --hints--
+
+All tests should pass
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=0').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should test for `res.status` == 200
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=0').then(
+    (data) => {
+      assert.equal(data.assertions[0].method, 'equal');
+      assert.equal(data.assertions[0].args[0], 'res.status');
+      assert.equal(data.assertions[0].args[1], '200');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should test for `res.text` == `'hello Guest'`
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=0').then(
+    (data) => {
+      assert.equal(data.assertions[1].method, 'equal');
+      assert.equal(data.assertions[1].args[0], 'res.text');
+      assert.match(data.assertions[1].args[1], /('|")hello Guest\1/);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md
new file mode 100644
index 00000000000..548cb3c5258
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser-ii.md
@@ -0,0 +1,115 @@
+---
+id: 5f8884f4c46685731aabfc41
+title: Run Functional Tests Using a Headless Browser II
+challengeType: 2
+forumTopicId: 301594
+dashedName: run-functional-tests-using-a-headless-browser-ii
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+# --instructions--
+
+Within `tests/2_functional-tests.js`, in the `'Submit the surname "Vespucci" in the HTML form'` test (`// #6`), automate the following:
+
+1.  Fill in the form with the surname `Vespucci`
+2.  Press the submit button
+
+And within the `pressButton` callback:
+
+1.  Assert that status is OK `200`
+2.  Assert that the text inside the element `span#name` is `'Amerigo'`
+3.  Assert that the text inside the element `span#surname` is `'Vespucci'`
+4.  Assert that the element(s) `span#dates` exist and their count is `1`
+
+Do not forget to remove the `assert.fail()` call.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should assert that the headless browser request succeeded.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
+    (data) => {
+      assert.equal(data.assertions[0].method, 'browser.success');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should assert that the text inside the element `span#name` is `'Amerigo'`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
+    (data) => {
+      assert.equal(data.assertions[1].method, 'browser.text');
+      assert.match(data.assertions[1].args[0], /('|")span#name\1/);
+      assert.match(data.assertions[1].args[1], /('|")Amerigo\1/);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should assert that the text inside the element `span#surname` is `'Vespucci'`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
+    (data) => {
+      assert.equal(data.assertions[2].method, 'browser.text');
+      assert.match(data.assertions[2].args[0], /('|")span#surname\1/);
+      assert.match(data.assertions[2].args[1], /('|")Vespucci\1/);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should assert that the element `span#dates` exist and its count is 1.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=6').then(
+    (data) => {
+      assert.equal(data.assertions[3].method, 'browser.elements');
+      assert.match(data.assertions[3].args[0], /('|")span#dates\1/);
+      assert.equal(data.assertions[3].args[1], 1);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md
new file mode 100644
index 00000000000..64ace9d1e36
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/run-functional-tests-using-a-headless-browser.md
@@ -0,0 +1,148 @@
+---
+id: 587d8250367417b2b2512c5d
+title: Run Functional Tests Using a Headless Browser
+challengeType: 2
+forumTopicId: 301595
+dashedName: run-functional-tests-using-a-headless-browser
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+On the page there's an input form. It sends data to the `PUT /travellers` endpoint as an AJAX request.
+
+When the request successfully completes, the client code appends a `<div>` containing the information in the response to the DOM.
+
+Here's an example of how to use Zombie.js to interact with the form:
+
+```js
+test('Submit the surname "Polo" in the HTML form', function (done) {
+  browser.fill('surname', 'Polo').then(() => {
+    browser.pressButton('submit', () => {
+      browser.assert.success();
+      browser.assert.text('span#name', 'Marco');
+      browser.assert.text('span#surname', 'Polo');
+      browser.assert.elements('span#dates', 1);
+      done();
+    });
+  });
+});
+```
+
+First, the `fill` method of the `browser` object fills the `surname` field of the form with the value `'Polo'`. `fill` returns a promise, so `then` is chained off of it.
+
+Within the `then` callback, the `pressButton` method of the `browser` object is used to invoke the form's `submit` event listener. The `pressButton` method is asynchronous.
+
+Then, once a response is received from the AJAX request, a few assertions are made confirming:
+
+1.  The status of the response is `200`
+2.  The text within the `<span id='name'></span>` element matches `'Marco'`
+3.  The text within the `<span id='surname'></span>` element matches `'Polo'`
+4.  There is `1` `<span id='dates'></span>` element.
+
+Finally, the `done` callback is invoked, which is needed due to the asynchronous test.
+
+# --instructions--
+
+Within `tests/2_functional-tests.js`, in the `'Submit the surname "Colombo" in the HTML form'` test (`// #5`), automate the following:
+
+1.  Fill in the form with the surname `Colombo`
+2.  Press the submit button
+
+And within the `pressButton` callback:
+
+1.  Assert that status is OK `200`
+2.  Assert that the text inside the element `span#name` is `'Cristoforo'`
+3.  Assert that the text inside the element `span#surname` is `'Colombo'`
+4.  Assert that the element(s) `span#dates` exist and their count is `1`
+
+Do not forget to remove the `assert.fail()` call.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should assert that the headless browser request succeeded.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
+    (data) => {
+      assert.equal(data.assertions[0].method, 'browser.success');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should assert that the text inside the element `span#name` is `'Cristoforo'`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
+    (data) => {
+      assert.equal(data.assertions[1].method, 'browser.text');
+      assert.match(data.assertions[1].args[0], /('|")span#name\1/);
+      assert.match(data.assertions[1].args[1], /('|")Cristoforo\1/);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should assert that the text inside the element `span#surname` is `'Colombo'`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
+    (data) => {
+      assert.equal(data.assertions[2].method, 'browser.text');
+      assert.match(data.assertions[2].args[0], /('|")span#surname\1/);
+      assert.match(data.assertions[2].args[1], /('|")Colombo\1/);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should assert that the element `span#dates` exist and its count is 1.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=5').then(
+    (data) => {
+      assert.equal(data.assertions[3].method, 'browser.elements');
+      assert.match(data.assertions[3].args[0], /('|")span#dates\1/);
+      assert.equal(data.assertions[3].args[1], 1);
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md
new file mode 100644
index 00000000000..6257a4c6f20
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/simulate-actions-using-a-headless-browser.md
@@ -0,0 +1,72 @@
+---
+id: 587d824f367417b2b2512c5c
+title: Simulate Actions Using a Headless Browser
+challengeType: 2
+dashedName: simulate-actions-using-a-headless-browser
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+In the next challenges, you'll simulate human interaction with a page by using a headless browser.
+
+Headless browsers are web browsers without a GUI. They are able to render and interpret HTML, CSS, and JavaScript the same way a regular browser would, making them particularly useful for testing web pages.
+
+For the following challenges you'll use Zombie.js, which is a lightweight headless browser that doesn't rely on additional binaries to be installed. This feature makes it usable in limited environments like Replit. But there are many other, more powerful headless browser options.
+
+Mocha allows you to run some code before any of the actual tests run. This can be useful to do things like add entries to a database which will be used in the rest of the tests.
+
+With a headless browser, before running tests, you need to **visit** the page you'll test.
+
+The `suiteSetup` hook is executed only once at the beginning of a test suite.
+
+There are several other hook types that can execute code before each test, after each test, or at the end of a test suite. See the Mocha docs for more information.
+
+# --instructions--
+
+Within `tests/2_functional-tests.js`, immediately after the `Browser` declaration, add your project URL to the `site` property of the variable:
+
+```js
+Browser.site = 'https://boilerplate-mochachai.your-username.repl.co'; // Your URL here
+```
+
+Then at the root level of the `'Functional Tests with Zombie.js'` suite, instantiate a new instance of the `Browser` object with the following code:
+
+```js
+const browser = new Browser();
+```
+
+And use the `suiteSetup` hook to direct the `browser` to the `/` route with the following code:
+
+```js
+suiteSetup(function(done) {
+  return browser.visit('/', done);
+});
+```
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=functional&n=4').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md
new file mode 100644
index 00000000000..3701b31bc01
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-for-truthiness.md
@@ -0,0 +1,101 @@
+---
+id: 587d824b367417b2b2512c49
+title: Test for Truthiness
+challengeType: 2
+forumTopicId: 301596
+dashedName: test-for-truthiness
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+`isTrue()` will test for the boolean value `true` and `isNotTrue()` will pass when given anything but the boolean value of `true`.
+
+```js
+assert.isTrue(true, 'This will pass with the boolean value true');
+assert.isTrue('true', 'This will NOT pass with the string value "true"');
+assert.isTrue(1, 'This will NOT pass with the number value 1');
+```
+
+`isFalse()` and `isNotFalse()` also exist, and behave similarly to their true counterparts except they look for the boolean value of `false`.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#4` in the `Basic Assertions` suite, change each `assert` to either `assert.isTrue` or `assert.isNotTrue` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=3').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `isTrue` vs. `isNotTrue`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=3').then(
+    (data) => {
+      assert.equal(data.assertions[0].method, 'isTrue', 'True is true');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `isTrue` vs. `isNotTrue`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=3').then(
+    (data) => {
+      assert.equal(
+        data.assertions[1].method,
+        'isTrue',
+        'Double negation of a truthy value is true'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the third assertion - `isTrue` vs. `isNotTrue`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=3').then(
+    (data) => {
+      assert.equal(
+        data.assertions[2].method,
+        'isNotTrue',
+        'A truthy object is not true - neither is a false one'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md
new file mode 100644
index 00000000000..fca2f5c03fa
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-string-contains-a-substring.md
@@ -0,0 +1,79 @@
+---
+id: 587d824d367417b2b2512c53
+title: Test if a String Contains a Substring
+challengeType: 2
+forumTopicId: 301597
+dashedName: test-if-a-string-contains-a-substring
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+`include()` and `notInclude()` work for strings too! `include()` asserts that the actual string contains the expected substring.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#14` in the `Strings` suite, change each `assert` to either `assert.include` or `assert.notInclude` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=13').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `include` vs. `notInclude`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=13').then(
+    (data) => {
+      assert.equal(
+        data.assertions[0].method,
+        'include',
+        "'Arrow' contains 'row'..."
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `include` vs. `notInclude`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=13').then(
+    (data) => {
+      assert.equal(
+        data.assertions[1].method,
+        'notInclude',
+        "... a 'dart' doesn't contain a 'queue'"
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md
new file mode 100644
index 00000000000..9a4011b0a3f
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-falls-within-a-specific-range.md
@@ -0,0 +1,87 @@
+---
+id: 587d824c367417b2b2512c4f
+title: Test if a Value Falls within a Specific Range
+challengeType: 2
+forumTopicId: 301598
+dashedName: test-if-a-value-falls-within-a-specific-range
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+```javascript
+.approximately(actual, expected, delta, [message])
+```
+
+Asserts that the `actual` is equal to `expected`, to within a +/- `delta` range.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#10` in the `Comparisons` suite, change each `assert` to `assert.approximately` to make the test pass (should evaluate to `true`).
+
+Choose the minimum range (3rd parameter) to make the test always pass. It should be less than 1.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=9').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct range for the first assertion - `approximately(actual, expected, range)`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=9').then(
+    (data) => {
+      assert.equal(data.assertions[0].method, 'approximately');
+      assert.equal(
+        data.assertions[0].args[2],
+        0.5,
+        "weirdNumbers(0.5) is in the range (0.5, 1.5]. It's within 1 +/- 0.5"
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct range for the second assertion - `approximately(actual, expected, range)`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=9').then(
+    (data) => {
+      assert.equal(data.assertions[1].method, 'approximately');
+      assert.equal(
+        data.assertions[1].args[2],
+        0.8,
+        "weirdNumbers(0.2) is in the range (0.2, 1.2]. It's within 1 +/- 0.8"
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md
new file mode 100644
index 00000000000..ed496b279de
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-a-string.md
@@ -0,0 +1,93 @@
+---
+id: 587d824d367417b2b2512c52
+title: Test if a Value is a String
+challengeType: 2
+forumTopicId: 301599
+dashedName: test-if-a-value-is-a-string
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+`isString` or `isNotString` asserts that the actual value is a string.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#13` in the `Strings` suite, change each `assert` to either `assert.isString` or `assert.isNotString` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=12').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `isString` vs. `isNotString`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=12').then(
+    (data) => {
+      assert.equal(
+        data.assertions[0].method,
+        'isNotString',
+        'A float number is not a string'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `isString` vs. `isNotString`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=12').then(
+    (data) => {
+      assert.equal(
+        data.assertions[1].method,
+        'isString',
+        'environment vars are strings (or undefined)'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the third assertion - `isString` vs. `isNotString`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=12').then(
+    (data) => {
+      assert.equal(data.assertions[2].method, 'isString', 'A JSON is a string');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md
new file mode 100644
index 00000000000..33494f9018f
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-an-array.md
@@ -0,0 +1,77 @@
+---
+id: 587d824d367417b2b2512c50
+title: Test if a Value is an Array
+challengeType: 2
+forumTopicId: 301600
+dashedName: test-if-a-value-is-an-array
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#11` in the `Arrays` suite, change each `assert` to either `assert.isArray` or `assert.isNotArray` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=10').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `isArray` vs. `isNotArray`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=10').then(
+    (data) => {
+      assert.equal(
+        data.assertions[0].method,
+        'isArray',
+        'String.prototype.split() returns an Array'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `isArray` vs. `isNotArray`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=10').then(
+    (data) => {
+      assert.equal(
+        data.assertions[1].method,
+        'isNotArray',
+        'Array.prototype.indexOf() returns a number'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md
new file mode 100644
index 00000000000..ec0a6859699
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-value-is-of-a-specific-data-structure-type.md
@@ -0,0 +1,133 @@
+---
+id: 587d824e367417b2b2512c56
+title: Test if a Value is of a Specific Data Structure Type
+challengeType: 2
+forumTopicId: 301601
+dashedName: test-if-a-value-is-of-a-specific-data-structure-type
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+`#typeOf` asserts that value's type is the given string, as determined by `Object.prototype.toString`.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#17` in the `Objects` suite, change each `assert` to either `assert.typeOf` or `assert.notTypeOf` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `typeOf` vs. `notTypeOf`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then(
+    (data) => {
+      assert.equal(
+        data.assertions[0].method,
+        'typeOf',
+        'myCar is typeOf Object'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `typeOf` vs. `notTypeOf`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then(
+    (data) => {
+      assert.equal(
+        data.assertions[1].method,
+        'typeOf',
+        'Car.model is a String'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the third assertion - `typeOf` vs. `notTypeOf`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then(
+    (data) => {
+      assert.equal(
+        data.assertions[2].method,
+        'notTypeOf',
+        'Plane.wings is a Number (not a String)'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the fourth assertion - `typeOf` vs. `notTypeOf`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then(
+    (data) => {
+      assert.equal(
+        data.assertions[3].method,
+        'typeOf',
+        'Plane.engines is an Array'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the fifth assertion - `typeOf` vs. `notTypeOf`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=16').then(
+    (data) => {
+      assert.equal(
+        data.assertions[4].method,
+        'typeOf',
+        'Car.wheels is a Number'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md
new file mode 100644
index 00000000000..ee0ccb85d39
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-a-variable-or-function-is-defined.md
@@ -0,0 +1,95 @@
+---
+id: 587d824b367417b2b2512c47
+title: Test if a Variable or Function is Defined
+challengeType: 2
+forumTopicId: 301602
+dashedName: test-if-a-variable-or-function-is-defined
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#2` in the `Basic Assertions` suite, change each `assert` to either `assert.isDefined()` or `assert.isUndefined()` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=1').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `isDefined` vs. `isUndefined`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=1').then(
+    (data) => {
+      assert.equal(
+        data.assertions[0].method,
+        'isDefined',
+        'Null is not undefined'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `isDefined` vs. `isUndefined`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=1').then(
+    (data) => {
+      assert.equal(
+        data.assertions[1].method,
+        'isUndefined',
+        'Undefined is undefined'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the third assertion - `isDefined` vs. `isUndefined`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=1').then(
+    (data) => {
+      assert.equal(
+        data.assertions[2].method,
+        'isDefined',
+        'A string is not undefined'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md
new file mode 100644
index 00000000000..d82e11e7d65
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-array-contains-an-item.md
@@ -0,0 +1,77 @@
+---
+id: 587d824d367417b2b2512c51
+title: Test if an Array Contains an Item
+challengeType: 2
+forumTopicId: 301603
+dashedName: test-if-an-array-contains-an-item
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#12` in the `Arrays` suite, change each `assert` to either `assert.include` or `assert.notInclude` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=11').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `include` vs. `notInclude`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=11').then(
+    (data) => {
+      assert.equal(
+        data.assertions[0].method,
+        'notInclude',
+        "It's summer in july..."
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `include` vs. `notInclude`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=11').then(
+    (data) => {
+      assert.equal(
+        data.assertions[1].method,
+        'include',
+        'JavaScript is a backend language !!'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md
new file mode 100644
index 00000000000..91eb9dc3687
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-has-a-property.md
@@ -0,0 +1,93 @@
+---
+id: 587d824e367417b2b2512c55
+title: Test if an Object has a Property
+challengeType: 2
+forumTopicId: 301604
+dashedName: test-if-an-object-has-a-property
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+`property` asserts that the actual object has a given property.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#16` in the `Objects` suite, change each `assert` to either `assert.property` or `assert.notProperty` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=15').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `property` vs. `notProperty`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=15').then(
+    (data) => {
+      assert.equal(
+        data.assertions[0].method,
+        'notProperty',
+        'A car has not wings'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `property` vs. `notProperty`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=15').then(
+    (data) => {
+      assert.equal(
+        data.assertions[1].method,
+        'property',
+        'planes have engines'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the third assertion - `property` vs. `notProperty`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=15').then(
+    (data) => {
+      assert.equal(data.assertions[2].method, 'property', 'Cars have wheels');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md
new file mode 100644
index 00000000000..946c69cfe43
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-an-object-is-an-instance-of-a-constructor.md
@@ -0,0 +1,115 @@
+---
+id: 587d824e367417b2b2512c57
+title: Test if an Object is an Instance of a Constructor
+challengeType: 2
+forumTopicId: 301605
+dashedName: test-if-an-object-is-an-instance-of-a-constructor
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+`#instanceOf` asserts that an object is an instance of a constructor.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#18` in the `Objects` suite, change each `assert` to either `assert.instanceOf` or `assert.notInstanceOf` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `instanceOf` vs. `notInstanceOf`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then(
+    (data) => {
+      assert.equal(
+        data.assertions[0].method,
+        'notInstanceOf',
+        'myCar is not an instance of Plane'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `instanceOf` vs. `notInstanceOf`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then(
+    (data) => {
+      assert.equal(
+        data.assertions[1].method,
+        'instanceOf',
+        'airlinePlane is an instance of Plane'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the third assertion - `instanceOf` vs. `notInstanceOf`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then(
+    (data) => {
+      assert.equal(
+        data.assertions[2].method,
+        'instanceOf',
+        'everything is an Object in JavaScript...'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the fourth assertion - `instanceOf` vs. `notInstanceOf`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=17').then(
+    (data) => {
+      assert.equal(
+        data.assertions[3].method,
+        'notInstanceOf',
+        'myCar.wheels is not an instance of String'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md
new file mode 100644
index 00000000000..a9fccf8d399
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/test-if-one-value-is-below-or-at-least-as-large-as-another.md
@@ -0,0 +1,109 @@
+---
+id: 587d824c367417b2b2512c4e
+title: Test if One Value is Below or At Least as Large as Another
+challengeType: 2
+forumTopicId: 301606
+dashedName: test-if-one-value-is-below-or-at-least-as-large-as-another
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#9` in the `Comparisons` suite, change each `assert` to either `assert.isBelow` or `assert.isAtLeast` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `isBelow` vs. `isAtLeast`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then(
+    (data) => {
+      assert.equal(
+        data.assertions[0].method,
+        'isAtLeast',
+        '5 is at least (>=) 5'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `isBelow` vs. `isAtLeast`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then(
+    (data) => {
+      assert.equal(
+        data.assertions[1].method,
+        'isAtLeast',
+        '2 * Math.random() is at least 0'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the third assertion - `isBelow` vs. `isAtLeast`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then(
+    (data) => {
+      assert.equal(data.assertions[2].method, 'isBelow', '1 is smaller than 2');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the fourth assertion - `isBelow` vs. `isAtLeast`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=8').then(
+    (data) => {
+      assert.equal(
+        data.assertions[3].method,
+        'isBelow',
+        '2/3 (0.6666) is smaller than 1'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md
new file mode 100644
index 00000000000..ee9e6d2146c
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-assert.isok-and-assert.isnotok.md
@@ -0,0 +1,87 @@
+---
+id: 587d824b367417b2b2512c48
+title: Use Assert.isOK and Assert.isNotOK
+challengeType: 2
+forumTopicId: 301607
+dashedName: use-assert-isok-and-assert-isnotok
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+`isOk()` will test for a truthy value, and `isNotOk()` will test for a falsy value.
+
+To learn more about truthy and falsy values, try our <a href="https://www.freecodecamp.org/learn/javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer" target="_blank" rel="noopener noreferrer nofollow">Falsy Bouncer</a> challenge.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#3` in the `Basic Assertions` suite, change each `assert` to either `assert.isOk()` or `assert.isNotOk()` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=2').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `isOk` vs. `isNotOk`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=2').then(
+    (data) => {
+      assert.equal(data.assertions[0].method, 'isNotOk', 'Null is falsy');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `isOk` vs. `isNotOk`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=2').then(
+    (data) => {
+      assert.equal(data.assertions[1].method, 'isOk', 'A string is truthy');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the third assertion - `isOk` vs. `isNotOk`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=2').then(
+    (data) => {
+      assert.equal(data.assertions[2].method, 'isOk', 'true is truthy');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md
new file mode 100644
index 00000000000..2d85d68d696
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-regular-expressions-to-test-a-string.md
@@ -0,0 +1,79 @@
+---
+id: 587d824d367417b2b2512c54
+title: Use Regular Expressions to Test a String
+challengeType: 2
+forumTopicId: 301608
+dashedName: use-regular-expressions-to-test-a-string
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+`match()` asserts that the actual value matches the second argument regular expression.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#15` in the `Strings` suite, change each `assert` to either `assert.match` or `assert.notMatch` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=14').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `match` vs. `notMatch`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=14').then(
+    (data) => {
+      assert.equal(
+        data.assertions[0].method,
+        'match',
+        "'# name:John Doe, age:35' matches the regex"
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `match` vs. `notMatch`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=14').then(
+    (data) => {
+      assert.equal(
+        data.assertions[1].method,
+        'notMatch',
+        "'# name:Paul Smith III, age:twenty-four' does not match the regex (the age must be numeric)"
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-double-equals-to-assert-equality.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-double-equals-to-assert-equality.md
new file mode 100644
index 00000000000..fea760205f1
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-double-equals-to-assert-equality.md
@@ -0,0 +1,111 @@
+---
+id: 587d824b367417b2b2512c4a
+title: Use the Double Equals to Assert Equality
+challengeType: 2
+forumTopicId: 301609
+dashedName: use-the-double-equals-to-assert-equality
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+`equal()` compares objects using `==`.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#5` in the `Equality` suite, change each `assert` to either `assert.equal` or `assert.notEqual` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `equal` vs. `notEqual`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then(
+    (data) => {
+      assert.equal(
+        data.assertions[0].method,
+        'equal',
+        'Numbers are coerced into strings with == '
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `equal` vs. `notEqual`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then(
+    (data) => {
+      assert.equal(
+        data.assertions[1].method,
+        'notEqual',
+        ' == compares object references'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the third assertion - `equal` vs. `notEqual`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then(
+    (data) => {
+      assert.equal(
+        data.assertions[2].method,
+        'equal',
+        "6 * '2' is 12 ! It should be equal to '12'"
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the fourth assertion - `equal` vs. `notEqual`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=4').then(
+    (data) => {
+      assert.equal(data.assertions[3].method, 'notEqual', "6 + '2' is '62'...");
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md
new file mode 100644
index 00000000000..018f7a23f18
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-and-testing-with-chai/use-the-triple-equals-to-assert-strict-equality.md
@@ -0,0 +1,111 @@
+---
+id: 587d824b367417b2b2512c4b
+title: Use the Triple Equals to Assert Strict Equality
+challengeType: 2
+forumTopicId: 301610
+dashedName: use-the-triple-equals-to-assert-strict-equality
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-mochachai" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-mochachai/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+`strictEqual()` compares objects using `===`.
+
+# --instructions--
+
+Within `tests/1_unit-tests.js` under the test labelled `#6` in the `Equality` suite, change each `assert` to either `assert.strictEqual` or `assert.notStrictEqual` to make the test pass (should evaluate to `true`). Do not alter the arguments passed to the asserts.
+
+# --hints--
+
+All tests should pass.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then(
+    (data) => {
+      assert.equal(data.state, 'passed');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the first assertion - `strictEqual` vs. `notStrictEqual`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then(
+    (data) => {
+      assert.equal(
+        data.assertions[0].method,
+        'notStrictEqual',
+        'with strictEqual the type must match'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the second assertion - `strictEqual` vs. `notStrictEqual`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then(
+    (data) => {
+      assert.equal(data.assertions[1].method, 'strictEqual', '3*2 = 6...');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the third assertion - `strictEqual` vs. `notStrictEqual`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then(
+    (data) => {
+      assert.equal(
+        data.assertions[2].method,
+        'strictEqual',
+        "6 * '2' is 12. Types match !"
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+You should choose the correct method for the fourth assertion - `strictEqual` vs. `notStrictEqual`.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/get-tests?type=unit&n=5').then(
+    (data) => {
+      assert.equal(
+        data.assertions[3].method,
+        'notStrictEqual',
+        'Even if they have the same elements, the Arrays are notStrictEqual'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/american-british-translator.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/american-british-translator.md
new file mode 100644
index 00000000000..1ded4cbdef6
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/american-british-translator.md
@@ -0,0 +1,337 @@
+---
+id: 5e601c0d5ac9d0ecd8b94afe
+title: American British Translator
+challengeType: 4
+forumTopicId: 462358
+dashedName: american-british-translator
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://american-british-translator.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://american-british-translator.freecodecamp.rocks/</a>. Working on this project will involve you writing your code using one of the following methods:
+
+-   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-american-british-english-translator/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
+-   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-american-british-english-translator" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --instructions--
+
+-   All logic can go into `/components/translator.js`
+-   Complete the `/api/translate` route in `/routes/api.js`
+-   Create all of the unit/functional tests in `tests/1_unit-tests.js` and `tests/2_functional-tests.js`
+-   See the JavaScript files in `/components` for the different spelling and terms your application should translate
+-   To run the tests on Replit, set `NODE_ENV` to `test` without quotes in the `.env` file
+-   To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell"
+
+Write the following tests in `tests/1_unit-tests.js`:
+
+-   Translate `Mangoes are my favorite fruit.` to British English
+-   Translate `I ate yogurt for breakfast.` to British English
+-   Translate `We had a party at my friend's condo.` to British English
+-   Translate `Can you toss this in the trashcan for me?` to British English
+-   Translate `The parking lot was full.` to British English
+-   Translate `Like a high tech Rube Goldberg machine.` to British English
+-   Translate `To play hooky means to skip class or work.` to British English
+-   Translate `No Mr. Bond, I expect you to die.` to British English
+-   Translate `Dr. Grosh will see you now.` to British English
+-   Translate `Lunch is at 12:15 today.` to British English
+-   Translate `We watched the footie match for a while.` to American English
+-   Translate `Paracetamol takes up to an hour to work.` to American English
+-   Translate `First, caramelise the onions.` to American English
+-   Translate `I spent the bank holiday at the funfair.` to American English
+-   Translate `I had a bicky then went to the chippy.` to American English
+-   Translate `I've just got bits and bobs in my bum bag.` to American English
+-   Translate `The car boot sale at Boxted Airfield was called off.` to American English
+-   Translate `Have you met Mrs Kalyani?` to American English
+-   Translate `Prof Joyner of King's College, London.` to American English
+-   Translate `Tea time is usually around 4 or 4.30.` to American English
+-   Highlight translation in `Mangoes are my favorite fruit.`
+-   Highlight translation in `I ate yogurt for breakfast.`
+-   Highlight translation in `We watched the footie match for a while.`
+-   Highlight translation in `Paracetamol takes up to an hour to work.`
+
+Write the following tests in `tests/2_functional-tests.js`:
+
+-   Translation with text and locale fields: POST request to `/api/translate`
+-   Translation with text and invalid locale field: POST request to `/api/translate`
+-   Translation with missing text field: POST request to `/api/translate`
+-   Translation with missing locale field: POST request to `/api/translate`
+-   Translation with empty text: POST request to `/api/translate`
+-   Translation with text that needs no translation: POST request to `/api/translate`
+
+# --hints--
+
+I can provide my own project, not the example URL.
+
+```js
+(getUserInput) => {
+  assert(
+    !/.*\/american-british-translator\.freecodecamp\.rocks/.test(
+      getUserInput('url')
+    )
+  );
+};
+```
+
+You can `POST` to `/api/translate` with a body containing `text` with the text to translate and `locale` with either `american-to-british` or `british-to-american`. The returned object should contain the submitted `text` and `translation` with the translated text.
+
+```js
+async (getUserInput) => {
+  try {
+    const text = 'Mangoes are my favorite fruit.';
+    const locale = 'american-to-british';
+    const output = {
+      text: 'Mangoes are my favorite fruit.',
+      translation:
+        'Mangoes are my <span class="highlight">favourite</span> fruit.'
+    };
+    let data = await fetch(getUserInput('url') + '/api/translate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text, locale })
+    });
+    let parsed = await data.json();
+    assert.isObject(parsed);
+    assert.property(parsed, 'text');
+    assert.property(parsed, 'translation');
+    assert.deepEqual(parsed, output);
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+The `/api/translate` route should handle the way time is written in American and British English. For example, ten thirty is written as "10.30" in British English and "10:30" in American English. The `span` element should wrap the entire time string, i.e. `<span class="highlight">10:30</span>`.
+
+```js
+async (getUserInput) => {
+  try {
+    const text = 'Lunch is at 12:15 today.';
+    const locale = 'american-to-british';
+    const output = {
+      text: text,
+      translation: 'Lunch is at <span class="highlight">12.15</span> today.'
+    };
+    let data = await fetch(getUserInput('url') + '/api/translate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text, locale })
+    });
+    let parsed = await data.json();
+    assert.isObject(parsed);
+    assert.property(parsed, 'text');
+    assert.property(parsed, 'translation');
+    assert.deepEqual(parsed, output);
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+The `/api/translate` route should also handle the way titles/honorifics are abbreviated in American and British English. For example, Doctor Wright is abbreviated as "Dr Wright" in British English and "Dr. Wright" in American English. See `/components/american-to-british-titles.js` for the different titles your application should handle.
+
+```js
+async (getUserInput) => {
+  try {
+    const text = 'Dr. Grosh will see you now.';
+    const locale = 'american-to-british';
+    const output = {
+      text: text,
+      translation: '<span class="highlight">Dr</span> Grosh will see you now.'
+    };
+    let data = await fetch(getUserInput('url') + '/api/translate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text, locale })
+    });
+    let parsed = await data.json();
+    assert.isObject(parsed);
+    assert.property(parsed, 'text');
+    assert.property(parsed, 'translation');
+    assert.deepEqual(parsed, output);
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+Wrap any translated spelling or terms with `<span class="highlight">...</span>` tags so they appear in green.
+
+```js
+async (getUserInput) => {
+  try {
+    const text = 'Mangoes are my favorite fruit.';
+    const locale = 'american-to-british';
+    const output = {
+      text: 'Mangoes are my favorite fruit.',
+      translation:
+        'Mangoes are my <span class="highlight">favourite</span> fruit.'
+    };
+    let data = await fetch(getUserInput('url') + '/api/translate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text, locale })
+    });
+    let parsed = await data.json();
+    assert.isObject(parsed);
+    assert.property(parsed, 'text');
+    assert.property(parsed, 'translation');
+    assert.deepEqual(parsed, output);
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+If one or more of the required fields is missing, return `{ error: 'Required field(s) missing' }`.
+
+```js
+async (getUserInput) => {
+  try {
+    const locale = 'american-to-british';
+    let data = await fetch(getUserInput('url') + '/api/translate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ locale })
+    });
+    let parsed = await data.json();
+    assert.isObject(parsed);
+    assert.property(parsed, 'error');
+    assert.equal(parsed.error, 'Required field(s) missing');
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+If `text` is empty, return `{ error: 'No text to translate' }`
+
+```js
+async (getUserInput) => {
+  try {
+    const locale = 'american-to-british';
+    let data = await fetch(getUserInput('url') + '/api/translate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text: '', locale })
+    });
+    let parsed = await data.json();
+    assert.isObject(parsed);
+    assert.property(parsed, 'error');
+    assert.equal(parsed.error, 'No text to translate');
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+If `locale` does not match one of the two specified locales, return `{ error: 'Invalid value for locale field' }`.
+
+```js
+async (getUserInput) => {
+  try {
+    const text = "Ceci n'est pas une pipe";
+    const locale = 'french-to-american';
+    let data = await fetch(getUserInput('url') + '/api/translate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text, locale })
+    });
+    let parsed = await data.json();
+    assert.isObject(parsed);
+    assert.property(parsed, 'error');
+    assert.equal(parsed.error, 'Invalid value for locale field');
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+If `text` requires no translation, return `"Everything looks good to me!"` for the `translation` value.
+
+```js
+async (getUserInput) => {
+  try {
+    const locale = 'british-to-american';
+    const output = {
+      text: 'SaintPeter and nhcarrigan give their regards!',
+      translation: 'Everything looks good to me!'
+    };
+    let data = await fetch(getUserInput('url') + '/api/translate', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ text: output.text, locale })
+    });
+    let parsed = await data.json();
+    assert.isObject(parsed);
+    assert.isObject(parsed);
+    assert.property(parsed, 'text');
+    assert.property(parsed, 'translation');
+    assert.deepEqual(parsed, output);
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+All 24 unit tests are complete and passing. See `/tests/1_unit-tests.js` for the expected behavior you should write tests for.
+
+```js
+async (getUserInput) => {
+  try {
+    const getTests = await $.get(getUserInput('url') + '/_api/get-tests');
+    assert.isArray(getTests);
+    const unitTests = getTests.filter((test) => {
+      return !!test.context.match(/Unit Tests/gi);
+    });
+    assert.isAtLeast(unitTests.length, 24, 'At least 24 tests passed');
+    unitTests.forEach((test) => {
+      assert.equal(test.state, 'passed', 'Tests in Passed State');
+      assert.isAtLeast(
+        test.assertions.length,
+        1,
+        'At least one assertion per test'
+      );
+    });
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+All 6 functional tests are complete and passing. See `/tests/2_functional-tests.js` for the functionality you should write tests for.
+
+```js
+async (getUserInput) => {
+  try {
+    const getTests = await $.get(getUserInput('url') + '/_api/get-tests');
+    assert.isArray(getTests);
+    const functTests = getTests.filter((test) => {
+      return !!test.context.match(/Functional Tests/gi);
+    });
+    assert.isAtLeast(functTests.length, 6, 'At least 6 tests passed');
+    functTests.forEach((test) => {
+      assert.equal(test.state, 'passed', 'Tests in Passed State');
+      assert.isAtLeast(
+        test.assertions.length,
+        1,
+        'At least one assertion per test'
+      );
+    });
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions,
+  because they would need to be tested against a full working project.
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/issue-tracker.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/issue-tracker.md
new file mode 100644
index 00000000000..60bb4fab958
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/issue-tracker.md
@@ -0,0 +1,369 @@
+---
+id: 587d8249367417b2b2512c42
+title: Issue Tracker
+challengeType: 4
+forumTopicId: 301569
+dashedName: issue-tracker
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://issue-tracker.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://issue-tracker.freecodecamp.rocks/</a>. Working on this project will involve you writing your code using one of the following methods:
+
+-   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-issuetracker/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
+-   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-issuetracker" target="_blank" rel="noopener noreferrer nofollow">this Replit starter project</a> to complete your project.
+-   Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --instructions--
+
+-   Complete the necessary routes in `/routes/api.js`
+-   Create all of the functional tests in `tests/2_functional-tests.js`
+-   Copy the `sample.env` file to `.env` and set the variables appropriately
+-   To run the tests uncomment `NODE_ENV=test` in your `.env` file
+-   To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell"
+
+Write the following tests in `tests/2_functional-tests.js`:
+
+-   Create an issue with every field: POST request to `/api/issues/{project}`
+-   Create an issue with only required fields: POST request to `/api/issues/{project}`
+-   Create an issue with missing required fields: POST request to `/api/issues/{project}`
+-   View issues on a project: GET request to `/api/issues/{project}`
+-   View issues on a project with one filter: GET request to `/api/issues/{project}`
+-   View issues on a project with multiple filters: GET request to `/api/issues/{project}`
+-   Update one field on an issue: PUT request to `/api/issues/{project}`
+-   Update multiple fields on an issue: PUT request to `/api/issues/{project}`
+-   Update an issue with missing `_id`: PUT request to `/api/issues/{project}`
+-   Update an issue with no fields to update: PUT request to `/api/issues/{project}`
+-   Update an issue with an invalid `_id`: PUT request to `/api/issues/{project}`
+-   Delete an issue: DELETE request to `/api/issues/{project}`
+-   Delete an issue with an invalid `_id`: DELETE request to `/api/issues/{project}`
+-   Delete an issue with missing `_id`: DELETE request to `/api/issues/{project}`
+
+# --hints--
+
+You can provide your own project, not the example URL.
+
+```js
+(getUserInput) => {
+  assert(!/.*\/issue-tracker\.freecodecamp\.rocks/.test(getUserInput('url')));
+};
+```
+
+You can send a `POST` request to `/api/issues/{projectname}` with form data containing the required fields `issue_title`, `issue_text`, `created_by`, and optionally `assigned_to` and `status_text`.
+
+```js
+async (getUserInput) => {
+  try {
+    let test_data = {
+      issue_title: 'Faux Issue Title',
+      issue_text: 'Functional Test - Required Fields Only',
+      created_by: 'fCC'
+    };
+    const data = await $.post(
+      getUserInput('url') + '/api/issues/fcc-project',
+      test_data
+    );
+    assert.isObject(data);
+    assert.nestedInclude(data, test_data);
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+The `POST` request to `/api/issues/{projectname}` will return the created object, and must include all of the submitted fields. Excluded optional fields will be returned as empty strings. Additionally, include `created_on` (date/time), `updated_on` (date/time), `open` (boolean, `true` for open - default value, `false` for closed), and `_id`.
+
+```js
+async (getUserInput) => {
+  try {
+    let test_data = {
+      issue_title: 'Faux Issue Title 2',
+      issue_text: 'Functional Test - Every field filled in',
+      created_by: 'fCC',
+      assigned_to: 'Chai and Mocha'
+    };
+    const data = await $.post(
+      getUserInput('url') + '/api/issues/fcc-project',
+      test_data
+    );
+    assert.isObject(data);
+    assert.nestedInclude(data, test_data);
+    assert.property(data, 'created_on');
+    assert.isNumber(Date.parse(data.created_on));
+    assert.property(data, 'updated_on');
+    assert.isNumber(Date.parse(data.updated_on));
+    assert.property(data, 'open');
+    assert.isBoolean(data.open);
+    assert.isTrue(data.open);
+    assert.property(data, '_id');
+    assert.isNotEmpty(data._id);
+    assert.property(data, 'status_text');
+    assert.isEmpty(data.status_text);
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+If you send a `POST` request to `/api/issues/{projectname}` without the required fields, returned will be the error `{ error: 'required field(s) missing' }`
+
+```js
+async (getUserInput) => {
+  try {
+    let test_data = { created_by: 'fCC' };
+    const data = await $.post(getUserInput('url') + '/api/issues/fcc-project', {
+      created_by: 'fCC'
+    });
+    assert.isObject(data);
+    assert.property(data, 'error');
+    assert.equal(data.error, 'required field(s) missing');
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+You can send a `GET` request to `/api/issues/{projectname}` for an array of all issues for that specific `projectname`, with all the fields present for each issue.
+
+```js
+async (getUserInput) => {
+  try {
+    let test_data = { issue_text: 'Get Issues Test', created_by: 'fCC' };
+    const url =
+      getUserInput('url') +
+      '/api/issues/get_issues_test_' +
+      Date.now().toString().substring(7);
+    const data1 = await $.post(
+      url,
+      Object.assign(test_data, { issue_title: 'Faux Issue 1' })
+    );
+    assert.isObject(data1);
+    const data2 = await $.post(
+      url,
+      Object.assign(test_data, { issue_title: 'Faux Issue 2' })
+    );
+    assert.isObject(data2);
+    const data3 = await $.post(
+      url,
+      Object.assign(test_data, { issue_title: 'Faux Issue 3' })
+    );
+    assert.isObject(data3);
+    const getIssues = await $.get(url);
+    assert.isArray(getIssues);
+    assert.lengthOf(getIssues, 3);
+    let re = new RegExp('Faux Issue \\d');
+    getIssues.forEach((issue) => {
+      assert.property(issue, 'issue_title');
+      assert.match(issue.issue_title, re);
+      assert.property(issue, 'issue_text');
+      assert.property(issue, 'created_by');
+      assert.property(issue, 'assigned_to');
+      assert.property(issue, 'status_text');
+      assert.property(issue, 'open');
+      assert.property(issue, 'created_on');
+      assert.property(issue, 'updated_on');
+      assert.property(issue, '_id');
+    });
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+You can send a `GET` request to `/api/issues/{projectname}` and filter the request by also passing along any field and value as a URL query (ie. `/api/issues/{project}?open=false`). You can pass one or more field/value pairs at once.
+
+```js
+async (getUserInput) => {
+  try {
+    let test_data = {
+      issue_title: 'To be Filtered',
+      issue_text: 'Filter Issues Test'
+    };
+    const url =
+      getUserInput('url') +
+      '/api/issues/get_issues_test_' +
+      Date.now().toString().substring(7);
+    const data1 = await $.post(
+      url,
+      Object.assign(test_data, { created_by: 'Alice', assigned_to: 'Bob' })
+    );
+    const data2 = await $.post(
+      url,
+      Object.assign(test_data, { created_by: 'Alice', assigned_to: 'Bob' })
+    );
+    const data3 = await $.post(
+      url,
+      Object.assign(test_data, { created_by: 'Alice', assigned_to: 'Eric' })
+    );
+    const data4 = await $.post(
+      url,
+      Object.assign(test_data, { created_by: 'Carol', assigned_to: 'Eric' })
+    );
+    const getSingle = await $.get(url + '?created_by=Alice');
+    assert.isArray(getSingle);
+    assert.lengthOf(getSingle, 3);
+    const getMultiple = await $.get(url + '?created_by=Alice&assigned_to=Bob');
+    assert.isArray(getMultiple);
+    assert.lengthOf(getMultiple, 2);
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+You can send a `PUT` request to `/api/issues/{projectname}` with an `_id` and one or more fields to update. On success, the `updated_on` field should be updated, and returned should be `{  result: 'successfully updated', '_id': _id }`.
+
+```js
+async (getUserInput) => {
+  try {
+    let initialData = {
+      issue_title: 'Issue to be Updated',
+      issue_text: 'Functional Test - Put target',
+      created_by: 'fCC'
+    };
+    const url = getUserInput('url') + '/api/issues/fcc-project';
+    const itemToUpdate = await $.post(url, initialData);
+    const updateSucccess = await $.ajax({
+      url: url,
+      type: 'PUT',
+      data: { _id: itemToUpdate._id, issue_text: 'New Issue Text' }
+    });
+    assert.isObject(updateSucccess);
+    assert.deepEqual(updateSucccess, {
+      result: 'successfully updated',
+      _id: itemToUpdate._id
+    });
+    const getUpdatedId = await $.get(url + '?_id=' + itemToUpdate._id);
+    assert.isArray(getUpdatedId);
+    assert.isObject(getUpdatedId[0]);
+    assert.isAbove(
+      Date.parse(getUpdatedId[0].updated_on),
+      Date.parse(getUpdatedId[0].created_on)
+    );
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+When the `PUT` request sent to `/api/issues/{projectname}` does not include an `_id`, the return value is `{ error: 'missing _id' }`.
+
+```js
+async (getUserInput) => {
+  try {
+    const url = getUserInput('url') + '/api/issues/fcc-project';
+    const badUpdate = await $.ajax({ url: url, type: 'PUT' });
+    assert.isObject(badUpdate);
+    assert.property(badUpdate, 'error');
+    assert.equal(badUpdate.error, 'missing _id');
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+When the `PUT` request sent to `/api/issues/{projectname}` does not include update fields, the return value is `{ error: 'no update field(s) sent', '_id': _id }`. On any other error, the return value is `{ error: 'could not update', '_id': _id }`.
+
+```js
+async (getUserInput) => {
+  try {
+    const url = getUserInput('url') + '/api/issues/fcc-project';
+    const badUpdate = await $.ajax({
+      url: url,
+      type: 'PUT',
+      data: { _id: '5f665eb46e296f6b9b6a504d' }
+    });
+    assert.deepEqual(badUpdate, {
+      error: 'no update field(s) sent',
+      _id: '5f665eb46e296f6b9b6a504d'
+    });
+    const badIdUpdate = await $.ajax({
+      url: url,
+      type: 'PUT',
+      data: { _id: '5f665eb46e296f6b9b6a504d', issue_text: 'New Issue Text' }
+    });
+    assert.deepEqual(badIdUpdate, {
+      error: 'could not update',
+      _id: '5f665eb46e296f6b9b6a504d'
+    });
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+You can send a `DELETE` request to `/api/issues/{projectname}` with an `_id` to delete an issue. If no `_id` is sent, the return value is `{ error: 'missing _id' }`. On success, the return value is `{ result: 'successfully deleted', '_id': _id }`. On failure, the return value is `{ error: 'could not delete', '_id': _id }`.
+
+```js
+async (getUserInput) => {
+  try {
+    let initialData = {
+      issue_title: 'Issue to be Deleted',
+      issue_text: 'Functional Test - Delete target',
+      created_by: 'fCC'
+    };
+    const url = getUserInput('url') + '/api/issues/fcc-project';
+    const itemToDelete = await $.post(url, initialData);
+    assert.isObject(itemToDelete);
+    const deleteSuccess = await $.ajax({
+      url: url,
+      type: 'DELETE',
+      data: { _id: itemToDelete._id }
+    });
+    assert.isObject(deleteSuccess);
+    assert.deepEqual(deleteSuccess, {
+      result: 'successfully deleted',
+      _id: itemToDelete._id
+    });
+    const noId = await $.ajax({ url: url, type: 'DELETE' });
+    assert.isObject(noId);
+    assert.deepEqual(noId, { error: 'missing _id' });
+    const badIdDelete = await $.ajax({
+      url: url,
+      type: 'DELETE',
+      data: { _id: '5f665eb46e296f6b9b6a504d', issue_text: 'New Issue Text' }
+    });
+    assert.isObject(badIdDelete);
+    assert.deepEqual(badIdDelete, {
+      error: 'could not delete',
+      _id: '5f665eb46e296f6b9b6a504d'
+    });
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+All 14 functional tests are complete and passing.
+
+```js
+async (getUserInput) => {
+  try {
+    const getTests = await $.get(getUserInput('url') + '/_api/get-tests');
+    assert.isArray(getTests);
+    assert.isAtLeast(getTests.length, 14, 'At least 14 tests passed');
+    getTests.forEach((test) => {
+      assert.equal(test.state, 'passed', 'Test in Passed State');
+      assert.isAtLeast(
+        test.assertions.length,
+        1,
+        'At least one assertion per test'
+      );
+    });
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md
new file mode 100644
index 00000000000..bfb32ba850b
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/metric-imperial-converter.md
@@ -0,0 +1,318 @@
+---
+id: 587d8249367417b2b2512c41
+title: Metric-Imperial Converter
+challengeType: 4
+forumTopicId: 301570
+dashedName: metric-imperial-converter
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://metric-imperial-converter.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://metric-imperial-converter.freecodecamp.rocks/</a>. Working on this project will involve you writing your code using one of the following methods:
+
+- Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-metricimpconverter/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
+- Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-metricimpconverter" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --instructions--
+
+- Complete the necessary conversion logic in `/controllers/convertHandler.js`
+- Complete the necessary routes in `/routes/api.js`
+- Copy the `sample.env` file to `.env` and set the variables appropriately
+- To run the tests uncomment `NODE_ENV=test` in your `.env` file
+- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell"
+
+Write the following tests in `tests/1_unit-tests.js`:
+
+- `convertHandler` should correctly read a whole number input.
+- `convertHandler` should correctly read a decimal number input.
+- `convertHandler` should correctly read a fractional input.
+- `convertHandler` should correctly read a fractional input with a decimal.
+- `convertHandler` should correctly return an error on a double-fraction (i.e. `3/2/3`).
+- `convertHandler` should correctly default to a numerical input of `1` when no numerical input is provided.
+- `convertHandler` should correctly read each valid input unit.
+- `convertHandler` should correctly return an error for an invalid input unit.
+- `convertHandler` should return the correct return unit for each valid input unit.
+- `convertHandler` should correctly return the spelled-out string unit for each valid input unit.
+- `convertHandler` should correctly convert `gal` to `L`.
+- `convertHandler` should correctly convert `L` to `gal`.
+- `convertHandler` should correctly convert `mi` to `km`.
+- `convertHandler` should correctly convert `km` to `mi`.
+- `convertHandler` should correctly convert `lbs` to `kg`.
+- `convertHandler` should correctly convert `kg` to `lbs`.
+
+Write the following tests in `tests/2_functional-tests.js`:
+
+- Convert a valid input such as `10L`: `GET` request to `/api/convert`.
+- Convert an invalid input such as `32g`: `GET` request to `/api/convert`.
+- Convert an invalid number such as `3/7.2/4kg`: `GET` request to `/api/convert`.
+- Convert an invalid number AND unit such as `3/7.2/4kilomegagram`: `GET` request to `/api/convert`.
+- Convert with no number such as `kg`: `GET` request to `/api/convert`.
+
+# --hints--
+
+You can provide your own project, not the example URL.
+
+```js
+getUserInput => {
+  assert(
+    !/.*\/metric-imperial-converter\.freecodecamp\.rocks/.test(
+      getUserInput('url')
+    )
+  );
+};
+```
+
+You can `GET` `/api/convert` with a single parameter containing an accepted number and unit and have it converted. (Hint: Split the input by looking for the index of the first character which will mark the start of the unit)
+
+```js
+
+```
+
+You can convert `'gal'` to `'L'` and vice versa. (1 gal to 3.78541 L)
+
+```js
+async getUserInput => {
+  try {
+    const data1 = await $.get(getUserInput('url') + '/api/convert?input=1gal');
+    assert.equal(data1.returnNum, 3.78541);
+    assert.equal(data1.returnUnit, 'L');
+    const data2 = await $.get(getUserInput('url') + '/api/convert?input=10gal');
+    assert.equal(data2.returnNum, 37.8541);
+    assert.equal(data2.returnUnit, 'L');
+    const data3 = await $.get(getUserInput('url') + '/api/convert?input=1l');
+    assert.equal(data3.returnNum, 0.26417);
+    assert.equal(data3.returnUnit, 'gal');
+    const data4 = await $.get(getUserInput('url') + '/api/convert?input=10l');
+    assert.equal(data4.returnNum, 2.64172);
+    assert.equal(data4.returnUnit, 'gal');
+  } catch (xhr) {
+    throw new Error(xhr.responseText || xhr.message);
+  }
+};
+```
+
+You can convert `'lbs'` to `'kg'` and vice versa. (1 lbs to 0.453592 kg)
+
+```js
+async getUserInput => {
+  try {
+    const data1 = await $.get(getUserInput('url') + '/api/convert?input=1lbs');
+    assert.equal(data1.returnNum, 0.45359);
+    assert.equal(data1.returnUnit, 'kg');
+    const data2 = await $.get(getUserInput('url') + '/api/convert?input=10lbs');
+    assert.equal(data2.returnNum, 4.53592);
+    assert.equal(data2.returnUnit, 'kg');
+    const data3 = await $.get(getUserInput('url') + '/api/convert?input=1kg');
+    assert.equal(data3.returnNum, 2.20462);
+    assert.equal(data3.returnUnit, 'lbs');
+    const data4 = await $.get(getUserInput('url') + '/api/convert?input=10kg');
+    assert.equal(data4.returnNum, 22.04624);
+    assert.equal(data4.returnUnit, 'lbs');
+  } catch (xhr) {
+    throw new Error(xhr.responseText || xhr.message);
+  }
+};
+```
+
+You can convert `'mi'` to `'km'` and vice versa. (1 mi to 1.60934 km)
+
+```js
+async getUserInput => {
+  try {
+    const data1 = await $.get(getUserInput('url') + '/api/convert?input=1mi');
+    assert.equal(data1.returnNum, 1.60934);
+    assert.equal(data1.returnUnit, 'km');
+    const data2 = await $.get(getUserInput('url') + '/api/convert?input=10mi');
+    assert.equal(data2.returnNum, 16.0934);
+    assert.equal(data2.returnUnit, 'km');
+    const data3 = await $.get(getUserInput('url') + '/api/convert?input=1km');
+    assert.equal(data3.returnNum, 0.62137);
+    assert.equal(data3.returnUnit, 'mi');
+    const data4 = await $.get(getUserInput('url') + '/api/convert?input=10km');
+    assert.equal(data4.returnNum, 6.21373);
+    assert.equal(data4.returnUnit, 'mi');
+  } catch (xhr) {
+    throw new Error(xhr.responseText || xhr.message);
+  }
+};
+```
+
+All incoming units should be accepted in both upper and lower case, but should be returned in both the `initUnit` and `returnUnit` in lower case, except for liter, which should be represented as an uppercase `'L'`.
+
+```js
+async getUserInput => {
+  try {
+    const data1 = await $.get(getUserInput('url') + '/api/convert?input=1gal');
+    assert.equal(data1.initUnit, 'gal');
+    assert.equal(data1.returnUnit, 'L');
+    const data2 = await $.get(getUserInput('url') + '/api/convert?input=10L');
+    assert.equal(data2.initUnit, 'L');
+    assert.equal(data2.returnUnit, 'gal');
+    const data3 = await $.get(getUserInput('url') + '/api/convert?input=1l');
+    assert.equal(data3.initUnit, 'L');
+    assert.equal(data3.returnUnit, 'gal');
+    const data4 = await $.get(getUserInput('url') + '/api/convert?input=10KM');
+    assert.equal(data4.initUnit, 'km');
+    assert.equal(data4.returnUnit, 'mi');
+  } catch (xhr) {
+    throw new Error(xhr.responseText || xhr.message);
+  }
+};
+```
+
+If the unit of measurement is invalid, returned will be `'invalid unit'`.
+
+```js
+async getUserInput => {
+  try {
+    const data = await $.get(getUserInput('url') + '/api/convert?input=1min');
+    assert(data.error === 'invalid unit' || data === 'invalid unit');
+  } catch (xhr) {
+    throw new Error(xhr.responseText || xhr.message);
+  }
+};
+```
+
+If the number is invalid, returned will be `'invalid number'`.
+
+```js
+async getUserInput => {
+  try {
+    const data = await $.get(
+      getUserInput('url') + '/api/convert?input=1//2gal'
+    );
+    assert(data.error === 'invalid number' || data === 'invalid number');
+  } catch (xhr) {
+    throw new Error(xhr.responseText || xhr.message);
+  }
+};
+```
+
+If both the unit and number are invalid, returned will be `'invalid number and unit'`.
+
+```js
+async getUserInput => {
+  try {
+    const data = await $.get(
+      getUserInput('url') + '/api/convert?input=1//2min'
+    );
+    assert(
+      data.error === 'invalid number and unit' ||
+        data === 'invalid number and unit'
+    );
+  } catch (xhr) {
+    throw new Error(xhr.responseText || xhr.message);
+  }
+};
+```
+
+You can use fractions, decimals or both in the parameter (ie. 5, 1/2, 2.5/6), but if nothing is provided it will default to 1.
+
+```js
+async getUserInput => {
+  try {
+    const data1 = await $.get(getUserInput('url') + '/api/convert?input=mi');
+    assert.approximately(data1.initNum, 1, 0.001);
+    assert.approximately(data1.returnNum, 1.60934, 0.001);
+    assert.equal(data1.returnUnit, 'km');
+    const data2 = await $.get(getUserInput('url') + '/api/convert?input=1/5mi');
+    assert.approximately(data2.initNum, 1 / 5, 0.1);
+    assert.approximately(data2.returnNum, 0.32187, 0.001);
+    assert.equal(data2.returnUnit, 'km');
+    const data3 = await $.get(
+      getUserInput('url') + '/api/convert?input=1.5/7km'
+    );
+    assert.approximately(data3.initNum, 1.5 / 7, 0.001);
+    assert.approximately(data3.returnNum, 0.13315, 0.001);
+    assert.equal(data3.returnUnit, 'mi');
+    const data4 = await $.get(
+      getUserInput('url') + '/api/convert?input=3/2.7km'
+    );
+    assert.approximately(data4.initNum, 3 / 2.7, 0.001);
+    assert.approximately(data4.returnNum, 0.69041, 0.001);
+    assert.equal(data4.returnUnit, 'mi');
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+Your return will consist of the `initNum`, `initUnit`, `returnNum`, `returnUnit`, and `string` spelling out units in the format `'{initNum} {initUnitString} converts to {returnNum} {returnUnitString}'` with the result rounded to 5 decimals.
+
+```js
+async getUserInput => {
+  try {
+    const data = await $.get(getUserInput('url') + '/api/convert?input=2mi');
+    assert.equal(data.initNum, 2);
+    assert.equal(data.initUnit, 'mi');
+    assert.approximately(data.returnNum, 3.21868, 0.001);
+    assert.equal(data.returnUnit, 'km', 'returnUnit did not match');
+    assert.equal(data.string, '2 miles converts to 3.21868 kilometers');
+  } catch (xhr) {
+    throw new Error(xhr.responseText || xhr.message);
+  }
+};
+```
+
+All 16 unit tests are complete and passing.
+
+```js
+async getUserInput => {
+  try {
+    const getTests = await $.get(getUserInput('url') + '/_api/get-tests');
+    assert.isArray(getTests);
+    const unitTests = getTests.filter(test => {
+      return !!test.context.match(/Unit Tests/gi);
+    });
+    assert.isAtLeast(unitTests.length, 16, 'At least 16 tests passed');
+    unitTests.forEach(test => {
+      assert.equal(test.state, 'passed', 'Tests in Passed State');
+      assert.isAtLeast(
+        test.assertions.length,
+        1,
+        'At least one assertion per test'
+      );
+    });
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+All 5 functional tests are complete and passing.
+
+```js
+async getUserInput => {
+  try {
+    const getTests = await $.get(getUserInput('url') + '/_api/get-tests');
+    assert.isArray(getTests);
+    const functTests = getTests.filter(test => {
+      return !!test.context.match(/Functional Tests/gi);
+    });
+    assert.isAtLeast(functTests.length, 5, 'At least 5 tests passed');
+    functTests.forEach(test => {
+      assert.equal(test.state, 'passed', 'Tests in Passed State');
+      assert.isAtLeast(
+        test.assertions.length,
+        1,
+        'At least one assertion per test'
+      );
+    });
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/personal-library.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/personal-library.md
new file mode 100644
index 00000000000..353b79ed387
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/personal-library.md
@@ -0,0 +1,220 @@
+---
+id: 587d824a367417b2b2512c43
+title: Personal Library
+challengeType: 4
+forumTopicId: 301571
+dashedName: personal-library
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://personal-library.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://personal-library.freecodecamp.rocks/</a>. Working on this project will involve you writing your code using one of the following methods:
+
+-   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-library" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
+-   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-library" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --instructions--
+
+1.  Add your MongoDB connection string to `.env` without quotes as `DB` Example: `DB=mongodb://admin:pass@1234.mlab.com:1234/fccpersonallib`
+2.  In your `.env` file set `NODE_ENV` to `test`, without quotes
+3.  You need to create all routes within `routes/api.js`
+4.  You will create all functional tests in `tests/2_functional-tests.js`
+
+# --hints--
+
+You can provide your own project, not the example URL.
+
+```js
+(getUserInput) => {
+  assert(
+    !/.*\/personal-library\.freecodecamp\.rocks/.test(getUserInput('url'))
+  );
+};
+```
+
+You can send a <b>POST</b> request to `/api/books` with `title` as part of the form data to add a book.  The returned response will be an object with the `title` and a unique `_id` as keys.  If `title` is not included in the request, the returned response should be the string `missing required field title`.
+
+```js
+async (getUserInput) => {
+  try {
+    let data1 = await $.post(getUserInput('url') + '/api/books', {
+      title: 'Faux Book 1'
+    });
+    assert.isObject(data1);
+    assert.property(data1, 'title');
+    assert.equal(data1.title, 'Faux Book 1');
+    assert.property(data1, '_id');
+    let data2 = await $.post(getUserInput('url') + '/api/books');
+    assert.isString(data2);
+    assert.equal(data2, 'missing required field title');
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+You can send a <b>GET</b> request to `/api/books` and receive a JSON response representing all the books. The JSON response will be an array of objects with each object (book) containing `title`, `_id`, and `commentcount` properties.
+
+```js
+async (getUserInput) => {
+  try {
+    let url = getUserInput('url') + '/api/books';
+    let a = $.post(url, { title: 'Faux Book A' });
+    let b = $.post(url, { title: 'Faux Book B' });
+    let c = $.post(url, { title: 'Faux Book C' });
+    await Promise.all([a, b, c]).then(async () => {
+      let data = await $.get(url);
+      assert.isArray(data);
+      assert.isAtLeast(data.length, 3);
+      data.forEach((book) => {
+        assert.isObject(book);
+        assert.property(book, 'title');
+        assert.isString(book.title);
+        assert.property(book, '_id');
+        assert.property(book, 'commentcount');
+        assert.isNumber(book.commentcount);
+      });
+    });
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+You can send a <b>GET</b> request to `/api/books/{_id}` to retrieve a single object of a book containing the properties `title`, `_id`, and a `comments` array (empty array if no comments present). If no book is found, return the string `no book exists`.
+
+```js
+async (getUserInput) => {
+  try {
+    let url = getUserInput('url') + '/api/books';
+    let noBook = await $.get(url + '/5f665eb46e296f6b9b6a504d');
+    assert.isString(noBook);
+    assert.equal(noBook, 'no book exists');
+    let sampleBook = await $.post(url, { title: 'Faux Book Alpha' });
+    assert.isObject(sampleBook);
+    let bookId = sampleBook._id;
+    let bookQuery = await $.get(url + '/' + bookId);
+    assert.isObject(bookQuery);
+    assert.property(bookQuery, 'title');
+    assert.equal(bookQuery.title, 'Faux Book Alpha');
+    assert.property(bookQuery, 'comments');
+    assert.isArray(bookQuery.comments);
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+You can send a <b>POST</b> request containing `comment` as the form body data to `/api/books/{_id}` to add a comment to a book. The returned response will be the books object similar to <b>GET</b> `/api/books/{_id}` request in an earlier test. If `comment` is not included in the request, return the string `missing required field comment`. If no book is found, return the string `no book exists`.
+
+```js
+async (getUserInput) => {
+  try {
+    let url = getUserInput('url') + '/api/books';
+    let commentTarget = await $.post(url, { title: 'Notable Book' });
+    assert.isObject(commentTarget);
+    let bookId = commentTarget._id;
+    let bookCom1 = await $.post(url + '/' + bookId, {
+      comment: 'This book is fab!'
+    });
+    let bookCom2 = await $.post(url + '/' + bookId, {
+      comment: 'I did not care for it'
+    });
+    assert.isObject(bookCom2);
+    assert.property(bookCom2, '_id');
+    assert.property(bookCom2, 'title');
+    assert.property(bookCom2, 'comments');
+    assert.lengthOf(bookCom2.comments, 2);
+    bookCom2.comments.forEach((comment) => {
+      assert.isString(comment);
+      assert.oneOf(comment, ['This book is fab!', 'I did not care for it']);
+    });
+    let commentErr = await $.post(url + '/' + bookId);
+    assert.isString(commentErr);
+    assert.equal(commentErr, 'missing required field comment');
+    let failingComment = await $.post(url + '/5f665eb46e296f6b9b6a504d', {
+      comment: 'Never Seen Comment'
+    });
+    assert.isString(failingComment);
+    assert.equal(failingComment, 'no book exists');
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+You can send a <b>DELETE</b> request to `/api/books/{_id}` to delete a book from the collection. The returned response will be the string `delete successful` if successful. If no book is found, return the string `no book exists`.
+
+```js
+async (getUserInput) => {
+  try {
+    let url = getUserInput('url') + '/api/books';
+    let deleteTarget = await $.post(url, { title: 'Deletable Book' });
+    assert.isObject(deleteTarget);
+    let bookId = deleteTarget._id;
+    let doDelete = await $.ajax({ url: url + '/' + bookId, type: 'DELETE' });
+    assert.isString(doDelete);
+    assert.equal(doDelete, 'delete successful');
+    let failingDelete = await $.ajax({
+      url: url + '/5f665eb46e296f6b9b6a504d',
+      type: 'DELETE'
+    });
+    assert.isString(failingDelete);
+    assert.equal(failingDelete, 'no book exists');
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+You can send a <b>DELETE</b> request to `/api/books` to delete all books in the database. The returned response will be the string `'complete delete successful` if successful.
+
+```js
+async (getUserInput) => {
+  try {
+    const deleteAll = await $.ajax({
+      url: getUserInput('url') + '/api/books',
+      type: 'DELETE'
+    });
+    assert.isString(deleteAll);
+    assert.equal(deleteAll, 'complete delete successful');
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+All 10 functional tests required are complete and passing.
+
+```js
+async (getUserInput) => {
+  try {
+    const getTests = await $.get(getUserInput('url') + '/_api/get-tests');
+    assert.isArray(getTests);
+    assert.isAtLeast(getTests.length, 10, 'At least 10 tests passed');
+    getTests.forEach((test) => {
+      assert.equal(test.state, 'passed', 'Test in Passed State');
+      assert.isAtLeast(
+        test.assertions.length,
+        1,
+        'At least one assertion per test'
+      );
+    });
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions,
+  because they would need to be tested against a full working project.
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/sudoku-solver.md b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/sudoku-solver.md
new file mode 100644
index 00000000000..bf42138e9fd
--- /dev/null
+++ b/curriculum/challenges/arabic/06-quality-assurance/quality-assurance-projects/sudoku-solver.md
@@ -0,0 +1,407 @@
+---
+id: 5e601bf95ac9d0ecd8b94afd
+title: Sudoku Solver
+challengeType: 4
+forumTopicId: 462357
+dashedName: sudoku-solver
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://sudoku-solver.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://sudoku-solver.freecodecamp.rocks/</a>. Working on this project will involve you writing your code using one of the following methods:
+
+-   Clone <a href="https://github.com/freecodecamp/boilerplate-project-sudoku-solver" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
+-   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-sudoku-solver" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --instructions--
+
+- All puzzle logic can go into `/controllers/sudoku-solver.js`
+  - The `validate` function should take a given puzzle string and check it to see if it has 81 valid characters for the input.
+  - The `check` functions should be validating against the *current* state of the board.
+  - The `solve` function should handle solving any given valid puzzle string, not just the test inputs and solutions. You are expected to write out the logic to solve this.
+- All routing logic can go into `/routes/api.js`
+- See the `puzzle-strings.js` file in `/controllers` for some sample puzzles your application should solve
+- To run the challenge tests on this page, set `NODE_ENV` to `test` without quotes in the `.env` file
+- To run the tests in the console, use the command `npm run test`. To open the Replit console, press Ctrl+Shift+P (Cmd if on a Mac) and type "open shell"
+
+Write the following tests in `tests/1_unit-tests.js`:
+
+-   Logic handles a valid puzzle string of 81 characters
+-   Logic handles a puzzle string with invalid characters (not 1-9 or `.`)
+-   Logic handles a puzzle string that is not 81 characters in length
+-   Logic handles a valid row placement
+-   Logic handles an invalid row placement
+-   Logic handles a valid column placement
+-   Logic handles an invalid column placement
+-   Logic handles a valid region (3x3 grid) placement
+-   Logic handles an invalid region (3x3 grid) placement
+-   Valid puzzle strings pass the solver
+-   Invalid puzzle strings fail the solver
+-   Solver returns the expected solution for an incomplete puzzle
+
+Write the following tests in `tests/2_functional-tests.js`
+
+-   Solve a puzzle with valid puzzle string: POST request to `/api/solve`
+-   Solve a puzzle with missing puzzle string: POST request to `/api/solve`
+-   Solve a puzzle with invalid characters: POST request to `/api/solve`
+-   Solve a puzzle with incorrect length: POST request to `/api/solve`
+-   Solve a puzzle that cannot be solved: POST request to `/api/solve`
+-   Check a puzzle placement with all fields: POST request to `/api/check`
+-   Check a puzzle placement with single placement conflict: POST request to `/api/check`
+-   Check a puzzle placement with multiple placement conflicts: POST request to `/api/check`
+-   Check a puzzle placement with all placement conflicts: POST request to `/api/check`
+-   Check a puzzle placement with missing required fields: POST request to `/api/check`
+-   Check a puzzle placement with invalid characters: POST request to `/api/check`
+-   Check a puzzle placement with incorrect length: POST request to `/api/check`
+-   Check a puzzle placement with invalid placement coordinate: POST request to `/api/check`
+-   Check a puzzle placement with invalid placement value: POST request to `/api/check`
+
+# --hints--
+
+You should provide your own project, not the example URL.
+
+```js
+(getUserInput) => {
+  const url = getUserInput('url');
+  assert(!/.*\/sudoku-solver\.freecodecamp\.rocks/.test(getUserInput('url')));
+};
+```
+
+You can `POST` `/api/solve` with form data containing `puzzle` which will be a string containing a combination of numbers (1-9) and periods `.` to represent empty spaces. The returned object will contain a `solution` property with the solved puzzle.
+
+```js
+async (getUserInput) => {
+  const input =
+    '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..';
+  const output =
+    '769235418851496372432178956174569283395842761628713549283657194516924837947381625';
+  const data = await fetch(getUserInput('url') + '/api/solve', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ puzzle: input })
+  });
+  const parsed = await data.json();
+  assert.property(parsed, 'solution');
+  assert.equal(parsed.solution, output);
+};
+```
+
+If the object submitted to `/api/solve` is missing `puzzle`, the returned value will be `{ error: 'Required field missing' }`
+
+```js
+async (getUserInput) => {
+  const input =
+    '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..';
+  const output = 'Required field missing';
+  const data = await fetch(getUserInput('url') + '/api/solve', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ notpuzzle: input })
+  });
+  const parsed = await data.json();
+  assert.property(parsed, 'error');
+  assert.equal(parsed.error, output);
+};
+```
+
+If the puzzle submitted to `/api/solve` contains values which are not numbers or periods, the returned value will be `{ error: 'Invalid characters in puzzle' }`
+
+```js
+async (getUserInput) => {
+  const input =
+    'AA9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..';
+  const output = 'Invalid characters in puzzle';
+  const data = await fetch(getUserInput('url') + '/api/solve', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ puzzle: input })
+  });
+  const parsed = await data.json();
+  assert.property(parsed, 'error');
+  assert.equal(parsed.error, output);
+};
+```
+
+If the puzzle submitted to `/api/solve` is greater or less than 81 characters, the returned value will be `{ error: 'Expected puzzle to be 81 characters long' }`
+
+```js
+async (getUserInput) => {
+  const inputs = [
+    '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6.',
+    '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6...'
+  ];
+  const output = 'Expected puzzle to be 81 characters long';
+  for (const input of inputs) {
+    const data = await fetch(getUserInput('url') + '/api/solve', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ puzzle: input })
+    });
+    const parsed = await data.json();
+    assert.property(parsed, 'error');
+    assert.equal(parsed.error, output);
+  }
+};
+```
+
+If the puzzle submitted to `/api/solve` is invalid or cannot be solved, the returned value will be `{ error: 'Puzzle cannot be solved' }`
+
+```js
+async (getUserInput) => {
+  const input =
+    '9.9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..';
+  const output = 'Puzzle cannot be solved';
+  const data = await fetch(getUserInput('url') + '/api/solve', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ puzzle: input })
+  });
+  const parsed = await data.json();
+  assert.property(parsed, 'error');
+  assert.equal(parsed.error, output);
+};
+```
+
+You can `POST` to `/api/check` an object containing `puzzle`, `coordinate`, and `value` where the `coordinate` is the letter A-I indicating the row, followed by a number 1-9 indicating the column, and `value` is a number from 1-9.
+
+```js
+async (getUserInput) => {
+  const input =
+    '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..';
+  const coordinate = 'A1';
+  const value = '7';
+  const data = await fetch(getUserInput('url') + '/api/check', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ puzzle: input, coordinate, value })
+  });
+  const parsed = await data.json();
+  assert.property(parsed, 'valid');
+  assert.isTrue(parsed.valid);
+};
+```
+
+The return value from the `POST` to `/api/check` will be an object containing a `valid` property, which is `true` if the number may be placed at the provided coordinate and `false` if the number may not. If false, the returned object will also contain a `conflict` property which is an array containing the strings `"row"`, `"column"`, and/or `"region"` depending on which makes the placement invalid.
+
+```js
+async (getUserInput) => {
+  const input =
+    '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..';
+  const coordinate = 'A1';
+  const value = '1';
+  const conflict = ['row', 'column'];
+  const data = await fetch(getUserInput('url') + '/api/check', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ puzzle: input, coordinate, value })
+  });
+  const parsed = await data.json();
+  assert.property(parsed, 'valid');
+  assert.isFalse(parsed.valid);
+  assert.property(parsed, 'conflict');
+  assert.include(parsed.conflict, 'row');
+  assert.include(parsed.conflict, 'column');
+};
+```
+
+If `value` submitted to `/api/check` is already placed in `puzzle` on that `coordinate`, the returned value will be an object containing a `valid` property with `true` if `value` is not conflicting.
+
+```js
+async (getUserInput) => {
+  const input =
+  '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..';
+  const coordinate = 'C3';
+  const value = '2';
+  const data = await fetch(getUserInput('url') + '/api/check', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ puzzle: input, coordinate, value })
+  });
+  const parsed = await data.json();
+  assert.property(parsed, 'valid');
+  assert.isTrue(parsed.valid);
+};
+```
+
+If the puzzle submitted to `/api/check` contains values which are not numbers or periods, the returned value will be `{ error: 'Invalid characters in puzzle' }`
+
+```js
+async (getUserInput) => {
+  const input =
+    'AA9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..';
+  const coordinate = 'A1';
+  const value = '1';
+  const output = 'Invalid characters in puzzle';
+  const data = await fetch(getUserInput('url') + '/api/check', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify({ puzzle: input, coordinate, value })
+  });
+  const parsed = await data.json();
+  assert.property(parsed, 'error');
+  assert.equal(parsed.error, output);
+};
+```
+
+If the puzzle submitted to `/api/check` is greater or less than 81 characters, the returned value will be `{ error: 'Expected puzzle to be 81 characters long' }`
+
+```js
+async (getUserInput) => {
+  const inputs = [
+    '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6.',
+    '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6...'
+  ];
+  const coordinate = 'A1';
+  const value = '1';
+  const output = 'Expected puzzle to be 81 characters long';
+  for (const input of inputs) {
+    const data = await fetch(getUserInput('url') + '/api/check', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ puzzle: input, coordinate, value })
+    });
+    const parsed = await data.json();
+    assert.property(parsed, 'error');
+    assert.equal(parsed.error, output);
+  }
+};
+```
+
+If the object submitted to `/api/check` is missing `puzzle`, `coordinate` or `value`, the returned value will be `{ error: 'Required field(s) missing' }`
+
+```js
+async (getUserInput) => {
+  const inputs = [
+    {
+      puzzle: '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..',
+      value: '1',
+    },
+    {
+      puzzle: '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..',
+      coordinate: 'A1',
+    },
+    {
+      coordinate: 'A1',
+      value: '1'
+    }
+  ];
+  for (const input of inputs) {
+    const output = 'Required field(s) missing';
+    const data = await fetch(getUserInput('url') + '/api/check', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify(input)
+    });
+    const parsed = await data.json();
+    assert.property(parsed, 'error');
+    assert.equal(parsed.error, output);
+  }
+};
+```
+
+If the coordinate submitted to `api/check` does not point to an existing grid cell, the returned value will be `{ error: 'Invalid coordinate'}`
+
+```js
+async (getUserInput) => {
+  const input =
+    '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..';
+  const output = 'Invalid coordinate';
+  const coordinates = ['A0', 'A10', 'J1', 'A', '1', 'XZ18'];
+  const value = '7';
+  for (const coordinate of coordinates) {
+    const data = await fetch(getUserInput('url') + '/api/check', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ puzzle: input, coordinate, value })
+    });
+    const parsed = await data.json();
+    assert.property(parsed, 'error');
+    assert.equal(parsed.error, output);
+  }
+};
+```
+
+If the `value` submitted to `/api/check` is not a number between 1 and 9, the returned value will be `{ error: 'Invalid value' }`
+
+```js
+async (getUserInput) => {
+  const input =
+    '..9..5.1.85.4....2432......1...69.83.9.....6.62.71...9......1945....4.37.4.3..6..';
+  const output = 'Invalid value';
+  const coordinate = 'A1';
+  const values = ['0', '10', 'A'];
+  for (const value of values) {
+    const data = await fetch(getUserInput('url') + '/api/check', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ puzzle: input, coordinate, value })
+    });
+    const parsed = await data.json();
+    assert.property(parsed, 'error');
+    assert.equal(parsed.error, output);
+  }
+};
+```
+
+All 12 unit tests are complete and passing. See `/tests/1_unit-tests.js` for the expected behavior you should write tests for.
+
+```js
+async (getUserInput) => {
+  try {
+    const getTests = await $.get(getUserInput('url') + '/_api/get-tests');
+    assert.isArray(getTests);
+    const unitTests = getTests.filter((test) => {
+      return !!test.context.match(/Unit\s*Tests/gi);
+    });
+    assert.isAtLeast(unitTests.length, 12, 'At least 12 tests passed');
+    unitTests.forEach((test) => {
+      assert.equal(test.state, 'passed', 'Test in Passed State');
+      assert.isAtLeast(
+        test.assertions.length,
+        1,
+        'At least one assertion per test'
+      );
+    });
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+All 14 functional tests are complete and passing. See `/tests/2_functional-tests.js` for the expected functionality you should write tests for.
+
+```js
+async (getUserInput) => {
+  try {
+    const getTests = await $.get(getUserInput('url') + '/_api/get-tests');
+    assert.isArray(getTests);
+    const functTests = getTests.filter((test) => {
+      return !!test.context.match(/Functional\s*Tests/gi);
+    });
+    assert.isAtLeast(functTests.length, 14, 'At least 14 tests passed');
+    functTests.forEach((test) => {
+      assert.equal(test.state, 'passed', 'Test in Passed State');
+      assert.isAtLeast(
+        test.assertions.length,
+        1,
+        'At least one assertion per test'
+      );
+    });
+  } catch (err) {
+    throw new Error(err.responseText || err.message);
+  }
+};
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions,
+  because they would need to be tested against a full working project.
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md
new file mode 100644
index 00000000000..88df8138e5b
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md
@@ -0,0 +1,71 @@
+---
+id: 5e7b9f060b6c005b0e76f05b
+title: Build your own Functions
+challengeType: 11
+videoId: nLDychdBwUg
+bilibiliIds:
+  aid: 249487483
+  bvid: BV1Fv411J7bS
+  cid: 376340281
+dashedName: build-your-own-functions
+---
+
+# --description--
+
+More resources:
+
+\- <a href="https://www.youtube.com/watch?v=ksvGhDsjtpw" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+
+# --question--
+
+## --text--
+
+What will the following Python program print out?:
+
+```python
+def fred():
+    print("Zap")
+def jane():
+    print("ABC")
+
+jane()
+fred()
+jane()
+```
+
+## --answers--
+
+<pre>Zap
+ABC
+jane
+fred
+jane</pre>
+
+---
+
+<pre>Zap
+ABC
+Zap</pre>
+
+---
+
+<pre>ABC
+Zap
+jane</pre>
+
+---
+
+<pre>ABC
+Zap
+ABC</pre>
+
+---
+
+<pre>Zap
+Zap
+Zap</pre>
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md
new file mode 100644
index 00000000000..dc30911a305
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md
@@ -0,0 +1,61 @@
+---
+id: 5e7b9f0b0b6c005b0e76f06d
+title: Comparing and Sorting Tuples
+challengeType: 11
+videoId: dZXzBXUxxCs
+bilibiliIds:
+  aid: 931886163
+  bvid: BV1HM4y1T7TK
+  cid: 376533673
+dashedName: comparing-and-sorting-tuples
+---
+
+# --description--
+
+More resources:
+
+\- <a href="https://www.youtube.com/watch?v=EhQxwzyT16E" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+
+# --question--
+
+## --text--
+
+Which does the same thing as the following code?:
+
+```python
+lst = []
+for key, val in counts.items():
+    newtup = (val, key)
+    lst.append(newtup)
+lst = sorted(lst, reverse=True)
+print(lst)
+```
+
+## --answers--
+
+```python
+print( sorted( [ (v,k) for k,v in counts.items() ], reverse=True ) )
+```
+
+---
+
+```python
+print( [ (k,v) for k,v in counts.items().sorted() ] )
+```
+
+---
+
+```python
+print( sorted( [ (v,k) for k,v in counts.keys() ] ) )
+```
+
+---
+
+```python
+print( [ (k,v) for k,v in counts.values().sort() ] )
+```
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md
new file mode 100644
index 00000000000..c7e87b2f7ed
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/conditional-execution.md
@@ -0,0 +1,54 @@
+---
+id: 5e7b9f050b6c005b0e76f058
+title: Conditional Execution
+challengeType: 11
+videoId: gz_IfIsZQtc
+bilibiliIds:
+  aid: 206949935
+  bvid: BV1Jh411z7bY
+  cid: 376337035
+dashedName: conditional-execution
+---
+
+# --question--
+
+## --text--
+
+Which code is indented correctly to print "Yes" if x = 0 and y = 10?
+
+## --answers--
+
+```python
+if 0 == x:
+if y == 10:
+print("Yes")
+```
+
+---
+
+```python
+if 0 == x:
+    if y == 10:
+    print("Yes")
+```
+
+---
+
+```python
+if 0 == x:
+if y == 10:
+    print("Yes")
+```
+
+---
+
+```python
+if 0 == x:
+    if y == 10:
+        print("Yes")
+```
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md
new file mode 100644
index 00000000000..133a570f303
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md
@@ -0,0 +1,56 @@
+---
+id: 5e7b9f6a0b6c005b0e76f097
+title: 'تصور البيانات: القوائم البريدية (Data Visualization: Mailing Lists)'
+challengeType: 11
+videoId: RYdW660KkaQ
+bilibiliIds:
+  aid: 334465586
+  bvid: BV18w411R7dD
+  cid: 377545473
+dashedName: data-visualization-mailing-lists
+---
+
+# --description--
+
+مزيد من الموارد:
+
+\- <a href="https://www.youtube.com/watch?v=KfhslNzopxo" target="_blank" rel="noopener noreferrer nofollow">Exercise: Geodata</a>
+
+\- <a href="https://www.youtube.com/watch?v=wSpl1-7afAk" target="_blank" rel="noopener noreferrer nofollow">Exercise: Gmane Model</a>
+
+\- <a href="https://www.youtube.com/watch?v=H3w4lOFBUOI" target="_blank" rel="noopener noreferrer nofollow">Exercise: Gmane Spider</a>
+
+\- <a href="https://www.youtube.com/watch?v=LRqVPMEXByw" target="_blank" rel="noopener noreferrer nofollow">Exercise: Gmane Viz</a>
+
+\- <a href="https://www.youtube.com/watch?v=yFRAZBkBDBs" target="_blank" rel="noopener noreferrer nofollow">Exercise: Page Rank</a>
+
+\- <a href="https://www.youtube.com/watch?v=sXedPQ_AnWA" target="_blank" rel="noopener noreferrer nofollow">Exercise: Page Spider</a>
+
+\- <a href="https://www.youtube.com/watch?v=Fm0hpkxsZoo" target="_blank" rel="noopener noreferrer nofollow">Exercise: Page Viz</a>
+
+# --question--
+
+## --text--
+
+Which is a common JavaScript visualization library?
+
+## --answers--
+
+DataViz.js
+
+---
+
+D3
+
+---
+
+Lowcharts
+
+---
+
+DATA6
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md
new file mode 100644
index 00000000000..db4878ed822
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/data-visualization-page-rank.md
@@ -0,0 +1,34 @@
+---
+id: 5e7b9f6a0b6c005b0e76f096
+title: 'Data Visualization: Page Rank'
+challengeType: 11
+videoId: 6-w_qIUwaxU
+bilibiliIds:
+  aid: 376950472
+  bvid: BV1ho4y1Q72u
+  cid: 377544599
+dashedName: data-visualization-page-rank
+---
+
+# --question--
+
+## --text--
+
+How does the PageRank algorithm work?
+
+## --answers--
+
+It determines which pages are most highly connected.
+
+---
+
+It ranks pages based on view counts.
+
+---
+
+It figures out which pages contain the most important content.
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md
new file mode 100644
index 00000000000..f01b3320828
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md
@@ -0,0 +1,53 @@
+---
+id: 5e7b9f0a0b6c005b0e76f069
+title: Dictionaries and Loops
+challengeType: 11
+videoId: EEmekKiKG70
+bilibiliIds:
+  aid: 589401038
+  bvid: BV1eq4y1X7xU
+  cid: 376387132
+dashedName: dictionaries-and-loops
+---
+
+# --description--
+
+More resources:
+
+\- <a href="https://www.youtube.com/watch?v=PrhZ9qwBDD8" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+
+# --question--
+
+## --text--
+
+What will the following code print?:
+
+```python
+counts = { 'chuck' : 1 , 'annie' : 42, 'jan': 100}
+for key in counts:
+    if counts[key] > 10:
+        print(key, counts[key])
+```
+
+## --answers--
+
+<pre>annie 42
+jan 100</pre>
+
+---
+
+<pre>chuck 1
+annie 42
+jan 100</pre>
+
+---
+
+<pre>chuck 1</pre>
+
+---
+
+<pre>[Error]</pre>
+
+## --video-solution--
+
+1
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md
new file mode 100644
index 00000000000..aef8d142872
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.md
@@ -0,0 +1,47 @@
+---
+id: 5e7b9f090b6c005b0e76f068
+title: 'Dictionaries: Common Applications'
+challengeType: 11
+videoId: f17xPfIXct0
+bilibiliIds:
+  aid: 805747023
+  bvid: BV1v34y1D7ug
+  cid: 414168867
+dashedName: dictionaries-common-applications
+---
+
+# --question--
+
+## --text--
+
+What will the following code print?
+
+```python
+counts = { 'quincy' : 1 , 'mrugesh' : 42, 'beau': 100, '0': 10}
+print(counts.get('kris', 0))
+```
+
+## --answers--
+
+2
+
+---
+
+quincy
+
+---
+
+0
+
+---
+
+10
+
+---
+
+[will return error]
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md
new file mode 100644
index 00000000000..75d21cc8994
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/files-as-a-sequence.md
@@ -0,0 +1,44 @@
+---
+id: 5e7b9f080b6c005b0e76f063
+title: Files as a Sequence
+challengeType: 11
+videoId: cIA0EokbaHE
+bilibiliIds:
+  aid: 974380307
+  bvid: BV1p44y1m7br
+  cid: 376388846
+dashedName: files-as-a-sequence
+---
+
+# --description--
+
+More resources:
+
+\- <a href="https://www.youtube.com/watch?v=il1j4wkte2E" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+
+# --question--
+
+## --text--
+
+What does the word 'continue' do in the middle of a loop?
+
+## --answers--
+
+Skips to the code directly after the loop.
+
+---
+
+Skips to the next line in the code.
+
+---
+
+Skips to the next iteration of the loop.
+
+---
+
+Skips the next block of code.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md
new file mode 100644
index 00000000000..d70a408080f
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-expressions.md
@@ -0,0 +1,56 @@
+---
+id: 5e7b9f050b6c005b0e76f057
+title: Intermediate Expressions
+challengeType: 11
+videoId: dKgUaIa5ATg
+bilibiliIds:
+  aid: 334428894
+  bvid: BV1uw411R7gH
+  cid: 376318468
+dashedName: intermediate-expressions
+---
+
+# --description--
+
+More resources:
+
+\- <a href="https://youtu.be/t_4DPwsaGDY" target="_blank" rel="noopener noreferrer nofollow">Exercise 1</a>
+
+\- <a href="https://youtu.be/wgkC8SxraAQ" target="_blank" rel="noopener noreferrer nofollow">Exercise 2</a>
+
+# --question--
+
+## --text--
+
+What will print out after running this code:
+
+```python
+width = 15
+height = 12.0
+print(height/3)
+```
+
+## --answers--
+
+39
+
+---
+
+4
+
+---
+
+4.0
+
+---
+
+5.0
+
+---
+
+5
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md
new file mode 100644
index 00000000000..c2bcadfe2b0
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md
@@ -0,0 +1,53 @@
+---
+id: 5e7b9f070b6c005b0e76f061
+title: Intermediate Strings
+challengeType: 11
+videoId: KgT_fYLXnyk
+bilibiliIds:
+  aid: 291983121
+  bvid: BV1Zf4y157yG
+  cid: 376394116
+dashedName: intermediate-strings
+---
+
+# --description--
+
+More resources:
+
+\- <a href="https://www.youtube.com/watch?v=1bSqHot-KwE" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+
+# --question--
+
+## --text--
+
+What is the value of i in the following code?
+
+```python
+word = "bananana"
+i = word.find("na")
+```
+
+## --answers--
+
+nanana
+
+---
+
+2
+
+---
+
+3
+
+---
+
+True
+
+---
+
+na
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md
new file mode 100644
index 00000000000..8b4f0cda163
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-elements-of-python.md
@@ -0,0 +1,40 @@
+---
+id: 5e6a54c358d3af90110a60a3
+title: 'Introduction: Elements of Python'
+challengeType: 11
+videoId: aRY_xjL35v0
+bilibiliIds:
+  aid: 674420725
+  bvid: BV1MU4y1H7Lj
+  cid: 376315889
+dashedName: introduction-elements-of-python
+---
+
+# --question--
+
+## --text--
+
+What will the following program print out:
+
+```python
+x = 43
+x = x + 1
+print(x)
+```
+
+## --answers--
+
+x
+
+---
+
+x + 1
+
+---
+
+44
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md
new file mode 100644
index 00000000000..ca70295ff28
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-hardware-achitecture.md
@@ -0,0 +1,34 @@
+---
+id: 5e6a54af58d3af90110a60a1
+title: 'Introduction: Hardware Architecture'
+challengeType: 11
+videoId: H6qtjRTfSog
+bilibiliIds:
+  aid: 206977572
+  bvid: BV1zh411z7Ak
+  cid: 376199262
+dashedName: introduction-hardware-architecture
+---
+
+# --question--
+
+## --text--
+
+Where are your programs stored when they are running?
+
+## --answers--
+
+Hard Drive.
+
+---
+
+Memory.
+
+---
+
+Central Processing Unit.
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md
new file mode 100644
index 00000000000..a5d07b24723
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-python-as-a-language.md
@@ -0,0 +1,43 @@
+---
+id: 5e6a54ba58d3af90110a60a2
+title: 'Introduction: Python as a Language'
+challengeType: 11
+videoId: 0QeGbZNS_bY
+bilibiliIds:
+  aid: 674404602
+  bvid: BV1GU4y1H7vB
+  cid: 376315625
+dashedName: introduction-python-as-a-language
+---
+
+# --question--
+
+## --text--
+
+What will print out after running these two lines of code:
+
+```python
+x = 6
+print(x)
+```
+
+## --answers--
+
+x
+
+---
+
+6
+
+---
+
+x = 6
+
+---
+
+(x)
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
new file mode 100644
index 00000000000..46b355c1545
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/introduction-why-program.md
@@ -0,0 +1,46 @@
+---
+id: 5e6a54a558d3af90110a60a0
+title: 'Introduction: Why Program?'
+challengeType: 11
+videoId: 3muQV-Im3Z0
+bilibiliIds:
+  aid: 206882253
+  bvid: BV1Fh411z7tr
+  cid: 376314257
+videoLocaleIds:
+  espanol: 3muQV-Im3Z0
+  italian: 3muQV-Im3Z0
+  portuguese: 3muQV-Im3Z0
+dashedName: introduction-why-program
+---
+
+# --description--
+
+More resources:
+
+\- <a href="https://youtu.be/F7mtLrYzZP8" target="_blank" rel="noopener noreferrer nofollow">Install Python on Windows</a>
+
+\- <a href="https://youtu.be/wfLnZP-4sZw" target="_blank" rel="noopener noreferrer nofollow">Install Python on MacOS</a>
+
+# --question--
+
+## --text--
+
+Who should learn to program?
+
+## --answers--
+
+College students.
+
+---
+
+People who want to become software developers.
+
+---
+
+Everyone.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md
new file mode 100644
index 00000000000..7e1ed038bca
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-definite-loops.md
@@ -0,0 +1,43 @@
+---
+id: 5e7b9f070b6c005b0e76f05d
+title: 'Iterations: Definite Loops'
+challengeType: 11
+videoId: hiRTRAqNlpE
+bilibiliIds:
+  aid: 291987032
+  bvid: BV1ff4y157Q3
+  cid: 376385255
+dashedName: iterations-definite-loops
+---
+
+# --question--
+
+## --text--
+
+How many lines will the following code print?:
+
+```python
+for i in [2,1,5]:
+    print(i)
+```
+
+## --answers--
+
+1
+
+---
+
+2
+
+---
+
+3
+
+---
+
+5
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md
new file mode 100644
index 00000000000..70a07c31848
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-loop-idioms.md
@@ -0,0 +1,49 @@
+---
+id: 5e7b9f070b6c005b0e76f05e
+title: 'Iterations: Loop Idioms'
+challengeType: 11
+videoId: AelGAcoMXbI
+bilibiliIds:
+  aid: 334491369
+  bvid: BV1tw411R7Mm
+  cid: 376530765
+dashedName: iterations-loop-idioms
+---
+
+# --question--
+
+## --text--
+
+Below is code to find the smallest value from a list of values. One line has an error that will cause the code to not work as expected. Which line is it?:
+
+```python
+smallest = None
+print("Before:", smallest)
+for itervar in [3, 41, 12, 9, 74, 15]:
+    if smallest is None or itervar < smallest:
+        smallest = itervar
+        break
+    print("Loop:", itervar, smallest)
+print("Smallest:", smallest)
+```
+
+## --answers--
+
+3
+
+---
+
+4
+
+---
+
+6
+
+---
+
+7
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md
new file mode 100644
index 00000000000..d0c75d1cd52
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/iterations-more-patterns.md
@@ -0,0 +1,52 @@
+---
+id: 5e7b9f070b6c005b0e76f05f
+title: 'Iterations: More Patterns'
+challengeType: 11
+videoId: 9Wtqo6vha1M
+bilibiliIds:
+  aid: 674492981
+  bvid: BV1hU4y1H7tF
+  cid: 376531204
+dashedName: iterations-more-patterns
+---
+
+# --description--
+
+More resources:
+
+\- <a href="https://www.youtube.com/watch?v=kjxXZQw0uPg" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+
+# --question--
+
+## --text--
+
+Which of these evaluates to False?
+
+## --answers--
+
+```python
+0 == 0.0
+```
+
+---
+
+```python
+0 is 0.0
+```
+
+---
+
+```python
+0 is not 0.0
+```
+
+---
+
+```python
+0 = 0.0
+```
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md
new file mode 100644
index 00000000000..51ed9ff4dbc
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/loops-and-iterations.md
@@ -0,0 +1,55 @@
+---
+id: 5e7b9f060b6c005b0e76f05c
+title: Loops and Iterations
+challengeType: 11
+videoId: dLA-szNRnUY
+bilibiliIds:
+  aid: 674492981
+  bvid: BV1hU4y1H7tF
+  cid: 376531204
+dashedName: loops-and-iterations
+---
+
+# --question--
+
+## --text--
+
+What will the following code print out?:
+
+```python
+n = 0
+while True:
+    if n == 3:
+        break
+    print(n)
+    n = n + 1
+```
+
+## --answers--
+
+<pre>0
+1
+2</pre>
+
+---
+
+<pre>0
+1
+2
+3</pre>
+
+---
+
+<pre>1
+2</pre>
+
+---
+
+<pre>1
+2
+3</pre>
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md
new file mode 100644
index 00000000000..9fbd557d8d6
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/make-a-relational-database.md
@@ -0,0 +1,52 @@
+---
+id: 5e7b9f170b6c005b0e76f08b
+title: Make a Relational Database
+challengeType: 11
+videoId: MQ5z4bdF92U
+bilibiliIds:
+  aid: 249380678
+  bvid: BV1vv411E76L
+  cid: 377531786
+dashedName: make-a-relational-database
+---
+
+# --question--
+
+## --text--
+
+What SQL command would you use to retrieve all users that have the email address `quincy@freecodecamp.org`?
+
+## --answers--
+
+```sql
+SELECT Users WHERE email="quincy@freecodecamp.org"
+```
+
+---
+
+```sql
+SELECT Users WHERE email IS "quincy@freecodecamp.org"
+```
+
+---
+
+```sql
+SELECT ALL Users WHERE email="quincy@freecodecamp.org"
+```
+
+---
+
+```sql
+SELECT * FROM Users WHERE email IS "quincy@freecodecamp.org"
+```
+
+---
+
+```sql
+SELECT * FROM Users WHERE email="quincy@freecodecamp.org"
+```
+
+## --video-solution--
+
+5
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md
new file mode 100644
index 00000000000..3ef5463b743
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md
@@ -0,0 +1,60 @@
+---
+id: 5e7b9f060b6c005b0e76f059
+title: More Conditional Structures
+challengeType: 11
+videoId: HdL82tAZR20
+bilibiliIds:
+  aid: 631930118
+  bvid: BV1Nb4y1r7z2
+  cid: 376337449
+dashedName: more-conditional-structures
+---
+
+# --description--
+
+More resources:
+
+\- <a href="https://www.youtube.com/watch?v=crLerB4ZxMI" target="_blank" rel="noopener noreferrer nofollow">Exercise 1</a>
+
+\- <a href="https://www.youtube.com/watch?v=KJN3-7HH6yk" target="_blank" rel="noopener noreferrer nofollow">Exercise 2</a>
+
+# --question--
+
+## --text--
+
+Given the following code:
+
+```python
+temp = "5 degrees"
+cel = 0
+fahr = float(temp)
+cel = (fahr - 32.0) * 5.0 / 9.0
+print(cel)
+```
+
+Which line/lines should be surrounded by `try` block?
+
+## --answers--
+
+1
+
+---
+
+3
+
+---
+
+3,4
+
+---
+
+4
+
+---
+
+None
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md
new file mode 100644
index 00000000000..47d6d52de45
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-protocol.md
@@ -0,0 +1,38 @@
+---
+id: 5e7b9f0c0b6c005b0e76f072
+title: Networking Protocol
+challengeType: 11
+videoId: c6vZGescaSc
+bilibiliIds:
+  aid: 931950996
+  bvid: BV1cM4y1N7K6
+  cid: 376388317
+dashedName: networking-protocol
+---
+
+# --question--
+
+## --text--
+
+What type of HTTP request is usually used to access a website?
+
+## --answers--
+
+POST
+
+---
+
+GET
+
+---
+
+WEB
+
+---
+
+ACCESS
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md
new file mode 100644
index 00000000000..db73bd6e5f7
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-text-processing.md
@@ -0,0 +1,34 @@
+---
+id: 5e7b9f0c0b6c005b0e76f074
+title: 'Networking: Text Processing'
+challengeType: 11
+videoId: Pv_pJgVu8WI
+bilibiliIds:
+  aid: 804442498
+  bvid: BV16y4y1j7WW
+  cid: 377329124
+dashedName: networking-text-processing
+---
+
+# --question--
+
+## --text--
+
+Which type of encoding do most websites use?
+
+## --answers--
+
+UTF-8
+
+---
+
+UTF-16
+
+---
+
+UTF-32
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md
new file mode 100644
index 00000000000..1413e0471b4
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-using-urllib-in-python.md
@@ -0,0 +1,41 @@
+---
+id: 5e7b9f0d0b6c005b0e76f075
+title: 'Networking: Using urllib in Python'
+challengeType: 11
+videoId: 7lFM1T_CxBs
+bilibiliIds:
+  aid: 546908270
+  bvid: BV1Xq4y1H7e6
+  cid: 377331524
+dashedName: networking-using-urllib-in-python
+---
+
+# --question--
+
+## --text--
+
+What will the output of the following code be like?:
+
+```python
+import urllib.request
+fhand = urllib.request.urlopen('http://data.pr4e.org/romeo.txt')
+for line in fhand:
+    print(line.decode().strip())
+```
+
+## --answers--
+
+Just contents of "romeo.txt".
+
+---
+
+A header and the contents of "romeo.txt".
+
+---
+
+A header, a footer, and the contents of "romeo.txt".
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md
new file mode 100644
index 00000000000..2d1fb18d938
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-web-scraping-with-python.md
@@ -0,0 +1,60 @@
+---
+id: 5e7b9f0d0b6c005b0e76f076
+title: 'Networking: Web Scraping with Python'
+challengeType: 11
+videoId: Uyioq2q4cEg
+bilibiliIds:
+  aid: 674382625
+  bvid: BV1oU4y1n7zQ
+  cid: 377331774
+dashedName: networking-web-scraping-with-python
+---
+
+# --description--
+
+More resources:
+
+\- <a href="https://www.youtube.com/watch?v=dWLdI143W-g" target="_blank" rel="noopener noreferrer nofollow">Exercise: socket1</a>
+
+\- <a href="https://www.youtube.com/watch?v=8yis2DvbBkI" target="_blank" rel="noopener noreferrer nofollow">Exercise: urllib</a>
+
+\- <a href="https://www.youtube.com/watch?v=g9flPDG9nnY" target="_blank" rel="noopener noreferrer nofollow">Exercise: urllinks</a>
+
+# --question--
+
+## --text--
+
+What Python library is used for parsing HTML documents and extracting data from HTML documents?
+
+## --answers--
+
+socket
+
+---
+
+http
+
+---
+
+BeautifulSoup
+
+---
+
+PrettyBiscuit
+
+---
+
+WonderfulSalad
+
+---
+
+HttpParser
+
+---
+
+GrunkleStan
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md
new file mode 100644
index 00000000000..f21045dff29
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-with-python.md
@@ -0,0 +1,38 @@
+---
+id: 5e7b9f0c0b6c005b0e76f071
+title: Networking with Python
+challengeType: 11
+videoId: _kJvneKVdNM
+bilibiliIds:
+  aid: 419494612
+  bvid: BV1r341167jT
+  cid: 376385858
+dashedName: networking-with-python
+---
+
+# --question--
+
+## --text--
+
+What Python library gives access to TCP Sockets?
+
+## --answers--
+
+tcp
+
+---
+
+socket
+
+---
+
+http
+
+---
+
+port
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md
new file mode 100644
index 00000000000..e8127560b52
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/networking-write-a-web-browser.md
@@ -0,0 +1,54 @@
+---
+id: 5e7b9f0c0b6c005b0e76f073
+title: 'Networking: Write a Web Browser'
+challengeType: 11
+videoId: zjyT9DaAjx4
+bilibiliIds:
+  aid: 761908574
+  bvid: BV1j64y1x7wx
+  cid: 377319579
+dashedName: networking-write-a-web-browser
+---
+
+# --question--
+
+## --text--
+
+What does the following code create?:
+
+```py
+import socket
+
+mysock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
+mysock.connect(('data.pr4e.org', 80))
+cmd = 'GET http://data.pr4e.org/romeo.txt HTTP/1.0\r\n\r\n'.encode()
+mysock.send(cmd)
+
+while True:
+    data = mysock.recv(512)
+    if len(data) < 1:
+        break
+    print(data.decode(),end='')
+mysock.close()
+```
+
+## --answers--
+
+A simple web server.
+
+---
+
+A simple email client.
+
+---
+
+A simple todo list.
+
+---
+
+A simple web browser.
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md
new file mode 100644
index 00000000000..be8ff0ffce1
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/object-lifecycle.md
@@ -0,0 +1,71 @@
+---
+id: 5e7b9f170b6c005b0e76f087
+title: Object Lifecycle
+challengeType: 11
+videoId: p1r3h_AMMIM
+bilibiliIds:
+  aid: 461998717
+  bvid: BV1JL411n7Hr
+  cid: 377529681
+dashedName: object-lifecycle
+---
+
+# --question--
+
+## --text--
+
+What will the following program print?:
+
+```python
+class PartyAnimal:
+    x = 0
+    name = ''
+    def __init__(self, nam):
+        self.name = nam
+        print(self.name,'constructed')
+    def party(self):
+        self.x = self.x + 1
+        print(self.name,'party count',self.x)
+
+q = PartyAnimal('Quincy')
+m = PartyAnimal('Miya')
+
+q.party()
+m.party()
+q.party()
+```
+
+## --answers--
+
+<pre>
+Quincy constructed
+Miya constructed
+Quincy party count 1
+Miya party count 2
+Quincy party count 3
+</pre>
+
+---
+
+<pre>
+Quincy constructed
+Miya constructed
+Quincy party count 1
+Miya party count 1
+Quincy party count 2
+</pre>
+
+---
+
+<pre>
+Quincy constructed
+Quincy party count 1
+Quincy party count 2
+Miya constructed
+Miya party count 1
+</pre>
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md
new file mode 100644
index 00000000000..956ee3e10ff
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-a-sample-class.md
@@ -0,0 +1,62 @@
+---
+id: 5e7b9f160b6c005b0e76f086
+title: 'Objects: A Sample Class'
+challengeType: 11
+videoId: FiABKEuaSJ8
+bilibiliIds:
+  aid: 589451777
+  bvid: BV1rq4y1X7TG
+  cid: 377523194
+dashedName: objects-a-sample-class
+---
+
+# --question--
+
+## --text--
+
+What will the following program print?:
+
+```python
+class PartyAnimal:
+    x = 0
+    def party(self):
+        self.x = self.x + 2
+        print(self.x)
+
+an = PartyAnimal()
+an.party()
+an.party()
+```
+
+## --answers--
+
+<pre>
+So far 1
+So far 2
+</pre>
+
+---
+
+<pre>
+0
+0
+</pre>
+
+---
+
+<pre>
+2
+2
+</pre>
+
+---
+
+<pre>
+2
+4
+</pre>
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md
new file mode 100644
index 00000000000..285061db3ac
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/objects-inheritance.md
@@ -0,0 +1,38 @@
+---
+id: 5e7b9f170b6c005b0e76f088
+title: 'Objects: Inheritance'
+challengeType: 11
+videoId: FBL3alYrxRM
+bilibiliIds:
+  aid: 631990691
+  bvid: BV1sb4y1r7GF
+  cid: 377529901
+dashedName: objects-inheritance
+---
+
+# --question--
+
+## --text--
+
+What is inheritance in object-oriented programming?
+
+## --answers--
+
+A new class created when a parent class is extended.
+
+---
+
+A constructed instance of a class.
+
+---
+
+The ability to create a new class by extending an existing class.
+
+---
+
+A method that is called at the moment when a class is being used to construct an object.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md
new file mode 100644
index 00000000000..962ec931113
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-dictionaries.md
@@ -0,0 +1,59 @@
+---
+id: 5e7b9f090b6c005b0e76f067
+title: Python Dictionaries
+challengeType: 11
+videoId: dnzvfimrRMg
+bilibiliIds:
+  aid: 631893305
+  bvid: BV19b4y167kj
+  cid: 376386176
+dashedName: python-dictionaries
+---
+
+# --question--
+
+## --text--
+
+What does dict equal after running this code?:
+
+```python
+dict = {"Fri": 20, "Thu": 6, "Sat": 1}
+dict["Thu"] = 13
+dict["Sat"] = 2
+dict["Sun"] = 9
+```
+
+## --answers--
+
+```python
+{'Fri': 20, 'Thu': 6, 'Sat': 1}
+```
+
+---
+
+```python
+{'Fri': 20, 'Thu': 6, 'Sat': 1, 'Thu': 13, 'Sat': 2, 'Sun': 9}
+```
+
+---
+
+```python
+{'Sun': 9}
+```
+
+---
+
+```python
+{'Thu': 13, 'Sat': 2, 'Sun': 9}
+```
+
+---
+
+```python
+{'Fri': 20, 'Thu': 13, 'Sat': 2, 'Sun': 9}
+```
+
+## --video-solution--
+
+5
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-functions.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-functions.md
new file mode 100644
index 00000000000..3b5ea72b3c7
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-functions.md
@@ -0,0 +1,42 @@
+---
+id: 5e7b9f060b6c005b0e76f05a
+title: Python Functions
+challengeType: 11
+videoId: 3JGF-n3tDPU
+bilibiliIds:
+  aid: 631881917
+  bvid: BV1Xb4y167P4
+  cid: 376337920
+dashedName: python-functions
+---
+
+# --question--
+
+## --text--
+
+What is the purpose of the "def" keyword in Python?
+
+## --answers--
+
+It is slang that means "The following code is really cool."
+
+---
+
+It indicates the start of a function.
+
+---
+
+It indicates that the following indented section of code is to be stored for later.
+
+---
+
+It indicates the start of a function, and the following indented section of code is to be stored for later.
+
+---
+
+None of the above.
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-lists.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-lists.md
new file mode 100644
index 00000000000..4266a29a5e0
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-lists.md
@@ -0,0 +1,43 @@
+---
+id: 5e7b9f080b6c005b0e76f064
+title: Python Lists
+challengeType: 11
+videoId: Y0cvfDpYC_c
+bilibiliIds:
+  aid: 249460305
+  bvid: BV1Dv411E7Uj
+  cid: 376532993
+dashedName: python-lists
+---
+
+# --question--
+
+## --text--
+
+What is the value of x after running this code:
+
+```python
+fruit = "banana"
+x = fruit[1]
+```
+
+## --answers--
+
+banana
+
+---
+
+a
+
+---
+
+b
+
+---
+
+True
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-objects.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-objects.md
new file mode 100644
index 00000000000..6e8ed9b8c55
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/python-objects.md
@@ -0,0 +1,38 @@
+---
+id: 5e7b9f160b6c005b0e76f085
+title: Python Objects
+challengeType: 11
+videoId: uJxGeTYy0us
+bilibiliIds:
+  aid: 889496260
+  bvid: BV1ZP4y1s7G6
+  cid: 377522762
+dashedName: python-objects
+---
+
+# --question--
+
+## --text--
+
+Which is NOT true about objects in Python?
+
+## --answers--
+
+Objects get created and used.
+
+---
+
+Objects are bits of code and data.
+
+---
+
+Objects hide detail.
+
+---
+
+Objects are one of the five standard data types.
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/reading-files.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/reading-files.md
new file mode 100644
index 00000000000..c4cc75d8e4d
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/reading-files.md
@@ -0,0 +1,42 @@
+---
+id: 5e7b9f080b6c005b0e76f062
+title: Reading Files
+challengeType: 11
+videoId: Fo1tW09KIwo
+bilibiliIds:
+  aid: 334439927
+  bvid: BV1pw411R7UK
+  cid: 376532076
+dashedName: reading-files
+---
+
+# --question--
+
+## --text--
+
+What is used to indicate a new line in a string?
+
+## --answers--
+
+\\n
+
+---
+
+{new_line}
+
+---
+
+{n}
+
+---
+
+/n
+
+---
+
+/new
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md
new file mode 100644
index 00000000000..2426a907099
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-matching-and-extracting-data.md
@@ -0,0 +1,45 @@
+---
+id: 5e7b9f0b0b6c005b0e76f06f
+title: 'Regular Expressions: Matching and Extracting Data'
+challengeType: 11
+videoId: LaCZnTbQGkE
+bilibiliIds:
+  aid: 975629041
+  bvid: BV1i44y1b7hE
+  cid: 414167130
+dashedName: regular-expressions-matching-and-extracting-data
+---
+
+# --question--
+
+## --text--
+
+What will the following program print?:
+
+```python
+import re
+s = 'A message from csev@umich.edu to cwen@iupui.edu about meeting @2PM'
+lst = re.findall('\\S+@\\S+', s)
+print(lst)
+```
+
+## --answers--
+
+['csev@umich.edu', 'cwen@iupui.edu']
+
+---
+
+['csev@umich.edu']
+
+---
+
+['umich.edu', 'iupui.edu']
+
+---
+
+['csev@', 'cwen@']
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md
new file mode 100644
index 00000000000..865668ab710
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions-practical-applications.md
@@ -0,0 +1,38 @@
+---
+id: 5e7b9f0b0b6c005b0e76f070
+title: 'Regular Expressions: Practical Applications'
+challengeType: 11
+videoId: xCjFU9G6x48
+bilibiliIds:
+  aid: 546924659
+  bvid: BV1mq4y1H7rZ
+  cid: 376386493
+dashedName: regular-expressions-practical-applications
+---
+
+# --question--
+
+## --text--
+
+What will search for a "$" in a regular expression?
+
+## --answers--
+
+$
+
+---
+
+\\dollar\\
+
+---
+
+\\$
+
+---
+
+!$
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md
new file mode 100644
index 00000000000..d48b4942469
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/regular-expressions.md
@@ -0,0 +1,42 @@
+---
+id: 5e7b9f0b0b6c005b0e76f06e
+title: Regular Expressions
+challengeType: 11
+videoId: Yud_COr6pZo
+bilibiliIds:
+  aid: 759422542
+  bvid: BV1W64y167YD
+  cid: 376387549
+dashedName: regular-expressions
+---
+
+# --question--
+
+## --text--
+
+Which regex matches only a white space character?
+
+## --answers--
+
+\\S
+
+---
+
+\\s
+
+---
+
+.
+
+---
+
+\_
+
+---
+
+\\.
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md
new file mode 100644
index 00000000000..d891951cb05
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-database-design.md
@@ -0,0 +1,38 @@
+---
+id: 5e7b9f180b6c005b0e76f08c
+title: Relational Database Design
+challengeType: 11
+videoId: AqdfbrpkbHk
+bilibiliIds:
+  aid: 504388066
+  bvid: BV1Qg411j742
+  cid: 377532216
+dashedName: relational-database-design
+---
+
+# --question--
+
+## --text--
+
+What is the best practice for how many times a piece of string data should be stored in a database?
+
+## --answers--
+
+0
+
+---
+
+1
+
+---
+
+2
+
+---
+
+3
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md
new file mode 100644
index 00000000000..a7c898a3d22
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md
@@ -0,0 +1,44 @@
+---
+id: 5e7b9f170b6c005b0e76f08a
+title: Relational Databases and SQLite
+challengeType: 11
+videoId: QlNod5-kFpA
+bilibiliIds:
+  aid: 249449958
+  bvid: BV12v411E74H
+  cid: 377530805
+dashedName: relational-databases-and-sqlite
+---
+
+# --description--
+
+<a href="https://www.sqlite.org/download.html" target="_blank" rel="noopener noreferrer nofollow">Download SQLite</a>  
+<a href="https://sqlitebrowser.org/dl/" target="_blank" rel="noopener noreferrer nofollow">Download DB Browser for SQLite</a>  
+<a href="https://www.sqlite.org/famous.html" target="_blank" rel="noopener noreferrer nofollow">SQLite usage</a>
+
+# --question--
+
+## --text--
+
+Which is NOT a primary data structure in a database?
+
+## --answers--
+
+index
+
+---
+
+table
+
+---
+
+row
+
+---
+
+column
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md
new file mode 100644
index 00000000000..85f34ae6128
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-join-operation.md
@@ -0,0 +1,34 @@
+---
+id: 5e7b9f180b6c005b0e76f08f
+title: 'Relational Databases: Join Operation'
+challengeType: 11
+videoId: jvDw3D9GKac
+bilibiliIds:
+  aid: 804461215
+  bvid: BV1Ry4y1j7tv
+  cid: 377542880
+dashedName: relational-databases-join-operation
+---
+
+# --question--
+
+## --text--
+
+When using a JOIN clause in an SQL statement, what does ON do?
+
+## --answers--
+
+It indicates what tables to perform the JOIN on.
+
+---
+
+It specifies the fields to use for the JOIN.
+
+---
+
+It indicates how the two tables are to be joined.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md
new file mode 100644
index 00000000000..53b73ce222b
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md
@@ -0,0 +1,52 @@
+---
+id: 5e7b9f190b6c005b0e76f090
+title: 'Relational Databases: Many-to-many Relationships'
+challengeType: 11
+videoId: z-SBYcvEQOc
+bilibiliIds:
+  aid: 291965127
+  bvid: BV1Af4y1L7BK
+  cid: 377543409
+dashedName: relational-databases-many-to-many-relationships
+---
+
+# --description--
+
+More resources:
+
+\- <a href="https://www.youtube.com/watch?v=uQ3Qv1z_Vao" target="_blank" rel="noopener noreferrer nofollow">Exercise: Email</a>
+
+\- <a href="https://www.youtube.com/watch?v=qEkUEAz8j3o" target="_blank" rel="noopener noreferrer nofollow">Exercise: Roster</a>
+
+\- <a href="https://www.youtube.com/watch?v=I-E7avcPeSE" target="_blank" rel="noopener noreferrer nofollow">Exercise: Tracks</a>
+
+\- <a href="https://www.youtube.com/watch?v=RZRAoBFIH6A" target="_blank" rel="noopener noreferrer nofollow">Exercise: Twfriends</a>
+
+\- <a href="https://www.youtube.com/watch?v=xBaJddvJL4A" target="_blank" rel="noopener noreferrer nofollow">Exercise: Twspider</a>
+
+# --question--
+
+## --text--
+
+Which is an example of a many-to-many relationship?
+
+## --answers--
+
+teacher to student
+
+---
+
+customer to order
+
+---
+
+book to pages
+
+---
+
+city to country
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md
new file mode 100644
index 00000000000..b9d6049238e
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/relational-databases-relationship-building.md
@@ -0,0 +1,34 @@
+---
+id: 5e7b9f180b6c005b0e76f08e
+title: 'Relational Databases: Relationship Building'
+challengeType: 11
+videoId: CSbqczsHVnc
+bilibiliIds:
+  aid: 376996473
+  bvid: BV1jo4y1S7VY
+  cid: 377532966
+dashedName: relational-databases-relationship-building
+---
+
+# --question--
+
+## --text--
+
+What does the INSERT command do in SQL?
+
+## --answers--
+
+It defines a new row by listing the fields we want to include followed by the values we want placed in the new row.
+
+---
+
+It defines a new column by listing the rows we want to include followed by the values we want placed in the new column.
+
+---
+
+It defines a new table by listing the rows and fields we want to include followed by the values that we want placed in the table.
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md
new file mode 100644
index 00000000000..0d5729bb07a
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/representing-relationships-in-a-relational-database.md
@@ -0,0 +1,38 @@
+---
+id: 5e7b9f180b6c005b0e76f08d
+title: Representing Relationships in a Relational Database
+challengeType: 11
+videoId: '-orenCNdC2Q'
+bilibiliIds:
+  aid: 931953070
+  bvid: BV1FM4y1N7hc
+  cid: 377532529
+dashedName: representing-relationships-in-a-relational-database
+---
+
+# --question--
+
+## --text--
+
+What is a foreign key?
+
+## --answers--
+
+A key that is not supposed to be there.
+
+---
+
+A key that uses non-latin characters.
+
+---
+
+A number that points to the primary key of an associated row in a different table.
+
+---
+
+A key that the "real world" might use to look up a row.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md
new file mode 100644
index 00000000000..9ba1ca3e9c8
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md
@@ -0,0 +1,51 @@
+---
+id: 5e7b9f090b6c005b0e76f066
+title: Strings and Lists
+challengeType: 11
+videoId: lxcFa7ldCi0
+bilibiliIds:
+  aid: 804401443
+  bvid: BV1By4y1j7F9
+  cid: 376385517
+dashedName: strings-and-lists
+---
+
+# --description--
+
+More resources:
+
+\- <a href="https://www.youtube.com/watch?v=-9TfJF2dwHI" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+
+# --question--
+
+## --text--
+
+What does n equal in this code?
+
+```python
+words = 'His e-mail is q-lar@freecodecamp.org'
+pieces = words.split()
+parts = pieces[3].split('-')
+n = parts[1]
+```
+
+## --answers--
+
+mail
+
+---
+
+q
+
+---
+
+lar
+
+---
+
+`lar@freecodecamp.org`
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md
new file mode 100644
index 00000000000..25d7a36267e
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/strings-in-python.md
@@ -0,0 +1,63 @@
+---
+id: 5e7b9f070b6c005b0e76f060
+title: Strings in Python
+challengeType: 11
+videoId: LYZj207fKpQ
+bilibiliIds:
+  aid: 504434218
+  bvid: BV1Lg41177s8
+  cid: 376531802
+dashedName: strings-in-python
+---
+
+# --question--
+
+## --text--
+
+What will the following code print?:
+
+```python
+for n in "banana":
+    print(n)
+```
+
+## --answers--
+
+<pre>
+n
+n
+</pre>
+
+---
+
+<pre>
+0
+1
+</pre>
+
+---
+
+<pre>
+0
+1
+2
+3
+4
+5
+</pre>
+
+---
+
+<pre>
+b
+a
+n
+a
+n
+a
+</pre>
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md
new file mode 100644
index 00000000000..a5bdb4ead0d
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/the-tuples-collection.md
@@ -0,0 +1,63 @@
+---
+id: 5e7b9f0a0b6c005b0e76f06c
+title: The Tuples Collection
+challengeType: 11
+videoId: 3Lxpladfh2k
+bilibiliIds:
+  aid: 334468209
+  bvid: BV1aw411R77G
+  cid: 376533308
+dashedName: the-tuples-collection
+---
+
+# --question--
+
+## --text--
+
+What will the following code print?:
+
+```python
+d = dict()
+d['quincy'] = 1
+d['beau'] = 5
+d['kris'] = 9
+for (k,i) in d.items():
+    print(k, i)
+```
+
+## --answers--
+
+<pre>
+k i
+k i
+k i
+</pre>
+
+---
+
+<pre>
+quincy 0
+beau 1
+kris 2
+</pre>
+
+---
+
+<pre>
+quincy 1
+beau 5
+kris 9
+</pre>
+
+---
+
+<pre>
+1 quincy
+5 beau
+9 kris
+</pre>
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/using-web-services.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/using-web-services.md
new file mode 100644
index 00000000000..efde4ee7116
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/using-web-services.md
@@ -0,0 +1,42 @@
+---
+id: 5e7b9f0e0b6c005b0e76f07a
+title: Using Web Services
+challengeType: 11
+videoId: oNl1OVDPGKE
+bilibiliIds:
+  aid: 759406136
+  bvid: BV1b64y16746
+  cid: 377332189
+dashedName: using-web-services
+---
+
+# --question--
+
+## --text--
+
+What are the two most common ways to send data over the internet?
+
+## --answers--
+
+JSON and TXT
+
+---
+
+JSON and XML
+
+---
+
+XML and TXT
+
+---
+
+XML and PHP
+
+---
+
+PHP and TXT
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md
new file mode 100644
index 00000000000..09fc7f3864e
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/variables-expressions-and-statements.md
@@ -0,0 +1,38 @@
+---
+id: 5e7b9f050b6c005b0e76f056
+title: 'Variables, Expressions, and Statements'
+challengeType: 11
+videoId: nELR-uyyrok
+bilibiliIds:
+  aid: 419396811
+  bvid: BV1iV411p7Mn
+  cid: 376318116
+dashedName: variables-expressions-and-statements
+---
+
+# --question--
+
+## --text--
+
+What is the symbol used in an assignment statement?
+
+## --answers--
+
+~
+
+---
+
+&
+
+---
+
+=
+
+---
+
+\|
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md
new file mode 100644
index 00000000000..31853c7188d
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/visualizing-data-with-python.md
@@ -0,0 +1,42 @@
+---
+id: 5e7b9f690b6c005b0e76f095
+title: Visualizing Data with Python
+challengeType: 11
+videoId: e3lydkH0prw
+bilibiliIds:
+  aid: 291996462
+  bvid: BV15f4y1L7jH
+  cid: 377544192
+dashedName: visualizing-data-with-python
+---
+
+# --question--
+
+## --text--
+
+Most data needs to be \_\_\_\_\_\_ before using it.
+
+## --answers--
+
+converted to JSON format
+
+---
+
+graphed
+
+---
+
+cleaned
+
+---
+
+memorized
+
+---
+
+turned into song
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md
new file mode 100644
index 00000000000..53f2e714cae
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md
@@ -0,0 +1,50 @@
+---
+id: 5e7b9f150b6c005b0e76f080
+title: 'Web Services: API Rate Limiting and Security'
+challengeType: 11
+videoId: pI-g0lI8ngs
+bilibiliIds:
+  aid: 249456172
+  bvid: BV1Sv411E7qa
+  cid: 377336269
+dashedName: web-services-api-rate-limiting-and-security
+---
+
+# --description--
+
+More resources:
+
+\- <a href="https://www.youtube.com/watch?v=TJGJN0T8tak" target="_blank" rel="noopener noreferrer nofollow">Exercise: GeoJSON</a>
+
+\- <a href="https://www.youtube.com/watch?v=vTmw5RtfGMY" target="_blank" rel="noopener noreferrer nofollow">Exercise: JSON</a>
+
+\- <a href="https://www.youtube.com/watch?v=2c7YwhvpCro" target="_blank" rel="noopener noreferrer nofollow">Exercise: Twitter</a>
+
+\- <a href="https://www.youtube.com/watch?v=AopYOlDa-vY" target="_blank" rel="noopener noreferrer nofollow">Exercise: XML</a>
+
+# --question--
+
+## --text--
+
+When making a request from the Twitter API, what information must always be sent with the request?
+
+## --answers--
+
+Twitter username
+
+---
+
+date range
+
+---
+
+search term
+
+---
+
+key
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md
new file mode 100644
index 00000000000..64d89a2f9c9
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-apis.md
@@ -0,0 +1,38 @@
+---
+id: 5e7b9f150b6c005b0e76f07f
+title: 'Web Services: APIs'
+challengeType: 11
+videoId: oUNn1psfBJg
+bilibiliIds:
+  aid: 589451017
+  bvid: BV1zq4y1X7A9
+  cid: 377336011
+dashedName: web-services-apis
+---
+
+# --question--
+
+## --text--
+
+What does API stand for?
+
+## --answers--
+
+Application Portable Intelligence
+
+---
+
+Associate Programming International
+
+---
+
+Application Program Interface
+
+---
+
+Action Portable Interface
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-json.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-json.md
new file mode 100644
index 00000000000..9716520ee1b
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-json.md
@@ -0,0 +1,60 @@
+---
+id: 5e7b9f140b6c005b0e76f07d
+title: 'Web Services: JSON'
+challengeType: 11
+videoId: ZJE-U56BppM
+bilibiliIds:
+  aid: 419491911
+  bvid: BV1r3411672w
+  cid: 377332928
+dashedName: web-services-json
+---
+
+# --question--
+
+## --text--
+
+What will the following code print?:
+
+```python
+import json
+data = '''
+  [
+    { "id" : "001",
+      "x" : "2",
+     "name" : "Quincy"
+    } ,
+    { "id" : "009",
+      "x" : "7",
+      "name" : "Mrugesh"
+    }
+  ]
+'''
+info = json.loads(data)
+print(info[1]['name'])
+```
+
+## --answers--
+
+Quincy
+
+---
+
+Mrugesh
+
+---
+
+001
+
+---
+
+009
+
+---
+
+[Error]
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md
new file mode 100644
index 00000000000..e246a3b48ff
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-service-oriented-approach.md
@@ -0,0 +1,34 @@
+---
+id: 5e7b9f140b6c005b0e76f07e
+title: 'Web Services: Service Oriented Approach'
+challengeType: 11
+videoId: muerlsCHExI
+bilibiliIds:
+  aid: 846899335
+  bvid: BV1E54y1J7oz
+  cid: 377333277
+dashedName: web-services-service-oriented-approach
+---
+
+# --question--
+
+## --text--
+
+With a services oriented approach to developing web apps, where is the data located?
+
+## --answers--
+
+Spread across many computer systems connected via the internet or internal network.
+
+---
+
+Within different services on the main web server.
+
+---
+
+On a separate database server.
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md
new file mode 100644
index 00000000000..585ea239633
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml-schema.md
@@ -0,0 +1,34 @@
+---
+id: 5e7b9f0e0b6c005b0e76f07c
+title: 'Web Services: XML Schema'
+challengeType: 11
+videoId: yWU9kTxW-nc
+bilibiliIds:
+  aid: 631951466
+  bvid: BV1Vb4y1r7m7
+  cid: 377332603
+dashedName: web-services-xml-schema
+---
+
+# --question--
+
+## --text--
+
+What is XSD?
+
+## --answers--
+
+The W3C Schema specification for XML.
+
+---
+
+The standard JSON schema from MOZ.
+
+---
+
+Extensible Situational Driver
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md
new file mode 100644
index 00000000000..226d773ca77
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/web-services-xml.md
@@ -0,0 +1,47 @@
+---
+id: 5e7b9f0e0b6c005b0e76f07b
+title: 'Web Services: XML'
+challengeType: 11
+videoId: _pZ0srbg7So
+bilibiliIds:
+  aid: 761920032
+  bvid: BV1n64y1x7KW
+  cid: 377332379
+dashedName: web-services-xml
+---
+
+# --question--
+
+## --text--
+
+What is wrong with the following XML?:
+
+```xml
+<person>
+  <name>Chuck</name>
+  <phone type="intl">
+    +1 734 303 4456
+  <email hide="yes" />
+</person>
+```
+
+## --answers--
+
+Email tag is missing closing tag.
+
+---
+
+Spacing will cause XML to be invalid.
+
+---
+
+Phone tag is missing closing tag.
+
+---
+
+Plain text should be encoded using UTF-8.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md
new file mode 100644
index 00000000000..b6712797e7d
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/python-for-everybody/working-with-lists.md
@@ -0,0 +1,38 @@
+---
+id: 5e7b9f090b6c005b0e76f065
+title: Working with Lists
+challengeType: 11
+videoId: lCnHfTHkhbE
+bilibiliIds:
+  aid: 376965958
+  bvid: BV1No4y1S7oi
+  cid: 376387989
+dashedName: working-with-lists
+---
+
+# --question--
+
+## --text--
+
+Which method is used to add an item at the end of a list?
+
+## --answers--
+
+insert
+
+---
+
+push
+
+---
+
+append
+
+---
+
+new
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
new file mode 100644
index 00000000000..e00fec93601
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
@@ -0,0 +1,100 @@
+---
+id: 5e44412c903586ffb414c94c
+title: Arithmetic Formatter
+challengeType: 10
+forumTopicId: 462359
+dashedName: arithmetic-formatter
+---
+
+# --description--
+
+You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-arithmetic-formatter" target="_blank" rel="noopener noreferrer nofollow"> working on this project with our Replit starter code</a>.
+
+# --instructions--
+
+Students in primary school often arrange arithmetic problems vertically to make them easier to solve. For example, "235 + 52" becomes:
+
+```py
+  235
++  52
+-----
+```
+
+Create a function that receives a list of strings that are arithmetic problems and returns the problems arranged vertically and side-by-side. The function should optionally take a second argument. When the second argument is set to `True`, the answers should be displayed.
+
+## Example
+
+Function Call:
+
+```py
+arithmetic_arranger(["32 + 698", "3801 - 2", "45 + 43", "123 + 49"])
+```
+
+Output:
+
+```py
+   32      3801      45      123
++ 698    -    2    + 43    +  49
+-----    ------    ----    -----
+```
+
+Function Call:
+
+```py
+arithmetic_arranger(["32 + 8", "1 - 3801", "9999 + 9999", "523 - 49"], True)
+```
+
+Output:
+
+```py
+  32         1      9999      523
++  8    - 3801    + 9999    -  49
+----    ------    ------    -----
+  40     -3800     19998      474
+```
+
+## Rules
+
+The function will return the correct conversion if the supplied problems are properly formatted, otherwise, it will **return** a **string** that describes an error that is meaningful to the user.
+
+
+- Situations that will return an error:
+  - If there are **too many problems** supplied to the function. The limit is **five**, anything more will return: `Error: Too many problems.`
+  - The appropriate operators the function will accept are **addition** and **subtraction**. Multiplication and division will return an error. Other operators not mentioned in this bullet point will not need to be tested. The error returned will be: `Error: Operator must be '+' or '-'.`
+  - Each number (operand) should only contain digits. Otherwise, the function will return: `Error: Numbers must only contain digits.`
+  - Each operand (aka number on each side of the operator) has a max of four digits in width. Otherwise, the error string returned will be: `Error: Numbers cannot be more than four digits.`
+- If the user supplied the correct format of problems, the conversion you return will follow these rules:
+  - There should be a single space between the operator and the longest of the two operands, the operator will be on the same line as the second operand, both operands will be in the same order as provided (the first will be the top one and the second will be the bottom).
+  - Numbers should be right-aligned.
+  - There should be four spaces between each problem.
+  - There should be dashes at the bottom of each problem. The dashes should run along the entire length of each problem individually. (The example above shows what this should look like.)
+
+## Development
+
+Write your code in `arithmetic_arranger.py`. For development, you can use `main.py` to test your `arithmetic_arranger()` function. Click the "run" button and `main.py` will run.
+
+## Testing
+
+The unit tests for this project are in `test_module.py`. We are running the tests from `test_module.py` in `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button. Alternatively you may run the tests by inputting `pytest` in the console.
+
+## Submitting
+
+Copy your project's URL and submit it below.
+
+# --hints--
+
+It should correctly format an arithmetic problem and pass all tests.
+
+```js
+
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions,
+  because they would need to be tested against a full working project.
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md
new file mode 100644
index 00000000000..b4d304f00df
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md
@@ -0,0 +1,102 @@
+---
+id: 5e44413e903586ffb414c94e
+title: Budget App
+challengeType: 10
+forumTopicId: 462361
+dashedName: budget-app
+---
+
+# --description--
+
+You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-budget-app" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+
+# --instructions--
+
+Complete the `Category` class in `budget.py`. 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 `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 `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:
+
+- A title line of 30 characters where the name of the category is centered in a line of `*` characters.
+- A list of the items in the ledger. Each line should show the description and amount. The first 23 characters of the description should be displayed, then the amount. The amount should be right aligned, contain two decimal places, and display a maximum of 7 characters.
+- A line displaying the category total.
+
+Here is an example of the output:
+
+```bash
+*************Food*************
+initial deposit        1000.00
+groceries               -10.15
+restaurant and more foo -15.89
+Transfer to Clothing    -50.00
+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".
+
+This function will be tested with up to four categories.
+
+Look at the example output below very closely and make sure the spacing of the output matches the example exactly.
+
+```bash
+Percentage spent by category
+100|          
+ 90|          
+ 80|          
+ 70|          
+ 60| o        
+ 50| o        
+ 40| o        
+ 30| o        
+ 20| o  o     
+ 10| o  o  o  
+  0| o  o  o  
+    ----------
+     F  C  A  
+     o  l  u  
+     o  o  t  
+     d  t  o  
+        h     
+        i     
+        n     
+        g     
+```
+
+The unit tests for this project are in `test_module.py`.
+
+## Development
+
+Write your code in `budget.py`. For development, you can use `main.py` to test your `Category` class. Click the "run" button and `main.py` will run.
+
+## Testing
+
+We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button.
+
+## Submitting
+
+Copy your project's URL and submit it to freeCodeCamp.
+
+# --hints--
+
+It should create a Category class and pass all tests.
+
+```js
+
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions,
+  because they would need to be tested against a full working project.
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md
new file mode 100644
index 00000000000..af5f4697e39
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md
@@ -0,0 +1,112 @@
+---
+id: 5e444147903586ffb414c94f
+title: Polygon Area Calculator
+challengeType: 10
+forumTopicId: 462363
+dashedName: polygon-area-calculator
+---
+
+# --description--
+
+You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-polygon-area-calculator" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+
+# --instructions--
+
+In this project you will use object oriented programming to create a Rectangle class and a Square class. The Square class should be a subclass of Rectangle and inherit methods and attributes.
+
+## Rectangle class
+
+When a Rectangle object is created, it should be initialized with `width` and `height` attributes. The class should also contain the following methods:
+
+- `set_width`
+- `set_height`
+- `get_area`: Returns area (`width * height`)
+- `get_perimeter`: Returns perimeter (`2 * width + 2 * height`)
+- `get_diagonal`: Returns diagonal (`(width ** 2 + height ** 2) ** .5`)
+- `get_picture`: Returns a string that represents the shape using lines of "\*". The number of lines should be equal to the height and the number of "\*" in each line should be equal to the width. There should be a new line (`\n`) at the end of each line. If the width or height is larger than 50, this should return the string: "Too big for picture.".
+- `get_amount_inside`: Takes another shape (square or rectangle) as an argument. Returns the number of times the passed in shape could fit inside the shape (with no rotations). For instance, a rectangle with a width of 4 and a height of 8 could fit in two squares with sides of 4.
+
+Additionally, if an instance of a Rectangle is represented as a string, it should look like: `Rectangle(width=5, height=10)`
+
+## Square class
+
+The Square class should be a subclass of Rectangle. When a Square object is created, a single side length is passed in. The `__init__` method should store the side length in both the `width` and `height` attributes from the Rectangle class.
+
+The Square class should be able to access the Rectangle class methods but should also contain a `set_side` method. If an instance of a Square is represented as a string, it should look like: `Square(side=9)`
+
+Additionally, the `set_width` and `set_height` methods on the Square class should set both the width and height.
+
+## Usage example
+
+```py
+rect = shape_calculator.Rectangle(10, 5)
+print(rect.get_area())
+rect.set_height(3)
+print(rect.get_perimeter())
+print(rect)
+print(rect.get_picture())
+
+sq = shape_calculator.Square(9)
+print(sq.get_area())
+sq.set_side(4)
+print(sq.get_diagonal())
+print(sq)
+print(sq.get_picture())
+
+rect.set_height(8)
+rect.set_width(16)
+print(rect.get_amount_inside(sq))
+```
+
+That code should return:
+
+```bash
+50
+26
+Rectangle(width=10, height=3)
+**********
+**********
+**********
+
+81
+5.656854249492381
+Square(side=4)
+****
+****
+****
+****
+
+8
+```
+
+The unit tests for this project are in `test_module.py`.
+
+## Development
+
+Write your code in `shape_calculator.py`. For development, you can use `main.py` to test your `shape_calculator()` function. Click the "run" button and `main.py` will run.
+
+## Testing
+
+We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button.
+
+## Submitting
+
+Copy your project's URL and submit it to freeCodeCamp.
+
+# --hints--
+
+It should create a Rectangle class and Square class and pass all tests.
+
+```js
+
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions,
+  because they would need to be tested against a full working project.
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
new file mode 100644
index 00000000000..81860f5ce91
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
@@ -0,0 +1,86 @@
+---
+id: 5e44414f903586ffb414c950
+title: Probability Calculator
+challengeType: 10
+forumTopicId: 462364
+dashedName: probability-calculator
+---
+
+# --description--
+
+You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-probability-calculator" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+
+# --instructions--
+
+Suppose there is a hat containing 5 blue balls, 4 red balls, and 2 green balls. What is the probability that a random draw of 4 balls will contain at least 1 red ball and 2 green balls? While it would be possible to calculate the probability using advanced mathematics, an easier way is to write a program to perform a large number of experiments to estimate an approximate probability.
+
+For this project, you will write a program to determine the approximate probability of drawing certain balls randomly from a hat.
+
+First, create a `Hat` class in `prob_calculator.py`. The class should take a variable number of arguments that specify the number of balls of each color that are in the hat. For example, a class object could be created in any of these ways:
+
+```py
+hat1 = Hat(yellow=3, blue=2, green=6)
+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"]`.
+
+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 `prob_calculator.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}`.
+- `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.)
+
+The `experiment` function should return a probability.
+
+For example, if you want to determine the probability of getting at least two red balls and one green ball when you draw five balls from a hat containing six black, four red, and three green. To do this, you will perform `N` experiments, count how many times `M` you get at least two red balls and one green ball, and estimate the probability as `M/N`. Each experiment consists of starting with a hat containing the specified balls, drawing several balls, and checking if you got the balls you were attempting to draw.
+
+Here is how you would call the `experiment` function based on the example above with 2000 experiments:
+
+```py
+hat = Hat(black=6, red=4, green=3)
+probability = experiment(hat=hat,
+                  expected_balls={"red":2,"green":1},
+                  num_balls_drawn=5,
+                  num_experiments=2000)
+```
+
+Since this is based on random draws, the probability will be slightly different each time the code is run.
+
+*Hint: Consider using the modules that are already imported at the top of `prob_calculator.py`. Do not initialize random seed within `prob_calculator.py`.*
+
+## Development
+
+Write your code in `prob_calculator.py`. For development, you can use `main.py` to test your code. Click the "run" button and `main.py` will run.
+
+The boilerplate includes `import` statements for the `copy` and `random` modules. Consider using those in your project.
+
+## Testing
+
+The unit tests for this project are in `test_module.py`. We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button.
+
+## Submitting
+
+Copy your project's URL and submit it to freeCodeCamp.
+
+# --hints--
+
+It should correctly calculate probabilities and pass all tests.
+
+```js
+
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions,
+  because they would need to be tested against a full working project.
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md b/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md
new file mode 100644
index 00000000000..d1679196ce3
--- /dev/null
+++ b/curriculum/challenges/arabic/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md
@@ -0,0 +1,79 @@
+---
+id: 5e444136903586ffb414c94d
+title: Time Calculator
+challengeType: 10
+forumTopicId: 462360
+dashedName: time-calculator
+---
+
+# --description--
+
+You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-time-calculator" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+
+# --instructions--
+
+Write a function named `add_time` that takes in two required parameters and one optional parameter:
+
+- a start time in the 12-hour clock format (ending in AM or PM)
+- a duration time that indicates the number of hours and minutes
+- (optional) a starting day of the week, case insensitive
+
+The function should add the duration time to the start time and return the result.
+
+If the result will be the next day, it should show `(next day)` after the time. If the result will be more than one day later, it should show `(n days later)` after the time, where "n" is the number of days later.
+
+If the function is given the optional starting day of the week parameter, then the output should display the day of the week of the result. The day of the week in the output should appear after the time and before the number of days later.
+
+Below are some examples of different cases the function should handle. Pay close attention to the spacing and punctuation of the results.
+
+```py
+add_time("3:00 PM", "3:10")
+# Returns: 6:10 PM
+
+add_time("11:30 AM", "2:32", "Monday")
+# Returns: 2:02 PM, Monday
+
+add_time("11:43 AM", "00:20")
+# Returns: 12:03 PM
+
+add_time("10:10 PM", "3:30")
+# Returns: 1:40 AM (next day)
+
+add_time("11:43 PM", "24:20", "tueSday")
+# Returns: 12:03 AM, Thursday (2 days later)
+
+add_time("6:30 PM", "205:12")
+# Returns: 7:42 AM (9 days later)
+```
+
+Do not import any Python libraries. Assume that the start times are valid times. The minutes in the duration time will be a whole number less than 60, but the hour can be any whole number.
+
+## Development
+
+Write your code in `time_calculator.py`. For development, you can use `main.py` to test your `time_calculator()` function. Click the "run" button and `main.py` will run.
+
+## Testing
+
+The unit tests for this project are in `test_module.py`. We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button.
+
+## Submitting
+
+Copy your project's URL and submit it to freeCodeCamp.
+
+# --hints--
+
+It should correctly add times and pass all tests.
+
+```js
+
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions,
+  because they would need to be tested against a full working project.
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-a.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-a.md
new file mode 100644
index 00000000000..5af2ffef9af
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-a.md
@@ -0,0 +1,47 @@
+---
+id: 5e9a093a74c4063ca6f7c14d
+title: Data Analysis Example A
+challengeType: 11
+videoId: nVAaxZ34khk
+bilibiliIds:
+  aid: 590571151
+  bvid: BV1sq4y1f7gr
+  cid: 409002372
+dashedName: data-analysis-example-a
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/FreeCodeCamp-Pandas-Real-Life-Example" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What does the shape of our dataframe tell us?
+
+## --answers--
+
+The size in gigabytes the dataframe we loaded into memory is.
+
+---
+
+How many rows and columns our dataframe has.
+
+---
+
+How many rows the source data had before loading.
+
+---
+
+How many columns the source data had before loading.
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-b.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-b.md
new file mode 100644
index 00000000000..19441c3cd45
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-analysis-example-b.md
@@ -0,0 +1,43 @@
+---
+id: 5e9a093a74c4063ca6f7c14e
+title: Data Analysis Example B
+challengeType: 11
+videoId: 0kJz0q0pvgQ
+bilibiliIds:
+  aid: 505593432
+  bvid: BV1kg411c7M6
+  cid: 409003530
+dashedName: data-analysis-example-b
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/FreeCodeCamp-Pandas-Real-Life-Example" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What does the `loc` method allow you to do?
+
+## --answers--
+
+Retrieve a subset of rows and columns by supplying integer-location arguments.
+
+---
+
+Access a group of rows and columns by supplying label(s) arguments.
+
+---
+
+Returns the first `n` rows based on the integer argument supplied.
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-and-visualizations.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-and-visualizations.md
new file mode 100644
index 00000000000..340cd5351d6
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-and-visualizations.md
@@ -0,0 +1,47 @@
+---
+id: 5e9a093a74c4063ca6f7c160
+title: Data Cleaning and Visualizations
+challengeType: 11
+videoId: mHjxzFS5_Z0
+bilibiliIds:
+  aid: 933107558
+  bvid: BV1KM4y137Ny
+  cid: 409019632
+dashedName: data-cleaning-and-visualizations
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/data-cleaning-rmotr-freecodecamp" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+When using Matplotlib's global API, what does the order of numbers mean here?
+
+```py
+plt.subplot(1, 2, 1)
+```
+
+## --answers--
+
+My figure will have one column, two rows, and I am going to start drawing in the first (left) plot.
+
+---
+
+I am going to start drawing in the first (left) plot, my figure will have two rows, and my figure will have one column.
+
+---
+
+My figure will have one row, two columns, and I am going to start drawing in the first (left) plot.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-duplicates.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-duplicates.md
new file mode 100644
index 00000000000..14cab33625a
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-duplicates.md
@@ -0,0 +1,43 @@
+---
+id: 5e9a093a74c4063ca6f7c15f
+title: Data Cleaning Duplicates
+challengeType: 11
+videoId: kj7QqjXhH6A
+bilibiliIds:
+  aid: 675611672
+  bvid: BV1VU4y1A7tu
+  cid: 409019368
+dashedName: data-cleaning-duplicates
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/data-cleaning-rmotr-freecodecamp" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+The Python method `.duplicated()` returns a boolean Series for your DataFrame. `True` is the return value for rows that:
+
+## --answers--
+
+contain a duplicate, where the value for the row contains the first occurrence of that value.
+
+---
+
+contain a duplicate, where the value for the row is at least the second occurrence of that value.
+
+---
+
+contain a duplicate, where the value for the row contains either the first or second occurrence.
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-introduction.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-introduction.md
new file mode 100644
index 00000000000..e81b41cd51d
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-introduction.md
@@ -0,0 +1,62 @@
+---
+id: 5e9a093a74c4063ca6f7c15d
+title: Data Cleaning Introduction
+challengeType: 11
+videoId: ovYNhnltVxY
+bilibiliIds:
+  aid: 250574398
+  bvid: BV1Pv411A7GN
+  cid: 409018611
+dashedName: data-cleaning-introduction
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/data-cleaning-rmotr-freecodecamp" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What will the following code print out?
+
+```py
+import pandas as pd
+import numpy as np
+
+s = pd.Series(['a', 3, np.nan, 1, np.nan])
+
+print(s.notnull().sum())
+```
+
+## --answers--
+
+3
+
+---
+
+<pre>0     True
+1     True
+2    False
+3     True
+4    False
+dtype: bool</pre>
+
+---
+
+<pre>0    False
+1    False
+2     True
+3    False
+4     True
+dtype: bool</pre>
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-with-dataframes.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-with-dataframes.md
new file mode 100644
index 00000000000..e1a58cfd19c
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/data-cleaning-with-dataframes.md
@@ -0,0 +1,74 @@
+---
+id: 5e9a093a74c4063ca6f7c15e
+title: Data Cleaning with DataFrames
+challengeType: 11
+videoId: sTMN_pdI6S0
+bilibiliIds:
+  aid: 505597026
+  bvid: BV1Yg411c7bx
+  cid: 409018948
+dashedName: data-cleaning-with-dataframes
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/data-cleaning-rmotr-freecodecamp" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What will the following code print out?
+
+```py
+import pandas as pd
+import numpy as np
+
+s = pd.Series([np.nan, 1, 2, np.nan, 3])
+s = s.fillna(method='ffill')
+
+print(s)
+```
+
+## --answers--
+
+<pre>
+0    1.0
+1    1.0
+2    2.0
+3    3.0
+4    3.0
+dtype: float64
+</pre>
+
+---
+
+<pre>
+0    NaN
+1    1.0
+2    2.0
+3    2.0
+4    3.0
+dtype: float64
+</pre>
+
+---
+
+<pre>
+0    NaN
+1    1.0
+2    2.0
+3    NaN
+4    3.0
+dtype: float64
+</pre>
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/how-to-use-jupyter-notebooks-intro.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/how-to-use-jupyter-notebooks-intro.md
new file mode 100644
index 00000000000..64166a8d41e
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/how-to-use-jupyter-notebooks-intro.md
@@ -0,0 +1,43 @@
+---
+id: 5e9a093a74c4063ca6f7c14f
+title: How to use Jupyter Notebooks Intro
+challengeType: 11
+videoId: h8caJq2Bb9w
+bilibiliIds:
+  aid: 293035919
+  bvid: BV1Hf4y1n7qr
+  cid: 409002965
+dashedName: how-to-use-jupyter-notebooks-intro
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/ds-content-interactive-jupyterlab-tutorial" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What is **not** allowed in a Jupyter Notebook's cell?
+
+## --answers--
+
+Markdown
+
+---
+
+Python code
+
+---
+
+An Excel sheet
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md
new file mode 100644
index 00000000000..fe6aba72a0f
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/introduction-to-data-analysis.md
@@ -0,0 +1,44 @@
+---
+id: 5e9a093a74c4063ca6f7c14c
+title: Introduction to Data Analysis
+challengeType: 11
+videoId: VJrP2FUzKP0
+bilibiliIds:
+  aid: 378034466
+  bvid: BV19f4y1c7nu
+  cid: 409001487
+dashedName: introduction-to-data-analysis
+---
+
+# --description--
+Data analysis is the act of turning raw, messy data into useful insights by cleaning the data up, transforming it, manipulating it, and inspecting it.
+
+More resources:
+
+\- <a href="https://www.freecodecamp.org/news/what-is-data-analysis/" rel="noopener noreferrer nofollow">News article</a>
+
+# --question--
+
+## --text--
+
+Which of the following is **not** part of Data Analysis?
+
+## --answers--
+
+Building statistical models and data visualizations.
+
+---
+
+Picking a desired conclusion for the analysis.
+
+---
+
+Fixing incorrect values and removing invalid data.
+
+---
+
+Transforming data into an appropriate data structure.
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md
new file mode 100644
index 00000000000..d266151844d
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-cells.md
@@ -0,0 +1,42 @@
+---
+id: 5e9a093a74c4063ca6f7c150
+title: Jupyter Notebooks Cells
+challengeType: 11
+videoId: 5PPegAs9aLA
+bilibiliIds:
+  aid: 420510493
+  bvid: BV19341117Hq
+  cid: 409003280
+dashedName: jupyter-notebooks-cells
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/ds-content-interactive-jupyterlab-tutorial" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What are the three main types of Jupyter Notebook Cell?
+
+## --answers--
+
+Code, Markdown, and Python
+
+---
+
+Code, Markdown, and Raw
+
+---
+
+Markdown, Python, and Raw
+
+## --video-solution--
+
+2
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md
new file mode 100644
index 00000000000..be927727e87
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/jupyter-notebooks-importing-and-exporting-data.md
@@ -0,0 +1,51 @@
+---
+id: 5e9a093a74c4063ca6f7c151
+title: Jupyter Notebooks Importing and Exporting Data
+challengeType: 11
+videoId: k1msxD3JIxE
+bilibiliIds:
+  aid: 975540688
+  bvid: BV1n44y1b7Gi
+  cid: 409006337
+dashedName: jupyter-notebooks-importing-and-exporting-data
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/ds-content-interactive-jupyterlab-tutorial" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What kind of data can you import and work with in a Jupyter Notebook?
+
+## --answers--
+
+Excel files.
+
+---
+
+CSV files.
+
+---
+
+XML files.
+
+---
+
+Data from an API.
+
+---
+
+All of the above.
+
+## --video-solution--
+
+5
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-algebra-and-size.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-algebra-and-size.md
new file mode 100644
index 00000000000..d6292da8d5c
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-algebra-and-size.md
@@ -0,0 +1,47 @@
+---
+id: 5e9a093a74c4063ca6f7c157
+title: Numpy Algebra and Size
+challengeType: 11
+videoId: XAT97YLOKD8
+bilibiliIds:
+  aid: 250621433
+  bvid: BV1hv41137uM
+  cid: 409013128
+dashedName: numpy-algebra-and-size
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What is the relationship between size of objects (such as lists and datatypes) in memory in Python's standard library and the NumPy library? Knowing this, what are the implications for performance?
+
+## --answers--
+
+Standard Python objects take up much more memory to store than NumPy objects; operations on comparable standard Python and NumPy objects complete in roughly the same time.
+
+---
+
+NumPy objects take up much more memory than standard Python objects; operations on NumPy objects complete very quickly compared to comparable objects in standard Python.
+
+---
+
+NumPy objects take up much less memory than Standard Python objects; operations on Standard Python objects complete very quickly compared to comparable objects on NumPy Object.
+
+---
+
+Standard Python objects take up more memory than NumPy objects; operations on NumPy objects complete very quickly compared to comparable objects in standard Python.
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-arrays.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-arrays.md
new file mode 100644
index 00000000000..5f08a1b30c7
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-arrays.md
@@ -0,0 +1,63 @@
+---
+id: 5e9a093a74c4063ca6f7c154
+title: Numpy Arrays
+challengeType: 11
+videoId: VDYVFHBL1AM
+bilibiliIds:
+  aid: 890607366
+  bvid: BV1zP4y1h7FR
+  cid: 409011400
+dashedName: numpy-arrays
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What will the following code print out?
+
+```py
+A = np.array([
+    ['a', 'b', 'c'],
+    ['d', 'e', 'f'],
+    ['g', 'h', 'i']
+])
+
+print(A[:, :2])
+```
+
+## --answers--
+
+```py
+[['a' 'b']]
+```
+
+---
+
+```py
+[['b' 'c']
+['e' 'f']
+['h' 'i']]
+```
+
+---
+
+```py
+[['a' 'b']
+['d' 'e']
+['g' 'h']]
+```
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-boolean-arrays.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-boolean-arrays.md
new file mode 100644
index 00000000000..630ad66ca26
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-boolean-arrays.md
@@ -0,0 +1,61 @@
+---
+id: 5e9a093a74c4063ca6f7c156
+title: Numpy Boolean Arrays
+challengeType: 11
+videoId: N1ttsMmcVMM
+bilibiliIds:
+  aid: 208091324
+  bvid: BV1Qh411p7V8
+  cid: 409012711
+dashedName: numpy-boolean-arrays
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What will the following code print out?
+
+```py
+a = np.arange(5)
+
+print(a <= 3)
+```
+
+## --answers--
+
+```python
+[False, False, False, False, True]
+```
+
+---
+
+```python
+[5]
+```
+
+---
+
+```python
+[0, 1, 2, 3]
+```
+
+---
+
+```python
+[True, True, True, True, False]
+```
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-a.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-a.md
new file mode 100644
index 00000000000..d9f980b8ae1
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-a.md
@@ -0,0 +1,43 @@
+---
+id: 5e9a093a74c4063ca6f7c152
+title: Numpy Introduction A
+challengeType: 11
+videoId: P-JjV6GBCmk
+bilibiliIds:
+  aid: 718079611
+  bvid: BV18Q4y1k7om
+  cid: 409007080
+dashedName: numpy-introduction-a
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+Why is Numpy an important, but unpopular Python library?
+
+## --answers--
+
+Often you won't work directly with Numpy.
+
+---
+
+It is extremely slow.
+
+---
+
+Working with Numpy is difficult.
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-b.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-b.md
new file mode 100644
index 00000000000..f76d5bf6d1c
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-introduction-b.md
@@ -0,0 +1,47 @@
+---
+id: 5e9a093a74c4063ca6f7c153
+title: Numpy Introduction B
+challengeType: 11
+videoId: YIqgrNLAZkA
+bilibiliIds:
+  aid: 250503382
+  bvid: BV1kv411w7vB
+  cid: 409010193
+dashedName: numpy-introduction-b
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+About how much memory does the integer `5` consume in plain Python?
+
+## --answers--
+
+32 bits
+
+---
+
+20 bytes
+
+---
+
+16 bytes
+
+---
+
+8 bits
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-operations.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-operations.md
new file mode 100644
index 00000000000..166ee7c6d05
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/numpy-operations.md
@@ -0,0 +1,54 @@
+---
+id: 5e9a093a74c4063ca6f7c155
+title: Numpy Operations
+challengeType: 11
+videoId: eqSVcJbaPdk
+bilibiliIds:
+  aid: 378057123
+  bvid: BV13f4y1w7od
+  cid: 409012507
+dashedName: numpy-operations
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-numpy" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What is the value of `a` after you run the following code?
+
+```py
+a = np.arange(5)
+a + 20
+```
+
+## --answers--
+
+```python
+[20, 21, 22, 24, 24]
+```
+
+---
+
+```python
+[0, 1, 2, 3, 4]
+```
+
+---
+
+```python
+[25, 26, 27, 28, 29]
+```
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-conditional-selection-and-modifying-dataframes.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-conditional-selection-and-modifying-dataframes.md
new file mode 100644
index 00000000000..d16b2a8235f
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-conditional-selection-and-modifying-dataframes.md
@@ -0,0 +1,77 @@
+---
+id: 5e9a093a74c4063ca6f7c15b
+title: Pandas Conditional Selection and Modifying DataFrames
+challengeType: 11
+videoId: BFlH0fN5xRQ
+bilibiliIds:
+  aid: 505598518
+  bvid: BV1vg411c72y
+  cid: 409113534
+dashedName: pandas-conditional-selection-and-modifying-dataframes
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-pandas" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What will the following code print out?
+
+```py
+import pandas as pd
+
+certificates_earned = pd.DataFrame({
+    'Certificates': [8, 2, 5, 6],
+    'Time (in months)': [16, 5, 9, 12]
+})
+names = ['Tom', 'Kris', 'Ahmad', 'Beau']
+
+certificates_earned.index = names
+longest_streak = pd.Series([13, 11, 9, 7], index=names)
+certificates_earned['Longest streak'] = longest_streak
+
+print(certificates_earned)
+```
+
+## --answers--
+
+<pre>
+Tom      13
+Kris     11
+Ahmad     9
+Beau      7
+Name: Longest streak, dtype: int64
+</pre>
+
+---
+
+<pre>
+      Certificates  Time (in months)  Longest streak
+Tom               8                16              13
+Kris              2                 5              11
+Ahmad             5                 9               9
+Beau              6                12               7
+</pre>
+
+---
+
+<pre>
+      Certificates   Longest streak
+Tom               8               13
+Kris              2               11
+Ahmad             5                9
+Beau              6                7
+</pre>
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-creating-columns.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-creating-columns.md
new file mode 100644
index 00000000000..c9bd03fcb63
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-creating-columns.md
@@ -0,0 +1,62 @@
+---
+id: 5e9a093a74c4063ca6f7c15c
+title: Pandas Creating Columns
+challengeType: 11
+videoId: _sSo2XZoB3E
+bilibiliIds:
+  aid: 975568901
+  bvid: BV1b44y1b7Cg
+  cid: 409018052
+dashedName: pandas-creating-columns
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-pandas" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What code would add a "Certificates per month" column to the `certificates_earned` DataFrame like the one below?
+
+<pre>      Certificates  Time (in months)  Certificates per month
+Tom               8                16                    0.50
+Kris              2                 5                    0.40
+Ahmad             5                 9                    0.56
+Beau              6                12                    0.50</pre>
+
+## --answers--
+
+```py
+certificates_earned['Certificates'] /
+certificates_earned['Time (in months)']
+```
+
+---
+
+```py
+certificates_earned['Certificates per month'] = round(
+    certificates_earned['Certificates'] /
+    certificates_earned['Time (in months)']
+)
+```
+
+---
+
+```py
+certificates_earned['Certificates per month'] = round(
+    certificates_earned['Certificates'] /
+    certificates_earned['Time (in months)'], 2
+)
+```
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-dataframes.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-dataframes.md
new file mode 100644
index 00000000000..d43e94785ca
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-dataframes.md
@@ -0,0 +1,70 @@
+---
+id: 5e9a093a74c4063ca6f7c15a
+title: Pandas DataFrames
+challengeType: 11
+videoId: 7SgFBYXaiH0
+bilibiliIds:
+  aid: 890503235
+  bvid: BV1TP4y1h7qq
+  cid: 409014039
+dashedName: pandas-dataframes
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-pandas" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What will the following code print out?
+
+```py
+import pandas as pd
+
+certificates_earned = pd.DataFrame({
+    'Certificates': [8, 2, 5, 6],
+    'Time (in months)': [16, 5, 9, 12]
+})
+
+certificates_earned.index = ['Tom', 'Kris', 'Ahmad', 'Beau']
+
+print(certificates_earned.iloc[2])
+```
+
+## --answers--
+
+<pre>
+Tom      16
+Kris      5
+Ahmad     9
+Beau     12
+Name: Time (in months), dtype: int64
+</pre>
+
+---
+
+<pre>
+Certificates         6
+Time (in months)    12
+Name: Beau, dtype: int64
+</pre>
+
+---
+
+<pre>
+Certificates        5
+Time (in months)    9
+Name: Ahmad, dtype: int64
+</pre>
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-indexing-and-conditional-selection.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-indexing-and-conditional-selection.md
new file mode 100644
index 00000000000..ed1e427084f
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-indexing-and-conditional-selection.md
@@ -0,0 +1,69 @@
+---
+id: 5e9a093a74c4063ca6f7c159
+title: Pandas Indexing and Conditional Selection
+challengeType: 11
+videoId: '-ZOrgV_aA9A'
+bilibiliIds:
+  aid: 720604139
+  bvid: BV1FQ4y1k7tC
+  cid: 409013650
+dashedName: pandas-indexing-and-conditional-selection
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-pandas" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What will the following code print out?
+
+```py
+import pandas as pd
+
+certificates_earned = pd.Series(
+    [8, 2, 5, 6],
+    index=['Tom', 'Kris', 'Ahmad', 'Beau']
+)
+
+print(certificates_earned[certificates_earned > 5])
+```
+
+## --answers--
+
+<pre>
+Tom      True
+Kris     False
+Ahmad    False
+Beau     True
+dtype: int64
+</pre>
+
+---
+
+<pre>
+Tom      8
+Ahmad    5
+Beau     6
+dtype: int64
+</pre>
+
+---
+
+<pre>
+Tom      8
+Beau     6
+dtype: int64
+</pre>
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-introduction.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-introduction.md
new file mode 100644
index 00000000000..c1df4108803
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/pandas-introduction.md
@@ -0,0 +1,72 @@
+---
+id: 5e9a093a74c4063ca6f7c158
+title: Pandas Introduction
+challengeType: 11
+videoId: 0xACW-8cZU0
+bilibiliIds:
+  aid: 975510116
+  bvid: BV1u44y1b7fD
+  cid: 409013433
+dashedName: pandas-introduction
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/freecodecamp-intro-to-pandas" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What will the following code print out?
+
+```py
+import pandas as pd
+
+certificates_earned = pd.Series(
+    [8, 2, 5, 6],
+    index=['Tom', 'Kris', 'Ahmad', 'Beau']
+)
+
+print(certificates_earned)
+```
+
+## --answers--
+
+```markup
+Tom      8
+Kris     2
+Ahmad    5
+Beau     6
+dtype: int64
+```
+
+---
+
+```markup
+Kris     2
+Ahmad    5
+Beau     6
+Tom      8
+dtype: int64
+```
+
+---
+
+```markup
+Tom      8
+Kris     2
+Ahmad    5
+Beau     6
+Name: certificates_earned dtype: int64
+```
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/parsing-html-and-saving-data.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/parsing-html-and-saving-data.md
new file mode 100644
index 00000000000..f2c5997639c
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/parsing-html-and-saving-data.md
@@ -0,0 +1,47 @@
+---
+id: 5e9a093a74c4063ca6f7c164
+title: Parsing HTML and Saving Data
+challengeType: 11
+videoId: bJaqnTWQmb0
+bilibiliIds:
+  aid: 335522976
+  bvid: BV1RA411F7vi
+  cid: 409023170
+dashedName: parsing-html-and-saving-data
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/krishnatray/RDP-Reading-Data-with-Python-and-Pandas" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What Python library has the `.read_html()` method we can use for parsing HTML documents and extracting tables?
+
+## --answers--
+
+BeautifierSoupy
+
+---
+
+WebReader
+
+---
+
+HTTP-master
+
+---
+
+Pandas
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-functions-and-collections.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-functions-and-collections.md
new file mode 100644
index 00000000000..fdce91d05f7
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-functions-and-collections.md
@@ -0,0 +1,43 @@
+---
+id: 5e9a093a74c4063ca6f7c166
+title: Python Functions and Collections
+challengeType: 11
+videoId: NzpU17ZVlUw
+bilibiliIds:
+  aid: 675544435
+  bvid: BV1pU4y1N7JC
+  cid: 409023833
+dashedName: python-functions-and-collections
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/ds-content-python-under-10-minutes" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What is the main difference between lists and tuples in Python?
+
+## --answers--
+
+Tuples are immutable.
+
+---
+
+Lists are ordered.
+
+---
+
+Tuples are unordered.
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-introduction.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-introduction.md
new file mode 100644
index 00000000000..8bd079a0a4f
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-introduction.md
@@ -0,0 +1,47 @@
+---
+id: 5e9a093a74c4063ca6f7c165
+title: Python Introduction
+challengeType: 11
+videoId: PrQV9JkLhb4
+bilibiliIds:
+  aid: 805597530
+  bvid: BV1634y1S7gD
+  cid: 409023550
+dashedName: python-introduction
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/ds-content-python-under-10-minutes" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+How do we define blocks of code in the body of functions in Python?
+
+## --answers--
+
+We use a set of curly braces, one on either side of each new block of our code.
+
+---
+
+We use indentation, usually right-aligned 4 spaces.
+
+---
+
+We do not denote blocks of code.
+
+---
+
+We could use curly braces or indentation to denote blocks of code.
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-iteration-and-modules.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-iteration-and-modules.md
new file mode 100644
index 00000000000..fddbd3b10c9
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/python-iteration-and-modules.md
@@ -0,0 +1,60 @@
+---
+id: 5e9a093a74c4063ca6f7c167
+title: Python Iteration and Modules
+challengeType: 11
+videoId: XzosGWLafrY
+bilibiliIds:
+  aid: 633068913
+  bvid: BV1db4y127M4
+  cid: 409024056
+dashedName: python-iteration-and-modules
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/ine-rmotr-curriculum/ds-content-python-under-10-minutes" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+How would you iterate over and print the keys and values of a dictionary named `user`?
+
+## --answers--
+
+```python
+for key in user.items():
+    print(key)
+```
+
+---
+
+```python
+for key, value in user.all():
+    print(key, value)
+    print(value)
+```
+
+---
+
+```python
+for key, value in user.items():
+    print(key, value)
+```
+
+---
+
+```python
+for key, value in user
+    print(key, value)
+```
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md
new file mode 100644
index 00000000000..0291043e715
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-csv-and-txt.md
@@ -0,0 +1,59 @@
+---
+id: 5e9a093a74c4063ca6f7c162
+title: Reading Data CSV and TXT
+challengeType: 11
+videoId: ViGEv0zOzUk
+bilibiliIds:
+  aid: 505575354
+  bvid: BV1tg411c7GH
+  cid: 409020451
+dashedName: reading-data-csv-and-txt
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/krishnatray/RDP-Reading-Data-with-Python-and-Pandas" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+How would you import the CSV file `data.csv` and store it in a DataFrame using the Pandas module?
+
+## --answers--
+
+```python
+import pandas as pd
+df = pd.csv("data.csv")
+```
+
+---
+
+```python
+import pandas as pd
+df = pd.read_csv("data.csv")
+```
+
+---
+
+```python
+import pandas as pd
+pd.read_csv("data.csv")
+```
+
+---
+
+```python
+import pandas as pd
+df = pd.csv_reader("data.csv")
+```
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md
new file mode 100644
index 00000000000..21186179430
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-from-databases.md
@@ -0,0 +1,43 @@
+---
+id: 5e9a093a74c4063ca6f7c163
+title: Reading Data from Databases
+challengeType: 11
+videoId: MtgXS1MofRw
+bilibiliIds:
+  aid: 890546354
+  bvid: BV1JP4y1h7gk
+  cid: 409020851
+dashedName: reading-data-from-databases
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/krishnatray/RDP-Reading-Data-with-Python-and-Pandas" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+What method does a `Cursor` instance have and what does it allow?
+
+## --answers--
+
+The `Cursor` instance has a `.run()` method which allows you to run SQL queries.
+
+---
+
+The `Cursor` instance has a `.select()` method which allows you to select records.
+
+---
+
+The `Cursor` instance has an `.execute()` method which will receive SQL parameters to run against the database.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md
new file mode 100644
index 00000000000..2822287ab61
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-course/reading-data-introduction.md
@@ -0,0 +1,76 @@
+---
+id: 5e9a093a74c4063ca6f7c161
+title: Reading Data Introduction
+challengeType: 11
+videoId: cDnt02BcHng
+bilibiliIds:
+  aid: 548023524
+  bvid: BV1Nq4y1K7iV
+  cid: 409020187
+dashedName: reading-data-introduction
+---
+
+# --description--
+
+*Instead of using notebooks.ai like it shows in the video, you can use Google Colab instead.*
+
+More resources:
+
+-  <a href="https://github.com/krishnatray/RDP-Reading-Data-with-Python-and-Pandas" target="_blank" rel="noopener noreferrer nofollow">Notebooks on GitHub</a>
+-  <a href="https://colab.research.google.com/github/googlecolab/colabtools/blob/master/notebooks/colab-github-demo.ipynb" target="_blank" rel="noopener noreferrer nofollow">How to open Notebooks from GitHub using Google Colab.</a>
+
+# --question--
+
+## --text--
+
+Given a file named `certificates.csv` with these contents:
+
+<pre>
+Name$Certificates$Time (in months)
+Tom$8$16
+Kris$2$5
+Ahmad$5$9
+Beau$6$12
+</pre>
+
+Fill in the blanks for the missing arguments below:
+
+```py
+import csv
+
+with open(__A__, 'r') as fp:
+    reader = csv.reader(fp, delimiter=__B__)
+    next(reader)
+    for index, values in enumerate(reader):
+        name, certs_num, months_num = values
+        print(f"{name} earned {__C__} certificates in {months_num} months")
+```
+
+## --answers--
+
+A: `'certificates.csv'`
+
+B: `'-'`
+
+C: `values`
+
+---
+
+A: `'certificates.csv'`
+
+B: `'$'`
+
+C: `certs_num`
+
+---
+
+A: `'certificates'`
+
+B: `'$'`
+
+C: `certs_num`
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md
new file mode 100644
index 00000000000..99c66ecfbc6
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md
@@ -0,0 +1,79 @@
+---
+id: 5e46f7e5ac417301a38fb929
+title: Demographic Data Analyzer
+challengeType: 10
+forumTopicId: 462367
+dashedName: demographic-data-analyzer
+---
+
+# --description--
+
+You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-demographic-data-analyzer" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+
+We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project:
+
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a> (14 hours)
+
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+
+# --instructions--
+
+In this challenge you must analyze demographic data using Pandas. You are given a dataset of demographic data that was extracted from the 1994 Census database. Here is a sample of what the data looks like:
+
+```markdown
+|    |   age | workclass        |   fnlwgt | education   |   education-num | marital-status     | occupation        | relationship   | race   | sex    |   capital-gain |   capital-loss |   hours-per-week | native-country   | salary   |
+|---:|------:|:-----------------|---------:|:------------|----------------:|:-------------------|:------------------|:---------------|:-------|:-------|---------------:|---------------:|-----------------:|:-----------------|:---------|
+|  0 |    39 | State-gov        |    77516 | Bachelors   |              13 | Never-married      | Adm-clerical      | Not-in-family  | White  | Male   |           2174 |              0 |               40 | United-States    | <=50K    |
+|  1 |    50 | Self-emp-not-inc |    83311 | Bachelors   |              13 | Married-civ-spouse | Exec-managerial   | Husband        | White  | Male   |              0 |              0 |               13 | United-States    | <=50K    |
+|  2 |    38 | Private          |   215646 | HS-grad     |               9 | Divorced           | Handlers-cleaners | Not-in-family  | White  | Male   |              0 |              0 |               40 | United-States    | <=50K    |
+|  3 |    53 | Private          |   234721 | 11th        |               7 | Married-civ-spouse | Handlers-cleaners | Husband        | Black  | Male   |              0 |              0 |               40 | United-States    | <=50K    |
+|  4 |    28 | Private          |   338409 | Bachelors   |              13 | Married-civ-spouse | Prof-specialty    | Wife           | Black  | Female |              0 |              0 |               40 | Cuba             | <=50K    |
+```
+
+You must use Pandas to answer the following questions:
+
+- How many people of each race are represented in this dataset? This should be a Pandas series with race names as the index labels. (`race` column)
+- What is the average age of men?
+- What is the percentage of people who have a Bachelor's degree?
+- What percentage of people with advanced education (`Bachelors`, `Masters`, or `Doctorate`) make more than 50K?
+- What percentage of people without advanced education make more than 50K?
+- What is the minimum number of hours a person works per week?
+- What percentage of the people who work the minimum number of hours per week have a salary of more than 50K?
+- What country has the highest percentage of people that earn >50K and what is that percentage?
+- Identify the most popular occupation for those who earn >50K in India.
+
+Use the starter code in the file `demographic_data_analyzer`. Update the code so all variables set to "None" are set to the appropriate calculation or code. Round all decimals to the nearest tenth.
+
+Unit tests are written for you under `test_module.py`.
+
+## Development
+
+For development, you can use `main.py` to test your functions. Click the "run" button and `main.py` will run.
+
+## Testing
+
+We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button.
+
+## Submitting
+
+Copy your project's URL and submit it to freeCodeCamp.
+
+## Dataset Source
+
+Dua, D. and Graff, C. (2019). <a href="http://archive.ics.uci.edu/ml" target="_blank" rel="noopener noreferrer nofollow">UCI Machine Learning Repository</a>. Irvine, CA: University of California, School of Information and Computer Science.
+
+# --hints--
+
+It should pass all Python tests.
+
+```js
+
+```
+
+# --solutions--
+
+```py
+  # Python challenges don't need solutions,
+  # because they would need to be tested against a full working project.
+  # Please check our contributing guidelines to learn more.
+```
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md
new file mode 100644
index 00000000000..16e633e0434
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md
@@ -0,0 +1,81 @@
+---
+id: 5e46f7e5ac417301a38fb928
+title: Mean-Variance-Standard Deviation Calculator
+challengeType: 10
+forumTopicId: 462366
+dashedName: mean-variance-standard-deviation-calculator
+---
+
+# --description--
+
+You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-mean-variance-standard-deviation-calculator" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+
+We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project:
+
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a>(14 hours)
+
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+
+# --instructions--
+
+Create a function named `calculate()` in `mean_var_std.py` that uses Numpy to output the mean, variance, standard deviation, max, min, and sum of the rows, columns, and elements in a 3 x 3 matrix.
+
+The input of the function should be a list containing 9 digits. The function should convert the list into a 3 x 3 Numpy array, and then return a dictionary containing the mean, variance, standard deviation, max, min, and sum along both axes and for the flattened matrix.
+
+The returned dictionary should follow this format:
+
+```py
+{
+  'mean': [axis1, axis2, flattened],
+  'variance': [axis1, axis2, flattened],
+  'standard deviation': [axis1, axis2, flattened],
+  'max': [axis1, axis2, flattened],
+  'min': [axis1, axis2, flattened],
+  'sum': [axis1, axis2, flattened]
+}
+```
+
+If a list containing less than 9 elements is passed into the function, it should raise a `ValueError` exception with the message: "List must contain nine numbers." The values in the returned dictionary should be lists and not Numpy arrays.
+
+For example, `calculate([0,1,2,3,4,5,6,7,8])` should return:
+
+```py
+{
+  'mean': [[3.0, 4.0, 5.0], [1.0, 4.0, 7.0], 4.0],
+  'variance': [[6.0, 6.0, 6.0], [0.6666666666666666, 0.6666666666666666, 0.6666666666666666], 6.666666666666667],
+  'standard deviation': [[2.449489742783178, 2.449489742783178, 2.449489742783178], [0.816496580927726, 0.816496580927726, 0.816496580927726], 2.581988897471611],
+  'max': [[6, 7, 8], [2, 5, 8], 8],
+  'min': [[0, 1, 2], [0, 3, 6], 0],
+  'sum': [[9, 12, 15], [3, 12, 21], 36]
+}
+```
+
+The unit tests for this project are in `test_module.py`.
+
+## Development
+
+For development, you can use `main.py` to test your `calculate()` function. Click the "run" button and `main.py` will run.
+
+## Testing
+
+We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button.
+
+## Submitting
+
+Copy your project's URL and submit it to freeCodeCamp.
+
+# --hints--
+
+It should pass all Python tests.
+
+```js
+
+```
+
+# --solutions--
+
+```py
+  # Python challenges don't need solutions,
+  # because they would need to be tested against a full working project.
+  # Please check our contributing guidelines to learn more.
+```
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
new file mode 100644
index 00000000000..5fc402db3e9
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
@@ -0,0 +1,91 @@
+---
+id: 5e46f7f8ac417301a38fb92a
+title: Medical Data Visualizer
+challengeType: 10
+forumTopicId: 462368
+dashedName: medical-data-visualizer
+---
+
+# --description--
+
+You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-medical-data-visualizer" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+
+We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project:
+
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a>(14 hours)
+
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+
+# --instructions--
+
+In this project, you will visualize and make calculations from medical examination data using matplotlib, seaborn, and pandas. The dataset values were collected during medical examinations.
+
+## Data description
+
+The rows in the dataset represent patients and the columns represent information like body measurements, results from various blood tests, and lifestyle choices. You will use the dataset to explore the relationship between cardiac disease, body measurements, blood markers, and lifestyle choices.
+
+File name: medical_examination.csv
+
+|                    Feature                    |    Variable Type    |   Variable    |                    Value Type                    |
+|:---------------------------------------------:|:-------------------:|:-------------:|:------------------------------------------------:|
+|                      Age                      |  Objective Feature  |     `age`     |                    int (days)                    |
+|                    Height                     |  Objective Feature  |   `height`    |                     int (cm)                     |
+|                    Weight                     |  Objective Feature  |   `weight`    |                    float (kg)                    |
+|                    Gender                     |  Objective Feature  |   `gender`    |                 categorical code                 |
+|            Systolic blood pressure            | Examination Feature |    `ap_hi`    |                       int                        |
+|           Diastolic blood pressure            | Examination Feature |    `ap_lo`    |                       int                        |
+|                  Cholesterol                  | Examination Feature | `cholesterol` | 1: normal, 2: above normal, 3: well above normal |
+|                    Glucose                    | Examination Feature |    `gluc`     | 1: normal, 2: above normal, 3: well above normal |
+|                    Smoking                    | Subjective Feature  |    `smoke`    |                      binary                      |
+|                Alcohol intake                 | Subjective Feature  |    `alco`     |                      binary                      |
+|               Physical activity               | Subjective Feature  |   `active`    |                      binary                      |
+| Presence or absence of cardiovascular disease |   Target Variable   |   `cardio`    |                      binary                      |
+
+## Tasks
+
+Create a chart similar to `examples/Figure_1.png`, where we show the counts of good and bad outcomes for the `cholesterol`, `gluc`, `alco`, `active`, and `smoke` variables for patients with cardio=1 and cardio=0 in different panels.
+
+Use the data to complete the following tasks in `medical_data_visualizer.py`:
+
+- Add an `overweight` column to the data. To determine if a person is overweight, first calculate their BMI by dividing their weight in kilograms by the square of their height in meters. If that value is > 25 then the person is overweight. Use the value 0 for NOT overweight and the value 1 for overweight.
+- Normalize the data by making 0 always good and 1 always bad. If the value of `cholesterol` or `gluc` is 1, make the value 0. If the value is more than 1, make the value 1.
+- Convert the data into long format and create a chart that shows the value counts of the categorical features using seaborn's `catplot()`. The dataset should be split by 'Cardio' so there is one chart for each `cardio` value. The chart should look like `examples/Figure_1.png`.
+- Clean the data. Filter out the following patient segments that represent incorrect data:
+  - diastolic pressure is higher than systolic (Keep the correct data with `(df['ap_lo'] <= df['ap_hi'])`)
+  - height is less than the 2.5th percentile (Keep the correct data with `(df['height'] >= df['height'].quantile(0.025))`)
+  - height is more than the 97.5th percentile
+  - weight is less than the 2.5th percentile
+  - weight is more than the 97.5th percentile
+- Create a correlation matrix using the dataset. Plot the correlation matrix using seaborn's `heatmap()`. Mask the upper triangle. The chart should look like `examples/Figure_2.png`.
+
+Any time a variable is set to `None`, make sure to set it to the correct code.
+
+Unit tests are written for you under `test_module.py`.
+
+## Development
+
+For development, you can use `main.py` to test your functions. Click the "run" button and `main.py` will run.
+
+## Testing
+
+We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button.
+
+## Submitting
+
+Copy your project's URL and submit it to freeCodeCamp.
+
+# --hints--
+
+It should pass all Python tests.
+
+```js
+
+```
+
+# --solutions--
+
+```py
+  # Python challenges don't need solutions,
+  # because they would need to be tested against a full working project.
+  # Please check our contributing guidelines to learn more.
+```
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md
new file mode 100644
index 00000000000..70478f31ad5
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md
@@ -0,0 +1,61 @@
+---
+id: 5e46f802ac417301a38fb92b
+title: Page View Time Series Visualizer
+challengeType: 10
+forumTopicId: 462369
+dashedName: page-view-time-series-visualizer
+---
+
+# --description--
+
+You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-page-view-time-series-visualizer" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+
+We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project:
+
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a>(14 hours)
+
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+
+# --instructions--
+
+For this project you will visualize time series data using a line chart, bar chart, and box plots. You will use Pandas, Matplotlib, and Seaborn to visualize a dataset containing the number of page views each day on the freeCodeCamp.org forum from 2016-05-09 to 2019-12-03. The data visualizations will help you understand the patterns in visits and identify yearly and monthly growth.
+
+Use the data to complete the following tasks:
+
+- Use Pandas to import the data from "fcc-forum-pageviews.csv". Set the index to the `date` column.
+- Clean the data by filtering out days when the page views were in the top 2.5% of the dataset or bottom 2.5% of the dataset.
+- Create a `draw_line_plot` function that uses Matplotlib to draw a line chart similar to "examples/Figure_1.png". The title should be `Daily freeCodeCamp Forum Page Views 5/2016-12/2019`. The label on the x axis should be `Date` and the label on the y axis should be `Page Views`.
+- Create a `draw_bar_plot` function that draws a bar chart similar to "examples/Figure_2.png". It should show average daily page views for each month grouped by year. The legend should show month labels and have a title of `Months`. On the chart, the label on the x axis should be `Years` and the label on the y axis should be `Average Page Views`.
+- Create a `draw_box_plot` function that uses Seaborn to draw two adjacent box plots similar to "examples/Figure_3.png". These box plots should show how the values are distributed within a given year or month and how it compares over time. The title of the first chart should be `Year-wise Box Plot (Trend)` and the title of the second chart should be `Month-wise Box Plot (Seasonality)`. Make sure the month labels on bottom start at `Jan` and the x and y axis are labeled correctly. The boilerplate includes commands to prepare the data.
+
+For each chart, make sure to use a copy of the data frame. Unit tests are written for you under `test_module.py`.
+
+The boilerplate also includes commands to save and return the image.
+
+## Development
+
+For development, you can use `main.py` to test your functions. Click the "run" button and `main.py` will run.
+
+## Testing
+
+We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button.
+
+## Submitting
+
+Copy your project's URL and submit it to freeCodeCamp.
+
+# --hints--
+
+It should pass all Python tests.
+
+```js
+
+```
+
+# --solutions--
+
+```py
+  # Python challenges don't need solutions,
+  # because they would need to be tested against a full working project.
+  # Please check our contributing guidelines to learn more.
+```
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
new file mode 100644
index 00000000000..be3e2cd375f
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
@@ -0,0 +1,66 @@
+---
+id: 5e4f5c4b570f7e3a4949899f
+title: Sea Level Predictor
+challengeType: 10
+forumTopicId: 462370
+dashedName: sea-level-predictor
+---
+
+# --description--
+
+You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-sea-level-predictor" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+
+We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project:
+
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a>(14 hours)
+
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+
+# --instructions--
+
+You will analyze a dataset of the global average sea level change since 1880. You will use the data to predict the sea level change through year 2050.
+
+Use the data to complete the following tasks:
+
+- Use Pandas to import the data from `epa-sea-level.csv`.
+- Use matplotlib to create a scatter plot using the `Year` column as the x-axis and the `CSIRO Adjusted Sea Level` column as the y-axix.
+- Use the `linregress` function from `scipy.stats` to get the slope and y-intercept of the line of best fit. Plot the line of best fit over the top of the scatter plot. Make the line go through the year 2050 to predict the sea level rise in 2050.
+- Plot a new line of best fit just using the data from year 2000 through the most recent year in the dataset. Make the line also go through the year 2050 to predict the sea level rise in 2050 if the rate of rise continues as it has since the year 2000.
+- The x label should be `Year`, the y label should be `Sea Level (inches)`, and the title should be `Rise in Sea Level`.
+
+Unit tests are written for you under `test_module.py`.
+
+The boilerplate also includes commands to save and return the image.
+
+## Development
+
+For development, you can use `main.py` to test your functions. Click the "run" button and `main.py` will run.
+
+## Testing
+
+We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button.
+
+## Submitting
+
+Copy your project's URL and submit it to freeCodeCamp.
+
+## Data Source
+
+<a href="https://datahub.io/core/sea-level-rise" target="_blank" rel="noopener noreferrer nofollow">Global Average Absolute Sea Level Change</a>, 1880-2014 from the US Environmental Protection Agency using data from CSIRO, 2015; NOAA, 2015.
+
+
+# --hints--
+
+It should pass all Python tests.
+
+```js
+
+```
+
+# --solutions--
+
+```py
+  # Python challenges don't need solutions,
+  # because they would need to be tested against a full working project.
+  # Please check our contributing guidelines to learn more.
+```
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/accessing-and-changing-elements,-rows,-columns.md b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/accessing-and-changing-elements,-rows,-columns.md
new file mode 100644
index 00000000000..9964d4e18a9
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/accessing-and-changing-elements,-rows,-columns.md
@@ -0,0 +1,54 @@
+---
+id: 5e9a0a8e09c5df3cc3600ed4
+title: 'Accessing and Changing Elements, Rows, Columns'
+challengeType: 11
+videoId: v-7Y7koJ_N0
+bilibiliIds:
+  aid: 590517748
+  bvid: BV1Eq4y1f7Fa
+  cid: 409025392
+dashedName: accessing-and-changing-elements-rows-columns
+---
+
+# --question--
+
+## --text--
+
+What code would change the values in the 3rd column of both of the following Numpy arrays to 20?
+
+```py
+a = np.array([[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]])
+
+# Output:
+# [[ 1  2  20  4  5]
+# [ 6  7 20  9 10]]
+```
+
+## --answers--
+
+```python
+a[:, 3] = 20
+```
+
+---
+
+```python
+a[2, :] = 20
+```
+
+---
+
+```python
+a[:, 2] = 20
+```
+
+---
+
+```python
+a[1, 2] = 20
+```
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/basics-of-numpy.md b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/basics-of-numpy.md
new file mode 100644
index 00000000000..7a4a17909b1
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/basics-of-numpy.md
@@ -0,0 +1,49 @@
+---
+id: 5e9a0a8e09c5df3cc3600ed3
+title: Basics of Numpy
+challengeType: 11
+videoId: f9QrZrKQMLI
+bilibiliIds:
+  aid: 763014202
+  bvid: BV1K64y1a7bu
+  cid: 409025169
+dashedName: basics-of-numpy
+---
+
+# --question--
+
+## --text--
+
+What will the following code print?
+
+```python
+b = np.array([[1.0,2.0,3.0],[3.0,4.0,5.0]])
+print(b)
+```
+
+## --answers--
+
+```python
+[[1.0 2.0 3.0]
+[3.0 4.0 5.0]]
+```
+
+---
+
+```python
+[[1. 2. 3.]
+[3. 4. 5.]]
+```
+
+---
+
+```python
+[[1. 3.]
+[2. 4.]
+[3. 5.]
+```
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/copying-arrays-warning.md b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/copying-arrays-warning.md
new file mode 100644
index 00000000000..b266bedd46e
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/copying-arrays-warning.md
@@ -0,0 +1,48 @@
+---
+id: 5e9a0a8e09c5df3cc3600ed7
+title: Copying Arrays Warning
+challengeType: 11
+videoId: iIoQ0_L0GvA
+bilibiliIds:
+  aid: 633008569
+  bvid: BV1Bb4y127fb
+  cid: 409026161
+dashedName: copying-arrays-warning
+---
+
+# --question--
+
+## --text--
+
+What is the value of `a` after running the following code?
+
+```py
+import numpy as np
+
+a = np.array([1, 2, 3, 4, 5])
+b = a
+b[2] = 20
+```
+
+## --answers--
+
+```python
+[1 2 3 4 5]
+```
+
+---
+
+```python
+[1 2 20 4 5]
+```
+
+---
+
+```python
+[1 20 3 4 5]
+```
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/initialize-array-problem.md b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/initialize-array-problem.md
new file mode 100644
index 00000000000..08984a3c7a8
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/initialize-array-problem.md
@@ -0,0 +1,65 @@
+---
+id: 5e9a0a8e09c5df3cc3600ed6
+title: Initialize Array Problem
+challengeType: 11
+videoId: 0jGfH8BPfOk
+bilibiliIds:
+  aid: 763027834
+  bvid: BV1w64y1a7eo
+  cid: 409025878
+dashedName: initialize-array-problem
+---
+
+# --question--
+
+## --text--
+
+What is another way to produce the following array?
+
+```py
+[[0. 0. 0. 0. 0. 0. 0.]
+[0. 1. 1. 1. 1. 1. 0.]
+[0. 1. 1. 1. 1. 1. 0.]
+[0. 1. 1. 5. 1. 1. 0.]
+[0. 1. 1. 1. 1. 1. 0.]
+[0. 1. 1. 1. 1. 1. 0.]
+[0. 0. 0. 0. 0. 0. 0.]]
+```
+
+## --answers--
+
+```py
+output = np.ones((7, 7))
+
+z = np.zeros((5, 5))
+z[2, 2] = 5
+
+output[1:1, -1:-1] = z
+```
+
+---
+
+```py
+output = np.zeros((7,7))
+
+z = np.ones((5, 5))
+z[2, 2] = 5
+
+output[1:-1, 1:-1] = z
+```
+
+---
+
+```py
+output = np.ones((7, 7))
+
+z = np.zeros((5, 5))
+z[3, 3] = 5
+
+output[1:-1, 1:-1] = z
+```
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/initializing-different-arrays.md b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/initializing-different-arrays.md
new file mode 100644
index 00000000000..debbf356d30
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/initializing-different-arrays.md
@@ -0,0 +1,48 @@
+---
+id: 5e9a0a8e09c5df3cc3600ed5
+title: Initializing Different Arrays
+challengeType: 11
+videoId: CEykdsKT4U4
+bilibiliIds:
+  aid: 718044756
+  bvid: BV1MQ4y1k7BB
+  cid: 409025638
+dashedName: initializing-different-arrays
+---
+
+# --question--
+
+## --text--
+
+What will the following code print?
+
+```py
+a = np.array([[1, 2, 3, 4, 5], [6, 7, 8, 9, 10]])
+
+print(np.full_like(a, 100))
+```
+
+## --answers--
+
+```py
+[[100 100 100 100 100]]
+```
+
+---
+
+```py
+[[100 100 100 100 100]
+[100 100 100 100 100]]
+```
+
+---
+
+```py
+[[ 1  2  3  4  5]
+[ 6  7 20  9 10]]
+```
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/loading-data-and-advanced-indexing.md b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/loading-data-and-advanced-indexing.md
new file mode 100644
index 00000000000..4a2ec27fee7
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/loading-data-and-advanced-indexing.md
@@ -0,0 +1,60 @@
+---
+id: 5e9a0a8e09c5df3cc3600eda
+title: Loading Data and Advanced Indexing
+challengeType: 11
+videoId: tUdBZ7pF8Jg
+bilibiliIds:
+  aid: 720524642
+  bvid: BV1xQ4y1r7mu
+  cid: 409027117
+dashedName: loading-data-and-advanced-indexing
+---
+
+# --question--
+
+## --text--
+
+Given a file named `data.txt` with these contents:
+
+<pre>
+29,97,32,100,45
+15,88,5,75,22
+</pre>
+
+What code would produce the following array?
+
+```py
+[29. 32. 45. 15.  5. 22.]
+```
+
+## --answers--
+
+```py
+filedata = np.genfromtxt('data.txt', delimiter=',')
+output = np.any(filedata < 50)
+
+print(output)
+```
+
+---
+
+```py
+filedata = np.genfromtxt('data.txt', delimiter=',')
+output = np.all(filedata < 50, axis=1)
+
+print(output)
+```
+
+---
+
+```py
+filedata = np.genfromtxt('data.txt', delimiter=',')
+output = filedata[filedata < 50]
+
+print(output)
+```
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/mathematics.md b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/mathematics.md
new file mode 100644
index 00000000000..d23ab8912bf
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/mathematics.md
@@ -0,0 +1,53 @@
+---
+id: 5e9a0a8e09c5df3cc3600ed8
+title: Mathematics
+challengeType: 11
+videoId: 7txegvyhtVk
+bilibiliIds:
+  aid: 890533226
+  bvid: BV1KP4y1h733
+  cid: 409026503
+dashedName: mathematics
+---
+
+# --question--
+
+## --text--
+
+What is the value of `b` after running the following code?
+
+```py
+import numpy as np
+
+a = np.array(([1, 2, 3, 4, 5], [6, 7, 8, 9, 10]))
+b = np.max(a, axis=1).sum()
+```
+
+## --answers--
+
+```py
+10
+```
+
+---
+
+```py
+7
+```
+
+---
+
+```py
+5
+```
+
+---
+
+```py
+15
+```
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/reorganizing-arrays.md b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/reorganizing-arrays.md
new file mode 100644
index 00000000000..f32078cd98f
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/reorganizing-arrays.md
@@ -0,0 +1,53 @@
+---
+id: 5e9a0a8e09c5df3cc3600ed9
+title: Reorganizing Arrays
+challengeType: 11
+videoId: VNWAQbEM-C8
+bilibiliIds:
+  aid: 548035655
+  bvid: BV1fq4y1N7aC
+  cid: 409026755
+dashedName: reorganizing-arrays
+---
+
+# --question--
+
+## --text--
+
+What code would produce the following array?
+
+```py
+[[1. 1.]
+[1. 1.]
+[1. 1.]
+[1. 1.]]
+```
+
+## --answers--
+
+```py
+a = np.ones((2, 4))
+b = a.reshape((4, 2))
+print(b)
+```
+
+---
+
+```py
+a = np.ones((2, 4))
+b = a.reshape((2, 4))
+print(b)
+```
+
+---
+
+```py
+a = np.ones((2, 4))
+b = a.reshape((8, 1))
+print(b)
+```
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/what-is-numpy.md b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/what-is-numpy.md
new file mode 100644
index 00000000000..57660ed97ad
--- /dev/null
+++ b/curriculum/challenges/arabic/08-data-analysis-with-python/numpy/what-is-numpy.md
@@ -0,0 +1,38 @@
+---
+id: 5e9a0a8e09c5df3cc3600ed2
+title: What is NumPy
+challengeType: 11
+videoId: 5Nwfs5Ej85Q
+bilibiliIds:
+  aid: 293086867
+  bvid: BV1Tf4y1E7QZ
+  cid: 409024791
+dashedName: what-is-numpy
+---
+
+# --question--
+
+## --text--
+
+Why are Numpy arrays faster than regular Python lists?
+
+## --answers--
+
+Numpy does not perform type checking while iterating through objects.
+
+---
+
+Numpy uses fixed types.
+
+---
+
+Numpy uses contiguous memory.
+
+---
+
+All of the above.
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-projects/anonymous-message-board.md b/curriculum/challenges/arabic/09-information-security/information-security-projects/anonymous-message-board.md
new file mode 100644
index 00000000000..2ad15a6cc2c
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-projects/anonymous-message-board.md
@@ -0,0 +1,393 @@
+---
+id: 587d824a367417b2b2512c45
+title: Anonymous Message Board
+challengeType: 4
+forumTopicId: 301568
+dashedName: anonymous-message-board
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://anonymous-message-board.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://anonymous-message-board.freecodecamp.rocks/</a>.
+
+Working on this project will involve you writing your code using one of the following methods:
+
+-   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-messageboard/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
+-   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-messageboard" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --instructions--
+
+1.  Set `NODE_ENV` to test without quotes when ready to write tests and DB to your databases connection string (in `.env`)
+2.  Recommended to create controllers/handlers and handle routing in `routes/api.js`
+3.  You will add any security features to `server.js`
+
+Write the following tests in `tests/2_functional-tests.js`:
+
+-   Creating a new thread: POST request to `/api/threads/{board}`
+-   Viewing the 10 most recent threads with 3 replies each: GET request to `/api/threads/{board}`
+-   Deleting a thread with the incorrect password: DELETE request to `/api/threads/{board}` with an invalid `delete_password`
+-   Deleting a thread with the correct password: DELETE request to `/api/threads/{board}` with a valid `delete_password`
+-   Reporting a thread: PUT request to `/api/threads/{board}`
+-   Creating a new reply: POST request to `/api/replies/{board}`
+-   Viewing a single thread with all replies: GET request to `/api/replies/{board}`
+-   Deleting a reply with the incorrect password: DELETE request to `/api/replies/{board}` with an invalid `delete_password`
+-   Deleting a reply with the correct password: DELETE request to `/api/replies/{board}` with a valid `delete_password`
+-   Reporting a reply: PUT request to `/api/replies/{board}`
+
+# --hints--
+
+You can provide your own project, not the example URL.
+
+```js
+(getUserInput) => {
+  assert(
+    !/.*\/anonymous-message-board\.freecodecamp\.rocks/.test(
+      getUserInput('url')
+    )
+  );
+};
+```
+
+Only allow your site to be loaded in an iFrame on your own pages.
+
+```js
+async (getUserInput) => {
+  const data = await fetch(getUserInput('url') + '/_api/app-info');
+  const parsed = await data.json();
+  assert.isTrue(parsed.headers['x-frame-options']?.includes('SAMEORIGIN'));
+};
+```
+
+Do not allow DNS prefetching.
+
+```js
+async (getUserInput) => {
+  const data = await fetch(getUserInput('url') + '/_api/app-info');
+  const parsed = await data.json();
+  assert.isTrue(parsed.headers['x-dns-prefetch-control']?.includes('off'));
+};
+```
+
+Only allow your site to send the referrer for your own pages.
+
+```js
+async (getUserInput) => {
+  const data = await fetch(getUserInput('url') + '/_api/app-info');
+  const parsed = await data.json();
+  assert.isTrue(parsed.headers['referrer-policy']?.includes('same-origin'));
+};
+```
+
+You can send a POST request to `/api/threads/{board}` with form data including `text` and `delete_password`. The saved database record will have at least the fields `_id`, `text`, `created_on`(date & time), `bumped_on`(date & time, starts same as `created_on`), `reported` (boolean), `delete_password`, & `replies` (array).
+
+```js
+async (getUserInput) => {
+  const date = new Date();
+  const text = `fcc_test_${date}`;
+  const deletePassword = 'delete_me';
+  const data = { text, delete_password: deletePassword };
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/threads/fcc_test', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data)
+  });
+  if (res.ok) {
+    const checkData = await fetch(url + '/api/threads/fcc_test');
+    const parsed = await checkData.json();
+    try {
+      assert.equal(parsed[0].text, text);
+      assert.isNotNull(parsed[0]._id);
+      assert.equal(new Date(parsed[0].created_on).toDateString(), date.toDateString());
+      assert.equal(parsed[0].bumped_on, parsed[0].created_on);
+      assert.isArray(parsed[0].replies);
+    } catch (err) {
+      throw new Error(err.responseText || err.message);
+    }
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+You can send a POST request to `/api/replies/{board}` with form data including `text`, `delete_password`, & `thread_id`. This will update the `bumped_on` date to the comment's date. In the thread's `replies` array, an object will be saved with at least the properties `_id`, `text`, `created_on`, `delete_password`, & `reported`.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  const body = await fetch(url + '/api/threads/fcc_test');
+  const thread = await body.json();
+
+  const date = new Date();
+  const text = `fcc_test_reply_${date}`;
+  const delete_password = 'delete_me';
+  const thread_id = thread[0]._id;
+  const replyCount = thread[0].replies.length;
+
+  const data = { text, delete_password, thread_id };
+  const res = await fetch(url + '/api/replies/fcc_test', {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data)
+  });
+  if (res.ok) {
+    const checkData = await fetch(`${url}/api/replies/fcc_test?thread_id=${thread_id}`);
+    const parsed = await checkData.json();
+    try {
+      assert.equal(parsed.replies.length, replyCount + 1);
+      assert.equal(parsed.replies[0].text, text);
+      assert.equal(parsed._id, thread_id);
+      assert.equal(parsed.bumped_on, parsed.replies[0].created_on);
+    } catch (err) {
+      throw new Error(err.responseText || err.message);
+    }
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+You can send a GET request to `/api/threads/{board}`. Returned will be an array of the most recent 10 bumped threads on the board with only the most recent 3 replies for each. The `reported` and `delete_password` fields will not be sent to the client.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  const res = await fetch(url + '/api/threads/fcc_test');
+
+  if (res.ok) {
+    const threads = await res.json();
+    try {
+      assert.equal(res.status, 200);
+      assert.isAtMost(threads.length, 10);
+      for (let i = 0; i < threads.length; i++) {
+        assert.containsAllKeys(threads[i], ["_id", "text", "created_on", "bumped_on", "replies"]);
+        assert.isAtMost(threads[i].replies.length, 3);
+        assert.notExists(threads[i].delete_password);
+        assert.notExists(threads[i].reported);
+        for (let j = 0; j < threads[i].replies.length; j++) {
+          assert.notExists(threads[i].replies[j].delete_password);
+          assert.notExists(threads[i].replies[j].reported);
+        }
+      }
+    } catch (err) {
+      throw new Error(err.responseText || err.message);
+    }
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+You can send a GET request to `/api/replies/{board}?thread_id={thread_id}`. Returned will be the entire thread with all its replies, also excluding the same fields from the client as the previous test.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  let res = await fetch(url + '/api/threads/fcc_test');
+  const threads = await res.json();
+  const thread_id = threads[0]._id;
+  res = await fetch(`${url}/api/replies/fcc_test?thread_id=${thread_id}`);
+
+  if (res.ok) {
+    const thread = await res.json();
+    try {
+      assert.equal(res.status, 200);
+      assert.isObject(thread);
+      assert.containsAllKeys(thread, ["_id", "text", "created_on", "bumped_on", "replies"]);
+      assert.isArray(thread.replies);
+      assert.notExists(thread.delete_password);
+      assert.notExists(thread.reported);
+      for (let i = 0; i < thread.replies.length; i++) {
+        assert.notExists(thread.replies[i].delete_password);
+        assert.notExists(thread.replies[i].reported);
+      }
+    } catch (err) {
+      throw new Error(err.responseText || err.message);
+    }
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+You can send a DELETE request to `/api/threads/{board}` and pass along the `thread_id` & `delete_password` to delete the thread. Returned will be the string `incorrect password` or `success`.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+  let res = await fetch(url + '/api/threads/fcc_test');
+  const threads = await res.json();
+  const thread_id = threads[0]._id;
+  let data = { thread_id, delete_password: "wrong_password" };
+  const res_invalid = await fetch(url + '/api/threads/fcc_test', {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data)
+  });
+  data = { thread_id, delete_password: "delete_me" };
+  res = await fetch(url + '/api/threads/fcc_test', {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data)
+  });
+
+  if (res.ok) {
+    const deleted = await res.text();
+    const not_deleted = await res_invalid.text();
+    try {
+      assert.equal(res.status, 200);
+      assert.equal(deleted, "success");
+      assert.equal(not_deleted, "incorrect password");
+    } catch (err) {
+      throw new Error(err.responseText || err.message);
+    }
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+You can send a DELETE request to `/api/replies/{board}` and pass along the `thread_id`, `reply_id`, & `delete_password`. Returned will be the string `incorrect password` or `success`. On success, the text of the `reply_id` will be changed to `[deleted]`.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+
+  const thread_data = {
+    text: "fcc_test_thread",
+    delete_password: "delete_me",
+  };
+  await fetch(`${url}/api/threads/fcc_test`, {
+    method: "POST",
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(thread_data)
+  });
+  let res = await fetch(`${url}/api/threads/fcc_test`);
+  let threads = await res.json();
+  const thread_id = threads[0]._id;
+
+  const reply_data = { thread_id, text: "fcc_test_reply", delete_password: "delete_me" };
+  await fetch(`${url}/api/replies/fcc_test`, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(reply_data)
+  });
+  res = await fetch(`${url}/api/threads/fcc_test`);
+  threads = await res.json();
+  const reply_id = threads[0].replies[0]._id;
+
+  const data = { thread_id, reply_id, delete_password: "delete_me" };
+  res = await fetch(url + '/api/replies/fcc_test', {
+    method: 'DELETE',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data)
+  });
+
+  if (res.ok) {
+    const deleted = await res.text();
+    try {
+      assert.equal(res.status, 200);
+      assert.equal(deleted, "success");
+      res = await fetch(`${url}/api/replies/fcc_test?thread_id=${thread_id}`);
+      const thread = await res.json();
+      assert.equal(thread._id, thread_id);
+      assert.equal(thread.replies[0]._id, reply_id);
+      assert.equal(thread.replies[0].text, "[deleted]");
+    } catch (err) {
+      throw new Error(err.responseText || err.message);
+    }
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+You can send a PUT request to `/api/threads/{board}` and pass along the `thread_id`. Returned will be the string `reported`. The `reported` value of the `thread_id` will be changed to `true`.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+
+  let res = await fetch(`${url}/api/threads/fcc_test`);
+  const threads = await res.json();
+  const report_id = threads[0]._id;
+  const data = { report_id };
+
+  res = await fetch(`${url}/api/threads/fcc_test`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data)
+  });
+
+  if (res.ok) {
+    const reported = await res.text();
+    try {
+      assert.equal(res.status, 200);
+      assert.equal(reported, "reported");
+    } catch (err) {
+      throw new Error(err.responseText || err.message);
+    }
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+You can send a PUT request to `/api/replies/{board}` and pass along the `thread_id` & `reply_id`. Returned will be the string `reported`. The `reported` value of the `reply_id` will be changed to `true`.
+
+```js
+async (getUserInput) => {
+  const url = getUserInput('url');
+
+  let res = await fetch(`${url}/api/threads/fcc_test`);
+  const threads = await res.json();
+  const thread_id = threads[0]._id;
+  const reply_id = threads[0].replies[0]._id;
+  const data = { thread_id, reply_id };
+
+  res = await fetch(`${url}/api/replies/fcc_test`, {
+    method: 'PUT',
+    headers: { 'Content-Type': 'application/json' },
+    body: JSON.stringify(data)
+  });
+
+  if (res.ok) {
+    const reported = await res.text();
+    try {
+      assert.equal(res.status, 200);
+      assert.equal(reported, "reported");
+    } catch (err) {
+      throw new Error(err.responseText || err.message);
+    }
+  } else {
+    throw new Error(`${res.status} ${res.statusText}`);
+  }
+};
+```
+
+All 10 functional tests are complete and passing.
+
+```js
+async (getUserInput) => {
+  const tests = await fetch(getUserInput('url') + '/_api/get-tests');
+  const parsed = await tests.json();
+  assert.isTrue(parsed.length >= 10);
+  parsed.forEach((test) => {
+    assert.equal(test.state, 'passed');
+    assert.isAtLeast(test.assertions.length, 1);
+  });
+};
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-projects/port-scanner.md b/curriculum/challenges/arabic/09-information-security/information-security-projects/port-scanner.md
new file mode 100644
index 00000000000..4f5d0456333
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-projects/port-scanner.md
@@ -0,0 +1,97 @@
+---
+id: 5e46f979ac417301a38fb932
+title: Port Scanner
+challengeType: 10
+forumTopicId: 462372
+helpCategory: Python
+dashedName: port-scanner
+---
+
+# --description--
+
+You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-port-scanner" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+
+We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project:
+
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a> (14 hours)
+
+- <a href="https://www.freecodecamp.org/news/learn-python-basics-in-depth-video-course/" target="_blank" rel="noopener noreferrer nofollow">Learn Python Basics in Depth</a> (4 hours)
+
+- <a href="https://www.freecodecamp.org/news/intermediate-python-course/" target="_blank" rel="noopener noreferrer nofollow">Intermediate Python Course</a> (6 hours)
+
+# --instructions--
+
+Create a port scanner using Python.
+
+In the `port_scanner.py` file, create a function called `get_open_ports` that takes a `target` argument and a `port_range` argument. `target` can be a URL or IP address. `port_range` is a list of two numbers indicating the first and last numbers of the range of ports to check.
+
+Here are examples of how the function may be called:
+
+```py
+get_open_ports("209.216.230.240", [440, 445])
+get_open_ports("www.stackoverflow.com", [79, 82])
+```
+
+The function should return a list of open ports in the given range.
+
+The `get_open_ports` function should also take an optional third argument of `True` to indicate "Verbose" mode. If this is set to true, the function should return a descriptive string instead of a list of ports.
+
+Here is the format of the string that should be returned in verbose mode (text inside `{}` indicates the information that should appear):
+
+```bash
+Open ports for {URL} ({IP address})
+PORT     SERVICE
+{port}   {service name}
+{port}   {service name}
+```
+
+You can use the dictionary in `common_ports.py` to get the correct service name for each port.
+
+For example, if the function is called like this:
+
+```py
+port_scanner.get_open_ports("scanme.nmap.org", [20, 80], True)
+```
+
+It should return the following:
+
+```bash
+Open ports for scanme.nmap.org (45.33.32.156)
+PORT     SERVICE
+22       ssh
+80       http
+```
+
+Make sure to include proper spacing and new line characters.
+
+If the URL passed into the `get_open_ports` function is invalid, the function should return the string: "Error: Invalid hostname".
+
+If the IP address passed into the `get_open_ports` function is invalid, the function should return the string: "Error:  Invalid IP address".
+
+## Development
+
+Write your code in `port_scanner.py`. For development, you can use `main.py` to test your code. Click the "run" button and `main.py` will run.
+
+## Testing
+
+The unit tests for this project are in `test_module.py`. We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button.
+
+## Submitting
+
+Copy your project's URL and submit it to freeCodeCamp.
+
+# --hints--
+
+It should pass all Python tests.
+
+```js
+
+```
+
+# --solutions--
+
+```py
+  # Python challenges don't need solutions,
+  # because they would need to be tested against a full working project.
+  # Please check our contributing guidelines to learn more.
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md b/curriculum/challenges/arabic/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md
new file mode 100644
index 00000000000..11050099d93
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-projects/secure-real-time-multiplayer-game.md
@@ -0,0 +1,186 @@
+---
+id: 5e601c775ac9d0ecd8b94aff
+title: Secure Real Time Multiplayer Game
+challengeType: 4
+forumTopicId: 462375
+dashedName: secure-real-time-multiplayer-game
+---
+
+# --description--
+
+Develop a 2D real time multiplayer game using the HTML Canvas API and Socket.io that is functionally similar to this: <a href="https://secure-real-time-multiplayer-game.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://secure-real-time-multiplayer-game.freecodecamp.rocks/</a>. Working on this project will involve you writing your code using one of the following methods:
+
+-   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-secure-real-time-multiplayer-game/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
+-   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-secure-real-time-multiplayer-game" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --instructions--
+
+Create a secure multiplayer game in which each player can move their avatar, there is at least one collectible item, and the rank of the players is calculated based on their score.
+
+For details consult the tests below.
+
+Make sure that your game is secure! Include these security measures:
+
+- The client should not be able to guess/sniff the MIME type
+- Prevent XSS attacks
+- Do not cache anything from the website in the client
+- The headers say that the site is powered by `PHP 7.4.3`
+
+**Note**: `helmet@^3.21.3` is needed for the user stories. This means you will need to use the previous version of Helmet's docs, for information on how to achieve the user stories.
+
+# --hints--
+
+You can provide your own project, not the example URL.
+
+```js
+(getUserInput) => {
+  assert(
+    !/.*\/secure-real-time-multiplayer-game\.freecodecamp\.rocks/.test(
+      getUserInput('url')
+    )
+  );
+};
+```
+
+Multiple players can connect to a server and play.
+
+```js
+
+```
+
+Each player has an avatar.
+
+```js
+
+```
+
+Each player is represented by an object created by the `Player` class in `Player.mjs`.
+
+```js
+
+```
+
+At a minimum, each player object should contain a unique `id`, a `score`, and `x` and `y` coordinates representing the player's current position.
+
+```js
+
+```
+
+The game has at least one type of collectible item. Complete the `Collectible` class in `Collectible.mjs` to implement this.
+
+```js
+
+```
+
+At a minimum, each collectible item object created by the `Collectible` class should contain a unique `id`, a `value`, and `x` and `y` coordinates representing the item's current position.
+
+```js
+
+```
+
+Players can use the WASD and/or arrow keys to move their avatar. Complete the `movePlayer` method in `Player.mjs` to implement this.
+
+```js
+
+```
+
+The `movePlayer` method should accept two arguments: a string of "up", "down", "left", or "right", and a number for the amount of pixels the player's position should change. `movePlayer` should adjust the `x` and `y` coordinates of the player object it's called from.
+
+```js
+
+```
+
+The player's score should be used to calculate their rank among the other players. Complete the `calculateRank` method in the `Player` class to implement this.
+
+```js
+
+```
+
+The `calculateRank` method should accept an array of objects representing all connected players and return the string `Rank: currentRanking/totalPlayers`. For example, in a game with two players, if Player A has a score of 3 and Player B has a score of 5, `calculateRank` for Player A should return `Rank: 2/2`.
+
+```js
+
+```
+
+Players can collide with a collectible item. Complete the `collision` method in `Player.mjs` to implement this.
+
+```js
+
+```
+
+The `collision` method should accept a collectible item's object as an argument. If the player's avatar intersects with the item, the `collision` method should return `true`.
+
+```js
+
+```
+
+All players are kept in sync.
+
+```js
+
+```
+
+Players can disconnect from the game at any time.
+
+```js
+
+```
+
+Prevent the client from trying to guess / sniff the MIME type.
+
+```js
+async (getUserInput) => {
+  const data = await fetch(getUserInput('url') + '/_api/app-info');
+  const parsed = await data.json();
+  assert.equal(parsed.headers['x-content-type-options'], 'nosniff');
+};
+```
+
+Prevent cross-site scripting (XSS) attacks.
+
+```js
+async (getUserInput) => {
+  const data = await fetch(getUserInput('url') + '/_api/app-info');
+  const parsed = await data.json();
+  assert.equal(parsed.headers['x-xss-protection'], '1; mode=block');
+};
+```
+
+Nothing from the website is cached in the client.
+
+```js
+async (getUserInput) => {
+  const data = await fetch(getUserInput('url') + '/_api/app-info');
+  const parsed = await data.json();
+  assert.equal(parsed.headers['surrogate-control'], 'no-store');
+  assert.equal(
+    parsed.headers['cache-control'],
+    'no-store, no-cache, must-revalidate, proxy-revalidate'
+  );
+  assert.equal(parsed.headers['pragma'], 'no-cache');
+  assert.equal(parsed.headers['expires'], '0');
+};
+```
+
+The headers say that the site is powered by "PHP 7.4.3" even though it isn't (as a security measure).
+
+```js
+async (getUserInput) => {
+  const data = await fetch(getUserInput('url') + '/_api/app-info');
+  const parsed = await data.json();
+  assert.equal(parsed.headers['x-powered-by'], 'PHP 7.4.3');
+};
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions,
+  because they would need to be tested against a full working project.
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-projects/sha-1-password-cracker.md b/curriculum/challenges/arabic/09-information-security/information-security-projects/sha-1-password-cracker.md
new file mode 100644
index 00000000000..c924b8d4cbd
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-projects/sha-1-password-cracker.md
@@ -0,0 +1,74 @@
+---
+id: 5e46f983ac417301a38fb933
+title: SHA-1 Password Cracker
+challengeType: 10
+forumTopicId: 462374
+helpCategory: Python
+dashedName: sha-1-password-cracker
+---
+
+# --description--
+
+You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-SHA-1-password-cracker" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+
+We are still developing the interactive instructional part of the Python curriculum. For now, here are some videos on the freeCodeCamp.org YouTube channel that will teach you everything you need to know to complete this project:
+
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a> (14 hours)
+
+- <a href="https://www.freecodecamp.org/news/learn-python-basics-in-depth-video-course/" target="_blank" rel="noopener noreferrer nofollow">Learn Python Basics in Depth</a> (4 hours)
+
+- <a href="https://www.freecodecamp.org/news/intermediate-python-course/" target="_blank" rel="noopener noreferrer nofollow">Intermediate Python Course</a> (6 hours)
+
+# --instructions--
+
+Passwords should never be stored in plain text. They should be stored as hashes, just in case the password list is discovered. However, not all hashes are created equal.
+
+For this project you will learn about the importance of good security by creating a password cracker to figure out passwords that were hashed using SHA-1.
+
+Create a function that takes in a SHA-1 hash of a password and returns the password if it is one of the top 10,000 passwords used. If the SHA-1 hash is NOT of a password in the database, return "PASSWORD NOT IN DATABASE".
+
+The function should hash each password from `top-10000-passwords.txt` and compare it to the hash passed into the function.
+
+The function should take an optional second argument named `use_salts`. If set to true, each salt string from the file `known-salts.txt` should be appended AND prepended to each password from `top-10000-passwords.txt` before hashing and before comparing it to the hash passed into the function.
+
+Here are some hashed passwords to test the function with:
+
+- `b305921a3723cd5d70a375cd21a61e60aabb84ec` should return "sammy123"
+- `c7ab388a5ebefbf4d550652f1eb4d833e5316e3e` should return "abacab"
+- `5baa61e4c9b93f3f0682250b6cf8331b7ee68fd8` should return "password"
+
+Here are some hashed passwords to test the function with when `use_salts` is set to `True`:
+
+- `53d8b3dc9d39f0184144674e310185e41a87ffd5` should return "superman"
+- `da5a4e8cf89539e66097acd2f8af128acae2f8ae` should return "q1w2e3r4t5"
+- `ea3f62d498e3b98557f9f9cd0d905028b3b019e1` should return "bubbles1"
+
+The `hashlib` library has been imported for you. You should consider using it in your code. <a href="https://docs.python.org/3/library/hashlib.html" target="_blank" rel="noopener noreferrer nofollow">Learn more about "hashlib" here</a>.
+
+## Development
+
+Write your code in `password_cracker.py`. For development, you can use `main.py` to test your code. Click the "run" button and `main.py` will run.
+
+## Testing
+
+The unit tests for this project are in `test_module.py`. We imported the tests from `test_module.py` to `main.py` for your convenience. The tests will run automatically whenever you hit the "run" button.
+
+## Submitting
+
+Copy your project's URL and submit it to freeCodeCamp.
+
+# --hints--
+
+It should pass all Python tests.
+
+```js
+
+```
+
+# --solutions--
+
+```py
+  # Python challenges don't need solutions,
+  # because they would need to be tested against a full working project.
+  # Please check our contributing guidelines to learn more.
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md
new file mode 100644
index 00000000000..dc605701836
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-projects/stock-price-checker.md
@@ -0,0 +1,136 @@
+---
+id: 587d824a367417b2b2512c44
+title: Stock Price Checker
+challengeType: 4
+forumTopicId: 301572
+dashedName: stock-price-checker
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://stock-price-checker.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://stock-price-checker.freecodecamp.rocks/</a>.
+
+Since all reliable stock price APIs require an API key, we've built a workaround. Use <a href="https://stock-price-checker-proxy.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://stock-price-checker-proxy.freecodecamp.rocks/</a> to get up-to-date stock price information without needing to sign up for your own key.
+
+Working on this project will involve you writing your code using one of the following methods:
+
+-   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-stockchecker/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
+-   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-stockchecker" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --instructions--
+
+1.  SET `NODE_ENV` to `test` without quotes and set `DB` to your MongoDB connection string
+2.  Complete the project in `routes/api.js` or by creating a handler/controller
+3.  You will add any security features to `server.js`
+4.  You will create all of the functional tests in `tests/2_functional-tests.js`
+
+**Note** Privacy Considerations: Due to the requirement that only 1 like per IP should be accepted, you will have to save IP addresses. It is important to remain compliant with data privacy laws such as the General Data Protection Regulation. One option is to get permission to save the user's data, but it is much simpler to anonymize it. For this challenge, remember to anonymize IP addresses before saving them to the database. If you need ideas on how to do this, you may choose to hash the data, truncate it, or set part of the IP address to 0.
+
+Write the following tests in `tests/2_functional-tests.js`:
+
+-   Viewing one stock: GET request to `/api/stock-prices/`
+-   Viewing one stock and liking it: GET request to `/api/stock-prices/`
+-   Viewing the same stock and liking it again: GET request to `/api/stock-prices/`
+-   Viewing two stocks: GET request to `/api/stock-prices/`
+-   Viewing two stocks and liking them: GET request to `/api/stock-prices/`
+
+# --hints--
+
+You can provide your own project, not the example URL.
+
+```js
+(getUserInput) => {
+  assert(
+    !/.*\/stock-price-checker\.freecodecamp\.rocks/.test(getUserInput('url'))
+  );
+};
+```
+
+You should set the content security policies to only allow loading of scripts and CSS from your server.
+
+```js
+async (getUserInput) => {
+  const data = await fetch(getUserInput('url') + '/_api/app-info');
+  const parsed = await data.json();
+  assert.isTrue(
+    parsed.headers['content-security-policy'].includes("script-src 'self'")
+  );
+  assert.isTrue(
+    parsed.headers['content-security-policy'].includes("style-src 'self'")
+  );
+};
+```
+
+You can send a `GET` request to `/api/stock-prices`, passing a NASDAQ stock symbol to a `stock` query parameter. The returned object will contain a property named `stockData`.
+
+```js
+async (getUserInput) => {
+  const data = await fetch(
+    getUserInput('url') + '/api/stock-prices?stock=GOOG'
+  );
+  const parsed = await data.json();
+  assert.property(parsed, 'stockData');
+};
+```
+
+The `stockData` property includes the `stock` symbol as a string, the `price` as a number, and `likes` as a number.
+
+```js
+async (getUserInput) => {
+  const data = await fetch(
+    getUserInput('url') + '/api/stock-prices?stock=GOOG'
+  );
+  const parsed = await data.json();
+  const ticker = parsed.stockData;
+  assert.typeOf(ticker.price, 'number');
+  assert.typeOf(ticker.likes, 'number');
+  assert.typeOf(ticker.stock, 'string');
+};
+```
+
+You can also pass along a `like` field as `true` (boolean) to have your like added to the stock(s). Only 1 like per IP should be accepted.
+
+```js
+
+```
+
+If you pass along 2 stocks, the returned value will be an array with information about both stocks. Instead of `likes`, it will display `rel_likes` (the difference between the likes on both stocks) for both `stockData` objects.
+
+```js
+async (getUserInput) => {
+  const data = await fetch(
+    getUserInput('url') + '/api/stock-prices?stock=GOOG&stock=MSFT'
+  );
+  const parsed = await data.json();
+  const ticker = parsed.stockData;
+  assert.typeOf(ticker, 'array');
+  assert.property(ticker[0], 'rel_likes');
+  assert.property(ticker[1], 'rel_likes');
+};
+```
+
+All 5 functional tests are complete and passing.
+
+```js
+async (getUserInput) => {
+  const tests = await fetch(getUserInput('url') + '/_api/get-tests');
+  const parsed = await tests.json();
+  assert.isTrue(parsed.length >= 5);
+  parsed.forEach((test) => {
+    assert.equal(test.state, 'passed');
+  });
+};
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md
new file mode 100644
index 00000000000..d793c160a42
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md
@@ -0,0 +1,63 @@
+---
+id: 587d8248367417b2b2512c3c
+title: Ask Browsers to Access Your Site via HTTPS Only with helmet.hsts()
+challengeType: 2
+forumTopicId: 301573
+dashedName: ask-browsers-to-access-your-site-via-https-only-with-helmet-hsts
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+HTTP Strict Transport Security (HSTS) is a web security policy which helps to protect websites against protocol downgrade attacks and cookie hijacking. If your website can be accessed via HTTPS you can ask user’s browsers to avoid using insecure HTTP. By setting the header Strict-Transport-Security, you tell the browsers to use HTTPS for the future requests in a specified amount of time. This will work for the requests coming after the initial request.
+
+# --instructions--
+
+Configure `helmet.hsts()` to use HTTPS for the next 90 days. Pass the config object `{maxAge: timeInSeconds, force: true}`. You can create a variable `ninetyDaysInSeconds = 90*24*60*60;` to use for the `timeInSeconds`. Replit already has hsts enabled. To override its settings you need to set the field "force" to true in the config object. We will intercept and restore the Replit header, after inspecting it for testing.
+
+Note: Configuring HTTPS on a custom website requires the acquisition of a domain, and a SSL/TLS Certificate.
+
+# --hints--
+
+helmet.hsts() middleware should be mounted correctly
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/app-info').then(
+    (data) => {
+      assert.include(data.appStack, 'hsts');
+      assert.property(data.headers, 'strict-transport-security');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+maxAge should be equal to 7776000 s (90 days)
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/app-info').then(
+    (data) => {
+      assert.match(
+        data.headers['strict-transport-security'],
+        /^max-age=7776000;?/
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md
new file mode 100644
index 00000000000..bdfe0a5f4e0
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md
@@ -0,0 +1,42 @@
+---
+id: 587d8248367417b2b2512c3a
+title: Avoid Inferring the Response MIME Type with helmet.noSniff()
+challengeType: 2
+forumTopicId: 301574
+dashedName: avoid-inferring-the-response-mime-type-with-helmet-nosniff
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>. Browsers can use content or MIME sniffing to override response `Content-Type` headers to guess and process the data using an implicit content type. While this can be convenient in some scenarios, it can also lead to some dangerous attacks. This middleware sets the X-Content-Type-Options header to `nosniff`, instructing the browser to not bypass the provided `Content-Type`.
+
+# --instructions--
+
+Use the `helmet.noSniff()` method on your server.
+
+# --hints--
+
+helmet.noSniff() middleware should be mounted correctly
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/app-info').then(
+    (data) => {
+      assert.include(data.appStack, 'nosniff');
+      assert.equal(data.headers['x-content-type-options'], 'nosniff');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md
new file mode 100644
index 00000000000..df5a2738dbb
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md
@@ -0,0 +1,50 @@
+---
+id: 587d8249367417b2b2512c40
+title: Configure Helmet Using the ‘parent’ helmet() Middleware
+challengeType: 2
+forumTopicId: 301575
+dashedName: configure-helmet-using-the-parent-helmet-middleware
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+`app.use(helmet())` will automatically include all the middleware introduced above, except `noCache()`, and `contentSecurityPolicy()`, but these can be enabled if necessary. You can also disable or configure any other middleware individually, using a configuration object.
+
+**Example:**
+
+```js
+app.use(helmet({
+  frameguard: {         // configure
+    action: 'deny'
+  },
+  contentSecurityPolicy: {    // enable and configure
+    directives: {
+      defaultSrc: ["'self'"],
+      styleSrc: ['style.com'],
+    }
+  },
+  dnsPrefetchControl: false     // disable
+}))
+```
+
+We introduced each middleware separately for teaching purposes and for ease of testing. Using the ‘parent’ `helmet()` middleware is easy to implement in a real project.
+
+# --hints--
+
+no tests - it's a descriptive challenge
+
+```js
+assert(true);
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md
new file mode 100644
index 00000000000..e41d8a3d310
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md
@@ -0,0 +1,47 @@
+---
+id: 587d8249367417b2b2512c3e
+title: Disable Client-Side Caching with helmet.noCache()
+challengeType: 2
+forumTopicId: 301576
+dashedName: disable-client-side-caching-with-helmet-nocache
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+If you are releasing an update for your website, and you want the users to always download the newer version, you can (try to) disable caching on client’s browser. It can be useful in development too. Caching has performance benefits, which you will lose, so only use this option when there is a real need.
+
+# --instructions--
+
+Use the `helmet.noCache()` method on your server.
+
+# --hints--
+
+helmet.noCache() middleware should be mounted correctly
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/app-info').then(
+    (data) => {
+      assert.include(data.appStack, 'nocache');
+      assert.equal(
+        data.headers['cache-control'],
+        'no-store, no-cache, must-revalidate, proxy-revalidate'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md
new file mode 100644
index 00000000000..ec268aa846c
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md
@@ -0,0 +1,44 @@
+---
+id: 587d8248367417b2b2512c3d
+title: Disable DNS Prefetching with helmet.dnsPrefetchControl()
+challengeType: 2
+forumTopicId: 301577
+dashedName: disable-dns-prefetching-with-helmet-dnsprefetchcontrol
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+To improve performance, most browsers prefetch DNS records for the links in a page. In that way the destination ip is already known when the user clicks on a link. This may lead to over-use of the DNS service (if you own a big website, visited by millions people…), privacy issues (one eavesdropper could infer that you are on a certain page), or page statistics alteration (some links may appear visited even if they are not). If you have high security needs you can disable DNS prefetching, at the cost of a performance penalty.
+
+# --instructions--
+
+Use the `helmet.dnsPrefetchControl()` method on your server.
+
+# --hints--
+
+helmet.dnsPrefetchControl() middleware should be mounted correctly
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/app-info').then(
+    (data) => {
+      assert.include(data.appStack, 'dnsPrefetchControl');
+      assert.equal(data.headers['x-dns-prefetch-control'], 'off');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md
new file mode 100644
index 00000000000..d033c9f73c0
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md
@@ -0,0 +1,81 @@
+---
+id: 58a25bcff9fc0f352b528e7d
+title: Hash and Compare Passwords Asynchronously
+challengeType: 2
+forumTopicId: 301578
+dashedName: hash-and-compare-passwords-asynchronously
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+As hashing is designed to be computationally intensive, it is recommended to do so asynchronously on your server as to avoid blocking incoming connections while you hash. All you have to do to hash a password asynchronous is call
+
+```js
+bcrypt.hash(myPlaintextPassword, saltRounds, (err, hash) => {
+  /*Store hash in your db*/
+});
+```
+
+# --instructions--
+
+Add this hashing function to your server (we've already defined the variables used in the function for you to use) and log it to the console for you to see! At this point you would normally save the hash to your database.
+
+Now when you need to figure out if a new input is the same data as the hash you would just use the compare function.
+
+```js
+bcrypt.compare(myPlaintextPassword, hash, (err, res) => {
+  /*res == true or false*/
+});
+```
+
+Add this into your existing hash function (since you need to wait for the hash to complete before calling the compare function) after you log the completed hash and log 'res' to the console within the compare. You should see in the console a hash then 'true' is printed! If you change 'myPlaintextPassword' in the compare function to 'someOtherPlaintextPassword' then it should say false.
+
+```js
+bcrypt.hash('passw0rd!', 13, (err, hash) => {
+  console.log(hash);
+  //$2a$12$Y.PHPE15wR25qrrtgGkiYe2sXo98cjuMCG1YwSI5rJW1DSJp0gEYS
+  bcrypt.compare('passw0rd!', hash, (err, res) => {
+    console.log(res); //true
+  });
+});
+
+```
+
+Submit your page when you think you've got it right.
+
+# --hints--
+
+Async hash should be generated and correctly compared.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /START_ASYNC[^]*bcrypt.hash.*myPlaintextPassword( |),( |)saltRounds( |),( |).*err( |),( |)hash[^]*END_ASYNC/gi,
+        'You should call bcrypt.hash on myPlaintextPassword and saltRounds and handle err and hash as a result in the callback'
+      );
+      assert.match(
+        data,
+        /START_ASYNC[^]*bcrypt.hash[^]*bcrypt.compare.*myPlaintextPassword( |),( |)hash( |),( |).*err( |),( |)res[^]*}[^]*}[^]*END_ASYNC/gi,
+        'Nested within the hash function should be the compare function comparing myPlaintextPassword to hash'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md
new file mode 100644
index 00000000000..64fc17c3a70
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md
@@ -0,0 +1,66 @@
+---
+id: 58a25bcff9fc0f352b528e7e
+title: Hash and Compare Passwords Synchronously
+challengeType: 2
+forumTopicId: 301579
+dashedName: hash-and-compare-passwords-synchronously
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+Hashing synchronously is just as easy to do but can cause lag if using it server side with a high cost or with hashing done very often. Hashing with this method is as easy as calling
+
+```js
+var hash = bcrypt.hashSync(myPlaintextPassword, saltRounds);
+```
+
+Add this method of hashing to your code and then log the result to the console. Again, the variables used are already defined in the server so you won't need to adjust them. You may notice even though you are hashing the same password as in the async function, the result in the console is different- this is due to the salt being randomly generated each time as seen by the first 22 characters in the third string of the hash. Now to compare a password input with the new sync hash, you would use the compareSync method:
+
+```js
+var result = bcrypt.compareSync(myPlaintextPassword, hash);
+```
+
+with the result being a boolean true or false.
+
+# --instructions--
+
+Add the function in and log the result to the console to see it working.
+
+Submit your page when you think you've got it right.
+
+# --hints--
+
+Sync hash should be generated and correctly compared.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /START_SYNC[^]*hash.*=.*bcrypt.hashSync.*myPlaintextPassword( |),( |)saltRounds[^]*END_SYNC/gi,
+        'You should call bcrypt.hashSync on myPlaintextPassword with saltRounds'
+      );
+      assert.match(
+        data,
+        /START_SYNC[^]*result.*=.*bcrypt.compareSync.*myPlaintextPassword( |),( |)hash[^]*END_SYNC/gi,
+        'You should call bcrypt.compareSync on myPlaintextPassword with the hash generated in the last line'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md
new file mode 100644
index 00000000000..c1cd789591e
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md
@@ -0,0 +1,40 @@
+---
+id: 587d8247367417b2b2512c37
+title: Hide Potentially Dangerous Information Using helmet.hidePoweredBy()
+challengeType: 2
+forumTopicId: 301580
+dashedName: hide-potentially-dangerous-information-using-helmet-hidepoweredby
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+Hackers can exploit known vulnerabilities in Express/Node if they see that your site is powered by Express. `X-Powered-By: Express` is sent in every request coming from Express by default. Use the `helmet.hidePoweredBy()` middleware to remove the X-Powered-By header.
+
+# --hints--
+
+helmet.hidePoweredBy() middleware should be mounted correctly
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/app-info').then(
+    (data) => {
+      assert.include(data.appStack, 'hidePoweredBy');
+      assert.notEqual(data.headers['x-powered-by'], 'Express');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md
new file mode 100644
index 00000000000..14d946d6414
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/install-and-require-helmet.md
@@ -0,0 +1,53 @@
+---
+id: 587d8247367417b2b2512c36
+title: Install and Require Helmet
+challengeType: 2
+forumTopicId: 301581
+dashedName: install-and-require-helmet
+---
+
+# --description--
+
+Working on these challenges will involve you writing your code using one of the following methods:
+
+- Clone <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete these challenges locally.
+- Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete these challenges.
+- Use a site builder of your choice to complete the project. Be sure to incorporate all the files from our GitHub repo.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field.
+
+Helmet helps you secure your Express apps by setting various HTTP headers.
+
+# --instructions--
+
+All your code for these lessons goes in the `myApp.js` file between the lines of code we have started you off with. Do not change or delete the code we have added for you.
+
+Helmet version `3.21.3` has already been installed, so require it as `helmet` in `myApp.js`.
+
+# --hints--
+
+`helmet` version `3.21.3` should be in `package.json`
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      const packJson = JSON.parse(data);
+      const helmet = packJson.dependencies.helmet;
+      assert(helmet === '3.21.3' || helmet === '^3.21.3');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md
new file mode 100644
index 00000000000..6b032da9b70
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md
@@ -0,0 +1,64 @@
+---
+id: 587d8247367417b2b2512c38
+title: Mitigate the Risk of Clickjacking with helmet.frameguard()
+challengeType: 2
+forumTopicId: 301582
+dashedName: mitigate-the-risk-of-clickjacking-with-helmet-frameguard
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+Your page could be put in a `<frame>` or `<iframe>` without your consent. This can result in clickjacking attacks, among other things. Clickjacking is a technique of tricking a user into interacting with a page different from what the user thinks it is. This can be obtained executing your page in a malicious context, by mean of iframing. In that context a hacker can put a hidden layer over your page. Hidden buttons can be used to run bad scripts. This middleware sets the X-Frame-Options header. It restricts who can put your site in a frame. It has three modes: DENY, SAMEORIGIN, and ALLOW-FROM.
+
+We don’t need our app to be framed.
+
+# --instructions--
+
+Use `helmet.frameguard()` passing with the configuration object `{action: 'deny'}`.
+
+# --hints--
+
+helmet.frameguard() middleware should be mounted correctly
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/app-info').then(
+    (data) => {
+      assert.include(
+        data.appStack,
+        'frameguard',
+        'helmet.frameguard() middleware is not mounted correctly'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+helmet.frameguard() 'action' should be set to 'DENY'
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/app-info').then(
+    (data) => {
+      assert.property(data.headers, 'x-frame-options');
+      assert.equal(data.headers['x-frame-options'], 'DENY');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md
new file mode 100644
index 00000000000..2ec2f36fb95
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md
@@ -0,0 +1,51 @@
+---
+id: 587d8247367417b2b2512c39
+title: >-
+  Mitigate the Risk of Cross Site Scripting (XSS) Attacks with helmet.xssFilter()
+challengeType: 2
+forumTopicId: 301583
+dashedName: mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet-xssfilter
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+Cross-site scripting (XSS) is a frequent type of attack where malicious scripts are injected into vulnerable pages, with the purpose of stealing sensitive data like session cookies, or passwords.
+
+The basic rule to lower the risk of an XSS attack is simple: “Never trust user’s input”. As a developer you should always sanitize all the input coming from the outside. This includes data coming from forms, GET query urls, and even from POST bodies. Sanitizing means that you should find and encode the characters that may be dangerous e.g. &lt;, >.
+
+Modern browsers can help mitigating the risk by adopting better software strategies. Often these are configurable via http headers.
+
+The X-XSS-Protection HTTP header is a basic protection. The browser detects a potential injected script using a heuristic filter. If the header is enabled, the browser changes the script code, neutralizing it. It still has limited support.
+
+# --instructions--
+
+Use `helmet.xssFilter()` to sanitize input sent to your server.
+
+# --hints--
+
+helmet.xssFilter() middleware should be mounted correctly
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/app-info').then(
+    (data) => {
+      assert.include(data.appStack, 'xXssProtection');
+      assert.property(data.headers, 'x-xss-protection');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md
new file mode 100644
index 00000000000..aaf3167793c
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md
@@ -0,0 +1,44 @@
+---
+id: 587d8248367417b2b2512c3b
+title: Prevent IE from Opening Untrusted HTML with helmet.ieNoOpen()
+challengeType: 2
+forumTopicId: 301584
+dashedName: prevent-ie-from-opening-untrusted-html-with-helmet-ienoopen
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+Some web applications will serve untrusted HTML for download. Some versions of Internet Explorer by default open those HTML files in the context of your site. This means that an untrusted HTML page could start doing bad things in the context of your pages. This middleware sets the X-Download-Options header to noopen. This will prevent IE users from executing downloads in the trusted site’s context.
+
+# --instructions--
+
+Use the `helmet.ieNoOpen()` method on your server.
+
+# --hints--
+
+helmet.ieNoOpen() middleware should be mounted correctly
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/app-info').then(
+    (data) => {
+      assert.include(data.appStack, 'ienoopen');
+      assert.equal(data.headers['x-download-options'], 'noopen');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md
new file mode 100644
index 00000000000..bdb2cb50d10
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md
@@ -0,0 +1,71 @@
+---
+id: 587d8249367417b2b2512c3f
+title: Set a Content Security Policy with helmet.contentSecurityPolicy()
+challengeType: 2
+forumTopicId: 301585
+dashedName: set-a-content-security-policy-with-helmet-contentsecuritypolicy
+---
+
+# --description--
+
+As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+This challenge highlights one promising new defense that can significantly reduce the risk and impact of many type of attacks in modern browsers. By setting and configuring a Content Security Policy you can prevent the injection of anything unintended into your page. This will protect your app from XSS vulnerabilities, undesired tracking, malicious frames, and much more. CSP works by defining an allowed list of content sources which are trusted. You can configure them for each kind of resource a web page may need (scripts, stylesheets, fonts, frames, media, and so on…). There are multiple directives available, so a website owner can have a granular control. See HTML 5 Rocks, KeyCDN for more details. Unfortunately CSP is unsupported by older browser.
+
+By default, directives are wide open, so it’s important to set the defaultSrc directive as a fallback. Helmet supports both defaultSrc and default-src naming styles. The fallback applies for most of the unspecified directives.
+
+# --instructions--
+
+In this exercise, use `helmet.contentSecurityPolicy()`. Configure it by adding a `directives` object. In the object, set the `defaultSrc` to `["'self'"]` (the list of allowed sources must be in an array), in order to trust only your website address by default. Also set the `scriptSrc` directive so that you only allow scripts to be downloaded from your website (`'self'`), and from the domain `'trusted-cdn.com'`.
+
+Hint: in the `'self'` keyword, the single quotes are part of the keyword itself, so it needs to be enclosed in double quotes to be working.
+
+# --hints--
+
+helmet.contentSecurityPolicy() middleware should be mounted correctly
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/app-info').then(
+    (data) => {
+      assert.include(data.appStack, 'csp');
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+Your csp config is not correct. defaultSrc should be ["'self'"] and scriptSrc should be ["'self'", 'trusted-cdn.com']
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/app-info').then(
+    (data) => {
+      var cspHeader = Object.keys(data.headers).filter(function (k) {
+        return (
+          k === 'content-security-policy' ||
+          k === 'x-webkit-csp' ||
+          k === 'x-content-security-policy'
+        );
+      })[0];
+      assert.equal(
+        data.headers[cspHeader],
+        "default-src 'self'; script-src 'self' trusted-cdn.com"
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.responseText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions,
+  because they would need to be tested against a full working project.
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md
new file mode 100644
index 00000000000..b04ac7c372a
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md
@@ -0,0 +1,72 @@
+---
+id: 58a25bcef9fc0f352b528e7c
+title: Understand BCrypt Hashes
+challengeType: 2
+forumTopicId: 301586
+dashedName: understand-bcrypt-hashes
+---
+
+# --description--
+
+For the following challenges, you will be working with a new starter project that is different from the previous one. You can find the new starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or clone it from <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+
+BCrypt hashes are very secure. A hash is basically a fingerprint of the original data- always unique. This is accomplished by feeding the original data into an algorithm and returning a fixed length result. To further complicate this process and make it more secure, you can also *salt* your hash. Salting your hash involves adding random data to the original data before the hashing process which makes it even harder to crack the hash.
+
+BCrypt hashes will always look like `$2a$13$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8QO.uUUtcbqloU0yvzavOm` which does have a structure. The first small bit of data `$2a` is defining what kind of hash algorithm was used. The next portion `$13` defines the *cost*. Cost is about how much power it takes to compute the hash. It is on a logarithmic scale of 2^cost and determines how many times the data is put through the hashing algorithm. For example, at a cost of 10 you are able to hash 10 passwords a second on an average computer, however at a cost of 15 it takes 3 seconds per hash... and to take it further, at a cost of 31 it would take multiple days to complete a hash. A cost of 12 is considered very secure at this time. The last portion of your hash `$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8QO.uUUtcbqloU0yvzavOm`, looks like one large string of numbers, periods, and letters but it is actually two separate pieces of information. The first 22 characters is the salt in plain text, and the rest is the hashed password!
+
+# --instructions--
+
+Add all your code for these lessons in the `server.js` file between the code we have started you off with. Do not change or delete the code we have added for you.
+
+BCrypt has already been added as a dependency, so require it as `bcrypt` in your server.
+
+Submit your page when you think you've got it right.
+
+# --hints--
+
+BCrypt should be a dependency.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/package.json').then(
+    (data) => {
+      var packJson = JSON.parse(data);
+      assert.property(
+        packJson.dependencies,
+        'bcrypt',
+        'Your project should list "bcrypt" as a dependency'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+BCrypt should be properly required.
+
+```js
+(getUserInput) =>
+  $.get(getUserInput('url') + '/_api/server.js').then(
+    (data) => {
+      assert.match(
+        data,
+        /bcrypt.*=.*require.*('|")bcrypt('|")/gi,
+        'You should correctly require and instantiate socket.io as io.'
+      );
+    },
+    (xhr) => {
+      throw new Error(xhr.statusText);
+    }
+  );
+```
+
+# --solutions--
+
+```js
+/**
+  Backend challenges don't need solutions, 
+  because they would need to be tested against a full working project. 
+  Please check our contributing guidelines to learn more.
+*/
+```
diff --git a/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/creating-a-tcp-client.md b/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/creating-a-tcp-client.md
new file mode 100644
index 00000000000..c5df22d8720
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/creating-a-tcp-client.md
@@ -0,0 +1,34 @@
+---
+id: 5ea9997bbec2e9bc47e94db0
+title: Creating a TCP Client
+challengeType: 11
+videoId: ugYfJNTawks
+bilibiliIds:
+  aid: 933058124
+  bvid: BV16M4y1g7zL
+  cid: 409034338
+dashedName: creating-a-tcp-client
+---
+
+# --question--
+
+## --text--
+
+Which socket object method lets you set the maximum amount of data your client accepts at once?
+
+## --answers--
+
+`.recv(1024)`
+
+---
+
+`.decode('ascii')`
+
+---
+
+`.connect(host, port)`
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-a-banner-grabber.md b/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-a-banner-grabber.md
new file mode 100644
index 00000000000..41a2b4606ee
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-a-banner-grabber.md
@@ -0,0 +1,47 @@
+---
+id: 5ea9997bbec2e9bc47e94db3
+title: Developing a Banner Grabber
+challengeType: 11
+videoId: CeGW761BIsA
+bilibiliIds:
+  aid: 633014533
+  bvid: BV1Sb4y127H9
+  cid: 409036288
+dashedName: developing-a-banner-grabber
+---
+
+# --question--
+
+## --text--
+
+Fill in the blanks to complete the `banner` function below:
+
+```py
+def banner(ip, port):
+    s = socket.socket()
+    s.__A__((ip, __B__))
+    print(s.recv(1024))
+```
+
+## --answers--
+
+A: `connect`
+
+B: `port`
+
+---
+
+A: `getsockname`
+
+B: `'1-1024'`
+
+---
+
+A: `connect`
+
+B: `int(port)`
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-a-port-scanner.md b/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-a-port-scanner.md
new file mode 100644
index 00000000000..ca791985afa
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-a-port-scanner.md
@@ -0,0 +1,34 @@
+---
+id: 5ea9997bbec2e9bc47e94db4
+title: Developing a Port Scanner
+challengeType: 11
+videoId: z_qkqZS7KZ4
+bilibiliIds:
+  aid: 208077317
+  bvid: BV1Uh411p7HS
+  cid: 409036706
+dashedName: developing-a-port-scanner
+---
+
+# --question--
+
+## --text--
+
+What is the main difference between the `.connect()` and `.connect_ex()` methods?
+
+## --answers--
+
+There is no difference between the two methods.
+
+---
+
+If there is an error or if no host is found, `.connect()` returns an error code while `.connect_ex()` raises an exception.
+
+---
+
+If there is an error or if no host is found, `.connect()` raises an exception while `.connect_ex()` returns an error code.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-an-nmap-scanner-part-1.md b/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-an-nmap-scanner-part-1.md
new file mode 100644
index 00000000000..e4701abea2e
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-an-nmap-scanner-part-1.md
@@ -0,0 +1,34 @@
+---
+id: 5ea9997bbec2e9bc47e94db1
+title: Developing an Nmap Scanner part 1
+challengeType: 11
+videoId: jYk9XaGoAnk
+bilibiliIds:
+  aid: 805657338
+  bvid: BV1o34y1S7zf
+  cid: 414718986
+dashedName: developing-an-nmap-scanner-part-1
+---
+
+# --question--
+
+## --text--
+
+What is the correct command to install the Python 3 version of the `python-nmap` library?
+
+## --answers--
+
+`sudo apt install python-nmap`
+
+---
+
+`pip install python-nmap`
+
+---
+
+`pip3 install python-nmap`
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-an-nmap-scanner-part-2.md b/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-an-nmap-scanner-part-2.md
new file mode 100644
index 00000000000..dc6c49c2b8d
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/developing-an-nmap-scanner-part-2.md
@@ -0,0 +1,34 @@
+---
+id: 5ea9997bbec2e9bc47e94db2
+title: Developing an Nmap Scanner part 2
+challengeType: 11
+videoId: a98PscnUsTg
+bilibiliIds:
+  aid: 505526943
+  bvid: BV1Hg411c7oE
+  cid: 409034761
+dashedName: developing-an-nmap-scanner-part-2
+---
+
+# --question--
+
+## --text--
+
+Which of the following allows you to scan for UDP ports between 21 to 443?
+
+## --answers--
+
+`.scan(ip_addr, '21-443', '-v -sU')`
+
+---
+
+`.scan(ip_addr, '1-1024', '-v -sS')`
+
+---
+
+`.scan(ip_addr, '21-443', '-v -sS')`
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/introduction-and-setup.md b/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/introduction-and-setup.md
new file mode 100644
index 00000000000..68f48b5c617
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/introduction-and-setup.md
@@ -0,0 +1,34 @@
+---
+id: 5ea9997bbec2e9bc47e94dae
+title: Introduction and Setup
+challengeType: 11
+videoId: XeQ7ZKtb998
+bilibiliIds:
+  aid: 718017704
+  bvid: BV13Q4y1k7hX
+  cid: 409033630
+dashedName: introduction-and-setup
+---
+
+# --question--
+
+## --text--
+
+What code editor and extension does the instructor recommend for developing penetration testing tools in Python?
+
+## --answers--
+
+Atom and the atom-python-run extension.
+
+---
+
+VSCode and Microsoft's Python extension.
+
+---
+
+Sublime Text and the Anaconda package.
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/understanding-sockets-and-creating-a-tcp-server.md b/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/understanding-sockets-and-creating-a-tcp-server.md
new file mode 100644
index 00000000000..c1814fb5e4f
--- /dev/null
+++ b/curriculum/challenges/arabic/09-information-security/python-for-penetration-testing/understanding-sockets-and-creating-a-tcp-server.md
@@ -0,0 +1,34 @@
+---
+id: 5ea9997bbec2e9bc47e94daf
+title: Understanding Sockets and Creating a TCP Server
+challengeType: 11
+videoId: F1QI9tNuDQg
+bilibiliIds:
+  aid: 848005038
+  bvid: BV1bL4y1a7kJ
+  cid: 409034113
+dashedName: understanding-sockets-and-creating-a-tcp-server
+---
+
+# --question--
+
+## --text--
+
+Which of the following functions creates a socket object?
+
+## --answers--
+
+`socket.bind((host, port))`
+
+---
+
+`socket.gethostbyname()`
+
+---
+
+`socket.socket(socket.AF_INET, socket.SOCK_STREAM)`
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/find-the-symmetric-difference.md b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/find-the-symmetric-difference.md
new file mode 100644
index 00000000000..3b1f44da170
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/find-the-symmetric-difference.md
@@ -0,0 +1,150 @@
+---
+id: a3f503de51cf954ede28891d
+title: Find the Symmetric Difference
+challengeType: 1
+forumTopicId: 301611
+dashedName: find-the-symmetric-difference
+---
+
+# --description--
+
+The mathematical term <dfn>symmetric difference</dfn> (`△` or `⊕`) of two sets is the set of elements which are in either of the two sets but not in both. For example, for sets `A = {1, 2, 3}` and `B = {2, 3, 4}`, `A △ B = {1, 4}`.
+
+Symmetric difference is a binary operation, which means it operates on only two elements. So to evaluate an expression involving symmetric differences among *three* elements (`A △ B △ C`), you must complete one operation at a time. Thus, for sets `A` and `B` above, and `C = {2, 3}`, `A △ B △ C = (A △ B) △ C = {1, 4} △ {2, 3} = {1, 2, 3, 4}`.
+
+# --instructions--
+
+Create a function that takes two or more arrays and returns an array of their symmetric difference. The returned array must contain only unique values (*no duplicates*).
+
+# --hints--
+
+`sym([1, 2, 3], [5, 2, 1, 4])` should return `[3, 4, 5]`.
+
+```js
+assert.sameMembers(sym([1, 2, 3], [5, 2, 1, 4]), [3, 4, 5]);
+```
+
+`sym([1, 2, 3], [5, 2, 1, 4])` should contain only three elements.
+
+```js
+assert.equal(sym([1, 2, 3], [5, 2, 1, 4]).length, 3);
+```
+
+`sym([1, 2, 3, 3], [5, 2, 1, 4])` should return `[3, 4, 5]`.
+
+```js
+assert.sameMembers(sym([1, 2, 3, 3], [5, 2, 1, 4]), [3, 4, 5]);
+```
+
+`sym([1, 2, 3, 3], [5, 2, 1, 4])` should contain only three elements.
+
+```js
+assert.equal(sym([1, 2, 3, 3], [5, 2, 1, 4]).length, 3);
+```
+
+`sym([1, 2, 3], [5, 2, 1, 4, 5])` should return `[3, 4, 5]`.
+
+```js
+assert.sameMembers(sym([1, 2, 3], [5, 2, 1, 4, 5]), [3, 4, 5]);
+```
+
+`sym([1, 2, 3], [5, 2, 1, 4, 5])` should contain only three elements.
+
+```js
+assert.equal(sym([1, 2, 3], [5, 2, 1, 4, 5]).length, 3);
+```
+
+`sym([1, 2, 5], [2, 3, 5], [3, 4, 5])` should return `[1, 4, 5]`.
+
+```js
+assert.sameMembers(sym([1, 2, 5], [2, 3, 5], [3, 4, 5]), [1, 4, 5]);
+```
+
+`sym([1, 2, 5], [2, 3, 5], [3, 4, 5])` should contain only three elements.
+
+```js
+assert.equal(sym([1, 2, 5], [2, 3, 5], [3, 4, 5]).length, 3);
+```
+
+`sym([1, 1, 2, 5], [2, 2, 3, 5], [3, 4, 5, 5])` should return `[1, 4, 5]`.
+
+```js
+assert.sameMembers(sym([1, 1, 2, 5], [2, 2, 3, 5], [3, 4, 5, 5]), [1, 4, 5]);
+```
+
+`sym([1, 1, 2, 5], [2, 2, 3, 5], [3, 4, 5, 5])` should contain only three elements.
+
+```js
+assert.equal(sym([1, 1, 2, 5], [2, 2, 3, 5], [3, 4, 5, 5]).length, 3);
+```
+
+`sym([3, 3, 3, 2, 5], [2, 1, 5, 7], [3, 4, 6, 6], [1, 2, 3])` should return `[2, 3, 4, 6, 7]`.
+
+```js
+assert.sameMembers(
+  sym([3, 3, 3, 2, 5], [2, 1, 5, 7], [3, 4, 6, 6], [1, 2, 3]),
+  [2, 3, 4, 6, 7]
+);
+```
+
+`sym([3, 3, 3, 2, 5], [2, 1, 5, 7], [3, 4, 6, 6], [1, 2, 3])` should contain only five elements.
+
+```js
+assert.equal(
+  sym([3, 3, 3, 2, 5], [2, 1, 5, 7], [3, 4, 6, 6], [1, 2, 3]).length,
+  5
+);
+```
+
+`sym([3, 3, 3, 2, 5], [2, 1, 5, 7], [3, 4, 6, 6], [1, 2, 3], [5, 3, 9, 8], [1])` should return `[1, 2, 4, 5, 6, 7, 8, 9]`.
+
+```js
+assert.sameMembers(
+  sym(
+    [3, 3, 3, 2, 5],
+    [2, 1, 5, 7],
+    [3, 4, 6, 6],
+    [1, 2, 3],
+    [5, 3, 9, 8],
+    [1]
+  ),
+  [1, 2, 4, 5, 6, 7, 8, 9]
+);
+```
+
+`sym([3, 3, 3, 2, 5], [2, 1, 5, 7], [3, 4, 6, 6], [1, 2, 3], [5, 3, 9, 8], [1])` should contain only eight elements.
+
+```js
+assert.equal(
+  sym([3, 3, 3, 2, 5], [2, 1, 5, 7], [3, 4, 6, 6], [1, 2, 3], [5, 3, 9, 8], [1])
+    .length,
+  8
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sym(args) {
+  return args;
+}
+
+sym([1, 2, 3], [5, 2, 1, 4]);
+```
+
+# --solutions--
+
+```js
+function sym() {
+  var arrays = [].slice.call(arguments);
+  return arrays.reduce(function (symDiff, arr) {
+    return symDiff.concat(arr).filter(function (val, idx, theArr) {
+      return theArr.indexOf(val) === idx
+        && (symDiff.indexOf(val) === -1 || arr.indexOf(val) === -1);
+    });
+  });
+}
+sym([1, 2, 3], [5, 2, 1, 4]);
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-binary-search.md b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-binary-search.md
new file mode 100644
index 00000000000..bd2e8306ee1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-binary-search.md
@@ -0,0 +1,155 @@
+---
+id: 61abc7ebf3029b56226de5b6
+title: Implement Binary Search
+challengeType: 1
+forumTopicId: 487618
+dashedName: implement-binary-search
+---
+
+# --description--
+
+Binary search is an **O(log(n))** efficiency algorithm for searching a sorted array to find an element. It operates using the following steps:
+
+1. Find the middle `value` of a sorted array. If `value == target` return (found it!).
+1. If middle `value < target`, search right half of array in next compare.
+1. If middle `value > target`, search left half of array in next compare.
+
+As you can see, you are successively halving an array, which gives you the log(n) efficiency. For this challenge, we want you to show your work - how you got to the target value... the path you took!
+
+# --instructions--
+
+Write a function `binarySearch` that implements the binary search algorithm on an array, returning the path you took (each middle value comparison) to find the target in an array.
+
+The function takes a sorted array of integers and a target value as input. It returns an array containing (in-order) the middle value you found at each halving of the original array until you found the target value. The target value should be the last element of the returned array. If value not is found, return the string `Value Not Found`.
+
+For example, `binarySearch([1,2,3,4,5,6,7], 5)` would return `[4,6,5]`.
+
+For this challenge, when halving, you MUST use `Math.floor()` when doing division: `Math.floor(x/2)`. This will give a consistent, testable path.
+
+**Note:** The following array will be used in tests:
+
+```js
+const testArray = [
+  0, 1, 2, 3, 4, 5, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
+  23, 49, 70
+];
+```
+
+# --hints--
+
+`binarySearch` should be a function.
+
+```js
+assert(typeof binarySearch == 'function');
+```
+
+`binarySearch(testArray, 0)` should return `[13, 5, 2, 0]`.
+
+```js
+assert.deepEqual(binarySearch(_testArray, 0), [13, 5, 2, 0]);
+```
+
+`binarySearch(testArray, 1)` should return `[13, 5, 2, 0, 1]`.
+
+```js
+assert.deepEqual(binarySearch(_testArray, 1), [13, 5, 2, 0, 1]);
+```
+
+
+`binarySearch(testArray, 2)` should return `[13, 5, 2]`.
+
+```js
+assert.deepEqual(binarySearch(_testArray, 2), [13, 5, 2]);
+```
+
+`binarySearch(testArray, 6)` should return the string `Value Not Found`.
+
+```js
+assert.strictEqual(binarySearch(_testArray, 6), 'Value Not Found');
+```
+
+`binarySearch(testArray, 11)` should return `[13, 5, 10, 11]`.
+
+```js
+assert.deepEqual(binarySearch(_testArray, 11), [13, 5, 10, 11])
+```
+
+`binarySearch(testArray, 13)` should return `[13]`.
+
+```js
+assert.deepEqual(binarySearch(_testArray, 13), [13]);
+```
+
+`binarySearch(testArray, 70)` should return `[13, 19, 22, 49, 70]`.
+
+```js
+assert.deepEqual(binarySearch(_testArray, 70), [13, 19, 22, 49, 70]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testArray = [
+  0, 1, 2, 3, 4, 5, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22,
+  23, 49, 70
+];
+```
+
+## --seed-contents--
+
+```js
+function binarySearch(searchList, value) {
+  let arrayPath = [];
+  return arrayPath;
+}
+```
+
+
+
+# --solutions--
+
+```js
+let binarySearch = (searchList, value) => {
+  let arrayPath = [];
+
+  // set initial L - M - R
+  let left = 0;
+  let right = searchList.length - 1;
+  let middle = Math.floor(right / 2);
+
+  // if first comparison finds value
+  if (searchList[middle] == value) {
+    arrayPath.push(searchList[middle]);
+    return arrayPath;
+  }
+
+  while (searchList[middle] !== value) {
+    // add to output array
+    arrayPath.push(searchList[middle]);
+
+    // not found
+    if (right < left) {
+      return 'Value Not Found';
+    }
+    // value is in left or right portion of array
+    // update L - M - R
+    if (searchList[middle] > value) {
+      right = middle - 1;
+      middle = left + Math.floor((right - left) / 2);
+    } else {
+      left = middle + 1;
+      middle = left + Math.floor((right - left) / 2);
+    }
+
+    // if found update output array and exit
+    if (searchList[middle] == value) {
+      arrayPath.push(searchList[middle]);
+
+      break;
+    }
+  }
+  return arrayPath;
+};
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-bubble-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-bubble-sort.md
new file mode 100644
index 00000000000..51fbb296de5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-bubble-sort.md
@@ -0,0 +1,138 @@
+---
+id: 8d5123c8c441eddfaeb5bdef
+title: Implement Bubble Sort
+challengeType: 1
+forumTopicId: 301612
+dashedName: implement-bubble-sort
+---
+
+# --description--
+
+This is the first of several challenges on sorting algorithms. Given an array of unsorted items, we want to be able to return a sorted array. We will see several different methods to do this and learn some tradeoffs between these different approaches. While most modern languages have built-in sorting methods for operations like this, it is still important to understand some of the common basic approaches and learn how they can be implemented.
+
+Here we will see bubble sort. The bubble sort method starts at the beginning of an unsorted array and 'bubbles up' unsorted values towards the end, iterating through the array until it is completely sorted. It does this by comparing adjacent items and swapping them if they are out of order. The method continues looping through the array until no swaps occur at which point the array is sorted.
+
+This method requires multiple iterations through the array and for average and worst cases has quadratic time complexity. While simple, it is usually impractical in most situations.
+
+**Instructions:** Write a function `bubbleSort` which takes an array of integers as input and returns an array of these integers in sorted order from least to greatest.
+
+# --hints--
+
+`bubbleSort` should be a function.
+
+```js
+assert(typeof bubbleSort == 'function');
+```
+
+`bubbleSort` should return a sorted array (least to greatest).
+
+```js
+assert(
+  isSorted(
+    bubbleSort([
+      1,
+      4,
+      2,
+      8,
+      345,
+      123,
+      43,
+      32,
+      5643,
+      63,
+      123,
+      43,
+      2,
+      55,
+      1,
+      234,
+      92
+    ])
+  )
+);
+```
+
+`bubbleSort([1,4,2,8,345,123,43,32,5643,63,123,43,2,55,1,234,92])` should return an array that is unchanged except for order.
+
+```js
+assert.sameMembers(
+  bubbleSort([
+    1,
+    4,
+    2,
+    8,
+    345,
+    123,
+    43,
+    32,
+    5643,
+    63,
+    123,
+    43,
+    2,
+    55,
+    1,
+    234,
+    92
+  ]),
+  [1, 4, 2, 8, 345, 123, 43, 32, 5643, 63, 123, 43, 2, 55, 1, 234, 92]
+);
+```
+
+`bubbleSort` should not use the built-in `.sort()` method.
+
+```js
+assert(isBuiltInSortUsed());
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+function isSorted(a){
+  for(let i = 0; i < a.length - 1; i++)
+    if(a[i] > a[i + 1])
+      return false;
+  return true;
+}
+
+function isBuiltInSortUsed(){
+  let sortUsed = false;
+  Array.prototype.sort = () => sortUsed = true;
+  bubbleSort([0, 1]);
+  return !sortUsed;
+}
+```
+
+## --seed-contents--
+
+```js
+function bubbleSort(array) {
+  // Only change code below this line
+  return array;
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function bubbleSort(array) {
+  for (let i = 0; i < array.length; i++) {
+    let swapped = false;
+    for (let j = 1; j < array.length; j++) {
+      if (array[j - 1] > array[j]) {
+        let temp = array[j-1];
+        array[j-1] =  array[j];
+        array[j] = temp;
+        swapped = true;
+      }
+    }
+    if (swapped === false) {
+      break;
+    }
+  }
+  return array;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-insertion-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-insertion-sort.md
new file mode 100644
index 00000000000..74d77163d21
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-insertion-sort.md
@@ -0,0 +1,135 @@
+---
+id: 587d8259367417b2b2512c86
+title: Implement Insertion Sort
+challengeType: 1
+forumTopicId: 301613
+dashedName: implement-insertion-sort
+---
+
+# --description--
+
+The next sorting method we'll look at is insertion sort. This method works by building up a sorted array at the beginning of the list. It begins the sorted array with the first element. Then it inspects the next element and swaps it backwards into the sorted array until it is in sorted position. It continues iterating through the list and swapping new items backwards into the sorted portion until it reaches the end. This algorithm has quadratic time complexity in the average and worst cases.
+
+**Instructions:** Write a function `insertionSort` which takes an array of integers as input and returns an array of these integers in sorted order from least to greatest.
+
+# --hints--
+
+`insertionSort` should be a function.
+
+```js
+assert(typeof insertionSort == 'function');
+```
+
+`insertionSort` should return a sorted array (least to greatest).
+
+```js
+assert(
+  isSorted(
+    insertionSort([
+      1,
+      4,
+      2,
+      8,
+      345,
+      123,
+      43,
+      32,
+      5643,
+      63,
+      123,
+      43,
+      2,
+      55,
+      1,
+      234,
+      92
+    ])
+  )
+);
+```
+
+`insertionSort([1,4,2,8,345,123,43,32,5643,63,123,43,2,55,1,234,92])` should return an array that is unchanged except for order.
+
+```js
+assert.sameMembers(
+  insertionSort([
+    1,
+    4,
+    2,
+    8,
+    345,
+    123,
+    43,
+    32,
+    5643,
+    63,
+    123,
+    43,
+    2,
+    55,
+    1,
+    234,
+    92
+  ]),
+  [1, 4, 2, 8, 345, 123, 43, 32, 5643, 63, 123, 43, 2, 55, 1, 234, 92]
+);
+```
+
+`insertionSort([5, 4, 33, 2, 8])` should return `[2, 4, 5, 8, 33]`.
+
+```js
+assert.deepEqual(insertionSort([5, 4, 33, 2, 8]), [2, 4, 5, 8, 33])
+```
+
+`insertionSort` should not use the built-in `.sort()` method.
+
+```js
+assert(isBuiltInSortUsed());
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+function isSorted(a){
+  for(let i = 0; i < a.length - 1; i++)
+    if(a[i] > a[i + 1])
+      return false;
+  return true;
+}
+
+function isBuiltInSortUsed(){
+  let sortUsed = false;
+  Array.prototype.sort = () => sortUsed = true;
+  insertionSort([0, 1]);
+  return !sortUsed;
+}
+```
+
+## --seed-contents--
+
+```js
+function insertionSort(array) {
+  // Only change code below this line
+  return array;
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function insertionSort (array) {
+  for (let currentIndex = 0; currentIndex < array.length; currentIndex++) {
+    let current = array[currentIndex];
+    let j = currentIndex - 1;
+    while (j > -1 && array[j] > current) {
+      array[j + 1] = array[j];
+      j--;
+    }
+    array[j + 1] = current;
+  }
+  return array;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-merge-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-merge-sort.md
new file mode 100644
index 00000000000..e6d9660a3a2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-merge-sort.md
@@ -0,0 +1,156 @@
+---
+id: 587d825c367417b2b2512c8f
+title: Implement Merge Sort
+challengeType: 1
+forumTopicId: 301614
+dashedName: implement-merge-sort
+---
+
+# --description--
+
+Another common intermediate sorting algorithm is merge sort. Like quick sort, merge sort also uses a divide-and-conquer, recursive methodology to sort an array. It takes advantage of the fact that it is relatively easy to sort two arrays as long as each is sorted in the first place. But we'll start with only one array as input, so how do we get to two sorted arrays from that? Well, we can recursively divide the original input in two until we reach the base case of an array with one item. A single-item array is naturally sorted, so then we can start combining. This combination will unwind the recursive calls that split the original array, eventually producing a final sorted array of all the elements. The steps of merge sort, then, are:
+
+**1)** Recursively split the input array in half until a sub-array with only one element is produced.
+
+**2)** Merge each sorted sub-array together to produce the final sorted array.
+
+Merge sort is an efficient sorting method, with time complexity of *O(nlog(n))*. This algorithm is popular because it is performant and relatively easy to implement.
+
+As an aside, this will be the last sorting algorithm we cover here. However, later in the section on tree data structures we will describe heap sort, another efficient sorting method that requires a binary heap in its implementation.
+
+**Instructions:** Write a function `mergeSort` which takes an array of integers as input and returns an array of these integers in sorted order from least to greatest. A good way to implement this is to write one function, for instance `merge`, which is responsible for merging two sorted arrays, and another function, for instance `mergeSort`, which is responsible for the recursion that produces single-item arrays to feed into merge. Good luck!
+
+# --hints--
+
+`mergeSort` should be a function.
+
+```js
+assert(typeof mergeSort == 'function');
+```
+
+`mergeSort` should return a sorted array (least to greatest).
+
+```js
+assert(
+  isSorted(
+    mergeSort([
+      1,
+      4,
+      2,
+      8,
+      345,
+      123,
+      43,
+      32,
+      5643,
+      63,
+      123,
+      43,
+      2,
+      55,
+      1,
+      234,
+      92
+    ])
+  )
+);
+```
+
+`mergeSort([1,4,2,8,345,123,43,32,5643,63,123,43,2,55,1,234,92])` should return an array that is unchanged except for order.
+
+```js
+assert.sameMembers(
+  mergeSort([
+    1,
+    4,
+    2,
+    8,
+    345,
+    123,
+    43,
+    32,
+    5643,
+    63,
+    123,
+    43,
+    2,
+    55,
+    1,
+    234,
+    92
+  ]),
+  [1, 4, 2, 8, 345, 123, 43, 32, 5643, 63, 123, 43, 2, 55, 1, 234, 92]
+);
+```
+
+`mergeSort` should not use the built-in `.sort()` method.
+
+```js
+assert(isBuiltInSortUsed());
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+function isSorted(a){
+  for(let i = 0; i < a.length - 1; i++)
+    if(a[i] > a[i + 1])
+      return false;
+  return true;
+}
+
+function isBuiltInSortUsed(){
+  let sortUsed = false;
+  Array.prototype.sort = () => sortUsed = true;
+  mergeSort([0, 1]);
+  return !sortUsed;
+}
+```
+
+## --seed-contents--
+
+```js
+function mergeSort(array) {
+  // Only change code below this line
+  return array;
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function mergeSort(array) {
+  if (array.length === 1) {
+    return array;
+  } else {
+    const splitIndex = Math.floor(array.length / 2);
+    return merge(
+      mergeSort(array.slice(0, splitIndex)),
+      mergeSort(array.slice(splitIndex))
+    );
+  }
+
+  // Merge two sorted arrays
+  function merge(array1, array2) {
+    let merged = [];
+    while (array1.length && array2.length) {
+      if (array1[0] < array2[0]) {
+        merged.push(array1.shift());
+      } else if (array1[0] > array2[0]) {
+        merged.push(array2.shift());
+      } else {
+        merged.push(array1.shift(), array2.shift());
+      }
+    }
+
+    // After looping ends, one array is empty, and other array contains only
+    // values greater than all values in `merged`
+    return [...merged, ...array1, ...array2];
+  }
+}
+
+mergeSort([1, 4, 2, 8, 345, 123, 43, 32, 5643, 63, 123, 43, 2, 55, 1, 234, 92]);
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-quick-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-quick-sort.md
new file mode 100644
index 00000000000..53ac770885b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-quick-sort.md
@@ -0,0 +1,142 @@
+---
+id: 587d825a367417b2b2512c89
+title: Implement Quick Sort
+challengeType: 1
+forumTopicId: 301615
+dashedName: implement-quick-sort
+---
+
+# --description--
+
+Here we will move on to an intermediate sorting algorithm: quick sort. Quick sort is an efficient, recursive divide-and-conquer approach to sorting an array. In this method, a pivot value is chosen in the original array. The array is then partitioned into two subarrays of values less than and greater than the pivot value. We then combine the result of recursively calling the quick sort algorithm on both sub-arrays. This continues until the base case of an empty or single-item array is reached, which we return. The unwinding of the recursive calls return us the sorted array.
+
+Quick sort is a very efficient sorting method, providing *O(nlog(n))* performance on average. It is also relatively easy to implement. These attributes make it a popular and useful sorting method.
+
+**Instructions:** Write a function `quickSort` which takes an array of integers as input and returns an array of these integers in sorted order from least to greatest. While the choice of the pivot value is important, any pivot will do for our purposes here. For simplicity, the first or last element could be used.
+
+# --hints--
+
+`quickSort` should be a function.
+
+```js
+assert(typeof quickSort == 'function');
+```
+
+`quickSort` should return a sorted array (least to greatest).
+
+```js
+assert(
+  isSorted(
+    quickSort([
+      1,
+      4,
+      2,
+      8,
+      345,
+      123,
+      43,
+      32,
+      5643,
+      63,
+      123,
+      43,
+      2,
+      55,
+      1,
+      234,
+      92
+    ])
+  )
+);
+```
+
+`quickSort([1,4,2,8,345,123,43,32,5643,63,123,43,2,55,1,234,92])` should return an array that is unchanged except for order.
+
+```js
+assert.sameMembers(
+  quickSort([
+    1,
+    4,
+    2,
+    8,
+    345,
+    123,
+    43,
+    32,
+    5643,
+    63,
+    123,
+    43,
+    2,
+    55,
+    1,
+    234,
+    92
+  ]),
+  [1, 4, 2, 8, 345, 123, 43, 32, 5643, 63, 123, 43, 2, 55, 1, 234, 92]
+);
+```
+
+`quickSort` should not use the built-in `.sort()` method.
+
+```js
+assert(isBuiltInSortUsed());
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+function isSorted(a){
+  for(let i = 0; i < a.length - 1; i++)
+    if(a[i] > a[i + 1])
+      return false;
+  return true;
+}
+
+function isBuiltInSortUsed(){
+  let sortUsed = false;
+  Array.prototype.sort = () => sortUsed = true;
+  quickSort([0, 1]);
+  return !sortUsed;
+}
+```
+
+## --seed-contents--
+
+```js
+function quickSort(array) {
+  // Only change code below this line
+  return array;
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function quickSort(array) {
+  if (array.length === 0) {
+    return [];
+  } else {
+    const pivotValue = array[0];
+
+    // Sort elements into three piles
+    let lesser = [];
+    let equal = [];
+    let greater = [];
+    for (let e of array) {
+      if (e < pivotValue) {
+        lesser.push(e);
+      } else if (e > pivotValue) {
+        greater.push(e);
+      } else {
+        equal.push(e);
+      }
+    }
+
+    return [...quickSort(lesser), ...equal, ...quickSort(greater)];
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-selection-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-selection-sort.md
new file mode 100644
index 00000000000..5e677d406d7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/implement-selection-sort.md
@@ -0,0 +1,131 @@
+---
+id: 587d8259367417b2b2512c85
+title: Implement Selection Sort
+challengeType: 1
+forumTopicId: 301616
+dashedName: implement-selection-sort
+---
+
+# --description--
+
+Here we will implement selection sort. Selection sort works by selecting the minimum value in a list and swapping it with the first value in the list. It then starts at the second position, selects the smallest value in the remaining list, and swaps it with the second element. It continues iterating through the list and swapping elements until it reaches the end of the list. Now the list is sorted. Selection sort has quadratic time complexity in all cases.
+
+**Instructions**: Write a function `selectionSort` which takes an array of integers as input and returns an array of these integers in sorted order from least to greatest.
+
+# --hints--
+
+`selectionSort` should be a function.
+
+```js
+assert(typeof selectionSort == 'function');
+```
+
+`selectionSort` should return a sorted array (least to greatest).
+
+```js
+assert(
+  isSorted(
+    selectionSort([
+      1,
+      4,
+      2,
+      8,
+      345,
+      123,
+      43,
+      32,
+      5643,
+      63,
+      123,
+      43,
+      2,
+      55,
+      1,
+      234,
+      92
+    ])
+  )
+);
+```
+
+`selectionSort([1,4,2,8,345,123,43,32,5643,63,123,43,2,55,1,234,92])` should return an array that is unchanged except for order.
+
+```js
+assert.sameMembers(
+  selectionSort([
+    1,
+    4,
+    2,
+    8,
+    345,
+    123,
+    43,
+    32,
+    5643,
+    63,
+    123,
+    43,
+    2,
+    55,
+    1,
+    234,
+    92
+  ]),
+  [1, 4, 2, 8, 345, 123, 43, 32, 5643, 63, 123, 43, 2, 55, 1, 234, 92]
+);
+```
+
+`selectionSort` should not use the built-in `.sort()` method.
+
+```js
+assert(isBuiltInSortUsed());
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+function isSorted(a){
+  for(let i = 0; i < a.length - 1; i++)
+    if(a[i] > a[i + 1])
+      return false;
+  return true;
+}
+
+function isBuiltInSortUsed(){
+  let sortUsed = false;
+  Array.prototype.sort = () => sortUsed = true;
+  selectionSort([0, 1]);
+  return !sortUsed;
+}
+```
+
+## --seed-contents--
+
+```js
+function selectionSort(array) {
+  // Only change code below this line
+  return array;
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function selectionSort(array) {
+  for (let i = 0; i < array.length-1; i++) {
+    let minimumIndex = i;
+    for (let j = i+1; j < array.length; j++){
+      if (array[j] < array[minimumIndex]) {
+        minimumIndex = j;
+      }
+    }
+    let value = array[minimumIndex];
+    array[minimumIndex] = array[i];
+    array[i] = value;
+  }
+    return array;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/inventory-update.md b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/inventory-update.md
new file mode 100644
index 00000000000..ad91fa00e61
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/inventory-update.md
@@ -0,0 +1,228 @@
+---
+id: a56138aff60341a09ed6c480
+title: Inventory Update
+challengeType: 1
+forumTopicId: 16019
+dashedName: inventory-update
+---
+
+# --description--
+
+Compare and update the inventory stored in a 2D array against a second 2D array of a fresh delivery. Update the current existing inventory item quantities (in `arr1`). If an item cannot be found, add the new item and quantity into the inventory array. The returned inventory array should be in alphabetical order by item.
+
+# --hints--
+
+The function `updateInventory` should return an array.
+
+```js
+assert.isArray(
+  updateInventory(
+    [
+      [21, 'Bowling Ball'],
+      [2, 'Dirty Sock'],
+      [1, 'Hair Pin'],
+      [5, 'Microphone']
+    ],
+    [
+      [2, 'Hair Pin'],
+      [3, 'Half-Eaten Apple'],
+      [67, 'Bowling Ball'],
+      [7, 'Toothpaste']
+    ]
+  )
+);
+```
+
+`updateInventory([[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]], [[2, "Hair Pin"], [3, "Half-Eaten Apple"], [67, "Bowling Ball"], [7, "Toothpaste"]])` should return an array with a length of 6.
+
+```js
+assert.equal(
+  updateInventory(
+    [
+      [21, 'Bowling Ball'],
+      [2, 'Dirty Sock'],
+      [1, 'Hair Pin'],
+      [5, 'Microphone']
+    ],
+    [
+      [2, 'Hair Pin'],
+      [3, 'Half-Eaten Apple'],
+      [67, 'Bowling Ball'],
+      [7, 'Toothpaste']
+    ]
+  ).length,
+  6
+);
+```
+
+`updateInventory([[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]], [[2, "Hair Pin"], [3, "Half-Eaten Apple"], [67, "Bowling Ball"], [7, "Toothpaste"]])` should return `[[88, "Bowling Ball"], [2, "Dirty Sock"], [3, "Hair Pin"], [3, "Half-Eaten Apple"], [5, "Microphone"], [7, "Toothpaste"]]`.
+
+```js
+assert.deepEqual(
+  updateInventory(
+    [
+      [21, 'Bowling Ball'],
+      [2, 'Dirty Sock'],
+      [1, 'Hair Pin'],
+      [5, 'Microphone']
+    ],
+    [
+      [2, 'Hair Pin'],
+      [3, 'Half-Eaten Apple'],
+      [67, 'Bowling Ball'],
+      [7, 'Toothpaste']
+    ]
+  ),
+  [
+    [88, 'Bowling Ball'],
+    [2, 'Dirty Sock'],
+    [3, 'Hair Pin'],
+    [3, 'Half-Eaten Apple'],
+    [5, 'Microphone'],
+    [7, 'Toothpaste']
+  ]
+);
+```
+
+`updateInventory([[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]], [])` should return `[[21, "Bowling Ball"], [2, "Dirty Sock"], [1, "Hair Pin"], [5, "Microphone"]]`.
+
+```js
+assert.deepEqual(
+  updateInventory(
+    [
+      [21, 'Bowling Ball'],
+      [2, 'Dirty Sock'],
+      [1, 'Hair Pin'],
+      [5, 'Microphone']
+    ],
+    []
+  ),
+  [
+    [21, 'Bowling Ball'],
+    [2, 'Dirty Sock'],
+    [1, 'Hair Pin'],
+    [5, 'Microphone']
+  ]
+);
+```
+
+`updateInventory([], [[2, "Hair Pin"], [3, "Half-Eaten Apple"], [67, "Bowling Ball"], [7, "Toothpaste"]])` should return `[[67, "Bowling Ball"], [2, "Hair Pin"], [3, "Half-Eaten Apple"], [7, "Toothpaste"]]`.
+
+```js
+assert.deepEqual(
+  updateInventory(
+    [],
+    [
+      [2, 'Hair Pin'],
+      [3, 'Half-Eaten Apple'],
+      [67, 'Bowling Ball'],
+      [7, 'Toothpaste']
+    ]
+  ),
+  [
+    [67, 'Bowling Ball'],
+    [2, 'Hair Pin'],
+    [3, 'Half-Eaten Apple'],
+    [7, 'Toothpaste']
+  ]
+);
+```
+
+`updateInventory([[0, "Bowling Ball"], [0, "Dirty Sock"], [0, "Hair Pin"], [0, "Microphone"]], [[1, "Hair Pin"], [1, "Half-Eaten Apple"], [1, "Bowling Ball"], [1, "Toothpaste"]])` should return `[[1, "Bowling Ball"], [0, "Dirty Sock"], [1, "Hair Pin"], [1, "Half-Eaten Apple"], [0, "Microphone"], [1, "Toothpaste"]]`.
+
+```js
+assert.deepEqual(
+  updateInventory(
+    [
+      [0, 'Bowling Ball'],
+      [0, 'Dirty Sock'],
+      [0, 'Hair Pin'],
+      [0, 'Microphone']
+    ],
+    [
+      [1, 'Hair Pin'],
+      [1, 'Half-Eaten Apple'],
+      [1, 'Bowling Ball'],
+      [1, 'Toothpaste']
+    ]
+  ),
+  [
+    [1, 'Bowling Ball'],
+    [0, 'Dirty Sock'],
+    [1, 'Hair Pin'],
+    [1, 'Half-Eaten Apple'],
+    [0, 'Microphone'],
+    [1, 'Toothpaste']
+  ]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function updateInventory(arr1, arr2) {
+    return arr1;
+}
+
+// Example inventory lists
+var curInv = [
+    [21, "Bowling Ball"],
+    [2, "Dirty Sock"],
+    [1, "Hair Pin"],
+    [5, "Microphone"]
+];
+
+var newInv = [
+    [2, "Hair Pin"],
+    [3, "Half-Eaten Apple"],
+    [67, "Bowling Ball"],
+    [7, "Toothpaste"]
+];
+
+updateInventory(curInv, newInv);
+```
+
+# --solutions--
+
+```js
+function updateInventory(arr1, arr2) {
+  arr2.forEach(function(item) {
+    createOrUpdate(arr1, item);
+  });
+  // All inventory must be accounted for or you're fired!
+  return arr1;
+}
+
+function createOrUpdate(arr1, item) {
+  var index = -1;
+  while (++index < arr1.length) {
+    if (arr1[index][1] === item[1]) {
+      arr1[index][0] += item[0];
+      return;
+    }
+    if (arr1[index][1] > item[1]) {
+      break;
+    }
+  }
+  arr1.splice(index, 0, item);
+}
+
+// Example inventory lists
+var curInv = [
+    [21, 'Bowling Ball'],
+    [2, 'Dirty Sock'],
+    [1, 'Hair Pin'],
+    [5, 'Microphone']
+];
+
+var newInv = [
+    [2, 'Hair Pin'],
+    [3, 'Half-Eaten Apple'],
+    [67, 'Bowling Ball'],
+    [7, 'Toothpaste']
+];
+
+updateInventory(curInv, newInv);
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/no-repeats-please.md b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/no-repeats-please.md
new file mode 100644
index 00000000000..b1b921710d2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/no-repeats-please.md
@@ -0,0 +1,126 @@
+---
+id: a7bf700cd123b9a54eef01d5
+title: No Repeats Please
+challengeType: 1
+forumTopicId: 16037
+dashedName: no-repeats-please
+---
+
+# --description--
+
+Return the number of total permutations of the provided string that don't have repeated consecutive letters. Assume that all characters in the provided string are each unique.
+
+For example, `aab` should return 2 because it has 6 total permutations (`aab`, `aab`, `aba`, `aba`, `baa`, `baa`), but only 2 of them (`aba` and `aba`) don't have the same letter (in this case `a`) repeating.
+
+# --hints--
+
+`permAlone("aab")` should return a number.
+
+```js
+assert.isNumber(permAlone('aab'));
+```
+
+`permAlone("aab")` should return 2.
+
+```js
+assert.strictEqual(permAlone('aab'), 2);
+```
+
+`permAlone("aaa")` should return 0.
+
+```js
+assert.strictEqual(permAlone('aaa'), 0);
+```
+
+`permAlone("aabb")` should return 8.
+
+```js
+assert.strictEqual(permAlone('aabb'), 8);
+```
+
+`permAlone("abcdefa")` should return 3600.
+
+```js
+assert.strictEqual(permAlone('abcdefa'), 3600);
+```
+
+`permAlone("abfdefa")` should return 2640.
+
+```js
+assert.strictEqual(permAlone('abfdefa'), 2640);
+```
+
+`permAlone("zzzzzzzz")` should return 0.
+
+```js
+assert.strictEqual(permAlone('zzzzzzzz'), 0);
+```
+
+`permAlone("a")` should return 1.
+
+```js
+assert.strictEqual(permAlone('a'), 1);
+```
+
+`permAlone("aaab")` should return 0.
+
+```js
+assert.strictEqual(permAlone('aaab'), 0);
+```
+
+`permAlone("aaabb")` should return 12.
+
+```js
+assert.strictEqual(permAlone('aaabb'), 12);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function permAlone(str) {
+  return str;
+}
+
+permAlone('aab');
+```
+
+# --solutions--
+
+```js
+function permAlone(str) {
+  return permuter(str).filter(function(perm) {
+    return !perm.match(/(.)\1/g);
+  }).length;
+}
+
+function permuter(str) {
+  // http://staff.roguecc.edu/JMiller/JavaScript/permute.html
+  //permArr: Global array which holds the list of permutations
+  //usedChars: Global utility array which holds a list of "currently-in-use" characters
+  var permArr = [], usedChars = [];
+  function permute(input) {
+    //convert input into a char array (one element for each character)
+    var i, ch, chars = input.split("");
+    for (i = 0; i < chars.length; i++) {
+      //get and remove character at index "i" from char array
+      ch = chars.splice(i, 1);
+      //add removed character to the end of used characters
+      usedChars.push(ch);
+      //when there are no more characters left in char array to add, add used chars to list of permutations
+      if (chars.length === 0) permArr[permArr.length] = usedChars.join("");
+      //send characters (minus the removed one from above) from char array to be permuted
+      permute(chars.join(""));
+      //add removed character back into char array in original position
+      chars.splice(i, 0, ch);
+      //remove the last character used off the end of used characters array
+      usedChars.pop();
+    }
+  }
+  permute(str);
+  return permArr;
+}
+
+permAlone('aab');
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/pairwise.md b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/pairwise.md
new file mode 100644
index 00000000000..14580607d5a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/algorithms/pairwise.md
@@ -0,0 +1,100 @@
+---
+id: a3f503de51cfab748ff001aa
+title: Pairwise
+challengeType: 1
+forumTopicId: 301617
+dashedName: pairwise
+---
+
+# --description--
+
+Given an array `arr`, find element pairs whose sum equal the second argument `arg` and return the sum of their indices.
+
+You may use multiple pairs that have the same numeric elements but different indices. Each pair should use the lowest possible available indices. Once an element has been used it cannot be reused to pair with another element. For instance, `pairwise([1, 1, 2], 3)` creates a pair `[2, 1]` using the 1 at index 0 rather than the 1 at index 1, because 0+2 &lt; 1+2.
+
+For example `pairwise([7, 9, 11, 13, 15], 20)` returns `6`. The pairs that sum to 20 are `[7, 13]` and `[9, 11]`. We can then write out the array with their indices and values.
+
+<div style='margin-left: 2em;'>
+
+| Index | 0 | 1 | 2  | 3  | 4  |
+| ----- | - | - | -- | -- | -- |
+| Value | 7 | 9 | 11 | 13 | 15 |
+
+</div>
+
+Below we'll take their corresponding indices and add them.
+
+<div style='margin-left: 2em;'>
+
+7 + 13 = 20 → Indices 0 + 3 = 3  
+9 + 11 = 20 → Indices 1 + 2 = 3  
+3 + 3 = 6 → Return `6`
+
+</div>
+
+# --hints--
+
+`pairwise([1, 4, 2, 3, 0, 5], 7)` should return 11.
+
+```js
+assert.deepEqual(pairwise([1, 4, 2, 3, 0, 5], 7), 11);
+```
+
+`pairwise([1, 3, 2, 4], 4)` should return 1.
+
+```js
+assert.deepEqual(pairwise([1, 3, 2, 4], 4), 1);
+```
+
+`pairwise([1, 1, 1], 2)` should return 1.
+
+```js
+assert.deepEqual(pairwise([1, 1, 1], 2), 1);
+```
+
+`pairwise([0, 0, 0, 0, 1, 1], 1)` should return 10.
+
+```js
+assert.deepEqual(pairwise([0, 0, 0, 0, 1, 1], 1), 10);
+```
+
+`pairwise([], 100)` should return 0.
+
+```js
+assert.deepEqual(pairwise([], 100), 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pairwise(arr, arg) {
+  return arg;
+}
+
+pairwise([1,4,2,3,0,5], 7);
+```
+
+# --solutions--
+
+```js
+function pairwise(arr, arg) {
+  var sum = 0;
+  arr.forEach(function(e, i, a) {
+    if (e != null) {
+      var diff = arg-e;
+      a[i] = null;
+      var dix = a.indexOf(diff);
+      if (dix !== -1) {
+        sum += dix;
+        sum += i;
+        a[dix] = null;
+      }
+    }
+  });
+  return sum;
+}
+
+pairwise([1,4,2,3,0,5], 7);
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/add-a-new-element-to-a-binary-search-tree.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/add-a-new-element-to-a-binary-search-tree.md
new file mode 100644
index 00000000000..deae4d120d7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/add-a-new-element-to-a-binary-search-tree.md
@@ -0,0 +1,191 @@
+---
+id: 587d8257367417b2b2512c7b
+title: Add a New Element to a Binary Search Tree
+challengeType: 1
+forumTopicId: 301618
+dashedName: add-a-new-element-to-a-binary-search-tree
+---
+
+# --description--
+
+This series of challenges will introduce the tree data structure. Trees are an important and versatile data structure in computer science. Of course, their name comes from the fact that when visualized they look much like the trees we are familiar with in the natural world. A tree data structure begins with one node, typically referred to as the root, and from here branches out to additional nodes, each of which may have more child nodes, and so on and so forth. The data structure is usually visualized with the root node at the top; you can think of it as a natural tree flipped upside down.
+
+First, let's describe some common terminology we will encounter with trees. The root node is the top of the tree. Data points in the tree are called nodes. Nodes with branches leading to other nodes are referred to as the parent of the node the branch leads to (the child). Other more complicated familial terms apply as you might expect. A subtree refers to all the descendants of a particular node, branches may be referred to as edges, and leaf nodes are nodes at the end of the tree that have no children. Finally, note that trees are inherently recursive data structures. That is, any children of a node are parents of their own subtree, and so on. The recursive nature of trees is important to understand when designing algorithms for common tree operations.
+
+To begin, we will discuss a particular type of a tree, the binary tree. In fact, we will actually discuss a particular binary tree, a binary search tree. Let's describe what this means. While the tree data structure can have any number of branches at a single node, a binary tree can only have two branches for every node. Furthermore, a binary search tree is ordered with respect to the child subtrees, such that the value of each node in the left subtree is less than or equal to the value of the parent node, and the value of each node in the right subtree is greater than or equal to the value of the parent node. It's very helpful to visualize this relationship in order to understand it better:
+
+<div style='width: 100%; display: flex; justify-content: center; align-items: center;'><img style='width: 100%; max-width: 350px; background-color: var(--gray-05);' src='https://user-images.githubusercontent.com/18563015/32136009-1e665d98-bbd6-11e7-9133-63184f9f9182.png'></div>
+
+Now this ordered relationship is very easy to see. Note that every value to the left of 8, the root node, is less than 8, and every value to the right is greater than 8. Also notice that this relationship applies to each of the subtrees as well. For example, the first left child is a subtree. 3 is the parent node, and it has exactly two child nodes — by the rules governing binary search trees, we know without even looking that the left child of this node (and any of its children) will be less than 3, and the right child (and any of its children) will be greater than 3 (but also less than the structure's root value), and so on.
+
+Binary search trees are very common and useful data structures because they provide logarithmic time in the average case for several common operations such as lookup, insertion, and deletion.
+
+# --instructions--
+
+We'll start simple. We've defined the skeleton of a binary search tree structure here in addition to a function to create nodes for our tree. Observe that each node may have a left and right value. These will be assigned child subtrees if they exist. In our binary search tree, you will create a method to add new values to the tree. The method should be called `add` and it should accept an integer value to add to the tree. Take care to maintain the invariant of a binary search tree: the value in each left child should be less than or equal to the parent value, and the value in each right child should be greater than or equal to the parent value. Here, let's make it so our tree cannot hold duplicate values. If we try to add a value that already exists, the method should return `null`. Otherwise, if the addition is successful, `undefined` should be returned.
+
+**Hint:** trees are naturally recursive data structures!
+
+# --hints--
+
+The `BinarySearchTree` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+The binary search tree should have a method called `add`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.add == 'function';
+  })()
+);
+```
+
+The add method should add elements according to the binary search tree rules.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.add !== 'function') {
+      return false;
+    }
+    test.add(4);
+    test.add(1);
+    test.add(7);
+    test.add(87);
+    test.add(34);
+    test.add(45);
+    test.add(73);
+    test.add(8);
+    const expectedResult = [1, 4, 7, 8, 34, 45, 73, 87];
+    const result = test.inOrder();
+    return expectedResult.toString() === result.toString();
+  })()
+);
+```
+
+Adding an element that already exists should return `null`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.add !== 'function') {
+      return false;
+    }
+    test.add(4);
+    return test.add(4) == null;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+BinarySearchTree.prototype = Object.assign(
+  BinarySearchTree.prototype,
+  {
+    inOrder() {
+      if (!this.root) {
+        return null;
+      }
+      var result = new Array();
+      function traverseInOrder(node) {
+        node.left && traverseInOrder(node.left);
+        result.push(node.value);
+        node.right && traverseInOrder(node.right);
+      }
+      traverseInOrder(this.root);
+      return result;
+    }
+  }
+);
+```
+
+## --seed-contents--
+
+```js
+var displayTree = tree => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+  this.add = function(element) {
+    let current = this.root;
+    if (!current) {
+      this.root = new Node(element);
+      return;
+    } else {
+      const searchTree = function(current) {
+        if (current.value > element) {
+          if (current.left) {
+            return searchTree(current.left);
+          } else {
+            current.left = new Node(element);
+            return;
+          }
+        } else if (current.value < element) {
+          if (current.right) {
+            return searchTree(current.right);
+          } else {
+            current.right = new Node(element);
+            return;
+          }
+        } else {
+          return null;
+        }
+      };
+      return searchTree(current);
+    }
+  };
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/add-elements-at-a-specific-index-in-a-linked-list.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/add-elements-at-a-specific-index-in-a-linked-list.md
new file mode 100644
index 00000000000..9e2954f8a3d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/add-elements-at-a-specific-index-in-a-linked-list.md
@@ -0,0 +1,161 @@
+---
+id: 587d8252367417b2b2512c67
+title: Add Elements at a Specific Index in a Linked List
+challengeType: 1
+forumTopicId: 301619
+dashedName: add-elements-at-a-specific-index-in-a-linked-list
+---
+
+# --description--
+
+Let's create a addAt(index,element) method that adds an element at a given index. Just like how we remove elements at a given index, we need to keep track of the currentIndex as we traverse the linked list. When the currentIndex matches the given index, we would need to reassign the previous node's next property to reference the new added node. And the new node should reference the next node in the currentIndex. Returning to the conga line example, a new person wants to join the line, but he wants to join in the middle. You are in the middle of the line, so you take your hands off of the person ahead of you. The new person walks over and puts his hands on the person you once had hands on, and you now have your hands on the new person.
+
+# --instructions--
+
+Create an `addAt(index,element)` method that adds an element at a given index. Return false if an element could not be added. **Note:** Remember to check if the given index is a negative or is longer than the length of the linked list.
+
+# --hints--
+
+Your `addAt` method should reassign `head` to the new node when the given index is 0.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.addAt(0, 'fish');
+    return test.head().element === 'fish' && test.head().next.element === 'cat';
+  })()
+);
+```
+
+Your `addAt` method should increase the length of the linked list by one for each new node added to the linked list.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.addAt(0, 'cat');
+    return test.size() === 3;
+  })()
+);
+```
+
+Your `addAt` method should return `false` if a node was unable to be added.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    return test.addAt(4, 'cat') === false;
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function LinkedList() {
+  var length = 0;
+  var head = null;
+
+  var Node = function(element) {
+    this.element = element;
+    this.next = null;
+  };
+
+  this.size = function() {
+    return length;
+  };
+
+  this.head = function() {
+    return head;
+  };
+
+  this.add = function(element) {
+    var node = new Node(element);
+    if (head === null) {
+      head = node;
+    } else {
+      var currentNode = head;
+
+      while (currentNode.next) {
+        currentNode = currentNode.next;
+      }
+
+      currentNode.next = node;
+    }
+    length++;
+  };
+
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function LinkedList() {
+  var length = 0;
+  var head = null;
+
+  var Node = function(element){
+    this.element = element;
+    this.next = null;
+  };
+
+  this.size = function(){
+    return length;
+  };
+
+  this.head = function(){
+    return head;
+  };
+
+  this.add = function(element){
+    var node = new Node(element);
+    if (head === null){
+        head = node;
+    } else {
+      var currentNode = head;
+
+      while (currentNode.next) {
+        currentNode = currentNode.next;
+      }
+
+      currentNode.next = node;
+    }
+    length++;
+  };
+  this.addAt = function (index, element) {
+    if (index > length || index < 0) {
+      return false;
+    }
+    var newNode = new Node(element);
+    var currentNode = head;
+    if (index === 0) {
+      head = newNode;
+    } else {
+      var previousNode = null;
+      var i = 0;
+      while (currentNode && i < index) {
+        previousNode = currentNode;
+        currentNode = currentNode.next;
+        i++;
+      }
+      previousNode.next = newNode;
+    }
+    newNode.next = currentNode;
+    length++;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/adjacency-list.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/adjacency-list.md
new file mode 100644
index 00000000000..e9b7f17e96f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/adjacency-list.md
@@ -0,0 +1,91 @@
+---
+id: 587d8256367417b2b2512c77
+title: Adjacency List
+challengeType: 1
+forumTopicId: 301620
+dashedName: adjacency-list
+---
+
+# --description--
+
+Graphs can be represented in different ways. Here we describe one way, which is called an <dfn>adjacency list</dfn>. An adjacency list is essentially a bulleted list where the left side is the node and the right side lists all the other nodes it's connected to. Below is a representation of an adjacency list.
+
+<blockquote>Node1: Node2, Node3<br>Node2: Node1<br>Node3: Node1</blockquote>
+
+Above is an undirected graph because `Node1` is connected to `Node2` and `Node3`, and that information is consistent with the connections `Node2` and `Node3` show. An adjacency list for a directed graph would mean each row of the list shows direction. If the above was directed, then `Node2: Node1` would mean there the directed edge is pointing from `Node2` towards `Node1`. We can represent the undirected graph above as an adjacency list by putting it within a JavaScript object.
+
+```js
+var undirectedG = {
+  Node1: ["Node2", "Node3"],
+  Node2: ["Node1"],
+  Node3: ["Node1"]
+};
+```
+
+This can also be more simply represented as an array where the nodes just have numbers rather than string labels.
+
+```js
+var undirectedGArr = [
+  [1, 2], // Node1
+  [0],    // Node2
+  [0]     // Node3
+];
+```
+
+# --instructions--
+
+Create a social network as an undirected graph with 4 nodes/people named `James`, `Jill`, `Jenny`, and `Jeff`. There are edges/relationships between James and Jeff, Jill and Jenny, and Jeff and Jenny.
+
+# --hints--
+
+`undirectedAdjList` should only contain four nodes.
+
+```js
+assert(Object.keys(undirectedAdjList).length === 4);
+```
+
+There should be an edge between `Jeff` and `James`.
+
+```js
+assert(
+  undirectedAdjList.James.indexOf('Jeff') !== -1 &&
+    undirectedAdjList.Jeff.indexOf('James') !== -1
+);
+```
+
+There should be an edge between `Jill` and `Jenny`.
+
+```js
+assert(
+  undirectedAdjList.Jill.indexOf('Jenny') !== -1 &&
+    undirectedAdjList.Jenny.indexOf('Jill') !== -1
+);
+```
+
+There should be an edge between `Jeff` and `Jenny`.
+
+```js
+assert(
+  undirectedAdjList.Jeff.indexOf('Jenny') !== -1 &&
+    undirectedAdjList.Jenny.indexOf('Jeff') !== -1
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+var undirectedAdjList = {};
+```
+
+# --solutions--
+
+```js
+var undirectedAdjList = {
+  James: ['Jeff'],
+  Jill: ['Jenny'],
+  Jenny: ['Jill', 'Jeff'],
+  Jeff: ['James', 'Jenny']
+};
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/adjacency-matrix.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/adjacency-matrix.md
new file mode 100644
index 00000000000..a852fb9b089
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/adjacency-matrix.md
@@ -0,0 +1,108 @@
+---
+id: 587d8256367417b2b2512c78
+title: Adjacency Matrix
+challengeType: 1
+forumTopicId: 301621
+dashedName: adjacency-matrix
+---
+
+# --description--
+
+Another way to represent a graph is to put it in an <dfn>adjacency matrix</dfn>. An <dfn>adjacency matrix</dfn> is a two-dimensional (2D) array where each nested array has the same number of elements as the outer array. In other words, it is a matrix or grid of numbers, where the numbers represent the edges.
+
+**Note**: The numbers to the top and left of the matrix are just labels for the nodes. Inside the matrix, ones mean there exists an edge between the vertices (nodes) representing the row and column. Finally, zeros mean there is no edge or relationship.
+
+<pre>
+    1 2 3
+  \------
+1 | 0 1 1
+2 | 1 0 0
+3 | 1 0 0
+</pre>
+
+Above is a very simple, undirected graph where you have three nodes, where the first node is connected to the second and third node. Below is a JavaScript implementation of the same thing.
+
+```js
+var adjMat = [
+  [0, 1, 1],
+  [1, 0, 0],
+  [1, 0, 0]
+];
+```
+
+Unlike an adjacency list, each "row" of the matrix has to have the same number of elements as nodes in the graph. Here we have a three by three matrix, which means we have three nodes in our graph. A directed graph would look similar. Below is a graph where the first node has an edge pointing toward the second node, and then the second node has an edge pointing to the third node.
+
+```js
+var adjMatDirected = [
+  [0, 1, 0],
+  [0, 0, 1],
+  [0, 0, 0]
+];
+```
+
+Graphs can also have <dfn>weights</dfn> on their edges. So far, we have <dfn>unweighted</dfn> edges where just the presence and lack of edge is binary (`0` or `1`). You can have different weights depending on your application.
+
+# --instructions--
+
+Create an adjacency matrix of an undirected graph with five nodes. This matrix should be in a multi-dimensional array. These five nodes have relationships between the first and fourth node, the first and third node, the third and fifth node, and the fourth and fifth node. All edge weights are one.
+
+# --hints--
+
+`undirectedAdjList` should only contain five nodes.
+
+```js
+assert(
+  adjMatUndirected.length === 5 &&
+    adjMatUndirected
+      .map(function (x) {
+        return x.length === 5;
+      })
+      .reduce(function (a, b) {
+        return a && b;
+      })
+);
+```
+
+There should be an edge between the first and fourth node.
+
+```js
+assert(adjMatUndirected[0][3] === 1 && adjMatUndirected[3][0] === 1);
+```
+
+There should be an edge between the first and third node.
+
+```js
+assert(adjMatUndirected[0][2] === 1 && adjMatUndirected[2][0] === 1);
+```
+
+There should be an edge between the third and fifth node.
+
+```js
+assert(adjMatUndirected[2][4] === 1 && adjMatUndirected[4][2] === 1);
+```
+
+There should be an edge between the fourth and fifth node.
+
+```js
+assert(adjMatUndirected[3][4] === 1 && adjMatUndirected[4][3] === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+var adjMatUndirected = [];
+```
+
+# --solutions--
+
+```js
+var adjMatUndirected = [
+  [0, 0, 1, 1, 0],
+  [0, 0, 0, 0, 0],
+  [1, 0, 0, 0, 1],
+  [1, 0, 0, 0, 1],
+  [0, 0, 1, 1, 0]
+];
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/breadth-first-search.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/breadth-first-search.md
new file mode 100644
index 00000000000..12070241354
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/breadth-first-search.md
@@ -0,0 +1,182 @@
+---
+id: 587d825c367417b2b2512c90
+title: Breadth-First Search
+challengeType: 1
+forumTopicId: 301622
+dashedName: breadth-first-search
+---
+
+# --description--
+
+So far, we've learned different ways of creating representations of graphs. What now? One natural question to have is what are the distances between any two nodes in the graph? Enter <dfn>graph traversal algorithms</dfn>.
+
+<dfn>Traversal algorithms</dfn> are algorithms to traverse or visit nodes in a graph. One type of traversal algorithm is the breadth-first search algorithm.
+
+This algorithm starts at one node and visits all its neighbors that are one edge away. It then goes on to visit each of their neighbors and so on until all nodes have been reached.
+
+An important data structure that will help implement the breadth-first search algorithm is the queue. This is an array where you can add elements to one end and remove elements from the other end. This is also known as a <dfn>FIFO</dfn> or <dfn>First-In-First-Out</dfn> data structure.
+
+Visually, this is what the algorithm is doing. ![Breadth first search algorithm moving through a tree](https://camo.githubusercontent.com/2f57e6239884a1a03402912f13c49555dec76d06/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f342f34362f416e696d617465645f4246532e676966)
+
+The grey shading represents a node getting added into the queue and the black shading represents a node getting removed from the queue. See how every time a node gets removed from the queue (node turns black), all their neighbors get added into the queue (node turns grey).
+
+To implement this algorithm, you'll need to input a graph structure and a node you want to start at.
+
+First, you'll want to be aware of the distances from, or number of edges away from, the start node. You'll want to start all your distances with some large number, like `Infinity`. This prevents counting issues for when a node may not be reachable from your start node. Next, you'll want to go from the start node to its neighbors. These neighbors are one edge away and at this point you should add one unit of distance to the distances you're keeping track of.
+
+# --instructions--
+
+Write a function `bfs()` that takes an adjacency matrix graph (a two-dimensional array) and a node label root as parameters. The node label will just be the integer value of the node between `0` and `n - 1`, where `n` is the total number of nodes in the graph.
+
+Your function will output a JavaScript object key-value pairs with the node and its distance from the root. If the node could not be reached, it should have a distance of `Infinity`.
+
+# --hints--
+
+The input graph `[[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 1], [0, 0, 1, 0]]` with a start node of `1` should return `{0: 1, 1: 0, 2: 1, 3: 2}`
+
+```js
+assert(
+  (function () {
+    var graph = [
+      [0, 1, 0, 0],
+      [1, 0, 1, 0],
+      [0, 1, 0, 1],
+      [0, 0, 1, 0]
+    ];
+    var results = bfs(graph, 1);
+    return isEquivalent(results, { 0: 1, 1: 0, 2: 1, 3: 2 });
+  })()
+);
+```
+
+The input graph `[[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 0], [0, 0, 0, 0]]` with a start node of `1` should return `{0: 1, 1: 0, 2: 1, 3: Infinity}`
+
+```js
+assert(
+  (function () {
+    var graph = [
+      [0, 1, 0, 0],
+      [1, 0, 1, 0],
+      [0, 1, 0, 0],
+      [0, 0, 0, 0]
+    ];
+    var results = bfs(graph, 1);
+    return isEquivalent(results, { 0: 1, 1: 0, 2: 1, 3: Infinity });
+  })()
+);
+```
+
+The input graph `[[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 1], [0, 0, 1, 0]]` with a start node of `0` should return `{0: 0, 1: 1, 2: 2, 3: 3}`
+
+```js
+assert(
+  (function () {
+    var graph = [
+      [0, 1, 0, 0],
+      [1, 0, 1, 0],
+      [0, 1, 0, 1],
+      [0, 0, 1, 0]
+    ];
+    var results = bfs(graph, 0);
+    return isEquivalent(results, { 0: 0, 1: 1, 2: 2, 3: 3 });
+  })()
+);
+```
+
+The input graph `[[0, 1], [1, 0]]` with a start node of `0` should return `{0: 0, 1: 1}`
+
+```js
+assert(
+  (function () {
+    var graph = [
+      [0, 1],
+      [1, 0]
+    ];
+    var results = bfs(graph, 0);
+    return isEquivalent(results, { 0: 0, 1: 1 });
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+// Source: http://adripofjavascript.com/blog/drips/object-equality-in-javascript.html
+function isEquivalent(a, b) {
+    // Create arrays of property names
+    var aProps = Object.getOwnPropertyNames(a);
+    var bProps = Object.getOwnPropertyNames(b);
+    // If number of properties is different,
+    // objects are not equivalent
+    if (aProps.length != bProps.length) {
+        return false;
+    }
+    for (var i = 0; i < aProps.length; i++) {
+        var propName = aProps[i];
+        // If values of same property are not equal,
+        // objects are not equivalent
+        if (a[propName] !== b[propName]) {
+            return false;
+        }
+    }
+    // If we made it this far, objects
+    // are considered equivalent
+    return true;
+}
+```
+
+## --seed-contents--
+
+```js
+function bfs(graph, root) {
+  var nodesLen = {};
+
+  return nodesLen;
+};
+
+var exBFSGraph = [
+  [0, 1, 0, 0],
+  [1, 0, 1, 0],
+  [0, 1, 0, 1],
+  [0, 0, 1, 0]
+];
+console.log(bfs(exBFSGraph, 3));
+```
+
+# --solutions--
+
+```js
+function bfs(graph, root) {
+  var nodesLen = {};
+  // Set all distances to infinity
+  for (var i = 0; i < graph.length; i++) {
+    nodesLen[i] = Infinity;
+  }
+  nodesLen[root] = 0; // ...except root node
+  var queue = [root]; // Keep track of nodes to visit
+  var current; // Current node traversing
+  // Keep on going until no more nodes to traverse
+  while (queue.length !== 0) {
+    current = queue.shift();
+    // Get adjacent nodes from current node
+    var curConnected = graph[current]; // Get layer of edges from current
+    var neighborIdx = []; // List of nodes with edges
+    var idx = curConnected.indexOf(1); // Get first edge connection
+    while (idx !== -1) {
+      neighborIdx.push(idx); // Add to list of neighbors
+      idx = curConnected.indexOf(1, idx + 1); // Keep on searching
+    }
+    // Loop through neighbors and get lengths
+    for (var j = 0; j < neighborIdx.length; j++) {
+      // Increment distance for nodes traversed
+      if (nodesLen[neighborIdx[j]] === Infinity) {
+        nodesLen[neighborIdx[j]] = nodesLen[current] + 1;
+        queue.push(neighborIdx[j]); // Add new neighbors to queue
+      }
+    }
+  }
+  return nodesLen;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/check-if-an-element-is-present-in-a-binary-search-tree.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/check-if-an-element-is-present-in-a-binary-search-tree.md
new file mode 100644
index 00000000000..03daa65cb23
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/check-if-an-element-is-present-in-a-binary-search-tree.md
@@ -0,0 +1,175 @@
+---
+id: 587d8257367417b2b2512c7c
+title: Check if an Element is Present in a Binary Search Tree
+challengeType: 1
+forumTopicId: 301623
+dashedName: check-if-an-element-is-present-in-a-binary-search-tree
+---
+
+# --description--
+
+Now that we have a general sense of what a binary search tree is let's talk about it in a little more detail. Binary search trees provide logarithmic time for the common operations of lookup, insertion, and deletion in the average case, and linear time in the worst case. Why is this? Each of those basic operations requires us to find an item in the tree (or in the case of insertion to find where it should go) and because of the tree structure at each parent node we are branching left or right and effectively excluding half the size of the remaining tree. This makes the search proportional to the logarithm of the number of nodes in the tree, which creates logarithmic time for these operations in the average case. Ok, but what about the worst case? Well, consider constructing a tree from the following values, adding them left to right: `10`, `12`, `17`, `25`. Following our rules for a binary search tree, we will add `12` to the right of `10`, `17` to the right of this, and `25` to the right of this. Now our tree resembles a linked list and traversing it to find `25` would require us to traverse all the items in linear fashion. Hence, linear time in the worst case. The problem here is that the tree is unbalanced. We'll look a little more into what this means in the following challenges.
+
+# --instructions--
+
+In this challenge, we will create a utility for our tree. Write a method `isPresent` which takes an integer value as input and returns a boolean value for the presence or absence of that value in the binary search tree.
+
+# --hints--
+
+The `BinarySearchTree` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+The binary search tree should have a method called `isPresent`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.isPresent == 'function';
+  })()
+);
+```
+
+The `isPresent` method should correctly check for the presence or absence of elements added to the tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.isPresent !== 'function') {
+      return false;
+    }
+    test.add(4);
+    test.add(7);
+    test.add(411);
+    test.add(452);
+    return (
+      test.isPresent(452) &&
+      test.isPresent(411) &&
+      test.isPresent(7) &&
+      !test.isPresent(100)
+    );
+  })()
+);
+```
+
+`isPresent` should handle cases where the tree is empty.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.isPresent !== 'function') {
+      return false;
+    }
+    return test.isPresent(5) == false;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+BinarySearchTree.prototype = Object.assign(
+  BinarySearchTree.prototype,
+  {
+    add: function(value) {
+      var node = this.root;
+      if (node == null) {
+        this.root = new Node(value);
+        return;
+      } else {
+        function searchTree(node) {
+          if (value < node.value) {
+            if (node.left == null) {
+              node.left = new Node(value);
+              return;
+            } else if (node.left != null) {
+              return searchTree(node.left);
+            }
+          } else if (value > node.value) {
+            if (node.right == null) {
+              node.right = new Node(value);
+              return;
+            } else if (node.right != null) {
+              return searchTree(node.right);
+            }
+          } else {
+            return null;
+          }
+        }
+        return searchTree(node);
+      }
+    }
+  }
+);
+```
+
+## --seed-contents--
+
+```js
+var displayTree = tree => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+var displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+  this.isPresent = function (value) {
+    var current = this.root
+    while (current) {
+      if (value === current.value) {
+        return true;
+      }
+      current = value < current.value ? current.left : current.right;
+    }
+    return false;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/check-if-binary-search-tree.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/check-if-binary-search-tree.md
new file mode 100644
index 00000000000..db3165a4b73
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/check-if-binary-search-tree.md
@@ -0,0 +1,154 @@
+---
+id: 5cc0c1b32479e176caf3b422
+title: Check if Tree is Binary Search Tree
+challengeType: 1
+forumTopicId: 301624
+dashedName: check-if-tree-is-binary-search-tree
+---
+
+# --description--
+
+Since you already know what a binary search tree is, this challenge will establish how it is you can tell that a tree is a binary search tree or not.
+
+The main distinction of a binary search tree is that the nodes are ordered in an organized fashion. Nodes have at most 2 child nodes (placed to the right and/or left) based on if the child node's value is greater than or equal to (right) or less than (left) the parent node.
+
+# --instructions--
+
+In this challenge, you will create a utility for your tree. Write a JavaScript method `isBinarySearchTree` which takes a tree as an input and returns a boolean value for whether the tree is a binary search tree or not. Use recursion whenever possible.
+
+# --hints--
+
+Your Binary Search Tree should return true when checked with `isBinarySearchTree()`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    test.push(1);
+    test.push(5);
+    test.push(3);
+    test.push(2);
+    test.push(4);
+    return isBinarySearchTree(test) == true;
+  })()
+);
+```
+
+`isBinarySearchTree()` should return false when checked with a tree that is not a binary search tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    test.push(1);
+    test.root.left = new Node(1);
+    return isBinarySearchTree(test) == false;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+BinarySearchTree.prototype.push = function(val) {
+  var root = this.root;
+
+  if (!root) {
+    this.root = new Node(val);
+    return;
+  }
+
+  var currentNode = root;
+  var newNode = new Node(val);
+
+  while (currentNode) {
+    if (val < currentNode.value) {
+      if (!currentNode.left) {
+        currentNode.left = newNode;
+        break;
+      } else {
+        currentNode = currentNode.left;
+      }
+    } else {
+      if (!currentNode.right) {
+        currentNode.right = newNode;
+        break;
+      } else {
+        currentNode = currentNode.right;
+      }
+    }
+  }
+};
+```
+
+## --seed-contents--
+
+```js
+var displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+}
+function isBinarySearchTree(tree) {
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+var displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+}
+function isBinarySearchTree(tree) {
+  if (tree.root == null) {
+    return null;
+  } else {
+    let isBST = true;
+    function checkTree(node) {
+      if (node.left != null) {
+        const left = node.left;
+        if (left.value >= node.value) {
+          isBST = false;
+        } else {
+          checkTree(left);
+        }
+      }
+      if (node.right != null) {
+        const right = node.right;
+        if (right.value < node.value) {
+          isBST = false;
+        } else {
+          checkTree(right);
+        }
+      }
+    }
+    checkTree(tree.root);
+    return isBST;
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-circular-queue.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-circular-queue.md
new file mode 100644
index 00000000000..16ff688fabf
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-circular-queue.md
@@ -0,0 +1,235 @@
+---
+id: 587d8255367417b2b2512c75
+title: Create a Circular Queue
+challengeType: 1
+forumTopicId: 301625
+dashedName: create-a-circular-queue
+---
+
+# --description--
+
+In this challenge you will be creating a Circular Queue. A circular queue is a queue that writes to the end of a collection then begins overwriting itself at the beginning of the collection. This type of data structure is useful in certain situations. For example, a circular queue can be used for streaming media. Once the queue is full, new media data will overwrite old data.
+
+A good way to illustrate this concept is with an array of length `5`:
+
+```js
+[null, null, null, null, null]
+ ^Read @ 0
+ ^Write @ 0
+```
+
+Here the read and write are both at position `0`. Now the queue gets 3 new records `a`, `b`, and `c`. Our queue now looks like:
+
+```js
+[a, b, c, null, null]
+ ^Read @ 0
+          ^Write @ 3
+```
+
+As the read head reads, it can remove values or keep them:
+
+```js
+[null, null, null, null, null]
+                   ^Read @ 3
+                   ^Write @ 3
+```
+
+Now we write the values `d`, `e`, and `f` to the queue. Once the write reaches the end of the array it loops back to the beginning:
+
+```js
+[f, null, null, d, e]
+                ^Read @ 3
+    ^Write @ 1
+```
+
+This approach requires a constant amount of memory but allows files of a much larger size to be processed.
+
+# --instructions--
+
+In this challenge we will implement a circular queue. The circular queue should provide `enqueue` and `dequeue` methods which allow you to read from and write to the queue. The class itself should also accept an integer argument which you can use to specify the size of the queue when created. We've written the starting version of this class for you in the code editor.
+
+When you enqueue items to the queue, the write pointer should advance forward and loop back to the beginning once it reaches the end of the queue. The `enqueue` method should return the item you enqueued if it is successful; otherwise it will return `null`.
+
+Likewise, the read pointer should advance forward as you dequeue items. When you dequeue an item, that item should be returned. If you cannot dequeue an item, you should return `null`.
+
+The write pointer should not be allowed to move past the read pointer (our class won't let you overwrite data you haven't read yet) and the read pointer should not be able to advance past data you have written.
+
+# --hints--
+
+The `enqueue` method should add items to the circular queue.
+
+```js
+assert(
+  (function () {
+    var test = new CircularQueue(3);
+    test.enqueue(17);
+    test.enqueue(32);
+    test.enqueue(591);
+    var print = test.print();
+    return print[0] === 17 && print[1] === 32 && print[2] === 591;
+  })()
+);
+```
+
+You should not enqueue items past the read pointer.
+
+```js
+assert(
+  (function () {
+    var test = new CircularQueue(3);
+    test.enqueue(17);
+    test.enqueue(32);
+    test.enqueue(591);
+    test.enqueue(13);
+    test.enqueue(25);
+    test.enqueue(59);
+    var print = test.print();
+    return print[0] === 17 && print[1] === 32 && print[2] === 591;
+  })()
+);
+```
+
+The `dequeue` method should dequeue items from the queue.
+
+```js
+assert(
+  (function () {
+    var test = new CircularQueue(3);
+    test.enqueue(17);
+    test.enqueue(32);
+    test.enqueue(591);
+    return (
+      test.dequeue() === 17 && test.dequeue() === 32 && test.dequeue() === 591
+    );
+  })()
+);
+```
+
+After an item is dequeued, its position in the queue should be reset to `null`.
+
+```js
+assert(
+  (function () {
+    var test = new CircularQueue(3);
+    test.enqueue(17);
+    test.enqueue(32);
+    test.enqueue(672);
+    test.dequeue();
+    test.dequeue();
+    var print = test.print();
+    return print[0] === null && print[1] === null && print[2] === 672;
+  })()
+);
+```
+
+Trying to dequeue past the write pointer should return `null` and does not advance the write pointer.
+
+```js
+assert(
+  (function () {
+    var test = new CircularQueue(3);
+    test.enqueue(17);
+    test.enqueue(32);
+    test.enqueue(591);
+    return (
+      test.dequeue() === 17 &&
+      test.dequeue() === 32 &&
+      test.dequeue() === 591 &&
+      test.dequeue() === null &&
+      test.dequeue() === null &&
+      test.dequeue() === null &&
+      test.dequeue() === null &&
+      test.enqueue(100) === 100 &&
+      test.dequeue() === 100
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+class CircularQueue {
+  constructor(size) {
+
+    this.queue = [];
+    this.read = 0;
+    this.write = 0;
+    this.max = size - 1;
+
+    while (size > 0) {
+      this.queue.push(null);
+      size--;
+    }
+  }
+
+  print() {
+    return this.queue;
+  }
+
+  enqueue(item) {
+    // Only change code below this line
+
+    // Only change code above this line
+  }
+
+  dequeue() {
+    // Only change code below this line
+
+    // Only change code above this line
+  }
+}
+```
+
+# --solutions--
+
+```js
+class CircularQueue {
+  constructor(size) {
+    this.queue = [];
+    this.read = 0;
+    this.write = 0;
+    this.max = size - 1;
+
+    while (size > 0) {
+      this.queue.push(null);
+      size--;
+    }
+  }
+
+  print() {
+    return this.queue;
+  }
+
+  enqueue(item) {
+    // Only change code below this line
+    console.log(this.write, this.max);
+    if (this.queue[this.write] === null) {
+      this.queue[this.write++] = item;
+
+      if (this.write > this.max) {
+        this.write = 0;
+      }
+      return item;
+    }
+    return null;
+    // Only change code above this line
+  }
+
+  dequeue() {
+    // Only change code below this line
+    if (this.queue[this.read] !== null) {
+      let item = this.queue[this.read];
+      this.queue[this.read++] = null;
+      if (this.read > this.max) {
+        this.read = 0;
+      }
+      return item;
+    }
+    return null;
+    // Only change code above this line
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-doubly-linked-list.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-doubly-linked-list.md
new file mode 100644
index 00000000000..b9f3f12d767
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-doubly-linked-list.md
@@ -0,0 +1,216 @@
+---
+id: 587d825a367417b2b2512c87
+title: Create a Doubly Linked List
+challengeType: 1
+forumTopicId: 301626
+dashedName: create-a-doubly-linked-list
+---
+
+# --description--
+
+All of the linked lists we've created so far are singly linked lists. Here, we'll create a <dfn>doubly linked list</dfn>. As the name implies, nodes in a doubly linked list have references to the next and previous node in the list.
+
+This allows us to traverse the list in both directions but it also requires more memory to be used because every node must contain an additional reference to the previous node in the list.
+
+# --instructions--
+
+We've provided a `Node` object and started our `DoublyLinkedList`. Let's add two methods to our doubly linked list called `add` and `remove`. The `add` method should add the given element to the list while the `remove` method should remove all occurrences of a given element in the list.
+
+Be careful to handle any possible edge cases when writing these methods, such as deletions for the first or last element. Also, removing any item on an empty list should return `null`.
+
+# --hints--
+
+The `DoublyLinkedList` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof DoublyLinkedList !== 'undefined') {
+      test = new DoublyLinkedList();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+The `DoublyLinkedList` should have a method called `add`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof DoublyLinkedList !== 'undefined') {
+      test = new DoublyLinkedList();
+    }
+    if (test.add == undefined) {
+      return false;
+    }
+    return typeof test.add == 'function';
+  })()
+);
+```
+
+The `DoublyLinkedList` should have a method called `remove`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof DoublyLinkedList !== 'undefined') {
+      test = new DoublyLinkedList();
+    }
+    if (test.remove == undefined) {
+      return false;
+    }
+    return typeof test.remove == 'function';
+  })()
+);
+```
+
+Removing an item from an empty list should return `null`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof DoublyLinkedList !== 'undefined') {
+      test = new DoublyLinkedList();
+    }
+    return test.remove(100) == null;
+  })()
+);
+```
+
+The `add` method should add items to the list.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof DoublyLinkedList !== 'undefined') {
+      test = new DoublyLinkedList();
+    }
+    test.add(5);
+    test.add(6);
+    test.add(723);
+    return test.print().join('') == '56723';
+  })()
+);
+```
+
+Each node should keep track of the previous node.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof DoublyLinkedList !== 'undefined') {
+      test = new DoublyLinkedList();
+    }
+    test.add(50);
+    test.add(68);
+    test.add(73);
+    return test.printReverse().join('') == '736850';
+  })()
+);
+```
+
+The first item should be removable from the list.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof DoublyLinkedList !== 'undefined') {
+      test = new DoublyLinkedList();
+    }
+    test.add(25);
+    test.add(35);
+    test.add(60);
+    test.remove(25);
+    return test.print().join('') == '3560';
+  })()
+);
+```
+
+The last item should be removable from the list.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof DoublyLinkedList !== 'undefined') {
+      test = new DoublyLinkedList();
+    }
+    test.add(25);
+    test.add(35);
+    test.add(60);
+    test.remove(60);
+    return test.print().join('') == '2535';
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+DoublyLinkedList.prototype = Object.assign(
+  DoublyLinkedList.prototype,
+  {
+
+  print() {
+    if (this.head == null) {
+      return null;
+    } else {
+      var result = new Array();
+      var node = this.head;
+      while (node.next != null) {
+        result.push(node.data);
+        node = node.next;
+      };
+      result.push(node.data);
+      return result;
+    };
+  },
+  printReverse() {
+    if (this.tail == null) {
+      return null;
+    } else {
+      var result = new Array();
+      var node = this.tail;
+      while (node.prev != null) {
+        result.push(node.data);
+        node = node.prev;
+      };
+      result.push(node.data);
+      return result;
+    };
+  }
+});
+```
+
+## --seed-contents--
+
+```js
+var Node = function(data, prev) {
+  this.data = data;
+  this.prev = prev;
+  this.next = null;
+};
+var DoublyLinkedList = function() {
+  this.head = null;
+  this.tail = null;
+  // Only change code below this line
+
+  // Only change code above this line
+};
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-hash-table.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-hash-table.md
new file mode 100644
index 00000000000..035733ac109
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-hash-table.md
@@ -0,0 +1,260 @@
+---
+id: 587d825b367417b2b2512c8e
+title: Create a Hash Table
+challengeType: 1
+forumTopicId: 301627
+dashedName: create-a-hash-table
+---
+
+# --description--
+
+In this challenge we will learn about hash tables. A Hash table is used to implement associative arrays, or mappings of key-value pairs, like the objects and Maps we have just been studying. A JavaScript object could be implemented as a hash table, for instance (its actual implementation will depend on the environment it's running in). The way a hash table works is that it takes a key input and hashes this key in a deterministic way to some numerical value. This numerical value is then used as the actual key the associated value is stored by. Then, if you try to access the same key again, the hashing function will process the key, return the same numerical result, which will then be used to look up the associated value. This provides very efficient O(1) lookup time on average.
+
+Hash tables can be implemented as arrays with hash functions producing array indices within a specified range. In this method, the choice of the array size is important, as is the hashing function. For instance, what if the hashing function produces the same value for two different keys? This is called a collision. One way to handle collisions is to just store both key-value pairs at that index. Then, upon lookup of either, you would have to iterate through the bucket of items to find the key you are looking for. A good hashing function will minimize collisions to maintain efficient search time.
+
+Here, we won't be concerned with the details of hashing or hash table implementation, we will just try to get a general sense of how they work.
+
+# --instructions--
+
+Let's create the basic functionality of a hash table. We've created a naive hashing function for you to use. You can pass a string value to the function `hash` and it will return a hashed value you can use as a key for storage. Store items based on this hashed value in the `this.collection` object. Create these three methods: `add`, `remove`, and `lookup`. The first should accept a key value pair to add to the hash table. The second should remove a key-value pair when passed a key. The third should accept a key and return the associated value or `null` if the key is not present.
+
+Be sure to write your code to account for collisions!
+
+**Note:** The `remove` method tests won't pass until the `add` and `lookup` methods are correctly implemented.
+
+# --hints--
+
+The `HashTable` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof HashTable !== 'undefined') {
+      test = new HashTable();
+    }
+    return typeof test === 'object';
+  })()
+);
+```
+
+The `HashTable` should have an `add` method.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof HashTable !== 'undefined') {
+      test = new HashTable();
+    }
+    return typeof test.add === 'function';
+  })()
+);
+```
+
+The `HashTable` should have a `lookup` method.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof HashTable !== 'undefined') {
+      test = new HashTable();
+    }
+    return typeof test.lookup === 'function';
+  })()
+);
+```
+
+The `HashTable` should have a `remove` method.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof HashTable !== 'undefined') {
+      test = new HashTable();
+    }
+    return typeof test.remove === 'function';
+  })()
+);
+```
+
+The `add` method should add key value pairs and the `lookup` method should return the values associated with a given key.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof HashTable !== 'undefined') {
+      test = new HashTable();
+    }
+    test.add('key', 'value');
+    return test.lookup('key') === 'value';
+  })()
+);
+```
+
+The `remove` method should accept a key as input and should remove the associated key value pair.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    var hashValue = hash('key');
+    if (typeof HashTable !== 'undefined') {
+      test = new HashTable();
+    }
+    test.add('key', 'value');
+
+    test.remove('key');
+    return !test.collection.hasOwnProperty(hashValue);
+  })()
+);
+```
+
+The `remove` method should only remove the correct key value pair.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    var hashValue = hash('key');
+    if (typeof HashTable !== 'undefined') {
+      test = new HashTable();
+    }
+    test.add('key', 'value');
+    test.add('yek', 'value');
+    test.add('altKey', 'value');
+
+    test.remove('yek');
+    if (test.lookup('yek') || !test.lookup('key') || !test.lookup('altKey')) {
+      return false;
+    }
+
+    test.remove('key');
+
+    return !test.collection.hasOwnProperty(hashValue) && test.lookup('altKey');
+  })()
+);
+```
+
+Items should be added using the hash function.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof HashTable !== 'undefined') {
+      test = new HashTable();
+    }
+    called = 0;
+    test.add('key1', 'value1');
+    test.add('key2', 'value2');
+    test.add('key3', 'value3');
+    return called >= 3 && called % 3 === 0;
+  })()
+);
+```
+
+The hash table should handle collisions.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof HashTable !== 'undefined') {
+      test = new HashTable();
+    }
+    called = 0;
+    test.add('key1', 'value1');
+    test.add('1key', 'value2');
+    test.add('ke1y', 'value3');
+    return (
+      test.lookup('key1') === 'value1' &&
+      test.lookup('1key') == 'value2' &&
+      test.lookup('ke1y') == 'value3'
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+var called = 0;
+var hash = string => {
+  called++;
+  var hash = 0;
+  for (var i = 0; i < string.length; i++) {
+    hash += string.charCodeAt(i);
+  }
+  return hash;
+};
+```
+
+## --seed-contents--
+
+```js
+var called = 0;
+var hash = string => {
+  called++;
+  var hashed = 0;
+  for (var i = 0; i < string.length; i++) {
+    hashed += string.charCodeAt(i);
+  }
+  return hashed;
+};
+var HashTable = function() {
+  this.collection = {};
+  // Only change code below this line
+
+  // Only change code above this line
+};
+```
+
+# --solutions--
+
+```js
+var called = 0;
+var hash = (string) => {
+  called++;
+  var hash = 0;
+  for (var i = 0; i < string.length; i++) { hash += string.charCodeAt(i); }
+  return hash;
+};
+var HashTable = function() {
+  this.collection = {};
+  // Only change code below this line
+
+  this.add = function(key, val) {
+    var theHash = hash(key);
+    if (!this.collection.hasOwnProperty(theHash)) {
+      this.collection[theHash] = {};
+    }
+    this.collection[theHash][key] = val;
+  }
+
+  this.remove = function(key) {
+    var theHash = hash(key);
+    var hashedObj = this.collection[theHash];
+    if (hashedObj.hasOwnProperty(key)) {
+      delete hashedObj[key];
+    }
+    if (!Object.keys(hashedObj).length) {
+      delete this.collection[theHash];
+    }
+  }
+
+  this.lookup = function(key) {
+    var theHash = hash(key);
+    if (this.collection.hasOwnProperty(theHash)) {
+      return this.collection[theHash][key];
+    }
+    return null
+  }
+  // Only change code above this line
+};
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-linked-list-class.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-linked-list-class.md
new file mode 100644
index 00000000000..d52a34cab7d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-linked-list-class.md
@@ -0,0 +1,146 @@
+---
+id: 587d8251367417b2b2512c62
+title: Create a Linked List Class
+challengeType: 1
+forumTopicId: 301628
+dashedName: create-a-linked-list-class
+---
+
+# --description--
+
+Let's create a `linked list` class. Every linked list should start out with a few basic properties: a `head` (the first item in your list) and a `length` (number of items in your list). Sometimes you'll see implementations of linked lists that incorporate a `tail` for the last element of the list, but for now we'll just stick with these two. Whenever we add an element to the linked list, our `length` property should be incremented by one.
+
+We'll want to have a way to add items to our linked list, so the first method we'll want to create is the `add` method.
+
+If our list is empty, adding an element to our linked list is straightforward enough: we just wrap that element in a `Node` class, and we assign that node to the `head` of our linked list.
+
+But what if our list already has one or more members? How do we add an element to the list? Recall that each node in a linked list has a `next` property. To add a node to the list, find the last node in the list, and point that last node's `next` property at our new node. (Hint: you know you've reached the end of a linked list when a node's `next` property is `null`.)
+
+# --instructions--
+
+Write an add method that assigns the first node you push to the linked list to the `head`; after that, whenever adding a node, every node should be referenced by the previous node's `next` property.
+
+Note
+
+Your list's `length` should increase by one every time an element is added to the linked list.
+
+# --hints--
+
+Your `LinkedList` class should have a `add` method.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    return typeof test.add === 'function';
+  })()
+);
+```
+
+Your `LinkedList` class should assign `head` to the first node added.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    return test.head().element === 'cat';
+  })()
+);
+```
+
+The previous `node` in your `LinkedList` class should have reference to the newest node created.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.add('fish');
+    return test.head().next.element === 'dog' && test.head().next.next.element === 'fish';
+  })()
+);
+```
+
+The  `size` of your `LinkedList` class should equal the amount of nodes in the linked list.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    return test.size() === 2;
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function LinkedList() {
+  var length = 0;
+  var head = null;
+
+  var Node = function(element){
+    this.element = element;
+    this.next = null;
+  };
+
+  this.head = function(){
+    return head;
+  };
+
+  this.size = function(){
+    return length;
+  };
+
+  this.add = function(element){
+    // Only change code below this line
+
+    // Only change code above this line
+  };
+}
+```
+
+# --solutions--
+
+```js
+function LinkedList() { 
+  var length = 0; 
+  var head = null; 
+
+  var Node = function(element){
+    this.element = element; 
+    this.next = null; 
+  }; 
+
+  this.head = function(){
+    return head;
+  };
+
+  this.size = function(){
+    return length;
+  };
+
+  this.add = function(element){
+    // Only change code below this line
+    if (head == null) {
+      head = new Node(element);
+    } 
+    else {
+      let currentNode = head;
+      while (currentNode.next != null) {
+        // currentNode.next will be last node of linked list after loop
+        currentNode = currentNode.next;
+      }
+      currentNode.next = new Node(element);
+    }
+    length++;
+    // Only change code above this line
+  };
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-map-data-structure.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-map-data-structure.md
new file mode 100644
index 00000000000..f02202cc5f9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-map-data-structure.md
@@ -0,0 +1,204 @@
+---
+id: 8d5823c8c441eddfaeb5bdef
+title: Create a Map Data Structure
+challengeType: 1
+forumTopicId: 301629
+dashedName: create-a-map-data-structure
+---
+
+# --description--
+
+The next few challenges will cover maps and hash tables. Maps are data structures that store key-value pairs. In JavaScript, these are available to us as objects. Maps provide rapid lookup of stored items based on key values and are very common and useful data structures.
+
+# --instructions--
+
+Let's get some practice creating our own map. Because JavaScript objects provide a much more efficient map structure than anything we could write here, this is intended primarily as a learning exercise. However, JavaScript objects only provide us with certain operations. What if we wanted to define custom operations? Use the `Map` object provided here as a wrapper around a JavaScript `object`. Create the following methods and operations on the Map object:
+
+<ul>
+<li><code>add</code> accepts a <code>key, value</code> pair to add to the map.</li>
+<li><code>remove</code> accepts a key and removes the associated <code>key, value</code> pair</li>
+<li><code>get</code> accepts a <code>key</code> and returns the stored <code>value</code></li>
+<li><code>has</code> accepts a <code>key</code> and returns <dfn>true</dfn> if the key exists or <dfn>false</dfn> if it doesn't.</li>
+<li><code>values</code> returns an array of all the values in the map</li>
+<li><code>size</code> returns the number of items in the map</li>
+<li><code>clear</code> empties the map</li>
+</ul>
+
+# --hints--
+
+The `Map` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof Map !== 'undefined') {
+      test = new Map();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+The `Map` object should have the following methods: `add`, `remove`, `get`, `has`, `values`, `clear`, and `size`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof Map !== 'undefined') {
+      test = new Map();
+    }
+    return (
+      typeof test.add == 'function' &&
+      typeof test.remove == 'function' &&
+      typeof test.get == 'function' &&
+      typeof test.has == 'function' &&
+      typeof test.values == 'function' &&
+      typeof test.clear == 'function' &&
+      typeof test.size == 'function'
+    );
+  })()
+);
+```
+
+The `add` method should add items to the map.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof Map !== 'undefined') {
+      test = new Map();
+    }
+    test.add(5, 6);
+    test.add(2, 3);
+    test.add(2, 5);
+    return test.size() == 2;
+  })()
+);
+```
+
+The `has` method should return `true` for added items and `false` for absent items.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof Map !== 'undefined') {
+      test = new Map();
+    }
+    test.add('test', 'value');
+    return test.has('test') && !test.has('false');
+  })()
+);
+```
+
+The `get` method should accept keys as input and should return the associated values.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof Map !== 'undefined') {
+      test = new Map();
+    }
+    test.add('abc', 'def');
+    return test.get('abc') == 'def';
+  })()
+);
+```
+
+The `values` method should return all the values stored in the map as strings in an array.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof Map !== 'undefined') {
+      test = new Map();
+    }
+    test.add('a', 'b');
+    test.add('c', 'd');
+    test.add('e', 'f');
+    var vals = test.values();
+    return (
+      vals.indexOf('b') != -1 &&
+      vals.indexOf('d') != -1 &&
+      vals.indexOf('f') != -1
+    );
+  })()
+);
+```
+
+The `clear` method should empty the map and the `size` method should return the number of items present in the map.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof Map !== 'undefined') {
+      test = new Map();
+    }
+    test.add('b', 'b');
+    test.add('c', 'd');
+    test.remove('asdfas');
+    var init = test.size();
+    test.clear();
+    return init == 2 && test.size() == 0;
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+var Map = function() {
+  this.collection = {};
+  // Only change code below this line
+
+  // Only change code above this line
+};
+```
+
+# --solutions--
+
+```js
+var Map = function() {
+    this.collection = {};
+    // Only change code below this line
+
+    this.add = function(key,value) {
+      this.collection[key] = value;
+    }
+
+    this.remove = function(key) {
+      delete this.collection[key];
+    }
+
+    this.get = function(key) {
+      return this.collection[key];
+    }
+
+    this.has = function(key) {
+      return this.collection.hasOwnProperty(key)
+    }
+
+    this.values = function() {
+      return Object.values(this.collection);
+    }
+
+    this.size = function() {
+      return Object.keys(this.collection).length;
+    }
+
+    this.clear = function() {
+      for(let item of Object.keys(this.collection)) {
+        delete this.collection[item];
+      }
+    }
+    // Only change code above this line
+};
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-priority-queue-class.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-priority-queue-class.md
new file mode 100644
index 00000000000..c381e3940ba
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-priority-queue-class.md
@@ -0,0 +1,231 @@
+---
+id: 587d8255367417b2b2512c74
+title: Create a Priority Queue Class
+challengeType: 1
+forumTopicId: 301630
+dashedName: create-a-priority-queue-class
+---
+
+# --description--
+
+In this challenge you will be creating a Priority Queue. A Priority Queue is a special type of Queue in which items may have additional information which specifies their priority. This could be simply represented with an integer. Item priority will override placement order in determining the sequence items are dequeued. If an item with a higher priority is enqueued after items with lower priority, the higher priority item will be dequeued before all the others.
+
+For instance, let’s imagine we have a priority queue with three items:
+
+```js
+[['kitten', 2], ['dog', 2], ['rabbit', 2]]
+```
+
+Here the second value (an integer) represents item priority. If we enqueue `['human', 1]` with a priority of `1` (assuming lower priorities are given precedence) it would then be the first item to be dequeued. The collection would look like this:
+
+```js
+[['human', 1], ['kitten', 2], ['dog', 2], ['rabbit', 2]]
+```
+
+We’ve started writing a `PriorityQueue` in the code editor. You will need to add an `enqueue` method for adding items with a priority, a `dequeue` method for removing and returning items, a `size` method to return the number of items in the queue, a `front` method to return the element at the front of the queue, and finally an `isEmpty` method that will return `true` if the queue is empty or `false` if it is not.
+
+The `enqueue` should accept items with the format shown above (`['human', 1]`) where `1` represents the priority. `dequeue` and `front` should return only the item's name, not its priority.
+
+# --hints--
+
+Your `PriorityQueue` class should have a `enqueue` method.
+
+```js
+assert(
+  (function () {
+    var test = new PriorityQueue();
+    return typeof test.enqueue === 'function';
+  })()
+);
+```
+
+Your `PriorityQueue` class should have a `dequeue` method.
+
+```js
+assert(
+  (function () {
+    var test = new PriorityQueue();
+    return typeof test.dequeue === 'function';
+  })()
+);
+```
+
+Your `PriorityQueue` class should have a `size` method.
+
+```js
+assert(
+  (function () {
+    var test = new PriorityQueue();
+    return typeof test.size === 'function';
+  })()
+);
+```
+
+Your `PriorityQueue` class should have a `front` method.
+
+```js
+assert(
+  (function () {
+    var test = new PriorityQueue();
+    return typeof test.front === 'function';
+  })()
+);
+```
+
+Your `PriorityQueue` class should have an `isEmpty` method.
+
+```js
+assert(
+  (function () {
+    var test = new PriorityQueue();
+    return typeof test.isEmpty === 'function';
+  })()
+);
+```
+
+Your `PriorityQueue` class should correctly keep track of the current number of items using the `size` method as items are enqueued and dequeued.
+
+```js
+assert(
+  (function () {
+    var test = new PriorityQueue();
+    test.enqueue(['David Brown', 2]);
+    test.enqueue(['Jon Snow', 1]);
+    var size1 = test.size();
+    test.dequeue();
+    var size2 = test.size();
+    test.enqueue(['A', 3]);
+    test.enqueue(['B', 3]);
+    test.enqueue(['C', 3]);
+    return size1 === 2 && size2 === 1 && test.size() === 4;
+  })()
+);
+```
+
+The `front` method should return the correct item at the front of the queue as items are enqueued and dequeued.
+
+```js
+assert(
+  (function () {
+    var test = new PriorityQueue();
+    test.enqueue(['David Brown', 2]);
+    var front1 = test.front();
+    test.enqueue(['Jon Snow', 1]);
+    var front2 = test.front();
+    test.dequeue();
+    test.enqueue(['A', 3]);
+    var front3 = test.front();
+    test.enqueue(['B', 3]);
+    test.enqueue(['C', 3]);
+    test.dequeue();
+    var front4 = test.front();
+    return (
+      front1 === 'David Brown' &&
+      front2 === 'Jon Snow' &&
+      front3 === 'David Brown' &&
+      front4 === 'A'
+    );
+  })()
+);
+```
+
+The `isEmpty` method should return `true` when the queue is empty.
+
+```js
+assert(
+  (function () {
+    var test = new PriorityQueue();
+    test.enqueue(['A', 1]);
+    test.enqueue(['B', 1]);
+    test.dequeue();
+    var first = test.isEmpty();
+    test.dequeue();
+    return !first && test.isEmpty();
+  })()
+);
+```
+
+The priority queue should return items with a higher priority before items with a lower priority and return items in first-in-first-out order otherwise.
+
+```js
+assert(
+  (function () {
+    var test = new PriorityQueue();
+    test.enqueue(['A', 5]);
+    test.enqueue(['B', 5]);
+    test.enqueue(['C', 5]);
+    test.enqueue(['D', 3]);
+    test.enqueue(['E', 1]);
+    test.enqueue(['F', 7]);
+    var result = [];
+    result.push(test.dequeue());
+    result.push(test.dequeue());
+    result.push(test.dequeue());
+    result.push(test.dequeue());
+    result.push(test.dequeue());
+    result.push(test.dequeue());
+    return result.join('') === 'EDABCF';
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function PriorityQueue () {
+  this.collection = [];
+  this.printCollection = function() {
+    console.log(this.collection);
+  };
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function PriorityQueue() {
+  this.collection = [];
+  this.printCollection = function () {
+    console.log(this.collection);
+  };
+  // Only change code below this line
+  this.enqueue = function (newitem) {
+    if (this.isEmpty()) {
+      return this.collection.push(newitem);
+    }
+
+    this.collection = this.collection.reverse();
+    var found_index = this.collection.findIndex(function (item) {
+      return newitem[1] >= item[1];
+    });
+    if (found_index === -1) {
+      this.collection.push(newitem);
+    } else {
+      this.collection.splice(found_index, 0, newitem);
+    }
+    this.collection = this.collection.reverse();
+  };
+  this.dequeue = function () {
+    if (!this.isEmpty()) {
+      return this.collection.shift()[0];
+    } else {
+      return "The queue is empty.";
+    }
+  };
+  this.size = function () {
+    return this.collection.length;
+  };
+  this.front = function () {
+    return this.collection[0][0];
+  };
+  this.isEmpty = function () {
+    return this.size() > 0 ? false : true;
+  };
+  // Only change code above this line
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-queue-class.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-queue-class.md
new file mode 100644
index 00000000000..306b90e0c08
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-queue-class.md
@@ -0,0 +1,174 @@
+---
+id: 587d8250367417b2b2512c60
+title: Create a Queue Class
+challengeType: 1
+forumTopicId: 301631
+dashedName: create-a-queue-class
+---
+
+# --description--
+
+Like stacks, queues are a collection of elements. But unlike stacks, queues follow the FIFO (First-In First-Out) principle. Elements added to a queue are pushed to the tail, or the end, of the queue, and only the element at the front of the queue is allowed to be removed.
+
+We could use an array to represent a queue, but just like stacks, we want to limit the amount of control we have over our queues.
+
+The two main methods of a queue class is the enqueue and the dequeue method. The enqueue method pushes an element to the tail of the queue, and the dequeue method removes and returns the element at the front of the queue. Other useful methods are the front, size, and isEmpty methods.
+
+# --instructions--
+
+Write an `enqueue` method that pushes an element to the tail of the queue, a `dequeue` method that removes and returns the front element, a `front` method that lets us see the front element, a `size` method that shows the length, and an `isEmpty` method to check if the queue is empty.
+
+# --hints--
+
+Your `Queue` class should have a `enqueue` method.
+
+```js
+assert(
+  (function () {
+    var test = new Queue();
+    return typeof test.enqueue === 'function';
+  })()
+);
+```
+
+Your `Queue` class should have a `dequeue` method.
+
+```js
+assert(
+  (function () {
+    var test = new Queue();
+    return typeof test.dequeue === 'function';
+  })()
+);
+```
+
+Your `Queue` class should have a `front` method.
+
+```js
+assert(
+  (function () {
+    var test = new Queue();
+    return typeof test.front === 'function';
+  })()
+);
+```
+
+Your `Queue` class should have a `size` method.
+
+```js
+assert(
+  (function () {
+    var test = new Queue();
+    return typeof test.size === 'function';
+  })()
+);
+```
+
+Your `Queue` class should have an `isEmpty` method.
+
+```js
+assert(
+  (function () {
+    var test = new Queue();
+    return typeof test.isEmpty === 'function';
+  })()
+);
+```
+
+The `dequeue` method should remove and return the front element of the queue
+
+```js
+assert(
+  (function () {
+    var test = new Queue();
+    test.enqueue('Smith');
+    test.enqueue('John');
+    return test.dequeue() === 'Smith';
+  })()
+);
+```
+
+The `front` method should return value of the front element of the queue
+
+```js
+assert(
+  (function () {
+    var test = new Queue();
+    test.enqueue('Smith');
+    test.enqueue('John');
+    return test.front() === 'Smith';
+  })()
+);
+```
+
+The `size` method should return the length of the queue
+
+```js
+assert(
+  (function () {
+    var test = new Queue();
+    test.enqueue('Smith');
+    return test.size() === 1;
+  })()
+);
+```
+
+The `isEmpty` method should return `false` if there are elements in the queue
+
+```js
+assert(
+  (function () {
+    var test = new Queue();
+    test.enqueue('Smith');
+    return !test.isEmpty();
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Queue() {
+  var collection = [];
+  this.print = function() {
+    console.log(collection);
+  };
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function Queue () { 
+    var collection = [];
+    this.print = function() {
+        console.log(collection);
+    };
+    // Only change code below this line
+    this.enqueue = function(item) {
+        collection.push(item);
+    }
+
+    this.dequeue = function() {
+        return collection.shift();
+    }
+
+    this.front = function() {
+        return collection[0];
+    }
+
+    this.size = function(){
+        return collection.length;
+    }
+
+    this.isEmpty = function() {
+        return collection.length === 0 ? true : false;
+    }
+    // Only change code above this line
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-set-class.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-set-class.md
new file mode 100644
index 00000000000..d818be6a807
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-set-class.md
@@ -0,0 +1,219 @@
+---
+id: 8d1323c8c441eddfaeb5bdef
+title: Create a Set Class
+challengeType: 1
+forumTopicId: 301632
+dashedName: create-a-set-class
+---
+
+# --description--
+
+In this exercise we are going to create a class named `Set` to emulate an abstract data structure called "set". A set is like an array, but it cannot contain duplicate values. The typical use for a set is to simply check for the presence of an item. We can see how the ES6 `Set` object works in the example below:
+
+```js
+const set1 = new Set([1, 2, 3, 5, 5, 2, 0]);
+console.log(set1);
+// output: {1, 2, 3, 5, 0}
+console.log(set1.has(1));
+// output: true
+console.log(set1.has(6));
+// output: false
+```
+
+First, we will create an add method that adds a value to our set collection as long as the value does not already exist in the set. Then we will create a remove method that removes a value from the set collection if it already exists. And finally, we will create a size method that returns the number of elements inside the set collection.
+
+# --instructions--
+
+Create an `add` method that adds a unique value to the set collection and returns `true` if the value was successfully added and `false` otherwise.
+
+Create a `remove` method that accepts a value and checks if it exists in the set. If it does, then this method should remove it from the set collection, and return `true`. Otherwise, it should return `false`. Create a `size` method that returns the size of the set collection.
+
+# --hints--
+
+Your `Set` class should have an `add` method.
+
+```js
+assert(
+  (function () {
+    var test = new Set();
+    return typeof test.add === 'function';
+  })()
+);
+```
+
+Your `add` method should not add duplicate values.
+
+```js
+assert(
+  (function () {
+    var test = new Set();
+    test.add('a');
+    test.add('b');
+    test.add('a');
+    var vals = test.values();
+    return vals[0] === 'a' && vals[1] === 'b' && vals.length === 2;
+  })()
+);
+```
+
+Your `add` method should return `true` when a value has been successfully added.
+
+```js
+assert(
+  (function () {
+    var test = new Set();
+    var result = test.add('a');
+    return result != undefined && result === true;
+  })()
+);
+```
+
+Your `add` method should return `false` when a duplicate value is added.
+
+```js
+assert(
+  (function () {
+    var test = new Set();
+    test.add('a');
+    var result = test.add('a');
+    return result != undefined && result === false;
+  })()
+);
+```
+
+Your `Set` class should have a `remove` method.
+
+```js
+assert(
+  (function () {
+    var test = new Set();
+    return typeof test.remove === 'function';
+  })()
+);
+```
+
+Your `remove` method should only remove items that are present in the set.
+
+```js
+assert.deepEqual(
+  (function () {
+    var test = new Set();
+    test.add('a');
+    test.add('b');
+    test.remove('c');
+    return test.values();
+  })(),
+  ['a', 'b']
+);
+```
+
+Your `remove` method should remove the given item from the set.
+
+```js
+assert(
+  (function () {
+    var test = new Set();
+    test.add('a');
+    test.add('b');
+    test.remove('a');
+    var vals = test.values();
+    return vals[0] === 'b' && vals.length === 1;
+  })()
+);
+```
+
+Your `Set` class should have a `size` method.
+
+```js
+assert(
+  (function () {
+    var test = new Set();
+    return typeof test.size === 'function';
+  })()
+);
+```
+
+The `size` method should return the number of elements in the collection.
+
+```js
+assert(
+  (function () {
+    var test = new Set();
+    test.add('a');
+    test.add('b');
+    test.remove('a');
+    return test.size() === 1;
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+class Set {
+  constructor() {
+    // Dictionary will hold the items of our set
+    this.dictionary = {};
+    this.length = 0;
+  }
+
+  // This method will check for the presence of an element and return true or false
+  has(element) {
+    return this.dictionary[element] !== undefined;
+  }
+
+  // This method will return all the values in the set
+  values() {
+    return Object.values(this.dictionary);
+  }
+
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+class Set {
+  constructor() {
+    this.dictionary = {};
+    this.length = 0;
+  }
+
+  has(element) {
+    return this.dictionary[element] !== undefined;
+  }
+
+  values() {
+    return Object.values(this.dictionary);
+  }
+
+  add(element) {
+    if (!this.has(element)) {
+      this.dictionary[element] = element;
+      this.length++;
+      return true;
+    }
+
+    return false;
+  }
+
+  remove(element) {
+    if (this.has(element)) {
+      delete this.dictionary[element];
+      this.length--;
+      return true;
+    }
+
+    return false;
+  }
+
+  size() {
+    return this.length;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-stack-class.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-stack-class.md
new file mode 100644
index 00000000000..c4a493c4398
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-stack-class.md
@@ -0,0 +1,167 @@
+---
+id: 587d8250367417b2b2512c5f
+title: Create a Stack Class
+challengeType: 1
+forumTopicId: 301633
+dashedName: create-a-stack-class
+---
+
+# --description--
+
+In the last section, we talked about what a stack is and how we can use an array to represent a stack. In this section, we will be creating our own stack class. Although you can use arrays to create stacks, sometimes it is best to limit the amount of control we have with our stacks. Apart from the `push` and `pop` method, stacks have other useful methods. Let's add a `peek`, `isEmpty`, and `clear` method to our stack class.
+
+# --instructions--
+
+Write a `push` method that pushes an element to the top of the stack, a `pop` method that removes and returns the element on the top of the stack, a `peek` method that looks at the top element in the stack, an `isEmpty` method that checks if the stack is empty, and a `clear` method that removes all elements from the stack. Normally stacks don't have this, but we've added a `print` helper method that console logs the collection.
+
+# --hints--
+
+Your `Stack` class should have a `push` method.
+
+```js
+assert(
+  (function () {
+    var test = new Stack();
+    return typeof test.push === 'function';
+  })()
+);
+```
+
+Your `Stack` class should have a `pop` method.
+
+```js
+assert(
+  (function () {
+    var test = new Stack();
+    return typeof test.pop === 'function';
+  })()
+);
+```
+
+Your `Stack` class should have a `peek` method.
+
+```js
+assert(
+  (function () {
+    var test = new Stack();
+    return typeof test.peek === 'function';
+  })()
+);
+```
+
+Your `Stack` class should have a `isEmpty` method.
+
+```js
+assert(
+  (function () {
+    var test = new Stack();
+    return typeof test.isEmpty === 'function';
+  })()
+);
+```
+
+Your `Stack` class should have a `clear` method.
+
+```js
+assert(
+  (function () {
+    var test = new Stack();
+    return typeof test.clear === 'function';
+  })()
+);
+```
+
+The `peek` method should return the top element of the stack
+
+```js
+assert(
+  (function () {
+    var test = new Stack();
+    test.push('CS61');
+    test.push('CS50');
+    return test.peek() === 'CS50' && test.peek() === 'CS50';
+  })()
+);
+```
+
+The `pop` method should remove and return the top element of the stack
+
+```js
+assert(
+  (function () {
+    var test = new Stack();
+    test.push('CS61');
+    test.push('CS50');
+    return test.pop() === 'CS50' && test.pop() === 'CS61';
+  })()
+);
+```
+
+The `isEmpty` method should return true if a stack does not contain any elements
+
+```js
+assert(
+  (function () {
+    var test = new Stack();
+    return test.isEmpty();
+  })()
+);
+```
+
+The `clear` method should remove all element from the stack
+
+```js
+assert(
+  (function () {
+    var test = new Stack();
+    test.push('CS61');
+    test.push('CS50');
+    test.clear();
+    return test.isEmpty();
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Stack() {
+  var collection = [];
+  this.print = function() {
+    console.log(collection);
+  };
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+class Stack {
+  constructor() {
+    this.collection = [];
+  }
+  print() {
+    console.log(this.collection);
+  }
+  push(val) {
+    this.collection.push(val);
+  }
+  pop() {
+    return this.collection.pop();
+  }
+  peek() {
+    return this.collection[this.collection.length - 1];
+  }
+  isEmpty() {
+    return this.collection.length === 0;
+  }
+  clear() {
+    return (this.collection.length = 0);
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-trie-search-tree.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-trie-search-tree.md
new file mode 100644
index 00000000000..b1495efd441
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-a-trie-search-tree.md
@@ -0,0 +1,151 @@
+---
+id: 587d8259367417b2b2512c84
+title: Create a Trie Search Tree
+challengeType: 1
+forumTopicId: 301634
+dashedName: create-a-trie-search-tree
+---
+
+# --description--
+
+Here we will move on from binary search trees and take a look at another type of tree structure called a trie. A trie is an ordered search tree commonly used to hold strings, or more generically associative arrays or dynamic datasets in which the keys are strings. They are very good at storing sets of data when many keys will have overlapping prefixes, for example, all the words in a dictionary. Unlike a binary tree, nodes are not associated with actual values. Instead, the path to a node represents a specific key. For instance, if we wanted to store the string code in a trie, we would have four nodes, one for each letter: c — o — d — e. Following that path through all these nodes will then create code as a string — that path is the key we stored. Then, if we wanted to add the string coding, it would share the first three nodes of code before branching away after the d. In this way, large datasets can be stored very compactly. In addition, search can be very quick because it is effectively limited to the length of the string you are storing. Furthermore, unlike binary trees a node can store any number of child nodes. As you might have guessed from the above example, some metadata is commonly stored at nodes that hold the end of a key so that on later traversals that key can still be retrieved. For instance, if we added codes in our example above we would need some way to know that the e in code represents the end of a key that was previously entered. Otherwise, this information would effectively be lost when we add codes.
+
+# --instructions--
+
+Let's create a trie to store words. It will accept words through an `add` method and store these in a trie data structure. It will also allow us to query if a given string is a word with an `isWord` method, and retrieve all the words entered into the trie with a `print` method. `isWord` should return a boolean value and `print` should return an array of all these words as string values. In order for us to verify that this data structure is implemented correctly, we've provided a `Node` structure for each node in the tree. Each node will be an object with a `keys` property which is a JavaScript Map object. This will hold the individual letters that are valid keys of each node. We've also created an `end` property on the nodes that can be set to `true` if the node represents the termination of a word.
+
+# --hints--
+
+The `Trie` should have an `add` method.
+
+```js
+assert(
+  (function testTrie() {
+    var test = false;
+    if (typeof Trie !== 'undefined') {
+      test = new Trie();
+    } else {
+      return false;
+    }
+    return typeof test.add == 'function';
+  })()
+);
+```
+
+The `Trie` should have a `print` method.
+
+```js
+assert(
+  (function testTrie() {
+    var test = false;
+    if (typeof Trie !== 'undefined') {
+      test = new Trie();
+    } else {
+      return false;
+    }
+    return typeof test.print == 'function';
+  })()
+);
+```
+
+The `Trie` should have an `isWord` method.
+
+```js
+assert(
+  (function testTrie() {
+    var test = false;
+    if (typeof Trie !== 'undefined') {
+      test = new Trie();
+    } else {
+      return false;
+    }
+    return typeof test.isWord == 'function';
+  })()
+);
+```
+
+The `print` method should return all items added to the trie as strings in an array.
+
+```js
+assert(
+  (function testTrie() {
+    var test = false;
+    if (typeof Trie !== 'undefined') {
+      test = new Trie();
+    } else {
+      return false;
+    }
+    test.add('jump');
+    test.add('jumps');
+    test.add('jumped');
+    test.add('house');
+    test.add('mouse');
+    var added = test.print();
+    return (
+      added.indexOf('jump') != -1 &&
+      added.indexOf('jumps') != -1 &&
+      added.indexOf('jumped') != -1 &&
+      added.indexOf('house') != -1 &&
+      added.indexOf('mouse') != -1 &&
+      added.length == 5
+    );
+  })()
+);
+```
+
+The `isWord` method should return `true` only for words added to the trie and `false` for all other words.
+
+```js
+assert(
+  (function testTrie() {
+    var test = false;
+    if (typeof Trie !== 'undefined') {
+      test = new Trie();
+    } else {
+      return false;
+    }
+    test.add('hop');
+    test.add('hops');
+    test.add('hopped');
+    test.add('hoppy');
+    test.add('hope');
+    return (
+      test.isWord('hop') &&
+      !test.isWord('ho') &&
+      test.isWord('hopped') &&
+      !test.isWord('hopp') &&
+      test.isWord('hoppy') &&
+      !test.isWord('hoping')
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+var displayTree = tree => console.log(JSON.stringify(tree, null, 2));
+var Node = function() {
+  this.keys = new Map();
+  this.end = false;
+  this.setEnd = function() {
+    this.end = true;
+  };
+  this.isEnd = function() {
+    return this.end;
+  };
+};
+var Trie = function() {
+  // Only change code below this line
+
+  // Only change code above this line
+};
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-an-es6-javascript-map.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-an-es6-javascript-map.md
new file mode 100644
index 00000000000..02bcedd36db
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-an-es6-javascript-map.md
@@ -0,0 +1,53 @@
+---
+id: 587d825b367417b2b2512c8d
+title: Create an ES6 JavaScript Map
+challengeType: 1
+forumTopicId: 301635
+dashedName: create-an-es6-javascript-map
+---
+
+# --description--
+
+The new version of JavaScript provides us with a built-in Map object which provides much of the functionality we wrote by hand in the last challenge. This Map object, although similar to regular JavaScript objects, provides some useful functionality that normal objects lack. For example, an ES6 Map tracks the insertion order of items that are added to it. Here is a more complete overview of its methods:
+
+- `.has(key)` returns true or false based on the presence of a key
+- `.get(key)` returns the value associated with a key
+- `.set(key, value)` sets a new key, value pair
+- `.delete(key)` removes a key, value pair
+- `.clear()` removes all key, value pairs
+- `.entries()` returns an array of all the keys in insertion order
+- `.values()` returns an array of all the values in insertion order
+
+# --instructions--
+
+Define a JavaScript Map object and assign to it a variable called myMap. Add the key, value pair `freeCodeCamp`, `Awesome!` to it.
+
+# --hints--
+
+The `myMap` object should exist.
+
+```js
+assert(typeof myMap === 'object');
+```
+
+`myMap` should contain the key value pair `freeCodeCamp`, `Awesome!`.
+
+```js
+assert(myMap.get('freeCodeCamp') === 'Awesome!');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+
+```
+
+# --solutions--
+
+```js
+const myMap = new Map();
+
+myMap.set("freeCodeCamp", "Awesome!");
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-and-add-to-sets-in-es6.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-and-add-to-sets-in-es6.md
new file mode 100644
index 00000000000..1727a24ed00
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/create-and-add-to-sets-in-es6.md
@@ -0,0 +1,92 @@
+---
+id: 587d8254367417b2b2512c70
+title: Create and Add to Sets in ES6
+challengeType: 1
+forumTopicId: 301636
+dashedName: create-and-add-to-sets-in-es6
+---
+
+# --description--
+
+Now that you have worked through ES5, you are going to perform something similar in ES6. This will be considerably easier. ES6 contains a built-in data structure `Set` so many of the operations you wrote by hand are now included for you. Let's take a look:
+
+To create a new empty set:
+
+```js
+var set = new Set();
+```
+
+You can create a set with a value:
+
+```js
+var set = new Set(1);
+```
+
+You can create a set with an array:
+
+```js
+var set = new Set([1, 2, 3]);
+```
+
+Once you have created a set, you can add the values you wish using the `add` method:
+
+```js
+var set = new Set([1, 2, 3]);
+set.add([4, 5, 6]);
+```
+
+As a reminder, a set is a data structure that cannot contain duplicate values:
+
+```js
+var set = new Set([1, 2, 3, 1, 2, 3]);
+// set contains [1, 2, 3] only
+```
+
+# --instructions--
+
+For this exercise, return a set with the following values: `1, 2, 3, 'Taco', 'Cat', 'Awesome'`
+
+# --hints--
+
+Your `Set` should only contain the values `1, 2, 3, Taco, Cat, Awesome`.
+
+```js
+assert(
+  (function () {
+    var test = checkSet();
+    return (
+      test.size == 6 &&
+      test.has(1) &&
+      test.has(2) &&
+      test.has(3) &&
+      test.has('Taco') &&
+      test.has('Cat') &&
+      test.has('Awesome')
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function checkSet() {
+  var set = new Set([1, 2, 3, 3, 2, 1, 2, 3, 1]);
+  // Only change code below this line
+
+  // Only change code above this line
+  console.log(Array.from(set));
+  return set;
+}
+
+checkSet();
+```
+
+# --solutions--
+
+```js
+function checkSet(){var set = new Set([1,2,3,'Taco','Cat','Awesome']);
+return set;}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/delete-a-leaf-node-in-a-binary-search-tree.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/delete-a-leaf-node-in-a-binary-search-tree.md
new file mode 100644
index 00000000000..a359575e5f7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/delete-a-leaf-node-in-a-binary-search-tree.md
@@ -0,0 +1,216 @@
+---
+id: 587d8258367417b2b2512c80
+title: Delete a Leaf Node in a Binary Search Tree
+challengeType: 1
+forumTopicId: 301637
+dashedName: delete-a-leaf-node-in-a-binary-search-tree
+---
+
+# --description--
+
+This is the first of three challenges where we will implement a more difficult operation in binary search trees: deletion. Deletion is difficult because removing nodes breaks links in the tree. These links must be carefully reestablished to ensure the binary tree structure is maintained. For some deletions, this means the tree must be rearranged. In general, you will encounter one of three cases when trying to delete a node: Leaf Node: The target to delete has zero children. One Child: The target to delete only has one child. Two Children: The target to delete has two child nodes. Removing a leaf node is easy, we simply remove it. Deleting a node with one child is also relatively easy, we simply remove it and link its parent to child of the node we deleted. Removing a node with two children is more difficult, however, because this creates two child nodes that need to be reconnected to the parent tree. We'll see how to deal with this case in the third challenge. Additionally, you need to be mindful of some edge cases when handling deletion. What if the tree is empty? What if the node to delete is the root node? What if there are only two elements in the tree? For now, let's handle the first case where we delete a leaf node.
+
+# --instructions--
+
+Create a method on our binary tree called `remove`. We'll build the logic for our deletion operation in here. First, you'll want to create a function within remove that finds the node we are trying to delete in the current tree. If the node is not present in the tree, `remove` should return `null`. Now, if the target node is a leaf node with no children, then the parent reference to it should be set to `null`. This effectively deletes the node from the tree. To do this, you will have to keep track of the parent of the node we are trying to delete as well. It will also be useful to create a way to track the number of children the target node has, as this will determine which case our deletion falls under. We will handle the second and third cases in the next challenges. Good luck!
+
+# --hints--
+
+The `BinarySearchTree` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+The binary search tree should have a method called `remove`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.remove == 'function';
+  })()
+);
+```
+
+Trying to remove an element from an empty tree should return `null`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.remove !== 'function') {
+      return false;
+    }
+    return test.remove(100) == null;
+  })()
+);
+```
+
+Trying to remove an element that does not exist should return `null`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.remove !== 'function') {
+      return false;
+    }
+    test.add(15);
+    test.add(30);
+    return test.remove(100) == null;
+  })()
+);
+```
+
+If the root node has no children, deleting it should set the root to `null`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.remove !== 'function') {
+      return false;
+    }
+    test.add(500);
+    test.remove(500);
+    return test.inorder() == null;
+  })()
+);
+```
+
+The `remove` method should remove leaf nodes from the tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.remove !== 'function') {
+      return false;
+    }
+    test.add(5);
+    test.add(3);
+    test.add(7);
+    test.add(6);
+    test.add(10);
+    test.add(12);
+    test.remove(3);
+    test.remove(12);
+    test.remove(10);
+    return test.inorder().join('') == '567';
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+BinarySearchTree.prototype = Object.assign(
+  BinarySearchTree.prototype,
+  {
+    add: function(value) {
+      var node = this.root;
+      if (node == null) {
+        this.root = new Node(value);
+        return;
+      } else {
+        function searchTree(node) {
+          if (value < node.value) {
+            if (node.left == null) {
+              node.left = new Node(value);
+              return;
+            } else if (node.left != null) {
+              return searchTree(node.left);
+            }
+          } else if (value > node.value) {
+            if (node.right == null) {
+              node.right = new Node(value);
+              return;
+            } else if (node.right != null) {
+              return searchTree(node.right);
+            }
+          } else {
+            return null;
+          }
+        }
+        return searchTree(node);
+      }
+    },
+    inorder: function() {
+      if (this.root == null) {
+        return null;
+      } else {
+        var result = new Array();
+        function traverseInOrder(node) {
+          if (node.left != null) {
+            traverseInOrder(node.left);
+          }
+          result.push(node.value);
+          if (node.right != null) {
+            traverseInOrder(node.right);
+          }
+        }
+        traverseInOrder(this.root);
+        return result;
+      }
+    }
+  }
+);
+```
+
+## --seed-contents--
+
+```js
+var displayTree = tree => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+
+function BinarySearchTree() {
+  this.root = null;
+  // Only change code below this line
+}
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/delete-a-node-with-one-child-in-a-binary-search-tree.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/delete-a-node-with-one-child-in-a-binary-search-tree.md
new file mode 100644
index 00000000000..808d2f722ba
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/delete-a-node-with-one-child-in-a-binary-search-tree.md
@@ -0,0 +1,286 @@
+---
+id: 587d8258367417b2b2512c81
+title: Delete a Node with One Child in a Binary Search Tree
+challengeType: 1
+forumTopicId: 301638
+dashedName: delete-a-node-with-one-child-in-a-binary-search-tree
+---
+
+# --description--
+
+Now that we can delete leaf nodes let's move on to the second case: deleting a node with one child. For this case, say we have a tree with the following nodes 1 — 2 — 3 where 1 is the root. To delete 2, we simply need to make the right reference in 1 point to 3. More generally to delete a node with only one child, we make that node's parent reference the next node in the tree.
+
+# --instructions--
+
+We've provided some code in our `remove` method that accomplishes the tasks from the last challenge. We find the target to delete and its parent and define the number of children the target node has. Let's add the next case here for target nodes with only one child. Here, we'll have to determine if the single child is a left or right branch in the tree and then set the correct reference in the parent to point to this node. In addition, let's account for the case where the target is the root node (this means the parent node will be `null`). Feel free to replace all the starter code with your own as long as it passes the tests.
+
+# --hints--
+
+The `BinarySearchTree` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+The binary search tree should have a method called `remove`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.remove == 'function';
+  })()
+);
+```
+
+Trying to remove an element that does not exist should return `null`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.remove !== 'function') {
+      return false;
+    }
+    return test.remove(100) == null;
+  })()
+);
+```
+
+If the root node has no children, deleting it should set the root to `null`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.remove !== 'function') {
+      return false;
+    }
+    test.add(500);
+    test.remove(500);
+    return test.inorder() == null;
+  })()
+);
+```
+
+The `remove` method should remove leaf nodes from the tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.remove !== 'function') {
+      return false;
+    }
+    test.add(5);
+    test.add(3);
+    test.add(7);
+    test.add(6);
+    test.add(10);
+    test.add(12);
+    test.remove(3);
+    test.remove(12);
+    test.remove(10);
+    return test.inorder().join('') == '567';
+  })()
+);
+```
+
+The `remove` method should remove nodes with one child.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.remove !== 'function') {
+      return false;
+    }
+    test.add(1);
+    test.add(4);
+    test.add(3);
+    test.add(2);
+    test.add(6);
+    test.add(8);
+    test.remove(6);
+    test.remove(3);
+    return test.inorder().join('') == '1248';
+  })()
+);
+```
+
+Removing the root in a tree with two nodes should set the second to be the root.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.remove !== 'function') {
+      return false;
+    }
+    test.add(15);
+    test.add(27);
+    test.remove(15);
+    return test.inorder().join('') == '27';
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+BinarySearchTree.prototype = Object.assign(
+  BinarySearchTree.prototype,
+  {
+    add: function(value) {
+      var node = this.root;
+      if (node == null) {
+        this.root = new Node(value);
+        return;
+      } else {
+        function searchTree(node) {
+          if (value < node.value) {
+            if (node.left == null) {
+              node.left = new Node(value);
+              return;
+            } else if (node.left != null) {
+              return searchTree(node.left);
+            }
+          } else if (value > node.value) {
+            if (node.right == null) {
+              node.right = new Node(value);
+              return;
+            } else if (node.right != null) {
+              return searchTree(node.right);
+            }
+          } else {
+            return null;
+          }
+        }
+        return searchTree(node);
+      }
+    },
+    inorder: function() {
+      if (this.root == null) {
+        return null;
+      } else {
+        var result = new Array();
+        function traverseInOrder(node) {
+          if (node.left != null) {
+            traverseInOrder(node.left);
+          }
+          result.push(node.value);
+          if (node.right != null) {
+            traverseInOrder(node.right);
+          }
+        }
+        traverseInOrder(this.root);
+        return result;
+      }
+    }
+  }
+);
+```
+
+## --seed-contents--
+
+```js
+var displayTree = tree => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+
+function BinarySearchTree() {
+  this.root = null;
+  this.remove = function(value) {
+    if (this.root === null) {
+      return null;
+    }
+    var target;
+    var parent = null;
+    // Find the target value and its parent
+    (function findValue(node = this.root) {
+      if (value == node.value) {
+        target = node;
+      } else if (value < node.value && node.left !== null) {
+        parent = node;
+        return findValue(node.left);
+      } else if (value < node.value && node.left === null) {
+        return null;
+      } else if (value > node.value && node.right !== null) {
+        parent = node;
+        return findValue(node.right);
+      } else {
+        return null;
+      }
+    }.bind(this)());
+    if (target === null) {
+      return null;
+    }
+    // Count the children of the target to delete
+    var children =
+      (target.left !== null ? 1 : 0) + (target.right !== null ? 1 : 0);
+    // Case 1: Target has no children
+    if (children === 0) {
+      if (target == this.root) {
+        this.root = null;
+      } else {
+        if (parent.left == target) {
+          parent.left = null;
+        } else {
+          parent.right = null;
+        }
+      }
+    }
+    // Case 2: Target has one child
+    // Only change code below this line
+  };
+}
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/delete-a-node-with-two-children-in-a-binary-search-tree.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/delete-a-node-with-two-children-in-a-binary-search-tree.md
new file mode 100644
index 00000000000..aab61e9c37f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/delete-a-node-with-two-children-in-a-binary-search-tree.md
@@ -0,0 +1,399 @@
+---
+id: 587d8258367417b2b2512c82
+title: Delete a Node with Two Children in a Binary Search Tree
+challengeType: 1
+forumTopicId: 301639
+dashedName: delete-a-node-with-two-children-in-a-binary-search-tree
+---
+
+# --description--
+
+Removing nodes that have two children is the hardest case to implement. Removing a node like this produces two subtrees that are no longer connected to the original tree structure. How can we reconnect them? One method is to find the smallest value in the right subtree of the target node and replace the target node with this value. Selecting the replacement in this way ensures that it is greater than every node in the left subtree it becomes the new parent of but also less than every node in the right subtree it becomes the new parent of. Once this replacement is made the replacement node must be removed from the right subtree. Even this operation is tricky because the replacement may be a leaf or it may itself be the parent of a right subtree. If it is a leaf we must remove its parent's reference to it. Otherwise, it must be the right child of the target. In this case, we must replace the target value with the replacement value and make the target reference the replacement's right child.
+
+# --instructions--
+
+Let's finish our `remove` method by handling the third case. We've provided some code again for the first two cases. Add some code now to handle target nodes with two children. Any edge cases to be aware of? What if the tree has only three nodes? Once you are finished this will complete our deletion operation for binary search trees. Nice job, this is a pretty hard problem!
+
+# --hints--
+
+The `BinarySearchTree` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+The binary search tree should have a method called `remove`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.remove == 'function';
+  })()
+);
+```
+
+Trying to remove an element that does not exist should return `null`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.remove == 'function' ? test.remove(100) == null : false;
+  })()
+);
+```
+
+If the root node has no children, deleting it should set the root to `null`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    test.add(500);
+    test.remove(500);
+    return typeof test.remove == 'function' ? test.inorder() == null : false;
+  })()
+);
+```
+
+The `remove` method should remove leaf nodes from the tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    test.add(5);
+    test.add(3);
+    test.add(7);
+    test.add(6);
+    test.add(10);
+    test.add(12);
+    test.remove(3);
+    test.remove(12);
+    test.remove(10);
+    return typeof test.remove == 'function'
+      ? test.inorder().join('') == '567'
+      : false;
+  })()
+);
+```
+
+The `remove` method should remove nodes with one child.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.remove !== 'function') {
+      return false;
+    }
+    test.add(-1);
+    test.add(3);
+    test.add(7);
+    test.add(16);
+    test.remove(16);
+    test.remove(7);
+    test.remove(3);
+    return test.inorder().join('') == '-1';
+  })()
+);
+```
+
+Removing the root in a tree with two nodes should set the second to be the root.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.remove !== 'function') {
+      return false;
+    }
+    test.add(15);
+    test.add(27);
+    test.remove(15);
+    return test.inorder().join('') == '27';
+  })()
+);
+```
+
+The `remove` method should remove nodes with two children while maintaining the binary search tree structure.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.remove !== 'function') {
+      return false;
+    }
+    test.add(1);
+    test.add(4);
+    test.add(3);
+    test.add(7);
+    test.add(9);
+    test.add(11);
+    test.add(14);
+    test.add(15);
+    test.add(19);
+    test.add(50);
+    test.remove(9);
+    if (!test.isBinarySearchTree()) {
+      return false;
+    }
+    test.remove(11);
+    if (!test.isBinarySearchTree()) {
+      return false;
+    }
+    test.remove(14);
+    if (!test.isBinarySearchTree()) {
+      return false;
+    }
+    test.remove(19);
+    if (!test.isBinarySearchTree()) {
+      return false;
+    }
+    test.remove(3);
+    if (!test.isBinarySearchTree()) {
+      return false;
+    }
+    test.remove(50);
+    if (!test.isBinarySearchTree()) {
+      return false;
+    }
+    test.remove(15);
+    if (!test.isBinarySearchTree()) {
+      return false;
+    }
+    return test.inorder().join('') == '147';
+  })()
+);
+```
+
+The root should be removable on a tree of three nodes.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.remove !== 'function') {
+      return false;
+    }
+    test.add(100);
+    test.add(50);
+    test.add(300);
+    test.remove(100);
+    return test.inorder().join('') == 50300;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+BinarySearchTree.prototype = Object.assign(
+  BinarySearchTree.prototype,
+  {
+    add: function(value) {
+      var node = this.root;
+      if (node == null) {
+        this.root = new Node(value);
+        return;
+      } else {
+        function searchTree(node) {
+          if (value < node.value) {
+            if (node.left == null) {
+              node.left = new Node(value);
+              return;
+            } else if (node.left != null) {
+              return searchTree(node.left);
+            }
+          } else if (value > node.value) {
+            if (node.right == null) {
+              node.right = new Node(value);
+              return;
+            } else if (node.right != null) {
+              return searchTree(node.right);
+            }
+          } else {
+            return null;
+          }
+        }
+        return searchTree(node);
+      }
+    },
+    inorder: function() {
+      if (this.root == null) {
+        return null;
+      } else {
+        var result = new Array();
+        function traverseInOrder(node) {
+          if (node.left != null) {
+            traverseInOrder(node.left);
+          }
+          result.push(node.value);
+          if (node.right != null) {
+            traverseInOrder(node.right);
+          }
+        }
+        traverseInOrder(this.root);
+        return result;
+      }
+    },
+    isBinarySearchTree() {
+      if (this.root == null) {
+        return null;
+      } else {
+        var check = true;
+        function checkTree(node) {
+          if (node.left != null) {
+            var left = node.left;
+            if (left.value > node.value) {
+              check = false;
+            } else {
+              checkTree(left);
+            }
+          }
+          if (node.right != null) {
+            var right = node.right;
+            if (right.value < node.value) {
+              check = false;
+            } else {
+              checkTree(right);
+            }
+          }
+        }
+        checkTree(this.root);
+        return check;
+      }
+    }
+  }
+);
+```
+
+## --seed-contents--
+
+```js
+var displayTree = tree => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+
+function BinarySearchTree() {
+  this.root = null;
+  this.remove = function(value) {
+    if (this.root === null) {
+      return null;
+    }
+    var target;
+    var parent = null;
+    // Find the target value and its parent
+    (function findValue(node = this.root) {
+      if (value == node.value) {
+        target = node;
+      } else if (value < node.value && node.left !== null) {
+        parent = node;
+        return findValue(node.left);
+      } else if (value < node.value && node.left === null) {
+        return null;
+      } else if (value > node.value && node.right !== null) {
+        parent = node;
+        return findValue(node.right);
+      } else {
+        return null;
+      }
+    }.bind(this)());
+    if (target === null) {
+      return null;
+    }
+    // Count the children of the target to delete
+    var children =
+      (target.left !== null ? 1 : 0) + (target.right !== null ? 1 : 0);
+    // Case 1: Target has no children
+    if (children === 0) {
+      if (target == this.root) {
+        this.root = null;
+      } else {
+        if (parent.left == target) {
+          parent.left = null;
+        } else {
+          parent.right = null;
+        }
+      }
+    }
+    // Case 2: Target has one child
+    else if (children == 1) {
+      var newChild = target.left !== null ? target.left : target.right;
+      if (parent === null) {
+        target.value = newChild.value;
+        target.left = null;
+        target.right = null;
+      } else if (newChild.value < parent.value) {
+        parent.left = newChild;
+      } else {
+        parent.right = newChild;
+      }
+      target = null;
+    }
+    // Case 3: Target has two children
+    // Only change code below this line
+  };
+}
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/depth-first-search.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/depth-first-search.md
new file mode 100644
index 00000000000..d03cf5a4b33
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/depth-first-search.md
@@ -0,0 +1,225 @@
+---
+id: 587d825d367417b2b2512c96
+title: Depth-First Search
+challengeType: 1
+forumTopicId: 301640
+dashedName: depth-first-search
+---
+
+# --description--
+
+Similar to <dfn>breadth-first search</dfn>, here we will learn about another graph traversal algorithm called <dfn>depth-first search</dfn>.
+
+Whereas the breadth-first search searches incremental edge lengths away from the source node, <dfn>depth-first search</dfn> first goes down a path of edges as far as it can.
+
+Once it reaches one end of a path, the search will backtrack to the last node with an un-visited edge path and continue searching.
+
+The animation below shows how the algorithm works. The algorithm starts with the top node and visits the nodes in the numbered order.
+
+<img class='img-responsive' src='https://camo.githubusercontent.com/aaad9e39961daf34d967c616edeb50abf3bf1235/68747470733a2f2f75706c6f61642e77696b696d656469612e6f72672f77696b6970656469612f636f6d6d6f6e732f372f37662f44657074682d46697273742d5365617263682e676966' />
+
+Notice how, unlike breadth-first search, every time a node is visited, it doesn't visit all of its neighbors. Instead, it first visits one of its neighbors and continues down that path until there are no more nodes to be visited on that path.
+
+To implement this algorithm, you'll want to use a stack. A stack is an array where the last element added is the first to be removed. This is also known as a <dfn>Last-In-First-Out</dfn> data structure. A stack is helpful in depth-first search algorithms because, as we add neighbors to the stack, we want to visit the most recently added neighbors first and remove them from the stack.
+
+A simple output of this algorithm is a list of nodes which are reachable from a given node. Therefore, you'll also want to keep track of the nodes you visit.
+
+# --instructions--
+
+Write a function `dfs()` that takes an undirected, adjacency matrix `graph` and a node label `root` as parameters. The node label will just be the numeric value of the node between `0` and `n - 1`, where `n` is the total number of nodes in the graph.
+
+Your function should output an array of all nodes reachable from `root`.
+
+# --hints--
+
+The input graph `[[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 1], [0, 0, 1, 0]]` with a start node of `1` should return an array with `0`, `1`, `2`, and `3`.
+
+```js
+assert.sameMembers(
+  (function () {
+    var graph = [
+      [0, 1, 0, 0],
+      [1, 0, 1, 0],
+      [0, 1, 0, 1],
+      [0, 0, 1, 0]
+    ];
+    return dfs(graph, 1);
+  })(),
+  [0, 1, 2, 3]
+);
+```
+
+The input graph `[[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 1], [0, 0, 1, 0]]` with a start node of `3` should return an array with `3`, `2`, `1`, and `0`.
+
+```js
+assert.sameMembers(
+  (function () {
+    var graph = [
+      [0, 1, 0, 0],
+      [1, 0, 1, 0],
+      [0, 1, 0, 1],
+      [0, 0, 1, 0]
+    ];
+    return dfs(graph, 3);
+  })(),
+  [3, 2, 1, 0]
+);
+```
+
+The input graph `[[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 1], [0, 0, 1, 0]]` with a start node of `1` should return an array with four elements.
+
+```js
+assert(
+  (function () {
+    var graph = [
+      [0, 1, 0, 0],
+      [1, 0, 1, 0],
+      [0, 1, 0, 1],
+      [0, 0, 1, 0]
+    ];
+    return dfs(graph, 1);
+  })().length === 4
+);
+```
+
+The input graph `[[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 0], [0, 0, 0, 0]]` with a start node of `3` should return an array with `3`.
+
+```js
+assert.sameMembers(
+  (function () {
+    var graph = [
+      [0, 1, 0, 0],
+      [1, 0, 1, 0],
+      [0, 1, 0, 0],
+      [0, 0, 0, 0]
+    ];
+    return dfs(graph, 3);
+  })(),
+  [3]
+);
+```
+
+The input graph `[[0, 1, 0, 0], [1, 0, 1, 0], [0, 1, 0, 0], [0, 0, 0, 0]]` with a start node of `3` should return an array with one element.
+
+```js
+assert(
+  (function () {
+    var graph = [
+      [0, 1, 0, 0],
+      [1, 0, 1, 0],
+      [0, 1, 0, 0],
+      [0, 0, 0, 0]
+    ];
+    return dfs(graph, 3);
+  })().length === 1
+);
+```
+
+The input graph `[[0, 1, 0, 0], [1, 0, 0, 0], [0, 0, 0, 1], [0, 0, 1, 0]]` with a start node of `3` should return an array with `2` and `3`.
+
+```js
+assert.sameMembers(
+  (function () {
+    var graph = [
+      [0, 1, 0, 0],
+      [1, 0, 0, 0],
+      [0, 0, 0, 1],
+      [0, 0, 1, 0]
+    ];
+    return dfs(graph, 3);
+  })(),
+  [2, 3]
+);
+```
+
+The input graph `[[0, 1, 0, 0], [1, 0, 0, 0], [0, 0, 0, 1], [0, 0, 1, 0]]` with a start node of `3` should return an array with two elements.
+
+```js
+assert(
+  (function () {
+    var graph = [
+      [0, 1, 0, 0],
+      [1, 0, 0, 0],
+      [0, 0, 0, 1],
+      [0, 0, 1, 0]
+    ];
+    return dfs(graph, 3);
+  })().length === 2
+);
+```
+
+The input graph `[[0, 1, 0, 0], [1, 0, 0, 0], [0, 0, 0, 1], [0, 0, 1, 0]]` with a start node of `0` should return an array with `0` and `1`.
+
+```js
+assert.sameMembers(
+  (function () {
+    var graph = [
+      [0, 1, 0, 0],
+      [1, 0, 0, 0],
+      [0, 0, 0, 1],
+      [0, 0, 1, 0]
+    ];
+    return dfs(graph, 0);
+  })(),
+  [0, 1]
+);
+```
+
+The input graph `[[0, 1, 0, 0], [1, 0, 0, 0], [0, 0, 0, 1], [0, 0, 1, 0]]` with a start node of `0` should return an array with two elements.
+
+```js
+assert(
+  (function () {
+    var graph = [
+      [0, 1, 0, 0],
+      [1, 0, 0, 0],
+      [0, 0, 0, 1],
+      [0, 0, 1, 0]
+    ];
+    return dfs(graph, 0);
+  })().length === 2
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function dfs(graph, root) {
+
+}
+
+var exDFSGraph = [
+  [0, 1, 0, 0],
+  [1, 0, 1, 0],
+  [0, 1, 0, 1],
+  [0, 0, 1, 0]
+];
+console.log(dfs(exDFSGraph, 3));
+```
+
+# --solutions--
+
+```js
+function dfs(graph, root) {
+    var stack = [];
+    var tempV;
+    var visited = [];
+    var tempVNeighbors = [];
+    stack.push(root);
+    while (stack.length > 0) {
+        tempV = stack.pop();
+        if (visited.indexOf(tempV) == -1) {
+            visited.push(tempV);
+            tempVNeighbors = graph[tempV];
+            for (var i = 0; i < tempVNeighbors.length; i++) {
+                if (tempVNeighbors[i] == 1) {
+                    stack.push(i);
+                }
+            }
+        }
+    }
+    return visited;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/find-the-minimum-and-maximum-height-of-a-binary-search-tree.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/find-the-minimum-and-maximum-height-of-a-binary-search-tree.md
new file mode 100644
index 00000000000..eb71f5ea47f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/find-the-minimum-and-maximum-height-of-a-binary-search-tree.md
@@ -0,0 +1,346 @@
+---
+id: 587d8257367417b2b2512c7d
+title: Find the Minimum and Maximum Height of a Binary Search Tree
+challengeType: 1
+forumTopicId: 301641
+dashedName: find-the-minimum-and-maximum-height-of-a-binary-search-tree
+---
+
+# --description--
+
+In the last challenge we described a scenario in which a tree could become unbalanced. To understand the concept of balance, let's take a look at another tree property: height. Height in a tree represents the distance from the root node to any given leaf node. Different paths in a highly branched tree structure may have different heights, but for a given tree there will be a minimum and maximum height. If the tree is balanced, these values will differ at most by one. This means that in a balanced tree, all the leaf nodes exist within the same level, or if they are not within the same level they are at most one level apart.
+
+The property of balance is important for trees because it is what determines the efficiency of tree operations. As we explained in the last challenge, we face worst case time complexity for heavily unbalanced trees. Self-balancing trees are commonly used to account for this issue in trees with dynamic data sets. Common examples of these include AVL trees, red-black trees, and B-trees. These trees all contain additional internal logic which re-balance the tree when insertions or deletions create a state of imbalance.
+
+**Note:** A similar property to height is depth, which refers to how far a given node is from the root node.
+
+# --instructions--
+
+Write two methods for our binary tree: `findMinHeight` and `findMaxHeight`. These methods should return an integer value for the minimum and maximum height within a given binary tree, respectively. If the node is empty let's assign it a height of `-1` (that's the base case). Finally, add a third method `isBalanced` which returns `true` or `false` depending on whether the tree is balanced or not. You can use the first two methods you just wrote to determine this.
+
+# --hints--
+
+The `BinarySearchTree` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+The binary search tree should have a method called `findMinHeight`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.findMinHeight == 'function';
+  })()
+);
+```
+
+The binary search tree should have a method called `findMaxHeight`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.findMaxHeight == 'function';
+  })()
+);
+```
+
+The binary search tree should have a method called `isBalanced`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.isBalanced == 'function';
+  })()
+);
+```
+
+The `findMinHeight` method should return the minimum height of the tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.findMinHeight !== 'function') {
+      return false;
+    }
+    test.add(4);
+    test.add(1);
+    test.add(7);
+    test.add(87);
+    test.add(34);
+    test.add(45);
+    test.add(73);
+    test.add(8);
+    return test.findMinHeight() == 1;
+  })()
+);
+```
+
+The `findMaxHeight` method should return the maximum height of the tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.findMaxHeight !== 'function') {
+      return false;
+    }
+    test.add(4);
+    test.add(1);
+    test.add(7);
+    test.add(87);
+    test.add(34);
+    test.add(45);
+    test.add(73);
+    test.add(8);
+    return test.findMaxHeight() == 5;
+  })()
+);
+```
+
+An empty tree should return a height of `-1`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.findMaxHeight !== 'function') {
+      return false;
+    }
+    return test.findMaxHeight() == -1;
+  })()
+);
+```
+
+The `isBalanced` method should return `false` if the tree is an unbalanced binary search tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.isBalanced !== 'function') {
+      return false;
+    }
+    test.add(4);
+    test.add(1);
+    test.add(7);
+    test.add(87);
+    test.add(34);
+    test.add(45);
+    test.add(73);
+    test.add(8);
+    return test.isBalanced() === false;
+  })()
+);
+```
+
+The `isBalanced` method should return `true` if the tree is a balanced binary search tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.isBalanced !== 'function') {
+      return false;
+    }
+    test.add(10);
+    test.add(3);
+    test.add(22);
+    test.add(1);
+    test.add(4);
+    test.add(17);
+    test.add(32);
+    return test.isBalanced() === true;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+BinarySearchTree.prototype = Object.assign(
+  BinarySearchTree.prototype,
+  {
+    add: function(value) {
+      function searchTree(node) {
+        if (value < node.value) {
+          if (node.left == null) {
+            node.left = new Node(value);
+            return;
+          } else if (node.left != null) {
+            return searchTree(node.left);
+          }
+        } else if (value > node.value) {
+          if (node.right == null) {
+            node.right = new Node(value);
+            return;
+          } else if (node.right != null) {
+            return searchTree(node.right);
+          }
+        } else {
+          return null;
+        }
+      }
+
+      var node = this.root;
+      if (node == null) {
+        this.root = new Node(value);
+        return;
+      } else {
+        return searchTree(node);
+      }
+    }
+  }
+);
+```
+
+## --seed-contents--
+
+```js
+var displayTree = tree => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+var displayTree = tree => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+  // Only change code below this line
+
+  // Only change code above this line
+  this.findMinHeight = function(root = this.root) {
+    // empty tree.
+    if (root === null) {
+      return -1;
+    }
+    // leaf node.
+    if (root.left === null && root.right === null) {
+      return 0;
+    }
+    if (root.left === null) {
+      return this.findMinHeight(root.right) + 1;
+    }
+    if (root.right === null) {
+      return this.findMinHeight(root.left) + 1;
+    }
+    const lHeight = this.findMinHeight(root.left);
+    const rHeight = this.findMinHeight(root.right);
+    return Math.min(lHeight, rHeight) + 1;
+  };
+  this.findMaxHeight = function(root = this.root) {
+    // empty tree.
+    if (root === null) {
+      return -1;
+    }
+    // leaf node.
+    if (root.left === null && root.right === null) {
+      return 0;
+    }
+    if (root.left === null) {
+      return this.findMaxHeight(root.right) + 1;
+    }
+    if (root.right === null) {
+      return this.findMaxHeight(root.left) + 1;
+    }
+    const lHeight = this.findMaxHeight(root.left);
+    const rHeight = this.findMaxHeight(root.right);
+    return Math.max(lHeight, rHeight) + 1;
+  };
+  this.isBalanced = function(root = this.root) {
+    if (root === null) {
+      return true;
+    }
+
+    if (root.left === null && root.right === null) {
+      return true;
+    }
+
+    if (root.left === null) {
+      return this.findMaxHeight(root.right) <= 0;
+    }
+
+    if (root.right === null) {
+      return this.findMaxHeight(root.left) <= 0;
+    }
+
+    const lHeight = this.findMaxHeight(root.left);
+    const rHeight = this.findMaxHeight(root.right);
+    if (Math.abs(lHeight - rHeight) > 1) {
+      return false;
+    }
+    return this.isBalanced(root.left) && this.isBalanced(root.right);
+  };
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/find-the-minimum-and-maximum-value-in-a-binary-search-tree.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/find-the-minimum-and-maximum-value-in-a-binary-search-tree.md
new file mode 100644
index 00000000000..23077f9d938
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/find-the-minimum-and-maximum-value-in-a-binary-search-tree.md
@@ -0,0 +1,369 @@
+---
+id: 587d8256367417b2b2512c7a
+title: Find the Minimum and Maximum Value in a Binary Search Tree
+challengeType: 1
+forumTopicId: 301642
+dashedName: find-the-minimum-and-maximum-value-in-a-binary-search-tree
+---
+
+# --description--
+
+In this challenge you will define two methods, `findMin` and `findMax`. These methods should return the minimum and maximum value held in the binary search tree (don't worry about adding values to the tree for now, we have added some in the background). If you get stuck, reflect on the invariant that must be true for binary search trees: each left subtree is less than or equal to its parent and each right subtree is greater than or equal to its parent. Let's also say that our tree can only store integer values. If the tree is empty, either method should return `null`.
+
+# --hints--
+
+The `BinarySearchTree` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+The binary search tree should have a method called `findMin`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.findMin == 'function';
+  })()
+);
+```
+
+The binary search tree should have a method called `findMax`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.findMax == 'function';
+  })()
+);
+```
+
+The `findMin` method should return the minimum value in the binary search tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.findMin !== 'function') {
+      return false;
+    }
+    test.add(4);
+    test.add(1);
+    test.add(7);
+    test.add(87);
+    test.add(34);
+    test.add(45);
+    test.add(73);
+    test.add(8);
+    return test.findMin() == 1;
+  })()
+);
+```
+
+The `findMax` method should return the maximum value in the binary search tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.findMax !== 'function') {
+      return false;
+    }
+    test.add(4);
+    test.add(1);
+    test.add(7);
+    test.add(87);
+    test.add(34);
+    test.add(45);
+    test.add(73);
+    test.add(8);
+    return test.findMax() == 87;
+  })()
+);
+```
+
+The `findMin` and `findMax` methods should return `null` for an empty tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.findMin !== 'function') {
+      return false;
+    }
+    if (typeof test.findMax !== 'function') {
+      return false;
+    }
+    return test.findMin() == null && test.findMax() == null;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+BinarySearchTree.prototype = Object.assign(
+  BinarySearchTree.prototype,
+  {
+    add: function(value) {
+      function searchTree(node) {
+        if (value < node.value) {
+          if (node.left == null) {
+            node.left = new Node(value);
+            return;
+          } else if (node.left != null) {
+            return searchTree(node.left);
+          }
+        } else if (value > node.value) {
+          if (node.right == null) {
+            node.right = new Node(value);
+            return;
+          } else if (node.right != null) {
+            return searchTree(node.right);
+          }
+        } else {
+          return null;
+        }
+      }
+
+      var node = this.root;
+      if (node == null) {
+        this.root = new Node(value);
+        return;
+      } else {
+        return searchTree(node);
+      }
+    }
+  }
+);
+```
+
+## --seed-contents--
+
+```js
+var displayTree = tree => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+var displayTree = tree => console.log(JSON.stringify(tree, null, 2));
+
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+
+function BinarySearchTree() {
+  this.root = null;
+  this.findMin = function() {
+    // Empty tree.
+    if (!this.root) {
+      return null;
+    }
+    let currentNode = this.root;
+    while (currentNode.left) {
+      currentNode = currentNode.left;
+    }
+    return currentNode.value;
+  };
+  this.findMax = function() {
+    // Empty tree.
+    if (!this.root) {
+      return null;
+    }
+    let currentNode = this.root;
+    while (currentNode.right) {
+      currentNode = currentNode.right;
+    }
+    return currentNode.value;
+  };
+  this.add = function(value) {
+    // Empty tree.
+    if (!this.root) {
+      this.root = new Node(value);
+      return undefined;
+    }
+    return this.addNode(this.root, value);
+  };
+  this.addNode = function(node, value) {
+    // Check if value already exists.
+    if (node.value === value) return null;
+    if (value < node.value) {
+      if (node.left) {
+        return this.addNode(node.left, value);
+      } else {
+        node.left = new Node(value);
+        return undefined;
+      }
+    } else {
+      if (node.right) {
+        return this.addNode(node.right, value);
+      } else {
+        node.right = new Node(value);
+        return undefined;
+      }
+    }
+  };
+  this.isPresent = function(value) {
+    if (!this.root) {
+      return null;
+    }
+    return this.isNodePresent(this.root, value);
+  };
+  this.isNodePresent = function(node, value) {
+    if (node.value === value) return true;
+    if (value < node.value) {
+      return node.left ? this.isNodePresent(node.left, value) : false;
+    } else {
+      return node.right ? this.isNodePresent(node.right, value) : false;
+    }
+    return false;
+  };
+  this.findMinHeight = function() {
+    if (!this.root) {
+      return -1;
+    }
+    let heights = {};
+    let height = 0;
+    this.traverseTree(this.root, height, heights);
+    return Math.min(...Object.keys(heights));
+  };
+  this.findMaxHeight = function() {
+    if (!this.root) {
+      return -1;
+    }
+    let heights = {};
+    let height = 0;
+    this.traverseTree(this.root, height, heights);
+    return Math.max(...Object.keys(heights));
+  };
+  this.traverseTree = function(node, height, heights) {
+    if (node.left === null && node.right === null) {
+      return (heights[height] = true);
+    }
+    if (node.left) {
+      this.traverseTree(node.left, height + 1, heights);
+    }
+    if (node.right) {
+      this.traverseTree(node.right, height + 1, heights);
+    }
+  };
+  this.isBalanced = function() {
+    return this.findMaxHeight() > this.findMinHeight() + 1;
+  };
+  // DFS tree traversal.
+  this.inorder = function() {
+    if (!this.root) return null;
+    let result = [];
+
+    function traverseInOrder(node) {
+      if (node.left) traverseInOrder(node.left);
+      result.push(node.value);
+      if (node.right) traverseInOrder(node.right);
+    }
+    traverseInOrder(this.root);
+    return result;
+  };
+  this.preorder = function() {
+    if (!this.root) return null;
+    let result = [];
+
+    function traverseInOrder(node) {
+      result.push(node.value);
+      if (node.left) traverseInOrder(node.left);
+      if (node.right) traverseInOrder(node.right);
+    }
+    traverseInOrder(this.root);
+    return result;
+  };
+  this.postorder = function() {
+    if (!this.root) return null;
+    let result = [];
+
+    function traverseInOrder(node) {
+      if (node.left) traverseInOrder(node.left);
+      if (node.right) traverseInOrder(node.right);
+      result.push(node.value);
+    }
+    traverseInOrder(this.root);
+    return result;
+  };
+  // BFS tree traversal.
+  this.levelOrder = function() {
+    if (!this.root) return null;
+    let queue = [this.root];
+    let result = [];
+    while (queue.length) {
+      let node = queue.shift();
+      result.push(node.value);
+      if (node.left) queue.push(node.left);
+      if (node.right) queue.push(node.right);
+    }
+    return result;
+  };
+  this.reverseLevelOrder = function() {
+    if (!this.root) return null;
+    let queue = [this.root];
+    let result = [];
+    while (queue.length) {
+      let node = queue.shift();
+      result.push(node.value);
+      if (node.right) queue.push(node.right);
+      if (node.left) queue.push(node.left);
+    }
+    return result;
+  };
+  // Delete a leaf node.
+}
+let bst = new BinarySearchTree();
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/implement-heap-sort-with-a-min-heap.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/implement-heap-sort-with-a-min-heap.md
new file mode 100644
index 00000000000..efc98e7be70
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/implement-heap-sort-with-a-min-heap.md
@@ -0,0 +1,144 @@
+---
+id: 587d825b367417b2b2512c8c
+title: Implement Heap Sort with a Min Heap
+challengeType: 1
+forumTopicId: 301643
+dashedName: implement-heap-sort-with-a-min-heap
+---
+
+# --description--
+
+Now that we can add and remove elements let's see some of the applications heaps can be used for. Heaps are commonly used to implement priority queues because they always store an item of greatest or least value in first position. In addition, they are used to implement a sorting algorithm called heap sort. We'll see how to do this here. Heap sort uses a min heap, the reverse of a max heap. A min heap always stores the element of least value in the root position.
+
+Heap sort works by taking an unsorted array, adding each item in the array into a min heap, and then extracting every item out of the min heap into a new array. The min heap structure ensures that the new array will contain the original items in least to greatest order. This is one of the most efficient sorting algorithms with average and worst case performance of O(nlog(n)).
+
+# --instructions--
+
+Let's implement heap sort with a min heap. Feel free to adapt your max heap code here. Create an object `MinHeap` with `insert`, `remove`, and `sort` methods. The `sort` method should return an array of all the elements in the min heap sorted from smallest to largest.
+
+# --hints--
+
+The `MinHeap` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof MinHeap !== 'undefined') {
+      test = new MinHeap();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+`MinHeap` should have a method called `insert`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof MinHeap !== 'undefined') {
+      test = new MinHeap();
+    } else {
+      return false;
+    }
+    return typeof test.insert == 'function';
+  })()
+);
+```
+
+`MinHeap` should have a method called `remove`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof MinHeap !== 'undefined') {
+      test = new MinHeap();
+    } else {
+      return false;
+    }
+    return typeof test.remove == 'function';
+  })()
+);
+```
+
+`MinHeap` should have a method called `sort`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof MinHeap !== 'undefined') {
+      test = new MinHeap();
+    } else {
+      return false;
+    }
+    return typeof test.sort == 'function';
+  })()
+);
+```
+
+The `sort` method should return an array containing all items added to the min heap in sorted order.
+
+```js
+assert(
+  (() => {
+    if (typeof MinHeap === 'undefined') {
+      return false;
+    }
+
+    const heap = new MinHeap();
+    const arr = createRandomArray(25);
+
+    for (let i of arr) {
+      heap.insert(i);
+    }
+
+    const result = heap.sort();
+    arr.sort((a, b) => a - b);
+
+    for (let i = 0; i < arr.length; i++) {
+      if (arr[i] !== result[i]) {
+        return false;
+      }
+    }
+    return true;
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function isSorted(a){
+  for(let i = 0; i < a.length - 1; i++)
+    if(a[i] > a[i + 1])
+      return false;
+  return true;
+}
+// Generate a randomly filled array
+function createRandomArray(size = 5){
+  let a = new Array(size);
+  for(let i = 0; i < size; i++)
+    a[i] = Math.floor(Math.random() * 100);
+
+  return a;
+}
+const array = createRandomArray(25);
+
+var MinHeap = function() {
+  // Only change code below this line
+
+  // Only change code above this line
+};
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/incidence-matrix.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/incidence-matrix.md
new file mode 100644
index 00000000000..5b5e174b7b0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/incidence-matrix.md
@@ -0,0 +1,110 @@
+---
+id: 587d8256367417b2b2512c79
+title: Incidence Matrix
+challengeType: 1
+forumTopicId: 301644
+dashedName: incidence-matrix
+---
+
+# --description--
+
+Yet another way to represent a graph is to put it in an <dfn>incidence matrix.</dfn>
+
+An <dfn>incidence matrix</dfn> is a two-dimensional (2D) array. Generally speaking, an incidence matrix relates two different classes of objects between its two dimensions. This kind of matrix is similar to an adjacency matrix. However, the rows and columns mean something else here.
+
+In graphs, we have edges and nodes. These will be our "two different classes of objects". This matrix will have the rows be the nodes and columns be the edges. This means that we can have an uneven number of rows and columns.
+
+Each column will represent a unique edge. Also, each edge connects two nodes. To show that there is an edge between two nodes, you will put a 1 in the two rows of a particular column. Below is a 3 node graph with one edge between node 1 and node 3.
+
+<blockquote>    1<br>   ---<br>1 | 1<br>2 | 0<br>3 | 1</blockquote>
+
+Here is an example of an incidence matrix with 4 edges and 4 nodes. Remember, the columns are the edges and rows are the nodes themselves.
+
+<blockquote>    1 2 3 4<br>   --------<br>1 | 0 1 1 1<br>2 | 1 1 0 0<br>3 | 1 0 0 1<br>4 | 0 0 1 0</blockquote>
+
+Below is a JavaScript implementation of the same thing.
+
+```js
+var incMat = [
+  [0, 1, 1, 1],
+  [1, 1, 0, 0],
+  [1, 0, 0, 1],
+  [0, 0, 1, 0]
+];
+```
+
+To make a directed graph, use `-1` for an edge leaving a particular node and `1` for an edge entering a node.
+
+```js
+var incMatDirected = [
+  [ 0, -1,  1, -1],
+  [-1,  1,  0,  0],
+  [ 1,  0,  0,  1],
+  [ 0,  0, -1,  0]
+];
+```
+
+Graphs can also have <dfn>weights</dfn> on their edges. So far, we have <dfn>unweighted</dfn> edges where just the presence and lack of edge is binary (`0` or `1`). You can have different weights depending on your application. A different weight is represented as numbers greater than 1.
+
+# --instructions--
+
+Create an incidence matrix of an undirected graph with five nodes and four edges. This matrix should be in a multi-dimensional array.
+
+These five nodes have the following relationships. The first edge is between the first and second node. The second edge is between the second and third node. The third edge is between the third and fifth node. The fourth edge is between the fourth and second node. All edge weights are one and the edge order matters.
+
+# --hints--
+
+`incMatUndirected` should only contain five nodes.
+
+```js
+assert(
+  incMatUndirected.length === 5 &&
+    incMatUndirected
+      .map(function (x) {
+        return x.length === 4;
+      })
+      .reduce(function (a, b) {
+        return a && b;
+      })
+);
+```
+
+There should be a first edge between the first and second node.
+
+```js
+assert(incMatUndirected[0][0] === 1 && incMatUndirected[1][0] === 1);
+```
+
+There should be a second edge between the second and third node.
+
+```js
+assert(incMatUndirected[1][1] === 1 && incMatUndirected[2][1] === 1);
+```
+
+There should be a third edge between the third and fifth node.
+
+```js
+assert(incMatUndirected[2][2] === 1 && incMatUndirected[4][2] === 1);
+```
+
+There should be a fourth edge between the second and fourth node.
+
+```js
+assert(incMatUndirected[1][3] === 1 && incMatUndirected[3][3] === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+var incMatUndirected = [
+
+];
+```
+
+# --solutions--
+
+```js
+var incMatUndirected = [[1, 0, 0, 0],[1, 1, 0, 1],[0, 1, 1, 0],[0, 0, 0, 1],[0, 0, 1, 0]];
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/insert-an-element-into-a-max-heap.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/insert-an-element-into-a-max-heap.md
new file mode 100644
index 00000000000..3528a99be9a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/insert-an-element-into-a-max-heap.md
@@ -0,0 +1,165 @@
+---
+id: 587d825a367417b2b2512c8a
+title: Insert an Element into a Max Heap
+challengeType: 1
+forumTopicId: 301703
+dashedName: insert-an-element-into-a-max-heap
+---
+
+# --description--
+
+Now we will move on to another tree data structure, the binary heap. A binary heap is a partially ordered binary tree which satisfies the heap property. The heap property specifies a relationship between parent and child nodes. You may have a max heap, in which all parent nodes are greater than or equal to their child nodes, or a min heap, in which the reverse is true. Binary heaps are also complete binary trees. This means that all levels of the tree are fully filled and if the last level is partially filled it is filled from left to right.
+
+While binary heaps may be implemented as tree structures with nodes that contain left and right references, the partial ordering according to the heap property allows us to represent the heap with an array. The parent-children relationship is what we're interested in and with simple arithmetic we can compute the children of any parent and the parent of any child node.
+
+For instance, consider this array representation of a binary min heap:
+
+```js
+[ 6, 22, 30, 37, 63, 48, 42, 76 ]
+```
+
+The root node is the first element, `6`. Its children are `22` and `30`. If we look at the relationship between the array indices of these values, for index `i` the children are `2 * i + 1` and `2 * i + 2`. Similarly, the element at index `0` is the parent of these two children at indices `1` and `2`. More generally, we can find the parent of a node at any index with the following: `Math.floor((i - 1) / 2)`. These patterns will hold true as the binary tree grows to any size. Finally, we can make a slight adjustment to make this arithmetic even easier by skipping the first element in the array. Doing this creates the following relationship for any element at a given index `i`:
+
+Example array representation:
+
+```js
+[ null, 6, 22, 30, 37, 63, 48, 42, 76 ]
+```
+
+An element's left child: `i * 2`
+
+An element's right child: `i * 2 + 1`
+
+An element's parent: `Math.floor(i / 2)`
+
+Once you wrap your head around the math, using an array representation is very useful because node locations can be quickly determined with this arithmetic and memory usage is diminished because you don't need to maintain references to child nodes.
+
+# --instructions--
+
+Instructions: Here we will create a max heap. Start by just creating an `insert` method which adds elements to our heap. During insertion, it is important to always maintain the heap property. For a max heap this means the root element should always have the greatest value in the tree and all parent nodes should be greater than their children. For an array implementation of a heap, this is typically accomplished in three steps:
+
+<ol>
+  <li>Add the new element to the end of the array.</li>
+  <li>If the element is larger than its parent, switch them.</li>
+  <li>Continue switching until the new element is either smaller than its parent or you reach the root of the tree.</li>
+</ol>
+
+Finally, add a `print` method which returns an array of all the items that have been added to the heap.
+
+# --hints--
+
+The `MaxHeap` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof MaxHeap !== 'undefined') {
+      test = new MaxHeap();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+`MaxHeap` should have a method called `insert`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof MaxHeap !== 'undefined') {
+      test = new MaxHeap();
+    } else {
+      return false;
+    }
+    return typeof test.insert == 'function';
+  })()
+);
+```
+
+`MaxHeap` should have a method called `print`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof MaxHeap !== 'undefined') {
+      test = new MaxHeap();
+    } else {
+      return false;
+    }
+    return typeof test.print == 'function';
+  })()
+);
+```
+
+The `insert` method should add elements according to the max heap property.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof MaxHeap !== 'undefined') {
+      test = new MaxHeap();
+    } else {
+      return false;
+    }
+    test.insert(50);
+    test.insert(100);
+    test.insert(700);
+    test.insert(32);
+    test.insert(51);
+    test.insert(800);
+    const result = test.print();
+    const solution = JSON.stringify([null,800,51,700,32,50,100]);
+    const solutionWithoutNull = JSON.stringify([800,51,700,32,50,100]);
+
+    return (result.length == 6) ? (JSON.stringify(result) == solutionWithoutNull) : (JSON.stringify(result) == solution);
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+var MaxHeap = function() {
+  // Only change code below this line
+
+  // Only change code above this line
+};
+```
+
+# --solutions--
+
+```js
+var MaxHeap = function() {
+    // Only change code below this line
+    this.heap = [];
+    this.parent = index => {
+      return Math.floor((index - 1) / 2);
+    }
+    this.insert = element => {
+      this.heap.push(element);
+      this.heapifyUp(this.heap.length - 1);
+    }
+    this.heapifyUp = index => {
+      let currentIndex = index,
+      parentIndex = this.parent(currentIndex);
+      while (currentIndex > 0 && this.heap[currentIndex] > this.heap[parentIndex]) {
+        this.swap(currentIndex, parentIndex);
+        currentIndex = parentIndex;
+        parentIndex = this.parent(parentIndex);
+      }
+    }
+    this.swap = (index1, index2) => {
+      [this.heap[index1], this.heap[index2]] = [this.heap[index2], this.heap[index1]];
+    }
+    this.print = () => {
+      return this.heap;
+    }
+    // Only change code above this line
+};
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/invert-a-binary-tree.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/invert-a-binary-tree.md
new file mode 100644
index 00000000000..8be38b0d5d8
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/invert-a-binary-tree.md
@@ -0,0 +1,192 @@
+---
+id: 587d8259367417b2b2512c83
+title: Invert a Binary Tree
+challengeType: 1
+forumTopicId: 301704
+dashedName: invert-a-binary-tree
+---
+
+# --description--
+
+Here will we create a function to invert a binary tree. Given a binary tree, we want to produce a new tree that is equivalently the mirror image of this tree. Running an inorder traversal on an inverted tree will explore the nodes in reverse order when compared to the inorder traversal of the original tree. Write a method to do this called `invert` on our binary tree. Calling this method should invert the current tree structure. Ideally, we would like to do this in-place in linear time. That is, we only visit each node once and we modify the existing tree structure as we go, without using any additional memory. Good luck!
+
+# --hints--
+
+The `BinarySearchTree` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+The binary search tree should have a method called `invert`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.invert == 'function';
+  })()
+);
+```
+
+The `invert` method should correctly invert the tree structure.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.invert !== 'function') {
+      return false;
+    }
+    test.add(4);
+    test.add(1);
+    test.add(7);
+    test.add(87);
+    test.add(34);
+    test.add(45);
+    test.add(73);
+    test.add(8);
+    test.invert();
+    return test.inorder().join('') == '877345348741';
+  })()
+);
+```
+
+Inverting an empty tree should return `null`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.invert !== 'function') {
+      return false;
+    }
+    return test.invert() == null;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+BinarySearchTree.prototype = Object.assign(
+  BinarySearchTree.prototype,
+  {
+    add: function(value) {
+      function searchTree(node) {
+        if (value < node.value) {
+          if (node.left == null) {
+            node.left = new Node(value);
+            return;
+          } else if (node.left != null) {
+            return searchTree(node.left)
+          };
+        } else if (value > node.value) {
+          if (node.right == null) {
+            node.right = new Node(value);
+            return;
+          } else if (node.right != null) {
+            return searchTree(node.right);
+          };
+        } else {
+          return null;
+        };
+      }
+
+      var node = this.root;
+      if (node == null) {
+        this.root = new Node(value);
+        return;
+      } else {
+        return searchTree(node);
+      };
+    },
+    inorder: function() {
+      if (this.root == null) {
+        return null;
+      } else {
+        var result = new Array();
+        function traverseInOrder(node) {
+          if (node.left != null) {
+            traverseInOrder(node.left);
+          };
+          result.push(node.value);
+          if (node.right != null) {
+            traverseInOrder(node.right);
+          };
+        }
+        traverseInOrder(this.root);
+        return result;
+      };
+    }
+  }
+);
+```
+
+## --seed-contents--
+
+```js
+var displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+var displayTree = (tree) => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+  // Only change code below this line
+  this.invert = function(node = this.root) {
+    if (node) {
+      const temp = node.left;
+      node.left = node.right;
+      node.right = temp;
+      this.invert(node.left);
+      this.invert(node.right);
+    }
+    return node;
+  }
+    // Only change code above this line
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/learn-how-a-stack-works.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/learn-how-a-stack-works.md
new file mode 100644
index 00000000000..19ea0d3c265
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/learn-how-a-stack-works.md
@@ -0,0 +1,71 @@
+---
+id: 587d8250367417b2b2512c5e
+title: Learn how a Stack Works
+challengeType: 1
+forumTopicId: 301705
+dashedName: learn-how-a-stack-works
+---
+
+# --description--
+
+You are probably familiar with stack of books on your table. You have likely used the undo feature of a text editor. You are also probably used to hitting the back button on your phone to go back to the previous view in your app.
+
+You know what they all have in common? They all store the data in a way so that you can traverse backwards.
+
+The topmost book in the stack was the one that was put there last. If you remove that book from your stack's top, you would expose the book that was put there before the last book and so on.
+
+If you think about it, in all the above examples, you are getting <dfn>Last-In-First-Out</dfn> type of service. We will try to mimic this with our code.
+
+This data storage scheme is called a <dfn>Stack</dfn>. In particular, we would have to implement the `push()` method that pushes JavaScript objects at the top of the stack; and `pop()` method, that removes the JavaScript object that's at the top of the stack at the current moment.
+
+# --instructions--
+
+Here we have a stack of homework assignments represented as an array: `"BIO12"` is at the base, and `"PSY44"` is at the top of the stack.
+
+Modify the given array and treat it like a `stack` using the JavaScript methods mentioned above. Remove the top element `"PSY44"` from the stack. Then add `"CS50"` to be the new top element of the stack.
+
+# --hints--
+
+`homeworkStack` should only contain 4 elements.
+
+```js
+assert(homeworkStack.length === 4);
+```
+
+The last element in `homeworkStack` should be `"CS50"`.
+
+```js
+assert(homeworkStack[3] === 'CS50');
+```
+
+`homeworkStack` should not contain `"PSY44"`.
+
+```js
+assert(homeworkStack.indexOf('PSY44') === -1);
+```
+
+The initial declaration of the `homeworkStack` should not be changed.
+
+```js
+assert(
+  code.match(/=/g).length === 1 &&
+    /homeworkStack\s*=\s*\["BIO12"\s*,\s*"HIS80"\s*,\s*"MAT122"\s*,\s*"PSY44"\]/.test(
+      code
+    )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+var homeworkStack = ["BIO12","HIS80","MAT122","PSY44"];
+// Only change code below this line
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-a-difference-on-two-sets-of-data.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-a-difference-on-two-sets-of-data.md
new file mode 100644
index 00000000000..1c793291283
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-a-difference-on-two-sets-of-data.md
@@ -0,0 +1,219 @@
+---
+id: 587d8254367417b2b2512c6e
+title: Perform a Difference on Two Sets of Data
+challengeType: 1
+forumTopicId: 301706
+dashedName: perform-a-difference-on-two-sets-of-data
+---
+
+# --description--
+
+In this exercise we are going to perform a difference on 2 sets of data. We will create a method on our `Set` data structure called `difference`. A difference of sets should compare two sets and return the items present in the first set that are absent in the second. This method should take another `Set` as an argument and return the `difference` of the two sets.
+
+For example, if `setA = ['a','b','c']` and `setB = ['a','b','d','e']`, then the difference of setA and setB is: `setA.difference(setB) = ['c']`.
+
+# --hints--
+
+Your `Set` class should have a `difference` method.
+
+```js
+assert(
+  (function () {
+    var test = new Set();
+    return typeof test.difference === 'function';
+  })()
+);
+```
+
+Your `difference` method should return the proper collection.
+
+```js
+assert(
+  (function () {
+    var setA = new Set();
+    var setB = new Set();
+    setA.add('a');
+    setA.add('b');
+    setA.add('c');
+    setB.add('c');
+    setB.add('d');
+    var differenceSetAB = setA.difference(setB);
+    return (
+      differenceSetAB.size() === 2 &&
+      DeepEqual(differenceSetAB.values(), ['a', 'b'])
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+class Set {
+  constructor() {
+    // This will hold the set
+    this.dictionary = {};
+    this.length = 0;
+  }
+  // This method will check for the presence of an element and return true or false
+  has(element) {
+    return this.dictionary[element] !== undefined;
+  }
+  // This method will return all the values in the set
+  values() {
+    return Object.keys(this.dictionary);
+  }
+  // This method will add an element to the set
+  add(element) {
+    if (!this.has(element)) {
+      this.dictionary[element] = true;
+      this.length++;
+      return true;
+    }
+
+    return false;
+  }
+  // This method will remove an element from a set
+  remove(element) {
+    if (this.has(element)) {
+      delete this.dictionary[element];
+      this.length--;
+      return true;
+    }
+
+    return false;
+  }
+  // This method will return the size of the set
+  size() {
+    return this.length;
+  }
+  // This is our union method 
+  union(set) {
+    const newSet = new Set();
+    this.values().forEach(value => {
+      newSet.add(value);
+    })
+    set.values().forEach(value => {
+      newSet.add(value);
+    })
+
+    return newSet;
+  }
+  // This is our intersection method
+  intersection(set) {
+    const newSet = new Set();
+
+    let largeSet;
+    let smallSet;
+    if (this.dictionary.length > set.length) {
+      largeSet = this;
+      smallSet = set;
+    } else {
+      largeSet = set;
+      smallSet = this;
+    }
+
+    smallSet.values().forEach(value => {
+      if (largeSet.dictionary[value]) {
+        newSet.add(value);
+      }
+    })
+
+    return newSet;
+  }
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+class Set {
+  constructor() {
+    this.dictionary = {};
+    this.length = 0;
+  }
+
+  has(element) {
+    return this.dictionary[element] !== undefined;
+  }
+
+  values() {
+    return Object.keys(this.dictionary);
+  }
+
+  add(element) {
+    if (!this.has(element)) {
+      this.dictionary[element] = true;
+      this.length++;
+      return true;
+    }
+
+    return false;
+  }
+
+  remove(element) {
+    if (this.has(element)) {
+      delete this.dictionary[element];
+      this.length--;
+      return true;
+    }
+
+    return false;
+  }
+
+  size() {
+    return this.length;
+  }
+
+  union(set) {
+    const newSet = new Set();
+    this.values().forEach(value => {
+      newSet.add(value);
+    })
+    set.values().forEach(value => {
+      newSet.add(value);
+    })
+
+    return newSet;
+  }
+
+  intersection(set) {
+    const newSet = new Set();
+
+    let largeSet;
+    let smallSet;
+    if (this.dictionary.length > set.length) {
+      largeSet = this;
+      smallSet = set;
+    } else {
+      largeSet = set;
+      smallSet = this;
+    }
+
+    smallSet.values().forEach(value => {
+      if (largeSet.dictionary[value]) {
+        newSet.add(value);
+      }
+    })
+
+    return newSet;
+  }
+
+  difference(set) {
+    const newSet = new Set();
+
+    this.values().forEach(value => {
+      if (!set.dictionary[value]) {
+        newSet.add(value);
+      }
+    })
+
+    return newSet;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-a-subset-check-on-two-sets-of-data.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-a-subset-check-on-two-sets-of-data.md
new file mode 100644
index 00000000000..3c099ab1d33
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-a-subset-check-on-two-sets-of-data.md
@@ -0,0 +1,302 @@
+---
+id: 587d8254367417b2b2512c6f
+title: Perform a Subset Check on Two Sets of Data
+challengeType: 1
+forumTopicId: 301707
+dashedName: perform-a-subset-check-on-two-sets-of-data
+---
+
+# --description--
+
+In this exercise, we are going to perform a subset test on 2 sets of data. We will create a method on our `Set` data structure called `isSubsetOf`. This will compare the first set against the second, and if the first set is fully contained within the second, it will return `true`.
+
+For example, if `setA = ['a','b']` and `setB = ['a','b','c','d']`, then `setA` is a subset of `setB`, so `setA.isSubsetOf(setB)` should return `true`.
+
+# --hints--
+
+Your `Set` class should have a `isSubsetOf` method.
+
+```js
+assert(
+  (function () {
+    var test = new Set();
+    return typeof test.isSubsetOf === 'function';
+  })()
+);
+```
+
+The first `Set` should be contained in the second `Set`.
+
+```js
+assert(
+  (function () {
+    var setA = new Set();
+    var setB = new Set();
+    setA.add('a');
+    setB.add('b');
+    setB.add('c');
+    setB.add('a');
+    setB.add('d');
+    var aIsSubsetOfB = setA.isSubsetOf(setB);
+    return aIsSubsetOfB === true;
+  })()
+);
+```
+
+`['a', 'b'].isSubsetOf(['a', 'b', 'c', 'd'])` should return `true`.
+
+```js
+assert(
+  (function () {
+    var setA = new Set();
+    var setB = new Set();
+    setA.add('a');
+    setA.add('b');
+    setB.add('a');
+    setB.add('b');
+    setB.add('c');
+    setB.add('d');
+    var aIsSubsetOfB = setA.isSubsetOf(setB);
+    return aIsSubsetOfB === true;
+  })()
+);
+```
+
+`['a', 'b', 'c'].isSubsetOf(['a', 'b'])` should return `false`.
+
+```js
+assert(
+  (function () {
+    var setA = new Set();
+    var setB = new Set();
+    setA.add('a');
+    setA.add('b');
+    setA.add('c');
+    setB.add('a');
+    setB.add('b');
+    var aIsSubsetOfB = setA.isSubsetOf(setB);
+    return aIsSubsetOfB === false;
+  })()
+);
+```
+
+`[].isSubsetOf([])` should return `true`.
+
+```js
+assert(
+  (function () {
+    var setA = new Set();
+    var setB = new Set();
+    var aIsSubsetOfB = setA.isSubsetOf(setB);
+    return aIsSubsetOfB === true;
+  })()
+);
+```
+
+`['a', 'b'].isSubsetOf(['c', 'd'])` should return `false`.
+
+```js
+assert(
+  (function () {
+    var setA = new Set();
+    var setB = new Set();
+    setA.add('a');
+    setA.add('b');
+    setB.add('c');
+    setB.add('d');
+    var aIsSubsetOfB = setA.isSubsetOf(setB);
+    return aIsSubsetOfB === false;
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+class Set {
+  constructor() {
+    // This will hold the set
+    this.dictionary = {};
+    this.length = 0;
+  }
+  // This method will check for the presence of an element and return true or false
+  has(element) {
+    return this.dictionary[element] !== undefined;
+  }
+  // This method will return all the values in the set
+  values() {
+    return Object.keys(this.dictionary);
+  }
+  // This method will add an element to the set
+  add(element) {
+    if (!this.has(element)) {
+      this.dictionary[element] = true;
+      this.length++;
+      return true;
+    }
+
+    return false;
+  }
+  // This method will remove an element from a set
+  remove(element) {
+    if (this.has(element)) {
+      delete this.dictionary[element];
+      this.length--;
+      return true;
+    }
+
+    return false;
+  }
+  // This method will return the size of the set
+  size() {
+    return this.length;
+  }
+  // This is our union method 
+  union(set) {
+    const newSet = new Set();
+    this.values().forEach(value => {
+      newSet.add(value);
+    })
+    set.values().forEach(value => {
+      newSet.add(value);
+    })
+
+    return newSet;
+  }
+  // This is our intersection method
+  intersection(set) {
+    const newSet = new Set();
+
+    let largeSet;
+    let smallSet;
+    if (this.dictionary.length > set.length) {
+      largeSet = this;
+      smallSet = set;
+    } else {
+      largeSet = set;
+      smallSet = this;
+    }
+
+    smallSet.values().forEach(value => {
+      if (largeSet.dictionary[value]) {
+        newSet.add(value);
+      }
+    })
+
+    return newSet;
+  }
+
+  difference(set) {
+    const newSet = new Set();
+
+    this.values().forEach(value => {
+      if (!set.dictionary[value]) {
+        newSet.add(value);
+      }
+    })
+
+    return newSet;
+  }
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+class Set {
+  constructor() {
+    this.dictionary = {};
+    this.length = 0;
+  }
+
+  has(element) {
+    return this.dictionary[element] !== undefined;
+  }
+
+  values() {
+    return Object.keys(this.dictionary);
+  }
+
+  add(element) {
+    if (!this.has(element)) {
+      this.dictionary[element] = true;
+      this.length++;
+      return true;
+    }
+
+    return false;
+  }
+
+  remove(element) {
+    if (this.has(element)) {
+      delete this.dictionary[element];
+      this.length--;
+      return true;
+    }
+
+    return false;
+  }
+
+  size() {
+    return this.length;
+  }
+
+  union(set) {
+    const newSet = new Set();
+    this.values().forEach(value => {
+      newSet.add(value);
+    })
+    set.values().forEach(value => {
+      newSet.add(value);
+    })
+
+    return newSet;
+  }
+
+  intersection(set) {
+    const newSet = new Set();
+
+    let largeSet;
+    let smallSet;
+    if (this.dictionary.length > set.length) {
+      largeSet = this;
+      smallSet = set;
+    } else {
+      largeSet = set;
+      smallSet = this;
+    }
+
+    smallSet.values().forEach(value => {
+      if (largeSet.dictionary[value]) {
+        newSet.add(value);
+      }
+    })
+
+    return newSet;
+  }  
+
+  difference(set) {
+    const newSet = new Set();
+
+    this.values().forEach(value => {
+      if (!set.dictionary[value]) {
+        newSet.add(value);
+      }
+    })
+
+    return newSet;
+  }
+
+  isSubsetOf(set) {
+    for(const value of this.values()){
+      if(!set.dictionary[value]) return false;
+    }
+    return true
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-a-union-on-two-sets.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-a-union-on-two-sets.md
new file mode 100644
index 00000000000..3c5455892a6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-a-union-on-two-sets.md
@@ -0,0 +1,155 @@
+---
+id: 587d8253367417b2b2512c6c
+title: Perform a Union on Two Sets
+challengeType: 1
+forumTopicId: 301708
+dashedName: perform-a-union-on-two-sets
+---
+
+# --description--
+
+In this exercise we are going to perform a union on two sets of data. We will create a method on our `Set` data structure called `union`. This method should take another `Set` as an argument and return the `union` of the two sets, excluding any duplicate values.
+
+For example, if `setA = ['a','b','c']` and `setB = ['a','b','d','e']`, then the union of setA and setB is: `setA.union(setB) = ['a', 'b', 'c', 'd', 'e']`.
+
+# --hints--
+
+Your `Set` class should have a `union` method.
+
+```js
+assert(
+  (function () {
+    var test = new Set();
+    return typeof test.union === 'function';
+  })()
+);
+```
+
+The union of a `Set` containing values `["a", "b", "c"]` and a `Set` containing values `["c", "d"]` should return a new `Set` containing values `["a", "b", "c", "d"]`.
+
+```js
+assert(
+  (function () {
+    var setA = new Set();
+    var setB = new Set();
+    setA.add('a');
+    setA.add('b');
+    setA.add('c');
+    setB.add('c');
+    setB.add('d');
+    var unionSetAB = setA.union(setB);
+    var final = unionSetAB.values();
+    return (
+      final.indexOf('a') !== -1 &&
+      final.indexOf('b') !== -1 &&
+      final.indexOf('c') !== -1 &&
+      final.indexOf('d') !== -1 &&
+      final.length === 4
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+class Set {
+  constructor() {
+    // This will hold the set
+    this.dictionary = {};
+    this.length = 0;
+  }
+  // This method will check for the presence of an element and return true or false
+  has(element) {
+    return this.dictionary[element] !== undefined;
+  }
+  // This method will return all the values in the set
+  values() {
+    return Object.values(this.dictionary);
+  }
+  // This method will add an element to the set
+  add(element) {
+    if (!this.has(element)) {
+      this.dictionary[element] = element;
+      this.length++;
+      return true;
+    }
+
+    return false;
+  }
+  // This method will remove an element from a set
+  remove(element) {
+    if (this.has(element)) {
+      delete this.dictionary[element];
+      this.length--;
+      return true;
+    }
+
+    return false;
+  }
+  // This method will return the size of the set
+  size() {
+    return this.length;
+  }
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+class Set {
+  constructor() {
+    this.dictionary = {};
+    this.length = 0;
+  }
+
+  has(element) {
+    return this.dictionary[element] !== undefined;
+  }
+
+  values() {
+    return Object.values(this.dictionary);
+  }
+
+  add(element) {
+    if (!this.has(element)) {
+      this.dictionary[element] = element;
+      this.length++;
+      return true;
+    }
+
+    return false;
+  }
+
+  remove(element) {
+    if (this.has(element)) {
+      delete this.dictionary[element];
+      this.length--;
+      return true;
+    }
+
+    return false;
+  }
+
+  size() {
+    return this.length;
+  }
+
+  union(set) {
+    const newSet = new Set();
+    this.values().forEach(value => {
+      newSet.add(value);
+    })
+    set.values().forEach(value => {
+      newSet.add(value);
+    })
+
+    return newSet;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-an-intersection-on-two-sets-of-data.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-an-intersection-on-two-sets-of-data.md
new file mode 100644
index 00000000000..a108cb3b4ee
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/perform-an-intersection-on-two-sets-of-data.md
@@ -0,0 +1,184 @@
+---
+id: 587d8253367417b2b2512c6d
+title: Perform an Intersection on Two Sets of Data
+challengeType: 1
+forumTopicId: 301709
+dashedName: perform-an-intersection-on-two-sets-of-data
+---
+
+# --description--
+
+In this exercise we are going to perform an intersection on 2 sets of data. We will create a method on our `Set` data structure called `intersection`. An intersection of sets represents all values that are common to two or more sets. This method should take another `Set` as an argument and return the `intersection` of the two sets.
+
+For example, if `setA = ['a','b','c']` and `setB = ['a','b','d','e']`, then the intersection of setA and setB is: `setA.intersection(setB) = ['a', 'b']`.
+
+# --hints--
+
+Your `Set` class should have a `intersection` method.
+
+```js
+assert(
+  (function () {
+    var test = new Set();
+    return typeof test.intersection === 'function';
+  })()
+);
+```
+
+The proper collection should be returned.
+
+```js
+assert(
+  (function () {
+    var setA = new Set();
+    var setB = new Set();
+    setA.add('a');
+    setA.add('b');
+    setA.add('c');
+    setB.add('c');
+    setB.add('d');
+    var intersectionSetAB = setA.intersection(setB);
+    return (
+      intersectionSetAB.size() === 1 && intersectionSetAB.values()[0] === 'c'
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+class Set {
+  constructor() {
+    // This will hold the set
+    this.dictionary = {};
+    this.length = 0;
+  }
+  // This method will check for the presence of an element and return true or false
+  has(element) {
+    return this.dictionary[element] !== undefined;
+  }
+  // This method will return all the values in the set
+  values() {
+    return Object.keys(this.dictionary);
+  }
+  // This method will add an element to the set
+  add(element) {
+    if (!this.has(element)) {
+      this.dictionary[element] = true;
+      this.length++;
+      return true;
+    }
+
+    return false;
+  }
+  // This method will remove an element from a set
+  remove(element) {
+    if (this.has(element)) {
+      delete this.dictionary[element];
+      this.length--;
+      return true;
+    }
+
+    return false;
+  }
+  // This method will return the size of the set
+  size() {
+    return this.length;
+  }
+  // This is our union method 
+  union(set) {
+    const newSet = new Set();
+    this.values().forEach(value => {
+      newSet.add(value);
+    })
+    set.values().forEach(value => {
+      newSet.add(value);
+    })
+
+    return newSet;
+  }
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+class Set {
+  constructor() {
+    this.dictionary = {};
+    this.length = 0;
+  }
+
+  has(element) {
+    return this.dictionary[element] !== undefined;
+  }
+
+  values() {
+    return Object.keys(this.dictionary);
+  }
+
+  add(element) {
+    if (!this.has(element)) {
+      this.dictionary[element] = true;
+      this.length++;
+      return true;
+    }
+
+    return false;
+  }
+
+  remove(element) {
+    if (this.has(element)) {
+      delete this.dictionary[element];
+      this.length--;
+      return true;
+    }
+
+    return false;
+  }
+
+  size() {
+    return this.length;
+  }
+
+  union(set) {
+    const newSet = new Set();
+    this.values().forEach(value => {
+      newSet.add(value);
+    })
+    set.values().forEach(value => {
+      newSet.add(value);
+    })
+
+    return newSet;
+  }
+
+  intersection(set) {
+    const newSet = new Set();
+
+    let largeSet;
+    let smallSet;
+    if (this.dictionary.length > set.length) {
+      largeSet = this;
+      smallSet = set;
+    } else {
+      largeSet = set;
+      smallSet = this;
+    }
+
+    smallSet.values().forEach(value => {
+      if (largeSet.dictionary[value]) {
+        newSet.add(value);
+      }
+    })
+
+    return newSet;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-an-element-from-a-max-heap.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-an-element-from-a-max-heap.md
new file mode 100644
index 00000000000..b452d276002
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-an-element-from-a-max-heap.md
@@ -0,0 +1,171 @@
+---
+id: 587d825b367417b2b2512c8b
+title: Remove an Element from a Max Heap
+challengeType: 1
+forumTopicId: 301710
+dashedName: remove-an-element-from-a-max-heap
+---
+
+# --description--
+
+Now that we can add elements to our heap let's see how we can remove elements. Removing and inserting elements both require similar logic. In a max heap you will usually want to remove the greatest value, so this involves simply extracting it from the root of our tree. This will break the heap property of our tree, so we must reestablish it in some way. Typically, for a max heap this is done in the following way:
+
+<ol>
+  <li>Move the last element in the heap into the root position.</li>
+  <li>If either child of the root is greater than it, swap the root with the child of greater value.</li>
+  <li>Continue swapping until the parent is greater than both children or you reach the last level in the tree.</li>
+</ol>
+
+# --instructions--
+
+Instructions: Add a method to our max heap called `remove`. This method should return the greatest value that has been added to our max heap and remove it from the heap. It should also reorder the heap so the heap property is maintained. After removing an element, the next greatest element remaining in the heap should become the root.
+
+# --hints--
+
+The `MaxHeap` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof MaxHeap !== 'undefined') {
+      test = new MaxHeap();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+`MaxHeap` should have a method called `print`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof MaxHeap !== 'undefined') {
+      test = new MaxHeap();
+    } else {
+      return false;
+    }
+    return typeof test.print == 'function';
+  })()
+);
+```
+
+`MaxHeap` should have a method called `insert`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof MaxHeap !== 'undefined') {
+      test = new MaxHeap();
+    } else {
+      return false;
+    }
+    return typeof test.insert == 'function';
+  })()
+);
+```
+
+`MaxHeap` should have a method called `remove`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof MaxHeap !== 'undefined') {
+      test = new MaxHeap();
+    } else {
+      return false;
+    }
+    return typeof test.remove == 'function';
+  })()
+);
+```
+
+The `remove` method should remove the greatest element from the max heap while maintaining the max heap property.
+
+```js
+function isHeap(arr, i, n) {
+  if (i >= (n - 1) / 2) {
+    return true;
+  }
+  if (
+    arr[i] >= arr[2 * i + 1] &&
+    arr[i] >= arr[2 * i + 2] &&
+    isHeap(arr, 2 * i + 1, n) &&
+    isHeap(arr, 2 * i + 2, n)
+  ) {
+    return true;
+  }
+  return false;
+}
+
+assert(
+  (function () {
+    var test = false;
+    if (typeof MaxHeap !== 'undefined') {
+      test = new MaxHeap();
+    } else {
+      return false;
+    }
+  let max = Infinity;
+  const [result, vals] = [[], [2, 15, 3, 7, 12, 7, 10, 90]];
+  vals.forEach((val) => test.insert(val));
+  for (let i = 0; i < vals.length; i++) {
+    const curHeap = test.print();
+    const arr = curHeap[0] === null ? curHeap.slice(1) : curHeap;
+    if (!isHeap(arr, 0, arr.length - 1)) {
+      return false;
+    }
+    const removed = test.remove();
+    if(removed > max) return false
+    max = removed;
+    result.push(removed);
+  }
+  return true
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+var MaxHeap = function () {
+  this.heap = [];
+  this.parent = index => {
+    return Math.floor((index - 1) / 2);
+  }
+  this.insert = element => {
+    this.heap.push(element);
+    this.heapifyUp(this.heap.length - 1);
+  }
+  this.heapifyUp = index => {
+    let currentIndex = index,
+    parentIndex = this.parent(currentIndex);
+    while (currentIndex > 0 && this.heap[currentIndex] > this.heap[parentIndex]) {
+      this.swap(currentIndex, parentIndex);
+      currentIndex = parentIndex;
+      parentIndex = this.parent(parentIndex);
+    }
+  }
+  this.swap = (index1, index2) => {
+    [this.heap[index1], this.heap[index2]] = [this.heap[index2], this.heap[index1]];
+  }
+  this.print = () => {
+    return this.heap;
+  }
+  // Only change code below this line
+
+  // Only change code above this line
+};
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-elements-from-a-linked-list-by-index.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-elements-from-a-linked-list-by-index.md
new file mode 100644
index 00000000000..56392c469ad
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-elements-from-a-linked-list-by-index.md
@@ -0,0 +1,242 @@
+---
+id: 587d8251367417b2b2512c65
+title: Remove Elements from a Linked List by Index
+challengeType: 1
+forumTopicId: 301711
+dashedName: remove-elements-from-a-linked-list-by-index
+---
+
+# --description--
+
+Before we move on to another data structure, let's get a couple of last bits of practice with linked lists.
+
+Let's write a `removeAt` method that removes the `element` at a given `index`. The method should be called `removeAt(index)`. To remove an `element` at a certain `index`, we'll need to keep a running count of each node as we move along the linked list.
+
+A common technique used to iterate through the elements of a linked list involves a <dfn>'runner'</dfn>, or sentinel, that 'points' at the nodes that your code is comparing. In our case, starting at the `head` of our list, we start with a `currentIndex` variable that starts at `0`. The `currentIndex` should increment by one for each node we pass.
+
+Just like our `remove(element)` method, which <a href="/learn/coding-interview-prep/data-structures/remove-elements-from-a-linked-list" target="_blank" rel="noopener noreferrer nofollow">we covered in a previous lesson</a>, we need to be careful not to orphan the rest of our list when we remove the node in our `removeAt(index)` method. We keep our nodes contiguous by making sure that the node that has reference to the removed node has a reference to the next node.
+
+# --instructions--
+
+Write a `removeAt(index)` method that removes and returns a node at a given `index`. The method should return `null` if the given `index` is either negative, or greater than or equal to the `length` of the linked list.
+
+**Note:** Remember to keep count of the `currentIndex`.
+
+# --hints--
+
+Your `LinkedList` class should have a `removeAt` method.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    return typeof test.removeAt === 'function';
+  })()
+);
+```
+
+Your `removeAt` method should reduce the `length` of the linked list by one.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.add('kitten');
+    test.removeAt(1);
+    return test.size() === 2;
+  })()
+);
+```
+
+Your `removeAt` method should remove the element at the specified index from the linked list.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.add('kitten');
+    test.add('bird');
+    test.removeAt(1);
+    return (
+      JSON.stringify(test.head()) ===
+      '{"element":"cat","next":{"element":"kitten","next":{"element":"bird","next":null}}}'
+    );
+  })()
+);
+```
+
+When only one element is present in the linked list, your `removeAt` method should remove and return the element at specified index, and reduce the length of the linked list.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    var removedItem = test.removeAt(0);
+    return test.head() === null && test.size() === 0 && removedItem === 'cat';
+  })()
+);
+```
+
+Your `removeAt` method should return the element of the removed node.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.add('kitten');
+    return test.removeAt(1) === 'dog';
+  })()
+);
+```
+
+Your `removeAt` method should return `null` and the linked list should not change if the given index is less than `0`.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.add('kitten');
+    var removedItem = test.removeAt(-1);
+    return (
+      removedItem === null &&
+      JSON.stringify(test.head()) ===
+        '{"element":"cat","next":{"element":"dog","next":{"element":"kitten","next":null}}}'
+    );
+  })()
+);
+```
+
+Your `removeAt` method should return `null` and the linked list should not change if the given index is greater than or equal to the `length` of the list.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.add('kitten');
+    var removedItem = test.removeAt(3);
+    return (
+      removedItem === null &&
+      JSON.stringify(test.head()) ===
+        '{"element":"cat","next":{"element":"dog","next":{"element":"kitten","next":null}}}'
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function LinkedList() {
+  var length = 0;
+  var head = null;
+
+  var Node = function(element){
+    this.element = element;
+    this.next = null;
+  };
+
+  this.size = function(){
+    return length;
+  };
+
+  this.head = function(){
+    return head;
+  };
+
+  this.add = function(element){
+    var node = new Node(element);
+    if(head === null){
+      head = node;
+    } else {
+      var currentNode = head;
+
+      while(currentNode.next){
+        currentNode  = currentNode.next;
+      }
+
+      currentNode.next = node;
+    }
+
+    length++;
+  };
+
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function LinkedList() {
+  var length = 0;
+  var head = null;
+
+  var Node = function (element) {
+    this.element = element;
+    this.next = null;
+  };
+
+  this.size = function () {
+    return length;
+  };
+
+  this.head = function () {
+    return head;
+  };
+
+  this.add = function (element) {
+    var node = new Node(element);
+    if (head === null) {
+      head = node;
+    } else {
+      var currentNode = head;
+
+      while (currentNode.next) {
+        currentNode = currentNode.next;
+      }
+
+      currentNode.next = node;
+    }
+
+    length++;
+  };
+
+  this.removeAt = function (index) {
+    var currentNode = head;
+    var previous = head;
+    var count = 0;
+    if (index >= length || index < 0) {
+      return null;
+    }
+    if (index === 0) {
+      var removed = head.element;
+      head = currentNode.next;
+    } else {
+      while (count < index) {
+        previous = currentNode;
+        currentNode = currentNode.next;
+        count++;
+      }
+      var removed = previous.next.element;
+      previous.next = currentNode.next;
+    }
+    length--;
+    return removed;
+  };
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-elements-from-a-linked-list.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-elements-from-a-linked-list.md
new file mode 100644
index 00000000000..a202036ff08
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-elements-from-a-linked-list.md
@@ -0,0 +1,210 @@
+---
+id: 587d8251367417b2b2512c63
+title: Remove Elements from a Linked List
+challengeType: 1
+forumTopicId: 301712
+dashedName: remove-elements-from-a-linked-list
+---
+
+# --description--
+
+The next important method that any implementation of a linked list will need is a `remove` method. This method should take the element we want to remove as an argument, and then search the list to find and remove the node that contains that element.
+
+Whenever we remove a node from a linked list, it's important that we don't accidentally orphan the rest of the list in doing so. Recall that every node's `next` property points to the node that follows it in the list. If we're removing the middle element, say, we'll want to make sure that we have a connection from that element's previous node's `next` property to the middle element's `next` property (which is the next node in the list!)
+
+This might sound really confusing, so let's return to the conga line example so we have a good conceptual model. Picture yourself in a conga line, and the person directly in front of you leaves the line. The person who just left the line no longer has her hands on anyone in line--and you no longer have your hands on the person that left. You step forward and put your hands on next person you see.
+
+If the element we wish to remove is the `head` element, we reassign the `head` to the second node of the linked list.
+
+# --instructions--
+
+Write a `remove` method that takes an element and removes it from the linked list.
+
+**Note:** The `length` of the list should decrease by one every time an element is removed from the linked list.
+
+# --hints--
+
+Your `LinkedList` class should have a `remove` method.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    return typeof test.remove === 'function';
+  })()
+);
+```
+
+Your `remove` method should reassign `head` to the second node when the first node is removed.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.remove('cat');
+    return test.head().element === 'dog';
+  })()
+);
+```
+
+Your `remove` method should decrease the `length` of the linked list by one for every node removed.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.add('hamster');
+    test.remove('cat');
+    test.remove('fish');
+    return test.size() === 2;
+  })()
+);
+```
+
+Your `remove` method should reassign the reference of the previous node of the removed node to the removed node's `next` reference.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.add('snake');
+    test.add('kitten');
+    test.remove('snake');
+    return test.head().next.next.element === 'kitten';
+  })()
+);
+```
+
+Your `remove` method should not change the linked list if the element does not exist in the linked list.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.add('kitten');
+    test.remove('elephant');
+    return (
+      JSON.stringify(test.head()) ===
+      '{"element":"cat","next":{"element":"dog","next":{"element":"kitten","next":null}}}'
+    );
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function LinkedList() {
+  var length = 0;
+  var head = null;
+
+  var Node = function(element){
+    this.element = element;
+    this.next = null;
+  };
+
+  this.size = function(){
+    return length;
+  };
+
+  this.head = function(){
+    return head;
+  };
+
+  this.add = function(element){
+    var node = new Node(element);
+    if(head === null){
+        head = node;
+    } else {
+      var currentNode = head;
+
+      while(currentNode.next){
+        currentNode  = currentNode.next;
+      }
+
+      currentNode.next = node;
+    }
+
+    length++;
+  };
+
+  this.remove = function(element){
+    // Only change code below this line
+
+    // Only change code above this line
+  };
+}
+```
+
+# --solutions--
+
+```js
+function LinkedList() {
+  var length = 0;
+  var head = null;
+
+  var Node = function(element){
+    this.element = element;
+    this.next = null;
+  };
+
+  this.size = function(){
+    return length;
+  };
+
+  this.head = function(){
+    return head;
+  };
+
+  this.add = function(element){
+    var node = new Node(element);
+    if(head === null){
+        head = node;
+    } else {
+        var currentNode = head;
+
+        while(currentNode.next){
+            currentNode  = currentNode.next;
+        }
+
+        currentNode.next = node;
+    }
+
+    length++;
+  };
+
+  this.remove = function(element){
+    if (head === null) {
+      return;
+    }
+    var previous;
+    var currentNode = head;
+
+    while (currentNode.next !== null && currentNode.element !== element) {
+      previous = currentNode;
+      currentNode = currentNode.next;
+    }
+
+    if (currentNode.next === null && currentNode.element !== element) {
+      return;
+    }
+    else if (previous) {
+      previous.next = currentNode.next;
+    } else {
+      head = currentNode.next;
+    }
+
+    length--;
+  };
+} 
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-items-from-a-set-in-es6.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-items-from-a-set-in-es6.md
new file mode 100644
index 00000000000..c958d1922c4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/remove-items-from-a-set-in-es6.md
@@ -0,0 +1,67 @@
+---
+id: 587d8254367417b2b2512c71
+title: Remove items from a set in ES6
+challengeType: 1
+forumTopicId: 301713
+dashedName: remove-items-from-a-set-in-es6
+---
+
+# --description--
+
+Let's practice removing items from an ES6 Set using the `delete` method.
+
+First, create an ES6 Set:
+
+```js
+var set = new Set([1,2,3]);
+```
+
+Now remove an item from your Set with the `delete` method.
+
+```js
+set.delete(1);
+console.log([...set]) // should return [ 2, 3 ]
+```
+
+# --instructions--
+
+Now, create a set with the integers 1, 2, 3, 4, & 5.
+
+Remove the values 2 and 5, and then return the set.
+
+# --hints--
+
+Your Set should contain the values 1, 3, & 4
+
+```js
+assert(
+  (function () {
+    var test = checkSet();
+    return test.has(1) && test.has(3) && test.has(4) && test.size === 3;
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function checkSet(){
+  // Only change code below this line
+  var set = null;
+
+  // Only change code above this line
+  return set;   
+}
+```
+
+# --solutions--
+
+```js
+function checkSet(){
+var set = new Set([1,2,3,4,5]);
+set.delete(2);
+set.delete(5);
+return set;}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/reverse-a-doubly-linked-list.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/reverse-a-doubly-linked-list.md
new file mode 100644
index 00000000000..c26c4677db7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/reverse-a-doubly-linked-list.md
@@ -0,0 +1,205 @@
+---
+id: 587d825a367417b2b2512c88
+title: Reverse a Doubly Linked List
+challengeType: 1
+forumTopicId: 301714
+dashedName: reverse-a-doubly-linked-list
+---
+
+# --description--
+
+Let's create one more method for our doubly linked list called reverse which reverses the list in place. Once the method is executed the head should point to the previous tail and the tail should point to the previous head. Now, if we traverse the list from head to tail we should meet the nodes in a reverse order compared to the original list. Trying to reverse an empty list should return null.
+
+# --hints--
+
+The `DoublyLinkedList` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof DoublyLinkedList !== 'undefined') {
+      test = new DoublyLinkedList();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+The `DoublyLinkedList` should have a method called `reverse`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof DoublyLinkedList !== 'undefined') {
+      test = new DoublyLinkedList();
+    }
+    if (test.reverse == undefined) {
+      return false;
+    }
+    return typeof test.reverse == 'function';
+  })()
+);
+```
+
+Reversing an empty list should return `null`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof DoublyLinkedList !== 'undefined') {
+      test = new DoublyLinkedList();
+    }
+    return test.reverse() == null;
+  })()
+);
+```
+
+The `reverse` method should reverse the list.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof DoublyLinkedList !== 'undefined') {
+      test = new DoublyLinkedList();
+    }
+    test.add(58);
+    test.add(61);
+    test.add(32);
+    test.add(95);
+    test.add(41);
+    test.reverse();
+    return test.print().join('') == '4195326158';
+  })()
+);
+```
+
+The `next` and `previous` references should be correctly maintained when a list is reversed.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof DoublyLinkedList !== 'undefined') {
+      test = new DoublyLinkedList();
+    }
+    test.add(11);
+    test.add(22);
+    test.add(33);
+    test.add(44);
+    test.add(55);
+    test.reverse();
+    return test.printReverse().join('') == '1122334455';
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+DoublyLinkedList.prototype = Object.assign(
+  DoublyLinkedList.prototype,
+  {
+    add(data) {
+      if (this.head == null) {
+        this.head = new Node(data, null);
+        this.tail = this.head;
+      } else {
+        var node = this.head;
+        var prev = null;
+        while (node.next != null) {
+          prev = node;
+          node = node.next;
+        };
+        var newNode = new Node(data, node);
+        node.next = newNode;
+        this.tail = newNode;
+      };
+    },
+    print() {
+      if (this.head == null) {
+        return null;
+      } else {
+        var result = new Array();
+        var node = this.head;
+        while (node.next != null) {
+          result.push(node.data);
+          node = node.next;
+        };
+        result.push(node.data);
+        return result;
+      };
+    },
+    printReverse() {
+      if (this.tail == null) {
+        return null;
+      } else {
+        var result = new Array();
+        var node = this.tail;
+        while (node.prev != null) {
+          result.push(node.data);
+          node = node.prev;
+        };
+        result.push(node.data);
+        return result;
+      };
+    }
+  }
+);
+```
+
+## --seed-contents--
+
+```js
+var Node = function(data, prev) {
+  this.data = data;
+  this.prev = prev;
+  this.next = null;
+};
+var DoublyLinkedList = function() {
+  this.head = null;
+  this.tail = null;
+  // Only change code below this line
+
+  // Only change code above this line
+};
+```
+
+# --solutions--
+
+```js
+  var Node = function(data, prev) {
+    this.data = data;
+    this.prev = prev;
+    this.next = null;
+  };
+  var DoublyLinkedList = function() {
+    this.head = null;
+    this.tail = null;
+
+    this.reverse = function() {
+      if (!this.head || !this.head.next) {
+        return this.head
+      }
+
+      let tail;
+      let temp;
+      let current = this.head;
+      while(current !== null) {
+        if(!tail) tail = current;
+        temp = current.prev;
+        current.prev = current.next;
+        current.next = temp;
+        current = current.prev;
+      }
+
+      this.head = temp.prev;
+      this.tail = tail
+    }
+  };
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/search-within-a-linked-list.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/search-within-a-linked-list.md
new file mode 100644
index 00000000000..aa2c05c8810
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/search-within-a-linked-list.md
@@ -0,0 +1,293 @@
+---
+id: 587d8251367417b2b2512c64
+title: Search within a Linked List
+challengeType: 1
+forumTopicId: 301715
+dashedName: search-within-a-linked-list
+---
+
+# --description--
+
+Let's add a few more useful methods to our linked list class. Wouldn't it be useful if we could tell if our list was empty or not, as with our `Stack` and `Queue` classes?
+
+We should also be able to find specific elements in our linked list. Traversing through data structures is something you'll want to get a lot of practice with! Let's create an `indexOf` method that takes an `element` as an argument, and returns that element's `index` in the linked list. If the element is not found in the linked list, return `-1`.
+
+Let's also implement a method that does the opposite: an `elementAt` method that takes an `index` as an argument and returns the `element` at the given `index`. If no `element` is found, return `undefined`.
+
+# --instructions--
+
+Write an `isEmpty` method that checks if the linked list is empty, an `indexOf` method that returns the `index` of a given element, and an `elementAt` that returns an `element` at a given `index`.
+
+# --hints--
+
+Your `LinkedList` class should have an `isEmpty` method.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    return typeof test.isEmpty === 'function';
+  })()
+);
+```
+
+Your `isEmpty` method should return `false` when there is at least one element in linked list.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.add('kitten');
+    return test.isEmpty() === false;
+  })()
+);
+```
+
+Your `isEmpty` method should return `true` when there are no elements in linked list.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    return test.isEmpty() === true;
+  })()
+);
+```
+
+Your `LinkedList` class should have an `indexOf` method.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    return typeof test.indexOf === 'function';
+  })()
+);
+```
+
+Your `indexOf` method should return the index of a given element found in linked list.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.add('kitten');
+    return test.indexOf('cat') === 0;
+  })()
+);
+```
+
+Your `indexOf` method should return `-1` if the given element is not found in linked list
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.add('kitten');
+    return test.indexOf('pony') === -1;
+  })()
+);
+```
+
+Your `LinkedList` class should have an `elementAt` method.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    return typeof test.elementAt === 'function';
+  })()
+);
+```
+
+Your `elementAt` method should return the element found at a given index in linked list.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.add('kitten');
+    return test.elementAt(1) === 'dog';
+  })()
+);
+```
+
+Your `elementAt` method should return `undefined` if the given element is not found at a given index in linked list.
+
+```js
+assert(
+  (function () {
+    var test = new LinkedList();
+    test.add('cat');
+    test.add('dog');
+    test.add('kitten');
+    return test.elementAt(5) === undefined;
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function LinkedList() {
+  var length = 0;
+  var head = null;
+
+  var Node = function(element){
+    this.element = element;
+    this.next = null;
+  };
+
+  this.size = function() {
+    return length;
+  };
+
+  this.head = function(){
+    return head;
+  };
+
+  this.add = function(element){
+    var node = new Node(element);
+    if(head === null){
+        head = node;
+    } else {
+      var currentNode = head;
+
+      while(currentNode.next){
+        currentNode = currentNode.next;
+      }
+
+      currentNode.next = node;
+    }
+
+    length++;
+  };
+
+  this.remove = function(element){
+    var currentNode = head;
+    var previousNode;
+    if(currentNode.element === element){
+      head = currentNode.next;
+    } else {
+      while(currentNode.element !== element) {
+        previousNode = currentNode;
+        currentNode = currentNode.next;
+      }
+
+      previousNode.next = currentNode.next;
+    }
+
+    length --;
+  };
+
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function LinkedList() {
+  var length = 0;
+  var head = null;
+
+  var Node = function(element){
+    this.element = element;
+    this.next = null;
+  };
+
+  this.size = function() {
+    return length;
+  };
+
+  this.head = function(){
+    return head;
+  };
+
+  this.add = function(element){
+    var node = new Node(element);
+    if(head === null){
+        head = node;
+    } else {
+        var currentNode = head;
+
+        while(currentNode.next){
+            currentNode  = currentNode.next;
+        }
+
+        currentNode.next = node;
+    }
+
+    length++;
+  };
+
+  this.remove = function(element){
+    var currentNode = head;
+    var previousNode;
+    if(currentNode.element === element){
+        head = currentNode.next;
+    } else {
+        while(currentNode.element !== element) {
+            previousNode = currentNode;
+            currentNode = currentNode.next;
+        }
+
+        previousNode.next = currentNode.next;
+    }
+
+    length --;
+  };
+
+  this.indexOf = function(element) {
+    if (head === null) return -1
+
+    let current = head;
+    let index = 0;
+
+    while (current.element !== element && current.next !== null) {
+      current = current.next;
+      index++
+    }
+
+    if (current.element !== element && current.next === null) {
+      return -1
+    }
+
+    return index;
+  }
+
+  this.elementAt = function(index) {
+    if (head === null) return undefined;
+
+    let current = head;
+    let currentIndex = 0;
+
+    while (currentIndex !== index && current.next !== null) {
+      current = current.next;
+      currentIndex++
+    }
+
+    if (currentIndex !== index && current.next === null) {
+      return undefined;
+    }
+
+    return current.element;
+  }
+
+  this.isEmpty = function() {
+    return length === 0;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/typed-arrays.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/typed-arrays.md
new file mode 100644
index 00000000000..b992af729a4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/typed-arrays.md
@@ -0,0 +1,94 @@
+---
+id: 587d8253367417b2b2512c6a
+title: Typed Arrays
+challengeType: 1
+forumTopicId: 301716
+dashedName: typed-arrays
+---
+
+# --description--
+
+Arrays are JavaScript objects that can hold a lot of different elements.
+
+```js
+var complexArr = [1, 5, "2", "Word", {"name": "James"}];
+```
+
+Basically what happens in the background is that your browser will automatically give the right amount of memory space for that array. It will also change as needed if you add or remove data.
+
+However, in the world of high performance and different element types, sometimes you need to be more specific on how much memory is given to an array.
+
+<dfn>Typed arrays</dfn> are the answer to this problem. You are now able to say how much memory you want to give an array. Below is a basic overview of the different types of arrays available and the size in bytes for each element in that array.
+
+<table class='table table-striped'><tbody><tr><th>Type</th><th>Each element size in bytes</th></tr><tr><td><code>Int8Array</code></td><td>1</td></tr><tr><td><code>Uint8Array</code></td><td>1</td></tr><tr><td><code>Uint8ClampedArray</code></td><td>1</td></tr><tr><td><code>Int16Array</code></td><td>2</td></tr><tr><td><code>Uint16Array</code></td><td>2</td></tr><tr><td><code>Int32Array</code></td><td>4</td></tr><tr><td><code>Uint32Array</code></td><td>4</td></tr><tr><td><code>Float32Array</code></td><td>4</td></tr><tr><td><code>Float64Array</code></td><td>8</td></tr></tbody></table>
+
+There are two ways in creating these kind of arrays. One way is to create it directly. Below is how to create a 3 length `Int16Array`.
+
+```js
+var i8 = new Int16Array(3);
+console.log(i8);
+// Returns [0, 0, 0]
+```
+
+You can also create a <dfn>buffer</dfn> to assign how much data (in bytes) you want the array to take up. **Note**  
+To create typed arrays using buffers, you need to assign the number of bytes to be a multiple of the bytes listed above.
+
+```js
+// Create same Int16Array array differently
+var byteSize = 6; // Needs to be multiple of 2
+var buffer = new ArrayBuffer(byteSize);
+var i8View = new Int16Array(buffer);
+buffer.byteLength; // Returns 6
+i8View.byteLength; // Returns 6
+console.log(i8View); // Returns [0, 0, 0]
+```
+
+<dfn>Buffers</dfn> are general purpose objects that just carry data. You cannot access them normally. To access them, you need to first create a <dfn>view</dfn>.
+
+```js
+i8View[0] = 42;
+console.log(i8View); // Returns [42, 0, 0]
+```
+
+**Note**  
+Typed arrays do not have some of the methods traditional arrays have such as `.pop()` or `.push()`. Typed arrays also fail `Array.isArray()` that checks if something is an array. Although simpler, this can be an advantage for less-sophisticated JavaScript engines to implement them.
+
+# --instructions--
+
+First create a `buffer` that is 64-bytes. Then create a `Int32Array` typed array with a view of it called `i32View`.
+
+# --hints--
+
+Your `buffer` should be 64 bytes large.
+
+```js
+assert(buffer.byteLength === 64);
+```
+
+Your `i32View` view of your buffer should be 64 bytes large.
+
+```js
+assert(i32View.byteLength === 64);
+```
+
+Your `i32View` view of your buffer should be 16 elements long.
+
+```js
+assert(i32View.length === 16);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+var buffer;
+var i32View;
+```
+
+# --solutions--
+
+```js
+var buffer = new ArrayBuffer(64);
+var i32View = new Int32Array(buffer);
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-.has-and-.size-on-an-es6-set.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-.has-and-.size-on-an-es6-set.md
new file mode 100644
index 00000000000..55d4ac67de8
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-.has-and-.size-on-an-es6-set.md
@@ -0,0 +1,73 @@
+---
+id: 587d8255367417b2b2512c72
+title: Use .has and .size on an ES6 Set
+challengeType: 1
+forumTopicId: 301717
+dashedName: use--has-and--size-on-an-es6-set
+---
+
+# --description--
+
+Let's look at the .has and .size methods available on the ES6 Set object.
+
+First, create an ES6 Set
+
+```js
+var set = new Set([1,2,3]);
+```
+
+The .has method will check if the value is contained within the set.
+
+```js
+var hasTwo = set.has(2);
+```
+
+The .size method will return an integer representing the size of the Set
+
+```js
+var howBig = set.size;
+```
+
+# --instructions--
+
+In this exercise we will pass an array and a value to the checkSet() function. Your function should create an ES6 set from the array argument. Find if the set contains the value argument. Find the size of the set. And return those two values in an array.
+
+# --hints--
+
+`checkSet([4, 5, 6], 3)` should return [ false, 3 ]
+
+```js
+assert(
+  (function () {
+    var test = checkSet([4, 5, 6], 3);
+    return DeepEqual(test, [false, 3]);
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function checkSet(arrToBeSet, checkValue){
+
+   // Only change code below this line
+
+   // Only change code above this line
+
+}
+```
+
+# --solutions--
+
+```js
+function checkSet(arrToBeSet, checkValue){
+var set = new Set(arrToBeSet);
+var result = [
+set.has(checkValue),
+set.size
+];
+return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-breadth-first-search-in-a-binary-search-tree.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-breadth-first-search-in-a-binary-search-tree.md
new file mode 100644
index 00000000000..b02f10043d3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-breadth-first-search-in-a-binary-search-tree.md
@@ -0,0 +1,261 @@
+---
+id: 587d8258367417b2b2512c7f
+title: Use Breadth First Search in a Binary Search Tree
+challengeType: 1
+forumTopicId: 301718
+dashedName: use-breadth-first-search-in-a-binary-search-tree
+---
+
+# --description--
+
+Here we will introduce another tree traversal method: breadth-first search. In contrast to the depth-first search methods from the last challenge, breadth-first search explores all the nodes in a given level within a tree before continuing on to the next level. Typically, queues are utilized as helper data structures in the design of breadth-first search algorithms.
+
+In this method, we start by adding the root node to a queue. Then we begin a loop where we dequeue the first item in the queue, add it to a new array, and then inspect both its child subtrees. If its children are not null, they are each enqueued. This process continues until the queue is empty.
+
+# --instructions--
+
+Let's create a breadth-first search method in our tree called `levelOrder`. This method should return an array containing the values of all the tree nodes, explored in a breadth-first manner. Be sure to return the values in the array, not the nodes themselves. A level should be traversed from left to right. Next, let's write a similar method called `reverseLevelOrder` which performs the same search but in the reverse direction (right to left) at each level.
+
+# --hints--
+
+The `BinarySearchTree` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+The binary search tree should have a method called `levelOrder`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.levelOrder == 'function';
+  })()
+);
+```
+
+The binary search tree should have a method called `reverseLevelOrder`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.reverseLevelOrder == 'function';
+  })()
+);
+```
+
+The `levelOrder` method should return an array of the tree node values explored in level order.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.levelOrder !== 'function') {
+      return false;
+    }
+    test.add(7);
+    test.add(1);
+    test.add(9);
+    test.add(0);
+    test.add(3);
+    test.add(8);
+    test.add(10);
+    test.add(2);
+    test.add(5);
+    test.add(4);
+    test.add(6);
+    return test.levelOrder().join('') == '719038102546';
+  })()
+);
+```
+
+The `reverseLevelOrder` method should return an array of the tree node values explored in reverse level order.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.reverseLevelOrder !== 'function') {
+      return false;
+    }
+    test.add(7);
+    test.add(1);
+    test.add(9);
+    test.add(0);
+    test.add(3);
+    test.add(8);
+    test.add(10);
+    test.add(2);
+    test.add(5);
+    test.add(4);
+    test.add(6);
+    return test.reverseLevelOrder().join('') == '791108305264';
+  })()
+);
+```
+
+The `levelOrder` method should return `null` for an empty tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.levelOrder !== 'function') {
+      return false;
+    }
+    return test.levelOrder() == null;
+  })()
+);
+```
+
+The `reverseLevelOrder` method should return `null` for an empty tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.reverseLevelOrder !== 'function') {
+      return false;
+    }
+    return test.reverseLevelOrder() == null;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+BinarySearchTree.prototype = Object.assign(
+  BinarySearchTree.prototype,
+  {
+    add: function(value) {
+      function searchTree(node) {
+        if (value < node.value) {
+          if (node.left == null) {
+            node.left = new Node(value);
+            return;
+          } else if (node.left != null) {
+            return searchTree(node.left);
+          }
+        } else if (value > node.value) {
+          if (node.right == null) {
+            node.right = new Node(value);
+            return;
+          } else if (node.right != null) {
+            return searchTree(node.right);
+          }
+        } else {
+          return null;
+        }
+      }
+      var node = this.root;
+      if (node == null) {
+        this.root = new Node(value);
+        return;
+      } else {
+        return searchTree(node);
+      }
+    }
+  }
+);
+```
+
+## --seed-contents--
+
+```js
+var displayTree = tree => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+var displayTree = tree => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+  // Only change code below this line
+  this.levelOrder = (root = this.root) => {
+    if(!root) return null;
+    let queue = [root];
+    let results = [];
+    while(queue.length > 0) {
+      let node = queue.shift();
+      results.push(node.value);
+      if(node.left) queue.push(node.left);
+      if(node.right) queue.push(node.right);
+    }
+    return results;
+  }
+
+  this.reverseLevelOrder = (root = this.root) => {
+    if(!root) return null;
+    let queue = [root];
+    let results = [] ;
+    while ( queue.length > 0) {
+      let node = queue.shift();
+      results.push(node.value);
+      if(node.right) queue.push(node.right);
+      if(node.left ) queue.push(node.left);
+    }
+    return results;
+  }
+  // Only change code above this line
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-depth-first-search-in-a-binary-search-tree.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-depth-first-search-in-a-binary-search-tree.md
new file mode 100644
index 00000000000..c03fb750777
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-depth-first-search-in-a-binary-search-tree.md
@@ -0,0 +1,328 @@
+---
+id: 587d8257367417b2b2512c7e
+title: Use Depth First Search in a Binary Search Tree
+challengeType: 1
+forumTopicId: 301719
+dashedName: use-depth-first-search-in-a-binary-search-tree
+---
+
+# --description--
+
+We know how to search a binary search tree for a specific value. But what if we just want to explore the entire tree? Or what if we don't have an ordered tree and we need to just search for a value? Here we will introduce some tree traversal methods which can be used to explore tree data structures. First up is depth-first search. In depth-first search, a given subtree is explored as deeply as possible before the search continues on to another subtree. There are three ways this can be done: In-order: Begin the search at the left-most node and end at the right-most node. Pre-order: Explore all the roots before the leaves. Post-order: Explore all the leaves before the roots. As you may guess, you may choose different search methods depending on what type of data your tree is storing and what you are looking for. For a binary search tree, an inorder traversal returns the nodes in sorted order.
+
+# --instructions--
+
+Here we will create these three search methods on our binary search tree. Depth-first search is an inherently recursive operation which continues to explore further subtrees so long as child nodes are present. Once you understand this basic concept, you can simply rearrange the order in which you explore the nodes and subtrees to produce any of the three searches above. For example, in post-order search we would want to recurse all the way to a leaf node before we begin to return any of the nodes themselves, whereas in pre-order search we would want to return the nodes first, and then continue recursing down the tree. Define `inorder`, `preorder`, and `postorder` methods on our tree. Each of these methods should return an array of items which represent the tree traversal. Be sure to return the integer values at each node in the array, not the nodes themselves. Finally, return `null` if the tree is empty.
+
+# --hints--
+
+The `BinarySearchTree` data structure should exist.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    }
+    return typeof test == 'object';
+  })()
+);
+```
+
+The binary search tree should have a method called `inorder`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.inorder == 'function';
+  })()
+);
+```
+
+The binary search tree should have a method called `preorder`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.preorder == 'function';
+  })()
+);
+```
+
+The binary search tree should have a method called `postorder`.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    return typeof test.postorder == 'function';
+  })()
+);
+```
+
+The `inorder` method should return an array of the node values that result from an inorder traversal.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.inorder !== 'function') {
+      return false;
+    }
+    test.add(7);
+    test.add(1);
+    test.add(9);
+    test.add(0);
+    test.add(3);
+    test.add(8);
+    test.add(10);
+    test.add(2);
+    test.add(5);
+    test.add(4);
+    test.add(6);
+    return test.inorder().join('') == '012345678910';
+  })()
+);
+```
+
+The `preorder` method should return an array of the node values that result from a preorder traversal.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.preorder !== 'function') {
+      return false;
+    }
+    test.add(7);
+    test.add(1);
+    test.add(9);
+    test.add(0);
+    test.add(3);
+    test.add(8);
+    test.add(10);
+    test.add(2);
+    test.add(5);
+    test.add(4);
+    test.add(6);
+    return test.preorder().join('') == '710325469810';
+  })()
+);
+```
+
+The `postorder` method should return an array of the node values that result from a postorder traversal.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.postorder !== 'function') {
+      return false;
+    }
+    test.add(7);
+    test.add(1);
+    test.add(9);
+    test.add(0);
+    test.add(3);
+    test.add(8);
+    test.add(10);
+    test.add(2);
+    test.add(5);
+    test.add(4);
+    test.add(6);
+    return test.postorder().join('') == '024653181097';
+  })()
+);
+```
+
+The `inorder` method should return `null` for an empty tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.inorder !== 'function') {
+      return false;
+    }
+    return test.inorder() == null;
+  })()
+);
+```
+
+The `preorder` method should return `null` for an empty tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.preorder !== 'function') {
+      return false;
+    }
+    return test.preorder() == null;
+  })()
+);
+```
+
+The `postorder` method should return `null` for an empty tree.
+
+```js
+assert(
+  (function () {
+    var test = false;
+    if (typeof BinarySearchTree !== 'undefined') {
+      test = new BinarySearchTree();
+    } else {
+      return false;
+    }
+    if (typeof test.postorder !== 'function') {
+      return false;
+    }
+    return test.postorder() == null;
+  })()
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+BinarySearchTree.prototype = Object.assign(
+  BinarySearchTree.prototype,
+  {
+    add: function(value) {
+      function searchTree(node) {
+        if (value < node.value) {
+          if (node.left == null) {
+            node.left = new Node(value);
+            return;
+          } else if (node.left != null) {
+            return searchTree(node.left);
+          }
+        } else if (value > node.value) {
+          if (node.right == null) {
+            node.right = new Node(value);
+            return;
+          } else if (node.right != null) {
+            return searchTree(node.right);
+          }
+        } else {
+          return null;
+        }
+      }
+
+      var node = this.root;
+      if (node == null) {
+        this.root = new Node(value);
+        return;
+      } else {
+        return searchTree(node);
+      }
+    }
+  }
+);
+```
+
+## --seed-contents--
+
+```js
+var displayTree = tree => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+  // Only change code below this line
+
+  // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+var displayTree = tree => console.log(JSON.stringify(tree, null, 2));
+function Node(value) {
+  this.value = value;
+  this.left = null;
+  this.right = null;
+}
+function BinarySearchTree() {
+  this.root = null;
+  this.result = [];
+
+  this.inorder = function(node) {
+    if (!node) node = this.root;
+    if (!node) return null;
+
+    if (node.left) this.inorder(node.left);
+    this.result.push(node.value);
+    if (node.right) this.inorder(node.right);
+    return this.result;
+  };
+  this.preorder = function(node) {
+    if (!node) node = this.root;
+    if (!node) return null;
+
+    this.result.push(node.value);
+    if (node.left) this.preorder(node.left);
+    if (node.right) this.preorder(node.right);
+    return this.result;
+  };
+  this.postorder = function(node) {
+    if (!node) node = this.root;
+    if (!node) return null;
+
+    if (node.left) this.postorder(node.left);
+    if (node.right) this.postorder(node.right);
+    this.result.push(node.value);
+
+    return this.result;
+  };
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-spread-and-notes-for-es5-set-integration.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-spread-and-notes-for-es5-set-integration.md
new file mode 100644
index 00000000000..79ba7313b8c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/use-spread-and-notes-for-es5-set-integration.md
@@ -0,0 +1,59 @@
+---
+id: 587d8255367417b2b2512c73
+title: Use Spread and Notes for ES5 Set() Integration
+challengeType: 1
+forumTopicId: 301720
+dashedName: use-spread-and-notes-for-es5-set-integration
+---
+
+# --description--
+
+Do you remember the ES6 spread operator `...`?
+
+`...` can take iterable objects in ES6 and turn them into arrays.
+
+Let's create a Set, and check out the spread function.
+
+```js
+var set = new Set([1,2,3]);
+var setToArr = [...set]
+console.log(setToArr) // returns [ 1, 2, 3 ]
+```
+
+# --instructions--
+
+In this exercise we will pass a set object to the `checkSet` function. It should return an array containing the values of the Set.
+
+Now you've successfully learned how to use the ES6 `Set()` object, good job!
+
+# --hints--
+
+`checkSet(new Set([1,2,3,4,5,6,7])` should return `[1, 2, 3, 4, 5, 6, 7]`.
+
+```js
+assert(
+  (function () {
+    var test = checkSet(new Set([1, 2, 3, 4, 5, 6, 7]));
+    return DeepEqual(test, [1, 2, 3, 4, 5, 6, 7]);
+  })()
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function checkSet(set){
+   // Only change code below this line
+
+   // Only change code above this line
+}
+```
+
+# --solutions--
+
+```js
+function checkSet(set){
+return [...set];}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/work-with-nodes-in-a-linked-list.md b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/work-with-nodes-in-a-linked-list.md
new file mode 100644
index 00000000000..c746995d5db
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/data-structures/work-with-nodes-in-a-linked-list.md
@@ -0,0 +1,55 @@
+---
+id: 587d8251367417b2b2512c61
+title: Work with Nodes in a Linked List
+challengeType: 1
+forumTopicId: 301721
+dashedName: work-with-nodes-in-a-linked-list
+---
+
+# --description--
+
+Another common data structure you'll run into in computer science is the <dfn>linked list</dfn>. A linked list is a linear collection of data elements, called 'nodes', each of which points to the next. Each <dfn>node</dfn> in a linked list contains two key pieces of information: the `element` itself, and a reference to the next `node`.
+
+Imagine that you are in a conga line. You have your hands on the next person in the line, and the person behind you has their hands on you. You can see the person straight ahead of you, but they are blocking the view of the other people ahead in line. A node is just like a person in a conga line: they know who they are and they can only see the next person in line, but they are not aware of the other people ahead or behind them.
+
+# --instructions--
+
+In our code editor, we've created two nodes, `Kitten` and `Puppy`, and we've manually connected the `Kitten` node to the `Puppy` node.
+
+Create a `Cat` and `Dog` node and manually add them to the line.
+
+# --hints--
+
+Your `Puppy` node should have a reference to a `Cat` node.
+
+```js
+assert(Puppy.next.element === 'Cat');
+```
+
+Your `Cat` node should have a reference to a `Dog` node.
+
+```js
+assert(Cat.next.element === 'Dog');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+var Node = function(element) {
+  this.element = element;
+  this.next = null;
+};
+var Kitten = new Node('Kitten');
+var Puppy = new Node('Puppy');
+
+Kitten.next = Puppy;
+// Only change code below this line
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-1-multiples-of-3-and-5.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-1-multiples-of-3-and-5.md
new file mode 100644
index 00000000000..5b3f6a44858
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-1-multiples-of-3-and-5.md
@@ -0,0 +1,73 @@
+---
+id: 5900f36e1000cf542c50fe80
+title: 'Problem 1: Multiples of 3 and 5'
+challengeType: 1
+forumTopicId: 301722
+dashedName: problem-1-multiples-of-3-and-5
+---
+
+# --description--
+
+If we list all the natural numbers below 10 that are multiples of 3 or 5, we get 3, 5, 6 and 9. The sum of these multiples is 23.
+
+Find the sum of all the multiples of 3 or 5 below the provided parameter value `number`.
+
+# --hints--
+
+`multiplesOf3and5(10)` should return a number.
+
+```js
+assert(typeof multiplesOf3and5(10) === 'number');
+```
+
+`multiplesOf3and5(49)` should return 543.
+
+```js
+assert.strictEqual(multiplesOf3and5(49), 543);
+```
+
+`multiplesOf3and5(1000)` should return 233168.
+
+```js
+assert.strictEqual(multiplesOf3and5(1000), 233168);
+```
+
+`multiplesOf3and5(8456)` should return 16687353.
+
+```js
+assert.strictEqual(multiplesOf3and5(8456), 16687353);
+```
+
+`multiplesOf3and5(19564)` should return 89301183.
+
+```js
+assert.strictEqual(multiplesOf3and5(19564), 89301183);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function multiplesOf3and5(number) {
+
+  return true;
+}
+
+multiplesOf3and5(1000);
+```
+
+# --solutions--
+
+```js
+const multiplesOf3and5 = (number) => {
+  var total = 0;
+
+  for(var i = 0; i < number; i++) {
+    if(i % 3 == 0 || i % 5 == 0) {
+      total += i;
+    }
+  }
+  return total;
+};
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-10-summation-of-primes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-10-summation-of-primes.md
new file mode 100644
index 00000000000..39ab831dad7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-10-summation-of-primes.md
@@ -0,0 +1,106 @@
+---
+id: 5900f3761000cf542c50fe89
+title: 'Problem 10: Summation of primes'
+challengeType: 1
+forumTopicId: 301723
+dashedName: problem-10-summation-of-primes
+---
+
+# --description--
+
+The sum of the primes below 10 is 2 + 3 + 5 + 7 = 17.
+
+Find the sum of all the primes below `n`.
+
+# --hints--
+
+`primeSummation(17)` should return a number.
+
+```js
+assert(typeof primeSummation(17) === 'number');
+```
+
+`primeSummation(17)` should return 41.
+
+```js
+assert.strictEqual(primeSummation(17), 41);
+```
+
+`primeSummation(2001)` should return 277050.
+
+```js
+assert.strictEqual(primeSummation(2001), 277050);
+```
+
+`primeSummation(140759)` should return 873608362.
+
+```js
+assert.strictEqual(primeSummation(140759), 873608362);
+```
+
+`primeSummation(2000000)` should return 142913828922.
+
+```js
+assert.strictEqual(primeSummation(2000000), 142913828922);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeSummation(n) {
+
+  return true;
+}
+
+primeSummation(2000000);
+```
+
+# --solutions--
+
+```js
+class PrimeSeive {
+  constructor(num) {
+    const seive = Array(Math.floor((num - 1) / 2)).fill(true);
+    const upper = Math.floor((num - 1) / 2);
+    const sqrtUpper = Math.floor((Math.sqrt(num) - 1) / 2);
+
+    for (let i = 0; i <= sqrtUpper; i++) {
+      if (seive[i]) {
+        // Mark value in seive array
+        const prime = 2 * i + 3;
+        // Mark all multiples of this number as false (not prime)
+        const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
+        for (let j = primeSqaredIndex; j < upper; j += prime) {
+          seive[j] = false;
+        }
+      }
+    }
+
+    this._seive = seive;
+  }
+
+  isPrime(num) {
+    return num === 2
+      ? true
+      : num % 2 === 0
+        ? false
+        : this.isOddPrime(num);
+  }
+
+  isOddPrime(num) {
+    return this._seive[(num - 3) / 2];
+  }
+};
+
+function primeSummation(num) {
+  const primeSeive = new PrimeSeive(num);
+
+  let sum = 2;
+  for (let i = 3; i < num; i += 2) {
+    if (primeSeive.isOddPrime(i)) sum += i;
+  }
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-100-arranged-probability.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-100-arranged-probability.md
new file mode 100644
index 00000000000..4507fa49c56
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-100-arranged-probability.md
@@ -0,0 +1,87 @@
+---
+id: 5900f3d01000cf542c50fee3
+title: 'Problem 100: Arranged probability'
+challengeType: 1
+forumTopicId: 301724
+dashedName: problem-100-arranged-probability
+---
+
+# --description--
+
+If a box contains twenty-one colored discs, composed of fifteen blue discs and six red discs, and two discs were taken at random, it can be seen that the probability of taking two blue discs.
+
+$${P(BB)} = \frac{15}{21}×\frac{14}{20} = \frac{1}{2}$$
+
+The next such arrangement, for which there is exactly a 50% chance of taking two blue discs at random, is a box containing eighty-five blue discs and thirty-five red discs.
+
+By finding the first arrangement to contain over `limit` discs in total, determine the number of blue discs that the box would contain.
+
+# --hints--
+
+`arrangedProbability(20)` should return a number.
+
+```js
+assert(typeof arrangedProbability(10) === 'number');
+```
+
+`arrangedProbability(20)` should return `15`.
+
+```js
+assert.strictEqual(arrangedProbability(20), 15);
+```
+
+`arrangedProbability(100)` should return `85`.
+
+```js
+assert.strictEqual(arrangedProbability(100), 85);
+```
+
+`arrangedProbability(100000)` should return `97513`.
+
+```js
+assert.strictEqual(arrangedProbability(100000), 97513);
+```
+
+`arrangedProbability(1000000000)` should return `3822685023`.
+
+```js
+assert.strictEqual(arrangedProbability(1000000000), 3822685023);
+```
+
+`arrangedProbability(1000000000000)` should return `756872327473`.
+
+```js
+assert.strictEqual(arrangedProbability(1000000000000), 756872327473);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function arrangedProbability(limit) {
+
+  return true;
+}
+
+arrangedProbability(20);
+```
+
+# --solutions--
+
+```js
+function arrangedProbability(limit) {
+  // Based on https://www.mathblog.dk/project-euler-100-blue-discs-two-blue/
+  let blue = 15;
+  let discs = 21;
+
+  while (discs < limit) {
+    const nextBlue = 3 * blue + 2 * discs - 2;
+    const nextDiscs = 4 * blue + 3 * discs - 3;
+
+    blue = nextBlue;
+    discs = nextDiscs;
+  }
+  return blue;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-101-optimum-polynomial.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-101-optimum-polynomial.md
new file mode 100644
index 00000000000..803f95dc33e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-101-optimum-polynomial.md
@@ -0,0 +1,58 @@
+---
+id: 5900f3d21000cf542c50fee4
+title: 'Problem 101: Optimum polynomial'
+challengeType: 1
+forumTopicId: 301725
+dashedName: problem-101-optimum-polynomial
+---
+
+# --description--
+
+If we are presented with the first k terms of a sequence it is impossible to say with certainty the value of the next term, as there are infinitely many polynomial functions that can model the sequence.
+
+As an example, let us consider the sequence of cube numbers. This is defined by the generating function, $u_n = n^3: 1, 8, 27, 64, 125, 216, \ldots$
+
+Suppose we were only given the first two terms of this sequence. Working on the principle that "simple is best" we should assume a linear relationship and predict the next term to be 15 (common difference 7). Even if we were presented with the first three terms, by the same principle of simplicity, a quadratic relationship should be assumed.
+
+We shall define $OP(k, n)$ to be the $n^{th}$ term of the optimum polynomial generating function for the first k terms of a sequence. It should be clear that $OP(k, n)$ will accurately generate the terms of the sequence for $n ≤ k$, and potentially the first incorrect term (FIT) will be $OP(k, k+1)$; in which case we shall call it a bad OP (BOP).
+
+As a basis, if we were only given the first term of sequence, it would be most sensible to assume constancy; that is, for $n ≥ 2, OP(1, n) = u_1$.
+
+Hence we obtain the following OPs for the cubic sequence:
+
+$$\begin{array}{ll}   OP(1, n) = 1          & 1, {\color{red}1}, 1, 1, \ldots     \\\\
+  OP(2, n) = 7n−6       & 1, 8, {\color{red}{15}}, \ldots     \\\\   OP(3, n) = 6n^2−11n+6 & 1, 8, 27, {\color{red}{58}}, \ldots \\\\
+  OP(4, n) = n^3        & 1, 8, 27, 64, 125, \ldots \end{array}$$
+
+Clearly no BOPs exist for k ≥ 4. By considering the sum of FITs generated by the BOPs (indicated in $\color{red}{red}$ above), we obtain 1 + 15 + 58 = 74. Consider the following tenth degree polynomial generating function:
+
+$$u_n = 1 − n + n^2 − n^3 + n^4 − n^5 + n^6 − n^7 + n^8 − n^9 + n^{10}$$
+
+Find the sum of FITs for the BOPs.
+
+# --hints--
+
+`optimumPolynomial()` should return `37076114526`.
+
+```js
+assert.strictEqual(optimumPolynomial(), 37076114526);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function optimumPolynomial() {
+
+  return true;
+}
+
+optimumPolynomial();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-102-triangle-containment.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-102-triangle-containment.md
new file mode 100644
index 00000000000..c90a827dda3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-102-triangle-containment.md
@@ -0,0 +1,156 @@
+---
+id: 5900f3d21000cf542c50fee5
+title: 'Problem 102: Triangle containment'
+challengeType: 1
+forumTopicId: 301726
+dashedName: problem-102-triangle-containment
+---
+
+# --description--
+
+Three distinct points are plotted at random on a Cartesian plane, for which -1000 ≤ x, y ≤ 1000, such that a triangle is formed.
+
+Consider the following two triangles:
+
+```js
+const exampleTriangles = [
+  [[-340, 495], [-153, -910], [835, -947]],
+  [[-175, 41], [-421, -714], [574, -645]]
+];
+```
+
+It can be verified that first triangle contains the origin, whereas second triangle does not.
+
+Using the `triangles` array containing coordinates of triangles, find the number of triangles for which the interior contains the origin.
+
+# --hints--
+
+`triangleContainment(exampleTriangles)` should return a number.
+
+```js
+assert(typeof triangleContainment(_exampleTriangles) === 'number');
+```
+
+`triangleContainment(exampleTriangles)` should return `1`.
+
+```js
+assert.strictEqual(triangleContainment(_exampleTriangles), 1);
+```
+
+`triangleContainment(testTriangles1)` should return `19`.
+
+```js
+assert.strictEqual(triangleContainment(_testTriangles1), 19);
+```
+
+`triangleContainment(testTriangles2)` should return `228`.
+
+```js
+assert.strictEqual(triangleContainment(_testTriangles2), 228);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _exampleTriangles = [
+  [[-340, 495], [-153, -910], [835, -947]],
+  [[-175, 41], [-421, -714], [574, -645]]
+];
+const _testTriangles1 = [
+  [[-866,121],[-928,358],[459,-843]],[[-568,-631],[-352,-580],[-349,189]],[[-737,849],[-963,-486],[-662,970]],[[135,334],[-967,-71],[-365,-792]],[[789,21],[-227,51],[990,-275]],[[240,412],[-886,230],[591,256]],[[-609,472],[-853,-754],[959,661]],[[401,521],[521,314],[929,982]],[[-499,784],[-208,71],[-302,296]],[[-557,-948],[-553,-526],[-864,793]],[[270,-626],[828,44],[37,14]],[[-412,224],[617,-593],[502,699]],[[41,-908],[81,562],[-849,163]],[[165,917],[761,-197],[331,-341]],[[-687,314],[799,755],[-969,648]],[[-164,25],[578,439],[-334,-576]],[[213,535],[874,-177],[-551,24]],[[-689,291],[-795,-225],[-496,-125]],[[465,461],[558,-118],[-568,-909]],[[567,660],[-810,46],[-485,878]],[[-147,606],[685,-690],[-774,984]],[[568,-886],[-43,854],[-738,616]],[[-800,386],[-614,585],[764,-226]],[[-518,23],[-225,-732],[-79,440]],[[-173,-291],[-689,636],[642,-447]],[[-598,-16],[227,410],[496,211]],[[-474,-930],[-656,-321],[-420,36]],[[-435,165],[-819,555],[540,144]],[[-969,149],[828,568],[394,648]],[[65,-848],[257,720],[-625,-851]],[[981,899],[275,635],[465,-877]],[[80,290],[792,760],[-191,-321]],[[-605,-858],[594,33],[706,593]],[[585,-472],[318,-35],[354,-927]],[[-365,664],[803,581],[-965,-814]],[[-427,-238],[-480,146],[-55,-606]],[[879,-193],[250,-890],[336,117]],[[-226,-322],[-286,-765],[-836,-218]],[[-913,564],[-667,-698],[937,283]],[[872,-901],[810,-623],[-52,-709]],[[473,171],[717,38],[-429,-644]],[[225,824],[-219,-475],[-180,234]],[[-530,-797],[-948,238],[851,-623]],[[85,975],[-363,529],[598,28]],[[-799,166],[-804,210],[-769,851]],[[-687,-158],[885,736],[-381,-461]],[[447,592],[928,-514],[-515,-661]],[[-399,-777],[-493,80],[-544,-78]],[[-884,631],[171,-825],[-333,551]],[[191,268],[-577,676],[137,-33]],[[212,-853],[709,798],[583,-56]],[[-908,-172],[-540,-84],[-135,-56]],[[303,311],[406,-360],[-240,811]],[[798,-708],[824,59],[234,-57]],[[491,693],[-74,585],[-85,877]],[[509,-65],[-936,329],[-51,722]],[[-122,858],[-52,467],[-77,-609]],[[850,760],[547,-495],[-953,-952]],[[-460,-541],[890,910],[286,724]],[[-914,843],[-579,-983],[-387,-460]],[[989,-171],[-877,-326],[-899,458]],[[846,175],[-915,540],[-1000,-982]],[[-852,-920],[-306,496],[530,-18]],[[338,-991],[160,85],[-455,-661]],[[-186,-311],[-460,-563],[-231,-414]],[[-932,-302],[959,597],[793,748]],[[-366,-402],[-788,-279],[514,53]],[[-940,-956],[447,-956],[211,-285]],[[564,806],[-911,-914],[934,754]],[[575,-858],[-277,15],[409,-714]]
+];
+const _testTriangles2 = [
+  [[-340,495],[-153,-910],[835,-947]],[[-175,41],[-421,-714],[574,-645]],[[-547,712],[-352,579],[951,-786]],[[419,-864],[-83,650],[-399,171]],[[-429,-89],[-357,-930],[296,-29]],[[-734,-702],[823,-745],[-684,-62]],[[-971,762],[925,-776],[-663,-157]],[[162,570],[628,485],[-807,-896]],[[641,91],[-65,700],[887,759]],[[215,-496],[46,-931],[422,-30]],[[-119,359],[668,-609],[-358,-494]],[[440,929],[968,214],[760,-857]],[[-700,785],[838,29],[-216,411]],[[-770,-458],[-325,-53],[-505,633]],[[-752,-805],[349,776],[-799,687]],[[323,5],[561,-36],[919,-560]],[[-907,358],[264,320],[204,274]],[[-728,-466],[350,969],[292,-345]],[[940,836],[272,-533],[748,185]],[[411,998],[813,520],[316,-949]],[[-152,326],[658,-762],[148,-651]],[[330,507],[-9,-628],[101,174]],[[551,-496],[772,-541],[-702,-45]],[[-164,-489],[-90,322],[631,-59]],[[673,366],[-4,-143],[-606,-704]],[[428,-609],[801,-449],[740,-269]],[[453,-924],[-785,-346],[-853,111]],[[-738,555],[-181,467],[-426,-20]],[[958,-692],[784,-343],[505,-569]],[[620,27],[263,54],[-439,-726]],[[804,87],[998,859],[871,-78]],[[-119,-453],[-709,-292],[-115,-56]],[[-626,138],[-940,-476],[-177,-274]],[[-11,160],[142,588],[446,158]],[[538,727],[550,787],[330,810]],[[420,-689],[854,-546],[337,516]],[[872,-998],[-607,748],[473,-192]],[[653,440],[-516,-985],[808,-857]],[[374,-158],[331,-940],[-338,-641]],[[137,-925],[-179,771],[734,-715]],[[-314,198],[-115,29],[-641,-39]],[[759,-574],[-385,355],[590,-603]],[[-189,-63],[-168,204],[289,305]],[[-182,-524],[-715,-621],[911,-255]],[[331,-816],[-833,471],[168,126]],[[-514,581],[-855,-220],[-731,-507]],[[129,169],[576,651],[-87,-458]],[[783,-444],[-881,658],[-266,298]],[[603,-430],[-598,585],[368,899]],[[43,-724],[962,-376],[851,409]],[[-610,-646],[-883,-261],[-482,-881]],[[-117,-237],[978,641],[101,-747]],[[579,125],[-715,-712],[208,534]],[[672,-214],[-762,372],[874,533]],[[-564,965],[38,715],[367,242]],[[500,951],[-700,-981],[-61,-178]],[[-382,-224],[-959,903],[-282,-60]],[[-355,295],[426,-331],[-591,655]],[[892,128],[958,-271],[-993,274]],[[-454,-619],[302,138],[-790,-874]],[[-642,601],[-574,159],[-290,-318]],[[266,-109],[257,-686],[54,975]],[[162,628],[-478,840],[264,-266]],[[466,-280],[982,1],[904,-810]],[[721,839],[730,-807],[777,981]],[[-129,-430],[748,263],[943,96]],[[434,-94],[410,-990],[249,-704]],[[237,42],[122,-732],[44,-51]],[[909,-116],[-229,545],[292,717]],[[824,-768],[-807,-370],[-262,30]],[[675,58],[332,-890],[-651,791]],[[363,825],[-717,254],[684,240]],[[405,-715],[900,166],[-589,422]],[[-476,686],[-830,-319],[634,-807]],[[633,837],[-971,917],[-764,207]],[[-116,-44],[-193,-70],[908,809]],[[-26,-252],[998,408],[70,-713]],[[-601,645],[-462,842],[-644,-591]],[[-160,653],[274,113],[-138,687]],[[369,-273],[-181,925],[-167,-693]],[[-338,135],[480,-967],[-13,-840]],[[-90,-270],[-564,695],[161,907]],[[607,-430],[869,-713],[461,-469]],[[919,-165],[-776,522],[606,-708]],[[-203,465],[288,207],[-339,-458]],[[-453,-534],[-715,975],[838,-677]],[[-973,310],[-350,934],[546,-805]],[[-835,385],[708,-337],[-594,-772]],[[-14,914],[900,-495],[-627,594]],[[833,-713],[-213,578],[-296,699]],[[-27,-748],[484,455],[915,291]],[[270,889],[739,-57],[442,-516]],[[119,811],[-679,905],[184,130]],[[-678,-469],[925,553],[612,482]],[[101,-571],[-732,-842],[644,588]],[[-71,-737],[566,616],[957,-663]],[[-634,-356],[90,-207],[936,622]],[[598,443],[964,-895],[-58,529]],[[847,-467],[929,-742],[91,10]],[[-633,829],[-780,-408],[222,-30]],[[-818,57],[275,-38],[-746,198]],[[-722,-825],[-549,597],[-391,99]],[[-570,908],[430,873],[-103,-360]],[[342,-681],[512,434],[542,-528]],[[297,850],[479,609],[543,-357]],[[9,784],[212,548],[56,859]],[[-152,560],[-240,-969],[-18,713]],[[140,-133],[34,-635],[250,-163]],[[-272,-22],[-169,-662],[989,-604]],[[471,-765],[355,633],[-742,-118]],[[-118,146],[942,663],[547,-376]],[[583,16],[162,264],[715,-33]],[[-230,-446],[997,-838],[561,555]],[[372,397],[-729,-318],[-276,649]],[[92,982],[-970,-390],[-922,922]],[[-981,713],[-951,-337],[-669,670]],[[-999,846],[-831,-504],[7,-128]],[[455,-954],[-370,682],[-510,45]],[[822,-960],[-892,-385],[-662,314]],[[-668,-686],[-367,-246],[530,-341]],[[-723,-720],[-926,-836],[-142,757]],[[-509,-134],[384,-221],[-873,-639]],[[-803,-52],[-706,-669],[373,-339]],[[933,578],[631,-616],[770,555]],[[741,-564],[-33,-605],[-576,275]],[[-715,445],[-233,-730],[734,-704]],[[120,-10],[-266,-685],[-490,-17]],[[-232,-326],[-457,-946],[-457,-116]],[[811,52],[639,826],[-200,147]],[[-329,279],[293,612],[943,955]],[[-721,-894],[-393,-969],[-642,453]],[[-688,-826],[-352,-75],[371,79]],[[-809,-979],[407,497],[858,-248]],[[-485,-232],[-242,-582],[-81,849]],[[141,-106],[123,-152],[806,-596]],[[-428,57],[-992,811],[-192,478]],[[864,393],[122,858],[255,-876]],[[-284,-780],[240,457],[354,-107]],[[956,605],[-477,44],[26,-678]],[[86,710],[-533,-815],[439,327]],[[-906,-626],[-834,763],[426,-48]],[[201,-150],[-904,652],[475,412]],[[-247,149],[81,-199],[-531,-148]],[[923,-76],[-353,175],[-121,-223]],[[427,-674],[453,472],[-410,585]],[[931,776],[-33,85],[-962,-865]],[[-655,-908],[-902,208],[869,792]],[[-316,-102],[-45,-436],[-222,885]],[[-309,768],[-574,653],[745,-975]],[[896,27],[-226,993],[332,198]],[[323,655],[-89,260],[240,-902]],[[501,-763],[-424,793],[813,616]],[[993,375],[-938,-621],[672,-70]],[[-880,-466],[-283,770],[-824,143]],[[63,-283],[886,-142],[879,-116]],[[-964,-50],[-521,-42],[-306,-161]],[[724,-22],[866,-871],[933,-383]],[[-344,135],[282,966],[-80,917]],[[-281,-189],[420,810],[362,-582]],[[-515,455],[-588,814],[162,332]],[[555,-436],[-123,-210],[869,-943]],[[589,577],[232,286],[-554,876]],[[-773,127],[-58,-171],[-452,125]],[[-428,575],[906,-232],[-10,-224]],[[437,276],[-335,-348],[605,878]],[[-964,511],[-386,-407],[168,-220]],[[307,513],[912,-463],[-423,-416]],[[-445,539],[273,886],[-18,760]],[[-396,-585],[-670,414],[47,364]],[[143,-506],[754,906],[-971,-203]],[[-544,472],[-180,-541],[869,-465]],[[-779,-15],[-396,890],[972,-220]],[[-430,-564],[503,182],[-119,456]],[[89,-10],[-739,399],[506,499]],[[954,162],[-810,-973],[127,870]],[[890,952],[-225,158],[828,237]],[[-868,952],[349,465],[574,750]],[[-915,369],[-975,-596],[-395,-134]],[[-135,-601],[575,582],[-667,640]],[[413,890],[-560,-276],[-555,-562]],[[-633,-269],[561,-820],[-624,499]],[[371,-92],[-784,-593],[864,-717]],[[-971,655],[-439,367],[754,-951]],[[172,-347],[36,279],[-247,-402]],[[633,-301],[364,-349],[-683,-387]],[[-780,-211],[-713,-948],[-648,543]],[[72,58],[762,-465],[-66,462]],[[78,502],[781,-832],[713,836]],[[-431,-64],[-484,-392],[208,-343]],[[-64,101],[-29,-860],[-329,844]],[[398,391],[828,-858],[700,395]],[[578,-896],[-326,-604],[314,180]],[[97,-321],[-695,185],[-357,852]],[[854,839],[283,-375],[951,-209]],[[194,96],[-564,-847],[162,524]],[[-354,532],[494,621],[580,560]],[[419,-678],[-450,926],[-5,-924]],[[-661,905],[519,621],[-143,394]],[[-573,268],[296,-562],[-291,-319]],[[-211,266],[-196,158],[564,-183]],[[18,-585],[-398,777],[-581,864]],[[790,-894],[-745,-604],[-418,70]],[[848,-339],[150,773],[11,851]],[[-954,-809],[-53,-20],[-648,-304]],[[658,-336],[-658,-905],[853,407]],[[-365,-844],[350,-625],[852,-358]],[[986,-315],[-230,-159],[21,180]],[[-15,599],[45,-286],[-941,847]],[[-613,-68],[184,639],[-987,550]],[[334,675],[-56,-861],[923,340]],[[-848,-596],[960,231],[-28,-34]],[[707,-811],[-994,-356],[-167,-171]],[[-470,-764],[72,576],[-600,-204]],[[379,189],[-542,-576],[585,800]],[[440,540],[-445,-563],[379,-334]],[[-155,64],[514,-288],[853,106]],[[-304,751],[481,-520],[-708,-694]],[[-709,132],[594,126],[-844,63]],[[723,471],[421,-138],[-962,892]],[[-440,-263],[39,513],[-672,-954]],[[775,809],[-581,330],[752,-107]],[[-376,-158],[335,-708],[-514,578]],[[-343,-769],[456,-187],[25,413]],[[548,-877],[-172,300],[-500,928]],[[938,-102],[423,-488],[-378,-969]],[[-36,564],[-55,131],[958,-800]],[[-322,511],[-413,503],[700,-847]],[[-966,547],[-88,-17],[-359,-67]],[[637,-341],[-437,-181],[527,-153]],[[-74,449],[-28,3],[485,189]],[[-997,658],[-224,-948],[702,-807]],[[-224,736],[-896,127],[-945,-850]],[[-395,-106],[439,-553],[-128,124]],[[-841,-445],[-758,-572],[-489,212]],[[633,-327],[13,-512],[952,771]],[[-940,-171],[-6,-46],[-923,-425]],[[-142,-442],[-817,-998],[843,-695]],[[340,847],[-137,-920],[-988,-658]],[[-653,217],[-679,-257],[651,-719]],[[-294,365],[-41,342],[74,-892]],[[690,-236],[-541,494],[408,-516]],[[180,-807],[225,790],[494,59]],[[707,605],[-246,656],[284,271]],[[65,294],[152,824],[442,-442]],[[-321,781],[-540,341],[316,415]],[[420,371],[-2,545],[995,248]],[[56,-191],[-604,971],[615,449]],[[-981,-31],[510,592],[-390,-362]],[[-317,-968],[913,365],[97,508]],[[832,63],[-864,-510],[86,202]],[[-483,456],[-636,340],[-310,676]],[[981,-847],[751,-508],[-962,-31]],[[-157,99],[73,797],[63,-172]],[[220,858],[872,924],[866,-381]],[[996,-169],[805,321],[-164,971]],[[896,11],[-625,-973],[-782,76]],[[578,-280],[730,-729],[307,-905]],[[-580,-749],[719,-698],[967,603]],[[-821,874],[-103,-623],[662,-491]],[[-763,117],[661,-644],[672,-607]],[[592,787],[-798,-169],[-298,690]],[[296,644],[-526,-762],[-447,665]],[[534,-818],[852,-120],[57,-379]],[[-986,-549],[-329,294],[954,258]],[[-133,352],[-660,-77],[904,-356]],[[748,343],[215,500],[317,-277]],[[311,7],[910,-896],[-809,795]],[[763,-602],[-753,313],[-352,917]],[[668,619],[-474,-597],[-650,650]],[[-297,563],[-701,-987],[486,-902]],[[-461,-740],[-657,233],[-482,-328]],[[-446,-250],[-986,-458],[-629,520]],[[542,-49],[-327,-469],[257,-947]],[[121,-575],[-634,-143],[-184,521]],[[30,504],[455,-645],[-229,-945]],[[-12,-295],[377,764],[771,125]],[[-686,-133],[225,-25],[-376,-143]],[[-6,-46],[338,270],[-405,-872]],[[-623,-37],[582,467],[963,898]],[[-804,869],[-477,420],[-475,-303]],[[94,41],[-842,-193],[-768,720]],[[-656,-918],[415,645],[-357,460]],[[-47,-486],[-911,468],[-608,-686]],[[-158,251],[419,-394],[-655,-895]],[[272,-695],[979,508],[-358,959]],[[-776,650],[-918,-467],[-690,-534]],[[-85,-309],[-626,167],[-366,-429]],[[-880,-732],[-186,-924],[970,-875]],[[517,645],[-274,962],[-804,544]],[[721,402],[104,640],[478,-499]],[[198,684],[-134,-723],[-452,-905]],[[-245,745],[239,238],[-826,441]],[[-217,206],[-32,462],[-981,-895]],[[-51,989],[526,-173],[560,-676]],[[-480,-659],[-976,-580],[-727,466]],[[-996,-90],[-995,158],[-239,642]],[[302,288],[-194,-294],[17,924]],[[-943,969],[-326,114],[-500,103]],[[-619,163],[339,-880],[230,421]],[[-344,-601],[-795,557],[565,-779]],[[590,345],[-129,-202],[-125,-58]],[[-777,-195],[159,674],[775,411]],[[-939,312],[-665,810],[121,855]],[[-971,254],[712,815],[452,581]],[[442,-9],[327,-750],[61,757]],[[-342,869],[869,-160],[390,-772]],[[620,601],[565,-169],[-69,-183]],[[-25,924],[-817,964],[321,-970]],[[-64,-6],[-133,978],[825,-379]],[[601,436],[-24,98],[-115,940]],[[-97,502],[614,-574],[922,513]],[[-125,262],[-946,695],[99,-220]],[[429,-721],[719,-694],[197,-558]],[[326,689],[-70,-908],[-673,338]],[[-468,-856],[-902,-254],[-358,305]],[[-358,530],[542,355],[-253,-47]],[[-438,-74],[-362,963],[988,788]],[[137,717],[467,622],[319,-380]],[[-86,310],[-336,851],[918,-288]],[[721,395],[646,-53],[255,-425]],[[255,175],[912,84],[-209,878]],[[-632,-485],[-400,-357],[991,-608]],[[235,-559],[992,-297],[857,-591]],[[87,-71],[148,130],[647,578]],[[-290,-584],[-639,-788],[-21,592]],[[386,984],[625,-731],[-993,-336]],[[-538,634],[-209,-828],[-150,-774]],[[-754,-387],[607,-781],[976,-199]],[[412,-798],[-664,295],[709,-537]],[[-412,932],[-880,-232],[561,852]],[[-656,-358],[-198,-964],[-433,-848]],[[-762,-668],[-632,186],[-673,-11]],[[-876,237],[-282,-312],[-83,682]],[[403,73],[-57,-436],[-622,781]],[[-587,873],[798,976],[-39,329]],[[-369,-622],[553,-341],[817,794]],[[-108,-616],[920,-849],[-679,96]],[[290,-974],[234,239],[-284,-321]],[[-22,394],[-417,-419],[264,58]],[[-473,-551],[69,923],[591,-228]],[[-956,662],[-113,851],[-581,-794]],[[-258,-681],[413,-471],[-637,-817]],[[-866,926],[992,-653],[-7,794]],[[556,-350],[602,917],[831,-610]],[[188,245],[-906,361],[492,174]],[[-720,384],[-818,329],[638,-666]],[[-246,846],[890,-325],[-59,-850]],[[-118,-509],[620,-762],[-256,15]],[[-787,-536],[-452,-338],[-399,813]],[[458,560],[525,-311],[-608,-419]],[[494,-811],[-825,-127],[-812,894]],[[-801,890],[-629,-860],[574,925]],[[-709,-193],[-213,138],[-410,-403]],[[861,91],[708,-187],[5,-222]],[[789,646],[777,154],[90,-49]],[[-267,-830],[-114,531],[591,-698]],[[-126,-82],[881,-418],[82,652]],[[-894,130],[-726,-935],[393,-815]],[[-142,563],[654,638],[-712,-597]],[[-759,60],[-23,977],[100,-765]],[[-305,595],[-570,-809],[482,762]],[[-161,-267],[53,963],[998,-529]],[[-300,-57],[798,353],[703,486]],[[-990,696],[-764,699],[-565,719]],[[-232,-205],[566,571],[977,369]],[[740,865],[151,-817],[-204,-293]],[[94,445],[-768,229],[537,-406]],[[861,620],[37,-424],[-36,656]],[[390,-369],[952,733],[-464,569]],[[-482,-604],[959,554],[-705,-626]],[[-396,-615],[-991,108],[272,-723]],[[143,780],[535,142],[-917,-147]],[[138,-629],[-217,-908],[905,115]],[[915,103],[-852,64],[-468,-642]],[[570,734],[-785,-268],[-326,-759]],[[738,531],[-332,586],[-779,24]],[[870,440],[-217,473],[-383,415]],[[-296,-333],[-330,-142],[-924,950]],[[118,120],[-35,-245],[-211,-652]],[[61,634],[153,-243],[838,789]],[[726,-582],[210,105],[983,537]],[[-313,-323],[758,234],[29,848]],[[-847,-172],[-593,733],[-56,617]],[[54,255],[-512,156],[-575,675]],[[-873,-956],[-148,623],[95,200]],[[700,-370],[926,649],[-978,157]],[[-639,-202],[719,130],[747,222]],[[194,-33],[955,943],[505,114]],[[-226,-790],[28,-930],[827,783]],[[-392,-74],[-28,714],[218,-612]],[[209,626],[-888,-683],[-912,495]],[[487,751],[614,933],[631,445]],[[-348,-34],[-411,-106],[835,321]],[[-689,872],[-29,-800],[312,-542]],[[-52,566],[827,570],[-862,-77]],[[471,992],[309,-402],[389,912]],[[24,520],[-83,-51],[555,503]],[[-265,-317],[283,-970],[-472,690]],[[606,526],[137,71],[-651,150]],[[217,-518],[663,66],[-605,-331]],[[-562,232],[-76,-503],[205,-323]],[[842,-521],[546,285],[625,-186]],[[997,-927],[344,909],[-546,974]],[[-677,419],[81,121],[-705,771]],[[719,-379],[-944,-797],[784,-155]],[[-378,286],[-317,-797],[-111,964]],[[-288,-573],[784,80],[-532,-646]],[[-77,407],[-248,-797],[769,-816]],[[-24,-637],[287,-858],[-927,-333]],[[-902,37],[894,-823],[141,684]],[[125,467],[-177,-516],[686,399]],[[-321,-542],[641,-590],[527,-224]],[[-400,-712],[-876,-208],[632,-543]],[[-676,-429],[664,-242],[-269,922]],[[-608,-273],[-141,930],[687,380]],[[786,-12],[498,494],[310,326]],[[-739,-617],[606,-960],[804,188]],[[384,-368],[-243,-350],[-459,31]],[[-550,397],[320,-868],[328,-279]],[[969,-179],[853,864],[-110,514]],[[910,793],[302,-822],[-285,488]],[[-605,-128],[218,-283],[-17,-227]],[[16,324],[667,708],[750,3]],[[485,-813],[19,585],[71,930]],[[-218,816],[-687,-97],[-732,-360]],[[-497,-151],[376,-23],[3,315]],[[-412,-989],[-610,-813],[372,964]],[[-878,-280],[87,381],[-311,69]],[[-609,-90],[-731,-679],[150,585]],[[889,27],[-162,605],[75,-770]],[[448,617],[-988,0],[-103,-504]],[[-800,-537],[-69,627],[608,-668]],[[534,686],[-664,942],[830,920]],[[-238,775],[495,932],[-793,497]],[[-343,958],[-914,-514],[-691,651]],[[568,-136],[208,359],[728,28]],[[286,912],[-794,683],[556,-102]],[[-638,-629],[-484,445],[-64,-497]],[[58,505],[-801,-110],[872,632]],[[-390,777],[353,267],[976,369]],[[-993,515],[105,-133],[358,-572]],[[964,996],[355,-212],[-667,38]],[[-725,-614],[-35,365],[132,-196]],[[237,-536],[-416,-302],[312,477]],[[-664,574],[-210,224],[48,-925]],[[869,-261],[-256,-240],[-3,-698]],[[712,385],[32,-34],[916,-315]],[[895,-409],[-100,-346],[728,-624]],[[-806,327],[-450,889],[-781,-939]],[[-586,-403],[698,318],[-939,899]],[[557,-57],[-920,659],[333,-51]],[[-441,232],[-918,-205],[246,1]],[[783,167],[-797,-595],[245,-736]],[[-36,-531],[-486,-426],[-813,-160]],[[777,-843],[817,313],[-228,-572]],[[735,866],[-309,-564],[-81,190]],[[-413,645],[101,719],[-719,218]],[[-83,164],[767,796],[-430,-459]],[[122,779],[-15,-295],[-96,-892]],[[462,379],[70,548],[834,-312]],[[-630,-534],[124,187],[-737,114]],[[-299,-604],[318,-591],[936,826]],[[-879,218],[-642,-483],[-318,-866]],[[-691,62],[-658,761],[-895,-854]],[[-822,493],[687,569],[910,-202]],[[-223,784],[304,-5],[541,925]],[[-914,541],[737,-662],[-662,-195]],[[-622,615],[414,358],[881,-878]],[[339,745],[-268,-968],[-280,-227]],[[-364,855],[148,-709],[-827,472]],[[-890,-532],[-41,664],[-612,577]],[[-702,-859],[971,-722],[-660,-920]],[[-539,-605],[737,149],[973,-802]],[[800,42],[-448,-811],[152,511]],[[-933,377],[-110,-105],[-374,-937]],[[-766,152],[482,120],[-308,390]],[[-568,775],[-292,899],[732,890]],[[-177,-317],[-502,-259],[328,-511]],[[612,-696],[-574,-660],[132,31]],[[-119,563],[-805,-864],[179,-672]],[[425,-627],[183,-331],[839,318]],[[-711,-976],[-749,152],[-916,261]],[[181,-63],[497,211],[262,406]],[[-537,700],[-859,-765],[-928,77]],[[892,832],[231,-749],[-82,613]],[[816,216],[-642,-216],[-669,-912]],[[-6,624],[-937,-370],[-344,268]],[[737,-710],[-869,983],[-324,-274]],[[565,952],[-547,-158],[374,-444]],[[51,-683],[645,-845],[515,636]],[[-953,-631],[114,-377],[-764,-144]],[[-8,470],[-242,-399],[-675,-730]],[[-540,689],[-20,47],[-607,590]],[[-329,-710],[-779,942],[-388,979]],[[123,829],[674,122],[203,563]],[[46,782],[396,-33],[386,610]],[[872,-846],[-523,-122],[-55,-190]],[[388,-994],[-525,974],[127,596]],[[781,-680],[796,-34],[-959,-62]],[[-749,173],[200,-384],[-745,-446]],[[379,618],[136,-250],[-224,970]],[[-58,240],[-921,-760],[-901,-626]],[[366,-185],[565,-100],[515,688]],[[489,999],[-893,-263],[-637,816]],[[838,-496],[-316,-513],[419,479]],[[107,676],[-15,882],[98,-397]],[[-999,941],[-903,-424],[670,-325]],[[171,-979],[835,178],[169,-984]],[[-609,-607],[378,-681],[184,402]],[[-316,903],[-575,-800],[224,983]],[[591,-18],[-460,551],[-167,918]],[[-756,405],[-117,441],[163,-320]],[[456,24],[6,881],[-836,-539]],[[-489,-585],[915,651],[-892,-382]],[[-177,-122],[73,-711],[-386,591]],[[181,724],[530,686],[-131,241]],[[737,288],[886,216],[233,33]],[[-548,-386],[-749,-153],[-85,-982]],[[-835,227],[904,160],[-99,25]],[[-9,-42],[-162,728],[840,-963]],[[217,-763],[870,771],[47,-846]],[[-595,808],[-491,556],[337,-900]],[[-134,281],[-724,441],[-134,708]],[[-789,-508],[651,-962],[661,315]],[[-839,-923],[339,402],[41,-487]],[[300,-790],[48,703],[-398,-811]],[[955,-51],[462,-685],[960,-717]],[[910,-880],[592,-255],[-51,-776]],[[-885,169],[-793,368],[-565,458]],[[-905,940],[-492,-630],[-535,-988]],[[245,797],[763,869],[-82,550]],[[-310,38],[-933,-367],[-650,824]],[[-95,32],[-83,337],[226,990]],[[-218,-975],[-191,-208],[-785,-293]],[[-672,-953],[517,-901],[-247,465]],[[681,-148],[261,-857],[544,-923]],[[640,341],[446,-618],[195,769]],[[384,398],[-846,365],[671,815]],[[578,576],[-911,907],[762,-859]],[[548,-428],[144,-630],[-759,-146]],[[710,-73],[-700,983],[-97,-889]],[[-46,898],[-973,-362],[-817,-717]],[[151,-81],[-125,-900],[-478,-154]],[[483,615],[-537,-932],[181,-68]],[[786,-223],[518,25],[-306,-12]],[[-422,268],[-809,-683],[635,468]],[[983,-734],[-694,-608],[-110,4]],[[-786,-196],[749,-354],[137,-8]],[[-181,36],[668,-200],[691,-973]],[[-629,-838],[692,-736],[437,-871]],[[-208,-536],[-159,-596],[8,197]],[[-3,370],[-686,170],[913,-376]],[[44,-998],[-149,-993],[-200,512]],[[-519,136],[859,497],[536,434]],[[77,-985],[972,-340],[-705,-837]],[[-381,947],[250,360],[344,322]],[[-26,131],[699,750],[707,384]],[[-914,655],[299,193],[406,955]],[[-883,-921],[220,595],[-546,794]],[[-599,577],[-569,-404],[-704,489]],[[-594,-963],[-624,-460],[880,-760]],[[-603,88],[-99,681],[55,-328]],[[976,472],[139,-453],[-531,-860]],[[192,-290],[513,-89],[666,432]],[[417,487],[575,293],[567,-668]],[[655,711],[-162,449],[-980,972]],[[-505,664],[-685,-239],[603,-592]],[[-625,-802],[-67,996],[384,-636]],[[365,-593],[522,-666],[-200,-431]],[[-868,708],[560,-860],[-630,-355]],[[-702,785],[-637,-611],[-597,960]],[[-137,-696],[-93,-803],[408,406]],[[891,-123],[-26,-609],[-610,518]],[[133,-832],[-198,555],[708,-110]],[[791,617],[-69,487],[696,315]],[[-900,694],[-565,517],[-269,-416]],[[914,135],[-781,600],[-71,-600]],[[991,-915],[-422,-351],[-837,313]],[[-840,-398],[-302,21],[590,146]],[[62,-558],[-702,-384],[-625,831]],[[-363,-426],[-924,-496],[792,-908]],[[73,361],[-817,-466],[400,922]],[[-626,-164],[-626,860],[-524,286]],[[255,26],[-944,809],[-606,986]],[[-457,-256],[-103,50],[-867,-871]],[[-223,803],[196,480],[612,136]],[[-820,-928],[700,780],[-977,721]],[[717,332],[53,-933],[-128,793]],[[-602,-648],[562,593],[890,702]],[[-469,-875],[-527,911],[-475,-222]],[[110,-281],[-552,-536],[-816,596]],[[-981,654],[413,-981],[-75,-95]],[[-754,-742],[-515,894],[-220,-344]],[[795,-52],[156,408],[-603,76]],[[474,-157],[423,-499],[-807,-791]],[[260,688],[40,-52],[702,-122]],[[-584,-517],[-390,-881],[302,-504]],[[61,797],[665,708],[14,668]],[[366,166],[458,-614],[564,-983]],[[72,539],[-378,796],[381,-824]],[[-485,201],[-588,842],[736,379]],[[-149,-894],[-298,705],[-303,-406]],[[660,-935],[-580,521],[93,633]],[[-382,-282],[-375,-841],[-828,171]],[[-567,743],[-100,43],[144,122]],[[-281,-786],[-749,-551],[296,304]],[[11,-426],[-792,212],[857,-175]],[[594,143],[-699,289],[315,137]],[[341,596],[-390,107],[-631,-804]],[[-751,-636],[-424,-854],[193,651]],[[-145,384],[749,675],[-786,517]],[[224,-865],[-323,96],[-916,258]],[[-309,403],[-388,826],[35,-270]],[[-942,709],[222,158],[-699,-103]],[[-589,842],[-997,29],[-195,-210]],[[264,426],[566,145],[-217,623]],[[217,965],[507,-601],[-453,507]],[[-206,307],[-982,4],[64,-292]],[[676,-49],[-38,-701],[550,883]],[[5,-850],[-438,659],[745,-773]],[[933,238],[-574,-570],[91,-33]],[[-866,121],[-928,358],[459,-843]],[[-568,-631],[-352,-580],[-349,189]],[[-737,849],[-963,-486],[-662,970]],[[135,334],[-967,-71],[-365,-792]],[[789,21],[-227,51],[990,-275]],[[240,412],[-886,230],[591,256]],[[-609,472],[-853,-754],[959,661]],[[401,521],[521,314],[929,982]],[[-499,784],[-208,71],[-302,296]],[[-557,-948],[-553,-526],[-864,793]],[[270,-626],[828,44],[37,14]],[[-412,224],[617,-593],[502,699]],[[41,-908],[81,562],[-849,163]],[[165,917],[761,-197],[331,-341]],[[-687,314],[799,755],[-969,648]],[[-164,25],[578,439],[-334,-576]],[[213,535],[874,-177],[-551,24]],[[-689,291],[-795,-225],[-496,-125]],[[465,461],[558,-118],[-568,-909]],[[567,660],[-810,46],[-485,878]],[[-147,606],[685,-690],[-774,984]],[[568,-886],[-43,854],[-738,616]],[[-800,386],[-614,585],[764,-226]],[[-518,23],[-225,-732],[-79,440]],[[-173,-291],[-689,636],[642,-447]],[[-598,-16],[227,410],[496,211]],[[-474,-930],[-656,-321],[-420,36]],[[-435,165],[-819,555],[540,144]],[[-969,149],[828,568],[394,648]],[[65,-848],[257,720],[-625,-851]],[[981,899],[275,635],[465,-877]],[[80,290],[792,760],[-191,-321]],[[-605,-858],[594,33],[706,593]],[[585,-472],[318,-35],[354,-927]],[[-365,664],[803,581],[-965,-814]],[[-427,-238],[-480,146],[-55,-606]],[[879,-193],[250,-890],[336,117]],[[-226,-322],[-286,-765],[-836,-218]],[[-913,564],[-667,-698],[937,283]],[[872,-901],[810,-623],[-52,-709]],[[473,171],[717,38],[-429,-644]],[[225,824],[-219,-475],[-180,234]],[[-530,-797],[-948,238],[851,-623]],[[85,975],[-363,529],[598,28]],[[-799,166],[-804,210],[-769,851]],[[-687,-158],[885,736],[-381,-461]],[[447,592],[928,-514],[-515,-661]],[[-399,-777],[-493,80],[-544,-78]],[[-884,631],[171,-825],[-333,551]],[[191,268],[-577,676],[137,-33]],[[212,-853],[709,798],[583,-56]],[[-908,-172],[-540,-84],[-135,-56]],[[303,311],[406,-360],[-240,811]],[[798,-708],[824,59],[234,-57]],[[491,693],[-74,585],[-85,877]],[[509,-65],[-936,329],[-51,722]],[[-122,858],[-52,467],[-77,-609]],[[850,760],[547,-495],[-953,-952]],[[-460,-541],[890,910],[286,724]],[[-914,843],[-579,-983],[-387,-460]],[[989,-171],[-877,-326],[-899,458]],[[846,175],[-915,540],[-1000,-982]],[[-852,-920],[-306,496],[530,-18]],[[338,-991],[160,85],[-455,-661]],[[-186,-311],[-460,-563],[-231,-414]],[[-932,-302],[959,597],[793,748]],[[-366,-402],[-788,-279],[514,53]],[[-940,-956],[447,-956],[211,-285]],[[564,806],[-911,-914],[934,754]],[[575,-858],[-277,15],[409,-714]],[[848,462],[100,-381],[135,242]],[[330,718],[-24,-190],[860,-78]],[[479,458],[941,108],[-866,-653]],[[212,980],[962,-962],[115,841]],[[-827,-474],[-206,881],[323,765]],[[506,-45],[-30,-293],[524,-133]],[[832,-173],[547,-852],[-561,-842]],[[-397,-661],[-708,819],[-545,-228]],[[521,51],[-489,852],[36,-258]],[[227,-164],[189,465],[-987,-882]],[[-73,-997],[641,-995],[449,-615]],[[151,-995],[-638,415],[257,-400]],[[-663,-297],[-748,537],[-734,198]],[[-585,-401],[-81,-782],[-80,-105]],[[99,-21],[238,-365],[-704,-368]],[[45,416],[849,-211],[-371,-1]],[[-404,-443],[795,-406],[36,-933]],[[272,-363],[981,-491],[-380,77]],[[713,-342],[-366,-849],[643,911]],[[-748,671],[-537,813],[961,-200]],[[-194,-909],[703,-662],[-601,188]],[[281,500],[724,286],[267,197]],[[-832,847],[-595,820],[-316,637]],[[520,521],[-54,261],[923,-10]],[[4,-808],[-682,-258],[441,-695]],[[-793,-107],[-969,905],[798,446]],[[-108,-739],[-590,69],[-855,-365]],[[380,-623],[-930,817],[468,713]],[[759,-849],[-236,433],[-723,-931]],[[95,-320],[-686,124],[-69,-329]],[[-655,518],[-210,-523],[284,-866]],[[144,303],[639,70],[-171,269]],[[173,-333],[947,-304],[55,40]],[[274,878],[-482,-888],[-835,375]],[[-982,-854],[-36,-218],[-114,-230]],[[905,-979],[488,-485],[-479,114]],[[877,-157],[553,-530],[-47,-321]],[[350,664],[-881,442],[-220,-284]],[[434,-423],[-365,878],[-726,584]],[[535,909],[-517,-447],[-660,-141]],[[-966,191],[50,353],[182,-642]],[[-785,-634],[123,-907],[-162,511]],[[146,-850],[-214,814],[-704,25]],[[692,1],[521,492],[-637,274]],[[-662,-372],[-313,597],[983,-647]],[[-962,-526],[68,-549],[-819,231]],[[740,-890],[-318,797],[-666,948]],[[-190,-12],[-468,-455],[948,284]],[[16,478],[-506,-888],[628,-154]],[[272,630],[-976,308],[433,3]],[[-169,-391],[-132,189],[302,-388]],[[109,-784],[474,-167],[-265,-31]],[[-177,-532],[283,464],[421,-73]],[[650,635],[592,-138],[1,-387]],[[-932,703],[-827,-492],[-355,686]],[[586,-311],[340,-618],[645,-434]],[[-951,736],[647,-127],[-303,590]],[[188,444],[903,718],[-931,500]],[[-872,-642],[-296,-571],[337,241]],[[23,65],[152,125],[880,470]],[[512,823],[-42,217],[823,-263]],[[180,-831],[-380,886],[607,762]],[[722,443],[-149,-216],[-115,759]],[[-19,660],[-36,901],[923,231]],[[562,-322],[-626,-968],[194,-825]],[[204,-920],[938,784],[362,150]],[[-410,-266],[-715,559],[-672,124]],[[-198,446],[-140,454],[-461,-447]],[[83,-346],[830,-493],[-759,-382]],[[-881,601],[581,234],[-134,-925]],[[-494,914],[-42,899],[235,629]],[[-390,50],[956,437],[774,-700]],[[-514,514],[44,-512],[-576,-313]],[[63,-688],[808,-534],[-570,-399]],[[-726,572],[-896,102],[-294,-28]],[[-688,757],[401,406],[955,-511]],[[-283,423],[-485,480],[-767,908]],[[-541,952],[-594,116],[-854,451]],[[-273,-796],[236,625],[-626,257]],[[-407,-493],[373,826],[-309,297]],[[-750,955],[-476,641],[-809,713]],[[8,415],[695,226],[-111,2]],[[733,209],[152,-920],[401,995]],[[921,-103],[-919,66],[871,-947]],[[-907,89],[-869,-214],[851,-559]],[[-307,748],[524,-755],[314,-711]],[[188,897],[-72,-763],[482,103]],[[545,-821],[-232,-596],[-334,-754]],[[-217,-788],[-820,388],[-200,-662]],[[779,160],[-723,-975],[-142,-998]],[[-978,-519],[-78,-981],[842,904]],[[-504,-736],[-295,21],[-472,-482]],[[391,115],[-705,574],[652,-446]],[[813,-988],[865,830],[-263,487]],[[194,80],[774,-493],[-761,-872]],[[-415,-284],[-803,7],[-810,670]],[[-484,-4],[881,-872],[55,-852]],[[-379,822],[-266,324],[-48,748]],[[-304,-278],[406,-60],[959,-89]],[[404,756],[577,-643],[-332,658]],[[291,460],[125,491],[-312,83]],[[311,-734],[-141,582],[282,-557]],[[-450,-661],[-981,710],[-177,794]],[[328,264],[-787,971],[-743,-407]],[[-622,518],[993,-241],[-738,229]],[[273,-826],[-254,-917],[-710,-111]],[[809,770],[96,368],[-818,725]],[[-488,773],[502,-342],[534,745]],[[-28,-414],[236,-315],[-484,363]],[[179,-466],[-566,713],[-683,56]],[[560,-240],[-597,619],[916,-940]],[[893,473],[872,-868],[-642,-461]],[[799,489],[383,-321],[-776,-833]],[[980,490],[-508,764],[-512,-426]],[[917,961],[-16,-675],[440,559]],[[-812,212],[784,-987],[-132,554]],[[-886,454],[747,806],[190,231]],[[910,341],[21,-66],[708,725]],[[29,929],[-831,-494],[-303,389]],[[-103,492],[-271,-174],[-515,529]],[[-292,119],[419,788],[247,-951]],[[483,543],[-347,-673],[664,-549]],[[-926,-871],[-437,337],[162,-877]],[[299,472],[-771,5],[-88,-643]],[[-103,525],[-725,-998],[264,22]],[[-505,708],[550,-545],[823,347]],[[-738,931],[59,147],[-156,-259]],[[456,968],[-162,889],[132,-911]],[[535,120],[968,-517],[-864,-541]],[[24,-395],[-593,-766],[-565,-332]],[[834,611],[825,-576],[280,629]],[[211,-548],[140,-278],[-592,929]],[[-999,-240],[-63,-78],[793,573]],[[-573,160],[450,987],[529,322]],[[63,353],[315,-187],[-461,577]],[[189,-950],[-247,656],[289,241]],[[209,-297],[397,664],[-805,484]],[[-655,452],[435,-556],[917,874]],[[253,-756],[262,-888],[-778,-214]],[[793,-451],[323,-251],[-401,-458]],[[-396,619],[-651,-287],[-668,-781]],[[698,720],[-349,742],[-807,546]],[[738,280],[680,279],[-540,858]],[[-789,387],[530,-36],[-551,-491]],[[162,579],[-427,-272],[228,710]],[[689,356],[917,-580],[729,217]],[[-115,-638],[866,424],[-82,-194]],[[411,-338],[-917,172],[227,-29]],[[-612,63],[630,-976],[-64,-204]],[[-200,911],[583,-571],[682,-579]],[[91,298],[396,-183],[788,-955]],[[141,-873],[-277,149],[-396,916]],[[321,958],[-136,573],[541,-777]],[[797,-909],[-469,-877],[988,-653]],[[784,-198],[129,883],[-203,399]],[[-68,-810],[223,-423],[-467,-512]],[[531,-445],[-603,-997],[-841,641]],[[-274,-242],[174,261],[-636,-158]],[[-574,494],[-796,-798],[-798,99]],[[95,-82],[-613,-954],[-753,986]],[[-883,-448],[-864,-401],[938,-392]],[[913,930],[-542,-988],[310,410]],[[506,-99],[43,512],[790,-222]],[[724,31],[49,-950],[260,-134]],[[-287,-947],[-234,-700],[56,588]],[[-33,782],[-144,948],[105,-791]],[[548,-546],[-652,-293],[881,-520]],[[691,-91],[76,991],[-631,742]],[[-520,-429],[-244,-296],[724,-48]],[[778,646],[377,50],[-188,56]],[[-895,-507],[-898,-165],[-674,652]],[[654,584],[-634,177],[-349,-620]],[[114,-980],[355,62],[182,975]],[[516,9],[-442,-298],[274,-579]],[[-238,262],[-431,-896],[506,-850]],[[47,748],[846,821],[-537,-293]],[[839,726],[593,285],[-297,840]],[[634,-486],[468,-304],[-887,-567]],[[-864,914],[296,-124],[335,233]],[[88,-253],[-523,-956],[-554,803]],[[-587,417],[281,-62],[-409,-363]],[[-136,-39],[-292,-768],[-264,876]],[[-127,506],[-891,-331],[-744,-430]],[[778,584],[-750,-129],[-479,-94]],[[-876,-771],[-987,-757],[180,-641]],[[-777,-694],[411,-87],[329,190]],[[-347,-999],[-882,158],[-754,232]],[[-105,918],[188,237],[-110,-591]],[[-209,703],[-838,77],[838,909]],[[-995,-339],[-762,750],[860,472]],[[185,271],[-289,173],[811,-300]],[[2,65],[-656,-22],[36,-139]],[[765,-210],[883,974],[961,-905]],[[-212,295],[-615,-840],[77,474]],[[211,-910],[-440,703],[-11,859]],[[-559,-4],[-196,841],[-277,969]],[[-73,-159],[-887,126],[978,-371]],[[-569,633],[-423,-33],[512,-393]],[[503,143],[-383,-109],[-649,-998]],[[-663,339],[-317,-523],[-2,596]],[[690,-380],[570,378],[-652,132]],[[72,-744],[-930,399],[-525,935]],[[865,-983],[115,37],[995,826]],[[594,-621],[-872,443],[188,-241]],[[-1000,291],[754,234],[-435,-869]],[[-868,901],[654,-907],[59,181]],[[-868,-793],[-431,596],[-446,-564]],[[900,-944],[-680,-796],[902,-366]],[[331,430],[943,853],[-851,-942]],[[315,-538],[-354,-909],[139,721]],[[170,-884],[-225,-818],[-808,-657]],[[-279,-34],[-533,-871],[-972,552]],[[691,-986],[-800,-950],[654,-747]],[[603,988],[899,841],[-630,591]],[[876,-949],[809,562],[602,-536]],[[-693,363],[-189,495],[738,-1000]],[[-383,431],[-633,297],[665,959]],[[-740,686],[-207,-803],[188,-520]],[[-820,226],[31,-339],[10,121]],[[-312,-844],[624,-516],[483,621]],[[-822,-529],[69,-278],[800,328]],[[834,-82],[-759,420],[811,-264]],[[-960,-240],[-921,561],[173,46]],[[-324,909],[-790,-814],[-2,-785]],[[976,334],[-290,-891],[704,-581]],[[150,-798],[689,-823],[237,-639]],[[-551,-320],[876,-502],[-622,-628]],[[-136,845],[904,595],[-702,-261]],[[-857,-377],[-522,-101],[-943,-805]],[[-682,-787],[-888,-459],[-752,-985]],[[-571,-81],[623,-133],[447,643]],[[-375,-158],[72,-387],[-324,-696]],[[-660,-650],[340,188],[569,526]],[[727,-218],[16,-7],[-595,-988]],[[-966,-684],[802,-783],[-272,-194]],[[115,-566],[-888,47],[712,180]],[[-237,-69],[45,-272],[981,-812]],[[48,897],[439,417],[50,325]],[[348,616],[180,254],[104,-784]],[[-730,811],[-548,612],[-736,790]],[[138,-810],[123,930],[65,865]],[[-768,-299],[-49,-895],[-692,-418]],[[487,-531],[802,-159],[-12,634]],[[808,-179],[552,-73],[470,717]],[[720,-644],[886,-141],[625,144]],[[-485,-505],[-347,-244],[-916,66]],[[600,-565],[995,-5],[324,227]],[[-771,-35],[904,-482],[753,-303]],[[-701,65],[426,-763],[-504,-479]],[[409,733],[-823,475],[64,718]],[[865,975],[368,893],[-413,-433]],[[812,-597],[-970,819],[813,624]],[[193,-642],[-381,-560],[545,398]],[[711,28],[-316,771],[717,-865]],[[-509,462],[809,-136],[786,635]],[[618,-49],[484,169],[635,547]],[[-747,685],[-882,-496],[-332,82]],[[-501,-851],[870,563],[290,570]],[[-279,-829],[-509,397],[457,816]],[[-508,80],[850,-188],[483,-326]],[[860,-100],[360,119],[-205,787]],[[-870,21],[-39,-827],[-185,932]],[[826,284],[-136,-866],[-330,-97]],[[-944,-82],[745,899],[-97,365]],[[929,262],[564,632],[-115,632]],[[244,-276],[713,330],[-897,-214]],[[-890,-109],[664,876],[-974,-907]],[[716,249],[816,489],[723,141]],[[-96,-560],[-272,45],[-70,645]],[[762,-503],[414,-828],[-254,-646]],[[909,-13],[903,-422],[-344,-10]],[[658,-486],[743,545],[50,674]],[[-241,507],[-367,18],[-48,-241]],[[886,-268],[884,-762],[120,-486]],[[-412,-528],[879,-647],[223,-393]],[[851,810],[234,937],[-726,797]],[[-999,942],[839,-134],[-996,-189]],[[100,979],[-527,-521],[378,800]],[[544,-844],[-832,-530],[-77,-641]],[[43,889],[31,442],[-934,-503]],[[-330,-370],[-309,-439],[173,547]],[[169,945],[62,-753],[-542,-597]],[[208,751],[-372,-647],[-520,70]],[[765,-840],[907,-257],[379,918]],[[334,-135],[-689,730],[-427,618]],[[137,-508],[66,-695],[78,169]],[[-962,-123],[400,-417],[151,969]],[[328,689],[666,427],[-555,-642]],[[-907,343],[605,-341],[-647,582]],[[-667,-363],[-571,818],[-265,-399]],[[525,-938],[904,898],[725,692]],[[-176,-802],[-858,-9],[780,275]],[[580,170],[-740,287],[691,-97]],[[365,557],[-375,361],[-288,859]],[[193,737],[842,-808],[520,282]],[[-871,65],[-799,836],[179,-720]],[[958,-144],[744,-789],[797,-48]],[[122,582],[662,912],[68,757]],[[595,241],[-801,513],[388,186]],[[-103,-677],[-259,-731],[-281,-857]],[[921,319],[-696,683],[-88,-997]],[[775,200],[78,858],[648,768]],[[316,821],[-763,68],[-290,-741]],[[564,664],[691,504],[760,787]],[[694,-119],[973,-385],[309,-760]],[[777,-947],[-57,990],[74,19]],[[971,626],[-496,-781],[-602,-239]],[[-651,433],[11,-339],[939,294]],[[-965,-728],[560,569],[-708,-247]]
+];
+```
+
+## --seed-contents--
+
+```js
+function triangleContainment(triangles) {
+
+  return true;
+}
+
+const testTriangles1 = [
+  [[-866,121],[-928,358],[459,-843]],[[-568,-631],[-352,-580],[-349,189]],[[-737,849],[-963,-486],[-662,970]],[[135,334],[-967,-71],[-365,-792]],[[789,21],[-227,51],[990,-275]],[[240,412],[-886,230],[591,256]],[[-609,472],[-853,-754],[959,661]],[[401,521],[521,314],[929,982]],[[-499,784],[-208,71],[-302,296]],[[-557,-948],[-553,-526],[-864,793]],[[270,-626],[828,44],[37,14]],[[-412,224],[617,-593],[502,699]],[[41,-908],[81,562],[-849,163]],[[165,917],[761,-197],[331,-341]],[[-687,314],[799,755],[-969,648]],[[-164,25],[578,439],[-334,-576]],[[213,535],[874,-177],[-551,24]],[[-689,291],[-795,-225],[-496,-125]],[[465,461],[558,-118],[-568,-909]],[[567,660],[-810,46],[-485,878]],[[-147,606],[685,-690],[-774,984]],[[568,-886],[-43,854],[-738,616]],[[-800,386],[-614,585],[764,-226]],[[-518,23],[-225,-732],[-79,440]],[[-173,-291],[-689,636],[642,-447]],[[-598,-16],[227,410],[496,211]],[[-474,-930],[-656,-321],[-420,36]],[[-435,165],[-819,555],[540,144]],[[-969,149],[828,568],[394,648]],[[65,-848],[257,720],[-625,-851]],[[981,899],[275,635],[465,-877]],[[80,290],[792,760],[-191,-321]],[[-605,-858],[594,33],[706,593]],[[585,-472],[318,-35],[354,-927]],[[-365,664],[803,581],[-965,-814]],[[-427,-238],[-480,146],[-55,-606]],[[879,-193],[250,-890],[336,117]],[[-226,-322],[-286,-765],[-836,-218]],[[-913,564],[-667,-698],[937,283]],[[872,-901],[810,-623],[-52,-709]],[[473,171],[717,38],[-429,-644]],[[225,824],[-219,-475],[-180,234]],[[-530,-797],[-948,238],[851,-623]],[[85,975],[-363,529],[598,28]],[[-799,166],[-804,210],[-769,851]],[[-687,-158],[885,736],[-381,-461]],[[447,592],[928,-514],[-515,-661]],[[-399,-777],[-493,80],[-544,-78]],[[-884,631],[171,-825],[-333,551]],[[191,268],[-577,676],[137,-33]],[[212,-853],[709,798],[583,-56]],[[-908,-172],[-540,-84],[-135,-56]],[[303,311],[406,-360],[-240,811]],[[798,-708],[824,59],[234,-57]],[[491,693],[-74,585],[-85,877]],[[509,-65],[-936,329],[-51,722]],[[-122,858],[-52,467],[-77,-609]],[[850,760],[547,-495],[-953,-952]],[[-460,-541],[890,910],[286,724]],[[-914,843],[-579,-983],[-387,-460]],[[989,-171],[-877,-326],[-899,458]],[[846,175],[-915,540],[-1000,-982]],[[-852,-920],[-306,496],[530,-18]],[[338,-991],[160,85],[-455,-661]],[[-186,-311],[-460,-563],[-231,-414]],[[-932,-302],[959,597],[793,748]],[[-366,-402],[-788,-279],[514,53]],[[-940,-956],[447,-956],[211,-285]],[[564,806],[-911,-914],[934,754]],[[575,-858],[-277,15],[409,-714]]
+];
+
+triangleContainment(testTriangles1);
+```
+
+# --solutions--
+
+```js
+function triangleContainment(triangles) {
+  function isInTriangle(triangle, point) {
+    // Based on https://stackoverflow.com/a/14382692
+    const area = triangleArea(triangle);
+    const s = getS(area, point, triangle);
+    const t = getT(area, point, triangle);
+
+    if (s > 0 && t > 0 && 1 - s - t > 0) {
+      return true;
+    }
+    return false;
+  }
+
+  function getS(area, point, triangle) {
+    return (
+      (1 / (2 * area)) *
+      (triangle.A.y * triangle.C.x -
+        triangle.A.x * triangle.C.y +
+        point.x * (triangle.C.y - triangle.A.y) +
+        point.y * (triangle.A.x - triangle.C.x))
+    );
+  }
+
+  function getT(area, point, triangle) {
+    return (
+      (1 / (2 * area)) *
+      (triangle.A.x * triangle.B.y -
+        triangle.A.y * triangle.B.x +
+        point.x * (triangle.A.y - triangle.B.y) +
+        point.y * (triangle.B.x - triangle.A.x))
+    );
+  }
+
+  function triangleArea(triangle) {
+    return (
+      0.5 *
+      (-triangle.B.y * triangle.C.x +
+        triangle.A.y * (-triangle.B.x + triangle.C.x) +
+        triangle.A.x * (triangle.B.y - triangle.C.y) +
+        triangle.B.x * triangle.C.y)
+    );
+  }
+
+  function parseTriangle(triangle) {
+    const points = [];
+    for (let i = 0; i < triangle.length; i++) {
+      const [coordinateX, coordinateY] = triangle[i];
+      points.push({ x: coordinateX, y: coordinateY });
+    }
+    const [pointA, pointB, pointC] = points;
+    return {
+      A: pointA,
+      B: pointB,
+      C: pointC
+    };
+  }
+
+  const origin = { x: 0, y: 0 };
+
+  let trianglesInside = 0;
+  for (let i = 0; i < triangles.length; i++) {
+    const triangle = parseTriangle(triangles[i]);
+
+    if (isInTriangle(triangle, origin)) {
+      trianglesInside++;
+    }
+  }
+  return trianglesInside;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-103-special-subset-sums-optimum.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-103-special-subset-sums-optimum.md
new file mode 100644
index 00000000000..bf85eef1f76
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-103-special-subset-sums-optimum.md
@@ -0,0 +1,56 @@
+---
+id: 5900f3d61000cf542c50fee7
+title: 'Problem 103: Special subset sums: optimum'
+challengeType: 1
+forumTopicId: 301727
+dashedName: problem-103-special-subset-sums-optimum
+---
+
+# --description--
+
+Let $S(A)$ represent the sum of elements in set A of size n. We shall call it a special sum set if for any two non-empty disjoint subsets, B and C, the following properties are true:
+
+1. $S(B) ≠ S(C)$; that is, sums of subsets cannot be equal.
+2. If B contains more elements than C then $S(B) > S(C)$.
+
+If $S(A)$ is minimised for a given n, we shall call it an optimum special sum set. The first five optimum special sum sets are given below.
+
+$$\begin{align}   & n = 1: \\{1\\} \\\\
+  & n = 2: \\{1, 2\\} \\\\   & n = 3: \\{2, 3, 4\\} \\\\
+  & n = 4: \\{3, 5, 6, 7\\} \\\\   & n = 5: \\{6, 9, 11, 12, 13\\} \\\\
+\end{align}$$
+
+It seems that for a given optimum set, $A = \\{a_1, a_2, \ldots, a_n\\}$, the next optimum set is of the form $B = \\{b, a_1 + b, a_2 + b, \ldots, a_n + b\\}$, where b is the "middle" element on the previous row.
+
+By applying this "rule" we would expect the optimum set for $n = 6$ to be $A = \\{11, 17, 20, 22, 23, 24\\}$, with $S(A) = 117$. However, this is not the optimum set, as we have merely applied an algorithm to provide a near optimum set. The optimum set for $n = 6$ is $A = \\{11, 18, 19, 20, 22, 25\\}$, with $S(A) = 115$ and corresponding set string: `111819202225`.
+
+Given that A is an optimum special sum set for $n = 7$, find its set string.
+
+**Note:** This problem is related to Problem 105 and Problem 106.
+
+# --hints--
+
+`optimumSpecialSumSet()` should return the string `20313839404245`.
+
+```js
+assert.strictEqual(optimumSpecialSumSet(), '20313839404245');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function optimumSpecialSumSet() {
+
+  return true;
+}
+
+optimumSpecialSumSet();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-104-pandigital-fibonacci-ends.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-104-pandigital-fibonacci-ends.md
new file mode 100644
index 00000000000..baa7dcbfdbd
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-104-pandigital-fibonacci-ends.md
@@ -0,0 +1,44 @@
+---
+id: 5900f3d51000cf542c50fee6
+title: 'Problem 104: Pandigital Fibonacci ends'
+challengeType: 1
+forumTopicId: 301728
+dashedName: problem-104-pandigital-fibonacci-ends
+---
+
+# --description--
+
+The Fibonacci sequence is defined by the recurrence relation:
+
+$F_n = F_{n − 1} + F_{n − 2}$, where $F_1 = 1$ and $F_2 = 1$
+
+It turns out that $F_{541}$, which contains 113 digits, is the first Fibonacci number for which the last nine digits are 1 - 9 pandigital (contain all the digits 1 to 9, but not necessarily in order). And $F_{2749}$, which contains 575 digits, is the first Fibonacci number for which the first nine digits are 1 - 9 pandigital.
+
+Given that $F_k$ is the first Fibonacci number for which the first nine digits AND the last nine digits are 1 - 9 pandigital, find `k`.
+
+# --hints--
+
+`pandigitalFibonacciEnds()` should return `329468`.
+
+```js
+assert.strictEqual(pandigitalFibonacciEnds(), 329468);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pandigitalFibonacciEnds() {
+
+  return true;
+}
+
+pandigitalFibonacciEnds();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-105-special-subset-sums-testing.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-105-special-subset-sums-testing.md
new file mode 100644
index 00000000000..1636463728d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-105-special-subset-sums-testing.md
@@ -0,0 +1,59 @@
+---
+id: 5900f3d61000cf542c50fee8
+title: 'Problem 105: Special subset sums: testing'
+challengeType: 1
+forumTopicId: 301729
+dashedName: problem-105-special-subset-sums-testing
+---
+
+# --description--
+
+Let $S(A)$ represent the sum of elements in set A of size n. We shall call it a special sum set if for any two non-empty disjoint subsets, B and C, the following properties are true:
+
+1. $S(B) ≠ S(C)$; that is, sums of subsets cannot be equal.
+2. If B contains more elements than C then $S(B) > S(C)$.
+
+For example, {81, 88, 75, 42, 87, 84, 86, 65} is not a special sum set because 65 + 87 + 88 = 75 + 81 + 84, whereas {157, 150, 164, 119, 79, 159, 161, 139, 158} satisfies both rules for all possible subset pair combinations and $S(A) = 1286$.
+
+Using `sets`, an array with one-hundred sets, containing seven to twelve elements (the two examples given above are the first two sets), identify all the special sum sets, $A_1, A_2, \ldots, A_k$, and find the value of $(A_1) + S(A_2) + \cdots + S(A_k)$.
+
+**Note:** This problem is related to Problem 103 and Problem 106.
+
+# --hints--
+
+`testingSpecialSubsetSums(testSets)` should return `73702`.
+
+```js
+assert.strictEqual(testingSpecialSubsetSums(_testSets), 73702);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testSets = [
+  [81,88,75,42,87,84,86,65],[157,150,164,119,79,159,161,139,158],[673,465,569,603,629,592,584,300,601,599,600],[90,85,83,84,65,87,76,46],[165,168,169,190,162,85,176,167,127],[224,275,278,249,277,279,289,295,139],[354,370,362,384,359,324,360,180,350,270],[599,595,557,298,448,596,577,667,597,588,602],[175,199,137,88,187,173,168,171,174],[93,187,196,144,185,178,186,202,182],[157,155,81,158,119,176,152,167,159],[184,165,159,166,163,167,174,124,83],[1211,1212,1287,605,1208,1189,1060,1216,1243,1200,908,1210],[339,299,153,305,282,304,313,306,302,228],[94,104,63,112,80,84,93,96],[41,88,82,85,61,74,83,81],[90,67,84,83,82,97,86,41],[299,303,151,301,291,302,307,377,333,280],[55,40,48,44,25,42,41],[1038,1188,1255,1184,594,890,1173,1151,1186,1203,1187,1195],[76,132,133,144,135,99,128,154],[77,46,108,81,85,84,93,83],[624,596,391,605,529,610,607,568,604,603,453],[83,167,166,189,163,174,160,165,133],[308,281,389,292,346,303,302,304,300,173],[593,1151,1187,1184,890,1040,1173,1186,1195,1255,1188,1203],[68,46,64,33,60,58,65],[65,43,88,87,86,99,93,90],[83,78,107,48,84,87,96,85],[1188,1173,1256,1038,1187,1151,890,1186,1184,1203,594,1195],[302,324,280,296,294,160,367,298,264,299],[521,760,682,687,646,664,342,698,692,686,672],[56,95,86,97,96,89,108,120],[344,356,262,343,340,382,337,175,361,330],[47,44,42,27,41,40,37],[139,155,161,158,118,166,154,156,78],[118,157,164,158,161,79,139,150,159],[299,292,371,150,300,301,281,303,306,262],[85,77,86,84,44,88,91,67],[88,85,84,44,65,91,76,86],[138,141,127,96,136,154,135,76],[292,308,302,346,300,324,304,305,238,166],[354,342,341,257,348,343,345,321,170,301],[84,178,168,167,131,170,193,166,162],[686,701,706,673,694,687,652,343,683,606,518],[295,293,301,367,296,279,297,263,323,159],[1038,1184,593,890,1188,1173,1187,1186,1195,1150,1203,1255],[343,364,388,402,191,383,382,385,288,374],[1187,1036,1183,591,1184,1175,888,1197,1182,1219,1115,1167],[151,291,307,303,345,238,299,323,301,302],[140,151,143,138,99,69,131,137],[29,44,42,59,41,36,40],[348,329,343,344,338,315,169,359,375,271],[48,39,34,37,50,40,41],[593,445,595,558,662,602,591,297,610,580,594],[686,651,681,342,541,687,691,707,604,675,699],[180,99,189,166,194,188,144,187,199],[321,349,335,343,377,176,265,356,344,332],[1151,1255,1195,1173,1184,1186,1188,1187,1203,593,1038,891],[90,88,100,83,62,113,80,89],[308,303,238,300,151,304,324,293,346,302],[59,38,50,41,42,35,40],[352,366,174,355,344,265,343,310,338,331],[91,89,93,90,117,85,60,106],[146,186,166,175,202,92,184,183,189],[82,67,96,44,80,79,88,76],[54,50,58,66,31,61,64],[343,266,344,172,308,336,364,350,359,333],[88,49,87,82,90,98,86,115],[20,47,49,51,54,48,40],[159,79,177,158,157,152,155,167,118],[1219,1183,1182,1115,1035,1186,591,1197,1167,887,1184,1175],[611,518,693,343,704,667,686,682,677,687,725],[607,599,634,305,677,604,603,580,452,605,591],[682,686,635,675,692,730,687,342,517,658,695],[662,296,573,598,592,584,553,593,595,443,591],[180,185,186,199,187,210,93,177,149],[197,136,179,185,156,182,180,178,99],[271,298,218,279,285,282,280,238,140],[1187,1151,890,593,1194,1188,1184,1173,1038,1186,1255,1203],[169,161,177,192,130,165,84,167,168],[50,42,43,41,66,39,36],[590,669,604,579,448,599,560,299,601,597,598],[174,191,206,179,184,142,177,180,90],[298,299,297,306,164,285,374,269,329,295],[181,172,162,138,170,195,86,169,168],[1184,1197,591,1182,1186,889,1167,1219,1183,1033,1115,1175],[644,695,691,679,667,687,340,681,770,686,517],[606,524,592,576,628,593,591,584,296,444,595],[94,127,154,138,135,74,136,141],[179,168,172,178,177,89,198,186,137],[302,299,291,300,298,149,260,305,280,370],[678,517,670,686,682,768,687,648,342,692,702],[302,290,304,376,333,303,306,298,279,153],[95,102,109,54,96,75,85,97],[150,154,146,78,152,151,162,173,119],[150,143,157,152,184,112,154,151,132],[36,41,54,40,25,44,42],[37,48,34,59,39,41,40],[681,603,638,611,584,303,454,607,606,605,596]
+];
+```
+
+## --seed-contents--
+
+```js
+function testingSpecialSubsetSums(sets) {
+
+  return true;
+}
+
+const testSets = [
+  [81,88,75,42,87,84,86,65],[157,150,164,119,79,159,161,139,158],[673,465,569,603,629,592,584,300,601,599,600],[90,85,83,84,65,87,76,46],[165,168,169,190,162,85,176,167,127],[224,275,278,249,277,279,289,295,139],[354,370,362,384,359,324,360,180,350,270],[599,595,557,298,448,596,577,667,597,588,602],[175,199,137,88,187,173,168,171,174],[93,187,196,144,185,178,186,202,182],[157,155,81,158,119,176,152,167,159],[184,165,159,166,163,167,174,124,83],[1211,1212,1287,605,1208,1189,1060,1216,1243,1200,908,1210],[339,299,153,305,282,304,313,306,302,228],[94,104,63,112,80,84,93,96],[41,88,82,85,61,74,83,81],[90,67,84,83,82,97,86,41],[299,303,151,301,291,302,307,377,333,280],[55,40,48,44,25,42,41],[1038,1188,1255,1184,594,890,1173,1151,1186,1203,1187,1195],[76,132,133,144,135,99,128,154],[77,46,108,81,85,84,93,83],[624,596,391,605,529,610,607,568,604,603,453],[83,167,166,189,163,174,160,165,133],[308,281,389,292,346,303,302,304,300,173],[593,1151,1187,1184,890,1040,1173,1186,1195,1255,1188,1203],[68,46,64,33,60,58,65],[65,43,88,87,86,99,93,90],[83,78,107,48,84,87,96,85],[1188,1173,1256,1038,1187,1151,890,1186,1184,1203,594,1195],[302,324,280,296,294,160,367,298,264,299],[521,760,682,687,646,664,342,698,692,686,672],[56,95,86,97,96,89,108,120],[344,356,262,343,340,382,337,175,361,330],[47,44,42,27,41,40,37],[139,155,161,158,118,166,154,156,78],[118,157,164,158,161,79,139,150,159],[299,292,371,150,300,301,281,303,306,262],[85,77,86,84,44,88,91,67],[88,85,84,44,65,91,76,86],[138,141,127,96,136,154,135,76],[292,308,302,346,300,324,304,305,238,166],[354,342,341,257,348,343,345,321,170,301],[84,178,168,167,131,170,193,166,162],[686,701,706,673,694,687,652,343,683,606,518],[295,293,301,367,296,279,297,263,323,159],[1038,1184,593,890,1188,1173,1187,1186,1195,1150,1203,1255],[343,364,388,402,191,383,382,385,288,374],[1187,1036,1183,591,1184,1175,888,1197,1182,1219,1115,1167],[151,291,307,303,345,238,299,323,301,302],[140,151,143,138,99,69,131,137],[29,44,42,59,41,36,40],[348,329,343,344,338,315,169,359,375,271],[48,39,34,37,50,40,41],[593,445,595,558,662,602,591,297,610,580,594],[686,651,681,342,541,687,691,707,604,675,699],[180,99,189,166,194,188,144,187,199],[321,349,335,343,377,176,265,356,344,332],[1151,1255,1195,1173,1184,1186,1188,1187,1203,593,1038,891],[90,88,100,83,62,113,80,89],[308,303,238,300,151,304,324,293,346,302],[59,38,50,41,42,35,40],[352,366,174,355,344,265,343,310,338,331],[91,89,93,90,117,85,60,106],[146,186,166,175,202,92,184,183,189],[82,67,96,44,80,79,88,76],[54,50,58,66,31,61,64],[343,266,344,172,308,336,364,350,359,333],[88,49,87,82,90,98,86,115],[20,47,49,51,54,48,40],[159,79,177,158,157,152,155,167,118],[1219,1183,1182,1115,1035,1186,591,1197,1167,887,1184,1175],[611,518,693,343,704,667,686,682,677,687,725],[607,599,634,305,677,604,603,580,452,605,591],[682,686,635,675,692,730,687,342,517,658,695],[662,296,573,598,592,584,553,593,595,443,591],[180,185,186,199,187,210,93,177,149],[197,136,179,185,156,182,180,178,99],[271,298,218,279,285,282,280,238,140],[1187,1151,890,593,1194,1188,1184,1173,1038,1186,1255,1203],[169,161,177,192,130,165,84,167,168],[50,42,43,41,66,39,36],[590,669,604,579,448,599,560,299,601,597,598],[174,191,206,179,184,142,177,180,90],[298,299,297,306,164,285,374,269,329,295],[181,172,162,138,170,195,86,169,168],[1184,1197,591,1182,1186,889,1167,1219,1183,1033,1115,1175],[644,695,691,679,667,687,340,681,770,686,517],[606,524,592,576,628,593,591,584,296,444,595],[94,127,154,138,135,74,136,141],[179,168,172,178,177,89,198,186,137],[302,299,291,300,298,149,260,305,280,370],[678,517,670,686,682,768,687,648,342,692,702],[302,290,304,376,333,303,306,298,279,153],[95,102,109,54,96,75,85,97],[150,154,146,78,152,151,162,173,119],[150,143,157,152,184,112,154,151,132],[36,41,54,40,25,44,42],[37,48,34,59,39,41,40],[681,603,638,611,584,303,454,607,606,605,596]
+];
+
+testingSpecialSubsetSums(testSets);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-106-special-subset-sums-meta-testing.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-106-special-subset-sums-meta-testing.md
new file mode 100644
index 00000000000..67638b56e90
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-106-special-subset-sums-meta-testing.md
@@ -0,0 +1,49 @@
+---
+id: 5900f3d71000cf542c50fee9
+title: 'Problem 106: Special subset sums: meta-testing'
+challengeType: 1
+forumTopicId: 301730
+dashedName: problem-106-special-subset-sums-meta-testing
+---
+
+# --description--
+
+Let $S(A)$ represent the sum of elements in set A of size n. We shall call it a special sum set if for any two non-empty disjoint subsets, B and C, the following properties are true:
+
+1. $S(B) ≠ S(C)$; that is, sums of subsets cannot be equal.
+2. If B contains more elements than C then $S(B) > S(C)$.
+
+For this problem we shall assume that a given set contains n strictly increasing elements and it already satisfies the second rule.
+
+Surprisingly, out of the 25 possible subset pairs that can be obtained from a set for which n = 4, only 1 of these pairs need to be tested for equality (first rule). Similarly, when n = 7, only 70 out of the 966 subset pairs need to be tested.
+
+For n = 12, how many of the 261625 subset pairs that can be obtained need to be tested for equality?
+
+**Note:** This problem is related to Problem 103 and Problem 105.
+
+# --hints--
+
+`subsetSumsMetaTesting()` should return `21384`.
+
+```js
+assert.strictEqual(subsetSumsMetaTesting(), 21384);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function subsetSumsMetaTesting() {
+
+  return true;
+}
+
+subsetSumsMetaTesting();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-107-minimal-network.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-107-minimal-network.md
new file mode 100644
index 00000000000..3b69363096d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-107-minimal-network.md
@@ -0,0 +1,71 @@
+---
+id: 5900f3d91000cf542c50feea
+title: 'Problem 107: Minimal network'
+challengeType: 1
+forumTopicId: 301731
+dashedName: problem-107-minimal-network
+---
+
+# --description--
+
+The following undirected network consists of seven vertices and twelve edges with a total weight of 243.
+
+<img class="img-responsive center-block" alt="Network with seven vertices and twelve edges" src="https://cdn.freecodecamp.org/curriculum/project-euler/minimal-network-1.png" style="background-color: white; padding: 10px;" />
+
+The same network can be represented by the matrix below.
+
+|   | A  | B  | C  | D  | E  | F  | G  |
+| - | -- | -- | -- | -- | -- | -- | -- |
+| A | -  | 16 | 12 | 21 | -  | -  | -  |
+| B | 16 | -  | -  | 17 | 20 | -  | -  |
+| C | 12 | -  | -  | 28 | -  | 31 | -  |
+| D | 21 | 17 | 28 | -  | 18 | 19 | 23 |
+| E | -  | 20 | -  | 18 | -  | -  | 11 |
+| F | -  | -  | 31 | 19 | -  | -  | 27 |
+| G | -  | -  | -  | 23 | 11 | 27 | -  |
+
+
+However, it is possible to optimise the network by removing some edges and still ensure that all points on the network remain connected. The network which achieves the maximum saving is shown below. It has a weight of 93, representing a saving of 243 − 93 = 150 from the original network.
+
+<img class="img-responsive center-block" alt="Network with seven vertices and left six edges: AB, BD, CA, DE, DF, EG" src="https://cdn.freecodecamp.org/curriculum/project-euler/minimal-network-2.png" style="background-color: white; padding: 10px;" />
+
+Using `network`, an 2D array representing network in matrix form, find the maximum saving which can be achieved by removing redundant edges whilst ensuring that the network remains connected. Vertices not having connection will be represented with `-1`.
+
+# --hints--
+
+`minimalNetwork(testNetwork)` should return `259679`.
+
+```js
+assert.strictEqual(minimalNetwork(_testNetwork), 259679);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testNetwork = [
+  [-1,-1,-1,427,668,495,377,678,-1,177,-1,-1,870,-1,869,624,300,609,131,-1,251,-1,-1,-1,856,221,514,-1,591,762,182,56,-1,884,412,273,636,-1,-1,774],[-1,-1,262,-1,-1,508,472,799,-1,956,578,363,940,143,-1,162,122,910,-1,729,802,941,922,573,531,539,667,607,-1,920,-1,-1,315,649,937,-1,185,102,636,289],[-1,262,-1,-1,926,-1,958,158,647,47,621,264,81,-1,402,813,649,386,252,391,264,637,349,-1,-1,-1,108,-1,727,225,578,699,-1,898,294,-1,575,168,432,833],[427,-1,-1,-1,366,-1,-1,635,-1,32,962,468,893,854,718,427,448,916,258,-1,760,909,529,311,404,-1,-1,588,680,875,-1,615,-1,409,758,221,-1,-1,76,257],[668,-1,926,366,-1,-1,-1,250,268,-1,503,944,-1,677,-1,727,793,457,981,191,-1,-1,-1,351,969,925,987,328,282,589,-1,873,477,-1,-1,19,450,-1,-1,-1],[495,508,-1,-1,-1,-1,-1,765,711,819,305,302,926,-1,-1,582,-1,861,-1,683,293,-1,-1,66,-1,27,-1,-1,290,-1,786,-1,554,817,33,-1,54,506,386,381],[377,472,958,-1,-1,-1,-1,-1,-1,120,42,-1,134,219,457,639,538,374,-1,-1,-1,966,-1,-1,-1,-1,-1,449,120,797,358,232,550,-1,305,997,662,744,686,239],[678,799,158,635,250,765,-1,-1,-1,35,-1,106,385,652,160,-1,890,812,605,953,-1,-1,-1,79,-1,712,613,312,452,-1,978,900,-1,901,-1,-1,225,533,770,722],[-1,-1,647,-1,268,711,-1,-1,-1,283,-1,172,-1,663,236,36,403,286,986,-1,-1,810,761,574,53,793,-1,-1,777,330,936,883,286,-1,174,-1,-1,-1,828,711],[177,956,47,32,-1,819,120,35,283,-1,50,-1,565,36,767,684,344,489,565,-1,-1,103,810,463,733,665,494,644,863,25,385,-1,342,470,-1,-1,-1,730,582,468],[-1,578,621,962,503,305,42,-1,-1,50,-1,155,519,-1,-1,256,990,801,154,53,474,650,402,-1,-1,-1,966,-1,-1,406,989,772,932,7,-1,823,391,-1,-1,933],[-1,363,264,468,944,302,-1,106,172,-1,155,-1,-1,-1,380,438,-1,41,266,-1,-1,104,867,609,-1,270,861,-1,-1,165,-1,675,250,686,995,366,191,-1,433,-1],[870,940,81,893,-1,926,134,385,-1,565,519,-1,-1,313,851,-1,-1,-1,248,220,-1,826,359,829,-1,234,198,145,409,68,359,-1,814,218,186,-1,-1,929,203,-1],[-1,143,-1,854,677,-1,219,652,663,36,-1,-1,313,-1,132,-1,433,598,-1,-1,168,870,-1,-1,-1,128,437,-1,383,364,966,227,-1,-1,807,993,-1,-1,526,17],[869,-1,402,718,-1,-1,457,160,236,767,-1,380,851,132,-1,-1,596,903,613,730,-1,261,-1,142,379,885,89,-1,848,258,112,-1,900,-1,-1,818,639,268,600,-1],[624,162,813,427,727,582,639,-1,36,684,256,438,-1,-1,-1,-1,539,379,664,561,542,-1,999,585,-1,-1,321,398,-1,-1,950,68,193,-1,697,-1,390,588,848,-1],[300,122,649,448,793,-1,538,890,403,344,990,-1,-1,433,596,539,-1,-1,73,-1,318,-1,-1,500,-1,968,-1,291,-1,-1,765,196,504,757,-1,542,-1,395,227,148],[609,910,386,916,457,861,374,812,286,489,801,41,-1,598,903,379,-1,-1,-1,946,136,399,-1,941,707,156,757,258,251,-1,807,-1,-1,-1,461,501,-1,-1,616,-1],[131,-1,252,258,981,-1,-1,605,986,565,154,266,248,-1,613,664,73,-1,-1,686,-1,-1,575,627,817,282,-1,698,398,222,-1,649,-1,-1,-1,-1,-1,654,-1,-1],[-1,729,391,-1,191,683,-1,953,-1,-1,53,-1,220,-1,730,561,-1,946,686,-1,-1,389,729,553,304,703,455,857,260,-1,991,182,351,477,867,-1,-1,889,217,853],[251,802,264,760,-1,293,-1,-1,-1,-1,474,-1,-1,168,-1,542,318,136,-1,-1,-1,-1,392,-1,-1,-1,267,407,27,651,80,927,-1,974,977,-1,-1,457,117,-1],[-1,941,637,909,-1,-1,966,-1,810,103,650,104,826,870,261,-1,-1,399,-1,389,-1,-1,-1,202,-1,-1,-1,-1,867,140,403,962,785,-1,511,-1,1,-1,707,-1],[-1,922,349,529,-1,-1,-1,-1,761,810,402,867,359,-1,-1,999,-1,-1,575,729,392,-1,-1,388,939,-1,959,-1,83,463,361,-1,-1,512,931,-1,224,690,369,-1],[-1,573,-1,311,351,66,-1,79,574,463,-1,609,829,-1,142,585,500,941,627,553,-1,202,388,-1,164,829,-1,620,523,639,936,-1,-1,490,-1,695,-1,505,109,-1],[856,531,-1,404,969,-1,-1,-1,53,733,-1,-1,-1,-1,379,-1,-1,707,817,304,-1,-1,939,164,-1,-1,616,716,728,-1,889,349,-1,963,150,447,-1,292,586,264],[221,539,-1,-1,925,27,-1,712,793,665,-1,270,234,128,885,-1,968,156,282,703,-1,-1,-1,829,-1,-1,-1,822,-1,-1,-1,736,576,-1,697,946,443,-1,205,194],[514,667,108,-1,987,-1,-1,613,-1,494,966,861,198,437,89,321,-1,757,-1,455,267,-1,959,-1,616,-1,-1,-1,349,156,339,-1,102,790,359,-1,439,938,809,260],[-1,607,-1,588,328,-1,449,312,-1,644,-1,-1,145,-1,-1,398,291,258,698,857,407,-1,-1,620,716,822,-1,-1,293,486,943,-1,779,-1,6,880,116,775,-1,947],[591,-1,727,680,282,290,120,452,777,863,-1,-1,409,383,848,-1,-1,251,398,260,27,867,83,523,728,-1,349,293,-1,212,684,505,341,384,9,992,507,48,-1,-1],[762,920,225,875,589,-1,797,-1,330,25,406,165,68,364,258,-1,-1,-1,222,-1,651,140,463,639,-1,-1,156,486,212,-1,-1,349,723,-1,-1,186,-1,36,240,752],[182,-1,578,-1,-1,786,358,978,936,385,989,-1,359,966,112,950,765,807,-1,991,80,403,361,936,889,-1,339,943,684,-1,-1,965,302,676,725,-1,327,134,-1,147],[56,-1,699,615,873,-1,232,900,883,-1,772,675,-1,227,-1,68,196,-1,649,182,927,962,-1,-1,349,736,-1,-1,505,349,965,-1,474,178,833,-1,-1,555,853,-1],[-1,315,-1,-1,477,554,550,-1,286,342,932,250,814,-1,900,193,504,-1,-1,351,-1,785,-1,-1,-1,576,102,779,341,723,302,474,-1,689,-1,-1,-1,451,-1,-1],[884,649,898,409,-1,817,-1,901,-1,470,7,686,218,-1,-1,-1,757,-1,-1,477,974,-1,512,490,963,-1,790,-1,384,-1,676,178,689,-1,245,596,445,-1,-1,343],[412,937,294,758,-1,33,305,-1,174,-1,-1,995,186,807,-1,697,-1,461,-1,867,977,511,931,-1,150,697,359,6,9,-1,725,833,-1,245,-1,949,-1,270,-1,112],[273,-1,-1,221,19,-1,997,-1,-1,-1,823,366,-1,993,818,-1,542,501,-1,-1,-1,-1,-1,695,447,946,-1,880,992,186,-1,-1,-1,596,949,-1,91,-1,768,273],[636,185,575,-1,450,54,662,225,-1,-1,391,191,-1,-1,639,390,-1,-1,-1,-1,-1,1,224,-1,-1,443,439,116,507,-1,327,-1,-1,445,-1,91,-1,248,-1,344],[-1,102,168,-1,-1,506,744,533,-1,730,-1,-1,929,-1,268,588,395,-1,654,889,457,-1,690,505,292,-1,938,775,48,36,134,555,451,-1,270,-1,248,-1,371,680],[-1,636,432,76,-1,386,686,770,828,582,-1,433,203,526,600,848,227,616,-1,217,117,707,369,109,586,205,809,-1,-1,240,-1,853,-1,-1,-1,768,-1,371,-1,540],[774,289,833,257,-1,381,239,722,711,468,933,-1,-1,17,-1,-1,148,-1,-1,853,-1,-1,-1,-1,264,194,260,947,-1,752,147,-1,-1,343,112,273,344,680,540,-1]
+];
+```
+
+## --seed-contents--
+
+```js
+function minimalNetwork(network) {
+
+  return true;
+}
+
+const testNetwork = [
+  [-1,-1,-1,427,668,495,377,678,-1,177,-1,-1,870,-1,869,624,300,609,131,-1,251,-1,-1,-1,856,221,514,-1,591,762,182,56,-1,884,412,273,636,-1,-1,774],[-1,-1,262,-1,-1,508,472,799,-1,956,578,363,940,143,-1,162,122,910,-1,729,802,941,922,573,531,539,667,607,-1,920,-1,-1,315,649,937,-1,185,102,636,289],[-1,262,-1,-1,926,-1,958,158,647,47,621,264,81,-1,402,813,649,386,252,391,264,637,349,-1,-1,-1,108,-1,727,225,578,699,-1,898,294,-1,575,168,432,833],[427,-1,-1,-1,366,-1,-1,635,-1,32,962,468,893,854,718,427,448,916,258,-1,760,909,529,311,404,-1,-1,588,680,875,-1,615,-1,409,758,221,-1,-1,76,257],[668,-1,926,366,-1,-1,-1,250,268,-1,503,944,-1,677,-1,727,793,457,981,191,-1,-1,-1,351,969,925,987,328,282,589,-1,873,477,-1,-1,19,450,-1,-1,-1],[495,508,-1,-1,-1,-1,-1,765,711,819,305,302,926,-1,-1,582,-1,861,-1,683,293,-1,-1,66,-1,27,-1,-1,290,-1,786,-1,554,817,33,-1,54,506,386,381],[377,472,958,-1,-1,-1,-1,-1,-1,120,42,-1,134,219,457,639,538,374,-1,-1,-1,966,-1,-1,-1,-1,-1,449,120,797,358,232,550,-1,305,997,662,744,686,239],[678,799,158,635,250,765,-1,-1,-1,35,-1,106,385,652,160,-1,890,812,605,953,-1,-1,-1,79,-1,712,613,312,452,-1,978,900,-1,901,-1,-1,225,533,770,722],[-1,-1,647,-1,268,711,-1,-1,-1,283,-1,172,-1,663,236,36,403,286,986,-1,-1,810,761,574,53,793,-1,-1,777,330,936,883,286,-1,174,-1,-1,-1,828,711],[177,956,47,32,-1,819,120,35,283,-1,50,-1,565,36,767,684,344,489,565,-1,-1,103,810,463,733,665,494,644,863,25,385,-1,342,470,-1,-1,-1,730,582,468],[-1,578,621,962,503,305,42,-1,-1,50,-1,155,519,-1,-1,256,990,801,154,53,474,650,402,-1,-1,-1,966,-1,-1,406,989,772,932,7,-1,823,391,-1,-1,933],[-1,363,264,468,944,302,-1,106,172,-1,155,-1,-1,-1,380,438,-1,41,266,-1,-1,104,867,609,-1,270,861,-1,-1,165,-1,675,250,686,995,366,191,-1,433,-1],[870,940,81,893,-1,926,134,385,-1,565,519,-1,-1,313,851,-1,-1,-1,248,220,-1,826,359,829,-1,234,198,145,409,68,359,-1,814,218,186,-1,-1,929,203,-1],[-1,143,-1,854,677,-1,219,652,663,36,-1,-1,313,-1,132,-1,433,598,-1,-1,168,870,-1,-1,-1,128,437,-1,383,364,966,227,-1,-1,807,993,-1,-1,526,17],[869,-1,402,718,-1,-1,457,160,236,767,-1,380,851,132,-1,-1,596,903,613,730,-1,261,-1,142,379,885,89,-1,848,258,112,-1,900,-1,-1,818,639,268,600,-1],[624,162,813,427,727,582,639,-1,36,684,256,438,-1,-1,-1,-1,539,379,664,561,542,-1,999,585,-1,-1,321,398,-1,-1,950,68,193,-1,697,-1,390,588,848,-1],[300,122,649,448,793,-1,538,890,403,344,990,-1,-1,433,596,539,-1,-1,73,-1,318,-1,-1,500,-1,968,-1,291,-1,-1,765,196,504,757,-1,542,-1,395,227,148],[609,910,386,916,457,861,374,812,286,489,801,41,-1,598,903,379,-1,-1,-1,946,136,399,-1,941,707,156,757,258,251,-1,807,-1,-1,-1,461,501,-1,-1,616,-1],[131,-1,252,258,981,-1,-1,605,986,565,154,266,248,-1,613,664,73,-1,-1,686,-1,-1,575,627,817,282,-1,698,398,222,-1,649,-1,-1,-1,-1,-1,654,-1,-1],[-1,729,391,-1,191,683,-1,953,-1,-1,53,-1,220,-1,730,561,-1,946,686,-1,-1,389,729,553,304,703,455,857,260,-1,991,182,351,477,867,-1,-1,889,217,853],[251,802,264,760,-1,293,-1,-1,-1,-1,474,-1,-1,168,-1,542,318,136,-1,-1,-1,-1,392,-1,-1,-1,267,407,27,651,80,927,-1,974,977,-1,-1,457,117,-1],[-1,941,637,909,-1,-1,966,-1,810,103,650,104,826,870,261,-1,-1,399,-1,389,-1,-1,-1,202,-1,-1,-1,-1,867,140,403,962,785,-1,511,-1,1,-1,707,-1],[-1,922,349,529,-1,-1,-1,-1,761,810,402,867,359,-1,-1,999,-1,-1,575,729,392,-1,-1,388,939,-1,959,-1,83,463,361,-1,-1,512,931,-1,224,690,369,-1],[-1,573,-1,311,351,66,-1,79,574,463,-1,609,829,-1,142,585,500,941,627,553,-1,202,388,-1,164,829,-1,620,523,639,936,-1,-1,490,-1,695,-1,505,109,-1],[856,531,-1,404,969,-1,-1,-1,53,733,-1,-1,-1,-1,379,-1,-1,707,817,304,-1,-1,939,164,-1,-1,616,716,728,-1,889,349,-1,963,150,447,-1,292,586,264],[221,539,-1,-1,925,27,-1,712,793,665,-1,270,234,128,885,-1,968,156,282,703,-1,-1,-1,829,-1,-1,-1,822,-1,-1,-1,736,576,-1,697,946,443,-1,205,194],[514,667,108,-1,987,-1,-1,613,-1,494,966,861,198,437,89,321,-1,757,-1,455,267,-1,959,-1,616,-1,-1,-1,349,156,339,-1,102,790,359,-1,439,938,809,260],[-1,607,-1,588,328,-1,449,312,-1,644,-1,-1,145,-1,-1,398,291,258,698,857,407,-1,-1,620,716,822,-1,-1,293,486,943,-1,779,-1,6,880,116,775,-1,947],[591,-1,727,680,282,290,120,452,777,863,-1,-1,409,383,848,-1,-1,251,398,260,27,867,83,523,728,-1,349,293,-1,212,684,505,341,384,9,992,507,48,-1,-1],[762,920,225,875,589,-1,797,-1,330,25,406,165,68,364,258,-1,-1,-1,222,-1,651,140,463,639,-1,-1,156,486,212,-1,-1,349,723,-1,-1,186,-1,36,240,752],[182,-1,578,-1,-1,786,358,978,936,385,989,-1,359,966,112,950,765,807,-1,991,80,403,361,936,889,-1,339,943,684,-1,-1,965,302,676,725,-1,327,134,-1,147],[56,-1,699,615,873,-1,232,900,883,-1,772,675,-1,227,-1,68,196,-1,649,182,927,962,-1,-1,349,736,-1,-1,505,349,965,-1,474,178,833,-1,-1,555,853,-1],[-1,315,-1,-1,477,554,550,-1,286,342,932,250,814,-1,900,193,504,-1,-1,351,-1,785,-1,-1,-1,576,102,779,341,723,302,474,-1,689,-1,-1,-1,451,-1,-1],[884,649,898,409,-1,817,-1,901,-1,470,7,686,218,-1,-1,-1,757,-1,-1,477,974,-1,512,490,963,-1,790,-1,384,-1,676,178,689,-1,245,596,445,-1,-1,343],[412,937,294,758,-1,33,305,-1,174,-1,-1,995,186,807,-1,697,-1,461,-1,867,977,511,931,-1,150,697,359,6,9,-1,725,833,-1,245,-1,949,-1,270,-1,112],[273,-1,-1,221,19,-1,997,-1,-1,-1,823,366,-1,993,818,-1,542,501,-1,-1,-1,-1,-1,695,447,946,-1,880,992,186,-1,-1,-1,596,949,-1,91,-1,768,273],[636,185,575,-1,450,54,662,225,-1,-1,391,191,-1,-1,639,390,-1,-1,-1,-1,-1,1,224,-1,-1,443,439,116,507,-1,327,-1,-1,445,-1,91,-1,248,-1,344],[-1,102,168,-1,-1,506,744,533,-1,730,-1,-1,929,-1,268,588,395,-1,654,889,457,-1,690,505,292,-1,938,775,48,36,134,555,451,-1,270,-1,248,-1,371,680],[-1,636,432,76,-1,386,686,770,828,582,-1,433,203,526,600,848,227,616,-1,217,117,707,369,109,586,205,809,-1,-1,240,-1,853,-1,-1,-1,768,-1,371,-1,540],[774,289,833,257,-1,381,239,722,711,468,933,-1,-1,17,-1,-1,148,-1,-1,853,-1,-1,-1,-1,264,194,260,947,-1,752,147,-1,-1,343,112,273,344,680,540,-1]
+];
+
+minimalNetwork(testNetwork);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-108-diophantine-reciprocals-i.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-108-diophantine-reciprocals-i.md
new file mode 100644
index 00000000000..56fbe532238
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-108-diophantine-reciprocals-i.md
@@ -0,0 +1,48 @@
+---
+id: 5900f3d91000cf542c50feeb
+title: 'Problem 108: Diophantine Reciprocals I'
+challengeType: 1
+forumTopicId: 301732
+dashedName: problem-108-diophantine-reciprocals-i
+---
+
+# --description--
+
+In the following equation x, y, and n are positive integers.
+
+$$\frac{1}{x} + \frac{1}{y} = \frac{1}{n}$$
+
+For `n` = 4 there are exactly three distinct solutions:
+
+$$\begin{align}   & \frac{1}{5} + \frac{1}{20} = \frac{1}{4}\\\\
+  \\\\   & \frac{1}{6} + \frac{1}{12} = \frac{1}{4}\\\\
+  \\\\ & \frac{1}{8} + \frac{1}{8} = \frac{1}{4} \end{align}$$
+
+What is the least value of `n` for which the number of distinct solutions exceeds one-thousand?
+
+# --hints--
+
+`diophantineOne()` should return `180180`.
+
+```js
+assert.strictEqual(diophantineOne(), 180180);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function diophantineOne() {
+
+  return true;
+}
+
+diophantineOne();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-109-darts.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-109-darts.md
new file mode 100644
index 00000000000..5064f7e146c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-109-darts.md
@@ -0,0 +1,57 @@
+---
+id: 5900f3db1000cf542c50feec
+title: 'Problem 109: Darts'
+challengeType: 1
+forumTopicId: 301733
+dashedName: problem-109-darts
+---
+
+# --description--
+
+In the game of darts a player throws three darts at a target board which is split into twenty equal sized sections numbered one to twenty.
+
+<img class="img-responsive center-block" alt="Darts board" src="https://cdn.freecodecamp.org/curriculum/project-euler/darts.png" style="background-color: white; padding: 10px;" />
+
+The score of a dart is determined by the number of the region that the dart lands in. A dart landing outside the red/green outer ring scores zero. The black and cream regions inside this ring represent single scores. However, the red/green outer ring and middle ring score double and treble scores respectively.
+
+At the center of the board are two concentric circles called the bull region, or bulls-eye. The outer bull is worth 25 points and the inner bull is a double, worth 50 points.
+
+There are many variations of rules but in the most popular game the players will begin with a score of 301 or 501 and the first player to reduce their running total to zero is a winner. However, it is normal to play a "doubles out" system, which means that the player must land a double (including the double bulls-eye at the center of the board) on their final dart to win; any other dart that would reduce their running total to one or lower means the score for that set of three darts is "bust".
+
+When a player is able to finish on their current score it is called a "checkout" and the highest checkout is 170: T20 T20 D25 (two treble 20s and double bull). There are exactly eleven distinct ways to checkout on a score of 6:
+
+$$\begin{array}   \text{D3} &    &    \\\\
+  D1        & D2 &    \\\\   S2        & D2 &    \\\\
+  D2        & D1 &    \\\\   S4        & D1 &    \\\\
+  S1        & S1 & D2 \\\\   S1        & T1 & D1 \\\\
+  S1        & S3 & D1 \\\\   D1        & D1 & D1 \\\\
+  D1        & S2 & D1 \\\\ S2        & S2 & D1 \end{array}$$
+
+Note that D1 D2 is considered different from D2 D1 as they finish on different doubles. However, the combination S1 T1 D1 is considered the same as T1 S1 D1. In addition, we shall not include misses in considering combinations; for example, D3 is the same as 0 D3 and 0 0 D3. Incredibly there are 42336 distinct ways of checking out in total. How many distinct ways can a player checkout with a score less than 100?
+
+# --hints--
+
+`darts()` should return `38182`.
+
+```js
+assert.strictEqual(darts(), 38182);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function darts() {
+
+  return true;
+}
+
+darts();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-11-largest-product-in-a-grid.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-11-largest-product-in-a-grid.md
new file mode 100644
index 00000000000..507d9a56ea8
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-11-largest-product-in-a-grid.md
@@ -0,0 +1,182 @@
+---
+id: 5900f3781000cf542c50fe8a
+title: 'Problem 11: Largest product in a grid'
+challengeType: 1
+forumTopicId: 301734
+dashedName: problem-11-largest-product-in-a-grid
+---
+
+# --description--
+
+In the 20×20 grid below, four numbers along a diagonal line have been marked in red.
+
+<div style='text-align: center;'>
+  08 02 22 97 38 15 00 40 00 75 04 05 07 78 52 12 50 77 91 08<br>
+  49 49 99 40 17 81 18 57 60 87 17 40 98 43 69 48 04 56 62 00<br>
+  81 49 31 73 55 79 14 29 93 71 40 67 53 88 30 03 49 13 36 65<br>
+  52 70 95 23 04 60 11 42 69 24 68 56 01 32 56 71 37 02 36 91<br>
+  22 31 16 71 51 67 63 89 41 92 36 54 22 40 40 28 66 33 13 80<br>
+  24 47 32 60 99 03 45 02 44 75 33 53 78 36 84 20 35 17 12 50<br>
+  32 98 81 28 64 23 67 10 <span style='color: red'><b>26</b></span> 38 40 67 59 54 70 66 18 38 64 70<br>
+  67 26 20 68 02 62 12 20 95 <span style='color: red'><b>63</b></span> 94 39 63 08 40 91 66 49 94 21<br>
+  24 55 58 05 66 73 99 26 97 17 <span style='color: red'><b>78</b></span> 78 96 83 14 88 34 89 63 72<br>
+  21 36 23 09 75 00 76 44 20 45 35 <span style='color: red'><b>14</b></span> 00 61 33 97 34 31 33 95<br>
+  78 17 53 28 22 75 31 67 15 94 03 80 04 62 16 14 09 53 56 92<br>
+  16 39 05 42 96 35 31 47 55 58 88 24 00 17 54 24 36 29 85 57<br>
+  86 56 00 48 35 71 89 07 05 44 44 37 44 60 21 58 51 54 17 58<br>
+  19 80 81 68 05 94 47 69 28 73 92 13 86 52 17 77 04 89 55 40<br>
+  04 52 08 83 97 35 99 16 07 97 57 32 16 26 26 79 33 27 98 66<br>
+  88 36 68 87 57 62 20 72 03 46 33 67 46 55 12 32 63 93 53 69<br>
+  04 42 16 73 38 25 39 11 24 94 72 18 08 46 29 32 40 62 76 36<br>
+  20 69 36 41 72 30 23 88 34 62 99 69 82 67 59 85 74 04 36 16<br>
+  20 73 35 29 78 31 90 01 74 31 49 71 48 86 81 16 23 57 05 54<br>
+  01 70 54 71 83 51 54 69 16 92 33 48 61 43 52 01 89 19 67 48<br>
+</div>
+
+The product of these numbers is 26 × 63 × 78 × 14 = 1788696.
+
+What is the greatest product of four adjacent numbers in the same direction (up, down, left, right, or diagonally) in a given `arr` grid?
+
+# --hints--
+
+`largestGridProduct(testGrid)` should return a number.
+
+```js
+assert(typeof largestGridProduct(testGrid) === 'number');
+```
+
+`largestGridProduct(testGrid)` should return 14169081.
+
+```js
+assert.strictEqual(largestGridProduct(testGrid), 14169081);
+```
+
+`largestGridProduct(grid)` should return 70600674.
+
+```js
+assert.strictEqual(largestGridProduct(grid), 70600674);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function largestGridProduct(arr) {
+
+  return true;
+}
+
+// Only change code above this line
+const grid = [
+  [8, 2, 22, 97, 38, 15, 0, 40, 0, 75, 4, 5, 7, 78, 52, 12, 50, 77, 91, 8],
+  [49, 49, 99, 40, 17, 81, 18, 57, 60, 87, 17, 40, 98, 43, 69, 48, 4, 56, 62, 0],
+  [81, 49, 31, 73, 55, 79, 14, 29, 93, 71, 40, 67, 53, 88, 30, 3, 49, 13, 36, 65],
+  [52, 70, 95, 23, 4, 60, 11, 42, 69, 24, 68, 56, 1, 32, 56, 71, 37, 2, 36, 91],
+  [22, 31, 16, 71, 51, 67, 63, 89, 41, 92, 36, 54, 22, 40, 40, 28, 66, 33, 13, 80],
+  [24, 47, 32, 60, 99, 3, 45, 2, 44, 75, 33, 53, 78, 36, 84, 20, 35, 17, 12, 50],
+  [32, 98, 81, 28, 64, 23, 67, 10, 26, 38, 40, 67, 59, 54, 70, 66, 18, 38, 64, 70],
+  [67, 26, 20, 68, 2, 62, 12, 20, 95, 63, 94, 39, 63, 8, 40, 91, 66, 49, 94, 21],
+  [24, 55, 58, 5, 66, 73, 99, 26, 97, 17, 78, 78, 96, 83, 14, 88, 34, 89, 63, 72],
+  [21, 36, 23, 9, 75, 0, 76, 44, 20, 45, 35, 14, 0, 61, 33, 97, 34, 31, 33, 95],
+  [78, 17, 53, 28, 22, 75, 31, 67, 15, 94, 3, 80, 4, 62, 16, 14, 9, 53, 56, 92],
+  [16, 39, 5, 42, 96, 35, 31, 47, 55, 58, 88, 24, 0, 17, 54, 24, 36, 29, 85, 57],
+  [86, 56, 0, 48, 35, 71, 89, 7, 5, 44, 44, 37, 44, 60, 21, 58, 51, 54, 17, 58],
+  [19, 80, 81, 68, 5, 94, 47, 69, 28, 73, 92, 13, 86, 52, 17, 77, 4, 89, 55, 40],
+  [4, 52, 8, 83, 97, 35, 99, 16, 7, 97, 57, 32, 16, 26, 26, 79, 33, 27, 98, 66],
+  [88, 36, 68, 87, 57, 62, 20, 72, 3, 46, 33, 67, 46, 55, 12, 32, 63, 93, 53, 69],
+  [4, 42, 16, 73, 38, 25, 39, 11, 24, 94, 72, 18, 8, 46, 29, 32, 40, 62, 76, 36],
+  [20, 69, 36, 41, 72, 30, 23, 88, 34, 62, 99, 69, 82, 67, 59, 85, 74, 4, 36, 16],
+  [20, 73, 35, 29, 78, 31, 90, 1, 74, 31, 49, 71, 48, 86, 81, 16, 23, 57, 5, 54],
+  [1, 70, 54, 71, 83, 51, 54, 69, 16, 92, 33, 48, 61, 43, 52, 1, 89, 19, 67, 48]
+];
+
+const testGrid = [
+  [40, 17, 81, 18, 57],
+  [74, 4, 36, 16, 29],
+  [36, 42, 69, 73, 45],
+  [51, 54, 69, 16, 92],
+  [7, 97, 57, 32, 16]
+];
+
+largestGridProduct(testGrid);
+```
+
+# --solutions--
+
+```js
+function largestGridProduct(arr) {
+  let maxProduct = 0;
+  let currProduct = 0;
+
+  function maxProductChecker(n) {
+    if (n > maxProduct) {
+      return maxProduct = n;
+    }
+  }
+
+  // loop rows
+  for (let r = 0; r < arr.length; r++) {
+    // loop columns
+    for (let c = 0; c < arr[r].length; c++) {
+      const limit = arr[r].length - 3;
+
+      // check horizontal
+      if (c < limit) {
+        currProduct = arr[r][c] * arr[r][c + 1] * arr[r][c + 2] * arr[r][c + 3];
+        maxProductChecker(currProduct);
+      }
+
+      // check vertical
+      if (r < limit) {
+        currProduct = arr[r][c] * arr[r + 1][c] * arr[r + 2][c] * arr[r + 3][c];
+        maxProductChecker(currProduct);
+      }
+
+      // check diagonal [\]
+      if (c < limit && r < limit) {
+        currProduct = arr[r][c] * arr[r + 1][c + 1] * arr[r + 2][c + 2] * arr[r + 3][c + 3];
+        maxProductChecker(currProduct);
+      }
+
+      // check diagonal [/]
+      if (c > 3 && r < limit) {
+        currProduct = arr[r][c] * arr[r + 1][c - 1] * arr[r + 2][c - 2] * arr[r + 3][c - 3];
+        maxProductChecker(currProduct);
+      }
+    }
+  }
+
+  return maxProduct;
+}
+
+ const grid = [  [8, 2, 22, 97, 38, 15, 0, 40, 0, 75, 4, 5, 7, 78, 52, 12, 50, 77, 91, 8],
+  [49, 49, 99, 40, 17, 81, 18, 57, 60, 87, 17, 40, 98, 43, 69, 48, 4, 56, 62, 0],
+  [81, 49, 31, 73, 55, 79, 14, 29, 93, 71, 40, 67, 53, 88, 30, 3, 49, 13, 36, 65],
+  [52, 70, 95, 23, 4, 60, 11, 42, 69, 24, 68, 56, 1, 32, 56, 71, 37, 2, 36, 91],
+  [22, 31, 16, 71, 51, 67, 63, 89, 41, 92, 36, 54, 22, 40, 40, 28, 66, 33, 13, 80],
+  [24, 47, 32, 60, 99, 3, 45, 2, 44, 75, 33, 53, 78, 36, 84, 20, 35, 17, 12, 50],
+  [32, 98, 81, 28, 64, 23, 67, 10, 26, 38, 40, 67, 59, 54, 70, 66, 18, 38, 64, 70],
+  [67, 26, 20, 68, 2, 62, 12, 20, 95, 63, 94, 39, 63, 8, 40, 91, 66, 49, 94, 21],
+  [24, 55, 58, 5, 66, 73, 99, 26, 97, 17, 78, 78, 96, 83, 14, 88, 34, 89, 63, 72],
+  [21, 36, 23, 9, 75, 0, 76, 44, 20, 45, 35, 14, 0, 61, 33, 97, 34, 31, 33, 95],
+  [78, 17, 53, 28, 22, 75, 31, 67, 15, 94, 3, 80, 4, 62, 16, 14, 9, 53, 56, 92],
+  [16, 39, 5, 42, 96, 35, 31, 47, 55, 58, 88, 24, 0, 17, 54, 24, 36, 29, 85, 57],
+  [86, 56, 0, 48, 35, 71, 89, 7, 5, 44, 44, 37, 44, 60, 21, 58, 51, 54, 17, 58],
+  [19, 80, 81, 68, 5, 94, 47, 69, 28, 73, 92, 13, 86, 52, 17, 77, 4, 89, 55, 40],
+  [4, 52, 8, 83, 97, 35, 99, 16, 7, 97, 57, 32, 16, 26, 26, 79, 33, 27, 98, 66],
+  [88, 36, 68, 87, 57, 62, 20, 72, 3, 46, 33, 67, 46, 55, 12, 32, 63, 93, 53, 69],
+  [4, 42, 16, 73, 38, 25, 39, 11, 24, 94, 72, 18, 8, 46, 29, 32, 40, 62, 76, 36],
+  [20, 69, 36, 41, 72, 30, 23, 88, 34, 62, 99, 69, 82, 67, 59, 85, 74, 4, 36, 16],
+  [20, 73, 35, 29, 78, 31, 90, 1, 74, 31, 49, 71, 48, 86, 81, 16, 23, 57, 5, 54],
+  [1, 70, 54, 71, 83, 51, 54, 69, 16, 92, 33, 48, 61, 43, 52, 1, 89, 19, 67, 48]
+];
+
+const testGrid = [
+  [40, 17, 81, 18, 57],
+  [74, 4, 36, 16, 29],
+  [36, 42, 69, 73, 45],
+  [51, 54, 69, 16, 92],
+  [7, 97, 57, 32, 16]
+];
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-110-diophantine-reciprocals-ii.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-110-diophantine-reciprocals-ii.md
new file mode 100644
index 00000000000..9bbeb3dd075
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-110-diophantine-reciprocals-ii.md
@@ -0,0 +1,46 @@
+---
+id: 5900f3db1000cf542c50feed
+title: 'Problem 110: Diophantine Reciprocals II'
+challengeType: 1
+forumTopicId: 301735
+dashedName: problem-110-diophantine-reciprocals-ii
+---
+
+# --description--
+
+In the following equation x, y, and n are positive integers.
+
+$$\frac{1}{x} + \frac{1}{y} = \frac{1}{n}$$
+
+It can be verified that when `n` = 1260 there are 113 distinct solutions and this is the least value of `n` for which the total number of distinct solutions exceeds one hundred.
+
+What is the least value of `n` for which the number of distinct solutions exceeds four million?
+
+**Note:** This problem is a much more difficult version of Problem 108 and as it is well beyond the limitations of a brute force approach it requires a clever implementation.
+
+# --hints--
+
+`diophantineTwo()` should return `9350130049860600`.
+
+```js
+assert.strictEqual(diophantineTwo(), 9350130049860600);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function diophantineTwo() {
+
+  return true;
+}
+
+diophantineTwo();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-111-primes-with-runs.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-111-primes-with-runs.md
new file mode 100644
index 00000000000..7f22fbffb6c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-111-primes-with-runs.md
@@ -0,0 +1,61 @@
+---
+id: 5900f3db1000cf542c50feee
+title: 'Problem 111: Primes with runs'
+challengeType: 1
+forumTopicId: 301736
+dashedName: problem-111-primes-with-runs
+---
+
+# --description--
+
+Considering 4-digit primes containing repeated digits it is clear that they cannot all be the same: 1111 is divisible by 11, 2222 is divisible by 22, and so on. But there are nine 4-digit primes containing three ones:
+
+$$1117, 1151, 1171, 1181, 1511, 1811, 2111, 4111, 8111$$
+
+We shall say that $M(n, d)$ represents the maximum number of repeated digits for an n-digit prime where d is the repeated digit, $N(n, d)$ represents the number of such primes, and $S(n, d)$ represents the sum of these primes.
+
+So $M(4, 1) = 3$ is the maximum number of repeated digits for a 4-digit prime where one is the repeated digit, there are $N(4, 1) = 9$ such primes, and the sum of these primes is $S(4, 1) = 22275$. It turns out that for d = 0, it is only possible to have $M(4, 0) = 2$ repeated digits, but there are $N(4, 0) = 13$ such cases.
+
+In the same way we obtain the following results for 4-digit primes.
+
+| Digit, d | $M(4, d)$ | $N(4, d)$ | $S(4, d)$ |
+| -------- | --------- | --------- | --------- |
+| 0        | 2         | 13        | 67061     |
+| 1        | 3         | 9         | 22275     |
+| 2        | 3         | 1         | 2221      |
+| 3        | 3         | 12        | 46214     |
+| 4        | 3         | 2         | 8888      |
+| 5        | 3         | 1         | 5557      |
+| 6        | 3         | 1         | 6661      |
+| 7        | 3         | 9         | 57863     |
+| 8        | 3         | 1         | 8887      |
+| 9        | 3         | 7         | 48073     |
+
+For d = 0 to 9, the sum of all $S(4, d)$ is 273700. Find the sum of all $S(10, d)$.
+
+# --hints--
+
+`primesWithRuns()` should return `612407567715`.
+
+```js
+assert.strictEqual(primesWithRuns(), 612407567715);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primesWithRuns() {
+
+  return true;
+}
+
+primesWithRuns();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-112-bouncy-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-112-bouncy-numbers.md
new file mode 100644
index 00000000000..7599de29978
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-112-bouncy-numbers.md
@@ -0,0 +1,48 @@
+---
+id: 5900f3dd1000cf542c50feef
+title: 'Problem 112: Bouncy numbers'
+challengeType: 1
+forumTopicId: 301738
+dashedName: problem-112-bouncy-numbers
+---
+
+# --description--
+
+Working from left-to-right if no digit is exceeded by the digit to its left it is called an increasing number; for example, 134468.
+
+Similarly if no digit is exceeded by the digit to its right it is called a decreasing number; for example, 66420.
+
+We shall call a positive integer that is neither increasing nor decreasing a "bouncy" number; for example, 155349.
+
+Clearly there cannot be any bouncy numbers below one-hundred, but just over half of the numbers below one-thousand (525) are bouncy. In fact, the least number for which the proportion of bouncy numbers first reaches 50% is 538.
+
+Surprisingly, bouncy numbers become more and more common and by the time we reach 21780 the proportion of bouncy numbers is equal to 90%.
+
+Find the least number for which the proportion of bouncy numbers is exactly 99%.
+
+# --hints--
+
+`bouncyNumbers()` should return `1587000`.
+
+```js
+assert.strictEqual(bouncyNumbers(), 1587000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function bouncyNumbers() {
+
+  return true;
+}
+
+bouncyNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-113-non-bouncy-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-113-non-bouncy-numbers.md
new file mode 100644
index 00000000000..868909ef6b2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-113-non-bouncy-numbers.md
@@ -0,0 +1,46 @@
+---
+id: 5900f3dd1000cf542c50fef0
+title: 'Problem 113: Non-bouncy numbers'
+challengeType: 1
+forumTopicId: 301739
+dashedName: problem-113-non-bouncy-numbers
+---
+
+# --description--
+
+Working from left-to-right if no digit is exceeded by the digit to its left it is called an increasing number; for example, 134468.
+
+Similarly if no digit is exceeded by the digit to its right it is called a decreasing number; for example, 66420.
+
+We shall call a positive integer that is neither increasing nor decreasing a "bouncy" number; for example, 155349.
+
+As n increases, the proportion of bouncy numbers below n increases such that there are only 12951 numbers below one-million that are not bouncy and only 277032 non-bouncy numbers below ${10}^{10}$.
+
+How many numbers below a googol (${10}^{100}$) are not bouncy?
+
+# --hints--
+
+`nonBouncyNumbers()` should return `51161058134250`.
+
+```js
+assert.strictEqual(nonBouncyNumbers(), 51161058134250);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function nonBouncyNumbers() {
+
+  return true;
+}
+
+nonBouncyNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-114-counting-block-combinations-i.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-114-counting-block-combinations-i.md
new file mode 100644
index 00000000000..3e1b2f85927
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-114-counting-block-combinations-i.md
@@ -0,0 +1,44 @@
+---
+id: 5900f3e01000cf542c50fef2
+title: 'Problem 114: Counting block combinations I'
+challengeType: 1
+forumTopicId: 301740
+dashedName: problem-114-counting-block-combinations-i
+---
+
+# --description--
+
+A row measuring seven units in length has red blocks with a minimum length of three units placed on it, such that any two red blocks (which are allowed to be different lengths) are separated by at least one black square. There are exactly seventeen ways of doing this.
+
+<img class="img-responsive center-block" alt="Possible ways of placing block with a minimum length of three units, on a row with length of seven units" src="https://cdn.freecodecamp.org/curriculum/project-euler/counting-block-combinations-i.png" style="background-color: white; padding: 10px;" />
+
+How many ways can a row measuring fifty units in length be filled?
+
+**Note:** Although the example above does not lend itself to the possibility, in general it is permitted to mix block sizes. For example, on a row measuring eight units in length you could use red (3), black (1), and red (4).
+
+# --hints--
+
+`countingBlockOne()` should return `16475640049`.
+
+```js
+assert.strictEqual(countingBlockOne(), 16475640049);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countingBlockOne() {
+
+  return true;
+}
+
+countingBlockOne();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-115-counting-block-combinations-ii.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-115-counting-block-combinations-ii.md
new file mode 100644
index 00000000000..a659ea34ad1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-115-counting-block-combinations-ii.md
@@ -0,0 +1,50 @@
+---
+id: 5900f3df1000cf542c50fef1
+title: 'Problem 115: Counting block combinations II'
+challengeType: 1
+forumTopicId: 301741
+dashedName: problem-115-counting-block-combinations-ii
+---
+
+# --description--
+
+A row measuring `n` units in length has red blocks with a minimum length of `m` units placed on it, such that any two red blocks (which are allowed to be different lengths) are separated by at least one black square.
+
+Let the fill-count function, $F(m, n)$, represent the number of ways that a row can be filled.
+
+For example, $F(3, 29) = 673135$ and $F(3, 30) = 1089155$.
+
+That is, for m = 3, it can be seen that n = 30 is the smallest value for which the fill-count function first exceeds one million.
+
+In the same way, for m = 10, it can be verified that $F(10, 56) = 880711$ and $F(10, 57) = 1148904$, so n = 57 is the least value for which the fill-count function first exceeds one million.
+
+For m = 50, find the least value of `n` for which the fill-count function first exceeds one million.
+
+**Note:** This is a more difficult version of Problem 114.
+
+# --hints--
+
+`countingBlockTwo()` should return `168`.
+
+```js
+assert.strictEqual(countingBlockTwo(), 168);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countingBlockTwo() {
+
+  return true;
+}
+
+countingBlockTwo();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-116-red-green-or-blue-tiles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-116-red-green-or-blue-tiles.md
new file mode 100644
index 00000000000..b0b1969a3df
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-116-red-green-or-blue-tiles.md
@@ -0,0 +1,54 @@
+---
+id: 5900f3e01000cf542c50fef3
+title: 'Problem 116: Red, green or blue tiles'
+challengeType: 1
+forumTopicId: 301742
+dashedName: problem-116-red-green-or-blue-tiles
+---
+
+# --description--
+
+A row of five black square tiles is to have a number of its tiles replaced with coloured oblong tiles chosen from red (length two), green (length three), or blue (length four).
+
+If red tiles are chosen there are exactly seven ways this can be done.
+
+<img class="img-responsive center-block" alt="Possible ways to placing red oblong on a row with length of five units" src="https://cdn.freecodecamp.org/curriculum/project-euler/red-green-or-blue-tiles-1.png" style="background-color: white; padding: 10px;" />
+
+If green tiles are chosen there are three ways.
+
+<img class="img-responsive center-block" alt="Possible ways of placing green oblong on a row with length of five units" src="https://cdn.freecodecamp.org/curriculum/project-euler/red-green-or-blue-tiles-2.png" style="background-color: white; padding: 10px;" />
+
+And if blue tiles are chosen there are two ways.
+
+<img class="img-responsive center-block" alt="Possible ways of placing blue oblong on a row with length of five units" src="https://cdn.freecodecamp.org/curriculum/project-euler/red-green-or-blue-tiles-3.png" style="background-color: white; padding: 10px;" />
+
+Assuming that colors cannot be mixed there are 7 + 3 + 2 = 12 ways of replacing the black tiles in a row measuring five units in length. How many different ways can the black tiles in a row measuring fifty units in length be replaced if colors cannot be mixed and at least one colored tile must be used?
+
+**Note:** This is related to Problem 117.
+
+# --hints--
+
+`redGreenBlueOne()` should return `20492570929`.
+
+```js
+assert.strictEqual(redGreenBlueOne(), 20492570929);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function redGreenBlueOne() {
+
+  return true;
+}
+
+redGreenBlueOne();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-117-red-green-and-blue-tiles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-117-red-green-and-blue-tiles.md
new file mode 100644
index 00000000000..4a4873aac95
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-117-red-green-and-blue-tiles.md
@@ -0,0 +1,44 @@
+---
+id: 5900f3e21000cf542c50fef4
+title: 'Problem 117: Red, green, and blue tiles'
+challengeType: 1
+forumTopicId: 301743
+dashedName: problem-117-red-green-and-blue-tiles
+---
+
+# --description--
+
+Using a combination of black square tiles and oblong tiles chosen from: red tiles measuring two units, green tiles measuring three units, and blue tiles measuring four units, it is possible to tile a row measuring five units in length in exactly fifteen different ways.
+
+<img class="img-responsive center-block" alt="Possible ways of placing red, green and blue oblongs on a row with length of five units" src="https://cdn.freecodecamp.org/curriculum/project-euler/red-green-and-blue-tiles.png" style="background-color: white; padding: 10px;" />
+
+How many ways can a row measuring fifty units in length be tiled?
+
+**Note**: This is related to Problem 116.
+
+# --hints--
+
+`redGreenBlueTilesTwo()` should return `100808458960497`.
+
+```js
+assert.strictEqual(redGreenBlueTilesTwo(), 100808458960497);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function redGreenBlueTilesTwo() {
+
+  return true;
+}
+
+redGreenBlueTilesTwo();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-118-pandigital-prime-sets.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-118-pandigital-prime-sets.md
new file mode 100644
index 00000000000..195d39136ed
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-118-pandigital-prime-sets.md
@@ -0,0 +1,40 @@
+---
+id: 5900f3e21000cf542c50fef5
+title: 'Problem 118: Pandigital prime sets'
+challengeType: 1
+forumTopicId: 301744
+dashedName: problem-118-pandigital-prime-sets
+---
+
+# --description--
+
+Using all of the digits 1 through 9 and concatenating them freely to form decimal integers, different sets can be formed. Interestingly with the set $\\{2, 5, 47, 89, 631\\}$, all of the elements belonging to it are prime.
+
+How many distinct sets containing each of the digits one through nine exactly once contain only prime elements?
+
+# --hints--
+
+`pandigitalPrimeSets()` should return `44680`.
+
+```js
+assert.strictEqual(pandigitalPrimeSets(), 44680);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pandigitalPrimeSets() {
+
+  return true;
+}
+
+pandigitalPrimeSets();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-119-digit-power-sum.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-119-digit-power-sum.md
new file mode 100644
index 00000000000..87bf836b33a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-119-digit-power-sum.md
@@ -0,0 +1,44 @@
+---
+id: 5900f3e41000cf542c50fef6
+title: 'Problem 119: Digit power sum'
+challengeType: 1
+forumTopicId: 301745
+dashedName: problem-119-digit-power-sum
+---
+
+# --description--
+
+The number 512 is interesting because it is equal to the sum of its digits raised to some power: $5 + 1 + 2 = 8$, and $8^3 = 512$. Another example of a number with this property is $614656 = 28^4$.
+
+We shall define $a_n$ to be the $n-th$ term of this sequence and insist that a number must contain at least two digits to have a sum.
+
+You are given that $a_2 = 512$ and $a_{10} = 614656$.
+
+Find $a_{30}$.
+
+# --hints--
+
+`digitPowerSum()` should return `248155780267521`.
+
+```js
+assert.strictEqual(digitPowerSum(), 248155780267521);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function digitPowerSum() {
+
+  return true;
+}
+
+digitPowerSum();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-12-highly-divisible-triangular-number.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-12-highly-divisible-triangular-number.md
new file mode 100644
index 00000000000..2fa68e80276
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-12-highly-divisible-triangular-number.md
@@ -0,0 +1,139 @@
+---
+id: 5900f3781000cf542c50fe8b
+title: 'Problem 12: Highly divisible triangular number'
+challengeType: 1
+forumTopicId: 301746
+dashedName: problem-12-highly-divisible-triangular-number
+---
+
+# --description--
+
+The sequence of triangle numbers is generated by adding the natural numbers. So the 7th triangle number would be 1 + 2 + 3 + 4 + 5 + 6 + 7 = 28. The first ten terms would be:
+
+<div style='text-align: center;'>1, 3, 6, 10, 15, 21, 28, 36, 45, 55, ...</div>
+
+Let us list the factors of the first seven triangle numbers:
+
+<div style='padding-left: 4em;'><b>1:</b> 1</div>
+<div style='padding-left: 4em;'><b>3:</b> 1, 3</div>
+<div style='padding-left: 4em;'><b>6:</b> 1, 2, 3, 6</div>
+<div style='padding-left: 4em;'><b>10:</b> 1, 2, 5, 10</div>
+<div style='padding-left: 4em;'><b>15:</b> 1, 3, 5, 15</div>
+<div style='padding-left: 4em;'><b>21:</b> 1, 3, 7, 21</div>
+<div style='padding-left: 4em;'><b>28:</b> 1, 2, 4, 7, 14, 28</div>
+
+We can see that 28 is the first triangle number to have over five divisors.
+
+What is the value of the first triangle number to have over `n` divisors?
+
+# --hints--
+
+`divisibleTriangleNumber(5)` should return a number.
+
+```js
+assert(typeof divisibleTriangleNumber(5) === 'number');
+```
+
+`divisibleTriangleNumber(5)` should return 28.
+
+```js
+assert.strictEqual(divisibleTriangleNumber(5), 28);
+```
+
+`divisibleTriangleNumber(23)` should return 630.
+
+```js
+assert.strictEqual(divisibleTriangleNumber(23), 630);
+```
+
+`divisibleTriangleNumber(167)` should return 1385280.
+
+```js
+assert.strictEqual(divisibleTriangleNumber(167), 1385280);
+```
+
+`divisibleTriangleNumber(374)` should return 17907120.
+
+```js
+assert.strictEqual(divisibleTriangleNumber(374), 17907120);
+```
+
+`divisibleTriangleNumber(500)` should return 76576500.
+
+```js
+assert.strictEqual(divisibleTriangleNumber(500), 76576500);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function divisibleTriangleNumber(n) {
+
+  return true;
+}
+
+divisibleTriangleNumber(500);
+```
+
+# --solutions--
+
+```js
+function divisibleTriangleNumber(n) {
+  if (n === 1) return 3;
+  let counter = 1;
+  let triangleNumber = counter++;
+
+
+ while (noOfFactors(triangleNumber) < n) {
+   triangleNumber += counter++;
+ }
+return triangleNumber;
+}
+
+function noOfFactors(num) {
+  const primeFactors = getPrimeFactors(num);
+  let prod = 1;
+  for(let p in primeFactors) {
+    prod *= (primeFactors[p] + 1)
+  }
+  return prod;
+}
+
+function getPrimeFactors(num) {
+  let n = num;
+  let primes = {};
+
+  let p = 2;
+  let sqrt = Math.sqrt(num);
+
+  function checkAndUpdate(inc) {
+    if (n % p === 0) {
+      const curr = primes[p];
+      if (curr) {
+        primes[p]++
+      } else {
+        primes[p] = 1;
+      }
+      n /= p;
+    } else {
+      p += inc;
+    }
+  }
+
+  while(p === 2 && p <= n) {
+    checkAndUpdate(1);
+  }
+
+  while (p <= n && p <= sqrt) {
+    checkAndUpdate(2);
+  }
+  if(Object.keys(primes).length === 0) {
+    primes[num] = 1;
+  } else if(n !== 1) {
+    primes[n] = 1;
+  }
+  return primes;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-120-square-remainders.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-120-square-remainders.md
new file mode 100644
index 00000000000..d42c224e3db
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-120-square-remainders.md
@@ -0,0 +1,42 @@
+---
+id: 5900f3e41000cf542c50fef7
+title: 'Problem 120: Square remainders'
+challengeType: 1
+forumTopicId: 301747
+dashedName: problem-120-square-remainders
+---
+
+# --description--
+
+Let `r` be the remainder when ${(a − 1)}^n + {(a + 1)}^n$ is divided by $a^2$.
+
+For example, if $a = 7$ and $n = 3$, then $r = 42: 6^3 + 8^3 = 728 ≡ 42 \\ \text{mod}\\ 49$. And as `n` varies, so too will `r`, but for $a = 7$ it turns out that $r_{max} = 42$.
+
+For $3 ≤ a ≤ 1000$, find $\sum{r}_{max}$.
+
+# --hints--
+
+`squareRemainders()` should return `333082500`.
+
+```js
+assert.strictEqual(squareRemainders(), 333082500);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function squareRemainders() {
+
+  return true;
+}
+
+squareRemainders();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-121-disc-game-prize-fund.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-121-disc-game-prize-fund.md
new file mode 100644
index 00000000000..0f23b7fdd50
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-121-disc-game-prize-fund.md
@@ -0,0 +1,44 @@
+---
+id: 5900f3e51000cf542c50fef8
+title: 'Problem 121: Disc game prize fund'
+challengeType: 1
+forumTopicId: 301748
+dashedName: problem-121-disc-game-prize-fund
+---
+
+# --description--
+
+A bag contains one red disc and one blue disc. In a game of chance a player takes a disc at random and its colour is noted. After each turn the disc is returned to the bag, an extra red disc is added, and another disc is taken at random.
+
+The player pays £1 to play and wins if they have taken more blue discs than red discs at the end of the game.
+
+If the game is played for four turns, the probability of a player winning is exactly 11/120, and so the maximum prize fund the banker should allocate for winning in this game would be £10 before they would expect to incur a loss. Note that any payout will be a whole number of pounds and also includes the original £1 paid to play the game, so in the example given the player actually wins £9.
+
+Find the maximum prize fund that should be allocated to a single game in which fifteen turns are played.
+
+# --hints--
+
+`discGamePrize()` should return `2269`.
+
+```js
+assert.strictEqual(discGamePrize(), 2269);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function discGamePrize() {
+
+  return true;
+}
+
+discGamePrize();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-122-efficient-exponentiation.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-122-efficient-exponentiation.md
new file mode 100644
index 00000000000..78c29aa7952
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-122-efficient-exponentiation.md
@@ -0,0 +1,57 @@
+---
+id: 5900f3e61000cf542c50fef9
+title: 'Problem 122: Efficient exponentiation'
+challengeType: 1
+forumTopicId: 301749
+dashedName: problem-122-efficient-exponentiation
+---
+
+# --description--
+
+The most naive way of computing $n^{15}$ requires fourteen multiplications:
+
+$$n × n × \ldots × n = n^{15}$$
+
+But using a "binary" method you can compute it in six multiplications:
+
+$$\begin{align}   & n × n = n^2\\\\
+  & n^2 × n^2 = n^4\\\\   & n^4 × n^4 = n^8\\\\
+  & n^8 × n^4 = n^{12}\\\\   & n^{12} × n^2 = n^{14}\\\\
+  & n^{14} × n = n^{15} \end{align}$$
+
+However it is yet possible to compute it in only five multiplications:
+
+$$\begin{align}   & n × n = n^2\\\\
+  & n^2 × n = n^3\\\\   & n^3 × n^3 = n^6\\\\
+  & n^6 × n^6 = n^{12}\\\\ & n^{12} × n^3 = n^{15} \end{align}$$
+
+We shall define $m(k)$ to be the minimum number of multiplications to compute $n^k$; for example $m(15) = 5$.
+
+For $1 ≤ k ≤ 200$, find $\sum{m(k)}$.
+
+# --hints--
+
+`efficientExponentation()` should return `1582`.
+
+```js
+assert.strictEqual(efficientExponentation(), 1582);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function efficientExponentation() {
+
+  return true;
+}
+
+efficientExponentation();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-123-prime-square-remainders.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-123-prime-square-remainders.md
new file mode 100644
index 00000000000..743089b64e3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-123-prime-square-remainders.md
@@ -0,0 +1,44 @@
+---
+id: 5900f3e71000cf542c50fefa
+title: 'Problem 123: Prime square remainders'
+challengeType: 1
+forumTopicId: 301750
+dashedName: problem-123-prime-square-remainders
+---
+
+# --description--
+
+Let $p_n$ be the $n$th prime: 2, 3, 5, 7, 11, ..., and let $r$ be the remainder when ${(p_n−1)}^n + {(p_n+1)}^n$ is divided by ${p_n}^2$.
+
+For example, when $n = 3, p_3 = 5$, and $4^3 + 6^3 = 280 ≡ 5\\ mod\\ 25$.
+
+The least value of $n$ for which the remainder first exceeds $10^9$ is 7037.
+
+Find the least value of $n$ for which the remainder first exceeds $10^{10}$.
+
+# --hints--
+
+`primeSquareRemainders()` should return `21035`.
+
+```js
+assert.strictEqual(primeSquareRemainders(), 21035);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeSquareRemainders() {
+
+  return true;
+}
+
+primeSquareRemainders();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-124-ordered-radicals.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-124-ordered-radicals.md
new file mode 100644
index 00000000000..899171a9731
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-124-ordered-radicals.md
@@ -0,0 +1,142 @@
+---
+id: 5900f3e81000cf542c50fefb
+title: 'Problem 124: Ordered radicals'
+challengeType: 1
+forumTopicId: 301751
+dashedName: problem-124-ordered-radicals
+---
+
+# --description--
+
+The radical of $n$, $rad(n)$, is the product of the distinct prime factors of $n$. For example, $504 = 2^3 × 3^2 × 7$, so $rad(504) = 2 × 3 × 7 = 42$.
+
+If we calculate $rad(n)$ for $1 ≤ n ≤ 10$, then sort them on $rad(n)$, and sorting on $n$ if the radical values are equal, we get:
+
+<div style="text-align: center;">
+  <table cellpadding="2" cellspacing="0" border="0" align="center">
+    <tbody>
+      <tr>
+        <td colspan="2">$Unsorted$</td>
+        <td></td>
+        <td colspan="3">$Sorted$</td>
+      </tr>
+      <tr>
+        <td>$n$</td>
+        <td>$rad(n)$</td>
+        <td></td>
+        <td>$n$</td>
+        <td>$rad(n)$</td>
+        <td>$k$</td>
+      </tr>
+      <tr>
+        <td>1</td>
+        <td>1</td>
+        <td></td>
+        <td>1</td>
+        <td>1</td>
+        <td>1</td>
+      </tr>
+      <tr>
+        <td>2</td>
+        <td>2</td>
+        <td></td>
+        <td>2</td>
+        <td>2</td>
+        <td>2</td>
+      </tr>
+      <tr>
+        <td>3</td>
+        <td>3</td>
+        <td></td>
+        <td>4</td>
+        <td>2</td>
+        <td>3</td>
+      </tr>
+      <tr>
+        <td>4</td>
+        <td>2</td>
+        <td></td>
+        <td>8</td>
+        <td>2</td>
+        <td>4</td>
+      </tr>
+      <tr>
+        <td>5</td>
+        <td>5</td>
+        <td></td>
+        <td>3</td>
+        <td>3</td>
+        <td>5</td>
+      </tr>
+      <tr>
+        <td>6</td>
+        <td>6</td>
+        <td></td>
+        <td>9</td>
+        <td>3</td>
+        <td>6</td>
+      </tr>
+      <tr>
+        <td>7</td>
+        <td>7</td>
+        <td></td>
+        <td>5</td>
+        <td>5</td>
+        <td>7</td>
+      </tr>
+      <tr>
+        <td>8</td>
+        <td>2</td>
+        <td></td>
+        <td>6</td>
+        <td>6</td>
+        <td>8</td>
+      </tr>
+      <tr>
+        <td>9</td>
+        <td>3</td>
+        <td></td>
+        <td>7</td>
+        <td>7</td>
+        <td>9</td>
+      </tr>
+      <tr>
+        <td>10</td>
+        <td>10</td>
+        <td></td>
+        <td>10</td>
+        <td>10</td>
+        <td>10</td>
+      </tr>
+    </tbody>
+  </table>
+</div><br>
+
+Let $E(k)$ be the $k$th element in the sorted $n$ column; for example, $E(4) = 8$ and $E(6) = 9$. If $rad(n)$ is sorted for $1 ≤ n ≤ 100000$, find $E(10000)$.
+
+# --hints--
+
+`orderedRadicals()` should return `21417`.
+
+```js
+assert.strictEqual(orderedRadicals(), 21417);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function orderedRadicals() {
+
+  return true;
+}
+
+orderedRadicals();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
new file mode 100644
index 00000000000..eb499c13931
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
@@ -0,0 +1,79 @@
+---
+id: 5900f3e91000cf542c50fefc
+title: 'Problem 125: Palindromic sums'
+challengeType: 1
+forumTopicId: 301752
+dashedName: problem-125-palindromic-sums
+---
+
+# --description--
+
+The palindromic number 595 is interesting because it can be written as the sum of consecutive squares: $6^2 + 7^2 + 8^2 + 9^2 + 10^2 + 11^2 + 12^2$.
+
+There are exactly eleven palindromes below one-thousand that can be written as consecutive square sums, and the sum of these palindromes is 4164. Note that $1 = 0^2 + 1^2$ has not been included as this problem is concerned with the squares of positive integers.
+
+Find the sum of all the numbers less than the  `limit`  that are both palindromic and can be written as the sum of consecutive squares.
+
+# --hints--
+`palindromicSums(100000000)` should return `2906969179`.
+
+```js
+
+assert.strictEqual(palindromicSums(100000000), 2906969179);
+
+```
+
+`palindromicSums(100)` should return `137`.
+
+```js
+assert.strictEqual(palindromicSums(100), 137);
+```
+
+`palindromicSums(1000)` should return `4164`.
+
+```js
+assert.strictEqual(palindromicSums(1000),4164);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function palindromicSums(limit) {
+
+  return true;
+}
+
+palindromicSums(100);
+```
+
+# --solutions--
+
+```js
+function isPalindrome(num) {
+  return num
+    .toString()
+    .split('')
+    .every((digit, i, arr) => digit === arr[arr.length - 1 - i]);
+}
+
+function palindromicSums(limit) {
+  let sumOfPalindromes = 0;
+  const sqrtLimit = Math.sqrt(limit);
+  const list = new Set();
+
+  for (let i = 1; i <= sqrtLimit; i++) {
+    let sumOfSquares = i * i;
+    for (let j = i + 1; j <= sqrtLimit; j++) {
+      sumOfSquares += j * j;
+      if (sumOfSquares > limit) break;
+      if (isPalindrome(sumOfSquares) && !list.has(sumOfSquares)) {
+        sumOfPalindromes += sumOfSquares;
+        list.add(sumOfSquares);
+      }
+    }
+  }
+  return sumOfPalindromes;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-126-cuboid-layers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-126-cuboid-layers.md
new file mode 100644
index 00000000000..d089c18aff0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-126-cuboid-layers.md
@@ -0,0 +1,50 @@
+---
+id: 5900f3ea1000cf542c50fefd
+title: 'Problem 126: Cuboid layers'
+challengeType: 1
+forumTopicId: 301753
+dashedName: problem-126-cuboid-layers
+---
+
+# --description--
+
+The minimum number of cubes to cover every visible face on a cuboid measuring 3 x 2 x 1 is twenty-two.
+
+<img class="img-responsive center-block" alt="3x2x1 cuboid covered by twenty-two 1x1x1 cubes" src="https://cdn.freecodecamp.org/curriculum/project-euler/cuboid-layers.png" style="background-color: white; padding: 10px;" />
+
+If we add a second layer to this solid it would require forty-six cubes to cover every visible face, the third layer would require seventy-eight cubes, and the fourth layer would require one-hundred and eighteen cubes to cover every visible face.
+
+However, the first layer on a cuboid measuring 5 x 1 x 1 also requires twenty-two cubes; similarly, the first layer on cuboids measuring 5 x 3 x 1, 7 x 2 x 1, and 11 x 1 x 1 all contain forty-six cubes.
+
+We shall define $C(n)$ to represent the number of cuboids that contain $n$ cubes in one of its layers. So $C(22) = 2$, $C(46) = 4$, $C(78) = 5$, and $C(118) = 8$.
+
+It turns out that 154 is the least value of $n$ for which $C(n) = 10$.
+
+Find the least value of $n$ for which $C(n) = 1000$.
+
+# --hints--
+
+`cuboidLayers()` should return `18522`.
+
+```js
+assert.strictEqual(cuboidLayers(), 18522);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cuboidLayers() {
+
+  return true;
+}
+
+cuboidLayers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-127-abc-hits.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-127-abc-hits.md
new file mode 100644
index 00000000000..2f7f927858e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-127-abc-hits.md
@@ -0,0 +1,56 @@
+---
+id: 5900f3ec1000cf542c50fefe
+title: 'Problem 127: abc-hits'
+challengeType: 1
+forumTopicId: 301754
+dashedName: problem-127-abc-hits
+---
+
+# --description--
+
+The radical of $n$, $rad(n)$, is the product of distinct prime factors of $n$. For example, $504 = 2^3 × 3^2 × 7$, so $rad(504) = 2 × 3 × 7 = 42$.
+
+We shall define the triplet of positive integers (a, b, c) to be an abc-hit if:
+
+1. $GCD(a, b) = GCD(a, c) = GCD(b, c) = 1$
+2. $a &lt; b$
+3. $a + b = c$
+4. $rad(abc) &lt; c$
+
+For example, (5, 27, 32) is an abc-hit, because:
+
+1. $GCD(5, 27) = GCD(5, 32) = GCD(27, 32) = 1$
+2. $5 &lt; 27$
+3. $5 + 27 = 32$
+4. $rad(4320) = 30 &lt; 32$
+
+It turns out that abc-hits are quite rare and there are only thirty-one abc-hits for $c &lt; 1000$, with $\sum{c} = 12523$.
+
+Find $\sum{c}$ for $c &lt; 120000$.
+
+# --hints--
+
+`abcHits()` should return `18407904`.
+
+```js
+assert.strictEqual(abcHits(), 18407904);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function abcHits() {
+
+  return true;
+}
+
+abcHits();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-128-hexagonal-tile-differences.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-128-hexagonal-tile-differences.md
new file mode 100644
index 00000000000..7e8bea5482e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-128-hexagonal-tile-differences.md
@@ -0,0 +1,106 @@
+---
+id: 5900f3ec1000cf542c50feff
+title: 'Problem 128: Hexagonal tile differences'
+challengeType: 1
+forumTopicId: 301755
+dashedName: problem-128-hexagonal-tile-differences
+---
+
+# --description--
+
+A hexagonal tile with number 1 is surrounded by a ring of six hexagonal tiles, starting at "12 o'clock" and numbering the tiles 2 to 7 in an anti-clockwise direction.
+
+New rings are added in the same fashion, with the next rings being numbered 8 to 19, 20 to 37, 38 to 61, and so on. The diagram below shows the first three rings.
+
+<img class="img-responsive center-block" alt="three first rings of arranged hexagonal tiles with numbers 1 to 37, and with highlighted tiles 8 and 17" src="https://cdn.freecodecamp.org/curriculum/project-euler/hexagonal-tile-differences.png" style="background-color: white; padding: 10px;" />
+
+By finding the difference between tile $n$ and each of its six neighbours we shall define $PD(n)$ to be the number of those differences which are prime.
+
+For example, working clockwise around tile 8 the differences are 12, 29, 11, 6, 1, and 13. So $PD(8) = 3$.
+
+In the same way, the differences around tile 17 are 1, 17, 16, 1, 11, and 10, hence $PD(17) = 2$.
+
+It can be shown that the maximum value of $PD(n)$ is $3$.
+
+If all of the tiles for which $PD(n) = 3$ are listed in ascending order to form a sequence, the 10th tile would be 271.
+
+Find the 2000th tile in this sequence.
+
+# --hints--
+
+`hexagonalTile(10)` should return `271`.
+
+```js
+assert.strictEqual(hexagonalTile(10), 271);
+```
+
+`hexagonalTile(2000)` should return `14516824220`.
+
+```js
+assert.strictEqual(hexagonalTile(2000), 14516824220);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function hexagonalTile(tileIndex) {
+
+  return true;
+}
+
+hexagonalTile(10);
+```
+
+# --solutions--
+
+```js
+const NUM_PRIMES = 840000;
+const PRIME_SEIVE = Array(Math.floor((NUM_PRIMES-1)/2)).fill(true);
+(function initPrimes(num) {
+  const upper = Math.floor((num - 1) / 2);
+  const sqrtUpper = Math.floor((Math.sqrt(num) - 1) / 2);
+  for (let i = 0; i <= sqrtUpper; i++) {
+    if (PRIME_SEIVE[i]) {
+      // Mark value in PRIMES array
+      const prime = 2 * i + 3;
+      // Mark all multiples of this number as false (not prime)
+      const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
+      for (let j = primeSqaredIndex; j < upper; j += prime) {
+        PRIME_SEIVE[j] = false;
+      }
+    }
+  }
+})(NUM_PRIMES);
+
+function isPrime(num) {
+  if (num === 2) return true;
+  else if (num % 2 === 0) return false
+  else return PRIME_SEIVE[(num - 3) / 2];
+}
+
+function hexagonalTile(tileIndex) {
+  let count = 1;
+  let n = 1;
+  let number = 0;
+
+  while (count < tileIndex) {
+    if (isPrime(6*n - 1) &&
+        isPrime(6*n + 1) &&
+        isPrime(12*n + 5)) {
+      number = 3*n*n - 3*n + 2;
+      count++;
+      if (count >= tileIndex) break;
+    }
+    if (isPrime(6*n + 5) &&
+        isPrime(6*n - 1) &&
+        isPrime(12*n - 7) && n != 1) {
+      number = 3*n*n + 3*n + 1;
+      count++;
+    }
+    n++;
+  }
+  return number;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-129-repunit-divisibility.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-129-repunit-divisibility.md
new file mode 100644
index 00000000000..e7f423f96d5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-129-repunit-divisibility.md
@@ -0,0 +1,44 @@
+---
+id: 5900f3ef1000cf542c50ff01
+title: 'Problem 129: Repunit divisibility'
+challengeType: 1
+forumTopicId: 301756
+dashedName: problem-129-repunit-divisibility
+---
+
+# --description--
+
+A number consisting entirely of ones is called a repunit. We shall define $R(k)$ to be a repunit of length $k$; for example, $R(6) = 111111$.
+
+Given that $n$ is a positive integer and $GCD(n, 10) = 1$, it can be shown that there always exists a value, $k$, for which $R(k)$ is divisible by $n$, and let $A(n)$ be the least such value of $k$; for example, $A(7) = 6$ and $A(41) = 5$.
+
+The least value of $n$ for which $A(n)$ first exceeds ten is 17.
+
+Find the least value of $n$ for which $A(n)$ first exceeds one-million.
+
+# --hints--
+
+`repunitDivisibility()` should return `1000023`.
+
+```js
+assert.strictEqual(repunitDivisibility(), 1000023);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function repunitDivisibility() {
+
+  return true;
+}
+
+repunitDivisibility();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-13-large-sum.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-13-large-sum.md
new file mode 100644
index 00000000000..7e4db74fcb7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-13-large-sum.md
@@ -0,0 +1,286 @@
+---
+id: 5900f37a1000cf542c50fe8c
+title: 'Problem 13: Large sum'
+challengeType: 1
+forumTopicId: 301757
+dashedName: problem-13-large-sum
+---
+
+# --description--
+
+Work out the first ten digits of the sum of the following one-hundred 50-digit numbers.
+
+<div style='padding-left: 4em;'>
+  37107287533902102798797998220837590246510135740250<br>
+  46376937677490009712648124896970078050417018260538<br>
+  74324986199524741059474233309513058123726617309629<br>
+  91942213363574161572522430563301811072406154908250<br>
+  23067588207539346171171980310421047513778063246676<br>
+  89261670696623633820136378418383684178734361726757<br>
+  28112879812849979408065481931592621691275889832738<br>
+  44274228917432520321923589422876796487670272189318<br>
+  47451445736001306439091167216856844588711603153276<br>
+  70386486105843025439939619828917593665686757934951<br>
+  62176457141856560629502157223196586755079324193331<br>
+  64906352462741904929101432445813822663347944758178<br>
+  92575867718337217661963751590579239728245598838407<br>
+  58203565325359399008402633568948830189458628227828<br>
+  80181199384826282014278194139940567587151170094390<br>
+  35398664372827112653829987240784473053190104293586<br>
+  86515506006295864861532075273371959191420517255829<br>
+  71693888707715466499115593487603532921714970056938<br>
+  54370070576826684624621495650076471787294438377604<br>
+  53282654108756828443191190634694037855217779295145<br>
+  36123272525000296071075082563815656710885258350721<br>
+  45876576172410976447339110607218265236877223636045<br>
+  17423706905851860660448207621209813287860733969412<br>
+  81142660418086830619328460811191061556940512689692<br>
+  51934325451728388641918047049293215058642563049483<br>
+  62467221648435076201727918039944693004732956340691<br>
+  15732444386908125794514089057706229429197107928209<br>
+  55037687525678773091862540744969844508330393682126<br>
+  18336384825330154686196124348767681297534375946515<br>
+  80386287592878490201521685554828717201219257766954<br>
+  78182833757993103614740356856449095527097864797581<br>
+  16726320100436897842553539920931837441497806860984<br>
+  48403098129077791799088218795327364475675590848030<br>
+  87086987551392711854517078544161852424320693150332<br>
+  59959406895756536782107074926966537676326235447210<br>
+  69793950679652694742597709739166693763042633987085<br>
+  41052684708299085211399427365734116182760315001271<br>
+  65378607361501080857009149939512557028198746004375<br>
+  35829035317434717326932123578154982629742552737307<br>
+  94953759765105305946966067683156574377167401875275<br>
+  88902802571733229619176668713819931811048770190271<br>
+  25267680276078003013678680992525463401061632866526<br>
+  36270218540497705585629946580636237993140746255962<br>
+  24074486908231174977792365466257246923322810917141<br>
+  91430288197103288597806669760892938638285025333403<br>
+  34413065578016127815921815005561868836468420090470<br>
+  23053081172816430487623791969842487255036638784583<br>
+  11487696932154902810424020138335124462181441773470<br>
+  63783299490636259666498587618221225225512486764533<br>
+  67720186971698544312419572409913959008952310058822<br>
+  95548255300263520781532296796249481641953868218774<br>
+  76085327132285723110424803456124867697064507995236<br>
+  37774242535411291684276865538926205024910326572967<br>
+  23701913275725675285653248258265463092207058596522<br>
+  29798860272258331913126375147341994889534765745501<br>
+  18495701454879288984856827726077713721403798879715<br>
+  38298203783031473527721580348144513491373226651381<br>
+  34829543829199918180278916522431027392251122869539<br>
+  40957953066405232632538044100059654939159879593635<br>
+  29746152185502371307642255121183693803580388584903<br>
+  41698116222072977186158236678424689157993532961922<br>
+  62467957194401269043877107275048102390895523597457<br>
+  23189706772547915061505504953922979530901129967519<br>
+  86188088225875314529584099251203829009407770775672<br>
+  11306739708304724483816533873502340845647058077308<br>
+  82959174767140363198008187129011875491310547126581<br>
+  97623331044818386269515456334926366572897563400500<br>
+  42846280183517070527831839425882145521227251250327<br>
+  55121603546981200581762165212827652751691296897789<br>
+  32238195734329339946437501907836945765883352399886<br>
+  75506164965184775180738168837861091527357929701337<br>
+  62177842752192623401942399639168044983993173312731<br>
+  32924185707147349566916674687634660915035914677504<br>
+  99518671430235219628894890102423325116913619626622<br>
+  73267460800591547471830798392868535206946944540724<br>
+  76841822524674417161514036427982273348055556214818<br>
+  97142617910342598647204516893989422179826088076852<br>
+  87783646182799346313767754307809363333018982642090<br>
+  10848802521674670883215120185883543223812876952786<br>
+  71329612474782464538636993009049310363619763878039<br>
+  62184073572399794223406235393808339651327408011116<br>
+  66627891981488087797941876876144230030984490851411<br>
+  60661826293682836764744779239180335110989069790714<br>
+  85786944089552990653640447425576083659976645795096<br>
+  66024396409905389607120198219976047599490197230297<br>
+  64913982680032973156037120041377903785566085089252<br>
+  16730939319872750275468906903707539413042652315011<br>
+  94809377245048795150954100921645863754710598436791<br>
+  78639167021187492431995700641917969777599028300699<br>
+  15368713711936614952811305876380278410754449733078<br>
+  40789923115535562561142322423255033685442488917353<br>
+  44889911501440648020369068063960672322193204149535<br>
+  41503128880339536053299340368006977710650566631954<br>
+  81234880673210146739058568557934581403627822703280<br>
+  82616570773948327592232845941706525094512325230608<br>
+  22918802058777319719839450180888072429661980811197<br>
+  77158542502016545090413245809786882778948721859617<br>
+  72107838435069186155435662884062257473692284509516<br>
+  20849603980134001723930671666823555245252804609722<br>
+  53503534226472524250874054075591789781264330331690<br>
+</div>
+
+# --hints--
+
+`largeSum(testNums)` should return a number.
+
+```js
+assert(typeof largeSum(testNums) === 'number');
+```
+
+`largeSum(testNums)` should return 8348422521.
+
+```js
+assert.strictEqual(largeSum(testNums), 8348422521);
+```
+
+`largeSum(fiftyDigitNums)` should return 5537376230.
+
+```js
+assert.strictEqual(largeSum(fiftyDigitNums), 5537376230);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+const fiftyDigitNums = [
+  '37107287533902102798797998220837590246510135740250',
+  '46376937677490009712648124896970078050417018260538',
+  '74324986199524741059474233309513058123726617309629',
+  '91942213363574161572522430563301811072406154908250',
+  '23067588207539346171171980310421047513778063246676',
+  '89261670696623633820136378418383684178734361726757',
+  '28112879812849979408065481931592621691275889832738',
+  '44274228917432520321923589422876796487670272189318',
+  '47451445736001306439091167216856844588711603153276',
+  '70386486105843025439939619828917593665686757934951',
+  '62176457141856560629502157223196586755079324193331',
+  '64906352462741904929101432445813822663347944758178',
+  '92575867718337217661963751590579239728245598838407',
+  '58203565325359399008402633568948830189458628227828',
+  '80181199384826282014278194139940567587151170094390',
+  '35398664372827112653829987240784473053190104293586',
+  '86515506006295864861532075273371959191420517255829',
+  '71693888707715466499115593487603532921714970056938',
+  '54370070576826684624621495650076471787294438377604',
+  '53282654108756828443191190634694037855217779295145',
+  '36123272525000296071075082563815656710885258350721',
+  '45876576172410976447339110607218265236877223636045',
+  '17423706905851860660448207621209813287860733969412',
+  '81142660418086830619328460811191061556940512689692',
+  '51934325451728388641918047049293215058642563049483',
+  '62467221648435076201727918039944693004732956340691',
+  '15732444386908125794514089057706229429197107928209',
+  '55037687525678773091862540744969844508330393682126',
+  '18336384825330154686196124348767681297534375946515',
+  '80386287592878490201521685554828717201219257766954',
+  '78182833757993103614740356856449095527097864797581',
+  '16726320100436897842553539920931837441497806860984',
+  '48403098129077791799088218795327364475675590848030',
+  '87086987551392711854517078544161852424320693150332',
+  '59959406895756536782107074926966537676326235447210',
+  '69793950679652694742597709739166693763042633987085',
+  '41052684708299085211399427365734116182760315001271',
+  '65378607361501080857009149939512557028198746004375',
+  '35829035317434717326932123578154982629742552737307',
+  '94953759765105305946966067683156574377167401875275',
+  '88902802571733229619176668713819931811048770190271',
+  '25267680276078003013678680992525463401061632866526',
+  '36270218540497705585629946580636237993140746255962',
+  '24074486908231174977792365466257246923322810917141',
+  '91430288197103288597806669760892938638285025333403',
+  '34413065578016127815921815005561868836468420090470',
+  '23053081172816430487623791969842487255036638784583',
+  '11487696932154902810424020138335124462181441773470',
+  '63783299490636259666498587618221225225512486764533',
+  '67720186971698544312419572409913959008952310058822',
+  '95548255300263520781532296796249481641953868218774',
+  '76085327132285723110424803456124867697064507995236',
+  '37774242535411291684276865538926205024910326572967',
+  '23701913275725675285653248258265463092207058596522',
+  '29798860272258331913126375147341994889534765745501',
+  '18495701454879288984856827726077713721403798879715',
+  '38298203783031473527721580348144513491373226651381',
+  '34829543829199918180278916522431027392251122869539',
+  '40957953066405232632538044100059654939159879593635',
+  '29746152185502371307642255121183693803580388584903',
+  '41698116222072977186158236678424689157993532961922',
+  '62467957194401269043877107275048102390895523597457',
+  '23189706772547915061505504953922979530901129967519',
+  '86188088225875314529584099251203829009407770775672',
+  '11306739708304724483816533873502340845647058077308',
+  '82959174767140363198008187129011875491310547126581',
+  '97623331044818386269515456334926366572897563400500',
+  '42846280183517070527831839425882145521227251250327',
+  '55121603546981200581762165212827652751691296897789',
+  '32238195734329339946437501907836945765883352399886',
+  '75506164965184775180738168837861091527357929701337',
+  '62177842752192623401942399639168044983993173312731',
+  '32924185707147349566916674687634660915035914677504',
+  '99518671430235219628894890102423325116913619626622',
+  '73267460800591547471830798392868535206946944540724',
+  '76841822524674417161514036427982273348055556214818',
+  '97142617910342598647204516893989422179826088076852',
+  '87783646182799346313767754307809363333018982642090',
+  '10848802521674670883215120185883543223812876952786',
+  '71329612474782464538636993009049310363619763878039',
+  '62184073572399794223406235393808339651327408011116',
+  '66627891981488087797941876876144230030984490851411',
+  '60661826293682836764744779239180335110989069790714',
+  '85786944089552990653640447425576083659976645795096',
+  '66024396409905389607120198219976047599490197230297',
+  '64913982680032973156037120041377903785566085089252',
+  '16730939319872750275468906903707539413042652315011',
+  '94809377245048795150954100921645863754710598436791',
+  '78639167021187492431995700641917969777599028300699',
+  '15368713711936614952811305876380278410754449733078',
+  '40789923115535562561142322423255033685442488917353',
+  '44889911501440648020369068063960672322193204149535',
+  '41503128880339536053299340368006977710650566631954',
+  '81234880673210146739058568557934581403627822703280',
+  '82616570773948327592232845941706525094512325230608',
+  '22918802058777319719839450180888072429661980811197',
+  '77158542502016545090413245809786882778948721859617',
+  '72107838435069186155435662884062257473692284509516',
+  '20849603980134001723930671666823555245252804609722',
+  '53503534226472524250874054075591789781264330331690'
+];
+
+const testNums = [
+  '37107287533902102798797998220837590246510135740250',
+  '46376937677490009712648124896970078050417018260538'
+];
+```
+
+## --seed-contents--
+
+```js
+function largeSum(arr) {
+
+  return true;
+}
+
+// Only change code above this line
+
+const testNums = [
+  '37107287533902102798797998220837590246510135740250',
+  '46376937677490009712648124896970078050417018260538'
+];
+
+largeSum(testNums);
+```
+
+# --solutions--
+
+```js
+function largeSum(arr) {
+
+  let sum = 0;
+
+  arr.forEach(function(num) {
+    sum += parseInt(num, 10);
+  });
+
+  sum = sum.toString(10);
+
+  sum = sum.substring(0, 1) + sum.substring(2);
+
+  let firstTen = sum.slice(0, 10);
+  return parseInt(firstTen, 10);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-130-composites-with-prime-repunit-property.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-130-composites-with-prime-repunit-property.md
new file mode 100644
index 00000000000..48f7149e5a6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-130-composites-with-prime-repunit-property.md
@@ -0,0 +1,46 @@
+---
+id: 5900f3ee1000cf542c50ff00
+title: 'Problem 130: Composites with prime repunit property'
+challengeType: 1
+forumTopicId: 301758
+dashedName: problem-130-composites-with-prime-repunit-property
+---
+
+# --description--
+
+A number consisting entirely of ones is called a repunit. We shall define $R(k)$ to be a repunit of length $k$; for example, $R(6) = 111111$.
+
+Given that $n$ is a positive integer and $GCD(n, 10) = 1$, it can be shown that there always exists a value, $k$, for which $R(k)$ is divisible by $n$, and let $A(n)$ be the least such value of $k$; for example, $A(7) = 6$ and $A(41) = 5$.
+
+You are given that for all primes, $p > 5$, that $p − 1$ is divisible by $A(p)$. For example, when $p = 41, A(41) = 5$, and 40 is divisible by 5.
+
+However, there are rare composite values for which this is also true; the first five examples being 91, 259, 451, 481, and 703.
+
+Find the sum of the first twenty-five composite values of $n$ for which $GCD(n, 10) = 1$ and $n − 1$ is divisible by $A(n)$.
+
+# --hints--
+
+`compositeRepunit()` should return `149253`.
+
+```js
+assert.strictEqual(compositeRepunit(), 149253);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function compositeRepunit() {
+
+  return true;
+}
+
+compositeRepunit();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-131-prime-cube-partnership.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-131-prime-cube-partnership.md
new file mode 100644
index 00000000000..73e7e8e7490
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-131-prime-cube-partnership.md
@@ -0,0 +1,44 @@
+---
+id: 5900f3ef1000cf542c50ff02
+title: 'Problem 131: Prime cube partnership'
+challengeType: 1
+forumTopicId: 301759
+dashedName: problem-131-prime-cube-partnership
+---
+
+# --description--
+
+There are some prime values, $p$, for which there exists a positive integer, $n$, such that the expression $n^3 + n^{2}p$ is a perfect cube.
+
+For example, when $p = 19,\\ 8^3 + 8^2 × 19 = {12}^3$.
+
+What is perhaps most surprising is that the value of $n$ is unique for each prime with this property, and there are only four such primes below one hundred.
+
+How many primes below one million have this remarkable property?
+
+# --hints--
+
+`primeCubePartnership()` should return `173`.
+
+```js
+assert.strictEqual(primeCubePartnership(), 173);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeCubePartnership() {
+
+  return true;
+}
+
+primeCubePartnership();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-132-large-repunit-factors.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-132-large-repunit-factors.md
new file mode 100644
index 00000000000..5ca7c0760fd
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-132-large-repunit-factors.md
@@ -0,0 +1,42 @@
+---
+id: 5900f3f11000cf542c50ff03
+title: 'Problem 132: Large repunit factors'
+challengeType: 1
+forumTopicId: 301760
+dashedName: problem-132-large-repunit-factors
+---
+
+# --description--
+
+A number consisting entirely of ones is called a repunit. We shall define $R(k)$ to be a repunit of length $k$.
+
+For example, $R(10) = 1111111111 = 11 × 41 × 271 × 9091$, and the sum of these prime factors is 9414.
+
+Find the sum of the first forty prime factors of $R({10}^9)$.
+
+# --hints--
+
+`largeRepunitFactors()` should return `843296`.
+
+```js
+assert.strictEqual(largeRepunitFactors(), 843296);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function largeRepunitFactors() {
+
+  return true;
+}
+
+largeRepunitFactors();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-133-repunit-nonfactors.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-133-repunit-nonfactors.md
new file mode 100644
index 00000000000..ee861a14420
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-133-repunit-nonfactors.md
@@ -0,0 +1,44 @@
+---
+id: 5900f3f21000cf542c50ff04
+title: 'Problem 133: Repunit nonfactors'
+challengeType: 1
+forumTopicId: 301761
+dashedName: problem-133-repunit-nonfactors
+---
+
+# --description--
+
+A number consisting entirely of ones is called a repunit. We shall define $R(k)$ to be a repunit of length $k$; for example, $R(6) = 111111$.
+
+Let us consider repunits of the form $R({10}^n)$.
+
+Although $R(10)$, $R(100)$, or $R(1000)$ are not divisible by 17, $R(10000)$ is divisible by 17. Yet there is no value of n for which $R({10}^n)$ will divide by 19. Remarkably, 11, 17, 41, and 73 are the only four primes below one-hundred that can be a factor of $R({10}^n)$.
+
+Find the sum of all the primes below one-hundred thousand that will never be a factor of $R({10}^n)$.
+
+# --hints--
+
+`repunitNonfactors()` should return `453647705`.
+
+```js
+assert.strictEqual(repunitNonfactors(), 453647705);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function repunitNonfactors() {
+
+  return true;
+}
+
+repunitNonfactors();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-134-prime-pair-connection.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-134-prime-pair-connection.md
new file mode 100644
index 00000000000..d6629ef1579
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-134-prime-pair-connection.md
@@ -0,0 +1,42 @@
+---
+id: 5900f3f21000cf542c50ff05
+title: 'Problem 134: Prime pair connection'
+challengeType: 1
+forumTopicId: 301762
+dashedName: problem-134-prime-pair-connection
+---
+
+# --description--
+
+Consider the consecutive primes $p_1 = 19$ and $p_2 = 23$. It can be verified that 1219 is the smallest number such that the last digits are formed by $p_1$ whilst also being divisible by $p_2$.
+
+In fact, with the exception of $p_1 = 3$ and $p_2 = 5$, for every pair of consecutive primes, $p_2 > p_1$, there exist values of $n$ for which the last digits are formed by $p_1$ and $n$ is divisible by $p_2$. Let $S$ be the smallest of these values of $n$.
+
+Find $\sum{S}$ for every pair of consecutive primes with $5 ≤ p_1 ≤ 1000000$.
+
+# --hints--
+
+`primePairConnection()` should return `18613426663617120`.
+
+```js
+assert.strictEqual(primePairConnection(), 18613426663617120);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primePairConnection() {
+
+  return true;
+}
+
+primePairConnection();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-135-same-differences.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-135-same-differences.md
new file mode 100644
index 00000000000..3045467d61e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-135-same-differences.md
@@ -0,0 +1,44 @@
+---
+id: 5900f3f31000cf542c50ff06
+title: 'Problem 135: Same differences'
+challengeType: 1
+forumTopicId: 301763
+dashedName: problem-135-same-differences
+---
+
+# --description--
+
+Given the positive integers, $x$, $y$, and $z$, are consecutive terms of an arithmetic progression, the least value of the positive integer, $n$, for which the equation, $x^2 − y^2 − z^2 = n$, has exactly two solutions is $n = 27$:
+
+$$34^2 − 27^2 − 20^2 = 12^2 − 9^2 − 6^2 = 27$$
+
+It turns out that $n = 1155$ is the least value which has exactly ten solutions.
+
+How many values of $n$ less than one million have exactly ten distinct solutions?
+
+# --hints--
+
+`sameDifferences()` should return `4989`.
+
+```js
+assert.strictEqual(sameDifferences(), 4989);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sameDifferences() {
+
+  return true;
+}
+
+sameDifferences();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-136-singleton-difference.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-136-singleton-difference.md
new file mode 100644
index 00000000000..d73ff59f63b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-136-singleton-difference.md
@@ -0,0 +1,44 @@
+---
+id: 5900f3f51000cf542c50ff07
+title: 'Problem 136: Singleton difference'
+challengeType: 1
+forumTopicId: 301764
+dashedName: problem-136-singleton-difference
+---
+
+# --description--
+
+The positive integers, $x$, $y$, and $z$, are consecutive terms of an arithmetic progression. Given that $n$ is a positive integer, the equation, $x^2 − y^2 − z^2 = n$, has exactly one solution when $n = 20$:
+
+$$13^2 − 10^2 − 7^2 = 20$$
+
+In fact, there are twenty-five values of $n$ below one hundred for which the equation has a unique solution.
+
+How many values of $n$ less than fifty million have exactly one solution?
+
+# --hints--
+
+`singletonDifference()` should return `2544559`.
+
+```js
+assert.strictEqual(singletonDifference(), 2544559);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function singletonDifference() {
+
+  return true;
+}
+
+singletonDifference();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-137-fibonacci-golden-nuggets.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-137-fibonacci-golden-nuggets.md
new file mode 100644
index 00000000000..b700dba62d0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-137-fibonacci-golden-nuggets.md
@@ -0,0 +1,59 @@
+---
+id: 5900f3f51000cf542c50ff08
+title: 'Problem 137: Fibonacci golden nuggets'
+challengeType: 1
+forumTopicId: 301765
+dashedName: problem-137-fibonacci-golden-nuggets
+---
+
+# --description--
+
+Consider the infinite polynomial series $A_{F}(x) = xF_1 + x^2F_2 + x^3F_3 + \ldots$, where $F_k$ is the $k$th term in the Fibonacci sequence: $1, 1, 2, 3, 5, 8, \ldots$; that is, $F_k = F_{k − 1} + F_{k − 2}, F_1 = 1$ and $F_2 = 1$.
+
+For this problem we shall be interested in values of $x$ for which $A_{F}(x)$ is a positive integer.
+
+Surprisingly
+
+$$\begin{align} A_F(\frac{1}{2}) & = (\frac{1}{2}) × 1 + {(\frac{1}{2})}^2 × 1 + {(\frac{1}{2})}^3 × 2 + {(\frac{1}{2})}^4 × 3 + {(\frac{1}{2})}^5 × 5 + \cdots \\\\
+                 & = \frac{1}{2} + \frac{1}{4} + \frac{2}{8} + \frac{3}{16} + \frac{5}{32} + \cdots \\\\ & = 2 \end{align}$$
+
+The corresponding values of $x$ for the first five natural numbers are shown below.
+
+| $x$                         | $A_F(x)$ |
+| --------------------------- | -------- |
+| $\sqrt{2} − 1$             | $1$      |
+| $\frac{1}{2}$              | $2$      |
+| $\frac{\sqrt{13} − 2}{3}$ | $3$      |
+| $\frac{\sqrt{89} − 5}{8}$ | $4$      |
+| $\frac{\sqrt{34} − 3}{5}$ | $5$      |
+
+We shall call $A_F(x)$ a golden nugget if $x$ is rational, because they become increasingly rarer; for example, the 10th golden nugget is 74049690.
+
+Find the 15th golden nugget.
+
+# --hints--
+
+`goldenNugget()` should return `1120149658760`.
+
+```js
+assert.strictEqual(goldenNugget(), 1120149658760);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function goldenNugget() {
+
+  return true;
+}
+
+goldenNugget();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-138-special-isosceles-triangles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-138-special-isosceles-triangles.md
new file mode 100644
index 00000000000..6391b7523c4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-138-special-isosceles-triangles.md
@@ -0,0 +1,46 @@
+---
+id: 5900f3f61000cf542c50ff09
+title: 'Problem 138: Special isosceles triangles'
+challengeType: 1
+forumTopicId: 301766
+dashedName: problem-138-special-isosceles-triangles
+---
+
+# --description--
+
+Consider the isosceles triangle with base length, $b = 16$, and legs, $L = 17$.
+
+<img class="img-responsive center-block" alt="isosceles triangle with edges named as L - two edges with the same length and base of the triangle as b; and height of the triangle - h from the base of the triangle to the angle between L edges" src="https://cdn.freecodecamp.org/curriculum/project-euler/special-isosceles-triangles.png" style="background-color: white; padding: 10px;" />
+
+By using the Pythagorean theorem, it can be seen that the height of the triangle, $h = \sqrt{{17}^2 − 8^2} = 15$, which is one less than the base length.
+
+With $b = 272$ and $L = 305$, we get $h = 273$, which is one more than the base length, and this is the second smallest isosceles triangle with the property that $h = b ± 1$.
+
+Find $\sum{L}$ for the twelve smallest isosceles triangles for which $h = b ± 1$ and $b$, $L$ are positive integers.
+
+# --hints--
+
+`isoscelesTriangles()` should return `1118049290473932`.
+
+```js
+assert.strictEqual(isoscelesTriangles(), 1118049290473932);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function isoscelesTriangles() {
+
+  return true;
+}
+
+isoscelesTriangles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-139-pythagorean-tiles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-139-pythagorean-tiles.md
new file mode 100644
index 00000000000..19f12579cb2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-139-pythagorean-tiles.md
@@ -0,0 +1,46 @@
+---
+id: 5900f3f71000cf542c50ff0a
+title: 'Problem 139: Pythagorean tiles'
+challengeType: 1
+forumTopicId: 301767
+dashedName: problem-139-pythagorean-tiles
+---
+
+# --description--
+
+Let (a, b, c) represent the three sides of a right angle triangle with integral length sides. It is possible to place four such triangles together to form a square with length c.
+
+For example, (3, 4, 5) triangles can be placed together to form a 5 by 5 square with a 1 by 1 hole in the middle and it can be seen that the 5 by 5 square can be tiled with twenty-five 1 by 1 squares.
+
+<img class="img-responsive center-block" alt="two 5 x 5 squares: one with four 3x4x5 triangles placed to create 1x1 hole in the middle; second with twenty-five 1x1 squares" src="https://cdn.freecodecamp.org/curriculum/project-euler/pythagorean-tiles.png" style="background-color: white; padding: 10px;" />
+
+However, if (5, 12, 13) triangles were used, the hole would measure 7 by 7. These 7 by 7 squares could not be used to tile the 13 by 13 square.
+
+Given that the perimeter of the right triangle is less than one-hundred million, how many Pythagorean triangles would allow such a tiling to occur?
+
+# --hints--
+
+`pythagoreanTiles()` should return `10057761`.
+
+```js
+assert.strictEqual(pythagoreanTiles(), 10057761);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pythagoreanTiles() {
+
+  return true;
+}
+
+pythagoreanTiles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-14-longest-collatz-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-14-longest-collatz-sequence.md
new file mode 100644
index 00000000000..cac70d3bb29
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-14-longest-collatz-sequence.md
@@ -0,0 +1,111 @@
+---
+id: 5900f37a1000cf542c50fe8d
+title: 'Problem 14: Longest Collatz sequence'
+challengeType: 1
+forumTopicId: 301768
+dashedName: problem-14-longest-collatz-sequence
+---
+
+# --description--
+
+The following iterative sequence is defined for the set of positive integers:
+
+<div style='padding-left: 4em;'><var>n</var> → <var>n</var>/2 (<var>n</var> is even)</div>
+
+<div style='padding-left: 4em;'><var>n</var> → 3<var>n</var> + 1 (<var>n</var> is odd)</div>
+
+Using the rule above and starting with 13, we generate the following sequence:
+
+<div style='text-align: center;'>13 → 40 → 20 → 10 → 5 → 16 → 8 → 4 → 2 → 1</div>
+
+It can be seen that this sequence (starting at 13 and finishing at 1) contains 10 terms. Although it has not been proved yet (Collatz Problem), it is thought that all starting numbers finish at 1.
+
+Which starting number, under the given `limit`, produces the longest chain?
+
+**Note:** Once the chain starts the terms are allowed to go above `limit`.
+
+# --hints--
+
+`longestCollatzSequence(14)` should return a number.
+
+```js
+assert(typeof longestCollatzSequence(14) === 'number');
+```
+
+`longestCollatzSequence(14)` should return 9.
+
+```js
+assert.strictEqual(longestCollatzSequence(14), 9);
+```
+
+`longestCollatzSequence(5847)` should return 3711.
+
+```js
+assert.strictEqual(longestCollatzSequence(5847), 3711);
+```
+
+`longestCollatzSequence(46500)` should return 35655.
+
+```js
+assert.strictEqual(longestCollatzSequence(46500), 35655);
+```
+
+`longestCollatzSequence(54512)` should return 52527.
+
+```js
+assert.strictEqual(longestCollatzSequence(54512), 52527);
+```
+
+`longestCollatzSequence(100000)` should return 77031.
+
+```js
+assert.strictEqual(longestCollatzSequence(100000), 77031);
+```
+
+`longestCollatzSequence(1000000)` should return 837799.
+
+```js
+assert.strictEqual(longestCollatzSequence(1000000), 837799);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function longestCollatzSequence(limit) {
+
+  return true;
+}
+
+longestCollatzSequence(14);
+```
+
+# --solutions--
+
+```js
+function longestCollatzSequence(limit) {
+  let longest = 1;
+  let maxLength = 1;
+  for (let i = Math.floor(limit / 2); i < limit; i++) {
+    let len = colLen(i);
+    if (len > maxLength) {
+      longest = i;
+      maxLength = len;
+    }
+  }
+  return longest;
+}
+
+const knownSequence = { '1': 1 };
+
+function colLen(n) {
+  if (knownSequence[n]) {
+    return knownSequence[n];
+  } else {
+    const len = n % 2 === 0 ? colLen(n / 2) + 1 : colLen((3 * n + 1) / 2) + 2;
+    knownSequence[n] = len;
+    return len;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-140-modified-fibonacci-golden-nuggets.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-140-modified-fibonacci-golden-nuggets.md
new file mode 100644
index 00000000000..bdd6612a63c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-140-modified-fibonacci-golden-nuggets.md
@@ -0,0 +1,52 @@
+---
+id: 5900f3fa1000cf542c50ff0c
+title: 'Problem 140: Modified Fibonacci golden nuggets'
+challengeType: 1
+forumTopicId: 301769
+dashedName: problem-140-modified-fibonacci-golden-nuggets
+---
+
+# --description--
+
+Consider the infinite polynomial series $A_G(x) = xG_1 + x^2G_2 + x^3G_3 + \cdots$, where $G_k$ is the $k$th term of the second order recurrence relation $G_k = G_{k − 1} + G_{k − 2}, G_1 = 1$ and $G_2 = 4$; that is, $1, 4, 5, 9, 14, 23, \ldots$.
+
+For this problem we shall be concerned with values of $x$ for which $A_G(x)$ is a positive integer.
+
+The corresponding values of $x$ for the first five natural numbers are shown below.
+
+| $x$                           | $A_G(x)$ |
+| ----------------------------- | -------- |
+| $\frac{\sqrt{5} − 1}{4}$    | $1$      |
+| $\frac{2}{5}$                | $2$      |
+| $\frac{\sqrt{22} − 2}{6}$   | $3$      |
+| $\frac{\sqrt{137} − 5}{14}$ | $4$      |
+| $\frac{1}{2}$                | $5$      |
+
+We shall call $A_G(x)$ a golden nugget if $x$ is rational because they become increasingly rarer; for example, the 20th golden nugget is 211345365. Find the sum of the first thirty golden nuggets.
+
+# --hints--
+
+`modifiedGoldenNuggets()` should return `5673835352990`
+
+```js
+assert.strictEqual(modifiedGoldenNuggets(), 5673835352990);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function modifiedGoldenNuggets() {
+
+  return true;
+}
+
+modifiedGoldenNuggets();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-141-investigating-progressive-numbers-n-which-are-also-square.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-141-investigating-progressive-numbers-n-which-are-also-square.md
new file mode 100644
index 00000000000..9f1e9d3bb45
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-141-investigating-progressive-numbers-n-which-are-also-square.md
@@ -0,0 +1,46 @@
+---
+id: 5900f3f91000cf542c50ff0b
+title: 'Problem 141: Investigating progressive numbers, n, which are also square'
+challengeType: 1
+forumTopicId: 301770
+dashedName: problem-141-investigating-progressive-numbers-n-which-are-also-square
+---
+
+# --description--
+
+A positive integer, $n$, is divided by $d$ and the quotient and remainder are $q$ and $r$ respectively. In addition $d$, $q$, and $r$ are consecutive positive integer terms in a geometric sequence, but not necessarily in that order.
+
+For example, 58 divided by 6 has a quotient of 9 and a remainder of 4. It can also be seen that 4, 6, 9 are consecutive terms in a geometric sequence (common ratio $\frac{3}{2}$).
+
+We will call such numbers, $n$, progressive.
+
+Some progressive numbers, such as 9 and 10404 = ${102}^2$, also happen to be perfect squares. The sum of all progressive perfect squares below one hundred thousand is 124657.
+
+Find the sum of all progressive perfect squares below one trillion (${10}^{12}$).
+
+# --hints--
+
+`progressivePerfectSquares()` should return `878454337159`.
+
+```js
+assert.strictEqual(progressivePerfectSquares(), 878454337159);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function progressivePerfectSquares() {
+
+  return true;
+}
+
+progressivePerfectSquares();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-142-perfect-square-collection.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-142-perfect-square-collection.md
new file mode 100644
index 00000000000..17a07958833
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-142-perfect-square-collection.md
@@ -0,0 +1,38 @@
+---
+id: 5900f3fa1000cf542c50ff0d
+title: 'Problem 142: Perfect Square Collection'
+challengeType: 1
+forumTopicId: 301771
+dashedName: problem-142-perfect-square-collection
+---
+
+# --description--
+
+Find the smallest $x + y + z$ with integers $x > y > z > 0$ such that $x + y$, $x − y$, $x + z$, $x − z$, $y + z$, $y − z$ are all perfect squares.
+
+# --hints--
+
+`perfectSquareCollection()` should return `1006193`.
+
+```js
+assert.strictEqual(perfectSquareCollection(), 1006193);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function perfectSquareCollection() {
+
+  return true;
+}
+
+perfectSquareCollection();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-143-investigating-the-torricelli-point-of-a-triangle.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-143-investigating-the-torricelli-point-of-a-triangle.md
new file mode 100644
index 00000000000..8051dd4317d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-143-investigating-the-torricelli-point-of-a-triangle.md
@@ -0,0 +1,46 @@
+---
+id: 5900f3fc1000cf542c50ff0e
+title: 'Problem 143: Investigating the Torricelli point of a triangle'
+challengeType: 1
+forumTopicId: 301772
+dashedName: problem-143-investigating-the-torricelli-point-of-a-triangle
+---
+
+# --description--
+
+Let ABC be a triangle with all interior angles being less than 120 degrees. Let X be any point inside the triangle and let $XA = p$, $XC = q$, and $XB = r$.
+
+Fermat challenged Torricelli to find the position of X such that p + q + r was minimised.
+
+Torricelli was able to prove that if equilateral triangles AOB, BNC and AMC are constructed on each side of triangle ABC, the circumscribed circles of AOB, BNC, and AMC will intersect at a single point, T, inside the triangle. Moreover he proved that T, called the Torricelli/Fermat point, minimises $p + q + r$. Even more remarkable, it can be shown that when the sum is minimised, $AN = BM = CO = p + q + r$ and that AN, BM and CO also intersect at T.
+
+<img class="img-responsive center-block" alt="equilateral triangles AOB, BNC and AMC constructed on each side of triangle ABC; with the circumscribed circles of AOB, BNC, and AMC will intersecting at a single point, T, inside the triangle" src="https://cdn.freecodecamp.org/curriculum/project-euler/investigating-the-torricelli-point-of-a-triangle.png" style="background-color: white; padding: 10px;" />
+
+If the sum is minimised and a, b, c, p, q and r are all positive integers we shall call triangle ABC a Torricelli triangle. For example, $a = 399$, $b = 455$, $c = 511$ is an example of a Torricelli triangle, with $p + q + r = 784$. Find the sum of all distinct values of $p + q + r ≤ 120000$ for Torricelli triangles.
+
+# --hints--
+
+`sumTorricelliTriangles()` should return `30758397`.
+
+```js
+assert.strictEqual(sumTorricelliTriangles(), 30758397);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumTorricelliTriangles() {
+
+  return true;
+}
+
+sumTorricelliTriangles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-144-investigating-multiple-reflections-of-a-laser-beam.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-144-investigating-multiple-reflections-of-a-laser-beam.md
new file mode 100644
index 00000000000..7bc0d2b1137
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-144-investigating-multiple-reflections-of-a-laser-beam.md
@@ -0,0 +1,61 @@
+---
+id: 5900f3fc1000cf542c50ff0f
+title: 'Problem 144: Investigating multiple reflections of a laser beam'
+challengeType: 1
+forumTopicId: 301773
+dashedName: problem-144-investigating-multiple-reflections-of-a-laser-beam
+---
+
+# --description--
+
+In laser physics, a "white cell" is a mirror system that acts as a delay line for the laser beam. The beam enters the cell, bounces around on the mirrors, and eventually works its way back out.
+
+The specific white cell we will be considering is an ellipse with the equation $4{x}^2 + y^2 = 100$
+
+The section corresponding to $−0.01 ≤ x ≤ +0.01$ at the top is missing, allowing the light to enter and exit through the hole.
+
+<div style="text-align: center">
+  <img class="img-responsive center-block" alt="light beam starting at point (0.0, 10.1), and impacing the mirror at point (1.4, -9.6)" src="https://cdn.freecodecamp.org/curriculum/project-euler/investigating-multiple-reflections-of-a-laser-beam-1.png" style="display: inline-block; background-color: white; padding: 10px;">
+  <img class="img-responsive center-block" alt="animation with first 10 relfections of the beam" src="https://cdn.freecodecamp.org/curriculum/project-euler/investigating-multiple-reflections-of-a-laser-beam-2.gif" style="display: inline-block; background-color: white; padding: 10px;">
+</div><br>
+
+The light beam in this problem starts at the point (0.0, 10.1) just outside the white cell, and the beam first impacts the mirror at (1.4, -9.6).
+
+Each time the laser beam hits the surface of the ellipse, it follows the usual law of reflection "angle of incidence equals angle of reflection." That is, both the incident and reflected beams make the same angle with the normal line at the point of incidence.
+
+In the figure on the left, the red line shows the first two points of contact between the laser beam and the wall of the white cell; the blue line shows the line tangent to the ellipse at the point of incidence of the first bounce.
+
+The slope m of the tangent line at any point (x, y) of the given ellipse is: $m = −4 × \frac{x}{y}$
+
+The normal line is perpendicular to this tangent line at the point of incidence.
+
+The animation on the right shows the first 10 reflections of the beam.
+
+How many times does the beam hit the internal surface of the white cell before exiting?
+
+# --hints--
+
+`laserBeamReflections()` should return `354`.
+
+```js
+assert.strictEqual(laserBeamReflections(), 354);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function laserBeamReflections() {
+
+  return true;
+}
+
+laserBeamReflections();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-145-how-many-reversible-numbers-are-there-below-one-billion.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-145-how-many-reversible-numbers-are-there-below-one-billion.md
new file mode 100644
index 00000000000..f30799446b2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-145-how-many-reversible-numbers-are-there-below-one-billion.md
@@ -0,0 +1,42 @@
+---
+id: 5900f3fd1000cf542c50ff10
+title: 'Problem 145: How many reversible numbers are there below one-billion?'
+challengeType: 1
+forumTopicId: 301774
+dashedName: problem-145-how-many-reversible-numbers-are-there-below-one-billion
+---
+
+# --description--
+
+Some positive integers $n$ have the property that the sum [ $n + reverse(n)$ ] consists entirely of odd (decimal) digits. For instance, $36 + 63 = 99$ and $409 + 904 = 1313$. We will call such numbers reversible; so 36, 63, 409, and 904 are reversible. Leading zeroes are not allowed in either $n$ or $reverse(n)$.
+
+There are 120 reversible numbers below one-thousand.
+
+How many reversible numbers are there below one-billion (${10}^9$)?
+
+# --hints--
+
+`reversibleNumbers()` should return `608720`.
+
+```js
+assert.strictEqual(reversibleNumbers(), 608720);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function reversibleNumbers() {
+
+  return true;
+}
+
+reversibleNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-146-investigating-a-prime-pattern.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-146-investigating-a-prime-pattern.md
new file mode 100644
index 00000000000..6407520a81a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-146-investigating-a-prime-pattern.md
@@ -0,0 +1,40 @@
+---
+id: 5900f3fe1000cf542c50ff11
+title: 'Problem 146: Investigating a Prime Pattern'
+challengeType: 1
+forumTopicId: 301775
+dashedName: problem-146-investigating-a-prime-pattern
+---
+
+# --description--
+
+The smallest positive integer $n$ for which the numbers $n^2 + 1$, $n^2 + 3$, $n^2 + 7$, $n^2 + 9$, $n^2 + 13$, and $n^2 + 27$ are consecutive primes is 10. The sum of all such integers $n$ below one-million is 1242490.
+
+What is the sum of all such integers $n$ below 150 million?
+
+# --hints--
+
+`primePattern()` should return `676333270`.
+
+```js
+assert.strictEqual(primePattern(), 676333270);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primePattern() {
+
+  return true;
+}
+
+primePattern();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-147-rectangles-in-cross-hatched-grids.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-147-rectangles-in-cross-hatched-grids.md
new file mode 100644
index 00000000000..40978bdd4ef
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-147-rectangles-in-cross-hatched-grids.md
@@ -0,0 +1,48 @@
+---
+id: 5900f3ff1000cf542c50ff12
+title: 'Problem 147: Rectangles in cross-hatched grids'
+challengeType: 1
+forumTopicId: 301776
+dashedName: problem-147-rectangles-in-cross-hatched-grids
+---
+
+# --description--
+
+In a 3x2 cross-hatched grid, a total of 37 different rectangles could be situated within that grid as indicated in the sketch.
+
+<img class="img-responsive center-block" alt="ways of situating different rectangles wihtin cross-hatched 3x2 grid" src="https://cdn.freecodecamp.org/curriculum/project-euler/rectangles-in-cross-hatched-grids.png" style="background-color: white; padding: 10px;" />
+
+There are 5 grids smaller than 3x2, vertical and horizontal dimensions being important, i.e. 1x1, 2x1, 3x1, 1x2 and 2x2. If each of them is cross-hatched, the following number of different rectangles could be situated within those smaller grids:
+
+$$\begin{array}{|c|c|} \hline 1 \times 1 & 1  \\\\ \hline 2 \times 1 & 4  \\\\ \hline 3 \times 1 & 8  \\\\ \hline 1 \times 2 & 4  \\\\ \hline 2 \times 2 & 18 \\\\ \hline \end{array}$$
+
+Adding those to the 37 of the 3x2 grid, a total of 72 different rectangles could be situated within 3x2 and smaller grids.
+
+How many different rectangles could be situated within 47x43 and smaller grids?
+
+# --hints--
+
+`crossHatchedRectangles()` should return `846910284`.
+
+```js
+assert.strictEqual(crossHatchedRectangles(), 846910284);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function crossHatchedRectangles() {
+
+  return true;
+}
+
+crossHatchedRectangles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-148-exploring-pascals-triangle.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-148-exploring-pascals-triangle.md
new file mode 100644
index 00000000000..d30e62b5442
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-148-exploring-pascals-triangle.md
@@ -0,0 +1,54 @@
+---
+id: 5900f4021000cf542c50ff14
+title: 'Problem 148: Exploring Pascal''s triangle'
+challengeType: 1
+forumTopicId: 301777
+dashedName: problem-148-exploring-pascals-triangle
+---
+
+# --description--
+
+We can easily verify that none of the entries in the first seven rows of Pascal's triangle are divisible by 7:
+
+```markup
+            1
+          1   1
+        1   2   1
+      1   3   3   1
+    1   4   6   4   1
+  1   5   10  10  5   1
+1   6   15  20  15  6   1
+```
+
+However, if we check the first one hundred rows, we will find that only 2361 of the 5050 entries are not divisible by 7.
+
+# --instructions--
+
+Find the number of entries which are not divisible by 7 in the first one billion (${10}^9$) rows of Pascal's triangle.
+
+# --hints--
+
+`entriesOfPascalsTriangle()` should return `2129970655314432`.
+
+```js
+assert.strictEqual(entriesOfPascalsTriangle(), 2129970655314432);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function entriesOfPascalsTriangle() {
+
+  return true;
+}
+
+entriesOfPascalsTriangle();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-149-searching-for-a-maximum-sum-subsequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-149-searching-for-a-maximum-sum-subsequence.md
new file mode 100644
index 00000000000..c1fbd34962d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-149-searching-for-a-maximum-sum-subsequence.md
@@ -0,0 +1,54 @@
+---
+id: 5900f4021000cf542c50ff13
+title: 'Problem 149: Searching for a maximum-sum subsequence'
+challengeType: 1
+forumTopicId: 301778
+dashedName: problem-149-searching-for-a-maximum-sum-subsequence
+---
+
+# --description--
+
+Looking at the table below, it is easy to verify that the maximum possible sum of adjacent numbers in any direction (horizontal, vertical, diagonal or anti-diagonal) is $16 (= 8 + 7 + 1)$.
+
+$$\begin{array}{|r|r|r|r|} \hline −2 &  5 &  3 & 2 \\\\ \hline 9 & −6 &  5 & 1 \\\\ \hline 3 &  2 &  7 & 3 \\\\ \hline −1 &  8 & −4 & 8 \\\\ \hline \end{array}$$
+
+Now, let us repeat the search, but on a much larger scale:
+
+First, generate four million pseudo-random numbers using a specific form of what is known as a "Lagged Fibonacci Generator":
+
+For $1 ≤ k ≤ 55$, $s_k = (100003 − 200003k + 300007{k}^3) \\ (modulo\\ 1000000) − 500000$.
+
+For $56 ≤ k ≤ 4000000$, $s_k = (s_{k − 24} + s_{k − 55} + 1000000) \\ (modulo\\ 1000000) − 500000$.
+
+Thus, $s_{10} = −393027$ and $s_{100} = 86613$.
+
+The terms of $s$ are then arranged in a 2000×2000 table, using the first 2000 numbers to fill the first row (sequentially), the next 2000 numbers to fill the second row, and so on.
+
+Finally, find the greatest sum of (any number of) adjacent entries in any direction (horizontal, vertical, diagonal or anti-diagonal).
+
+# --hints--
+
+`maximumSubSequence()` should return `52852124`.
+
+```js
+assert.strictEqual(maximumSubSequence(), 52852124);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function maximumSubSequence() {
+
+  return true;
+}
+
+maximumSubSequence();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-15-lattice-paths.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-15-lattice-paths.md
new file mode 100644
index 00000000000..225eddd68e7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-15-lattice-paths.md
@@ -0,0 +1,68 @@
+---
+id: 5900f37b1000cf542c50fe8e
+title: 'Problem 15: Lattice paths'
+challengeType: 1
+forumTopicId: 301780
+dashedName: problem-15-lattice-paths
+---
+
+# --description--
+
+Starting in the top left corner of a 2×2 grid, and only being able to move to the right and down, there are exactly 6 routes to the bottom right corner.
+
+<img class="img-responsive center-block" alt="a diagram of 6 2 by 2 grids showing all the routes to the bottom right corner" src="https://cdn-media-1.freecodecamp.org/project-euler/1Atixoj.gif" style="background-color: white; padding: 10px;" />
+
+How many such routes are there through a given `gridSize`?
+
+# --hints--
+
+`latticePaths(4)` should return a number.
+
+```js
+assert(typeof latticePaths(4) === 'number');
+```
+
+`latticePaths(4)` should return 70.
+
+```js
+assert.strictEqual(latticePaths(4), 70);
+```
+
+`latticePaths(9)` should return 48620.
+
+```js
+assert.strictEqual(latticePaths(9), 48620);
+```
+
+`latticePaths(20)` should return 137846528820.
+
+```js
+assert.strictEqual(latticePaths(20), 137846528820);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function latticePaths(gridSize) {
+
+  return true;
+}
+
+latticePaths(4);
+```
+
+# --solutions--
+
+```js
+function latticePaths(gridSize) {
+  let paths = 1;
+
+  for (let i = 0; i < gridSize; i++) {
+    paths *= (2 * gridSize) - i;
+    paths /= i + 1;
+  }
+  return paths;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-150-searching-a-triangular-array-for-a-sub-triangle-having-minimum-sum.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-150-searching-a-triangular-array-for-a-sub-triangle-having-minimum-sum.md
new file mode 100644
index 00000000000..366d5dd9bd0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-150-searching-a-triangular-array-for-a-sub-triangle-having-minimum-sum.md
@@ -0,0 +1,63 @@
+---
+id: 5900f4031000cf542c50ff15
+title: >-
+  Problem 150: Searching a triangular array for a sub-triangle having minimum-sum
+challengeType: 1
+forumTopicId: 301781
+dashedName: problem-150-searching-a-triangular-array-for-a-sub-triangle-having-minimum-sum
+---
+
+# --description--
+
+In a triangular array of positive and negative integers, we wish to find a sub-triangle such that the sum of the numbers it contains is the smallest possible.
+
+In the example below, it can be easily verified that the marked triangle satisfies this condition having a sum of −42.
+
+<img class="img-responsive center-block" alt="triangular array, with marked sub-triangle, having sum of -42" src="https://cdn.freecodecamp.org/curriculum/project-euler/searching-a-triangular-array-for-a-sub-triangle-having-minimum-sum.gif" style="background-color: white; padding: 10px;" />
+
+We wish to make such a triangular array with one thousand rows, so we generate 500500 pseudo-random numbers $s_k$ in the range $±2^{19}$, using a type of random number generator (known as a Linear Congruential Generator) as follows:
+
+$$\begin{align}   t := & \\ 0\\\\
+  \text{for}\\ & k = 1\\ \text{up to}\\ k = 500500:\\\\   & t := (615949 × t + 797807)\\ \text{modulo}\\ 2^{20}\\\\
+  & s_k := t − 219\\\\ \end{align}$$
+
+Thus: $s_1 = 273519$, $s_2 = −153582$, $s_3 = 450905$ etc.
+
+Our triangular array is then formed using the pseudo-random numbers thus:
+
+$$ s_1 \\\\
+s_2\\;s_3 \\\\ s_4\\; s_5\\; s_6 \\\\
+s_7\\; s_8\\; s_9\\; s_{10} \\\\ \ldots $$
+
+Sub-triangles can start at any element of the array and extend down as far as we like (taking-in the two elements directly below it from the next row, the three elements directly below from the row after that, and so on).
+
+The "sum of a sub-triangle" is defined as the sum of all the elements it contains.
+
+Find the smallest possible sub-triangle sum.
+
+# --hints--
+
+`smallestSubTriangleSum()` should return `-271248680`.
+
+```js
+assert.strictEqual(smallestSubTriangleSum(), -271248680);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function smallestSubTriangleSum() {
+
+  return true;
+}
+
+smallestSubTriangleSum();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-151-paper-sheets-of-standard-sizes-an-expected-value-problem.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-151-paper-sheets-of-standard-sizes-an-expected-value-problem.md
new file mode 100644
index 00000000000..47f785ed97b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-151-paper-sheets-of-standard-sizes-an-expected-value-problem.md
@@ -0,0 +1,52 @@
+---
+id: 5900f4031000cf542c50ff16
+title: 'Problem 151: Paper sheets of standard sizes: an expected-value problem'
+challengeType: 1
+forumTopicId: 301782
+dashedName: problem-151-paper-sheets-of-standard-sizes-an-expected-value-problem
+---
+
+# --description--
+
+A printing shop runs 16 batches (jobs) every week and each batch requires a sheet of special colour-proofing paper of size A5.
+
+Every Monday morning, the foreman opens a new envelope, containing a large sheet of the special paper with size A1.
+
+He proceeds to cut it in half, thus getting two sheets of size A2. Then he cuts one of them in half to get two sheets of size A3 and so on until he obtains the A5-size sheet needed for the first batch of the week.
+
+All the unused sheets are placed back in the envelope.
+
+<img class="img-responsive center-block" alt="A1-size sheet split into: A2, A3, A4 and two A5 sheets" src="https://cdn.freecodecamp.org/curriculum/project-euler/paper-sheets-of-standard-sizes-an-expected-value-problem.png" style="background-color: white; padding: 10px;" />
+
+At the beginning of each subsequent batch, he takes one sheet of paper from the envelope at random. If it is of size A5, he uses it. If it is larger, he repeats the 'cut-in-half' procedure until he has what he needs, and any remaining sheets are always placed back in the envelope.
+
+Excluding the first and last batch of the week, find the expected number of times (during each week) that the foreman finds a single sheet of paper in the envelope.
+
+Give your answer rounded to six decimal places using the format `x.xxxxxx`.
+
+# --hints--
+
+`expectedValueProblem()` should return `0.464399`.
+
+```js
+assert.strictEqual(expectedValueProblem(), 0.464399);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function expectedValueProblem() {
+
+  return true;
+}
+
+expectedValueProblem();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-152-writing-one-half-as-a-sum-of-inverse-squares.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-152-writing-one-half-as-a-sum-of-inverse-squares.md
new file mode 100644
index 00000000000..c03197b781f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-152-writing-one-half-as-a-sum-of-inverse-squares.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4041000cf542c50ff17
+title: 'Problem 152: Writing one half as a sum of inverse squares'
+challengeType: 1
+forumTopicId: 301783
+dashedName: problem-152-writing-one-half-as-a-sum-of-inverse-squares
+---
+
+# --description--
+
+There are several ways to write the number $\frac{1}{2}$ as a sum of inverse squares using distinct integers.
+
+For instance, the numbers {2,3,4,5,7,12,15,20,28,35} can be used:
+
+$$\frac{1}{2} = \frac{1}{2^2} + \frac{1}{3^2} + \frac{1}{4^2} + \frac{1}{5^2} + \frac{1}{7^2} + \frac{1}{{12}^2} + \frac{1}{{15}^2} + \frac{1}{{20}^2} + \frac{1}{{28}^2} + \frac{1}{{35}^2}$$
+
+In fact, only using integers between 2 and 45 inclusive, there are exactly three ways to do it, the remaining two being: {2,3,4,6,7,9,10,20,28,35,36,45} and {2,3,4,6,7,9,12,15,28,30,35,36,45}.
+
+How many ways are there to write the number $\frac{1}{2}$ as a sum of inverse squares using distinct integers between 2 and 80 inclusive?
+
+# --hints--
+
+`sumInverseSquares()` should return `301`.
+
+```js
+assert.strictEqual(sumInverseSquares(), 301);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumInverseSquares() {
+
+  return true;
+}
+
+sumInverseSquares();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-153-investigating-gaussian-integers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-153-investigating-gaussian-integers.md
new file mode 100644
index 00000000000..a66c05c4f97
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-153-investigating-gaussian-integers.md
@@ -0,0 +1,84 @@
+---
+id: 5900f4051000cf542c50ff18
+title: 'Problem 153: Investigating Gaussian Integers'
+challengeType: 1
+forumTopicId: 301784
+dashedName: problem-153-investigating-gaussian-integers
+---
+
+# --description--
+
+As we all know the equation $x^2 = -1$ has no solutions for real $x$.
+
+If we however introduce the imaginary number $i$ this equation has two solutions: $x = i$ and $x = -i$.
+
+If we go a step further the equation ${(x - 3)}^2 = -4$ has two complex solutions: $x = 3 + 2i$ and $x = 3 - 2i$, which are called each others' complex conjugate.
+
+Numbers of the form $a + bi$ are called complex numbers.
+
+In general $a + bi$ and $a − bi$ are each other's complex conjugate. A Gaussian Integer is a complex number $a + bi$ such that both $a$ and $b$ are integers.
+
+The regular integers are also Gaussian integers (with $b = 0$).
+
+To distinguish them from Gaussian integers with $b ≠ 0$ we call such integers "rational integers."
+
+A Gaussian integer is called a divisor of a rational integer $n$ if the result is also a Gaussian integer.
+
+If for example we divide 5 by $1 + 2i$ we can simplify in the following manner:
+
+Multiply numerator and denominator by the complex conjugate of $1 + 2i$: $1 − 2i$.
+
+The result is:
+
+$$\frac{5}{1 + 2i} = \frac{5}{1 + 2i} \frac{1 - 2i}{1 - 2i} = \frac{5(1 - 2i)}{1 - {(2i)}^2} = \frac{5(1 - 2i)}{1 - (-4)} = \frac{5(1 - 2i)}{5} = 1 - 2i$$
+
+So $1 + 2i$ is a divisor of 5.
+
+Note that $1 + i$ is not a divisor of 5 because:
+
+$$\frac{5}{1 + i} = \frac{5}{2} - \frac{5}{2}i$$
+
+Note also that if the Gaussian Integer ($a + bi$) is a divisor of a rational integer $n$, then its complex conjugate ($a − bi$) is also a divisor of $n$. In fact, 5 has six divisors such that the real part is positive: {1, 1 + 2i, 1 − 2i, 2 + i, 2 − i, 5}.
+
+The following is a table of all of the divisors for the first five positive rational integers:
+
+| n | Gaussian integer divisors with positive real part | Sum s(n) of these divisors |
+| - | ------------------------------------------------- | -------------------------- |
+| 1 | 1                                                 | 1                          |
+| 2 | 1, 1 + i, 1 - i, 2                                | 5                          |
+| 3 | 1, 3                                              | 4                          |
+| 4 | 1, 1 + i, 1 - i, 2, 2 + 2i, 2 - 2i, 4             | 13                         |
+| 5 | 1, 1 + 2i, 1 - 2i, 2 + i, 2 - i, 5                | 12                         |
+
+For divisors with positive real parts, then, we have: $\displaystyle\sum_{n=1}^5 s(n) = 35$.
+
+For $1 ≤ n ≤ {10}^5$, $\displaystyle\sum_{n = 1}^{{10}^5} s(n) = 17924657155$.
+
+What is $\displaystyle\sum_{n=1}^{{10}^8} s(n)$?
+
+# --hints--
+
+`sumGaussianIntegers()` should return `17971254122360636`.
+
+```js
+assert.strictEqual(sumGaussianIntegers(), 17971254122360636);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumGaussianIntegers() {
+
+  return true;
+}
+
+sumGaussianIntegers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-154-exploring-pascals-pyramid.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-154-exploring-pascals-pyramid.md
new file mode 100644
index 00000000000..40533ba38f8
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-154-exploring-pascals-pyramid.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4071000cf542c50ff19
+title: 'Problem 154: Exploring Pascal''s pyramid'
+challengeType: 1
+forumTopicId: 301785
+dashedName: problem-154-exploring-pascals-pyramid
+---
+
+# --description--
+
+A triangular pyramid is constructed using spherical balls so that each ball rests on exactly three balls of the next lower level.
+
+<img class="img-responsive center-block" alt="triangular pyramid constructed using spherical balls with four levels" src="https://cdn.freecodecamp.org/curriculum/project-euler/exploring-pascals-pyramid.png" style="background-color: white; padding: 10px;" />
+
+Then, we calculate the number of paths leading from the apex to each position: A path starts at the apex and progresses downwards to any of the three spheres directly below the current position. Consequently, the number of paths to reach a certain position is the sum of the numbers immediately above it (depending on the position, there are up to three numbers above it).
+
+The result is Pascal's pyramid and the numbers at each level n are the coefficients of the trinomial expansion ${(x + y + z)}^n$.
+
+How many coefficients in the expansion of ${(x + y + z)}^{200000}$ are multiples of ${10}^{12}$?
+
+# --hints--
+
+`pascalsPyramid()` should return `479742450`.
+
+```js
+assert.strictEqual(pascalsPyramid(), 479742450);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pascalsPyramid() {
+
+  return true;
+}
+
+pascalsPyramid();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-155-counting-capacitor-circuits.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-155-counting-capacitor-circuits.md
new file mode 100644
index 00000000000..ee1b1f97d9b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-155-counting-capacitor-circuits.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4081000cf542c50ff1a
+title: 'Problem 155: Counting Capacitor Circuits'
+challengeType: 1
+forumTopicId: 301786
+dashedName: problem-155-counting-capacitor-circuits
+---
+
+# --description--
+
+An electric circuit uses exclusively identical capacitors of the same value C.
+
+The capacitors can be connected in series or in parallel to form sub-units, which can then be connected in series or in parallel with other capacitors or other sub-units to form larger sub-units, and so on up to a final circuit.
+
+Using this simple procedure and up to n identical capacitors, we can make circuits having a range of different total capacitances. For example, using up to $n = 3$ capacitors of $60 μF$ each, we can obtain the following 7 distinct total capacitance values:
+
+<img class="img-responsive center-block" alt="example circuits having up to three capacitors, each of 60 μF" src="https://cdn.freecodecamp.org/curriculum/project-euler/counting-capacitor-circuits.gif" style="background-color: white; padding: 10px;" />
+
+If we denote by $D(n)$ the number of distinct total capacitance values we can obtain when using up to $n$ equal-valued capacitors and the simple procedure described above, we have: $D(1) = 1, D(2) = 3, D(3)=7, \ldots$
+
+Find $D(18)$.
+
+Reminder: When connecting capacitors $C_1$, $C_2$ etc in parallel, the total capacitance is $C_T = C_1 + C_2 + \cdots$, whereas when connecting them in series, the overall capacitance is given by: $\frac{1}{C_T} = \frac{1}{C_1} + \frac{1}{C_2} + \cdots$.
+
+# --hints--
+
+`capacitanceValues()` should return `3857447`.
+
+```js
+assert.strictEqual(capacitanceValues(), 3857447);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function capacitanceValues() {
+
+  return true;
+}
+
+capacitanceValues();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-156-counting-digits.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-156-counting-digits.md
new file mode 100644
index 00000000000..fb820e64aa0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-156-counting-digits.md
@@ -0,0 +1,68 @@
+---
+id: 5900f4091000cf542c50ff1b
+title: 'Problem 156: Counting Digits'
+challengeType: 1
+forumTopicId: 301787
+dashedName: problem-156-counting-digits
+---
+
+# --description--
+
+Starting from zero the natural numbers are written down in base 10 like this:
+
+0 1 2 3 4 5 6 7 8 9 10 11 12....
+
+Consider the digit $d = 1$. After we write down each number n, we will update the number of ones that have occurred and call this number $f(n, 1)$. The first values for $f(n, 1)$, then, are as follows:
+
+| $n$ | $f(n, 1)$ |
+| --- | --------- |
+| 0   | 0         |
+| 1   | 1         |
+| 2   | 1         |
+| 3   | 1         |
+| 4   | 1         |
+| 5   | 1         |
+| 6   | 1         |
+| 7   | 1         |
+| 8   | 1         |
+| 9   | 1         |
+| 10  | 2         |
+| 11  | 4         |
+| 12  | 5         |
+
+Note that $f(n, 1)$ never equals 3.
+
+So the first two solutions of the equation $f(n, 1) = n$ are $n = 0$ and $n = 1$. The next solution is $n = 199981$. In the same manner the function $f(n, d)$ gives the total number of digits d that have been written down after the number $n$ has been written.
+
+In fact, for every digit $d ≠ 0$, 0 is the first solution of the equation $f(n, d) = n$. Let $s(d)$ be the sum of all the solutions for which $f(n, d) = n$.
+
+You are given that $s(1) = 22786974071$. Find $\sum{s(d)}$ for $1 ≤ d ≤ 9$.
+
+Note: if, for some $n$, $f(n, d) = n$ for more than one value of $d$ this value of $n$ is counted again for every value of $d$ for which $f(n, d) = n$.
+
+# --hints--
+
+`countingDigits()` should return `21295121502550`.
+
+```js
+assert.strictEqual(countingDigits(), 21295121502550);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countingDigits() {
+
+  return true;
+}
+
+countingDigits();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-157-solving-the-diophantine-equation.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-157-solving-the-diophantine-equation.md
new file mode 100644
index 00000000000..aa5e8185547
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-157-solving-the-diophantine-equation.md
@@ -0,0 +1,47 @@
+---
+id: 5900f4091000cf542c50ff1c
+title: 'Problem 157: Solving the diophantine equation'
+challengeType: 1
+forumTopicId: 301788
+dashedName: problem-157-solving-the-diophantine-equation
+---
+
+# --description--
+
+Consider the diophantine equation $\frac{1}{a} + \frac{1}{b} = \frac{p}{{10}^n}$ with $a$, $b$, $p$, $n$ positive integers and $a ≤ b$.
+
+For $n = 1$ this equation has 20 solutions that are listed below:
+
+$$\begin{array}{lllll} \frac{1}{1}  + \frac{1}{1}  = \frac{20}{10} & \frac{1}{1} + \frac{1}{2}  = \frac{15}{10} & \frac{1}{1}  + \frac{1}{5}  = \frac{12}{10} & \frac{1}{1} + \frac{1}{10} = \frac{11}{10} & \frac{1}{2}  + \frac{1}{2}  = \frac{10}{10} \\\\
+  \frac{1}{2}  + \frac{1}{5}  = \frac{7}{10}   & \frac{1}{2} + \frac{1}{10} = \frac{6}{10} & \frac{1}{3}  + \frac{1}{6}  = \frac{5}{10}   & \frac{1}{3} + \frac{1}{15} = \frac{4}{10} & \frac{1}{4}  + \frac{1}{4}  = \frac{5}{10} \\\\
+  \frac{1}{4}  + \frac{1}{4}  = \frac{5}{10}  & \frac{1}{5}  + \frac{1}{5}  = \frac{4}{10} & \frac{1}{5}  + \frac{1}{10} = \frac{3}{10}  & \frac{1}{6}  + \frac{1}{30} = \frac{2}{10} & \frac{1}{10} + \frac{1}{10} = \frac{2}{10} \\\\
+  \frac{1}{11} + \frac{1}{110} = \frac{1}{10} & \frac{1}{12} + \frac{1}{60}  = \frac{1}{10} & \frac{1}{14} + \frac{1}{35}  = \frac{1}{10} & \frac{1}{15} + \frac{1}{30}  = \frac{1}{10} & \frac{1}{20} + \frac{1}{20}  = \frac{1}{10} \end{array}$$
+
+How many solutions has this equation for $1 ≤ n ≤ 9$?
+
+# --hints--
+
+`diophantineEquation()` should return `53490`.
+
+```js
+assert.strictEqual(diophantineEquation(), 53490);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function diophantineEquation() {
+
+  return true;
+}
+
+diophantineEquation();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-158-exploring-strings-for-which-only-one-character-comes-lexicographically-after-its-neighbour-to-the-left.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-158-exploring-strings-for-which-only-one-character-comes-lexicographically-after-its-neighbour-to-the-left.md
new file mode 100644
index 00000000000..845e2be3303
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-158-exploring-strings-for-which-only-one-character-comes-lexicographically-after-its-neighbour-to-the-left.md
@@ -0,0 +1,54 @@
+---
+id: 5900f40a1000cf542c50ff1d
+title: >-
+  Problem 158: Exploring strings for which only one character comes lexicographically after its neighbour to the left
+challengeType: 1
+forumTopicId: 301789
+dashedName: >-
+  problem-158-exploring-strings-for-which-only-one-character-comes-lexicographically-after-its-neighbour-to-the-left
+---
+
+# --description--
+
+Taking three different letters from the 26 letters of the alphabet, character strings of length three can be formed.
+
+Examples are 'abc', 'hat' and 'zyx'.
+
+When we study these three examples we see that for 'abc' two characters come lexicographically after its neighbour to the left.
+
+For 'hat' there is exactly one character that comes lexicographically after its neighbour to the left. For 'zyx' there are zero characters that come lexicographically after its neighbour to the left.
+
+In all there are 10400 strings of length 3 for which exactly one character comes lexicographically after its neighbour to the left.
+
+We now consider strings of $n ≤ 26$ different characters from the alphabet.
+
+For every $n$, $p(n)$ is the number of strings of length $n$ for which exactly one character comes lexicographically after its neighbour to the left.
+
+What is the maximum value of $p(n)$?
+
+# --hints--
+
+`lexicographicNeighbours()` should return `409511334375`.
+
+```js
+assert.strictEqual(lexicographicNeighbours(), 409511334375);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function lexicographicNeighbours() {
+
+  return true;
+}
+
+lexicographicNeighbours();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-159-digital-root-sums-of-factorisations.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-159-digital-root-sums-of-factorisations.md
new file mode 100644
index 00000000000..07a2e4945a4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-159-digital-root-sums-of-factorisations.md
@@ -0,0 +1,63 @@
+---
+id: 5900f40c1000cf542c50ff1e
+title: 'Problem 159: Digital root sums of factorisations'
+challengeType: 1
+forumTopicId: 301790
+dashedName: problem-159-digital-root-sums-of-factorisations
+---
+
+# --description--
+
+A composite number can be factored many different ways.
+
+For instance, not including multiplication by one, 24 can be factored in 7 distinct ways:
+
+$$\begin{align}   & 24 = 2 \times 2 \times 2 \times 3\\\\
+  & 24 = 2 \times 3 \times 4  \\\\   & 24 = 2 \times 2 \times 6  \\\\
+  & 24 = 4 \times 6    \\\\   & 24 = 3 \times 8    \\\\
+  & 24 = 2 \times 12   \\\\ & 24 = 24 \end{align}$$
+
+Recall that the digital root of a number, in base 10, is found by adding together the digits of that number, and repeating that process until a number arrives at less than 10. Thus the digital root of 467 is 8.
+
+We shall call a Digital Root Sum (DRS) the sum of the digital roots of the individual factors of our number. The chart below demonstrates all of the DRS values for 24.
+
+| Factorisation | Digital Root Sum |
+| ------------- | ---------------- |
+| 2x2x2x3       | 9                |
+| 2x3x4         | 9                |
+| 2x2x6         | 10               |
+| 4x6           | 10               |
+| 3x8           | 11               |
+| 2x12          | 5                |
+| 24            | 6                |
+
+The maximum Digital Root Sum of 24 is 11. The function $mdrs(n)$ gives the maximum Digital Root Sum of $n$. So $mdrs(24) = 11$.
+
+Find $\sum{mdrs(n)}$ for $1 &lt; n &lt; 1,000,000$.
+
+# --hints--
+
+`euler159()` should return `14489159`.
+
+```js
+assert.strictEqual(euler159(), 14489159);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function euler159() {
+
+  return true;
+}
+
+euler159();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-16-power-digit-sum.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-16-power-digit-sum.md
new file mode 100644
index 00000000000..8ef1c137f88
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-16-power-digit-sum.md
@@ -0,0 +1,85 @@
+---
+id: 5900f37d1000cf542c50fe8f
+title: 'Problem 16: Power digit sum'
+challengeType: 1
+forumTopicId: 301791
+dashedName: problem-16-power-digit-sum
+---
+
+# --description--
+
+2<sup>15</sup> = 32768 and the sum of its digits is 3 + 2 + 7 + 6 + 8 = 26.
+
+What is the sum of the digits of the number 2<sup><code>exponent</code></sup>?
+
+# --hints--
+
+`powerDigitSum(15)` should return a number.
+
+```js
+assert(typeof powerDigitSum(15) === 'number');
+```
+
+`powerDigitSum(15)` should return 26.
+
+```js
+assert.strictEqual(powerDigitSum(15), 26);
+```
+
+`powerDigitSum(128)` should return 166.
+
+```js
+assert.strictEqual(powerDigitSum(128), 166);
+```
+
+`powerDigitSum(1000)` should return 1366.
+
+```js
+assert.strictEqual(powerDigitSum(1000), 1366);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function powerDigitSum(exponent) {
+
+  return true;
+}
+
+powerDigitSum(15);
+```
+
+# --solutions--
+
+```js
+function powerDigitSum(exponent) {
+  const bigNum = [1];
+  let sum = 0;
+
+  for (let i = 1; i <= exponent; i++) {
+    let count = bigNum.length + 1;
+    let overflow = 0;
+    for (let j = 0; j < count; j++) {
+      let digit = bigNum[j] || 0;
+      digit = 2 * digit + overflow;
+
+      if (digit > 9) {
+        digit -= 10;
+        overflow = 1;
+      } else {
+        overflow = 0;
+      }
+
+      bigNum[j] = digit;
+    }
+  }
+
+  bigNum.forEach(function(num) {
+    return sum += num;
+  });
+
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-160-factorial-trailing-digits.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-160-factorial-trailing-digits.md
new file mode 100644
index 00000000000..ceec9db70d3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-160-factorial-trailing-digits.md
@@ -0,0 +1,45 @@
+---
+id: 5900f40d1000cf542c50ff1f
+title: 'Problem 160: Factorial trailing digits'
+challengeType: 1
+forumTopicId: 301794
+dashedName: problem-160-factorial-trailing-digits
+---
+
+# --description--
+
+For any $N$, let $f(N)$ be the last five digits before the trailing zeroes in $N!$.
+
+For example,
+
+$$\begin{align}   & 9! = 362880 \\; \text{so} \\; f(9) = 36288 \\\\
+  & 10! = 3628800 \\; \text{so} \\; f(10) = 36288 \\\\ & 20! = 2432902008176640000 \\; \text{so} \\; f(20) = 17664 \end{align}$$
+
+Find $f(1,000,000,000,000)$
+
+# --hints--
+
+`factorialTrailingDigits()` should return `16576`.
+
+```js
+assert.strictEqual(factorialTrailingDigits(), 16576);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function factorialTrailingDigits() {
+
+  return true;
+}
+
+factorialTrailingDigits();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-161-triominoes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-161-triominoes.md
new file mode 100644
index 00000000000..8e0a070c788
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-161-triominoes.md
@@ -0,0 +1,52 @@
+---
+id: 5900f40d1000cf542c50ff20
+title: 'Problem 161: Triominoes'
+challengeType: 1
+forumTopicId: 301795
+dashedName: problem-161-triominoes
+---
+
+# --description--
+
+A triomino is a shape consisting of three squares joined via the edges.
+
+There are two basic forms:
+
+<img class="img-responsive center-block" alt="two basic triominoes forms" src="https://cdn.freecodecamp.org/curriculum/project-euler/triominoes-1.gif" style="background-color: white; padding: 10px;" />
+
+If all possible orientations are taken into account there are six:
+
+<img class="img-responsive center-block" alt="triominoes forms including orientation" src="https://cdn.freecodecamp.org/curriculum/project-euler/triominoes-2.gif" style="background-color: white; padding: 10px;" />
+
+Any n by m grid for which nxm is divisible by 3 can be tiled with triominoes. If we consider tilings that can be obtained by reflection or rotation from another tiling as different there are 41 ways a 2 by 9 grid can be tiled with triominoes:
+
+<img class="img-responsive center-block" alt="animation showing 41 ways of filling 2x9 grid with triominoes" src="https://cdn.freecodecamp.org/curriculum/project-euler/triominoes-3.gif" style="background-color: white; padding: 10px;" />
+
+In how many ways can a 9 by 12 grid be tiled in this way by triominoes?
+
+# --hints--
+
+`triominoes()` should return `20574308184277972`.
+
+```js
+assert.strictEqual(triominoes(), 20574308184277972);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function triominoes() {
+
+  return true;
+}
+
+triominoes();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-162-hexadecimal-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-162-hexadecimal-numbers.md
new file mode 100644
index 00000000000..9ad940349fe
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-162-hexadecimal-numbers.md
@@ -0,0 +1,58 @@
+---
+id: 5900f40e1000cf542c50ff21
+title: 'Problem 162: Hexadecimal numbers'
+challengeType: 1
+forumTopicId: 301796
+dashedName: problem-162-hexadecimal-numbers
+---
+
+# --description--
+
+In the hexadecimal number system numbers are represented using 16 different digits:
+
+$$0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F$$
+
+The hexadecimal number AF when written in the decimal number system equals $10 \times 16 + 15 = 175$.
+
+In the 3-digit hexadecimal numbers 10A, 1A0, A10, and A01 the digits 0,1 and A are all present.
+
+Like numbers written in base ten we write hexadecimal numbers without leading zeroes.
+
+How many hexadecimal numbers containing at most sixteen hexadecimal digits exist with all of the digits 0,1, and A present at least once?
+
+Give your answer with hexadecimal number as a string.
+
+**Note:** (A,B,C,D,E and F in upper case, without any leading or trailing code that marks the number as hexadecimal and without leading zeroes , e.g. 1A3F and not: 1a3f and not 0x1a3f and not $1A3F and not #1A3F and not 0000001A3F)
+
+# --hints--
+
+`hexadecimalNumbers()` should return a string.
+
+```js
+assert(typeof hexadecimalNumbers() === 'string');
+```
+
+`hexadecimalNumbers()` should return the string `3D58725572C62302`.
+
+```js
+assert.strictEqual(hexadecimalNumbers(), '3D58725572C62302');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function hexadecimalNumbers() {
+
+  return true;
+}
+
+hexadecimalNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-163-cross-hatched-triangles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-163-cross-hatched-triangles.md
new file mode 100644
index 00000000000..e5fa50fb8e9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-163-cross-hatched-triangles.md
@@ -0,0 +1,51 @@
+---
+id: 5900f40f1000cf542c50ff22
+title: 'Problem 163: Cross-hatched triangles'
+challengeType: 1
+forumTopicId: 301797
+dashedName: problem-163-cross-hatched-triangles
+---
+
+# --description--
+
+Consider an equilateral triangle in which straight lines are drawn from each vertex to the middle of the opposite side, such as in the size 1 triangle in the sketch below.
+
+<img class="img-responsive center-block" alt="triangles with size 1 and size 2" src="https://cdn.freecodecamp.org/curriculum/project-euler/cross-hatched-triangles.gif" style="background-color: white; padding: 10px;" />
+
+Sixteen triangles of either different shape or size or orientation or location can now be observed in that triangle. Using size 1 triangles as building blocks, larger triangles can be formed, such as the size 2 triangle in the above sketch. One-hundred and four triangles of either different shape or size or orientation or location can now be observed in that size 2 triangle.
+
+It can be observed that the size 2 triangle contains 4 size 1 triangle building blocks. A size 3 triangle would contain 9 size 1 triangle building blocks and a size $n$ triangle would thus contain $n^2$ size 1 triangle building blocks.
+
+If we denote $T(n)$ as the number of triangles present in a triangle of size $n$, then
+
+$$\begin{align}   & T(1) = 16 \\\\
+  & T(2) = 104 \end{align}$$
+
+Find $T(36)$.
+
+# --hints--
+
+`crossHatchedTriangles()` should return `343047`.
+
+```js
+assert.strictEqual(crossHatchedTriangles(), 343047);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function crossHatchedTriangles() {
+
+  return true;
+}
+
+crossHatchedTriangles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-164-numbers-for-which-no-three-consecutive-digits-have-a-sum-greater-than-a-given-value.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-164-numbers-for-which-no-three-consecutive-digits-have-a-sum-greater-than-a-given-value.md
new file mode 100644
index 00000000000..83215f99ba4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-164-numbers-for-which-no-three-consecutive-digits-have-a-sum-greater-than-a-given-value.md
@@ -0,0 +1,40 @@
+---
+id: 5900f4111000cf542c50ff23
+title: >-
+  Problem 164: Numbers for which no three consecutive digits have a sum greater than a given value
+challengeType: 1
+forumTopicId: 301798
+dashedName: >-
+  problem-164-numbers-for-which-no-three-consecutive-digits-have-a-sum-greater-than-a-given-value
+---
+
+# --description--
+
+How many 20 digit numbers $n$ (without any leading zero) exist such that no three consecutive digits of $n$ have a sum greater than 9?
+
+# --hints--
+
+`consecutiveDigitsSum()` should return `378158756814587`.
+
+```js
+assert.strictEqual(consecutiveDigitsSum(), 378158756814587);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function consecutiveDigitsSum() {
+
+  return true;
+}
+
+consecutiveDigitsSum();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-165-intersections.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-165-intersections.md
new file mode 100644
index 00000000000..04fef3d3e53
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-165-intersections.md
@@ -0,0 +1,64 @@
+---
+id: 5900f4111000cf542c50ff24
+title: 'Problem 165: Intersections'
+challengeType: 1
+forumTopicId: 301799
+dashedName: problem-165-intersections
+---
+
+# --description--
+
+A segment is uniquely defined by its two endpoints. By considering two line segments in plane geometry there are three possibilities: the segments have zero points, one point, or infinitely many points in common.
+
+Moreover when two segments have exactly one point in common it might be the case that that common point is an endpoint of either one of the segments or of both. If a common point of two segments is not an endpoint of either of the segments it is an interior point of both segments.
+
+We will call a common point $T$ of two segments $L_1$ and $L_2$ a true intersection point of $L_1$ and $L_2$ if $T$ is the only common point of $L_1$ and $L_2$ and $T$ is an interior point of both segments.
+
+Consider the three segments $L_1$, $L_2$, and $L_3$:
+
+$$\begin{align}   & L_1: (27, 44) \\;\text{to}\\; (12, 32) \\\\
+  & L_2: (46, 53) \\;\text{to}\\; (17, 62) \\\\   & L_3: (46, 70) \\;\text{to}\\; (22, 40) \\\\
+\end{align}$$
+
+It can be verified that line segments $L_2$ and $L_3$ have a true intersection point. We note that as the one of the end points of $L_3$: (22, 40) lies on $L_1$ this is not considered to be a true point of intersection. $L_1$ and $L_2$ have no common point. So among the three line segments, we find one true intersection point.
+
+Now let us do the same for 5000 line segments. To this end, we generate 20000 numbers using the so-called "Blum Blum Shub" pseudo-random number generator.
+
+$$\begin{align}   & s_0 = 290797 \\\\
+  & s_{n + 1} = s_n × s_n (\text{modulo}\\; 50515093) \\\\   & t_n = s_n (\text{modulo}\\; 500) \\\\
+\end{align}$$
+
+To create each line segment, we use four consecutive numbers $t_n$. That is, the first line segment is given by:
+
+($_t$1, $t_2$) to ($t_3$, $t_4$)
+
+The first four numbers computed according to the above generator should be: 27, 144, 12 and 232. The first segment would thus be (27, 144) to (12, 232).
+
+How many distinct true intersection points are found among the 5000 line segments?
+
+# --hints--
+
+`distinctIntersections()` should return `2868868`.
+
+```js
+assert.strictEqual(distinctIntersections(), 2868868);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function distinctIntersections() {
+
+  return true;
+}
+
+distinctIntersections();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-166-criss-cross.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-166-criss-cross.md
new file mode 100644
index 00000000000..f413a225835
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-166-criss-cross.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4131000cf542c50ff25
+title: 'Problem 166: Criss Cross'
+challengeType: 1
+forumTopicId: 301800
+dashedName: problem-166-criss-cross
+---
+
+# --description--
+
+A 4x4 grid is filled with digits $d$, $0 ≤ d ≤ 9$.
+
+It can be seen that in the grid
+
+$$\begin{array}{}   6 & 3 & 3 & 0 \\\\
+  5 & 0 & 4 & 3 \\\\   0 & 7 & 1 & 4 \\\\
+  1 & 2 & 4 & 5 \end{array}$$
+
+the sum of each row and each column has the value 12. Moreover the sum of each diagonal is also 12.
+
+In how many ways can you fill a 4x4 grid with the digits $d$, $0 ≤ d ≤ 9$ so that each row, each column, and both diagonals have the same sum?
+
+# --hints--
+
+`crissCross()` should return `7130034`.
+
+```js
+assert.strictEqual(crissCross(), 7130034);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function crissCross() {
+
+  return true;
+}
+
+crissCross();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-167-investigating-ulam-sequences.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-167-investigating-ulam-sequences.md
new file mode 100644
index 00000000000..37f3fd53c28
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-167-investigating-ulam-sequences.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4141000cf542c50ff26
+title: 'Problem 167: Investigating Ulam sequences'
+challengeType: 1
+forumTopicId: 301801
+dashedName: problem-167-investigating-ulam-sequences
+---
+
+# --description--
+
+For two positive integers $a$ and $b$, the Ulam sequence $U(a,b)$ is defined by ${U{(a,b)}\_1} = a$, ${U{(a,b)}\_2} = b$ and for $k > 2$, ${U{(a,b)}\_k}$ is the smallest integer greater than ${U{(a,b)}\_{(k-1)}}$ which can be written in exactly one way as the sum of two distinct previous members of $U(a,b)$.
+
+For example, the sequence $U(1,2)$ begins with
+
+$$1, 2, 3 = 1 + 2, 4 = 1 + 3, 6 = 2 + 4, 8 = 2 + 6, 11 = 3 + 8$$
+
+5 does not belong to it because $5 = 1 + 4 = 2 + 3$ has two representations as the sum of two previous members, likewise $7 = 1 + 6 = 3 + 4$.
+
+Find $\sum {U(2, 2n + 1)_k}$ for $2 ≤ n ≤ 10$, where $k = {10}^{11}$.
+
+# --hints--
+
+`ulamSequences()` should return `3916160068885`.
+
+```js
+assert.strictEqual(ulamSequences(), 3916160068885);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function ulamSequences() {
+
+  return true;
+}
+
+ulamSequences();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-168-number-rotations.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-168-number-rotations.md
new file mode 100644
index 00000000000..50802415375
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-168-number-rotations.md
@@ -0,0 +1,82 @@
+---
+id: 5900f4151000cf542c50ff27
+title: 'Problem 168: Number Rotations'
+challengeType: 1
+forumTopicId: 301802
+dashedName: problem-168-number-rotations
+---
+
+# --description--
+
+Consider the number 142857. We can right-rotate this number by moving the last digit (7) to the front of it, giving us 714285.
+
+It can be verified that $714285 = 5 × 142857$.
+
+This demonstrates an unusual property of 142857: it is a divisor of its right-rotation.
+
+For integer number of digits $a$ and $b$, find the last 5 digits of the sum of all integers $n$, $10^a &lt; n &lt; 10^b$, that have this property.
+
+# --hints--
+
+`numberRotations(2, 10)` should return `98311`.
+
+```js
+assert.strictEqual(numberRotations(2, 10), 98311);
+```
+
+`numberRotations(2, 100)` should return `59206`.
+
+```js
+assert.strictEqual(numberRotations(2, 100), 59206);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function numberRotations(a, b) {
+
+  return 0;
+}
+
+numberRotations();
+```
+
+# --solutions--
+
+```js
+function numberRotations(minDigits, maxDigits) {
+  const DIGITS_TO_KEEP = 100000n;
+  const powersOfTen = Array(maxDigits).fill(0);
+  powersOfTen[0] = 1n;
+  for (let i = 1; i < maxDigits; i++) {
+    powersOfTen[i] = powersOfTen[i - 1] * 10n;
+  }
+
+  // We want numbers of the form xd * m = dx
+  // Or more precisely:
+  //   (x * 10 + d) * m = d*10^(n-1) + x
+  // Solving for x:
+  //   x = d (10^(n-1) - m) / (10 * m - 1)
+  let total = 0n;
+  for (let numDigits = minDigits; numDigits <= maxDigits; numDigits++) {
+    // Check all multiplier - digit pairs to see if a candidate can be built
+    //  with the correct number of digits
+    for (let multiplier = 1n; multiplier < 10n; multiplier++) {
+      for (let lastDigit = 1n; lastDigit < 10n; lastDigit++) {
+        const numerator   = lastDigit * (powersOfTen[numDigits - 1] - multiplier);
+        const denominator = (powersOfTen[1] * multiplier - 1n);
+        if (numerator % denominator === 0n) {
+          const candidate = (numerator / denominator) * 10n + lastDigit;
+          if (candidate.toString().length === numDigits) {
+            total = (total + candidate) % DIGITS_TO_KEEP;
+          }
+        }
+      }
+    }
+  }
+
+  return parseInt(total);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-169-exploring-the-number-of-different-ways-a-number-can-be-expressed-as-a-sum-of-powers-of-2.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-169-exploring-the-number-of-different-ways-a-number-can-be-expressed-as-a-sum-of-powers-of-2.md
new file mode 100644
index 00000000000..52005157a98
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-169-exploring-the-number-of-different-ways-a-number-can-be-expressed-as-a-sum-of-powers-of-2.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4151000cf542c50ff28
+title: >-
+  Problem 169: Exploring the number of different ways a number can be expressed as a sum of powers of 2
+challengeType: 1
+forumTopicId: 301803
+dashedName: >-
+  problem-169-exploring-the-number-of-different-ways-a-number-can-be-expressed-as-a-sum-of-powers-of-2
+---
+
+# --description--
+
+Define $f(0)=1$ and $f(n)$ to be the number of different ways $n$ can be expressed as a sum of integer powers of 2 using each power no more than twice.
+
+For example, $f(10)=5$ since there are five different ways to express 10:
+
+$$\begin{align}   & 1 + 1 + 8 \\\\
+  & 1 + 1 + 4 + 4 \\\\   & 1 + 1 + 2 + 2 + 4 \\\\
+  & 2 + 4 + 4 \\\\ & 2 + 8 \end{align}$$
+
+What is $f({10}^{25})$?
+
+# --hints--
+
+`numberOfWaysToExpress()` should return `178653872807`.
+
+```js
+assert.strictEqual(numberOfWaysToExpress(), 178653872807);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function numberOfWaysToExpress() {
+
+  return true;
+}
+
+numberOfWaysToExpress();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-17-number-letter-counts.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-17-number-letter-counts.md
new file mode 100644
index 00000000000..c64e9f073f6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-17-number-letter-counts.md
@@ -0,0 +1,130 @@
+---
+id: 5900f37d1000cf542c50fe90
+title: 'Problem 17: Number letter counts'
+challengeType: 1
+forumTopicId: 301804
+dashedName: problem-17-number-letter-counts
+---
+
+# --description--
+
+If the numbers 1 to 5 are written out in words: one, two, three, four, five, then there are 3 + 3 + 5 + 4 + 4 = 19 letters used in total.
+
+If all the numbers from 1 to given `limit` inclusive were written out in words, how many letters would be used?
+
+**Note:** Do not count spaces or hyphens. For example, 342 (three hundred and forty-two) contains 23 letters and 115 (one hundred and fifteen) contains 20 letters. The use of "and" when writing out numbers is in compliance with British usage.
+
+# --hints--
+
+`numberLetterCounts(5)` should return a number.
+
+```js
+assert(typeof numberLetterCounts(5) === 'number');
+```
+
+`numberLetterCounts(5)` should return 19.
+
+```js
+assert.strictEqual(numberLetterCounts(5), 19);
+```
+
+`numberLetterCounts(150)` should return 1903.
+
+```js
+assert.strictEqual(numberLetterCounts(150), 1903);
+```
+
+`numberLetterCounts(1000)` should return 21124.
+
+```js
+assert.strictEqual(numberLetterCounts(1000), 21124);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function numberLetterCounts(limit) {
+
+  return true;
+}
+
+numberLetterCounts(5);
+```
+
+# --solutions--
+
+```js
+function numberLetterCounts(limit) {
+  const dictionary = {
+    0: '',
+    1: 'one',
+    2: 'two',
+    3: 'three',
+    4: 'four',
+    5: 'five',
+    6: 'six',
+    7: 'seven',
+    8: 'eight',
+    9: 'nine',
+    10: 'ten',
+    11: 'eleven',
+    12: 'twelve',
+    13: 'thirteen',
+    14: 'fourteen',
+    15: 'fifteen',
+    16: 'sixteen',
+    17: 'seventeen',
+    18: 'eighteen',
+    19: 'nineteen',
+    20: 'twenty',
+    30: 'thirty',
+    40: 'forty',
+    50: 'fifty',
+    60: 'sixty',
+    70: 'seventy',
+    80: 'eighty',
+    90: 'ninety',
+    1000: 'onethousand'
+  };
+
+  let numString = '';
+
+  function convertToString(num) {
+    // check dictionary for number
+    if (dictionary[num]) {
+      return dictionary[num];
+    } else {
+      const hundreds = Math.floor(num / 100);
+      const tens =  Math.floor((num / 10) % 10) * 10;
+      const remainder = num % 10;
+
+      let tempStr = '';
+
+      if (hundreds === 0) {
+        tempStr += dictionary[tens] + dictionary[remainder];
+      } else {
+        tempStr += dictionary[hundreds] + 'hundred';
+
+        if (tens !== 0 || remainder !== 0) {
+          tempStr += 'and';
+        }
+
+        if (tens < 20) {
+          const lessThanTwenty = tens + remainder;
+          tempStr += dictionary[lessThanTwenty];
+        } else {
+          tempStr += dictionary[tens] + dictionary[remainder];
+        }
+      }
+      return tempStr;
+    }
+  }
+
+  for (let i = 1; i <= limit; i++) {
+    numString += convertToString(i);
+  }
+  return numString.length;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-170-find-the-largest-0-to-9-pandigital-that-can-be-formed-by-concatenating-products.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-170-find-the-largest-0-to-9-pandigital-that-can-be-formed-by-concatenating-products.md
new file mode 100644
index 00000000000..b6886e18764
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-170-find-the-largest-0-to-9-pandigital-that-can-be-formed-by-concatenating-products.md
@@ -0,0 +1,49 @@
+---
+id: 5900f4161000cf542c50ff29
+title: >-
+  Problem 170: Find the largest 0 to 9 pandigital that can be formed by concatenating products
+challengeType: 1
+forumTopicId: 301805
+dashedName: >-
+  problem-170-find-the-largest-0-to-9-pandigital-that-can-be-formed-by-concatenating-products
+---
+
+# --description--
+
+Take the number 6 and multiply it by each of 1273 and 9854:
+
+$$\begin{align}   & 6 × 1273 = 7638 \\\\
+  & 6 × 9854 = 59124 \\\\ \end{align}$$
+
+By concatenating these products we get the 1 to 9 pandigital 763859124. We will call 763859124 the "concatenated product of 6 and (1273, 9854)". Notice too, that the concatenation of the input numbers, 612739854, is also 1 to 9 pandigital.
+
+The same can be done for 0 to 9 pandigital numbers.
+
+What is the largest 0 to 9 pandigital 10-digit concatenated product of an integer with two or more other integers, such that the concatenation of the input numbers is also a 0 to 9 pandigital 10-digit number?
+
+# --hints--
+
+`largestPandigital()` should return `9857164023`.
+
+```js
+assert.strictEqual(largestPandigital(), 9857164023);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function largestPandigital() {
+
+  return true;
+}
+
+largestPandigital();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-171-finding-numbers-for-which-the-sum-of-the-squares-of-the-digits-is-a-square.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-171-finding-numbers-for-which-the-sum-of-the-squares-of-the-digits-is-a-square.md
new file mode 100644
index 00000000000..60133bf2e51
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-171-finding-numbers-for-which-the-sum-of-the-squares-of-the-digits-is-a-square.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4181000cf542c50ff2a
+title: >-
+  Problem 171: Finding numbers for which the sum of the squares of the digits is a square
+challengeType: 1
+forumTopicId: 301806
+dashedName: >-
+  problem-171-finding-numbers-for-which-the-sum-of-the-squares-of-the-digits-is-a-square
+---
+
+# --description--
+
+For a positive integer $n$, let $f(n)$ be the sum of the squares of the digits (in base 10) of $n$, e.g.
+
+$$\begin{align}   & f(3) = 3^2 = 9 \\\\
+  & f(25) = 2^2 + 5^2 = 4 + 25 = 29 \\\\   & f(442) = 4^2 + 4^2 + 2^2 = 16 + 16 + 4 = 36 \\\\
+\end{align}$$
+
+Find the last nine digits of the sum of all $n$, $0 &lt; n &lt; {10}^{20}$, such that $f(n)$ is a perfect square.
+
+# --hints--
+
+`lastDigitsSumOfPerfectSquare()` should return `142989277`.
+
+```js
+assert.strictEqual(lastDigitsSumOfPerfectSquare(), 142989277);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function lastDigitsSumOfPerfectSquare() {
+
+  return true;
+}
+
+lastDigitsSumOfPerfectSquare();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-172-investigating-numbers-with-few-repeated-digits.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-172-investigating-numbers-with-few-repeated-digits.md
new file mode 100644
index 00000000000..cfc75b9ff19
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-172-investigating-numbers-with-few-repeated-digits.md
@@ -0,0 +1,38 @@
+---
+id: 5900f4181000cf542c50ff2b
+title: 'Problem 172: Investigating numbers with few repeated digits'
+challengeType: 1
+forumTopicId: 301807
+dashedName: problem-172-investigating-numbers-with-few-repeated-digits
+---
+
+# --description--
+
+How many 18-digit numbers $n$ (without leading zeros) are there such that no digit occurs more than three times in $n$?
+
+# --hints--
+
+`numbersWithRepeatedDigits()` should return `227485267000992000`.
+
+```js
+assert.strictEqual(numbersWithRepeatedDigits(), 227485267000992000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function numbersWithRepeatedDigits() {
+
+  return true;
+}
+
+numbersWithRepeatedDigits();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-173-using-up-to-one-million-tiles-how-many-different-hollow-square-laminae-can-be-formed.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-173-using-up-to-one-million-tiles-how-many-different-hollow-square-laminae-can-be-formed.md
new file mode 100644
index 00000000000..0488d662943
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-173-using-up-to-one-million-tiles-how-many-different-hollow-square-laminae-can-be-formed.md
@@ -0,0 +1,44 @@
+---
+id: 5900f41a1000cf542c50ff2c
+title: >-
+  Problem 173: Using up to one million tiles how many different "hollow" square laminae can be formed?
+challengeType: 1
+forumTopicId: 301808
+dashedName: >-
+  problem-173-using-up-to-one-million-tiles-how-many-different-hollow-square-laminae-can-be-formed
+---
+
+# --description--
+
+We shall define a square lamina to be a square outline with a square "hole" so that the shape possesses vertical and horizontal symmetry. For example, using exactly thirty-two square tiles we can form two different square laminae:
+
+<img class="img-responsive center-block" alt="two square lamina with holes 2x2 and 7x7" src="https://cdn.freecodecamp.org/curriculum/project-euler/using-up-to-one-million-tiles-how-many-different-hollow-square-laminae-can-be-formed.gif" style="background-color: white; padding: 10px;" />
+
+With one-hundred tiles, and not necessarily using all of the tiles at one time, it is possible to form forty-one different square laminae. Using up to one million tiles how many different square laminae can be formed?
+
+# --hints--
+
+`differentHollowSquareLaminae()` should return `1572729`.
+
+```js
+assert.strictEqual(differentHollowSquareLaminae(), 1572729);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function differentHollowSquareLaminae() {
+
+  return true;
+}
+
+differentHollowSquareLaminae();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-174-counting-the-number-of-hollow-square-laminae-that-can-form-one-two-three-...-distinct-arrangements.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-174-counting-the-number-of-hollow-square-laminae-that-can-form-one-two-three-...-distinct-arrangements.md
new file mode 100644
index 00000000000..48843b6b0a9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-174-counting-the-number-of-hollow-square-laminae-that-can-form-one-two-three-...-distinct-arrangements.md
@@ -0,0 +1,50 @@
+---
+id: 5900f41a1000cf542c50ff2d
+title: >-
+  Problem 174: Counting the number of "hollow" square laminae that can form one, two, three, ... distinct arrangements
+challengeType: 1
+forumTopicId: 301809
+dashedName: >-
+  problem-174-counting-the-number-of-hollow-square-laminae-that-can-form-one-two-three-----distinct-arrangements
+---
+
+# --description--
+
+We shall define a square lamina to be a square outline with a square "hole" so that the shape possesses vertical and horizontal symmetry.
+
+Given eight tiles it is possible to form a lamina in only one way: 3x3 square with a 1x1 hole in the middle. However, using thirty-two tiles it is possible to form two distinct laminae.
+
+<img class="img-responsive center-block" alt="two square lamina with holes 2x2 and 7x7" src="https://cdn.freecodecamp.org/curriculum/project-euler/using-up-to-one-million-tiles-how-many-different-hollow-square-laminae-can-be-formed.gif" style="background-color: white; padding: 10px;" />
+
+If $t$ represents the number of tiles used, we shall say that $t = 8$ is type $L(1)$ and $t = 32$ is type $L(2)$.
+
+Let $N(n)$ be the number of $t ≤ 1000000$ such that $t$ is type $L(n)$; for example, $N(15) = 832$.
+
+What is $\sum N(n)$ for $1 ≤ n ≤ 10$?
+
+# --hints--
+
+`hollowSquareLaminaeDistinctArrangements()` should return `209566`.
+
+```js
+assert.strictEqual(hollowSquareLaminaeDistinctArrangements(), 209566);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function hollowSquareLaminaeDistinctArrangements() {
+
+  return true;
+}
+
+hollowSquareLaminaeDistinctArrangements();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-175-fractions-involving-the-number-of-different-ways-a-number-can-be-expressed-as-a-sum-of-powers-of-2.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-175-fractions-involving-the-number-of-different-ways-a-number-can-be-expressed-as-a-sum-of-powers-of-2.md
new file mode 100644
index 00000000000..b3419c34823
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-175-fractions-involving-the-number-of-different-ways-a-number-can-be-expressed-as-a-sum-of-powers-of-2.md
@@ -0,0 +1,62 @@
+---
+id: 5900f41c1000cf542c50ff2e
+title: >-
+  Problem 175: Fractions involving the number of different ways a number can be expressed as a sum of powers of 2
+challengeType: 1
+forumTopicId: 301810
+dashedName: >-
+  problem-175-fractions-involving-the-number-of-different-ways-a-number-can-be-expressed-as-a-sum-of-powers-of-2
+---
+
+# --description--
+
+Define $f(0) = 1$ and $f(n)$ to be the number of ways to write $n$ as a sum of powers of 2 where no power occurs more than twice.
+
+For example, $f(10) = 5$ since there are five different ways to express 10:
+
+$$10 = 8 + 2 = 8 + 1 + 1 = 4 + 4 + 2 = 4 + 2 + 2 + 1 + 1 = 4 + 4 + 1 + 1$$
+
+It can be shown that for every fraction $\frac{p}{q}\\; (p>0, q>0)$ there exists at least one integer $n$ such that $\frac{f(n)}{f(n - 1)} = \frac{p}{q}$.
+
+For instance, the smallest $n$ for which $\frac{f(n)}{f(n - 1)} = \frac{13}{17}$ is 241. The binary expansion of 241 is 11110001.
+
+Reading this binary number from the most significant bit to the least significant bit there are 4 one's, 3 zeroes and 1 one. We shall call the string 4,3,1 the Shortened Binary Expansion of 241.
+
+Find the Shortened Binary Expansion of the smallest $n$ for which
+
+$$\frac{f(n)}{f(n - 1)} = \frac{123456789}{987654321}$$
+
+Give your answer as a string with comma separated integers, without any whitespaces.
+
+# --hints--
+
+`shortenedBinaryExpansionOfNumber()` should return a string.
+
+```js
+assert(typeof shortenedBinaryExpansionOfNumber() === 'string');
+```
+
+`shortenedBinaryExpansionOfNumber()` should return the string `1,13717420,8`.
+
+```js
+assert.strictEqual(shortenedBinaryExpansionOfNumber(), '1,13717420,8');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function shortenedBinaryExpansionOfNumber() {
+
+  return true;
+}
+
+shortenedBinaryExpansionOfNumber();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-176-right-angled-triangles-that-share-a-cathetus.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-176-right-angled-triangles-that-share-a-cathetus.md
new file mode 100644
index 00000000000..01056496296
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-176-right-angled-triangles-that-share-a-cathetus.md
@@ -0,0 +1,40 @@
+---
+id: 5900f41c1000cf542c50ff2f
+title: 'Problem 176: Right-angled triangles that share a cathetus'
+challengeType: 1
+forumTopicId: 301811
+dashedName: problem-176-right-angled-triangles-that-share-a-cathetus
+---
+
+# --description--
+
+The four right-angled triangles with sides (9,12,15), (12,16,20), (5,12,13) and (12,35,37) all have one of the shorter sides (catheti) equal to 12. It can be shown that no other integer sided right-angled triangle exists with one of the catheti equal to 12.
+
+Find the smallest integer that can be the length of a cathetus of exactly 47547 different integer sided right-angled triangles.
+
+# --hints--
+
+`trianglesSharingCathetus()` should return `96818198400000`.
+
+```js
+assert.strictEqual(trianglesSharingCathetus(), 96818198400000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function trianglesSharingCathetus() {
+
+  return true;
+}
+
+trianglesSharingCathetus();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-177-integer-angled-quadrilaterals.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-177-integer-angled-quadrilaterals.md
new file mode 100644
index 00000000000..c6f7b8ee5c4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-177-integer-angled-quadrilaterals.md
@@ -0,0 +1,48 @@
+---
+id: 5900f41e1000cf542c50ff30
+title: 'Problem 177: Integer angled Quadrilaterals'
+challengeType: 1
+forumTopicId: 301812
+dashedName: problem-177-integer-angled-quadrilaterals
+---
+
+# --description--
+
+Let ABCD be a convex quadrilateral, with diagonals AC and BD. At each vertex the diagonal makes an angle with each of the two sides, creating eight corner angles.
+
+<img class="img-responsive center-block" alt="convex quadrilateral ABCD, with diagonals AC and BD" src="https://cdn.freecodecamp.org/curriculum/project-euler/integer-angled-quadrilaterals.gif" style="background-color: white; padding: 10px;" />
+
+For example, at vertex A, the two angles are CAD, CAB.
+
+We call such a quadrilateral for which all eight corner angles have integer values when measured in degrees an "integer angled quadrilateral". An example of an integer angled quadrilateral is a square, where all eight corner angles are 45°. Another example is given by DAC = 20°, BAC = 60°, ABD = 50°, CBD = 30°, BCA = 40°, DCA = 30°, CDB = 80°, ADB = 50°.
+
+What is the total number of non-similar integer angled quadrilaterals?
+
+**Note:** In your calculations you may assume that a calculated angle is integral if it is within a tolerance of ${10}^{-9}$ of an integer value.
+
+# --hints--
+
+`integerAngledQuadrilaterals()` should return `129325`.
+
+```js
+assert.strictEqual(integerAngledQuadrilaterals(), 129325);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function integerAngledQuadrilaterals() {
+
+  return true;
+}
+
+integerAngledQuadrilaterals();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-178-step-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-178-step-numbers.md
new file mode 100644
index 00000000000..22f44139de6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-178-step-numbers.md
@@ -0,0 +1,46 @@
+---
+id: 5900f41e1000cf542c50ff31
+title: 'Problem 178: Step Numbers'
+challengeType: 1
+forumTopicId: 301813
+dashedName: problem-178-step-numbers
+---
+
+# --description--
+
+Consider the number 45656.
+
+It can be seen that each pair of consecutive digits of 45656 has a difference of one.
+
+A number for which every pair of consecutive digits has a difference of one is called a step number.
+
+A pandigital number contains every decimal digit from 0 to 9 at least once.
+
+How many pandigital step numbers less than ${10}^{40}$ are there?
+
+# --hints--
+
+`stepNumbers()` should return `126461847755`.
+
+```js
+assert.strictEqual(stepNumbers(), 126461847755);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function stepNumbers() {
+
+  return true;
+}
+
+stepNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-179-consecutive-positive-divisors.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-179-consecutive-positive-divisors.md
new file mode 100644
index 00000000000..a159a7af8f6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-179-consecutive-positive-divisors.md
@@ -0,0 +1,38 @@
+---
+id: 5900f41f1000cf542c50ff32
+title: 'Problem 179: Consecutive positive divisors'
+challengeType: 1
+forumTopicId: 301814
+dashedName: problem-179-consecutive-positive-divisors
+---
+
+# --description--
+
+Find the number of integers $1 &lt; n &lt; {10}^7$, for which $n$ and $n + 1$ have the same number of positive divisors. For example, 14 has the positive divisors 1, 2, 7, 14 while 15 has 1, 3, 5, 15.
+
+# --hints--
+
+`consecutivePositiveDivisors()` should return `986262`.
+
+```js
+assert.strictEqual(consecutivePositiveDivisors(), 986262);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function consecutivePositiveDivisors() {
+
+  return true;
+}
+
+consecutivePositiveDivisors();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-18-maximum-path-sum-i.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-18-maximum-path-sum-i.md
new file mode 100644
index 00000000000..f0d97a950b2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-18-maximum-path-sum-i.md
@@ -0,0 +1,109 @@
+---
+id: 5900f37e1000cf542c50fe91
+title: 'Problem 18: Maximum path sum I'
+challengeType: 1
+forumTopicId: 301815
+dashedName: problem-18-maximum-path-sum-i
+---
+
+# --description--
+
+By starting at the top of the triangle below and moving to adjacent numbers on the row below, the maximum total from top to bottom is 23.
+
+<span style='display: block; text-align: center;'>
+  <strong style='color: red;'>3</strong><br>
+  <strong style='color: red;'>7</strong> 4<br>
+  2 <strong style='color: red;'>4</strong> 6<br>
+  8 5 <strong style='color: red;'>9</strong> 3
+</span>
+
+That is, 3 + 7 + 4 + 9 = 23.
+
+Find the maximum total from top to bottom of the triangle below:
+
+75  
+95 64  
+17 47 82  
+18 35 87 10  
+20 04 82 47 65  
+19 01 23 75 03 34  
+88 02 77 73 07 63 67  
+99 65 04 28 06 16 70 92  
+41 41 26 56 83 40 80 70 33  
+41 48 72 33 47 32 37 16 94 29  
+53 71 44 65 25 43 91 52 97 51 14  
+70 11 33 28 77 73 17 78 39 68 17 57  
+91 71 52 38 17 14 91 43 58 50 27 29 48  
+63 66 04 68 89 53 67 30 73 16 69 87 40 31  
+04 62 98 27 23 09 70 98 73 93 38 53 60 04 23
+
+**NOTE:** As there are only 16384 routes, it is possible to solve this problem by trying every route. However, Problem 67, is the same challenge with a triangle containing one-hundred rows; it cannot be solved by brute force, and requires a clever method! ;o)
+
+# --hints--
+
+`maximumPathSumI(testTriangle)` should return a number.
+
+```js
+assert(typeof maximumPathSumI(testTriangle) === 'number');
+```
+
+`maximumPathSumI(testTriangle)` should return 23.
+
+```js
+assert.strictEqual(maximumPathSumI(testTriangle), 23);
+```
+
+`maximumPathSumI(numTriangle)` should return 1074.
+
+```js
+assert.strictEqual(maximumPathSumI(numTriangle), 1074);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+const numTriangle = [[75, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [95, 64, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [17, 47, 82, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [18, 35, 87, 10, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [20, 4, 82, 47, 65, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0], [19, 1, 23, 75, 3, 34, 0, 0, 0, 0, 0, 0, 0, 0, 0], [88, 2, 77, 73, 7, 63, 67, 0, 0, 0, 0, 0, 0, 0, 0], [99, 65, 4, 28, 6, 16, 70, 92, 0, 0, 0, 0, 0, 0, 0], [41, 41, 26, 56, 83, 40, 80, 70, 33, 0, 0, 0, 0, 0, 0], [41, 48, 72, 33, 47, 32, 37, 16, 94, 29, 0, 0, 0, 0, 0], [53, 71, 44, 65, 25, 43, 91, 52, 97, 51, 14, 0, 0, 0, 0], [70, 11, 33, 28, 77, 73, 17, 78, 39, 68, 17, 57, 0, 0, 0], [91, 71, 52, 38, 17, 14, 91, 43, 58, 50, 27, 29, 48, 0, 0], [63, 66, 4, 68, 89, 53, 67, 30, 73, 16, 69, 87, 40, 31, 0], [4, 62, 98, 27, 23, 9, 70, 98, 73, 93, 38, 53, 60, 4, 23]];
+```
+
+## --seed-contents--
+
+```js
+function maximumPathSumI(triangle) {
+
+  return true;
+}
+
+const testTriangle = [[3, 0, 0, 0],
+                      [7, 4, 0, 0],
+                      [2, 4, 6, 0],
+                      [8, 5, 9, 3]];
+
+maximumPathSumI(testTriangle);
+```
+
+# --solutions--
+
+```js
+const testTriangle = [[3, 0, 0, 0],
+  [7, 4, 0, 0],
+  [2, 4, 6, 0],
+  [8, 5, 9, 3]];
+
+function maximumPathSumI(triangle) {
+  let maxSum = triangle.slice();
+
+  for (let i = triangle.length - 1; i > 0; i--) {
+    let currentRow = maxSum[i];
+    let previousRow = maxSum[i - 1];
+    const temp = [];
+    for (let j = 0; j < i; j++) {
+      temp.push(Math.max((currentRow[j] + previousRow[j]), (currentRow[j + 1] + previousRow[j])));
+    }
+    maxSum[i - 1] = temp;
+    maxSum.pop();
+  }
+  return maxSum[0][0];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-180-rational-zeros-of-a-function-of-three-variables.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-180-rational-zeros-of-a-function-of-three-variables.md
new file mode 100644
index 00000000000..9eed96d38b2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-180-rational-zeros-of-a-function-of-three-variables.md
@@ -0,0 +1,53 @@
+---
+id: 5900f4201000cf542c50ff33
+title: 'Problem 180: Rational zeros of a function of three variables'
+challengeType: 1
+forumTopicId: 301816
+dashedName: problem-180-rational-zeros-of-a-function-of-three-variables
+---
+
+# --description--
+
+For any integer $n$, consider the three functions
+
+$$\begin{align}   & f_{1,n}(x,y,z) = x^{n + 1} + y^{n + 1} − z^{n + 1}\\\\
+  & f_{2,n}(x,y,z) = (xy + yz + zx) \times (x^{n - 1} + y^{n - 1} − z^{n - 1})\\\\ & f_{3,n}(x,y,z) = xyz \times (x^{n - 2} + y^{n - 2} − z^{n - 2}) \end{align}$$
+
+and their combination
+
+$$\begin{align} & f_n(x,y,z) = f_{1,n}(x,y,z) + f_{2,n}(x,y,z) − f_{3,n}(x,y,z) \end{align}$$
+
+We call $(x,y,z)$ a golden triple of order $k$ if $x$, $y$, and $z$ are all rational numbers of the form $\frac{a}{b}$ with $0 &lt; a &lt; b ≤ k$ and there is (at least) one integer $n$, so that $f_n(x,y,z) = 0$.
+
+Let $s(x,y,z) = x + y + z$.
+
+Let $t = \frac{u}{v}$ be the sum of all distinct $s(x,y,z)$ for all golden triples $(x,y,z)$ of order 35. All the $s(x,y,z)$ and $t$ must be in reduced form.
+
+Find $u + v$.
+
+# --hints--
+
+`rationalZeros()` should return `285196020571078980`.
+
+```js
+assert.strictEqual(rationalZeros(), 285196020571078980);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function rationalZeros() {
+
+  return true;
+}
+
+rationalZeros();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-181-investigating-in-how-many-ways-objects-of-two-different-colours-can-be-grouped.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-181-investigating-in-how-many-ways-objects-of-two-different-colours-can-be-grouped.md
new file mode 100644
index 00000000000..f98d3a71b9e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-181-investigating-in-how-many-ways-objects-of-two-different-colours-can-be-grouped.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4231000cf542c50ff34
+title: >-
+  Problem 181: Investigating in how many ways objects of two different colours can be grouped
+challengeType: 1
+forumTopicId: 301817
+dashedName: >-
+  problem-181-investigating-in-how-many-ways-objects-of-two-different-colours-can-be-grouped
+---
+
+# --description--
+
+Having three black objects $B$ and one white object $W$ they can be grouped in 7 ways like this:
+
+$$(BBBW)\\;(B,BBW)\\;(B,B,BW)\\;(B,B,B,W)\\;(B,BB,W)\\;(BBB,W)\\;(BB,BW)$$
+
+In how many ways can sixty black objects $B$ and forty white objects $W$ be thus grouped?
+
+# --hints--
+
+`colorsGrouping()` should return `83735848679360670`.
+
+```js
+assert.strictEqual(colorsGrouping(), 83735848679360670);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function colorsGrouping() {
+
+  return true;
+}
+
+colorsGrouping();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-182-rsa-encryption.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-182-rsa-encryption.md
new file mode 100644
index 00000000000..e971434b3e7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-182-rsa-encryption.md
@@ -0,0 +1,102 @@
+---
+id: 5900f4231000cf542c50ff35
+title: 'Problem 182: RSA encryption'
+challengeType: 1
+forumTopicId: 301818
+dashedName: problem-182-rsa-encryption
+---
+
+# --description--
+
+The RSA encryption is based on the following procedure:
+
+Generate two distinct primes `p` and `q`. Compute `n=p*q` and `φ=(p-1)(q-1)`. Find an integer `e`, `1 < e < φ`, such that `gcd(e,φ) = 1`
+
+A message in this system is a number in the interval `[0,n-1]`. A text to be encrypted is then somehow converted to messages (numbers in the interval `[0,n-1]`). To encrypt the text, for each message, `m`, c=m<sup>e</sup> mod n is calculated.
+
+To decrypt the text, the following procedure is needed: calculate `d` such that `ed=1 mod φ`, then for each encrypted message, `c`, calculate m=c<sup>d</sup> mod n.
+
+There exist values of `e` and `m` such that m<sup>e</sup> mod n = m. We call messages `m` for which m<sup>e</sup> mod n=m unconcealed messages.
+
+An issue when choosing `e` is that there should not be too many unconcealed messages. For instance, let `p=19` and `q=37`. Then `n=19*37=703` and `φ=18*36=648`. If we choose `e=181`, then, although `gcd(181,648)=1` it turns out that all possible messages m `(0≤m≤n-1)` are unconcealed when calculating m<sup>e</sup> mod n. For any valid choice of `e` there exist some unconcealed messages. It's important that the number of unconcealed messages is at a minimum.
+
+For any given `p` and `q`, find the sum of all values of `e`, `1 < e < φ(p,q)` and `gcd(e,φ)=1`, so that the number of unconcealed messages for this value of `e` is at a minimum.
+
+# --hints--
+
+`RSAEncryption` should be a function.
+
+```js
+assert(typeof RSAEncryption === 'function')
+```
+
+`RSAEncryption` should return a number.
+
+```js
+assert.strictEqual(typeof RSAEncryption(19, 37), 'number');
+```
+
+`RSAEncryption(19, 37)` should return `17766`.
+
+```js
+assert.strictEqual(RSAEncryption(19, 37), 17766);
+```
+
+`RSAEncryption(283, 409)` should return `466196580`.
+
+```js
+assert.strictEqual(RSAEncryption(283, 409), 466196580);
+```
+
+`RSAEncryption(1009, 3643)` should return `399788195976`.
+
+```js
+assert.strictEqual(RSAEncryption(19, 37), 17766);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function RSAEncryption(p, q) {
+
+  return true;
+}
+
+RSAEncryption(19, 37);
+```
+
+# --solutions--
+
+```js
+function gcd(a, b) {
+    if (b)
+        return gcd(b, a % b);
+    else
+        return a;
+}
+
+function RSAEncryption(p, q) {
+    let phi = (p - 1) * (q - 1);
+
+    let best = Number.MAX_SAFE_INTEGER;
+    let sum = 0;
+
+    for (let e = 0; e < phi; ++e) {
+        if (!(gcd(e, phi) == 1))
+            continue;
+
+        let msg = (gcd(p - 1, e - 1) + 1) * (gcd(q - 1, e - 1) + 1);
+
+        if (best == msg) {
+            sum += e;
+        } else if (best > msg) {
+            best = msg;
+            sum = e;
+        }
+    }
+
+    return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-183-maximum-product-of-parts.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-183-maximum-product-of-parts.md
new file mode 100644
index 00000000000..7586be421e3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-183-maximum-product-of-parts.md
@@ -0,0 +1,54 @@
+---
+id: 5900f4231000cf542c50ff36
+title: 'Problem 183: Maximum product of parts'
+challengeType: 1
+forumTopicId: 301819
+dashedName: problem-183-maximum-product-of-parts
+---
+
+# --description--
+
+Let $N$ be a positive integer and let $N$ be split into $k$ equal parts, $r = \frac{N}{k}$, so that $N = r + r + \cdots + r$.
+
+Let $P$ be the product of these parts, $P = r × r × \cdots × r = r^k$.
+
+For example, if 11 is split into five equal parts, 11 = 2.2 + 2.2 + 2.2 + 2.2 + 2.2, then $P = {2.2}^5 = 51.53632$.
+
+Let $M(N) = P_{max}$ for a given value of $N$.
+
+It turns out that the maximum for $N = 11$ is found by splitting eleven into four equal parts which leads to $P_{max} = {(\frac{11}{4})}^4$; that is, $M(11) = \frac{14641}{256} = 57.19140625$, which is a terminating decimal.
+
+However, for $N = 8$ the maximum is achieved by splitting it into three equal parts, so $M(8) = \frac{512}{27}$, which is a non-terminating decimal.
+
+Let $D(N) = N$ if $M(N)$ is a non-terminating decimal and $D(N) = -N$ if $M(N)$ is a terminating decimal.
+
+For example, $\sum D(N)$ for $5 ≤ N ≤ 100$ is 2438.
+
+Find $\sum D(N)$ for $5 ≤ N ≤ 10000$.
+
+# --hints--
+
+`maximumProductOfParts()` should return `48861552`.
+
+```js
+assert.strictEqual(maximumProductOfParts(), 48861552);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function maximumProductOfParts() {
+
+  return true;
+}
+
+maximumProductOfParts();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-184-triangles-containing-the-origin.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-184-triangles-containing-the-origin.md
new file mode 100644
index 00000000000..8d3eb0bfc9d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-184-triangles-containing-the-origin.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4241000cf542c50ff37
+title: 'Problem 184: Triangles containing the origin'
+challengeType: 1
+forumTopicId: 301820
+dashedName: problem-184-triangles-containing-the-origin
+---
+
+# --description--
+
+Consider the set $I_r$ of points $(x,y)$ with integer coordinates in the interior of the circle with radius $r$, centered at the origin, i.e. $x^2 + y^2 &lt; r^2$.
+
+For a radius of 2, $I_2$ contains the nine points (0,0), (1,0), (1,1), (0,1), (-1,1), (-1,0), (-1,-1), (0,-1) and (1,-1). There are eight triangles having all three vertices in $I_2$ which contain the origin in the interior. Two of them are shown below, the others are obtained from these by rotation.
+
+<img class="img-responsive center-block" alt="circle with radius 2, centered at the origin, with nine marked points and two triangles - (-1,0), (0,1), (1,-1) and (-1,1), (0,-1), (1,1)" src="https://cdn.freecodecamp.org/curriculum/project-euler/triangles-containing-the-origin.gif" style="background-color: white; padding: 10px;" />
+
+For a radius of 3, there are 360 triangles containing the origin in the interior and having all vertices in $I_3$ and for $I_5$ the number is 10600.
+
+How many triangles are there containing the origin in the interior and having all three vertices in $I_{105}$?
+
+# --hints--
+
+`trianglesContainingOrigin()` should return `1725323624056`.
+
+```js
+assert.strictEqual(trianglesContainingOrigin(), 1725323624056);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function trianglesContainingOrigin() {
+
+  return true;
+}
+
+trianglesContainingOrigin();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-185-number-mind.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-185-number-mind.md
new file mode 100644
index 00000000000..820f0832166
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-185-number-mind.md
@@ -0,0 +1,66 @@
+---
+id: 5900f4251000cf542c50ff38
+title: 'Problem 185: Number Mind'
+challengeType: 1
+forumTopicId: 301821
+dashedName: problem-185-number-mind
+---
+
+# --description--
+
+The game Number Mind is a variant of the well known game Master Mind.
+
+Instead of coloured pegs, you have to guess a secret sequence of digits. After each guess you're only told in how many places you've guessed the correct digit. So, if the sequence was 1234 and you guessed 2036, you'd be told that you have one correct digit; however, you would NOT be told that you also have another digit in the wrong place.
+
+For instance, given the following guesses for a 5-digit secret sequence,
+
+$$\begin{align}   & 90342 ;2\\;\text{correct}\\\\
+  & 70794 ;0\\;\text{correct}\\\\   & 39458 ;2\\;\text{correct}\\\\
+  & 34109 ;1\\;\text{correct}\\\\   & 51545 ;2\\;\text{correct}\\\\
+  & 12531 ;1\\;\text{correct} \end{align}$$
+
+The correct sequence 39542 is unique.
+
+Based on the following guesses,
+
+$$\begin{align}   & 5616185650518293 ;2\\;\text{correct}\\\\
+  & 3847439647293047 ;1\\;\text{correct}\\\\   & 5855462940810587 ;3\\;\text{correct}\\\\
+  & 9742855507068353 ;3\\;\text{correct}\\\\   & 4296849643607543 ;3\\;\text{correct}\\\\
+  & 3174248439465858 ;1\\;\text{correct}\\\\   & 4513559094146117 ;2\\;\text{correct}\\\\
+  & 7890971548908067 ;3\\;\text{correct}\\\\   & 8157356344118483 ;1\\;\text{correct}\\\\
+  & 2615250744386899 ;2\\;\text{correct}\\\\   & 8690095851526254 ;3\\;\text{correct}\\\\
+  & 6375711915077050 ;1\\;\text{correct}\\\\   & 6913859173121360 ;1\\;\text{correct}\\\\
+  & 6442889055042768 ;2\\;\text{correct}\\\\   & 2321386104303845 ;0\\;\text{correct}\\\\
+  & 2326509471271448 ;2\\;\text{correct}\\\\   & 5251583379644322 ;2\\;\text{correct}\\\\
+  & 1748270476758276 ;3\\;\text{correct}\\\\   & 4895722652190306 ;1\\;\text{correct}\\\\
+  & 3041631117224635 ;3\\;\text{correct}\\\\   & 1841236454324589 ;3\\;\text{correct}\\\\
+  & 2659862637316867 ;2\\;\text{correct} \end{align}$$
+
+Find the unique 16-digit secret sequence.
+
+# --hints--
+
+`numberMind()` should return `4640261571849533`.
+
+```js
+assert.strictEqual(numberMind(), 4640261571849533);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function numberMind() {
+
+  return true;
+}
+
+numberMind();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-186-connectedness-of-a-network.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-186-connectedness-of-a-network.md
new file mode 100644
index 00000000000..8d1fed78cdf
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-186-connectedness-of-a-network.md
@@ -0,0 +1,57 @@
+---
+id: 5900f4281000cf542c50ff39
+title: 'Problem 186: Connectedness of a network'
+challengeType: 1
+forumTopicId: 301822
+dashedName: problem-186-connectedness-of-a-network
+---
+
+# --description--
+
+Here are the records from a busy telephone system with one million users:
+
+| RecNr | Caller | Called |
+| ----- | ------ | ------ |
+| 1     | 200007 | 100053 |
+| 2     | 600183 | 500439 |
+| 3     | 600863 | 701497 |
+| ...   | ...    | ...    |
+
+The telephone number of the caller and the called number in record $n$ are $Caller(n) = S_{2n - 1}$ and $Called(n) = S_{2n}$ where ${S}_{1,2,3,\ldots}$ come from the "Lagged Fibonacci Generator":
+
+For $1 ≤ k ≤ 55$, $S_k = [100003 - 200003k + 300007{k}^3]\\;(\text{modulo}\\;1000000)$
+
+For $56 ≤ k$, $S_k = [S_{k - 24} + S_{k - 55}]\\;(\text{modulo}\\;1000000)$
+
+If $Caller(n) = Called(n)$ then the user is assumed to have misdialled and the call fails; otherwise the call is successful.
+
+From the start of the records, we say that any pair of users $X$ and $Y$ are friends if $X$ calls $Y$ or vice-versa. Similarly, $X$ is a friend of a friend of $Z$ if $X$ is a friend of $Y$ and $Y$ is a friend of $Z$; and so on for longer chains.
+
+The Prime Minister's phone number is 524287. After how many successful calls, not counting misdials, will 99% of the users (including the PM) be a friend, or a friend of a friend etc., of the Prime Minister?
+
+# --hints--
+
+`connectednessOfANetwork()` should return `2325629`.
+
+```js
+assert.strictEqual(connectednessOfANetwork(), 2325629);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function connectednessOfANetwork() {
+
+  return true;
+}
+
+connectednessOfANetwork();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-187-semiprimes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-187-semiprimes.md
new file mode 100644
index 00000000000..bcd6f324753
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-187-semiprimes.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4291000cf542c50ff3a
+title: 'Problem 187: Semiprimes'
+challengeType: 1
+forumTopicId: 301823
+dashedName: problem-187-semiprimes
+---
+
+# --description--
+
+A composite is a number containing at least two prime factors. For example, $15 = 3 × 5; 9 = 3 × 3; 12 = 2 × 2 × 3$.
+
+There are ten composites below thirty containing precisely two, not necessarily distinct, prime factors: 4, 6, 9, 10, 14, 15, 21, 22, 25, 26.
+
+How many composite integers, $n &lt; {10}^8$, have precisely two, not necessarily distinct, prime factors?
+
+# --hints--
+
+`semiPrimes()` should return `17427258`.
+
+```js
+assert.strictEqual(euler187(), 17427258);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function semiPrimes() {
+
+  return true;
+}
+
+semiPrimes();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-188-the-hyperexponentiation-of-a-number.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-188-the-hyperexponentiation-of-a-number.md
new file mode 100644
index 00000000000..1e0ae1dc9fa
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-188-the-hyperexponentiation-of-a-number.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4291000cf542c50ff3b
+title: 'Problem 188: The hyperexponentiation of a number'
+challengeType: 1
+forumTopicId: 301824
+dashedName: problem-188-the-hyperexponentiation-of-a-number
+---
+
+# --description--
+
+The hyperexponentiation or tetration of a number $a$ by a positive integer $b$, denoted by $a↑↑b$ or ${}^ba$, is recursively defined by:
+
+$a↑↑1 = a$,
+
+$a↑↑(k+1) = a^{(a↑↑k)}$.
+
+Thus we have e.g. $3↑↑2 = 3^3 = 27$, hence $3↑↑3 = 3^{27} = 7625597484987$ and $3↑↑4$ is roughly ${10}^{3.6383346400240996 \times {10}^{12}}$. Find the last 8 digits of $1777↑↑1855$.
+
+# --hints--
+
+`hyperexponentation()` should return `95962097`.
+
+```js
+assert.strictEqual(hyperexponentation(), 95962097);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function hyperexponentation() {
+
+  return true;
+}
+
+hyperexponentation();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-189-tri-colouring-a-triangular-grid.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-189-tri-colouring-a-triangular-grid.md
new file mode 100644
index 00000000000..6ac8cedcec5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-189-tri-colouring-a-triangular-grid.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4291000cf542c50ff3c
+title: 'Problem 189: Tri-colouring a triangular grid'
+challengeType: 1
+forumTopicId: 301825
+dashedName: problem-189-tri-colouring-a-triangular-grid
+---
+
+# --description--
+
+Consider the following configuration of 64 triangles:
+
+<img class="img-responsive center-block" alt="64 triangles arranged to create larger triangle with side length of 8 triangles" src="https://cdn.freecodecamp.org/curriculum/project-euler/tri-colouring-a-triangular-grid-1.gif" style="background-color: white; padding: 10px;" />
+
+We wish to colour the interior of each triangle with one of three colours: red, green or blue, so that no two neighbouring triangles have the same colour. Such a colouring shall be called valid. Here, two triangles are said to be neighbouring if they share an edge. Note: if they only share a vertex, then they are not neighbours.
+
+For example, here is a valid colouring of the above grid:
+
+<img class="img-responsive center-block" alt="colored grid of 64 triangles" src="https://cdn.freecodecamp.org/curriculum/project-euler/tri-colouring-a-triangular-grid-2.gif" style="background-color: white; padding: 10px;" />
+
+A colouring C' which is obtained from a colouring C by rotation or reflection is considered distinct from C unless the two are identical.
+
+How many distinct valid colourings are there for the above configuration?
+
+# --hints--
+
+`triangularGridColoring()` should return `10834893628237824`.
+
+```js
+assert.strictEqual(triangularGridColoring(), 10834893628237824);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function triangularGridColoring() {
+
+  return true;
+}
+
+triangularGridColoring();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-19-counting-sundays.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-19-counting-sundays.md
new file mode 100644
index 00000000000..5a3e24cc431
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-19-counting-sundays.md
@@ -0,0 +1,76 @@
+---
+id: 5900f37f1000cf542c50fe92
+title: 'Problem 19: Counting Sundays'
+challengeType: 1
+forumTopicId: 301827
+dashedName: problem-19-counting-sundays
+---
+
+# --description--
+
+You are given the following information, but you may prefer to do some research for yourself.
+
+<ul>
+  <li>1 Jan 1900 was a Monday.</li>
+  <li>Thirty days has September,<br>April, June and November.<br>All the rest have thirty-one,<br>Saving February alone,<br>Which has twenty-eight, rain or shine.<br>And on leap years, twenty-nine.</li>
+  <li>A leap year occurs on any year evenly divisible by 4, but not on a century unless it is divisible by 400.</li>
+</ul>
+
+How many Sundays fell on the first of the month during the twentieth century (1 Jan 1901 to 31 Dec 2000)?
+
+# --hints--
+
+`countingSundays(1943, 1946)` should return a number.
+
+```js
+assert(typeof countingSundays(1943, 1946) === 'number');
+```
+
+`countingSundays(1943, 1946)` should return 6.
+
+```js
+assert.strictEqual(countingSundays(1943, 1946), 6);
+```
+
+`countingSundays(1995, 2000)` should return 10.
+
+```js
+assert.strictEqual(countingSundays(1995, 2000), 10);
+```
+
+`countingSundays(1901, 2000)` should return 171.
+
+```js
+assert.strictEqual(countingSundays(1901, 2000), 171);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countingSundays(firstYear, lastYear) {
+
+  return true;
+}
+
+countingSundays(1943, 1946);
+```
+
+# --solutions--
+
+```js
+function countingSundays(firstYear, lastYear) {
+  let sundays = 0;
+
+  for (let year = firstYear; year <= lastYear; year++) {
+    for (let month = 0; month <= 11; month++) {
+      const thisDate = new Date(year, month, 1);
+      if (thisDate.getDay() === 0) {
+        sundays++;
+      }
+    }
+  }
+  return sundays;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-190-maximising-a-weighted-product.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-190-maximising-a-weighted-product.md
new file mode 100644
index 00000000000..806332925e0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-190-maximising-a-weighted-product.md
@@ -0,0 +1,42 @@
+---
+id: 5900f42b1000cf542c50ff3d
+title: 'Problem 190: Maximising a weighted product'
+challengeType: 1
+forumTopicId: 301828
+dashedName: problem-190-maximising-a-weighted-product
+---
+
+# --description--
+
+Let $S_m = (x_1, x_2, \ldots, x_m)$ be the $m$-tuple of positive real numbers with $x_1 + x_2 + \cdots + x_m = m$ for which $P_m = x_1 \times {x_2}^2 \times \cdots \times {x_m}^m$ is maximised.
+
+For example, it can be verified that $[P_{10}] = 4112$ ([ ] is the integer part function).
+
+Find $\sum {[P_m]}$ for $2 ≤ m ≤ 15$.
+
+# --hints--
+
+`maximisingWeightedProduct()` should return `371048281`.
+
+```js
+assert.strictEqual(maximisingWeightedProduct(), 371048281);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function maximisingWeightedProduct() {
+
+  return true;
+}
+
+maximisingWeightedProduct();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-191-prize-strings.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-191-prize-strings.md
new file mode 100644
index 00000000000..8e4e35e5736
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-191-prize-strings.md
@@ -0,0 +1,52 @@
+---
+id: 5900f42b1000cf542c50ff3e
+title: 'Problem 191: Prize Strings'
+challengeType: 1
+forumTopicId: 301829
+dashedName: problem-191-prize-strings
+---
+
+# --description--
+
+A particular school offers cash rewards to children with good attendance and punctuality. If they are absent for three consecutive days or late on more than one occasion then they forfeit their prize.
+
+During an n-day period a trinary string is formed for each child consisting of L's (late), O's (on time), and A's (absent).
+
+Although there are eighty-one trinary strings for a 4-day period that can be formed, exactly forty-three strings would lead to a prize:
+
+```markup
+OOOO OOOA OOOL OOAO OOAA OOAL OOLO OOLA OAOO OAOA
+OAOL OAAO OAAL OALO OALA OLOO OLOA OLAO OLAA AOOO
+AOOA AOOL AOAO AOAA AOAL AOLO AOLA AAOO AAOA AAOL
+AALO AALA ALOO ALOA ALAO ALAA LOOO LOOA LOAO LOAA
+LAOO LAOA LAAO
+```
+
+How many "prize" strings exist over a 30-day period?
+
+# --hints--
+
+`prizeStrings()` should return `1918080160`.
+
+```js
+assert.strictEqual(prizeStrings(), 1918080160);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function prizeStrings() {
+
+  return true;
+}
+
+prizeStrings();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-192-best-approximations.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-192-best-approximations.md
new file mode 100644
index 00000000000..61889d4d47b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-192-best-approximations.md
@@ -0,0 +1,46 @@
+---
+id: 5900f42c1000cf542c50ff3f
+title: 'Problem 192: Best Approximations'
+challengeType: 1
+forumTopicId: 301830
+dashedName: problem-192-best-approximations
+---
+
+# --description--
+
+Let $x$ be a real number.
+
+A best approximation to $x$ for the denominator bound $d$ is a rational number $\frac{r}{s}$ in reduced form, with $s ≤ d$, such that any rational number which is closer to $x$ than $\frac{r}{s}$ has a denominator larger than $d$:
+
+$$|\frac{p}{q} - x| &lt; |\frac{r}{s} - x| ⇒ q > d$$
+
+For example, the best approximation to $\sqrt{13}$ for the denominator bound $20$ is $\frac{18}{5}$ and the best approximation to $\sqrt{13}$ for the denominator bound $30$ is $\frac{101}{28}$.
+
+Find the sum of all denominators of the best approximations to $\sqrt{n}$ for the denominator bound ${10}^{12}$, where $n$ is not a perfect square and $1 &lt; n ≤ 100000$.
+
+# --hints--
+
+`bestApproximations()` should return `57060635927998344`.
+
+```js
+assert.strictEqual(bestApproximations(), 57060635927998344);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function bestApproximations() {
+
+  return true;
+}
+
+bestApproximations();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-193-squarefree-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-193-squarefree-numbers.md
new file mode 100644
index 00000000000..7e17fd27c15
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-193-squarefree-numbers.md
@@ -0,0 +1,40 @@
+---
+id: 5900f42f1000cf542c50ff41
+title: 'Problem 193: Squarefree Numbers'
+challengeType: 1
+forumTopicId: 301831
+dashedName: problem-193-squarefree-numbers
+---
+
+# --description--
+
+A positive integer $n$ is called squarefree, if no square of a prime divides $n$, thus 1, 2, 3, 5, 6, 7, 10, 11 are squarefree, but not 4, 8, 9, 12.
+
+How many squarefree numbers are there below $2^{50}$?
+
+# --hints--
+
+`squarefreeNumbers()` should return `684465067343069`.
+
+```js
+assert.strictEqual(squarefreeNumbers(), 684465067343069);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function squarefreeNumbers() {
+
+  return true;
+}
+
+squarefreeNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-194-coloured-configurations.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-194-coloured-configurations.md
new file mode 100644
index 00000000000..4d5b05af3d9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-194-coloured-configurations.md
@@ -0,0 +1,46 @@
+---
+id: 5900f42f1000cf542c50ff40
+title: 'Problem 194: Coloured Configurations'
+challengeType: 1
+forumTopicId: 301832
+dashedName: problem-194-coloured-configurations
+---
+
+# --description--
+
+Consider graphs built with the units A:
+<img class="img-responsive" alt="graph unit A" src="https://cdn.freecodecamp.org/curriculum/project-euler/coloured-configurations-1.png" style="display: inline-block; background-color: white; padding: 10px;" />
+ and B: <img class="img-responsive" alt="graph unit B" src="https://cdn.freecodecamp.org/curriculum/project-euler/coloured-configurations-2.png" style="display: inline-block; background-color: white; padding: 10px;" />, where the units are glued along the vertical edges as in the graph <img class="img-responsive" alt="graph with four units glued along the vertical edges" src="https://cdn.freecodecamp.org/curriculum/project-euler/coloured-configurations-3.png" style="display: inline-block; background-color: white; padding: 10px;" />.
+
+A configuration of type $(a,b,c)$ is a graph thus built of $a$ units A and $b$ units B, where the graph's vertices are coloured using up to $c$ colours, so that no two adjacent vertices have the same colour. The compound graph above is an example of a configuration of type $(2,2,6)$, in fact of type $(2,2,c)$ for all $c ≥ 4$
+
+Let $N(a,b,c)$ be the number of configurations of type $(a,b,c)$. For example, $N(1,0,3) = 24$, $N(0,2,4) = 92928$ and $N(2,2,3) = 20736$.
+
+Find the last 8 digits of $N(25,75,1984)$.
+
+# --hints--
+
+`coloredConfigurations()` should return `61190912`.
+
+```js
+assert.strictEqual(coloredConfigurations(), 61190912);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function coloredConfigurations() {
+
+  return true;
+}
+
+coloredConfigurations();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-195-inscribed-circles-of-triangles-with-one-angle-of-60-degrees.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-195-inscribed-circles-of-triangles-with-one-angle-of-60-degrees.md
new file mode 100644
index 00000000000..18c2acd7592
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-195-inscribed-circles-of-triangles-with-one-angle-of-60-degrees.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4311000cf542c50ff43
+title: 'Problem 195: Inscribed circles of triangles with one angle of 60 degrees'
+challengeType: 1
+forumTopicId: 301833
+dashedName: problem-195-inscribed-circles-of-triangles-with-one-angle-of-60-degrees
+---
+
+# --description--
+
+Let's call an integer sided triangle with exactly one angle of 60° a 60° triangle.
+
+Let $r$ be the radius of the inscribed circle of such a 60° triangle.
+
+There are 1234 60° triangles for which $r ≤ 100$.
+
+Let $T(n)$ be the number of 60° triangles for which $r ≤ n$, so $T(100) = 1234$, $T(1000) = 22767$, and $T(10000) = 359912$.
+
+Find $T(1053779)$.
+
+# --hints--
+
+`inscribedCirclesOfTriangles()` should return `75085391`.
+
+```js
+assert.strictEqual(inscribedCirclesOfTriangles(), 75085391);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function inscribedCirclesOfTriangles() {
+
+  return true;
+}
+
+inscribedCirclesOfTriangles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-196-prime-triplets.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-196-prime-triplets.md
new file mode 100644
index 00000000000..d072c7689a1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-196-prime-triplets.md
@@ -0,0 +1,60 @@
+---
+id: 5900f4301000cf542c50ff42
+title: 'Problem 196: Prime triplets'
+challengeType: 1
+forumTopicId: 301834
+dashedName: problem-196-prime-triplets
+---
+
+# --description--
+
+Build a triangle from all positive integers in the following way:
+
+$$\begin{array}{rrr}   &  1 \\\\
+  &  \color{red}{2} &  \color{red}{3} \\\\   &  4 & \color{red}{5} &  6 \\\\
+  &  \color{red}{7} &  8 &  9 & 10 \\\\   & \color{red}{11} & 12 & \color{red}{13} & 14 & 15  \\\\
+  & 16 & \color{red}{17} & 18 & \color{red}{19} & 20 & 21 \\\\   & 22 & \color{red}{23} & 24 & 25 & 26 & 27 & 28 \\\\
+  & \color{red}{29} & 30 & \color{red}{31} & 32 & 33 & 34 & 35 & 36 \\\\   & \color{red}{37} & 38 & 39 & 40 & \color{red}{41} & 42 & \color{red}{43} & 44 & 45 \\\\
+  & 46 & \color{red}{47} & 48 & 49 & 50 & 51 & 52 & \color{red}{53} & 54 & 55 \\\\   & 56 & 57 & 58 & \color{red}{59} & 60 & \color{red}{61} & 62 & 63 & 64 & 65 & 66 \\\\
+  & \cdots \end{array}$$
+
+Each positive integer has up to eight neighbours in the triangle.
+
+A set of three primes is called a prime triplet if one of the three primes has the other two as neighbours in the triangle.
+
+For example, in the second row, the prime numbers 2 and 3 are elements of some prime triplet.
+
+If row 8 is considered, it contains two primes which are elements of some prime triplet, i.e. 29 and 31. If row 9 is considered, it contains only one prime which is an element of some prime triplet: 37.
+
+Define $S(n)$ as the sum of the primes in row $n$ which are elements of any prime triplet. Then $S(8) = 60$ and $S(9) = 37$.
+
+You are given that $S(10000) = 950007619$.
+
+Find $S(5678027) + S(7208785)$.
+
+# --hints--
+
+`primeTriplets()` should return `322303240771079940`.
+
+```js
+assert.strictEqual(primeTriplets(), 322303240771079940);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeTriplets() {
+
+  return true;
+}
+
+primeTriplets();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-197-investigating-the-behaviour-of-a-recursively-defined-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-197-investigating-the-behaviour-of-a-recursively-defined-sequence.md
new file mode 100644
index 00000000000..608f288e3e9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-197-investigating-the-behaviour-of-a-recursively-defined-sequence.md
@@ -0,0 +1,40 @@
+---
+id: 5900f4311000cf542c50ff44
+title: 'Problem 197: Investigating the behaviour of a recursively defined sequence'
+challengeType: 1
+forumTopicId: 301835
+dashedName: problem-197-investigating-the-behaviour-of-a-recursively-defined-sequence
+---
+
+# --description--
+
+Given is the function $f(x) = ⌊{2}^{30.403243784 - x^2}⌋ × {10}^{-9}$ ( ⌊ ⌋ is the floor-function), the sequence $u_n$ is defined by $u_0 = -1$ and $u_{n + 1} = f(u_n)$.
+
+Find $u_n + u_{n + 1}$ for $n = {10}^{12}$. Give your answer with 9 digits after the decimal point.
+
+# --hints--
+
+`recursivelyDefinedSequence()` should return `1.710637717`.
+
+```js
+assert.strictEqual(recursivelyDefinedSequence(), 1.710637717);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function recursivelyDefinedSequence() {
+
+  return true;
+}
+
+recursivelyDefinedSequence();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-198-ambiguous-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-198-ambiguous-numbers.md
new file mode 100644
index 00000000000..69c2ba856dc
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-198-ambiguous-numbers.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4331000cf542c50ff45
+title: 'Problem 198: Ambiguous Numbers'
+challengeType: 1
+forumTopicId: 301836
+dashedName: problem-198-ambiguous-numbers
+---
+
+# --description--
+
+A best approximation to a real number $x$ for the denominator bound $d$ is a rational number $\frac{r}{s}$ (in reduced form) with $s ≤ d$, so that any rational number $\frac{p}{q}$ which is closer to $x$ than $\frac{r}{s}$ has $q > d$.
+
+Usually the best approximation to a real number is uniquely determined for all denominator bounds. However, there are some exceptions, e.g. $\frac{9}{40}$ has the two best approximations $\frac{1}{4}$ and $\frac{1}{5}$ for the denominator bound $6$. We shall call a real number $x$ ambiguous, if there is at least one denominator bound for which $x$ possesses two best approximations. Clearly, an ambiguous number is necessarily rational.
+
+How many ambiguous numbers $x = \frac{p}{q}$, $0 &lt; x &lt; \frac{1}{100}$, are there whose denominator $q$ does not exceed ${10}^8$?
+
+# --hints--
+
+`ambiguousNumbers()` should return `52374425`.
+
+```js
+assert.strictEqual(ambiguousNumbers(), 52374425);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function ambiguousNumbers() {
+
+  return true;
+}
+
+ambiguousNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-199-iterative-circle-packing.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-199-iterative-circle-packing.md
new file mode 100644
index 00000000000..5c699d70320
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-199-iterative-circle-packing.md
@@ -0,0 +1,75 @@
+---
+id: 5900f4341000cf542c50ff46
+title: 'Problem 199: Iterative Circle Packing'
+challengeType: 1
+forumTopicId: 301837
+dashedName: problem-199-iterative-circle-packing
+---
+
+# --description--
+
+Three circles of equal radius are placed inside a larger circle such that each pair of circles is tangent to one another and the inner circles do not overlap. There are four uncovered "gaps" which are to be filled iteratively with more tangent circles.
+
+<img class="img-responsive center-block" alt="a diagram of non-overlapping circles" src="https://cdn-media-1.freecodecamp.org/project-euler/199-circles-in-circles.gif" style="background-color: white; padding: 10px;" />
+
+At each iteration, a maximally sized circle is placed in each gap, which creates more gaps for the next iteration. After 3 iterations (pictured), there are 108 gaps and the fraction of the area which is not covered by circles is 0.06790342, rounded to eight decimal places.
+
+What fraction of the area is not covered by circles after `n` iterations? Give your answer rounded to eight decimal places using the format x.xxxxxxxx .
+
+# --hints--
+
+`iterativeCirclePacking(10)` should return a number.
+
+```js
+assert(typeof iterativeCirclePacking(10) === 'number');
+```
+
+`iterativeCirclePacking(10)` should return `0.00396087`.
+
+```js
+assert.strictEqual(iterativeCirclePacking(10), 0.00396087);
+```
+
+`iterativeCirclePacking(3)` should return `0.06790342`.
+
+```js
+assert.strictEqual(iterativeCirclePacking(3), 0.06790342);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function iterativeCirclePacking(n) {
+
+  return true;
+}
+
+iterativeCirclePacking(10);
+```
+
+# --solutions--
+
+```js
+function iterativeCirclePacking(n) {
+  let k1 = 1;
+  let k0 = k1 * (3 - 2 * Math.sqrt(3));
+  let a0 = 1 / (k0 * k0);
+  let a1 = 3 / (k1 * k1);
+  a1 += 3 * getArea(k0, k1, k1, n);
+  a1 += getArea(k1, k1, k1, n);
+  let final = ((a0 - a1) / a0).toFixed(8);
+
+  return parseFloat(final);
+  function getArea(k1, k2, k3, depth) {
+      if (depth == 0) return 0.0;
+      let k4 = k1 + k2 + k3 + 2 * Math.sqrt(k1 * k2 + k2 * k3 + k3 * k1);
+      let a = 1 / (k4 * k4);
+      a += getArea(k1, k2, k4, depth - 1);
+      a += getArea(k2, k3, k4, depth - 1);
+      a += getArea(k3, k1, k4, depth - 1);
+      return a;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-2-even-fibonacci-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-2-even-fibonacci-numbers.md
new file mode 100644
index 00000000000..4376672786b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-2-even-fibonacci-numbers.md
@@ -0,0 +1,103 @@
+---
+id: 5900f36e1000cf542c50fe81
+title: 'Problem 2: Even Fibonacci Numbers'
+challengeType: 1
+forumTopicId: 301838
+dashedName: problem-2-even-fibonacci-numbers
+---
+
+# --description--
+
+Each new term in the Fibonacci sequence is generated by adding the previous two terms. By starting with 1 and 2, the first 10 terms will be:
+
+<div style='text-align: center;'>1, 2, 3, 5, 8, 13, 21, 34, 55, 89, ...</div>
+
+By considering the terms in the Fibonacci sequence whose values do not exceed `n`, find the sum of the even-valued terms.
+
+# --hints--
+
+`fiboEvenSum(10)` should return a number.
+
+```js
+assert(typeof fiboEvenSum(10) === 'number');
+```
+
+Your function should return an even value.
+
+```js
+assert.equal(fiboEvenSum(10) % 2 === 0, true);
+```
+
+Your function should sum the even-valued Fibonacci numbers: `fiboEvenSum(8)` should return 10.
+
+```js
+assert.strictEqual(fiboEvenSum(8), 10);
+```
+
+`fiboEvenSum(10)` should return 10.
+
+```js
+assert.strictEqual(fiboEvenSum(10), 10);
+```
+
+`fiboEvenSum(34)` should return 44.
+
+```js
+assert.strictEqual(fiboEvenSum(34), 44);
+```
+
+`fiboEvenSum(60)` should return 44.
+
+```js
+assert.strictEqual(fiboEvenSum(60), 44);
+```
+
+`fiboEvenSum(1000)` should return 798.
+
+```js
+assert.strictEqual(fiboEvenSum(1000), 798);
+```
+
+`fiboEvenSum(100000)` should return 60696.
+
+```js
+assert.strictEqual(fiboEvenSum(100000), 60696);
+```
+
+`fiboEvenSum(4000000)` should return 4613732.
+
+```js
+assert.strictEqual(fiboEvenSum(4000000), 4613732);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function fiboEvenSum(n) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+const fiboEvenSum = (number) => {
+  if (number <= 1) {
+    return 0;
+  } else {
+    let evenSum = 0,
+      prevFibNum = 1,
+      fibNum = 2; // According to problem description our Fibonacci series starts with 1, 2
+    for (let i = 2; fibNum <= number; i++) {
+      if (fibNum % 2 == 0) {
+        evenSum += fibNum;
+      }
+      [prevFibNum, fibNum] = [fibNum, prevFibNum + fibNum];
+    }
+    return evenSum;
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-20-factorial-digit-sum.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-20-factorial-digit-sum.md
new file mode 100644
index 00000000000..a109ff5f9b2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-20-factorial-digit-sum.md
@@ -0,0 +1,79 @@
+---
+id: 5900f3801000cf542c50fe93
+title: 'Problem 20: Factorial digit sum'
+challengeType: 1
+forumTopicId: 301839
+dashedName: problem-20-factorial-digit-sum
+---
+
+# --description--
+
+`n`! means `n` × (`n` − 1) × ... × 3 × 2 × 1
+
+For example, 10! = 10 × 9 × ... × 3 × 2 × 1 = 3628800,  
+and the sum of the digits in the number 10! is 3 + 6 + 2 + 8 + 8 + 0 + 0 = 27.
+
+Find the sum of the digits `n`!
+
+# --hints--
+
+`sumFactorialDigits(10)` should return a number.
+
+```js
+assert(typeof sumFactorialDigits(10) === 'number');
+```
+
+`sumFactorialDigits(10)` should return 27.
+
+```js
+assert.strictEqual(sumFactorialDigits(10), 27);
+```
+
+`sumFactorialDigits(25)` should return 72.
+
+```js
+assert.strictEqual(sumFactorialDigits(25), 72);
+```
+
+`sumFactorialDigits(50)` should return 216.
+
+```js
+assert.strictEqual(sumFactorialDigits(50), 216);
+```
+
+`sumFactorialDigits(75)` should return 432.
+
+```js
+assert.strictEqual(sumFactorialDigits(75), 432);
+```
+
+`sumFactorialDigits(100)` should return 648.
+
+```js
+assert.strictEqual(sumFactorialDigits(100), 648);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumFactorialDigits(n) {
+
+  return n;
+}
+
+sumFactorialDigits(100);
+```
+
+# --solutions--
+
+```js
+let factorial = (n) => n <= 1 ? BigInt(n) : BigInt(n) * BigInt(factorial(--n));
+
+let sumDigits = n => n.toString().split('').map(x => parseInt(x)).reduce((a,b) => a + b);
+
+function sumFactorialDigits(n) {
+  return sumDigits(factorial(n));
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-200-find-the-200th-prime-proof-sqube-containing-the-contiguous-sub-string-200.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-200-find-the-200th-prime-proof-sqube-containing-the-contiguous-sub-string-200.md
new file mode 100644
index 00000000000..e35cfa0a550
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-200-find-the-200th-prime-proof-sqube-containing-the-contiguous-sub-string-200.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4351000cf542c50ff47
+title: >-
+  Problem 200: Find the 200th prime-proof sqube containing the contiguous sub-string "200"
+challengeType: 1
+forumTopicId: 301840
+dashedName: >-
+  problem-200-find-the-200th-prime-proof-sqube-containing-the-contiguous-sub-string-200
+---
+
+# --description--
+
+We shall define a sqube to be a number of the form, ${p^2}{q^3}$, where $p$ and $q$ are distinct primes.
+
+For example, $200 = {5^2}{2^3}$ or $120072949 = {{23}^2}{{61}^3}$.
+
+The first five squbes are 72, 108, 200, 392, and 500.
+
+Interestingly, 200 is also the first number for which you cannot change any single digit to make a prime; we shall call such numbers, prime-proof. The next prime-proof sqube which contains the contiguous sub-string `200` is 1992008.
+
+Find the 200th prime-proof sqube containing the contiguous sub-string `200`.
+
+# --hints--
+
+`primeProofSqubeWithSubString()` should return `229161792008`.
+
+```js
+assert.strictEqual(primeProofSqubeWithSubString(), 229161792008);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeProofSqubeWithSubString() {
+
+  return true;
+}
+
+primeProofSqubeWithSubString();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-201-subsets-with-a-unique-sum.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-201-subsets-with-a-unique-sum.md
new file mode 100644
index 00000000000..e0513d008ec
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-201-subsets-with-a-unique-sum.md
@@ -0,0 +1,58 @@
+---
+id: 5900f4361000cf542c50ff48
+title: 'Problem 201: Subsets with a unique sum'
+challengeType: 1
+forumTopicId: 301841
+dashedName: problem-201-subsets-with-a-unique-sum
+---
+
+# --description--
+
+For any set $A$ of numbers, let $sum(A)$ be the sum of the elements of $A$.
+
+Consider the set $B = \\{1,3,6,8,10,11\\}$. There are 20 subsets of $B$ containing three elements, and their sums are:
+
+$$\begin{align}   & sum(\\{1,3,6\\}) = 10 \\\\
+  & sum(\\{1,3,8\\}) = 12 \\\\   & sum(\\{1,3,10\\}) = 14 \\\\
+  & sum(\\{1,3,11\\}) = 15 \\\\   & sum(\\{1,6,8\\}) = 15 \\\\
+  & sum(\\{1,6,10\\}) = 17 \\\\   & sum(\\{1,6,11\\}) = 18 \\\\
+  & sum(\\{1,8,10\\}) = 19 \\\\   & sum(\\{1,8,11\\}) = 20 \\\\
+  & sum(\\{1,10,11\\}) = 22 \\\\   & sum(\\{3,6,8\\}) = 17 \\\\
+  & sum(\\{3,6,10\\}) = 19 \\\\   & sum(\\{3,6,11\\}) = 20 \\\\
+  & sum(\\{3,8,10\\}) = 21 \\\\   & sum(\\{3,8,11\\}) = 22 \\\\
+  & sum(\\{3,10,11\\}) = 24 \\\\   & sum(\\{6,8,10\\}) = 24 \\\\
+  & sum(\\{6,8,11\\}) = 25 \\\\   & sum(\\{6,10,11\\}) = 27 \\\\
+  & sum(\\{8,10,11\\}) = 29 \\end{align}$$
+
+Some of these sums occur more than once, others are unique. For a set $A$, let $U(A,k)$ be the set of unique sums of $k$-element subsets of $A$, in our example we find $U(B,3) = \\{10,12,14,18,21,25,27,29\\}$ and $sum(U(B,3)) = 156$.
+
+Now consider the $100$-element set $S = \\{1^2, 2^2, \ldots , {100}^2\\}$. $S$ has $100\\,891\\,344\\,545\\,564\\,193\\,334\\,812\\,497\\,256\\;$ $50$-element subsets.
+
+Determine the sum of all integers which are the sum of exactly one of the $50$-element subsets of $S$, i.e. find $sum(U(S,50))$.
+
+# --hints--
+
+`uniqueSubsetsSum()` should return `115039000`.
+
+```js
+assert.strictEqual(uniqueSubsetsSum(), 115039000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function uniqueSubsetsSum() {
+
+  return true;
+}
+
+uniqueSubsetsSum();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-202-laserbeam.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-202-laserbeam.md
new file mode 100644
index 00000000000..2090a152b22
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-202-laserbeam.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4371000cf542c50ff49
+title: 'Problem 202: Laserbeam'
+challengeType: 1
+forumTopicId: 301843
+dashedName: problem-202-laserbeam
+---
+
+# --description--
+
+Three mirrors are arranged in the shape of an equilateral triangle, with their reflective surfaces pointing inwards. There is an infinitesimal gap at each vertex of the triangle through which a laser beam may pass.
+
+Label the vertices $A$, $B$ and $C$. There are 2 ways in which a laser beam may enter vertex $C$, bounce off 11 surfaces, then exit through the same vertex: one way is shown below; the other is the reverse of that.
+
+<img class="img-responsive center-block" alt="one way in which laser beam may enter vertex C, bounce off 11 surfaces and exit through the same vertex" src="https://cdn.freecodecamp.org/curriculum/project-euler/laserbeam.gif" style="background-color: white; padding: 10px;" />
+
+There are 80840 ways in which a laser beam may enter vertex $C$, bounce off 1000001 surfaces, then exit through the same vertex.
+
+In how many ways can a laser beam enter at vertex $C$, bounce off 12017639147 surfaces, then exit through the same vertex?
+
+# --hints--
+
+`laserbeam()` should return `1209002624`.
+
+```js
+assert.strictEqual(laserbeam(), 1209002624);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function laserbeam() {
+
+  return true;
+}
+
+laserbeam();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-203-squarefree-binomial-coefficients.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-203-squarefree-binomial-coefficients.md
new file mode 100644
index 00000000000..4e418715771
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-203-squarefree-binomial-coefficients.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4381000cf542c50ff4a
+title: 'Problem 203: Squarefree Binomial Coefficients'
+challengeType: 1
+forumTopicId: 301844
+dashedName: problem-203-squarefree-binomial-coefficients
+---
+
+# --description--
+
+The binomial coefficients $\displaystyle\binom{n}{k}$ can be arranged in triangular form, Pascal's triangle, like this:
+
+$$\begin{array}{ccccccccccccccc}    &   &   &   &    &    &    &  1 &    &    &    &   &   &   &   \\\\
+   &   &   &   &    &    &  1 &    & 1  &    &    &   &   &   &   \\\\    &   &   &   &    &  1 &    &  2 &    &  1 &    &   &   &   &   \\\\
+   &   &   &   &  1 &    &  3 &    &  3 &    &  1 &   &   &   &   \\\\    &   &   & 1 &    &  4 &    &  6 &    &  4 &    & 1 &   &   &   \\\\
+   &   & 1 &   &  5 &    & 10 &    & 10 &    &  5 &   & 1 &   &   \\\\    & 1 &   & 6 &    & 15 &    & 20 &    & 15 &    & 6 &   & 1 &   \\\\
+ 1 &   & 7 &   & 21 &    & 35 &    & 35 &    & 21 &   & 7 &   & 1 \\\\ &   &   &   &    &    &    & \ldots \end{array}$$
+
+It can be seen that the first eight rows of Pascal's triangle contain twelve distinct numbers: 1, 2, 3, 4, 5, 6, 7, 10, 15, 20, 21 and 35.
+
+A positive integer n is called squarefree if no square of a prime divides n. Of the twelve distinct numbers in the first eight rows of Pascal's triangle, all except 4 and 20 are squarefree. The sum of the distinct squarefree numbers in the first eight rows is 105.
+
+Find the sum of the distinct squarefree numbers in the first 51 rows of Pascal's triangle.
+
+# --hints--
+
+`squarefreeBinomialCoefficients()` should return `34029210557338`.
+
+```js
+assert.strictEqual(squarefreeBinomialCoefficients(), 34029210557338);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function squarefreeBinomialCoefficients() {
+
+  return true;
+}
+
+squarefreeBinomialCoefficients();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-204-generalised-hamming-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-204-generalised-hamming-numbers.md
new file mode 100644
index 00000000000..584cf57c132
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-204-generalised-hamming-numbers.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4381000cf542c50ff4b
+title: 'Problem 204: Generalised Hamming Numbers'
+challengeType: 1
+forumTopicId: 301845
+dashedName: problem-204-generalised-hamming-numbers
+---
+
+# --description--
+
+A Hamming number is a positive number which has no prime factor larger than 5.
+
+So the first few Hamming numbers are 1, 2, 3, 4, 5, 6, 8, 9, 10, 12, 15.
+
+There are 1105 Hamming numbers not exceeding ${10}^8$.
+
+We will call a positive number a generalised Hamming number of type $n$, if it has no prime factor larger than $n$. Hence the Hamming numbers are the generalised Hamming numbers of type 5.
+
+How many generalised Hamming numbers of type 100 are there which don't exceed ${10}^9$?
+
+# --hints--
+
+`generalisedHammingNumbers()` should return `2944730`.
+
+```js
+assert.strictEqual(generalisedHammingNumbers(), 2944730);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function generalisedHammingNumbers() {
+
+  return true;
+}
+
+generalisedHammingNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-205-dice-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-205-dice-game.md
new file mode 100644
index 00000000000..17614dbf03b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-205-dice-game.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4391000cf542c50ff4c
+title: 'Problem 205: Dice Game'
+challengeType: 1
+forumTopicId: 301846
+dashedName: problem-205-dice-game
+---
+
+# --description--
+
+Peter has nine four-sided (pyramidal) dice, each with faces numbered 1, 2, 3, 4.
+
+Colin has six six-sided (cubic) dice, each with faces numbered 1, 2, 3, 4, 5, 6.
+
+Peter and Colin roll their dice and compare totals: the highest total wins. The result is a draw if the totals are equal.
+
+What is the probability that Pyramidal Pete beats Cubic Colin? Give your answer rounded to seven decimal places in the form 0.abcdefg
+
+# --hints--
+
+`diceGame()` should return `0.5731441`.
+
+```js
+assert.strictEqual(diceGame(), 0.5731441);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function diceGame() {
+
+  return true;
+}
+
+diceGame();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-206-concealed-square.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-206-concealed-square.md
new file mode 100644
index 00000000000..596f703da28
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-206-concealed-square.md
@@ -0,0 +1,63 @@
+---
+id: 5900f43a1000cf542c50ff4d
+title: 'Problem 206: Concealed Square'
+challengeType: 1
+forumTopicId: 301847
+dashedName: problem-206-concealed-square
+---
+
+# --description--
+
+Find the unique positive integer whose square has the form 1_2_3_4_5_6_7_8_9_0, where each "_" is a single digit.
+
+# --hints--
+
+`concealedSquare()` should return `1389019170`.
+
+```js
+assert.strictEqual(concealedSquare(), 1389019170);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function concealedSquare() {
+
+  return true;
+}
+
+concealedSquare();
+```
+
+# --solutions--
+
+```js
+// Check if n**2 matches the pattern
+function squareMatchs(n) {
+  // Need BigInt due to size of values
+  let nSquared = (BigInt(n) * BigInt(n)).toString();
+
+  // Check if digits match pattern
+  for (let i = 1; i <= 9; i++) {
+    if (nSquared[2 * (i - 1)] != i) return false;
+  }
+  return true;
+}
+
+// Find integer whose square matches the pattern
+function concealedSquare() {
+  // Set bounds based upon max and min candidates
+  const minSquareRoot = Math.floor(Math.sqrt(10203040506070809) / 10) * 10;
+  const maxSquareRoot = Math.ceil(Math.sqrt(19293949596979899) / 10) * 10;
+
+  for (let x = maxSquareRoot; x >= minSquareRoot; x -= 10) {
+    // Note: 3*3 = 9 and 7*7 = 49 are only trailing digits
+    //       that can produce 9 as trailing digit in square
+    if (squareMatchs(x + 3)) return (x + 3)*10;
+    if (squareMatchs(x + 7)) return (x + 7)*10;
+  }
+  return -1;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-207-integer-partition-equations.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-207-integer-partition-equations.md
new file mode 100644
index 00000000000..29efa6bc5f6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-207-integer-partition-equations.md
@@ -0,0 +1,56 @@
+---
+id: 5900f43c1000cf542c50ff4e
+title: 'Problem 207: Integer partition equations'
+challengeType: 1
+forumTopicId: 301848
+dashedName: problem-207-integer-partition-equations
+---
+
+# --description--
+
+For some positive integers $k$, there exists an integer partition of the form $4^t = 2^t + k$,
+
+where $4^t$, $2^t$, and $k$ are all positive integers and $t$ is a real number.
+
+The first two such partitions are $4^1 = 2^1 + 2$ and $4^{1.584\\,962\\,5\ldots} = 2^{1.584\\,962\\,5\ldots} + 6$.
+
+Partitions where $t$ is also an integer are called perfect. For any $m ≥ 1$ let $P(m)$ be the proportion of such partitions that are perfect with $k ≤ m$.
+
+Thus $P(6) = \frac{1}{2}$.
+
+In the following table are listed some values of $P(m)$
+
+$$\begin{align}   & P(5) = \frac{1}{1}    \\\\
+  & P(10) = \frac{1}{2}   \\\\   & P(15) = \frac{2}{3}   \\\\
+  & P(20) = \frac{1}{2}   \\\\   & P(25) = \frac{1}{2}   \\\\
+  & P(30) = \frac{2}{5}   \\\\   & \ldots                \\\\
+  & P(180) = \frac{1}{4}  \\\\ & P(185) = \frac{3}{13} \end{align}$$
+
+Find the smallest $m$ for which $P(m) &lt; \frac{1}{12\\,345}$
+
+# --hints--
+
+`integerPartitionEquations()` should return `44043947822`.
+
+```js
+assert.strictEqual(integerPartitionEquations(), 44043947822);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function integerPartitionEquations() {
+
+  return true;
+}
+
+integerPartitionEquations();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-208-robot-walks.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-208-robot-walks.md
new file mode 100644
index 00000000000..63c4e63cf53
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-208-robot-walks.md
@@ -0,0 +1,46 @@
+---
+id: 5900f43f1000cf542c50ff51
+title: 'Problem 208: Robot Walks'
+challengeType: 1
+forumTopicId: 301849
+dashedName: problem-208-robot-walks
+---
+
+# --description--
+
+A robot moves in a series of one-fifth circular arcs (72°), with a free choice of a clockwise or an anticlockwise arc for each step, but no turning on the spot.
+
+One of 70932 possible closed paths of 25 arcs starting northward is
+
+<img class="img-responsive center-block" alt="closed path of 25 arcs, starting northward" src="https://cdn.freecodecamp.org/curriculum/project-euler/robot-walks.gif" style="background-color: white; padding: 10px;" />
+
+Given that the robot starts facing North, how many journeys of 70 arcs in length can it take that return it, after the final arc, to its starting position?
+
+**Note:** Any arc may be traversed multiple times.
+
+# --hints--
+
+`robotWalks()` should return `331951449665644800`.
+
+```js
+assert.strictEqual(robotWalks(), 331951449665644800);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function robotWalks() {
+
+  return true;
+}
+
+robotWalks();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-209-circular-logic.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-209-circular-logic.md
new file mode 100644
index 00000000000..97190a72f20
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-209-circular-logic.md
@@ -0,0 +1,58 @@
+---
+id: 5900f43e1000cf542c50ff4f
+title: 'Problem 209: Circular Logic'
+challengeType: 1
+forumTopicId: 301850
+dashedName: problem-209-circular-logic
+---
+
+# --description--
+
+A $k$-input binary truth table is a map from $k$ input bits (binary digits, 0 [false] or 1 [true]) to 1 output bit. For example, the $2$-input binary truth tables for the logical $AND$ and $XOR$ functions are:
+
+| x | y | x AND y |
+| - | - | ------- |
+| 0 | 0 | 0       |
+| 0 | 1 | 0       |
+| 1 | 0 | 0       |
+| 1 | 1 | 1       |
+
+| x | y | x XOR y |
+| - | - | ------- |
+| 0 | 0 | 0       |
+| 0 | 1 | 1       |
+| 1 | 0 | 1       |
+| 1 | 1 | 0       |
+
+How many $6$-input binary truth tables, $τ$, satisfy the formula
+
+$$τ(a, b, c, d, e, f) \\; AND \\; τ(b, c, d, e, f, a \\; XOR \\; (b \\; AND \\; c)) = 0$$
+
+for all $6$-bit inputs ($a$, $b$, $c$, $d$, $e$, $f$)?
+
+# --hints--
+
+`circularLogic()` should return `15964587728784`.
+
+```js
+assert.strictEqual(circularLogic(), 15964587728784);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function circularLogic() {
+
+  return true;
+}
+
+circularLogic();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-21-amicable-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-21-amicable-numbers.md
new file mode 100644
index 00000000000..df19c7d7c20
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-21-amicable-numbers.md
@@ -0,0 +1,84 @@
+---
+id: 5900f3811000cf542c50fe94
+title: 'Problem 21: Amicable numbers'
+challengeType: 1
+forumTopicId: 301851
+dashedName: problem-21-amicable-numbers
+---
+
+# --description--
+
+Let d(`n`) be defined as the sum of proper divisors of `n` (numbers less than `n` which divide evenly into `n`).
+
+If d(`a`) = `b` and d(`b`) = `a`, where `a` ≠ `b`, then `a` and `b` are an amicable pair and each of `a` and `b` are called amicable numbers.
+
+For example, the proper divisors of 220 are 1, 2, 4, 5, 10, 11, 20, 22, 44, 55 and 110; therefore d(220) = 284. The proper divisors of 284 are 1, 2, 4, 71 and 142; so d(284) = 220.
+
+Evaluate the sum of all the amicable numbers under `n`.
+
+# --hints--
+
+`sumAmicableNum(1000)` should return a number.
+
+```js
+assert(typeof sumAmicableNum(1000) === 'number');
+```
+
+`sumAmicableNum(1000)` should return 504.
+
+```js
+assert.strictEqual(sumAmicableNum(1000), 504);
+```
+
+`sumAmicableNum(2000)` should return 2898.
+
+```js
+assert.strictEqual(sumAmicableNum(2000), 2898);
+```
+
+`sumAmicableNum(5000)` should return 8442.
+
+```js
+assert.strictEqual(sumAmicableNum(5000), 8442);
+```
+
+`sumAmicableNum(10000)` should return 31626.
+
+```js
+assert.strictEqual(sumAmicableNum(10000), 31626);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumAmicableNum(n) {
+
+  return n;
+}
+
+sumAmicableNum(10000);
+```
+
+# --solutions--
+
+```js
+const sumAmicableNum = (n) => {
+  const fsum = (n) => {
+    let sum = 1;
+    for (let i = 2; i <= Math.floor(Math.sqrt(n)); i++)
+      if (Math.floor(n % i) === 0)
+        sum += i + Math.floor(n / i);
+    return sum;
+  };
+  let d = [];
+  let amicableSum = 0;
+  for (let i=2; i<n; i++) d[i] = fsum(i);
+  for (let i=2; i<n; i++) {
+    let dsum = d[i];
+    if (d[dsum]===i && i!==dsum) amicableSum += i+dsum;
+  }
+  return amicableSum/2;
+};
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-210-obtuse-angled-triangles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-210-obtuse-angled-triangles.md
new file mode 100644
index 00000000000..0dbbed2f9b0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-210-obtuse-angled-triangles.md
@@ -0,0 +1,46 @@
+---
+id: 5900f43e1000cf542c50ff50
+title: 'Problem 210: Obtuse Angled Triangles'
+challengeType: 1
+forumTopicId: 301852
+dashedName: problem-210-obtuse-angled-triangles
+---
+
+# --description--
+
+Consider the set $S(r)$ of points ($x$,$y$) with integer coordinates satisfying $|x| + |y| ≤ r$.
+
+Let $O$ be the point (0,0) and $C$ the point ($\frac{r}{4}$,$\frac{r}{4}$).
+
+Let $N(r)$ be the number of points $B$ in $S(r)$, so that the triangle $OBC$ has an obtuse angle, i.e. the largest angle $α$ satisfies $90°&lt;α&lt;180°$.
+
+So, for example, $N(4)=24$ and $N(8)=100$.
+
+What is $N(1\\,000\\,000\\,000)$?
+
+# --hints--
+
+`obtuseAngledTriangles()` should return `1598174770174689500`.
+
+```js
+assert.strictEqual(obtuseAngledTriangles(), 1598174770174689500);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function obtuseAngledTriangles() {
+
+  return true;
+}
+
+obtuseAngledTriangles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-211-divisor-square-sum.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-211-divisor-square-sum.md
new file mode 100644
index 00000000000..3dddacaadbb
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-211-divisor-square-sum.md
@@ -0,0 +1,42 @@
+---
+id: 5900f43f1000cf542c50ff52
+title: 'Problem 211: Divisor Square Sum'
+challengeType: 1
+forumTopicId: 301853
+dashedName: problem-211-divisor-square-sum
+---
+
+# --description--
+
+For a positive integer $n$, let $σ_2(n)$ be the sum of the squares of its divisors. For example,
+
+$$σ_2(10) = 1 + 4 + 25 + 100 = 130$$
+
+Find the sum of all $n$, $0 &lt; n &lt; 64\\,000\\,000$ such that $σ_2(n)$ is a perfect square.
+
+# --hints--
+
+`divisorSquareSum()` should return `1922364685`.
+
+```js
+assert.strictEqual(divisorSquareSum(), 1922364685);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function divisorSquareSum() {
+
+  return true;
+}
+
+divisorSquareSum();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-212-combined-volume-of-cuboids.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-212-combined-volume-of-cuboids.md
new file mode 100644
index 00000000000..6fd271c483e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-212-combined-volume-of-cuboids.md
@@ -0,0 +1,57 @@
+---
+id: 5900f4411000cf542c50ff53
+title: 'Problem 212: Combined Volume of Cuboids'
+challengeType: 1
+forumTopicId: 301854
+dashedName: problem-212-combined-volume-of-cuboids
+---
+
+# --description--
+
+An axis-aligned cuboid, specified by parameters $\{ (x_0,y_0,z_0), (dx,dy,dz) \}$, consists of all points ($X$,$Y$,$Z$) such that $x_0 ≤ X ≤ x_0 + dx$, $y_0 ≤ Y ≤ y_0 + dy$ and $z_0 ≤ Z ≤ z_0 + dz$. The volume of the cuboid is the product, $dx × dy × dz$. The combined volume of a collection of cuboids is the volume of their union and will be less than the sum of the individual volumes if any cuboids overlap.
+
+Let $C_1, \ldots, C_{50000}$ be a collection of 50000 axis-aligned cuboids such that $C_n$ has parameters
+
+$$\begin{align}   & x_0 = S_{6n - 5} \\; \text{modulo} \\; 10000    \\\\
+  & y_0 = S_{6n - 4} \\; \text{modulo} \\; 10000    \\\\   & z_0 = S_{6n - 3} \\; \text{modulo} \\; 10000    \\\\
+  & dx = 1 + (S_{6n - 2} \\; \text{modulo} \\; 399) \\\\   & dy = 1 + (S_{6n - 1} \\; \text{modulo} \\; 399) \\\\
+  & dz = 1 + (S_{6n} \\; \text{modulo} \\; 399)     \\\\ \end{align}$$
+
+where $S_1, \ldots, S_{300000}$ come from the "Lagged Fibonacci Generator":
+
+For $1 ≤ k ≤ 55$, $S_k = [100003 - 200003k + 300007k^3] \\; (modulo \\; 1000000)$
+
+For $56 ≤ k$, $S_k = [S_{k - 24} + S_{k - 55}] \\; (modulo \\; 1000000)$
+
+Thus, $C_1$ has parameters $\{(7,53,183), (94,369,56)\}$, $C_2$ has parameters $\{(2383,3563,5079), (42,212,344)\}$, and so on.
+
+The combined volume of the first 100 cuboids, $C_1, \ldots, C_{100}$, is 723581599.
+
+What is the combined volume of all 50000 cuboids, $C_1, \ldots, C_{50000}$?
+
+# --hints--
+
+`combinedValueOfCuboids()` should return `328968937309`.
+
+```js
+assert.strictEqual(combinedValueOfCuboids(), 328968937309);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function combinedValueOfCuboids() {
+
+  return true;
+}
+
+combinedValueOfCuboids();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-213-flea-circus.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-213-flea-circus.md
new file mode 100644
index 00000000000..a18eb635255
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-213-flea-circus.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4411000cf542c50ff54
+title: 'Problem 213: Flea Circus'
+challengeType: 1
+forumTopicId: 301855
+dashedName: problem-213-flea-circus
+---
+
+# --description--
+
+A 30×30 grid of squares contains 900 fleas, initially one flea per square.
+
+When a bell is rung, each flea jumps to an adjacent square at random (usually 4 possibilities, except for fleas on the edge of the grid or at the corners).
+
+What is the expected number of unoccupied squares after 50 rings of the bell? Give your answer rounded to six decimal places.
+
+# --hints--
+
+`fleaCircus()` should return `330.721154`.
+
+```js
+assert.strictEqual(fleaCircus(), 330.721154);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function fleaCircus() {
+
+  return true;
+}
+
+fleaCircus();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-214-totient-chains.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-214-totient-chains.md
new file mode 100644
index 00000000000..497d541bc82
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-214-totient-chains.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4421000cf542c50ff55
+title: 'Problem 214: Totient Chains'
+challengeType: 1
+forumTopicId: 301856
+dashedName: problem-214-totient-chains
+---
+
+# --description--
+
+Let $φ$ be Euler's totient function, i.e. for a natural number $n$, $φ(n)$ is the number of $k$, $1 ≤ k ≤ n$, for which $gcd(k,n) = 1$.
+
+By iterating $φ$, each positive integer generates a decreasing chain of numbers ending in 1. E.g. if we start with 5 the sequence 5,4,2,1 is generated. Here is a listing of all chains with length 4:
+
+$$\begin{align}    5,4,2,1 & \\\\
+   7,6,2,1 & \\\\    8,4,2,1 & \\\\
+   9,6,2,1 & \\\\   10,4,2,1 & \\\\
+  12,4,2,1 & \\\\   14,6,2,1 & \\\\
+  18,6,2,1 & \end{align}$$
+
+Only two of these chains start with a prime, their sum is 12.
+
+What is the sum of all primes less than $40\\,000\\,000$ which generate a chain of length 25?
+
+# --hints--
+
+`totientChains()` should return `1677366278943`.
+
+```js
+assert.strictEqual(totientChains(), 1677366278943);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function totientChains() {
+
+  return true;
+}
+
+totientChains();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-215-crack-free-walls.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-215-crack-free-walls.md
new file mode 100644
index 00000000000..4e0f214b938
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-215-crack-free-walls.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4431000cf542c50ff56
+title: 'Problem 215: Crack-free Walls'
+challengeType: 1
+forumTopicId: 301857
+dashedName: problem-215-crack-free-walls
+---
+
+# --description--
+
+Consider the problem of building a wall out of 2×1 and 3×1 bricks (horizontal×vertical dimensions) such that, for extra strength, the gaps between horizontally-adjacent bricks never line up in consecutive layers, i.e. never form a "running crack".
+
+For example, the following 9×3 wall is not acceptable due to the running crack shown in red:
+
+<img class="img-responsive center-block" alt="9x3 wall with one lined up gap between horizontally-adjacent bricks" src="https://cdn.freecodecamp.org/curriculum/project-euler/crack-free-walls.gif" style="background-color: white; padding: 10px;" />
+
+There are eight ways of forming a crack-free 9×3 wall, written $W(9,3) = 8$.
+
+Calculate $W(32,10)$.
+
+# --hints--
+
+`crackFreeWalls()` should return `806844323190414`.
+
+```js
+assert.strictEqual(crackFreeWalls(), 806844323190414);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function crackFreeWalls() {
+
+  return true;
+}
+
+crackFreeWalls();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-216-investigating-the-primality-of-numbers-of-the-form-2n2-1.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-216-investigating-the-primality-of-numbers-of-the-form-2n2-1.md
new file mode 100644
index 00000000000..a528915ab9a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-216-investigating-the-primality-of-numbers-of-the-form-2n2-1.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4451000cf542c50ff57
+title: 'Problem 216: Investigating the primality of numbers of the form 2n2-1'
+challengeType: 1
+forumTopicId: 301858
+dashedName: problem-216-investigating-the-primality-of-numbers-of-the-form-2n2-1
+---
+
+# --description--
+
+Consider numbers $t(n)$ of the form $t(n) = 2n^2 - 1$ with $n > 1$.
+
+The first such numbers are 7, 17, 31, 49, 71, 97, 127 and 161.
+
+It turns out that only $49 = 7 \times 7$ and $161 = 7 \times 23$ are not prime.
+
+For $n ≤ 10000$ there are 2202 numbers $t(n)$ that are prime.
+
+How many numbers $t(n)$ are prime for $n ≤ 50\\,000\\,000$?
+
+# --hints--
+
+`primalityOfNumbers()` should return `5437849`.
+
+```js
+assert.strictEqual(primalityOfNumbers(), 5437849);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primalityOfNumbers() {
+
+  return true;
+}
+
+primalityOfNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-217-balanced-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-217-balanced-numbers.md
new file mode 100644
index 00000000000..f685410fcd3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-217-balanced-numbers.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4461000cf542c50ff58
+title: 'Problem 217: Balanced Numbers'
+challengeType: 1
+forumTopicId: 301859
+dashedName: problem-217-balanced-numbers
+---
+
+# --description--
+
+A positive integer with $k$ (decimal) digits is called balanced if its first $⌈\frac{k}{2}⌉$ digits sum to the same value as its last $⌈\frac{k}{2}⌉$ digits, where $⌈x⌉$, pronounced ceiling of $x$, is the smallest integer $≥ x$, thus $⌈π⌉ = 4$ and $⌈5⌉ = 5$.
+
+So, for example, all palindromes are balanced, as is 13722.
+
+Let $T(n)$ be the sum of all balanced numbers less than $10^n$.
+
+Thus: $T(1) = 45$, $T(2) = 540$ and $T(5) = 334\\,795\\,890$.
+
+Find $T(47)\\,mod\\,3^{15}$
+
+# --hints--
+
+`balancedNumbers()` should return `6273134`.
+
+```js
+assert.strictEqual(balancedNumbers(), 6273134);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function balancedNumbers() {
+
+  return true;
+}
+
+balancedNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-218-perfect-right-angled-triangles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-218-perfect-right-angled-triangles.md
new file mode 100644
index 00000000000..1d29c005426
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-218-perfect-right-angled-triangles.md
@@ -0,0 +1,56 @@
+---
+id: 5900f4461000cf542c50ff59
+title: 'Problem 218: Perfect right-angled triangles'
+challengeType: 1
+forumTopicId: 301860
+dashedName: problem-218-perfect-right-angled-triangles
+---
+
+# --description--
+
+Consider the right-angled triangle with sides $a=7$, $b=24$ and $c=25$.
+
+The area of this triangle is 84, which is divisible by the perfect numbers 6 and 28.
+
+Moreover it is a primitive right-angled triangle as $gcd(a,b) = 1$ and $gcd(b,c) = 1$.
+
+Also $c$ is a perfect square.
+
+We will call a right-angled triangle perfect if:
+
+- it is a primitive right-angled triangle
+- its hypotenuse is a perfect square
+
+We will call a right-angled triangle super-perfect if:
+
+- it is a perfect right-angled triangle
+- its area is a multiple of the perfect numbers 6 and 28.
+
+How many perfect right-angled triangles with $c ≤ {10}^{16}$ exist that are not super-perfect?
+
+# --hints--
+
+`perfectRightAngledTriangles()` should return `0`.
+
+```js
+assert.strictEqual(perfectRightAngledTriangles(), 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function perfectRightAngledTriangles() {
+
+  return true;
+}
+
+perfectRightAngledTriangles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-219-skew-cost-coding.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-219-skew-cost-coding.md
new file mode 100644
index 00000000000..f2d2b0f8721
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-219-skew-cost-coding.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4481000cf542c50ff5a
+title: 'Problem 219: Skew-cost coding'
+challengeType: 1
+forumTopicId: 301861
+dashedName: problem-219-skew-cost-coding
+---
+
+# --description--
+
+Let $A$ and $B$ be bit strings (sequences of 0's and 1's).
+
+If $A$ is equal to the <u>left</u>most length($A$) bits of $B$, then $A$ is said to be a prefix of $B$.
+
+For example, 00110 is a prefix of <u>00110</u>1001, but not of 00111 or 100110.
+
+A prefix-free code of size $n$ is a collection of $n$ distinct bit strings such that no string is a prefix of any other. For example, this is a prefix-free code of size 6:
+
+$$0000, 0001, 001, 01, 10, 11$$
+
+Now suppose that it costs one penny to transmit a '0' bit, but four pence to transmit a '1'. Then the total cost of the prefix-free code shown above is 35 pence, which happens to be the cheapest possible for the skewed pricing scheme in question. In short, we write $Cost(6) = 35$.
+
+What is $Cost(10^9)$?
+
+# --hints--
+
+`skewCostCoding()` should return `64564225042`.
+
+```js
+assert.strictEqual(skewCostCoding(), 64564225042);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function skewCostCoding() {
+
+  return true;
+}
+
+skewCostCoding();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-22-names-scores.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-22-names-scores.md
new file mode 100644
index 00000000000..4c8df4383a7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-22-names-scores.md
@@ -0,0 +1,90 @@
+---
+id: 5a51eabcad78bf416f316e2a
+title: 'Problem 22: Names scores'
+challengeType: 1
+forumTopicId: 301862
+dashedName: problem-22-names-scores
+---
+
+# --description--
+
+Using `names`, an array defined in the background containing over five-thousand first names, begin by sorting it into alphabetical order. Then working out the alphabetical value for each name, multiply this value by its alphabetical position in the list to obtain a name score.
+
+For example, when the list is sorted into alphabetical order, COLIN, which is worth 3 + 15 + 12 + 9 + 14 = 53, is the 938th name in the list. So, COLIN would obtain a score of 938 × 53 = 49714.
+
+What is the total of all the name scores in the array?
+
+# --hints--
+
+`namesScores(test1)` should return a number.
+
+```js
+assert(typeof namesScores(test1) === 'number');
+```
+
+`namesScores(test1)` should return 791.
+
+```js
+assert.strictEqual(namesScores(test1), 791);
+```
+
+`namesScores(test2)` should return 1468.
+
+```js
+assert.strictEqual(namesScores(test2), 1468);
+```
+
+`namesScores(names)` should return 871198282.
+
+```js
+assert.strictEqual(namesScores(names), 871198282);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+const names = ['MARY','PATRICIA','LINDA','BARBARA','ELIZABETH','JENNIFER','MARIA','SUSAN','MARGARET','DOROTHY','LISA','NANCY','KAREN','BETTY','HELEN','SANDRA','DONNA','CAROL','RUTH','SHARON','MICHELLE','LAURA','SARAH','KIMBERLY','DEBORAH','JESSICA','SHIRLEY','CYNTHIA','ANGELA','MELISSA','BRENDA','AMY','ANNA','REBECCA','VIRGINIA','KATHLEEN','PAMELA','MARTHA','DEBRA','AMANDA','STEPHANIE','CAROLYN','CHRISTINE','MARIE','JANET','CATHERINE','FRANCES','ANN','JOYCE','DIANE','ALICE','JULIE','HEATHER','TERESA','DORIS','GLORIA','EVELYN','JEAN','CHERYL','MILDRED','KATHERINE','JOAN','ASHLEY','JUDITH','ROSE','JANICE','KELLY','NICOLE','JUDY','CHRISTINA','KATHY','THERESA','BEVERLY','DENISE','TAMMY','IRENE','JANE','LORI','RACHEL','MARILYN','ANDREA','KATHRYN','LOUISE','SARA','ANNE','JACQUELINE','WANDA','BONNIE','JULIA','RUBY','LOIS','TINA','PHYLLIS','NORMA','PAULA','DIANA','ANNIE','LILLIAN','EMILY','ROBIN','PEGGY','CRYSTAL','GLADYS','RITA','DAWN','CONNIE','FLORENCE','TRACY','EDNA','TIFFANY','CARMEN','ROSA','CINDY','GRACE','WENDY','VICTORIA','EDITH','KIM','SHERRY','SYLVIA','JOSEPHINE','THELMA','SHANNON','SHEILA','ETHEL','ELLEN','ELAINE','MARJORIE','CARRIE','CHARLOTTE','MONICA','ESTHER','PAULINE','EMMA','JUANITA','ANITA','RHONDA','HAZEL','AMBER','EVA','DEBBIE','APRIL','LESLIE','CLARA','LUCILLE','JAMIE','JOANNE','ELEANOR','VALERIE','DANIELLE','MEGAN','ALICIA','SUZANNE','MICHELE','GAIL','BERTHA','DARLENE','VERONICA','JILL','ERIN','GERALDINE','LAUREN','CATHY','JOANN','LORRAINE','LYNN','SALLY','REGINA','ERICA','BEATRICE','DOLORES','BERNICE','AUDREY','YVONNE','ANNETTE','JUNE','SAMANTHA','MARION','DANA','STACY','ANA','RENEE','IDA','VIVIAN','ROBERTA','HOLLY','BRITTANY','MELANIE','LORETTA','YOLANDA','JEANETTE','LAURIE','KATIE','KRISTEN','VANESSA','ALMA','SUE','ELSIE','BETH','JEANNE','VICKI','CARLA','TARA','ROSEMARY','EILEEN','TERRI','GERTRUDE','LUCY','TONYA','ELLA','STACEY','WILMA','GINA','KRISTIN','JESSIE','NATALIE','AGNES','VERA','WILLIE','CHARLENE','BESSIE','DELORES','MELINDA','PEARL','ARLENE','MAUREEN','COLLEEN','ALLISON','TAMARA','JOY','GEORGIA','CONSTANCE','LILLIE','CLAUDIA','JACKIE','MARCIA','TANYA','NELLIE','MINNIE','MARLENE','HEIDI','GLENDA','LYDIA','VIOLA','COURTNEY','MARIAN','STELLA','CAROLINE','DORA','JO','VICKIE','MATTIE','TERRY','MAXINE','IRMA','MABEL','MARSHA','MYRTLE','LENA','CHRISTY','DEANNA','PATSY','HILDA','GWENDOLYN','JENNIE','NORA','MARGIE','NINA','CASSANDRA','LEAH','PENNY','KAY','PRISCILLA','NAOMI','CAROLE','BRANDY','OLGA','BILLIE','DIANNE','TRACEY','LEONA','JENNY','FELICIA','SONIA','MIRIAM','VELMA','BECKY','BOBBIE','VIOLET','KRISTINA','TONI','MISTY','MAE','SHELLY','DAISY','RAMONA','SHERRI','ERIKA','KATRINA','CLAIRE','LINDSEY','LINDSAY','GENEVA','GUADALUPE','BELINDA','MARGARITA','SHERYL','CORA','FAYE','ADA','NATASHA','SABRINA','ISABEL','MARGUERITE','HATTIE','HARRIET','MOLLY','CECILIA','KRISTI','BRANDI','BLANCHE','SANDY','ROSIE','JOANNA','IRIS','EUNICE','ANGIE','INEZ','LYNDA','MADELINE','AMELIA','ALBERTA','GENEVIEVE','MONIQUE','JODI','JANIE','MAGGIE','KAYLA','SONYA','JAN','LEE','KRISTINE','CANDACE','FANNIE','MARYANN','OPAL','ALISON','YVETTE','MELODY','LUZ','SUSIE','OLIVIA','FLORA','SHELLEY','KRISTY','MAMIE','LULA','LOLA','VERNA','BEULAH','ANTOINETTE','CANDICE','JUANA','JEANNETTE','PAM','KELLI','HANNAH','WHITNEY','BRIDGET','KARLA','CELIA','LATOYA','PATTY','SHELIA','GAYLE','DELLA','VICKY','LYNNE','SHERI','MARIANNE','KARA','JACQUELYN','ERMA','BLANCA','MYRA','LETICIA','PAT','KRISTA','ROXANNE','ANGELICA','JOHNNIE','ROBYN','FRANCIS','ADRIENNE','ROSALIE','ALEXANDRA','BROOKE','BETHANY','SADIE','BERNADETTE','TRACI','JODY','KENDRA','JASMINE','NICHOLE','RACHAEL','CHELSEA','MABLE','ERNESTINE','MURIEL','MARCELLA','ELENA','KRYSTAL','ANGELINA','NADINE','KARI','ESTELLE','DIANNA','PAULETTE','LORA','MONA','DOREEN','ROSEMARIE','ANGEL','DESIREE','ANTONIA','HOPE','GINGER','JANIS','BETSY','CHRISTIE','FREDA','MERCEDES','MEREDITH','LYNETTE','TERI','CRISTINA','EULA','LEIGH','MEGHAN','SOPHIA','ELOISE','ROCHELLE','GRETCHEN','CECELIA','RAQUEL','HENRIETTA','ALYSSA','JANA','KELLEY','GWEN','KERRY','JENNA','TRICIA','LAVERNE','OLIVE','ALEXIS','TASHA','SILVIA','ELVIRA','CASEY','DELIA','SOPHIE','KATE','PATTI','LORENA','KELLIE','SONJA','LILA','LANA','DARLA','MAY','MINDY','ESSIE','MANDY','LORENE','ELSA','JOSEFINA','JEANNIE','MIRANDA','DIXIE','LUCIA','MARTA','FAITH','LELA','JOHANNA','SHARI','CAMILLE','TAMI','SHAWNA','ELISA','EBONY','MELBA','ORA','NETTIE','TABITHA','OLLIE','JAIME','WINIFRED','KRISTIE','MARINA','ALISHA','AIMEE','RENA','MYRNA','MARLA','TAMMIE','LATASHA','BONITA','PATRICE','RONDA','SHERRIE','ADDIE','FRANCINE','DELORIS','STACIE','ADRIANA','CHERI','SHELBY','ABIGAIL','CELESTE','JEWEL','CARA','ADELE','REBEKAH','LUCINDA','DORTHY','CHRIS','EFFIE','TRINA','REBA','SHAWN','SALLIE','AURORA','LENORA','ETTA','LOTTIE','KERRI','TRISHA','NIKKI','ESTELLA','FRANCISCA','JOSIE','TRACIE','MARISSA','KARIN','BRITTNEY','JANELLE','LOURDES','LAUREL','HELENE','FERN','ELVA','CORINNE','KELSEY','INA','BETTIE','ELISABETH','AIDA','CAITLIN','INGRID','IVA','EUGENIA','CHRISTA','GOLDIE','CASSIE','MAUDE','JENIFER','THERESE','FRANKIE','DENA','LORNA','JANETTE','LATONYA','CANDY','MORGAN','CONSUELO','TAMIKA','ROSETTA','DEBORA','CHERIE','POLLY','DINA','JEWELL','FAY','JILLIAN','DOROTHEA','NELL','TRUDY','ESPERANZA','PATRICA','KIMBERLEY','SHANNA','HELENA','CAROLINA','CLEO','STEFANIE','ROSARIO','OLA','JANINE','MOLLIE','LUPE','ALISA','LOU','MARIBEL','SUSANNE','BETTE','SUSANA','ELISE','CECILE','ISABELLE','LESLEY','JOCELYN','PAIGE','JONI','RACHELLE','LEOLA','DAPHNE','ALTA','ESTER','PETRA','GRACIELA','IMOGENE','JOLENE','KEISHA','LACEY','GLENNA','GABRIELA','KERI','URSULA','LIZZIE','KIRSTEN','SHANA','ADELINE','MAYRA','JAYNE','JACLYN','GRACIE','SONDRA','CARMELA','MARISA','ROSALIND','CHARITY','TONIA','BEATRIZ','MARISOL','CLARICE','JEANINE','SHEENA','ANGELINE','FRIEDA','LILY','ROBBIE','SHAUNA','MILLIE','CLAUDETTE','CATHLEEN','ANGELIA','GABRIELLE','AUTUMN','KATHARINE','SUMMER','JODIE','STACI','LEA','CHRISTI','JIMMIE','JUSTINE','ELMA','LUELLA','MARGRET','DOMINIQUE','SOCORRO','RENE','MARTINA','MARGO','MAVIS','CALLIE','BOBBI','MARITZA','LUCILE','LEANNE','JEANNINE','DEANA','AILEEN','LORIE','LADONNA','WILLA','MANUELA','GALE','SELMA','DOLLY','SYBIL','ABBY','LARA','DALE','IVY','DEE','WINNIE','MARCY','LUISA','JERI','MAGDALENA','OFELIA','MEAGAN','AUDRA','MATILDA','LEILA','CORNELIA','BIANCA','SIMONE','BETTYE','RANDI','VIRGIE','LATISHA','BARBRA','GEORGINA','ELIZA','LEANN','BRIDGETTE','RHODA','HALEY','ADELA','NOLA','BERNADINE','FLOSSIE','ILA','GRETA','RUTHIE','NELDA','MINERVA','LILLY','TERRIE','LETHA','HILARY','ESTELA','VALARIE','BRIANNA','ROSALYN','EARLINE','CATALINA','AVA','MIA','CLARISSA','LIDIA','CORRINE','ALEXANDRIA','CONCEPCION','TIA','SHARRON','RAE','DONA','ERICKA','JAMI','ELNORA','CHANDRA','LENORE','NEVA','MARYLOU','MELISA','TABATHA','SERENA','AVIS','ALLIE','SOFIA','JEANIE','ODESSA','NANNIE','HARRIETT','LORAINE','PENELOPE','MILAGROS','EMILIA','BENITA','ALLYSON','ASHLEE','TANIA','TOMMIE','ESMERALDA','KARINA','EVE','PEARLIE','ZELMA','MALINDA','NOREEN','TAMEKA','SAUNDRA','HILLARY','AMIE','ALTHEA','ROSALINDA','JORDAN','LILIA','ALANA','GAY','CLARE','ALEJANDRA','ELINOR','MICHAEL','LORRIE','JERRI','DARCY','EARNESTINE','CARMELLA','TAYLOR','NOEMI','MARCIE','LIZA','ANNABELLE','LOUISA','EARLENE','MALLORY','CARLENE','NITA','SELENA','TANISHA','KATY','JULIANNE','JOHN','LAKISHA','EDWINA','MARICELA','MARGERY','KENYA','DOLLIE','ROXIE','ROSLYN','KATHRINE','NANETTE','CHARMAINE','LAVONNE','ILENE','KRIS','TAMMI','SUZETTE','CORINE','KAYE','JERRY','MERLE','CHRYSTAL','LINA','DEANNE','LILIAN','JULIANA','ALINE','LUANN','KASEY','MARYANNE','EVANGELINE','COLETTE','MELVA','LAWANDA','YESENIA','NADIA','MADGE','KATHIE','EDDIE','OPHELIA','VALERIA','NONA','MITZI','MARI','GEORGETTE','CLAUDINE','FRAN','ALISSA','ROSEANN','LAKEISHA','SUSANNA','REVA','DEIDRE','CHASITY','SHEREE','CARLY','JAMES','ELVIA','ALYCE','DEIRDRE','GENA','BRIANA','ARACELI','KATELYN','ROSANNE','WENDI','TESSA','BERTA','MARVA','IMELDA','MARIETTA','MARCI','LEONOR','ARLINE','SASHA','MADELYN','JANNA','JULIETTE','DEENA','AURELIA','JOSEFA','AUGUSTA','LILIANA','YOUNG','CHRISTIAN','LESSIE','AMALIA','SAVANNAH','ANASTASIA','VILMA','NATALIA','ROSELLA','LYNNETTE','CORINA','ALFREDA','LEANNA','CAREY','AMPARO','COLEEN','TAMRA','AISHA','WILDA','KARYN','CHERRY','QUEEN','MAURA','MAI','EVANGELINA','ROSANNA','HALLIE','ERNA','ENID','MARIANA','LACY','JULIET','JACKLYN','FREIDA','MADELEINE','MARA','HESTER','CATHRYN','LELIA','CASANDRA','BRIDGETT','ANGELITA','JANNIE','DIONNE','ANNMARIE','KATINA','BERYL','PHOEBE','MILLICENT','KATHERYN','DIANN','CARISSA','MARYELLEN','LIZ','LAURI','HELGA','GILDA','ADRIAN','RHEA','MARQUITA','HOLLIE','TISHA','TAMERA','ANGELIQUE','FRANCESCA','BRITNEY','KAITLIN','LOLITA','FLORINE','ROWENA','REYNA','TWILA','FANNY','JANELL','INES','CONCETTA','BERTIE','ALBA','BRIGITTE','ALYSON','VONDA','PANSY','ELBA','NOELLE','LETITIA','KITTY','DEANN','BRANDIE','LOUELLA','LETA','FELECIA','SHARLENE','LESA','BEVERLEY','ROBERT','ISABELLA','HERMINIA','TERRA','CELINA','TORI','OCTAVIA','JADE','DENICE','GERMAINE','SIERRA','MICHELL','CORTNEY','NELLY','DORETHA','SYDNEY','DEIDRA','MONIKA','LASHONDA','JUDI','CHELSEY','ANTIONETTE','MARGOT','BOBBY','ADELAIDE','NAN','LEEANN','ELISHA','DESSIE','LIBBY','KATHI','GAYLA','LATANYA','MINA','MELLISA','KIMBERLEE','JASMIN','RENAE','ZELDA','ELDA','MA','JUSTINA','GUSSIE','EMILIE','CAMILLA','ABBIE','ROCIO','KAITLYN','JESSE','EDYTHE','ASHLEIGH','SELINA','LAKESHA','GERI','ALLENE','PAMALA','MICHAELA','DAYNA','CARYN','ROSALIA','SUN','JACQULINE','REBECA','MARYBETH','KRYSTLE','IOLA','DOTTIE','BENNIE','BELLE','AUBREY','GRISELDA','ERNESTINA','ELIDA','ADRIANNE','DEMETRIA','DELMA','CHONG','JAQUELINE','DESTINY','ARLEEN','VIRGINA','RETHA','FATIMA','TILLIE','ELEANORE','CARI','TREVA','BIRDIE','WILHELMINA','ROSALEE','MAURINE','LATRICE','YONG','JENA','TARYN','ELIA','DEBBY','MAUDIE','JEANNA','DELILAH','CATRINA','SHONDA','HORTENCIA','THEODORA','TERESITA','ROBBIN','DANETTE','MARYJANE','FREDDIE','DELPHINE','BRIANNE','NILDA','DANNA','CINDI','BESS','IONA','HANNA','ARIEL','WINONA','VIDA','ROSITA','MARIANNA','WILLIAM','RACHEAL','GUILLERMINA','ELOISA','CELESTINE','CAREN','MALISSA','LONA','CHANTEL','SHELLIE','MARISELA','LEORA','AGATHA','SOLEDAD','MIGDALIA','IVETTE','CHRISTEN','ATHENA','JANEL','CHLOE','VEDA','PATTIE','TESSIE','TERA','MARILYNN','LUCRETIA','KARRIE','DINAH','DANIELA','ALECIA','ADELINA','VERNICE','SHIELA','PORTIA','MERRY','LASHAWN','DEVON','DARA','TAWANA','OMA','VERDA','CHRISTIN','ALENE','ZELLA','SANDI','RAFAELA','MAYA','KIRA','CANDIDA','ALVINA','SUZAN','SHAYLA','LYN','LETTIE','ALVA','SAMATHA','ORALIA','MATILDE','MADONNA','LARISSA','VESTA','RENITA','INDIA','DELOIS','SHANDA','PHILLIS','LORRI','ERLINDA','CRUZ','CATHRINE','BARB','ZOE','ISABELL','IONE','GISELA','CHARLIE','VALENCIA','ROXANNA','MAYME','KISHA','ELLIE','MELLISSA','DORRIS','DALIA','BELLA','ANNETTA','ZOILA','RETA','REINA','LAURETTA','KYLIE','CHRISTAL','PILAR','CHARLA','ELISSA','TIFFANI','TANA','PAULINA','LEOTA','BREANNA','JAYME','CARMEL','VERNELL','TOMASA','MANDI','DOMINGA','SANTA','MELODIE','LURA','ALEXA','TAMELA','RYAN','MIRNA','KERRIE','VENUS','NOEL','FELICITA','CRISTY','CARMELITA','BERNIECE','ANNEMARIE','TIARA','ROSEANNE','MISSY','CORI','ROXANA','PRICILLA','KRISTAL','JUNG','ELYSE','HAYDEE','ALETHA','BETTINA','MARGE','GILLIAN','FILOMENA','CHARLES','ZENAIDA','HARRIETTE','CARIDAD','VADA','UNA','ARETHA','PEARLINE','MARJORY','MARCELA','FLOR','EVETTE','ELOUISE','ALINA','TRINIDAD','DAVID','DAMARIS','CATHARINE','CARROLL','BELVA','NAKIA','MARLENA','LUANNE','LORINE','KARON','DORENE','DANITA','BRENNA','TATIANA','SAMMIE','LOUANN','LOREN','JULIANNA','ANDRIA','PHILOMENA','LUCILA','LEONORA','DOVIE','ROMONA','MIMI','JACQUELIN','GAYE','TONJA','MISTI','JOE','GENE','CHASTITY','STACIA','ROXANN','MICAELA','NIKITA','MEI','VELDA','MARLYS','JOHNNA','AURA','LAVERN','IVONNE','HAYLEY','NICKI','MAJORIE','HERLINDA','GEORGE','ALPHA','YADIRA','PERLA','GREGORIA','DANIEL','ANTONETTE','SHELLI','MOZELLE','MARIAH','JOELLE','CORDELIA','JOSETTE','CHIQUITA','TRISTA','LOUIS','LAQUITA','GEORGIANA','CANDI','SHANON','LONNIE','HILDEGARD','CECIL','VALENTINA','STEPHANY','MAGDA','KAROL','GERRY','GABRIELLA','TIANA','ROMA','RICHELLE','RAY','PRINCESS','OLETA','JACQUE','IDELLA','ALAINA','SUZANNA','JOVITA','BLAIR','TOSHA','RAVEN','NEREIDA','MARLYN','KYLA','JOSEPH','DELFINA','TENA','STEPHENIE','SABINA','NATHALIE','MARCELLE','GERTIE','DARLEEN','THEA','SHARONDA','SHANTEL','BELEN','VENESSA','ROSALINA','ONA','GENOVEVA','COREY','CLEMENTINE','ROSALBA','RENATE','RENATA','MI','IVORY','GEORGIANNA','FLOY','DORCAS','ARIANA','TYRA','THEDA','MARIAM','JULI','JESICA','DONNIE','VIKKI','VERLA','ROSELYN','MELVINA','JANNETTE','GINNY','DEBRAH','CORRIE','ASIA','VIOLETA','MYRTIS','LATRICIA','COLLETTE','CHARLEEN','ANISSA','VIVIANA','TWYLA','PRECIOUS','NEDRA','LATONIA','LAN','HELLEN','FABIOLA','ANNAMARIE','ADELL','SHARYN','CHANTAL','NIKI','MAUD','LIZETTE','LINDY','KIA','KESHA','JEANA','DANELLE','CHARLINE','CHANEL','CARROL','VALORIE','LIA','DORTHA','CRISTAL','SUNNY','LEONE','LEILANI','GERRI','DEBI','ANDRA','KESHIA','IMA','EULALIA','EASTER','DULCE','NATIVIDAD','LINNIE','KAMI','GEORGIE','CATINA','BROOK','ALDA','WINNIFRED','SHARLA','RUTHANN','MEAGHAN','MAGDALENE','LISSETTE','ADELAIDA','VENITA','TRENA','SHIRLENE','SHAMEKA','ELIZEBETH','DIAN','SHANTA','MICKEY','LATOSHA','CARLOTTA','WINDY','SOON','ROSINA','MARIANN','LEISA','JONNIE','DAWNA','CATHIE','BILLY','ASTRID','SIDNEY','LAUREEN','JANEEN','HOLLI','FAWN','VICKEY','TERESSA','SHANTE','RUBYE','MARCELINA','CHANDA','CARY','TERESE','SCARLETT','MARTY','MARNIE','LULU','LISETTE','JENIFFER','ELENOR','DORINDA','DONITA','CARMAN','BERNITA','ALTAGRACIA','ALETA','ADRIANNA','ZORAIDA','RONNIE','NICOLA','LYNDSEY','KENDALL','JANINA','CHRISSY','AMI','STARLA','PHYLIS','PHUONG','KYRA','CHARISSE','BLANCH','SANJUANITA','RONA','NANCI','MARILEE','MARANDA','CORY','BRIGETTE','SANJUANA','MARITA','KASSANDRA','JOYCELYN','IRA','FELIPA','CHELSIE','BONNY','MIREYA','LORENZA','KYONG','ILEANA','CANDELARIA','TONY','TOBY','SHERIE','OK','MARK','LUCIE','LEATRICE','LAKESHIA','GERDA','EDIE','BAMBI','MARYLIN','LAVON','HORTENSE','GARNET','EVIE','TRESSA','SHAYNA','LAVINA','KYUNG','JEANETTA','SHERRILL','SHARA','PHYLISS','MITTIE','ANABEL','ALESIA','THUY','TAWANDA','RICHARD','JOANIE','TIFFANIE','LASHANDA','KARISSA','ENRIQUETA','DARIA','DANIELLA','CORINNA','ALANNA','ABBEY','ROXANE','ROSEANNA','MAGNOLIA','LIDA','KYLE','JOELLEN','ERA','CORAL','CARLEEN','TRESA','PEGGIE','NOVELLA','NILA','MAYBELLE','JENELLE','CARINA','NOVA','MELINA','MARQUERITE','MARGARETTE','JOSEPHINA','EVONNE','DEVIN','CINTHIA','ALBINA','TOYA','TAWNYA','SHERITA','SANTOS','MYRIAM','LIZABETH','LISE','KEELY','JENNI','GISELLE','CHERYLE','ARDITH','ARDIS','ALESHA','ADRIANE','SHAINA','LINNEA','KAROLYN','HONG','FLORIDA','FELISHA','DORI','DARCI','ARTIE','ARMIDA','ZOLA','XIOMARA','VERGIE','SHAMIKA','NENA','NANNETTE','MAXIE','LOVIE','JEANE','JAIMIE','INGE','FARRAH','ELAINA','CAITLYN','STARR','FELICITAS','CHERLY','CARYL','YOLONDA','YASMIN','TEENA','PRUDENCE','PENNIE','NYDIA','MACKENZIE','ORPHA','MARVEL','LIZBETH','LAURETTE','JERRIE','HERMELINDA','CAROLEE','TIERRA','MIRIAN','META','MELONY','KORI','JENNETTE','JAMILA','ENA','ANH','YOSHIKO','SUSANNAH','SALINA','RHIANNON','JOLEEN','CRISTINE','ASHTON','ARACELY','TOMEKA','SHALONDA','MARTI','LACIE','KALA','JADA','ILSE','HAILEY','BRITTANI','ZONA','SYBLE','SHERRYL','RANDY','NIDIA','MARLO','KANDICE','KANDI','DEB','DEAN','AMERICA','ALYCIA','TOMMY','RONNA','NORENE','MERCY','JOSE','INGEBORG','GIOVANNA','GEMMA','CHRISTEL','AUDRY','ZORA','VITA','VAN','TRISH','STEPHAINE','SHIRLEE','SHANIKA','MELONIE','MAZIE','JAZMIN','INGA','HOA','HETTIE','GERALYN','FONDA','ESTRELLA','ADELLA','SU','SARITA','RINA','MILISSA','MARIBETH','GOLDA','EVON','ETHELYN','ENEDINA','CHERISE','CHANA','VELVA','TAWANNA','SADE','MIRTA','LI','KARIE','JACINTA','ELNA','DAVINA','CIERRA','ASHLIE','ALBERTHA','TANESHA','STEPHANI','NELLE','MINDI','LU','LORINDA','LARUE','FLORENE','DEMETRA','DEDRA','CIARA','CHANTELLE','ASHLY','SUZY','ROSALVA','NOELIA','LYDA','LEATHA','KRYSTYNA','KRISTAN','KARRI','DARLINE','DARCIE','CINDA','CHEYENNE','CHERRIE','AWILDA','ALMEDA','ROLANDA','LANETTE','JERILYN','GISELE','EVALYN','CYNDI','CLETA','CARIN','ZINA','ZENA','VELIA','TANIKA','PAUL','CHARISSA','THOMAS','TALIA','MARGARETE','LAVONDA','KAYLEE','KATHLENE','JONNA','IRENA','ILONA','IDALIA','CANDIS','CANDANCE','BRANDEE','ANITRA','ALIDA','SIGRID','NICOLETTE','MARYJO','LINETTE','HEDWIG','CHRISTIANA','CASSIDY','ALEXIA','TRESSIE','MODESTA','LUPITA','LITA','GLADIS','EVELIA','DAVIDA','CHERRI','CECILY','ASHELY','ANNABEL','AGUSTINA','WANITA','SHIRLY','ROSAURA','HULDA','EUN','BAILEY','YETTA','VERONA','THOMASINA','SIBYL','SHANNAN','MECHELLE','LUE','LEANDRA','LANI','KYLEE','KANDY','JOLYNN','FERNE','EBONI','CORENE','ALYSIA','ZULA','NADA','MOIRA','LYNDSAY','LORRETTA','JUAN','JAMMIE','HORTENSIA','GAYNELL','CAMERON','ADRIA','VINA','VICENTA','TANGELA','STEPHINE','NORINE','NELLA','LIANA','LESLEE','KIMBERELY','ILIANA','GLORY','FELICA','EMOGENE','ELFRIEDE','EDEN','EARTHA','CARMA','BEA','OCIE','MARRY','LENNIE','KIARA','JACALYN','CARLOTA','ARIELLE','YU','STAR','OTILIA','KIRSTIN','KACEY','JOHNETTA','JOEY','JOETTA','JERALDINE','JAUNITA','ELANA','DORTHEA','CAMI','AMADA','ADELIA','VERNITA','TAMAR','SIOBHAN','RENEA','RASHIDA','OUIDA','ODELL','NILSA','MERYL','KRISTYN','JULIETA','DANICA','BREANNE','AUREA','ANGLEA','SHERRON','ODETTE','MALIA','LORELEI','LIN','LEESA','KENNA','KATHLYN','FIONA','CHARLETTE','SUZIE','SHANTELL','SABRA','RACQUEL','MYONG','MIRA','MARTINE','LUCIENNE','LAVADA','JULIANN','JOHNIE','ELVERA','DELPHIA','CLAIR','CHRISTIANE','CHAROLETTE','CARRI','AUGUSTINE','ASHA','ANGELLA','PAOLA','NINFA','LEDA','LAI','EDA','SUNSHINE','STEFANI','SHANELL','PALMA','MACHELLE','LISSA','KECIA','KATHRYNE','KARLENE','JULISSA','JETTIE','JENNIFFER','HUI','CORRINA','CHRISTOPHER','CAROLANN','ALENA','TESS','ROSARIA','MYRTICE','MARYLEE','LIANE','KENYATTA','JUDIE','JANEY','IN','ELMIRA','ELDORA','DENNA','CRISTI','CATHI','ZAIDA','VONNIE','VIVA','VERNIE','ROSALINE','MARIELA','LUCIANA','LESLI','KARAN','FELICE','DENEEN','ADINA','WYNONA','TARSHA','SHERON','SHASTA','SHANITA','SHANI','SHANDRA','RANDA','PINKIE','PARIS','NELIDA','MARILOU','LYLA','LAURENE','LACI','JOI','JANENE','DOROTHA','DANIELE','DANI','CAROLYNN','CARLYN','BERENICE','AYESHA','ANNELIESE','ALETHEA','THERSA','TAMIKO','RUFINA','OLIVA','MOZELL','MARYLYN','MADISON','KRISTIAN','KATHYRN','KASANDRA','KANDACE','JANAE','GABRIEL','DOMENICA','DEBBRA','DANNIELLE','CHUN','BUFFY','BARBIE','ARCELIA','AJA','ZENOBIA','SHAREN','SHAREE','PATRICK','PAGE','MY','LAVINIA','KUM','KACIE','JACKELINE','HUONG','FELISA','EMELIA','ELEANORA','CYTHIA','CRISTIN','CLYDE','CLARIBEL','CARON','ANASTACIA','ZULMA','ZANDRA','YOKO','TENISHA','SUSANN','SHERILYN','SHAY','SHAWANDA','SABINE','ROMANA','MATHILDA','LINSEY','KEIKO','JOANA','ISELA','GRETTA','GEORGETTA','EUGENIE','DUSTY','DESIRAE','DELORA','CORAZON','ANTONINA','ANIKA','WILLENE','TRACEE','TAMATHA','REGAN','NICHELLE','MICKIE','MAEGAN','LUANA','LANITA','KELSIE','EDELMIRA','BREE','AFTON','TEODORA','TAMIE','SHENA','MEG','LINH','KELI','KACI','DANYELLE','BRITT','ARLETTE','ALBERTINE','ADELLE','TIFFINY','STORMY','SIMONA','NUMBERS','NICOLASA','NICHOL','NIA','NAKISHA','MEE','MAIRA','LOREEN','KIZZY','JOHNNY','JAY','FALLON','CHRISTENE','BOBBYE','ANTHONY','YING','VINCENZA','TANJA','RUBIE','RONI','QUEENIE','MARGARETT','KIMBERLI','IRMGARD','IDELL','HILMA','EVELINA','ESTA','EMILEE','DENNISE','DANIA','CARL','CARIE','ANTONIO','WAI','SANG','RISA','RIKKI','PARTICIA','MUI','MASAKO','MARIO','LUVENIA','LOREE','LONI','LIEN','KEVIN','GIGI','FLORENCIA','DORIAN','DENITA','DALLAS','CHI','BILLYE','ALEXANDER','TOMIKA','SHARITA','RANA','NIKOLE','NEOMA','MARGARITE','MADALYN','LUCINA','LAILA','KALI','JENETTE','GABRIELE','EVELYNE','ELENORA','CLEMENTINA','ALEJANDRINA','ZULEMA','VIOLETTE','VANNESSA','THRESA','RETTA','PIA','PATIENCE','NOELLA','NICKIE','JONELL','DELTA','CHUNG','CHAYA','CAMELIA','BETHEL','ANYA','ANDREW','THANH','SUZANN','SPRING','SHU','MILA','LILLA','LAVERNA','KEESHA','KATTIE','GIA','GEORGENE','EVELINE','ESTELL','ELIZBETH','VIVIENNE','VALLIE','TRUDIE','STEPHANE','MICHEL','MAGALY','MADIE','KENYETTA','KARREN','JANETTA','HERMINE','HARMONY','DRUCILLA','DEBBI','CELESTINA','CANDIE','BRITNI','BECKIE','AMINA','ZITA','YUN','YOLANDE','VIVIEN','VERNETTA','TRUDI','SOMMER','PEARLE','PATRINA','OSSIE','NICOLLE','LOYCE','LETTY','LARISA','KATHARINA','JOSELYN','JONELLE','JENELL','IESHA','HEIDE','FLORINDA','FLORENTINA','FLO','ELODIA','DORINE','BRUNILDA','BRIGID','ASHLI','ARDELLA','TWANA','THU','TARAH','SUNG','SHEA','SHAVON','SHANE','SERINA','RAYNA','RAMONITA','NGA','MARGURITE','LUCRECIA','KOURTNEY','KATI','JESUS','JESENIA','DIAMOND','CRISTA','AYANA','ALICA','ALIA','VINNIE','SUELLEN','ROMELIA','RACHELL','PIPER','OLYMPIA','MICHIKO','KATHALEEN','JOLIE','JESSI','JANESSA','HANA','HA','ELEASE','CARLETTA','BRITANY','SHONA','SALOME','ROSAMOND','REGENA','RAINA','NGOC','NELIA','LOUVENIA','LESIA','LATRINA','LATICIA','LARHONDA','JINA','JACKI','HOLLIS','HOLLEY','EMMY','DEEANN','CORETTA','ARNETTA','VELVET','THALIA','SHANICE','NETA','MIKKI','MICKI','LONNA','LEANA','LASHUNDA','KILEY','JOYE','JACQULYN','IGNACIA','HYUN','HIROKO','HENRY','HENRIETTE','ELAYNE','DELINDA','DARNELL','DAHLIA','COREEN','CONSUELA','CONCHITA','CELINE','BABETTE','AYANNA','ANETTE','ALBERTINA','SKYE','SHAWNEE','SHANEKA','QUIANA','PAMELIA','MIN','MERRI','MERLENE','MARGIT','KIESHA','KIERA','KAYLENE','JODEE','JENISE','ERLENE','EMMIE','ELSE','DARYL','DALILA','DAISEY','CODY','CASIE','BELIA','BABARA','VERSIE','VANESA','SHELBA','SHAWNDA','SAM','NORMAN','NIKIA','NAOMA','MARNA','MARGERET','MADALINE','LAWANA','KINDRA','JUTTA','JAZMINE','JANETT','HANNELORE','GLENDORA','GERTRUD','GARNETT','FREEDA','FREDERICA','FLORANCE','FLAVIA','DENNIS','CARLINE','BEVERLEE','ANJANETTE','VALDA','TRINITY','TAMALA','STEVIE','SHONNA','SHA','SARINA','ONEIDA','MICAH','MERILYN','MARLEEN','LURLINE','LENNA','KATHERIN','JIN','JENI','HAE','GRACIA','GLADY','FARAH','ERIC','ENOLA','EMA','DOMINQUE','DEVONA','DELANA','CECILA','CAPRICE','ALYSHA','ALI','ALETHIA','VENA','THERESIA','TAWNY','SONG','SHAKIRA','SAMARA','SACHIKO','RACHELE','PAMELLA','NICKY','MARNI','MARIEL','MAREN','MALISA','LIGIA','LERA','LATORIA','LARAE','KIMBER','KATHERN','KAREY','JENNEFER','JANETH','HALINA','FREDIA','DELISA','DEBROAH','CIERA','CHIN','ANGELIKA','ANDREE','ALTHA','YEN','VIVAN','TERRESA','TANNA','SUK','SUDIE','SOO','SIGNE','SALENA','RONNI','REBBECCA','MYRTIE','MCKENZIE','MALIKA','MAIDA','LOAN','LEONARDA','KAYLEIGH','FRANCE','ETHYL','ELLYN','DAYLE','CAMMIE','BRITTNI','BIRGIT','AVELINA','ASUNCION','ARIANNA','AKIKO','VENICE','TYESHA','TONIE','TIESHA','TAKISHA','STEFFANIE','SINDY','SANTANA','MEGHANN','MANDA','MACIE','LADY','KELLYE','KELLEE','JOSLYN','JASON','INGER','INDIRA','GLINDA','GLENNIS','FERNANDA','FAUSTINA','ENEIDA','ELICIA','DOT','DIGNA','DELL','ARLETTA','ANDRE','WILLIA','TAMMARA','TABETHA','SHERRELL','SARI','REFUGIO','REBBECA','PAULETTA','NIEVES','NATOSHA','NAKITA','MAMMIE','KENISHA','KAZUKO','KASSIE','GARY','EARLEAN','DAPHINE','CORLISS','CLOTILDE','CAROLYNE','BERNETTA','AUGUSTINA','AUDREA','ANNIS','ANNABELL','YAN','TENNILLE','TAMICA','SELENE','SEAN','ROSANA','REGENIA','QIANA','MARKITA','MACY','LEEANNE','LAURINE','KYM','JESSENIA','JANITA','GEORGINE','GENIE','EMIKO','ELVIE','DEANDRA','DAGMAR','CORIE','COLLEN','CHERISH','ROMAINE','PORSHA','PEARLENE','MICHELINE','MERNA','MARGORIE','MARGARETTA','LORE','KENNETH','JENINE','HERMINA','FREDERICKA','ELKE','DRUSILLA','DORATHY','DIONE','DESIRE','CELENA','BRIGIDA','ANGELES','ALLEGRA','THEO','TAMEKIA','SYNTHIA','STEPHEN','SOOK','SLYVIA','ROSANN','REATHA','RAYE','MARQUETTA','MARGART','LING','LAYLA','KYMBERLY','KIANA','KAYLEEN','KATLYN','KARMEN','JOELLA','IRINA','EMELDA','ELENI','DETRA','CLEMMIE','CHERYLL','CHANTELL','CATHEY','ARNITA','ARLA','ANGLE','ANGELIC','ALYSE','ZOFIA','THOMASINE','TENNIE','SON','SHERLY','SHERLEY','SHARYL','REMEDIOS','PETRINA','NICKOLE','MYUNG','MYRLE','MOZELLA','LOUANNE','LISHA','LATIA','LANE','KRYSTA','JULIENNE','JOEL','JEANENE','JACQUALINE','ISAURA','GWENDA','EARLEEN','DONALD','CLEOPATRA','CARLIE','AUDIE','ANTONIETTA','ALISE','ALEX','VERDELL','VAL','TYLER','TOMOKO','THAO','TALISHA','STEVEN','SO','SHEMIKA','SHAUN','SCARLET','SAVANNA','SANTINA','ROSIA','RAEANN','ODILIA','NANA','MINNA','MAGAN','LYNELLE','LE','KARMA','JOEANN','IVANA','INELL','ILANA','HYE','HONEY','HEE','GUDRUN','FRANK','DREAMA','CRISSY','CHANTE','CARMELINA','ARVILLA','ARTHUR','ANNAMAE','ALVERA','ALEIDA','AARON','YEE','YANIRA','VANDA','TIANNA','TAM','STEFANIA','SHIRA','PERRY','NICOL','NANCIE','MONSERRATE','MINH','MELYNDA','MELANY','MATTHEW','LOVELLA','LAURE','KIRBY','KACY','JACQUELYNN','HYON','GERTHA','FRANCISCO','ELIANA','CHRISTENA','CHRISTEEN','CHARISE','CATERINA','CARLEY','CANDYCE','ARLENA','AMMIE','YANG','WILLETTE','VANITA','TUYET','TINY','SYREETA','SILVA','SCOTT','RONALD','PENNEY','NYLA','MICHAL','MAURICE','MARYAM','MARYA','MAGEN','LUDIE','LOMA','LIVIA','LANELL','KIMBERLIE','JULEE','DONETTA','DIEDRA','DENISHA','DEANE','DAWNE','CLARINE','CHERRYL','BRONWYN','BRANDON','ALLA','VALERY','TONDA','SUEANN','SORAYA','SHOSHANA','SHELA','SHARLEEN','SHANELLE','NERISSA','MICHEAL','MERIDITH','MELLIE','MAYE','MAPLE','MAGARET','LUIS','LILI','LEONILA','LEONIE','LEEANNA','LAVONIA','LAVERA','KRISTEL','KATHEY','KATHE','JUSTIN','JULIAN','JIMMY','JANN','ILDA','HILDRED','HILDEGARDE','GENIA','FUMIKO','EVELIN','ERMELINDA','ELLY','DUNG','DOLORIS','DIONNA','DANAE','BERNEICE','ANNICE','ALIX','VERENA','VERDIE','TRISTAN','SHAWNNA','SHAWANA','SHAUNNA','ROZELLA','RANDEE','RANAE','MILAGRO','LYNELL','LUISE','LOUIE','LOIDA','LISBETH','KARLEEN','JUNITA','JONA','ISIS','HYACINTH','HEDY','GWENN','ETHELENE','ERLINE','EDWARD','DONYA','DOMONIQUE','DELICIA','DANNETTE','CICELY','BRANDA','BLYTHE','BETHANN','ASHLYN','ANNALEE','ALLINE','YUKO','VELLA','TRANG','TOWANDA','TESHA','SHERLYN','NARCISA','MIGUELINA','MERI','MAYBELL','MARLANA','MARGUERITA','MADLYN','LUNA','LORY','LORIANN','LIBERTY','LEONORE','LEIGHANN','LAURICE','LATESHA','LARONDA','KATRICE','KASIE','KARL','KALEY','JADWIGA','GLENNIE','GEARLDINE','FRANCINA','EPIFANIA','DYAN','DORIE','DIEDRE','DENESE','DEMETRICE','DELENA','DARBY','CRISTIE','CLEORA','CATARINA','CARISA','BERNIE','BARBERA','ALMETA','TRULA','TEREASA','SOLANGE','SHEILAH','SHAVONNE','SANORA','ROCHELL','MATHILDE','MARGARETA','MAIA','LYNSEY','LAWANNA','LAUNA','KENA','KEENA','KATIA','JAMEY','GLYNDA','GAYLENE','ELVINA','ELANOR','DANUTA','DANIKA','CRISTEN','CORDIE','COLETTA','CLARITA','CARMON','BRYNN','AZUCENA','AUNDREA','ANGELE','YI','WALTER','VERLIE','VERLENE','TAMESHA','SILVANA','SEBRINA','SAMIRA','REDA','RAYLENE','PENNI','PANDORA','NORAH','NOMA','MIREILLE','MELISSIA','MARYALICE','LARAINE','KIMBERY','KARYL','KARINE','KAM','JOLANDA','JOHANA','JESUSA','JALEESA','JAE','JACQUELYNE','IRISH','ILUMINADA','HILARIA','HANH','GENNIE','FRANCIE','FLORETTA','EXIE','EDDA','DREMA','DELPHA','BEV','BARBAR','ASSUNTA','ARDELL','ANNALISA','ALISIA','YUKIKO','YOLANDO','WONDA','WEI','WALTRAUD','VETA','TEQUILA','TEMEKA','TAMEIKA','SHIRLEEN','SHENITA','PIEDAD','OZELLA','MIRTHA','MARILU','KIMIKO','JULIANE','JENICE','JEN','JANAY','JACQUILINE','HILDE','FE','FAE','EVAN','EUGENE','ELOIS','ECHO','DEVORAH','CHAU','BRINDA','BETSEY','ARMINDA','ARACELIS','APRYL','ANNETT','ALISHIA','VEOLA','USHA','TOSHIKO','THEOLA','TASHIA','TALITHA','SHERY','RUDY','RENETTA','REIKO','RASHEEDA','OMEGA','OBDULIA','MIKA','MELAINE','MEGGAN','MARTIN','MARLEN','MARGET','MARCELINE','MANA','MAGDALEN','LIBRADA','LEZLIE','LEXIE','LATASHIA','LASANDRA','KELLE','ISIDRA','ISA','INOCENCIA','GWYN','FRANCOISE','ERMINIA','ERINN','DIMPLE','DEVORA','CRISELDA','ARMANDA','ARIE','ARIANE','ANGELO','ANGELENA','ALLEN','ALIZA','ADRIENE','ADALINE','XOCHITL','TWANNA','TRAN','TOMIKO','TAMISHA','TAISHA','SUSY','SIU','RUTHA','ROXY','RHONA','RAYMOND','OTHA','NORIKO','NATASHIA','MERRIE','MELVIN','MARINDA','MARIKO','MARGERT','LORIS','LIZZETTE','LEISHA','KAILA','KA','JOANNIE','JERRICA','JENE','JANNET','JANEE','JACINDA','HERTA','ELENORE','DORETTA','DELAINE','DANIELL','CLAUDIE','CHINA','BRITTA','APOLONIA','AMBERLY','ALEASE','YURI','YUK','WEN','WANETA','UTE','TOMI','SHARRI','SANDIE','ROSELLE','REYNALDA','RAGUEL','PHYLICIA','PATRIA','OLIMPIA','ODELIA','MITZIE','MITCHELL','MISS','MINDA','MIGNON','MICA','MENDY','MARIVEL','MAILE','LYNETTA','LAVETTE','LAURYN','LATRISHA','LAKIESHA','KIERSTEN','KARY','JOSPHINE','JOLYN','JETTA','JANISE','JACQUIE','IVELISSE','GLYNIS','GIANNA','GAYNELLE','EMERALD','DEMETRIUS','DANYELL','DANILLE','DACIA','CORALEE','CHER','CEOLA','BRETT','BELL','ARIANNE','ALESHIA','YUNG','WILLIEMAE','TROY','TRINH','THORA','TAI','SVETLANA','SHERIKA','SHEMEKA','SHAUNDA','ROSELINE','RICKI','MELDA','MALLIE','LAVONNA','LATINA','LARRY','LAQUANDA','LALA','LACHELLE','KLARA','KANDIS','JOHNA','JEANMARIE','JAYE','HANG','GRAYCE','GERTUDE','EMERITA','EBONIE','CLORINDA','CHING','CHERY','CAROLA','BREANN','BLOSSOM','BERNARDINE','BECKI','ARLETHA','ARGELIA','ARA','ALITA','YULANDA','YON','YESSENIA','TOBI','TASIA','SYLVIE','SHIRL','SHIRELY','SHERIDAN','SHELLA','SHANTELLE','SACHA','ROYCE','REBECKA','REAGAN','PROVIDENCIA','PAULENE','MISHA','MIKI','MARLINE','MARICA','LORITA','LATOYIA','LASONYA','KERSTIN','KENDA','KEITHA','KATHRIN','JAYMIE','JACK','GRICELDA','GINETTE','ERYN','ELINA','ELFRIEDA','DANYEL','CHEREE','CHANELLE','BARRIE','AVERY','AURORE','ANNAMARIA','ALLEEN','AILENE','AIDE','YASMINE','VASHTI','VALENTINE','TREASA','TORY','TIFFANEY','SHERYLL','SHARIE','SHANAE','SAU','RAISA','PA','NEDA','MITSUKO','MIRELLA','MILDA','MARYANNA','MARAGRET','MABELLE','LUETTA','LORINA','LETISHA','LATARSHA','LANELLE','LAJUANA','KRISSY','KARLY','KARENA','JON','JESSIKA','JERICA','JEANELLE','JANUARY','JALISA','JACELYN','IZOLA','IVEY','GREGORY','EUNA','ETHA','DREW','DOMITILA','DOMINICA','DAINA','CREOLA','CARLI','CAMIE','BUNNY','BRITTNY','ASHANTI','ANISHA','ALEEN','ADAH','YASUKO','WINTER','VIKI','VALRIE','TONA','TINISHA','THI','TERISA','TATUM','TANEKA','SIMONNE','SHALANDA','SERITA','RESSIE','REFUGIA','PAZ','OLENE','NA','MERRILL','MARGHERITA','MANDIE','MAN','MAIRE','LYNDIA','LUCI','LORRIANE','LORETA','LEONIA','LAVONA','LASHAWNDA','LAKIA','KYOKO','KRYSTINA','KRYSTEN','KENIA','KELSI','JUDE','JEANICE','ISOBEL','GEORGIANN','GENNY','FELICIDAD','EILENE','DEON','DELOISE','DEEDEE','DANNIE','CONCEPTION','CLORA','CHERILYN','CHANG','CALANDRA','BERRY','ARMANDINA','ANISA','ULA','TIMOTHY','TIERA','THERESSA','STEPHANIA','SIMA','SHYLA','SHONTA','SHERA','SHAQUITA','SHALA','SAMMY','ROSSANA','NOHEMI','NERY','MORIAH','MELITA','MELIDA','MELANI','MARYLYNN','MARISHA','MARIETTE','MALORIE','MADELENE','LUDIVINA','LORIA','LORETTE','LORALEE','LIANNE','LEON','LAVENIA','LAURINDA','LASHON','KIT','KIMI','KEILA','KATELYNN','KAI','JONE','JOANE','JI','JAYNA','JANELLA','JA','HUE','HERTHA','FRANCENE','ELINORE','DESPINA','DELSIE','DEEDRA','CLEMENCIA','CARRY','CAROLIN','CARLOS','BULAH','BRITTANIE','BOK','BLONDELL','BIBI','BEAULAH','BEATA','ANNITA','AGRIPINA','VIRGEN','VALENE','UN','TWANDA','TOMMYE','TOI','TARRA','TARI','TAMMERA','SHAKIA','SADYE','RUTHANNE','ROCHEL','RIVKA','PURA','NENITA','NATISHA','MING','MERRILEE','MELODEE','MARVIS','LUCILLA','LEENA','LAVETA','LARITA','LANIE','KEREN','ILEEN','GEORGEANN','GENNA','GENESIS','FRIDA','EWA','EUFEMIA','EMELY','ELA','EDYTH','DEONNA','DEADRA','DARLENA','CHANELL','CHAN','CATHERN','CASSONDRA','CASSAUNDRA','BERNARDA','BERNA','ARLINDA','ANAMARIA','ALBERT','WESLEY','VERTIE','VALERI','TORRI','TATYANA','STASIA','SHERISE','SHERILL','SEASON','SCOTTIE','SANDA','RUTHE','ROSY','ROBERTO','ROBBI','RANEE','QUYEN','PEARLY','PALMIRA','ONITA','NISHA','NIESHA','NIDA','NEVADA','NAM','MERLYN','MAYOLA','MARYLOUISE','MARYLAND','MARX','MARTH','MARGENE','MADELAINE','LONDA','LEONTINE','LEOMA','LEIA','LAWRENCE','LAURALEE','LANORA','LAKITA','KIYOKO','KETURAH','KATELIN','KAREEN','JONIE','JOHNETTE','JENEE','JEANETT','IZETTA','HIEDI','HEIKE','HASSIE','HAROLD','GIUSEPPINA','GEORGANN','FIDELA','FERNANDE','ELWANDA','ELLAMAE','ELIZ','DUSTI','DOTTY','CYNDY','CORALIE','CELESTA','ARGENTINA','ALVERTA','XENIA','WAVA','VANETTA','TORRIE','TASHINA','TANDY','TAMBRA','TAMA','STEPANIE','SHILA','SHAUNTA','SHARAN','SHANIQUA','SHAE','SETSUKO','SERAFINA','SANDEE','ROSAMARIA','PRISCILA','OLINDA','NADENE','MUOI','MICHELINA','MERCEDEZ','MARYROSE','MARIN','MARCENE','MAO','MAGALI','MAFALDA','LOGAN','LINN','LANNIE','KAYCE','KAROLINE','KAMILAH','KAMALA','JUSTA','JOLINE','JENNINE','JACQUETTA','IRAIDA','GERALD','GEORGEANNA','FRANCHESCA','FAIRY','EMELINE','ELANE','EHTEL','EARLIE','DULCIE','DALENE','CRIS','CLASSIE','CHERE','CHARIS','CAROYLN','CARMINA','CARITA','BRIAN','BETHANIE','AYAKO','ARICA','AN','ALYSA','ALESSANDRA','AKILAH','ADRIEN','ZETTA','YOULANDA','YELENA','YAHAIRA','XUAN','WENDOLYN','VICTOR','TIJUANA','TERRELL','TERINA','TERESIA','SUZI','SUNDAY','SHERELL','SHAVONDA','SHAUNTE','SHARDA','SHAKITA','SENA','RYANN','RUBI','RIVA','REGINIA','REA','RACHAL','PARTHENIA','PAMULA','MONNIE','MONET','MICHAELE','MELIA','MARINE','MALKA','MAISHA','LISANDRA','LEO','LEKISHA','LEAN','LAURENCE','LAKENDRA','KRYSTIN','KORTNEY','KIZZIE','KITTIE','KERA','KENDAL','KEMBERLY','KANISHA','JULENE','JULE','JOSHUA','JOHANNE','JEFFREY','JAMEE','HAN','HALLEY','GIDGET','GALINA','FREDRICKA','FLETA','FATIMAH','EUSEBIA','ELZA','ELEONORE','DORTHEY','DORIA','DONELLA','DINORAH','DELORSE','CLARETHA','CHRISTINIA','CHARLYN','BONG','BELKIS','AZZIE','ANDERA','AIKO','ADENA','YER','YAJAIRA','WAN','VANIA','ULRIKE','TOSHIA','TIFANY','STEFANY','SHIZUE','SHENIKA','SHAWANNA','SHAROLYN','SHARILYN','SHAQUANA','SHANTAY','SEE','ROZANNE','ROSELEE','RICKIE','REMONA','REANNA','RAELENE','QUINN','PHUNG','PETRONILA','NATACHA','NANCEY','MYRL','MIYOKO','MIESHA','MERIDETH','MARVELLA','MARQUITTA','MARHTA','MARCHELLE','LIZETH','LIBBIE','LAHOMA','LADAWN','KINA','KATHELEEN','KATHARYN','KARISA','KALEIGH','JUNIE','JULIEANN','JOHNSIE','JANEAN','JAIMEE','JACKQUELINE','HISAKO','HERMA','HELAINE','GWYNETH','GLENN','GITA','EUSTOLIA','EMELINA','ELIN','EDRIS','DONNETTE','DONNETTA','DIERDRE','DENAE','DARCEL','CLAUDE','CLARISA','CINDERELLA','CHIA','CHARLESETTA','CHARITA','CELSA','CASSY','CASSI','CARLEE','BRUNA','BRITTANEY','BRANDE','BILLI','BAO','ANTONETTA','ANGLA','ANGELYN','ANALISA','ALANE','WENONA','WENDIE','VERONIQUE','VANNESA','TOBIE','TEMPIE','SUMIKO','SULEMA','SPARKLE','SOMER','SHEBA','SHAYNE','SHARICE','SHANEL','SHALON','SAGE','ROY','ROSIO','ROSELIA','RENAY','REMA','REENA','PORSCHE','PING','PEG','OZIE','ORETHA','ORALEE','ODA','NU','NGAN','NAKESHA','MILLY','MARYBELLE','MARLIN','MARIS','MARGRETT','MARAGARET','MANIE','LURLENE','LILLIA','LIESELOTTE','LAVELLE','LASHAUNDA','LAKEESHA','KEITH','KAYCEE','KALYN','JOYA','JOETTE','JENAE','JANIECE','ILLA','GRISEL','GLAYDS','GENEVIE','GALA','FREDDA','FRED','ELMER','ELEONOR','DEBERA','DEANDREA','DAN','CORRINNE','CORDIA','CONTESSA','COLENE','CLEOTILDE','CHARLOTT','CHANTAY','CECILLE','BEATRIS','AZALEE','ARLEAN','ARDATH','ANJELICA','ANJA','ALFREDIA','ALEISHA','ADAM','ZADA','YUONNE','XIAO','WILLODEAN','WHITLEY','VENNIE','VANNA','TYISHA','TOVA','TORIE','TONISHA','TILDA','TIEN','TEMPLE','SIRENA','SHERRIL','SHANTI','SHAN','SENAIDA','SAMELLA','ROBBYN','RENDA','REITA','PHEBE','PAULITA','NOBUKO','NGUYET','NEOMI','MOON','MIKAELA','MELANIA','MAXIMINA','MARG','MAISIE','LYNNA','LILLI','LAYNE','LASHAUN','LAKENYA','LAEL','KIRSTIE','KATHLINE','KASHA','KARLYN','KARIMA','JOVAN','JOSEFINE','JENNELL','JACQUI','JACKELYN','HYO','HIEN','GRAZYNA','FLORRIE','FLORIA','ELEONORA','DWANA','DORLA','DONG','DELMY','DEJA','DEDE','DANN','CRYSTA','CLELIA','CLARIS','CLARENCE','CHIEKO','CHERLYN','CHERELLE','CHARMAIN','CHARA','CAMMY','BEE','ARNETTE','ARDELLE','ANNIKA','AMIEE','AMEE','ALLENA','YVONE','YUKI','YOSHIE','YEVETTE','YAEL','WILLETTA','VONCILE','VENETTA','TULA','TONETTE','TIMIKA','TEMIKA','TELMA','TEISHA','TAREN','TA','STACEE','SHIN','SHAWNTA','SATURNINA','RICARDA','POK','PASTY','ONIE','NUBIA','MORA','MIKE','MARIELLE','MARIELLA','MARIANELA','MARDELL','MANY','LUANNA','LOISE','LISABETH','LINDSY','LILLIANA','LILLIAM','LELAH','LEIGHA','LEANORA','LANG','KRISTEEN','KHALILAH','KEELEY','KANDRA','JUNKO','JOAQUINA','JERLENE','JANI','JAMIKA','JAME','HSIU','HERMILA','GOLDEN','GENEVIVE','EVIA','EUGENA','EMMALINE','ELFREDA','ELENE','DONETTE','DELCIE','DEEANNA','DARCEY','CUC','CLARINDA','CIRA','CHAE','CELINDA','CATHERYN','CATHERIN','CASIMIRA','CARMELIA','CAMELLIA','BREANA','BOBETTE','BERNARDINA','BEBE','BASILIA','ARLYNE','AMAL','ALAYNA','ZONIA','ZENIA','YURIKO','YAEKO','WYNELL','WILLOW','WILLENA','VERNIA','TU','TRAVIS','TORA','TERRILYN','TERICA','TENESHA','TAWNA','TAJUANA','TAINA','STEPHNIE','SONA','SOL','SINA','SHONDRA','SHIZUKO','SHERLENE','SHERICE','SHARIKA','ROSSIE','ROSENA','RORY','RIMA','RIA','RHEBA','RENNA','PETER','NATALYA','NANCEE','MELODI','MEDA','MAXIMA','MATHA','MARKETTA','MARICRUZ','MARCELENE','MALVINA','LUBA','LOUETTA','LEIDA','LECIA','LAURAN','LASHAWNA','LAINE','KHADIJAH','KATERINE','KASI','KALLIE','JULIETTA','JESUSITA','JESTINE','JESSIA','JEREMY','JEFFIE','JANYCE','ISADORA','GEORGIANNE','FIDELIA','EVITA','EURA','EULAH','ESTEFANA','ELSY','ELIZABET','ELADIA','DODIE','DION','DIA','DENISSE','DELORAS','DELILA','DAYSI','DAKOTA','CURTIS','CRYSTLE','CONCHA','COLBY','CLARETTA','CHU','CHRISTIA','CHARLSIE','CHARLENA','CARYLON','BETTYANN','ASLEY','ASHLEA','AMIRA','AI','AGUEDA','AGNUS','YUETTE','VINITA','VICTORINA','TYNISHA','TREENA','TOCCARA','TISH','THOMASENA','TEGAN','SOILA','SHILOH','SHENNA','SHARMAINE','SHANTAE','SHANDI','SEPTEMBER','SARAN','SARAI','SANA','SAMUEL','SALLEY','ROSETTE','ROLANDE','REGINE','OTELIA','OSCAR','OLEVIA','NICHOLLE','NECOLE','NAIDA','MYRTA','MYESHA','MITSUE','MINTA','MERTIE','MARGY','MAHALIA','MADALENE','LOVE','LOURA','LOREAN','LEWIS','LESHA','LEONIDA','LENITA','LAVONE','LASHELL','LASHANDRA','LAMONICA','KIMBRA','KATHERINA','KARRY','KANESHA','JULIO','JONG','JENEVA','JAQUELYN','HWA','GILMA','GHISLAINE','GERTRUDIS','FRANSISCA','FERMINA','ETTIE','ETSUKO','ELLIS','ELLAN','ELIDIA','EDRA','DORETHEA','DOREATHA','DENYSE','DENNY','DEETTA','DAINE','CYRSTAL','CORRIN','CAYLA','CARLITA','CAMILA','BURMA','BULA','BUENA','BLAKE','BARABARA','AVRIL','AUSTIN','ALAINE','ZANA','WILHEMINA','WANETTA','VIRGIL','VI','VERONIKA','VERNON','VERLINE','VASILIKI','TONITA','TISA','TEOFILA','TAYNA','TAUNYA','TANDRA','TAKAKO','SUNNI','SUANNE','SIXTA','SHARELL','SEEMA','RUSSELL','ROSENDA','ROBENA','RAYMONDE','PEI','PAMILA','OZELL','NEIDA','NEELY','MISTIE','MICHA','MERISSA','MAURITA','MARYLN','MARYETTA','MARSHALL','MARCELL','MALENA','MAKEDA','MADDIE','LOVETTA','LOURIE','LORRINE','LORILEE','LESTER','LAURENA','LASHAY','LARRAINE','LAREE','LACRESHA','KRISTLE','KRISHNA','KEVA','KEIRA','KAROLE','JOIE','JINNY','JEANNETTA','JAMA','HEIDY','GILBERTE','GEMA','FAVIOLA','EVELYNN','ENDA','ELLI','ELLENA','DIVINA','DAGNY','COLLENE','CODI','CINDIE','CHASSIDY','CHASIDY','CATRICE','CATHERINA','CASSEY','CAROLL','CARLENA','CANDRA','CALISTA','BRYANNA','BRITTENY','BEULA','BARI','AUDRIE','AUDRIA','ARDELIA','ANNELLE','ANGILA','ALONA','ALLYN','DOUGLAS','ROGER','JONATHAN','RALPH','NICHOLAS','BENJAMIN','BRUCE','HARRY','WAYNE','STEVE','HOWARD','ERNEST','PHILLIP','TODD','CRAIG','ALAN','PHILIP','EARL','DANNY','BRYAN','STANLEY','LEONARD','NATHAN','MANUEL','RODNEY','MARVIN','VINCENT','JEFFERY','JEFF','CHAD','JACOB','ALFRED','BRADLEY','HERBERT','FREDERICK','EDWIN','DON','RICKY','RANDALL','BARRY','BERNARD','LEROY','MARCUS','THEODORE','CLIFFORD','MIGUEL','JIM','TOM','CALVIN','BILL','LLOYD','DEREK','WARREN','DARRELL','JEROME','FLOYD','ALVIN','TIM','GORDON','GREG','JORGE','DUSTIN','PEDRO','DERRICK','ZACHARY','HERMAN','GLEN','HECTOR','RICARDO','RICK','BRENT','RAMON','GILBERT','MARC','REGINALD','RUBEN','NATHANIEL','RAFAEL','EDGAR','MILTON','RAUL','BEN','CHESTER','DUANE','FRANKLIN','BRAD','RON','ROLAND','ARNOLD','HARVEY','JARED','ERIK','DARRYL','NEIL','JAVIER','FERNANDO','CLINTON','TED','MATHEW','TYRONE','DARREN','LANCE','KURT','ALLAN','NELSON','GUY','CLAYTON','HUGH','MAX','DWAYNE','DWIGHT','ARMANDO','FELIX','EVERETT','IAN','WALLACE','KEN','BOB','ALFREDO','ALBERTO','DAVE','IVAN','BYRON','ISAAC','MORRIS','CLIFTON','WILLARD','ROSS','ANDY','SALVADOR','KIRK','SERGIO','SETH','KENT','TERRANCE','EDUARDO','TERRENCE','ENRIQUE','WADE','STUART','FREDRICK','ARTURO','ALEJANDRO','NICK','LUTHER','WENDELL','JEREMIAH','JULIUS','OTIS','TREVOR','OLIVER','LUKE','HOMER','GERARD','DOUG','KENNY','HUBERT','LYLE','MATT','ALFONSO','ORLANDO','REX','CARLTON','ERNESTO','NEAL','PABLO','LORENZO','OMAR','WILBUR','GRANT','HORACE','RODERICK','ABRAHAM','WILLIS','RICKEY','ANDRES','CESAR','JOHNATHAN','MALCOLM','RUDOLPH','DAMON','KELVIN','PRESTON','ALTON','ARCHIE','MARCO','WM','PETE','RANDOLPH','GARRY','GEOFFREY','JONATHON','FELIPE','GERARDO','ED','DOMINIC','DELBERT','COLIN','GUILLERMO','EARNEST','LUCAS','BENNY','SPENCER','RODOLFO','MYRON','EDMUND','GARRETT','SALVATORE','CEDRIC','LOWELL','GREGG','SHERMAN','WILSON','SYLVESTER','ROOSEVELT','ISRAEL','JERMAINE','FORREST','WILBERT','LELAND','SIMON','CLARK','IRVING','BRYANT','OWEN','RUFUS','WOODROW','KRISTOPHER','MACK','LEVI','MARCOS','GUSTAVO','JAKE','LIONEL','GILBERTO','CLINT','NICOLAS','ISMAEL','ORVILLE','ERVIN','DEWEY','AL','WILFRED','JOSH','HUGO','IGNACIO','CALEB','TOMAS','SHELDON','ERICK','STEWART','DOYLE','DARREL','ROGELIO','TERENCE','SANTIAGO','ALONZO','ELIAS','BERT','ELBERT','RAMIRO','CONRAD','NOAH','GRADY','PHIL','CORNELIUS','LAMAR','ROLANDO','CLAY','PERCY','DEXTER','BRADFORD','DARIN','AMOS','MOSES','IRVIN','SAUL','ROMAN','RANDAL','TIMMY','DARRIN','WINSTON','BRENDAN','ABEL','DOMINICK','BOYD','EMILIO','ELIJAH','DOMINGO','EMMETT','MARLON','EMANUEL','JERALD','EDMOND','EMIL','DEWAYNE','WILL','OTTO','TEDDY','REYNALDO','BRET','JESS','TRENT','HUMBERTO','EMMANUEL','STEPHAN','VICENTE','LAMONT','GARLAND','MILES','EFRAIN','HEATH','RODGER','HARLEY','ETHAN','ELDON','ROCKY','PIERRE','JUNIOR','FREDDY','ELI','BRYCE','ANTOINE','STERLING','CHASE','GROVER','ELTON','CLEVELAND','DYLAN','CHUCK','DAMIAN','REUBEN','STAN','AUGUST','LEONARDO','JASPER','RUSSEL','ERWIN','BENITO','HANS','MONTE','BLAINE','ERNIE','CURT','QUENTIN','AGUSTIN','MURRAY','JAMAL','ADOLFO','HARRISON','TYSON','BURTON','BRADY','ELLIOTT','WILFREDO','BART','JARROD','VANCE','DENIS','DAMIEN','JOAQUIN','HARLAN','DESMOND','ELLIOT','DARWIN','GREGORIO','BUDDY','XAVIER','KERMIT','ROSCOE','ESTEBAN','ANTON','SOLOMON','SCOTTY','NORBERT','ELVIN','WILLIAMS','NOLAN','ROD','QUINTON','HAL','BRAIN','ROB','ELWOOD','KENDRICK','DARIUS','MOISES','FIDEL','THADDEUS','CLIFF','MARCEL','JACKSON','RAPHAEL','BRYON','ARMAND','ALVARO','JEFFRY','DANE','JOESPH','THURMAN','NED','RUSTY','MONTY','FABIAN','REGGIE','MASON','GRAHAM','ISAIAH','VAUGHN','GUS','LOYD','DIEGO','ADOLPH','NORRIS','MILLARD','ROCCO','GONZALO','DERICK','RODRIGO','WILEY','RIGOBERTO','ALPHONSO','TY','NOE','VERN','REED','JEFFERSON','ELVIS','BERNARDO','MAURICIO','HIRAM','DONOVAN','BASIL','RILEY','NICKOLAS','MAYNARD','SCOT','VINCE','QUINCY','EDDY','SEBASTIAN','FEDERICO','ULYSSES','HERIBERTO','DONNELL','COLE','DAVIS','GAVIN','EMERY','WARD','ROMEO','JAYSON','DANTE','CLEMENT','COY','MAXWELL','JARVIS','BRUNO','ISSAC','DUDLEY','BROCK','SANFORD','CARMELO','BARNEY','NESTOR','STEFAN','DONNY','ART','LINWOOD','BEAU','WELDON','GALEN','ISIDRO','TRUMAN','DELMAR','JOHNATHON','SILAS','FREDERIC','DICK','IRWIN','MERLIN','CHARLEY','MARCELINO','HARRIS','CARLO','TRENTON','KURTIS','HUNTER','AURELIO','WINFRED','VITO','COLLIN','DENVER','CARTER','LEONEL','EMORY','PASQUALE','MOHAMMAD','MARIANO','DANIAL','LANDON','DIRK','BRANDEN','ADAN','BUFORD','GERMAN','WILMER','EMERSON','ZACHERY','FLETCHER','JACQUES','ERROL','DALTON','MONROE','JOSUE','EDWARDO','BOOKER','WILFORD','SONNY','SHELTON','CARSON','THERON','RAYMUNDO','DAREN','HOUSTON','ROBBY','LINCOLN','GENARO','BENNETT','OCTAVIO','CORNELL','HUNG','ARRON','ANTONY','HERSCHEL','GIOVANNI','GARTH','CYRUS','CYRIL','RONNY','LON','FREEMAN','DUNCAN','KENNITH','CARMINE','ERICH','CHADWICK','WILBURN','RUSS','REID','MYLES','ANDERSON','MORTON','JONAS','FOREST','MITCHEL','MERVIN','ZANE','RICH','JAMEL','LAZARO','ALPHONSE','RANDELL','MAJOR','JARRETT','BROOKS','ABDUL','LUCIANO','SEYMOUR','EUGENIO','MOHAMMED','VALENTIN','CHANCE','ARNULFO','LUCIEN','FERDINAND','THAD','EZRA','ALDO','RUBIN','ROYAL','MITCH','EARLE','ABE','WYATT','MARQUIS','LANNY','KAREEM','JAMAR','BORIS','ISIAH','EMILE','ELMO','ARON','LEOPOLDO','EVERETTE','JOSEF','ELOY','RODRICK','REINALDO','LUCIO','JERROD','WESTON','HERSHEL','BARTON','PARKER','LEMUEL','BURT','JULES','GIL','ELISEO','AHMAD','NIGEL','EFREN','ANTWAN','ALDEN','MARGARITO','COLEMAN','DINO','OSVALDO','LES','DEANDRE','NORMAND','KIETH','TREY','NORBERTO','NAPOLEON','JEROLD','FRITZ','ROSENDO','MILFORD','CHRISTOPER','ALFONZO','LYMAN','JOSIAH','BRANT','WILTON','RICO','JAMAAL','DEWITT','BRENTON','OLIN','FOSTER','FAUSTINO','CLAUDIO','JUDSON','GINO','EDGARDO','ALEC','TANNER','JARRED','DONN','TAD','PRINCE','PORFIRIO','ODIS','LENARD','CHAUNCEY','TOD','MEL','MARCELO','KORY','AUGUSTUS','KEVEN','HILARIO','BUD','SAL','ORVAL','MAURO','ZACHARIAH','OLEN','ANIBAL','MILO','JED','DILLON','AMADO','NEWTON','LENNY','RICHIE','HORACIO','BRICE','MOHAMED','DELMER','DARIO','REYES','MAC','JONAH','JERROLD','ROBT','HANK','RUPERT','ROLLAND','KENTON','DAMION','ANTONE','WALDO','FREDRIC','BRADLY','KIP','BURL','WALKER','TYREE','JEFFEREY','AHMED','WILLY','STANFORD','OREN','NOBLE','MOSHE','MIKEL','ENOCH','BRENDON','QUINTIN','JAMISON','FLORENCIO','DARRICK','TOBIAS','HASSAN','GIUSEPPE','DEMARCUS','CLETUS','TYRELL','LYNDON','KEENAN','WERNER','GERALDO','COLUMBUS','CHET','BERTRAM','MARKUS','HUEY','HILTON','DWAIN','DONTE','TYRON','OMER','ISAIAS','HIPOLITO','FERMIN','ADALBERTO','BO','BARRETT','TEODORO','MCKINLEY','MAXIMO','GARFIELD','RALEIGH','LAWERENCE','ABRAM','RASHAD','KING','EMMITT','DARON','SAMUAL','MIQUEL','EUSEBIO','DOMENIC','DARRON','BUSTER','WILBER','RENATO','JC','HOYT','HAYWOOD','EZEKIEL','CHAS','FLORENTINO','ELROY','CLEMENTE','ARDEN','NEVILLE','EDISON','DESHAWN','NATHANIAL','JORDON','DANILO','CLAUD','SHERWOOD','RAYMON','RAYFORD','CRISTOBAL','AMBROSE','TITUS','HYMAN','FELTON','EZEQUIEL','ERASMO','STANTON','LONNY','LEN','IKE','MILAN','LINO','JAROD','HERB','ANDREAS','WALTON','RHETT','PALMER','DOUGLASS','CORDELL','OSWALDO','ELLSWORTH','VIRGILIO','TONEY','NATHANAEL','DEL','BENEDICT','MOSE','JOHNSON','ISREAL','GARRET','FAUSTO','ASA','ARLEN','ZACK','WARNER','MODESTO','FRANCESCO','MANUAL','GAYLORD','GASTON','FILIBERTO','DEANGELO','MICHALE','GRANVILLE','WES','MALIK','ZACKARY','TUAN','ELDRIDGE','CRISTOPHER','CORTEZ','ANTIONE','MALCOM','LONG','KOREY','JOSPEH','COLTON','WAYLON','VON','HOSEA','SHAD','SANTO','RUDOLF','ROLF','REY','RENALDO','MARCELLUS','LUCIUS','KRISTOFER','BOYCE','BENTON','HAYDEN','HARLAND','ARNOLDO','RUEBEN','LEANDRO','KRAIG','JERRELL','JEROMY','HOBERT','CEDRICK','ARLIE','WINFORD','WALLY','LUIGI','KENETH','JACINTO','GRAIG','FRANKLYN','EDMUNDO','SID','PORTER','LEIF','JERAMY','BUCK','WILLIAN','VINCENZO','SHON','LYNWOOD','JERE','HAI','ELDEN','DORSEY','DARELL','BRODERICK','ALONSO'];
+```
+
+## --seed-contents--
+
+```js
+function namesScores(arr) {
+
+  return arr;
+}
+
+// Only change code above this line
+const test1 = ['THIS', 'IS', 'ONLY', 'A', 'TEST'];
+const test2 = ['I', 'REPEAT', 'THIS', 'IS', 'ONLY', 'A', 'TEST'];
+
+namesScores(test1);
+```
+
+# --solutions--
+
+```js
+function nameScoreCalc(word) {
+  let sum = 0;
+  let alphabets = ["", "a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "r", "s", "t", "u", "v", "w", "x", "y", "z"];
+
+  for (let i = 0 ; i < word.length; i++)
+    sum += alphabets.indexOf(word[i].toLowerCase());
+  return sum;
+}
+
+function namesScores(arr) {
+  arr = [...arr].sort();
+  arr.unshift('');
+  let total = 0;
+
+  for (let i = 1 ; i < arr.length; i++)
+    total += nameScoreCalc(arr[i]) * i;
+  return total;
+}
+
+const test1 = ['THIS', 'IS', 'ONLY', 'A', 'TEST'];
+const test2 = ['I', 'REPEAT', 'THIS', 'IS', 'ONLY', 'A', 'TEST'];
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-220-heighway-dragon.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-220-heighway-dragon.md
new file mode 100644
index 00000000000..e58e3c3f3ec
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-220-heighway-dragon.md
@@ -0,0 +1,57 @@
+---
+id: 5900f4481000cf542c50ff5b
+title: 'Problem 220: Heighway Dragon'
+challengeType: 1
+forumTopicId: 301863
+dashedName: problem-220-heighway-dragon
+---
+
+# --description--
+
+Let $D_0$ be the two-letter string "Fa". For $n ≥ 1$, derive $D_n$ from $D_{n - 1}$ by the string-rewriting rules:
+
+- "a" → "aRbFR"
+- "b" → "LFaLb"
+
+Thus, $D_0$ = "Fa", $D_1$ = "FaRbFR", $D_2$ = "FaRbFRRLFaLbFR", and so on.
+
+These strings can be interpreted as instructions to a computer graphics program, with "F" meaning "draw forward one unit", "L" meaning "turn left 90 degrees", "R" meaning "turn right 90 degrees", and "a" and "b" being ignored. The initial position of the computer cursor is (0,0), pointing up towards (0,1).
+
+Then $D_n$ is an exotic drawing known as the Heighway Dragon of order $n$. For example, $D_{10}$ is shown below; counting each "F" as one step, the highlighted spot at (18,16) is the position reached after 500 steps.
+
+<img class="img-responsive center-block" alt="drawing of the Heighway Dragon after 500 steps" src="https://cdn.freecodecamp.org/curriculum/project-euler/heighway-dragon.gif" style="background-color: white; padding: 10px;" />
+
+What is the position of the cursor after ${10}^{12}$ steps in $D_{50}$? Give your answer as a string in the form `x,y` with no spaces.
+
+# --hints--
+
+`heighwayDragon()` should return a string.
+
+```js
+assert(typeof heighwayDragon() === 'string');
+```
+
+`heighwayDragon()` should return the string `139776,963904`.
+
+```js
+assert.strictEqual(heighwayDragon(), '139776,963904');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function heighwayDragon() {
+
+  return true;
+}
+
+heighwayDragon();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-221-alexandrian-integers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-221-alexandrian-integers.md
new file mode 100644
index 00000000000..e7fedf26f75
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-221-alexandrian-integers.md
@@ -0,0 +1,49 @@
+---
+id: 5900f4491000cf542c50ff5c
+title: 'Problem 221: Alexandrian Integers'
+challengeType: 1
+forumTopicId: 301864
+dashedName: problem-221-alexandrian-integers
+---
+
+# --description--
+
+We shall call a positive integer $A$ an "Alexandrian integer", if there exist integers $p$, $q$, $r$ such that:
+
+$$A = p \times q \times r$$
+
+and
+
+$$\frac{1}{A} = \frac{1}{p} + \frac{1}{q} + \frac{1}{r}$$
+
+
+For example, 630 is an Alexandrian integer ($p = 5$, $q = −7$, $r = −18$). In fact, 630 is the 6th Alexandrian integer, the first 6 Alexandrian integers being: 6, 42, 120, 156, 420 and 630.
+
+Find the 150000th Alexandrian integer.
+
+# --hints--
+
+`alexandrianIntegers()` should return `1884161251122450`.
+
+```js
+assert.strictEqual(alexandrianIntegers(), 1884161251122450);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function alexandrianIntegers() {
+
+  return true;
+}
+
+alexandrianIntegers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-222-sphere-packing.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-222-sphere-packing.md
new file mode 100644
index 00000000000..cdb6a9c3977
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-222-sphere-packing.md
@@ -0,0 +1,40 @@
+---
+id: 5900f44b1000cf542c50ff5d
+title: 'Problem 222: Sphere Packing'
+challengeType: 1
+forumTopicId: 301865
+dashedName: problem-222-sphere-packing
+---
+
+# --description--
+
+What is the length of the shortest pipe, of internal radius 50mm, that can fully contain 21 balls of radii 30mm, 31mm, ..., 50mm?
+
+Give your answer in micrometres (${10}^{-6}$ m) rounded to the nearest integer.
+
+# --hints--
+
+`spherePacking()` should return `1590933`.
+
+```js
+assert.strictEqual(spherePacking(), 1590933);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function spherePacking() {
+
+  return true;
+}
+
+spherePacking();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-223-almost-right-angled-triangles-i.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-223-almost-right-angled-triangles-i.md
new file mode 100644
index 00000000000..7fdbc36cbc6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-223-almost-right-angled-triangles-i.md
@@ -0,0 +1,40 @@
+---
+id: 5900f44b1000cf542c50ff5e
+title: 'Problem 223: Almost right-angled triangles I'
+challengeType: 1
+forumTopicId: 301866
+dashedName: problem-223-almost-right-angled-triangles-i
+---
+
+# --description--
+
+Let us call an integer sided triangle with sides $a ≤ b ≤ c$ barely acute if the sides satisfy $a^2 + b^2 = c^2 + 1$.
+
+How many barely acute triangles are there with perimeter $≤ 25\\,000\\,000$?
+
+# --hints--
+
+`almostRightAngledTrianglesOne()` should return `61614848`.
+
+```js
+assert.strictEqual(almostRightAngledTrianglesOne(), 61614848);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function almostRightAngledTrianglesOne() {
+
+  return true;
+}
+
+almostRightAngledTrianglesOne();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-224-almost-right-angled-triangles-ii.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-224-almost-right-angled-triangles-ii.md
new file mode 100644
index 00000000000..c9f9b44cb3f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-224-almost-right-angled-triangles-ii.md
@@ -0,0 +1,40 @@
+---
+id: 5900f44e1000cf542c50ff5f
+title: 'Problem 224: Almost right-angled triangles II'
+challengeType: 1
+forumTopicId: 301867
+dashedName: problem-224-almost-right-angled-triangles-ii
+---
+
+# --description--
+
+Let us call an integer sided triangle with sides $a ≤ b ≤ c$ barely obtuse if the sides satisfy $a^2 + b^2 = c^2 - 1$.
+
+How many barely obtuse triangles are there with perimeter $≤ 75\\,000\\,000$?
+
+# --hints--
+
+`almostRightAngledTrianglesTwo()` should return `4137330`.
+
+```js
+assert.strictEqual(almostRightAngledTrianglesTwo(), 4137330);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function almostRightAngledTrianglesTwo() {
+
+  return true;
+}
+
+almostRightAngledTrianglesTwo();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-225-tribonacci-non-divisors.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-225-tribonacci-non-divisors.md
new file mode 100644
index 00000000000..2221b445314
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-225-tribonacci-non-divisors.md
@@ -0,0 +1,44 @@
+---
+id: 5900f44e1000cf542c50ff60
+title: 'Problem 225: Tribonacci non-divisors'
+challengeType: 1
+forumTopicId: 301868
+dashedName: problem-225-tribonacci-non-divisors
+---
+
+# --description--
+
+The sequence 1, 1, 1, 3, 5, 9, 17, 31, 57, 105, 193, 355, 653, 1201 ...
+
+is defined by $T_1 = T_2 = T_3 = 1$ and $T_n = T_{n - 1} + T_{n - 2} + T_{n - 3}$.
+
+It can be shown that 27 does not divide any terms of this sequence. In fact, 27 is the first odd number with this property.
+
+Find the ${124}^{\text{th}}$ odd number that does not divide any terms of the above sequence.
+
+# --hints--
+
+`tribonacciNonDivisors()` should return `2009`.
+
+```js
+assert.strictEqual(tribonacciNonDivisors(), 2009);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function tribonacciNonDivisors() {
+
+  return true;
+}
+
+tribonacciNonDivisors();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-226-a-scoop-of-blancmange.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-226-a-scoop-of-blancmange.md
new file mode 100644
index 00000000000..fd8031f2594
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-226-a-scoop-of-blancmange.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4511000cf542c50ff62
+title: 'Problem 226: A Scoop of Blancmange'
+challengeType: 1
+forumTopicId: 301869
+dashedName: problem-226-a-scoop-of-blancmange
+---
+
+# --description--
+
+The blancmange curve is the set of points ($x$,$y$) such that $0 ≤ x ≤ 1$ and $\displaystyle y = \sum_{n = 0}^{\infty} \frac{s(2^nx)}{2^n}$, where $s(x)$ is the distance from $x$ to the nearest integer.
+
+The area under the blancmange curve is equal to $\frac{1}{2}$, shown in pink in the diagram below.
+
+<img class="img-responsive center-block" alt="diagram of blancmange curve, with circle C shown on diagram" src="https://cdn.freecodecamp.org/curriculum/project-euler/a-scoop-of-blancmange.gif" style="background-color: white; padding: 10px;" />
+
+Let $C$ be the circle with centre ($\frac{1}{4}$,$\frac{1}{2}$) and radius $\frac{1}{4}$, shown in black in the diagram.
+
+What area under the blancmange curve is enclosed by $C$? Give your answer rounded to eight decimal places in the form 0.abcdefgh
+
+# --hints--
+
+`scoopOfBlancmange()` should return `0.11316017`.
+
+```js
+assert.strictEqual(scoopOfBlancmange(), 0.11316017);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function scoopOfBlancmange() {
+
+  return true;
+}
+
+scoopOfBlancmange();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-227-the-chase.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-227-the-chase.md
new file mode 100644
index 00000000000..3121c6ac8d8
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-227-the-chase.md
@@ -0,0 +1,50 @@
+---
+id: 5900f44f1000cf542c50ff61
+title: 'Problem 227: The Chase'
+challengeType: 1
+forumTopicId: 301870
+dashedName: problem-227-the-chase
+---
+
+# --description--
+
+"The Chase" is a game played with two dice and an even number of players.
+
+The players sit around a table; the game begins with two opposite players having one die each. On each turn, the two players with a die roll it.
+
+If the player rolls a 1, he passes the die to his neighbour on the left.
+
+If the player rolls a 6, he passes the die to his neighbour on the right.
+
+Otherwise, he keeps the die for the next turn.
+
+The game ends when one player has both dice after they have been rolled and passed; that player has then lost.
+
+In a game with 100 players, what is the expected number of turns the game lasts? Give your answer rounded to ten significant digits.
+
+# --hints--
+
+`theChase()` should return `3780.618622`.
+
+```js
+assert.strictEqual(theChase(), 3780.618622);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function theChase() {
+
+  return true;
+}
+
+theChase();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-228-minkowski-sums.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-228-minkowski-sums.md
new file mode 100644
index 00000000000..3bccd240ed2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-228-minkowski-sums.md
@@ -0,0 +1,51 @@
+---
+id: 5900f4511000cf542c50ff63
+title: 'Problem 228: Minkowski Sums'
+challengeType: 1
+forumTopicId: 301871
+dashedName: problem-228-minkowski-sums
+---
+
+# --description--
+
+Let $S_n$ be the regular $n$-sided polygon – or shape – whose vertices $v_k (k = 1, 2, \ldots, n)$ have coordinates:
+
+$$\begin{align}   & x_k = cos(\frac{2k - 1}{n} × 180°) \\\\
+  & y_k = sin(\frac{2k - 1}{n} × 180°) \end{align}$$
+
+Each $S_n$ is to be interpreted as a filled shape consisting of all points on the perimeter and in the interior.
+
+The Minkowski sum, $S + T$, of two shapes $S$ and $T$ is the result of adding every point in $S$ to every point in $T$, where point addition is performed coordinate-wise: $(u, v) + (x, y) = (u + x, v + y)$.
+
+For example, the sum of $S_3$ and $S_4$ is the six-sided shape shown in pink below:
+
+<img class="img-responsive center-block" alt="image showing S_3, S_4 and S_3 + S_4" src="https://cdn.freecodecamp.org/curriculum/project-euler/minkowski-sums.png" style="background-color: white; padding: 10px;" />
+
+How many sides does $S_{1864} + S_{1865} + \ldots + S_{1909}$ have?
+
+# --hints--
+
+`minkowskiSums()` should return `86226`.
+
+```js
+assert.strictEqual(minkowskiSums(), 86226);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function minkowskiSums() {
+
+  return true;
+}
+
+minkowskiSums();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-229-four-representations-using-squares.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-229-four-representations-using-squares.md
new file mode 100644
index 00000000000..3903d30320f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-229-four-representations-using-squares.md
@@ -0,0 +1,56 @@
+---
+id: 5900f4521000cf542c50ff64
+title: 'Problem 229: Four Representations using Squares'
+challengeType: 1
+forumTopicId: 301872
+dashedName: problem-229-four-representations-using-squares
+---
+
+# --description--
+
+Consider the number 3600. It is very special, because
+
+$$\begin{align}   & 3600 = {48}^2 + {36}^2   \\\\
+  & 3600 = {20}^2 + {2×40}^2 \\\\   & 3600 = {30}^2 + {3×30}^2 \\\\
+  & 3600 = {45}^2 + {7×15}^2 \\\\ \end{align}$$
+
+Similarly, we find that $88201 = {99}^2 + {280}^2 = {287}^2 + 2 × {54}^2 = {283}^2 + 3 × {52}^2 = {197}^2 + 7 × {84}^2$.
+
+In 1747, Euler proved which numbers are representable as a sum of two squares. We are interested in the numbers $n$ which admit representations of all of the following four types:
+
+$$\begin{align}   & n = {a_1}^2 + {b_1}^2  \\\\
+  & n = {a_2}^2 + 2{b_2}^2 \\\\   & n = {a_3}^2 + 3{b_3}^2 \\\\
+  & n = {a_7}^2 + 7{b_7}^2 \\\\ \end{align}$$
+
+where the $a_k$ and $b_k$ are positive integers.
+
+There are 75373 such numbers that do not exceed ${10}^7$.
+
+How many such numbers are there that do not exceed $2 × {10}^9$?
+
+# --hints--
+
+`representationsUsingSquares()` should return `11325263`.
+
+```js
+assert.strictEqual(representationsUsingSquares(), 11325263);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function representationsUsingSquares() {
+
+  return true;
+}
+
+representationsUsingSquares();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-23-non-abundant-sums.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-23-non-abundant-sums.md
new file mode 100644
index 00000000000..cc7079af8c4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-23-non-abundant-sums.md
@@ -0,0 +1,101 @@
+---
+id: 5900f3831000cf542c50fe96
+title: 'Problem 23: Non-abundant sums'
+challengeType: 1
+forumTopicId: 301873
+dashedName: problem-23-non-abundant-sums
+---
+
+# --description--
+
+A perfect number is a number for which the sum of its proper divisors is exactly equal to the number. For example, the sum of the proper divisors of 28 would be 1 + 2 + 4 + 7 + 14 = 28, which means that 28 is a perfect number.
+
+A number `n` is called deficient if the sum of its proper divisors is less than `n` and it is called abundant if this sum exceeds `n`.
+
+As 12 is the smallest abundant number, 1 + 2 + 3 + 4 + 6 = 16, the smallest number that can be written as the sum of two abundant numbers is 24. By mathematical analysis, it can be shown that all integers greater than 28123 can be written as the sum of two abundant numbers. However, this upper limit cannot be reduced any further by analysis even though it is known that the greatest number that cannot be expressed as the sum of two abundant numbers is less than this limit.
+
+Find the sum of all positive integers &lt;= `n` which cannot be written as the sum of two abundant numbers.
+
+# --hints--
+
+`sumOfNonAbundantNumbers(10000)` should return a number.
+
+```js
+assert(typeof sumOfNonAbundantNumbers(10000) === 'number');
+```
+
+`sumOfNonAbundantNumbers(10000)` should return 3731004.
+
+```js
+assert(sumOfNonAbundantNumbers(10000) === 3731004);
+```
+
+`sumOfNonAbundantNumbers(15000)` should return 4039939.
+
+```js
+assert(sumOfNonAbundantNumbers(15000) === 4039939);
+```
+
+`sumOfNonAbundantNumbers(20000)` should return 4159710.
+
+```js
+assert(sumOfNonAbundantNumbers(20000) === 4159710);
+```
+
+`sumOfNonAbundantNumbers(28123)` should return 4179871.
+
+```js
+assert(sumOfNonAbundantNumbers(28123) === 4179871);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumOfNonAbundantNumbers(n) {
+
+  return n;
+}
+
+sumOfNonAbundantNumbers(28123);
+```
+
+# --solutions--
+
+```js
+function abundantCheck(number) {
+  let sum = 1;
+
+  for (let i = 2; i <= Math.sqrt(number); i += 1) {
+    if(number % i === 0) {
+      sum += i + +(i !== Math.sqrt(number) && number / i);
+    }
+  }
+  return sum > number;
+}
+
+function sumOfNonAbundantNumbers(n) {
+  let sum = 0;
+  const memo = {};
+  let abundantList = [];
+
+  // Function checkSum checks if num can be represented as a sum of numbers in the stack (array)
+  const checkSum = (num, stack, memo) => {
+    for (let i = 0; i < stack.length; i += 1) {
+      if ((num - stack[i]) in memo) return true;
+    }
+    return false;
+  };
+
+  for (let i = 1; i <= n; i += 1) {
+    if (abundantCheck(i)) {
+      abundantList.push(i);
+      memo[i] = 1;
+    }
+    if (checkSum(i, abundantList, memo)) continue;
+    sum += i;
+  }
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-230-fibonacci-words.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-230-fibonacci-words.md
new file mode 100644
index 00000000000..bc6cd70f1cc
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-230-fibonacci-words.md
@@ -0,0 +1,64 @@
+---
+id: 5900f4531000cf542c50ff65
+title: 'Problem 230: Fibonacci Words'
+challengeType: 1
+forumTopicId: 301874
+dashedName: problem-230-fibonacci-words
+---
+
+# --description--
+
+For any two strings of digits, $A$ and $B$, we define $F_{A,B}$ to be the sequence ($A, B, AB, BAB, ABBAB, \ldots$) in which each term is the concatenation of the previous two.
+
+Further, we define $D_{A,B}(n)$ to be the $n^{\text{th}}$ digit in the first term of $F_{A,B}$ that contains at least $n$ digits.
+
+Example:
+
+Let $A = 1\\,415\\,926\\,535$, $B = 8\\,979\\,323\\,846$. We wish to find $D_{A,B}(35)$, say.
+
+The first few terms of $F_{A,B}$ are:
+
+$$\begin{align}   & 1\\,415\\,926\\,535 \\\\
+  & 8\\,979\\,323\\,846 \\\\   & 14\\,159\\,265\\,358\\,979\\,323\\,846 \\\\
+  & 897\\,932\\,384\\,614\\,159\\,265\\,358\\,979\\,323\\,846 \\\\ & 14\\,159\\,265\\,358\\,979\\,323\\,846\\,897\\,932\\,384\\,614\\,15\color{red}{9}\\,265\\,358\\,979\\,323\\,846 \end{align}$$
+
+Then $D_{A,B}(35)$ is the ${35}^{\text{th}}$ digit in the fifth term, which is 9.
+
+Now we use for $A$ the first 100 digits of $π$ behind the decimal point:
+
+$$\begin{align}   & 14\\,159\\,265\\,358\\,979\\,323\\,846\\,264\\,338\\,327\\,950\\,288\\,419\\,716\\,939\\,937\\,510 \\\\
+  & 58\\,209\\,749\\,445\\,923\\,078\\,164\\,062\\,862\\,089\\,986\\,280\\,348\\,253\\,421\\,170\\,679 \end{align}$$
+
+and for $B$ the next hundred digits:
+
+$$\begin{align}   & 82\\,148\\,086\\,513\\,282\\,306\\,647\\,093\\,844\\,609\\,550\\,582\\,231\\,725\\,359\\,408\\,128 \\\\
+  & 48\\,111\\,745\\,028\\,410\\,270\\,193\\,852\\,110\\,555\\,964\\,462\\,294\\,895\\,493\\,038\\,196 \end{align}$$
+
+Find $\sum_{n = 0, 1, \ldots, 17} {10}^n × D_{A,B}((127 + 19n) × 7^n)$.
+
+# --hints--
+
+`fibonacciWords()` should return `850481152593119200`.
+
+```js
+assert.strictEqual(fibonacciWords(), 850481152593119200);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function fibonacciWords() {
+
+  return true;
+}
+
+fibonacciWords();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-231-the-prime-factorisation-of-binomial-coefficients.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-231-the-prime-factorisation-of-binomial-coefficients.md
new file mode 100644
index 00000000000..498810cf48c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-231-the-prime-factorisation-of-binomial-coefficients.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4531000cf542c50ff66
+title: 'Problem 231: The prime factorisation of binomial coefficients'
+challengeType: 1
+forumTopicId: 301875
+dashedName: problem-231-the-prime-factorisation-of-binomial-coefficients
+---
+
+# --description--
+
+The binomial coefficient $\displaystyle\binom{10}{3} = 120$.
+
+$120 = 2^3 × 3 × 5 = 2 × 2 × 2 × 3 × 5$, and $2 + 2 + 2 + 3 + 5 = 14$.
+
+So the sum of the terms in the prime factorisation of $\displaystyle\binom{10}{3}$ is $14$.
+
+Find the sum of the terms in the prime factorisation of $\binom{20\\,000\\,000}{15\\,000\\,000}$.
+
+# --hints--
+
+`primeFactorisation()` should return `7526965179680`.
+
+```js
+assert.strictEqual(primeFactorisation(), 7526965179680);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeFactorisation() {
+
+  return true;
+}
+
+primeFactorisation();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-232-the-race.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-232-the-race.md
new file mode 100644
index 00000000000..c03c0d687b3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-232-the-race.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4551000cf542c50ff67
+title: 'Problem 232: The Race'
+challengeType: 1
+forumTopicId: 301876
+dashedName: problem-232-the-race
+---
+
+# --description--
+
+Two players share an unbiased coin and take it in turns to play "The Race".
+
+On Player 1's turn, he tosses the coin once: if it comes up Heads, he scores one point; if it comes up Tails, he scores nothing.
+
+On Player 2's turn, she chooses a positive integer $T$ and tosses the coin $T$ times: if it comes up all Heads, she scores $2^{T - 1}$ points; otherwise, she scores nothing.
+
+Player 1 goes first. The winner is the first to 100 or more points.
+
+On each turn Player 2 selects the number, $T$, of coin tosses that maximises the probability of her winning.
+
+What is the probability that Player 2 wins?
+
+Give your answer rounded to eight decimal places in the form 0.abcdefgh .
+
+# --hints--
+
+`theRace()` should return `0.83648556`.
+
+```js
+assert.strictEqual(theRace(), 0.83648556);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function theRace() {
+
+  return true;
+}
+
+theRace();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-233-lattice-points-on-a-circle.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-233-lattice-points-on-a-circle.md
new file mode 100644
index 00000000000..db650947233
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-233-lattice-points-on-a-circle.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4551000cf542c50ff68
+title: 'Problem 233: Lattice points on a circle'
+challengeType: 1
+forumTopicId: 301877
+dashedName: problem-233-lattice-points-on-a-circle
+---
+
+# --description--
+
+Let $f(N)$ be the number of points with integer coordinates that are on a circle passing through $(0,0)$, $(N,0)$,$(0,N)$, and $(N,N)$.
+
+It can be shown that $f(10000) = 36$.
+
+What is the sum of all positive integers $N ≤ {10}^{11}$ such that $f(N) = 420$?
+
+# --hints--
+
+`latticePointsOnACircle()` should return `271204031455541300`.
+
+```js
+assert.strictEqual(latticePointsOnACircle(), 271204031455541300);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function latticePointsOnACircle() {
+
+  return true;
+}
+
+latticePointsOnACircle();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-234-semidivisible-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-234-semidivisible-numbers.md
new file mode 100644
index 00000000000..ec01ca36a28
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-234-semidivisible-numbers.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4571000cf542c50ff69
+title: 'Problem 234: Semidivisible numbers'
+challengeType: 1
+forumTopicId: 301878
+dashedName: problem-234-semidivisible-numbers
+---
+
+# --description--
+
+For an integer $n ≥ 4$, we define the lower prime square root of $n$, denoted by $lps(n)$, as the $\text{largest prime} ≤ \sqrt{n}$ and the upper prime square root of $n$, $ups(n)$, as the $\text{smallest prime} ≥ \sqrt{n}$.
+
+So, for example, $lps(4) = 2 = ups(4)$, $lps(1000) = 31$, $ups(1000) = 37$.
+
+Let us call an integer $n ≥ 4$ semidivisible, if one of $lps(n)$ and $ups(n)$ divides $n$, but not both.
+
+The sum of the semidivisible numbers not exceeding 15 is 30, the numbers are 8, 10 and 12. 15 is not semidivisible because it is a multiple of both $lps(15) = 3$ and $ups(15) = 5$. As a further example, the sum of the 92 semidivisible numbers up to 1000 is 34825.
+
+What is the sum of all semidivisible numbers not exceeding 999966663333?
+
+# --hints--
+
+`semidivisibleNumbers()` should return `1259187438574927000`.
+
+```js
+assert.strictEqual(semidivisibleNumbers(), 1259187438574927000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function semidivisibleNumbers() {
+
+  return true;
+}
+
+semidivisibleNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-235-an-arithmetic-geometric-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-235-an-arithmetic-geometric-sequence.md
new file mode 100644
index 00000000000..893687367a5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-235-an-arithmetic-geometric-sequence.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4571000cf542c50ff6a
+title: 'Problem 235: An Arithmetic Geometric sequence'
+challengeType: 1
+forumTopicId: 301879
+dashedName: problem-235-an-arithmetic-geometric-sequence
+---
+
+# --description--
+
+Given is the arithmetic-geometric sequence $u(k) = (900 - 3k)r^{k - 1}$.
+
+Let $s(n) = \sum_{k=1 \ldots n} u(k)$.
+
+Find the value of $r$ for which $s(5000) = -600\\,000\\,000\\,000$.
+
+Give your answer rounded to 12 places behind the decimal point.
+
+# --hints--
+
+`arithmeticGeometricSequence()` should return `1.002322108633`.
+
+```js
+assert.strictEqual(arithmeticGeometricSequence(), 1.002322108633);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function arithmeticGeometricSequence() {
+
+  return true;
+}
+
+arithmeticGeometricSequence();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-236-luxury-hampers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-236-luxury-hampers.md
new file mode 100644
index 00000000000..2ae12a0ab04
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-236-luxury-hampers.md
@@ -0,0 +1,65 @@
+---
+id: 5900f4591000cf542c50ff6b
+title: 'Problem 236: Luxury Hampers'
+challengeType: 1
+forumTopicId: 301881
+dashedName: problem-236-luxury-hampers
+---
+
+# --description--
+
+Suppliers 'A' and 'B' provided the following numbers of products for the luxury hamper market:
+
+| Product            | 'A'  | 'B'  |
+| ------------------ | ---- | ---- |
+| Beluga Caviar      | 5248 | 640  |
+| Christmas Cake     | 1312 | 1888 |
+| Gammon Joint       | 2624 | 3776 |
+| Vintage Port       | 5760 | 3776 |
+| Champagne Truffles | 3936 | 5664 |
+
+Although the suppliers try very hard to ship their goods in perfect condition, there is inevitably some spoilage - i.e. products gone bad.
+
+The suppliers compare their performance using two types of statistic:
+
+- The five per-product spoilage rates for each supplier are equal to the number of products gone bad divided by the number of products supplied, for each of the five products in turn.
+- The overall spoilage rate for each supplier is equal to the total number of products gone bad divided by the total number of products provided by that supplier.
+
+To their surprise, the suppliers found that each of the five per-product spoilage rates was worse (higher) for 'B' than for 'A' by the same factor (ratio of spoilage rates), $m > 1$; and yet, paradoxically, the overall spoilage rate was worse for 'A' than for 'B', also by a factor of $m$.
+
+There are thirty-five $m > 1$ for which this surprising result could have occurred, the smallest of which is $\frac{1476}{1475}$.
+
+What's the largest possible value of $m$? Give your answer as a string with fraction reduced to its lowest terms, in the form `u/v`.
+
+# --hints--
+
+`luxuryHampers()` should return a string.
+
+```js
+assert(typeof luxuryHampers() === 'string');
+```
+
+`luxuryHampers()` should return the string `123/59`.
+
+```js
+assert.strictEqual(luxuryHampers(), '123/59');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function luxuryHampers() {
+
+  return true;
+}
+
+luxuryHampers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-237-tours-on-a-4-x-n-playing-board.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-237-tours-on-a-4-x-n-playing-board.md
new file mode 100644
index 00000000000..ef7c2a30c04
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-237-tours-on-a-4-x-n-playing-board.md
@@ -0,0 +1,49 @@
+---
+id: 5900f4591000cf542c50ff6c
+title: 'Problem 237: Tours on a 4 x n playing board'
+challengeType: 1
+forumTopicId: 301882
+dashedName: problem-237-tours-on-a-4-x-n-playing-board
+---
+
+# --description--
+
+Let $T(n)$ be the number of tours over a 4 × $n$ playing board such that:
+
+- The tour starts in the top left corner.
+- The tour consists of moves that are up, down, left, or right one square.
+- The tour visits each square exactly once.
+- The tour ends in the bottom left corner.
+
+The diagram shows one tour over a 4 × 10 board:
+
+<img class="img-responsive center-block" alt="one tour over 4 x 10 board" src="https://cdn.freecodecamp.org/curriculum/project-euler/tours-on-a-4-x-n-playing-board.gif" style="background-color: white; padding: 10px;" />
+
+$T(10)$ is 2329. What is $T({10}^{12})$ modulo ${10}^8$?
+
+# --hints--
+
+`toursOnPlayingBoard()` should return `15836928`.
+
+```js
+assert.strictEqual(toursOnPlayingBoard(), 15836928);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function toursOnPlayingBoard() {
+
+  return true;
+}
+
+toursOnPlayingBoard();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-238-infinite-string-tour.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-238-infinite-string-tour.md
new file mode 100644
index 00000000000..6f49452d838
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-238-infinite-string-tour.md
@@ -0,0 +1,59 @@
+---
+id: 5900f45b1000cf542c50ff6d
+title: 'Problem 238: Infinite string tour'
+challengeType: 1
+forumTopicId: 301883
+dashedName: problem-238-infinite-string-tour
+---
+
+# --description--
+
+Create a sequence of numbers using the "Blum Blum Shub" pseudo-random number generator:
+
+$$ s_0 = 14025256 \\\\
+s_{n + 1} = {s_n}^2 \\; mod \\; 20\\,300\\,713 $$
+
+Concatenate these numbers $s_0s_1s_2\ldots$ to create a string $w$ of infinite length. Then, $w = 14025256741014958470038053646\ldots$
+
+For a positive integer $k$, if no substring of $w$ exists with a sum of digits equal to $k$, $p(k)$ is defined to be zero. If at least one substring of $w$ exists with a sum of digits equal to $k$, we define $p(k) = z$, where $z$ is the starting position of the earliest such substring.
+
+For instance:
+
+The substrings 1, 14, 1402, … with respective sums of digits equal to 1, 5, 7, … start at position 1, hence $p(1) = p(5) = p(7) = \ldots = 1$.
+
+The substrings 4, 402, 4025, … with respective sums of digits equal to 4, 6, 11, … start at position 2, hence $p(4) = p(6) = p(11) = \ldots = 2$.
+
+The substrings 02, 0252, … with respective sums of digits equal to 2, 9, … start at position 3, hence $p(2) = p(9) = \ldots = 3$.
+
+Note that substring 025 starting at position 3, has a sum of digits equal to 7, but there was an earlier substring (starting at position 1) with a sum of digits equal to 7, so $p(7) = 1$, not 3.
+
+We can verify that, for $0 &lt; k ≤ {10}^3$, $\sum p(k) = 4742$.
+
+Find $\sum p(k)$, for $0 &lt; k ≤ 2 \times {10}^{15}$.
+
+# --hints--
+
+`infiniteStringTour()` should return `9922545104535660`.
+
+```js
+assert.strictEqual(infiniteStringTour(), 9922545104535660);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function infiniteStringTour() {
+
+  return true;
+}
+
+infiniteStringTour();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-239-twenty-two-foolish-primes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-239-twenty-two-foolish-primes.md
new file mode 100644
index 00000000000..9fff8274ba8
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-239-twenty-two-foolish-primes.md
@@ -0,0 +1,42 @@
+---
+id: 5900f45c1000cf542c50ff6e
+title: 'Problem 239: Twenty-two Foolish Primes'
+challengeType: 1
+forumTopicId: 301884
+dashedName: problem-239-twenty-two-foolish-primes
+---
+
+# --description--
+
+A set of disks numbered 1 through 100 are placed in a line in random order.
+
+What is the probability that we have a partial derangement such that exactly 22 prime number discs are found away from their natural positions? (Any number of non-prime disks may also be found in or out of their natural positions.)
+
+Give your answer rounded to 12 places behind the decimal point in the form 0.abcdefghijkl.
+
+# --hints--
+
+`twentyTwoFoolishPrimes()` should return `0.001887854841`.
+
+```js
+assert.strictEqual(twentyTwoFoolishPrimes(), 0.001887854841);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function twentyTwoFoolishPrimes() {
+
+  return true;
+}
+
+twentyTwoFoolishPrimes();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-24-lexicographic-permutations.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-24-lexicographic-permutations.md
new file mode 100644
index 00000000000..91572e2dd40
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-24-lexicographic-permutations.md
@@ -0,0 +1,66 @@
+---
+id: 5900f3841000cf542c50fe97
+title: 'Problem 24: Lexicographic permutations'
+challengeType: 1
+forumTopicId: 301885
+dashedName: problem-24-lexicographic-permutations
+---
+
+# --description--
+
+A permutation is an ordered arrangement of objects. For example, 3124 is one possible permutation of the digits 1, 2, 3 and 4. If all of the permutations are listed numerically or alphabetically, we call it lexicographic order. The lexicographic permutations of 0, 1 and 2 are:
+
+<div style='text-align: center;'>012   021   102   120   201   210</div>
+
+What is the `n`th lexicographic permutation of the digits 0, 1, 2, 3, 4, 5, 6, 7, 8 and 9?
+
+# --hints--
+
+`lexicographicPermutations(699999)` should return a number.
+
+```js
+assert(typeof lexicographicPermutations(699999) === 'number');
+```
+
+`lexicographicPermutations(699999)` should return 1938246570.
+
+```js
+assert(lexicographicPermutations(699999) == 1938246570);
+```
+
+`lexicographicPermutations(899999)` should return 2536987410.
+
+```js
+assert(lexicographicPermutations(899999) == 2536987410);
+```
+
+`lexicographicPermutations(900000)` should return 2537014689.
+
+```js
+assert(lexicographicPermutations(900000) == 2537014689);
+```
+
+`lexicographicPermutations(999999)` should return 2783915460.
+
+```js
+assert(lexicographicPermutations(999999) == 2783915460);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function lexicographicPermutations(n) {
+
+  return n;
+}
+
+lexicographicPermutations(999999);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-240-top-dice.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-240-top-dice.md
new file mode 100644
index 00000000000..97f89f17305
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-240-top-dice.md
@@ -0,0 +1,44 @@
+---
+id: 5900f45d1000cf542c50ff6f
+title: 'Problem 240: Top Dice'
+challengeType: 1
+forumTopicId: 301887
+dashedName: problem-240-top-dice
+---
+
+# --description--
+
+There are 1111 ways in which five 6-sided dice (sides numbered 1 to 6) can be rolled so that the top three sum to 15. Some examples are:
+
+$$\begin{align}   & D_1,D_2,D_3,D_4,D_5 = 4,3,6,3,5 \\\\
+  & D_1,D_2,D_3,D_4,D_5 = 4,3,3,5,6 \\\\   & D_1,D_2,D_3,D_4,D_5 = 3,3,3,6,6 \\\\
+  & D_1,D_2,D_3,D_4,D_5 = 6,6,3,3,3 \end{align}$$
+
+In how many ways can twenty 12-sided dice (sides numbered 1 to 12) be rolled so that the top ten sum to 70?
+
+# --hints--
+
+`topDice()` should return `7448717393364182000`.
+
+```js
+assert.strictEqual(topDice(), 7448717393364182000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function topDice() {
+
+  return true;
+}
+
+topDice();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-241-perfection-quotients.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-241-perfection-quotients.md
new file mode 100644
index 00000000000..492d3f61f8e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-241-perfection-quotients.md
@@ -0,0 +1,44 @@
+---
+id: 5900f45d1000cf542c50ff70
+title: 'Problem 241: Perfection Quotients'
+challengeType: 1
+forumTopicId: 301888
+dashedName: problem-241-perfection-quotients
+---
+
+# --description--
+
+For a positive integer $n$, let $σ(n)$ be the sum of all divisors of $n$, so e.g. $σ(6) = 1 + 2 + 3 + 6 = 12$.
+
+A perfect number, as you probably know, is a number with $σ(n) = 2n$.
+
+Let us define the perfection quotient of a positive integer as $p(n) = \frac{σ(n)}{n}$.
+
+Find the sum of all positive integers $n ≤ {10}^{18}$ for which $p(n)$ has the form $k + \frac{1}{2}$, where $k$ is an integer.
+
+# --hints--
+
+`perfectionQuotients()` should return `482316491800641150`.
+
+```js
+assert.strictEqual(perfectionQuotients(), 482316491800641150);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function perfectionQuotients() {
+
+  return true;
+}
+
+perfectionQuotients();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-242-odd-triplets.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-242-odd-triplets.md
new file mode 100644
index 00000000000..abbcfca2a6a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-242-odd-triplets.md
@@ -0,0 +1,44 @@
+---
+id: 5900f45f1000cf542c50ff71
+title: 'Problem 242: Odd Triplets'
+challengeType: 1
+forumTopicId: 301889
+dashedName: problem-242-odd-triplets
+---
+
+# --description--
+
+Given the set {1,2,..., $n$}, we define $f(n, k)$ as the number of its $k$-element subsets with an odd sum of elements. For example, $f(5,3) = 4$, since the set {1,2,3,4,5} has four 3-element subsets having an odd sum of elements, i.e.: {1,2,4}, {1,3,5}, {2,3,4} and {2,4,5}.
+
+When all three values $n$, $k$ and $f(n, k)$ are odd, we say that they make an odd-triplet $[n, k, f(n, k)]$.
+
+There are exactly five odd-triplets with $n ≤ 10$, namely: $[1, 1, f(1, 1) = 1]$, $[5, 1, f(5, 1) = 3]$, $[5, 5, f(5, 5) = 1]$, $[9, 1, f(9, 1) = 5]$ and $[9, 9, f(9, 9) = 1]$.
+
+How many odd-triplets are there with $n ≤ {10}^{12}$?
+
+# --hints--
+
+`oddTriplets()` should return `997104142249036700`.
+
+```js
+assert.strictEqual(oddTriplets(), 997104142249036700);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function oddTriplets() {
+
+  return true;
+}
+
+oddTriplets();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-243-resilience.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-243-resilience.md
new file mode 100644
index 00000000000..67287eac731
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-243-resilience.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4601000cf542c50ff73
+title: 'Problem 243: Resilience'
+challengeType: 1
+forumTopicId: 301890
+dashedName: problem-243-resilience
+---
+
+# --description--
+
+A positive fraction whose numerator is less than its denominator is called a proper fraction.
+
+For any denominator, $d$, there will be $d−1$ proper fractions; for example, with $d = 12$:
+
+$$\frac{1}{12}, \frac{2}{12}, \frac{3}{12}, \frac{4}{12}, \frac{5}{12}, \frac{6}{12}, \frac{7}{12}, \frac{8}{12}, \frac{9}{12}, \frac{10}{12}, \frac{11}{12}$$
+
+We shall call a fraction that cannot be cancelled down a resilient fraction.
+
+Furthermore we shall define the resilience of a denominator, $R(d)$, to be the ratio of its proper fractions that are resilient; for example, $R(12) = \frac{4}{11}$.
+
+In fact, $d = 12$ is the smallest denominator having a resilience $R(d) &lt; \frac{4}{10}$.
+
+Find the smallest denominator $d$, having a resilience $R(d) &lt; \frac{15\\,499}{94\\,744}$.
+
+# --hints--
+
+`resilience()` should return `892371480`.
+
+```js
+assert.strictEqual(resilience(), 892371480);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function resilience() {
+
+  return true;
+}
+
+resilience();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-244-sliders.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-244-sliders.md
new file mode 100644
index 00000000000..ebe4a76b838
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-244-sliders.md
@@ -0,0 +1,58 @@
+---
+id: 5900f4601000cf542c50ff72
+title: 'Problem 244: Sliders'
+challengeType: 1
+forumTopicId: 301891
+dashedName: problem-244-sliders
+---
+
+# --description--
+
+You probably know the game Fifteen Puzzle. Here, instead of numbered tiles, we have seven red tiles and eight blue tiles.
+
+A move is denoted by the uppercase initial of the direction (Left, Right, Up, Down) in which the tile is slid, e.g. starting from configuration ($S$), by the sequence $LULUR$ we reach the configuration ($E$):
+
+($S$) <img class="img-responsive" alt="configuration S" src="https://cdn.freecodecamp.org/curriculum/project-euler/sliders-1.gif" style="display: inline-block; background-color: white; padding: 10px;" />, ($E$) <img class="img-responsive" alt="configuration E" src="https://cdn.freecodecamp.org/curriculum/project-euler/sliders-2.gif" style="display: inline-block; background-color: white; padding: 10px;" />
+
+For each path, its checksum is calculated by (pseudocode):
+
+$$\begin{align}   & \text{checksum} = 0 \\\\
+  & \text{checksum} = (\text{checksum} × 243 + m_1) \\; \text{mod} \\; 100\\,000\\,007 \\\\   & \text{checksum} = (\text{checksum} × 243 + m_2) \\; \text{mod} \\; 100\\,000\\,007 \\\\
+  & \ldots \\\\ & \text{checksum} = (\text{checksum} × 243 + m_n) \\; \text{mod} \\; 100\\,000\\,007 \end{align}$$
+
+where $m_k$ is the ASCII value of the $k^{\text{th}}$ letter in the move sequence and the ASCII values for the moves are:
+
+$$\begin{array}{|c|c|} \hline L & 76 \\\\ \hline R & 82 \\\\ \hline U & 85 \\\\ \hline D & 68 \\\\ \hline \end{array}$$
+
+For the sequence $LULUR$ given above, the checksum would be 19761398. Now, starting from configuration ($S$), find all shortest ways to reach configuration ($T$).
+
+($S$) <img class="img-responsive center-block" alt="configuration S" src="https://cdn.freecodecamp.org/curriculum/project-euler/sliders-3.gif" style="display: inline-block; background-color: white; padding: 10px;" />, ($T$) <img class="img-responsive center-block" alt="configuration T" src="https://cdn.freecodecamp.org/curriculum/project-euler/sliders-4.gif" style="display: inline-block; background-color: white; padding: 10px;" />
+
+What is the sum of all checksums for the paths having the minimal length?
+
+# --hints--
+
+`sliders()` should return `96356848`.
+
+```js
+assert.strictEqual(sliders(), 96356848);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sliders() {
+
+  return true;
+}
+
+sliders();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-245-coresilience.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-245-coresilience.md
new file mode 100644
index 00000000000..c3e090d0edb
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-245-coresilience.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4621000cf542c50ff74
+title: 'Problem 245: Coresilience'
+challengeType: 1
+forumTopicId: 301892
+dashedName: problem-245-coresilience
+---
+
+# --description--
+
+We shall call a fraction that cannot be cancelled down a resilient fraction.
+
+Furthermore we shall define the resilience of a denominator, $R(d)$, to be the ratio of its proper fractions that are resilient; for example, $R(12) = \frac{4}{11}$.
+
+The resilience of a number $d > 1$ is then $\frac{φ(d)}{d − 1}$ , where $φ$ is Euler's totient function.
+
+We further define the coresilience of a number $n > 1$ as $C(n) = \frac{n − φ(n)}{n − 1}$.
+
+The coresilience of a prime $p$ is $C(p) = \frac{1}{p − 1}$.
+
+Find the sum of all composite integers $1 &lt; n ≤ 2 × {10}^{11}$, for which $C(n)$ is a unit fraction.
+
+# --hints--
+
+`coresilience()` should return `288084712410001`.
+
+```js
+assert.strictEqual(coresilience(), 288084712410001);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function coresilience() {
+
+  return true;
+}
+
+coresilience();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-246-tangents-to-an-ellipse.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-246-tangents-to-an-ellipse.md
new file mode 100644
index 00000000000..16c5d89e23b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-246-tangents-to-an-ellipse.md
@@ -0,0 +1,58 @@
+---
+id: 5900f4621000cf542c50ff75
+title: 'Problem 246: Tangents to an ellipse'
+challengeType: 1
+forumTopicId: 301893
+dashedName: problem-246-tangents-to-an-ellipse
+---
+
+# --description--
+
+A definition for an ellipse is:
+
+Given a circle $c$ with centre $M$ and radius $r$ and a point $G$ such that $d(G, M) < r$, the locus of the points that are equidistant from $c$ and $G$ form an ellipse.
+
+The construction of the points of the ellipse is shown below.
+
+<img class="img-responsive center-block" alt="animation of ellipse construction" src="https://cdn.freecodecamp.org/curriculum/project-euler/tangents-to-an-ellipse-1.gif" style="background-color: white; padding: 10px;" />
+
+Given are the points $M(-2000, 1500)$ and $G(8000, 1500)$.
+
+Given is also the circle $c$ with centre $M$ and radius $15\\,000$.
+
+The locus of the points that are equidistant from $G$ and $c$ form an ellipse $e$.
+
+From a point $P$ outside $e$ the two tangents $t_1$ and $t_2$ to the ellipse are drawn.
+
+Let the points where $t_1$ and $t_2$ touch the ellipse be $R$ and $S$.
+
+<img class="img-responsive center-block" alt="circle c with the centre M, radius 15000, and point P outsie of ellipse e; from point P two tangents t_1 and t_2 are drawn to the ellipse, with points touching ellipse are R and S" src="https://cdn.freecodecamp.org/curriculum/project-euler/tangents-to-an-ellipse-2.gif" style="background-color: white; padding: 10px;" />
+
+For how many lattice points $P$ is angle $RPS$ greater than 45°?
+
+# --hints--
+
+`tangentsToAnEllipse()` should return `810834388`.
+
+```js
+assert.strictEqual(tangentsToAnEllipse(), 810834388);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function tangentsToAnEllipse() {
+
+  return true;
+}
+
+tangentsToAnEllipse();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-247-squares-under-a-hyperbola.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-247-squares-under-a-hyperbola.md
new file mode 100644
index 00000000000..d84036f8701
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-247-squares-under-a-hyperbola.md
@@ -0,0 +1,56 @@
+---
+id: 5900f4641000cf542c50ff76
+title: 'Problem 247: Squares under a hyperbola'
+challengeType: 1
+forumTopicId: 301894
+dashedName: problem-247-squares-under-a-hyperbola
+---
+
+# --description--
+
+Consider the region constrained by $1 ≤ x$ and $0 ≤ y ≤ \frac{1}{x}$.
+
+Let $S_1$ be the largest square that can fit under the curve.
+
+Let $S_2$ be the largest square that fits in the remaining area, and so on.
+
+Let the index of $S_n$ be the pair (left, below) indicating the number of squares to the left of $S_n$ and the number of squares below $S_n$.
+
+<img class="img-responsive center-block" alt="diagram with squares under the hyperbola" src="https://cdn.freecodecamp.org/curriculum/project-euler/squares-under-a-hyperbola.gif" style="background-color: white; padding: 10px;" />
+
+The diagram shows some such squares labelled by number.
+
+$S_2$ has one square to its left and none below, so the index of $S_2$ is (1, 0).
+
+It can be seen that the index of $S_{32}$ is (1,1) as is the index of $S_{50}$.
+
+50 is the largest $n$ for which the index of $S_n$ is (1, 1).
+
+What is the largest $n$ for which the index of $S_n$ is (3, 3)?
+
+# --hints--
+
+`squaresUnderAHyperbola()` should return `782252`.
+
+```js
+assert.strictEqual(squaresUnderAHyperbola(), 782252);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function squaresUnderAHyperbola() {
+
+  return true;
+}
+
+squaresUnderAHyperbola();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-248-numbers-for-which-eulers-totient-function-equals-13.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-248-numbers-for-which-eulers-totient-function-equals-13.md
new file mode 100644
index 00000000000..0df6dd5226a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-248-numbers-for-which-eulers-totient-function-equals-13.md
@@ -0,0 +1,40 @@
+---
+id: 5900f4651000cf542c50ff77
+title: 'Problem 248: Numbers for which Euler’s totient function equals 13!'
+challengeType: 1
+forumTopicId: 301895
+dashedName: problem-248-numbers-for-which-eulers-totient-function-equals-13
+---
+
+# --description--
+
+The first number $n$ for which $φ(n) = 13!$ is $6\\,227\\,180\\,929$.
+
+Find the ${150\\,000}^{\text{th}}$ such number.
+
+# --hints--
+
+`eulersTotientFunctionEquals()` should return `23507044290`.
+
+```js
+assert.strictEqual(eulersTotientFunctionEquals(), 23507044290);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function eulersTotientFunctionEquals() {
+
+  return true;
+}
+
+eulersTotientFunctionEquals();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-249-prime-subset-sums.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-249-prime-subset-sums.md
new file mode 100644
index 00000000000..09232c7c178
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-249-prime-subset-sums.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4671000cf542c50ff79
+title: 'Problem 249: Prime Subset Sums'
+challengeType: 1
+forumTopicId: 301896
+dashedName: problem-249-prime-subset-sums
+---
+
+# --description--
+
+Let $S = \\{2, 3, 5, \ldots, 4999\\}$ be the set of prime numbers less than 5000.
+
+Find the number of subsets of $S$, the sum of whose elements is a prime number.
+
+Enter the rightmost 16 digits as your answer.
+
+# --hints--
+
+`primeSubsetSums()` should return `9275262564250418`.
+
+```js
+assert.strictEqual(primeSubsetSums(), 9275262564250418);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeSubsetSums() {
+
+  return true;
+}
+
+primeSubsetSums();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-25-1000-digit-fibonacci-number.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-25-1000-digit-fibonacci-number.md
new file mode 100644
index 00000000000..25d18d786ef
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-25-1000-digit-fibonacci-number.md
@@ -0,0 +1,85 @@
+---
+id: 5900f3851000cf542c50fe98
+title: 'Problem 25: 1000-digit Fibonacci number'
+challengeType: 1
+forumTopicId: 301897
+dashedName: problem-25-1000-digit-fibonacci-number
+---
+
+# --description--
+
+The Fibonacci sequence is defined by the recurrence relation:
+
+<div style='padding-left: 4em;'>F<sub>n</sub> = F<sub>n−1</sub> + F<sub>n−2</sub>, where F<sub>1</sub> = 1 and F<sub>2</sub> = 1.</div>
+
+Hence the first 12 terms will be:
+
+<div style='padding-left: 4em; display: inline-grid; grid-template-rows: auto; row-gap: 7px;'><div>F<sub>1</sub> = 1</div><div>F<sub>2</sub> = 1</div><div>F<sub>3</sub> = 2</div><div>F<sub>4</sub> = 3</div><div>F<sub>5</sub> = 5</div><div>F<sub>6</sub> = 8</div><div>F<sub>7</sub> = 13</div><div>F<sub>8</sub> = 21</div><div>F<sub>9</sub> = 34</div><div>F<sub>10</sub> = 55</div><div>F<sub>11</sub> = 89</div><div>F<sub>12</sub> = 144</div></div>
+
+The 12th term, F<sub>12</sub>, is the first term to contain three digits.
+
+What is the index of the first term in the Fibonacci sequence to contain `n` digits?
+
+# --hints--
+
+`digitFibonacci(5)` should return a number.
+
+```js
+assert(typeof digitFibonacci(5) === 'number');
+```
+
+`digitFibonacci(5)` should return 21.
+
+```js
+assert.strictEqual(digitFibonacci(5), 21);
+```
+
+`digitFibonacci(10)` should return 45.
+
+```js
+assert.strictEqual(digitFibonacci(10), 45);
+```
+
+`digitFibonacci(15)` should return 69.
+
+```js
+assert.strictEqual(digitFibonacci(15), 69);
+```
+
+`digitFibonacci(20)` should return 93.
+
+```js
+assert.strictEqual(digitFibonacci(20), 93);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function digitFibonacci(n) {
+
+  return n;
+}
+
+digitFibonacci(20);
+```
+
+# --solutions--
+
+```js
+const digitFibonacci = (n) => {
+  const digits = (num) => {
+    return num.toString().length;
+  };
+  let f1 = 1;
+  let f2 = 1;
+  let index = 3;
+  while (true) {
+    let fn = f1 + f2;
+    if (digits(fn) === n) return index;
+    [f1, f2] = [f2, fn];
+    index++;
+  }
+};
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-250-250250.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-250-250250.md
new file mode 100644
index 00000000000..c526154b6e7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-250-250250.md
@@ -0,0 +1,38 @@
+---
+id: 5900f4661000cf542c50ff78
+title: 'Problem 250: 250250'
+challengeType: 1
+forumTopicId: 301898
+dashedName: problem-250-250250
+---
+
+# --description--
+
+Find the number of non-empty subsets of $\\{{1}^{1}, {2}^{2}, {3}^{3}, \ldots, {250250}^{250250}\\}$, the sum of whose elements is divisible by 250. Enter the rightmost 16 digits as your answer.
+
+# --hints--
+
+`twoHundredFifty()` should return `1425480602091519`.
+
+```js
+assert.strictEqual(twoHundredFifty(), 1425480602091519);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function twoHundredFifty() {
+
+  return true;
+}
+
+twoHundredFifty();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-251-cardano-triplets.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-251-cardano-triplets.md
new file mode 100644
index 00000000000..8f4013595f3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-251-cardano-triplets.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4671000cf542c50ff7a
+title: 'Problem 251: Cardano Triplets'
+challengeType: 1
+forumTopicId: 301899
+dashedName: problem-251-cardano-triplets
+---
+
+# --description--
+
+A triplet of positive integers ($a$,$b$,$c$) is called a Cardano Triplet if it satisfies the condition:
+
+$$\sqrt[3]{a + b \sqrt{c}} + \sqrt[3]{a - b \sqrt{c}} = 1$$
+
+For example, (2,1,5) is a Cardano Triplet.
+
+There exist 149 Cardano Triplets for which $a + b + c ≤ 1000$.
+
+Find how many Cardano Triplets exist such that $a + b + c ≤ 110\\,000\\,000$.
+
+# --hints--
+
+`cardanoTriplets()` should return `18946051`.
+
+```js
+assert.strictEqual(cardanoTriplets(), 18946051);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cardanoTriplets() {
+
+  return true;
+}
+
+cardanoTriplets();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-252-convex-holes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-252-convex-holes.md
new file mode 100644
index 00000000000..ec671c067aa
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-252-convex-holes.md
@@ -0,0 +1,51 @@
+---
+id: 5900f4691000cf542c50ff7b
+title: 'Problem 252: Convex Holes'
+challengeType: 1
+forumTopicId: 301900
+dashedName: problem-252-convex-holes
+---
+
+# --description--
+
+Given a set of points on a plane, we define a convex hole to be a convex polygon having as vertices any of the given points and not containing any of the given points in its interior (in addition to the vertices, other given points may lie on the perimeter of the polygon).
+
+As an example, the image below shows a set of twenty points and a few such convex holes. The convex hole shown as a red heptagon has an area equal to 1049694.5 square units, which is the highest possible area for a convex hole on the given set of points.
+
+<img class="img-responsive center-block" alt="set of twenty points and convex holes on plane" src="https://cdn.freecodecamp.org/curriculum/project-euler/convex-holes.gif" style="background-color: white; padding: 10px;" />
+
+For our example, we used the first 20 points ($T_{2k − 1}$, $T_{2k}$), for $k = 1, 2, \ldots, 20$, produced with the pseudo-random number generator:
+
+$$\begin{align}   S_0 & = 290\\,797 \\\\
+  S_{n+1} & = {S_n}^2 \\; \text{mod} \\; 50\\,515\\,093 \\\\ T_n & = (S_n \\; \text{mod} \\; 2000) − 1000 \end{align}$$
+
+i.e. (527, 144), (−488, 732), (−454, −947), …
+
+What is the maximum area for a convex hole on the set containing the first 500 points in the pseudo-random sequence? Specify your answer including one digit after the decimal point.
+
+# --hints--
+
+`convexHoles()` should return `104924`.
+
+```js
+assert.strictEqual(convexHoles(), 104924);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function convexHoles() {
+
+  return true;
+}
+
+convexHoles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-253-tidying-up.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-253-tidying-up.md
new file mode 100644
index 00000000000..3dbeca51b38
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-253-tidying-up.md
@@ -0,0 +1,69 @@
+---
+id: 5900f4691000cf542c50ff7c
+title: 'Problem 253: Tidying up'
+challengeType: 1
+forumTopicId: 301901
+dashedName: problem-253-tidying-up
+---
+
+# --description--
+
+A small child has a "number caterpillar" consisting of forty jigsaw pieces, each with one number on it, which, when connected together in a line, reveal the numbers 1 to 40 in order.
+
+Every night, the child's father has to pick up the pieces of the caterpillar that have been scattered across the play room. He picks up the pieces at random and places them in the correct order.
+
+As the caterpillar is built up in this way, it forms distinct segments that gradually merge together. The number of segments starts at zero (no pieces placed), generally increases up to about eleven or twelve, then tends to drop again before finishing at a single segment (all pieces placed).
+
+For example:
+
+| Piece Placed | Segments So Far |
+| ------------ | --------------- |
+| 12           | 1               |
+| 4            | 2               |
+| 29           | 3               |
+| 6            | 4               |
+| 34           | 5               |
+| 5            | 4               |
+| 35           | 4               |
+| …            | …               |
+
+Let $M$ be the maximum number of segments encountered during a random tidy-up of the caterpillar. For a caterpillar of ten pieces, the number of possibilities for each $M$ is
+
+| M | Possibilities |
+| - | ------------- |
+| 1 | 512           |
+| 2 | 250912        |
+| 3 | 1815264       |
+| 4 | 1418112       |
+| 5 | 144000        |
+
+so the most likely value of $M$ is 3 and the average value is $\frac{385\\,643}{113\\,400} = 3.400732$, rounded to six decimal places.
+
+The most likely value of $M$ for a forty-piece caterpillar is 11; but what is the average value of $M$? Give your answer rounded to six decimal places.
+
+# --hints--
+
+`tidyingUp()` should return `11.492847`.
+
+```js
+assert.strictEqual(tidyingUp(), 11.492847);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function tidyingUp() {
+
+  return true;
+}
+
+tidyingUp();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-254-sums-of-digit-factorials.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-254-sums-of-digit-factorials.md
new file mode 100644
index 00000000000..3d91777d0a4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-254-sums-of-digit-factorials.md
@@ -0,0 +1,48 @@
+---
+id: 5900f46b1000cf542c50ff7d
+title: 'Problem 254: Sums of Digit Factorials'
+challengeType: 1
+forumTopicId: 301902
+dashedName: problem-254-sums-of-digit-factorials
+---
+
+# --description--
+
+Define $f(n)$ as the sum of the factorials of the digits of $n$. For example, $f(342) = 3! + 4! + 2! = 32$.
+
+Define $sf(n)$ as the sum of the digits of $f(n)$. So $sf(342) = 3 + 2 = 5$.
+
+Define $g(i)$ to be the smallest positive integer $n$ such that $sf(n) = i$. Though $sf(342)$ is 5, $sf(25)$ is also 5, and it can be verified that $g(5)$ is 25.
+
+Define $sg(i)$ as the sum of the digits of $g(i)$. So $sg(5) = 2 + 5 = 7$.
+
+Further, it can be verified that $g(20)$ is 267 and $\sum sg(i)$ for $1 ≤ i ≤ 20$ is 156.
+
+What is $\sum sg(i)$ for $1 ≤ i ≤ 150$?
+
+# --hints--
+
+`sumsOfDigitFactorials()` should return `8184523820510`.
+
+```js
+assert.strictEqual(sumsOfDigitFactorials(), 8184523820510);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumsOfDigitFactorials() {
+
+  return true;
+}
+
+sumsOfDigitFactorials();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-255-rounded-square-roots.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-255-rounded-square-roots.md
new file mode 100644
index 00000000000..abfbcfe2047
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-255-rounded-square-roots.md
@@ -0,0 +1,67 @@
+---
+id: 5900f46d1000cf542c50ff7f
+title: 'Problem 255: Rounded Square Roots'
+challengeType: 1
+forumTopicId: 301903
+dashedName: problem-255-rounded-square-roots
+---
+
+# --description--
+
+We define the rounded-square-root of a positive integer $n$ as the square root of $n$ rounded to the nearest integer.
+
+The following procedure (essentially Heron's method adapted to integer arithmetic) finds the rounded-square-root of $n$:
+
+Let $d$ be the number of digits of the number $n$.
+
+If $d$ is odd, set $x_0 = 2 × {10}^{\frac{d - 1}{2}}$.
+
+If $d$ is even, set $x_0 = 7 × {10}^{\frac{d - 2}{2}}$.
+
+Repeat:
+
+$$x_{k + 1} = \left\lfloor\frac{x_k + \left\lceil\frac{n}{x_k}\right\rceil}{2}\right\rfloor$$
+
+until $x_{k + 1} = x_k$.
+
+As an example, let us find the rounded-square-root of $n = 4321$.
+
+$n$ has 4 digits, so $x_0 = 7 × {10}^{\frac{4-2}{2}} = 70$.
+
+$$x_1 = \left\lfloor\frac{70 + \left\lceil\frac{4321}{70}\right\rceil}{2}\right\rfloor = 66 \\\\
+x_2 = \left\lfloor\frac{66 + \left\lceil\frac{4321}{66}\right\rceil}{2}\right\rfloor = 66$$
+
+Since $x_2 = x_1$, we stop here. So, after just two iterations, we have found that the rounded-square-root of 4321 is 66 (the actual square root is 65.7343137…).
+
+The number of iterations required when using this method is surprisingly low. For example, we can find the rounded-square-root of a 5-digit integer ($10\\,000 ≤ n ≤ 99\\,999$) with an average of 3.2102888889 iterations (the average value was rounded to 10 decimal places).
+
+Using the procedure described above, what is the average number of iterations required to find the rounded-square-root of a 14-digit number (${10}^{13} ≤ n &lt; {10}^{14}$)? Give your answer rounded to 10 decimal places.
+
+**Note:** The symbols $⌊x⌋$ and $⌈x⌉$ represent the floor function and ceiling function respectively.
+
+# --hints--
+
+`roundedSquareRoots()` should return `4.447401118`.
+
+```js
+assert.strictEqual(roundedSquareRoots(), 4.447401118);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function roundedSquareRoots() {
+
+  return true;
+}
+
+roundedSquareRoots();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-256-tatami-free-rooms.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-256-tatami-free-rooms.md
new file mode 100644
index 00000000000..a1fba0b5f2a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-256-tatami-free-rooms.md
@@ -0,0 +1,56 @@
+---
+id: 5900f46c1000cf542c50ff7e
+title: 'Problem 256: Tatami-Free Rooms'
+challengeType: 1
+forumTopicId: 301904
+dashedName: problem-256-tatami-free-rooms
+---
+
+# --description--
+
+Tatami are rectangular mats, used to completely cover the floor of a room, without overlap.
+
+Assuming that the only type of available tatami has dimensions 1×2, there are obviously some limitations for the shape and size of the rooms that can be covered.
+
+For this problem, we consider only rectangular rooms with integer dimensions $a$, $b$ and even size $s = a \times b$. We use the term 'size' to denote the floor surface area of the room, and — without loss of generality — we add the condition $a ≤ b$.
+
+There is one rule to follow when laying out tatami: there must be no points where corners of four different mats meet. For example, consider the two arrangements below for a 4×4 room:
+
+<img class="img-responsive center-block" alt="two arragements of mats in 4x4 room" src="https://cdn.freecodecamp.org/curriculum/project-euler/tatami-free-rooms.gif" style="background-color: white; padding: 10px;" />
+
+The arrangement on the left is acceptable, whereas the one on the right is not: a red "<strong><span style="color: red;">X</span></strong>" in the middle, marks the point where four tatami meet.
+
+Because of this rule, certain even-sized rooms cannot be covered with tatami: we call them tatami-free rooms. Further, we define $T(s)$ as the number of tatami-free rooms of size $s$.
+
+The smallest tatami-free room has size $s = 70$ and dimensions 7×10. All the other rooms of size $s = 70$ can be covered with tatami; they are: 1×70, 2×35 and 5×14. Hence, $T(70) = 1$.
+
+Similarly, we can verify that $T(1320) = 5$ because there are exactly 5 tatami-free rooms of size $s = 1320$: 20×66, 22×60, 24×55, 30×44 and 33×40. In fact, $s = 1320$ is the smallest room-size $s$ for which $T(s) = 5$.
+
+Find the smallest room-size $s$ for which $T(s) = 200$.
+
+# --hints--
+
+`tatamiFreeRooms()` should return `85765680`.
+
+```js
+assert.strictEqual(tatamiFreeRooms(), 85765680);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function tatamiFreeRooms() {
+
+  return true;
+}
+
+tatamiFreeRooms();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-257-angular-bisectors.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-257-angular-bisectors.md
new file mode 100644
index 00000000000..60864ac52e1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-257-angular-bisectors.md
@@ -0,0 +1,46 @@
+---
+id: 5900f46e1000cf542c50ff80
+title: 'Problem 257: Angular Bisectors'
+challengeType: 1
+forumTopicId: 301905
+dashedName: problem-257-angular-bisectors
+---
+
+# --description--
+
+Given is an integer sided triangle $ABC$ with sides $a ≤ b ≤ c$ ($AB = c$, $BC = a$ and $AC = b$).
+
+The angular bisectors of the triangle intersect the sides at points $E$, $F$ and $G$ (see picture below).
+
+<img class="img-responsive center-block" alt="triangle ABC, with angular bisectors intersecting sides at the points E, F and G" src="https://cdn.freecodecamp.org/curriculum/project-euler/angular-bisectors.gif" style="background-color: white; padding: 10px;" />
+
+The segments $EF$, $EG$ and $FG$ partition the triangle $ABC$ into four smaller triangles: $AEG$, $BFE$, $CGF$ and $EFG$. It can be proven that for each of these four triangles the ratio $\frac{\text{area}(ABC)}{\text{area}(\text{subtriangle})}$ is rational. However, there exist triangles for which some or all of these ratios are integral.
+
+How many triangles $ABC$ with perimeter $≤ 100\\,000\\,000$ exist so that the ratio $\frac{\text{area}(ABC)}{\text{area}(AEG)}$ is integral?
+
+# --hints--
+
+`angularBisectors()` should return `139012411`.
+
+```js
+assert.strictEqual(angularBisectors(), 139012411);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function angularBisectors() {
+
+  return true;
+}
+
+angularBisectors();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-258-a-lagged-fibonacci-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-258-a-lagged-fibonacci-sequence.md
new file mode 100644
index 00000000000..d21eb673b78
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-258-a-lagged-fibonacci-sequence.md
@@ -0,0 +1,43 @@
+---
+id: 5900f46e1000cf542c50ff81
+title: 'Problem 258: A lagged Fibonacci sequence'
+challengeType: 1
+forumTopicId: 301906
+dashedName: problem-258-a-lagged-fibonacci-sequence
+---
+
+# --description--
+
+A sequence is defined as:
+
+- $g_k = 1$, for $0 ≤ k ≤ 1999$
+- $g_k = g_{k - 2000} + g_{k - 1999}$, for $k ≥ 2000$.
+
+Find $g_k$ mod 20092010 for $k = {10}^{18}$.
+
+# --hints--
+
+`laggedFibonacciSequence()` should return `12747994`.
+
+```js
+assert.strictEqual(laggedFibonacciSequence(), 12747994);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function laggedFibonacciSequence() {
+
+  return true;
+}
+
+laggedFibonacciSequence();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-259-reachable-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-259-reachable-numbers.md
new file mode 100644
index 00000000000..a8fa3ceb470
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-259-reachable-numbers.md
@@ -0,0 +1,49 @@
+---
+id: 5900f4701000cf542c50ff82
+title: 'Problem 259: Reachable Numbers'
+challengeType: 1
+forumTopicId: 301907
+dashedName: problem-259-reachable-numbers
+---
+
+# --description--
+
+A positive integer will be called reachable if it can result from an arithmetic expression obeying the following rules:
+
+- Uses the digits 1 through 9, in that order and exactly once each.
+- Any successive digits can be concatenated (for example, using the digits 2, 3 and 4 we obtain the number 234).
+- Only the four usual binary arithmetic operations (addition, subtraction, multiplication and division) are allowed.
+- Each operation can be used any number of times, or not at all.
+- Unary minus is not allowed.
+- Any number of (possibly nested) parentheses may be used to define the order of operations.
+
+For example, 42 is reachable, since $\frac{1}{23} \times ((4 \times 5) - 6) \times (78 - 9) = 42$.
+
+What is the sum of all positive reachable integers?
+
+# --hints--
+
+`reachableNumbers()` should return `20101196798`.
+
+```js
+assert.strictEqual(reachableNumbers(), 20101196798);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function reachableNumbers() {
+
+  return true;
+}
+
+reachableNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-26-reciprocal-cycles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-26-reciprocal-cycles.md
new file mode 100644
index 00000000000..580ba5807a3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-26-reciprocal-cycles.md
@@ -0,0 +1,68 @@
+---
+id: 5900f3861000cf542c50fe99
+title: 'Problem 26: Reciprocal cycles'
+challengeType: 1
+forumTopicId: 301908
+dashedName: problem-26-reciprocal-cycles
+---
+
+# --description--
+
+A unit fraction contains 1 in the numerator. The decimal representation of the unit fractions with denominators 2 to 10 are given:
+
+<div style='padding-left: 4em; display: inline-grid; grid-template-rows: auto; row-gap: 7px;'><div><sup>1</sup>/<sub>2</sub> = 0.5</div><div><sup>1</sup>/<sub>3</sub> = 0.(3)</div><div><sup>1</sup>/<sub>4</sub> = 0.25</div><div><sup>1</sup>/<sub>5</sub> = 0.2</div><div><sup>1</sup>/<sub>6</sub> = 0.1(6)</div><div><sup>1</sup>/<sub>7</sub> = 0.(142857)</div><div><sup>1</sup>/<sub>8</sub> = 0.125</div><div><sup>1</sup>/<sub>9</sub> = 0.(1)</div><div><sup>1</sup>/<sub>10</sub> = 0.1</div></div>
+
+Where 0.1(6) means 0.166666..., and has a 1-digit recurring cycle. It can be seen that <sup>1</sup>/<sub>7</sub> has a 6-digit recurring cycle.
+
+Find the value of `d` &lt; `n` for which <sup>1</sup>/<sub>d</sub> contains the longest recurring cycle in its decimal fraction part.
+
+# --hints--
+
+`reciprocalCycles(700)` should return a number.
+
+```js
+assert(typeof reciprocalCycles(700) === 'number');
+```
+
+`reciprocalCycles(700)` should return 659.
+
+```js
+assert(reciprocalCycles(700) == 659);
+```
+
+`reciprocalCycles(800)` should return 743.
+
+```js
+assert(reciprocalCycles(800) == 743);
+```
+
+`reciprocalCycles(900)` should return 887.
+
+```js
+assert(reciprocalCycles(900) == 887);
+```
+
+`reciprocalCycles(1000)` should return 983.
+
+```js
+assert(reciprocalCycles(1000) == 983);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function reciprocalCycles(n) {
+
+  return n;
+}
+
+reciprocalCycles(1000);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-260-stone-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-260-stone-game.md
new file mode 100644
index 00000000000..d0724fd1214
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-260-stone-game.md
@@ -0,0 +1,60 @@
+---
+id: 5900f4701000cf542c50ff83
+title: 'Problem 260: Stone Game'
+challengeType: 1
+forumTopicId: 301909
+dashedName: problem-260-stone-game
+---
+
+# --description--
+
+A game is played with three piles of stones and two players.
+
+On each player's turn, the player removes one or more stones from the piles. However, if the player takes stones from more than one pile, the same number of stones must be removed from each of the selected piles.
+
+In other words, the player chooses some $N > 0$ and removes:
+
+- $N$ stones from any single pile; or
+- $N$ stones from each of any two piles ($2N$ total); or
+- $N$ stones from each of the three piles ($3N$ total).
+
+The player taking the last stone(s) wins the game.
+
+A winning configuration is one where the first player can force a win.
+
+For example, (0,0,13), (0,11,11) and (5,5,5) are winning configurations because the first player can immediately remove all stones.
+
+A losing configuration is one where the second player can force a win, no matter what the first player does.
+
+For example, (0,1,2) and (1,3,3) are losing configurations: any legal move leaves a winning configuration for the second player.
+
+Consider all losing configurations ($x_i$,$y_i$,$z_i$) where $x_i ≤ y_i ≤ z_i ≤ 100$. We can verify that $\sum (x_i + y_i + z_i) = 173\\,895$ for these.
+
+Find $\sum (x_i + y_i + z_i)$ where ($x_i$,$y_i$,$z_i$) ranges over the losing configurations with $x_i ≤ y_i ≤ z_i ≤ 1000$.
+
+# --hints--
+
+`stoneGame()` should return `167542057`.
+
+```js
+assert.strictEqual(stoneGame(), 167542057);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function stoneGame() {
+
+  return true;
+}
+
+stoneGame();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-261-pivotal-square-sums.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-261-pivotal-square-sums.md
new file mode 100644
index 00000000000..af6e1b5aa27
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-261-pivotal-square-sums.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4711000cf542c50ff84
+title: 'Problem 261: Pivotal Square Sums'
+challengeType: 1
+forumTopicId: 301910
+dashedName: problem-261-pivotal-square-sums
+---
+
+# --description--
+
+Let us call a positive integer $k$ a square-pivot, if there is a pair of integers $m > 0$ and $n ≥ k$, such that the sum of the ($m + 1$) consecutive squares up to $k$ equals the sum of the $m$ consecutive squares from ($n + 1$) on:
+
+$${(k - m)}^2 + \ldots + k^2 = {(n + 1)}^2 + \ldots + {(n + m)}^2$$
+
+Some small square-pivots are
+
+$$\begin{align}   & \mathbf{4}: 3^2 + \mathbf{4}^2 = 5^2 \\\\
+  & \mathbf{21}: {20}^2 + \mathbf{21}^2 = {29}^2 \\\\   & \mathbf{24}: {21}^2 + {22}^2 + {23}^2 + \mathbf{24}^2 = {25}^2 + {26}^2 + {27}^2 \\\\
+  & \mathbf{110}: {108}^2 + {109}^2 + \mathbf{110}^2 = {133}^2 + {134}^2 \\\\ \end{align}$$
+
+Find the sum of all distinct square-pivots $≤ {10}^{10}$.
+
+# --hints--
+
+`pivotalSquareSums()` should return `238890850232021`.
+
+```js
+assert.strictEqual(pivotalSquareSums(), 238890850232021);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pivotalSquareSums() {
+
+  return true;
+}
+
+pivotalSquareSums();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-262-mountain-range.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-262-mountain-range.md
new file mode 100644
index 00000000000..d340e834fa6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-262-mountain-range.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4731000cf542c50ff85
+title: 'Problem 262: Mountain Range'
+challengeType: 1
+forumTopicId: 301911
+dashedName: problem-262-mountain-range
+---
+
+# --description--
+
+The following equation represents the continuous topography of a mountainous region, giving the elevation $h$ at any point ($x$,$y$):
+
+$$h = \left(5000 - \frac{x^2 + y^2 + xy}{200} + \frac{25(x + y)}{2}\right) \times e^{-\left|\frac{x^2 + y^2}{1\\,000\\,000} - \frac{3(x + y)}{2000} + \frac{7}{10}\right|}$$
+
+A mosquito intends to fly from A(200,200) to B(1400,1400), without leaving the area given by $0 ≤ x$, $y ≤ 1600$.
+
+Because of the intervening mountains, it first rises straight up to a point A', having elevation $f$. Then, while remaining at the same elevation $f$, it flies around any obstacles until it arrives at a point B' directly above B.
+
+First, determine $f_{min}$ which is the minimum constant elevation allowing such a trip from A to B, while remaining in the specified area. Then, find the length of the shortest path between A' and B', while flying at that constant elevation $f_{min}$.
+
+Give that length as your answer, rounded to three decimal places.
+
+**Note:** For convenience, the elevation function shown above is repeated below, in a form suitable for most programming languages: `h=( 5000-0.005*(x*x+y*y+x*y)+12.5*(x+y) )* exp( -abs(0.000001*(x*x+y*y)-0.0015*(x+y)+0.7) )`.
+
+# --hints--
+
+`mountainRange()` should return `2531.205`.
+
+```js
+assert.strictEqual(mountainRange(), 2531.205);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function mountainRange() {
+
+  return true;
+}
+
+mountainRange();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-263-an-engineers-dream-come-true.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-263-an-engineers-dream-come-true.md
new file mode 100644
index 00000000000..8fec64cc250
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-263-an-engineers-dream-come-true.md
@@ -0,0 +1,57 @@
+---
+id: 5900f4741000cf542c50ff86
+title: 'Problem 263: An engineers'' dream come true'
+challengeType: 1
+forumTopicId: 301912
+dashedName: problem-263-an-engineers-dream-come-true
+---
+
+# --description--
+
+Consider the number 6. The divisors of 6 are: 1,2,3 and 6.
+
+Every number from 1 up to and including 6 can be written as a sum of distinct divisors of 6:
+
+$1 = 1$, $2 = 2$, $3 = 1 + 2$, $4 = 1 + 3$, $5 = 2 + 3$, $6 = 6$.
+
+A number $n$ is called a practical number if every number from 1 up to and including $n$ can be expressed as a sum of distinct divisors of $n$.
+
+A pair of consecutive prime numbers with a difference of six is called a sexy pair (since "sex" is the Latin word for "six"). The first sexy pair is (23, 29).
+
+We may occasionally find a triple-pair, which means three consecutive sexy prime pairs, such that the second member of each pair is the first member of the next pair.
+
+We shall call a number $n$ such that:
+
+- ($n - 9$, $n - 3$), ($n - 3$, $n + 3$), ($n + 3$, $n + 9$) form a triple-pair, and
+- the numbers $n - 8$, $n - 4$, $n$, $n + 4$ and $n + 8$ are all practical,
+
+an engineers’ paradise.
+
+Find the sum of the first four engineers’ paradises.
+
+# --hints--
+
+`engineersDreamComeTrue()` should return `2039506520`.
+
+```js
+assert.strictEqual(engineersDreamComeTrue(), 2039506520);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function engineersDreamComeTrue() {
+
+  return true;
+}
+
+engineersDreamComeTrue();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-264-triangle-centres.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-264-triangle-centres.md
new file mode 100644
index 00000000000..dc22c0cf51b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-264-triangle-centres.md
@@ -0,0 +1,71 @@
+---
+id: 5900f4751000cf542c50ff87
+title: 'Problem 264: Triangle Centres'
+challengeType: 1
+forumTopicId: 301913
+dashedName: problem-264-triangle-centres
+---
+
+# --description--
+
+Consider all the triangles having:
+
+- All their vertices on lattice points.
+- Circumcentre at the origin O.
+- Orthocentre at the point H(5, 0).
+
+There are nine such triangles having a $\text{perimeter} ≤ 50$.
+
+Listed and shown in ascending order of their perimeter, they are:
+
+<table>
+  <tbody>
+    <tr>
+      <td>
+A(-4, 3), B(5, 0), C(4, -3)<br>
+A(4, 3), B(5, 0), C(-4, -3)<br>
+A(-3, 4), B(5, 0), C(3, -4)<br>
+<br><br>
+A(3, 4), B(5, 0), C(-3, -4)<br>
+A(0, 5), B(5, 0), C(0, -5)<br>
+A(1, 8), B(8, -1), C(-4, -7)<br>
+<br><br>
+A(8, 1), B(1, -8), C(-4, 7)<br>
+A(2, 9), B(9, -2), C(-6, -7)<br>
+A(9, 2), B(2, -9), C(-6, 7)<br>
+      </td>
+      <td><img class="img-responsive center-block" alt="nine triangles ABC with perimeter ≤ 50" src="https://cdn.freecodecamp.org/curriculum/project-euler/triangle-centres.gif" style="background-color: white; padding: 10px;"></td>
+    </tr>
+  </tbody>
+</table>
+
+The sum of their perimeters, rounded to four decimal places, is 291.0089.
+
+Find all such triangles with a $\text{perimeter} ≤ {10}^5$. Enter as your answer the sum of their perimeters rounded to four decimal places.
+
+# --hints--
+
+`triangleCentres()` should return `2816417.1055`.
+
+```js
+assert.strictEqual(triangleCentres(), 2816417.1055);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function triangleCentres() {
+
+  return true;
+}
+
+triangleCentres();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-265-binary-circles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-265-binary-circles.md
new file mode 100644
index 00000000000..4262d97c798
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-265-binary-circles.md
@@ -0,0 +1,53 @@
+---
+id: 5900f4761000cf542c50ff88
+title: 'Problem 265: Binary Circles'
+challengeType: 1
+forumTopicId: 301914
+dashedName: problem-265-binary-circles
+---
+
+# --description--
+
+$2^N$ binary digits can be placed in a circle so that all the $N$-digit clockwise subsequences are distinct.
+
+For $N = 3$, two such circular arrangements are possible, ignoring rotations:
+
+<img class="img-responsive center-block" alt="two circular arrangements for N = 3" src="https://cdn.freecodecamp.org/curriculum/project-euler/binary-circles.gif" style="background-color: white; padding: 10px;" />
+
+For the first arrangement, the 3-digit subsequences, in clockwise order, are: 000, 001, 010, 101, 011, 111, 110 and 100.
+
+Each circular arrangement can be encoded as a number by concatenating the binary digits starting with the subsequence of all zeros as the most significant bits and proceeding clockwise. The two arrangements for $N = 3$ are thus represented as 23 and 29:
+
+$${00010111}_2 = 23\\\\
+{00011101}_2 = 29$$
+
+Calling $S(N)$ the sum of the unique numeric representations, we can see that $S(3) = 23 + 29 = 52$.
+
+Find $S(5)$.
+
+# --hints--
+
+`binaryCircles()` should return `209110240768`.
+
+```js
+assert.strictEqual(binaryCircles(), 209110240768);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function binaryCircles() {
+
+  return true;
+}
+
+binaryCircles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-266-pseudo-square-root.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-266-pseudo-square-root.md
new file mode 100644
index 00000000000..2b22e967efb
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-266-pseudo-square-root.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4771000cf542c50ff89
+title: 'Problem 266: Pseudo Square Root'
+challengeType: 1
+forumTopicId: 301915
+dashedName: problem-266-pseudo-square-root
+---
+
+# --description--
+
+The divisors of 12 are: 1,2,3,4,6 and 12.
+
+The largest divisor of 12 that does not exceed the square root of 12 is 3.
+
+We shall call the largest divisor of an integer $n$ that does not exceed the square root of $n$ the pseudo square root ($PSR$) of $n$.
+
+It can be seen that $PSR(3102) = 47$.
+
+Let $p$ be the product of the primes below 190. Find $PSR(p)\bmod {10}^{16}$.
+
+# --hints--
+
+`pseudoSquareRoot()` should return `1096883702440585`.
+
+```js
+assert.strictEqual(pseudoSquareRoot(), 1096883702440585);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pseudoSquareRoot() {
+
+  return true;
+}
+
+pseudoSquareRoot();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-267-billionaire.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-267-billionaire.md
new file mode 100644
index 00000000000..8dbe1d8ab66
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-267-billionaire.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4771000cf542c50ff8a
+title: 'Problem 267: Billionaire'
+challengeType: 1
+forumTopicId: 301916
+dashedName: problem-267-billionaire
+---
+
+# --description--
+
+You are given a unique investment opportunity.
+
+Starting with £1 of capital, you can choose a fixed proportion, $f$, of your capital to bet on a fair coin toss repeatedly for 1000 tosses.
+
+Your return is double your bet for heads and you lose your bet for tails.
+
+For example, if $f = \frac{1}{4}$, for the first toss you bet £0.25, and if heads comes up you win £0.5 and so then have £1.5. You then bet £0.375 and if the second toss is tails, you have £1.125.
+
+Choosing $f$ to maximize your chances of having at least £1,000,000,000 after 1,000 flips, what is the chance that you become a billionaire?
+
+All computations are assumed to be exact (no rounding), but give your answer rounded to 12 digits behind the decimal point in the form 0.abcdefghijkl.
+
+# --hints--
+
+`billionaire()` should return `0.999992836187`.
+
+```js
+assert.strictEqual(billionaire(), 0.999992836187);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function billionaire() {
+
+  return true;
+}
+
+billionaire();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-268-counting-numbers-with-at-least-four-distinct-prime-factors-less-than-100.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-268-counting-numbers-with-at-least-four-distinct-prime-factors-less-than-100.md
new file mode 100644
index 00000000000..bd295d89e67
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-268-counting-numbers-with-at-least-four-distinct-prime-factors-less-than-100.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4791000cf542c50ff8b
+title: >-
+  Problem 268: Counting numbers with at least four distinct prime factors less than 100
+challengeType: 1
+forumTopicId: 301917
+dashedName: >-
+  problem-268-counting-numbers-with-at-least-four-distinct-prime-factors-less-than-100
+---
+
+# --description--
+
+It can be verified that there are 23 positive integers less than 1000 that are divisible by at least four distinct primes less than 100.
+
+Find how many positive integers less than ${10}^{16}$ are divisible by at least four distinct primes less than 100.
+
+# --hints--
+
+`fourDistinctPrimeFactors()` should return `785478606870985`.
+
+```js
+assert.strictEqual(fourDistinctPrimeFactors(), 785478606870985);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function fourDistinctPrimeFactors() {
+
+  return true;
+}
+
+fourDistinctPrimeFactors();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-269-polynomials-with-at-least-one-integer-root.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-269-polynomials-with-at-least-one-integer-root.md
new file mode 100644
index 00000000000..3b66b2a2ab1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-269-polynomials-with-at-least-one-integer-root.md
@@ -0,0 +1,54 @@
+---
+id: 5900f4791000cf542c50ff8c
+title: 'Problem 269: Polynomials with at least one integer root'
+challengeType: 1
+forumTopicId: 301918
+dashedName: problem-269-polynomials-with-at-least-one-integer-root
+---
+
+# --description--
+
+A root or zero of a polynomial $P(x)$ is a solution to the equation $P(x) = 0$.
+
+Define $P_n$ as the polynomial whose coefficients are the digits of $n$.
+
+For example, $P_{5703}(x) = 5x^3 + 7x^2 + 3$.
+
+We can see that:
+
+- $P_n(0)$ is the last digit of $n$,
+- $P_n(1)$ is the sum of the digits of $n$,
+- $Pn(10)$ is $n$ itself.
+
+Define $Z(k)$ as the number of positive integers, $n$, not exceeding $k$ for which the polynomial $P_n$ has at least one integer root.
+
+It can be verified that $Z(100\\,000)$ is 14696.
+
+What is $Z({10}^{16})$?
+
+# --hints--
+
+`polynomialsWithOneIntegerRoot()` should return `1311109198529286`.
+
+```js
+assert.strictEqual(polynomialsWithOneIntegerRoot(), 1311109198529286);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function polynomialsWithOneIntegerRoot() {
+
+  return true;
+}
+
+polynomialsWithOneIntegerRoot();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-27-quadratic-primes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-27-quadratic-primes.md
new file mode 100644
index 00000000000..e7c8ebe01eb
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-27-quadratic-primes.md
@@ -0,0 +1,78 @@
+---
+id: 5900f3871000cf542c50fe9a
+title: 'Problem 27: Quadratic primes'
+challengeType: 1
+forumTopicId: 301919
+dashedName: problem-27-quadratic-primes
+---
+
+# --description--
+
+Euler discovered the remarkable quadratic formula:
+
+<div style='margin-left: 4em;'>$n^2 + n + 41$</div>
+
+It turns out that the formula will produce 40 primes for the consecutive integer values $0 \\le n \\le 39$. However, when $n = 40, 40^2 + 40 + 41 = 40(40 + 1) + 41$ is divisible by 41, and certainly when $n = 41, 41^2 + 41 + 41$ is clearly divisible by 41.
+
+The incredible formula $n^2 - 79n + 1601$ was discovered, which produces 80 primes for the consecutive values $0 \\le n \\le 79$. The product of the coefficients, −79 and 1601, is −126479.
+
+Considering quadratics of the form:
+
+<div style='margin-left: 4em;'>
+  $n^2 + an + b$, where $|a| < range$ and $|b| \le range$<br>
+  where $|n|$ is the modulus/absolute value of $n$<br>
+  e.g. $|11| = 11$ and $|-4| = 4$<br>
+</div>
+
+Find the product of the coefficients, $a$ and $b$, for the quadratic expression that produces the maximum number of primes for consecutive values of $n$, starting with $n = 0$.
+
+# --hints--
+
+`quadraticPrimes(200)` should return a number.
+
+```js
+assert(typeof quadraticPrimes(200) === 'number');
+```
+
+`quadraticPrimes(200)` should return -4925.
+
+```js
+assert(quadraticPrimes(200) == -4925);
+```
+
+`quadraticPrimes(500)` should return -18901.
+
+```js
+assert(quadraticPrimes(500) == -18901);
+```
+
+`quadraticPrimes(800)` should return -43835.
+
+```js
+assert(quadraticPrimes(800) == -43835);
+```
+
+`quadraticPrimes(1000)` should return -59231.
+
+```js
+assert(quadraticPrimes(1000) == -59231);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function quadraticPrimes(range) {
+
+  return range;
+}
+
+quadraticPrimes(1000);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-270-cutting-squares.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-270-cutting-squares.md
new file mode 100644
index 00000000000..0458e257f05
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-270-cutting-squares.md
@@ -0,0 +1,48 @@
+---
+id: 5900f47c1000cf542c50ff8e
+title: 'Problem 270: Cutting Squares'
+challengeType: 1
+forumTopicId: 301920
+dashedName: problem-270-cutting-squares
+---
+
+# --description--
+
+A square piece of paper with integer dimensions $N×N$ is placed with a corner at the origin and two of its sides along the $x$- and $y$-axes. Then, we cut it up respecting the following rules:
+
+- We only make straight cuts between two points lying on different sides of the square, and having integer coordinates.
+- Two cuts cannot cross, but several cuts can meet at the same border point.
+- Proceed until no more legal cuts can be made.
+
+Counting any reflections or rotations as distinct, we call $C(N)$ the number of ways to cut an $N×N$ square. For example, $C(1) = 2$ and $C(2) = 30$ (shown below).
+
+<img class="img-responsive center-block" alt="ways to cut 2x2 square, counting reflections and rotations as distinct" src="https://cdn.freecodecamp.org/curriculum/project-euler/cutting-squares.gif" style="background-color: white; padding: 10px;" />
+
+What is $C(30)\bmod {10}^8$ ?
+
+# --hints--
+
+`cuttingSquares()` should return `82282080`.
+
+```js
+assert.strictEqual(cuttingSquares(), 82282080);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cuttingSquares() {
+
+  return true;
+}
+
+cuttingSquares();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-271-modular-cubes-part-1.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-271-modular-cubes-part-1.md
new file mode 100644
index 00000000000..f1dbf4b5666
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-271-modular-cubes-part-1.md
@@ -0,0 +1,42 @@
+---
+id: 5900f47b1000cf542c50ff8d
+title: 'Problem 271: Modular Cubes, part 1'
+challengeType: 1
+forumTopicId: 301921
+dashedName: problem-271-modular-cubes-part-1
+---
+
+# --description--
+
+For a positive number $n$, define $S(n)$ as the sum of the integers $x$, for which $1 < x < n$ and $x^3 \equiv 1\bmod n$.
+
+When $n = 91$, there are 8 possible values for $x$, namely: 9, 16, 22, 29, 53, 74, 79, 81. Thus, $S(91) = 9 + 16 + 22 + 29 + 53 + 74 + 79 + 81 = 363$.
+
+Find $S(13\\,082\\,761\\,331\\,670\\,030)$.
+
+# --hints--
+
+`modularCubesOne()` should return `4617456485273130000`.
+
+```js
+assert.strictEqual(modularCubesOne(), 4617456485273130000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function modularCubesOne() {
+
+  return true;
+}
+
+modularCubesOne();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-272-modular-cubes-part-2.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-272-modular-cubes-part-2.md
new file mode 100644
index 00000000000..d764ea6563b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-272-modular-cubes-part-2.md
@@ -0,0 +1,42 @@
+---
+id: 5900f47d1000cf542c50ff8f
+title: 'Problem 272: Modular Cubes, part 2'
+challengeType: 1
+forumTopicId: 301922
+dashedName: problem-272-modular-cubes-part-2
+---
+
+# --description--
+
+For a positive number $n$, define $C(n)$ as the number of the integers $x$, for which $1 < x < n$ and $x^3 \equiv 1\bmod n$.
+
+When $n = 91$, there are 8 possible values for $x$, namely: 9, 16, 22, 29, 53, 74, 79, 81. Thus, $C(91) = 8$.
+
+Find the sum of the positive numbers $n ≤ {10}^{11}$ for which $C(n)=242$.
+
+# --hints--
+
+`modularCubesTwo()` should return `8495585919506151000`.
+
+```js
+assert.strictEqual(modularCubesTwo(), 8495585919506151000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function modularCubesTwo() {
+
+  return true;
+}
+
+modularCubesTwo();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-273-sum-of-squares.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-273-sum-of-squares.md
new file mode 100644
index 00000000000..d5ffc27c633
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-273-sum-of-squares.md
@@ -0,0 +1,48 @@
+---
+id: 5900f47e1000cf542c50ff90
+title: 'Problem 273: Sum of Squares'
+challengeType: 1
+forumTopicId: 301923
+dashedName: problem-273-sum-of-squares
+---
+
+# --description--
+
+Consider equations of the form: $a^2 + b^2 = N$, $0 ≤ a ≤ b$, $a$, $b$ and $N$ integer.
+
+For $N = 65$ there are two solutions:
+
+$a = 1, b = 8$ and $a = 4, b = 7$.
+
+We call $S(N)$ the sum of the values of $a$ of all solutions of $a^2 + b^2 = N$, $0 ≤ a ≤ b$, $a$, $b$ and $N$ integer.
+
+Thus $S(65) = 1 + 4 = 5$.
+
+Find $\sum S(N)$, for all squarefree $N$ only divisible by primes of the form $4k + 1$ with $4k + 1 &lt; 150$.
+
+# --hints--
+
+`sumOfSquares()` should return `2032447591196869000`.
+
+```js
+assert.strictEqual(sumOfSquares(), 2032447591196869000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumOfSquares() {
+
+  return true;
+}
+
+sumOfSquares();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-274-divisibility-multipliers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-274-divisibility-multipliers.md
new file mode 100644
index 00000000000..bf56b697151
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-274-divisibility-multipliers.md
@@ -0,0 +1,52 @@
+---
+id: 5900f47f1000cf542c50ff91
+title: 'Problem 274: Divisibility Multipliers'
+challengeType: 1
+forumTopicId: 301924
+dashedName: problem-274-divisibility-multipliers
+---
+
+# --description--
+
+For each integer $p > 1$ coprime to 10 there is a positive divisibility multiplier $m &lt; p$ which preserves divisibility by $p$ for the following function on any positive integer, $n$:
+
+$f(n) = (\text{all but the last digit of} \\; n) + (\text{the last digit of} \\; n) \times m$
+
+That is, if $m$ is the divisibility multiplier for $p$, then $f(n)$ is divisible by $p$ if and only if $n$ is divisible by $p$.
+
+(When $n$ is much larger than $p$, $f(n)$ will be less than $n$ and repeated application of $f$ provides a multiplicative divisibility test for $p$.)
+
+For example, the divisibility multiplier for 113 is 34.
+
+$f(76275) = 7627 + 5 \times 34 = 7797$: 76275 and 7797 are both divisible by 113
+
+$f(12345) = 1234 + 5 \times 34 = 1404$: 12345 and 1404 are both not divisible by 113
+
+The sum of the divisibility multipliers for the primes that are coprime to 10 and less than 1000 is 39517. What is the sum of the divisibility multipliers for the primes that are coprime to 10 and less than ${10}^7$?
+
+# --hints--
+
+`divisibilityMultipliers()` should return `1601912348822`.
+
+```js
+assert.strictEqual(divisibilityMultipliers(), 1601912348822);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function divisibilityMultipliers() {
+
+  return true;
+}
+
+divisibilityMultipliers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-275-balanced-sculptures.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-275-balanced-sculptures.md
new file mode 100644
index 00000000000..decc755a9ee
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-275-balanced-sculptures.md
@@ -0,0 +1,51 @@
+---
+id: 5900f4801000cf542c50ff92
+title: 'Problem 275: Balanced Sculptures'
+challengeType: 1
+forumTopicId: 301925
+dashedName: problem-275-balanced-sculptures
+---
+
+# --description--
+
+Let us define a balanced sculpture of order $n$ as follows:
+
+- A polyomino made up of $n + 1$ tiles known as the blocks ($n$ tiles) and the plinth (remaining tile);
+- the plinth has its centre at position ($x = 0$, $y = 0$);
+- the blocks have $y$-coordinates greater than zero (so the plinth is the unique lowest tile);
+- the centre of mass of all the blocks, combined, has $x$-coordinate equal to zero.
+
+When counting the sculptures, any arrangements which are simply reflections about the $y$-axis, are <u>not</u> counted as distinct. For example, the 18 balanced sculptures of order 6 are shown below; note that each pair of mirror images (about the $y$-axis) is counted as one sculpture:
+
+<img class="img-responsive center-block" alt="18 balanced sculptures of order 6" src="https://cdn.freecodecamp.org/curriculum/project-euler/balanced-sculptures.gif" style="background-color: white; padding: 10px;" />
+
+There are 964 balanced sculptures of order 10 and 360505 of order 15.
+
+How many balanced sculptures are there of order 18?
+
+# --hints--
+
+`balancedSculptures()` should return `15030564`.
+
+```js
+assert.strictEqual(balancedSculptures(), 15030564);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function balancedSculptures() {
+
+  return true;
+}
+
+balancedSculptures();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-276-primitive-triangles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-276-primitive-triangles.md
new file mode 100644
index 00000000000..26ce00839b4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-276-primitive-triangles.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4801000cf542c50ff93
+title: 'Problem 276: Primitive Triangles'
+challengeType: 1
+forumTopicId: 301926
+dashedName: problem-276-primitive-triangles
+---
+
+# --description--
+
+Consider the triangles with integer sides $a$, $b$ and $c$ with $a ≤ b ≤ c$.
+
+An integer sided triangle $(a,b,c)$ is called primitive if $gcd(a,b,c) = 1$.
+
+How many primitive integer sided triangles exist with a perimeter not exceeding $10\\,000\\,000$?
+
+# --hints--
+
+`primitiveTriangles()` should return `5777137137739633000`.
+
+```js
+assert.strictEqual(primitiveTriangles(), 5777137137739633000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primitiveTriangles() {
+
+  return true;
+}
+
+primitiveTriangles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-277-a-modified-collatz-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-277-a-modified-collatz-sequence.md
new file mode 100644
index 00000000000..c80635aa3d8
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-277-a-modified-collatz-sequence.md
@@ -0,0 +1,56 @@
+---
+id: 5900f4811000cf542c50ff94
+title: 'Problem 277: A Modified Collatz sequence'
+challengeType: 1
+forumTopicId: 301927
+dashedName: problem-277-a-modified-collatz-sequence
+---
+
+# --description--
+
+A modified Collatz sequence of integers is obtained from a starting value $a_1$ in the following way:
+
+$a_{n + 1} = \frac{a_n}{3}$ if $a_n$ is divisible by 3. We shall denote this as a large downward step, "D".
+
+$a_{n + 1} = \frac{4a_n + 2}{3}$ if $a_n$ divided by 3 gives a remainder of 1. We shall denote this as an upward step, "U".
+
+$a_{n + 1} = \frac{2a_n - 1}{3}$ if $a_n$ divided by 3 gives a remainder of 2. We shall denote this as a small downward step, "d".
+
+The sequence terminates when some $a_n = 1$.
+
+Given any integer, we can list out the sequence of steps. For instance if $a_1 = 231$, then the sequence $\\{a_n\\} = \\{231, 77, 51, 17, 11, 7, 10, 14, 9, 3, 1\\}$ corresponds to the steps "DdDddUUdDD".
+
+Of course, there are other sequences that begin with that same sequence "DdDddUUdDD....".
+
+For instance, if $a_1 = 1004064$, then the sequence is DdDddUUdDDDdUDUUUdDdUUDDDUdDD.
+
+In fact, 1004064 is the smallest possible $a_1 > {10}^6$ that begins with the sequence DdDddUUdDD.
+
+What is the smallest $a_1 > {10}^{15}$ that begins with the sequence "UDDDUdddDDUDDddDdDddDDUDDdUUDd"?
+
+# --hints--
+
+`modifiedCollatzSequence()` should return `1125977393124310`.
+
+```js
+assert.strictEqual(modifiedCollatzSequence(), 1125977393124310);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function modifiedCollatzSequence() {
+
+  return true;
+}
+
+modifiedCollatzSequence();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-278-linear-combinations-of-semiprimes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-278-linear-combinations-of-semiprimes.md
new file mode 100644
index 00000000000..215c51cb036
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-278-linear-combinations-of-semiprimes.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4831000cf542c50ff95
+title: 'Problem 278: Linear Combinations of Semiprimes'
+challengeType: 1
+forumTopicId: 301928
+dashedName: problem-278-linear-combinations-of-semiprimes
+---
+
+# --description--
+
+Given the values of integers $1 &lt; a_1 &lt; a_2 &lt; \ldots &lt; a_n$, consider the linear combination $q_1a_1 + q_2a_2 + \ldots + q_na_n = b$, using only integer values $q_k ≥ 0$.
+
+Note that for a given set of $a_k$, it may be that not all values of $b$ are possible. For instance, if $a_1 = 5$ and $a_2 = 7$, there are no $q_1 ≥ 0$ and $q_2 ≥ 0$ such that $b$ could be 1, 2, 3, 4, 6, 8, 9, 11, 13, 16, 18 or 23.
+
+In fact, 23 is the largest impossible value of $b$ for $a_1 = 5$ and $a_2 = 7$. We therefore call $f(5, 7) = 23$. Similarly, it can be shown that $f(6, 10, 15)=29$ and $f(14, 22, 77) = 195$.
+
+Find $\sum f(pq,pr,qr)$, where $p$, $q$ and $r$ are prime numbers and $p &lt; q &lt; r &lt; 5000$.
+
+# --hints--
+
+`linearCombinationOfSemiprimes()` should return `1228215747273908500`.
+
+```js
+assert.strictEqual(linearCombinationOfSemiprimes(), 1228215747273908500);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function linearCombinationOfSemiprimes() {
+
+  return true;
+}
+
+linearCombinationOfSemiprimes();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-279-triangles-with-integral-sides-and-an-integral-angle.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-279-triangles-with-integral-sides-and-an-integral-angle.md
new file mode 100644
index 00000000000..9d50a5ebc61
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-279-triangles-with-integral-sides-and-an-integral-angle.md
@@ -0,0 +1,38 @@
+---
+id: 5900f4841000cf542c50ff96
+title: 'Problem 279: Triangles with integral sides and an integral angle'
+challengeType: 1
+forumTopicId: 301929
+dashedName: problem-279-triangles-with-integral-sides-and-an-integral-angle
+---
+
+# --description--
+
+How many triangles are there with integral sides, at least one integral angle (measured in degrees), and a perimeter that does not exceed ${10}^8$?
+
+# --hints--
+
+`trianglesWithIntegralSidesAndAngle()` should return `416577688`.
+
+```js
+assert.strictEqual(trianglesWithIntegralSidesAndAngle(), 416577688);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function trianglesWithIntegralSidesAndAngle() {
+
+  return true;
+}
+
+trianglesWithIntegralSidesAndAngle();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-28-number-spiral-diagonals.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-28-number-spiral-diagonals.md
new file mode 100644
index 00000000000..eee50073f68
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-28-number-spiral-diagonals.md
@@ -0,0 +1,83 @@
+---
+id: 5900f3881000cf542c50fe9b
+title: 'Problem 28: Number spiral diagonals'
+challengeType: 1
+forumTopicId: 301930
+dashedName: problem-28-number-spiral-diagonals
+---
+
+# --description--
+
+Starting with the number 1 and moving to the right in a clockwise direction a 5 by 5 spiral is formed as follows:
+
+<div style='padding-left: 4em;'>
+  <div style='color: red; display: inline;'>21</div> 22 23 24 <div style='color: red; display: inline;'>25</div><br>
+  20  <div style='color: red; display: inline;'>7</div>  8  <div style='color: red; display: inline;'>9</div> 10<br>
+  19  6  <div style='color: red; display: inline;'>1</div>  2 11<br>
+  18  <div style='color: red; display: inline;'>5</div>  4  <div style='color: red; display: inline;'>3</div> 12<br>
+  <div style='color: red; display: inline;'>17</div> 16 15 14 <div style='color: red; display: inline;'>13</div><br>
+</div>
+
+It can be verified that the sum of the numbers on the diagonals is 101.
+
+What is the sum of the numbers on the diagonals in an `n` by `n` spiral formed in the same way?
+
+# --hints--
+
+`spiralDiagonals(101)` should return a number.
+
+```js
+assert(typeof spiralDiagonals(101) === 'number');
+```
+
+`spiralDiagonals(101)` should return 692101.
+
+```js
+assert(spiralDiagonals(101) == 692101);
+```
+
+`spiralDiagonals(303)` should return 18591725.
+
+```js
+assert(spiralDiagonals(303) == 18591725);
+```
+
+`spiralDiagonals(505)` should return 85986601.
+
+```js
+assert(spiralDiagonals(505) == 85986601);
+```
+
+`spiralDiagonals(1001)` should return 669171001.
+
+```js
+assert(spiralDiagonals(1001) == 669171001);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function spiralDiagonals(n) {
+
+  return n;
+}
+
+spiralDiagonals(1001);
+```
+
+# --solutions--
+
+```js
+const spiralDiagonals = (n) => {
+  const Sn2 = (n) => {
+    return n*(n+1)*(2*n+1)/6;
+  };
+  const Sn = (n) => {
+    return n*(n+1)/2;
+  };
+  let sum = (Sn2(n-1) + Sn(n-1) + n-1) + (Math.floor(n/2) + Sn2(n));
+  return sum;
+};
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-280-ant-and-seeds.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-280-ant-and-seeds.md
new file mode 100644
index 00000000000..5057b8bd47c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-280-ant-and-seeds.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4841000cf542c50ff97
+title: 'Problem 280: Ant and seeds'
+challengeType: 1
+forumTopicId: 301931
+dashedName: problem-280-ant-and-seeds
+---
+
+# --description--
+
+A laborious ant walks randomly on a 5x5 grid. The walk starts from the central square. At each step, the ant moves to an adjacent square at random, without leaving the grid; thus there are 2, 3 or 4 possible moves at each step depending on the ant's position.
+
+At the start of the walk, a seed is placed on each square of the lower row. When the ant isn't carrying a seed and reaches a square of the lower row containing a seed, it will start to carry the seed. The ant will drop the seed on the first empty square of the upper row it eventually reaches.
+
+What's the expected number of steps until all seeds have been dropped in the top row? Give your answer rounded to 6 decimal places.
+
+# --hints--
+
+`antAndSeeds()` should return `430.088247`.
+
+```js
+assert.strictEqual(antAndSeeds(), 430.088247);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function antAndSeeds() {
+
+  return true;
+}
+
+antAndSeeds();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-281-pizza-toppings.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-281-pizza-toppings.md
new file mode 100644
index 00000000000..60b84a893f8
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-281-pizza-toppings.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4861000cf542c50ff98
+title: 'Problem 281: Pizza Toppings'
+challengeType: 1
+forumTopicId: 301932
+dashedName: problem-281-pizza-toppings
+---
+
+# --description--
+
+You are given a pizza (perfect circle) that has been cut into $m·n$ equal pieces and you want to have exactly one topping on each slice.
+
+Let $f(m,n)$ denote the number of ways you can have toppings on the pizza with $m$ different toppings ($m ≥ 2$), using each topping on exactly $n$ slices ($n ≥ 1$). Reflections are considered distinct, rotations are not.
+
+Thus, for instance, $f(2,1) = 1$, $f(2,2) = f(3,1) = 2$ and $f(3,2) = 16$. $f(3,2)$ is shown below:
+
+<img class="img-responsive center-block" alt="animation with 16 ways to have 3 different toppings on 2 slices each" src="https://cdn.freecodecamp.org/curriculum/project-euler/pizza-toppings.gif" style="background-color: white; padding: 10px;" />
+
+Find the sum of all $f(m,n)$ such that $f(m,n) ≤ {10}^{15}$.
+
+# --hints--
+
+`pizzaToppings()` should return `1485776387445623`.
+
+```js
+assert.strictEqual(pizzaToppings(), 1485776387445623);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pizzaToppings() {
+
+  return true;
+}
+
+pizzaToppings();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-282-the-ackermann-function.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-282-the-ackermann-function.md
new file mode 100644
index 00000000000..c9cbb75087d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-282-the-ackermann-function.md
@@ -0,0 +1,45 @@
+---
+id: 5900f4861000cf542c50ff99
+title: 'Problem 282: The Ackermann function'
+challengeType: 1
+forumTopicId: 301933
+dashedName: problem-282-the-ackermann-function
+---
+
+# --description--
+
+For non-negative integers $m$, $n$, the Ackermann function $A(m, n)$ is defined as follows:
+
+$$A(m, n) = \begin{cases} n + 1                 & \text{if $m = 0$}             \\\\
+A(m - 1, 1)           & \text{if $m > 0$ and $n = 0$} \\\\ A(m - 1, A(m, n - 1)) & \text{if $m > 0$ and $n > 0$} \end{cases}$$
+
+For example $A(1, 0) = 2$, $A(2, 2) = 7$ and $A(3, 4) = 125$.
+
+Find $\displaystyle\sum_{n = 0}^6 A(n, n)$ and give your answer mod ${14}^8$.
+
+# --hints--
+
+`ackermanFunction()` should return `1098988351`.
+
+```js
+assert.strictEqual(ackermanFunction(), 1098988351);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function ackermanFunction() {
+
+  return true;
+}
+
+ackermanFunction();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-283-integer-sided-triangles-for-which-the-area--perimeter-ratio-is-integral.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-283-integer-sided-triangles-for-which-the-area--perimeter-ratio-is-integral.md
new file mode 100644
index 00000000000..e32d0d74b9d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-283-integer-sided-triangles-for-which-the-area--perimeter-ratio-is-integral.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4881000cf542c50ff9a
+title: >-
+  Problem 283: Integer sided triangles for which the area / perimeter ratio is integral
+challengeType: 1
+forumTopicId: 301934
+dashedName: >-
+  problem-283-integer-sided-triangles-for-which-the-area--perimeter-ratio-is-integral
+---
+
+# --description--
+
+Consider the triangle with sides 6, 8 and 10. It can be seen that the perimeter and the area are both equal to 24.
+
+So the $\frac{\text{area}}{\text{perimeter}}$ ratio is equal to 1.
+
+Consider also the triangle with sides 13, 14 and 15. The perimeter equals 42 while the area is equal to 84.
+
+So for this triangle the $\frac{\text{area}}{\text{perimeter}}$ ratio is equal to 2.
+
+Find the sum of the perimeters of all integer sided triangles for which the area/perimeter ratios are equal to positive integers not exceeding 1000.
+
+# --hints--
+
+`integralAreaPerimeterRatio()` should return `28038042525570324`.
+
+```js
+assert.strictEqual(integralAreaPerimeterRatio(), 28038042525570324);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function integralAreaPerimeterRatio() {
+
+  return true;
+}
+
+integralAreaPerimeterRatio();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-284-steady-squares.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-284-steady-squares.md
new file mode 100644
index 00000000000..d6c86b00055
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-284-steady-squares.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4891000cf542c50ff9b
+title: 'Problem 284: Steady Squares'
+challengeType: 1
+forumTopicId: 301935
+dashedName: problem-284-steady-squares
+---
+
+# --description--
+
+The 3-digit number 376 in the decimal numbering system is an example of numbers with the special property that its square ends with the same digits: ${376}^2 = 141376$. Let's call a number with this property a steady square.
+
+Steady squares can also be observed in other numbering systems. In the base 14 numbering system, the 3-digit number $c37$ is also a steady square: $c37^2 = aa0c37$, and the sum of its digits is $c+3+7=18$ in the same numbering system. The letters $a$, $b$, $c$ and $d$ are used for the 10, 11, 12 and 13 digits respectively, in a manner similar to the hexadecimal numbering system.
+
+For $1 ≤ n ≤ 9$, the sum of the digits of all the $n$-digit steady squares in the base 14 numbering system is $2d8$ (582 decimal). Steady squares with leading 0's are not allowed.
+
+Find the sum of the digits of all the $n$-digit steady squares in the base 14 numbering system for $1 ≤ n ≤ 10000$ (decimal) and give your answer as a string in the base 14 system using lower case letters where necessary.
+
+# --hints--
+
+`steadySquares()` should return a string.
+
+```js
+assert(typeof steadySquares() === 'string');
+```
+
+`steadySquares()` should return the string `5a411d7b`.
+
+```js
+assert.strictEqual(steadySquares(), '5a411d7b');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function steadySquares() {
+
+  return true;
+}
+
+steadySquares();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-285-pythagorean-odds.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-285-pythagorean-odds.md
new file mode 100644
index 00000000000..5c6e49167f9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-285-pythagorean-odds.md
@@ -0,0 +1,46 @@
+---
+id: 5900f48a1000cf542c50ff9c
+title: 'Problem 285: Pythagorean odds'
+challengeType: 1
+forumTopicId: 301936
+dashedName: problem-285-pythagorean-odds
+---
+
+# --description--
+
+Albert chooses a positive integer $k$, then two real numbers $a$, $b$ are randomly chosen in the interval [0,1] with uniform distribution.
+
+The square root of the sum ${(ka + 1)}^2 + {(kb + 1)}^2$ is then computed and rounded to the nearest integer. If the result is equal to $k$, he scores $k$ points; otherwise he scores nothing.
+
+For example, if $k = 6$, $a = 0.2$ and $b = 0.85$, then ${(ka + 1)}^2 + {(kb + 1)}^2 = 42.05$. The square root of 42.05 is 6.484... and when rounded to the nearest integer, it becomes 6. This is equal to $k$, so he scores 6 points.
+
+It can be shown that if he plays 10 turns with $k = 1, k = 2, \ldots, k = 10$, the expected value of his total score, rounded to five decimal places, is 10.20914.
+
+If he plays ${10}^5$ turns with $k = 1, k = 2, k = 3, \ldots, k = {10}^5$, what is the expected value of his total score, rounded to five decimal places?
+
+# --hints--
+
+`pythagoreanOdds()` should return `157055.80999`.
+
+```js
+assert.strictEqual(pythagoreanOdds(), 157055.80999);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pythagoreanOdds() {
+
+  return true;
+}
+
+pythagoreanOdds();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-286-scoring-probabilities.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-286-scoring-probabilities.md
new file mode 100644
index 00000000000..26e3e198604
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-286-scoring-probabilities.md
@@ -0,0 +1,42 @@
+---
+id: 5900f48a1000cf542c50ff9d
+title: 'Problem 286: Scoring probabilities'
+challengeType: 1
+forumTopicId: 301937
+dashedName: problem-286-scoring-probabilities
+---
+
+# --description--
+
+Barbara is a mathematician and a basketball player. She has found that the probability of scoring a point when shooting from a distance $x$ is exactly ($1 - \frac{x}{q}$), where $q$ is a real constant greater than 50.
+
+During each practice run, she takes shots from distances $x = 1, x = 2, \ldots, x = 50$ and, according to her records, she has precisely a 2 % chance to score a total of exactly 20 points.
+
+Find $q$ and give your answer rounded to 10 decimal places.
+
+# --hints--
+
+`scoringProbabilities()` should return `52.6494571953`.
+
+```js
+assert.strictEqual(scoringProbabilities(), 52.6494571953);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function scoringProbabilities() {
+
+  return true;
+}
+
+scoringProbabilities();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-287-quadtree-encoding-a-simple-compression-algorithm.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-287-quadtree-encoding-a-simple-compression-algorithm.md
new file mode 100644
index 00000000000..707a6fa97e7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-287-quadtree-encoding-a-simple-compression-algorithm.md
@@ -0,0 +1,59 @@
+---
+id: 5900f48b1000cf542c50ff9e
+title: 'Problem 287: Quadtree encoding (a simple compression algorithm)'
+challengeType: 1
+forumTopicId: 301938
+dashedName: problem-287-quadtree-encoding-a-simple-compression-algorithm
+---
+
+# --description--
+
+The quadtree encoding allows us to describe a $2^N×2^N$ black and white image as a sequence of bits (0 and 1). Those sequences are to be read from left to right like this:
+
+- the first bit deals with the complete $2^N×2^N$ region;
+- "0" denotes a split:
+  - the current $2^n×2^n$ region is divided into 4 sub-regions of dimension $2^{n - 1}×2^{n - 1}$,
+  - the next bits contains the description of the top left, top right, bottom left and bottom right sub-regions - in that order;
+- "10" indicates that the current region contains only black pixels;
+- "11" indicates that the current region contains only white pixels.
+
+Consider the following 4×4 image (colored marks denote places where a split can occur):
+
+<img class="img-responsive center-block" alt="4x4 image with colored marks denoting place where split can occur" src="https://cdn.freecodecamp.org/curriculum/project-euler/quadtree-encoding-a-simple-compression-algorithm.gif" style="background-color: white; padding: 10px;" />
+
+This image can be described by several sequences, for example : "<strong><span style="color: red">0</span></strong><strong><span style="color: blue">0</span></strong>10101010<strong><span style="color: green">0</span></strong>1011111011<strong><span style="color: orange">0</span></strong>10101010", of length 30, or "<strong><span style="color: red">0</span></strong>10<strong><span style="color: green">0</span></strong>101111101110", of length 16, which is the minimal sequence for this image.
+
+For a positive integer $N$, define $D_N$ as the $2^N×2^N$ image with the following coloring scheme:
+
+- the pixel with coordinates $x = 0$, $y = 0$ corresponds to the bottom left pixel,
+- if ${(x - 2^{N - 1})}^2 + {(y - 2^{N - 1})}^2 ≤ 2^{2N - 2}$ then the pixel is black,
+- otherwise the pixel is white.
+
+What is the length of the minimal sequence describing $D_{24}$?
+
+# --hints--
+
+`quadtreeEncoding()` should return `313135496`.
+
+```js
+assert.strictEqual(quadtreeEncoding(), 313135496);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function quadtreeEncoding() {
+
+  return true;
+}
+
+quadtreeEncoding();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-288-an-enormous-factorial.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-288-an-enormous-factorial.md
new file mode 100644
index 00000000000..cd92a15cd8c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-288-an-enormous-factorial.md
@@ -0,0 +1,49 @@
+---
+id: 5900f48d1000cf542c50ff9f
+title: 'Problem 288: An enormous factorial'
+challengeType: 1
+forumTopicId: 301939
+dashedName: problem-288-an-enormous-factorial
+---
+
+# --description--
+
+For any prime $p$ the number $N(p,q)$ is defined by $N(p,q) = \sum_{n=0}^q T_n \times p^n$ with $T_n$ generated by the following random number generator:
+
+$$\begin{align}   & S_0 = 290797 \\\\
+  & S_{n + 1} = {S_n}^2\bmod 50\\,515\\,093 \\\\ & T_n = S_n\bmod p \end{align}$$
+
+Let $Nfac(p,q)$ be the factorial of $N(p,q)$.
+
+Let $NF(p,q)$ be the number of factors $p$ in $Nfac(p,q)$.
+
+You are given that $NF(3,10000) \bmod 3^{20} = 624\\,955\\,285$.
+
+Find $NF(61,{10}^7)\bmod {61}^{10}$.
+
+# --hints--
+
+`enormousFactorial()` should return `605857431263982000`.
+
+```js
+assert.strictEqual(enormousFactorial(), 605857431263982000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function enormousFactorial() {
+
+  return true;
+}
+
+enormousFactorial();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-289-eulerian-cycles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-289-eulerian-cycles.md
new file mode 100644
index 00000000000..e491cab3612
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-289-eulerian-cycles.md
@@ -0,0 +1,50 @@
+---
+id: 5900f48d1000cf542c50ffa0
+title: 'Problem 289: Eulerian Cycles'
+challengeType: 1
+forumTopicId: 301940
+dashedName: problem-289-eulerian-cycles
+---
+
+# --description--
+
+Let $C(x,y)$ be a circle passing through the points ($x$, $y$), ($x$, $y + 1$), ($x + 1$, $y$) and ($x + 1$, $y + 1$).
+
+For positive integers $m$ and $n$, let $E(m,n)$ be a configuration which consists of the $m·n$ circles: { $C(x,y)$: $0 ≤ x &lt; m$, $0 ≤ y &lt; n$, $x$ and $y$ are integers }
+
+An Eulerian cycle on $E(m,n)$ is a closed path that passes through each arc exactly once. Many such paths are possible on $E(m,n)$, but we are only interested in those which are not self-crossing: A non-crossing path just touches itself at lattice points, but it never crosses itself.
+
+The image below shows $E(3,3)$ and an example of an Eulerian non-crossing path.
+
+<img class="img-responsive center-block" alt="Eulerian cycle E(3, 3) and Eulerian non-crossing path" src="https://cdn.freecodecamp.org/curriculum/project-euler/eulerian-cycles.gif" style="background-color: white; padding: 10px;" />
+
+Let $L(m,n)$ be the number of Eulerian non-crossing paths on $E(m,n)$. For example, $L(1,2) = 2$, $L(2,2) = 37$ and $L(3,3) = 104290$.
+
+Find $L(6,10)\bmod {10}^{10}$.
+
+# --hints--
+
+`eulerianCycles()` should return `6567944538`.
+
+```js
+assert.strictEqual(eulerianCycles(), 6567944538);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function eulerianCycles() {
+
+  return true;
+}
+
+eulerianCycles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-29-distinct-powers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-29-distinct-powers.md
new file mode 100644
index 00000000000..4b8f00162ee
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-29-distinct-powers.md
@@ -0,0 +1,86 @@
+---
+id: 5900f3891000cf542c50fe9c
+title: 'Problem 29: Distinct powers'
+challengeType: 1
+forumTopicId: 301941
+dashedName: problem-29-distinct-powers
+---
+
+# --description--
+
+Consider all integer combinations of $a^b$ for 2 ≤ a ≤ 5 and 2 ≤ b ≤ 5:
+
+<div style='padding-left: 4em;'>
+  2<sup>2</sup>=4, 2<sup>3</sup>=8, 2<sup>4</sup>=16, 2<sup>5</sup>=32 <br>
+  3<sup>2</sup>=9, 3<sup>3</sup>=27, 3<sup>4</sup>=81, 3<sup>5</sup>=243 <br>
+  4<sup>2</sup>=16, 4<sup>3</sup>=64, 4<sup>4</sup>=256, 4<sup>5</sup>=1024 <br>
+  5<sup>2</sup>=25, 5<sup>3</sup>=125, 5<sup>4</sup>=625, 5<sup>5</sup>=3125 <br>
+</div>
+
+If they are then placed in numerical order, with any repeats removed, we get the following sequence of 15 distinct terms:
+
+<div style='padding-left: 4em;'>
+  4, 8, 9, 16, 25, 27, 32, 64, 81, 125, 243, 256, 625, 1024, 3125
+</div>
+
+How many distinct terms are in the sequence generated by $a^b$ for 2 ≤ `a` ≤ `n` and 2 ≤ `b` ≤ `n`?
+
+# --hints--
+
+`distinctPowers(15)` should return a number.
+
+```js
+assert(typeof distinctPowers(15) === 'number');
+```
+
+`distinctPowers(15)` should return 177.
+
+```js
+assert.strictEqual(distinctPowers(15), 177);
+```
+
+`distinctPowers(20)` should return 324.
+
+```js
+assert.strictEqual(distinctPowers(20), 324);
+```
+
+`distinctPowers(25)` should return 519.
+
+```js
+assert.strictEqual(distinctPowers(25), 519);
+```
+
+`distinctPowers(30)` should return 755.
+
+```js
+assert.strictEqual(distinctPowers(30), 755);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function distinctPowers(n) {
+
+  return n;
+}
+
+distinctPowers(30);
+```
+
+# --solutions--
+
+```js
+const distinctPowers = (n) => {
+  let list = [];
+  for (let a=2; a<=n; a++) {
+    for (let b=2; b<=n; b++) {
+      let term = Math.pow(a, b);
+      if (list.indexOf(term)===-1) list.push(term);
+    }
+  }
+  return list.length;
+};
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-290-digital-signature.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-290-digital-signature.md
new file mode 100644
index 00000000000..a6b3636eefd
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-290-digital-signature.md
@@ -0,0 +1,38 @@
+---
+id: 5900f48f1000cf542c50ffa1
+title: 'Problem 290: Digital Signature'
+challengeType: 1
+forumTopicId: 301942
+dashedName: problem-290-digital-signature
+---
+
+# --description--
+
+How many integers $0 ≤ n &lt; {10}^{18}$ have the property that the sum of the digits of $n$ equals the sum of digits of $137n$?
+
+# --hints--
+
+`digitalSignature()` should return `20444710234716470`.
+
+```js
+assert.strictEqual(digitalSignature(), 20444710234716470);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function digitalSignature() {
+
+  return true;
+}
+
+digitalSignature();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-291-panaitopol-primes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-291-panaitopol-primes.md
new file mode 100644
index 00000000000..bb33727271a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-291-panaitopol-primes.md
@@ -0,0 +1,40 @@
+---
+id: 5900f48f1000cf542c50ffa2
+title: 'Problem 291: Panaitopol Primes'
+challengeType: 1
+forumTopicId: 301943
+dashedName: problem-291-panaitopol-primes
+---
+
+# --description--
+
+A prime number $p$ is called a Panaitopol prime if $p = \frac{x^4 - y^4}{x^3 + y^3}$ for some positive integers $x$ and $y$.
+
+Find how many Panaitopol primes are less than $5 × {10}^{15}$.
+
+# --hints--
+
+`panaitopolPrimes()` should return `4037526`.
+
+```js
+assert.strictEqual(panaitopolPrimes(), 4037526);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function panaitopolPrimes() {
+
+  return true;
+}
+
+panaitopolPrimes();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-292-pythagorean-polygons.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-292-pythagorean-polygons.md
new file mode 100644
index 00000000000..8e0dd899454
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-292-pythagorean-polygons.md
@@ -0,0 +1,51 @@
+---
+id: 5900f4911000cf542c50ffa3
+title: 'Problem 292: Pythagorean Polygons'
+challengeType: 1
+forumTopicId: 301944
+dashedName: problem-292-pythagorean-polygons
+---
+
+# --description--
+
+We shall define a pythagorean polygon to be a convex polygon with the following properties:
+
+- there are at least three vertices,
+- no three vertices are aligned,
+- each vertex has integer coordinates,
+- each edge has integer length.
+
+For a given integer $n$, define $P(n)$ as the number of distinct pythagorean polygons for which the perimeter is $≤ n$.
+
+Pythagorean polygons should be considered distinct as long as none is a translation of another.
+
+You are given that $P(4) = 1$, $P(30) = 3655$ and $P(60) = 891045$.
+
+Find $P(120)$.
+
+# --hints--
+
+`pythagoreanPolygons()` should return `3600060866`.
+
+```js
+assert.strictEqual(pythagoreanPolygons(), 3600060866);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pythagoreanPolygons() {
+
+  return true;
+}
+
+pythagoreanPolygons();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-293-pseudo-fortunate-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-293-pseudo-fortunate-numbers.md
new file mode 100644
index 00000000000..0c8076828de
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-293-pseudo-fortunate-numbers.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4931000cf542c50ffa4
+title: 'Problem 293: Pseudo-Fortunate Numbers'
+challengeType: 1
+forumTopicId: 301945
+dashedName: problem-293-pseudo-fortunate-numbers
+---
+
+# --description--
+
+An even positive integer $N$ will be called admissible, if it is a power of 2 or its distinct prime factors are consecutive primes.
+
+The first twelve admissible numbers are 2, 4, 6, 8, 12, 16, 18, 24, 30, 32, 36, 48.
+
+If $N$ is admissible, the smallest integer $M > 1$ such that $N + M$ is prime, will be called the pseudo-Fortunate number for $N$.
+
+For example, $N = 630$ is admissible since it is even and its distinct prime factors are the consecutive primes 2, 3, 5 and 7. The next prime number after 631 is 641; hence, the pseudo-Fortunate number for 630 is $M = 11$. It can also be seen that the pseudo-Fortunate number for 16 is 3.
+
+Find the sum of all distinct pseudo-Fortunate numbers for admissible numbers $N$ less than ${10}^9$.
+
+# --hints--
+
+`pseudoFortunateNumbers()` should return `2209`.
+
+```js
+assert.strictEqual(pseudoFortunateNumbers(), 2209);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pseudoFortunateNumbers() {
+
+  return true;
+}
+
+pseudoFortunateNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-294-sum-of-digits---experience-23.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-294-sum-of-digits---experience-23.md
new file mode 100644
index 00000000000..b32ebc882de
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-294-sum-of-digits---experience-23.md
@@ -0,0 +1,47 @@
+---
+id: 5900f4931000cf542c50ffa5
+title: 'Problem 294: Sum of digits - experience #23'
+challengeType: 1
+forumTopicId: 301946
+dashedName: problem-294-sum-of-digits---experience-23
+---
+
+# --description--
+
+For a positive integer $k$, define $d(k)$ as the sum of the digits of $k$ in its usual decimal representation. Thus $d(42) = 4 + 2 = 6$.
+
+For a positive integer $n$, define $S(n)$ as the number of positive integers $k &lt; {10}^n$ with the following properties:
+
+- $k$ is divisible by 23 and,
+- $d(k) = 23$.
+
+You are given that $S(9) = 263\\,626$ and $S(42) = 6\\,377\\,168\\,878\\,570\\,056$.
+
+Find $S({11}^{12})$ and give your answer $\bmod {10}^9$.
+
+# --hints--
+
+`experience23()` should return `789184709`.
+
+```js
+assert.strictEqual(experience23(), 789184709);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function experience23() {
+
+  return true;
+}
+
+experience23();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-295-lenticular-holes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-295-lenticular-holes.md
new file mode 100644
index 00000000000..9354ea7c840
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-295-lenticular-holes.md
@@ -0,0 +1,59 @@
+---
+id: 5900f4931000cf542c50ffa6
+title: 'Problem 295: Lenticular holes'
+challengeType: 1
+forumTopicId: 301947
+dashedName: problem-295-lenticular-holes
+---
+
+# --description--
+
+We call the convex area enclosed by two circles a lenticular hole if:
+
+- The centres of both circles are on lattice points.
+- The two circles intersect at two distinct lattice points.
+- The interior of the convex area enclosed by both circles does not contain any lattice points.
+
+Consider the circles:
+
+$$\begin{align}   & C_0: x^2 + y^2 = 25 \\\\
+  & C_1: {(x + 4)}^2 + {(y - 4)}^2 = 1 \\\\ & C_2: {(x - 12)}^2 + {(y - 4)}^2 = 65 \end{align}$$
+
+The circles $C_0$, $C_1$ and $C_2$ are drawn in the picture below.
+
+<img class="img-responsive center-block" alt="C_0, C_1 and C_2 circles" src="https://cdn.freecodecamp.org/curriculum/project-euler/lenticular-holes.gif" style="background-color: white; padding: 10px;" />
+
+$C_0$ and $C_1$ form a lenticular hole, as well as $C_0$ and $C_2$.
+
+We call an ordered pair of positive real numbers ($r_1$, $r_2$) a lenticular pair if there exist two circles with radii $r_1$ and $r_2$ that form a lenticular hole. We can verify that ($1$, $5$) and ($5$, $\sqrt{65}$) are the lenticular pairs of the example above.
+
+Let $L(N)$ be the number of distinct lenticular pairs ($r_1$, $r_2$) for which $0 &lt; r_1 ≤ r_2 ≤ N$. We can verify that $L(10) = 30$ and $L(100) = 3442$.
+
+Find $L(100\\,000)$.
+
+# --hints--
+
+`lenticularHoles()` should return `4884650818`.
+
+```js
+assert.strictEqual(lenticularHoles(), 4884650818);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function lenticularHoles() {
+
+  return true;
+}
+
+lenticularHoles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-296-angular-bisector-and-tangent.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-296-angular-bisector-and-tangent.md
new file mode 100644
index 00000000000..660d66eabb4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-296-angular-bisector-and-tangent.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4941000cf542c50ffa7
+title: 'Problem 296: Angular Bisector and Tangent'
+challengeType: 1
+forumTopicId: 301948
+dashedName: problem-296-angular-bisector-and-tangent
+---
+
+# --description--
+
+Given is an integer sided triangle $ABC$ with $BC ≤ AC ≤ AB$. $k$ is the angular bisector of angle $ACB$. $m$ is the tangent at $C$ to the circumscribed circle of $ABC$. $n$ is a line parallel to $m$ through $B$.
+
+The intersection of $n$ and $k$ is called $E$.
+
+<img class="img-responsive center-block" alt="triangle ABC, with k - the angular bisector of angle ACB, m - tangent at point C, n - line parallel to m through B, and point E - intersection of k and n" src="https://cdn.freecodecamp.org/curriculum/project-euler/angular-bisector-and-tangent.gif" style="background-color: white; padding: 10px;" />
+
+How many triangles $ABC$ with a perimeter not exceeding $100\\,000$ exist such that $BE$ has integral length?
+
+# --hints--
+
+`angularBisectorAndTangent()` should return `1137208419`.
+
+```js
+assert.strictEqual(angularBisectorAndTangent(), 1137208419);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function angularBisectorAndTangent() {
+
+  return true;
+}
+
+angularBisectorAndTangent();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-297-zeckendorf-representation.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-297-zeckendorf-representation.md
new file mode 100644
index 00000000000..55f3adbfd1c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-297-zeckendorf-representation.md
@@ -0,0 +1,52 @@
+---
+id: 5900f4951000cf542c50ffa8
+title: 'Problem 297: Zeckendorf Representation'
+challengeType: 1
+forumTopicId: 301949
+dashedName: problem-297-zeckendorf-representation
+---
+
+# --description--
+
+Each new term in the Fibonacci sequence is generated by adding the previous two terms.
+
+Starting with 1 and 2, the first 10 terms will be: 1, 2, 3, 5, 8, 13, 21, 34, 55, 89.
+
+Every positive integer can be uniquely written as a sum of nonconsecutive terms of the Fibonacci sequence. For example, 100 = 3 + 8 + 89.
+
+Such a sum is called the Zeckendorf representation of the number.
+
+For any integer $n>0$, let $z(n)$ be the number of terms in the Zeckendorf representation of $n$.
+
+Thus, $z(5) = 1$, $z(14) = 2$, $z(100) = 3$ etc.
+
+Also, for $0 &lt; n &lt; {10}^6$, $\sum z(n) = 7\\,894\\,453$.
+
+Find $\sum z(n)$ for $0 &lt; n &lt; {10}^{17}$.
+
+# --hints--
+
+`zeckendorfRepresentation()` should return `2252639041804718000`.
+
+```js
+assert.strictEqual(zeckendorfRepresentation(), 2252639041804718000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function zeckendorfRepresentation() {
+
+  return true;
+}
+
+zeckendorfRepresentation();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-298-selective-amnesia.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-298-selective-amnesia.md
new file mode 100644
index 00000000000..da401b24b95
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-298-selective-amnesia.md
@@ -0,0 +1,57 @@
+---
+id: 5900f4971000cf542c50ffa9
+title: 'Problem 298: Selective Amnesia'
+challengeType: 1
+forumTopicId: 301950
+dashedName: problem-298-selective-amnesia
+---
+
+# --description--
+
+Larry and Robin play a memory game involving of a sequence of random numbers between 1 and 10, inclusive, that are called out one at a time. Each player can remember up to 5 previous numbers. When the called number is in a player's memory, that player is awarded a point. If it's not, the player adds the called number to his memory, removing another number if his memory is full.
+
+Both players start with empty memories. Both players always add new missed numbers to their memory but use a different strategy in deciding which number to remove: Larry's strategy is to remove the number that hasn't been called in the longest time. Robin's strategy is to remove the number that's been in the memory the longest time.
+
+Example game:
+
+| Turn | Called number | Larry's memory | Larry's score | Robin's memory | Robin's score |
+| ---- | ------------- | --------------:| ------------- | -------------- | ------------- |
+| 1    | 1             |              1 | 0             | 1              | 0             |
+| 2    | 2             |            1,2 | 0             | 1,2            | 0             |
+| 3    | 4             |          1,2,4 | 0             | 1,2,4          | 0             |
+| 4    | 6             |        1,2,4,6 | 0             | 1,2,4,6        | 0             |
+| 5    | 1             |        1,2,4,6 | 1             | 1,2,4,6        | 1             |
+| 6    | 8             |      1,2,4,6,8 | 1             | 1,2,4,6,8      | 1             |
+| 7    | 10            |     1,4,6,8,10 | 1             | 2,4,6,8,10     | 1             |
+| 8    | 2             |     1,2,6,8,10 | 1             | 2,4,6,8,10     | 2             |
+| 9    | 4             |     1,2,4,8,10 | 1             | 2,4,6,8,10     | 3             |
+| 10   | 1             |     1,2,4,8,10 | 2             | 1,4,6,8,10     | 3             |
+
+Denoting Larry's score by $L$ and Robin's score by $R$, what is the expected value of $|L - R|$ after 50 turns? Give your answer rounded to eight decimal places using the format x.xxxxxxxx .
+
+# --hints--
+
+`selectiveAmnesia()` should return `1.76882294`.
+
+```js
+assert.strictEqual(selectiveAmnesia(), 1.76882294);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function selectiveAmnesia() {
+
+  return true;
+}
+
+selectiveAmnesia();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-299-three-similar-triangles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-299-three-similar-triangles.md
new file mode 100644
index 00000000000..5bd781949f5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-299-three-similar-triangles.md
@@ -0,0 +1,56 @@
+---
+id: 5900f4971000cf542c50ffaa
+title: 'Problem 299: Three similar triangles'
+challengeType: 1
+forumTopicId: 301951
+dashedName: problem-299-three-similar-triangles
+---
+
+# --description--
+
+Four points with integer coordinates are selected:
+
+$A(a, 0)$, $B(b, 0)$, $C(0, c)$ and $D(0, d)$, with $0 &lt; a &lt; b$ and $0 &lt; c &lt; d$.
+
+Point $P$, also with integer coordinates, is chosen on the line $AC$ so that the three triangles $ABP$, $CDP$ and $BDP$ are all similar.
+
+<img class="img-responsive center-block" alt="points A, B, C, D and P creating three triangles: ABP, CDP, and BDP" src="https://cdn.freecodecamp.org/curriculum/project-euler/three-similar-triangles.gif" style="background-color: white; padding: 10px;" />
+
+It is easy to prove that the three triangles can be similar, only if $a = c$.
+
+So, given that $a = c$, we are looking for triplets ($a$, $b$, $d$) such that at least one point $P$ (with integer coordinates) exists on $AC$, making the three triangles $ABP$, $CDP$ and $BDP$ all similar.
+
+For example, if $(a, b, d) = (2, 3, 4)$, it can be easily verified that point $P(1, 1)$ satisfies the above condition. Note that the triplets (2,3,4) and (2,4,3) are considered as distinct, although point $P(1, 1)$ is common for both.
+
+If $b + d &lt; 100$, there are 92 distinct triplets ($a$, $b$, $d$) such that point $P$ exists.
+
+If $b + d &lt; 100\\,000$, there are 320471 distinct triplets ($a$, $b$, $d$) such that point $P$ exists.
+
+If $b + d &lt; 100\\,000\\,000$, how many distinct triplets ($a$, $b$, $d$) are there such that point $P$ exists?
+
+# --hints--
+
+`threeSimilarTriangles()` should return `549936643`.
+
+```js
+assert.strictEqual(threeSimilarTriangles(), 549936643);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function threeSimilarTriangles() {
+
+  return true;
+}
+
+threeSimilarTriangles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-3-largest-prime-factor.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-3-largest-prime-factor.md
new file mode 100644
index 00000000000..2961ac6b9c0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-3-largest-prime-factor.md
@@ -0,0 +1,95 @@
+---
+id: 5900f36f1000cf542c50fe82
+title: 'Problem 3: Largest prime factor'
+challengeType: 1
+forumTopicId: 301952
+dashedName: problem-3-largest-prime-factor
+---
+
+# --description--
+
+The prime factors of 13195 are 5, 7, 13 and 29.
+
+What is the largest prime factor of the given `number`?
+
+# --hints--
+
+`largestPrimeFactor(2)` should return a number.
+
+```js
+assert(typeof largestPrimeFactor(2) === 'number');
+```
+
+`largestPrimeFactor(2)` should return 2.
+
+```js
+assert.strictEqual(largestPrimeFactor(2), 2);
+```
+
+`largestPrimeFactor(3)` should return 3.
+
+```js
+assert.strictEqual(largestPrimeFactor(3), 3);
+```
+
+`largestPrimeFactor(5)` should return 5.
+
+```js
+assert.strictEqual(largestPrimeFactor(5), 5);
+```
+
+`largestPrimeFactor(7)` should return 7.
+
+```js
+assert.strictEqual(largestPrimeFactor(7), 7);
+```
+
+`largestPrimeFactor(8)` should return 2.
+
+```js
+assert.strictEqual(largestPrimeFactor(8), 2);
+```
+
+`largestPrimeFactor(13195)` should return 29.
+
+```js
+assert.strictEqual(largestPrimeFactor(13195), 29);
+```
+
+`largestPrimeFactor(600851475143)` should return 6857.
+
+```js
+assert.strictEqual(largestPrimeFactor(600851475143), 6857);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function largestPrimeFactor(number) {
+
+  return true;
+}
+
+largestPrimeFactor(13195);
+```
+
+# --solutions--
+
+```js
+const largestPrimeFactor = (number) => {
+  let largestFactor = number;
+
+  for (let i = 2; i <= Math.sqrt(largestFactor); i++) {
+    if (!(largestFactor % i)) {
+      let factor = largestFactor / i;
+      let candidate = largestPrimeFactor(factor);
+
+      return i > candidate ? i : candidate;
+    }
+  }
+
+  return largestFactor;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-30-digit-n-powers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-30-digit-n-powers.md
new file mode 100644
index 00000000000..1e7472bce84
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-30-digit-n-powers.md
@@ -0,0 +1,74 @@
+---
+id: 5900f38a1000cf542c50fe9d
+title: 'Problem 30: Digit n powers'
+challengeType: 1
+forumTopicId: 301953
+dashedName: problem-30-digit-n-powers
+---
+
+# --description--
+
+Surprisingly there are only three numbers that can be written as the sum of fourth powers of their digits:
+
+<div style='margin-left: 4em;'>
+  1634 = 1<sup>4</sup> + 6<sup>4</sup> + 3<sup>4</sup> + 4<sup>4</sup><br>
+  8208 = 8<sup>4</sup> + 2<sup>4</sup> + 0<sup>4</sup> + 8<sup>4</sup><br>
+  9474 = 9<sup>4</sup> + 4<sup>4</sup> + 7<sup>4</sup> + 4<sup>4</sup><br>
+</div>
+
+As 1 = 1<sup>4</sup> is not a sum it is not included.
+
+The sum of these numbers is 1634 + 8208 + 9474 = 19316.
+
+Find the sum of all the numbers that can be written as the sum of `n` powers of their digits.
+
+# --hints--
+
+`digitnPowers(2)` should return a number.
+
+```js
+assert(typeof digitnPowers(2) === 'number');
+```
+
+`digitnPowers(2)` should return 0.
+
+```js
+assert(digitnPowers(2) == 0);
+```
+
+`digitnPowers(3)` should return 1301.
+
+```js
+assert(digitnPowers(3) == 1301);
+```
+
+`digitnPowers(4)` should return 19316.
+
+```js
+assert(digitnPowers(4) == 19316);
+```
+
+`digitnPowers(5)` should return 443839.
+
+```js
+assert(digitnPowers(5) == 443839);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function digitnPowers(n) {
+
+  return n;
+}
+
+digitnPowers(5);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-300-protein-folding.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-300-protein-folding.md
new file mode 100644
index 00000000000..d5f2020b784
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-300-protein-folding.md
@@ -0,0 +1,56 @@
+---
+id: 5900f49a1000cf542c50ffac
+title: 'Problem 300: Protein folding'
+challengeType: 1
+forumTopicId: 301954
+dashedName: problem-300-protein-folding
+---
+
+# --description--
+
+In a very simplified form, we can consider proteins as strings consisting of hydrophobic (H) and polar (P) elements, e.g. HHPPHHHPHHPH.
+
+For this problem, the orientation of a protein is important; e.g. HPP is considered distinct from PPH. Thus, there are $2^n$ distinct proteins consisting of $n$ elements.
+
+When one encounters these strings in nature, they are always folded in such a way that the number of H-H contact points is as large as possible, since this is energetically advantageous.
+
+As a result, the H-elements tend to accumulate in the inner part, with the P-elements on the outside.
+
+Natural proteins are folded in three dimensions of course, but we will only consider protein folding in <u>two dimensions</u>.
+
+The figure below shows two possible ways that our example protein could be folded (H-H contact points are shown with red dots).
+
+<img class="img-responsive center-block" alt="two possible ways to fold example protein" src="https://cdn.freecodecamp.org/curriculum/project-euler/protein-folding.gif" style="background-color: white; padding: 10px;" />
+
+The folding on the left has only six H-H contact points, thus it would never occur naturally. On the other hand, the folding on the right has nine H-H contact points, which is optimal for this string.
+
+Assuming that H and P elements are equally likely to occur in any position along the string, the average number of H-H contact points in an optimal folding of a random protein string of length 8 turns out to be $\frac{850}{2^8} = 3.3203125$.
+
+What is the average number of H-H contact points in an optimal folding of a random protein string of length 15? Give your answer using as many decimal places as necessary for an exact result.
+
+# --hints--
+
+`proteinFolding()` should return `8.0540771484375`.
+
+```js
+assert.strictEqual(proteinFolding(), 8.0540771484375);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function proteinFolding() {
+
+  return true;
+}
+
+proteinFolding();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-301-nim.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-301-nim.md
new file mode 100644
index 00000000000..b66b1b9ae06
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-301-nim.md
@@ -0,0 +1,58 @@
+---
+id: 5900f4991000cf542c50ffab
+title: 'Problem 301: Nim'
+challengeType: 1
+forumTopicId: 301955
+dashedName: problem-301-nim
+---
+
+# --description--
+
+Nim is a game played with heaps of stones, where two players take it in turn to remove any number of stones from any heap until no stones remain.
+
+We'll consider the three-heap normal-play version of Nim, which works as follows:
+
+- At the start of the game there are three heaps of stones.
+- On his turn the player removes any positive number of stones from any single heap.
+- The first player unable to move (because no stones remain) loses.
+
+If ($n_1$, $n_2$, $n_3$) indicates a Nim position consisting of heaps of size $n_1$, $n_2$ and $n_3$ then there is a simple function $X(n_1,n_2,n_3)$ — that you may look up or attempt to deduce for yourself — that returns:
+
+- zero if, with perfect strategy, the player about to move will eventually lose; or
+- non-zero if, with perfect strategy, the player about to move will eventually win.
+
+For example $X(1, 2, 3) = 0$ because, no matter what the current player does, his opponent can respond with a move that leaves two heaps of equal size, at which point every move by the current player can be mirrored by his opponent until no stones remain; so the current player loses. To illustrate:
+
+- current player moves to (1,2,1)
+- opponent moves to (1,0,1)
+- current player moves to (0,0,1)
+- opponent moves to (0,0,0), and so wins.
+
+For how many positive integers $n ≤ 2^{30}$ does $X(n, 2n, 3n) = 0$?
+
+# --hints--
+
+`nim()` should return `2178309`.
+
+```js
+assert.strictEqual(nim(), 2178309);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function nim() {
+
+  return true;
+}
+
+nim();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-302-strong-achilles-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-302-strong-achilles-numbers.md
new file mode 100644
index 00000000000..4c5301c49bf
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-302-strong-achilles-numbers.md
@@ -0,0 +1,50 @@
+---
+id: 5900f49b1000cf542c50ffad
+title: 'Problem 302: Strong Achilles Numbers'
+challengeType: 1
+forumTopicId: 301956
+dashedName: problem-302-strong-achilles-numbers
+---
+
+# --description--
+
+A positive integer $n$ is powerful if $p^2$ is a divisor of $n$ for every prime factor $p$ in $n$.
+
+A positive integer $n$ is a perfect power if $n$ can be expressed as a power of another positive integer.
+
+A positive integer $n$ is an Achilles number if $n$ is powerful but not a perfect power. For example, 864 and 1800 are Achilles numbers: $864 = 2^5 \times 3^3$ and $1800 = 2^3 \times 3^2 \times 5^2$.
+
+We shall call a positive integer $S$ a Strong Achilles number if both $S$ and $φ(S)$ are Achilles numbers. $φ$ denotes Euler's totient function.
+
+For example, 864 is a Strong Achilles number: $φ(864) = 288 = 2^5 \times 3^2$. However, 1800 isn't a Strong Achilles number because: $φ(1800) = 480 = 2^5 \times 3^1 \times 5^1$.
+
+There are 7 Strong Achilles numbers below ${10}^4$ and 656 below ${10}^8$.
+
+How many Strong Achilles numbers are there below ${10}^{18}$?
+
+# --hints--
+
+`strongAchillesNumbers()` should return `1170060`.
+
+```js
+assert.strictEqual(strongAchillesNumbers(), 1170060);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function strongAchillesNumbers() {
+
+  return true;
+}
+
+strongAchillesNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-303-multiples-with-small-digits.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-303-multiples-with-small-digits.md
new file mode 100644
index 00000000000..108d8bd39fc
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-303-multiples-with-small-digits.md
@@ -0,0 +1,44 @@
+---
+id: 5900f49b1000cf542c50ffae
+title: 'Problem 303: Multiples with small digits'
+challengeType: 1
+forumTopicId: 301957
+dashedName: problem-303-multiples-with-small-digits
+---
+
+# --description--
+
+For a positive integer $n$, define $f(n)$ as the least positive multiple of $n$ that, written in base 10, uses only digits $≤ 2$.
+
+Thus $f(2) = 2$, $f(3) = 12$, $f(7) = 21$, $f(42) = 210$, $f(89) = 1\\,121\\,222$.
+
+Also, $\displaystyle\sum_{n = 1}^{100} \frac{f(n)}{n} = 11\\,363\\,107$.
+
+Find $\displaystyle\sum_{n = 1}^{10\\,000} \frac{f(n)}{n}$.
+
+# --hints--
+
+`multiplesWithSmallDigits()` should return `1111981904675169`.
+
+```js
+assert.strictEqual(multiplesWithSmallDigits(), 1111981904675169);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function multiplesWithSmallDigits() {
+
+  return true;
+}
+
+multiplesWithSmallDigits();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-304-primonacci.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-304-primonacci.md
new file mode 100644
index 00000000000..a4939940a8f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-304-primonacci.md
@@ -0,0 +1,46 @@
+---
+id: 5900f49d1000cf542c50ffaf
+title: 'Problem 304: Primonacci'
+challengeType: 1
+forumTopicId: 301958
+dashedName: problem-304-primonacci
+---
+
+# --description--
+
+For any positive integer $n$ the function $\text{next_prime}(n)$ returns the smallest prime $p$ such that $p > n$.
+
+The sequence $a(n)$ is defined by: $a(1) = \text{next_prime}({10}^{14})$ and $a(n) = \text{next_prime}(a(n - 1))$ for $n > 1$.
+
+The fibonacci sequence $f(n)$ is defined by: $f(0) = 0$, $f(1) = 1$ and $f(n) = f(n - 1) + f(n - 2)$ for $n > 1$.
+
+The sequence $b(n)$ is defined as $f(a(n))$.
+
+Find $\sum b(n)$ for $1≤n≤100\\,000$. Give your answer $\bmod 1\\,234\\,567\\,891\\,011$.
+
+# --hints--
+
+`primonacci()` should return `283988410192`.
+
+```js
+assert.strictEqual(primonacci(), 283988410192);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primonacci() {
+
+  return true;
+}
+
+primonacci();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-305-reflexive-position.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-305-reflexive-position.md
new file mode 100644
index 00000000000..566e7b7b76c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-305-reflexive-position.md
@@ -0,0 +1,46 @@
+---
+id: 5900f49d1000cf542c50ffb0
+title: 'Problem 305: Reflexive Position'
+challengeType: 1
+forumTopicId: 301959
+dashedName: problem-305-reflexive-position
+---
+
+# --description--
+
+Let's call $S$ the (infinite) string that is made by concatenating the consecutive positive integers (starting from 1) written down in base 10.
+
+Thus, $S = 1234567891011121314151617181920212223242\ldots$
+
+It's easy to see that any number will show up an infinite number of times in $S$.
+
+Let's call $f(n)$ the starting position of the $n^{\text{th}}$ occurrence of $n$ in $S$. For example, $f(1) = 1$, $f(5) = 81$, $f(12) = 271$ and $f(7780) = 111\\,111\\,365$.
+
+Find $\sum f(3^k) for 1 ≤ k ≤ 13$.
+
+# --hints--
+
+`reflexivePosition()` should return `18174995535140`.
+
+```js
+assert.strictEqual(reflexivePosition(), 18174995535140);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function reflexivePosition() {
+
+  return true;
+}
+
+reflexivePosition();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-306-paper-strip-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-306-paper-strip-game.md
new file mode 100644
index 00000000000..3dd4604bc13
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-306-paper-strip-game.md
@@ -0,0 +1,54 @@
+---
+id: 5900f49f1000cf542c50ffb1
+title: 'Problem 306: Paper-strip Game'
+challengeType: 1
+forumTopicId: 301960
+dashedName: problem-306-paper-strip-game
+---
+
+# --description--
+
+The following game is a classic example of Combinatorial Game Theory:
+
+Two players start with a strip of $n$ white squares and they take alternate turns. On each turn, a player picks two contiguous white squares and paints them black. The first player who cannot make a move loses.
+
+- $n = 1$: No valid moves, so the first player loses automatically.
+- $n = 2$: Only one valid move, after which the second player loses.
+- $n = 3$: Two valid moves, but both leave a situation where the second player loses.
+- $n = 4$: There are three valid moves for the first player; who is able to win the game by painting the two middle squares.
+- $n = 5$: Four valid moves for the first player (shown below in red); but no matter what the player does, the second player (blue) wins.
+
+<img class="img-responsive center-block" alt="valid starting moves for strip with 5 squares" src="https://cdn.freecodecamp.org/curriculum/project-euler/paper-strip-game.gif" style="background-color: white; padding: 10px;" />
+
+So, for $1 ≤ n ≤ 5$, there are 3 values of $n$ for which the first player can force a win.
+
+Similarly, for $1 ≤ n ≤ 50$, there are 40 values of $n$ for which the first player can force a win.
+
+For $1 ≤ n ≤ 1\\,000\\,000$, how many values of $n$ are there for which the first player can force a win?
+
+# --hints--
+
+`paperStripGame()` should return `852938`.
+
+```js
+assert.strictEqual(paperStripGame(), 852938);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function paperStripGame() {
+
+  return true;
+}
+
+paperStripGame();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-307-chip-defects.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-307-chip-defects.md
new file mode 100644
index 00000000000..3f0fd2be0cb
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-307-chip-defects.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4a01000cf542c50ffb2
+title: 'Problem 307: Chip Defects'
+challengeType: 1
+forumTopicId: 301961
+dashedName: problem-307-chip-defects
+---
+
+# --description--
+
+$k$ defects are randomly distributed amongst $n$ integrated-circuit chips produced by a factory (any number of defects may be found on a chip and each defect is independent of the other defects).
+
+Let $p(k,n)$ represent the probability that there is a chip with at least 3 defects. For instance $p(3,7) ≈ 0.0204081633$.
+
+Find $p(20\\,000, 1\\,000\\,000)$ and give your answer rounded to 10 decimal places in the form 0.abcdefghij
+
+# --hints--
+
+`chipDefects()` should return `0.7311720251`.
+
+```js
+assert.strictEqual(chipDefects(), 0.7311720251);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function chipDefects() {
+
+  return true;
+}
+
+chipDefects();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-308-an-amazing-prime-generating-automaton.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-308-an-amazing-prime-generating-automaton.md
new file mode 100644
index 00000000000..22f3cabc900
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-308-an-amazing-prime-generating-automaton.md
@@ -0,0 +1,54 @@
+---
+id: 5900f4a11000cf542c50ffb3
+title: 'Problem 308: An amazing Prime-generating Automaton'
+challengeType: 1
+forumTopicId: 301962
+dashedName: problem-308-an-amazing-prime-generating-automaton
+---
+
+# --description--
+
+A program written in the programming language Fractran consists of a list of fractions.
+
+The internal state of the Fractran Virtual Machine is a positive integer, which is initially set to a seed value. Each iteration of a Fractran program multiplies the state integer by the first fraction in the list which will leave it an integer.
+
+For example, one of the Fractran programs that John Horton Conway wrote for prime-generation consists of the following 14 fractions:
+
+$$\frac{17}{91}, \frac{78}{85}, \frac{19}{51}, \frac{23}{38}, \frac{29}{33}, \frac{77}{29}, \frac{95}{23}, \frac{77}{19}, \frac{1}{17}, \frac{11}{13}, \frac{13}{11}, \frac{15}{2}, \frac{1}{7}, \frac{55}{1}$$
+
+Starting with the seed integer 2, successive iterations of the program produce the sequence:
+
+$$15, 825, 725, 1925, 2275, 425, \ldots, 68, \mathbf{4}, 30, \ldots, 136, \mathbf{8}, 60, \ldots, 544, \mathbf{32}, 240, \ldots$$
+
+The powers of 2 that appear in this sequence are $2^2, 2^3, 2^5, \ldots$.
+
+It can be shown that all the powers of 2 in this sequence have prime exponents and that all the primes appear as exponents of powers of 2, in proper order!
+
+If someone uses the above Fractran program to solve Project Euler Problem 7 (find the ${10001}^{\text{st}}$ prime), how many iterations would be needed until the program produces $2^{10001^{\text{st}}\text{ prime}}$?
+
+# --hints--
+
+`primeGeneratingAutomation()` should return `1539669807660924`.
+
+```js
+assert.strictEqual(primeGeneratingAutomation(), 1539669807660924);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeGeneratingAutomation() {
+
+  return true;
+}
+
+primeGeneratingAutomation();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-309-integer-ladders.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-309-integer-ladders.md
new file mode 100644
index 00000000000..721b756f533
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-309-integer-ladders.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4a11000cf542c50ffb4
+title: 'Problem 309: Integer Ladders'
+challengeType: 1
+forumTopicId: 301963
+dashedName: problem-309-integer-ladders
+---
+
+# --description--
+
+In the classic "Crossing Ladders" problem, we are given the lengths $x$ and $y$ of two ladders resting on the opposite walls of a narrow, level street. We are also given the height $h$ above the street where the two ladders cross and we are asked to find the width of the street ($w$).
+
+<img class="img-responsive center-block" alt="ladders x and y, crossing at the height h, and resting on opposite walls of the street of width w" src="https://cdn.freecodecamp.org/curriculum/project-euler/integer-ladders.gif" style="background-color: white; padding: 10px;" />
+
+Here, we are only concerned with instances where all four variables are positive integers. For example, if $x = 70$, $y = 119$ and $h = 30$, we can calculate that $w = 56$.
+
+In fact, for integer values $x$, $y$, $h$ and $0 &lt; x &lt; y &lt; 200$, there are only five triplets ($x$, $y$, $h$) producing integer solutions for $w$: (70, 119, 30), (74, 182, 21), (87, 105, 35), (100, 116, 35) and (119, 175, 40).
+
+For integer values $x$, $y$, $h$ and $0 &lt; x &lt; y &lt; 1\\,000\\,000$, how many triplets ($x$, $y$, $h$) produce integer solutions for $w$?
+
+# --hints--
+
+`integerLadders()` should return `210139`.
+
+```js
+assert.strictEqual(integerLadders(), 210139);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function integerLadders() {
+
+  return true;
+}
+
+integerLadders();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-31-coin-sums.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-31-coin-sums.md
new file mode 100644
index 00000000000..ae4372cd69f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-31-coin-sums.md
@@ -0,0 +1,77 @@
+---
+id: 5900f38b1000cf542c50fe9e
+title: 'Problem 31: Coin sums'
+challengeType: 1
+forumTopicId: 301965
+dashedName: problem-31-coin-sums
+---
+
+# --description--
+
+In England the currency is made up of pound, £, and pence, p, and there are eight coins in general circulation:
+
+<div style='margin-left: 4em;'>1p, 2p, 5p, 10p, 20p, 50p, £1 (100p) and £2 (200p).</div>
+
+It is possible to make £2 in the following way:
+
+<div style='margin-left: 4em;'>1×£1 + 1×50p + 2×20p + 1×5p + 1×2p + 3×1p</div>
+
+How many different ways can `n` pence be made using any number of coins?
+
+# --hints--
+
+`coinSums(50)` should return a number.
+
+```js
+assert(typeof coinSums(50) === 'number');
+```
+
+`coinSums(50)` should return 451.
+
+```js
+assert(coinSums(50) == 451);
+```
+
+`coinSums(100)` should return 4563.
+
+```js
+assert(coinSums(100) == 4563);
+```
+
+`coinSums(150)` should return 21873.
+
+```js
+assert(coinSums(150) == 21873);
+```
+
+`coinSums(200)` should return 73682.
+
+```js
+assert(coinSums(200) == 73682);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function coinSums(n) {
+
+  return n;
+}
+
+coinSums(200);
+```
+
+# --solutions--
+
+```js
+const coinSums = (n) => {
+  const getWays = (n, m=8, c=[1, 2, 5, 10, 20, 50, 100, 200]) => {
+    if (n === 0) return 1;
+    if (m === 0 || n < 0) return 0;
+    return getWays(n - c[m - 1], m, c) + getWays(n, m - 1, c);
+  };
+  return getWays(n);
+};
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-310-nim-square.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-310-nim-square.md
new file mode 100644
index 00000000000..4eacb352843
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-310-nim-square.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4a21000cf542c50ffb5
+title: 'Problem 310: Nim Square'
+challengeType: 1
+forumTopicId: 301966
+dashedName: problem-310-nim-square
+---
+
+# --description--
+
+Alice and Bob play the game Nim Square.
+
+Nim Square is just like ordinary three-heap normal play Nim, but the players may only remove a square number of stones from a heap.
+
+The number of stones in the three heaps is represented by the ordered triple ($a$, $b$, $c$).
+
+If $0 ≤ a ≤ b ≤ c ≤ 29$ then the number of losing positions for the next player is 1160.
+
+Find the number of losing positions for the next player if $0 ≤ a ≤ b ≤ c ≤ 100\\,000$.
+
+# --hints--
+
+`nimSquare()` should return `2586528661783`.
+
+```js
+assert.strictEqual(nimSquare(), 2586528661783);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function nimSquare() {
+
+  return true;
+}
+
+nimSquare();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-311-biclinic-integral-quadrilaterals.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-311-biclinic-integral-quadrilaterals.md
new file mode 100644
index 00000000000..97736d98034
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-311-biclinic-integral-quadrilaterals.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4a31000cf542c50ffb6
+title: 'Problem 311: Biclinic Integral Quadrilaterals'
+challengeType: 1
+forumTopicId: 301967
+dashedName: problem-311-biclinic-integral-quadrilaterals
+---
+
+# --description--
+
+$ABCD$ is a convex, integer sided quadrilateral with $1 ≤ AB &lt; BC &lt; CD &lt; AD$.
+
+$BD$ has integer length. $O$ is the midpoint of $BD$. $AO$ has integer length.
+
+We'll call $ABCD$ a biclinic integral quadrilateral if $AO = CO ≤ BO = DO$.
+
+For example, the following quadrilateral is a biclinic integral quadrilateral: $AB = 19$, $BC = 29$, $CD = 37$, $AD = 43$, $BD = 48$ and $AO = CO = 23$.
+
+<img class="img-responsive center-block" alt="quadrilateral ABCD, with point O, an midpoint of BD" src="https://cdn.freecodecamp.org/curriculum/project-euler/biclinic-integral-quadrilaterals.gif" style="background-color: white; padding: 10px;" />
+
+Let $B(N)$ be the number of distinct biclinic integral quadrilaterals $ABCD$ that satisfy ${AB}^2 + {BC}^2 + {CD}^2 + {AD}^2 ≤ N$. We can verify that $B(10\\,000) = 49$ and $B(1\\,000\\,000) = 38239$.
+
+Find $B(10\\,000\\,000\\,000)$.
+
+# --hints--
+
+`biclinicIntegralQuadrilaterals()` should return `2466018557`.
+
+```js
+assert.strictEqual(biclinicIntegralQuadrilaterals(), 2466018557);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function biclinicIntegralQuadrilaterals() {
+
+  return true;
+}
+
+biclinicIntegralQuadrilaterals();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-312-cyclic-paths-on-sierpiski-graphs.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-312-cyclic-paths-on-sierpiski-graphs.md
new file mode 100644
index 00000000000..122f28f97dc
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-312-cyclic-paths-on-sierpiski-graphs.md
@@ -0,0 +1,53 @@
+---
+id: 5900f4a51000cf542c50ffb7
+title: 'Problem 312: Cyclic paths on Sierpiński graphs'
+challengeType: 1
+forumTopicId: 301968
+dashedName: problem-312-cyclic-paths-on-sierpiski-graphs
+---
+
+# --description--
+
+- A Sierpiński graph of order-1 ($S_1$) is an equilateral triangle.
+- $S_{n + 1}$ is obtained from $S_n$ by positioning three copies of $S_n$ so that every pair of copies has one common corner.
+
+<img class="img-responsive center-block" alt="Sierpinski graphs of order-1 to order-5" src="https://cdn.freecodecamp.org/curriculum/project-euler/cyclic-paths-on-sierpinski-graphs-1.gif" style="background-color: white; padding: 10px;" />
+
+Let $C(n)$ be the number of cycles that pass exactly once through all the vertices of $S_n$. For example, $C(3) = 8$ because eight such cycles can be drawn on $S_3$, as shown below:
+
+<img class="img-responsive center-block" alt="eight cycles that pass exactly once through all vertices of S_3" src="https://cdn.freecodecamp.org/curriculum/project-euler/cyclic-paths-on-sierpinski-graphs-2.gif" style="background-color: white; padding: 10px;" />
+
+It can also be verified that:
+
+$$\begin{align}   & C(1) = C(2) = 1 \\\\
+  & C(5) = 71\\,328\\,803\\,586\\,048 \\\\   & C(10 000)\bmod {10}^8 = 37\\,652\\,224 \\\\
+  & C(10 000)\bmod {13}^8 = 617\\,720\\,485 \\\\ \end{align}$$
+
+Find $C(C(C(10\\,000)))\bmod {13}^8$.
+
+# --hints--
+
+`pathsOnSierpinskiGraphs()` should return `324681947`.
+
+```js
+assert.strictEqual(pathsOnSierpinskiGraphs(), 324681947);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pathsOnSierpinskiGraphs() {
+
+  return true;
+}
+
+pathsOnSierpinskiGraphs();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-313-sliding-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-313-sliding-game.md
new file mode 100644
index 00000000000..8f5726b71f4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-313-sliding-game.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4a61000cf542c50ffb8
+title: 'Problem 313: Sliding game'
+challengeType: 1
+forumTopicId: 301969
+dashedName: problem-313-sliding-game
+---
+
+# --description--
+
+In a sliding game a counter may slide horizontally or vertically into an empty space. The objective of the game is to move the red counter from the top left corner of a grid to the bottom right corner; the space always starts in the bottom right corner. For example, the following sequence of pictures show how the game can be completed in five moves on a 2 by 2 grid.
+
+<img class="img-responsive center-block" alt="completing game in five moves on grid 2x2" src="https://cdn.freecodecamp.org/curriculum/project-euler/sliding-game-1.gif" style="background-color: white; padding: 10px;" />
+
+Let $S(m, n)$ represent the minimum number of moves to complete the game on an $m$ by $n$ grid. For example, it can be verified that $S(5, 4) = 25$.
+
+<img class="img-responsive center-block" alt="initial grid state and final grid state for game on grid 5x4" src="https://cdn.freecodecamp.org/curriculum/project-euler/sliding-game-2.gif" style="background-color: white; padding: 10px;" />
+
+There are exactly 5482 grids for which $S(m, n) = p^2$, where $p &lt; 100$ is prime.
+
+How many grids does $S(m, n) = p^2$, where $p &lt; {10}^6$ is prime?
+
+# --hints--
+
+`slidingGame()` should return `2057774861813004`.
+
+```js
+assert.strictEqual(slidingGame(), 2057774861813004);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function slidingGame() {
+
+  return true;
+}
+
+slidingGame();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-314-the-mouse-on-the-moon.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-314-the-mouse-on-the-moon.md
new file mode 100644
index 00000000000..0bb0e4f9ab9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-314-the-mouse-on-the-moon.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4a71000cf542c50ffb9
+title: 'Problem 314: The Mouse on the Moon'
+challengeType: 1
+forumTopicId: 301970
+dashedName: problem-314-the-mouse-on-the-moon
+---
+
+# --description--
+
+The moon has been opened up, and land can be obtained for free, but there is a catch. You have to build a wall around the land that you stake out, and building a wall on the moon is expensive. Every country has been allotted a 500 m by 500 m square area, but they will possess only that area which they wall in. 251001 posts have been placed in a rectangular grid with 1 meter spacing. The wall must be a closed series of straight lines, each line running from post to post.
+
+The bigger countries of course have built a 2000 m wall enclosing the entire 250 000 $\text{m}^2$ area. The Duchy of Grand Fenwick, has a tighter budget, and has asked you (their Royal Programmer) to compute what shape would get best maximum $\frac{\text{enclosed-area}}{\text{wall-length}}$ ratio.
+
+You have done some preliminary calculations on a sheet of paper. For a 2000 meter wall enclosing the 250 000 $\text{m}^2$ area the $\frac{\text{enclosed-area}}{\text{wall-length}}$ ratio is 125.
+
+Although not allowed, but to get an idea if this is anything better: if you place a circle inside the square area touching the four sides the area will be equal to $π \times {250}^2 \text{m}^2$ and the perimeter will be $π \times 500 \text{m}$, so the $\frac{\text{enclosed-area}}{\text{wall-length}}$ ratio will also be 125.
+
+However, if you cut off from the square four triangles with sides 75 m, 75 m and $75\sqrt{2}$ m the total area becomes 238750 $\text{m}^2$ and the perimeter becomes $1400 + 300\sqrt{2}$ m. So this gives an $\frac{\text{enclosed-area}}{\text{wall-length}}$ ratio of 130.87, which is significantly better.
+
+<img class="img-responsive center-block" alt="picture showing difference in encosed-area between circle and square with cut off four triangles" src="https://cdn.freecodecamp.org/curriculum/project-euler/the-mouse-on-the-moon.gif" style="background-color: white; padding: 10px;" />
+
+Find the maximum $\frac{\text{enclosed-area}}{\text{wall-length}}$ ratio. Give your answer rounded to 8 places behind the decimal point in the form abc.defghijk.
+
+# --hints--
+
+`theMouseOnTheMoon()` should return `132.52756426`.
+
+```js
+assert.strictEqual(theMouseOnTheMoon(), 132.52756426);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function theMouseOnTheMoon() {
+
+  return true;
+}
+
+theMouseOnTheMoon();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-315-digital-root-clocks.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-315-digital-root-clocks.md
new file mode 100644
index 00000000000..59389d4a7ff
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-315-digital-root-clocks.md
@@ -0,0 +1,72 @@
+---
+id: 5900f4a71000cf542c50ffba
+title: 'Problem 315: Digital root clocks'
+challengeType: 1
+forumTopicId: 301971
+dashedName: problem-315-digital-root-clocks
+---
+
+# --description--
+
+<img class="img-responsive center-block" alt="animation of Sam's and Max's clocks calculating digital roots starting from 137" src="https://cdn.freecodecamp.org/curriculum/project-euler/digital-root-clocks.gif" style="background-color: white; padding: 10px;" />
+
+Sam and Max are asked to transform two digital clocks into two "digital root" clocks.
+
+A digital root clock is a digital clock that calculates digital roots step by step.
+
+When a clock is fed a number, it will show it and then it will start the calculation, showing all the intermediate values until it gets to the result. For example, if the clock is fed the number 137, it will show: `137` → `11` → `2` and then it will go black, waiting for the next number.
+
+Every digital number consists of some light segments: three horizontal (top, middle, bottom) and four vertical (top-left, top-right, bottom-left, bottom-right). Number `1` is made of vertical top-right and bottom-right, number `4` is made by middle horizontal and vertical top-left, top-right and bottom-right. Number `8` lights them all.
+
+The clocks consume energy only when segments are turned on/off. To turn on a `2` will cost 5 transitions, while a `7` will cost only 4 transitions.
+
+Sam and Max built two different clocks.
+
+Sam's clock is fed e.g. number 137: the clock shows `137`, then the panel is turned off, then the next number (`11`) is turned on, then the panel is turned off again and finally the last number (`2`) is turned on and, after some time, off.
+
+For the example, with number 137, Sam's clock requires:
+
+- `137`: $(2 + 5 + 4) × 2 = 22$ transitions (`137` on/off).
+- `11`: $(2 + 2) × 2 = 8$ transitions (`11` on/off).
+- `2`: $(5) × 2 = 10$ transitions (`2` on/off).
+
+For a grand total of 40 transitions.
+
+Max's clock works differently. Instead of turning off the whole panel, it is smart enough to turn off only those segments that won't be needed for the next number.
+
+For number 137, Max's clock requires:
+
+- `137` : $2 + 5 + 4 = 11$ transitions (`137` on), $7$ transitions (to turn off the segments that are not needed for number `11`).
+- `11` : $0$ transitions (number `11` is already turned on correctly), $3$ transitions (to turn off the first `1` and the bottom part of the second `1`; the top part is common with number `2`).
+- `2` : $4$ transitions (to turn on the remaining segments in order to get a `2`), $5$ transitions (to turn off number `2`).
+
+For a grand total of 30 transitions.
+
+Of course, Max's clock consumes less power than Sam's one. The two clocks are fed all the prime numbers between $A = {10}^7$ and $B = 2 × {10}^7$. Find the difference between the total number of transitions needed by Sam's clock and that needed by Max's one.
+
+# --hints--
+
+`digitalRootClocks()` should return `13625242`.
+
+```js
+assert.strictEqual(digitalRootClocks(), 13625242);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function digitalRootClocks() {
+
+  return true;
+}
+
+digitalRootClocks();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-316-numbers-in-decimal-expansions.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-316-numbers-in-decimal-expansions.md
new file mode 100644
index 00000000000..991df99ffa1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-316-numbers-in-decimal-expansions.md
@@ -0,0 +1,58 @@
+---
+id: 5900f4a81000cf542c50ffbb
+title: 'Problem 316: Numbers in decimal expansions'
+challengeType: 1
+forumTopicId: 301972
+dashedName: problem-316-numbers-in-decimal-expansions
+---
+
+# --description--
+
+Let $p = p_1 p_2 p_3 \ldots$ be an infinite sequence of random digits, selected from {0,1,2,3,4,5,6,7,8,9} with equal probability.
+
+It can be seen that $p$ corresponds to the real number $0.p_1 p_2 p_3 \ldots$.
+
+It can also be seen that choosing a random real number from the interval [0,1) is equivalent to choosing an infinite sequence of random digits selected from {0,1,2,3,4,5,6,7,8,9} with equal probability.
+
+For any positive integer $n$ with $d$ decimal digits, let $k$ be the smallest index such that $p_k, p_{k + 1}, \ldots p_{k + d - 1}$ are the decimal digits of $n$, in the same order.
+
+Also, let $g(n)$ be the expected value of $k$; it can be proven that $g(n)$ is always finite and, interestingly, always an integer number.
+
+For example, if $n = 535$, then
+
+for $p = 31415926\mathbf{535}897\ldots$, we get $k = 9$
+
+for $p = 35528714365004956000049084876408468\mathbf{535}4\ldots$, we get $k = 36$
+
+etc and we find that $g(535) = 1008$.
+
+Given that $\displaystyle\sum_{n = 2}^{999} g\left(\left\lfloor\frac{{10}^6}{n}\right\rfloor\right) = 27280188$, find $\displaystyle\sum_{n = 2}^{999\\,999} g\left(\left\lfloor\frac{{10}^{16}}{n}\right\rfloor\right)$.
+
+**Note:** $\lfloor x\rfloor$ represents the floor function.
+
+# --hints--
+
+`numbersInDecimalExpansion()` should return `542934735751917760`.
+
+```js
+assert.strictEqual(numbersInDecimalExpansion(), 542934735751917760);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function numbersInDecimalExpansion() {
+
+  return true;
+}
+
+numbersInDecimalExpansion();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-317-firecracker.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-317-firecracker.md
new file mode 100644
index 00000000000..f9715cfd8df
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-317-firecracker.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4aa1000cf542c50ffbc
+title: 'Problem 317: Firecracker'
+challengeType: 1
+forumTopicId: 301973
+dashedName: problem-317-firecracker
+---
+
+# --description--
+
+A firecracker explodes at a height of 100 m above level ground. It breaks into a large number of very small fragments, which move in every direction; all of them have the same initial velocity of 20 $\frac{\text{m}}{\text{s}}$.
+
+We assume that the fragments move without air resistance, in a uniform gravitational field with $g=9.81 \frac{\text{m}}{\text{s}^2}$.
+
+Find the volume (in $\text{m}^3$) of the region through which the fragments move before reaching the ground. Give your answer rounded to four decimal places.
+
+# --hints--
+
+`firecracker()` should return `1856532.8455`.
+
+```js
+assert.strictEqual(firecracker(), 1856532.8455);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function firecracker() {
+
+  return true;
+}
+
+firecracker();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-318-2011-nines.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-318-2011-nines.md
new file mode 100644
index 00000000000..f4b4f8315b5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-318-2011-nines.md
@@ -0,0 +1,56 @@
+---
+id: 5900f4ab1000cf542c50ffbd
+title: 'Problem 318: 2011 nines'
+challengeType: 1
+forumTopicId: 301974
+dashedName: problem-318-2011-nines
+---
+
+# --description--
+
+Consider the real number $\sqrt{2} + \sqrt{3}$.
+
+When we calculate the even powers of $\sqrt{2} + \sqrt{3}$ we get:
+
+$$\begin{align}   & {(\sqrt{2} + \sqrt{3})}^2 = 9.898979485566356\ldots \\\\
+  & {(\sqrt{2} + \sqrt{3})}^4 = 97.98979485566356\ldots \\\\   & {(\sqrt{2} + \sqrt{3})}^6 = 969.998969071069263\ldots \\\\
+  & {(\sqrt{2} + \sqrt{3})}^8 = 9601.99989585502907\ldots \\\\   & {(\sqrt{2} + \sqrt{3})}^{10} = 95049.999989479221\ldots \\\\
+  & {(\sqrt{2} + \sqrt{3})}^{12} = 940897.9999989371855\ldots \\\\   & {(\sqrt{2} + \sqrt{3})}^{14} = 9313929.99999989263\ldots \\\\
+  & {(\sqrt{2} + \sqrt{3})}^{16} = 92198401.99999998915\ldots \\\\ \end{align}$$
+
+It looks like that the number of consecutive nines at the beginning of the fractional part of these powers is non-decreasing. In fact it can be proven that the fractional part of ${(\sqrt{2} + \sqrt{3})}^{2n}$ approaches 1 for large $n$.
+
+Consider all real numbers of the form $\sqrt{p} + \sqrt{q}$ with $p$ and $q$ positive integers and $p &lt; q$, such that the fractional part of ${(\sqrt{p} + \sqrt{q})}^{2n}$ approaches 1 for large $n$.
+
+Let $C(p,q,n)$ be the number of consecutive nines at the beginning of the fractional part of ${(\sqrt{p} + \sqrt{q})}^{2n}$.
+
+Let $N(p,q)$ be the minimal value of $n$ such that $C(p,q,n) ≥ 2011$.
+
+Find $\sum N(p,q)$ for $p + q ≤ 2011$.
+
+# --hints--
+
+`twoThousandElevenNines()` should return `709313889`.
+
+```js
+assert.strictEqual(twoThousandElevenNines(), 709313889);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function twoThousandElevenNines() {
+
+  return true;
+}
+
+twoThousandElevenNines();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-319-bounded-sequences.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-319-bounded-sequences.md
new file mode 100644
index 00000000000..36341fac54b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-319-bounded-sequences.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4ab1000cf542c50ffbe
+title: 'Problem 319: Bounded Sequences'
+challengeType: 1
+forumTopicId: 301975
+dashedName: problem-319-bounded-sequences
+---
+
+# --description--
+
+Let $x_1, x_2, \ldots, x_n$ be a sequence of length $n$ such that:
+
+- $x_1 = 2$
+- for all $1 &lt; i ≤ n : x_{i - 1} &lt; x_i$
+- for all $i$ and $j$ with $1 ≤ i, j ≤ n : {(x_i)}^j &lt; {(x_j + 1)}^i$
+
+There are only five such sequences of length 2, namely: {2,4}, {2,5}, {2,6}, {2,7} and {2,8}. There are 293 such sequences of length 5; three examples are given below: {2,5,11,25,55}, {2,6,14,36,88}, {2,8,22,64,181}.
+
+Let $t(n)$ denote the number of such sequences of length $n$. You are given that $t(10) = 86195$ and $t(20) = 5227991891$.
+
+Find $t({10}^{10})$ and give your answer modulo $10^9$.
+
+# --hints--
+
+`boundedSequences()` should return `268457129`.
+
+```js
+assert.strictEqual(boundedSequences(), 268457129);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function boundedSequences() {
+
+  return true;
+}
+
+boundedSequences();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-32-pandigital-products.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-32-pandigital-products.md
new file mode 100644
index 00000000000..5fe7d0495c5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-32-pandigital-products.md
@@ -0,0 +1,118 @@
+---
+id: 5900f38c1000cf542c50fe9f
+title: 'Problem 32: Pandigital products'
+challengeType: 1
+forumTopicId: 301976
+dashedName: problem-32-pandigital-products
+---
+
+# --description--
+
+We shall say that an `n`-digit number is pandigital if it makes use of all the digits 1 to `n` exactly once; for example, the 5-digit number, 15234, is 1 through 5 pandigital.
+
+The product 7254 is unusual, as the identity, 39 × 186 = 7254, containing multiplicand, multiplier, and product is 1 through 9 pandigital.
+
+Find the sum of all products whose multiplicand/multiplier/product identity can be written as a 1 through `n` pandigital.
+
+**Hint:** Some products can be obtained in more than one way so be sure to only include it once in your sum.
+
+# --hints--
+
+`pandigitalProducts(4)` should return a number.
+
+```js
+assert(typeof pandigitalProducts(4) === 'number');
+```
+
+`pandigitalProducts(4)` should return `12`.
+
+```js
+assert.strictEqual(pandigitalProducts(4), 12);
+```
+
+`pandigitalProducts(6)` should return `162`.
+
+```js
+assert.strictEqual(pandigitalProducts(6), 162);
+```
+
+`pandigitalProducts(7)` should return `0`.
+
+```js
+assert.strictEqual(pandigitalProducts(7), 0);
+```
+
+`pandigitalProducts(8)` should return `13458`.
+
+```js
+assert.strictEqual(pandigitalProducts(8), 13458);
+```
+
+`pandigitalProducts(9)` should return `45228`.
+
+```js
+assert.strictEqual(pandigitalProducts(9), 45228);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pandigitalProducts(n) {
+
+  return true;
+}
+
+pandigitalProducts(4);
+```
+
+# --solutions--
+
+```js
+function pandigitalProducts(n) {
+  function is1toNPandigital(n, digitStr) {
+    // check if length is n
+    if (digitStr.length !== n) {
+      return false;
+    }
+    // check if pandigital
+    for (let i = digitStr.length; i > 0; i--) {
+      if (digitStr.indexOf(i.toString()) === -1) {
+        return false;
+      }
+    }
+    return true;
+  }
+  function concatenateNums(...numbers) {
+    let digitStr = '';
+    for (let i = 0; i < numbers.length; i++) {
+      digitStr += numbers[i].toString();
+    }
+    return digitStr;
+  }
+
+  const pandigitalNums = [];
+  const limit = 10 ** Math.floor(n / 2) - 1;
+  let sum = 0;
+  for (let mult1 = 2; mult1 < limit; mult1++) {
+    for (let mult2 = 2; mult2 < limit; mult2++) {
+      const product = mult1 * mult2;
+      const concatenated = concatenateNums(mult1, mult2, product);
+      if (concatenated.length > n) {
+        break;
+      } else if (concatenated.length < n) {
+        continue;
+      }
+      if (
+        is1toNPandigital(n, concatenated) &&
+        !pandigitalNums.includes(product)
+      ) {
+        pandigitalNums.push(product);
+        sum += product;
+      }
+    }
+  }
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-320-factorials-divisible-by-a-huge-integer.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-320-factorials-divisible-by-a-huge-integer.md
new file mode 100644
index 00000000000..b0f0cc5c6ae
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-320-factorials-divisible-by-a-huge-integer.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4ae1000cf542c50ffbf
+title: 'Problem 320: Factorials divisible by a huge integer'
+challengeType: 1
+forumTopicId: 301977
+dashedName: problem-320-factorials-divisible-by-a-huge-integer
+---
+
+# --description--
+
+Let $N(i)$ be the smallest integer $n$ such that $n!$ is divisible by $(i!)^{1234567890}$
+
+Let $S(u) = \sum N(i)$ for $10 ≤ i ≤ u$.
+
+$S(1000)=614\\,538\\,266\\,565\\,663$.
+
+Find $S(1\\,000\\,000)\bmod {10}^{18}$.
+
+# --hints--
+
+`divisibleByHugeInteger()` should return `278157919195482660`.
+
+```js
+assert.strictEqual(divisibleByHugeInteger(), 278157919195482660);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function divisibleByHugeInteger() {
+
+  return true;
+}
+
+divisibleByHugeInteger();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-321-swapping-counters.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-321-swapping-counters.md
new file mode 100644
index 00000000000..177610fd3c7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-321-swapping-counters.md
@@ -0,0 +1,52 @@
+---
+id: 5900f4ae1000cf542c50ffc0
+title: 'Problem 321: Swapping Counters'
+challengeType: 1
+forumTopicId: 301978
+dashedName: problem-321-swapping-counters
+---
+
+# --description--
+
+A horizontal row comprising of $2n + 1$ squares has $n$ red counters placed at one end and $n$ blue counters at the other end, being separated by a single empty square in the center. For example, when $n = 3$.
+
+<img class="img-responsive center-block" alt="three squares with red and blue counters placed on opposite ends of the row, separated by one empty square" src="https://cdn.freecodecamp.org/curriculum/project-euler/swapping-counters-1.gif" style="background-color: white; padding: 10px;" />
+
+A counter can move from one square to the next (slide) or can jump over another counter (hop) as long as the square next to that counter is unoccupied.
+
+<img class="img-responsive center-block" alt="allowed moves of the counter" src="https://cdn.freecodecamp.org/curriculum/project-euler/swapping-counters-2.gif" style="background-color: white; padding: 10px;" />
+
+Let $M(n)$ represent the minimum number of moves/actions to completely reverse the positions of the colored counters; that is, move all the red counters to the right and all the blue counters to the left.
+
+It can be verified $M(3) = 15$, which also happens to be a triangle number.
+
+If we create a sequence based on the values of n for which $M(n)$ is a triangle number then the first five terms would be: 1, 3, 10, 22, and 63, and their sum would be 99.
+
+Find the sum of the first forty terms of this sequence.
+
+# --hints--
+
+`swappingCounters()` should return `2470433131948040`.
+
+```js
+assert.strictEqual(swappingCounters(), 2470433131948040);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function swappingCounters() {
+
+  return true;
+}
+
+swappingCounters();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-322-binomial-coefficients-divisible-by-10.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-322-binomial-coefficients-divisible-by-10.md
new file mode 100644
index 00000000000..2c1725a5c4b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-322-binomial-coefficients-divisible-by-10.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4af1000cf542c50ffc1
+title: 'Problem 322: Binomial coefficients divisible by 10'
+challengeType: 1
+forumTopicId: 301979
+dashedName: problem-322-binomial-coefficients-divisible-by-10
+---
+
+# --description--
+
+Let $T(m, n)$ be the number of the binomial coefficients ${}^iC_n$ that are divisible by 10 for $n ≤ i &lt; m$ ($i$, $m$ and $n$ are positive integers).
+
+You are given that $T({10}^9, {10}^7 - 10) = 989\\,697\\,000$.
+
+Find $T({10}^{18}, {10}^{12} - 10)$.
+
+# --hints--
+
+`binomialCoefficientsDivisibleBy10()` should return `999998760323314000`.
+
+```js
+assert.strictEqual(binomialCoefficientsDivisibleBy10(), 999998760323314000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function binomialCoefficientsDivisibleBy10() {
+
+  return true;
+}
+
+binomialCoefficientsDivisibleBy10();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-323-bitwise-or-operations-on-random-integers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-323-bitwise-or-operations-on-random-integers.md
new file mode 100644
index 00000000000..7cd5acf36cc
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-323-bitwise-or-operations-on-random-integers.md
@@ -0,0 +1,47 @@
+---
+id: 5900f4b01000cf542c50ffc2
+title: 'Problem 323: Bitwise-OR operations on random integers'
+challengeType: 1
+forumTopicId: 301980
+dashedName: problem-323-bitwise-or-operations-on-random-integers
+---
+
+# --description--
+
+Let $y_0, y_1, y_2, \ldots$ be a sequence of random unsigned 32 bit integers (i.e. $0 ≤ y_i &lt; 2^{32}$, every value equally likely).
+
+For the sequence $x_i$ the following recursion is given:
+
+- $x_0 = 0$ and
+- $x_i = x_{i - 1} \mathbf{|} y_{i - 1}$, for $i > 0$. ($\mathbf{|}$ is the bitwise-OR operator)
+
+It can be seen that eventually there will be an index $N$ such that $x_i = 2^{32} - 1$ (a bit-pattern of all ones) for all $i ≥ N$.
+
+Find the expected value of $N$. Give your answer rounded to 10 digits after the decimal point.
+
+# --hints--
+
+`bitwiseOrOnRandomIntegers()` should return `6.3551758451`.
+
+```js
+assert.strictEqual(bitwiseOrOnRandomIntegers(), 6.3551758451);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function bitwiseOrOnRandomIntegers() {
+
+  return true;
+}
+
+bitwiseOrOnRandomIntegers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-324-building-a-tower.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-324-building-a-tower.md
new file mode 100644
index 00000000000..e79296a5f0f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-324-building-a-tower.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4b11000cf542c50ffc3
+title: 'Problem 324: Building a tower'
+challengeType: 1
+forumTopicId: 301981
+dashedName: problem-324-building-a-tower
+---
+
+# --description--
+
+Let $f(n)$ represent the number of ways one can fill a $3×3×n$ tower with blocks of $2×1×1$. You're allowed to rotate the blocks in any way you like; however, rotations, reflections etc of the tower itself are counted as distinct.
+
+For example (with $q = 100\\,000\\,007$):
+
+$$\begin{align}   & f(2) = 229, \\\\
+  & f(4) = 117\\,805, \\\\   & f(10)\bmod q = 96\\,149\\,360, \\\\
+  & f({10}^3)\bmod q = 24\\,806\\,056, \\\\ & f({10}^6)\bmod q = 30\\,808\\,124. \end{align}$$
+
+Find $f({10}^{10000})\bmod 100\\,000\\,007$.
+
+# --hints--
+
+`buildingTower()` should return `96972774`.
+
+```js
+assert.strictEqual(buildingTower(), 96972774);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function buildingTower() {
+
+  return true;
+}
+
+buildingTower();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-325-stone-game-ii.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-325-stone-game-ii.md
new file mode 100644
index 00000000000..b1392c1e246
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-325-stone-game-ii.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4b11000cf542c50ffc4
+title: 'Problem 325: Stone Game II'
+challengeType: 1
+forumTopicId: 301982
+dashedName: problem-325-stone-game-ii
+---
+
+# --description--
+
+A game is played with two piles of stones and two players. On each player's turn, the player may remove a number of stones from the larger pile. The number of stones removes must be a positive multiple of the number of stones in the smaller pile.
+
+E.g., let the ordered pair (6,14) describe a configuration with 6 stones in the smaller pile and 14 stones in the larger pile, then the first player can remove 6 or 12 stones from the larger pile.
+
+The player taking all the stones from a pile wins the game.
+
+A winning configuration is one where the first player can force a win. For example, (1,5), (2,6) and (3,12) are winning configurations because the first player can immediately remove all stones in the second pile.
+
+A losing configuration is one where the second player can force a win, no matter what the first player does. For example, (2,3) and (3,4) are losing configurations: any legal move leaves a winning configuration for the second player.
+
+Define $S(N)$ as the sum of ($x_i + y_i$) for all losing configurations ($x_i$, $y_i$), $0 &lt; x_i &lt; y_i ≤ N$. We can verify that $S(10) = 211$ and $S({10}^4) = 230\\,312\\,207\\,313$.
+
+Find $S({10}^{16})\bmod 7^{10}$.
+
+# --hints--
+
+`stoneGameTwo()` should return `54672965`.
+
+```js
+assert.strictEqual(stoneGameTwo(), 54672965);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function stoneGameTwo() {
+
+  return true;
+}
+
+stoneGameTwo();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-326-modulo-summations.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-326-modulo-summations.md
new file mode 100644
index 00000000000..e43a4a9f23c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-326-modulo-summations.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4b21000cf542c50ffc5
+title: 'Problem 326: Modulo Summations'
+challengeType: 1
+forumTopicId: 301983
+dashedName: problem-326-modulo-summations
+---
+
+# --description--
+
+Let $a_n$ be a sequence recursively defined by: $a_1 = 1$, $\displaystyle a_n = \left(\sum_{k = 1}^{n - 1} k \times a_k\right)\bmod n$.
+
+So the first 10 elements of $a_n$ are: 1, 1, 0, 3, 0, 3, 5, 4, 1, 9.
+
+Let $f(N, M)$ represent the number of pairs $(p, q)$ such that:
+
+$$ 1 \le p \le q \le N \\; \text{and} \\; \left(\sum_{i = p}^q a_i\right)\bmod M = 0$$
+
+It can be seen that $f(10, 10) = 4$ with the pairs (3,3), (5,5), (7,9) and (9,10).
+
+You are also given that $f({10}^4, {10}^3) = 97\\,158$.
+
+Find $f({10}^{12}, {10}^6)$.
+
+# --hints--
+
+`moduloSummations()` should return `1966666166408794400`.
+
+```js
+assert.strictEqual(moduloSummations(), 1966666166408794400);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function moduloSummations() {
+
+  return true;
+}
+
+moduloSummations();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-327-rooms-of-doom.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-327-rooms-of-doom.md
new file mode 100644
index 00000000000..d324e96908a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-327-rooms-of-doom.md
@@ -0,0 +1,62 @@
+---
+id: 5900f4b31000cf542c50ffc6
+title: 'Problem 327: Rooms of Doom'
+challengeType: 1
+forumTopicId: 301984
+dashedName: problem-327-rooms-of-doom
+---
+
+# --description--
+
+A series of three rooms are connected to each other by automatic doors.
+
+<img class="img-responsive center-block" alt="series of three rooms, connected to each other by automatic doors" src="https://cdn.freecodecamp.org/curriculum/project-euler/rooms-of-doom.gif" style="background-color: white; padding: 10px;" />
+
+Each door is operated by a security card. Once you enter a room, the door automatically closes, and that security card cannot be used again. A machine will dispense an unlimited number of cards at the start, but each room (including the starting room) contains scanners. If they detect that you are holding more than three security cards or if they detect an unattended security card on the floor, then all the doors will become permanently locked. However, each room contains a box where you may safely store any number of security cards for use at a later stage.
+
+If you simply tried to travel through the rooms one at a time then as you entered room 3 you would have used all three cards and would be trapped in that room forever!
+
+However, if you make use of the storage boxes, then escape is possible. For example, you could enter room 1 using your first card, place one card in the storage box, and use your third card to exit the room back to the start. Then after collecting three more cards from the dispensing machine you could use one to enter room 1 and collect the card you placed in the box a moment ago. You now have three cards again and will be able to travel through the remaining three doors. This method allows you to travel through all three rooms using six security cards in total.
+
+It is possible to travel through six rooms using a total of 123 security cards while carrying a maximum of 3 cards.
+
+Let $C$ be the maximum number of cards which can be carried at any time.
+
+Let $R$ be the number of rooms to travel through.
+
+Let $M(C, R)$ be the minimum number of cards required from the dispensing machine to travel through $R$ rooms carrying up to a maximum of $C$ cards at any time.
+
+For example, $M(3, 6) = 123$ and $M(4, 6) = 23$.
+
+And, $\sum M(C, 6) = 146$ for $3 ≤ C ≤ 4$.
+
+You are given that $\sum M(C, 10) = 10382$ for $3 ≤ C ≤ 10$.
+
+Find $\sum M(C, 30)$ for $3 ≤ C ≤ 40$.
+
+# --hints--
+
+`roomsOfDoom()` should return `34315549139516`.
+
+```js
+assert.strictEqual(roomsOfDoom(), 34315549139516);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function roomsOfDoom() {
+
+  return true;
+}
+
+roomsOfDoom();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-328-lowest-cost-search.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-328-lowest-cost-search.md
new file mode 100644
index 00000000000..3d3d44147e3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-328-lowest-cost-search.md
@@ -0,0 +1,56 @@
+---
+id: 5900f4b41000cf542c50ffc7
+title: 'Problem 328: Lowest-cost Search'
+challengeType: 1
+forumTopicId: 301985
+dashedName: problem-328-lowest-cost-search
+---
+
+# --description--
+
+We are trying to find a hidden number selected from the set of integers {1, 2, ..., $n$} by asking questions. Each number (question) we ask, has a <u>cost equal to the number asked</u> and we get one of three possible answers:
+
+- "Your guess is lower than the hidden number", or
+- "Yes, that's it!", or
+- "Your guess is higher than the hidden number".
+
+Given the value of $n$, an optimal strategy minimizes the total cost (i.e. the sum of all the questions asked) <u>for the worst possible case</u>. E.g.
+
+If $n = 3$, the best we can do is obviously to ask the number "<strong>2</strong>". The answer will immediately lead us to find the hidden number (at a total cost = 2).
+
+If $n = 8$, we might decide to use a "binary search" type of strategy: Our first question would be "<strong>4</strong>" and if the hidden number is higher than 4 we will need one or two additional questions. Let our second question be "<strong>6</strong>". If the hidden number is still higher than 6, we will need a third question in order to discriminate between 7 and 8. Thus, our third question will be "<strong>7</strong>" and the total cost for this worst-case scenario will be $4 + 6 + 7 = \mathbf{\color{red}{17}}$.
+
+We can improve considerably the worst-case cost for $n = 8$, by asking "<strong>5</strong>" as our first question. If we are told that the hidden number is higher than 5, our second question will be "<strong>7</strong>", then we'll know for certain what the hidden number is (for a total cost of $5 + 7 = \mathbf{\color{blue}{12}}$). If we are told that the hidden number is lower than 5, our second question will be "<strong>3</strong>" and if the hidden number is lower than 3 our third question will be "<strong>1</strong>", giving a total cost of $5 + 3 + 1 = \mathbf{\color{blue}{9}}$. Since $\mathbf{\color{blue}{12 > 9}}$, the worst-case cost for this strategy is <strong><span style="color: red;">12</span></strong>. That's better than what we achieved previously with the "binary search" strategy; it is also better than or equal to any other strategy. So, in fact, we have just described an optimal strategy for $n = 8$.
+
+Let $C(n)$ be the worst-case cost achieved by an optimal strategy for $n$, as described above. Thus $C(1) = 0$, $C(2) = 1$, $C(3) = 2$ and $C(8) = 12$.
+
+Similarly, $C(100) = 400$ and $\displaystyle\sum_{n = 1}^{100} C(n) = 17575$.
+
+Find $\displaystyle\sum_{n = 1}^{200\\,000} C(n)$.
+
+# --hints--
+
+`lowestCostSearch()` should return `260511850222`.
+
+```js
+assert.strictEqual(lowestCostSearch(), 260511850222);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function lowestCostSearch() {
+
+  return true;
+}
+
+lowestCostSearch();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-329-prime-frog.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-329-prime-frog.md
new file mode 100644
index 00000000000..e14df07e58a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-329-prime-frog.md
@@ -0,0 +1,54 @@
+---
+id: 5900f4b51000cf542c50ffc8
+title: 'Problem 329: Prime Frog'
+challengeType: 1
+forumTopicId: 301986
+dashedName: problem-329-prime-frog
+---
+
+# --description--
+
+Susan has a prime frog.
+
+Her frog is jumping around over 500 squares numbered 1 to 500.
+
+He can only jump one square to the left or to the right, with equal probability, and he cannot jump outside the range [1;500]. (if it lands at either end, it automatically jumps to the only available square on the next move.)
+
+When he is on a square with a prime number on it, he croaks 'P' (PRIME) with probability $\frac{2}{3}$ or 'N' (NOT PRIME) with probability $\frac{1}{3}$ just before jumping to the next square. When he is on a square with a number on it that is not a prime he croaks 'P' with probability $\frac{1}{3}$ or 'N' with probability $\frac{2}{3}$ just before jumping to the next square.
+
+Given that the frog's starting position is random with the same probability for every square, and given that she listens to his first 15 croaks, what is the probability that she hears the sequence PPPPNNPPPNPPNPN?
+
+Give your answer as a string as a fraction `p/q` in reduced form.
+
+# --hints--
+
+`primeFrog()` should return a string.
+
+```js
+assert(typeof primeFrog() === 'string');
+```
+
+`primeFrog()` should return the string `199740353/29386561536000`.
+
+```js
+assert.strictEqual(primeFrog(), '199740353/29386561536000');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeFrog() {
+
+  return true;
+}
+
+primeFrog();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-33-digit-cancelling-fractions.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-33-digit-cancelling-fractions.md
new file mode 100644
index 00000000000..5419f2f8270
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-33-digit-cancelling-fractions.md
@@ -0,0 +1,102 @@
+---
+id: 5900f38d1000cf542c50fea0
+title: 'Problem 33: Digit cancelling fractions'
+challengeType: 1
+forumTopicId: 301987
+dashedName: problem-33-digit-cancelling-fractions
+---
+
+# --description--
+
+The fraction <sup>49</sup>/<sub>98</sub> is a curious fraction, as an inexperienced mathematician in attempting to simplify it may incorrectly believe that <sup>49</sup>/<sub>98</sub> = <sup>4</sup>/<sub>8</sub>, which is correct, is obtained by cancelling the 9s.
+
+We shall consider fractions like, <sup>30</sup>/<sub>50</sub> = <sup>3</sup>/<sub>5</sub>, to be trivial examples.
+
+There are exactly four non-trivial examples of this type of fraction, less than one in value, and containing two digits in the numerator and denominator.
+
+If the product of these four fractions is given in its lowest common terms, find the value of the denominator.
+
+# --hints--
+
+`digitCancellingFractions()` should return a number.
+
+```js
+assert(typeof digitCancellingFractions() === 'number');
+```
+
+`digitCancellingFractions()` should return 100.
+
+```js
+assert.strictEqual(digitCancellingFractions(), 100);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function digitCancellingFractions() {
+
+  return true;
+}
+
+digitCancellingFractions();
+```
+
+# --solutions--
+
+```js
+function digitCancellingFractions() {
+  function isCurious(numerator, denominator) {
+    const fraction = numerator / denominator;
+    const numString = numerator.toString();
+    const denString = denominator.toString();
+
+    if (numString[1] === '0' && denString[1] === '0') {
+      // trivial
+      return false;
+    }
+    for (let i = 0; i < 2; i++) {
+      for (let j = 0; j < 2; j++) {
+        if (numString[i] === denString[j]) {
+          const newNum = parseInt(numString[1 - i], 10);
+          const newDen = parseInt(denString[1 - j], 10);
+          if (newNum / newDen === fraction) {
+            return true;
+          }
+        }
+      }
+    }
+    return false;
+  }
+  function findLargestDivisor(a, b) {
+    let gcd = a > b ? b : a;
+    while (gcd > 1) {
+      if (a % gcd === 0 && b % gcd === 0) {
+        return gcd;
+      }
+      gcd--;
+    }
+    return gcd;
+  }
+
+  function simplifyFraction(numerator, denominator) {
+    const divisor = findLargestDivisor(numerator, denominator);
+    return [numerator / divisor, denominator / divisor];
+  }
+
+  let multipleNumerator = 1;
+  let multipleDenominator = 1;
+
+  for (let denominator = 11; denominator < 100; denominator++) {
+    for (let numerator = 10; numerator < denominator; numerator++) {
+      if (isCurious(numerator, denominator)) {
+        multipleNumerator *= numerator;
+        multipleDenominator *= denominator;
+      }
+    }
+  }
+
+  return simplifyFraction(multipleNumerator, multipleDenominator)[1];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-330-eulers-number.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-330-eulers-number.md
new file mode 100644
index 00000000000..33079aadd49
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-330-eulers-number.md
@@ -0,0 +1,54 @@
+---
+id: 5900f4b71000cf542c50ffc9
+title: 'Problem 330: Euler''s Number'
+challengeType: 1
+forumTopicId: 301988
+dashedName: problem-330-eulers-number
+---
+
+# --description--
+
+An infinite sequence of real numbers $a(n)$ is defined for all integers $n$ as follows:
+
+$$ a(n) = \begin{cases} 1                                                       & n < 0 \\\\
+\displaystyle \sum_{i = 1}^{\infty} \frac{a(n - 1)}{i!} & n \ge 0 \end{cases} $$
+
+For example,
+
+$$\begin{align}   & a(0) = \frac{1}{1!} + \frac{1}{2!} + \frac{1}{3!} + \ldots = e − 1 \\\\
+  & a(1) = \frac{e − 1}{1!} + \frac{1}{2!} + \frac{1}{3!} + \ldots = 2e − 3 \\\\ & a(2) = \frac{2e − 3}{1!} + \frac{e − 1}{2!} + \frac{1}{3!} + \ldots = \frac{7}{2} e − 6 \end{align}$$
+
+with $e = 2.7182818\ldots$ being Euler's constant.
+
+It can be shown that $a(n)$ is of the form $\displaystyle\frac{A(n)e + B(n)}{n!}$ for integers $A(n)$ and $B(n)$.
+
+For example $\displaystyle a(10) = \frac{328161643e − 652694486}{10!}$.
+
+Find $A({10}^9)$ + $B({10}^9)$ and give your answer $\bmod 77\\,777\\,777$.
+
+# --hints--
+
+`eulersNumber()` should return `15955822`.
+
+```js
+assert.strictEqual(eulersNumber(), 15955822);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function eulersNumber() {
+
+  return true;
+}
+
+eulersNumber();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-331-cross-flips.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-331-cross-flips.md
new file mode 100644
index 00000000000..84e5ffbdd51
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-331-cross-flips.md
@@ -0,0 +1,52 @@
+---
+id: 5900f4b71000cf542c50ffca
+title: 'Problem 331: Cross flips'
+challengeType: 1
+forumTopicId: 301989
+dashedName: problem-331-cross-flips
+---
+
+# --description--
+
+N×N disks are placed on a square game board. Each disk has a black side and white side.
+
+At each turn, you may choose a disk and flip all the disks in the same row and the same column as this disk: thus $2 × N - 1$ disks are flipped. The game ends when all disks show their white side. The following example shows a game on a 5×5 board.
+
+<img class="img-responsive center-block" alt="animation showing game on 5x5 board" src="https://cdn.freecodecamp.org/curriculum/project-euler/cross-flips.gif" style="background-color: white; padding: 10px;" />
+
+It can be proven that 3 is the minimal number of turns to finish this game.
+
+The bottom left disk on the $N×N$ board has coordinates (0, 0); the bottom right disk has coordinates ($N - 1$,$0$) and the top left disk has coordinates ($0$,$N - 1$).
+
+Let $C_N$ be the following configuration of a board with $N × N$ disks: A disk at ($x$, $y$) satisfying $N - 1 \le \sqrt{x^2 + y^2} \lt N$, shows its black side; otherwise, it shows its white side. $C_5$ is shown above.
+
+Let $T(N)$ be the minimal number of turns to finish a game starting from configuration $C_N$ or 0 if configuration $C_N$ is unsolvable. We have shown that $T(5) = 3$. You are also given that $T(10) = 29$ and $T(1\\,000) = 395\\,253$.
+
+Find $\displaystyle \sum_{i = 3}^{31} T(2^i - i)$.
+
+# --hints--
+
+`crossFlips()` should return `467178235146843500`.
+
+```js
+assert.strictEqual(crossFlips(), 467178235146843500);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function crossFlips() {
+
+  return true;
+}
+
+crossFlips();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-332-spherical-triangles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-332-spherical-triangles.md
new file mode 100644
index 00000000000..54fe2d09a50
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-332-spherical-triangles.md
@@ -0,0 +1,52 @@
+---
+id: 5900f4b91000cf542c50ffcb
+title: 'Problem 332: Spherical triangles'
+challengeType: 1
+forumTopicId: 301990
+dashedName: problem-332-spherical-triangles
+---
+
+# --description--
+
+A spherical triangle is a figure formed on the surface of a sphere by three great circular arcs intersecting pairwise in three vertices.
+
+<img class="img-responsive center-block" alt="spherical triangle formed on the surface of a sphere" src="https://cdn.freecodecamp.org/curriculum/project-euler/spherical-triangles.jpg" style="background-color: white; padding: 10px;" />
+
+Let $C(r)$ be the sphere with the centre (0,0,0) and radius $r$.
+
+Let $Z(r)$ be the set of points on the surface of $C(r)$ with integer coordinates.
+
+Let $T(r)$ be the set of spherical triangles with vertices in $Z(r)$. Degenerate spherical triangles, formed by three points on the same great arc, are <u>not</u> included in $T(r)$.
+
+Let $A(r)$ be the area of the smallest spherical triangle in $T(r)$.
+
+For example $A(14)$ is 3.294040 rounded to six decimal places.
+
+Find $\displaystyle \sum_{r = 1}^{50} A(r)$. Give your answer rounded to six decimal places.
+
+# --hints--
+
+`sphericalTriangles()` should return `2717.751525`.
+
+```js
+assert.strictEqual(sphericalTriangles(), 2717.751525);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sphericalTriangles() {
+
+  return true;
+}
+
+sphericalTriangles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-333-special-partitions.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-333-special-partitions.md
new file mode 100644
index 00000000000..27cad095741
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-333-special-partitions.md
@@ -0,0 +1,53 @@
+---
+id: 5900f4b91000cf542c50ffcc
+title: 'Problem 333: Special partitions'
+challengeType: 1
+forumTopicId: 301991
+dashedName: problem-333-special-partitions
+---
+
+# --description--
+
+All positive integers can be partitioned in such a way that each and every term of the partition can be expressed as $2^i \times 3^j$, where $i, j ≥ 0$.
+
+Let's consider only those such partitions where none of the terms can divide any of the other terms. For example, the partition of $17 = 2 + 6 + 9 = (2^1 \times 3^0 + 2^1 \times 3^1 + 2^0 \times 3^2)$ would not be valid since 2 can divide 6. Neither would the partition $17 = 16 + 1 = (2^4 \times 3^0 + 2^0 \times 3^0)$ since 1 can divide 16. The only valid partition of 17 would be $8 + 9 = (2^3 \times 3^0 + 2^0 \times 3^2)$.
+
+Many integers have more than one valid partition, the first being 11 having the following two partitions.
+
+$$\begin{align}   & 11 = 2 + 9 = (2^1 \times 3^0 + 2^0 \times 3^2) \\\\
+  & 11 = 8 + 3 = (2^3 \times 3^0 + 2^0 \times 3^1) \end{align}$$
+
+Let's define $P(n)$ as the number of valid partitions of $n$. For example, $P(11) = 2$.
+
+Let's consider only the prime integers $q$ which would have a single valid partition such as $P(17)$.
+
+The sum of the primes $q &lt;100$ such that $P(q) = 1$ equals 233.
+
+Find the sum of the primes $q &lt; 1\\,000\\,000$ such that $P(q) = 1$.
+
+# --hints--
+
+`specialPartitions()` should return `3053105`.
+
+```js
+assert.strictEqual(specialPartitions(), 3053105);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function specialPartitions() {
+
+  return true;
+}
+
+specialPartitions();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-334-spilling-the-beans.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-334-spilling-the-beans.md
new file mode 100644
index 00000000000..d8be81c5efa
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-334-spilling-the-beans.md
@@ -0,0 +1,53 @@
+---
+id: 5900f4ba1000cf542c50ffcd
+title: 'Problem 334: Spilling the beans'
+challengeType: 1
+forumTopicId: 301992
+dashedName: problem-334-spilling-the-beans
+---
+
+# --description--
+
+In Plato's heaven, there exist an infinite number of bowls in a straight line. Each bowl either contains some or none of a finite number of beans. A child plays a game, which allows only one kind of move: removing two beans from any bowl, and putting one in each of the two adjacent bowls. The game ends when each bowl contains either one or no beans.
+
+For example, consider two adjacent bowls containing 2 and 3 beans respectively, all other bowls being empty. The following eight moves will finish the game:
+
+<img class="img-responsive center-block" alt="animation of game when two adjacent bowls contains 2 and 3 beans respectivelly" src="https://cdn.freecodecamp.org/curriculum/project-euler/spilling-the-beans.gif" style="background-color: white; padding: 10px;" />
+
+You are given the following sequences:
+
+$$\begin{align}   & t_0 = 123456, \\\\
+  & t_i = \begin{cases}          \frac{t_{i - 1}}{2},               & \text{if $t_{i - 1}$ is even} \\\\
+         \left\lfloor\frac{t_{i - 1}}{2}\right\rfloor \oplus 926252, & \text{if $t_{i - 1}$ is odd}          \end{cases} \\\\
+         & \qquad \text{where $⌊x⌋$ is the floor function and $\oplus$ is the bitwise XOR operator.} \\\\ & b_i = (t_i\bmod 2^{11}) + 1. \end{align}$$
+
+The first two terms of the last sequence are $b_1 = 289$ and $b_2 = 145$. If we start with $b_1$ and $b_2$ beans in two adjacent bowls, 3419100 moves would be required to finish the game.
+
+Consider now 1500 adjacent bowls containing $b_1, b_2, \ldots, b_{1500}$ beans respectively, all other bowls being empty. Find how many moves it takes before the game ends.
+
+# --hints--
+
+`spillingTheBeans()` should return `150320021261690850`.
+
+```js
+assert.strictEqual(spillingTheBeans(), 150320021261690850);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function spillingTheBeans() {
+
+  return true;
+}
+
+spillingTheBeans();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-335-gathering-the-beans.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-335-gathering-the-beans.md
new file mode 100644
index 00000000000..c1b35177c9b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-335-gathering-the-beans.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4bd1000cf542c50ffce
+title: 'Problem 335: Gathering the beans'
+challengeType: 1
+forumTopicId: 301993
+dashedName: problem-335-gathering-the-beans
+---
+
+# --description--
+
+Whenever Peter feels bored, he places some bowls, containing one bean each, in a circle. After this, he takes all the beans out of a certain bowl and drops them one by one in the bowls going clockwise. He repeats this, starting from the bowl he dropped the last bean in, until the initial situation appears again. For example with 5 bowls he acts as follows:
+
+<img class="img-responsive center-block" alt="animation of moving beans in 5 bowls" src="https://cdn.freecodecamp.org/curriculum/project-euler/gathering-the-beans.gif" style="background-color: white; padding: 10px;" />
+
+So with 5 bowls it takes Peter 15 moves to return to the initial situation.
+
+Let $M(x)$ represent the number of moves required to return to the initial situation, starting with $x$ bowls. Thus, $M(5) = 15$. It can also be verified that $M(100) = 10920$.
+
+Find $\displaystyle\sum_{k = 0}^{{10}^{18}} M(2^k + 1)$. Give your answer modulo $7^9$.
+
+# --hints--
+
+`gatheringTheBeans()` should return `5032316`.
+
+```js
+assert.strictEqual(gatheringTheBeans(), 5032316);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function gatheringTheBeans() {
+
+  return true;
+}
+
+gatheringTheBeans();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-336-maximix-arrangements.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-336-maximix-arrangements.md
new file mode 100644
index 00000000000..c5df56c3d7b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-336-maximix-arrangements.md
@@ -0,0 +1,58 @@
+---
+id: 5900f4bd1000cf542c50ffcf
+title: 'Problem 336: Maximix Arrangements'
+challengeType: 1
+forumTopicId: 301994
+dashedName: problem-336-maximix-arrangements
+---
+
+# --description--
+
+A train is used to transport four carriages in the order: $ABCD$. However, sometimes when the train arrives to collect the carriages they are not in the correct order.
+
+To rearrange the carriages, they are all shunted onto a large rotating turntable. After the carriages are uncoupled at a specific point, the train moves off the turntable pulling the carriages still attached with it. The remaining carriages are rotated 180°. All of the carriages are then rejoined and this process is repeated as often as necessary in order to obtain the least number of uses of the turntable.
+
+Some arrangements, such as $ADCB$, can be solved easily: the carriages are separated between $A$ and $D$, and after $DCB$ are rotated the correct order has been achieved.
+
+However, Simple Simon, the train driver, is not known for his efficiency, so he always solves the problem by initially getting carriage $A$ in the correct place, then carriage $B$, and so on.
+
+Using four carriages, the worst possible arrangements for Simon, which we shall call maximix arrangements, are $DACB$ and $DBAC$; each requiring him five rotations (although, using the most efficient approach, they could be solved using just three rotations). The process he uses for $DACB$ is shown below.
+
+<img class="img-responsive center-block" alt="five rotations for maximix arrangement DACB" src="https://cdn.freecodecamp.org/curriculum/project-euler/maximix-arrangements.gif" style="background-color: white; padding: 10px;" />
+
+It can be verified that there are 24 maximix arrangements for six carriages, of which the tenth lexicographic maximix arrangement is $DFAECB$.
+
+Find the ${2011}^{\text{th}}$ lexicographic maximix arrangement for eleven carriages.
+
+# --hints--
+
+`maximixArrangements()` should return a string.
+
+```js
+assert(typeof maximixArrangements() === 'string');
+```
+
+`maximixArrangements()` should return the string `CAGBIHEFJDK`.
+
+```js
+assert.strictEqual(maximixArrangements(), 'CAGBIHEFJDK');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function maximixArrangements() {
+
+  return true;
+}
+
+maximixArrangements();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-337-totient-stairstep-sequences.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-337-totient-stairstep-sequences.md
new file mode 100644
index 00000000000..ed090ed3f86
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-337-totient-stairstep-sequences.md
@@ -0,0 +1,52 @@
+---
+id: 5900f4be1000cf542c50ffd0
+title: 'Problem 337: Totient Stairstep Sequences'
+challengeType: 1
+forumTopicId: 301995
+dashedName: problem-337-totient-stairstep-sequences
+---
+
+# --description--
+
+Let $\\{a_1, a_2, \ldots, a_n\\}$ be an integer sequence of length $n$ such that:
+
+- $a_1 = 6$
+- for all $1 ≤ i &lt; n$ : $φ(a_i) &lt; φ(a_{i + 1}) &lt; a_i &lt; a_{i + 1}$
+
+$φ$ denotes Euler's totient function.
+
+Let $S(N)$ be the number of such sequences with $a_n ≤ N$.
+
+For example, $S(10) = 4$: {6}, {6, 8}, {6, 8, 9} and {6, 10}.
+
+We can verify that $S(100) = 482\\,073\\,668$ and $S(10\\,000)\bmod {10}^8 = 73\\,808\\,307$.
+
+Find $S(20\\,000\\,000)\bmod {10}^8$.
+
+
+# --hints--
+
+`totientStairstepSequences()` should return `85068035`.
+
+```js
+assert.strictEqual(totientStairstepSequences(), 85068035);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function totientStairstepSequences() {
+
+  return true;
+}
+
+totientStairstepSequences();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-338-cutting-rectangular-grid-paper.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-338-cutting-rectangular-grid-paper.md
new file mode 100644
index 00000000000..9a2143b65fd
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-338-cutting-rectangular-grid-paper.md
@@ -0,0 +1,52 @@
+---
+id: 5900f4be1000cf542c50ffd1
+title: 'Problem 338: Cutting Rectangular Grid Paper'
+challengeType: 1
+forumTopicId: 301996
+dashedName: problem-338-cutting-rectangular-grid-paper
+---
+
+# --description--
+
+A rectangular sheet of grid paper with integer dimensions $w$ × $h$ is given. Its grid spacing is 1.
+
+When we cut the sheet along the grid lines into two pieces and rearrange those pieces without overlap, we can make new rectangles with different dimensions.
+
+For example, from a sheet with dimensions 9 × 4, we can make rectangles with dimensions 18 × 2, 12 × 3 and 6 × 6 by cutting and rearranging as below:
+
+<img class="img-responsive center-block" alt="sheet with 9 x 4 dimensions cut in three different ways to make rectangles with 18 x 2, 12 x 3 and 6 x 6 dimensions" src="https://cdn.freecodecamp.org/curriculum/project-euler/cutting-rectangular-grid-paper.gif" style="background-color: white; padding: 10px;" />
+
+Similarly, from a sheet with dimensions 9 × 8, we can make rectangles with dimensions 18 × 4 and 12 × 6.
+
+For a pair $w$ and $h$, let $F(w, h)$ be the number of distinct rectangles that can be made from a sheet with dimensions $w$ × $h$. For example, $F(2, 1) = 0$, $F(2, 2) = 1$, $F(9, 4) = 3$ and $F(9, 8) = 2$. Note that rectangles congruent to the initial one are not counted in $F(w, h)$. Note also that rectangles with dimensions $w$ × $h$ and dimensions $h$ × $w$ are not considered distinct.
+
+For an integer $N$, let $G(N)$ be the sum of $F(w, h)$ for all pairs $w$ and $h$ which satisfy $0 &lt; h ≤ w ≤ N$. We can verify that $G(10) = 55$, $G({10}^3) = 971\\,745$ and $G({10}^5) = 9\\,992\\,617\\,687$.
+
+Find $G({10}^{12})$. Give your answer modulo ${10}^8$.
+
+# --hints--
+
+`cuttingRectangularGridPaper()` should return `15614292`.
+
+```js
+assert.strictEqual(cuttingRectangularGridPaper(), 15614292);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cuttingRectangularGridPaper() {
+
+  return true;
+}
+
+cuttingRectangularGridPaper();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-339-peredur-fab-efrawg.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-339-peredur-fab-efrawg.md
new file mode 100644
index 00000000000..7c1934c581b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-339-peredur-fab-efrawg.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4c01000cf542c50ffd2
+title: 'Problem 339: Peredur fab Efrawg'
+challengeType: 1
+forumTopicId: 301997
+dashedName: problem-339-peredur-fab-efrawg
+---
+
+# --description--
+
+"And he came towards a valley, through which ran a river; and the borders of the valley were wooded, and on each side of the river were level meadows. And on one side of the river he saw a flock of white sheep, and on the other a flock of black sheep. And whenever one of the white sheep bleated, one of the black sheep would cross over and become white; and when one of the black sheep bleated, one of the white sheep would cross over and become black." - Peredur the Son of Evrawc
+
+Initially, each flock consists of $n$ sheep. Each sheep (regardless of color) is equally likely to be the next sheep to bleat. After a sheep has bleated and a sheep from the other flock has crossed over, Peredur may remove a number of white sheep in order to maximize the expected final number of black sheep. Let $E(n)$ be the expected final number of black sheep if Peredur uses an optimal strategy.
+
+You are given that $E(5) = 6.871346$ rounded to 6 places behind the decimal point.
+
+Find $E(10\\,000)$ and give your answer rounded to 6 places behind the decimal point.
+
+# --hints--
+
+`peredurFabEfrawg()` should return `19823.542204`.
+
+```js
+assert.strictEqual(peredurFabEfrawg(), 19823.542204);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function peredurFabEfrawg() {
+
+  return true;
+}
+
+peredurFabEfrawg();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-34-digit-factorials.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-34-digit-factorials.md
new file mode 100644
index 00000000000..2eb87f93ba1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-34-digit-factorials.md
@@ -0,0 +1,50 @@
+---
+id: 5900f38e1000cf542c50fea1
+title: 'Problem 34: Digit factorials'
+challengeType: 1
+forumTopicId: 301998
+dashedName: problem-34-digit-factorials
+---
+
+# --description--
+
+145 is a curious number, as 1! + 4! + 5! = 1 + 24 + 120 = 145.
+
+Find the numbers and the sum of the numbers which are equal to the sum of the factorial of their digits.
+
+**Note:** as 1! = 1 and 2! = 2 are not sums they are not included.
+
+# --hints--
+
+`digitFactorial()` should return an object.
+
+```js
+assert.typeOf(digitFactorial(), 'object');
+```
+
+`digitFactorial()` should return { sum: 40730, numbers: [145, 40585] }.
+
+```js
+assert.deepEqual(digitFactorial(), { sum: 40730, numbers: [145, 40585] });
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function digitFactorial() {
+
+  var sum = 0;
+  var numbers = [];
+  return { sum, numbers };
+}
+
+digitFactorial();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-340-crazy-function.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-340-crazy-function.md
new file mode 100644
index 00000000000..72da02c1095
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-340-crazy-function.md
@@ -0,0 +1,47 @@
+---
+id: 5900f4c21000cf542c50ffd4
+title: 'Problem 340: Crazy Function'
+challengeType: 1
+forumTopicId: 301999
+dashedName: problem-340-crazy-function
+---
+
+# --description--
+
+For fixed integers $a$, $b$, $c$, define the crazy function $F(n)$ as follows:
+
+$$\begin{align}   & F(n) = n - c \\;\text{ for all } n > b \\\\
+  & F(n) = F(a + F(a + F(a + F(a + n)))) \\;\text{ for all } n ≤ b. \end{align}$$
+
+Also, define $S(a, b, c) = \displaystyle\sum_{n = 0}^b F(n)$.
+
+For example, if $a = 50$, $b = 2000$ and $c = 40$, then $F(0) = 3240$ and $F(2000) = 2040$. Also, $S(50, 2000, 40) = 5\\,204\\,240$.
+
+Find the last 9 digits of $S({21}^7, 7^{21}, {12}^7)$.
+
+# --hints--
+
+`crazyFunction()` should return `291504964`.
+
+```js
+assert.strictEqual(crazyFunction(), 291504964);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function crazyFunction() {
+
+  return true;
+}
+
+crazyFunction();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-341-golombs-self-describing-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-341-golombs-self-describing-sequence.md
new file mode 100644
index 00000000000..f3ebbd9cdd0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-341-golombs-self-describing-sequence.md
@@ -0,0 +1,47 @@
+---
+id: 5900f4c11000cf542c50ffd3
+title: 'Problem 341: Golomb''s self-describing sequence'
+challengeType: 1
+forumTopicId: 302000
+dashedName: problem-341-golombs-self-describing-sequence
+---
+
+# --description--
+
+The Golomb's self-describing sequence ($G(n)$) is the only nondecreasing sequence of natural numbers such that $n$ appears exactly $G(n)$ times in the sequence. The values of $G(n)$ for the first few $n$ are
+
+$$\begin{array}{c}   n    & 1 & 2 & 3 & 4 & 5 & 6 & 7 & 8 & 9 & 10 & 11 & 12 & 13 & 14 & 15 & \ldots \\\\
+  G(n) & 1 & 2 & 2 & 3 & 3 & 4 & 4 & 4 & 5 & 5  &  5 &  6 &  6 &  6 &  6 & \ldots \end{array}$$
+
+You are given that $G({10}^3) = 86$, $G({10}^6) = 6137$.
+
+You are also given that $\sum G(n^3) = 153\\,506\\,976$ for $1 ≤ n &lt; {10}^3$.
+
+Find $\sum G(n^3)$ for $1 ≤ n &lt; {10}^6$.
+
+# --hints--
+
+`golombsSequence()` should return `56098610614277016`.
+
+```js
+assert.strictEqual(golombsSequence(), 56098610614277016);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function golombsSequence() {
+
+  return true;
+}
+
+golombsSequence();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-342-the-totient-of-a-square-is-a-cube.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-342-the-totient-of-a-square-is-a-cube.md
new file mode 100644
index 00000000000..85990bc5b54
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-342-the-totient-of-a-square-is-a-cube.md
@@ -0,0 +1,45 @@
+---
+id: 5900f4c31000cf542c50ffd5
+title: 'Problem 342: The totient of a square is a cube'
+challengeType: 1
+forumTopicId: 302001
+dashedName: problem-342-the-totient-of-a-square-is-a-cube
+---
+
+# --description--
+
+Consider the number 50.
+
+${50}^2 = 2500 = 2^2 × 5^4$, so $φ(2500) = 2 × 4 × 5^3 = 8 × 5^3 = 2^3 × 5^3$. $φ$ denotes Euler's totient function.
+
+So 2500 is a square and $φ(2500)$ is a cube.
+
+Find the sum of all numbers $n$, $1 &lt; n &lt; {10}^{10}$ such that $φ(n^2)$ is a cube.
+
+
+# --hints--
+
+`totientOfSquare()` should return `5943040885644`.
+
+```js
+assert.strictEqual(totientOfSquare(), 5943040885644);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function totientOfSquare() {
+
+  return true;
+}
+
+totientOfSquare();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-343-fractional-sequences.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-343-fractional-sequences.md
new file mode 100644
index 00000000000..f284af9e94b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-343-fractional-sequences.md
@@ -0,0 +1,55 @@
+---
+id: 5900f4c41000cf542c50ffd6
+title: 'Problem 343: Fractional Sequences'
+challengeType: 1
+forumTopicId: 302002
+dashedName: problem-343-fractional-sequences
+---
+
+# --description--
+
+For any positive integer $k$, a finite sequence $a_i$ of fractions $\frac{x_i}{y_i}$ is defined by:
+
+- $a_1 = \displaystyle\frac{1}{k}$ and
+- $a_i = \displaystyle\frac{(x_{i - 1} + 1)}{(y_{i - 1} - 1)}$ reduced to lowest terms for $i > 1$.
+
+When $a_i$ reaches some integer $n$, the sequence stops. (That is, when $y_i = 1$.)
+
+Define $f(k) = n$.
+
+For example, for $k = 20$:
+
+$$\frac{1}{20} → \frac{2}{19} → \frac{3}{18} = \frac{1}{6} → \frac{2}{5} → \frac{3}{4} → \frac{4}{3} → \frac{5}{2} → \frac{6}{1} = 6$$
+
+So $f(20) = 6$.
+
+Also $f(1) = 1$, $f(2) = 2$, $f(3) = 1$ and $\sum f(k^3) = 118\\,937$ for $1 ≤ k ≤ 100$.
+
+Find $\sum f(k^3)$ for $1 ≤ k ≤ 2 × {10}^6$.
+
+# --hints--
+
+`fractionalSequences()` should return `269533451410884200`.
+
+```js
+assert.strictEqual(fractionalSequences(), 269533451410884200);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function fractionalSequences() {
+
+  return true;
+}
+
+fractionalSequences();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-344-silver-dollar-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-344-silver-dollar-game.md
new file mode 100644
index 00000000000..0f9fcc5f2e6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-344-silver-dollar-game.md
@@ -0,0 +1,56 @@
+---
+id: 5900f4c51000cf542c50ffd7
+title: 'Problem 344: Silver dollar game'
+challengeType: 1
+forumTopicId: 302003
+dashedName: problem-344-silver-dollar-game
+---
+
+# --description--
+
+One variant of N.G. de Bruijn's silver dollar game can be described as follows:
+
+On a strip of squares a number of coins are placed, at most one coin per square. Only one coin, called the silver dollar, has any value. Two players take turns making moves. At each turn a player must make either a regular or a special move.
+
+A regular move consists of selecting one coin and moving it one or more squares to the left. The coin cannot move out of the strip or jump on or over another coin.
+
+Alternatively, the player can choose to make the special move of pocketing the leftmost coin rather than making a regular move. If no regular moves are possible, the player is forced to pocket the leftmost coin.
+
+The winner is the player who pockets the silver dollar.
+
+<img class="img-responsive center-block" alt="silver dollar game" src="https://cdn.freecodecamp.org/curriculum/project-euler/silver-dollar-game.gif" style="background-color: white; padding: 10px;" />
+
+A winning configuration is an arrangement of coins on the strip where the first player can force a win no matter what the second player does.
+
+Let $W(n, c)$ be the number of winning configurations for a strip of $n$ squares, $c$ worthless coins and one silver dollar.
+
+You are given that $W(10, 2) = 324$ and $W(100, 10) = 1\\,514\\,704\\,946\\,113\\,500$.
+
+Find $W(1\\,000\\,000, 100)$ modulo the semiprime $1000\\,036\\,000\\,099 (= 1\\,000\\,003 \times 1\\,000\\,033)$.
+
+# --hints--
+
+`silverDollarGame()` should return `65579304332`.
+
+```js
+assert.strictEqual(silverDollarGame(), 65579304332);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function silverDollarGame() {
+
+  return true;
+}
+
+silverDollarGame();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-345-matrix-sum.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-345-matrix-sum.md
new file mode 100644
index 00000000000..19aa26fd74f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-345-matrix-sum.md
@@ -0,0 +1,55 @@
+---
+id: 5900f4c81000cf542c50ffda
+title: 'Problem 345: Matrix Sum'
+challengeType: 1
+forumTopicId: 302004
+dashedName: problem-345-matrix-sum
+---
+
+# --description--
+
+We define the Matrix Sum of a matrix as the maximum sum of matrix elements with each element being the only one in his row and column.
+
+For example, the Matrix Sum of the matrix below equals $3315 ( = 863 + 383 + 343 + 959 + 767)$:
+
+$$\begin{array}{rrrrr}     7                &  53                & 183                & 439                & \color{lime}{863} \\\\
+  497                & \color{lime}{383} & 563                &  79                & 973 \\\\   287                &  63                & \color{lime}{343} & 169                & 583 \\\\
+  627                & 343                & 773                & \color{lime}{959} & 943 \\\\ \color{lime}{767} & 473                & 103                & 699                & 303 \end{array}$$
+
+Find the Matrix Sum of:
+
+$$\\begin{array}{r}     7 &  53 & 183 & 439 & 863 & 497 & 383 & 563 &  79 & 973 & 287 &  63 & 343 & 169 & 583 \\\\
+  627 & 343 & 773 & 959 & 943 & 767 & 473 & 103 & 699 & 303 & 957 & 703 & 583 & 639 & 913 \\\\   447 & 283 & 463 &  29 &  23 & 487 & 463 & 993 & 119 & 883 & 327 & 493 & 423 & 159 & 743 \\\\
+  217 & 623 &   3 & 399 & 853 & 407 & 103 & 983 &  89 & 463 & 290 & 516 & 212 & 462 & 350 \\\\   960 & 376 & 682 & 962 & 300 & 780 & 486 & 502 & 912 & 800 & 250 & 346 & 172 & 812 & 350 \\\\
+  870 & 456 & 192 & 162 & 593 & 473 & 915 &  45 & 989 & 873 & 823 & 965 & 425 & 329 & 803 \\\\   973 & 965 & 905 & 919 & 133 & 673 & 665 & 235 & 509 & 613 & 673 & 815 & 165 & 992 & 326 \\\\
+  322 & 148 & 972 & 962 & 286 & 255 & 941 & 541 & 265 & 323 & 925 & 281 & 601 &  95 & 973 \\\\   445 & 721 &  11 & 525 & 473 &  65 & 511 & 164 & 138 & 672 &  18 & 428 & 154 & 448 & 848 \\\\
+  414 & 456 & 310 & 312 & 798 & 104 & 566 & 520 & 302 & 248 & 694 & 976 & 430 & 392 & 198 \\\\   184 & 829 & 373 & 181 & 631 & 101 & 969 & 613 & 840 & 740 & 778 & 458 & 284 & 760 & 390 \\\\
+  821 & 461 & 843 & 513 &  17 & 901 & 711 & 993 & 293 & 157 & 274 &  94 & 192 & 156 & 574 \\\\    34 & 124 &   4 & 878 & 450 & 476 & 712 & 914 & 838 & 669 & 875 & 299 & 823 & 329 & 699 \\\\
+  815 & 559 & 813 & 459 & 522 & 788 & 168 & 586 & 966 & 232 & 308 & 833 & 251 & 631 & 107 \\\\ 813 & 883 & 451 & 509 & 615 &  77 & 281 & 613 & 459 & 205 & 380 & 274 & 302 &  35 & 805 \end{array}$$
+
+# --hints--
+
+`matrixSum()` should return `13938`.
+
+```js
+assert.strictEqual(matrixSum(), 13938);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function matrixSum() {
+
+  return true;
+}
+
+matrixSum();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-346-strong-repunits.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-346-strong-repunits.md
new file mode 100644
index 00000000000..98b7cc48b2f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-346-strong-repunits.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4c71000cf542c50ffd8
+title: 'Problem 346: Strong Repunits'
+challengeType: 1
+forumTopicId: 302005
+dashedName: problem-346-strong-repunits
+---
+
+# --description--
+
+The number 7 is special, because 7 is 111 written in base 2, and 11 written in base 6 (i.e. $7_{10} = {11}_6 = {111}_2$). In other words, 7 is a repunit in at least two bases $b > 1$.
+
+We shall call a positive integer with this property a strong repunit. It can be verified that there are 8 strong repunits below 50: {1, 7, 13, 15, 21, 31, 40, 43}. Furthermore, the sum of all strong repunits below 1000 equals 15864.
+
+Find the sum of all strong repunits below ${10}^{12}$.
+
+# --hints--
+
+`strongRepunits()` should return `336108797689259260`.
+
+```js
+assert.strictEqual(strongRepunits(), 336108797689259260);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function strongRepunits() {
+
+  return true;
+}
+
+strongRepunits();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-347-largest-integer-divisible-by-two-primes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-347-largest-integer-divisible-by-two-primes.md
new file mode 100644
index 00000000000..15174e82655
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-347-largest-integer-divisible-by-two-primes.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4c81000cf542c50ffd9
+title: 'Problem 347: Largest integer divisible by two primes'
+challengeType: 1
+forumTopicId: 302006
+dashedName: problem-347-largest-integer-divisible-by-two-primes
+---
+
+# --description--
+
+The largest integer $≤ 100$ that is only divisible by both the primes 2 and 3 is 96, as $96 = 32 \times 3 = 2^5 \times 3$.
+
+For two distinct primes $p$ and $q$ let $M(p, q, N)$ be the largest positive integer $≤ N$ only divisible by both $p$ and $q$ and $M(p, q, N)=0$ if such a positive integer does not exist.
+
+E.g. $M(2, 3, 100) = 96$.
+
+$M(3, 5, 100) = 75$ and not 90 because 90 is divisible by 2, 3 and 5. Also $M(2, 73, 100) = 0$ because there does not exist a positive integer $≤ 100$ that is divisible by both 2 and 73.
+
+Let $S(N)$ be the sum of all distinct $M(p, q, N)$. $S(100)=2262$.
+
+Find $S(10\\,000\\,000)$.
+
+# --hints--
+
+`integerDivisibleByTwoPrimes()` should return `11109800204052`.
+
+```js
+assert.strictEqual(integerDivisibleByTwoPrimes(), 11109800204052);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function integerDivisibleByTwoPrimes() {
+
+  return true;
+}
+
+integerDivisibleByTwoPrimes();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-348-sum-of-a-square-and-a-cube.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-348-sum-of-a-square-and-a-cube.md
new file mode 100644
index 00000000000..8e69b16ca7a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-348-sum-of-a-square-and-a-cube.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4c81000cf542c50ffdb
+title: 'Problem 348: Sum of a square and a cube'
+challengeType: 1
+forumTopicId: 302007
+dashedName: problem-348-sum-of-a-square-and-a-cube
+---
+
+# --description--
+
+Many numbers can be expressed as the sum of a square and a cube. Some of them in more than one way.
+
+Consider the palindromic numbers that can be expressed as the sum of a square and a cube, both greater than 1, in exactly 4 different ways.
+
+For example, 5229225 is a palindromic number and it can be expressed in exactly 4 different ways:
+
+$$\begin{align}   & {2285}^2 + {20}^3 \\\\
+  & {2223}^2 + {66}^3 \\\\   & {1810}^2 + {125}^3 \\\\
+  & {1197}^2 + {156}^3 \end{align}$$
+
+Find the sum of the five smallest such palindromic numbers.
+
+# --hints--
+
+`sumOfSquareAndCube()` should return `1004195061`.
+
+```js
+assert.strictEqual(sumOfSquareAndCube(), 1004195061);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumOfSquareAndCube() {
+
+  return true;
+}
+
+sumOfSquareAndCube();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-349-langtons-ant.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-349-langtons-ant.md
new file mode 100644
index 00000000000..71fe17860a2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-349-langtons-ant.md
@@ -0,0 +1,45 @@
+---
+id: 5900f4ca1000cf542c50ffdc
+title: 'Problem 349: Langton''s ant'
+challengeType: 1
+forumTopicId: 302008
+dashedName: problem-349-langtons-ant
+---
+
+# --description--
+
+An ant moves on a regular grid of squares that are coloured either black or white.
+
+The ant is always oriented in one of the cardinal directions (left, right, up or down) and moves from square to adjacent square according to the following rules:
+
+- if it is on a black square, it flips the color of the square to white, rotates 90° counterclockwise and moves forward one square.
+- if it is on a white square, it flips the color of the square to black, rotates 90° clockwise and moves forward one square.
+
+Starting with a grid that is entirely white, how many squares are black after ${10}^{18}$ moves of the ant?
+
+# --hints--
+
+`langtonsAnt()` should return `115384615384614940`.
+
+```js
+assert.strictEqual(langtonsAnt(), 115384615384614940);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function langtonsAnt() {
+
+  return true;
+}
+
+langtonsAnt();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-35-circular-primes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-35-circular-primes.md
new file mode 100644
index 00000000000..aaae9562bb0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-35-circular-primes.md
@@ -0,0 +1,132 @@
+---
+id: 5900f38f1000cf542c50fea2
+title: 'Problem 35: Circular primes'
+challengeType: 1
+forumTopicId: 302009
+dashedName: problem-35-circular-primes
+---
+
+# --description--
+
+The number, 197, is called a circular prime because all rotations of the digits: 197, 971, and 719, are themselves prime.
+
+There are thirteen such primes below 100: 2, 3, 5, 7, 11, 13, 17, 31, 37, 71, 73, 79, and 97.
+
+How many circular primes are there below `n`, whereas 100 ≤ `n` ≤ 1000000?
+
+**Note:**
+
+Circular primes individual rotation can exceed `n`.
+
+# --hints--
+
+`circularPrimes(100)` should return a number.
+
+```js
+assert(typeof circularPrimes(100) === 'number');
+```
+
+`circularPrimes(100)` should return 13.
+
+```js
+assert(circularPrimes(100) == 13);
+```
+
+`circularPrimes(100000)` should return 43.
+
+```js
+assert(circularPrimes(100000) == 43);
+```
+
+`circularPrimes(250000)` should return 45.
+
+```js
+assert(circularPrimes(250000) == 45);
+```
+
+`circularPrimes(500000)` should return 49.
+
+```js
+assert(circularPrimes(500000) == 49);
+```
+
+`circularPrimes(750000)` should return 49.
+
+```js
+assert(circularPrimes(750000) == 49);
+```
+
+`circularPrimes(1000000)` should return 55.
+
+```js
+assert(circularPrimes(1000000) == 55);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function circularPrimes(n) {
+
+  return n;
+}
+
+circularPrimes(1000000);
+```
+
+# --solutions--
+
+```js
+function rotate(n) {
+  if (n.length == 1) return n;
+  return n.slice(1) + n[0];
+}
+
+function circularPrimes(n) {
+  // Nearest n < 10^k
+  const bound = 10 ** Math.ceil(Math.log10(n));
+  const primes = [0, 0, 2];
+  let count = 0;
+
+  // Making primes array
+  for (let i = 4; i <= bound; i += 2) {
+    primes.push(i - 1);
+    primes.push(0);
+  }
+
+  // Getting upperbound
+  const upperBound = Math.ceil(Math.sqrt(bound));
+
+  // Setting other non-prime numbers to 0
+  for (let i = 3; i < upperBound; i += 2) {
+    if (primes[i]) {
+      for (let j = i * i; j < bound; j += i) {
+        primes[j] = 0;
+      }
+    }
+  }
+
+  // Iterating through the array
+  for (let i = 2; i < n; i++) {
+    if (primes[i]) {
+      let curr = String(primes[i]);
+      let tmp = 1; // tmp variable to hold the no of rotations
+      for (let x = rotate(curr); x != curr; x = rotate(x)) {
+        if (x > n && primes[x]) {
+          continue;
+        }
+        else if (!primes[x]) {
+          // If the rotated value is 0 then it isn't a circular prime, break the loop
+          tmp = 0;
+          break;
+        }
+        tmp++;
+        primes[x] = 0;
+      }
+      count += tmp;
+    }
+  }
+  return count;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-350-constraining-the-least-greatest-and-the-greatest-least.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-350-constraining-the-least-greatest-and-the-greatest-least.md
new file mode 100644
index 00000000000..b40eb3cd67a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-350-constraining-the-least-greatest-and-the-greatest-least.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4cb1000cf542c50ffdd
+title: 'Problem 350: Constraining the least greatest and the greatest least'
+challengeType: 1
+forumTopicId: 302010
+dashedName: problem-350-constraining-the-least-greatest-and-the-greatest-least
+---
+
+# --description--
+
+A list of size $n$ is a sequence of $n$ natural numbers. Examples are (2, 4, 6), (2, 6, 4), (10, 6, 15, 6), and (11).
+
+The greatest common divisor, or $gcd$, of a list is the largest natural number that divides all entries of the list. Examples: $gcd(2, 6, 4) = 2$, $gcd(10, 6, 15, 6) = 1$ and $gcd(11) = 11$.
+
+The least common multiple, or $lcm$, of a list is the smallest natural number divisible by each entry of the list. Examples: $lcm(2, 6, 4) = 12$, $lcm(10, 6, 15, 6) = 30$ and $lcm(11) = 11$.
+
+Let $f(G, L, N)$ be the number of lists of size $N$ with $gcd ≥ G$ and $lcm ≤ L$. For example:
+
+$$\begin{align}   & f(10, 100, 1) = 91 \\\\
+  & f(10, 100, 2) = 327 \\\\   & f(10, 100, 3) = 1135 \\\\
+  & f(10, 100, 1000)\bmod {101}^4 = 3\\,286\\,053 \end{align}$$
+
+Find $f({10}^6, {10}^{12}, {10}^{18})\bmod {101}^4$.
+
+# --hints--
+
+`leastGreatestAndGreatestLeast()` should return `84664213`.
+
+```js
+assert.strictEqual(leastGreatestAndGreatestLeast(), 84664213);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function leastGreatestAndGreatestLeast() {
+
+  return true;
+}
+
+leastGreatestAndGreatestLeast();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-351-hexagonal-orchards.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-351-hexagonal-orchards.md
new file mode 100644
index 00000000000..fa6811e9185
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-351-hexagonal-orchards.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4cb1000cf542c50ffde
+title: 'Problem 351: Hexagonal orchards'
+challengeType: 1
+forumTopicId: 302011
+dashedName: problem-351-hexagonal-orchards
+---
+
+# --description--
+
+A hexagonal orchard of order $n$ is a triangular lattice made up of points within a regular hexagon with side $n$. The following is an example of a hexagonal orchard of order 5:
+
+<img class="img-responsive center-block" alt="hexagonal orchard of order 5, with highlighted in green points, which are hidden from the center by a point closer to it" src="https://cdn.freecodecamp.org/curriculum/project-euler/hexagonal-orchards.png" style="background-color: white; padding: 10px;" />
+
+Highlighted in green are the points which are hidden from the center by a point closer to it. It can be seen that for a hexagonal orchard of order 5, 30 points are hidden from the center.
+
+Let $H(n)$ be the number of points hidden from the center in a hexagonal orchard of order $n$.
+
+$H(5) = 30$. $H(10) = 138$. $H(1\\,000)$ = $1\\,177\\,848$.
+
+Find $H(100\\,000\\,000)$.
+
+# --hints--
+
+`hexagonalOrchards()` should return `11762187201804552`.
+
+```js
+assert.strictEqual(hexagonalOrchards(), 11762187201804552);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function hexagonalOrchards() {
+
+  return true;
+}
+
+hexagonalOrchards();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-352-blood-tests.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-352-blood-tests.md
new file mode 100644
index 00000000000..b0de4ec7213
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-352-blood-tests.md
@@ -0,0 +1,70 @@
+---
+id: 5900f4cd1000cf542c50ffdf
+title: 'Problem 352: Blood tests'
+challengeType: 1
+forumTopicId: 302012
+dashedName: problem-352-blood-tests
+---
+
+# --description--
+
+Each one of the 25 sheep in a flock must be tested for a rare virus, known to affect 2% of the sheep population.
+
+An accurate and extremely sensitive PCR test exists for blood samples, producing a clear positive / negative result, but it is very time-consuming and expensive.
+
+Because of the high cost, the vet-in-charge suggests that instead of performing 25 separate tests, the following procedure can be used instead:
+
+The sheep are split into 5 groups of 5 sheep in each group. For each group, the 5 samples are mixed together and a single test is performed. Then,
+
+- If the result is negative, all the sheep in that group are deemed to be virus-free.
+- If the result is positive, 5 additional tests will be performed (a separate test for each animal) to determine the affected individual(s).
+
+Since the probability of infection for any specific animal is only 0.02, the first test (on the pooled samples) for each group will be:
+
+- Negative (and no more tests needed) with probability ${0.98}^5 = 0.9039207968$.
+- Positive (5 additional tests needed) with probability $1 - 0.9039207968 = 0.0960792032$.
+
+Thus, the expected number of tests for each group is $1 + 0.0960792032 × 5 = 1.480396016$.
+
+Consequently, all 5 groups can be screened using an average of only $1.480396016 × 5 = \mathbf{7.40198008}$ tests, which represents a huge saving of more than 70%!
+
+Although the scheme we have just described seems to be very efficient, it can still be improved considerably (always assuming that the test is sufficiently sensitive and no adverse effects are caused by mixing different samples). E.g.:
+
+- We may start by running a test on a mixture of all the 25 samples. It can be verified that in about 60.35% of the cases this test will be negative, thus no more tests will be needed. Further testing will only be required for the remaining 39.65% of the cases.
+- If we know that at least one animal in a group of 5 is infected and the first 4 individual tests come out negative, there is no need to run a test on the fifth animal (we know that it must be infected).
+- We can try a different number of groups / different number of animals in each group, adjusting those numbers at each level so that the total expected number of tests will be minimised.
+
+To simplify the very wide range of possibilities, there is one restriction we place when devising the most cost-efficient testing scheme: whenever we start with a mixed sample, all the sheep contributing to that sample must be fully screened (i.e. a verdict of infected / virus-free must be reached for all of them) before we start examining any other animals.
+
+For the current example, it turns out that the most cost-efficient testing scheme (we'll call it the optimal strategy) requires an average of just <strong>4.155452</strong> tests!
+
+Using the optimal strategy, let $T(s, p)$ represent the average number of tests needed to screen a flock of $s$ sheep for a virus having probability $p$ to be present in any individual. Thus, rounded to six decimal places, $T(25, 0.02) = 4.155452$ and $T(25, 0.10) = 12.702124$.
+
+Find $\sum T(10\\,000, p)$ for $p = 0.01, 0.02, 0.03, \ldots 0.50$. Give your answer rounded to six decimal places.
+
+# --hints--
+
+`bloodTests()` should return `378563.260589`.
+
+```js
+assert.strictEqual(bloodTests(), 378563.260589);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function bloodTests() {
+
+  return true;
+}
+
+bloodTests();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-353-risky-moon.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-353-risky-moon.md
new file mode 100644
index 00000000000..83cb0d40c9e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-353-risky-moon.md
@@ -0,0 +1,54 @@
+---
+id: 5900f4cd1000cf542c50ffe0
+title: 'Problem 353: Risky moon'
+challengeType: 1
+forumTopicId: 302013
+dashedName: problem-353-risky-moon
+---
+
+# --description--
+
+A moon could be described by the sphere $C(r)$ with centre (0, 0, 0) and radius $r$.
+
+There are stations on the moon at the points on the surface of $C(r)$ with integer coordinates. The station at (0, 0, $r$) is called North Pole station, the station at (0, 0, $-r$) is called South Pole station.
+
+All stations are connected with each other via the shortest road on the great arc through the stations. A journey between two stations is risky. If $d$ is the length of the road between two stations, $\{\left(\frac{d}{πr}\right)}^2$ is a measure for the risk of the journey (let us call it the risk of the road). If the journey includes more than two stations, the risk of the journey is the sum of risks of the used roads.
+
+A direct journey from the North Pole station to the South Pole station has the length $πr$ and risk 1. The journey from the North Pole station to the South Pole station via (0, $r$, 0) has the same length, but a smaller risk:
+
+$${\left(\frac{\frac{1}{2}πr}{πr}\right)}^2+{\left(\frac{\frac{1}{2}πr}{πr}\right)}^2 = 0.5$$
+
+The minimal risk of a journey from the North Pole station to the South Pole station on $C(r)$ is $M(r)$.
+
+You are given that $M(7) = 0.178\\,494\\,399\\,8$ rounded to 10 digits behind the decimal point.
+
+Find $\displaystyle\sum_{n = 1}^{15} M(2^n - 1)$.
+
+Give your answer rounded to 10 digits behind the decimal point in the form a.bcdefghijk.
+
+# --hints--
+
+`riskyMoon()` should return `1.2759860331`.
+
+```js
+assert.strictEqual(riskyMoon(), 1.2759860331);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function riskyMoon() {
+
+  return true;
+}
+
+riskyMoon();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-354-distances-in-a-bees-honeycomb.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-354-distances-in-a-bees-honeycomb.md
new file mode 100644
index 00000000000..f7d023146ca
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-354-distances-in-a-bees-honeycomb.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4cf1000cf542c50ffe1
+title: 'Problem 354: Distances in a bee''s honeycomb'
+challengeType: 1
+forumTopicId: 302014
+dashedName: problem-354-distances-in-a-bees-honeycomb
+---
+
+# --description--
+
+Consider a honey bee's honeycomb where each cell is a perfect regular hexagon with side length 1.
+
+<img class="img-responsive center-block" alt="honeycomb with hexagon sides of length 1" src="https://cdn.freecodecamp.org/curriculum/project-euler/distances-in-a-bees-honeycomb.png" style="background-color: white; padding: 10px;" />
+
+One particular cell is occupied by the queen bee. For a positive real number $L$, let $B(L)$ count the cells with distance $L$ from the queen bee cell (all distances are measured from centre to centre); you may assume that the honeycomb is large enough to accommodate for any distance we wish to consider.
+
+For example, $B(\sqrt{3}) = 6$, $B(\sqrt{21}) = 12$ and $B(111\\,111\\,111) = 54$.
+
+Find the number of $L ≤ 5 \times {10}^{11}$ such that $B(L) = 450$.
+
+# --hints--
+
+`distancesInHoneycomb()` should return `58065134`.
+
+```js
+assert.strictEqual(distancesInHoneycomb(), 58065134);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function distancesInHoneycomb() {
+
+  return true;
+}
+
+distancesInHoneycomb();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-355-maximal-coprime-subset.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-355-maximal-coprime-subset.md
new file mode 100644
index 00000000000..a7e2179ec87
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-355-maximal-coprime-subset.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4d01000cf542c50ffe2
+title: 'Problem 355: Maximal coprime subset'
+challengeType: 1
+forumTopicId: 302015
+dashedName: problem-355-maximal-coprime-subset
+---
+
+# --description--
+
+Define $Co(n)$ to be the maximal possible sum of a set of mutually co-prime elements from $\\{1, 2, \ldots, n\\}$. For example $Co(10)$ is 30 and hits that maximum on the subset $\\{1, 5, 7, 8, 9\\}$.
+
+You are given that $Co(30) = 193$ and $Co(100) = 1356$.
+
+Find $Co(200\\,000)$.
+
+# --hints--
+
+`maximalCoprimeSubset()` should return `1726545007`.
+
+```js
+assert.strictEqual(maximalCoprimeSubset(), 1726545007);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function maximalCoprimeSubset() {
+
+  return true;
+}
+
+maximalCoprimeSubset();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-356-largest-roots-of-cubic-polynomials.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-356-largest-roots-of-cubic-polynomials.md
new file mode 100644
index 00000000000..ec4939b68f1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-356-largest-roots-of-cubic-polynomials.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4d01000cf542c50ffe3
+title: 'Problem 356: Largest roots of cubic polynomials'
+challengeType: 1
+forumTopicId: 302016
+dashedName: problem-356-largest-roots-of-cubic-polynomials
+---
+
+# --description--
+
+Let $a_n$ be the largest real root of a polynomial $g(x) = x^3 - 2^n \times x^2 + n$.
+
+For example, $a_2 = 3.86619826\ldots$
+
+Find the last eight digits of $\displaystyle\sum_{i = 1}^{30} \lfloor {a_i}^{987654321}\rfloor$.
+
+**Note:** $\lfloor a\rfloor$ represents the floor function.
+
+# --hints--
+
+`rootsOfCubicPolynomials()` should return `28010159`.
+
+```js
+assert.strictEqual(rootsOfCubicPolynomials(), 28010159);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function rootsOfCubicPolynomials() {
+
+  return true;
+}
+
+rootsOfCubicPolynomials();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-357-prime-generating-integers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-357-prime-generating-integers.md
new file mode 100644
index 00000000000..003fc35bdd6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-357-prime-generating-integers.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4d11000cf542c50ffe4
+title: 'Problem 357: Prime generating integers'
+challengeType: 1
+forumTopicId: 302017
+dashedName: problem-357-prime-generating-integers
+---
+
+# --description--
+
+Consider the divisors of 30: 1, 2, 3, 5, 6, 10, 15, 30.
+
+It can be seen that for every divisor $d$ of 30, $d + \frac{30}{d}$ is prime.
+
+Find the sum of all positive integers $n$ not exceeding $100\\,000\\,000$ such that for every divisor $d$ of $n$, $d + \frac{n}{d}$ is prime.
+
+# --hints--
+
+`primeGeneratingIntegers()` should return `1739023853137`.
+
+```js
+assert.strictEqual(primeGeneratingIntegers(), 1739023853137);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeGeneratingIntegers() {
+
+  return true;
+}
+
+primeGeneratingIntegers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-358-cyclic-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-358-cyclic-numbers.md
new file mode 100644
index 00000000000..9a7f94d3bff
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-358-cyclic-numbers.md
@@ -0,0 +1,57 @@
+---
+id: 5900f4d21000cf542c50ffe5
+title: 'Problem 358: Cyclic numbers'
+challengeType: 1
+forumTopicId: 302018
+dashedName: problem-358-cyclic-numbers
+---
+
+# --description--
+
+A cyclic number with $n$ digits has a very interesting property:
+
+When it is multiplied by 1, 2, 3, 4, ... $n$, all the products have exactly the same digits, in the same order, but rotated in a circular fashion!
+
+The smallest cyclic number is the 6-digit number 142857:
+
+$$\begin{align}   & 142857 × 1 = 142857 \\\\
+  & 142857 × 2 = 285714 \\\\   & 142857 × 3 = 428571 \\\\
+  & 142857 × 4 = 571428 \\\\   & 142857 × 5 = 714285 \\\\
+  & 142857 × 6 = 857142 \end{align}$$
+
+The next cyclic number is 0588235294117647 with 16 digits:
+
+$$\begin{align}   & 0588235294117647 × 1 = 0588235294117647 \\\\
+  & 0588235294117647 × 2 = 1176470588235294 \\\\   & 0588235294117647 × 3 = 1764705882352941 \\\\
+  & \ldots \\\\ & 0588235294117647 × 16 = 9411764705882352 \end{align}$$
+
+Note that for cyclic numbers, leading zeros are important.
+
+There is only one cyclic number for which, the eleven leftmost digits are 00000000137 and the five rightmost digits are 56789 (i.e., it has the form $00000000137\ldots56789$ with an unknown number of digits in the middle). Find the sum of all its digits.
+
+# --hints--
+
+`cyclicNumbers()` should return `3284144505`.
+
+```js
+assert.strictEqual(cyclicNumbers(), 3284144505);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cyclicNumbers() {
+
+  return true;
+}
+
+cyclicNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-359-hilberts-new-hotel.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-359-hilberts-new-hotel.md
new file mode 100644
index 00000000000..0cfd6a75f09
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-359-hilberts-new-hotel.md
@@ -0,0 +1,62 @@
+---
+id: 5900f4d31000cf542c50ffe6
+title: 'Problem 359: Hilbert''s New Hotel'
+challengeType: 1
+forumTopicId: 302019
+dashedName: problem-359-hilberts-new-hotel
+---
+
+# --description--
+
+An infinite number of people (numbered 1, 2, 3, etc.) are lined up to get a room at Hilbert's newest infinite hotel. The hotel contains an infinite number of floors (numbered 1, 2, 3, etc.), and each floor contains an infinite number of rooms (numbered 1, 2, 3, etc.).
+
+Initially the hotel is empty. Hilbert declares a rule on how the $n^{\text{th}}$ person is assigned a room: person $n$ gets the first vacant room in the lowest numbered floor satisfying either of the following:
+
+- the floor is empty
+- the floor is not empty, and if the latest person taking a room in that floor is person $m$, then $m + n$ is a perfect square
+
+Person 1 gets room 1 in floor 1 since floor 1 is empty.
+
+Person 2 does not get room 2 in floor 1 since 1 + 2 = 3 is not a perfect square.
+
+Person 2 instead gets room 1 in floor 2 since floor 2 is empty.
+
+Person 3 gets room 2 in floor 1 since 1 + 3 = 4 is a perfect square.
+
+Eventually, every person in the line gets a room in the hotel.
+
+Define $P(f, r)$ to be $n$ if person $n$ occupies room $r$ in floor $f$, and 0 if no person occupies the room. Here are a few examples:
+
+$$\begin{align}   & P(1, 1) = 1 \\\\
+  & P(1, 2) = 3 \\\\   & P(2, 1) = 2 \\\\
+  & P(10, 20) = 440 \\\\   & P(25, 75) = 4863 \\\\
+  & P(99, 100) = 19454 \end{align}$$
+
+Find the sum of all $P(f, r)$ for all positive $f$ and $r$ such that $f × r = 71\\,328\\,803\\,586\\,048$ and give the last 8 digits as your answer.
+
+# --hints--
+
+`hilbertsNewHotel()` should return `40632119`.
+
+```js
+assert.strictEqual(hilbertsNewHotel(), 40632119);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function hilbertsNewHotel() {
+
+  return true;
+}
+
+hilbertsNewHotel();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-36-double-base-palindromes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-36-double-base-palindromes.md
new file mode 100644
index 00000000000..9793d760c20
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-36-double-base-palindromes.md
@@ -0,0 +1,66 @@
+---
+id: 5900f3901000cf542c50fea3
+title: 'Problem 36: Double-base palindromes'
+challengeType: 1
+forumTopicId: 302020
+dashedName: problem-36-double-base-palindromes
+---
+
+# --description--
+
+The decimal number, 585 = 1001001001<sub>2</sub> (binary), is palindromic in both bases.
+
+Find the sum of all numbers, less than `n`, whereas 1000 ≤ `n` ≤ 1000000, which are palindromic in base 10 and base 2.
+
+(Please note that the palindromic number, in either base, may not include leading zeros.)
+
+# --hints--
+
+`doubleBasePalindromes(1000)` should return a number.
+
+```js
+assert(typeof doubleBasePalindromes(1000) === 'number');
+```
+
+`doubleBasePalindromes(1000)` should return 1772.
+
+```js
+assert(doubleBasePalindromes(1000) == 1772);
+```
+
+`doubleBasePalindromes(50000)` should return 105795.
+
+```js
+assert(doubleBasePalindromes(50000) == 105795);
+```
+
+`doubleBasePalindromes(500000)` should return 286602.
+
+```js
+assert(doubleBasePalindromes(500000) == 286602);
+```
+
+`doubleBasePalindromes(1000000)` should return 872187.
+
+```js
+assert(doubleBasePalindromes(1000000) == 872187);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function doubleBasePalindromes(n) {
+
+  return n;
+}
+
+doubleBasePalindromes(1000000);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-360-scary-sphere.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-360-scary-sphere.md
new file mode 100644
index 00000000000..932a0a9dc4e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-360-scary-sphere.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4d41000cf542c50ffe7
+title: 'Problem 360: Scary Sphere'
+challengeType: 1
+forumTopicId: 302021
+dashedName: problem-360-scary-sphere
+---
+
+# --description--
+
+Given two points ($x_1$, $y_1$, $z_1$) and ($x_2$, $y_2$, $z_2$) in three dimensional space, the Manhattan distance between those points is defined as $|x_1 - x_2| + |y_1 - y_2| + |z_1 - z_2|$.
+
+Let $C(r)$ be a sphere with radius $r$ and center in the origin $O(0, 0, 0)$.
+
+Let $I(r)$ be the set of all points with integer coordinates on the surface of $C(r)$.
+
+Let $S(r)$ be the sum of the Manhattan distances of all elements of $I(r)$ to the origin $O$.
+
+E.g. $S(45)=34518$.
+
+Find $S({10}^{10})$.
+
+# --hints--
+
+`scarySphere()` should return `878825614395267100`.
+
+```js
+assert.strictEqual(scarySphere(), 878825614395267100);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function scarySphere() {
+
+  return true;
+}
+
+scarySphere();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-361-subsequence-of-thue-morse-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-361-subsequence-of-thue-morse-sequence.md
new file mode 100644
index 00000000000..efae1fb220c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-361-subsequence-of-thue-morse-sequence.md
@@ -0,0 +1,55 @@
+---
+id: 5900f4d51000cf542c50ffe8
+title: 'Problem 361: Subsequence of Thue-Morse sequence'
+challengeType: 1
+forumTopicId: 302022
+dashedName: problem-361-subsequence-of-thue-morse-sequence
+---
+
+# --description--
+
+The Thue-Morse sequence $\\{T_n\\}$ is a binary sequence satisfying:
+
+- $T_0 = 0$
+- $T_{2n} = T_n$
+- $T_{2n + 1} = 1 - T_n$
+
+The first several terms of $\\{T_n\\}$ are given as follows: $01101001\color{red}{10010}1101001011001101001\ldots$.
+
+We define $\\{A_n\\}$ as the sorted sequence of integers such that the binary expression of each element appears as a subsequence in $\\{T_n\\}$. For example, the decimal number 18 is expressed as 10010 in binary. 10010 appears in $\\{T_n\\}$ ($T_8$ to $T_{12}$), so 18 is an element of $\\{A_n\\}$. The decimal number 14 is expressed as 1110 in binary. 1110 never appears in $\\{T_n\\}$, so 14 is not an element of $\\{A_n\\}$.
+
+The first several terms of $A_n$ are given as follows:
+
+$$\begin{array}{cr}   n   & 0 & 1 & 2 & 3 & 4 & 5 & 6 & 7 &  8 &  9 & 10 & 11 & 12 & \ldots \\\\
+  A_n & 0 & 1 & 2 & 3 & 4 & 5 & 6 & 9 & 10 & 11 & 12 & 13 & 18 & \ldots \end{array}$$
+
+We can also verify that $A_{100} = 3251$ and $A_{1000} = 80\\,852\\,364\\,498$.
+
+Find the last 9 digits of $\displaystyle\sum_{k = 1}^{18} A_{{10}^k}$.
+
+# --hints--
+
+`subsequenceOfThueMorseSequence()` should return `178476944`.
+
+```js
+assert.strictEqual(subsequenceOfThueMorseSequence(), 178476944);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function subsequenceOfThueMorseSequence() {
+
+  return true;
+}
+
+subsequenceOfThueMorseSequence();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-362-squarefree-factors.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-362-squarefree-factors.md
new file mode 100644
index 00000000000..19f6b0f9cdc
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-362-squarefree-factors.md
@@ -0,0 +1,52 @@
+---
+id: 5900f4d61000cf542c50ffe9
+title: 'Problem 362: Squarefree factors'
+challengeType: 1
+forumTopicId: 302023
+dashedName: problem-362-squarefree-factors
+---
+
+# --description--
+
+Consider the number 54.
+
+54 can be factored in 7 distinct ways into one or more factors larger than 1:
+
+$$54, 2 × 27, 3 × 18, 6 × 9, 3 × 3 × 6, 2 × 3 × 9 \text{ and } 2 × 3 × 3 × 3$$
+
+If we require that the factors are all squarefree only two ways remain: $3 × 3 × 6$ and $2 × 3 × 3 × 3$.
+
+Let's call $Fsf(n)$ the number of ways $n$ can be factored into one or more squarefree factors larger than 1, so $Fsf(54) = 2$.
+
+Let $S(n)$ be $\sum Fsf(k)$ for $k = 2$ to $n$.
+
+$S(100) = 193$.
+
+Find $S(10\\,000\\,000\\,000)$.
+
+# --hints--
+
+`squarefreeFactors()` should return `457895958010`.
+
+```js
+assert.strictEqual(squarefreeFactors(), 457895958010);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function squarefreeFactors() {
+
+  return true;
+}
+
+squarefreeFactors();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-363-bzier-curves.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-363-bzier-curves.md
new file mode 100644
index 00000000000..df13df6a0c5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-363-bzier-curves.md
@@ -0,0 +1,56 @@
+---
+id: 5900f4d91000cf542c50ffeb
+title: 'Problem 363: Bézier Curves'
+challengeType: 1
+forumTopicId: 302024
+dashedName: problem-363-bzier-curves
+---
+
+# --description--
+
+A cubic Bézier curve is defined by four points: $P_0$, $P_1$, $P_2$ and $P_3$.
+
+The curve is constructed as follows:
+
+<img class="img-responsive center-block" alt="construction of Bézier curve" src="https://cdn.freecodecamp.org/curriculum/project-euler/bzier-curves.png" style="background-color: white; padding: 10px;" />
+
+On the segments $P_0P_1$, $P_1P_2$ and $P_2P_3$ the points $Q_0$,$Q_1$ and $Q_2$ are drawn such that $\frac{P_0Q_0}{P_0P_1} = \frac{P_1Q_1}{P_1P_2} = \frac{P_2Q_2}{P_2P_3} = t$, with $t$ in [0,1].
+
+On the segments $Q_0Q_1$ and $Q_1Q_2$ the points $R_0$ and $R_1$ are drawn such that $\frac{Q_0R_0}{Q_0Q_1} = \frac{Q_1R_1}{Q_1Q_2} = t$ for the same value of $t$.
+
+On the segment $R_0R_1$ the point $B$ is drawn such that $\frac{R_0B}{R_0R_1} = t$ for the same value of $t$.
+
+The Bézier curve defined by the points $P_0$, $P_1$, $P_2$, $P_3$ is the locus of $B$ as $Q_0$ takes all possible positions on the segment $P_0P_1$. (Please note that for all points the value of $t$ is the same.)
+
+From the construction it is clear that the Bézier curve will be tangent to the segments $P_0P_1$ in $P_0$ and $P_2P_3$ in $P_3$.
+
+A cubic Bézier curve with $P_0 = (1, 0)$, $P_1 = (1, v)$, $P_2 = (v, 1)$ and $P_3 = (0, 1)$ is used to approximate a quarter circle. The value $v > 0$ is chosen such that the area enclosed by the lines $OP_0$, $OP_3$ and the curve is equal to $\frac{π}{4}$ (the area of the quarter circle).
+
+By how many percent does the length of the curve differ from the length of the quarter circle? That is, if $L$ is the length of the curve, calculate $100 × \displaystyle\frac{L − \frac{π}{2}}{\frac{π}{2}}$. Give your answer rounded to 10 digits behind the decimal point.
+
+# --hints--
+
+`bezierCurves()` should return `0.0000372091`.
+
+```js
+assert.strictEqual(bezierCurves(), 0.0000372091);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function bezierCurves() {
+
+  return true;
+}
+
+bezierCurves();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-364-comfortable-distance.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-364-comfortable-distance.md
new file mode 100644
index 00000000000..83f8f7ec5d4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-364-comfortable-distance.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4d91000cf542c50ffea
+title: 'Problem 364: Comfortable distance'
+challengeType: 1
+forumTopicId: 302025
+dashedName: problem-364-comfortable-distance
+---
+
+# --description--
+
+There are $N$ seats in a row. $N$ people come after each other to fill the seats according to the following rules:
+
+1. If there is any seat whose adjacent seat(s) are not occupied take such a seat.
+2. If there is no such seat and there is any seat for which only one adjacent seat is occupied take such a seat.
+3. Otherwise take one of the remaining available seats.
+
+Let $T(N)$ be the number of possibilities that $N$ seats are occupied by $N$ people with the given rules. The following figure shows $T(4) = 8$.
+
+<img class="img-responsive center-block" alt="eight ways for N seats to be occupied by N people" src="https://cdn.freecodecamp.org/curriculum/project-euler/comfortable-distance.gif" style="background-color: white; padding: 10px;" />
+
+We can verify that $T(10) = 61\\,632$ and $T(1\\,000)\bmod 100\\,000\\,007 = 47\\,255\\,094$.
+
+Find $T(1\\,000\\,000)\bmod 100\\,000\\,007$.
+
+# --hints--
+
+`comfortableDistance()` should return `44855254`.
+
+```js
+assert.strictEqual(comfortableDistance(), 44855254);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function comfortableDistance() {
+
+  return true;
+}
+
+comfortableDistance();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-365-a-huge-binomial-coefficient.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-365-a-huge-binomial-coefficient.md
new file mode 100644
index 00000000000..46dc7abf5d6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-365-a-huge-binomial-coefficient.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4da1000cf542c50ffec
+title: 'Problem 365: A huge binomial coefficient'
+challengeType: 1
+forumTopicId: 302026
+dashedName: problem-365-a-huge-binomial-coefficient
+---
+
+# --description--
+
+The binomial coefficient $\displaystyle\binom{{10}^{18}}{{10}^9}$ is a number with more than 9 billion ($9 × {10}^9$) digits.
+
+Let $M(n, k, m)$ denote the binomial coefficient $\displaystyle\binom{n}{k}$ modulo $m$.
+
+Calculate $\sum M({10}^{18}, {10}^9, p \times q \times r)$ for $1000 &lt; p &lt; q &lt; r &lt; 5000$ and $p$, $q$, $r$ prime.
+
+# --hints--
+
+`hugeBinomialCoefficient()` should return `162619462356610300`.
+
+```js
+assert.strictEqual(hugeBinomialCoefficient(), 162619462356610300);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function hugeBinomialCoefficient() {
+
+  return true;
+}
+
+hugeBinomialCoefficient();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-366-stone-game-iii.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-366-stone-game-iii.md
new file mode 100644
index 00000000000..e4c51cb8c50
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-366-stone-game-iii.md
@@ -0,0 +1,68 @@
+---
+id: 5900f4da1000cf542c50ffed
+title: 'Problem 366: Stone Game III'
+challengeType: 1
+forumTopicId: 302027
+dashedName: problem-366-stone-game-iii
+---
+
+# --description--
+
+Two players, Anton and Bernhard, are playing the following game.
+
+There is one pile of $n$ stones.
+
+The first player may remove any positive number of stones, but not the whole pile.
+
+Thereafter, each player may remove at most twice the number of stones his opponent took on the previous move.
+
+The player who removes the last stone wins.
+
+E.g. $n = 5$
+
+If the first player takes anything more than one stone the next player will be able to take all remaining stones.
+
+If the first player takes one stone, leaving four, his opponent will take also one stone, leaving three stones.
+
+The first player cannot take all three because he may take at most $2 \times 1 = 2$ stones. So let's say he also takes one stone, leaving 2.
+
+The second player can take the two remaining stones and wins.
+
+So 5 is a losing position for the first player.
+
+For some winning positions there is more than one possible move for the first player.
+
+E.g. when $n = 17$ the first player can remove one or four stones.
+
+Let $M(n)$ be the maximum number of stones the first player can take from a winning position at his first turn and $M(n) = 0$ for any other position.
+
+$\sum M(n)$ for $n ≤ 100$ is 728.
+
+Find $\sum M(n)$ for $n ≤ {10}^{18}$. Give your answer modulo ${10}^8$.
+
+# --hints--
+
+`stoneGameThree()` should return `88351299`.
+
+```js
+assert.strictEqual(stoneGameThree(), 88351299);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function stoneGameThree() {
+
+  return true;
+}
+
+stoneGameThree();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-367-bozo-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-367-bozo-sort.md
new file mode 100644
index 00000000000..01a24b3c665
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-367-bozo-sort.md
@@ -0,0 +1,56 @@
+---
+id: 5900f4db1000cf542c50ffee
+title: 'Problem 367: Bozo sort'
+challengeType: 1
+forumTopicId: 302028
+dashedName: problem-367-bozo-sort
+---
+
+# --description--
+
+Bozo sort, not to be confused with the slightly less efficient bogo sort, consists out of checking if the input sequence is sorted and if not swapping randomly two elements. This is repeated until eventually the sequence is sorted.
+
+If we consider all permutations of the first 4 natural numbers as input the expectation value of the number of swaps, averaged over all $4!$ input sequences is $24.75$.
+
+The already sorted sequence takes 0 steps.
+
+In this problem we consider the following variant on bozo sort.
+
+If the sequence is not in order we pick three elements at random and shuffle these three elements randomly.
+
+All $3! = 6$ permutations of those three elements are equally likely.
+
+The already sorted sequence will take 0 steps.
+
+If we consider all permutations of the first 4 natural numbers as input the expectation value of the number of shuffles, averaged over all $4!$ input sequences is $27.5$.
+
+Consider as input sequences the permutations of the first 11 natural numbers.
+
+Averaged over all $11!$ input sequences, what is the expected number of shuffles this sorting algorithm will perform? Give your answer rounded to the nearest integer.
+
+# --hints--
+
+`bozoSort()` should return `48271207`.
+
+```js
+assert.strictEqual(bozoSort(), 48271207);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function bozoSort() {
+
+  return true;
+}
+
+bozoSort();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-368-a-kempner-like-series.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-368-a-kempner-like-series.md
new file mode 100644
index 00000000000..afc2e6dc9b8
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-368-a-kempner-like-series.md
@@ -0,0 +1,51 @@
+---
+id: 5900f4dd1000cf542c50ffef
+title: 'Problem 368: A Kempner-like series'
+challengeType: 1
+forumTopicId: 302029
+dashedName: problem-368-a-kempner-like-series
+---
+
+# --description--
+
+The harmonic series $1 + \dfrac{1}{2} + \dfrac{1}{3} + \dfrac{1}{4} + \ldots$ is well known to be divergent.
+
+If we however omit from this series every term where the denominator has a 9 in it, the series remarkably enough converges to approximately 22.9206766193. This modified harmonic series is called the Kempner series.
+
+Let us now consider another modified harmonic series by omitting from the harmonic series every term where the denominator has 3 or more equal consecutive digits. One can verify that out of the first 1200 terms of the harmonic series, only 20 terms will be omitted.
+
+These 20 omitted terms are:
+
+$$\dfrac{1}{111}, \dfrac{1}{222}, \dfrac{1}{333}, \dfrac{1}{444}, \dfrac{1}{555}, \dfrac{1}{666}, \dfrac{1}{777}, \dfrac{1}{888}, \dfrac{1}{999}, \dfrac{1}{1000}, \dfrac{1}{1110}, \\\\
+\dfrac{1}{1111}, \dfrac{1}{1112}, \dfrac{1}{1113}, \dfrac{1}{1114}, \dfrac{1}{1115}, \dfrac{1}{1116}, \dfrac{1}{1117}, \dfrac{1}{1118}, \dfrac{1}{1119}$$
+
+This series converges as well.
+
+Find the value the series converges to. Give your answer rounded to 10 digits behind the decimal point.
+
+# --hints--
+
+`kempnerLikeSeries()` should return `253.6135092068`.
+
+```js
+assert.strictEqual(kempnerLikeSeries(), 253.6135092068);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function kempnerLikeSeries() {
+
+  return true;
+}
+
+kempnerLikeSeries();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-369-badugi.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-369-badugi.md
new file mode 100644
index 00000000000..b297bf965da
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-369-badugi.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4de1000cf542c50fff0
+title: 'Problem 369: Badugi'
+challengeType: 1
+forumTopicId: 302030
+dashedName: problem-369-badugi
+---
+
+# --description--
+
+In a standard 52 card deck of playing cards, a set of 4 cards is a Badugi if it contains 4 cards with no pairs and no two cards of the same suit.
+
+Let $f(n)$ be the number of ways to choose $n$ cards with a 4 card subset that is a Badugi. For example, there are $2\\,598\\,960$ ways to choose five cards from a standard 52 card deck, of which $514\\,800$ contain a 4 card subset that is a Badugi, so $f(5) = 514800$.
+
+Find $\sum f(n)$ for $4 ≤ n ≤ 13$.
+
+# --hints--
+
+`badugi()` should return `862400558448`.
+
+```js
+assert.strictEqual(badugi(), 862400558448);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function badugi() {
+
+  return true;
+}
+
+badugi();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-37-truncatable-primes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-37-truncatable-primes.md
new file mode 100644
index 00000000000..5d4c80d5252
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-37-truncatable-primes.md
@@ -0,0 +1,66 @@
+---
+id: 5900f3911000cf542c50fea4
+title: 'Problem 37: Truncatable primes'
+challengeType: 1
+forumTopicId: 302031
+dashedName: problem-37-truncatable-primes
+---
+
+# --description--
+
+The number 3797 has an interesting property. Being prime itself, it is possible to continuously remove digits from left to right, and remain prime at each stage: 3797, 797, 97, and 7. Similarly we can work from right to left: 3797, 379, 37, and 3.
+
+Find the sum of the only `n` (8 ≤ `n` ≤ 11) primes that are both truncatable from left to right and right to left.
+
+NOTE: 2, 3, 5, and 7 are not considered to be truncatable primes.
+
+# --hints--
+
+`truncatablePrimes(8)` should return a number.
+
+```js
+assert(typeof truncatablePrimes(8) === 'number');
+```
+
+`truncatablePrimes(8)` should return 1986.
+
+```js
+assert(truncatablePrimes(8) == 1986);
+```
+
+`truncatablePrimes(9)` should return 5123.
+
+```js
+assert(truncatablePrimes(9) == 5123);
+```
+
+`truncatablePrimes(10)` should return 8920.
+
+```js
+assert(truncatablePrimes(10) == 8920);
+```
+
+`truncatablePrimes(11)` should return 748317.
+
+```js
+assert(truncatablePrimes(11) == 748317);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function truncatablePrimes(n) {
+
+  return n;
+}
+
+truncatablePrimes(11);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-370-geometric-triangles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-370-geometric-triangles.md
new file mode 100644
index 00000000000..dd37d167a05
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-370-geometric-triangles.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4de1000cf542c50fff1
+title: 'Problem 370: Geometric triangles'
+challengeType: 1
+forumTopicId: 302032
+dashedName: problem-370-geometric-triangles
+---
+
+# --description--
+
+Let us define a geometric triangle as an integer sided triangle with sides $a ≤ b ≤ c$ so that its sides form a geometric progression, i.e. $b^2 = a \times c$.
+
+An example of such a geometric triangle is the triangle with sides $a = 144$, $b = 156$ and $c = 169$.
+
+There are $861\\,805$ geometric triangles with $\text{perimeter} ≤ {10}^6$.
+
+How many geometric triangles exist with $\text{perimeter} ≤ 2.5 \times {10}^{13}$?
+
+# --hints--
+
+`geometricTriangles()` should return `41791929448408`.
+
+```js
+assert.strictEqual(geometricTriangles(), 41791929448408);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function geometricTriangles() {
+
+  return true;
+}
+
+geometricTriangles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-371-licence-plates.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-371-licence-plates.md
new file mode 100644
index 00000000000..dee9928047e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-371-licence-plates.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4e01000cf542c50fff2
+title: 'Problem 371: Licence plates'
+challengeType: 1
+forumTopicId: 302033
+dashedName: problem-371-licence-plates
+---
+
+# --description--
+
+Oregon licence plates consist of three letters followed by a three digit number (each digit can be from [0...9]).
+
+While driving to work Seth plays the following game:
+
+Whenever the numbers of two licence plates seen on his trip add to 1000 that's a win.
+
+E.g. `MIC-012` and `HAN-988` is a win and `RYU-500` and `SET-500` too (as long as he sees them in the same trip).
+
+Find the expected number of plates he needs to see for a win. Give your answer rounded to 8 decimal places behind the decimal point.
+
+**Note:** We assume that each licence plate seen is equally likely to have any three digit number on it.
+
+# --hints--
+
+`licensePlates()` should return `40.66368097`.
+
+```js
+assert.strictEqual(licensePlates(), 40.66368097);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function licensePlates() {
+
+  return true;
+}
+
+licensePlates();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-372-pencils-of-rays.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-372-pencils-of-rays.md
new file mode 100644
index 00000000000..9a8e0ff315d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-372-pencils-of-rays.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4e11000cf542c50fff3
+title: 'Problem 372: Pencils of rays'
+challengeType: 1
+forumTopicId: 302034
+dashedName: problem-372-pencils-of-rays
+---
+
+# --description--
+
+Let $R(M, N)$ be the number of lattice points ($x$, $y$) which satisfy $M \lt x \le N$, $M \lt y \le N$ and $\left\lfloor\frac{y^2}{x^2}\right\rfloor$ is odd.
+
+We can verify that $R(0, 100) = 3\\,019$ and $R(100, 10\\,000) = 29\\,750\\,422$.
+
+Find $R(2 \times {10}^6, {10}^9)$.
+
+**Note:** $\lfloor x\rfloor$ represents the floor function.
+
+# --hints--
+
+`pencilsOfRays()` should return `301450082318807040`.
+
+```js
+assert.strictEqual(pencilsOfRays(), 301450082318807040);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pencilsOfRays() {
+
+  return true;
+}
+
+pencilsOfRays();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-373-circumscribed-circles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-373-circumscribed-circles.md
new file mode 100644
index 00000000000..dbe4e1d47e4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-373-circumscribed-circles.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4e11000cf542c50fff4
+title: 'Problem 373: Circumscribed Circles'
+challengeType: 1
+forumTopicId: 302035
+dashedName: problem-373-circumscribed-circles
+---
+
+# --description--
+
+Every triangle has a circumscribed circle that goes through the three vertices. Consider all integer sided triangles for which the radius of the circumscribed circle is integral as well.
+
+Let $S(n)$ be the sum of the radii of the circumscribed circles of all such triangles for which the radius does not exceed $n$.
+
+$S(100) = 4\\,950$ and $S(1\\,200) = 1\\,653\\,605$.
+
+Find $S({10}^7)$.
+
+# --hints--
+
+`circumscribedCircles()` should return `727227472448913`.
+
+```js
+assert.strictEqual(circumscribedCircles(), 727227472448913);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function circumscribedCircles() {
+
+  return true;
+}
+
+circumscribedCircles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-374-maximum-integer-partition-product.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-374-maximum-integer-partition-product.md
new file mode 100644
index 00000000000..e2578270e64
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-374-maximum-integer-partition-product.md
@@ -0,0 +1,54 @@
+---
+id: 5900f4e51000cf542c50fff6
+title: 'Problem 374: Maximum Integer Partition Product'
+challengeType: 1
+forumTopicId: 302036
+dashedName: problem-374-maximum-integer-partition-product
+---
+
+# --description--
+
+An integer partition of a number $n$ is a way of writing $n$ as a sum of positive integers.
+
+Partitions that differ only in the order of their summands are considered the same. A partition of $n$ into distinct parts is a partition of $n$ in which every part occurs at most once.
+
+The partitions of 5 into distinct parts are:
+
+5, 4 + 1 and 3 + 2.
+
+Let $f(n)$ be the maximum product of the parts of any such partition of $n$ into distinct parts and let $m(n)$ be the number of elements of any such partition of $n$ with that product.
+
+So $f(5) = 6$ and $m(5) = 2$.
+
+For $n = 10$ the partition with the largest product is $10 = 2 + 3 + 5$, which gives $f(10) = 30$ and $m(10) = 3$. And their product, $f(10) \times m(10) = 30 \times 3 = 90$
+
+It can be verified that $\sum f(n) \times m(n)$ for $1 ≤ n ≤ 100 = 1\\,683\\,550\\,844\\,462$.
+
+Find $\sum f(n) \times m(n)$ for $1 ≤ n ≤ {10}^{14}$. Give your answer modulo $982\\,451\\,653$, the 50 millionth prime.
+
+# --hints--
+
+`maximumIntegerPartitionProduct()` should return `334420941`.
+
+```js
+assert.strictEqual(maximumIntegerPartitionProduct(), 334420941);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function maximumIntegerPartitionProduct() {
+
+  return true;
+}
+
+maximumIntegerPartitionProduct();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-375-minimum-of-subsequences.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-375-minimum-of-subsequences.md
new file mode 100644
index 00000000000..082d94ef69c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-375-minimum-of-subsequences.md
@@ -0,0 +1,47 @@
+---
+id: 5900f4e41000cf542c50fff5
+title: 'Problem 375: Minimum of subsequences'
+challengeType: 1
+forumTopicId: 302037
+dashedName: problem-375-minimum-of-subsequences
+---
+
+# --description--
+
+Let $S_n$ be an integer sequence produced with the following pseudo-random number generator:
+
+$$\begin{align}         S_0 & = 290\\,797 \\\\
+  S_{n + 1} & = {S_n}^2\bmod 50\\,515\\,093 \end{align}$$
+
+Let $A(i, j)$ be the minimum of the numbers $S_i, S_{i + 1}, \ldots, S_j$ for $i ≤ j$. Let $M(N) = \sum A(i, j)$ for $1 ≤ i ≤ j ≤ N$.
+
+We can verify that $M(10) = 432\\,256\\,955$ and $M(10\\,000) = 3\\,264\\,567\\,774\\,119$.
+
+Find $M(2\\,000\\,000\\,000)$.
+
+# --hints--
+
+`minimumOfSubsequences()` should return `7435327983715286000`.
+
+```js
+assert.strictEqual(minimumOfSubsequences(), 7435327983715286000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function minimumOfSubsequences() {
+
+  return true;
+}
+
+minimumOfSubsequences();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-376-nontransitive-sets-of-dice.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-376-nontransitive-sets-of-dice.md
new file mode 100644
index 00000000000..344a1e84e90
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-376-nontransitive-sets-of-dice.md
@@ -0,0 +1,69 @@
+---
+id: 5900f4e51000cf542c50fff7
+title: 'Problem 376: Nontransitive sets of dice'
+challengeType: 1
+forumTopicId: 302038
+dashedName: problem-376-nontransitive-sets-of-dice
+---
+
+# --description--
+
+Consider the following set of dice with nonstandard pips:
+
+$$\begin{array}{}   \text{Die A: } & 1 & 4 & 4 & 4 & 4 & 4 \\\\
+  \text{Die B: } & 2 & 2 & 2 & 5 & 5 & 5 \\\\   \text{Die C: } & 3 & 3 & 3 & 3 & 3 & 6 \\\\
+\end{array}$$
+
+A game is played by two players picking a die in turn and rolling it. The player who rolls the highest value wins.
+
+If the first player picks die $A$ and the second player picks die $B$ we get
+
+$P(\text{second player wins}) = \frac{7}{12} > \frac{1}{2}$
+
+If the first player picks die $B$ and the second player picks die $C$ we get
+
+$P(\text{second player wins}) = \frac{7}{12} > \frac{1}{2}$
+
+If the first player picks die $C$ and the second player picks die $A$ we get
+
+$P(\text{second player wins}) = \frac{25}{36} > \frac{1}{2}$
+
+So whatever die the first player picks, the second player can pick another die and have a larger than 50% chance of winning. A set of dice having this property is called a nontransitive set of dice.
+
+We wish to investigate how many sets of nontransitive dice exist. We will assume the following conditions:
+
+- There are three six-sided dice with each side having between 1 and $N$ pips, inclusive.
+- Dice with the same set of pips are equal, regardless of which side on the die the pips are located.
+- The same pip value may appear on multiple dice; if both players roll the same value neither player wins.
+- The sets of dice $\\{A, B, C\\}$, $\\{B, C, A\\}$ and $\\{C, A, B\\}$ are the same set.
+
+For $N = 7$ we find there are 9780 such sets.
+
+How many are there for $N = 30$?
+
+# --hints--
+
+`nontransitiveSetsOfDice()` should return `973059630185670`.
+
+```js
+assert.strictEqual(nontransitiveSetsOfDice(), 973059630185670);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function nontransitiveSetsOfDice() {
+
+  return true;
+}
+
+nontransitiveSetsOfDice();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-377-sum-of-digits-experience-13.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-377-sum-of-digits-experience-13.md
new file mode 100644
index 00000000000..ff149a27b28
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-377-sum-of-digits-experience-13.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4e51000cf542c50fff8
+title: 'Problem 377: Sum of digits, experience 13'
+challengeType: 1
+forumTopicId: 302039
+dashedName: problem-377-sum-of-digits-experience-13
+---
+
+# --description--
+
+There are 16 positive integers that do not have a zero in their digits and that have a digital sum equal to 5, namely:
+
+5, 14, 23, 32, 41, 113, 122, 131, 212, 221, 311, 1112, 1121, 1211, 2111 and 11111.
+
+Their sum is 17891.
+
+Let $f(n)$ be the sum of all positive integers that do not have a zero in their digits and have a digital sum equal to $n$.
+
+Find $\displaystyle\sum_{i=1}^{17} f(13^i)$. Give the last 9 digits as your answer.
+
+# --hints--
+
+`experience13()` should return `732385277`.
+
+```js
+assert.strictEqual(experience13(), 732385277);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function experience13() {
+
+  return true;
+}
+
+experience13();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-378-triangle-triples.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-378-triangle-triples.md
new file mode 100644
index 00000000000..e72ba4316c9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-378-triangle-triples.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4e61000cf542c50fff9
+title: 'Problem 378: Triangle Triples'
+challengeType: 1
+forumTopicId: 302040
+dashedName: problem-378-triangle-triples
+---
+
+# --description--
+
+Let $T(n)$ be the $n^{\text{th}}$ triangle number, so $T(n) = \frac{n(n + 1)}{2}$.
+
+Let $dT(n)$ be the number of divisors of $T(n)$. E.g.: $T(7) = 28$ and $dT(7) = 6$.
+
+Let $Tr(n)$ be the number of triples ($i$, $j$, $k$) such that $1 ≤ i &lt; j &lt; k ≤ n$ and $dT(i) > dT(j) > dT(k)$. $Tr(20) = 14$, $Tr(100) = 5\\,772$ and $Tr(1000) = 11\\,174\\,776$.
+
+Find $Tr(60\\,000\\,000)$. Give the last 18 digits of your answer.
+
+# --hints--
+
+`triangleTriples()` should return `147534623725724700`.
+
+```js
+assert.strictEqual(triangleTriples(), 147534623725724700);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function triangleTriples() {
+
+  return true;
+}
+
+triangleTriples();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-379-least-common-multiple-count.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-379-least-common-multiple-count.md
new file mode 100644
index 00000000000..0f2fb896572
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-379-least-common-multiple-count.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4e81000cf542c50fffa
+title: 'Problem 379: Least common multiple count'
+challengeType: 1
+forumTopicId: 302041
+dashedName: problem-379-least-common-multiple-count
+---
+
+# --description--
+
+Let $f(n)$ be the number of couples ($x$, $y$) with $x$ and $y$ positive integers, $x ≤ y$ and the least common multiple of $x$ and $y$ equal to $n$.
+
+Let $g$ be the summatory function of $f$, i.e.: $g(n) = \sum f(i)$ for $1 ≤ i ≤ n$.
+
+You are given that $g({10}^6) = 37\\,429\\,395$.
+
+Find $g({10}^{12})$.
+
+# --hints--
+
+`leastCommonMultipleCount()` should return `132314136838185`.
+
+```js
+assert.strictEqual(leastCommonMultipleCount(), 132314136838185);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function leastCommonMultipleCount() {
+
+  return true;
+}
+
+leastCommonMultipleCount();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-38-pandigital-multiples.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-38-pandigital-multiples.md
new file mode 100644
index 00000000000..a1190e84f39
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-38-pandigital-multiples.md
@@ -0,0 +1,98 @@
+---
+id: 5900f3931000cf542c50fea5
+title: 'Problem 38: Pandigital multiples'
+challengeType: 1
+forumTopicId: 302042
+dashedName: problem-38-pandigital-multiples
+---
+
+# --description--
+
+Take the number 192 and multiply it by each of 1, 2, and 3:
+
+$$\begin{align}   192 × 1 = 192\\\\
+  192 × 2 = 384\\\\   192 × 3 = 576\\\\
+\end{align}$$
+
+By concatenating each product we get the 1 to 9 pandigital, 192384576. We will call 192384576 the concatenated product of 192 and (1, 2, 3).
+
+The same can be achieved by starting with 9 and multiplying by 1, 2, 3, 4, and 5, giving the pandigital, 918273645, which is the concatenated product of 9 and (1, 2, 3, 4, 5).
+
+What is the largest 1 to `k` pandigital `k`-digit number that can be formed as the concatenated product of an integer with (1, 2, ..., `n`) where `n` > 1?
+
+# --hints--
+
+`pandigitalMultiples(8)` should return a number.
+
+```js
+assert(typeof pandigitalMultiples(8) === 'number');
+```
+
+`pandigitalMultiples(8)` should return `78156234`.
+
+```js
+assert.strictEqual(pandigitalMultiples(8), 78156234);
+```
+
+`pandigitalMultiples(9)` should return `932718654`.
+
+```js
+assert.strictEqual(pandigitalMultiples(9), 932718654);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pandigitalMultiples(k) {
+
+  return true;
+}
+
+pandigitalMultiples(8);
+```
+
+# --solutions--
+
+```js
+function pandigitalMultiples(k) {
+  function getKDigitConcatenatedProduct(num, k) {
+    // returns false if concatenated product is not k digits
+    let concatenatedProduct = num.toString();
+    for (let i = 2; concatenatedProduct.length < k; i++) {
+      concatenatedProduct += num * i;
+    }
+    return concatenatedProduct.length === k ? concatenatedProduct : false;
+  }
+
+  function is1toKPandigital(num, k) {
+    const numStr = num.toString();
+
+    // check if length is not k
+    if (numStr.length !== k) {
+      return false;
+    }
+
+    // check if pandigital
+    for (let i = k; i > 0; i--) {
+      if (numStr.indexOf(i.toString()) === -1) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  let largestNum = 0;
+  for (let i = 10 ** Math.floor(k / 2) + 1; i >= 1; i--) {
+    const concatenatedProduct = getKDigitConcatenatedProduct(i, k);
+    if (is1toKPandigital(concatenatedProduct, k)) {
+      const number = parseInt(concatenatedProduct, 10);
+      if (number > largestNum) {
+        largestNum = number;
+      }
+    }
+  }
+  return largestNum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-380-amazing-mazes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-380-amazing-mazes.md
new file mode 100644
index 00000000000..15ae5170a74
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-380-amazing-mazes.md
@@ -0,0 +1,54 @@
+---
+id: 5900f4e81000cf542c50fffb
+title: 'Problem 380: Amazing Mazes!'
+challengeType: 1
+forumTopicId: 302044
+dashedName: problem-380-amazing-mazes
+---
+
+# --description--
+
+An $m×n$ maze is an $m×n$ rectangular grid with walls placed between grid cells such that there is exactly one path from the top-left square to any other square. The following are examples of a 9×12 maze and a 15×20 maze:
+
+<img class="img-responsive center-block" alt="9x12 maze and 15x20 maze" src="https://cdn.freecodecamp.org/curriculum/project-euler/amazing-mazes.gif" style="background-color: white; padding: 10px;" />
+
+Let $C(m, n)$ be the number of distinct $m×n$ mazes. Mazes which can be formed by rotation and reflection from another maze are considered distinct.
+
+It can be verified that $C(1, 1) = 1$, $C(2, 2) = 4$, $C(3, 4) = 2415$, and $C(9, 12) = 2.5720\mathrm{e}\\,46$ (in scientific notation rounded to 5 significant digits).
+
+Find $C(100, 500)$ and write your answer as a string in scientific notation rounded to 5 significant digits.
+
+When giving your answer, use a lowercase e to separate mantissa and exponent. E.g. if the answer is 1234567891011 then the answer format would be the string `1.2346e12`.
+
+# --hints--
+
+`amazingMazes()` should return a string.
+
+```js
+assert(typeof amazingMazes() === 'string');
+```
+
+`amazingMazes()` should return the string `6.3202e25093`.
+
+```js
+assert.strictEqual(amazingMazes(), '6.3202e25093');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function amazingMazes() {
+
+  return true;
+}
+
+amazingMazes();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-381-prime-k-factorial.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-381-prime-k-factorial.md
new file mode 100644
index 00000000000..21d1936ca57
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-381-prime-k-factorial.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4ea1000cf542c50fffc
+title: 'Problem 381: (prime-k) factorial'
+challengeType: 1
+forumTopicId: 302045
+dashedName: problem-381-prime-k-factorial
+---
+
+# --description--
+
+For a prime $p$ let $S(p) = (\sum (p - k)!)\bmod (p)$ for $1 ≤ k ≤ 5$.
+
+For example, if $p = 7$,
+
+$$(7 - 1)! + (7 - 2)! + (7 - 3)! + (7 - 4)! + (7 - 5)! = 6! + 5! + 4! + 3! + 2! = 720 + 120 + 24 + 6 + 2 = 872$$
+
+As $872\bmod (7) = 4$, $S(7) = 4$.
+
+It can be verified that $\sum S(p) = 480$ for $5 ≤ p &lt; 100$.
+
+Find $\sum S(p)$ for $5 ≤ p &lt; {10}^8$.
+
+# --hints--
+
+`primeKFactorial()` should return `139602943319822`.
+
+```js
+assert.strictEqual(primeKFactorial(), 139602943319822);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeKFactorial() {
+
+  return true;
+}
+
+primeKFactorial();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-382-generating-polygons.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-382-generating-polygons.md
new file mode 100644
index 00000000000..605495d8fed
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-382-generating-polygons.md
@@ -0,0 +1,65 @@
+---
+id: 5900f4eb1000cf542c50fffd
+title: 'Problem 382: Generating polygons'
+challengeType: 1
+forumTopicId: 302046
+dashedName: problem-382-generating-polygons
+---
+
+# --description--
+
+A polygon is a flat shape consisting of straight line segments that are joined to form a closed chain or circuit. A polygon consists of at least three sides and does not self-intersect.
+
+A set $S$ of positive numbers is said to generate a polygon $P$ if:
+
+- no two sides of $P$ are the same length,
+- the length of every side of $P$ is in $S$, and
+- $S$ contains no other value.
+
+For example:
+
+The set {3, 4, 5} generates a polygon with sides 3, 4, and 5 (a triangle).
+
+The set {6, 9, 11, 24} generates a polygon with sides 6, 9, 11, and 24 (a quadrilateral).
+
+The sets {1, 2, 3} and {2, 3, 4, 9} do not generate any polygon at all.
+
+Consider the sequence $s$, defined as follows:
+
+- $s_1 = 1$, $s_2 = 2$, $s_3 = 3$
+- $s_n = s_{n - 1} + s_{n - 3}$ for $n > 3$.
+
+Let $U_n$ be the set $\\{s_1, s_2, \ldots, s_n\\}$. For example, $U_{10} = \\{1, 2, 3, 4, 6, 9, 13, 19, 28, 41\\}$.
+
+Let $f(n)$ be the number of subsets of $U_n$ which generate at least one polygon.
+
+For example, $f(5) = 7$, $f(10) = 501$ and $f(25) = 18\\,635\\,853$.
+
+Find the last 9 digits of $f({10}^{18})$.
+
+# --hints--
+
+`generatingPolygons()` should return `697003956`.
+
+```js
+assert.strictEqual(generatingPolygons(), 697003956);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function generatingPolygons() {
+
+  return true;
+}
+
+generatingPolygons();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-383-divisibility-comparison-between-factorials.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-383-divisibility-comparison-between-factorials.md
new file mode 100644
index 00000000000..4a851985199
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-383-divisibility-comparison-between-factorials.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4ed1000cf542c50ffff
+title: 'Problem 383: Divisibility comparison between factorials'
+challengeType: 1
+forumTopicId: 302047
+dashedName: problem-383-divisibility-comparison-between-factorials
+---
+
+# --description--
+
+Let $f_5(n)$ be the largest integer $x$ for which $5^x$ divides $n$.
+
+For example, $f_5(625\\,000) = 7$.
+
+Let $T_5(n)$ be the number of integers $i$ which satisfy $f_5((2 \times i - 1)!) &lt; 2 \times f_5(i!)$ and $1 ≤ i ≤ n$.
+
+It can be verified that $T_5({10}^3) = 68$ and $T_5({10}^9) = 2\\,408\\,210$.
+
+Find $T_5({10}^{18})$.
+
+# --hints--
+
+`factorialDivisibilityComparison()` should return `22173624649806`.
+
+```js
+assert.strictEqual(factorialDivisibilityComparison(), 22173624649806);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function factorialDivisibilityComparison() {
+
+  return true;
+}
+
+factorialDivisibilityComparison();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-384-rudin-shapiro-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-384-rudin-shapiro-sequence.md
new file mode 100644
index 00000000000..9f11652c82f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-384-rudin-shapiro-sequence.md
@@ -0,0 +1,65 @@
+---
+id: 5900f4ed1000cf542c50fffe
+title: 'Problem 384: Rudin-Shapiro sequence'
+challengeType: 1
+forumTopicId: 302048
+dashedName: problem-384-rudin-shapiro-sequence
+---
+
+# --description--
+
+Define the sequence $a(n)$ as the number of adjacent pairs of ones in the binary expansion of $n$ (possibly overlapping).
+
+E.g.: $a(5) = a({101}_2) = 0$, $a(6) = a({110}_2) = 1$, $a(7) = a({111}_2) = 2$
+
+Define the sequence $b(n) = {(-1)}^{a(n)}$. This sequence is called the Rudin-Shapiro sequence.
+
+Also consider the summatory sequence of $b(n)$: $s(n) = \displaystyle\sum_{i = 0}^{n} b(i)$.
+
+The first couple of values of these sequences are:
+
+$$\begin{array}{lr}   n    & 0 & 1 & 2 &  3 & 4 & 5 &  6 & 7 \\\\
+  a(n) & 0 & 0 & 0 &  1 & 0 & 0 &  1 & 2 \\\\   b(n) & 1 & 1 & 1 & -1 & 1 & 1 & -1 & 1 \\\\
+  s(n) & 1 & 2 & 3 &  2 & 3 & 4 &  3 & 4 \end{array}$$
+
+The sequence $s(n)$ has the remarkable property that all elements are positive and every positive integer $k$ occurs exactly $k$ times.
+
+Define $g(t, c)$, with $1 ≤ c ≤ t$, as the index in $s(n)$ for which $t$ occurs for the $c$'th time in $s(n)$.
+
+E.g.: $g(3, 3) = 6$, $g(4, 2) = 7$ and $g(54321, 12345) = 1\\,220\\,847\\,710$.
+
+Let $F(n)$ be the fibonacci sequence defined by:
+
+$$\begin{align}   & F(0) = F(1) = 1 \text{ and} \\\\
+  & F(n) = F(n - 1) + F(n - 2) \text{ for } n > 1. \end{align}$$
+
+Define $GF(t) = g(F(t), F(t - 1))$.
+
+Find $\sum GF(t)$ for$ 2 ≤ t ≤ 45$.
+
+# --hints--
+
+`rudinShapiroSequence()` should return `3354706415856333000`.
+
+```js
+assert.strictEqual(rudinShapiroSequence(), 3354706415856333000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function rudinShapiroSequence() {
+
+  return true;
+}
+
+rudinShapiroSequence();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-385-ellipses-inside-triangles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-385-ellipses-inside-triangles.md
new file mode 100644
index 00000000000..96df0312f03
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-385-ellipses-inside-triangles.md
@@ -0,0 +1,55 @@
+---
+id: 5900f4ee1000cf542c510000
+title: 'Problem 385: Ellipses inside triangles'
+challengeType: 1
+forumTopicId: 302049
+dashedName: problem-385-ellipses-inside-triangles
+---
+
+# --description--
+
+For any triangle $T$ in the plane, it can be shown that there is a unique ellipse with largest area that is completely inside $T$.
+
+<img class="img-responsive center-block" alt="ellipse completely insisde of triangle" src="https://cdn.freecodecamp.org/curriculum/project-euler/ellipses-inside-triangles.png" style="background-color: white; padding: 10px;" />
+
+For a given $n$, consider triangles $T$ such that:
+
+-   the vertices of $T$ have integer coordinates with absolute value $≤ n$, and
+-   the foci<sup>1</sup> of the largest-area ellipse inside $T$ are $(\sqrt{13}, 0)$ and $(-\sqrt{13}, 0)$.
+
+Let $A(n)$ be the sum of the areas of all such triangles.
+
+For example, if $n = 8$, there are two such triangles. Their vertices are (-4,-3), (-4,3), (8,0) and (4,3), (4,-3), (-8,0), and the area of each triangle is 36. Thus $A(8) = 36 + 36 = 72$.
+
+It can be verified that $A(10) = 252$, $A(100) = 34\\,632$ and $A(1000) = 3\\,529\\,008$.
+
+Find $A(1\\,000\\,000\\,000)$.
+
+<sup>1</sup>The foci (plural of focus) of an ellipse are two points $A$ and $B$ such that for every point $P$ on the boundary of the ellipse, $AP + PB$ is constant.
+
+# --hints--
+
+`ellipsesInsideTriangles()` should return `3776957309612154000`.
+
+```js
+assert.strictEqual(ellipsesInsideTriangles(), 3776957309612154000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function ellipsesInsideTriangles() {
+
+  return true;
+}
+
+ellipsesInsideTriangles();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-386-maximum-length-of-an-antichain.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-386-maximum-length-of-an-antichain.md
new file mode 100644
index 00000000000..de0614e4651
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-386-maximum-length-of-an-antichain.md
@@ -0,0 +1,50 @@
+---
+id: 5900f4ef1000cf542c510001
+title: 'Problem 386: Maximum length of an antichain'
+challengeType: 1
+forumTopicId: 302050
+dashedName: problem-386-maximum-length-of-an-antichain
+---
+
+# --description--
+
+Let $n$ be an integer and $S(n)$ be the set of factors of $n$.
+
+A subset $A$ of $S(n)$ is called an antichain of $S(n)$ if $A$ contains only one element or if none of the elements of $A$ divides any of the other elements of $A$.
+
+For example: $S(30) = \\{1, 2, 3, 5, 6, 10, 15, 30\\}$
+
+$\\{2, 5, 6\\}$ is not an antichain of $S(30)$.
+
+$\\{2, 3, 5\\}$ is an antichain of $S(30)$.
+
+Let $N(n)$ be the maximum length of an antichain of $S(n)$.
+
+Find $\sum N(n)$ for $1 ≤ n ≤ {10}^8$
+
+# --hints--
+
+`maximumLengthOfAntichain()` should return `528755790`.
+
+```js
+assert.strictEqual(maximumLengthOfAntichain(), 528755790);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function maximumLengthOfAntichain() {
+
+  return true;
+}
+
+maximumLengthOfAntichain();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-387-harshad-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-387-harshad-numbers.md
new file mode 100644
index 00000000000..2b2ccbbaa0e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-387-harshad-numbers.md
@@ -0,0 +1,58 @@
+---
+id: 5900f4f11000cf542c510003
+title: 'Problem 387: Harshad Numbers'
+challengeType: 1
+forumTopicId: 302051
+dashedName: problem-387-harshad-numbers
+---
+
+# --description--
+
+A Harshad or Niven number is a number that is divisible by the sum of its digits.
+
+201 is a Harshad number because it is divisible by 3 (the sum of its digits.)
+
+When we truncate the last digit from 201, we get 20, which is a Harshad number.
+
+When we truncate the last digit from 20, we get 2, which is also a Harshad number.
+
+Let's call a Harshad number that, while recursively truncating the last digit, always results in a Harshad number a right truncatable Harshad number.
+
+Also:
+
+$\frac{201}{3} = 67$ which is prime.
+
+Let's call a Harshad number that, when divided by the sum of its digits, results in a prime a strong Harshad number.
+
+Now take the number 2011 which is prime. When we truncate the last digit from it we get 201, a strong Harshad number that is also right truncatable. Let's call such primes strong, right truncatable Harshad primes.
+
+You are given that the sum of the strong, right truncatable Harshad primes less than 10000 is 90619.
+
+Find the sum of the strong, right truncatable Harshad primes less than ${10}^{14}$.
+
+# --hints--
+
+`harshadNumbers()` should return `696067597313468`.
+
+```js
+assert.strictEqual(harshadNumbers(), 696067597313468);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function harshadNumbers() {
+
+  return true;
+}
+
+harshadNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-388-distinct-lines.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-388-distinct-lines.md
new file mode 100644
index 00000000000..4ff7f140070
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-388-distinct-lines.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4f11000cf542c510002
+title: 'Problem 388: Distinct Lines'
+challengeType: 1
+forumTopicId: 302052
+dashedName: problem-388-distinct-lines
+---
+
+# --description--
+
+Consider all lattice points ($a$, $b$, $c$) with $0 ≤ a, b, c ≤ N$.
+
+From the origin $O(0, 0, 0)$ all lines are drawn to the other lattice points. Let $D(N)$ be the number of distinct such lines.
+
+You are given that $D(1\\,000\\,000) = 831\\,909\\,254\\,469\\,114\\,121$.
+
+Find $D({10}^{10})$. Give as your answer the first nine digits followed by the last nine digits.
+
+# --hints--
+
+`distinctLines()` should return `831907372805130000`.
+
+```js
+assert.strictEqual(distinctLines(), 831907372805130000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function distinctLines() {
+
+  return true;
+}
+
+distinctLines();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-389-platonic-dice.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-389-platonic-dice.md
new file mode 100644
index 00000000000..081791ffe3b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-389-platonic-dice.md
@@ -0,0 +1,48 @@
+---
+id: 5900f4f21000cf542c510004
+title: 'Problem 389: Platonic Dice'
+challengeType: 1
+forumTopicId: 302053
+dashedName: problem-389-platonic-dice
+---
+
+# --description--
+
+An unbiased single 4-sided die is thrown and its value, $T$, is noted.
+
+$T$ unbiased 6-sided dice are thrown and their scores are added together. The sum, $C$, is noted.
+
+$C$ unbiased 8-sided dice are thrown and their scores are added together. The sum, $O$, is noted.
+
+$O$ unbiased 12-sided dice are thrown and their scores are added together. The sum, $D$, is noted.
+
+$D$ unbiased 20-sided dice are thrown and their scores are added together. The sum, $I$, is noted.
+
+Find the variance of $I$, and give your answer rounded to 4 decimal places.
+
+# --hints--
+
+`platonicDice()` should return `2406376.3623`.
+
+```js
+assert.strictEqual(platonicDice(), 2406376.3623);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function platonicDice() {
+
+  return true;
+}
+
+platonicDice();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-39-integer-right-triangles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-39-integer-right-triangles.md
new file mode 100644
index 00000000000..f1957262624
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-39-integer-right-triangles.md
@@ -0,0 +1,91 @@
+---
+id: 5900f3931000cf542c50fea6
+title: 'Problem 39: Integer right triangles'
+challengeType: 1
+forumTopicId: 302054
+dashedName: problem-39-integer-right-triangles
+---
+
+# --description--
+
+If `p` is the perimeter of a right angle triangle with integral length sides, {a,b,c}, there are exactly three solutions for p = 120.
+
+{20,48,52}, {24,45,51}, {30,40,50}
+
+For which value of `p` ≤ `n`, is the number of solutions maximized?
+
+# --hints--
+
+`intRightTriangles(500)` should return a number.
+
+```js
+assert(typeof intRightTriangles(500) === 'number');
+```
+
+`intRightTriangles(500)` should return 420.
+
+```js
+assert(intRightTriangles(500) == 420);
+```
+
+`intRightTriangles(800)` should return 720.
+
+```js
+assert(intRightTriangles(800) == 720);
+```
+
+`intRightTriangles(900)` should return 840.
+
+```js
+assert(intRightTriangles(900) == 840);
+```
+
+`intRightTriangles(1000)` should return 840.
+
+```js
+assert(intRightTriangles(1000) == 840);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function intRightTriangles(n) {
+
+  return n;
+}
+
+intRightTriangles(500);
+```
+
+# --solutions--
+
+```js
+// Original idea for this solution came from
+// https://www.xarg.org/puzzle/project-euler/problem-39/
+
+function intRightTriangles(n) {
+  // store the number of triangles with a given perimeter
+  let triangles = {};
+  // a is the shortest side
+  for (let a = 3; a < n / 3; a++)
+  // o is the opposite side and is at least as long as a
+    for (let o = a; o < n / 2; o++) {
+      let h = Math.sqrt(a * a + o * o); // hypotenuse
+      let p = a + o + h;  // perimeter
+      if ((h % 1) === 0 && p <= n) {
+        triangles[p] = (triangles[p] || 0) + 1;
+      }
+    }
+
+  let max = 0, maxp = null;
+  for (let p in triangles) {
+    if (max < triangles[p]) {
+      max = triangles[p];
+      maxp = parseInt(p);
+    }
+  }
+  return maxp;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-390-triangles-with-non-rational-sides-and-integral-area.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-390-triangles-with-non-rational-sides-and-integral-area.md
new file mode 100644
index 00000000000..fa9e6f08884
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-390-triangles-with-non-rational-sides-and-integral-area.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4f21000cf542c510005
+title: 'Problem 390: Triangles with non rational sides and integral area'
+challengeType: 1
+forumTopicId: 302055
+dashedName: problem-390-triangles-with-non-rational-sides-and-integral-area
+---
+
+# --description--
+
+Consider the triangle with sides $\sqrt{5}$, $\sqrt{65}$ and $\sqrt{68}$. It can be shown that this triangle has area 9.
+
+$S(n)$ is the sum of the areas of all triangles with sides $\sqrt{1 + b^2}$, $\sqrt{1 + c^2}$ and $\sqrt{b^2 + c^2}$ (for positive integers $b$ and $c$) that have an integral area not exceeding $n$.
+
+The example triangle has $b = 2$ and $c = 8$.
+
+$S({10}^6) = 18\\,018\\,206$.
+
+Find $S({10}^{10})$.
+
+# --hints--
+
+`nonRationalSidesAndIntegralArea()` should return `2919133642971`.
+
+```js
+assert.strictEqual(nonRationalSidesAndIntegralArea(), 2919133642971);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function nonRationalSidesAndIntegralArea() {
+
+  return true;
+}
+
+nonRationalSidesAndIntegralArea();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-391-hopping-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-391-hopping-game.md
new file mode 100644
index 00000000000..e94e14e527b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-391-hopping-game.md
@@ -0,0 +1,59 @@
+---
+id: 5900f4f31000cf542c510006
+title: 'Problem 391: Hopping Game'
+challengeType: 1
+forumTopicId: 302056
+dashedName: problem-391-hopping-game
+---
+
+# --description--
+
+Let $s_k$ be the number of 1’s when writing the numbers from 0 to $k$ in binary.
+
+For example, writing 0 to 5 in binary, we have 0, 1, 10, 11, 100, 101. There are seven 1’s, so $s_5 = 7$.
+
+The sequence $S = \\{s_k : k ≥ 0\\}$ starts $\\{0, 1, 2, 4, 5, 7, 9, 12, \ldots\\}$.
+
+A game is played by two players. Before the game starts, a number $n$ is chosen. A counter $c$ starts at 0. At each turn, the player chooses a number from 1 to $n$ (inclusive) and increases $c$ by that number. The resulting value of $c$ must be a member of $S$. If there are no more valid moves, the player loses.
+
+For example, with $n = 5$ and starting with $c = 0$:
+
+- Player 1 chooses 4, so $c$ becomes $0 + 4 = 4$.
+- Player 2 chooses 5, so $c$ becomes $4 + 5 = 9$.
+- Player 1 chooses 3, so $c$ becomes $9 + 3 = 12$.
+- etc.
+
+Note that $c$ must always belong to $S$, and each player can increase $c$ by at most $n$.
+
+Let $M(n)$ be the highest number the first player can choose at her first turn to force a win, and $M(n) = 0$ if there is no such move. For example, $M(2) = 2$, $M(7) = 1$ and $M(20) = 4$.
+
+It can be verified $\sum M{(n)}^3 = 8150$ for $1 ≤ n ≤ 20$.
+
+Find $\sum M{(n)}^3$ for $1 ≤ n ≤ 1000$.
+
+# --hints--
+
+`hoppingGame()` should return `61029882288`.
+
+```js
+assert.strictEqual(hoppingGame(), 61029882288);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function hoppingGame() {
+
+  return true;
+}
+
+hoppingGame();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-392-enmeshed-unit-circle.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-392-enmeshed-unit-circle.md
new file mode 100644
index 00000000000..7e40a574c29
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-392-enmeshed-unit-circle.md
@@ -0,0 +1,58 @@
+---
+id: 5900f4f41000cf542c510007
+title: 'Problem 392: Enmeshed unit circle'
+challengeType: 1
+forumTopicId: 302057
+dashedName: problem-392-enmeshed-unit-circle
+---
+
+# --description--
+
+A rectilinear grid is an orthogonal grid where the spacing between the gridlines does not have to be equidistant.
+
+An example of such grid is logarithmic graph paper.
+
+Consider rectilinear grids in the Cartesian coordinate system with the following properties:
+
+- The gridlines are parallel to the axes of the Cartesian coordinate system.
+- There are $N + 2$ vertical and $N + 2$ horizontal gridlines. Hence there are $(N + 1) \times (N + 1)$ rectangular cells.
+- The equations of the two outer vertical gridlines are $x = -1$ and $x = 1$.
+- The equations of the two outer horizontal gridlines are $y = -1$ and $y = 1$.
+- The grid cells are colored red if they overlap with the unit circle, black otherwise.
+
+For this problem we would like you to find the positions of the remaining $N$ inner horizontal and $N$ inner vertical gridlines so that the area occupied by the red cells is minimized.
+
+E.g. here is a picture of the solution for $N = 10$:
+
+<img class="img-responsive center-block" alt="solution for N = 10" src="https://cdn.freecodecamp.org/curriculum/project-euler/enmeshed-unit-circle.png" style="background-color: white; padding: 10px;" />
+
+The area occupied by the red cells for $N = 10$ rounded to 10 digits behind the decimal point is 3.3469640797.
+
+Find the positions for $N = 400$. Give as your answer the area occupied by the red cells rounded to 10 digits behind the decimal point.
+
+# --hints--
+
+`enmeshedUnitCircle()` should return `3.1486734435`.
+
+```js
+assert.strictEqual(enmeshedUnitCircle(), 3.1486734435);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function enmeshedUnitCircle() {
+
+  return true;
+}
+
+enmeshedUnitCircle();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-393-migrating-ants.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-393-migrating-ants.md
new file mode 100644
index 00000000000..28a0b4d745c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-393-migrating-ants.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4f61000cf542c510008
+title: 'Problem 393: Migrating ants'
+challengeType: 1
+forumTopicId: 302058
+dashedName: problem-393-migrating-ants
+---
+
+# --description--
+
+An $n × n$ grid of squares contains $n^2$ ants, one ant per square.
+
+All ants decide to move simultaneously to an adjacent square (usually 4 possibilities, except for ants on the edge of the grid or at the corners).
+
+We define $f(n)$ to be the number of ways this can happen without any ants ending on the same square and without any two ants crossing the same edge between two squares.
+
+You are given that $f(4) = 88$.
+
+Find $f(10)$.
+
+# --hints--
+
+`migratingAnts()` should return `112398351350823100`.
+
+```js
+assert.strictEqual(migratingAnts(), 112398351350823100);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function migratingAnts() {
+
+  return true;
+}
+
+migratingAnts();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-394-eating-pie.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-394-eating-pie.md
new file mode 100644
index 00000000000..a6b40bf39bc
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-394-eating-pie.md
@@ -0,0 +1,53 @@
+---
+id: 5900f4f71000cf542c510009
+title: 'Problem 394: Eating pie'
+challengeType: 1
+forumTopicId: 302059
+dashedName: problem-394-eating-pie
+---
+
+# --description--
+
+Jeff eats a pie in an unusual way.
+
+The pie is circular. He starts with slicing an initial cut in the pie along a radius.
+
+While there is at least a given fraction $F$ of pie left, he performs the following procedure:
+
+- He makes two slices from the pie centre to any point of what is remaining of the pie border, any point on the remaining pie border equally likely. This will divide the remaining pie into three pieces.
+- Going counterclockwise from the initial cut, he takes the first two pie pieces and eats them.
+
+When less than a fraction $F$ of pie remains, he does not repeat this procedure. Instead, he eats all of the remaining pie.
+
+<img class="img-responsive center-block" alt="animation of pie slicing procedure" src="https://cdn.freecodecamp.org/curriculum/project-euler/eating-pie.gif" style="background-color: white; padding: 10px;" />
+
+For $x ≥ 1$, let $E(x)$ be the expected number of times Jeff repeats the procedure above with $F = \frac{1}{x}$. It can be verified that $E(1) = 1$, $E(2) ≈ 1.2676536759$, and $E(7.5) ≈ 2.1215732071$.
+
+Find $E(40)$ rounded to 10 decimal places behind the decimal point.
+
+# --hints--
+
+`eatingPie()` should return `3.2370342194`.
+
+```js
+assert.strictEqual(eatingPie(), 3.2370342194);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function eatingPie() {
+
+  return true;
+}
+
+eatingPie();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-395-pythagorean-tree.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-395-pythagorean-tree.md
new file mode 100644
index 00000000000..cff705c06fb
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-395-pythagorean-tree.md
@@ -0,0 +1,52 @@
+---
+id: 5900f4f71000cf542c51000a
+title: 'Problem 395: Pythagorean tree'
+challengeType: 1
+forumTopicId: 302060
+dashedName: problem-395-pythagorean-tree
+---
+
+# --description--
+
+The Pythagorean tree is a fractal generated by the following procedure:
+
+Start with a unit square. Then, calling one of the sides its base (in the animation, the bottom side is the base):
+
+1. Attach a right triangle to the side opposite the base, with the hypotenuse coinciding with that side and with the sides in a 3-4-5 ratio. Note that the smaller side of the triangle must be on the 'right' side with respect to the base (see animation).
+2. Attach a square to each leg of the right triangle, with one of its sides coinciding with that leg.
+3. Repeat this procedure for both squares, considering as their bases the sides touching the triangle.
+
+The resulting figure, after an infinite number of iterations, is the Pythagorean tree.
+
+<img class="img-responsive center-block" alt="animation showing 8 iterations of the procedure" src="https://cdn.freecodecamp.org/curriculum/project-euler/pythagorean-tree.gif" style="background-color: white; padding: 10px;" />
+
+It can be shown that there exists at least one rectangle, whose sides are parallel to the largest square of the Pythagorean tree, which encloses the Pythagorean tree completely.
+
+Find the smallest area possible for such a bounding rectangle, and give your answer rounded to 10 decimal places.
+
+# --hints--
+
+`pythagoreanTree()` should return `28.2453753155`.
+
+```js
+assert.strictEqual(pythagoreanTree(), 28.2453753155);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pythagoreanTree() {
+
+  return true;
+}
+
+pythagoreanTree();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-396-weak-goodstein-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-396-weak-goodstein-sequence.md
new file mode 100644
index 00000000000..33d738c128b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-396-weak-goodstein-sequence.md
@@ -0,0 +1,62 @@
+---
+id: 5900f4f81000cf542c51000b
+title: 'Problem 396: Weak Goodstein sequence'
+challengeType: 1
+forumTopicId: 302061
+dashedName: problem-396-weak-goodstein-sequence
+---
+
+# --description--
+
+For any positive integer $n$, the $n$th weak Goodstein sequence $\\{g1, g2, g3, \ldots\\}$ is defined as:
+
+- $g_1 = n$
+- for $k > 1$, $g_k$ is obtained by writing $g_{k - 1}$ in base $k$, interpreting it as a base $k + 1$ number, and subtracting 1.
+
+The sequence terminates when $g_k$ becomes 0.
+
+For example, the $6$th weak Goodstein sequence is $\\{6, 11, 17, 25, \ldots\\}$:
+
+- $g_1 = 6$.
+- $g_2 = 11$ since $6 = 110_2$, $110_3 = 12$, and $12 - 1 = 11$.
+- $g_3 = 17$ since $11 = 102_3$, $102_4 = 18$, and $18 - 1 = 17$.
+- $g_4 = 25$ since $17 = 101_4$, $101_5 = 26$, and $26 - 1 = 25$.
+
+and so on.
+
+It can be shown that every weak Goodstein sequence terminates.
+
+Let $G(n)$ be the number of nonzero elements in the $n$th weak Goodstein sequence.
+
+It can be verified that $G(2) = 3$, $G(4) = 21$ and $G(6) = 381$.
+
+It can also be verified that $\sum G(n) = 2517$ for $1 ≤ n &lt; 8$.
+
+Find the last 9 digits of $\sum G(n)$ for $1 ≤ n &lt; 16$.
+
+# --hints--
+
+`weakGoodsteinSequence()` should return `173214653`.
+
+```js
+assert.strictEqual(weakGoodsteinSequence(), 173214653);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function weakGoodsteinSequence() {
+
+  return true;
+}
+
+weakGoodsteinSequence();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-397-triangle-on-parabola.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-397-triangle-on-parabola.md
new file mode 100644
index 00000000000..2d9fc181db3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-397-triangle-on-parabola.md
@@ -0,0 +1,44 @@
+---
+id: 5900f4f91000cf542c51000c
+title: 'Problem 397: Triangle on parabola'
+challengeType: 1
+forumTopicId: 302062
+dashedName: problem-397-triangle-on-parabola
+---
+
+# --description--
+
+On the parabola $y = \frac{x^2}{k}$, three points $A(a, \frac{a^2}{k})$, $B(b, \frac{b^2}{k})$ and $C(c, \frac{c^2}{k})$ are chosen.
+
+Let $F(K, X)$ be the number of the integer quadruplets $(k, a, b, c)$ such that at least one angle of the triangle $ABC$ is 45°, with $1 ≤ k ≤ K$ and $-X ≤ a &lt; b &lt; c ≤ X$.
+
+For example, $F(1, 10) = 41$ and $F(10, 100) = 12\\,492$.
+
+Find $F({10}^6, {10}^9)$.
+
+# --hints--
+
+`triangleOnParabola()` should return `141630459461893730`.
+
+```js
+assert.strictEqual(triangleOnParabola(), 141630459461893730);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function triangleOnParabola() {
+
+  return true;
+}
+
+triangleOnParabola();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-398-cutting-rope.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-398-cutting-rope.md
new file mode 100644
index 00000000000..ade33707928
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-398-cutting-rope.md
@@ -0,0 +1,42 @@
+---
+id: 5900f4fa1000cf542c51000d
+title: 'Problem 398: Cutting rope'
+challengeType: 1
+forumTopicId: 302063
+dashedName: problem-398-cutting-rope
+---
+
+# --description--
+
+Inside a rope of length $n$, $n - 1$ points are placed with distance 1 from each other and from the endpoints. Among these points, we choose $m - 1$ points at random and cut the rope at these points to create $m$ segments.
+
+Let $E(n, m)$ be the expected length of the second-shortest segment. For example, $E(3, 2) = 2$ and $E(8, 3) = \frac{16}{7}$. Note that if multiple segments have the same shortest length the length of the second-shortest segment is defined as the same as the shortest length.
+
+Find $E({10}^7, 100)$. Give your answer rounded to 5 decimal places behind the decimal point.
+
+# --hints--
+
+`cuttingRope()` should return `2010.59096`.
+
+```js
+assert.strictEqual(cuttingRope(), 2010.59096);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cuttingRope() {
+
+  return true;
+}
+
+cuttingRope();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-399-squarefree-fibonacci-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-399-squarefree-fibonacci-numbers.md
new file mode 100644
index 00000000000..37a34ad1549
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-399-squarefree-fibonacci-numbers.md
@@ -0,0 +1,60 @@
+---
+id: 5900f4fc1000cf542c51000e
+title: 'Problem 399: Squarefree Fibonacci Numbers'
+challengeType: 1
+forumTopicId: 302064
+dashedName: problem-399-squarefree-fibonacci-numbers
+---
+
+# --description--
+
+The first 15 fibonacci numbers are:
+
+$$1,1,2,3,5,8,13,21,34,55,89,144,233,377,610.$$
+
+It can be seen that 8 and 144 are not squarefree: 8 is divisible by 4 and 144 is divisible by 4 and by 9.
+
+So the first 13 squarefree fibonacci numbers are:
+
+$$1,1,2,3,5,13,21,34,55,89,233,377 \text{ and } 610.$$
+
+The $200$th squarefree fibonacci number is: 971183874599339129547649988289594072811608739584170445. The last sixteen digits of this number are: 1608739584170445 and in scientific notation this number can be written as `9.7e53`.
+
+Find the $100\\,000\\,000$th squarefree fibonacci number. Give as your answer as a string with its last sixteen digits followed by a comma followed by the number in scientific notation (rounded to one digit after the decimal point). For the $200$th squarefree number the answer would have been: `1608739584170445,9.7e53`
+
+**Note:** For this problem, assume that for every prime $p$, the first fibonacci number divisible by $p$ is not divisible by $p^2$ (this is part of Wall's conjecture). This has been verified for primes $≤ 3 \times {10}^{15}$, but has not been proven in general.
+
+If it happens that the conjecture is false, then the accepted answer to this problem isn't guaranteed to be the $100\\,000\\,000$th squarefree fibonacci number, rather it represents only a lower bound for that number.
+
+# --hints--
+
+`squarefreeFibonacciNumbers()` should return a string.
+
+```js
+assert(typeof squarefreeFibonacciNumbers() === 'string');
+```
+
+`squarefreeFibonacciNumbers()` should return the string `1508395636674243,6.5e27330467`.
+
+```js
+assert.strictEqual(squarefreeFibonacciNumbers(), '1508395636674243,6.5e27330467');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function squarefreeFibonacciNumbers() {
+
+  return true;
+}
+
+squarefreeFibonacciNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-4-largest-palindrome-product.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-4-largest-palindrome-product.md
new file mode 100644
index 00000000000..9e436255531
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-4-largest-palindrome-product.md
@@ -0,0 +1,64 @@
+---
+id: 5900f3701000cf542c50fe83
+title: 'Problem 4: Largest palindrome product'
+challengeType: 1
+forumTopicId: 302065
+dashedName: problem-4-largest-palindrome-product
+---
+
+# --description--
+
+A palindromic number reads the same both ways. The largest palindrome made from the product of two 2-digit numbers is 9009 = 91 × 99.
+
+Find the largest palindrome made from the product of two `n`-digit numbers.
+
+# --hints--
+
+`largestPalindromeProduct(2)` should return a number.
+
+```js
+assert(typeof largestPalindromeProduct(2) === 'number');
+```
+
+`largestPalindromeProduct(2)` should return 9009.
+
+```js
+assert.strictEqual(largestPalindromeProduct(2), 9009);
+```
+
+`largestPalindromeProduct(3)` should return 906609.
+
+```js
+assert.strictEqual(largestPalindromeProduct(3), 906609);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function largestPalindromeProduct(n) {
+
+  return true;
+}
+
+largestPalindromeProduct(3);
+```
+
+# --solutions--
+
+```js
+const largestPalindromeProduct = (digit)=>{
+  let start = 1;
+  let end = Number(`1e${digit}`) - 1;
+ let palindrome = [];
+  for(let i=start;i<=end;i++){
+    for(let j=start;j<=end;j++){
+      let product = i*j;
+      let palindromeRegex = /\b(\d)(\d?)(\d?).?\3\2\1\b/gi;
+      palindromeRegex.test(product) && palindrome.push(product);
+    }
+ }
+ return Math.max(...palindrome);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-40-champernownes-constant.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-40-champernownes-constant.md
new file mode 100644
index 00000000000..c4386bd2d91
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-40-champernownes-constant.md
@@ -0,0 +1,77 @@
+---
+id: 5900f3941000cf542c50fea7
+title: 'Problem 40: Champernowne''s constant'
+challengeType: 1
+forumTopicId: 302066
+dashedName: problem-40-champernownes-constant
+---
+
+# --description--
+
+An irrational decimal fraction is created by concatenating the positive integers:
+
+0.12345678910**1**112131415161718192021...
+
+It can be seen that the 12<sup>th</sup> digit of the fractional part is 1.
+
+If *d<sub>n</sub>* represents the *n*<sup>th</sup> digit of the fractional part, find the value of the following expression.
+
+d<sub>1</sub> × d<sub>10</sub> × d<sub>100</sub> × d<sub>1000</sub> × d<sub>10000</sub> × d<sub>100000</sub> × d<sub>1000000</sub>
+
+# --hints--
+
+`champernownesConstant(100)` should return a number.
+
+```js
+assert(typeof champernownesConstant(100) === 'number');
+```
+
+`champernownesConstant(100)` should return 5.
+
+```js
+assert.strictEqual(champernownesConstant(100), 5);
+```
+
+`champernownesConstant(1000)` should return 15.
+
+```js
+assert.strictEqual(champernownesConstant(1000), 15);
+```
+
+`champernownesConstant(1000000)` should return 210.
+
+```js
+assert.strictEqual(champernownesConstant(1000000), 210);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function champernownesConstant(n) {
+
+  return true;
+}
+
+champernownesConstant(100);
+```
+
+# --solutions--
+
+```js
+function champernownesConstant(n) {
+  let fractionalPart = '';
+  for (let i = 0; fractionalPart.length <= n; i++) {
+    fractionalPart += i.toString();
+  }
+
+  let product = 1;
+  for (let i = 0; i < n.toString().length; i++) {
+    const index = 10 ** i;
+    product *= parseInt(fractionalPart[index], 10);
+  }
+
+  return product;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-400-fibonacci-tree-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-400-fibonacci-tree-game.md
new file mode 100644
index 00000000000..2b2e220949c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-400-fibonacci-tree-game.md
@@ -0,0 +1,54 @@
+---
+id: 5900f4fe1000cf542c510010
+title: 'Problem 400: Fibonacci tree game'
+challengeType: 1
+forumTopicId: 302067
+dashedName: problem-400-fibonacci-tree-game
+---
+
+# --description--
+
+A Fibonacci tree is a binary tree recursively defined as:
+
+- $T(0)$ is the empty tree.
+- $T(1)$ is the binary tree with only one node.
+- $T(k)$ consists of a root node that has $T(k - 1)$ and $T(k - 2)$ as children.
+
+On such a tree two players play a take-away game. On each turn a player selects a node and removes that node along with the subtree rooted at that node. The player who is forced to take the root node of the entire tree loses.
+
+Here are the winning moves of the first player on the first turn for $T(k)$ from $k = 1$ to $k = 6$.
+
+<img class="img-responsive center-block" alt="winning moves of first player, on the first turn for k = 1 to k = 6" src="https://cdn.freecodecamp.org/curriculum/project-euler/fibonacci-tree-game.png" style="background-color: white; padding: 10px;" />
+
+Let $f(k)$ be the number of winning moves of the first player (i.e. the moves for which the second player has no winning strategy) on the first turn of the game when this game is played on $T(k)$.
+
+For example, $f(5) = 1$ and $f(10) = 17$.
+
+Find $f(10000)$. Give the last 18 digits of your answer.
+
+# --hints--
+
+`fibonacciTreeGame()` should return `438505383468410600`.
+
+```js
+assert.strictEqual(fibonacciTreeGame(), 438505383468410600);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function fibonacciTreeGame() {
+
+  return true;
+}
+
+fibonacciTreeGame();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-401-sum-of-squares-of-divisors.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-401-sum-of-squares-of-divisors.md
new file mode 100644
index 00000000000..eb0c0459100
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-401-sum-of-squares-of-divisors.md
@@ -0,0 +1,46 @@
+---
+id: 5900f4fd1000cf542c51000f
+title: 'Problem 401: Sum of squares of divisors'
+challengeType: 1
+forumTopicId: 302069
+dashedName: problem-401-sum-of-squares-of-divisors
+---
+
+# --description--
+
+The divisors of 6 are 1, 2, 3 and 6.
+
+The sum of the squares of these numbers is $1 + 4 + 9 + 36 = 50$.
+
+Let $\sigma_2(n)$ represent the sum of the squares of the divisors of $n$. Thus $\sigma_2(6) = 50$.
+
+Let $\Sigma_2$ represent the summatory function of $\sigma_2$, that is $\Sigma_2(n) = \sum \sigma_2(i)$ for $i=1$ to $n$. The first 6 values of $\Sigma_2$ are: 1, 6, 16, 37, 63 and 113.
+
+Find $\Sigma_2({10}^{15})$ modulo ${10}^9$.
+
+# --hints--
+
+`sumOfSquaresDivisors()` should return `281632621`.
+
+```js
+assert.strictEqual(sumOfSquaresDivisors(), 281632621);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumOfSquaresDivisors() {
+
+  return true;
+}
+
+sumOfSquaresDivisors();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-402-integer-valued-polynomials.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-402-integer-valued-polynomials.md
new file mode 100644
index 00000000000..cdda26ea631
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-402-integer-valued-polynomials.md
@@ -0,0 +1,51 @@
+---
+id: 5900f4ff1000cf542c510011
+title: 'Problem 402: Integer-valued polynomials'
+challengeType: 1
+forumTopicId: 302070
+dashedName: problem-402-integer-valued-polynomials
+---
+
+# --description--
+
+It can be shown that the polynomial $n^4 + 4n^3 + 2n^2 + 5n$ is a multiple of 6 for every integer $n$. It can also be shown that 6 is the largest integer satisfying this property.
+
+Define $M(a, b, c)$ as the maximum $m$ such that $n^4 + an^3 + bn^2 + cn$ is a multiple of $m$ for all integers $n$. For example, $M(4, 2, 5) = 6$.
+
+Also, define $S(N)$ as the sum of $M(a, b, c)$ for all $0 &lt; a, b, c ≤ N$.
+
+We can verify that $S(10) = 1\\,972$ and $S(10\\,000) = 2\\,024\\,258\\,331\\,114$.
+
+Let $F_k$ be the Fibonacci sequence:
+
+- $F_0 = 0$, $F_1 = 1$ and
+- $F_k = F_{k - 1} + F_{k - 2}$ for $k ≥ 2$.
+
+Find the last 9 digits of $\sum S(F_k)$ for $2 ≤ k ≤ 1\\,234\\,567\\,890\\,123$.
+
+# --hints--
+
+`integerValuedPolynomials()` should return `356019862`.
+
+```js
+assert.strictEqual(integerValuedPolynomials(), 356019862);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function integerValuedPolynomials() {
+
+  return true;
+}
+
+integerValuedPolynomials();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-403-lattice-points-enclosed-by-parabola-and-line.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-403-lattice-points-enclosed-by-parabola-and-line.md
new file mode 100644
index 00000000000..e3f8bfaae35
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-403-lattice-points-enclosed-by-parabola-and-line.md
@@ -0,0 +1,46 @@
+---
+id: 5900f5001000cf542c510013
+title: 'Problem 403: Lattice points enclosed by parabola and line'
+challengeType: 1
+forumTopicId: 302071
+dashedName: problem-403-lattice-points-enclosed-by-parabola-and-line
+---
+
+# --description--
+
+For integers $a$ and $b$, we define $D(a, b)$ as the domain enclosed by the parabola $y = x^2$ and the line $y = ax + b: D(a, b) = \\{ (x, y) | x^2 ≤ y ≤ ax + b \\}$.
+
+$L(a, b)$ is defined as the number of lattice points contained in $D(a, b)$. For example, $L(1, 2) = 8$ and $L(2, -1) = 1$.
+
+We also define $S(N)$ as the sum of $L(a, b)$ for all the pairs ($a$, $b$) such that the area of $D(a, b)$ is a rational number and $|a|,|b| ≤ N$.
+
+We can verify that $S(5) = 344$ and $S(100) = 26\\,709\\,528$.
+
+Find $S({10}^{12})$. Give your answer $\bmod {10}^8$.
+
+# --hints--
+
+`latticePoints()` should return `18224771`.
+
+```js
+assert.strictEqual(latticePoints(), 18224771);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function latticePoints() {
+
+  return true;
+}
+
+latticePoints();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-404-crisscross-ellipses.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-404-crisscross-ellipses.md
new file mode 100644
index 00000000000..92690bd7a6d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-404-crisscross-ellipses.md
@@ -0,0 +1,54 @@
+---
+id: 5900f5001000cf542c510012
+title: 'Problem 404: Crisscross Ellipses'
+challengeType: 1
+forumTopicId: 302072
+dashedName: problem-404-crisscross-ellipses
+---
+
+# --description--
+
+$E_a$ is an ellipse with an equation of the form $x^2 + 4y^2 = 4a^2$.
+
+$E_a'$ is the rotated image of $E_a$ by $θ$ degrees counterclockwise around the origin $O(0, 0)$ for $0° &lt; θ &lt; 90°$.
+
+<img class="img-responsive center-block" alt="ellipse E_a and ellipse rotated by θ degrees E_a'" src="https://cdn.freecodecamp.org/curriculum/project-euler/crisscross-ellipses.gif" style="background-color: white; padding: 10px;" />
+
+$b$ is the distance to the origin of the two intersection points closest to the origin and $c$ is the distance of the two other intersection points.
+
+We call an ordered triplet ($a$, $b$, $c$) a canonical ellipsoidal triplet if $a$, $b$ and $c$ are positive integers.
+
+For example, (209, 247, 286) is a canonical ellipsoidal triplet.
+
+Let $C(N)$ be the number of distinct canonical ellipsoidal triplets ($a$, $b$, $c$) for $a ≤ N$.
+
+It can be verified that $C({10}^3) = 7$, $C({10}^4) = 106$ and $C({10}^6) = 11\\,845$.
+
+Find $C({10}^{17})$.
+
+# --hints--
+
+`crisscrossEllipses()` should return `1199215615081353`.
+
+```js
+assert.strictEqual(crisscrossEllipses(), 1199215615081353);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function crisscrossEllipses() {
+
+  return true;
+}
+
+crisscrossEllipses();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-405-a-rectangular-tiling.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-405-a-rectangular-tiling.md
new file mode 100644
index 00000000000..43ceb097a66
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-405-a-rectangular-tiling.md
@@ -0,0 +1,52 @@
+---
+id: 5900f5021000cf542c510014
+title: 'Problem 405: A rectangular tiling'
+challengeType: 1
+forumTopicId: 302073
+dashedName: problem-405-a-rectangular-tiling
+---
+
+# --description--
+
+We wish to tile a rectangle whose length is twice its width.
+
+Let $T(0)$ be the tiling consisting of a single rectangle.
+
+For $n > 0$, let $T(n)$ be obtained from $T( n- 1)$ by replacing all tiles in the following manner:
+
+<img class="img-responsive center-block" alt="obtaining T(n) from T(n - 1)" src="https://cdn.freecodecamp.org/curriculum/project-euler/a-rectangular-tiling-1.png" style="background-color: white; padding: 10px;" />
+
+The following animation demonstrates the tilings $T(n)$ for $n$ from 0 to 5:
+
+<img class="img-responsive center-block" alt="animation with tilings T(n) for n from 0 to 5" src="https://cdn.freecodecamp.org/curriculum/project-euler/a-rectangular-tiling-2.gif" style="background-color: white; padding: 10px;" />
+
+Let $f(n)$ be the number of points where four tiles meet in $T(n)$. For example, $f(1) = 0$, $f(4) = 82$ and $f({10}^9)\bmod {17}^7 = 126\\,897\\,180$.
+
+Find $f({10}^k)$ for $k = {10}^{18}$, give your answer modulo ${17}^7$.
+
+# --hints--
+
+`rectangularTiling()` should return `237696125`.
+
+```js
+assert.strictEqual(rectangularTiling(), 237696125);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function rectangularTiling() {
+
+  return true;
+}
+
+rectangularTiling();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-406-guessing-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-406-guessing-game.md
new file mode 100644
index 00000000000..6907ad6dae2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-406-guessing-game.md
@@ -0,0 +1,68 @@
+---
+id: 5900f5021000cf542c510015
+title: 'Problem 406: Guessing Game'
+challengeType: 1
+forumTopicId: 302074
+dashedName: problem-406-guessing-game
+---
+
+# --description--
+
+We are trying to find a hidden number selected from the set of integers {1, 2, ..., $n$} by asking questions. Each number (question) we ask, we get one of three possible answers:
+
+- "Your guess is lower than the hidden number" (and you incur a cost of a), or
+- "Your guess is higher than the hidden number" (and you incur a cost of b), or
+- "Yes, that's it!" (and the game ends).
+
+Given the value of $n$, $a$, and $b$, an optimal strategy minimizes the total cost <u>for the worst possible case</u>.
+
+For example, if $n = 5$, $a = 2$, and $b = 3$, then we may begin by asking "<strong>2</strong>" as our first question.
+
+If we are told that 2 is higher than the hidden number (for a cost of $b = 3$), then we are sure that "<strong>1</strong>" is the hidden number (for a total cost of <strong><span style="color: blue;">3</span></strong>).
+
+If we are told that 2 is lower than the hidden number (for a cost of $a = 2$), then our next question will be "<strong>4</strong>".
+
+If we are told that 4 is higher than the hidden number (for a cost of $b = 3$), then we are sure that "<strong>3</strong>" is the hidden number (for a total cost of $2 + 3 = \color{blue}{\mathbf{5}}$).
+
+If we are told that 4 is lower than the hidden number (for a cost of $a = 2$), then we are sure that "<strong>5</strong>" is the hidden number (for a total cost of $2 + 2 = \color{blue}{\mathbf{4}}$).
+
+Thus, the worst-case cost achieved by this strategy is <strong><span style="color: red">5</span></strong>. It can also be shown that this is the lowest worst-case cost that can be achieved. So, in fact, we have just described an optimal strategy for the given values of $n$, $a$, and $b$.
+
+Let $C(n, a, b)$ be the worst-case cost achieved by an optimal strategy for the given values of $n$, $a$, and $b$.
+
+Here are a few examples:
+
+$$\begin{align}   & C(5, 2, 3) = 5 \\\\
+  & C(500, \sqrt{2}, \sqrt{3}) = 13.220\\,731\\,97\ldots \\\\   & C(20\\,000, 5, 7) = 82 \\\\
+  & C(2\\,000\\,000, √5, √7) = 49.637\\,559\\,55\ldots \\\\ \end{align}$$
+
+Let $F_k$ be the Fibonacci numbers: $F_k = F_{k - 1} + F_{k - 2}$ with base cases $F_1 = F_2 = 1$.
+
+Find $\displaystyle\sum_{k = 1}^{30} C({10}^{12}, \sqrt{k}, \sqrt{F_k})$, and give your answer rounded to 8 decimal places behind the decimal point.
+
+# --hints--
+
+`guessingGame()` should return `36813.12757207`.
+
+```js
+assert.strictEqual(guessingGame(), 36813.12757207);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function guessingGame() {
+
+  return true;
+}
+
+guessingGame();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-407-idempotents.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-407-idempotents.md
new file mode 100644
index 00000000000..f676b0c5b6e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-407-idempotents.md
@@ -0,0 +1,44 @@
+---
+id: 5900f5041000cf542c510016
+title: 'Problem 407: Idempotents'
+challengeType: 1
+forumTopicId: 302075
+dashedName: problem-407-idempotents
+---
+
+# --description--
+
+If we calculate $a^2\bmod 6$ for $0 ≤ a ≤ 5$ we get: 0, 1, 4, 3, 4, 1.
+
+The largest value of a such that $a^2 ≡ a\bmod 6$ is $4$.
+
+Let's call $M(n)$ the largest value of $a &lt; n$ such that $a^2 ≡ a (\text{mod } n)$. So $M(6) = 4$.
+
+Find $\sum M(n)$ for $1 ≤ n ≤ {10}^7$.
+
+# --hints--
+
+`idempotents()` should return `39782849136421`.
+
+```js
+assert.strictEqual(idempotents(), 39782849136421);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function idempotents() {
+
+  return true;
+}
+
+idempotents();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-408-admissible-paths-through-a-grid.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-408-admissible-paths-through-a-grid.md
new file mode 100644
index 00000000000..260a1917a56
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-408-admissible-paths-through-a-grid.md
@@ -0,0 +1,46 @@
+---
+id: 5900f5091000cf542c51001b
+title: 'Problem 408: Admissible paths through a grid'
+challengeType: 1
+forumTopicId: 302076
+dashedName: problem-408-admissible-paths-through-a-grid
+---
+
+# --description--
+
+Let's call a lattice point ($x$, $y$) inadmissible if $x$, $y$ and $x + y$ are all positive perfect squares.
+
+For example, (9, 16) is inadmissible, while (0, 4), (3, 1) and (9, 4) are not.
+
+Consider a path from point ($x_1$, $y_1$) to point ($x_2$, $y_2$) using only unit steps north or east. Let's call such a path admissible if none of its intermediate points are inadmissible.
+
+Let $P(n)$ be the number of admissible paths from (0, 0) to ($n$, $n$). It can be verified that $P(5) = 252$, $P(16) = 596\\,994\\,440$ and $P(1\\,000)\bmod 1\\,000\\,000\\,007 = 341\\,920\\,854$.
+
+Find $P(10\\,000\\,000)\bmod 1\\,000\\,000\\,007$.
+
+# --hints--
+
+`admissiblePaths()` should return `299742733`.
+
+```js
+assert.strictEqual(admissiblePaths(), 299742733);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function admissiblePaths() {
+
+  return true;
+}
+
+admissiblePaths();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-409-nim-extreme.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-409-nim-extreme.md
new file mode 100644
index 00000000000..735a1c77781
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-409-nim-extreme.md
@@ -0,0 +1,48 @@
+---
+id: 5900f5061000cf542c510017
+title: 'Problem 409: Nim Extreme'
+challengeType: 1
+forumTopicId: 302077
+dashedName: problem-409-nim-extreme
+---
+
+# --description--
+
+Let $n$ be a positive integer. Consider nim positions where:
+
+- There are $n$ non-empty piles.
+- Each pile has size less than $2^n$.
+- No two piles have the same size.
+
+Let $W(n)$ be the number of winning nim positions satisfying the above conditions (a position is winning if the first player has a winning strategy).
+
+For example, $W(1) = 1$, $W(2) = 6$, $W(3) = 168$, $W(5) = 19\\,764\\,360$ and $W(100)\bmod 1\\,000\\,000\\,007 = 384\\,777\\,056$.
+
+Find $W(10\\,000\\,000)\bmod 1\\,000\\,000\\,007$.
+
+# --hints--
+
+`nimExtreme()` should return `253223948`.
+
+```js
+assert.strictEqual(nimExtreme(), 253223948);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function nimExtreme() {
+
+  return true;
+}
+
+nimExtreme();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-41-pandigital-prime.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-41-pandigital-prime.md
new file mode 100644
index 00000000000..a774fa31167
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-41-pandigital-prime.md
@@ -0,0 +1,117 @@
+---
+id: 5900f3951000cf542c50fea8
+title: 'Problem 41: Pandigital prime'
+challengeType: 1
+forumTopicId: 302078
+dashedName: problem-41-pandigital-prime
+---
+
+# --description--
+
+We shall say that an `n`-digit number is pandigital if it makes use of all the digits 1 to `n` exactly once. For example, 2143 is a 4-digit pandigital and is also prime.
+
+What is the largest `n`-length digit pandigital prime that exists?
+
+# --hints--
+
+`pandigitalPrime(4)` should return a number.
+
+```js
+assert(typeof pandigitalPrime(4) === 'number');
+```
+
+`pandigitalPrime(4)` should return 4231.
+
+```js
+assert(pandigitalPrime(4) == 4231);
+```
+
+`pandigitalPrime(7)` should return 7652413.
+
+```js
+assert(pandigitalPrime(7) == 7652413);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pandigitalPrime(n) {
+
+  return n;
+}
+
+pandigitalPrime(7);
+```
+
+# --solutions--
+
+```js
+function pandigitalPrime(n) {
+  function isPrime(num) {
+    for (let i = 2, s = Math.sqrt(num); i <= s; i++) {
+      if (num % i === 0) {
+        return false;
+      }
+    }
+    return num !== 1;
+  }
+
+  function getPermutations(n) {
+    if (n === 1) {
+      permutations.push(digitsArr.join(''));
+    } else {
+      for (let i = 0; i < n - 1; i++) {
+        getPermutations(n - 1);
+        // swap(n % 2 === 0 ? i : 0, n - 1);
+        if (n % 2 === 0) {
+          swap(i, n - 1);
+        } else {
+          swap(0, n - 1);
+        }
+      }
+      getPermutations(n - 1);
+    }
+  }
+  function swap(x, y) {
+    let temp = digitsArr[x];
+    digitsArr[x] = digitsArr[y];
+    digitsArr[y] = temp;
+  }
+  let max = 0;
+  let permutations = [];
+  let digitsArr;
+  let pandigitalNum = '';
+
+  for (let max = n; max > 0; max--) {
+    pandigitalNum += max;
+  }
+
+  for (let i = 0; i < pandigitalNum.length; i++) {
+    if (max > 0) {
+      break;
+    } else {
+      permutations = [];
+      const currMax = pandigitalNum.slice(i);
+      digitsArr = currMax.split('');
+      getPermutations(digitsArr.length);
+
+      // sort permutations in descending order
+      permutations.sort(function(a, b) {
+        return b - a;
+      });
+
+      for (let perm of permutations) {
+        const thisPerm = parseInt(perm);
+        if (isPrime(thisPerm)) {
+          max = thisPerm;
+          break;
+        }
+      }
+    }
+  }
+
+  return max;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-410-circle-and-tangent-line.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-410-circle-and-tangent-line.md
new file mode 100644
index 00000000000..fd9d28a1bab
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-410-circle-and-tangent-line.md
@@ -0,0 +1,46 @@
+---
+id: 5900f5071000cf542c510018
+title: 'Problem 410: Circle and tangent line'
+challengeType: 1
+forumTopicId: 302079
+dashedName: problem-410-circle-and-tangent-line
+---
+
+# --description--
+
+Let $C$ be the circle with radius $r$, $x^2 + y^2 = r^2$. We choose two points $P(a, b)$ and $Q(-a, c)$ so that the line passing through $P$ and $Q$ is tangent to $C$.
+
+For example, the quadruplet $(r, a, b, c) = (2, 6, 2, -7)$ satisfies this property.
+
+Let $F(R, X)$ be the number of the integer quadruplets $(r, a, b, c)$ with this property, and with $0 &lt; r ≤ R$ and $0 &lt; a ≤ X$.
+
+We can verify that $F(1, 5) = 10$, $F(2, 10) = 52$ and $F(10, 100) = 3384$.
+
+Find $F({10}^8, {10}^9) + F({10}^9, {10}^8)$.
+
+# --hints--
+
+`circleAndTangentLine()` should return `799999783589946600`.
+
+```js
+assert.strictEqual(circleAndTangentLine(), 799999783589946600);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function circleAndTangentLine() {
+
+  return true;
+}
+
+circleAndTangentLine();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-411-uphill-paths.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-411-uphill-paths.md
new file mode 100644
index 00000000000..09ace26cdea
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-411-uphill-paths.md
@@ -0,0 +1,50 @@
+---
+id: 5900f5081000cf542c510019
+title: 'Problem 411: Uphill paths'
+challengeType: 1
+forumTopicId: 302080
+dashedName: problem-411-uphill-paths
+---
+
+# --description--
+
+Let $n$ be a positive integer. Suppose there are stations at the coordinates $(x, y) = (2^i\bmod n, 3^i\bmod n)$ for $0 ≤ i ≤ 2n$. We will consider stations with the same coordinates as the same station.
+
+We wish to form a path from (0, 0) to ($n$, $n$) such that the $x$ and $y$ coordinates never decrease.
+
+Let $S(n)$ be the maximum number of stations such a path can pass through.
+
+For example, if $n = 22$, there are 11 distinct stations, and a valid path can pass through at most 5 stations. Therefore, $S(22) = 5$. The case is illustrated below, with an example of an optimal path:
+
+<img class="img-responsive center-block" alt="valid path passing through 5 stations, for n = 22, with 11 distinct stations" src="https://cdn.freecodecamp.org/curriculum/project-euler/uphill-paths.png" style="background-color: white; padding: 10px;" />
+
+It can also be verified that $S(123) = 14$ and $S(10\\,000) = 48$.
+
+Find $\sum S(k^5)$ for $1 ≤ k ≤ 30$.
+
+# --hints--
+
+`uphillPaths()` should return `9936352`.
+
+```js
+assert.strictEqual(uphillPaths(), 9936352);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function uphillPaths() {
+
+  return true;
+}
+
+uphillPaths();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-412-gnomon-numbering.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-412-gnomon-numbering.md
new file mode 100644
index 00000000000..ac00f985c10
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-412-gnomon-numbering.md
@@ -0,0 +1,52 @@
+---
+id: 5900f5081000cf542c51001a
+title: 'Problem 412: Gnomon numbering'
+challengeType: 1
+forumTopicId: 302081
+dashedName: problem-412-gnomon-numbering
+---
+
+# --description--
+
+For integers $m$, $n$ ($0 ≤ n &lt; m$), let $L(m, n)$ be an $m×m$ grid with the top-right $n×n$ grid removed.
+
+For example, $L(5, 3)$ looks like this:
+
+<img class="img-responsive center-block" alt="5x5 grid, with removed 3x3 grid from the top-right" src="https://cdn.freecodecamp.org/curriculum/project-euler/gnomon-numbering-1.png" style="background-color: white; padding: 10px;" />
+
+We want to number each cell of $L(m, n)$ with consecutive integers 1, 2, 3, ... such that the number in every cell is smaller than the number below it and to the left of it.
+
+For example, here are two valid numberings of $L(5, 3)$:
+
+<img class="img-responsive center-block" alt="two valid numberings of L(5, 3)" src="https://cdn.freecodecamp.org/curriculum/project-euler/gnomon-numbering-2.png" style="background-color: white; padding: 10px;" />
+
+Let $LC(m, n)$ be the number of valid numberings of $L(m, n)$. It can be verified that $LC(3, 0) = 42$, $LC(5, 3) = 250\\,250$, $LC(6, 3) = 406\\,029\\,023\\,400$ and $LC(10, 5)\bmod 76\\,543\\,217 = 61\\,251\\,715$.
+
+Find $LC(10\\,000, 5\\,000)\bmod 76\\,543\\,217$.
+
+# --hints--
+
+`gnomonNumbering()` should return `38788800`.
+
+```js
+assert.strictEqual(gnomonNumbering(), 38788800);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function gnomonNumbering() {
+
+  return true;
+}
+
+gnomonNumbering();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-413-one-child-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-413-one-child-numbers.md
new file mode 100644
index 00000000000..0a50da9e14d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-413-one-child-numbers.md
@@ -0,0 +1,46 @@
+---
+id: 5900f50a1000cf542c51001c
+title: 'Problem 413: One-child Numbers'
+challengeType: 1
+forumTopicId: 302082
+dashedName: problem-413-one-child-numbers
+---
+
+# --description--
+
+We say that a $d$-digit positive number (no leading zeros) is a one-child number if exactly one of its sub-strings is divisible by $d$.
+
+For example, 5671 is a 4-digit one-child number. Among all its sub-strings 5, 6, 7, 1, 56, 67, 71, 567, 671 and 5671, only 56 is divisible by 4.
+
+Similarly, 104 is a 3-digit one-child number because only 0 is divisible by 3. 1132451 is a 7-digit one-child number because only 245 is divisible by 7.
+
+Let $F(N)$ be the number of the one-child numbers less than $N$. We can verify that $F(10) = 9$, $F({10}^3) = 389$ and $F({10}^7) = 277\\,674$.
+
+Find $F({10}^{19})$.
+
+# --hints--
+
+`oneChildNumbers()` should return `3079418648040719`.
+
+```js
+assert.strictEqual(oneChildNumbers(), 3079418648040719);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function oneChildNumbers() {
+
+  return true;
+}
+
+oneChildNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-414-kaprekar-constant.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-414-kaprekar-constant.md
new file mode 100644
index 00000000000..e50ab2c9a7e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-414-kaprekar-constant.md
@@ -0,0 +1,64 @@
+---
+id: 5900f50b1000cf542c51001d
+title: 'Problem 414: Kaprekar constant'
+challengeType: 1
+forumTopicId: 302083
+dashedName: problem-414-kaprekar-constant
+---
+
+# --description--
+
+6174 is a remarkable number; if we sort its digits in increasing order and subtract that number from the number you get when you sort the digits in decreasing order, we get $7641 - 1467 = 6174$.
+
+Even more remarkable is that if we start from any 4 digit number and repeat this process of sorting and subtracting, we'll eventually end up with 6174 or immediately with 0 if all digits are equal.
+
+This also works with numbers that have less than 4 digits if we pad the number with leading zeroes until we have 4 digits.
+
+E.g. let's start with the number 0837:
+
+$$\begin{align}   & 8730 - 0378 = 8352 \\\\
+  & 8532 - 2358 = 6174 \end{align}$$
+
+6174 is called the Kaprekar constant. The process of sorting and subtracting and repeating this until either 0 or the Kaprekar constant is reached is called the Kaprekar routine.
+
+We can consider the Kaprekar routine for other bases and number of digits. Unfortunately, it is not guaranteed a Kaprekar constant exists in all cases; either the routine can end up in a cycle for some input numbers or the constant the routine arrives at can be different for different input numbers. However, it can be shown that for 5 digits and a base $b = 6t + 3 ≠ 9$, a Kaprekar constant exists.
+
+E.g. base 15: ${(10, 4, 14, 9, 5)}\_{15}$ base 21: $(14, 6, 20, 13, 7)\_{21}$
+
+Define $C_b$ to be the Kaprekar constant in base $b$ for 5 digits. Define the function $sb(i)$ to be:
+
+- 0 if $i = C_b$ or if $i$ written in base $b$ consists of 5 identical digits
+- the number of iterations it takes the Kaprekar routine in base $b$ to arrive at $C_b$, otherwise
+
+Note that we can define $sb(i)$ for all integers $i &lt; b^5$. If $i$ written in base $b$ takes less than 5 digits, the number is padded with leading zero digits until we have 5 digits before applying the Kaprekar routine.
+
+Define $S(b)$ as the sum of $sb(i)$ for $0 &lt; i &lt; b^5$. E.g. $S(15) = 5\\,274\\,369$ $S(111) = 400\\,668\\,930\\,299$
+
+Find the sum of $S(6k + 3)$ for $2 ≤ k ≤ 300$. Give the last 18 digits as your answer.
+
+# --hints--
+
+`kaprekarConstant()` should return `552506775824935500`.
+
+```js
+assert.strictEqual(kaprekarConstant(), 552506775824935500);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function kaprekarConstant() {
+
+  return true;
+}
+
+kaprekarConstant();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-415-titanic-sets.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-415-titanic-sets.md
new file mode 100644
index 00000000000..a03c026f9ae
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-415-titanic-sets.md
@@ -0,0 +1,46 @@
+---
+id: 5900f50c1000cf542c51001e
+title: 'Problem 415: Titanic sets'
+challengeType: 1
+forumTopicId: 302084
+dashedName: problem-415-titanic-sets
+---
+
+# --description--
+
+A set of lattice points $S$ is called a titanic set if there exists a line passing through exactly two points in $S$.
+
+An example of a titanic set is $S = \\{(0, 0), (0, 1), (0, 2), (1, 1), (2, 0), (1, 0)\\}$, where the line passing through (0, 1) and (2, 0) does not pass through any other point in $S$.
+
+On the other hand, the set {(0, 0), (1, 1), (2, 2), (4, 4)} is not a titanic set since the line passing through any two points in the set also passes through the other two.
+
+For any positive integer $N$, let $T(N)$ be the number of titanic sets $S$ whose every point ($x$, $y$) satisfies $0 ≤ x$, $y ≤ N$. It can be verified that $T(1) = 11$, $T(2) = 494$, $T(4) = 33\\,554\\,178$, $T(111)\bmod {10}^8 = 13\\,500\\,401$ and $T({10}^5)\bmod {10}^8 = 63\\,259\\,062$.
+
+Find $T({10}^{11})\bmod {10}^8$.
+
+# --hints--
+
+`titanicSets()` should return `55859742`.
+
+```js
+assert.strictEqual(titanicSets(), 55859742);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function titanicSets() {
+
+  return true;
+}
+
+titanicSets();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-416-a-frogs-trip.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-416-a-frogs-trip.md
new file mode 100644
index 00000000000..048adb254cd
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-416-a-frogs-trip.md
@@ -0,0 +1,44 @@
+---
+id: 5900f50e1000cf542c510020
+title: 'Problem 416: A frog''s trip'
+challengeType: 1
+forumTopicId: 302085
+dashedName: problem-416-a-frogs-trip
+---
+
+# --description--
+
+A row of $n$ squares contains a frog in the leftmost square. By successive jumps the frog goes to the rightmost square and then back to the leftmost square. On the outward trip he jumps one, two or three squares to the right, and on the homeward trip he jumps to the left in a similar manner. He cannot jump outside the squares. He repeats the round-trip travel $m$ times.
+
+Let $F(m, n)$ be the number of the ways the frog can travel so that at most one square remains unvisited.
+
+For example, $F(1, 3) = 4$, $F(1, 4) = 15$, $F(1, 5) = 46$, $F(2, 3) = 16$ and $F(2, 100)\bmod {10}^9 = 429\\,619\\,151$.
+
+Find the last 9 digits of $F(10, {10}^{12})$.
+
+# --hints--
+
+`frogsTrip()` should return `898082747`.
+
+```js
+assert.strictEqual(frogsTrip(), 898082747);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function frogsTrip() {
+
+  return true;
+}
+
+frogsTrip();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-417-reciprocal-cycles-ii.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-417-reciprocal-cycles-ii.md
new file mode 100644
index 00000000000..aa0880c13f4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-417-reciprocal-cycles-ii.md
@@ -0,0 +1,53 @@
+---
+id: 5900f50d1000cf542c51001f
+title: 'Problem 417: Reciprocal cycles II'
+challengeType: 1
+forumTopicId: 302086
+dashedName: problem-417-reciprocal-cycles-ii
+---
+
+# --description--
+
+A unit fraction contains 1 in the numerator. The decimal representation of the unit fractions with denominators 2 to 10 are given:
+
+$$\begin{align}   & \frac{1}{2}  = 0.5 \\\\
+  & \frac{1}{3}  = 0.(3) \\\\   & \frac{1}{4}  = 0.25 \\\\
+  & \frac{1}{5}  = 0.2 \\\\   & \frac{1}{6}  = 0.1(6) \\\\
+  & \frac{1}{7}  = 0.(142857) \\\\   & \frac{1}{8}  = 0.125 \\\\
+  & \frac{1}{9}  = 0.(1) \\\\   & \frac{1}{10} = 0.1 \\\\
+\end{align}$$
+
+Where $0.1(6)$ means $0.166666\ldots$, and has a 1-digit recurring cycle. It can be seen that $\frac{1}{7}$ has a 6-digit recurring cycle.
+
+Unit fractions whose denominator has no other prime factors than 2 and/or 5 are not considered to have a recurring cycle. We define the length of the recurring cycle of those unit fractions as 0.
+
+Let $L(n)$ denote the length of the recurring cycle of $\frac{1}{n}$. You are given that $\sum L(n)$ for $3 ≤ n ≤ 1\\,000\\,000$ equals $55\\,535\\,191\\,115$.
+
+Find $\sum L(n)$ for $3 ≤ n ≤ 100\\,000\\,000$.
+
+# --hints--
+
+`reciprocalCyclesTwo()` should return `446572970925740`.
+
+```js
+assert.strictEqual(reciprocalCyclesTwo(), 446572970925740);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function reciprocalCyclesTwo() {
+
+  return true;
+}
+
+reciprocalCyclesTwo();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-418-factorisation-triples.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-418-factorisation-triples.md
new file mode 100644
index 00000000000..0c376474a32
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-418-factorisation-triples.md
@@ -0,0 +1,47 @@
+---
+id: 5900f50f1000cf542c510021
+title: 'Problem 418: Factorisation triples'
+challengeType: 1
+forumTopicId: 302087
+dashedName: problem-418-factorisation-triples
+---
+
+# --description--
+
+Let $n$ be a positive integer. An integer triple ($a$, $b$, $c$) is called a factorisation triple of $n$ if:
+
+- $1 ≤ a ≤ b ≤ c$
+- $a \times b \times c = n$.
+
+Define $f(n)$ to be $a + b + c$ for the factorisation triple ($a$, $b$, $c$) of $n$ which minimises $\frac{c}{a}$. One can show that this triple is unique.
+
+For example, $f(165) = 19$, $f(100\\,100) = 142$ and $f(20!) = 4\\,034\\,872$.
+
+Find $f(43!)$.
+
+# --hints--
+
+`factorisationTriples()` should return `1177163565297340400`.
+
+```js
+assert.strictEqual(factorisationTriples(), 1177163565297340400);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function factorisationTriples() {
+
+  return true;
+}
+
+factorisationTriples();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-419-look-and-say-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-419-look-and-say-sequence.md
new file mode 100644
index 00000000000..4143ab36ccb
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-419-look-and-say-sequence.md
@@ -0,0 +1,65 @@
+---
+id: 5900f5101000cf542c510022
+title: 'Problem 419: Look and say sequence'
+challengeType: 1
+forumTopicId: 302088
+dashedName: problem-419-look-and-say-sequence
+---
+
+# --description--
+
+The look and say sequence goes 1, 11, 21, 1211, 111221, 312211, 13112221, 1113213211, ...
+
+The sequence starts with 1 and all other members are obtained by describing the previous member in terms of consecutive digits.
+
+It helps to do this out loud:
+
+1 is 'one one' $→ 11$
+
+11 is 'two ones' $→ 21$
+
+21 is 'one two and one one' $→ 1211$
+
+1211 is 'one one, one two and two ones' $→ 111221$
+
+111221 is 'three ones, two twos and one one' $→ 312211$
+
+...
+
+Define $A(n)$, $B(n)$ and $C(n)$ as the number of ones, twos and threes in the $n$'th element of the sequence respectively. One can verify that $A(40) = 31\\,254$, $B(40) = 20\\,259$ and $C(40) = 11\\,625$.
+
+Find $A(n)$, $B(n)$ and $C(n)$ for $n = {10}^{12}$. Give your answer modulo $2^{30}$ as a string and separate your values for $A$, $B$ and $C$ by a comma. E.g. for $n = 40$ the answer would be `31254,20259,11625`.
+
+# --hints--
+
+`lookAndSaySequence()` should return a string.
+
+```js
+assert(typeof lookAndSaySequence() === 'string');
+```
+
+
+`lookAndSaySequence()` should return the string `998567458,1046245404,43363922`.
+
+```js
+assert.strictEqual(lookAndSaySequence(), '998567458,1046245404,43363922');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function lookAndSaySequence() {
+
+  return true;
+}
+
+lookAndSaySequence();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-42-coded-triangle-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-42-coded-triangle-numbers.md
new file mode 100644
index 00000000000..abda6f2d137
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-42-coded-triangle-numbers.md
@@ -0,0 +1,71 @@
+---
+id: 5900f3961000cf542c50fea9
+title: 'Problem 42: Coded triangle numbers'
+challengeType: 1
+forumTopicId: 302089
+dashedName: problem-42-coded-triangle-numbers
+---
+
+# --description--
+
+The `n`<sup>th</sup> term of the sequence of triangle numbers is given by, `tn` = ½`n`(`n`+1); so the first ten triangle numbers are:
+
+<div style='margin-left: 4em;'>1, 3, 6, 10, 15, 21, 28, 36, 45, 55, ...</div>
+
+By converting each letter in a word to a number corresponding to its alphabetical position and adding these values we form a word value. For example, the word value for SKY is 19 + 11 + 25 = 55 = `t`<sub>10</sub>. If the word value is a triangle number then we shall call the word a triangle word.
+
+Using words array of `n`-length, how many are triangle words?
+
+# --hints--
+
+`codedTriangleNumbers(1400)` should return a number.
+
+```js
+assert(typeof codedTriangleNumbers(1400) === 'number');
+```
+
+`codedTriangleNumbers(1400)` should return 129.
+
+```js
+assert(codedTriangleNumbers(1400) == 129);
+```
+
+`codedTriangleNumbers(1500)` should return 137.
+
+```js
+assert(codedTriangleNumbers(1500) == 137);
+```
+
+`codedTriangleNumbers(1600)` should return 141.
+
+```js
+assert(codedTriangleNumbers(1600) == 141);
+```
+
+`codedTriangleNumbers(1786)` should return 162.
+
+```js
+assert(codedTriangleNumbers(1786) == 162);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function codedTriangleNumbers(n) {
+
+  return 1;
+}
+// Only change code above this line
+
+const words = ['A','ABILITY','ABLE','ABOUT','ABOVE','ABSENCE','ABSOLUTELY','ACADEMIC','ACCEPT','ACCESS','ACCIDENT','ACCOMPANY','ACCORDING','ACCOUNT','ACHIEVE','ACHIEVEMENT','ACID','ACQUIRE','ACROSS','ACT','ACTION','ACTIVE','ACTIVITY','ACTUAL','ACTUALLY','ADD','ADDITION','ADDITIONAL','ADDRESS','ADMINISTRATION','ADMIT','ADOPT','ADULT','ADVANCE','ADVANTAGE','ADVICE','ADVISE','AFFAIR','AFFECT','AFFORD','AFRAID','AFTER','AFTERNOON','AFTERWARDS','AGAIN','AGAINST','AGE','AGENCY','AGENT','AGO','AGREE','AGREEMENT','AHEAD','AID','AIM','AIR','AIRCRAFT','ALL','ALLOW','ALMOST','ALONE','ALONG','ALREADY','ALRIGHT','ALSO','ALTERNATIVE','ALTHOUGH','ALWAYS','AMONG','AMONGST','AMOUNT','AN','ANALYSIS','ANCIENT','AND','ANIMAL','ANNOUNCE','ANNUAL','ANOTHER','ANSWER','ANY','ANYBODY','ANYONE','ANYTHING','ANYWAY','APART','APPARENT','APPARENTLY','APPEAL','APPEAR','APPEARANCE','APPLICATION','APPLY','APPOINT','APPOINTMENT','APPROACH','APPROPRIATE','APPROVE','AREA','ARGUE','ARGUMENT','ARISE','ARM','ARMY','AROUND','ARRANGE','ARRANGEMENT','ARRIVE','ART','ARTICLE','ARTIST','AS','ASK','ASPECT','ASSEMBLY','ASSESS','ASSESSMENT','ASSET','ASSOCIATE','ASSOCIATION','ASSUME','ASSUMPTION','AT','ATMOSPHERE','ATTACH','ATTACK','ATTEMPT','ATTEND','ATTENTION','ATTITUDE','ATTRACT','ATTRACTIVE','AUDIENCE','AUTHOR','AUTHORITY','AVAILABLE','AVERAGE','AVOID','AWARD','AWARE','AWAY','AYE','BABY','BACK','BACKGROUND','BAD','BAG','BALANCE','BALL','BAND','BANK','BAR','BASE','BASIC','BASIS','BATTLE','BE','BEAR','BEAT','BEAUTIFUL','BECAUSE','BECOME','BED','BEDROOM','BEFORE','BEGIN','BEGINNING','BEHAVIOUR','BEHIND','BELIEF','BELIEVE','BELONG','BELOW','BENEATH','BENEFIT','BESIDE','BEST','BETTER','BETWEEN','BEYOND','BIG','BILL','BIND','BIRD','BIRTH','BIT','BLACK','BLOCK','BLOOD','BLOODY','BLOW','BLUE','BOARD','BOAT','BODY','BONE','BOOK','BORDER','BOTH','BOTTLE','BOTTOM','BOX','BOY','BRAIN','BRANCH','BREAK','BREATH','BRIDGE','BRIEF','BRIGHT','BRING','BROAD','BROTHER','BUDGET','BUILD','BUILDING','BURN','BUS','BUSINESS','BUSY','BUT','BUY','BY','CABINET','CALL','CAMPAIGN','CAN','CANDIDATE','CAPABLE','CAPACITY','CAPITAL','CAR','CARD','CARE','CAREER','CAREFUL','CAREFULLY','CARRY','CASE','CASH','CAT','CATCH','CATEGORY','CAUSE','CELL','CENTRAL','CENTRE','CENTURY','CERTAIN','CERTAINLY','CHAIN','CHAIR','CHAIRMAN','CHALLENGE','CHANCE','CHANGE','CHANNEL','CHAPTER','CHARACTER','CHARACTERISTIC','CHARGE','CHEAP','CHECK','CHEMICAL','CHIEF','CHILD','CHOICE','CHOOSE','CHURCH','CIRCLE','CIRCUMSTANCE','CITIZEN','CITY','CIVIL','CLAIM','CLASS','CLEAN','CLEAR','CLEARLY','CLIENT','CLIMB','CLOSE','CLOSELY','CLOTHES','CLUB','COAL','CODE','COFFEE','COLD','COLLEAGUE','COLLECT','COLLECTION','COLLEGE','COLOUR','COMBINATION','COMBINE','COME','COMMENT','COMMERCIAL','COMMISSION','COMMIT','COMMITMENT','COMMITTEE','COMMON','COMMUNICATION','COMMUNITY','COMPANY','COMPARE','COMPARISON','COMPETITION','COMPLETE','COMPLETELY','COMPLEX','COMPONENT','COMPUTER','CONCENTRATE','CONCENTRATION','CONCEPT','CONCERN','CONCERNED','CONCLUDE','CONCLUSION','CONDITION','CONDUCT','CONFERENCE','CONFIDENCE','CONFIRM','CONFLICT','CONGRESS','CONNECT','CONNECTION','CONSEQUENCE','CONSERVATIVE','CONSIDER','CONSIDERABLE','CONSIDERATION','CONSIST','CONSTANT','CONSTRUCTION','CONSUMER','CONTACT','CONTAIN','CONTENT','CONTEXT','CONTINUE','CONTRACT','CONTRAST','CONTRIBUTE','CONTRIBUTION','CONTROL','CONVENTION','CONVERSATION','COPY','CORNER','CORPORATE','CORRECT','COS','COST','COULD','COUNCIL','COUNT','COUNTRY','COUNTY','COUPLE','COURSE','COURT','COVER','CREATE','CREATION','CREDIT','CRIME','CRIMINAL','CRISIS','CRITERION','CRITICAL','CRITICISM','CROSS','CROWD','CRY','CULTURAL','CULTURE','CUP','CURRENT','CURRENTLY','CURRICULUM','CUSTOMER','CUT','DAMAGE','DANGER','DANGEROUS','DARK','DATA','DATE','DAUGHTER','DAY','DEAD','DEAL','DEATH','DEBATE','DEBT','DECADE','DECIDE','DECISION','DECLARE','DEEP','DEFENCE','DEFENDANT','DEFINE','DEFINITION','DEGREE','DELIVER','DEMAND','DEMOCRATIC','DEMONSTRATE','DENY','DEPARTMENT','DEPEND','DEPUTY','DERIVE','DESCRIBE','DESCRIPTION','DESIGN','DESIRE','DESK','DESPITE','DESTROY','DETAIL','DETAILED','DETERMINE','DEVELOP','DEVELOPMENT','DEVICE','DIE','DIFFERENCE','DIFFERENT','DIFFICULT','DIFFICULTY','DINNER','DIRECT','DIRECTION','DIRECTLY','DIRECTOR','DISAPPEAR','DISCIPLINE','DISCOVER','DISCUSS','DISCUSSION','DISEASE','DISPLAY','DISTANCE','DISTINCTION','DISTRIBUTION','DISTRICT','DIVIDE','DIVISION','DO','DOCTOR','DOCUMENT','DOG','DOMESTIC','DOOR','DOUBLE','DOUBT','DOWN','DRAW','DRAWING','DREAM','DRESS','DRINK','DRIVE','DRIVER','DROP','DRUG','DRY','DUE','DURING','DUTY','EACH','EAR','EARLY','EARN','EARTH','EASILY','EAST','EASY','EAT','ECONOMIC','ECONOMY','EDGE','EDITOR','EDUCATION','EDUCATIONAL','EFFECT','EFFECTIVE','EFFECTIVELY','EFFORT','EGG','EITHER','ELDERLY','ELECTION','ELEMENT','ELSE','ELSEWHERE','EMERGE','EMPHASIS','EMPLOY','EMPLOYEE','EMPLOYER','EMPLOYMENT','EMPTY','ENABLE','ENCOURAGE','END','ENEMY','ENERGY','ENGINE','ENGINEERING','ENJOY','ENOUGH','ENSURE','ENTER','ENTERPRISE','ENTIRE','ENTIRELY','ENTITLE','ENTRY','ENVIRONMENT','ENVIRONMENTAL','EQUAL','EQUALLY','EQUIPMENT','ERROR','ESCAPE','ESPECIALLY','ESSENTIAL','ESTABLISH','ESTABLISHMENT','ESTATE','ESTIMATE','EVEN','EVENING','EVENT','EVENTUALLY','EVER','EVERY','EVERYBODY','EVERYONE','EVERYTHING','EVIDENCE','EXACTLY','EXAMINATION','EXAMINE','EXAMPLE','EXCELLENT','EXCEPT','EXCHANGE','EXECUTIVE','EXERCISE','EXHIBITION','EXIST','EXISTENCE','EXISTING','EXPECT','EXPECTATION','EXPENDITURE','EXPENSE','EXPENSIVE','EXPERIENCE','EXPERIMENT','EXPERT','EXPLAIN','EXPLANATION','EXPLORE','EXPRESS','EXPRESSION','EXTEND','EXTENT','EXTERNAL','EXTRA','EXTREMELY','EYE','FACE','FACILITY','FACT','FACTOR','FACTORY','FAIL','FAILURE','FAIR','FAIRLY','FAITH','FALL','FAMILIAR','FAMILY','FAMOUS','FAR','FARM','FARMER','FASHION','FAST','FATHER','FAVOUR','FEAR','FEATURE','FEE','FEEL','FEELING','FEMALE','FEW','FIELD','FIGHT','FIGURE','FILE','FILL','FILM','FINAL','FINALLY','FINANCE','FINANCIAL','FIND','FINDING','FINE','FINGER','FINISH','FIRE','FIRM','FIRST','FISH','FIT','FIX','FLAT','FLIGHT','FLOOR','FLOW','FLOWER','FLY','FOCUS','FOLLOW','FOLLOWING','FOOD','FOOT','FOOTBALL','FOR','FORCE','FOREIGN','FOREST','FORGET','FORM','FORMAL','FORMER','FORWARD','FOUNDATION','FREE','FREEDOM','FREQUENTLY','FRESH','FRIEND','FROM','FRONT','FRUIT','FUEL','FULL','FULLY','FUNCTION','FUND','FUNNY','FURTHER','FUTURE','GAIN','GAME','GARDEN','GAS','GATE','GATHER','GENERAL','GENERALLY','GENERATE','GENERATION','GENTLEMAN','GET','GIRL','GIVE','GLASS','GO','GOAL','GOD','GOLD','GOOD','GOVERNMENT','GRANT','GREAT','GREEN','GREY','GROUND','GROUP','GROW','GROWING','GROWTH','GUEST','GUIDE','GUN','HAIR','HALF','HALL','HAND','HANDLE','HANG','HAPPEN','HAPPY','HARD','HARDLY','HATE','HAVE','HE','HEAD','HEALTH','HEAR','HEART','HEAT','HEAVY','HELL','HELP','HENCE','HER','HERE','HERSELF','HIDE','HIGH','HIGHLY','HILL','HIM','HIMSELF','HIS','HISTORICAL','HISTORY','HIT','HOLD','HOLE','HOLIDAY','HOME','HOPE','HORSE','HOSPITAL','HOT','HOTEL','HOUR','HOUSE','HOUSEHOLD','HOUSING','HOW','HOWEVER','HUGE','HUMAN','HURT','HUSBAND','I','IDEA','IDENTIFY','IF','IGNORE','ILLUSTRATE','IMAGE','IMAGINE','IMMEDIATE','IMMEDIATELY','IMPACT','IMPLICATION','IMPLY','IMPORTANCE','IMPORTANT','IMPOSE','IMPOSSIBLE','IMPRESSION','IMPROVE','IMPROVEMENT','IN','INCIDENT','INCLUDE','INCLUDING','INCOME','INCREASE','INCREASED','INCREASINGLY','INDEED','INDEPENDENT','INDEX','INDICATE','INDIVIDUAL','INDUSTRIAL','INDUSTRY','INFLUENCE','INFORM','INFORMATION','INITIAL','INITIATIVE','INJURY','INSIDE','INSIST','INSTANCE','INSTEAD','INSTITUTE','INSTITUTION','INSTRUCTION','INSTRUMENT','INSURANCE','INTEND','INTENTION','INTEREST','INTERESTED','INTERESTING','INTERNAL','INTERNATIONAL','INTERPRETATION','INTERVIEW','INTO','INTRODUCE','INTRODUCTION','INVESTIGATE','INVESTIGATION','INVESTMENT','INVITE','INVOLVE','IRON','IS','ISLAND','ISSUE','IT','ITEM','ITS','ITSELF','JOB','JOIN','JOINT','JOURNEY','JUDGE','JUMP','JUST','JUSTICE','KEEP','KEY','KID','KILL','KIND','KING','KITCHEN','KNEE','KNOW','KNOWLEDGE','LABOUR','LACK','LADY','LAND','LANGUAGE','LARGE','LARGELY','LAST','LATE','LATER','LATTER','LAUGH','LAUNCH','LAW','LAWYER','LAY','LEAD','LEADER','LEADERSHIP','LEADING','LEAF','LEAGUE','LEAN','LEARN','LEAST','LEAVE','LEFT','LEG','LEGAL','LEGISLATION','LENGTH','LESS','LET','LETTER','LEVEL','LIABILITY','LIBERAL','LIBRARY','LIE','LIFE','LIFT','LIGHT','LIKE','LIKELY','LIMIT','LIMITED','LINE','LINK','LIP','LIST','LISTEN','LITERATURE','LITTLE','LIVE','LIVING','LOAN','LOCAL','LOCATION','LONG','LOOK','LORD','LOSE','LOSS','LOT','LOVE','LOVELY','LOW','LUNCH','MACHINE','MAGAZINE','MAIN','MAINLY','MAINTAIN','MAJOR','MAJORITY','MAKE','MALE','MAN','MANAGE','MANAGEMENT','MANAGER','MANNER','MANY','MAP','MARK','MARKET','MARRIAGE','MARRIED','MARRY','MASS','MASTER','MATCH','MATERIAL','MATTER','MAY','MAYBE','ME','MEAL','MEAN','MEANING','MEANS','MEANWHILE','MEASURE','MECHANISM','MEDIA','MEDICAL','MEET','MEETING','MEMBER','MEMBERSHIP','MEMORY','MENTAL','MENTION','MERELY','MESSAGE','METAL','METHOD','MIDDLE','MIGHT','MILE','MILITARY','MILK','MIND','MINE','MINISTER','MINISTRY','MINUTE','MISS','MISTAKE','MODEL','MODERN','MODULE','MOMENT','MONEY','MONTH','MORE','MORNING','MOST','MOTHER','MOTION','MOTOR','MOUNTAIN','MOUTH','MOVE','MOVEMENT','MUCH','MURDER','MUSEUM','MUSIC','MUST','MY','MYSELF','NAME','NARROW','NATION','NATIONAL','NATURAL','NATURE','NEAR','NEARLY','NECESSARILY','NECESSARY','NECK','NEED','NEGOTIATION','NEIGHBOUR','NEITHER','NETWORK','NEVER','NEVERTHELESS','NEW','NEWS','NEWSPAPER','NEXT','NICE','NIGHT','NO','NOBODY','NOD','NOISE','NONE','NOR','NORMAL','NORMALLY','NORTH','NORTHERN','NOSE','NOT','NOTE','NOTHING','NOTICE','NOTION','NOW','NUCLEAR','NUMBER','NURSE','OBJECT','OBJECTIVE','OBSERVATION','OBSERVE','OBTAIN','OBVIOUS','OBVIOUSLY','OCCASION','OCCUR','ODD','OF','OFF','OFFENCE','OFFER','OFFICE','OFFICER','OFFICIAL','OFTEN','OIL','OKAY','OLD','ON','ONCE','ONE','ONLY','ONTO','OPEN','OPERATE','OPERATION','OPINION','OPPORTUNITY','OPPOSITION','OPTION','OR','ORDER','ORDINARY','ORGANISATION','ORGANISE','ORGANIZATION','ORIGIN','ORIGINAL','OTHER','OTHERWISE','OUGHT','OUR','OURSELVES','OUT','OUTCOME','OUTPUT','OUTSIDE','OVER','OVERALL','OWN','OWNER','PACKAGE','PAGE','PAIN','PAINT','PAINTING','PAIR','PANEL','PAPER','PARENT','PARK','PARLIAMENT','PART','PARTICULAR','PARTICULARLY','PARTLY','PARTNER','PARTY','PASS','PASSAGE','PAST','PATH','PATIENT','PATTERN','PAY','PAYMENT','PEACE','PENSION','PEOPLE','PER','PERCENT','PERFECT','PERFORM','PERFORMANCE','PERHAPS','PERIOD','PERMANENT','PERSON','PERSONAL','PERSUADE','PHASE','PHONE','PHOTOGRAPH','PHYSICAL','PICK','PICTURE','PIECE','PLACE','PLAN','PLANNING','PLANT','PLASTIC','PLATE','PLAY','PLAYER','PLEASE','PLEASURE','PLENTY','PLUS','POCKET','POINT','POLICE','POLICY','POLITICAL','POLITICS','POOL','POOR','POPULAR','POPULATION','POSITION','POSITIVE','POSSIBILITY','POSSIBLE','POSSIBLY','POST','POTENTIAL','POUND','POWER','POWERFUL','PRACTICAL','PRACTICE','PREFER','PREPARE','PRESENCE','PRESENT','PRESIDENT','PRESS','PRESSURE','PRETTY','PREVENT','PREVIOUS','PREVIOUSLY','PRICE','PRIMARY','PRIME','PRINCIPLE','PRIORITY','PRISON','PRISONER','PRIVATE','PROBABLY','PROBLEM','PROCEDURE','PROCESS','PRODUCE','PRODUCT','PRODUCTION','PROFESSIONAL','PROFIT','PROGRAM','PROGRAMME','PROGRESS','PROJECT','PROMISE','PROMOTE','PROPER','PROPERLY','PROPERTY','PROPORTION','PROPOSE','PROPOSAL','PROSPECT','PROTECT','PROTECTION','PROVE','PROVIDE','PROVIDED','PROVISION','PUB','PUBLIC','PUBLICATION','PUBLISH','PULL','PUPIL','PURPOSE','PUSH','PUT','QUALITY','QUARTER','QUESTION','QUICK','QUICKLY','QUIET','QUITE','RACE','RADIO','RAILWAY','RAIN','RAISE','RANGE','RAPIDLY','RARE','RATE','RATHER','REACH','REACTION','READ','READER','READING','READY','REAL','REALISE','REALITY','REALIZE','REALLY','REASON','REASONABLE','RECALL','RECEIVE','RECENT','RECENTLY','RECOGNISE','RECOGNITION','RECOGNIZE','RECOMMEND','RECORD','RECOVER','RED','REDUCE','REDUCTION','REFER','REFERENCE','REFLECT','REFORM','REFUSE','REGARD','REGION','REGIONAL','REGULAR','REGULATION','REJECT','RELATE','RELATION','RELATIONSHIP','RELATIVE','RELATIVELY','RELEASE','RELEVANT','RELIEF','RELIGION','RELIGIOUS','RELY','REMAIN','REMEMBER','REMIND','REMOVE','REPEAT','REPLACE','REPLY','REPORT','REPRESENT','REPRESENTATION','REPRESENTATIVE','REQUEST','REQUIRE','REQUIREMENT','RESEARCH','RESOURCE','RESPECT','RESPOND','RESPONSE','RESPONSIBILITY','RESPONSIBLE','REST','RESTAURANT','RESULT','RETAIN','RETURN','REVEAL','REVENUE','REVIEW','REVOLUTION','RICH','RIDE','RIGHT','RING','RISE','RISK','RIVER','ROAD','ROCK','ROLE','ROLL','ROOF','ROOM','ROUND','ROUTE','ROW','ROYAL','RULE','RUN','RURAL','SAFE','SAFETY','SALE','SAME','SAMPLE','SATISFY','SAVE','SAY','SCALE','SCENE','SCHEME','SCHOOL','SCIENCE','SCIENTIFIC','SCIENTIST','SCORE','SCREEN','SEA','SEARCH','SEASON','SEAT','SECOND','SECONDARY','SECRETARY','SECTION','SECTOR','SECURE','SECURITY','SEE','SEEK','SEEM','SELECT','SELECTION','SELL','SEND','SENIOR','SENSE','SENTENCE','SEPARATE','SEQUENCE','SERIES','SERIOUS','SERIOUSLY','SERVANT','SERVE','SERVICE','SESSION','SET','SETTLE','SETTLEMENT','SEVERAL','SEVERE','SEX','SEXUAL','SHAKE','SHALL','SHAPE','SHARE','SHE','SHEET','SHIP','SHOE','SHOOT','SHOP','SHORT','SHOT','SHOULD','SHOULDER','SHOUT','SHOW','SHUT','SIDE','SIGHT','SIGN','SIGNAL','SIGNIFICANCE','SIGNIFICANT','SILENCE','SIMILAR','SIMPLE','SIMPLY','SINCE','SING','SINGLE','SIR','SISTER','SIT','SITE','SITUATION','SIZE','SKILL','SKIN','SKY','SLEEP','SLIGHTLY','SLIP','SLOW','SLOWLY','SMALL','SMILE','SO','SOCIAL','SOCIETY','SOFT','SOFTWARE','SOIL','SOLDIER','SOLICITOR','SOLUTION','SOME','SOMEBODY','SOMEONE','SOMETHING','SOMETIMES','SOMEWHAT','SOMEWHERE','SON','SONG','SOON','SORRY','SORT','SOUND','SOURCE','SOUTH','SOUTHERN','SPACE','SPEAK','SPEAKER','SPECIAL','SPECIES','SPECIFIC','SPEECH','SPEED','SPEND','SPIRIT','SPORT','SPOT','SPREAD','SPRING','STAFF','STAGE','STAND','STANDARD','STAR','START','STATE','STATEMENT','STATION','STATUS','STAY','STEAL','STEP','STICK','STILL','STOCK','STONE','STOP','STORE','STORY','STRAIGHT','STRANGE','STRATEGY','STREET','STRENGTH','STRIKE','STRONG','STRONGLY','STRUCTURE','STUDENT','STUDIO','STUDY','STUFF','STYLE','SUBJECT','SUBSTANTIAL','SUCCEED','SUCCESS','SUCCESSFUL','SUCH','SUDDENLY','SUFFER','SUFFICIENT','SUGGEST','SUGGESTION','SUITABLE','SUM','SUMMER','SUN','SUPPLY','SUPPORT','SUPPOSE','SURE','SURELY','SURFACE','SURPRISE','SURROUND','SURVEY','SURVIVE','SWITCH','SYSTEM','TABLE','TAKE','TALK','TALL','TAPE','TARGET','TASK','TAX','TEA','TEACH','TEACHER','TEACHING','TEAM','TEAR','TECHNICAL','TECHNIQUE','TECHNOLOGY','TELEPHONE','TELEVISION','TELL','TEMPERATURE','TEND','TERM','TERMS','TERRIBLE','TEST','TEXT','THAN','THANK','THANKS','THAT','THE','THEATRE','THEIR','THEM','THEME','THEMSELVES','THEN','THEORY','THERE','THEREFORE','THESE','THEY','THIN','THING','THINK','THIS','THOSE','THOUGH','THOUGHT','THREAT','THREATEN','THROUGH','THROUGHOUT','THROW','THUS','TICKET','TIME','TINY','TITLE','TO','TODAY','TOGETHER','TOMORROW','TONE','TONIGHT','TOO','TOOL','TOOTH','TOP','TOTAL','TOTALLY','TOUCH','TOUR','TOWARDS','TOWN','TRACK','TRADE','TRADITION','TRADITIONAL','TRAFFIC','TRAIN','TRAINING','TRANSFER','TRANSPORT','TRAVEL','TREAT','TREATMENT','TREATY','TREE','TREND','TRIAL','TRIP','TROOP','TROUBLE','TRUE','TRUST','TRUTH','TRY','TURN','TWICE','TYPE','TYPICAL','UNABLE','UNDER','UNDERSTAND','UNDERSTANDING','UNDERTAKE','UNEMPLOYMENT','UNFORTUNATELY','UNION','UNIT','UNITED','UNIVERSITY','UNLESS','UNLIKELY','UNTIL','UP','UPON','UPPER','URBAN','US','USE','USED','USEFUL','USER','USUAL','USUALLY','VALUE','VARIATION','VARIETY','VARIOUS','VARY','VAST','VEHICLE','VERSION','VERY','VIA','VICTIM','VICTORY','VIDEO','VIEW','VILLAGE','VIOLENCE','VISION','VISIT','VISITOR','VITAL','VOICE','VOLUME','VOTE','WAGE','WAIT','WALK','WALL','WANT','WAR','WARM','WARN','WASH','WATCH','WATER','WAVE','WAY','WE','WEAK','WEAPON','WEAR','WEATHER','WEEK','WEEKEND','WEIGHT','WELCOME','WELFARE','WELL','WEST','WESTERN','WHAT','WHATEVER','WHEN','WHERE','WHEREAS','WHETHER','WHICH','WHILE','WHILST','WHITE','WHO','WHOLE','WHOM','WHOSE','WHY','WIDE','WIDELY','WIFE','WILD','WILL','WIN','WIND','WINDOW','WINE','WING','WINNER','WINTER','WISH','WITH','WITHDRAW','WITHIN','WITHOUT','WOMAN','WONDER','WONDERFUL','WOOD','WORD','WORK','WORKER','WORKING','WORKS','WORLD','WORRY','WORTH','WOULD','WRITE','WRITER','WRITING','WRONG','YARD','YEAH','YEAR','YES','YESTERDAY','YET','YOU','YOUNG','YOUR','YOURSELF','YOUTH'];
+
+codedTriangleNumbers(1786);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-420-2x2-positive-integer-matrix.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-420-2x2-positive-integer-matrix.md
new file mode 100644
index 00000000000..50a7c676cb8
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-420-2x2-positive-integer-matrix.md
@@ -0,0 +1,55 @@
+---
+id: 5900f5111000cf542c510023
+title: 'Problem 420: 2x2 positive integer matrix'
+challengeType: 1
+forumTopicId: 302090
+dashedName: problem-420-2x2-positive-integer-matrix
+---
+
+# --description--
+
+A positive integer matrix is a matrix whose elements are all positive integers.
+
+Some positive integer matrices can be expressed as a square of a positive integer matrix in two different ways. Here is an example:
+
+$$\begin{pmatrix}   40 & 12 \\\\
+  48 & 40 \end{pmatrix} =
+{\begin{pmatrix}
+  2 & 3 \\\\
+ 12 & 2 \end{pmatrix}}^2 =
+{\begin{pmatrix}
+  6 & 1 \\\\
+  4 & 6 \end{pmatrix}}^2$$
+
+We define $F(N)$ as the number of the 2x2 positive integer matrices which have a trace less than N and which can be expressed as a square of a positive integer matrix in two different ways.
+
+We can verify that $F(50) = 7$ and $F(1000) = 1019$.
+
+Find $F({10}^7)$.
+
+# --hints--
+
+`positiveIntegerMatrix()` should return `145159332`.
+
+```js
+assert.strictEqual(positiveIntegerMatrix(), 145159332);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function positiveIntegerMatrix() {
+
+  return true;
+}
+
+positiveIntegerMatrix();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-421-prime-factors-of-n151.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-421-prime-factors-of-n151.md
new file mode 100644
index 00000000000..f94cb95bc48
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-421-prime-factors-of-n151.md
@@ -0,0 +1,50 @@
+---
+id: 5900f5131000cf542c510024
+title: 'Problem 421: Prime factors of n^15+1'
+challengeType: 1
+forumTopicId: 302091
+dashedName: problem-421-prime-factors-of-n151
+---
+
+# --description--
+
+Numbers of the form $n^{15} + 1$ are composite for every integer $n > 1$.
+
+For positive integers $n$ and $m$ let $s(n, m)$ be defined as the sum of the distinct prime factors of $n^{15} + 1$ not exceeding $m$.
+
+E.g. $2^{15} + 1 = 3 × 3 × 11 × 331$.
+
+So $s(2, 10) = 3$ and $s(2, 1000) = 3 + 11 + 331 = 345$.
+
+Also ${10}^{15} + 1 = 7 × 11 × 13 × 211 × 241 × 2161 × 9091$.
+
+So $s(10, 100) = 31$ and $s(10, 1000) = 483$.
+
+Find $\sum s(n, {10}^8)$ for $1 ≤ n ≤ {10}^{11}$.
+
+# --hints--
+
+`primeFactorsOfN15Plus1()` should return `2304215802083466200`.
+
+```js
+assert.strictEqual(primeFactorsOfN15Plus1(), 2304215802083466200);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeFactorsOfN15Plus1() {
+
+  return true;
+}
+
+primeFactorsOfN15Plus1();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-422-sequence-of-points-on-a-hyperbola.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-422-sequence-of-points-on-a-hyperbola.md
new file mode 100644
index 00000000000..7ea875b71ab
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-422-sequence-of-points-on-a-hyperbola.md
@@ -0,0 +1,54 @@
+---
+id: 5900f5131000cf542c510025
+title: 'Problem 422: Sequence of points on a hyperbola'
+challengeType: 1
+forumTopicId: 302092
+dashedName: problem-422-sequence-of-points-on-a-hyperbola
+---
+
+# --description--
+
+Let $H$ be the hyperbola defined by the equation $12x^2 + 7xy - 12y^2 = 625$.
+
+Next, define $X$ as the point (7, 1). It can be seen that $X$ is in $H$.
+
+Now we define a sequence of points in $H, \\{P_i : i ≥ 1\\}$, as:
+
+- $P_1 = (13, \frac{61}{4})$.
+- $P_2 = (\frac{-43}{6}, -4)$.
+- For $i > 2$, $P_i$ is the unique point in $H$ that is different from $P_{i - 1}$ and such that line $P_iP_{i - 1}$ is parallel to line $P_{i - 2}X$. It can be shown that $P_i$ is well-defined, and that its coordinates are always rational.
+
+<img class="img-responsive center-block" alt="animation showing defining points P_1 to P_6" src="https://cdn.freecodecamp.org/curriculum/project-euler/sequence-of-points-on-a-hyperbola.gif" style="background-color: white; padding: 10px;" />
+
+You are given that $P_3 = (\frac{-19}{2}, \frac{-229}{24})$, $P_4 = (\frac{1267}{144}, \frac{-37}{12})$ and $P_7 = (\frac{17\\,194\\,218\\,091}{143\\,327\\,232}, \frac{274\\,748\\,766\\,781}{1\\,719\\,926\\,784})$.
+
+Find $P_n$ for $n = {11}^{14}$ in the following format: If $P_n = (\frac{a}{b}, \frac{c}{d})$ where the fractions are in lowest terms and the denominators are positive, then the answer is $(a + b + c + d)\bmod 1\\,000\\,000\\,007$.
+
+For $n = 7$, the answer would have been: $806\\,236\\,837$.
+
+# --hints--
+
+`sequenceOfPointsOnHyperbola()` should return `92060460`.
+
+```js
+assert.strictEqual(sequenceOfPointsOnHyperbola(), 92060460);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sequenceOfPointsOnHyperbola() {
+
+  return true;
+}
+
+sequenceOfPointsOnHyperbola();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-423-consecutive-die-throws.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-423-consecutive-die-throws.md
new file mode 100644
index 00000000000..9969311f0de
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-423-consecutive-die-throws.md
@@ -0,0 +1,59 @@
+---
+id: 5900f5141000cf542c510027
+title: 'Problem 423: Consecutive die throws'
+challengeType: 1
+forumTopicId: 302093
+dashedName: problem-423-consecutive-die-throws
+---
+
+# --description--
+
+Let $n$ be a positive integer.
+
+A 6-sided die is thrown $n$ times. Let $c$ be the number of pairs of consecutive throws that give the same value.
+
+For example, if $n = 7$ and the values of the die throws are (1, 1, 5, 6, 6, 6, 3), then the following pairs of consecutive throws give the same value:
+
+$$\begin{align}   & (\underline{1}, \underline{1}, 5, 6, 6, 6, 3) \\\\
+  & (1, 1, 5, \underline{6}, \underline{6}, 6, 3) \\\\ & (1, 1, 5, 6, \underline{6}, \underline{6}, 3) \end{align}$$
+
+Therefore, $c = 3$ for (1, 1, 5, 6, 6, 6, 3).
+
+Define $C(n)$ as the number of outcomes of throwing a 6-sided die $n$ times such that $c$ does not exceed $π(n)$.<sup>1</sup>
+
+For example, $C(3) = 216$, $C(4) = 1290$, $C(11) = 361\\,912\\,500$ and $C(24) = 4\\,727\\,547\\,363\\,281\\,250\\,000$.
+
+Define $S(L)$ as $\sum C(n)$ for $1 ≤ n ≤ L$.
+
+For example, $S(50)\bmod 1\\,000\\,000\\,007 = 832\\,833\\,871$.
+
+Find $S(50\\,000\\,000)\bmod 1\\,000\\,000\\,007$.
+
+<sup>1</sup> $π$ denotes the prime-counting function, i.e. $π(n)$ is the number of primes $≤ n$.
+
+# --hints--
+
+`consecutiveDieThrows()` should return `653972374`.
+
+```js
+assert.strictEqual(consecutiveDieThrows(), 653972374);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function consecutiveDieThrows() {
+
+  return true;
+}
+
+consecutiveDieThrows();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-424-kakuro.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-424-kakuro.md
new file mode 100644
index 00000000000..90b1b38773f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-424-kakuro.md
@@ -0,0 +1,77 @@
+---
+id: 5900f5141000cf542c510026
+title: 'Problem 424: Kakuro'
+challengeType: 1
+forumTopicId: 302094
+dashedName: problem-424-kakuro
+---
+
+# --description--
+
+<img class="img-responsive center-block" alt="kakuro example" src="https://cdn.freecodecamp.org/curriculum/project-euler/kakuro.gif" style="background-color: white; padding: 10px;" />
+
+The above is an example of a cryptic kakuro (also known as cross sums, or even sums cross) puzzle, with its final solution on the right. (The common rules of kakuro puzzles can be found easily on numerous internet sites. Other related information can also be currently found at krazydad.com whose author has provided the puzzle data for this challenge.)
+
+The `testPuzzles` array contains the description of 200 such puzzles, a mix of 5x5 and 6x6 types. The first puzzle in the file is the above example which is coded as string as follows:
+
+`6,X,X,(vCC),(vI),X,X,X,(hH),B,O,(vCA),(vJE),X,(hFE,vD),O,O,O,O,(hA),O,I,(hJC,vB),O,O,(hJC),H,O,O,O,X,X,X,(hJE),O,O,X`
+
+The first character is a numerical digit indicating the size of the information grid. It would be either a 6 (for a 5x5 kakuro puzzle) or a 7 (for a 6x6 puzzle) followed by a comma (,). The extra top line and left column are needed to insert information.
+
+The content of each cell is then described and followed by a comma, going left to right and starting with the top line.
+
+`X` = Gray cell, not required to be filled by a digit.
+
+`O` (upper case letter)= White empty cell to be filled by a digit.
+
+`A` = Or any one of the upper case letters from A to J to be replaced by its equivalent digit in the solved puzzle.
+
+`( )` = Location of the encrypted sums. Horizontal sums are preceded by a lower case "h" and vertical sums are preceded by a lower case "v". Those are followed by one or two upper case letters depending if the sum is a single digit or double digit one. For double digit sums, the first letter would be for the "tens" and the second one for the "units". When the cell must contain information for both a horizontal and a vertical sum, the first one is always for the horizontal sum and the two are separated by a comma within the same set of brackets, ex.: (hFE,vD). Each set of brackets is also immediately followed by a comma.
+
+The description of the last cell is followed by a Carriage Return/Line Feed (CRLF) instead of a comma.
+
+The required answer to each puzzle is based on the value of each letter necessary to arrive at the solution and according to the alphabetical order. As indicated under the example puzzle, its answer would be 8426039571. At least 9 out of the 10 encrypting letters are always part of the problem description. When only 9 are given, the missing one must be assigned the remaining digit.
+
+You are given that the sum of the answers for the first 10 puzzles in `testPuzzles` is 64414157580.
+
+Find the sum of the answers for `puzzles` array.
+
+# --hints--
+
+`kakuro(testPuzzles)` should return `1059760019628`.
+
+```js
+assert.strictEqual(kakuro(_testPuzzles), 1059760019628);
+```
+
+# --seed--
+
+
+## --after-user-code--
+
+```js
+const _testPuzzles = [
+  '6,X,X,(vCC),(vI),X,X,X,(hH),B,O,(vCA),(vJE),X,(hFE,vD),O,O,O,O,(hA),O,I,(hJC,vB),O,O,(hJC),H,O,O,O,X,X,X,(hJE),O,O,X','7,X,X,X,X,(vJJ),(vCD),X,X,X,X,(hCG),O,O,(vCE),X,X,X,(hCI,vJB),C,O,O,X,(vB),(hJF,vJF),O,F,O,O,(hJA),F,G,O,O,X,X,(hCA),O,A,O,X,X,X,X,(hCF),O,O,X,X,X','7,X,X,X,(vE),(vCB),X,X,X,X,(hJ),O,O,(vCA),X,X,(vCH),(hCG,vCJ),O,O,O,(vJ),(hCE),O,O,O,(hJ,vGG),O,O,(hD),I,O,(hCD,vCB),H,O,O,X,(hCE),O,O,E,X,X,X,X,(hCE),O,O,X,X','6,X,X,X,(vEA),(vJF),X,X,X,(hI),O,O,(vJA),X,(vA),(hEI,vEB),O,O,O,(hIG),C,O,J,O,D,(hJD),O,O,O,X,X,X,(hJD),O,O,X,X','7,X,(vH),(vG),X,X,(vI),(vDH),(hG),B,O,(vDI),(hDB,vDE),O,O,(hBC),I,O,F,O,O,J,X,X,(hG),O,O,X,X,X,(vDG),(hH,vDD),O,O,(vDJ),(vC),(hBI),O,O,O,O,O,O,(hDJ),O,O,X,(hA),O,O','6,X,(vID),(vIJ),X,X,X,(hH),F,I,(vF),(vIA),X,(hIA),G,B,O,C,X,X,(hID),O,O,O,(vIF),X,(hIA),E,O,I,O,X,X,X,(hII),O,G','6,X,X,(vAF),(vAI),X,X,X,(hJ,vAC),O,B,(vGJ),X,(hGH),J,O,O,O,(vAF),(hAG),O,O,(hH,vF),A,D,X,(hGF),O,E,O,O,X,X,(hD),O,O,X','7,X,X,X,X,(vCE),(vGB),X,X,(vJG),(vCI),(hCD,vCJ),O,O,X,(hCI),O,O,O,O,B,(vJB),(hCF),O,O,O,(hCA,vH),O,O,(hCJ),O,O,(hJB,vCJ),O,O,O,X,(hJD),O,O,O,O,O,X,(hF),I,O,X,X,X','7,X,(vBB),(vBD),X,X,X,X,(hBB),C,E,(vEE),(vEC),X,X,(hBC),O,O,O,O,X,X,X,(hEF),H,O,A,(vJ),X,X,X,(hBD),O,O,O,(vI),X,X,(hBE),F,O,O,O,X,X,X,X,(hG),O,O','7,X,X,(vGG),(vGD),X,(vI),(vGI),X,(hGB),O,O,(hGH,vIC),O,O,X,(hGA),O,O,O,J,O,X,X,(hGI),O,O,X,X,X,(vGD),(hE,vE),O,O,(vGF),X,(hIH),O,O,O,O,O,X,(hE),A,O,(hGF),O,O,X','6,X,(vIJ),(vIE),X,X,X,(hF),O,C,(vIA),X,X,(hCA),O,O,D,(vIH),X,X,(hIB),E,O,O,(vF),X,X,(hD),O,A,O,X,X,X,(hID),O,G','6,X,(vAD),(vGI),(vI),X,X,(hB),O,O,O,(vAF),X,(hGC),O,O,O,O,(vGA),(hGE),O,O,(hJ,vB),O,O,X,(hGD),D,O,E,O,X,X,(hAI),O,C,O','6,X,X,X,(vAB),(vFA),X,X,X,(hHI),O,O,(vHJ),X,(vA),(hFJ,vHE),I,D,O,(hFH),O,O,O,O,O,(hHJ),O,O,O,X,X,X,(hC),O,J,X,X','7,X,X,X,(vJ),(vEF),X,X,X,X,(hI,vGD),C,E,(vEF),(vA),X,(hEH),O,O,O,O,O,X,(hH,vJ),O,O,(hJ,vEJ),O,O,(hD),O,A,(hEF,vEB),O,O,X,(hCC),O,O,A,O,O,X,X,X,(hH),O,O,X,X','7,X,X,X,(vAG),(vAJ),(vFH),X,X,X,(hFD),O,O,O,X,X,(vH),(hAJ,vAB),O,O,O,(vB),(hAH),O,H,O,(hC,vAI),O,O,(hE),O,O,(hAI,vAE),O,O,O,X,(hJ),O,O,O,X,X,X,(hFG),E,O,O,X,X','7,X,(vAI),(vHB),X,X,(vJE),(vAA),(hD),O,O,X,(hG),O,O,(hAJ),O,O,(vE),(hAA,vAI),O,O,X,(hHF),O,O,O,O,X,X,(hJF,vAE),O,O,O,J,(vH),(hAI),D,O,X,(hB),O,O,(hAG),O,O,X,(hAA),O,O','7,X,X,(vHJ),(vC),(vAF),X,X,X,(hHF),O,O,O,(vHI),(vHD),X,(hHB,vAB),O,O,O,O,E,(hAI),O,O,X,(hAB),O,O,(hD),O,O,(vAB),(hAI,vE),J,O,(hHH),O,O,O,B,O,X,X,X,(hG),O,A,O,X','6,X,X,(vDF),(vHE),X,X,X,(hHJ,vE),C,O,X,X,(hHI),O,O,O,(vDF),(vHH),(hFA),A,O,B,O,O,X,X,(hE),O,I,O,X,X,(hHH),O,O,X','6,X,(vA),(vA),X,X,X,(hE),O,O,(vCJ),X,X,(hG),O,O,O,(vHI),X,X,(hHC),O,O,H,(vB),X,X,(hCE),O,O,D,X,X,X,(hE),O,O','6,X,X,X,X,(vEH),(vEC),X,X,X,(hEB,vEJ),O,O,X,X,(hEC,vEF),O,O,B,X,(hDD,vEI),O,B,C,X,(hB),O,D,A,X,X,(hEC),O,O,X,X,X','6,X,X,X,X,(vIF),(vH),X,X,X,(hIJ,vGJ),B,I,X,X,(hIB,vIC),O,O,G,X,(hIA,vC),O,O,O,X,(hE),O,O,O,X,X,(hIA),E,O,X,X,X','7,X,(vC),(vFB),X,X,X,X,(hFH),O,O,(vFA),(vFJ),(vC),X,(hFJ),O,O,O,O,O,X,X,X,(hA,vJ),O,O,O,X,X,(hG),D,O,O,(vC),(vFC),X,(hBH),A,O,O,O,E,X,X,X,X,(hFH),O,I','6,X,X,(vFD),(vC),X,X,X,(hDH),E,F,(vDG),(vDD),X,(hDF,vDI),O,O,A,O,(hDG),O,O,(hDG,vDG),O,O,(hDJ),O,D,J,O,X,X,X,(hJ),E,O,X','6,X,X,X,(vE),(vGH),(vIC),X,X,(hD,vIG),O,O,A,X,(hIF,vJ),O,J,E,O,(hJ),O,D,(hGG,vGH),O,O,(hGG),O,O,O,O,X,(hIC),O,O,O,X,X','7,X,X,X,X,(vAG),(vJA),(vH),X,X,X,(hAJ,vDJ),O,O,O,X,X,(hJF),O,O,O,O,X,X,(hG),D,O,X,X,X,(vJH),(hJE,vJD),C,I,X,X,(hAE),B,O,O,O,X,X,(hAJ),O,O,E,X,X,X','7,X,X,X,X,(vGG),(vIA),(vGF),X,X,X,(hGF),O,O,D,X,X,X,(hGJ,vIB),O,O,O,X,X,(hGH,vGD),O,O,O,X,X,(hII,vC),O,J,O,X,X,(hIH),J,O,O,X,X,X,(hGE),O,I,O,X,X,X','6,X,X,(vFA),(vEC),X,X,X,(hI,vFI),F,O,X,X,(hDE),O,O,O,(vFF),(vFF),(hDI),G,J,O,F,O,X,X,(hFJ),O,D,O,X,X,(hFH),J,A,X','7,X,X,X,X,X,(vID),(vBB),X,X,X,X,(hBC),O,I,X,X,(vIH),(vBH),(hBF,vF),O,O,X,(hIE,vD),O,O,I,O,O,(hAG),O,O,O,O,F,X,(hA),O,O,X,X,X,X,(hD),O,O,X,X,X,X','7,X,(vCD),(vCC),X,X,X,X,(hE),B,C,(vCE),X,X,X,(hCD),O,O,O,(vE),(vCG),X,X,(hCH),O,O,O,O,X,X,(hFC),B,J,G,O,(vCC),X,X,X,(hCI),O,O,O,X,X,X,X,(hG),O,O','7,X,X,X,(vID),(vD),(vFB),X,X,X,(hIB,vID),O,O,O,X,X,(hJE,vIA),J,C,O,D,(vF),(hIB),O,O,X,(hIG),O,O,(hIJ),O,O,(vD),(hA,vID),O,O,X,(hJF),O,O,O,O,X,X,(hIE),O,O,O,X,X','7,X,X,(vAC),(vAH),X,X,X,X,(hD),O,O,(vAD),X,X,X,(hCH,vAD),O,O,O,(vAA),(vF),(hAC),O,H,(hAB,vAJ),O,O,A,(hAE),O,O,O,(hD,vAD),O,O,X,X,(hAC),O,O,O,X,X,X,X,(hG),O,O,X','6,X,X,(vBB),(vBE),X,X,X,(hBH),O,I,(vBG),(vBB),X,(hHE,vBD),H,D,O,O,(hBA),C,O,(hA,vG),O,O,(hBF),I,O,O,O,X,X,X,(hG),O,O,X','6,X,X,(vEC),(vD),X,X,X,(hD,vH),O,O,(vIB),X,(hIA),O,O,O,O,(vE),(hII),O,F,(hII,vIG),O,O,X,(hIH),O,O,O,O,X,X,(hIA),O,D,X','6,X,X,X,X,(vEH),(vEG),X,X,X,(hEB,vEF),O,O,X,X,(hAC,vG),O,B,O,X,(hEE,vEC),O,D,O,X,(hEE),O,O,O,X,X,(hEJ),D,O,X,X,X','6,X,(vD),(vB),X,X,X,(hA),O,O,(vE),X,X,(hE),A,O,O,(vCJ),X,X,(hCH),O,A,O,(vCI),X,X,(hB),O,D,O,X,X,X,(hCB),G,O','7,X,X,X,X,(vHJ),(vIF),(vIB),X,X,X,(hIH,vJI),O,O,J,X,X,(hIA),O,O,O,F,X,X,(hIG),O,C,X,X,X,(vD),(hA,vIB),O,J,X,X,(hHB),O,O,O,O,X,X,(hHB),O,O,O,X,X,X','7,X,X,X,(vBJ),(vIB),X,X,X,(vIF),(hBB,vBB),O,O,(vBA),X,(hIC),O,O,O,O,O,(vBA),(hBD),O,O,(hC,vC),O,O,O,(hBJ),E,O,O,(hBC,vBI),G,H,X,(hBA),O,O,O,O,O,X,X,(hBF),O,O,X,X','7,X,(vHI),(vHE),X,X,X,X,(hA),O,O,X,X,X,X,(hHG),O,O,(vHH),(vHE),(vIJ),X,(hHA),O,O,O,O,O,(vHI),X,(hID),H,O,O,B,I,X,X,X,X,(hHB),F,O,X,X,X,X,(hHE),O,H','6,X,X,(vAJ),(vAJ),X,X,X,(hAF,vAA),G,A,X,X,(hDA),O,O,O,(vDE),(vAH),(hAJ),O,O,O,O,I,X,X,(hAG),D,C,O,X,X,(hAI),O,O,X','6,X,X,X,X,(vDH),(vDA),X,X,X,(hG,vDG),O,E,X,X,(hBJ,vBC),O,O,O,X,(hBI,vE),O,E,O,X,(hE),O,O,O,X,X,(hDH),O,E,X,X,X','6,X,X,X,X,(vHJ),(vHH),X,X,X,(hHE,vCC),O,O,X,X,(hF,vG),A,O,O,X,(hHC,vHJ),O,B,O,X,(hHH),O,O,O,X,X,(hHI),O,O,X,X,X','7,X,(vJ),(vDG),X,X,(vDF),(vEF),(hC),E,B,X,(hEA),O,O,(hEE),C,O,(vH),(hED,vEF),A,O,X,(hEC),O,O,O,O,X,X,(hDD,vEF),O,O,O,O,(vEA),(hEJ),O,F,X,(hJ),O,O,(hEF),O,O,X,(hEF),O,O','7,X,X,X,(vCC),(vD),X,X,X,(vJE),(hI,vCH),O,O,(vBF),X,(hCC),O,O,O,O,A,(vJB),(hCB),G,O,O,(hJA,vJF),O,O,(hJA),O,O,(hG,vH),O,O,O,X,(hCE),O,O,O,O,O,X,X,(hH),O,O,X,X','7,X,X,(vEI),(vEB),(vG),X,X,X,(hEF),E,O,O,(vHE),X,X,(hEF,vH),O,O,O,O,(vEI),(hH),O,O,X,(hEH),O,B,(hG),O,O,(vG),(hEI,vED),O,O,X,(hAG),C,O,O,O,X,X,X,(hEE),O,O,O,X','6,X,X,X,X,(vJE),(vF),X,X,X,(hI,vJJ),O,O,X,X,(hEC,vJJ),H,O,O,X,(hF,vJB),O,O,O,X,(hJI),A,C,E,X,X,(hJD),O,J,X,X,X','6,X,X,X,(vH),(vAE),X,X,X,(hCB,vCJ),O,O,(vCB),X,(hCA,vD),O,O,O,O,(hD),C,O,(hCC,vJ),O,O,(hAB),A,O,F,O,X,X,(hB),G,O,X,X','6,X,X,(vEC),(vEG),X,X,X,(hEF),O,O,(vFC),(vEI),X,(hHJ,vJ),E,O,O,A,(hJ),O,O,(hEA,vEA),O,O,(hHH),O,O,O,B,X,X,X,(hEF),O,O,X','7,X,(vEI),(vEC),X,X,X,X,(hH),O,O,X,X,X,X,(hED),O,O,(vEB),(vEG),(vGB),X,(hEJ),O,O,O,O,O,(vD),X,(hIA),O,O,O,O,C,X,X,X,X,(hA),O,I,X,X,X,X,(hEB),A,O','7,X,X,X,(vF),(vG),(vIB),X,X,(vG),(hBA,vIH),J,I,D,X,(hBG),O,O,O,O,O,(vBG),(hA),O,O,X,(hE),O,O,(hBB),O,C,(vA),(hBI,vBE),O,O,X,(hBA),O,O,O,O,O,X,(hBF),O,O,O,X,X','7,X,X,(vEF),(vDI),X,X,X,X,(hDG),O,O,(vDA),X,X,X,(hEA,vG),O,O,O,(vEJ),(vJ),(hF),O,G,(hDH,vDI),O,O,F,(hED),O,O,O,(hDD,vB),O,O,X,X,(hDB),O,O,A,X,X,X,X,(hH),O,O,X','7,X,X,X,X,(vJH),(vD),(vAJ),X,X,X,(hAC,vDH),O,O,O,X,X,(hAA),O,O,O,O,X,X,(hC),F,O,X,X,X,(vC),(hAJ,vAA),I,H,X,X,(hJA),O,D,O,G,X,X,(hJB),O,C,O,X,X,X','6,X,X,X,(vDC),(vG),X,X,X,(hA),O,O,(vCH),X,(vCI),(hCB,vB),O,O,O,(hDF),O,H,O,O,O,(hH),O,O,O,X,X,X,(hH),J,O,X,X','6,X,X,(vCG),(vGA),X,X,X,(hE),O,O,(vGG),(vGB),X,(hCI,vF),O,O,O,I,(hGI),O,O,(hI,vD),O,A,(hGH),O,B,O,O,X,X,X,(hA),O,O,X','6,X,X,X,(vJ),(vHF),X,X,(vF),(hHG,vHD),O,A,X,(hHI),A,O,O,O,(vHE),(hB),G,O,(hD,vHE),O,F,X,(hGJ),O,O,O,O,X,(hHD),O,O,X,X','6,X,X,X,X,(vBD),(vD),X,X,X,(hD,vBB),O,O,X,X,(hI,vHD),O,O,O,X,(hHD,vBE),O,O,A,X,(hHF),C,O,G,X,X,(hBI),O,O,X,X,X','7,X,(vJ),(vFB),(vDB),X,X,X,(hFC),O,O,O,(vFE),X,X,(hFB),O,O,O,O,X,X,X,X,(hG),I,O,X,X,X,X,(hA),O,O,(vFG),(vE),X,X,(hDD),O,O,O,A,X,X,X,(hFD),D,E,J','6,X,X,X,(vAD),(vAH),X,X,(vB),(hF,vEB),O,O,X,(hED),O,O,O,O,(vD),(hD),O,O,(hJ,vI),O,O,X,(hEH),O,A,O,C,X,(hB),G,O,X,X','6,X,X,X,X,(vFG),(vFB),X,X,X,(hFD,vB),O,O,X,X,(hFG,vFG),O,O,O,X,(hI,vH),O,O,C,X,(hGA),E,H,O,X,X,(hD),O,G,X,X,X','7,X,X,X,(vBH),(vBB),X,X,X,X,(hBJ,vBJ),I,O,(vHE),(vI),X,(hBF,vBA),O,O,O,O,O,(hBE),O,D,X,(hA),O,O,(hBC),O,O,(vA),(hBB,vBH),O,O,(hDA),B,H,O,O,O,X,X,X,(hI),O,O,X,X','7,X,X,X,(vEC),(vD),X,X,X,(vJ),(hEB,vEJ),O,O,X,X,(hFC),O,O,O,F,(vEG),X,(hG),O,O,(hH,vFI),O,E,(vEH),X,(hEB),A,O,(hED,vJ),O,O,X,X,(hFI),O,O,O,O,X,X,(hED),O,O,X,X','6,X,(vGH),(vGG),X,X,X,(hGE),O,O,(vFI),(vGJ),X,(hGF),O,O,D,O,X,X,(hGB),O,C,O,(vGG),X,(hFG),O,O,O,O,X,X,X,(hE),O,I','7,X,X,X,(vF),(vGI),X,X,X,(vJ),(hB,vGA),H,G,X,X,(hHF),O,O,O,A,(vHH),X,(hB),O,O,(hGB,vGA),C,O,(vC),X,(hGC),O,O,(hGI,vGF),O,O,X,X,(hHB),O,E,O,O,X,X,(hA),O,O,X,X','7,X,X,X,X,X,(vED),(vIG),X,X,X,X,(hEC),O,O,X,X,(vAC),(vA),(hH,vEG),O,O,X,(hAE,vB),O,O,H,O,O,(hIJ),O,O,O,B,O,X,(hEC),O,O,X,X,X,X,(hEI),O,O,X,X,X,X','7,X,X,(vAI),(vAA),X,X,X,X,(hAD,vAG),O,O,(vAE),X,X,(hAH),O,O,O,O,(vBH),(vD),(hG),O,O,(hI,vE),O,O,O,(hAI),O,O,O,(hG,vAC),D,F,X,X,(hAH),O,O,O,O,X,X,X,(hAJ),O,O,X','7,X,X,(vGD),(vFB),(vJ),X,X,X,(hGD),O,O,O,(vFA),(vGG),X,(hFA),O,O,O,O,O,X,(hGE,vGF),O,O,(hH,vFB),O,O,(hH),O,G,(hGC,vD),O,G,X,(hEB),O,O,O,O,O,X,X,X,(hGC),O,A,O,X','6,X,X,(vAD),(vEE),X,X,X,(hEC),G,O,(vAJ),(vH),X,(hEC,vEG),O,A,O,O,(hEG),F,O,(hEG,vEG),O,O,(hAB),O,E,F,A,X,X,X,(hEG),O,O,X','6,X,X,X,X,(vIB),(vJ),X,X,X,(hB,vIJ),O,O,X,X,(hE,vIF),O,O,C,X,(hFC,vIF),O,A,O,X,(hG),O,O,H,X,X,(hIJ),O,O,X,X,X','6,X,X,X,(vIB),(vEB),X,X,X,(hD,vAE),O,O,(vE),X,(hIJ,vE),O,O,O,O,(hII),O,O,(hJ,vC),H,O,(hAE),O,O,G,J,X,X,(hC),O,O,X,X','6,X,X,(vFF),(vB),X,X,X,(hC,vI),O,J,(vJE),X,(hJJ),O,O,I,G,(vA),(hJJ),O,O,(hJD,vJE),O,O,X,(hJB),O,O,F,O,X,X,(hJH),C,J,X','7,X,X,X,(vEI),(vJI),X,X,X,X,(hJA),O,O,(vJE),(vJJ),X,X,(hJI,vJB),O,E,O,D,X,(hJI,vC),O,H,(hJB,vJE),O,O,(hB),O,O,(hF,vD),O,O,X,(hJB),O,O,O,O,X,X,X,X,(hJE),O,O,X,X','7,X,(vJB),(vFD),X,X,(vFE),(vH),(hJF),O,O,X,(hH),O,O,(hJC),O,O,(vH),(hJF,vJF),O,O,X,(hJI),H,O,O,O,X,X,(hFJ,vJJ),J,O,O,O,(vJA),(hA),G,O,X,(hJF),O,C,(hJC),O,O,X,(hD),O,O','7,X,(vI),(vDH),X,X,X,X,(hB),O,I,X,X,X,X,(hC),O,O,(vA),(vI),(vDJ),X,(hDH),O,B,O,O,O,(vDH),X,(hGG),O,O,O,J,O,X,X,X,X,(hHH),B,O,X,X,X,X,(hHE),O,O','6,X,X,(vDI),(vE),X,X,X,(hA,vDA),E,O,(vHI),X,(hHI),F,A,O,O,(vDF),(hDD),O,O,(hDJ,vDJ),O,O,X,(hDG),O,O,H,O,X,X,(hB),O,D,X','6,X,(vJ),(vDH),X,X,X,(hDA),G,O,(vDA),(vDB),X,(hDB),O,O,I,F,X,X,(hG),O,F,O,(vDI),X,(hED),G,O,O,F,X,X,X,(hDE),O,H','6,X,X,(vCJ),(vD),X,X,X,(hG),O,O,(vAD),(vAE),X,(hCC,vI),O,O,A,O,(hJ),O,F,(hAD,vAD),I,H,(hCD),O,O,O,F,X,X,X,(hAJ),O,G,X','7,X,X,X,X,(vEF),(vEC),(vF),X,X,X,(hED,vEB),O,O,O,X,X,(hEB),O,O,O,O,X,X,(hC),O,D,X,X,X,(vI),(hB,vEE),O,O,X,X,(hEB),E,H,D,O,X,X,(hHJ),O,G,O,X,X,X','7,X,X,X,X,(vJF),(vIC),X,X,X,(vIA),(hD,vJE),O,O,X,X,(hIJ,vD),J,O,O,D,(vG),(hJC),I,O,O,(hJA,vC),O,O,(hJF),J,C,(hJF,vJE),O,O,O,X,(hIB),O,O,O,O,X,X,(hJF),O,O,X,X,X','6,X,(vH),(vJE),X,X,X,(hC),J,O,(vJJ),(vJC),X,(hJJ),A,I,O,H,X,X,(hD),O,O,A,(vC),X,(hAI),F,B,O,O,X,X,X,(hC),J,O','7,X,(vA),(vEE),X,X,(vD),(vF),(hEC),O,O,(vIH),(hI,vEB),O,O,(hBD),O,O,O,O,F,O,X,X,(hA),O,O,X,X,X,(vJ),(hEJ,vEG),F,O,(vA),(vG),(hBG),O,O,O,O,O,O,(hEH),O,O,X,(hG),O,O','6,X,X,X,(vFG),(vFC),X,X,(vE),(hFE,vFF),A,O,X,(hBF),O,O,O,O,(vH),(hE),O,O,(hD,vFF),I,O,X,(hFF),O,O,E,D,X,(hFI),O,O,X,X','6,X,X,(vHA),(vFH),X,X,X,(hFF),O,O,(vFH),(vE),X,(hDI,vFG),O,O,O,O,(hFG),B,O,(hC,vFB),O,O,(hDC),O,G,O,F,X,X,X,(hFF),O,O,X','7,X,X,(vBE),(vBB),(vA),X,X,X,(hH),O,O,O,(vBA),(vH),X,(hGI,vBB),O,J,O,O,O,(hBG),O,O,X,(hI),O,O,(hC),O,O,(vBG),(hE,vBD),H,C,(hBI),O,O,O,O,O,X,X,X,(hGG),O,O,O,X','7,X,X,X,X,X,(vHC),(vF),X,X,X,X,(hF,vC),O,E,X,X,(vEJ),(hEF,vEG),F,O,H,X,(hHD),C,O,O,O,X,X,(hHC,vI),A,O,O,O,X,(hJ),D,O,O,X,X,X,(hF),O,O,X,X,X,X','6,X,X,(vH),(vDC),X,X,X,(hCI,vCD),O,O,X,X,(hH),O,O,O,(vCA),(vCB),(hCJ),O,I,O,D,E,X,X,(hDI),E,H,O,X,X,(hG),O,O,X','7,X,X,X,X,(vJ),(vHE),X,X,X,X,(hHA,vHF),O,B,(vHE),X,X,(hEC,vHG),O,O,O,O,X,(hHE,vHG),O,O,(hA,vHB),O,O,(hJ),O,O,(hHE,vJ),O,O,X,(hED),O,J,O,O,X,X,X,(hB),O,O,X,X,X','6,X,X,(vJG),(vA),X,X,X,(hI),B,O,(vJC),(vJH),X,(hJH,vJC),O,E,O,O,(hB),O,O,(hJJ,vF),O,O,(hCE),O,O,D,I,X,X,X,(hB),O,H,X','6,X,X,X,X,(vDG),(vHH),X,X,(vDH),(hJ,vHB),O,O,X,(hJF),O,O,O,O,X,(hHF,vE),O,O,O,X,(hDJ),H,O,O,I,X,(hHC),G,O,X,X,X','7,X,(vAI),(vHC),X,X,X,X,(hD),O,G,X,X,(vHI),(vG),(hAJ),O,O,(vB),(hH,vAH),O,O,X,(hHF,vH),O,O,F,O,O,(hCA),O,O,O,O,O,(vF),(hH),O,O,X,(hG),O,O,X,X,X,X,(hAH),O,O','7,X,X,X,X,(vFG),(vFI),X,X,X,X,(hFI,vFB),O,O,(vFJ),X,(vFA),(hFG,vGA),O,B,O,O,(hIB),O,O,O,(hH,vJ),O,O,(hJ),O,O,(hFD,vD),O,C,O,(hII),O,O,O,O,X,X,X,(hE),O,O,X,X,X','7,X,X,X,(vI),(vEG),(vFD),X,X,(vED),(hA,vEB),O,O,O,X,(hJC),O,O,A,O,O,X,(hEG),O,O,(hEG,vEC),O,O,(vB),X,(hH),O,O,(hJ,vEB),O,O,X,(hEI),O,O,O,O,J,X,(hFF),O,H,O,X,X','6,X,X,(vEI),(vEB),X,X,X,(hEC,vB),O,O,(vEB),X,(hHC),J,O,O,F,(vEC),(hH),O,O,(hB,vEC),O,O,X,(hEH),O,O,O,O,X,X,(hEA),D,O,X','6,X,X,(vAF),(vBF),X,X,X,(hBI),O,G,(vAD),(vBD),X,(hBI,vF),O,J,O,E,(hBB),A,G,(hBI,vBI),O,H,(hAJ),B,O,O,O,X,X,X,(hBA),O,O,X','6,X,(vCB),(vJ),X,X,X,(hCE),A,O,(vCI),X,X,(hCG),D,O,O,(vCC),X,X,(hCA),O,O,O,(vB),X,X,(hB),O,E,G,X,X,X,(hG),O,H','7,X,X,X,X,X,(vFI),(vHG),X,X,X,X,(hHJ,vHH),O,O,X,X,(vHC),(hHD,vHG),O,O,O,X,(hHH),O,O,O,O,X,X,(hFE,vHC),O,O,O,D,X,(hHE),H,O,O,X,X,X,(hHE),I,A,X,X,X,X','7,X,X,(vFA),(vC),X,X,X,X,(hE),O,B,(vAC),(vGJ),X,X,(hFF,vG),O,O,O,O,(vAI),(hAA),O,D,(hAB,vAC),O,O,O,(hAH),O,O,O,(hAB,vAB),O,O,X,(hFJ),O,O,O,O,X,X,X,X,(hAH),O,J,X','7,X,X,X,(vIF),(vIB),X,X,X,X,(hID),O,O,(vC),X,X,(vIF),(hIH,vEE),O,O,O,(vII),(hEB),O,O,O,(hIB,vIF),D,J,(hIF),O,O,(hII,vIE),O,O,O,X,(hJ),O,G,O,X,X,X,X,(hIF),O,O,X,X','7,X,(vDJ),(vDB),X,X,X,X,(hDJ),O,O,(vDF),(vCE),(vI),X,(hCH),O,O,O,O,O,X,X,X,(hDC,vDB),O,A,G,X,X,(hFE),O,O,O,(vDJ),(vI),X,(hCF),O,O,O,O,O,X,X,X,X,(hDE),O,O','6,X,X,(vCI),(vJ),X,X,X,(hA),O,E,(vEG),(vCC),X,(hEG,vCF),O,O,D,O,(hJ),C,G,(hB,vCC),C,O,(hED),O,O,A,O,X,X,X,(hCD),O,O,X','6,X,X,X,(vG),(vFE),X,X,X,(hG,vBC),O,O,(vBC),X,(hFJ,vC),O,E,O,I,(hG),O,O,(hBF,vBC),O,O,(hEJ),O,O,O,O,X,X,(hBA),D,O,X,X','6,X,X,(vAJ),(vE),X,X,X,(hFH,vH),O,O,(vFA),X,(hFH),O,O,O,O,(vFI),(hI),O,C,(hFI,vFD),O,O,X,(hAC),O,O,I,G,X,X,(hC),O,O,X','6,X,X,X,(vE),(vCJ),X,X,(vFF),(hA,vHJ),C,O,X,(hFC),O,O,O,F,(vD),(hFI),O,O,(hFE,vFJ),O,O,X,(hFG),O,O,O,O,X,(hFD),O,O,X,X','7,X,X,X,(vBJ),(vBI),X,X,X,X,(hA),O,O,(vCH),(vBJ),X,(vCJ),(hCB,vG),H,O,I,B,(hBA),O,O,O,(hBE,vG),O,O,(hBB),F,O,(hBE,vBI),O,O,O,(hBI),O,O,O,O,X,X,X,X,(hBC),O,O,X,X','6,X,X,(vCJ),(vD),X,X,X,(hH),O,O,(vBD),(vJ),X,(hCI,vCH),O,J,F,O,(hCG),O,E,(hA,vCD),O,F,(hBF),O,O,O,O,X,X,X,(hCG),O,O,X','6,X,X,X,X,(vJB),(vG),X,X,X,(hA,vH),I,O,X,X,(hCD,vCG),O,O,B,X,(hCF,vCD),O,O,O,X,(hJD),O,H,O,X,X,(hB),O,O,X,X,X','7,X,(vI),(vEH),X,X,(vCC),(vF),(hG),O,O,X,(hH),O,C,(hJ),O,O,(vAD),(hAG,vG),O,O,X,(hEI),F,O,O,O,X,X,(hAD,vAB),O,O,I,O,(vI),(hG),O,O,X,(hC),O,O,(hAJ),O,O,X,(hAA),O,O','7,X,X,X,X,X,(vEC),(vEA),X,X,X,X,(hB),O,O,X,X,(vDF),(vEH),(hEC,vH),H,O,X,(hEA,vI),O,B,E,O,O,(hDB),E,J,O,D,O,X,(hEH),O,A,X,X,X,X,(hI),O,O,X,X,X,X','6,X,X,X,(vBC),(vBC),X,X,X,(hBJ,vEC),H,O,(vBB),X,(hBE,vA),D,J,O,O,(hC),O,O,(hBE,vBG),O,O,(hEG),H,O,B,O,X,X,(hBI),O,O,X,X','7,X,(vE),(vCF),X,X,X,X,(hJ),O,O,(vFB),X,X,X,(hCJ),O,O,A,(vFE),(vCA),X,X,(hIH),O,O,O,O,X,X,(hFF),O,O,O,B,(vFA),X,X,X,(hCI),O,O,O,X,X,X,X,(hFG),O,O','7,X,X,X,X,(vBH),(vH),X,X,X,X,(hI),O,O,(vE),X,X,X,(hJG,vBF),O,O,O,X,(vH),(hBA,vJE),O,O,O,O,(hDG),O,O,O,O,X,X,(hBG),O,F,O,X,X,X,X,(hA),J,O,X,X,X','7,X,X,X,X,X,(vIC),(vA),X,X,X,(vII),(hG,vIH),F,I,X,X,(hIG),O,O,O,D,X,X,(hC,vC),O,O,J,X,X,(hIF,vE),O,G,A,X,X,(hIH),O,O,O,O,X,X,(hJ),F,D,X,X,X,X','7,X,X,X,(vH),(vCJ),X,X,X,(vCG),(hCB,vEG),O,O,X,X,(hEF),O,I,O,O,(vCI),X,(hCD),O,J,(hCB,vCJ),E,O,(vCC),X,(hCE),O,O,(hCI,vH),O,O,X,X,(hEB),O,O,O,O,X,X,(hD),O,O,X,X','6,X,(vGA),(vBE),X,X,X,(hGC),H,O,(vGF),X,X,(hGG),O,O,O,(vGD),X,X,(hBG),O,J,O,(vGD),X,X,(hGD),O,O,E,X,X,X,(hGH),O,O','6,X,X,(vEE),(vEJ),X,X,X,(hI,vEF),O,O,(vEH),X,(hEA),O,O,O,E,(vB),(hEE),O,O,(hB,vB),O,O,X,(hEG),A,O,I,O,X,X,(hA),D,B,X','6,X,(vJ),(vHA),X,X,X,(hHH),D,O,(vHG),X,X,(hI),O,O,F,(vDG),X,X,(hDJ),O,O,O,(vHF),X,X,(hHF),O,O,E,X,X,X,(hHE),B,O','6,X,X,X,X,(vFI),(vE),X,X,X,(hH,vA),J,I,X,X,(hGF,vD),O,O,F,X,(hGF,vC),O,O,A,X,(hD),O,O,O,X,X,(hD),O,O,X,X,X','7,X,X,(vHG),(vE),X,X,X,X,(hGD),O,O,(vGA),(vHC),(vAJ),X,(hGD,vAC),O,O,O,O,O,(hGC),O,O,(hAA,vGC),O,O,O,(hAC),O,O,F,(hGD,vD),O,O,(hHB),O,O,O,O,O,X,X,X,X,(hI),O,D,X','7,X,X,(vBG),(vBJ),X,(vBD),(vE),X,(hC),O,O,(hBB,vAG),O,C,X,(hBE),O,O,O,O,D,X,(hBG),O,O,O,(vBE),X,X,(vE),(hBI,vJ),O,O,O,X,(hCG),F,G,O,O,O,X,(hC),O,O,(hBJ),O,O,X','7,X,X,X,X,X,(vEA),(vJJ),X,X,(vED),(vJI),(hF),O,O,X,(hB),O,O,(hJH,vB),O,O,X,(hED),O,B,O,O,X,X,(hJI,vJI),O,O,C,O,X,(hJH),O,O,(hJJ),O,O,X,(hF),J,E,X,X,X,X','6,X,(vF),(vED),X,X,X,(hEI),O,O,(vEA),X,X,(hEJ),O,O,J,(vB),X,X,(hB),O,O,O,(vG),X,X,(hJ),B,O,C,X,X,X,(hF),O,E','6,X,X,X,X,(vCH),(vCD),X,X,X,(hG,vCH),O,O,X,X,(hCH,vCI),O,O,O,X,(hFA,vCE),O,O,J,X,(hFF),O,O,O,X,X,(hI),F,C,X,X,X','6,X,X,(vCH),(vA),X,X,X,(hE,vE),D,O,(vAG),(vHC),(hHB),O,O,C,O,I,(hHA),O,O,(hE,vJ),O,O,(hCH),A,O,O,O,O,X,X,(hHD),O,O,X','7,X,(vF),(vDG),(vGD),X,X,X,(hA),O,D,O,(vI),(vGE),X,(hDG),O,C,O,O,O,X,(hGC),H,O,(hH,vA),O,O,(vGF),X,(hH),O,O,(hGB,vGD),O,O,X,(hDH),O,D,O,O,O,X,X,X,(hA),O,O,G','7,X,X,X,X,(vIG),(vIG),X,X,X,X,(hCJ),O,O,(vCE),X,X,X,(hIE,vEA),O,O,O,X,(vJ),(hEA,vIE),O,O,O,O,(hCH),O,F,O,O,X,X,(hCH),I,B,O,X,X,X,X,(hCH),O,O,X,X,X','7,X,X,X,X,(vJ),(vDB),X,X,X,X,(hDG,vH),O,O,X,X,(vB),(hJ,vEB),E,O,O,(vG),(hDJ),O,F,D,(hI,vDC),O,O,(hA),O,O,(hJ,vA),O,O,I,X,(hDA),O,O,O,X,X,X,(hDH),O,O,X,X,X','6,X,X,X,(vEE),(vJA),(vEI),X,X,(hD,vEE),O,F,O,X,(hED,vEC),O,O,O,O,(hJ),O,O,(hEH,vEI),O,O,(hIB),O,O,O,O,X,(hII),O,O,O,X,X','6,X,(vE),(vGH),X,X,X,(hC),O,J,(vFJ),X,X,(hGH),O,O,O,(vJ),X,X,(hFA),B,O,I,(vFF),X,X,(hFG),O,O,O,X,X,X,(hB),F,G','6,X,X,(vIF),(vIJ),X,X,X,(hD,vIC),O,O,X,X,(hIB),O,O,O,(vIG),(vA),(hBF),O,O,F,I,O,X,X,(hE),D,O,F,X,X,(hIF),O,C,X','7,X,(vCD),(vB),X,X,X,X,(hII),O,D,(vA),X,X,X,(hIJ),O,O,O,(vII),X,X,(hID),O,O,O,O,(vIJ),(vCJ),X,X,(hCA),H,O,F,O,X,X,X,(hA),O,O,G,X,X,X,X,(hII),J,O','7,X,(vC),(vFF),X,X,(vHF),(vD),(hFD),O,O,(vHG),(hA,vFJ),O,O,(hHF),O,O,O,O,O,O,X,X,(hFG,vFH),O,O,O,X,X,(hFB,vI),O,O,O,(vFB),(vB),(hIG),O,O,O,O,D,J,(hG),O,I,X,(hFE),O,O','7,X,(vHJ),(vDE),X,X,(vDI),(vHH),(hHG),O,J,(vHJ),(hJ),O,O,(hHE),O,O,O,(hHJ,vB),O,O,X,(hHH),O,O,O,O,X,X,(hDJ,vHA),D,O,E,O,(vF),(hHJ),O,O,(hA),O,O,E,(hHA),O,O,X,(hI),O,O','7,X,(vEH),(vFA),X,X,X,X,(hEB),O,O,(vFA),X,X,X,(hFD),O,O,O,(vEE),(vID),X,X,(hFB),O,O,O,O,X,X,(hFJ),O,O,O,O,(vEE),X,X,X,(hJ),O,B,O,X,X,X,X,(hEH),C,O','6,X,(vJ),(vE),X,X,X,(hA),B,C,(vCJ),X,X,(hCG),O,O,O,(vCD),X,X,(hHF),O,O,O,(vJ),X,X,(hE),O,O,H,X,X,X,(hCE),O,O','6,X,(vGC),(vGH),X,X,X,(hGG),O,O,(vGB),X,X,(hGI),E,O,I,(vGG),X,X,(hIJ),O,C,O,(vA),X,X,(hD),G,O,O,X,X,X,(hD),O,O','6,X,X,X,X,(vIG),(vII),X,X,X,(hE,vIA),I,G,X,X,(hGJ,vGF),O,C,O,X,(hIE,vII),D,O,O,X,(hGJ),O,B,O,X,X,(hA),O,J,X,X,X','6,X,X,X,X,(vIA),(vE),X,X,(vJB),(hB,vII),I,J,X,(hIF),O,O,O,H,X,(hIB,vG),D,J,O,X,(hJG),C,O,O,F,X,(hB),O,O,X,X,X','7,X,X,X,(vDB),(vGG),X,X,X,X,(hGH),O,O,(vGA),(vGA),X,X,(hGF,vGA),O,O,O,O,X,(hGA,vGE),B,O,(hGD,vI),O,O,(hJ),O,I,(hGE,vGG),O,O,X,(hDA),O,D,O,O,X,X,X,X,(hF),O,O,X,X','6,X,X,X,(vFB),(vI),X,X,X,(hGF),O,O,(vGA),X,(vH),(hGA,vFD),O,O,O,(hFF),O,A,O,O,C,(hGG),O,J,O,X,X,X,(hGH),O,D,X,X','6,X,X,(vGA),(vA),X,X,X,(hB,vGE),O,O,(vHJ),X,(hBD),O,O,O,O,(vGH),(hGC),O,O,(hGJ,vGE),O,O,X,(hGG),O,F,O,O,X,X,(hGC),O,O,X','7,X,X,(vCE),(vG),(vI),X,X,X,(hEE),A,O,E,(vCD),(vCH),X,(hEG,vCD),O,O,O,O,O,(hA),G,C,X,(hEH),O,O,(hEE),O,O,(vI),(hA,vD),O,O,(hCF),O,O,O,O,O,X,X,X,(hED),O,O,B,X','7,X,(vG),(vDC),X,(vBA),(vDG),X,(hJ),O,G,(hDA,vBA),O,O,X,(hBC),O,O,G,O,O,X,X,(hDH),O,O,O,(vG),X,X,X,(hG,vDI),O,O,O,(vJ),X,(hBB),E,O,O,O,O,X,(hH),O,J,(hB),O,O','6,X,X,X,(vJG),(vCG),X,X,(vJG),(hJB,vJH),O,O,X,(hJH),I,B,O,O,(vD),(hJB),O,O,(hA,vJG),O,O,X,(hJB),O,B,O,O,X,(hF),I,C,X,X','7,X,(vA),(vE),X,X,(vD),(vB),(hF),O,O,(vJJ),(hI,vGD),O,O,(hGD),O,O,O,O,I,O,X,X,(hJI),O,O,X,X,X,(vJE),(hA,vF),I,O,(vD),(vJJ),(hGA),O,O,O,J,O,O,(hH),O,O,X,(hI),O,O','7,X,X,(vEH),(vEF),X,X,X,X,(hEI,vIH),O,O,(vEI),X,X,(hEI),O,O,O,O,(vIE),(vEJ),(hD),O,O,(hEH,vH),O,O,O,(hEC),O,O,O,(hD,vC),H,G,X,X,(hIA),O,O,O,O,X,X,X,(hD),E,O,X','7,X,X,X,X,X,(vEA),(vCJ),X,X,X,X,(hCD,vCC),O,O,X,X,(vCI),(hCJ,vEH),O,O,O,X,(hDH),O,J,B,O,X,X,(hCH,vD),O,O,O,O,X,(hCJ),O,O,O,X,X,X,(hJ),O,G,X,X,X,X','7,X,(vB),(vFF),X,(vEI),(vFE),X,(hH),O,O,(hFC,vIB),G,O,X,(hFC),O,O,O,O,O,X,X,X,(hFH),O,D,X,X,X,X,(hFF,vFG),O,O,(vFE),(vFH),X,(hEE),O,O,J,O,O,X,(hFG),O,O,(hFG),O,O','6,X,(vHE),(vII),X,X,X,(hHB),O,O,(vHF),(vHJ),X,(hHD),B,O,O,O,X,X,(hG),H,O,O,(vHE),X,(hCA),O,O,E,B,X,X,X,(hHB),O,G','6,X,(vH),(vAF),X,X,X,(hAC),O,O,(vAD),X,X,(hDI),J,O,O,(vAH),X,X,(hAC),O,O,O,(vAI),X,X,(hH),O,O,B,X,X,X,(hAH),O,E','6,X,(vC),(vHA),X,X,X,(hC),O,J,(vHA),X,X,(hF),J,O,O,(vHC),X,X,(hI),O,J,O,(vF),X,X,(hEJ),O,O,B,X,X,X,(hG),O,O','6,X,X,X,(vFJ),(vJC),X,X,(vFF),(hFF,vJE),O,O,X,(hFH),O,F,O,O,(vD),(hFI),O,C,(hE,vH),D,O,X,(hJC),O,O,O,A,X,(hFG),O,J,X,X','7,X,X,X,X,X,(vDE),(vBB),X,(vC),(vDF),X,(hBF),O,O,(hH),O,O,(vE),(hH,vBI),B,O,(hDF),O,O,O,O,D,(vE),X,(hDI,vBE),O,O,C,O,B,(hBF),O,A,X,(hG),E,D,(hG),O,O,X,X,X,X','7,X,(vJ),(vFH),X,X,X,X,(hHH),F,A,X,X,(vGE),(vA),(hI),O,O,(vC),(hF,vD),O,O,X,(hHC,vF),H,O,O,O,O,(hGJ),O,O,O,O,O,(vE),(hE),O,O,X,(hHI),O,O,X,X,X,X,(hA),O,O','7,X,X,(vCD),(vCB),(vF),X,X,X,(hCA,vCJ),O,O,O,(vFH),X,(hCD),O,O,O,O,O,(vCB),(hH),O,O,X,(hI),O,O,(hCE),O,B,(vCE),(hCH,vCI),O,G,X,(hFA),O,G,O,O,O,X,X,(hBC),H,O,O,X','6,X,X,X,X,(vHD),(vHH),X,X,X,(hA,vHH),H,I,X,X,(hHJ,vIG),O,C,O,X,(hHC,vE),O,O,O,X,(hIG),J,O,O,X,X,(hHF),O,O,X,X,X','6,X,X,(vFD),(vJB),X,X,X,(hH,vH),O,O,(vJD),X,(hFH),O,O,O,O,(vJI),(hJD),O,O,(hJD,vG),J,E,X,(hJD),O,O,O,O,X,X,(hB),A,O,X','6,X,X,X,(vC),(vDC),X,X,(vF),(hHB,vDI),O,O,(vDJ),(hDG),O,O,E,O,O,(hHA),O,O,(hHD,vG),O,O,(hEJ),O,O,F,O,O,X,(hJ),O,O,X,X','7,X,X,X,X,X,(vEJ),(vG),X,X,X,X,(hD,vI),C,O,X,X,(vEG),(hFE,vFE),O,O,O,X,(hFD),O,O,O,O,X,X,(hEC,vFI),O,O,O,O,X,(hEC),B,O,H,X,X,X,(hJ),O,O,X,X,X,X','7,X,(vI),(vAC),X,X,(vAI),(vCG),(hB),O,I,X,(hCB,vCD),O,O,(hH),A,D,(hCD,vAF),O,O,O,X,(hAC),O,O,O,O,X,X,(hCF,vCC),O,O,O,O,(vB),(hCB),O,O,O,(hCF),O,O,(hCB),O,J,X,(hB),O,O','6,X,X,X,(vJB),(vIG),X,X,(vA),(hJI,vJC),O,F,X,(hJB),O,O,O,O,(vJE),(hJD),B,O,(hJB,vD),O,H,X,(hJG),O,I,O,O,X,(hA),O,E,X,X','7,X,X,X,X,(vCD),(vCC),(vB),X,X,X,(hCC,vEC),O,I,O,X,X,(hCH),C,O,O,O,X,X,(hCA),F,O,X,X,X,(vA),(hCH,vCE),O,E,X,X,(hGA),C,O,O,O,X,X,(hCE),O,O,O,X,X,X','6,X,X,X,X,(vJI),(vA),X,X,(vJH),(hJE,vJI),O,G,X,(hJE),F,O,O,D,X,(hC,vB),O,E,O,X,(hJH),O,O,O,O,X,(hJD),O,E,X,X,X','6,X,X,X,X,(vAJ),(vAJ),X,X,X,(hAF,vGB),O,O,X,X,(hAE,vD),O,O,O,X,(hAJ,vF),O,J,O,X,(hAF),O,O,H,X,X,(hB),O,I,X,X,X','7,X,X,X,X,(vH),(vIE),X,X,X,X,(hA,vA),O,O,X,X,(vID),(hF,vCH),O,O,A,(vIE),(hIH),O,O,O,(hIA,vIH),O,O,(hIE),O,O,(hIG,vIA),B,O,O,X,(hIF),O,G,A,X,X,X,(hIE),O,D,X,X,X','7,X,(vEF),(vB),(vFC),X,X,X,(hH),O,O,O,(vEA),X,X,(hED),C,O,O,O,X,X,X,X,(hEG),O,F,X,X,X,X,(hEI),O,O,(vEH),(vI),X,X,(hFH),O,O,O,O,X,X,X,(hEE),O,I,O','6,X,(vHI),(vDG),X,X,X,(hHE),J,O,(vDG),X,X,(hHC),H,O,O,(vHA),X,X,(hDH),F,O,G,(vHE),X,X,(hHC),O,O,O,X,X,X,(hHE),O,O','6,X,X,(vAD),(vAE),X,X,X,(hAA),O,O,(vAD),(vAA),X,(hAI,vI),O,F,D,J,(hC),A,O,(hB,vJ),A,E,(hAB),O,I,C,J,X,X,X,(hI),O,H,X','6,X,X,(vDA),(vE),X,X,X,(hJ,vDE),O,F,(vGG),X,(hDJ),O,O,O,O,(vC),(hDD),O,O,(hJ,vI),O,O,X,(hGG),O,D,O,O,X,X,(hDA),G,B,X','7,X,X,(vJD),(vG),(vI),X,X,X,(hG),O,O,H,(vEB),(vEF),X,(hEB),O,O,B,O,J,X,(hEJ,vA),O,H,(hEE,vEA),O,O,(hA),O,O,(hEJ,vG),O,O,X,(hJF),O,O,O,O,O,X,X,X,(hG),F,O,O,X','6,X,X,X,X,(vEJ),(vG),X,X,X,(hDE,vF),O,O,X,X,(hDJ,vF),O,O,O,X,(hA,vDA),O,O,O,X,(hDI),B,O,O,X,X,(hDE),C,O,X,X,X','6,X,X,(vAC),(vD),X,X,X,(hD,vEI),O,O,(vBC),X,(hBA),O,O,O,O,(vH),(hEF),O,O,(hEI,vF),O,O,X,(hEF),O,O,A,O,X,X,(hEE),G,D,X','6,X,X,(vGB),(vD),X,X,X,(hGG),A,C,(vGJ),(vC),X,(hGG,vGC),O,O,O,J,(hGH),O,O,(hE,vI),G,H,(hHF),O,H,O,O,X,X,X,(hE),O,O,X','6,X,X,(vIJ),(vCD),X,X,X,(hCD),O,O,(vCI),(vCG),X,(hIH,vCC),G,O,O,O,(hCE),O,I,(hCH,vCD),G,O,(hIC),B,D,O,O,X,X,X,(hA),O,O,X','7,X,(vII),(vDH),(vID),X,X,X,(hIG),O,O,O,X,X,X,(hDA),O,C,J,(vII),X,X,X,(hID),F,O,O,(vDH),X,X,X,(hID),O,O,O,(vID),X,X,X,(hIE),A,O,O,X,X,X,(hDD),O,O,O','7,X,(vEB),(vF),X,X,X,X,(hED),O,O,(vAJ),(vED),(vD),X,(hIB),O,O,O,G,O,X,X,X,(hF,vA),O,O,O,X,X,(hED),O,O,F,(vA),(vEB),X,(hIE),O,H,O,O,O,X,X,X,X,(hEE),O,O','7,X,X,X,X,(vCA),(vCE),(vB),X,X,X,(hF),O,O,O,X,X,X,(hJG,vCD),I,O,O,X,X,(hF,vB),O,O,O,X,X,(hJI,vCI),O,F,O,X,X,(hD),O,O,O,X,X,X,(hCI),O,O,O,X,X,X','6,X,(vJI),(vI),X,X,X,(hH),O,O,(vD),X,X,(hJA),F,O,O,(vJH),X,X,(hJI),C,G,O,(vJJ),X,X,(hD),O,O,O,X,X,X,(hJE),O,O','6,X,X,X,(vDC),(vAE),X,X,X,(hI),O,B,(vI),X,(vC),(hJ,vDE),O,O,O,(hAF),A,D,O,O,O,(hI),O,O,G,X,X,X,(hDA),H,O,X,X','7,X,X,X,(vFD),(vAF),X,X,X,(vFD),(hFE,vFA),B,O,X,X,(hHI),O,O,O,O,(vFF),X,(hFI),O,O,(hC,vG),O,H,(vFA),X,(hE),O,O,(hFB,vC),O,O,X,X,(hFJ),O,G,O,O,X,X,(hH),O,O,X,X','7,X,X,X,X,(vD),(vHD),X,X,X,(vDH),(hA,vJJ),O,O,(vE),X,(hHB,vJH),O,O,O,E,J,(hJE),H,O,O,(hD,vF),O,O,(hJG),E,O,(hJE,vJG),C,O,O,(hHH),J,O,O,O,O,X,X,(hJJ),O,O,X,X,X','7,X,X,X,X,(vBA),(vEB),X,X,X,(vBG),(hC,vBB),O,O,X,X,(hBD,vBA),O,O,O,O,(vBJ),(hBC),O,O,O,(hBG,vBD),A,O,(hBB),O,O,(hEE,vBF),O,O,D,X,(hBJ),O,O,O,I,X,X,(hBD),O,O,X,X,X','7,X,X,X,X,X,(vDG),(vC),X,(vB),(vFH),X,(hC),E,O,(hA),O,O,(vDD),(hH,vDB),O,O,(hDA),C,O,O,O,O,(vE),X,(hFH,vDE),O,O,H,O,F,(hDH),O,O,X,(hDI),O,O,(hJ),O,O,X,X,X,X','6,X,(vB),(vE),X,X,X,(hA),D,O,(vA),X,X,(hH),O,C,O,(vIG),X,X,(hDI),O,O,O,(vDF),X,X,(hIF),O,O,O,X,X,X,(hH),O,O','7,X,(vHF),(vC),X,X,(vC),(vHF),(hC),O,O,(vBC),(hA,vBF),O,O,(hBE),O,O,O,O,O,O,X,X,(hHD),A,O,X,X,X,(vD),(hJ,vHA),O,O,(vHI),(vC),(hCH),J,O,O,O,O,B,(hHH),O,O,X,(hE),O,O','6,X,X,X,(vJ),(vDA),X,X,(vFD),(hB,vFE),O,O,(vDA),(hDJ),O,O,O,O,O,(hDE),O,O,(hDA,vC),O,H,(hBA),O,I,O,G,O,X,(hJ),E,O,X,X','6,X,(vGA),(vA),X,X,X,(hGE),O,O,(vGD),X,X,(hGA),O,G,A,(vED),X,X,(hGE),O,O,O,(vGD),X,X,(hEB),C,H,F,X,X,X,(hGE),A,I','6,X,(vIC),(vFD),X,X,X,(hIG),O,C,(vIB),X,X,(hFJ),O,O,O,(vII),X,X,(hIE),O,O,F,(vIA),X,X,(hIJ),F,I,O,X,X,X,(hIC),O,O','6,X,X,X,(vJG),(vHH),X,X,X,(hHA),O,O,(vHD),X,(vE),(hJF,vHJ),O,O,O,(hHB),F,O,D,O,O,(hE),O,J,O,X,X,X,(hHE),I,O,X,X','7,X,X,X,(vGG),(vI),(vEC),X,X,(vBH),(hJ,vBI),O,O,O,X,(hBJ),O,O,O,O,O,(vJ),(hGJ),O,O,X,(hA),O,O,(hGC),O,O,(vC),(hGB,vGJ),O,O,X,(hBF),O,O,O,O,B,X,(hBH),O,O,O,X,X','7,X,X,X,X,X,(vD),(vHB),X,X,(vG),(vFC),(hHA,vAI),O,O,X,(hAB),O,O,O,O,O,X,(hAD),O,O,O,(vHB),X,X,(vF),(hAF,vHI),O,O,O,X,(hAB),O,O,O,O,O,X,(hB),O,E,X,X,X,X','6,X,(vBC),(vDF),X,X,X,(hBE),O,O,(vDB),X,X,(hDG),O,J,O,(vC),X,X,(hBI),O,O,O,(vBB),X,X,(hBA),O,O,D,X,X,X,(hBG),F,O','6,X,X,X,(vH),(vDC),(vGA),X,X,(hA,vIE),O,O,O,X,(hIG,vGG),O,O,O,O,(hF),O,O,(hGF,vJ),J,O,(hGA),O,O,O,O,X,(hIE),O,O,O,X,X','6,X,(vHC),(vHJ),X,X,X,(hHC),A,B,(vA),X,X,(hHI),O,O,O,(vHA),X,X,(hD),F,O,O,(vB),X,X,(hII),G,O,O,X,X,X,(hB),O,O','7,X,(vH),(vJA),X,X,(vIE),(vJI),(hJC),O,O,(vDG),(hJE,vIG),O,O,(hDD),I,O,O,O,O,O,X,X,(hII,vIG),O,O,O,X,X,(hIE,vJA),O,O,O,(vB),(vJI),(hDG),C,O,O,O,O,O,(hJF),O,O,X,(hH),O,O','7,X,(vHH),(vBE),X,X,X,X,(hE),B,O,X,(vHF),(vBJ),X,(hHI),C,O,(hJ,vHI),O,O,X,X,(hBC),D,O,O,O,X,X,(hHH),O,O,D,O,(vHF),X,(hHD),F,O,(hHD),G,O,X,X,X,X,(hHE),O,O','7,X,X,X,X,X,(vIF),(vI),X,X,X,X,(hB,vGF),O,O,X,X,(vEG),(hGG,vB),O,O,O,X,(hGJ),O,O,O,H,X,X,(hGA,vA),O,O,O,O,X,(hGC),I,H,O,X,X,X,(hH),G,J,X,X,X,X','7,X,X,X,X,X,(vJF),(vJF),X,X,X,X,(hJD),A,O,X,X,(vBG),(vJB),(hI,vI),O,O,X,(hBD,vJF),F,O,O,E,O,(hIB),O,O,O,O,C,X,(hJG),O,B,X,X,X,X,(hI),O,J,X,X,X,X','6,X,X,(vEI),(vC),X,X,X,(hH,vGG),O,O,(vGD),X,(hBJ),O,O,O,O,(vD),(hGI),O,O,(hD,vD),E,G,X,(hBG),O,O,A,O,X,X,(hJ),O,O,X','7,X,X,X,X,(vFI),(vJF),X,X,X,X,(hJH),O,O,(vJC),X,X,X,(hEE,vEC),O,O,O,X,(vJE),(hED,vEF),O,O,O,G,(hJB),O,O,O,O,X,X,(hEH),O,O,G,X,X,X,X,(hJG),O,O,X,X,X','7,X,X,X,(vJ),(vEI),X,X,X,X,(hJ,vEC),O,A,(vBD),X,X,(hHC,vEA),O,O,O,I,(vF),(hEE),O,O,(hEE,vHD),B,J,O,(hHE),O,O,O,(hG,vED),O,O,X,(hHD),O,O,O,O,X,X,X,(hEA),O,O,X,X','7,X,X,X,X,X,(vFH),(vED),X,X,X,X,(hEC,vEA),O,O,X,X,(vED),(hFI,vEH),O,O,O,X,(hEE),O,O,A,D,X,X,(hFB,vJ),O,O,O,J,X,(hFI),O,O,O,X,X,X,(hI),O,A,X,X,X,X','6,X,(vB),(vHI),X,X,X,(hHH),O,O,(vHJ),(vGA),X,(hHH),O,O,O,I,X,X,(hGE),O,A,O,(vHE),X,(hHJ),H,B,F,D,X,X,X,(hHJ),O,C'
+]
+```
+
+## --seed-contents--
+
+```js
+function kakuro(puzzles) {
+
+  return true;
+}
+
+const testPuzzles = [
+  '6,X,X,(vCC),(vI),X,X,X,(hH),B,O,(vCA),(vJE),X,(hFE,vD),O,O,O,O,(hA),O,I,(hJC,vB),O,O,(hJC),H,O,O,O,X,X,X,(hJE),O,O,X','7,X,X,X,X,(vJJ),(vCD),X,X,X,X,(hCG),O,O,(vCE),X,X,X,(hCI,vJB),C,O,O,X,(vB),(hJF,vJF),O,F,O,O,(hJA),F,G,O,O,X,X,(hCA),O,A,O,X,X,X,X,(hCF),O,O,X,X,X','7,X,X,X,(vE),(vCB),X,X,X,X,(hJ),O,O,(vCA),X,X,(vCH),(hCG,vCJ),O,O,O,(vJ),(hCE),O,O,O,(hJ,vGG),O,O,(hD),I,O,(hCD,vCB),H,O,O,X,(hCE),O,O,E,X,X,X,X,(hCE),O,O,X,X','6,X,X,X,(vEA),(vJF),X,X,X,(hI),O,O,(vJA),X,(vA),(hEI,vEB),O,O,O,(hIG),C,O,J,O,D,(hJD),O,O,O,X,X,X,(hJD),O,O,X,X','7,X,(vH),(vG),X,X,(vI),(vDH),(hG),B,O,(vDI),(hDB,vDE),O,O,(hBC),I,O,F,O,O,J,X,X,(hG),O,O,X,X,X,(vDG),(hH,vDD),O,O,(vDJ),(vC),(hBI),O,O,O,O,O,O,(hDJ),O,O,X,(hA),O,O','6,X,(vID),(vIJ),X,X,X,(hH),F,I,(vF),(vIA),X,(hIA),G,B,O,C,X,X,(hID),O,O,O,(vIF),X,(hIA),E,O,I,O,X,X,X,(hII),O,G','6,X,X,(vAF),(vAI),X,X,X,(hJ,vAC),O,B,(vGJ),X,(hGH),J,O,O,O,(vAF),(hAG),O,O,(hH,vF),A,D,X,(hGF),O,E,O,O,X,X,(hD),O,O,X','7,X,X,X,X,(vCE),(vGB),X,X,(vJG),(vCI),(hCD,vCJ),O,O,X,(hCI),O,O,O,O,B,(vJB),(hCF),O,O,O,(hCA,vH),O,O,(hCJ),O,O,(hJB,vCJ),O,O,O,X,(hJD),O,O,O,O,O,X,(hF),I,O,X,X,X','7,X,(vBB),(vBD),X,X,X,X,(hBB),C,E,(vEE),(vEC),X,X,(hBC),O,O,O,O,X,X,X,(hEF),H,O,A,(vJ),X,X,X,(hBD),O,O,O,(vI),X,X,(hBE),F,O,O,O,X,X,X,X,(hG),O,O','7,X,X,(vGG),(vGD),X,(vI),(vGI),X,(hGB),O,O,(hGH,vIC),O,O,X,(hGA),O,O,O,J,O,X,X,(hGI),O,O,X,X,X,(vGD),(hE,vE),O,O,(vGF),X,(hIH),O,O,O,O,O,X,(hE),A,O,(hGF),O,O,X','6,X,(vIJ),(vIE),X,X,X,(hF),O,C,(vIA),X,X,(hCA),O,O,D,(vIH),X,X,(hIB),E,O,O,(vF),X,X,(hD),O,A,O,X,X,X,(hID),O,G','6,X,(vAD),(vGI),(vI),X,X,(hB),O,O,O,(vAF),X,(hGC),O,O,O,O,(vGA),(hGE),O,O,(hJ,vB),O,O,X,(hGD),D,O,E,O,X,X,(hAI),O,C,O','6,X,X,X,(vAB),(vFA),X,X,X,(hHI),O,O,(vHJ),X,(vA),(hFJ,vHE),I,D,O,(hFH),O,O,O,O,O,(hHJ),O,O,O,X,X,X,(hC),O,J,X,X','7,X,X,X,(vJ),(vEF),X,X,X,X,(hI,vGD),C,E,(vEF),(vA),X,(hEH),O,O,O,O,O,X,(hH,vJ),O,O,(hJ,vEJ),O,O,(hD),O,A,(hEF,vEB),O,O,X,(hCC),O,O,A,O,O,X,X,X,(hH),O,O,X,X','7,X,X,X,(vAG),(vAJ),(vFH),X,X,X,(hFD),O,O,O,X,X,(vH),(hAJ,vAB),O,O,O,(vB),(hAH),O,H,O,(hC,vAI),O,O,(hE),O,O,(hAI,vAE),O,O,O,X,(hJ),O,O,O,X,X,X,(hFG),E,O,O,X,X','7,X,(vAI),(vHB),X,X,(vJE),(vAA),(hD),O,O,X,(hG),O,O,(hAJ),O,O,(vE),(hAA,vAI),O,O,X,(hHF),O,O,O,O,X,X,(hJF,vAE),O,O,O,J,(vH),(hAI),D,O,X,(hB),O,O,(hAG),O,O,X,(hAA),O,O','7,X,X,(vHJ),(vC),(vAF),X,X,X,(hHF),O,O,O,(vHI),(vHD),X,(hHB,vAB),O,O,O,O,E,(hAI),O,O,X,(hAB),O,O,(hD),O,O,(vAB),(hAI,vE),J,O,(hHH),O,O,O,B,O,X,X,X,(hG),O,A,O,X','6,X,X,(vDF),(vHE),X,X,X,(hHJ,vE),C,O,X,X,(hHI),O,O,O,(vDF),(vHH),(hFA),A,O,B,O,O,X,X,(hE),O,I,O,X,X,(hHH),O,O,X','6,X,(vA),(vA),X,X,X,(hE),O,O,(vCJ),X,X,(hG),O,O,O,(vHI),X,X,(hHC),O,O,H,(vB),X,X,(hCE),O,O,D,X,X,X,(hE),O,O','6,X,X,X,X,(vEH),(vEC),X,X,X,(hEB,vEJ),O,O,X,X,(hEC,vEF),O,O,B,X,(hDD,vEI),O,B,C,X,(hB),O,D,A,X,X,(hEC),O,O,X,X,X','6,X,X,X,X,(vIF),(vH),X,X,X,(hIJ,vGJ),B,I,X,X,(hIB,vIC),O,O,G,X,(hIA,vC),O,O,O,X,(hE),O,O,O,X,X,(hIA),E,O,X,X,X','7,X,(vC),(vFB),X,X,X,X,(hFH),O,O,(vFA),(vFJ),(vC),X,(hFJ),O,O,O,O,O,X,X,X,(hA,vJ),O,O,O,X,X,(hG),D,O,O,(vC),(vFC),X,(hBH),A,O,O,O,E,X,X,X,X,(hFH),O,I','6,X,X,(vFD),(vC),X,X,X,(hDH),E,F,(vDG),(vDD),X,(hDF,vDI),O,O,A,O,(hDG),O,O,(hDG,vDG),O,O,(hDJ),O,D,J,O,X,X,X,(hJ),E,O,X','6,X,X,X,(vE),(vGH),(vIC),X,X,(hD,vIG),O,O,A,X,(hIF,vJ),O,J,E,O,(hJ),O,D,(hGG,vGH),O,O,(hGG),O,O,O,O,X,(hIC),O,O,O,X,X','7,X,X,X,X,(vAG),(vJA),(vH),X,X,X,(hAJ,vDJ),O,O,O,X,X,(hJF),O,O,O,O,X,X,(hG),D,O,X,X,X,(vJH),(hJE,vJD),C,I,X,X,(hAE),B,O,O,O,X,X,(hAJ),O,O,E,X,X,X','7,X,X,X,X,(vGG),(vIA),(vGF),X,X,X,(hGF),O,O,D,X,X,X,(hGJ,vIB),O,O,O,X,X,(hGH,vGD),O,O,O,X,X,(hII,vC),O,J,O,X,X,(hIH),J,O,O,X,X,X,(hGE),O,I,O,X,X,X','6,X,X,(vFA),(vEC),X,X,X,(hI,vFI),F,O,X,X,(hDE),O,O,O,(vFF),(vFF),(hDI),G,J,O,F,O,X,X,(hFJ),O,D,O,X,X,(hFH),J,A,X','7,X,X,X,X,X,(vID),(vBB),X,X,X,X,(hBC),O,I,X,X,(vIH),(vBH),(hBF,vF),O,O,X,(hIE,vD),O,O,I,O,O,(hAG),O,O,O,O,F,X,(hA),O,O,X,X,X,X,(hD),O,O,X,X,X,X','7,X,(vCD),(vCC),X,X,X,X,(hE),B,C,(vCE),X,X,X,(hCD),O,O,O,(vE),(vCG),X,X,(hCH),O,O,O,O,X,X,(hFC),B,J,G,O,(vCC),X,X,X,(hCI),O,O,O,X,X,X,X,(hG),O,O','7,X,X,X,(vID),(vD),(vFB),X,X,X,(hIB,vID),O,O,O,X,X,(hJE,vIA),J,C,O,D,(vF),(hIB),O,O,X,(hIG),O,O,(hIJ),O,O,(vD),(hA,vID),O,O,X,(hJF),O,O,O,O,X,X,(hIE),O,O,O,X,X','7,X,X,(vAC),(vAH),X,X,X,X,(hD),O,O,(vAD),X,X,X,(hCH,vAD),O,O,O,(vAA),(vF),(hAC),O,H,(hAB,vAJ),O,O,A,(hAE),O,O,O,(hD,vAD),O,O,X,X,(hAC),O,O,O,X,X,X,X,(hG),O,O,X','6,X,X,(vBB),(vBE),X,X,X,(hBH),O,I,(vBG),(vBB),X,(hHE,vBD),H,D,O,O,(hBA),C,O,(hA,vG),O,O,(hBF),I,O,O,O,X,X,X,(hG),O,O,X','6,X,X,(vEC),(vD),X,X,X,(hD,vH),O,O,(vIB),X,(hIA),O,O,O,O,(vE),(hII),O,F,(hII,vIG),O,O,X,(hIH),O,O,O,O,X,X,(hIA),O,D,X','6,X,X,X,X,(vEH),(vEG),X,X,X,(hEB,vEF),O,O,X,X,(hAC,vG),O,B,O,X,(hEE,vEC),O,D,O,X,(hEE),O,O,O,X,X,(hEJ),D,O,X,X,X','6,X,(vD),(vB),X,X,X,(hA),O,O,(vE),X,X,(hE),A,O,O,(vCJ),X,X,(hCH),O,A,O,(vCI),X,X,(hB),O,D,O,X,X,X,(hCB),G,O','7,X,X,X,X,(vHJ),(vIF),(vIB),X,X,X,(hIH,vJI),O,O,J,X,X,(hIA),O,O,O,F,X,X,(hIG),O,C,X,X,X,(vD),(hA,vIB),O,J,X,X,(hHB),O,O,O,O,X,X,(hHB),O,O,O,X,X,X','7,X,X,X,(vBJ),(vIB),X,X,X,(vIF),(hBB,vBB),O,O,(vBA),X,(hIC),O,O,O,O,O,(vBA),(hBD),O,O,(hC,vC),O,O,O,(hBJ),E,O,O,(hBC,vBI),G,H,X,(hBA),O,O,O,O,O,X,X,(hBF),O,O,X,X','7,X,(vHI),(vHE),X,X,X,X,(hA),O,O,X,X,X,X,(hHG),O,O,(vHH),(vHE),(vIJ),X,(hHA),O,O,O,O,O,(vHI),X,(hID),H,O,O,B,I,X,X,X,X,(hHB),F,O,X,X,X,X,(hHE),O,H','6,X,X,(vAJ),(vAJ),X,X,X,(hAF,vAA),G,A,X,X,(hDA),O,O,O,(vDE),(vAH),(hAJ),O,O,O,O,I,X,X,(hAG),D,C,O,X,X,(hAI),O,O,X','6,X,X,X,X,(vDH),(vDA),X,X,X,(hG,vDG),O,E,X,X,(hBJ,vBC),O,O,O,X,(hBI,vE),O,E,O,X,(hE),O,O,O,X,X,(hDH),O,E,X,X,X','6,X,X,X,X,(vHJ),(vHH),X,X,X,(hHE,vCC),O,O,X,X,(hF,vG),A,O,O,X,(hHC,vHJ),O,B,O,X,(hHH),O,O,O,X,X,(hHI),O,O,X,X,X','7,X,(vJ),(vDG),X,X,(vDF),(vEF),(hC),E,B,X,(hEA),O,O,(hEE),C,O,(vH),(hED,vEF),A,O,X,(hEC),O,O,O,O,X,X,(hDD,vEF),O,O,O,O,(vEA),(hEJ),O,F,X,(hJ),O,O,(hEF),O,O,X,(hEF),O,O','7,X,X,X,(vCC),(vD),X,X,X,(vJE),(hI,vCH),O,O,(vBF),X,(hCC),O,O,O,O,A,(vJB),(hCB),G,O,O,(hJA,vJF),O,O,(hJA),O,O,(hG,vH),O,O,O,X,(hCE),O,O,O,O,O,X,X,(hH),O,O,X,X','7,X,X,(vEI),(vEB),(vG),X,X,X,(hEF),E,O,O,(vHE),X,X,(hEF,vH),O,O,O,O,(vEI),(hH),O,O,X,(hEH),O,B,(hG),O,O,(vG),(hEI,vED),O,O,X,(hAG),C,O,O,O,X,X,X,(hEE),O,O,O,X','6,X,X,X,X,(vJE),(vF),X,X,X,(hI,vJJ),O,O,X,X,(hEC,vJJ),H,O,O,X,(hF,vJB),O,O,O,X,(hJI),A,C,E,X,X,(hJD),O,J,X,X,X','6,X,X,X,(vH),(vAE),X,X,X,(hCB,vCJ),O,O,(vCB),X,(hCA,vD),O,O,O,O,(hD),C,O,(hCC,vJ),O,O,(hAB),A,O,F,O,X,X,(hB),G,O,X,X','6,X,X,(vEC),(vEG),X,X,X,(hEF),O,O,(vFC),(vEI),X,(hHJ,vJ),E,O,O,A,(hJ),O,O,(hEA,vEA),O,O,(hHH),O,O,O,B,X,X,X,(hEF),O,O,X','7,X,(vEI),(vEC),X,X,X,X,(hH),O,O,X,X,X,X,(hED),O,O,(vEB),(vEG),(vGB),X,(hEJ),O,O,O,O,O,(vD),X,(hIA),O,O,O,O,C,X,X,X,X,(hA),O,I,X,X,X,X,(hEB),A,O','7,X,X,X,(vF),(vG),(vIB),X,X,(vG),(hBA,vIH),J,I,D,X,(hBG),O,O,O,O,O,(vBG),(hA),O,O,X,(hE),O,O,(hBB),O,C,(vA),(hBI,vBE),O,O,X,(hBA),O,O,O,O,O,X,(hBF),O,O,O,X,X','7,X,X,(vEF),(vDI),X,X,X,X,(hDG),O,O,(vDA),X,X,X,(hEA,vG),O,O,O,(vEJ),(vJ),(hF),O,G,(hDH,vDI),O,O,F,(hED),O,O,O,(hDD,vB),O,O,X,X,(hDB),O,O,A,X,X,X,X,(hH),O,O,X','7,X,X,X,X,(vJH),(vD),(vAJ),X,X,X,(hAC,vDH),O,O,O,X,X,(hAA),O,O,O,O,X,X,(hC),F,O,X,X,X,(vC),(hAJ,vAA),I,H,X,X,(hJA),O,D,O,G,X,X,(hJB),O,C,O,X,X,X','6,X,X,X,(vDC),(vG),X,X,X,(hA),O,O,(vCH),X,(vCI),(hCB,vB),O,O,O,(hDF),O,H,O,O,O,(hH),O,O,O,X,X,X,(hH),J,O,X,X','6,X,X,(vCG),(vGA),X,X,X,(hE),O,O,(vGG),(vGB),X,(hCI,vF),O,O,O,I,(hGI),O,O,(hI,vD),O,A,(hGH),O,B,O,O,X,X,X,(hA),O,O,X','6,X,X,X,(vJ),(vHF),X,X,(vF),(hHG,vHD),O,A,X,(hHI),A,O,O,O,(vHE),(hB),G,O,(hD,vHE),O,F,X,(hGJ),O,O,O,O,X,(hHD),O,O,X,X','6,X,X,X,X,(vBD),(vD),X,X,X,(hD,vBB),O,O,X,X,(hI,vHD),O,O,O,X,(hHD,vBE),O,O,A,X,(hHF),C,O,G,X,X,(hBI),O,O,X,X,X','7,X,(vJ),(vFB),(vDB),X,X,X,(hFC),O,O,O,(vFE),X,X,(hFB),O,O,O,O,X,X,X,X,(hG),I,O,X,X,X,X,(hA),O,O,(vFG),(vE),X,X,(hDD),O,O,O,A,X,X,X,(hFD),D,E,J','6,X,X,X,(vAD),(vAH),X,X,(vB),(hF,vEB),O,O,X,(hED),O,O,O,O,(vD),(hD),O,O,(hJ,vI),O,O,X,(hEH),O,A,O,C,X,(hB),G,O,X,X','6,X,X,X,X,(vFG),(vFB),X,X,X,(hFD,vB),O,O,X,X,(hFG,vFG),O,O,O,X,(hI,vH),O,O,C,X,(hGA),E,H,O,X,X,(hD),O,G,X,X,X','7,X,X,X,(vBH),(vBB),X,X,X,X,(hBJ,vBJ),I,O,(vHE),(vI),X,(hBF,vBA),O,O,O,O,O,(hBE),O,D,X,(hA),O,O,(hBC),O,O,(vA),(hBB,vBH),O,O,(hDA),B,H,O,O,O,X,X,X,(hI),O,O,X,X','7,X,X,X,(vEC),(vD),X,X,X,(vJ),(hEB,vEJ),O,O,X,X,(hFC),O,O,O,F,(vEG),X,(hG),O,O,(hH,vFI),O,E,(vEH),X,(hEB),A,O,(hED,vJ),O,O,X,X,(hFI),O,O,O,O,X,X,(hED),O,O,X,X','6,X,(vGH),(vGG),X,X,X,(hGE),O,O,(vFI),(vGJ),X,(hGF),O,O,D,O,X,X,(hGB),O,C,O,(vGG),X,(hFG),O,O,O,O,X,X,X,(hE),O,I','7,X,X,X,(vF),(vGI),X,X,X,(vJ),(hB,vGA),H,G,X,X,(hHF),O,O,O,A,(vHH),X,(hB),O,O,(hGB,vGA),C,O,(vC),X,(hGC),O,O,(hGI,vGF),O,O,X,X,(hHB),O,E,O,O,X,X,(hA),O,O,X,X','7,X,X,X,X,X,(vED),(vIG),X,X,X,X,(hEC),O,O,X,X,(vAC),(vA),(hH,vEG),O,O,X,(hAE,vB),O,O,H,O,O,(hIJ),O,O,O,B,O,X,(hEC),O,O,X,X,X,X,(hEI),O,O,X,X,X,X','7,X,X,(vAI),(vAA),X,X,X,X,(hAD,vAG),O,O,(vAE),X,X,(hAH),O,O,O,O,(vBH),(vD),(hG),O,O,(hI,vE),O,O,O,(hAI),O,O,O,(hG,vAC),D,F,X,X,(hAH),O,O,O,O,X,X,X,(hAJ),O,O,X','7,X,X,(vGD),(vFB),(vJ),X,X,X,(hGD),O,O,O,(vFA),(vGG),X,(hFA),O,O,O,O,O,X,(hGE,vGF),O,O,(hH,vFB),O,O,(hH),O,G,(hGC,vD),O,G,X,(hEB),O,O,O,O,O,X,X,X,(hGC),O,A,O,X','6,X,X,(vAD),(vEE),X,X,X,(hEC),G,O,(vAJ),(vH),X,(hEC,vEG),O,A,O,O,(hEG),F,O,(hEG,vEG),O,O,(hAB),O,E,F,A,X,X,X,(hEG),O,O,X','6,X,X,X,X,(vIB),(vJ),X,X,X,(hB,vIJ),O,O,X,X,(hE,vIF),O,O,C,X,(hFC,vIF),O,A,O,X,(hG),O,O,H,X,X,(hIJ),O,O,X,X,X','6,X,X,X,(vIB),(vEB),X,X,X,(hD,vAE),O,O,(vE),X,(hIJ,vE),O,O,O,O,(hII),O,O,(hJ,vC),H,O,(hAE),O,O,G,J,X,X,(hC),O,O,X,X','6,X,X,(vFF),(vB),X,X,X,(hC,vI),O,J,(vJE),X,(hJJ),O,O,I,G,(vA),(hJJ),O,O,(hJD,vJE),O,O,X,(hJB),O,O,F,O,X,X,(hJH),C,J,X','7,X,X,X,(vEI),(vJI),X,X,X,X,(hJA),O,O,(vJE),(vJJ),X,X,(hJI,vJB),O,E,O,D,X,(hJI,vC),O,H,(hJB,vJE),O,O,(hB),O,O,(hF,vD),O,O,X,(hJB),O,O,O,O,X,X,X,X,(hJE),O,O,X,X','7,X,(vJB),(vFD),X,X,(vFE),(vH),(hJF),O,O,X,(hH),O,O,(hJC),O,O,(vH),(hJF,vJF),O,O,X,(hJI),H,O,O,O,X,X,(hFJ,vJJ),J,O,O,O,(vJA),(hA),G,O,X,(hJF),O,C,(hJC),O,O,X,(hD),O,O','7,X,(vI),(vDH),X,X,X,X,(hB),O,I,X,X,X,X,(hC),O,O,(vA),(vI),(vDJ),X,(hDH),O,B,O,O,O,(vDH),X,(hGG),O,O,O,J,O,X,X,X,X,(hHH),B,O,X,X,X,X,(hHE),O,O','6,X,X,(vDI),(vE),X,X,X,(hA,vDA),E,O,(vHI),X,(hHI),F,A,O,O,(vDF),(hDD),O,O,(hDJ,vDJ),O,O,X,(hDG),O,O,H,O,X,X,(hB),O,D,X','6,X,(vJ),(vDH),X,X,X,(hDA),G,O,(vDA),(vDB),X,(hDB),O,O,I,F,X,X,(hG),O,F,O,(vDI),X,(hED),G,O,O,F,X,X,X,(hDE),O,H','6,X,X,(vCJ),(vD),X,X,X,(hG),O,O,(vAD),(vAE),X,(hCC,vI),O,O,A,O,(hJ),O,F,(hAD,vAD),I,H,(hCD),O,O,O,F,X,X,X,(hAJ),O,G,X','7,X,X,X,X,(vEF),(vEC),(vF),X,X,X,(hED,vEB),O,O,O,X,X,(hEB),O,O,O,O,X,X,(hC),O,D,X,X,X,(vI),(hB,vEE),O,O,X,X,(hEB),E,H,D,O,X,X,(hHJ),O,G,O,X,X,X','7,X,X,X,X,(vJF),(vIC),X,X,X,(vIA),(hD,vJE),O,O,X,X,(hIJ,vD),J,O,O,D,(vG),(hJC),I,O,O,(hJA,vC),O,O,(hJF),J,C,(hJF,vJE),O,O,O,X,(hIB),O,O,O,O,X,X,(hJF),O,O,X,X,X','6,X,(vH),(vJE),X,X,X,(hC),J,O,(vJJ),(vJC),X,(hJJ),A,I,O,H,X,X,(hD),O,O,A,(vC),X,(hAI),F,B,O,O,X,X,X,(hC),J,O','7,X,(vA),(vEE),X,X,(vD),(vF),(hEC),O,O,(vIH),(hI,vEB),O,O,(hBD),O,O,O,O,F,O,X,X,(hA),O,O,X,X,X,(vJ),(hEJ,vEG),F,O,(vA),(vG),(hBG),O,O,O,O,O,O,(hEH),O,O,X,(hG),O,O','6,X,X,X,(vFG),(vFC),X,X,(vE),(hFE,vFF),A,O,X,(hBF),O,O,O,O,(vH),(hE),O,O,(hD,vFF),I,O,X,(hFF),O,O,E,D,X,(hFI),O,O,X,X','6,X,X,(vHA),(vFH),X,X,X,(hFF),O,O,(vFH),(vE),X,(hDI,vFG),O,O,O,O,(hFG),B,O,(hC,vFB),O,O,(hDC),O,G,O,F,X,X,X,(hFF),O,O,X','7,X,X,(vBE),(vBB),(vA),X,X,X,(hH),O,O,O,(vBA),(vH),X,(hGI,vBB),O,J,O,O,O,(hBG),O,O,X,(hI),O,O,(hC),O,O,(vBG),(hE,vBD),H,C,(hBI),O,O,O,O,O,X,X,X,(hGG),O,O,O,X','7,X,X,X,X,X,(vHC),(vF),X,X,X,X,(hF,vC),O,E,X,X,(vEJ),(hEF,vEG),F,O,H,X,(hHD),C,O,O,O,X,X,(hHC,vI),A,O,O,O,X,(hJ),D,O,O,X,X,X,(hF),O,O,X,X,X,X','6,X,X,(vH),(vDC),X,X,X,(hCI,vCD),O,O,X,X,(hH),O,O,O,(vCA),(vCB),(hCJ),O,I,O,D,E,X,X,(hDI),E,H,O,X,X,(hG),O,O,X','7,X,X,X,X,(vJ),(vHE),X,X,X,X,(hHA,vHF),O,B,(vHE),X,X,(hEC,vHG),O,O,O,O,X,(hHE,vHG),O,O,(hA,vHB),O,O,(hJ),O,O,(hHE,vJ),O,O,X,(hED),O,J,O,O,X,X,X,(hB),O,O,X,X,X','6,X,X,(vJG),(vA),X,X,X,(hI),B,O,(vJC),(vJH),X,(hJH,vJC),O,E,O,O,(hB),O,O,(hJJ,vF),O,O,(hCE),O,O,D,I,X,X,X,(hB),O,H,X','6,X,X,X,X,(vDG),(vHH),X,X,(vDH),(hJ,vHB),O,O,X,(hJF),O,O,O,O,X,(hHF,vE),O,O,O,X,(hDJ),H,O,O,I,X,(hHC),G,O,X,X,X','7,X,(vAI),(vHC),X,X,X,X,(hD),O,G,X,X,(vHI),(vG),(hAJ),O,O,(vB),(hH,vAH),O,O,X,(hHF,vH),O,O,F,O,O,(hCA),O,O,O,O,O,(vF),(hH),O,O,X,(hG),O,O,X,X,X,X,(hAH),O,O','7,X,X,X,X,(vFG),(vFI),X,X,X,X,(hFI,vFB),O,O,(vFJ),X,(vFA),(hFG,vGA),O,B,O,O,(hIB),O,O,O,(hH,vJ),O,O,(hJ),O,O,(hFD,vD),O,C,O,(hII),O,O,O,O,X,X,X,(hE),O,O,X,X,X','7,X,X,X,(vI),(vEG),(vFD),X,X,(vED),(hA,vEB),O,O,O,X,(hJC),O,O,A,O,O,X,(hEG),O,O,(hEG,vEC),O,O,(vB),X,(hH),O,O,(hJ,vEB),O,O,X,(hEI),O,O,O,O,J,X,(hFF),O,H,O,X,X','6,X,X,(vEI),(vEB),X,X,X,(hEC,vB),O,O,(vEB),X,(hHC),J,O,O,F,(vEC),(hH),O,O,(hB,vEC),O,O,X,(hEH),O,O,O,O,X,X,(hEA),D,O,X','6,X,X,(vAF),(vBF),X,X,X,(hBI),O,G,(vAD),(vBD),X,(hBI,vF),O,J,O,E,(hBB),A,G,(hBI,vBI),O,H,(hAJ),B,O,O,O,X,X,X,(hBA),O,O,X','6,X,(vCB),(vJ),X,X,X,(hCE),A,O,(vCI),X,X,(hCG),D,O,O,(vCC),X,X,(hCA),O,O,O,(vB),X,X,(hB),O,E,G,X,X,X,(hG),O,H','7,X,X,X,X,X,(vFI),(vHG),X,X,X,X,(hHJ,vHH),O,O,X,X,(vHC),(hHD,vHG),O,O,O,X,(hHH),O,O,O,O,X,X,(hFE,vHC),O,O,O,D,X,(hHE),H,O,O,X,X,X,(hHE),I,A,X,X,X,X','7,X,X,(vFA),(vC),X,X,X,X,(hE),O,B,(vAC),(vGJ),X,X,(hFF,vG),O,O,O,O,(vAI),(hAA),O,D,(hAB,vAC),O,O,O,(hAH),O,O,O,(hAB,vAB),O,O,X,(hFJ),O,O,O,O,X,X,X,X,(hAH),O,J,X','7,X,X,X,(vIF),(vIB),X,X,X,X,(hID),O,O,(vC),X,X,(vIF),(hIH,vEE),O,O,O,(vII),(hEB),O,O,O,(hIB,vIF),D,J,(hIF),O,O,(hII,vIE),O,O,O,X,(hJ),O,G,O,X,X,X,X,(hIF),O,O,X,X','7,X,(vDJ),(vDB),X,X,X,X,(hDJ),O,O,(vDF),(vCE),(vI),X,(hCH),O,O,O,O,O,X,X,X,(hDC,vDB),O,A,G,X,X,(hFE),O,O,O,(vDJ),(vI),X,(hCF),O,O,O,O,O,X,X,X,X,(hDE),O,O','6,X,X,(vCI),(vJ),X,X,X,(hA),O,E,(vEG),(vCC),X,(hEG,vCF),O,O,D,O,(hJ),C,G,(hB,vCC),C,O,(hED),O,O,A,O,X,X,X,(hCD),O,O,X','6,X,X,X,(vG),(vFE),X,X,X,(hG,vBC),O,O,(vBC),X,(hFJ,vC),O,E,O,I,(hG),O,O,(hBF,vBC),O,O,(hEJ),O,O,O,O,X,X,(hBA),D,O,X,X','6,X,X,(vAJ),(vE),X,X,X,(hFH,vH),O,O,(vFA),X,(hFH),O,O,O,O,(vFI),(hI),O,C,(hFI,vFD),O,O,X,(hAC),O,O,I,G,X,X,(hC),O,O,X','6,X,X,X,(vE),(vCJ),X,X,(vFF),(hA,vHJ),C,O,X,(hFC),O,O,O,F,(vD),(hFI),O,O,(hFE,vFJ),O,O,X,(hFG),O,O,O,O,X,(hFD),O,O,X,X','7,X,X,X,(vBJ),(vBI),X,X,X,X,(hA),O,O,(vCH),(vBJ),X,(vCJ),(hCB,vG),H,O,I,B,(hBA),O,O,O,(hBE,vG),O,O,(hBB),F,O,(hBE,vBI),O,O,O,(hBI),O,O,O,O,X,X,X,X,(hBC),O,O,X,X','6,X,X,(vCJ),(vD),X,X,X,(hH),O,O,(vBD),(vJ),X,(hCI,vCH),O,J,F,O,(hCG),O,E,(hA,vCD),O,F,(hBF),O,O,O,O,X,X,X,(hCG),O,O,X','6,X,X,X,X,(vJB),(vG),X,X,X,(hA,vH),I,O,X,X,(hCD,vCG),O,O,B,X,(hCF,vCD),O,O,O,X,(hJD),O,H,O,X,X,(hB),O,O,X,X,X','7,X,(vI),(vEH),X,X,(vCC),(vF),(hG),O,O,X,(hH),O,C,(hJ),O,O,(vAD),(hAG,vG),O,O,X,(hEI),F,O,O,O,X,X,(hAD,vAB),O,O,I,O,(vI),(hG),O,O,X,(hC),O,O,(hAJ),O,O,X,(hAA),O,O','7,X,X,X,X,X,(vEC),(vEA),X,X,X,X,(hB),O,O,X,X,(vDF),(vEH),(hEC,vH),H,O,X,(hEA,vI),O,B,E,O,O,(hDB),E,J,O,D,O,X,(hEH),O,A,X,X,X,X,(hI),O,O,X,X,X,X','6,X,X,X,(vBC),(vBC),X,X,X,(hBJ,vEC),H,O,(vBB),X,(hBE,vA),D,J,O,O,(hC),O,O,(hBE,vBG),O,O,(hEG),H,O,B,O,X,X,(hBI),O,O,X,X','7,X,(vE),(vCF),X,X,X,X,(hJ),O,O,(vFB),X,X,X,(hCJ),O,O,A,(vFE),(vCA),X,X,(hIH),O,O,O,O,X,X,(hFF),O,O,O,B,(vFA),X,X,X,(hCI),O,O,O,X,X,X,X,(hFG),O,O','7,X,X,X,X,(vBH),(vH),X,X,X,X,(hI),O,O,(vE),X,X,X,(hJG,vBF),O,O,O,X,(vH),(hBA,vJE),O,O,O,O,(hDG),O,O,O,O,X,X,(hBG),O,F,O,X,X,X,X,(hA),J,O,X,X,X','7,X,X,X,X,X,(vIC),(vA),X,X,X,(vII),(hG,vIH),F,I,X,X,(hIG),O,O,O,D,X,X,(hC,vC),O,O,J,X,X,(hIF,vE),O,G,A,X,X,(hIH),O,O,O,O,X,X,(hJ),F,D,X,X,X,X','7,X,X,X,(vH),(vCJ),X,X,X,(vCG),(hCB,vEG),O,O,X,X,(hEF),O,I,O,O,(vCI),X,(hCD),O,J,(hCB,vCJ),E,O,(vCC),X,(hCE),O,O,(hCI,vH),O,O,X,X,(hEB),O,O,O,O,X,X,(hD),O,O,X,X','6,X,(vGA),(vBE),X,X,X,(hGC),H,O,(vGF),X,X,(hGG),O,O,O,(vGD),X,X,(hBG),O,J,O,(vGD),X,X,(hGD),O,O,E,X,X,X,(hGH),O,O','6,X,X,(vEE),(vEJ),X,X,X,(hI,vEF),O,O,(vEH),X,(hEA),O,O,O,E,(vB),(hEE),O,O,(hB,vB),O,O,X,(hEG),A,O,I,O,X,X,(hA),D,B,X','6,X,(vJ),(vHA),X,X,X,(hHH),D,O,(vHG),X,X,(hI),O,O,F,(vDG),X,X,(hDJ),O,O,O,(vHF),X,X,(hHF),O,O,E,X,X,X,(hHE),B,O','6,X,X,X,X,(vFI),(vE),X,X,X,(hH,vA),J,I,X,X,(hGF,vD),O,O,F,X,(hGF,vC),O,O,A,X,(hD),O,O,O,X,X,(hD),O,O,X,X,X','7,X,X,(vHG),(vE),X,X,X,X,(hGD),O,O,(vGA),(vHC),(vAJ),X,(hGD,vAC),O,O,O,O,O,(hGC),O,O,(hAA,vGC),O,O,O,(hAC),O,O,F,(hGD,vD),O,O,(hHB),O,O,O,O,O,X,X,X,X,(hI),O,D,X','7,X,X,(vBG),(vBJ),X,(vBD),(vE),X,(hC),O,O,(hBB,vAG),O,C,X,(hBE),O,O,O,O,D,X,(hBG),O,O,O,(vBE),X,X,(vE),(hBI,vJ),O,O,O,X,(hCG),F,G,O,O,O,X,(hC),O,O,(hBJ),O,O,X','7,X,X,X,X,X,(vEA),(vJJ),X,X,(vED),(vJI),(hF),O,O,X,(hB),O,O,(hJH,vB),O,O,X,(hED),O,B,O,O,X,X,(hJI,vJI),O,O,C,O,X,(hJH),O,O,(hJJ),O,O,X,(hF),J,E,X,X,X,X','6,X,(vF),(vED),X,X,X,(hEI),O,O,(vEA),X,X,(hEJ),O,O,J,(vB),X,X,(hB),O,O,O,(vG),X,X,(hJ),B,O,C,X,X,X,(hF),O,E','6,X,X,X,X,(vCH),(vCD),X,X,X,(hG,vCH),O,O,X,X,(hCH,vCI),O,O,O,X,(hFA,vCE),O,O,J,X,(hFF),O,O,O,X,X,(hI),F,C,X,X,X','6,X,X,(vCH),(vA),X,X,X,(hE,vE),D,O,(vAG),(vHC),(hHB),O,O,C,O,I,(hHA),O,O,(hE,vJ),O,O,(hCH),A,O,O,O,O,X,X,(hHD),O,O,X','7,X,(vF),(vDG),(vGD),X,X,X,(hA),O,D,O,(vI),(vGE),X,(hDG),O,C,O,O,O,X,(hGC),H,O,(hH,vA),O,O,(vGF),X,(hH),O,O,(hGB,vGD),O,O,X,(hDH),O,D,O,O,O,X,X,X,(hA),O,O,G','7,X,X,X,X,(vIG),(vIG),X,X,X,X,(hCJ),O,O,(vCE),X,X,X,(hIE,vEA),O,O,O,X,(vJ),(hEA,vIE),O,O,O,O,(hCH),O,F,O,O,X,X,(hCH),I,B,O,X,X,X,X,(hCH),O,O,X,X,X','7,X,X,X,X,(vJ),(vDB),X,X,X,X,(hDG,vH),O,O,X,X,(vB),(hJ,vEB),E,O,O,(vG),(hDJ),O,F,D,(hI,vDC),O,O,(hA),O,O,(hJ,vA),O,O,I,X,(hDA),O,O,O,X,X,X,(hDH),O,O,X,X,X','6,X,X,X,(vEE),(vJA),(vEI),X,X,(hD,vEE),O,F,O,X,(hED,vEC),O,O,O,O,(hJ),O,O,(hEH,vEI),O,O,(hIB),O,O,O,O,X,(hII),O,O,O,X,X','6,X,(vE),(vGH),X,X,X,(hC),O,J,(vFJ),X,X,(hGH),O,O,O,(vJ),X,X,(hFA),B,O,I,(vFF),X,X,(hFG),O,O,O,X,X,X,(hB),F,G','6,X,X,(vIF),(vIJ),X,X,X,(hD,vIC),O,O,X,X,(hIB),O,O,O,(vIG),(vA),(hBF),O,O,F,I,O,X,X,(hE),D,O,F,X,X,(hIF),O,C,X','7,X,(vCD),(vB),X,X,X,X,(hII),O,D,(vA),X,X,X,(hIJ),O,O,O,(vII),X,X,(hID),O,O,O,O,(vIJ),(vCJ),X,X,(hCA),H,O,F,O,X,X,X,(hA),O,O,G,X,X,X,X,(hII),J,O','7,X,(vC),(vFF),X,X,(vHF),(vD),(hFD),O,O,(vHG),(hA,vFJ),O,O,(hHF),O,O,O,O,O,O,X,X,(hFG,vFH),O,O,O,X,X,(hFB,vI),O,O,O,(vFB),(vB),(hIG),O,O,O,O,D,J,(hG),O,I,X,(hFE),O,O','7,X,(vHJ),(vDE),X,X,(vDI),(vHH),(hHG),O,J,(vHJ),(hJ),O,O,(hHE),O,O,O,(hHJ,vB),O,O,X,(hHH),O,O,O,O,X,X,(hDJ,vHA),D,O,E,O,(vF),(hHJ),O,O,(hA),O,O,E,(hHA),O,O,X,(hI),O,O','7,X,(vEH),(vFA),X,X,X,X,(hEB),O,O,(vFA),X,X,X,(hFD),O,O,O,(vEE),(vID),X,X,(hFB),O,O,O,O,X,X,(hFJ),O,O,O,O,(vEE),X,X,X,(hJ),O,B,O,X,X,X,X,(hEH),C,O','6,X,(vJ),(vE),X,X,X,(hA),B,C,(vCJ),X,X,(hCG),O,O,O,(vCD),X,X,(hHF),O,O,O,(vJ),X,X,(hE),O,O,H,X,X,X,(hCE),O,O','6,X,(vGC),(vGH),X,X,X,(hGG),O,O,(vGB),X,X,(hGI),E,O,I,(vGG),X,X,(hIJ),O,C,O,(vA),X,X,(hD),G,O,O,X,X,X,(hD),O,O','6,X,X,X,X,(vIG),(vII),X,X,X,(hE,vIA),I,G,X,X,(hGJ,vGF),O,C,O,X,(hIE,vII),D,O,O,X,(hGJ),O,B,O,X,X,(hA),O,J,X,X,X','6,X,X,X,X,(vIA),(vE),X,X,(vJB),(hB,vII),I,J,X,(hIF),O,O,O,H,X,(hIB,vG),D,J,O,X,(hJG),C,O,O,F,X,(hB),O,O,X,X,X','7,X,X,X,(vDB),(vGG),X,X,X,X,(hGH),O,O,(vGA),(vGA),X,X,(hGF,vGA),O,O,O,O,X,(hGA,vGE),B,O,(hGD,vI),O,O,(hJ),O,I,(hGE,vGG),O,O,X,(hDA),O,D,O,O,X,X,X,X,(hF),O,O,X,X','6,X,X,X,(vFB),(vI),X,X,X,(hGF),O,O,(vGA),X,(vH),(hGA,vFD),O,O,O,(hFF),O,A,O,O,C,(hGG),O,J,O,X,X,X,(hGH),O,D,X,X','6,X,X,(vGA),(vA),X,X,X,(hB,vGE),O,O,(vHJ),X,(hBD),O,O,O,O,(vGH),(hGC),O,O,(hGJ,vGE),O,O,X,(hGG),O,F,O,O,X,X,(hGC),O,O,X','7,X,X,(vCE),(vG),(vI),X,X,X,(hEE),A,O,E,(vCD),(vCH),X,(hEG,vCD),O,O,O,O,O,(hA),G,C,X,(hEH),O,O,(hEE),O,O,(vI),(hA,vD),O,O,(hCF),O,O,O,O,O,X,X,X,(hED),O,O,B,X','7,X,(vG),(vDC),X,(vBA),(vDG),X,(hJ),O,G,(hDA,vBA),O,O,X,(hBC),O,O,G,O,O,X,X,(hDH),O,O,O,(vG),X,X,X,(hG,vDI),O,O,O,(vJ),X,(hBB),E,O,O,O,O,X,(hH),O,J,(hB),O,O','6,X,X,X,(vJG),(vCG),X,X,(vJG),(hJB,vJH),O,O,X,(hJH),I,B,O,O,(vD),(hJB),O,O,(hA,vJG),O,O,X,(hJB),O,B,O,O,X,(hF),I,C,X,X','7,X,(vA),(vE),X,X,(vD),(vB),(hF),O,O,(vJJ),(hI,vGD),O,O,(hGD),O,O,O,O,I,O,X,X,(hJI),O,O,X,X,X,(vJE),(hA,vF),I,O,(vD),(vJJ),(hGA),O,O,O,J,O,O,(hH),O,O,X,(hI),O,O','7,X,X,(vEH),(vEF),X,X,X,X,(hEI,vIH),O,O,(vEI),X,X,(hEI),O,O,O,O,(vIE),(vEJ),(hD),O,O,(hEH,vH),O,O,O,(hEC),O,O,O,(hD,vC),H,G,X,X,(hIA),O,O,O,O,X,X,X,(hD),E,O,X','7,X,X,X,X,X,(vEA),(vCJ),X,X,X,X,(hCD,vCC),O,O,X,X,(vCI),(hCJ,vEH),O,O,O,X,(hDH),O,J,B,O,X,X,(hCH,vD),O,O,O,O,X,(hCJ),O,O,O,X,X,X,(hJ),O,G,X,X,X,X','7,X,(vB),(vFF),X,(vEI),(vFE),X,(hH),O,O,(hFC,vIB),G,O,X,(hFC),O,O,O,O,O,X,X,X,(hFH),O,D,X,X,X,X,(hFF,vFG),O,O,(vFE),(vFH),X,(hEE),O,O,J,O,O,X,(hFG),O,O,(hFG),O,O','6,X,(vHE),(vII),X,X,X,(hHB),O,O,(vHF),(vHJ),X,(hHD),B,O,O,O,X,X,(hG),H,O,O,(vHE),X,(hCA),O,O,E,B,X,X,X,(hHB),O,G','6,X,(vH),(vAF),X,X,X,(hAC),O,O,(vAD),X,X,(hDI),J,O,O,(vAH),X,X,(hAC),O,O,O,(vAI),X,X,(hH),O,O,B,X,X,X,(hAH),O,E','6,X,(vC),(vHA),X,X,X,(hC),O,J,(vHA),X,X,(hF),J,O,O,(vHC),X,X,(hI),O,J,O,(vF),X,X,(hEJ),O,O,B,X,X,X,(hG),O,O','6,X,X,X,(vFJ),(vJC),X,X,(vFF),(hFF,vJE),O,O,X,(hFH),O,F,O,O,(vD),(hFI),O,C,(hE,vH),D,O,X,(hJC),O,O,O,A,X,(hFG),O,J,X,X','7,X,X,X,X,X,(vDE),(vBB),X,(vC),(vDF),X,(hBF),O,O,(hH),O,O,(vE),(hH,vBI),B,O,(hDF),O,O,O,O,D,(vE),X,(hDI,vBE),O,O,C,O,B,(hBF),O,A,X,(hG),E,D,(hG),O,O,X,X,X,X','7,X,(vJ),(vFH),X,X,X,X,(hHH),F,A,X,X,(vGE),(vA),(hI),O,O,(vC),(hF,vD),O,O,X,(hHC,vF),H,O,O,O,O,(hGJ),O,O,O,O,O,(vE),(hE),O,O,X,(hHI),O,O,X,X,X,X,(hA),O,O','7,X,X,(vCD),(vCB),(vF),X,X,X,(hCA,vCJ),O,O,O,(vFH),X,(hCD),O,O,O,O,O,(vCB),(hH),O,O,X,(hI),O,O,(hCE),O,B,(vCE),(hCH,vCI),O,G,X,(hFA),O,G,O,O,O,X,X,(hBC),H,O,O,X','6,X,X,X,X,(vHD),(vHH),X,X,X,(hA,vHH),H,I,X,X,(hHJ,vIG),O,C,O,X,(hHC,vE),O,O,O,X,(hIG),J,O,O,X,X,(hHF),O,O,X,X,X','6,X,X,(vFD),(vJB),X,X,X,(hH,vH),O,O,(vJD),X,(hFH),O,O,O,O,(vJI),(hJD),O,O,(hJD,vG),J,E,X,(hJD),O,O,O,O,X,X,(hB),A,O,X','6,X,X,X,(vC),(vDC),X,X,(vF),(hHB,vDI),O,O,(vDJ),(hDG),O,O,E,O,O,(hHA),O,O,(hHD,vG),O,O,(hEJ),O,O,F,O,O,X,(hJ),O,O,X,X','7,X,X,X,X,X,(vEJ),(vG),X,X,X,X,(hD,vI),C,O,X,X,(vEG),(hFE,vFE),O,O,O,X,(hFD),O,O,O,O,X,X,(hEC,vFI),O,O,O,O,X,(hEC),B,O,H,X,X,X,(hJ),O,O,X,X,X,X','7,X,(vI),(vAC),X,X,(vAI),(vCG),(hB),O,I,X,(hCB,vCD),O,O,(hH),A,D,(hCD,vAF),O,O,O,X,(hAC),O,O,O,O,X,X,(hCF,vCC),O,O,O,O,(vB),(hCB),O,O,O,(hCF),O,O,(hCB),O,J,X,(hB),O,O','6,X,X,X,(vJB),(vIG),X,X,(vA),(hJI,vJC),O,F,X,(hJB),O,O,O,O,(vJE),(hJD),B,O,(hJB,vD),O,H,X,(hJG),O,I,O,O,X,(hA),O,E,X,X','7,X,X,X,X,(vCD),(vCC),(vB),X,X,X,(hCC,vEC),O,I,O,X,X,(hCH),C,O,O,O,X,X,(hCA),F,O,X,X,X,(vA),(hCH,vCE),O,E,X,X,(hGA),C,O,O,O,X,X,(hCE),O,O,O,X,X,X','6,X,X,X,X,(vJI),(vA),X,X,(vJH),(hJE,vJI),O,G,X,(hJE),F,O,O,D,X,(hC,vB),O,E,O,X,(hJH),O,O,O,O,X,(hJD),O,E,X,X,X','6,X,X,X,X,(vAJ),(vAJ),X,X,X,(hAF,vGB),O,O,X,X,(hAE,vD),O,O,O,X,(hAJ,vF),O,J,O,X,(hAF),O,O,H,X,X,(hB),O,I,X,X,X','7,X,X,X,X,(vH),(vIE),X,X,X,X,(hA,vA),O,O,X,X,(vID),(hF,vCH),O,O,A,(vIE),(hIH),O,O,O,(hIA,vIH),O,O,(hIE),O,O,(hIG,vIA),B,O,O,X,(hIF),O,G,A,X,X,X,(hIE),O,D,X,X,X','7,X,(vEF),(vB),(vFC),X,X,X,(hH),O,O,O,(vEA),X,X,(hED),C,O,O,O,X,X,X,X,(hEG),O,F,X,X,X,X,(hEI),O,O,(vEH),(vI),X,X,(hFH),O,O,O,O,X,X,X,(hEE),O,I,O','6,X,(vHI),(vDG),X,X,X,(hHE),J,O,(vDG),X,X,(hHC),H,O,O,(vHA),X,X,(hDH),F,O,G,(vHE),X,X,(hHC),O,O,O,X,X,X,(hHE),O,O','6,X,X,(vAD),(vAE),X,X,X,(hAA),O,O,(vAD),(vAA),X,(hAI,vI),O,F,D,J,(hC),A,O,(hB,vJ),A,E,(hAB),O,I,C,J,X,X,X,(hI),O,H,X','6,X,X,(vDA),(vE),X,X,X,(hJ,vDE),O,F,(vGG),X,(hDJ),O,O,O,O,(vC),(hDD),O,O,(hJ,vI),O,O,X,(hGG),O,D,O,O,X,X,(hDA),G,B,X','7,X,X,(vJD),(vG),(vI),X,X,X,(hG),O,O,H,(vEB),(vEF),X,(hEB),O,O,B,O,J,X,(hEJ,vA),O,H,(hEE,vEA),O,O,(hA),O,O,(hEJ,vG),O,O,X,(hJF),O,O,O,O,O,X,X,X,(hG),F,O,O,X','6,X,X,X,X,(vEJ),(vG),X,X,X,(hDE,vF),O,O,X,X,(hDJ,vF),O,O,O,X,(hA,vDA),O,O,O,X,(hDI),B,O,O,X,X,(hDE),C,O,X,X,X','6,X,X,(vAC),(vD),X,X,X,(hD,vEI),O,O,(vBC),X,(hBA),O,O,O,O,(vH),(hEF),O,O,(hEI,vF),O,O,X,(hEF),O,O,A,O,X,X,(hEE),G,D,X','6,X,X,(vGB),(vD),X,X,X,(hGG),A,C,(vGJ),(vC),X,(hGG,vGC),O,O,O,J,(hGH),O,O,(hE,vI),G,H,(hHF),O,H,O,O,X,X,X,(hE),O,O,X','6,X,X,(vIJ),(vCD),X,X,X,(hCD),O,O,(vCI),(vCG),X,(hIH,vCC),G,O,O,O,(hCE),O,I,(hCH,vCD),G,O,(hIC),B,D,O,O,X,X,X,(hA),O,O,X','7,X,(vII),(vDH),(vID),X,X,X,(hIG),O,O,O,X,X,X,(hDA),O,C,J,(vII),X,X,X,(hID),F,O,O,(vDH),X,X,X,(hID),O,O,O,(vID),X,X,X,(hIE),A,O,O,X,X,X,(hDD),O,O,O','7,X,(vEB),(vF),X,X,X,X,(hED),O,O,(vAJ),(vED),(vD),X,(hIB),O,O,O,G,O,X,X,X,(hF,vA),O,O,O,X,X,(hED),O,O,F,(vA),(vEB),X,(hIE),O,H,O,O,O,X,X,X,X,(hEE),O,O','7,X,X,X,X,(vCA),(vCE),(vB),X,X,X,(hF),O,O,O,X,X,X,(hJG,vCD),I,O,O,X,X,(hF,vB),O,O,O,X,X,(hJI,vCI),O,F,O,X,X,(hD),O,O,O,X,X,X,(hCI),O,O,O,X,X,X','6,X,(vJI),(vI),X,X,X,(hH),O,O,(vD),X,X,(hJA),F,O,O,(vJH),X,X,(hJI),C,G,O,(vJJ),X,X,(hD),O,O,O,X,X,X,(hJE),O,O','6,X,X,X,(vDC),(vAE),X,X,X,(hI),O,B,(vI),X,(vC),(hJ,vDE),O,O,O,(hAF),A,D,O,O,O,(hI),O,O,G,X,X,X,(hDA),H,O,X,X','7,X,X,X,(vFD),(vAF),X,X,X,(vFD),(hFE,vFA),B,O,X,X,(hHI),O,O,O,O,(vFF),X,(hFI),O,O,(hC,vG),O,H,(vFA),X,(hE),O,O,(hFB,vC),O,O,X,X,(hFJ),O,G,O,O,X,X,(hH),O,O,X,X','7,X,X,X,X,(vD),(vHD),X,X,X,(vDH),(hA,vJJ),O,O,(vE),X,(hHB,vJH),O,O,O,E,J,(hJE),H,O,O,(hD,vF),O,O,(hJG),E,O,(hJE,vJG),C,O,O,(hHH),J,O,O,O,O,X,X,(hJJ),O,O,X,X,X','7,X,X,X,X,(vBA),(vEB),X,X,X,(vBG),(hC,vBB),O,O,X,X,(hBD,vBA),O,O,O,O,(vBJ),(hBC),O,O,O,(hBG,vBD),A,O,(hBB),O,O,(hEE,vBF),O,O,D,X,(hBJ),O,O,O,I,X,X,(hBD),O,O,X,X,X','7,X,X,X,X,X,(vDG),(vC),X,(vB),(vFH),X,(hC),E,O,(hA),O,O,(vDD),(hH,vDB),O,O,(hDA),C,O,O,O,O,(vE),X,(hFH,vDE),O,O,H,O,F,(hDH),O,O,X,(hDI),O,O,(hJ),O,O,X,X,X,X','6,X,(vB),(vE),X,X,X,(hA),D,O,(vA),X,X,(hH),O,C,O,(vIG),X,X,(hDI),O,O,O,(vDF),X,X,(hIF),O,O,O,X,X,X,(hH),O,O','7,X,(vHF),(vC),X,X,(vC),(vHF),(hC),O,O,(vBC),(hA,vBF),O,O,(hBE),O,O,O,O,O,O,X,X,(hHD),A,O,X,X,X,(vD),(hJ,vHA),O,O,(vHI),(vC),(hCH),J,O,O,O,O,B,(hHH),O,O,X,(hE),O,O','6,X,X,X,(vJ),(vDA),X,X,(vFD),(hB,vFE),O,O,(vDA),(hDJ),O,O,O,O,O,(hDE),O,O,(hDA,vC),O,H,(hBA),O,I,O,G,O,X,(hJ),E,O,X,X','6,X,(vGA),(vA),X,X,X,(hGE),O,O,(vGD),X,X,(hGA),O,G,A,(vED),X,X,(hGE),O,O,O,(vGD),X,X,(hEB),C,H,F,X,X,X,(hGE),A,I','6,X,(vIC),(vFD),X,X,X,(hIG),O,C,(vIB),X,X,(hFJ),O,O,O,(vII),X,X,(hIE),O,O,F,(vIA),X,X,(hIJ),F,I,O,X,X,X,(hIC),O,O','6,X,X,X,(vJG),(vHH),X,X,X,(hHA),O,O,(vHD),X,(vE),(hJF,vHJ),O,O,O,(hHB),F,O,D,O,O,(hE),O,J,O,X,X,X,(hHE),I,O,X,X','7,X,X,X,(vGG),(vI),(vEC),X,X,(vBH),(hJ,vBI),O,O,O,X,(hBJ),O,O,O,O,O,(vJ),(hGJ),O,O,X,(hA),O,O,(hGC),O,O,(vC),(hGB,vGJ),O,O,X,(hBF),O,O,O,O,B,X,(hBH),O,O,O,X,X','7,X,X,X,X,X,(vD),(vHB),X,X,(vG),(vFC),(hHA,vAI),O,O,X,(hAB),O,O,O,O,O,X,(hAD),O,O,O,(vHB),X,X,(vF),(hAF,vHI),O,O,O,X,(hAB),O,O,O,O,O,X,(hB),O,E,X,X,X,X','6,X,(vBC),(vDF),X,X,X,(hBE),O,O,(vDB),X,X,(hDG),O,J,O,(vC),X,X,(hBI),O,O,O,(vBB),X,X,(hBA),O,O,D,X,X,X,(hBG),F,O','6,X,X,X,(vH),(vDC),(vGA),X,X,(hA,vIE),O,O,O,X,(hIG,vGG),O,O,O,O,(hF),O,O,(hGF,vJ),J,O,(hGA),O,O,O,O,X,(hIE),O,O,O,X,X','6,X,(vHC),(vHJ),X,X,X,(hHC),A,B,(vA),X,X,(hHI),O,O,O,(vHA),X,X,(hD),F,O,O,(vB),X,X,(hII),G,O,O,X,X,X,(hB),O,O','7,X,(vH),(vJA),X,X,(vIE),(vJI),(hJC),O,O,(vDG),(hJE,vIG),O,O,(hDD),I,O,O,O,O,O,X,X,(hII,vIG),O,O,O,X,X,(hIE,vJA),O,O,O,(vB),(vJI),(hDG),C,O,O,O,O,O,(hJF),O,O,X,(hH),O,O','7,X,(vHH),(vBE),X,X,X,X,(hE),B,O,X,(vHF),(vBJ),X,(hHI),C,O,(hJ,vHI),O,O,X,X,(hBC),D,O,O,O,X,X,(hHH),O,O,D,O,(vHF),X,(hHD),F,O,(hHD),G,O,X,X,X,X,(hHE),O,O','7,X,X,X,X,X,(vIF),(vI),X,X,X,X,(hB,vGF),O,O,X,X,(vEG),(hGG,vB),O,O,O,X,(hGJ),O,O,O,H,X,X,(hGA,vA),O,O,O,O,X,(hGC),I,H,O,X,X,X,(hH),G,J,X,X,X,X','7,X,X,X,X,X,(vJF),(vJF),X,X,X,X,(hJD),A,O,X,X,(vBG),(vJB),(hI,vI),O,O,X,(hBD,vJF),F,O,O,E,O,(hIB),O,O,O,O,C,X,(hJG),O,B,X,X,X,X,(hI),O,J,X,X,X,X','6,X,X,(vEI),(vC),X,X,X,(hH,vGG),O,O,(vGD),X,(hBJ),O,O,O,O,(vD),(hGI),O,O,(hD,vD),E,G,X,(hBG),O,O,A,O,X,X,(hJ),O,O,X','7,X,X,X,X,(vFI),(vJF),X,X,X,X,(hJH),O,O,(vJC),X,X,X,(hEE,vEC),O,O,O,X,(vJE),(hED,vEF),O,O,O,G,(hJB),O,O,O,O,X,X,(hEH),O,O,G,X,X,X,X,(hJG),O,O,X,X,X','7,X,X,X,(vJ),(vEI),X,X,X,X,(hJ,vEC),O,A,(vBD),X,X,(hHC,vEA),O,O,O,I,(vF),(hEE),O,O,(hEE,vHD),B,J,O,(hHE),O,O,O,(hG,vED),O,O,X,(hHD),O,O,O,O,X,X,X,(hEA),O,O,X,X','7,X,X,X,X,X,(vFH),(vED),X,X,X,X,(hEC,vEA),O,O,X,X,(vED),(hFI,vEH),O,O,O,X,(hEE),O,O,A,D,X,X,(hFB,vJ),O,O,O,J,X,(hFI),O,O,O,X,X,X,(hI),O,A,X,X,X,X','6,X,(vB),(vHI),X,X,X,(hHH),O,O,(vHJ),(vGA),X,(hHH),O,O,O,I,X,X,(hGE),O,A,O,(vHE),X,(hHJ),H,B,F,D,X,X,X,(hHJ),O,C'
+]
+
+kakuro(testPuzzles);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-425-prime-connection.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-425-prime-connection.md
new file mode 100644
index 00000000000..dfba791e407
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-425-prime-connection.md
@@ -0,0 +1,53 @@
+---
+id: 5900f5151000cf542c510028
+title: 'Problem 425: Prime connection'
+challengeType: 1
+forumTopicId: 302095
+dashedName: problem-425-prime-connection
+---
+
+# --description--
+
+Two positive numbers $A$ and $B$ are said to be connected (denoted by "$A ↔ B$") if one of these conditions holds:
+
+1. $A$ and $B$ have the same length and differ in exactly one digit; for example, $123 ↔ 173$.
+2. Adding one digit to the left of $A$ (or $B$) makes $B$ (or $A$); for example, $23 ↔ 223$ and $123 ↔ 23$.
+
+We call a prime $P$ a 2's relative if there exists a chain of connected primes between 2 and $P$ and no prime in the chain exceeds $P$.
+
+For example, 127 is a 2's relative. One of the possible chains is shown below:
+
+$$2 ↔ 3 ↔ 13 ↔ 113 ↔ 103 ↔ 107 ↔ 127$$
+
+However, 11 and 103 are not 2's relatives.
+
+Let $F(N)$ be the sum of the primes $≤ N$ which are not 2's relatives. We can verify that $F({10}^3) = 431$ and $F({10}^4) = 78\\,728$.
+
+Find $F({10}^7)$.
+
+# --hints--
+
+`primeConnection()` should return `46479497324`.
+
+```js
+assert.strictEqual(primeConnection(), 46479497324);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeConnection() {
+
+  return true;
+}
+
+primeConnection();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-426-box-ball-system.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-426-box-ball-system.md
new file mode 100644
index 00000000000..89314f8aa76
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-426-box-ball-system.md
@@ -0,0 +1,61 @@
+---
+id: 5900f5171000cf542c510029
+title: 'Problem 426: Box-ball system'
+challengeType: 1
+forumTopicId: 302096
+dashedName: problem-426-box-ball-system
+---
+
+# --description--
+
+Consider an infinite row of boxes. Some of the boxes contain a ball. For example, an initial configuration of 2 consecutive occupied boxes followed by 2 empty boxes, 2 occupied boxes, 1 empty box, and 2 occupied boxes can be denoted by the sequence (2, 2, 2, 1, 2), in which the number of consecutive occupied and empty boxes appear alternately.
+
+A turn consists of moving each ball exactly once according to the following rule: Transfer the leftmost ball which has not been moved to the nearest empty box to its right.
+
+After one turn the sequence (2, 2, 2, 1, 2) becomes (2, 2, 1, 2, 3) as can be seen below; note that we begin the new sequence starting at the first occupied box.
+
+<img class="img-responsive center-block" alt="animation showing one complete turn from (2, 2, 2, 1, 2) to (2, 2, 1, 2, 3)" src="https://cdn.freecodecamp.org/curriculum/project-euler/box-ball-system-1.gif" style="background-color: white; padding: 10px;" />
+
+A system like this is called a Box-Ball System or BBS for short.
+
+It can be shown that after a sufficient number of turns, the system evolves to a state where the consecutive numbers of occupied boxes is invariant. In the example below, the consecutive numbers of occupied boxes evolves to [1, 2, 3]; we shall call this the final state.
+
+<img class="img-responsive center-block" alt="four turns from occupied boxes [2, 2, 2] to final state [1, 2, 3]" src="https://cdn.freecodecamp.org/curriculum/project-euler/box-ball-system-2.gif" style="background-color: white; padding: 10px;" />
+
+We define the sequence $\\{t_i\\}$:
+
+$$\begin{align}   & s_0 = 290\\,797 \\\\
+  & s_{k + 1} = {s_k}^2\bmod 50\\,515\\,093 \\\\ & t_k = (s_k\bmod 64) + 1 \end{align}$$
+
+Starting from the initial configuration $(t_0, t_1, \ldots, t_{10})$, the final state becomes [1, 3, 10, 24, 51, 75].
+
+Starting from the initial configuration $(t_0, t_1, \ldots, t_{10\\,000\\,000})$, find the final state.
+
+Give as your answer the sum of the squares of the elements of the final state. For example, if the final state is [1, 2, 3] then $14 (= 1^2 + 2^2 + 3^2)$ is your answer.
+
+# --hints--
+
+`boxBallSystem()` should return `31591886008`.
+
+```js
+assert.strictEqual(boxBallSystem(), 31591886008);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function boxBallSystem() {
+
+  return true;
+}
+
+boxBallSystem();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-427-n-sequences.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-427-n-sequences.md
new file mode 100644
index 00000000000..3f244f7937c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-427-n-sequences.md
@@ -0,0 +1,48 @@
+---
+id: 5900f5181000cf542c51002a
+title: 'Problem 427: n-sequences'
+challengeType: 1
+forumTopicId: 302097
+dashedName: problem-427-n-sequences
+---
+
+# --description--
+
+A sequence of integers $S = \\{s_i\\}$ is called an $n$-sequence if it has $n$ elements and each element $s_i$ satisfies $1 ≤ s_i ≤ n$. Thus there are $n^n$ distinct $n$-sequences in total.
+
+For example, the sequence $S = \\{1, 5, 5, 10, 7, 7, 7, 2, 3, 7\\}$ is a 10-sequence.
+
+For any sequence $S$, let $L(S)$ be the length of the longest contiguous subsequence of $S$ with the same value. For example, for the given sequence $S$ above, $L(S) = 3$, because of the three consecutive 7's.
+
+Let $f(n) = \sum L(S)$ for all $n$-sequences $S$.
+
+For example, $f(3) = 45$, $f(7) = 1\\,403\\,689$ and $f(11) = 481\\,496\\,895\\,121$.
+
+Find $f(7\\,500\\,000)\bmod 1\\,000\\,000\\,009$.
+
+# --hints--
+
+`nSequences()` should return `97138867`.
+
+```js
+assert.strictEqual(nSequences(), 97138867);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function nSequences() {
+
+  return true;
+}
+
+nSequences();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-428-necklace-of-circles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-428-necklace-of-circles.md
new file mode 100644
index 00000000000..bf6e6bdaa12
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-428-necklace-of-circles.md
@@ -0,0 +1,59 @@
+---
+id: 5900f5191000cf542c51002b
+title: 'Problem 428: Necklace of Circles'
+challengeType: 1
+forumTopicId: 302098
+dashedName: problem-428-necklace-of-circles
+---
+
+# --description--
+
+Let $a$, $b$ and $c$ be positive numbers.
+
+Let $W$, $X$, $Y$, $Z$ be four collinear points where $|WX| = a$, $|XY| = b$, $|YZ| = c$ and $|WZ| = a + b + c$.
+
+Let $C_{\text{in}}$ be the circle having the diameter $XY$.
+
+Let $C_{\text{out}}$ be the circle having the diameter $WZ$.
+
+The triplet ($a$, $b$, $c$) is called a *necklace triplet* if you can place $k ≥ 3$ distinct circles $C_1, C_2, \ldots, C_k$ such that:
+
+- $C_i$ has no common interior points with any $C_j$ for $1 ≤ i$, $j ≤ k$ and $i ≠ j$,
+- $C_i$ is tangent to both $C_{\text{in}}$ and $C_{\text{out}}$ for $1 ≤ i ≤ k$,
+- $C_i$ is tangent to $C_{i + 1}$ for $1 ≤ i &lt; k$, and
+- $C_k$ is tangent to $C_1$.
+
+For example, (5, 5, 5) and (4, 3, 21) are necklace triplets, while it can be shown that (2, 2, 5) is not.
+
+<img class="img-responsive center-block" alt="a visual representation of a necklace triplet" src="https://cdn.freecodecamp.org/curriculum/project-euler/necklace-of-circles.png" style="background-color: white; padding: 10px;" />
+
+Let $T(n)$ be the number of necklace triplets $(a, b, c)$ such that $a$, $b$ and $c$ are positive integers, and $b ≤ n$. For example, $T(1) = 9$, $T(20) = 732$ and $T(3\\,000) = 438\\,106$.
+
+Find $T(1\\,000\\,000\\,000)$.
+
+# --hints--
+
+`necklace(1000000000)` should return `747215561862`.
+
+```js
+assert.strictEqual(necklace(1000000000), 747215561862);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function necklace(n) {
+
+  return true;
+}
+
+necklace(1000000000)
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-429-sum-of-squares-of-unitary-divisors.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-429-sum-of-squares-of-unitary-divisors.md
new file mode 100644
index 00000000000..928c602299f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-429-sum-of-squares-of-unitary-divisors.md
@@ -0,0 +1,46 @@
+---
+id: 5900f5191000cf542c51002c
+title: 'Problem 429: Sum of squares of unitary divisors'
+challengeType: 1
+forumTopicId: 302099
+dashedName: problem-429-sum-of-squares-of-unitary-divisors
+---
+
+# --description--
+
+A unitary divisor $d$ of a number $n$ is a divisor of $n$ that has the property $gcd(d, \frac{n}{d}) = 1$.
+
+The unitary divisors of $4! = 24$ are 1, 3, 8 and 24.
+
+The sum of their squares is $12 + 32 + 82 + 242 = 650$.
+
+Let $S(n)$ represent the sum of the squares of the unitary divisors of $n$. Thus $S(4!) = 650$.
+
+Find $S(100\\,000\\,000!)$ modulo $1\\,000\\,000\\,009$.
+
+# --hints--
+
+`sumSquaresOfUnitaryDivisors()` should return `98792821`.
+
+```js
+assert.strictEqual(sumSquaresOfUnitaryDivisors(), 98792821);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumSquaresOfUnitaryDivisors() {
+
+  return true;
+}
+
+sumSquaresOfUnitaryDivisors();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-43-sub-string-divisibility.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-43-sub-string-divisibility.md
new file mode 100644
index 00000000000..53ae7b50350
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-43-sub-string-divisibility.md
@@ -0,0 +1,126 @@
+---
+id: 5900f3971000cf542c50feaa
+title: 'Problem 43: Sub-string divisibility'
+challengeType: 1
+forumTopicId: 302100
+dashedName: problem-43-sub-string-divisibility
+---
+
+# --description--
+
+The number, 1406357289, is a 0 to 9 pandigital number because it is made up of each of the digits 0 to 9 in some order, but it also has a rather interesting sub-string divisibility property.
+
+Let $d_1$ be the $1^{st}$ digit, $d_2$ be the $2^{nd}$ digit, and so on. In this way, we note the following:
+
+- ${d_2}{d_3}{d_4} = 406$ is divisible by 2
+- ${d_3}{d_4}{d_5} = 063$ is divisible by 3
+- ${d_4}{d_5}{d_6} = 635$ is divisible by 5
+- ${d_5}{d_6}{d_7} = 357$ is divisible by 7
+- ${d_6}{d_7}{d_8} = 572$ is divisible by 11
+- ${d_7}{d_8}{d_9} = 728$ is divisible by 13
+- ${d_8}{d_9}{d_{10}} = 289$ is divisible by 17
+
+Find the sum of all 0 to `n` pandigital numbers with sub-strings fulfilling `n - 2` of these divisibility properties.
+
+**Note:** Pandigital numbers starting with `0` are to be considered in the result.
+
+# --hints--
+
+`substringDivisibility(5)` should return a number.
+
+```js
+assert(typeof substringDivisibility(5) === 'number');
+```
+
+`substringDivisibility(5)` should return `12444480`.
+
+```js
+assert.strictEqual(substringDivisibility(5), 12444480)
+```
+
+`substringDivisibility(7)` should return `1099210170`.
+
+```js
+assert.strictEqual(substringDivisibility(7), 1099210170)
+```
+
+`substringDivisibility(8)` should return `1113342912`.
+
+```js
+assert.strictEqual(substringDivisibility(8), 1113342912)
+```
+
+`substringDivisibility(9)` should return `16695334890`.
+
+```js
+assert.strictEqual(substringDivisibility(9), 16695334890)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function substringDivisibility(n) {
+
+  return true;
+}
+
+substringDivisibility(5);
+```
+
+# --solutions--
+
+```js
+function substringDivisibility(n) {
+  function isSubDivisable(digits) {
+    const factors = [2, 3, 5, 7, 11, 13, 17];
+
+    for (let i = 1; i < digits.length - 2; i++) {
+      const subNumber = digits[i] * 100 + digits[i + 1] * 10 + digits[i + 2];
+      if (subNumber % factors[i - 1] !== 0) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  function heapsPermutations(k, digits, conditionCheck, results) {
+    if (k === 1) {
+      if (conditionCheck(digits)) {
+        const number = parseInt(digits.join(''), 10);
+        results.push(number);
+      }
+      return;
+    }
+
+    heapsPermutations(k - 1, digits, conditionCheck, results);
+
+    for (let i = 0; i < k - 1; i++) {
+      if (k % 2 === 0) {
+        [digits[i], digits[k - 1]] = [digits[k - 1], digits[i]];
+      } else {
+        [digits[0], digits[k - 1]] = [digits[k - 1], digits[0]];
+      }
+      heapsPermutations(k - 1, digits, conditionCheck, results);
+    }
+    return;
+  }
+
+  const allowedDigits = [...new Array(n + 1).keys()];
+  const divisablePandigitals = [];
+  heapsPermutations(
+    allowedDigits.length,
+    allowedDigits,
+    isSubDivisable,
+    divisablePandigitals
+  );
+
+  let sum = 0;
+  for (let i = 0; i < divisablePandigitals.length; i++) {
+    sum += divisablePandigitals[i];
+  }
+
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-430-range-flips.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-430-range-flips.md
new file mode 100644
index 00000000000..d8838dbe162
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-430-range-flips.md
@@ -0,0 +1,50 @@
+---
+id: 5900f51a1000cf542c51002d
+title: 'Problem 430: Range flips'
+challengeType: 1
+forumTopicId: 302101
+dashedName: problem-430-range-flips
+---
+
+# --description--
+
+$N$ disks are placed in a row, indexed 1 to $N$ from left to right.
+
+Each disk has a black side and white side. Initially all disks show their white side.
+
+At each turn, two, not necessarily distinct, integers $A$ and $B$ between 1 and $N$ (inclusive) are chosen uniformly at random. All disks with an index from $A$ to $B$ (inclusive) are flipped.
+
+The following example shows the case $N = 8$. At the first turn $A = 5$ and $B = 2$, and at the second turn $A = 4$ and $B = 6$.
+
+<img class="img-responsive center-block" alt="example for N = 8, with first turn A = 5 and B = 2, and second turn A = 4 and B = 6" src="https://cdn.freecodecamp.org/curriculum/project-euler/range-flips.gif" style="background-color: white; padding: 10px;" />
+
+Let $E(N, M)$ be the expected number of disks that show their white side after $M$ turns. We can verify that $E(3, 1) = \frac{10}{9}$, $E(3, 2) = \frac{5}{3}$, $E(10, 4) ≈ 5.157$ and $E(100, 10) ≈ 51.893$.
+
+Find $E({10}^{10}, 4000)$. Give your answer rounded to 2 decimal places behind the decimal point.
+
+# --hints--
+
+`rangeFlips()` should return `5000624921.38`.
+
+```js
+assert.strictEqual(rangeFlips(), 5000624921.38);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function rangeFlips() {
+
+  return true;
+}
+
+rangeFlips();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-431-square-space-silo.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-431-square-space-silo.md
new file mode 100644
index 00000000000..4199819468b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-431-square-space-silo.md
@@ -0,0 +1,48 @@
+---
+id: 5900f51b1000cf542c51002e
+title: 'Problem 431: Square Space Silo'
+challengeType: 1
+forumTopicId: 302102
+dashedName: problem-431-square-space-silo
+---
+
+# --description--
+
+Fred the farmer arranges to have a new storage silo installed on his farm and having an obsession for all things square he is absolutely devastated when he discovers that it is circular. Quentin, the representative from the company that installed the silo, explains that they only manufacture cylindrical silos, but he points out that it is resting on a square base. Fred is not amused and insists that it is removed from his property.
+
+Quick thinking Quentin explains that when granular materials are delivered from above a conical slope is formed and the natural angle made with the horizontal is called the angle of repose. For example if the angle of repose, $\alpha = 30°$, and grain is delivered at the centre of the silo then a perfect cone will form towards the top of the cylinder. In the case of this silo, which has a diameter of 6m, the amount of space wasted would be approximately 32.648388556 m<sup>3</sup>. However, if grain is delivered at a point on the top which has a horizontal distance of $x$ metres from the centre then a cone with a strangely curved and sloping base is formed. He shows Fred a picture.
+
+<img class="img-responsive center-block" alt="image presenting forming of the perfect cone towards the top of the cylinder" src="https://cdn.freecodecamp.org/curriculum/project-euler/square-space-silo.png" style="background-color: white; padding: 10px;" />
+
+We shall let the amount of space wasted in cubic metres be given by $V(x)$. If $x = 1.114\\,785\\,284$, which happens to have three squared decimal places, then the amount of space wasted, $V(1.114\\,785\\,284) \approx 36$. Given the range of possible solutions to this problem there is exactly one other option: $V(2.511\\,167\\,869) \approx 49$. It would be like knowing that the square is king of the silo, sitting in splendid glory on top of your grain.
+
+Fred's eyes light up with delight at this elegant resolution, but on closer inspection of Quentin's drawings and calculations his happiness turns to despondency once more. Fred points out to Quentin that it's the radius of the silo that is 6 metres, not the diameter, and the angle of repose for his grain is 40­°. However, if Quentin can find a set of solutions for this particular silo then he will be more than happy to keep it.
+
+If Quick thinking Quentin is to satisfy frustratingly fussy Fred the farmer's appetite for all things square then determine the values of $x$ for all possible square space wastage options and calculate $\sum x$ correct to 9 decimal places.
+
+# --hints--
+
+`squareSpaceSilo()` should return `23.386029052`.
+
+```js
+assert.strictEqual(squareSpaceSilo(), 23.386029052);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function squareSpaceSilo() {
+
+  return true;
+}
+
+squareSpaceSilo();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-432-totient-sum.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-432-totient-sum.md
new file mode 100644
index 00000000000..2a3f5b744d9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-432-totient-sum.md
@@ -0,0 +1,42 @@
+---
+id: 5900f51e1000cf542c510030
+title: 'Problem 432: Totient sum'
+challengeType: 1
+forumTopicId: 302103
+dashedName: problem-432-totient-sum
+---
+
+# --description--
+
+Let $S(n, m) = \sum φ(n × i)$ for $1 ≤ i ≤ m$. ($φ$ is Euler's totient function)
+
+You are given that $S(510\\,510, {10}^6) = 45\\,480\\,596\\,821\\,125\\,120$.
+
+Find $S(510\\,510, {10}^{11})$. Give the last 9 digits of your answer.
+
+# --hints--
+
+`totientSum()` should return `754862080`.
+
+```js
+assert.strictEqual(totientSum(), 754862080);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function totientSum() {
+
+  return true;
+}
+
+totientSum();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-433-steps-in-euclids-algorithm.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-433-steps-in-euclids-algorithm.md
new file mode 100644
index 00000000000..4db4c121e91
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-433-steps-in-euclids-algorithm.md
@@ -0,0 +1,51 @@
+---
+id: 5900f51d1000cf542c51002f
+title: 'Problem 433: Steps in Euclid''s algorithm'
+challengeType: 1
+forumTopicId: 302104
+dashedName: problem-433-steps-in-euclids-algorithm
+---
+
+# --description--
+
+Let $E(x_0, y_0)$ be the number of steps it takes to determine the greatest common divisor of $x_0$ and $y_0$ with Euclid's algorithm. More formally:
+
+$$\begin{align}   & x_1 = y_0, y_1 = x_0\bmod y_0 \\\\
+  & x_n = y_{n - 1}, y_n = x_{n - 1}\bmod y_{n - 1} \end{align}$$
+
+$E(x_0, y_0)$ is the smallest $n$ such that $y_n = 0$.
+
+We have $E(1, 1) = 1$, $E(10, 6) = 3$ and $E(6, 10) = 4$.
+
+Define $S(N)$ as the sum of $E(x, y)$ for $1 ≤ x$, $y ≤ N$.
+
+We have $S(1) = 1$, $S(10) = 221$ and $S(100) = 39\\,826$.
+
+Find $S(5 \times {10}^6)$.
+
+# --hints--
+
+`stepsInEuclidsAlgorithm()` should return `326624372659664`.
+
+```js
+assert.strictEqual(stepsInEuclidsAlgorithm(), 326624372659664);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function stepsInEuclidsAlgorithm() {
+
+  return true;
+}
+
+stepsInEuclidsAlgorithm();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-434-rigid-graphs.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-434-rigid-graphs.md
new file mode 100644
index 00000000000..a570e51bccb
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-434-rigid-graphs.md
@@ -0,0 +1,66 @@
+---
+id: 5900f51f1000cf542c510031
+title: 'Problem 434: Rigid graphs'
+challengeType: 1
+forumTopicId: 302105
+dashedName: problem-434-rigid-graphs
+---
+
+# --description--
+
+Recall that a graph is a collection of vertices and edges connecting the vertices, and that two vertices connected by an edge are called adjacent.
+
+Graphs can be embedded in Euclidean space by associating each vertex with a point in the Euclidean space.
+
+A flexible graph is an embedding of a graph where it is possible to move one or more vertices continuously so that the distance between at least two nonadjacent vertices is altered while the distances between each pair of adjacent vertices is kept constant.
+
+A rigid graph is an embedding of a graph which is not flexible.
+
+Informally, a graph is rigid if by replacing the vertices with fully rotating hinges and the edges with rods that are unbending and inelastic, no parts of the graph can be moved independently from the rest of the graph.
+
+The grid graphs embedded in the Euclidean plane are not rigid, as the following animation demonstrates:
+
+<img class="img-responsive center-block" alt="animation showing grid graphs are not rigid in Euclidean plane" src="https://cdn.freecodecamp.org/curriculum/project-euler/rigid-graphs-1.gif" style="background-color: white; padding: 10px;" />
+
+However, one can make them rigid by adding diagonal edges to the cells. For example, for the 2x3 grid graph, there are 19 ways to make the graph rigid:
+
+<img class="img-responsive center-block" alt="19 ways to make 2x3 grid graph rigid" src="https://cdn.freecodecamp.org/curriculum/project-euler/rigid-graphs-2.png" style="background-color: white; padding: 10px;" />
+
+Note that for the purposes of this problem, we do not consider changing the orientation of a diagonal edge or adding both diagonal edges to a cell as a different way of making a grid graph rigid.
+
+Let $R(m, n)$ be the number of ways to make the $m × n$ grid graph rigid.
+
+E.g. $R(2, 3) = 19$ and $R(5, 5) = 23\\,679\\,901$.
+
+Define $S(N)$ as $\sum R(i, j)$ for $1 ≤ i$, $j ≤ N$.
+
+E.g. $S(5) = 25\\,021\\,721$.
+
+Find $S(100)$, give your answer modulo $1\\,000\\,000\\,033$.
+
+# --hints--
+
+`rigidGraphs()` should return `863253606`.
+
+```js
+assert.strictEqual(rigidGraphs(), 863253606);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function rigidGraphs() {
+
+  return true;
+}
+
+rigidGraphs();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-435-polynomials-of-fibonacci-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-435-polynomials-of-fibonacci-numbers.md
new file mode 100644
index 00000000000..9df767adcee
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-435-polynomials-of-fibonacci-numbers.md
@@ -0,0 +1,44 @@
+---
+id: 5900f5201000cf542c510032
+title: 'Problem 435: Polynomials of Fibonacci numbers'
+challengeType: 1
+forumTopicId: 302106
+dashedName: problem-435-polynomials-of-fibonacci-numbers
+---
+
+# --description--
+
+The Fibonacci numbers $\\{f_n, n ≥ 0\\}$ are defined recursively as $f_n = f_{n - 1} + f_{n - 2}$ with base cases $f_0 = 0$ and $f_1 = 1$.
+
+Define the polynomials $\\{F_n, n ≥ 0\\}$ as $F_n(x) = \displaystyle\sum_{i = 0}^n f_ix^i$.
+
+For example, $F_7(x) = x + x^2 + 2x^3 + 3x^4 + 5x^5 + 8x^6 + 13x^7$, and $F_7(11) = 268\\,357\\,683$.
+
+Let $n = {10}^{15}$. Find the sum $\displaystyle\sum_{x = 0}^{100} F_n(x)$ and give your answer modulo $1\\,307\\,674\\,368\\,000 \\, (= 15!)$.
+
+# --hints--
+
+`polynomialsOfFibonacciNumbers()` should return `252541322550`.
+
+```js
+assert.strictEqual(polynomialsOfFibonacciNumbers(), 252541322550);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function polynomialsOfFibonacciNumbers() {
+
+  return true;
+}
+
+polynomialsOfFibonacciNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-436-unfair-wager.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-436-unfair-wager.md
new file mode 100644
index 00000000000..444c6f95d1b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-436-unfair-wager.md
@@ -0,0 +1,56 @@
+---
+id: 5900f5221000cf542c510033
+title: 'Problem 436: Unfair wager'
+challengeType: 1
+forumTopicId: 302107
+dashedName: problem-436-unfair-wager
+---
+
+# --description--
+
+Julie proposes the following wager to her sister Louise.
+
+She suggests they play a game of chance to determine who will wash the dishes.
+
+For this game, they shall use a generator of independent random numbers uniformly distributed between 0 and 1.
+
+The game starts with $S = 0$.
+
+The first player, Louise, adds to $S$ different random numbers from the generator until $S > 1$ and records her last random number '$x$'.
+
+The second player, Julie, continues adding to $S$ different random numbers from the generator until $S > 2$ and records her last random number '$y$'.
+
+The player with the highest number wins and the loser washes the dishes, i.e. if $y > x$ the second player wins.
+
+For example, if the first player draws 0.62 and 0.44, the first player turn ends since $0.62 + 0.44 > 1$ and $x = 0.44$. If the second players draws 0.1, 0.27 and 0.91, the second player turn ends since $0.62 + 0.44 + 0.1 + 0.27 + 0.91 > 2$ and $y = 0.91$. Since $y > x$, the second player wins.
+
+Louise thinks about it for a second, and objects: "That's not fair".
+
+What is the probability that the second player wins? Give your answer rounded to 10 places behind the decimal point in the form 0.abcdefghij
+
+# --hints--
+
+`unfairWager()` should return `0.5276662759`.
+
+```js
+assert.strictEqual(unfairWager(), 0.5276662759);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function unfairWager() {
+
+  return true;
+}
+
+unfairWager();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-437-fibonacci-primitive-roots.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-437-fibonacci-primitive-roots.md
new file mode 100644
index 00000000000..47f1606285d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-437-fibonacci-primitive-roots.md
@@ -0,0 +1,56 @@
+---
+id: 5900f5241000cf542c510036
+title: 'Problem 437: Fibonacci primitive roots'
+challengeType: 1
+forumTopicId: 302108
+dashedName: problem-437-fibonacci-primitive-roots
+---
+
+# --description--
+
+When we calculate $8^n$ modulo 11 for $n = 0$ to 9 we get: 1, 8, 9, 6, 4, 10, 3, 2, 5, 7.
+
+As we see all possible values from 1 to 10 occur. So 8 is a primitive root of 11.
+
+But there is more:
+
+If we take a closer look we see:
+
+$$\begin{align}   & 1 + 8 = 9 \\\\
+  & 8 + 9 = 17 ≡ 6\bmod 11 \\\\   & 9 + 6 = 15 ≡ 4\bmod 11 \\\\
+  & 6 + 4 = 10 \\\\   & 4 + 10 = 14 ≡ 3\bmod 11 \\\\
+  & 10 + 3 = 13 ≡ 2\bmod 11 \\\\   & 3 + 2 = 5 \\\\
+  & 2 + 5 = 7 \\\\ & 5 + 7 = 12 ≡ 1\bmod 11. \end{align}$$
+
+So the powers of 8 mod 11 are cyclic with period 10, and $8^n + 8^{n + 1} ≡ 8^{n + 2} (\text{mod } 11)$. 8 is called a Fibonacci primitive root of 11.
+
+Not every prime has a Fibonacci primitive root. There are 323 primes less than 10000 with one or more Fibonacci primitive roots and the sum of these primes is 1480491.
+
+Find the sum of the primes less than $100\\,000\\,000$ with at least one Fibonacci primitive root.
+
+# --hints--
+
+`fibonacciPrimitiveRoots()` should return `74204709657207`.
+
+```js
+assert.strictEqual(fibonacciPrimitiveRoots(), 74204709657207);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function fibonacciPrimitiveRoots() {
+
+  return true;
+}
+
+fibonacciPrimitiveRoots();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-438-integer-part-of-polynomial-equations-solutions.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-438-integer-part-of-polynomial-equations-solutions.md
new file mode 100644
index 00000000000..05c8bd7d4a5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-438-integer-part-of-polynomial-equations-solutions.md
@@ -0,0 +1,51 @@
+---
+id: 5900f5231000cf542c510034
+title: 'Problem 438: Integer part of polynomial equation''s solutions'
+challengeType: 1
+forumTopicId: 302109
+dashedName: problem-438-integer-part-of-polynomial-equations-solutions
+---
+
+# --description--
+
+For an $n$-tuple of integers $t = (a_1, \ldots, a_n)$, let $(x_1, \ldots, x_n)$ be the solutions of the polynomial equation $x^n + a_1x^{n - 1} + a_2x^{n - 2} + \ldots + a_{n - 1}x + a_n = 0$.
+
+Consider the following two conditions:
+
+- $x_1, \ldots, x_n$ are all real.
+- If $x_1, ..., x_n$ are sorted, $⌊x_i⌋ = i$ for $1 ≤ i ≤ n$. ($⌊·⌋:$ floor function.)
+
+In the case of $n = 4$, there are 12 $n$-tuples of integers which satisfy both conditions.
+
+We define $S(t)$ as the sum of the absolute values of the integers in $t$.
+
+For $n = 4$ we can verify that $\sum S(t) = 2087$ for all $n$-tuples $t$ which satisfy both conditions.
+
+Find $\sum S(t)$ for $n = 7$.
+
+# --hints--
+
+`polynomialIntegerPart()` should return `2046409616809`.
+
+```js
+assert.strictEqual(polynomialIntegerPart(), 2046409616809);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function polynomialIntegerPart() {
+
+  return true;
+}
+
+polynomialIntegerPart();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-439-sum-of-sum-of-divisors.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-439-sum-of-sum-of-divisors.md
new file mode 100644
index 00000000000..bb5669ed088
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-439-sum-of-sum-of-divisors.md
@@ -0,0 +1,46 @@
+---
+id: 5900f5231000cf542c510035
+title: 'Problem 439: Sum of sum of divisors'
+challengeType: 1
+forumTopicId: 302110
+dashedName: problem-439-sum-of-sum-of-divisors
+---
+
+# --description--
+
+Let $d(k)$ be the sum of all divisors of $k$.
+
+We define the function $S(N) = \sum_{i = 1}^N \sum_{j = 1}^N d(i \times j)$.
+
+For example, $S(3) = d(1) + d(2) + d(3) + d(2) + d(4) + d(6) + d(3) + d(6) + d(9) = 59$.
+
+You are given that $S({10}^3) = 563\\,576\\,517\\,282$ and $S({10}^5)\bmod {10}^9 = 215\\,766\\,508$.
+
+Find $S({10}^{11})\bmod {10}^9$.
+
+# --hints--
+
+`sumOfSumOfDivisors()` should return `968697378`.
+
+```js
+assert.strictEqual(sumOfSumOfDivisors(), 968697378);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumOfSumOfDivisors() {
+
+  return true;
+}
+
+sumOfSumOfDivisors();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-44-pentagon-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-44-pentagon-numbers.md
new file mode 100644
index 00000000000..44905c1be79
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-44-pentagon-numbers.md
@@ -0,0 +1,77 @@
+---
+id: 5900f3981000cf542c50feab
+title: 'Problem 44: Pentagon numbers'
+challengeType: 1
+forumTopicId: 302111
+dashedName: problem-44-pentagon-numbers
+---
+
+# --description--
+
+Pentagonal numbers are generated by the formula, P<sub>n</sub>=`n`(3`n`−1)/2. The first ten pentagonal numbers are:
+
+1, 5, 12, 22, 35, 51, 70, 92, 117, 145, ...
+
+It can be seen that P<sub>4</sub> + P<sub>7</sub> = 22 + 70 = 92 = P<sub>8</sub>. However, their difference, 70 − 22 = 48, is not pentagonal.
+
+Find the pair of pentagonal numbers, P<sub>j</sub> and P<sub>k</sub>, for which their sum and difference are pentagonal and D = |P<sub>k</sub> − P<sub>j</sub>| is minimized; what is the value of D?
+
+# --hints--
+
+`pentagonNumbers()` should return a number.
+
+```js
+assert(typeof pentagonNumbers() === 'number');
+```
+
+`pentagonNumbers()` should return 5482660.
+
+```js
+assert.strictEqual(pentagonNumbers(), 5482660);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pentagonNumbers() {
+
+  return true;
+}
+
+pentagonNumbers();
+```
+
+# --solutions--
+
+```js
+function pentagonNumbers() {
+  function isPentagonal(num) {
+  // Formula found by solving pentagonal number
+  // equation for n.
+  const n = (Math.sqrt((24 * num) + 1) + 1) / 6;
+  return n % 1 === 0;
+  }
+
+  function pentagonal(num) {
+    return (num * ((3 * num) - 1)) / 2;
+  }
+  let result;
+  let i = 1;
+  while (!result) {
+  i++;
+  const num1 = (i * ((3 * i) - 1)) / 2; // Pentagonal num formula
+  const minDiff = num1 - (((i - 1) * ((3 * (i - 1)) - 1)) / 2);
+  let j = i - 1;
+  while (j > 0 && !result) {
+  const num2 = (j * ((3 * j) - 1)) / 2;
+  if (isPentagonal(num1 - num2) && isPentagonal(num1 + num2)) {
+        result = num1 - num2;
+      }
+      j--;
+    }
+  }
+  return result;
+  }
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-440-gcd-and-tiling.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-440-gcd-and-tiling.md
new file mode 100644
index 00000000000..49afa9608aa
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-440-gcd-and-tiling.md
@@ -0,0 +1,57 @@
+---
+id: 5900f5241000cf542c510037
+title: 'Problem 440: GCD and Tiling'
+challengeType: 1
+forumTopicId: 302112
+dashedName: problem-440-gcd-and-tiling
+---
+
+# --description--
+
+We want to tile a board of length $n$ and height 1 completely, with either 1 × 2 blocks or 1 × 1 blocks with a single decimal digit on top:
+
+<img class="img-responsive center-block" alt="ten blocks 1x1 with single decimal digit on top, and 1x2 block" src="https://cdn.freecodecamp.org/curriculum/project-euler/gcd-and-tiling-1.png" style="background-color: white; padding: 10px;" />
+
+For example, here are some of the ways to tile a board of length $n = 8$:
+
+<img class="img-responsive center-block" alt="examples of ways to tile a board of length n = 8" src="https://cdn.freecodecamp.org/curriculum/project-euler/gcd-and-tiling-2.png" style="background-color: white; padding: 10px;" />
+
+Let $T(n)$ be the number of ways to tile a board of length $n$ as described above.
+
+For example, $T(1) = 10$ and $T(2) = 101$.
+
+Let $S(L)$ be the triple sum $\sum_{a, b, c} gcd(T(c^a), T(c^b))$ for $1 ≤ a, b, c ≤ L$.
+
+For example:
+
+$$\begin{align}   & S(2) = 10\\,444 \\\\
+  & S(3) = 1\\,292\\,115\\,238\\,446\\,807\\,016\\,106\\,539\\,989 \\\\ & S(4)\bmod 987\\,898\\,789 = 670\\,616\\,280. \end{align}$$
+
+Find $S(2000)\bmod 987\\,898\\,789$.
+
+# --hints--
+
+`gcdAndTiling()` should return `970746056`.
+
+```js
+assert.strictEqual(gcdAndTiling(), 970746056);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function gcdAndTiling() {
+
+  return true;
+}
+
+gcdAndTiling();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-441-the-inverse-summation-of-coprime-couples.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-441-the-inverse-summation-of-coprime-couples.md
new file mode 100644
index 00000000000..9c310a1f18d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-441-the-inverse-summation-of-coprime-couples.md
@@ -0,0 +1,48 @@
+---
+id: 5900f5261000cf542c510038
+title: 'Problem 441: The inverse summation of coprime couples'
+challengeType: 1
+forumTopicId: 302113
+dashedName: problem-441-the-inverse-summation-of-coprime-couples
+---
+
+# --description--
+
+For an integer $M$, we define $R(M)$ as the sum of $\frac{1}{p·q}$ for all the integer pairs $p$ and $q$ which satisfy all of these conditions:
+
+- $1 ≤ p &lt; q ≤ M$
+- $p + q ≥ M$
+- $p$ and $q$ are coprime.
+
+We also define $S(N)$ as the sum of $R(i)$ for $2 ≤ i ≤ N$.
+
+We can verify that $S(2) = R(2) = \frac{1}{2}$, $S(10) ≈ 6.9147$ and $S(100) ≈ 58.2962$.
+
+Find $S({10}^7)$. Give your answer rounded to four decimal places.
+
+# --hints--
+
+`inverseSummationCoprimeCouples()` should return `5000088.8395`.
+
+```js
+assert.strictEqual(inverseSummationCoprimeCouples(), 5000088.8395);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function inverseSummationCoprimeCouples() {
+
+  return true;
+}
+
+inverseSummationCoprimeCouples();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-442-eleven-free-integers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-442-eleven-free-integers.md
new file mode 100644
index 00000000000..9e2e8d90986
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-442-eleven-free-integers.md
@@ -0,0 +1,44 @@
+---
+id: 5900f5271000cf542c510039
+title: 'Problem 442: Eleven-free integers'
+challengeType: 1
+forumTopicId: 302114
+dashedName: problem-442-eleven-free-integers
+---
+
+# --description--
+
+An integer is called eleven-free if its decimal expansion does not contain any substring representing a power of 11 except 1.
+
+For example, 2404 and 13431 are eleven-free, while 911 and 4121331 are not.
+
+Let $E(n)$ be the $n$th positive eleven-free integer. For example, $E(3) = 3$, $E(200) = 213$ and $E(500\\,000) = 531\\,563$.
+
+Find $E({10}^{18})$.
+
+# --hints--
+
+`elevenFreeIntegers()` should return `1295552661530920200`.
+
+```js
+assert.strictEqual(elevenFreeIntegers(), 1295552661530920200);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function elevenFreeIntegers() {
+
+  return true;
+}
+
+elevenFreeIntegers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-443-gcd-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-443-gcd-sequence.md
new file mode 100644
index 00000000000..17fc8db1cb5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-443-gcd-sequence.md
@@ -0,0 +1,50 @@
+---
+id: 5900f5271000cf542c51003a
+title: 'Problem 443: GCD sequence'
+challengeType: 1
+forumTopicId: 302115
+dashedName: problem-443-gcd-sequence
+---
+
+# --description--
+
+Let $g(n)$ be a sequence defined as follows:
+
+$$\begin{align}   & g(4) = 13, \\\\
+  & g(n) = g(n-1) + gcd(n, g(n - 1)) \text{ for } n > 4. \end{align}$$
+
+The first few values are:
+
+$$\begin{array}{l}   n    & 4  & 5  & 6  & 7  & 8  & 9  & 10 & 11 & 12 & 13 & 14 & 15 & 16 & 17 & 18 & 19 & 20 & \ldots \\\\
+  g(n) & 13 & 14 & 16 & 17 & 18 & 27 & 28 & 29 & 30 & 31 & 32 & 33 & 34 & 51 & 54 & 55 & 60 & \ldots \end{array}$$
+
+You are given that $g(1\\,000) = 2\\,524$ and $g(1\\,000\\,000) = 2\\,624\\,152$.
+
+Find $g({10}^{15})$.
+
+# --hints--
+
+`gcdSequence()` should return `2744233049300770`.
+
+```js
+assert.strictEqual(gcdSequence(), 2744233049300770);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function gcdSequence() {
+
+  return true;
+}
+
+gcdSequence();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-444-the-roundtable-lottery.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-444-the-roundtable-lottery.md
new file mode 100644
index 00000000000..9e52d4e52b4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-444-the-roundtable-lottery.md
@@ -0,0 +1,61 @@
+---
+id: 5900f52a1000cf542c51003b
+title: 'Problem 444: The Roundtable Lottery'
+challengeType: 1
+forumTopicId: 302116
+dashedName: problem-444-the-roundtable-lottery
+---
+
+# --description--
+
+A group of $p$ people decide to sit down at a round table and play a lottery-ticket trading game. Each person starts off with a randomly-assigned, unscratched lottery ticket. Each ticket, when scratched, reveals a whole-pound prize ranging anywhere from £1 to £$p$, with no two tickets alike. The goal of the game is for each person to maximize his ticket winnings upon leaving the game.
+
+An arbitrary person is chosen to be the first player. Going around the table, each player has only one of two options:
+
+1.  The player can scratch his ticket and reveal its worth to everyone at the table.
+2.  The player can trade his unscratched ticket for a previous player's scratched ticket, and then leave the game with that ticket. The previous player then scratches his newly-acquired ticket and reveals its worth to everyone at the table.
+
+The game ends once all tickets have been scratched. All players still remaining at the table must leave with their currently-held tickets.
+
+Assume that each player uses the optimal strategy for maximizing the expected value of his ticket winnings.
+
+Let $E(p)$ represent the expected number of players left at the table when the game ends in a game consisting of $p$ players (e.g. $E(111) = 5.2912$ when rounded to 5 significant digits).
+
+Let $S_1(N) = \displaystyle\sum_{p = 1}^N E(p)$.
+
+Let $S_k(N) = \displaystyle\sum_{p = 1}^N S_{k - 1}(p)$ for $k > 1$.
+
+Find $S_{20}({10}^{14})$ and write the answer as a string in scientific notation rounded to 10 significant digits. Use a lowercase `e` to separate mantissa and exponent. For example, the answer for $S_3(100)$ would be `5.983679014e5`.
+
+# --hints--
+
+`roundtableLottery()` should return a string.
+
+```js
+assert(typeof roundtableLottery() === 'string');
+```
+
+`roundtableLottery()` should return the string `1.200856722e263`.
+
+```js
+assert.strictEqual(roundtableLottery(), '1.200856722e263');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function roundtableLottery() {
+
+  return true;
+}
+
+roundtableLottery();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-445-retractions-a.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-445-retractions-a.md
new file mode 100644
index 00000000000..841d3796c7d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-445-retractions-a.md
@@ -0,0 +1,50 @@
+---
+id: 5900f52a1000cf542c51003c
+title: 'Problem 445: Retractions A'
+challengeType: 1
+forumTopicId: 302117
+dashedName: problem-445-retractions-a
+---
+
+# --description--
+
+For every integer $n > 1$, the family of functions $f_{n, a, b}$ is defined by:
+
+$f_{n, a, b}(x) ≡ ax + b\bmod n$ for $a, b, x$ integer and $0 \lt a \lt n$, $0 \le b \lt n$, $0 \le x \lt n$.
+
+We will call $f_{n, a, b}$ a retraction if $f_{n, a, b}(f_{n, a, b}(x)) \equiv f_{n, a, b}(x)\bmod n$ for every $0 \le x \lt n$.
+
+Let $R(n)$ be the number of retractions for $n$.
+
+You are given that
+
+$$\sum_{k = 1}^{99\\,999} R(\displaystyle\binom{100\\,000}{k}) \equiv 628\\,701\\,600\bmod 1\\,000\\,000\\,007$$
+
+Find $$\sum_{k = 1}^{9\\,999\\,999} R(\displaystyle\binom{10\\,000\\,000}{k})$$ Give your answer modulo $1\\,000\\,000\\,007$.
+
+# --hints--
+
+`retractionsA()` should return `659104042`.
+
+```js
+assert.strictEqual(retractionsA(), 659104042);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function retractionsA() {
+
+  return true;
+}
+
+retractionsA();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-446-retractions-b.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-446-retractions-b.md
new file mode 100644
index 00000000000..f1919d426f5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-446-retractions-b.md
@@ -0,0 +1,50 @@
+---
+id: 5900f52c1000cf542c51003d
+title: 'Problem 446: Retractions B'
+challengeType: 1
+forumTopicId: 302118
+dashedName: problem-446-retractions-b
+---
+
+# --description--
+
+For every integer $n > 1$, the family of functions $f_{n, a, b}$ is defined by:
+
+$f_{n, a, b}(x) ≡ ax + b\bmod n$ for $a, b, x$ integer and $0 \lt a \lt n$, $0 \le b \lt n$, $0 \le x \lt n$.
+
+We will call $f_{n, a, b}$ a retraction if $f_{n, a, b}(f_{n, a, b}(x)) \equiv f_{n, a, b}(x)\bmod n$ for every $0 \le x \lt n$.
+
+Let $R(n)$ be the number of retractions for $n$.
+
+$F(N) = \displaystyle\sum_{n = 1}^N R(n^4 + 4)$.
+
+$F(1024) = 77\\,532\\,377\\,300\\,600$.
+
+Find $F({10}^7)$. Give your answer modulo $1\\,000\\,000\\,007$.
+
+# --hints--
+
+`retractionsB()` should return `907803852`.
+
+```js
+assert.strictEqual(retractionsB(), 907803852);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function retractionsB() {
+
+  return true;
+}
+
+retractionsB();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-447-retractions-c.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-447-retractions-c.md
new file mode 100644
index 00000000000..882f61f24d0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-447-retractions-c.md
@@ -0,0 +1,50 @@
+---
+id: 5900f52c1000cf542c51003e
+title: 'Problem 447: Retractions C'
+challengeType: 1
+forumTopicId: 302119
+dashedName: problem-447-retractions-c
+---
+
+# --description--
+
+For every integer $n > 1$, the family of functions $f_{n, a, b}$ is defined by:
+
+$f_{n, a, b}(x) ≡ ax + b\bmod n$ for $a, b, x$ integer and $0 \lt a \lt n$, $0 \le b \lt n$, $0 \le x \lt n$.
+
+We will call $f_{n, a, b}$ a retraction if $f_{n, a, b}(f_{n, a, b}(x)) \equiv f_{n, a, b}(x)\bmod n$ for every $0 \le x \lt n$.
+
+Let $R(n)$ be the number of retractions for $n$.
+
+$F(N) = \displaystyle\sum_{n = 2}^N R(n)$.
+
+$F({10}^7) ≡ 638\\,042\\,271\bmod 1\\,000\\,000\\,007$.
+
+Find $F({10}^{14})$. Give your answer modulo $1\\,000\\,000\\,007$.
+
+# --hints--
+
+`retractionsC()` should return `530553372`.
+
+```js
+assert.strictEqual(retractionsC(), 530553372);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function retractionsC() {
+
+  return true;
+}
+
+retractionsC();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-448-average-least-common-multiple.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-448-average-least-common-multiple.md
new file mode 100644
index 00000000000..26643961a3e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-448-average-least-common-multiple.md
@@ -0,0 +1,48 @@
+---
+id: 5900f52c1000cf542c51003f
+title: 'Problem 448: Average least common multiple'
+challengeType: 1
+forumTopicId: 302120
+dashedName: problem-448-average-least-common-multiple
+---
+
+# --description--
+
+The function $lcm(a, b)$ denotes the least common multiple of $a$ and $b$.
+
+Let $A(n)$ be the average of the values of $lcm(n, i)$ for $1 ≤ i ≤ n$.
+
+E.g: $A(2) = \frac{2 + 2}{2} = 2$ and $A(10) = \frac{10 + 10 + 30 + 20 + 10 + 30 + 70 + 40 + 90 + 10}{10} = 32$.
+
+Let $S(n) = \sum A(k)$ for $1 ≤ k ≤ n$.
+
+$S(100) = 122\\,726$.
+
+Find $S(99\\,999\\,999\\,019)\bmod 999\\,999\\,017$.
+
+# --hints--
+
+`averageLCM()` should return `106467648`.
+
+```js
+assert.strictEqual(averageLCM(), 106467648);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function averageLCM() {
+
+  return true;
+}
+
+averageLCM();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-449-chocolate-covered-candy.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-449-chocolate-covered-candy.md
new file mode 100644
index 00000000000..f312fd4ab49
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-449-chocolate-covered-candy.md
@@ -0,0 +1,46 @@
+---
+id: 5900f52d1000cf542c510040
+title: 'Problem 449: Chocolate covered candy'
+challengeType: 1
+forumTopicId: 302121
+dashedName: problem-449-chocolate-covered-candy
+---
+
+# --description--
+
+Phil the confectioner is making a new batch of chocolate covered candy. Each candy centre is shaped like an ellipsoid of revolution defined by the equation: $b^2x^2 + b^2y^2 + a^2z^2 = a^2b^2$.
+
+Phil wants to know how much chocolate is needed to cover one candy centre with a uniform coat of chocolate one millimeter thick.
+
+If $a = 1$ mm and $b = 1$ mm, the amount of chocolate required is $\frac{28}{3} \pi$ mm<sup>3</sup>
+
+If $a = 2$ mm and $b = 1$ mm, the amount of chocolate required is approximately 60.35475635 mm<sup>3</sup>.
+
+Find the amount of chocolate in mm<sup>3</sup> required if $a = 3$ mm and $b = 1$ mm. Give your answer as the number rounded to 8 decimal places behind the decimal point.
+
+# --hints--
+
+`chocolateCoveredCandy()` should return `103.37870096`.
+
+```js
+assert.strictEqual(chocolateCoveredCandy(), 103.37870096);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function chocolateCoveredCandy() {
+
+  return true;
+}
+
+chocolateCoveredCandy();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-45-triangular-pentagonal-and-hexagonal.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-45-triangular-pentagonal-and-hexagonal.md
new file mode 100644
index 00000000000..e80bcc8dd50
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-45-triangular-pentagonal-and-hexagonal.md
@@ -0,0 +1,82 @@
+---
+id: 5900f3991000cf542c50feac
+title: 'Problem 45: Triangular, pentagonal, and hexagonal'
+challengeType: 1
+forumTopicId: 302122
+dashedName: problem-45-triangular-pentagonal-and-hexagonal
+---
+
+# --description--
+
+Triangle, pentagonal, and hexagonal numbers are generated by the following formulae:
+
+<div style='display: inline-grid; text-align: center; grid-template-columns: 135px 135px 260px; grid-template-rows: auto;'><div>Triangle</div><div>T<sub>n</sub>=<var>n</var>(<var>n</var>+1)/2</div><div>1, 3, 6, 10, 15, ...</div></div>
+<div style='display: inline-grid; text-align: center; grid-template-columns: 135px 135px 260px; grid-template-rows: auto;'><div>Pentagonal</div><div>P<sub>n</sub>=<var>n</var>(3<var>n</var>−1)/2</div><div>1, 5, 12, 22, 35, ...</div></div>
+<div style='display: inline-grid; text-align: center; grid-template-columns: 135px 135px 260px; grid-template-rows: auto;'><div>Hexagonal</div><div>H<sub>n</sub>=<var>n</var>(2<var>n</var>−1)</div><div>1, 6, 15, 28, 45, ...</div></div>
+
+It can be verified that T<sub>285</sub> = P<sub>165</sub> = H<sub>143</sub> = 40755.
+
+Find the next triangle number that is also pentagonal and hexagonal.
+
+# --hints--
+
+`triPentaHexa(40756)` should return a number.
+
+```js
+assert(typeof triPentaHexa(40756) === 'number');
+```
+
+`triPentaHexa(40756)` should return 1533776805.
+
+```js
+assert.strictEqual(triPentaHexa(40756), 1533776805);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function triPentaHexa(n) {
+
+  return true;
+}
+
+triPentaHexa(40756);
+```
+
+# --solutions--
+
+```js
+function triPentaHexa(n) {
+  function triangular(num) {
+  return (num * (num + 1)) / 2;
+}
+
+function isPentagonal(num) {
+  // Formula found by completing the square and
+  // solving for n.
+  const n = (Math.sqrt((24 * num) + 1) + 1) / 6;
+  return n % 1 === 0;
+}
+
+  function isHexagonal(num) {
+  // Formula found by completing the square and
+  // solving for n.
+  const n = Math.sqrt(0.5 * (num + (1 / 8))) + 0.25;
+ return n % 1 === 0;
+}
+
+let iTri = n;
+let tri;
+let found = false;
+while (!found) {
+  iTri++;
+  tri = triangular(iTri);
+  if (isPentagonal(tri) && isHexagonal(tri)) {
+    found = true;
+    }
+  }
+  return tri;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-450-hypocycloid-and-lattice-points.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-450-hypocycloid-and-lattice-points.md
new file mode 100644
index 00000000000..9bfd7f5d15a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-450-hypocycloid-and-lattice-points.md
@@ -0,0 +1,63 @@
+---
+id: 5900f52e1000cf542c510041
+title: 'Problem 450: Hypocycloid and Lattice points'
+challengeType: 1
+forumTopicId: 302123
+dashedName: problem-450-hypocycloid-and-lattice-points
+---
+
+# --description--
+
+A hypocycloid is the curve drawn by a point on a small circle rolling inside a larger circle. The parametric equations of a hypocycloid centered at the origin, and starting at the right most point is given by:
+
+$$x(t) = (R - r) \cos(t) + r \cos(\frac{R - r}{r}t)$$
+
+$$y(t) = (R - r) \sin(t) - r \sin(\frac{R - r}{r} t)$$
+
+Where $R$ is the radius of the large circle and $r$ the radius of the small circle.
+
+Let $C(R, r)$ be the set of distinct points with integer coordinates on the hypocycloid with radius $R$ and $r$ and for which there is a corresponding value of $t$ such that $\sin(t)$ and $\cos(t)$ are rational numbers.
+
+Let $S(R, r) = \sum\_{(x,y) \in C(R, r)} |x| + |y|$ be the sum of the absolute values of the $x$ and $y$ coordinates of the points in $C(R, r)$.
+
+Let $T(N) = \sum_{R = 3}^N \sum_{r=1}^{\left\lfloor \frac{R - 1}{2} \right\rfloor} S(R, r)$ be the sum of $S(R, r)$ for $R$ and $r$ positive integers, $R\leq N$ and $2r &lt; R$.
+
+You are given:
+
+$$\begin{align}   C(3, 1) = & \\{(3, 0), (-1, 2), (-1,0), (-1,-2)\\} \\\\
+  C(2500, 1000) = & \\{(2500, 0), (772, 2376), (772, -2376), (516, 1792), (516, -1792), (500, 0), (68, 504), \\\\ &(68, -504),(-1356, 1088), (-1356, -1088), (-1500, 1000), (-1500, -1000)\\} \end{align}$$
+
+**Note:** (-625, 0) is not an element of $C(2500, 1000)$ because $\sin(t)$ is not a rational number for the corresponding values of $t$.
+
+$S(3, 1) = (|3| + |0|) + (|-1| + |2|) + (|-1| + |0|) + (|-1| + |-2|) = 10$
+
+$T(3) = 10$; $T(10) = 524$; $T(100) = 580\\,442$; $T({10}^3) = 583\\,108\\,600$.
+
+Find $T({10}^6)$.
+
+# --hints--
+
+`hypocycloidAndLatticePoints()` should return `583333163984220900`.
+
+```js
+assert.strictEqual(hypocycloidAndLatticePoints(), 583333163984220900);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function hypocycloidAndLatticePoints() {
+
+  return true;
+}
+
+hypocycloidAndLatticePoints();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-451-modular-inverses.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-451-modular-inverses.md
new file mode 100644
index 00000000000..39ebff17846
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-451-modular-inverses.md
@@ -0,0 +1,55 @@
+---
+id: 5900f5311000cf542c510042
+title: 'Problem 451: Modular inverses'
+challengeType: 1
+forumTopicId: 302124
+dashedName: problem-451-modular-inverses
+---
+
+# --description--
+
+Consider the number 15.
+
+There are eight positive numbers less than 15 which are coprime to 15: 1, 2, 4, 7, 8, 11, 13, 14.
+
+The modular inverses of these numbers modulo 15 are: 1, 8, 4, 13, 2, 11, 7, 14 because
+
+$$\begin{align}   & 1  \times 1\bmod 15 = 1 \\\\
+  & 2  \times 8  = 16\bmod 15 = 1 \\\\   & 4  \times 4  = 16\bmod 15 = 1 \\\\
+  & 7  \times 13 = 91\bmod 15 = 1 \\\\   & 11 \times 11 = 121\bmod 15 = 1 \\\\
+  & 14 \times 14 = 196\bmod 15 = 1 \end{align}$$
+
+Let $I(n)$ be the largest positive number $m$ smaller than $n - 1$ such that the modular inverse of $m$ modulo $n$ equals $m$ itself.
+
+So $I(15) = 11$.
+
+Also $I(100) = 51$ and $I(7) = 1$.
+
+Find $\sum I(n)$ for $3 ≤ n ≤ 2 \times {10}^7$
+
+# --hints--
+
+`modularInverses()` should return `153651073760956`.
+
+```js
+assert.strictEqual(modularInverses(), 153651073760956);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function modularInverses() {
+
+  return true;
+}
+
+modularInverses();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-452-long-products.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-452-long-products.md
new file mode 100644
index 00000000000..abb043bcebe
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-452-long-products.md
@@ -0,0 +1,44 @@
+---
+id: 5900f5311000cf542c510043
+title: 'Problem 452: Long Products'
+challengeType: 1
+forumTopicId: 302125
+dashedName: problem-452-long-products
+---
+
+# --description--
+
+Define $F(m, n)$ as the number of $n$-tuples of positive integers for which the product of the elements doesn't exceed $m$.
+
+$F(10, 10) = 571$.
+
+$F({10}^6, {10}^6)\bmod 1\\,234\\,567\\,891 = 252\\,903\\,833$.
+
+Find $F({10}^9, {10}^9)\bmod 1\\,234\\,567\\,891$.
+
+# --hints--
+
+`longProducts()` should return `345558983`.
+
+```js
+assert.strictEqual(longProducts(), 345558983);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function longProducts() {
+
+  return true;
+}
+
+longProducts();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-453-lattice-quadrilaterals.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-453-lattice-quadrilaterals.md
new file mode 100644
index 00000000000..f809ebc60a5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-453-lattice-quadrilaterals.md
@@ -0,0 +1,48 @@
+---
+id: 5900f5311000cf542c510044
+title: 'Problem 453: Lattice Quadrilaterals'
+challengeType: 1
+forumTopicId: 302126
+dashedName: problem-453-lattice-quadrilaterals
+---
+
+# --description--
+
+A simple quadrilateral is a polygon that has four distinct vertices, has no straight angles and does not self-intersect.
+
+Let $Q(m, n)$ be the number of simple quadrilaterals whose vertices are lattice points with coordinates ($x$, $y$) satisfying $0 ≤ x ≤ m$ and $0 ≤ y ≤ n$.
+
+For example, $Q(2, 2) = 94$ as can be seen below:
+
+<img class="img-responsive center-block" alt="94 quadrilaterals whose vertices are lattice points with coordinates (x, y) satiffying 0 &le; x &le; m and 0 &le; y &le; n" src="https://cdn.freecodecamp.org/curriculum/project-euler/lattice-quadrilaterals.png" style="background-color: white; padding: 10px;" />
+
+It can also be verified that $Q(3, 7) = 39\\,590$, $Q(12, 3) = 309\\,000$ and $Q(123, 45) = 70\\,542\\,215\\,894\\,646$.
+
+Find $Q(12\\,345, 6\\,789)\bmod 135\\,707\\,531$.
+
+# --hints--
+
+`latticeQuadrilaterals()` should return `104354107`.
+
+```js
+assert.strictEqual(latticeQuadrilaterals(), 104354107);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function latticeQuadrilaterals() {
+
+  return true;
+}
+
+latticeQuadrilaterals();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-454-diophantine-reciprocals-iii.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-454-diophantine-reciprocals-iii.md
new file mode 100644
index 00000000000..b2fca3b4a6b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-454-diophantine-reciprocals-iii.md
@@ -0,0 +1,46 @@
+---
+id: 5900f5331000cf542c510045
+title: 'Problem 454: Diophantine reciprocals III'
+challengeType: 1
+forumTopicId: 302127
+dashedName: problem-454-diophantine-reciprocals-iii
+---
+
+# --description--
+
+In the following equation $x$, $y$, and $n$ are positive integers.
+
+$$\frac{1}{x} + \frac{1}{y} = \frac{1}{n}$$
+
+For a limit $L$ we define $F(L)$ as the number of solutions which satisfy $x &lt; y ≤ L$.
+
+We can verify that $F(15) = 4$ and $F(1000) = 1069$.
+
+Find $F({10}^{12})$.
+
+# --hints--
+
+`diophantineReciprocalsThree()` should return `5435004633092`.
+
+```js
+assert.strictEqual(diophantineReciprocalsThree(), 5435004633092);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function diophantineReciprocalsThree() {
+
+  return true;
+}
+
+diophantineReciprocalsThree();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-455-powers-with-trailing-digits.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-455-powers-with-trailing-digits.md
new file mode 100644
index 00000000000..8e453a983c2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-455-powers-with-trailing-digits.md
@@ -0,0 +1,46 @@
+---
+id: 5900f5331000cf542c510046
+title: 'Problem 455: Powers With Trailing Digits'
+challengeType: 1
+forumTopicId: 302129
+dashedName: problem-455-powers-with-trailing-digits
+---
+
+# --description--
+
+Let $f(n)$ be the largest positive integer $x$ less than ${10}^9$ such that the last 9 digits of $n^x$ form the number $x$ (including leading zeros), or zero if no such integer exists.
+
+For example:
+
+$$\begin{align}   & f(4) = 411\\,728\\,896 (4^{411\\,728\\,896} = ...490\underline{411728896}) \\\\
+  & f(10) = 0 \\\\   & f(157) = 743\\,757 (157^{743\\,757} = ...567\underline{000743757}) \\\\
+  & Σf(n), 2 ≤ n ≤ 103 = 442\\,530\\,011\\,399 \end{align}$$
+
+Find $\sum f(n)$, $2 ≤ n ≤ {10}^6$.
+
+# --hints--
+
+`powersWithTrailingDigits()` should return `450186511399999`.
+
+```js
+assert.strictEqual(powersWithTrailingDigits(), 450186511399999);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function powersWithTrailingDigits() {
+
+  return true;
+}
+
+powersWithTrailingDigits();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-456-triangles-containing-the-origin-ii.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-456-triangles-containing-the-origin-ii.md
new file mode 100644
index 00000000000..b622b8ac411
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-456-triangles-containing-the-origin-ii.md
@@ -0,0 +1,52 @@
+---
+id: 5900f5351000cf542c510047
+title: 'Problem 456: Triangles containing the origin II'
+challengeType: 1
+forumTopicId: 302130
+dashedName: problem-456-triangles-containing-the-origin-ii
+---
+
+# --description--
+
+Define:
+
+$$\begin{align}   & x_n = ({1248}^n\bmod 32323) - 16161 \\\\
+  & y_n = ({8421}^n\bmod 30103) - 15051 \\\\ & P_n = \\{(x_1, y_1), (x_2, y_2), \ldots, (x_n, y_n)\\} \end{align}$$
+
+For example, $$P_8 = \\{(-14913, -6630), (-10161, 5625), (5226, 11896), (8340, -10778), (15852, -5203), (-15165, 11295), (-1427, -14495), (12407, 1060)\\}$$
+
+Let $C(n)$ be the number of triangles whose vertices are in $P_n$ which contain the origin in the interior.
+
+Examples:
+
+$$\begin{align}   & C(8) = 20 \\\\
+  & C(600) = 8\\,950\\,634 \\\\ & C(40\\,000) = 2\\,666\\,610\\,948\\,988 \end{align}$$
+
+Find $C(2\\,000\\,000)$.
+
+# --hints--
+
+`trianglesContainingOriginTwo()` should return `333333208685971500`.
+
+```js
+assert.strictEqual(trianglesContainingOriginTwo(), 333333208685971500);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function trianglesContainingOriginTwo() {
+
+  return true;
+}
+
+trianglesContainingOriginTwo();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-457-a-polynomial-modulo-the-square-of-a-prime.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-457-a-polynomial-modulo-the-square-of-a-prime.md
new file mode 100644
index 00000000000..b187b6c488a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-457-a-polynomial-modulo-the-square-of-a-prime.md
@@ -0,0 +1,46 @@
+---
+id: 5900f5361000cf542c510048
+title: 'Problem 457: A polynomial modulo the square of a prime'
+challengeType: 1
+forumTopicId: 302131
+dashedName: problem-457-a-polynomial-modulo-the-square-of-a-prime
+---
+
+# --description--
+
+Let $f(n) = n^2 - 3n - 1$.
+
+Let $p$ be a prime.
+
+Let $R(p)$ be the smallest positive integer $n$ such that $f(n)\bmod p^2 = 0$ if such an integer $n$ exists, otherwise $R(p) = 0$.
+
+Let $SR(L)$ be $\sum R(p)$ for all primes not exceeding $L$.
+
+Find $SR({10}^7)$.
+
+# --hints--
+
+`polynomialModuloSquareOfPrime()` should return `2647787126797397000`.
+
+```js
+assert.strictEqual(polynomialModuloSquareOfPrime(), 2647787126797397000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function polynomialModuloSquareOfPrime() {
+
+  return true;
+}
+
+polynomialModuloSquareOfPrime();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-458-permutations-of-project.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-458-permutations-of-project.md
new file mode 100644
index 00000000000..c368503124d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-458-permutations-of-project.md
@@ -0,0 +1,44 @@
+---
+id: 5900f5361000cf542c510049
+title: 'Problem 458: Permutations of Project'
+challengeType: 1
+forumTopicId: 302132
+dashedName: problem-458-permutations-of-project
+---
+
+# --description--
+
+Consider the alphabet $A$ made out of the letters of the word `project`: $A = \\{c, e, j, o, p, r, t\\}$.
+
+Let $T(n)$ be the number of strings of length $n$ consisting of letters from $A$ that do not have a substring that is one of the 5040 permutations of `project`.
+
+$T(7) = 7^7 - 7! = 818\\,503$.
+
+Find $T({10}^{12})$. Give the last 9 digits of your answer.
+
+# --hints--
+
+`permutationsOfProject()` should return `423341841`.
+
+```js
+assert.strictEqual(permutationsOfProject(), 423341841);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function permutationsOfProject() {
+
+  return true;
+}
+
+permutationsOfProject();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-459-flipping-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-459-flipping-game.md
new file mode 100644
index 00000000000..13473d922bf
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-459-flipping-game.md
@@ -0,0 +1,62 @@
+---
+id: 5900f5371000cf542c51004a
+title: 'Problem 459: Flipping game'
+challengeType: 1
+forumTopicId: 302133
+dashedName: problem-459-flipping-game
+---
+
+# --description--
+
+The flipping game is a two player game played on a $N$ by $N$ square board.
+
+Each square contains a disk with one side white and one side black.
+
+The game starts with all disks showing their white side.
+
+A turn consists of flipping all disks in a rectangle with the following properties:
+
+- the upper right corner of the rectangle contains a white disk
+- the rectangle width is a perfect square (1, 4, 9, 16, ...)
+- the rectangle height is a triangular number (1, 3, 6, 10, ...)
+
+<img class="img-responsive center-block" alt="flipping all disks in a 4x3 rectangle on a 5x5 board" src="https://cdn.freecodecamp.org/curriculum/project-euler/flipping-game-1.png" style="background-color: white; padding: 10px;" />
+
+Players alternate turns. A player wins by turning the grid all black.
+
+Let $W(N)$ be the number of winning moves for the first player on a $N$ by $N$ board with all disks white, assuming perfect play.
+
+$W(1) = 1$, $W(2) = 0$, $W(5) = 8$ and $W({10}^2) = 31\\,395$.
+
+For $N = 5$, the first player's eight winning first moves are:
+
+<img class="img-responsive center-block" alt="eight winning first moves for N = 5" src="https://cdn.freecodecamp.org/curriculum/project-euler/flipping-game-2.png" style="background-color: white; padding: 10px;" />
+
+Find $W({10}^6)$.
+
+# --hints--
+
+`flippingGame()` should return `3996390106631`.
+
+```js
+assert.strictEqual(flippingGame(), 3996390106631);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function flippingGame() {
+
+  return true;
+}
+
+flippingGame();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-46-goldbachs-other-conjecture.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-46-goldbachs-other-conjecture.md
new file mode 100644
index 00000000000..1bcc859d05e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-46-goldbachs-other-conjecture.md
@@ -0,0 +1,99 @@
+---
+id: 5900f39a1000cf542c50fead
+title: 'Problem 46: Goldbach''s other conjecture'
+challengeType: 1
+forumTopicId: 302134
+dashedName: problem-46-goldbachs-other-conjecture
+---
+
+# --description--
+
+It was proposed by Christian Goldbach that every odd composite number can be written as the sum of a prime and twice a square.
+
+<div style='margin-left: 2em;'>
+  9 = 7 + 2×1<sup>2</sup><br>
+  15 = 7 + 2×2<sup>2</sup><br>
+  21 = 3 + 2×3<sup>2</sup><br>
+  25 = 7 + 2×3<sup>2</sup><br>
+  27 = 19 + 2×2<sup>2</sup><br>
+  33 = 31 + 2×1<sup>2</sup>
+</div>
+
+It turns out that the conjecture was false.
+
+What is the smallest odd composite that cannot be written as the sum of a prime and twice a square?
+
+# --hints--
+
+`goldbachsOtherConjecture()` should return a number.
+
+```js
+assert(typeof goldbachsOtherConjecture() === 'number');
+```
+
+`goldbachsOtherConjecture()` should return 5777.
+
+```js
+assert.strictEqual(goldbachsOtherConjecture(), 5777);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function goldbachsOtherConjecture() {
+
+  return true;
+}
+
+goldbachsOtherConjecture();
+```
+
+# --solutions--
+
+```js
+function goldbachsOtherConjecture() {  function isPrime(num) {
+    if (num < 2) {
+      return false;
+    } else if (num === 2) {
+      return true;
+    }
+    const sqrtOfNum = Math.floor(num ** 0.5);
+    for (let i = 2; i <= sqrtOfNum + 1; i++) {
+      if (num % i === 0) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  function isSquare(num) {
+    return Math.sqrt(num) % 1 === 0;
+  }
+
+  // construct a list of prime numbers
+  const primes = [];
+  for (let i = 2; primes.length < 1000; i++) {
+    if (isPrime(i)) primes.push(i);
+  }
+
+  let num = 3;
+  let answer;
+  while (!answer) {
+    num += 2;
+    if (!isPrime(num)) {
+      let found = false;
+      for (let primeI = 0; primeI < primes.length && !found; primeI++) {
+        const square = (num - primes[primeI]) / 2;
+        if (isSquare(square)) {
+          found = true;
+          break;
+        }
+      }
+      if (!found) answer = num;
+    }
+  }
+  return answer;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-460-an-ant-on-the-move.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-460-an-ant-on-the-move.md
new file mode 100644
index 00000000000..2bb68f203f4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-460-an-ant-on-the-move.md
@@ -0,0 +1,57 @@
+---
+id: 5900f5381000cf542c51004b
+title: 'Problem 460: An ant on the move'
+challengeType: 1
+forumTopicId: 302135
+dashedName: problem-460-an-ant-on-the-move
+---
+
+# --description--
+
+On the Euclidean plane, an ant travels from point $A(0, 1)$ to point $B(d, 1)$ for an integer $d$.
+
+In each step, the ant at point ($x_0$, $y_0$) chooses one of the lattice points ($x_1$, $y_1$) which satisfy $x_1 ≥ 0$ and $y_1 ≥ 1$ and goes straight to ($x_1$, $y_1$) at a constant velocity $v$. The value of $v$ depends on $y_0$ and $y_1$ as follows:
+
+- If $y_0 = y_1$, the value of $v$ equals $y_0$.
+- If $y_0 ≠ y_1$, the value of $v$ equals $\frac{y_1 - y_0}{\ln y_1 - \ln y_0}$.
+
+The left image is one of the possible paths for $d = 4$. First the ant goes from $A(0, 1)$ to $P_1(1, 3)$ at velocity $\frac{3 - 1}{\ln 3 - \ln 1} ≈ 1.8205$. Then the required time is $\frac{\sqrt{5}}{1.820} ≈ 1.2283$.
+
+From $P_1(1, 3)$ to $P_2(3, 3)$ the ant travels at velocity 3 so the required time is $\frac{2}{3} ≈ 0.6667$. From $P_2(3, 3)$ to $B(4, 1)$ the ant travels at velocity $\frac{1 - 3}{\ln 1 - \ln 3} ≈ 1.8205$ so the required time is $\frac{\sqrt{5}}{1.8205} ≈ 1.2283$.
+
+Thus the total required time is $1.2283 + 0.6667 + 1.2283 = 3.1233$.
+
+The right image is another path. The total required time is calculated as $0.98026 + 1 + 0.98026 = 2.96052$. It can be shown that this is the quickest path for $d = 4$.
+
+<img class="img-responsive center-block" alt="two possible paths for d = 4" src="https://cdn.freecodecamp.org/curriculum/project-euler/an-ant-on-the-move.jpg" style="background-color: white; padding: 10px;" />
+
+Let $F(d)$ be the total required time if the ant chooses the quickest path. For example, $F(4) ≈ 2.960\\,516\\,287$. We can verify that $F(10) ≈ 4.668\\,187\\,834$ and $F(100) ≈ 9.217\\,221\\,972$.
+
+Find $F(10\\,000)$. Give your answer rounded to nine decimal places.
+
+# --hints--
+
+`antOnTheMove()` should return `18.420738199`.
+
+```js
+assert.strictEqual(antOnTheMove(), 18.420738199);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function antOnTheMove() {
+
+  return true;
+}
+
+antOnTheMove();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-461-almost-pi.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-461-almost-pi.md
new file mode 100644
index 00000000000..1ff7e49ee6b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-461-almost-pi.md
@@ -0,0 +1,153 @@
+---
+id: 5900f53a1000cf542c51004c
+title: 'Problem 461: Almost Pi'
+challengeType: 1
+forumTopicId: 302136
+dashedName: problem-461-almost-pi
+---
+
+# --description--
+
+Let `f(k, n)` = $e^\frac{k}{n} - 1$, for all non-negative integers `k`.
+
+Remarkably, `f(6, 200) + f(75, 200) + f(89, 200) + f(226, 200)` = 3.1415926… ≈ π.
+
+In fact, it is the best approximation of π of the form `f(a, 200) + f(b, 200) + f(c, 200) + f(d, 200)`.
+
+Let `almostPi(n)` = a<sup>2</sup> + b<sup>2</sup> + c<sup>2</sup> + d<sup>2</sup> for a, b, c, d that minimize the error: $\lvert f(a,n) + f(b,n) + f(c,n) + f(d,n) - \Pi\rvert$
+
+You are given `almostPi(200)` = 6<sup>2</sup> + 75<sup>2</sup> + 89<sup>2</sup> + 226<sup>2</sup> = 64658.
+
+# --hints--
+
+`almostPi` should be a function.
+
+```js
+assert(typeof almostPi === 'function')
+```
+
+`almostPi` should return a number.
+
+```js
+assert.strictEqual(typeof almostPi(10), 'number');
+```
+
+`almostPi(29)` should return `1208`.
+
+```js
+assert.strictEqual(almostPi(29), 1208);
+```
+
+`almostPi(50)` should return `4152`.
+
+```js
+assert.strictEqual(almostPi(50), 4152);
+```
+
+`almostPi(200)` should return `64658`.
+
+```js
+assert.strictEqual(almostPi(200), 64658);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function almostPi(n) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function almostPi(n) {
+
+  // Find all possible values where f(k, n) <= PI
+  const f = [];
+  let max = 0;
+  while (1) {
+    let current = Math.exp(max / n) - 1;
+
+    if (current > Math.PI) break;
+
+    f.push(current);
+    ++max;
+  }
+
+  // Get all pairs where f[i] + f[j] <= PI
+  const pairs = [];
+  for (let i = 0; i < max; ++i) {
+    for (let j = 0; j < max; ++j) {
+      if (f[i] + f[j] > Math.PI) break;
+      pairs.push(f[i] + f[j]);
+    }
+  }
+
+  // Sort all values
+  pairs.sort((a, b) => a - b);
+
+  // Optimal Value for (a + b)
+  let left = 0;
+  // Optimal Value for (c + d)
+  let right = 0;
+  // minimum error with Math.abs(a + b - Math.PI)
+  let minError = Math.PI;
+
+  // Binary Search for the best match
+  for (let i = 0; i < pairs.length; ++i) {
+    let current = pairs[i];
+    let need = Math.PI - current;
+
+    if (need < current) break;
+
+    let match;
+    for (let i = 1; i < pairs.length; ++i) {
+      if (pairs[i] > need) {
+        match = i;
+        break;
+      }
+    }
+
+    let error = Math.abs(need - pairs[match]);
+    if (error < minError)
+    {
+      minError = error;
+      left = i;
+      right = match;
+    }
+
+    --match;
+    error = Math.abs(need - pairs[match]);
+    if (error < minError) {
+      minError = error;
+      left = i;
+      right = match;
+    }
+  }
+
+  let a, b, c, d;
+
+  OuterLoop1:
+  for (a = 0; a < max; ++a) {
+    for (b = a; b < max; ++b) {
+      if (pairs[left] == f[a] + f[b]) {
+        break OuterLoop1;
+      }
+    }
+  }
+
+  OuterLoop2:
+  for (c = 0; c < max; ++c) {
+    for (d = c; d < max; ++d) {
+      if (pairs[right] == f[c] + f[d]) {
+        break OuterLoop2;
+      }
+    }
+  }
+  return a*a + b*b + c*c + d*d;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-462-permutation-of-3-smooth-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-462-permutation-of-3-smooth-numbers.md
new file mode 100644
index 00000000000..b17dc1befcd
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-462-permutation-of-3-smooth-numbers.md
@@ -0,0 +1,58 @@
+---
+id: 5900f53b1000cf542c51004d
+title: 'Problem 462: Permutation of 3-smooth numbers'
+challengeType: 1
+forumTopicId: 302137
+dashedName: problem-462-permutation-of-3-smooth-numbers
+---
+
+# --description--
+
+A 3-smooth number is an integer which has no prime factor larger than 3. For an integer $N$, we define $S(N)$ as the set of 3-smooth numbers less than or equal to $N$. For example, $S(20) = \\{1, 2, 3, 4, 6, 8, 9, 12, 16, 18\\}$.
+
+We define $F(N)$ as the number of permutations of $S(N)$ in which each element comes after all of its proper divisors.
+
+This is one of the possible permutations for $N = 20$.
+
+-   1, 2, 4, 3, 9, 8, 16, 6, 18, 12.
+
+This is not a valid permutation because 12 comes before its divisor 6.
+
+-   1, 2, 4, 3, 9, 8, 12, 16, 6, 18.
+
+We can verify that $F(6) = 5$, $F(8) = 9$, $F(20) = 450$ and $F(1000) ≈ 8.8521816557e\\,21$.
+
+Find $F({10}^{18})$. Give as your answer as a string in its scientific notation rounded to ten digits after the decimal point. When giving your answer, use a lowercase `e` to separate mantissa and exponent. E.g. if the answer is $112\\,233\\,445\\,566\\,778\\,899$ then the answer format would be `1.1223344557e17`.
+
+# --hints--
+
+`permutationOf3SmoothNumbers()` should return a string.
+
+```js
+assert.strictEqual(typeof permutationOf3SmoothNumbers() === 'string');
+```
+
+`permutationOf3SmoothNumbers()` should return the string `5.5350769703e1512`.
+
+```js
+assert.strictEqual(permutationOf3SmoothNumbers(), '5.5350769703e1512');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function permutationOf3SmoothNumbers() {
+
+  return true;
+}
+
+permutationOf3SmoothNumbers();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-463-a-weird-recurrence-relation.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-463-a-weird-recurrence-relation.md
new file mode 100644
index 00000000000..a8e3607195e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-463-a-weird-recurrence-relation.md
@@ -0,0 +1,48 @@
+---
+id: 5900f53c1000cf542c51004e
+title: 'Problem 463: A weird recurrence relation'
+challengeType: 1
+forumTopicId: 302138
+dashedName: problem-463-a-weird-recurrence-relation
+---
+
+# --description--
+
+The function $f$ is defined for all positive integers as follows:
+
+$$\begin{align}   & f(1) = 1 \\\\
+  & f(3) = 3 \\\\   & f(2n) = f(n) \\\\
+  & f(4n + 1) = 2f(2n + 1) - f(n) \\\\ & f(4n + 3) = 3f(2n + 1) - 2f(n) \end{align}$$
+
+The function $S(n)$ is defined as $\sum_{i=1}^{n} f(i)$.
+
+$S(8) = 22$ and $S(100) = 3604$.
+
+Find $S(3^{37})$. Give the last 9 digits of your answer.
+
+# --hints--
+
+`weirdRecurrenceRelation()` should return `808981553`.
+
+```js
+assert.strictEqual(weirdRecurrenceRelation(), 808981553);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function weirdRecurrenceRelation() {
+
+  return true;
+}
+
+weirdRecurrenceRelation();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-464-mbius-function-and-intervals.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-464-mbius-function-and-intervals.md
new file mode 100644
index 00000000000..d293fcda274
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-464-mbius-function-and-intervals.md
@@ -0,0 +1,57 @@
+---
+id: 5900f53d1000cf542c51004f
+title: 'Problem 464: Möbius function and intervals'
+challengeType: 1
+forumTopicId: 302139
+dashedName: problem-464-mbius-function-and-intervals
+---
+
+# --description--
+
+The Möbius function, denoted $μ(n)$, is defined as:
+
+- $μ(n) = (-1)^{ω(n)}$ if $n$ is squarefree (where $ω(n)$ is the number of distinct prime factors of $n$)
+- $μ(n) = 0$ if $n$ is not squarefree.
+
+Let $P(a, b)$ be the number of integers $n$ in the interval $[a, b]$ such that $μ(n) = 1$.
+
+Let $N(a, b)$ be the number of integers $n$ in the interval $[a, b]$ such that $μ(n) = -1$.
+
+For example, $P(2, 10) = 2$ and $N(2, 10) = 4$.
+
+Let $C(n)$ be the number of integer pairs $(a, b)$ such that:
+
+- $1 ≤ a ≤ b ≤ n$,
+- $99 \times N(a, b) ≤ 100 \times P(a, b)$, and
+- $99 \times P(a, b) ≤ 100 \times N(a, b)$.
+
+For example, $C(10) = 13$, $C(500) = 16\\,676$ and $C(10\\,000) = 20\\,155\\,319$.
+
+Find $C(20\\,000\\,000)$.
+
+# --hints--
+
+`mobiusFunctionAndIntervals()` should return `198775297232878`.
+
+```js
+assert.strictEqual(mobiusFunctionAndIntervals(), 198775297232878);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function mobiusFunctionAndIntervals() {
+
+  return true;
+}
+
+mobiusFunctionAndIntervals();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-465-polar-polygons.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-465-polar-polygons.md
new file mode 100644
index 00000000000..57ad5b291d6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-465-polar-polygons.md
@@ -0,0 +1,54 @@
+---
+id: 5900f53d1000cf542c510050
+title: 'Problem 465: Polar polygons'
+challengeType: 1
+forumTopicId: 302140
+dashedName: problem-465-polar-polygons
+---
+
+# --description--
+
+The kernel of a polygon is defined by the set of points from which the entire polygon's boundary is visible. We define a polar polygon as a polygon for which the origin is strictly contained inside its kernel.
+
+For this problem, a polygon can have collinear consecutive vertices. However, a polygon still cannot have self-intersection and cannot have zero area.
+
+For example, only the first of the following is a polar polygon (the kernels of the second, third, and fourth do not strictly contain the origin, and the fifth does not have a kernel at all):
+
+<img class="img-responsive center-block" alt="five example polygons" src="https://cdn.freecodecamp.org/curriculum/project-euler/polar-polygons.png" style="background-color: white; padding: 10px;" />
+
+Notice that the first polygon has three consecutive collinear vertices.
+
+Let $P(n)$ be the number of polar polygons such that the vertices $(x, y)$ have integer coordinates whose absolute values are not greater than $n$.
+
+Note that polygons should be counted as different if they have different set of edges, even if they enclose the same area. For example, the polygon with vertices [(0,0), (0,3), (1,1), (3,0)] is distinct from the polygon with vertices [(0,0), (0,3), (1,1), (3,0), (1,0)].
+
+For example, $P(1) = 131$, $P(2) = 1\\,648\\,531$, $P(3) = 1\\,099\\,461\\,296\\,175$ and $P(343)\bmod 1\\,000\\,000\\,007 = 937\\,293\\,740$.
+
+Find $P(7^{13})\bmod 1\\,000\\,000\\,007$.
+
+# --hints--
+
+`polarPolygons()` should return `585965659`.
+
+```js
+assert.strictEqual(polarPolygons(), 585965659);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function polarPolygons() {
+
+  return true;
+}
+
+polarPolygons();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-466-distinct-terms-in-a-multiplication-table.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-466-distinct-terms-in-a-multiplication-table.md
new file mode 100644
index 00000000000..cfefe6e7b9f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-466-distinct-terms-in-a-multiplication-table.md
@@ -0,0 +1,54 @@
+---
+id: 5900f53e1000cf542c510051
+title: 'Problem 466: Distinct terms in a multiplication table'
+challengeType: 1
+forumTopicId: 302141
+dashedName: problem-466-distinct-terms-in-a-multiplication-table
+---
+
+# --description--
+
+Let $P(m,n)$ be the number of distinct terms in an $m×n$ multiplication table.
+
+For example, a 3×4 multiplication table looks like this:
+
+$$\begin{array}{c}   ×          & \mathbf{1} & \mathbf{2} & \mathbf{3} & \mathbf{4}  \\\\
+  \mathbf{1} & 1          & 2          & 3          & 4  \\\\   \mathbf{2} & 2          & 4          & 6          & 8  \\\\
+  \mathbf{3} & 3          & 6          & 9          & 12 \end{array}$$
+
+There are 8 distinct terms {1, 2, 3, 4, 6, 8, 9, 12}, therefore $P(3, 4) = 8$.
+
+You are given that:
+
+$$\begin{align}   & P(64, 64) = 1\\,263, \\\\
+  & P(12, 345) = 1\\,998, \text{ and} \\\\   & P(32, {10}^{15}) = 13\\,826\\,382\\,602\\,124\\,302. \\\\
+\end{align}$$
+
+Find $P(64, {10}^{16})$.
+
+# --hints--
+
+`multiplicationTable()` should return `258381958195474750`.
+
+```js
+assert.strictEqual(multiplicationTable(), 258381958195474750);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function multiplicationTable() {
+
+  return true;
+}
+
+multiplicationTable();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-467-superinteger.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-467-superinteger.md
new file mode 100644
index 00000000000..9b0caad1704
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-467-superinteger.md
@@ -0,0 +1,59 @@
+---
+id: 5900f5411000cf542c510052
+title: 'Problem 467: Superinteger'
+challengeType: 1
+forumTopicId: 302142
+dashedName: problem-467-superinteger
+---
+
+# --description--
+
+An integer $s$ is called a superinteger of another integer $n$ if the digits of $n$ form a subsequence of the digits of $s$.
+
+For example, 2718281828 is a superinteger of 18828, while 314159 is not a superinteger of 151.
+
+Let $p(n)$ be the $n$th prime number, and let $c(n)$ be the $n$th composite number. For example, $p(1) = 2$, $p(10) = 29$, $c(1) = 4$ and $c(10) = 18$.
+
+$$\begin{align}   & \\{p(i) : i ≥ 1\\} = \\{2, 3, 5, 7, 11, 13, 17, 19, 23, 29, \ldots \\} \\\\
+  & \\{c(i) : i ≥ 1\\} = \\{4, 6, 8, 9, 10, 12, 14, 15, 16, 18, \ldots \\} \end{align}$$
+
+Let $P^D$ the sequence of the digital roots of $\\{p(i)\\}$ ($C^D$ is defined similarly for $\\{c(i)\\}$):
+
+$$\begin{align}   & P^D = \\{2, 3, 5, 7, 2, 4, 8, 1, 5, 2, \ldots \\} \\\\
+  & C^D = \\{4, 6, 8, 9, 1, 3, 5, 6, 7, 9, \ldots \\} \end{align}$$
+
+Let $P_n$ be the integer formed by concatenating the first $n$ elements of $P^D$ ($C_n$ is defined similarly for $C^D$).
+
+$$\begin{align}   & P_{10} = 2\\,357\\,248\\,152 \\\\
+  & C_{10} = 4\\,689\\,135\\,679 \end{align}$$
+
+Let $f(n)$ be the smallest positive integer that is a common superinteger of $P_n$ and $C_n$. For example, $f(10) = 2\\,357\\,246\\,891\\,352\\,679$, and $f(100)\bmod 1\\,000\\,000\\,007 = 771\\,661\\,825$.
+
+Find $f(10\\,000)\bmod 1\\,000\\,000\\,007$.
+
+# --hints--
+
+`superinteger()` should return `775181359`.
+
+```js
+assert.strictEqual(superinteger(), 775181359);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function superinteger() {
+
+  return true;
+}
+
+superinteger();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-468-smooth-divisors-of-binomial-coefficients.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-468-smooth-divisors-of-binomial-coefficients.md
new file mode 100644
index 00000000000..dbd4119b933
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-468-smooth-divisors-of-binomial-coefficients.md
@@ -0,0 +1,54 @@
+---
+id: 5900f5411000cf542c510054
+title: 'Problem 468: Smooth divisors of binomial coefficients'
+challengeType: 1
+forumTopicId: 302143
+dashedName: problem-468-smooth-divisors-of-binomial-coefficients
+---
+
+# --description--
+
+An integer is called B-smooth if none of its prime factors is greater than $B$.
+
+Let $SB(n)$ be the largest B-smooth divisor of $n$.
+
+Examples:
+
+$$\begin{align}   & S_1(10) = 1 \\\\
+  & S_4(2\\,100) = 12 \\\\ & S_{17}(2\\,496\\,144) = 5\\,712 \end{align}$$
+
+Define $F(n) = \displaystyle\sum_{B = 1}^n \sum_{r = 0}^n S_B(\displaystyle\binom{n}{r})$. Here, $\displaystyle\binom{n}{r}$ denotes the binomial coefficient.
+
+Examples:
+
+$$\begin{align}   & F(11) = 3132 \\\\
+  & F(1\\,111)\bmod 1\\,000\\,000\\,993 = 706\\,036\\,312 \\\\ & F(111\\,111)\bmod 1\\,000\\,000\\,993 = 22\\,156\\,169 \end{align}$$
+
+Find $F(11\\,111\\,111)\bmod 1\\,000\\,000\\,993$.
+
+# --hints--
+
+`smoothDivisorsOfBinomialCoefficients()` should return `852950321`.
+
+```js
+assert.strictEqual(smoothDivisorsOfBinomialCoefficients(), 852950321);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function smoothDivisorsOfBinomialCoefficients() {
+
+  return true;
+}
+
+smoothDivisorsOfBinomialCoefficients();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-469-empty-chairs.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-469-empty-chairs.md
new file mode 100644
index 00000000000..3dce49fdd9a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-469-empty-chairs.md
@@ -0,0 +1,48 @@
+---
+id: 5900f5411000cf542c510053
+title: 'Problem 469: Empty chairs'
+challengeType: 1
+forumTopicId: 302144
+dashedName: problem-469-empty-chairs
+---
+
+# --description--
+
+In a room $N$ chairs are placed around a round table.
+
+Knights enter the room one by one and choose at random an available empty chair.
+
+To have enough elbow room the knights always leave at least one empty chair between each other.
+
+When there aren't any suitable chairs left, the fraction $C$ of empty chairs is determined. We also define $E(N)$ as the expected value of $C$.
+
+We can verify that $E(4) = \frac{1}{2}$ and $E(6) = \frac{5}{9}$.
+
+Find $E({10}^{18})$. Give your answer rounded to fourteen decimal places in the form 0.abcdefghijklmn.
+
+# --hints--
+
+`emptyChairs()` should return `0.56766764161831`.
+
+```js
+assert.strictEqual(emptyChairs(), 0.56766764161831);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function emptyChairs() {
+
+  return true;
+}
+
+emptyChairs();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-47-distinct-primes-factors.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-47-distinct-primes-factors.md
new file mode 100644
index 00000000000..978b7affd9b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-47-distinct-primes-factors.md
@@ -0,0 +1,91 @@
+---
+id: 5900f39c1000cf542c50feae
+title: 'Problem 47: Distinct primes factors'
+challengeType: 1
+forumTopicId: 302145
+dashedName: problem-47-distinct-primes-factors
+---
+
+# --description--
+
+The first two consecutive numbers to have two distinct prime factors are:
+
+<div style='padding-left: 4em;'>
+  14 = 2 × 7<br>
+  15 = 3 × 5
+</div>
+
+The first three consecutive numbers to have three distinct prime factors are:
+
+<div style='padding-left: 4em;'>
+  644 = 2<sup>2</sup> × 7 × 23<br>
+  645 = 3 × 5 × 43<br>
+  646 = 2 × 17 × 19
+</div>
+
+Find the first four consecutive integers to have four distinct prime factors each. What is the first of these numbers?
+
+# --hints--
+
+`distinctPrimeFactors(2, 2)` should return a number.
+
+```js
+assert(typeof distinctPrimeFactors(2, 2) === 'number');
+```
+
+`distinctPrimeFactors(2, 2)` should return 14.
+
+```js
+assert.strictEqual(distinctPrimeFactors(2, 2), 14);
+```
+
+`distinctPrimeFactors(3, 3)` should return 644.
+
+```js
+assert.strictEqual(distinctPrimeFactors(3, 3), 644);
+```
+
+`distinctPrimeFactors(4, 4)` should return 134043.
+
+```js
+assert.strictEqual(distinctPrimeFactors(4, 4), 134043);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function distinctPrimeFactors(targetNumPrimes, targetConsecutive) {
+
+  return true;
+}
+
+distinctPrimeFactors(4, 4);
+```
+
+# --solutions--
+
+```js
+// Initalize factor count with seive
+const NUMFACTORS = Array(135000).fill(0);
+(function initFactors(num) {
+  for (let i = 2; i < num; i++)
+    if (NUMFACTORS[i] === 0)
+      for (let j = i; j < num; j += i)
+        NUMFACTORS[j]++;
+})(135000);
+
+function distinctPrimeFactors(targetNumPrimes, targetConsecutive) {
+  let numConsecutive = 0;
+  let currNumber = 10;
+  while (numConsecutive < targetConsecutive) {
+    if (NUMFACTORS[currNumber] === targetNumPrimes)
+      numConsecutive++;
+    else
+      numConsecutive = 0;
+    currNumber++;
+  }
+  return currNumber - targetConsecutive;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-470-super-ramvok.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-470-super-ramvok.md
new file mode 100644
index 00000000000..7d0f1aad0ee
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-470-super-ramvok.md
@@ -0,0 +1,50 @@
+---
+id: 5900f5431000cf542c510055
+title: 'Problem 470: Super Ramvok'
+challengeType: 1
+forumTopicId: 302146
+dashedName: problem-470-super-ramvok
+---
+
+# --description--
+
+Consider a single game of Ramvok:
+
+Let $t$ represent the maximum number of turns the game lasts. If $t = 0$, then the game ends immediately. Otherwise, on each turn $i$, the player rolls a die. After rolling, if $i &lt; t$ the player can either stop the game and receive a prize equal to the value of the current roll, or discard the roll and try again next turn. If $i = t$, then the roll cannot be discarded and the prize must be accepted. Before the game begins, $t$ is chosen by the player, who must then pay an up-front cost $ct$ for some constant $c$. For $c = 0$, $t$ can be chosen to be infinite (with an up-front cost of 0). Let $R(d, c)$ be the expected profit (i.e. net gain) that the player receives from a single game of optimally-played Ramvok, given a fair $d$-sided die and cost constant $c$. For example, $R(4, 0.2) = 2.65$. Assume that the player has sufficient funds for paying any/all up-front costs.
+
+Now consider a game of Super Ramvok:
+
+In Super Ramvok, the game of Ramvok is played repeatedly, but with a slight modification. After each game, the die is altered. The alteration process is as follows: The die is rolled once, and if the resulting face has its pips visible, then that face is altered to be blank instead. If the face is already blank, then it is changed back to its original value. After the alteration is made, another game of Ramvok can begin (and during such a game, at each turn, the die is rolled until a face with a value on it appears). The player knows which faces are blank and which are not at all times. The game of Super Ramvok ends once all faces of the die are blank.
+
+Let $S(d, c)$ be the expected profit that the player receives from an optimally-played game of Super Ramvok, given a fair $d$-sided die to start (with all sides visible), and cost constant $c$. For example, $S(6, 1) = 208.3$.
+
+Let $F(n) = \sum_{4 ≤ d ≤ n} \sum_{0 ≤ c ≤ n} S(d, c)$.
+
+Calculate $F(20)$, rounded to the nearest integer.
+
+# --hints--
+
+`superRamvok()` should return `147668794`.
+
+```js
+assert.strictEqual(superRamvok(), 147668794);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function superRamvok() {
+
+  return true;
+}
+
+superRamvok();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-471-triangle-inscribed-in-ellipse.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-471-triangle-inscribed-in-ellipse.md
new file mode 100644
index 00000000000..87fba0ff50a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-471-triangle-inscribed-in-ellipse.md
@@ -0,0 +1,60 @@
+---
+id: 5900f5431000cf542c510056
+title: 'Problem 471: Triangle inscribed in ellipse'
+challengeType: 1
+forumTopicId: 302148
+dashedName: problem-471-triangle-inscribed-in-ellipse
+---
+
+# --description--
+
+The triangle $ΔABC$ is inscribed in an ellipse with equation $\frac{x^2}{a^2} + \frac{y^2}{b^2} = 1$, $0 &lt; 2b &lt; a$, $a$ and $b$ integers.
+
+Let $r(a, b)$ be the radius of the incircle of $ΔABC$ when the incircle has center $(2b, 0)$ and $A$ has coordinates $\left(\frac{a}{2}, \frac{\sqrt{3}}{2}b\right)$.
+
+For example, $r(3, 1) = \frac{1}{2}, r(6, 2) = 1, r(12, 3) = 2$.
+
+<img class="img-responsive center-block" alt="triangle ΔABC inscribed in an ellipse, radius of the incircle of ΔABC r(6, 2) = 1" src="https://cdn.freecodecamp.org/curriculum/project-euler/triangle-inscribed-in-ellipse-1.png" style="background-color: white; padding: 10px;" />
+
+<img class="img-responsive center-block" alt="triangle ΔABC inscribed in an ellipse, radius of the incircle of ΔABC r(12, 3) = 2" src="https://cdn.freecodecamp.org/curriculum/project-euler/triangle-inscribed-in-ellipse-2.png" style="background-color: white; padding: 10px;" />
+
+Let $G(n) = \sum_{a = 3}^n \sum_{b = 1}^{\left\lfloor\frac{a - 1}{2} \right\rfloor} r(a, b)$
+
+You are given $G(10) = 20.59722222$, $G(100) = 19223.60980$ (rounded to 10 significant digits).
+
+Find $G({10}^{11})$. Give your answer as a string in scientific notation rounded to 10 significant digits. Use a lowercase `e` to separate mantissa and exponent.
+
+For $G(10)$ the answer would have been `2.059722222e1`
+
+# --hints--
+
+`triangleInscribedInEllipse()` should return a string.
+
+```js
+assert(typeof triangleInscribedInEllipse() === 'string');
+```
+
+`triangleInscribedInEllipse()` should return the string `1.895093981e31`.
+
+```js
+assert.strictEqual(triangleInscribedInEllipse(), '1.895093981e31');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function triangleInscribedInEllipse() {
+
+  return true;
+}
+
+triangleInscribedInEllipse();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-472-comfortable-distance-ii.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-472-comfortable-distance-ii.md
new file mode 100644
index 00000000000..25c9c601cf6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-472-comfortable-distance-ii.md
@@ -0,0 +1,56 @@
+---
+id: 5900f5451000cf542c510057
+title: 'Problem 472: Comfortable Distance II'
+challengeType: 1
+forumTopicId: 302149
+dashedName: problem-472-comfortable-distance-ii
+---
+
+# --description--
+
+There are $N$ seats in a row. $N$ people come one after another to fill the seats according to the following rules:
+
+1. No person sits beside another.
+1. The first person chooses any seat.
+1. Each subsequent person chooses the seat furthest from anyone else already seated, as long as it does not violate rule 1. If there is more than one choice satisfying this condition, then the person chooses the leftmost choice.
+
+Note that due to rule 1, some seats will surely be left unoccupied, and the maximum number of people that can be seated is less than $N$ (for $N > 1$).
+
+Here are the possible seating arrangements for $N = 15$:
+
+<img class="img-responsive center-block" alt="seating arrangements for N = 15" src="https://cdn.freecodecamp.org/curriculum/project-euler/comfortable-distance-ii.png" style="background-color: white; padding: 10px;" />
+
+We see that if the first person chooses correctly, the 15 seats can seat up to 7 people. We can also see that the first person has 9 choices to maximize the number of people that may be seated.
+
+Let $f(N)$ be the number of choices the first person has to maximize the number of occupants for $N$ seats in a row. Thus, $f(1) = 1$, $f(15) = 9$, $f(20) = 6$, and $f(500) = 16$.
+
+Also, $\sum f(N) = 83$ for $1 ≤ N ≤ 20$ and $\sum f(N) = 13\\,343$ for $1 ≤ N ≤ 500$.
+
+Find $\sum f(N)$ for $1 ≤ N ≤ {10}^{12}$. Give the last 8 digits of your answer.
+
+# --hints--
+
+`comfortableDistanceTwo()` should return `73811586`.
+
+```js
+assert.strictEqual(comfortableDistanceTwo(), 73811586);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function comfortableDistanceTwo() {
+
+  return true;
+}
+
+comfortableDistanceTwo();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-473-phigital-number-base.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-473-phigital-number-base.md
new file mode 100644
index 00000000000..97a545fed4c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-473-phigital-number-base.md
@@ -0,0 +1,56 @@
+---
+id: 5900f5461000cf542c510058
+title: 'Problem 473: Phigital number base'
+challengeType: 1
+forumTopicId: 302150
+dashedName: problem-473-phigital-number-base
+---
+
+# --description--
+
+Let $\varphi$ be the golden ratio: $\varphi = \frac{1+\sqrt{5}}{2}.$
+
+Remarkably it is possible to write every positive integer as a sum of powers of $\varphi$ even if we require that every power of $\varphi$ is used at most once in this sum.
+
+Even then this representation is not unique.
+
+We can make it unique by requiring that no powers with consecutive exponents are used and that the representation is finite.
+
+E.g:
+
+$2 = \varphi + \varphi^{-2}$ and $3 = \varphi^{2} + \varphi^{-2}$
+
+To represent this sum of powers of $\varphi$ we use a string of 0's and 1's with a point to indicate where the negative exponents start. We call this the representation in the phigital numberbase.
+
+So $1 = 1_{\varphi}$, $2 = 10.01_{\varphi}$, $3 = 100.01_{\varphi}$ and $14 = 100100.001001_{\varphi}$. The strings representing 1, 2 and 14 in the phigital number base are palindromic, while the string representing 3 is not (the phigital point is not the middle character).
+
+The sum of the positive integers not exceeding 1000 whose phigital representation is palindromic is 4345.
+
+Find the sum of the positive integers not exceeding $10^{10}$ whose phigital representation is palindromic.
+
+# --hints--
+
+`phigitalNumberBase()` should return `35856681704365`.
+
+```js
+assert.strictEqual(phigitalNumberBase(), 35856681704365);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function phigitalNumberBase() {
+
+  return true;
+}
+
+phigitalNumberBase();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-474-last-digits-of-divisors.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-474-last-digits-of-divisors.md
new file mode 100644
index 00000000000..e63a971d336
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-474-last-digits-of-divisors.md
@@ -0,0 +1,44 @@
+---
+id: 5900f5471000cf542c510059
+title: 'Problem 474: Last digits of divisors'
+challengeType: 1
+forumTopicId: 302151
+dashedName: problem-474-last-digits-of-divisors
+---
+
+# --description--
+
+For a positive integer $n$ and digits $d$, we define $F(n, d)$ as the number of the divisors of $n$ whose last digits equal $d$.
+
+For example, $F(84, 4) = 3$. Among the divisors of 84 (1, 2, 3, 4, 6, 7, 12, 14, 21, 28, 42, 84), three of them (4, 14, 84) have the last digit 4.
+
+We can also verify that $F(12!, 12) = 11$ and $F(50!, 123) = 17\\,888$.
+
+Find $F({10}^6!, 65\\,432) \text{ modulo } ({10}^{16} + 61)$.
+
+# --hints--
+
+`lastDigitsOfDivisors()` should return `9690646731515010`.
+
+```js
+assert.strictEqual(lastDigitsOfDivisors(), 9690646731515010);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function lastDigitsOfDivisors() {
+
+  return true;
+}
+
+lastDigitsOfDivisors();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-475-music-festival.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-475-music-festival.md
new file mode 100644
index 00000000000..9f019e969d0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-475-music-festival.md
@@ -0,0 +1,48 @@
+---
+id: 5900f5481000cf542c51005a
+title: 'Problem 475: Music festival'
+challengeType: 1
+forumTopicId: 302152
+dashedName: problem-475-music-festival
+---
+
+# --description--
+
+$12n$ musicians participate at a music festival. On the first day, they form $3n$ quartets and practice all day.
+
+It is a disaster. At the end of the day, all musicians decide they will never again agree to play with any member of their quartet.
+
+On the second day, they form $4n$ trios, each musician avoiding his previous quartet partners.
+
+Let $f(12n)$ be the number of ways to organize the trios amongst the $12n$ musicians.
+
+You are given $f(12) = 576$ and $f(24)\bmod 1\\,000\\,000\\,007 = 509\\,089\\,824$.
+
+Find $f(600)\bmod 1\\,000\\,000\\,007$.
+
+# --hints--
+
+`musicFestival()` should return `75780067`.
+
+```js
+assert.strictEqual(musicFestival(), 75780067);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function musicFestival() {
+
+  return true;
+}
+
+musicFestival();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-476-circle-packing-ii.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-476-circle-packing-ii.md
new file mode 100644
index 00000000000..c6f88e38013
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-476-circle-packing-ii.md
@@ -0,0 +1,44 @@
+---
+id: 5900f5481000cf542c51005b
+title: 'Problem 476: Circle Packing II'
+challengeType: 1
+forumTopicId: 302153
+dashedName: problem-476-circle-packing-ii
+---
+
+# --description--
+
+Let $R(a, b, c)$ be the maximum area covered by three non-overlapping circles inside a triangle with edge lengths $a$, $b$ and $c$.
+
+Let $S(n)$ be the average value of $R(a, b, c)$ over all integer triplets $(a, b, c)$ such that $1 ≤ a ≤ b ≤ c &lt; a + b ≤ n$.
+
+You are given $S(2) = R(1, 1, 1) ≈ 0.31998$, $S(5) ≈ 1.25899$.
+
+Find $S(1803)$ rounded to 5 decimal places behind the decimal point.
+
+# --hints--
+
+`circlePackingTwo()` should return `110242.87794`.
+
+```js
+assert.strictEqual(circlePackingTwo(), 110242.87794);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function circlePackingTwo() {
+
+  return true;
+}
+
+circlePackingTwo();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-477-number-sequence-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-477-number-sequence-game.md
new file mode 100644
index 00000000000..18bcc8e538b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-477-number-sequence-game.md
@@ -0,0 +1,62 @@
+---
+id: 5900f54a1000cf542c51005c
+title: 'Problem 477: Number Sequence Game'
+challengeType: 1
+forumTopicId: 302154
+dashedName: problem-477-number-sequence-game
+---
+
+# --description--
+
+The number sequence game starts with a sequence $S$ of $N$ numbers written on a line.
+
+Two players alternate turns. At his turn, a player must select and remove either the first or the last number remaining in the sequence.
+
+The player score is the sum of all the numbers he has taken. Each player attempts to maximize his own sum.
+
+If $N = 4$ and $S = \\{1, 2, 10, 3\\}$, then each player maximizes his score as follows:
+
+- Player 1: removes the first number (1)
+- Player 2: removes the last number from the remaining sequence (3)
+- Player 1: removes the last number from the remaining sequence (10)
+- Player 2: removes the remaining number (2)
+
+Player 1 score is $1 + 10 = 11$.
+
+Let $F(N)$ be the score of player 1 if both players follow the optimal strategy for the sequence $S = \\{s_1, s_2, \ldots, s_N\\}$ defined as:
+
+- $s_1 = 0$
+- $s_{i + 1} = ({s_i}^2 + 45)$ modulo $1\\,000\\,000\\,007$
+
+The sequence begins with $S = \\{0, 45, 2\\,070, 4\\,284\\,945, 753\\,524\\,550, 478\\,107\\,844, 894\\,218\\,625, \ldots\\}$.
+
+You are given $F(2) = 45$, $F(4) = 4\\,284\\,990$, $F(100) = 26\\,365\\,463\\,243$, $F(104) = 2\\,495\\,838\\,522\\,951$.
+
+Find $F({10}^8)$.
+
+# --hints--
+
+`numberSequenceGame()` should return `25044905874565164`.
+
+```js
+assert.strictEqual(numberSequenceGame(), 25044905874565164);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function numberSequenceGame() {
+
+  return true;
+}
+
+numberSequenceGame();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-478-mixtures.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-478-mixtures.md
new file mode 100644
index 00000000000..d2f0dbd2054
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-478-mixtures.md
@@ -0,0 +1,56 @@
+---
+id: 5900f54c1000cf542c51005e
+title: 'Problem 478: Mixtures'
+challengeType: 1
+forumTopicId: 302155
+dashedName: problem-478-mixtures
+---
+
+# --description--
+
+Let us consider mixtures of three substances: $A$, $B$ and $C$. A mixture can be described by a ratio of the amounts of $A$, $B$, and $C$ in it, i.e., $(a : b : c)$. For example, a mixture described by the ratio (2 : 3 : 5) contains 20% $A$, 30% $B$ and 50% $C$.
+
+For the purposes of this problem, we cannot separate the individual components from a mixture. However, we can combine different amounts of different mixtures to form mixtures with new ratios.
+
+For example, say we have three mixtures with ratios (3 : 0 : 2), (3 : 6 : 11) and (3 : 3 : 4). By mixing 10 units of the first, 20 units of the second and 30 units of the third, we get a new mixture with ratio (6 : 5 : 9), since: ($10 \times \frac{3}{5} + 20 \times \frac{3}{20} + 30 \times \frac{3}{10}$ : $10 \times \frac{0}{5} + 20 \times \frac{6}{20} + 30 \times \frac{3}{10}$ : $10 \times \frac{2}{5} + 20 \times \frac{11}{20} + 30 \times \frac{4}{10}$) = (18 : 15 : 27) = (6 : 5 : 9)
+
+However, with the same three mixtures, it is impossible to form the ratio (3 : 2 : 1), since the amount of $B$ is always less than the amount of $C$.
+
+Let $n$ be a positive integer. Suppose that for every triple of integers $(a, b, c)$ with $0 ≤ a, b, c ≤ n$ and $gcd(a, b, c) = 1$, we have a mixture with ratio $(a : b : c)$. Let $M(n)$ be the set of all such mixtures.
+
+For example, $M(2)$ contains the 19 mixtures with the following ratios:
+
+{(0 : 0 : 1), (0 : 1 : 0), (0 : 1 : 1), (0 : 1 : 2), (0 : 2 : 1), (1 : 0 : 0), (1 : 0 : 1), (1 : 0 : 2), (1 : 1 : 0), (1 : 1 : 1), (1 : 1 : 2), (1 : 2 : 0), (1 : 2 : 1), (1 : 2 : 2), (2 : 0 : 1), (2 : 1 : 0), (2 : 1 : 1), (2 : 1 : 2), (2 : 2 : 1)}.
+
+Let $E(n)$ be the number of subsets of $M(n)$ which can produce the mixture with ratio (1 : 1 : 1), i.e., the mixture with equal parts $A$, $B$ and $C$.
+
+We can verify that $E(1) = 103$, $E(2) = 520\\,447$, $E(10)\bmod {11}^8 = 82\\,608\\,406$ and $E(500)\bmod {11}^8 = 13\\,801\\,403$.
+
+Find $E(10\\,000\\,000)\bmod {11}^8$.
+
+# --hints--
+
+`mixtures()` should return `59510340`.
+
+```js
+assert.strictEqual(mixtures(), 59510340);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function mixtures() {
+
+  return true;
+}
+
+mixtures();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-479-roots-on-the-rise.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-479-roots-on-the-rise.md
new file mode 100644
index 00000000000..b905a648468
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-479-roots-on-the-rise.md
@@ -0,0 +1,46 @@
+---
+id: 5900f54b1000cf542c51005d
+title: 'Problem 479: Roots on the Rise'
+challengeType: 1
+forumTopicId: 302156
+dashedName: problem-479-roots-on-the-rise
+---
+
+# --description--
+
+Let $a_k$, $b_k$, and $c_k$ represent the three solutions (real or complex numbers) to the expression $\frac{1}{x} = {\left(\frac{k}{x} \right)}^2 (k + x^2) - kx$.
+
+For instance, for $k = 5$, we see that $\\{a_5, b_5, c_5\\}$ is approximately $\\{5.727244, -0.363622 + 2.057397i, -0.363622 - 2.057397i\\}$.
+
+Let $S(n) = \displaystyle\sum_{p = 1}^n \sum_{k = 1}^n {(a_k + b_k)}^p {(b_k + c_k)}^p {(c_k + a_k)}^p$ for all integers $p$, $k$ such that $1 ≤ p, k ≤ n$.
+
+Interestingly, $S(n)$ is always an integer. For example, $S(4) = 51\\,160$.
+
+Find $S({10}^6) \text{ modulo } 1\\,000\\,000\\,007$.
+
+# --hints--
+
+`rootsOnTheRise()` should return `191541795`.
+
+```js
+assert.strictEqual(rootsOnTheRise(), 191541795);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function rootsOnTheRise() {
+
+  return true;
+}
+
+rootsOnTheRise();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-48-self-powers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-48-self-powers.md
new file mode 100644
index 00000000000..d429c978791
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-48-self-powers.md
@@ -0,0 +1,80 @@
+---
+id: 5900f39c1000cf542c50feaf
+title: 'Problem 48: Self powers'
+challengeType: 1
+forumTopicId: 302157
+dashedName: problem-48-self-powers
+---
+
+# --description--
+
+The series, 1<sup>1</sup> + 2<sup>2</sup> + 3<sup>3</sup> + ... + 10<sup>10</sup> = 10405071317.
+
+Find the last ten digits of the series, 1<sup>1</sup> + 2<sup>2</sup> + 3<sup>3</sup> + ... + 1000<sup>1000</sup>.
+
+# --hints--
+
+`selfPowers(10, 3)` should return a number.
+
+```js
+assert(typeof selfPowers(10, 3) === 'number');
+```
+
+`selfPowers(10, 3)` should return 317.
+
+```js
+assert.strictEqual(selfPowers(10, 3), 317);
+```
+
+`selfPowers(150, 6)` should return 29045.
+
+```js
+assert.strictEqual(selfPowers(150, 6), 29045);
+```
+
+`selfPowers(673, 7)` should return 2473989.
+
+```js
+assert.strictEqual(selfPowers(673, 7), 2473989);
+```
+
+`selfPowers(1000, 10)` should return 9110846700.
+
+```js
+assert.strictEqual(selfPowers(1000, 10), 9110846700);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function selfPowers(power, lastDigits) {
+
+  return true;
+}
+
+selfPowers(1000, 10);
+```
+
+# --solutions--
+
+```js
+function selfPowers(power, lastDigits) {
+  let sum = 0;
+  const modulo = Math.pow(10, lastDigits);
+
+  for (let i = 1; i <= power; i++) {
+    let temp = i;
+    for (let j = 1; j < i; j++) {
+      temp *= i;
+      temp %= modulo;
+    }
+
+    sum += temp;
+    sum %= modulo;
+  }
+
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-480-the-last-question.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-480-the-last-question.md
new file mode 100644
index 00000000000..b07b59bb692
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-480-the-last-question.md
@@ -0,0 +1,82 @@
+---
+id: 5900f54c1000cf542c51005f
+title: 'Problem 480: The Last Question'
+challengeType: 1
+forumTopicId: 302158
+dashedName: problem-480-the-last-question
+---
+
+# --description--
+
+Consider all the words which can be formed by selecting letters, in any order, from the phrase:
+
+$$\mathbf{\text{thereisasyetinsufficientdataforameaningfulanswer}}$$
+
+Suppose those with 15 letters or less are listed in alphabetical order and numbered sequentially starting at 1.
+
+The list would include:
+
+$$\begin{align}   & 1: \text{a} \\\\
+  & 2: \text{aa} \\\\   & 3: \text{aaa} \\\\
+  & 4: \text{aaaa} \\\\   & 5: \text{aaaaa} \\\\
+  & 6: \text{aaaaaa} \\\\   & 7: \text{aaaaaac} \\\\
+  & 8: \text{aaaaaacd} \\\\   & 9: \text{aaaaaacde} \\\\
+  & 10: \text{aaaaaacdee} \\\\   & 11: \text{aaaaaacdeee} \\\\
+  & 12: \text{aaaaaacdeeee} \\\\   & 13: \text{aaaaaacdeeeee} \\\\
+  & 14: \text{aaaaaacdeeeeee} \\\\   & 15: \text{aaaaaacdeeeeeef} \\\\
+  & 16: \text{aaaaaacdeeeeeeg} \\\\   & 17: \text{aaaaaacdeeeeeeh} \\\\
+  & \ldots \\\\   & 28: \text{aaaaaacdeeeeeey} \\\\
+  & 29: \text{aaaaaacdeeeeef} \\\\   & 30: \text{aaaaaacdeeeeefe} \\\\
+  & \ldots \\\\   & 115246685191495242: \text{euleoywuttttsss} \\\\
+  & 115246685191495243: \text{euler} \\\\   & 115246685191495244: \text{eulera} \\\\
+  & ... \\\\   & 525069350231428029: \text{ywuuttttssssrrr} \\\\
+\end{align}$$
+
+Define $P(w)$ as the position of the word $w$.
+
+Define $W(p)$ as the word in position $p$.
+
+We can see that $P(w)$ and $W(p)$ are inverses: $P(W(p)) = p$ and $W(P(w)) = w$.
+
+Examples:
+
+$$\begin{align}   & W(10) = \text{ aaaaaacdee} \\\\
+  & P(\text{aaaaaacdee}) = 10 \\\\   & W(115246685191495243) = \text{ euler} \\\\
+  & P(\text{euler}) = 115246685191495243 \\\\ \end{align}$$
+
+Find $$W(P(\text{legionary}) + P(\text{calorimeters}) - P(\text{annihilate}) + P(\text{orchestrated}) - P(\text{fluttering})).$$
+
+Give your answer using lowercase characters (no punctuation or space).
+
+# --hints--
+
+`euler480()` should return a string.
+
+```js
+assert(typeof euler480() === 'string');
+```
+
+`euler480()` should return the string `turnthestarson`.
+
+```js
+assert.strictEqual(euler480(), 'turnthestarson');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function euler480() {
+
+  return true;
+}
+
+euler480();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-49-prime-permutations.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-49-prime-permutations.md
new file mode 100644
index 00000000000..3c0c1d3d362
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-49-prime-permutations.md
@@ -0,0 +1,93 @@
+---
+id: 5900f39d1000cf542c50feb0
+title: 'Problem 49: Prime permutations'
+challengeType: 1
+forumTopicId: 302159
+dashedName: problem-49-prime-permutations
+---
+
+# --description--
+
+The arithmetic sequence, 1487, 4817, 8147, in which each of the terms increases by 3330, is unusual in two ways: (i) each of the three terms are prime, and, (ii) each of the 4-digit numbers are permutations of one another.
+
+There are no arithmetic sequences made up of three 1-, 2-, or 3-digit primes, exhibiting this property, but there is one other 4-digit increasing sequence.
+
+What 12-digit number do you form by concatenating the three terms in this sequence?
+
+# --hints--
+
+`primePermutations()` should return a number.
+
+```js
+assert(typeof primePermutations() === 'number');
+```
+
+`primePermutations()` should return 296962999629.
+
+```js
+assert.strictEqual(primePermutations(), 296962999629);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primePermutations() {
+
+  return true;
+}
+
+primePermutations();
+```
+
+# --solutions--
+
+```js
+function primePermutations() {
+  function arePermutations(num1, num2) {
+    const numStr1 = num1.toString();
+    let numStr2 = num2.toString();
+    if (numStr1.length !== numStr2.length) {
+      return false;
+    }
+
+    for (let i = 0; i < numStr1.length; i++) {
+      const index = numStr2.indexOf(numStr1[i]);
+      if (index === -1) {
+        return false;
+      }
+      numStr2 = numStr2.slice(0, index) + numStr2.slice(index + 1);
+    }
+    return true;
+  }
+
+  function isPrime(num) {
+    if (num < 2) {
+      return false;
+    } else if (num === 2) {
+      return true;
+    }
+    const sqrtOfNum = Math.floor(num ** 0.5);
+    for (let i = 2; i <= sqrtOfNum + 1; i++) {
+      if (num % i === 0) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  for (let num1 = 1000; num1 <= 9999; num1++) {
+    const num2 = num1 + 3330;
+    const num3 = num2 + 3330;
+    if (isPrime(num1) && isPrime(num2) && isPrime(num3)) {
+      if (arePermutations(num1, num2) && arePermutations(num1, num3)
+        && num1 !== 1487) {
+        // concatenate and return numbers
+        return (num1 * 100000000) + (num2 * 10000) + num3;
+      }
+    }
+  }
+  return 0;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-5-smallest-multiple.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-5-smallest-multiple.md
new file mode 100644
index 00000000000..2f20bceaadf
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-5-smallest-multiple.md
@@ -0,0 +1,83 @@
+---
+id: 5900f3711000cf542c50fe84
+title: 'Problem 5: Smallest multiple'
+challengeType: 1
+forumTopicId: 302160
+dashedName: problem-5-smallest-multiple
+---
+
+# --description--
+
+2520 is the smallest number that can be divided by each of the numbers from 1 to 10 without any remainder.
+
+What is the smallest positive number that is evenly divisible by all of the numbers from 1 to `n`?
+
+# --hints--
+
+`smallestMult(5)` should return a number.
+
+```js
+assert(typeof smallestMult(5) === 'number');
+```
+
+`smallestMult(5)` should return 60.
+
+```js
+assert.strictEqual(smallestMult(5), 60);
+```
+
+`smallestMult(7)` should return 420.
+
+```js
+assert.strictEqual(smallestMult(7), 420);
+```
+
+`smallestMult(10)` should return 2520.
+
+```js
+assert.strictEqual(smallestMult(10), 2520);
+```
+
+`smallestMult(13)` should return 360360.
+
+```js
+assert.strictEqual(smallestMult(13), 360360);
+```
+
+`smallestMult(20)` should return 232792560.
+
+```js
+assert.strictEqual(smallestMult(20), 232792560);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function smallestMult(n) {
+
+  return true;
+}
+
+smallestMult(20);
+```
+
+# --solutions--
+
+```js
+function smallestMult(n){
+  function gcd(a, b) {
+    return b === 0 ? a : gcd(b, a%b); // Euclidean algorithm
+  }
+
+  function lcm(a, b) {
+    return a * b / gcd(a, b);
+  }
+  var result = 1;
+  for(var i = 2; i <= n; i++) {
+    result = lcm(result, i);
+  }
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-50-consecutive-prime-sum.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-50-consecutive-prime-sum.md
new file mode 100644
index 00000000000..861a3e99a8e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-50-consecutive-prime-sum.md
@@ -0,0 +1,123 @@
+---
+id: 5900f39e1000cf542c50feb1
+title: 'Problem 50: Consecutive prime sum'
+challengeType: 1
+forumTopicId: 302161
+dashedName: problem-50-consecutive-prime-sum
+---
+
+# --description--
+
+The prime 41, can be written as the sum of six consecutive primes:
+
+<div style='text-align: center;'>41 = 2 + 3 + 5 + 7 + 11 + 13</div>
+
+This is the longest sum of consecutive primes that adds to a prime below one-hundred.
+
+The longest sum of consecutive primes below one-thousand that adds to a prime, contains 21 terms, and is equal to 953.
+
+Which prime, below one-million, can be written as the sum of the most consecutive primes?
+
+# --hints--
+
+`consecutivePrimeSum(1000)` should return a number.
+
+```js
+assert(typeof consecutivePrimeSum(1000) === 'number');
+```
+
+`consecutivePrimeSum(1000)` should return 953.
+
+```js
+assert.strictEqual(consecutivePrimeSum(1000), 953);
+```
+
+`consecutivePrimeSum(1000000)` should return 997651.
+
+```js
+assert.strictEqual(consecutivePrimeSum(1000000), 997651);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function consecutivePrimeSum(limit) {
+
+  return true;
+}
+
+consecutivePrimeSum(1000000);
+```
+
+# --solutions--
+
+```js
+// Initalize prime number list with sieve
+const NUM_PRIMES = 1000000;
+const PRIMES = [2];
+const PRIME_SIEVE = Array(Math.floor((NUM_PRIMES-1)/2)).fill(true);
+(function initPrimes(num) {
+  const upper = Math.floor((num - 1) / 2);
+  const sqrtUpper = Math.floor((Math.sqrt(num) - 1) / 2);
+  for (let i = 0; i <= sqrtUpper; i++) {
+    if (PRIME_SIEVE[i]) {
+      // Mark value in PRIMES array
+      const prime = 2 * i + 3;
+      PRIMES.push(prime);
+      // Mark all multiples of this number as false (not prime)
+      const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
+      for (let j = primeSqaredIndex; j < upper; j += prime)
+        PRIME_SIEVE[j] = false;
+    }
+  }
+  for (let i = sqrtUpper + 1; i < upper; i++) {
+    if (PRIME_SIEVE[i])
+      PRIMES.push(2 * i + 3);
+  }
+})(NUM_PRIMES);
+
+function isPrime(num) {
+  if (num === 2)
+    return true;
+  else if (num % 2 === 0)
+    return false
+  else
+    return PRIME_SIEVE[(num - 3) / 2];
+}
+
+function consecutivePrimeSum(limit) {
+  // Initalize for longest sum < 100
+  let bestPrime = 41;
+  let bestI = 0;
+  let bestJ = 5;
+
+  // Find longest sum < limit
+  let sumOfCurrRange = 41;
+  let i = 0, j = 5;
+  // -- Loop while current some starting at i is < limit
+  while (sumOfCurrRange < limit) {
+    let currSum = sumOfCurrRange;
+    // -- Loop while pushing j towards end of PRIMES list
+    //      keeping sum under limit
+    while (currSum < limit) {
+      if (isPrime(currSum)) {
+        bestPrime = sumOfCurrRange = currSum;
+        bestI = i;
+        bestJ = j;
+      }
+      // -- Increment inner loop
+      j++;
+      currSum += PRIMES[j];
+    }
+    // -- Increment outer loop
+    i++;
+    j = i + (bestJ - bestI);
+    sumOfCurrRange -= PRIMES[i - 1];
+    sumOfCurrRange += PRIMES[j];
+  }
+  // Return
+  return bestPrime;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-51-prime-digit-replacements.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-51-prime-digit-replacements.md
new file mode 100644
index 00000000000..26aed0ce89a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-51-prime-digit-replacements.md
@@ -0,0 +1,128 @@
+---
+id: 5900f39f1000cf542c50feb2
+title: 'Problem 51: Prime digit replacements'
+challengeType: 1
+forumTopicId: 302162
+dashedName: problem-51-prime-digit-replacements
+---
+
+# --description--
+
+By replacing the 1st digit of the 2-digit number \*3, it turns out that six of the nine possible values: 13, 23, 43, 53, 73, and 83, are all prime.
+
+By replacing the 3rd and 4th digits of 56\*\*3 with the same digit, this 5-digit number is the first example having seven primes among the ten generated numbers, yielding the family: 56003, 56113, 56333, 56443, 56663, 56773, and 56993. Consequently 56003, being the first member of this family, is the smallest prime with this property.
+
+Find the smallest prime which, by replacing part of the number (not necessarily adjacent digits) with the same digit, is part of an `n` prime value family.
+
+# --hints--
+
+`primeDigitReplacements(6)` should return a number.
+
+```js
+assert(typeof primeDigitReplacements(6) === 'number');
+```
+
+`primeDigitReplacements(6)` should return `13`.
+
+```js
+assert.strictEqual(primeDigitReplacements(6), 13);
+```
+
+`primeDigitReplacements(7)` should return `56003`.
+
+```js
+assert.strictEqual(primeDigitReplacements(7), 56003);
+```
+
+`primeDigitReplacements(8)` should return `121313`.
+
+```js
+assert.strictEqual(primeDigitReplacements(8), 121313);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeDigitReplacements(n) {
+
+  return true;
+}
+
+primeDigitReplacements(6);
+```
+
+# --solutions--
+
+```js
+const NUM_PRIMES = 1000000;
+const PRIME_SEIVE = Array(Math.floor((NUM_PRIMES-1)/2)).fill(true);
+(function initPrimes(num) {
+  const upper = Math.floor((num - 1) / 2);
+  const sqrtUpper = Math.floor((Math.sqrt(num) - 1) / 2);
+  for (let i = 0; i <= sqrtUpper; i++) {
+    if (PRIME_SEIVE[i]) {
+      // Mark value in PRIMES array
+      const prime = 2 * i + 3;
+      // Mark all multiples of this number as false (not prime)
+      const primeSqaredIndex = 2 * i ** 2 + 6 * i + 3;
+      for (let j = primeSqaredIndex; j < upper; j += prime) {
+        PRIME_SEIVE[j] = false;
+      }
+    }
+  }
+})(NUM_PRIMES);
+
+function isPrime(num) {
+  if (num === 2) return true;
+  else if (num % 2 === 0) return false
+  else return PRIME_SEIVE[(num - 3) / 2];
+}
+
+function primeDigitReplacements(n) {
+  function isNFamily(number, n) {
+    const prime = number.toString();
+    const lastDigit = prime[prime.length - 1];
+    return doesReplacingMakeFamily(prime, '0', n) ||
+      doesReplacingMakeFamily(prime, '2', n) ||
+      (lastDigit !== '1' && doesReplacingMakeFamily(prime, '1', n));
+  }
+
+  function doesReplacingMakeFamily(prime, digitToReplace, family) {
+    let miss = 0;
+    const base = parseInt(
+      prime
+        .split('')
+        .map(digit => digit == digitToReplace ? '0' : digit)
+        .join('')
+    );
+    const replacements = parseInt(
+      prime
+        .split('')
+        .map(digit => digit === digitToReplace ? '1' : '0')
+        .join('')
+    );
+    const start = prime[0] === digitToReplace ? 1 : 0;
+    for (let i = start; i < 10; i++) {
+      const nextNumber = base + i * replacements;
+      if (!isPartOfFamily(nextNumber, prime)) miss++;
+      if (10 - start - miss < family) break;
+    }
+    return 10 - start - miss === family;
+  }
+
+  function isPartOfFamily(number, prime) {
+    return (
+      isPrime(number) && number.toString().length === prime.length
+    );
+  }
+
+  for (let number = 1; number < 125000; number++) {
+    if (isPrime(number) && isNFamily(number, n)) {
+      return number;
+    }
+  }
+  return -1;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-52-permuted-multiples.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-52-permuted-multiples.md
new file mode 100644
index 00000000000..7a3886a6e27
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-52-permuted-multiples.md
@@ -0,0 +1,81 @@
+---
+id: 5900f3a01000cf542c50feb3
+title: 'Problem 52: Permuted multiples'
+challengeType: 1
+forumTopicId: 302163
+dashedName: problem-52-permuted-multiples
+---
+
+# --description--
+
+It can be seen that the number, 125874, and its double, 251748, contain exactly the same digits, but in a different order.
+
+Find the smallest positive integer, such that multiplied by integers $\\{2, 3, \ldots, n\\}$, contain the same digits.
+
+# --hints--
+
+`permutedMultiples(2)` should return a number.
+
+```js
+assert(typeof permutedMultiples(2) === 'number');
+```
+
+`permutedMultiples(2)` should return `125874`.
+
+```js
+assert.strictEqual(permutedMultiples(2), 125874);
+```
+
+`permutedMultiples(6)` should return `142857`.
+
+```js
+assert.strictEqual(permutedMultiples(6), 142857);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function permutedMultiples(n) {
+
+  return true;
+}
+
+permutedMultiples(2);
+```
+
+# --solutions--
+
+```js
+function permutedMultiples(n) {
+    const isPermutation = (a, b) =>
+        a.length !== b.length
+            ? false
+            : a.split('').sort().join() === b.split('').sort().join();
+
+
+    let start = 1;
+    let found = false;
+    let result = 0;
+
+    while (!found) {
+        start *= 10;
+        for (let i = start; i < start * 10 / n; i++) {
+            found = true;
+            for (let j = 2; j <= n; j++) {
+                if (!isPermutation(i + '', j * i + '')) {
+                    found = false;
+                    break;
+                }
+            }
+            if (found) {
+                result = i;
+                break;
+            }
+        }
+    }
+
+    return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-53-combinatoric-selections.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-53-combinatoric-selections.md
new file mode 100644
index 00000000000..8d96ff14392
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-53-combinatoric-selections.md
@@ -0,0 +1,89 @@
+---
+id: 5900f3a11000cf542c50feb4
+title: 'Problem 53: Combinatoric selections'
+challengeType: 1
+forumTopicId: 302164
+dashedName: problem-53-combinatoric-selections
+---
+
+# --description--
+
+There are exactly ten ways of selecting three from five, 12345:
+
+<div style='text-align: center;'>123, 124, 125, 134, 135, 145, 234, 235, 245, and 345</div>
+
+In combinatorics, we use the notation, $\\displaystyle \\binom 5 3 = 10$
+
+In general, $\\displaystyle \\binom n r = \\dfrac{n!}{r!(n-r)!}$, where $r \\le n$, $n! = n \\times (n-1) \\times ... \\times 3 \\times 2 \\times 1$, and $0! = 1$.
+
+It is not until $n = 23$, that a value exceeds one-million: $\\displaystyle \\binom {23} {10} = 1144066$.
+
+How many, not necessarily distinct, values of $\\displaystyle \\binom n r$ for $1 \\le n \\le 100$, are greater than one-million?
+
+# --hints--
+
+`combinatoricSelections(1000)` should return a number.
+
+```js
+assert(typeof combinatoricSelections(1000) === 'number');
+```
+
+`combinatoricSelections(1000)` should return 4626.
+
+```js
+assert.strictEqual(combinatoricSelections(1000), 4626);
+```
+
+`combinatoricSelections(10000)` should return 4431.
+
+```js
+assert.strictEqual(combinatoricSelections(10000), 4431);
+```
+
+`combinatoricSelections(100000)` should return 4255.
+
+```js
+assert.strictEqual(combinatoricSelections(100000), 4255);
+```
+
+`combinatoricSelections(1000000)` should return 4075.
+
+```js
+assert.strictEqual(combinatoricSelections(1000000), 4075);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function combinatoricSelections(limit) {
+
+  return 1;
+}
+
+combinatoricSelections(1000000);
+```
+
+# --solutions--
+
+```js
+function combinatoricSelections(limit) {
+    const factorial = n =>
+        Array.apply(null, { length: n })
+            .map((_, i) => i + 1)
+            .reduce((p, c) => p * c, 1);
+
+    let result = 0;
+    const nMax = 100;
+
+    for (let n = 1; n <= nMax; n++) {
+        for (let r = 0; r <= n; r++) {
+            if (factorial(n) / (factorial(r) * factorial(n - r)) >= limit)
+                result++;
+        }
+    }
+
+    return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-54-poker-hands.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-54-poker-hands.md
new file mode 100644
index 00000000000..b08e9a13bda
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-54-poker-hands.md
@@ -0,0 +1,1096 @@
+---
+id: 5900f3a21000cf542c50feb5
+title: 'Problem 54: Poker hands'
+challengeType: 1
+forumTopicId: 302165
+dashedName: problem-54-poker-hands
+---
+
+# --description--
+
+In the card game poker, a hand consists of five cards and are ranked, from lowest to highest, in the following way:
+
+<ul>
+  <li>High Card: Highest value card.</li>
+  <li>One Pair: Two cards of the same value.</li>
+  <li>Two Pairs: Two different pairs.</li>
+  <li>Three of a Kind: Three cards of the same value.</li>
+  <li>Straight: All cards are consecutive values.</li>
+  <li>Flush: All cards of the same suit.</li>
+  <li>Full House: Three of a kind and a pair.</li>
+  <li>Four of a Kind: Four cards of the same value.</li>
+  <li>Straight Flush: All cards are consecutive values of same suit.</li>
+  <li>Royal Flush: Ten, Jack, Queen, King, Ace, in same suit.</li>
+</ul>
+
+The cards are valued in the order: 2, 3, 4, 5, 6, 7, 8, 9, 10, Jack, Queen, King, Ace.
+
+If two players have the same ranked hands then the rank made up of the highest value wins; for example, a pair of eights beats a pair of fives (see example 1 below). But if two ranks tie, for example, both players have a pair of queens, then highest cards in each hand are compared (see example 4 below); if the highest cards tie then the next highest cards are compared, and so on.
+
+Consider the following five hands dealt to two players:
+
+| Hand                      | Player 1                                                              | Player 2                                                               | Winner   |
+| ------------------------- | --------------------------------------------------------------------- | ---------------------------------------------------------------------- | -------- |
+| <strong>1</strong> | 5H 5C 6S 7S KD <br> Pair of Fives                               | 2C 3S 8S 8D TD <br> Pair of Eights                               | Player 2 |
+| <strong>2</strong> | 5D 8C 9S JS AC <br> Highest card Ace                            | 2C 5C 7D 8S QH <br> Highest card Queen                           | Player 1 |
+| <strong>3</strong> | 2D 9C AS AH AC <br> Three Aces                                  | 3D 6D 7D TD QD <br> Flush with Diamonds                          | Player 2 |
+| <strong>4</strong> | 4D 6S 9H QH QC <br> Pair of Queens <br> Highest card Nine | 3D 6D 7H QD QS <br> Pair of Queens <br> Highest card Seven | Player 1 |
+| <strong>5</strong> | 2H 2D 4C 4D 4S <br> Full House <br> with Three Fours      | 3C 3D 3S 9S 9D <br> Full House <br> with Three Threes      | Player 1 |
+
+The global array (`handsArr`) passed to the function, contains one-thousand random hands dealt to two players. Each line of the file contains ten cards (separated by a single space): the first five are Player 1's cards and the last five are Player 2's cards. You can assume that all hands are valid (no invalid characters or repeated cards), each player's hand is in no specific order, and in each hand there is a clear winner.
+
+How many hands does Player 1 win?
+
+# --hints--
+
+`pokerHands(testArr)` should return a number.
+
+```js
+assert(typeof pokerHands(testArr) === 'number');
+```
+
+`pokerHands(testArr)` should return 2.
+
+```js
+assert.strictEqual(pokerHands(testArr), 2);
+```
+
+`pokerHands(handsArr)` should return 376.
+
+```js
+assert.strictEqual(pokerHands(handsArr), 376);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+const handsArr = [
+  '8C TS KC 9H 4S 7D 2S 5D 3S AC',
+  '5C AD 5D AC 9C 7C 5H 8D TD KS',
+  '3H 7H 6S KC JS QH TD JC 2D 8S',
+  'TH 8H 5C QS TC 9H 4D JC KS JS',
+  '7C 5H KC QH JD AS KH 4C AD 4S',
+  '5H KS 9C 7D 9H 8D 3S 5D 5C AH',
+  '6H 4H 5C 3H 2H 3S QH 5S 6S AS',
+  'TD 8C 4H 7C TC KC 4C 3H 7S KS',
+  '7C 9C 6D KD 3H 4C QS QC AC KH',
+  'JC 6S 5H 2H 2D KD 9D 7C AS JS',
+  'AD QH TH 9D 8H TS 6D 3S AS AC',
+  '2H 4S 5C 5S TC KC JD 6C TS 3C',
+  'QD AS 6H JS 2C 3D 9H KC 4H 8S',
+  'KD 8S 9S 7C 2S 3S 6D 6S 4H KC',
+  '3C 8C 2D 7D 4D 9S 4S QH 4H JD',
+  '8C KC 7S TC 2D TS 8H QD AC 5C',
+  '3D KH QD 6C 6S AD AS 8H 2H QS',
+  '6S 8D 4C 8S 6C QH TC 6D 7D 9D',
+  '2S 8D 8C 4C TS 9S 9D 9C AC 3D',
+  '3C QS 2S 4H JH 3D 2D TD 8S 9H',
+  '5H QS 8S 6D 3C 8C JD AS 7H 7D',
+  '6H TD 9D AS JH 6C QC 9S KD JC',
+  'AH 8S QS 4D TH AC TS 3C 3D 5C',
+  '5S 4D JS 3D 8H 6C TS 3S AD 8C',
+  '6D 7C 5D 5H 3S 5C JC 2H 5S 3D',
+  '5H 6H 2S KS 3D 5D JD 7H JS 8H',
+  'KH 4H AS JS QS QC TC 6D 7C KS',
+  '3D QS TS 2H JS 4D AS 9S JC KD',
+  'QD 5H 4D 5D KH 7H 3D JS KD 4H',
+  '2C 9H 6H 5C 9D 6C JC 2D TH 9S',
+  '7D 6D AS QD JH 4D JS 7C QS 5C',
+  '3H KH QD AD 8C 8H 3S TH 9D 5S',
+  'AH 9S 4D 9D 8S 4H JS 3C TC 8D',
+  '2C KS 5H QD 3S TS 9H AH AD 8S',
+  '5C 7H 5D KD 9H 4D 3D 2D KS AD',
+  'KS KC 9S 6D 2C QH 9D 9H TS TC',
+  '9C 6H 5D QH 4D AD 6D QC JS KH',
+  '9S 3H 9D JD 5C 4D 9H AS TC QH',
+  '2C 6D JC 9C 3C AD 9S KH 9D 7D',
+  'KC 9C 7C JC JS KD 3H AS 3C 7D',
+  'QD KH QS 2C 3S 8S 8H 9H 9C JC',
+  'QH 8D 3C KC 4C 4H 6D AD 9H 9D',
+  '3S KS QS 7H KH 7D 5H 5D JD AD',
+  '2H 2C 6H TH TC 7D 8D 4H 8C AS',
+  '4S 2H AC QC 3S 6D TH 4D 4C KH',
+  '4D TC KS AS 7C 3C 6D 2D 9H 6C',
+  '8C TD 5D QS 2C 7H 4C 9C 3H 9H',
+  '5H JH TS 7S TD 6H AD QD 8H 8S',
+  '5S AD 9C 8C 7C 8D 5H 9D 8S 2S',
+  '4H KH KS 9S 2S KC 5S AD 4S 7D',
+  'QS 9C QD 6H JS 5D AC 8D 2S AS',
+  'KH AC JC 3S 9D 9S 3C 9C 5S JS',
+  'AD 3C 3D KS 3S 5C 9C 8C TS 4S',
+  'JH 8D 5D 6H KD QS QD 3D 6C KC',
+  '8S JD 6C 3S 8C TC QC 3C QH JS',
+  'KC JC 8H 2S 9H 9C JH 8S 8C 9S',
+  '8S 2H QH 4D QC 9D KC AS TH 3C',
+  '8S 6H TH 7C 2H 6S 3C 3H AS 7S',
+  'QH 5S JS 4H 5H TS 8H AH AC JC',
+  '9D 8H 2S 4S TC JC 3C 7H 3H 5C',
+  '3D AD 3C 3S 4C QC AS 5D TH 8C',
+  '6S 9D 4C JS KH AH TS JD 8H AD',
+  '4C 6S 9D 7S AC 4D 3D 3S TC JD',
+  'AD 7H 6H 4H JH KC TD TS 7D 6S',
+  '8H JH TC 3S 8D 8C 9S 2C 5C 4D',
+  '2C 9D KC QH TH QS JC 9C 4H TS',
+  'QS 3C QD 8H KH 4H 8D TD 8S AC',
+  '7C 3C TH 5S 8H 8C 9C JD TC KD',
+  'QC TC JD TS 8C 3H 6H KD 7C TD',
+  'JH QS KS 9C 6D 6S AS 9H KH 6H',
+  '2H 4D AH 2D JH 6H TD 5D 4H JD',
+  'KD 8C 9S JH QD JS 2C QS 5C 7C',
+  '4S TC 7H 8D 2S 6H 7S 9C 7C KC',
+  '8C 5D 7H 4S TD QC 8S JS 4H KS',
+  'AD 8S JH 6D TD KD 7C 6C 2D 7D',
+  'JC 6H 6S JS 4H QH 9H AH 4C 3C',
+  '6H 5H AS 7C 7S 3D KH KC 5D 5C',
+  'JC 3D TD AS 4D 6D 6S QH JD KS',
+  '8C 7S 8S QH 2S JD 5C 7H AH QD',
+  '8S 3C 6H 6C 2C 8D TD 7D 4C 4D',
+  '5D QH KH 7C 2S 7H JS 6D QC QD',
+  'AD 6C 6S 7D TH 6H 2H 8H KH 4H',
+  'KS JS KD 5D 2D KH 7D 9C 8C 3D',
+  '9C 6D QD 3C KS 3S 7S AH JD 2D',
+  'AH QH AS JC 8S 8H 4C KC TH 7D',
+  'JC 5H TD 7C 5D KD 4C AD 8H JS',
+  'KC 2H AC AH 7D JH KH 5D 7S 6D',
+  '9S 5S 9C 6H 8S TD JD 9H 6C AC',
+  '7D 8S 6D TS KD 7H AC 5S 7C 5D',
+  'AH QC JC 4C TC 8C 2H TS 2C 7D',
+  'KD KC 6S 3D 7D 2S 8S 3H 5S 5C',
+  '8S 5D 8H 4C 6H KC 3H 7C 5S KD',
+  'JH 8C 3D 3C 6C KC TD 7H 7C 4C',
+  'JC KC 6H TS QS TD KS 8H 8C 9S',
+  '6C 5S 9C QH 7D AH KS KC 9S 2C',
+  '4D 4S 8H TD 9C 3S 7D 9D AS TH',
+  '6S 7D 3C 6H 5D KD 2C 5C 9D 9C',
+  '2H KC 3D AD 3H QD QS 8D JC 4S',
+  '8C 3H 9C 7C AD 5D JC 9D JS AS',
+  '5D 9H 5C 7H 6S 6C QC JC QD 9S',
+  'JC QS JH 2C 6S 9C QC 3D 4S TC',
+  '4H 5S 8D 3D 4D 2S KC 2H JS 2C',
+  'TD 3S TH KD 4D 7H JH JS KS AC',
+  '7S 8C 9S 2D 8S 7D 5C AD 9D AS',
+  '8C 7H 2S 6C TH 3H 4C 3S 8H AC',
+  'KD 5H JC 8H JD 2D 4H TD JH 5C',
+  '3D AS QH KS 7H JD 8S 5S 6D 5H',
+  '9S 6S TC QS JC 5C 5D 9C TH 8C',
+  '5H 3S JH 9H 2S 2C 6S 7S AS KS',
+  '8C QD JC QS TC QC 4H AC KH 6C',
+  'TC 5H 7D JH 4H 2H 8D JC KS 4D',
+  '5S 9C KH KD 9H 5C TS 3D 7D 2D',
+  '5H AS TC 4D 8C 2C TS 9D 3H 8D',
+  '6H 8D 2D 9H JD 6C 4S 5H 5S 6D',
+  'AD 9C JC 7D 6H 9S 6D JS 9H 3C',
+  'AD JH TC QS 4C 5D 9S 7C 9C AH',
+  'KD 6H 2H TH 8S QD KS 9D 9H AS',
+  '4H 8H 8D 5H 6C AH 5S AS AD 8S',
+  'QS 5D 4S 2H TD KS 5H AC 3H JC',
+  '9C 7D QD KD AC 6D 5H QH 6H 5S',
+  'KC AH QH 2H 7D QS 3H KS 7S JD',
+  '6C 8S 3H 6D KS QD 5D 5C 8H TC',
+  '9H 4D 4S 6S 9D KH QC 4H 6C JD',
+  'TD 2D QH 4S 6H JH KD 3C QD 8C',
+  '4S 6H 7C QD 9D AS AH 6S AD 3C',
+  '2C KC TH 6H 8D AH 5C 6D 8S 5D',
+  'TD TS 7C AD JC QD 9H 3C KC 7H',
+  '5D 4D 5S 8H 4H 7D 3H JD KD 2D',
+  'JH TD 6H QS 4S KD 5C 8S 7D 8H',
+  'AC 3D AS 8C TD 7H KH 5D 6C JD',
+  '9D KS 7C 6D QH TC JD KD AS KC',
+  'JH 8S 5S 7S 7D AS 2D 3D AD 2H',
+  '2H 5D AS 3C QD KC 6H 9H 9S 2C',
+  '9D 5D TH 4C JH 3H 8D TC 8H 9H',
+  '6H KD 2C TD 2H 6C 9D 2D JS 8C',
+  'KD 7S 3C 7C AS QH TS AD 8C 2S',
+  'QS 8H 6C JS 4C 9S QC AD TD TS',
+  '2H 7C TS TC 8C 3C 9H 2D 6D JC',
+  'TC 2H 8D JH KS 6D 3H TD TH 8H',
+  '9D TD 9H QC 5D 6C 8H 8C KC TS',
+  '2H 8C 3D AH 4D TH TC 7D 8H KC',
+  'TS 5C 2D 8C 6S KH AH 5H 6H KC',
+  '5S 5D AH TC 4C JD 8D 6H 8C 6C',
+  'KC QD 3D 8H 2D JC 9H 4H AD 2S',
+  'TD 6S 7D JS KD 4H QS 2S 3S 8C',
+  '4C 9H JH TS 3S 4H QC 5S 9S 9C',
+  '2C KD 9H JS 9S 3H JC TS 5D AC',
+  'AS 2H 5D AD 5H JC 7S TD JS 4C',
+  '2D 4S 8H 3D 7D 2C AD KD 9C TS',
+  '7H QD JH 5H JS AC 3D TH 4C 8H',
+  '6D KH KC QD 5C AD 7C 2D 4H AC',
+  '3D 9D TC 8S QD 2C JC 4H JD AH',
+  '6C TD 5S TC 8S AH 2C 5D AS AC',
+  'TH 7S 3D AS 6C 4C 7H 7D 4H AH',
+  '5C 2H KS 6H 7S 4H 5H 3D 3C 7H',
+  '3C 9S AC 7S QH 2H 3D 6S 3S 3H',
+  '2D 3H AS 2C 6H TC JS 6S 9C 6C',
+  'QH KD QD 6D AC 6H KH 2C TS 8C',
+  '8H 7D 3S 9H 5D 3H 4S QC 9S 5H',
+  '2D 9D 7H 6H 3C 8S 5H 4D 3S 4S',
+  'KD 9S 4S TC 7S QC 3S 8S 2H 7H',
+  'TC 3D 8C 3H 6C 2H 6H KS KD 4D',
+  'KC 3D 9S 3H JS 4S 8H 2D 6C 8S',
+  '6H QS 6C TC QD 9H 7D 7C 5H 4D',
+  'TD 9D 8D 6S 6C TC 5D TS JS 8H',
+  '4H KC JD 9H TC 2C 6S 5H 8H AS',
+  'JS 9C 5C 6S 9D JD 8H KC 4C 6D',
+  '4D 8D 8S 6C 7C 6H 7H 8H 5C KC',
+  'TC 3D JC 6D KS 9S 6H 7S 9C 2C',
+  '6C 3S KD 5H TS 7D 9H 9S 6H KH',
+  '3D QD 4C 6H TS AC 3S 5C 2H KD',
+  '4C AS JS 9S 7C TS 7H 9H JC KS',
+  '4H 8C JD 3H 6H AD 9S 4S 5S KS',
+  '4C 2C 7D 3D AS 9C 2S QS KC 6C',
+  '8S 5H 3D 2S AC 9D 6S 3S 4D TD',
+  'QD TH 7S TS 3D AC 7H 6C 5D QC',
+  'TC QD AD 9C QS 5C 8D KD 3D 3C',
+  '9D 8H AS 3S 7C 8S JD 2D 8D KC',
+  '4C TH AC QH JS 8D 7D 7S 9C KH',
+  '9D 8D 4C JH 2C 2S QD KD TS 4H',
+  '4D 6D 5D 2D JH 3S 8S 3H TC KH',
+  'AD 4D 2C QS 8C KD JH JD AH 5C',
+  '5C 6C 5H 2H JH 4H KS 7C TC 3H',
+  '3C 4C QC 5D JH 9C QD KH 8D TC',
+  '3H 9C JS 7H QH AS 7C 9H 5H JC',
+  '2D 5S QD 4S 3C KC 6S 6C 5C 4C',
+  '5D KH 2D TS 8S 9C AS 9S 7C 4C',
+  '7C AH 8C 8D 5S KD QH QS JH 2C',
+  '8C 9D AH 2H AC QC 5S 8H 7H 2C',
+  'QD 9H 5S QS QC 9C 5H JC TH 4H',
+  '6C 6S 3H 5H 3S 6H KS 8D AC 7S',
+  'AC QH 7H 8C 4S KC 6C 3D 3S TC',
+  '9D 3D JS TH AC 5H 3H 8S 3S TC',
+  'QD KH JS KS 9S QC 8D AH 3C AC',
+  '5H 6C KH 3S 9S JH 2D QD AS 8C',
+  '6C 4D 7S 7H 5S JC 6S 9H 4H JH',
+  'AH 5S 6H 9S AD 3S TH 2H 9D 8C',
+  '4C 8D 9H 7C QC AD 4S 9C KC 5S',
+  '9D 6H 4D TC 4C JH 2S 5D 3S AS',
+  '2H 6C 7C KH 5C AD QS TH JD 8S',
+  '3S 4S 7S AH AS KC JS 2S AD TH',
+  'JS KC 2S 7D 8C 5C 9C TS 5H 9D',
+  '7S 9S 4D TD JH JS KH 6H 5D 2C',
+  'JD JS JC TH 2D 3D QD 8C AC 5H',
+  '7S KH 5S 9D 5D TD 4S 6H 3C 2D',
+  '4S 5D AC 8D 4D 7C AD AS AH 9C',
+  '6S TH TS KS 2C QC AH AS 3C 4S',
+  '2H 8C 3S JC 5C 7C 3H 3C KH JH',
+  '7S 3H JC 5S 6H 4C 2S 4D KC 7H',
+  '4D 7C 4H 9S 8S 6S AD TC 6C JC',
+  'KH QS 3S TC 4C 8H 8S AC 3C TS',
+  'QD QS TH 3C TS 7H 7D AH TD JC',
+  'TD JD QC 4D 9S 7S TS AD 7D AC',
+  'AH 7H 4S 6D 7C 2H 9D KS JC TD',
+  '7C AH JD 4H 6D QS TS 2H 2C 5C',
+  'TC KC 8C 9S 4C JS 3C JC 6S AH',
+  'AS 7D QC 3D 5S JC JD 9D TD KH',
+  'TH 3C 2S 6H AH AC 5H 5C 7S 8H',
+  'QC 2D AC QD 2S 3S JD QS 6S 8H',
+  'KC 4H 3C 9D JS 6H 3S 8S AS 8C',
+  '7H KC 7D JD 2H JC QH 5S 3H QS',
+  '9H TD 3S 8H 7S AC 5C 6C AH 7C',
+  '8D 9H AH JD TD QS 7D 3S 9C 8S',
+  'AH QH 3C JD KC 4S 5S 5D TD KS',
+  '9H 7H 6S JH TH 4C 7C AD 5C 2D',
+  '7C KD 5S TC 9D 6S 6C 5D 2S TH',
+  'KC 9H 8D 5H 7H 4H QC 3D 7C AS',
+  '6S 8S QC TD 4S 5C TH QS QD 2S',
+  '8S 5H TH QC 9H 6S KC 7D 7C 5C',
+  '7H KD AH 4D KH 5C 4S 2D KC QH',
+  '6S 2C TD JC AS 4D 6C 8C 4H 5S',
+  'JC TC JD 5S 6S 8D AS 9D AD 3S',
+  '6D 6H 5D 5S TC 3D 7D QS 9D QD',
+  '4S 6C 8S 3S 7S AD KS 2D 7D 7C',
+  'KC QH JC AC QD 5D 8D QS 7H 7D',
+  'JS AH 8S 5H 3D TD 3H 4S 6C JH',
+  '4S QS 7D AS 9H JS KS 6D TC 5C',
+  '2D 5C 6H TC 4D QH 3D 9H 8S 6C',
+  '6D 7H TC TH 5S JD 5C 9C KS KD',
+  '8D TD QH 6S 4S 6C 8S KC 5C TC',
+  '5S 3D KS AC 4S 7D QD 4C TH 2S',
+  'TS 8H 9S 6S 7S QH 3C AH 7H 8C',
+  '4C 8C TS JS QC 3D 7D 5D 7S JH',
+  '8S 7S 9D QC AC 7C 6D 2H JH KC',
+  'JS KD 3C 6S 4S 7C AH QC KS 5H',
+  'KS 6S 4H JD QS TC 8H KC 6H AS',
+  'KH 7C TC 6S TD JC 5C 7D AH 3S',
+  '3H 4C 4H TC TH 6S 7H 6D 9C QH',
+  '7D 5H 4S 8C JS 4D 3D 8S QH KC',
+  '3H 6S AD 7H 3S QC 8S 4S 7S JS',
+  '3S JD KH TH 6H QS 9C 6C 2D QD',
+  '4S QH 4D 5H KC 7D 6D 8D TH 5S',
+  'TD AD 6S 7H KD KH 9H 5S KC JC',
+  '3H QC AS TS 4S QD KS 9C 7S KC',
+  'TS 6S QC 6C TH TC 9D 5C 5D KD',
+  'JS 3S 4H KD 4C QD 6D 9S JC 9D',
+  '8S JS 6D 4H JH 6H 6S 6C KS KH',
+  'AC 7D 5D TC 9S KH 6S QD 6H AS',
+  'AS 7H 6D QH 8D TH 2S KH 5C 5H',
+  '4C 7C 3D QC TC 4S KH 8C 2D JS',
+  '6H 5D 7S 5H 9C 9H JH 8S TH 7H',
+  'AS JS 2S QD KH 8H 4S AC 8D 8S',
+  '3H 4C TD KD 8C JC 5C QS 2D JD',
+  'TS 7D 5D 6C 2C QS 2H 3C AH KS',
+  '4S 7C 9C 7D JH 6C 5C 8H 9D QD',
+  '2S TD 7S 6D 9C 9S QS KH QH 5C',
+  'JC 6S 9C QH JH 8D 7S JS KH 2H',
+  '8D 5H TH KC 4D 4S 3S 6S 3D QS',
+  '2D JD 4C TD 7C 6D TH 7S JC AH',
+  'QS 7S 4C TH 9D TS AD 4D 3H 6H',
+  '2D 3H 7D JD 3D AS 2S 9C QC 8S',
+  '4H 9H 9C 2C 7S JH KD 5C 5D 6H',
+  'TC 9H 8H JC 3C 9S 8D KS AD KC',
+  'TS 5H JD QS QH QC 8D 5D KH AH',
+  '5D AS 8S 6S 4C AH QC QD TH 7H',
+  '3H 4H 7D 6S 4S 9H AS 8H JS 9D',
+  'JD 8C 2C 9D 7D 5H 5S 9S JC KD',
+  'KD 9C 4S QD AH 7C AD 9D AC TD',
+  '6S 4H 4S 9C 8D KS TC 9D JH 7C',
+  '5S JC 5H 4S QH AC 2C JS 2S 9S',
+  '8C 5H AS QD AD 5C 7D 8S QC TD',
+  'JC 4C 8D 5C KH QS 4D 6H 2H 2C',
+  'TH 4S 2D KC 3H QD AC 7H AD 9D',
+  'KH QD AS 8H TH KC 8D 7S QH 8C',
+  'JC 6C 7D 8C KH AD QS 2H 6S 2D',
+  'JC KH 2D 7D JS QC 5H 4C 5D AD',
+  'TS 3S AD 4S TD 2D TH 6S 9H JH',
+  '9H 2D QS 2C 4S 3D KH AS AC 9D',
+  'KH 6S 8H 4S KD 7D 9D TS QD QC',
+  'JH 5H AH KS AS AD JC QC 5S KH',
+  '5D 7D 6D KS KD 3D 7C 4D JD 3S',
+  'AC JS 8D 5H 9C 3H 4H 4D TS 2C',
+  '6H KS KH 9D 7C 2S 6S 8S 2H 3D',
+  '6H AC JS 7S 3S TD 8H 3H 4H TH',
+  '9H TC QC KC 5C KS 6H 4H AC 8S',
+  'TC 7D QH 4S JC TS 6D 6C AC KH',
+  'QH 7D 7C JH QS QD TH 3H 5D KS',
+  '3D 5S 8D JS 4C 2C KS 7H 9C 4H',
+  '5H 8S 4H TD 2C 3S QD QC 3H KC',
+  'QC JS KD 9C AD 5S 9D 7D 7H TS',
+  '8C JC KH 7C 7S 6C TS 2C QD TH',
+  '5S 9D TH 3C 7S QH 8S 9C 2H 5H',
+  '5D 9H 6H 2S JS KH 3H 7C 2H 5S',
+  'JD 5D 5S 2C TC 2S 6S 6C 3C 8S',
+  '4D KH 8H 4H 2D KS 3H 5C 2S 9H',
+  '3S 2D TD 7H 8S 6H JD KC 9C 8D',
+  '6S QD JH 7C 9H 5H 8S 8H TH TD',
+  'QS 7S TD 7D TS JC KD 7C 3C 2C',
+  '3C JD 8S 4H 2D 2S TD AS 4D AC',
+  'AH KS 6C 4C 4S 7D 8C 9H 6H AS',
+  '5S 3C 9S 2C QS KD 4D 4S AC 5D',
+  '2D TS 2C JS KH QH 5D 8C AS KC',
+  'KD 3H 6C TH 8S 7S KH 6H 9S AC',
+  '6H 7S 6C QS AH 2S 2H 4H 5D 5H',
+  '5H JC QD 2C 2S JD AS QC 6S 7D',
+  '6C TC AS KD 8H 9D 2C 7D JH 9S',
+  '2H 4C 6C AH 8S TD 3H TH 7C TS',
+  'KD 4S TS 6C QH 8D 9D 9C AH 7D',
+  '6D JS 5C QD QC 9C 5D 8C 2H KD',
+  '3C QH JH AD 6S AH KC 8S 6D 6H',
+  '3D 7C 4C 7S 5S 3S 6S 5H JC 3C',
+  'QH 7C 5H 3C 3S 8C TS 4C KD 9C',
+  'QD 3S 7S 5H 7H QH JC 7C 8C KD',
+  '3C KD KH 2S 4C TS AC 6S 2C 7C',
+  '2C KH 3C 4C 6H 4D 5H 5S 7S QD',
+  '4D 7C 8S QD TS 9D KS 6H KD 3C',
+  'QS 4D TS 7S 4C 3H QD 8D 9S TC',
+  'TS QH AC 6S 3C 9H 9D QS 8S 6H',
+  '3S 7S 5D 4S JS 2D 6C QH 6S TH',
+  '4C 4H AS JS 5D 3D TS 9C AC 8S',
+  '6S 9C 7C 3S 5C QS AD AS 6H 3C',
+  '9S 8C 7H 3H 6S 7C AS 9H JD KH',
+  '3D 3H 7S 4D 6C 7C AC 2H 9C TH',
+  '4H 5S 3H AC TC TH 9C 9H 9S 8D',
+  '8D 9H 5H 4D 6C 2H QD 6S 5D 3S',
+  '4C 5C JD QS 4D 3H TH AC QH 8C',
+  'QC 5S 3C 7H AD 4C KS 4H JD 6D',
+  'QS AH 3H KS 9H 2S JS JH 5H 2H',
+  '2H 5S TH 6S TS 3S KS 3C 5H JS',
+  '2D 9S 7H 3D KC JH 6D 7D JS TD',
+  'AC JS 8H 2C 8C JH JC 2D TH 7S',
+  '5D 9S 8H 2H 3D TC AH JC KD 9C',
+  '9D QD JC 2H 6D KH TS 9S QH TH',
+  '2C 8D 4S JD 5H 3H TH TC 9C KC',
+  'AS 3D 9H 7D 4D TH KH 2H 7S 3H',
+  '4H 7S KS 2S JS TS 8S 2H QD 8D',
+  '5S 6H JH KS 8H 2S QC AC 6S 3S',
+  'JC AS AD QS 8H 6C KH 4C 4D QD',
+  '2S 3D TS TD 9S KS 6S QS 5C 8D',
+  '3C 6D 4S QC KC JH QD TH KH AD',
+  '9H AH 4D KS 2S 8D JH JC 7C QS',
+  '2D 6C TH 3C 8H QD QH 2S 3S KS',
+  '6H 5D 9S 4C TS TD JS QD 9D JD',
+  '5H 8H KH 8S KS 7C TD AD 4S KD',
+  '2C 7C JC 5S AS 6C 7D 8S 5H 9C',
+  '6S QD 9S TS KH QS 5S QH 3C KC',
+  '7D 3H 3C KD 5C AS JH 7H 6H JD',
+  '9D 5C 9H KC 8H KS 4S AD 4D 2S',
+  '3S JD QD 8D 2S 7C 5S 6S 5H TS',
+  '6D 9S KC TD 3S 6H QD JD 5C 8D',
+  '5H 9D TS KD 8D 6H TD QC 4C 7D',
+  '6D 4S JD 9D AH 9S AS TD 9H QD',
+  '2D 5S 2H 9C 6H 9S TD QC 7D TC',
+  '3S 2H KS TS 2C 9C 8S JS 9D 7D',
+  '3C KC 6D 5D 6C 6H 8S AS 7S QS',
+  'JH 9S 2H 8D 4C 8H 9H AD TH KH',
+  'QC AS 2S JS 5C 6H KD 3H 7H 2C',
+  'QD 8H 2S 8D 3S 6D AH 2C TC 5C',
+  'JD JS TS 8S 3H 5D TD KC JC 6H',
+  '6S QS TC 3H 5D AH JC 7C 7D 4H',
+  '7C 5D 8H 9C 2H 9H JH KH 5S 2C',
+  '9C 7H 6S TH 3S QC QD 4C AC JD',
+  '2H 5D 9S 7D KC 3S QS 2D AS KH',
+  '2S 4S 2H 7D 5C TD TH QH 9S 4D',
+  '6D 3S TS 6H 4H KS 9D 8H 5S 2D',
+  '9H KS 4H 3S 5C 5D KH 6H 6S JS',
+  'KC AS 8C 4C JC KH QC TH QD AH',
+  '6S KH 9S 2C 5H TC 3C 7H JC 4D',
+  'JD 4S 6S 5S 8D 7H 7S 4D 4C 2H',
+  '7H 9H 5D KH 9C 7C TS TC 7S 5H',
+  '4C 8D QC TS 4S 9H 3D AD JS 7C',
+  '8C QS 5C 5D 3H JS AH KC 4S 9D',
+  'TS JD 8S QS TH JH KH 2D QD JS',
+  'JD QC 5D 6S 9H 3S 2C 8H 9S TS',
+  '2S 4C AD 7H JC 5C 2D 6D 4H 3D',
+  '7S JS 2C 4H 8C AD QD 9C 3S TD',
+  'JD TS 4C 6H 9H 7D QD 6D 3C AS',
+  'AS 7C 4C 6S 5D 5S 5C JS QC 4S',
+  'KD 6S 9S 7C 3C 5S 7D JH QD JS',
+  '4S 7S JH 2C 8S 5D 7H 3D QH AD',
+  'TD 6H 2H 8D 4H 2D 7C AD KH 5D',
+  'TS 3S 5H 2C QD AH 2S 5C KH TD',
+  'KC 4D 8C 5D AS 6C 2H 2S 9H 7C',
+  'KD JS QC TS QS KH JH 2C 5D AD',
+  '3S 5H KC 6C 9H 3H 2H AD 7D 7S',
+  '7S JS JH KD 8S 7D 2S 9H 7C 2H',
+  '9H 2D 8D QC 6S AD AS 8H 5H 6C',
+  '2S 7H 6C 6D 7D 8C 5D 9D JC 3C',
+  '7C 9C 7H JD 2H KD 3S KH AD 4S',
+  'QH AS 9H 4D JD KS KD TS KH 5H',
+  '4C 8H 5S 3S 3D 7D TD AD 7S KC',
+  'JS 8S 5S JC 8H TH 9C 4D 5D KC',
+  '7C 5S 9C QD 2C QH JS 5H 8D KH',
+  'TD 2S KS 3D AD KC 7S TC 3C 5D',
+  '4C 2S AD QS 6C 9S QD TH QH 5C',
+  '8C AD QS 2D 2S KC JD KS 6C JC',
+  '8D 4D JS 2H 5D QD 7S 7D QH TS',
+  '6S 7H 3S 8C 8S 9D QS 8H 6C 9S',
+  '4S TC 2S 5C QD 4D QS 6D TH 6S',
+  '3S 5C 9D 6H 8D 4C 7D TC 7C TD',
+  'AH 6S AS 7H 5S KD 3H 5H AC 4C',
+  '8D 8S AH KS QS 2C AD 6H 7D 5D',
+  '6H 9H 9S 2H QS 8S 9C 5D 2D KD',
+  'TS QC 5S JH 7D 7S TH 9S 9H AC',
+  '7H 3H 6S KC 4D 6D 5C 4S QD TS',
+  'TD 2S 7C QD 3H JH 9D 4H 7S 7H',
+  'KS 3D 4H 5H TC 2S AS 2D 6D 7D',
+  '8H 3C 7H TD 3H AD KC TH 9C KH',
+  'TC 4C 2C 9S 9D 9C 5C 2H JD 3C',
+  '3H AC TS 5D AD 8D 6H QC 6S 8C',
+  '2S TS 3S JD 7H 8S QH 4C 5S 8D',
+  'AC 4S 6C 3C KH 3D 7C 2D 8S 2H',
+  '4H 6C 8S TH 2H 4S 8H 9S 3H 7S',
+  '7C 4C 9C 2C 5C AS 5D KD 4D QH',
+  '9H 4H TS AS 7D 8D 5D 9S 8C 2H',
+  'QC KD AC AD 2H 7S AS 3S 2D 9S',
+  '2H QC 8H TC 6D QD QS 5D KH 3C',
+  'TH JD QS 4C 2S 5S AD 7H 3S AS',
+  '7H JS 3D 6C 3S 6D AS 9S AC QS',
+  '9C TS AS 8C TC 8S 6H 9D 8D 6C',
+  '4D JD 9C KC 7C 6D KS 3S 8C AS',
+  '3H 6S TC 8D TS 3S KC 9S 7C AS',
+  '8C QC 4H 4S 8S 6C 3S TC AH AC',
+  '4D 7D 5C AS 2H 6S TS QC AD TC',
+  'QD QC 8S 4S TH 3D AH TS JH 4H',
+  '5C 2D 9S 2C 3H 3C 9D QD QH 7D',
+  'KC 9H 6C KD 7S 3C 4D AS TC 2D',
+  '3D JS 4D 9D KS 7D TH QC 3H 3C',
+  '8D 5S 2H 9D 3H 8C 4C 4H 3C TH',
+  'JC TH 4S 6S JD 2D 4D 6C 3D 4C',
+  'TS 3S 2D 4H AC 2C 6S 2H JH 6H',
+  'TD 8S AD TC AH AC JH 9S 6S 7S',
+  '6C KC 4S JD 8D 9H 5S 7H QH AH',
+  'KD 8D TS JH 5C 5H 3H AD AS JS',
+  '2D 4H 3D 6C 8C 7S AD 5D 5C 8S',
+  'TD 5D 7S 9C 4S 5H 6C 8C 4C 8S',
+  'JS QH 9C AS 5C QS JC 3D QC 7C',
+  'JC 9C KH JH QS QC 2C TS 3D AD',
+  '5D JH AC 5C 9S TS 4C JD 8C KS',
+  'KC AS 2D KH 9H 2C 5S 4D 3D 6H',
+  'TH AH 2D 8S JC 3D 8C QH 7S 3S',
+  '8H QD 4H JC AS KH KS 3C 9S 6D',
+  '9S QH 7D 9C 4S AC 7H KH 4D KD',
+  'AH AD TH 6D 9C 9S KD KS QH 4H',
+  'QD 6H 9C 7C QS 6D 6S 9D 5S JH',
+  'AH 8D 5H QD 2H JC KS 4H KH 5S',
+  '5C 2S JS 8D 9C 8C 3D AS KC AH',
+  'JD 9S 2H QS 8H 5S 8C TH 5C 4C',
+  'QC QS 8C 2S 2C 3S 9C 4C KS KH',
+  '2D 5D 8S AH AD TD 2C JS KS 8C',
+  'TC 5S 5H 8H QC 9H 6H JD 4H 9S',
+  '3C JH 4H 9H AH 4S 2H 4C 8D AC',
+  '8S TH 4D 7D 6D QD QS 7S TC 7C',
+  'KH 6D 2D JD 5H JS QD JH 4H 4S',
+  '9C 7S JH 4S 3S TS QC 8C TC 4H',
+  'QH 9D 4D JH QS 3S 2C 7C 6C 2D',
+  '4H 9S JD 5C 5H AH 9D TS 2D 4C',
+  'KS JH TS 5D 2D AH JS 7H AS 8D',
+  'JS AH 8C AD KS 5S 8H 2C 6C TH',
+  '2H 5D AD AC KS 3D 8H TS 6H QC',
+  '6D 4H TS 9C 5H JS JH 6S JD 4C',
+  'JH QH 4H 2C 6D 3C 5D 4C QS KC',
+  '6H 4H 6C 7H 6S 2S 8S KH QC 8C',
+  '3H 3D 5D KS 4H TD AD 3S 4D TS',
+  '5S 7C 8S 7D 2C KS 7S 6C 8C JS',
+  '5D 2H 3S 7C 5C QD 5H 6D 9C 9H',
+  'JS 2S KD 9S 8D TD TS AC 8C 9D',
+  '5H QD 2S AC 8C 9H KS 7C 4S 3C',
+  'KH AS 3H 8S 9C JS QS 4S AD 4D',
+  'AS 2S TD AD 4D 9H JC 4C 5H QS',
+  '5D 7C 4H TC 2D 6C JS 4S KC 3S',
+  '4C 2C 5D AC 9H 3D JD 8S QS QH',
+  '2C 8S 6H 3C QH 6D TC KD AC AH',
+  'QC 6C 3S QS 4S AC 8D 5C AD KH',
+  '5S 4C AC KH AS QC 2C 5C 8D 9C',
+  '8H JD 3C KH 8D 5C 9C QD QH 9D',
+  '7H TS 2C 8C 4S TD JC 9C 5H QH',
+  'JS 4S 2C 7C TH 6C AS KS 7S JD',
+  'JH 7C 9H 7H TC 5H 3D 6D 5D 4D',
+  '2C QD JH 2H 9D 5S 3D TD AD KS',
+  'JD QH 3S 4D TH 7D 6S QS KS 4H',
+  'TC KS 5S 8D 8H AD 2S 2D 4C JH',
+  '5S JH TC 3S 2D QS 9D 4C KD 9S',
+  'AC KH 3H AS 9D KC 9H QD 6C 6S',
+  '9H 7S 3D 5C 7D KC TD 8H 4H 6S',
+  '3C 7H 8H TC QD 4D 7S 6S QH 6C',
+  '6D AD 4C QD 6C 5D 7D 9D KS TS',
+  'JH 2H JD 9S 7S TS KH 8D 5D 8H',
+  '2D 9S 4C 7D 9D 5H QD 6D AC 6S',
+  '7S 6D JC QD JH 4C 6S QS 2H 7D',
+  '8C TD JH KD 2H 5C QS 2C JS 7S',
+  'TC 5H 4H JH QD 3S 5S 5D 8S KH',
+  'KS KH 7C 2C 5D JH 6S 9C 6D JC',
+  '5H AH JD 9C JS KC 2H 6H 4D 5S',
+  'AS 3C TH QC 6H 9C 8S 8C TD 7C',
+  'KC 2C QD 9C KH 4D 7S 3C TS 9H',
+  '9C QC 2S TS 8C TD 9S QD 3S 3C',
+  '4D 9D TH JH AH 6S 2S JD QH JS',
+  'QD 9H 6C KD 7D 7H 5D 6S 8H AH',
+  '8H 3C 4S 2H 5H QS QH 7S 4H AC',
+  'QS 3C 7S 9S 4H 3S AH KS 9D 7C',
+  'AD 5S 6S 2H 2D 5H TC 4S 3C 8C',
+  'QH TS 6S 4D JS KS JH AS 8S 6D',
+  '2C 8S 2S TD 5H AS TC TS 6C KC',
+  'KC TS 8H 2H 3H 7C 4C 5S TH TD',
+  'KD AD KH 7H 7S 5D 5H 5S 2D 9C',
+  'AD 9S 3D 7S 8C QC 7C 9C KD KS',
+  '3C QC 9S 8C 4D 5C AS QD 6C 2C',
+  '2H KC 8S JD 7S AC 8D 5C 2S 4D',
+  '9D QH 3D 2S TC 3S KS 3C 9H TD',
+  'KD 6S AC 2C 7H 5H 3S 6C 6H 8C',
+  'QH TC 8S 6S KH TH 4H 5D TS 4D',
+  '8C JS 4H 6H 2C 2H 7D AC QD 3D',
+  'QS KC 6S 2D 5S 4H TD 3H JH 4C',
+  '7S 5H 7H 8H KH 6H QS TH KD 7D',
+  '5H AD KD 7C KH 5S TD 6D 3C 6C',
+  '8C 9C 5H JD 7C KC KH 7H 2H 3S',
+  '7S 4H AD 4D 8S QS TH 3D 7H 5S',
+  '8D TC KS KD 9S 6D AD JD 5C 2S',
+  '7H 8H 6C QD 2H 6H 9D TC 9S 7C',
+  '8D 6D 4C 7C 6C 3C TH KH JS JH',
+  '5S 3S 8S JS 9H AS AD 8H 7S KD',
+  'JH 7C 2C KC 5H AS AD 9C 9S JS',
+  'AD AC 2C 6S QD 7C 3H TH KS KD',
+  '9D JD 4H 8H 4C KH 7S TS 8C KC',
+  '3S 5S 2H 7S 6H 7D KS 5C 6D AD',
+  '5S 8C 9H QS 7H 7S 2H 6C 7D TD',
+  'QS 5S TD AC 9D KC 3D TC 2D 4D',
+  'TD 2H 7D JD QD 4C 7H 5D KC 3D',
+  '4C 3H 8S KD QH 5S QC 9H TC 5H',
+  '9C QD TH 5H TS 5C 9H AH QH 2C',
+  '4D 6S 3C AC 6C 3D 2C 2H TD TH',
+  'AC 9C 5D QC 4D AD 8D 6D 8C KC',
+  'AD 3C 4H AC 8D 8H 7S 9S TD JC',
+  '4H 9H QH JS 2D TH TD TC KD KS',
+  '5S 6S 9S 8D TH AS KH 5H 5C 8S',
+  'JD 2S 9S 6S 5S 8S 5D 7S 7H 9D',
+  '5D 8C 4C 9D AD TS 2C 7D KD TC',
+  '8S QS 4D KC 5C 8D 4S KH JD KD',
+  'AS 5C AD QH 7D 2H 9S 7H 7C TC',
+  '2S 8S JD KH 7S 6C 6D AD 5D QC',
+  '9H 6H 3S 8C 8H AH TC 4H JS TD',
+  '2C TS 4D 7H 2D QC 9C 5D TH 7C',
+  '6C 8H QC 5D TS JH 5C 5H 9H 4S',
+  '2D QC 7H AS JS 8S 2H 4C 4H 8D',
+  'JS 6S AC KD 3D 3C 4S 7H TH KC',
+  'QH KH 6S QS 5S 4H 3C QD 3S 3H',
+  '7H AS KH 8C 4H 9C 5S 3D 6S TS',
+  '9C 7C 3H 5S QD 2C 3D AD AC 5H',
+  'JH TD 2D 4C TS 3H KH AD 3S 7S',
+  'AS 4C 5H 4D 6S KD JC 3C 6H 2D',
+  '3H 6S 8C 2D TH 4S AH QH AD 5H',
+  '7C 2S 9H 7H KC 5C 6D 5S 3H JC',
+  '3C TC 9C 4H QD TD JH 6D 9H 5S',
+  '7C 6S 5C 5D 6C 4S 7H 9H 6H AH',
+  'AD 2H 7D KC 2C 4C 2S 9S 7H 3S',
+  'TH 4C 8S 6S 3S AD KS AS JH TD',
+  '5C TD 4S 4D AD 6S 5D TC 9C 7D',
+  '8H 3S 4D 4S 5S 6H 5C AC 3H 3D',
+  '9H 3C AC 4S QS 8S 9D QH 5H 4D',
+  'JC 6C 5H TS AC 9C JD 8C 7C QD',
+  '8S 8H 9C JD 2D QC QH 6H 3C 8D',
+  'KS JS 2H 6H 5H QH QS 3H 7C 6D',
+  'TC 3H 4S 7H QC 2H 3S 8C JS KH',
+  'AH 8H 5S 4C 9H JD 3H 7S JC AC',
+  '3C 2D 4C 5S 6C 4S QS 3S JD 3D',
+  '5H 2D TC AH KS 6D 7H AD 8C 6H',
+  '6C 7S 3C JD 7C 8H KS KH AH 6D',
+  'AH 7D 3H 8H 8S 7H QS 5H 9D 2D',
+  'JD AC 4H 7S 8S 9S KS AS 9D QH',
+  '7S 2C 8S 5S JH QS JC AH KD 4C',
+  'AH 2S 9H 4H 8D TS TD 6H QH JD',
+  '4H JC 3H QS 6D 7S 9C 8S 9D 8D',
+  '5H TD 4S 9S 4C 8C 8D 7H 3H 3D',
+  'QS KH 3S 2C 2S 3C 7S TD 4S QD',
+  '7C TD 4D 5S KH AC AS 7H 4C 6C',
+  '2S 5H 6D JD 9H QS 8S 2C 2H TD',
+  '2S TS 6H 9H 7S 4H JC 4C 5D 5S',
+  '2C 5H 7D 4H 3S QH JC JS 6D 8H',
+  '4C QH 7C QD 3S AD TH 8S 5S TS',
+  '9H TC 2S TD JC 7D 3S 3D TH QH',
+  '7D 4C 8S 5C JH 8H 6S 3S KC 3H',
+  'JC 3H KH TC QH TH 6H 2C AC 5H',
+  'QS 2H 9D 2C AS 6S 6C 2S 8C 8S',
+  '9H 7D QC TH 4H KD QS AC 7S 3C',
+  '4D JH 6S 5S 8H KS 9S QC 3S AS',
+  'JD 2D 6S 7S TC 9H KC 3H 7D KD',
+  '2H KH 7C 4D 4S 3H JS QD 7D KC',
+  '4C JC AS 9D 3C JS 6C 8H QD 4D',
+  'AH JS 3S 6C 4C 3D JH 6D 9C 9H',
+  '9H 2D 8C 7H 5S KS 6H 9C 2S TC',
+  '6C 8C AD 7H 6H 3D KH AS 5D TH',
+  'KS 8C 3S TS 8S 4D 5S 9S 6C 4H',
+  '9H 4S 4H 5C 7D KC 2D 2H 9D JH',
+  '5C JS TC 9D 9H 5H 7S KH JC 6S',
+  '7C 9H 8H 4D JC KH JD 2H TD TC',
+  '8H 6C 2H 2C KH 6H 9D QS QH 5H',
+  'AC 7D 2S 3D QD JC 2D 8D JD JH',
+  '2H JC 2D 7H 2C 3C 8D KD TD 4H',
+  '3S 4H 6D 8D TS 3H TD 3D 6H TH',
+  'JH JC 3S AC QH 9H 7H 8S QC 2C',
+  '7H TD QS 4S 8S 9C 2S 5D 4D 2H',
+  '3D TS 3H 2S QC 8H 6H KC JC KS',
+  '5D JD 7D TC 8C 6C 9S 3D 8D AC',
+  '8H 6H JH 6C 5D 8D 8S 4H AD 2C',
+  '9D 4H 2D 2C 3S TS AS TC 3C 5D',
+  '4D TH 5H KS QS 6C 4S 2H 3D AD',
+  '5C KC 6H 2C 5S 3C 4D 2D 9H 9S',
+  'JD 4C 3H TH QH 9H 5S AH 8S AC',
+  '7D 9S 6S 2H TD 9C 4H 8H QS 4C',
+  '3C 6H 5D 4H 8C 9C KC 6S QD QS',
+  '3S 9H KD TC 2D JS 8C 6S 4H 4S',
+  '2S 4C 8S QS 6H KH 3H TH 8C 5D',
+  '2C KH 5S 3S 7S 7H 6C 9D QD 8D',
+  '8H KS AC 2D KH TS 6C JS KC 7H',
+  '9C KS 5C TD QC AH 6C 5H 9S 7C',
+  '5D 4D 3H 4H 6S 7C 7S AH QD TD',
+  '2H 7D QC 6S TC TS AH 7S 9D 3H',
+  'TH 5H QD 9S KS 7S 7C 6H 8C TD',
+  'TH 2D 4D QC 5C 7D JD AH 9C 4H',
+  '4H 3H AH 8D 6H QC QH 9H 2H 2C',
+  '2D AD 4C TS 6H 7S TH 4H QS TD',
+  '3C KD 2H 3H QS JD TC QC 5D 8H',
+  'KS JC QD TH 9S KD 8D 8C 2D 9C',
+  '3C QD KD 6D 4D 8D AH AD QC 8S',
+  '8H 3S 9D 2S 3H KS 6H 4C 7C KC',
+  'TH 9S 5C 3D 7D 6H AC 7S 4D 2C',
+  '5C 3D JD 4D 2D 6D 5H 9H 4C KH',
+  'AS 7H TD 6C 2H 3D QD KS 4C 4S',
+  'JC 3C AC 7C JD JS 8H 9S QC 5D',
+  'JD 6S 5S 2H AS 8C 7D 5H JH 3D',
+  '8D TC 5S 9S 8S 3H JC 5H 7S AS',
+  '5C TD 3D 7D 4H 8D 7H 4D 5D JS',
+  'QS 9C KS TD 2S 8S 5C 2H 4H AS',
+  'TH 7S 4H 7D 3H JD KD 5D 2S KC',
+  'JD 7H 4S 8H 4C JS 6H QH 5S 4H',
+  '2C QS 8C 5S 3H QC 2S 6C QD AD',
+  '8C 3D JD TC 4H 2H AD 5S AC 2S',
+  '5D 2C JS 2D AD 9D 3D 4C 4S JH',
+  '8D 5H 5D 6H 7S 4D KS 9D TD JD',
+  '3D 6D 9C 2S AS 7D 5S 5C 8H JD',
+  '7C 8S 3S 6S 5H JD TC AD 7H 7S',
+  '2S 9D TS 4D AC 8D 6C QD JD 3H',
+  '9S KH 2C 3C AC 3D 5H 6H 8D 5D',
+  'KS 3D 2D 6S AS 4C 2S 7C 7H KH',
+  'AC 2H 3S JC 5C QH 4D 2D 5H 7S',
+  'TS AS JD 8C 6H JC 8S 5S 2C 5D',
+  '7S QH 7H 6C QC 8H 2D 7C JD 2S',
+  '2C QD 2S 2H JC 9C 5D 2D JD JH',
+  '7C 5C 9C 8S 7D 6D 8D 6C 9S JH',
+  '2C AD 6S 5H 3S KS 7S 9D KH 4C',
+  '7H 6C 2C 5C TH 9D 8D 3S QC AH',
+  '5S KC 6H TC 5H 8S TH 6D 3C AH',
+  '9C KD 4H AD TD 9S 4S 7D 6H 5D',
+  '7H 5C 5H 6D AS 4C KD KH 4H 9D',
+  '3C 2S 5C 6C JD QS 2H 9D 7D 3H',
+  'AC 2S 6S 7S JS QD 5C QS 6H AD',
+  '5H TH QC 7H TC 3S 7C 6D KC 3D',
+  '4H 3D QC 9S 8H 2C 3S JC KS 5C',
+  '4S 6S 2C 6H 8S 3S 3D 9H 3H JS',
+  '4S 8C 4D 2D 8H 9H 7D 9D AH TS',
+  '9S 2C 9H 4C 8D AS 7D 3D 6D 5S',
+  '6S 4C 7H 8C 3H 5H JC AH 9D 9C',
+  '2S 7C 5S JD 8C 3S 3D 4D 7D 6S',
+  '3C KC 4S 5D 7D 3D JD 7H 3H 4H',
+  '9C 9H 4H 4D TH 6D QD 8S 9S 7S',
+  '2H AC 8S 4S AD 8C 2C AH 7D TC',
+  'TS 9H 3C AD KS TC 3D 8C 8H JD',
+  'QC 8D 2C 3C 7D 7C JD 9H 9C 6C',
+  'AH 6S JS JH 5D AS QC 2C JD TD',
+  '9H KD 2H 5D 2D 3S 7D TC AH TS',
+  'TD 8H AS 5D AH QC AC 6S TC 5H',
+  'KS 4S 7H 4D 8D 9C TC 2H 6H 3H',
+  '3H KD 4S QD QH 3D 8H 8C TD 7S',
+  '8S JD TC AH JS QS 2D KH KS 4D',
+  '3C AD JC KD JS KH 4S TH 9H 2C',
+  'QC 5S JS 9S KS AS 7C QD 2S JD',
+  'KC 5S QS 3S 2D AC 5D 9H 8H KS',
+  '6H 9C TC AD 2C 6D 5S JD 6C 7C',
+  'QS KH TD QD 2C 3H 8S 2S QC AH',
+  '9D 9H JH TC QH 3C 2S JS 5C 7H',
+  '6C 3S 3D 2S 4S QD 2D TH 5D 2C',
+  '2D 6H 6D 2S JC QH AS 7H 4H KH',
+  '5H 6S KS AD TC TS 7C AC 4S 4H',
+  'AD 3C 4H QS 8C 9D KS 2H 2D 4D',
+  '4S 9D 6C 6D 9C AC 8D 3H 7H KD',
+  'JC AH 6C TS JD 6D AD 3S 5D QD',
+  'JC JH JD 3S 7S 8S JS QC 3H 4S',
+  'JD TH 5C 2C AD JS 7H 9S 2H 7S',
+  '8D 3S JH 4D QC AS JD 2C KC 6H',
+  '2C AC 5H KD 5S 7H QD JH AH 2D',
+  'JC QH 8D 8S TC 5H 5C AH 8C 6C',
+  '3H JS 8S QD JH 3C 4H 6D 5C 3S',
+  '6D 4S 4C AH 5H 5S 3H JD 7C 8D',
+  '8H AH 2H 3H JS 3C 7D QC 4H KD',
+  '6S 2H KD 5H 8H 2D 3C 8S 7S QD',
+  '2S 7S KC QC AH TC QS 6D 4C 8D',
+  '5S 9H 2C 3S QD 7S 6C 2H 7C 9D',
+  '3C 6C 5C 5S JD JC KS 3S 5D TS',
+  '7C KS 6S 5S 2S 2D TC 2H 5H QS',
+  'AS 7H 6S TS 5H 9S 9D 3C KD 2H',
+  '4S JS QS 3S 4H 7C 2S AC 6S 9D',
+  '8C JH 2H 5H 7C 5D QH QS KH QC',
+  '3S TD 3H 7C KC 8D 5H 8S KH 8C',
+  '4H KH JD TS 3C 7H AS QC JS 5S',
+  'AH 9D 2C 8D 4D 2D 6H 6C KC 6S',
+  '2S 6H 9D 3S 7H 4D KH 8H KD 3D',
+  '9C TC AC JH KH 4D JD 5H TD 3S',
+  '7S 4H 9D AS 4C 7D QS 9S 2S KH',
+  '3S 8D 8S KS 8C JC 5C KH 2H 5D',
+  '8S QH 2C 4D KC JS QC 9D AC 6H',
+  '8S 8C 7C JS JD 6S 4C 9C AC 4S',
+  'QH 5D 2C 7D JC 8S 2D JS JH 4C',
+  'JS 4C 7S TS JH KC KH 5H QD 4S',
+  'QD 8C 8D 2D 6S TD 9D AC QH 5S',
+  'QH QC JS 3D 3C 5C 4H KH 8S 7H',
+  '7C 2C 5S JC 8S 3H QC 5D 2H KC',
+  '5S 8D KD 6H 4H QD QH 6D AH 3D',
+  '7S KS 6C 2S 4D AC QS 5H TS JD',
+  '7C 2D TC 5D QS AC JS QC 6C KC',
+  '2C KS 4D 3H TS 8S AD 4H 7S 9S',
+  'QD 9H QH 5H 4H 4D KH 3S JC AD',
+  '4D AC KC 8D 6D 4C 2D KH 2C JD',
+  '2C 9H 2D AH 3H 6D 9C 7D TC KS',
+  '8C 3H KD 7C 5C 2S 4S 5H AS AH',
+  'TH JD 4H KD 3H TC 5C 3S AC KH',
+  '6D 7H AH 7S QC 6H 2D TD JD AS',
+  'JH 5D 7H TC 9S 7D JC AS 5S KH',
+  '2H 8C AD TH 6H QD KD 9H 6S 6C',
+  'QH KC 9D 4D 3S JS JH 4H 2C 9H',
+  'TC 7H KH 4H JC 7D 9S 3H QS 7S',
+  'AD 7D JH 6C 7H 4H 3S 3H 4D QH',
+  'JD 2H 5C AS 6C QC 4D 3C TC JH',
+  'AC JD 3H 6H 4C JC AD 7D 7H 9H',
+  '4H TC TS 2C 8C 6S KS 2H JD 9S',
+  '4C 3H QS QC 9S 9H 6D KC 9D 9C',
+  '5C AD 8C 2C QH TH QD JC 8D 8H',
+  'QC 2C 2S QD 9C 4D 3S 8D JH QS',
+  '9D 3S 2C 7S 7C JC TD 3C TC 9H',
+  '3C TS 8H 5C 4C 2C 6S 8D 7C 4H',
+  'KS 7H 2H TC 4H 2C 3S AS AH QS',
+  '8C 2D 2H 2C 4S 4C 6S 7D 5S 3S',
+  'TH QC 5D TD 3C QS KD KC KS AS',
+  '4D AH KD 9H KS 5C 4C 6H JC 7S',
+  'KC 4H 5C QS TC 2H JC 9S AH QH',
+  '4S 9H 3H 5H 3C QD 2H QC JH 8H',
+  '5D AS 7H 2C 3D JH 6H 4C 6S 7D',
+  '9C JD 9H AH JS 8S QH 3H KS 8H',
+  '3S AC QC TS 4D AD 3D AH 8S 9H',
+  '7H 3H QS 9C 9S 5H JH JS AH AC',
+  '8D 3C JD 2H AC 9C 7H 5S 4D 8H',
+  '7C JH 9H 6C JS 9S 7H 8C 9D 4H',
+  '2D AS 9S 6H 4D JS JH 9H AD QD',
+  '6H 7S JH KH AH 7H TD 5S 6S 2C',
+  '8H JH 6S 5H 5S 9D TC 4C QC 9S',
+  '7D 2C KD 3H 5H AS QD 7H JS 4D',
+  'TS QH 6C 8H TH 5H 3C 3H 9C 9D',
+  'AD KH JS 5D 3H AS AC 9S 5C KC',
+  '2C KH 8C JC QS 6D AH 2D KC TC',
+  '9D 3H 2S 7C 4D 6D KH KS 8D 7D',
+  '9H 2S TC JH AC QC 3H 5S 3S 8H',
+  '3S AS KD 8H 4C 3H 7C JH QH TS',
+  '7S 6D 7H 9D JH 4C 3D 3S 6C AS',
+  '4S 2H 2C 4C 8S 5H KC 8C QC QD',
+  '3H 3S 6C QS QC 2D 6S 5D 2C 9D',
+  '2H 8D JH 2S 3H 2D 6C 5C 7S AD',
+  '9H JS 5D QH 8S TS 2H 7S 6S AD',
+  '6D QC 9S 7H 5H 5C 7D KC JD 4H',
+  'QC 5S 9H 9C 4D 6S KS 2S 4C 7C',
+  '9H 7C 4H 8D 3S 6H 5C 8H JS 7S',
+  '2D 6H JS TD 4H 4D JC TH 5H KC',
+  'AC 7C 8D TH 3H 9S 2D 4C KC 4D',
+  'KD QS 9C 7S 3D KS AD TS 4C 4H',
+  'QH 9C 8H 2S 7D KS 7H 5D KD 4C',
+  '9C 2S 2H JC 6S 6C TC QC JH 5C',
+  '7S AC 8H KC 8S 6H QS JC 3D 6S',
+  'JS 2D JH 8C 4S 6H 8H 6D 5D AD',
+  '6H 7D 2S 4H 9H 7C AS AC 8H 5S',
+  '3C JS 4S 6D 5H 2S QH 6S 9C 2C',
+  '3D 5S 6S 9S 4C QS 8D QD 8S TC',
+  '9C 3D AH 9H 5S 2C 7D AD JC 3S',
+  '7H TC AS 3C 6S 6D 7S KH KC 9H',
+  '3S TC 8H 6S 5H JH 8C 7D AC 2S',
+  'QD 9D 9C 3S JC 8C KS 8H 5D 4D',
+  'JS AH JD 6D 9D 8C 9H 9S 8H 3H',
+  '2D 6S 4C 4D 8S AD 4S TC AH 9H',
+  'TS AC QC TH KC 6D 4H 7S 8C 2H',
+  '3C QD JS 9D 5S JC AH 2H TS 9H',
+  '3H 4D QH 5D 9C 5H 7D 4S JC 3S',
+  '8S TH 3H 7C 2H JD JS TS AC 8D',
+  '9C 2H TD KC JD 2S 8C 5S AD 2C',
+  '3D KD 7C 5H 4D QH QD TC 6H 7D',
+  '7H 2C KC 5S KD 6H AH QC 7S QH',
+  '6H 5C AC 5H 2C 9C 2D 7C TD 2S',
+  '4D 9D AH 3D 7C JD 4H 8C 4C KS',
+  'TH 3C JS QH 8H 4C AS 3D QS QC',
+  '4D 7S 5H JH 6D 7D 6H JS KH 3C',
+  'QD 8S 7D 2H 2C 7C JC 2S 5H 8C',
+  'QH 8S 9D TC 2H AD 7C 8D QD 6S',
+  '3S 7C AD 9H 2H 9S JD TS 4C 2D',
+  '3S AS 4H QC 2C 8H 8S 7S TD TC',
+  'JH TH TD 3S 4D 4H 5S 5D QS 2C',
+  '8C QD QH TC 6D 4S 9S 9D 4H QC',
+  '8C JS 9D 6H JD 3H AD 6S TD QC',
+  'KC 8S 3D 7C TD 7D 8D 9H 4S 3S',
+  '6C 4S 3D 9D KD TC KC KS AC 5S',
+  '7C 6S QH 3D JS KD 6H 6D 2D 8C',
+  'JD 2S 5S 4H 8S AC 2D 6S TS 5C',
+  '5H 8C 5S 3C 4S 3D 7C 8D AS 3H',
+  'AS TS 7C 3H AD 7D JC QS 6C 6H',
+  '3S 9S 4C AC QH 5H 5D 9H TS 4H',
+  '6C 5C 7H 7S TD AD JD 5S 2H 2S',
+  '7D 6C KC 3S JD 8D 8S TS QS KH',
+  '8S QS 8D 6C TH AC AH 2C 8H 9S',
+  '7H TD KH QH 8S 3D 4D AH JD AS',
+  'TS 3D 2H JC 2S JH KH 6C QC JS',
+  'KC TH 2D 6H 7S 2S TC 8C 9D QS',
+  '3C 9D 6S KH 8H 6D 5D TH 2C 2H',
+  '6H TC 7D AD 4D 8S TS 9H TD 7S',
+  'JS 6D JD JC 2H AC 6C 3D KH 8D',
+  'KH JD 9S 5D 4H 4C 3H 7S QS 5C',
+  '4H JD 5D 3S 3C 4D KH QH QS 7S',
+  'JD TS 8S QD AH 4C 6H 3S 5S 2C',
+  'QS 3D JD AS 8D TH 7C 6S QC KS',
+  '7S 2H 8C QC 7H AC 6D 2D TH KH',
+  '5S 6C 7H KH 7D AH 8C 5C 7S 3D',
+  '3C KD AD 7D 6C 4D KS 2D 8C 4S',
+  '7C 8D 5S 2D 2S AH AD 2C 9D TD',
+  '3C AD 4S KS JH 7C 5C 8C 9C TH',
+  'AS TD 4D 7C JD 8C QH 3C 5H 9S',
+  '3H 9C 8S 9S 6S QD KS AH 5H JH',
+  'QC 9C 5S 4H 2H TD 7D AS 8C 9D',
+  '8C 2C 9D KD TC 7S 3D KH QC 3C',
+  '4D AS 4C QS 5S 9D 6S JD QH KS',
+  '6D AH 6C 4C 5H TS 9H 7D 3D 5S',
+  'QS JD 7C 8D 9C AC 3S 6S 6C KH',
+  '8H JH 5D 9S 6D AS 6S 3S QC 7H',
+  'QD AD 5C JH 2H AH 4H AS KC 2C',
+  'JH 9C 2C 6H 2D JS 5D 9H KC 6D',
+  '7D 9D KD TH 3H AS 6S QC 6H AD',
+  'JD 4H 7D KC 3H JS 3C TH 3D QS',
+  '4C 3H 8C QD 5H 6H AS 8H AD JD',
+  'TH 8S KD 5D QC 7D JS 5S 5H TS',
+  '7D KC 9D QS 3H 3C 6D TS 7S AH',
+  '7C 4H 7H AH QC AC 4D 5D 6D TH',
+  '3C 4H 2S KD 8H 5H JH TC 6C JD',
+  '4S 8C 3D 4H JS TD 7S JH QS KD',
+  '7C QC KD 4D 7H 6S AD TD TC KH',
+  '5H 9H KC 3H 4D 3D AD 6S QD 6H',
+  'TH 7C 6H TS QH 5S 2C KC TD 6S',
+  '7C 4D 5S JD JH 7D AC KD KH 4H',
+  '7D 6C 8D 8H 5C JH 8S QD TH JD',
+  '8D 7D 6C 7C 9D KD AS 5C QH JH',
+  '9S 2C 8C 3C 4C KS JH 2D 8D 4H',
+  '7S 6C JH KH 8H 3H 9D 2D AH 6D',
+  '4D TC 9C 8D 7H TD KS TH KD 3C',
+  'JD 9H 8D QD AS KD 9D 2C 2S 9C',
+  '8D 3H 5C 7H KS 5H QH 2D 8C 9H',
+  '2D TH 6D QD 6C KC 3H 3S AD 4C',
+  '4H 3H JS 9D 3C TC 5H QH QC JC',
+  '3D 5C 6H 3S 3C JC 5S 7S 2S QH',
+  'AC 5C 8C 4D 5D 4H 2S QD 3C 3H',
+  '2C TD AH 9C KD JS 6S QD 4C QC',
+  'QS 8C 3S 4H TC JS 3H 7C JC AD',
+  '5H 4D 9C KS JC TD 9S TS 8S 9H',
+  'QD TS 7D AS AC 2C TD 6H 8H AH',
+  '6S AD 8C 4S 9H 8D 9D KH 8S 3C',
+  'QS 4D 2D 7S KH JS JC AD 4C 3C',
+  'QS 9S 7H KC TD TH 5H JS AC JH',
+  '6D AC 2S QS 7C AS KS 6S KH 5S',
+  '6D 8H KH 3C QS 2H 5C 9C 9D 6C',
+  'JS 2C 4C 6H 7D JC AC QD TD 3H',
+  '4H QC 8H JD 4C KD KS 5C KC 7S',
+  '6D 2D 3H 2S QD 5S 7H AS TH 6S',
+  'AS 6D 8D 2C 8S TD 8H QD JC AH',
+  '9C 9H 2D TD QH 2H 5C TC 3D 8H',
+  'KC 8S 3D KH 2S TS TC 6S 4D JH',
+  '9H 9D QS AC KC 6H 5D 4D 8D AH',
+  '9S 5C QS 4H 7C 7D 2H 8S AD JS',
+  '3D AC 9S AS 2C 2D 2H 3H JC KH',
+  '7H QH KH JD TC KS 5S 8H 4C 8D',
+  '2H 7H 3S 2S 5H QS 3C AS 9H KD',
+  'AD 3D JD 6H 5S 9C 6D AC 9S 3S',
+  '3D 5D 9C 2D AC 4S 2S AD 6C 6S',
+  'QC 4C 2D 3H 6S KC QH QD 2H JH',
+  'QC 3C 8S 4D 9S 2H 5C 8H QS QD',
+  '6D KD 6S 7H 3S KH 2H 5C JC 6C',
+  '3S 9S TC 6S 8H 2D AD 7S 8S TS',
+  '3C 6H 9C 3H 5C JC 8H QH TD QD',
+  '3C JS QD 5D TD 2C KH 9H TH AS',
+  '9S TC JD 3D 5C 5H AD QH 9H KC',
+  'TC 7H 4H 8H 3H TD 6S AC 7C 2S',
+  'QS 9D 5D 3C JC KS 4D 6C JH 2S',
+  '9S 6S 3C 7H TS 4C KD 6D 3D 9C',
+  '2D 9H AH AC 7H 2S JH 3S 7C QC',
+  'QD 9H 3C 2H AC AS 8S KD 8C KH',
+  '2D 7S TD TH 6D JD 8D 4D 2H 5S',
+  '8S QH KD JD QS JH 4D KC 5H 3S',
+  '3C KH QC 6D 8H 3S AH 7D TD 2D',
+  '5S 9H QH 4S 6S 6C 6D TS TH 7S',
+  '6C 4C 6D QS JS 9C TS 3H 8D 8S',
+  'JS 5C 7S AS 2C AH 2H AD 5S TC',
+  'KD 6C 9C 9D TS 2S JC 4H 2C QD',
+  'QS 9H TC 3H KC KS 4H 3C AD TH',
+  'KH 9C 2H KD 9D TC 7S KC JH 2D',
+  '7C 3S KC AS 8C 5D 9C 9S QH 3H',
+  '2D 8C TD 4C 2H QC 5D TC 2C 7D',
+  'KS 4D 6C QH TD KH 5D 7C AD 8D',
+  '2S 9S 8S 4C 8C 3D 6H QD 7C 7H',
+  '6C 8S QH 5H TS 5C 3C 4S 2S 2H',
+  '8S 6S 2H JC 3S 3H 9D 8C 2S 7H',
+  'QC 2C 8H 9C AC JD 4C 4H 6S 3S',
+  '3H 3S 7D 4C 9S 5H 8H JC 3D TC',
+  'QH 2S 2D 9S KD QD 9H AD 6D 9C',
+  '8D 2D KS 9S JC 4C JD KC 4S TH',
+  'KH TS 6D 4D 5C KD 5H AS 9H AD',
+  'QD JS 7C 6D 5D 5C TH 5H QH QS',
+  '9D QH KH 5H JH 4C 4D TC TH 6C',
+  'KH AS TS 9D KD 9C 7S 4D 8H 5S',
+  'KH AS 2S 7D 9D 4C TS TH AH 7C',
+  'KS 4D AC 8S 9S 8D TH QH 9D 5C',
+  '5D 5C 8C QS TC 4C 3D 3S 2C 8D',
+  '9D KS 2D 3C KC 4S 8C KH 6C JC',
+  '8H AH 6H 7D 7S QD 3C 4C 6C KC',
+  '3H 2C QH 8H AS 7D 4C 8C 4H KC',
+  'QD 5S 4H 2C TD AH JH QH 4C 8S',
+  '3H QS 5S JS 8H 2S 9H 9C 3S 2C',
+  '6H TS 7S JC QD AC TD KC 5S 3H',
+  'QH AS QS 7D JC KC 2C 4C 5C 5S',
+  'QH 3D AS JS 4H 8D 7H JC 2S 9C',
+  '5D 4D 2S 4S 9D 9C 2D QS 8H 7H',
+  '6D 7H 3H JS TS AC 2D JH 7C 8S',
+  'JH 5H KC 3C TC 5S 9H 4C 8H 9D',
+  '8S KC 5H 9H AD KS 9D KH 8D AH',
+  'JC 2H 9H KS 6S 3H QC 5H AH 9C',
+  '5C KH 5S AD 6C JC 9H QC 9C TD',
+  '5S 5D JC QH 2D KS 8H QS 2H TS',
+  'JH 5H 5S AH 7H 3C 8S AS TD KH',
+  '6H 3D JD 2C 4C KC 7S AH 6C JH',
+  '4C KS 9D AD 7S KC 7D 8H 3S 9C',
+  '7H 5C 5H 3C 8H QC 3D KH 6D JC',
+  '2D 4H 5D 7D QC AD AH 9H QH 8H',
+  'KD 8C JS 9D 3S 3C 2H 5D 6D 2S',
+  '8S 6S TS 3C 6H 8D 5S 3H TD 6C',
+  'KS 3D JH 9C 7C 9S QS 5S 4H 6H',
+  '7S 6S TH 4S KC KD 3S JC JH KS',
+  '7C 3C 2S 6D QH 2C 7S 5H 8H AH',
+  'KC 8D QD 6D KH 5C 7H 9D 3D 9C',
+  '6H 2D 8S JS 9S 2S 6D KC 7C TC',
+  'KD 9C JH 7H KC 8S 2S 7S 3D 6H',
+  '4H 9H 2D 4C 8H 7H 5S 8S 2H 8D',
+  'AD 7C 3C 7S 5S 4D 9H 3D JC KH',
+  '5D AS 7D 6D 9C JC 4C QH QS KH',
+  'KD JD 7D 3D QS QC 8S 6D JS QD',
+  '6S 8C 5S QH TH 9H AS AC 2C JD',
+  'QC KS QH 7S 3C 4C 5C KC 5D AH',
+  '6C 4H 9D AH 2C 3H KD 3D TS 5C',
+  'TD 8S QS AS JS 3H KD AC 4H KS',
+  '7D 5D TS 9H 4H 4C 9C 2H 8C QC',
+  '2C 7D 9H 4D KS 4C QH AD KD JS',
+  'QD AD AH KH 9D JS 9H JC KD JD',
+  '8S 3C 4S TS 7S 4D 5C 2S 6H 7C',
+  'JS 7S 5C KD 6D QH 8S TD 2H 6S',
+  'QH 6C TC 6H TD 4C 9D 2H QC 8H',
+  '3D TS 4D 2H 6H 6S 2C 7H 8S 6C',
+  '9H 9D JD JH 3S AH 2C 6S 3H 8S',
+  '2C QS 8C 5S 3H 2S 7D 3C AD 4S',
+  '5C QC QH AS TS 4S 6S 4C 5H JS',
+  'JH 5C TD 4C 6H JS KD KH QS 4H',
+  'TC KH JC 4D 9H 9D 8D KC 3C 8H',
+  '2H TC 8S AD 9S 4H TS 7H 2C 5C',
+  '4H 2S 6C 5S KS AH 9C 7C 8H KD',
+  'TS QH TD QS 3C JH AH 2C 8D 7D',
+  '5D KC 3H 5S AC 4S 7H QS 4C 2H',
+  '3D 7D QC KH JH 6D 6C TD TH KD',
+  '5S 8D TH 6C 9D 7D KH 8C 9S 6D',
+  'JD QS 7S QC 2S QH JC 4S KS 8D',
+  '7S 5S 9S JD KD 9C JC AD 2D 7C',
+  '4S 5H AH JH 9C 5D TD 7C 2D 6S',
+  'KC 6C 7H 6S 9C QD 5S 4H KS TD',
+  '6S 8D KS 2D TH TD 9H JD TS 3S',
+  'KH JS 4H 5D 9D TC TD QC JD TS',
+  'QS QD AC AD 4C 6S 2D AS 3H KC',
+  '4C 7C 3C TD QS 9C KC AS 8D AD',
+  'KC 7H QC 6D 8H 6S 5S AH 7S 8C',
+  '3S AD 9H JC 6D JD AS KH 6S JH',
+  'AD 3D TS KS 7H JH 2D JS QD AC',
+  '9C JD 7C 6D TC 6H 6C JC 3D 3S',
+  'QC KC 3S JC KD 2C 8D AH QS TS',
+  'AS KD 3D JD 8H 7C 8C 5C QD 6C'
+];
+```
+
+## --seed-contents--
+
+```js
+function pokerHands(arr) {
+
+  return true;
+}
+
+const testArr = [
+  '8C TS KC 9H 4S 7D 2S 5D 3S AC',
+  '5C AD 5D AC 9C 7C 5H 8D TD KS',
+  '3H 7H 6S KC JS QH TD JC 2D 8S',
+  'TH 8H 5C QS TC 9H 4D JC KS JS',
+  '7C 5H KC QH JD AS KH 4C AD 4S'
+];
+
+pokerHands(testArr);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-55-lychrel-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-55-lychrel-numbers.md
new file mode 100644
index 00000000000..890c5b0997d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-55-lychrel-numbers.md
@@ -0,0 +1,113 @@
+---
+id: 5900f3a31000cf542c50feb6
+title: 'Problem 55: Lychrel numbers'
+challengeType: 1
+forumTopicId: 302166
+dashedName: problem-55-lychrel-numbers
+---
+
+# --description--
+
+If we take 47, reverse and add, 47 + 74 = 121, which is palindromic.
+
+Not all numbers produce palindromes so quickly. For example,
+
+<div style="margin-left: 4em;">
+  349 + 943 = 1292,<br>
+  1292 + 2921 = 4213<br>
+  4213 + 3124 = 7337<br>
+</div>
+
+That is, 349 took three iterations to arrive at a palindrome.
+
+Although no one has proved it yet, it is thought that some numbers, like 196, never produce a palindrome. A number that never forms a palindrome through the reverse and add process is called a Lychrel number. Due to the theoretical nature of these numbers, and for the purpose of this problem, we shall assume that a number is Lychrel until proven otherwise. In addition you are given that for every number below ten-thousand, it will either (i) become a palindrome in less than fifty iterations, or, (ii) no one, with all the computing power that exists, has managed so far to map it to a palindrome. In fact, 10677 is the first number to be shown to require over fifty iterations before producing a palindrome: 4668731596684224866951378664 (53 iterations, 28-digits).
+
+Surprisingly, there are palindromic numbers that are themselves Lychrel numbers; the first example is 4994.
+
+How many Lychrel numbers are there below `num`?
+
+**Note:** Wording was modified slightly on 24 April 2007 to emphasize the theoretical nature of Lychrel numbers.
+
+# --hints--
+
+`countLychrelNumbers(1000)` should return a number.
+
+```js
+assert(typeof countLychrelNumbers(1000) === 'number');
+```
+
+`countLychrelNumbers(1000)` should return 13.
+
+```js
+assert.strictEqual(countLychrelNumbers(1000), 13);
+```
+
+`countLychrelNumbers(3243)` should return 39.
+
+```js
+assert.strictEqual(countLychrelNumbers(3243), 39);
+```
+
+`countLychrelNumbers(5000)` should return 76.
+
+```js
+assert.strictEqual(countLychrelNumbers(5000), 76);
+```
+
+`countLychrelNumbers(7654)` should return 140.
+
+```js
+assert.strictEqual(countLychrelNumbers(7654), 140);
+```
+
+`countLychrelNumbers(10000)` should return 249.
+
+```js
+assert.strictEqual(countLychrelNumbers(10000), 249);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countLychrelNumbers(num) {
+
+  return true;
+}
+
+countLychrelNumbers(10000);
+```
+
+# --solutions--
+
+```js
+const countLychrelNumbers = (size) => {
+  const numReverse = (num) => {
+    return Number(num.toString().split('').reverse().join(''));
+  };
+  const isPalin = (num) => {
+    if (numReverse(num) === num) {
+      return true;
+    }
+    return false;
+  };
+  let total = 0;
+  for (let i = 1; i < size; i++) {
+    let loopCount = 1;
+    let sum = i;
+    while (loopCount < 50) {
+      sum = sum + numReverse(sum);
+      if (isPalin(sum)) {
+        break;
+      } else {
+        loopCount++;
+      }
+    }
+    if (loopCount === 50) {
+      total++;
+    }
+  }
+  return total;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-56-powerful-digit-sum.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-56-powerful-digit-sum.md
new file mode 100644
index 00000000000..e445973f332
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-56-powerful-digit-sum.md
@@ -0,0 +1,101 @@
+---
+id: 5900f3a41000cf542c50feb7
+title: 'Problem 56: Powerful digit sum'
+challengeType: 1
+forumTopicId: 302167
+dashedName: problem-56-powerful-digit-sum
+---
+
+# --description--
+
+A googol ($10^{100}$) is a massive number: one followed by one-hundred zeros; $100^{100}$ is almost unimaginably large: one followed by two-hundred zeros. Despite their size, the sum of the digits in each number is only 1.
+
+Considering natural numbers of the form, $a^b$, where `a`, `b` &lt; `n`, what is the maximum digital sum?
+
+# --hints--
+
+`powerfulDigitSum(3)` should return a number.
+
+```js
+assert(typeof powerfulDigitSum(3) === 'number');
+```
+
+`powerfulDigitSum(3)` should return `4`.
+
+```js
+assert.strictEqual(powerfulDigitSum(3), 4);
+```
+
+`powerfulDigitSum(10)` should return `45`.
+
+```js
+assert.strictEqual(powerfulDigitSum(10), 45);
+```
+
+`powerfulDigitSum(50)` should return `406`.
+
+```js
+assert.strictEqual(powerfulDigitSum(50), 406);
+```
+
+`powerfulDigitSum(75)` should return `684`.
+
+```js
+assert.strictEqual(powerfulDigitSum(75), 684);
+```
+
+`powerfulDigitSum(100)` should return `972`.
+
+```js
+assert.strictEqual(powerfulDigitSum(100), 972);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function powerfulDigitSum(n) {
+
+  return true;
+}
+
+powerfulDigitSum(3);
+```
+
+# --solutions--
+
+```js
+function powerfulDigitSum(n) {
+  function sumDigitsOfPower(numA, numB) {
+    let digitsSum = 0;
+    let number = power(numA, numB);
+    while (number > 0n) {
+      const digit = number % 10n;
+      digitsSum += parseInt(digit, 10);
+      number = number / 10n;
+    }
+    return digitsSum;
+  }
+
+  function power(numA, numB) {
+    let sum = 1n;
+    for (let b = 0; b < numB; b++) {
+      sum = sum * BigInt(numA);
+    }
+    return sum;
+  }
+
+  const limit = n - 1;
+  let maxDigitsSum = 0;
+  for (let a = limit; a > 0; a--) {
+    for (let b = limit; b > 0; b--) {
+      const curDigitSum = sumDigitsOfPower(a, b);
+      if (curDigitSum > maxDigitsSum) {
+        maxDigitsSum = curDigitSum;
+      }
+    }
+  }
+  return maxDigitsSum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-57-square-root-convergents.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-57-square-root-convergents.md
new file mode 100644
index 00000000000..034974d882c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-57-square-root-convergents.md
@@ -0,0 +1,98 @@
+---
+id: 5900f3a51000cf542c50feb8
+title: 'Problem 57: Square root convergents'
+challengeType: 1
+forumTopicId: 302168
+dashedName: problem-57-square-root-convergents
+---
+
+# --description--
+
+It is possible to show that the square root of two can be expressed as an infinite continued fraction.
+
+<div style='text-align: center;'>$\sqrt 2 =1+ \frac 1 {2+ \frac 1 {2 +\frac 1 {2+ \dots}}}$</div>
+
+By expanding this for the first four iterations, we get:
+
+$1 + \\frac 1 2 = \\frac 32 = 1.5$
+
+$1 + \\frac 1 {2 + \\frac 1 2} = \\frac 7 5 = 1.4$
+
+$1 + \\frac 1 {2 + \\frac 1 {2+\\frac 1 2}} = \\frac {17}{12} = 1.41666 \\dots$
+
+$1 + \\frac 1 {2 + \\frac 1 {2+\\frac 1 {2+\\frac 1 2}}} = \\frac {41}{29} = 1.41379 \\dots$
+
+The next three expansions are $\\frac {99}{70}$, $\\frac {239}{169}$, and $\\frac {577}{408}$, but the eighth expansion, $\\frac {1393}{985}$, is the first example where the number of digits in the numerator exceeds the number of digits in the denominator.
+
+In the first `n` expansions, how many fractions contain a numerator with more digits than denominator?
+
+# --hints--
+
+`squareRootConvergents(10)` should return a number.
+
+```js
+assert(typeof squareRootConvergents(10) === 'number');
+```
+
+`squareRootConvergents(10)` should return 1.
+
+```js
+assert.strictEqual(squareRootConvergents(10), 1);
+```
+
+`squareRootConvergents(100)` should return 15.
+
+```js
+assert.strictEqual(squareRootConvergents(100), 15);
+```
+
+`squareRootConvergents(1000)` should return 153.
+
+```js
+assert.strictEqual(squareRootConvergents(1000), 153);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function squareRootConvergents(n) {
+
+  return true;
+}
+
+squareRootConvergents(1000);
+```
+
+# --solutions--
+
+```js
+function squareRootConvergents(n) {
+  function countDigits(number) {
+    let counter = 0;
+    while (number > 0) {
+      counter++;
+      number = number / 10n;
+    }
+    return counter;
+  }
+
+  // Use BigInt as integer won't handle all cases
+  let numerator = 3n;
+  let denominator = 2n;
+  let moreDigitsInNumerator = 0;
+
+  for (let i = 2; i <= n; i++) {
+    [numerator, denominator] = [
+      numerator + 2n * denominator,
+      denominator + numerator
+    ];
+
+    if (countDigits(numerator) > countDigits(denominator)) {
+      moreDigitsInNumerator++;
+    }
+  }
+  return moreDigitsInNumerator;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-58-spiral-primes.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-58-spiral-primes.md
new file mode 100644
index 00000000000..70b80ebf2a1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-58-spiral-primes.md
@@ -0,0 +1,105 @@
+---
+id: 5900f3a61000cf542c50feb9
+title: 'Problem 58: Spiral primes'
+challengeType: 1
+forumTopicId: 302169
+dashedName: problem-58-spiral-primes
+---
+
+# --description--
+
+Starting with 1 and spiralling anticlockwise in the following way, a square spiral with side length 7 is formed.
+
+<div style='text-align: center;'>
+  <strong><span style='color: red;'>37</span></strong> 36 35 34 33 32 <strong><span style='color: red;'>31</span></strong><br>
+  38 <strong><span style='color: red;'>17</span></strong> 16 15 14 <strong><span style='color: red;'>13</span></strong> 30<br>
+  39 18  <strong><span style='color: red;'>5</span></strong>  4  <strong><span style='color: red;'>3</span></strong> 12 29<br>
+  40 19  6  1  2 11 28<br>
+  41 20  <strong><span style='color: red;'>7</span></strong>  8  9 10 27<br>
+  42 21 22 23 24 25 26<br>
+  <strong><span style='color: red;'>43</span></strong> 44 45 46 47 48 49<br>
+</div>
+
+It is interesting to note that the odd squares lie along the bottom right diagonal, but what is more interesting is that 8 out of the 13 numbers lying along both diagonals are prime; that is, a ratio of 8/13 ≈ 62%.
+
+If one complete new layer is wrapped around the spiral above, a square spiral with side length 9 will be formed. If this process is continued, what is the side length of the square spiral for which the percent of primes along both diagonals first falls below `percent`?
+
+# --hints--
+
+`spiralPrimes(50)` should return a number.
+
+```js
+assert(typeof spiralPrimes(50) === 'number');
+```
+
+`spiralPrimes(50)` should return `11`.
+
+```js
+assert.strictEqual(spiralPrimes(50), 11);
+```
+
+`spiralPrimes(15)` should return `981`.
+
+```js
+assert.strictEqual(spiralPrimes(15), 981);
+```
+
+`spiralPrimes(10)` should return `26241`.
+
+```js
+assert.strictEqual(spiralPrimes(10), 26241);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function spiralPrimes(percent) {
+
+  return true;
+}
+
+spiralPrimes(50);
+```
+
+# --solutions--
+
+```js
+function spiralPrimes(percent) {
+  function isPrime(n) {
+    if (n <= 3) {
+      return n > 1;
+    } else if (n % 2 === 0 || n % 3 === 0) {
+      return false;
+    }
+
+    for (let i = 5; i * i <= n; i += 6) {
+      if (n % i === 0 || n % (i + 2) === 0) {
+        return false;
+      }
+    }
+    return true;
+  }
+
+  let totalCount = 1;
+  let primesCount = 0;
+  let curNumber = 1;
+  let curSideLength = 1;
+  let ratio = 1;
+  const wantedRatio = percent / 100;
+
+  while (ratio >= wantedRatio) {
+    curSideLength += 2;
+    for (let i = 0; i < 4; i++) {
+      curNumber += curSideLength - 1;
+      totalCount++;
+      if (i !== 3 && isPrime(curNumber)) {
+        primesCount++;
+      }
+    }
+    ratio = primesCount / totalCount;
+  }
+  return curSideLength;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-59-xor-decryption.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-59-xor-decryption.md
new file mode 100644
index 00000000000..0784e292908
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-59-xor-decryption.md
@@ -0,0 +1,58 @@
+---
+id: 5900f3a81000cf542c50feba
+title: 'Problem 59: XOR decryption'
+challengeType: 1
+forumTopicId: 302170
+dashedName: problem-59-xor-decryption
+---
+
+# --description--
+
+Each character on a computer is assigned a unique code and the preferred standard is ASCII (American Standard Code for Information Interchange). For example, uppercase A = 65, asterisk (\*) = 42, and lowercase k = 107.
+
+A modern encryption method is to take a text file, convert the bytes to ASCII, then XOR each byte with a given value, taken from a secret key. The advantage with the XOR function is that using the same encryption key on the cipher text, restores the plain text; for example, 65 XOR 42 = 107, then 107 XOR 42 = 65.
+
+For unbreakable encryption, the key is the same length as the plain text message, and the key is made up of random bytes. The user would keep the encrypted message and the encryption key in different locations, and without both "halves", it is impossible to decrypt the message.
+
+Unfortunately, this method is impractical for most users, so the modified method is to use a password as a key. If the password is shorter than the message, which is likely, the key is repeated cyclically throughout the message. The balance for this method is using a sufficiently long password key for security, but short enough to be memorable.
+
+Your task has been made easy, as the encryption key consists of three lower case characters. Using `cipher`, an array containing the encrypted ASCII codes, and the knowledge that the plain text must contain common English words, decrypt the message and find the sum of the ASCII values in the original text.
+
+# --hints--
+
+`XORDecryption(cipher)` should return a number.
+
+```js
+assert(typeof XORDecryption(cipher) === 'number');
+```
+
+`XORDecryption(cipher)` should return 129448.
+
+```js
+assert.strictEqual(XORDecryption(cipher), 129448);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function XORDecryption(arr) {
+
+  return true;
+}
+
+// Only change code above this line
+
+const cipher = [
+  36,22,80,0,0,4,23,25,19,17,88,4,4,19,21,11,88,22,23,23,29,69,12,24,0,88,25,11,12,2,10,28,5,6,12,25,10,22,80,10,30,80,10,22,21,69,23,22,69,61,5,9,29,2,66,11,80,8,23,3,17,88,19,0,20,21,7,10,17,17,29,20,69,8,17,21,29,2,22,84,80,71,60,21,69,11,5,8,21,25,22,88,3,0,10,25,0,10,5,8,88,2,0,27,25,21,10,31,6,25,2,16,21,82,69,35,63,11,88,4,13,29,80,22,13,29,22,88,31,3,88,3,0,10,25,0,11,80,10,30,80,23,29,19,12,8,2,10,27,17,9,11,45,95,88,57,69,16,17,19,29,80,23,29,19,0,22,4,9,1,80,3,23,5,11,28,92,69,9,5,12,12,21,69,13,30,0,0,0,0,27,4,0,28,28,28,84,80,4,22,80,0,20,21,2,25,30,17,88,21,29,8,2,0,11,3,12,23,30,69,30,31,23,88,4,13,29,80,0,22,4,12,10,21,69,11,5,8,88,31,3,88,4,13,17,3,69,11,21,23,17,21,22,88,65,69,83,80,84,87,68,69,83,80,84,87,73,69,83,80,84,87,65,83,88,91,69,29,4,6,86,92,69,15,24,12,27,24,69,28,21,21,29,30,1,11,80,10,22,80,17,16,21,69,9,5,4,28,2,4,12,5,23,29,80,10,30,80,17,16,21,69,27,25,23,27,28,0,84,80,22,23,80,17,16,17,17,88,25,3,88,4,13,29,80,17,10,5,0,88,3,16,21,80,10,30,80,17,16,25,22,88,3,0,10,25,0,11,80,12,11,80,10,26,4,4,17,30,0,28,92,69,30,2,10,21,80,12,12,80,4,12,80,10,22,19,0,88,4,13,29,80,20,13,17,1,10,17,17,13,2,0,88,31,3,88,4,13,29,80,6,17,2,6,20,21,69,30,31,9,20,31,18,11,94,69,54,17,8,29,28,28,84,80,44,88,24,4,14,21,69,30,31,16,22,20,69,12,24,4,12,80,17,16,21,69,11,5,8,88,31,3,88,4,13,17,3,69,11,21,23,17,21,22,88,25,22,88,17,69,11,25,29,12,24,69,8,17,23,12,80,10,30,80,17,16,21,69,11,1,16,25,2,0,88,31,3,88,4,13,29,80,21,29,2,12,21,21,17,29,2,69,23,22,69,12,24,0,88,19,12,10,19,9,29,80,18,16,31,22,29,80,1,17,17,8,29,4,0,10,80,12,11,80,84,67,80,10,10,80,7,1,80,21,13,4,17,17,30,2,88,4,13,29,80,22,13,29,69,23,22,69,12,24,12,11,80,22,29,2,12,29,3,69,29,1,16,25,28,69,12,31,69,11,92,69,17,4,69,16,17,22,88,4,13,29,80,23,25,4,12,23,80,22,9,2,17,80,70,76,88,29,16,20,4,12,8,28,12,29,20,69,26,9,69,11,80,17,23,80,84,88,31,3,88,4,13,29,80,21,29,2,12,21,21,17,29,2,69,12,31,69,12,24,0,88,20,12,25,29,0,12,21,23,86,80,44,88,7,12,20,28,69,11,31,10,22,80,22,16,31,18,88,4,13,25,4,69,12,24,0,88,3,16,21,80,10,30,80,17,16,25,22,88,3,0,10,25,0,11,80,17,23,80,7,29,80,4,8,0,23,23,8,12,21,17,17,29,28,28,88,65,75,78,68,81,65,67,81,72,70,83,64,68,87,74,70,81,75,70,81,67,80,4,22,20,69,30,2,10,21,80,8,13,28,17,17,0,9,1,25,11,31,80,17,16,25,22,88,30,16,21,18,0,10,80,7,1,80,22,17,8,73,88,17,11,28,80,17,16,21,11,88,4,4,19,25,11,31,80,17,16,21,69,11,1,16,25,2,0,88,2,10,23,4,73,88,4,13,29,80,11,13,29,7,29,2,69,75,94,84,76,65,80,65,66,83,77,67,80,64,73,82,65,67,87,75,72,69,17,3,69,17,30,1,29,21,1,88,0,23,23,20,16,27,21,1,84,80,18,16,25,6,16,80,0,0,0,23,29,3,22,29,3,69,12,24,0,88,0,0,10,25,8,29,4,0,10,80,10,30,80,4,88,19,12,10,19,9,29,80,18,16,31,22,29,80,1,17,17,8,29,4,0,10,80,12,11,80,84,86,80,35,23,28,9,23,7,12,22,23,69,25,23,4,17,30,69,12,24,0,88,3,4,21,21,69,11,4,0,8,3,69,26,9,69,15,24,12,27,24,69,49,80,13,25,20,69,25,2,23,17,6,0,28,80,4,12,80,17,16,25,22,88,3,16,21,92,69,49,80,13,25,6,0,88,20,12,11,19,10,14,21,23,29,20,69,12,24,4,12,80,17,16,21,69,11,5,8,88,31,3,88,4,13,29,80,22,29,2,12,29,3,69,73,80,78,88,65,74,73,70,69,83,80,84,87,72,84,88,91,69,73,95,87,77,70,69,83,80,84,87,70,87,77,80,78,88,21,17,27,94,69,25,28,22,23,80,1,29,0,0,22,20,22,88,31,11,88,4,13,29,80,20,13,17,1,10,17,17,13,2,0,88,31,3,88,4,13,29,80,6,17,2,6,20,21,75,88,62,4,21,21,9,1,92,69,12,24,0,88,3,16,21,80,10,30,80,17,16,25,22,88,29,16,20,4,12,8,28,12,29,20,69,26,9,69,65,64,69,31,25,19,29,3,69,12,24,0,88,18,12,9,5,4,28,2,4,12,21,69,80,22,10,13,2,17,16,80,21,23,7,0,10,89,69,23,22,69,12,24,0,88,19,12,10,19,16,21,22,0,10,21,11,27,21,69,23,22,69,12,24,0,88,0,0,10,25,8,29,4,0,10,80,10,30,80,4,88,19,12,10,19,9,29,80,18,16,31,22,29,80,1,17,17,8,29,4,0,10,80,12,11,80,84,86,80,36,22,20,69,26,9,69,11,25,8,17,28,4,10,80,23,29,17,22,23,30,12,22,23,69,49,80,13,25,6,0,88,28,12,19,21,18,17,3,0,88,18,0,29,30,69,25,18,9,29,80,17,23,80,1,29,4,0,10,29,12,22,21,69,12,24,0,88,3,16,21,3,69,23,22,69,12,24,0,88,3,16,26,3,0,9,5,0,22,4,69,11,21,23,17,21,22,88,25,11,88,7,13,17,19,13,88,4,13,29,80,0,0,0,10,22,21,11,12,3,69,25,2,0,88,21,19,29,30,69,22,5,8,26,21,23,11,94
+];
+
+XORDecryption(cipher);
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-6-sum-square-difference.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-6-sum-square-difference.md
new file mode 100644
index 00000000000..65a460bd803
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-6-sum-square-difference.md
@@ -0,0 +1,78 @@
+---
+id: 5900f3721000cf542c50fe85
+title: 'Problem 6: Sum square difference'
+challengeType: 1
+forumTopicId: 302171
+dashedName: problem-6-sum-square-difference
+---
+
+# --description--
+
+The sum of the squares of the first ten natural numbers is,
+
+<div style='text-align: center;'>1<sup>2</sup> + 2<sup>2</sup> + ... + 10<sup>2</sup> = 385</div>
+
+The square of the sum of the first ten natural numbers is,
+
+<div style='text-align: center;'>(1 + 2 + ... + 10)<sup>2</sup> = 55<sup>2</sup> = 3025</div>
+
+Hence the difference between the sum of the squares of the first ten natural numbers and the square of the sum is 3025 − 385 = 2640.
+
+Find the difference between the sum of the squares of the first `n` natural numbers and the square of the sum.
+
+# --hints--
+
+`sumSquareDifference(10)` should return a number.
+
+```js
+assert(typeof sumSquareDifference(10) === 'number');
+```
+
+`sumSquareDifference(10)` should return 2640.
+
+```js
+assert.strictEqual(sumSquareDifference(10), 2640);
+```
+
+`sumSquareDifference(20)` should return 41230.
+
+```js
+assert.strictEqual(sumSquareDifference(20), 41230);
+```
+
+`sumSquareDifference(100)` should return 25164150.
+
+```js
+assert.strictEqual(sumSquareDifference(100), 25164150);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumSquareDifference(n) {
+
+  return true;
+}
+
+sumSquareDifference(100);
+```
+
+# --solutions--
+
+```js
+const sumSquareDifference = (number)=>{
+  let squareOfSum = Math.pow(sumOfArithmeticSeries(1,1,number),2);
+  let sumOfSquare = sumOfSquareOfNumbers(number);
+ return squareOfSum - sumOfSquare;
+}
+
+function sumOfArithmeticSeries(a,d,n){
+  return (n/2)*(2*a+(n-1)*d);
+}
+
+function sumOfSquareOfNumbers(n){
+ return (n*(n+1)*(2*n+1))/6;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-60-prime-pair-sets.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-60-prime-pair-sets.md
new file mode 100644
index 00000000000..dc4a88c2cfb
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-60-prime-pair-sets.md
@@ -0,0 +1,46 @@
+---
+id: 5900f3a81000cf542c50febb
+title: 'Problem 60: Prime pair sets'
+challengeType: 1
+forumTopicId: 302172
+dashedName: problem-60-prime-pair-sets
+---
+
+# --description--
+
+The primes 3, 7, 109, and 673, are quite remarkable. By taking any two primes and concatenating them in any order the result will always be prime. For example, taking 7 and 109, both 7109 and 1097 are prime. The sum of these four primes, 792, represents the lowest sum for a set of four primes with this property.
+
+Find the lowest sum for a set of five primes for which any two primes concatenate to produce another prime.
+
+# --hints--
+
+`primePairSets()` should return a number.
+
+```js
+assert(typeof primePairSets() === 'number');
+```
+
+`primePairSets()` should return 26033.
+
+```js
+assert.strictEqual(primePairSets(), 26033);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primePairSets() {
+
+  return true;
+}
+
+primePairSets();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-61-cyclical-figurate-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-61-cyclical-figurate-numbers.md
new file mode 100644
index 00000000000..99fee7255e8
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-61-cyclical-figurate-numbers.md
@@ -0,0 +1,252 @@
+---
+id: 5900f3a91000cf542c50febc
+title: 'Problem 61: Cyclical figurate numbers'
+challengeType: 1
+forumTopicId: 302173
+dashedName: problem-61-cyclical-figurate-numbers
+---
+
+# --description--
+
+Triangle, square, pentagonal, hexagonal, heptagonal, and octagonal numbers are all figurate (polygonal) numbers and are generated by the following formulae:
+
+| Type of Number | Formula                       | Sequence              |
+| -------------- | ----------------------------- | --------------------- |
+| Triangle       | $P_3(n) = \frac{n(n+1)}{2}$  | 1, 3, 6, 10, 15, ...  |
+| Square         | $P_4(n) = n^2$                | 1, 4, 9, 16, 25, ...  |
+| Pentagonal     | $P_5(n) = \frac{n(3n−1)}2$   | 1, 5, 12, 22, 35, ... |
+| Hexagonal      | $P_6(n) = n(2n−1)$            | 1, 6, 15, 28, 45, ... |
+| Heptagonal     | $P_7(n) = \frac{n(5n−3)}{2}$ | 1, 7, 18, 34, 55, ... |
+| Octagonal      | $P_8(n) = n(3n−2)$            | 1, 8, 21, 40, 65, ... |
+
+The ordered set of three 4-digit numbers: 8128, 2882, 8281, has three interesting properties.
+
+1. The set is cyclic, in that the last two digits of each number is the first two digits of the next number (including the last number with the first).
+2. Each polygonal type: triangle ($P_3(127) = 8128$), square ($P_4(91) = 8281$), and pentagonal ($P_5(44) = 2882$), is represented by a different number in the set.
+3. This is the only set of 4-digit numbers with this property.
+
+Find the sum of all numbers in ordered sets of `n` cyclic 4-digit numbers for which each of the $P_3$ to $P_{n + 2}$ polygonal types, is represented by a different number in the set.
+
+# --hints--
+
+`cyclicalFigurateNums(3)` should return a number.
+
+```js
+assert(typeof cyclicalFigurateNums(3) === 'number');
+```
+
+`cyclicalFigurateNums(3)` should return `19291`.
+
+```js
+assert.strictEqual(cyclicalFigurateNums(3), 19291);
+```
+
+`cyclicalFigurateNums(4)` should return `28684`.
+
+```js
+assert.strictEqual(cyclicalFigurateNums(4), 28684);
+```
+
+`cyclicalFigurateNums(5)` should return `76255`.
+
+```js
+assert.strictEqual(cyclicalFigurateNums(5), 76255);
+```
+
+`cyclicalFigurateNums(6)` should return `28684`.
+
+```js
+assert.strictEqual(cyclicalFigurateNums(6), 28684);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cyclicalFigurateNums(n) {
+
+  return true;
+}
+
+cyclicalFigurateNums(3);
+```
+
+# --solutions--
+
+```js
+function cyclicalFigurateNums(n) {
+  function getChains(chain, n, numberTypes, numsExcludingLastNeededType) {
+    if (chain.length === n) {
+      return [chain];
+    }
+
+    const nextNumbers = getNextNumbersInChain(
+      chain[chain.length - 1],
+      numsExcludingLastNeededType
+    );
+
+    const chains = [];
+    for (let j = 0; j < nextNumbers.length; j++) {
+      const nextNumber = nextNumbers[j];
+      if (chain.indexOf(nextNumber) === -1) {
+        const nextChain = [...chain, nextNumber];
+        chains.push(
+          ...getChains(nextChain, n, numberTypes, numsExcludingLastNeededType)
+        );
+      }
+    }
+    return chains;
+  }
+
+  function getNextNumbersInChain(num, numsExcludingLastNeededType) {
+    const results = [];
+    const beginning = num % 100;
+    numsExcludingLastNeededType.forEach(number => {
+      if (Math.floor(number / 100) === beginning) {
+        results.push(number);
+      }
+    });
+    return results;
+  }
+
+  function fillNumberTypes(n, numberTypes, numsExcludingLastNeededType) {
+    const [, lastTypeCheck, lastTypeArr] = numberTypes[n - 1];
+
+    for (let i = 1000; i <= 9999; i++) {
+      for (let j = 0; j < n - 1; j++) {
+        const [, typeCheck, typeArr] = numberTypes[j];
+        if (typeCheck(i)) {
+          typeArr.push(i);
+          numsExcludingLastNeededType.add(i);
+        }
+      }
+
+      if (lastTypeCheck(i)) {
+        lastTypeArr.push(i);
+      }
+    }
+  }
+
+  function isCyclicalChain(chain, n, numberTypes) {
+    const numberTypesInChain = getNumberTypesInChain(chain, numberTypes);
+
+    if (!isChainAllowed(numberTypesInChain, n)) {
+      return false;
+    }
+
+    const isChainCyclic =
+      Math.floor(chain[0] / 100) === chain[chain.length - 1] % 100;
+    return isChainCyclic;
+  }
+
+  function getNumberTypesInChain(chain, numberTypes) {
+    const numbersInChain = {};
+    for (let i = 0; i < numberTypes.length; i++) {
+      const numberTypeName = numberTypes[i][0];
+      numbersInChain[numberTypeName] = [];
+    }
+
+    for (let i = 0; i < chain.length; i++) {
+      for (let j = 0; j < n; j++) {
+        const [typeName, , typeNumbers] = numberTypes[j];
+        const typeNumbersInChain = numbersInChain[typeName];
+        if (typeNumbers.indexOf(chain[i]) !== -1) {
+          typeNumbersInChain.push(chain[i]);
+        }
+      }
+    }
+    return numbersInChain;
+  }
+
+  function isChainAllowed(numberTypesInChain, n) {
+    for (let i = 0; i < n; i++) {
+      const typeName = numberTypes[i][0];
+      const isNumberWithTypeInChain = numberTypesInChain[typeName].length > 0;
+      if (!isNumberWithTypeInChain) {
+        return false;
+      }
+
+      for (let j = i + 1; j < n; j++) {
+        const otherTypeName = numberTypes[j][0];
+        if (
+          isNumberRepeatedAsOnlyNumberInTwoTypes(
+            numberTypesInChain[typeName],
+            numberTypesInChain[otherTypeName]
+          )
+        ) {
+          return false;
+        }
+      }
+    }
+    return true;
+  }
+
+  function isNumberRepeatedAsOnlyNumberInTwoTypes(
+    typeNumbers,
+    otherTypeNumbers
+  ) {
+    return (
+      typeNumbers.length === 1 &&
+      otherTypeNumbers.length === 1 &&
+      typeNumbers[0] === otherTypeNumbers[0]
+    );
+  }
+
+  function isTriangle(num) {
+    return ((8 * num + 1) ** 0.5 - 1) % 2 === 0;
+  }
+
+  function isSquare(num) {
+    return num ** 0.5 === parseInt(num ** 0.5, 10);
+  }
+
+  function isPentagonal(num) {
+    return ((24 * num + 1) ** 0.5 + 1) % 6 === 0;
+  }
+
+  function isHexagonal(num) {
+    return ((8 * num + 1) ** 0.5 + 1) % 4 === 0;
+  }
+
+  function isHeptagonal(num) {
+    return ((40 * num + 9) ** 0.5 + 3) % 10 === 0;
+  }
+
+  function isOctagonal(num) {
+    return ((3 * num + 1) ** 0.5 + 1) % 3 === 0;
+  }
+
+  const numberTypes = [
+    ['triangle', isTriangle, []],
+    ['square', isSquare, []],
+    ['pentagonal', isPentagonal, []],
+    ['hexagonal', isHexagonal, []],
+    ['heptagonal', isHeptagonal, []],
+    ['octagonal', isOctagonal, []]
+  ];
+  const numsExcludingLastNeededType = new Set();
+  fillNumberTypes(n, numberTypes, numsExcludingLastNeededType);
+
+  const nNumberChains = [];
+  const [, , lastType] = numberTypes[n - 1];
+  for (let i = 0; i < lastType.length; i++) {
+    const startOfChain = lastType[i];
+    nNumberChains.push(
+      ...getChains([startOfChain], n, numberTypes, numsExcludingLastNeededType)
+    );
+  }
+
+  const cyclicalChains = nNumberChains.filter(chain =>
+    isCyclicalChain(chain, n, numberTypes)
+  );
+
+  let sum = 0;
+  for (let i = 0; i < cyclicalChains.length; i++) {
+    for (let j = 0; j < cyclicalChains[0].length; j++) {
+      sum += cyclicalChains[i][j];
+    }
+  }
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-62-cubic-permutations.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-62-cubic-permutations.md
new file mode 100644
index 00000000000..a89d136f83c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-62-cubic-permutations.md
@@ -0,0 +1,97 @@
+---
+id: 5900f3aa1000cf542c50febd
+title: 'Problem 62: Cubic permutations'
+challengeType: 1
+forumTopicId: 302174
+dashedName: problem-62-cubic-permutations
+---
+
+# --description--
+
+The cube, 41063625 ($345^3$), can be permuted to produce two other cubes: 56623104 ($384^3$) and 66430125 ($405^3$). In fact, 41063625 is the smallest cube which has exactly three permutations of its digits which are also cube.
+
+Find the smallest cube for which exactly `n` permutations of its digits are cube.
+
+# --hints--
+
+`cubicPermutations(2)` should return a number.
+
+```js
+assert(typeof cubicPermutations(2) === 'number');
+```
+
+`cubicPermutations(2)` should return `125`.
+
+```js
+assert.strictEqual(cubicPermutations(2), 125);
+```
+
+`cubicPermutations(3)` should return `41063625`.
+
+```js
+assert.strictEqual(cubicPermutations(3), 41063625);
+```
+
+`cubicPermutations(4)` should return `1006012008`.
+
+```js
+assert.strictEqual(cubicPermutations(4), 1006012008);
+```
+
+`cubicPermutations(5)` should return `127035954683`.
+
+```js
+assert.strictEqual(cubicPermutations(5), 127035954683);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cubicPermutations(n) {
+
+  return true;
+}
+
+cubicPermutations(2);
+```
+
+# --solutions--
+
+```js
+function cubicPermutations(n) {
+  function getDigits(num) {
+    const digits = [];
+    while (num > 0) {
+      digits.push(num % 10);
+      num = Math.floor(num / 10);
+    }
+    return digits;
+  }
+
+  function getCube(num) {
+    return num ** 3;
+  }
+
+  const digitsToCubeCounts = {};
+  let curNum = 1;
+  let digits;
+
+  while (!digitsToCubeCounts[digits] || digitsToCubeCounts[digits].count < n) {
+    const cube = getCube(curNum);
+    digits = getDigits(cube).sort().join();
+    if (!digitsToCubeCounts[digits]) {
+      digitsToCubeCounts[digits] = {
+        count: 1,
+        smallestCube: cube
+      };
+    } else {
+      digitsToCubeCounts[digits].count += 1;
+    }
+
+    curNum++;
+  }
+  return digitsToCubeCounts[digits].smallestCube;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-63-powerful-digit-counts.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-63-powerful-digit-counts.md
new file mode 100644
index 00000000000..2c8b0bb8cd6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-63-powerful-digit-counts.md
@@ -0,0 +1,122 @@
+---
+id: 5900f3ab1000cf542c50febe
+title: 'Problem 63: Powerful digit counts'
+challengeType: 1
+forumTopicId: 302175
+dashedName: problem-63-powerful-digit-counts
+---
+
+# --description--
+
+The 5-digit number, 16807 = 7<sup>5</sup>, is also a fifth power. Similarly, the 9-digit number, 134217728 = 8<sup>9</sup>, is a ninth power.
+
+Complete the function so that it returns how many positive integers are of length `n` and an `n`th power.
+
+# --hints--
+
+`powerfulDigitCounts(1)` should return a number.
+
+```js
+assert(typeof powerfulDigitCounts(1) === 'number');
+```
+
+`powerfulDigitCounts(1)` should return `9`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(1), 9);
+```
+
+`powerfulDigitCounts(2)` should return `6`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(2), 6);
+```
+
+`powerfulDigitCounts(3)` should return `5`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(3), 5);
+```
+
+`powerfulDigitCounts(4)` should return `4`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(4), 4);
+```
+
+`powerfulDigitCounts(5)` should return `3`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(5), 3);
+```
+
+`powerfulDigitCounts(6)` should return `3`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(6), 3);
+```
+
+`powerfulDigitCounts(7)` should return `2`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(7), 2);
+```
+
+`powerfulDigitCounts(8)` should return `2`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(8), 2);
+```
+
+`powerfulDigitCounts(10)` should return `2`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(10), 2);
+```
+
+`powerfulDigitCounts(21)` should return `1`.
+
+```js
+assert.strictEqual(powerfulDigitCounts(21), 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function powerfulDigitCounts(n) {
+
+  return true;
+}
+
+powerfulDigitCounts(1);
+```
+
+# --solutions--
+
+```js
+function powerfulDigitCounts(n) {
+  function countDigits(num) {
+    let counter = 0;
+    while (num > 0) {
+      num = Math.floor(num / 10);
+      counter++;
+    }
+    return counter;
+  }
+
+  let numbersCount = 0;
+
+  let curNum = 1;
+  while (curNum < 10) {
+    let power = n;
+    if (power === countDigits(curNum ** power)) {
+      numbersCount++;
+    }
+    curNum++;
+  }
+
+  return numbersCount;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-64-odd-period-square-roots.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-64-odd-period-square-roots.md
new file mode 100644
index 00000000000..a6acdfc610e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-64-odd-period-square-roots.md
@@ -0,0 +1,148 @@
+---
+id: 5900f3ac1000cf542c50febf
+title: 'Problem 64: Odd period square roots'
+challengeType: 1
+forumTopicId: 302176
+dashedName: problem-64-odd-period-square-roots
+---
+
+# --description--
+
+All square roots are periodic when written as continued fractions and can be written in the form:
+
+$\\displaystyle \\quad \\quad \\sqrt{N}=a_0+\\frac 1 {a_1+\\frac 1 {a_2+ \\frac 1 {a3+ \\dots}}}$
+
+For example, let us consider $\\sqrt{23}$:
+
+$\\quad \\quad \\sqrt{23}=4+\\sqrt{23}-4=4+\\frac 1 {\\frac 1 {\\sqrt{23}-4}}=4+\\frac 1 {1+\\frac{\\sqrt{23}-3}7}$
+
+If we continue we would get the following expansion:
+
+$\\displaystyle \\quad \\quad \\sqrt{23}=4+\\frac 1 {1+\\frac 1 {3+ \\frac 1 {1+\\frac 1 {8+ \\dots}}}}$
+
+The process can be summarized as follows:
+
+$\\quad \\quad a_0=4, \\frac 1 {\\sqrt{23}-4}=\\frac {\\sqrt{23}+4} 7=1+\\frac {\\sqrt{23}-3} 7$
+
+$\\quad \\quad a_1=1, \\frac 7 {\\sqrt{23}-3}=\\frac {7(\\sqrt{23}+3)} {14}=3+\\frac {\\sqrt{23}-3} 2$
+
+$\\quad \\quad a_2=3, \\frac 2 {\\sqrt{23}-3}=\\frac {2(\\sqrt{23}+3)} {14}=1+\\frac {\\sqrt{23}-4} 7$
+
+$\\quad \\quad a_3=1, \\frac 7 {\\sqrt{23}-4}=\\frac {7(\\sqrt{23}+4)} 7=8+\\sqrt{23}-4$
+
+$\\quad \\quad a_4=8, \\frac 1 {\\sqrt{23}-4}=\\frac {\\sqrt{23}+4} 7=1+\\frac {\\sqrt{23}-3} 7$
+
+$\\quad \\quad a_5=1, \\frac 7 {\\sqrt{23}-3}=\\frac {7 (\\sqrt{23}+3)} {14}=3+\\frac {\\sqrt{23}-3} 2$
+
+$\\quad \\quad a_6=3, \\frac 2 {\\sqrt{23}-3}=\\frac {2(\\sqrt{23}+3)} {14}=1+\\frac {\\sqrt{23}-4} 7$
+
+$\\quad \\quad a_7=1, \\frac 7 {\\sqrt{23}-4}=\\frac {7(\\sqrt{23}+4)} {7}=8+\\sqrt{23}-4$
+
+It can be seen that the sequence is repeating. For conciseness, we use the notation $\\sqrt{23}=\[4;(1,3,1,8)]$, to indicate that the block (1,3,1,8) repeats indefinitely.
+
+The first ten continued fraction representations of (irrational) square roots are:
+
+$\\quad \\quad \\sqrt{2}=\[1;(2)]$, period = 1
+
+$\\quad \\quad \\sqrt{3}=\[1;(1,2)]$, period = 2
+
+$\\quad \\quad \\sqrt{5}=\[2;(4)]$, period = 1
+
+$\\quad \\quad \\sqrt{6}=\[2;(2,4)]$, period = 2
+
+$\\quad \\quad \\sqrt{7}=\[2;(1,1,1,4)]$, period = 4
+
+$\\quad \\quad \\sqrt{8}=\[2;(1,4)]$, period = 2
+
+$\\quad \\quad \\sqrt{10}=\[3;(6)]$, period = 1
+
+$\\quad \\quad \\sqrt{11}=\[3;(3,6)]$, period = 2
+
+$\\quad \\quad \\sqrt{12}=\[3;(2,6)]$, period = 2
+
+$\\quad \\quad \\sqrt{13}=\[3;(1,1,1,1,6)]$, period = 5
+
+Exactly four continued fractions, for $N \\le 13$, have an odd period.
+
+How many continued fractions for $N \\le n$ have an odd period?
+
+# --hints--
+
+`oddPeriodSqrts(13)` should return a number.
+
+```js
+assert(typeof oddPeriodSqrts(13) === 'number');
+```
+
+`oddPeriodSqrts(500)` should return `83`.
+
+```js
+assert.strictEqual(oddPeriodSqrts(500), 83);
+```
+
+`oddPeriodSqrts(1000)` should return `152`.
+
+```js
+assert.strictEqual(oddPeriodSqrts(1000), 152);
+```
+
+`oddPeriodSqrts(5000)` should return `690`.
+
+```js
+assert.strictEqual(oddPeriodSqrts(5000), 690);
+```
+
+`oddPeriodSqrts(10000)` should return `1322`.
+
+```js
+assert.strictEqual(oddPeriodSqrts(10000), 1322);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function oddPeriodSqrts(n) {
+
+  return true;
+}
+
+oddPeriodSqrts(13);
+```
+
+# --solutions--
+
+```js
+function oddPeriodSqrts(n) {
+  // Based on https://www.mathblog.dk/project-euler-continued-fractions-odd-period/
+  function getPeriod(num) {
+    let period = 0;
+    let m = 0;
+    let d = 1;
+    let a = Math.floor(Math.sqrt(num));
+    const a0 = a;
+    while (2 * a0 !== a) {
+      m = d * a - m;
+      d = Math.floor((num - m ** 2) / d);
+      a = Math.floor((Math.sqrt(num) + m) / d);
+      period++;
+    }
+    return period;
+  }
+
+  function isPerfectSquare(num) {
+    return Number.isInteger(Math.sqrt(num));
+  }
+
+  let counter = 0;
+  for (let i = 2; i <= n; i++) {
+    if (!isPerfectSquare(i)) {
+      if (getPeriod(i) % 2 !== 0) {
+        counter++;
+      }
+    }
+  }
+  return counter;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-65-convergents-of-e.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-65-convergents-of-e.md
new file mode 100644
index 00000000000..9aa62302442
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-65-convergents-of-e.md
@@ -0,0 +1,117 @@
+---
+id: 5900f3ad1000cf542c50fec0
+title: 'Problem 65: Convergents of e'
+challengeType: 1
+forumTopicId: 302177
+dashedName: problem-65-convergents-of-e
+---
+
+# --description--
+
+The square root of 2 can be written as an infinite continued fraction.
+
+$\\sqrt{2} = 1 + \\dfrac{1}{2 + \\dfrac{1}{2 + \\dfrac{1}{2 + \\dfrac{1}{2 + ...}}}}$
+
+The infinite continued fraction can be written, $\\sqrt{2} = \[1; (2)]$ indicates that 2 repeats *ad infinitum*. In a similar way, $\\sqrt{23} = \[4; (1, 3, 1, 8)]$. It turns out that the sequence of partial values of continued fractions for square roots provide the best rational approximations. Let us consider the convergents for $\\sqrt{2}$.
+
+$1 + \\dfrac{1}{2} = \\dfrac{3}{2}\\\\ 1 + \\dfrac{1}{2 + \\dfrac{1}{2}} = \\dfrac{7}{5}\\\\ 1 + \\dfrac{1}{2 + \\dfrac{1}{2 + \\dfrac{1}{2}}} = \\dfrac{17}{12}\\\\ 1 + \\dfrac{1}{2 + \\dfrac{1}{2 + \\dfrac{1}{2 + \\dfrac{1}{2}}}} = \\dfrac{41}{29}$
+
+Hence the sequence of the first ten convergents for $\\sqrt{2}$ are:
+
+$1, \\dfrac{3}{2}, \\dfrac{7}{5}, \\dfrac{17}{12}, \\dfrac{41}{29}, \\dfrac{99}{70}, \\dfrac{239}{169}, \\dfrac{577}{408}, \\dfrac{1393}{985}, \\dfrac{3363}{2378}, ...$
+
+What is most surprising is that the important mathematical constant, $e = \[2; 1, 2, 1, 1, 4, 1, 1, 6, 1, ... , 1, 2k, 1, ...]$. The first ten terms in the sequence of convergents for `e` are:
+
+$2, 3, \\dfrac{8}{3}, \\dfrac{11}{4}, \\dfrac{19}{7}, \\dfrac{87}{32}, \\dfrac{106}{39}, \\dfrac{193}{71}, \\dfrac{1264}{465}, \\dfrac{1457}{536}, ...$
+
+The sum of digits in the numerator of the 10<sup>th</sup> convergent is $1 + 4 + 5 + 7 = 17$.
+
+Find the sum of digits in the numerator of the `n`<sup>th</sup> convergent of the continued fraction for `e`.
+
+# --hints--
+
+`convergentsOfE(10)` should return a number.
+
+```js
+assert(typeof convergentsOfE(10) === 'number');
+```
+
+`convergentsOfE(10)` should return `17`.
+
+```js
+assert.strictEqual(convergentsOfE(10), 17);
+```
+
+`convergentsOfE(30)` should return `53`.
+
+```js
+assert.strictEqual(convergentsOfE(30), 53);
+```
+
+`convergentsOfE(50)` should return `91`.
+
+```js
+assert.strictEqual(convergentsOfE(50), 91);
+```
+
+`convergentsOfE(70)` should return `169`.
+
+```js
+assert.strictEqual(convergentsOfE(70), 169);
+```
+
+`convergentsOfE(100)` should return `272`.
+
+```js
+assert.strictEqual(convergentsOfE(100), 272);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function convergentsOfE(n) {
+
+  return true;
+}
+
+convergentsOfE(10);
+```
+
+# --solutions--
+
+```js
+function convergentsOfE(n) {
+  function sumDigits(num) {
+    let sum = 0n;
+    while (num > 0) {
+      sum += num % 10n;
+      num = num / 10n;
+    }
+    return parseInt(sum);
+  }
+
+  // BigInt is needed for high convergents
+  let convergents = [
+    [2n, 1n],
+    [3n, 1n]
+  ];
+  const multipliers = [1n, 1n, 2n];
+  for (let i = 2; i < n; i++) {
+    const [secondLastConvergent, lastConvergent] = convergents;
+    const [secondLastNumerator, secondLastDenominator] = secondLastConvergent;
+    const [lastNumerator, lastDenominator] = lastConvergent;
+    const curMultiplier = multipliers[i % 3];
+
+    const numerator = secondLastNumerator + curMultiplier * lastNumerator;
+    const denominator = secondLastDenominator + curMultiplier * lastDenominator;
+
+    convergents = [lastConvergent, [numerator, denominator]]
+    if (i % 3 === 2) {
+      multipliers[2] += 2n;
+    }
+  }
+  return sumDigits(convergents[1][0]);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-66-diophantine-equation.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-66-diophantine-equation.md
new file mode 100644
index 00000000000..9e01ce1b0c5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-66-diophantine-equation.md
@@ -0,0 +1,129 @@
+---
+id: 5900f3ae1000cf542c50fec1
+title: 'Problem 66: Diophantine equation'
+challengeType: 1
+forumTopicId: 302178
+dashedName: problem-66-diophantine-equation
+---
+
+# --description--
+
+Consider quadratic Diophantine equations of the form:
+
+<div style='text-align: center;'>x<sup>2</sup> – Dy<sup>2</sup> = 1</div>
+
+For example, when D=13, the minimal solution in x is 649<sup>2</sup> – 13×180<sup>2</sup> = 1.
+
+It can be assumed that there are no solutions in positive integers when D is square.
+
+By finding minimal solutions in x for D = {2, 3, 5, 6, 7}, we obtain the following:
+
+<div style='margin-left: 2em;'>
+  3<sup>2</sup> – 2×2<sup>2</sup> = 1<br>
+  2<sup>2</sup> – 3×1<sup>2</sup> = 1<br>
+  <strong><span style='color: red;'>9</span></strong><sup>2</sup> – 5×4<sup>2</sup> = 1<br>
+  5<sup>2</sup> – 6×2<sup>2</sup> = 1<br>
+  8<sup>2</sup> – 7×3<sup>2</sup> = 1<br>
+</div>
+
+Hence, by considering minimal solutions in `x` for D ≤ 7, the largest `x` is obtained when D=5.
+
+Find the value of D ≤ `n` in minimal solutions of `x` for which the largest value of `x` is obtained.
+
+# --hints--
+
+`diophantineEquation(7)` should return a number.
+
+```js
+assert(typeof diophantineEquation(7) === 'number');
+```
+
+`diophantineEquation(7)` should return `5`.
+
+```js
+assert.strictEqual(diophantineEquation(7), 5);
+```
+
+`diophantineEquation(100)` should return `61`.
+
+```js
+assert.strictEqual(diophantineEquation(100), 61);
+```
+
+`diophantineEquation(409)` should return `409`.
+
+```js
+assert.strictEqual(diophantineEquation(409), 409);
+```
+
+`diophantineEquation(500)` should return `421`.
+
+```js
+assert.strictEqual(diophantineEquation(500), 421);
+```
+
+`diophantineEquation(1000)` should return `661`.
+
+```js
+assert.strictEqual(diophantineEquation(1000), 661);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function diophantineEquation(n) {
+
+  return true;
+}
+
+diophantineEquation(7);
+```
+
+# --solutions--
+
+```js
+function diophantineEquation(n) {
+  // Based on https://www.mathblog.dk/project-euler-66-diophantine-equation/
+  function isSolution(D, numerator, denominator) {
+    return numerator * numerator - BigInt(D) * denominator * denominator === 1n;
+  }
+
+  let result = 0;
+  let biggestX = 0;
+
+  for (let D = 2; D <= n; D++) {
+    let boundary = Math.floor(Math.sqrt(D));
+    if (boundary ** 2 === D) {
+      continue;
+    }
+
+    let m = 0n;
+    let d = 1n;
+    let a = BigInt(boundary);
+
+    let [numerator, prevNumerator] = [a, 1n];
+
+    let [denominator, prevDenominator] = [1n, 0n];
+
+    while (!isSolution(D, numerator, denominator)) {
+      m = d * a - m;
+      d = (BigInt(D) - m * m) / d;
+      a = (BigInt(boundary) + m) / d;
+
+      [numerator, prevNumerator] = [a * numerator + prevNumerator, numerator];
+      [denominator, prevDenominator] = [
+        a * denominator + prevDenominator,
+        denominator
+      ];
+    }
+
+    if (numerator > biggestX) {
+      biggestX = numerator;
+      result = D;
+    }
+  }
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-67-maximum-path-sum-ii.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-67-maximum-path-sum-ii.md
new file mode 100644
index 00000000000..c3aa2fb6e3b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-67-maximum-path-sum-ii.md
@@ -0,0 +1,96 @@
+---
+id: 5900f3b01000cf542c50fec2
+title: 'Problem 67: Maximum path sum II'
+challengeType: 1
+forumTopicId: 302179
+dashedName: problem-67-maximum-path-sum-ii
+---
+
+# --description--
+
+By starting at the top of the triangle below and moving to adjacent numbers on the row below, the maximum total from top to bottom is 23.
+
+<div style='text-align: center;'>
+  <strong style='color: red;'>3</strong><br>
+  <strong style='color: red;'>7</strong> 4<br>
+  2 <strong style='color: red;'>4</strong> 6<br>
+  8 5 <strong style='color: red;'>9</strong> 3
+</div>
+
+That is, 3 + 7 + 4 + 9 = 23.
+
+Find the maximum total from top to bottom in `numTriangle`, a 2D array defined in the background containing a triangle with one-hundred rows.
+
+**Note:** This is a much more difficult version of Problem 18. It is not possible to try every route to solve this problem, as there are 2<sup>99</sup> altogether! If you could check one trillion (10<sup>12</sup>) routes every second it would take over twenty billion years to check them all. There is an efficient algorithm to solve it. ;o)
+
+# --hints--
+
+`maximumPathSumII(testTriangle)` should return a number.
+
+```js
+assert(typeof maximumPathSumII(_testTriangle) === 'number');
+```
+
+`maximumPathSumII(testTriangle)` should return 23.
+
+```js
+assert.strictEqual(maximumPathSumII(_testTriangle), 23);
+```
+
+`maximumPathSumII(numTriangle)` should return 7273.
+
+```js
+assert.strictEqual(maximumPathSumII(_numTriangle), 7273);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+const _testTriangle = [[3, 0, 0, 0],
+                      [7, 4, 0, 0],
+                      [2, 4, 6, 0],
+                      [8, 5, 9, 3]];
+const _numTriangle = [[59,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[73,41,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[52,40,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[26,53,6,34,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[10,51,87,86,81,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[61,95,66,57,25,68,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[90,81,80,38,92,67,73,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[30,28,51,76,81,18,75,44,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[84,14,95,87,62,81,17,78,58,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[21,46,71,58,2,79,62,39,31,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[56,34,35,53,78,31,81,18,90,93,15,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[78,53,4,21,84,93,32,13,97,11,37,51,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[45,3,81,79,5,18,78,86,13,30,63,99,95,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[39,87,96,28,3,38,42,17,82,87,58,7,22,57,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[6,17,51,17,7,93,9,7,75,97,95,78,87,8,53,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[67,66,59,60,88,99,94,65,55,77,55,34,27,53,78,28,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[76,40,41,4,87,16,9,42,75,69,23,97,30,60,10,79,87,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[12,10,44,26,21,36,32,84,98,60,13,12,36,16,63,31,91,35,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[70,39,6,5,55,27,38,48,28,22,34,35,62,62,15,14,94,89,86,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[66,56,68,84,96,21,34,34,34,81,62,40,65,54,62,5,98,3,2,60,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[38,89,46,37,99,54,34,53,36,14,70,26,2,90,45,13,31,61,83,73,47,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[36,10,63,96,60,49,41,5,37,42,14,58,84,93,96,17,9,43,5,43,6,59,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[66,57,87,57,61,28,37,51,84,73,79,15,39,95,88,87,43,39,11,86,77,74,18,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[54,42,5,79,30,49,99,73,46,37,50,2,45,9,54,52,27,95,27,65,19,45,26,45,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[71,39,17,78,76,29,52,90,18,99,78,19,35,62,71,19,23,65,93,85,49,33,75,9,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[33,24,47,61,60,55,32,88,57,55,91,54,46,57,7,77,98,52,80,99,24,25,46,78,79,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[92,9,13,55,10,67,26,78,76,82,63,49,51,31,24,68,5,57,7,54,69,21,67,43,17,63,12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[24,59,6,8,98,74,66,26,61,60,13,3,9,9,24,30,71,8,88,70,72,70,29,90,11,82,41,34,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[66,82,67,4,36,60,92,77,91,85,62,49,59,61,30,90,29,94,26,41,89,4,53,22,83,41,9,74,90,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[48,28,26,37,28,52,77,26,51,32,18,98,79,36,62,13,17,8,19,54,89,29,73,68,42,14,8,16,70,37,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[37,60,69,70,72,71,9,59,13,60,38,13,57,36,9,30,43,89,30,39,15,2,44,73,5,73,26,63,56,86,12,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[55,55,85,50,62,99,84,77,28,85,3,21,27,22,19,26,82,69,54,4,13,7,85,14,1,15,70,59,89,95,10,19,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[4,9,31,92,91,38,92,86,98,75,21,5,64,42,62,84,36,20,73,42,21,23,22,51,51,79,25,45,85,53,3,43,22,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[75,63,2,49,14,12,89,14,60,78,92,16,44,82,38,30,72,11,46,52,90,27,8,65,78,3,85,41,57,79,39,52,33,48,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[78,27,56,56,39,13,19,43,86,72,58,95,39,7,4,34,21,98,39,15,39,84,89,69,84,46,37,57,59,35,59,50,26,15,93,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[42,89,36,27,78,91,24,11,17,41,5,94,7,69,51,96,3,96,47,90,90,45,91,20,50,56,10,32,36,49,4,53,85,92,25,65,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[52,9,61,30,61,97,66,21,96,92,98,90,6,34,96,60,32,69,68,33,75,84,18,31,71,50,84,63,3,3,19,11,28,42,75,45,45,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[61,31,61,68,96,34,49,39,5,71,76,59,62,67,6,47,96,99,34,21,32,47,52,7,71,60,42,72,94,56,82,83,84,40,94,87,82,46,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[1,20,60,14,17,38,26,78,66,81,45,95,18,51,98,81,48,16,53,88,37,52,69,95,72,93,22,34,98,20,54,27,73,61,56,63,60,34,63,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[93,42,94,83,47,61,27,51,79,79,45,1,44,73,31,70,83,42,88,25,53,51,30,15,65,94,80,44,61,84,12,77,2,62,2,65,94,42,14,94,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[32,73,9,67,68,29,74,98,10,19,85,48,38,31,85,67,53,93,93,77,47,67,39,72,94,53,18,43,77,40,78,32,29,59,24,6,2,83,50,60,66,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[32,1,44,30,16,51,15,81,98,15,10,62,86,79,50,62,45,60,70,38,31,85,65,61,64,6,69,84,14,22,56,43,9,48,66,69,83,91,60,40,36,61,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[92,48,22,99,15,95,64,43,1,16,94,2,99,19,17,69,11,58,97,56,89,31,77,45,67,96,12,73,8,20,36,47,81,44,50,64,68,85,40,81,85,52,9,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[91,35,92,45,32,84,62,15,19,64,21,66,6,1,52,80,62,59,12,25,88,28,91,50,40,16,22,99,92,79,87,51,21,77,74,77,7,42,38,42,74,83,2,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[46,19,77,66,24,18,5,32,2,84,31,99,92,58,96,72,91,36,62,99,55,29,53,42,12,37,26,58,89,50,66,19,82,75,12,48,24,87,91,85,2,7,3,76,86,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[99,98,84,93,7,17,33,61,92,20,66,60,24,66,40,30,67,5,37,29,24,96,3,27,70,62,13,4,45,47,59,88,43,20,66,15,46,92,30,4,71,66,78,70,53,99,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[67,60,38,6,88,4,17,72,10,99,71,7,42,25,54,5,26,64,91,50,45,71,6,30,67,48,69,82,8,56,80,67,18,46,66,63,1,20,8,80,47,7,91,16,3,79,87,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[18,54,78,49,80,48,77,40,68,23,60,88,58,80,33,57,11,69,55,53,64,2,94,49,60,92,16,35,81,21,82,96,25,24,96,18,2,5,49,3,50,77,6,32,84,27,18,38,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[68,1,50,4,3,21,42,94,53,24,89,5,92,26,52,36,68,11,85,1,4,42,2,45,15,6,50,4,53,73,25,74,81,88,98,21,67,84,79,97,99,20,95,4,40,46,2,58,87,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[94,10,2,78,88,52,21,3,88,60,6,53,49,71,20,91,12,65,7,49,21,22,11,41,58,99,36,16,9,48,17,24,52,36,23,15,72,16,84,56,2,99,43,76,81,71,29,39,49,17,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[64,39,59,84,86,16,17,66,3,9,43,6,64,18,63,29,68,6,23,7,87,14,26,35,17,12,98,41,53,64,78,18,98,27,28,84,80,67,75,62,10,11,76,90,54,10,5,54,41,39,66,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[43,83,18,37,32,31,52,29,95,47,8,76,35,11,4,53,35,43,34,10,52,57,12,36,20,39,40,55,78,44,7,31,38,26,8,15,56,88,86,1,52,62,10,24,32,5,60,65,53,28,57,99,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[3,50,3,52,7,73,49,92,66,80,1,46,8,67,25,36,73,93,7,42,25,53,13,96,76,83,87,90,54,89,78,22,78,91,73,51,69,9,79,94,83,53,9,40,69,62,10,79,49,47,3,81,30,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[71,54,73,33,51,76,59,54,79,37,56,45,84,17,62,21,98,69,41,95,65,24,39,37,62,3,24,48,54,64,46,82,71,78,33,67,9,16,96,68,52,74,79,68,32,21,13,78,96,60,9,69,20,36,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[73,26,21,44,46,38,17,83,65,98,7,23,52,46,61,97,33,13,60,31,70,15,36,77,31,58,56,93,75,68,21,36,69,53,90,75,25,82,39,50,65,94,29,30,11,33,11,13,96,2,56,47,7,49,2,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[76,46,73,30,10,20,60,70,14,56,34,26,37,39,48,24,55,76,84,91,39,86,95,61,50,14,53,93,64,67,37,31,10,84,42,70,48,20,10,72,60,61,84,79,69,65,99,73,89,25,85,48,92,56,97,16,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[3,14,80,27,22,30,44,27,67,75,79,32,51,54,81,29,65,14,19,4,13,82,4,91,43,40,12,52,29,99,7,76,60,25,1,7,61,71,37,92,40,47,99,66,57,1,43,44,22,40,53,53,9,69,26,81,7,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[49,80,56,90,93,87,47,13,75,28,87,23,72,79,32,18,27,20,28,10,37,59,21,18,70,4,79,96,3,31,45,71,81,6,14,18,17,5,31,50,92,79,23,47,9,39,47,91,43,54,69,47,42,95,62,46,32,85,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[37,18,62,85,87,28,64,5,77,51,47,26,30,65,5,70,65,75,59,80,42,52,25,20,44,10,92,17,71,95,52,14,77,13,24,55,11,65,26,91,1,30,63,15,49,48,41,17,67,47,3,68,20,90,98,32,4,40,68,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[90,51,58,60,6,55,23,68,5,19,76,94,82,36,96,43,38,90,87,28,33,83,5,17,70,83,96,93,6,4,78,47,80,6,23,84,75,23,87,72,99,14,50,98,92,38,90,64,61,58,76,94,36,66,87,80,51,35,61,38,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[57,95,64,6,53,36,82,51,40,33,47,14,7,98,78,65,39,58,53,6,50,53,4,69,40,68,36,69,75,78,75,60,3,32,39,24,74,47,26,90,13,40,44,71,90,76,51,24,36,50,25,45,70,80,61,80,61,43,90,64,11,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[18,29,86,56,68,42,79,10,42,44,30,12,96,18,23,18,52,59,2,99,67,46,60,86,43,38,55,17,44,93,42,21,55,14,47,34,55,16,49,24,23,29,96,51,55,10,46,53,27,92,27,46,63,57,30,65,43,27,21,20,24,83,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[81,72,93,19,69,52,48,1,13,83,92,69,20,48,69,59,20,62,5,42,28,89,90,99,32,72,84,17,8,87,36,3,60,31,36,36,81,26,97,36,48,54,56,56,27,16,91,8,23,11,87,99,33,47,2,14,44,73,70,99,43,35,33,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[90,56,61,86,56,12,70,59,63,32,1,15,81,47,71,76,95,32,65,80,54,70,34,51,40,45,33,4,64,55,78,68,88,47,31,47,68,87,3,84,23,44,89,72,35,8,31,76,63,26,90,85,96,67,65,91,19,14,17,86,4,71,32,95,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[37,13,4,22,64,37,37,28,56,62,86,33,7,37,10,44,52,82,52,6,19,52,57,75,90,26,91,24,6,21,14,67,76,30,46,14,35,89,89,41,3,64,56,97,87,63,22,34,3,79,17,45,11,53,25,56,96,61,23,18,63,31,37,37,47,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[77,23,26,70,72,76,77,4,28,64,71,69,14,85,96,54,95,48,6,62,99,83,86,77,97,75,71,66,30,19,57,90,33,1,60,61,14,12,90,99,32,77,56,41,18,14,87,49,10,14,90,64,18,50,21,74,14,16,88,5,45,73,82,47,74,44,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[22,97,41,13,34,31,54,61,56,94,3,24,59,27,98,77,4,9,37,40,12,26,87,9,71,70,7,18,64,57,80,21,12,71,83,94,60,39,73,79,73,19,97,32,64,29,41,7,48,84,85,67,12,74,95,20,24,52,41,67,56,61,29,93,35,72,69,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[72,23,63,66,1,11,7,30,52,56,95,16,65,26,83,90,50,74,60,18,16,48,43,77,37,11,99,98,30,94,91,26,62,73,45,12,87,73,47,27,1,88,66,99,21,41,95,80,2,53,23,32,61,48,32,43,43,83,14,66,95,91,19,81,80,67,25,88,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[8,62,32,18,92,14,83,71,37,96,11,83,39,99,5,16,23,27,10,67,2,25,44,11,55,31,46,64,41,56,44,74,26,81,51,31,45,85,87,9,81,95,22,28,76,69,46,48,64,87,67,76,27,89,31,11,74,16,62,3,60,94,42,47,9,34,94,93,72,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[56,18,90,18,42,17,42,32,14,86,6,53,33,95,99,35,29,15,44,20,49,59,25,54,34,59,84,21,23,54,35,90,78,16,93,13,37,88,54,19,86,67,68,55,66,84,65,42,98,37,87,56,33,28,58,38,28,38,66,27,52,21,81,15,8,22,97,32,85,27,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[91,53,40,28,13,34,91,25,1,63,50,37,22,49,71,58,32,28,30,18,68,94,23,83,63,62,94,76,80,41,90,22,82,52,29,12,18,56,10,8,35,14,37,57,23,65,67,40,72,39,93,39,70,89,40,34,7,46,94,22,20,5,53,64,56,30,5,56,61,88,27,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[23,95,11,12,37,69,68,24,66,10,87,70,43,50,75,7,62,41,83,58,95,93,89,79,45,39,2,22,5,22,95,43,62,11,68,29,17,40,26,44,25,71,87,16,70,85,19,25,59,94,90,41,41,80,61,70,55,60,84,33,95,76,42,63,15,9,3,40,38,12,3,32,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[9,84,56,80,61,55,85,97,16,94,82,94,98,57,84,30,84,48,93,90,71,5,95,90,73,17,30,98,40,64,65,89,7,79,9,19,56,36,42,30,23,69,73,72,7,5,27,61,24,31,43,48,71,84,21,28,26,65,65,59,65,74,77,20,10,81,61,84,95,8,52,23,70,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[47,81,28,9,98,51,67,64,35,51,59,36,92,82,77,65,80,24,72,53,22,7,27,10,21,28,30,22,48,82,80,48,56,20,14,43,18,25,50,95,90,31,77,8,9,48,44,80,90,22,93,45,82,17,13,96,25,26,8,73,34,99,6,49,24,6,83,51,40,14,15,10,25,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[54,25,10,81,30,64,24,74,75,80,36,75,82,60,22,69,72,91,45,67,3,62,79,54,89,74,44,83,64,96,66,73,44,30,74,50,37,5,9,97,70,1,60,46,37,91,39,75,75,18,58,52,72,78,51,81,86,52,8,97,1,46,43,66,98,62,81,18,70,93,73,8,32,46,34,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[96,80,82,7,59,71,92,53,19,20,88,66,3,26,26,10,24,27,50,82,94,73,63,8,51,33,22,45,19,13,58,33,90,15,22,50,36,13,55,6,35,47,82,52,33,61,36,27,28,46,98,14,73,20,73,32,16,26,80,53,47,66,76,38,94,45,2,1,22,52,47,96,64,58,52,39,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[88,46,23,39,74,63,81,64,20,90,33,33,76,55,58,26,10,46,42,26,74,74,12,83,32,43,9,2,73,55,86,54,85,34,28,23,29,79,91,62,47,41,82,87,99,22,48,90,20,5,96,75,95,4,43,28,81,39,81,1,28,42,78,25,39,77,90,57,58,98,17,36,73,22,63,74,51,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[29,39,74,94,95,78,64,24,38,86,63,87,93,6,70,92,22,16,80,64,29,52,20,27,23,50,14,13,87,15,72,96,81,22,8,49,72,30,70,24,79,31,16,64,59,21,89,34,96,91,48,76,43,53,88,1,57,80,23,81,90,79,58,1,80,87,17,99,86,90,72,63,32,69,14,28,88,69,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[37,17,71,95,56,93,71,35,43,45,4,98,92,94,84,96,11,30,31,27,31,60,92,3,48,5,98,91,86,94,35,90,90,8,48,19,33,28,68,37,59,26,65,96,50,68,22,7,9,49,34,31,77,49,43,6,75,17,81,87,61,79,52,26,27,72,29,50,7,98,86,1,17,10,46,64,24,18,56,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[51,30,25,94,88,85,79,91,40,33,63,84,49,67,98,92,15,26,75,19,82,5,18,78,65,93,61,48,91,43,59,41,70,51,22,15,92,81,67,91,46,98,11,11,65,31,66,10,98,65,83,21,5,56,5,98,73,67,46,74,69,34,8,30,5,52,7,98,32,95,30,94,65,50,24,63,28,81,99,57,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[19,23,61,36,9,89,71,98,65,17,30,29,89,26,79,74,94,11,44,48,97,54,81,55,39,66,69,45,28,47,13,86,15,76,74,70,84,32,36,33,79,20,78,14,41,47,89,28,81,5,99,66,81,86,38,26,6,25,13,60,54,55,23,53,27,5,89,25,23,11,13,54,59,54,56,34,16,24,53,44,6,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[13,40,57,72,21,15,60,8,4,19,11,98,34,45,9,97,86,71,3,15,56,19,15,44,97,31,90,4,87,87,76,8,12,30,24,62,84,28,12,85,82,53,99,52,13,94,6,65,97,86,9,50,94,68,69,74,30,67,87,94,63,7,78,27,80,36,69,41,6,92,32,78,37,82,30,5,18,87,99,72,19,99,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[44,20,55,77,69,91,27,31,28,81,80,27,2,7,97,23,95,98,12,25,75,29,47,71,7,47,78,39,41,59,27,76,13,15,66,61,68,35,69,86,16,53,67,63,99,85,41,56,8,28,33,40,94,76,90,85,31,70,24,65,84,65,99,82,19,25,54,37,21,46,33,2,52,99,51,33,26,4,87,2,8,18,96,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[54,42,61,45,91,6,64,79,80,82,32,16,83,63,42,49,19,78,65,97,40,42,14,61,49,34,4,18,25,98,59,30,82,72,26,88,54,36,21,75,3,88,99,53,46,51,55,78,22,94,34,40,68,87,84,25,30,76,25,8,92,84,42,61,40,38,9,99,40,23,29,39,46,55,10,90,35,84,56,70,63,23,91,39,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[52,92,3,71,89,7,9,37,68,66,58,20,44,92,51,56,13,71,79,99,26,37,2,6,16,67,36,52,58,16,79,73,56,60,59,27,44,77,94,82,20,50,98,33,9,87,94,37,40,83,64,83,58,85,17,76,53,2,83,52,22,27,39,20,48,92,45,21,9,42,24,23,12,37,52,28,50,78,79,20,86,62,73,20,59,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[54,96,80,15,91,90,99,70,10,9,58,90,93,50,81,99,54,38,36,10,30,11,35,84,16,45,82,18,11,97,36,43,96,79,97,65,40,48,23,19,17,31,64,52,65,65,37,32,65,76,99,79,34,65,79,27,55,33,3,1,33,27,61,28,66,8,4,70,49,46,48,83,1,45,19,96,13,81,14,21,31,79,93,85,50,5,0,0,0,0,0,0,0,0,0,0,0,0,0,0],[92,92,48,84,59,98,31,53,23,27,15,22,79,95,24,76,5,79,16,93,97,89,38,89,42,83,2,88,94,95,82,21,1,97,48,39,31,78,9,65,50,56,97,61,1,7,65,27,21,23,14,15,80,97,44,78,49,35,33,45,81,74,34,5,31,57,9,38,94,7,69,54,69,32,65,68,46,68,78,90,24,28,49,51,45,86,35,0,0,0,0,0,0,0,0,0,0,0,0,0],[41,63,89,76,87,31,86,9,46,14,87,82,22,29,47,16,13,10,70,72,82,95,48,64,58,43,13,75,42,69,21,12,67,13,64,85,58,23,98,9,37,76,5,22,31,12,66,50,29,99,86,72,45,25,10,28,19,6,90,43,29,31,67,79,46,25,74,14,97,35,76,37,65,46,23,82,6,22,30,76,93,66,94,17,96,13,20,72,0,0,0,0,0,0,0,0,0,0,0,0],[63,40,78,8,52,9,90,41,70,28,36,14,46,44,85,96,24,52,58,15,87,37,5,98,99,39,13,61,76,38,44,99,83,74,90,22,53,80,56,98,30,51,63,39,44,30,91,91,4,22,27,73,17,35,53,18,35,45,54,56,27,78,48,13,69,36,44,38,71,25,30,56,15,22,73,43,32,69,59,25,93,83,45,11,34,94,44,39,92,0,0,0,0,0,0,0,0,0,0,0],[12,36,56,88,13,96,16,12,55,54,11,47,19,78,17,17,68,81,77,51,42,55,99,85,66,27,81,79,93,42,65,61,69,74,14,1,18,56,12,1,58,37,91,22,42,66,83,25,19,4,96,41,25,45,18,69,96,88,36,93,10,12,98,32,44,83,83,4,72,91,4,27,73,7,34,37,71,60,59,31,1,54,54,44,96,93,83,36,4,45,0,0,0,0,0,0,0,0,0,0],[30,18,22,20,42,96,65,79,17,41,55,69,94,81,29,80,91,31,85,25,47,26,43,49,2,99,34,67,99,76,16,14,15,93,8,32,99,44,61,77,67,50,43,55,87,55,53,72,17,46,62,25,50,99,73,5,93,48,17,31,70,80,59,9,44,59,45,13,74,66,58,94,87,73,16,14,85,38,74,99,64,23,79,28,71,42,20,37,82,31,23,0,0,0,0,0,0,0,0,0],[51,96,39,65,46,71,56,13,29,68,53,86,45,33,51,49,12,91,21,21,76,85,2,17,98,15,46,12,60,21,88,30,92,83,44,59,42,50,27,88,46,86,94,73,45,54,23,24,14,10,94,21,20,34,23,51,4,83,99,75,90,63,60,16,22,33,83,70,11,32,10,50,29,30,83,46,11,5,31,17,86,42,49,1,44,63,28,60,7,78,95,40,0,0,0,0,0,0,0,0],[44,61,89,59,4,49,51,27,69,71,46,76,44,4,9,34,56,39,15,6,94,91,75,90,65,27,56,23,74,6,23,33,36,69,14,39,5,34,35,57,33,22,76,46,56,10,61,65,98,9,16,69,4,62,65,18,99,76,49,18,72,66,73,83,82,40,76,31,89,91,27,88,17,35,41,35,32,51,32,67,52,68,74,85,80,57,7,11,62,66,47,22,67,0,0,0,0,0,0,0],[65,37,19,97,26,17,16,24,24,17,50,37,64,82,24,36,32,11,68,34,69,31,32,89,79,93,96,68,49,90,14,23,4,4,67,99,81,74,70,74,36,96,68,9,64,39,88,35,54,89,96,58,66,27,88,97,32,14,6,35,78,20,71,6,85,66,57,2,58,91,72,5,29,56,73,48,86,52,9,93,22,57,79,42,12,1,31,68,17,59,63,76,7,77,0,0,0,0,0,0],[73,81,14,13,17,20,11,9,1,83,8,85,91,70,84,63,62,77,37,7,47,1,59,95,39,69,39,21,99,9,87,2,97,16,92,36,74,71,90,66,33,73,73,75,52,91,11,12,26,53,5,26,26,48,61,50,90,65,1,87,42,47,74,35,22,73,24,26,56,70,52,5,48,41,31,18,83,27,21,39,80,85,26,8,44,2,71,7,63,22,5,52,19,8,20,0,0,0,0,0],[17,25,21,11,72,93,33,49,64,23,53,82,3,13,91,65,85,2,40,5,42,31,77,42,5,36,6,54,4,58,7,76,87,83,25,57,66,12,74,33,85,37,74,32,20,69,3,97,91,68,82,44,19,14,89,28,85,85,80,53,34,87,58,98,88,78,48,65,98,40,11,57,10,67,70,81,60,79,74,72,97,59,79,47,30,20,54,80,89,91,14,5,33,36,79,39,0,0,0,0],[60,85,59,39,60,7,57,76,77,92,6,35,15,72,23,41,45,52,95,18,64,79,86,53,56,31,69,11,91,31,84,50,44,82,22,81,41,40,30,42,30,91,48,94,74,76,64,58,74,25,96,57,14,19,3,99,28,83,15,75,99,1,89,85,79,50,3,95,32,67,44,8,7,41,62,64,29,20,14,76,26,55,48,71,69,66,19,72,44,25,14,1,48,74,12,98,7,0,0,0],[64,66,84,24,18,16,27,48,20,14,47,69,30,86,48,40,23,16,61,21,51,50,26,47,35,33,91,28,78,64,43,68,4,79,51,8,19,60,52,95,6,68,46,86,35,97,27,58,4,65,30,58,99,12,12,75,91,39,50,31,42,64,70,4,46,7,98,73,98,93,37,89,77,91,64,71,64,65,66,21,78,62,81,74,42,20,83,70,73,95,78,45,92,27,34,53,71,15,0,0],[30,11,85,31,34,71,13,48,5,14,44,3,19,67,23,73,19,57,6,90,94,72,57,69,81,62,59,68,88,57,55,69,49,13,7,87,97,80,89,5,71,5,5,26,38,40,16,62,45,99,18,38,98,24,21,26,62,74,69,4,85,57,77,35,58,67,91,79,79,57,86,28,66,34,72,51,76,78,36,95,63,90,8,78,47,63,45,31,22,70,52,48,79,94,15,77,61,67,68,0],[23,33,44,81,80,92,93,75,94,88,23,61,39,76,22,3,28,94,32,6,49,65,41,34,18,23,8,47,62,60,3,63,33,13,80,52,31,54,73,43,70,26,16,69,57,87,83,31,3,93,70,81,47,95,77,44,29,68,39,51,56,59,63,7,25,70,7,77,43,53,64,3,94,42,95,39,18,1,66,21,16,97,20,50,90,16,70,10,95,69,29,6,25,61,41,26,15,59,63,35]];
+```
+
+## --seed-contents--
+
+```js
+function maximumPathSumII(triangle) {
+
+  return true;
+}
+
+const testTriangle = [[3, 0, 0, 0],
+                      [7, 4, 0, 0],
+                      [2, 4, 6, 0],
+                      [8, 5, 9, 3]];
+
+maximumPathSumII(testTriangle);
+```
+
+# --solutions--
+
+```js
+function maximumPathSumII(triangle) {
+  const newTriangle = [];
+  for (let i = 0; i < triangle.length; i++) {
+    newTriangle.push(triangle[i].slice());
+  }
+
+  for (let i = newTriangle.length - 2; i >= 0; i--) {
+    for (let j = i; j >= 0; j--) {
+      let higherOption = 0;
+      if (newTriangle[i + 1][j + 1] > newTriangle[i + 1][j]) {
+        higherOption = newTriangle[i + 1][j + 1];
+      } else {
+        higherOption = newTriangle[i + 1][j];
+      }
+      newTriangle[i][j] += higherOption;
+    }
+  }
+  return newTriangle[0][0];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-68-magic-5-gon-ring.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-68-magic-5-gon-ring.md
new file mode 100644
index 00000000000..7be38bfabe1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-68-magic-5-gon-ring.md
@@ -0,0 +1,71 @@
+---
+id: 5900f3b01000cf542c50fec3
+title: 'Problem 68: Magic 5-gon ring'
+challengeType: 1
+forumTopicId: 302180
+dashedName: problem-68-magic-5-gon-ring
+---
+
+# --description--
+
+Consider the following "magic" 3-gon ring, filled with the numbers 1 to 6, and each line adding to nine.
+
+<img class="img-responsive center-block" alt="a completed example of a 3-gon ring" src="https://cdn-media-1.freecodecamp.org/project-euler/3-gon-ring.png" style="background-color: white; padding: 10px;" />
+
+Working **clockwise**, and starting from the group of three with the numerically lowest external node (4,3,2 in this example), each solution can be described uniquely. For example, the above solution can be described by the set: 4,3,2; 6,2,1; 5,1,3.
+
+It is possible to complete the ring with four different totals: 9, 10, 11, and 12. There are eight solutions in total.
+
+<div style='text-align: center;'>
+
+| !!crwdBlockTags_6_sgaTkcolBdwrc!! |!!crwdBlockTags_7_sgaTkcolBdwrc!! |
+| -------------------------------------- | --------------------------------------------- |
+| 9                                      | 4,2,3; 5,3,1; 6,1,2                           |
+| 9                                      | 4,3,2; 6,2,1; 5,1,3                           |
+| 10                                     | 2,3,5; 4,5,1; 6,1,3                           |
+| 10                                     | 2,5,3; 6,3,1; 4,1,5                           |
+| 11                                     | 1,4,6; 3,6,2; 5,2,4                           |
+| 11                                     | 1,6,4; 5,4,2; 3,2,6                           |
+| 12                                     | 1,5,6; 2,6,4; 3,4,5                           |
+| 12                                     | 1,6,5; 3,5,4; 2,4,6                           |
+
+</div>
+
+By concatenating each group it is possible to form 9-digit strings; the maximum string for a 3-gon ring is 432621513.
+
+Using the numbers 1 to 10, and depending on arrangements, it is possible to form 16- and 17-digit strings. What is the maximum **16-digit** string for a "magic" 5-gon ring?
+
+<img class="img-responsive center-block" alt="a blank diagram of a 5-gon ring" src="https://cdn-media-1.freecodecamp.org/project-euler/5-gon-ring.png" style="background-color: white; padding: 10px;" />
+
+# --hints--
+
+`magic5GonRing()` should return a number.
+
+```js
+assert(typeof magic5GonRing() === 'number');
+```
+
+`magic5GonRing()` should return 6531031914842725.
+
+```js
+assert.strictEqual(magic5GonRing(), 6531031914842725);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function magic5GonRing() {
+
+  return true;
+}
+
+magic5GonRing();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-69-totient-maximum.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-69-totient-maximum.md
new file mode 100644
index 00000000000..e57b133fbe7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-69-totient-maximum.md
@@ -0,0 +1,110 @@
+---
+id: 5900f3b11000cf542c50fec4
+title: 'Problem 69: Totient maximum'
+challengeType: 1
+forumTopicId: 302181
+dashedName: problem-69-totient-maximum
+---
+
+# --description--
+
+Euler's Totient function, ${\phi}(n)$ (sometimes called the phi function), is used to determine the number of numbers less than `n` which are relatively prime to `n`. For example, as 1, 2, 4, 5, 7, and 8, are all less than nine and relatively prime to nine, ${\phi}(9) = 6$.
+
+<div style='margin-left: 4em;'>
+
+| $n$ | $\text{Relatively Prime}$ | $\displaystyle{\phi}(n)$ | $\displaystyle\frac{n}{{\phi}(n)}$ |
+| --- | ------------------------- | ------------------------ | ---------------------------------- |
+| 2   | 1                         | 1                        | 2                                  |
+| 3   | 1,2                       | 2                        | 1.5                                |
+| 4   | 1,3                       | 2                        | 2                                  |
+| 5   | 1,2,3,4                   | 4                        | 1.25                               |
+| 6   | 1,5                       | 2                        | 3                                  |
+| 7   | 1,2,3,4,5,6               | 6                        | 1.1666...                          |
+| 8   | 1,3,5,7                   | 4                        | 2                                  |
+| 9   | 1,2,4,5,7,8               | 6                        | 1.5                                |
+| 10  | 1,3,7,9                   | 4                        | 2.5                                |
+
+</div>
+
+It can be seen that `n` = 6 produces a maximum $\displaystyle\frac{n}{{\phi}(n)}$ for `n` ≤ 10.
+
+Find the value of `n` ≤ `limit` for which $\displaystyle\frac{n}{{\phi(n)}}$ is a maximum.
+
+# --hints--
+
+`totientMaximum(10)` should return a number.
+
+```js
+assert(typeof totientMaximum(10) === 'number');
+```
+
+`totientMaximum(10)` should return `6`.
+
+```js
+assert.strictEqual(totientMaximum(10), 6);
+```
+
+`totientMaximum(10000)` should return `2310`.
+
+```js
+assert.strictEqual(totientMaximum(10000), 2310);
+```
+
+`totientMaximum(500000)` should return `30030`.
+
+```js
+assert.strictEqual(totientMaximum(500000), 30030);
+```
+
+`totientMaximum(1000000)` should return `510510`.
+
+```js
+assert.strictEqual(totientMaximum(1000000), 510510);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function totientMaximum(limit) {
+
+  return true;
+}
+
+totientMaximum(10);
+```
+
+# --solutions--
+
+```js
+function totientMaximum(limit) {
+  function getSievePrimes(max) {
+    const primesMap = new Array(max).fill(true);
+    primesMap[0] = false;
+    primesMap[1] = false;
+    const primes = [];
+    for (let i = 2; i < max; i = i + 2) {
+      if (primesMap[i]) {
+        primes.push(i);
+        for (let j = i * i; j < max; j = j + i) {
+          primesMap[j] = false;
+        }
+      }
+      if (i === 2) {
+        i = 1;
+      }
+    }
+    return primes;
+  }
+
+  const MAX_PRIME = 50;
+  const primes = getSievePrimes(MAX_PRIME);
+  let result = 1;
+
+  for (let i = 0; result * primes[i] < limit; i++) {
+    result *= primes[i];
+  }
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-7-10001st-prime.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-7-10001st-prime.md
new file mode 100644
index 00000000000..6780c8fa2d1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-7-10001st-prime.md
@@ -0,0 +1,86 @@
+---
+id: 5900f3731000cf542c50fe86
+title: 'Problem 7: 10001st prime'
+challengeType: 1
+forumTopicId: 302182
+dashedName: problem-7-10001st-prime
+---
+
+# --description--
+
+By listing the first six prime numbers: 2, 3, 5, 7, 11, and 13, we can see that the 6th prime is 13.
+
+What is the `n`th prime number?
+
+# --hints--
+
+`nthPrime(6)` should return a number.
+
+```js
+assert(typeof nthPrime(6) === 'number');
+```
+
+`nthPrime(6)` should return 13.
+
+```js
+assert.strictEqual(nthPrime(6), 13);
+```
+
+`nthPrime(10)` should return 29.
+
+```js
+assert.strictEqual(nthPrime(10), 29);
+```
+
+`nthPrime(100)` should return 541.
+
+```js
+assert.strictEqual(nthPrime(100), 541);
+```
+
+`nthPrime(1000)` should return 7919.
+
+```js
+assert.strictEqual(nthPrime(1000), 7919);
+```
+
+`nthPrime(10001)` should return 104743.
+
+```js
+assert.strictEqual(nthPrime(10001), 104743);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function nthPrime(n) {
+
+  return true;
+}
+
+nthPrime(10001);
+```
+
+# --solutions--
+
+```js
+const nthPrime = n => {
+  let pN = 2;
+  let step = 0;
+  while (step < n) {
+    let isPrime = true;
+    let rootN = Math.sqrt(pN);
+    for (let i = 2; i <= rootN; i++) {
+      if (!(pN % i)) {
+        isPrime = false;
+        break;
+      }
+    }
+    isPrime ? step++ : '';
+    pN++;
+  }
+  return pN - 1;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-70-totient-permutation.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-70-totient-permutation.md
new file mode 100644
index 00000000000..1328f1ca1e7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-70-totient-permutation.md
@@ -0,0 +1,118 @@
+---
+id: 5900f3b21000cf542c50fec5
+title: 'Problem 70: Totient permutation'
+challengeType: 1
+forumTopicId: 302183
+dashedName: problem-70-totient-permutation
+---
+
+# --description--
+
+Euler's Totient function, ${\phi}(n)$ (sometimes called the phi function), is used to determine the number of positive numbers less than or equal to `n` which are relatively prime to `n`. For example, as 1, 2, 4, 5, 7, and 8, are all less than nine and relatively prime to nine, ${\phi}(9) = 6$. The number 1 is considered to be relatively prime to every positive number, so ${\phi}(1) = 1$.
+
+Interestingly, ${\phi}(87109) = 79180$, and it can be seen that 87109 is a permutation of 79180.
+
+Find the value of `n`, 1 &lt; `n` &lt; `limit`, for which ${\phi}(n)$ is a permutation of `n` and the ratio $\displaystyle\frac{n}{{\phi}(n)}$ produces a minimum.
+
+# --hints--
+
+`totientPermutation(10000)` should return a number.
+
+```js
+assert(typeof totientPermutation(10000) === 'number');
+```
+
+`totientPermutation(10000)` should return `4435`.
+
+```js
+assert.strictEqual(totientPermutation(10000), 4435);
+```
+
+`totientPermutation(100000)` should return `75841`.
+
+```js
+assert.strictEqual(totientPermutation(100000), 75841);
+```
+
+`totientPermutation(500000)` should return `474883`.
+
+```js
+assert.strictEqual(totientPermutation(500000), 474883);
+```
+
+`totientPermutation(10000000)` should return `8319823`.
+
+```js
+assert.strictEqual(totientPermutation(10000000), 8319823);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function totientPermutation(limit) {
+
+  return true;
+}
+
+totientPermutation(10000);
+```
+
+# --solutions--
+
+```js
+function totientPermutation(limit) {
+  function getSievePrimes(max) {
+    const primes = [];
+    const primesMap = new Array(max).fill(true);
+    primesMap[0] = false;
+    primesMap[1] = false;
+
+    for (let i = 2; i < max; i += 2) {
+      if (primesMap[i]) {
+        primes.push(i);
+        for (let j = i * i; j < max; j += i) {
+          primesMap[j] = false;
+        }
+      }
+      if (i === 2) {
+        i = 1;
+      }
+    }
+    return primes;
+  }
+
+  function sortDigits(number) {
+    return number.toString().split('').sort().join('');
+  }
+
+  function isPermutation(numberA, numberB) {
+    return sortDigits(numberA) === sortDigits(numberB);
+  }
+
+  const MAX_PRIME = 4000;
+  const primes = getSievePrimes(MAX_PRIME);
+
+  let nValue = 1;
+  let minRatio = Infinity;
+
+  for (let i = 1; i < primes.length; i++) {
+    for (let j = i + 1; j < primes.length; j++) {
+      const num = primes[i] * primes[j];
+      if (num > limit) {
+        break;
+      }
+
+      const phi = (primes[i] - 1) * (primes[j] - 1);
+      const ratio = num / phi;
+
+      if (minRatio > ratio && isPermutation(num, phi)) {
+        nValue = num;
+        minRatio = ratio;
+      }
+    }
+  }
+  return nValue;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-71-ordered-fractions.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-71-ordered-fractions.md
new file mode 100644
index 00000000000..267a17669b0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-71-ordered-fractions.md
@@ -0,0 +1,95 @@
+---
+id: 5900f3b31000cf542c50fec6
+title: 'Problem 71: Ordered fractions'
+challengeType: 1
+forumTopicId: 302184
+dashedName: problem-71-ordered-fractions
+---
+
+# --description--
+
+Consider the fraction, $\frac{n}{d}$, where `n` and `d` are positive integers. If `n` &lt; `d` and highest common factor, ${{HCF}(n, d)} = 1$, it is called a reduced proper fraction.
+
+If we list the set of reduced proper fractions for `d` ≤ 8 in ascending order of size, we get:
+
+$$\frac{1}{8}, \frac{1}{7}, \frac{1}{6}, \frac{1}{5}, \frac{1}{4}, \frac{2}{7}, \frac{1}{3}, \frac{3}{8}, \frac{\textbf2}{\textbf5}, \frac{3}{7}, \frac{1}{2}, \frac{4}{7}, \frac{3}{5}, \frac{5}{8}, \frac{2}{3}, \frac{5}{7}, \frac{3}{4}, \frac{4}{5}, \frac{5}{6}, \frac{6}{7}, \frac{7}{8}$$
+
+It can be seen that $\frac{2}{5}$ is the fraction immediately to the left of $\frac{3}{7}$.
+
+By listing the set of reduced proper fractions for `d` ≤ `limit` in ascending order of size, find the numerator of the fraction immediately to the left of $\frac{3}{7}$.
+
+# --hints--
+
+`orderedFractions(8)` should return a number.
+
+```js
+assert(typeof orderedFractions(8) === 'number');
+```
+
+`orderedFractions(8)` should return `2`.
+
+```js
+assert.strictEqual(orderedFractions(8), 2);
+```
+
+`orderedFractions(10)` should return `2`.
+
+```js
+assert.strictEqual(orderedFractions(10), 2);
+```
+
+`orderedFractions(9994)` should return `4283`.
+
+```js
+assert.strictEqual(orderedFractions(9994), 4283);
+```
+
+`orderedFractions(500000)` should return `214283`.
+
+```js
+assert.strictEqual(orderedFractions(500000), 214283);
+```
+
+`orderedFractions(1000000)` should return `428570`.
+
+```js
+assert.strictEqual(orderedFractions(1000000), 428570);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function orderedFractions(limit) {
+
+  return true;
+}
+
+orderedFractions(8);
+```
+
+# --solutions--
+
+```js
+function orderedFractions(limit) {
+  const fractions = [];
+  const fractionValues = {};
+  const highBoundary = 3 / 7;
+  let lowBoundary = 2 / 7;
+
+  for (let denominator = limit; denominator > 2; denominator--) {
+    let numerator = Math.floor((3 * denominator - 1) / 7);
+    let value = numerator / denominator;
+    if (value > highBoundary || value < lowBoundary) {
+      continue;
+    }
+    fractionValues[value] = [numerator, denominator];
+    fractions.push(value);
+    lowBoundary = value;
+  }
+
+  fractions.sort();
+  return fractionValues[fractions[fractions.length - 1]][0];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-72-counting-fractions.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-72-counting-fractions.md
new file mode 100644
index 00000000000..dab392ae0ae
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-72-counting-fractions.md
@@ -0,0 +1,90 @@
+---
+id: 5900f3b41000cf542c50fec7
+title: 'Problem 72: Counting fractions'
+challengeType: 1
+forumTopicId: 302185
+dashedName: problem-72-counting-fractions
+---
+
+# --description--
+
+Consider the fraction, $\frac{n}{d}$, where `n` and `d` are positive integers. If `n` &lt; `d` and highest common factor, ${HCF}(n, d) = 1$, it is called a reduced proper fraction.
+
+If we list the set of reduced proper fractions for `d` ≤ 8 in ascending order of size, we get:
+
+$$\frac{1}{8}, \frac{1}{7}, \frac{1}{6}, \frac{1}{5}, \frac{1}{4}, \frac{2}{7}, \frac{1}{3}, \frac{3}{8}, \frac{2}{5}, \frac{3}{7}, \frac{1}{2}, \frac{4}{7}, \frac{3}{5}, \frac{5}{8}, \frac{2}{3}, \frac{5}{7}, \frac{3}{4}, \frac{4}{5}, \frac{5}{6}, \frac{6}{7}, \frac{7}{8}$$
+
+It can be seen that there are `21` elements in this set.
+
+How many elements would be contained in the set of reduced proper fractions for `d` ≤ `limit`?
+
+# --hints--
+
+`countingFractions(8)` should return a number.
+
+```js
+assert(typeof countingFractions(8) === 'number');
+```
+
+`countingFractions(8)` should return `21`.
+
+```js
+assert.strictEqual(countingFractions(8), 21);
+```
+
+`countingFractions(20000)` should return `121590395`.
+
+```js
+assert.strictEqual(countingFractions(20000), 121590395);
+```
+
+`countingFractions(500000)` should return `75991039675`.
+
+```js
+assert.strictEqual(countingFractions(500000), 75991039675);
+```
+
+`countingFractions(1000000)` should return `303963552391`.
+
+```js
+assert.strictEqual(countingFractions(1000000), 303963552391);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countingFractions(limit) {
+
+  return true;
+}
+
+countingFractions(8);
+```
+
+# --solutions--
+
+```js
+function countingFractions(limit) {
+  const phi = {};
+  let count = 0;
+
+  for (let i = 2; i <= limit; i++) {
+    if (!phi[i]) {
+      phi[i] = i;
+    }
+    if (phi[i] === i) {
+      for (let j = i; j <= limit; j += i) {
+        if (!phi[j]) {
+          phi[j] = j;
+        }
+        phi[j] = (phi[j] / i) * (i - 1);
+      }
+    }
+    count += phi[i];
+  }
+
+  return count;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-73-counting-fractions-in-a-range.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-73-counting-fractions-in-a-range.md
new file mode 100644
index 00000000000..b53ef258385
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-73-counting-fractions-in-a-range.md
@@ -0,0 +1,83 @@
+---
+id: 5900f3b61000cf542c50fec8
+title: 'Problem 73: Counting fractions in a range'
+challengeType: 1
+forumTopicId: 302186
+dashedName: problem-73-counting-fractions-in-a-range
+---
+
+# --description--
+
+Consider the fraction, $\frac{n}{d}$, where `n` and `d` are positive integers. If `n` &lt; `d` and highest common factor, ${HCF}(n, d) = 1$, it is called a reduced proper fraction.
+
+If we list the set of reduced proper fractions for `d` ≤ 8 in ascending order of size, we get:
+
+$$\frac{1}{8}, \frac{1}{7}, \frac{1}{6}, \frac{1}{5}, \frac{1}{4}, \frac{2}{7}, \frac{1}{3}, \mathbf{\frac{3}{8}, \frac{2}{5}, \frac{3}{7}}, \frac{1}{2}, \frac{4}{7}, \frac{3}{5}, \frac{5}{8}, \frac{2}{3}, \frac{5}{7}, \frac{3}{4}, \frac{4}{5}, \frac{5}{6}, \frac{6}{7}, \frac{7}{8}$$
+
+It can be seen that there are `3` fractions between $\frac{1}{3}$ and $\frac{1}{2}$.
+
+How many fractions lie between $\frac{1}{3}$ and $\frac{1}{2}$ in the sorted set of reduced proper fractions for `d` ≤ `limit`?
+
+# --hints--
+
+`countingFractionsInARange(8)` should return a number.
+
+```js
+assert(typeof countingFractionsInARange(8) === 'number');
+```
+
+`countingFractionsInARange(8)` should return `3`.
+
+```js
+assert.strictEqual(countingFractionsInARange(8), 3);
+```
+
+`countingFractionsInARange(1000)` should return `50695`.
+
+```js
+assert.strictEqual(countingFractionsInARange(1000), 50695);
+```
+
+`countingFractionsInARange(6000)` should return `1823861`.
+
+```js
+assert.strictEqual(countingFractionsInARange(6000), 1823861);
+```
+
+`countingFractionsInARange(12000)` should return `7295372`.
+
+```js
+assert.strictEqual(countingFractionsInARange(12000), 7295372);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countingFractionsInARange(limit) {
+
+  return true;
+}
+
+countingFractionsInARange(8);
+```
+
+# --solutions--
+
+```js
+function countingFractionsInARange(limit) {
+  let result = 0;
+  const stack = [[3, 2]];
+  while (stack.length > 0) {
+    const [startDenominator, endDenominator] = stack.pop();
+    const curDenominator = startDenominator + endDenominator;
+    if (curDenominator <= limit) {
+      result++;
+      stack.push([startDenominator, curDenominator]);
+      stack.push([curDenominator, endDenominator]);
+    }
+  }
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-74-digit-factorial-chains.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-74-digit-factorial-chains.md
new file mode 100644
index 00000000000..0b94dee88dd
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-74-digit-factorial-chains.md
@@ -0,0 +1,127 @@
+---
+id: 5900f3b61000cf542c50fec9
+title: 'Problem 74: Digit factorial chains'
+challengeType: 1
+forumTopicId: 302187
+dashedName: problem-74-digit-factorial-chains
+---
+
+# --description--
+
+The number 145 is well known for the property that the sum of the factorial of its digits is equal to 145:
+
+$$1! + 4! + 5! = 1 + 24 + 120 = 145$$
+
+Perhaps less well known is 169, in that it produces the longest chain of numbers that link back to 169; it turns out that there are only three such loops that exist:
+
+$$\begin{align} &169 → 363601 → 1454 → 169\\\\
+&871 → 45361 → 871\\\\ &872 → 45362 → 872\\\\
+\end{align}$$
+
+It is not difficult to prove that EVERY starting number will eventually get stuck in a loop. For example,
+
+$$\begin{align} &69 → 363600 → 1454 → 169 → 363601\\ (→ 1454)\\\\
+&78 → 45360 → 871 → 45361\\ (→ 871)\\\\ &540 → 145\\ (→ 145)\\\\
+\end{align}$$
+
+Starting with 69 produces a chain of five non-repeating terms, but the longest non-repeating chain with a starting number below one million is sixty terms.
+
+How many chains, with a starting number below `n`, contain exactly sixty non-repeating terms?
+
+# --hints--
+
+`digitFactorialChains(2000)` should return a number.
+
+```js
+assert(typeof digitFactorialChains(2000) === 'number');
+```
+
+`digitFactorialChains(2000)` should return `6`.
+
+```js
+assert.strictEqual(digitFactorialChains(2000), 6);
+```
+
+`digitFactorialChains(100000)` should return `42`.
+
+```js
+assert.strictEqual(digitFactorialChains(100000), 42);
+```
+
+`digitFactorialChains(500000)` should return `282`.
+
+```js
+assert.strictEqual(digitFactorialChains(500000), 282);
+```
+
+`digitFactorialChains(1000000)` should return `402`.
+
+```js
+assert.strictEqual(digitFactorialChains(1000000), 402);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function digitFactorialChains(n) {
+
+  return true;
+}
+
+digitFactorialChains(2000);
+```
+
+# --solutions--
+
+```js
+function digitFactorialChains(n) {
+  function sumDigitsFactorials(number) {
+    let sum = 0;
+    while (number > 0) {
+      sum += factorials[number % 10];
+      number = Math.floor(number / 10);
+    }
+    return sum;
+  }
+
+  const factorials = [1];
+  for (let i = 1; i < 10; i++) {
+    factorials.push(factorials[factorials.length - 1] * i);
+  }
+
+  const sequences = {
+    169: 3,
+    871: 2,
+    872: 2,
+    1454: 3,
+    45362: 2,
+    45461: 2,
+    3693601: 3
+  };
+  let result = 0;
+
+  for (let i = 2; i < n; i++) {
+    let curNum = i;
+    let chainLength = 0;
+    const curSequence = [];
+    while (curSequence.indexOf(curNum) === -1) {
+      curSequence.push(curNum);
+      curNum = sumDigitsFactorials(curNum);
+      chainLength++;
+      if (sequences.hasOwnProperty(curNum) > 0) {
+        chainLength += sequences[curNum];
+        break;
+      }
+    }
+    if (chainLength === 60) {
+      result++;
+    }
+    for (let j = 1; j < curSequence.length; j++) {
+      sequences[curSequence[j]] = chainLength - j;
+    }
+  }
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-75-singular-integer-right-triangles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-75-singular-integer-right-triangles.md
new file mode 100644
index 00000000000..40ab4fb3e00
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-75-singular-integer-right-triangles.md
@@ -0,0 +1,117 @@
+---
+id: 5900f3b71000cf542c50feca
+title: 'Problem 75: Singular integer right triangles'
+challengeType: 1
+forumTopicId: 302188
+dashedName: problem-75-singular-integer-right-triangles
+---
+
+# --description--
+
+It turns out that 12 cm is the smallest length of wire that can be bent to form an integer sided right angle triangle in exactly one way, but there are many more examples.
+
+<div style='margin-left: 4em;'>
+  <strong>12 cm:</strong> (3,4,5)<br>
+  <strong>24 cm:</strong> (6,8,10)<br>
+  <strong>30 cm:</strong> (5,12,13)<br>
+  <strong>36 cm:</strong> (9,12,15)<br>
+  <strong>40 cm:</strong> (8,15,17)<br>
+  <strong>48 cm:</strong> (12,16,20)<br><br>
+</div>
+
+In contrast, some lengths of wire, like 20 cm, cannot be bent to form an integer sided right angle triangle, and other lengths allow more than one solution to be found; for example, using 120 cm it is possible to form exactly three different integer sided right angle triangles.
+
+<div style='margin-left: 4em;'>
+  <strong>120 cm:</strong> (30,40,50), (20,48,52), (24,45,51)<br><br>
+</div>
+
+Given that L is the length of the wire, for how many values of L ≤ `n` can exactly one, integer sided right angle, triangle be formed?
+
+# --hints--
+
+`singularIntRightTriangles(48)` should return a number.
+
+```js
+assert(typeof singularIntRightTriangles(48) === 'number');
+```
+
+`singularIntRightTriangles(48)` should return `6`.
+
+```js
+assert.strictEqual(singularIntRightTriangles(48), 6);
+```
+
+`singularIntRightTriangles(700000)` should return `75783`.
+
+```js
+assert.strictEqual(singularIntRightTriangles(700000), 75783);
+```
+
+`singularIntRightTriangles(1000000)` should return `107876`.
+
+```js
+assert.strictEqual(singularIntRightTriangles(1000000), 107876);
+```
+
+`singularIntRightTriangles(1500000)` should return `161667`.
+
+```js
+assert.strictEqual(singularIntRightTriangles(1500000), 161667);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function singularIntRightTriangles(n) {
+
+  return true;
+}
+
+singularIntRightTriangles(48);
+```
+
+# --solutions--
+
+```js
+function singularIntRightTriangles(limit) {
+  function euclidFormula(m, n) {
+    return [m ** 2 - n ** 2, 2 * m * n, m ** 2 + n ** 2];
+  }
+
+  function gcd(numberA, numberB) {
+    if (numberB === 0) {
+      return numberA;
+    }
+    return gcd(numberB, numberA % numberB);
+  }
+
+  function notBothOdd(numberA, numberB) {
+    return (numberA + numberB) % 2 === 1;
+  }
+
+  function areCoprime(numberA, numberB) {
+    return gcd(numberA, numberB) === 1;
+  }
+
+  const trianglesWithPerimeter = new Array(limit + 1).fill(0);
+  const mLimit = Math.sqrt(limit / 2);
+
+  for (let m = 2; m < mLimit; m++) {
+    for (let n = 1; n < m; n++) {
+      if (notBothOdd(m, n) && areCoprime(m, n)) {
+        const [sideA, sideB, sideC] = euclidFormula(m, n);
+        const perimeter = sideA + sideB + sideC;
+        let curPerimeter = perimeter;
+        while (curPerimeter <= limit) {
+          trianglesWithPerimeter[curPerimeter]++;
+          curPerimeter += perimeter;
+        }
+      }
+    }
+  }
+  return trianglesWithPerimeter.filter(trianglesCount => trianglesCount === 1)
+    .length;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-76-counting-summations.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-76-counting-summations.md
new file mode 100644
index 00000000000..04a358b584d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-76-counting-summations.md
@@ -0,0 +1,83 @@
+---
+id: 5900f3b81000cf542c50fecb
+title: 'Problem 76: Counting summations'
+challengeType: 1
+forumTopicId: 302189
+dashedName: problem-76-counting-summations
+---
+
+# --description--
+
+It is possible to write five as a sum in exactly six different ways:
+
+<div style='margin-left: 4em;'>
+  4 + 1<br>
+  3 + 2<br>
+  3 + 1 + 1<br>
+  2 + 2 + 1<br>
+  2 + 1 + 1 + 1<br>
+  1 + 1 + 1 + 1 + 1<br><br>
+</div>
+
+How many different ways can `n` be written as a sum of at least two positive integers?
+
+# --hints--
+
+`countingSummations(5)` should return a number.
+
+```js
+assert(typeof countingSummations(5) === 'number');
+```
+
+`countingSummations(5)` should return `6`.
+
+```js
+assert.strictEqual(countingSummations(5), 6);
+```
+
+`countingSummations(20)` should return `626`.
+
+```js
+assert.strictEqual(countingSummations(20), 626);
+```
+
+`countingSummations(50)` should return `204225`.
+
+```js
+assert.strictEqual(countingSummations(50), 204225);
+```
+
+`countingSummations(100)` should return `190569291`.
+
+```js
+assert.strictEqual(countingSummations(100), 190569291);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countingSummations(n) {
+
+  return true;
+}
+
+countingSummations(5);
+```
+
+# --solutions--
+
+```js
+function countingSummations(n) {
+  const combinations = new Array(n + 1).fill(0);
+  combinations[0] = 1;
+
+  for (let i = 1; i < n; i++) {
+    for (let j = i; j < n + 1; j++) {
+      combinations[j] += combinations[j - i];
+    }
+  }
+  return combinations[n];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-77-prime-summations.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-77-prime-summations.md
new file mode 100644
index 00000000000..a5639dc73a4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-77-prime-summations.md
@@ -0,0 +1,110 @@
+---
+id: 5900f3b91000cf542c50fecc
+title: 'Problem 77: Prime summations'
+challengeType: 1
+forumTopicId: 302190
+dashedName: problem-77-prime-summations
+---
+
+# --description--
+
+It is possible to write ten as the sum of primes in exactly five different ways:
+
+<div style='margin-left: 4em;'>
+  7 + 3<br>
+  5 + 5<br>
+  5 + 3 + 2<br>
+  3 + 3 + 2 + 2<br>
+  2 + 2 + 2 + 2 + 2<br><br>
+</div>
+
+What is the first value which can be written as the sum of primes in over `n` ways?
+
+# --hints--
+
+`primeSummations(5)` should return a number.
+
+```js
+assert(typeof primeSummations(5) === 'number');
+```
+
+`primeSummations(5)` should return `11`.
+
+```js
+assert.strictEqual(primeSummations(5), 11);
+```
+
+`primeSummations(100)` should return `31`.
+
+```js
+assert.strictEqual(primeSummations(100), 31);
+```
+
+`primeSummations(1000)` should return `53`.
+
+```js
+assert.strictEqual(primeSummations(1000), 53);
+```
+
+`primeSummations(5000)` should return `71`.
+
+```js
+assert.strictEqual(primeSummations(5000), 71);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeSummations(n) {
+
+  return true;
+}
+
+primeSummations(5);
+```
+
+# --solutions--
+
+```js
+function primeSummations(n) {
+  function getSievePrimes(max) {
+    const primesMap = new Array(max).fill(true);
+    primesMap[0] = false;
+    primesMap[1] = false;
+    const primes = [];
+
+    for (let i = 2; i < max; i += 2) {
+      if (primesMap[i]) {
+        primes.push(i);
+        for (let j = i * i; j < max; j += i) {
+          primesMap[j] = false;
+        }
+      }
+      if (i === 2) {
+        i = 1;
+      }
+    }
+    return primes;
+  }
+
+  const MAX_NUMBER = 100;
+  const primes = getSievePrimes(MAX_NUMBER);
+
+  for (let curNumber = 2; curNumber < MAX_NUMBER; curNumber++) {
+    const combinations = new Array(curNumber + 1).fill(0);
+    combinations[0] = 1;
+    for (let i = 0; i < primes.length; i++) {
+      for (let j = primes[i]; j <= curNumber; j++) {
+        combinations[j] += combinations[j - primes[i]];
+      }
+    }
+    if (combinations[curNumber] > n) {
+      return curNumber;
+    }
+  }
+
+  return false;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-78-coin-partitions.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-78-coin-partitions.md
new file mode 100644
index 00000000000..65d3ebad7e4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-78-coin-partitions.md
@@ -0,0 +1,103 @@
+---
+id: 5900f3ba1000cf542c50fecd
+title: 'Problem 78: Coin partitions'
+challengeType: 1
+forumTopicId: 302191
+dashedName: problem-78-coin-partitions
+---
+
+# --description--
+
+Let ${p}(n)$ represent the number of different ways in which `n` coins can be separated into piles. For example, five coins can be separated into piles in exactly seven different ways, so ${p}(5) = 7$.
+
+<div style='text-align: center;'>
+
+| Coin piles        |
+| ----------------- |
+| OOOOO             |
+| OOOO   O          |
+| OOO   OO          |
+| OOO   O   O       |
+| OO   OO   O       |
+| OO   O   O   O    |
+| O   O   O   O   O |
+
+</div><br>
+
+Find the least value of `n` for which ${p}(n)$ is divisible by `divisor`.
+
+# --hints--
+
+`coinPartitions(7)` should return a number.
+
+```js
+assert(typeof coinPartitions(7) === 'number');
+```
+
+`coinPartitions(7)` should return `5`.
+
+```js
+assert.strictEqual(coinPartitions(7), 5);
+```
+
+`coinPartitions(10000)` should return `599`.
+
+```js
+assert.strictEqual(coinPartitions(10000), 599);
+```
+
+`coinPartitions(100000)` should return `11224`.
+
+```js
+assert.strictEqual(coinPartitions(100000), 11224);
+```
+
+`coinPartitions(1000000)` should return `55374`.
+
+```js
+assert.strictEqual(coinPartitions(1000000), 55374);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function coinPartitions(divisor) {
+
+  return true;
+}
+
+coinPartitions(7);
+```
+
+# --solutions--
+
+```js
+function coinPartitions(divisor) {
+  const partitions = [1];
+
+  let n = 0;
+  while (partitions[n] !== 0) {
+    n++;
+    partitions.push(0);
+
+    let i = 0;
+    let pentagonal = 1;
+    while (pentagonal <= n) {
+      const sign = i % 4 > 1 ? -1 : 1;
+      partitions[n] += sign * partitions[n - pentagonal];
+      partitions[n] = partitions[n] % divisor;
+
+      i++;
+
+      let k = Math.floor(i / 2) + 1;
+      if (i % 2 !== 0) {
+        k *= -1;
+      }
+      pentagonal = Math.floor((k * (3 * k - 1)) / 2);
+    }
+  }
+  return n;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-79-passcode-derivation.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-79-passcode-derivation.md
new file mode 100644
index 00000000000..a17babe3520
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-79-passcode-derivation.md
@@ -0,0 +1,115 @@
+---
+id: 5900f3bb1000cf542c50fece
+title: 'Problem 79: Passcode derivation'
+challengeType: 1
+forumTopicId: 302192
+dashedName: problem-79-passcode-derivation
+---
+
+# --description--
+
+A common security method used for online banking is to ask the user for three random characters from a passcode. For example, if the passcode was `531278`, they may ask for the 2nd, 3rd, and 5th characters; the expected reply would be: `317`.
+
+The arrays, `keylog1`, `keylog2`, and `keylog3`, contains fifty successful login attempts.
+
+Given that the three characters are always asked for in order, analyze the array so as to determine the shortest possible secret passcode of unknown length.
+
+# --hints--
+
+`passcodeDerivation(keylog1)` should return a number.
+
+```js
+assert(typeof passcodeDerivation(_keylog1) === 'number');
+```
+
+`passcodeDerivation(keylog1)` should return `531278`.
+
+```js
+assert.strictEqual(passcodeDerivation(_keylog1), 531278);
+```
+
+`passcodeDerivation(keylog2)` should return `1230567`.
+
+```js
+assert.strictEqual(passcodeDerivation(_keylog2), 1230567);
+```
+
+`passcodeDerivation(keylog3)` should return `73162890`.
+
+```js
+assert.strictEqual(passcodeDerivation(_keylog3), 73162890);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _keylog1 = [
+  127,327,178,528,537,538,532,328,127,178,537,127,317,328,512,278,328,327,178,327,578,317,527,178,128,328,517,312,531,128,128,317,527,312,328,532,512,518,317,127,537,528,537,527,327,278,532,128, 318,517
+];
+const _keylog2 = [
+  305,367,256,123,357,120,125,307,236,256,356,267,357,256,356,136,257,107,126,567,567,105,120,237,367,120,367,135,207,167,367,367,307,125,120,130,367,230,106,356,126,106,130,123,307,127,306,167,136,126
+];
+const _keylog3 = [
+  319,680,180,690,129,620,762,689,762,318,368,710,720,710,629,168,160,689,716,731,736,729,316,729,729,710,769,290,719,680,318,389,162,289,162,718,729,319,790,680,890,362,319,760,316,729,380,319,728,716,
+];
+```
+
+## --seed-contents--
+
+```js
+function passcodeDerivation(arr) {
+
+  return true;
+}
+
+// Only change code above this line
+
+const keylog1 = [
+  319,680,180,690,129,620,762,689,762,318,368,710,720,710,629,168,160,689,716,731,736,729,316,729,729,710,769,290,719,680,318,389,162,289,162,718,729,319,790,680,890,362,319,760,316,729,380,319,728,716,
+];
+
+passcodeDerivation(keylog1);
+```
+
+# --solutions--
+
+```js
+function passcodeDerivation(arr) {
+  const numbersInPasscode = [];
+  const relativePositions = new Array(10)
+    .fill()
+    .map(() => new Array(10).fill(0));
+
+  for (let i = 0; i < arr.length; i++) {
+    const curAttempt = arr[i]
+      .toString()
+      .split('')
+      .map(key => parseInt(key, 10));
+    for (let j = 0; j < curAttempt.length; j++) {
+      if (numbersInPasscode.indexOf(curAttempt[j]) === -1) {
+        numbersInPasscode.push(curAttempt[j]);
+      }
+      for (let k = j + 1; k < curAttempt.length; k++) {
+        relativePositions[curAttempt[j]][curAttempt[k]] += 1;
+      }
+    }
+  }
+
+  const ranks = {};
+  for (let i = 0; i < numbersInPasscode.length; i++) {
+    const curNumber = numbersInPasscode[i];
+    ranks[curNumber] = relativePositions[curNumber].filter(
+      count => count > 0
+    ).length;
+  }
+
+  const passcode = numbersInPasscode
+    .sort((i, j) => ranks[i] - ranks[j])
+    .reverse()
+    .join('');
+
+  return parseInt(passcode, 10);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-8-largest-product-in-a-series.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-8-largest-product-in-a-series.md
new file mode 100644
index 00000000000..c84d410e207
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-8-largest-product-in-a-series.md
@@ -0,0 +1,92 @@
+---
+id: 5900f3741000cf542c50fe87
+title: 'Problem 8: Largest product in a series'
+challengeType: 1
+forumTopicId: 302193
+dashedName: problem-8-largest-product-in-a-series
+---
+
+# --description--
+
+The four adjacent digits in the 1000-digit number that have the greatest product are 9 × 9 × 8 × 9 = 5832.
+
+<div style='text-align: center;'>73167176531330624919225119674426574742355349194934</div>
+<div style='text-align: center;'>96983520312774506326239578318016984801869478851843</div>
+<div style='text-align: center;'>85861560789112949495459501737958331952853208805511</div>
+<div style='text-align: center;'>12540698747158523863050715693290963295227443043557</div>
+<div style='text-align: center;'>66896648950445244523161731856403098711121722383113</div>
+<div style='text-align: center;'>62229893423380308135336276614282806444486645238749</div>
+<div style='text-align: center;'>30358907296290491560440772390713810515859307960866</div>
+<div style='text-align: center;'>70172427121883998797908792274921901699720888093776</div>
+<div style='text-align: center;'>65727333001053367881220235421809751254540594752243</div>
+<div style='text-align: center;'>52584907711670556013604839586446706324415722155397</div>
+<div style='text-align: center;'>53697817977846174064955149290862569321978468622482</div>
+<div style='text-align: center;'>83972241375657056057490261407972968652414535100474</div>
+<div style='text-align: center;'>82166370484403199890008895243450658541227588666881</div>
+<div style='text-align: center;'>16427171479924442928230863465674813919123162824586</div>
+<div style='text-align: center;'>17866458359124566529476545682848912883142607690042</div>
+<div style='text-align: center;'>24219022671055626321111109370544217506941658960408</div>
+<div style='text-align: center;'>07198403850962455444362981230987879927244284909188</div>
+<div style='text-align: center;'>84580156166097919133875499200524063689912560717606</div>
+<div style='text-align: center;'>05886116467109405077541002256983155200055935729725</div>
+<div style='text-align: center;'>71636269561882670428252483600823257530420752963450</div>
+
+Find the `n` adjacent digits in the 1000-digit number that have the greatest product. What is the value of this product?
+
+# --hints--
+
+`largestProductinaSeries(4)` should return a number.
+
+```js
+assert(typeof largestProductinaSeries(4) === 'number');
+```
+
+`largestProductinaSeries(4)` should return 5832.
+
+```js
+assert.strictEqual(largestProductinaSeries(4), 5832);
+```
+
+`largestProductinaSeries(13)` should return 23514624000.
+
+```js
+assert.strictEqual(largestProductinaSeries(13), 23514624000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function largestProductinaSeries(n) {
+
+  let thousandDigits = [7,3,1,6,7,1,7,6,5,3,1,3,3,0,6,2,4,9,1,9,2,2,5,1,1,9,6,7,4,4,2,6,5,7,4,7,4,2,3,5,5,3,4,9,1,9,4,9,3,4,9,6,9,8,3,5,2,0,3,1,2,7,7,4,5,0,6,3,2,6,2,3,9,5,7,8,3,1,8,0,1,6,9,8,4,8,0,1,8,6,9,4,7,8,8,5,1,8,4,3,8,5,8,6,1,5,6,0,7,8,9,1,1,2,9,4,9,4,9,5,4,5,9,5,0,1,7,3,7,9,5,8,3,3,1,9,5,2,8,5,3,2,0,8,8,0,5,5,1,1,1,2,5,4,0,6,9,8,7,4,7,1,5,8,5,2,3,8,6,3,0,5,0,7,1,5,6,9,3,2,9,0,9,6,3,2,9,5,2,2,7,4,4,3,0,4,3,5,5,7,6,6,8,9,6,6,4,8,9,5,0,4,4,5,2,4,4,5,2,3,1,6,1,7,3,1,8,5,6,4,0,3,0,9,8,7,1,1,1,2,1,7,2,2,3,8,3,1,1,3,6,2,2,2,9,8,9,3,4,2,3,3,8,0,3,0,8,1,3,5,3,3,6,2,7,6,6,1,4,2,8,2,8,0,6,4,4,4,4,8,6,6,4,5,2,3,8,7,4,9,3,0,3,5,8,9,0,7,2,9,6,2,9,0,4,9,1,5,6,0,4,4,0,7,7,2,3,9,0,7,1,3,8,1,0,5,1,5,8,5,9,3,0,7,9,6,0,8,6,6,7,0,1,7,2,4,2,7,1,2,1,8,8,3,9,9,8,7,9,7,9,0,8,7,9,2,2,7,4,9,2,1,9,0,1,6,9,9,7,2,0,8,8,8,0,9,3,7,7,6,6,5,7,2,7,3,3,3,0,0,1,0,5,3,3,6,7,8,8,1,2,2,0,2,3,5,4,2,1,8,0,9,7,5,1,2,5,4,5,4,0,5,9,4,7,5,2,2,4,3,5,2,5,8,4,9,0,7,7,1,1,6,7,0,5,5,6,0,1,3,6,0,4,8,3,9,5,8,6,4,4,6,7,0,6,3,2,4,4,1,5,7,2,2,1,5,5,3,9,7,5,3,6,9,7,8,1,7,9,7,7,8,4,6,1,7,4,0,6,4,9,5,5,1,4,9,2,9,0,8,6,2,5,6,9,3,2,1,9,7,8,4,6,8,6,2,2,4,8,2,8,3,9,7,2,2,4,1,3,7,5,6,5,7,0,5,6,0,5,7,4,9,0,2,6,1,4,0,7,9,7,2,9,6,8,6,5,2,4,1,4,5,3,5,1,0,0,4,7,4,8,2,1,6,6,3,7,0,4,8,4,4,0,3,1,9,9,8,9,0,0,0,8,8,9,5,2,4,3,4,5,0,6,5,8,5,4,1,2,2,7,5,8,8,6,6,6,8,8,1,1,6,4,2,7,1,7,1,4,7,9,9,2,4,4,4,2,9,2,8,2,3,0,8,6,3,4,6,5,6,7,4,8,1,3,9,1,9,1,2,3,1,6,2,8,2,4,5,8,6,1,7,8,6,6,4,5,8,3,5,9,1,2,4,5,6,6,5,2,9,4,7,6,5,4,5,6,8,2,8,4,8,9,1,2,8,8,3,1,4,2,6,0,7,6,9,0,0,4,2,2,4,2,1,9,0,2,2,6,7,1,0,5,5,6,2,6,3,2,1,1,1,1,1,0,9,3,7,0,5,4,4,2,1,7,5,0,6,9,4,1,6,5,8,9,6,0,4,0,8,0,7,1,9,8,4,0,3,8,5,0,9,6,2,4,5,5,4,4,4,3,6,2,9,8,1,2,3,0,9,8,7,8,7,9,9,2,7,2,4,4,2,8,4,9,0,9,1,8,8,8,4,5,8,0,1,5,6,1,6,6,0,9,7,9,1,9,1,3,3,8,7,5,4,9,9,2,0,0,5,2,4,0,6,3,6,8,9,9,1,2,5,6,0,7,1,7,6,0,6,0,5,8,8,6,1,1,6,4,6,7,1,0,9,4,0,5,0,7,7,5,4,1,0,0,2,2,5,6,9,8,3,1,5,5,2,0,0,0,5,5,9,3,5,7,2,9,7,2,5,7,1,6,3,6,2,6,9,5,6,1,8,8,2,6,7,0,4,2,8,2,5,2,4,8,3,6,0,0,8,2,3,2,5,7,5,3,0,4,2,0,7,5,2,9,6,3,4,5,0];
+  return true;
+}
+
+largestProductinaSeries(13);
+```
+
+# --solutions--
+
+```js
+const largestProductinaSeries = (number)=>{
+  let thousandDigits = [7,3,1,6,7,1,7,6,5,3,1,3,3,0,6,2,4,9,1,9,2,2,5,1,1,9,6,7,4,4,2,6,5,7,4,7,4,2,3,5,5,3,4,9,1,9,4,9,3,4,9,6,9,8,3,5,2,0,3,1,2,7,7,4,5,0,6,3,2,6,2,3,9,5,7,8,3,1,8,0,1,6,9,8,4,8,0,1,8,6,9,4,7,8,8,5,1,8,4,3,8,5,8,6,1,5,6,0,7,8,9,1,1,2,9,4,9,4,9,5,4,5,9,5,0,1,7,3,7,9,5,8,3,3,1,9,5,2,8,5,3,2,0,8,8,0,5,5,1,1,1,2,5,4,0,6,9,8,7,4,7,1,5,8,5,2,3,8,6,3,0,5,0,7,1,5,6,9,3,2,9,0,9,6,3,2,9,5,2,2,7,4,4,3,0,4,3,5,5,7,6,6,8,9,6,6,4,8,9,5,0,4,4,5,2,4,4,5,2,3,1,6,1,7,3,1,8,5,6,4,0,3,0,9,8,7,1,1,1,2,1,7,2,2,3,8,3,1,1,3,6,2,2,2,9,8,9,3,4,2,3,3,8,0,3,0,8,1,3,5,3,3,6,2,7,6,6,1,4,2,8,2,8,0,6,4,4,4,4,8,6,6,4,5,2,3,8,7,4,9,3,0,3,5,8,9,0,7,2,9,6,2,9,0,4,9,1,5,6,0,4,4,0,7,7,2,3,9,0,7,1,3,8,1,0,5,1,5,8,5,9,3,0,7,9,6,0,8,6,6,7,0,1,7,2,4,2,7,1,2,1,8,8,3,9,9,8,7,9,7,9,0,8,7,9,2,2,7,4,9,2,1,9,0,1,6,9,9,7,2,0,8,8,8,0,9,3,7,7,6,6,5,7,2,7,3,3,3,0,0,1,0,5,3,3,6,7,8,8,1,2,2,0,2,3,5,4,2,1,8,0,9,7,5,1,2,5,4,5,4,0,5,9,4,7,5,2,2,4,3,5,2,5,8,4,9,0,7,7,1,1,6,7,0,5,5,6,0,1,3,6,0,4,8,3,9,5,8,6,4,4,6,7,0,6,3,2,4,4,1,5,7,2,2,1,5,5,3,9,7,5,3,6,9,7,8,1,7,9,7,7,8,4,6,1,7,4,0,6,4,9,5,5,1,4,9,2,9,0,8,6,2,5,6,9,3,2,1,9,7,8,4,6,8,6,2,2,4,8,2,8,3,9,7,2,2,4,1,3,7,5,6,5,7,0,5,6,0,5,7,4,9,0,2,6,1,4,0,7,9,7,2,9,6,8,6,5,2,4,1,4,5,3,5,1,0,0,4,7,4,8,2,1,6,6,3,7,0,4,8,4,4,0,3,1,9,9,8,9,0,0,0,8,8,9,5,2,4,3,4,5,0,6,5,8,5,4,1,2,2,7,5,8,8,6,6,6,8,8,1,1,6,4,2,7,1,7,1,4,7,9,9,2,4,4,4,2,9,2,8,2,3,0,8,6,3,4,6,5,6,7,4,8,1,3,9,1,9,1,2,3,1,6,2,8,2,4,5,8,6,1,7,8,6,6,4,5,8,3,5,9,1,2,4,5,6,6,5,2,9,4,7,6,5,4,5,6,8,2,8,4,8,9,1,2,8,8,3,1,4,2,6,0,7,6,9,0,0,4,2,2,4,2,1,9,0,2,2,6,7,1,0,5,5,6,2,6,3,2,1,1,1,1,1,0,9,3,7,0,5,4,4,2,1,7,5,0,6,9,4,1,6,5,8,9,6,0,4,0,8,0,7,1,9,8,4,0,3,8,5,0,9,6,2,4,5,5,4,4,4,3,6,2,9,8,1,2,3,0,9,8,7,8,7,9,9,2,7,2,4,4,2,8,4,9,0,9,1,8,8,8,4,5,8,0,1,5,6,1,6,6,0,9,7,9,1,9,1,3,3,8,7,5,4,9,9,2,0,0,5,2,4,0,6,3,6,8,9,9,1,2,5,6,0,7,1,7,6,0,6,0,5,8,8,6,1,1,6,4,6,7,1,0,9,4,0,5,0,7,7,5,4,1,0,0,2,2,5,6,9,8,3,1,5,5,2,0,0,0,5,5,9,3,5,7,2,9,7,2,5,7,1,6,3,6,2,6,9,5,6,1,8,8,2,6,7,0,4,2,8,2,5,2,4,8,3,6,0,0,8,2,3,2,5,7,5,3,0,4,2,0,7,5,2,9,6,3,4,5,0];
+ let numberOfDigits = thousandDigits.length;
+ let currentIndex = 0;
+ let productOfAdjDigits = [];
+
+  while(currentIndex<=(numberOfDigits-number)){
+   let currentAdj = thousandDigits.slice(currentIndex,currentIndex+number);
+    let isAdjDigits = false;
+
+    productOfAdjDigits.push(currentAdj.reduce((prev,cur)=>{
+     return prev*cur;
+    }));
+
+    currentIndex++;
+ }
+
+ return Math.max(...productOfAdjDigits);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-80-square-root-digital-expansion.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-80-square-root-digital-expansion.md
new file mode 100644
index 00000000000..34d7dd6eea4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-80-square-root-digital-expansion.md
@@ -0,0 +1,109 @@
+---
+id: 5900f3bc1000cf542c50fecf
+title: 'Problem 80: Square root digital expansion'
+challengeType: 1
+forumTopicId: 302194
+dashedName: problem-80-square-root-digital-expansion
+---
+
+# --description--
+
+It is well known that if the square root of a natural number is not an integer, then it is irrational. The decimal expansion of such square roots is infinite without any repeating pattern at all.
+
+The square root of two is `1.41421356237309504880...`, and the digital sum of the first one hundred decimal digits is `475`.
+
+For the first `n` natural numbers, find the total of the digital sums of the first one hundred decimal digits for all the irrational square roots.
+
+# --hints--
+
+`sqrtDigitalExpansion(2)` should return a number.
+
+```js
+assert(typeof sqrtDigitalExpansion(2) === 'number');
+```
+
+`sqrtDigitalExpansion(2)` should return `475`.
+
+```js
+assert.strictEqual(sqrtDigitalExpansion(2), 475);
+```
+
+`sqrtDigitalExpansion(50)` should return `19543`.
+
+```js
+assert.strictEqual(sqrtDigitalExpansion(50), 19543);
+```
+
+`sqrtDigitalExpansion(100)` should return `40886`.
+
+```js
+assert.strictEqual(sqrtDigitalExpansion(100), 40886);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sqrtDigitalExpansion(n) {
+
+  return true;
+}
+
+sqrtDigitalExpansion(2);
+```
+
+# --solutions--
+
+```js
+function sqrtDigitalExpansion(n) {
+  function sumDigits(number) {
+    let sum = 0;
+    while (number > 0n) {
+      let digit = number % 10n;
+      sum += parseInt(digit, 10);
+      number = number / 10n;
+    }
+    return sum;
+  }
+
+  function power(numberA, numberB) {
+    let result = 1n;
+    for (let b = 0; b < numberB; b++) {
+      result = result * BigInt(numberA);
+    }
+    return result;
+  }
+
+  // Based on http://www.afjarvis.staff.shef.ac.uk/maths/jarvisspec02.pdf
+  function expandSquareRoot(number, numDigits) {
+    let a = 5n * BigInt(number);
+    let b = 5n;
+    const boundaryWithNeededDigits = power(10, numDigits + 1);
+
+    while (b < boundaryWithNeededDigits) {
+      if (a >= b) {
+        a = a - b;
+        b = b + 10n;
+      } else {
+        a = a * 100n;
+        b = (b / 10n) * 100n + 5n;
+      }
+    }
+    return b / 100n;
+  }
+
+  let result = 0;
+  let nextPerfectRoot = 1;
+  const requiredDigits = 100;
+  for (let i = 1; i <= n; i++) {
+    if (nextPerfectRoot ** 2 === i) {
+      nextPerfectRoot++;
+      continue;
+    }
+    result += sumDigits(expandSquareRoot(i, requiredDigits));
+  }
+
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-81-path-sum-two-ways.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-81-path-sum-two-ways.md
new file mode 100644
index 00000000000..5fe3982048f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-81-path-sum-two-ways.md
@@ -0,0 +1,185 @@
+---
+id: 5900f3bd1000cf542c50fed0
+title: 'Problem 81: Path sum: two ways'
+challengeType: 1
+forumTopicId: 302195
+dashedName: problem-81-path-sum-two-ways
+---
+
+# --description--
+
+In the 5 by 5 matrix below, the minimal path sum from the top left to the bottom right, by **only moving to the right and down**, is indicated in bold red and is equal to `2427`.
+
+  $$\begin{pmatrix}   \color{red}{131} & 673 & 234 & 103 & 18\\\\
+  \color{red}{201} & \color{red}{96} & \color{red}{342} & 965 & 150\\\\   630 & 803 & \color{red}{746} & \color{red}{422} & 111\\\\
+  537 & 699 & 497 & \color{red}{121} & 956\\\\ 805 & 732 & 524 & \color{red}{37} & \color{red}{331} \end{pmatrix}$$
+
+Find the minimal path sum from the top left to the bottom right by only moving right and down in `matrix`, a 2D array representing a matrix. The maximum matrix size used in the tests will be 80 by 80.
+
+# --hints--
+
+`pathSumTwoWays(testMatrix1)` should return a number.
+
+```js
+assert(typeof pathSumTwoWays(_testMatrix1) === 'number');
+```
+
+`pathSumTwoWays(testMatrix1)` should return `2427`.
+
+```js
+assert.strictEqual(pathSumTwoWays(_testMatrix1), 2427);
+```
+
+`pathSumTwoWays(testMatrix2)` should return `427337`.
+
+```js
+assert.strictEqual(pathSumTwoWays(_testMatrix2), 427337);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testMatrix1 = [
+  [131, 673, 234, 103, 18],
+  [201, 96, 342, 965, 150],
+  [630, 803, 746, 422, 111],
+  [537, 699, 497, 121, 956],
+  [805, 732, 524, 37, 331]
+];
+const _testMatrix2 = [
+  [4445,2697,5115,718,2209,2212,654,4348,3079,6821,7668,3276,8874,4190,3785,2752,9473,7817,9137,496,7338,3434,7152,4355,4552,7917,7827,2460,2350,691,3514,5880,3145,7633,7199,3783,5066,7487,3285,1084,8985,760,872,8609,8051,1134,9536,5750,9716,9371,7619,5617,275,9721,2997,2698,1887,8825,6372,3014,2113,7122,7050,6775,5948,2758,1219,3539,348,7989,2735,9862,1263,8089,6401,9462,3168,2758,3748,5870],
+  [1096,20,1318,7586,5167,2642,1443,5741,7621,7030,5526,4244,2348,4641,9827,2448,6918,5883,3737,300,7116,6531,567,5997,3971,6623,820,6148,3287,1874,7981,8424,7672,7575,6797,6717,1078,5008,4051,8795,5820,346,1851,6463,2117,6058,3407,8211,117,4822,1317,4377,4434,5925,8341,4800,1175,4173,690,8978,7470,1295,3799,8724,3509,9849,618,3320,7068,9633,2384,7175,544,6583,1908,9983,481,4187,9353,9377],
+  [9607,7385,521,6084,1364,8983,7623,1585,6935,8551,2574,8267,4781,3834,2764,2084,2669,4656,9343,7709,2203,9328,8004,6192,5856,3555,2260,5118,6504,1839,9227,1259,9451,1388,7909,5733,6968,8519,9973,1663,5315,7571,3035,4325,4283,2304,6438,3815,9213,9806,9536,196,5542,6907,2475,1159,5820,9075,9470,2179,9248,1828,4592,9167,3713,4640,47,3637,309,7344,6955,346,378,9044,8635,7466,5036,9515,6385,9230],
+  [7206,3114,7760,1094,6150,5182,7358,7387,4497,955,101,1478,7777,6966,7010,8417,6453,4955,3496,107,449,8271,131,2948,6185,784,5937,8001,6104,8282,4165,3642,710,2390,575,715,3089,6964,4217,192,5949,7006,715,3328,1152,66,8044,4319,1735,146,4818,5456,6451,4113,1063,4781,6799,602,1504,6245,6550,1417,1343,2363,3785,5448,4545,9371,5420,5068,4613,4882,4241,5043,7873,8042,8434,3939,9256,2187],
+  [3620,8024,577,9997,7377,7682,1314,1158,6282,6310,1896,2509,5436,1732,9480,706,496,101,6232,7375,2207,2306,110,6772,3433,2878,8140,5933,8688,1399,2210,7332,6172,6403,7333,4044,2291,1790,2446,7390,8698,5723,3678,7104,1825,2040,140,3982,4905,4160,2200,5041,2512,1488,2268,1175,7588,8321,8078,7312,977,5257,8465,5068,3453,3096,1651,7906,253,9250,6021,8791,8109,6651,3412,345,4778,5152,4883,7505],
+  [1074,5438,9008,2679,5397,5429,2652,3403,770,9188,4248,2493,4361,8327,9587,707,9525,5913,93,1899,328,2876,3604,673,8576,6908,7659,2544,3359,3883,5273,6587,3065,1749,3223,604,9925,6941,2823,8767,7039,3290,3214,1787,7904,3421,7137,9560,8451,2669,9219,6332,1576,5477,6755,8348,4164,4307,2984,4012,6629,1044,2874,6541,4942,903,1404,9125,5160,8836,4345,2581,460,8438,1538,5507,668,3352,2678,6942],
+  [4295,1176,5596,1521,3061,9868,7037,7129,8933,6659,5947,5063,3653,9447,9245,2679,767,714,116,8558,163,3927,8779,158,5093,2447,5782,3967,1716,931,7772,8164,1117,9244,5783,7776,3846,8862,6014,2330,6947,1777,3112,6008,3491,1906,5952,314,4602,8994,5919,9214,3995,5026,7688,6809,5003,3128,2509,7477,110,8971,3982,8539,2980,4689,6343,5411,2992,5270,5247,9260,2269,7474,1042,7162,5206,1232,4556,4757],
+  [510,3556,5377,1406,5721,4946,2635,7847,4251,8293,8281,6351,4912,287,2870,3380,3948,5322,3840,4738,9563,1906,6298,3234,8959,1562,6297,8835,7861,239,6618,1322,2553,2213,5053,5446,4402,6500,5182,8585,6900,5756,9661,903,5186,7687,5998,7997,8081,8955,4835,6069,2621,1581,732,9564,1082,1853,5442,1342,520,1737,3703,5321,4793,2776,1508,1647,9101,2499,6891,4336,7012,3329,3212,1442,9993,3988,4930,7706],
+  [9444,3401,5891,9716,1228,7107,109,3563,2700,6161,5039,4992,2242,8541,7372,2067,1294,3058,1306,320,8881,5756,9326,411,8650,8824,5495,8282,8397,2000,1228,7817,2099,6473,3571,5994,4447,1299,5991,543,7874,2297,1651,101,2093,3463,9189,6872,6118,872,1008,1779,2805,9084,4048,2123,5877,55,3075,1737,9459,4535,6453,3644,108,5982,4437,5213,1340,6967,9943,5815,669,8074,1838,6979,9132,9315,715,5048],
+  [3327,4030,7177,6336,9933,5296,2621,4785,2755,4832,2512,2118,2244,4407,2170,499,7532,9742,5051,7687,970,6924,3527,4694,5145,1306,2165,5940,2425,8910,3513,1909,6983,346,6377,4304,9330,7203,6605,3709,3346,970,369,9737,5811,4427,9939,3693,8436,5566,1977,3728,2399,3985,8303,2492,5366,9802,9193,7296,1033,5060,9144,2766,1151,7629,5169,5995,58,7619,7565,4208,1713,6279,3209,4908,9224,7409,1325,8540],
+  [6882,1265,1775,3648,4690,959,5837,4520,5394,1378,9485,1360,4018,578,9174,2932,9890,3696,116,1723,1178,9355,7063,1594,1918,8574,7594,7942,1547,6166,7888,354,6932,4651,1010,7759,6905,661,7689,6092,9292,3845,9605,8443,443,8275,5163,7720,7265,6356,7779,1798,1754,5225,6661,1180,8024,5666,88,9153,1840,3508,1193,4445,2648,3538,6243,6375,8107,5902,5423,2520,1122,5015,6113,8859,9370,966,8673,2442],
+  [7338,3423,4723,6533,848,8041,7921,8277,4094,5368,7252,8852,9166,2250,2801,6125,8093,5738,4038,9808,7359,9494,601,9116,4946,2702,5573,2921,9862,1462,1269,2410,4171,2709,7508,6241,7522,615,2407,8200,4189,5492,5649,7353,2590,5203,4274,710,7329,9063,956,8371,3722,4253,4785,1194,4828,4717,4548,940,983,2575,4511,2938,1827,2027,2700,1236,841,5760,1680,6260,2373,3851,1841,4968,1172,5179,7175,3509],
+  [4420,1327,3560,2376,6260,2988,9537,4064,4829,8872,9598,3228,1792,7118,9962,9336,4368,9189,6857,1829,9863,6287,7303,7769,2707,8257,2391,2009,3975,4993,3068,9835,3427,341,8412,2134,4034,8511,6421,3041,9012,2983,7289,100,1355,7904,9186,6920,5856,2008,6545,8331,3655,5011,839,8041,9255,6524,3862,8788,62,7455,3513,5003,8413,3918,2076,7960,6108,3638,6999,3436,1441,4858,4181,1866,8731,7745,3744,1000],
+  [356,8296,8325,1058,1277,4743,3850,2388,6079,6462,2815,5620,8495,5378,75,4324,3441,9870,1113,165,1544,1179,2834,562,6176,2313,6836,8839,2986,9454,5199,6888,1927,5866,8760,320,1792,8296,7898,6121,7241,5886,5814,2815,8336,1576,4314,3109,2572,6011,2086,9061,9403,3947,5487,9731,7281,3159,1819,1334,3181,5844,5114,9898,4634,2531,4412,6430,4262,8482,4546,4555,6804,2607,9421,686,8649,8860,7794,6672],
+  [9870,152,1558,4963,8750,4754,6521,6256,8818,5208,5691,9659,8377,9725,5050,5343,2539,6101,1844,9700,7750,8114,5357,3001,8830,4438,199,9545,8496,43,2078,327,9397,106,6090,8181,8646,6414,7499,5450,4850,6273,5014,4131,7639,3913,6571,8534,9703,4391,7618,445,1320,5,1894,6771,7383,9191,4708,9706,6939,7937,8726,9382,5216,3685,2247,9029,8154,1738,9984,2626,9438,4167,6351,5060,29,1218,1239,4785],
+  [192,5213,8297,8974,4032,6966,5717,1179,6523,4679,9513,1481,3041,5355,9303,9154,1389,8702,6589,7818,6336,3539,5538,3094,6646,6702,6266,2759,4608,4452,617,9406,8064,6379,444,5602,4950,1810,8391,1536,316,8714,1178,5182,5863,5110,5372,4954,1978,2971,5680,4863,2255,4630,5723,2168,538,1692,1319,7540,440,6430,6266,7712,7385,5702,620,641,3136,7350,1478,3155,2820,9109,6261,1122,4470,14,8493,2095],
+  [1046,4301,6082,474,4974,7822,2102,5161,5172,6946,8074,9716,6586,9962,9749,5015,2217,995,5388,4402,7652,6399,6539,1349,8101,3677,1328,9612,7922,2879,231,5887,2655,508,4357,4964,3554,5930,6236,7384,4614,280,3093,9600,2110,7863,2631,6626,6620,68,1311,7198,7561,1768,5139,1431,221,230,2940,968,5283,6517,2146,1646,869,9402,7068,8645,7058,1765,9690,4152,2926,9504,2939,7504,6074,2944,6470,7859],
+  [4659,736,4951,9344,1927,6271,8837,8711,3241,6579,7660,5499,5616,3743,5801,4682,9748,8796,779,1833,4549,8138,4026,775,4170,2432,4174,3741,7540,8017,2833,4027,396,811,2871,1150,9809,2719,9199,8504,1224,540,2051,3519,7982,7367,2761,308,3358,6505,2050,4836,5090,7864,805,2566,2409,6876,3361,8622,5572,5895,3280,441,7893,8105,1634,2929,274,3926,7786,6123,8233,9921,2674,5340,1445,203,4585,3837],
+  [5759,338,7444,7968,7742,3755,1591,4839,1705,650,7061,2461,9230,9391,9373,2413,1213,431,7801,4994,2380,2703,6161,6878,8331,2538,6093,1275,5065,5062,2839,582,1014,8109,3525,1544,1569,8622,7944,2905,6120,1564,1839,5570,7579,1318,2677,5257,4418,5601,7935,7656,5192,1864,5886,6083,5580,6202,8869,1636,7907,4759,9082,5854,3185,7631,6854,5872,5632,5280,1431,2077,9717,7431,4256,8261,9680,4487,4752,4286],
+  [1571,1428,8599,1230,7772,4221,8523,9049,4042,8726,7567,6736,9033,2104,4879,4967,6334,6716,3994,1269,8995,6539,3610,7667,6560,6065,874,848,4597,1711,7161,4811,6734,5723,6356,6026,9183,2586,5636,1092,7779,7923,8747,6887,7505,9909,1792,3233,4526,3176,1508,8043,720,5212,6046,4988,709,5277,8256,3642,1391,5803,1468,2145,3970,6301,7767,2359,8487,9771,8785,7520,856,1605,8972,2402,2386,991,1383,5963],
+  [1822,4824,5957,6511,9868,4113,301,9353,6228,2881,2966,6956,9124,9574,9233,1601,7340,973,9396,540,4747,8590,9535,3650,7333,7583,4806,3593,2738,8157,5215,8472,2284,9473,3906,6982,5505,6053,7936,6074,7179,6688,1564,1103,6860,5839,2022,8490,910,7551,7805,881,7024,1855,9448,4790,1274,3672,2810,774,7623,4223,4850,6071,9975,4935,1915,9771,6690,3846,517,463,7624,4511,614,6394,3661,7409,1395,8127],
+  [8738,3850,9555,3695,4383,2378,87,6256,6740,7682,9546,4255,6105,2000,1851,4073,8957,9022,6547,5189,2487,303,9602,7833,1628,4163,6678,3144,8589,7096,8913,5823,4890,7679,1212,9294,5884,2972,3012,3359,7794,7428,1579,4350,7246,4301,7779,7790,3294,9547,4367,3549,1958,8237,6758,3497,3250,3456,6318,1663,708,7714,6143,6890,3428,6853,9334,7992,591,6449,9786,1412,8500,722,5468,1371,108,3939,4199,2535],
+  [7047,4323,1934,5163,4166,461,3544,2767,6554,203,6098,2265,9078,2075,4644,6641,8412,9183,487,101,7566,5622,1975,5726,2920,5374,7779,5631,3753,3725,2672,3621,4280,1162,5812,345,8173,9785,1525,955,5603,2215,2580,5261,2765,2990,5979,389,3907,2484,1232,5933,5871,3304,1138,1616,5114,9199,5072,7442,7245,6472,4760,6359,9053,7876,2564,9404,3043,9026,2261,3374,4460,7306,2326,966,828,3274,1712,3446],
+  [3975,4565,8131,5800,4570,2306,8838,4392,9147,11,3911,7118,9645,4994,2028,6062,5431,2279,8752,2658,7836,994,7316,5336,7185,3289,1898,9689,2331,5737,3403,1124,2679,3241,7748,16,2724,5441,6640,9368,9081,5618,858,4969,17,2103,6035,8043,7475,2181,939,415,1617,8500,8253,2155,7843,7974,7859,1746,6336,3193,2617,8736,4079,6324,6645,8891,9396,5522,6103,1857,8979,3835,2475,1310,7422,610,8345,7615],
+  [9248,5397,5686,2988,3446,4359,6634,9141,497,9176,6773,7448,1907,8454,916,1596,2241,1626,1384,2741,3649,5362,8791,7170,2903,2475,5325,6451,924,3328,522,90,4813,9737,9557,691,2388,1383,4021,1609,9206,4707,5200,7107,8104,4333,9860,5013,1224,6959,8527,1877,4545,7772,6268,621,4915,9349,5970,706,9583,3071,4127,780,8231,3017,9114,3836,7503,2383,1977,4870,8035,2379,9704,1037,3992,3642,1016,4303],
+  [5093,138,4639,6609,1146,5565,95,7521,9077,2272,974,4388,2465,2650,722,4998,3567,3047,921,2736,7855,173,2065,4238,1048,5,6847,9548,8632,9194,5942,4777,7910,8971,6279,7253,2516,1555,1833,3184,9453,9053,6897,7808,8629,4877,1871,8055,4881,7639,1537,7701,2508,7564,5845,5023,2304,5396,3193,2955,1088,3801,6203,1748,3737,1276,13,4120,7715,8552,3047,2921,106,7508,304,1280,7140,2567,9135,5266],
+  [6237,4607,7527,9047,522,7371,4883,2540,5867,6366,5301,1570,421,276,3361,527,6637,4861,2401,7522,5808,9371,5298,2045,5096,5447,7755,5115,7060,8529,4078,1943,1697,1764,5453,7085,960,2405,739,2100,5800,728,9737,5704,5693,1431,8979,6428,673,7540,6,7773,5857,6823,150,5869,8486,684,5816,9626,7451,5579,8260,3397,5322,6920,1879,2127,2884,5478,4977,9016,6165,6292,3062,5671,5968,78,4619,4763],
+  [9905,7127,9390,5185,6923,3721,9164,9705,4341,1031,1046,5127,7376,6528,3248,4941,1178,7889,3364,4486,5358,9402,9158,8600,1025,874,1839,1783,309,9030,1843,845,8398,1433,7118,70,8071,2877,3904,8866,6722,4299,10,1929,5897,4188,600,1889,3325,2485,6473,4474,7444,6992,4846,6166,4441,2283,2629,4352,7775,1101,2214,9985,215,8270,9750,2740,8361,7103,5930,8664,9690,8302,9267,344,2077,1372,1880,9550],
+  [5825,8517,7769,2405,8204,1060,3603,7025,478,8334,1997,3692,7433,9101,7294,7498,9415,5452,3850,3508,6857,9213,6807,4412,7310,854,5384,686,4978,892,8651,3241,2743,3801,3813,8588,6701,4416,6990,6490,3197,6838,6503,114,8343,5844,8646,8694,65,791,5979,2687,2621,2019,8097,1423,3644,9764,4921,3266,3662,5561,2476,8271,8138,6147,1168,3340,1998,9874,6572,9873,6659,5609,2711,3931,9567,4143,7833,8887],
+  [6223,2099,2700,589,4716,8333,1362,5007,2753,2848,4441,8397,7192,8191,4916,9955,6076,3370,6396,6971,3156,248,3911,2488,4930,2458,7183,5455,170,6809,6417,3390,1956,7188,577,7526,2203,968,8164,479,8699,7915,507,6393,4632,1597,7534,3604,618,3280,6061,9793,9238,8347,568,9645,2070,5198,6482,5000,9212,6655,5961,7513,1323,3872,6170,3812,4146,2736,67,3151,5548,2781,9679,7564,5043,8587,1893,4531],
+  [5826,3690,6724,2121,9308,6986,8106,6659,2142,1642,7170,2877,5757,6494,8026,6571,8387,9961,6043,9758,9607,6450,8631,8334,7359,5256,8523,2225,7487,1977,9555,8048,5763,2414,4948,4265,2427,8978,8088,8841,9208,9601,5810,9398,8866,9138,4176,5875,7212,3272,6759,5678,7649,4922,5422,1343,8197,3154,3600,687,1028,4579,2084,9467,4492,7262,7296,6538,7657,7134,2077,1505,7332,6890,8964,4879,7603,7400,5973,739],
+  [1861,1613,4879,1884,7334,966,2000,7489,2123,4287,1472,3263,4726,9203,1040,4103,6075,6049,330,9253,4062,4268,1635,9960,577,1320,3195,9628,1030,4092,4979,6474,6393,2799,6967,8687,7724,7392,9927,2085,3200,6466,8702,265,7646,8665,7986,7266,4574,6587,612,2724,704,3191,8323,9523,3002,704,5064,3960,8209,2027,2758,8393,4875,4641,9584,6401,7883,7014,768,443,5490,7506,1852,2005,8850,5776,4487,4269],
+  [4052,6687,4705,7260,6645,6715,3706,5504,8672,2853,1136,8187,8203,4016,871,1809,1366,4952,9294,5339,6872,2645,6083,7874,3056,5218,7485,8796,7401,3348,2103,426,8572,4163,9171,3176,948,7654,9344,3217,1650,5580,7971,2622,76,2874,880,2034,9929,1546,2659,5811,3754,7096,7436,9694,9960,7415,2164,953,2360,4194,2397,1047,2196,6827,575,784,2675,8821,6802,7972,5996,6699,2134,7577,2887,1412,4349,4380],
+  [4629,2234,6240,8132,7592,3181,6389,1214,266,1910,2451,8784,2790,1127,6932,1447,8986,2492,5476,397,889,3027,7641,5083,5776,4022,185,3364,5701,2442,2840,4160,9525,4828,6602,2614,7447,3711,4505,7745,8034,6514,4907,2605,7753,6958,7270,6936,3006,8968,439,2326,4652,3085,3425,9863,5049,5361,8688,297,7580,8777,7916,6687,8683,7141,306,9569,2384,1500,3346,4601,7329,9040,6097,2727,6314,4501,4974,2829],
+  [8316,4072,2025,6884,3027,1808,5714,7624,7880,8528,4205,8686,7587,3230,1139,7273,6163,6986,3914,9309,1464,9359,4474,7095,2212,7302,2583,9462,7532,6567,1606,4436,8981,5612,6796,4385,5076,2007,6072,3678,8331,1338,3299,8845,4783,8613,4071,1232,6028,2176,3990,2148,3748,103,9453,538,6745,9110,926,3125,473,5970,8728,7072,9062,1404,1317,5139,9862,6496,6062,3338,464,1600,2532,1088,8232,7739,8274,3873],
+  [2341,523,7096,8397,8301,6541,9844,244,4993,2280,7689,4025,4196,5522,7904,6048,2623,9258,2149,9461,6448,8087,7245,1917,8340,7127,8466,5725,6996,3421,5313,512,9164,9837,9794,8369,4185,1488,7210,1524,1016,4620,9435,2478,7765,8035,697,6677,3724,6988,5853,7662,3895,9593,1185,4727,6025,5734,7665,3070,138,8469,6748,6459,561,7935,8646,2378,462,7755,3115,9690,8877,3946,2728,8793,244,6323,8666,4271],
+  [6430,2406,8994,56,1267,3826,9443,7079,7579,5232,6691,3435,6718,5698,4144,7028,592,2627,217,734,6194,8156,9118,58,2640,8069,4127,3285,694,3197,3377,4143,4802,3324,8134,6953,7625,3598,3584,4289,7065,3434,2106,7132,5802,7920,9060,7531,3321,1725,1067,3751,444,5503,6785,7937,6365,4803,198,6266,8177,1470,6390,1606,2904,7555,9834,8667,2033,1723,5167,1666,8546,8152,473,4475,6451,7947,3062,3281],
+  [2810,3042,7759,1741,2275,2609,7676,8640,4117,1958,7500,8048,1757,3954,9270,1971,4796,2912,660,5511,3553,1012,5757,4525,6084,7198,8352,5775,7726,8591,7710,9589,3122,4392,6856,5016,749,2285,3356,7482,9956,7348,2599,8944,495,3462,3578,551,4543,7207,7169,7796,1247,4278,6916,8176,3742,8385,2310,1345,8692,2667,4568,1770,8319,3585,4920,3890,4928,7343,5385,9772,7947,8786,2056,9266,3454,2807,877,2660],
+  [6206,8252,5928,5837,4177,4333,207,7934,5581,9526,8906,1498,8411,2984,5198,5134,2464,8435,8514,8674,3876,599,5327,826,2152,4084,2433,9327,9697,4800,2728,3608,3849,3861,3498,9943,1407,3991,7191,9110,5666,8434,4704,6545,5944,2357,1163,4995,9619,6754,4200,9682,6654,4862,4744,5953,6632,1054,293,9439,8286,2255,696,8709,1533,1844,6441,430,1999,6063,9431,7018,8057,2920,6266,6799,356,3597,4024,6665],
+  [3847,6356,8541,7225,2325,2946,5199,469,5450,7508,2197,9915,8284,7983,6341,3276,3321,16,1321,7608,5015,3362,8491,6968,6818,797,156,2575,706,9516,5344,5457,9210,5051,8099,1617,9951,7663,8253,9683,2670,1261,4710,1068,8753,4799,1228,2621,3275,6188,4699,1791,9518,8701,5932,4275,6011,9877,2933,4182,6059,2930,6687,6682,9771,654,9437,3169,8596,1827,5471,8909,2352,123,4394,3208,8756,5513,6917,2056],
+  [5458,8173,3138,3290,4570,4892,3317,4251,9699,7973,1163,1935,5477,6648,9614,5655,9592,975,9118,2194,7322,8248,8413,3462,8560,1907,7810,6650,7355,2939,4973,6894,3933,3784,3200,2419,9234,4747,2208,2207,1945,2899,1407,6145,8023,3484,5688,7686,2737,3828,3704,9004,5190,9740,8643,8650,5358,4426,1522,1707,3613,9887,6956,2447,2762,833,1449,9489,2573,1080,4167,3456,6809,2466,227,7125,2759,6250,6472,8089],
+  [3266,7025,9756,3914,1265,9116,7723,9788,6805,5493,2092,8688,6592,9173,4431,4028,6007,7131,4446,4815,3648,6701,759,3312,8355,4485,4187,5188,8746,7759,3528,2177,5243,8379,3838,7233,4607,9187,7216,2190,6967,2920,6082,7910,5354,3609,8958,6949,7731,494,8753,8707,1523,4426,3543,7085,647,6771,9847,646,5049,824,8417,5260,2730,5702,2513,9275,4279,2767,8684,1165,9903,4518,55,9682,8963,6005,2102,6523],
+  [1998,8731,936,1479,5259,7064,4085,91,7745,7136,3773,3810,730,8255,2705,2653,9790,6807,2342,355,9344,2668,3690,2028,9679,8102,574,4318,6481,9175,5423,8062,2867,9657,7553,3442,3920,7430,3945,7639,3714,3392,2525,4995,4850,2867,7951,9667,486,9506,9888,781,8866,1702,3795,90,356,1483,4200,2131,6969,5931,486,6880,4404,1084,5169,4910,6567,8335,4686,5043,2614,3352,2667,4513,6472,7471,5720,1616],
+  [8878,1613,1716,868,1906,2681,564,665,5995,2474,7496,3432,9491,9087,8850,8287,669,823,347,6194,2264,2592,7871,7616,8508,4827,760,2676,4660,4881,7572,3811,9032,939,4384,929,7525,8419,5556,9063,662,8887,7026,8534,3111,1454,2082,7598,5726,6687,9647,7608,73,3014,5063,670,5461,5631,3367,9796,8475,7908,5073,1565,5008,5295,4457,1274,4788,1728,338,600,8415,8535,9351,7750,6887,5845,1741,125],
+  [3637,6489,9634,9464,9055,2413,7824,9517,7532,3577,7050,6186,6980,9365,9782,191,870,2497,8498,2218,2757,5420,6468,586,3320,9230,1034,1393,9886,5072,9391,1178,8464,8042,6869,2075,8275,3601,7715,9470,8786,6475,8373,2159,9237,2066,3264,5000,679,355,3069,4073,494,2308,5512,4334,9438,8786,8637,9774,1169,1949,6594,6072,4270,9158,7916,5752,6794,9391,6301,5842,3285,2141,3898,8027,4310,8821,7079,1307],
+  [8497,6681,4732,7151,7060,5204,9030,7157,833,5014,8723,3207,9796,9286,4913,119,5118,7650,9335,809,3675,2597,5144,3945,5090,8384,187,4102,1260,2445,2792,4422,8389,9290,50,1765,1521,6921,8586,4368,1565,5727,7855,2003,4834,9897,5911,8630,5070,1330,7692,7557,7980,6028,5805,9090,8265,3019,3802,698,9149,5748,1965,9658,4417,5994,5584,8226,2937,272,5743,1278,5698,8736,2595,6475,5342,6596,1149,6920],
+  [8188,8009,9546,6310,8772,2500,9846,6592,6872,3857,1307,8125,7042,1544,6159,2330,643,4604,7899,6848,371,8067,2062,3200,7295,1857,9505,6936,384,2193,2190,301,8535,5503,1462,7380,5114,4824,8833,1763,4974,8711,9262,6698,3999,2645,6937,7747,1128,2933,3556,7943,2885,3122,9105,5447,418,2899,5148,3699,9021,9501,597,4084,175,1621,1,1079,6067,5812,4326,9914,6633,5394,4233,6728,9084,1864,5863,1225],
+  [9935,8793,9117,1825,9542,8246,8437,3331,9128,9675,6086,7075,319,1334,7932,3583,7167,4178,1726,7720,695,8277,7887,6359,5912,1719,2780,8529,1359,2013,4498,8072,1129,9998,1147,8804,9405,6255,1619,2165,7491,1,8882,7378,3337,503,5758,4109,3577,985,3200,7615,8058,5032,1080,6410,6873,5496,1466,2412,9885,5904,4406,3605,8770,4361,6205,9193,1537,9959,214,7260,9566,1685,100,4920,7138,9819,5637,976],
+  [3466,9854,985,1078,7222,8888,5466,5379,3578,4540,6853,8690,3728,6351,7147,3134,6921,9692,857,3307,4998,2172,5783,3931,9417,2541,6299,13,787,2099,9131,9494,896,8600,1643,8419,7248,2660,2609,8579,91,6663,5506,7675,1947,6165,4286,1972,9645,3805,1663,1456,8853,5705,9889,7489,1107,383,4044,2969,3343,152,7805,4980,9929,5033,1737,9953,7197,9158,4071,1324,473,9676,3984,9680,3606,8160,7384,5432],
+  [1005,4512,5186,3953,2164,3372,4097,3247,8697,3022,9896,4101,3871,6791,3219,2742,4630,6967,7829,5991,6134,1197,1414,8923,8787,1394,8852,5019,7768,5147,8004,8825,5062,9625,7988,1110,3992,7984,9966,6516,6251,8270,421,3723,1432,4830,6935,8095,9059,2214,6483,6846,3120,1587,6201,6691,9096,9627,6671,4002,3495,9939,7708,7465,5879,6959,6634,3241,3401,2355,9061,2611,7830,3941,2177,2146,5089,7079,519,6351],
+  [7280,8586,4261,2831,7217,3141,9994,9940,5462,2189,4005,6942,9848,5350,8060,6665,7519,4324,7684,657,9453,9296,2944,6843,7499,7847,1728,9681,3906,6353,5529,2822,3355,3897,7724,4257,7489,8672,4356,3983,1948,6892,7415,4153,5893,4190,621,1736,4045,9532,7701,3671,1211,1622,3176,4524,9317,7800,5638,6644,6943,5463,3531,2821,1347,5958,3436,1438,2999,994,850,4131,2616,1549,3465,5946,690,9273,6954,7991],
+  [9517,399,3249,2596,7736,2142,1322,968,7350,1614,468,3346,3265,7222,6086,1661,5317,2582,7959,4685,2807,2917,1037,5698,1529,3972,8716,2634,3301,3412,8621,743,8001,4734,888,7744,8092,3671,8941,1487,5658,7099,2781,99,1932,4443,4756,4652,9328,1581,7855,4312,5976,7255,6480,3996,2748,1973,9731,4530,2790,9417,7186,5303,3557,351,7182,9428,1342,9020,7599,1392,8304,2070,9138,7215,2008,9937,1106,7110],
+  [7444,769,9688,632,1571,6820,8743,4338,337,3366,3073,1946,8219,104,4210,6986,249,5061,8693,7960,6546,1004,8857,5997,9352,4338,6105,5008,2556,6518,6694,4345,3727,7956,20,3954,8652,4424,9387,2035,8358,5962,5304,5194,8650,8282,1256,1103,2138,6679,1985,3653,2770,2433,4278,615,2863,1715,242,3790,2636,6998,3088,1671,2239,957,5411,4595,6282,2881,9974,2401,875,7574,2987,4587,3147,6766,9885,2965],
+  [3287,3016,3619,6818,9073,6120,5423,557,2900,2015,8111,3873,1314,4189,1846,4399,7041,7583,2427,2864,3525,5002,2069,748,1948,6015,2684,438,770,8367,1663,7887,7759,1885,157,7770,4520,4878,3857,1137,3525,3050,6276,5569,7649,904,4533,7843,2199,5648,7628,9075,9441,3600,7231,2388,5640,9096,958,3058,584,5899,8150,1181,9616,1098,8162,6819,8171,1519,1140,7665,8801,2632,1299,9192,707,9955,2710,7314],
+  [1772,2963,7578,3541,3095,1488,7026,2634,6015,4633,4370,2762,1650,2174,909,8158,2922,8467,4198,4280,9092,8856,8835,5457,2790,8574,9742,5054,9547,4156,7940,8126,9824,7340,8840,6574,3547,1477,3014,6798,7134,435,9484,9859,3031,4,1502,4133,1738,1807,4825,463,6343,9701,8506,9822,9555,8688,8168,3467,3234,6318,1787,5591,419,6593,7974,8486,9861,6381,6758,194,3061,4315,2863,4665,3789,2201,1492,4416],
+  [126,8927,6608,5682,8986,6867,1715,6076,3159,788,3140,4744,830,9253,5812,5021,7616,8534,1546,9590,1101,9012,9821,8132,7857,4086,1069,7491,2988,1579,2442,4321,2149,7642,6108,250,6086,3167,24,9528,7663,2685,1220,9196,1397,5776,1577,1730,5481,977,6115,199,6326,2183,3767,5928,5586,7561,663,8649,9688,949,5913,9160,1870,5764,9887,4477,6703,1413,4995,5494,7131,2192,8969,7138,3997,8697,646,1028],
+  [8074,1731,8245,624,4601,8706,155,8891,309,2552,8208,8452,2954,3124,3469,4246,3352,1105,4509,8677,9901,4416,8191,9283,5625,7120,2952,8881,7693,830,4580,8228,9459,8611,4499,1179,4988,1394,550,2336,6089,6872,269,7213,1848,917,6672,4890,656,1478,6536,3165,4743,4990,1176,6211,7207,5284,9730,4738,1549,4986,4942,8645,3698,9429,1439,2175,6549,3058,6513,1574,6988,8333,3406,5245,5431,7140,7085,6407],
+  [7845,4694,2530,8249,290,5948,5509,1588,5940,4495,5866,5021,4626,3979,3296,7589,4854,1998,5627,3926,8346,6512,9608,1918,7070,4747,4182,2858,2766,4606,6269,4107,8982,8568,9053,4244,5604,102,2756,727,5887,2566,7922,44,5986,621,1202,374,6988,4130,3627,6744,9443,4568,1398,8679,397,3928,9159,367,2917,6127,5788,3304,8129,911,2669,1463,9749,264,4478,8940,1109,7309,2462,117,4692,7724,225,2312],
+  [4164,3637,2000,941,8903,39,3443,7172,1031,3687,4901,8082,4945,4515,7204,9310,9349,9535,9940,218,1788,9245,2237,1541,5670,6538,6047,5553,9807,8101,1925,8714,445,8332,7309,6830,5786,5736,7306,2710,3034,1838,7969,6318,7912,2584,2080,7437,6705,2254,7428,820,782,9861,7596,3842,3631,8063,5240,6666,394,4565,7865,4895,9890,6028,6117,4724,9156,4473,4552,602,470,6191,4927,5387,884,3146,1978,3000],
+  [4258,6880,1696,3582,5793,4923,2119,1155,9056,9698,6603,3768,5514,9927,9609,6166,6566,4536,4985,4934,8076,9062,6741,6163,7399,4562,2337,5600,2919,9012,8459,1308,6072,1225,9306,8818,5886,7243,7365,8792,6007,9256,6699,7171,4230,7002,8720,7839,4533,1671,478,7774,1607,2317,5437,4705,7886,4760,6760,7271,3081,2997,3088,7675,6208,3101,6821,6840,122,9633,4900,2067,8546,4549,2091,7188,5605,8599,6758,5229],
+  [7854,5243,9155,3556,8812,7047,2202,1541,5993,4600,4760,713,434,7911,7426,7414,8729,322,803,7960,7563,4908,6285,6291,736,3389,9339,4132,8701,7534,5287,3646,592,3065,7582,2592,8755,6068,8597,1982,5782,1894,2900,6236,4039,6569,3037,5837,7698,700,7815,2491,7272,5878,3083,6778,6639,3589,5010,8313,2581,6617,5869,8402,6808,2951,2321,5195,497,2190,6187,1342,1316,4453,7740,4154,2959,1781,1482,8256],
+  [7178,2046,4419,744,8312,5356,6855,8839,319,2962,5662,47,6307,8662,68,4813,567,2712,9931,1678,3101,8227,6533,4933,6656,92,5846,4780,6256,6361,4323,9985,1231,2175,7178,3034,9744,6155,9165,7787,5836,9318,7860,9644,8941,6480,9443,8188,5928,161,6979,2352,5628,6991,1198,8067,5867,6620,3778,8426,2994,3122,3124,6335,3918,8897,2655,9670,634,1088,1576,8935,7255,474,8166,7417,9547,2886,5560,3842],
+  [6957,3111,26,7530,7143,1295,1744,6057,3009,1854,8098,5405,2234,4874,9447,2620,9303,27,7410,969,40,2966,5648,7596,8637,4238,3143,3679,7187,690,9980,7085,7714,9373,5632,7526,6707,3951,9734,4216,2146,3602,5371,6029,3039,4433,4855,4151,1449,3376,8009,7240,7027,4602,2947,9081,4045,8424,9352,8742,923,2705,4266,3232,2264,6761,363,2651,3383,7770,6730,7856,7340,9679,2158,610,4471,4608,910,6241],
+  [4417,6756,1013,8797,658,8809,5032,8703,7541,846,3357,2920,9817,1745,9980,7593,4667,3087,779,3218,6233,5568,4296,2289,2654,7898,5021,9461,5593,8214,9173,4203,2271,7980,2983,5952,9992,8399,3468,1776,3188,9314,1720,6523,2933,621,8685,5483,8986,6163,3444,9539,4320,155,3992,2828,2150,6071,524,2895,5468,8063,1210,3348,9071,4862,483,9017,4097,6186,9815,3610,5048,1644,1003,9865,9332,2145,1944,2213],
+  [9284,3803,4920,1927,6706,4344,7383,4786,9890,2010,5228,1224,3158,6967,8580,8990,8883,5213,76,8306,2031,4980,5639,9519,7184,5645,7769,3259,8077,9130,1317,3096,9624,3818,1770,695,2454,947,6029,3474,9938,3527,5696,4760,7724,7738,2848,6442,5767,6845,8323,4131,2859,7595,2500,4815,3660,9130,8580,7016,8231,4391,8369,3444,4069,4021,556,6154,627,2778,1496,4206,6356,8434,8491,3816,8231,3190,5575,1015],
+  [3787,7572,1788,6803,5641,6844,1961,4811,8535,9914,9999,1450,8857,738,4662,8569,6679,2225,7839,8618,286,2648,5342,2294,3205,4546,176,8705,3741,6134,8324,8021,7004,5205,7032,6637,9442,5539,5584,4819,5874,5807,8589,6871,9016,983,1758,3786,1519,6241,185,8398,495,3370,9133,3051,4549,9674,7311,9738,3316,9383,2658,2776,9481,7558,619,3943,3324,6491,4933,153,9738,4623,912,3595,7771,7939,1219,4405],
+  [2650,3883,4154,5809,315,7756,4430,1788,4451,1631,6461,7230,6017,5751,138,588,5282,2442,9110,9035,6349,2515,1570,6122,4192,4174,3530,1933,4186,4420,4609,5739,4135,2963,6308,1161,8809,8619,2796,3819,6971,8228,4188,1492,909,8048,2328,6772,8467,7671,9068,2226,7579,6422,7056,8042,3296,2272,3006,2196,7320,3238,3490,3102,37,1293,3212,4767,5041,8773,5794,4456,6174,7279,7054,2835,7053,9088,790,6640],
+  [3101,1057,7057,3826,6077,1025,2955,1224,1114,6729,5902,4698,6239,7203,9423,1804,4417,6686,1426,6941,8071,1029,4985,9010,6122,6597,1622,1574,3513,1684,7086,5505,3244,411,9638,4150,907,9135,829,981,1707,5359,8781,9751,5,9131,3973,7159,1340,6955,7514,7993,6964,8198,1933,2797,877,3993,4453,8020,9349,8646,2779,8679,2961,3547,3374,3510,1129,3568,2241,2625,9138,5974,8206,7669,7678,1833,8700,4480],
+  [4865,9912,8038,8238,782,3095,8199,1127,4501,7280,2112,2487,3626,2790,9432,1475,6312,8277,4827,2218,5806,7132,8752,1468,7471,6386,739,8762,8323,8120,5169,9078,9058,3370,9560,7987,8585,8531,5347,9312,1058,4271,1159,5286,5404,6925,8606,9204,7361,2415,560,586,4002,2644,1927,2824,768,4409,2942,3345,1002,808,4941,6267,7979,5140,8643,7553,9438,7320,4938,2666,4609,2778,8158,6730,3748,3867,1866,7181],
+  [171,3771,7134,8927,4778,2913,3326,2004,3089,7853,1378,1729,4777,2706,9578,1360,5693,3036,1851,7248,2403,2273,8536,6501,9216,613,9671,7131,7719,6425,773,717,8803,160,1114,7554,7197,753,4513,4322,8499,4533,2609,4226,8710,6627,644,9666,6260,4870,5744,7385,6542,6203,7703,6130,8944,5589,2262,6803,6381,7414,6888,5123,7320,9392,9061,6780,322,8975,7050,5089,1061,2260,3199,1150,1865,5386,9699,6501],
+  [3744,8454,6885,8277,919,1923,4001,6864,7854,5519,2491,6057,8794,9645,1776,5714,9786,9281,7538,6916,3215,395,2501,9618,4835,8846,9708,2813,3303,1794,8309,7176,2206,1602,1838,236,4593,2245,8993,4017,10,8215,6921,5206,4023,5932,6997,7801,262,7640,3107,8275,4938,7822,2425,3223,3886,2105,8700,9526,2088,8662,8034,7004,5710,2124,7164,3574,6630,9980,4242,2901,9471,1491,2117,4562,1130,9086,4117,6698],
+  [2810,2280,2331,1170,4554,4071,8387,1215,2274,9848,6738,1604,7281,8805,439,1298,8318,7834,9426,8603,6092,7944,1309,8828,303,3157,4638,4439,9175,1921,4695,7716,1494,1015,1772,5913,1127,1952,1950,8905,4064,9890,385,9357,7945,5035,7082,5369,4093,6546,5187,5637,2041,8946,1758,7111,6566,1027,1049,5148,7224,7248,296,6169,375,1656,7993,2816,3717,4279,4675,1609,3317,42,6201,3100,3144,163,9530,4531],
+  [7096,6070,1009,4988,3538,5801,7149,3063,2324,2912,7911,7002,4338,7880,2481,7368,3516,2016,7556,2193,1388,3865,8125,4637,4096,8114,750,3144,1938,7002,9343,4095,1392,4220,3455,6969,9647,1321,9048,1996,1640,6626,1788,314,9578,6630,2813,6626,4981,9908,7024,4355,3201,3521,3864,3303,464,1923,595,9801,3391,8366,8084,9374,1041,8807,9085,1892,9431,8317,9016,9221,8574,9981,9240,5395,2009,6310,2854,9255],
+  [8830,3145,2960,9615,8220,6061,3452,2918,6481,9278,2297,3385,6565,7066,7316,5682,107,7646,4466,68,1952,9603,8615,54,7191,791,6833,2560,693,9733,4168,570,9127,9537,1925,8287,5508,4297,8452,8795,6213,7994,2420,4208,524,5915,8602,8330,2651,8547,6156,1812,6271,7991,9407,9804,1553,6866,1128,2119,4691,9711,8315,5879,9935,6900,482,682,4126,1041,428,6247,3720,5882,7526,2582,4327,7725,3503,2631],
+  [2738,9323,721,7434,1453,6294,2957,3786,5722,6019,8685,4386,3066,9057,6860,499,5315,3045,5194,7111,3137,9104,941,586,3066,755,4177,8819,7040,5309,3583,3897,4428,7788,4721,7249,6559,7324,825,7311,3760,6064,6070,9672,4882,584,1365,9739,9331,5783,2624,7889,1604,1303,1555,7125,8312,425,8936,3233,7724,1480,403,7440,1784,1754,4721,1569,652,3893,4574,5692,9730,4813,9844,8291,9199,7101,3391,8914],
+  [6044,2928,9332,3328,8588,447,3830,1176,3523,2705,8365,6136,5442,9049,5526,8575,8869,9031,7280,706,2794,8814,5767,4241,7696,78,6570,556,5083,1426,4502,3336,9518,2292,1885,3740,3153,9348,9331,8051,2759,5407,9028,7840,9255,831,515,2612,9747,7435,8964,4971,2048,4900,5967,8271,1719,9670,2810,6777,1594,6367,6259,8316,3815,1689,6840,9437,4361,822,9619,3065,83,6344,7486,8657,8228,9635,6932,4864],
+  [8478,4777,6334,4678,7476,4963,6735,3096,5860,1405,5127,7269,7793,4738,227,9168,2996,8928,765,733,1276,7677,6258,1528,9558,3329,302,8901,1422,8277,6340,645,9125,8869,5952,141,8141,1816,9635,4025,4184,3093,83,2344,2747,9352,7966,1206,1126,1826,218,7939,2957,2729,810,8752,5247,4174,4038,8884,7899,9567,301,5265,5752,7524,4381,1669,3106,8270,6228,6373,754,2547,4240,2313,5514,3022,1040,9738],
+  [2265,8192,1763,1369,8469,8789,4836,52,1212,6690,5257,8918,6723,6319,378,4039,2421,8555,8184,9577,1432,7139,8078,5452,9628,7579,4161,7490,5159,8559,1011,81,478,5840,1964,1334,6875,8670,9900,739,1514,8692,522,9316,6955,1345,8132,2277,3193,9773,3923,4177,2183,1236,6747,6575,4874,6003,6409,8187,745,8776,9440,7543,9825,2582,7381,8147,7236,5185,7564,6125,218,7991,6394,391,7659,7456,5128,5294],
+  [2132,8992,8160,5782,4420,3371,3798,5054,552,5631,7546,4716,1332,6486,7892,7441,4370,6231,4579,2121,8615,1145,9391,1524,1385,2400,9437,2454,7896,7467,2928,8400,3299,4025,7458,4703,7206,6358,792,6200,725,4275,4136,7390,5984,4502,7929,5085,8176,4600,119,3568,76,9363,6943,2248,9077,9731,6213,5817,6729,4190,3092,6910,759,2682,8380,1254,9604,3011,9291,5329,9453,9746,2739,6522,3765,5634,1113,5789],
+  [5304,5499,564,2801,679,2653,1783,3608,7359,7797,3284,796,3222,437,7185,6135,8571,2778,7488,5746,678,6140,861,7750,803,9859,9918,2425,3734,2698,9005,4864,9818,6743,2475,132,9486,3825,5472,919,292,4411,7213,7699,6435,9019,6769,1388,802,2124,1345,8493,9487,8558,7061,8777,8833,2427,2238,5409,4957,8503,3171,7622,5779,6145,2417,5873,5563,5693,9574,9491,1937,7384,4563,6842,5432,2751,3406,7981]
+];
+```
+
+## --seed-contents--
+
+```js
+function pathSumTwoWays(matrix) {
+
+  return true;
+}
+
+// Only change code above this line
+
+const testMatrix1 = [
+  [131, 673, 234, 103, 18],
+  [201, 96, 342, 965, 150],
+  [630, 803, 746, 422, 111],
+  [537, 699, 497, 121, 956],
+  [805, 732, 524, 37, 331]
+];
+
+pathSumTwoWays(testMatrix1);
+```
+
+# --solutions--
+
+```js
+function pathSumTwoWays(matrix) {
+  function makeMinimalMove(row, column) {
+    if (resultMatrix[row][column + 1] < resultMatrix[row + 1][column]) {
+      return resultMatrix[row][column + 1];
+    }
+    return resultMatrix[row + 1][column];
+  }
+
+  const size = matrix.length;
+  const resultMatrix = [];
+  for (let i = 0; i < size; i++) {
+    resultMatrix.push([...matrix[i]])
+  }
+
+  for (let i = size - 2; i >= 0; i--) {
+    resultMatrix[size - 1][i] += resultMatrix[size - 1][i + 1];
+    resultMatrix[i][size - 1] += resultMatrix[i + 1][size - 1];
+  }
+
+  for (let row = size - 2; row >= 0; row--) {
+    for (let column = size - 2; column >= 0; column--) {
+      resultMatrix[row][column] += makeMinimalMove(row, column);
+    }
+  }
+  return resultMatrix[0][0];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-82-path-sum-three-ways.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-82-path-sum-three-ways.md
new file mode 100644
index 00000000000..0895540d468
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-82-path-sum-three-ways.md
@@ -0,0 +1,195 @@
+---
+id: 5900f3be1000cf542c50fed1
+title: 'Problem 82: Path sum: three ways'
+challengeType: 1
+forumTopicId: 302196
+dashedName: problem-82-path-sum-three-ways
+---
+
+# --description--
+
+**Note:** This problem is a more challenging version of Problem 81.
+
+The minimal path sum in the 5 by 5 matrix below, by starting in any cell in the left column and finishing in any cell in the right column, and only moving up, down, and right, is indicated in red and bold; the sum is equal to `994`.
+
+  $$\begin{pmatrix}   131 & 673 & \color{red}{234} & \color{red}{103} & \color{red}{18}\\\\
+  \color{red}{201} & \color{red}{96} & \color{red}{342} & 965 & 150\\\\   630 & 803 & 746 & 422 & 111\\\\
+  537 & 699 & 497 & 121 & 956\\\\ 805 & 732 & 524 & 37 & 331 \end{pmatrix}$$
+
+Find the minimal path sum from the left column to the right column in `matrix`, a 2D array representing a matrix. The maximum matrix size used in tests will be 80 by 80.
+
+# --hints--
+
+`pathSumThreeWays(testMatrix1)` should return a number.
+
+```js
+assert(typeof pathSumThreeWays(_testMatrix1) === 'number');
+```
+
+`pathSumThreeWays(testMatrix1)` should return `994`.
+
+```js
+assert.strictEqual(pathSumThreeWays(_testMatrix1), 994);
+```
+
+`pathSumThreeWays(testMatrix2)` should return `260324`.
+
+```js
+assert.strictEqual(pathSumThreeWays(_testMatrix2), 260324);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testMatrix1 = [
+  [131, 673, 234, 103, 18],
+  [201, 96, 342, 965, 150],
+  [630, 803, 746, 422, 111],
+  [537, 699, 497, 121, 956],
+  [805, 732, 524, 37, 331]
+];
+const _testMatrix2 = [
+  [4445,2697,5115,718,2209,2212,654,4348,3079,6821,7668,3276,8874,4190,3785,2752,9473,7817,9137,496,7338,3434,7152,4355,4552,7917,7827,2460,2350,691,3514,5880,3145,7633,7199,3783,5066,7487,3285,1084,8985,760,872,8609,8051,1134,9536,5750,9716,9371,7619,5617,275,9721,2997,2698,1887,8825,6372,3014,2113,7122,7050,6775,5948,2758,1219,3539,348,7989,2735,9862,1263,8089,6401,9462,3168,2758,3748,5870],
+  [1096,20,1318,7586,5167,2642,1443,5741,7621,7030,5526,4244,2348,4641,9827,2448,6918,5883,3737,300,7116,6531,567,5997,3971,6623,820,6148,3287,1874,7981,8424,7672,7575,6797,6717,1078,5008,4051,8795,5820,346,1851,6463,2117,6058,3407,8211,117,4822,1317,4377,4434,5925,8341,4800,1175,4173,690,8978,7470,1295,3799,8724,3509,9849,618,3320,7068,9633,2384,7175,544,6583,1908,9983,481,4187,9353,9377],
+  [9607,7385,521,6084,1364,8983,7623,1585,6935,8551,2574,8267,4781,3834,2764,2084,2669,4656,9343,7709,2203,9328,8004,6192,5856,3555,2260,5118,6504,1839,9227,1259,9451,1388,7909,5733,6968,8519,9973,1663,5315,7571,3035,4325,4283,2304,6438,3815,9213,9806,9536,196,5542,6907,2475,1159,5820,9075,9470,2179,9248,1828,4592,9167,3713,4640,47,3637,309,7344,6955,346,378,9044,8635,7466,5036,9515,6385,9230],
+  [7206,3114,7760,1094,6150,5182,7358,7387,4497,955,101,1478,7777,6966,7010,8417,6453,4955,3496,107,449,8271,131,2948,6185,784,5937,8001,6104,8282,4165,3642,710,2390,575,715,3089,6964,4217,192,5949,7006,715,3328,1152,66,8044,4319,1735,146,4818,5456,6451,4113,1063,4781,6799,602,1504,6245,6550,1417,1343,2363,3785,5448,4545,9371,5420,5068,4613,4882,4241,5043,7873,8042,8434,3939,9256,2187],
+  [3620,8024,577,9997,7377,7682,1314,1158,6282,6310,1896,2509,5436,1732,9480,706,496,101,6232,7375,2207,2306,110,6772,3433,2878,8140,5933,8688,1399,2210,7332,6172,6403,7333,4044,2291,1790,2446,7390,8698,5723,3678,7104,1825,2040,140,3982,4905,4160,2200,5041,2512,1488,2268,1175,7588,8321,8078,7312,977,5257,8465,5068,3453,3096,1651,7906,253,9250,6021,8791,8109,6651,3412,345,4778,5152,4883,7505],
+  [1074,5438,9008,2679,5397,5429,2652,3403,770,9188,4248,2493,4361,8327,9587,707,9525,5913,93,1899,328,2876,3604,673,8576,6908,7659,2544,3359,3883,5273,6587,3065,1749,3223,604,9925,6941,2823,8767,7039,3290,3214,1787,7904,3421,7137,9560,8451,2669,9219,6332,1576,5477,6755,8348,4164,4307,2984,4012,6629,1044,2874,6541,4942,903,1404,9125,5160,8836,4345,2581,460,8438,1538,5507,668,3352,2678,6942],
+  [4295,1176,5596,1521,3061,9868,7037,7129,8933,6659,5947,5063,3653,9447,9245,2679,767,714,116,8558,163,3927,8779,158,5093,2447,5782,3967,1716,931,7772,8164,1117,9244,5783,7776,3846,8862,6014,2330,6947,1777,3112,6008,3491,1906,5952,314,4602,8994,5919,9214,3995,5026,7688,6809,5003,3128,2509,7477,110,8971,3982,8539,2980,4689,6343,5411,2992,5270,5247,9260,2269,7474,1042,7162,5206,1232,4556,4757],
+  [510,3556,5377,1406,5721,4946,2635,7847,4251,8293,8281,6351,4912,287,2870,3380,3948,5322,3840,4738,9563,1906,6298,3234,8959,1562,6297,8835,7861,239,6618,1322,2553,2213,5053,5446,4402,6500,5182,8585,6900,5756,9661,903,5186,7687,5998,7997,8081,8955,4835,6069,2621,1581,732,9564,1082,1853,5442,1342,520,1737,3703,5321,4793,2776,1508,1647,9101,2499,6891,4336,7012,3329,3212,1442,9993,3988,4930,7706],
+  [9444,3401,5891,9716,1228,7107,109,3563,2700,6161,5039,4992,2242,8541,7372,2067,1294,3058,1306,320,8881,5756,9326,411,8650,8824,5495,8282,8397,2000,1228,7817,2099,6473,3571,5994,4447,1299,5991,543,7874,2297,1651,101,2093,3463,9189,6872,6118,872,1008,1779,2805,9084,4048,2123,5877,55,3075,1737,9459,4535,6453,3644,108,5982,4437,5213,1340,6967,9943,5815,669,8074,1838,6979,9132,9315,715,5048],
+  [3327,4030,7177,6336,9933,5296,2621,4785,2755,4832,2512,2118,2244,4407,2170,499,7532,9742,5051,7687,970,6924,3527,4694,5145,1306,2165,5940,2425,8910,3513,1909,6983,346,6377,4304,9330,7203,6605,3709,3346,970,369,9737,5811,4427,9939,3693,8436,5566,1977,3728,2399,3985,8303,2492,5366,9802,9193,7296,1033,5060,9144,2766,1151,7629,5169,5995,58,7619,7565,4208,1713,6279,3209,4908,9224,7409,1325,8540],
+  [6882,1265,1775,3648,4690,959,5837,4520,5394,1378,9485,1360,4018,578,9174,2932,9890,3696,116,1723,1178,9355,7063,1594,1918,8574,7594,7942,1547,6166,7888,354,6932,4651,1010,7759,6905,661,7689,6092,9292,3845,9605,8443,443,8275,5163,7720,7265,6356,7779,1798,1754,5225,6661,1180,8024,5666,88,9153,1840,3508,1193,4445,2648,3538,6243,6375,8107,5902,5423,2520,1122,5015,6113,8859,9370,966,8673,2442],
+  [7338,3423,4723,6533,848,8041,7921,8277,4094,5368,7252,8852,9166,2250,2801,6125,8093,5738,4038,9808,7359,9494,601,9116,4946,2702,5573,2921,9862,1462,1269,2410,4171,2709,7508,6241,7522,615,2407,8200,4189,5492,5649,7353,2590,5203,4274,710,7329,9063,956,8371,3722,4253,4785,1194,4828,4717,4548,940,983,2575,4511,2938,1827,2027,2700,1236,841,5760,1680,6260,2373,3851,1841,4968,1172,5179,7175,3509],
+  [4420,1327,3560,2376,6260,2988,9537,4064,4829,8872,9598,3228,1792,7118,9962,9336,4368,9189,6857,1829,9863,6287,7303,7769,2707,8257,2391,2009,3975,4993,3068,9835,3427,341,8412,2134,4034,8511,6421,3041,9012,2983,7289,100,1355,7904,9186,6920,5856,2008,6545,8331,3655,5011,839,8041,9255,6524,3862,8788,62,7455,3513,5003,8413,3918,2076,7960,6108,3638,6999,3436,1441,4858,4181,1866,8731,7745,3744,1000],
+  [356,8296,8325,1058,1277,4743,3850,2388,6079,6462,2815,5620,8495,5378,75,4324,3441,9870,1113,165,1544,1179,2834,562,6176,2313,6836,8839,2986,9454,5199,6888,1927,5866,8760,320,1792,8296,7898,6121,7241,5886,5814,2815,8336,1576,4314,3109,2572,6011,2086,9061,9403,3947,5487,9731,7281,3159,1819,1334,3181,5844,5114,9898,4634,2531,4412,6430,4262,8482,4546,4555,6804,2607,9421,686,8649,8860,7794,6672],
+  [9870,152,1558,4963,8750,4754,6521,6256,8818,5208,5691,9659,8377,9725,5050,5343,2539,6101,1844,9700,7750,8114,5357,3001,8830,4438,199,9545,8496,43,2078,327,9397,106,6090,8181,8646,6414,7499,5450,4850,6273,5014,4131,7639,3913,6571,8534,9703,4391,7618,445,1320,5,1894,6771,7383,9191,4708,9706,6939,7937,8726,9382,5216,3685,2247,9029,8154,1738,9984,2626,9438,4167,6351,5060,29,1218,1239,4785],
+  [192,5213,8297,8974,4032,6966,5717,1179,6523,4679,9513,1481,3041,5355,9303,9154,1389,8702,6589,7818,6336,3539,5538,3094,6646,6702,6266,2759,4608,4452,617,9406,8064,6379,444,5602,4950,1810,8391,1536,316,8714,1178,5182,5863,5110,5372,4954,1978,2971,5680,4863,2255,4630,5723,2168,538,1692,1319,7540,440,6430,6266,7712,7385,5702,620,641,3136,7350,1478,3155,2820,9109,6261,1122,4470,14,8493,2095],
+  [1046,4301,6082,474,4974,7822,2102,5161,5172,6946,8074,9716,6586,9962,9749,5015,2217,995,5388,4402,7652,6399,6539,1349,8101,3677,1328,9612,7922,2879,231,5887,2655,508,4357,4964,3554,5930,6236,7384,4614,280,3093,9600,2110,7863,2631,6626,6620,68,1311,7198,7561,1768,5139,1431,221,230,2940,968,5283,6517,2146,1646,869,9402,7068,8645,7058,1765,9690,4152,2926,9504,2939,7504,6074,2944,6470,7859],
+  [4659,736,4951,9344,1927,6271,8837,8711,3241,6579,7660,5499,5616,3743,5801,4682,9748,8796,779,1833,4549,8138,4026,775,4170,2432,4174,3741,7540,8017,2833,4027,396,811,2871,1150,9809,2719,9199,8504,1224,540,2051,3519,7982,7367,2761,308,3358,6505,2050,4836,5090,7864,805,2566,2409,6876,3361,8622,5572,5895,3280,441,7893,8105,1634,2929,274,3926,7786,6123,8233,9921,2674,5340,1445,203,4585,3837],
+  [5759,338,7444,7968,7742,3755,1591,4839,1705,650,7061,2461,9230,9391,9373,2413,1213,431,7801,4994,2380,2703,6161,6878,8331,2538,6093,1275,5065,5062,2839,582,1014,8109,3525,1544,1569,8622,7944,2905,6120,1564,1839,5570,7579,1318,2677,5257,4418,5601,7935,7656,5192,1864,5886,6083,5580,6202,8869,1636,7907,4759,9082,5854,3185,7631,6854,5872,5632,5280,1431,2077,9717,7431,4256,8261,9680,4487,4752,4286],
+  [1571,1428,8599,1230,7772,4221,8523,9049,4042,8726,7567,6736,9033,2104,4879,4967,6334,6716,3994,1269,8995,6539,3610,7667,6560,6065,874,848,4597,1711,7161,4811,6734,5723,6356,6026,9183,2586,5636,1092,7779,7923,8747,6887,7505,9909,1792,3233,4526,3176,1508,8043,720,5212,6046,4988,709,5277,8256,3642,1391,5803,1468,2145,3970,6301,7767,2359,8487,9771,8785,7520,856,1605,8972,2402,2386,991,1383,5963],
+  [1822,4824,5957,6511,9868,4113,301,9353,6228,2881,2966,6956,9124,9574,9233,1601,7340,973,9396,540,4747,8590,9535,3650,7333,7583,4806,3593,2738,8157,5215,8472,2284,9473,3906,6982,5505,6053,7936,6074,7179,6688,1564,1103,6860,5839,2022,8490,910,7551,7805,881,7024,1855,9448,4790,1274,3672,2810,774,7623,4223,4850,6071,9975,4935,1915,9771,6690,3846,517,463,7624,4511,614,6394,3661,7409,1395,8127],
+  [8738,3850,9555,3695,4383,2378,87,6256,6740,7682,9546,4255,6105,2000,1851,4073,8957,9022,6547,5189,2487,303,9602,7833,1628,4163,6678,3144,8589,7096,8913,5823,4890,7679,1212,9294,5884,2972,3012,3359,7794,7428,1579,4350,7246,4301,7779,7790,3294,9547,4367,3549,1958,8237,6758,3497,3250,3456,6318,1663,708,7714,6143,6890,3428,6853,9334,7992,591,6449,9786,1412,8500,722,5468,1371,108,3939,4199,2535],
+  [7047,4323,1934,5163,4166,461,3544,2767,6554,203,6098,2265,9078,2075,4644,6641,8412,9183,487,101,7566,5622,1975,5726,2920,5374,7779,5631,3753,3725,2672,3621,4280,1162,5812,345,8173,9785,1525,955,5603,2215,2580,5261,2765,2990,5979,389,3907,2484,1232,5933,5871,3304,1138,1616,5114,9199,5072,7442,7245,6472,4760,6359,9053,7876,2564,9404,3043,9026,2261,3374,4460,7306,2326,966,828,3274,1712,3446],
+  [3975,4565,8131,5800,4570,2306,8838,4392,9147,11,3911,7118,9645,4994,2028,6062,5431,2279,8752,2658,7836,994,7316,5336,7185,3289,1898,9689,2331,5737,3403,1124,2679,3241,7748,16,2724,5441,6640,9368,9081,5618,858,4969,17,2103,6035,8043,7475,2181,939,415,1617,8500,8253,2155,7843,7974,7859,1746,6336,3193,2617,8736,4079,6324,6645,8891,9396,5522,6103,1857,8979,3835,2475,1310,7422,610,8345,7615],
+  [9248,5397,5686,2988,3446,4359,6634,9141,497,9176,6773,7448,1907,8454,916,1596,2241,1626,1384,2741,3649,5362,8791,7170,2903,2475,5325,6451,924,3328,522,90,4813,9737,9557,691,2388,1383,4021,1609,9206,4707,5200,7107,8104,4333,9860,5013,1224,6959,8527,1877,4545,7772,6268,621,4915,9349,5970,706,9583,3071,4127,780,8231,3017,9114,3836,7503,2383,1977,4870,8035,2379,9704,1037,3992,3642,1016,4303],
+  [5093,138,4639,6609,1146,5565,95,7521,9077,2272,974,4388,2465,2650,722,4998,3567,3047,921,2736,7855,173,2065,4238,1048,5,6847,9548,8632,9194,5942,4777,7910,8971,6279,7253,2516,1555,1833,3184,9453,9053,6897,7808,8629,4877,1871,8055,4881,7639,1537,7701,2508,7564,5845,5023,2304,5396,3193,2955,1088,3801,6203,1748,3737,1276,13,4120,7715,8552,3047,2921,106,7508,304,1280,7140,2567,9135,5266],
+  [6237,4607,7527,9047,522,7371,4883,2540,5867,6366,5301,1570,421,276,3361,527,6637,4861,2401,7522,5808,9371,5298,2045,5096,5447,7755,5115,7060,8529,4078,1943,1697,1764,5453,7085,960,2405,739,2100,5800,728,9737,5704,5693,1431,8979,6428,673,7540,6,7773,5857,6823,150,5869,8486,684,5816,9626,7451,5579,8260,3397,5322,6920,1879,2127,2884,5478,4977,9016,6165,6292,3062,5671,5968,78,4619,4763],
+  [9905,7127,9390,5185,6923,3721,9164,9705,4341,1031,1046,5127,7376,6528,3248,4941,1178,7889,3364,4486,5358,9402,9158,8600,1025,874,1839,1783,309,9030,1843,845,8398,1433,7118,70,8071,2877,3904,8866,6722,4299,10,1929,5897,4188,600,1889,3325,2485,6473,4474,7444,6992,4846,6166,4441,2283,2629,4352,7775,1101,2214,9985,215,8270,9750,2740,8361,7103,5930,8664,9690,8302,9267,344,2077,1372,1880,9550],
+  [5825,8517,7769,2405,8204,1060,3603,7025,478,8334,1997,3692,7433,9101,7294,7498,9415,5452,3850,3508,6857,9213,6807,4412,7310,854,5384,686,4978,892,8651,3241,2743,3801,3813,8588,6701,4416,6990,6490,3197,6838,6503,114,8343,5844,8646,8694,65,791,5979,2687,2621,2019,8097,1423,3644,9764,4921,3266,3662,5561,2476,8271,8138,6147,1168,3340,1998,9874,6572,9873,6659,5609,2711,3931,9567,4143,7833,8887],
+  [6223,2099,2700,589,4716,8333,1362,5007,2753,2848,4441,8397,7192,8191,4916,9955,6076,3370,6396,6971,3156,248,3911,2488,4930,2458,7183,5455,170,6809,6417,3390,1956,7188,577,7526,2203,968,8164,479,8699,7915,507,6393,4632,1597,7534,3604,618,3280,6061,9793,9238,8347,568,9645,2070,5198,6482,5000,9212,6655,5961,7513,1323,3872,6170,3812,4146,2736,67,3151,5548,2781,9679,7564,5043,8587,1893,4531],
+  [5826,3690,6724,2121,9308,6986,8106,6659,2142,1642,7170,2877,5757,6494,8026,6571,8387,9961,6043,9758,9607,6450,8631,8334,7359,5256,8523,2225,7487,1977,9555,8048,5763,2414,4948,4265,2427,8978,8088,8841,9208,9601,5810,9398,8866,9138,4176,5875,7212,3272,6759,5678,7649,4922,5422,1343,8197,3154,3600,687,1028,4579,2084,9467,4492,7262,7296,6538,7657,7134,2077,1505,7332,6890,8964,4879,7603,7400,5973,739],
+  [1861,1613,4879,1884,7334,966,2000,7489,2123,4287,1472,3263,4726,9203,1040,4103,6075,6049,330,9253,4062,4268,1635,9960,577,1320,3195,9628,1030,4092,4979,6474,6393,2799,6967,8687,7724,7392,9927,2085,3200,6466,8702,265,7646,8665,7986,7266,4574,6587,612,2724,704,3191,8323,9523,3002,704,5064,3960,8209,2027,2758,8393,4875,4641,9584,6401,7883,7014,768,443,5490,7506,1852,2005,8850,5776,4487,4269],
+  [4052,6687,4705,7260,6645,6715,3706,5504,8672,2853,1136,8187,8203,4016,871,1809,1366,4952,9294,5339,6872,2645,6083,7874,3056,5218,7485,8796,7401,3348,2103,426,8572,4163,9171,3176,948,7654,9344,3217,1650,5580,7971,2622,76,2874,880,2034,9929,1546,2659,5811,3754,7096,7436,9694,9960,7415,2164,953,2360,4194,2397,1047,2196,6827,575,784,2675,8821,6802,7972,5996,6699,2134,7577,2887,1412,4349,4380],
+  [4629,2234,6240,8132,7592,3181,6389,1214,266,1910,2451,8784,2790,1127,6932,1447,8986,2492,5476,397,889,3027,7641,5083,5776,4022,185,3364,5701,2442,2840,4160,9525,4828,6602,2614,7447,3711,4505,7745,8034,6514,4907,2605,7753,6958,7270,6936,3006,8968,439,2326,4652,3085,3425,9863,5049,5361,8688,297,7580,8777,7916,6687,8683,7141,306,9569,2384,1500,3346,4601,7329,9040,6097,2727,6314,4501,4974,2829],
+  [8316,4072,2025,6884,3027,1808,5714,7624,7880,8528,4205,8686,7587,3230,1139,7273,6163,6986,3914,9309,1464,9359,4474,7095,2212,7302,2583,9462,7532,6567,1606,4436,8981,5612,6796,4385,5076,2007,6072,3678,8331,1338,3299,8845,4783,8613,4071,1232,6028,2176,3990,2148,3748,103,9453,538,6745,9110,926,3125,473,5970,8728,7072,9062,1404,1317,5139,9862,6496,6062,3338,464,1600,2532,1088,8232,7739,8274,3873],
+  [2341,523,7096,8397,8301,6541,9844,244,4993,2280,7689,4025,4196,5522,7904,6048,2623,9258,2149,9461,6448,8087,7245,1917,8340,7127,8466,5725,6996,3421,5313,512,9164,9837,9794,8369,4185,1488,7210,1524,1016,4620,9435,2478,7765,8035,697,6677,3724,6988,5853,7662,3895,9593,1185,4727,6025,5734,7665,3070,138,8469,6748,6459,561,7935,8646,2378,462,7755,3115,9690,8877,3946,2728,8793,244,6323,8666,4271],
+  [6430,2406,8994,56,1267,3826,9443,7079,7579,5232,6691,3435,6718,5698,4144,7028,592,2627,217,734,6194,8156,9118,58,2640,8069,4127,3285,694,3197,3377,4143,4802,3324,8134,6953,7625,3598,3584,4289,7065,3434,2106,7132,5802,7920,9060,7531,3321,1725,1067,3751,444,5503,6785,7937,6365,4803,198,6266,8177,1470,6390,1606,2904,7555,9834,8667,2033,1723,5167,1666,8546,8152,473,4475,6451,7947,3062,3281],
+  [2810,3042,7759,1741,2275,2609,7676,8640,4117,1958,7500,8048,1757,3954,9270,1971,4796,2912,660,5511,3553,1012,5757,4525,6084,7198,8352,5775,7726,8591,7710,9589,3122,4392,6856,5016,749,2285,3356,7482,9956,7348,2599,8944,495,3462,3578,551,4543,7207,7169,7796,1247,4278,6916,8176,3742,8385,2310,1345,8692,2667,4568,1770,8319,3585,4920,3890,4928,7343,5385,9772,7947,8786,2056,9266,3454,2807,877,2660],
+  [6206,8252,5928,5837,4177,4333,207,7934,5581,9526,8906,1498,8411,2984,5198,5134,2464,8435,8514,8674,3876,599,5327,826,2152,4084,2433,9327,9697,4800,2728,3608,3849,3861,3498,9943,1407,3991,7191,9110,5666,8434,4704,6545,5944,2357,1163,4995,9619,6754,4200,9682,6654,4862,4744,5953,6632,1054,293,9439,8286,2255,696,8709,1533,1844,6441,430,1999,6063,9431,7018,8057,2920,6266,6799,356,3597,4024,6665],
+  [3847,6356,8541,7225,2325,2946,5199,469,5450,7508,2197,9915,8284,7983,6341,3276,3321,16,1321,7608,5015,3362,8491,6968,6818,797,156,2575,706,9516,5344,5457,9210,5051,8099,1617,9951,7663,8253,9683,2670,1261,4710,1068,8753,4799,1228,2621,3275,6188,4699,1791,9518,8701,5932,4275,6011,9877,2933,4182,6059,2930,6687,6682,9771,654,9437,3169,8596,1827,5471,8909,2352,123,4394,3208,8756,5513,6917,2056],
+  [5458,8173,3138,3290,4570,4892,3317,4251,9699,7973,1163,1935,5477,6648,9614,5655,9592,975,9118,2194,7322,8248,8413,3462,8560,1907,7810,6650,7355,2939,4973,6894,3933,3784,3200,2419,9234,4747,2208,2207,1945,2899,1407,6145,8023,3484,5688,7686,2737,3828,3704,9004,5190,9740,8643,8650,5358,4426,1522,1707,3613,9887,6956,2447,2762,833,1449,9489,2573,1080,4167,3456,6809,2466,227,7125,2759,6250,6472,8089],
+  [3266,7025,9756,3914,1265,9116,7723,9788,6805,5493,2092,8688,6592,9173,4431,4028,6007,7131,4446,4815,3648,6701,759,3312,8355,4485,4187,5188,8746,7759,3528,2177,5243,8379,3838,7233,4607,9187,7216,2190,6967,2920,6082,7910,5354,3609,8958,6949,7731,494,8753,8707,1523,4426,3543,7085,647,6771,9847,646,5049,824,8417,5260,2730,5702,2513,9275,4279,2767,8684,1165,9903,4518,55,9682,8963,6005,2102,6523],
+  [1998,8731,936,1479,5259,7064,4085,91,7745,7136,3773,3810,730,8255,2705,2653,9790,6807,2342,355,9344,2668,3690,2028,9679,8102,574,4318,6481,9175,5423,8062,2867,9657,7553,3442,3920,7430,3945,7639,3714,3392,2525,4995,4850,2867,7951,9667,486,9506,9888,781,8866,1702,3795,90,356,1483,4200,2131,6969,5931,486,6880,4404,1084,5169,4910,6567,8335,4686,5043,2614,3352,2667,4513,6472,7471,5720,1616],
+  [8878,1613,1716,868,1906,2681,564,665,5995,2474,7496,3432,9491,9087,8850,8287,669,823,347,6194,2264,2592,7871,7616,8508,4827,760,2676,4660,4881,7572,3811,9032,939,4384,929,7525,8419,5556,9063,662,8887,7026,8534,3111,1454,2082,7598,5726,6687,9647,7608,73,3014,5063,670,5461,5631,3367,9796,8475,7908,5073,1565,5008,5295,4457,1274,4788,1728,338,600,8415,8535,9351,7750,6887,5845,1741,125],
+  [3637,6489,9634,9464,9055,2413,7824,9517,7532,3577,7050,6186,6980,9365,9782,191,870,2497,8498,2218,2757,5420,6468,586,3320,9230,1034,1393,9886,5072,9391,1178,8464,8042,6869,2075,8275,3601,7715,9470,8786,6475,8373,2159,9237,2066,3264,5000,679,355,3069,4073,494,2308,5512,4334,9438,8786,8637,9774,1169,1949,6594,6072,4270,9158,7916,5752,6794,9391,6301,5842,3285,2141,3898,8027,4310,8821,7079,1307],
+  [8497,6681,4732,7151,7060,5204,9030,7157,833,5014,8723,3207,9796,9286,4913,119,5118,7650,9335,809,3675,2597,5144,3945,5090,8384,187,4102,1260,2445,2792,4422,8389,9290,50,1765,1521,6921,8586,4368,1565,5727,7855,2003,4834,9897,5911,8630,5070,1330,7692,7557,7980,6028,5805,9090,8265,3019,3802,698,9149,5748,1965,9658,4417,5994,5584,8226,2937,272,5743,1278,5698,8736,2595,6475,5342,6596,1149,6920],
+  [8188,8009,9546,6310,8772,2500,9846,6592,6872,3857,1307,8125,7042,1544,6159,2330,643,4604,7899,6848,371,8067,2062,3200,7295,1857,9505,6936,384,2193,2190,301,8535,5503,1462,7380,5114,4824,8833,1763,4974,8711,9262,6698,3999,2645,6937,7747,1128,2933,3556,7943,2885,3122,9105,5447,418,2899,5148,3699,9021,9501,597,4084,175,1621,1,1079,6067,5812,4326,9914,6633,5394,4233,6728,9084,1864,5863,1225],
+  [9935,8793,9117,1825,9542,8246,8437,3331,9128,9675,6086,7075,319,1334,7932,3583,7167,4178,1726,7720,695,8277,7887,6359,5912,1719,2780,8529,1359,2013,4498,8072,1129,9998,1147,8804,9405,6255,1619,2165,7491,1,8882,7378,3337,503,5758,4109,3577,985,3200,7615,8058,5032,1080,6410,6873,5496,1466,2412,9885,5904,4406,3605,8770,4361,6205,9193,1537,9959,214,7260,9566,1685,100,4920,7138,9819,5637,976],
+  [3466,9854,985,1078,7222,8888,5466,5379,3578,4540,6853,8690,3728,6351,7147,3134,6921,9692,857,3307,4998,2172,5783,3931,9417,2541,6299,13,787,2099,9131,9494,896,8600,1643,8419,7248,2660,2609,8579,91,6663,5506,7675,1947,6165,4286,1972,9645,3805,1663,1456,8853,5705,9889,7489,1107,383,4044,2969,3343,152,7805,4980,9929,5033,1737,9953,7197,9158,4071,1324,473,9676,3984,9680,3606,8160,7384,5432],
+  [1005,4512,5186,3953,2164,3372,4097,3247,8697,3022,9896,4101,3871,6791,3219,2742,4630,6967,7829,5991,6134,1197,1414,8923,8787,1394,8852,5019,7768,5147,8004,8825,5062,9625,7988,1110,3992,7984,9966,6516,6251,8270,421,3723,1432,4830,6935,8095,9059,2214,6483,6846,3120,1587,6201,6691,9096,9627,6671,4002,3495,9939,7708,7465,5879,6959,6634,3241,3401,2355,9061,2611,7830,3941,2177,2146,5089,7079,519,6351],
+  [7280,8586,4261,2831,7217,3141,9994,9940,5462,2189,4005,6942,9848,5350,8060,6665,7519,4324,7684,657,9453,9296,2944,6843,7499,7847,1728,9681,3906,6353,5529,2822,3355,3897,7724,4257,7489,8672,4356,3983,1948,6892,7415,4153,5893,4190,621,1736,4045,9532,7701,3671,1211,1622,3176,4524,9317,7800,5638,6644,6943,5463,3531,2821,1347,5958,3436,1438,2999,994,850,4131,2616,1549,3465,5946,690,9273,6954,7991],
+  [9517,399,3249,2596,7736,2142,1322,968,7350,1614,468,3346,3265,7222,6086,1661,5317,2582,7959,4685,2807,2917,1037,5698,1529,3972,8716,2634,3301,3412,8621,743,8001,4734,888,7744,8092,3671,8941,1487,5658,7099,2781,99,1932,4443,4756,4652,9328,1581,7855,4312,5976,7255,6480,3996,2748,1973,9731,4530,2790,9417,7186,5303,3557,351,7182,9428,1342,9020,7599,1392,8304,2070,9138,7215,2008,9937,1106,7110],
+  [7444,769,9688,632,1571,6820,8743,4338,337,3366,3073,1946,8219,104,4210,6986,249,5061,8693,7960,6546,1004,8857,5997,9352,4338,6105,5008,2556,6518,6694,4345,3727,7956,20,3954,8652,4424,9387,2035,8358,5962,5304,5194,8650,8282,1256,1103,2138,6679,1985,3653,2770,2433,4278,615,2863,1715,242,3790,2636,6998,3088,1671,2239,957,5411,4595,6282,2881,9974,2401,875,7574,2987,4587,3147,6766,9885,2965],
+  [3287,3016,3619,6818,9073,6120,5423,557,2900,2015,8111,3873,1314,4189,1846,4399,7041,7583,2427,2864,3525,5002,2069,748,1948,6015,2684,438,770,8367,1663,7887,7759,1885,157,7770,4520,4878,3857,1137,3525,3050,6276,5569,7649,904,4533,7843,2199,5648,7628,9075,9441,3600,7231,2388,5640,9096,958,3058,584,5899,8150,1181,9616,1098,8162,6819,8171,1519,1140,7665,8801,2632,1299,9192,707,9955,2710,7314],
+  [1772,2963,7578,3541,3095,1488,7026,2634,6015,4633,4370,2762,1650,2174,909,8158,2922,8467,4198,4280,9092,8856,8835,5457,2790,8574,9742,5054,9547,4156,7940,8126,9824,7340,8840,6574,3547,1477,3014,6798,7134,435,9484,9859,3031,4,1502,4133,1738,1807,4825,463,6343,9701,8506,9822,9555,8688,8168,3467,3234,6318,1787,5591,419,6593,7974,8486,9861,6381,6758,194,3061,4315,2863,4665,3789,2201,1492,4416],
+  [126,8927,6608,5682,8986,6867,1715,6076,3159,788,3140,4744,830,9253,5812,5021,7616,8534,1546,9590,1101,9012,9821,8132,7857,4086,1069,7491,2988,1579,2442,4321,2149,7642,6108,250,6086,3167,24,9528,7663,2685,1220,9196,1397,5776,1577,1730,5481,977,6115,199,6326,2183,3767,5928,5586,7561,663,8649,9688,949,5913,9160,1870,5764,9887,4477,6703,1413,4995,5494,7131,2192,8969,7138,3997,8697,646,1028],
+  [8074,1731,8245,624,4601,8706,155,8891,309,2552,8208,8452,2954,3124,3469,4246,3352,1105,4509,8677,9901,4416,8191,9283,5625,7120,2952,8881,7693,830,4580,8228,9459,8611,4499,1179,4988,1394,550,2336,6089,6872,269,7213,1848,917,6672,4890,656,1478,6536,3165,4743,4990,1176,6211,7207,5284,9730,4738,1549,4986,4942,8645,3698,9429,1439,2175,6549,3058,6513,1574,6988,8333,3406,5245,5431,7140,7085,6407],
+  [7845,4694,2530,8249,290,5948,5509,1588,5940,4495,5866,5021,4626,3979,3296,7589,4854,1998,5627,3926,8346,6512,9608,1918,7070,4747,4182,2858,2766,4606,6269,4107,8982,8568,9053,4244,5604,102,2756,727,5887,2566,7922,44,5986,621,1202,374,6988,4130,3627,6744,9443,4568,1398,8679,397,3928,9159,367,2917,6127,5788,3304,8129,911,2669,1463,9749,264,4478,8940,1109,7309,2462,117,4692,7724,225,2312],
+  [4164,3637,2000,941,8903,39,3443,7172,1031,3687,4901,8082,4945,4515,7204,9310,9349,9535,9940,218,1788,9245,2237,1541,5670,6538,6047,5553,9807,8101,1925,8714,445,8332,7309,6830,5786,5736,7306,2710,3034,1838,7969,6318,7912,2584,2080,7437,6705,2254,7428,820,782,9861,7596,3842,3631,8063,5240,6666,394,4565,7865,4895,9890,6028,6117,4724,9156,4473,4552,602,470,6191,4927,5387,884,3146,1978,3000],
+  [4258,6880,1696,3582,5793,4923,2119,1155,9056,9698,6603,3768,5514,9927,9609,6166,6566,4536,4985,4934,8076,9062,6741,6163,7399,4562,2337,5600,2919,9012,8459,1308,6072,1225,9306,8818,5886,7243,7365,8792,6007,9256,6699,7171,4230,7002,8720,7839,4533,1671,478,7774,1607,2317,5437,4705,7886,4760,6760,7271,3081,2997,3088,7675,6208,3101,6821,6840,122,9633,4900,2067,8546,4549,2091,7188,5605,8599,6758,5229],
+  [7854,5243,9155,3556,8812,7047,2202,1541,5993,4600,4760,713,434,7911,7426,7414,8729,322,803,7960,7563,4908,6285,6291,736,3389,9339,4132,8701,7534,5287,3646,592,3065,7582,2592,8755,6068,8597,1982,5782,1894,2900,6236,4039,6569,3037,5837,7698,700,7815,2491,7272,5878,3083,6778,6639,3589,5010,8313,2581,6617,5869,8402,6808,2951,2321,5195,497,2190,6187,1342,1316,4453,7740,4154,2959,1781,1482,8256],
+  [7178,2046,4419,744,8312,5356,6855,8839,319,2962,5662,47,6307,8662,68,4813,567,2712,9931,1678,3101,8227,6533,4933,6656,92,5846,4780,6256,6361,4323,9985,1231,2175,7178,3034,9744,6155,9165,7787,5836,9318,7860,9644,8941,6480,9443,8188,5928,161,6979,2352,5628,6991,1198,8067,5867,6620,3778,8426,2994,3122,3124,6335,3918,8897,2655,9670,634,1088,1576,8935,7255,474,8166,7417,9547,2886,5560,3842],
+  [6957,3111,26,7530,7143,1295,1744,6057,3009,1854,8098,5405,2234,4874,9447,2620,9303,27,7410,969,40,2966,5648,7596,8637,4238,3143,3679,7187,690,9980,7085,7714,9373,5632,7526,6707,3951,9734,4216,2146,3602,5371,6029,3039,4433,4855,4151,1449,3376,8009,7240,7027,4602,2947,9081,4045,8424,9352,8742,923,2705,4266,3232,2264,6761,363,2651,3383,7770,6730,7856,7340,9679,2158,610,4471,4608,910,6241],
+  [4417,6756,1013,8797,658,8809,5032,8703,7541,846,3357,2920,9817,1745,9980,7593,4667,3087,779,3218,6233,5568,4296,2289,2654,7898,5021,9461,5593,8214,9173,4203,2271,7980,2983,5952,9992,8399,3468,1776,3188,9314,1720,6523,2933,621,8685,5483,8986,6163,3444,9539,4320,155,3992,2828,2150,6071,524,2895,5468,8063,1210,3348,9071,4862,483,9017,4097,6186,9815,3610,5048,1644,1003,9865,9332,2145,1944,2213],
+  [9284,3803,4920,1927,6706,4344,7383,4786,9890,2010,5228,1224,3158,6967,8580,8990,8883,5213,76,8306,2031,4980,5639,9519,7184,5645,7769,3259,8077,9130,1317,3096,9624,3818,1770,695,2454,947,6029,3474,9938,3527,5696,4760,7724,7738,2848,6442,5767,6845,8323,4131,2859,7595,2500,4815,3660,9130,8580,7016,8231,4391,8369,3444,4069,4021,556,6154,627,2778,1496,4206,6356,8434,8491,3816,8231,3190,5575,1015],
+  [3787,7572,1788,6803,5641,6844,1961,4811,8535,9914,9999,1450,8857,738,4662,8569,6679,2225,7839,8618,286,2648,5342,2294,3205,4546,176,8705,3741,6134,8324,8021,7004,5205,7032,6637,9442,5539,5584,4819,5874,5807,8589,6871,9016,983,1758,3786,1519,6241,185,8398,495,3370,9133,3051,4549,9674,7311,9738,3316,9383,2658,2776,9481,7558,619,3943,3324,6491,4933,153,9738,4623,912,3595,7771,7939,1219,4405],
+  [2650,3883,4154,5809,315,7756,4430,1788,4451,1631,6461,7230,6017,5751,138,588,5282,2442,9110,9035,6349,2515,1570,6122,4192,4174,3530,1933,4186,4420,4609,5739,4135,2963,6308,1161,8809,8619,2796,3819,6971,8228,4188,1492,909,8048,2328,6772,8467,7671,9068,2226,7579,6422,7056,8042,3296,2272,3006,2196,7320,3238,3490,3102,37,1293,3212,4767,5041,8773,5794,4456,6174,7279,7054,2835,7053,9088,790,6640],
+  [3101,1057,7057,3826,6077,1025,2955,1224,1114,6729,5902,4698,6239,7203,9423,1804,4417,6686,1426,6941,8071,1029,4985,9010,6122,6597,1622,1574,3513,1684,7086,5505,3244,411,9638,4150,907,9135,829,981,1707,5359,8781,9751,5,9131,3973,7159,1340,6955,7514,7993,6964,8198,1933,2797,877,3993,4453,8020,9349,8646,2779,8679,2961,3547,3374,3510,1129,3568,2241,2625,9138,5974,8206,7669,7678,1833,8700,4480],
+  [4865,9912,8038,8238,782,3095,8199,1127,4501,7280,2112,2487,3626,2790,9432,1475,6312,8277,4827,2218,5806,7132,8752,1468,7471,6386,739,8762,8323,8120,5169,9078,9058,3370,9560,7987,8585,8531,5347,9312,1058,4271,1159,5286,5404,6925,8606,9204,7361,2415,560,586,4002,2644,1927,2824,768,4409,2942,3345,1002,808,4941,6267,7979,5140,8643,7553,9438,7320,4938,2666,4609,2778,8158,6730,3748,3867,1866,7181],
+  [171,3771,7134,8927,4778,2913,3326,2004,3089,7853,1378,1729,4777,2706,9578,1360,5693,3036,1851,7248,2403,2273,8536,6501,9216,613,9671,7131,7719,6425,773,717,8803,160,1114,7554,7197,753,4513,4322,8499,4533,2609,4226,8710,6627,644,9666,6260,4870,5744,7385,6542,6203,7703,6130,8944,5589,2262,6803,6381,7414,6888,5123,7320,9392,9061,6780,322,8975,7050,5089,1061,2260,3199,1150,1865,5386,9699,6501],
+  [3744,8454,6885,8277,919,1923,4001,6864,7854,5519,2491,6057,8794,9645,1776,5714,9786,9281,7538,6916,3215,395,2501,9618,4835,8846,9708,2813,3303,1794,8309,7176,2206,1602,1838,236,4593,2245,8993,4017,10,8215,6921,5206,4023,5932,6997,7801,262,7640,3107,8275,4938,7822,2425,3223,3886,2105,8700,9526,2088,8662,8034,7004,5710,2124,7164,3574,6630,9980,4242,2901,9471,1491,2117,4562,1130,9086,4117,6698],
+  [2810,2280,2331,1170,4554,4071,8387,1215,2274,9848,6738,1604,7281,8805,439,1298,8318,7834,9426,8603,6092,7944,1309,8828,303,3157,4638,4439,9175,1921,4695,7716,1494,1015,1772,5913,1127,1952,1950,8905,4064,9890,385,9357,7945,5035,7082,5369,4093,6546,5187,5637,2041,8946,1758,7111,6566,1027,1049,5148,7224,7248,296,6169,375,1656,7993,2816,3717,4279,4675,1609,3317,42,6201,3100,3144,163,9530,4531],
+  [7096,6070,1009,4988,3538,5801,7149,3063,2324,2912,7911,7002,4338,7880,2481,7368,3516,2016,7556,2193,1388,3865,8125,4637,4096,8114,750,3144,1938,7002,9343,4095,1392,4220,3455,6969,9647,1321,9048,1996,1640,6626,1788,314,9578,6630,2813,6626,4981,9908,7024,4355,3201,3521,3864,3303,464,1923,595,9801,3391,8366,8084,9374,1041,8807,9085,1892,9431,8317,9016,9221,8574,9981,9240,5395,2009,6310,2854,9255],
+  [8830,3145,2960,9615,8220,6061,3452,2918,6481,9278,2297,3385,6565,7066,7316,5682,107,7646,4466,68,1952,9603,8615,54,7191,791,6833,2560,693,9733,4168,570,9127,9537,1925,8287,5508,4297,8452,8795,6213,7994,2420,4208,524,5915,8602,8330,2651,8547,6156,1812,6271,7991,9407,9804,1553,6866,1128,2119,4691,9711,8315,5879,9935,6900,482,682,4126,1041,428,6247,3720,5882,7526,2582,4327,7725,3503,2631],
+  [2738,9323,721,7434,1453,6294,2957,3786,5722,6019,8685,4386,3066,9057,6860,499,5315,3045,5194,7111,3137,9104,941,586,3066,755,4177,8819,7040,5309,3583,3897,4428,7788,4721,7249,6559,7324,825,7311,3760,6064,6070,9672,4882,584,1365,9739,9331,5783,2624,7889,1604,1303,1555,7125,8312,425,8936,3233,7724,1480,403,7440,1784,1754,4721,1569,652,3893,4574,5692,9730,4813,9844,8291,9199,7101,3391,8914],
+  [6044,2928,9332,3328,8588,447,3830,1176,3523,2705,8365,6136,5442,9049,5526,8575,8869,9031,7280,706,2794,8814,5767,4241,7696,78,6570,556,5083,1426,4502,3336,9518,2292,1885,3740,3153,9348,9331,8051,2759,5407,9028,7840,9255,831,515,2612,9747,7435,8964,4971,2048,4900,5967,8271,1719,9670,2810,6777,1594,6367,6259,8316,3815,1689,6840,9437,4361,822,9619,3065,83,6344,7486,8657,8228,9635,6932,4864],
+  [8478,4777,6334,4678,7476,4963,6735,3096,5860,1405,5127,7269,7793,4738,227,9168,2996,8928,765,733,1276,7677,6258,1528,9558,3329,302,8901,1422,8277,6340,645,9125,8869,5952,141,8141,1816,9635,4025,4184,3093,83,2344,2747,9352,7966,1206,1126,1826,218,7939,2957,2729,810,8752,5247,4174,4038,8884,7899,9567,301,5265,5752,7524,4381,1669,3106,8270,6228,6373,754,2547,4240,2313,5514,3022,1040,9738],
+  [2265,8192,1763,1369,8469,8789,4836,52,1212,6690,5257,8918,6723,6319,378,4039,2421,8555,8184,9577,1432,7139,8078,5452,9628,7579,4161,7490,5159,8559,1011,81,478,5840,1964,1334,6875,8670,9900,739,1514,8692,522,9316,6955,1345,8132,2277,3193,9773,3923,4177,2183,1236,6747,6575,4874,6003,6409,8187,745,8776,9440,7543,9825,2582,7381,8147,7236,5185,7564,6125,218,7991,6394,391,7659,7456,5128,5294],
+  [2132,8992,8160,5782,4420,3371,3798,5054,552,5631,7546,4716,1332,6486,7892,7441,4370,6231,4579,2121,8615,1145,9391,1524,1385,2400,9437,2454,7896,7467,2928,8400,3299,4025,7458,4703,7206,6358,792,6200,725,4275,4136,7390,5984,4502,7929,5085,8176,4600,119,3568,76,9363,6943,2248,9077,9731,6213,5817,6729,4190,3092,6910,759,2682,8380,1254,9604,3011,9291,5329,9453,9746,2739,6522,3765,5634,1113,5789],
+  [5304,5499,564,2801,679,2653,1783,3608,7359,7797,3284,796,3222,437,7185,6135,8571,2778,7488,5746,678,6140,861,7750,803,9859,9918,2425,3734,2698,9005,4864,9818,6743,2475,132,9486,3825,5472,919,292,4411,7213,7699,6435,9019,6769,1388,802,2124,1345,8493,9487,8558,7061,8777,8833,2427,2238,5409,4957,8503,3171,7622,5779,6145,2417,5873,5563,5693,9574,9491,1937,7384,4563,6842,5432,2751,3406,7981]
+];
+```
+
+## --seed-contents--
+
+```js
+function pathSumThreeWays(matrix) {
+
+  return true;
+}
+
+// Only change code above this line
+
+const testMatrix1 = [
+  [131, 673, 234, 103, 18],
+  [201, 96, 342, 965, 150],
+  [630, 803, 746, 422, 111],
+  [537, 699, 497, 121, 956],
+  [805, 732, 524, 37, 331]
+];
+
+pathSumThreeWays(testMatrix1);
+```
+
+# --solutions--
+
+```js
+function pathSumThreeWays(matrix) {
+  function makeMinimumMoveFromUpOrRight(row, column) {
+    const curValue = matrix[row][column];
+    if (values[row - 1] > values[row]) {
+      return values[row] + curValue;
+    }
+    return values[row - 1] + curValue;
+  }
+  function isGoingFromDownBetter(row, column) {
+    return values[row] > values[row + 1] + matrix[row][column];
+  }
+
+  const size = matrix.length;
+  const values = [];
+  for (let row = 0; row < size; row++) {
+    values.push(matrix[row][size - 1]);
+  }
+
+  for (let column = size - 2; column >= 0; column--) {
+    values[0] += matrix[0][column];
+
+    for (let row = 1; row < size; row++) {
+      values[row] = makeMinimumMoveFromUpOrRight(row, column);
+    }
+
+    for (let row = size - 2; row >= 0; row--) {
+      if (isGoingFromDownBetter(row, column)) {
+        values[row] = values[row + 1] + matrix[row][column];
+      }
+    }
+  }
+
+  return Math.min(...values);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-83-path-sum-four-ways.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-83-path-sum-four-ways.md
new file mode 100644
index 00000000000..8d3b60e0c0b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-83-path-sum-four-ways.md
@@ -0,0 +1,215 @@
+---
+id: 5900f3bf1000cf542c50fed2
+title: 'Problem 83: Path sum: four ways'
+challengeType: 1
+forumTopicId: 302197
+dashedName: problem-83-path-sum-four-ways
+---
+
+# --description--
+
+**Note:** This problem is a significantly more challenging version of Problem 81.
+
+In the 5 by 5 matrix below, the minimal path sum from the top left to the bottom right, by moving left, right, up, and down, is indicated in bold red and is equal to `2297`.
+
+  $$\begin{pmatrix}   \color{red}{131} & 673 & \color{red}{234} & \color{red}{103} & \color{red}{18}\\\\
+  \color{red}{201} & \color{red}{96} & \color{red}{342} & 965 & \color{red}{150}\\\\   630 & 803 & 746 & \color{red}{422} & \color{red}{111}\\\\
+  537 & 699 & 497 & \color{red}{121} & 956\\\\ 805 & 732 & 524 & \color{red}{37} & \color{red}{331} \end{pmatrix}$$
+
+Find the minimal path sum from the top left to the bottom right by moving left, right, up, and down in `matrix`, a 2D array representing a matrix. The maximum matrix size used in tests will be 80 by 80.
+
+# --hints--
+
+`pathSumFourWays(testMatrix1)` should return a number.
+
+```js
+assert(typeof pathSumFourWays(_testMatrix1) === 'number');
+```
+
+`pathSumFourWays(testMatrix1)` should return `2297`.
+
+```js
+assert.strictEqual(pathSumFourWays(_testMatrix1), 2297);
+```
+
+`pathSumFourWays(testMatrix2)` should return `425185`.
+
+```js
+assert.strictEqual(pathSumFourWays(_testMatrix2), 425185);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testMatrix1 = [
+  [131, 673, 234, 103, 18],
+  [201, 96, 342, 965, 150],
+  [630, 803, 746, 422, 111],
+  [537, 699, 497, 121, 956],
+  [805, 732, 524, 37, 331]
+];
+const _testMatrix2 = [
+  [4445,2697,5115,718,2209,2212,654,4348,3079,6821,7668,3276,8874,4190,3785,2752,9473,7817,9137,496,7338,3434,7152,4355,4552,7917,7827,2460,2350,691,3514,5880,3145,7633,7199,3783,5066,7487,3285,1084,8985,760,872,8609,8051,1134,9536,5750,9716,9371,7619,5617,275,9721,2997,2698,1887,8825,6372,3014,2113,7122,7050,6775,5948,2758,1219,3539,348,7989,2735,9862,1263,8089,6401,9462,3168,2758,3748,5870],
+  [1096,20,1318,7586,5167,2642,1443,5741,7621,7030,5526,4244,2348,4641,9827,2448,6918,5883,3737,300,7116,6531,567,5997,3971,6623,820,6148,3287,1874,7981,8424,7672,7575,6797,6717,1078,5008,4051,8795,5820,346,1851,6463,2117,6058,3407,8211,117,4822,1317,4377,4434,5925,8341,4800,1175,4173,690,8978,7470,1295,3799,8724,3509,9849,618,3320,7068,9633,2384,7175,544,6583,1908,9983,481,4187,9353,9377],
+  [9607,7385,521,6084,1364,8983,7623,1585,6935,8551,2574,8267,4781,3834,2764,2084,2669,4656,9343,7709,2203,9328,8004,6192,5856,3555,2260,5118,6504,1839,9227,1259,9451,1388,7909,5733,6968,8519,9973,1663,5315,7571,3035,4325,4283,2304,6438,3815,9213,9806,9536,196,5542,6907,2475,1159,5820,9075,9470,2179,9248,1828,4592,9167,3713,4640,47,3637,309,7344,6955,346,378,9044,8635,7466,5036,9515,6385,9230],
+  [7206,3114,7760,1094,6150,5182,7358,7387,4497,955,101,1478,7777,6966,7010,8417,6453,4955,3496,107,449,8271,131,2948,6185,784,5937,8001,6104,8282,4165,3642,710,2390,575,715,3089,6964,4217,192,5949,7006,715,3328,1152,66,8044,4319,1735,146,4818,5456,6451,4113,1063,4781,6799,602,1504,6245,6550,1417,1343,2363,3785,5448,4545,9371,5420,5068,4613,4882,4241,5043,7873,8042,8434,3939,9256,2187],
+  [3620,8024,577,9997,7377,7682,1314,1158,6282,6310,1896,2509,5436,1732,9480,706,496,101,6232,7375,2207,2306,110,6772,3433,2878,8140,5933,8688,1399,2210,7332,6172,6403,7333,4044,2291,1790,2446,7390,8698,5723,3678,7104,1825,2040,140,3982,4905,4160,2200,5041,2512,1488,2268,1175,7588,8321,8078,7312,977,5257,8465,5068,3453,3096,1651,7906,253,9250,6021,8791,8109,6651,3412,345,4778,5152,4883,7505],
+  [1074,5438,9008,2679,5397,5429,2652,3403,770,9188,4248,2493,4361,8327,9587,707,9525,5913,93,1899,328,2876,3604,673,8576,6908,7659,2544,3359,3883,5273,6587,3065,1749,3223,604,9925,6941,2823,8767,7039,3290,3214,1787,7904,3421,7137,9560,8451,2669,9219,6332,1576,5477,6755,8348,4164,4307,2984,4012,6629,1044,2874,6541,4942,903,1404,9125,5160,8836,4345,2581,460,8438,1538,5507,668,3352,2678,6942],
+  [4295,1176,5596,1521,3061,9868,7037,7129,8933,6659,5947,5063,3653,9447,9245,2679,767,714,116,8558,163,3927,8779,158,5093,2447,5782,3967,1716,931,7772,8164,1117,9244,5783,7776,3846,8862,6014,2330,6947,1777,3112,6008,3491,1906,5952,314,4602,8994,5919,9214,3995,5026,7688,6809,5003,3128,2509,7477,110,8971,3982,8539,2980,4689,6343,5411,2992,5270,5247,9260,2269,7474,1042,7162,5206,1232,4556,4757],
+  [510,3556,5377,1406,5721,4946,2635,7847,4251,8293,8281,6351,4912,287,2870,3380,3948,5322,3840,4738,9563,1906,6298,3234,8959,1562,6297,8835,7861,239,6618,1322,2553,2213,5053,5446,4402,6500,5182,8585,6900,5756,9661,903,5186,7687,5998,7997,8081,8955,4835,6069,2621,1581,732,9564,1082,1853,5442,1342,520,1737,3703,5321,4793,2776,1508,1647,9101,2499,6891,4336,7012,3329,3212,1442,9993,3988,4930,7706],
+  [9444,3401,5891,9716,1228,7107,109,3563,2700,6161,5039,4992,2242,8541,7372,2067,1294,3058,1306,320,8881,5756,9326,411,8650,8824,5495,8282,8397,2000,1228,7817,2099,6473,3571,5994,4447,1299,5991,543,7874,2297,1651,101,2093,3463,9189,6872,6118,872,1008,1779,2805,9084,4048,2123,5877,55,3075,1737,9459,4535,6453,3644,108,5982,4437,5213,1340,6967,9943,5815,669,8074,1838,6979,9132,9315,715,5048],
+  [3327,4030,7177,6336,9933,5296,2621,4785,2755,4832,2512,2118,2244,4407,2170,499,7532,9742,5051,7687,970,6924,3527,4694,5145,1306,2165,5940,2425,8910,3513,1909,6983,346,6377,4304,9330,7203,6605,3709,3346,970,369,9737,5811,4427,9939,3693,8436,5566,1977,3728,2399,3985,8303,2492,5366,9802,9193,7296,1033,5060,9144,2766,1151,7629,5169,5995,58,7619,7565,4208,1713,6279,3209,4908,9224,7409,1325,8540],
+  [6882,1265,1775,3648,4690,959,5837,4520,5394,1378,9485,1360,4018,578,9174,2932,9890,3696,116,1723,1178,9355,7063,1594,1918,8574,7594,7942,1547,6166,7888,354,6932,4651,1010,7759,6905,661,7689,6092,9292,3845,9605,8443,443,8275,5163,7720,7265,6356,7779,1798,1754,5225,6661,1180,8024,5666,88,9153,1840,3508,1193,4445,2648,3538,6243,6375,8107,5902,5423,2520,1122,5015,6113,8859,9370,966,8673,2442],
+  [7338,3423,4723,6533,848,8041,7921,8277,4094,5368,7252,8852,9166,2250,2801,6125,8093,5738,4038,9808,7359,9494,601,9116,4946,2702,5573,2921,9862,1462,1269,2410,4171,2709,7508,6241,7522,615,2407,8200,4189,5492,5649,7353,2590,5203,4274,710,7329,9063,956,8371,3722,4253,4785,1194,4828,4717,4548,940,983,2575,4511,2938,1827,2027,2700,1236,841,5760,1680,6260,2373,3851,1841,4968,1172,5179,7175,3509],
+  [4420,1327,3560,2376,6260,2988,9537,4064,4829,8872,9598,3228,1792,7118,9962,9336,4368,9189,6857,1829,9863,6287,7303,7769,2707,8257,2391,2009,3975,4993,3068,9835,3427,341,8412,2134,4034,8511,6421,3041,9012,2983,7289,100,1355,7904,9186,6920,5856,2008,6545,8331,3655,5011,839,8041,9255,6524,3862,8788,62,7455,3513,5003,8413,3918,2076,7960,6108,3638,6999,3436,1441,4858,4181,1866,8731,7745,3744,1000],
+  [356,8296,8325,1058,1277,4743,3850,2388,6079,6462,2815,5620,8495,5378,75,4324,3441,9870,1113,165,1544,1179,2834,562,6176,2313,6836,8839,2986,9454,5199,6888,1927,5866,8760,320,1792,8296,7898,6121,7241,5886,5814,2815,8336,1576,4314,3109,2572,6011,2086,9061,9403,3947,5487,9731,7281,3159,1819,1334,3181,5844,5114,9898,4634,2531,4412,6430,4262,8482,4546,4555,6804,2607,9421,686,8649,8860,7794,6672],
+  [9870,152,1558,4963,8750,4754,6521,6256,8818,5208,5691,9659,8377,9725,5050,5343,2539,6101,1844,9700,7750,8114,5357,3001,8830,4438,199,9545,8496,43,2078,327,9397,106,6090,8181,8646,6414,7499,5450,4850,6273,5014,4131,7639,3913,6571,8534,9703,4391,7618,445,1320,5,1894,6771,7383,9191,4708,9706,6939,7937,8726,9382,5216,3685,2247,9029,8154,1738,9984,2626,9438,4167,6351,5060,29,1218,1239,4785],
+  [192,5213,8297,8974,4032,6966,5717,1179,6523,4679,9513,1481,3041,5355,9303,9154,1389,8702,6589,7818,6336,3539,5538,3094,6646,6702,6266,2759,4608,4452,617,9406,8064,6379,444,5602,4950,1810,8391,1536,316,8714,1178,5182,5863,5110,5372,4954,1978,2971,5680,4863,2255,4630,5723,2168,538,1692,1319,7540,440,6430,6266,7712,7385,5702,620,641,3136,7350,1478,3155,2820,9109,6261,1122,4470,14,8493,2095],
+  [1046,4301,6082,474,4974,7822,2102,5161,5172,6946,8074,9716,6586,9962,9749,5015,2217,995,5388,4402,7652,6399,6539,1349,8101,3677,1328,9612,7922,2879,231,5887,2655,508,4357,4964,3554,5930,6236,7384,4614,280,3093,9600,2110,7863,2631,6626,6620,68,1311,7198,7561,1768,5139,1431,221,230,2940,968,5283,6517,2146,1646,869,9402,7068,8645,7058,1765,9690,4152,2926,9504,2939,7504,6074,2944,6470,7859],
+  [4659,736,4951,9344,1927,6271,8837,8711,3241,6579,7660,5499,5616,3743,5801,4682,9748,8796,779,1833,4549,8138,4026,775,4170,2432,4174,3741,7540,8017,2833,4027,396,811,2871,1150,9809,2719,9199,8504,1224,540,2051,3519,7982,7367,2761,308,3358,6505,2050,4836,5090,7864,805,2566,2409,6876,3361,8622,5572,5895,3280,441,7893,8105,1634,2929,274,3926,7786,6123,8233,9921,2674,5340,1445,203,4585,3837],
+  [5759,338,7444,7968,7742,3755,1591,4839,1705,650,7061,2461,9230,9391,9373,2413,1213,431,7801,4994,2380,2703,6161,6878,8331,2538,6093,1275,5065,5062,2839,582,1014,8109,3525,1544,1569,8622,7944,2905,6120,1564,1839,5570,7579,1318,2677,5257,4418,5601,7935,7656,5192,1864,5886,6083,5580,6202,8869,1636,7907,4759,9082,5854,3185,7631,6854,5872,5632,5280,1431,2077,9717,7431,4256,8261,9680,4487,4752,4286],
+  [1571,1428,8599,1230,7772,4221,8523,9049,4042,8726,7567,6736,9033,2104,4879,4967,6334,6716,3994,1269,8995,6539,3610,7667,6560,6065,874,848,4597,1711,7161,4811,6734,5723,6356,6026,9183,2586,5636,1092,7779,7923,8747,6887,7505,9909,1792,3233,4526,3176,1508,8043,720,5212,6046,4988,709,5277,8256,3642,1391,5803,1468,2145,3970,6301,7767,2359,8487,9771,8785,7520,856,1605,8972,2402,2386,991,1383,5963],
+  [1822,4824,5957,6511,9868,4113,301,9353,6228,2881,2966,6956,9124,9574,9233,1601,7340,973,9396,540,4747,8590,9535,3650,7333,7583,4806,3593,2738,8157,5215,8472,2284,9473,3906,6982,5505,6053,7936,6074,7179,6688,1564,1103,6860,5839,2022,8490,910,7551,7805,881,7024,1855,9448,4790,1274,3672,2810,774,7623,4223,4850,6071,9975,4935,1915,9771,6690,3846,517,463,7624,4511,614,6394,3661,7409,1395,8127],
+  [8738,3850,9555,3695,4383,2378,87,6256,6740,7682,9546,4255,6105,2000,1851,4073,8957,9022,6547,5189,2487,303,9602,7833,1628,4163,6678,3144,8589,7096,8913,5823,4890,7679,1212,9294,5884,2972,3012,3359,7794,7428,1579,4350,7246,4301,7779,7790,3294,9547,4367,3549,1958,8237,6758,3497,3250,3456,6318,1663,708,7714,6143,6890,3428,6853,9334,7992,591,6449,9786,1412,8500,722,5468,1371,108,3939,4199,2535],
+  [7047,4323,1934,5163,4166,461,3544,2767,6554,203,6098,2265,9078,2075,4644,6641,8412,9183,487,101,7566,5622,1975,5726,2920,5374,7779,5631,3753,3725,2672,3621,4280,1162,5812,345,8173,9785,1525,955,5603,2215,2580,5261,2765,2990,5979,389,3907,2484,1232,5933,5871,3304,1138,1616,5114,9199,5072,7442,7245,6472,4760,6359,9053,7876,2564,9404,3043,9026,2261,3374,4460,7306,2326,966,828,3274,1712,3446],
+  [3975,4565,8131,5800,4570,2306,8838,4392,9147,11,3911,7118,9645,4994,2028,6062,5431,2279,8752,2658,7836,994,7316,5336,7185,3289,1898,9689,2331,5737,3403,1124,2679,3241,7748,16,2724,5441,6640,9368,9081,5618,858,4969,17,2103,6035,8043,7475,2181,939,415,1617,8500,8253,2155,7843,7974,7859,1746,6336,3193,2617,8736,4079,6324,6645,8891,9396,5522,6103,1857,8979,3835,2475,1310,7422,610,8345,7615],
+  [9248,5397,5686,2988,3446,4359,6634,9141,497,9176,6773,7448,1907,8454,916,1596,2241,1626,1384,2741,3649,5362,8791,7170,2903,2475,5325,6451,924,3328,522,90,4813,9737,9557,691,2388,1383,4021,1609,9206,4707,5200,7107,8104,4333,9860,5013,1224,6959,8527,1877,4545,7772,6268,621,4915,9349,5970,706,9583,3071,4127,780,8231,3017,9114,3836,7503,2383,1977,4870,8035,2379,9704,1037,3992,3642,1016,4303],
+  [5093,138,4639,6609,1146,5565,95,7521,9077,2272,974,4388,2465,2650,722,4998,3567,3047,921,2736,7855,173,2065,4238,1048,5,6847,9548,8632,9194,5942,4777,7910,8971,6279,7253,2516,1555,1833,3184,9453,9053,6897,7808,8629,4877,1871,8055,4881,7639,1537,7701,2508,7564,5845,5023,2304,5396,3193,2955,1088,3801,6203,1748,3737,1276,13,4120,7715,8552,3047,2921,106,7508,304,1280,7140,2567,9135,5266],
+  [6237,4607,7527,9047,522,7371,4883,2540,5867,6366,5301,1570,421,276,3361,527,6637,4861,2401,7522,5808,9371,5298,2045,5096,5447,7755,5115,7060,8529,4078,1943,1697,1764,5453,7085,960,2405,739,2100,5800,728,9737,5704,5693,1431,8979,6428,673,7540,6,7773,5857,6823,150,5869,8486,684,5816,9626,7451,5579,8260,3397,5322,6920,1879,2127,2884,5478,4977,9016,6165,6292,3062,5671,5968,78,4619,4763],
+  [9905,7127,9390,5185,6923,3721,9164,9705,4341,1031,1046,5127,7376,6528,3248,4941,1178,7889,3364,4486,5358,9402,9158,8600,1025,874,1839,1783,309,9030,1843,845,8398,1433,7118,70,8071,2877,3904,8866,6722,4299,10,1929,5897,4188,600,1889,3325,2485,6473,4474,7444,6992,4846,6166,4441,2283,2629,4352,7775,1101,2214,9985,215,8270,9750,2740,8361,7103,5930,8664,9690,8302,9267,344,2077,1372,1880,9550],
+  [5825,8517,7769,2405,8204,1060,3603,7025,478,8334,1997,3692,7433,9101,7294,7498,9415,5452,3850,3508,6857,9213,6807,4412,7310,854,5384,686,4978,892,8651,3241,2743,3801,3813,8588,6701,4416,6990,6490,3197,6838,6503,114,8343,5844,8646,8694,65,791,5979,2687,2621,2019,8097,1423,3644,9764,4921,3266,3662,5561,2476,8271,8138,6147,1168,3340,1998,9874,6572,9873,6659,5609,2711,3931,9567,4143,7833,8887],
+  [6223,2099,2700,589,4716,8333,1362,5007,2753,2848,4441,8397,7192,8191,4916,9955,6076,3370,6396,6971,3156,248,3911,2488,4930,2458,7183,5455,170,6809,6417,3390,1956,7188,577,7526,2203,968,8164,479,8699,7915,507,6393,4632,1597,7534,3604,618,3280,6061,9793,9238,8347,568,9645,2070,5198,6482,5000,9212,6655,5961,7513,1323,3872,6170,3812,4146,2736,67,3151,5548,2781,9679,7564,5043,8587,1893,4531],
+  [5826,3690,6724,2121,9308,6986,8106,6659,2142,1642,7170,2877,5757,6494,8026,6571,8387,9961,6043,9758,9607,6450,8631,8334,7359,5256,8523,2225,7487,1977,9555,8048,5763,2414,4948,4265,2427,8978,8088,8841,9208,9601,5810,9398,8866,9138,4176,5875,7212,3272,6759,5678,7649,4922,5422,1343,8197,3154,3600,687,1028,4579,2084,9467,4492,7262,7296,6538,7657,7134,2077,1505,7332,6890,8964,4879,7603,7400,5973,739],
+  [1861,1613,4879,1884,7334,966,2000,7489,2123,4287,1472,3263,4726,9203,1040,4103,6075,6049,330,9253,4062,4268,1635,9960,577,1320,3195,9628,1030,4092,4979,6474,6393,2799,6967,8687,7724,7392,9927,2085,3200,6466,8702,265,7646,8665,7986,7266,4574,6587,612,2724,704,3191,8323,9523,3002,704,5064,3960,8209,2027,2758,8393,4875,4641,9584,6401,7883,7014,768,443,5490,7506,1852,2005,8850,5776,4487,4269],
+  [4052,6687,4705,7260,6645,6715,3706,5504,8672,2853,1136,8187,8203,4016,871,1809,1366,4952,9294,5339,6872,2645,6083,7874,3056,5218,7485,8796,7401,3348,2103,426,8572,4163,9171,3176,948,7654,9344,3217,1650,5580,7971,2622,76,2874,880,2034,9929,1546,2659,5811,3754,7096,7436,9694,9960,7415,2164,953,2360,4194,2397,1047,2196,6827,575,784,2675,8821,6802,7972,5996,6699,2134,7577,2887,1412,4349,4380],
+  [4629,2234,6240,8132,7592,3181,6389,1214,266,1910,2451,8784,2790,1127,6932,1447,8986,2492,5476,397,889,3027,7641,5083,5776,4022,185,3364,5701,2442,2840,4160,9525,4828,6602,2614,7447,3711,4505,7745,8034,6514,4907,2605,7753,6958,7270,6936,3006,8968,439,2326,4652,3085,3425,9863,5049,5361,8688,297,7580,8777,7916,6687,8683,7141,306,9569,2384,1500,3346,4601,7329,9040,6097,2727,6314,4501,4974,2829],
+  [8316,4072,2025,6884,3027,1808,5714,7624,7880,8528,4205,8686,7587,3230,1139,7273,6163,6986,3914,9309,1464,9359,4474,7095,2212,7302,2583,9462,7532,6567,1606,4436,8981,5612,6796,4385,5076,2007,6072,3678,8331,1338,3299,8845,4783,8613,4071,1232,6028,2176,3990,2148,3748,103,9453,538,6745,9110,926,3125,473,5970,8728,7072,9062,1404,1317,5139,9862,6496,6062,3338,464,1600,2532,1088,8232,7739,8274,3873],
+  [2341,523,7096,8397,8301,6541,9844,244,4993,2280,7689,4025,4196,5522,7904,6048,2623,9258,2149,9461,6448,8087,7245,1917,8340,7127,8466,5725,6996,3421,5313,512,9164,9837,9794,8369,4185,1488,7210,1524,1016,4620,9435,2478,7765,8035,697,6677,3724,6988,5853,7662,3895,9593,1185,4727,6025,5734,7665,3070,138,8469,6748,6459,561,7935,8646,2378,462,7755,3115,9690,8877,3946,2728,8793,244,6323,8666,4271],
+  [6430,2406,8994,56,1267,3826,9443,7079,7579,5232,6691,3435,6718,5698,4144,7028,592,2627,217,734,6194,8156,9118,58,2640,8069,4127,3285,694,3197,3377,4143,4802,3324,8134,6953,7625,3598,3584,4289,7065,3434,2106,7132,5802,7920,9060,7531,3321,1725,1067,3751,444,5503,6785,7937,6365,4803,198,6266,8177,1470,6390,1606,2904,7555,9834,8667,2033,1723,5167,1666,8546,8152,473,4475,6451,7947,3062,3281],
+  [2810,3042,7759,1741,2275,2609,7676,8640,4117,1958,7500,8048,1757,3954,9270,1971,4796,2912,660,5511,3553,1012,5757,4525,6084,7198,8352,5775,7726,8591,7710,9589,3122,4392,6856,5016,749,2285,3356,7482,9956,7348,2599,8944,495,3462,3578,551,4543,7207,7169,7796,1247,4278,6916,8176,3742,8385,2310,1345,8692,2667,4568,1770,8319,3585,4920,3890,4928,7343,5385,9772,7947,8786,2056,9266,3454,2807,877,2660],
+  [6206,8252,5928,5837,4177,4333,207,7934,5581,9526,8906,1498,8411,2984,5198,5134,2464,8435,8514,8674,3876,599,5327,826,2152,4084,2433,9327,9697,4800,2728,3608,3849,3861,3498,9943,1407,3991,7191,9110,5666,8434,4704,6545,5944,2357,1163,4995,9619,6754,4200,9682,6654,4862,4744,5953,6632,1054,293,9439,8286,2255,696,8709,1533,1844,6441,430,1999,6063,9431,7018,8057,2920,6266,6799,356,3597,4024,6665],
+  [3847,6356,8541,7225,2325,2946,5199,469,5450,7508,2197,9915,8284,7983,6341,3276,3321,16,1321,7608,5015,3362,8491,6968,6818,797,156,2575,706,9516,5344,5457,9210,5051,8099,1617,9951,7663,8253,9683,2670,1261,4710,1068,8753,4799,1228,2621,3275,6188,4699,1791,9518,8701,5932,4275,6011,9877,2933,4182,6059,2930,6687,6682,9771,654,9437,3169,8596,1827,5471,8909,2352,123,4394,3208,8756,5513,6917,2056],
+  [5458,8173,3138,3290,4570,4892,3317,4251,9699,7973,1163,1935,5477,6648,9614,5655,9592,975,9118,2194,7322,8248,8413,3462,8560,1907,7810,6650,7355,2939,4973,6894,3933,3784,3200,2419,9234,4747,2208,2207,1945,2899,1407,6145,8023,3484,5688,7686,2737,3828,3704,9004,5190,9740,8643,8650,5358,4426,1522,1707,3613,9887,6956,2447,2762,833,1449,9489,2573,1080,4167,3456,6809,2466,227,7125,2759,6250,6472,8089],
+  [3266,7025,9756,3914,1265,9116,7723,9788,6805,5493,2092,8688,6592,9173,4431,4028,6007,7131,4446,4815,3648,6701,759,3312,8355,4485,4187,5188,8746,7759,3528,2177,5243,8379,3838,7233,4607,9187,7216,2190,6967,2920,6082,7910,5354,3609,8958,6949,7731,494,8753,8707,1523,4426,3543,7085,647,6771,9847,646,5049,824,8417,5260,2730,5702,2513,9275,4279,2767,8684,1165,9903,4518,55,9682,8963,6005,2102,6523],
+  [1998,8731,936,1479,5259,7064,4085,91,7745,7136,3773,3810,730,8255,2705,2653,9790,6807,2342,355,9344,2668,3690,2028,9679,8102,574,4318,6481,9175,5423,8062,2867,9657,7553,3442,3920,7430,3945,7639,3714,3392,2525,4995,4850,2867,7951,9667,486,9506,9888,781,8866,1702,3795,90,356,1483,4200,2131,6969,5931,486,6880,4404,1084,5169,4910,6567,8335,4686,5043,2614,3352,2667,4513,6472,7471,5720,1616],
+  [8878,1613,1716,868,1906,2681,564,665,5995,2474,7496,3432,9491,9087,8850,8287,669,823,347,6194,2264,2592,7871,7616,8508,4827,760,2676,4660,4881,7572,3811,9032,939,4384,929,7525,8419,5556,9063,662,8887,7026,8534,3111,1454,2082,7598,5726,6687,9647,7608,73,3014,5063,670,5461,5631,3367,9796,8475,7908,5073,1565,5008,5295,4457,1274,4788,1728,338,600,8415,8535,9351,7750,6887,5845,1741,125],
+  [3637,6489,9634,9464,9055,2413,7824,9517,7532,3577,7050,6186,6980,9365,9782,191,870,2497,8498,2218,2757,5420,6468,586,3320,9230,1034,1393,9886,5072,9391,1178,8464,8042,6869,2075,8275,3601,7715,9470,8786,6475,8373,2159,9237,2066,3264,5000,679,355,3069,4073,494,2308,5512,4334,9438,8786,8637,9774,1169,1949,6594,6072,4270,9158,7916,5752,6794,9391,6301,5842,3285,2141,3898,8027,4310,8821,7079,1307],
+  [8497,6681,4732,7151,7060,5204,9030,7157,833,5014,8723,3207,9796,9286,4913,119,5118,7650,9335,809,3675,2597,5144,3945,5090,8384,187,4102,1260,2445,2792,4422,8389,9290,50,1765,1521,6921,8586,4368,1565,5727,7855,2003,4834,9897,5911,8630,5070,1330,7692,7557,7980,6028,5805,9090,8265,3019,3802,698,9149,5748,1965,9658,4417,5994,5584,8226,2937,272,5743,1278,5698,8736,2595,6475,5342,6596,1149,6920],
+  [8188,8009,9546,6310,8772,2500,9846,6592,6872,3857,1307,8125,7042,1544,6159,2330,643,4604,7899,6848,371,8067,2062,3200,7295,1857,9505,6936,384,2193,2190,301,8535,5503,1462,7380,5114,4824,8833,1763,4974,8711,9262,6698,3999,2645,6937,7747,1128,2933,3556,7943,2885,3122,9105,5447,418,2899,5148,3699,9021,9501,597,4084,175,1621,1,1079,6067,5812,4326,9914,6633,5394,4233,6728,9084,1864,5863,1225],
+  [9935,8793,9117,1825,9542,8246,8437,3331,9128,9675,6086,7075,319,1334,7932,3583,7167,4178,1726,7720,695,8277,7887,6359,5912,1719,2780,8529,1359,2013,4498,8072,1129,9998,1147,8804,9405,6255,1619,2165,7491,1,8882,7378,3337,503,5758,4109,3577,985,3200,7615,8058,5032,1080,6410,6873,5496,1466,2412,9885,5904,4406,3605,8770,4361,6205,9193,1537,9959,214,7260,9566,1685,100,4920,7138,9819,5637,976],
+  [3466,9854,985,1078,7222,8888,5466,5379,3578,4540,6853,8690,3728,6351,7147,3134,6921,9692,857,3307,4998,2172,5783,3931,9417,2541,6299,13,787,2099,9131,9494,896,8600,1643,8419,7248,2660,2609,8579,91,6663,5506,7675,1947,6165,4286,1972,9645,3805,1663,1456,8853,5705,9889,7489,1107,383,4044,2969,3343,152,7805,4980,9929,5033,1737,9953,7197,9158,4071,1324,473,9676,3984,9680,3606,8160,7384,5432],
+  [1005,4512,5186,3953,2164,3372,4097,3247,8697,3022,9896,4101,3871,6791,3219,2742,4630,6967,7829,5991,6134,1197,1414,8923,8787,1394,8852,5019,7768,5147,8004,8825,5062,9625,7988,1110,3992,7984,9966,6516,6251,8270,421,3723,1432,4830,6935,8095,9059,2214,6483,6846,3120,1587,6201,6691,9096,9627,6671,4002,3495,9939,7708,7465,5879,6959,6634,3241,3401,2355,9061,2611,7830,3941,2177,2146,5089,7079,519,6351],
+  [7280,8586,4261,2831,7217,3141,9994,9940,5462,2189,4005,6942,9848,5350,8060,6665,7519,4324,7684,657,9453,9296,2944,6843,7499,7847,1728,9681,3906,6353,5529,2822,3355,3897,7724,4257,7489,8672,4356,3983,1948,6892,7415,4153,5893,4190,621,1736,4045,9532,7701,3671,1211,1622,3176,4524,9317,7800,5638,6644,6943,5463,3531,2821,1347,5958,3436,1438,2999,994,850,4131,2616,1549,3465,5946,690,9273,6954,7991],
+  [9517,399,3249,2596,7736,2142,1322,968,7350,1614,468,3346,3265,7222,6086,1661,5317,2582,7959,4685,2807,2917,1037,5698,1529,3972,8716,2634,3301,3412,8621,743,8001,4734,888,7744,8092,3671,8941,1487,5658,7099,2781,99,1932,4443,4756,4652,9328,1581,7855,4312,5976,7255,6480,3996,2748,1973,9731,4530,2790,9417,7186,5303,3557,351,7182,9428,1342,9020,7599,1392,8304,2070,9138,7215,2008,9937,1106,7110],
+  [7444,769,9688,632,1571,6820,8743,4338,337,3366,3073,1946,8219,104,4210,6986,249,5061,8693,7960,6546,1004,8857,5997,9352,4338,6105,5008,2556,6518,6694,4345,3727,7956,20,3954,8652,4424,9387,2035,8358,5962,5304,5194,8650,8282,1256,1103,2138,6679,1985,3653,2770,2433,4278,615,2863,1715,242,3790,2636,6998,3088,1671,2239,957,5411,4595,6282,2881,9974,2401,875,7574,2987,4587,3147,6766,9885,2965],
+  [3287,3016,3619,6818,9073,6120,5423,557,2900,2015,8111,3873,1314,4189,1846,4399,7041,7583,2427,2864,3525,5002,2069,748,1948,6015,2684,438,770,8367,1663,7887,7759,1885,157,7770,4520,4878,3857,1137,3525,3050,6276,5569,7649,904,4533,7843,2199,5648,7628,9075,9441,3600,7231,2388,5640,9096,958,3058,584,5899,8150,1181,9616,1098,8162,6819,8171,1519,1140,7665,8801,2632,1299,9192,707,9955,2710,7314],
+  [1772,2963,7578,3541,3095,1488,7026,2634,6015,4633,4370,2762,1650,2174,909,8158,2922,8467,4198,4280,9092,8856,8835,5457,2790,8574,9742,5054,9547,4156,7940,8126,9824,7340,8840,6574,3547,1477,3014,6798,7134,435,9484,9859,3031,4,1502,4133,1738,1807,4825,463,6343,9701,8506,9822,9555,8688,8168,3467,3234,6318,1787,5591,419,6593,7974,8486,9861,6381,6758,194,3061,4315,2863,4665,3789,2201,1492,4416],
+  [126,8927,6608,5682,8986,6867,1715,6076,3159,788,3140,4744,830,9253,5812,5021,7616,8534,1546,9590,1101,9012,9821,8132,7857,4086,1069,7491,2988,1579,2442,4321,2149,7642,6108,250,6086,3167,24,9528,7663,2685,1220,9196,1397,5776,1577,1730,5481,977,6115,199,6326,2183,3767,5928,5586,7561,663,8649,9688,949,5913,9160,1870,5764,9887,4477,6703,1413,4995,5494,7131,2192,8969,7138,3997,8697,646,1028],
+  [8074,1731,8245,624,4601,8706,155,8891,309,2552,8208,8452,2954,3124,3469,4246,3352,1105,4509,8677,9901,4416,8191,9283,5625,7120,2952,8881,7693,830,4580,8228,9459,8611,4499,1179,4988,1394,550,2336,6089,6872,269,7213,1848,917,6672,4890,656,1478,6536,3165,4743,4990,1176,6211,7207,5284,9730,4738,1549,4986,4942,8645,3698,9429,1439,2175,6549,3058,6513,1574,6988,8333,3406,5245,5431,7140,7085,6407],
+  [7845,4694,2530,8249,290,5948,5509,1588,5940,4495,5866,5021,4626,3979,3296,7589,4854,1998,5627,3926,8346,6512,9608,1918,7070,4747,4182,2858,2766,4606,6269,4107,8982,8568,9053,4244,5604,102,2756,727,5887,2566,7922,44,5986,621,1202,374,6988,4130,3627,6744,9443,4568,1398,8679,397,3928,9159,367,2917,6127,5788,3304,8129,911,2669,1463,9749,264,4478,8940,1109,7309,2462,117,4692,7724,225,2312],
+  [4164,3637,2000,941,8903,39,3443,7172,1031,3687,4901,8082,4945,4515,7204,9310,9349,9535,9940,218,1788,9245,2237,1541,5670,6538,6047,5553,9807,8101,1925,8714,445,8332,7309,6830,5786,5736,7306,2710,3034,1838,7969,6318,7912,2584,2080,7437,6705,2254,7428,820,782,9861,7596,3842,3631,8063,5240,6666,394,4565,7865,4895,9890,6028,6117,4724,9156,4473,4552,602,470,6191,4927,5387,884,3146,1978,3000],
+  [4258,6880,1696,3582,5793,4923,2119,1155,9056,9698,6603,3768,5514,9927,9609,6166,6566,4536,4985,4934,8076,9062,6741,6163,7399,4562,2337,5600,2919,9012,8459,1308,6072,1225,9306,8818,5886,7243,7365,8792,6007,9256,6699,7171,4230,7002,8720,7839,4533,1671,478,7774,1607,2317,5437,4705,7886,4760,6760,7271,3081,2997,3088,7675,6208,3101,6821,6840,122,9633,4900,2067,8546,4549,2091,7188,5605,8599,6758,5229],
+  [7854,5243,9155,3556,8812,7047,2202,1541,5993,4600,4760,713,434,7911,7426,7414,8729,322,803,7960,7563,4908,6285,6291,736,3389,9339,4132,8701,7534,5287,3646,592,3065,7582,2592,8755,6068,8597,1982,5782,1894,2900,6236,4039,6569,3037,5837,7698,700,7815,2491,7272,5878,3083,6778,6639,3589,5010,8313,2581,6617,5869,8402,6808,2951,2321,5195,497,2190,6187,1342,1316,4453,7740,4154,2959,1781,1482,8256],
+  [7178,2046,4419,744,8312,5356,6855,8839,319,2962,5662,47,6307,8662,68,4813,567,2712,9931,1678,3101,8227,6533,4933,6656,92,5846,4780,6256,6361,4323,9985,1231,2175,7178,3034,9744,6155,9165,7787,5836,9318,7860,9644,8941,6480,9443,8188,5928,161,6979,2352,5628,6991,1198,8067,5867,6620,3778,8426,2994,3122,3124,6335,3918,8897,2655,9670,634,1088,1576,8935,7255,474,8166,7417,9547,2886,5560,3842],
+  [6957,3111,26,7530,7143,1295,1744,6057,3009,1854,8098,5405,2234,4874,9447,2620,9303,27,7410,969,40,2966,5648,7596,8637,4238,3143,3679,7187,690,9980,7085,7714,9373,5632,7526,6707,3951,9734,4216,2146,3602,5371,6029,3039,4433,4855,4151,1449,3376,8009,7240,7027,4602,2947,9081,4045,8424,9352,8742,923,2705,4266,3232,2264,6761,363,2651,3383,7770,6730,7856,7340,9679,2158,610,4471,4608,910,6241],
+  [4417,6756,1013,8797,658,8809,5032,8703,7541,846,3357,2920,9817,1745,9980,7593,4667,3087,779,3218,6233,5568,4296,2289,2654,7898,5021,9461,5593,8214,9173,4203,2271,7980,2983,5952,9992,8399,3468,1776,3188,9314,1720,6523,2933,621,8685,5483,8986,6163,3444,9539,4320,155,3992,2828,2150,6071,524,2895,5468,8063,1210,3348,9071,4862,483,9017,4097,6186,9815,3610,5048,1644,1003,9865,9332,2145,1944,2213],
+  [9284,3803,4920,1927,6706,4344,7383,4786,9890,2010,5228,1224,3158,6967,8580,8990,8883,5213,76,8306,2031,4980,5639,9519,7184,5645,7769,3259,8077,9130,1317,3096,9624,3818,1770,695,2454,947,6029,3474,9938,3527,5696,4760,7724,7738,2848,6442,5767,6845,8323,4131,2859,7595,2500,4815,3660,9130,8580,7016,8231,4391,8369,3444,4069,4021,556,6154,627,2778,1496,4206,6356,8434,8491,3816,8231,3190,5575,1015],
+  [3787,7572,1788,6803,5641,6844,1961,4811,8535,9914,9999,1450,8857,738,4662,8569,6679,2225,7839,8618,286,2648,5342,2294,3205,4546,176,8705,3741,6134,8324,8021,7004,5205,7032,6637,9442,5539,5584,4819,5874,5807,8589,6871,9016,983,1758,3786,1519,6241,185,8398,495,3370,9133,3051,4549,9674,7311,9738,3316,9383,2658,2776,9481,7558,619,3943,3324,6491,4933,153,9738,4623,912,3595,7771,7939,1219,4405],
+  [2650,3883,4154,5809,315,7756,4430,1788,4451,1631,6461,7230,6017,5751,138,588,5282,2442,9110,9035,6349,2515,1570,6122,4192,4174,3530,1933,4186,4420,4609,5739,4135,2963,6308,1161,8809,8619,2796,3819,6971,8228,4188,1492,909,8048,2328,6772,8467,7671,9068,2226,7579,6422,7056,8042,3296,2272,3006,2196,7320,3238,3490,3102,37,1293,3212,4767,5041,8773,5794,4456,6174,7279,7054,2835,7053,9088,790,6640],
+  [3101,1057,7057,3826,6077,1025,2955,1224,1114,6729,5902,4698,6239,7203,9423,1804,4417,6686,1426,6941,8071,1029,4985,9010,6122,6597,1622,1574,3513,1684,7086,5505,3244,411,9638,4150,907,9135,829,981,1707,5359,8781,9751,5,9131,3973,7159,1340,6955,7514,7993,6964,8198,1933,2797,877,3993,4453,8020,9349,8646,2779,8679,2961,3547,3374,3510,1129,3568,2241,2625,9138,5974,8206,7669,7678,1833,8700,4480],
+  [4865,9912,8038,8238,782,3095,8199,1127,4501,7280,2112,2487,3626,2790,9432,1475,6312,8277,4827,2218,5806,7132,8752,1468,7471,6386,739,8762,8323,8120,5169,9078,9058,3370,9560,7987,8585,8531,5347,9312,1058,4271,1159,5286,5404,6925,8606,9204,7361,2415,560,586,4002,2644,1927,2824,768,4409,2942,3345,1002,808,4941,6267,7979,5140,8643,7553,9438,7320,4938,2666,4609,2778,8158,6730,3748,3867,1866,7181],
+  [171,3771,7134,8927,4778,2913,3326,2004,3089,7853,1378,1729,4777,2706,9578,1360,5693,3036,1851,7248,2403,2273,8536,6501,9216,613,9671,7131,7719,6425,773,717,8803,160,1114,7554,7197,753,4513,4322,8499,4533,2609,4226,8710,6627,644,9666,6260,4870,5744,7385,6542,6203,7703,6130,8944,5589,2262,6803,6381,7414,6888,5123,7320,9392,9061,6780,322,8975,7050,5089,1061,2260,3199,1150,1865,5386,9699,6501],
+  [3744,8454,6885,8277,919,1923,4001,6864,7854,5519,2491,6057,8794,9645,1776,5714,9786,9281,7538,6916,3215,395,2501,9618,4835,8846,9708,2813,3303,1794,8309,7176,2206,1602,1838,236,4593,2245,8993,4017,10,8215,6921,5206,4023,5932,6997,7801,262,7640,3107,8275,4938,7822,2425,3223,3886,2105,8700,9526,2088,8662,8034,7004,5710,2124,7164,3574,6630,9980,4242,2901,9471,1491,2117,4562,1130,9086,4117,6698],
+  [2810,2280,2331,1170,4554,4071,8387,1215,2274,9848,6738,1604,7281,8805,439,1298,8318,7834,9426,8603,6092,7944,1309,8828,303,3157,4638,4439,9175,1921,4695,7716,1494,1015,1772,5913,1127,1952,1950,8905,4064,9890,385,9357,7945,5035,7082,5369,4093,6546,5187,5637,2041,8946,1758,7111,6566,1027,1049,5148,7224,7248,296,6169,375,1656,7993,2816,3717,4279,4675,1609,3317,42,6201,3100,3144,163,9530,4531],
+  [7096,6070,1009,4988,3538,5801,7149,3063,2324,2912,7911,7002,4338,7880,2481,7368,3516,2016,7556,2193,1388,3865,8125,4637,4096,8114,750,3144,1938,7002,9343,4095,1392,4220,3455,6969,9647,1321,9048,1996,1640,6626,1788,314,9578,6630,2813,6626,4981,9908,7024,4355,3201,3521,3864,3303,464,1923,595,9801,3391,8366,8084,9374,1041,8807,9085,1892,9431,8317,9016,9221,8574,9981,9240,5395,2009,6310,2854,9255],
+  [8830,3145,2960,9615,8220,6061,3452,2918,6481,9278,2297,3385,6565,7066,7316,5682,107,7646,4466,68,1952,9603,8615,54,7191,791,6833,2560,693,9733,4168,570,9127,9537,1925,8287,5508,4297,8452,8795,6213,7994,2420,4208,524,5915,8602,8330,2651,8547,6156,1812,6271,7991,9407,9804,1553,6866,1128,2119,4691,9711,8315,5879,9935,6900,482,682,4126,1041,428,6247,3720,5882,7526,2582,4327,7725,3503,2631],
+  [2738,9323,721,7434,1453,6294,2957,3786,5722,6019,8685,4386,3066,9057,6860,499,5315,3045,5194,7111,3137,9104,941,586,3066,755,4177,8819,7040,5309,3583,3897,4428,7788,4721,7249,6559,7324,825,7311,3760,6064,6070,9672,4882,584,1365,9739,9331,5783,2624,7889,1604,1303,1555,7125,8312,425,8936,3233,7724,1480,403,7440,1784,1754,4721,1569,652,3893,4574,5692,9730,4813,9844,8291,9199,7101,3391,8914],
+  [6044,2928,9332,3328,8588,447,3830,1176,3523,2705,8365,6136,5442,9049,5526,8575,8869,9031,7280,706,2794,8814,5767,4241,7696,78,6570,556,5083,1426,4502,3336,9518,2292,1885,3740,3153,9348,9331,8051,2759,5407,9028,7840,9255,831,515,2612,9747,7435,8964,4971,2048,4900,5967,8271,1719,9670,2810,6777,1594,6367,6259,8316,3815,1689,6840,9437,4361,822,9619,3065,83,6344,7486,8657,8228,9635,6932,4864],
+  [8478,4777,6334,4678,7476,4963,6735,3096,5860,1405,5127,7269,7793,4738,227,9168,2996,8928,765,733,1276,7677,6258,1528,9558,3329,302,8901,1422,8277,6340,645,9125,8869,5952,141,8141,1816,9635,4025,4184,3093,83,2344,2747,9352,7966,1206,1126,1826,218,7939,2957,2729,810,8752,5247,4174,4038,8884,7899,9567,301,5265,5752,7524,4381,1669,3106,8270,6228,6373,754,2547,4240,2313,5514,3022,1040,9738],
+  [2265,8192,1763,1369,8469,8789,4836,52,1212,6690,5257,8918,6723,6319,378,4039,2421,8555,8184,9577,1432,7139,8078,5452,9628,7579,4161,7490,5159,8559,1011,81,478,5840,1964,1334,6875,8670,9900,739,1514,8692,522,9316,6955,1345,8132,2277,3193,9773,3923,4177,2183,1236,6747,6575,4874,6003,6409,8187,745,8776,9440,7543,9825,2582,7381,8147,7236,5185,7564,6125,218,7991,6394,391,7659,7456,5128,5294],
+  [2132,8992,8160,5782,4420,3371,3798,5054,552,5631,7546,4716,1332,6486,7892,7441,4370,6231,4579,2121,8615,1145,9391,1524,1385,2400,9437,2454,7896,7467,2928,8400,3299,4025,7458,4703,7206,6358,792,6200,725,4275,4136,7390,5984,4502,7929,5085,8176,4600,119,3568,76,9363,6943,2248,9077,9731,6213,5817,6729,4190,3092,6910,759,2682,8380,1254,9604,3011,9291,5329,9453,9746,2739,6522,3765,5634,1113,5789],
+  [5304,5499,564,2801,679,2653,1783,3608,7359,7797,3284,796,3222,437,7185,6135,8571,2778,7488,5746,678,6140,861,7750,803,9859,9918,2425,3734,2698,9005,4864,9818,6743,2475,132,9486,3825,5472,919,292,4411,7213,7699,6435,9019,6769,1388,802,2124,1345,8493,9487,8558,7061,8777,8833,2427,2238,5409,4957,8503,3171,7622,5779,6145,2417,5873,5563,5693,9574,9491,1937,7384,4563,6842,5432,2751,3406,7981]
+];
+```
+
+## --seed-contents--
+
+```js
+function pathSumFourWays(matrix) {
+
+  return true;
+}
+
+// Only change code above this line
+
+const testMatrix1 = [
+  [131, 673, 234, 103, 18],
+  [201, 96, 342, 965, 150],
+  [630, 803, 746, 422, 111],
+  [537, 699, 497, 121, 956],
+  [805, 732, 524, 37, 331]
+];
+
+pathSumFourWays(testMatrix1);
+```
+
+# --solutions--
+
+```js
+function pathSumFourWays(matrix) {
+  const MOVES = [
+    [-1, 0],
+    [1, 0],
+    [0, -1],
+    [0, 1]
+  ];
+
+  function getAllowedMoves(row, col) {
+    const moves = [];
+    for (let i = 0; i < MOVES.length; i++) {
+      const [rowChange, colChange] = MOVES[i];
+      const nextRow = row + rowChange;
+      const nextCol = col + colChange;
+      if (isMoveAllowed(nextRow, nextCol)) {
+        moves.push([nextRow, nextCol]);
+      }
+    }
+    return moves;
+  }
+
+  function isMoveAllowed(nextRow, nextCol) {
+    if (nextRow < 0 || nextRow >= size || nextCol < 0 || nextCol >= size) {
+      return false;
+    }
+    return true;
+  }
+
+  const size = matrix.length;
+  const resultMatrix = new Array(size)
+    .fill()
+    .map(() => new Array(size).fill(Infinity));
+
+  const [startRow, startCol] = new Array(2).fill(size - 1);
+  const queue = [[startRow, startCol]];
+  resultMatrix[startRow][startCol] = matrix[startRow][startCol];
+
+  while (queue.length > 0) {
+    const [curRow, curCol] = queue.shift();
+
+    const allowedMoves = getAllowedMoves(curRow, curCol);
+
+    for (let i = 0; i < allowedMoves.length; i++) {
+      const [nextRow, nextCol] = allowedMoves[i];
+      const bestPath = resultMatrix[nextRow][nextCol];
+      const newPath = resultMatrix[curRow][curCol] + matrix[nextRow][nextCol];
+      if (newPath < bestPath) {
+        resultMatrix[nextRow][nextCol] = newPath;
+        queue.push(allowedMoves[i]);
+      }
+    }
+  }
+  return resultMatrix[0][0];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-84-monopoly-odds.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-84-monopoly-odds.md
new file mode 100644
index 00000000000..92c630f9429
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-84-monopoly-odds.md
@@ -0,0 +1,268 @@
+---
+id: 5900f3c11000cf542c50fed3
+title: 'Problem 84: Monopoly odds'
+challengeType: 1
+forumTopicId: 302198
+dashedName: problem-84-monopoly-odds
+---
+
+# --description--
+
+In the game, *Monopoly*, the standard board is set up in the following way:
+
+<div style="text-align: center;">
+  <table cellspacing="1" cellpadding="5" border="0" style="background-color: black; color: black;" align="center">
+    <tbody>
+      <tr>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">GO</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">A1</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">CC1</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">A2</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">T1</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">R1</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">B1</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">CH1</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">B2</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">B3</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">JAIL</td>
+      </tr>
+      <tr>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">H2</td>
+        <td colspan="9">&nbsp;</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">C1</td>
+      </tr>
+      <tr>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">T2</td>
+        <td colspan="9">&nbsp;</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">U1</td>
+      </tr>
+      <tr>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">H1</td>
+        <td colspan="9">&nbsp;</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">C2</td>
+      </tr>
+      <tr>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">CH3</td>
+        <td colspan="9">&nbsp;</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">C3</td>
+      </tr>
+      <tr>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">R4</td>
+        <td colspan="9">&nbsp;</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">R2</td>
+      </tr>
+      <tr>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">G3</td>
+        <td colspan="9">&nbsp;</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">D1</td>
+      </tr>
+      <tr>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">CC3</td>
+        <td colspan="9">&nbsp;</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">CC2</td>
+      </tr>
+      <tr>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">G2</td>
+        <td colspan="9">&nbsp;</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">D2</td>
+      </tr>
+      <tr>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">G1</td>
+        <td colspan="9">&nbsp;</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">D3</td>
+      </tr>
+      <tr>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">G2J</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">F3</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">U2</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">F2</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">F1</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">R3</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">E3</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">E2</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">CH2</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">E1</td>
+        <td style="background-color: #ffffff; color: black; padding: 5px; border: 1px solid black;">FP</td>
+      </tr>
+    </tbody>
+  </table>
+</div><br>
+
+A player starts on the GO square and adds the scores on two 6-sided dice to determine the number of squares they advance in a clockwise direction. Without any further rules we would expect to visit each square with equal probability: 2.5%. However, landing on G2J (Go To Jail), CC (community chest), and CH (chance) changes this distribution.
+
+In addition to G2J, and one card from each of CC and CH, that orders the player to go directly to jail, if a player rolls three consecutive doubles, they do not advance the result of their 3rd roll. Instead they proceed directly to jail.
+
+At the beginning of the game, the CC and CH cards are shuffled. When a player lands on CC or CH they take a card from the top of the respective pile and, after following the instructions, it is returned to the bottom of the pile. There are sixteen cards in each pile, but for the purpose of this problem we are only concerned with cards that order a movement; any instruction not concerned with movement will be ignored and the player will remain on the CC/CH square.
+
+<ul>
+  <li>Community Chest (2/16 cards):</li>
+  <ol>
+    <li>Advance to GO</li>
+    <li>Go to JAIL</li>
+  </ol>
+
+  <li>Chance (10/16 cards):</li>
+  <ol>
+    <li>Advance to GO</li>
+    <li>Go to JAIL</li>
+    <li>Go to C1</li>
+    <li>Go to E3</li>
+    <li>Go to H2</li>
+    <li>Go to R1</li>
+    <li>Go to next R (railway company)</li>
+    <li>Go to next R</li>
+    <li>Go to next U (utility company)</li>
+    <li>Go back 3 squares.</li>
+  </ol>
+</ul>
+
+The heart of this problem concerns the likelihood of visiting a particular square. That is, the probability of finishing at that square after a roll. For this reason it should be clear that, with the exception of G2J for which the probability of finishing on it is zero, the CH squares will have the lowest probabilities, as 5/8 request a movement to another square, and it is the final square that the player finishes at on each roll that we are interested in. We shall make no distinction between "Just Visiting" and being sent to JAIL, and we shall also ignore the rule about requiring a double to "get out of jail", assuming that they pay to get out on their next turn.
+
+By starting at GO and numbering the squares sequentially from 00 to 39 we can concatenate these two-digit numbers to produce strings that correspond with sets of squares.
+
+Statistically it can be shown that the three most popular squares, in order, are JAIL (6.24%) = Square 10, E3 (3.18%) = Square 24, and GO (3.09%) = Square 00. So these three most popular squares can be listed with the six-digit modal string `102400`.
+
+If, instead of using two 6-sided dice, two `n`-sided dice are used, find the six-digit modal string.
+
+# --hints--
+
+`monopolyOdds(8)` should return a string.
+
+```js
+assert(typeof monopolyOdds(8) === 'string');
+```
+
+`monopolyOdds(8)` should return string `102400`.
+
+```js
+assert.strictEqual(monopolyOdds(8), '102400');
+```
+
+`monopolyOdds(10)` should return string `100024`.
+
+```js
+assert.strictEqual(monopolyOdds(10), '100024');
+```
+
+`monopolyOdds(20)` should return string `100005`.
+
+```js
+assert.strictEqual(monopolyOdds(20), '100005');
+```
+
+`monopolyOdds(4)` should return string `101524`.
+
+```js
+assert.strictEqual(monopolyOdds(4), '101524');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function monopolyOdds(n) {
+
+  return true;
+}
+
+monopolyOdds(8);
+```
+
+# --solutions--
+
+```js
+function monopolyOdds(n) {
+  function chanceCard(position, chanceCardPosition) {
+    chanceCardPosition = (chanceCardPosition + 1) % 16;
+    if (chanceCardPosition < 6) {
+      position = chanceCardsMoves[chanceCardPosition];
+    } else if (chanceCardPosition === 6 || chanceCardPosition === 7) {
+      position = nextMovesFromR[position];
+    } else if (chanceCardPosition === 8) {
+      position = nextMovesFromU[position];
+    } else if (chanceCardPosition === 9) {
+      position -= 3;
+    }
+    return [position, chanceCardPosition];
+  }
+
+  function chestCard(position, chestPosition) {
+    chestPosition = (chestPosition + 1) % 16;
+    if (chestPosition < 2) {
+      position = chestCardsMoves[chestPosition];
+    }
+    return [position, chestPosition];
+  }
+
+  function isChest(position) {
+    return position === 2 || position === 17 || position === 33;
+  }
+
+  function isChance(position) {
+    return position === 7 || position === 22 || position === 36;
+  }
+
+  function isJail(position) {
+    return position === 30;
+  }
+
+  function roll(dice) {
+    return Math.floor(Math.random() * dice) + 1;
+  }
+
+  function getTopThree(board) {
+    return sortByVisits(board)
+      .slice(0, 3)
+      .map(elem => elem[0].toString().padStart(2, '0'))
+      .join('');
+  }
+
+  function sortByVisits(board) {
+    return board
+      .map((element, index) => [index, element])
+      .sort((a, b) => a[1] - b[1])
+      .reverse();
+  }
+
+  const rounds = 2000000;
+  const chestCardsMoves = [0, 10];
+  const chanceCardsMoves = [0, 10, 11, 24, 39, 5];
+  const nextMovesFromR = { 7: 15, 22: 25, 36: 5 };
+  const nextMovesFromU = { 7: 12, 36: 12, 22: 28 };
+
+  const board = new Array(40).fill(0);
+  let doubleCount = 0;
+  let curPosition = 0;
+  let curChestCard = 0;
+  let curChanceCard = 0;
+
+  for (let i = 0; i < rounds; i++) {
+    const dice1 = roll(n);
+    const dice2 = roll(n);
+
+    if (dice1 === dice2) {
+      doubleCount++;
+    } else {
+      doubleCount = 0;
+    }
+
+    if (doubleCount > 2) {
+      curPosition = 10;
+      doubleCount = 0;
+    } else {
+      curPosition = (curPosition + dice1 + dice2) % 40;
+
+      if (isChance(curPosition)) {
+        [curPosition, curChanceCard] = chanceCard(curPosition, curChanceCard);
+      } else if (isChest(curPosition)) {
+        [curPosition, curChestCard] = chestCard(curPosition, curChestCard);
+      } else if (isJail(curPosition)) {
+        curPosition = 10;
+      }
+    }
+    board[curPosition]++;
+  }
+  return getTopThree(board);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-85-counting-rectangles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-85-counting-rectangles.md
new file mode 100644
index 00000000000..eafbccb8aee
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-85-counting-rectangles.md
@@ -0,0 +1,109 @@
+---
+id: 5900f3c11000cf542c50fed4
+title: 'Problem 85: Counting rectangles'
+challengeType: 1
+forumTopicId: 302199
+dashedName: problem-85-counting-rectangles
+---
+
+# --description--
+
+By counting carefully it can be seen that a rectangular grid measuring 3 by 2 contains eighteen rectangles:
+
+<img class="img-responsive center-block" alt="a diagram of the different rectangles found within a 3 by 2 rectangular grid" src="https://cdn-media-1.freecodecamp.org/project-euler/counting-rectangles.png" style="background-color: white; padding: 10px;" />
+
+Although there may not exists a rectangular grid that contains exactly `n` rectangles, find the area of the grid with the nearest solution.
+
+# --hints--
+
+`countingRectangles(18)` should return a number.
+
+```js
+assert(typeof countingRectangles(18) === 'number');
+```
+
+`countingRectangles(18)` should return `6`.
+
+```js
+assert.strictEqual(countingRectangles(18), 6);
+```
+
+`countingRectangles(250)` should return `22`.
+
+```js
+assert.strictEqual(countingRectangles(250), 22);
+```
+
+`countingRectangles(50000)` should return `364`.
+
+```js
+assert.strictEqual(countingRectangles(50000), 364);
+```
+
+`countingRectangles(1000000)` should return `1632`.
+
+```js
+assert.strictEqual(countingRectangles(1000000), 1632);
+```
+
+`countingRectangles(2000000)` should return `2772`.
+
+```js
+assert.strictEqual(countingRectangles(2000000), 2772);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countingRectangles(n) {
+
+  return true;
+}
+
+countingRectangles(18);
+```
+
+# --solutions--
+
+```js
+function countingRectangles(n) {
+  function numberOfRectangles(h, w) {
+    return (h * (h + 1) * w * (w + 1)) / 4;
+  }
+
+  function rectangleArea(h, w) {
+    return h * w;
+  }
+
+  let rectanglesCount = 1;
+  let maxSide = 1;
+  while (rectanglesCount < n) {
+    maxSide++;
+    rectanglesCount = numberOfRectangles(maxSide, 1);
+  }
+
+  let bestDiff = Math.abs(rectanglesCount - n);
+  let bestSize = [maxSide, 1];
+
+  let curHeight = maxSide - 1;
+  let curWidth = 1;
+
+  for (curWidth; curWidth < curHeight; curWidth++) {
+    for (curHeight; curHeight > curWidth; curHeight--) {
+      rectanglesCount = numberOfRectangles(curHeight, curWidth);
+      const curDiff = Math.abs(rectanglesCount - n);
+      if (curDiff < bestDiff) {
+        bestDiff = curDiff;
+        bestSize = [curHeight, curWidth];
+      }
+
+      if (rectanglesCount < n) {
+        break;
+      }
+    }
+  }
+  return rectangleArea(...bestSize);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-86-cuboid-route.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-86-cuboid-route.md
new file mode 100644
index 00000000000..39a860bd794
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-86-cuboid-route.md
@@ -0,0 +1,94 @@
+---
+id: 5900f3c31000cf542c50fed5
+title: 'Problem 86: Cuboid route'
+challengeType: 1
+forumTopicId: 302200
+dashedName: problem-86-cuboid-route
+---
+
+# --description--
+
+A spider, S, sits in one corner of a cuboid room, measuring 6 by 5 by 3, and a fly, F, sits in the opposite corner. By travelling on the surfaces of the room the shortest "straight line" distance from S to F is 10 and the path is shown on the diagram.
+
+<img class="img-responsive center-block" alt="a diagram of a spider and fly's path from one corner of a cuboid room to the opposite corner" src="https://cdn-media-1.freecodecamp.org/project-euler/cuboid-route.png" style="background-color: white; padding: 10px;" />
+
+However, there are up to three "shortest" path candidates for any given cuboid and the shortest route doesn't always have integer length.
+
+It can be shown that there are exactly `2060` distinct cuboids, ignoring rotations, with integer dimensions, up to a maximum size of M by M by M, for which the shortest route has integer length when M = 100. This is the least value of M for which the number of solutions first exceeds two thousand; the number of solutions when M = 99 is `1975`.
+
+Find the least value of M such that the number of solutions first exceeds `n`.
+
+# --hints--
+
+`cuboidRoute(2000)` should return a number.
+
+```js
+assert(typeof cuboidRoute(2000) === 'number');
+```
+
+`cuboidRoute(2000)` should return `100`.
+
+```js
+assert.strictEqual(cuboidRoute(2000), 100);
+```
+
+`cuboidRoute(25000)` should return `320`.
+
+```js
+assert.strictEqual(cuboidRoute(25000), 320);
+```
+
+`cuboidRoute(500000)` should return `1309`.
+
+```js
+assert.strictEqual(cuboidRoute(500000), 1309);
+```
+
+`cuboidRoute(1000000)` should return `1818`.
+
+```js
+assert.strictEqual(cuboidRoute(1000000), 1818);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cuboidRoute(n) {
+
+  return true;
+}
+
+cuboidRoute(2000);
+```
+
+# --solutions--
+
+```js
+function cuboidRoute(n) {
+  // Based on https://www.mathblog.dk/project-euler-86-shortest-path-cuboid/
+  function getLength(a, b) {
+    return Math.sqrt(a ** 2 + b ** 2);
+  }
+
+  let M = 2;
+  let counter = 0;
+
+  while (counter < n) {
+    M++;
+    for (let baseHeightWidth = 3; baseHeightWidth <= 2 * M; baseHeightWidth++) {
+      const pathLength = getLength(M, baseHeightWidth);
+      if (Number.isInteger(pathLength)) {
+        if (baseHeightWidth <= M) {
+          counter += Math.floor(baseHeightWidth / 2);
+        } else {
+          counter += 1 + M - Math.floor((baseHeightWidth + 1) / 2);
+        }
+      }
+    }
+  }
+
+  return M;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-87-prime-power-triples.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-87-prime-power-triples.md
new file mode 100644
index 00000000000..a6c51eff68d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-87-prime-power-triples.md
@@ -0,0 +1,131 @@
+---
+id: 5900f3c51000cf542c50fed8
+title: 'Problem 87: Prime power triples'
+challengeType: 1
+forumTopicId: 302201
+dashedName: problem-87-prime-power-triples
+---
+
+# --description--
+
+The smallest number expressible as the sum of a prime square, prime cube, and prime fourth power is `28`. In fact, there are exactly four numbers below fifty that can be expressed in such a way:
+
+<div style='margin-left: 4em;'>
+  28 = 2<sup>2</sup> + 2<sup>3</sup> + 2<sup>4</sup><br>
+  33 = 3<sup>2</sup> + 2<sup>3</sup> + 2<sup>4</sup><br>
+  49 = 5<sup>2</sup> + 2<sup>3</sup> + 2<sup>4</sup><br>
+  47 = 2<sup>2</sup> + 3<sup>3</sup> + 2<sup>4</sup>
+</div><br>
+
+How many numbers below `n` can be expressed as the sum of a prime square, prime cube, and prime fourth power?
+
+# --hints--
+
+`primePowerTriples(50)` should return a number.
+
+```js
+assert(typeof primePowerTriples(50) === 'number');
+```
+
+`primePowerTriples(50)` should return `4`.
+
+```js
+assert.strictEqual(primePowerTriples(50), 4);
+```
+
+`primePowerTriples(10035)` should return `684`.
+
+```js
+assert.strictEqual(primePowerTriples(10035), 684);
+```
+
+`primePowerTriples(500000)` should return `18899`.
+
+```js
+assert.strictEqual(primePowerTriples(500000), 18899);
+```
+
+`primePowerTriples(5000000)` should return `138932`.
+
+```js
+assert.strictEqual(primePowerTriples(5000000), 138932);
+```
+
+`primePowerTriples(50000000)` should return `1097343`.
+
+```js
+assert.strictEqual(primePowerTriples(50000000), 1097343);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primePowerTriples(n) {
+
+  return true;
+}
+
+primePowerTriples(50);
+```
+
+# --solutions--
+
+```js
+function primePowerTriples(n) {
+  function getSievePrimes(max) {
+    const primes = [];
+    const primesMap = new Array(max).fill(true);
+    primesMap[0] = false;
+    primesMap[1] = false;
+
+    for (let i = 2; i <= max; i += 2) {
+      if (primesMap[i]) {
+        primes.push(i);
+        for (let j = i * i; j <= max; j = j + i) {
+          primesMap[j] = false;
+        }
+      }
+      if (i === 2) {
+        i = 1;
+      }
+    }
+    return primes;
+  }
+
+  function getPowersSummed(numbers, powers, limit, curSum) {
+    if (curSum >= limit) {
+      return [];
+    } else if (powers.length === 0) {
+      return [curSum];
+    }
+
+    const powersSummed = [];
+
+    const curPower = powers[0];
+    const powersLeft = powers.slice(1);
+    for (let i = 0; i < numbers.length; i++) {
+      const curNumber = numbers[i];
+      const nextSum = curSum + curNumber ** curPower;
+      if (nextSum >= limit) {
+        return powersSummed;
+      }
+      const result = getPowersSummed(
+        numbers,
+        powersLeft,
+        limit,
+        curSum + curNumber ** curPower
+      );
+      powersSummed.push(...result);
+    }
+    return powersSummed;
+  }
+
+  const maximumBaseNumber = Math.floor(Math.sqrt(n - 2 ** 3 - 2 ** 4)) + 1;
+  const primes = getSievePrimes(maximumBaseNumber);
+  const uniqueSums = new Set(getPowersSummed(primes, [2, 3, 4], n, 0));
+
+  return uniqueSums.size;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-88-product-sum-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-88-product-sum-numbers.md
new file mode 100644
index 00000000000..46779896396
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-88-product-sum-numbers.md
@@ -0,0 +1,110 @@
+---
+id: 5900f3c51000cf542c50fed6
+title: 'Problem 88: Product-sum numbers'
+challengeType: 1
+forumTopicId: 302203
+dashedName: problem-88-product-sum-numbers
+---
+
+# --description--
+
+A natural number, `N`, that can be written as the sum and product of a given set of at least two natural numbers, $\\{a_1, a_2, \ldots , a_k\\}$ is called a product-sum number: $N = a_1 + a_2 + \cdots + a_k = a_1 × a_2 × \cdots × a_k$.
+
+For example, 6 = 1 + 2 + 3 = 1 × 2 × 3.
+
+For a given set of size, `k`, we shall call the smallest N with this property a minimal product-sum number. The minimal product-sum numbers for sets of size, `k` = 2, 3, 4, 5, and 6 are as follows.
+
+<div style='margin-left: 4em;'>
+  <var>k</var>=2: 4 = 2 × 2 = 2 + 2<br>
+  <var>k</var>=3: 6 = 1 × 2 × 3 = 1 + 2 + 3<br>
+  <var>k</var>=4: 8 = 1 × 1 × 2 × 4 = 1 + 1 + 2 + 4<br>
+  <var>k</var>=5: 8 = 1 × 1 × 2 × 2 × 2  = 1 + 1 + 2 + 2 + 2<br>
+  <var>k</var>=6: 12 = 1 × 1 × 1 × 1 × 2 × 6 = 1 + 1 + 1 + 1 + 2 + 6
+</div><br>
+
+Hence for 2 ≤ `k` ≤ 6, the sum of all the minimal product-sum numbers is 4 + 6 + 8 + 12 = 30; note that `8` is only counted once in the sum.
+
+In fact, as the complete set of minimal product-sum numbers for 2 ≤ `k` ≤ 12 is $\\{4, 6, 8, 12, 15, 16\\}$, the sum is `61`.
+
+What is the sum of all the minimal product-sum numbers for 2 ≤ `k` ≤ `limit`?
+
+# --hints--
+
+`productSumNumbers(6)` should return a number.
+
+```js
+assert(typeof productSumNumbers(6) === 'number');
+```
+
+`productSumNumbers(6)` should return `30`.
+
+```js
+assert.strictEqual(productSumNumbers(6), 30);
+```
+
+`productSumNumbers(12)` should return `61`.
+
+```js
+assert.strictEqual(productSumNumbers(12), 61);
+```
+
+`productSumNumbers(300)` should return `12686`.
+
+```js
+assert.strictEqual(productSumNumbers(300), 12686);
+```
+
+`productSumNumbers(6000)` should return `2125990`.
+
+```js
+assert.strictEqual(productSumNumbers(6000), 2125990);
+```
+
+`productSumNumbers(12000)` should return `7587457`.
+
+```js
+assert.strictEqual(productSumNumbers(12000), 7587457);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function productSumNumbers(limit) {
+
+  return true;
+}
+
+productSumNumbers(6);
+```
+
+# --solutions--
+
+```js
+function productSumNumbers(limit) {
+  function getProductSums(curProduct, curSum, factorsCount, start) {
+    const k = curProduct - curSum + factorsCount;
+    if (k <= limit) {
+      if (curProduct < minimalProductSums[k]) {
+        minimalProductSums[k] = curProduct;
+      }
+      for (let i = start; i < Math.floor((limit / curProduct) * 2) + 1; i++) {
+        getProductSums(curProduct * i, curSum + i, factorsCount + 1, i);
+      }
+    }
+  }
+
+  const minimalProductSums = new Array(limit + 1).fill(2 * limit);
+  getProductSums(1, 1, 1, 2);
+
+  const uniqueProductSums = [...new Set(minimalProductSums.slice(2))];
+
+  let sum = 0;
+  for (let i = 0; i < uniqueProductSums.length; i++) {
+    sum += uniqueProductSums[i];
+  }
+
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-89-roman-numerals.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-89-roman-numerals.md
new file mode 100644
index 00000000000..52c03847a6b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-89-roman-numerals.md
@@ -0,0 +1,117 @@
+---
+id: 5900f3c51000cf542c50fed7
+title: 'Problem 89: Roman numerals'
+challengeType: 1
+forumTopicId: 302204
+dashedName: problem-89-roman-numerals
+---
+
+# --description--
+
+For a number written in Roman numerals to be considered valid there are basic rules which must be followed. Even though the rules allow some numbers to be expressed in more than one way there is always a *best* way of writing a particular number.
+
+- Numerals must be arranged in descending order of size.
+- M, C, and X cannot be equaled or exceeded by smaller denominations.
+- D, L, and V can each only appear once.
+
+In addition to the three rules given above, if subtractive combinations are used then the following four rules must be followed.
+
+- Only one I, X, and C can be used as the leading numeral in part of a subtractive pair.
+- I can only be placed before V and X.
+- X can only be placed before L and C.
+- C can only be placed before D and M.
+
+For example, it would appear that there are at least six ways of writing the number sixteen:
+
+<div style="margin-left: 4em; font-family: 'courier new', monospace;">
+  IIIIIIIIIIIIIIII<br>
+  VIIIIIIIIIII<br>
+  VVIIIIII<br>
+  XIIIIII<br>
+  VVVI<br>
+  XVI<br><br>
+</div>
+
+However, according to the rules only XIIIIII and XVI are valid, and the last example is considered to be the most efficient, as it uses the least number of numerals.
+
+The array, `roman`, will contain numbers written with valid, but not necessarily minimal, Roman numerals.
+
+Find the number of characters saved by writing each of these in their minimal form.
+
+**Note:** You can assume that all the Roman numerals in the array contain no more than four consecutive identical units.
+
+# --hints--
+
+`romanNumerals(testNumerals1)` should return a number.
+
+```js
+assert(typeof romanNumerals(_testNumerals1) === 'number');
+```
+
+`romanNumerals(testNumerals1)` should return `19`.
+
+```js
+assert.strictEqual(romanNumerals(_testNumerals1), 19);
+```
+
+`romanNumerals(testNumerals2)` should return `743`.
+
+```js
+assert.strictEqual(romanNumerals(_testNumerals2), 743);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testNumerals1 = [
+  'XIIIIII', 'XVI', 'MMMCCLXVIIII', 'XXXXVI', 'MMMMXX', 'CCLI', 'CCCCXX', 'MMMMDCXXXXI', 'DCCCCIIII', 'MXVIIII'
+];
+const _testNumerals2 = [
+  'MMMMDCLXXII','MMDCCCLXXXIII','MMMDLXVIIII','MMMMDXCV','DCCCLXXII','MMCCCVI','MMMCDLXXXVII','MMMMCCXXI','MMMCCXX','MMMMDCCCLXXIII','MMMCCXXXVII','MMCCCLXXXXIX','MDCCCXXIIII','MMCXCVI','CCXCVIII','MMMCCCXXXII','MDCCXXX','MMMDCCCL','MMMMCCLXXXVI','MMDCCCXCVI','MMMDCII','MMMCCXII','MMMMDCCCCI','MMDCCCXCII','MDCXX','CMLXXXVII','MMMXXI','MMMMCCCXIV','MLXXII','MCCLXXVIIII','MMMMCCXXXXI','MMDCCCLXXII','MMMMXXXI','MMMDCCLXXX','MMDCCCLXXIX','MMMMLXXXV','MCXXI','MDCCCXXXVII','MMCCCLXVII','MCDXXXV','CCXXXIII','CMXX','MMMCLXIV','MCCCLXXXVI','DCCCXCVIII','MMMDCCCCXXXIV','CDXVIIII','MMCCXXXV','MDCCCXXXII','MMMMD','MMDCCLXIX','MMMMCCCLXXXXVI','MMDCCXLII','MMMDCCCVIIII','DCCLXXXIIII','MDCCCCXXXII','MMCXXVII','DCCCXXX','CCLXIX','MMMXI','MMMMCMLXXXXVIII','MMMMDLXXXVII','MMMMDCCCLX','MMCCLIV','CMIX','MMDCCCLXXXIIII','CLXXXII','MMCCCCXXXXV','MMMMDLXXXVIIII','MMMDCCCXXI','MMDCCCCLXXVI','MCCCCLXX','MMCDLVIIII','MMMDCCCLIX','MMMMCCCCXIX','MMMDCCCLXXV','XXXI','CDLXXXIII','MMMCXV','MMDCCLXIII','MMDXXX','MMMMCCCLVII','MMMDCI','MMMMCDLXXXIIII','MMMMCCCXVI','CCCLXXXVIII','MMMMCML','MMMMXXIV','MMMCCCCXXX','DCCX','MMMCCLX','MMDXXXIII','CCCLXIII','MMDCCXIII','MMMCCCXLIV','CLXXXXI','CXVI','MMMMCXXXIII','CLXX','DCCCXVIII','MLXVII','DLXXXX','MMDXXI','MMMMDLXXXXVIII','MXXII','LXI','DCCCCXLIII','MMMMDV','MMMMXXXIV','MDCCCLVIII','MMMCCLXXII','MMMMDCCXXXVI','MMMMLXXXIX','MDCCCLXXXI','MMMMDCCCXV','MMMMCCCCXI','MMMMCCCLIII','MDCCCLXXI','MMCCCCXI','MLXV','MMCDLXII','MMMMDXXXXII','MMMMDCCCXL','MMMMCMLVI','CCLXXXIV','MMMDCCLXXXVI','MMCLII','MMMCCCCXV','MMLXXXIII','MMMV','MMMV','DCCLXII','MMDCCCCXVI','MMDCXLVIII','CCLIIII','CCCXXV','MMDCCLXXXVIIII','MMMMDCLXXVIII','MMMMDCCCXCI','MMMMCCCXX','MMCCXLV','MMMDCCCLXIX','MMCCLXIIII','MMMDCCCXLIX','MMMMCCCLXIX','CMLXXXXI','MCMLXXXIX','MMCDLXI','MMDCLXXVIII','MMMMDCCLXI','MCDXXV','DL','CCCLXXII','MXVIIII','MCCCCLXVIII','CIII','MMMDCCLXXIIII','MMMDVIII','MMMMCCCLXXXXVII','MMDXXVII','MMDCCLXXXXV','MMMMCXLVI','MMMDCCLXXXII','MMMDXXXVI','MCXXII','CLI','DCLXXXIX','MMMCLI','MDCLXIII','MMMMDCCXCVII','MMCCCLXXXV','MMMDCXXVIII','MMMCDLX','MMMCMLII','MMMIV','MMMMDCCCLVIII','MMMDLXXXVIII','MCXXIV','MMMMLXXVI','CLXXIX','MMMCCCCXXVIIII','DCCLXXXV','MMMDCCCVI','LI','CLXXXVI','MMMMCCCLXXVI','MCCCLXVI','CCXXXIX','MMDXXXXI','MMDCCCXLI','DCCCLXXXVIII','MMMMDCCCIV','MDCCCCXV','MMCMVI','MMMMCMLXXXXV','MMDCCLVI','MMMMCCXLVIII','DCCCCIIII','MMCCCCIII','MMMDCCLXXXVIIII','MDCCCLXXXXV','DVII','MMMV','DCXXV','MMDCCCXCV','DCVIII','MMCDLXVI','MCXXVIII','MDCCXCVIII','MMDCLX','MMMDCCLXIV','MMCDLXXVII','MMDLXXXIIII','MMMMCCCXXII','MMMDCCCXLIIII','DCCCCLXVII','MMMCLXXXXIII','MCCXV','MMMMDCXI','MMMMDCLXXXXV','MMMCCCLII','MMCMIX','MMDCCXXV','MMDLXXXVI','MMMMDCXXVIIII','DCCCCXXXVIIII','MMCCXXXIIII','MMDCCLXXVIII','MDCCLXVIIII','MMCCLXXXV','MMMMDCCCLXXXVIII','MMCMXCI','MDXLII','MMMMDCCXIV','MMMMLI','DXXXXIII','MMDCCXI','MMMMCCLXXXIII','MMMDCCCLXXIII','MDCLVII','MMCD','MCCCXXVII','MMMMDCCIIII','MMMDCCXLVI','MMMCLXXXVII','MMMCCVIIII','MCCCCLXXIX','DL','DCCCLXXVI','MMDXCI','MMMMDCCCCXXXVI','MMCII','MMMDCCCXXXXV','MMMCDXLV','MMDCXXXXIV','MMD','MDCCCLXXXX','MMDCXLIII','MMCCXXXII','MMDCXXXXVIIII','DCCCLXXI','MDXCVIIII','MMMMCCLXXVIII','MDCLVIIII','MMMCCCLXXXIX','MDCLXXXV','MDLVIII','MMMMCCVII','MMMMDCXIV','MMMCCCLXIIII','MMIIII','MMMMCCCLXXIII','CCIII','MMMCCLV','MMMDXIII','MMMCCCXC','MMMDCCCXXI','MMMMCCCCXXXII','CCCLVI','MMMCCCLXXXVI','MXVIIII','MMMCCCCXIIII','CLXVII','MMMCCLXX','CCCCLXIV','MMXXXXII','MMMMCCLXXXX','MXL','CCXVI','CCCCLVIIII','MMCCCII','MCCCLVIII','MMMMCCCX','MCDLXXXXIV','MDCCCXIII','MMDCCCXL','MMMMCCCXXIII','DXXXIV','CVI','MMMMDCLXXX','DCCCVII','MMCMLXIIII','MMMDCCCXXXIII','DCCC','MDIII','MMCCCLXVI','MMMCCCCLXXI','MMDCCCCXVIII','CCXXXVII','CCCXXV','MDCCCXII','MMMCMV','MMMMCMXV','MMMMDCXCI','DXXI','MMCCXLVIIII','MMMMCMLII','MDLXXX','MMDCLXVI','CXXI','MMMDCCCLIIII','MMMCXXI','MCCIII','MMDCXXXXI','CCXCII','MMMMDXXXV','MMMCCCLXV','MMMMDLXV','MMMCCCCXXXII','MMMCCCVIII','DCCCCLXXXXII','MMCLXIV','MMMMCXI','MLXXXXVII','MMMCDXXXVIII','MDXXII','MLV','MMMMDLXVI','MMMCXII','XXXIII','MMMMDCCCXXVI','MMMLXVIIII','MMMLX','MMMCDLXVII','MDCCCLVII','MMCXXXVII','MDCCCCXXX','MMDCCCLXIII','MMMMDCXLIX','MMMMCMXLVIII','DCCCLXXVIIII','MDCCCLIII','MMMCMLXI','MMMMCCLXI','MMDCCCLIII','MMMDCCCVI','MMDXXXXIX','MMCLXXXXV','MMDXXX','MMMXIII','DCLXXIX','DCCLXII','MMMMDCCLXVIII','MDCCXXXXIII','CCXXXII','MMMMDCXXV','MMMCCCXXVIII','MDCVIII','MMMCLXXXXIIII','CLXXXI','MDCCCCXXXIII','MMMMDCXXX','MMMDCXXIV','MMMCCXXXVII','MCCCXXXXIIII','CXVIII','MMDCCCCIV','MMMMCDLXXV','MMMDLXIV','MDXCIII','MCCLXXXI','MMMDCCCXXIV','MCXLIII','MMMDCCCI','MCCLXXX','CCXV','MMDCCLXXI','MMDLXXXIII','MMMMDCXVII','MMMCMLXV','MCLXVIII','MMMMCCLXXVI','MMMDCCLXVIIII','MMMMDCCCIX','DLXXXXIX','DCCCXXII','MMMMIII','MMMMCCCLXXVI','DCCCXCIII','DXXXI','MXXXIIII','CCXII','MMMDCCLXXXIIII','MMMCXX','MMMCMXXVII','DCCCXXXX','MMCDXXXVIIII','MMMMDCCXVIII','LV','MMMDCCCCVI','MCCCII','MMCMLXVIIII','MDCCXI','MMMMDLXVII','MMCCCCLXI','MMDCCV','MMMCCCXXXIIII','MMMMDI','MMMDCCCXCV','MMDCCLXXXXI','MMMDXXVI','MMMDCCCLVI','MMDCXXX','MCCCVII','MMMMCCCLXII','MMMMXXV','MMCMXXV','MMLVI','MMDXXX','MMMMCVII','MDC','MCCIII','MMMMDCC','MMCCLXXV','MMDCCCXXXXVI','MMMMCCCLXV','CDXIIII','MLXIIII','CCV','MMMCMXXXI','CCCCLXVI','MDXXXII','MMMMCCCLVIII','MMV','MMMCLII','MCMLI','MMDCCXX','MMMMCCCCXXXVI','MCCLXXXI','MMMCMVI','DCCXXX','MMMMCCCLXV','DCCCXI','MMMMDCCCXIV','CCCXXI','MMDLXXV','CCCCLXXXX','MCCCLXXXXII','MMDCIX','DCCXLIIII','DXIV','MMMMCLII','CDLXI','MMMCXXVII','MMMMDCCCCLXIII','MMMDCLIIII','MCCCCXXXXII','MMCCCLX','CCCCLIII','MDCCLXXVI','MCMXXIII','MMMMDLXXVIII','MMDCCCCLX','MMMCCCLXXXX','MMMCDXXVI','MMMDLVIII','CCCLXI','MMMMDCXXII','MMDCCCXXI','MMDCCXIII','MMMMCLXXXVI','MDCCCCXXVI','MDV','MMDCCCCLXXVI','MMMMCCXXXVII','MMMDCCLXXVIIII','MMMCCCCLXVII','DCCXLI','MMCLXXXVIII','MCCXXXVI','MMDCXLVIII','MMMMCXXXII','MMMMDCCLXVI','MMMMCMLI','MMMMCLXV','MMMMDCCCXCIV','MCCLXXVII','LXXVIIII','DCCLII','MMMCCCXCVI','MMMCLV','MMDCCCXXXXVIII','DCCCXV','MXC','MMDCCLXXXXVII','MMMMCML','MMDCCCLXXVIII','DXXI','MCCCXLI','DCLXXXXI','MMCCCLXXXXVIII','MDCCCCLXXVIII','MMMMDXXV','MMMDCXXXVI','MMMCMXCVII','MMXVIIII','MMMDCCLXXIV','MMMCXXV','DXXXVIII','MMMMCLXVI','MDXII','MMCCCLXX','CCLXXI','DXIV','MMMCLIII','DLII','MMMCCCXLIX','MMCCCCXXVI','MMDCXLIII','MXXXXII','CCCLXXXV','MDCLXXVI','MDCXII','MMMCCCLXXXIII','MMDCCCCLXXXII','MMMMCCCLXXXV','MMDCXXI','DCCCXXX','MMMDCCCCLII','MMMDCCXXII','MMMMCDXCVIII','MMMCCLXVIIII','MMXXV','MMMMCDXIX','MMMMCCCX','MMMCCCCLXVI','MMMMDCLXXVIIII','MMMMDCXXXXIV','MMMCMXII','MMMMXXXIII','MMMMDLXXXII','DCCCLIV','MDXVIIII','MMMCLXXXXV','CCCCXX','MMDIX','MMCMLXXXVIII','DCCXLIII','DCCLX','D','MCCCVII','MMMMCCCLXXXIII','MDCCCLXXIIII','MMMDCCCCLXXXVII','MMMMCCCVII','MMMDCCLXXXXVI','CDXXXIV','MCCLXVIII','MMMMDLX','MMMMDXII','MMMMCCCCLIIII','MCMLXXXXIII','MMMMDCCCIII','MMDCLXXXIII','MDCCCXXXXIV','XXXXVII','MMMDCCCXXXII','MMMDCCCXLII','MCXXXV','MDCXXVIIII','MMMCXXXXIIII','MMMMCDXVII','MMMDXXIII','MMMMCCCCLXI','DCLXXXXVIIII','LXXXXI','CXXXIII','MCDX','MCCLVII','MDCXXXXII','MMMCXXIV','MMMMLXXXX','MMDCCCCXLV','MLXXX','MMDCCCCLX','MCDLIII','MMMCCCLXVII','MMMMCCCLXXIV','MMMDCVIII','DCCCCXXIII','MMXCI','MMDCCIV','MMMMDCCCXXXIV','CCCLXXI','MCCLXXXII','MCMIII','CCXXXI','DCCXXXVIII','MMMMDCCXLVIIII','MMMMCMXXXV','DCCCLXXV','DCCXCI','MMMMDVII','MMMMDCCCLXVIIII','CCCXCV','MMMMDCCXX','MCCCCII','MMMCCCXC','MMMCCCII','MMDCCLXXVII','MMDCLIIII','CCXLIII','MMMDCXVIII','MMMCCCIX','MCXV','MMCCXXV','MLXXIIII','MDCCXXVI','MMMCCCXX','MMDLXX','MMCCCCVI','MMDCCXX','MMMMDCCCCXCV','MDCCCXXXII','MMMMDCCCCXXXX','XCIV','MMCCCCLX','MMXVII','MLXXI','MMMDXXVIII','MDCCCCII','MMMCMLVII','MMCLXXXXVIII','MDCCCCLV','MCCCCLXXIIII','MCCCLII','MCDXLVI','MMMMDXVIII','DCCLXXXIX','MMMDCCLXIV','MDCCCCXLIII','CLXXXXV','MMMMCCXXXVI','MMMDCCCXXI','MMMMCDLXXVII','MCDLIII','MMCCXLVI','DCCCLV','MCDLXX','DCLXXVIII','MMDCXXXIX','MMMMDCLX','MMDCCLI','MMCXXXV','MMMCCXII','MMMMCMLXII','MMMMCCV','MCCCCLXIX','MMMMCCIII','CLXVII','MCCCLXXXXIIII','MMMMDCVIII','MMDCCCLXI','MMLXXIX','CMLXIX','MMDCCCXLVIIII','DCLXII','MMMCCCXLVII','MDCCCXXXV','MMMMDCCXCVI','DCXXX','XXVI','MMLXIX','MMCXI','DCXXXVII','MMMMCCCXXXXVIII','MMMMDCLXI','MMMMDCLXXIIII','MMMMVIII','MMMMDCCCLXII','MDCXCI','MMCCCXXIIII','CCCCXXXXV','MMDCCCXXI','MCVI','MMDCCLXVIII','MMMMCXL','MLXVIII','CMXXVII','CCCLV','MDCCLXXXIX','MMMCCCCLXV','MMDCCLXII','MDLXVI','MMMCCCXVIII','MMMMCCLXXXI','MMCXXVII','MMDCCCLXVIII','MMMCXCII','MMMMDCLVIII','MMMMDCCCXXXXII','MMDCCCCLXXXXVI','MDCCXL','MDCCLVII','MMMMDCCCLXXXVI','DCCXXXIII','MMMMDCCCCLXXXV','MMCCXXXXVIII','MMMCCLXXVIII','MMMDCLXXVIII','DCCCI','MMMMLXXXXVIIII','MMMCCCCLXXII','MMCLXXXVII','CCLXVI','MCDXLIII','MMCXXVIII','MDXIV','CCCXCVIII','CLXXVIII','MMCXXXXVIIII','MMMDCLXXXIV','CMLVIII','MCDLIX','MMMMDCCCXXXII','MMMMDCXXXIIII','MDCXXI','MMMDCXLV','MCLXXVIII','MCDXXII','IV','MCDLXXXXIII','MMMMDCCLXV','CCLI','MMMMDCCCXXXVIII','DCLXII','MCCCLXVII','MMMMDCCCXXXVI','MMDCCXLI','MLXI','MMMCDLXVIII','MCCCCXCIII','XXXIII','MMMDCLXIII','MMMMDCL','DCCCXXXXIIII','MMDLVII','DXXXVII','MCCCCXXIIII','MCVII','MMMMDCCXL','MMMMCXXXXIIII','MCCCCXXIV','MMCLXVIII','MMXCIII','MDCCLXXX','MCCCLIIII','MMDCLXXI','MXI','MCMLIV','MMMCCIIII','DCCLXXXVIIII','MDCLIV','MMMDCXIX','CMLXXXI','DCCLXXXVII','XXV','MMMXXXVI','MDVIIII','CLXIII','MMMCDLVIIII','MMCCCCVII','MMMLXX','MXXXXII','MMMMCCCLXVIII','MMDCCCXXVIII','MMMMDCXXXXI','MMMMDCCCXXXXV','MMMXV','MMMMCCXVIIII','MMDCCXIIII','MMMXXVII','MDCCLVIIII','MMCXXIIII','MCCCLXXIV','DCLVIII','MMMLVII','MMMCXLV','MMXCVII','MMMCCCLXXXVII','MMMMCCXXII','DXII','MMMDLV','MCCCLXXVIII','MMMCLIIII','MMMMCLXXXX','MMMCLXXXIIII','MDCXXIII','MMMMCCXVI','MMMMDLXXXIII','MMMDXXXXIII','MMMMCCCCLV','MMMDLXXXI','MMMCCLXXVI','MMMMXX','MMMMDLVI','MCCCCLXXX','MMMXXII','MMXXII','MMDCCCCXXXI','MMMDXXV','MMMDCLXXXVIIII','MMMDLXXXXVII','MDLXIIII','CMXC','MMMXXXVIII','MDLXXXVIII','MCCCLXXVI','MMCDLIX','MMDCCCXVIII','MDCCCXXXXVI','MMMMCMIV','MMMMDCIIII','MMCCXXXV','XXXXVI','MMMMCCXVII','MMCCXXIV','MCMLVIIII','MLXXXIX','MMMMLXXXIX','CLXXXXIX','MMMDCCCCLVIII','MMMMCCLXXIII','MCCCC','DCCCLIX','MMMCCCLXXXII','MMMCCLXVIIII','MCLXXXV','CDLXXXVII','DCVI','MMX','MMCCXIII','MMMMDCXX','MMMMXXVIII','DCCCLXII','MMMMCCCXLIII','MMMMCLXV','DXCI','MMMMCLXXX','MMMDCCXXXXI','MMMMXXXXVI','DCLX','MMMCCCXI','MCCLXXX','MMCDLXXII','DCCLXXI','MMMCCCXXXVI','MCCCCLXXXVIIII','CDLVIII','DCCLVI','MMMMDCXXXVIII','MMCCCLXXXIII','MMMMDCCLXXV','MMMXXXVI','CCCLXXXXIX','CV','CCCCXIII','CCCCXVI','MDCCCLXXXIIII','MMDCCLXXXII','MMMMCCCCLXXXI','MXXV','MMCCCLXXVIIII','MMMCCXII','MMMMCCXXXIII','MMCCCLXXXVI','MMMDCCCLVIIII','MCCXXXVII','MDCLXXV','XXXV','MMDLI','MMMCCXXX','MMMMCXXXXV','CCCCLIX','MMMMDCCCLXXIII','MMCCCXVII','DCCCXVI','MMMCCCXXXXV','MDCCCCXCV','CLXXXI','MMMMDCCLXX','MMMDCCCIII','MMCLXXVII','MMMDCCXXIX','MMDCCCXCIIII','MMMCDXXIIII','MMMMXXVIII','MMMMDCCCCLXVIII','MDCCCXX','MMMMCDXXI','MMMMDLXXXIX','CCXVI','MDVIII','MMCCLXXI','MMMDCCCLXXI','MMMCCCLXXVI','MMCCLXI','MMMMDCCCXXXIV','DLXXXVI','MMMMDXXXII','MMMXXIIII','MMMMCDIV','MMMMCCCXLVIII','MMMMCXXXVIII','MMMCCCLXVI','MDCCXVIII','MMCXX','CCCLIX','MMMMDCCLXXII','MDCCCLXXV','MMMMDCCCXXIV','DCCCXXXXVIII','MMMDCCCCXXXVIIII','MMMMCCXXXV','MDCLXXXIII','MMCCLXXXIV','MCLXXXXIIII','DXXXXIII','MCCCXXXXVIII','MMCLXXIX','MMMMCCLXIV','MXXII','MMMCXIX','MDCXXXVII','MMDCCVI','MCLXXXXVIII','MMMCXVI','MCCCLX','MMMCDX','CCLXVIIII','MMMCCLX','MCXXVIII','LXXXII','MCCCCLXXXI','MMMI','MMMCCCLXIV','MMMCCCXXVIIII','CXXXVIII','MMCCCXX','MMMCCXXVIIII','MCCLXVI','MMMCCCCXXXXVI','MMDCCXCIX','MCMLXXI','MMCCLXVIII','CDLXXXXIII','MMMMDCCXXII','MMMMDCCLXXXVII','MMMDCCLIV','MMCCLXIII','MDXXXVII','DCCXXXIIII','MCII','MMMDCCCLXXI','MMMLXXIII','MDCCCLIII','MMXXXVIII','MDCCXVIIII','MDCCCCXXXVII','MMCCCXVI','MCMXXII','MMMCCCLVIII','MMMMDCCCXX','MCXXIII','MMMDLXI','MMMMDXXII','MDCCCX','MMDXCVIIII','MMMDCCCCVIII','MMMMDCCCCXXXXVI','MMDCCCXXXV','MMCXCIV','MCMLXXXXIII','MMMCCCLXXVI','MMMMDCLXXXV','CMLXIX','DCXCII','MMXXVIII','MMMMCCCXXX','XXXXVIIII'
+];
+```
+
+## --seed-contents--
+
+```js
+function romanNumerals(roman) {
+
+  return true;
+}
+
+// Only change code above this line
+
+const testNumerals1 = [
+  'XIIIIII', 'XVI', 'MMMCCLXVIIII', 'XXXXVI', 'MMMMXX', 'CCLI', 'CCCCXX', 'MMMMDCXXXXI', 'DCCCCIIII', 'MXVIIII'
+];
+
+romanNumerals(testNumerals1);
+```
+
+# --solutions--
+
+```js
+function romanNumerals(roman) {
+  const numerals = [...roman];
+  const replaces = [
+    ['VIIII', 'IX'],
+    ['IIII', 'IV'],
+    ['LXXXX', 'XC'],
+    ['XXXX', 'XL'],
+    ['DCCCC', 'CM'],
+    ['CCCC', 'CD']
+  ];
+  let savedChars = 0;
+  for (let i = 0; i < numerals.length; i++) {
+    const charsBefore = numerals[i].length;
+    for (let j = 0; j < replaces.length; j++) {
+      numerals[i] = numerals[i].replace(...replaces[j]);
+    }
+    const charsAfter = numerals[i].length;
+    savedChars += charsBefore - charsAfter;
+  }
+  return savedChars;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-9-special-pythagorean-triplet.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-9-special-pythagorean-triplet.md
new file mode 100644
index 00000000000..a853dd4415e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-9-special-pythagorean-triplet.md
@@ -0,0 +1,74 @@
+---
+id: 5900f3761000cf542c50fe88
+title: 'Problem 9: Special Pythagorean triplet'
+challengeType: 1
+forumTopicId: 302205
+dashedName: problem-9-special-pythagorean-triplet
+---
+
+# --description--
+
+A Pythagorean triplet is a set of three natural numbers, `a` &lt; `b` &lt; `c`, for which,
+
+<div style='text-align: center;'><var>a</var><sup>2</sup> + <var>b</var><sup>2</sup> = <var>c</var><sup>2</sup></div>
+
+For example, 3<sup>2</sup> + 4<sup>2</sup> = 9 + 16 = 25 = 5<sup>2</sup>.
+
+There exists exactly one Pythagorean triplet for which `a` + `b` + `c` = 1000. Find the product `abc` such that `a` + `b` + `c` = `n`.
+
+# --hints--
+
+`specialPythagoreanTriplet(24)` should return a number.
+
+```js
+assert(typeof specialPythagoreanTriplet(24) === 'number');
+```
+
+`specialPythagoreanTriplet(24)` should return 480.
+
+```js
+assert.strictEqual(specialPythagoreanTriplet(24), 480);
+```
+
+`specialPythagoreanTriplet(120)` should return 49920, 55080 or 60000.
+
+```js
+assert([49920, 55080, 60000].includes(specialPythagoreanTriplet(120)));
+```
+
+`specialPythagoreanTriplet(1000)` should return 31875000.
+
+```js
+assert.strictEqual(specialPythagoreanTriplet(1000), 31875000);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function specialPythagoreanTriplet(n) {
+ let sumOfabc = n;
+
+ return true;
+}
+
+specialPythagoreanTriplet(1000);
+```
+
+# --solutions--
+
+```js
+const specialPythagoreanTriplet = (n)=>{
+ let sumOfabc = n;
+ let a,b,c;
+ for(a = 1; a<=sumOfabc/3; a++){
+ for(b = a+1; b<=sumOfabc/2; b++){
+ c = Math.sqrt(a*a+b*b);
+ if((a+b+c) == sumOfabc){
+ return a*b*c;
+ }
+ }
+ }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-90-cube-digit-pairs.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-90-cube-digit-pairs.md
new file mode 100644
index 00000000000..3e1206b4c4f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-90-cube-digit-pairs.md
@@ -0,0 +1,65 @@
+---
+id: 5900f3c61000cf542c50fed9
+title: 'Problem 90: Cube digit pairs'
+challengeType: 1
+forumTopicId: 302207
+dashedName: problem-90-cube-digit-pairs
+---
+
+# --description--
+
+Each of the six faces on a cube has a different digit (0 to 9) written on it; the same is done to a second cube. By placing the two cubes side-by-side in different positions we can form a variety of 2-digit numbers.
+
+For example, the square number 64 could be formed:
+
+<img class="img-responsive center-block" alt="two cubes, one with the number 6 and the other with number 4" src="https://cdn-media-1.freecodecamp.org/project-euler/cube-digit-pairs.png" style="background-color: white; padding: 10px;" />
+
+In fact, by carefully choosing the digits on both cubes it is possible to display all of the square numbers below one-hundred: 01, 04, 09, 16, 25, 36, 49, 64, and 81.
+
+For example, one way this can be achieved is by placing {0, 5, 6, 7, 8, 9} on one cube and {1, 2, 3, 4, 8, 9} on the other cube.
+
+However, for this problem we shall allow the 6 or 9 to be turned upside-down so that an arrangement like {0, 5, 6, 7, 8, 9} and {1, 2, 3, 4, 6, 7} allows for all nine square numbers to be displayed; otherwise it would be impossible to obtain 09.
+
+In determining a distinct arrangement we are interested in the digits on each cube, not the order.
+
+<div style="margin-left: 4em;">
+  {1, 2, 3, 4, 5, 6} is equivalent to {3, 6, 4, 1, 2, 5}<br>
+  {1, 2, 3, 4, 5, 6} is distinct from {1, 2, 3, 4, 5, 9}
+</div>
+
+But because we are allowing 6 and 9 to be reversed, the two distinct sets in the last example both represent the extended set {1, 2, 3, 4, 5, 6, 9} for the purpose of forming 2-digit numbers.
+
+How many distinct arrangements of the two cubes allow for all of the square numbers to be displayed?
+
+# --hints--
+
+`cubeDigitPairs()` should return a number.
+
+```js
+assert(typeof cubeDigitPairs() === 'number');
+```
+
+`cubeDigitPairs()` should return 1217.
+
+```js
+assert.strictEqual(cubeDigitPairs(), 1217);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cubeDigitPairs() {
+
+  return true;
+}
+
+cubeDigitPairs();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-91-right-triangles-with-integer-coordinates.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-91-right-triangles-with-integer-coordinates.md
new file mode 100644
index 00000000000..7874cbab3fc
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-91-right-triangles-with-integer-coordinates.md
@@ -0,0 +1,119 @@
+---
+id: 5900f3c71000cf542c50feda
+title: 'Problem 91: Right triangles with integer coordinates'
+challengeType: 1
+forumTopicId: 302208
+dashedName: problem-91-right-triangles-with-integer-coordinates
+---
+
+# --description--
+
+The points ${P}(x_1, y_1)$ and ${Q}(x_2, y_2)$ are plotted at integer co-ordinates and are joined to the origin, ${O}(0, 0)$, to form ${\Delta}OPQ$.
+
+<img class="img-responsive center-block" alt="a graph plotting points P (x_1, y_1) and Q(x_2, y_2) at integer coordinates that are joined to the origin O (0, 0)" src="https://cdn-media-1.freecodecamp.org/project-euler/right-triangles-integer-coordinates-1.png" style="background-color: white; padding: 10px;" />
+
+There are exactly fourteen triangles containing a right angle that can be formed when each co-ordinate lies between 0 and 2 inclusive; that is, $0 ≤ x_1, y_1, x_2, y_2 ≤ 2$.
+
+<img class="img-responsive center-block" alt="a diagram showing the 14 triangles containing a right angle that can be formed when each coordinate is between 0 and 2" src="https://cdn-media-1.freecodecamp.org/project-euler/right-triangles-integer-coordinates-2.png" style="background-color: white; padding: 10px;" />
+
+Given that $0 ≤ x_1, y_1, x_2, y_2 ≤ limit$, how many right triangles can be formed?
+
+# --hints--
+
+`rightTrianglesIntCoords(2)` should return a number.
+
+```js
+assert(typeof rightTrianglesIntCoords(2) === 'number');
+```
+
+`rightTrianglesIntCoords(2)` should return `14`.
+
+```js
+assert.strictEqual(rightTrianglesIntCoords(2), 14);
+```
+
+`rightTrianglesIntCoords(10)` should return `448`.
+
+```js
+assert.strictEqual(rightTrianglesIntCoords(10), 448);
+```
+
+`rightTrianglesIntCoords(25)` should return `3207`.
+
+```js
+assert.strictEqual(rightTrianglesIntCoords(25), 3207);
+```
+
+`rightTrianglesIntCoords(50)` should return `14234`.
+
+```js
+assert.strictEqual(rightTrianglesIntCoords(50), 14234);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function rightTrianglesIntCoords(limit) {
+
+  return true;
+}
+
+rightTrianglesIntCoords(2);
+```
+
+# --solutions--
+
+```js
+function rightTrianglesIntCoords(limit) {
+  function isRightTriangle(points) {
+    for (let i = 0; i < points.length; i++) {
+      const pointA = points[i];
+      const pointB = points[(i + 1) % 3];
+      const pointC = points[(i + 2) % 3];
+      const vectorAB = [pointB[0] - pointA[0], pointB[1] - pointA[1]];
+      const vectorAC = [pointC[0] - pointA[0], pointC[1] - pointA[1]];
+
+      if (isRightAngleBetween(vectorAB, vectorAC)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  function isRightAngleBetween(vector1, vector2) {
+    return vector1[0] * vector2[0] + vector1[1] * vector2[1] === 0;
+  }
+
+  function getSetKey(points) {
+    return (
+      '0.0,' +
+      points
+        .sort((a, b) => a[0] - b[0])
+        .map(point => point.join('.'))
+        .join(',')
+    );
+  }
+
+  const pointO = [0, 0];
+  const rightTriangles = new Set();
+  for (let x1 = 1; x1 <= limit; x1++) {
+    for (let y1 = 0; y1 <= limit; y1++) {
+      const pointP = [x1, y1];
+      for (let x2 = 0; x2 <= limit; x2++) {
+        for (let y2 = 1; y2 <= limit; y2++) {
+          const pointQ = [x2, y2];
+          if (pointP[0] === pointQ[0] && pointP[1] === pointQ[1]) {
+            continue;
+          }
+          if (isRightTriangle([pointO, pointP, pointQ])) {
+            rightTriangles.add(getSetKey([pointP, pointQ]));
+          }
+        }
+      }
+    }
+  }
+  return rightTriangles.size;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-92-square-digit-chains.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-92-square-digit-chains.md
new file mode 100644
index 00000000000..c560f06847c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-92-square-digit-chains.md
@@ -0,0 +1,153 @@
+---
+id: 5900f3c81000cf542c50fedb
+title: 'Problem 92: Square digit chains'
+challengeType: 1
+forumTopicId: 302209
+dashedName: problem-92-square-digit-chains
+---
+
+# --description--
+
+A number chain is created by continuously adding the square of the digits in a number to form a new number until it has been seen before.
+
+For example,
+
+$$\begin{align}   & 44 → 32 → 13 → 10 → \boldsymbol{1} → \boldsymbol{1}\\\\
+  & 85 → \boldsymbol{89} → 145 → 42 → 20 → 4 → 16 → 37 → 58 → \boldsymbol{89}\\\\ \end{align}$$
+
+Therefore any chain that arrives at 1 or 89 will become stuck in an endless loop. What is most amazing is that EVERY starting number will eventually arrive at 1 or 89.
+
+How many starting numbers below `limit` will arrive at 89?
+
+# --hints--
+
+`squareDigitChains(100)` should return a number.
+
+```js
+assert(typeof squareDigitChains(100) === 'number');
+```
+
+`squareDigitChains(100)` should return `80`.
+
+```js
+assert.strictEqual(squareDigitChains(100), 80);
+```
+
+`squareDigitChains(1000)` should return `857`.
+
+```js
+assert.strictEqual(squareDigitChains(1000), 857);
+```
+
+`squareDigitChains(100000)` should return `85623`.
+
+```js
+assert.strictEqual(squareDigitChains(100000), 85623);
+```
+
+`squareDigitChains(10000000)` should return `8581146`.
+
+```js
+assert.strictEqual(squareDigitChains(10000000), 8581146);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function squareDigitChains(limit) {
+
+  return true;
+}
+
+squareDigitChains(100);
+```
+
+# --solutions--
+
+```js
+function squareDigitChains(limit) {
+  // Based on https://www.xarg.org/puzzle/project-euler/problem-92/
+  function getCombinations(neededDigits, curDigits) {
+    if (neededDigits === curDigits.length) {
+      return [curDigits];
+    }
+    const combinations = [];
+    const lastDigit = curDigits.length !== 0 ? curDigits[0] : 9;
+    for (let i = 0; i <= lastDigit; i++) {
+      const results = getCombinations(neededDigits, [i].concat(curDigits));
+      combinations.push(...results);
+    }
+    return combinations;
+  }
+
+  function getPossibleSums(limit) {
+    const digitsCount = getDigits(limit).length - 1;
+    const possibleSquaredSums = [false];
+    for (let i = 1; i <= 81 * digitsCount; i++) {
+      let curVal = i;
+      while (curVal !== 1 && curVal !== 89) {
+        curVal = addSquaredDigits(curVal);
+      }
+      possibleSquaredSums[i] = curVal === 89;
+    }
+    return possibleSquaredSums;
+  }
+
+  function addSquaredDigits(num) {
+    const digits = getDigits(num);
+    let result = 0;
+    for (let i = 0; i < digits.length; i++) {
+      result += digits[i] ** 2;
+    }
+    return result;
+  }
+
+  function getDigits(number) {
+    const digits = [];
+    while (number > 0) {
+      digits.push(number % 10);
+      number = Math.floor(number / 10);
+    }
+    return digits;
+  }
+
+  function getFactorials(number) {
+    const factorials = [1];
+    for (let i = 1; i < number; i++) {
+      factorials[i] = factorials[i - 1] * i;
+    }
+    return factorials;
+  }
+
+  const neededDigits = getDigits(limit).length - 1;
+  const combinations = getCombinations(neededDigits, []);
+  const possibleSquaredDigitsSums = getPossibleSums(limit);
+  const factorials = getFactorials(neededDigits + 1);
+
+  let endingWith89 = 0;
+
+  for (let i = 0; i < combinations.length; i++) {
+    let counts = [0, 0, 0, 0, 0, 0, 0, 0, 0, 0];
+    let digits = combinations[i];
+    let curSum = 0;
+    for (let j = 0; j < digits.length; j++) {
+      const curDigit = digits[j];
+      curSum += curDigit ** 2;
+      counts[curDigit]++;
+    }
+
+    if (possibleSquaredDigitsSums[curSum]) {
+      let denominator = 1;
+      for (let j = 0; j < counts.length; j++) {
+        denominator = denominator * factorials[counts[j]];
+      }
+      endingWith89 += Math.floor(
+        factorials[factorials.length - 1] / denominator
+      );
+    }
+  }
+  return endingWith89;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-93-arithmetic-expressions.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-93-arithmetic-expressions.md
new file mode 100644
index 00000000000..5a8afb7d782
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-93-arithmetic-expressions.md
@@ -0,0 +1,59 @@
+---
+id: 5900f3ca1000cf542c50fedc
+title: 'Problem 93: Arithmetic expressions'
+challengeType: 1
+forumTopicId: 302210
+dashedName: problem-93-arithmetic-expressions
+---
+
+# --description--
+
+By using each of the digits from the set, {1, 2, 3, 4}, exactly once, and making use of the four arithmetic operations (+, −, \*, /) and brackets/parentheses, it is possible to form different positive integer targets.
+
+For example,
+
+<div style='margin-left: 4em;'>
+  8 = (4 * (1 + 3)) / 2<br>
+  14 = 4 * (3 + 1 / 2)<br>
+  19 = 4 * (2 + 3) − 1<br>
+  36 = 3 * 4 * (2 + 1)
+</div>
+
+Note that concatenations of the digits, like 12 + 34, are not allowed.
+
+Using the set, {1, 2, 3, 4}, it is possible to obtain thirty-one different target numbers of which 36 is the maximum, and each of the numbers 1 to 28 can be obtained before encountering the first non-expressible number.
+
+Find the set of four distinct digits, `a` &lt; `b` &lt; `c` &lt; `d`, for which the longest set of consecutive positive integers, 1 to `n`, can be obtained, giving your answer as a string: `abcd`.
+
+# --hints--
+
+`arithmeticExpressions()` should return a number.
+
+```js
+assert(typeof arithmeticExpressions() === 'number');
+```
+
+`arithmeticExpressions()` should return 1258.
+
+```js
+assert.strictEqual(arithmeticExpressions(), 1258);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function arithmeticExpressions() {
+
+  return true;
+}
+
+arithmeticExpressions();
+```
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-94-almost-equilateral-triangles.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-94-almost-equilateral-triangles.md
new file mode 100644
index 00000000000..4b3ab85e079
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-94-almost-equilateral-triangles.md
@@ -0,0 +1,84 @@
+---
+id: 5900f3ca1000cf542c50fedd
+title: 'Problem 94: Almost equilateral triangles'
+challengeType: 1
+forumTopicId: 302211
+dashedName: problem-94-almost-equilateral-triangles
+---
+
+# --description--
+
+It is easily proved that no equilateral triangle exists with integral length sides and integral area. However, the almost equilateral triangle 5-5-6 has an area of 12 square units.
+
+We shall define an <dfn>almost equilateral triangle</dfn> to be a triangle for which two sides are equal and the third differs by no more than one unit.
+
+Find the sum of the perimeters of all almost equilateral triangles with integral side lengths and area and whose perimeters do not exceed `limit`.
+
+# --hints--
+
+`almostEquilateralTriangles(50)` should return a number.
+
+```js
+assert(typeof almostEquilateralTriangles(50) === 'number');
+```
+
+`almostEquilateralTriangles(50)` should return `66`.
+
+```js
+assert.strictEqual(almostEquilateralTriangles(50), 66);
+```
+
+`almostEquilateralTriangles(10000)` should return `3688`.
+
+```js
+assert.strictEqual(almostEquilateralTriangles(10000), 3688);
+```
+
+`almostEquilateralTriangles(10000000)` should return `9973078`.
+
+```js
+assert.strictEqual(almostEquilateralTriangles(10000000), 9973078);
+```
+
+`almostEquilateralTriangles(1000000000)` should return `518408346`.
+
+```js
+assert.strictEqual(almostEquilateralTriangles(1000000000), 518408346);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function almostEquilateralTriangles(limit) {
+
+  return true;
+}
+
+almostEquilateralTriangles(50);
+```
+
+# --solutions--
+
+```js
+function almostEquilateralTriangles(limit) {
+  // Based on https://blog.dreamshire.com/project-euler-94-solution/
+  let perimetersSum = 0;
+
+  let sidesAB = 1;
+  let sideC = 1;
+  let perimeter = 0;
+  let perimeterOffset = 1;
+
+  while (perimeter <= limit) {
+    [sidesAB, sideC] = [4 * sidesAB - sideC + 2 * perimeterOffset, sidesAB];
+    perimeterOffset = -perimeterOffset;
+
+    perimetersSum += perimeter;
+    perimeter = 3 * sidesAB - perimeterOffset;
+  }
+
+  return perimetersSum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-95-amicable-chains.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-95-amicable-chains.md
new file mode 100644
index 00000000000..fe2d422a206
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-95-amicable-chains.md
@@ -0,0 +1,124 @@
+---
+id: 5900f3cc1000cf542c50fede
+title: 'Problem 95: Amicable chains'
+challengeType: 1
+forumTopicId: 302212
+dashedName: problem-95-amicable-chains
+---
+
+# --description--
+
+The proper divisors of a number are all the divisors excluding the number itself. For example, the proper divisors of 28 are 1, 2, 4, 7, and 14. As the sum of these divisors is equal to 28, we call it a perfect number.
+
+Interestingly the sum of the proper divisors of 220 is 284 and the sum of the proper divisors of 284 is 220, forming a chain of two numbers. For this reason, 220 and 284 are called an amicable pair.
+
+Perhaps less well known are longer chains. For example, starting with 12496, we form a chain of five numbers:
+
+$$ 12496 → 14288 → 15472 → 14536 → 14264 \\,(→ 12496 → \cdots) $$
+
+Since this chain returns to its starting point, it is called an amicable chain.
+
+Find the smallest member of the longest amicable chain with no element exceeding `limit`.
+
+# --hints--
+
+`amicableChains(300)` should return a number.
+
+```js
+assert(typeof amicableChains(300) === 'number');
+```
+
+`amicableChains(300)` should return `220`.
+
+```js
+assert.strictEqual(amicableChains(300), 220);
+```
+
+`amicableChains(15000)` should return `220`.
+
+```js
+assert.strictEqual(amicableChains(15000), 220);
+```
+
+`amicableChains(100000)` should return `12496`.
+
+```js
+assert.strictEqual(amicableChains(100000), 12496);
+```
+
+`amicableChains(1000000)` should return `14316`.
+
+```js
+assert.strictEqual(amicableChains(1000000), 14316);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function amicableChains(limit) {
+
+  return true;
+}
+
+amicableChains(300);
+```
+
+# --solutions--
+
+```js
+function amicableChains(limit) {
+  function getSmallestMember(chain) {
+    let smallest = chain[0];
+    for (let i = 1; i < chain.length; i++) {
+      if (smallest > chain[i]) {
+        smallest = chain[i];
+      }
+    }
+    return smallest;
+  }
+
+  function getFactorsSums(limit) {
+    const factorsSums = new Array(limit + 1).fill(1);
+    for (let i = 2; i <= limit / 2; i++) {
+      for (let j = 2 * i; j <= limit; j += i) {
+        factorsSums[j] += i;
+      }
+    }
+    return factorsSums;
+  }
+
+  const factorsSums = getFactorsSums(limit);
+  const checkedNumbers = new Set();
+
+  let longestChain = 0;
+  let smallestMember = 0;
+  for (let i = 0; i <= limit; i++) {
+    const curChain = [];
+    let curNumber = i;
+    while (!checkedNumbers.has(curNumber) && factorsSums[curNumber] <= limit) {
+      curNumber = factorsSums[curNumber];
+
+      const chainStart = curChain.indexOf(curNumber);
+      if (chainStart === -1) {
+        curChain.push(curNumber);
+        continue;
+      }
+
+      const chainLength = curChain.length - chainStart;
+      if (chainLength > longestChain) {
+        longestChain = chainLength;
+        smallestMember = getSmallestMember(curChain.slice(chainStart));
+      }
+      break;
+    }
+
+    for (let j = 0; j < curChain.length; j++) {
+      checkedNumbers.add(curChain[j]);
+    }
+  }
+
+  return smallestMember;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-96-su-doku.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-96-su-doku.md
new file mode 100644
index 00000000000..098fdb0d398
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-96-su-doku.md
@@ -0,0 +1,296 @@
+---
+id: 5900f3cc1000cf542c50fedf
+title: 'Problem 96: Su Doku'
+challengeType: 1
+forumTopicId: 302213
+dashedName: problem-96-su-doku
+---
+
+# --description--
+
+Su Doku (Japanese meaning *number place*) is the name given to a popular puzzle concept. Its origin is unclear, but credit must be attributed to Leonhard Euler who invented a similar, and much more difficult, puzzle idea called Latin Squares. The objective of Su Doku puzzles, however, is to replace the blanks (or zeros) in a 9 by 9 grid in such that each row, column, and 3 by 3 box contains each of the digits 1 to 9. Below is an example of a typical starting puzzle grid and its solution grid.
+
+<div style="margin: auto; background-color: white; padding: 10px; width: 80%; text-align: center;">
+  <table border="0" cellpadding="0" cellspacing="0" align="center">
+    <tbody>
+      <tr>
+        <td>
+          <table cellpadding="5" cellspacing="0" border="1">
+            <tbody>
+              <tr>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  0 0 3<br />9 0 0<br />0 0 1
+                </td>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  0 2 0<br />3 0 5<br />8 0 6
+                </td>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  6 0 0<br />0 0 1<br />4 0 0
+                </td>
+              </tr>
+              <tr>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  0 0 8<br />7 0 0<br />0 0 6
+                </td>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  1 0 2<br />0 0 0<br />7 0 8
+                </td>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  9 0 0<br />0 0 8<br />2 0 0
+                </td>
+              </tr>
+              <tr>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  0 0 2<br />8 0 0<br />0 0 5
+                </td>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  6 0 9<br />2 0 3<br />0 1 0
+                </td>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  5 0 0<br />0 0 9<br />3 0 0
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+        <td width="50">
+          <img src="images/spacer.gif" width="50" height="1" alt="" /><br />
+        </td>
+        <td>
+          <table cellpadding="5" cellspacing="0" border="1">
+            <tbody>
+              <tr>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  4 8 3<br />9 6 7<br />2 5 1
+                </td>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  9 2 1<br />3 4 5<br />8 7 6
+                </td>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  6 5 7<br />8 2 1<br />4 9 3
+                </td>
+              </tr>
+              <tr>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  5 4 8<br />7 2 9<br />1 3 6
+                </td>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  1 3 2<br />5 6 4<br />7 9 8
+                </td>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  9 7 6<br />1 3 8<br />2 4 5
+                </td>
+              </tr>
+              <tr>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  3 7 2<br />8 1 4<br />6 9 5
+                </td>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  6 8 9<br />2 5 3<br />4 1 7
+                </td>
+                <td style="font-family:'courier new';font-size:14pt; color: black; padding: 5px; border: 2px solid black;">
+                  5 1 4<br />7 6 9<br />3 8 2
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</div>
+
+A well constructed Su Doku puzzle has a unique solution and can be solved by logic, although it may be necessary to employ "guess and test" methods in order to eliminate options (there is much contested opinion over this). The complexity of the search determines the difficulty of the puzzle; the example above is considered easy because it can be solved by straight forward direct deduction.
+
+The `puzzlesArr` array contains different Su Doku puzzle strings ranging in difficulty, but all with unique solutions.
+
+By solving all puzzles in `puzzlesArr`, find the sum of the 3-digit numbers found in the top left corner of each solution grid; for example, 483 is the 3-digit number found in the top left corner of the solution grid above.
+
+# --hints--
+
+`suDoku(testPuzzles1)` should return a number.
+
+```js
+assert(typeof suDoku(_testPuzzles1) === 'number');
+```
+
+`suDoku(testPuzzles1)` should return `1190`.
+
+```js
+assert.strictEqual(suDoku(_testPuzzles1), 1190);
+```
+
+`suDoku(testPuzzles2)` should return `24702`.
+
+```js
+assert.strictEqual(suDoku(_testPuzzles2), 24702);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testPuzzles1 = [
+  '003020600900305001001806400008102900700000008006708200002609500800203009005010300',
+  '200080300060070084030500209000105408000000000402706000301007040720040060004010003',
+  '000000907000420180000705026100904000050000040000507009920108000034059000507000000'
+];
+
+const _testPuzzles2 = [
+  '003020600900305001001806400008102900700000008006708200002609500800203009005010300',
+  '200080300060070084030500209000105408000000000402706000301007040720040060004010003',
+  '000000907000420180000705026100904000050000040000507009920108000034059000507000000',
+  '030050040008010500460000012070502080000603000040109030250000098001020600080060020',
+  '020810740700003100090002805009040087400208003160030200302700060005600008076051090',
+  '100920000524010000000000070050008102000000000402700090060000000000030945000071006',
+  '043080250600000000000001094900004070000608000010200003820500000000000005034090710',
+  '480006902002008001900370060840010200003704100001060049020085007700900600609200018',
+  '000900002050123400030000160908000000070000090000000205091000050007439020400007000',
+  '001900003900700160030005007050000009004302600200000070600100030042007006500006800',
+  '000125400008400000420800000030000095060902010510000060000003049000007200001298000',
+  '062340750100005600570000040000094800400000006005830000030000091006400007059083260',
+  '300000000005009000200504000020000700160000058704310600000890100000067080000005437',
+  '630000000000500008005674000000020000003401020000000345000007004080300902947100080',
+  '000020040008035000000070602031046970200000000000501203049000730000000010800004000',
+  '361025900080960010400000057008000471000603000259000800740000005020018060005470329',
+  '050807020600010090702540006070020301504000908103080070900076205060090003080103040',
+  '080005000000003457000070809060400903007010500408007020901020000842300000000100080',
+  '003502900000040000106000305900251008070408030800763001308000104000020000005104800',
+  '000000000009805100051907420290401065000000000140508093026709580005103600000000000',
+  '020030090000907000900208005004806500607000208003102900800605007000309000030020050',
+  '005000006070009020000500107804150000000803000000092805907006000030400010200000600',
+  '040000050001943600009000300600050002103000506800020007005000200002436700030000040',
+  '004000000000030002390700080400009001209801307600200008010008053900040000000000800',
+  '360020089000361000000000000803000602400603007607000108000000000000418000970030014',
+  '500400060009000800640020000000001008208000501700500000000090084003000600060003002',
+  '007256400400000005010030060000508000008060200000107000030070090200000004006312700',
+  '000000000079050180800000007007306800450708096003502700700000005016030420000000000',
+  '030000080009000500007509200700105008020090030900402001004207100002000800070000090',
+  '200170603050000100000006079000040700000801000009050000310400000005000060906037002',
+  '000000080800701040040020030374000900000030000005000321010060050050802006080000000',
+  '000000085000210009960080100500800016000000000890006007009070052300054000480000000',
+  '608070502050608070002000300500090006040302050800050003005000200010704090409060701',
+  '050010040107000602000905000208030501040070020901080406000401000304000709020060010',
+  '053000790009753400100000002090080010000907000080030070500000003007641200061000940',
+  '006080300049070250000405000600317004007000800100826009000702000075040190003090600',
+  '005080700700204005320000084060105040008000500070803010450000091600508007003010600',
+  '000900800128006400070800060800430007500000009600079008090004010003600284001007000',
+  '000080000270000054095000810009806400020403060006905100017000620460000038000090000',
+  '000602000400050001085010620038206710000000000019407350026040530900020007000809000',
+  '000900002050123400030000160908000000070000090000000205091000050007439020400007000',
+  '380000000000400785009020300060090000800302009000040070001070500495006000000000092',
+  '000158000002060800030000040027030510000000000046080790050000080004070100000325000',
+  '010500200900001000002008030500030007008000500600080004040100700000700006003004050',
+  '080000040000469000400000007005904600070608030008502100900000005000781000060000010',
+  '904200007010000000000706500000800090020904060040002000001607000000000030300005702',
+  '000700800006000031040002000024070000010030080000060290000800070860000500002006000',
+  '001007090590080001030000080000005800050060020004100000080000030100020079020700400',
+  '000003017015009008060000000100007000009000200000500004000000020500600340340200000',
+  '300200000000107000706030500070009080900020004010800050009040301000702000000008006'
+];
+```
+
+## --seed-contents--
+
+```js
+function suDoku(puzzlesArr) {
+
+  return true;
+}
+
+// Only change code above this line
+
+const testPuzzles1 = [
+  '003020600900305001001806400008102900700000008006708200002609500800203009005010300',
+  '200080300060070084030500209000105408000000000402706000301007040720040060004010003',
+  '000000907000420180000705026100904000050000040000507009920108000034059000507000000'
+];
+
+suDoku(testPuzzles1);
+```
+
+# --solutions--
+
+```js
+function suDoku(puzzlesArr) {
+  function solve(puzzle) {
+    for (let row = 0; row < 9; row++) {
+      for (let col = 0; col < 9; col++) {
+        if (puzzle[row][col] > 0) {
+          continue;
+        }
+
+        const allowedNumbers = getAllowedNumbers(puzzle, row, col);
+
+        for (let number = 1; number <= 9; number++) {
+          if (allowedNumbers[number]) {
+            puzzle[row][col] = number;
+            if (solve(puzzle)) {
+              return true;
+            }
+          }
+        }
+
+        puzzle[row][col] = 0;
+        return false;
+      }
+    }
+    return true;
+  }
+
+  function getAllowedNumbers(puzzle, row, col) {
+    const allowed = new Array(10).fill(true);
+    allowed[0] = false;
+
+    for (let i = 0; i < 9; i++) {
+      const numberInSameRow = puzzle[row][i];
+      if (numberInSameRow > 0) {
+        allowed[numberInSameRow] = false;
+      }
+
+      const numberInSameCol = puzzle[i][col];
+      if (numberInSameCol > 0) {
+        allowed[numberInSameCol] = false;
+      }
+    }
+
+    const rowOfSubGrid = Math.floor(row / 3) * 3;
+    const colOfSubGrid = Math.floor(col / 3) * 3;
+    for (let rowInSubGrid = 0; rowInSubGrid < 3; rowInSubGrid++) {
+      for (let colInSubGrid = 0; colInSubGrid < 3; colInSubGrid++) {
+        const numberInSameSubGrid =
+          puzzle[rowOfSubGrid + rowInSubGrid][colOfSubGrid + colInSubGrid];
+        if (numberInSameSubGrid > 0) {
+          allowed[numberInSameSubGrid] = false;
+        }
+      }
+    }
+
+    return allowed;
+  }
+
+  function parsePuzzle(string) {
+    const puzzle = [];
+    for (let row = 0; row < 9; row++) {
+      puzzle.push(
+        string
+          .slice(row * 9, 9 + row * 9)
+          .split('')
+          .map(x => parseInt(x, 10))
+      );
+    }
+    return puzzle;
+  }
+
+  let sum = 0;
+  for (let i = 0; i < puzzlesArr.length; i++) {
+    const puzzle = parsePuzzle(puzzlesArr[i]);
+    if (solve(puzzle)) {
+      sum += 100 * puzzle[0][0] + 10 * puzzle[0][1] + puzzle[0][2];
+    }
+  }
+
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-97-large-non-mersenne-prime.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-97-large-non-mersenne-prime.md
new file mode 100644
index 00000000000..cabdb3486c9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-97-large-non-mersenne-prime.md
@@ -0,0 +1,88 @@
+---
+id: 5900f3ce1000cf542c50fee0
+title: 'Problem 97: Large non-Mersenne prime'
+challengeType: 1
+forumTopicId: 302214
+dashedName: problem-97-large-non-mersenne-prime
+---
+
+# --description--
+
+The first known prime found to exceed one million digits was discovered in 1999, and is a Mersenne prime of the form $2^{6972593} − 1$; it contains exactly 2,098,960 digits. Subsequently other Mersenne primes, of the form $2^p − 1$, have been found which contain more digits.
+
+However, in 2004 there was found a massive non-Mersenne prime which contains 2,357,207 digits: $28433 × 2^{7830457} + 1$.
+
+Find the last ten digits of that non-Mersenne prime in the form $multiplier × 2^{power} + 1$.
+
+# --hints--
+
+`largeNonMersennePrime(19, 6833086)` should return a string.
+
+```js
+assert(typeof largeNonMersennePrime(19, 6833086) === 'string');
+```
+
+`largeNonMersennePrime(19, 6833086)` should return the string `3637590017`.
+
+```js
+assert.strictEqual(largeNonMersennePrime(19, 6833086), '3637590017');
+```
+
+`largeNonMersennePrime(27, 7046834)` should return the string `0130771969`.
+
+```js
+assert.strictEqual(largeNonMersennePrime(27, 7046834), '0130771969');
+```
+
+`largeNonMersennePrime(6679881, 6679881)` should return the string `4455386113`.
+
+```js
+assert.strictEqual(largeNonMersennePrime(6679881, 6679881), '4455386113');
+```
+
+`largeNonMersennePrime(28433, 7830457)` should return the string `8739992577`.
+
+```js
+assert.strictEqual(largeNonMersennePrime(28433, 7830457), '8739992577');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function largeNonMersennePrime(multiplier, power) {
+
+  return true;
+}
+
+largeNonMersennePrime(19, 6833086);
+```
+
+# --solutions--
+
+```js
+function largeNonMersennePrime(multiplier, power) {
+  function modStepsResults(number, other, mod, startValue, step) {
+    let result = startValue;
+    for (let i = 0; i < other; i++) {
+      result = step(number, result) % mod;
+    }
+    return result;
+  }
+
+  const numOfDigits = 10;
+  const mod = 10 ** numOfDigits;
+  const digitsAfterPower = modStepsResults(2, power, mod, 1, (a, b) => a * b);
+  const digitsAfterMultiply = modStepsResults(
+    digitsAfterPower,
+    multiplier,
+    mod,
+    0,
+    (a, b) => a + b
+  );
+  const lastDigits = (digitsAfterMultiply + 1) % mod;
+
+  return lastDigits.toString().padStart(10, '0');
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-98-anagramic-squares.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-98-anagramic-squares.md
new file mode 100644
index 00000000000..f54ab71dd62
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-98-anagramic-squares.md
@@ -0,0 +1,205 @@
+---
+id: 5900f3cf1000cf542c50fee1
+title: 'Problem 98: Anagramic squares'
+challengeType: 1
+forumTopicId: 302215
+dashedName: problem-98-anagramic-squares
+---
+
+# --description--
+
+By replacing each of the letters in the word CARE with 1, 2, 9, and 6 respectively, we form a square number: $1296 = 36^2$. What is remarkable is that, by using the same digital substitutions, the anagram, RACE, also forms a square number: $9216 = 96^2$. We shall call CARE (and RACE) a square anagram word pair and specify further that leading zeroes are not permitted, neither may a different letter have the same digital value as another letter.
+
+Using the `words` array, find all the square anagram word pairs (a palindromic word is NOT considered to be an anagram of itself).
+
+What is the largest square number formed by any member of such a pair?
+
+**Note:** All anagrams formed must be contained in the given `words` array.
+
+# --hints--
+
+`anagramicSquares(['CARE', 'RACE'])` should return a number.
+
+```js
+assert(typeof anagramicSquares(['CARE', 'RACE']) === 'number');
+```
+
+`anagramicSquares(['CARE', 'RACE'])` should return `9216`.
+
+```js
+assert.strictEqual(anagramicSquares(['CARE', 'RACE']), 9216);
+```
+
+`anagramicSquares(testWords1)` should return `4761`.
+
+```js
+assert.strictEqual(anagramicSquares(_testWords1), 4761);
+```
+
+`anagramicSquares(testWords2)` should return `18769`.
+
+```js
+assert.strictEqual(anagramicSquares(_testWords2), 18769);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testWords1 = [
+  "DAMAGE","DANGER","DANGEROUS","DARK","DATA","DATE","DAUGHTER","DAY","DEAD","DEAL","DEATH","DEBATE","DEBT","DECADE","DECIDE","DECISION","DECLARE","DEEP","DEFENCE","DEFENDANT","DEFINE","DEFINITION","DEGREE","DELIVER","DEMAND","DEMOCRATIC","DEMONSTRATE","DENY","DEPARTMENT","DEPEND","DEPUTY","DERIVE","DESCRIBE","DESCRIPTION","DESIGN","DESIRE","DESK","DESPITE","DESTROY","DETAIL","DETAILED","DETERMINE","DEVELOP","DEVELOPMENT","DEVICE","DIE","DIFFERENCE","DIFFERENT","DIFFICULT","DIFFICULTY","DINNER","DIRECT","DIRECTION","DIRECTLY","DIRECTOR","DISAPPEAR","DISCIPLINE","DISCOVER","DISCUSS","DISCUSSION","DISEASE","DISPLAY","DISTANCE","DISTINCTION","DISTRIBUTION","DISTRICT","DIVIDE","DIVISION","DO","DOCTOR","DOCUMENT","DOG","DOMESTIC","DOOR","DOUBLE","DOUBT","DOWN","DRAW","DRAWING","DREAM","DRESS","DRINK","DRIVE","DRIVER","DROP","DRUG","DRY","DUE","DURING","DUTY","LABOUR","LACK","LADY","LAND","LANGUAGE","LARGE","LARGELY","LAST","LATE","LATER","LATTER","LAUGH","LAUNCH","LAW","LAWYER","LAY","LEAD","LEADER","LEADERSHIP","LEADING","LEAF","LEAGUE","LEAN","LEARN","LEAST","LEAVE","LEFT","LEG","LEGAL","LEGISLATION","LENGTH","LESS","LET","LETTER","LEVEL","LIABILITY","LIBERAL","LIBRARY","LIE","LIFE","LIFT","LIGHT","LIKE","LIKELY","LIMIT","LIMITED","LINE","LINK","LIP","LIST","LISTEN","LITERATURE","LITTLE","LIVE","LIVING","LOAN","LOCAL","LOCATION","LONG","LOOK","LORD","LOSE","LOSS","LOT","LOVE","LOVELY","LOW","LUNCH"
+];
+const _testWords2 = [
+  "A","ABILITY","ABLE","ABOUT","ABOVE","ABSENCE","ABSOLUTELY","ACADEMIC","ACCEPT","ACCESS","ACCIDENT","ACCOMPANY","ACCORDING","ACCOUNT","ACHIEVE","ACHIEVEMENT","ACID","ACQUIRE","ACROSS","ACT","ACTION","ACTIVE","ACTIVITY","ACTUAL","ACTUALLY","ADD","ADDITION","ADDITIONAL","ADDRESS","ADMINISTRATION","ADMIT","ADOPT","ADULT","ADVANCE","ADVANTAGE","ADVICE","ADVISE","AFFAIR","AFFECT","AFFORD","AFRAID","AFTER","AFTERNOON","AFTERWARDS","AGAIN","AGAINST","AGE","AGENCY","AGENT","AGO","AGREE","AGREEMENT","AHEAD","AID","AIM","AIR","AIRCRAFT","ALL","ALLOW","ALMOST","ALONE","ALONG","ALREADY","ALRIGHT","ALSO","ALTERNATIVE","ALTHOUGH","ALWAYS","AMONG","AMONGST","AMOUNT","AN","ANALYSIS","ANCIENT","AND","ANIMAL","ANNOUNCE","ANNUAL","ANOTHER","ANSWER","ANY","ANYBODY","ANYONE","ANYTHING","ANYWAY","APART","APPARENT","APPARENTLY","APPEAL","APPEAR","APPEARANCE","APPLICATION","APPLY","APPOINT","APPOINTMENT","APPROACH","APPROPRIATE","APPROVE","AREA","ARGUE","ARGUMENT","ARISE","ARM","ARMY","AROUND","ARRANGE","ARRANGEMENT","ARRIVE","ART","ARTICLE","ARTIST","AS","ASK","ASPECT","ASSEMBLY","ASSESS","ASSESSMENT","ASSET","ASSOCIATE","ASSOCIATION","ASSUME","ASSUMPTION","AT","ATMOSPHERE","ATTACH","ATTACK","ATTEMPT","ATTEND","ATTENTION","ATTITUDE","ATTRACT","ATTRACTIVE","AUDIENCE","AUTHOR","AUTHORITY","AVAILABLE","AVERAGE","AVOID","AWARD","AWARE","AWAY","AYE","BABY","BACK","BACKGROUND","BAD","BAG","BALANCE","BALL","BAND","BANK","BAR","BASE","BASIC","BASIS","BATTLE","BE","BEAR","BEAT","BEAUTIFUL","BECAUSE","BECOME","BED","BEDROOM","BEFORE","BEGIN","BEGINNING","BEHAVIOUR","BEHIND","BELIEF","BELIEVE","BELONG","BELOW","BENEATH","BENEFIT","BESIDE","BEST","BETTER","BETWEEN","BEYOND","BIG","BILL","BIND","BIRD","BIRTH","BIT","BLACK","BLOCK","BLOOD","BLOODY","BLOW","BLUE","BOARD","BOAT","BODY","BONE","BOOK","BORDER","BOTH","BOTTLE","BOTTOM","BOX","BOY","BRAIN","BRANCH","BREAK","BREATH","BRIDGE","BRIEF","BRIGHT","BRING","BROAD","BROTHER","BUDGET","BUILD","BUILDING","BURN","BUS","BUSINESS","BUSY","BUT","BUY","BY","CABINET","CALL","CAMPAIGN","CAN","CANDIDATE","CAPABLE","CAPACITY","CAPITAL","CAR","CARD","CARE","CAREER","CAREFUL","CAREFULLY","CARRY","CASE","CASH","CAT","CATCH","CATEGORY","CAUSE","CELL","CENTRAL","CENTRE","CENTURY","CERTAIN","CERTAINLY","CHAIN","CHAIR","CHAIRMAN","CHALLENGE","CHANCE","CHANGE","CHANNEL","CHAPTER","CHARACTER","CHARACTERISTIC","CHARGE","CHEAP","CHECK","CHEMICAL","CHIEF","CHILD","CHOICE","CHOOSE","CHURCH","CIRCLE","CIRCUMSTANCE","CITIZEN","CITY","CIVIL","CLAIM","CLASS","CLEAN","CLEAR","CLEARLY","CLIENT","CLIMB","CLOSE","CLOSELY","CLOTHES","CLUB","COAL","CODE","COFFEE","COLD","COLLEAGUE","COLLECT","COLLECTION","COLLEGE","COLOUR","COMBINATION","COMBINE","COME","COMMENT","COMMERCIAL","COMMISSION","COMMIT","COMMITMENT","COMMITTEE","COMMON","COMMUNICATION","COMMUNITY","COMPANY","COMPARE","COMPARISON","COMPETITION","COMPLETE","COMPLETELY","COMPLEX","COMPONENT","COMPUTER","CONCENTRATE","CONCENTRATION","CONCEPT","CONCERN","CONCERNED","CONCLUDE","CONCLUSION","CONDITION","CONDUCT","CONFERENCE","CONFIDENCE","CONFIRM","CONFLICT","CONGRESS","CONNECT","CONNECTION","CONSEQUENCE","CONSERVATIVE","CONSIDER","CONSIDERABLE","CONSIDERATION","CONSIST","CONSTANT","CONSTRUCTION","CONSUMER","CONTACT","CONTAIN","CONTENT","CONTEXT","CONTINUE","CONTRACT","CONTRAST","CONTRIBUTE","CONTRIBUTION","CONTROL","CONVENTION","CONVERSATION","COPY","CORNER","CORPORATE","CORRECT","COS","COST","COULD","COUNCIL","COUNT","COUNTRY","COUNTY","COUPLE","COURSE","COURT","COVER","CREATE","CREATION","CREDIT","CRIME","CRIMINAL","CRISIS","CRITERION","CRITICAL","CRITICISM","CROSS","CROWD","CRY","CULTURAL","CULTURE","CUP","CURRENT","CURRENTLY","CURRICULUM","CUSTOMER","CUT","DAMAGE","DANGER","DANGEROUS","DARK","DATA","DATE","DAUGHTER","DAY","DEAD","DEAL","DEATH","DEBATE","DEBT","DECADE","DECIDE","DECISION","DECLARE","DEEP","DEFENCE","DEFENDANT","DEFINE","DEFINITION","DEGREE","DELIVER","DEMAND","DEMOCRATIC","DEMONSTRATE","DENY","DEPARTMENT","DEPEND","DEPUTY","DERIVE","DESCRIBE","DESCRIPTION","DESIGN","DESIRE","DESK","DESPITE","DESTROY","DETAIL","DETAILED","DETERMINE","DEVELOP","DEVELOPMENT","DEVICE","DIE","DIFFERENCE","DIFFERENT","DIFFICULT","DIFFICULTY","DINNER","DIRECT","DIRECTION","DIRECTLY","DIRECTOR","DISAPPEAR","DISCIPLINE","DISCOVER","DISCUSS","DISCUSSION","DISEASE","DISPLAY","DISTANCE","DISTINCTION","DISTRIBUTION","DISTRICT","DIVIDE","DIVISION","DO","DOCTOR","DOCUMENT","DOG","DOMESTIC","DOOR","DOUBLE","DOUBT","DOWN","DRAW","DRAWING","DREAM","DRESS","DRINK","DRIVE","DRIVER","DROP","DRUG","DRY","DUE","DURING","DUTY","EACH","EAR","EARLY","EARN","EARTH","EASILY","EAST","EASY","EAT","ECONOMIC","ECONOMY","EDGE","EDITOR","EDUCATION","EDUCATIONAL","EFFECT","EFFECTIVE","EFFECTIVELY","EFFORT","EGG","EITHER","ELDERLY","ELECTION","ELEMENT","ELSE","ELSEWHERE","EMERGE","EMPHASIS","EMPLOY","EMPLOYEE","EMPLOYER","EMPLOYMENT","EMPTY","ENABLE","ENCOURAGE","END","ENEMY","ENERGY","ENGINE","ENGINEERING","ENJOY","ENOUGH","ENSURE","ENTER","ENTERPRISE","ENTIRE","ENTIRELY","ENTITLE","ENTRY","ENVIRONMENT","ENVIRONMENTAL","EQUAL","EQUALLY","EQUIPMENT","ERROR","ESCAPE","ESPECIALLY","ESSENTIAL","ESTABLISH","ESTABLISHMENT","ESTATE","ESTIMATE","EVEN","EVENING","EVENT","EVENTUALLY","EVER","EVERY","EVERYBODY","EVERYONE","EVERYTHING","EVIDENCE","EXACTLY","EXAMINATION","EXAMINE","EXAMPLE","EXCELLENT","EXCEPT","EXCHANGE","EXECUTIVE","EXERCISE","EXHIBITION","EXIST","EXISTENCE","EXISTING","EXPECT","EXPECTATION","EXPENDITURE","EXPENSE","EXPENSIVE","EXPERIENCE","EXPERIMENT","EXPERT","EXPLAIN","EXPLANATION","EXPLORE","EXPRESS","EXPRESSION","EXTEND","EXTENT","EXTERNAL","EXTRA","EXTREMELY","EYE","FACE","FACILITY","FACT","FACTOR","FACTORY","FAIL","FAILURE","FAIR","FAIRLY","FAITH","FALL","FAMILIAR","FAMILY","FAMOUS","FAR","FARM","FARMER","FASHION","FAST","FATHER","FAVOUR","FEAR","FEATURE","FEE","FEEL","FEELING","FEMALE","FEW","FIELD","FIGHT","FIGURE","FILE","FILL","FILM","FINAL","FINALLY","FINANCE","FINANCIAL","FIND","FINDING","FINE","FINGER","FINISH","FIRE","FIRM","FIRST","FISH","FIT","FIX","FLAT","FLIGHT","FLOOR","FLOW","FLOWER","FLY","FOCUS","FOLLOW","FOLLOWING","FOOD","FOOT","FOOTBALL","FOR","FORCE","FOREIGN","FOREST","FORGET","FORM","FORMAL","FORMER","FORWARD","FOUNDATION","FREE","FREEDOM","FREQUENTLY","FRESH","FRIEND","FROM","FRONT","FRUIT","FUEL","FULL","FULLY","FUNCTION","FUND","FUNNY","FURTHER","FUTURE","GAIN","GAME","GARDEN","GAS","GATE","GATHER","GENERAL","GENERALLY","GENERATE","GENERATION","GENTLEMAN","GET","GIRL","GIVE","GLASS","GO","GOAL","GOD","GOLD","GOOD","GOVERNMENT","GRANT","GREAT","GREEN","GREY","GROUND","GROUP","GROW","GROWING","GROWTH","GUEST","GUIDE","GUN","HAIR","HALF","HALL","HAND","HANDLE","HANG","HAPPEN","HAPPY","HARD","HARDLY","HATE","HAVE","HE","HEAD","HEALTH","HEAR","HEART","HEAT","HEAVY","HELL","HELP","HENCE","HER","HERE","HERSELF","HIDE","HIGH","HIGHLY","HILL","HIM","HIMSELF","HIS","HISTORICAL","HISTORY","HIT","HOLD","HOLE","HOLIDAY","HOME","HOPE","HORSE","HOSPITAL","HOT","HOTEL","HOUR","HOUSE","HOUSEHOLD","HOUSING","HOW","HOWEVER","HUGE","HUMAN","HURT","HUSBAND","I","IDEA","IDENTIFY","IF","IGNORE","ILLUSTRATE","IMAGE","IMAGINE","IMMEDIATE","IMMEDIATELY","IMPACT","IMPLICATION","IMPLY","IMPORTANCE","IMPORTANT","IMPOSE","IMPOSSIBLE","IMPRESSION","IMPROVE","IMPROVEMENT","IN","INCIDENT","INCLUDE","INCLUDING","INCOME","INCREASE","INCREASED","INCREASINGLY","INDEED","INDEPENDENT","INDEX","INDICATE","INDIVIDUAL","INDUSTRIAL","INDUSTRY","INFLUENCE","INFORM","INFORMATION","INITIAL","INITIATIVE","INJURY","INSIDE","INSIST","INSTANCE","INSTEAD","INSTITUTE","INSTITUTION","INSTRUCTION","INSTRUMENT","INSURANCE","INTEND","INTENTION","INTEREST","INTERESTED","INTERESTING","INTERNAL","INTERNATIONAL","INTERPRETATION","INTERVIEW","INTO","INTRODUCE","INTRODUCTION","INVESTIGATE","INVESTIGATION","INVESTMENT","INVITE","INVOLVE","IRON","IS","ISLAND","ISSUE","IT","ITEM","ITS","ITSELF","JOB","JOIN","JOINT","JOURNEY","JUDGE","JUMP","JUST","JUSTICE","KEEP","KEY","KID","KILL","KIND","KING","KITCHEN","KNEE","KNOW","KNOWLEDGE","LABOUR","LACK","LADY","LAND","LANGUAGE","LARGE","LARGELY","LAST","LATE","LATER","LATTER","LAUGH","LAUNCH","LAW","LAWYER","LAY","LEAD","LEADER","LEADERSHIP","LEADING","LEAF","LEAGUE","LEAN","LEARN","LEAST","LEAVE","LEFT","LEG","LEGAL","LEGISLATION","LENGTH","LESS","LET","LETTER","LEVEL","LIABILITY","LIBERAL","LIBRARY","LIE","LIFE","LIFT","LIGHT","LIKE","LIKELY","LIMIT","LIMITED","LINE","LINK","LIP","LIST","LISTEN","LITERATURE","LITTLE","LIVE","LIVING","LOAN","LOCAL","LOCATION","LONG","LOOK","LORD","LOSE","LOSS","LOT","LOVE","LOVELY","LOW","LUNCH","MACHINE","MAGAZINE","MAIN","MAINLY","MAINTAIN","MAJOR","MAJORITY","MAKE","MALE","MAN","MANAGE","MANAGEMENT","MANAGER","MANNER","MANY","MAP","MARK","MARKET","MARRIAGE","MARRIED","MARRY","MASS","MASTER","MATCH","MATERIAL","MATTER","MAY","MAYBE","ME","MEAL","MEAN","MEANING","MEANS","MEANWHILE","MEASURE","MECHANISM","MEDIA","MEDICAL","MEET","MEETING","MEMBER","MEMBERSHIP","MEMORY","MENTAL","MENTION","MERELY","MESSAGE","METAL","METHOD","MIDDLE","MIGHT","MILE","MILITARY","MILK","MIND","MINE","MINISTER","MINISTRY","MINUTE","MISS","MISTAKE","MODEL","MODERN","MODULE","MOMENT","MONEY","MONTH","MORE","MORNING","MOST","MOTHER","MOTION","MOTOR","MOUNTAIN","MOUTH","MOVE","MOVEMENT","MUCH","MURDER","MUSEUM","MUSIC","MUST","MY","MYSELF","NAME","NARROW","NATION","NATIONAL","NATURAL","NATURE","NEAR","NEARLY","NECESSARILY","NECESSARY","NECK","NEED","NEGOTIATION","NEIGHBOUR","NEITHER","NETWORK","NEVER","NEVERTHELESS","NEW","NEWS","NEWSPAPER","NEXT","NICE","NIGHT","NO","NOBODY","NOD","NOISE","NONE","NOR","NORMAL","NORMALLY","NORTH","NORTHERN","NOSE","NOT","NOTE","NOTHING","NOTICE","NOTION","NOW","NUCLEAR","NUMBER","NURSE","OBJECT","OBJECTIVE","OBSERVATION","OBSERVE","OBTAIN","OBVIOUS","OBVIOUSLY","OCCASION","OCCUR","ODD","OF","OFF","OFFENCE","OFFER","OFFICE","OFFICER","OFFICIAL","OFTEN","OIL","OKAY","OLD","ON","ONCE","ONE","ONLY","ONTO","OPEN","OPERATE","OPERATION","OPINION","OPPORTUNITY","OPPOSITION","OPTION","OR","ORDER","ORDINARY","ORGANISATION","ORGANISE","ORGANIZATION","ORIGIN","ORIGINAL","OTHER","OTHERWISE","OUGHT","OUR","OURSELVES","OUT","OUTCOME","OUTPUT","OUTSIDE","OVER","OVERALL","OWN","OWNER","PACKAGE","PAGE","PAIN","PAINT","PAINTING","PAIR","PANEL","PAPER","PARENT","PARK","PARLIAMENT","PART","PARTICULAR","PARTICULARLY","PARTLY","PARTNER","PARTY","PASS","PASSAGE","PAST","PATH","PATIENT","PATTERN","PAY","PAYMENT","PEACE","PENSION","PEOPLE","PER","PERCENT","PERFECT","PERFORM","PERFORMANCE","PERHAPS","PERIOD","PERMANENT","PERSON","PERSONAL","PERSUADE","PHASE","PHONE","PHOTOGRAPH","PHYSICAL","PICK","PICTURE","PIECE","PLACE","PLAN","PLANNING","PLANT","PLASTIC","PLATE","PLAY","PLAYER","PLEASE","PLEASURE","PLENTY","PLUS","POCKET","POINT","POLICE","POLICY","POLITICAL","POLITICS","POOL","POOR","POPULAR","POPULATION","POSITION","POSITIVE","POSSIBILITY","POSSIBLE","POSSIBLY","POST","POTENTIAL","POUND","POWER","POWERFUL","PRACTICAL","PRACTICE","PREFER","PREPARE","PRESENCE","PRESENT","PRESIDENT","PRESS","PRESSURE","PRETTY","PREVENT","PREVIOUS","PREVIOUSLY","PRICE","PRIMARY","PRIME","PRINCIPLE","PRIORITY","PRISON","PRISONER","PRIVATE","PROBABLY","PROBLEM","PROCEDURE","PROCESS","PRODUCE","PRODUCT","PRODUCTION","PROFESSIONAL","PROFIT","PROGRAM","PROGRAMME","PROGRESS","PROJECT","PROMISE","PROMOTE","PROPER","PROPERLY","PROPERTY","PROPORTION","PROPOSE","PROPOSAL","PROSPECT","PROTECT","PROTECTION","PROVE","PROVIDE","PROVIDED","PROVISION","PUB","PUBLIC","PUBLICATION","PUBLISH","PULL","PUPIL","PURPOSE","PUSH","PUT","QUALITY","QUARTER","QUESTION","QUICK","QUICKLY","QUIET","QUITE","RACE","RADIO","RAILWAY","RAIN","RAISE","RANGE","RAPIDLY","RARE","RATE","RATHER","REACH","REACTION","READ","READER","READING","READY","REAL","REALISE","REALITY","REALIZE","REALLY","REASON","REASONABLE","RECALL","RECEIVE","RECENT","RECENTLY","RECOGNISE","RECOGNITION","RECOGNIZE","RECOMMEND","RECORD","RECOVER","RED","REDUCE","REDUCTION","REFER","REFERENCE","REFLECT","REFORM","REFUSE","REGARD","REGION","REGIONAL","REGULAR","REGULATION","REJECT","RELATE","RELATION","RELATIONSHIP","RELATIVE","RELATIVELY","RELEASE","RELEVANT","RELIEF","RELIGION","RELIGIOUS","RELY","REMAIN","REMEMBER","REMIND","REMOVE","REPEAT","REPLACE","REPLY","REPORT","REPRESENT","REPRESENTATION","REPRESENTATIVE","REQUEST","REQUIRE","REQUIREMENT","RESEARCH","RESOURCE","RESPECT","RESPOND","RESPONSE","RESPONSIBILITY","RESPONSIBLE","REST","RESTAURANT","RESULT","RETAIN","RETURN","REVEAL","REVENUE","REVIEW","REVOLUTION","RICH","RIDE","RIGHT","RING","RISE","RISK","RIVER","ROAD","ROCK","ROLE","ROLL","ROOF","ROOM","ROUND","ROUTE","ROW","ROYAL","RULE","RUN","RURAL","SAFE","SAFETY","SALE","SAME","SAMPLE","SATISFY","SAVE","SAY","SCALE","SCENE","SCHEME","SCHOOL","SCIENCE","SCIENTIFIC","SCIENTIST","SCORE","SCREEN","SEA","SEARCH","SEASON","SEAT","SECOND","SECONDARY","SECRETARY","SECTION","SECTOR","SECURE","SECURITY","SEE","SEEK","SEEM","SELECT","SELECTION","SELL","SEND","SENIOR","SENSE","SENTENCE","SEPARATE","SEQUENCE","SERIES","SERIOUS","SERIOUSLY","SERVANT","SERVE","SERVICE","SESSION","SET","SETTLE","SETTLEMENT","SEVERAL","SEVERE","SEX","SEXUAL","SHAKE","SHALL","SHAPE","SHARE","SHE","SHEET","SHIP","SHOE","SHOOT","SHOP","SHORT","SHOT","SHOULD","SHOULDER","SHOUT","SHOW","SHUT","SIDE","SIGHT","SIGN","SIGNAL","SIGNIFICANCE","SIGNIFICANT","SILENCE","SIMILAR","SIMPLE","SIMPLY","SINCE","SING","SINGLE","SIR","SISTER","SIT","SITE","SITUATION","SIZE","SKILL","SKIN","SKY","SLEEP","SLIGHTLY","SLIP","SLOW","SLOWLY","SMALL","SMILE","SO","SOCIAL","SOCIETY","SOFT","SOFTWARE","SOIL","SOLDIER","SOLICITOR","SOLUTION","SOME","SOMEBODY","SOMEONE","SOMETHING","SOMETIMES","SOMEWHAT","SOMEWHERE","SON","SONG","SOON","SORRY","SORT","SOUND","SOURCE","SOUTH","SOUTHERN","SPACE","SPEAK","SPEAKER","SPECIAL","SPECIES","SPECIFIC","SPEECH","SPEED","SPEND","SPIRIT","SPORT","SPOT","SPREAD","SPRING","STAFF","STAGE","STAND","STANDARD","STAR","START","STATE","STATEMENT","STATION","STATUS","STAY","STEAL","STEP","STICK","STILL","STOCK","STONE","STOP","STORE","STORY","STRAIGHT","STRANGE","STRATEGY","STREET","STRENGTH","STRIKE","STRONG","STRONGLY","STRUCTURE","STUDENT","STUDIO","STUDY","STUFF","STYLE","SUBJECT","SUBSTANTIAL","SUCCEED","SUCCESS","SUCCESSFUL","SUCH","SUDDENLY","SUFFER","SUFFICIENT","SUGGEST","SUGGESTION","SUITABLE","SUM","SUMMER","SUN","SUPPLY","SUPPORT","SUPPOSE","SURE","SURELY","SURFACE","SURPRISE","SURROUND","SURVEY","SURVIVE","SWITCH","SYSTEM","TABLE","TAKE","TALK","TALL","TAPE","TARGET","TASK","TAX","TEA","TEACH","TEACHER","TEACHING","TEAM","TEAR","TECHNICAL","TECHNIQUE","TECHNOLOGY","TELEPHONE","TELEVISION","TELL","TEMPERATURE","TEND","TERM","TERMS","TERRIBLE","TEST","TEXT","THAN","THANK","THANKS","THAT","THE","THEATRE","THEIR","THEM","THEME","THEMSELVES","THEN","THEORY","THERE","THEREFORE","THESE","THEY","THIN","THING","THINK","THIS","THOSE","THOUGH","THOUGHT","THREAT","THREATEN","THROUGH","THROUGHOUT","THROW","THUS","TICKET","TIME","TINY","TITLE","TO","TODAY","TOGETHER","TOMORROW","TONE","TONIGHT","TOO","TOOL","TOOTH","TOP","TOTAL","TOTALLY","TOUCH","TOUR","TOWARDS","TOWN","TRACK","TRADE","TRADITION","TRADITIONAL","TRAFFIC","TRAIN","TRAINING","TRANSFER","TRANSPORT","TRAVEL","TREAT","TREATMENT","TREATY","TREE","TREND","TRIAL","TRIP","TROOP","TROUBLE","TRUE","TRUST","TRUTH","TRY","TURN","TWICE","TYPE","TYPICAL","UNABLE","UNDER","UNDERSTAND","UNDERSTANDING","UNDERTAKE","UNEMPLOYMENT","UNFORTUNATELY","UNION","UNIT","UNITED","UNIVERSITY","UNLESS","UNLIKELY","UNTIL","UP","UPON","UPPER","URBAN","US","USE","USED","USEFUL","USER","USUAL","USUALLY","VALUE","VARIATION","VARIETY","VARIOUS","VARY","VAST","VEHICLE","VERSION","VERY","VIA","VICTIM","VICTORY","VIDEO","VIEW","VILLAGE","VIOLENCE","VISION","VISIT","VISITOR","VITAL","VOICE","VOLUME","VOTE","WAGE","WAIT","WALK","WALL","WANT","WAR","WARM","WARN","WASH","WATCH","WATER","WAVE","WAY","WE","WEAK","WEAPON","WEAR","WEATHER","WEEK","WEEKEND","WEIGHT","WELCOME","WELFARE","WELL","WEST","WESTERN","WHAT","WHATEVER","WHEN","WHERE","WHEREAS","WHETHER","WHICH","WHILE","WHILST","WHITE","WHO","WHOLE","WHOM","WHOSE","WHY","WIDE","WIDELY","WIFE","WILD","WILL","WIN","WIND","WINDOW","WINE","WING","WINNER","WINTER","WISH","WITH","WITHDRAW","WITHIN","WITHOUT","WOMAN","WONDER","WONDERFUL","WOOD","WORD","WORK","WORKER","WORKING","WORKS","WORLD","WORRY","WORTH","WOULD","WRITE","WRITER","WRITING","WRONG","YARD","YEAH","YEAR","YES","YESTERDAY","YET","YOU","YOUNG","YOUR","YOURSELF","YOUTH"
+];
+```
+
+## --seed-contents--
+
+```js
+function anagramicSquares(words) {
+
+  return true;
+}
+
+// Only change code above this line
+const testWords1 = [
+"DAMAGE","DANGER","DANGEROUS","DARK","DATA","DATE","DAUGHTER","DAY","DEAD","DEAL","DEATH","DEBATE","DEBT","DECADE","DECIDE","DECISION","DECLARE","DEEP","DEFENCE","DEFENDANT","DEFINE","DEFINITION","DEGREE","DELIVER","DEMAND","DEMOCRATIC","DEMONSTRATE","DENY","DEPARTMENT","DEPEND","DEPUTY","DERIVE","DESCRIBE","DESCRIPTION","DESIGN","DESIRE","DESK","DESPITE","DESTROY","DETAIL","DETAILED","DETERMINE","DEVELOP","DEVELOPMENT","DEVICE","DIE","DIFFERENCE","DIFFERENT","DIFFICULT","DIFFICULTY","DINNER","DIRECT","DIRECTION","DIRECTLY","DIRECTOR","DISAPPEAR","DISCIPLINE","DISCOVER","DISCUSS","DISCUSSION","DISEASE","DISPLAY","DISTANCE","DISTINCTION","DISTRIBUTION","DISTRICT","DIVIDE","DIVISION","DO","DOCTOR","DOCUMENT","DOG","DOMESTIC","DOOR","DOUBLE","DOUBT","DOWN","DRAW","DRAWING","DREAM","DRESS","DRINK","DRIVE","DRIVER","DROP","DRUG","DRY","DUE","DURING","DUTY","LABOUR","LACK","LADY","LAND","LANGUAGE","LARGE","LARGELY","LAST","LATE","LATER","LATTER","LAUGH","LAUNCH","LAW","LAWYER","LAY","LEAD","LEADER","LEADERSHIP","LEADING","LEAF","LEAGUE","LEAN","LEARN","LEAST","LEAVE","LEFT","LEG","LEGAL","LEGISLATION","LENGTH","LESS","LET","LETTER","LEVEL","LIABILITY","LIBERAL","LIBRARY","LIE","LIFE","LIFT","LIGHT","LIKE","LIKELY","LIMIT","LIMITED","LINE","LINK","LIP","LIST","LISTEN","LITERATURE","LITTLE","LIVE","LIVING","LOAN","LOCAL","LOCATION","LONG","LOOK","LORD","LOSE","LOSS","LOT","LOVE","LOVELY","LOW","LUNCH"
+];
+
+anagramicSquares(testWords1);
+```
+
+# --solutions--
+
+```js
+function anagramicSquares(words) {
+  // Based on https://www.mathblog.dk/project-euler-98-anagrams-square-numbers/
+  function findMaximumSquare(squares, word1, word2) {
+    let maximumSquare = 0;
+
+    for (let i = 0; i < squares.length; i++) {
+      const length = squares[i].toString().length;
+
+      if (length < word1.length) {
+        continue;
+      }
+      if (length > word1.length) {
+        break;
+      }
+
+      const word1Square = squares[i];
+      const letterToDigit = mapLettersToDigits(word1, word1Square);
+
+      const noProperMappingExist = Object.keys(letterToDigit).length === 0;
+      if (noProperMappingExist) {
+        continue;
+      }
+
+      const word2Square = getNumberFromMapping(word2, letterToDigit);
+      if (word2Square === 0) {
+        continue;
+      }
+
+      const doesWord2SquareExist = squares.indexOf(word2Square) !== -1;
+      if (doesWord2SquareExist) {
+        const pairMaximum = Math.max(word1Square, word2Square);
+        maximumSquare = Math.max(maximumSquare, pairMaximum);
+      }
+    }
+    return maximumSquare;
+  }
+
+  function getNumberFromMapping(word, letterToDigit) {
+    const wouldNumberHaveLeadingZero = letterToDigit[word[0]] === 0;
+    if (wouldNumberHaveLeadingZero) {
+      return 0;
+    }
+
+    let number = 0;
+    for (let i = 0; i < word.length; i++) {
+      number = number * 10 + letterToDigit[word[i]];
+    }
+    return number;
+  }
+
+  function mapLettersToDigits(word, square) {
+    const letterToDigit = {};
+    for (let j = word.length - 1; j >= 0; j--) {
+      const curDigit = square % 10;
+      square = Math.floor(square / 10);
+
+      const curLetter = word[j];
+
+      const isLetterRepeated = letterToDigit.hasOwnProperty(curLetter);
+      if (isLetterRepeated) {
+        const isLetterUsedForTheSameDigit =
+          letterToDigit[curLetter] === curDigit;
+        if (isLetterUsedForTheSameDigit) {
+          continue;
+        }
+
+        return {};
+      }
+
+      const isDigitUsed = Object.values(letterToDigit).indexOf(curDigit) !== -1;
+      if (isDigitUsed) {
+        return {};
+      }
+
+      letterToDigit[curLetter] = curDigit;
+    }
+    return letterToDigit;
+  }
+
+  function groupWordsWithSameLetters(words) {
+    const lettersToWords = {};
+    for (let i = 0; i < words.length; i++) {
+      const word = words[i];
+      const sortedLetters = word.split('').sort().join('');
+      if (!lettersToWords.hasOwnProperty(sortedLetters)) {
+        lettersToWords[sortedLetters] = [];
+      }
+      lettersToWords[sortedLetters].push(word);
+    }
+    return lettersToWords;
+  }
+
+  const lettersToWords = groupWordsWithSameLetters(words);
+
+  const anagrams = Object.keys(lettersToWords).filter(
+    letters => lettersToWords[letters].length > 1
+  );
+  const lengthOfLongestAnagram = anagrams
+    .map(anagram => anagram.length)
+    .sort((a, b) => b - a)[0];
+
+  const squares = [];
+  const numberLimit = (10 ** lengthOfLongestAnagram) ** 0.5;
+  for (let number = 2; number < numberLimit; number++) {
+    const square = number ** 2;
+    squares.push(square);
+  }
+
+  let largestSquare = 0;
+  for (let i = 0; i < anagrams.length; i++) {
+    const curWords = lettersToWords[anagrams[i]];
+
+    for (let j = 0; j < curWords.length; j++) {
+      for (let k = j + 1; k < curWords.length; k++) {
+        const squareValue = findMaximumSquare(
+          squares,
+          curWords[j],
+          curWords[k]
+        );
+        if (squareValue > largestSquare) {
+          largestSquare = squareValue;
+        }
+      }
+    }
+  }
+
+  return largestSquare;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-99-largest-exponential.md b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-99-largest-exponential.md
new file mode 100644
index 00000000000..af44a7d0bd7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/project-euler/problem-99-largest-exponential.md
@@ -0,0 +1,83 @@
+---
+id: 5900f3d01000cf542c50fee2
+title: 'Problem 99: Largest exponential'
+challengeType: 1
+forumTopicId: 302216
+dashedName: problem-99-largest-exponential
+---
+
+# --description--
+
+Comparing two numbers written in index form like $2^{11}$ and $3^7$ is not difficult, as any calculator would confirm that $2^{11} = 2048 &lt; 3^7 = 2187$.
+
+However, confirming that $632382^{518061} &lt; 519432^{525806}$ would be much more difficult, as both numbers contain over three million digits.
+
+Using the 2D `baseExp` array of base/exponent pairs, determine pair with the greatest numerical value and return it.
+
+# --hints--
+
+`largestExponential(testArray1)` should return an array.
+
+```js
+assert(Array.isArray(largestExponential(_testArray1)));
+```
+
+`largestExponential(testArray1)` should return `[840237, 507276]`.
+
+```js
+assert.deepEqual(largestExponential(_testArray1), [840237, 507276]);
+```
+
+`largestExponential(testArray2)` should return `[895447, 504922]`.
+
+```js
+assert.deepEqual(largestExponential(_testArray2), [895447, 504922]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testArray1 = [
+  [492798,527927],[30125,670983],[895603,504906],[450785,531539],[840237,507276],[380711,538522],[63577,625673],[76801,615157],[502694,527123]
+];
+const _testArray2 = [
+  [519432,525806],[632382,518061],[78864,613712],[466580,530130],[780495,510032],[525895,525320],[15991,714883],[960290,502358],[760018,511029],[166800,575487],[210884,564478],[555151,523163],[681146,515199],[563395,522587],[738250,512126],[923525,503780],[595148,520429],[177108,572629],[750923,511482],[440902,532446],[881418,505504],[422489,534197],[979858,501616],[685893,514935],[747477,511661],[167214,575367],[234140,559696],[940238,503122],[728969,512609],[232083,560102],[900971,504694],[688801,514772],[189664,569402],[891022,505104],[445689,531996],[119570,591871],[821453,508118],[371084,539600],[911745,504251],[623655,518600],[144361,582486],[352442,541775],[420726,534367],[295298,549387],[6530,787777],[468397,529976],[672336,515696],[431861,533289],[84228,610150],[805376,508857],[444409,532117],[33833,663511],[381850,538396],[402931,536157],[92901,604930],[304825,548004],[731917,512452],[753734,511344],[51894,637373],[151578,580103],[295075,549421],[303590,548183],[333594,544123],[683952,515042],[60090,628880],[951420,502692],[28335,674991],[714940,513349],[343858,542826],[549279,523586],[804571,508887],[260653,554881],[291399,549966],[402342,536213],[408889,535550],[40328,652524],[375856,539061],[768907,510590],[165993,575715],[976327,501755],[898500,504795],[360404,540830],[478714,529095],[694144,514472],[488726,528258],[841380,507226],[328012,544839],[22389,690868],[604053,519852],[329514,544641],[772965,510390],[492798,527927],[30125,670983],[895603,504906],[450785,531539],[840237,507276],[380711,538522],[63577,625673],[76801,615157],[502694,527123],[597706,520257],[310484,547206],[944468,502959],[121283,591152],[451131,531507],[566499,522367],[425373,533918],[40240,652665],[39130,654392],[714926,513355],[469219,529903],[806929,508783],[287970,550487],[92189,605332],[103841,599094],[671839,515725],[452048,531421],[987837,501323],[935192,503321],[88585,607450],[613883,519216],[144551,582413],[647359,517155],[213902,563816],[184120,570789],[258126,555322],[502546,527130],[407655,535678],[401528,536306],[477490,529193],[841085,507237],[732831,512408],[833000,507595],[904694,504542],[581435,521348],[455545,531110],[873558,505829],[94916,603796],[720176,513068],[545034,523891],[246348,557409],[556452,523079],[832015,507634],[173663,573564],[502634,527125],[250732,556611],[569786,522139],[216919,563178],[521815,525623],[92304,605270],[164446,576167],[753413,511364],[11410,740712],[448845,531712],[925072,503725],[564888,522477],[7062,780812],[641155,517535],[738878,512100],[636204,517828],[372540,539436],[443162,532237],[571192,522042],[655350,516680],[299741,548735],[581914,521307],[965471,502156],[513441,526277],[808682,508700],[237589,559034],[543300,524025],[804712,508889],[247511,557192],[543486,524008],[504383,526992],[326529,545039],[792493,509458],[86033,609017],[126554,589005],[579379,521481],[948026,502823],[404777,535969],[265767,554022],[266876,553840],[46631,643714],[492397,527958],[856106,506581],[795757,509305],[748946,511584],[294694,549480],[409781,535463],[775887,510253],[543747,523991],[210592,564536],[517119,525990],[520253,525751],[247926,557124],[592141,520626],[346580,542492],[544969,523902],[506501,526817],[244520,557738],[144745,582349],[69274,620858],[292620,549784],[926027,503687],[736320,512225],[515528,526113],[407549,535688],[848089,506927],[24141,685711],[9224,757964],[980684,501586],[175259,573121],[489160,528216],[878970,505604],[969546,502002],[525207,525365],[690461,514675],[156510,578551],[659778,516426],[468739,529945],[765252,510770],[76703,615230],[165151,575959],[29779,671736],[928865,503569],[577538,521605],[927555,503618],[185377,570477],[974756,501809],[800130,509093],[217016,563153],[365709,540216],[774508,510320],[588716,520851],[631673,518104],[954076,502590],[777828,510161],[990659,501222],[597799,520254],[786905,509727],[512547,526348],[756449,511212],[869787,505988],[653747,516779],[84623,609900],[839698,507295],[30159,670909],[797275,509234],[678136,515373],[897144,504851],[989554,501263],[413292,535106],[55297,633667],[788650,509637],[486748,528417],[150724,580377],[56434,632490],[77207,614869],[588631,520859],[611619,519367],[100006,601055],[528924,525093],[190225,569257],[851155,506789],[682593,515114],[613043,519275],[514673,526183],[877634,505655],[878905,505602],[1926,914951],[613245,519259],[152481,579816],[841774,507203],[71060,619442],[865335,506175],[90244,606469],[302156,548388],[399059,536557],[478465,529113],[558601,522925],[69132,620966],[267663,553700],[988276,501310],[378354,538787],[529909,525014],[161733,576968],[758541,511109],[823425,508024],[149821,580667],[269258,553438],[481152,528891],[120871,591322],[972322,501901],[981350,501567],[676129,515483],[950860,502717],[119000,592114],[392252,537272],[191618,568919],[946699,502874],[289555,550247],[799322,509139],[703886,513942],[194812,568143],[261823,554685],[203052,566221],[217330,563093],[734748,512313],[391759,537328],[807052,508777],[564467,522510],[59186,629748],[113447,594545],[518063,525916],[905944,504492],[613922,519213],[439093,532607],[445946,531981],[230530,560399],[297887,549007],[459029,530797],[403692,536075],[855118,506616],[963127,502245],[841711,507208],[407411,535699],[924729,503735],[914823,504132],[333725,544101],[176345,572832],[912507,504225],[411273,535308],[259774,555036],[632853,518038],[119723,591801],[163902,576321],[22691,689944],[402427,536212],[175769,572988],[837260,507402],[603432,519893],[313679,546767],[538165,524394],[549026,523608],[61083,627945],[898345,504798],[992556,501153],[369999,539727],[32847,665404],[891292,505088],[152715,579732],[824104,507997],[234057,559711],[730507,512532],[960529,502340],[388395,537687],[958170,502437],[57105,631806],[186025,570311],[993043,501133],[576770,521664],[215319,563513],[927342,503628],[521353,525666],[39563,653705],[752516,511408],[110755,595770],[309749,547305],[374379,539224],[919184,503952],[990652,501226],[647780,517135],[187177,570017],[168938,574877],[649558,517023],[278126,552016],[162039,576868],[658512,516499],[498115,527486],[896583,504868],[561170,522740],[747772,511647],[775093,510294],[652081,516882],[724905,512824],[499707,527365],[47388,642755],[646668,517204],[571700,522007],[180430,571747],[710015,513617],[435522,532941],[98137,602041],[759176,511070],[486124,528467],[526942,525236],[878921,505604],[408313,535602],[926980,503640],[882353,505459],[566887,522345],[3326,853312],[911981,504248],[416309,534800],[392991,537199],[622829,518651],[148647,581055],[496483,527624],[666314,516044],[48562,641293],[672618,515684],[443676,532187],[274065,552661],[265386,554079],[347668,542358],[31816,667448],[181575,571446],[961289,502320],[365689,540214],[987950,501317],[932299,503440],[27388,677243],[746701,511701],[492258,527969],[147823,581323],[57918,630985],[838849,507333],[678038,515375],[27852,676130],[850241,506828],[818403,508253],[131717,587014],[850216,506834],[904848,504529],[189758,569380],[392845,537217],[470876,529761],[925353,503711],[285431,550877],[454098,531234],[823910,508003],[318493,546112],[766067,510730],[261277,554775],[421530,534289],[694130,514478],[120439,591498],[213308,563949],[854063,506662],[365255,540263],[165437,575872],[662240,516281],[289970,550181],[847977,506933],[546083,523816],[413252,535113],[975829,501767],[361540,540701],[235522,559435],[224643,561577],[736350,512229],[328303,544808],[35022,661330],[307838,547578],[474366,529458],[873755,505819],[73978,617220],[827387,507845],[670830,515791],[326511,545034],[309909,547285],[400970,536363],[884827,505352],[718307,513175],[28462,674699],[599384,520150],[253565,556111],[284009,551093],[343403,542876],[446557,531921],[992372,501160],[961601,502308],[696629,514342],[919537,503945],[894709,504944],[892201,505051],[358160,541097],[448503,531745],[832156,507636],[920045,503924],[926137,503675],[416754,534757],[254422,555966],[92498,605151],[826833,507873],[660716,516371],[689335,514746],[160045,577467],[814642,508425],[969939,501993],[242856,558047],[76302,615517],[472083,529653],[587101,520964],[99066,601543],[498005,527503],[709800,513624],[708000,513716],[20171,698134],[285020,550936],[266564,553891],[981563,501557],[846502,506991],[334,1190800],[209268,564829],[9844,752610],[996519,501007],[410059,535426],[432931,533188],[848012,506929],[966803,502110],[983434,501486],[160700,577267],[504374,526989],[832061,507640],[392825,537214],[443842,532165],[440352,532492],[745125,511776],[13718,726392],[661753,516312],[70500,619875],[436952,532814],[424724,533973],[21954,692224],[262490,554567],[716622,513264],[907584,504425],[60086,628882],[837123,507412],[971345,501940],[947162,502855],[139920,584021],[68330,621624],[666452,516038],[731446,512481],[953350,502619],[183157,571042],[845400,507045],[651548,516910],[20399,697344],[861779,506331],[629771,518229],[801706,509026],[189207,569512],[737501,512168],[719272,513115],[479285,529045],[136046,585401],[896746,504860],[891735,505067],[684771,514999],[865309,506184],[379066,538702],[503117,527090],[621780,518717],[209518,564775],[677135,515423],[987500,501340],[197049,567613],[329315,544673],[236756,559196],[357092,541226],[520440,525733],[213471,563911],[956852,502490],[702223,514032],[404943,535955],[178880,572152],[689477,514734],[691351,514630],[866669,506128],[370561,539656],[739805,512051],[71060,619441],[624861,518534],[261660,554714],[366137,540160],[166054,575698],[601878,519990],[153445,579501],[279899,551729],[379166,538691],[423209,534125],[675310,515526],[145641,582050],[691353,514627],[917468,504026],[284778,550976],[81040,612235],[161699,576978],[616394,519057],[767490,510661],[156896,578431],[427408,533714],[254849,555884],[737217,512182],[897133,504851],[203815,566051],[270822,553189],[135854,585475],[778805,510111],[784373,509847],[305426,547921],[733418,512375],[732087,512448],[540668,524215],[702898,513996],[628057,518328],[640280,517587],[422405,534204],[10604,746569],[746038,511733],[839808,507293],[457417,530938],[479030,529064],[341758,543090],[620223,518824],[251661,556451],[561790,522696],[497733,527521],[724201,512863],[489217,528217],[415623,534867],[624610,518548],[847541,506953],[432295,533249],[400391,536421],[961158,502319],[139173,584284],[421225,534315],[579083,521501],[74274,617000],[701142,514087],[374465,539219],[217814,562985],[358972,540995],[88629,607424],[288597,550389],[285819,550812],[538400,524385],[809930,508645],[738326,512126],[955461,502535],[163829,576343],[826475,507891],[376488,538987],[102234,599905],[114650,594002],[52815,636341],[434037,533082],[804744,508880],[98385,601905],[856620,506559],[220057,562517],[844734,507078],[150677,580387],[558697,522917],[621751,518719],[207067,565321],[135297,585677],[932968,503404],[604456,519822],[579728,521462],[244138,557813],[706487,513800],[711627,513523],[853833,506674],[497220,527562],[59428,629511],[564845,522486],[623621,518603],[242689,558077],[125091,589591],[363819,540432],[686453,514901],[656813,516594],[489901,528155],[386380,537905],[542819,524052],[243987,557841],[693412,514514],[488484,528271],[896331,504881],[336730,543721],[728298,512647],[604215,519840],[153729,579413],[595687,520398],[540360,524240],[245779,557511],[924873,503730],[509628,526577],[528523,525122],[3509,847707],[522756,525555],[895447,504922],[44840,646067],[45860,644715],[463487,530404],[398164,536654],[894483,504959],[619415,518874],[966306,502129],[990922,501212],[835756,507474],[548881,523618],[453578,531282],[474993,529410],[80085,612879],[737091,512193],[50789,638638],[979768,501620],[792018,509483],[665001,516122],[86552,608694],[462772,530469],[589233,520821],[891694,505072],[592605,520594],[209645,564741],[42531,649269],[554376,523226],[803814,508929],[334157,544042],[175836,572970],[868379,506051],[658166,516520],[278203,551995],[966198,502126],[627162,518387],[296774,549165],[311803,547027],[843797,507118],[702304,514032],[563875,522553],[33103,664910],[191932,568841],[543514,524006],[506835,526794],[868368,506052],[847025,506971],[678623,515342],[876139,505726],[571997,521984],[598632,520198],[213590,563892],[625404,518497],[726508,512738],[689426,514738],[332495,544264],[411366,535302],[242546,558110],[315209,546555],[797544,509219],[93889,604371],[858879,506454],[124906,589666],[449072,531693],[235960,559345],[642403,517454],[720567,513047],[705534,513858],[603692,519870],[488137,528302],[157370,578285],[63515,625730],[666326,516041],[619226,518883],[443613,532186],[597717,520257],[96225,603069],[86940,608450],[40725,651929],[460976,530625],[268875,553508],[270671,553214],[363254,540500],[384248,538137],[762889,510892],[377941,538833],[278878,551890],[176615,572755],[860008,506412],[944392,502967],[608395,519571],[225283,561450],[45095,645728],[333798,544090],[625733,518476],[995584,501037],[506135,526853],[238050,558952],[557943,522972],[530978,524938],[634244,517949],[177168,572616],[85200,609541],[953043,502630],[523661,525484],[999295,500902],[840803,507246],[961490,502312],[471747,529685],[380705,538523],[911180,504275],[334149,544046],[478992,529065],[325789,545133],[335884,543826],[426976,533760],[749007,511582],[667067,516000],[607586,519623],[674054,515599],[188534,569675],[565185,522464],[172090,573988],[87592,608052],[907432,504424],[8912,760841],[928318,503590],[757917,511138],[718693,513153],[315141,546566],[728326,512645],[353492,541647],[638429,517695],[628892,518280],[877286,505672],[620895,518778],[385878,537959],[423311,534113],[633501,517997],[884833,505360],[883402,505416],[999665,500894],[708395,513697],[548142,523667],[756491,511205],[987352,501340],[766520,510705],[591775,520647],[833758,507563],[843890,507108],[925551,503698],[74816,616598],[646942,517187],[354923,541481],[256291,555638],[634470,517942],[930904,503494],[134221,586071],[282663,551304],[986070,501394],[123636,590176],[123678,590164],[481717,528841],[423076,534137],[866246,506145],[93313,604697],[783632,509880],[317066,546304],[502977,527103],[141272,583545],[71708,618938],[617748,518975],[581190,521362],[193824,568382],[682368,515131],[352956,541712],[351375,541905],[505362,526909],[905165,504518],[128645,588188],[267143,553787],[158409,577965],[482776,528754],[628896,518282],[485233,528547],[563606,522574],[111001,595655],[115920,593445],[365510,540237],[959724,502374],[938763,503184],[930044,503520],[970959,501956],[913658,504176],[68117,621790],[989729,501253],[567697,522288],[820427,508163],[54236,634794],[291557,549938],[124961,589646],[403177,536130],[405421,535899],[410233,535417],[815111,508403],[213176,563974],[83099,610879],[998588,500934],[513640,526263],[129817,587733],[1820,921851],[287584,550539],[299160,548820],[860621,506386],[529258,525059],[586297,521017],[953406,502616],[441234,532410],[986217,501386],[781938,509957],[461247,530595],[735424,512277],[146623,581722],[839838,507288],[510667,526494],[935085,503327],[737523,512167],[303455,548204],[992779,501145],[60240,628739],[939095,503174],[794368,509370],[501825,527189],[459028,530798],[884641,505363],[512287,526364],[835165,507499],[307723,547590],[160587,577304],[735043,512300],[493289,527887],[110717,595785],[306480,547772],[318593,546089],[179810,571911],[200531,566799],[314999,546580],[197020,567622],[301465,548487],[237808,559000],[131944,586923],[882527,505449],[468117,530003],[711319,513541],[156240,578628],[965452,502162],[992756,501148],[437959,532715],[739938,512046],[614249,519196],[391496,537356],[62746,626418],[688215,514806],[75501,616091],[883573,505412],[558824,522910],[759371,511061],[173913,573489],[891351,505089],[727464,512693],[164833,576051],[812317,508529],[540320,524243],[698061,514257],[69149,620952],[471673,529694],[159092,577753],[428134,533653],[89997,606608],[711061,513557],[779403,510081],[203327,566155],[798176,509187],[667688,515963],[636120,517833],[137410,584913],[217615,563034],[556887,523038],[667229,515991],[672276,515708],[325361,545187],[172115,573985],[13846,725685]
+];
+```
+
+## --seed-contents--
+
+```js
+function largestExponential(baseExp) {
+
+  return true;
+}
+
+// Only change code above this line
+
+const testArray1 = [
+  [492798,527927],[30125,670983],[895603,504906],[450785,531539],[840237,507276],[380711,538522],[63577,625673],[76801,615157],[502694,527123]
+];
+
+largestExponential(testArray1);
+```
+
+# --solutions--
+
+```js
+function largestExponential(baseExp) {
+  let maximum = 0;
+  let indexOfMaximum = 0;
+  for (let i = 1; i < baseExp.length; i++) {
+    const curValue = Math.log(baseExp[i][0]) * baseExp[i][1];
+    if (curValue > maximum) {
+      maximum = curValue;
+      indexOfMaximum = i;
+    }
+  }
+
+  return baseExp[indexOfMaximum];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/100-doors.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/100-doors.md
new file mode 100644
index 00000000000..1db8228f4af
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/100-doors.md
@@ -0,0 +1,67 @@
+---
+id: 594810f028c0303b75339acb
+title: 100 doors
+challengeType: 1
+forumTopicId: 302217
+dashedName: 100-doors
+---
+
+# --description--
+
+There are 100 doors in a row that are all initially closed. You make 100 passes by the doors. The first time through, visit every door and 'toggle' the door (if the door is closed, open it; if it is open, close it). The second time, only visit every 2nd door (i.e., door #2, #4, #6, ...) and toggle it. The third time, visit every 3rd door (i.e., door #3, #6, #9, ...), etc., until you only visit the 100th door.
+
+# --instructions--
+
+Implement a function to determine the state of the doors after the last pass. Return the final result in an array, with only the door number included in the array if it is open.
+
+# --hints--
+
+`getFinalOpenedDoors` should be a function.
+
+```js
+assert(typeof getFinalOpenedDoors === 'function');
+```
+
+`getFinalOpenedDoors` should return an array.
+
+```js
+assert(Array.isArray(getFinalOpenedDoors(100)));
+```
+
+`getFinalOpenedDoors` should produce the correct result.
+
+```js
+assert.deepEqual(getFinalOpenedDoors(100), solution);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const solution = [1, 4, 9, 16, 25, 36, 49, 64, 81, 100];
+```
+
+## --seed-contents--
+
+```js
+function getFinalOpenedDoors(numDoors) {
+
+}
+```
+
+# --solutions--
+
+```js
+function getFinalOpenedDoors(numDoors) {
+  // this is the final pattern (always squares).
+  // thus, the most efficient solution simply returns an array of squares up to numDoors).
+  const finalState = [];
+  let i = 1;
+  while (Math.pow(i, 2) <= numDoors) {
+    finalState.push(Math.pow(i, 2));
+    i++;
+  }
+  return finalState;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/24-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/24-game.md
new file mode 100644
index 00000000000..ac16df78509
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/24-game.md
@@ -0,0 +1,248 @@
+---
+id: 5951e88f64ebf159166a1176
+title: 24 game
+challengeType: 1
+forumTopicId: 302218
+dashedName: 24-game
+---
+
+# --description--
+
+The 24 Game tests a person's mental arithmetic.
+
+The aim of the game is to arrange four numbers in a way that when evaluated, the result is 24
+
+# --instructions--
+
+Implement a function that takes a string of four digits as its argument, with each digit from 1 to 9 (inclusive) with repetitions allowed, and returns an arithmetic expression that evaluates to the number 24. If no such solution exists, return "no solution exists".
+
+**Rules:**
+<ul>
+  <li> Only the following operators/functions are allowed: multiplication, division, addition, subtraction. </li>
+  <li> Division should use floating point or rational arithmetic, etc, to preserve remainders. </li>
+  <li> Forming multiple digit numbers from the supplied digits is disallowed. (So an answer of 12+12 when given 1, 2, 2, and 1 is wrong). </li>
+  <li> The order of the digits when given does not have to be preserved. </li>
+</ul>
+
+| Example input             | Example output            |
+| ------------------------- | ------------------------- |
+| <code>solve24("4878");</code> | <code>(7-8/8)\*4</code> |
+| <code>solve24("1234");</code> | <code>3\*1\*4\*2</code> |
+| <code>solve24("6789");</code> | <code>(6\*8)/(9-7)</code> |
+| <code>solve24("1127");</code> | <code>(1+7)\*(2+1)</code> |
+
+# --hints--
+
+`solve24` should be a function.
+
+```js
+assert(typeof solve24 === 'function');
+```
+
+`solve24("4878")` should return `(7-8/8)*4`, `4*(7-8/8)`, or a similar valid string
+
+```js
+assert(isValidSolution_(solve24(testCases_[0])));
+```
+
+`solve24("1234")` should return `1*2*3*4` or a similar valid string
+
+```js
+assert(isValidSolution_(solve24(testCases_[1])));
+```
+
+`solve24("6789")` should return `(6*8)/(9-7)`, `(8*6)/(9-7)`, or a similar valid string
+
+```js
+assert(isValidSolution_(solve24(testCases_[2])));
+```
+
+`solve24("1127")` should return `(1+7)*(1+2)` or a similar valid string
+
+```js
+assert(isValidSolution_(solve24(testCases_[3])));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const testCases_ = [
+  '4878',
+  '1234',
+  '6789',
+  '1127'
+];
+
+const OPERATORS_ = {
+  "+": (a, b) => a + b,
+  "-": (a, b) => a - b,
+  "*": (a, b) => a * b,
+  "/": (a, b) => a / b,
+}
+
+const PRECIDENCE_ = {
+  "+": 1,
+  "-": 1,
+  "*": 2,
+  "/": 2,
+}
+
+function evaluate_(expression) {
+  expression = expression.replace('/\s+/g', '');
+  const stack = [];
+  let postfix = "";
+
+  // Convert from infix to postfix
+  let head = 0;
+  while (head < expression.length) {
+    let c = expression[head];
+    switch (c) {
+      case "(":
+        stack.push(c);
+        break;
+      case ")":
+        let last = stack.pop();
+        while (last !== "(") {
+          postfix += last;
+          last = stack.pop();
+        }
+        break;
+      case "+":
+      case "-":
+      case "*":
+      case "/":
+        while (stack.length &&
+               PRECIDENCE_[c] <= PRECIDENCE_[stack[stack.length-1]]) {
+          postfix += stack.pop();
+        }
+        stack.push(c);
+        break;
+      case "0":
+      case "1":
+      case "2":
+      case "3":
+      case "4":
+      case "5":
+      case "6":
+      case "7":
+      case "8":
+      case "9":
+        postfix += c;
+        break;
+      default:
+        return false;
+    }
+    head++;
+  }
+
+  // Clear out stack
+  while (stack.length) {
+    postfix += stack.pop();
+  }
+
+  // Evaluate postfix
+  for (let c of postfix) {
+    switch (c) {
+      case "+":
+      case "-":
+      case "*":
+      case "/":
+        const b = +stack.pop();
+        const a = +stack.pop();
+        stack.push(OPERATORS_[c](a, b));
+        break;
+      default:
+        stack.push(c);
+    }
+  }
+  return stack.pop();
+}
+
+// Check solution validity
+function isValidSolution_(userSolution) {
+  return evaluate_(userSolution) === 24;
+}
+```
+
+## --seed-contents--
+
+```js
+function solve24 (numStr) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function solve24(numStr) {
+  const digitsArr = numStr.split('');
+  const answers = [];
+
+  const digitPermutations = [];
+  const operatorPermutations = [];
+
+  function generateDigitPermutations (digits, permutations = []) {
+    if (digits.length === 0) {
+      digitPermutations.push(permutations);
+    }
+    else {
+      for (let i = 0; i < digits.length; i++) {
+        const curr = digits.slice();
+        const next = curr.splice(i, 1);
+        generateDigitPermutations(curr.slice(), permutations.concat(next));
+      }
+    }
+  }
+
+  function generateOperatorPermutations (permutations = []) {
+    const operators = ['+', '-', '*', '/'];
+    if (permutations.length === 3) {
+      operatorPermutations.push(permutations);
+    }
+    else {
+      for (let i = 0; i < operators.length; i++) {
+        const curr = permutations.slice();
+        curr.push(operators[i]);
+        generateOperatorPermutations(curr);
+      }
+    }
+  }
+
+  generateDigitPermutations(digitsArr);
+  generateOperatorPermutations();
+
+  interleave();
+
+  return answers[0];
+
+  function interleave () {
+    for (let i = 0; i < digitPermutations.length; i++) {
+      for (let j = 0; j < operatorPermutations.length; j++) {
+        const d = digitPermutations[i];
+        const o = operatorPermutations[j];
+        const perm = [
+          `${d[0]}${o[0]}${d[1]}${o[1]}${d[2]}${o[2]}${d[3]}`,
+          `(${d[0]}${o[0]}${d[1]})${o[1]}${d[2]}${o[2]}${d[3]}`,
+          `${d[0]}${o[0]}(${d[1]}${o[1]}${d[2]})${o[2]}${d[3]}`,
+          `${d[0]}${o[0]}${d[1]}${o[1]}(${d[2]}${o[2]}${d[3]})`,
+          `${d[0]}${o[0]}(${d[1]}${o[1]}${d[2]}${o[2]}${d[3]})`,
+          `(${d[0]}${o[0]}${d[1]}${o[1]}${d[2]})${o[2]}${d[3]}`,
+          `(${d[0]}${o[0]}${d[1]})${o[1]}(${d[2]}${o[2]}${d[3]})`
+        ];
+
+        perm.forEach(combination => {
+          const res = eval(combination);
+
+          if (res === 24) {
+            return answers.push(combination);
+          }
+        });
+      }
+    }
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/9-billion-names-of-god-the-integer.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/9-billion-names-of-god-the-integer.md
new file mode 100644
index 00000000000..f857c18e239
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/9-billion-names-of-god-the-integer.md
@@ -0,0 +1,116 @@
+---
+id: 5949b579404977fbaefcd736
+title: 9 billion names of God the integer
+challengeType: 1
+forumTopicId: 302219
+dashedName: 9-billion-names-of-god-the-integer
+---
+
+# --description--
+
+This task is a variation of the short story by Arthur C. Clarke.
+
+(Solvers should be aware of the consequences of completing this task.)
+
+In detail, to specify what is meant by a "name":
+
+<ul>
+  <li>The integer 1 has 1 name "1".</li>
+  <li>The integer 2 has 2 names "1+1" and "2".</li>
+  <li>The integer 3 has 3 names "1+1+1", "2+1",  and "3".</li>
+  <li>The integer 4 has 5 names "1+1+1+1", "2+1+1", "2+2", "3+1", "4".</li>
+  <li>The integer 5 has 7 names "1+1+1+1+1", "2+1+1+1", "2+2+1", "3+1+1", "3+2", "4+1", "5".</li>
+</ul>
+
+This can be visualized in the following form:
+
+<pre>          1
+        1   1
+      1   1   1
+    1   2   1   1
+  1   2   2   1   1
+1   3   3   2   1   1
+</pre>
+
+Where row $n$ corresponds to integer $n$, and each column $C$ in row $m$ from left to right corresponds to the number of names beginning with $C$.
+
+Optionally note that the sum of the $n$-th row $P(n)$ is the integer partition function.
+
+# --instructions--
+
+Implement a function that returns the sum of the $n$-th row.
+
+# --hints--
+
+`numberOfNames` should be function.
+
+```js
+assert(typeof numberOfNames === 'function');
+```
+
+`numberOfNames(5)` should equal 7.
+
+```js
+assert.equal(numberOfNames(5), 7);
+```
+
+`numberOfNames(12)` should equal 77.
+
+```js
+assert.equal(numberOfNames(12), 77);
+```
+
+`numberOfNames(18)` should equal 385.
+
+```js
+assert.equal(numberOfNames(18), 385);
+```
+
+`numberOfNames(23)` should equal 1255.
+
+```js
+assert.equal(numberOfNames(23), 1255);
+```
+
+`numberOfNames(42)` should equal 53174.
+
+```js
+assert.equal(numberOfNames(42), 53174);
+```
+
+`numberOfNames(123)` should equal 2552338241.
+
+```js
+assert.equal(numberOfNames(123), 2552338241);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function numberOfNames(num) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function numberOfNames(num) {
+  const cache = [
+    [1]
+  ];
+  for (let l = cache.length; l < num + 1; l++) {
+    let Aa;
+    let Mi;
+    const r = [0];
+    for (let x = 1; x < l + 1; x++) {
+      r.push(r[r.length - 1] + (Aa = cache[l - x < 0 ? cache.length - (l - x) : l - x])[(Mi = Math.min(x, l - x)) < 0 ? Aa.length - Mi : Mi]);
+    }
+    cache.push(r);
+  }
+  return cache[num][cache[num].length - 1];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/abc-problem.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/abc-problem.md
new file mode 100644
index 00000000000..36a7b23eeb7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/abc-problem.md
@@ -0,0 +1,136 @@
+---
+id: 594810f028c0303b75339acc
+title: ABC Problem
+challengeType: 1
+forumTopicId: 302220
+dashedName: abc-problem
+---
+
+# --description--
+
+You are given a collection of ABC blocks (e.g., childhood alphabet blocks). There are 20 blocks with two letters on each block. A complete alphabet is guaranteed amongst all sides of the blocks. The sample collection of blocks:
+
+<pre>(B O)
+(X K)
+(D Q)
+(C P)
+(N A)
+(G T)
+(R E)
+(T G)
+(Q D)
+(F S)
+(J W)
+(H U)
+(V I)
+(A N)
+(O B)
+(E R)
+(F S)
+(L Y)
+(P C)
+(Z M)
+</pre>
+
+# --instructions--
+
+Implement a function that takes a string (word) and determines whether the word can be spelled with the given collection of blocks.
+
+Some rules to keep in mind:
+
+<ul>
+  <li>Once a letter on a block is used, that block cannot be used again.</li>
+  <li>The function should be case-insensitive.</li>
+</ul>
+
+# --hints--
+
+`canMakeWord` should be a function.
+
+```js
+assert(typeof canMakeWord === 'function');
+```
+
+`canMakeWord` should return a boolean.
+
+```js
+assert(typeof canMakeWord('hi') === 'boolean');
+```
+
+`canMakeWord("bark")` should return true.
+
+```js
+assert(canMakeWord(words[0]));
+```
+
+`canMakeWord("BooK")` should return false.
+
+```js
+assert(!canMakeWord(words[1]));
+```
+
+`canMakeWord("TReAT")` should return true.
+
+```js
+assert(canMakeWord(words[2]));
+```
+
+`canMakeWord("COMMON")` should return false.
+
+```js
+assert(!canMakeWord(words[3]));
+```
+
+`canMakeWord("squAD")` should return true.
+
+```js
+assert(canMakeWord(words[4]));
+```
+
+`canMakeWord("conFUSE")` should return true.
+
+```js
+assert(canMakeWord(words[5]));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const words = ['bark', 'BooK', 'TReAT', 'COMMON', 'squAD', 'conFUSE'];
+```
+
+## --seed-contents--
+
+```js
+function canMakeWord(word) {
+
+}
+```
+
+# --solutions--
+
+```js
+function canMakeWord(word) {
+  const characters = 'BO XK DQ CP NA GT RE TG QD FS JW HU VI AN OB ER FS LY PC ZM';
+  const blocks = characters.split(' ').map(pair => pair.split(''));
+
+  const letters = [...word.toUpperCase()];
+  let length = letters.length;
+  const copy = new Set(blocks);
+
+  letters.forEach(letter => {
+    for (let block of copy) {
+      const index = block.indexOf(letter);
+
+      if (index !== -1) {
+        length--;
+        copy.delete(block);
+        break;
+      }
+    }
+  });
+  return !length;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/abundant-deficient-and-perfect-number-classifications.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/abundant-deficient-and-perfect-number-classifications.md
new file mode 100644
index 00000000000..5626858b7d3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/abundant-deficient-and-perfect-number-classifications.md
@@ -0,0 +1,95 @@
+---
+id: 594810f028c0303b75339acd
+title: 'Abundant, deficient and perfect number classifications'
+challengeType: 1
+forumTopicId: 302221
+dashedName: abundant-deficient-and-perfect-number-classifications
+---
+
+# --description--
+
+These define three classifications of positive integers based on their proper divisors.
+
+Let $P(n)$ be the sum of the proper divisors of `n` where proper divisors are all positive integers `n` other than `n` itself.
+
+If `P(n) < n` then `n` is classed as `deficient`
+
+If `P(n) === n` then `n` is classed as `perfect`
+
+If `P(n) > n` then `n` is classed as `abundant`
+
+**Example**: `6` has proper divisors of `1`, `2`, and `3`. `1 + 2 + 3 = 6`, so `6` is classed as a perfect number.
+
+# --instructions--
+
+Implement a function that calculates how many of the integers from `1` to `num` (inclusive) are in each of the three classes. Output the result as an array in the following format `[deficient, perfect, abundant]`.
+
+# --hints--
+
+`getDPA` should be a function.
+
+```js
+assert(typeof getDPA === 'function');
+```
+
+`getDPA(5000)` should return an array.
+
+```js
+assert(Array.isArray(getDPA(5000)));
+```
+
+`getDPA(5000)` return array should have a length of `3`.
+
+```js
+assert(getDPA(5000).length === 3);
+```
+
+`getDPA(5000)` should return `[3758, 3, 1239]`.
+
+```js
+assert.deepEqual(getDPA(5000), [3758, 3, 1239]);
+```
+
+`getDPA(10000)` should return `[7508, 4, 2488]`.
+
+```js
+assert.deepEqual(getDPA(10000), [7508, 4, 2488]);
+```
+
+`getDPA(20000)` should return `[15043, 4, 4953]`.
+
+```js
+assert.deepEqual(getDPA(20000), [15043, 4, 4953]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function getDPA(num) {
+
+}
+```
+
+# --solutions--
+
+```js
+function getDPA(num) {
+  const dpa = [1, 0, 0];
+  for (let n = 2; n <= num; n += 1) {
+    let ds = 1;
+    const e = Math.sqrt(n);
+    for (let d = 2; d < e; d += 1) {
+      if (n % d === 0) {
+        ds += d + (n / d);
+      }
+    }
+    if (n % e === 0) {
+      ds += e;
+    }
+    dpa[ds < n ? 0 : ds === n ? 1 : 2] += 1;
+  }
+  return dpa;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/accumulator-factory.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/accumulator-factory.md
new file mode 100644
index 00000000000..e3ee77daf90
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/accumulator-factory.md
@@ -0,0 +1,79 @@
+---
+id: 594810f028c0303b75339ace
+title: Accumulator factory
+challengeType: 1
+forumTopicId: 302222
+dashedName: accumulator-factory
+---
+
+# --description--
+
+A problem posed by Paul Graham is that of creating a function that takes a single (numeric) argument and which returns another function that is an accumulator. The returned accumulator function in turn also takes a single numeric argument, and returns the sum of all the numeric values passed in so far to that accumulator (including the initial value passed when the accumulator was created).
+
+# --instructions--
+
+Create a function that takes a number $n$ and generates accumulator functions that return the sum of every number ever passed to them.
+
+**Rules:**
+
+Do not use global variables.
+
+**Hint:**
+
+Closures save outer state.
+
+# --hints--
+
+`accumulator` should be a function.
+
+```js
+assert(typeof accumulator === 'function');
+```
+
+`accumulator(0)` should return a function.
+
+```js
+assert(typeof accumulator(0) === 'function');
+```
+
+`accumulator(0)(2)` should return a number.
+
+```js
+assert(typeof accumulator(0)(2) === 'number');
+```
+
+Passing in the values 3, -4, 1.5, and 5 should return 5.5.
+
+```js
+assert(testFn(5) === 5.5);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const testFn = typeof accumulator(3) === 'function' && accumulator(3);
+if (testFn) {
+  testFn(-4);
+  testFn(1.5);
+}
+```
+
+## --seed-contents--
+
+```js
+function accumulator(sum) {
+
+}
+```
+
+# --solutions--
+
+```js
+function accumulator(sum) {
+  return function(n) {
+    return sum += n;
+  };
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/ackermann-function.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/ackermann-function.md
new file mode 100644
index 00000000000..f6443aee8c4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/ackermann-function.md
@@ -0,0 +1,71 @@
+---
+id: 594810f028c0303b75339acf
+title: Ackermann function
+challengeType: 1
+forumTopicId: 302223
+dashedName: ackermann-function
+---
+
+# --description--
+
+The Ackermann function is a classic example of a recursive function, notable especially because it is not a primitive recursive function. It grows very quickly in value, as does the size of its call tree.
+
+The Ackermann function is usually defined as follows:
+
+$A(m, n) = \\begin{cases} n+1 & \\mbox{if } m = 0 \\\\ A(m-1, 1) & \\mbox{if } m > 0 \\mbox{ and } n = 0 \\\\ A(m-1, A(m, n-1)) & \\mbox{if } m > 0 \\mbox{ and } n > 0. \\end{cases}$
+
+Its arguments are never negative and it always terminates.
+
+# --instructions--
+
+Write a function which returns the value of $A(m, n)$. Arbitrary precision is preferred (since the function grows so quickly), but not required.
+
+# --hints--
+
+`ack` should be a function.
+
+```js
+assert(typeof ack === 'function');
+```
+
+`ack(0, 0)` should return 1.
+
+```js
+assert(ack(0, 0) === 1);
+```
+
+`ack(1, 1)` should return 3.
+
+```js
+assert(ack(1, 1) === 3);
+```
+
+`ack(2, 5)` should return 13.
+
+```js
+assert(ack(2, 5) === 13);
+```
+
+`ack(3, 3)` should return 61.
+
+```js
+assert(ack(3, 3) === 61);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function ack(m, n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function ack(m, n) {
+  return m === 0 ? n + 1 : ack(m - 1, n === 0 ? 1 : ack(m, n - 1));
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/align-columns.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/align-columns.md
new file mode 100644
index 00000000000..85a1d0265f1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/align-columns.md
@@ -0,0 +1,189 @@
+---
+id: 594810f028c0303b75339ad0
+title: Align columns
+challengeType: 1
+forumTopicId: 302224
+dashedName: align-columns
+---
+
+# --description--
+
+Given an array of many lines, where fields within a line are delineated by a single `$` character, write a program that aligns each column of fields by ensuring that words in each column are separated by at least one space. Further, allow for each word in a column to be either left justified, right justified, or center justified within its column.
+
+# --instructions--
+
+Use the following text to test your programs:
+
+```js
+const testText = [
+  'Given$a$text$file$of$many$lines',
+  'where$fields$within$a$line$',
+  'are$delineated$by$a$single$"dollar"$character',
+  'write$a$program',
+  'that$aligns$each$column$of$fields',
+  'by$ensuring$that$words$in$each$',
+  'column$are$separated$by$at$least$one$space.',
+  'Further,$allow$for$each$word$in$a$column$to$be$either$left$',
+  'justified,$right$justified',
+  'or$center$justified$within$its$column.'
+];
+```
+
+**Note that:**
+
+- The example input texts lines may, or may not, have trailing dollar characters.
+- All columns should share the same alignment.
+- Consecutive space characters produced adjacent to the end of lines are insignificant for the purposes of the task.
+- Output text will be viewed in a mono-spaced font on a plain text editor or basic terminal. Lines in it should be joined using new line character (`\n`).
+- The minimum space between columns should be computed from the text and not hard-coded.
+- It is not a requirement to add separating characters between or around columns.
+
+For example, one of the lines from the `testText`, after jusitifing to the right, left and center respectivelly:
+
+```js
+'    column        are separated     by     at    least       one space.\n'
+'column     are        separated by     at     least    one       space.\n'
+'  column      are     separated   by     at    least      one    space.\n'
+```
+
+# --hints--
+
+`formatText` should be a function.
+
+```js
+assert(typeof formatText === 'function');
+```
+
+`formatText(testText, 'right')` should produce text with columns justified to the right.
+
+```js
+assert.strictEqual(formatText(_testText, 'right'), rightAligned);
+```
+
+`formatText(testText, 'left')` should produce text with columns justified to the left.
+
+```js
+assert.strictEqual(formatText(_testText, 'left'), leftAligned);
+```
+
+`formatText(testText, 'center')` should produce text with columns justified to the center.
+
+```js
+assert.strictEqual(formatText(_testText, 'center'), centerAligned);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testText = [
+  'Given$a$text$file$of$many$lines',
+  'where$fields$within$a$line$',
+  'are$delineated$by$a$single$"dollar"$character',
+  'write$a$program',
+  'that$aligns$each$column$of$fields$',
+  'by$ensuring$that$words$in$each$',
+  'column$are$separated$by$at$least$one$space.',
+  'Further,$allow$for$each$word$in$a$column$to$be$either$left$',
+  'justified,$right$justified',
+  'or$center$justified$within$its$column.'
+];
+
+const rightAligned = '     Given          a      text   file     of     many     lines\n' +
+'     where     fields    within      a   line \n' +
+'       are delineated        by      a single "dollar" character\n' +
+'     write          a   program\n' +
+'      that     aligns      each column     of   fields \n' +
+'        by   ensuring      that  words     in     each \n' +
+'    column        are separated     by     at    least       one space.\n' +
+'  Further,      allow       for   each   word       in         a column to be either left \n' +
+'justified,      right justified\n' +
+'        or     center justified within    its  column.';
+
+const leftAligned = 'Given      a          text      file   of     many     lines    \n' +
+'where      fields     within    a      line   \n' +
+'are        delineated by        a      single "dollar" character\n' +
+'write      a          program  \n' +
+'that       aligns     each      column of     fields   \n' +
+'by         ensuring   that      words  in     each     \n' +
+'column     are        separated by     at     least    one       space.\n' +
+'Further,   allow      for       each   word   in       a         column to be either left \n' +
+'justified, right      justified\n' +
+'or         center     justified within its    column. ';
+
+const centerAligned = '  Given        a        text     file    of     many     lines  \n' +
+'  where      fields    within     a     line  \n' +
+'   are     delineated    by       a    single \"dollar\" character\n' +
+'  write        a       program \n' +
+'   that      aligns     each    column   of    fields  \n' +
+'    by      ensuring    that    words    in     each   \n' +
+'  column      are     separated   by     at    least      one    space.\n' +
+' Further,    allow       for     each   word     in        a     column to be either left \n' +
+'justified,   right    justified\n' +
+'    or       center   justified within  its   column. ';
+```
+
+## --seed-contents--
+
+```js
+function formatText(input, justification) {
+
+}
+
+const testText = [
+  'Given$a$text$file$of$many$lines',
+  'where$fields$within$a$line$',
+  'are$delineated$by$a$single$"dollar"$character',
+  'write$a$program',
+  'that$aligns$each$column$of$fields$',
+  'by$ensuring$that$words$in$each$',
+  'column$are$separated$by$at$least$one$space.',
+  'Further,$allow$for$each$word$in$a$column$to$be$either$left$',
+  'justified,$right$justified',
+  'or$center$justified$within$its$column.'
+];
+```
+
+# --solutions--
+
+```js
+String.prototype.repeat = function (n) { return new Array(1 + parseInt(n)).join(this); };
+
+function formatText(input, justification) {
+  let x, y, max, cols = 0, diff, left, right;
+  for (x = 0; x < input.length; x++) {
+    input[x] = input[x].split('$');
+    if (input[x].length > cols) {
+      cols = input[x].length;
+    }
+  }
+  for (x = 0; x < cols; x++) {
+    max = 0;
+    for (y = 0; y < input.length; y++) {
+      if (input[y][x] && max < input[y][x].length) {
+        max = input[y][x].length;
+      }
+    }
+    for (y = 0; y < input.length; y++) {
+      if (input[y][x]) {
+        diff = (max - input[y][x].length) / 2;
+        left = ' '.repeat(Math.floor(diff));
+        right = ' '.repeat(Math.ceil(diff));
+        if (justification === 'left') {
+          right += left; left = '';
+        }
+        if (justification === 'right') {
+          left += right; right = '';
+        }
+        input[y][x] = left + input[y][x] + right;
+      }
+    }
+  }
+  for (x = 0; x < input.length; x++) {
+    input[x] = input[x].join(' ');
+  }
+  input = input.join('\n');
+  return input;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/amicable-pairs.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/amicable-pairs.md
new file mode 100644
index 00000000000..945b5cb117f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/amicable-pairs.md
@@ -0,0 +1,128 @@
+---
+id: 5949b579404977fbaefcd737
+title: Amicable pairs
+challengeType: 1
+forumTopicId: 302225
+dashedName: amicable-pairs
+---
+
+# --description--
+
+Two integers $N$ and $M$ are said to be amicable pairs if $N \\neq M$ and the sum of the proper divisors of $N$ ($\\mathrm{sum}(\\mathrm{propDivs}(N))$) $= M$ as well as $\\mathrm{sum}(\\mathrm{propDivs}(M)) = N$.
+
+**Example:**
+
+**1184** and **1210** are an amicable pair, with proper divisors:
+
+<ul>
+  <li>1, 2, 4, 8, 16, 32, 37, 74, 148, 296, 592 and</li>
+  <li>1, 2, 5, 10, 11, 22, 55, 110, 121, 242, 605 respectively.</li>
+</ul>
+
+The sum of the divisors for the first value, **1184**, is **1210** and the sum of the divisors for the second value, **1210**, is **1184**.
+
+# --instructions--
+
+Calculate and show here the Amicable pairs below 20,000 (there are eight).
+
+# --hints--
+
+`amicablePairsUpTo` should be a function.
+
+```js
+assert(typeof amicablePairsUpTo === 'function');
+```
+
+`amicablePairsUpTo(300)` should return `[[220,284]]`.
+
+```js
+assert.deepEqual(amicablePairsUpTo(300), answer300);
+```
+
+`amicablePairsUpTo(3000)` should return `[[220,284],[1184,1210],[2620,2924]]`.
+
+```js
+assert.deepEqual(amicablePairsUpTo(3000), answer3000);
+```
+
+`amicablePairsUpTo(20000)` should return `[[220,284],[1184,1210],[2620,2924],[5020,5564],[6232,6368],[10744,10856],[12285,14595],[17296,18416]]`.
+
+```js
+assert.deepEqual(amicablePairsUpTo(20000), answer20000);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const answer300 = [[220, 284]];
+const answer3000 = [
+  [220, 284],
+  [1184, 1210],
+  [2620, 2924]
+];
+const answer20000 = [
+  [220, 284],
+  [1184, 1210],
+  [2620, 2924],
+  [5020, 5564],
+  [6232, 6368],
+  [10744, 10856],
+  [12285, 14595],
+  [17296, 18416]
+];
+```
+
+## --seed-contents--
+
+```js
+function amicablePairsUpTo(maxNum) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+// amicablePairsUpTo :: Int -> [(Int, Int)]
+function amicablePairsUpTo(maxNum) {
+  return range(1, maxNum)
+    .map(x => properDivisors(x)
+      .reduce((a, b) => a + b, 0))
+    .reduce((a, m, i, lst) => {
+      const n = i + 1;
+
+      return (m > n) && lst[m - 1] === n ?
+        a.concat([
+          [n, m]
+        ]) : a;
+    }, []);
+}
+
+// properDivisors :: Int -> [Int]
+function properDivisors(n) {
+  if (n < 2) return [];
+
+  const rRoot = Math.sqrt(n);
+  const intRoot = Math.floor(rRoot);
+  const blnPerfectSquare = rRoot === intRoot;
+  const lows = range(1, intRoot)
+  .filter(x => (n % x) === 0);
+
+  return lows.concat(lows.slice(1)
+    .map(x => n / x)
+    .reverse()
+    .slice(blnPerfectSquare | 0));
+}
+
+// Int -> Int -> Maybe Int -> [Int]
+function range(m, n, step) {
+  const d = (step || 1) * (n >= m ? 1 : -1);
+
+  return Array.from({
+    length: Math.floor((n - m) / d) + 1
+  }, (_, i) => m + (i * d));
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/averages-mode.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/averages-mode.md
new file mode 100644
index 00000000000..d65362b8929
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/averages-mode.md
@@ -0,0 +1,79 @@
+---
+id: 594d8d0ab97724821379b1e6
+title: Averages/Mode
+challengeType: 1
+forumTopicId: 302226
+dashedName: averagesmode
+---
+
+# --description--
+
+Write a function `mode` to find the value that appears most in an array.
+
+The case where the collection is empty may be ignored. Care must be taken to handle the case where the mode is non-unique.
+
+If it is not appropriate or possible to support a general collection, use a vector (array), if possible. If it is not appropriate or possible to support an unspecified value type, use integers.
+
+# --hints--
+
+`mode` should be a function.
+
+```js
+assert(typeof mode === 'function');
+```
+
+`mode([1, 3, 6, 6, 6, 6, 7, 7, 12, 12, 17])` should equal `[6]`
+
+```js
+assert.deepEqual(mode(arr1), [6]);
+```
+
+`mode([1, 2, 4, 4, 1])` should equal `[1, 4]`.
+
+```js
+assert.deepEqual(mode(arr2).sort(), [1, 4]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const arr1 = [1, 3, 6, 6, 6, 6, 7, 7, 12, 12, 17];
+const arr2 = [1, 2, 4, 4, 1];
+```
+
+## --seed-contents--
+
+```js
+function mode(arr) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function mode(arr) {
+  const counter = {};
+  let result = [];
+  let max = 0;
+  // for (const i in arr) {
+  arr.forEach(el => {
+    if (!(el in counter)) {
+      counter[el] = 0;
+    }
+    counter[el]++;
+
+    if (counter[el] === max) {
+      result.push(el);
+    }
+    else if (counter[el] > max) {
+      max = counter[el];
+      result = [el];
+    }
+  });
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/averages-pythagorean-means.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/averages-pythagorean-means.md
new file mode 100644
index 00000000000..772c6fb9da1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/averages-pythagorean-means.md
@@ -0,0 +1,144 @@
+---
+id: 594d966a1467eb84194f0086
+title: Averages/Pythagorean means
+challengeType: 1
+forumTopicId: 302227
+dashedName: averagespythagorean-means
+---
+
+# --description--
+
+Compute all three of the <a href="https://en.wikipedia.org/wiki/Pythagorean_means" target="_blank" rel="noopener noreferrer nofollow">Pythagorean means</a> of the set of integers $1$ through $10$ (inclusive).
+
+Show that $A(x_1,\\ldots,x_n) \\geq G(x_1,\\ldots,x_n) \\geq H(x_1,\\ldots,x_n)$ for this set of positive integers.
+
+<ul>
+  <li>The most common of the three means, the <a class='rosetta__link--rosetta' href='https://rosettacode.org/wiki/Averages/Arithmetic mean' title='Averages/Arithmetic mean' target='_blank'>arithmetic mean</a>, is the sum of the list divided by its length:<br>
+  <big>$ A(x_1, \ldots, x_n) = \frac{x_1 + \cdots + x_n}{n}$</big></li>
+  <li>The <a class='rosetta__link--wiki' href='https://en.wikipedia.org/wiki/Geometric mean' title='wp: Geometric mean' target='_blank'>geometric mean</a> is the $n$th root of the product of the list:<br>
+  <big>$ G(x_1, \ldots, x_n) = \sqrt[n]{x_1 \cdots x_n} $</big></li>
+  <li>The <a class='rosetta__link--wiki' href='https://en.wikipedia.org/wiki/Harmonic mean' title='wp: Harmonic mean' target='_blank'>harmonic mean</a> is $n$ divided by the sum of the reciprocal of each item in the list:<br>
+  <big>$ H(x_1, \ldots, x_n) = \frac{n}{\frac{1}{x_1} + \cdots + \frac{1}{x_n}} $</big></li>
+</ul>
+
+# --instructions--
+
+When writing your function, assume the input is an ordered array of all inclusive numbers.
+
+For the answer, please output an object in the following format:
+
+```js
+{
+  values: {
+    Arithmetic: 5.5,
+    Geometric: 4.528728688116765,
+    Harmonic: 3.414171521474055
+  },
+  test: 'is A >= G >= H ? yes'
+}
+```
+
+# --hints--
+
+`pythagoreanMeans` should be a function.
+
+```js
+assert(typeof pythagoreanMeans === 'function');
+```
+
+`pythagoreanMeans([1, 2, ..., 10])` should equal the same output above.
+
+```js
+assert.deepEqual(pythagoreanMeans(range1), answer1);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const range1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const answer1 = {
+  values: {
+    Arithmetic: 5.5,
+    Geometric: 4.528728688116765,
+    Harmonic: 3.414171521474055
+  },
+  test: 'is A >= G >= H ? yes'
+};
+```
+
+## --seed-contents--
+
+```js
+function pythagoreanMeans(rangeArr) {
+
+}
+```
+
+# --solutions--
+
+```js
+function pythagoreanMeans(rangeArr) {
+  // arithmeticMean :: [Number] -> Number
+  const arithmeticMean = xs =>
+    foldl((sum, n) => sum + n, 0, xs) / length(xs);
+
+  // geometricMean :: [Number] -> Number
+  const geometricMean = xs =>
+    raise(foldl((product, x) => product * x, 1, xs), 1 / length(xs));
+
+  // harmonicMean :: [Number] -> Number
+  const harmonicMean = xs =>
+    length(xs) / foldl((invSum, n) => invSum + (1 / n), 0, xs);
+
+  // GENERIC FUNCTIONS ------------------------------------------------------
+
+  // A list of functions applied to a list of arguments
+  // <*> :: [(a -> b)] -> [a] -> [b]
+  const ap = (fs, xs) => //
+    Array.prototype.concat(...fs.map(f => //
+      Array.prototype.concat(...xs.map(x => [f(x)]))));
+
+  // foldl :: (b -> a -> b) -> b -> [a] -> b
+  const foldl = (f, a, xs) => xs.reduce(f, a);
+
+  // length :: [a] -> Int
+  const length = xs => xs.length;
+
+  // mapFromList :: [(k, v)] -> Dictionary
+  const mapFromList = kvs =>
+    foldl((a, [k, v]) =>
+      (a[(typeof k === 'string' && k)] = v, a), {}, kvs);
+
+  // raise :: Num -> Int -> Num
+  const raise = (n, e) => Math.pow(n, e);
+/*
+  // show :: a -> String
+  // show :: a -> Int -> String
+  const show = (...x) =>
+    JSON.stringify.apply(
+      null, x.length > 1 ? [x[0], null, x[1]] : x
+    );
+*/
+  // zip :: [a] -> [b] -> [(a,b)]
+  const zip = (xs, ys) =>
+    xs.slice(0, Math.min(xs.length, ys.length))
+      .map((x, i) => [x, ys[i]]);
+
+  // TEST -------------------------------------------------------------------
+  // mean :: Dictionary
+  const mean = mapFromList(zip(
+    ['Arithmetic', 'Geometric', 'Harmonic'],
+    ap([arithmeticMean, geometricMean, harmonicMean], [
+      rangeArr
+    ])
+  ));
+
+  return {
+    values: mean,
+    test: `is A >= G >= H ? ${mean.Arithmetic >= mean.Geometric &&
+      mean.Geometric >= mean.Harmonic ? 'yes' : 'no'}`
+  };
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/averages-root-mean-square.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/averages-root-mean-square.md
new file mode 100644
index 00000000000..f4dbbcbcca7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/averages-root-mean-square.md
@@ -0,0 +1,55 @@
+---
+id: 594da033de4190850b893874
+title: Averages/Root mean square
+challengeType: 1
+forumTopicId: 302228
+dashedName: averagesroot-mean-square
+---
+
+# --description--
+
+Compute the Root Mean Square (RMS) of the numbers 1 through 10 inclusive.
+
+The <abbr title="Root mean square">RMS</abbr> is calculated by taking the square root of the mean of the squares of the numbers, given by the equation:
+
+$$x\_{\\mathrm{rms}} = \\sqrt {{{x_1}^2 + {x_2}^2 + \\cdots + {x_n}^2} \\over n}. $$
+
+# --hints--
+
+`rms` should be a function.
+
+```js
+assert(typeof rms === 'function');
+```
+
+`rms([1, 2, 3, 4, 5, 6, 7, 8, 9, 10])` should equal `6.2048368229954285`.
+
+```js
+assert.equal(rms(arr1), answer1);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const arr1 = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
+const answer1 = 6.2048368229954285;
+```
+
+## --seed-contents--
+
+```js
+function rms(arr) {
+
+}
+```
+
+# --solutions--
+
+```js
+function rms(arr) {
+  const sumOfSquares = arr.reduce((s, x) => s + x * x, 0);
+  return Math.sqrt(sumOfSquares / arr.length);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/babbage-problem.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/babbage-problem.md
new file mode 100644
index 00000000000..aa9d6f54100
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/babbage-problem.md
@@ -0,0 +1,78 @@
+---
+id: 594db4d0dedb4c06a2a4cefd
+title: Babbage problem
+challengeType: 1
+forumTopicId: 302229
+dashedName: babbage-problem
+---
+
+# --description--
+
+Charles Babbage, looking ahead to the sorts of problems his Analytical Engine would be able to solve, gave this example:
+
+<blockquote>
+  What is the smallest positive integer whose square ends in the digits 269,696?
+  <footer style='margin-left: 2em;'>Babbage, letter to Lord Bowden, 1837; see Hollingdale and Tootill, <i>Electronic Computers</i>, second edition, 1970, p. 125.</footer>
+</blockquote>
+
+He thought the answer might be 99,736, whose square is 9,947,269,696; but he couldn't be certain.
+
+The task is to find out if Babbage had the right answer.
+
+# --instructions--
+
+Implement a function to return the lowest integer that satisfies the Babbage problem. If Babbage was right, return Babbage's number.
+
+# --hints--
+
+`babbage` should be a function.
+
+```js
+assert(typeof babbage === 'function');
+```
+
+`babbage(99736, 269696)` should not return 99736 (there is a smaller answer).
+
+```js
+assert.equal(babbage(babbageAns, endDigits), answer);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const babbageAns = 99736;
+const endDigits = 269696;
+const answer = 25264;
+```
+
+## --seed-contents--
+
+```js
+function babbage(babbageNum, endDigits) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function babbage(babbageAns, endDigits) {
+  const babbageNum = Math.pow(babbageAns, 2);
+  const babbageStartDigits = parseInt(babbageNum.toString().replace('269696', ''));
+  let answer = 99736;
+
+  // count down from this answer and save any sqrt int result. return lowest one
+  for (let i = babbageStartDigits; i >= 0; i--) {
+    const num = parseInt(i.toString().concat('269696'));
+    const result = Math.sqrt(num);
+    if (result === Math.floor(Math.sqrt(num))) {
+      answer = result;
+    }
+  }
+
+  return answer;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/balanced-brackets.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/balanced-brackets.md
new file mode 100644
index 00000000000..1de7c2352ce
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/balanced-brackets.md
@@ -0,0 +1,188 @@
+---
+id: 594dc6c729e5700999302b45
+title: Balanced brackets
+challengeType: 1
+forumTopicId: 302230
+dashedName: balanced-brackets
+---
+
+# --description--
+
+Determine whether a generated string of brackets is balanced; that is, whether it consists entirely of pairs of opening/closing brackets (in that order), none of which mis-nest.
+
+**Examples:**
+| Input                     | Output |
+| ------------------------- | ------ |
+| <code>\[]</code> | true   |
+| <code>]\[</code> | false  |
+| <code>[][]</code> | true   |
+| <code>]\[]</code> | false  |
+| <code>\[]]\[\[]</code> | false  |
+| <code>\[\[\[\[]]]]</code> | true   |
+
+# --hints--
+
+`isBalanced` should be a function.
+
+```js
+assert(typeof isBalanced === 'function');
+```
+
+`isBalanced("[]")` should return true.
+
+```js
+assert(isBalanced(testCases[0]));
+```
+
+`isBalanced("]][[[][][][]][")` should return false.
+
+```js
+assert(!isBalanced(testCases[1]));
+```
+
+`isBalanced("[][[[[][][[[]]]]]]")` should return true.
+
+```js
+assert(isBalanced(testCases[2]));
+```
+
+`isBalanced("][")` should return false.
+
+```js
+assert(!isBalanced(testCases[3]));
+```
+
+`isBalanced("[[[]]]][[]")` should return false.
+
+```js
+assert(!isBalanced(testCases[4]));
+```
+
+`isBalanced("][[]")` should return false.
+
+```js
+assert(!isBalanced(testCases[5]));
+```
+
+`isBalanced("][[][]][[[]]")` should return false.
+
+```js
+assert(!isBalanced(testCases[6]));
+```
+
+`isBalanced("[[][]]][")` should return false.
+
+```js
+assert(!isBalanced(testCases[7]));
+```
+
+`isBalanced("[[[]]][[]]]][][[")` should return false.
+
+```js
+assert(!isBalanced(testCases[8]));
+```
+
+`isBalanced("[]][[]]][[[[][]]")` should return false.
+
+```js
+assert(!isBalanced(testCases[9]));
+```
+
+`isBalanced("][]][[][")` should return false.
+
+```js
+assert(!isBalanced(testCases[10]));
+```
+
+`isBalanced("[[]][[][]]")` should return true.
+
+```js
+assert(isBalanced(testCases[11]));
+```
+
+`isBalanced("[[]]")` should return true.
+
+```js
+assert(isBalanced(testCases[12]));
+```
+
+`isBalanced("]][]][[]][[[")` should return false.
+
+```js
+assert(!isBalanced(testCases[13]));
+```
+
+`isBalanced("][]][][[")` should return false.
+
+```js
+assert(!isBalanced(testCases[14]));
+```
+
+`isBalanced("][][")` should return false.
+
+```js
+assert(!isBalanced(testCases[15]));
+```
+
+`isBalanced("[]]]")` should return false.
+
+```js
+assert(!isBalanced(testCases[16]));
+```
+
+`isBalanced("")` should return true.
+
+```js
+assert(isBalanced(testCases[17]));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const testCases = [
+  '[]',
+  ']][[[][][][]][',
+  '[][[[[][][[[]]]]]]',
+  '][',
+  '[[[]]]][[]',
+  '][[]',
+  '][[][]][[[]]',
+  '[[][]]][',
+  '[[[]]][[]]]][][[',
+  '[]][[]]][[[[][]]',
+  '][]][[][',
+  '[[]][[][]]',
+  '[[]]',
+  ']][]][[]][[[',
+  '][]][][[',
+  '][][',
+  '[]]]',
+  ''
+];
+```
+
+## --seed-contents--
+
+```js
+function isBalanced(str) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function isBalanced(str) {
+  if (str === '') return true;
+  let a = str;
+  let b;
+  do {
+    b = a;
+    a = a.replace(/\[\]/g, '');
+  } while (a !== b);
+  return !a;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/circles-of-given-radius-through-two-points.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/circles-of-given-radius-through-two-points.md
new file mode 100644
index 00000000000..2254ea4c44a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/circles-of-given-radius-through-two-points.md
@@ -0,0 +1,150 @@
+---
+id: 5951815dd895584b06884620
+title: Circles of given radius through two points
+challengeType: 1
+forumTopicId: 302231
+dashedName: circles-of-given-radius-through-two-points
+---
+
+# --description--
+
+Given two points on a plane and a radius, usually two circles of given radius can be drawn through the points.
+
+**Exceptions:**
+
+<ul>
+  <li>A radius of zero should be treated as never describing circles (except in the case where the points are coincident).</li>
+  <li>If the points are coincident then an infinite number of circles with the point on their circumference can be drawn, unless the radius is equal to zero as well which then collapses the circles to a point.</li>
+  <li>If the points form a diameter then return a single circle.</li>
+  <li>If the points are too far apart then no circles can be drawn.</li>
+</ul>
+
+# --instructions--
+
+Implement a function that takes two points and a radius and returns the two circles through those points. For each resulting circle, provide the coordinates for the center of each circle rounded to four decimal digits. Return each coordinate as an array, and coordinates as an array of arrays.
+
+**For edge cases, return the following:**
+
+<ul>
+  <li>If points are on the diameter, return one point. If the radius is also zero however, return <code>"Radius Zero"</code>.</li>
+  <li>If points are coincident, return <code>"Coincident point. Infinite solutions"</code>.</li>
+  <li>If points are farther apart than the diameter, return <code>"No intersection. Points further apart than circle diameter"</code>.</li>
+</ul>
+
+**Sample inputs:**
+
+<pre>      p1                p2           r
+0.1234, 0.9876    0.8765, 0.2345    2.0
+0.0000, 2.0000    0.0000, 0.0000    1.0
+0.1234, 0.9876    0.1234, 0.9876    2.0
+0.1234, 0.9876    0.8765, 0.2345    0.5
+0.1234, 0.9876    0.1234, 0.9876    0.0
+</pre>
+
+# --hints--
+
+`getCircles` should be a function.
+
+```js
+assert(typeof getCircles === 'function');
+```
+
+`getCircles([0.1234, 0.9876], [0.8765, 0.2345], 2.0)` should return `[[1.8631, 1.9742], [-0.8632, -0.7521]]`.
+
+```js
+assert.deepEqual(getCircles(...testCases[0]), answers[0]);
+```
+
+`getCircles([0.0000, 2.0000], [0.0000, 0.0000], 1.0)` should return `[0, 1]`
+
+```js
+assert.deepEqual(getCircles(...testCases[1]), answers[1]);
+```
+
+`getCircles([0.1234, 0.9876], [0.1234, 0.9876], 2.0)` should return `Coincident point. Infinite solutions`
+
+```js
+assert.deepEqual(getCircles(...testCases[2]), answers[2]);
+```
+
+`getCircles([0.1234, 0.9876], [0.8765, 0.2345], 0.5)` should return `No intersection. Points further apart than circle diameter`
+
+```js
+assert.deepEqual(getCircles(...testCases[3]), answers[3]);
+```
+
+`getCircles([0.1234, 0.9876], [0.1234, 0.9876], 0.0)` should return `Radius Zero`
+
+```js
+assert.deepEqual(getCircles(...testCases[4]), answers[4]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const testCases = [
+  [[0.1234, 0.9876], [0.8765, 0.2345], 2.0],
+  [[0.0000, 2.0000], [0.0000, 0.0000], 1.0],
+  [[0.1234, 0.9876], [0.1234, 0.9876], 2.0],
+  [[0.1234, 0.9876], [0.8765, 0.2345], 0.5],
+  [[0.1234, 0.9876], [0.1234, 0.9876], 0.0]
+];
+const answers = [
+  [[1.8631, 1.9742], [-0.8632, -0.7521]],
+  [0, 1],
+  'Coincident point. Infinite solutions',
+  'No intersection. Points further apart than circle diameter',
+  'Radius Zero'
+];
+```
+
+## --seed-contents--
+
+```js
+function getCircles(...args) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+const hDist = (p1, p2) => Math.hypot(...p1.map((e, i) => e - p2[i])) / 2;
+const pAng = (p1, p2) => Math.atan(p1.map((e, i) => e - p2[i]).reduce((p, c) => c / p, 1));
+const solveF = (p, r) => t => [parseFloat((r * Math.cos(t) + p[0]).toFixed(4)), parseFloat((r * Math.sin(t) + p[1]).toFixed(4))];
+const diamPoints = (p1, p2) => p1.map((e, i) => parseFloat((e + (p2[i] - e) / 2).toFixed(4)));
+
+function getCircles(...args) {
+  const [p1, p2, s] = args;
+  const solve = solveF(p1, s);
+  const halfDist = hDist(p1, p2);
+
+  let msg = [];
+  switch (Math.sign(s - halfDist)) {
+    case 0:
+      msg = s ? diamPoints(p1, p2) :
+        'Radius Zero';
+      break;
+    case 1:
+      if (!halfDist) {
+        msg = 'Coincident point. Infinite solutions';
+      }
+      else {
+        const theta = pAng(p1, p2);
+        const theta2 = Math.acos(halfDist / s);
+        [1, -1].map(e => solve(theta + e * theta2)).forEach(
+          e => msg.push(e));
+      }
+      break;
+    case -1:
+      msg = 'No intersection. Points further apart than circle diameter';
+      break;
+    default:
+      msg = 'Reached the default';
+  }
+  return msg;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/closest-pair-problem.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/closest-pair-problem.md
new file mode 100644
index 00000000000..06259fbc6a1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/closest-pair-problem.md
@@ -0,0 +1,414 @@
+---
+id: 5951a53863c8a34f02bf1bdc
+title: Closest-pair problem
+challengeType: 1
+forumTopicId: 302232
+dashedName: closest-pair-problem
+---
+
+# --description--
+
+Provide a function to find the closest two points among a set of given points in two dimensions.
+
+The straightforward solution is a $O(n^2)$ algorithm (which we can call *brute-force algorithm*); the pseudo-code (using indexes) could be simply:
+
+<pre><strong>bruteForceClosestPair</strong> of P(1), P(2), ... P(N)
+<strong>if</strong> N &#x3C; 2 <strong>then</strong>
+  <strong>return</strong> ∞
+<strong>else</strong>
+  minDistance ← |P(1) - P(2)|
+  minPoints ← { P(1), P(2) }
+  <strong>foreach</strong> i ∈ [1, N-1]
+    <strong>foreach</strong> j ∈ [i+1, N]
+      <strong>if</strong> |P(i) - P(j)| &#x3C; minDistance <strong>then</strong>
+        minDistance ← |P(i) - P(j)|
+        minPoints ← { P(i), P(j) }
+      <strong>endif</strong>
+    <strong>endfor</strong>
+  <strong>endfor</strong>
+  <strong>return</strong> minDistance, minPoints
+<strong>endif</strong>
+</pre>
+
+A better algorithm is based on the recursive divide and conquer approach, which is $O(n\log n)$ a pseudo-code could be:
+
+<pre><strong>closestPair</strong> of (xP, yP)
+  where xP is P(1) .. P(N) sorted by x coordinate, and
+  yP is P(1) .. P(N) sorted by y coordinate (ascending order)
+<strong>if</strong> N ≤ 3 <strong>then</strong>
+  <strong>return</strong> closest points of xP using brute-force algorithm
+<strong>else</strong>
+  xL ← points of xP from 1 to ⌈N/2⌉
+  xR ← points of xP from ⌈N/2⌉+1 to N
+  xm ← xP(⌈N/2⌉)<sub>x</sub>
+  yL ← { p ∈ yP : p<sub>x</sub> ≤ xm }
+  yR ← { p ∈ yP : p<sub>x</sub> > xm }
+  (dL, pairL) ← closestPair of (xL, yL)
+  (dR, pairR) ← closestPair of (xR, yR)
+  (dmin, pairMin) ← (dR, pairR)
+  <strong>if</strong> dL &#x3C; dR <strong>then</strong>
+    (dmin, pairMin) ← (dL, pairL)
+  <strong>endif</strong>
+  yS ← { p ∈ yP : |xm - p<sub>x</sub>| &#x3C; dmin }
+  nS ← number of points in yS
+  (closest, closestPair) ← (dmin, pairMin)
+  <strong>for</strong> i <strong>from</strong> 1 <strong>to</strong> nS - 1
+    k ← i + 1
+    <strong>while</strong> k ≤ nS <strong>and</strong> yS(k)<sub>y</sub> - yS(i)<sub>y</sub> &#x3C; dmin
+      <strong>if</strong> |yS(k) - yS(i)| &#x3C; closest <strong>then</strong>
+        (closest, closestPair) ← (|yS(k) - yS(i)|, {yS(k), yS(i)})
+      <strong>endif</strong>
+      k ← k + 1
+    <strong>endwhile</strong>
+  <strong>endfor</strong>
+  <strong>return</strong> closest, closestPair
+<strong>endif</strong>
+</pre>
+
+For the input, expect the argument to be an array of `Point` objects with `x` and `y` members set to numbers. Return an object containing the key:value pairs for `distance` and `pair` (the pair of two closest points).
+
+For example `getClosestPair` with input array `points`:
+
+```js
+const points = [
+  new Point(1, 2),
+  new Point(3, 3),
+  new Point(2, 2)
+];
+```
+
+Would return:
+
+```js
+{
+  distance: 1,
+  pair: [
+    {
+      x: 1,
+      y: 2
+    },
+    {
+      x: 2,
+      y: 2
+    }
+  ]
+}
+```
+
+**Note:** Sort the `pair` array by their `x` values in incrementing order.
+
+
+# --hints--
+
+`getClosestPair` should be a function.
+
+```js
+assert(typeof getClosestPair === 'function');
+```
+
+`getClosestPair(points1).distance` should be `0.0894096443343775`.
+
+```js
+assert.equal(getClosestPair(points1).distance, answer1.distance);
+```
+
+`getClosestPair(points1).pair` should be `[ { x: 7.46489, y: 4.6268 }, { x: 7.46911, y: 4.71611 } ]`.
+
+```js
+assert.deepEqual(
+  JSON.parse(JSON.stringify(getClosestPair(points1))).pair,
+  answer1.pair
+);
+```
+
+`getClosestPair(points2).distance` should be `65.06919393998976`.
+
+```js
+assert.equal(getClosestPair(points2).distance, answer2.distance);
+```
+
+`getClosestPair(points2).pair` should be `[ { x: 37134, y: 1963 }, { x: 37181, y: 2008 } ]`.
+
+```js
+assert.deepEqual(
+  JSON.parse(JSON.stringify(getClosestPair(points2))).pair,
+  answer2.pair
+);
+```
+
+`getClosestPair(points3).distance` should be `6754.625082119658`.
+
+```js
+assert.equal(getClosestPair(points3).distance, answer3.distance);
+```
+
+`getClosestPair(points3).pair` should be `[ { x: 46817, y: 64975 }, { x: 48953, y: 58567 } ]`.
+
+```js
+assert.deepEqual(
+  JSON.parse(JSON.stringify(getClosestPair(points3))).pair,
+  answer3.pair
+);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const points1 = [
+    new Point(0.748501, 4.09624),
+    new Point(3.00302, 5.26164),
+    new Point(3.61878,  9.52232),
+    new Point(7.46911,  4.71611),
+    new Point(5.7819,   2.69367),
+    new Point(2.34709,  8.74782),
+    new Point(2.87169,  5.97774),
+    new Point(6.33101,  0.463131),
+    new Point(7.46489,  4.6268),
+    new Point(1.45428,  0.087596)
+];
+
+const answer1 = {
+  distance: 0.0894096443343775,
+  pair: [
+    {
+      x: 7.46489,
+      y: 4.6268
+    },
+    {
+      x: 7.46911,
+      y: 4.71611
+    }
+  ]
+};
+
+const points2 = [
+  new Point(37100, 13118),
+  new Point(37134, 1963),
+  new Point(37181, 2008),
+  new Point(37276, 21611),
+  new Point(37307, 9320)
+];
+
+const answer2 = {
+  distance: 65.06919393998976,
+  pair: [
+    {
+      x: 37134,
+      y: 1963
+    },
+    {
+      x: 37181,
+      y: 2008
+    }
+  ]
+};
+
+const points3 = [
+  new Point(16910, 54699),
+  new Point(14773, 61107),
+  new Point(95547, 45344),
+  new Point(95951, 17573),
+  new Point(5824, 41072),
+  new Point(8769, 52562),
+  new Point(21182, 41881),
+  new Point(53226, 45749),
+  new Point(68180, 887),
+  new Point(29322, 44017),
+  new Point(46817, 64975),
+  new Point(10501, 483),
+  new Point(57094, 60703),
+  new Point(23318, 35472),
+  new Point(72452, 88070),
+  new Point(67775, 28659),
+  new Point(19450, 20518),
+  new Point(17314, 26927),
+  new Point(98088, 11164),
+  new Point(25050, 56835),
+  new Point(8364, 6892),
+  new Point(37868, 18382),
+  new Point(23723, 7701),
+  new Point(55767, 11569),
+  new Point(70721, 66707),
+  new Point(31863, 9837),
+  new Point(49358, 30795),
+  new Point(13041, 39744),
+  new Point(59635, 26523),
+  new Point(25859, 1292),
+  new Point(1551, 53890),
+  new Point(70316, 94479),
+  new Point(48549, 86338),
+  new Point(46413, 92747),
+  new Point(27186, 50426),
+  new Point(27591, 22655),
+  new Point(10905, 46153),
+  new Point(40408, 84202),
+  new Point(52821, 73520),
+  new Point(84865, 77388),
+  new Point(99819, 32527),
+  new Point(34404, 75657),
+  new Point(78457, 96615),
+  new Point(42140, 5564),
+  new Point(62175, 92342),
+  new Point(54958, 67112),
+  new Point(4092, 19709),
+  new Point(99415, 60298),
+  new Point(51090, 52158),
+  new Point(48953, 58567)
+];
+
+const answer3 = {
+  distance: 6754.625082119658,
+  pair: [
+    {
+      x: 46817,
+      y: 64975
+    },
+    {
+      x: 48953,
+      y: 58567
+    }
+  ]
+}
+```
+
+## --seed-contents--
+
+```js
+const Point = function(x, y) {
+  this.x = x;
+  this.y = y;
+};
+Point.prototype.getX = function() {
+  return this.x;
+};
+Point.prototype.getY = function() {
+  return this.y;
+};
+
+function getClosestPair(pointsArr) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+const Point = function(x, y) {
+  this.x = x;
+  this.y = y;
+};
+Point.prototype.getX = function() {
+  return this.x;
+};
+Point.prototype.getY = function() {
+  return this.y;
+};
+
+const mergeSort = function mergeSort(points, comp) {
+    if(points.length < 2) return points;
+
+    var n = points.length,
+        i = 0,
+        j = 0,
+        leftN = Math.floor(n / 2),
+        rightN = leftN;
+
+    var leftPart = mergeSort( points.slice(0, leftN), comp),
+        rightPart = mergeSort( points.slice(rightN), comp );
+
+    var sortedPart = [];
+
+    while((i < leftPart.length) && (j < rightPart.length)) {
+        if(comp(leftPart[i], rightPart[j]) < 0) {
+            sortedPart.push(leftPart[i]);
+            i += 1;
+        }
+        else {
+            sortedPart.push(rightPart[j]);
+            j += 1;
+        }
+    }
+    while(i < leftPart.length) {
+        sortedPart.push(leftPart[i]);
+        i += 1;
+    }
+    while(j < rightPart.length) {
+        sortedPart.push(rightPart[j]);
+        j += 1;
+    }
+    return sortedPart;
+};
+
+const closestPair = function _closestPair(Px, Py) {
+    if(Px.length < 2) return { distance: Infinity, pair: [ new Point(0, 0), new Point(0, 0) ] };
+    if(Px.length < 3) {
+        //find euclid distance
+        var d = Math.sqrt( Math.pow(Math.abs(Px[1].x - Px[0].x), 2) + Math.pow(Math.abs(Px[1].y - Px[0].y), 2) );
+        return {
+            distance: d,
+            pair: [ Px[0], Px[1] ]
+        };
+    }
+
+    var n = Px.length,
+        leftN = Math.floor(n / 2),
+        rightN = leftN;
+
+    var Xl = Px.slice(0, leftN),
+        Xr = Px.slice(rightN),
+        Xm = Xl[leftN - 1],
+        Yl = [],
+        Yr = [];
+    //separate Py
+    for(var i = 0; i < Py.length; i += 1) {
+        if(Py[i].x <= Xm.x)
+            Yl.push(Py[i]);
+        else
+            Yr.push(Py[i]);
+    }
+
+    var dLeft = _closestPair(Xl, Yl),
+        dRight = _closestPair(Xr, Yr);
+
+    var minDelta = dLeft.distance,
+        closestPair = dLeft.pair;
+    if(dLeft.distance > dRight.distance) {
+        minDelta = dRight.distance;
+        closestPair = dRight.pair;
+    }
+
+    //filter points around Xm within delta (minDelta)
+    var closeY = [];
+    for(i = 0; i < Py.length; i += 1) {
+        if(Math.abs(Py[i].x - Xm.x) < minDelta) closeY.push(Py[i]);
+    }
+    //find min within delta. 8 steps max
+    for(i = 0; i < closeY.length; i += 1) {
+        for(var j = i + 1; j < Math.min( (i + 8), closeY.length ); j += 1) {
+            var d = Math.sqrt( Math.pow(Math.abs(closeY[j].x - closeY[i].x), 2) + Math.pow(Math.abs(closeY[j].y - closeY[i].y), 2) );
+            if(d < minDelta) {
+                minDelta = d;
+                closestPair = [ closeY[i], closeY[j] ]
+            }
+        }
+    }
+
+    return {
+        distance: minDelta,
+        pair: closestPair.sort((pointA, pointB) => pointA.x - pointB.x)
+    };
+};
+
+function getClosestPair(points) {
+  const sortX = function(a, b) { return (a.x < b.x) ? -1 : ((a.x > b.x) ? 1 : 0); }
+  const sortY = function(a, b) { return (a.y < b.y) ? -1 : ((a.y > b.y) ? 1 : 0); }
+
+  const Px = mergeSort(points, sortX);
+  const Py = mergeSort(points, sortY);
+
+  return closestPair(Px, Py);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/combinations.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/combinations.md
new file mode 100644
index 00000000000..39498bf8ed9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/combinations.md
@@ -0,0 +1,95 @@
+---
+id: 5958469238c0d8d2632f46db
+title: Combinations
+challengeType: 1
+forumTopicId: 302233
+dashedName: combinations
+---
+
+# --description--
+
+Given non-negative integers `m` and `n`, generate all size `m` combinations of the integers from `0` (zero) to `n-1` in sorted order (each combination is sorted and the entire table is sorted).
+
+**Example:**
+
+`3` comb `5` is:
+
+<pre>0 1 2
+0 1 3
+0 1 4
+0 2 3
+0 2 4
+0 3 4
+1 2 3
+1 2 4
+1 3 4
+2 3 4
+</pre>
+
+# --hints--
+
+`combinations` should be a function.
+
+```js
+assert(typeof combinations === 'function');
+```
+
+`combinations(3, 5)` should return `[[0, 1, 2], [0, 1, 3], [0, 1, 4], [0, 2, 3], [0, 2, 4], [0, 3, 4], [1, 2, 3], [1, 2, 4], [1, 3, 4], [2, 3, 4]]`.
+
+```js
+assert.deepEqual(combinations(testInput1[0], testInput1[1]), testOutput1);
+```
+
+`combinations(4, 6)` should return `[[0,1,2,3], [0,1,2,4], [0,1,2,5], [0,1,3,4], [0,1,3,5], [0,1,4,5], [0,2,3,4], [0,2,3,5], [0,2,4,5], [0,3,4,5], [1,2,3,4], [1,2,3,5], [1,2,4,5], [1,3,4,5], [2,3,4,5]]`
+
+```js
+assert.deepEqual(combinations(testInput2[0], testInput2[1]), testOutput2);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const testInput1 = [3, 5];
+const testOutput1 = [[0, 1, 2], [0, 1, 3], [0, 1, 4], [0, 2, 3], [0, 2, 4], [0, 3, 4], [1, 2, 3], [1, 2, 4], [1, 3, 4], [2, 3, 4]];
+
+const testInput2 = [4, 6];
+const testOutput2 = [[0, 1, 2, 3], [0, 1, 2, 4], [0, 1, 2, 5], [0, 1, 3, 4], [0, 1, 3, 5], [0, 1, 4, 5], [0, 2, 3, 4], [0, 2, 3, 5], [0, 2, 4, 5], [0, 3, 4, 5], [1, 2, 3, 4], [1, 2, 3, 5], [1, 2, 4, 5], [1, 3, 4, 5], [2, 3, 4, 5]];
+```
+
+## --seed-contents--
+
+```js
+function combinations(m, n) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function combinations(m, n) {
+  const nArr = [...Array(n).keys()];
+
+  return (function generateCombinations (size, numArr) {
+    const ret = [];
+
+    for (let i = 0; i < numArr.length; i++) {
+      if (size === 1) {
+        ret.push([numArr[i]]);
+      }
+      else {
+        const sub = generateCombinations(size - 1, numArr.slice(i + 1, numArr.length));
+        for (let subI = 0; subI < sub.length; subI++) {
+          const next = sub[subI];
+          next.unshift(numArr[i]);
+          ret.push(next);
+        }
+      }
+    }
+    return ret;
+  }(m, nArr));
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/comma-quibbling.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/comma-quibbling.md
new file mode 100644
index 00000000000..28053f80b67
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/comma-quibbling.md
@@ -0,0 +1,101 @@
+---
+id: 596e414344c3b2872167f0fe
+title: Comma quibbling
+challengeType: 1
+forumTopicId: 302234
+dashedName: comma-quibbling
+---
+
+# --description--
+
+<a href="https://rosettacode.org/wiki/Comma_quibbling" target="_blank" rel="noopener noreferrer nofollow">Comma quibbling</a> is a task originally set by Eric Lippert in his blog.
+
+# --instructions--
+
+Write a function to generate a string output which is the concatenation of input words from a list/sequence where:
+
+<ol>
+  <li>An input of no words produces the output string of just the two brace characters (<code>"{}"</code>)</li>
+  <li>An input of just one word, e.g. <code>["ABC"]</code>, produces the output string of the word inside the two braces, e.g. <code>"{ABC}"</code></li>
+  <li>An input of two words, e.g. <code>["ABC", "DEF"]</code>, produces the output string of the two words inside the two braces with the words separated by the string <code>" and "</code>, e.g. <code>"{ABC and DEF}"</code></li>
+  <li>An input of three or more words, e.g. <code>["ABC", "DEF", "G", "H"]</code>, produces the output string of all but the last word separated by <code>", "</code> with the last word separated by <code>" and "</code> and all within braces; e.g. <code>"{ABC, DEF, G and H}"</code></li>
+</ol>
+
+Test your function with the following series of inputs showing your output here on this page:
+
+<ul>
+  <li>[] # (No input words).</li>
+  <li>["ABC"]</li>
+  <li>["ABC", "DEF"]</li>
+  <li>["ABC", "DEF", "G", "H"]</li>
+</ul>
+
+**Note:** Assume words are non-empty strings of uppercase characters for this task.
+
+# --hints--
+
+`quibble` should be a function.
+
+```js
+assert(typeof quibble === 'function');
+```
+
+`quibble(["ABC"])` should return a string.
+
+```js
+assert(typeof quibble(['ABC']) === 'string');
+```
+
+`quibble([])` should return "{}".
+
+```js
+assert.equal(quibble(testCases[0]), results[0]);
+```
+
+`quibble(["ABC"])` should return `"{ABC}"`.
+
+```js
+assert.equal(quibble(testCases[1]), results[1]);
+```
+
+`quibble(["ABC", "DEF"])` should return `"{ABC and DEF}"`.
+
+```js
+assert.equal(quibble(testCases[2]), results[2]);
+```
+
+`quibble(["ABC", "DEF", "G", "H"])` should return `"{ABC, DEF, G and H}"`.
+
+```js
+assert.equal(quibble(testCases[3]), results[3]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const testCases = [[], ["ABC"], ["ABC", "DEF"], ["ABC", "DEF", "G", "H"]];
+const results = ["{}", "{ABC}", "{ABC and DEF}", "{ABC, DEF, G and H}"];
+```
+
+## --seed-contents--
+
+```js
+function quibble(words) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function quibble(words) {
+  return "{" +
+    words.slice(0, words.length - 1).join(", ") +
+   (words.length > 1 ? " and " : "") +
+   (words[words.length - 1] || '') +
+  "}";
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/compare-a-list-of-strings.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/compare-a-list-of-strings.md
new file mode 100644
index 00000000000..df465f24694
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/compare-a-list-of-strings.md
@@ -0,0 +1,138 @@
+---
+id: 596e457071c35c882915b3e4
+title: Compare a list of strings
+challengeType: 1
+forumTopicId: 302235
+dashedName: compare-a-list-of-strings
+---
+
+# --description--
+
+A list is a ordered set of values that may contain duplicates. Here is an example:
+
+```js
+const list = [['AA',  'BB', 'CC'], ['AA', 'ACB', 'AA'], [], ['AA']];
+```
+
+Given a list of arbitrarily many strings, implement a function for each of the following conditions:
+
+<ul>
+  <li>test if they are all lexically equal</li>
+  <li>test if every string is lexically less than the one after it  (i.e. whether the list is in strict ascending order)</li>
+</ul>
+
+# --hints--
+
+`allEqual` should be a function.
+
+```js
+assert(typeof allEqual === 'function');
+```
+
+`azSorted` should be a function.
+
+```js
+assert(typeof azSorted === 'function');
+```
+
+`allEqual(["AA", "AA", "AA", "AA"])` should return true.
+
+```js
+assert(allEqual(testCases[0]));
+```
+
+`azSorted(["AA", "AA", "AA", "AA"])` should return false.
+
+```js
+assert(!azSorted(testCases[0]));
+```
+
+`allEqual(["AA", "ACB", "BB", "CC"])` should return false.
+
+```js
+assert(!allEqual(testCases[1]));
+```
+
+`azSorted(["AA", "ACB", "BB", "CC"])` should return true.
+
+```js
+assert(azSorted(testCases[1]));
+```
+
+`allEqual([])` should return true.
+
+```js
+assert(allEqual(testCases[2]));
+```
+
+`azSorted([])` should return true.
+
+```js
+assert(azSorted(testCases[2]));
+```
+
+`allEqual(["AA"])` should return true.
+
+```js
+assert(allEqual(testCases[3]));
+```
+
+`azSorted(["AA"])` should return true.
+
+```js
+assert(azSorted(testCases[3]));
+```
+
+`allEqual(["BB", "AA"])` should return false.
+
+```js
+assert(!allEqual(testCases[4]));
+```
+
+`azSorted(["BB", "AA"])` should return false.
+
+```js
+assert(!azSorted(testCases[4]));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const testCases = [['AA', 'AA', 'AA', 'AA'], ['AA', 'ACB', 'BB', 'CC'], [], ['AA'], ['BB', 'AA']];
+```
+
+## --seed-contents--
+
+```js
+function allEqual(arr) {
+
+  return true;
+}
+
+function azSorted(arr) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function allEqual(a) {
+  let out = true;
+  let i = 0;
+  while (++i < a.length) {
+    out = out && (a[i - 1] === a[i]);
+  } return out;
+}
+
+function azSorted(a) {
+  let out = true;
+  let i = 0;
+  while (++i < a.length) {
+    out = out && (a[i - 1] < a[i]);
+  } return out;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/convert-seconds-to-compound-duration.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/convert-seconds-to-compound-duration.md
new file mode 100644
index 00000000000..683a565c301
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/convert-seconds-to-compound-duration.md
@@ -0,0 +1,129 @@
+---
+id: 596fd036dc1ab896c5db98b1
+title: Convert seconds to compound duration
+challengeType: 1
+forumTopicId: 302236
+dashedName: convert-seconds-to-compound-duration
+---
+
+# --description--
+
+Implement a function which:
+
+<ul>
+  <li>takes a positive integer representing a duration in seconds as input (e.g., <code>100</code>), and</li>
+  <li>returns a string which shows the same duration decomposed into weeks, days, hours, minutes, and seconds as detailed below (e.g., <code>1 min, 40 sec</code>).</li>
+</ul>
+
+Demonstrate that it passes the following three test-cases:
+
+<div style='font-size:115%; font-weight: bold;'>Test Cases</div>
+
+| Input number | Output number             |
+| ------------ | ------------------------- |
+| 7259         | <code>2 hr, 59 sec</code> |
+| 86400        | <code>1 d</code> |
+| 6000000      | <code>9 wk, 6 d, 10 hr, 40 min</code> |
+
+<div style="font-size:115%; font-weight: bold;">Details</div>
+<ul>
+  <li>
+    The following five units should be used:
+
+| Unit   | Suffix used in Output | Conversion            |
+| ------ | --------------------- | --------------------- |
+| week   |!!crwdBlockTags_18_sgaTkcolBdwrc!!       | 1 week = 7 days       |
+| day    |!!crwdBlockTags_19_sgaTkcolBdwrc!!        | 1 day = 24 hours      |
+| hour   |!!crwdBlockTags_20_sgaTkcolBdwrc!!       | 1 hour = 60 minutes   |
+| minute |!!crwdBlockTags_21_sgaTkcolBdwrc!!      | 1 minute = 60 seconds |
+| second |!!crwdBlockTags_22_sgaTkcolBdwrc!!      | ---                   |
+
+  </li>
+  <li>
+    However, <strong>only</strong> include quantities with non-zero values in the output (e.g., return <code>1 d</code> and not <code>0 wk, 1 d, 0 hr, 0 min, 0 sec</code>).
+  </li>
+  <li>
+    Give larger units precedence over smaller ones as much as possible (e.g., return <code>2 min, 10 sec</code> and not <code>1 min, 70 sec</code> or <code>130 sec</code>).
+  </li>
+  <li>
+    Mimic the formatting shown in the test-cases (quantities sorted from largest unit to smallest and separated by comma+space; value and unit of each quantity separated by space).
+  </li>
+</ul>
+
+# --hints--
+
+`convertSeconds` should be a function.
+
+```js
+assert(typeof convertSeconds === 'function');
+```
+
+`convertSeconds(7259)` should return `2 hr, 59 sec`.
+
+```js
+assert.equal(convertSeconds(testCases[0]), results[0]);
+```
+
+`convertSeconds(86400)` should return `1 d`.
+
+```js
+assert.equal(convertSeconds(testCases[1]), results[1]);
+```
+
+`convertSeconds(6000000)` should return `9 wk, 6 d, 10 hr, 40 min`.
+
+```js
+assert.equal(convertSeconds(testCases[2]), results[2]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const testCases = [7259, 86400, 6000000];
+const results = ['2 hr, 59 sec', '1 d', '9 wk, 6 d, 10 hr, 40 min'];
+```
+
+## --seed-contents--
+
+```js
+function convertSeconds(sec) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function convertSeconds(sec) {
+  const localNames = ['wk', 'd', 'hr', 'min', 'sec'];
+  // compoundDuration :: [String] -> Int -> String
+  const compoundDuration = (labels, intSeconds) =>
+    weekParts(intSeconds)
+    .map((v, i) => [v, labels[i]])
+    .reduce((a, x) =>
+      a.concat(x[0] ? [`${x[0]} ${x[1] || '?'}`] : []), []
+    )
+    .join(', ');
+
+    // weekParts :: Int -> [Int]
+  const weekParts = intSeconds => [0, 7, 24, 60, 60]
+    .reduceRight((a, x) => {
+      const r = a.rem;
+      const mod = x !== 0 ? r % x : r;
+
+      return {
+        rem: (r - mod) / (x || 1),
+        parts: [mod].concat(a.parts)
+      };
+    }, {
+      rem: intSeconds,
+      parts: []
+    })
+    .parts;
+
+  return compoundDuration(localNames, sec);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/count-occurrences-of-a-substring.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/count-occurrences-of-a-substring.md
new file mode 100644
index 00000000000..c3274154b40
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/count-occurrences-of-a-substring.md
@@ -0,0 +1,79 @@
+---
+id: 596fda99c69f779975a1b67d
+title: Count occurrences of a substring
+challengeType: 1
+forumTopicId: 302237
+dashedName: count-occurrences-of-a-substring
+---
+
+# --description--
+
+Create a function, or show a built-in function, to count the number of non-overlapping occurrences of a substring inside a string.
+
+The function should take two arguments:
+
+<ul>
+  <li>the first argument being the string to search, and</li>
+  <li>the second a substring to be searched for.</li>
+</ul>
+
+It should return an integer count.
+
+The matching should yield the highest number of non-overlapping matches.
+
+In general, this essentially means matching from left-to-right or right-to-left.
+
+# --hints--
+
+`countSubstring` should be a function.
+
+```js
+assert(typeof countSubstring === 'function');
+```
+
+`countSubstring("the three truths", "th")` should return `3`.
+
+```js
+assert.equal(countSubstring(testCases[0], searchString[0]), results[0]);
+```
+
+`countSubstring("ababababab", "abab")` should return `2`.
+
+```js
+assert.equal(countSubstring(testCases[1], searchString[1]), results[1]);
+```
+
+`countSubstring("abaabba*bbaba*bbab", "a*b")` should return `2`.
+
+```js
+assert.equal(countSubstring(testCases[2], searchString[2]), results[2]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const testCases = ['the three truths', 'ababababab', 'abaabba*bbaba*bbab'];
+const searchString = ['th', 'abab', 'a*b'];
+const results = [3, 2, 2];
+```
+
+## --seed-contents--
+
+```js
+function countSubstring(str, subStr) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function countSubstring(str, subStr) {
+  const escapedSubStr = subStr.replace(/[.+*?^$[\]{}()|/]/g, '\\$&');
+  const matches = str.match(new RegExp(escapedSubStr, 'g'));
+  return matches ? matches.length : 0;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/count-the-coins.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/count-the-coins.md
new file mode 100644
index 00000000000..3e75b21eac4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/count-the-coins.md
@@ -0,0 +1,93 @@
+---
+id: 59713bd26bdeb8a594fb9413
+title: Count the coins
+challengeType: 1
+forumTopicId: 302238
+dashedName: count-the-coins
+---
+
+# --description--
+
+There are four types of common coins in US currency:
+
+<ul>
+  <li>quarters (25 cents)</li>
+  <li>dimes (10 cents)</li>
+  <li>nickels (5 cents), and</li>
+  <li>pennies (1 cent)</li>
+</ul>
+
+<p>There are six ways to make change for 15 cents:</p>
+
+<ul>
+  <li>A dime and a nickel</li>
+  <li>A dime and 5 pennies</li>
+  <li>3 nickels</li>
+  <li>2 nickels and 5 pennies</li>
+  <li>A nickel and 10 pennies</li>
+  <li>15 pennies</li>
+</ul>
+
+# --instructions--
+
+Implement a function to determine how many ways there are to make change for a given input, `cents`, that represents an amount of US pennies using these common coins.
+
+# --hints--
+
+`countCoins` should be a function.
+
+```js
+assert(typeof countCoins === 'function');
+```
+
+`countCoins(15)` should return `6`.
+
+```js
+assert.equal(countCoins(15), 6);
+```
+
+`countCoins(85)` shouls return `163`.
+
+```js
+assert.equal(countCoins(85), 163);
+```
+
+`countCoins(100)` should return `242`.
+
+```js
+assert.equal(countCoins(100), 242);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function countCoins(cents) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function countCoins(cents) {
+  const operands = [1, 5, 10, 25];
+  const targetsLength = cents + 1;
+  const operandsLength = operands.length;
+  const t = [1];
+
+  for (let a = 0; a < operandsLength; a++) {
+    for (let b = 1; b < targetsLength; b++) {
+      // initialise undefined target
+      t[b] = t[b] ? t[b] : 0;
+
+      // accumulate target + operand ways
+      t[b] += (b < operands[a]) ? 0 : t[b - operands[a]];
+    }
+  }
+
+  return t[targetsLength - 1];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cramers-rule.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cramers-rule.md
new file mode 100644
index 00000000000..2d612f0a7f2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cramers-rule.md
@@ -0,0 +1,171 @@
+---
+id: 59713da0a428c1a62d7db430
+title: Cramer's rule
+challengeType: 1
+forumTopicId: 302239
+dashedName: cramers-rule
+---
+
+# --description--
+
+<a href="https://rosettacode.org/wiki/Cramer%27s_rule" target="_blank" rel="noopener noreferrer nofollow">Cramer's rule</a> is a formula for solving a system of linear equations by using the determinants of matrices formed from subsets of the coefficients and right hand side values.
+
+The determinant of a matrix with 2 rows and two columns is given by:
+
+$\begin{aligned}|A|={\begin{vmatrix}a&b\\\c&d\end{vmatrix}}=ad-bc.\end{aligned}$
+
+Given a system of linear equations:
+
+$\\left\\{\\begin{matrix}a_1x + b_1y + c_1z&= {\\color{red}d_1}\\\\a_2x + b_2y + c_2z&= {\\color{red}d_2}\\\\a_3x + b_3y + c_3z&= {\\color{red}d_3}\\end{matrix}\\right.$
+
+which in matrix format is
+
+$\\begin{bmatrix} a_1 & b_1 & c_1 \\\\ a_2 & b_2 & c_2 \\\\ a_3 & b_3 & c_3 \\end{bmatrix}\\begin{bmatrix} x \\\\ y \\\\ z \\end{bmatrix}=\\begin{bmatrix} {\\color{red}d_1} \\\\ {\\color{red}d_2} \\\\ {\\color{red}d_3} \\end{bmatrix}.$
+
+Then the values of $x, y$ and $z$ can be found as follows:
+
+$x = \\frac{\\begin{vmatrix} {\\color{red}d_1} & b_1 & c_1 \\\\ {\\color{red}d_2} & b_2 & c_2 \\\\ {\\color{red}d_3} & b_3 & c_3 \\end{vmatrix} } { \\begin{vmatrix} a_1 & b_1 & c_1 \\\\ a_2 & b_2 & c_2 \\\\ a_3 & b_3 & c_3 \\end{vmatrix}}, \\quad y = \\frac {\\begin{vmatrix} a_1 & {\\color{red}d_1} & c_1 \\\\ a_2 & {\\color{red}d_2} & c_2 \\\\ a_3 & {\\color{red}d_3} & c_3 \\end{vmatrix}} {\\begin{vmatrix} a_1 & b_1 & c_1 \\\\ a_2 & b_2 & c_2 \\\\ a_3 & b_3 & c_3 \\end{vmatrix}}, \\text{ and }z = \\frac { \\begin{vmatrix} a_1 & b_1 & {\\color{red}d_1} \\\\ a_2 & b_2 & {\\color{red}d_2} \\\\ a_3 & b_3 & {\\color{red}d_3} \\end{vmatrix}} {\\begin{vmatrix} a_1 & b_1 & c_1 \\\\ a_2 & b_2 & c_2 \\\\ a_3 & b_3 & c_3 \\end{vmatrix} }.$
+
+# --instructions--
+
+Given the following system of equations:
+
+$\\begin{cases} 2w-x+5y+z=-3 \\\\ 3w+2x+2y-6z=-32 \\\\ w+3x+3y-z=-47 \\\\ 5w-2x-3y+3z=49 \\\\ \\end{cases}$
+
+solve for $w$, $x$, $y$ and $z$, using Cramer's rule.
+
+# --hints--
+
+`cramersRule` should be a function.
+
+```js
+assert(typeof cramersRule === 'function');
+```
+
+`cramersRule([[2, -1, 5, 1], [3, 2, 2, -6], [1, 3, 3, -1], [5, -2, -3, 3]], [-3, -32, -47, 49])` should return `[2, -12, -4, 1]`.
+
+```js
+assert.deepEqual(cramersRule(matrices[0], freeTerms[0]), answers[0]);
+```
+
+`cramersRule([[3, 1, 1], [2, 2, 5], [1, -3, -4]], [3, -1, 2])` should return `[1, 1, -1]`.
+
+```js
+assert.deepEqual(cramersRule(matrices[1], freeTerms[1]), answers[1]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const matrices = [
+  [
+    [2, -1, 5, 1],
+    [3, 2, 2, -6],
+    [1, 3, 3, -1],
+    [5, -2, -3, 3]
+  ],
+  [
+    [3, 1, 1],
+    [2, 2, 5],
+    [1, -3, -4]
+  ]
+];
+const freeTerms = [[-3, -32, -47, 49], [3, -1, 2]];
+
+const answers = [[2, -12, -4, 1], [1, 1, -1]];
+```
+
+## --seed-contents--
+
+```js
+function cramersRule(matrix, freeTerms) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+/**
+ * Compute Cramer's Rule
+ * @param  {array} matrix    x,y,z, etc. terms
+ * @param  {array} freeTerms
+ * @return {array}           solution for x,y,z, etc.
+ */
+function cramersRule(matrix, freeTerms) {
+  const det = detr(matrix);
+  const returnArray = [];
+  let i;
+
+  for (i = 0; i < matrix[0].length; i++) {
+    const tmpMatrix = insertInTerms(matrix, freeTerms, i);
+    returnArray.push(detr(tmpMatrix) / det);
+  }
+  return returnArray;
+}
+
+/**
+ * Inserts single dimensional array into
+ * @param  {array} matrix multidimensional array to have ins inserted into
+ * @param  {array} ins single dimensional array to be inserted vertically into matrix
+ * @param  {array} at  zero based offset for ins to be inserted into matrix
+ * @return {array}     New multidimensional array with ins replacing the at column in matrix
+ */
+function insertInTerms(matrix, ins, at) {
+  const tmpMatrix = clone(matrix);
+  let i;
+  for (i = 0; i < matrix.length; i++) {
+    tmpMatrix[i][at] = ins[i];
+  }
+  return tmpMatrix;
+}
+/**
+ * Compute the determinate of a matrix.  No protection, assumes square matrix
+ * function borrowed, and adapted from MIT Licensed numericjs library (www.numericjs.com)
+ * @param  {array} m Input Matrix (multidimensional array)
+ * @return {number}   result rounded to 2 decimal
+ */
+function detr(m) {
+  let ret = 1;
+  let j;
+  let k;
+  const A = clone(m);
+  const n = m[0].length;
+  let alpha;
+
+  for (j = 0; j < n - 1; j++) {
+    k = j;
+    for (let i = j + 1; i < n; i++) { if (Math.abs(A[i][j]) > Math.abs(A[k][j])) { k = i; } }
+    if (k !== j) {
+      const temp = A[k]; A[k] = A[j]; A[j] = temp;
+      ret *= -1;
+    }
+    const Aj = A[j];
+    for (let i = j + 1; i < n; i++) {
+      const Ai = A[i];
+      alpha = Ai[j] / Aj[j];
+      for (k = j + 1; k < n - 1; k += 2) {
+        const k1 = k + 1;
+        Ai[k] -= Aj[k] * alpha;
+        Ai[k1] -= Aj[k1] * alpha;
+      }
+      if (k !== n) { Ai[k] -= Aj[k] * alpha; }
+    }
+    if (Aj[j] === 0) { return 0; }
+    ret *= Aj[j];
+  }
+  return Math.round(ret * A[j][j] * 100) / 100;
+}
+
+/**
+ * Clone two dimensional Array using ECMAScript 5 map function and EcmaScript 3 slice
+ * @param  {array} m Input matrix (multidimensional array) to clone
+ * @return {array}   New matrix copy
+ */
+function clone(m) {
+  return m.map(a => a.slice());
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cumulative-standard-deviation.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cumulative-standard-deviation.md
new file mode 100644
index 00000000000..2802c448aaa
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cumulative-standard-deviation.md
@@ -0,0 +1,126 @@
+---
+id: 5a23c84252665b21eecc7e03
+title: Cumulative standard deviation
+challengeType: 1
+forumTopicId: 302240
+dashedName: cumulative-standard-deviation
+---
+
+# --description--
+
+Suppose that the entire population of interest is eight students in a particular class. For a finite set of numbers, the population standard deviation is found by taking the square root of the average of the squared deviations of the values subtracted from their average value. The marks of a class of eight students (that is, a statistical population) are the following eight values:
+
+$2, 4, 4, 4, 5, 5, 7, 9$
+
+These eight data points have the mean (average) of 5:
+
+$$\mu ={\frac {2+4+4+4+5+5+7+9}{8}}={\frac {40}{8}}=5$$
+
+First, calculate the deviations of each data point from the mean, and square the result of each:
+
+| Deviations of each data | Square the result    |
+| ----------------------- | -------------------- |
+| $(2-5)^{2}=(-3)^{2}=9$  | $(5-5)^{2}=0^{2}=0$  |
+| $(4-5)^{2}=(-1)^{2}=1$  | $(5-5)^{2}=0^{2}=0$  |
+| $(4-5)^{2}=(-1)^{2}=1$  | $(7-5)^{2}=2^{2}=4$  |
+| $(4-5)^{2}=(-1)^{2}=1$  | $(9-5)^{2}=4^{2}=16$ |
+
+The variance is the mean of these values:
+
+$$\sigma ^{2}={\frac {9+1+1+1+0+0+4+16}{8}}={\frac {32}{8}}=4$$
+
+and the population standard deviation is equal to the square root of the variance:
+
+$$\sigma ={\sqrt {4}}=2$$
+
+Write a function that takes an array of numbers as parameter and returns the <a href="https://rosettacode.org/wiki/Standard_deviation" target="_blank" rel="noopener noreferrer nofollow">standard deviation</a> of the series.
+
+# --hints--
+
+`standardDeviation` should be a function.
+
+```js
+assert(typeof standardDeviation == 'function');
+```
+
+`standardDeviation([2, 4, 4, 4, 5, 5, 7, 9])` should return a number.
+
+```js
+assert(typeof standardDeviation([2, 4, 4, 4, 5, 5, 7, 9]) == 'number');
+```
+
+`standardDeviation([2, 4, 4, 4, 5, 5, 7, 9])` should return `2`.
+
+```js
+assert.equal(standardDeviation([2, 4, 4, 4, 5, 5, 7, 9]), 2);
+```
+
+`standardDeviation([600, 470, 170, 430, 300])` should return `147.323`.
+
+```js
+assert.equal(standardDeviation([600, 470, 170, 430, 300]), 147.323);
+```
+
+`standardDeviation([75, 83, 96, 100, 121, 125])` should return `18.239`.
+
+```js
+assert.equal(standardDeviation([75, 83, 96, 100, 121, 125]), 18.239);
+```
+
+`standardDeviation([23, 37, 45, 49, 56, 63, 63, 70, 72, 82])` should return `16.87`.
+
+```js
+assert.equal(
+  standardDeviation([23, 37, 45, 49, 56, 63, 63, 70, 72, 82]),
+  16.87
+);
+```
+
+`standardDeviation([271, 354, 296, 301, 333, 326, 285, 298, 327, 316, 287, 314])` should return `22.631`.
+
+```js
+assert.equal(
+  standardDeviation([
+    271,
+    354,
+    296,
+    301,
+    333,
+    326,
+    285,
+    298,
+    327,
+    316,
+    287,
+    314
+  ]),
+  22.631
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function standardDeviation(arr) {
+
+}
+```
+
+# --solutions--
+
+```js
+function standardDeviation(arr) {
+  var sum = 0,
+    sum_sq = 0,
+    n = arr.length;
+  arr.forEach(function(e) {
+    sum += e;
+    sum_sq += e * e;
+  });
+
+  var std_dev = Math.sqrt(sum_sq / n - Math.pow(sum / n, 2));
+  return Math.round(std_dev * 1000) / 1000;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cusip.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cusip.md
new file mode 100644
index 00000000000..b74ce598f4a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cusip.md
@@ -0,0 +1,118 @@
+---
+id: 5a23c84252665b21eecc7e05
+title: CUSIP
+challengeType: 1
+forumTopicId: 302241
+dashedName: cusip
+---
+
+# --description--
+
+A **CUSIP** is a nine-character alphanumeric code that identifies a North American financial security for the purposes of facilitating clearing and settlement of trades. The CUSIP was adopted as an American National Standard under Accredited Standards X9.6.
+
+# --instructions--
+
+Write a function that takes a string as a parameter and checks if the string is valid CUSIP.
+
+# --hints--
+
+`isCusip` should be a function.
+
+```js
+assert(typeof isCusip == 'function');
+```
+
+`isCusip("037833100")` should return a boolean.
+
+```js
+assert(typeof isCusip('037833100') == 'boolean');
+```
+
+`isCusip("037833100")` should return `true`.
+
+```js
+assert.equal(isCusip('037833100'), true);
+```
+
+`isCusip("17275R102")` should return `true`.
+
+```js
+assert.equal(isCusip('17275R102'), true);
+```
+
+`isCusip("38259P50a")` should return `false`.
+
+```js
+assert.equal(isCusip('38259P50a'), false);
+```
+
+`isCusip("38259P508")` should return `true`.
+
+```js
+assert.equal(isCusip('38259P508'), true);
+```
+
+`isCusip("38259P50#")` should return `false`.
+
+```js
+assert.equal(isCusip('38259P50#'), false);
+```
+
+`isCusip("68389X105")` should return `true`.
+
+```js
+assert.equal(isCusip('68389X105'), true);
+```
+
+`isCusip("68389X106")` should return `false`.
+
+```js
+assert.equal(isCusip('68389X106'), false);
+```
+
+`isCusip("5949181")` should return `false`.
+
+```js
+assert.equal(isCusip('5949181'), false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function isCusip(s) {
+
+}
+```
+
+# --solutions--
+
+```js
+function isCusip(s) {
+  if (s.length != 9) return false;
+  var sum = 0;
+  var ASCII = x => x.charCodeAt(0);
+  for (var i = 0; i < 7; i++) {
+    var c = s.charCodeAt(i);
+
+    var v;
+    if (c >= ASCII('0') && c <= ASCII('9')) {
+      v = c - 48;
+    } else if (c >= ASCII('A') && c <= ASCII('Z')) {
+      v = c - 64; // lower case letters apparently invalid
+    } else if (c == ASCII('*')) {
+      v = 36;
+    } else if (c == ASCII('@')) {
+      v = 37;
+    } else if (c == ASCII('#')) {
+      v = 38;
+    } else {
+      return false;
+    }
+    if (i % 2 == 1) v *= 2; // check if odd as using 0-based indexing
+    sum += Math.floor(v / 10) + (v % 10);
+  }
+  return s.charCodeAt(8) - 48 == (10 - (sum % 10)) % 10;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cut-a-rectangle.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cut-a-rectangle.md
new file mode 100644
index 00000000000..446e3fddf1f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/cut-a-rectangle.md
@@ -0,0 +1,203 @@
+---
+id: 5a23c84252665b21eecc7e06
+title: Cut a rectangle
+challengeType: 1
+forumTopicId: 302242
+dashedName: cut-a-rectangle
+---
+
+# --description--
+
+A given rectangle is made from *m* × *n* squares. If *m* and *n* are not both odd, then it is possible to cut a path through the rectangle along the square edges such that the rectangle splits into two connected pieces with the same shape (after rotating one of the pieces by 180°). All such paths for 2 × 2 and 4 × 3 rectangles are shown below.
+
+<div style="width: 100%; text-align: center;">
+  <svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" width="520" height="170" aria-hidden="true" alt="Diagram showing the possible paths for 2 by 2 and 4 by 3 rectangles">
+    <style>
+      .diagram-g { fill: none; stroke: #ccc }
+      .diagram-s, .diagram-s2 { fill: #bff; stroke: black; fill-opacity: .4 }
+      .diagram-s2 { fill: #fbf }
+      .diagram-d { stroke:black; fill:none}
+    </style>
+    <defs>
+      <g id="diagram-m">
+        <g id="diagram-h4">
+          <g id="diagram-h2">
+            <path id="diagram-h" d="m0 10h 640" class="diagram-g"/>
+            <use xlink:href="#diagram-h" transform="translate(0, 20)"/>
+          </g>
+          <use xlink:href="#diagram-h2" transform="translate(0, 40)"/>
+        </g>
+        <use xlink:href="#diagram-h4" transform="translate(0, 80)"/>
+        <g id="diagram-v8">
+          <g id="diagram-v4">
+            <g id="diagram-v2">
+              <path id="diagram-v" d="m10 0v160 m 20 0 v-160" class="diagram-g"/>
+              <use xlink:href="#diagram-v" transform="translate(40, 0)"/>
+            </g>
+            <use xlink:href="#diagram-v2" transform="translate(80, 0)"/>
+          </g>
+          <use xlink:href="#diagram-v4" transform="translate(160, 0)"/>
+        </g>
+        <use xlink:href="#diagram-v8" transform="translate(320, 0)"/>
+      </g>
+      <path id="diagram-b" d="m0 0h80v60h-80z" class="diagram-s"/>
+    </defs>
+    <g transform="translate(.5, .5)">
+      <use xlink:href="#diagram-m"/>
+      <g transform="translate(10, 10)">
+        <path d="m0 0v40h40v-40z" class="diagram-s2"/>
+        <path d="m20 0v40" class="diagram-d"/>
+        <path d="m60 0v40h40v-40z" class="diagram-s2"/>
+        <path d="m60 20h40" class="diagram-d"/>
+        <g transform="translate(120, 0)">
+          <use xlink:href="#diagram-b"/>
+          <path d="m0 20h40v20h40" class="diagram-d"/>
+        </g>
+        <g transform="translate(220, 0)">
+          <use xlink:href="#diagram-b"/>
+          <path d="m0 40h40v-20h40" class="diagram-d"/>
+        </g>
+        <g transform="translate(320, 0)">
+          <use xlink:href="#diagram-b"/>
+          <path d="m20 0v40h20v-20h20v40" class="diagram-d"/>
+        </g>
+        <g transform="translate(420, 0)">
+          <use xlink:href="#diagram-b"/>
+          <path d="m60 0v40h-20v-20h-20v40" class="diagram-d"/>
+        </g>
+        <g transform="translate(20, 80)">
+          <use xlink:href="#diagram-b"/>
+          <path d="m40 0v60" class="diagram-d"/>
+        </g>
+        <g transform="translate(120, 80)">
+          <use xlink:href="#diagram-b"/>
+          <path d="m60 0v20h-20v20h-20v20" class="diagram-d"/>
+        </g>
+        <g transform="translate(220, 80)">
+          <use xlink:href="#diagram-b"/>
+          <path d="m20 0v20h20v20h20v20" class="diagram-d"/>
+        </g>
+        <g transform="translate(320, 80)">
+          <use xlink:href="#diagram-b"/>
+          <path d="m0 20h20v20h20v-20h20v20h20" class="diagram-d"/>
+        </g>
+        <g transform="translate(420, 80)">
+          <use xlink:href="#diagram-b"/>
+          <path d="m0 40h20v-20h20v20h20v-20h20" class="diagram-d"/>
+        </g>
+      </g>
+    </g>
+  </svg>
+</div>
+
+# --instructions--
+
+Write a function that calculates the number of different ways to cut an *m* × *n* rectangle.
+
+# --hints--
+
+`cutRectangle` should be a function.
+
+```js
+assert(typeof cutRectangle == 'function');
+```
+
+`cutRectangle(2, 2)` should return a number.
+
+```js
+assert(typeof cutRectangle(2, 2) == 'number');
+```
+
+`cutRectangle(2, 2)` should return `2`.
+
+```js
+assert.equal(cutRectangle(2, 2), 2);
+```
+
+`cutRectangle(4, 3)` should return `9`.
+
+```js
+assert.equal(cutRectangle(4, 3), 9);
+```
+
+`cutRectangle(4, 4)` should return `22`.
+
+```js
+assert.equal(cutRectangle(4, 4), 22);
+```
+
+`cutRectangle(8, 3)` should return `53`.
+
+```js
+assert.equal(cutRectangle(8, 3), 53);
+```
+
+`cutRectangle(7, 4)` should return `151`.
+
+```js
+assert.equal(cutRectangle(7, 4), 151);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cutRectangle(w, h) {
+
+}
+```
+
+# --solutions--
+
+```js
+function cutRectangle(w, h) {
+  if (w % 2 == 1 && h % 2 == 1) return;
+
+  var dirs = [[0, -1], [-1, 0], [0, 1], [1, 0]];
+
+  var grid = new Array(h);
+  for (var i = 0; i < grid.length; i++) grid[i] = new Array(w);
+  var stack = [];
+
+  var half = Math.floor((w * h) / 2);
+  var bits = Math.pow(2, half) - 1;
+  var result = 0;
+  for (; bits > 0; bits -= 2) {
+    for (var i = 0; i < half; i++) {
+      var r = Math.floor(i / w);
+      var c = i % w;
+      grid[r][c] = (bits & (1 << i)) != 0 ? 1 : 0;
+      grid[h - r - 1][w - c - 1] = 1 - grid[r][c];
+    }
+
+    stack.push(0);
+    grid[0][0] = 2;
+    var count = 1;
+    while (stack.length != 0) {
+      var pos = stack.pop();
+      var r = Math.floor(pos / w);
+      var c = pos % w;
+
+      for (var dir of dirs) {
+        var nextR = r + dir[0];
+        var nextC = c + dir[1];
+
+        if (nextR >= 0 && nextR < h && nextC >= 0 && nextC < w) {
+          if (grid[nextR][nextC] == 1) {
+            stack.push(nextR * w + nextC);
+            grid[nextR][nextC] = 2;
+            count++;
+          }
+        }
+      }
+    }
+
+    if (count == half) {
+      result++;
+    }
+  }
+
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/date-format.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/date-format.md
new file mode 100644
index 00000000000..1d5f06010c2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/date-format.md
@@ -0,0 +1,90 @@
+---
+id: 59669d08d75b60482359409f
+title: Date format
+challengeType: 1
+forumTopicId: 302243
+dashedName: date-format
+---
+
+# --description--
+
+Return an array with two date strings of the current date with the following specifications:
+
+- The first string's date order should be the year number, month number, and day number separated by dashes (`-`).
+- The first string's year should be four digits in length.
+- The first string's month and day should not contain any leading zeros.
+- The second string's weekday and month names should not be abbreviated.
+- The second string's day should not contain any leading zeros.
+
+Example outputs:
+
+```js
+['2007-11-23', 'Friday, November 23, 2007']
+['2021-3-2', 'Tuesday, March 2, 2021']
+```
+
+# --hints--
+
+`getDateFormats` should be a function.
+
+```js
+assert(typeof getDateFormats === 'function');
+```
+
+`getDateFormats` should return an object.
+
+```js
+assert(typeof getDateFormats() === 'object');
+```
+
+`getDateFormats` should return an array with 2 elements.
+
+```js
+assert(getDateFormats().length === 2);
+```
+
+`getDateFormats` should return the correct date in the right format
+
+```js
+assert.deepEqual(getDateFormats(), dates, equalsMessage);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const getDateSolution = () => {
+  const date = new Date();
+  const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  const fmt1 = `${date.getFullYear()}-${(1 + date.getMonth())}-${date.getDate()}`;
+  const fmt2 = `${weekdays[date.getDay()]}, ${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
+  return [fmt1, fmt2];
+};
+
+const dates = getDateSolution();
+const equalsMessage = `message: <code>getDataFormats()</code> should return <code>["${dates[0]}", "${dates[1]}"]</code>.`;
+```
+
+## --seed-contents--
+
+```js
+function getDateFormats() {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function getDateFormats() {
+  const date = new Date();
+  const weekdays = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  const months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+  const fmt1 = `${date.getFullYear()}-${(1 + date.getMonth())}-${date.getDate()}`;
+  const fmt2 = `${weekdays[date.getDay()]}, ${months[date.getMonth()]} ${date.getDate()}, ${date.getFullYear()}`;
+  return [fmt1, fmt2];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/date-manipulation.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/date-manipulation.md
new file mode 100644
index 00000000000..8c9e853bb80
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/date-manipulation.md
@@ -0,0 +1,109 @@
+---
+id: 5966c21cf732a95f1b67dd28
+title: Date manipulation
+challengeType: 1
+forumTopicId: 302244
+dashedName: date-manipulation
+---
+
+# --description--
+
+Given a date string in EST, output the given date as a string with 12 hours added to the time. Time zone should be preserved.
+
+Example input: `"March 6 2009 7:30pm EST"`
+
+Example output: `"March 7 2009 7:30am EST"`
+
+# --hints--
+
+`add12Hours` should be a function.
+
+```js
+assert(typeof add12Hours === 'function');
+```
+
+`add12Hours(dateString)` should return a string.
+
+```js
+assert(typeof add12Hours('January 17 2017 11:43am EST') === 'string');
+```
+
+`add12Hours("January 17 2017 11:43am EST")` should return `"January 17 2017 11:43pm EST"`
+
+```js
+assert(
+  add12Hours('January 17 2017 11:43am EST') === 'January 17 2017 11:43pm EST'
+);
+```
+
+Should handle day change. `add12Hours("March 6 2009 7:30pm EST")` should return `"March 7 2009 7:30am EST"`
+
+```js
+assert(add12Hours('March 6 2009 7:30pm EST') === 'March 7 2009 7:30am EST');
+```
+
+Should handle month change in a leap years. `add12Hours("February 29 2004 9:15pm EST")` should return `"March 1 2004 9:15am EST"`
+
+```js
+assert(add12Hours('February 29 2004 9:15pm EST') === 'March 1 2004 9:15am EST');
+```
+
+Should handle month change in a common years. `add12Hours("February 28 1999 3:15pm EST")` should return `"March 1 1999 3:15am EST"`
+
+```js
+assert(add12Hours('February 28 1999 3:15pm EST') === 'March 1 1999 3:15am EST');
+```
+
+Should handle year change. `add12Hours("December 31 2020 1:45pm EST")` should return `"January 1 2021 1:45am EST"`
+
+```js
+assert(
+  add12Hours('December 31 2020 1:45pm EST') === 'January 1 2021 1:45am EST'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function add12Hours(dateString) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function add12Hours(dateString) {
+  const months = ['January', 'February', 'March', 'April', 'May', 'June',
+    'July', 'August', 'September', 'October', 'November', 'December'];
+  // Get the parts of the string
+  const parts = dateString.split(' ');
+  const month = months.indexOf(parts[0]);
+  const day = parseInt(parts[1], 10);
+  const year = parseInt(parts[2], 10);
+  const time = parts[3].split(':');
+  let hours = parseInt(time[0], 10);
+  if (time[1].slice(-2) === 'pm') {
+    hours += 12;
+  }
+  const minutes = parseInt(time[1].slice(0, -2), 10);
+
+  // Create a date with given parts, and updated hours
+  const date = new Date();
+  date.setFullYear(year, month, day);
+  date.setHours(hours + 12);  // Add 12 hours
+  date.setMinutes(minutes);
+
+  let hoursOutput = date.getHours();
+  let abbreviation = 'am';
+  if (hoursOutput > 12) {
+    hoursOutput -= 12;
+    abbreviation = 'pm';
+  }
+
+  return `${months[date.getMonth()]} ${date.getDate()} ${date.getFullYear()} ${hoursOutput}:${date.getMinutes()}${abbreviation} EST`;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/day-of-the-week.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/day-of-the-week.md
new file mode 100644
index 00000000000..e41d1e48dae
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/day-of-the-week.md
@@ -0,0 +1,74 @@
+---
+id: 5966f99c45e8976909a85575
+title: Day of the week
+challengeType: 1
+forumTopicId: 302245
+dashedName: day-of-the-week
+---
+
+# --description--
+
+A company decides that whenever Xmas falls on a Sunday they will give their workers all extra paid holidays so that, together with any public holidays, workers will not have to work the following week (between the 25th of December and the first of January).
+
+# --instructions--
+
+Write a function that takes a start year and an end year and return an array of all the years where the 25th of December will be a Sunday.
+
+# --hints--
+
+`findXmasSunday` should be a function.
+
+```js
+assert(typeof findXmasSunday === 'function');
+```
+
+`findXmasSunday(2000, 2100)` should return an array.
+
+```js
+assert(typeof findXmasSunday(2000, 2100) === 'object');
+```
+
+`findXmasSunday(1970, 2017)` should return `[1977, 1983, 1988, 1994, 2005, 2011, 2016]`
+
+```js
+assert.deepEqual(findXmasSunday(1970, 2017), firstSolution);
+```
+
+`findXmasSunday(2008, 2121)` should return `[2011, 2016, 2022, 2033, 2039, 2044, 2050, 2061, 2067, 2072, 2078, 2089, 2095, 2101, 2107, 2112, 2118]`
+
+```js
+assert.deepEqual(findXmasSunday(2008, 2121), secondSolution);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const firstSolution = [1977, 1983, 1988, 1994, 2005, 2011, 2016];
+const secondSolution = [2011, 2016, 2022, 2033, 2039, 2044, 2050, 2061, 2067, 2072, 2078, 2089, 2095, 2101, 2107, 2112, 2118];
+```
+
+## --seed-contents--
+
+```js
+function findXmasSunday(start, end) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function findXmasSunday(start, end) {
+  const xmasSunday = [];
+  for (let year = start; year <= end; year++) {
+    const xmas = new Date(year, 11, 25);
+    if (xmas.getDay() === 0) {
+      xmasSunday.push(year);
+    }
+  }
+  return xmasSunday;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
new file mode 100644
index 00000000000..b6a78ff636a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/deal-cards-for-freecell.md
@@ -0,0 +1,208 @@
+---
+id: 59694356a6e7011f7f1c5f4e
+title: Deal cards for FreeCell
+challengeType: 1
+forumTopicId: 302246
+dashedName: deal-cards-for-freecell
+---
+
+# --description--
+
+*FreeCell* is the solitaire card game that Paul Alfille introduced to the PLATO system in 1978. Jim Horne, at Microsoft, changed the name to FreeCell and reimplemented the game for DOS, then Windows. This version introduced 32000 numbered deals.
+
+As the game became popular, Jim Horne disclosed the algorithm, and other implementations of FreeCell began to reproduce the Microsoft deals. These deals are numbered from 1 to 32000. Newer versions from Microsoft have 1 million deals, numbered from 1 to 1000000; some implementations allow numbers outside that range.
+
+The algorithm uses this linear congruential generator from Microsoft C:
+
+<ul>
+  <li>$state_{n + 1} \equiv 214013 \times state_n + 2531011 \pmod{2^{31}}$</li>
+  <li>$rand_n = state_n \div 2^{16}$</li>
+  <li>$rand_n$ is in range 0 to 32767.</li>
+</ul>
+
+The algorithm follows:
+
+<ol>
+  <li>Seed the RNG with the number of the deal.
+  </li><li>Create an array of 52 cards: Ace of Clubs, Ace of Diamonds, Ace of Hearts, Ace of Spades, 2 of Clubs, 2 of Diamonds, and so on through the ranks: Ace, 2, 3, 4, 5, 6, 7, 8, 9, 10, Jack, Queen, King. The array indexes are 0 to 51, with Ace of Clubs at 0, and King of Spades at 51.</li>
+  <li>Until the array is empty:</li>
+  <li>Choose a random card at index ≡ next random number (mod array length).</li>
+    <ul>
+      <li>Swap this random card with the last card of the array.</li>
+      <li>Remove this random card from the array. (Array length goes down by 1.)</li>
+      <li>Deal this random card.</li>
+    </ul>
+  <li>Deal all 52 cards, face up, across 8 columns. The first 8 cards go in 8 columns, the next 8 cards go on the first 8 cards, and so on.</li>
+</ol>
+
+**Example:**
+
+**Order to deal cards**
+
+<pre> 1  2  3  4  5  6  7  8
+ 9 10 11 12 13 14 15 16
+17 18 19 20 21 22 23 24
+25 26 27 28 29 30 31 32
+33 34 35 36 37 38 39 40
+41 42 43 44 45 46 47 48
+49 50 51 52</pre>
+
+**Game #1**
+
+```js
+[
+  ['JD', '2D', '9H', 'JC', '5D', '7H', '7C', '5H'],
+  ['KD', 'KC', '9S', '5S', 'AD', 'QC', 'KH', '3H'],
+  ['2S', 'KS', '9D', 'QD', 'JS', 'AS', 'AH', '3C'],
+  ['4C', '5C', 'TS', 'QH', '4H', 'AC', '4D', '7S'],
+  ['3S', 'TD', '4S', 'TH', '8H', '2C', 'JH', '7D'],
+  ['6D', '8S', '8D', 'QS', '6C', '3D', '8C', 'TC'],
+  ['6S', '9C', '2H', '6H']
+]
+```
+
+**Game #617**
+
+```js
+[
+  ['7D', 'AD', '5C', '3S', '5S', '8C', '2D', 'AH'],
+  ['TD', '7S', 'QD', 'AC', '6D', '8H', 'AS', 'KH'],
+  ['TH', 'QC', '3H', '9D', '6S', '8D', '3D', 'TC'],
+  ['KD', '5H', '9S', '3C', '8S', '7H', '4D', 'JS'],
+  ['4C', 'QS', '9C', '9H', '7C', '6H', '2C', '2S'],
+  ['4S', 'TS', '2H', '5D', 'JC', '6C', 'JH', 'QH'],
+  ['JD', 'KS', 'KC', '4H']
+]
+```
+
+# --instructions--
+
+Write a function to take a deal number and deal cards in the same order as this algorithm. The function must return a two dimensional array representing the FreeCell board.
+
+# --hints--
+
+`dealFreeCell` should be a function.
+
+```js
+assert(typeof dealFreeCell === 'function');
+```
+
+`dealFreeCell(seed)` should return an object.
+
+```js
+assert(typeof dealFreeCell(1) === 'object');
+```
+
+`dealFreeCell(seed)` should return an array of length 7.
+
+```js
+assert(dealFreeCell(1).length === 7);
+```
+
+`dealFreeCell(1)` should return an array identical to example "Game #1"
+
+```js
+assert.deepEqual(dealFreeCell(1), game1);
+```
+
+`dealFreeCell(617)` should return an array identical to example "Game #617"
+
+```js
+assert.deepEqual(dealFreeCell(617), game617);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const replaceThis = 3;
+const game1 = [
+  ['JD', '2D', '9H', 'JC', '5D', '7H', '7C', '5H'],
+  ['KD', 'KC', '9S', '5S', 'AD', 'QC', 'KH', '3H'],
+  ['2S', 'KS', '9D', 'QD', 'JS', 'AS', 'AH', '3C'],
+  ['4C', '5C', 'TS', 'QH', '4H', 'AC', '4D', '7S'],
+  ['3S', 'TD', '4S', 'TH', '8H', '2C', 'JH', '7D'],
+  ['6D', '8S', '8D', 'QS', '6C', '3D', '8C', 'TC'],
+  ['6S', '9C', '2H', '6H']
+];
+const game617 = [
+  ['7D', 'AD', '5C', '3S', '5S', '8C', '2D', 'AH'],
+  ['TD', '7S', 'QD', 'AC', '6D', '8H', 'AS', 'KH'],
+  ['TH', 'QC', '3H', '9D', '6S', '8D', '3D', 'TC'],
+  ['KD', '5H', '9S', '3C', '8S', '7H', '4D', 'JS'],
+  ['4C', 'QS', '9C', '9H', '7C', '6H', '2C', '2S'],
+  ['4S', 'TS', '2H', '5D', 'JC', '6C', 'JH', 'QH'],
+  ['JD', 'KS', 'KC', '4H']
+];
+```
+
+## --seed-contents--
+
+```js
+function dealFreeCell(seed) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+// RNG
+function FreeCellRNG(seed) {
+  return {
+    lastNum: seed,
+    next() {
+      this.lastNum = ((214013 * this.lastNum) + 2531011) % (Math.pow(2, 31));
+      return this.lastNum >> 16;
+    }
+  };
+}
+// Get cards
+function getDeck() {
+  const ranks = ['A', '2', '3', '4', '5', '6', '7', '8', '9', 'T', 'J', 'Q', 'K'];
+  const suits = ['C', 'D', 'H', 'S'];
+  const cards = [];
+  for (let i = 0; i < ranks.length; i += 1) {
+    for (let j = 0; j < suits.length; j += 1) {
+      cards.push(`${ranks[i]}${suits[j]}`);
+    }
+  }
+  return cards;
+}
+function dealFreeCell(seed) {
+  const rng = FreeCellRNG(seed);
+  const deck = getDeck();
+
+  const deltCards = [[], [], [], [], [], [], []];
+  let currentColumn = 0;
+  let currentRow = 0;
+
+  let rand;
+  let temp;
+  let card;
+  while (deck.length > 0) {
+    // Choose a random card
+    rand = rng.next() % deck.length;
+
+    // Swap this random card with the last card in the array
+    temp = deck[deck.length - 1];
+    deck[deck.length - 1] = deck[rand];
+    deck[rand] = temp;
+
+    // Remove this card from the array
+    card = deck.pop();
+
+    // Deal this card
+    deltCards[currentRow].push(card);
+    currentColumn += 1;
+    if (currentColumn === 8) {
+      currentColumn = 0;
+      currentRow += 1;
+    }
+  }
+
+  return deltCards;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/deepcopy.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/deepcopy.md
new file mode 100644
index 00000000000..dc7666cee51
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/deepcopy.md
@@ -0,0 +1,85 @@
+---
+id: 596a8888ab7c01048de257d5
+title: Deepcopy
+challengeType: 1
+forumTopicId: 302247
+dashedName: deepcopy
+---
+
+# --description--
+
+Write a function that returns a deep copy of a given object. The copy must not be the same object that was given.
+
+This task will not test for:
+
+<ul>
+  <li>Objects with properties that are functions</li>
+  <li>Date objects or object with properties that are Date objects</li>
+  <li>RegEx or object with properties that are RegEx objects</li>
+  <li>Prototype copying</li>
+</ul>
+
+# --hints--
+
+`deepcopy` should be a function.
+
+```js
+assert(typeof deepcopy === 'function');
+```
+
+`deepcopy({test: "test"})` should return an object.
+
+```js
+assert(typeof deepcopy(obj1) === 'object');
+```
+
+`deepcopy` should not return the same object that was provided.
+
+```js
+assert(deepcopy(obj2) != obj2);
+```
+
+When passed an object containing an array, `deepcopy` should return a deep copy of the object.
+
+```js
+assert.deepEqual(deepcopy(obj2), obj2);
+```
+
+When passed an object containing another object, `deepcopy`  should return a deep copy of the object.
+
+```js
+assert.deepEqual(deepcopy(obj3), obj3);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const obj1 = { test: 'test' };
+const obj2 = {
+  t: 'test',
+  a: ['an', 'array']
+};
+const obj3 = {
+  t: 'try',
+  o: obj2
+};
+```
+
+## --seed-contents--
+
+```js
+function deepcopy(obj) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function deepcopy(obj) {
+  return JSON.parse(JSON.stringify(obj));
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/define-a-primitive-data-type.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/define-a-primitive-data-type.md
new file mode 100644
index 00000000000..e7909424694
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/define-a-primitive-data-type.md
@@ -0,0 +1,132 @@
+---
+id: 597089c87eec450c68aa1643
+title: Define a primitive data type
+challengeType: 1
+forumTopicId: 302248
+dashedName: define-a-primitive-data-type
+---
+
+# --description--
+
+Define a type that behaves like an integer but has a lowest valid value of 1 and a highest valid value of 10.
+
+Error handling:
+
+<ul>
+  <li>If you try to instantiate a <code>Num</code> with a value outside of 1 - 10, it should throw a <code>TypeError</code> with an error message of <code>'Out of range'</code>.</li>
+  <li>If you try to instantiate a <code>Num</code> with a value that is not a number, it should throw a <code>TypeError</code> with an error message of <code>'Not a Number'</code>.</li>
+</ul>
+
+# --hints--
+
+`Num` should be a function.
+
+```js
+assert(typeof Num === 'function');
+```
+
+`new Num(4)` should return an object.
+
+```js
+assert(typeof new Num(4) === 'object');
+```
+
+`new Num('test')` should throw a TypeError with message 'Not a Number'.
+
+```js
+assert.throws(() => new Num('test'), TypeError);
+```
+
+`new Num(0)` should throw a TypeError with message 'Out of range'.
+
+```js
+assert.throws(() => new Num(0), TypeError);
+```
+
+`new Num(-5)` should throw a TypeError with message 'Out of range'.
+
+```js
+assert.throws(() => new Num(-5), TypeError);
+```
+
+`new Num(10)` should throw a TypeError with message 'Out of range'.
+
+```js
+assert.throws(() => new Num(11), TypeError);
+```
+
+`new Num(20)` should throw a TypeError with message 'Out of range'.
+
+```js
+assert.throws(() => new Num(20), TypeError);
+```
+
+`new Num(3) + new Num(4)` should equal 7.
+
+```js
+assert.equal(new Num(3) + new Num(4), 7);
+```
+
+`new Num(3) - new Num(4)` should equal -1.
+
+```js
+assert.equal(new Num(3) - new Num(4), -1);
+```
+
+`new Num(3) * new Num(4)` should equal 12.
+
+```js
+assert.equal(new Num(3) * new Num(4), 12);
+```
+
+`new Num(3) / new Num(4)` should equal 0.75.
+
+```js
+assert.equal(new Num(3) / new Num(4), 0.75);
+```
+
+`new Num(3) < new Num(4)` should be true.
+
+```js
+assert(new Num(3) < new Num(4));
+```
+
+`new Num(3) > new Num(4)` should be false.
+
+```js
+assert(!(new Num(3) > new Num(4)));
+```
+
+`(new Num(5)).toString()` should return '5'
+
+```js
+assert.equal(new Num(5).toString(), '5');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Num(n) {
+
+  return n;
+}
+```
+
+# --solutions--
+
+```js
+function Num(n) {
+  if (isNaN(n)) {
+    throw new TypeError('Not a Number');
+  }
+  if (n < 1 || n > 10) {
+    throw new TypeError('Out of range');
+  }
+
+  this._value = +n;
+}
+Num.prototype.valueOf = function() { return this._value; };
+Num.prototype.toString = function () { return this._value.toString(); };
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/department-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/department-numbers.md
new file mode 100644
index 00000000000..1117963ac08
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/department-numbers.md
@@ -0,0 +1,126 @@
+---
+id: 59f40b17e79dbf1ab720ed7a
+title: Department Numbers
+challengeType: 1
+forumTopicId: 302249
+dashedName: department-numbers
+---
+
+# --description--
+
+There is a highly organized city that has decided to assign a number to each of their departments:
+
+<ul>
+  <li>Police department</li>
+  <li>Sanitation department</li>
+  <li>Fire department</li>
+</ul>
+
+Each department can have a number between 1 and 7 (inclusive).
+
+The three department numbers are to be unique (different from each other) and must add up to the number 12.
+
+The Chief of the Police doesn't like odd numbers and wants to have an even number for his department.
+
+# --instructions--
+
+Write a program which outputs all valid combinations as an array.
+
+```js
+[2, 3, 7] [2, 4, 6] [2, 6, 4]
+[2, 7, 3] [4, 1, 7] [4, 2, 6]
+[4, 3, 5] [4, 5, 3] [4, 6, 2]
+[4, 7, 1] [6, 1, 5] [6, 2, 4]
+[6, 4, 2] [6, 5, 1]
+```
+
+# --hints--
+
+`combinations` should be a function.
+
+```js
+assert(typeof combinations === 'function');
+```
+
+`combinations([1, 2, 3], 6)` should return an Array.
+
+```js
+assert(Array.isArray(combinations([1, 2, 3], 6)));
+```
+
+`combinations([1, 2, 3, 4, 5, 6, 7], 12)` should return an array of length 14.
+
+```js
+assert(combinations(nums, total).length === len);
+```
+
+`combinations([1, 2, 3, 4, 5, 6, 7], 12)` should return all valid combinations.
+
+```js
+assert.deepEqual(combinations(nums, total), result);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const nums = [1, 2, 3, 4, 5, 6, 7];
+const total = 12;
+const len = 14;
+const result = [
+  [2, 3, 7],
+  [2, 4, 6],
+  [2, 6, 4],
+  [2, 7, 3],
+  [4, 1, 7],
+  [4, 2, 6],
+  [4, 3, 5],
+  [4, 5, 3],
+  [4, 6, 2],
+  [4, 7, 1],
+  [6, 1, 5],
+  [6, 2, 4],
+  [6, 4, 2],
+  [6, 5, 1]
+];
+```
+
+## --seed-contents--
+
+```js
+function combinations(possibleNumbers, total) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function combinations(possibleNumbers, total) {
+  let firstNumber;
+  let secondNumber;
+  let thridNumber;
+  const allCombinations = [];
+
+  for (let i = 0; i < possibleNumbers.length; i += 1) {
+    firstNumber = possibleNumbers[i];
+
+    if (firstNumber % 2 === 0) {
+      for (let j = 0; j < possibleNumbers.length; j += 1) {
+        secondNumber = possibleNumbers[j];
+
+        if (j !== i && firstNumber + secondNumber <= total) {
+          thridNumber = total - firstNumber - secondNumber;
+
+          if (thridNumber !== firstNumber && thridNumber !== secondNumber && possibleNumbers.includes(thridNumber)) {
+            allCombinations.push([firstNumber, secondNumber, thridNumber]);
+          }
+        }
+      }
+    }
+  }
+  return allCombinations;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/discordian-date.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/discordian-date.md
new file mode 100644
index 00000000000..bff43ccc37e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/discordian-date.md
@@ -0,0 +1,212 @@
+---
+id: 59f4eafba0343628bb682785
+title: Discordian date
+challengeType: 1
+forumTopicId: 302250
+dashedName: discordian-date
+---
+
+# --description--
+The Gregorian calendar is a solar calendar with 12 months of 28-31 days each. A week consists of seven days, and there are 52 weeks and 1 day per year. The year consists of 365 days with a leap day added to February every leap year. A leap year occurs every four years, except for the first three centurial years of every 400 years.
+
+The <a href="http://www.rosettacode.org/wiki/Discordian_date" target="_blank" rel="noopener noreferrer nofollow">Discordian calendar</a> is aligned with the Gregorian calendar, and begins on January 1. The week consists of five days, and there are 73 weeks per year. The year also consists of 365 days, with an extra day inserted between Chaos 59 and Chaos 60 every leap year.
+
+The months, weekdays, Apostle events, and Holidays in the Discordian calendar are given by:
+
+Seasons: `'Chaos', 'Discord', 'Confusion', 'Bureaucracy', 'The Aftermath'`.
+
+Weekdays: `'Sweetmorn', 'Boomtime', 'Pungenday', 'Prickle-Prickle', 'Setting Orange'`.
+
+Apostle: `'Mungday', 'Mojoday', 'Syaday', 'Zaraday', 'Maladay'`.
+
+Holidays: `'Chaoflux', 'Discoflux', 'Confuflux', 'Bureflux', 'Afflux'`.
+
+# --instructions--
+
+Convert a given date from the Gregorian calendar to the Discordian calendar.
+
+Note that the day Chaos 1, 3188 YOLD in the Discordian calendar is the day January 1, 2022 in the Gregorian calendar.
+
+# --hints--
+
+`discordianDate` should be a function.
+
+```js
+assert(typeof discordianDate === 'function');
+```
+
+`discordianDate(new Date(2010, 6, 22))` should return `"Pungenday, the 57th day of Confusion in the YOLD 3176"`.
+
+```js
+assert(
+  discordianDate(new Date(2010, 6, 22)) ===
+    'Pungenday, the 57th day of Confusion in the YOLD 3176'
+);
+```
+
+`discordianDate(new Date(2012, 1, 28))` should return `"Prickle-Prickle, the 59th day of Chaos in the YOLD 3178"`.
+
+```js
+assert(
+  discordianDate(new Date(2012, 1, 28)) ===
+    'Prickle-Prickle, the 59th day of Chaos in the YOLD 3178'
+);
+```
+
+`discordianDate(new Date(2012, 1, 29))` should return `"Setting Orange, the 60th day of Chaos in the YOLD 3178. Celebrate St. Tib\'s Day!"`.
+
+```js
+assert(
+  discordianDate(new Date(2012, 1, 29)) ===
+    "Setting Orange, the 60th day of Chaos in the YOLD 3178. Celebrate St. Tib's Day!"
+);
+```
+
+`discordianDate(new Date(2012, 2, 1))` should return `"Setting Orange, the 60th day of Chaos in the YOLD 3178"`.
+
+```js
+assert(
+  discordianDate(new Date(2012, 2, 1)) ===
+    'Setting Orange, the 60th day of Chaos in the YOLD 3178'
+);
+```
+
+`discordianDate(new Date(2010, 0, 5))` should return `"Setting Orange, the 5th day of Chaos in the YOLD 3176. Celebrate Mungday!"`.
+
+```js
+assert(
+  discordianDate(new Date(2010, 0, 5)) ===
+    'Setting Orange, the 5th day of Chaos in the YOLD 3176. Celebrate Mungday!'
+);
+```
+
+`discordianDate(new Date(2011, 4, 3))` should return `"Pungenday, the 50th day of Discord in the YOLD 3177. Celebrate Discoflux!"`.
+
+```js
+assert(
+  discordianDate(new Date(2011, 4, 3)) ===
+    'Pungenday, the 50th day of Discord in the YOLD 3177. Celebrate Discoflux!'
+);
+```
+
+`discordianDate(new Date(2015, 9, 19))` should return `"Boomtime, the 73rd day of Bureaucracy in the YOLD 3181"`.
+
+```js
+assert(
+  discordianDate(new Date(2015, 9, 19)) ===
+    'Boomtime, the 73rd day of Bureaucracy in the YOLD 3181'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function discordianDate(date) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+/**
+ * All Hail Discordia! - this script prints Discordian date using system date.
+ *
+ * lang: JavaScript
+ * author: jklu
+ * contributors: JamesMcGuigan
+ *
+ * source: https://rosettacode.org/wiki/Discordian_date#JavaScript
+ */
+const seasons = [
+  'Chaos', 'Discord', 'Confusion',
+  'Bureaucracy', 'The Aftermath'
+];
+const weekday = [
+  'Sweetmorn', 'Boomtime', 'Pungenday',
+  'Prickle-Prickle', 'Setting Orange'
+];
+
+const apostle = [
+  'Mungday', 'Mojoday', 'Syaday',
+  'Zaraday', 'Maladay'
+];
+
+const holiday = [
+  'Chaoflux', 'Discoflux', 'Confuflux',
+  'Bureflux', 'Afflux'
+];
+
+
+Date.prototype.isLeapYear = function() {
+  const year = this.getFullYear();
+  if ((year & 3) !== 0) { return false; }
+  return ((year % 100) !== 0 || (year % 400) === 0);
+};
+
+// Get Day of Year
+Date.prototype.getDOY = function() {
+  const dayCount = [0, 31, 59, 90, 120, 151, 181, 212, 243, 273, 304, 334];
+  const mn = this.getMonth();
+  const dn = this.getDate();
+  let dayOfYear = dayCount[mn] + dn;
+  if (mn > 1 && this.isLeapYear()) { dayOfYear += 1; }
+  return dayOfYear;
+};
+
+Date.prototype.isToday = function() {
+  const today = new Date();
+  return this.getDate() === today.getDate()
+      && this.getMonth() === today.getMonth()
+      && this.getFullYear() === today.getFullYear()
+  ;
+};
+
+function discordianDate(date) {
+  if (!date) { date = new Date(); }
+
+  const y = date.getFullYear();
+  const yold = y + 1166;
+  let dayOfYear = date.getDOY();
+  let celebrateHoliday = null;
+
+  if (date.isLeapYear()) {
+    if (dayOfYear === 60) {
+      celebrateHoliday = 'St. Tib\'s Day';
+    }
+    else if (dayOfYear > 60) {
+      dayOfYear--;
+    }
+  }
+  dayOfYear--;
+
+  const divDay = Math.floor(dayOfYear / 73);
+
+  const seasonDay = (dayOfYear % 73) + 1;
+  if (seasonDay === 5) {
+    celebrateHoliday = apostle[divDay];
+  }
+  if (seasonDay === 50) {
+    celebrateHoliday = holiday[divDay];
+  }
+
+  const season = seasons[divDay];
+  const dayOfWeek = weekday[dayOfYear % 5];
+
+  const nth = (seasonDay % 10 === 1) ? 'st'
+          : (seasonDay % 10 === 2) ? 'nd'
+          : (seasonDay % 10 === 3) ? 'rd'
+                                  : 'th';
+
+  return ''
+         + dayOfWeek
+         + ', the ' + seasonDay + nth
+         + ' day of ' + season
+         + ' in the YOLD ' + yold
+         + (celebrateHoliday ? '. Celebrate ' + celebrateHoliday + '!' : '')
+    ;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/dot-product.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/dot-product.md
new file mode 100644
index 00000000000..0e0fb5c838a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/dot-product.md
@@ -0,0 +1,75 @@
+---
+id: 5a23c84252665b21eecc7e1e
+title: Dot product
+challengeType: 1
+forumTopicId: 302251
+dashedName: dot-product
+---
+
+# --description--
+
+Create a function, to compute the **dot product**, also known as the **scalar product** of two vectors.
+
+# --hints--
+
+`dotProduct` should be a function.
+
+```js
+assert(typeof dotProduct == 'function');
+```
+
+`dotProduct([1, 3, -5], [4, -2, -1])` should return a number.
+
+```js
+assert(typeof dotProduct([1, 3, -5], [4, -2, -1]) == 'number');
+```
+
+`dotProduct([1, 3, -5], [4, -2, -1])` should return `3`.
+
+```js
+assert.equal(dotProduct([1, 3, -5], [4, -2, -1]), 3);
+```
+
+`dotProduct([1, 2, 3, 4, 5], [6, 7, 8, 9, 10])` should return `130`.
+
+```js
+assert.equal(dotProduct([1, 2, 3, 4, 5], [6, 7, 8, 9, 10]), 130);
+```
+
+`dotProduct([5, 4, 3, 2], [7, 8, 9, 6])` should return `106`.
+
+```js
+assert.equal(dotProduct([5, 4, 3, 2], [7, 8, 9, 6]), 106);
+```
+
+`dotProduct([-5, 4, -3, 2], [-7, -8, 9, -6])` should return `-36`.
+
+```js
+assert.equal(dotProduct([-5, 4, -3, 2], [-7, -8, 9, -6]), -36);
+```
+
+`dotProduct([17, 27, 34, 43, 15], [62, 73, 48, 95, 110])` should return `10392`.
+
+```js
+assert.equal(dotProduct([17, 27, 34, 43, 15], [62, 73, 48, 95, 110]), 10392);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function dotProduct(ary1, ary2) {
+
+}
+```
+
+# --solutions--
+
+```js
+function dotProduct(ary1, ary2) {
+  var dotprod = 0;
+  for (var i = 0; i < ary1.length; i++) dotprod += ary1[i] * ary2[i];
+  return dotprod;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/element-wise-operations.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/element-wise-operations.md
new file mode 100644
index 00000000000..8f4b6d005a7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/element-wise-operations.md
@@ -0,0 +1,214 @@
+---
+id: 599c333915e0ea32d04d4bec
+title: Element-wise operations
+challengeType: 1
+forumTopicId: 302252
+dashedName: element-wise-operations
+---
+
+# --description--
+
+Implement basic element-wise matrix-matrix and scalar-matrix operations.
+
+**Implement:**
+
+<ul>
+  <li>addition</li>
+  <li>subtraction</li>
+  <li>multiplication</li>
+  <li>division</li>
+  <li>exponentiation</li>
+</ul>
+
+The first parameter will be the operation to be performed, for example, "m_add" for matrix addition and "s_add" for scalar addition. The second and third parameters will be the matrices on which the operations are to be performed.
+
+# --hints--
+
+`operation` should be a function.
+
+```js
+assert(typeof operation === 'function');
+```
+
+`operation("m_add",[[1,2],[3,4]],[[1,2],[3,4]])` should return `[[2,4],[6,8]]`.
+
+```js
+assert.deepEqual(
+  operation(
+    'm_add',
+    [
+      [1, 2],
+      [3, 4]
+    ],
+    [
+      [1, 2],
+      [3, 4]
+    ]
+  ),
+  [
+    [2, 4],
+    [6, 8]
+  ]
+);
+```
+
+`operation("s_add",[[1,2],[3,4]],2)` should return `[[3,4],[5,6]]`.
+
+```js
+assert.deepEqual(
+  operation(
+    's_add',
+    [
+      [1, 2],
+      [3, 4]
+    ],
+    2
+  ),
+  [
+    [3, 4],
+    [5, 6]
+  ]
+);
+```
+
+`operation("m_sub",[[1,2],[3,4]],[[1,2],[3,4]])` should return `[[0,0],[0,0]]`.
+
+```js
+assert.deepEqual(
+  operation(
+    'm_sub',
+    [
+      [1, 2],
+      [3, 4]
+    ],
+    [
+      [1, 2],
+      [3, 4]
+    ]
+  ),
+  [
+    [0, 0],
+    [0, 0]
+  ]
+);
+```
+
+`operation("m_mult",[[1,2],[3,4]],[[1,2],[3,4]])` should return `[[1,4],[9,16]]`.
+
+```js
+assert.deepEqual(
+  operation(
+    'm_mult',
+    [
+      [1, 2],
+      [3, 4]
+    ],
+    [
+      [1, 2],
+      [3, 4]
+    ]
+  ),
+  [
+    [1, 4],
+    [9, 16]
+  ]
+);
+```
+
+`operation("m_div",[[1,2],[3,4]],[[1,2],[3,4]])` should return `[[1,1],[1,1]]`.
+
+```js
+assert.deepEqual(
+  operation(
+    'm_div',
+    [
+      [1, 2],
+      [3, 4]
+    ],
+    [
+      [1, 2],
+      [3, 4]
+    ]
+  ),
+  [
+    [1, 1],
+    [1, 1]
+  ]
+);
+```
+
+`operation("m_exp",[[1,2],[3,4]],[[1,2],[3,4]])` should return `[[1,4],[27,256]]`.
+
+```js
+assert.deepEqual(
+  operation(
+    'm_exp',
+    [
+      [1, 2],
+      [3, 4]
+    ],
+    [
+      [1, 2],
+      [3, 4]
+    ]
+  ),
+  [
+    [1, 4],
+    [27, 256]
+  ]
+);
+```
+
+`operation("m_add",[[1,2,3,4],[5,6,7,8]],[[9,10,11,12],[13,14,15,16]])` should return `[[10,12,14,16],[18,20,22,24]]`.
+
+```js
+assert.deepEqual(
+  operation(
+    'm_add',
+    [
+      [1, 2, 3, 4],
+      [5, 6, 7, 8]
+    ],
+    [
+      [9, 10, 11, 12],
+      [13, 14, 15, 16]
+    ]
+  ),
+  [
+    [10, 12, 14, 16],
+    [18, 20, 22, 24]
+  ]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function operation(op, arr1, arr2) {
+
+}
+```
+
+# --solutions--
+
+```js
+function operation(op, arr1, arr2) {
+  const ops = {
+    add: ((a, b) => a + b),
+    sub: ((a, b) => a - b),
+    mult: ((a, b) => a * b),
+    div: ((a, b) => a / b),
+    exp: ((a, b) => Math.pow(a, b))
+  };
+  const ifm = op.startsWith('m');
+  const doOp = ops[op.substring(2)];
+  for (let i = 0; i < arr1.length; i++) {
+    for (let j = 0; j < arr1[0].length; j++) {
+      arr1[i][j] = doOp(arr1[i][j], (ifm) ? (arr2[i][j]) : (arr2));
+    }
+  }
+  return arr1;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/emirp-primes.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/emirp-primes.md
new file mode 100644
index 00000000000..97240396a41
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/emirp-primes.md
@@ -0,0 +1,138 @@
+---
+id: 599d0ba974141b0f508b37d5
+title: Emirp primes
+challengeType: 1
+forumTopicId: 302253
+dashedName: emirp-primes
+---
+
+# --description--
+
+An emirp (**prime** spelled backwards) are primes that when reversed (in their decimal representation) are a different prime.
+
+# --instructions--
+
+Write a function that:
+
+<ul>
+  <li>Shows the first <code>n</code> emirp numbers.</li>
+  <li>Shows the emirp numbers in a range.</li>
+  <li>Shows the number of emirps in a range.</li>
+  <li>Shows the <code>n<sup>th</sup></code> emirp number.</li>
+</ul>
+
+The function should accept two parameters. The first will receive `n` or the range as an array. The second will receive a boolean, that specifies if the function returns the emirps as an array or a single number (the number of primes in the range or the <code>n<sup>th</sup></code> prime). According to the parameters the function should return an array or a number.
+
+# --hints--
+
+`emirps` should be a function.
+
+```js
+assert(typeof emirps === 'function');
+```
+
+`emirps(20,true)` should return `[13,17,31,37,71,73,79,97,107,113,149,157,167,179,199,311,337,347,359,389]`
+
+```js
+assert.deepEqual(emirps(20, true), [
+  13,
+  17,
+  31,
+  37,
+  71,
+  73,
+  79,
+  97,
+  107,
+  113,
+  149,
+  157,
+  167,
+  179,
+  199,
+  311,
+  337,
+  347,
+  359,
+  389
+]);
+```
+
+`emirps(1000)` should return `70529`
+
+```js
+assert.deepEqual(emirps(1000), 70529);
+```
+
+`emirps([7700,8000],true)` should return `[7717,7757,7817,7841,7867,7879,7901,7927,7949,7951,7963]`
+
+```js
+assert.deepEqual(emirps([7700, 8000], true), [
+  7717,
+  7757,
+  7817,
+  7841,
+  7867,
+  7879,
+  7901,
+  7927,
+  7949,
+  7951,
+  7963
+]);
+```
+
+`emirps([7700,8000],false)` should return `11`
+
+```js
+assert.deepEqual(emirps([7700, 8000], false), 11);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function emirps(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function emirps(num, showEmirps)
+{
+  const is_prime = function(n)
+    {
+    if (!(n % 2) || !(n % 3)) return false;
+    let p = 1;
+    while (p * p < n)
+                    { if (n % (p += 4) == 0 || n % (p += 2) == 0)
+                            { return false; } }
+    return true;
+  };
+  const is_emirp = function(n) {
+    const r = parseInt(n.toString().split('').reverse().join(''));
+    return r != n && is_prime(n) && is_prime(r);
+  };
+
+  let i,
+    arr = [];
+  if (typeof num === 'number') {
+    for (i = 0; arr.length < num; i++) if (is_emirp(i)) arr.push(i);
+    // first x emirps
+    if (showEmirps) return arr;
+    // xth emirp
+    return arr.pop();
+  }
+
+  if (Array.isArray(num)) {
+    for (i = num[0]; i <= num[1]; i++) if (is_emirp(i)) arr.push(i);
+    // emirps between x .. y
+    if (showEmirps) return arr;
+    // number of emirps between x .. y
+    return arr.length;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/entropy.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/entropy.md
new file mode 100644
index 00000000000..fa596bd4891
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/entropy.md
@@ -0,0 +1,96 @@
+---
+id: 599d15309e88c813a40baf58
+title: Entropy
+challengeType: 1
+forumTopicId: 302254
+dashedName: entropy
+---
+
+# --description--
+
+Calculate the Shannon entropy H of a given input string.
+
+Given the discreet random variable $X$ that is a string of $N$ "symbols" (total characters) consisting of $n$ different characters (n=2 for binary), the Shannon entropy of X in bits/symbol is:
+
+$H_2(X) = -\\sum\_{i=1}^n \\frac{count_i}{N} \\log_2 \\left(\\frac{count_i}{N}\\right)$
+
+where $count_i$ is the count of character $n_i$.
+
+# --hints--
+
+`entropy` should be a function.
+
+```js
+assert(typeof entropy === 'function');
+```
+
+`entropy("0")` should return `0`
+
+```js
+assert.equal(entropy('0'), 0);
+```
+
+`entropy("01")` should return `1`
+
+```js
+assert.equal(entropy('01'), 1);
+```
+
+`entropy("0123")` should return `2`
+
+```js
+assert.equal(entropy('0123'), 2);
+```
+
+`entropy("01234567")` should return `3`
+
+```js
+assert.equal(entropy('01234567'), 3);
+```
+
+`entropy("0123456789abcdef")` should return `4`
+
+```js
+assert.equal(entropy('0123456789abcdef'), 4);
+```
+
+`entropy("1223334444")` should return `1.8464393446710154`
+
+```js
+assert.equal(entropy('1223334444'), 1.8464393446710154);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function entropy(s) {
+
+}
+```
+
+# --solutions--
+
+```js
+function entropy(s) {
+    // Create a dictionary of character frequencies and iterate over it.
+  function process(s, evaluator) {
+    let h = Object.create(null),
+      k;
+    s.split('').forEach(c => {
+      h[c] && h[c]++ || (h[c] = 1); });
+    if (evaluator) for (k in h) evaluator(k, h[k]);
+    return h;
+  }
+    // Measure the entropy of a string in bits per symbol.
+
+  let sum = 0,
+    len = s.length;
+  process(s, (k, f) => {
+    const p = f / len;
+    sum -= p * Math.log(p) / Math.log(2);
+  });
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/equilibrium-index.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/equilibrium-index.md
new file mode 100644
index 00000000000..2076d7d75b0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/equilibrium-index.md
@@ -0,0 +1,130 @@
+---
+id: 5987fd532b954e0f21b5d3f6
+title: Equilibrium index
+challengeType: 1
+forumTopicId: 302255
+dashedName: equilibrium-index
+---
+
+# --description--
+
+An equilibrium index of a sequence is an index into the sequence such that the sum of elements at lower indices is equal to the sum of elements at higher indices.
+
+For example, in a sequence $A$:
+
+<ul style='list-style: none;'>
+  <li><big>$A_0 = -7$</big></li>
+  <li><big>$A_1 =  1$</big></li>
+  <li><big>$A_2 =  5$</big></li>
+  <li><big>$A_3 =  2$</big></li>
+  <li><big>$A_4 = -4$</big></li>
+  <li><big>$A_5 =  3$</big></li>
+  <li><big>$A_6 =  0$</big></li>
+</ul>
+
+`3` is an equilibrium index, because:
+
+<ul style='list-style: none;'>
+  <li><big>$A_0 + A_1 + A_2 = A_4 + A_5 + A_6$</big></li>
+</ul>
+
+`6` is also an equilibrium index, because:
+
+<ul style='list-style: none;'>
+  <li><big>$A_0 + A_1 + A_2 + A_3 + A_4 + A_5 = 0$</big></li>
+</ul>
+
+(sum of zero elements is zero)
+
+`7` is not an equilibrium index, because it is not a valid index of sequence $A$.
+
+# --instructions--
+
+Write a function that, given a sequence, returns its equilibrium indices (if any).
+
+Assume that the sequence may be very long.
+
+# --hints--
+
+`equilibrium` should be a function.
+
+```js
+assert(typeof equilibrium === 'function');
+```
+
+`equilibrium([-7, 1, 5, 2, -4, 3, 0])` should return `[3,6]`.
+
+```js
+assert.deepEqual(equilibrium(equilibriumTests[0]), ans[0]);
+```
+
+`equilibrium([2, 4, 6])` should return `[]`.
+
+```js
+assert.deepEqual(equilibrium(equilibriumTests[1]), ans[1]);
+```
+
+`equilibrium([2, 9, 2])` should return `[1]`.
+
+```js
+assert.deepEqual(equilibrium(equilibriumTests[2]), ans[2]);
+```
+
+`equilibrium([1, -1, 1, -1, 1, -1, 1])` should return `[0,1,2,3,4,5,6]`.
+
+```js
+assert.deepEqual(equilibrium(equilibriumTests[3]), ans[3]);
+```
+
+`equilibrium([1])` should return `[0]`.
+
+```js
+assert.deepEqual(equilibrium(equilibriumTests[4]), ans[4]);
+```
+
+`equilibrium([])` should return `[]`.
+
+```js
+assert.deepEqual(equilibrium(equilibriumTests[5]), ans[5]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const equilibriumTests =
+  [[-7, 1, 5, 2, -4, 3, 0], // 3, 6
+  [2, 4, 6], // empty
+  [2, 9, 2], // 1
+  [1, -1, 1, -1, 1, -1, 1], // 0,1,2,3,4,5,6
+  [1], // 0
+  [] // empty
+  ];
+const ans = [[3, 6], [], [1], [0, 1, 2, 3, 4, 5, 6], [0], []];
+```
+
+## --seed-contents--
+
+```js
+function equilibrium(a) {
+
+}
+```
+
+# --solutions--
+
+```js
+function equilibrium(a) {
+  let N = a.length,
+    i,
+    l = [],
+    r = [],
+    e = [];
+  for (l[0] = a[0], r[N - 1] = a[N - 1], i = 1; i < N; i++)
+    { l[i] = l[i - 1] + a[i], r[N - i - 1] = r[N - i] + a[N - i - 1]; }
+  for (i = 0; i < N; i++)
+    { if (l[i] === r[i]) e.push(i); }
+  return e;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/ethiopian-multiplication.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/ethiopian-multiplication.md
new file mode 100644
index 00000000000..a46d599aa1b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/ethiopian-multiplication.md
@@ -0,0 +1,156 @@
+---
+id: 599d1566a02b571412643b84
+title: Ethiopian multiplication
+challengeType: 1
+forumTopicId: 302257
+dashedName: ethiopian-multiplication
+---
+
+# --description--
+
+Ethiopian multiplication is a method of multiplying integers using only addition, doubling, and halving.
+
+**Method:**
+
+<ol>
+  <li>Take two numbers to be multiplied and write them down at the top of two columns</li>
+  <li>In the left-hand column repeatedly halve the last number, discarding any remainders, and write the result below the last in the same column, until you write a value of <code>1</code></li>
+  <li>In the right-hand column repeatedly double the last number and write the result below. stop when you add a result in the same row as where the left hand column shows <code>1</code></li>
+  <li>Examine the table produced and discard any row where the value in the left column is even</li>
+  <li>Sum the values in the right-hand column that remain to produce the result of multiplying the original two numbers together</li>
+</ol>
+
+**For example:** `17 × 34`
+
+<pre>17   34
+</pre>
+
+Halving the first column:
+
+<pre>17   34
+8
+4
+2
+1
+</pre>
+
+Doubling the second column:
+
+<pre>17   34
+8    68
+4   136
+2   272
+1   544
+</pre>
+
+Strike-out rows whose first cell is even:
+
+<pre>17   34
+8    <strike>68</strike>
+4   <strike>136</strike>
+2   <strike>272</strike>
+1   544
+</pre>
+
+Sum the remaining numbers in the right-hand column:
+
+<!-- markdownlint-disable MD003 -->
+
+<pre>17   34
+8    --
+4   ---
+2   ---
+1   544
+   ====
+    578
+</pre>
+
+<!-- markdownlint-enable MD003 -->
+
+So `17` multiplied by `34`, by the Ethiopian method is `578`.
+
+# --instructions--
+
+The task is to define three named functions/methods/procedures/subroutines:
+
+<ol>
+  <li>one to halve an integer,</li>
+  <li>one to double an integer, and</li>
+  <li>one to state if an integer is even</li>
+</ol>
+
+Use these functions to create a function that does Ethiopian multiplication.
+
+<!-- markdownlint-disable MD046-->
+
+# --hints--
+
+`eth_mult` should be a function.
+
+```js
+assert(typeof eth_mult === 'function');
+```
+
+`eth_mult(17,34)` should return `578`.
+
+```js
+assert.equal(eth_mult(17, 34), 578);
+```
+
+`eth_mult(23,46)` should return `1058`.
+
+```js
+assert.equal(eth_mult(23, 46), 1058);
+```
+
+`eth_mult(12,27)` should return `324`.
+
+```js
+assert.equal(eth_mult(12, 27), 324);
+```
+
+`eth_mult(56,98)` should return `5488`.
+
+```js
+assert.equal(eth_mult(56, 98), 5488);
+```
+
+`eth_mult(63,74)` should return `4662`.
+
+```js
+assert.equal(eth_mult(63, 74), 4662);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function eth_mult(a, b) {
+
+}
+```
+
+# --solutions--
+
+```js
+function eth_mult(a, b) {
+  let sum = 0; a = [a]; b = [b];
+
+  let half = a => a / 2,
+    double = a => a * 2,
+    is_even = a => a % 2 == 0;
+
+  while (a[0] !== 1) {
+    a.unshift(Math.floor(half(a[0])));
+    b.unshift(double(b[0]));
+  }
+
+  for (let i = a.length - 1; i > 0; i -= 1) {
+    if (!is_even(a[i])) {
+      sum += b[i];
+    }
+  }
+  return sum + b[0];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/euler-method.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/euler-method.md
new file mode 100644
index 00000000000..184c5a06891
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/euler-method.md
@@ -0,0 +1,152 @@
+---
+id: 59880443fb36441083c6c20e
+title: Euler method
+challengeType: 1
+forumTopicId: 302258
+dashedName: euler-method
+---
+
+# --description--
+
+Euler's method numerically approximates solutions of first-order ordinary differential equations (ODEs) with a given initial value. It is an explicit method for solving initial value problems (IVPs), as described in <a href="https://www.freecodecamp.org/news/eulers-method-explained-with-examples/" title="Euler's Method Explained with Examples" target="_blank" rel="noopener noreferrer nofollow">this article</a>.
+
+The ODE has to be provided in the following form:
+
+<ul style='list-style: none;'>
+  <li><big>$\frac{dy(t)}{dt} = f(t,y(t))$</big></li>
+</ul>
+
+with an initial value
+
+<ul style='list-style: none;'>
+  <li><big>$y(t_0) = y_0$</big></li>
+</ul>
+
+To get a numeric solution, we replace the derivative on the LHS with a finite difference approximation:
+
+<ul style='list-style: none;'>
+  <li><big>$\frac{dy(t)}{dt}  \approx \frac{y(t+h)-y(t)}{h}$</big></li>
+</ul>
+
+then solve for $y(t+h)$:
+
+<ul style='list-style: none;'>
+  <li><big>$y(t+h) \approx y(t) + h \, \frac{dy(t)}{dt}$</big></li>
+</ul>
+
+which is the same as
+
+<ul style='list-style: none;'>
+  <li><big>$y(t+h) \approx y(t) + h \, f(t,y(t))$</big></li>
+</ul>
+
+The iterative solution rule is then:
+
+<ul style='list-style: none;'>
+  <li><big>$y_{n+1} = y_n + h \, f(t_n, y_n)$</big></li>
+</ul>
+
+where $h$ is the step size, the most relevant parameter for accuracy of the solution. A smaller step size increases accuracy but also the computation cost, so it has always has to be hand-picked according to the problem at hand.
+
+**Example: Newton's Cooling Law**
+
+Newton's cooling law describes how an object of initial temperature $T(t_0) = T_0$ cools down in an environment of temperature $T_R$:
+
+<ul style='list-style: none;'>
+  <li><big>$\frac{dT(t)}{dt} = -k \, \Delta T$</big></li>
+</ul>
+
+or
+
+<ul style='list-style: none;'>
+  <li><big>$\frac{dT(t)}{dt} = -k \, (T(t) - T_R)$</big></li>
+</ul>
+
+It says that the cooling rate $\\frac{dT(t)}{dt}$ of the object is proportional to the current temperature difference $\\Delta T = (T(t) - T_R)$ to the surrounding environment.
+
+The analytical solution, which we will compare to the numerical approximation, is
+
+<ul style='list-style: none;'>
+  <li><big>$T(t) = T_R + (T_0 - T_R) \; e^{-k t}$</big></li>
+</ul>
+
+# --instructions--
+
+Implement a routine of Euler's method and then use it to solve the given example of Newton's cooling law for three different step sizes of:
+
+<ul>
+  <li><code>2 s</code></li>
+  <li><code>5 s</code> and</li>
+  <li><code>10 s</code></li>
+</ul>
+
+and compare with the analytical solution.
+
+**Initial values:**
+
+<ul>
+  <li>initial temperature <big>$T_0$</big> shall be <code>100 °C</code></li>
+  <li>room temperature <big>$T_R$</big> shall be <code>20 °C</code></li>
+  <li>cooling constant <big>$k$</big> shall be <code>0.07</code></li>
+  <li>time interval to calculate shall be from <code>0 s</code> to <code>100 s</code></li>
+</ul>
+
+First parameter to the function is initial time, second parameter is initial temperature, third parameter is elapsed time and fourth parameter is step size.
+
+# --hints--
+
+`eulersMethod` should be a function.
+
+```js
+assert(typeof eulersMethod === 'function');
+```
+
+`eulersMethod(0, 100, 100, 2)` should return a number.
+
+```js
+assert(typeof eulersMethod(0, 100, 100, 2) === 'number');
+```
+
+`eulersMethod(0, 100, 100, 2)` should return 20.0424631833732.
+
+```js
+assert.equal(eulersMethod(0, 100, 100, 2), 20.0424631833732);
+```
+
+`eulersMethod(0, 100, 100, 5)` should return 20.01449963666907.
+
+```js
+assert.equal(eulersMethod(0, 100, 100, 5), 20.01449963666907);
+```
+
+`eulersMethod(0, 100, 100, 10)` should return 20.000472392.
+
+```js
+assert.equal(eulersMethod(0, 100, 100, 10), 20.000472392);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function eulersMethod(x1, y1, x2, h) {
+
+}
+```
+
+# --solutions--
+
+```js
+function eulersMethod(x1, y1, x2, h) {
+  let x = x1;
+  let y = y1;
+
+  while ((x < x2 && x1 < x2) || (x > x2 && x1 > x2)) {
+    y += h * (-0.07 * (y - 20));
+    x += h;
+  }
+
+  return y;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/evaluate-binomial-coefficients.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/evaluate-binomial-coefficients.md
new file mode 100644
index 00000000000..30eeec21ba6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/evaluate-binomial-coefficients.md
@@ -0,0 +1,74 @@
+---
+id: 598de241872ef8353c58a7a2
+title: Evaluate binomial coefficients
+challengeType: 1
+forumTopicId: 302259
+dashedName: evaluate-binomial-coefficients
+---
+
+# --description--
+
+Write a function to calculate the binomial coefficient for the given value of n and k.
+
+This formula is recommended:
+
+$\\binom{n}{k} = \\frac{n!}{(n-k)!k!} = \\frac{n(n-1)(n-2)\\ldots(n-k+1)}{k(k-1)(k-2)\\ldots 1}$
+
+# --hints--
+
+`binom` should be a function.
+
+```js
+assert(typeof binom === 'function');
+```
+
+`binom(5,3)` should return 10.
+
+```js
+assert.equal(binom(5, 3), 10);
+```
+
+`binom(7,2)` should return 21.
+
+```js
+assert.equal(binom(7, 2), 21);
+```
+
+`binom(10,4)` should return 210.
+
+```js
+assert.equal(binom(10, 4), 210);
+```
+
+`binom(6,1)` should return 6.
+
+```js
+assert.equal(binom(6, 1), 6);
+```
+
+`binom(12,8)` should return 495.
+
+```js
+assert.equal(binom(12, 8), 495);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function binom(n, k) {
+
+}
+```
+
+# --solutions--
+
+```js
+function binom(n, k) {
+  let coeff = 1;
+  for (let i = n - k + 1; i <= n; i++) coeff *= i;
+  for (let i = 1; i <= k; i++) coeff /= i;
+  return coeff;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/execute-a-markov-algorithm.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/execute-a-markov-algorithm.md
new file mode 100644
index 00000000000..112483733bf
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/execute-a-markov-algorithm.md
@@ -0,0 +1,178 @@
+---
+id: 59e09e6d412c5939baa02d16
+title: Execute a Markov algorithm
+challengeType: 1
+forumTopicId: 302260
+dashedName: execute-a-markov-algorithm
+---
+
+# --description--
+
+Markov Concepts are used in machine learning, because of its simple approach in data manipulation. With a set number of `rules` you can manipulate given `data` to create a desired `output`.
+
+We have added in the background:
+
+The `rules` in the form of nested array, and the `data` in the form of array, too. And the desired `outputs`.
+
+The `rules`:
+
+```js
+let rules=[
+[
+"A -> apple","B -> bag","S -> shop","T -> the",
+"the shop -> my brother","a never used -> .terminating rule"
+],
+
+[
+ "A -> apple","B -> bag","S -> .shop","T -> the",
+ "the shop -> my brother","a never used -> .terminating rule"
+],
+
+[
+ "A -> apple","WWWW -> with","Bgage -> ->.*","B -> bag",
+ "->.* -> money","W -> WW","S -> .shop","T -> the",
+ "the shop -> my brother","a never used -> .terminating rule"
+],
+
+[
+ "_+1 -> _1+","1+1 -> 11+","1! -> !1",",! -> !+","_! -> _","1*1 -> x,@y","1x -> xX",
+ "X, -> 1,1","X1 -> 1X","_x -> _X",",x -> ,X","y1 -> 1y","y_ -> _","1@1 -> x,@y",
+ "1@_ -> @_",",@_ -> !_","++ -> +","_1 -> 1","1+_ -> 1","_+_ -> "
+],
+
+[
+"A0 -> 1B","0A1 -> C01","1A1 -> C11","0B0 -> A01","1B0 -> A11",
+"B1 -> 1B","0C0 -> B01","1C0 -> B11","0C1 -> H01","1C1 -> H11"
+]
+
+];
+```
+
+The `data`:
+
+```js
+let data=[
+        "I bought a B of As from T S.",
+        "I bought a B of As from T S.",
+        "I bought a B of As W my Bgage from T S.",
+        "_1111*11111_",
+        "000000A000000"
+        ];
+```
+
+The `outputs`:
+
+```js
+let outputs=[
+    "I bought a bag of apples from my brother.",
+    "I bought a bag of apples from T shop.",
+    "I bought a bag of apples with my money from T shop.",
+    "11111111111111111111",
+    "00011H1111000"
+    ]
+```
+
+Using Markov Algorithm, change the `data` into the desired `outputs` using the `rules` provided for you.
+
+# --hints--
+
+`markov` should be a function.
+
+```js
+assert(typeof markov === 'function');
+```
+
+`markov(["A -> apple","B -> bag","S -> shop","T -> the","the shop -> my brother","a never used -> .terminating rule"],"I bought a B of As from T S.")` should return the string `I bought a bag of apples from my brother.`.
+
+```js
+assert.deepEqual(markov(rules[0], datas[0]), outputs[0]);
+```
+
+`markov(["A -> apple","B -> bag","S -> .shop","T -> the","the shop -> my brother","a never used -> .terminating rule"],"I bought a B of As from T S.")` should return the string `I bought a bag of apples from T shop.`.
+
+```js
+assert.deepEqual(markov(rules[1], datas[1]), outputs[1]);
+```
+
+`markov(["A -> apple","WWWW -> with","Bgage -> ->.*","B -> bag","->.* -> money","W -> WW","S -> .shop","T -> the","the shop -> my brother","a never used -> .terminating rule"],"I bought a B of As W my Bgage from T S.")` should return the string `I bought a bag of apples with my money from T shop.`.
+
+```js
+assert.deepEqual(markov(rules[2], datas[2]), outputs[2]);
+```
+
+`markov(["_+1 -> _1+","1+1 -> 11+","1! -> !1",",! -> !+","_! -> _","1*1 -> x,@y","1x -> xX","X, -> 1,1","X1 -> 1X","_x -> _X",",x -> ,X","y1 -> 1y","y_ -> _","1@1 -> x,@y","1@_ -> @_",",@_ -> !_","++ -> +","_1 -> 1","1+_ -> 1","_+_ -> "],"_1111*11111_")` should return the string `11111111111111111111`.
+
+```js
+assert.deepEqual(markov(rules[3], datas[3]), outputs[3]);
+```
+
+`markov(["A0 -> 1B","0A1 -> C01","1A1 -> C11","0B0 -> A01","1B0 -> A11","B1 -> 1B","0C0 -> B01","1C0 -> B11","0C1 -> H01","1C1 -> H11"],"")` should return the string `00011H1111000`.
+
+```js
+assert.deepEqual(markov(rules[4], datas[4]), outputs[4]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+
+let rules=[["A -> apple","B -> bag","S -> shop","T -> the","the shop -> my brother","a never used -> .terminating rule"],
+            ["A -> apple","B -> bag","S -> .shop","T -> the","the shop -> my brother","a never used -> .terminating rule"],
+            ["A -> apple","WWWW -> with","Bgage -> ->.*","B -> bag","->.* -> money","W -> WW","S -> .shop","T -> the","the shop -> my brother","a never used -> .terminating rule"],
+            ["_+1 -> _1+","1+1 -> 11+","1! -> !1",",! -> !+","_! -> _","1*1 -> x,@y","1x -> xX","X, -> 1,1","X1 -> 1X","_x -> _X",",x -> ,X","y1 -> 1y","y_ -> _","1@1 -> x,@y","1@_ -> @_",",@_ -> !_","++ -> +","_1 -> 1","1+_ -> 1","_+_ -> "],
+            ["A0 -> 1B","0A1 -> C01","1A1 -> C11","0B0 -> A01","1B0 -> A11","B1 -> 1B","0C0 -> B01","1C0 -> B11","0C1 -> H01","1C1 -> H11"]];
+let datas=["I bought a B of As from T S.",
+            "I bought a B of As from T S.",
+            "I bought a B of As W my Bgage from T S.",
+            "_1111*11111_",
+            "000000A000000"];
+let outputs=["I bought a bag of apples from my brother.",
+            "I bought a bag of apples from T shop.",
+            "I bought a bag of apples with my money from T shop.",
+            "11111111111111111111",
+            "00011H1111000"]
+
+```
+
+
+## --seed-contents--
+
+```js
+function markov(rules,data) {
+
+}
+```
+
+# --solutions--
+
+```js
+function markov(rules,data) {
+    let pattern = new RegExp("^([^#]*?)\\s+->\\s+(\\.?)(.*)");
+    let origData = data;
+
+    let captures = [];
+
+    rules.forEach(function(rule){
+        let m = pattern.exec(rule);
+        for (let j = 0; j < m.length; j++)
+            m[j] = m[j + 1];
+        captures.push(m);
+    });
+
+    data = origData;
+    let copy = data;
+    for (let j = 0; j < captures.length; j++) {
+        let c = captures[j];
+        data = data.replace(c[0], c[2]);
+        if (c[1]==".")
+            break;
+        if (data!=copy) {
+            j = -1;
+            copy = data;
+        }
+    }
+    return data;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/execute-brain.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/execute-brain.md
new file mode 100644
index 00000000000..48d59d8daf9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/execute-brain.md
@@ -0,0 +1,202 @@
+---
+id: 59e0a8df964e4540d5abe599
+title: Execute Brain****
+challengeType: 1
+forumTopicId: 302261
+dashedName: execute-brain
+---
+
+# --description--
+
+Write a function to implement a Brain\*\*\*\* interpreter. The function will take a string as a parameter and should return a string as the output. More details are given below:
+
+RCBF is a set of <a href="https://rosettacode.org/wiki/Brainf***" target="_blank" rel="noopener noreferrer nofollow">Brainf\*\*\*</a> compilers and interpreters written for Rosetta Code in a variety of languages.
+
+Below are links to each of the versions of RCBF.
+
+An implementation need only properly implement the following instructions:
+
+| Command                   | Description                                                                                 |
+| ------------------------- | ------------------------------------------------------------------------------------------- |
+| <code>></code> | Move the pointer to the right                                                               |
+| <code>&lt;</code> | Move the pointer to the left                                                                |
+| <code>+</code> | Increment the memory cell under the pointer                                                 |
+| <code>-</code> | Decrement the memory cell under the pointer                                                 |
+| <code>.</code> | Output the character signified by the cell at the pointer                                   |
+| <code>,</code> | Input a character and store it in the cell at the pointer                                   |
+| <code>\[</code> | Jump past the matching <code>]</code> if the cell under the pointer is 0           |
+| <code>]</code> | Jump back to the matching <code>\[</code> if the cell under the pointer is nonzero |
+
+Any cell size is allowed, EOF (*E*nd-*O*-*F*ile) support is optional, as is whether you have bounded or unbounded memory.
+
+# --hints--
+
+`brain(bye)` should return a string
+
+```js
+assert(typeof brain(bye) === 'string');
+```
+
+`brain("++++++[>++++++++++<-]>+++++.")` should return "A"
+
+```js
+assert.equal(brain('++++++[>++++++++++<-]>+++++.'), 'A');
+```
+
+`brain(bye)` should return `Goodbye, World!\r\n`
+
+```js
+assert.equal(brain(bye), 'Goodbye, World!\r\n');
+```
+
+`brain(hello)` should return `Hello World!\n`
+
+```js
+assert.equal(brain(hello), 'Hello World!\n');
+```
+
+`brain(fib)` should return `1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89`
+
+```js
+assert.equal(brain(fib), '1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89');
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+let fib=`+
+
+++
+
++++
+
+++++
+
++>+>>
+
+>>++++
+
++++++++
+
+++++++++
+
++++++++++
+
+++++++++++
+
+++++++>++++
+
+++++++++++++
+
++++++++++++++
+
++++<<<<<<[>[>>
+
+>>>>+>+<<<<<<<-
+
+]>>>>>>>[<<<<<<<
+
++>>>>>>>-]<[>++++
+
+++++++[-<-[>>+>+<<
+
+<-]>>>[<<<+>>>-]+<[
+
+>[-]<[-]]>[<<[>>>+<<
+
+<-]>>[-]]<<]>>>[>>+>+
+
+<<<-]>>>[<<<+>>>-]+<[>
+
+[-]<[-]]>[<<+>>[-]]<<<<
+
+<<<]>>>>>[++++++++++++++
+
++++++++++++++++++++++++++
+
++++++++++.[-]]++++++++++<[
+
+->-<]>+++++++++++++++++++++
+
++++++++++++++++++++++++++++.
+
+[-]<<<<<<<<<<<<[>>>+>+<<<<-]>
+
+>>>[<<<<+>>>>-]<-[>>.>.<<<[-]]
+
+<<[>>+>+<<<-]>>>[<<<+>>>-]<<[<+
+
+>-]>[<+>-]<<<-]`;
+let hello='++++++++[>++++[>++>+++>+++>+<<<<-]>+>+>->>+[<]<-]>>.>---.+++++++..+++.>>.<-.<.+++.------.--------.>>+.>++.'
+let bye='++++++++++[>+>+++>++++>+++++++>++++++++>+++++++++>++++++++++>+++++++++++>++++++++++++<<<<<<<<<-]>>>>+.>>>>+..<.<++++++++.>>>+.<<+.<<<<++++.<++.>>>+++++++.>>>.+++.<+++++++.--------.<<<<<+.<+++.---.';
+```
+
+## --seed-contents--
+
+```js
+function brain(prog) {
+
+}
+```
+
+# --solutions--
+
+```js
+function brain(prog){
+  var output="";
+    var code; // formatted code
+  var ip = 0; // current instruction within code
+  var nest = 0; // current bracket nesting (for Out button)
+  var ahead = []; // locations of matching brackets
+
+  var data = [0]; // data array (mod by +, -)
+  var dp = 0; // index into data (mod by <, >)
+
+  var inp = 0; // current input character (fetch with ,)
+  var quit = 0;
+    var commands = {
+    '>':function() { if (++dp >= data.length) data[dp]=0 },
+    '<':function() { if (--dp < 0) quit++ },
+    '+':function() { ++data[dp] },
+    '-':function() { --data[dp] },
+    '[':function() { if (!data[dp]) ip = ahead[ip]; else ++nest },
+    ']':function() { if ( data[dp]) ip = ahead[ip]; else --nest },
+    ',':function() {
+        var c = document.getElementById("input").value.charCodeAt(inp++);
+        data[dp] = isNaN(c) ? 0 : c; // EOF: other options are -1 or no change
+    },
+    '.':function() {
+            output+=String.fromCharCode(data[dp]);
+            /*var s = document.getElementById("output").innerHTML)
+             + String.fromCharCode(data[dp]);
+            s = s.replace(/\n/g,"<br>").replace(/ /g,"&amp;nbsp;");
+            document.getElementById("output").innerHTML = s;*/
+        },
+    };
+
+    let ar=prog.split('');
+    var st = [], back, error = -1;
+    for (ip=0; ip<ar.length; ip++) {
+        switch(ar[ip]) {
+        case '[':
+            st.push(ip);
+            break;
+        case ']':
+            if (st.length == 0) error = ip;
+            back = st.pop();
+            ahead[ip] = back;
+            ahead[back] = ip;
+            break;
+        }
+    }
+
+    for(ip=0;ip<ar.length;ip++){
+    if(commands.hasOwnProperty(ar[ip]))
+          commands[ar[ip]]();
+    }
+
+    return output;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/extensible-prime-generator.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/extensible-prime-generator.md
new file mode 100644
index 00000000000..d1f52b54af1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/extensible-prime-generator.md
@@ -0,0 +1,139 @@
+---
+id: 598ee8b91b410510ae82efef
+title: Extensible prime generator
+challengeType: 1
+forumTopicId: 302262
+dashedName: extensible-prime-generator
+---
+
+# --description--
+
+Write a generator of prime numbers, in order, that will automatically adjust to accommodate the generation of any reasonably high prime.
+
+The generator should be able to:
+
+<ul>
+  <li>Show the first <code>n</code> prime numbers</li>
+  <li>Show the prime numbers in a range</li>
+  <li>Show the number of primes in a range</li>
+  <li>Show the <code>n<sup>th</sup></code> prime number</li>
+</ul>
+
+The function should have two parameters. The first will receive `n` or the range as an array. The second will receive a boolean, that specifies if the function returns the prime numbers as an array or a single number(the number of primes in the range or the <code>n<sup>th</sup></code> prime). According to the parameters the function should return an array.
+
+# --hints--
+
+`primeGenerator` should be a function.
+
+```js
+assert(typeof primeGenerator === 'function');
+```
+
+`primeGenerator(20, true)` should return `[2, 3, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 61, 67, 71]`.
+
+```js
+assert.deepEqual(primeGenerator(20, true), [
+  2,
+  3,
+  5,
+  7,
+  11,
+  13,
+  17,
+  19,
+  23,
+  29,
+  31,
+  37,
+  41,
+  43,
+  47,
+  53,
+  59,
+  61,
+  67,
+  71
+]);
+```
+
+`primeGenerator([100, 150], true)` should return `[101, 103, 107, 109, 113, 127, 131, 137, 139, 149]`.
+
+```js
+assert.deepEqual(primeGenerator([100, 150], true), [
+  101,
+  103,
+  107,
+  109,
+  113,
+  127,
+  131,
+  137,
+  139,
+  149
+]);
+```
+
+`primeGenerator([7700, 8000], false)` should return `30`.
+
+```js
+assert.equal(primeGenerator([7700, 8000], false), 30);
+```
+
+`primeGenerator(10000, false)` should return `104729`.
+
+```js
+assert.equal(primeGenerator(10000, false), 104729);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function primeGenerator(num, showPrimes) {
+
+}
+```
+
+# --solutions--
+
+```js
+function primeGenerator(num, showPrimes) {
+  let i,
+    arr = [];
+
+  function isPrime(num) {
+    // try primes <= 16
+    if (num <= 16) { return (
+      num == 2 || num == 3 || num == 5 || num == 7 || num == 11 || num == 13
+    ); }
+    // cull multiples of 2, 3, 5 or 7
+    if (num % 2 == 0 || num % 3 == 0 || num % 5 == 0 || num % 7 == 0)
+      { return false; }
+    // cull square numbers ending in 1, 3, 7 or 9
+    for (let i = 10; i * i <= num; i += 10) {
+      if (num % (i + 1) == 0) return false;
+      if (num % (i + 3) == 0) return false;
+      if (num % (i + 7) == 0) return false;
+      if (num % (i + 9) == 0) return false;
+    }
+    return true;
+  }
+
+  if (typeof num === 'number') {
+    for (i = 0; arr.length < num; i++) if (isPrime(i)) arr.push(i);
+    // first x primes
+    if (showPrimes) return arr;
+    // xth prime
+    return arr.pop();
+  }
+
+  if (Array.isArray(num)) {
+    for (i = num[0]; i <= num[1]; i++) if (isPrime(i)) arr.push(i);
+    // primes between x .. y
+    if (showPrimes) return arr;
+    // number of primes between x .. y
+    return arr.length;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/factorial.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/factorial.md
new file mode 100644
index 00000000000..a6a6e87f1aa
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/factorial.md
@@ -0,0 +1,80 @@
+---
+id: 597b2b2a2702b44414742771
+title: Factorial
+challengeType: 1
+forumTopicId: 302263
+dashedName: factorial
+---
+
+# --description--
+
+Write a function to return the factorial of a number.
+
+Factorial of a number is given by:
+
+<pre><big>n! = n * (n-1) * (n-2) * ..... * 1</big>
+</pre>
+
+For example:
+
+<ul>
+  <li><code>3! = 3 * 2 * 1 = 6</code></li>
+  <li><code>4! = 4 * 3 * 2 * 1 = 24</code></li>
+</ul>
+
+**Note:** `0! = 1`
+
+# --hints--
+
+`factorial` should be a function.
+
+```js
+assert(typeof factorial === 'function');
+```
+
+`factorial(2)` should return a number.
+
+```js
+assert(typeof factorial(2) === 'number');
+```
+
+`factorial(3)` should return 6.
+
+```js
+assert.equal(factorial(3), 6);
+```
+
+`factorial(5)` should return 120.
+
+```js
+assert.equal(factorial(5), 120);
+```
+
+`factorial(10)` should return 3,628,800.
+
+```js
+assert.equal(factorial(10), 3628800);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function factorial(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function factorial(n) {
+  let sum = 1;
+  while (n > 1) {
+    sum *= n;
+    n--;
+  }
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/factors-of-a-mersenne-number.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/factors-of-a-mersenne-number.md
new file mode 100644
index 00000000000..23502e37435
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/factors-of-a-mersenne-number.md
@@ -0,0 +1,148 @@
+---
+id: 598eea87e5cf4b116c3ff81a
+title: Factors of a Mersenne number
+challengeType: 1
+forumTopicId: 302264
+dashedName: factors-of-a-mersenne-number
+---
+
+# --description--
+
+A Mersenne number is a number in the form of <code>2<sup>P</sup>-1</code>.
+
+If `P` is prime, the Mersenne number may be a Mersenne prime. (If `P` is not prime, the Mersenne number is also not prime.)
+
+In the search for Mersenne prime numbers it is advantageous to eliminate exponents by finding a small factor before starting a, potentially lengthy, <a href="https://rosettacode.org/wiki/Lucas-Lehmer test" target="_blank" rel="noopener noreferrer nofollow">Lucas-Lehmer test</a>.
+
+There are very efficient algorithms for determining if a number divides <code>2<sup>P</sup>-1</code> (or equivalently, if <code>2<sup>P</sup> mod (the number) = 1</code>).
+
+Some languages already have built-in implementations of this exponent-and-mod operation (called modPow or similar).
+
+The following is how to implement this modPow yourself:
+
+For example, let's compute <code>2<sup>23</sup> mod 47</code>.
+
+Convert the exponent 23 to binary, you get 10111. Starting with <code><tt>square</tt> = 1</code>, repeatedly square it.
+
+Remove the top bit of the exponent, and if it's 1 multiply `square` by the base of the exponentiation (2), then compute <code><tt>square</tt> modulo 47</code>.
+
+Use the result of the modulo from the last step as the initial value of `square` in the next step:
+
+<pre>Remove   Optional
+square        top bit  multiply by 2  mod 47
+------------  -------  -------------  ------
+1*1 = 1       1  0111  1*2 = 2           2
+2*2 = 4       0   111     no             4
+4*4 = 16      1    11  16*2 = 32        32
+32*32 = 1024  1     1  1024*2 = 2048    27
+27*27 = 729   1        729*2 = 1458      1
+</pre>
+
+Since <code>2<sup>23</sup> mod 47 = 1</code>, 47 is a factor of <code>2<sup>P</sup>-1</code>.
+
+(To see this, subtract 1 from both sides: <code>2<sup>23</sup>-1 = 0 mod 47</code>.)
+
+Since we've shown that 47 is a factor, <code>2<sup>23</sup>-1</code> is not prime.
+
+Further properties of Mersenne numbers allow us to refine the process even more.
+
+Any factor `q` of <code>2<sup>P</sup>-1</code> must be of the form `2kP+1`, `k` being a positive integer or zero. Furthermore, `q` must be `1` or `7 mod 8`.
+
+Finally any potential factor `q` must be <a href="https://rosettacode.org/wiki/Primality_by_trial_division" target="_blank" rel="noopener noreferrer nofollow">prime</a>.
+
+As in other trial division algorithms, the algorithm stops when `2kP+1 > sqrt(N)`.These primarily tests only work on Mersenne numbers where `P` is prime. For example, <code>M<sub>4</sub>=15</code> yields no factors using these techniques, but factors into 3 and 5, neither of which fit `2kP+1`.
+
+# --instructions--
+
+Using the above method find a factor of <code>2<sup>p</sup>-1</code>.
+
+# --hints--
+
+`check_mersenne` should be a function.
+
+```js
+assert(typeof check_mersenne === 'function');
+```
+
+`check_mersenne(3)` should return a string.
+
+```js
+assert(typeof check_mersenne(3) == 'string');
+```
+
+`check_mersenne(3)` should return the string `M3 = 2^3-1 is prime`.
+
+```js
+assert.equal(check_mersenne(3), 'M3 = 2^3-1 is prime');
+```
+
+`check_mersenne(23)` should return the string `M23 = 2^23-1 is composite with factor 47`.
+
+```js
+assert.equal(check_mersenne(23), 'M23 = 2^23-1 is composite with factor 47');
+```
+
+`check_mersenne(929)` should return the string `M929 = 2^929-1 is composite with factor 13007`.
+
+```js
+assert.equal(
+  check_mersenne(929),
+  'M929 = 2^929-1 is composite with factor 13007'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function check_mersenne(p) {
+
+}
+```
+
+# --solutions--
+
+```js
+function check_mersenne(p){
+    function isPrime(value){
+      for (let i=2; i < value; i++){
+        if (value % i == 0){
+          return false;
+        }
+        if (value % i != 0){
+          return true;
+         }
+      }
+    }
+
+    function trial_factor(base, exp, mod){
+      let square, bits;
+      square = 1;
+      bits = exp.toString(2).split('');
+      for (let i=0,ln=bits.length; i<ln; i++){
+        square = Math.pow(square, 2) * (bits[i] == 1 ? base : 1) % mod;
+      }
+      return (square == 1);
+    }
+
+    function mersenne_factor(p){
+      let limit, k, q;
+      limit = Math.sqrt(Math.pow(2,p) - 1);
+      k = 1;
+      while ((2*k*p - 1) < limit){
+        q = 2*k*p + 1;
+        if (isPrime(q) && (q % 8 == 1 || q % 8 == 7) && trial_factor(2,p,q)){
+          return q; // q is a factor of 2**p-1
+        }
+        k++;
+      }
+      return null;
+    }
+  let f, result;
+  result="M"+p+" = 2^"+p+"-1 is ";
+  f = mersenne_factor(p);
+  result+=f == null ? "prime" : "composite with factor "+f;
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/factors-of-an-integer.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/factors-of-an-integer.md
new file mode 100644
index 00000000000..8de06b3c4f0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/factors-of-an-integer.md
@@ -0,0 +1,74 @@
+---
+id: 597f1e7fbc206f0e9ba95dc4
+title: Factors of an integer
+challengeType: 1
+forumTopicId: 302265
+dashedName: factors-of-an-integer
+---
+
+# --description--
+
+Write a function that returns the factors of a positive integer as an array.
+
+These factors are the positive integers by which the number being factored can be divided to yield a positive integer result.
+
+# --hints--
+
+`factors` should be a function.
+
+```js
+assert(typeof factors === 'function');
+```
+
+`factors(45)` should return `[1,3,5,9,15,45]`.
+
+```js
+assert.deepEqual(factors(45), ans[0]);
+```
+
+`factors(53)` should return `[1,53]`.
+
+```js
+assert.deepEqual(factors(53), ans[1]);
+```
+
+`factors(64)` should return `[1,2,4,8,16,32,64]`.
+
+```js
+assert.deepEqual(factors(64), ans[2]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const ans=[[1,3,5,9,15,45],[1,53],[1,2,4,8,16,32,64]];
+```
+
+## --seed-contents--
+
+```js
+function factors(num) {
+
+}
+```
+
+# --solutions--
+
+```js
+function factors(num)
+{
+ let n_factors = [], i, sqr=Math.floor(Math.sqrt(num));
+
+ for (i = 1; i <=sqr ; i += 1)
+  if (num % i === 0)
+  {
+   n_factors.push(i);
+   if (num / i !== i)
+    n_factors.push(num / i);
+  }
+ n_factors.sort(function(a, b){return a - b;});
+ return n_factors;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/farey-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/farey-sequence.md
new file mode 100644
index 00000000000..f549221deb3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/farey-sequence.md
@@ -0,0 +1,109 @@
+---
+id: 59c3ec9f15068017c96eb8a3
+title: Farey sequence
+challengeType: 1
+forumTopicId: 302266
+dashedName: farey-sequence
+---
+
+# --description--
+
+The Farey sequence <code>F<sub>n</sub></code> of order `n` is the sequence of completely reduced fractions between `0` and `1` which, when in lowest terms, have denominators less than or equal to `n`, arranged in order of increasing size.
+
+The *Farey sequence* is sometimes incorrectly called a *Farey series*.
+
+Each Farey sequence:
+
+<ul>
+  <li>starts with the value  0,  denoted by the fraction  $ \frac{0}{1} $</li>
+  <li>ends with the value  1,  denoted by the fraction  $ \frac{1}{1}$.</li>
+</ul>
+
+The Farey sequences of orders `1` to `5` are:
+
+<ul>
+  <li style='list-style: none;'>${\bf\it{F}}_1 = \frac{0}{1}, \frac{1}{1}$</li>
+  <li style='list-style: none;'>${\bf\it{F}}_2 = \frac{0}{1}, \frac{1}{2}, \frac{1}{1}$</li>
+  <li style='list-style: none;'>${\bf\it{F}}_3 = \frac{0}{1}, \frac{1}{3}, \frac{1}{2}, \frac{2}{3}, \frac{1}{1}$</li>
+  <li style='list-style: none;'>${\bf\it{F}}_4 = \frac{0}{1}, \frac{1}{4}, \frac{1}{3}, \frac{1}{2}, \frac{2}{3}, \frac{3}{4}, \frac{1}{1}$</li>
+  <li style='list-style: none;'>${\bf\it{F}}_5 = \frac{0}{1}, \frac{1}{5}, \frac{1}{4}, \frac{1}{3}, \frac{2}{5}, \frac{1}{2}, \frac{3}{5}, \frac{2}{3}, \frac{3}{4}, \frac{4}{5}, \frac{1}{1}$</li>
+</ul>
+
+# --instructions--
+
+Write a function that returns the Farey sequence of order `n`. The function should have one parameter that is `n`. It should return the sequence as an array.
+
+# --hints--
+
+`farey` should be a function.
+
+```js
+assert(typeof farey === 'function');
+```
+
+`farey(3)` should return an array
+
+```js
+assert(Array.isArray(farey(3)));
+```
+
+`farey(3)` should return `["1/3","1/2","2/3"]`
+
+```js
+assert.deepEqual(farey(3), ['1/3', '1/2', '2/3']);
+```
+
+`farey(4)` should return `["1/4","1/3","1/2","2/4","2/3","3/4"]`
+
+```js
+assert.deepEqual(farey(4), ['1/4', '1/3', '1/2', '2/4', '2/3', '3/4']);
+```
+
+`farey(5)` should return `["1/5","1/4","1/3","2/5","1/2","2/4","3/5","2/3","3/4","4/5"]`
+
+```js
+assert.deepEqual(farey(5), [
+  '1/5',
+  '1/4',
+  '1/3',
+  '2/5',
+  '1/2',
+  '2/4',
+  '3/5',
+  '2/3',
+  '3/4',
+  '4/5'
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function farey(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function farey(n){
+    let farSeq=[];
+    for(let den = 1; den <= n; den++){
+        for(let num = 1; num < den; num++){
+            farSeq.push({
+                str:num+"/"+den,
+                val:num/den});
+        }
+    }
+    farSeq.sort(function(a,b){
+        return a.val-b.val;
+    });
+    farSeq=farSeq.map(function(a){
+        return a.str;
+    });
+    return farSeq;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fibonacci-n-step-number-sequences.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fibonacci-n-step-number-sequences.md
new file mode 100644
index 00000000000..540c7372b1e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fibonacci-n-step-number-sequences.md
@@ -0,0 +1,133 @@
+---
+id: 598eef80ba501f1268170e1e
+title: Fibonacci n-step number sequences
+challengeType: 1
+forumTopicId: 302267
+dashedName: fibonacci-n-step-number-sequences
+---
+
+# --description--
+
+These number series are an expansion of the ordinary Fibonacci sequence where:
+
+<ol>
+  <li>For $n = 2$ we have the Fibonacci sequence; with initial values $[1, 1]$ and $F_k^2 = F_{k-1}^2 + F_{k-2}^2$</li>
+  <li>For $n = 3$ we have the tribonacci sequence; with initial values $[1, 1, 2]$ and $F_k^3 = F_{k-1}^3 + F_{k-2}^3 + F_{k-3}^3$</li>
+  <li>For $n = 4$ we have the tetranacci sequence; with initial values $[1, 1, 2, 4]$ and $F_k^4 = F_{k-1}^4 + F_{k-2}^4 + F_{k-3}^4 + F_{k-4}^4$...</li>
+  <li>For general $n>2$ we have the Fibonacci $n$-step sequence - $F_k^n$; with initial values of the first $n$ values of the $(n-1)$'th Fibonacci $n$-step sequence $F_k^{n-1}$; and $k$'th value of this $n$'th sequence being $F_k^n = \sum_{i=1}^{(n)} {F_{k-i}^{(n)}}$</li>
+</ol>
+
+For small values of $n$, Greek numeric prefixes are sometimes used to individually name each series.
+
+Fibonacci $n$-step sequences:
+
+| $n$ | Series name | Values                                                 |
+| --- | ----------- | ------------------------------------------------------ |
+| 2   | fibonacci   | 1 1 2 3 5 8 13 21 34 55 89 144 233 377 610 ...         |
+| 3   | tribonacci  | 1 1 2 4 7 13 24 44 81 149 274 504 927 1705 3136 ...    |
+| 4   | tetranacci  | 1 1 2 4 8 15 29 56 108 208 401 773 1490 2872 5536 ...  |
+| 5   | pentanacci  | 1 1 2 4 8 16 31 61 120 236 464 912 1793 3525 6930 ...  |
+| 6   | hexanacci   | 1 1 2 4 8 16 32 63 125 248 492 976 1936 3840 7617 ...  |
+| 7   | heptanacci  | 1 1 2 4 8 16 32 64 127 253 504 1004 2000 3984 7936 ... |
+| 8   | octonacci   | 1 1 2 4 8 16 32 64 128 255 509 1016 2028 4048 8080 ... |
+| 9   | nonanacci   | 1 1 2 4 8 16 32 64 128 256 511 1021 2040 4076 8144 ... |
+| 10  | decanacci   | 1 1 2 4 8 16 32 64 128 256 512 1023 2045 4088 8172 ... |
+
+Allied sequences can be generated where the initial values are changed: The Lucas series sums the two preceding values like the fibonacci series for $n=2$ but uses $\[2, 1]$ as its initial values.
+
+# --instructions--
+
+Write a function to generate Fibonacci $n$-step number sequences and Lucas sequences. The first parameter will be $n$. The second parameter will be the number of elements to be returned. The third parameter will specify whether to output the Fibonacci sequence or the Lucas sequence. If the parameter is `"f"` then return the Fibonacci sequence and if it is `"l"`, then return the Lucas sequence. The sequences must be returned as an array.
+
+# --hints--
+
+`fib_luc` should be a function.
+
+```js
+assert(typeof fib_luc === 'function');
+```
+
+`fib_luc(2,10,"f")` should return `[1,1,2,3,5,8,13,21,34,55]`.
+
+```js
+assert.deepEqual(fib_luc(2, 10, 'f'), ans[0]);
+```
+
+`fib_luc(3,15,"f")` should return `[1,1,2,4,7,13,24,44,81,149,274,504,927,1705,3136]`.
+
+```js
+assert.deepEqual(fib_luc(3, 15, 'f'), ans[1]);
+```
+
+`fib_luc(4,15,"f")` should return `[1,1,2,4,8,15,29,56,108,208,401,773,1490,2872,5536]`.
+
+```js
+assert.deepEqual(fib_luc(4, 15, 'f'), ans[2]);
+```
+
+`fib_luc(2,10,"l")` should return `[ 2, 1, 3, 4, 7, 11, 18, 29, 47, 76]`.
+
+```js
+assert.deepEqual(fib_luc(2, 10, 'l'), ans[3]);
+```
+
+`fib_luc(3,15,"l")` should return `[ 2, 1, 3, 6, 10, 19, 35, 64, 118, 217, 399, 734, 1350, 2483, 4567 ]`.
+
+```js
+assert.deepEqual(fib_luc(3, 15, 'l'), ans[4]);
+```
+
+`fib_luc(4,15,"l")` should return `[ 2, 1, 3, 6, 12, 22, 43, 83, 160, 308, 594, 1145, 2207, 4254, 8200 ]`.
+
+```js
+assert.deepEqual(fib_luc(4, 15, 'l'), ans[5]);
+```
+
+`fib_luc(5,15,"l")` should return `[ 2, 1, 3, 6, 12, 24, 46, 91, 179, 352, 692, 1360, 2674, 5257, 10335 ]`.
+
+```js
+assert.deepEqual(fib_luc(5, 15, 'l'), ans[6]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const ans = [[1,1,2,3,5,8,13,21,34,55],
+[1,1,2,4,7,13,24,44,81,149,274,504,927,1705,3136],
+[1,1,2,4,8,15,29,56,108,208,401,773,1490,2872,5536],
+[ 2, 1, 3, 4, 7, 11, 18, 29, 47, 76],
+[ 2, 1, 3, 6, 10, 19, 35, 64, 118, 217, 399, 734, 1350, 2483, 4567 ],
+[ 2, 1, 3, 6, 12, 22, 43, 83, 160, 308, 594, 1145, 2207, 4254, 8200 ],
+[ 2, 1, 3, 6, 12, 24, 46, 91, 179, 352, 692, 1360, 2674, 5257, 10335 ]];
+```
+
+## --seed-contents--
+
+```js
+function fib_luc(n, len, w) {
+
+}
+```
+
+# --solutions--
+
+```js
+function fib_luc(n, len, w) {
+    function nacci(a, n, len) {
+        while (a.length < len) {
+            let sum = 0;
+            for (let i = Math.max(0, a.length - n); i < a.length; i++)
+                sum += a[i];
+            a.push(sum);
+        }
+        return a;
+    }
+    if(w=="f"){
+        return nacci(nacci([1,1], n, n), n, len);
+    }else{
+        return nacci(nacci([2,1], n, n), n, len);
+    }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fibonacci-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fibonacci-sequence.md
new file mode 100644
index 00000000000..4e60775b086
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fibonacci-sequence.md
@@ -0,0 +1,75 @@
+---
+id: 597f24c1dda4e70f53c79c81
+title: Fibonacci sequence
+challengeType: 1
+forumTopicId: 302268
+dashedName: fibonacci-sequence
+---
+
+# --description--
+
+Write a function to generate the <code>n<sup>th</sup></code> Fibonacci number.
+
+The <code>n<sup>th</sup></code> Fibonacci number is given by:
+
+<code>F<sub>n</sub> = F<sub>n-1</sub> + F<sub>n-2</sub></code>
+
+The first two terms of the series are 0 and 1.
+
+Hence, the series is: 0, 1, 1, 2, 3, 5, 8, 13...
+
+# --hints--
+
+`fibonacci` should be a function.
+
+```js
+assert(typeof fibonacci === 'function');
+```
+
+`fibonacci(2)` should return a number.
+
+```js
+assert(typeof fibonacci(2) == 'number');
+```
+
+`fibonacci(3)` should return 2.
+
+```js
+assert.equal(fibonacci(3), 2);
+```
+
+`fibonacci(5)` should return 5.
+
+```js
+assert.equal(fibonacci(5), 5);
+```
+
+`fibonacci(10)` should return 55.
+
+```js
+assert.equal(fibonacci(10), 55);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function fibonacci(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function fibonacci(n) {
+  let a = 0, b = 1, t;
+  while (--n >= 0) {
+    t = a;
+    a = b;
+    b += t;
+  }
+  return a;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fibonacci-word.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fibonacci-word.md
new file mode 100644
index 00000000000..464f03b61b7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fibonacci-word.md
@@ -0,0 +1,115 @@
+---
+id: 5992e222d397f00d21122931
+title: Fibonacci word
+challengeType: 1
+forumTopicId: 302269
+dashedName: fibonacci-word
+---
+
+# --description--
+
+The Fibonacci Word Sequence may be created in a manner analogous to the Fibonacci Sequence, but it focuses on iterating concatenation.
+
+<pre>Define  F_Word<sub>1</sub>  as  <strong>1</strong>
+Define  F_Word<sub>2</sub>  as  <strong>0</strong>
+Form   F_Word<sub>3</sub>  as  F_Word<sub>2</sub>   concatenated with  F_Word<sub>1</sub>   i.e.:  <strong>01</strong>
+Form   F_Word<sub>n</sub>  as  F_Word<sub>n-1</sub>  concatenated with  F_word<sub>n-2</sub>
+</pre>
+
+Entropy calculation is required in this challenge, <a href="https://www.freecodecamp.org/learn/coding-interview-prep/rosetta-code/entropy" target="_blank" rel="noopener noreferrer nofollow">as shown in this Rosetta Code challenge</a>
+
+# --instructions--
+
+Write a function to return the first `n` Fibonacci Words. The number of `n` is provided as a parameter to the function. The function should return an array of objects. The objects should be of the form: `{ N: 1, Length: 1, Entropy: 0, Word: '1' }`. `Entropy` is computed for the string `Word` and rounded to 8 decimal digits of accuracy. Note that the indices of this sequence start at `1`.
+
+# --hints--
+
+`fibWord` should be a function.
+
+```js
+assert(typeof fibWord === 'function');
+```
+
+`fibWord(5)` should return an array.
+
+```js
+assert(Array.isArray(fibWord(5)));
+```
+
+`fibWord(5)` should return `[{ N:1, Length:1, Entropy:0, Word:"1" },{ N:2, Length:1, Entropy:0, Word:"0" },{ N:3, Length:2, Entropy:1, Word:"01" },{ N:4, Length:3, Entropy:0.91829583, Word:"010" },{ N:5, Length:5, Entropy:0.97095059, Word:"01001" }]`.
+
+```js
+assert.deepEqual(fibWord(5), words5);
+```
+
+`fibWord(7)` should return `[{ N:1, Length:1, Entropy:0, Word:"1" },{ N:2, Length:1, Entropy:0, Word:"0" },{ N:3, Length:2, Entropy:1, Word:"01" },{ N:4, Length:3, Entropy:0.91829583, Word:"010" },{ N:5, Length:5, Entropy:0.97095059, Word:"01001" }, { N:6, Length:8, Entropy:0.954434, Word:'01001010' }, { N:7, Length:13, Entropy:0.9612366, Word:'0100101001001' }]`.
+
+```js
+assert.deepEqual(fibWord(7), words7);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const words5 = [
+  { N: 1, Length: 1, Entropy: 0, Word: '1' },
+  { N: 2, Length: 1, Entropy: 0, Word: '0' },
+  { N: 3, Length: 2, Entropy: 1, Word: '01' },
+  { N: 4, Length: 3, Entropy: 0.91829583, Word: '010' },
+  { N: 5, Length: 5, Entropy: 0.97095059, Word: '01001' }
+];
+
+const words7 = [
+  { N: 1, Length: 1, Entropy: 0, Word: '1' },
+  { N: 2, Length: 1, Entropy: 0, Word: '0' },
+  { N: 3, Length: 2, Entropy: 1, Word: '01' },
+  { N: 4, Length: 3, Entropy: 0.91829583, Word: '010' },
+  { N: 5, Length: 5, Entropy: 0.97095059, Word: '01001' },
+  { N: 6, Length: 8, Entropy: 0.954434, Word: '01001010' },
+  { N: 7, Length: 13, Entropy: 0.9612366, Word: '0100101001001' }
+];
+```
+
+## --seed-contents--
+
+```js
+function fibWord(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+// Round to digits
+function roundFloat(num, digits) {
+  return Math.round(num * 10.0**digits) / (10.0**digits);
+}
+
+// Entropy calculation for string with only 0 and 1
+function entropy(word) {
+  function digitEntropy(count) {
+    return count < 1 ? 0
+      : - count / word.length * Math.log2(count / word.length);
+  }
+  const numZeros = word.split('').filter(e => e === '0').length;
+  const numOnes  = word.length - numZeros;
+  return roundFloat(digitEntropy(numZeros) + digitEntropy(numOnes), 8);
+}
+
+// Compute array of Fibonacci words
+function fibWord(n) {
+  return [...Array(n).keys()]
+    .reduce((words, i) => {
+      const word = i === 0 ? "1"
+                 : i === 1 ? "0"
+                 : words[i - 1].Word + words[i - 2].Word;
+      words.push(
+        { N: i + 1, Length: word.length, Entropy: entropy(word), Word: word }
+      );
+      return words;
+    }, []);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fizzbuzz.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fizzbuzz.md
new file mode 100644
index 00000000000..400625c512e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fizzbuzz.md
@@ -0,0 +1,92 @@
+---
+id: 5e9ddb06ec35240f39657419
+title: FizzBuzz
+challengeType: 1
+forumTopicId: 385370
+dashedName: fizzbuzz
+---
+
+# --description--
+
+Write a program that generates an array of integers from 1 to 100 (inclusive). But:
+
+<ul>
+    <li>for multiples of 3, add <code>"Fizz"</code> to the array instead of the number</li>
+    <li>for multiples of 5, add <code>"Buzz"</code> to the array instead of the number</li>
+    <li>for multiples of 3 and 5, add <code>"FizzBuzz"</code> to the array instead of the number</li>
+</ul>
+
+# --instructions--
+
+Your program should return an array containing the results based on the rules above.
+
+# --hints--
+
+`fizzBuzz` should be a function.
+
+```js
+assert(typeof fizzBuzz == 'function');
+```
+
+`fizzBuzz()` should return an Array.
+
+```js
+assert(Array.isArray(fizzBuzz()) == true);
+```
+
+Numbers divisible by only 3 should return `"Fizz"`.
+
+```js
+assert.equal(fizzBuzz()[2], 'Fizz');
+```
+
+Numbers divisible by only 5 should return `"Buzz"`.
+
+```js
+assert.equal(fizzBuzz()[99], 'Buzz');
+```
+
+Numbers divisible by both 3 and 5 should return `"FizzBuzz"`.
+
+```js
+assert.equal(fizzBuzz()[89], 'FizzBuzz');
+```
+
+Numbers not divisible by either 3 or 5 should return the number itself.
+
+```js
+assert.equal(fizzBuzz()[12], 13);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function fizzBuzz() {
+
+}
+```
+
+# --solutions--
+
+```js
+function fizzBuzz() {
+    let res=[];
+    for (let i =1; i < 101; i++) {
+        if (i % 3 === 0  && i % 5 === 0) {
+            res.push("FizzBuzz");
+        }
+        else if (i % 3 === 0) {
+            res.push("Fizz");
+        }
+        else if (i % 5 === 0) {
+            res.push("Buzz");
+        } 
+        else {
+            res.push(i);
+        }
+    }
+    return res;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fractran.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fractran.md
new file mode 100644
index 00000000000..4e3daccf125
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/fractran.md
@@ -0,0 +1,139 @@
+---
+id: 5a7dad05be01840e1778a0d1
+title: Fractran
+challengeType: 1
+forumTopicId: 302270
+dashedName: fractran
+---
+
+# --description--
+
+FRACTRAN is a Turing-complete esoteric programming language invented by the mathematician John Horton Conway.
+
+A FRACTRAN program is an ordered list of positive fractions $P = (f_1, f_2, \\ldots, f_m)$, together with an initial positive integer input $n$.
+
+The program is run by updating the integer $n$ as follows:
+
+<ul>
+  <li>for the first fraction, $f_i$, in the list for which $nf_i$ is an integer, replace $n$ with $nf_i$ ;</li>
+  <li>repeat this rule until no fraction in the list produces an integer when multiplied by $n$, then halt.</li>
+</ul>
+
+Conway gave a program for primes in FRACTRAN:
+
+$\\dfrac{17}{91}$, $\\dfrac{78}{85}$, $\\dfrac{19}{51}$, $\\dfrac{23}{38}$, $\\dfrac{29}{33}$, $\\dfrac{77}{29}$, $\\dfrac{95}{23}$, $\\dfrac{77}{19}$, $\\dfrac{1}{17}$, $\\dfrac{11}{13}$, $\\dfrac{13}{11}$, $\\dfrac{15}{14}$, $\\dfrac{15}{2}$, $\\dfrac{55}{1}$
+
+Starting with $n=2$, this FRACTRAN program will change $n$ to $15=2\\times (\\frac{15}{2})$, then $825=15\\times (\\frac{55}{1})$, generating the following sequence of integers:
+
+$2$, $15$, $825$, $725$, $1925$, $2275$, $425$, $390$, $330$, $290$, $770$, $\\ldots$
+
+After 2, this sequence contains the following powers of 2:
+
+$2^2=4$, $2^3=8$, $2^5=32$, $2^7=128$, $2^{11}=2048$, $2^{13}=8192$, $2^{17}=131072$, $2^{19}=524288$, $\\ldots$
+
+which are the prime powers of 2.
+
+# --instructions--
+
+Write a function that takes a fractran program as a string parameter and returns the first 10 numbers of the program as an array. If the result does not have 10 numbers then return the numbers as is.
+
+# --hints--
+
+`fractran` should be a function.
+
+```js
+assert(typeof fractran == 'function');
+```
+
+`fractran("3/2, 1/3")` should return an array.
+
+```js
+assert(Array.isArray(fractran('3/2, 1/3')));
+```
+
+`fractran("3/2, 1/3")` should return `[ 2, 3, 1 ]`.
+
+```js
+assert.deepEqual(fractran('3/2, 1/3'), [2, 3, 1]);
+```
+
+`fractran("3/2, 5/3, 1/5")` should return `[ 2, 3, 5, 1 ]`.
+
+```js
+assert.deepEqual(fractran('3/2, 5/3, 1/5'), [2, 3, 5, 1]);
+```
+
+`fractran("3/2, 6/3")` should return `[ 2, 3, 6, 9, 18, 27, 54, 81, 162, 243 ]`.
+
+```js
+assert.deepEqual(fractran('3/2, 6/3'), [2, 3, 6, 9, 18, 27, 54, 81, 162, 243]);
+```
+
+`fractran("2/7, 7/2")` should return `[ 2, 7, 2, 7, 2, 7, 2, 7, 2, 7 ]`.
+
+```js
+assert.deepEqual(fractran('2/7, 7/2'), [2, 7, 2, 7, 2, 7, 2, 7, 2, 7]);
+```
+
+`fractran("17/91, 78/85, 19/51, 23/38, 29/33, 77/29, 95/23, 77/19, 1/17, 11/13, 13/11, 15/14, 15/2, 55/1")` should return `[ 2, 15, 825, 725, 1925, 2275, 425, 390, 330, 290 ]`.
+
+```js
+assert.deepEqual(
+  fractran(
+    '17/91, 78/85, 19/51, 23/38, 29/33, 77/29, 95/23, 77/19, 1/17, 11/13, 13/11, 15/14, 15/2, 55/1'
+  ),
+  [2, 15, 825, 725, 1925, 2275, 425, 390, 330, 290]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function fractran(progStr) {
+
+}
+```
+
+# --solutions--
+
+```js
+function fractran(progStr){
+  var num = new Array();
+  var den = new Array();
+  var val ;
+  var out="";
+  function compile(prog){
+    var regex = /\s*(\d*)\s*\/\s*(\d*)\s*(.*)/m;
+    while(regex.test(prog)){
+      num.push(regex.exec(prog)[1]);
+      den.push(regex.exec(prog)[2]);
+      prog = regex.exec(prog)[3];
+    }
+  }
+
+  function step(val){
+    var i=0;
+    while(i<den.length && val%den[i] != 0) i++;
+    return num[i]*val/den[i];
+  }
+
+  var seq=[]
+
+  function exec(val){
+    var i = 0;
+    while(val && i<limit){
+      seq.push(val)
+      val = step(val);
+      i ++;
+    }
+  }
+
+  // Main
+  compile(progStr);
+  var limit = 10;
+  exec(2);
+  return seq;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/gamma-function.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/gamma-function.md
new file mode 100644
index 00000000000..91b6b01786a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/gamma-function.md
@@ -0,0 +1,104 @@
+---
+id: 5a23c84252665b21eecc7e76
+title: Gamma function
+challengeType: 1
+forumTopicId: 302271
+dashedName: gamma-function
+---
+
+# --description--
+
+Implement one algorithm (or more) to compute the Gamma function (in the real field only).
+
+The Gamma function can be defined as:
+
+<div style='padding-left: 4em;'><big><big>$\Gamma(x) = \displaystyle\int_0^\infty t^{x-1}e^{-t} dt$</big></big></div>
+
+# --hints--
+
+`gamma` should be a function.
+
+```js
+assert(typeof gamma == 'function');
+```
+
+`gamma(.1)` should return a number.
+
+```js
+assert(typeof gamma(0.1) == 'number');
+```
+
+`gamma(.1)` should return `9.513507698668736`.
+
+```js
+assert.equal(round(gamma(0.1)), round(9.513507698668736));
+```
+
+`gamma(.2)` should return `4.590843711998803`.
+
+```js
+assert.equal(round(gamma(0.2)), round(4.590843711998803));
+```
+
+`gamma(.3)` should return `2.9915689876875904`.
+
+```js
+assert.equal(round(gamma(0.3)), round(2.9915689876875904));
+```
+
+`gamma(.4)` should return `2.218159543757687`.
+
+```js
+assert.equal(round(gamma(0.4)), round(2.218159543757687));
+```
+
+`gamma(.5)` should return `1.7724538509055159`.
+
+```js
+assert.equal(round(gamma(0.5)), round(1.7724538509055159));
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+function round(x) {
+  return Number(x).toPrecision(13);
+}
+```
+
+## --seed-contents--
+
+```js
+function gamma(x) {
+
+}
+```
+
+# --solutions--
+
+```js
+function gamma(x) {
+  var p = [0.99999999999980993, 676.5203681218851, -1259.1392167224028,
+  771.32342877765313, -176.61502916214059, 12.507343278686905,
+  -0.13857109526572012, 9.9843695780195716e-6, 1.5056327351493116e-7
+  ];
+
+  var g = 7;
+  if (x < 0.5) {
+    return Math.PI / (Math.sin(Math.PI * x) * gamma(1 - x));
+  }
+
+  x -= 1;
+  var a = p[0];
+  var t = x + g + 0.5;
+  for (var i = 1; i < p.length; i++) {
+  a += p[i] / (x + i);
+  }
+
+  var result=Math.sqrt(2 * Math.PI) * Math.pow(t, x + 0.5) * Math.exp(-t) * a;
+
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/gaussian-elimination.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/gaussian-elimination.md
new file mode 100644
index 00000000000..53b7860f1fc
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/gaussian-elimination.md
@@ -0,0 +1,230 @@
+---
+id: 5a23c84252665b21eecc7e77
+title: Gaussian elimination
+challengeType: 1
+forumTopicId: 302272
+dashedName: gaussian-elimination
+---
+
+# --description--
+
+Write a function to solve \\(Ax = b\\) using Gaussian elimination then backwards substitution.
+
+\\(A\\) being an \\(n \\times n\\) matrix. Also, \\(x\\) and \\(b\\) are \\(n\\) by 1 vectors.
+
+To improve accuracy, please use partial pivoting and scaling.
+
+# --hints--
+
+`gaussianElimination` should be a function.
+
+```js
+assert(typeof gaussianElimination == 'function');
+```
+
+`gaussianElimination([[1,1],[1,-1]], [5,1])` should return an array.
+
+```js
+assert(
+  Array.isArray(
+    gaussianElimination(
+      [
+        [1, 1],
+        [1, -1]
+      ],
+      [5, 1]
+    )
+  )
+);
+```
+
+`gaussianElimination([[1,1],[1,-1]], [5,1])` should return `[ 3, 2 ]`.
+
+```js
+assert.deepEqual(
+  gaussianElimination(
+    [
+      [1, 1],
+      [1, -1]
+    ],
+    [5, 1]
+  ),
+  [3, 2]
+);
+```
+
+`gaussianElimination([[2,3],[2,1]] , [8,4])` should return `[ 1, 2 ]`.
+
+```js
+assert.deepEqual(
+  gaussianElimination(
+    [
+      [2, 3],
+      [2, 1]
+    ],
+    [8, 4]
+  ),
+  [1, 2]
+);
+```
+
+`gaussianElimination([[1,3],[5,-2]], [14,19])` should return `[ 5, 3 ]`.
+
+```js
+assert.deepEqual(
+  gaussianElimination(
+    [
+      [1, 3],
+      [5, -2]
+    ],
+    [14, 19]
+  ),
+  [5, 3]
+);
+```
+
+`gaussianElimination([[1,1],[5,-1]] , [10,14])` should return `[ 4, 6 ]`.
+
+```js
+assert.deepEqual(
+  gaussianElimination(
+    [
+      [1, 1],
+      [5, -1]
+    ],
+    [10, 14]
+  ),
+  [4, 6]
+);
+```
+
+`gaussianElimination([[1,2,3],[4,5,6],[7,8,8]] , [6,15,23])` should return `[ 1, 1, 1 ]`.
+
+```js
+assert.deepEqual(
+  gaussianElimination(
+    [
+      [1, 2, 3],
+      [4, 5, 6],
+      [7, 8, 8]
+    ],
+    [6, 15, 23]
+  ),
+  [1, 1, 1]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function gaussianElimination(A,b) {
+
+}
+```
+
+# --solutions--
+
+```js
+function gaussianElimination(A, b) {
+  // Lower Upper Decomposition
+  function ludcmp(A) {
+    // A is a matrix that we want to decompose into Lower and Upper matrices.
+    var d = true
+    var n = A.length
+    var idx = new Array(n) // Output vector with row permutations from partial pivoting
+    var vv = new Array(n) // Scaling information
+
+    for (var i=0; i<n; i++) {
+        var max = 0
+        for (var j=0; j<n; j++) {
+            var temp = Math.abs(A[i][j])
+            if (temp > max) max = temp
+        }
+        if (max == 0) return // Singular Matrix!
+        vv[i] = 1 / max // Scaling
+    }
+
+        var Acpy = new Array(n)
+        for (var i=0; i<n; i++) {
+            var Ai = A[i]
+            let Acpyi = new Array(Ai.length)
+            for (j=0; j<Ai.length; j+=1) Acpyi[j] = Ai[j]
+            Acpy[i] = Acpyi
+        }
+        A = Acpy
+
+    var tiny = 1e-20 // in case pivot element is zero
+    for (var i=0; ; i++) {
+        for (var j=0; j<i; j++) {
+            var sum = A[j][i]
+            for (var k=0; k<j; k++) sum -= A[j][k] * A[k][i];
+            A[j][i] = sum
+        }
+        var jmax = 0
+        var max = 0;
+        for (var j=i; j<n; j++) {
+            var sum = A[j][i]
+            for (var k=0; k<i; k++) sum -= A[j][k] * A[k][i];
+            A[j][i] = sum
+            var temp = vv[j] * Math.abs(sum)
+            if (temp >= max) {
+                max = temp
+                jmax = j
+            }
+        }
+        if (i <= jmax) {
+            for (var j=0; j<n; j++) {
+                var temp = A[jmax][j]
+                A[jmax][j] = A[i][j]
+                A[i][j] = temp
+            }
+            d = !d;
+            vv[jmax] = vv[i]
+        }
+        idx[i] = jmax;
+        if (i == n-1) break;
+        var temp = A[i][i]
+        if (temp == 0) A[i][i] = temp = tiny
+        temp = 1 / temp
+        for (var j=i+1; j<n; j++) A[j][i] *= temp
+    }
+    return {A:A, idx:idx, d:d}
+  }
+
+  // Lower Upper Back Substitution
+  function lubksb(lu, b) {
+    // solves the set of n linear equations A*x = b.
+    // lu is the object containing A, idx and d as determined by the routine ludcmp.
+    var A = lu.A
+    var idx = lu.idx
+    var n = idx.length
+
+        var bcpy = new Array(n)
+        for (var i=0; i<b.length; i+=1) bcpy[i] = b[i]
+        b = bcpy
+
+    for (var ii=-1, i=0; i<n; i++) {
+        var ix = idx[i]
+        var sum = b[ix]
+        b[ix] = b[i]
+        if (ii > -1)
+            for (var j=ii; j<i; j++) sum -= A[i][j] * b[j]
+        else if (sum)
+            ii = i
+        b[i] = sum
+    }
+    for (var i=n-1; i>=0; i--) {
+        var sum = b[i]
+        for (var j=i+1; j<n; j++) sum -= A[i][j] * b[j]
+        b[i] = sum / A[i][i]
+    }
+    return b // solution vector x
+  }
+
+    var lu = ludcmp(A)
+    if (lu === undefined) return // Singular Matrix!
+    return lubksb(lu, b)
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/general-fizzbuzz.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/general-fizzbuzz.md
new file mode 100644
index 00000000000..168406d9457
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/general-fizzbuzz.md
@@ -0,0 +1,175 @@
+---
+id: 5a23c84252665b21eecc7e78
+title: General FizzBuzz
+challengeType: 1
+forumTopicId: 302273
+dashedName: general-fizzbuzz
+---
+
+# --description--
+
+Write a generalized version of <a href="https://rosettacode.org/wiki/FizzBuzz" target="_blank" rel="noopener noreferrer nofollow">FizzBuzz</a> that works for any list of factors, along with their words.
+
+This is basically a "fizzbuzz" implementation where the rules of the game are supplied to the user. Create a function to implement this. The function should take two parameters.
+
+The first will be an array with the FizzBuzz rules. For example: `[ [3, "Fizz"] , [5, "Buzz"] ]`.
+
+This indicates that `Fizz` should be printed if the number is a multiple of 3 and `Buzz` if it is a multiple of 5. If it is a multiple of both then the strings should be concatenated in the order specified in the array. In this case, `FizzBuzz` if the number is a multiple of 3 and 5.
+
+The second parameter is the number for which the function should return a string as stated above.
+
+# --hints--
+
+`genFizzBuzz` should be a function.
+
+```js
+assert(typeof genFizzBuzz == 'function');
+```
+
+`genFizzBuzz([[3, "Fizz"],[5, "Buzz"]], 6)` should return a string.
+
+```js
+assert(
+  typeof genFizzBuzz(
+    [
+      [3, 'Fizz'],
+      [5, 'Buzz']
+    ],
+    6
+  ) == 'string'
+);
+```
+
+`genFizzBuzz([[3, "Fizz"],[5, "Buzz"]], 6)` should return `"Fizz"`.
+
+```js
+assert.equal(
+  genFizzBuzz(
+    [
+      [3, 'Fizz'],
+      [5, 'Buzz']
+    ],
+    6
+  ),
+  'Fizz'
+);
+```
+
+`genFizzBuzz([[3, "Fizz"],[5, "Buzz"]], 10)` should return `"Buzz"`.
+
+```js
+assert.equal(
+  genFizzBuzz(
+    [
+      [3, 'Fizz'],
+      [5, 'Buzz']
+    ],
+    10
+  ),
+  'Buzz'
+);
+```
+
+`genFizzBuzz([[3, "Buzz"],[5, "Fizz"]], 12)` should return `"Buzz"`.
+
+```js
+assert.equal(
+  genFizzBuzz(
+    [
+      [3, 'Buzz'],
+      [5, 'Fizz']
+    ],
+    12
+  ),
+  'Buzz'
+);
+```
+
+`genFizzBuzz([[3, "Buzz"],[5, "Fizz"]], 13)` should return `"13"`.
+
+```js
+assert.equal(
+  genFizzBuzz(
+    [
+      [3, 'Buzz'],
+      [5, 'Fizz']
+    ],
+    13
+  ),
+  '13'
+);
+```
+
+`genFizzBuzz([[3, "Buzz"],[5, "Fizz"]], 15)` should return `"BuzzFizz"`.
+
+```js
+assert.equal(
+  genFizzBuzz(
+    [
+      [3, 'Buzz'],
+      [5, 'Fizz']
+    ],
+    15
+  ),
+  'BuzzFizz'
+);
+```
+
+`genFizzBuzz([[3, "Fizz"],[5, "Buzz"]], 15)` should return `"FizzBuzz"`.
+
+```js
+assert.equal(
+  genFizzBuzz(
+    [
+      [3, 'Fizz'],
+      [5, 'Buzz']
+    ],
+    15
+  ),
+  'FizzBuzz'
+);
+```
+
+`genFizzBuzz([[3, "Fizz"],[5, "Buzz"],[7, "Baxx"]], 105)` should return `"FizzBuzzBaxx"`.
+
+```js
+assert.equal(
+  genFizzBuzz(
+    [
+      [3, 'Fizz'],
+      [5, 'Buzz'],
+      [7, 'Baxx']
+    ],
+    105
+  ),
+  'FizzBuzzBaxx'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function genFizzBuzz(rules, num) {
+
+}
+```
+
+# --solutions--
+
+```js
+function genFizzBuzz(rules, num) {
+  let res='';
+  rules.forEach(function (e) {
+    if(num % e[0] == 0)
+      res+=e[1];
+  })
+
+  if(res==''){
+    res=num.toString();
+  }
+
+  return res;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/generate-lower-case-ascii-alphabet.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/generate-lower-case-ascii-alphabet.md
new file mode 100644
index 00000000000..eb31c80170b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/generate-lower-case-ascii-alphabet.md
@@ -0,0 +1,99 @@
+---
+id: 5a23c84252665b21eecc7e7a
+title: Generate lower case ASCII alphabet
+challengeType: 1
+forumTopicId: 302274
+dashedName: generate-lower-case-ascii-alphabet
+---
+
+# --description--
+
+Write a function to generate an array of lower case ASCII characters for a given range. For example, given the range `['a', 'd']`, the function should return `['a', 'b', 'c', 'd']`.
+
+# --hints--
+
+`lascii` should be a function.
+
+```js
+assert(typeof lascii == 'function');
+```
+
+`lascii("a","d")` should return an array.
+
+```js
+assert(Array.isArray(lascii('a', 'd')));
+```
+
+`lascii('a','d')` should return `[ 'a', 'b', 'c', 'd' ]`.
+
+```js
+assert.deepEqual(lascii('a', 'd'), results[0]);
+```
+
+`lascii('c','i')` should return `[ 'c', 'd', 'e', 'f', 'g', 'h', 'i' ]`.
+
+```js
+assert.deepEqual(lascii('c', 'i'), results[1]);
+```
+
+`lascii('m','q')` should return `[ 'm', 'n', 'o', 'p', 'q' ]`.
+
+```js
+assert.deepEqual(lascii('m', 'q'), results[2]);
+```
+
+`lascii('k','n')` should return `[ 'k', 'l', 'm', 'n' ]`.
+
+```js
+assert.deepEqual(lascii('k', 'n'), results[3]);
+```
+
+`lascii('t','z')` should return `[ 't', 'u', 'v', 'w', 'x', 'y', 'z' ]`.
+
+```js
+assert.deepEqual(lascii('t', 'z'), results[4]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+let results=[
+  [ 'a', 'b', 'c', 'd' ],
+  [ 'c', 'd', 'e', 'f', 'g', 'h', 'i' ],
+  [ 'm', 'n', 'o', 'p', 'q' ],
+  [ 'k', 'l', 'm', 'n' ],
+  [ 't', 'u', 'v', 'w', 'x', 'y', 'z' ]
+]
+```
+
+## --seed-contents--
+
+```js
+function lascii(cFrom, cTo) {
+
+}
+```
+
+# --solutions--
+
+```js
+function lascii(cFrom, cTo) {
+
+  function cRange(cFrom, cTo) {
+    var iStart = cFrom.charCodeAt(0);
+
+    return Array.apply(
+      null, Array(cTo.charCodeAt(0) - iStart + 1)
+    ).map(function (_, i) {
+
+      return String.fromCharCode(iStart + i);
+
+    });
+  }
+
+  return cRange(cFrom, cTo);
+
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/generator-exponential.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/generator-exponential.md
new file mode 100644
index 00000000000..6b15a7ca62e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/generator-exponential.md
@@ -0,0 +1,117 @@
+---
+id: 5a23c84252665b21eecc7e7b
+title: Generator/Exponential
+challengeType: 1
+forumTopicId: 302275
+dashedName: generatorexponential
+---
+
+# --description--
+
+A generator is an executable entity (like a function or procedure) that contains code that yields a sequence of values, one at a time, so that each time you call the generator, the next value in the sequence is provided.
+
+Generators are often built on top of coroutines or objects so that the internal state of the object is handled "naturally".
+
+Generators are often used in situations where a sequence is potentially infinite, and where it is possible to construct the next value of the sequence with only minimal state.
+
+# --instructions--
+
+Write a function that uses generators to generate squares and cubes. Create a new generator that filters all cubes from the generator of squares.
+
+The function should return the \\( n^{th} \\) value of the filtered generator.
+
+For example for \\(n=7\\), the function should return 81 as the sequence would be 4, 9, 16, 25, 36, 49, 81. Here 64 is filtered out, as it is a cube.
+
+# --hints--
+
+`exponentialGenerator` should be a function.
+
+```js
+assert(typeof exponentialGenerator == 'function');
+```
+
+`exponentialGenerator()` should return a number.
+
+```js
+assert(typeof exponentialGenerator(10) == 'number');
+```
+
+`exponentialGenerator(10)` should return `144`.
+
+```js
+assert.equal(exponentialGenerator(10), 144);
+```
+
+`exponentialGenerator(12)` should return `196`.
+
+```js
+assert.equal(exponentialGenerator(12), 196);
+```
+
+`exponentialGenerator(14)` should return `256`.
+
+```js
+assert.equal(exponentialGenerator(14), 256);
+```
+
+`exponentialGenerator(20)` should return `484`.
+
+```js
+assert.equal(exponentialGenerator(20), 484);
+```
+
+`exponentialGenerator(25)` should return `784`.
+
+```js
+assert.equal(exponentialGenerator(25), 784);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function exponentialGenerator(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function exponentialGenerator(n){
+  function* PowersGenerator(m) {
+    var n=0;
+    while(1) {
+        yield Math.pow(n, m);
+        n += 1;
+    }
+  }
+
+  function* FilteredGenerator(g, f){
+    var value = g.next().value;
+    var filter = f.next().value;
+    while(1) {
+        if( value < filter ) {
+            yield value;
+            value = g.next().value;
+        } else if ( value > filter ) {
+            filter = f.next().value;
+        } else {
+            value = g.next().value;
+            filter = f.next().value;
+        }
+    }
+  }
+
+  var squares = PowersGenerator(2);
+  var cubes = PowersGenerator(3);
+
+  var filtered = FilteredGenerator(squares, cubes);
+
+  var curr=0;
+  for(var i=0;i<n;i++) curr=filtered.next();
+
+  return curr.value;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/gray-code.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/gray-code.md
new file mode 100644
index 00000000000..ded11f5cac0
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/gray-code.md
@@ -0,0 +1,122 @@
+---
+id: 5a23c84252665b21eecc7e80
+title: Gray code
+challengeType: 1
+forumTopicId: 302276
+dashedName: gray-code
+---
+
+# --description--
+
+Gray code is a form of binary encoding where transitions between consecutive numbers differ by only one bit.
+
+This is a useful encoding for reducing hardware data hazards with values that change rapidly and/or connect to slower hardware as inputs.
+
+It is also useful for generating inputs for Karnaugh maps in order from left to right or top to bottom.
+
+# --instructions--
+
+Create a function to encode a number to and decode a number from Gray code. The function should will have 2 parameters.
+
+The first would be a boolean. The function should encode for true and decode for false. The second parameter would be the number to be encoded/decoded.
+
+Display the normal binary representations, Gray code representations, and decoded Gray code values for all 5-bit binary numbers (0-31 inclusive, leading 0's not necessary).
+
+There are many possible Gray codes. The following encodes what is called "binary reflected Gray code."
+
+Encoding (MSB is bit 0, b is binary, g is Gray code):
+
+<pre>if b[i-1] = 1
+  g[i] = not b[i]
+else
+  g[i] = b[i]
+</pre>
+
+Or:
+
+<pre>g = b xor (b logically right shifted 1 time)
+</pre>
+
+Decoding (MSB is bit 0, b is binary, g is Gray code):
+
+<pre>b[0] = g[0]<br>
+for other bits:
+b[i] = g[i] xor b[i-1]
+</pre>
+
+# --hints--
+
+`gray` should be a function.
+
+```js
+assert(typeof gray == 'function');
+```
+
+`gray(true,177)` should return a number.
+
+```js
+assert(typeof gray(true, 177) == 'number');
+```
+
+`gray(true,177)` should return `233`.
+
+```js
+assert.equal(gray(true, 177), 233);
+```
+
+`gray(true,425)` should return `381`.
+
+```js
+assert.equal(gray(true, 425), 381);
+```
+
+`gray(true,870)` should return `725`.
+
+```js
+assert.equal(gray(true, 870), 725);
+```
+
+`gray(false,233)` should return `177`.
+
+```js
+assert.equal(gray(false, 233), 177);
+```
+
+`gray(false,381)` should return `425`.
+
+```js
+assert.equal(gray(false, 381), 425);
+```
+
+`gray(false,725)` should return `870`.
+
+```js
+assert.equal(gray(false, 725), 870);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function gray(enc, number) {
+
+}
+```
+
+# --solutions--
+
+```js
+function gray(enc, number){
+  if(enc){
+      return number ^ (number >> 1);
+  }else{
+      let n = number;
+
+      while (number >>= 1) {
+          n ^= number;
+      }
+      return n;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/greatest-common-divisor.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/greatest-common-divisor.md
new file mode 100644
index 00000000000..8e960936bb6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/greatest-common-divisor.md
@@ -0,0 +1,79 @@
+---
+id: 5a23c84252665b21eecc7e82
+title: Greatest common divisor
+challengeType: 1
+forumTopicId: 302277
+dashedName: greatest-common-divisor
+---
+
+# --description--
+
+Write a function that returns the greatest common divisor of two integers.
+
+# --hints--
+
+`gcd` should be a function.
+
+```js
+assert(typeof gcd == 'function');
+```
+
+`gcd(24,36)` should return a number.
+
+```js
+assert(typeof gcd(24, 36) == 'number');
+```
+
+`gcd(24,36)` should return `12`.
+
+```js
+assert.equal(gcd(24, 36), 12);
+```
+
+`gcd(30,48)` should return `6`.
+
+```js
+assert.equal(gcd(30, 48), 6);
+```
+
+`gcd(10,15)` should return `5`.
+
+```js
+assert.equal(gcd(10, 15), 5);
+```
+
+`gcd(100,25)` should return `25`.
+
+```js
+assert.equal(gcd(100, 25), 25);
+```
+
+`gcd(13,250)` should return `1`.
+
+```js
+assert.equal(gcd(13, 250), 1);
+```
+
+`gcd(1300,250)` should return `50`.
+
+```js
+assert.equal(gcd(1300, 250), 50);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function gcd(a, b) {
+
+}
+```
+
+# --solutions--
+
+```js
+function gcd(a, b) {
+  return b==0 ? Math.abs(a):gcd(b, a % b);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/greatest-subsequential-sum.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/greatest-subsequential-sum.md
new file mode 100644
index 00000000000..6b8eebaf0e8
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/greatest-subsequential-sum.md
@@ -0,0 +1,113 @@
+---
+id: 5a23c84252665b21eecc7e84
+title: Greatest subsequential sum
+challengeType: 1
+forumTopicId: 302278
+dashedName: greatest-subsequential-sum
+---
+
+# --description--
+
+Given a sequence of integers, find a continuous subsequence which maximizes the sum of its elements, that is, the elements of no other single subsequence add up to a value larger than this one.
+
+An empty subsequence is considered to have the sum of \\( 0 \\); thus if all elements are negative, the result must be the empty sequence.
+
+# --hints--
+
+`maximumSubsequence` should be a function.
+
+```js
+assert(typeof maximumSubsequence == 'function');
+```
+
+`maximumSubsequence([ 1, 2, -1, 3, 10, -10 ])` should return an array.
+
+```js
+assert(Array.isArray(maximumSubsequence([1, 2, -1, 3, 10, -10])));
+```
+
+`maximumSubsequence([ 1, 2, -1, 3, 10, -10 ])` should return `[ 1, 2, -1, 3, 10 ]`.
+
+```js
+assert.deepEqual(maximumSubsequence([1, 2, -1, 3, 10, -10]), [1, 2, -1, 3, 10]);
+```
+
+`maximumSubsequence([ 0, 8, 10, -2, -4, -1, -5, -3 ])` should return `[ 0, 8, 10 ]`.
+
+```js
+assert.deepEqual(maximumSubsequence([0, 8, 10, -2, -4, -1, -5, -3]), [
+  0,
+  8,
+  10
+]);
+```
+
+`maximumSubsequence([ 9, 9, -10, 1 ])` should return `[ 9, 9 ]`.
+
+```js
+assert.deepEqual(maximumSubsequence([9, 9, -10, 1]), [9, 9]);
+```
+
+`maximumSubsequence([ 7, 1, -5, -3, -8, 1 ])` should return `[ 7, 1 ]`.
+
+```js
+assert.deepEqual(maximumSubsequence([7, 1, -5, -3, -8, 1]), [7, 1]);
+```
+
+`maximumSubsequence([ -3, 6, -1, 4, -4, -6 ])` should return `[ 6, -1, 4 ]`.
+
+```js
+assert.deepEqual(maximumSubsequence([-3, 6, -1, 4, -4, -6]), [6, -1, 4]);
+```
+
+`maximumSubsequence([ -1, -2, 3, 5, 6, -2, -1, 4, -4, 2, -1 ])` should return `[ 3, 5, 6, -2, -1, 4 ]`.
+
+```js
+assert.deepEqual(maximumSubsequence([-1, -2, 3, 5, 6, -2, -1, 4, -4, 2, -1]), [
+  3,
+  5,
+  6,
+  -2,
+  -1,
+  4
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function maximumSubsequence(population) {
+
+}
+```
+
+# --solutions--
+
+```js
+function maximumSubsequence(population) {
+  function sumValues(arr) {
+      var result = 0;
+      for (var i = 0, len = arr.length; i < len; i++) {
+          result += arr[i];
+      }
+      return result;
+  }
+  var greatest;
+  var maxValue = 0;
+
+  for (var i = 0, len = population.length; i < len; i++) {
+      for (var j = i; j <= len; j++) {
+          var subsequence = population.slice(i, j);
+          var value = sumValues(subsequence);
+          if (value > maxValue) {
+              maxValue = value;
+              greatest = subsequence;
+          };
+      }
+  }
+
+  return greatest;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hailstone-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hailstone-sequence.md
new file mode 100644
index 00000000000..639f52b4998
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hailstone-sequence.md
@@ -0,0 +1,98 @@
+---
+id: 595608ff8bcd7a50bd490181
+title: Hailstone sequence
+challengeType: 1
+forumTopicId: 302279
+dashedName: hailstone-sequence
+---
+
+# --description--
+
+The Hailstone sequence of numbers can be generated from a starting positive integer, `n` by:
+
+- If `n` is `1` then the sequence ends
+- If `n` is `even` then the next `n` of the sequence `= n/2`
+- If `n` is `odd` then the next `n` of the sequence `= (3 * n) + 1`
+
+The (unproven) Collatz conjecture is that the hailstone sequence for any starting number always terminates.
+
+The hailstone sequence is also known as hailstone numbers (because the values are usually subject to multiple descents and ascents like hailstones in a cloud), or as the Collatz sequence.
+
+# --instructions--
+
+1. Create a routine to generate the hailstone sequence for a number
+2. Your function should return an array with the number less than `limit` which has the longest hailstone sequence and that sequence's length. (But don't show the actual sequence!)
+
+# --hints--
+
+`hailstoneSequence` should be a function.
+
+```js
+assert(typeof hailstoneSequence === 'function');
+```
+
+`hailstoneSequence(30)` should return an array.
+
+```js
+assert(Array.isArray(hailstoneSequence(30)));
+```
+
+`hailstoneSequence(30)` should return `[27, 112]`.
+
+```js
+assert.deepEqual(hailstoneSequence(30), [27, 112]);
+```
+
+`hailstoneSequence(50000)` should return `[35655, 324]`.
+
+```js
+assert.deepEqual(hailstoneSequence(50000), [35655, 324]);
+```
+
+`hailstoneSequence(100000)` should return `[77031, 351]`.
+
+```js
+assert.deepEqual(hailstoneSequence(100000), [77031, 351]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function hailstoneSequence(limit) {
+  const res = [];
+
+
+  return res;
+}
+```
+
+# --solutions--
+
+```js
+function hailstoneSequence (limit) {
+  function hailstone(n) {
+    const seq = [n];
+    while (n > 1) {
+      n = n % 2 ? 3 * n + 1 : n / 2;
+      seq.push(n);
+    }
+    return seq;
+  }
+
+  let n = 0;
+  let max = 0;
+  for (let i = limit; --i;) {
+    const seq = hailstone(i);
+    const sLen = seq.length;
+
+    if (sLen > max) {
+      n = i;
+      max = sLen;
+    }
+  }
+
+  return [n, max];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/happy-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/happy-numbers.md
new file mode 100644
index 00000000000..43ab0ef8989
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/happy-numbers.md
@@ -0,0 +1,129 @@
+---
+id: 594810f028c0303b75339ad1
+title: Happy numbers
+challengeType: 1
+forumTopicId: 302280
+dashedName: happy-numbers
+---
+
+# --description--
+
+A happy number is defined by the following process:
+
+Starting with any positive integer, replace the number by the sum of the squares of its digits, and repeat the process until the number equals `1` (where it will stay), or it loops endlessly in a cycle which does not include `1`. Those numbers for which this process ends in `1` are happy numbers, while those that do not end in `1` are unhappy numbers.
+
+# --instructions--
+
+Implement a function that returns true if the number is happy, or false if not.
+
+# --hints--
+
+`happy` should be a function.
+
+```js
+assert(typeof happy === 'function');
+```
+
+`happy(1)` should return a boolean.
+
+```js
+assert(typeof happy(1) === 'boolean');
+```
+
+`happy(1)` should return `true`.
+
+```js
+assert(happy(1));
+```
+
+`happy(2)` should return `false`.
+
+```js
+assert(!happy(2));
+```
+
+`happy(7)` should return `true`.
+
+```js
+assert(happy(7));
+```
+
+`happy(10)` should return `true`.
+
+```js
+assert(happy(10));
+```
+
+`happy(13)` should return `true`.
+
+```js
+assert(happy(13));
+```
+
+`happy(19)` should return `true`.
+
+```js
+assert(happy(19));
+```
+
+`happy(23)` should return `true`.
+
+```js
+assert(happy(23));
+```
+
+`happy(28)` should return `true`.
+
+```js
+assert(happy(28));
+```
+
+`happy(31)` should return `true`.
+
+```js
+assert(happy(31));
+```
+
+`happy(32)` should return `true`.
+
+```js
+assert(happy(32));
+```
+
+`happy(33)` should return `false`.
+
+```js
+assert(!happy(33));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function happy(number) {
+
+}
+```
+
+# --solutions--
+
+```js
+function happy (number) {
+  let m;
+  let digit;
+  const cycle = [];
+
+  while (number !== 1 && cycle[number] !== true) {
+    cycle[number] = true;
+    m = 0;
+    while (number > 0) {
+      digit = number % 10;
+      m += Math.pow(digit, 2);
+      number = (number - digit) / 10;
+    }
+    number = m;
+  }
+  return (number === 1);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/harshad-or-niven-series.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/harshad-or-niven-series.md
new file mode 100644
index 00000000000..ff626d6671d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/harshad-or-niven-series.md
@@ -0,0 +1,87 @@
+---
+id: 595668ca4cfe1af2fb9818d4
+title: Harshad or Niven series
+challengeType: 1
+forumTopicId: 302281
+dashedName: harshad-or-niven-series
+---
+
+# --description--
+
+The Harshad or Niven numbers are positive integers ≥ 1 that are divisible by the sum of their digits.
+
+For example, `42` is a Harshad number as `42` is divisible by `(4 + 2)` without remainder.
+
+Assume that the series is defined as the numbers in increasing order.
+
+# --instructions--
+
+Implement a function to generate successive members of the Harshad sequence.
+
+Use it to return an array with ten members of the sequence, starting with first Harshad number greater than `n`.
+
+# --hints--
+
+`isHarshadOrNiven` should be a function.
+
+```js
+assert(typeof isHarshadOrNiven === 'function');
+```
+
+`isHarshadOrNiven(10)` should return `[12, 18, 20, 21, 24, 27, 30, 36, 40, 42]`
+
+```js
+assert.deepEqual(isHarshadOrNiven(10), [12, 18, 20, 21, 24, 27, 30, 36, 40, 42]);
+```
+
+`isHarshadOrNiven(400)` should return `[402, 405, 407, 408, 410, 414, 420, 423, 432, 440]`
+
+```js
+assert.deepEqual(isHarshadOrNiven(400), [402, 405, 407, 408, 410, 414, 420, 423, 432, 440]);
+```
+
+`isHarshadOrNiven(1000)` should return `[1002, 1008, 1010, 1011, 1012, 1014, 1015, 1016, 1017, 1020]`
+
+```js
+assert.deepEqual(isHarshadOrNiven(1000), [1002, 1008, 1010, 1011, 1012, 1014, 1015, 1016, 1017, 1020]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function isHarshadOrNiven(n) {
+  const res = [];
+
+  return res;
+}
+```
+
+# --solutions--
+
+```js
+function isHarshadOrNiven(n) {
+  function isHarshad(num) {
+    let s = 0;
+    const nStr = num.toString();
+    for (let i = 0; i < nStr.length; ++i) {
+      s += parseInt(nStr.charAt(i), 10);
+    }
+    return n % s === 0;
+  }
+
+  const res = [];
+  let count = 0;
+
+  while (count < 10) {
+    n++;
+    if (isHarshad(n)) {
+      count++;
+      res.push(n);
+    }
+  }
+
+  return res;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hash-from-two-arrays.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hash-from-two-arrays.md
new file mode 100644
index 00000000000..75facd682ab
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hash-from-two-arrays.md
@@ -0,0 +1,109 @@
+---
+id: 595671d4d2cdc305f0d5b36f
+title: Hash from two arrays
+challengeType: 1
+forumTopicId: 302283
+dashedName: hash-from-two-arrays
+---
+
+# --description--
+
+Given two arrays, create a hash object where the elements from one array (the keys) are linked to the elements of the other (the values).
+
+Example:
+
+```js
+const firstArr = [1, 2, 3];
+const secondArr = ["a", "b", "c"];
+const hashObj = arrToObj(firstArr, secondArr);
+```
+
+The hash object created from the arrays above will be `{1: "a", 2: "b", 3: "c"}`.
+
+# --hints--
+
+`arrToObj` should be a function.
+
+```js
+assert(typeof arrToObj === 'function');
+```
+
+`arrToObj([1, 2, 3, 4, 5], ["a", "b", "c", "d", "e"])` should return `{ 1: "a", 2: "b", 3: "c", 4: "d", 5: "e" }`
+
+```js
+assert.deepEqual(arrToObj(...testCases[0]), res[0]);
+```
+
+`arrToObj([1, 2, 3, 4, 5], ["a", "b", "c", "d"])` should return `{ 1: "a", 2: "b", 3: "c", 4: "d", 5: undefined }`
+
+```js
+assert.deepEqual(arrToObj(...testCases[1]), res[1]);
+```
+
+`arrToObj([1, 2, 3], ["a", "b", "c", "d", "e"])` should return `{ 1: "a", 2: "b", 3: "c" }`
+
+```js
+assert.deepEqual(arrToObj(...testCases[2]), res[2]);
+```
+
+`arrToObj(["a", "b", "c", "d", "e"], [1, 2, 3, 4, 5])` should return `{ "a": 1, "b": 2, "c": 3 , "d": 4, "e": 5 }`
+
+```js
+assert.deepEqual(arrToObj(...testCases[3]), res[3]);
+```
+
+`arrToObj(["a", "b", "c", "d", "e"], [1, 2, 3, 4])` should return `{ "a": 1, "b": 2, "c": 3 , "d": 4, "e": undefined }`
+
+```js
+assert.deepEqual(arrToObj(...testCases[4]), res[4]);
+```
+
+`arrToObj(["a", "b", "c"], [1, 2, 3, 4, 5])` should return `{ "a": 1, "b": 2, "c": 3 }`
+
+```js
+assert.deepEqual(arrToObj(...testCases[5]), res[5]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const testCases = [
+  [[1, 2, 3, 4, 5], ['a', 'b', 'c', 'd', 'e']],
+  [[1, 2, 3, 4, 5], ['a', 'b', 'c', 'd']],
+  [[1, 2, 3], ['a', 'b', 'c', 'd', 'e']],
+  [['a', 'b', 'c', 'd', 'e'], [1, 2, 3, 4, 5]],
+  [['a', 'b', 'c', 'd', 'e'], [1, 2, 3, 4]],
+  [['a', 'b', 'c'], [1, 2, 3, 4, 5]]
+];
+
+const res = [
+  { 1: 'a', 2: 'b', 3: 'c', 4: 'd', 5: 'e' },
+  { 1: 'a', 2: 'b', 3: 'c', 4: 'd', 5: undefined },
+  { 1: 'a', 2: 'b', 3: 'c' },
+  { a: 1, b: 2, c: 3, d: 4, e: 5 },
+  { a: 1, b: 2, c: 3, d: 4, e: undefined },
+  { a: 1, b: 2, c: 3 }
+];
+```
+
+## --seed-contents--
+
+```js
+function arrToObj (keys, vals) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function arrToObj (keys, vals) {
+  return keys.reduce((map, key, index) => {
+    map[key] = vals[index];
+    return map;
+  }, {});
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hash-join.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hash-join.md
new file mode 100644
index 00000000000..8eea55e1b3e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hash-join.md
@@ -0,0 +1,237 @@
+---
+id: 5956795bc9e2c415eb244de1
+title: Hash join
+challengeType: 1
+forumTopicId: 302284
+dashedName: hash-join
+---
+
+# --description--
+
+An inner join is an operation that combines two data tables into one table, based on matching column values. The simplest way of implementing this operation is the nested loop join algorithm, but a more scalable alternative is the hash join algorithm.
+
+The "hash join" algorithm consists of two steps:
+
+<ol>
+  <li><strong>Hash phase:</strong> Create a multimap from one of the two tables, mapping from each join column value to all the rows that contain it.</li>
+  <ul>
+    <li>The multimap must support hash-based lookup which scales better than a simple linear search, because that's the whole point of this algorithm.</li>
+    <li>Ideally we should create the multimap for the smaller table, thus minimizing its creation time and memory size.</li>
+  </ul>
+  <li><strong>Join phase:</strong> Scan the other table, and find matching rows by looking in the multimap created before.</li>
+</ol>
+
+In pseudo-code, the algorithm could be expressed as follows:
+
+<pre><strong>let</strong> <i>A</i> = the first input table (or ideally, the larger one)
+<strong>let</strong> <i>B</i> = the second input table (or ideally, the smaller one)
+<strong>let</strong> <i>j<sub>A</sub></i> = the join column ID of table <i>A</i>
+<strong>let</strong> <i>j<sub>B</sub></i> = the join column ID of table <i>B</i>
+<strong>let</strong> <i>M<sub>B</sub></i> = a multimap for mapping from single values to multiple rows of table <i>B</i> (starts out empty)
+<strong>let</strong> <i>C</i> = the output table (starts out empty)
+<strong>for each</strong> row <i>b</i> in table <i>B</i>:
+  <strong>place</strong> <i>b</i> in multimap <i>M<sub>B</sub></i> under key <i>b(j<sub>B</sub>)</i>
+<strong>for each</strong> row <i>a</i> in table <i>A</i>:
+  <strong>for each</strong> row <i>b</i> in multimap <i>M<sub>B</sub></i> under key <i>a(j<sub>A</sub>)</i>:
+    <strong>let</strong> <i>c</i> = the concatenation of row <i>a</i> and row <i>b</i>
+    <strong>place</strong> row <i>c</i> in table <i>C</i>
+</pre>
+
+# --instructions--
+
+Implement the "hash join" algorithm as a function and demonstrate that it passes the test-case listed below. The function should accept two arrays of objects and return an array of combined objects.
+
+**Input**
+
+<table>
+  <tr>
+    <td style="padding: 4px; margin: 5px;">
+      <table style="border:none; border-collapse:collapse;">
+        <tr>
+          <td style="border:none"><i>A =</i></td>
+          <td style="border:none">
+            <table>
+              <tr>
+                <th style="padding: 4px; margin: 5px;">Age</th>
+                <th style="padding: 4px; margin: 5px;">Name</th>
+              </tr>
+              <tr>
+                <td style="padding: 4px; margin: 5px;">27</td>
+                <td style="padding: 4px; margin: 5px;">Jonah</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px; margin: 5px;">18</td>
+                <td style="padding: 4px; margin: 5px;">Alan</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px; margin: 5px;">28</td>
+                <td style="padding: 4px; margin: 5px;">Glory</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px; margin: 5px;">18</td>
+                <td style="padding: 4px; margin: 5px;">Popeye</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px; margin: 5px;">28</td>
+                <td style="padding: 4px; margin: 5px;">Alan</td>
+              </tr>
+            </table>
+          </td>
+          <td style="border:none; padding-left:1.5em;" rowspan="2"></td>
+          <td style="border:none"><i>B =</i></td>
+          <td style="border:none">
+            <table>
+              <tr>
+                <th style="padding: 4px; margin: 5px;">Character</th>
+                <th style="padding: 4px; margin: 5px;">Nemesis</th>
+              </tr>
+              <tr>
+                <td style="padding: 4px; margin: 5px;">Jonah</td>
+                <td style="padding: 4px; margin: 5px;">Whales</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px; margin: 5px;">Jonah</td>
+                <td style="padding: 4px; margin: 5px;">Spiders</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px; margin: 5px;">Alan</td>
+                <td style="padding: 4px; margin: 5px;">Ghosts</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px; margin: 5px;">Alan</td>
+                <td style="padding: 4px; margin: 5px;">Zombies</td>
+              </tr>
+              <tr>
+                <td style="padding: 4px; margin: 5px;">Glory</td>
+                <td style="padding: 4px; margin: 5px;">Buffy</td>
+              </tr>
+            </table>
+          </td>
+        </tr>
+        <tr>
+          <td style="border:none">
+            <i>j<sub>A</sub> =</i>
+          </td>
+          <td style="border:none">
+            <i><code>Name</code> (i.e. column 1)</i>
+          </td>
+          <td style="border:none">
+            <i>j<sub>B</sub> =</i>
+          </td>
+          <td style="border:none">
+            <i><code>Character</code> (i.e. column 0)</i>
+          </td>
+        </tr>
+      </table>
+    </td>
+  </tr>
+</table>
+
+**Output**
+
+| A_age | A_name | B_character | B_nemesis |
+| ----- | ------ | ----------- | --------- |
+| 27    | Jonah  | Jonah       | Whales    |
+| 27    | Jonah  | Jonah       | Spiders   |
+| 18    | Alan   | Alan        | Ghosts    |
+| 18    | Alan   | Alan        | Zombies   |
+| 28    | Glory  | Glory       | Buffy     |
+| 28    | Alan   | Alan        | Ghosts    |
+| 28    | Alan   | Alan        | Zombies   |
+
+The order of the rows in the output table is not significant.
+
+# --hints--
+
+`hashJoin` should be a function.
+
+```js
+assert(typeof hashJoin === 'function');
+```
+
+`hashJoin([{ age: 27, name: "Jonah" }, { age: 18, name: "Alan" }, { age: 28, name: "Glory" }, { age: 18, name: "Popeye" }, { age: 28, name: "Alan" }], [{ character: "Jonah", nemesis: "Whales" }, { character: "Jonah", nemesis: "Spiders" }, { character: "Alan", nemesis: "Ghosts" }, { character:"Alan", nemesis: "Zombies" }, { character: "Glory", nemesis: "Buffy" }, { character: "Bob", nemesis: "foo" }])` should return `[{"A_age": 27,"A_name": "Jonah", "B_character": "Jonah", "B_nemesis": "Whales"}, {"A_age": 27,"A_name": "Jonah", "B_character": "Jonah", "B_nemesis": "Spiders"}, {"A_age": 18,"A_name": "Alan", "B_character": "Alan", "B_nemesis": "Ghosts"}, {"A_age": 18,"A_name": "Alan", "B_character": "Alan", "B_nemesis": "Zombies"}, {"A_age": 28,"A_name": "Glory", "B_character": "Glory", "B_nemesis": "Buffy"}, {"A_age": 28,"A_name": "Alan", "B_character": "Alan", "B_nemesis": "Ghosts"}, {"A_age": 28,"A_name": "Alan", "B_character": "Alan", "B_nemesis": "Zombies"}]`
+
+```js
+assert.deepEqual(hashJoin(hash1, hash2), res);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const hash1 = [
+    { age: 27, name: 'Jonah' },
+    { age: 18, name: 'Alan' },
+    { age: 28, name: 'Glory' },
+    { age: 18, name: 'Popeye' },
+    { age: 28, name: 'Alan' }
+];
+
+const hash2 = [
+    { character: 'Jonah', nemesis: 'Whales' },
+    { character: 'Jonah', nemesis: 'Spiders' },
+    { character: 'Alan', nemesis: 'Ghosts' },
+    { character: 'Alan', nemesis: 'Zombies' },
+    { character: 'Glory', nemesis: 'Buffy' },
+    { character: 'Bob', nemesis: 'foo' }
+];
+
+const res = [
+    { A_age: 27, A_name: 'Jonah', B_character: 'Jonah', B_nemesis: 'Whales' },
+    { A_age: 27, A_name: 'Jonah', B_character: 'Jonah', B_nemesis: 'Spiders' },
+    { A_age: 18, A_name: 'Alan', B_character: 'Alan', B_nemesis: 'Ghosts' },
+    { A_age: 18, A_name: 'Alan', B_character: 'Alan', B_nemesis: 'Zombies' },
+    { A_age: 28, A_name: 'Glory', B_character: 'Glory', B_nemesis: 'Buffy' },
+    { A_age: 28, A_name: 'Alan', B_character: 'Alan', B_nemesis: 'Ghosts' },
+    { A_age: 28, A_name: 'Alan', B_character: 'Alan', B_nemesis: 'Zombies' }
+];
+
+const bench1 = [{ name: 'u2v7v', num: 1 }, { name: 'n53c8', num: 10 }, { name: 'oysce', num: 9 }, { name: '0mto2s', num: 1 }, { name: 'vkh5id', num: 4 }, { name: '5od0cf', num: 8 }, { name: 'uuulue', num: 10 }, { name: '3rgsbi', num: 9 }, { name: 'kccv35r', num: 4 }, { name: '80un74', num: 9 }, { name: 'h4pp3', num: 6 }, { name: '51bit', num: 7 }, { name: 'j9ndf', num: 8 }, { name: 'vf3u1', num: 10 }, { name: 'g0bw0om', num: 10 }, { name: 'j031x', num: 7 }, { name: 'ij3asc', num: 9 }, { name: 'byv83y', num: 8 }, { name: 'bjzp4k', num: 4 }, { name: 'f3kbnm', num: 10 }];
+const bench2 = [{ friend: 'o8b', num: 8 }, { friend: 'ye', num: 2 }, { friend: '32i', num: 5 }, { friend: 'uz', num: 3 }, { friend: 'a5k', num: 4 }, { friend: 'uad', num: 7 }, { friend: '3w5', num: 10 }, { friend: 'vw', num: 10 }, { friend: 'ah', num: 4 }, { friend: 'qv', num: 7 }, { friend: 'ozv', num: 2 }, { friend: '9ri', num: 10 }, { friend: '7nu', num: 4 }, { friend: 'w3', num: 9 }, { friend: 'tgp', num: 8 }, { friend: 'ibs', num: 1 }, { friend: 'ss7', num: 6 }, { friend: 'g44', num: 9 }, { friend: 'tab', num: 9 }, { friend: 'zem', num: 10 }];
+```
+
+## --seed-contents--
+
+```js
+function hashJoin(hash1, hash2) {
+
+  return [];
+}
+```
+
+# --solutions--
+
+```js
+function hashJoin(hash1, hash2) {
+  const hJoin = (tblA, tblB, strJoin) => {
+    const [jA, jB] = strJoin.split('=');
+    const M = tblB.reduce((a, x) => {
+      const id = x[jB];
+      return (
+        a[id] ? a[id].push(x) : (a[id] = [x]),
+        a
+      );
+    }, {});
+
+    return tblA.reduce((a, x) => {
+      const match = M[x[jA]];
+      return match ? (
+                a.concat(match.map(row => dictConcat(x, row)))
+            ) : a;
+    }, []);
+  };
+
+  const dictConcat = (dctA, dctB) => {
+    const ok = Object.keys;
+    return ok(dctB).reduce(
+            (a, k) => (a[`B_${k}`] = dctB[k]) && a,
+            ok(dctA).reduce(
+                (a, k) => (a[`A_${k}`] = dctA[k]) && a, {}
+            )
+        );
+  };
+
+  return hJoin(hash1, hash2, 'name=character');
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/heronian-triangles.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/heronian-triangles.md
new file mode 100644
index 00000000000..35c83855e3c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/heronian-triangles.md
@@ -0,0 +1,155 @@
+---
+id: 595b98f8b5a2245e243aa831
+title: Heronian triangles
+challengeType: 1
+forumTopicId: 302285
+dashedName: heronian-triangles
+---
+
+# --description--
+
+Hero's formula for the area of a triangle given the length of its three sides `a`, `b`, and `c` is given by:
+
+$A = \\sqrt{s(s-a)(s-b)(s-c)},$
+
+where `s` is half the perimeter of the triangle; that is,
+
+$s=\\frac{a+b+c}{2}.$
+
+Heronian triangles are triangles whose sides and area are all integers.
+
+An example is the triangle with sides `3, 4, 5` whose area is `6` (and whose perimeter is `12`).
+
+Note that any triangle whose sides are all an integer multiple of `3, 4, 5`; such as `6, 8, 10,` will also be a Heronian triangle.
+
+Define a Primitive Heronian triangle as a Heronian triangle where the greatest common divisor
+
+of all three sides is `1` (unity).
+
+This will exclude, for example, triangle `6, 8, 10.`
+
+# --instructions--
+
+Implement a function based on Hero's formula that returns the first <code>n<sub>th</sub></code> ordered triangles in an array of arrays.
+
+# --hints--
+
+`heronianTriangle` should be a function.
+
+```js
+assert(typeof heronianTriangle === 'function');
+```
+
+`heronianTriangle(10)` should return `[[3, 4, 5], [5, 5, 6], [5, 5, 8], [4, 13, 15], [5, 12, 13], [9, 10, 17], [3, 25, 26], [7, 15, 20], [10, 13, 13], [8, 15, 17]]`
+
+```js
+assert.deepEqual(heronianTriangle(testCases[0]), res[0]);
+```
+
+`heronianTriangle(15)` should return `[[3, 4, 5], [5, 5, 6], [5, 5, 8], [4, 13, 15], [5, 12, 13], [9, 10, 17], [3, 25, 26], [7, 15, 20], [10, 13, 13], [8, 15, 17], [13, 13, 24], [6, 25, 29], [11, 13, 20], [5, 29, 30], [13, 14, 15]],`
+
+```js
+assert.deepEqual(heronianTriangle(testCases[1]), res[1]);
+```
+
+`heronianTriangle(20)` should return `[[3, 4, 5], [5, 5, 6], [5, 5, 8], [4, 13, 15], [5, 12, 13], [9, 10, 17], [3, 25, 26], [7, 15, 20], [10, 13, 13], [8, 15, 17], [13, 13, 24], [6, 25, 29], [11, 13, 20], [5, 29, 30], [13, 14, 15], [10, 17, 21], [7, 24, 25], [8, 29, 35], [12, 17, 25], [4, 51, 53]],`
+
+```js
+assert.deepEqual(heronianTriangle(testCases[2]), res[2]);
+```
+
+`heronianTriangle(25)` should return `[[3, 4, 5], [5, 5, 6], [5, 5, 8], [4, 13, 15], [5, 12, 13], [9, 10, 17], [3, 25, 26], [7, 15, 20], [10, 13, 13], [8, 15, 17], [13, 13, 24], [6, 25, 29], [11, 13, 20], [5, 29, 30], [13, 14, 15], [10, 17, 21], [7, 24, 25], [8, 29, 35], [12, 17, 25], [4, 51, 53], [19, 20, 37],[16, 17, 17], [17, 17, 30], [16, 25, 39], [13, 20, 21]]`
+
+```js
+assert.deepEqual(heronianTriangle(testCases[3]), res[3]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const testCases = [10, 15, 20, 25];
+
+const res = [
+  [[3, 4, 5], [5, 5, 6], [5, 5, 8], [4, 13, 15], [5, 12, 13], [9, 10, 17], [3, 25, 26], [7, 15, 20], [10, 13, 13], [8, 15, 17]],
+  [[3, 4, 5], [5, 5, 6], [5, 5, 8], [4, 13, 15], [5, 12, 13], [9, 10, 17], [3, 25, 26], [7, 15, 20], [10, 13, 13], [8, 15, 17], [13, 13, 24], [6, 25, 29], [11, 13, 20], [5, 29, 30], [13, 14, 15]],
+  [[3, 4, 5], [5, 5, 6], [5, 5, 8], [4, 13, 15], [5, 12, 13], [9, 10, 17], [3, 25, 26], [7, 15, 20], [10, 13, 13], [8, 15, 17], [13, 13, 24], [6, 25, 29], [11, 13, 20], [5, 29, 30], [13, 14, 15], [10, 17, 21], [7, 24, 25], [8, 29, 35], [12, 17, 25], [4, 51, 53]],
+  [[3, 4, 5], [5, 5, 6], [5, 5, 8], [4, 13, 15], [5, 12, 13], [9, 10, 17], [3, 25, 26], [7, 15, 20], [10, 13, 13], [8, 15, 17], [13, 13, 24], [6, 25, 29], [11, 13, 20], [5, 29, 30], [13, 14, 15], [10, 17, 21], [7, 24, 25], [8, 29, 35], [12, 17, 25], [4, 51, 53], [19, 20, 37], [16, 17, 17], [17, 17, 30], [16, 25, 39], [13, 20, 21]]
+];
+```
+
+## --seed-contents--
+
+```js
+function heronianTriangle(n) {
+
+
+  return [];
+}
+```
+
+# --solutions--
+
+```js
+function heronianTriangle(n) {
+  const list = [];
+  const result = [];
+
+  let j = 0;
+  for (let c = 1; c <= 200; c++) {
+    for (let b = 1; b <= c; b++) {
+      for (let a = 1; a <= b; a++) {
+        if (gcd(gcd(a, b), c) === 1 && isHeron(heronArea(a, b, c))) {
+          list[j++] = new Array(a, b, c, heronArea(a, b, c));
+        }
+      }
+    }
+  }
+
+  sort(list);
+
+  for (let i = 0; i < n; i++) {
+    result[i] = [list[i][0], list[i][1], list[i][2]];
+  }
+
+  return result;
+
+  function heronArea(a, b, c) {
+    const s = (a + b + c) / 2;
+    return Math.sqrt(s * (s - a) * (s - b) * (s - c));
+  }
+
+  function isHeron(h) { return h % 1 === 0 && h > 0; }
+
+  function gcd(a, b) {
+    let leftover = 1;
+    let dividend = a > b ? a : b;
+    let divisor = a > b ? b : a;
+    while (leftover !== 0) {
+      leftover = dividend % divisor;
+      if (leftover > 0) {
+        dividend = divisor;
+        divisor = leftover;
+      }
+    }
+    return divisor;
+  }
+
+  function sort(arg) {
+    let swapped = true;
+    let temp = [];
+    while (swapped) {
+      swapped = false;
+      for (let i = 1; i < arg.length; i++) {
+        if (arg[i][4] < arg[i - 1][4] || arg[i][4] === arg[i - 1][4] && arg[i][3] < arg[i - 1][3]) {
+          temp = arg[i];
+          arg[i] = arg[i - 1];
+          arg[i - 1] = temp;
+          swapped = true;
+        }
+      }
+    }
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hofstadter-figure-figure-sequences.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hofstadter-figure-figure-sequences.md
new file mode 100644
index 00000000000..e05d87270f2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hofstadter-figure-figure-sequences.md
@@ -0,0 +1,158 @@
+---
+id: 59622f89e4e137560018a40e
+title: Hofstadter Figure-Figure sequences
+challengeType: 1
+forumTopicId: 302286
+dashedName: hofstadter-figure-figure-sequences
+---
+
+# --description--
+
+The Hofstadter Figure-Figure sequences $R_n$ and $S_n$ are given by
+
+$R_1 = 1\\ ;\\ S_1 = 2 \\\\R_n = R_{n-1} + S_{n-1}, \\quad n>1.$
+
+Specifically, the sequence $R_n$ contains the values
+
+<pre>1, 3, 7, 12, 18, ...</pre>
+
+and the sequence $S_n$ contains the values
+
+<pre>2, 4, 5, 6, 8, ...</pre>
+
+The sequence $R_n$ is defined by the recurrence relation $R_n = R_{n-1} + S_{n-1}$, while $S_n$ is defined as sequence of positive integers that are not included in the sequence $R_n$.
+
+# --instructions--
+
+Create two functions named `ffr` and `ffs` that return `R(n)` or `S(n)`, respectively, for any index `n`. Note that the Hofstadter Figure-Figure sequences are 1-indexed, with $R_1 = 1$ and $S_1 = 2$.
+
+No maximum value for `n` should be assumed.
+
+**References**<p>Rosetta: <a href='https://rosettacode.org/wiki/Hofstadter_Figure-Figure_sequences' target='_blank'>Hofstadter Figure-Figure sequences</a></p>.
+
+
+# --hints--
+
+`ffr` should be a function.
+
+```js
+assert(typeof ffr === 'function');
+```
+
+`ffs` should be a function.
+
+```js
+assert(typeof ffs === 'function');
+```
+
+`ffr` should return integer.
+
+```js
+assert(Number.isInteger(ffr(1)));
+```
+
+`ffs` should return integer.
+
+```js
+assert(Number.isInteger(ffs(1)));
+```
+
+`ffr(10)` should return `69`
+
+```js
+assert.equal(ffr(ffrParamRes[0][0]), ffrParamRes[0][1]);
+```
+
+`ffr(50)` should return `1509`
+
+```js
+assert.equal(ffr(ffrParamRes[1][0]), ffrParamRes[1][1]);
+```
+
+`ffr(100)` should return `5764`
+
+```js
+assert.equal(ffr(ffrParamRes[2][0]), ffrParamRes[2][1]);
+```
+
+`ffr(1000)` should return `526334`
+
+```js
+assert.equal(ffr(ffrParamRes[3][0]), ffrParamRes[3][1]);
+```
+
+`ffs(10)` should return `14`
+
+```js
+assert.equal(ffs(ffsParamRes[0][0]), ffsParamRes[0][1]);
+```
+
+`ffs(50)` should return `59`
+
+```js
+assert.equal(ffs(ffsParamRes[1][0]), ffsParamRes[1][1]);
+```
+
+`ffs(100)` should return `112`
+
+```js
+assert.equal(ffs(ffsParamRes[2][0]), ffsParamRes[2][1]);
+```
+
+`ffs(1000)` should return `1041`
+
+```js
+assert.equal(ffs(ffsParamRes[3][0]), ffsParamRes[3][1]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const ffrParamRes = [[10, 69], [50, 1509], [100, 5764], [1000, 526334]];
+const ffsParamRes = [[10, 14], [50, 59], [100, 112], [1000, 1041]];
+```
+
+## --seed-contents--
+
+```js
+function ffr(n) {
+  return n;
+}
+
+function ffs(n) {
+  return n;
+}
+```
+
+# --solutions--
+
+```js
+const R = [null, 1];
+const S = [null, 2];
+
+function extendSequences (n) {
+  let current = Math.max(R[R.length - 1], S[S.length - 1]);
+  let i;
+  while (R.length <= n || S.length <= n) {
+    i = Math.min(R.length, S.length) - 1;
+    current += 1;
+    if (current === R[i] + S[i]) {
+      R.push(current);
+    } else {
+      S.push(current);
+    }
+  }
+}
+
+function ffr (n) {
+  extendSequences(n);
+  return R[n];
+}
+
+function ffs (n) {
+  extendSequences(n);
+  return S[n];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hofstadter-q-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hofstadter-q-sequence.md
new file mode 100644
index 00000000000..27c1bdb4dba
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/hofstadter-q-sequence.md
@@ -0,0 +1,92 @@
+---
+id: 59637c4d89f6786115efd814
+title: Hofstadter Q sequence
+challengeType: 1
+forumTopicId: 302287
+dashedName: hofstadter-q-sequence
+---
+
+# --description--
+
+The Hofstadter Q sequence is defined as:
+
+$Q(1)=Q(2)=1, \\\\ Q(n)=Q\\big(n-Q(n-1)\\big)+Q\\big(n-Q(n-2)), \\quad n>2.$
+
+It is defined like the Fibonacci sequence, but whereas the next term in the Fibonacci sequence is the sum of the previous two terms, in the Q sequence the previous two terms tell you how far to go back in the Q sequence to find the two numbers to sum to make the next term of the sequence.
+
+# --instructions--
+
+Implement the Hofstadter Q Sequence equation as a function. The function should accept number, `n`, and return an integer.
+
+# --hints--
+
+`hofstadterQ` should be a function.
+
+```js
+assert(typeof hofstadterQ === 'function');
+```
+
+`hofstadterQ()` should return `integer`
+
+```js
+assert(Number.isInteger(hofstadterQ(1000)));
+```
+
+`hofstadterQ(1000)` should return `502`
+
+```js
+assert.equal(hofstadterQ(testCase[0]), res[0]);
+```
+
+`hofstadterQ(1500)` should return `755`
+
+```js
+assert.equal(hofstadterQ(testCase[1]), res[1]);
+```
+
+`hofstadterQ(2000)` should return `1005`
+
+```js
+assert.equal(hofstadterQ(testCase[2]), res[2]);
+```
+
+`hofstadterQ(2500)` should return `1261`
+
+```js
+assert.equal(hofstadterQ(testCase[3]), res[3]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const testCase = [1000, 1500, 2000, 2500];
+const res = [502, 755, 1005, 1261];
+```
+
+## --seed-contents--
+
+```js
+function hofstadterQ(n) {
+
+  return n;
+}
+```
+
+# --solutions--
+
+```js
+function hofstadterQ (n) {
+  const memo = [1, 1, 1];
+  const Q = function (i) {
+    let result = memo[i];
+    if (typeof result !== 'number') {
+      result = Q(i - Q(i - 1)) + Q(i - Q(i - 2));
+      memo[i] = result;
+    }
+    return result;
+  };
+  return Q(n);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/i-before-e-except-after-c.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/i-before-e-except-after-c.md
new file mode 100644
index 00000000000..ba038c108bb
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/i-before-e-except-after-c.md
@@ -0,0 +1,101 @@
+---
+id: 5a23c84252665b21eecc7eb0
+title: I before E except after C
+challengeType: 1
+forumTopicId: 302288
+dashedName: i-before-e-except-after-c
+---
+
+# --description--
+
+**<a href="http://www.rosettacode.org/wiki/I_before_E_except_after_C" target="_blank" rel="noopener noreferrer nofollow">"I before E, except after C"</a>** is a general rule for English language spelling. If one is unsure whether a word is spelled with the digraph `ei` or `ie`, the rhyme suggests that the correct order is `ie` unless the preceding letter is `c`, in which case it may be `ei`.
+
+Using the words provided, check if the two sub-clauses of the phrase are plausible individually:
+
+<ol>
+  <li>
+    <i>"I before E when not preceded by C".</i>
+  </li>
+  <li>
+    <i>"E before I when preceded by C".</i>
+  </li>
+</ol>
+
+If both sub-phrases are plausible then the original phrase can be said to be plausible.
+
+# --instructions--
+
+Write a function that accepts a word and check if the word follows this rule. The function should return true if the word follows the rule and false if it does not.
+
+# --hints--
+
+`IBeforeExceptC` should be a function.
+
+```js
+assert(typeof IBeforeExceptC == 'function');
+```
+
+`IBeforeExceptC("receive")` should return a boolean.
+
+```js
+assert(typeof IBeforeExceptC('receive') == 'boolean');
+```
+
+`IBeforeExceptC("receive")` should return `true`.
+
+```js
+assert.equal(IBeforeExceptC('receive'), true);
+```
+
+`IBeforeExceptC("science")` should return `false`.
+
+```js
+assert.equal(IBeforeExceptC('science'), false);
+```
+
+`IBeforeExceptC("imperceivable")` should return `true`.
+
+```js
+assert.equal(IBeforeExceptC('imperceivable'), true);
+```
+
+`IBeforeExceptC("inconceivable")` should return `true`.
+
+```js
+assert.equal(IBeforeExceptC('inconceivable'), true);
+```
+
+`IBeforeExceptC("insufficient")` should return `false`.
+
+```js
+assert.equal(IBeforeExceptC('insufficient'), false);
+```
+
+`IBeforeExceptC("omniscient")` should return `false`.
+
+```js
+assert.equal(IBeforeExceptC('omniscient'), false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function IBeforeExceptC(word) {
+
+}
+```
+
+# --solutions--
+
+```js
+function IBeforeExceptC(word)
+{
+    if(word.indexOf("c")==-1 && word.indexOf("ie")!=-1)
+        return true;
+    else if(word.indexOf("cei")!=-1)
+        return true;
+    return false;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/iban.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/iban.md
new file mode 100644
index 00000000000..dde7926e041
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/iban.md
@@ -0,0 +1,104 @@
+---
+id: 5a23c84252665b21eecc7eaf
+title: IBAN
+challengeType: 1
+forumTopicId: 302289
+dashedName: iban
+---
+
+# --description--
+
+The International Bank Account Number (IBAN) is an internationally agreed means of identifying bank accounts across national borders with a reduced risk of propagating transcription errors.
+
+The <abbr title="International Bank Account Number">IBAN</abbr> consists of up to 34 alphanumeric characters:
+
+<ul>
+  <li>first the two-letter <abbr title="International Organization for Standardization">ISO</abbr> 3166-1 alpha-2 country code</li>
+  <li>then two check digits, and</li>
+  <li>finally a country-specific Basic Bank Account Number (BBAN).</li>
+</ul>
+
+The check digits enable a sanity check of the bank account number to confirm its integrity even before submitting a transaction.
+
+# --instructions--
+
+Write a function that takes IBAN string as parameter. If it is valid return true. Otherwise, return false.
+
+# --hints--
+
+`isValid` should be a function.
+
+```js
+assert(typeof isValid == 'function');
+```
+
+`isValid("GB82 WEST 1234 5698 7654 32")` should return a boolean.
+
+```js
+assert(typeof isValid('GB82 WEST 1234 5698 7654 32') == 'boolean');
+```
+
+`isValid("GB82 WEST 1234 5698 7654 32")` should return `true`.
+
+```js
+assert.equal(isValid('GB82 WEST 1234 5698 7654 32'), true);
+```
+
+`isValid("GB82 WEST 1.34 5698 7654 32")` should return `false`.
+
+```js
+assert.equal(isValid('GB82 WEST 1.34 5698 7654 32'), false);
+```
+
+`isValid("GB82 WEST 1234 5698 7654 325")` should return `false`.
+
+```js
+assert.equal(isValid('GB82 WEST 1234 5698 7654 325'), false);
+```
+
+`isValid("GB82 TEST 1234 5698 7654 32")` should return `false`.
+
+```js
+assert.equal(isValid('GB82 TEST 1234 5698 7654 32'), false);
+```
+
+`isValid("SA03 8000 0000 6080 1016 7519")` should return `true`.
+
+```js
+assert.equal(isValid('SA03 8000 0000 6080 1016 7519'), true);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function isValid(iban) {
+
+}
+```
+
+# --solutions--
+
+```js
+function isValid(iban) {
+  var ibanLen = {
+    NO:15, BE:16, DK:18, FI:18, FO:18, GL:18, NL:18, MK:19,
+    SI:19, AT:20, BA:20, EE:20, KZ:20, LT:20, LU:20, CR:21,
+    CH:21, HR:21, LI:21, LV:21, BG:22, BH:22, DE:22, GB:22,
+    GE:22, IE:22, ME:22, RS:22, AE:23, GI:23, IL:23, AD:24,
+    CZ:24, ES:24, MD:24, PK:24, RO:24, SA:24, SE:24, SK:24,
+    VG:24, TN:24, PT:25, IS:26, TR:26, FR:27, GR:27, IT:27,
+    MC:27, MR:27, SM:27, AL:28, AZ:28, CY:28, DO:28, GT:28,
+    HU:28, LB:28, PL:28, BR:29, PS:29, KW:30, MU:30, MT:31
+  }
+    iban = __helpers.removeWhiteSpace(iban)
+    if (!iban.match(/^[\dA-Z]+$/)) return false
+    var len = iban.length
+    if (len != ibanLen[iban.substring(0,2)]) return false
+    iban = iban.substring(4) + iban.substring(0,4)
+    for (var s='', i=0; i<len; i+=1) s+=parseInt(iban.charAt(i),36)
+    for (var m=s.substring(0,15)%97, s=s.substring(15); s; s=s.substring(13)) m=(m+s.substring(0,13))%97
+    return m == 1
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/identity-matrix.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/identity-matrix.md
new file mode 100644
index 00000000000..dba37b7cafa
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/identity-matrix.md
@@ -0,0 +1,88 @@
+---
+id: 5a23c84252665b21eecc7eb1
+title: Identity matrix
+challengeType: 1
+forumTopicId: 302290
+dashedName: identity-matrix
+---
+
+# --description--
+
+An *identity matrix* is a square matrix of size \\( n \\times n \\), where the diagonal elements are all `1`s (ones), and all the other elements are all `0`s (zeroes).
+
+<ul>
+  <li style='list-style: none;'>\(\displaystyle I_{n}=\begin{bmatrix} 1 &#x26; 0 &#x26; 0 \cr 0 &#x26; 1 &#x26; 0 \cr 0 &#x26; 0 &#x26; 1 \cr \end{bmatrix}\)</li>
+</ul>
+
+# --instructions--
+
+Write a function that takes a number `n` as a parameter and returns the identity matrix of order \\( n \\times n \\).
+
+# --hints--
+
+`idMatrix` should be a function.
+
+```js
+assert(typeof idMatrix == 'function');
+```
+
+`idMatrix(1)` should return an array.
+
+```js
+assert(Array.isArray(idMatrix(1)));
+```
+
+`idMatrix(1)` should return `[ [ 1 ] ]`.
+
+```js
+assert.deepEqual(idMatrix(1), results[0]);
+```
+
+`idMatrix(2)` should return `[ [ 1, 0 ], [ 0, 1 ] ]`.
+
+```js
+assert.deepEqual(idMatrix(2), results[1]);
+```
+
+`idMatrix(3)` should return `[ [ 1, 0, 0 ], [ 0, 1, 0 ], [ 0, 0, 1 ] ]`.
+
+```js
+assert.deepEqual(idMatrix(3), results[2]);
+```
+
+`idMatrix(4)` should return `[ [ 1, 0, 0, 0 ], [ 0, 1, 0, 0 ], [ 0, 0, 1, 0 ], [ 0, 0, 0, 1 ] ]`.
+
+```js
+assert.deepEqual(idMatrix(4), results[3]);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+let results=[[ [ 1 ] ],
+[ [ 1, 0 ], [ 0, 1 ] ],
+[ [ 1, 0, 0 ], [ 0, 1, 0 ], [ 0, 0, 1 ] ],
+[ [ 1, 0, 0, 0 ], [ 0, 1, 0, 0 ], [ 0, 0, 1, 0 ], [ 0, 0, 0, 1 ] ]]
+```
+
+## --seed-contents--
+
+```js
+function idMatrix(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function idMatrix(n) {
+    return Array.apply(null, new Array(n)).map(function (x, i, xs) {
+        return xs.map(function (_, k) {
+            return i === k ? 1 : 0;
+        })
+    });
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/iterated-digits-squaring.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/iterated-digits-squaring.md
new file mode 100644
index 00000000000..c64fdc125d7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/iterated-digits-squaring.md
@@ -0,0 +1,96 @@
+---
+id: 5a23c84252665b21eecc7ec1
+title: Iterated digits squaring
+challengeType: 1
+forumTopicId: 302291
+dashedName: iterated-digits-squaring
+---
+
+# --description--
+
+If you add the square of the digits of a Natural number (an integer bigger than zero), you always end with either 1 or 89:
+
+<pre>15 -> 26 -> 40 -> 16 -> 37 -> 58 -> 89
+7 -> 49 -> 97 -> 130 -> 10 -> 1
+</pre>
+
+# --instructions--
+
+Write a function that takes a number as a parameter and returns 1 or 89 after performing the mentioned process.
+
+# --hints--
+
+`iteratedSquare` should be a function.
+
+```js
+assert(typeof iteratedSquare == 'function');
+```
+
+`iteratedSquare(4)` should return a number.
+
+```js
+assert(typeof iteratedSquare(4) == 'number');
+```
+
+`iteratedSquare(4)` should return `89`.
+
+```js
+assert.equal(iteratedSquare(4), 89);
+```
+
+`iteratedSquare(7)` should return `1`.
+
+```js
+assert.equal(iteratedSquare(7), 1);
+```
+
+`iteratedSquare(15)` should return `89`.
+
+```js
+assert.equal(iteratedSquare(15), 89);
+```
+
+`iteratedSquare(20)` should return `89`.
+
+```js
+assert.equal(iteratedSquare(20), 89);
+```
+
+`iteratedSquare(70)` should return `1`.
+
+```js
+assert.equal(iteratedSquare(70), 1);
+```
+
+`iteratedSquare(100)` should return `1`.
+
+```js
+assert.equal(iteratedSquare(100), 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function iteratedSquare(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function iteratedSquare(n) {
+    var total;
+    while (n != 89 && n != 1) {
+        total = 0;
+        while (n > 0) {
+            total += Math.pow(n % 10, 2);
+            n = Math.floor(n/10);
+        }
+        n = total;
+    }
+    return n;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/jaro-distance.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/jaro-distance.md
new file mode 100644
index 00000000000..2eaea26bbc4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/jaro-distance.md
@@ -0,0 +1,146 @@
+---
+id: 5a23c84252665b21eecc7ec2
+title: Jaro distance
+challengeType: 1
+forumTopicId: 302292
+dashedName: jaro-distance
+---
+
+# --description--
+
+The Jaro distance is a measure of similarity between two strings. The higher the Jaro distance for two strings is, the more similar the strings are. The score is normalized such that `0` equates to no similarity and `1` is an exact match.
+
+**Definition**
+
+The Jaro distance \\( d_j \\) of two given strings \\(s_1\\) and \\(s_2\\) is
+
+\\begin{align}d_j = \\begin{cases}0& & \\text{if }m=0 \\\\\\\\{\\frac {1}{3}}\\left({\\frac {m}{|s\_{1}|}}+{\\frac {m}{|s\_{2}|}}+{\\frac {m-t}{m}}\\right)& & \\text{otherwise}\\end{cases}\\end{align}
+
+Where:
+
+<ul>
+  <li>\(m\) is the number of <i>matching characters</i>;</li>
+  <li> \(t\) is half the number of <i>transpositions</i>.</li>
+</ul>
+
+Two characters from \\(s_1\\) and \\(s_2\\) respectively, are considered *matching* only if they are the same and not farther than \\(\\left\\lfloor\\frac{\\max(|s_1|,|s_2|)}{2}\\right\\rfloor-1\\).
+
+Each character of \\(s_1\\) is compared with all its matching characters in \\(s_2\\) . The number of matching (but different sequence order) characters divided by 2 defines the number of *transpositions*.
+
+**Example**
+
+Given the strings \\(s_1\\) *DWAYNE* and \\(s_2\\) *DUANE* we find:
+
+<ul>
+  <li>\(m = 4\)</li>
+  <li>\(|s_1| = 6\)</li>
+  <li>\(|s_2| = 5\)</li>
+  <li>\(t = 0\)</li>
+</ul>
+
+We find a Jaro score of: \\(d_j = \\frac{1}{3}\\left(\\frac{4}{6} + \\frac{4}{5} + \\frac{4-0}{4}\\right) = 0.822\\).
+
+# --instructions--
+
+Write a function a that takes two strings as parameters and returns the associated Jaro distance.
+
+# --hints--
+
+`jaro` should be a function.
+
+```js
+assert(typeof jaro == 'function');
+```
+
+`jaro("MARTHA", "MARHTA")` should return a number.
+
+```js
+assert(typeof jaro('MARTHA', 'MARHTA') == 'number');
+```
+
+`jaro("MARTHA", "MARHTA")` should return `0.9444444444444445`.
+
+```js
+assert.equal(jaro('MARTHA', 'MARHTA'), 0.9444444444444445);
+```
+
+`jaro("DIXON", "DICKSONX")` should return `0.7666666666666666`.
+
+```js
+assert.equal(jaro('DIXON', 'DICKSONX'), 0.7666666666666666);
+```
+
+`jaro("JELLYFISH", "SMELLYFISH")` should return `0.8962962962962964`.
+
+```js
+assert.equal(jaro('JELLYFISH', 'SMELLYFISH'), 0.8962962962962964);
+```
+
+`jaro("HELLOS", "CHELLO")` should return `0.888888888888889`.
+
+```js
+assert.equal(jaro('HELLOS', 'CHELLO'), 0.888888888888889);
+```
+
+`jaro("ABCD", "BCDA")` should return `0.8333333333333334`.
+
+```js
+assert.equal(jaro('ABCD', 'BCDA'), 0.8333333333333334);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function jaro(s, t) {
+
+}
+```
+
+# --solutions--
+
+```js
+function jaro(s, t) {
+  var s_len = s.length;
+  var t_len = t.length;
+
+  if (s_len == 0 && t_len == 0) return 1;
+
+  var match_distance = Math.max(s_len, t_len) / 2 - 1;
+
+  var s_matches = new Array(s_len);
+  var t_matches = new Array(t_len);
+
+  var matches = 0;
+  var transpositions = 0;
+
+  for (var i = 0; i < s_len; i++) {
+    var start = Math.max(0, i - match_distance);
+    var end = Math.min(i + match_distance + 1, t_len);
+
+    for (var j = start; j < end; j++) {
+      if (t_matches[j]) continue;
+      if (s.charAt(i) != t.charAt(j)) continue;
+      s_matches[i] = true;
+      t_matches[j] = true;
+      matches++;
+      break;
+    }
+  }
+
+  if (matches == 0) return 0;
+
+  var k = 0;
+  for (var i = 0; i < s_len; i++) {
+    if (!s_matches[i]) continue;
+    while (!t_matches[k]) k++;
+    if (s.charAt(i) != t.charAt(k)) transpositions++;
+    k++;
+  }
+
+  return ((matches / s_len) +
+    (matches / t_len) +
+    ((matches - transpositions / 2.0) / matches)) / 3.0;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/jortsort.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/jortsort.md
new file mode 100644
index 00000000000..1bb9d70e909
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/jortsort.md
@@ -0,0 +1,90 @@
+---
+id: 5a23c84252665b21eecc7ec4
+title: JortSort
+challengeType: 1
+forumTopicId: 302293
+dashedName: jortsort
+---
+
+# --description--
+
+jortSort is a sorting toolset that makes the user do the work and guarantees efficiency because you don't have to sort ever again. It was originally presented by Jenn "Moneydollars" Schiffer at the prestigious JSConf2014.
+
+jortSort should be a function that takes a single array of comparable objects as its argument. It then sorts the array in ascending order and compares the sorted array to the originally provided array. If the arrays match (i.e. the original array was already sorted), the function returns true. If the arrays do not match (i.e. the original array was not sorted), the function returns false.
+
+# --hints--
+
+`jortsort` should be a function.
+
+```js
+assert(typeof jortsort == 'function');
+```
+
+`jortsort([1,2,3,4,5])` should return a boolean.
+
+```js
+assert(typeof jortsort([1, 2, 3, 4, 5]) == 'boolean');
+```
+
+`jortsort([1,2,3,4,5])` should return `true`.
+
+```js
+assert.equal(jortsort([1, 2, 3, 4, 5]), true);
+```
+
+`jortsort([1,2,13,4,5])` should return `false`.
+
+```js
+assert.equal(jortsort([1, 2, 13, 4, 5]), false);
+```
+
+`jortsort([12,4,51,2,4])` should return `false`.
+
+```js
+assert.equal(jortsort([12, 4, 51, 2, 4]), false);
+```
+
+`jortsort([1,2])` should return `true`.
+
+```js
+assert.equal(jortsort([1, 2]), true);
+```
+
+`jortsort([5,4,3,2,1])` should return `false`.
+
+```js
+assert.equal(jortsort([5, 4, 3, 2, 1]), false);
+```
+
+`jortsort([1,1,1,1,1])` should return `true`.
+
+```js
+assert.equal(jortsort([1, 1, 1, 1, 1]), true);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function jortsort(array) {
+
+}
+```
+
+# --solutions--
+
+```js
+function jortsort(array) {
+  // sort the array
+  var originalArray = array.slice(0);
+  array.sort( function(a,b){return a - b} );
+
+  // compare to see if it was originally sorted
+  for (var i = 0; i < originalArray.length; ++i) {
+    if (originalArray[i] !== array[i]) return false;
+  }
+
+  return true;
+};
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/josephus-problem.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/josephus-problem.md
new file mode 100644
index 00000000000..d7e28e5e0c4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/josephus-problem.md
@@ -0,0 +1,98 @@
+---
+id: 5a23c84252665b21eecc7ec5
+title: Josephus problem
+challengeType: 1
+forumTopicId: 302294
+dashedName: josephus-problem
+---
+
+# --description--
+
+Josephus problem is a math puzzle with a grim description: $n$ prisoners are standing on a circle, sequentially numbered from $0$ to $n-1$.
+
+An executioner walks along the circle, starting from prisoner $0$, removing every $k$-th prisoner and killing him.
+
+As the process goes on, the circle becomes smaller and smaller, until only one prisoner remains, who is then freed.
+
+For example, if there are $n=5$ prisoners and $k=2$, the order the prisoners are killed in (let's call it the "killing sequence") will be 1, 3, 0, and 4, and the survivor will be #2.
+
+Given any $n, k > 0$, find out which prisoner will be the final survivor.
+
+In one such incident, there were 41 prisoners and every 3<sup>rd</sup> prisoner was being killed ($k=3$).
+
+Among them was a clever chap name Josephus who worked out the problem, stood at the surviving position, and lived on to tell the tale.
+
+Which number was he?
+
+# --instructions--
+
+Write a function that takes the initial number of prisoners and `k` as parameters and returns the number of the prisoner that survives.
+
+# --hints--
+
+`josephus` should be a function.
+
+```js
+assert(typeof josephus == 'function');
+```
+
+`josephus(30,3)` should return a number.
+
+```js
+assert(typeof josephus(30, 3) == 'number');
+```
+
+`josephus(30,3)` should return `28`.
+
+```js
+assert.equal(josephus(30, 3), 28);
+```
+
+`josephus(30,5)` should return `2`.
+
+```js
+assert.equal(josephus(30, 5), 2);
+```
+
+`josephus(20,2)` should return `8`.
+
+```js
+assert.equal(josephus(20, 2), 8);
+```
+
+`josephus(17,6)` should return `1`.
+
+```js
+assert.equal(josephus(17, 6), 1);
+```
+
+`josephus(29,4)` should return `1`.
+
+```js
+assert.equal(josephus(29, 4), 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function josephus(init, kill) {
+
+}
+```
+
+# --solutions--
+
+```js
+function josephus(init, kill) {
+  const arr = Array.from(Array(init).keys());
+  let curr = -1
+  while (arr.length > 1) {
+    curr = (curr + kill) % arr.length;
+    arr.splice(curr, 1);
+    curr--;
+  }
+  return arr[0];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/k-d-tree.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/k-d-tree.md
new file mode 100644
index 00000000000..9f038dd908d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/k-d-tree.md
@@ -0,0 +1,469 @@
+---
+id: 5a23c84252665b21eecc7ecb
+title: K-d tree
+challengeType: 1
+forumTopicId: 302295
+dashedName: k-d-tree
+---
+
+# --description--
+
+A k-d tree (short for *k*-dimensional tree) is a space-partitioning data structure for organizing points in a k-dimensional space. k-d trees are a useful data structure for several applications, such as searches involving a multidimensional search key (e.g. range searches and nearest neighbor searches). k-d trees are a special case of binary space partitioning trees. k-d trees are not suitable, however, for efficiently finding the nearest neighbor in high dimensional spaces. As a general rule, if the dimensionality is *k*, the number of points in the data, *N*, should be *N* ≫ 2<sup><i>k</i></sup>. Otherwise, when k-d trees are used with high-dimensional data, most of the points in the tree will be evaluated and the efficiency is no better than exhaustive search, and other methods such as approximate nearest-neighbor are used instead.
+
+# --instructions--
+
+Write a function to perform a nearest neighbour search using k-d tree. The function takes two parameters: an array of k-dimensional points, and a single k-dimensional point whose nearest neighbour should be returned by the function. A k-dimensional point will be given as an array of k elements.
+
+# --hints--
+
+`kdNN` should be a function.
+
+```js
+assert(typeof kdNN == 'function');
+```
+
+`kdNN([[[2, 3], [5, 4], [9, 6], [4, 7], [8, 1], [7, 2]], [9, 2])` should return an array.
+
+```js
+assert(
+  Array.isArray(
+    kdNN(
+      [
+        [2, 3],
+        [5, 4],
+        [9, 6],
+        [4, 7],
+        [8, 1],
+        [7, 2]
+      ],
+      [9, 2]
+    )
+  )
+);
+```
+
+`kdNN([[[2, 3], [5, 4], [9, 6], [4, 7], [8, 1], [7, 2]], [9, 2])` should return `[ 8, 1 ]`.
+
+```js
+assert.deepEqual(
+  kdNN(
+    [
+      [2, 3],
+      [5, 4],
+      [9, 6],
+      [4, 7],
+      [8, 1],
+      [7, 2]
+    ],
+    [9, 2]
+  ),
+  [8, 1]
+);
+```
+
+`kdNN([[[2, 3], [5, 4], [9, 6], [4, 7], [8, 1], [7, 2]], [7, 1])` should return `[ 8, 1 ]`.
+
+```js
+assert.deepEqual(
+  kdNN(
+    [
+      [2, 3],
+      [5, 4],
+      [9, 6],
+      [4, 7],
+      [8, 1],
+      [7, 2]
+    ],
+    [7, 1]
+  ),
+  [8, 1]
+);
+```
+
+`kdNN([[[2, 3], [5, 4], [9, 6], [4, 7], [8, 1], [7, 2]], [3, 2])` should return `[ 2, 3 ]`.
+
+```js
+assert.deepEqual(
+  kdNN(
+    [
+      [2, 3],
+      [5, 4],
+      [9, 6],
+      [4, 7],
+      [8, 1],
+      [7, 2]
+    ],
+    [3, 2]
+  ),
+  [2, 3]
+);
+```
+
+`kdNN([[2, 3, 1], [9, 4, 5], [4, 6, 7], [1, 2, 5], [7, 8, 9], [3, 6, 1]], [1, 2, 3])` should return `[ 1, 2, 5 ]`.
+
+```js
+assert.deepEqual(
+  kdNN(
+    [
+      [2, 3, 1],
+      [9, 4, 5],
+      [4, 6, 7],
+      [1, 2, 5],
+      [7, 8, 9],
+      [3, 6, 1]
+    ],
+    [1, 2, 3]
+  ),
+  [1, 2, 5]
+);
+```
+
+`kdNN([[2, 3, 1], [9, 4, 5], [4, 6, 7], [1, 2, 5], [7, 8, 9], [3, 6, 1]], [4, 5, 6])` should return `[ 4, 6, 7 ]`.
+
+```js
+assert.deepEqual(
+  kdNN(
+    [
+      [2, 3, 1],
+      [9, 4, 5],
+      [4, 6, 7],
+      [1, 2, 5],
+      [7, 8, 9],
+      [3, 6, 1]
+    ],
+    [4, 5, 6]
+  ),
+  [4, 6, 7]
+);
+```
+
+`kdNN([[2, 3, 1], [9, 4, 5], [4, 6, 7], [1, 2, 5], [7, 8, 9], [3, 6, 1]], [8, 8, 8])` should return `[ 7, 8, 9 ]`.
+
+```js
+assert.deepEqual(
+  kdNN(
+    [
+      [2, 3, 1],
+      [9, 4, 5],
+      [4, 6, 7],
+      [1, 2, 5],
+      [7, 8, 9],
+      [3, 6, 1]
+    ],
+    [8, 8, 8]
+  ),
+  [7, 8, 9]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function kdNN(fpoints, fpoint) {
+
+}
+```
+
+# --solutions--
+
+```js
+function kdNN(fpoints, fpoint) {
+  function Node(obj, dimension, parent) {
+    this.obj = obj;
+    this.left = null;
+    this.right = null;
+    this.parent = parent;
+    this.dimension = dimension;
+  }
+
+  function kdTree(points, metric, dimensions) {
+    var self = this;
+
+    function buildTree(points, depth, parent) {
+      var dim = depth % dimensions.length,
+        median,
+        node;
+
+      if (points.length === 0) {
+        return null;
+      }
+      if (points.length === 1) {
+        return new Node(points[0], dim, parent);
+      }
+
+      points.sort(function(a, b) {
+        return a[dimensions[dim]] - b[dimensions[dim]];
+      });
+
+      median = Math.floor(points.length / 2);
+      node = new Node(points[median], dim, parent);
+      node.left = buildTree(points.slice(0, median), depth + 1, node);
+      node.right = buildTree(points.slice(median + 1), depth + 1, node);
+
+      return node;
+    }
+
+    this.root = buildTree(points, 0, null);
+
+    this.insert = function(point) {
+      function innerSearch(node, parent) {
+        if (node === null) {
+          return parent;
+        }
+
+        var dimension = dimensions[node.dimension];
+        if (point[dimension] < node.obj[dimension]) {
+          return innerSearch(node.left, node);
+        } else {
+          return innerSearch(node.right, node);
+        }
+      }
+
+      var insertPosition = innerSearch(this.root, null),
+        newNode,
+        dimension;
+
+      if (insertPosition === null) {
+        this.root = new Node(point, 0, null);
+        return;
+      }
+
+      newNode = new Node(
+        point,
+        (insertPosition.dimension + 1) % dimensions.length,
+        insertPosition
+      );
+      dimension = dimensions[insertPosition.dimension];
+
+      if (point[dimension] < insertPosition.obj[dimension]) {
+        insertPosition.left = newNode;
+      } else {
+        insertPosition.right = newNode;
+      }
+    };
+
+    this.nearest = function(point, maxNodes, maxDistance) {
+      var i, result, bestNodes;
+
+      bestNodes = new BinaryHeap(function(e) {
+        return -e[1];
+      });
+
+      function nearestSearch(node) {
+        var bestChild,
+          dimension = dimensions[node.dimension],
+          ownDistance = metric(point, node.obj),
+          linearPoint = {},
+          linearDistance,
+          otherChild,
+          i;
+
+        function saveNode(node, distance) {
+          bestNodes.push([node, distance]);
+          if (bestNodes.size() > maxNodes) {
+            bestNodes.pop();
+          }
+        }
+
+        for (i = 0; i < dimensions.length; i += 1) {
+          if (i === node.dimension) {
+            linearPoint[dimensions[i]] = point[dimensions[i]];
+          } else {
+            linearPoint[dimensions[i]] = node.obj[dimensions[i]];
+          }
+        }
+
+        linearDistance = metric(linearPoint, node.obj);
+
+        if (node.right === null && node.left === null) {
+          if (
+            bestNodes.size() < maxNodes ||
+            ownDistance < bestNodes.peek()[1]
+          ) {
+            saveNode(node, ownDistance);
+          }
+          return;
+        }
+
+        if (node.right === null) {
+          bestChild = node.left;
+        } else if (node.left === null) {
+          bestChild = node.right;
+        } else {
+          if (point[dimension] < node.obj[dimension]) {
+            bestChild = node.left;
+          } else {
+            bestChild = node.right;
+          }
+        }
+
+        nearestSearch(bestChild);
+
+        if (bestNodes.size() < maxNodes || ownDistance < bestNodes.peek()[1]) {
+          saveNode(node, ownDistance);
+        }
+
+        if (
+          bestNodes.size() < maxNodes ||
+          Math.abs(linearDistance) < bestNodes.peek()[1]
+        ) {
+          if (bestChild === node.left) {
+            otherChild = node.right;
+          } else {
+            otherChild = node.left;
+          }
+          if (otherChild !== null) {
+            nearestSearch(otherChild);
+          }
+        }
+      }
+
+      if (maxDistance) {
+        for (i = 0; i < maxNodes; i += 1) {
+          bestNodes.push([null, maxDistance]);
+        }
+      }
+
+      if (self.root) nearestSearch(self.root);
+
+      result = [];
+
+      for (i = 0; i < Math.min(maxNodes, bestNodes.content.length); i += 1) {
+        if (bestNodes.content[i][0]) {
+          result.push([bestNodes.content[i][0].obj, bestNodes.content[i][1]]);
+        }
+      }
+      return result;
+    };
+  }
+
+  function BinaryHeap(scoreFunction) {
+    this.content = [];
+    this.scoreFunction = scoreFunction;
+  }
+
+  BinaryHeap.prototype = {
+    push: function(element) {
+      // Add the new element to the end of the array.
+      this.content.push(element);
+      // Allow it to bubble up.
+      this.bubbleUp(this.content.length - 1);
+    },
+
+    pop: function() {
+      // Store the first element so we can return it later.
+      var result = this.content[0];
+      // Get the element at the end of the array.
+      var end = this.content.pop();
+      // If there are any elements left, put the end element at the
+      // start, and let it sink down.
+      if (this.content.length > 0) {
+        this.content[0] = end;
+        this.sinkDown(0);
+      }
+      return result;
+    },
+
+    peek: function() {
+      return this.content[0];
+    },
+
+    size: function() {
+      return this.content.length;
+    },
+
+    bubbleUp: function(n) {
+      // Fetch the element that has to be moved.
+      var element = this.content[n];
+      // When at 0, an element can not go up any further.
+      while (n > 0) {
+        // Compute the parent element's index, and fetch it.
+        var parentN = Math.floor((n + 1) / 2) - 1,
+          parent = this.content[parentN];
+        // Swap the elements if the parent is greater.
+        if (this.scoreFunction(element) < this.scoreFunction(parent)) {
+          this.content[parentN] = element;
+          this.content[n] = parent;
+          // Update 'n' to continue at the new position.
+          n = parentN;
+        }
+        // Found a parent that is less, no need to move it further.
+        else {
+          break;
+        }
+      }
+    },
+
+    sinkDown: function(n) {
+      // Look up the target element and its score.
+      var length = this.content.length,
+        element = this.content[n],
+        elemScore = this.scoreFunction(element);
+
+      while (true) {
+        // Compute the indices of the child elements.
+        var child2N = (n + 1) * 2,
+          child1N = child2N - 1;
+        // This is used to store the new position of the element,
+        // if any.
+        var swap = null;
+        // If the first child exists (is inside the array)...
+        if (child1N < length) {
+          // Look it up and compute its score.
+          var child1 = this.content[child1N],
+            child1Score = this.scoreFunction(child1);
+          // If the score is less than our element's, we need to swap.
+          if (child1Score < elemScore) swap = child1N;
+        }
+        // Do the same checks for the other child.
+        if (child2N < length) {
+          var child2 = this.content[child2N],
+            child2Score = this.scoreFunction(child2);
+          if (child2Score < (swap == null ? elemScore : child1Score)) {
+            swap = child2N;
+          }
+        }
+
+        // If the element needs to be moved, swap it, and continue.
+        if (swap != null) {
+          this.content[n] = this.content[swap];
+          this.content[swap] = element;
+          n = swap;
+        }
+        // Otherwise, we are done.
+        else {
+          break;
+        }
+      }
+    }
+  };
+
+  var dims = [];
+
+  for (var i = 0; i < fpoint.length; i++) dims.push(i);
+
+  var tree = new kdTree(
+    fpoints,
+    function(e1, e2) {
+      var d = 0;
+      var e3 = e1;
+      if (!Array.isArray(e1)) {
+        e3 = [];
+        for (var key in e1) e3.push(e1[key]);
+
+        e1 = e3;
+      }
+      e1.forEach(function(e, i) {
+        var sqd = e1[i] - e2[i];
+        d += sqd * sqd;
+      });
+      return d;
+    },
+    dims
+  );
+
+  return tree.nearest(fpoint, 1, 1000)[0][0];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/kaprekar-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/kaprekar-numbers.md
new file mode 100644
index 00000000000..ffef92f7819
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/kaprekar-numbers.md
@@ -0,0 +1,110 @@
+---
+id: 5a23c84252665b21eecc7eca
+title: Kaprekar numbers
+challengeType: 1
+forumTopicId: 302296
+dashedName: kaprekar-numbers
+---
+
+# --description--
+
+A positive integer is a Kaprekar number if:
+
+<ul>
+  <li>It is 1, or,</li>
+  <li>The decimal representation of its square may be split once into two parts consisting of positive integers which sum to the original number. </li>
+</ul>
+
+Note that a split resulting in a part consisting purely of 0s is not valid, as 0 is not considered positive.
+
+Example Kaprekar numbers:
+
+<ul>
+  <li><code>2223</code> is a Kaprekar number, as <code>2223 * 2223 = 4941729</code>, <code>4941729</code> may be split to <code>494</code> and <code>1729</code>, and <code>494 + 1729 = 2223</code></li>
+  <li>The series of Kaprekar numbers is known as A006886, and begins as <code>1, 9, 45, 55, ...</code></li>
+</ul>
+
+# --instructions--
+
+Write a function that takes a number $n$, a base $bs$, and returns true if the number is a Kaprekar number for the given base. Otherwise, the function returns false.
+
+# --hints--
+
+`isKaprekar` should be a function.
+
+```js
+assert(typeof isKaprekar == 'function');
+```
+
+`isKaprekar(1, 10)` should return a boolean.
+
+```js
+assert(typeof isKaprekar(1, 10) == 'boolean');
+```
+
+`isKaprekar(1, 10)` should return `true`.
+
+```js
+assert.equal(isKaprekar(1, 10), true);
+```
+
+`isKaprekar(9, 10)` should return `true`.
+
+```js
+assert.equal(isKaprekar(9, 10), true);
+```
+
+`isKaprekar(2223, 10)` should return `true`.
+
+```js
+assert.equal(isKaprekar(2223, 10), true);
+```
+
+`isKaprekar(22823, 10)` should return `false`.
+
+```js
+assert.equal(isKaprekar(22823, 10), false);
+```
+
+`isKaprekar(9, 17)` should return `false`.
+
+```js
+assert.equal(isKaprekar(9, 17), false);
+```
+
+`isKaprekar(225, 17)` should return `true`.
+
+```js
+assert.equal(isKaprekar(225, 17), true);
+```
+
+`isKaprekar(999, 17)` should return `false`.
+
+```js
+assert.equal(isKaprekar(999, 17), false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function isKaprekar(n, bs) {
+
+}
+```
+
+# --solutions--
+
+```js
+function isKaprekar(n, bs) {
+  if (n < 1) return false;
+  if (n == 1) return true;
+  for (var a = n * n, b = 0, s = 1; a; s *= bs) {
+    b += (a % bs) * s;
+    a = Math.floor(a / bs);
+    if (b && a + b == n) return true;
+  }
+  return false;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-0-1.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-0-1.md
new file mode 100644
index 00000000000..ab84dea2631
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-0-1.md
@@ -0,0 +1,255 @@
+---
+id: 5a23c84252665b21eecc7ed1
+title: Knapsack problem/0-1
+challengeType: 1
+forumTopicId: 323649
+dashedName: knapsack-problem0-1
+---
+
+# --description--
+
+The 0-1 knapsack problem is defined as follows:
+
+You are given an array of objects representing items to be put in a knapsack. The objects have 3 attributes: name, weight, and value. The items need to be selected so that the total weight does not exceed the maximum weight and the value is maximized.
+
+# --instructions--
+
+Write a function to solve the knapsack problem. The function is given the array of objects and the maximum weight as parameters. It should return the maximum total value possible.
+
+# --hints--
+
+`knapsack([{ name:'map', weight:9, value:150 }, { name:'compass', weight:13, value:35 }, { name:'water', weight:153, value:200 }, { name:'sandwich', weight:50, value:160 }, { name:'glucose', weight:15, value:60 }, { name:'tin', weight:68, value:45 }, { name:'banana', weight:27, value:60 }, { name:'apple', weight:39, value:40 }], 100)` should return `405`.
+
+```js
+assert.equal(
+  knapsack(
+    [
+      { name: 'map', weight: 9, value: 150 },
+      { name: 'compass', weight: 13, value: 35 },
+      { name: 'water', weight: 153, value: 200 },
+      { name: 'sandwich', weight: 50, value: 160 },
+      { name: 'glucose', weight: 15, value: 60 },
+      { name: 'tin', weight: 68, value: 45 },
+      { name: 'banana', weight: 27, value: 60 },
+      { name: 'apple', weight: 39, value: 40 }
+    ],
+    100
+  ),
+  405
+);
+```
+
+`knapsack([{ name:'map', weight:9, value:150 }, { name:'compass', weight:13, value:35 }, { name:'water', weight:153, value:200 }, { name:'sandwich', weight:50, value:160 }, { name:'glucose', weight:15, value:60 }, { name:'tin', weight:68, value:45 }, { name:'banana', weight:27, value:60 }, { name:'apple', weight:39, value:40 }], 200)` should return `510`.
+
+```js
+assert.equal(
+  knapsack(
+    [
+      { name: 'map', weight: 9, value: 150 },
+      { name: 'compass', weight: 13, value: 35 },
+      { name: 'water', weight: 153, value: 200 },
+      { name: 'sandwich', weight: 50, value: 160 },
+      { name: 'glucose', weight: 15, value: 60 },
+      { name: 'tin', weight: 68, value: 45 },
+      { name: 'banana', weight: 27, value: 60 },
+      { name: 'apple', weight: 39, value: 40 }
+    ],
+    200
+  ),
+  510
+);
+```
+
+`knapsack([{ name:'cheese', weight:23, value:30 }, { name:'beer', weight:52, value:10 }, { name:'suntan cream', weight:11, value:70 }, { name:'camera', weight:32, value:30 }, { name:'T-shirt', weight:24, value:15 }, { name:'trousers', weight:48, value:10 }, { name:'umbrella', weight:73, value:40 }], 100)` should return `145`.
+
+```js
+assert.equal(
+  knapsack(
+    [
+      { name: 'cheese', weight: 23, value: 30 },
+      { name: 'beer', weight: 52, value: 10 },
+      { name: 'suntan cream', weight: 11, value: 70 },
+      { name: 'camera', weight: 32, value: 30 },
+      { name: 'T-shirt', weight: 24, value: 15 },
+      { name: 'trousers', weight: 48, value: 10 },
+      { name: 'umbrella', weight: 73, value: 40 }
+    ],
+    100
+  ),
+  145
+);
+```
+
+`knapsack([{ name:'cheese', weight:23, value:30 }, { name:'beer', weight:52, value:10 }, { name:'suntan cream', weight:11, value:70 }, { name:'camera', weight:32, value:30 }, { name:'T-shirt', weight:24, value:15 }, { name:'trousers', weight:48, value:10 }, { name:'umbrella', weight:73, value:40 }], 200)` should return `185`.
+
+```js
+assert.equal(
+  knapsack(
+    [
+      { name: 'cheese', weight: 23, value: 30 },
+      { name: 'beer', weight: 52, value: 10 },
+      { name: 'suntan cream', weight: 11, value: 70 },
+      { name: 'camera', weight: 32, value: 30 },
+      { name: 'T-shirt', weight: 24, value: 15 },
+      { name: 'trousers', weight: 48, value: 10 },
+      { name: 'umbrella', weight: 73, value: 40 }
+    ],
+    200
+  ),
+  185
+);
+```
+
+`knapsack([{ name:'waterproof trousers', weight:42, value:70 }, { name:'waterproof overclothes', weight:43, value:75 }, { name:'note-case', weight:22, value:80 }, { name:'sunglasses', weight:7, value:20 }, { name:'towel', weight:18, value:12 }, { name:'socks', weight:4, value:50 }, { name:'book', weight:30, value:10 }], 100)` should return `237`.
+
+```js
+assert.equal(
+  knapsack(
+    [
+      { name: 'waterproof trousers', weight: 42, value: 70 },
+      { name: 'waterproof overclothes', weight: 43, value: 75 },
+      { name: 'note-case', weight: 22, value: 80 },
+      { name: 'sunglasses', weight: 7, value: 20 },
+      { name: 'towel', weight: 18, value: 12 },
+      { name: 'socks', weight: 4, value: 50 },
+      { name: 'book', weight: 30, value: 10 }
+    ],
+    100
+  ),
+  237
+);
+```
+
+`knapsack([{ name:'waterproof trousers', weight:42, value:70 }, { name:'waterproof overclothes', weight:43, value:75 }, { name:'note-case', weight:22, value:80 }, { name:'sunglasses', weight:7, value:20 }, { name:'towel', weight:18, value:12 }, { name:'socks', weight:4, value:50 }, { name:'book', weight:30, value:10 }], 200)` should return `317`.'
+
+```js
+assert.equal(
+  knapsack(
+    [
+      { name: 'waterproof trousers', weight: 42, value: 70 },
+      { name: 'waterproof overclothes', weight: 43, value: 75 },
+      { name: 'note-case', weight: 22, value: 80 },
+      { name: 'sunglasses', weight: 7, value: 20 },
+      { name: 'towel', weight: 18, value: 12 },
+      { name: 'socks', weight: 4, value: 50 },
+      { name: 'book', weight: 30, value: 10 }
+    ],
+    200
+  ),
+  317
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function knapsack(items, maxweight) {
+
+}
+```
+
+# --solutions--
+
+```js
+function knapsack(items, maxweight) {
+  var _ = {
+    max: function(e) {
+      var mx = e[0];
+      e.forEach(function(f) {
+        if (mx < f) mx = f;
+      });
+      return mx;
+    },
+    map: function(array, func) {
+      return array.map(func);
+    },
+    isUndefined: function(a) {
+      if (a) {
+        return false;
+      }
+      return true;
+    },
+    range: function(start, end, step) {
+      var a = [];
+      var f = (f = (i, end) => i < end);
+      if (start > end) f = (i, end) => i > end;
+
+      for (var i = start; f(i, end); i += step) a.push(i);
+      return a;
+    }
+  };
+
+  var valuefn = e => e.value;
+  var weightfn = e => e.weight;
+  var _epsilon = 0.01;
+  var _p = _.max(_.map(items, valuefn));
+  var _k = (_epsilon * _p) / items.length;
+
+  var _memo = (function() {
+    var _mem = {};
+    var _key = function(i, w) {
+      return i + '::' + w;
+    };
+    return {
+      get: function(i, w) {
+        return _mem[_key(i, w)];
+      },
+      put: function(i, w, r) {
+        _mem[_key(i, w)] = r;
+        return r;
+      }
+    };
+  })();
+
+  var _m = function(i, w) {
+    i = Math.round(i);
+    w = Math.round(w);
+
+    if (i < 0 || w === 0) {
+      // empty base case
+      return { items: [], totalWeight: 0, totalValue: 0 };
+    }
+
+    var mm = _memo.get(i, w);
+    if (!_.isUndefined(mm)) {
+      return mm;
+    }
+
+    var item = items[i];
+    if (weightfn(item) > w) {
+      //item does not fit, try the next item
+      return _memo.put(i, w, _m(i - 1, w));
+    }
+    // this item could fit.
+    // are we better off excluding it?
+    var excluded = _m(i - 1, w);
+    // or including it?
+    var included = _m(i - 1, w - weightfn(item));
+    if (
+      included.totalValue + Math.floor(valuefn(item) / _k) >
+      excluded.totalValue
+    ) {
+      // better off including it
+      // make a copy of the list
+      var i1 = included.items.slice();
+      i1.push(item);
+      return _memo.put(i, w, {
+        items: i1,
+        totalWeight: included.totalWeight + weightfn(item),
+        totalValue: included.totalValue + Math.floor(valuefn(item) / _k)
+      });
+    }
+    //better off excluding it
+    return _memo.put(i, w, excluded);
+  };
+  var scaled = _m(items.length - 1, maxweight);
+
+  var val = 0;
+  scaled.items.forEach(function(e) {
+    val += e.value;
+  });
+  return val;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-bounded.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-bounded.md
new file mode 100644
index 00000000000..2af68ccd123
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-bounded.md
@@ -0,0 +1,212 @@
+---
+id: 5a23c84252665b21eecc7ed2
+title: Knapsack problem/Bounded
+challengeType: 1
+forumTopicId: 323652
+dashedName: knapsack-problembounded
+---
+
+# --description--
+
+The bounded knapsack problem is defined as follows:
+
+You are given an array of objects representing items to be put in a knapsack. The objects have 4 attributes: name, pieces (the number of the particular item), weight, and value. The items need to be selected so that the total weight does not exceed the maximum weight and the value is maximized. Keep in mind that each item can appear between 0 and `pieces` times.
+
+# --instructions--
+
+Write a function to solve the knapsack problem. The function is given the array of objects and the maximum weight as parameters. It should return the maximum total value possible.
+
+# --hints--
+
+`findBestPack([{ name:'map', weight:9, value:150, pieces:1 }, { name:'compass', weight:13, value:35, pieces:1 }, { name:'water', weight:153, value:200, pieces:2 }, { name:'sandwich', weight:50, value:60, pieces:2 }, { name:'glucose', weight:15, value:60, pieces:2 }, { name:'tin', weight:68, value:45, pieces:3 }, { name:'banana', weight:27, value:60, pieces:3 }, { name:'apple', weight:39, value:40, pieces:3 }, { name:'cheese', weight:23, value:30, pieces:1 }, { name:'beer', weight:52, value:10, pieces:3 }, { name:'suntan, cream', weight:11, value:70, pieces:1 }, { name:'camera', weight:32, value:30, pieces:1 }, { name:'T-shirt', weight:24, value:15, pieces:2 }], 300)` should return `755`.
+
+```js
+assert.equal(
+  findBestPack(
+    [
+      { name: 'map', weight: 9, value: 150, pieces: 1 },
+      { name: 'compass', weight: 13, value: 35, pieces: 1 },
+      { name: 'water', weight: 153, value: 200, pieces: 2 },
+      { name: 'sandwich', weight: 50, value: 60, pieces: 2 },
+      { name: 'glucose', weight: 15, value: 60, pieces: 2 },
+      { name: 'tin', weight: 68, value: 45, pieces: 3 },
+      { name: 'banana', weight: 27, value: 60, pieces: 3 },
+      { name: 'apple', weight: 39, value: 40, pieces: 3 },
+      { name: 'cheese', weight: 23, value: 30, pieces: 1 },
+      { name: 'beer', weight: 52, value: 10, pieces: 3 },
+      { name: 'suntan, cream', weight: 11, value: 70, pieces: 1 },
+      { name: 'camera', weight: 32, value: 30, pieces: 1 },
+      { name: 'T-shirt', weight: 24, value: 15, pieces: 2 }
+    ],
+    300
+  ),
+  755
+);
+```
+
+`findBestPack([{ name:'map', weight:9, value:150, pieces:1 }, { name:'compass', weight:13, value:35, pieces:1 }, { name:'water', weight:153, value:200, pieces:2 }, { name:'sandwich', weight:50, value:60, pieces:2 }, { name:'glucose', weight:15, value:60, pieces:2 }, { name:'tin', weight:68, value:45, pieces:3 }, { name:'banana', weight:27, value:60, pieces:3 }, { name:'apple', weight:39, value:40, pieces:3 }, { name:'cheese', weight:23, value:30, pieces:1 }, { name:'beer', weight:52, value:10, pieces:3 }, { name:'suntan, cream', weight:11, value:70, pieces:1 }, { name:'camera', weight:32, value:30, pieces:1 }, { name:'T-shirt', weight:24, value:15, pieces:2 }], 400)` should return `875`.
+
+```js
+assert.equal(
+  findBestPack(
+    [
+      { name: 'map', weight: 9, value: 150, pieces: 1 },
+      { name: 'compass', weight: 13, value: 35, pieces: 1 },
+      { name: 'water', weight: 153, value: 200, pieces: 2 },
+      { name: 'sandwich', weight: 50, value: 60, pieces: 2 },
+      { name: 'glucose', weight: 15, value: 60, pieces: 2 },
+      { name: 'tin', weight: 68, value: 45, pieces: 3 },
+      { name: 'banana', weight: 27, value: 60, pieces: 3 },
+      { name: 'apple', weight: 39, value: 40, pieces: 3 },
+      { name: 'cheese', weight: 23, value: 30, pieces: 1 },
+      { name: 'beer', weight: 52, value: 10, pieces: 3 },
+      { name: 'suntan, cream', weight: 11, value: 70, pieces: 1 },
+      { name: 'camera', weight: 32, value: 30, pieces: 1 },
+      { name: 'T-shirt', weight: 24, value: 15, pieces: 2 }
+    ],
+    400
+  ),
+  875
+);
+```
+
+`findBestPack([{ name:'map', weight:9, value:150, pieces:1 }, { name:'compass', weight:13, value:35, pieces:1 }, { name:'water', weight:153, value:200, pieces:2 }, { name:'sandwich', weight:50, value:60, pieces:2 }, { name:'glucose', weight:15, value:60, pieces:2 }, { name:'tin', weight:68, value:45, pieces:3 }, { name:'banana', weight:27, value:60, pieces:3 }, { name:'apple', weight:39, value:40, pieces:3 }, { name:'cheese', weight:23, value:30, pieces:1 }, { name:'beer', weight:52, value:10, pieces:3 }, { name:'suntan, cream', weight:11, value:70, pieces:1 }, { name:'camera', weight:32, value:30, pieces:1 }, { name:'T-shirt', weight:24, value:15, pieces:2 }], 500)` should return `1015`.
+
+```js
+assert.equal(
+  findBestPack(
+    [
+      { name: 'map', weight: 9, value: 150, pieces: 1 },
+      { name: 'compass', weight: 13, value: 35, pieces: 1 },
+      { name: 'water', weight: 153, value: 200, pieces: 2 },
+      { name: 'sandwich', weight: 50, value: 60, pieces: 2 },
+      { name: 'glucose', weight: 15, value: 60, pieces: 2 },
+      { name: 'tin', weight: 68, value: 45, pieces: 3 },
+      { name: 'banana', weight: 27, value: 60, pieces: 3 },
+      { name: 'apple', weight: 39, value: 40, pieces: 3 },
+      { name: 'cheese', weight: 23, value: 30, pieces: 1 },
+      { name: 'beer', weight: 52, value: 10, pieces: 3 },
+      { name: 'suntan, cream', weight: 11, value: 70, pieces: 1 },
+      { name: 'camera', weight: 32, value: 30, pieces: 1 },
+      { name: 'T-shirt', weight: 24, value: 15, pieces: 2 }
+    ],
+    500
+  ),
+  1015
+);
+```
+
+`findBestPack([{ name:'map', weight:9, value:150, pieces:1 }, { name:'compass', weight:13, value:35, pieces:1 }, { name:'water', weight:153, value:200, pieces:2 }, { name:'sandwich', weight:50, value:60, pieces:2 }, { name:'glucose', weight:15, value:60, pieces:2 }, { name:'tin', weight:68, value:45, pieces:3 }, { name:'banana', weight:27, value:60, pieces:3 }, { name:'apple', weight:39, value:40, pieces:3 }, { name:'cheese', weight:23, value:30, pieces:1 }, { name:'beer', weight:52, value:10, pieces:3 }, { name:'suntan, cream', weight:11, value:70, pieces:1 }, { name:'camera', weight:32, value:30, pieces:1 }, { name:'T-shirt', weight:24, value:15, pieces:2 }], 600)` should return `1120`.
+
+```js
+assert.equal(
+  findBestPack(
+    [
+      { name: 'map', weight: 9, value: 150, pieces: 1 },
+      { name: 'compass', weight: 13, value: 35, pieces: 1 },
+      { name: 'water', weight: 153, value: 200, pieces: 2 },
+      { name: 'sandwich', weight: 50, value: 60, pieces: 2 },
+      { name: 'glucose', weight: 15, value: 60, pieces: 2 },
+      { name: 'tin', weight: 68, value: 45, pieces: 3 },
+      { name: 'banana', weight: 27, value: 60, pieces: 3 },
+      { name: 'apple', weight: 39, value: 40, pieces: 3 },
+      { name: 'cheese', weight: 23, value: 30, pieces: 1 },
+      { name: 'beer', weight: 52, value: 10, pieces: 3 },
+      { name: 'suntan, cream', weight: 11, value: 70, pieces: 1 },
+      { name: 'camera', weight: 32, value: 30, pieces: 1 },
+      { name: 'T-shirt', weight: 24, value: 15, pieces: 2 }
+    ],
+    600
+  ),
+  1120
+);
+```
+
+`findBestPack([{ name:'map', weight:9, value:150, pieces:1 }, { name:'compass', weight:13, value:35, pieces:1 }, { name:'water', weight:153, value:200, pieces:2 }, { name:'sandwich', weight:50, value:60, pieces:2 }, { name:'glucose', weight:15, value:60, pieces:2 }, { name:'tin', weight:68, value:45, pieces:3 }, { name:'banana', weight:27, value:60, pieces:3 }, { name:'apple', weight:39, value:40, pieces:3 }, { name:'cheese', weight:23, value:30, pieces:1 }, { name:'beer', weight:52, value:10, pieces:3 }, { name:'suntan, cream', weight:11, value:70, pieces:1 }, { name:'camera', weight:32, value:30, pieces:1 }, { name:'T-shirt', weight:24, value:15, pieces:2 }], 700)` should return `1225`.
+
+```js
+assert.equal(
+  findBestPack(
+    [
+      { name: 'map', weight: 9, value: 150, pieces: 1 },
+      { name: 'compass', weight: 13, value: 35, pieces: 1 },
+      { name: 'water', weight: 153, value: 200, pieces: 2 },
+      { name: 'sandwich', weight: 50, value: 60, pieces: 2 },
+      { name: 'glucose', weight: 15, value: 60, pieces: 2 },
+      { name: 'tin', weight: 68, value: 45, pieces: 3 },
+      { name: 'banana', weight: 27, value: 60, pieces: 3 },
+      { name: 'apple', weight: 39, value: 40, pieces: 3 },
+      { name: 'cheese', weight: 23, value: 30, pieces: 1 },
+      { name: 'beer', weight: 52, value: 10, pieces: 3 },
+      { name: 'suntan, cream', weight: 11, value: 70, pieces: 1 },
+      { name: 'camera', weight: 32, value: 30, pieces: 1 },
+      { name: 'T-shirt', weight: 24, value: 15, pieces: 2 }
+    ],
+    700
+  ),
+  1225
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function findBestPack(data, maxweight) {
+
+}
+```
+
+# --solutions--
+
+```js
+function findBestPack(data, maxweight) {
+  var m = [[0]]; // maximum pack value found so far
+  var b = [[0]]; // best combination found so far
+  var opts = [0]; // item index for 0 of item 0
+  var P = [1]; // item encoding for 0 of item 0
+  var choose = 0;
+  for (var j = 0; j < data.length; j++) {
+    opts[j + 1] = opts[j] + data[j].pieces; // item index for 0 of item j+1
+    P[j + 1] = P[j] * (1 + data[j].pieces); // item encoding for 0 of item j+1
+  }
+  for (var j = 0; j < opts[data.length]; j++) {
+    m[0][j + 1] = b[0][j + 1] = 0; // best values and combos for empty pack: nothing
+  }
+  for (var w = 1; w <= maxweight; w++) {
+    m[w] = [0];
+    b[w] = [0];
+    for (var j = 0; j < data.length; j++) {
+      var N = data[j].pieces; // how many of these can we have?
+      var base = opts[j]; // what is the item index for 0 of these?
+      for (var n = 1; n <= N; n++) {
+        var W = n * data[j].weight; // how much do these items weigh?
+        var s = w >= W ? 1 : 0; // can we carry this many?
+        var v = s * n * data[j].value; // how much are they worth?
+        var I = base + n; // what is the item number for this many?
+        var wN = w - s * W; // how much other stuff can we be carrying?
+        var C = n * P[j] + b[wN][base]; // encoded combination
+        m[w][I] = Math.max(m[w][I - 1], v + m[wN][base]); // best value
+        choose = b[w][I] = m[w][I] > m[w][I - 1] ? C : b[w][I - 1];
+      }
+    }
+  }
+
+  var best = [];
+  for (var j = data.length - 1; j >= 0; j--) {
+    best[j] = Math.floor(choose / P[j]);
+    choose -= best[j] * P[j];
+  }
+
+  var wgt = 0;
+  var val = 0;
+  for (var i = 0; i < best.length; i++) {
+    if (0 == best[i]) continue;
+    wgt += best[i] * data[i].weight;
+    val += best[i] * data[i].value;
+  }
+
+  return val;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-continuous.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-continuous.md
new file mode 100644
index 00000000000..cb6879ac2d9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-continuous.md
@@ -0,0 +1,169 @@
+---
+id: 5a23c84252665b21eecc7ed3
+title: Knapsack problem/Continuous
+challengeType: 1
+forumTopicId: 323654
+dashedName: knapsack-problemcontinuous
+---
+
+# --description--
+
+A thief burgles a butcher's shop, where he can select from some items.
+
+The thief knows the weights and prices of each items. Because he has a knapsack with a limit on the maximum weight that it can carry, he wants to select the items such that he would have his profit maximized. He may cut the items; the item has a reduced price after cutting that is proportional to the original price by the ratio of masses. That means: half of an item has half the price of the original.
+
+# --instructions--
+
+Write a function that takes an array of objects representing the items available in the shop. Each object has 3 attributes: name, weight, and value. The function also takes the maximum weight as a parameter. The function should return the maximum value possible, and the total weight of the selected items should not exceed the maximum weight.
+
+# --hints--
+
+`knapContinuous([{ "weight":3.8, "value":36, name:"beef" }, { "weight":5.4, "value":43, name:"pork" }, { "weight":3.6, "value":90, name:"ham" }, { "weight":2.4, "value":45, name:"greaves" }, { "weight":4.0, "value":30, name:"flitch" }, { "weight":2.5, "value":56, name:"brawn" }, { "weight":3.7, "value":67, name:"welt" }, { "weight":3.0, "value":95, name:"salami" }, { "weight":5.9, "value":98, name:"sausage" }], 10)` should return `257.875`.
+
+```js
+assert.equal(
+  knapContinuous(
+    [
+      { weight: 3.8, value: 36, name: 'beef' },
+      { weight: 5.4, value: 43, name: 'pork' },
+      { weight: 3.6, value: 90, name: 'ham' },
+      { weight: 2.4, value: 45, name: 'greaves' },
+      { weight: 4.0, value: 30, name: 'flitch' },
+      { weight: 2.5, value: 56, name: 'brawn' },
+      { weight: 3.7, value: 67, name: 'welt' },
+      { weight: 3.0, value: 95, name: 'salami' },
+      { weight: 5.9, value: 98, name: 'sausage' }
+    ],
+    10
+  ),
+  257.875
+);
+```
+
+`knapContinuous([{ "weight":3.8, "value":36, name:"beef" }, { "weight":5.4, "value":43, name:"pork" }, { "weight":3.6, "value":90, name:"ham" }, { "weight":2.4, "value":45, name:"greaves" }, { "weight":4.0, "value":30, name:"flitch" }, { "weight":2.5, "value":56, name:"brawn" }, { "weight":3.7, "value":67, name:"welt" }, { "weight":3.0, "value":95, name:"salami" }, { "weight":5.9, "value":98, name:"sausage" }], 12)` should return `295.05405405405406`.
+
+```js
+assert.equal(
+  knapContinuous(
+    [
+      { weight: 3.8, value: 36, name: 'beef' },
+      { weight: 5.4, value: 43, name: 'pork' },
+      { weight: 3.6, value: 90, name: 'ham' },
+      { weight: 2.4, value: 45, name: 'greaves' },
+      { weight: 4.0, value: 30, name: 'flitch' },
+      { weight: 2.5, value: 56, name: 'brawn' },
+      { weight: 3.7, value: 67, name: 'welt' },
+      { weight: 3.0, value: 95, name: 'salami' },
+      { weight: 5.9, value: 98, name: 'sausage' }
+    ],
+    12
+  ),
+  295.05405405405406
+);
+```
+
+`knapContinuous([{ "weight":3.8, "value":36, name:"beef" }, { "weight":5.4, "value":43, name:"pork" }, { "weight":3.6, "value":90, name:"ham" }, { "weight":2.4, "value":45, name:"greaves" }, { "weight":4.0, "value":30, name:"flitch" }, { "weight":2.5, "value":56, name:"brawn" }, { "weight":3.7, "value":67, name:"welt" }, { "weight":3.0, "value":95, name:"salami" }, { "weight":5.9, "value":98, name:"sausage" }], 15)` should return `349.3783783783784`.
+
+```js
+assert.equal(
+  knapContinuous(
+    [
+      { weight: 3.8, value: 36, name: 'beef' },
+      { weight: 5.4, value: 43, name: 'pork' },
+      { weight: 3.6, value: 90, name: 'ham' },
+      { weight: 2.4, value: 45, name: 'greaves' },
+      { weight: 4.0, value: 30, name: 'flitch' },
+      { weight: 2.5, value: 56, name: 'brawn' },
+      { weight: 3.7, value: 67, name: 'welt' },
+      { weight: 3.0, value: 95, name: 'salami' },
+      { weight: 5.9, value: 98, name: 'sausage' }
+    ],
+    15
+  ),
+  349.3783783783784
+);
+```
+
+`knapContinuous([{ "weight":3.8, "value":36, name:"beef" }, { "weight":5.4, "value":43, name:"pork" }, { "weight":3.6, "value":90, name:"ham" }, { "weight":2.4, "value":45, name:"greaves" }, { "weight":4.0, "value":30, name:"flitch" }, { "weight":2.5, "value":56, name:"brawn" }, { "weight":3.7, "value":67, name:"welt" }, { "weight":3.0, "value":95, name:"salami" }, { "weight":5.9, "value":98, name:"sausage" }], 22)` should return `459.5263157894737`.
+
+```js
+assert.equal(
+  knapContinuous(
+    [
+      { weight: 3.8, value: 36, name: 'beef' },
+      { weight: 5.4, value: 43, name: 'pork' },
+      { weight: 3.6, value: 90, name: 'ham' },
+      { weight: 2.4, value: 45, name: 'greaves' },
+      { weight: 4.0, value: 30, name: 'flitch' },
+      { weight: 2.5, value: 56, name: 'brawn' },
+      { weight: 3.7, value: 67, name: 'welt' },
+      { weight: 3.0, value: 95, name: 'salami' },
+      { weight: 5.9, value: 98, name: 'sausage' }
+    ],
+    22
+  ),
+  459.5263157894737
+);
+```
+
+`knapContinuous([{ "weight":3.8, "value":36, name:"beef" }, { "weight":5.4, "value":43, name:"pork" }, { "weight":3.6, "value":90, name:"ham" }, { "weight":2.4, "value":45, name:"greaves" }, { "weight":4.0, "value":30, name:"flitch" }, { "weight":2.5, "value":56, name:"brawn" }, { "weight":3.7, "value":67, name:"welt" }, { "weight":3.0, "value":95, name:"salami" }, { "weight":5.9, "value":98, name:"sausage" }], 24)` should return `478.4736842105263`.
+
+```js
+assert.equal(
+  knapContinuous(
+    [
+      { weight: 3.8, value: 36, name: 'beef' },
+      { weight: 5.4, value: 43, name: 'pork' },
+      { weight: 3.6, value: 90, name: 'ham' },
+      { weight: 2.4, value: 45, name: 'greaves' },
+      { weight: 4.0, value: 30, name: 'flitch' },
+      { weight: 2.5, value: 56, name: 'brawn' },
+      { weight: 3.7, value: 67, name: 'welt' },
+      { weight: 3.0, value: 95, name: 'salami' },
+      { weight: 5.9, value: 98, name: 'sausage' }
+    ],
+    24
+  ),
+  478.4736842105263
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function knapContinuous(items, maxweight) {
+
+}
+```
+
+# --solutions--
+
+```js
+function knapContinuous(items, maxweight) {
+  function item_cmp(a, b) {
+    const ua = a.unitVal,
+      ub = b.unitVal;
+    return ua < ub ? 1 : ua > ub ? -1 : 0;
+  }
+  items = items.map(({ value, weight }) => ({
+    unitVal: value / weight,
+    weight
+  }));
+  items.sort(item_cmp);
+
+  let val = 0;
+  let wt = 0;
+  for (let { unitVal, weight } of items) {
+    var portion = Math.min(maxweight - wt, weight);
+    wt += portion;
+    var addVal = portion * unitVal;
+    val += addVal;
+    if (wt >= maxweight) {
+      break;
+    }
+  }
+  return val;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-unbounded.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-unbounded.md
new file mode 100644
index 00000000000..62bb6116126
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knapsack-problem-unbounded.md
@@ -0,0 +1,185 @@
+---
+id: 5a23c84252665b21eecc7ed4
+title: Knapsack problem/Unbounded
+challengeType: 1
+forumTopicId: 323655
+dashedName: knapsack-problemunbounded
+---
+
+# --description--
+
+A traveler gets diverted and has to make an unscheduled stop in what turns out to be Shangri-La. Opting to leave, he is allowed to take as much as he likes of the items available there, so long as it will fit in his knapsack, and he can carry it.
+
+He knows that he can carry no more than a particular value of maximum weight in total; and that the capacity of his knapsack has a limited volume.
+
+Looking just above the bar codes on the items he finds their weights and volumes. He digs out his recent copy of a financial paper and gets the value of each item.
+
+He can only take whole units of any item, but there is much more of any item than he could ever carry.
+
+# --instructions--
+
+Write a function that takes an array of objects, maximum weight, and maximum volume as parameters. Each object has 4 attributes: name, value, weight, and volume. The function should return the maximum value of items the traveller can take with him.
+
+# --hints--
+
+`knapsackUnbounded([{ name:"panacea", value:3000, weight:0.3, volume:0.025 }, { name:"ichor", value:1800, weight:0.2, volume:0.015 }, { name:"gold", value:2500, weight:2, volume:0.002 }], 25, 0.25)` should return `54500`.
+
+```js
+assert.equal(
+  knapsackUnbounded(
+    [
+      { name: 'panacea', value: 3000, weight: 0.3, volume: 0.025 },
+      { name: 'ichor', value: 1800, weight: 0.2, volume: 0.015 },
+      { name: 'gold', value: 2500, weight: 2, volume: 0.002 }
+    ],
+    25,
+    0.25
+  ),
+  54500
+);
+```
+
+`knapsackUnbounded([{ name:"panacea", value:3000, weight:0.3, volume:0.025 }, { name:"ichor", value:1800, weight:0.2, volume:0.015 }, { name:"gold", value:2500, weight:2, volume:0.002 }], 55, 0.25)` should return `88400`.
+
+```js
+assert.equal(
+  knapsackUnbounded(
+    [
+      { name: 'panacea', value: 3000, weight: 0.3, volume: 0.025 },
+      { name: 'ichor', value: 1800, weight: 0.2, volume: 0.015 },
+      { name: 'gold', value: 2500, weight: 2, volume: 0.002 }
+    ],
+    55,
+    0.25
+  ),
+  88400
+);
+```
+
+`knapsackUnbounded([{ name:"panacea", value:3000, weight:0.3, volume:0.025 }, { name:"ichor", value:1800, weight:0.2, volume:0.015 }, { name:"gold", value:2500, weight:2, volume:0.002 }], 25, 0.15)` should return `42500`.
+
+```js
+assert.equal(
+  knapsackUnbounded(
+    [
+      { name: 'panacea', value: 3000, weight: 0.3, volume: 0.025 },
+      { name: 'ichor', value: 1800, weight: 0.2, volume: 0.015 },
+      { name: 'gold', value: 2500, weight: 2, volume: 0.002 }
+    ],
+    25,
+    0.15
+  ),
+  42500
+);
+```
+
+`knapsackUnbounded([{ name:"panacea", value:3000, weight:0.3, volume:0.025 }, { name:"ichor", value:1800, weight:0.2, volume:0.015 }, { name:"gold", value:2500, weight:2, volume:0.002 }], 35, 0.35)` should return `75900`.
+
+```js
+assert.equal(
+  knapsackUnbounded(
+    [
+      { name: 'panacea', value: 3000, weight: 0.3, volume: 0.025 },
+      { name: 'ichor', value: 1800, weight: 0.2, volume: 0.015 },
+      { name: 'gold', value: 2500, weight: 2, volume: 0.002 }
+    ],
+    35,
+    0.35
+  ),
+  75900
+);
+```
+
+`knapsackUnbounded([{ name:"panacea", value:3000, weight:0.3, volume:0.025 }, { name:"ichor", value:1800, weight:0.2, volume:0.015 }, { name:"gold", value:2500, weight:2, volume:0.002 }], 15, 0.25)` should return `43200`.
+
+```js
+assert.equal(
+  knapsackUnbounded(
+    [
+      { name: 'panacea', value: 3000, weight: 0.3, volume: 0.025 },
+      { name: 'ichor', value: 1800, weight: 0.2, volume: 0.015 },
+      { name: 'gold', value: 2500, weight: 2, volume: 0.002 }
+    ],
+    15,
+    0.25
+  ),
+  43200
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function knapsackUnbounded(items, maxweight, maxvolume) {
+
+}
+```
+
+# --solutions--
+
+```js
+function knapsackUnbounded(items, maxWeight, maxVolume) {
+  function getPickTotals(items, pick) {
+    let totalValue = 0;
+    let totalWeight = 0;
+    let totalVolume = 0;
+    for (let i = 0; i < items.length; i++) {
+      totalValue += pick[i] * items[i].value;
+      totalWeight += pick[i] * items[i].weight;
+      totalVolume += pick[i] * items[i].volume;
+    }
+    return [totalValue, totalWeight, totalVolume];
+  }
+
+  function getMaxes(items, maxWeight, maxVolume) {
+    const maxes = [];
+    for (let i = 0; i < items.length; i++) {
+      const maxUnitsInWeight = Math.floor(maxWeight / items[i].weight);
+      const maxUnitsInVolume = Math.floor(maxVolume / items[i].volume);
+      const maxUnitsInLimit = Math.min(maxUnitsInWeight, maxUnitsInVolume);
+      maxes.push(maxUnitsInLimit);
+    }
+    return maxes;
+  }
+
+  function isInLimit(value, limit) {
+    return value <= limit;
+  }
+
+  function getCombinations(maxValues, curPicks, combinations) {
+    if (maxValues.length === 0) {
+      combinations.push(curPicks);
+    }
+
+    const curMax = maxValues[0];
+    const leftMaxValues = maxValues.slice(1);
+    for (let i = 0; i <= curMax; i++) {
+      getCombinations(leftMaxValues, curPicks.concat(i), combinations);
+    }
+    return combinations;
+  }
+
+  let bestValue = 0;
+  let bestPick = [];
+  const maxes = getMaxes(items, maxWeight, maxVolume);
+  const combinations = getCombinations(maxes, [], []);
+  for (let i = 0; i < combinations.length; i++) {
+    const curPick = combinations[i];
+    const [curValue, curWeight, curVolume] = getPickTotals(items, curPick);
+    if (!isInLimit(curWeight, maxWeight) || !isInLimit(curVolume, maxVolume)) {
+      continue;
+    }
+
+    if (curValue > bestValue) {
+      bestValue = curValue;
+      bestPick = [curPick];
+    } else if (curValue === bestValue) {
+      bestPick.push(curPick);
+    }
+  }
+
+  return bestValue;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knights-tour.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knights-tour.md
new file mode 100644
index 00000000000..154df0c3ee4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/knights-tour.md
@@ -0,0 +1,225 @@
+---
+id: 5a23c84252665b21eecc7ed5
+title: Knight's tour
+challengeType: 1
+forumTopicId: 302297
+dashedName: knights-tour
+---
+
+# --description--
+
+Knight's Tour Problem: You have an empty `width` \* `height` chessboard, but for a single knight on some square. The knight must perform a sequence of legal moves that result in the knight visiting every square on the chessboard exactly once. Note that it is *not* a requirement that the tour be "closed"; that is, the knight need not end within a single move of its start position.
+
+# --instructions--
+
+Write a function that takes `width` and `height` as parameters and returns the number of initial positions from where it is possible to achieve the task stated above.
+
+# --hints--
+
+`knightTour` should be a function.
+
+```js
+assert(typeof knightTour == 'function');
+```
+
+`knightTour(6, 6)` should return a number.
+
+```js
+assert(typeof knightTour(6, 6) == 'number');
+```
+
+`knightTour(6, 6)` should return `36`.
+
+```js
+assert.equal(knightTour(6, 6), 36);
+```
+
+`knightTour(5, 6)` should return `30`.
+
+```js
+assert.equal(knightTour(5, 6), 30);
+```
+
+`knightTour(4, 6)` should return `12`.
+
+```js
+assert.equal(knightTour(4, 6), 12);
+```
+
+`knightTour(7, 3)` should return `10`.
+
+```js
+assert.equal(knightTour(7, 3), 10);
+```
+
+`knightTour(8, 6)` should return `48`.
+
+```js
+assert.equal(knightTour(8, 6), 48);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function knightTour(width, height) {
+
+}
+```
+
+# --solutions--
+
+```js
+function knightTour(width, height) {
+  function createBoards(rows, columns) {
+    const board = [];
+    const visited = [];
+    for (let i = 0; i < rows; i++) {
+      board.push(new Array(columns).fill(-1));
+      visited.push(new Array(columns).fill(false));
+    }
+    return [board, visited];
+  }
+
+  function copyBoard(board) {
+    const copied = [];
+    for (let i = 0; i < board.length; i++) {
+      copied.push([...board[i]]);
+    }
+    return copied;
+  }
+
+  function isOnBoard(value, limit) {
+    return value >= 0 && value < limit;
+  }
+
+  function markVisited(board, visited, row, column) {
+    visited[row][column] = true;
+    board[row][column] = -1;
+  }
+
+  function areAllVisited(visited) {
+    return (
+      visited.filter(row => row.filter(column => column === false).length !== 0)
+        .length === 0
+    );
+  }
+
+  function getMovesFrom(board, row, column) {
+    const possibleMoves = [];
+    for (let i = 0; i < moves.length; i++) {
+      const [rowChange, colChange] = moves[i];
+      const [rowN, colN] = [row + rowChange, column + colChange];
+      if (!isOnBoard(rowN, board.length) || !isOnBoard(colN, board[0].length)) {
+        continue;
+      }
+      possibleMoves.push([rowN, colN]);
+    }
+    return possibleMoves;
+  }
+
+  function fillAllowedMovesCounts(board) {
+    for (let row = 0; row < board.length; row++) {
+      for (let column = 0; column < board[0].length; column++) {
+        board[row][column] = getMovesFrom(board, row, column).length;
+      }
+    }
+  }
+
+  function updateAllowedMovesCounts(board, possibleMoves) {
+    for (let i = 0; i < possibleMoves.length; i++) {
+      const [row, column] = possibleMoves[i];
+      if (board[row][column] > 0) {
+        board[row][column]--;
+      }
+    }
+  }
+
+  function getBestNextMoves(board, allowedMoves) {
+    let bestMoves = [];
+    let fewestNextMoves = Infinity;
+    let zeroMove = [];
+    for (let i = 0; i < allowedMoves.length; i++) {
+      const [moveRow, moveCol] = allowedMoves[i];
+      const numMoves = board[moveRow][moveCol];
+      if (numMoves === -1) {
+        continue;
+      }
+      if (numMoves === 0) {
+        zeroMove.push(allowedMoves[i]);
+      }
+      if (numMoves < fewestNextMoves) {
+        bestMoves = [allowedMoves[i]];
+        fewestNextMoves = numMoves;
+      } else if (numMoves === fewestNextMoves) {
+        bestMoves.push(allowedMoves[i]);
+      }
+    }
+
+    if (bestMoves.length > 0) {
+      return bestMoves;
+    }
+    return zeroMove;
+  }
+
+  function solve(board, visited, lastRow, lastColumn) {
+    if (areAllVisited(visited)) {
+      return true;
+    }
+    const nextMoves = getMovesFrom(board, lastRow, lastColumn);
+    updateAllowedMovesCounts(board, nextMoves);
+    const allowedMoves = nextMoves.filter(
+      ([row, column]) => !visited[row][column]
+    );
+
+    const bestMoves = getBestNextMoves(board, allowedMoves);
+    const restMoves = allowedMoves.filter(
+      move => bestMoves.indexOf(move) === -1
+    );
+    const possibleMoves = [...bestMoves];
+    possibleMoves.push(...getBestNextMoves(board, restMoves));
+
+    for (let i = 0; i < possibleMoves.length; i++) {
+      const [moveRow, moveCol] = possibleMoves[i];
+      const newBoard = copyBoard(board);
+      const newVisited = copyBoard(visited);
+      markVisited(newBoard, newVisited, moveRow, moveCol);
+      if (solve(newBoard, newVisited, moveRow, moveCol)) {
+        return true;
+      }
+    }
+    return false;
+  }
+
+  function solveStart(board, visited, startRow, startColumn) {
+    const newBoard = copyBoard(board);
+    const newVisited = copyBoard(visited);
+    markVisited(newBoard, newVisited, startRow, startColumn);
+    return solve(newBoard, newVisited, startRow, startColumn);
+  }
+
+  const moves = [
+    [-1, -2],
+    [-2, -1],
+    [-2, 1],
+    [-1, 2],
+    [1, 2],
+    [2, 1],
+    [2, -1],
+    [1, -2]
+  ];
+
+  const [baseBoard, baseVisited] = createBoards(height, width);
+  fillAllowedMovesCounts(baseBoard);
+  let solvedCount = 0;
+  for (let row = 0; row < height; row++) {
+    for (let column = 0; column < width; column++) {
+      if (solveStart(baseBoard, baseVisited, row, column)) {
+        solvedCount++;
+      }
+    }
+  }
+  return solvedCount;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/largest-int-from-concatenated-ints.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/largest-int-from-concatenated-ints.md
new file mode 100644
index 00000000000..91f5ba030ba
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/largest-int-from-concatenated-ints.md
@@ -0,0 +1,85 @@
+---
+id: 5a23c84252665b21eecc7edb
+title: Largest int from concatenated ints
+challengeType: 1
+forumTopicId: 302298
+dashedName: largest-int-from-concatenated-ints
+---
+
+# --description--
+
+Given a set of positive integers, write a function to order the integers in such a way that the concatenation of the numbers forms the largest possible integer and return this integer.
+
+# --hints--
+
+`maxCombine` should be a function.
+
+```js
+assert(typeof maxCombine == 'function');
+```
+
+`maxCombine([1, 3, 3, 4, 55])` should return a number.
+
+```js
+assert(typeof maxCombine([1, 3, 3, 4, 55]) == 'number');
+```
+
+`maxCombine([1, 3, 3, 4, 55])` should return `554331`.
+
+```js
+assert.equal(maxCombine([1, 3, 3, 4, 55]), 554331);
+```
+
+`maxCombine([71, 45, 23, 4, 5])` should return `71545423`.
+
+```js
+assert.equal(maxCombine([71, 45, 23, 4, 5]), 71545423);
+```
+
+`maxCombine([14, 43, 53, 114, 55])` should return `55534314114`.
+
+```js
+assert.equal(maxCombine([14, 43, 53, 114, 55]), 55534314114);
+```
+
+`maxCombine([1, 34, 3, 98, 9, 76, 45, 4])` should return `998764543431`.
+
+```js
+assert.equal(maxCombine([1, 34, 3, 98, 9, 76, 45, 4]), 998764543431);
+```
+
+`maxCombine([54, 546, 548, 60])` should return `6054854654`.
+
+```js
+assert.equal(maxCombine([54, 546, 548, 60]), 6054854654);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function maxCombine(xs) {
+
+}
+```
+
+# --solutions--
+
+```js
+function maxCombine(xs) {
+  return parseInt(
+    xs
+      .sort(function(x, y) {
+        var a = x.toString(),
+          b = y.toString(),
+          ab = parseInt(a + b),
+          ba = parseInt(b + a);
+
+        return ab > ba ? -1 : ab < ba ? 1 : 0;
+      })
+      .join(''),
+    10
+  );
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/last-friday-of-each-month.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/last-friday-of-each-month.md
new file mode 100644
index 00000000000..7ebd6a1b71a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/last-friday-of-each-month.md
@@ -0,0 +1,99 @@
+---
+id: 5a23c84252665b21eecc7edc
+title: Last Friday of each month
+challengeType: 1
+forumTopicId: 302299
+dashedName: last-friday-of-each-month
+---
+
+# --description--
+
+Write a function that returns the date of the last Friday of a given month for a given year.
+
+# --hints--
+
+`lastFriday` should be a function.
+
+```js
+assert(typeof lastFriday == 'function');
+```
+
+`lastFriday(2018, 1)` should return a number.
+
+```js
+assert(typeof lastFriday(2018, 1) == 'number');
+```
+
+`lastFriday(2018, 1)` should return `26`.
+
+```js
+assert.equal(lastFriday(2018, 1), 26);
+```
+
+`lastFriday(2017, 2)` should return `24`.
+
+```js
+assert.equal(lastFriday(2017, 2), 24);
+```
+
+`lastFriday(2012, 3)` should return `30`.
+
+```js
+assert.equal(lastFriday(2012, 3), 30);
+```
+
+`lastFriday(1900, 4)` should return `27`.
+
+```js
+assert.equal(lastFriday(1900, 4), 27);
+```
+
+`lastFriday(2000, 5)` should return `26`.
+
+```js
+assert.equal(lastFriday(2000, 5), 26);
+```
+
+`lastFriday(2006, 6)` should return `30`.
+
+```js
+assert.equal(lastFriday(2006, 6), 30);
+```
+
+`lastFriday(2010, 7)` should return `30`.
+
+```js
+assert.equal(lastFriday(2010, 7), 30);
+```
+
+`lastFriday(2005, 8)` should return `26`.
+
+```js
+assert.equal(lastFriday(2005, 8), 26);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function lastFriday(year, month) {
+
+}
+```
+
+# --solutions--
+
+```js
+function lastFriday(year, month) {
+  var i, last_day;
+  i = 0;
+  while (true) {
+    last_day = new Date(year, month, i);
+    if (last_day.getDay() === 5) {
+      return last_day.getDate();
+    }
+    i -= 1;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/last-letter-first-letter.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/last-letter-first-letter.md
new file mode 100644
index 00000000000..f6bb3eafe56
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/last-letter-first-letter.md
@@ -0,0 +1,211 @@
+---
+id: 5e4ce2b6ac708cc68c1df25e
+title: Last letter-first letter
+challengeType: 1
+forumTopicId: 385256
+dashedName: last-letter-first-letter
+---
+
+# --description--
+
+A certain children's game involves starting with a word in a particular category. Each participant in turn says a word, but that word must begin with the final letter of the previous word. Once a word has been given, it cannot be repeated. If an opponent cannot give a word in the category, they fall out of the game.
+
+For example, with "animals" as the category,
+
+<pre>Child 1: dog
+Child 2: goldfish
+Child 1: hippopotamus
+Child 2: snake
+...
+</pre>
+
+# --instructions--
+
+Write a function that takes an input array of words. The function should return an array of words where the first letter of each word is the same as the last letter of the previous word. Only use the words in the input array, and once a word is used it cannot be repeated. The words in the return array should be selected and sequenced so that that its length is maximized.
+
+# --hints--
+
+`findLongestChain` should be a function.
+
+```js
+assert(typeof findLongestChain == 'function');
+```
+
+`findLongestChain(["certain", "each", "game", "involves", "starting", "with", "word"])` should return an array.
+
+```js
+assert(
+  Array.isArray(
+    findLongestChain([
+      'certain',
+      'each',
+      'game',
+      'involves',
+      'starting',
+      'with',
+      'word'
+    ])
+  )
+);
+```
+
+`findLongestChain(["certain", "each", "game", "involves", "starting", "with", "word"])` should return `["involves", "starting", "game", "each"]`.
+
+```js
+assert.deepEqual(
+  findLongestChain([
+    'certain',
+    'each',
+    'game',
+    'involves',
+    'starting',
+    'with',
+    'word'
+  ]),
+  ['involves', 'starting', 'game', 'each']
+);
+```
+
+`findLongestChain(["audino", "bagon", "kangaskhan", "banette", "bidoof", "braviary", "exeggcute", "yamask"])` should return `["braviary", "yamask", "kangaskhan"]`
+
+```js
+assert.deepEqual(
+  findLongestChain([
+    'audino',
+    'bagon',
+    'kangaskhan',
+    'banette',
+    'bidoof',
+    'braviary',
+    'exeggcute',
+    'yamask'
+  ]),
+  ['braviary', 'yamask', 'kangaskhan']
+);
+```
+
+`findLongestChain(["harp", "poliwrath", "poochyena", "porygon2", "porygonz", "archana"])` should return `["poliwrath", "harp", "poochyena", "archana"]`.
+
+```js
+assert.deepEqual(
+  findLongestChain([
+    'harp',
+    'poliwrath',
+    'poochyena',
+    'porygon2',
+    'porygonz',
+    'archana'
+  ]),
+  ['poliwrath', 'harp', 'poochyena', 'archana']
+);
+```
+
+`findLongestChain(["scolipede", "elephant", "zeaking", "sealeo", "silcoon", "tigers"])` should return `["scolipede", "elephant", "tigers", "sealeo"]`.
+
+```js
+assert.deepEqual(
+  findLongestChain([
+    'scolipede',
+    'elephant',
+    'zeaking',
+    'sealeo',
+    'silcoon',
+    'tigers'
+  ]),
+  ['scolipede', 'elephant', 'tigers', 'sealeo']
+);
+```
+
+`findLongestChain(["loudred", "lumineon", "lunatone", "machamp", "magnezone", "nosepass", "petilil", "pidgeotto", "pikachu"])` should return `["machamp", "petilil", "lumineon", "nosepass"]`.
+
+```js
+assert.deepEqual(
+  findLongestChain([
+    'loudred',
+    'lumineon',
+    'lunatone',
+    'machamp',
+    'magnezone',
+    'nosepass',
+    'petilil',
+    'pidgeotto',
+    'pikachu'
+  ]),
+  ['machamp', 'petilil', 'lumineon', 'nosepass']
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function findLongestChain(items) {
+
+}
+```
+
+# --solutions--
+
+```js
+function findLongestChain(items) {
+  function Ref(index, first_char, last_char) {
+    this.index = index;
+    this.first_char = first_char;
+    this.last_char = last_char;
+  }
+
+  var items_len = items.length
+  var refs_len = items_len;
+  var refs = []
+
+  // enough space for all items
+  var longest_path_refs_len = 0;
+  var longest_path_refs = new Array(items_len);
+
+  function search(curr_len) {
+    if (curr_len > longest_path_refs_len) {
+      longest_path_refs_len = curr_len;
+
+      for (var i = 0; i < curr_len; i++) {
+        longest_path_refs[i] = refs[i];
+      }
+    }
+
+    // recursive search
+    var last_char = refs[curr_len - 1].last_char;
+    for (var i = curr_len; i < refs_len; i++)
+      if (refs[i].first_char == last_char) {
+        var aux = refs[curr_len];
+        refs[curr_len] = refs[i];
+        refs[i] = aux;
+        search(curr_len + 1);
+        refs[i] = refs[curr_len];
+        refs[curr_len] = aux;
+      }
+  }
+
+  for (var i = 0; i < items_len; i++) {
+    var itemsi_len = items[i].length;
+    refs.push(new Ref(i, items[i][0], items[i][itemsi_len - 1]));
+  }
+
+  // try each item as possible start
+  for (var i = 0; i < items_len; i++) {
+    var aux = refs[0];
+    refs[0] = refs[i];
+    refs[i] = aux;
+    search(1);
+    refs[i] = refs[0];
+    refs[0] = aux;
+  }
+
+  var longest_path_len = longest_path_refs_len;
+  var longest_path = new Array(longest_path_len);
+
+  for (var i = 0; i < longest_path_len; i++)
+    longest_path[i] = items[longest_path_refs[i].index];
+
+  return longest_path;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/leap-year.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/leap-year.md
new file mode 100644
index 00000000000..ae2f6773c80
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/leap-year.md
@@ -0,0 +1,79 @@
+---
+id: 5a23c84252665b21eecc7ede
+title: Leap year
+challengeType: 1
+forumTopicId: 302300
+dashedName: leap-year
+---
+
+# --description--
+
+Determine whether a given year is a leap year in the Gregorian calendar.
+
+# --hints--
+
+`isLeapYear` should be a function.
+
+```js
+assert(typeof isLeapYear == 'function');
+```
+
+`isLeapYear()` should return a boolean.
+
+```js
+assert(typeof isLeapYear(2018) == 'boolean');
+```
+
+`isLeapYear(2018)` should return `false`.
+
+```js
+assert.equal(isLeapYear(2018), false);
+```
+
+`isLeapYear(2016)` should return `true`.
+
+```js
+assert.equal(isLeapYear(2016), true);
+```
+
+`isLeapYear(2000)` should return `true`.
+
+```js
+assert.equal(isLeapYear(2000), true);
+```
+
+`isLeapYear(1900)` should return `false`.
+
+```js
+assert.equal(isLeapYear(1900), false);
+```
+
+`isLeapYear(1996)` should return `true`.
+
+```js
+assert.equal(isLeapYear(1996), true);
+```
+
+`isLeapYear(1800)` should return `false`.
+
+```js
+assert.equal(isLeapYear(1800), false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function isLeapYear(year) {
+
+}
+```
+
+# --solutions--
+
+```js
+function isLeapYear(year) {
+  return year % 100 === 0 ? year % 400 === 0 : year % 4 === 0;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/least-common-multiple.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/least-common-multiple.md
new file mode 100644
index 00000000000..d84da1b8b61
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/least-common-multiple.md
@@ -0,0 +1,89 @@
+---
+id: 5a23c84252665b21eecc7edf
+title: Least common multiple
+challengeType: 1
+forumTopicId: 302301
+dashedName: least-common-multiple
+---
+
+# --description--
+
+The least common multiple of 12 and 18 is 36, because 12 is a factor (12 × 3 = 36), and 18 is a factor (18 × 2 = 36), and there is no positive integer less than 36 that has both factors. As a special case, if either $m$ or $n$ is zero, then the least common multiple is zero. One way to calculate the least common multiple is to iterate all the multiples of $m$, until you find one that is also a multiple of $n$. If you already have $gcd$ for <a href="https://rosettacode.org/wiki/Greatest_common_divisor" target="_blank" rel="noopener noreferrer nofollow">greatest common divisor</a>, then this formula calculates $lcm$.
+
+$$ \\operatorname{lcm}(m, n) = \\frac{|m \\times n|}{\\operatorname{gcd}(m, n)} $$
+
+# --instructions--
+
+Compute the least common multiple of an array of integers. Given *m* and *n*, the least common multiple is the smallest positive integer that has both *m* and *n* as factors.
+
+# --hints--
+
+`LCM` should be a function.
+
+```js
+assert(typeof LCM == 'function');
+```
+
+`LCM([2, 4, 8])` should return a number.
+
+```js
+assert(typeof LCM([2, 4, 8]) == 'number');
+```
+
+`LCM([2, 4, 8])` should return `8`.
+
+```js
+assert.equal(LCM([2, 4, 8]), 8);
+```
+
+`LCM([4, 8, 12])` should return `24`.
+
+```js
+assert.equal(LCM([4, 8, 12]), 24);
+```
+
+`LCM([3, 4, 5, 12, 40])` should return `120`.
+
+```js
+assert.equal(LCM([3, 4, 5, 12, 40]), 120);
+```
+
+`LCM([11, 33, 90])` should return `990`.
+
+```js
+assert.equal(LCM([11, 33, 90]), 990);
+```
+
+`LCM([-50, 25, -45, -18, 90, 447])` should return `67050`.
+
+```js
+assert.equal(LCM([-50, 25, -45, -18, 90, 447]), 67050);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function LCM(A) {
+
+}
+```
+
+# --solutions--
+
+```js
+function LCM(A) {
+  var n = A.length,
+    a = Math.abs(A[0]);
+  for (var i = 1; i < n; i++) {
+    var b = Math.abs(A[i]),
+      c = a;
+    while (a && b) {
+      a > b ? (a %= b) : (b %= a);
+    }
+    a = Math.abs(c * A[i]) / (a + b);
+  }
+  return a;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/left-factorials.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/left-factorials.md
new file mode 100644
index 00000000000..6f589d1f1e1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/left-factorials.md
@@ -0,0 +1,115 @@
+---
+id: 5a23c84252665b21eecc7ee0
+title: Left factorials
+challengeType: 1
+forumTopicId: 302302
+dashedName: left-factorials
+---
+
+# --description--
+
+**Left factorials**, $ !n $, may refer to either *subfactorials* or to *factorial sums*. The same notation can be confusingly seen used for the two different definitions. Sometimes, *subfactorials* (also known as *derangements*) may use any of the notations:
+
+<ul>
+  <li>$!n`$</li>
+  <li>$!n$</li>
+  <li>$n¡$</li>
+</ul>
+
+(It may not be visually obvious, but the last example uses an upside-down exclamation mark.) This task will be using this formula for **left factorial**:
+
+$ !n = \\sum\_{k=0}^{n-1} k! $
+
+where $!0 = 0$
+
+# --instructions--
+
+Write a function to calculate the left factorial of a given number.
+
+# --hints--
+
+`leftFactorial` should be a function.
+
+```js
+assert(typeof leftFactorial == 'function');
+```
+
+`leftFactorial(0)` should return a number.
+
+```js
+assert(typeof leftFactorial(0) == 'number');
+```
+
+`leftFactorial(0)` should return `0`.
+
+```js
+assert.equal(leftFactorial(0), 0);
+```
+
+`leftFactorial(1)` should return `1`.
+
+```js
+assert.equal(leftFactorial(1), 1);
+```
+
+`leftFactorial(2)` should return `2`.
+
+```js
+assert.equal(leftFactorial(2), 2);
+```
+
+`leftFactorial(3)` should return `4`.
+
+```js
+assert.equal(leftFactorial(3), 4);
+```
+
+`leftFactorial(10)` should return `409114`.
+
+```js
+assert.equal(leftFactorial(10), 409114);
+```
+
+`leftFactorial(17)` should return `22324392524314`.
+
+```js
+assert.equal(leftFactorial(17), 22324392524314);
+```
+
+`leftFactorial(19)` should return `6780385526348314`.
+
+```js
+assert.equal(leftFactorial(19), 6780385526348314);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function leftFactorial(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function leftFactorial(n) {
+  if (n == 0) return 0;
+  if (n == 1) return 1;
+
+  // Note: for n>=20, the result may not be correct.
+  // This is because JavaScript uses 53 bit integers and
+  // for n>=20 result becomes too large.
+
+  let res = 2,
+    fact = 2;
+  for (var i = 2; i < n; i++) {
+    res += fact;
+    fact *= i + 1;
+  }
+
+  return res;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/letter-frequency.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/letter-frequency.md
new file mode 100644
index 00000000000..1efeade3f64
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/letter-frequency.md
@@ -0,0 +1,209 @@
+---
+id: 5e4ce2bbac708cc68c1df25f
+title: Letter frequency
+challengeType: 1
+forumTopicId: 385263
+dashedName: letter-frequency
+---
+
+# --description--
+
+Given a string, calculate the frequency of each character.
+
+All characters should be counted. This includes lower and upper case letters, digits, whitespace, special characters, or any other distinct characters.
+
+# --instructions--
+
+Write a function to count the occurrences of each character in a given string.
+
+The function should return a 2D array with each of the elements in the following form: `['char', freq]`. The character should be a string with a length of 1, and frequency is a number denoting the count.
+
+For example, given the string "ab", your function should return `[['a', 1], ['b', 1]]`.
+
+# --hints--
+
+`letterFrequency` should be a function.
+
+```js
+assert(typeof letterFrequency == 'function');
+```
+
+`letterFrequency("Not all that Mrs. Bennet, however")` should return an array.
+
+```js
+assert(Array.isArray(letterFrequency('Not all that Mrs. Bennet, however')));
+```
+
+`letterFrequency("Not all that Mrs. Bennet, however")` should return `[[" ", 5], [",", 1], [".", 1], ["B", 1], ["M", 1], ["N", 1], ["a", 2], ["e", 4], ["h", 2], ["l", 2], ["n", 2], ["o", 2], ["r", 2], ["s", 1], ["t", 4], ["v", 1], ["w", 1]]`.
+
+```js
+assert.deepEqual(letterFrequency('Not all that Mrs. Bennet, however'), [
+  [' ', 5],
+  [',', 1],
+  ['.', 1],
+  ['B', 1],
+  ['M', 1],
+  ['N', 1],
+  ['a', 2],
+  ['e', 4],
+  ['h', 2],
+  ['l', 2],
+  ['n', 2],
+  ['o', 2],
+  ['r', 2],
+  ['s', 1],
+  ['t', 4],
+  ['v', 1],
+  ['w', 1]
+]);
+```
+
+`letterFrequency("daughters, could ask on the ")` should return `[[" ", 5],[",", 1],["a", 2],["c", 1],["d", 2],["e", 2],["g", 1],["h", 2],["k", 1],["l", 1],["n", 1],["o", 2],["r", 1],["s", 2],["t", 2],["u", 2]]`.
+
+```js
+assert.deepEqual(letterFrequency('daughters, could ask on the '), [
+  [' ', 5],
+  [',', 1],
+  ['a', 2],
+  ['c', 1],
+  ['d', 2],
+  ['e', 2],
+  ['g', 1],
+  ['h', 2],
+  ['k', 1],
+  ['l', 1],
+  ['n', 1],
+  ['o', 2],
+  ['r', 1],
+  ['s', 2],
+  ['t', 2],
+  ['u', 2]
+]);
+```
+
+`letterFrequency("husband any satisfactory description")` should return `[[" ", 3], ["a", 4], ["b", 1], ["c", 2], ["d", 2], ["e", 1], ["f", 1], ["h", 1], ["i", 3], ["n", 3], ["o", 2], ["p", 1], ["r", 2], ["s", 4], ["t", 3], ["u", 1], ["y", 2]]`.
+
+```js
+assert.deepEqual(letterFrequency('husband any satisfactory description'), [
+  [' ', 3],
+  ['a', 4],
+  ['b', 1],
+  ['c', 2],
+  ['d', 2],
+  ['e', 1],
+  ['f', 1],
+  ['h', 1],
+  ['i', 3],
+  ['n', 3],
+  ['o', 2],
+  ['p', 1],
+  ['r', 2],
+  ['s', 4],
+  ['t', 3],
+  ['u', 1],
+  ['y', 2]
+]);
+```
+
+`letterFrequency("in various ways--with barefaced")` should return `[[" ", 3], ["-", 2], ["a", 4], ["b", 1], ["c", 1], ["d", 1], ["e", 2], ["f", 1], ["h", 1], ["i", 3], ["n", 1], ["o", 1], ["r", 2], ["s", 2], ["t", 1], ["u", 1], ["v", 1], ["w", 2], ["y", 1]]`.
+
+```js
+assert.deepEqual(letterFrequency('in various ways--with barefaced'), [
+  [' ', 3],
+  ['-', 2],
+  ['a', 4],
+  ['b', 1],
+  ['c', 1],
+  ['d', 1],
+  ['e', 2],
+  ['f', 1],
+  ['h', 1],
+  ['i', 3],
+  ['n', 1],
+  ['o', 1],
+  ['r', 2],
+  ['s', 2],
+  ['t', 1],
+  ['u', 1],
+  ['v', 1],
+  ['w', 2],
+  ['y', 1]
+]);
+```
+
+`letterFrequency("distant surmises; but he eluded")` should return `[[" ", 4], [";", 1], ["a", 1], ["b", 1], ["d", 3], ["e", 4], ["h", 1], ["i", 2], ["l", 1], ["m", 1], ["n", 1], ["r", 1], ["s", 4], ["t", 3], ["u", 3]]`.
+
+```js
+assert.deepEqual(letterFrequency('distant surmises; but he eluded'), [
+  [' ', 4],
+  [';', 1],
+  ['a', 1],
+  ['b', 1],
+  ['d', 3],
+  ['e', 4],
+  ['h', 1],
+  ['i', 2],
+  ['l', 1],
+  ['m', 1],
+  ['n', 1],
+  ['r', 1],
+  ['s', 4],
+  ['t', 3],
+  ['u', 3]
+]);
+```
+
+`letterFrequency("last obliged to accept the second-hand,")` should return `[[" ", 5], [",", 1], ["-", 1], ["a", 3], ["b", 1], ["c", 3], ["d", 3], ["e", 4], ["g", 1], ["h", 2], ["i", 1], ["l", 2], ["n", 2], ["o", 3], ["p", 1], ["s", 2], ["t", 4]]`.
+
+```js
+assert.deepEqual(letterFrequency('last obliged to accept the second-hand,'), [
+  [' ', 5],
+  [',', 1],
+  ['-', 1],
+  ['a', 3],
+  ['b', 1],
+  ['c', 3],
+  ['d', 3],
+  ['e', 4],
+  ['g', 1],
+  ['h', 2],
+  ['i', 1],
+  ['l', 2],
+  ['n', 2],
+  ['o', 3],
+  ['p', 1],
+  ['s', 2],
+  ['t', 4]
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function letterFrequency(txt) {
+
+}
+```
+
+# --solutions--
+
+```js
+function letterFrequency(txt) {
+    var cs = txt.split(''),
+        i = cs.length,
+        dct =  {},
+        c = '',
+        keys;
+
+    while (i--) {
+        c = cs[i];
+        dct[c] = (dct[c] || 0) + 1;
+    }
+
+    keys = Object.keys(dct);
+    keys.sort();
+    return keys.map(function (c) { return [c, dct[c]]; });
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/levenshtein-distance.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/levenshtein-distance.md
new file mode 100644
index 00000000000..89e9379aff2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/levenshtein-distance.md
@@ -0,0 +1,105 @@
+---
+id: 5e4ce2eaac708cc68c1df260
+title: Levenshtein distance
+challengeType: 1
+forumTopicId: 385264
+dashedName: levenshtein-distance
+---
+
+# --description--
+
+In information theory and computer science, the **Levenshtein distance** is a metric for measuring the amount of difference between two sequences (i.e. an edit distance). The Levenshtein distance between two strings is defined as the minimum number of edits needed to transform one string into the other, with the allowable edit operations being insertion, deletion, or substitution of a single character.
+
+Example:
+
+The Levenshtein distance between "**kitten**" and "**sitting**" is 3, since the following three edits change one into the other, and there isn't a way to do it with fewer than three edits:
+
+<ul>
+  <li><strong>k</strong>itten   <strong>s</strong>itten    (substitution of 'k' with 's')</li>
+  <li>sitt<strong>e</strong>n   sitt<strong>i</strong>n    (substitution of 'e' with 'i')</li>
+  <li>sittin   sittin<strong>g</strong>    (insert 'g' at the end).</li>
+</ul>
+
+*The Levenshtein distance between "**rosettacode**", "**raisethysword**" is **8**.*
+
+*The distance between two strings is same as that when both strings are reversed.*
+
+# --instructions--
+
+Write a function that returns the Levenshtein distance between two strings given as parameters.
+
+# --hints--
+
+`levenshtein` should be a function.
+
+```js
+assert(typeof levenshtein == 'function');
+```
+
+`levenshtein("mist", "dist")` should return a number.
+
+```js
+assert(typeof levenshtein('mist', 'dist') == 'number');
+```
+
+`levenshtein("mist", "dist")` should return `1`.
+
+```js
+assert.equal(levenshtein('mist', 'dist'), 1);
+```
+
+`levenshtein("tier", "tor")` should return `2`.
+
+```js
+assert.equal(levenshtein('tier', 'tor'), 2);
+```
+
+`levenshtein("kitten", "sitting")` should return `3`.
+
+```js
+assert.equal(levenshtein('kitten', 'sitting'), 3);
+```
+
+`levenshtein("stop", "tops")` should return `2`.
+
+```js
+assert.equal(levenshtein('stop', 'tops'), 2);
+```
+
+`levenshtein("rosettacode", "raisethysword")` should return `8`.
+
+```js
+assert.equal(levenshtein('rosettacode', 'raisethysword'), 8);
+```
+
+`levenshtein("mississippi", "swiss miss")` should return `8`.
+
+```js
+assert.equal(levenshtein('mississippi', 'swiss miss'), 8);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function levenshtein(a, b) {
+
+}
+```
+
+# --solutions--
+
+```js
+function levenshtein(a, b) {
+  var t = [], u, i, j, m = a.length, n = b.length;
+  if (!m) { return n; }
+  if (!n) { return m; }
+  for (j = 0; j <= n; j++) { t[j] = j; }
+  for (i = 1; i <= m; i++) {
+    for (u = [i], j = 1; j <= n; j++) {
+      u[j] = a[i - 1] === b[j - 1] ? t[j - 1] : Math.min(t[j - 1], t[j], u[j - 1]) + 1;
+    } t = u;
+  } return u[n];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/linear-congruential-generator.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/linear-congruential-generator.md
new file mode 100644
index 00000000000..9b7ff866168
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/linear-congruential-generator.md
@@ -0,0 +1,97 @@
+---
+id: 5e4ce2f5ac708cc68c1df261
+title: Linear congruential generator
+challengeType: 1
+forumTopicId: 385266
+dashedName: linear-congruential-generator
+---
+
+# --description--
+
+A linear congruential generator (LCG) is an <em>algorithm</em> that yields a sequence of pseudo-randomized numbers calculated with a discontinuous piecewise linear equation. All linear congruential generators use this formula:
+
+$$r_{n + 1} = (a \times r_n + c) \bmod m$$
+
+Where:
+
+<ul>
+<li>$ r_0 $ is a seed.</li>
+<li>$r_1$, $r_2$, $r_3$, ..., are the random numbers.</li>
+<li>$a$, $c$, $m$ are constants.</li>
+</ul>
+
+If one chooses the values of $a$, $c$ and $m$ with care, then the generator produces a uniform distribution of integers from $0$ to $m - 1$.
+
+<abbr title="linear congruential generator">LCG</abbr> numbers have poor quality. $r_n$ and $r\_{n + 1}$ are not independent, as true random numbers would be. Anyone who knows $r_n$ can predict $r\_{n + 1}$, therefore <abbr title="linear congruential generator">LCG</abbr> is not cryptographically secure. The <abbr title="linear congruential generator">LCG</abbr> is still good enough for simple tasks like Miller-Rabin primality test, or FreeCell deals. Among the benefits of the <abbr title="linear congruential generator">LCG</abbr>, one can easily reproduce a sequence of numbers, from the same $r_0$. One can also reproduce such sequence with a different programming language, because the formula is so simple.
+
+# --instructions--
+
+Write a function that takes $r_0,a,c,m,n$ as parameters and returns $r_n$.
+
+# --hints--
+
+`linearCongGenerator` should be a function.
+
+```js
+assert(typeof linearCongGenerator == 'function');
+```
+
+`linearCongGenerator(324, 1145, 177, 2148, 3)` should return a number.
+
+```js
+assert(typeof linearCongGenerator(324, 1145, 177, 2148, 3) == 'number');
+```
+
+`linearCongGenerator(324, 1145, 177, 2148, 3)` should return `855`.
+
+```js
+assert.equal(linearCongGenerator(324, 1145, 177, 2148, 3), 855);
+```
+
+`linearCongGenerator(234, 11245, 145, 83648, 4)` should return `1110`.
+
+```js
+assert.equal(linearCongGenerator(234, 11245, 145, 83648, 4), 1110);
+```
+
+`linearCongGenerator(85, 11, 1234, 214748, 5)` should return `62217`.
+
+```js
+assert.equal(linearCongGenerator(85, 11, 1234, 214748, 5), 62217);
+```
+
+`linearCongGenerator(0, 1103515245, 12345, 2147483648, 1)` should return `12345`.
+
+```js
+assert.equal(linearCongGenerator(0, 1103515245, 12345, 2147483648, 1), 12345);
+```
+
+`linearCongGenerator(0, 1103515245, 12345, 2147483648, 2)` should return `1406932606`.
+
+```js
+assert.equal(
+  linearCongGenerator(0, 1103515245, 12345, 2147483648, 2),
+  1406932606
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function linearCongGenerator(r0, a, c, m, n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function linearCongGenerator(r0, a, c, m, n) {
+    for (let i = 0; i < n; i++) {
+        r0 = (a * r0 + c) % m;
+    }
+    return r0;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/long-multiplication.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/long-multiplication.md
new file mode 100644
index 00000000000..174bde82794
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/long-multiplication.md
@@ -0,0 +1,111 @@
+---
+id: 5e4ce2a1ac708cc68c1df25d
+title: Long multiplication
+challengeType: 1
+forumTopicId: 385269
+dashedName: long-multiplication
+---
+
+# --description--
+
+Explicitly implement long multiplication.
+
+This is one possible approach to arbitrary-precision integer algebra.
+
+# --instructions--
+
+Write a function that takes two strings of large numbers as parameters. Your function should return the product of these two large numbers as a string.
+
+**Note:** In JavaScript, arithmetic operations are inaccurate with large numbers, so you will have to implement precise multiplication yourself.
+
+# --hints--
+
+`mult` should be a function.
+
+```js
+assert(typeof mult == 'function');
+```
+
+`mult("18446744073709551616", "18446744073709551616")` should return a string.
+
+```js
+assert(typeof mult('18446744073709551616', '18446744073709551616') == 'string');
+```
+
+`mult("18446744073709551616", "18446744073709551616")` should return `"340282366920938463463374607431768211456"`.
+
+```js
+assert.equal(
+  mult('18446744073709551616', '18446744073709551616'),
+  '340282366920938463463374607431768211456'
+);
+```
+
+`mult("31844674073709551616", "1844674407309551616")` should return `"58743055272886011737990786529368211456"`.
+
+```js
+assert.equal(
+  mult('31844674073709551616', '1844674407309551616'),
+  '58743055272886011737990786529368211456'
+);
+```
+
+`mult("1846744073709551616", "44844644073709551616")` should return `"82816580680737279241781007431768211456"`.
+
+```js
+assert.equal(
+  mult('1846744073709551616', '44844644073709551616'),
+  '82816580680737279241781007431768211456'
+);
+```
+
+`mult("1844674407370951616", "1844674407709551616")` should return `"3402823669833978308014392742590611456"`.
+
+```js
+assert.equal(
+  mult('1844674407370951616', '1844674407709551616'),
+  '3402823669833978308014392742590611456'
+);
+```
+
+`mult("2844674407370951616", "1844674407370955616")` should return `"5247498076580334548376218009219475456"`.
+
+```js
+assert.equal(
+  mult('2844674407370951616', '1844674407370955616'),
+  '5247498076580334548376218009219475456'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function mult(strNum1, strNum2) {
+
+}
+```
+
+# --solutions--
+
+```js
+function mult(strNum1, strNum2) {
+    var a1 = strNum1.split("").reverse();
+    var a2 = strNum2.toString().split("").reverse();
+    var aResult = new Array;
+
+    for ( var iterNum1 = 0; iterNum1 < a1.length; iterNum1++ ) {
+        for ( var iterNum2 = 0; iterNum2 < a2.length; iterNum2++ ) {
+            var idxIter = iterNum1 + iterNum2;    // Get the current array position.
+            aResult[idxIter] = a1[iterNum1] * a2[iterNum2] + ( idxIter >= aResult.length ? 0 : aResult[idxIter] );
+
+            if ( aResult[idxIter] > 9 ) {    // Carrying
+                aResult[idxIter + 1] = Math.floor( aResult[idxIter] / 10 ) + ( idxIter + 1 >= aResult.length ? 0 : aResult[idxIter + 1] );
+                aResult[idxIter] %= 10;
+            }
+        }
+    }
+    return aResult.reverse().join("");
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/longest-common-subsequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/longest-common-subsequence.md
new file mode 100644
index 00000000000..5b4f0d4c1d3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/longest-common-subsequence.md
@@ -0,0 +1,96 @@
+---
+id: 5e6dd1278e6ca105cde40ea9
+title: Longest common subsequence
+challengeType: 1
+forumTopicId: 385271
+dashedName: longest-common-subsequence
+---
+
+# --description--
+
+The **longest common subsequence** (or **LCS**) of groups A and B is the longest group of elements from A and B that are common between the two groups and in the same order in each group. For example, the sequences `1234` and `1224533324` have an LCS of `1234`:<u>1234</u>
+<u>12</u>245<u>3</u>332<u>4</u>
+
+For a string example, consider the sequences `thisisatest` and `testing123testing`. An LCS would be `tsitest`:
+<u>t</u>hi<u>si</u>sa<u>test</u>
+
+<u>t</u>e<u>s</u>t<u>i</u>ng123<u>test</u>ing.
+
+Your code only needs to deal with strings.
+
+# --instructions--
+
+Write a case-sensitive function that returns the LCS of two strings. You don't need to show multiple LCS's.
+
+# --hints--
+
+`lcs` should be a function.
+
+```js
+assert(typeof lcs == 'function');
+```
+
+`lcs("thisisatest", "testing123testing")` should return a string.
+
+```js
+assert(typeof lcs('thisisatest', 'testing123testing') == 'string');
+```
+
+`lcs("thisisatest", "testing123testing")` should return `"tsitest"`.
+
+```js
+assert.equal(lcs('thisisatest', 'testing123testing'), 'tsitest');
+```
+
+`lcs("ABCDGH", "AEDFHR")` should return `"ADH"`.
+
+```js
+assert.equal(lcs('ABCDGH', 'AEDFHR'), 'ADH');
+```
+
+`lcs("AGGTAB", "GXTXAYB")` should return `"GTAB"`.
+
+```js
+assert.equal(lcs('AGGTAB', 'GXTXAYB'), 'GTAB');
+```
+
+`lcs("BDACDB", "BDCB")` should return `"BDCB"`.
+
+```js
+assert.equal(lcs('BDACDB', 'BDCB'), 'BDCB');
+```
+
+`lcs("ABAZDC", "BACBAD")` should return `"ABAD"`.
+
+```js
+assert.equal(lcs('ABAZDC', 'BACBAD'), 'ABAD');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function lcs(a, b) {
+
+}
+```
+
+# --solutions--
+
+```js
+function lcs(a, b) {
+  var aSub = a.substring(0, a.length - 1);
+  var bSub = b.substring(0, b.length - 1);
+
+  if (a.length === 0 || b.length === 0) {
+    return '';
+  } else if (a.charAt(a.length - 1) === b.charAt(b.length - 1)) {
+    return lcs(aSub, bSub) + a.charAt(a.length - 1);
+  } else {
+    var x = lcs(a, bSub);
+    var y = lcs(aSub, b);
+    return (x.length > y.length) ? x : y;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/longest-increasing-subsequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/longest-increasing-subsequence.md
new file mode 100644
index 00000000000..0cd96a6d6cc
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/longest-increasing-subsequence.md
@@ -0,0 +1,120 @@
+---
+id: 5e6dd139859c290b6ab80292
+title: Longest increasing subsequence
+challengeType: 1
+forumTopicId: 385272
+dashedName: longest-increasing-subsequence
+---
+
+# --description--
+
+The longest increasing subsequence problem is to find a subsequence of a given sequence in which the subsequence's elements are in sorted order, lowest to highest, and in which the subsequence is as long as possible. An example:
+
+For the following array:
+
+```js
+const array = [3, 10, 2, 1, 20];
+```
+
+Longest increasing sequence is:
+
+$\\{3, 10, 20\\}$
+
+# --instructions--
+
+Write a function that takes an array of numbers as a parameter and returns the longest increasing subsequence.
+
+It is guaranteed that every array will have a longest increasing subsequence.
+
+# --hints--
+
+`findSequence` should be a function.
+
+```js
+assert(typeof findSequence == 'function');
+```
+
+`findSequence([3, 10, 2, 1, 20])` should return a array.
+
+```js
+assert(Array.isArray(findSequence([3, 10, 2, 1, 20])));
+```
+
+`findSequence([3, 10, 2, 1, 20])` should return `[3, 10, 20]`.
+
+```js
+assert.deepEqual(findSequence([3, 10, 2, 1, 20]), [3, 10, 20]);
+```
+
+`findSequence([2, 7, 3, 5, 8])` should return `[2, 3, 5, 8]`.
+
+```js
+assert.deepEqual(findSequence([2, 7, 3, 5, 8]), [2, 3, 5, 8]);
+```
+
+`findSequence([2, 6, 4, 5, 1])` should return `[2, 4, 5]`.
+
+```js
+assert.deepEqual(findSequence([2, 6, 4, 5, 1]), [2, 4, 5]);
+```
+
+`findSequence([10, 22, 9, 33, 21, 50, 60, 80])` should return `[10, 22, 33, 50, 60, 80]`.
+
+```js
+assert.deepEqual(findSequence([10, 22, 9, 33, 21, 50, 60, 80]), [
+  10,
+  22,
+  33,
+  50,
+  60,
+  80
+]);
+```
+
+`findSequence([0, 12, 2, 10, 6, 14, 1, 9, 5, 13, 3, 11, 7, 15])` should return `[0, 2, 6, 9, 11, 15`.
+
+```js
+assert.deepEqual(
+  findSequence([0, 12, 2, 10, 6, 14, 1, 9, 5, 13, 3, 11, 7, 15]),
+  [0, 2, 6, 9, 11, 15]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function findSequence(input) {
+
+}
+```
+
+# --solutions--
+
+```js
+function findSequence(input) {
+    var len = input.length;
+    var result = []
+    for (var i = 0; i < len; i++) result.push(1)
+
+    for (var i = 0; i < len; i++)
+        for (var j = i - 1; j >= 0; j--)
+            if (input[i] > input[j] && result[j] >= result[i])
+                result[i] = result[j] + 1;
+
+    var maxValue = Math.max.apply(null, result);
+    var maxIndex = result.indexOf(Math.max.apply(Math, result));
+    var output = [];
+    output.push(input[maxIndex]);
+    for (var i = maxIndex; i >= 0; i--) {
+        if (maxValue == 0) break;
+        if (input[maxIndex] > input[i] && result[i] == maxValue - 1) {
+            output.push(input[i]);
+            maxValue--;
+        }
+    }
+    output.reverse();
+    return output;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/longest-string-challenge.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/longest-string-challenge.md
new file mode 100644
index 00000000000..f4bedb96bcc
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/longest-string-challenge.md
@@ -0,0 +1,101 @@
+---
+id: 5e6dd14192286d95fc43046e
+title: Longest string challenge
+challengeType: 1
+forumTopicId: 385275
+dashedName: longest-string-challenge
+---
+
+# --description--
+
+In this challenge, you have to find the strings that are the longest among the given strings.
+
+# --instructions--
+
+Write a function that takes an array of strings and returns the strings that have a length equal to the longest length.
+
+# --hints--
+
+`longestString` should be a function.
+
+```js
+assert(typeof longestString == 'function');
+```
+
+`longestString(["a", "bb", "ccc", "ee", "f", "ggg"])` should return a array.
+
+```js
+assert(Array.isArray(longestString(['a', 'bb', 'ccc', 'ee', 'f', 'ggg'])));
+```
+
+`longestString(["a", "bb", "ccc", "ee", "f", "ggg"])` should return `["ccc", "ggg"]`.
+
+```js
+assert.deepEqual(longestString(['a', 'bb', 'ccc', 'ee', 'f', 'ggg']), [
+  'ccc',
+  'ggg'
+]);
+```
+
+`longestString(["afedg", "bb", "sdccc", "efdee", "f", "geegg"])` should return `["afedg", "sdccc", "efdee", "geegg"]`.
+
+```js
+assert.deepEqual(
+  longestString(['afedg', 'bb', 'sdccc', 'efdee', 'f', 'geegg']),
+  ['afedg', 'sdccc', 'efdee', 'geegg']
+);
+```
+
+`longestString(["a", "bhghgb", "ccc", "efde", "fssdrr", "ggg"])` should return `["bhghgb", "fssdrr"]`.
+
+```js
+assert.deepEqual(
+  longestString(['a', 'bhghgb', 'ccc', 'efde', 'fssdrr', 'ggg']),
+  ['bhghgb', 'fssdrr']
+);
+```
+
+`longestString(["ahgfhg", "bdsfsb", "ccc", "ee", "f", "ggdsfg"])` should return `["ahgfhg", "bdsfsb", "ggdsfg"]`.
+
+```js
+assert.deepEqual(
+  longestString(['ahgfhg', 'bdsfsb', 'ccc', 'ee', 'f', 'ggdsfg']),
+  ['ahgfhg', 'bdsfsb', 'ggdsfg']
+);
+```
+
+`longestString(["a", "bbdsf", "ccc", "edfe", "gzzzgg"])` should return `["gzzzgg"]`.
+
+```js
+assert.deepEqual(longestString(['a', 'bbdsf', 'ccc', 'edfe', 'gzzzgg']), [
+  'gzzzgg'
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function longestString(strings) {
+
+}
+```
+
+# --solutions--
+
+```js
+function longestString(strings) {
+    var mx = 0;
+    var result = []
+    strings.forEach(function (e) {
+        if (e.length > mx) {
+            mx = e.length
+            result = [e]
+        } else if (e.length == mx)
+            result.push(e)
+    })
+
+    return result
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/look-and-say-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/look-and-say-sequence.md
new file mode 100644
index 00000000000..464d824a0c9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/look-and-say-sequence.md
@@ -0,0 +1,92 @@
+---
+id: 5e6dd14797f5ce267c2f19d0
+title: Look-and-say sequence
+challengeType: 1
+forumTopicId: 385277
+dashedName: look-and-say-sequence
+---
+
+# --description--
+
+The Look and say sequence is a recursively defined sequence of numbers.
+
+Sequence Definition
+
+<ul><li>Take a decimal number</li>
+<li><span>Look</span> at the number, visually grouping consecutive runs of the same digit.</li>
+<li><span>Say</span> the number, from left to right, group by group; as how many of that digit there are - followed by the digit grouped.</li></ul><span> This becomes the next number of the sequence.</span>
+
+An example:
+
+<ul><li>Starting with the number 1, you have <span>one</span> 1 which produces 11</li>
+<li>Starting with 11, you have <span>two</span> 1's. I.E.: 21</li>
+<li>Starting with 21, you have <span>one</span> 2, then <span>one</span> 1. I.E.: (12)(11) which becomes 1211</li>
+<li>Starting with 1211, you have <span>one</span> 1, <span>one</span> 2, then <span>two</span> 1's. I.E.: (11)(12)(21) which becomes 111221</li></ul>
+
+# --instructions--
+
+Write a function that accepts a string as a parameter, processes it, and returns the resultant string.
+
+# --hints--
+
+`lookAndSay` should be a function.
+
+```js
+assert(typeof lookAndSay == 'function');
+```
+
+`lookAndSay("1")` should return a string.
+
+```js
+assert(typeof lookAndSay('1') == 'string');
+```
+
+`lookAndSay("1")` should return `"11"`.
+
+```js
+assert.equal(lookAndSay('1'), '11');
+```
+
+`lookAndSay("11")` should return `"21"`.
+
+```js
+assert.equal(lookAndSay('11'), '21');
+```
+
+`lookAndSay("21")` should return `"1211"`.
+
+```js
+assert.equal(lookAndSay('21'), '1211');
+```
+
+`lookAndSay("1211")` should return `"111221"`.
+
+```js
+assert.equal(lookAndSay('1211'), '111221');
+```
+
+`lookAndSay("3542")` should return `"13151412"`.
+
+```js
+assert.equal(lookAndSay('3542'), '13151412');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function lookAndSay(str) {
+
+}
+```
+
+# --solutions--
+
+```js
+function lookAndSay(str) {
+    return str.replace(/(.)\1*/g, function(seq, p1) {
+      return seq.length.toString() + p1;
+    });
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/loop-over-multiple-arrays-simultaneously.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/loop-over-multiple-arrays-simultaneously.md
new file mode 100644
index 00000000000..d0bd62b8726
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/loop-over-multiple-arrays-simultaneously.md
@@ -0,0 +1,139 @@
+---
+id: 5e6dd15004c88cf00d2a78b3
+title: Loop over multiple arrays simultaneously
+challengeType: 1
+forumTopicId: 385279
+dashedName: loop-over-multiple-arrays-simultaneously
+---
+
+# --description--
+
+Loop over multiple arrays and create a new array whose $i^{th}$ element is the concatenation of $i^{th}$ element of each of the given.
+
+For this example, if you are given this array of arrays:
+
+```js
+[ ["a", "b", "c"], ["A", "B", "C"], [1, 2, 3] ]
+```
+
+the output should be:
+
+```js
+["aA1","bB2","cC3"]
+```
+
+# --instructions--
+
+Write a function that takes an array of arrays as a parameter and returns an array of strings satisfying the given description.
+
+# --hints--
+
+`loopSimult` should be a function.
+
+```js
+assert(typeof loopSimult == 'function');
+```
+
+`loopSimult([["a", "b", "c"], ["A", "B", "C"], [1, 2, 3]])` should return a array.
+
+```js
+assert(
+  Array.isArray(
+    loopSimult([
+      ['a', 'b', 'c'],
+      ['A', 'B', 'C'],
+      [1, 2, 3]
+    ])
+  )
+);
+```
+
+`loopSimult([["a", "b", "c"], ["A", "B", "C"], [1, 2, 3]])` should return `["aA1", "bB2", "cC3"]`.
+
+```js
+assert.deepEqual(
+  loopSimult([
+    ['a', 'b', 'c'],
+    ['A', 'B', 'C'],
+    [1, 2, 3]
+  ]),
+  ['aA1', 'bB2', 'cC3']
+);
+```
+
+`loopSimult([["c", "b", "c"], ["4", "5", "C"], [7, 7, 3]])` should return `["c47", "b57", "cC3"]`.
+
+```js
+assert.deepEqual(
+  loopSimult([
+    ['c', 'b', 'c'],
+    ['4', '5', 'C'],
+    [7, 7, 3]
+  ]),
+  ['c47', 'b57', 'cC3']
+);
+```
+
+`loopSimult([["a", "b", "c", "d"], ["A", "B", "C", "d"], [1, 2, 3, 4]])` should return `["aA1", "bB2", "cC3", "dd4"]`.
+
+```js
+assert.deepEqual(
+  loopSimult([
+    ['a', 'b', 'c', 'd'],
+    ['A', 'B', 'C', 'd'],
+    [1, 2, 3, 4]
+  ]),
+  ['aA1', 'bB2', 'cC3', 'dd4']
+);
+```
+
+`loopSimult([["a", "b"], ["A", "B"], [1, 2]])` should return `["aA1", "bB2"]`.
+
+```js
+assert.deepEqual(
+  loopSimult([
+    ['a', 'b'],
+    ['A', 'B'],
+    [1, 2]
+  ]),
+  ['aA1', 'bB2']
+);
+```
+
+`loopSimult([["b", "c"], ["B", "C"], [2, 3]])` should return `["bB2", "cC3"]`.
+
+```js
+assert.deepEqual(
+  loopSimult([
+    ['b', 'c'],
+    ['B', 'C'],
+    [2, 3]
+  ]),
+  ['bB2', 'cC3']
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function loopSimult(A) {
+
+}
+```
+
+# --solutions--
+
+```js
+function loopSimult(A) {
+    var res = [], output;
+    for (var i = 0; i < A[0].length; i += 1) {
+        output = "";
+        for (var j = 0; j < A.length; j++)
+            output += A[j][i];
+        res.push(output);
+    }
+    return res;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lu-decomposition.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lu-decomposition.md
new file mode 100644
index 00000000000..45759df22aa
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lu-decomposition.md
@@ -0,0 +1,318 @@
+---
+id: 5e6decd8ec8d7db960950d1c
+title: LU decomposition
+challengeType: 1
+forumTopicId: 385280
+dashedName: lu-decomposition
+---
+
+# --description--
+
+Every square matrix $A$ can be decomposed into a product of a lower triangular matrix $L$ and a upper triangular matrix $U$. This is known as the LU decomposition.
+
+$A = LU$
+
+It is a modified form of Gaussian elimination.
+
+While the Cholesky decomposition only works for symmetric, positive definite matrices, the more general LU decomposition works for any square matrix.
+
+There are several algorithms for calculating $L$ and $U$.
+
+To derive *Crout's algorithm* for a 3x3 example, we have to solve the following system:
+
+\\begin{align}A = \\begin{pmatrix} a\_{11} & a\_{12} & a\_{13}\\\\ a\_{21} & a\_{22} & a\_{23}\\\\ a\_{31} & a\_{32} & a\_{33}\\\\ \\end{pmatrix}= \\begin{pmatrix} l\_{11} & 0 & 0 \\\\ l\_{21} & l\_{22} & 0 \\\\ l\_{31} & l\_{32} & l\_{33}\\\\ \\end{pmatrix} \\begin{pmatrix} u\_{11} & u\_{12} & u\_{13} \\\\ 0 & u\_{22} & u\_{23} \\\\ 0 & 0 & u\_{33} \\end{pmatrix} = LU\\end{align}
+
+We now would have to solve 9 equations with 12 unknowns. To make the system uniquely solvable, usually the diagonal elements of $L$ are set to 1
+
+$l\_{11}=1$
+
+$l\_{22}=1$
+
+$l\_{33}=1$
+
+so we get a solvable system of 9 unknowns and 9 equations.
+
+\\begin{align}A = \\begin{pmatrix} a\_{11} & a\_{12} & a\_{13}\\\\ a\_{21} & a\_{22} & a\_{23}\\\\ a\_{31} & a\_{32} & a\_{33}\\\\ \\end{pmatrix} = \\begin{pmatrix} 1 & 0 & 0 \\\\ l\_{21} & 1 & 0 \\\\ l\_{31} & l\_{32} & 1\\\\ \\end{pmatrix} \\begin{pmatrix} u\_{11} & u\_{12} & u\_{13} \\\\ 0 & u\_{22} & u\_{23} \\\\ 0 & 0 & u\_{33} \\end{pmatrix} = \\begin{pmatrix} u\_{11} & u\_{12} & u\_{13} \\\\ u\_{11}l\_{21} & u\_{12}l\_{21}+u\_{22} & u\_{13}l\_{21}+u\_{23} \\\\ u\_{11}l\_{31} & u\_{12}l\_{31}+u\_{22}l\_{32} & u\_{13}l\_{31} + u\_{23}l\_{32}+u\_{33} \\end{pmatrix} = LU\\end{align}
+
+Solving for the other $l$ and $u$, we get the following equations:
+
+$u\_{11}=a\_{11}$
+
+$u\_{12}=a\_{12}$
+
+$u\_{13}=a\_{13}$
+
+$u\_{22}=a\_{22} - u\_{12}l\_{21}$
+
+$u\_{23}=a\_{23} - u\_{13}l\_{21}$
+
+$u\_{33}=a\_{33} - (u\_{13}l\_{31} + u\_{23}l\_{32})$
+
+and for $l$:
+
+$l\_{21}=\\frac{1}{u\_{11}} a\_{21}$
+
+$l\_{31}=\\frac{1}{u\_{11}} a\_{31}$
+
+$l\_{32}=\\frac{1}{u\_{22}} (a\_{32} - u\_{12}l\_{31})$
+
+We see that there is a calculation pattern, which can be expressed as the following formulas, first for $U$
+
+$u\_{ij} = a\_{ij} - \\sum\_{k=1}^{i-1} u\_{kj}l\_{ik}$
+
+and then for $L$
+
+$l\_{ij} = \\frac{1}{u\_{jj}} (a\_{ij} - \\sum\_{k=1}^{j-1} u\_{kj}l\_{ik})$
+
+We see in the second formula that to get the $l\_{ij}$ below the diagonal, we have to divide by the diagonal element (pivot) $u\_{jj}$, so we get problems when $u\_{jj}$ is either 0 or very small, which leads to numerical instability.
+
+The solution to this problem is *pivoting* $A$, which means rearranging the rows of $A$, prior to the $LU$ decomposition, in a way that the largest element of each column gets onto the diagonal of $A$. Rearranging the rows means to multiply $A$ by a permutation matrix $P$:
+
+$PA \\Rightarrow A'$
+
+Example:
+
+\\begin{align} \\begin{pmatrix} 0 & 1 \\\\ 1 & 0 \\end{pmatrix} \\begin{pmatrix} 1 & 4 \\\\ 2 & 3 \\end{pmatrix} \\Rightarrow \\begin{pmatrix} 2 & 3 \\\\ 1 & 4 \\end{pmatrix} \\end{align}
+
+The decomposition algorithm is then applied on the rearranged matrix so that
+
+$PA = LU$
+
+# --instructions--
+
+The task is to implement a routine which will take a square nxn matrix $A$ and return a lower triangular matrix $L$, a upper triangular matrix $U$ and a permutation matrix $P$, so that the above equation is fullfilled. The returned value should be in the form `[L, U, P]`.
+
+# --hints--
+
+`luDecomposition` should be a function.
+
+```js
+assert(typeof luDecomposition == 'function');
+```
+
+`luDecomposition([[1, 3, 5], [2, 4, 7], [1, 1, 0]])` should return a array.
+
+```js
+assert(
+  Array.isArray(
+    luDecomposition([
+      [1, 3, 5],
+      [2, 4, 7],
+      [1, 1, 0]
+    ])
+  )
+);
+```
+
+`luDecomposition([[1, 3, 5], [2, 4, 7], [1, 1, 0]])` should return `[[[1, 0, 0], [0.5, 1, 0], [0.5, -1, 1]], [[2, 4, 7], [0, 1, 1.5], [0, 0, -2]], [[0, 1, 0], [1, 0, 0], [0, 0, 1]]]`.
+
+```js
+assert.deepEqual(
+  luDecomposition([
+    [1, 3, 5],
+    [2, 4, 7],
+    [1, 1, 0]
+  ]),
+  [
+    [
+      [1, 0, 0],
+      [0.5, 1, 0],
+      [0.5, -1, 1]
+    ],
+    [
+      [2, 4, 7],
+      [0, 1, 1.5],
+      [0, 0, -2]
+    ],
+    [
+      [0, 1, 0],
+      [1, 0, 0],
+      [0, 0, 1]
+    ]
+  ]
+);
+```
+
+`luDecomposition([[11, 9, 24, 2], [1, 5, 2, 6], [3, 17, 18, 1], [2, 5, 7, 1]])` should return `[[[1, 0, 0, 0], [0.2727272727272727, 1, 0, 0], [0.09090909090909091, 0.2875, 1, 0], [0.18181818181818182, 0.23124999999999996, 0.0035971223021580693, 1]], [[11, 9, 24, 2], [0, 14.545454545454547, 11.454545454545455, 0.4545454545454546], [0, 0, -3.4749999999999996, 5.6875], [0, 0, 0, 0.510791366906476]], [[1, 0, 0, 0], [0, 0, 1, 0], [0, 1, 0, 0], [0, 0, 0, 1]]]`.
+
+```js
+assert.deepEqual(
+  luDecomposition([
+    [11, 9, 24, 2],
+    [1, 5, 2, 6],
+    [3, 17, 18, 1],
+    [2, 5, 7, 1]
+  ]),
+  [
+    [
+      [1, 0, 0, 0],
+      [0.2727272727272727, 1, 0, 0],
+      [0.09090909090909091, 0.2875, 1, 0],
+      [0.18181818181818182, 0.23124999999999996, 0.0035971223021580693, 1]
+    ],
+    [
+      [11, 9, 24, 2],
+      [0, 14.545454545454547, 11.454545454545455, 0.4545454545454546],
+      [0, 0, -3.4749999999999996, 5.6875],
+      [0, 0, 0, 0.510791366906476]
+    ],
+    [
+      [1, 0, 0, 0],
+      [0, 0, 1, 0],
+      [0, 1, 0, 0],
+      [0, 0, 0, 1]
+    ]
+  ]
+);
+```
+
+`luDecomposition([[1, 1, 1], [4, 3, -1], [3, 5, 3]])` should return `[[[1, 0, 0], [0.75, 1, 0], [0.25, 0.09090909090909091, 1]], [[4, 3, -1], [0, 2.75, 3.75], [0, 0, 0.9090909090909091]], [[0, 1, 0], [0, 0, 1], [1, 0, 0]]]`.
+
+```js
+assert.deepEqual(
+  luDecomposition([
+    [1, 1, 1],
+    [4, 3, -1],
+    [3, 5, 3]
+  ]),
+  [
+    [
+      [1, 0, 0],
+      [0.75, 1, 0],
+      [0.25, 0.09090909090909091, 1]
+    ],
+    [
+      [4, 3, -1],
+      [0, 2.75, 3.75],
+      [0, 0, 0.9090909090909091]
+    ],
+    [
+      [0, 1, 0],
+      [0, 0, 1],
+      [1, 0, 0]
+    ]
+  ]
+);
+```
+
+`luDecomposition([[1, -2, 3], [2, -5, 12], [0, 2, -10]])` should return `[[[1, 0, 0], [0, 1, 0], [0.5, 0.25, 1]], [[2, -5, 12], [0, 2, -10], [0, 0, -0.5]], [[0, 1, 0], [0, 0, 1], [1, 0, 0]]]`.
+
+```js
+assert.deepEqual(
+  luDecomposition([
+    [1, -2, 3],
+    [2, -5, 12],
+    [0, 2, -10]
+  ]),
+  [
+    [
+      [1, 0, 0],
+      [0, 1, 0],
+      [0.5, 0.25, 1]
+    ],
+    [
+      [2, -5, 12],
+      [0, 2, -10],
+      [0, 0, -0.5]
+    ],
+    [
+      [0, 1, 0],
+      [0, 0, 1],
+      [1, 0, 0]
+    ]
+  ]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function luDecomposition(A) {
+
+}
+```
+
+# --solutions--
+
+```js
+function luDecomposition(A) {
+
+    function dotProduct(a, b) {
+        var sum = 0;
+        for (var i = 0; i < a.length; i++)
+            sum += a[i] * b[i]
+        return sum;
+    }
+
+    function matrixMul(A, B) {
+        var result = new Array(A.length);
+        for (var i = 0; i < A.length; i++)
+            result[i] = new Array(B[0].length)
+        var aux = new Array(B.length);
+
+        for (var j = 0; j < B[0].length; j++) {
+
+            for (var k = 0; k < B.length; k++)
+                aux[k] = B[k][j];
+
+            for (var i = 0; i < A.length; i++)
+                result[i][j] = dotProduct(A[i], aux);
+        }
+        return result;
+    }
+
+    function pivotize(m) {
+        var n = m.length;
+        var id = new Array(n);
+        for (var i = 0; i < n; i++) {
+            id[i] = new Array(n);
+            id[i].fill(0)
+            id[i][i] = 1;
+        }
+
+        for (var i = 0; i < n; i++) {
+            var maxm = m[i][i];
+            var row = i;
+            for (var j = i; j < n; j++)
+                if (m[j][i] > maxm) {
+                    maxm = m[j][i];
+                    row = j;
+                }
+
+            if (i != row) {
+                var tmp = id[i];
+                id[i] = id[row];
+                id[row] = tmp;
+            }
+        }
+        return id;
+    }
+
+    var n = A.length;
+    var L = new Array(n);
+    for (var i = 0; i < n; i++) { L[i] = new Array(n); L[i].fill(0) }
+    var U = new Array(n);
+    for (var i = 0; i < n; i++) { U[i] = new Array(n); U[i].fill(0) }
+    var P = pivotize(A);
+    var A2 = matrixMul(P, A);
+
+    for (var j = 0; j < n; j++) {
+        L[j][j] = 1;
+        for (var i = 0; i < j + 1; i++) {
+            var s1 = 0;
+            for (var k = 0; k < i; k++)
+                s1 += U[k][j] * L[i][k];
+            U[i][j] = A2[i][j] - s1;
+        }
+        for (var i = j; i < n; i++) {
+            var s2 = 0;
+            for (var k = 0; k < j; k++)
+                s2 += U[k][j] * L[i][k];
+            L[i][j] = (A2[i][j] - s2) / U[j][j];
+        }
+    }
+    return [L, U, P];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lucas-lehmer-test.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lucas-lehmer-test.md
new file mode 100644
index 00000000000..e909f6b3f6a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lucas-lehmer-test.md
@@ -0,0 +1,109 @@
+---
+id: 5e6dee7749a0b85a3f1fc7d5
+title: Lucas-Lehmer test
+challengeType: 1
+forumTopicId: 385281
+dashedName: lucas-lehmer-test
+---
+
+# --description--
+
+Lucas-Lehmer Test: for $p$ an odd prime, the Mersenne number $2^p-1$ is prime if and only if $2^p-1$ divides $S(p-1)$ where $S(n+1)=(S(n))^2-2$, and $S(1)=4$.
+
+# --instructions--
+
+Write a function that returns whether the given Mersenne number is prime or not.
+
+# --hints--
+
+`lucasLehmer` should be a function.
+
+```js
+assert(typeof lucasLehmer == 'function');
+```
+
+`lucasLehmer(11)` should return a boolean.
+
+```js
+assert(typeof lucasLehmer(11) == 'boolean');
+```
+
+`lucasLehmer(11)` should return `false`.
+
+```js
+assert.equal(lucasLehmer(11), false);
+```
+
+`lucasLehmer(15)` should return `false`.
+
+```js
+assert.equal(lucasLehmer(15), false);
+```
+
+`lucasLehmer(13)` should return `true`.
+
+```js
+assert.equal(lucasLehmer(13), true);
+```
+
+`lucasLehmer(17)` should return `true`.
+
+```js
+assert.equal(lucasLehmer(17), true);
+```
+
+`lucasLehmer(19)` should return `true`.
+
+```js
+assert.equal(lucasLehmer(19), true);
+```
+
+`lucasLehmer(21)` should return `false`.
+
+```js
+assert.equal(lucasLehmer(21), false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function lucasLehmer(p) {
+
+}
+```
+
+# --solutions--
+
+```js
+function lucasLehmer(p) {
+    function isPrime(p) {
+        if (p == 2)
+            return true;
+        else if (p <= 1 || p % 2 == 0)
+            return false;
+        else {
+            var to = Math.sqrt(p);
+            for (var i = 3; i <= to; i += 2)
+                if (p % i == 0)
+                    return false;
+            return true;
+        }
+    }
+
+    function isMersennePrime(p) {
+        if (p == 2)
+            return true;
+        else {
+            var m_p = Math.pow(2, p) - 1
+            var s = 4;
+            for (var i = 3; i <= p; i++)
+                s = (s * s - 2) % m_p
+            return s == 0;
+        }
+    }
+
+    return isPrime(p) && isMersennePrime(p)
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/ludic-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/ludic-numbers.md
new file mode 100644
index 00000000000..1311dbd718a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/ludic-numbers.md
@@ -0,0 +1,129 @@
+---
+id: 5ea281203167d2b0bdefca00
+title: Ludic numbers
+challengeType: 1
+forumTopicId: 385282
+dashedName: ludic-numbers
+---
+
+# --description--
+
+Ludic numbers are related to prime numbers as they are generated by a sieve quite like the Sieve of Eratosthenes is used to generate prime numbers.
+
+The first ludic number is 1.
+
+To generate succeeding ludic numbers create an array of increasing integers starting from 2.
+
+<code style='margin-left: 2em;'><span style='color:blue;font-weight:bold'>2</span> 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...</code>
+
+(Loop)
+
+<ul>
+  <li>Take the first member of the resultant array as the next ludic number <span style='color:blue;font-weight:bold'>2</span>.</li>
+  <li>Remove every <strong>2<sup>nd</sup></strong> indexed item from the array (including the first).</li>
+  <code style='margin-left: 2em;'><span style='color:blue;font-weight:bold;'><s>2</s></span> 3 <s>4</s> 5 <s>6</s> 7 <s>8</s> 9 <s>10</s> 11 <s>12</s> 13 <s>14</s> 15 <s>16</s> 17 <s>18</s> 19 <s>20</s> 21 <s>22</s> 23 <s>24</s> 25 <s>26</s> ...</code>
+</ul>
+
+<ul>
+  <li>(Unrolling a few loops...)</li>
+  <li>Take the first member of the resultant array as the next ludic number <span style='color:blue;font-weight:bold'>3</span>.</li>
+  <li>Remove every <strong>3<sup>rd</sup></strong> indexed item from the array (including the first).</li>
+  <code style='margin-left: 2em;'><span style='color:blue;font-weight:bold'><s>3</s></span> 5 7 <s>9</s> 11 13 <s>15</s> 17 19 <s>21</s> 23 25 <s>27</s> 29 31 <s>33</s> 35 37 <s>39</s> 41 43 <s>45</s> 47 49 <s>51</s> ...</code>
+</ul>
+
+<ul>
+  <li>Take the first member of the resultant array as the next ludic number <span style='color:blue;font-weight:bold'>5</span>.</li>
+  <li>Remove every <strong>5<sup>th</sup></strong> indexed item from the array (including the first).</li>
+  <code style='margin-left: 2em;'><span style='color:blue;font-weight:bold'><s>5</s></span> 7 11 13 17 <s>19</s> 23 25 29 31 <s>35</s> 37 41 43 47 <s>49</s> 53 55 59 61 <s>65</s> 67 71 73 77 ...</code>
+</ul>
+
+<ul>
+  <li>Take the first member of the resultant array as the next ludic number <span style='color:blue;font-weight:bold'>7</span>.</li>
+  <li>Remove every <strong>7<sup>th</sup></strong> indexed item from the array (including the first).</li>
+  <code style='margin-left: 2em;'><span style='color:blue;font-weight:bold'><s>7</s></span> 11 13 17 23 25 29 <s>31</s> 37 41 43 47 53 55 <s>59</s> 61 67 71 73 77 83 <s>85</s> 89 91 97 ...</code>
+</ul>
+
+<ul>
+  <li><big><b> ... </b></big></li>
+  <li>Take the first member of the current array as the next ludic number <span style='color:blue;font-weight:bold'>L</span>.</li>
+  <li>Remove every <strong>L<sup>th</sup></strong> indexed item from the array (including the first).</li>
+  <li><big><b> ... </b></big></li>
+</ul>
+
+# --instructions--
+
+Write a function that returns all the ludic numbers less than or equal to the given number.
+
+# --hints--
+
+`ludic` should be a function.
+
+```js
+assert(typeof ludic === 'function', '<code>ludic</code> should be a function.');
+```
+
+`ludic(2)` should return a array.
+
+```js
+assert(Array.isArray(ludic(2)));
+```
+
+`ludic(2)` should return `[1, 2]`.
+
+```js
+assert.deepEqual(ludic(2), [1, 2]);
+```
+
+`ludic(3)` should return `[1, 2, 3]`.
+
+```js
+assert.deepEqual(ludic(3), [1, 2, 3]);
+```
+
+`ludic(5)` should return `[1, 2, 3, 5]`.
+
+```js
+assert.deepEqual(ludic(5), [1, 2, 3, 5]);
+```
+
+`ludic(20)` should return `[1, 2, 3, 5, 7, 11, 13, 17]`.
+
+```js
+assert.deepEqual(ludic(20), [1, 2, 3, 5, 7, 11, 13, 17]);
+```
+
+`ludic(26)` should return `[1, 2, 3, 5, 7, 11, 13, 17, 23, 25]`.
+
+```js
+assert.deepEqual(ludic(26), [1, 2, 3, 5, 7, 11, 13, 17, 23, 25]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function ludic(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function ludic(n) {
+  const makeArr = (s, e) => new Array(e + 1 - s).fill(s).map((e, i) => e + i);
+
+  const filterAtInc = (arr, n) => arr.filter((e, i) => (i + 1) % n);
+
+  const makeLudic = (arr, result) => {
+    const iter = arr.shift();
+    result.push(iter);
+    return arr.length ? makeLudic(filterAtInc(arr, iter), result) : result;
+  };
+
+  const ludicResult = makeLudic(makeArr(2, n), [1]);
+
+  return ludicResult;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/luhn-test-of-credit-card-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/luhn-test-of-credit-card-numbers.md
new file mode 100644
index 00000000000..596dfd62879
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/luhn-test-of-credit-card-numbers.md
@@ -0,0 +1,125 @@
+---
+id: 5ea28156e79528a9ab248f27
+title: Luhn test of credit card numbers
+challengeType: 1
+forumTopicId: 385284
+dashedName: luhn-test-of-credit-card-numbers
+---
+
+# --description--
+
+The Luhn test is used by some credit card companies to distinguish valid credit card numbers from what could be a random selection of digits.
+
+Those companies using credit card numbers that can be validated by the Luhn test have numbers that pass the following test:
+
+<ol>
+  <li> Reverse the order of the digits in the number.</li>
+  <li> Take the first, third, ... and every other odd digit in the reversed digits and sum them to form the partial sum s1</li>
+  <li> Taking the second, fourth ... and every other even digit in the reversed digits:</li>
+    <ol>
+      <li>Multiply each digit by two and sum the digits if the answer is greater than nine to form partial sums for the even digits.</li>
+      <li>Sum the partial sums of the even digits to form s2.</li>
+    </ol>
+  <li>If s1 + s2 ends in zero then the original number is in the form of a valid credit card number as verified by the Luhn test.</li>
+</ol>
+
+For example, if the trial number is 49927398716:
+
+```bash
+Reverse the digits:
+  61789372994
+Sum the odd digits:
+  6 + 7 + 9 + 7 + 9 + 4 = 42 = s1
+The even digits:
+    1, 8, 3, 2, 9
+  Two times each even digit:
+    2, 16, 6, 4, 18
+  Sum the digits of each multiplication:
+    2, 7, 6, 4, 9
+  Sum the last:
+    2 + 7 + 6 + 4 + 9 = 28 = s2
+
+s1 + s2 = 70 which ends in zero which means that 49927398716 passes the Luhn test.
+```
+
+# --instructions--
+
+Write a function that will validate a number with the Luhn test. Return true if it's a valid number. Otherwise, return false.
+
+# --hints--
+
+`luhnTest` should be a function.
+
+```js
+assert(typeof luhnTest === 'function');
+```
+
+`luhnTest("4111111111111111")` should return a boolean.
+
+```js
+assert(typeof luhnTest('4111111111111111') === 'boolean');
+```
+
+`luhnTest("4111111111111111")` should return `true`.
+
+```js
+assert.equal(luhnTest('4111111111111111'), true);
+```
+
+`luhnTest("4111111111111112")` should return `false`.
+
+```js
+assert.equal(luhnTest('4111111111111112'), false);
+```
+
+`luhnTest("49927398716")` should return `true`.
+
+```js
+assert.equal(luhnTest('49927398716'), true);
+```
+
+`luhnTest("49927398717")` should return `false`.
+
+```js
+assert.equal(luhnTest('49927398717'), false);
+```
+
+`luhnTest("1234567812345678")` should return `false`.
+
+```js
+assert.equal(luhnTest('1234567812345678'), false);
+```
+
+`luhnTest("1234567812345670")` should return `true`.
+
+```js
+assert.equal(luhnTest('1234567812345670'), true);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function luhnTest(str) {
+
+}
+```
+
+# --solutions--
+
+```js
+function luhnTest(str) {
+  var luhnArr = [0, 2, 4, 6, 8, 1, 3, 5, 7, 9];
+  var counter = 0;
+  var incNum;
+  var odd = false;
+  var temp = String(str).replace(/[^\d]/g, '');
+  if (temp.length == 0) return false;
+  for (var i = temp.length - 1; i >= 0; --i) {
+    incNum = parseInt(temp.charAt(i), 10);
+    counter += (odd = !odd) ? incNum : luhnArr[incNum];
+  }
+  return counter % 10 == 0;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lychrel-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lychrel-numbers.md
new file mode 100644
index 00000000000..be2d4482f9f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lychrel-numbers.md
@@ -0,0 +1,151 @@
+---
+id: 5ea2815a8640bcc6cb7dab3c
+title: Lychrel numbers
+challengeType: 1
+forumTopicId: 385287
+dashedName: lychrel-numbers
+---
+
+# --description--
+
+<ol>
+  <li>Take an integer <code>n₀</code>, greater than zero.</li>
+  <li>Form the next number <code>n</code> of the series by reversing <code>n₀</code> and adding it to <code>n₀</code></li>
+  <li>Stop when <code>n</code> becomes palindromic - i.e. the digits of <code>n</code> in reverse order == <code>n</code>.</li>
+</ol>
+
+The above recurrence relation when applied to most starting numbers `n` = 1, 2, ... terminates in a palindrome quite quickly.
+
+For example if `n₀` = 12 we get:
+
+```bash
+12
+12 + 21 = 33,  a palindrome!
+```
+
+And if `n₀` = 55 we get:
+
+```bash
+55
+55 + 55 = 110
+110 + 011 = 121,  a palindrome!
+```
+
+Notice that the check for a palindrome happens *after* an addition.
+
+Some starting numbers seem to go on forever; the recurrence relation for 196 has been calculated for millions of repetitions forming numbers with millions of digits, without forming a palindrome. These numbers that do not end in a palindrome are called **Lychrel numbers**.
+
+For the purposes of this task a Lychrel number is any starting number that does not form a palindrome within 500 (or more) iterations.
+
+**Seed and related Lychrel numbers:**
+
+Any integer produced in the sequence of a Lychrel number is also a Lychrel number.
+
+In general, any sequence from one Lychrel number *might* converge to join the sequence from a prior Lychrel number candidate; for example the sequences for the numbers 196 and then 689 begin:
+
+```bash
+    196
+    196 + 691 = 887
+    887 + 788 = 1675
+    1675 + 5761 = 7436
+    7436 + 6347 = 13783
+    13783 + 38731 = 52514
+    52514 + 41525 = 94039
+    ...
+    689
+    689 + 986 = 1675
+    1675 + 5761 = 7436
+    ...
+```
+
+So we see that the sequence starting with 689 converges to, and continues with the same numbers as that for 196.
+
+Because of this we can further split the Lychrel numbers into true **Seed** Lychrel number candidates, and **Related** numbers that produce no palindromes but have integers in their sequence seen as part of the sequence generated from a lower Lychrel number.
+
+# --instructions--
+
+Write a function that takes a number as a parameter. Return true if the number is a Lynchrel number. Otherwise, return false. Remember that the iteration limit is 500.
+
+# --hints--
+
+`isLychrel` should be a function.
+
+```js
+assert(typeof isLychrel === 'function');
+```
+
+`isLychrel(12)` should return a boolean.
+
+```js
+assert(typeof isLychrel(12) === 'boolean');
+```
+
+`isLychrel(12)` should return `false`.
+
+```js
+assert.equal(isLychrel(12), false);
+```
+
+`isLychrel(55)` should return `false`.
+
+```js
+assert.equal(isLychrel(55), false);
+```
+
+`isLychrel(196)` should return `true`.
+
+```js
+assert.equal(isLychrel(196), true);
+```
+
+`isLychrel(879)` should return `true`.
+
+```js
+assert.equal(isLychrel(879), true);
+```
+
+`isLychrel(44987)` should return `false`.
+
+```js
+assert.equal(isLychrel(44987), false);
+```
+
+`isLychrel(7059)` should return `true`.
+
+```js
+assert.equal(isLychrel(7059), true);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function isLychrel(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function isLychrel(n) {
+  function reverse(num) {
+    return parseInt(
+      num
+        .toString()
+        .split('')
+        .reverse()
+        .join('')
+    );
+  }
+
+  var i;
+  for (i = 0; i < 500; i++) {
+    n = n + reverse(n);
+    if (n == reverse(n)) break;
+  }
+
+  return i == 500;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lzw-compression.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lzw-compression.md
new file mode 100644
index 00000000000..e4aa0f6e571
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/lzw-compression.md
@@ -0,0 +1,237 @@
+---
+id: 5ea2815e364d9a2222ea55f8
+title: LZW compression
+challengeType: 1
+forumTopicId: 385288
+dashedName: lzw-compression
+---
+
+# --description--
+
+The Lempel-Ziv-Welch (LZW) algorithm provides loss-less data compression.
+
+# --instructions--
+
+Write a function that takes two parameters. The first parameter is a boolean where `true` indicates compress and `false` indicates decompress. The second parameter is either a string or an array to be processed. If it is a string to be compressed, return an array of numbers. If it's an array of numbers to be decompressed, return a string.
+
+# --hints--
+
+`LZW` should be a function.
+
+```js
+assert(typeof LZW === 'function');
+```
+
+`LZW(true, "TOBEORNOTTOBEORTOBEORNOT")` should return a array.
+
+```js
+assert(Array.isArray(LZW(true, 'TOBEORNOTTOBEORTOBEORNOT')));
+```
+
+`LZW(false, [84, 79, 66, 69, 79, 82, 78, 79, 84, 256, 258, 260, 265, 259, 261, 263])` should return a string.
+
+```js
+assert(
+  typeof LZW(false, [
+    84,
+    79,
+    66,
+    69,
+    79,
+    82,
+    78,
+    79,
+    84,
+    256,
+    258,
+    260,
+    265,
+    259,
+    261,
+    263
+  ]) === 'string'
+);
+```
+
+`LZW(true, "TOBEORNOTTOBEORTOBEORNOT")` should return `[84, 79, 66, 69, 79, 82, 78, 79, 84, 256, 258, 260, 265, 259, 261, 263]`.
+
+```js
+assert.deepEqual(LZW(true, 'TOBEORNOTTOBEORTOBEORNOT'), [
+  84,
+  79,
+  66,
+  69,
+  79,
+  82,
+  78,
+  79,
+  84,
+  256,
+  258,
+  260,
+  265,
+  259,
+  261,
+  263
+]);
+```
+
+`LZW(false, [84, 79, 66, 69, 79, 82, 78, 79, 84, 256, 258, 260, 265, 259, 261, 263])` should return `"TOBEORNOTTOBEORTOBEORNOT"`.
+
+```js
+assert.equal(
+  LZW(false, [
+    84,
+    79,
+    66,
+    69,
+    79,
+    82,
+    78,
+    79,
+    84,
+    256,
+    258,
+    260,
+    265,
+    259,
+    261,
+    263
+  ]),
+  'TOBEORNOTTOBEORTOBEORNOT'
+);
+```
+
+`LZW(true, "0123456789")` should return `[48, 49, 50, 51, 52, 53, 54, 55, 56, 57]`.
+
+```js
+assert.deepEqual(LZW(true, '0123456789'), [
+  48,
+  49,
+  50,
+  51,
+  52,
+  53,
+  54,
+  55,
+  56,
+  57
+]);
+```
+
+`LZW(false, [48, 49, 50, 51, 52, 53, 54, 55, 56, 57])` should return `"0123456789"`.
+
+```js
+assert.equal(
+  LZW(false, [48, 49, 50, 51, 52, 53, 54, 55, 56, 57]),
+  '0123456789'
+);
+```
+
+`LZW(true, "BABAABAAA")` should return `[66, 65, 256, 257, 65, 260]`.
+
+```js
+assert.deepEqual(LZW(true, 'BABAABAAA'), [66, 65, 256, 257, 65, 260]);
+```
+
+`LZW(false, [66, 65, 256, 257, 65, 260])` should return `"BABAABAAA"`.
+
+```js
+assert.equal(LZW(false, [66, 65, 256, 257, 65, 260]), 'BABAABAAA');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function LZW (compressData, input) {
+
+}
+```
+
+# --solutions--
+
+```js
+function LZW (compressData, input) {
+  function compress(uncompressed) {
+    // Build the dictionary.
+    var i,
+      dictionary = {},
+      c,
+      wc,
+      w = "",
+      result = [],
+      dictSize = 256;
+    for (i = 0; i < 256; i += 1) {
+      dictionary[String.fromCharCode(i)] = i;
+    }
+
+    for (i = 0; i < uncompressed.length; i += 1) {
+      c = uncompressed.charAt(i);
+      wc = w + c;
+      //Do not use dictionary[wc] because javascript arrays
+      //will return values for array['pop'], array['push'] etc
+      // if (dictionary[wc]) {
+      if (dictionary.hasOwnProperty(wc)) {
+        w = wc;
+      } else {
+        result.push(dictionary[w]);
+        // Add wc to the dictionary.
+        dictionary[wc] = dictSize++;
+        w = String(c);
+      }
+    }
+
+    // Output the code for w.
+    if (w !== "") {
+      result.push(dictionary[w]);
+    }
+    return result;
+  }
+
+
+  function decompress(compressed) {
+    // Build the dictionary.
+    var i,
+      dictionary = [],
+      w,
+      result,
+      k,
+      entry = "",
+      dictSize = 256;
+    for (i = 0; i < 256; i += 1) {
+      dictionary[i] = String.fromCharCode(i);
+    }
+
+    w = String.fromCharCode(compressed[0]);
+    result = w;
+    for (i = 1; i < compressed.length; i += 1) {
+      k = compressed[i];
+      if (dictionary[k]) {
+        entry = dictionary[k];
+      } else {
+        if (k === dictSize) {
+          entry = w + w.charAt(0);
+        } else {
+          return null;
+        }
+      }
+
+      result += entry;
+
+      // Add w+entry[0] to the dictionary.
+      dictionary[dictSize++] = w + entry.charAt(0);
+
+      w = entry;
+    }
+    return result;
+  }
+
+  if(compressData){
+    return compress(input)
+  }else{
+    return decompress(input)
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/s-expressions.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/s-expressions.md
new file mode 100644
index 00000000000..df583d4cb2a
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/s-expressions.md
@@ -0,0 +1,96 @@
+---
+id: 59667989bf71cf555dd5d2ff
+title: S-Expressions
+challengeType: 1
+forumTopicId: 302303
+dashedName: s-expressions
+---
+
+# --description--
+
+<a href="https://rosettacode.org/wiki/S-expressions" target="_blank" rel="noopener noreferrer nofollow">S-Expressions</a> are one convenient way to parse and store data.
+
+# --instructions--
+
+Write a simple reader/parser for S-Expressions that handles quoted and unquoted strings, integers and floats.
+
+The function should read a single but nested S-Expression from a string and return it as a (nested) array.
+
+Newlines and other whitespace may be ignored unless contained within a quoted string.
+
+"`()`" inside quoted strings are not interpreted, but treated as part of the string.
+
+Handling escaped quotes inside a string is optional; thus "`(foo"bar)`" may be treated as a string "`foo"bar`", or as an error.
+
+For this, the reader need not recognize `\` for escaping, but should, in addition, recognize numbers if the language has appropriate data types.
+
+Note that with the exception of `()"` (`\` if escaping is supported) and whitespace, there are no special characters. Anything else is allowed without quotes.
+
+The reader should be able to read the following input
+
+<pre>((data "quoted data" 123 4.5)
+(data (!@# (4.5) "(more" "data)")))
+</pre>
+
+and turn it into a native data structure.
+
+# --hints--
+
+`parseSexpr` should be a function.
+
+```js
+assert(typeof parseSexpr === 'function');
+```
+
+`parseSexpr('(data1 data2 data3)')` should return `['data1', 'data2', 'data3']`
+
+```js
+assert.deepEqual(parseSexpr(simpleSExpr), simpleSolution);
+```
+
+`parseSexpr('((data "quoted data" 123 4.5) (data (!@# (4.5) "(more" "data)")))')` should return `[['data', '"quoted data"', 123, 4.5], ['data', ['!@#', [4.5], '"(more"', '"data)"']]]`.
+
+```js
+assert.deepEqual(parseSexpr(basicSExpr), basicSolution);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const simpleSExpr = '(data1 data2 data3)';
+const simpleSolution = ['data1', 'data2', 'data3'];
+
+const basicSExpr = '((data "quoted data" 123 4.5) (data (!@# (4.5) "(more" "data)")))';
+const basicSolution = [["data","\"quoted data\"",123,4.5],["data",["!@#",[4.5],"\"(more\"","\"data)\""]]];
+```
+
+## --seed-contents--
+
+```js
+function parseSexpr(str) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function parseSexpr(str) {
+  const t = str.match(/\s*("[^"]*"|\(|\)|"|[^\s()"]+)/g);
+  for (var o, c = 0, i = t.length - 1; i >= 0; i--) {
+    var n,
+      ti = t[i].trim();
+    if (ti == '"') return;
+    else if (ti == '(') t[i] = '[', c += 1;
+    else if (ti == ')') t[i] = ']', c -= 1;
+    else if ((n = +ti) == ti) t[i] = n;
+    else t[i] = `'${ti.replace('\'', '\\\'')}'`;
+    if (i > 0 && ti != ']' && t[i - 1].trim() != '(') t.splice(i, 0, ',');
+    if (!c) if (!o) o = true; else return;
+  }
+  return c ? undefined : eval(t.join(''));
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sailors-coconuts-and-a-monkey-problem.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sailors-coconuts-and-a-monkey-problem.md
new file mode 100644
index 00000000000..8117215835e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sailors-coconuts-and-a-monkey-problem.md
@@ -0,0 +1,91 @@
+---
+id: 59da22823d04c95919d46269
+title: 'Sailors, coconuts and a monkey problem'
+challengeType: 1
+forumTopicId: 302304
+dashedName: sailors-coconuts-and-a-monkey-problem
+---
+
+# --description--
+
+Five sailors are shipwrecked on an island and collect a large pile of coconuts during the day.
+
+That night the first sailor wakes up and decides to take his first share early so tries to divide the pile of coconuts equally into five piles but finds that there is one coconut left over, so he tosses it to a monkey and then hides "his" one of the five equally sized piles of coconuts and pushes the other four piles together to form a single visible pile of coconuts again and goes to bed.
+
+To cut a long story short, each of the sailors in turn gets up once during the night and performs the same actions of dividing the coconut pile into five, finding that one coconut is left over and giving that single remainder coconut to the monkey, then push the other four piles together to form a single pile.
+
+In the morning (after the surreptitious and separate action of each of the five sailors during the night), the remaining coconuts are divided into five equal piles for each of the sailors, whereupon it is found that the pile of coconuts divides equally amongst the sailors with no remainder. (Nothing for the monkey in the morning.)
+
+# --instructions--
+
+Create a function that returns the minimum possible size of the initial pile of coconuts collected during the day for `N` sailors. **Note:** Of course the tale is told in a world where the collection of any number of coconuts in a day and multiple divisions of the pile, etc. can occur in time fitting the story line, so as not to affect mathematics.
+
+# --hints--
+
+`splitCoconuts` should be a function.
+
+```js
+assert(typeof splitCoconuts === 'function');
+```
+
+`splitCoconuts(5)` should return 3121.
+
+```js
+assert(splitCoconuts(5) === 3121);
+```
+
+`splitCoconuts(6)` should return 233275.
+
+```js
+assert(splitCoconuts(6) === 233275);
+```
+
+`splitCoconuts(7)` should return 823537.
+
+```js
+assert(splitCoconuts(7) === 823537);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function splitCoconuts(intSailors) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function splitCoconuts(intSailors) {
+  let intNuts = intSailors;
+  let result = splitCoconutsHelper(intNuts, intSailors);
+  while (!result) {
+    intNuts += 1;
+    result = splitCoconutsHelper(intNuts, intSailors);
+  }
+
+  return intNuts;
+}
+
+function splitCoconutsHelper(intNuts, intSailors, intDepth) {
+  const nDepth = intDepth !== undefined ? intDepth : intSailors;
+  const portion = Math.floor(intNuts / intSailors);
+  const remain = intNuts % intSailors;
+
+  if (portion <= 0 || remain !== (nDepth ? 1 : 0)) {
+    return null;
+  }
+
+  if (nDepth) {
+    return splitCoconutsHelper(
+      intNuts - portion - remain, intSailors, nDepth - 1
+    );
+  }
+
+  return intNuts;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/search-a-list-of-records.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/search-a-list-of-records.md
new file mode 100644
index 00000000000..439ece2740e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/search-a-list-of-records.md
@@ -0,0 +1,103 @@
+---
+id: 5eb3e497b8d6d7f63c5517ea
+title: Search a list of records
+challengeType: 1
+forumTopicId: 385315
+dashedName: search-a-list-of-records
+---
+
+# --description--
+
+A record consists of attributes that describe an entity. Each attribute has a name and a value. For example, a person can have an attribute `age` with a value of 25. An important operation on a list of records is to find a record with a particular attribute value.
+
+# --instructions--
+
+Write a function that takes a string as a parameter. The function should return the index of the item in `list` for which the value of the `name` attribute matches the given string.
+
+# --hints--
+
+`searchCity` should be a function.
+
+```js
+assert(typeof searchCity === 'function');
+```
+
+`searchCity("Dar Es Salaam")` should return a number.
+
+```js
+assert(typeof searchCity('Dar Es Salaam') === 'number');
+```
+
+`searchCity("Dar Es Salaam")` should return `6`.
+
+```js
+assert.equal(searchCity('Dar Es Salaam'), 6);
+```
+
+`searchCity("Casablanca")` should return `9`.
+
+```js
+assert.equal(searchCity('Casablanca'), 9);
+```
+
+`searchCity("Cairo")` should return `1`.
+
+```js
+assert.equal(searchCity('Cairo'), 1);
+```
+
+`searchCity("Mogadishu")` should return `4`.
+
+```js
+assert.equal(searchCity('Mogadishu'), 4);
+```
+
+`searchCity("Lagos")` should return `0`.
+
+```js
+assert.equal(searchCity('Lagos'), 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function searchCity(name) {
+
+}
+
+const list = [
+  { name: 'Lagos', population: 21.0 },
+  { name: 'Cairo', population: 15.2 },
+  { name: 'Kinshasa-Brazzaville', population: 11.3 },
+  { name: 'Greater Johannesburg', population: 7.55 },
+  { name: 'Mogadishu', population: 5.85 },
+  { name: 'Khartoum-Omdurman', population: 4.98 },
+  { name: 'Dar Es Salaam', population: 4.7 },
+  { name: 'Alexandria', population: 4.58 },
+  { name: 'Abidjan', population: 4.4 },
+  { name: 'Casablanca', population: 3.98 }
+];
+```
+
+# --solutions--
+
+```js
+function searchCity(name) {
+  return list.findIndex(item => item.name === name);
+}
+
+const list = [
+  { name: 'Lagos', population: 21.0 },
+  { name: 'Cairo', population: 15.2 },
+  { name: 'Kinshasa-Brazzaville', population: 11.3 },
+  { name: 'Greater Johannesburg', population: 7.55 },
+  { name: 'Mogadishu', population: 5.85 },
+  { name: 'Khartoum-Omdurman', population: 4.98 },
+  { name: 'Dar Es Salaam', population: 4.7 },
+  { name: 'Alexandria', population: 4.58 },
+  { name: 'Abidjan', population: 4.4 },
+  { name: 'Casablanca', population: 3.98 }
+];
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sedols.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sedols.md
new file mode 100644
index 00000000000..9ace124614e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sedols.md
@@ -0,0 +1,99 @@
+---
+id: 59d9c6bc214c613ba73ff012
+title: SEDOLs
+challengeType: 1
+forumTopicId: 302305
+dashedName: sedols
+---
+
+# --description--
+
+<abbr title="Stock Exchange Daily Official List">SEDOL</abbr> is a list of securities identification numbers issued by the London Stock Exchange.
+
+For each number list of 6-digit <abbr title="Stock Exchange Daily Official List">SEDOL</abbr>s, calculate and append the checksum digit. That is, given the input string on the left, your function should return the corresponding string on the right:
+
+<pre>
+710889 => 7108899
+B0YBKJ => B0YBKJ7
+406566 => 4065663
+B0YBLH => B0YBLH2
+228276 => 2282765
+B0YBKL => B0YBKL9
+557910 => 5579107
+B0YBKR => B0YBKR5
+585284 => 5852842
+B0YBKT => B0YBKT7
+B00030 => B000300
+</pre>
+
+Check that each input is correctly formed, especially with respect to valid characters allowed in a SEDOL string. Your function should return `null` on an invalid input.
+
+# --hints--
+
+`sedol` should be a function.
+
+```js
+assert(typeof sedol === 'function');
+```
+
+`sedol('a')` should return null.
+
+```js
+assert(sedol('a') === null);
+```
+
+`sedol('710889')` should return '7108899'.
+
+```js
+assert(sedol('710889') === '7108899');
+```
+
+`sedol('BOATER')` should return null.
+
+```js
+assert(sedol('BOATER') === null);
+```
+
+`sedol('228276')` should return '2282765'.
+
+```js
+assert(sedol('228276') === '2282765');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sedol(input) {
+  const checkSum = 0
+
+  return checkSum;
+}
+```
+
+# --solutions--
+
+```js
+function sedol(input) {
+  const checkDigit = sedolCheckDigit(input);
+  if (checkDigit !== null) {
+    return input + checkDigit;
+  }
+  return null;
+}
+
+const weight = [1, 3, 1, 7, 3, 9, 1];
+function sedolCheckDigit(char6) {
+  if (char6.search(/^[0-9BCDFGHJKLMNPQRSTVWXYZ]{6}$/) === -1) {
+    return null;
+  }
+
+  let sum = 0;
+  for (let i = 0; i < char6.length; i++) {
+    sum += weight[i] * parseInt(char6.charAt(i), 36);
+  }
+  const checkSum = (10 - (sum % 10)) % 10;
+  return checkSum.toString();
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/self-describing-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/self-describing-numbers.md
new file mode 100644
index 00000000000..dc5318141ce
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/self-describing-numbers.md
@@ -0,0 +1,100 @@
+---
+id: 5eaf48389ee512d4d103684b
+title: Self Describing Numbers
+challengeType: 1
+forumTopicId: 385289
+dashedName: self-describing-numbers
+---
+
+# --description--
+
+There are several so-called "self-describing" or "self-descriptive" integers.
+
+An integer is said to be "self-describing" if it has the property that, when digit positions are labeled 0 to N-1, the digit in each position is equal to the number of times that digit appears in the number.
+
+For example, **2020** is a four-digit self describing number:
+
+<ul>
+    <li> position 0 has value 2 and there are two 0s in the number; </li>
+    <li> position 1 has value 0 and there are no 1s in the number; </li>
+    <li> position 2 has value 2 and there are two 2s; </li>
+    <li> position 3 has value 0 and there are zero 3s; </li>
+</ul>
+
+Self-describing numbers &lt; 100,000,000 are: 1210, 2020, 21200, 3211000, 42101000.
+
+# --instructions--
+
+Write a function that takes a positive integer as a parameter. If it is self-describing return true. Otherwise, return false.
+
+# --hints--
+
+`isSelfDescribing` should be a function.
+
+```js
+assert(typeof isSelfDescribing == 'function');
+```
+
+`isSelfDescribing()` should return a boolean.
+
+```js
+assert(typeof isSelfDescribing(2020) == 'boolean');
+```
+
+`isSelfDescribing(2020)` should return `true`.
+
+```js
+assert.equal(isSelfDescribing(2020), true);
+```
+
+`isSelfDescribing(3021)` should return `false`.
+
+```js
+assert.equal(isSelfDescribing(3021), false);
+```
+
+`isSelfDescribing(3211000)` should return `true`.
+
+```js
+assert.equal(isSelfDescribing(3211000), true);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function isSelfDescribing(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function isSelfDescribing(n) {
+    let digits = String(n).split("");
+    digits = digits.map(function(e) {return parseInt(e)});
+    let count = digits.map((x) => {return 0})
+    digits.forEach((d) =>{
+        if (d >= count.length) {
+            return false
+        }
+        count[d] += 1;
+    });
+
+     if (digits === count) {
+        return true;
+    }
+    if (digits.length != count.length) {
+        return false;
+    }
+
+    for (let i=0; i< digits.length; i++){
+      if (digits[i] !== count[i]) {
+        return false;
+      }
+    }
+    return true;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/self-referential-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/self-referential-sequence.md
new file mode 100644
index 00000000000..086840b687f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/self-referential-sequence.md
@@ -0,0 +1,202 @@
+---
+id: 5eb3e4a21f462f409d656c73
+title: Self-referential sequence
+challengeType: 1
+forumTopicId: 385317
+dashedName: self-referential-sequence
+---
+
+# --description--
+
+There are several ways to generate a self-referential sequence. One very common one (the <a href="https://rosettacode.org/wiki/Look-and-say_sequence" target="_blank" rel="noopener noreferrer nofollow">Look-and-say sequence</a>) is to start with a positive integer, then generate the next term by concatenating enumerated groups of adjacent alike digits:
+
+<pre>0, 10, 1110, 3110, 132110, 1113122110, 311311222110 ...</pre>
+
+The terms generated grow in length geometrically and never converge.
+
+Another way to generate a self-referential sequence is to summarize the previous term.
+
+Count how many of each alike digit there is, then concatenate the sum and digit for each of the sorted enumerated digits. Note that the first five terms are the same as for the previous sequence.
+
+<pre>0, 10, 1110, 3110, 132110, 13123110, 23124110 ...</pre>
+
+Sort the digits largest to smallest. Do not include counts of digits that do not appear in the previous term.
+
+Depending on the seed value, series generated this way always either converge to a stable value or to a short cyclical pattern. (For our purposes, converge means that an element matches a previously seen element.) The sequence shown, with a seed value of 0, converges to a stable value of 1433223110 after 11 iterations. The seed value that converges most quickly is 22. It goes stable after the first element. (The next element is 22, which has been seen before.)
+
+# --instructions--
+
+Write a function that takes the seed value as parameter, generates a self referential sequence until it converges, and returns it as an array.
+
+# --hints--
+
+`selfReferential` should be a function.
+
+```js
+assert(typeof selfReferential === 'function');
+```
+
+`selfReferential(40)` should return a array.
+
+```js
+assert(Array.isArray(selfReferential(40)));
+```
+
+`selfReferential(40)` should return `["40", "1410", "142110", "14123110", "1413124110", "2413125110", "151413224110", "152413225110", "251413324110", "152423224110", "152413423110"]`.
+
+```js
+assert.deepEqual(selfReferential(40), [
+  '40',
+  '1410',
+  '142110',
+  '14123110',
+  '1413124110',
+  '2413125110',
+  '151413224110',
+  '152413225110',
+  '251413324110',
+  '152423224110',
+  '152413423110'
+]);
+```
+
+`selfReferential(132110)` should return `["132110", "13123110", "23124110", "1413223110", "1423224110", "2413323110", "1433223110"]`.
+
+```js
+assert.deepEqual(selfReferential(132110), [
+  '132110',
+  '13123110',
+  '23124110',
+  '1413223110',
+  '1423224110',
+  '2413323110',
+  '1433223110'
+]);
+```
+
+`selfReferential(132211)` should return `["132211", "132231", "232221", "134211", "14131231", "14231241", "24132231", "14233221"]`.
+
+```js
+assert.deepEqual(selfReferential(132211), [
+  '132211',
+  '132231',
+  '232221',
+  '134211',
+  '14131231',
+  '14231241',
+  '24132231',
+  '14233221'
+]);
+```
+
+`selfReferential(1413223110)` should return `["1413223110", "1423224110", "2413323110", "1433223110"]`.
+
+```js
+assert.deepEqual(selfReferential(1413223110), [
+  '1413223110',
+  '1423224110',
+  '2413323110',
+  '1433223110'
+]);
+```
+
+`selfReferential(251413126110)` should return `["251413126110", "16151413225110", "16251413226110", "26151413325110", "16251423225110", "16251413424110", "16153413225110"]`.
+
+```js
+assert.deepEqual(selfReferential(251413126110), [
+  '251413126110',
+  '16151413225110',
+  '16251413226110',
+  '26151413325110',
+  '16251423225110',
+  '16251413424110',
+  '16153413225110'
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function selfReferential(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function selfReferential(n) {
+  var descending,
+    i,
+    incr,
+    j,
+    max_i,
+    max_len,
+    max_seq,
+    seq,
+    sequence,
+    indexOf =
+      [].indexOf ||
+      function(item) {
+        for (var i = 0, l = this.length; i < l; i++) {
+          if (i in this && this[i] === item) return i;
+        }
+        return -1;
+      };
+
+  sequence = function(n) {
+    var c, cnt, cnts, d, digit, i, j, l, len, new_cnts, ref, s, seq;
+    cnts = {};
+    ref = n.toString();
+    for (j = 0, len = ref.length; j < len; j++) {
+      c = ref[j];
+      d = parseInt(c);
+      incr(cnts, d);
+    }
+    seq = [ref];
+    while (true) {
+      s = '';
+      for (i = l = 9; l >= 0; i = --l) {
+        if (cnts[i]) {
+          s += '' + cnts[i] + i;
+        }
+      }
+      if (indexOf.call(seq, s) >= 0) {
+        break;
+      }
+      seq.push(s);
+      new_cnts = {};
+      for (digit in cnts) {
+        cnt = cnts[digit];
+        incr(new_cnts, cnt);
+        incr(new_cnts, digit);
+      }
+      cnts = new_cnts;
+    }
+    return seq;
+  };
+
+  incr = function(h, k) {
+    if (h[k] == null) {
+      h[k] = 0;
+    }
+    return (h[k] += 1);
+  };
+
+  descending = function(n) {
+    var tens;
+    if (n < 10) {
+      return true;
+    }
+    tens = n / 10;
+    if (n % 10 > tens % 10) {
+      return false;
+    }
+    return descending(tens);
+  };
+
+  return sequence(n);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/semiprime.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/semiprime.md
new file mode 100644
index 00000000000..590e77332ef
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/semiprime.md
@@ -0,0 +1,146 @@
+---
+id: 5eb3e4aa847216613aa81983
+title: Semiprime
+challengeType: 1
+forumTopicId: 385318
+dashedName: semiprime
+---
+
+# --description--
+
+Semiprime numbers are natural numbers that are products of exactly two (possibly equal) <a href="https://rosettacode.org/wiki/prime_number" target="_blank" rel="noopener noreferrer nofollow">prime numbers</a>.
+
+<pre>1679  =  23 x 73</pre>
+
+# --instructions--
+
+Write a function that returns true if a number is semiprime, or false if it is not.
+
+# --hints--
+
+`isSemiPrime` should be a function.
+
+```js
+assert(typeof isSemiPrime === 'function');
+```
+
+`isSemiPrime(100)` should return a boolean.
+
+```js
+assert(typeof isSemiPrime(100) === 'boolean');
+```
+
+`isSemiPrime(100)` should return `false`.
+
+```js
+assert.equal(isSemiPrime(100), false);
+```
+
+`isSemiPrime(504)` should return `false`.
+
+```js
+assert.equal(isSemiPrime(504), false);
+```
+
+`isSemiPrime(4)` should return `true`.
+
+```js
+assert.equal(isSemiPrime(4), true);
+```
+
+`isSemiPrime(46)` should return `true`.
+
+```js
+assert.equal(isSemiPrime(46), true);
+```
+
+`isSemiPrime(13)` should return `false`.
+
+```js
+assert.equal(isSemiPrime(13), false);
+```
+
+`isSemiPrime(74)` should return `true`.
+
+```js
+assert.equal(isSemiPrime(74), true);
+```
+
+`isSemiPrime(1679)` should return `true`.
+
+```js
+assert.equal(isSemiPrime(1679), true);
+```
+
+`isSemiPrime(2)` should return `false`.
+
+```js
+assert.equal(isSemiPrime(2), false);
+```
+
+`isSemiPrime(95)` should return `true`.
+
+```js
+assert.equal(isSemiPrime(95), true);
+```
+
+`isSemiPrime(124)` should return `false`.
+
+```js
+assert.equal(isSemiPrime(124), false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function isSemiPrime(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function isSemiPrime(n) {
+  if (n <= 3) return false;
+
+  var ans = [];
+  var done = false;
+  while (!done) {
+    if (n % 2 === 0) {
+      ans.push(2);
+      n /= 2;
+      continue;
+    }
+    if (n % 3 === 0) {
+      ans.push(3);
+      n /= 3;
+      continue;
+    }
+    if (n === 1) return ans.length == 2;
+    var sr = Math.sqrt(n);
+    done = true;
+    // try to divide the checked number by all numbers till its square root.
+    for (var i = 6; i <= sr; i += 6) {
+      if (n % (i - 1) === 0) {
+        // is n divisible by i-1?
+        ans.push(i - 1);
+        n /= i - 1;
+        done = false;
+        break;
+      }
+      if (n % (i + 1) === 0) {
+        // is n divisible by i+1?
+        ans.push(i + 1);
+        n /= i + 1;
+        done = false;
+        break;
+      }
+    }
+  }
+  ans.push(n);
+  return ans.length == 2;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/set-consolidation.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/set-consolidation.md
new file mode 100644
index 00000000000..07a585e0875
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/set-consolidation.md
@@ -0,0 +1,196 @@
+---
+id: 5eb3e4af7d0e7b760b46cedc
+title: Set consolidation
+challengeType: 1
+forumTopicId: 385319
+dashedName: set-consolidation
+---
+
+# --description--
+
+Given two sets of items then if any item is common to any set then the result of applying *consolidation* to those sets is a set of sets whose contents is:
+
+<ul>
+  <li>The two input sets if no common item exists between the two input sets of items.</li>
+  <li>The single set that is the union of the two input sets if they share a common item.</li>
+</ul>
+
+Given N sets of items where N > 2 then the result is the same as repeatedly replacing all combinations of two sets by their consolidation until no further consolidation between set pairs is possible. If N &lt; 2 then consolidation has no strict meaning and the input can be returned.
+
+Here are some examples:
+
+**Example 1:**
+
+Given the two sets `{A,B}` and `{C,D}` then there is no common element between the sets and the result is the same as the input.
+
+**Example 2:**
+
+Given the two sets `{A,B}` and `{B,D}` then there is a common element `B` between the sets and the result is the single set `{B,D,A}`. (Note that order of items in a set is immaterial: `{A,B,D}` is the same as `{B,D,A}` and `{D,A,B}`, etc).
+
+**Example 3:**
+
+Given the three sets `{A,B}` and `{C,D}` and `{D,B}` then there is no common element between the sets `{A,B}` and `{C,D}` but the sets `{A,B}` and `{D,B}` do share a common element that consolidates to produce the result `{B,D,A}`. On examining this result with the remaining set, `{C,D}`, they share a common element and so consolidate to the final output of the single set `{A,B,C,D}`
+
+**Example 4:**
+
+The consolidation of the five sets:
+
+`{H,I,K}`, `{A,B}`, `{C,D}`, `{D,B}`, and `{F,G,H}`
+
+Is the two sets:
+
+`{A, C, B, D}`, and `{G, F, I, H, K}`
+
+# --instructions--
+
+Write a function that takes an array of strings as a parameter. Each string is represents a set with the characters representing the set elements. The function should return a 2D array containing the consolidated sets. Note: Each set should be sorted.
+
+# --hints--
+
+`setConsolidation` should be a function.
+
+```js
+assert(typeof setConsolidation === 'function');
+```
+
+`setConsolidation(["AB", "CD"])` should return a array.
+
+```js
+assert(Array.isArray(setConsolidation(['AB', 'CD'])));
+```
+
+`setConsolidation(["AB", "CD"])` should return `[["C", "D"], ["A", "B"]]`.
+
+```js
+assert.deepEqual(setConsolidation(['AB', 'CD']), [
+  ['C', 'D'],
+  ['A', 'B']
+]);
+```
+
+`setConsolidation(["AB", "BD"])` should return `[["A", "B", "D"]]`.
+
+```js
+assert.deepEqual(setConsolidation(['AB', 'BD']), [['A', 'B', 'D']]);
+```
+
+`setConsolidation(["AB", "CD", "DB"])` should return `[["A", "B", "C", "D"]]`.
+
+```js
+assert.deepEqual(setConsolidation(['AB', 'CD', 'DB']), [['A', 'B', 'C', 'D']]);
+```
+
+`setConsolidation(["HIK", "AB", "CD", "DB", "FGH"])` should return `[["F", "G", "H", "I", "K"], ["A", "B", "C", "D"]]`.
+
+```js
+assert.deepEqual(setConsolidation(['HIK', 'AB', 'CD', 'DB', 'FGH']), [
+  ['F', 'G', 'H', 'I', 'K'],
+  ['A', 'B', 'C', 'D']
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function setConsolidation(sets) {
+
+}
+```
+
+# --solutions--
+
+```js
+function setConsolidation(sets) {
+  function addAll(l1, l2) {
+    l2.forEach(function(e) {
+      if (l1.indexOf(e) == -1) l1.push(e);
+    });
+  }
+
+  function consolidate(sets) {
+    var r = [];
+    for (var i = 0; i < sets.length; i++) {
+      var s = sets[i];
+      {
+        var new_r = [];
+        new_r.push(s);
+        for (var j = 0; j < r.length; j++) {
+          var x = r[j];
+          {
+            if (
+              !(function(c1, c2) {
+                for (var i = 0; i < c1.length; i++) {
+                  if (c2.indexOf(c1[i]) >= 0) return false;
+                }
+                return true;
+              })(s, x)
+            ) {
+              (function(l1, l2) {
+                addAll(l1, l2);
+              })(s, x);
+            } else {
+              new_r.push(x);
+            }
+          }
+        }
+        r = new_r;
+      }
+    }
+    return r;
+  }
+
+  function consolidateR(sets) {
+    if (sets.length < 2) return sets;
+    var r = [];
+    r.push(sets[0]);
+    {
+      var arr1 = consolidateR(sets.slice(1, sets.length));
+      for (var i = 0; i < arr1.length; i++) {
+        var x = arr1[i];
+        {
+          if (
+            !(function(c1, c2) {
+              for (var i = 0; i < c1.length; i++) {
+                if (c2.indexOf(c1[i]) >= 0) return false;
+              }
+              return true;
+            })(r[0], x)
+          ) {
+            (function(l1, l2) {
+              return l1.push.apply(l1, l2);
+            })(r[0], x);
+          } else {
+            r.push(x);
+          }
+        }
+      }
+    }
+    return r;
+  }
+
+  function hashSetList(set) {
+    var r = [];
+    for (var i = 0; i < set.length; i++) {
+      r.push([]);
+      for (var j = 0; j < set[i].length; j++)
+        (function(s, e) {
+          if (s.indexOf(e) == -1) {
+            s.push(e);
+            return true;
+          } else {
+            return false;
+          }
+        })(r[i], set[i].charAt(j));
+    }
+    return r;
+  }
+
+  var h1 = consolidate(hashSetList(sets)).map(function(e) {
+    e.sort();
+    return e;
+  });
+  return h1;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/set-of-real-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/set-of-real-numbers.md
new file mode 100644
index 00000000000..addfc4c751b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/set-of-real-numbers.md
@@ -0,0 +1,239 @@
+---
+id: 5eb3e4b20aa93c437f9e9717
+title: Set of real numbers
+challengeType: 1
+forumTopicId: 385322
+dashedName: set-of-real-numbers
+---
+
+# --description--
+
+All real numbers form the uncountable set ℝ. Among its subsets, relatively simple are the convex sets, each expressed as a range between two real numbers *a* and *b* where *a* ≤ *b*. There are actually four cases for the meaning of "between", depending on open or closed boundary:
+
+<ul>
+  <li>[<i>a</i>, <i>b</i>]: {<i>x</i> | <i>a</i> ≤ <i>x</i> and <i>x</i> ≤ <i>b</i> }</li>
+  <li>(<i>a</i>, <i>b</i>): {<i>x</i> | <i>a</i> < <i>x</i> and <i>x</i> < <i>b</i> }</li>
+  <li>[<i>a</i>, <i>b</i>): {<i>x</i> | <i>a</i> ≤ <i>x</i> and <i>x</i> < <i>b</i> }</li>
+  <li>(<i>a</i>, <i>b</i>]: {<i>x</i> | <i>a</i> < <i>x</i> and <i>x</i> ≤ <i>b</i> }</li>
+</ul>
+
+Note that if *a* = *b*, of the four only \[*a*, *a*] would be non-empty.
+
+**Task**
+
+<ul>
+  <li>Devise a way to represent any set of real numbers, for the definition of "any" in the implementation notes below.</li>
+  <li>Provide methods for these common set operations (<i>x</i> is a real number; <i>A</i> and <i>B</i> are sets):</li>
+  <ul>
+    <li>
+      <i>x</i> ∈ <i>A</i>: determine if <i>x</i> is an element of <i>A</i><br>
+      example: 1 is in [1, 2), while 2, 3, ... are not.
+    </li>
+    <li>
+      <i>A</i> ∪ <i>B</i>: union of <i>A</i> and <i>B</i>, i.e. {<i>x</i> | <i>x</i> ∈ <i>A</i> or <i>x</i> ∈ <i>B</i>}<br>
+      example: [0, 2) ∪ (1, 3) = [0, 3); [0, 1) ∪ (2, 3] = well, [0, 1) ∪ (2, 3]
+    </li>
+    <li>
+      <i>A</i> ∩ <i>B</i>: intersection of <i>A</i> and <i>B</i>, i.e. {<i>x</i> | <i>x</i> ∈ <i>A</i> and <i>x</i> ∈ <i>B</i>}<br>
+      example: [0, 2) ∩ (1, 3) = (1, 2); [0, 1) ∩ (2, 3] = empty set
+    </li>
+    <li>
+      <i>A</i> - <i>B</i>: difference between <i>A</i> and <i>B</i>, also written as <i>A</i> \ <i>B</i>, i.e. {<i>x</i> | <i>x</i> ∈ <i>A</i> and <i>x</i> ∉ <i>B</i>}<br>
+      example: [0, 2) − (1, 3) = [0, 1]
+    </li>
+  </ul>
+</ul>
+
+# --instructions--
+
+Write a function that takes 2 objects, a string and an array as parameters. The objects represents the set and have attributes: `low`, `high` and `rangeType`.
+
+The `rangeType` can have values 0, 1, 2 and 3 for `CLOSED`, `BOTH_OPEN`, `LEFT_OPEN` and `RIGHT_OPEN`, respectively. The function should implement a set using this information.
+
+The string represents the operation to be performed on the sets. It can be: `"union"`, `"intersect"` and `"subtract"` (difference).
+
+After performing the operation, the function should check if the values in the array are present in the resultant set and store a corresponding boolean value to an array. The function should return this array.
+
+# --hints--
+
+`realSet` should be a function.
+
+```js
+assert(typeof realSet == 'function');
+```
+
+`realSet({"low":0, "high":1, "rangeType":2}, {"low":0, "high":2, "rangeType":3}, "union", [1, 2, 3])` should return a array.
+
+```js
+assert(
+  Array.isArray(
+    realSet(
+      { low: 0, high: 1, rangeType: 2 },
+      { low: 0, high: 2, rangeType: 3 },
+      'union',
+      [1, 2, 3]
+    )
+  )
+);
+```
+
+`realSet({"low":0, "high":1, "rangeType":2}, {"low":0, "high":2, "rangeType":3}, "union", [1, 2, 3])` should return `[true, false, false]`.
+
+```js
+assert.deepEqual(
+  realSet(
+    { low: 0, high: 1, rangeType: 2 },
+    { low: 0, high: 2, rangeType: 3 },
+    'union',
+    [1, 2, 3]
+  ),
+  [true, false, false]
+);
+```
+
+`realSet({"low":0, "high":2, "rangeType":3}, {"low":1, "high":2, "rangeType":2}, "intersect", [0, 1, 2])` should return `[false, false, false]`.
+
+```js
+assert.deepEqual(
+  realSet(
+    { low: 0, high: 2, rangeType: 3 },
+    { low: 1, high: 2, rangeType: 2 },
+    'intersect',
+    [0, 1, 2]
+  ),
+  [false, false, false]
+);
+```
+
+`realSet({"low":0, "high":3, "rangeType":3}, {"low":0, "high":1, "rangeType":1}, "subtract", [0, 1, 2])` should return `[true, true, true]`.
+
+```js
+assert.deepEqual(
+  realSet(
+    { low: 0, high: 3, rangeType: 3 },
+    { low: 0, high: 1, rangeType: 1 },
+    'subtract',
+    [0, 1, 2]
+  ),
+  [true, true, true]
+);
+```
+
+`realSet({"low":0, "high":3, "rangeType":3}, {"low":0, "high":1, "rangeType":0}, "subtract", [0, 1, 2])` should return `[false, false, true]`.
+
+```js
+assert.deepEqual(
+  realSet(
+    { low: 0, high: 3, rangeType: 3 },
+    { low: 0, high: 1, rangeType: 0 },
+    'subtract',
+    [0, 1, 2]
+  ),
+  [false, false, true]
+);
+```
+
+`realSet({"low":0, "high":33, "rangeType":1}, {"low":30, "high":31, "rangeType":0}, "intersect", [30, 31, 32])` should return `[true, true, false]`.
+
+```js
+assert.deepEqual(
+  realSet(
+    { low: 0, high: 33, rangeType: 1 },
+    { low: 30, high: 31, rangeType: 0 },
+    'intersect',
+    [30, 31, 32]
+  ),
+  [true, true, false]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function realSet(set1, set2, operation, values) {
+
+}
+```
+
+# --solutions--
+
+```js
+function realSet(set1, set2, operation, values) {
+  const RangeType = {
+    CLOSED: 0,
+    BOTH_OPEN: 1,
+    LEFT_OPEN: 2,
+    RIGHT_OPEN: 3
+  };
+
+  function Predicate(test) {
+    this.test = test;
+    this.or = function(other) {
+      return new Predicate(t => this.test(t) || other.test(t));
+    };
+    this.and = function(other) {
+      return new Predicate(t => this.test(t) && other.test(t));
+    };
+    this.negate = function() {
+      return new Predicate(t => !this.test(t));
+    };
+  }
+
+  function RealSet(start, end, rangeType, predF) {
+    this.low = start;
+    this.high = end;
+
+    if (predF) {
+      this.predicate = new Predicate(predF);
+    } else {
+      this.predicate = new Predicate(d => {
+        switch (rangeType) {
+          case RangeType.CLOSED:
+            return start <= d && d <= end;
+          case RangeType.BOTH_OPEN:
+            return start < d && d < end;
+          case RangeType.LEFT_OPEN:
+            return start < d && d <= end;
+          case RangeType.RIGHT_OPEN:
+            return start <= d && d < end;
+        }
+      });
+    }
+
+    this.contains = function(d) {
+      return this.predicate.test(d);
+    };
+
+    this.union = function(other) {
+      var low2 = Math.min(this.low, other.low);
+      var high2 = Math.max(this.high, other.high);
+      return new RealSet(low2, high2, null, d =>
+        this.predicate.or(other.predicate).test(d)
+      );
+    };
+
+    this.intersect = function(other) {
+      var low2 = Math.min(this.low, other.low);
+      var high2 = Math.max(this.high, other.high);
+      return new RealSet(low2, high2, null, d =>
+        this.predicate.and(other.predicate).test(d)
+      );
+    };
+
+    this.subtract = function(other) {
+      return new RealSet(this.low, this.high, null, d =>
+        this.predicate.and(other.predicate.negate()).test(d)
+      );
+    };
+  }
+  set1 = new RealSet(set1.low, set1.high, set1.rangeType);
+  set2 = new RealSet(set2.low, set2.high, set2.rangeType);
+  var result = [];
+  values.forEach(function(value) {
+    result.push(set1[operation](set2).contains(value));
+  });
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sha-1.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sha-1.md
new file mode 100644
index 00000000000..3ac65ad9604
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sha-1.md
@@ -0,0 +1,180 @@
+---
+id: 5eb3e4b5f629b9a07429a5d2
+title: SHA-1
+challengeType: 1
+forumTopicId: 385326
+dashedName: sha-1
+---
+
+# --description--
+
+**SHA-1** or **SHA1** is a one-way hash function; it computes a 160-bit message digest.
+
+SHA-1 often appears in security protocols; for example, many HTTPS websites use RSA with SHA-1 to secure their connections.
+
+BitTorrent uses SHA-1 to verify downloads.
+
+Git and Mercurial use SHA-1 digests to identify commits.
+
+A US government standard, <a href="https://rosettacode.org/wiki/SHA-1/FIPS-180-1" target="_blank" rel="noopener noreferrer nofollow">FIPS 180-1</a>, defines SHA-1.
+
+# --instructions--
+
+Write a function that returns the SHA-1 message digest for a given string.
+
+# --hints--
+
+`SHA1` should be a function.
+
+```js
+assert(typeof SHA1 === 'function');
+```
+
+`SHA1("abc")` should return a string.
+
+```js
+assert(typeof SHA1('abc') === 'string');
+```
+
+`SHA1("abc")` should return `"a9993e364706816aba3e25717850c26c9cd0d89d"`.
+
+```js
+assert.equal(SHA1('abc'), 'a9993e364706816aba3e25717850c26c9cd0d89d');
+```
+
+`SHA1("Rosetta Code")` should return `"48c98f7e5a6e736d790ab740dfc3f51a61abe2b5"`.
+
+```js
+assert.equal(SHA1('Rosetta Code'), '48c98f7e5a6e736d790ab740dfc3f51a61abe2b5');
+```
+
+`SHA1("Hello world")` should return `"7b502c3a1f48c8609ae212cdfb639dee39673f5e"`.
+
+```js
+assert.equal(SHA1('Hello world'), '7b502c3a1f48c8609ae212cdfb639dee39673f5e');
+```
+
+`SHA1("Programming")` should return `"d1a946bf8b2f2a7292c250063ee28989d742cd4b"`.
+
+```js
+assert.equal(SHA1('Programming'), 'd1a946bf8b2f2a7292c250063ee28989d742cd4b');
+```
+
+`SHA1("is Awesome")` should return `"6537205da59c72b57ed3881843c2d24103d683a3"`.
+
+```js
+assert.equal(SHA1('is Awesome'), '6537205da59c72b57ed3881843c2d24103d683a3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function SHA1(input) {
+
+}
+```
+
+# --solutions--
+
+```js
+function SHA1(input) {
+  var hexcase = 0;
+  var b64pad = '';
+  var chrsz = 8;
+
+  function hex_sha1(s) {
+    return binb2hex(core_sha1(str2binb(s), s.length * chrsz));
+  }
+
+  function core_sha1(x, len) {
+    x[len >> 5] |= 0x80 << (24 - (len % 32));
+    x[(((len + 64) >> 9) << 4) + 15] = len;
+
+    var w = Array(80);
+    var a = 1732584193;
+    var b = -271733879;
+    var c = -1732584194;
+    var d = 271733878;
+    var e = -1009589776;
+
+    for (var i = 0; i < x.length; i += 16) {
+      var olda = a;
+      var oldb = b;
+      var oldc = c;
+      var oldd = d;
+      var olde = e;
+
+      for (var j = 0; j < 80; j++) {
+        if (j < 16) w[j] = x[i + j];
+        else w[j] = rol(w[j - 3] ^ w[j - 8] ^ w[j - 14] ^ w[j - 16], 1);
+        var t = safe_add(
+          safe_add(rol(a, 5), sha1_ft(j, b, c, d)),
+          safe_add(safe_add(e, w[j]), sha1_kt(j))
+        );
+        e = d;
+        d = c;
+        c = rol(b, 30);
+        b = a;
+        a = t;
+      }
+
+      a = safe_add(a, olda);
+      b = safe_add(b, oldb);
+      c = safe_add(c, oldc);
+      d = safe_add(d, oldd);
+      e = safe_add(e, olde);
+    }
+    return Array(a, b, c, d, e);
+  }
+
+  function sha1_ft(t, b, c, d) {
+    if (t < 20) return (b & c) | (~b & d);
+    if (t < 40) return b ^ c ^ d;
+    if (t < 60) return (b & c) | (b & d) | (c & d);
+    return b ^ c ^ d;
+  }
+
+  function sha1_kt(t) {
+    return t < 20
+      ? 1518500249
+      : t < 40
+      ? 1859775393
+      : t < 60
+      ? -1894007588
+      : -899497514;
+  }
+
+  function safe_add(x, y) {
+    var lsw = (x & 0xffff) + (y & 0xffff);
+    var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
+    return (msw << 16) | (lsw & 0xffff);
+  }
+
+  function rol(num, cnt) {
+    return (num << cnt) | (num >>> (32 - cnt));
+  }
+
+  function str2binb(str) {
+    var bin = Array();
+    var mask = (1 << chrsz) - 1;
+    for (var i = 0; i < str.length * chrsz; i += chrsz)
+      bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (24 - (i % 32));
+    return bin;
+  }
+
+  function binb2hex(binarray) {
+    var hex_tab = hexcase ? '0123456789ABCDEF' : '0123456789abcdef';
+    var str = '';
+    for (var i = 0; i < binarray.length * 4; i++) {
+      str +=
+        hex_tab.charAt((binarray[i >> 2] >> ((3 - (i % 4)) * 8 + 4)) & 0xf) +
+        hex_tab.charAt((binarray[i >> 2] >> ((3 - (i % 4)) * 8)) & 0xf);
+    }
+    return str;
+  }
+
+  return hex_sha1(input);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sha-256.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sha-256.md
new file mode 100644
index 00000000000..183173a97d2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sha-256.md
@@ -0,0 +1,435 @@
+---
+id: 5eb3e4c3a894c333d2811a3f
+title: SHA-256
+challengeType: 1
+forumTopicId: 385328
+dashedName: sha-256
+---
+
+# --description--
+
+The `SHA-2` family is a stronger alternative to `SHA-1`. The main difference between them is the length of the hash. Meaning `SHA-1` provides a shorter code with fewer possibilities for unique combinations. `SHA-2` or `SHA-256` creates a longer and thus more complex hash with more possibilities.
+
+# --instructions--
+
+Research implemenation details and write a function that takes a string as the parameter and returns a hash using `SHA-256`
+
+# --hints--
+
+`SHA256` should be a function.
+
+```js
+assert(typeof SHA256 === 'function');
+```
+
+`SHA256("Rosetta code")` should return a string.
+
+```js
+assert(typeof SHA256('Rosetta code') === 'string');
+```
+
+`SHA256("Rosetta code")` should return `"764faf5c61ac315f1497f9dfa542713965b785e5cc2f707d6468d7d1124cdfcf"`.
+
+```js
+assert.equal(
+  SHA256('Rosetta code'),
+  '764faf5c61ac315f1497f9dfa542713965b785e5cc2f707d6468d7d1124cdfcf'
+);
+```
+
+`SHA256("SHA-256 Hash")` should return `"bee8c0cabdcf8c7835f40217dd35a8b0dba9134520e633f1c57285f35ca7ee3e"`.
+
+```js
+assert.equal(
+  SHA256('SHA-256 Hash'),
+  'bee8c0cabdcf8c7835f40217dd35a8b0dba9134520e633f1c57285f35ca7ee3e'
+);
+```
+
+`SHA256("implementation")` should return `"da31012c40330e7e21538e7dd57503b16e8a0839159e96137090cccc9910b171"`.
+
+```js
+assert.equal(
+  SHA256('implementation'),
+  'da31012c40330e7e21538e7dd57503b16e8a0839159e96137090cccc9910b171'
+);
+```
+
+`SHA256("algorithm")` should return `"b1eb2ec8ac9f31ff7918231e67f96e6deda83a9ff33ed2c67443f1df81e5ed14"`.
+
+```js
+assert.equal(
+  SHA256('algorithm'),
+  'b1eb2ec8ac9f31ff7918231e67f96e6deda83a9ff33ed2c67443f1df81e5ed14'
+);
+```
+
+`SHA256("language")` should return `"a4ef304ba42a200bafd78b046e0869af9183f6eee5524aead5dcb3a5ab5f8f3f"`.
+
+```js
+assert.equal(
+  SHA256('language'),
+  'a4ef304ba42a200bafd78b046e0869af9183f6eee5524aead5dcb3a5ab5f8f3f'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function SHA256(input) {
+
+}
+```
+
+# --solutions--
+
+```js
+function SHA256(input) {
+  var chrsz = 8;
+  var hexcase = 0;
+
+  function safe_add(x, y) {
+    var lsw = (x & 0xffff) + (y & 0xffff);
+    var msw = (x >> 16) + (y >> 16) + (lsw >> 16);
+    return (msw << 16) | (lsw & 0xffff);
+  }
+
+  function S(X, n) {
+    return (X >>> n) | (X << (32 - n));
+  }
+
+  function R(X, n) {
+    return X >>> n;
+  }
+
+  function Ch(x, y, z) {
+    return (x & y) ^ (~x & z);
+  }
+
+  function Maj(x, y, z) {
+    return (x & y) ^ (x & z) ^ (y & z);
+  }
+
+  function Sigma0256(x) {
+    return S(x, 2) ^ S(x, 13) ^ S(x, 22);
+  }
+
+  function Sigma1256(x) {
+    return S(x, 6) ^ S(x, 11) ^ S(x, 25);
+  }
+
+  function Gamma0256(x) {
+    return S(x, 7) ^ S(x, 18) ^ R(x, 3);
+  }
+
+  function Gamma1256(x) {
+    return S(x, 17) ^ S(x, 19) ^ R(x, 10);
+  }
+
+  function Sigma0512(x) {
+    return S(x, 28) ^ S(x, 34) ^ S(x, 39);
+  }
+
+  function Sigma1512(x) {
+    return S(x, 14) ^ S(x, 18) ^ S(x, 41);
+  }
+
+  function Gamma0512(x) {
+    return S(x, 1) ^ S(x, 8) ^ R(x, 7);
+  }
+
+  function Gamma1512(x) {
+    return S(x, 19) ^ S(x, 61) ^ R(x, 6);
+  }
+
+  function core_sha256(m, l) {
+    var K = new Array(
+      0x428a2f98,
+      0x71374491,
+      0xb5c0fbcf,
+      0xe9b5dba5,
+      0x3956c25b,
+      0x59f111f1,
+      0x923f82a4,
+      0xab1c5ed5,
+      0xd807aa98,
+      0x12835b01,
+      0x243185be,
+      0x550c7dc3,
+      0x72be5d74,
+      0x80deb1fe,
+      0x9bdc06a7,
+      0xc19bf174,
+      0xe49b69c1,
+      0xefbe4786,
+      0xfc19dc6,
+      0x240ca1cc,
+      0x2de92c6f,
+      0x4a7484aa,
+      0x5cb0a9dc,
+      0x76f988da,
+      0x983e5152,
+      0xa831c66d,
+      0xb00327c8,
+      0xbf597fc7,
+      0xc6e00bf3,
+      0xd5a79147,
+      0x6ca6351,
+      0x14292967,
+      0x27b70a85,
+      0x2e1b2138,
+      0x4d2c6dfc,
+      0x53380d13,
+      0x650a7354,
+      0x766a0abb,
+      0x81c2c92e,
+      0x92722c85,
+      0xa2bfe8a1,
+      0xa81a664b,
+      0xc24b8b70,
+      0xc76c51a3,
+      0xd192e819,
+      0xd6990624,
+      0xf40e3585,
+      0x106aa070,
+      0x19a4c116,
+      0x1e376c08,
+      0x2748774c,
+      0x34b0bcb5,
+      0x391c0cb3,
+      0x4ed8aa4a,
+      0x5b9cca4f,
+      0x682e6ff3,
+      0x748f82ee,
+      0x78a5636f,
+      0x84c87814,
+      0x8cc70208,
+      0x90befffa,
+      0xa4506ceb,
+      0xbef9a3f7,
+      0xc67178f2
+    );
+    var HASH = new Array(
+      0x6a09e667,
+      0xbb67ae85,
+      0x3c6ef372,
+      0xa54ff53a,
+      0x510e527f,
+      0x9b05688c,
+      0x1f83d9ab,
+      0x5be0cd19
+    );
+    var W = new Array(64);
+    var a, b, c, d, e, f, g, h, i, j;
+    var T1, T2;
+
+    m[l >> 5] |= 0x80 << (24 - (l % 32));
+    m[(((l + 64) >> 9) << 4) + 15] = l;
+
+    for (var i = 0; i < m.length; i += 16) {
+      a = HASH[0];
+      b = HASH[1];
+      c = HASH[2];
+      d = HASH[3];
+      e = HASH[4];
+      f = HASH[5];
+      g = HASH[6];
+      h = HASH[7];
+
+      for (var j = 0; j < 64; j++) {
+        if (j < 16) W[j] = m[j + i];
+        else
+          W[j] = safe_add(
+            safe_add(
+              safe_add(Gamma1256(W[j - 2]), W[j - 7]),
+              Gamma0256(W[j - 15])
+            ),
+            W[j - 16]
+          );
+
+        T1 = safe_add(
+          safe_add(safe_add(safe_add(h, Sigma1256(e)), Ch(e, f, g)), K[j]),
+          W[j]
+        );
+        T2 = safe_add(Sigma0256(a), Maj(a, b, c));
+
+        h = g;
+        g = f;
+        f = e;
+        e = safe_add(d, T1);
+        d = c;
+        c = b;
+        b = a;
+        a = safe_add(T1, T2);
+      }
+
+      HASH[0] = safe_add(a, HASH[0]);
+      HASH[1] = safe_add(b, HASH[1]);
+      HASH[2] = safe_add(c, HASH[2]);
+      HASH[3] = safe_add(d, HASH[3]);
+      HASH[4] = safe_add(e, HASH[4]);
+      HASH[5] = safe_add(f, HASH[5]);
+      HASH[6] = safe_add(g, HASH[6]);
+      HASH[7] = safe_add(h, HASH[7]);
+    }
+    return HASH;
+  }
+
+  function core_sha512(m, l) {
+    var K = new Array(
+      0x428a2f98d728ae22,
+      0x7137449123ef65cd,
+      0xb5c0fbcfec4d3b2f,
+      0xe9b5dba58189dbbc,
+      0x3956c25bf348b538,
+      0x59f111f1b605d019,
+      0x923f82a4af194f9b,
+      0xab1c5ed5da6d8118,
+      0xd807aa98a3030242,
+      0x12835b0145706fbe,
+      0x243185be4ee4b28c,
+      0x550c7dc3d5ffb4e2,
+      0x72be5d74f27b896f,
+      0x80deb1fe3b1696b1,
+      0x9bdc06a725c71235,
+      0xc19bf174cf692694,
+      0xe49b69c19ef14ad2,
+      0xefbe4786384f25e3,
+      0x0fc19dc68b8cd5b5,
+      0x240ca1cc77ac9c65,
+      0x2de92c6f592b0275,
+      0x4a7484aa6ea6e483,
+      0x5cb0a9dcbd41fbd4,
+      0x76f988da831153b5,
+      0x983e5152ee66dfab,
+      0xa831c66d2db43210,
+      0xb00327c898fb213f,
+      0xbf597fc7beef0ee4,
+      0xc6e00bf33da88fc2,
+      0xd5a79147930aa725,
+      0x06ca6351e003826f,
+      0x142929670a0e6e70,
+      0x27b70a8546d22ffc,
+      0x2e1b21385c26c926,
+      0x4d2c6dfc5ac42aed,
+      0x53380d139d95b3df,
+      0x650a73548baf63de,
+      0x766a0abb3c77b2a8,
+      0x81c2c92e47edaee6,
+      0x92722c851482353b,
+      0xa2bfe8a14cf10364,
+      0xa81a664bbc423001,
+      0xc24b8b70d0f89791,
+      0xc76c51a30654be30,
+      0xd192e819d6ef5218,
+      0xd69906245565a910,
+      0xf40e35855771202a,
+      0x106aa07032bbd1b8,
+      0x19a4c116b8d2d0c8,
+      0x1e376c085141ab53,
+      0x2748774cdf8eeb99,
+      0x34b0bcb5e19b48a8,
+      0x391c0cb3c5c95a63,
+      0x4ed8aa4ae3418acb,
+      0x5b9cca4f7763e373,
+      0x682e6ff3d6b2b8a3,
+      0x748f82ee5defb2fc,
+      0x78a5636f43172f60,
+      0x84c87814a1f0ab72,
+      0x8cc702081a6439ec,
+      0x90befffa23631e28,
+      0xa4506cebde82bde9,
+      0xbef9a3f7b2c67915,
+      0xc67178f2e372532b,
+      0xca273eceea26619c,
+      0xd186b8c721c0c207,
+      0xeada7dd6cde0eb1e,
+      0xf57d4f7fee6ed178,
+      0x06f067aa72176fba,
+      0x0a637dc5a2c898a6,
+      0x113f9804bef90dae,
+      0x1b710b35131c471b,
+      0x28db77f523047d84,
+      0x32caab7b40c72493,
+      0x3c9ebe0a15c9bebc,
+      0x431d67c49c100d4c,
+      0x4cc5d4becb3e42b6,
+      0x597f299cfc657e2a,
+      0x5fcb6fab3ad6faec,
+      0x6c44198c4a475817
+    );
+    var HASH = new Array(
+      0x6a09e667f3bcc908,
+      0xbb67ae8584caa73b,
+      0x3c6ef372fe94f82b,
+      0xa54ff53a5f1d36f1,
+      0x510e527fade682d1,
+      0x9b05688c2b3e6c1f,
+      0x1f83d9abfb41bd6b,
+      0x5be0cd19137e2179
+    );
+    var W = new Array(80);
+    var a, b, c, d, e, f, g, h, i, j;
+    var T1, T2;
+  }
+
+  function str2binb(str) {
+    var bin = Array();
+    var mask = (1 << chrsz) - 1;
+    for (var i = 0; i < str.length * chrsz; i += chrsz)
+      bin[i >> 5] |= (str.charCodeAt(i / chrsz) & mask) << (24 - (i % 32));
+    return bin;
+  }
+
+  function binb2str(bin) {
+    var str = '';
+    var mask = (1 << chrsz) - 1;
+    for (var i = 0; i < bin.length * 32; i += chrsz)
+      str += String.fromCharCode((bin[i >> 5] >>> (24 - (i % 32))) & mask);
+    return str;
+  }
+
+  function binb2hex(binarray) {
+    var hex_tab = hexcase ? '0123456789ABCDEF' : '0123456789abcdef';
+    var str = '';
+    for (var i = 0; i < binarray.length * 4; i++) {
+      str +=
+        hex_tab.charAt((binarray[i >> 2] >> ((3 - (i % 4)) * 8 + 4)) & 0xf) +
+        hex_tab.charAt((binarray[i >> 2] >> ((3 - (i % 4)) * 8)) & 0xf);
+    }
+    return str;
+  }
+
+  function binb2b64(binarray) {
+    var tab =
+      'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/';
+    var str = '';
+    for (var i = 0; i < binarray.length * 4; i += 3) {
+      var triplet =
+        (((binarray[i >> 2] >> (8 * (3 - (i % 4)))) & 0xff) << 16) |
+        (((binarray[(i + 1) >> 2] >> (8 * (3 - ((i + 1) % 4)))) & 0xff) << 8) |
+        ((binarray[(i + 2) >> 2] >> (8 * (3 - ((i + 2) % 4)))) & 0xff);
+      for (var j = 0; j < 4; j++) {
+        if (i * 8 + j * 6 > binarray.length * 32) str += '';
+        else str += tab.charAt((triplet >> (6 * (3 - j))) & 0x3f);
+      }
+    }
+    return str;
+  }
+
+  function hex_sha2(s) {
+    return binb2hex(core_sha256(str2binb(s), s.length * chrsz));
+  }
+
+  function b64_sha2(s) {
+    return binb2b64(core_sha256(str2binb(s), s.length * chrsz));
+  }
+
+  function str_sha2(s) {
+    return binb2str(core_sha256(str2binb(s), s.length * chrsz));
+  }
+  return hex_sha2(input);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-an-array-of-composite-structures.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-an-array-of-composite-structures.md
new file mode 100644
index 00000000000..124644791f7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-an-array-of-composite-structures.md
@@ -0,0 +1,116 @@
+---
+id: 5a23c84252665b21eecc7ffe
+title: Sort an array of composite structures
+challengeType: 1
+forumTopicId: 302306
+dashedName: sort-an-array-of-composite-structures
+---
+
+# --description--
+
+Write a function that takes an array of objects as a parameter. The function should sort the array according to the 'key' attribute of the objects and return the sorted array.
+
+# --hints--
+
+`sortByKey` should be a function.
+
+```js
+assert(typeof sortByKey == 'function');
+```
+
+`sortByKey([{key: 3, value: "foo"}, {key: 2, value: "bar"}, {key: 4, value: "baz"}, {key: 1, value: 42}, {key: 5, value: "another string"}])` should return an array.
+
+```js
+assert(
+  Array.isArray(
+    sortByKey([
+      { key: 3, value: 'foo' },
+      { key: 2, value: 'bar' },
+      { key: 4, value: 'baz' },
+      { key: 1, value: 42 },
+      { key: 5, value: 'another string' }
+    ])
+  )
+);
+```
+
+`sortByKey([{key: 3, value: "foo"}, {key: 2, value: "bar"}, {key: 4, value: "baz"}, {key: 1, value: 42}, {key: 5, value: "another string"}])` should return `[{key: 1, value: 42}, {key: 2, value: "bar"}, {key: 3, value: "foo"}, {key: 4, value: "baz"}, {key: 5, value: "another string"}]`.
+
+```js
+assert.deepEqual(
+  sortByKey([
+    { key: 3, value: 'foo' },
+    { key: 2, value: 'bar' },
+    { key: 4, value: 'baz' },
+    { key: 1, value: 42 },
+    { key: 5, value: 'another string' }
+  ]),
+  [
+    { key: 1, value: 42 },
+    { key: 2, value: 'bar' },
+    { key: 3, value: 'foo' },
+    { key: 4, value: 'baz' },
+    { key: 5, value: 'another string' }
+  ]
+);
+```
+
+`sortByKey([{key: 3, name: "Joe"}, {key: 4, name: "Bill"}, {key: 20, name: "Alice"}, {key: 5, name: "Harry"}])` should return `[{key: 3, name: "Joe"}, {key: 4, name: "Bill"}, {key: 5, name: "Harry"}, {key: 20, name: "Alice"}]`.
+
+```js
+assert.deepEqual(
+  sortByKey([
+    { key: 3, name: 'Joe' },
+    { key: 4, name: 'Bill' },
+    { key: 20, name: 'Alice' },
+    { key: 5, name: 'Harry' }
+  ]),
+  [
+    { key: 3, name: 'Joe' },
+    { key: 4, name: 'Bill' },
+    { key: 5, name: 'Harry' },
+    { key: 20, name: 'Alice' }
+  ]
+);
+```
+
+`sortByKey([{key: 2341, name: "Adam"}, {key: 122, name: "Bernie"}, {key: 19, name: "David"}, {key: 5531, name: "Joe"}, {key: 1234, name: "Walter"}])` should return `[{key: 19, name: "David"}, {key: 122, name: "Bernie"}, {key: 1234, name: "Walter"}, {key: 2341, name: "Adam"}, {key: 5531, name: "Joe"}]`.
+
+```js
+assert.deepEqual(
+  sortByKey([
+    { key: 2341, name: 'Adam' },
+    { key: 122, name: 'Bernie' },
+    { key: 19, name: 'David' },
+    { key: 5531, name: 'Joe' },
+    { key: 1234, name: 'Walter' }
+  ]),
+  [
+    { key: 19, name: 'David' },
+    { key: 122, name: 'Bernie' },
+    { key: 1234, name: 'Walter' },
+    { key: 2341, name: 'Adam' },
+    { key: 5531, name: 'Joe' }
+  ]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sortByKey(arr) {
+
+}
+```
+
+# --solutions--
+
+```js
+function sortByKey (arr) {
+  return arr.sort(function(a, b) {
+    return a.key - b.key
+  });
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-disjoint-sublist.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-disjoint-sublist.md
new file mode 100644
index 00000000000..8f1ef877e53
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-disjoint-sublist.md
@@ -0,0 +1,147 @@
+---
+id: 5a23c84252665b21eecc8000
+title: Sort disjoint sublist
+challengeType: 1
+forumTopicId: 302307
+dashedName: sort-disjoint-sublist
+---
+
+# --description--
+
+Given a list of values and a set of integer indices into that value list, the task is to sort the values at the given indices, but preserving the values at indices outside the set of those to be sorted.
+
+Make your function work with the following list of values and set of indices:
+
+<code>values: [7, <b>6</b>, 5, 4, 3, 2, <b>1</b>, <b>0</b>]</code>
+
+```js
+indices(0-based): {6, 1, 7}
+```
+
+Where the correct result would be:
+
+<code>[7, <b>0</b>, 5, 4, 3, 2, <b>1</b>, <b>6</b>]</code>.
+
+# --hints--
+
+`sortDisjoint` should be a function.
+
+```js
+assert(typeof sortDisjoint == 'function');
+```
+
+`sortDisjoint([7, 6, 5, 4, 3, 2, 1, 0], [6, 1, 7])` should return an array.
+
+```js
+assert(Array.isArray(sortDisjoint([7, 6, 5, 4, 3, 2, 1, 0], [6, 1, 7])));
+```
+
+`sortDisjoint([7, 6, 5, 4, 3, 2, 1, 0], [6, 1, 7])` should return `[7, 0, 5, 4, 3, 2, 1, 6]`.
+
+```js
+assert.deepEqual(sortDisjoint([7, 6, 5, 4, 3, 2, 1, 0], [6, 1, 7]), [
+  7,
+  0,
+  5,
+  4,
+  3,
+  2,
+  1,
+  6
+]);
+```
+
+`sortDisjoint([7, 6, 5, 4, 3, 2, 1, 0], [1, 2, 5, 6])` should return `[7, 1, 2, 4, 3, 5, 6, 0]`.
+
+```js
+assert.deepEqual(sortDisjoint([7, 6, 5, 4, 3, 2, 1, 0], [1, 2, 5, 6]), [
+  7,
+  1,
+  2,
+  4,
+  3,
+  5,
+  6,
+  0
+]);
+```
+
+`sortDisjoint([8, 7, 6, 5, 4, 3, 2, 1], [6, 1, 7])` should return `[8, 1, 6, 5, 4, 3, 2, 7]`.
+
+```js
+assert.deepEqual(sortDisjoint([8, 7, 6, 5, 4, 3, 2, 1], [6, 1, 7]), [
+  8,
+  1,
+  6,
+  5,
+  4,
+  3,
+  2,
+  7
+]);
+```
+
+`sortDisjoint([8, 7, 6, 5, 4, 3, 2, 1], [1, 3, 5, 6])` should return `[8, 2, 6, 3, 4, 5, 7, 1]`.
+
+```js
+assert.deepEqual(sortDisjoint([8, 7, 6, 5, 4, 3, 2, 1], [1, 3, 5, 6]), [
+  8,
+  2,
+  6,
+  3,
+  4,
+  5,
+  7,
+  1
+]);
+```
+
+`sortDisjoint([6, 1, 7, 1, 3, 5, 6], [6, 1, 5, 4])` should return `[6, 1, 7, 1, 3, 5, 6]`.
+
+```js
+assert.deepEqual(sortDisjoint([6, 1, 7, 1, 3, 5, 6], [6, 1, 5, 4]), [
+  6,
+  1,
+  7,
+  1,
+  3,
+  5,
+  6
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sortDisjoint(values, indices) {
+
+}
+```
+
+# --solutions--
+
+```js
+function sortDisjoint(values, indices) {
+  let sublist = [];
+
+  indices.sort(function(a, b) {
+    return a - b;
+  });
+
+  for (let i = 0; i < indices.length; i++) {
+    sublist.push(values[indices[i]]);
+  }
+
+  sublist.sort((a, b) => {
+    return a - b;
+  });
+
+  for (let i = 0; i < indices.length; i++) {
+    values[indices[i]] = sublist[i];
+  }
+
+  return values;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-stability.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-stability.md
new file mode 100644
index 00000000000..0820e0c2d77
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-stability.md
@@ -0,0 +1,168 @@
+---
+id: 5a23c84252665b21eecc8014
+title: Sort stability
+challengeType: 1
+forumTopicId: 302308
+dashedName: sort-stability
+---
+
+# --description--
+
+When sorting records in a table by a particular column or field, a <a href="https://www.freecodecamp.org/news/stability-in-sorting-algorithms-a-treatment-of-equality-fa3140a5a539/" target="_blank" rel="noopener noreferrer nofollow">stable sort</a> will always retain the relative order of records that have the same key.
+
+For example, in this table of countries and cities, a stable sort on the **second** column, the cities, would keep the US Birmingham above the UK Birmingham. (Although an unstable sort *might*, in this case, place the US Birmingham above the UK Birmingham, a stable sort routine would *guarantee* it).
+
+<pre>UK  London
+US  New York
+US  Birmingham
+UK  Birmingham
+</pre>
+
+Similarly, stable sorting on just the first column would generate "UK London" as the first item and "US Birmingham" as the last item (since the order of the elements having the same first word – "UK" or "US" – would be maintained).
+
+# --instructions--
+
+Write a function that takes a 2D array as a parameter. Each element has 2 elements similar to the above example. The function should sort the array as mentioned previously and return the sorted array.
+
+# --hints--
+
+`stableSort` should be a function.
+
+```js
+assert(typeof stableSort == 'function');
+```
+
+`stableSort([["UK", "London"], ["US", "New York"], ["US", "Birmingham"], ["UK", "Birmingham"]])` should return an array.
+
+```js
+assert(
+  Array.isArray(
+    stableSort([
+      ['UK', 'London'],
+      ['US', 'New York'],
+      ['US', 'Birmingham'],
+      ['UK', 'Birmingham']
+    ])
+  )
+);
+```
+
+`stableSort([["UK", "London"], ["US", "New York"], ["US", "Birmingham"], ["UK", "Birmingham"]])` should return `[["US", "Birmingham"], ["UK", "Birmingham"], ["UK", "London"], ["US", "New York"]]`.
+
+```js
+assert.deepEqual(
+  stableSort([
+    ['UK', 'London'],
+    ['US', 'New York'],
+    ['US', 'Birmingham'],
+    ['UK', 'Birmingham']
+  ]),
+  [
+    ['US', 'Birmingham'],
+    ['UK', 'Birmingham'],
+    ['UK', 'London'],
+    ['US', 'New York']
+  ]
+);
+```
+
+`stableSort([[2, 2], [1, 2], [1, 4], [1, 5]])` should return `[[2, 2], [1, 2], [1, 4], [1, 5]]`.
+
+```js
+assert.deepEqual(
+  stableSort([
+    [2, 2],
+    [1, 2],
+    [1, 4],
+    [1, 5]
+  ]),
+  [
+    [2, 2],
+    [1, 2],
+    [1, 4],
+    [1, 5]
+  ]
+);
+```
+
+`stableSort([[11, 55], [12, 45], [11, 45], [32, 45]])` should return `[[12, 45], [11, 45], [32, 45], [11, 55]]`.
+
+```js
+assert.deepEqual(
+  stableSort([
+    [11, 55],
+    [12, 45],
+    [11, 45],
+    [32, 45]
+  ]),
+  [
+    [12, 45],
+    [11, 45],
+    [32, 45],
+    [11, 55]
+  ]
+);
+```
+
+`stableSort([[10, 22], [1, 2], [1, 4], [1, 5], [10, 9]])` should return `[[1, 2], [1, 4], [1, 5], [10, 9], [10, 22]]`.
+
+```js
+assert.deepEqual(
+  stableSort([
+    [10, 22],
+    [1, 2],
+    [1, 4],
+    [1, 5],
+    [10, 9]
+  ]),
+  [
+    [1, 2],
+    [1, 4],
+    [1, 5],
+    [10, 9],
+    [10, 22]
+  ]
+);
+```
+
+`stableSort([[55, 54], [12, 22], [31, 43], [31, 54], [10, 49]])` should return `[[12, 22], [31, 43], [10, 49], [55, 54], [31, 54]]`.
+
+```js
+assert.deepEqual(
+  stableSort([
+    [55, 54],
+    [12, 22],
+    [31, 43],
+    [31, 54],
+    [10, 49]
+  ]),
+  [
+    [12, 22],
+    [31, 43],
+    [10, 49],
+    [55, 54],
+    [31, 54]
+  ]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function stableSort(arr) {
+
+}
+```
+
+# --solutions--
+
+```js
+function stableSort(arr) {
+  arr.sort(function(a, b) {
+    return a[1] < b[1] ? -1 : a[1] > b[1] ? 1 : 0;
+  });
+  return arr;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-using-a-custom-comparator.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-using-a-custom-comparator.md
new file mode 100644
index 00000000000..175dd475233
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sort-using-a-custom-comparator.md
@@ -0,0 +1,121 @@
+---
+id: 5a23c84252665b21eecc8016
+title: Sort using a custom comparator
+challengeType: 1
+forumTopicId: 302309
+dashedName: sort-using-a-custom-comparator
+---
+
+# --description--
+
+Write a function to sort an array (or list) of strings in order of descending length, and in ascending lexicographic order for strings of equal length.
+
+# --hints--
+
+`lengthSorter` should be a function.
+
+```js
+assert(typeof lengthSorter == 'function');
+```
+
+`lengthSorter(["Here", "are", "some", "sample", "strings", "to", "be", "sorted"])` should return an array.
+
+```js
+assert(
+  Array.isArray(
+    lengthSorter([
+      'Here',
+      'are',
+      'some',
+      'sample',
+      'strings',
+      'to',
+      'be',
+      'sorted'
+    ])
+  )
+);
+```
+
+`lengthSorter(["Here", "are", "some", "sample", "strings", "to", "be", "sorted"])` should return `["strings", "sample", "sorted", "Here", "some", "are", "be", "to"]`.
+
+```js
+assert.deepEqual(
+  lengthSorter([
+    'Here',
+    'are',
+    'some',
+    'sample',
+    'strings',
+    'to',
+    'be',
+    'sorted'
+  ]),
+  ['strings', 'sample', 'sorted', 'Here', 'some', 'are', 'be', 'to']
+);
+```
+
+`lengthSorter(["I", "hope", "your", "day", "is", "going", "good", "?"])` should return `["going", "good", "hope", "your", "day", "is", "?","I"]`.
+
+```js
+assert.deepEqual(
+  lengthSorter(['I', 'hope', 'your', 'day', 'is', 'going', 'good', '?']),
+  ['going', 'good', 'hope', 'your', 'day', 'is', '?', 'I']
+);
+```
+
+`lengthSorter(["Mine", "is", "going", "great"])` should return `["going", "great", "Mine", "is"]`.
+
+```js
+assert.deepEqual(lengthSorter(['Mine', 'is', 'going', 'great']), [
+  'going',
+  'great',
+  'Mine',
+  'is'
+]);
+```
+
+`lengthSorter(["Have", "fun", "sorting", "!!"])` should return `["sorting", "Have", "fun", "!!"]`.
+
+```js
+assert.deepEqual(lengthSorter(['Have', 'fun', 'sorting', '!!']), [
+  'sorting',
+  'Have',
+  'fun',
+  '!!'
+]);
+```
+
+`lengthSorter(["Everything", "is", "good", "!!"])` should return `["Everything", "good", "!!", "is"]`.
+
+```js
+assert.deepEqual(lengthSorter(['Everything', 'is', 'good', '!!']), [
+  'Everything',
+  'good',
+  '!!',
+  'is'
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function lengthSorter(arr) {
+
+}
+```
+
+# --solutions--
+
+```js
+function lengthSorter(arr) {
+  arr.sort(function(a, b) {
+    var result = b.length - a.length;
+    if (result == 0) result = a.localeCompare(b);
+    return result;
+  });
+  return arr;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-bead-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-bead-sort.md
new file mode 100644
index 00000000000..302bb1e6654
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-bead-sort.md
@@ -0,0 +1,129 @@
+---
+id: 5a23c84252665b21eecc8001
+title: Sorting algorithms/Bead sort
+challengeType: 1
+forumTopicId: 302310
+dashedName: sorting-algorithmsbead-sort
+---
+
+# --description--
+
+A *bead sort* starts by creating a matrix of zeroes whose length is equal to the value of the largest element in the input array. The matrix is transformed by adding one to all elements between the zeroth index and the index indicated by the current element. This process is repeated, until you have filled the matrix.
+
+Iterating over the matrix, summing the number of elements greater than zero, then decreasing the value of each element by one yields the sorted array.
+
+**Note:** Each element in the input array is unique.
+
+Sort an array of positive integers using the Bead Sort Algorithm.
+
+# --hints--
+
+`beadSort` should be a function.
+
+```js
+assert(typeof beadSort == 'function');
+```
+
+`beadSort([25, 32, 12, 7, 20])` should return an array.
+
+```js
+assert(Array.isArray(beadSort([25, 32, 12, 7, 20])));
+```
+
+`beadSort([25, 32, 12, 7, 20])` should return `[7, 12, 20, 25, 32]`.
+
+```js
+assert.deepEqual(beadSort([25, 32, 12, 7, 20]), [7, 12, 20, 25, 32]);
+```
+
+`beadSort([38, 45, 35, 8, 13])` should return `[8, 13, 35, 38, 45]`.
+
+```js
+assert.deepEqual(beadSort([38, 45, 35, 8, 13]), [8, 13, 35, 38, 45]);
+```
+
+`beadSort([43, 36, 20, 34, 24])` should return `[20, 24, 34, 36, 43]`.
+
+```js
+assert.deepEqual(beadSort([43, 36, 20, 34, 24]), [20, 24, 34, 36, 43]);
+```
+
+`beadSort([12, 33, 26, 18, 1, 16, 38])` should return `[1, 12, 16, 18, 26, 33, 38]`.
+
+```js
+assert.deepEqual(beadSort([12, 33, 26, 18, 1, 16, 38]), [
+  1,
+  12,
+  16,
+  18,
+  26,
+  33,
+  38
+]);
+```
+
+`beadSort([3, 39, 48, 16, 1, 4, 29])` should return `[1, 3, 4, 16, 29, 39, 48]`.
+
+```js
+assert.deepEqual(beadSort([3, 39, 48, 16, 1, 4, 29]), [
+  1,
+  3,
+  4,
+  16,
+  29,
+  39,
+  48
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function beadSort(arr) {
+
+}
+```
+
+# --solutions--
+
+```js
+function beadSort(arr) {
+  let max = 0;
+  for (let i = 0; i < arr.length; i++) if (arr[i] > max) max = arr[i];
+  const grid = new Array(arr.length);
+  for (let i = 0; i < grid.length; i++) {
+    grid[i] = new Array(max);
+  }
+  const levelcount = new Array(max);
+  levelcount.fill(0);
+  for (let i = 0; i < max; i++) {
+    levelcount[i] = 0;
+    for (let j = 0; j < arr.length; j++) grid[j][i] = '_';
+  }
+  for (let i = 0; i < arr.length; i++) {
+    let num = arr[i];
+    for (let j = 0; num > 0; j++) {
+      grid[levelcount[j]++][j] = '*';
+      num--;
+    }
+  }
+  const sorted = new Array(arr.length);
+  sorted.fill(0);
+  for (let i = 0; i < arr.length; i++) {
+    let putt = 0;
+    for (
+      let j = 0;
+      j < max &&
+      (function(c) {
+        return c.charCodeAt == null ? c : c.charCodeAt(0);
+      })(grid[arr.length - 1 - i][j]) == '*'.charCodeAt(0);
+      j++
+    )
+      putt++;
+    sorted[i] = putt;
+  }
+  return sorted;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-bogosort.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-bogosort.md
new file mode 100644
index 00000000000..a8b51f55fac
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-bogosort.md
@@ -0,0 +1,126 @@
+---
+id: 5a23c84252665b21eecc8002
+title: Sorting algorithms/Bogosort
+challengeType: 1
+forumTopicId: 302311
+dashedName: sorting-algorithmsbogosort
+---
+
+# --description--
+
+Bogosort a list of numbers.
+
+Bogosort simply shuffles a collection randomly until it is sorted.
+
+"Bogosort" is a perversely inefficient algorithm only used as an in-joke.
+
+Its average run-time is O(n!) because the chance that any given shuffle of a set will end up in sorted order is about one in *n* factorial, and the worst case is infinite since there's no guarantee that a random shuffling will ever produce a sorted sequence.
+
+Its best case is O(n) since a single pass through the elements may suffice to order them.
+
+Pseudocode:
+
+<pre><b>while not</b> InOrder(list) <b>do</b>
+  Shuffle(list)
+<b>done</b>
+</pre>
+
+# --hints--
+
+`bogosort` should be a function.
+
+```js
+assert(typeof bogosort == 'function');
+```
+
+`bogosort([25, 32, 12, 7, 20])` should return an array.
+
+```js
+assert(Array.isArray(bogosort([25, 32, 12, 7, 20])));
+```
+
+`bogosort([25, 32, 12, 7, 20])` should return `[7, 12, 20, 25, 32]`.
+
+```js
+assert.deepEqual(bogosort([25, 32, 12, 7, 20]), [7, 12, 20, 25, 32]);
+```
+
+`bogosort([38, 45, 35, 8, 13])` should return `[8, 13, 35, 38, 45]`.
+
+```js
+assert.deepEqual(bogosort([38, 45, 35, 8, 13]), [8, 13, 35, 38, 45]);
+```
+
+`bogosort([43, 36, 20, 34, 24])` should return `[20, 24, 34, 36, 43]`.
+
+```js
+assert.deepEqual(bogosort([43, 36, 20, 34, 24]), [20, 24, 34, 36, 43]);
+```
+
+`bogosort([12, 33, 26, 18, 1, 16, 38])` should return `[1, 12, 16, 18, 26, 33, 38]`.
+
+```js
+assert.deepEqual(bogosort([12, 33, 26, 18, 1, 16, 38]), [
+  1,
+  12,
+  16,
+  18,
+  26,
+  33,
+  38
+]);
+```
+
+`bogosort([3, 39, 48, 16, 1, 4, 29])` should return `[1, 3, 4, 16, 29, 39, 48]`.
+
+```js
+assert.deepEqual(bogosort([3, 39, 48, 16, 1, 4, 29]), [
+  1,
+  3,
+  4,
+  16,
+  29,
+  39,
+  48
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function bogosort(v) {
+
+}
+```
+
+# --solutions--
+
+```js
+function bogosort(v) {
+  function shuffle(v) {
+    for (
+      var j, x, i = v.length;
+      i;
+      j = Math.floor(Math.random() * i), x = v[--i], v[i] = v[j], v[j] = x
+    );
+    return v;
+  }
+
+  function isSorted(v) {
+    for (var i = 1; i < v.length; i++) {
+      if (v[i - 1] > v[i]) {
+        return false;
+      }
+    }
+    return true;
+  }
+  var sorted = false;
+  while (sorted == false) {
+    v = shuffle(v);
+    sorted = isSorted(v);
+  }
+  return v;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-cocktail-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-cocktail-sort.md
new file mode 100644
index 00000000000..9f8a3bcb821
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-cocktail-sort.md
@@ -0,0 +1,118 @@
+---
+id: 5a23c84252665b21eecc8004
+title: Sorting algorithms/Cocktail sort
+challengeType: 1
+forumTopicId: 302312
+dashedName: sorting-algorithmscocktail-sort
+---
+
+# --description--
+
+The <a href="https://rosettacode.org/wiki/Sorting_algorithms/Cocktail_sort" target="_blank" rel="noopener noreferrer nofollow">cocktail sort</a> is an improvement on the Bubble Sort. Given an array of numbers, the cocktail sort will traverse the array from start to finish, moving the largest number to the end. Then, it will traverse the array backwards and move the smallest number to the start. It repeats these two passes, moving the next largest/smallest number to its correct position in the array until it is sorted.
+
+# --instructions--
+
+Write a function that sorts a given array using cocktail sort.
+
+# --hints--
+
+`cocktailSort` should be a function.
+
+```js
+assert(typeof cocktailSort == 'function');
+```
+
+`cocktailSort([25, 32, 12, 7, 20])` should return an array.
+
+```js
+assert(Array.isArray(cocktailSort([25, 32, 12, 7, 20])));
+```
+
+`cocktailSort([25, 32, 12, 7, 20])` should return `[7, 12, 20, 25, 32]`.
+
+```js
+assert.deepEqual(cocktailSort([25, 32, 12, 7, 20]), [7, 12, 20, 25, 32]);
+```
+
+`cocktailSort([38, 45, 35, 8, 13])` should return `[8, 13, 35, 38, 45]`.
+
+```js
+assert.deepEqual(cocktailSort([38, 45, 35, 8, 13]), [8, 13, 35, 38, 45]);
+```
+
+`cocktailSort([43, 36, 20, 34, 24])` should return `[20, 24, 34, 36, 43]`.
+
+```js
+assert.deepEqual(cocktailSort([43, 36, 20, 34, 24]), [20, 24, 34, 36, 43]);
+```
+
+`cocktailSort([12, 33, 26, 18, 1, 16, 38])` should return `[1, 12, 16, 18, 26, 33, 38]`.
+
+```js
+assert.deepEqual(cocktailSort([12, 33, 26, 18, 1, 16, 38]), [
+  1,
+  12,
+  16,
+  18,
+  26,
+  33,
+  38
+]);
+```
+
+`cocktailSort([3, 39, 48, 16, 1, 4, 29])` should return `[1, 3, 4, 16, 29, 39, 48]`.
+
+```js
+assert.deepEqual(cocktailSort([3, 39, 48, 16, 1, 4, 29]), [
+  1,
+  3,
+  4,
+  16,
+  29,
+  39,
+  48
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function cocktailSort(arr) {
+
+}
+```
+
+# --solutions--
+
+```js
+function cocktailSort(arr) {
+  let isSorted = true;
+  while (isSorted) {
+    for (let i = 0; i < arr.length - 1; i++) {
+      if (arr[i] > arr[i + 1]) {
+        let temp = arr[i];
+        arr[i] = arr[i + 1];
+        arr[i + 1] = temp;
+        isSorted = true;
+      }
+    }
+
+    if (!isSorted) break;
+
+    isSorted = false;
+
+    for (let j = arr.length - 1; j > 0; j--) {
+      if (arr[j - 1] > arr[j]) {
+        let temp = arr[j];
+        arr[j] = arr[j - 1];
+        arr[j - 1] = temp;
+        isSorted = true;
+      }
+    }
+  }
+
+  return arr;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-comb-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-comb-sort.md
new file mode 100644
index 00000000000..5f19360a31f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-comb-sort.md
@@ -0,0 +1,173 @@
+---
+id: 5a23c84252665b21eecc8005
+title: Sorting algorithms/Comb sort
+challengeType: 1
+forumTopicId: 302313
+dashedName: sorting-algorithmscomb-sort
+---
+
+# --description--
+
+Implement a *comb sort*.
+
+The **Comb Sort** is a variant of the Bubble Sort.
+
+Like the Shell sort, the Comb Sort increases the gap used in comparisons and exchanges.
+
+Dividing the gap by $(1-e^{-\\varphi})^{-1} \\approx 1.247330950103979$ works best, but 1.3 may be more practical.
+
+Some implementations use the insertion sort once the gap is less than a certain amount.
+
+Variants:
+
+<ul>
+  <li>Combsort11 makes sure the gap ends in (11, 8, 6, 4, 3, 2, 1), which is significantly faster than the other two possible endings.</li>
+  <li>Combsort with different endings changes to a more efficient sort when the data is almost sorted (when the gap is small). Comb sort with a low gap isn't much better than the Bubble Sort.</li>
+</ul>
+
+Pseudocode:
+
+<pre><b>function</b> combsort(<b>array</b> input)
+  gap := input<b>.size</b> <i>//initialize gap size</i>
+  <b>loop until</b> gap = 1 <b>and</b> swaps = 0
+    <i>//update the gap value for a next comb. Below is an example</i>
+    gap := int(gap / 1.25)
+    <b>if</b> gap &#x3C; 1 
+      <i>//minimum gap is 1</i>
+      gap := 1
+    <b>end if</b>
+    i := 0
+    swaps := 0 <i>//see <a href='https://rosettacode.org/wiki/Sorting_algorithms/Bubble_sort' target='_blank'>Bubble Sort</a> for an explanation</i>
+    <i>//a single "comb" over the input list</i>
+    <b>loop until</b> i + gap >= input<b>.size</b> <i>//see <a href='https://rosettacode.org/wiki/Sorting_algorithms/Shell_sort' target='_blank'>Shell sort</a> for similar idea</i>
+      <b>if</b> input[i] > input[i+gap]
+        <b>swap</b>(input[i], input[i+gap])
+        swaps := 1 <i>// Flag a swap has occurred, so the</i>
+            <i>// list is not guaranteed sorted</i>
+      <b>end if</b>
+      i := i + 1
+    <b>end loop</b>
+  <b>end loop</b>
+<b>end function</b>
+</pre>
+
+# --instructions--
+
+Write a function that sorts a given array using Comb sort.
+
+# --hints--
+
+`combSort` should be a function.
+
+```js
+assert(typeof combSort == 'function');
+```
+
+`combSort([25, 32, 12, 7, 20])` should return an array.
+
+```js
+assert(Array.isArray(combSort([25, 32, 12, 7, 20])));
+```
+
+`combSort([25, 32, 12, 7, 20])` should return `[7, 12, 20, 25, 32]`.
+
+```js
+assert.deepEqual(combSort([25, 32, 12, 7, 20]), [7, 12, 20, 25, 32]);
+```
+
+`combSort([38, 45, 35, 8, 13])` should return `[8, 13, 35, 38, 45]`.
+
+```js
+assert.deepEqual(combSort([38, 45, 35, 8, 13]), [8, 13, 35, 38, 45]);
+```
+
+`combSort([43, 36, 20, 34, 24])` should return `[20, 24, 34, 36, 43]`.
+
+```js
+assert.deepEqual(combSort([43, 36, 20, 34, 24]), [20, 24, 34, 36, 43]);
+```
+
+`combSort([12, 33, 26, 18, 1, 16, 38])` should return `[1, 12, 16, 18, 26, 33, 38]`.
+
+```js
+assert.deepEqual(combSort([12, 33, 26, 18, 1, 16, 38]), [
+  1,
+  12,
+  16,
+  18,
+  26,
+  33,
+  38
+]);
+```
+
+`combSort([3, 39, 48, 16, 1, 4, 29])` should return `[1, 3, 4, 16, 29, 39, 48]`.
+
+```js
+assert.deepEqual(combSort([3, 39, 48, 16, 1, 4, 29]), [
+  1,
+  3,
+  4,
+  16,
+  29,
+  39,
+  48
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function combSort(arr) {
+
+}
+```
+
+# --solutions--
+
+```js
+function combSort(arr) {
+  function is_array_sorted(arr) {
+    var sorted = true;
+    for (var i = 0; i < arr.length - 1; i++) {
+      if (arr[i] > arr[i + 1]) {
+        sorted = false;
+        break;
+      }
+    }
+    return sorted;
+  }
+  var iteration_count = 0;
+  var gap = arr.length - 2;
+  var decrease_factor = 1.25;
+
+  // Until array is not sorted, repeat iterations
+  while (!is_array_sorted(arr)) {
+    // If not first gap
+    if (iteration_count > 0)
+      // Calculate gap
+      gap = gap == 1 ? gap : Math.floor(gap / decrease_factor);
+
+    // Set front and back elements and increment to a gap
+    var front = 0;
+    var back = gap;
+    while (back <= arr.length - 1) {
+      // If elements are not ordered swap them
+      if (arr[front] > arr[back]) {
+        var temp = arr[front];
+        arr[front] = arr[back];
+        arr[back] = temp;
+      }
+
+      // Increment and re-run swapping
+      front += 1;
+      back += 1;
+    }
+    iteration_count += 1;
+  }
+
+  return arr;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-gnome-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-gnome-sort.md
new file mode 100644
index 00000000000..c0315d5275f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-gnome-sort.md
@@ -0,0 +1,124 @@
+---
+id: 5a23c84252665b21eecc8007
+title: Sorting algorithms/Gnome sort
+challengeType: 1
+forumTopicId: 302314
+dashedName: sorting-algorithmsgnome-sort
+---
+
+# --description--
+
+Gnome sort is a sorting algorithm which is similar to <a href="https://rosettacode.org/wiki/Insertion_sort" target="_blank" rel="noopener noreferrer nofollow">Insertion sort</a>, except that moving an element to its proper place is accomplished by a series of swaps, as in <a href="https://rosettacode.org/wiki/Bubble" target="_blank" rel="noopener noreferrer nofollow">Bubble Sort</a>.
+
+The pseudocode for the algorithm is:
+
+<pre><b>function</b> <i>gnomeSort</i>(a[0..size-1])
+  i := 1
+  j := 2
+  <b>while</b> i &#x3C; size <b>do</b>
+    <b>if</b> a[i-1] &#x3C;= a[i] <b>then</b>
+      <i>/// for descending sort, use >= for comparison</i>
+      i := j
+      j := j + 1
+    <b>else</b>
+      <b>swap</b> a[i-1] <b>and</b> a[i]
+      i := i - 1
+      <b>if</b> i = 0 <b>then</b>
+        i := j
+        j := j + 1
+      <b>endif</b>
+    <b>endif</b>
+  <b>done</b>
+</pre>
+
+# --instructions--
+
+Write a function to implement the above pseudo code. The function should return the sorted array.
+
+# --hints--
+
+`gnomeSort` should be a function.
+
+```js
+assert(typeof gnomeSort == 'function');
+```
+
+`gnomeSort([25, 32, 12, 7, 20])` should return an array.
+
+```js
+assert(Array.isArray(gnomeSort([25, 32, 12, 7, 20])));
+```
+
+`gnomeSort([25, 32, 12, 7, 20])` should return `[7, 12, 20, 25, 32]`.
+
+```js
+assert.deepEqual(gnomeSort([25, 32, 12, 7, 20]), [7, 12, 20, 25, 32]);
+```
+
+`gnomeSort([38, 45, 35, 8, 13])` should return `[8, 13, 35, 38, 45]`.
+
+```js
+assert.deepEqual(gnomeSort([38, 45, 35, 8, 13]), [8, 13, 35, 38, 45]);
+```
+
+`gnomeSort([43, 36, 20, 34, 24])` should return `[20, 24, 34, 36, 43]`.
+
+```js
+assert.deepEqual(gnomeSort([43, 36, 20, 34, 24]), [20, 24, 34, 36, 43]);
+```
+
+`gnomeSort([12, 33, 26, 18, 1, 16, 38])` should return `[1, 12, 16, 18, 26, 33, 38]`.
+
+```js
+assert.deepEqual(gnomeSort([12, 33, 26, 18, 1, 16, 38]), [
+  1,
+  12,
+  16,
+  18,
+  26,
+  33,
+  38
+]);
+```
+
+`gnomeSort([3, 39, 48, 16, 1, 4, 29])` should return `[1, 3, 4, 16, 29, 39, 48]`.
+
+```js
+assert.deepEqual(gnomeSort([3, 39, 48, 16, 1, 4, 29]), [
+  1,
+  3,
+  4,
+  16,
+  29,
+  39,
+  48
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function gnomeSort(a) {
+
+}
+```
+
+# --solutions--
+
+```js
+function gnomeSort(a) {
+  function moveBack(i) {
+    for (; i > 0 && a[i - 1] > a[i]; i--) {
+      var t = a[i];
+      a[i] = a[i - 1];
+      a[i - 1] = t;
+    }
+  }
+  for (var i = 1; i < a.length; i++) {
+    if (a[i - 1] > a[i]) moveBack(i);
+  }
+  return a;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-pancake-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-pancake-sort.md
new file mode 100644
index 00000000000..f93ad1aac07
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-pancake-sort.md
@@ -0,0 +1,124 @@
+---
+id: 5a23c84252665b21eecc800b
+title: Sorting algorithms/Pancake sort
+challengeType: 1
+forumTopicId: 302315
+dashedName: sorting-algorithmspancake-sort
+---
+
+# --description--
+
+Write a function to sort an array of integers (of any convenient size) into ascending order using Pancake sorting. The function should return the sorted array.
+
+In short, instead of individual elements being sorted, the only operation allowed is to "flip" one end of the list, like so:
+
+<pre>Before:
+<b>6 7 8 9</b> 2 5 3 4 1<br>
+After:
+<b>9 8 7 6</b> 2 5 3 4 1
+</pre>
+
+Only one end of the list can be flipped; this should be the low end, but the high end is okay if it's easier to code or works better, but it **must** be the same end for the entire solution. (The end flipped can't be arbitrarily changed.)
+
+# --hints--
+
+`pancakeSort` should be a function.
+
+```js
+assert(typeof pancakeSort == 'function');
+```
+
+`pancakeSort([25, 32, 12, 7, 20])` should return an array.
+
+```js
+assert(Array.isArray(pancakeSort([25, 32, 12, 7, 20])));
+```
+
+`pancakeSort([25, 32, 12, 7, 20])` should return `[7, 12, 20, 25, 32]`.
+
+```js
+assert.deepEqual(pancakeSort([25, 32, 12, 7, 20]), [7, 12, 20, 25, 32]);
+```
+
+`pancakeSort([38, 45, 35, 8, 13])` should return `[8, 13, 35, 38, 45]`.
+
+```js
+assert.deepEqual(pancakeSort([38, 45, 35, 8, 13]), [8, 13, 35, 38, 45]);
+```
+
+`pancakeSort([43, 36, 20, 34, 24])` should return `[20, 24, 34, 36, 43]`.
+
+```js
+assert.deepEqual(pancakeSort([43, 36, 20, 34, 24]), [20, 24, 34, 36, 43]);
+```
+
+`pancakeSort([12, 33, 26, 18, 1, 16, 38])` should return `[1, 12, 16, 18, 26, 33, 38]`.
+
+```js
+assert.deepEqual(pancakeSort([12, 33, 26, 18, 1, 16, 38]), [
+  1,
+  12,
+  16,
+  18,
+  26,
+  33,
+  38
+]);
+```
+
+`pancakeSort([3, 39, 48, 16, 1, 4, 29])` should return `[1, 3, 4, 16, 29, 39, 48]`.
+
+```js
+assert.deepEqual(pancakeSort([3, 39, 48, 16, 1, 4, 29]), [
+  1,
+  3,
+  4,
+  16,
+  29,
+  39,
+  48
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function pancakeSort(arr) {
+
+}
+```
+
+# --solutions--
+
+```js
+function pancakeSort(arr) {
+  for (var i = arr.length - 1; i >= 1; i--) {
+    // find the index of the largest element not yet sorted
+    var max_idx = 0;
+    var max = arr[0];
+    for (var j = 1; j <= i; j++) {
+      if (arr[j] > max) {
+        max = arr[j];
+        max_idx = j;
+      }
+    }
+
+    if (max_idx == i) continue; // element already in place
+
+    var new_slice;
+
+    // flip arr max element to index 0
+    if (max_idx > 0) {
+      new_slice = arr.slice(0, max_idx + 1).reverse();
+      for (var j = 0; j <= max_idx; j++) arr[j] = new_slice[j];
+    }
+
+    // then flip the max element to its place
+    new_slice = arr.slice(0, i + 1).reverse();
+    for (var j = 0; j <= i; j++) arr[j] = new_slice[j];
+  }
+  return arr;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-permutation-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-permutation-sort.md
new file mode 100644
index 00000000000..f6bd959a068
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-permutation-sort.md
@@ -0,0 +1,131 @@
+---
+id: 5a23c84252665b21eecc800c
+title: Sorting algorithms/Permutation sort
+challengeType: 1
+forumTopicId: 302316
+dashedName: sorting-algorithmspermutation-sort
+---
+
+# --description--
+
+Write a function to implement a permutation sort, which proceeds by generating the possible permutations of the input array until discovering the sorted one. The function should return the sorted array.
+
+Pseudocode:
+
+<pre><b>while not</b> InOrder(list) <b>do</b>
+  nextPermutation(list)
+<b>done</b>
+</pre>
+
+# --hints--
+
+`permutationSort` should be a function.
+
+```js
+assert(typeof permutationSort == 'function');
+```
+
+`permutationSort([25, 32, 12, 7, 20])` should return an array.
+
+```js
+assert(Array.isArray(permutationSort([25, 32, 12, 7, 20])));
+```
+
+`permutationSort([25, 32, 12, 7, 20])` should return `[7, 12, 20, 25, 32]`.
+
+```js
+assert.deepEqual(permutationSort([25, 32, 12, 7, 20]), [7, 12, 20, 25, 32]);
+```
+
+`permutationSort([38, 45, 35, 8, 13])` should return `[8, 13, 35, 38, 45]`.
+
+```js
+assert.deepEqual(permutationSort([38, 45, 35, 8, 13]), [8, 13, 35, 38, 45]);
+```
+
+`permutationSort([43, 36, 20, 34, 24])` should return `[20, 24, 34, 36, 43]`.
+
+```js
+assert.deepEqual(permutationSort([43, 36, 20, 34, 24]), [20, 24, 34, 36, 43]);
+```
+
+`permutationSort([12, 33, 26, 18, 1, 16, 38])` should return `[1, 12, 16, 18, 26, 33, 38]`.
+
+```js
+assert.deepEqual(permutationSort([12, 33, 26, 18, 1, 16, 38]), [
+  1,
+  12,
+  16,
+  18,
+  26,
+  33,
+  38
+]);
+```
+
+`permutationSort([3, 39, 48, 16, 1, 4, 29])` should return `[1, 3, 4, 16, 29, 39, 48]`.
+
+```js
+assert.deepEqual(permutationSort([3, 39, 48, 16, 1, 4, 29]), [
+  1,
+  3,
+  4,
+  16,
+  29,
+  39,
+  48
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function permutationSort(arr) {
+
+}
+```
+
+# --solutions--
+
+```js
+function permutationSort(arr) {
+  function pSort(a) {
+    var list = [];
+    permute(a, a.length, list);
+    for (var i = 0; i < list.length; i++) {
+      var x = list[i];
+      if (isSorted(x)) return x;
+    }
+    return a;
+  }
+
+  function permute(a, n, list) {
+    if (n === 1) {
+      var b = a.slice();
+      list.push(b);
+      return;
+    }
+    for (var i = 0; i < n; i++) {
+      swap(a, i, n - 1);
+      permute(a, n - 1, list);
+      swap(a, i, n - 1);
+    }
+  }
+
+  function isSorted(a){
+    for(let i = 0; i < a.length - 1; i++)
+      if(a[i] > a[i + 1])
+        return false;
+    return true;
+  }
+
+  function swap(arr, i, j) {
+    var temp = arr[i];
+    arr[i] = arr[j];
+    arr[j] = temp;
+  }
+  return pSort(arr);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-shell-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-shell-sort.md
new file mode 100644
index 00000000000..53f76a0a3a2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-shell-sort.md
@@ -0,0 +1,106 @@
+---
+id: 5a23c84252665b21eecc8010
+title: Sorting algorithms/Shell sort
+challengeType: 1
+forumTopicId: 302317
+dashedName: sorting-algorithmsshell-sort
+---
+
+# --description--
+
+Write a function to sort an array of elements using the Shell sort algorithm, a diminishing increment sort. The function should return the sorted array.
+
+The Shell sort (also known as Shellsort or Shell's method) is named after its inventor, Donald Shell, who published the algorithm in 1959.
+
+Shell sort is a sequence of interleaved insertion sorts based on an increment sequence. The increment size is reduced after each pass until the increment size is 1.
+
+With an increment size of 1, the sort is a basic insertion sort, but by this time the data is guaranteed to be almost sorted, which is insertion sort's "best case".
+
+Any sequence will sort the data as long as it ends in 1, but some work better than others.
+
+Empirical studies have shown a geometric increment sequence with a ratio of about 2.2 work well in practice.
+
+# --hints--
+
+`shellSort` should be a function.
+
+```js
+assert(typeof shellSort == 'function');
+```
+
+`shellSort([25, 32, 12, 7, 20])` should return an array.
+
+```js
+assert(Array.isArray(shellSort([25, 32, 12, 7, 20])));
+```
+
+`shellSort([25, 32, 12, 7, 20])` should return `[7, 12, 20, 25, 32]`.
+
+```js
+assert.deepEqual(shellSort([25, 32, 12, 7, 20]), [7, 12, 20, 25, 32]);
+```
+
+`shellSort([38, 45, 35, 8, 13])` should return `[8, 13, 35, 38, 45]`.
+
+```js
+assert.deepEqual(shellSort([38, 45, 35, 8, 13]), [8, 13, 35, 38, 45]);
+```
+
+`shellSort([43, 36, 20, 34, 24])` should return `[20, 24, 34, 36, 43]`.
+
+```js
+assert.deepEqual(shellSort([43, 36, 20, 34, 24]), [20, 24, 34, 36, 43]);
+```
+
+`shellSort([12, 33, 26, 18, 1, 16, 38])` should return `[1, 12, 16, 18, 26, 33, 38]`.
+
+```js
+assert.deepEqual(shellSort([12, 33, 26, 18, 1, 16, 38]), [
+  1,
+  12,
+  16,
+  18,
+  26,
+  33,
+  38
+]);
+```
+
+`shellSort([3, 39, 48, 16, 1, 4, 29])` should return `[1, 3, 4, 16, 29, 39, 48]`.
+
+```js
+assert.deepEqual(shellSort([3, 39, 48, 16, 1, 4, 29]), [
+  1,
+  3,
+  4,
+  16,
+  29,
+  39,
+  48
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function shellSort(a) {
+
+}
+```
+
+# --solutions--
+
+```js
+function shellSort(a) {
+  for (var h = a.length; h > 0; h = parseInt(h / 2)) {
+    for (var i = h; i < a.length; i++) {
+      var k = a[i];
+      for (var j = i; j >= h && k < a[j - h]; j -= h) a[j] = a[j - h];
+      a[j] = k;
+    }
+  }
+  return a;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-stooge-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-stooge-sort.md
new file mode 100644
index 00000000000..23819a80eb9
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-stooge-sort.md
@@ -0,0 +1,125 @@
+---
+id: 5a23c84252665b21eecc8012
+title: Sorting algorithms/Stooge sort
+challengeType: 1
+forumTopicId: 302318
+dashedName: sorting-algorithmsstooge-sort
+---
+
+# --description--
+
+Write a function to perform Stooge Sort on an array of integers. The function should return a sorted array.
+
+The Stooge Sort algorithm is as follows:
+
+<pre><b>algorithm</b> stoogesort(<b>array</b> L, i = 0, j = <b>length</b>(L)-1)
+  <b>if</b> L[j] &#x3C; L[i] <b>then</b>
+    L[i] <b>↔</b> L[j]
+  <b>if</b> j - i > 1 <b>then</b>
+    t <b>:=</b> (j - i + 1)/3
+    stoogesort(L, i , j-t)
+    stoogesort(L, i+t, j )
+    stoogesort(L, i , j-t)
+  <b>return</b> L
+</pre>
+
+# --hints--
+
+`stoogeSort` should be a function.
+
+```js
+assert(typeof stoogeSort == 'function');
+```
+
+`stoogeSort([25, 32, 12, 7, 20])` should return an array.
+
+```js
+assert(Array.isArray(stoogeSort([25, 32, 12, 7, 20])));
+```
+
+`stoogeSort([25, 32, 12, 7, 20])` should return `[7, 12, 20, 25, 32]`.
+
+```js
+assert.deepEqual(stoogeSort([25, 32, 12, 7, 20]), [7, 12, 20, 25, 32]);
+```
+
+`stoogeSort([38, 45, 35, 8, 13])` should return `[8, 13, 35, 38, 45]`.
+
+```js
+assert.deepEqual(stoogeSort([38, 45, 35, 8, 13]), [8, 13, 35, 38, 45]);
+```
+
+`stoogeSort([43, 36, 20, 34, 24])` should return `[20, 24, 34, 36, 43]`.
+
+```js
+assert.deepEqual(stoogeSort([43, 36, 20, 34, 24]), [20, 24, 34, 36, 43]);
+```
+
+`stoogeSort([12, 33, 26, 18, 1, 16, 38])` should return `[1, 12, 16, 18, 26, 33, 38]`.
+
+```js
+assert.deepEqual(stoogeSort([12, 33, 26, 18, 1, 16, 38]), [
+  1,
+  12,
+  16,
+  18,
+  26,
+  33,
+  38
+]);
+```
+
+`stoogeSort([3, 39, 48, 16, 1, 4, 29])` should return `[1, 3, 4, 16, 29, 39, 48]`.
+
+```js
+assert.deepEqual(stoogeSort([3, 39, 48, 16, 1, 4, 29]), [
+  1,
+  3,
+  4,
+  16,
+  29,
+  39,
+  48
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function stoogeSort(arr) {
+
+}
+```
+
+# --solutions--
+
+```js
+function stoogeSort(arr) {
+  function stoogeSortRecurse(array, i, j) {
+    if (j === undefined) {
+      j = array.length - 1;
+    }
+
+    if (i === undefined) {
+      i = 0;
+    }
+
+    if (array[j] < array[i]) {
+      var aux = array[i];
+      array[i] = array[j];
+      array[j] = aux;
+    }
+
+    if (j - i > 1) {
+      var t = Math.floor((j - i + 1) / 3);
+      stoogeSortRecurse(array, i, j - t);
+      stoogeSortRecurse(array, i + t, j);
+      stoogeSortRecurse(array, i, j - t);
+    }
+  }
+  stoogeSortRecurse(arr);
+  return arr;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-strand-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-strand-sort.md
new file mode 100644
index 00000000000..af66009395b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sorting-algorithms-strand-sort.md
@@ -0,0 +1,130 @@
+---
+id: 5a23c84252665b21eecc8013
+title: Sorting algorithms/Strand sort
+challengeType: 1
+forumTopicId: 302319
+dashedName: sorting-algorithmsstrand-sort
+---
+
+# --description--
+
+The **Strand sort** creates sorted subsets that are merged to create the final result.
+
+Consider an `unsortedArray = [3, 1, 4, 2]`. Pick the first item `3` and copy it into a separate array. Search for any bigger item following this item. When you find the a larger item, in this case `4`, copy it to the separate array, `[3, 4]`, and compare the following items to this new value, `4`.
+
+After you have reached the end of the array, remove the items you copied, `[3, 4]`, and start again with the first item remaining in the `unsortedArray`, in this case `1`.
+
+Following this process results in two sorted arrays, `[3, 4]` and `[1, 2]`. Merge these two arrays to create the `strandSortedArray`.
+
+```js
+const unsortedArray = [3, 1, 4, 2];
+const strandsortedArray = [1, 2, 3, 4];
+```
+
+Write a function to sort an array using the **Strand sort**. The function should return the sorted array.
+
+
+# --hints--
+
+`strandSort` should be a function.
+
+```js
+assert(typeof strandSort == 'function');
+```
+
+`strandSort([25, 32, 12, 7, 20])` should return an array.
+
+```js
+assert(Array.isArray(strandSort([25, 32, 12, 7, 20])));
+```
+
+`strandSort([25, 32, 12, 7, 20])` should return `[7, 12, 20, 25, 32]`.
+
+```js
+assert.deepEqual(strandSort([25, 32, 12, 7, 20]), [7, 12, 20, 25, 32]);
+```
+
+`strandSort([38, 45, 35, 8, 13])` should return `[8, 13, 35, 38, 45]`.
+
+```js
+assert.deepEqual(strandSort([38, 45, 35, 8, 13]), [8, 13, 35, 38, 45]);
+```
+
+`strandSort([43, 36, 20, 34, 24])` should return `[20, 24, 34, 36, 43]`.
+
+```js
+assert.deepEqual(strandSort([43, 36, 20, 34, 24]), [20, 24, 34, 36, 43]);
+```
+
+`strandSort([12, 33, 26, 18, 1, 16, 38])` should return `[1, 12, 16, 18, 26, 33, 38]`.
+
+```js
+assert.deepEqual(strandSort([12, 33, 26, 18, 1, 16, 38]), [
+  1,
+  12,
+  16,
+  18,
+  26,
+  33,
+  38
+]);
+```
+
+`strandSort([3, 39, 48, 16, 1, 4, 29])` should return `[1, 3, 4, 16, 29, 39, 48]`.
+
+```js
+assert.deepEqual(strandSort([3, 39, 48, 16, 1, 4, 29]), [
+  1,
+  3,
+  4,
+  16,
+  29,
+  39,
+  48
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function strandSort(list) {
+
+}
+```
+
+# --solutions--
+
+```js
+function strandSort(list) {
+  function merge(left, right) {
+    var result = [];
+    while (left.length != 0 && right.length != 0) {
+      if (left[0] <= right[0]) result.push(left.shift());
+      else result.push(right.shift());
+    }
+    result.push.apply(result, left);
+    result.push.apply(result, right);
+    return result;
+  }
+
+  if (list.length <= 1) return list;
+  var result = [];
+  while (list.length > 0) {
+    var sorted = [];
+    sorted.push(list.shift());
+    var len = list.length;
+    for (var i = 1; i < len; i++) {
+      var elem = list[i];
+      if (sorted[i - 1] <= elem) {
+        sorted.push(elem);
+        sorted.splice(i, 1);
+      }
+    }
+
+    result = merge(result, sorted);
+  }
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/soundex.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/soundex.md
new file mode 100644
index 00000000000..b51c5bc6b71
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/soundex.md
@@ -0,0 +1,161 @@
+---
+id: 5a23c84252665b21eecc8017
+title: Soundex
+challengeType: 1
+forumTopicId: 302320
+dashedName: soundex
+---
+
+# --description--
+
+**Soundex Algorithm** deals with the *intentions* of the words. It creates a representation for similar sounding words.
+
+It is used for searching <em>names</em> and <em>addresses</em>. This means that the person who filled in the <em>name</em>, can focus on how it sounds instead of correcting the spelling of <em>names</em>.
+
+For example:
+
+If you are hearing the name `Quenci` for the first time, and misspelled it, you will get **Soundex** code `Q520`.
+
+When you spell the name `Quincy` correctly next time, you will still get the same code `Q520`, which means you can link multiple name pronunciations into the same <em>person</em> without the need for adding every spelling.
+
+Here is the rules: 
+
+<ul>
+  <li>If a vowel (A, E, I, O, U) separates two consonants that have the same soundex code, the consonant to the right of the vowel is coded. Tymczak is coded as T-522 (T, 5 for the M, 2 for the C, Z ignored (see "Side-by-Side" rule above), 2 for the K). Since the vowel "A" separates the Z and K, the K is coded.</li>
+  <li>If "H" or "W" separate two consonants that have the same soundex code, the consonant to the right of the vowel is not coded. Example: Ashcraft is coded A-261 (A, 2 for the S, C ignored, 6 for the R, 1 for the F). It is not coded A-226.</li>
+</ul>
+
+# --instructions--
+
+Write a function that takes a string as a parameter and returns the encoded string.
+
+# --hints--
+
+`soundex` should be a function.
+
+```js
+assert(typeof soundex == 'function');
+```
+
+`soundex("Soundex")` should return a string.
+
+```js
+assert(typeof soundex('Soundex') == 'string');
+```
+
+`soundex("Soundex")` should return `"S532"`.
+
+```js
+assert.equal(soundex('Soundex'), 'S532');
+```
+
+`soundex("Example")` should return `"E251"`.
+
+```js
+assert.equal(soundex('Example'), 'E251');
+```
+
+`soundex("Sownteks")` should return `"S532"`.
+
+```js
+assert.equal(soundex('Sownteks'), 'S532');
+```
+
+`soundex("Ekzampul")` should return `"E251"`.
+
+```js
+assert.equal(soundex('Ekzampul'), 'E251');
+```
+
+`soundex("Euler")` should return `"E460"`.
+
+```js
+assert.equal(soundex('Euler'), 'E460');
+```
+
+`soundex("Gauss")` should return `"G200"`.
+
+```js
+assert.equal(soundex('Gauss'), 'G200');
+```
+
+`soundex("Hilbert")` should return `"H416"`.
+
+```js
+assert.equal(soundex('Hilbert'), 'H416');
+```
+
+`soundex("Knuth")` should return `"K530"`.
+
+```js
+assert.equal(soundex('Knuth'), 'K530');
+```
+
+`soundex("Lloyd")` should return `"L300"`.
+
+```js
+assert.equal(soundex('Lloyd'), 'L300');
+```
+
+`soundex("Lukasiewicz")` should return `"L222"`.
+
+```js
+assert.equal(soundex('Lukasiewicz'), 'L222');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function soundex(s) {
+
+}
+```
+
+# --solutions--
+
+```js
+function soundex(s) {
+  var a = s.toLowerCase().split('');
+  var f = a.shift(),
+    r = '',
+    codes = {
+      a: '',
+      e: '',
+      i: '',
+      o: '',
+      u: '',
+      b: 1,
+      f: 1,
+      p: 1,
+      v: 1,
+      c: 2,
+      g: 2,
+      j: 2,
+      k: 2,
+      q: 2,
+      s: 2,
+      x: 2,
+      z: 2,
+      d: 3,
+      t: 3,
+      l: 4,
+      m: 5,
+      n: 5,
+      r: 6
+    };
+  r =
+    f +
+    a
+      .map(function(v, i, a) {
+        return codes[v];
+      })
+      .filter(function(v, i, a) {
+        return i === 0 ? v !== codes[f] : v !== a[i - 1];
+      })
+      .join('');
+
+  return (r + '000').slice(0, 4).toUpperCase();
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/spiral-matrix.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/spiral-matrix.md
new file mode 100644
index 00000000000..fbdd024181b
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/spiral-matrix.md
@@ -0,0 +1,109 @@
+---
+id: 5a23c84252665b21eecc801c
+title: Spiral matrix
+challengeType: 1
+forumTopicId: 302321
+dashedName: spiral-matrix
+---
+
+# --description--
+
+Produce a spiral array. A *spiral array* is a square arrangement of the first N<sup>2</sup> natural numbers, where the numbers increase sequentially as you go around the edges of the array spiraling inwards. For example, given **5**, produce this array:
+
+<pre>
+0  1  2  3  4
+15 16 17 18 5
+14 23 24 19 6
+13 22 21 20 7
+12 11 10  9 8
+</pre>
+
+# --hints--
+
+`spiralArray` should be a function.
+
+```js
+assert(typeof spiralArray == 'function');
+```
+
+`spiralArray(3)` should return an array.
+
+```js
+assert(Array.isArray(spiralArray(3)));
+```
+
+`spiralArray(3)` should return `[[0, 1, 2],[7, 8, 3],[6, 5, 4]]`.
+
+```js
+assert.deepEqual(spiralArray(3), [
+  [0, 1, 2],
+  [7, 8, 3],
+  [6, 5, 4]
+]);
+```
+
+`spiralArray(4)` should return `[[0, 1, 2, 3],[11, 12, 13, 4],[10, 15, 14, 5],[9, 8, 7, 6]]`.
+
+```js
+assert.deepEqual(spiralArray(4), [
+  [0, 1, 2, 3],
+  [11, 12, 13, 4],
+  [10, 15, 14, 5],
+  [9, 8, 7, 6]
+]);
+```
+
+`spiralArray(5)` should return `[[0, 1, 2, 3, 4],[15, 16, 17, 18, 5],[14, 23, 24, 19, 6],[13, 22, 21, 20, 7],[12, 11, 10, 9, 8]]`.
+
+```js
+assert.deepEqual(spiralArray(5), [
+  [0, 1, 2, 3, 4],
+  [15, 16, 17, 18, 5],
+  [14, 23, 24, 19, 6],
+  [13, 22, 21, 20, 7],
+  [12, 11, 10, 9, 8]
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function spiralArray(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function spiralArray(n) {
+  var arr = Array(n),
+    x = 0,
+    y = n,
+    total = n * n--,
+    dx = 1,
+    dy = 0,
+    i = 0,
+    j = 0;
+  while (y) arr[--y] = [];
+  while (i < total) {
+    arr[y][x] = i++;
+    x += dx;
+    y += dy;
+    if (++j == n) {
+      if (dy < 0) {
+        x++;
+        y++;
+        n -= 2;
+      }
+      j = dx;
+      dx = -dy;
+      dy = j;
+      j = 0;
+    }
+  }
+  return arr;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/split-a-character-string-based-on-change-of-character.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/split-a-character-string-based-on-change-of-character.md
new file mode 100644
index 00000000000..5a7cd85889d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/split-a-character-string-based-on-change-of-character.md
@@ -0,0 +1,145 @@
+---
+id: 5a23c84252665b21eecc801d
+title: Split a character string based on change of character
+challengeType: 1
+forumTopicId: 302322
+dashedName: split-a-character-string-based-on-change-of-character
+---
+
+# --description--
+
+Split a (character) string into comma (plus a blank) delimited strings based on a change of character (left to right). Blanks should be treated as any other character (except they are problematic to display clearly). The same applies to commas. For instance, the string:
+
+<pre>
+"gHHH5YY++///\\"
+</pre>
+
+should be split as:
+
+<pre>
+["g", "HHH", "5", "YY", "++", "///", "\\" ];
+</pre>
+
+# --hints--
+
+`split` should be a function.
+
+```js
+assert(typeof split == 'function');
+```
+
+`split("hello")` should return an array.
+
+```js
+assert(Array.isArray(split('hello')));
+```
+
+`split("hello")` should return `["h", "e", "ll", "o"]`.
+
+```js
+assert.deepEqual(split('hello'), ['h', 'e', 'll', 'o']);
+```
+
+`split("commission")` should return `["c", "o", "mm", "i", "ss", "i", "o", "n"]`.
+
+```js
+assert.deepEqual(split('commission'), [
+  'c',
+  'o',
+  'mm',
+  'i',
+  'ss',
+  'i',
+  'o',
+  'n'
+]);
+```
+
+`split("ssss----====llloooo")` should return `["ssss", "----", "====", "lll", "oooo"]`.
+
+```js
+assert.deepEqual(split('ssss----====llloooo'), [
+  'ssss',
+  '----',
+  '====',
+  'lll',
+  'oooo'
+]);
+```
+
+`split("sssmmmaaammmaaat")` should return `["sss", "mmm", "aaa", "mmm", "aaa", "t"]`.
+
+```js
+assert.deepEqual(split('sssmmmaaammmaaat'), [
+  'sss',
+  'mmm',
+  'aaa',
+  'mmm',
+  'aaa',
+  't'
+]);
+```
+
+`split("gHHH5YY++///\\")` should return `["g", "HHH", "5", "YY", "++", "///", "\\"]`.
+
+```js
+assert.deepEqual(split('gHHH5YY++///\\'), [
+  'g',
+  'HHH',
+  '5',
+  'YY',
+  '++',
+  '///',
+  '\\'
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function split(str) {
+
+}
+```
+
+# --solutions--
+
+```js
+function split(str) {
+  const concat = xs =>
+    xs.length > 0
+      ? (() => {
+          const unit = typeof xs[0] === 'string' ? '' : [];
+          return unit.concat.apply(unit, xs);
+        })()
+      : [];
+
+  const group = xs => groupBy((a, b) => a === b, xs);
+
+  const groupBy = (f, xs) => {
+    const dct = xs.slice(1).reduce(
+      (a, x) => {
+        const h = a.active.length > 0 ? a.active[0] : undefined,
+          blnGroup = h !== undefined && f(h, x);
+        return {
+          active: blnGroup ? a.active.concat([x]) : [x],
+          sofar: blnGroup ? a.sofar : a.sofar.concat([a.active])
+        };
+      },
+      {
+        active: xs.length > 0 ? [xs[0]] : [],
+        sofar: []
+      }
+    );
+    return dct.sofar.concat(dct.active.length > 0 ? [dct.active] : []);
+  };
+
+  const map = (f, xs) => xs.map(f);
+
+  const stringChars = s => s.split('');
+
+  return map(concat, group(stringChars(str)));
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/state-name-puzzle.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/state-name-puzzle.md
new file mode 100644
index 00000000000..841319d1bda
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/state-name-puzzle.md
@@ -0,0 +1,162 @@
+---
+id: 5a23c84252665b21eecc8024
+title: State name puzzle
+challengeType: 1
+forumTopicId: 302323
+dashedName: state-name-puzzle
+---
+
+# --description--
+
+**State name** is a <em>word puzzle</em> in which you take the letters from two U.S. state names and rearrange them to form the names of two different U.S. states.
+
+
+# --instructions--
+
+Write a function to solve the challenge for a given array of actual U.S. state names, and for fictional state names.
+
+The function should return an array. Each element should be an object in this form: `{"from":[],"to":[]}`. The `"from"` array should contain the original names and the `"to"` array should contain the resultant names.
+
+# --hints--
+
+`solve` should be a function.
+
+```js
+assert(typeof solve == 'function');
+```
+
+`solve(["New Mexico", "New York", "North Carolina ", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota"])` should return an array.
+
+```js
+assert(
+  Array.isArray(
+    solve([
+      'New Mexico',
+      'New York',
+      'North Carolina ',
+      'North Dakota',
+      'Ohio',
+      'Oklahoma',
+      'Oregon',
+      'Pennsylvania',
+      'Rhode Island',
+      'South Carolina',
+      'South Dakota'
+    ])
+  )
+);
+```
+
+`solve(["New Mexico", "New York", "North Carolina ", "North Dakota", "Ohio", "Oklahoma", "Oregon", "Pennsylvania", "Rhode Island", "South Carolina", "South Dakota"])` should return `[{ from: ["North Carolina ", "South Dakota"], to: ["North Dakota", "South Carolina"] }]`.
+
+```js
+assert.deepEqual(
+  solve([
+    'New Mexico',
+    'New York',
+    'North Carolina ',
+    'North Dakota',
+    'Ohio',
+    'Oklahoma',
+    'Oregon',
+    'Pennsylvania',
+    'Rhode Island',
+    'South Carolina',
+    'South Dakota'
+  ]),
+  [
+    {
+      from: ['North Carolina ', 'South Dakota'],
+      to: ['North Dakota', 'South Carolina']
+    }
+  ]
+);
+```
+
+`solve(["New York", "New Kory", "Wen Kory", "York New", "Kory New", "New Kory"])` should return `[{ from: ["New Kory", "New York"], to: ["Wen Kory", "York New"] }, { from: ["New Kory", "New York"], to: ["Kory New", "Wen Kory"] }, { from: ["New Kory", "New York"], to: ["Kory New", "York New"] }, { from: ["New York", "Wen Kory"], to: ["New Kory", "York New"] }, { from: ["New York", "Wen Kory"], to: ["Kory New", "New Kory"] }, { from: ["New York", "Wen Kory"], to: ["Kory New", "York New"] }, { from: ["New York", "York New"], to: ["New Kory", "Wen Kory"] }, { from: ["New York", "York New"], to: ["Kory New", "New Kory"] }, { from: ["New York", "York New"], to: ["Kory New", "Wen Kory"] }, { from: ["Kory New", "New York"], to: ["New Kory", "Wen Kory"] }, { from: ["Kory New", "New York"], to: ["New Kory", "York New"] }, { from: ["Kory New", "New York"], to: ["Wen Kory", "York New"] }, { from: ["New Kory", "Wen Kory"], to: ["Kory New", "York New"] }, { from: ["New Kory", "York New"], to: ["Kory New", "Wen Kory"] }, { from: ["Kory New", "New Kory"], to: ["Wen Kory", "York New"] }]`.
+
+```js
+assert.deepEqual(
+  solve([
+    'New York',
+    'New Kory',
+    'Wen Kory',
+    'York New',
+    'Kory New',
+    'New Kory'
+  ]),
+  [
+    { from: ['New Kory', 'New York'], to: ['Wen Kory', 'York New'] },
+    { from: ['New Kory', 'New York'], to: ['Kory New', 'Wen Kory'] },
+    { from: ['New Kory', 'New York'], to: ['Kory New', 'York New'] },
+    { from: ['New York', 'Wen Kory'], to: ['New Kory', 'York New'] },
+    { from: ['New York', 'Wen Kory'], to: ['Kory New', 'New Kory'] },
+    { from: ['New York', 'Wen Kory'], to: ['Kory New', 'York New'] },
+    { from: ['New York', 'York New'], to: ['New Kory', 'Wen Kory'] },
+    { from: ['New York', 'York New'], to: ['Kory New', 'New Kory'] },
+    { from: ['New York', 'York New'], to: ['Kory New', 'Wen Kory'] },
+    { from: ['Kory New', 'New York'], to: ['New Kory', 'Wen Kory'] },
+    { from: ['Kory New', 'New York'], to: ['New Kory', 'York New'] },
+    { from: ['Kory New', 'New York'], to: ['Wen Kory', 'York New'] },
+    { from: ['New Kory', 'Wen Kory'], to: ['Kory New', 'York New'] },
+    { from: ['New Kory', 'York New'], to: ['Kory New', 'Wen Kory'] },
+    { from: ['Kory New', 'New Kory'], to: ['Wen Kory', 'York New'] }
+  ]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function solve(input) {
+
+}
+```
+
+# --solutions--
+
+```js
+function solve(input) {
+  var orig = {};
+  input.forEach(function(e) {
+    orig[__helpers.removeWhiteSpace(e).toLowerCase()] = e;
+  });
+
+  input = Object.keys(orig);
+  var map = {};
+  for (var i = 0; i < input.length - 1; i++) {
+    var pair0 = input[i];
+    for (var j = i + 1; j < input.length; j++) {
+      var pair = [pair0, input[j]];
+      var s = pair0 + pair[1];
+      var key = s.split('').sort();
+
+      var val = map[key] ? map[key] : [];
+      val.push(pair);
+      map[key] = val;
+    }
+  }
+
+  var result = [];
+  Object.keys(map).forEach(key => {
+    for (var i = 0; i < map[key].length - 1; i++) {
+      var a = map[key][i];
+      for (var j = i + 1; j < map[key].length; j++) {
+        var b = map[key][j];
+
+        if (new Set([a[0], b[0], a[1], b[1]]).size < 4) continue;
+        var from = [orig[a[0]], orig[a[1]]].sort();
+        var to = [orig[b[0]], orig[b[1]]].sort();
+        result.push({
+          from,
+          to
+        });
+      }
+    }
+  });
+
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/stern-brocot-sequence.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/stern-brocot-sequence.md
new file mode 100644
index 00000000000..a0030994da2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/stern-brocot-sequence.md
@@ -0,0 +1,114 @@
+---
+id: 5a23c84252665b21eecc8028
+title: Stern-Brocot sequence
+challengeType: 1
+forumTopicId: 302324
+dashedName: stern-brocot-sequence
+---
+
+# --description--
+
+For this task, the Stern-Brocot sequence is to be generated by an algorithm similar to that employed in generating the <a href="https://rosettacode.org/wiki/Fibonacci_sequence" target="_blank" rel="noopener noreferrer nofollow">Fibonacci sequence</a>.
+
+<ol>
+  <li>The first and second members of the sequence are both 1:</li>
+    <ul><li>1, 1</li></ul>
+  <li>Start by considering the second member of the sequence</li>
+  <li>Sum the considered member of the sequence and its precedent, (1 + 1) = 2, and append it to the end of the
+    sequence:</li>
+    <ul><li>1, 1, 2</li></ul>
+  <li>Append the considered member of the sequence to the end of the sequence:</li>
+    <ul><li>1, 1, 2, 1</li></ul>
+  <li>Consider the next member of the series, (the third member i.e. 2)</li>
+  <li>GOTO 3 </li>
+    <ul>
+      <li></li>
+      <li> ─── Expanding another loop we get: ───</li>
+      <li></li>
+    </ul>
+  <li>Sum the considered member of the sequence and its precedent, (2 + 1) = 3, and append it to the end of the
+    sequence:</li>
+    <ul><li>1, 1, 2, 1, 3</li></ul>
+  <li>Append the considered member of the sequence to the end of the sequence:</li>
+    <ul><li>1, 1, 2, 1, 3, 2</li></ul>
+  <li>Consider the next member of the series, (the fourth member i.e. 1)</li>
+</ol>
+
+# --instructions--
+
+Create a function that returns the position in the Stern-Brocot sequence at which $ n $ is first encountered, where the sequence is generated with the method outlined above. Note that this sequence uses 1 based indexing.
+
+# --hints--
+
+`sternBrocot` should be a function.
+
+```js
+assert(typeof sternBrocot == 'function');
+```
+
+`sternBrocot(2)` should return a number.
+
+```js
+assert(typeof sternBrocot(2) == 'number');
+```
+
+`sternBrocot(2)` should return `3`.
+
+```js
+assert.equal(sternBrocot(2), 3);
+```
+
+`sternBrocot(3)` should return `5`.
+
+```js
+assert.equal(sternBrocot(3), 5);
+```
+
+`sternBrocot(5)` should return `11`.
+
+```js
+assert.equal(sternBrocot(5), 11);
+```
+
+`sternBrocot(7)` should return `19`.
+
+```js
+assert.equal(sternBrocot(7), 19);
+```
+
+`sternBrocot(10)` should return `39`.
+
+```js
+assert.equal(sternBrocot(10), 39);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sternBrocot(num) {
+
+}
+```
+
+# --solutions--
+
+```js
+function sternBrocot(num) {
+  function f(n) {
+    return n < 2
+      ? n
+      : n & 1
+      ? f(Math.floor(n / 2)) + f(Math.floor(n / 2 + 1))
+      : f(Math.floor(n / 2));
+  }
+
+  function gcd(a, b) {
+    return a ? (a < b ? gcd(b % a, a) : gcd(a % b, b)) : b;
+  }
+  var n;
+  for (n = 1; f(n) != num; n++);
+  return n;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/straddling-checkerboard.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/straddling-checkerboard.md
new file mode 100644
index 00000000000..6181ad81245
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/straddling-checkerboard.md
@@ -0,0 +1,192 @@
+---
+id: 5a23c84252665b21eecc8029
+title: Straddling checkerboard
+challengeType: 1
+forumTopicId: 302325
+dashedName: straddling-checkerboard
+---
+
+# --description--
+
+Implement functions to encrypt and decrypt a message using the **straddling checkerboard** method.
+
+Each function will take two arguments, a `message` string and an `alphabet` array. The `alphabet` array will contain 3 strings representing the 3 rows of the straddling checkerboard.
+
+The output of the `straddle()` function should be a series of decimal digits. Numbers should be encrypted by inserting the escape character before each digit, then including the digit <em>unencrypted</em>.
+
+This should be reversed for decryption with the `unstraddle()` function.
+
+# --hints--
+
+`straddle` should be a function.
+
+```js
+assert(typeof straddle == 'function');
+```
+
+`straddle("One night-it was on the twentieth of March, 1888-I was returning.",["ESTONIA  R", "BCDFGHJKLM", "PQUVWXYZ./"])` should return a string.
+
+```js
+assert(
+  typeof straddle(
+    'One night-it was on the twentieth of March, 1888-I was returning.',
+    ['ESTONIA  R', 'BCDFGHJKLM', 'PQUVWXYZ./']
+  ) == 'string'
+);
+```
+
+`straddle("One night-it was on the twentieth of March, 1888-I was returning.",["ESTONIA  R", "BCDFGHJKLM", "PQUVWXYZ./"])` should return `"34045747525284613427502840425027537379697175891898898898584619028294547488"`.
+
+```js
+assert.equal(
+  straddle(
+    'One night-it was on the twentieth of March, 1888-I was returning.',
+    ['ESTONIA  R', 'BCDFGHJKLM', 'PQUVWXYZ./']
+  ),
+  '34045747525284613427502840425027537379697175891898898898584619028294547488'
+);
+```
+
+`straddle("One night-it was on the twentieth of March, 1888-I was returning",["HOL MES RT", "ABCDFGIJKN", "PQUVWXYZ./"])` should return `"139539363509369743061399059745399365901344308320791798798798367430685972839363935"`.
+
+```js
+assert.equal(
+  straddle('One night-it was on the twentieth of March, 1888-I was returning', [
+    'HOL MES RT',
+    'ABCDFGIJKN',
+    'PQUVWXYZ./'
+  ]),
+  '139539363509369743061399059745399365901344308320791798798798367430685972839363935'
+);
+```
+
+`straddle("Thecheckerboardcakerecipespecifies3largeeggsand2.25cupsofflour.",["ET AON RIS", "BCDFGHJKLM", "PQ/UVWXYZ."])` should return `"125021250212707204372221327070218600960021823809623283724002424935226226962262521636094232328463769"`.
+
+```js
+assert.equal(
+  straddle('Thecheckerboardcakerecipespecifies3largeeggsand2.25cupsofflour.', [
+    'ET AON RIS',
+    'BCDFGHJKLM',
+    'PQ/UVWXYZ.'
+  ]),
+  '125021250212707204372221327070218600960021823809623283724002424935226226962262521636094232328463769'
+);
+```
+
+`unstraddle` should be a function.
+
+```js
+assert(typeof unstraddle == 'function');
+```
+
+`unstraddle("34045747525284613427502840425027537379697175891898898898584619028294547488",["ESTONIA  R", "BCDFGHJKLM", "PQUVWXYZ./"])` should return a string.
+
+```js
+assert(
+  typeof unstraddle(
+    '34045747525284613427502840425027537379697175891898898898584619028294547488',
+    ['ESTONIA  R', 'BCDFGHJKLM', 'PQUVWXYZ./']
+  ) == 'string'
+);
+```
+
+`unstraddle("34045747525284613427502840425027537379697175891898898898584619028294547488",["ESTONIA  R", "BCDFGHJKLM", "PQUVWXYZ./"])` should return `"ONENIGHTITWASONTHETWENTIETHOFMARCH1888IWASRETURNING."`.
+
+```js
+assert.equal(
+  unstraddle(
+    '34045747525284613427502840425027537379697175891898898898584619028294547488',
+    ['ESTONIA  R', 'BCDFGHJKLM', 'PQUVWXYZ./']
+  ),
+  'ONENIGHTITWASONTHETWENTIETHOFMARCH1888IWASRETURNING.'
+);
+```
+
+`unstraddle("139539363509369743061399059745399365901344308320791798798798367430685972839363935",["HOL MES RT", "ABCDFGIJKN", "PQUVWXYZ./"])` should return `"ONENIGHTITWASONTHETWENTIETHOFMARCH1888IWASRETURNING"`.
+
+```js
+assert.equal(
+  unstraddle(
+    '139539363509369743061399059745399365901344308320791798798798367430685972839363935',
+    ['HOL MES RT', 'ABCDFGIJKN', 'PQUVWXYZ./']
+  ),
+  'ONENIGHTITWASONTHETWENTIETHOFMARCH1888IWASRETURNING'
+);
+```
+
+`unstraddle("125021250212707204372221327070218600960021823809623283724002424935226226962262521636094232328463769",["ET AON RIS", "BCDFGHJKLM", "PQ/UVWXYZ."])` should return `"THECHECKERBOARDCAKERECIPESPECIFIES3LARGEEGGSAND2.25CUPSOFFLOUR."`.
+
+```js
+assert.equal(
+  unstraddle(
+    '125021250212707204372221327070218600960021823809623283724002424935226226962262521636094232328463769',
+    ['ET AON RIS', 'BCDFGHJKLM', 'PQ/UVWXYZ.']
+  ),
+  'THECHECKERBOARDCAKERECIPESPECIFIES3LARGEEGGSAND2.25CUPSOFFLOUR.'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function straddle(message, alphabet) {
+
+}
+
+function unstraddle(message, alphabet) {
+
+}
+```
+
+# --solutions--
+
+```js
+function straddle(message, alphabet) {
+  var prefixes = new Array(
+    '',
+    alphabet[0].indexOf(' '),
+    alphabet[0].lastIndexOf(' ')
+  );
+
+  var out = '';
+  message = message.toUpperCase();
+  message = message.replace(/([0-9])/g, '/$1'); // dumb way to escape numbers
+  for (var i = 0; i < message.length; i++) {
+    var chr = message[i];
+    if (chr == ' ') continue;
+    for (var j = 0; j < 3; j++) {
+      var k = alphabet[j].indexOf(chr);
+      if (k < 0) continue;
+      out += prefixes[j].toString() + k;
+    }
+    if (chr == '/') out += message[++i];
+  }
+  return out;
+}
+function unstraddle(message, alphabet) {
+  var prefixes = new Array(
+    '',
+    alphabet[0].indexOf(' '),
+    alphabet[0].lastIndexOf(' ')
+  );
+  var out = '';
+  var n, o;
+  for (var i = 0; i < message.length; i++) {
+    n = message[i] * 1;
+    switch (n) {
+      case prefixes[1]:
+        o = alphabet[1][message[++i]];
+        break;
+      case prefixes[2]:
+        o = alphabet[2][message[++i]];
+        break;
+      default:
+        o = alphabet[0][n];
+    }
+    o == '/' ? (out += message[++i]) : (out += o);
+  }
+  return out;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/stream-merge.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/stream-merge.md
new file mode 100644
index 00000000000..9e2c93138d7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/stream-merge.md
@@ -0,0 +1,140 @@
+---
+id: 5a23c84252665b21eecc802a
+title: Stream Merge
+challengeType: 1
+forumTopicId: 302326
+dashedName: stream-merge
+---
+
+# --description--
+
+Write a function that takes multiple sorted arrays of items, and returns one array of sorted items.
+
+# --hints--
+
+`mergeLists` should be a function.
+
+```js
+assert(typeof mergeLists == 'function');
+```
+
+`mergeLists([[1, 3, 5, 9, 10], [2, 4, 6, 7, 8]])` should return an array.
+
+```js
+assert(
+  Array.isArray(
+    mergeLists([
+      [1, 3, 5, 9, 10],
+      [2, 4, 6, 7, 8]
+    ])
+  )
+);
+```
+
+`mergeLists([[1, 3, 5, 9, 10], [2, 4, 6, 7, 8]])` should return `[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]`.
+
+```js
+assert.deepEqual(
+  mergeLists([
+    [1, 3, 5, 9, 10],
+    [2, 4, 6, 7, 8]
+  ]),
+  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
+);
+```
+
+`mergeLists([[1, 4, 7, 10], [2, 5, 8, 11], [3, 6, 9, 12]])` should return `[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]`.
+
+```js
+assert.deepEqual(
+  mergeLists([
+    [1, 4, 7, 10],
+    [2, 5, 8, 11],
+    [3, 6, 9, 12]
+  ]),
+  [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]
+);
+```
+
+`mergeLists([[1, 3, 9, 14, 15, 17, 28], [7, 8, 14, 14, 23, 26, 28, 29, 30], [9, 23, 25, 29]])` should return `[1, 3, 7, 8, 9, 9, 14, 14, 14, 15, 17, 23, 23, 25, 26, 28, 28, 29, 29, 30]`.
+
+```js
+assert.deepEqual(
+  mergeLists([
+    [1, 3, 9, 14, 15, 17, 28],
+    [7, 8, 14, 14, 23, 26, 28, 29, 30],
+    [9, 23, 25, 29]
+  ]),
+  [1, 3, 7, 8, 9, 9, 14, 14, 14, 15, 17, 23, 23, 25, 26, 28, 28, 29, 29, 30]
+);
+```
+
+`mergeLists([[3, 14, 15], [2, 17, 18], [], [2, 3, 5, 7]])` should return `[2, 2, 3, 3, 5, 7, 14, 15, 17, 18]`.
+
+```js
+assert.deepEqual(mergeLists([[3, 14, 15], [2, 17, 18], [], [2, 3, 5, 7]]), [
+  2,
+  2,
+  3,
+  3,
+  5,
+  7,
+  14,
+  15,
+  17,
+  18
+]);
+```
+
+`mergeLists([[1, 19, 1999], [17, 33, 2999, 3000], [8, 500, 3999]])` should return `[1, 8, 17, 19, 33, 500, 1999, 2999, 3000, 3999]`.
+
+```js
+assert.deepEqual(
+  mergeLists([
+    [1, 19, 1999],
+    [17, 33, 2999, 3000],
+    [8, 500, 3999]
+  ]),
+  [1, 8, 17, 19, 33, 500, 1999, 2999, 3000, 3999]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function mergeLists(lists) {
+
+}
+```
+
+# --solutions--
+
+```js
+function mergeLists(lists) {
+  function merge(l1, l2) {
+    var result = [],
+      i = 0,
+      j = 0;
+    while (l1.length && l2.length) {
+      if (l1[i] <= l2[j]) {
+        result.push(l1.shift());
+      } else {
+        result.push(l2.shift());
+      }
+    }
+
+    result.push.apply(result, l1);
+    result.push.apply(result, l2);
+    return result;
+  }
+
+  var result = lists[0];
+  for (var i = 1; i < lists.length; i++) {
+    result = merge(result, lists[i]);
+  }
+
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/strip-control-codes-and-extended-characters-from-a-string.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/strip-control-codes-and-extended-characters-from-a-string.md
new file mode 100644
index 00000000000..5207f260b42
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/strip-control-codes-and-extended-characters-from-a-string.md
@@ -0,0 +1,80 @@
+---
+id: 5a23c84252665b21eecc8036
+title: Strip control codes and extended characters from a string
+challengeType: 1
+forumTopicId: 302327
+dashedName: strip-control-codes-and-extended-characters-from-a-string
+---
+
+# --description--
+
+The task is to strip control codes and extended characters from a string. The solution should demonstrate how to achieve each of the following results: A string with control codes and extended characters stripped. In ASCII, the control codes have decimal codes 0 through to 31 and 127. On an ASCII based system, if the control codes are stripped, the resultant string would have all of its characters within the range of 32 to 126 decimal on the ASCII table. On a non-ASCII based system, we consider characters that do not have a corresponding glyph on the ASCII table (within the ASCII range of 32 to 126 decimal) to be an extended character for the purpose of this task.
+
+# --hints--
+
+`strip` should be a function.
+
+```js
+assert(typeof strip == 'function');
+```
+
+`strip("abc")` should return a string.
+
+```js
+assert(typeof strip('abc') == 'string');
+```
+
+`strip("\ba\x00b\n\rc\fd\xc3")` should return `"abcd"`.
+
+```js
+assert.equal(strip('\ba\x00b\n\rc\fd\xc3'), 'abcd');
+```
+
+`strip("\u0000\n abc\u00E9def\u007F")` should return `" abcdef"`.
+
+```js
+assert.equal(strip('\u0000\n abc\u00E9def\u007F'), ' abcdef');
+```
+
+`strip("a\n\tb\u2102d\u2147f")` should return `"abdf"`.
+
+```js
+assert.equal(strip('a\n\tb\u2102d\u2147f'), 'abdf');
+```
+
+`strip("Français.")` should return `"Franais."`.
+
+```js
+assert.equal(strip('Français.'), 'Franais.');
+```
+
+`strip("123\tabc\u0007DEF\u007F+-*/€æŧðłþ")` should return `"123abcDEF+-*/"`.
+
+```js
+assert.equal(strip('123\tabc\u0007DEF\u007F+-*/€æŧðłþ'), '123abcDEF+-*/');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function strip(s) {
+
+}
+```
+
+# --solutions--
+
+```js
+function strip(s) {
+  return s
+    .split('')
+    .filter(function(x) {
+      var n = x.charCodeAt(0);
+
+      return 31 < n && 127 > n;
+    })
+    .join('');
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/subleq.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/subleq.md
new file mode 100644
index 00000000000..1dc7987cf77
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/subleq.md
@@ -0,0 +1,178 @@
+---
+id: 5a23c84252665b21eecc8038
+title: Subleq
+challengeType: 1
+forumTopicId: 302328
+dashedName: subleq
+---
+
+# --description--
+
+Subleq is an example of a One-Instruction Set Computer (OISC).
+
+It is named after its only instruction, which is **SU**btract and **B**ranch if **L**ess than or **EQ**ual to zero.
+
+Your task is to create an interpreter which emulates such a machine.
+
+The machine's memory consists of an array of signed integers. Any reasonable word size is fine, but the memory must be able to hold negative as well as positive numbers.
+
+Execution begins with the instruction pointer aimed at the first word, which is address 0. It proceeds as follows:
+
+<ol>
+  <li>Let A, B, and C be the value stored in the three consecutive words in memory starting at the instruction pointer.</li>
+  <li>Advance the instruction pointer 3 words to point at the address after the one containing C.</li>
+  <li>If A is -1, then a character is read from standard input and its code point stored in the address given by B. C is unused.</li>
+  <li>If B is -1, then the number contained in the address given by A is interpreted as a code point and the corresponding character output. C is again unused.</li>
+  <li>Otherwise, both A and B are treated as the addresses of memory locations. The number contained in the address given by A is subtracted from the number at the address given by B (and the result stored back in address B). If the result is zero or negative, the value C becomes the new instruction pointer.</li>
+  <li>If the instruction pointer becomes negative, execution halts.</li>
+</ol>
+
+Other negative addresses besides -1 may be treated as equivalent to -1, or generate an error, as you see fit.
+
+Your solution should accept a program to execute on the machine, separately from the input fed to the program itself.
+
+This program should be in raw subleq "machine code" - whitespace-separated decimal numbers, with no symbolic names or other assembly-level extensions, to be loaded into memory starting at address 0. Show the output of your solution when fed this "Hello, world!" program. (Note that the example assumes ASCII or a superset of it, such as any of the Latin-N character sets or Unicode. You may translate it into another character set if your implementation is on a non-ASCiI-compatible environment.)
+
+<pre>15 17 -1 17 -1 -1 16 1 -1 16 3 -1 15 15 0 0 -1 72 101 108 108 111 44 32 119 111 114 108 100 33 10 0</pre>
+
+Which corresponds to something like this in a hypothetical assembler language:
+
+<pre>start:
+    zero, message, -1
+    message, -1, -1
+    neg1, start+1, -1
+    neg1, start+3, -1
+    zero, zero, start
+zero: 0
+neg1: -1
+message: "Hello, world!\n\0"
+</pre>
+
+# --instructions--
+
+Write a function that takes an array of integers as a parameter. This represents the memory elements. The function should interpret the sequence and return the output string. For this task, assume that there is no standard input.
+
+# --hints--
+
+`Subleq` should be a function.
+
+```js
+assert(typeof Subleq == 'function');
+```
+
+`Subleq([15, 17, -1, 17, -1, -1, 16, 1, -1, 16, 3, -1, 15, 15, 0, 0, -1, 72, 101, 108, 108, 111, 44, 32, 119, 111, 114, 108, 100, 33, 0])` should return a string.
+
+```js
+assert(
+  typeof Subleq([
+    15,
+    17,
+    -1,
+    17,
+    -1,
+    -1,
+    16,
+    1,
+    -1,
+    16,
+    3,
+    -1,
+    15,
+    15,
+    0,
+    0,
+    -1,
+    72,
+    101,
+    108,
+    108,
+    111,
+    44,
+    32,
+    119,
+    111,
+    114,
+    108,
+    100,
+    33,
+    0
+  ]) == 'string'
+);
+```
+
+`Subleq([15, 17, -1, 17, -1, -1, 16, 1, -1, 16, 3, -1, 15, 15, 0, 0, -1, 72, 101, 108, 108, 111, 44, 32, 119, 111, 114, 108, 100, 33, 0])` should return `"Hello, world!"`.
+
+```js
+assert.equal(
+  Subleq([
+    15,
+    17,
+    -1,
+    17,
+    -1,
+    -1,
+    16,
+    1,
+    -1,
+    16,
+    3,
+    -1,
+    15,
+    15,
+    0,
+    0,
+    -1,
+    72,
+    101,
+    108,
+    108,
+    111,
+    44,
+    32,
+    119,
+    111,
+    114,
+    108,
+    100,
+    33,
+    0
+  ]),
+  'Hello, world!'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function Subleq(mem) {
+
+}
+```
+
+# --solutions--
+
+```js
+function Subleq(mem) {
+  var out = '';
+  var instructionPointer = 0;
+  do {
+    var a = mem[instructionPointer];
+    var b = mem[instructionPointer + 1];
+    if (a === -1) {
+    } else if (b === -1) {
+      out += String.fromCharCode(mem[a]);
+    } else {
+      mem[b] -= mem[a];
+      if (mem[b] < 1) {
+        instructionPointer = mem[instructionPointer + 2];
+        continue;
+      }
+    }
+    instructionPointer += 3;
+  } while (instructionPointer >= 0);
+
+  return out;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sudoku.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sudoku.md
new file mode 100644
index 00000000000..01bdc0854df
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sudoku.md
@@ -0,0 +1,321 @@
+---
+id: 5a23c84252665b21eecc803c
+title: Sudoku
+challengeType: 1
+forumTopicId: 302329
+dashedName: sudoku
+---
+
+# --description--
+
+Write a function to solve a partially filled-in normal 9x9 Sudoku grid and return the result. The blank fields are represented by `-1`.
+
+# --hints--
+
+`solveSudoku` should be a function.
+
+```js
+assert(typeof solveSudoku == 'function');
+```
+
+`solveSudoku([[8, 1, 9, -1, -1, 5, -1, -1, -1],[-1, -1, 2, -1, -1, -1, 7, 5, -1],[-1, 3, 7, 1, -1, 4, -1, 6, -1],[4, -1, -1, 5, 9, -1, 1, -1, -1],[7, -1, -1, 3, -1, 8, -1, -1, 2],[-1, -1, 3, -1, 6, 2, -1, -1, 7],[-1, 5, -1, 7, -1, 9, 2, 1, -1],[-1, 6, 4, -1, -1, -1, 9, -1, -1],[-1, -1, -1, 2, -1, -1, 4, 3, 8]])` should return an array.
+
+```js
+assert(
+  Array.isArray(
+    solveSudoku([
+      [8, 1, 9, -1, -1, 5, -1, -1, -1],
+      [-1, -1, 2, -1, -1, -1, 7, 5, -1],
+      [-1, 3, 7, 1, -1, 4, -1, 6, -1],
+      [4, -1, -1, 5, 9, -1, 1, -1, -1],
+      [7, -1, -1, 3, -1, 8, -1, -1, 2],
+      [-1, -1, 3, -1, 6, 2, -1, -1, 7],
+      [-1, 5, -1, 7, -1, 9, 2, 1, -1],
+      [-1, 6, 4, -1, -1, -1, 9, -1, -1],
+      [-1, -1, -1, 2, -1, -1, 4, 3, 8]
+    ])
+  )
+);
+```
+
+`solveSudoku([[8, 1, 9, -1, -1, 5, -1, -1, -1],[-1, -1, 2, -1, -1, -1, 7, 5, -1],[-1, 3, 7, 1, -1, 4, -1, 6, -1],[4, -1, -1, 5, 9, -1, 1, -1, -1],[7, -1, -1, 3, -1, 8, -1, -1, 2],[-1, -1, 3, -1, 6, 2, -1, -1, 7],[-1, 5, -1, 7, -1, 9, 2, 1, -1],[-1, 6, 4, -1, -1, -1, 9, -1, -1],[-1, -1, -1, 2, -1, -1, 4, 3, 8]])` should return `[[8, 1, 9, 6, 7, 5, 3, 2, 4],[6, 4, 2, 9, 8, 3, 7, 5, 1],[5, 3, 7, 1, 2, 4, 8, 6, 9],[4, 2, 6, 5, 9, 7, 1, 8, 3],[7, 9, 5, 3, 1, 8, 6, 4, 2],[1, 8, 3, 4, 6, 2, 5, 9, 7],[3, 5, 8, 7, 4, 9, 2, 1, 6],[2, 6, 4, 8, 3, 1, 9, 7, 5],[9, 7, 1, 2, 5, 6, 4, 3, 8]]`.
+
+```js
+assert.deepEqual(
+  solveSudoku([
+    [8, 1, 9, -1, -1, 5, -1, -1, -1],
+    [-1, -1, 2, -1, -1, -1, 7, 5, -1],
+    [-1, 3, 7, 1, -1, 4, -1, 6, -1],
+    [4, -1, -1, 5, 9, -1, 1, -1, -1],
+    [7, -1, -1, 3, -1, 8, -1, -1, 2],
+    [-1, -1, 3, -1, 6, 2, -1, -1, 7],
+    [-1, 5, -1, 7, -1, 9, 2, 1, -1],
+    [-1, 6, 4, -1, -1, -1, 9, -1, -1],
+    [-1, -1, -1, 2, -1, -1, 4, 3, 8]
+  ]),
+  [
+    [8, 1, 9, 6, 7, 5, 3, 2, 4],
+    [6, 4, 2, 9, 8, 3, 7, 5, 1],
+    [5, 3, 7, 1, 2, 4, 8, 6, 9],
+    [4, 2, 6, 5, 9, 7, 1, 8, 3],
+    [7, 9, 5, 3, 1, 8, 6, 4, 2],
+    [1, 8, 3, 4, 6, 2, 5, 9, 7],
+    [3, 5, 8, 7, 4, 9, 2, 1, 6],
+    [2, 6, 4, 8, 3, 1, 9, 7, 5],
+    [9, 7, 1, 2, 5, 6, 4, 3, 8]
+  ]
+);
+```
+
+`solveSudoku([[5, 3, -1, -1, 2, 4, 7, -1, -1],[-1, -1, 2, -1, -1, -1, 8, -1, -1],[1, -1, -1, 7, -1, 3, 9, -1, 2],[-1, -1, 8, -1, 7, 2, -1, 4, 9],[-1, 2, -1, 9, 8, -1, -1, 7, -1],[7, 9, -1, -1, -1, -1, -1, 8, -1],[-1, -1, -1, -1, 3, -1, 5, -1, 6],[9, 6, -1, -1, 1, -1, 3, -1, -1],[-1, 5, -1, 6, 9, -1, -1, 1, -1]])` should return `[[5, 3, 9, 8, 2, 4, 7, 6, 1],[6, 7, 2, 1, 5, 9, 8, 3, 4],[1, 8, 4, 7, 6, 3, 9, 5, 2],[3, 1, 8, 5, 7, 2, 6, 4, 9],[4, 2, 5, 9, 8, 6, 1, 7, 3],[7, 9, 6, 3, 4, 1, 2, 8, 5],[8, 4, 1, 2, 3, 7, 5, 9, 6],[9, 6, 7, 4, 1, 5, 3, 2, 8],[2, 5, 3, 6, 9, 8, 4, 1, 7]]`.
+
+```js
+assert.deepEqual(
+  solveSudoku([
+    [5, 3, -1, -1, 2, 4, 7, -1, -1],
+    [-1, -1, 2, -1, -1, -1, 8, -1, -1],
+    [1, -1, -1, 7, -1, 3, 9, -1, 2],
+    [-1, -1, 8, -1, 7, 2, -1, 4, 9],
+    [-1, 2, -1, 9, 8, -1, -1, 7, -1],
+    [7, 9, -1, -1, -1, -1, -1, 8, -1],
+    [-1, -1, -1, -1, 3, -1, 5, -1, 6],
+    [9, 6, -1, -1, 1, -1, 3, -1, -1],
+    [-1, 5, -1, 6, 9, -1, -1, 1, -1]
+  ]),
+  [
+    [5, 3, 9, 8, 2, 4, 7, 6, 1],
+    [6, 7, 2, 1, 5, 9, 8, 3, 4],
+    [1, 8, 4, 7, 6, 3, 9, 5, 2],
+    [3, 1, 8, 5, 7, 2, 6, 4, 9],
+    [4, 2, 5, 9, 8, 6, 1, 7, 3],
+    [7, 9, 6, 3, 4, 1, 2, 8, 5],
+    [8, 4, 1, 2, 3, 7, 5, 9, 6],
+    [9, 6, 7, 4, 1, 5, 3, 2, 8],
+    [2, 5, 3, 6, 9, 8, 4, 1, 7]
+  ]
+);
+```
+
+`solveSudoku([[-1, -1, 3, -1, 2, -1, 6, -1, -1],[9, -1, -1, 3, -1, 5, -1, -1, 1],[-1, -1, 1, 8, -1, 6, 4, -1, -1],[-1, -1, 8, 1, -1, 2, 9, -1, -1],[7, -1, -1, -1, -1, -1, -1, -1, 8],[-1, -1, 6, 7, -1, 8, 2, -1, -1],[-1, -1, 2, 6, -1, 9, 5, -1, -1],[8, -1, -1, 2, -1, 3, -1, -1, 9],[-1, -1, 5, -1, 1, -1, 3, -1, -1]])` should return `[[4, 8, 3, 9, 2, 1, 6, 5, 7],[9, 6, 7, 3, 4, 5, 8, 2, 1],[2, 5, 1, 8, 7, 6, 4, 9, 3],[5, 4, 8, 1, 3, 2, 9, 7, 6],[7, 2, 9, 5, 6, 4, 1, 3, 8],[1, 3, 6, 7, 9, 8, 2, 4, 5],[3, 7, 2, 6, 8, 9, 5, 1, 4],[8, 1, 4, 2, 5, 3, 7, 6, 9],[6, 9, 5, 4, 1, 7, 3, 8, 2]]`.
+
+```js
+assert.deepEqual(
+  solveSudoku([
+    [-1, -1, 3, -1, 2, -1, 6, -1, -1],
+    [9, -1, -1, 3, -1, 5, -1, -1, 1],
+    [-1, -1, 1, 8, -1, 6, 4, -1, -1],
+    [-1, -1, 8, 1, -1, 2, 9, -1, -1],
+    [7, -1, -1, -1, -1, -1, -1, -1, 8],
+    [-1, -1, 6, 7, -1, 8, 2, -1, -1],
+    [-1, -1, 2, 6, -1, 9, 5, -1, -1],
+    [8, -1, -1, 2, -1, 3, -1, -1, 9],
+    [-1, -1, 5, -1, 1, -1, 3, -1, -1]
+  ]),
+  [
+    [4, 8, 3, 9, 2, 1, 6, 5, 7],
+    [9, 6, 7, 3, 4, 5, 8, 2, 1],
+    [2, 5, 1, 8, 7, 6, 4, 9, 3],
+    [5, 4, 8, 1, 3, 2, 9, 7, 6],
+    [7, 2, 9, 5, 6, 4, 1, 3, 8],
+    [1, 3, 6, 7, 9, 8, 2, 4, 5],
+    [3, 7, 2, 6, 8, 9, 5, 1, 4],
+    [8, 1, 4, 2, 5, 3, 7, 6, 9],
+    [6, 9, 5, 4, 1, 7, 3, 8, 2]
+  ]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function solveSudoku(puzzle) {
+
+}
+```
+
+# --solutions--
+
+```js
+function solveSudoku(puzzle) {
+  var solution;
+
+  class DoX {
+    constructor(V, H) {
+      this.V = V;
+      this.L = this;
+      this.R = this;
+      this.U = this;
+      this.D = this;
+      this.S = 1;
+      this.H = H || this;
+      H && (H.S += 1);
+    }
+  }
+
+  const addRight = (e, n) => {
+    n.R = e.R;
+    n.L = e;
+    e.R.L = n;
+    return (e.R = n);
+  };
+
+  const addBelow = (e, n) => {
+    n.D = e.D;
+    n.U = e;
+    e.D.U = n;
+    return (e.D = n);
+  };
+
+  const search = function(h, s) {
+    if (h.R == h) {
+      printSol(s);
+    } else {
+      let c = chooseColumn(h);
+      cover(c);
+      for (let r = c.D; r != c; r = r.D) {
+        s.push(r);
+        for (let j = r.R; r != j; j = j.R) {
+          cover(j.H);
+        }
+        search(h, s);
+        r = s.pop();
+        for (let j = r.R; j != r; j = j.R) {
+          uncover(j.H);
+        }
+      }
+      uncover(c);
+    }
+  };
+
+  const chooseColumn = h => {
+    let s = Number.POSITIVE_INFINITY;
+    let c = h;
+    for (let j = h.R; j != h; j = j.R) {
+      if (j.S < s) {
+        c = j;
+        s = j.S;
+      }
+    }
+    return c;
+  };
+
+  const cover = c => {
+    c.L.R = c.R;
+    c.R.L = c.L;
+    for (let i = c.D; i != c; i = i.D) {
+      for (let j = i.R; j != i; j = j.R) {
+        j.U.D = j.D;
+        j.D.U = j.U;
+        j.H.S = j.H.S - 1;
+      }
+    }
+  };
+
+  const uncover = c => {
+    for (let i = c.U; i != c; i = i.U) {
+      for (let j = i.L; i != j; j = j.L) {
+        j.H.S = j.H.S + 1;
+        j.U.D = j;
+        j.D.U = j;
+      }
+    }
+    c.L.R = c;
+    c.R.L = c;
+  };
+
+  const printSol = a => {
+    solution = a.reduce((p, c) => {
+      let [i, v] = c.V.split(':');
+      p[i * 1] = v;
+      return p;
+    }, new Array(a.length).fill('.'));
+  };
+
+  const gridMeta = s => {
+    const g = s.split('');
+    const cellCount = g.length;
+    const tokenCount = Math.sqrt(cellCount);
+    const N = Math.sqrt(tokenCount);
+    const g2D = g.map(e =>
+      isNaN(e * 1)
+        ? new Array(tokenCount).fill(1).map((_, i) => i + 1)
+        : [e * 1]
+    );
+    return [cellCount, N, tokenCount, g2D];
+  };
+
+  const indexesN = n => i => {
+    let c = Math.floor(i / (n * n));
+    i %= n * n;
+    return [c, i, Math.floor(c / n) * n + Math.floor(i / n)];
+  };
+
+  const reduceGrid = puzString => {
+    const [
+      numCells, // The total number of cells in a grid (81 for a 9x9 grid)
+      N, // the 'n' value of the grid. (3 for a 9x9 grid)
+      U, // The total number of unique tokens to be placed.
+      g2D // A 2D array representation of the grid, with each element
+      // being an array of candidates for a cell. Known cells are
+      // single element arrays.
+    ] = gridMeta(puzString);
+
+    const getIndex = indexesN(N);
+
+    const headRow = new Array(4 * numCells)
+      .fill('')
+      .map((_, i) => new DoX(`H${i}`));
+
+    let H = new DoX('ROOT');
+    headRow.reduce((p, c) => addRight(p, c), H);
+
+    for (let i = 0; i < numCells; i++) {
+      const [ri, ci, bi] = getIndex(i);
+      g2D[i].forEach(num => {
+        let id = `${i}:${num}`;
+        let candIdx = num - 1;
+
+        // The 4 columns that we will populate.
+        const A = headRow[i];
+        const B = headRow[numCells + candIdx + ri * U];
+        const C = headRow[numCells * 2 + candIdx + ci * U];
+        const D = headRow[numCells * 3 + candIdx + bi * U];
+
+        // The Row-Column Constraint
+        let rcc = addBelow(A.U, new DoX(id, A));
+
+        // The Row-Number Constraint
+        let rnc = addBelow(B.U, addRight(rcc, new DoX(id, B)));
+
+        // The Column-Number Constraint
+        let cnc = addBelow(C.U, addRight(rnc, new DoX(id, C)));
+
+        // The Block-Number Constraint
+        addBelow(D.U, addRight(cnc, new DoX(id, D)));
+      });
+    }
+    search(H, []);
+  };
+
+  var stringPuzzle = '';
+
+  for (var i = 0; i < puzzle.length; i++) {
+    puzzle[i].forEach(function(e) {
+      if (e == -1) stringPuzzle += '.';
+      else stringPuzzle += e;
+    });
+  }
+
+  reduceGrid(stringPuzzle);
+
+  var result = [];
+
+  for (var i = 0; i < 9; i++) {
+    result.push(solution.slice(i * 9, (i + 1) * 9).map(e => parseInt(e)));
+  }
+
+  return result;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-digits-of-an-integer.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-digits-of-an-integer.md
new file mode 100644
index 00000000000..077d606d4c7
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-digits-of-an-integer.md
@@ -0,0 +1,89 @@
+---
+id: 5a23c84252665b21eecc803f
+title: Sum digits of an integer
+challengeType: 1
+forumTopicId: 302331
+dashedName: sum-digits-of-an-integer
+---
+
+# --description--
+
+Write a function that takes a string as a parameter. This string represents a number that can be in any base (less than 37) and return the sum of its digits.
+
+<ul>
+  <li><b>1</b><sub>10</sub> sums to <b>1</b></li>
+  <li><b>1234</b><sub>10</sub> sums to <b>10</b></li>
+  <li><b>fe</b><sub>16</sub> sums to <b>29</b></li>
+  <li><b>f0e</b><sub>16</sub> sums to <b>29</b></li>
+</ul>
+
+# --hints--
+
+`sumDigits` should be a function.
+
+```js
+assert(typeof sumDigits == 'function');
+```
+
+`sumDigits("1")` should return a number.
+
+```js
+assert(typeof sumDigits('1') == 'number');
+```
+
+`sumDigits("1")` should return `1`.
+
+```js
+assert.equal(sumDigits('1'), 1);
+```
+
+`sumDigits("12345")` should return `15`.
+
+```js
+assert.equal(sumDigits('12345'), 15);
+```
+
+`sumDigits("254")` should return `11`.
+
+```js
+assert.equal(sumDigits('254'), 11);
+```
+
+`sumDigits("fe")` should return `29`.
+
+```js
+assert.equal(sumDigits('fe'), 29);
+```
+
+`sumDigits("f0e")` should return `29`.
+
+```js
+assert.equal(sumDigits('f0e'), 29);
+```
+
+`sumDigits("999ABCXYZ")` should return `162`.
+
+```js
+assert.equal(sumDigits('999ABCXYZ'), 162);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumDigits(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function sumDigits(n) {
+  n += '';
+  for (var s = 0, i = 0, e = n.length; i < e; i += 1)
+    s += parseInt(n.charAt(i), 36);
+  return s;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-multiples-of-3-and-5.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-multiples-of-3-and-5.md
new file mode 100644
index 00000000000..d5f7e93da8f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-multiples-of-3-and-5.md
@@ -0,0 +1,77 @@
+---
+id: 5a23c84252665b21eecc8040
+title: Sum multiples of 3 and 5
+challengeType: 1
+forumTopicId: 302332
+dashedName: sum-multiples-of-3-and-5
+---
+
+# --description--
+
+The objective is to write a function that finds the sum of all positive multiples of 3 or 5 below *n*.
+
+# --hints--
+
+`sumMults` should be a function.
+
+```js
+assert(typeof sumMults == 'function');
+```
+
+`sumMults(10)` should return a number.
+
+```js
+assert(typeof sumMults(10) == 'number');
+```
+
+`sumMults(10)` should return `23`.
+
+```js
+assert.equal(sumMults(10), 23);
+```
+
+`sumMults(100)` should return `2318`.
+
+```js
+assert.equal(sumMults(100), 2318);
+```
+
+`sumMults(1000)` should return `233168`.
+
+```js
+assert.equal(sumMults(1000), 233168);
+```
+
+`sumMults(10000)` should return `23331668`.
+
+```js
+assert.equal(sumMults(10000), 23331668);
+```
+
+`sumMults(100000)` should return `2333316668`.
+
+```js
+assert.equal(sumMults(100000), 2333316668);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumMults(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function sumMults(n) {
+  var sum = 0;
+  for (var i = 1; i < n; i++) {
+    if (i % 3 == 0 || i % 5 == 0) sum += i;
+  }
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-of-a-series.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-of-a-series.md
new file mode 100644
index 00000000000..7d649eee959
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-of-a-series.md
@@ -0,0 +1,82 @@
+---
+id: 5a23c84252665b21eecc8041
+title: Sum of a series
+challengeType: 1
+forumTopicId: 302333
+dashedName: sum-of-a-series
+---
+
+# --description--
+
+Compute the **n**<sup>th</sup> term of a <em>series</em>, i.e. the sum of the **n** first terms of the corresponding <em>sequence</em>. Informally this value, or its limit when **n** tends to infinity, is also called the *sum of the series*, thus the title of this task. For this task, use: $S_n = \displaystyle\sum_{k=1}^n \frac{1}{k^2}$.
+
+# --instructions--
+
+Write a function that take $a$ and $b$ as parameters and returns the sum of $a^{th}$ to $b^{th}$ members of the sequence.
+
+# --hints--
+
+`sum` should be a function.
+
+```js
+assert(typeof sum == 'function');
+```
+
+`sum(1, 100)` should return a number.
+
+```js
+assert(typeof sum(1, 100) == 'number');
+```
+
+`sum(1, 100)` should return `1.6349839001848923`.
+
+```js
+assert.equal(sum(1, 100), 1.6349839001848923);
+```
+
+`sum(33, 46)` should return `0.009262256361481223`.
+
+```js
+assert.equal(sum(33, 46), 0.009262256361481223);
+```
+
+`sum(21, 213)` should return `0.044086990748706555`.
+
+```js
+assert.equal(sum(21, 213), 0.044086990748706555);
+```
+
+`sum(11, 111)` should return `0.08619778593108679`.
+
+```js
+assert.equal(sum(11, 111), 0.08619778593108679);
+```
+
+`sum(1, 10)` should return `1.5497677311665408`.
+
+```js
+assert.equal(sum(1, 10), 1.5497677311665408);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sum(a, b) {
+
+}
+```
+
+# --solutions--
+
+```js
+function sum(a, b) {
+  function fn(x) {
+    return 1 / (x * x);
+  }
+  var s = 0;
+  for (; a <= b; a++) s += fn(a);
+  return s;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-of-squares.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-of-squares.md
new file mode 100644
index 00000000000..ee55a5bfea5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-of-squares.md
@@ -0,0 +1,79 @@
+---
+id: 5a23c84252665b21eecc8042
+title: Sum of squares
+challengeType: 1
+forumTopicId: 302334
+dashedName: sum-of-squares
+---
+
+# --description--
+
+Write a function to find the sum of squares of an array of integers.
+
+# --hints--
+
+`sumsq` should be a function.
+
+```js
+assert(typeof sumsq == 'function');
+```
+
+`sumsq([1, 2, 3, 4, 5])` should return a number.
+
+```js
+assert(typeof sumsq([1, 2, 3, 4, 5]) == 'number');
+```
+
+`sumsq([1, 2, 3, 4, 5])` should return `55`.
+
+```js
+assert.equal(sumsq([1, 2, 3, 4, 5]), 55);
+```
+
+`sumsq([25, 32, 12, 7, 20])` should return `2242`.
+
+```js
+assert.equal(sumsq([25, 32, 12, 7, 20]), 2242);
+```
+
+`sumsq([38, 45, 35, 8, 13])` should return `4927`.
+
+```js
+assert.equal(sumsq([38, 45, 35, 8, 13]), 4927);
+```
+
+`sumsq([43, 36, 20, 34, 24])` should return `5277`.
+
+```js
+assert.equal(sumsq([43, 36, 20, 34, 24]), 5277);
+```
+
+`sumsq([12, 33, 26, 18, 1, 16, 3])` should return `2499`.
+
+```js
+assert.equal(sumsq([12, 33, 26, 18, 1, 16, 3]), 2499);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumsq(array) {
+
+}
+```
+
+# --solutions--
+
+```js
+function sumsq(array) {
+  var sum = 0;
+  var i, iLen;
+
+  for (i = 0, iLen = array.length; i < iLen; i++) {
+    sum += array[i] * array[i];
+  }
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-to-100.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-to-100.md
new file mode 100644
index 00000000000..e616195233d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sum-to-100.md
@@ -0,0 +1,180 @@
+---
+id: 5a23c84252665b21eecc8043
+title: Sum to 100
+challengeType: 1
+forumTopicId: 302335
+dashedName: sum-to-100
+---
+
+# --description--
+
+Find solutions to the *sum to one hundred* puzzle.
+
+Add (insert) the mathematical operators **+** or **─** (plus or minus) before any of the digits in the decimal numeric string **123456789** such that the resulting mathematical expression adds up to a particular sum (in this iconic case, **100**).
+
+Example:
+
+<pre><b>123 + 4 - 5 + 67 - 89   =   100</b></pre>
+
+# --instructions--
+
+Write a function that takes a number as parameter. The function should return an array containing all solutions for the given number. The solutions should be strings representing the expressions. For example: "1+23-456+78-9". Sort the array before returning it.
+
+# --hints--
+
+`sumTo100` should be a function.
+
+```js
+assert(typeof sumTo100 == 'function');
+```
+
+`sumTo100(199)` should return an array.
+
+```js
+assert(Array.isArray(sumTo100(199)));
+```
+
+`sumTo100(199)` should return `["-1+2-3+45+67+89", "123-4+5+6+78-9", "123-4+56+7+8+9"]`.
+
+```js
+assert.deepEqual(sumTo100(199), [
+  '-1+2-3+45+67+89',
+  '123-4+5+6+78-9',
+  '123-4+56+7+8+9'
+]);
+```
+
+`sumTo100(209)` should return `["1+234+56+7-89"]`.
+
+```js
+assert.deepEqual(sumTo100(209), ['1+234+56+7-89']);
+```
+
+`sumTo100(243)` should return `["-1-234+567-89", "-12+345+6-7-89", "123+45+6+78-9"]`.
+
+```js
+assert.deepEqual(sumTo100(243), [
+  '-1-234+567-89',
+  '-12+345+6-7-89',
+  '123+45+6+78-9'
+]);
+```
+
+`sumTo100(197)` should return `["1-2-3+45+67+89", "12+34-5+67+89", "123+4-5+6+78-9"]`.
+
+```js
+assert.deepEqual(sumTo100(197), [
+  '1-2-3+45+67+89',
+  '12+34-5+67+89',
+  '123+4-5+6+78-9'
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function sumTo100(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function sumTo100(n) {
+  var permutationsWithRepetition = function(n, as) {
+    return as.length > 0
+      ? foldl1(curry(cartesianProduct)(as), replicate(n, as))
+      : [];
+  };
+
+  var cartesianProduct = function(xs, ys) {
+    return [].concat.apply(
+      [],
+      xs.map(function(x) {
+        return [].concat.apply(
+          [],
+          ys.map(function(y) {
+            return [[x].concat(y)];
+          })
+        );
+      })
+    );
+  };
+
+  var curry = function(f) {
+    return function(a) {
+      return function(b) {
+        return f(a, b);
+      };
+    };
+  };
+
+  var flip = function(f) {
+    return function(a, b) {
+      return f.apply(null, [b, a]);
+    };
+  };
+
+  var foldl1 = function(f, xs) {
+    return xs.length > 0 ? xs.slice(1).reduce(f, xs[0]) : [];
+  };
+
+  var replicate = function(n, a) {
+    var v = [a],
+      o = [];
+    if (n < 1) return o;
+    while (n > 1) {
+      if (n & 1) o = o.concat(v);
+      n >>= 1;
+      v = v.concat(v);
+    }
+    return o.concat(v);
+  };
+
+  var asSum = function(xs) {
+    var dct = xs.reduceRight(
+      function(a, sign, i) {
+        var d = i + 1; //  zero-based index to [1-9] positions
+        if (sign !== 0) {
+          // Sum increased, digits cleared
+          return {
+            digits: [],
+            n: a.n + sign * parseInt([d].concat(a.digits).join(''), 10)
+          };
+        } else
+          return {
+            // Digits extended, sum unchanged
+            digits: [d].concat(a.digits),
+            n: a.n
+          };
+      },
+      {
+        digits: [],
+        n: 0
+      }
+    );
+    return (
+      dct.n + (dct.digits.length > 0 ? parseInt(dct.digits.join(''), 10) : 0)
+    );
+  };
+
+  var asString = function(xs) {
+    var ns = xs.reduce(function(a, sign, i) {
+      var d = (i + 1).toString();
+      return sign === 0 ? a + d : a + (sign > 0 ? '+' : '-') + d;
+    }, '');
+
+    return ns[0] === '+' ? tail(ns) : ns;
+  };
+
+  var universe = permutationsWithRepetition(9, [0, 1, -1])
+    .filter(function(x) {
+      return x[0] !== 1 && asSum(x) === n;
+    })
+    .map(asString);
+  return universe.sort();
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sutherland-hodgman-polygon-clipping.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sutherland-hodgman-polygon-clipping.md
new file mode 100644
index 00000000000..50ad887d282
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/sutherland-hodgman-polygon-clipping.md
@@ -0,0 +1,199 @@
+---
+id: 5a23c84252665b21eecc8045
+title: Sutherland-Hodgman polygon clipping
+challengeType: 1
+forumTopicId: 302336
+dashedName: sutherland-hodgman-polygon-clipping
+---
+
+# --description--
+
+The Sutherland-Hodgman clipping algorithm finds the polygon that is the intersection between an arbitrary polygon (the "subject polygon") and a convex polygon (the "clip polygon"). It is used in computer graphics (especially 2D graphics) to reduce the complexity of a scene being displayed by eliminating parts of a polygon that do not need to be displayed. Take the closed polygon defined by the points:
+
+<pre>[(50, 150), (200, 50), (350, 150), (350, 300), (250, 300), (200, 250), (150, 350), (100, 250), (100, 200)]</pre>
+
+and clip it by the rectangle defined by the points:
+
+<pre>[(100, 100), (300, 100), (300, 300), (100, 300)]</pre>
+
+# --instructions--
+
+Write a function that takes 2 arrays as parameters. The first array contains the points of the subject polygon and the second array contains the points of the clipping polygon. The function should return an array containing the points of the clipped polygon. Each number should be rounded to 3 decimal places.
+
+# --hints--
+
+`clip` should be a function.
+
+```js
+assert(typeof clip == 'function');
+```
+
+`clip([[50, 150], [200, 50], [350, 150], [350, 300], [250, 300], [200, 250], [150, 350], [100, 250], [100, 200]], [[100, 100], [300, 100], [300, 300], [100, 300]])` should return an array.
+
+```js
+assert(
+  Array.isArray(
+    clip(
+      [
+        [50, 150],
+        [200, 50],
+        [350, 150],
+        [350, 300],
+        [250, 300],
+        [200, 250],
+        [150, 350],
+        [100, 250],
+        [100, 200]
+      ],
+      [
+        [100, 100],
+        [300, 100],
+        [300, 300],
+        [100, 300]
+      ]
+    )
+  )
+);
+```
+
+`clip([[50, 150], [200, 50], [350, 150], [350, 300], [250, 300], [200, 250], [150, 350], [100, 250], [100, 200]], [[100, 100], [300, 100], [300, 300], [100, 300]])` should return `[[100, 116.667], [125, 100], [275, 100], [300, 116.667], [300, 300], [250, 300], [200, 250], [175, 300], [125, 300], [100, 250]]`.
+
+```js
+assert.deepEqual(
+  clip(
+    [
+      [50, 150],
+      [200, 50],
+      [350, 150],
+      [350, 300],
+      [250, 300],
+      [200, 250],
+      [150, 350],
+      [100, 250],
+      [100, 200]
+    ],
+    [
+      [100, 100],
+      [300, 100],
+      [300, 300],
+      [100, 300]
+    ]
+  ),
+  [
+    [100, 116.667],
+    [125, 100],
+    [275, 100],
+    [300, 116.667],
+    [300, 300],
+    [250, 300],
+    [200, 250],
+    [175, 300],
+    [125, 300],
+    [100, 250]
+  ]
+);
+```
+
+`clip([[150, 200], [400, 450], [30, 50]], [[10, 10], [300, 200], [400, 600], [100, 300]])` should return `[[150, 200], [350, 400], [348.611, 394.444], [30, 50]]`.
+
+```js
+assert.deepEqual(
+  clip(
+    [
+      [150, 200],
+      [400, 450],
+      [30, 50]
+    ],
+    [
+      [10, 10],
+      [300, 200],
+      [400, 600],
+      [100, 300]
+    ]
+  ),
+  [
+    [150, 200],
+    [350, 400],
+    [348.611, 394.444],
+    [30, 50]
+  ]
+);
+```
+
+`clip([[250, 200], [100, 450], [130, 250]], [[50, 60], [100, 230], [400, 600], [100, 300]])` should return `[[129.167, 329.167], [119.565, 319.565], [121.854, 304.305]]`.
+
+```js
+assert.deepEqual(
+  clip(
+    [
+      [250, 200],
+      [100, 450],
+      [130, 250]
+    ],
+    [
+      [50, 60],
+      [100, 230],
+      [400, 600],
+      [100, 300]
+    ]
+  ),
+  [
+    [129.167, 329.167],
+    [119.565, 319.565],
+    [121.854, 304.305]
+  ]
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function clip(subjectPolygon, clipPolygon) {
+
+}
+```
+
+# --solutions--
+
+```js
+function clip(subjectPolygon, clipPolygon) {
+  var cp1, cp2, s, e, i, j;
+  var inside = function(p) {
+    return (
+      (cp2[0] - cp1[0]) * (p[1] - cp1[1]) > (cp2[1] - cp1[1]) * (p[0] - cp1[0])
+    );
+  };
+  var intersection = function() {
+    var dc = [cp1[0] - cp2[0], cp1[1] - cp2[1]],
+      dp = [s[0] - e[0], s[1] - e[1]],
+      n1 = cp1[0] * cp2[1] - cp1[1] * cp2[0],
+      n2 = s[0] * e[1] - s[1] * e[0],
+      n3 = 1.0 / (dc[0] * dp[1] - dc[1] * dp[0]);
+    return [(n1 * dp[0] - n2 * dc[0]) * n3, (n1 * dp[1] - n2 * dc[1]) * n3];
+  };
+  var outputList = subjectPolygon;
+  cp1 = clipPolygon[clipPolygon.length - 1];
+  for (j in clipPolygon) {
+    var cp2 = clipPolygon[j];
+    var inputList = outputList;
+    outputList = [];
+    s = inputList[inputList.length - 1]; //last on the input list
+    for (i in inputList) {
+      var e = inputList[i];
+      if (inside(e)) {
+        if (!inside(s)) {
+          outputList.push(intersection());
+        }
+        outputList.push(e);
+      } else if (inside(s)) {
+        outputList.push(intersection());
+      }
+      s = e;
+    }
+    cp1 = cp2;
+  }
+  return outputList.map(e => e.map(f => Math.round(f * 1000) / 1000));
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/symmetric-difference.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/symmetric-difference.md
new file mode 100644
index 00000000000..bf8d98a2c7f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/symmetric-difference.md
@@ -0,0 +1,125 @@
+---
+id: 5a23c84252665b21eecc8046
+title: Symmetric difference
+challengeType: 1
+forumTopicId: 16086
+dashedName: symmetric-difference
+---
+
+# --description--
+
+Given two sets *A* and *B*, compute $(A \\setminus B) \\cup (B \\setminus A).$ That is, enumerate the items that are in *A* or *B* but not both. This set is called the symmetric difference of *A* and *B*. In other words: $(A \\cup B) \\setminus (A \\cap B)$ (the set of items that are in at least one of *A* or *B* minus the set of items that are in both *A* and *B*).
+
+Example:
+
+For sets `A = [1, 2, 3]`, and `B = [1, 3, 4]`, the symmetric difference of *A* and *B* is `[2, 4]`.
+
+# --instructions--
+
+Write a function that takes two arrays as parameters and returns the symmetric difference. Sort the resultant array before returning it.
+
+# --hints--
+
+`symmetricDifference` should be a function.
+
+```js
+assert(typeof symmetricDifference == 'function');
+```
+
+`symmetricDifference(["John", "Bob", "Mary", "Serena"], ["Jim", "Mary", "John", "Bob"])` should return an array.
+
+```js
+assert(
+  Array.isArray(
+    symmetricDifference(
+      ['John', 'Bob', 'Mary', 'Serena'],
+      ['Jim', 'Mary', 'John', 'Bob']
+    )
+  )
+);
+```
+
+`symmetricDifference(["John", "Bob", "Mary", "Serena"], ["Jim", "Mary", "John", "Bob"])` should return `["Jim", "Serena"]`.
+
+```js
+assert.deepEqual(
+  symmetricDifference(
+    ['John', 'Bob', 'Mary', 'Serena'],
+    ['Jim', 'Mary', 'John', 'Bob']
+  ),
+  ['Jim', 'Serena']
+);
+```
+
+`symmetricDifference([1, 2, 3], [3, 4])` should return `[1, 2, 4]`.
+
+```js
+assert.deepEqual(symmetricDifference([1, 2, 3], [3, 4]), [1, 2, 4]);
+```
+
+`symmetricDifference([1, 2, 3, 4, 5], [3, 4, 8, 7])` should return `[1, 2, 5, 7, 8]`.
+
+```js
+assert.deepEqual(symmetricDifference([1, 2, 3, 4, 5], [3, 4, 8, 7]), [
+  1,
+  2,
+  5,
+  7,
+  8
+]);
+```
+
+`symmetricDifference([1, 2, 3, 4, 5, 6, 7, 8], [1, 3, 5, 6, 7, 8, 9])` should return `[2, 4, 9]`.
+
+```js
+assert.deepEqual(
+  symmetricDifference([1, 2, 3, 4, 5, 6, 7, 8], [1, 3, 5, 6, 7, 8, 9]),
+  [2, 4, 9]
+);
+```
+
+`symmetricDifference([1, 2, 4, 7, 9], [2, 3, 7, 8, 9])` should return `[1, 3, 4, 8]`.
+
+```js
+assert.deepEqual(symmetricDifference([1, 2, 4, 7, 9], [2, 3, 7, 8, 9]), [
+  1,
+  3,
+  4,
+  8
+]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function symmetricDifference(A, B) {
+
+}
+```
+
+# --solutions--
+
+```js
+function symmetricDifference(A, B) {
+  function relative_complement(A, B) {
+    return A.filter(function(elem) {
+      return B.indexOf(elem) == -1;
+    });
+  }
+
+  function unique(ary) {
+    var u = ary.concat().sort();
+    for (var i = 1; i < u.length; ) {
+      if (u[i - 1] === u[i]) u.splice(i, 1);
+      else i++;
+    }
+    return u;
+  }
+
+  return unique(
+    relative_complement(A, B).concat(relative_complement(B, A))
+  ).sort();
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/taxicab-numbers.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/taxicab-numbers.md
new file mode 100644
index 00000000000..e968d091577
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/taxicab-numbers.md
@@ -0,0 +1,133 @@
+---
+id: 594ecc0d9a8cf816e3340187
+title: Taxicab numbers
+challengeType: 1
+forumTopicId: 302337
+dashedName: taxicab-numbers
+---
+
+# --description--
+
+A taxicab number (the definition that is being used here) is a positive integer that can be expressed as the sum of two positive cubes in more than one way.
+
+The first taxicab number is `1729`, which is:
+
+1<sup>3</sup> + 12<sup>3</sup> and
+
+9<sup>3</sup> + 10<sup>3</sup>.
+
+Taxicab numbers are also known as:
+
+<ul>
+  <li>taxi numbers</li>
+  <li>taxi-cab numbers</li>
+  <li>taxi cab numbers</li>
+  <li>Hardy-Ramanujan numbers</li>
+</ul>
+
+# --instructions--
+
+Write a function that returns the lowest `n` taxicab numbers. For each of the taxicab numbers, show the number as well as its constituent cubes.
+
+# --hints--
+
+`taxicabNumbers` should be a function.
+
+```js
+assert(typeof taxicabNumbers === 'function');
+```
+
+`taxicabNumbers` should return an array.
+
+```js
+assert(typeof taxicabNumbers(2) === 'object');
+```
+
+`taxicabNumbers` should return an array of numbers.
+
+```js
+assert(typeof taxicabNumbers(100)[0] === 'number');
+```
+
+`taxicabNumbers(4)` should return [1729, 4104, 13832, 20683].
+
+```js
+assert.deepEqual(taxicabNumbers(4), res4);
+```
+
+`taxicabNumbers(25)` should return [1729, 4104, 13832, 20683, 32832, 39312, 40033, 46683, 64232, 65728, 110656, 110808, 134379, 149389, 165464, 171288, 195841, 216027, 216125, 262656, 314496, 320264, 327763, 373464, 402597]
+
+```js
+assert.deepEqual(taxicabNumbers(25), res25);
+```
+
+`taxicabNumbers(39)` resulting numbers from 20 - 29 should be [314496,320264,327763,373464,402597,439101,443889,513000,513856].
+
+```js
+assert.deepEqual(taxicabNumbers(39).slice(20, 29), res39From20To29);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const res4 = [1729, 4104, 13832, 20683];
+const res25 = [
+  1729, 4104, 13832, 20683, 32832, 39312, 40033, 46683, 64232, 65728, 110656,
+  110808, 134379, 149389, 165464, 171288, 195841, 216027, 216125, 262656, 314496, 320264, 327763,
+  373464, 402597
+];
+
+const res39From20To29 = [314496, 320264, 327763, 373464, 402597, 439101, 443889, 513000, 513856];
+```
+
+## --seed-contents--
+
+```js
+function taxicabNumbers(n) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function taxicabNumbers(nNumbers) {
+  const cubeN = [];
+  const s3s = {};
+
+  const e = 100;
+  for (let n = 1; n < e; n += 1) {
+    cubeN[n] = n * n * n;
+  }
+
+  for (let a = 1; a < e - 1; a += 1) {
+    const a3 = cubeN[a];
+    for (let b = a; b < e; b += 1) {
+      const b3 = cubeN[b];
+      const s3 = a3 + b3;
+
+      let abs = s3s[s3];
+      if (!abs) {
+        s3s[s3] = abs = [];
+      }
+      abs.push([a, b]);
+    }
+  }
+
+  let i = 0;
+  const res = [];
+  Object.keys(s3s).forEach(s3 => {
+    const abs = s3s[s3];
+    if (abs.length >= 2) { // No two cube pairs found
+      i += 1;
+      if (i <= nNumbers) {
+        res.push(s3);
+      }
+    }
+  });
+  return res.map(item => parseInt(item, 10));
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/tokenize-a-string-with-escaping.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/tokenize-a-string-with-escaping.md
new file mode 100644
index 00000000000..a95d3927542
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/tokenize-a-string-with-escaping.md
@@ -0,0 +1,124 @@
+---
+id: 594faaab4e2a8626833e9c3d
+title: Tokenize a string with escaping
+challengeType: 1
+forumTopicId: 302338
+dashedName: tokenize-a-string-with-escaping
+---
+
+# --description--
+
+Write a function or program that can split a string at each non-escaped occurrence of a separator character.
+
+It should accept three input parameters:
+
+<ul>
+  <li>The <strong>string</strong></li>
+  <li>The <strong>separator character</strong></li>
+  <li>The <strong>escape character</strong></li>
+</ul>
+
+It should output a list of strings.
+
+Rules for splitting:
+
+<ul>
+  <li>The fields that were separated by the separators, become the elements of the output list.</li>
+  <li>Empty fields should be preserved, even at the start and end.</li>
+</ul>
+
+Rules for escaping:
+
+<ul>
+  <li>"Escaped" means preceded by an occurrence of the escape character that is not already escaped itself.</li>
+  <li>When the escape character precedes a character that has no special meaning, it still counts as an escape (but does not do anything special).</li>
+  <li>Each occurrences of the escape character that was used to escape something, should not become part of the output.</li>
+</ul>
+
+Demonstrate that your function satisfies the following test-case:
+
+Given the string
+
+<pre>one^|uno||three^^^^|four^^^|^cuatro|</pre>
+
+and using `|` as a separator and `^` as escape character, your function should output the following array:
+
+<pre>  ['one|uno', '', 'three^^', 'four^|cuatro', '']
+</pre>
+
+# --hints--
+
+`tokenize` should be a function.
+
+```js
+assert(typeof tokenize === 'function');
+```
+
+`tokenize` should return an array.
+
+```js
+assert(typeof tokenize('a', 'b', 'c') === 'object');
+```
+
+`tokenize('one^|uno||three^^^^|four^^^|^cuatro|', '|', '^')` should return `['one|uno', '', 'three^^', 'four^|cuatro', '']`
+
+```js
+assert.deepEqual(tokenize(testStr1, '|', '^'), res1);
+```
+
+`tokenize('a@&bcd&ef&&@@hi', '&', '@')` should return `['a&bcd', 'ef', '', '@hi']`
+
+```js
+assert.deepEqual(tokenize(testStr2, '&', '@'), res2);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const testStr1 = 'one^|uno||three^^^^|four^^^|^cuatro|';
+const res1 = ['one|uno', '', 'three^^', 'four^|cuatro', ''];
+
+// TODO add more tests
+const testStr2 = 'a@&bcd&ef&&@@hi';
+const res2 = ['a&bcd', 'ef', '', '@hi'];
+```
+
+## --seed-contents--
+
+```js
+function tokenize(str, sep, esc) {
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+// tokenize :: String -> Character -> Character -> [String]
+function tokenize(str, charDelim, charEsc) {
+  const dctParse = str.split('')
+    .reduce((a, x) => {
+      const blnEsc = a.esc;
+      const blnBreak = !blnEsc && x === charDelim;
+      const blnEscChar = !blnEsc && x === charEsc;
+
+      return {
+        esc: blnEscChar,
+        token: blnBreak ? '' : (
+          a.token + (blnEscChar ? '' : x)
+        ),
+        list: a.list.concat(blnBreak ? a.token : [])
+      };
+    }, {
+      esc: false,
+      token: '',
+      list: []
+    });
+
+  return dctParse.list.concat(
+    dctParse.token
+  );
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/top-rank-per-group.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/top-rank-per-group.md
new file mode 100644
index 00000000000..b32c3f2a2a6
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/top-rank-per-group.md
@@ -0,0 +1,192 @@
+---
+id: 595011cba5a81735713873bd
+title: Top rank per group
+challengeType: 1
+forumTopicId: 302339
+dashedName: top-rank-per-group
+---
+
+# --description--
+
+Find the top `n` ranked data in each group, where `n` is provided as a parameter. Name of the rank and the group are also provided as parameter.
+
+Given the following data:
+
+```js
+testData1 = [
+  { name: 'Tyler Bennett', id: 'E10297', salary: 32000, dept: 'D101' },
+  { name: 'John Rappl', id: 'E21437', salary: 47000, dept: 'D050' },
+  { name: 'George Woltman', id: 'E00127', salary: 53500, dept: 'D101' },
+  { name: 'Adam Smith', id: 'E63535', salary: 18000, dept: 'D202' },
+  { name: 'Claire Buckman', id: 'E39876', salary: 27800, dept: 'D202' },
+  { name: 'David McClellan', id: 'E04242', salary: 41500, dept: 'D101' },
+  { name: 'Rich Holcomb', id: 'E01234', salary: 49500, dept: 'D202' },
+  { name: 'Nathan Adams', id: 'E41298', salary: 21900, dept: 'D050' },
+  { name: 'Richard Potter', id: 'E43128', salary: 15900, dept: 'D101' },
+  { name: 'David Motsinger', id: 'E27002', salary: 19250, dept: 'D202' },
+  { name: 'Tim Sampair', id: 'E03033', salary: 27000, dept: 'D101' },
+  { name: 'Kim Arlich', id: 'E10001', salary: 57000, dept: 'D190' },
+  { name: 'Timothy Grove', id: 'E16398', salary: 29900, dept: 'D190' }
+];
+```
+
+One could rank top 10 employees in each department by calling:
+
+```js
+topRankPerGroup(10, testData1, 'dept', 'salary')
+```
+
+Given the following data:
+
+```js
+testData2 = [
+  { name: 'Friday 13th', genre: 'horror', rating: 9.9 },
+  { name: "Nightmare on Elm's Street", genre: 'horror', rating: 5.7 },
+  { name: 'Titanic', genre: 'drama', rating: 7.3 },
+  { name: 'Maze Runner', genre: 'scifi', rating: 7.1 },
+  { name: 'Blade runner', genre: 'scifi', rating: 8.9 }
+];
+```
+
+One could rank the top-rated movie in each genre by calling:
+
+```js
+topRankPerGroup(1, testData2, 'genre', 'rating')
+```
+
+The function should return an array with an array for each group containing the top `n` objects.
+
+For example, given data:
+
+```js
+[
+  { name: 'Claire Buckman', id: 'E39876', salary: 27800, dept: 'D101' },
+  { name: 'Rich Holcomb', id: 'E01234', salary: 49500, dept: 'D050' },
+  { name: 'David Motsinger', id: 'E27002', salary: 19250, dept: 'D050' },
+  { name: 'Tim Sampair', id: 'E03033', salary: 27000, dept: 'D101' },
+  { name: 'Kim Arlich', id: 'E10001', salary: 57000, dept: 'D050' },
+  { name: 'Timothy Grove', id: 'E16398', salary: 29900, dept: 'D101' }
+];
+```
+
+Top two ranking employees in each department by salary would be:
+
+```js
+[ [ { name: 'Kim Arlich', id: 'E10001', salary: 57000, dept: 'D050' },
+    { name: 'Rich Holcomb', id: 'E01234', salary: 49500, dept: 'D050' } ],
+  [ { name: 'Timothy Grove', id: 'E16398', salary: 29900, dept: 'D101' },
+    { name: 'Claire Buckman', id: 'E39876', salary: 27800, dept: 'D101' } ] ]
+```
+
+# --hints--
+
+`topRankPerGroup` should be a function.
+
+```js
+assert(typeof topRankPerGroup === 'function');
+```
+
+`topRankPerGroup` should return undefined on negative n values.
+
+```js
+assert(typeof topRankPerGroup(-1, []) === 'undefined');
+```
+
+For `topRankPerGroup(10, testData1, 'dept', 'salary')`, the first result in the first group should be `{ name: 'John Rappl', id: 'E21437', salary: 47000, dept: 'D050'}`.
+
+```js
+assert.deepEqual(res1[0][0], { name: 'John Rappl', id: 'E21437', salary: 47000, dept: 'D050'});
+```
+
+For `topRankPerGroup(10, testData1, 'dept', 'salary')`, the last result in the last group should be `{ name: 'Adam Smith', id: 'E63535', salary: 18000, dept: 'D202' }`.
+
+```js
+assert.deepEqual(res1[3][3], { name: 'Adam Smith', id: 'E63535', salary: 18000, dept: 'D202' });
+```
+
+`topRankPerGroup(1, ...)` should return only top ranking result per group.
+
+```js
+assert.equal(res2[2].length, 1);
+```
+
+`topRankPerGroup(2, ...)` should return two ranking results per group.
+
+```js
+assert.equal(res3[2][1].name, 'Maze Runner');
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const testData1 = [
+  { name: 'Tyler Bennett', id: 'E10297', salary: 32000, dept: 'D101' },
+  { name: 'John Rappl', id: 'E21437', salary: 47000, dept: 'D050' },
+  { name: 'George Woltman', id: 'E00127', salary: 53500, dept: 'D101' },
+  { name: 'Adam Smith', id: 'E63535', salary: 18000, dept: 'D202' },
+  { name: 'Claire Buckman', id: 'E39876', salary: 27800, dept: 'D202' },
+  { name: 'David McClellan', id: 'E04242', salary: 41500, dept: 'D101' },
+  { name: 'Rich Holcomb', id: 'E01234', salary: 49500, dept: 'D202' },
+  { name: 'Nathan Adams', id: 'E41298', salary: 21900, dept: 'D050' },
+  { name: 'Richard Potter', id: 'E43128', salary: 15900, dept: 'D101' },
+  { name: 'David Motsinger', id: 'E27002', salary: 19250, dept: 'D202' },
+  { name: 'Tim Sampair', id: 'E03033', salary: 27000, dept: 'D101' },
+  { name: 'Kim Arlich', id: 'E10001', salary: 57000, dept: 'D190' },
+  { name: 'Timothy Grove', id: 'E16398', salary: 29900, dept: 'D190' }
+];
+
+const res1 = topRankPerGroup(10, testData1, 'dept', 'salary');
+
+const testData2 = [
+  { name: 'Friday 13th', genre: 'horror', rating: 9.9 },
+  { name: "Nightmare on Elm's Street", genre: 'horror', rating: 5.7 },
+  { name: 'Titanic', genre: 'drama', rating: 7.3 },
+  { name: 'Maze Runner', genre: 'scifi', rating: 7.1 },
+  { name: 'Blade runner', genre: 'scifi', rating: 8.9 }
+];
+
+const res2 = topRankPerGroup(1, testData2, 'genre', 'rating');
+const res3 = topRankPerGroup(2, testData2, 'genre', 'rating');
+```
+
+## --seed-contents--
+
+```js
+function topRankPerGroup(n, data, groupName, rankName) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+const collectDept = function (arrOfObj, groupName) {
+  const collect = arrOfObj.reduce((rtnObj, obj) => {
+    if (rtnObj[obj[groupName]] === undefined) {
+      rtnObj[obj[groupName]] = [];
+    }
+    rtnObj[obj[groupName]].push(obj);
+    return rtnObj;
+  }, {} // initial value to reduce
+  );
+
+  return Object.keys(collect).sort().map(key => collect[key]);
+};
+
+const sortRank = function (arrOfRankArrs, rankName) {
+  return arrOfRankArrs.map(item => item.sort((a, b) => {
+    if (a[rankName] > b[rankName]) { return -1; }
+    if (a[rankName] < b[rankName]) { return 1; }
+    return 0;
+  }));
+};
+
+function topRankPerGroup(n, data, groupName, rankName) {
+  if (n < 0) { return; }
+  return sortRank(collectDept(data, groupName),
+    rankName).map(list => list.slice(0, n));
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/topological-sort.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/topological-sort.md
new file mode 100644
index 00000000000..8b9939feb29
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/topological-sort.md
@@ -0,0 +1,185 @@
+---
+id: 594fa2746886f41f7d8bf225
+title: Topological sort
+challengeType: 1
+forumTopicId: 302340
+dashedName: topological-sort
+---
+
+# --description--
+
+Given a mapping between items, and items they depend on, a topological sort orders items so that no item precedes an item it depends upon. There are two popular algorithms for topological sorting: Kahn's (1962) topological sort and depth-first search.
+
+# --instructions--
+
+Write a function that will return a list with valid compile order of libraries from their dependencies.
+
+- Assume library names are single words.
+- Items mentioned as only dependents have no dependents of their own, but their order of compiling must be given.
+- Any self dependencies should be ignored.
+- Any un-orderable dependencies should be ignored.
+
+Use the following data as an example:
+
+<pre>
+LIBRARY          LIBRARY DEPENDENCIES
+=======          ====================
+des_system_lib   std synopsys std_cell_lib des_system_lib dw02 dw01 ramlib ieee
+dw01             ieee dw01 dware gtech
+dw02             ieee dw02 dware
+dw03             std synopsys dware dw03 dw02 dw01 ieee gtech
+dw04             dw04 ieee dw01 dware gtech
+dw05             dw05 ieee dware
+dw06             dw06 ieee dware
+dw07             ieee dware
+dware            ieee dware
+gtech            ieee gtech
+ramlib           std ieee
+std_cell_lib     ieee std_cell_lib
+synopsys
+</pre>
+
+The compiling of a library in the VHDL language has the constraint that a library must be compiled after any library it depends on. The above data would be un-orderable if, for example, `dw04` is added to the list of dependencies of `dw01`.
+
+The input of the function will be a multiline string, each line will consist of the name of the library, followed by its dependencies (if exist).
+
+For example:
+
+```js
+const libsSimple =
+  `aaa bbb
+  bbb`;
+```
+
+# --hints--
+
+`topologicalSort` should be a function.
+
+```js
+assert(typeof topologicalSort === 'function');
+```
+
+`topologicalSort(libsSimple)` should return an array.
+
+```js
+assert(Array.isArray(topologicalSort(libsSimple)));
+```
+
+`topologicalSort(libsSimple)` should return `['bbb', 'aaa']`.
+
+```js
+assert.deepEqual(topologicalSort(libsSimple), ['bbb', 'aaa']);
+```
+
+`topologicalSort(libsVHDL)` should return `['ieee', 'std_cell_lib', 'gtech', 'dware', 'dw07', 'dw06', 'dw05', 'dw02', 'dw01', 'dw04', 'std', 'ramlib', 'synopsys', 'dw03', 'des_system_lib']`.
+
+```js
+assert.deepEqual(topologicalSort(libsVHDL), ['ieee', 'std_cell_lib', 'gtech', 'dware', 'dw07', 'dw06', 'dw05', 'dw02', 'dw01', 'dw04', 'std', 'ramlib', 'synopsys', 'dw03', 'des_system_lib']);
+```
+
+`topologicalSort(libsCustom)` should return `['base', 'c', 'd', 'b', 'a']`.
+
+```js
+assert.deepEqual(topologicalSort(libsCustom), ['base', 'c', 'd', 'b', 'a']);
+```
+
+`topologicalSort` should ignore unorderable dependencies.
+
+```js
+assert.deepEqual(topologicalSort(libsUnorderable), ['Base']);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const libsSimple =
+  `aaa bbb
+  bbb`;
+
+const libsVHDL =
+  `des_system_lib   std synopsys std_cell_lib des_system_lib dw02 dw01 ramlib ieee
+  dw01             ieee dw01 dware gtech
+  dw02             ieee dw02 dware
+  dw03             std synopsys dware dw03 dw02 dw01 ieee gtech
+  dw04             dw04 ieee dw01 dware gtech
+  dw05             dw05 ieee dware
+  dw06             dw06 ieee dware
+  dw07             ieee dware
+  dware            ieee dware
+  gtech            ieee gtech
+  ramlib           std ieee
+  std_cell_lib     ieee std_cell_lib
+  synopsys`;
+
+const libsCustom =
+  `a b c d
+  b c d
+  d c
+  c base
+  base`;
+
+const libsUnorderable =
+  `TestLib Base MainLib
+  MainLib TestLib
+  Base`;
+```
+
+## --seed-contents--
+
+```js
+function topologicalSort(libs) {
+
+  return true;
+}
+```
+
+# --solutions--
+
+```js
+function topologicalSort(libs) {
+  // A map of the input data, with the keys as the packages, and the values as
+  // and array of packages on which it depends.
+  const D = libs
+    .split('\n')
+    .map(e => e.split(' ').filter(ep => ep !== ''))
+    .reduce((p, c) =>
+      p.set(c[0], c.filter((e, i) => (i > 0 && e !== c[0] ? e : null))), new Map());
+  [].concat(...D.values()).forEach(e => {
+    D.set(e, D.get(e) || []);
+  });
+
+  // The above map rotated so that it represents a DAG of the form
+  // Map {
+  //    A => [ A, B, C],
+  //    B => [C],
+  //    C => []
+  // }
+  // where each key represents a node, and the array contains the edges.
+  const G = [...D.keys()].reduce((p, c) =>
+    p.set(
+      c,
+      [...D.keys()].filter(e => D.get(e).includes(c))),
+    new Map()
+  );
+
+  // An array of leaf nodes; nodes with 0 in degrees.
+  const Q = [...D.keys()].filter(e => D.get(e).length === 0);
+
+  // The result array.
+  const S = [];
+  while (Q.length) {
+    const u = Q.pop();
+    S.push(u);
+    G.get(u).forEach(v => {
+      D.set(v, D.get(v).filter(e => e !== u));
+      if (D.get(v).length === 0) {
+        Q.push(v);
+      }
+    });
+  }
+
+  return S;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/towers-of-hanoi.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/towers-of-hanoi.md
new file mode 100644
index 00000000000..596164f14b5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/towers-of-hanoi.md
@@ -0,0 +1,87 @@
+---
+id: 5951ed8945deab770972ae56
+title: Towers of Hanoi
+challengeType: 1
+forumTopicId: 302341
+dashedName: towers-of-hanoi
+---
+
+# --description--
+
+Solve the Towers of Hanoi problem. The number of objects will be given as the first parameter, followed by the strings used to identify each stack of objects. Create a nested array containing the list of moves, `["source", "destination"]`.
+
+For example, the parameters `(4, 'A', 'B', 'C')`, will result in nested array of moves `[['A', 'C'], ['B', 'A']]`, indicating that the 1st move was to move an object from stack `A` to `C` and the 2nd move was to move an object from stack `B` to `A`.
+
+# --instructions--
+
+Write a function that returns the moves to stack the objects in a nested array.
+
+# --hints--
+
+`towerOfHanoi` should be a function.
+
+```js
+assert(typeof towerOfHanoi === 'function');
+```
+
+`towerOfHanoi(3, ...)` should return 7 moves.
+
+```js
+assert(res3.length === 7);
+```
+
+`towerOfHanoi(3, 'A', 'B', 'C')` should return `[['A','B'], ['A','C'], ['B','C'], ['A','B'], ['C','A'], ['C','B'], ['A','B']]`.
+
+```js
+assert.deepEqual(towerOfHanoi(3, 'A', 'B', 'C'), res3Moves);
+```
+
+`towerOfHanoi(5, "X", "Y", "Z")` 10th move should be Y -> X.
+
+```js
+assert.deepEqual(res5[9], ['Y', 'X']);
+```
+
+`towerOfHanoi(7, 'A', 'B', 'C')` first ten moves should be `[['A','B'], ['A','C'], ['B','C'], ['A','B'], ['C','A'], ['C','B'], ['A','B'], ['A','C'], ['B','C'], ['B','A']]`
+
+```js
+assert.deepEqual(towerOfHanoi(7, 'A', 'B', 'C').slice(0, 10), res7First10Moves);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const res3 = towerOfHanoi(3, 'A', 'B', 'C');
+const res3Moves = [['A', 'B'], ['A', 'C'], ['B', 'C'], ['A', 'B'], ['C', 'A'], ['C', 'B'], ['A', 'B']];
+const res5 = towerOfHanoi(5, 'X', 'Y', 'Z');
+const res7First10Moves = [['A', 'B'], ['A', 'C'], ['B', 'C'], ['A', 'B'], ['C', 'A'], ['C', 'B'], ['A', 'B'], ['A', 'C'], ['B', 'C'], ['B', 'A']];
+```
+
+## --seed-contents--
+
+```js
+function towerOfHanoi(n, a, b, c) {
+
+  return [[]];
+}
+```
+
+# --solutions--
+
+```js
+function towerOfHanoi(n, a, b, c) {
+  const res = [];
+  towerOfHanoiHelper(n, a, c, b, res);
+  return res;
+}
+
+function towerOfHanoiHelper(n, a, b, c, res) {
+  if (n > 0) {
+    towerOfHanoiHelper(n - 1, a, c, b, res);
+    res.push([a, c]);
+    towerOfHanoiHelper(n - 1, b, a, c, res);
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/vector-cross-product.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/vector-cross-product.md
new file mode 100644
index 00000000000..20dff2183d4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/vector-cross-product.md
@@ -0,0 +1,75 @@
+---
+id: 594810f028c0303b75339ad2
+title: Vector cross product
+challengeType: 1
+forumTopicId: 302342
+dashedName: vector-cross-product
+---
+
+# --description--
+
+A vector is defined as having three dimensions as being represented by an ordered collection of three numbers: (X, Y, Z).
+
+# --instructions--
+
+Write a function that takes two vectors (arrays) as input and computes their cross product. Your function should return `null` on invalid inputs such as vectors of different lengths.
+
+# --hints--
+
+`crossProduct` should be a function.
+
+```js
+assert.equal(typeof crossProduct, 'function');
+```
+
+`crossProduct()` should return null.
+
+```js
+assert.equal(crossProduct(), null);
+```
+
+`crossProduct([1, 2, 3], [4, 5, 6])` should return `[-3, 6, -3]`.
+
+```js
+assert.deepEqual(res12, exp12);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const tv1 = [1, 2, 3];
+const tv2 = [4, 5, 6];
+const res12 = crossProduct(tv1, tv2);
+const exp12 = [-3, 6, -3];
+```
+
+## --seed-contents--
+
+```js
+function crossProduct(a, b) {
+
+}
+```
+
+# --solutions--
+
+```js
+function crossProduct(a, b) {
+  if (!a || !b) {
+    return null;
+  }
+
+  // Check lengths
+  if (a.length !== 3 || b.length !== 3) {
+    return null;
+  }
+
+  return [
+    (a[1] * b[2]) - (a[2] * b[1]),
+    (a[2] * b[0]) - (a[0] * b[2]),
+    (a[0] * b[1]) - (a[1] * b[0])
+  ];
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/vector-dot-product.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/vector-dot-product.md
new file mode 100644
index 00000000000..447edc27d7f
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/vector-dot-product.md
@@ -0,0 +1,96 @@
+---
+id: 594810f028c0303b75339ad3
+title: Vector dot product
+challengeType: 1
+forumTopicId: 302343
+dashedName: vector-dot-product
+---
+
+# --description--
+
+A vector can have one or more values represented by an ordered collection. Examples could be (x), (x, y), or (x, y, z).
+
+# --instructions--
+
+Write a function that takes two vectors (represented as one-dimensional arrays) as input and computes their dot product. Your function should return `null` on invalid inputs such as vectors of different lengths or passing anything other than two vectors.
+
+# --hints--
+
+`dotProduct` should be a function.
+
+```js
+assert.equal(typeof dotProduct, 'function');
+```
+
+`dotProduct()` should return `null`.
+
+```js
+assert.equal(dotProduct(), null);
+```
+
+`dotProduct([1], [1])` should return `1`.
+
+```js
+assert.equal(dotProduct([1], [1]), 1);
+```
+
+`dotProduct([1], [1, 2])` should return `null`.
+
+```js
+assert.equal(dotProduct([1], [1, 2]), null);
+```
+
+`dotProduct([1, 3, -5], [4, -2, -1])` should return `3`.
+
+```js
+assert.equal(dotProduct([1, 3, -5], [4, -2, -1]), 3);
+```
+
+`dotProduct([3, 2, 1], [2, 4, 2], [5, 3, 1])` should return `null`.
+
+```js
+assert.equal(dotProduct([3, 2, 1], [2, 4, 2], [5, 3, 1]), null);
+```
+
+`dotProduct([ 0, 3, 6, 9, 12 ], [ 0, 4, 8, 12, 16 ])` should return `360`.
+
+```js
+assert.equal(dotProduct([ 0, 3, 6, 9, 12 ], [ 0, 4, 8, 12, 16 ]), 360);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function dotProduct(...vectors) {
+
+}
+```
+
+# --solutions--
+
+```js
+function dotProduct(...vectors) {
+  if (!vectors || !vectors.length || vectors.length > 2 || vectors[0].length !== vectors[1].length) {
+    return null;
+  }
+  const vectorLen = vectors[0].length;
+
+  let prod = 0;
+  let sum = 0;
+  let j = vectorLen;
+  let i = 2;
+  // Sum terms
+  while (j--) {
+    i = 2;
+    prod = 1;
+
+    while (i--) {
+      prod *= vectors[i][j];
+    }
+    sum += prod;
+  }
+  return sum;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/word-frequency.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/word-frequency.md
new file mode 100644
index 00000000000..aff883e5d51
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/word-frequency.md
@@ -0,0 +1,136 @@
+---
+id: 5e94a54cc7b022105bf0fd2c
+title: Word frequency
+challengeType: 1
+forumTopicId: 393913
+dashedName: word-frequency
+---
+
+# --description--
+
+Given a text string and an integer n, return the n most common words in the file (and the number of their occurrences) in decreasing frequency.
+
+# --instructions--
+
+Write a function to count the occurrences of each word and return the n most commons words along with the number of their occurrences in decreasing frequency.
+
+The function should return a 2D array with each of the elements in the following form: `[word, freq]`. `word` should be the lowercase version of the word and `freq` the number denoting the count.
+
+The function should return an empty array, if no string is provided.
+
+The function should be case insensitive, for example, the strings "Hello" and "hello" should be treated the same.
+
+You can treat words that have special characters such as underscores, dashes, apostrophes, commas, etc., as distinct words.
+
+For example, given the string "Hello hello goodbye", your function should return `[['hello', 2], ['goodbye', 1]]`.
+
+# --hints--
+
+`wordFrequency` should be a function.
+
+```js
+assert(typeof wordFrequency == 'function');
+```
+
+`wordFrequency` should return an array.
+
+```js
+assert(Array.isArray(wordFrequency('test')));
+```
+
+`wordFrequency("Hello hello world", 2)` should return `[['hello', 2], ['world', 1]]`
+
+```js
+assert.deepEqual(wordFrequency(example_1, 2), example_1_solution);
+```
+
+`wordFrequency("The quick brown fox jumped over the lazy dog", 1)` should return `[['the', 2]]`
+
+```js
+assert.deepEqual(wordFrequency(example_2, 1), example_2_solution);
+```
+
+`wordFrequency("Opensource opensource open-source open source", 1)` should return `[['opensource', 2]]`
+
+```js
+assert.deepEqual(wordFrequency(example_3, 1), example_3_solution);
+```
+
+`wordFrequency("Apple App apply aPP aPPlE", 3)` should return `[['app', 2], ['apple', 2], ['apply', 1]]` or `[['apple', 2], ['app', 2], ['apply', 1]]`
+
+```js
+const arr = JSON.stringify(wordFrequency(example_4, 3));
+assert(arr === example_4_solution_a || arr === example_4_solution_b);
+```
+
+`wordFrequency("c d a d c a b d d c", 4)` should return `[['d', 4], ['c', 3], ['a', 2], ['b', 1]]`
+
+```js
+assert.deepEqual(wordFrequency(example_5, 4), example_5_solution);
+```
+
+`wordFrequency("", 5)` should return `[]`
+
+```js
+assert.deepEqual(wordFrequency(example_6, 5), example_6_solution);
+```
+
+# --seed--
+
+## --before-user-code--
+
+```js
+var example_1 = 'Hello hello world';
+var example_1_solution = [['hello', 2], ['world', 1]];
+var example_2 = 'The quick brown fox jumped over the lazy dog';
+var example_2_solution = [['the', 2]];
+var example_3 = 'Opensource opensource open-source open source';
+var example_3_solution = [['opensource', 2]];
+var example_4 = 'Apple App apply aPP aPPlE';
+var example_4_solution_a = "[[\"app\",2],[\"apple\",2],[\"apply\",1]]";
+var example_4_solution_b = "[[\"apple\",2],[\"app\",2],[\"apply\",1]]";
+var example_5 = 'c d a d c a b d d c';
+var example_5_solution = [['d', 4], ['c', 3], ['a', 2], ['b', 1]];
+var example_6 = '';
+var example_6_solution = [];
+```
+
+## --seed-contents--
+
+```js
+function wordFrequency(txt, n) {
+
+}
+```
+
+# --solutions--
+
+```js
+function wordFrequency(txt, n) {
+  var words = txt.split(/\s+/);
+  var wordCount = {};
+  words.forEach(word => {
+    if (word == '') {
+      return;
+    }
+    const lowerWord = word.toLowerCase();
+    wordCount[lowerWord] =
+      lowerWord in wordCount ? wordCount[lowerWord] + 1 : 1;
+  });
+
+  var wordsArray = [];
+  for (let [word, count] of Object.entries(wordCount)) {
+    wordsArray.push([word, count]);
+  }
+
+  wordsArray.sort((a, b) => {
+    if (a[1] !== b[1]) {
+      return b[1] - a[1];
+    } else if (a[0] !== b[0]) {
+      return a[0] < b[0] ? -1 : 1;
+    }
+    return 0;
+  });
+  return wordsArray.slice(0, n);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/word-wrap.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/word-wrap.md
new file mode 100644
index 00000000000..5ea8d8161da
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/word-wrap.md
@@ -0,0 +1,106 @@
+---
+id: 594810f028c0303b75339ad4
+title: Word wrap
+challengeType: 1
+forumTopicId: 302344
+dashedName: word-wrap
+---
+
+# --description--
+
+Even today, with proportional fonts and complex layouts, there are still cases where you need to wrap text at a specified column. The basic task is to wrap a paragraph of text in a simple way.
+
+# --instructions--
+
+Write a function that can wrap this text to any number of characters. As an example, the text wrapped to 80 characters should look like the following:
+
+<pre>
+Wrap text using a more sophisticated algorithm such as the Knuth and Plass TeX
+algorithm. If your language provides this, you get easy extra credit, but you
+must reference documentation indicating that the algorithm is something better
+than a simple minimum length algorithm.
+</pre>
+
+# --hints--
+
+wrap should be a function.
+
+```js
+assert.equal(typeof wrap, 'function');
+```
+
+wrap should return a string.
+
+```js
+assert.equal(typeof wrap('abc', 10), 'string');
+```
+
+wrap(80) should return 4 lines.
+
+```js
+assert(wrapped80.split('\n').length === 4);
+```
+
+Your `wrap` function should return our expected text.
+
+```js
+assert.equal(wrapped80.split('\n')[0], firstRow80);
+```
+
+wrap(42) should return 7 lines.
+
+```js
+assert(wrapped42.split('\n').length === 7);
+```
+
+Your `wrap` function should return our expected text.
+
+```js
+assert.equal(wrapped42.split('\n')[0], firstRow42);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const text =
+`Wrap text using a more sophisticated algorithm such as the Knuth and Plass TeX algorithm.
+If your language provides this, you get easy extra credit,
+but you ''must reference documentation'' indicating that the algorithm
+is something better than a simple minimum length algorithm.`;
+
+const wrapped80 = wrap(text, 80);
+const wrapped42 = wrap(text, 42);
+
+const firstRow80 =
+    'Wrap text using a more sophisticated algorithm such as the Knuth and Plass TeX';
+
+const firstRow42 = 'Wrap text using a more sophisticated';
+```
+
+## --seed-contents--
+
+```js
+function wrap(text, limit) {
+  return text;
+}
+```
+
+# --solutions--
+
+```js
+function wrap(text, limit) {
+  const noNewlines = text.replace('\n', '');
+  if (noNewlines.length > limit) {
+    // find the last space within limit
+    const edge = noNewlines.slice(0, limit).lastIndexOf(' ');
+    if (edge > 0) {
+      const line = noNewlines.slice(0, edge);
+      const remainder = noNewlines.slice(edge + 1);
+      return line + '\n' + wrap(remainder, limit);
+    }
+  }
+  return text;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/y-combinator.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/y-combinator.md
new file mode 100644
index 00000000000..0c867176bc4
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/y-combinator.md
@@ -0,0 +1,85 @@
+---
+id: 594810f028c0303b75339ad5
+title: Y combinator
+challengeType: 1
+forumTopicId: 302345
+dashedName: y-combinator
+---
+
+# --description--
+
+In strict <a href="https://www.freecodecamp.org/news/the-principles-of-functional-programming/" target="_blank" rel="noopener noreferrer nofollow">functional programming</a> and the lambda calculus, functions (lambda expressions) don't have state and are only allowed to refer to arguments of enclosing functions. This rules out the usual definition of a recursive function wherein a function is associated with the state of a variable and this variable's state is used in the body of the function.
+
+The Y combinator is itself a stateless function that, when applied to another stateless function, returns a recursive version of the function. The Y combinator is the simplest of the class of such functions, called fixed-point combinators.
+
+# --instructions--
+
+Define the stateless Y combinator function and use it to compute the factorials. The `factorial(N)` function is already given to you.
+
+# --hints--
+
+Y should return a function.
+
+```js
+assert.equal(typeof Y((f) => (n) => n), 'function');
+```
+
+factorial(1) should return 1.
+
+```js
+assert.equal(factorial(1), 1);
+```
+
+factorial(2) should return 2.
+
+```js
+assert.equal(factorial(2), 2);
+```
+
+factorial(3) should return 6.
+
+```js
+assert.equal(factorial(3), 6);
+```
+
+factorial(4) should return 24.
+
+```js
+assert.equal(factorial(4), 24);
+```
+
+factorial(10) should return 3628800.
+
+```js
+assert.equal(factorial(10), 3628800);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+var factorial = Y(f => n => (n > 1 ? n * f(n - 1) : 1));
+```
+
+## --seed-contents--
+
+```js
+function Y(f) {
+  return function() {
+
+  };
+}
+
+var factorial = Y(function(f) {
+  return function (n) {
+    return n > 1 ? n * f(n - 1) : 1;
+  };
+});
+```
+
+# --solutions--
+
+```js
+var Y = f => (x => x(x))(y => f(x => y(y)(x)));
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/zeckendorf-number-representation.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/zeckendorf-number-representation.md
new file mode 100644
index 00000000000..27ab1af3d3c
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/zeckendorf-number-representation.md
@@ -0,0 +1,205 @@
+---
+id: 594810f028c0303b75339ad6
+title: Zeckendorf number representation
+challengeType: 1
+forumTopicId: 302346
+dashedName: zeckendorf-number-representation
+---
+
+# --description--
+
+Just as numbers can be represented in a positional notation as sums of multiples of the powers of ten (decimal) or two (binary); all the positive integers can be represented as the sum of one or zero times the distinct members of the Fibonacci series. Recall that the first six distinct Fibonacci numbers are: `1, 2, 3, 5, 8, 13`.
+
+The decimal number eleven can be written as `0*13 + 1*8 + 0*5 + 1*3 + 0*2 + 0*1` or `010100` in positional notation where the columns represent multiplication by a particular member of the sequence. Leading zeroes are dropped so that 11 decimal becomes `10100`. 10100 is not the only way to make 11 from the Fibonacci numbers however `0*13 + 1*8 + 0*5 + 0*3 + 1*2 + 1*1` or 010011 would also represent decimal 11. For a true Zeckendorf number there is the added restriction that *no two consecutive Fibonacci numbers can be used* which leads to the former unique solution.
+
+# --instructions--
+
+Write a function that generates and returns the Zeckendorf number representation of `n`.
+
+# --hints--
+
+`zeckendorf` should be a function.
+
+```js
+assert.equal(typeof zeckendorf, 'function');
+```
+
+`zeckendorf(0)` should return `0`.
+
+```js
+assert.equal(zeckendorf(0), 0);
+
+```
+
+`zeckendorf(1)` should return `1`.
+
+```js
+assert.equal(zeckendorf(1), 1);
+```
+
+`zeckendorf(2)` should return `10`.
+
+```js
+assert.equal(zeckendorf(2), 10);
+```
+
+`zeckendorf(3)` should return `100`.
+
+```js
+assert.equal(zeckendorf(3), 100);
+```
+
+`zeckendorf(4)` should return `101`.
+
+```js
+assert.equal(zeckendorf(4), 101);
+```
+
+`zeckendorf(5)` should return `1000`.
+
+```js
+assert.equal(zeckendorf(5), 1000);
+```
+
+`zeckendorf(6)` should return `1001`.
+
+```js
+assert.equal(zeckendorf(6), 1001);
+```
+
+`zeckendorf(7)` should return `1010`.
+
+```js
+assert.equal(zeckendorf(7), 1010);
+```
+
+`zeckendorf(8)` should return `10000`.
+
+```js
+assert.equal(zeckendorf(8), 10000);
+```
+
+`zeckendorf(9)` should return `10001`.
+
+```js
+assert.equal(zeckendorf(9), 10001);
+```
+
+`zeckendorf(10)` should return `10010`.
+
+```js
+assert.equal(zeckendorf(10), 10010);
+```
+
+`zeckendorf(11)` should return `10100`.
+
+```js
+assert.equal(zeckendorf(11), 10100);
+```
+
+`zeckendorf(12)` should return `10101`.
+
+```js
+assert.equal(zeckendorf(12), 10101);
+```
+
+`zeckendorf(13)` should return `100000`.
+
+```js
+assert.equal(zeckendorf(13), 100000);
+```
+
+`zeckendorf(14)` should return `100001`.
+
+```js
+assert.equal(zeckendorf(14), 100001);
+```
+
+`zeckendorf(15)` should return `100010`.
+
+```js
+assert.equal(zeckendorf(15), 100010);
+```
+
+`zeckendorf(16)` should return `100100`.
+
+```js
+assert.equal(zeckendorf(16), 100100);
+```
+
+`zeckendorf(17)` should return `100101`.
+
+```js
+assert.equal(zeckendorf(17), 100101);
+```
+
+`zeckendorf(18)` should return `101000`.
+
+```js
+assert.equal(zeckendorf(18), 101000);
+```
+
+`zeckendorf(19)` should return `101001`.
+
+```js
+assert.equal(zeckendorf(19), 101001);
+```
+
+`zeckendorf(20)` should return `101010`.
+
+```js
+assert.equal(zeckendorf(20), 101010);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function zeckendorf(n) {
+
+}
+```
+
+# --solutions--
+
+```js
+// zeckendorf :: Int -> Int
+function zeckendorf(n) {
+  const f = (m, x) => (m < x ? [m, 0] : [m - x, 1]);
+  return parseInt((n === 0 ? ([0]) :
+    mapAccumL(f, n, reverse(
+      tail(fibUntil(n))
+    ))[1]).join(''));
+}
+
+// fibUntil :: Int -> [Int]
+let fibUntil = n => {
+  const xs = [];
+  until(
+      ([a]) => a > n,
+      ([a, b]) => (xs.push(a), [b, a + b]), [1, 1]
+  );
+  return xs;
+};
+
+let mapAccumL = (f, acc, xs) => (
+  xs.reduce((a, x) => {
+    const pair = f(a[0], x);
+
+    return [pair[0], a[1].concat(pair[1])];
+  }, [acc, []])
+);
+
+let until = (p, f, x) => {
+  let v = x;
+  while (!p(v)) v = f(v);
+  return v;
+};
+
+const tail = xs => (
+   xs.length ? xs.slice(1) : undefined
+);
+
+const reverse = xs => xs.slice(0).reverse();
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/zhang-suen-thinning-algorithm.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/zhang-suen-thinning-algorithm.md
new file mode 100644
index 00000000000..16b17783ed3
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/zhang-suen-thinning-algorithm.md
@@ -0,0 +1,320 @@
+---
+id: 594810f028c0303b75339ad7
+title: Zhang-Suen thinning algorithm
+challengeType: 1
+forumTopicId: 302347
+dashedName: zhang-suen-thinning-algorithm
+---
+
+# --description--
+
+This is an algorithm used to thin a black and white i.e. one bit per pixel images. For example, with an input image of:
+
+```js
+const testImage1 = [
+ '                               ',
+ '#########       ########       ',
+ '###   ####     ####  ####      ',
+ '###    ###     ###    ###      ',
+ '###   ####     ###             ',
+ '#########      ###             ',
+ '### ####       ###    ###      ',
+ '###  ####  ### ####  #### ###  ',
+ '###   #### ###  ########  ###  ',
+ '                               '
+];
+```
+
+It produces the thinned output:
+
+```js
+[ '                               ',
+  '########         ######        ',
+  '#      #        ##             ',
+  '#       #       #              ',
+  '#      #        #              ',
+  '###### #        #              ',
+  '#     ##        #              ',
+  '#      #    #   ##    ##   #   ',
+  '#       #         ####         ',
+  '                               ' ];
+```
+
+## Algorithm
+
+Assume black pixels are one and white pixels zero, and that the input image is a rectangular N by M array of ones and zeroes. The algorithm operates on all black pixels P1 that can have eight neighbours. The neighbours are, in order, arranged as:
+
+$$\begin{array}{|c|c|c|} \\hline P9 & P2              & P3\\\\ \\hline P8 & \boldsymbol{P1} & P4\\\\ \\hline P7 & P6              & P5\\\\ \\hline \end{array}$$
+
+Obviously the boundary pixels of the image cannot have the full eight neighbours.
+
+- Define $A(P1)$ = the number of transitions from white to black, ($0 \to 1$) in the sequence P2, P3, P4, P5, P6, P7, P8, P9, P2. (Note the extra P2 at the end - it is circular).
+- Define $B(P1)$ = the number of black pixel neighbours of P1. ($= \\sum(P2 \ldots P9)$)
+
+**Step 1:**
+
+All pixels are tested and pixels satisfying all the following conditions (simultaneously) are just noted at this stage.
+
+1. The pixel is black and has eight neighbours
+2. $2 \le B(P1) \le 6$
+3. $A(P1) = 1$
+4. At least one of $P2$, $P4$ and $P6$ is white
+5. At least one of $P4$, $P6$ and $P8$ is white
+
+After iterating over the image and collecting all the pixels satisfying all step 1 conditions, all these condition satisfying pixels are set to white.
+
+**Step 2:**
+
+All pixels are again tested and pixels satisfying all the following conditions are just noted at this stage.
+
+1. The pixel is black and has eight neighbours
+2. $2 \le B(P1) \le 6$
+3. $A(P1) = 1$
+4. At least one of $P2$, $P4$ and $P8$ is white
+5. At least one of $P2$, $P6$ and $P8$ is white
+
+After iterating over the image and collecting all the pixels satisfying all step 2 conditions, all these condition satisfying pixels are again set to white.
+
+**Iteration:**
+
+If any pixels were set in this round of either step 1 or step 2 then all steps are repeated until no image pixels are so changed.
+
+# --instructions--
+
+Write a routine to perform Zhang-Suen thinning on the provided `image`, an array of strings, where each string represents single line of the image. In the string, `#` represents black pixel, and whitespace represents white pixel. Function should return thinned image, using the same representation.
+
+# --hints--
+
+`thinImage` should be a function.
+
+```js
+assert.equal(typeof thinImage, 'function');
+```
+
+`thinImage` should return an array.
+
+```js
+assert(Array.isArray(thinImage(_testImage1)));
+```
+
+`thinImage` should return an array of strings.
+
+```js
+assert.equal(typeof thinImage(_testImage1)[0], 'string');
+```
+
+`thinImage(testImage1)` should return a thinned image as in the example.
+
+```js
+assert.deepEqual(thinImage(_testImage1), expected1);
+```
+
+`thinImage(testImage2)` should return a thinned image.
+
+```js
+assert.deepEqual(thinImage(_testImage2), expected2);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const _testImage1 = [
+  '                               ',
+  '#########       ########       ',
+  '###   ####     ####  ####      ',
+  '###    ###     ###    ###      ',
+  '###   ####     ###             ',
+  '#########      ###             ',
+  '### ####       ###    ###      ',
+  '###  ####  ### ####  #### ###  ',
+  '###   #### ###  ########  ###  ',
+  '                               '
+];
+const expected1 = [
+  '                               ',
+  '########         ######        ',
+  '#      #        ##             ',
+  '#       #       #              ',
+  '#      #        #              ',
+  '###### #        #              ',
+  '#     ##        #              ',
+  '#      #    #   ##    ##   #   ',
+  '#       #         ####         ',
+  '                               '
+];
+const _testImage2 = [
+  '                                                          ',
+  ' #################                   #############        ',
+  ' ##################               ################        ',
+  ' ###################            ##################        ',
+  ' ########     #######          ###################        ',
+  '   ######     #######         #######       ######        ',
+  '   ######     #######        #######                      ',
+  '   #################         #######                      ',
+  '   ################          #######                      ',
+  '   #################         #######                      ',
+  '   ######     #######        #######                      ',
+  '   ######     #######        #######                      ',
+  '   ######     #######         #######       ######        ',
+  ' ########     #######          ###################        ',
+  ' ########     ####### ######    ################## ###### ',
+  ' ########     ####### ######      ################ ###### ',
+  ' ########     ####### ######         ############# ###### ',
+  '                                                          '];
+const expected2 = [
+  '                                                          ',
+  '                                                          ',
+  '    # ##########                       #######            ',
+  '     ##        #                   ####       #           ',
+  '     #          #                 ##                      ',
+  '     #          #                #                        ',
+  '     #          #                #                        ',
+  '     #          #                #                        ',
+  '     ############               #                         ',
+  '     #          #               #                         ',
+  '     #          #                #                        ',
+  '     #          #                #                        ',
+  '     #          #                #                        ',
+  '     #                            ##                      ',
+  '     #                             ############           ',
+  '                       ###                          ###   ',
+  '                                                          ',
+  '                                                          '
+];
+```
+
+## --seed-contents--
+
+```js
+function thinImage(image) {
+
+}
+
+const testImage1 = [
+  '                               ',
+  '#########       ########       ',
+  '###   ####     ####  ####      ',
+  '###    ###     ###    ###      ',
+  '###   ####     ###             ',
+  '#########      ###             ',
+  '### ####       ###    ###      ',
+  '###  ####  ### ####  #### ###  ',
+  '###   #### ###  ########  ###  ',
+  '                               '
+];
+```
+
+# --solutions--
+
+```js
+function Point(x, y) {
+  this.x = x;
+  this.y = y;
+}
+
+const ZhangSuen = (function () {
+  function ZhangSuen() {
+  }
+
+  ZhangSuen.nbrs = [[0, -1], [1, -1], [1, 0], [1, 1], [0, 1], [-1, 1], [-1, 0], [-1, -1], [0, -1]];
+
+  ZhangSuen.nbrGroups = [[[0, 2, 4], [2, 4, 6]], [[0, 2, 6], [0, 4, 6]]];
+
+  ZhangSuen.toWhite = [];
+
+  ZhangSuen.main = function (image) {
+    ZhangSuen.grid = new Array(image);
+    for (let r = 0; r < image.length; r++) {
+      ZhangSuen.grid[r] = image[r].split('');
+    }
+    ZhangSuen.thinImage();
+    return ZhangSuen.getResult();
+  };
+
+  ZhangSuen.thinImage = function () {
+    let firstStep = false;
+    let hasChanged;
+    do {
+      hasChanged = false;
+      firstStep = !firstStep;
+      for (let r = 1; r < ZhangSuen.grid.length - 1; r++) {
+        for (let c = 1; c < ZhangSuen.grid[0].length - 1; c++) {
+          if (ZhangSuen.grid[r][c] !== '#') {
+            continue;
+          }
+          const nn = ZhangSuen.numNeighbors(r, c);
+          if (nn < 2 || nn > 6) {
+            continue;
+          }
+          if (ZhangSuen.numTransitions(r, c) !== 1) {
+            continue;
+          }
+          if (!ZhangSuen.atLeastOneIsWhite(r, c, firstStep ? 0 : 1)) {
+            continue;
+          }
+          ZhangSuen.toWhite.push(new Point(c, r));
+          hasChanged = true;
+        }
+      }
+      for (let i = 0; i < ZhangSuen.toWhite.length; i++) {
+        const p = ZhangSuen.toWhite[i];
+        ZhangSuen.grid[p.y][p.x] = ' ';
+      }
+      ZhangSuen.toWhite = [];
+    } while ((firstStep || hasChanged));
+  };
+
+  ZhangSuen.numNeighbors = function (r, c) {
+    let count = 0;
+    for (let i = 0; i < ZhangSuen.nbrs.length - 1; i++) {
+      if (ZhangSuen.grid[r + ZhangSuen.nbrs[i][1]][c + ZhangSuen.nbrs[i][0]] === '#') {
+        count++;
+      }
+    }
+    return count;
+  };
+
+  ZhangSuen.numTransitions = function (r, c) {
+    let count = 0;
+    for (let i = 0; i < ZhangSuen.nbrs.length - 1; i++) {
+      if (ZhangSuen.grid[r + ZhangSuen.nbrs[i][1]][c + ZhangSuen.nbrs[i][0]] === ' ') {
+        if (ZhangSuen.grid[r + ZhangSuen.nbrs[i + 1][1]][c + ZhangSuen.nbrs[i + 1][0]] === '#') {
+          count++;
+        }
+      }
+    }
+    return count;
+  };
+
+  ZhangSuen.atLeastOneIsWhite = function (r, c, step) {
+    let count = 0;
+    const group = ZhangSuen.nbrGroups[step];
+    for (let i = 0; i < 2; i++) {
+      for (let j = 0; j < group[i].length; j++) {
+        const nbr = ZhangSuen.nbrs[group[i][j]];
+        if (ZhangSuen.grid[r + nbr[1]][c + nbr[0]] === ' ') {
+          count++;
+          break;
+        }
+      }
+    }
+    return count > 1;
+  };
+
+  ZhangSuen.getResult = function () {
+    const result = [];
+    for (let i = 0; i < ZhangSuen.grid.length; i++) {
+      const row = ZhangSuen.grid[i].join('');
+      result.push(row);
+    }
+    return result;
+  };
+  return ZhangSuen;
+}());
+
+function thinImage(image) {
+  return ZhangSuen.main(image);
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/zig-zag-matrix.md b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/zig-zag-matrix.md
new file mode 100644
index 00000000000..70799a19f1d
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/rosetta-code/zig-zag-matrix.md
@@ -0,0 +1,117 @@
+---
+id: 594810f028c0303b75339ad8
+title: Zig-zag matrix
+challengeType: 1
+forumTopicId: 302348
+dashedName: zig-zag-matrix
+---
+
+# --description--
+
+A 'zig-zag' array is a square arrangement of the first $N^2$ integers, where the numbers increase sequentially as you zig-zag along the array's anti-diagonals.
+
+For example, for the input `5`, the following result should be produced:
+
+<pre>
+ 0  1  5  6 14
+ 2  4  7 13 15
+ 3  8 12 16 21
+ 9 11 17 20 22
+10 18 19 23 24
+</pre>
+
+# --instructions--
+
+Write a function that takes the size of the zig-zag matrix, and returns the corresponding matrix as two-dimensional array.
+
+# --hints--
+
+ZigZagMatrix should be a function.
+
+```js
+assert.equal(typeof ZigZagMatrix, 'function');
+```
+
+ZigZagMatrix should return array.
+
+```js
+assert.equal(typeof ZigZagMatrix(1), 'object');
+```
+
+ZigZagMatrix should return an array of nested arrays.
+
+```js
+assert.equal(typeof ZigZagMatrix(1)[0], 'object');
+```
+
+ZigZagMatrix(1) should return \[[0]].
+
+```js
+assert.deepEqual(ZigZagMatrix(1), zm1);
+```
+
+ZigZagMatrix(2) should return \[[0, 1], [2, 3]].
+
+```js
+assert.deepEqual(ZigZagMatrix(2), zm2);
+```
+
+ZigZagMatrix(5) should return specified matrix.
+
+```js
+assert.deepEqual(ZigZagMatrix(5), zm5);
+```
+
+# --seed--
+
+## --after-user-code--
+
+```js
+const zm1 = [[0]];
+const zm2 = [[0, 1], [2, 3]];
+const zm5 = [
+  [0, 1, 5, 6, 14],
+  [2, 4, 7, 13, 15],
+  [3, 8, 12, 16, 21],
+  [9, 11, 17, 20, 22],
+  [10, 18, 19, 23, 24]
+];
+```
+
+## --seed-contents--
+
+```js
+function ZigZagMatrix(n) {
+
+  return [[], []];
+}
+```
+
+# --solutions--
+
+```js
+function ZigZagMatrix(n) {
+  const mtx = [];
+  for (let i = 0; i < n; i++) {
+    mtx[i] = [];
+  }
+
+  let i = 1;
+  let j = 1;
+  for (let e = 0; e < n * n; e++) {
+    mtx[i - 1][j - 1] = e;
+    if ((i + j) % 2 === 0) {
+      // Even stripes
+      if (j < n) j++;
+      else i += 2;
+      if (i > 1) i--;
+    } else {
+      // Odd stripes
+      if (i < n) i++;
+      else j += 2;
+      if (j > 1) j--;
+    }
+  }
+  return mtx;
+}
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-camper-leaderboard.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-camper-leaderboard.md
new file mode 100644
index 00000000000..1895c60f5ae
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-camper-leaderboard.md
@@ -0,0 +1,31 @@
+---
+id: bd7156d8c242eddfaeb5bd13
+title: Build a freeCodeCamp Forum Homepage
+challengeType: 3
+forumTopicId: 302349
+dashedName: build-a-freecodecamp-forum-homepage
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/JqdoMV>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** I can see a list of the most recent posts on the freeCodeCamp forum.
+
+**User Story:** For each topic, I can see the title and a list of links to users who have recently posted in it.
+
+**User Story:** I can see the number of replies and views that each topic has had, and a timestamp of when the topic was last active.
+
+**Hint:** To get the 30 most recent forum posts: <https://forum-proxy.freecodecamp.rocks/latest>.
+
+When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-light-bright-app.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-light-bright-app.md
new file mode 100644
index 00000000000..2a80ee5378e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-light-bright-app.md
@@ -0,0 +1,37 @@
+---
+id: 5a5d02bd919fcf9ca8cf46cb
+title: Build a Light-Bright App
+challengeType: 3
+forumTopicId: 302350
+dashedName: build-a-light-bright-app
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/eyLYXE>.
+
+**Rule #1:** Don't look at the example project's code. Figure it out for yourself.
+
+**Rule #2:** Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** I can click or drag the mouse cursor to color the circles.
+
+**User Story:** I can double-click on a colored circle to remove the color.
+
+**User Story:** I can click on a colored circle to change its color.
+
+**User Story:** I should get a circle of different color on each click.
+
+**User Story:** I can click on the 'Reset' button to remove the recent color.
+
+**User Story:** I can click on the 'Reset All' button to remove all the colors from the circles.
+
+When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md
new file mode 100644
index 00000000000..51255e5a7d5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-nightlife-coordination-app.md
@@ -0,0 +1,31 @@
+---
+id: bd7158d8c443eddfaeb5bdff
+title: Build a Nightlife Coordination App
+challengeType: 4
+forumTopicId: 302351
+dashedName: build-a-nightlife-coordination-app
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://yoyo44.herokuapp.com/" target="_blank" rel="noopener noreferrer nofollow">https://yoyo44.herokuapp.com/</a>. Use a site builder of your choice to complete the project.
+
+Here are the specific user stories you should implement for this project:
+
+**User Story:** As an unauthenticated user, you can view all bars in my area.
+
+**User Story:** As an authenticated user, you can add myself to a bar to indicate you am going there tonight.
+
+**User Story:** As an authenticated user, you can remove myself from a bar if you no longer want to go there.
+
+**User Story:** As an unauthenticated user, when you login you should not have to search again.
+
+**Hint:** Try using the Yelp API to find venues in the cities your users search for. If you use Yelp's API, be sure to mention so in your app.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-pinterest-clone.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-pinterest-clone.md
new file mode 100644
index 00000000000..3020d0b7ee8
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-pinterest-clone.md
@@ -0,0 +1,37 @@
+---
+id: bd7158d8c443eddfaeb5bdee
+title: Build a Pinterest Clone
+challengeType: 4
+forumTopicId: 302352
+dashedName: build-a-pinterest-clone
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://build-a-pinterest-clone.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://build-a-pinterest-clone.freecodecamp.rocks/</a>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** As an unauthenticated user, I can login with GitHub.
+
+**User Story:** As an authenticated user, I can link to images.
+
+**User Story:** As an authenticated user, I can delete images that I've linked to.
+
+**User Story:** As an authenticated user, I can see a Pinterest-style wall of all the images I've linked to.
+
+**User Story:** As an unauthenticated user, I can browse other users' walls of images.
+
+**User Story:** As an authenticated user, if I upload an image that is broken, it will be replaced by a placeholder image. (can use jQuery broken image detection)
+
+**Hint:** Masonry.js is a library that allows for Pinterest-style image grids.
+
+Once you've finished implementing these user stories, enter the URL to your live app and, optionally, your GitHub repository. Then click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-pong-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-pong-game.md
new file mode 100644
index 00000000000..3522056c712
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-pong-game.md
@@ -0,0 +1,33 @@
+---
+id: 5a4b7fcdb66f799f199e11db
+title: Build a Pong Game
+challengeType: 3
+forumTopicId: 302353
+dashedName: build-a-pong-game
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <https://codepen.io/satyamdev/full/pdMmBp>.
+
+**Rule #1:** Don't look at the example project's code. Figure it out for yourself.
+
+**Rule #2:** Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** I can control a paddle.
+
+**User Story:** The computer can control the other paddle.
+
+**User Story:** The computer's paddle is unbeatable. It should never miss the ball.
+
+**User Story:** The game keeps track of the player and computer's score.
+
+When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-recipe-box.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-recipe-box.md
new file mode 100644
index 00000000000..c457e33ccc1
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-recipe-box.md
@@ -0,0 +1,37 @@
+---
+id: bd7155d8c242eddfaeb5bd13
+title: Build a Recipe Box
+challengeType: 3
+forumTopicId: 302354
+dashedName: build-a-recipe-box
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://codepen.io/freeCodeCamp/full/dNVazZ/" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/dNVazZ/</a>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** I can create recipes that have names and ingredients.
+
+**User Story:** I can see an index view where the names of all the recipes are visible.
+
+**User Story:** I can click into any of those recipes to view it.
+
+**User Story:** I can edit these recipes.
+
+**User Story:** I can delete these recipes.
+
+**User Story:** All new recipes I add are saved in my browser's local storage. If I refresh the page, these recipes will still be there.
+
+**Hint:** You should prefix your local storage keys on CodePen, i.e. `_username_recipes`
+
+When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-roguelike-dungeon-crawler-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-roguelike-dungeon-crawler-game.md
new file mode 100644
index 00000000000..b43936fdfcb
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-roguelike-dungeon-crawler-game.md
@@ -0,0 +1,41 @@
+---
+id: bd7153d8c242eddfaeb5bd13
+title: Build a Roguelike Dungeon Crawler Game
+challengeType: 3
+forumTopicId: 302355
+dashedName: build-a-roguelike-dungeon-crawler-game
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://codepen.io/freeCodeCamp/full/apLXEJ/" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/apLXEJ/</a>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** I have health, a level, and a weapon. I can pick up a better weapon. I can pick up health items.
+
+**User Story:** All the items and enemies on the map are arranged at random.
+
+**User Story:** I can move throughout a map, discovering items.
+
+**User Story:** I can move anywhere within the map's boundaries, but I can't move through an enemy until I've beaten it.
+
+**User Story:** Much of the map is hidden. When I take a step, all spaces that are within a certain number of spaces from me are revealed.
+
+**User Story:** When I beat an enemy, the enemy goes away and I get XP, which eventually increases my level.
+
+**User Story:** When I fight an enemy, we take turns damaging each other until one of us loses. I do damage based off of my level and my weapon. The enemy does damage based off of its level. Damage is somewhat random within a range.
+
+**User Story:** When I find and beat the boss, I win.
+
+**User Story:** The game should be challenging, but theoretically winnable.
+
+When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-simon-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-simon-game.md
new file mode 100644
index 00000000000..2ff2d760541
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-simon-game.md
@@ -0,0 +1,41 @@
+---
+id: bd7158d8c442eddfaeb5bd1c
+title: Build a Simon Game
+challengeType: 3
+forumTopicId: 302357
+dashedName: build-a-simon-game
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://codepen.io/freeCodeCamp/full/obYBjE" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/obYBjE</a>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** I am presented with a random series of button presses.
+
+**User Story:** Each time I input a series of button presses correctly, I see the same series of button presses but with an additional step.
+
+**User Story:** I hear a sound that corresponds to each button both when the series of button presses plays, and when I personally press a button.
+
+**User Story:** If I press the wrong button, I am notified that I have done so, and that series of button presses starts again to remind me of the pattern so I can try again.
+
+**User Story:** I can see how many steps are in the current series of button presses.
+
+**User Story:** If I want to restart, I can hit a button to do so, and the game will return to a single step.
+
+**User Story:** I can play in strict mode where if I get a button press wrong, it notifies me that I have done so, and the game restarts at a new random series of button presses.
+
+**User Story:** I can win the game by getting a series of 20 steps correct. I am notified of my victory, then the game starts over.
+
+**Hint:** Here are mp3s you can use for each button: `https://s3.amazonaws.com/freecodecamp/simonSound1.mp3`, `https://s3.amazonaws.com/freecodecamp/simonSound2.mp3`, `https://s3.amazonaws.com/freecodecamp/simonSound3.mp3`, `https://s3.amazonaws.com/freecodecamp/simonSound4.mp3`.
+
+When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-tic-tac-toe-game.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-tic-tac-toe-game.md
new file mode 100644
index 00000000000..2f79f73178e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-tic-tac-toe-game.md
@@ -0,0 +1,29 @@
+---
+id: bd7158d8c442eedfaeb5bd1c
+title: Build a Tic Tac Toe Game
+challengeType: 3
+forumTopicId: 302358
+dashedName: build-a-tic-tac-toe-game
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://codepen.io/freeCodeCamp/full/KzXQgy/" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/KzXQgy/</a>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** I can play a game of Tic Tac Toe with the computer.
+
+**User Story:** My game will reset as soon as it's over so I can play again.
+
+**User Story:** I can choose whether I want to play as X or O.
+
+When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-voting-app.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-voting-app.md
new file mode 100644
index 00000000000..c5e1f8c05dd
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-voting-app.md
@@ -0,0 +1,37 @@
+---
+id: bd7158d8c443eddfaeb5bdef
+title: Build a Voting App
+challengeType: 4
+forumTopicId: 302359
+dashedName: build-a-voting-app
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://voting-app.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://voting-app.freecodecamp.rocks/</a>. Use a site builder of your choice to complete the project.
+
+Here are the specific user stories you should implement for this project:
+
+**User Story:** As an authenticated user, you can keep my polls and come back later to access them.
+
+**User Story:** As an authenticated user, you can share my polls with my friends.
+
+**User Story:** As an authenticated user, you can see the aggregate results of my polls.
+
+**User Story:** As an authenticated user, you can delete polls that I decide I don't want anymore.
+
+**User Story:** As an authenticated user, you can create a poll with any number of possible items.
+
+**User Story:** As an unauthenticated or authenticated user, you can see and vote on everyone's polls.
+
+**User Story:** As an unauthenticated or authenticated user, you can see the results of polls in chart form. (This could be implemented using Chart.js or Google Charts.)
+
+**User Story:** As an authenticated user, if you don't like the options on a poll, you can create a new option.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-wikipedia-viewer.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-wikipedia-viewer.md
new file mode 100644
index 00000000000..adcef83386e
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-a-wikipedia-viewer.md
@@ -0,0 +1,31 @@
+---
+id: bd7158d8c442eddfaeb5bd19
+title: Build a Wikipedia Viewer
+challengeType: 3
+forumTopicId: 302360
+dashedName: build-a-wikipedia-viewer
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://codepen.io/freeCodeCamp/full/wGqEga/" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/wGqEga/</a>.
+
+The MediaWiki software powers Wikipedia, and it helps you collect and organize knowledge and make it available to people.
+
+Using the MediaWiki API, replicate the search function and random article function, similar to the example app above. You can use Wikipedia as your data source.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** I can search Wikipedia entries in a search box and see the resulting Wikipedia entries.
+
+**User Story:** I can click a button to see a random Wikipedia entry.
+
+When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md
new file mode 100644
index 00000000000..47cee2ababe
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-an-image-search-abstraction-layer.md
@@ -0,0 +1,27 @@
+---
+id: bd7158d8c443edefaeb5bdee
+title: Build an Image Search Abstraction Layer
+challengeType: 4
+forumTopicId: 302361
+dashedName: build-an-image-search-abstraction-layer
+---
+
+# --description--
+
+Build a full stack JavaScript app that allows you to search for images like this: <a href="https://image-search-abstraction-layer.freecodecamp.rocks/query/lolcats%20funny?page=10" target="_blank" rel="noopener noreferrer nofollow">https://image-search-abstraction-layer.freecodecamp.rocks/query/lolcats%20funny?page=10</a> and browse recent search queries like this: <a href="https://image-search-abstraction-layer.freecodecamp.rocks/recent/" target="_blank" rel="noopener noreferrer nofollow">https://image-search-abstraction-layer.freecodecamp.rocks/recent/</a>. Use a site builder of your choice to complete the project.
+
+Here are the specific user stories you should implement for this project:
+
+**User Story:** You can get the image URLs, description and page URLs for a set of images relating to a given search string.
+
+**User Story:** You can paginate through the responses by adding a `?page=2` parameter to the URL.
+
+**User Story:** You can get a list of the most recently submitted search strings.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-the-game-of-life.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-the-game-of-life.md
new file mode 100644
index 00000000000..8a07168f613
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/build-the-game-of-life.md
@@ -0,0 +1,46 @@
+---
+id: bd7154d8c242eddfaeb5bd13
+title: Build the Game of Life
+challengeType: 3
+forumTopicId: 302362
+dashedName: build-the-game-of-life
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://codepen.io/freeCodeCamp/full/BpwMZv/" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/BpwMZv/</a>.
+
+The Game of Life is a cellular automaton devised by the British mathematician John Horton Conway. It is a <em>zero-player game</em>, meaning that its evolution is determined by its initial state, requiring no further input. One interacts with the Game of Life by creating an initial configuration and observing how it evolves.
+
+The universe of the Game of Life is an infinite, two-dimensional orthogonal grid of square cells, each of which is in one of two possible states, populated and unpopulated. Every cell interacts with its eight neighbours, which are the cells that are horizontally, vertically, or diagonally adjacent.
+
+At each step in time, the following transitions occur:
+
+- Any live cell with fewer than two live neighbours dies, as if by underpopulation.
+- Any live cell with two or three live neighbours lives on to the next generation.
+- Any live cell with more than three live neighbours dies, as if by overpopulation.
+- Any dead cell with exactly three live neighbours becomes a live cell, as if by reproduction.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** When I first arrive at the game, it will randomly generate a board and start playing.
+
+**User Story:** I can start and stop the board.
+
+**User Story:** I can set up the board.
+
+**User Story:** I can clear the board.
+
+**User Story:** When I press start, the game will play out.
+
+**User Story:** Each time the board changes, I can see how many generations have gone by.
+
+When you are finished, include a link to your project and click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md
new file mode 100644
index 00000000000..a5562365284
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/chart-the-stock-market.md
@@ -0,0 +1,29 @@
+---
+id: bd7158d8c443eddfaeb5bd0e
+title: Chart the Stock Market
+challengeType: 4
+forumTopicId: 302363
+dashedName: chart-the-stock-market
+---
+
+# --description--
+
+Build a full stack JavaScript app that is functionally similar to this: <a href="https://chart-the-stock-market.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://chart-the-stock-market.freecodecamp.rocks/</a>. Use a site builder of your choice to complete the project.
+
+Here are the specific user stories you should implement for this project:
+
+**User Story:** You can view a graph displaying the recent trend lines for each added stock.
+
+**User Story:** You can add new stocks by their symbol name.
+
+**User Story:** You can remove stocks.
+
+**User Story:** You can see changes in real-time when any other user adds or removes a stock. For this you will need to use Web Sockets.
+
+When you are done, make sure a working demo of your project is hosted somewhere public. Then submit the URL to it in the `Solution Link` field. Optionally, also submit a link to your project's source code in the `GitHub Link` field.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/manage-a-book-trading-club.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/manage-a-book-trading-club.md
new file mode 100644
index 00000000000..fca6420cdc5
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/manage-a-book-trading-club.md
@@ -0,0 +1,31 @@
+---
+id: bd7158d8c443eddfaeb5bd0f
+title: Manage a Book Trading Club
+challengeType: 4
+forumTopicId: 302364
+dashedName: manage-a-book-trading-club
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://manage-a-book-trading-club.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://manage-a-book-trading-club.freecodecamp.rocks/</a>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** I can view all books posted by every user.
+
+**User Story:** I can add a new book.
+
+**User Story:** I can update my settings to store my full name, city, and state.
+
+**User Story:** I can propose a trade and wait for the other user to accept the trade.
+
+Once you've finished implementing these user stories, enter the URL to your live app and, optionally, your GitHub repository. Then click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/map-data-across-the-globe.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/map-data-across-the-globe.md
new file mode 100644
index 00000000000..951f1c5c429
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/map-data-across-the-globe.md
@@ -0,0 +1,31 @@
+---
+id: bd7108d8c242eddfaeb5bd13
+title: Map Data Across the Globe
+challengeType: 3
+forumTopicId: 302365
+dashedName: map-data-across-the-globe
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/mVEJag>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** I can see where all Meteorites landed on a world map.
+
+**User Story:** I can tell the relative size of the meteorite, just by looking at the way it's represented on the map.
+
+**User Story:** I can mouse over the meteorite's data point for additional data.
+
+**Hint:** Here's a dataset you can use to build this: <https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json>
+
+When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/p2p-video-chat-application.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/p2p-video-chat-application.md
new file mode 100644
index 00000000000..590a5bb4a00
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/p2p-video-chat-application.md
@@ -0,0 +1,41 @@
+---
+id: bd7150d8c442eddfafb5bd1c
+title: P2P Video Chat Application
+challengeType: 4
+forumTopicId: 302366
+dashedName: p2p-video-chat-application
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://p2p-video-chat-application.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://p2p-video-chat-application.freecodecamp.rocks/</a>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** Upon arriving, the browser will prompt me to access my camera and microphone.
+
+**User Story:** After I give it permission, I am prompted to type in a room name.
+
+**User Story:** Once I type in the room name, a room will be created if no room of that name existed before.
+
+**User Story:** A friend of mine can subsequently go to the same website, type in the same room I entered, and join the same room, then enter into a video chat with me.
+
+**User Story:** If I type in a room name, and there are already two people in that room, I get a notification that the room is full.
+
+**User Story:** Anyone can create or join any room. And there can be any number of rooms, but all of them must have unique names.
+
+**User Story:** I can choose to not permit the site to access my microphone and webcam. If I choose not to do this, or if some other driver problem occurs, I see an error message saying these are required.
+
+**User Story:** When I choose to cancel the room name input step, or if I type in no name, or just spaces, it should again ask me again to type in a valid room name.
+
+**User Story:** If one of the two people in the room get disconnected, they can reconnect to the same room and continue chatting.
+
+Once you've finished implementing these user stories, enter the URL to your live app and, optionally, your GitHub repository. Then click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/show-national-contiguity-with-a-force-directed-graph.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/show-national-contiguity-with-a-force-directed-graph.md
new file mode 100644
index 00000000000..23f76537c24
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/show-national-contiguity-with-a-force-directed-graph.md
@@ -0,0 +1,31 @@
+---
+id: bd7198d8c242eddfaeb5bd13
+title: Show National Contiguity with a Force Directed Graph
+challengeType: 3
+forumTopicId: 302367
+dashedName: show-national-contiguity-with-a-force-directed-graph
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/XWEONRz>.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** I can see a Force-directed Graph that shows which countries share borders.
+
+**User Story:** I can see each country's flag on its node.
+
+**Hint:** Here's a dataset you can use to build this: <https://raw.githubusercontent.com/DealPete/forceDirected/master/countries.json>
+
+**Hint:** You can create a spritesheet of national flags at <https://www.flag-sprites.com>.
+
+When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/show-the-local-weather.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/show-the-local-weather.md
new file mode 100644
index 00000000000..d5b751f8a62
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/show-the-local-weather.md
@@ -0,0 +1,33 @@
+---
+id: bd7158d8c442eddfaeb5bd10
+title: Show the Local Weather
+challengeType: 3
+forumTopicId: 302368
+dashedName: show-the-local-weather
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://codepen.io/freeCodeCamp/full/bELRjV" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/bELRjV</a>.
+
+**Rule #1:** Don't look at the example project's code. Figure it out for yourself.
+
+**Rule #2:** Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** I can see the weather in my current location.
+
+**User Story:** I can see a different icon or background image (e.g. snowy mountain, hot desert) depending on the weather.
+
+**User Story:** I can push a button to toggle between Fahrenheit and Celsius.
+
+**Note:** Many internet browsers now require an HTTP Secure (`https://`) connection to obtain a user's locale via HTML5 Geolocation. For this reason, we recommend using HTML5 Geolocation to get user location and then use the freeCodeCamp Weather API <a href="https://weather-proxy.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://weather-proxy.freecodecamp.rocks/</a> which uses an HTTP Secure connection for the weather. Also, be sure to connect to <a href="https://codepen.io" target="_blank" rel="noopener noreferrer nofollow">CodePen.io</a> via `https://`.
+
+When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/use-the-twitch-json-api.md b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/use-the-twitch-json-api.md
new file mode 100644
index 00000000000..328ba2183d2
--- /dev/null
+++ b/curriculum/challenges/arabic/10-coding-interview-prep/take-home-projects/use-the-twitch-json-api.md
@@ -0,0 +1,35 @@
+---
+id: bd7158d8c442eddfaeb5bd1f
+title: Use the Twitch JSON API
+challengeType: 3
+forumTopicId: 19541
+dashedName: use-the-twitch-json-api
+---
+
+# --description--
+
+**Objective:** Build an app that is functionally similar to this: <a href="https://codepen.io/freeCodeCamp/full/Myvqmo/" target="_blank" rel="noopener noreferrer nofollow">https://codepen.io/freeCodeCamp/full/Myvqmo/</a>.
+
+The Twitch API is a RESTful API that lets developers build creative integrations for the broader Twitch community.
+
+Fulfill the below user stories and get all of the tests to pass. Use whichever libraries or APIs you need. Give it your own personal style.
+
+**User Story:** I can see whether freeCodeCamp is currently streaming on Twitch.tv.
+
+**User Story:** I can click the status output and be sent directly to the freeCodeCamp's Twitch.tv channel.
+
+**User Story:** If a Twitch user is currently streaming, I can see additional details about what they are streaming.
+
+**Hint:** Here's an array of the Twitch.tv usernames of people who regularly stream: `["ESL_SC2", "OgamingSC2", "cretetion", "freecodecamp", "storbeck", "habathcx", "RobotCaleb", "noobs2ninjas"]`
+
+**UPDATE:** Due to a change in conditions on API usage, Twitch.tv requires an API key, but we've built a workaround. Use <a href="https://twitch-proxy.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://twitch-proxy.freecodecamp.rocks/</a> instead of Twitch's API base URL and you'll still be able to get account information, without needing to sign up for an API key.
+
+When you are finished, include a link to your project on CodePen and click the "I've completed this challenge" button.
+
+You can get feedback on your project by sharing it on the <a href="https://forum.freecodecamp.org/c/project-feedback/409" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp forum</a>.
+
+# --solutions--
+
+```js
+// solution required
+```
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/deep-learning-demystified.md b/curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/deep-learning-demystified.md
new file mode 100644
index 00000000000..7d7338ee653
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/deep-learning-demystified.md
@@ -0,0 +1,34 @@
+---
+id: 5e9a0e9ef99a403d019610cc
+title: Deep Learning Demystified
+challengeType: 11
+videoId: bejQ-W9BGJg
+dashedName: deep-learning-demystified
+---
+
+# --question--
+
+## --text--
+
+How should you assign weights to input neurons before training your network for the first time?
+
+## --answers--
+
+From smallest to largest.
+
+---
+
+Completely randomly.
+
+---
+
+Alphabetically.
+
+---
+
+None of the above.
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/how-convolutional-neural-networks-work.md b/curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/how-convolutional-neural-networks-work.md
new file mode 100644
index 00000000000..b06b2fbed8a
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/how-convolutional-neural-networks-work.md
@@ -0,0 +1,30 @@
+---
+id: 5e9a0e9ef99a403d019610cd
+title: How Convolutional Neural Networks work
+challengeType: 11
+videoId: Y5M7KH4A4n4
+dashedName: how-convolutional-neural-networks-work
+---
+
+# --question--
+
+## --text--
+
+When are Convolutional Neural Networks not useful?
+
+## --answers--
+
+If your data can't be made to look like an image, or if you can rearrange elements of your data and it's still just as useful.
+
+---
+
+If your data is made up of different 2D or 3D images.
+
+---
+
+If your data is text or sound based.
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/how-deep-neural-networks-work.md b/curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/how-deep-neural-networks-work.md
new file mode 100644
index 00000000000..ae41c9be52a
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/how-deep-neural-networks-work.md
@@ -0,0 +1,30 @@
+---
+id: 5e9a0e9ef99a403d019610ca
+title: How Deep Neural Networks Work
+challengeType: 11
+videoId: zvalnHWGtx4
+dashedName: how-deep-neural-networks-work
+---
+
+# --question--
+
+## --text--
+
+Why is it better to calculate the gradient (slope) directly rather than numerically?
+
+## --answers--
+
+It is computationally expensive to go back through the entire neural network and adjust the weights for each layer of the neural network.
+
+---
+
+It is more accurate.
+
+---
+
+There is no difference between the two methods.
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/recurrent-neural-networks-rnn-and-long-short-term-memory-lstm.md b/curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/recurrent-neural-networks-rnn-and-long-short-term-memory-lstm.md
new file mode 100644
index 00000000000..ab702e9b666
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/how-neural-networks-work/recurrent-neural-networks-rnn-and-long-short-term-memory-lstm.md
@@ -0,0 +1,30 @@
+---
+id: 5e9a0e9ef99a403d019610cb
+title: Recurrent Neural Networks RNN and Long Short Term Memory LSTM
+challengeType: 11
+videoId: UVimlsy9eW0
+dashedName: recurrent-neural-networks-rnn-and-long-short-term-memory-lstm
+---
+
+# --question--
+
+## --text--
+
+What are the main neural network components that make up a Long Short Term Memory network?
+
+## --answers--
+
+New information and prediction.
+
+---
+
+Prediction, collected possibilities, and selection.
+
+---
+
+Prediction, ignoring, forgetting, and selection.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/book-recommendation-engine-using-knn.md b/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/book-recommendation-engine-using-knn.md
new file mode 100644
index 00000000000..a34c3555c2f
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/book-recommendation-engine-using-knn.md
@@ -0,0 +1,68 @@
+---
+id: 5e46f8e3ac417301a38fb92f
+title: Book Recommendation Engine using KNN
+challengeType: 10
+forumTopicId: 462378
+dashedName: book-recommendation-engine-using-knn
+---
+
+# --description--
+
+You will be <a href="https://colab.research.google.com/github/freeCodeCamp/boilerplate-book-recommendation-engine/blob/master/fcc_book_recommendation_knn.ipynb" target="_blank" rel="noopener noreferrer nofollow">working on this project with Google Colaboratory</a>.
+
+After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link."
+
+We are still developing the interactive instructional content for the machine learning curriculum. For now, you can go through the video challenges in this certification. You may also have to seek out additional learning resources, similar to what you would do when working on a real-world project.
+
+# --instructions--
+
+In this challenge, you will create a book recommendation algorithm using **K-Nearest Neighbors**.
+
+You will use the <a href="http://www2.informatik.uni-freiburg.de/~cziegler/BX/" target="_blank" rel="noopener noreferrer nofollow">Book-Crossings dataset</a>. This dataset contains 1.1 million ratings (scale of 1-10) of 270,000 books by 90,000 users.
+
+After importing and cleaning the data, use `NearestNeighbors` from `sklearn.neighbors` to develop a model that shows books that are similar to a given book. The Nearest Neighbors algorithm measures the distance to determine the “closeness” of instances.
+
+Create a function named `get_recommends` that takes a book title (from the dataset) as an argument and returns a list of 5 similar books with their distances from the book argument.
+
+This code:
+
+```py
+get_recommends("The Queen of the Damned (Vampire Chronicles (Paperback))")
+```
+
+should return:
+
+```py
+[
+  'The Queen of the Damned (Vampire Chronicles (Paperback))',
+  [
+    ['Catch 22', 0.793983519077301], 
+    ['The Witching Hour (Lives of the Mayfair Witches)', 0.7448656558990479], 
+    ['Interview with the Vampire', 0.7345068454742432],
+    ['The Tale of the Body Thief (Vampire Chronicles (Paperback))', 0.5376338362693787],
+    ['The Vampire Lestat (Vampire Chronicles, Book II)', 0.5178412199020386]
+  ]
+]
+```
+
+Notice that the data returned from `get_recommends()` is a list. The first element in the list is the book title passed into the function. The second element in the list is a list of five more lists. Each of the five lists contains a recommended book and the distance from the recommended book to the book passed into the function.
+
+If you graph the dataset (optional), you will notice that most books are not rated frequently. To ensure statistical significance, remove from the dataset users with less than 200 ratings and books with less than 100 ratings.
+
+The first three cells import libraries you may need and the data to use. The final cell is for testing. Write all your code in between those cells.
+
+# --hints--
+
+It should pass all Python tests.
+
+```js
+
+```
+
+# --solutions--
+
+```py
+  # Python challenges don't need solutions,
+  # because they would need to be tested against a full working project.
+  # Please check our contributing guidelines to learn more.
+```
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/cat-and-dog-image-classifier.md b/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/cat-and-dog-image-classifier.md
new file mode 100644
index 00000000000..f43cc60a47c
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/cat-and-dog-image-classifier.md
@@ -0,0 +1,117 @@
+---
+id: 5e46f8dcac417301a38fb92e
+title: Cat and Dog Image Classifier
+challengeType: 10
+forumTopicId: 462377
+dashedName: cat-and-dog-image-classifier
+---
+
+# --description--
+
+You will be <a href="https://colab.research.google.com/github/freeCodeCamp/boilerplate-cat-and-dog-image-classifier/blob/master/fcc_cat_dog.ipynb" target="_blank" rel="noopener noreferrer nofollow">working on this project with Google Colaboratory</a>.
+
+After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link."
+
+We are still developing the interactive instructional content for the machine learning curriculum. For now, you can go through the video challenges in this certification. You may also have to seek out additional learning resources, similar to what you would do when working on a real-world project.
+
+# --instructions--
+
+For this challenge, you will complete the code  to classify images of dogs and cats. You will use TensorFlow 2.0 and Keras to create a convolutional neural network that correctly classifies images of cats and dogs at least 63% of the time. (Extra credit if you get it to 70% accuracy!)
+
+Some of the code is given to you but some code you must fill in to complete this challenge. Read the instruction in each text cell so you will know what you have to do in each code cell.
+
+The first code cell imports the required libraries. The second code cell downloads the data and sets key variables. The third cell is the first place you will write your own code.
+
+The structure of the dataset files that are downloaded looks like this (You will notice that the test directory has no subdirectories and the images are not labeled):
+
+```py
+cats_and_dogs
+|__ train:
+    |______ cats: [cat.0.jpg, cat.1.jpg ...]
+    |______ dogs: [dog.0.jpg, dog.1.jpg ...]
+|__ validation:
+    |______ cats: [cat.2000.jpg, cat.2001.jpg ...]
+    |______ dogs: [dog.2000.jpg, dog.2001.jpg ...]
+|__ test: [1.jpg, 2.jpg ...]
+```
+
+You can tweak epochs and batch size if you like, but it is not required.
+
+The following instructions correspond to specific cell numbers, indicated with a comment at the top of the cell (such as `# 3`).
+
+## Cell 3
+
+Now it is your turn! Set each of the variables in this cell correctly. (They should no longer equal `None`.)
+
+Create image generators for each of the three image data sets (train, validation, test). Use `ImageDataGenerator` to read / decode the images and convert them into floating point tensors. Use the `rescale` argument (and no other arguments for now) to rescale the tensors from values between 0 and 255 to values between 0 and 1.
+
+For the `*_data_gen` variables, use the `flow_from_directory` method. Pass in the batch size, directory, target size (`(IMG_HEIGHT, IMG_WIDTH)`), class mode, and anything else required. `test_data_gen` will be the trickiest one. For `test_data_gen`, make sure to pass in `shuffle=False` to the `flow_from_directory` method. This will make sure the final predictions stay is in the order that our test expects. For `test_data_gen` it will also be helpful to observe the directory structure.
+
+
+After you run the code, the output should look like this:
+
+```py
+Found 2000 images belonging to 2 classes.
+Found 1000 images belonging to 2 classes.
+Found 50 images belonging to 1 class.
+```
+
+## Cell 4
+
+The `plotImages` function will be used a few times to plot images. It takes an array of images and a probabilities list, although the probabilities list is optional. This code is given to you. If you created the `train_data_gen` variable correctly, then running this cell will plot five random training images.
+
+## Cell 5
+
+Recreate the `train_image_generator` using `ImageDataGenerator`.
+
+Since there are a small number of training examples, there is a risk of overfitting. One way to fix this problem is by creating more training data from existing training examples by using random transformations.
+
+Add 4-6 random transformations as arguments to `ImageDataGenerator`. Make sure to rescale the same as before.
+
+## Cell 6
+
+You don't have to do anything for this cell. `train_data_gen` is created just like before but with the new `train_image_generator`. Then, a single image is plotted five different times using different variations.
+
+## Cell 7
+
+In this cell, create a model for the neural network that outputs class probabilities. It should use the Keras Sequential model. It will probably involve a stack of Conv2D and MaxPooling2D layers and then a fully connected layer on top that is activated by a ReLU activation function.
+
+Compile the model passing the arguments to set the optimizer and loss. Also pass in `metrics=['accuracy']` to view training and validation accuracy for each training epoch.
+
+## Cell 8
+
+Use the `fit` method on your `model` to train the network. Make sure to pass in arguments for `x`, `steps_per_epoch`, `epochs`, `validation_data`, and `validation_steps`.
+
+## Cell 9
+
+Run this cell to visualize the accuracy and loss of the model.
+
+## Cell 10
+
+Now it is time to use your model to predict whether a brand new image is a cat or a dog.
+
+In this cell, get the probability that each test image (from `test_data_gen`) is a dog or a cat. `probabilities` should be a list of integers.
+
+Call the `plotImages` function and pass in the test images and the probabilities corresponding to each test image.
+
+After you run the cell, you should see all 50 test images with a label showing the percentage of "sure" that the image is a cat or a dog. The accuracy will correspond to the accuracy shown in the graph above (after running the previous cell). More training images could lead to a higher accuracy.
+
+## Cell 11
+
+Run this final cell to see if you passed the challenge or if you need to keep trying.
+
+# --hints--
+
+It should pass all Python tests.
+
+```js
+
+```
+
+# --solutions--
+
+```py
+  # Python challenges don't need solutions,
+  # because they would need to be tested against a full working project.
+  # Please check our contributing guidelines to learn more.
+```
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/linear-regression-health-costs-calculator.md b/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/linear-regression-health-costs-calculator.md
new file mode 100644
index 00000000000..12b00902ff9
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/linear-regression-health-costs-calculator.md
@@ -0,0 +1,49 @@
+---
+id: 5e46f8edac417301a38fb930
+title: Linear Regression Health Costs Calculator
+challengeType: 10
+forumTopicId: 462379
+dashedName: linear-regression-health-costs-calculator
+---
+
+# --description--
+
+You will be <a href="https://colab.research.google.com/github/freeCodeCamp/boilerplate-linear-regression-health-costs-calculator/blob/master/fcc_predict_health_costs_with_regression.ipynb" target="_blank" rel="noopener noreferrer nofollow">working on this project with Google Colaboratory</a>.
+
+After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link."
+
+We are still developing the interactive instructional content for the machine learning curriculum. For now, you can go through the video challenges in this certification. You may also have to seek out additional learning resources, similar to what you would do when working on a real-world project.
+
+# --instructions--
+
+In this challenge, you will predict healthcare costs using a regression algorithm.
+
+You are given a dataset that contains information about different people including their healthcare costs. Use the data to predict healthcare costs based on new data.
+
+The first two cells of this notebook import libraries and the data.
+
+Make sure to convert categorical data to numbers. Use 80% of the data as the `train_dataset` and 20% of the data as the `test_dataset`.
+
+`pop` off the "expenses" column from these datasets to create new datasets called `train_labels` and `test_labels`. Use these labels when training your model.
+
+Create a model and train it with the `train_dataset`. Run the final cell in this notebook to check your model. The final cell will use the unseen `test_dataset` to check how well the model generalizes.
+
+To pass the challenge, `model.evaluate` must return a Mean Absolute Error of under 3500. This means it predicts health care costs correctly within $3500.
+
+The final cell will also predict expenses using the `test_dataset` and graph the results.
+
+# --hints--
+
+It should pass all Python tests.
+
+```js
+
+```
+
+# --solutions--
+
+```py
+  # Python challenges don't need solutions,
+  # because they would need to be tested against a full working project.
+  # Please check our contributing guidelines to learn more.
+```
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/neural-network-sms-text-classifier.md b/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/neural-network-sms-text-classifier.md
new file mode 100644
index 00000000000..2c24a783132
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/neural-network-sms-text-classifier.md
@@ -0,0 +1,41 @@
+---
+id: 5e46f8edac417301a38fb931
+title: Neural Network SMS Text Classifier
+challengeType: 10
+forumTopicId: 462380
+dashedName: neural-network-sms-text-classifier
+---
+
+# --description--
+
+You will be <a href="https://colab.research.google.com/github/freeCodeCamp/boilerplate-neural-network-sms-text-classifier/blob/master/fcc_sms_text_classification.ipynb" target="_blank" rel="noopener noreferrer nofollow">working on this project with Google Colaboratory</a>.
+
+After going to that link, create a copy of the notebook either in your own account or locally. Once you complete the project and it passes the test (included at that link), submit your project link below. If you are submitting a Google Colaboratory link, make sure to turn on link sharing for "anyone with the link."
+
+We are still developing the interactive instructional content for the machine learning curriculum. For now, you can go through the video challenges in this certification. You may also have to seek out additional learning resources, similar to what you would do when working on a real-world project.
+
+# --instructions--
+
+In this challenge, you need to create a machine learning model that will classify SMS messages as either "ham" or "spam". A "ham" message is a normal message sent by a friend. A "spam" message is an advertisement or a message sent by a company.
+
+You should create a function called `predict_message` that takes a message string as an argument and returns a list. The first element in the list should be a number between zero and one that indicates the likeliness of "ham" (0) or "spam" (1). The second element in the list should be the word "ham" or "spam", depending on which is most likely.
+
+For this challenge, you will use the <a href="http://www.dt.fee.unicamp.br/~tiago/smsspamcollection/" target="_blank" rel="noopener noreferrer nofollow">SMS Spam Collection</a> dataset. The dataset has already been grouped into train data and test data.
+
+The first two cells import the libraries and data. The final cell tests your model and function. Add your code in between these cells.
+
+# --hints--
+
+It should pass all Python tests.
+
+```js
+
+```
+
+# --solutions--
+
+```py
+  # Python challenges don't need solutions,
+  # because they would need to be tested against a full working project.
+  # Please check our contributing guidelines to learn more.
+```
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/rock-paper-scissors.md b/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/rock-paper-scissors.md
new file mode 100644
index 00000000000..11ba8ef9b4e
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/machine-learning-with-python-projects/rock-paper-scissors.md
@@ -0,0 +1,73 @@
+---
+id: 5e46f8d6ac417301a38fb92d
+title: Rock Paper Scissors
+challengeType: 10
+forumTopicId: 462376
+dashedName: rock-paper-scissors
+---
+
+# --description--
+
+For this challenge, you will create a program to play Rock, Paper, Scissors. A program that picks at random will usually win 50% of the time. To pass this challenge your program must play matches against four different bots, winning at least 60% of the games in each match.
+
+You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-rock-paper-scissors" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+
+We are still developing the interactive instructional part of the machine learning curriculum. For now, you will have to use other resources to learn how to pass this challenge.
+
+# --instructions--
+
+In the file `RPS.py` you are provided with a function called `player`. The function takes an argument that is a string describing the last move of the opponent ("R", "P", or "S"). The function should return a string representing the next move for it to play ("R", "P", or "S").
+
+A player function will receive an empty string as an argument for the first game in a match since there is no previous play.
+
+The file `RPS.py` shows an example function that you will need to update. The example function is defined with two arguments (`player(prev_play, opponent_history = [])`). The function is never called with a second argument so that one is completely optional. The reason why the example function contains a second argument (`opponent_history = []`) is because that is the only way to save state between consecutive calls of the `player` function. You only need the `opponent_history` argument if you want to keep track of the opponent_history.
+
+*Hint: To defeat all four opponents, your program may need to have multiple strategies that change depending on the plays of the opponent.*
+
+## Development
+
+Do not modify `RPS_game.py`. Write all your code in `RPS.py`. For development, you can use `main.py` to test your code.
+
+`main.py` imports the game function and bots from `RPS_game.py`.
+
+To test your code, play a game with the `play` function. The `play` function takes four arguments:
+
+- two players to play against each other (the players are actually functions)
+- the number of games to play in the match
+- an optional argument to see a log of each game. Set it to `True` to see these messages.
+
+```py
+play(player1, player2, num_games[, verbose])
+```
+
+For example, here is how you would call the function if you want `player` and `quincy` to play 1000 games against each other and you want to see the results of each game:
+
+```py
+play(player, quincy, 1000, verbose=True)
+```
+
+Click the "run" button and `main.py` will run.
+
+## Testing
+
+The unit tests for this project are in `test_module.py`. We imported the tests from `test_module.py` to `main.py` for your convenience. If you uncomment the last line in `main.py`, the tests will run automatically whenever you hit the "run" button.
+
+## Submitting
+
+Copy your project's URL and submit it below.
+
+# --hints--
+
+It should pass all Python tests.
+
+```js
+
+```
+
+# --solutions--
+
+```py
+  # Python challenges don't need solutions,
+  # because they would need to be tested against a full working project.
+  # Please check our contributing guidelines to learn more.
+```
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/conclusion.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/conclusion.md
new file mode 100644
index 00000000000..884b03adb12
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/conclusion.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72da6
+title: Conclusion
+challengeType: 11
+videoId: LMNub5frQi4
+bilibiliIds:
+  aid: 208033449
+  bvid: BV1Wh411p79h
+  cid: 409139716
+dashedName: conclusion
+---
+
+# --question--
+
+## --text--
+
+Most people that are experts in AI or machine learning usually...:
+
+## --answers--
+
+have one specialization.
+
+---
+
+have many specializations.
+
+---
+
+have a deep understanding of many different frameworks.
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-evaluating-the-model.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-evaluating-the-model.md
new file mode 100644
index 00000000000..80ad5231d5b
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-evaluating-the-model.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d99
+title: 'Convolutional Neural Networks: Evaluating the Model'
+challengeType: 11
+videoId: eCATNvwraXg
+bilibiliIds:
+  aid: 933030136
+  bvid: BV1hM4y1g7Bx
+  cid: 409132265
+dashedName: convolutional-neural-networks-evaluating-the-model
+---
+
+# --question--
+
+## --text--
+
+What is **not** a good way to increase the accuracy of a convolutional neural network?
+
+## --answers--
+
+Augmenting the data you already have.
+
+---
+
+Using a pre-trained model.
+
+---
+
+Using your test data to retrain the model.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-picking-a-pretrained-model.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-picking-a-pretrained-model.md
new file mode 100644
index 00000000000..131933f1202
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-picking-a-pretrained-model.md
@@ -0,0 +1,53 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d9a
+title: 'Convolutional Neural Networks: Picking a Pretrained Model'
+challengeType: 11
+videoId: h1XUt1AgIOI
+bilibiliIds:
+  aid: 463063633
+  bvid: BV1qL411x73q
+  cid: 409132626
+dashedName: convolutional-neural-networks-picking-a-pretrained-model
+---
+
+# --question--
+
+## --text--
+
+Fill in the blanks below to use Google's pre-trained MobileNet V2 model as a base for a convolutional neural network:
+
+```py
+base_model = tf.__A__.applications.__B__(input_shape=(160, 160, 3),
+                                               include_top=__C__,
+                                               weights='imagenet'
+                                               )
+```
+
+## --answers--
+
+A: `keras`
+
+B: `MobileNetV2`
+
+C: `False`
+
+---
+
+A: `Keras`
+
+B: `MobileNetV2`
+
+C: `True`
+
+---
+
+A: `keras`
+
+B: `mobile_net_v2`
+
+C: `False`
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-the-convolutional-layer.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-the-convolutional-layer.md
new file mode 100644
index 00000000000..648f59b9aee
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks-the-convolutional-layer.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d97
+title: 'Convolutional Neural Networks: The Convolutional Layer'
+challengeType: 11
+videoId: LrdmcQpTyLw
+bilibiliIds:
+  aid: 805608595
+  bvid: BV1Q34y1S7nr
+  cid: 409131585
+dashedName: convolutional-neural-networks-the-convolutional-layer
+---
+
+# --question--
+
+## --text--
+
+What are the three main properties of each convolutional layer?
+
+## --answers--
+
+Input size, the number of filters, and the sample size of the filters.
+
+---
+
+Input size, input dimensions, and the color values of the input.
+
+---
+
+Input size, input padding, and stride.
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks.md
new file mode 100644
index 00000000000..c5136eb3a59
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/convolutional-neural-networks.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d96
+title: Convolutional Neural Networks
+challengeType: 11
+videoId: _1kTP7uoU9E
+bilibiliIds:
+  aid: 805604251
+  bvid: BV1D34y1S7zS
+  cid: 409131358
+dashedName: convolutional-neural-networks
+---
+
+# --question--
+
+## --text--
+
+Dense neural networks analyze input on a global scale and recognize patterns in specific areas. Convolutional neural networks...:
+
+## --answers--
+
+also analyze input globally and extract features from specific areas.
+
+---
+
+do not work well for image classification or object detection.
+
+---
+
+scan through the entire input a little at a time and learn local patterns.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-building-the-model.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-building-the-model.md
new file mode 100644
index 00000000000..90a27f4eff1
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-building-the-model.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d8e
+title: 'Core Learning Algorithms: Building the Model'
+challengeType: 11
+videoId: 5wHw8BTd2ZQ
+bilibiliIds:
+  aid: 763068584
+  bvid: BV1s64y1a7WR
+  cid: 409128675
+dashedName: core-learning-algorithms-building-the-model
+---
+
+# --question--
+
+## --text--
+
+What kind of estimator/model does TensorFlow recommend using for classification?
+
+## --answers--
+
+`LinearClassifier`
+
+---
+
+`DNNClassifier`
+
+---
+
+`BoostedTreesClassifier`
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-classification.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-classification.md
new file mode 100644
index 00000000000..ef4493bd87c
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-classification.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d8d
+title: 'Core Learning Algorithms: Classification'
+challengeType: 11
+videoId: qFF7ZQNvK9E
+bilibiliIds:
+  aid: 505531167
+  bvid: BV1Vg411c7av
+  cid: 409128427
+dashedName: core-learning-algorithms-classification
+---
+
+# --question--
+
+## --text--
+
+What is classification?
+
+## --answers--
+
+The process of separating data points into different classes.
+
+---
+
+Predicting a numeric value or forecast based on independent and dependent variables.
+
+---
+
+None of the above.
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-clustering.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-clustering.md
new file mode 100644
index 00000000000..cd43897d3d5
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-clustering.md
@@ -0,0 +1,42 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d8f
+title: 'Core Learning Algorithms: Clustering'
+challengeType: 11
+videoId: 8sqIaHc9Cz4
+bilibiliIds:
+  aid: 720567137
+  bvid: BV1BQ4y1r7UY
+  cid: 409129005
+dashedName: core-learning-algorithms-clustering
+---
+
+# --question--
+
+## --text--
+
+Which of the following steps is **not** part of the K-Means algorithm?
+
+## --answers--
+
+Randomly pick K points to place K centeroids.
+
+---
+
+Assign each K point to the closest K centeroid.
+
+---
+
+Move each K centeroid into the middle of all of their data points.
+
+---
+
+Shuffle the K points so they're redistributed randomly.
+
+---
+
+Reassign each K point to the closest K centeroid.
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-hidden-markov-models.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-hidden-markov-models.md
new file mode 100644
index 00000000000..2adf4b70551
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-hidden-markov-models.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d90
+title: 'Core Learning Algorithms: Hidden Markov Models'
+challengeType: 11
+videoId: IZg24y4wEPY
+bilibiliIds:
+  aid: 633081400
+  bvid: BV1tb4y1y72V
+  cid: 409129376
+dashedName: core-learning-algorithms-hidden-markov-models
+---
+
+# --question--
+
+## --text--
+
+What makes a Hidden Markov model different than linear regression or classification?
+
+## --answers--
+
+It uses probability distributions to predict future events or states.
+
+---
+
+It analyzes the relationship between independent and dependent variables to make predictions.
+
+---
+
+It separates data points into separate categories.
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-the-training-process.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-the-training-process.md
new file mode 100644
index 00000000000..8102ee578f1
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-the-training-process.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d8c
+title: 'Core Learning Algorithms: The Training Process'
+challengeType: 11
+videoId: _cEwvqVoBhI
+bilibiliIds:
+  aid: 335593652
+  bvid: BV12R4y1H7Fi
+  cid: 409128047
+dashedName: core-learning-algorithms-the-training-process
+---
+
+# --question--
+
+## --text--
+
+What are epochs?
+
+## --answers--
+
+The number of times the model will see the same data.
+
+---
+
+A type of graph.
+
+---
+
+The number of elements you feed to the model at once.
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-training-and-testing-data.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-training-and-testing-data.md
new file mode 100644
index 00000000000..bc70767fc9b
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-training-and-testing-data.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d8b
+title: 'Core Learning Algorithms: Training and Testing Data'
+challengeType: 11
+videoId: wz9J1slsi7I
+bilibiliIds:
+  aid: 335509743
+  bvid: BV1rA411F7bG
+  cid: 409127635
+dashedName: core-learning-algorithms-training-and-testing-data
+---
+
+# --question--
+
+## --text--
+
+What is categorical data?
+
+## --answers--
+
+Another term for one-hot encoding.
+
+---
+
+Any data that is not numeric.
+
+---
+
+Any data that is represented numerically.
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-using-probabilities-to-make-predictions.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-using-probabilities-to-make-predictions.md
new file mode 100644
index 00000000000..76665a453ef
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-using-probabilities-to-make-predictions.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d91
+title: 'Core Learning Algorithms: Using Probabilities to make Predictions'
+challengeType: 11
+videoId: fYAYvLUawnc
+bilibiliIds:
+  aid: 763245369
+  bvid: BV1B64y187gE
+  cid: 414731624
+dashedName: core-learning-algorithms-using-probabilities-to-make-predictions
+---
+
+# --question--
+
+## --text--
+
+What TensorFlow module should you import to implement `.HiddenMarkovModel()`?
+
+## --answers--
+
+`tensorflow.keras`
+
+---
+
+`tensorflow_gpu`
+
+---
+
+`tensorflow_probability`
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-working-with-data.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-working-with-data.md
new file mode 100644
index 00000000000..c69adea9f8f
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms-working-with-data.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d8a
+title: 'Core Learning Algorithms: Working with Data'
+challengeType: 11
+videoId: u85IOSsJsPI
+bilibiliIds:
+  aid: 675550447
+  bvid: BV1RU4y1w7up
+  cid: 409127383
+dashedName: core-learning-algorithms-working-with-data
+---
+
+# --question--
+
+## --text--
+
+What does the pandas `.head()` function do?
+
+## --answers--
+
+Returns the number of entries in a data frame.
+
+---
+
+Returns the number of columns in a data frame.
+
+---
+
+By default, shows the first five rows or entries in a data frame.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms.md
new file mode 100644
index 00000000000..000e9800a42
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/core-learning-algorithms.md
@@ -0,0 +1,40 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d89
+title: Core Learning Algorithms
+challengeType: 11
+videoId: u5lZURgcWnU
+bilibiliIds:
+  aid: 763034025
+  bvid: BV1A64y1a7g4
+  cid: 409127051
+dashedName: core-learning-algorithms
+---
+
+# --question--
+
+## --text--
+
+Which type of analysis would be best suited for the following problem?:
+
+You have the average temperature in the month of March for the last 100 years. Using this data, you want to predict the average temperature in the month of March 5 years from now.
+
+## --answers--
+
+Multiple regression
+
+---
+
+Correlation
+
+---
+
+Decision tree
+
+---
+
+Linear regression
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/creating-a-convolutional-neural-network.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/creating-a-convolutional-neural-network.md
new file mode 100644
index 00000000000..90e2094f94c
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/creating-a-convolutional-neural-network.md
@@ -0,0 +1,56 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d98
+title: Creating a Convolutional Neural Network
+challengeType: 11
+videoId: kfv0K8MtkIc
+bilibiliIds:
+  aid: 420605824
+  bvid: BV1p341127wW
+  cid: 409131869
+dashedName: creating-a-convolutional-neural-network
+---
+
+# --question--
+
+## --text--
+
+Fill in the blanks below to complete the architecture for a convolutional neural network:
+
+```py
+model = models.__A__()
+model.add(layers.__B__(32, (3, 3), activation='relu', input_shape=(32, 32, 3)))
+model.add(layers.__C__(2, 2))
+model.add(layers.__B__(64, (3, 3), activation='relu'))
+model.add(layers.__C__(2, 2))
+model.add(layers.__B__(32, (3, 3), activation='relu'))
+model.add(layers.__C__(2, 2))
+```
+
+## --answers--
+
+A: `Sequential`
+
+B: `add`
+
+C: `Wrapper`
+
+---
+
+A: `keras`
+
+B: `Cropping2D`
+
+C: `AlphaDropout`
+
+---
+
+A: `Sequential`
+
+B: `Conv2D`
+
+C: `MaxPooling2D`
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/introduction-machine-learning-fundamentals.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/introduction-machine-learning-fundamentals.md
new file mode 100644
index 00000000000..61248b976a3
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/introduction-machine-learning-fundamentals.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d87
+title: 'Introduction: Machine Learning Fundamentals'
+challengeType: 11
+videoId: KwL1qTR5MT8
+bilibiliIds:
+  aid: 293071716
+  bvid: BV1Yf4y1n7R2
+  cid: 409125921
+dashedName: introduction-machine-learning-fundamentals
+---
+
+# --question--
+
+## --text--
+
+Which statement below is **false**?
+
+## --answers--
+
+Neural networks are modeled after the way the human brain works.
+
+---
+
+Computer programs that play tic-tac-toe or chess against human players are examples of simple artificial intelligence.
+
+---
+
+Machine learning is a subset of artificial intelligence.
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/introduction-to-tensorflow.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/introduction-to-tensorflow.md
new file mode 100644
index 00000000000..b5fd7cb1237
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/introduction-to-tensorflow.md
@@ -0,0 +1,42 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d88
+title: Introduction to TensorFlow
+challengeType: 11
+videoId: r9hRyGGjOgQ
+bilibiliIds:
+  aid: 675554869
+  bvid: BV1dU4y1w7vw
+  cid: 409126541
+dashedName: introduction-to-tensorflow
+---
+
+# --question--
+
+## --text--
+
+Which of the following is **not** a type of tensor?
+
+## --answers--
+
+Variable
+
+---
+
+Flowing
+
+---
+
+Placeholder
+
+---
+
+SparseTensor
+
+---
+
+Constant
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-building-the-model.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-building-the-model.md
new file mode 100644
index 00000000000..e89886a9a1c
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-building-the-model.md
@@ -0,0 +1,66 @@
+---
+id: 5e8f2f13c4cdbe86b5c72da1
+title: 'Natural Language Processing With RNNs: Building the Model'
+challengeType: 11
+videoId: 32WBFS7lfsw
+bilibiliIds:
+  aid: 848015573
+  bvid: BV1YL4y1a7WS
+  cid: 409138016
+dashedName: natural-language-processing-with-rnns-building-the-model
+---
+
+# --question--
+
+## --text--
+
+Fill in the blanks below to complete the `build_model` function:
+
+```py
+def build_mode(vocab_size, embedding_dim, rnn_units, batch_size):
+    model = tf.keras.Sequential([
+        tf.keras.layers.Embedding(vocab_size,
+                                  embedding_dim,
+                                  batch_input_shape=[batch_size, None]),
+        tf.keras.layers.__A__(rnn_units,
+                              return_sequences=__B__,
+                              recurrent_initializer='glorot_uniform),
+        tf.keras.layers.Dense(__C__)
+    ])
+    __D__
+```
+
+## --answers--
+
+A: `ELU`
+
+B: `True`
+
+C: `vocab_size`
+
+D: `return model`
+
+---
+
+A: `LSTM`
+
+B: `False`
+
+C: `batch_size`
+
+D: `return model`
+
+---
+
+A: `LSTM`
+
+B: `True`
+
+C: `vocab_size`
+
+D: `return model`
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-create-a-play-generator.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-create-a-play-generator.md
new file mode 100644
index 00000000000..ea3420cce7a
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-create-a-play-generator.md
@@ -0,0 +1,44 @@
+---
+id: 5e8f2f13c4cdbe86b5c72da0
+title: 'Natural Language Processing With RNNs: Create a Play Generator'
+challengeType: 11
+videoId: j5xsxjq_Xk8
+bilibiliIds:
+  aid: 720525759
+  bvid: BV1xQ4y1r7tw
+  cid: 409137674
+dashedName: natural-language-processing-with-rnns-create-a-play-generator
+---
+
+# --question--
+
+## --text--
+
+Fill in the blanks below to create the training examples for the RNN:
+
+```py
+char_dataset = tf.data.__A__.__B__(text_as_int)
+```
+
+## --answers--
+
+A: `Dataset`
+
+B: `from_tensor_slices`
+
+---
+
+A: `data`
+
+B: `from_tensors`
+
+---
+
+A: `DataSet`
+
+B: `from_generator`
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-making-predictions.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-making-predictions.md
new file mode 100644
index 00000000000..d377f321946
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-making-predictions.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d9f
+title: 'Natural Language Processing With RNNs: Making Predictions'
+challengeType: 11
+videoId: WO1hINnBj20
+bilibiliIds:
+  aid: 848023400
+  bvid: BV1WL4y1a75i
+  cid: 409136303
+dashedName: natural-language-processing-with-rnns-making-predictions
+---
+
+# --question--
+
+## --text--
+
+Before you make a prediction with your own review, you should...:
+
+## --answers--
+
+decode the training dataset and compare the results to the test data.
+
+---
+
+use the encodings from the training dataset to encode your review.
+
+---
+
+assign random values between 0 and the maximum number of vocabulary in your dataset to each word in your review.
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-part-2.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-part-2.md
new file mode 100644
index 00000000000..e8324cf56e4
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-part-2.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d9c
+title: 'Natural Language Processing With RNNs: Part 2'
+challengeType: 11
+videoId: mUU9YXOFbZg
+bilibiliIds:
+  aid: 975558435
+  bvid: BV1L44y1b7Lp
+  cid: 409135242
+dashedName: natural-language-processing-with-rnns-part-2
+---
+
+# --question--
+
+## --text--
+
+Word embeddings are...:
+
+## --answers--
+
+an unordered group of encoded words that describes the frequency of words in a given document.
+
+---
+
+a group of encoded words that preserves the original order of the words in a given document.
+
+---
+
+a vectorized representation of words in a given document that places words with similar meanings near each other.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-recurring-neural-networks.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-recurring-neural-networks.md
new file mode 100644
index 00000000000..64e8ec9e96b
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-recurring-neural-networks.md
@@ -0,0 +1,38 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d9d
+title: 'Natural Language Processing With RNNs: Recurring Neural Networks'
+challengeType: 11
+videoId: bX5681NPOcA
+bilibiliIds:
+  aid: 335605808
+  bvid: BV1SR4y1H7ri
+  cid: 409135641
+dashedName: natural-language-processing-with-rnns-recurring-neural-networks
+---
+
+# --question--
+
+## --text--
+
+What is true about Recurrent Neural Networks?
+
+## --answers--
+
+1: They are a type of feed-forward neural network.
+
+---
+
+2: They maintain an internal memory/state of the input that was already processed.
+
+---
+
+3: RNN's contain a loop and process one piece of input at a time.
+
+---
+
+4: Both 2 and 3.
+
+## --video-solution--
+
+4
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-sentimental-analysis.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-sentimental-analysis.md
new file mode 100644
index 00000000000..68d6fe88e74
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-sentimental-analysis.md
@@ -0,0 +1,54 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d9e
+title: 'Natural Language Processing With RNNs: Sentiment Analysis'
+challengeType: 11
+videoId: lYeLtu8Nq7c
+bilibiliIds:
+  aid: 933111408
+  bvid: BV1TM4y137VB
+  cid: 409135996
+dashedName: natural-language-processing-with-rnns-sentiment-analysis
+---
+
+# --question--
+
+## --text--
+
+Fill in the blanks below to create the model for the RNN:
+
+```py
+model = __A__.keras.Sequential([
+    __A__.keras.layers.__B__(88584, 32),
+    __A__.keras.layers.__C__(32),
+    __A__.keras.layers.Dense(1, activation='sigmoid')
+])
+```
+
+## --answers--
+
+A: `tensor_flow`
+
+B: `embedding`
+
+C: `LSTM`
+
+---
+
+A: `tf`
+
+B: `Embedding`
+
+C: `AlphaDropout`
+
+---
+
+A: `tf`
+
+B: `Embedding`
+
+C: `LSTM`
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-training-the-model.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-training-the-model.md
new file mode 100644
index 00000000000..a2d0858bab7
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns-training-the-model.md
@@ -0,0 +1,58 @@
+---
+id: 5e8f2f13c4cdbe86b5c72da2
+title: 'Natural Language Processing With RNNs: Training the Model'
+challengeType: 11
+videoId: hEUiK7j9UI8
+bilibiliIds:
+  aid: 250542136
+  bvid: BV19v411w7Fi
+  cid: 409138327
+dashedName: natural-language-processing-with-rnns-training-the-model
+---
+
+# --question--
+
+## --text--
+
+Fill in the blanks below to save your model's checkpoints in the `./checkpoints` directory and call the latest checkpoint for training:
+
+```py
+checkpoint_dir = __A__
+checkpoint_prefix = os.path.join(checkpoint_dir, 'ckpt_{epoch}')
+
+checkpoint_callback = tf.keras.callbacks.__B__(
+    filepath=checkpoint_prefix,
+    save_weights_only=True
+)
+
+history = model.fit(data, epochs=2, callbacks=[__C__])
+```
+
+## --answers--
+
+A: `'./training_checkpoints'`
+
+B: `ModelCheckpoint`
+
+C: `checkpoint_prefix`
+
+---
+
+A: `'./checkpoints'`
+
+B: `ModelCheckpoint`
+
+C: `checkpoint_callback`
+
+---
+
+A: `'./checkpoints'`
+
+B: `BaseLogger`
+
+C: `checkpoint_callback`
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns.md
new file mode 100644
index 00000000000..00041af268d
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/natural-language-processing-with-rnns.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d9b
+title: Natural Language Processing With RNNs
+challengeType: 11
+videoId: ZyCaF5S-lKg
+bilibiliIds:
+  aid: 548105306
+  bvid: BV1nq4y1K7VU
+  cid: 409134745
+dashedName: natural-language-processing-with-rnns
+---
+
+# --question--
+
+## --text--
+
+Natural Language Processing is a branch of artificial intelligence that...:
+
+## --answers--
+
+deals with how computers understand and process natural/human languages.
+
+---
+
+translates image data into natural/human languages.
+
+---
+
+is focused on translating computer languages into natural/human languages.
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-activation-functions.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-activation-functions.md
new file mode 100644
index 00000000000..92b267520c6
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-activation-functions.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d93
+title: 'Neural Networks: Activation Functions'
+challengeType: 11
+videoId: S45tqW6BqRs
+bilibiliIds:
+  aid: 675610466
+  bvid: BV1wU4y1A7TJ
+  cid: 409130203
+dashedName: neural-networks-activation-functions
+---
+
+# --question--
+
+## --text--
+
+Which activation function squishes values between -1 and 1?
+
+## --answers--
+
+ReLU (Rectified Linear Unit)
+
+---
+
+Tanh (Hyperbolic Tangent)
+
+---
+
+Sigmoid
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-creating-a-model.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-creating-a-model.md
new file mode 100644
index 00000000000..fa08700d19d
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-creating-a-model.md
@@ -0,0 +1,54 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d95
+title: 'Neural Networks: Creating a Model'
+challengeType: 11
+videoId: K8bz1bmOCTw
+bilibiliIds:
+  aid: 848109040
+  bvid: BV1EL4y1878f
+  cid: 409130886
+dashedName: neural-networks-creating-a-model
+---
+
+# --question--
+
+## --text--
+
+Fill in the blanks below to build a sequential model of dense layers:
+
+```py
+model = __A__.__B__([
+    __A__.layers.Flatten(input_shape=(28, 28)),
+    __A__.layers.__C__(128, activation='relu'),
+    __A__.layers.__C__(10, activation='softmax')
+])
+```
+
+## --answers--
+
+A: `keras`
+
+B: `Sequential`
+
+C: `Dense`
+
+---
+
+A: `tf`
+
+B: `Sequential`
+
+C: `Categorical`
+
+---
+
+A: `keras`
+
+B: `sequential`
+
+C: `dense`
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-optimizers.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-optimizers.md
new file mode 100644
index 00000000000..c5da846ac08
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-optimizers.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d94
+title: 'Neural Networks: Optimizers'
+challengeType: 11
+videoId: hdOtRPQe1o4
+bilibiliIds:
+  aid: 763064173
+  bvid: BV1364y1a7eM
+  cid: 409130557
+dashedName: neural-networks-optimizers
+---
+
+# --question--
+
+## --text--
+
+What is an optimizer function?
+
+## --answers--
+
+A function that increases the accuracy of a model's predictions.
+
+---
+
+A function that implements the gradient descent and backpropagation algorithms for you.
+
+---
+
+A function that reduces the time a model needs to train.
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-with-tensorflow.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-with-tensorflow.md
new file mode 100644
index 00000000000..44684db292b
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/neural-networks-with-tensorflow.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72d92
+title: Neural Networks with TensorFlow
+challengeType: 11
+videoId: uisdfrNrZW4
+bilibiliIds:
+  aid: 378031840
+  bvid: BV1Qf4y1c7Dc
+  cid: 409129888
+dashedName: neural-networks-with-tensorflow
+---
+
+# --question--
+
+## --text--
+
+A densely connected neural network is one in which...:
+
+## --answers--
+
+all the neurons in the current layer are connected to one neuron in the previous layer.
+
+---
+
+all the neurons in each layer are connected randomly.
+
+---
+
+all the neurons in the current layer are connected to every neuron in the previous layer.
+
+## --video-solution--
+
+3
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-example.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-example.md
new file mode 100644
index 00000000000..b1bbe37b30d
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-example.md
@@ -0,0 +1,50 @@
+---
+id: 5e8f2f13c4cdbe86b5c72da5
+title: 'Reinforcement Learning With Q-Learning: Example'
+challengeType: 11
+videoId: RBBSNta234s
+bilibiliIds:
+  aid: 848073871
+  bvid: BV1uL4y187Eq
+  cid: 409139471
+dashedName: reinforcement-learning-with-q-learning-example
+---
+
+# --question--
+
+## --text--
+
+Fill in the blanks to complete the following Q-Learning equation:
+
+```py
+Q[__A__, __B__] = Q[__A__, __B__] + LEARNING_RATE * (reward + GAMMA * np.max(Q[__C__, :]) - Q[__A__, __B__])
+```
+
+## --answers--
+
+A: `state`
+
+B: `action`
+
+C: `next_state`
+
+---
+
+A: `state`
+
+B: `action`
+
+C: `prev_state`
+
+---
+
+A: `state`
+
+B: `reaction`
+
+C: `next_state`
+
+## --video-solution--
+
+1
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-part-2.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-part-2.md
new file mode 100644
index 00000000000..5aa787be324
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning-part-2.md
@@ -0,0 +1,30 @@
+---
+id: 5e8f2f13c4cdbe86b5c72da4
+title: 'Reinforcement Learning With Q-Learning: Part 2'
+challengeType: 11
+videoId: DX7hJuaUZ7o
+bilibiliIds:
+  aid: 420570359
+  bvid: BV1G341127zr
+  cid: 409139190
+dashedName: reinforcement-learning-with-q-learning-part-2
+---
+
+# --question--
+
+## --text--
+
+What can happen if the agent does not have a good balance of taking random actions and using learned actions?
+
+## --answers--
+
+The agent will always try to minimize its reward for the current state/action, leading to local minima.
+
+---
+
+The agent will always try to maximize its reward for the current state/action, leading to local maxima.
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning.md b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning.md
new file mode 100644
index 00000000000..6b858d690c8
--- /dev/null
+++ b/curriculum/challenges/arabic/11-machine-learning-with-python/tensorflow/reinforcement-learning-with-q-learning.md
@@ -0,0 +1,34 @@
+---
+id: 5e8f2f13c4cdbe86b5c72da3
+title: Reinforcement Learning With Q-Learning
+challengeType: 11
+videoId: Cf7DSU0gVb4
+bilibiliIds:
+  aid: 463025802
+  bvid: BV1iL411x7L6
+  cid: 409138811
+dashedName: reinforcement-learning-with-q-learning
+---
+
+# --question--
+
+## --text--
+
+The key components of reinforcement learning are...
+
+## --answers--
+
+environment, representative, state, reaction, and reward.
+
+---
+
+environment, agent, state, action, and reward.
+
+---
+
+habitat, agent, state, action, and punishment.
+
+## --video-solution--
+
+2
+
diff --git a/curriculum/challenges/arabic/13-relational-databases/build-a-celestial-bodies-database-project/build-a-celestial-bodies-database.md b/curriculum/challenges/arabic/13-relational-databases/build-a-celestial-bodies-database-project/build-a-celestial-bodies-database.md
new file mode 100644
index 00000000000..5f1a39d091a
--- /dev/null
+++ b/curriculum/challenges/arabic/13-relational-databases/build-a-celestial-bodies-database-project/build-a-celestial-bodies-database.md
@@ -0,0 +1,26 @@
+---
+id: 5f1a4ef5d5d6b5ab580fc6ae
+title: Build a Celestial Bodies Database
+challengeType: 13
+helpCategory: Backend Development
+url: https://github.com/freeCodeCamp/learn-celestial-bodies-database
+dashedName: build-a-celestial-bodies-database
+---
+
+# --description--
+
+This is one of the required projects to earn your certification. For this project, you will build a database of celestial bodies using PostgreSQL.
+
+# --instructions--
+
+**Important:** After you pass all the project tests, save a dump of your database into a `universe.sql` file so you can complete step 2. There will be instructions how to do that within the virtual machine.
+
+# --notes--
+
+Required files: `universe.sql`
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/13-relational-databases/build-a-number-guessing-game-project/build-a-number-guessing-game.md b/curriculum/challenges/arabic/13-relational-databases/build-a-number-guessing-game-project/build-a-number-guessing-game.md
new file mode 100644
index 00000000000..d369f7704af
--- /dev/null
+++ b/curriculum/challenges/arabic/13-relational-databases/build-a-number-guessing-game-project/build-a-number-guessing-game.md
@@ -0,0 +1,26 @@
+---
+id: 602da04c22201c65d2a019f4
+title: Build a Number Guessing Game
+challengeType: 13
+helpCategory: Backend Development
+url: https://github.com/freeCodeCamp/learn-number-guessing-game
+dashedName: build-a-number-guessing-game
+---
+
+# --description--
+
+This is one of the required projects to earn your certification. For this project, you will use Bash scripting, PostgreSQL, and Git to create a number guessing game that runs in the terminal and saves user information.
+
+# --instructions--
+
+**Important:** After you pass all the project tests, save a dump of your database into a `number_guess.sql` file, as well as your `number_guess.sh` file, so you can complete step 2. There will be instructions on how to do that within the virtual machine.
+
+# --notes--
+
+Required files: `number_guess.sql`, `number_guess.sh`
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/13-relational-databases/build-a-periodic-table-database-project/build-a-periodic-table-database.md b/curriculum/challenges/arabic/13-relational-databases/build-a-periodic-table-database-project/build-a-periodic-table-database.md
new file mode 100644
index 00000000000..9112b4a334b
--- /dev/null
+++ b/curriculum/challenges/arabic/13-relational-databases/build-a-periodic-table-database-project/build-a-periodic-table-database.md
@@ -0,0 +1,26 @@
+---
+id: 602d9ff222201c65d2a019f2
+title: Build a Periodic Table Database
+challengeType: 13
+helpCategory: Backend Development
+url: https://github.com/freeCodeCamp/learn-periodic-table-database
+dashedName: build-a-periodic-table-database
+---
+
+# --description--
+
+This is one of the required projects to earn your certification. For this project, you will create Bash a script to get information about chemical elements from a periodic table database.
+
+# --instructions--
+
+**Important:** After you pass all the project tests, save a dump of your database into a `periodic_table.sql` file, as well as your `element.sh` file, so you can complete step 2. There will be instructions on how to do that within the virtual machine.
+
+# --notes--
+
+Required files: `periodic_table.sql`, `element.sh`
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/13-relational-databases/build-a-salon-appointment-scheduler-project/build-a-salon-appointment-scheduler.md b/curriculum/challenges/arabic/13-relational-databases/build-a-salon-appointment-scheduler-project/build-a-salon-appointment-scheduler.md
new file mode 100644
index 00000000000..d91d6918c00
--- /dev/null
+++ b/curriculum/challenges/arabic/13-relational-databases/build-a-salon-appointment-scheduler-project/build-a-salon-appointment-scheduler.md
@@ -0,0 +1,26 @@
+---
+id: 5f87ac112ae598023a42df1a
+title: Build a Salon Appointment Scheduler
+challengeType: 13
+helpCategory: Backend Development
+url: https://github.com/freeCodeCamp/learn-salon-appointment-scheduler
+dashedName: build-a-salon-appointment-scheduler
+---
+
+# --description--
+
+This is one of the required projects to earn your certification. For this project, you will create an interactive Bash program that uses PostgreSQL to track the customers and appointments for your salon.
+
+# --instructions--
+
+**Important:** After you pass all the project tests, save a dump of your database into a `salon.sql` file, as well as your `salon.sh` file, so you can complete step 2. There will be instructions how to do that within the virtual machine.
+
+# --notes--
+
+Required files: `salon.sql`, `salon.sh`
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/13-relational-databases/build-a-world-cup-database-project/build-a-world-cup-database.md b/curriculum/challenges/arabic/13-relational-databases/build-a-world-cup-database-project/build-a-world-cup-database.md
new file mode 100644
index 00000000000..c6f64c4f4fe
--- /dev/null
+++ b/curriculum/challenges/arabic/13-relational-databases/build-a-world-cup-database-project/build-a-world-cup-database.md
@@ -0,0 +1,26 @@
+---
+id: 5f9771307d4d22b9d2b75a94
+title: Build a World Cup Database
+challengeType: 13
+helpCategory: Backend Development
+url: https://github.com/freeCodeCamp/learn-world-cup-database
+dashedName: build-a-world-cup-database
+---
+
+# --description--
+
+This is one of the required projects to earn your certification. For this project, you will create a Bash script that enters information from World Cup games into PostgreSQL, then query the database for useful statistics.
+
+# --instructions--
+
+**Important:** After you pass all the project tests, save a dump of your database into a `worldcup.sql` file, as well as your `insert_data.sh` and `queries.sh` files, so you can complete step 2. There will be instructions how to do that within the virtual machine.
+
+# --notes--
+
+Required files: `worldcup.sql`, `insert_data.sh`, `queries.sh`
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/13-relational-databases/learn-advanced-bash-by-building-a-kitty-ipsum-translator/build-a-kitty-ipsum-translator.md b/curriculum/challenges/arabic/13-relational-databases/learn-advanced-bash-by-building-a-kitty-ipsum-translator/build-a-kitty-ipsum-translator.md
new file mode 100644
index 00000000000..d1701d3a542
--- /dev/null
+++ b/curriculum/challenges/arabic/13-relational-databases/learn-advanced-bash-by-building-a-kitty-ipsum-translator/build-a-kitty-ipsum-translator.md
@@ -0,0 +1,20 @@
+---
+id: 602da0de22201c65d2a019f6
+title: Build a Kitty Ipsum Translator
+challengeType: 12
+helpCategory: Backend Development
+url: https://github.com/freeCodeCamp/learn-advanced-bash-by-building-a-kitty-ipsum-translator
+dashedName: build-a-kitty-ipsum-translator
+---
+
+# --description--
+
+In this 140-lesson course, you will learn some more complex commands, and the details of how commands work.
+
+# --instructions--
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/13-relational-databases/learn-bash-and-sql-by-building-a-bike-rental-shop/build-a-bike-rental-shop.md b/curriculum/challenges/arabic/13-relational-databases/learn-bash-and-sql-by-building-a-bike-rental-shop/build-a-bike-rental-shop.md
new file mode 100644
index 00000000000..28db3050df4
--- /dev/null
+++ b/curriculum/challenges/arabic/13-relational-databases/learn-bash-and-sql-by-building-a-bike-rental-shop/build-a-bike-rental-shop.md
@@ -0,0 +1,20 @@
+---
+id: 5f5b969a05380d2179fe6e18
+title: Build a Bike Rental Shop
+challengeType: 12
+helpCategory: Backend Development
+url: https://github.com/freeCodeCamp/learn-bash-and-sql-by-building-a-bike-rental-shop
+dashedName: build-a-bike-rental-shop
+---
+
+# --description--
+
+In this 210-lesson course, you will build an interactive Bash program that stores rental information for your bike rental shop using PostgreSQL.
+
+# --instructions--
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/13-relational-databases/learn-bash-by-building-a-boilerplate/build-a-boilerplate.md b/curriculum/challenges/arabic/13-relational-databases/learn-bash-by-building-a-boilerplate/build-a-boilerplate.md
new file mode 100644
index 00000000000..44b5a78f9b7
--- /dev/null
+++ b/curriculum/challenges/arabic/13-relational-databases/learn-bash-by-building-a-boilerplate/build-a-boilerplate.md
@@ -0,0 +1,20 @@
+---
+id: 5ea8adfab628f68d805bfc5e
+title: Build a Boilerplate
+challengeType: 12
+helpCategory: Backend Development
+url: https://github.com/freeCodeCamp/learn-bash-by-building-a-boilerplate
+dashedName: build-a-boilerplate
+---
+
+# --description--
+
+In this 170-lesson course, you will learn terminal commands by creating a website boilerplate using only the command line.
+
+# --instructions--
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/13-relational-databases/learn-bash-scripting-by-building-five-programs/build-five-programs.md b/curriculum/challenges/arabic/13-relational-databases/learn-bash-scripting-by-building-five-programs/build-five-programs.md
new file mode 100644
index 00000000000..c9d6b750bbd
--- /dev/null
+++ b/curriculum/challenges/arabic/13-relational-databases/learn-bash-scripting-by-building-five-programs/build-five-programs.md
@@ -0,0 +1,20 @@
+---
+id: 5f5904ac738bc2fa9efecf5a
+title: Build Five Programs
+challengeType: 12
+helpCategory: Backend Development
+url: https://github.com/freeCodeCamp/learn-bash-scripting-by-building-five-programs
+dashedName: build-five-programs
+---
+
+# --description--
+
+In this 220-lesson course, you will learn more terminal commands and how to use them within Bash scripts by creating five small programs.
+
+# --instructions--
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/13-relational-databases/learn-git-by-building-an-sql-reference-object/build-an-sql-reference-object.md b/curriculum/challenges/arabic/13-relational-databases/learn-git-by-building-an-sql-reference-object/build-an-sql-reference-object.md
new file mode 100644
index 00000000000..bdf04eaef8a
--- /dev/null
+++ b/curriculum/challenges/arabic/13-relational-databases/learn-git-by-building-an-sql-reference-object/build-an-sql-reference-object.md
@@ -0,0 +1,20 @@
+---
+id: 5fa323cdaf6a73463d590659
+title: Build an SQL Reference Object
+challengeType: 12
+helpCategory: Backend Development
+url: https://github.com/freeCodeCamp/learn-git-by-building-an-sql-reference-object
+dashedName: build-an-sql-reference-object
+---
+
+# --description--
+
+In this 240-lesson course, you will learn how Git keeps track of your code by creating an object containing commonly used SQL commands.
+
+# --instructions--
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/13-relational-databases/learn-nano-by-building-a-castle/build-a-castle.md b/curriculum/challenges/arabic/13-relational-databases/learn-nano-by-building-a-castle/build-a-castle.md
new file mode 100644
index 00000000000..2931bc2e7ee
--- /dev/null
+++ b/curriculum/challenges/arabic/13-relational-databases/learn-nano-by-building-a-castle/build-a-castle.md
@@ -0,0 +1,20 @@
+---
+id: 5f32db63eb37f7e17323f459
+title: Build a Castle
+challengeType: 12
+helpCategory: Backend Development
+url: https://github.com/freeCodeCamp/learn-nano-by-building-a-castle
+dashedName: build-a-castle
+---
+
+# --description--
+
+In this 40-lesson course, you will learn how to edit files in the terminal with Nano while building a castle.
+
+# --instructions--
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/13-relational-databases/learn-relational-databases-by-building-a-mario-database/build-a-mario-database.md b/curriculum/challenges/arabic/13-relational-databases/learn-relational-databases-by-building-a-mario-database/build-a-mario-database.md
new file mode 100644
index 00000000000..7c9b41041dd
--- /dev/null
+++ b/curriculum/challenges/arabic/13-relational-databases/learn-relational-databases-by-building-a-mario-database/build-a-mario-database.md
@@ -0,0 +1,20 @@
+---
+id: 5f2c289f164c29556da632fd
+title: Build a Mario Database
+challengeType: 12
+helpCategory: Backend Development
+url: https://github.com/freeCodeCamp/learn-relational-databases-by-building-a-mario-database
+dashedName: build-a-mario-database
+---
+
+# --description--
+
+In this 165-lesson course, you will learn the basics of a relational database by creating a PostgreSQL database filled with video game characters.
+
+# --instructions--
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/13-relational-databases/learn-sql-by-building-a-student-database-part-1/build-a-student-database-part-1.md b/curriculum/challenges/arabic/13-relational-databases/learn-sql-by-building-a-student-database-part-1/build-a-student-database-part-1.md
new file mode 100644
index 00000000000..cf6d2199f69
--- /dev/null
+++ b/curriculum/challenges/arabic/13-relational-databases/learn-sql-by-building-a-student-database-part-1/build-a-student-database-part-1.md
@@ -0,0 +1,20 @@
+---
+id: 602da0c222201c65d2a019f5
+title: "Build a Student Database: Part 1"
+challengeType: 12
+helpCategory: Backend Development
+url: https://github.com/freeCodeCamp/learn-sql-by-building-a-student-database-part-1
+dashedName: build-a-student-database-part-1
+---
+
+# --description--
+
+In this 140-lesson course, you will create a Bash script that uses SQL to enter information about your computer science students into PostgreSQL.
+
+# --instructions--
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/13-relational-databases/learn-sql-by-building-a-student-database-part-2/build-a-student-database-part-2.md b/curriculum/challenges/arabic/13-relational-databases/learn-sql-by-building-a-student-database-part-2/build-a-student-database-part-2.md
new file mode 100644
index 00000000000..47733a36a90
--- /dev/null
+++ b/curriculum/challenges/arabic/13-relational-databases/learn-sql-by-building-a-student-database-part-2/build-a-student-database-part-2.md
@@ -0,0 +1,20 @@
+---
+id: 618590adb0730ca724e37672
+title: "Build a Student Database: Part 2"
+challengeType: 12
+helpCategory: Backend Development
+url: https://github.com/freeCodeCamp/learn-sql-by-building-a-student-database-part-2
+dashedName: build-a-student-database-part-2
+---
+
+# --description--
+
+In this 140-lesson course, you will complete your student database while diving deeper into SQL commands.
+
+# --instructions--
+
+# --hints--
+
+# --seed--
+
+# --solutions--
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md
new file mode 100644
index 00000000000..b851538a51d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-personal-portfolio-webpage-project/build-a-personal-portfolio-webpage.md
@@ -0,0 +1,281 @@
+---
+id: bd7158d8c242eddfaeb5bd13
+title: ابن معرضا لأعمالك الخاصة
+challengeType: 14
+forumTopicId: 301143
+dashedName: build-a-personal-portfolio-webpage
+---
+
+# --description--
+
+**الهدف:**بناء تطبيق يشتغل على نحو مشابه لهذا التطبيق: <a href="https://personal-portfolio.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://personal-portfolio.freecodecamp.rocks</a>
+
+**قصص المستخدمين:**
+
+1. معرض أعمالك يجب أن يكون فيه قسم ترحيب عنده `id` يساوي `welcome-section`
+1. قسم الترحيب يجب أن يكون فيه عنصر `h1` بداخله نصّ
+1. معرض أعمالك يجب أن يكون فيه قسم للمشاريع معه `id` يساوي `projects`
+1. قسم المشاريع يجب أن يكون فيه على الأقل عنصر واحد معه `class` تساوي`project-tile` ليضمّ المشروع
+1. قسم المشاريع يجب أن يكون فيه على الأقل رابط واحد يتصل بمشروع
+1. يجب أن تحتوي الصفحة الشخصية علي navbar مع id بقيمة `navbar`
+1. يجب أن يحتوي الـ navbar على رابط واحد على الأقل يمكنك النقر عليه للتنقل إلى أقسام مختلفة من الصفحة
+1. الصفحة الشخصية يجب أن يكون لها رابط مع id بقيمة `profile-link`، والذي يفتح ملفك الشخصي علي GitHub أو freeCodeCamp في صفحة جديدة
+1. الصفحة الشخصية يجب أن تحتوي على media query واحد على الأقل
+1. وينبغي أن يكون ارتفاع قسم الترحيب مساويا لارتفاع الـ viewport
+1. يجب أن يكون الـ navbar دائما في الجزء العلوي من الـ viewport
+
+أكمل المطلبيات قم باجتياز جميع الاختبارات أدناه لإكمال هذا المشروع. أعطيها أسلوبك الشخصي الخاص. برمجة سعيدة!
+
+**ملاحظة:** تأكد من إضافة `<link rel="stylesheet" href="styles.css">` في HTML الخاص بك لربط ورقة الأنماط الخاصة بك وتطبيق CSS
+
+# --hints--
+
+يجب أن تحتوي صفحتك على قسم "Welcome" مع `id` بقيمة `welcome-section`.
+
+```js
+const el = document.getElementById('welcome-section')
+assert(!!el);
+```
+
+يجب أن يحتوي عنصر `#welcome-section` على عنصر `h1`.
+
+```js
+assert.isAbove(
+  document.querySelectorAll('#welcome-section h1').length,
+  0,
+  'Welcome section should contain an h1 element '
+);
+```
+
+يجب ألا يكون لديك أي عناصر `h1` فارغة داخل عنصر `#welcome-section`.
+
+```js
+assert.isAbove(
+  document.querySelectorAll('#welcome-section h1')?.[0]?.innerText?.length,
+  0,
+  'h1 element in welcome section should contain your name or camper ' +
+    'name '
+);
+```
+
+يجب أن يكون لديك قسم "Projects" مع `id` بقيمة `projects`.
+
+```js
+const el = document.getElementById('projects')
+assert(!!el);
+```
+
+يجب أن تحتوي صفحتك على الأقل على عنصر واحد مع class بقيمة `project-tile`.
+
+```js
+assert.isAbove(
+  document.querySelectorAll('#projects .project-tile').length,
+  0
+);
+```
+
+يجب أن يحتوي عنصر `#projects` على عنصر `a` واحد على الأقل.
+
+```js
+assert.isAbove(document.querySelectorAll('#projects a').length, 0);
+```
+
+يجب أن تحتوي الصفحة الشخصية علي navbar مع `id` بقيمة `navbar`.
+
+```js
+const el = document.getElementById('navbar');
+assert(!!el);
+```
+
+عنصر `#navbar` الخاص بك يجب أن يحتوي على عنصر `a` واحد على الأقل مع `href` يبدأ بـ `#`.
+
+```js
+const links = [...document.querySelectorAll('#navbar a')].filter(
+  (nav) => (nav?.getAttribute('href') || '').substring(0, 1) === '#'
+);
+
+assert.isAbove(
+  links.length,
+  0,
+  'Navbar should contain an anchor link '
+);
+```
+
+يجب أن تحتوي صفحتك على عنصر `a` مع `id` بقيمة `profile-link`.
+
+```js
+const el = document.getElementById('profile-link');
+assert(!!el && el.tagName === 'A')
+```
+
+يجب أن يحتوي عنصر `#profile-link` على سمة `target` بقيمة `_blank`.
+
+```js
+const el = document.getElementById('profile-link');
+assert(!!el && el.target === '_blank')
+```
+
+الصفحة الشخصية يجب أن تحتوي على media query واحد على الأقل.
+
+```js
+const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
+const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
+assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
+```
+
+عنصر `#navbar` الخاص بك يجب أن يكون دائما في الجزء العلوي من الـ viewport.
+
+```js
+(async () => {
+  const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
+
+  const navbar = document.getElementById('navbar');
+  assert.approximately(
+    navbar?.getBoundingClientRect().top,
+    0,
+    15,
+    "Navbar's parent should be body and it should be at the top of " +
+    'the viewport '
+  );
+
+  window.scroll(0, 500);
+
+  await timeout(1);
+
+  assert.approximately(
+    navbar?.getBoundingClientRect().top,
+    0,
+    15,
+    'Navbar should be at the top of the viewport even after ' +
+    'scrolling '
+  );
+  window.scroll(0, 0);
+})();
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+```css
+
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <link rel="stylesheet" href="styles.css">
+    <title>Personal Portfolio</title>
+</head>
+<body>
+    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
+<!--Font Reference-->
+<nav id="navbar">
+  <a href="#projects">Projects</a> |
+  <a href="#contact">Contact me</a>
+</nav>
+<main>
+  <section id="welcome-section">
+    <br>
+    <h1>It's me!</h1>
+    <img src="https://s.cdpn.io/profiles/user/4369153/512.jpg?1587151780" height=100px>
+    <h2>Naomi Carrigan</h2>
+    <p>Welcome to my portfolio page!</p>
+  </section><hr>
+  <section id="projects">
+    <h1>Projects</h1>
+    <h2><a href="https://codepen.io/nhcarrigan">Here's what I've worked on!</a></h2>
+    <p class="project-tile">
+<iframe height="265" style="width: 25;" scrolling="no" title="Algebraic Concepts" src="https://codepen.io/nhcarrigan/embed/preview/NWGrWBR?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
+  See the Pen <a href='https://codepen.io/nhcarrigan/pen/NWGrWBR'>Algebraic Concepts</a> by Naomi Carrigan
+  (<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
+<iframe height="265" style="width: 25;" scrolling="no" title="Pokemon Daycare Service" src="https://codepen.io/nhcarrigan/embed/preview/mdeEbeq?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
+  See the Pen <a href='https://codepen.io/nhcarrigan/pen/mdeEbeq'>Pokemon Daycare Service</a> by Naomi Carrigan
+  (<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
+<iframe height="265" style="width: 25;" scrolling="no" title="Togepi Fan Club" src="https://codepen.io/nhcarrigan/embed/preview/vYNGoBE?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
+  See the Pen <a href='https://codepen.io/nhcarrigan/pen/vYNGoBE'>Togepi Fan Club</a> by Naomi Carrigan
+  (<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
+<iframe height="265" style="width: 25;" scrolling="no" title="Togepi" src="https://codepen.io/nhcarrigan/embed/preview/yLYOWEN?height=265&theme-id=dark&default-tab=result" frameborder="no" allowtransparency="true" allowfullscreen="true" loading="lazy">
+  See the Pen <a href='https://codepen.io/nhcarrigan/pen/yLYOWEN'>Togepi</a> by Naomi Carrigan
+  (<a href='https://codepen.io/nhcarrigan'>@nhcarrigan</a>) on <a href='https://codepen.io'>CodePen</a>.
+</iframe>
+    </p></section><hr>
+  <section id="contact">
+    <h1>Contact me!</h1>
+    <h2>Use the links below to get in touch.</h2>
+    <p><a href="https://www.freecodecamp.org/nhcarrigan" id="profile-link" target="_blank" rel="noopener noreferrer">FreeCodeCamp.org</a> | <a href="https://github.com/nhcarrigan" id="github-link" target="_blank" rel="noopener noreferrer">GitHub</a> | <a href="https://www.facebook.com/nhcarrigan" id="facebook-link" target="_blank" rel="noopener noreferrer">Facebook</a> | <a href="https://www.linkedin.com/in/Naomi-l-carrigan/" id="linkedin-link" target="_blank" rel="noopener noreferrer">LinkedIn</a>
+  </section>
+<footer><a href="../">Return to Project List</a> | <a href="https://www.nhcarrigan.com">Return to HomePage</a></footer>
+</body>
+</html>
+```
+
+```css
+nav{
+  position: fixed;
+  width: 100%;
+  text-align: right;
+  font-size: 24pt;
+  top: 0%;
+  right: 5px;
+  background-color: #000000;
+  color: #ffffff;
+}
+@media (max-width: 500px){
+  nav{
+    display: none;
+  }
+}
+a{
+  color: #ffffff;
+}
+main{
+  text-align: center;
+  background-color: black;
+  font-family:Pacifico
+}
+h1{
+  font-size: 48pt;
+}
+h2{
+  font-size: 24pt;
+}
+p{
+  font-size: 12pt;
+}
+#welcome-section{
+  background-color:#251a4a;
+  color: #FFFFFF;
+  display: table-cell;
+  vertical-align: middle;
+  width: 100vw;
+  height: 100vh;
+}
+#projects{
+  background-color: #060a9c;
+  color: #ffffff;
+  display: table-cell;
+  vertical-align: middle;
+  width: 100vw;
+  height: 100vh;
+}
+#contact{
+  background-color: #03300b;
+  color: #ffffff;
+  display: table-cell;
+  vertical-align: middle;
+  width: 100vw;
+  height: 100vh;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
new file mode 100644
index 00000000000..0dbd9f3ead7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-product-landing-page-project/build-a-product-landing-page.md
@@ -0,0 +1,470 @@
+---
+id: 587d78af367417b2b2512b04
+title: بناء صفحة هبوط لمنتج
+challengeType: 14
+forumTopicId: 301144
+dashedName: build-a-product-landing-page
+---
+
+# --description--
+
+**Objective:** كم ببناء تطبيق يشبه وظيفيا إلي <a href="https://product-landing-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://product-landing-page.freecodecamp.rocks</a>
+
+**المطلبيات:**
+
+1. صفحة هبوط المنتج الخاصة بي يجب أن تحتوي على عنصر `header` مع عنصر مقابل `id="header"`
+1. يمكنك رؤية صورة داخل عنصر `header` مع `id="header-img"` (الشعار من شأنه أن يجعل صورة جيدة هنا)
+1. داخل عنصر `#header` يمكنك رؤية عنصر `nav` مع `id="nav-bar"`
+1. يمكنك أن ترى على الأقل ثلاثة عناصر قابلة للنقر داخل عنصر `nav` كل منها مع class بأسم `nav-link`
+1. عندما تنقر على زر `.nav-link` في عنصر `nav` ، يتم نقلك إلى القسم المقابل من صفحة الهبوط
+1. يمكنك مشاهدة فيديو منتج مدمج مع `id="video"`
+1. صفحة هبوط المنتج الخاصة بك يجب أن تحتوي على عنصر `form` مع `id="form"`
+1. ضمن الـ form، هناك حقل `input` مع `id="email"` حيث يمكنك إدخال عنوان البريد الإلكتروني
+1. حقل الإدخال `#email` يجب أن يحتوي على placeholder text للسماح للمستخدم بمعرفة الغرض من الحقل
+1. حقل الإدخال `#email` يستخدم HTML5 validation لتأكيد أن النص الذي تم إدخاله هو عنوان بريد إلكتروني
+1. ضمن الـ form، هناك `input` للـ submit مع `id="submit"`
+1. عندما تنقر على العنصر `#submit`، يتم إرسال بريد الإلكتروني إلى صفحة ثابتة (استخدم عنوان URL الوهمي:`https://www.freecodecamp.com/email-submit`)
+1. عنصر navbar يجب أن يكون دائما في الجزء العلوي من الـ viewport
+1. يجب أن تحتوي صفحة هبوط المنتج على media query واحد على الأقل
+1. صفحة هبوط المنتج الخاص بك يجب أن تستخدم CSS flexbox مرة واحدة على الأقل
+
+أكمل المطلبيات و قم باجتياز جميع الاختبارات أدناه لإكمال هذا المشروع. أعطيها أسلوبك الشخصي الخاص. برمجة سعيدة!
+
+**ملاحظة:** تيقن من إضافة `<link rel="stylesheet" href="styles.css">` في HTML الخاص بك لربط ورقة الأسلوب الخاصة بك وتطبيق CSS
+
+# --hints--
+
+يجب أن تحتوي صفحتك على عنصر `header` مع `id` بقيمة `header`.
+
+```js
+const el = document.getElementById('header')
+assert(!!el && el.tagName === 'HEADER')
+```
+
+يجب أن يكون لديك عنصر `img` مع `id` بقيمة `header-img`.
+
+```js
+const el = document.getElementById('header-img')
+assert(!!el && el.tagName === 'IMG')
+```
+
+يجب أن يكون `#header-img` تابعا إلى `#header`.
+
+```js
+const els = document.querySelectorAll('#header #header-img')
+assert(els.length > 0)
+```
+
+يجب أن يحتوي `#header-img` على سمة `src`.
+
+```js
+const el = document.getElementById('header-img')
+assert(!!el && !!el.src)
+```
+
+يجب أن يحتوي `#header-img` قيمة `src` ويكون عنوان URL صالح (يبدأ بكلمة `http`).
+
+```js
+const el = document.getElementById('header-img')
+assert(!!el && /^http/.test(el.src))
+```
+
+يجب أن يكون لديك عنصر `nav` مع `id` بقيمة `nav-bar`.
+
+```js
+const el = document.getElementById('nav-bar')
+assert(!!el && el.tagName === 'NAV')
+```
+
+يجب أن يكون `#nav-bar` تابعا إلى `#header`.
+
+```js
+const els = document.querySelectorAll('#header #nav-bar')
+assert(els.length > 0)
+```
+
+يجب أن يكون لديك 3 عناصر `.nav-link` على الأقل داخل `#nav-bar`.
+
+```js
+const els = document.querySelectorAll('#nav-bar .nav-link')
+assert(els.length >= 3)
+```
+
+كل عنصر `.nav-link` يجب أن يحتوي على سمة `href`.
+
+```js
+const els = document.querySelectorAll('.nav-link')
+els.forEach(el => {
+  if (!el.href) assert(false)
+})
+assert(els.length > 0)
+```
+
+يجب أن يرتبط كل عنصر من عناصر `.nav-link` بعنصر مقابل في الصفحة المقصودة (له `href` بقيمة id عنصر آخر، على سبيل المثال `#footer`).
+
+```js
+const els = document.querySelectorAll('.nav-link')
+els.forEach(el => {
+  const linkDestination = el.getAttribute('href').slice(1)
+  if (!document.getElementById(linkDestination)) assert(false)
+})
+assert(els.length > 0)
+```
+
+يجب أن يكون لديك عنصر `video` أو `iframe` مع `id` بقيمة `video`.
+
+```js
+const el = document.getElementById('video')
+assert(!!el && (el.tagName === 'VIDEO' || el.tagName === 'IFRAME'))
+```
+
+يجب أن يحتوي `#video` على سمة `src`.
+
+```js
+let el = document.getElementById('video')
+const sourceNode = el.children;
+let sourceElement = null;
+if (sourceNode.length) {
+  sourceElement = [...video.children].filter(el => el.localName === 'source')[0];
+}
+if (sourceElement) {
+  el = sourceElement;
+}
+assert(el.hasAttribute('src'));
+```
+
+يجب أن يكون لديك عنصر `form` مع `id` بقيمة `form`.
+
+```js
+const el = document.getElementById('form')
+assert(!!el && el.tagName === 'FORM')
+```
+
+يجب أن يكون لديك عنصر `input` مع `id` بقيمة `email`.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && el.tagName === 'INPUT')
+```
+
+يجب أن يكون `#email` الخاص بك تابعا إلى `#form`.
+
+```js
+const els = document.querySelectorAll('#form #email')
+assert(els.length > 0)
+```
+
+يجب أن يحتوي `#email` على سمة `placeholder` مع نص نائب.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && !!el.placeholder && el.placeholder.length > 0)
+```
+
+يجب أن يستخدم `#email` الخاص بك محقق HTML5 عن طريق تعيين `type` إلى `email`.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && el.type === 'email')
+```
+
+يجب أن يكون لديك عنصر `input` مع `id` بقيمة `submit`.
+
+```js
+const el = document.getElementById('submit')
+assert(!!el && el.tagName === 'INPUT')
+```
+
+يجب أن يكون `#submit` الخاص بك تابعا إلى `#form`.
+
+```js
+const els = document.querySelectorAll('#form #submit')
+assert(els.length > 0)
+```
+
+يجب أن يحتوي `#submit` الخاص بك `type` بقيمة `submit`.
+
+```js
+const el = document.getElementById('submit')
+assert(!!el && el.type === 'submit')
+```
+
+يجب أن تحتوي `#form` على سمة `action` بقيمة `https://www.freecodecamp.com/email-submit`.
+
+```js
+const el = document.getElementById('form')
+assert(!!el && el.action === 'https://www.freecodecamp.com/email-submit')
+```
+
+يجب أن يحتوي `#email` الخاص بك على سمة `name` بقيمة `email`.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && el.name === 'email')
+```
+
+يجب أن يكون عنصر `#nav-bar` الخاص بك دائما في الجزء العلوي من نافذة العرض.
+
+```js
+(async () => {
+  const timeout = (milliseconds) => new Promise((resolve) => setTimeout(resolve, milliseconds));
+
+  const header = document.getElementById('header');
+  const headerChildren = header.children;
+  const navbarCandidates = [header, ...headerChildren];
+
+  // Return smallest top position of all navbar candidates
+  const getNavbarPosition = (candidates = []) => {
+    return candidates.reduce(
+      (min, candidate) =>
+        Math.min(min, Math.abs(candidate?.getBoundingClientRect().top)),
+      Infinity
+    );
+  };
+  assert.approximately(
+    getNavbarPosition(navbarCandidates),
+    0,
+    15,
+    '#header or one of its children should be at the top of the viewport '
+  );
+
+  window.scroll(0, 500);
+  await timeout(1);
+
+  assert.approximately(
+    getNavbarPosition(navbarCandidates),
+    0,
+    15,
+    '#header or one of its children should be at the top of the ' +
+      'viewport even after scrolling '
+  );
+
+  window.scroll(0, 0);
+})();
+```
+
+يجب أن تحتوي صفحة هبوط المنتج على media query واحد على الأقل.
+
+```js
+const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
+const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
+assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
+```
+
+صفحة هبوط المنتج الخاص بك يجب أن تستخدم CSS flexbox مرة واحدة على الأقل.
+
+```js
+const hasFlex = (rule) => ["flex", "inline-flex"].includes(rule.style?.display)
+const stylesheet = new __helpers.CSSHelp(document).getStyleSheet()
+const cssRules = new __helpers.CSSHelp(document).styleSheetToCssRulesArray(stylesheet)
+const mediaRules = new __helpers.CSSHelp(document).getCSSRules('media')
+const usesFlex = cssRules.find(rule => hasFlex(rule))
+const usesFlexMedia = mediaRules.find(mediaRule => {
+  return [...mediaRule.cssRules].find(rule => hasFlex(rule))
+})
+assert(usesFlex || usesFlexMedia)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+```css
+
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css" />
+    <title>Product Landing Page</title>
+  </head>
+  <body>
+    <header id="header">
+      <nav id="nav-bar">
+        <img
+          id="header-img"
+          src="https://upload.wikimedia.org/wikipedia/commons/3/39/Pokeball.PNG"
+          max-height="50px"
+        />
+        <a href="#Features" class="nav-link">Features</a> |
+        <a href="#Video" class="nav-link">See our facility!</a> |
+        <a href="#Pricing" class="nav-link">Purchase</a>
+        <hr />
+      </nav>
+    </header>
+    <main>
+      <h1>
+        Pokemon Daycare Service
+      </h1>
+      <section id="Features">
+        <h2>What we offer</h2>
+        <div class="flex-here">
+          <div class="flex-left">
+            <img
+              id="bullet"
+              src="https://upload.wikimedia.org/wikipedia/commons/3/39/Pokeball.PNG"
+              max-height="25px"
+            />
+          </div>
+          <div class="flex-right">Guaranteed friendly and loving staff!</div>
+        </div>
+        <div class="flex-here">
+          <div class="flex-left">
+            <img
+              id="bullet"
+              src="https://upload.wikimedia.org/wikipedia/commons/3/39/Pokeball.PNG"
+              max-height="25px"
+            />
+          </div>
+          <div class="flex-right">
+            Comfortable environment for Pokemon to explore and play!
+          </div>
+        </div>
+        <div class="flex-here">
+          <div class="flex-left">
+            <img
+              id="bullet"
+              src="https://upload.wikimedia.org/wikipedia/commons/3/39/Pokeball.PNG"
+              max-height="25px"
+            />
+          </div>
+          <div class="flex-right">
+            Multiple membership plans to fit your lifestyle!
+          </div>
+        </div>
+      </section>
+      <section id="Video">
+        <h2>Check us out!</h2>
+        A sneak peek into our facility:
+        <br />
+        <iframe
+          id="video"
+          width="520"
+          height="347"
+          src="https://www.youtube.com/embed/Nw-ksH2r6AQ"
+          frameborder="0"
+          allowfullscreen
+          alt="A video tour of our facility"
+        >
+        </iframe>
+      </section>
+      <section id="Pricing">
+        <h2>Membership Plans</h2>
+        <div class="flex-mem">
+          <div class="flex-mem-box">
+            <font size="+2">Basic Membership</font><br />
+            <ul>
+              <li>One Pokemon</li>
+              <li>Food and berries provided</li>
+            </ul>
+            <em>$9.99/month</em>
+          </div>
+          <div class="flex-mem-box">
+            <font size="+2">Silver Membership</font><br />
+            <ul>
+              <li>Up to Three Pokemon</li>
+              <li>Food and berries provided</li>
+              <li>Grooming and accessories included</li>
+            </ul>
+            <em>$19.99/month</em>
+          </div>
+          <div class="flex-mem-box">
+            <font size="+2">Gold Membership</font><br />
+            <ul>
+              <li>Up to six Pokemon!</li>
+              <li>Food and berries provided</li>
+              <li>Grooming and accessories included</li>
+              <li>Personal training for each Pokemon</li>
+              <li>Breeding and egg hatching</li>
+            </ul>
+            <em>$29.99/month</em>
+          </div>
+        </div>
+      </section>
+      <form id="form" action="https://www.freecodecamp.com/email-submit">
+        <p>Sign up for our newsletter!</p>
+        <label for="email"><p>Email:</p><input name="email" id="email" type="email" placeholder="johnsmith@email.com" required></label>
+        <input type="submit" id="submit">
+      </form>
+      <footer>
+        <a href="../">Return to Project List</a> |
+        <a href="https://www.nhcarrigan.com">Return to HomePage</a>
+      </footer>
+    </main>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: #3a3240;
+  color: white;
+}
+main {
+  max-width: 750px;
+  margin: 50px auto;
+}
+input {
+  background-color: #92869c;
+}
+a:not(.nav-link) {
+  color: white;
+}
+#header-img {
+  max-height: 25px;
+}
+#nav-bar {
+  position: fixed;
+  width: 100%;
+  text-align: center;
+  top: 0%;
+  background-color: #92869c;
+}
+h1 {
+  text-align: center;
+}
+body {
+  text-align: center;
+}
+footer {
+  text-align: center;
+}
+#bullet {
+  max-height: 25px;
+}
+.flex-here {
+  display: flex;
+  justify-content: center;
+}
+.flex-left {
+  height: 25px;
+}
+.flex-mem {
+  display: flex;
+  justify-content: center;
+}
+.flex-mem-box {
+  background-color: #92869c;
+  border-color: black;
+  border-width: 5px;
+  border-style: solid;
+  margin: 10px;
+  padding: 10px;
+  color: black;
+}
+@media (max-width: 350px) {
+  #video {
+    width: 300;
+    height: 200;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
new file mode 100644
index 00000000000..ce6adc7cda6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
@@ -0,0 +1,518 @@
+---
+id: 587d78af367417b2b2512b03
+title: بناء نموذج استطلاع رأي
+challengeType: 14
+forumTopicId: 301145
+dashedName: build-a-survey-form
+---
+
+# --description--
+
+**Objective:** كم ببناء تطبيق يشبه وظيفيا إلي <a href="https://survey-form.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://survey-form.freecodecamp.rocks</a>
+
+**المطلبيات:**
+
+1. يجب أن يكون لديك عنوان صفحة في عنصر `h1` مع `id` بقيمة `title`
+1. يجب أن يكون لديك شرح قصير في عنصر `p` مع `id` بقيمة `description`
+1. يجب أن يكون لديك عنصر `form` مع `id` بقيمة `survey-form`
+1. داخل عنصر النموذج، أنت **مطلوب** منك إدخال اسمك في `input` الذي يحتوي على `id` بقيمة `name` و `type` بقيمة `text`
+1. داخل عنصر النموذج، أنت **مطلوب** منك إدخال بريدك الإلكتروني في `input` الذي يحتوي على `id` بقيمة `email`
+1. إذا قمت بإدخال بريد إلكتروني غير منسق بشكل صحيح، سترى خطأ HTML5 validation error
+1. داخل النموذج، يمكنك إدخال رقم في حقل `input` الذي يحتوي على معرف `id` بقيمة `number`
+1. إذا قمت بإدخال رمز ليس رقما في حقل إدخال الرقم، سترى خطأ HTML5 validation error
+1. إذا قمت بإدخال أرقام خارج نطاق حقل إدخال الرقم، التي تم تعريفها بواسطة سمات `min` و `max`، سترى خطأ HTML5 validation error
+1. بالنسبة لحقول الاسم والبريد الإلكتروني وإدخال الأرقام ، يمكنك رؤية عناصر `label` المقابلة في النموذج، التي تصف الغرض من كل حقل بالـ id's التالية: `id="name-label"` و `id="email-label"` و `id="number-label"`
+1. بالنسبة لحقول الاسم والبريد الإلكتروني والرقم، يمكنك أن ترى الـ placeholder text الذي يعطي وصفا أو تعليمات لكل حقل
+1. داخل عنصر النموذج، يجب أن يكون لديك عنصر `select` للـ dropdown مع `id` بقيمة `dropdown` وخيارين على الأقل للاختيار من بينها
+1. داخل عنصر النموذج، يمكنك تحديد خيار من مجموعة من زرين راديو (radio buttons) على الأقل تم تجميعها باستخدام السمة `name`
+1. داخل عنصر النموذج، يمكنك تحديد عدة حقول من سلسلة من مربعات الاختيار (checkboxes)، يجب أن يكون لكل منها سمة `value`
+1. في داخل عنصر النموذج، يتم تقديم `textarea` لاي تعليقات إضافية
+1. في داخل عنصر النموذج، يتم تقديم زر مع `id` بقيمة `submit` لإرسال (submit) جميع المدخلات (inputs)
+
+أكمل المطلبيات و قم باجتياز جميع الاختبارات أدناه لإكمال هذا المشروع. أعطيها أسلوبك الشخصي الخاص. برمجة سعيدة!
+
+**ملاحظة:** تأكد من إضافة `<link rel="stylesheet" href="styles.css">` في HTML الخاص بك لربط ورقة الأنماط الخاصة بك وتطبيق CSS
+
+# --hints--
+
+يجب أن يكون لديك عنصر `h1` مع `id` بقيمة `title`.
+
+```js
+const el = document.getElementById('title')
+assert(!!el && el.tagName === 'H1')
+```
+
+يجب ألا يكون `#title` فارغاً.
+
+```js
+const el = document.getElementById('title')
+assert(!!el && el.innerText.length > 0)
+```
+
+يجب أن يكون لديك عنصر `p` مع `id` بقيمة `description`.
+
+```js
+const el = document.getElementById('description')
+assert(!!el && el.tagName === 'P')
+```
+
+يجب ألا يكون `#description` فارغاً.
+
+```js
+const el = document.getElementById('description')
+assert(!!el && el.innerText.length > 0)
+```
+
+يجب أن يكون لديك عنصر `form` مع `id` بقيمة `survey-form`.
+
+```js
+const el = document.getElementById('survey-form')
+assert(!!el && el.tagName === 'FORM')
+```
+
+يجب أن يكون لديك عنصر `input` مع `id` بقيمة `name`.
+
+```js
+const el = document.getElementById('name')
+assert(!!el && el.tagName === 'INPUT')
+```
+
+`#name` الخاص بك يجب أن يكون له `type` بقيمة `text`.
+
+```js
+const el = document.getElementById('name')
+assert(!!el && el.type === 'text')
+```
+
+يجب أن يتطلب `#name` الإدخال.
+
+```js
+const el = document.getElementById('name')
+assert(!!el && el.required)
+```
+
+يجب أن يكون `#name` الخاص بك فرع من `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #name')
+assert(!!el)
+```
+
+يجب أن يكون لديك عنصر `input` مع `id` بقيمة `email`.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && el.tagName === 'INPUT')
+```
+
+`#email` الخاص بك يجب أن يكون له `type` بقيمة `email`.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && el.type === 'email')
+```
+
+يجب أن يتطلب `#email` الإدخال.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && el.required)
+```
+
+يجب أن يكون `#email` الخاص بك فرع من `#survey-form`
+
+```js
+const el = document.querySelector('#survey-form #email')
+assert(!!el)
+```
+
+يجب أن يكون لديك عنصر `input` مع `id` بقيمة `number`.
+
+```js
+const el = document.getElementById('number')
+assert(!!el && el.tagName === 'INPUT')
+```
+
+يجب أن يكون `#number` الخاص بك فرع من `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #number')
+assert(!!el)
+```
+
+`#number` الخاص بك يجب أن يكون له `type` بقيمة `number`.
+
+```js
+const el = document.getElementById('number')
+assert(!!el && el.type === 'number')
+```
+
+يجب أن يحتوي `#number` على سمة `min` بقيمة رقمية.
+
+```js
+const el = document.getElementById('number')
+assert(!!el && el.min && isFinite(el.min))
+```
+
+يجب أن يحتوي `#number` على سمة `max` بقيمة رقمية.
+
+```js
+const el = document.getElementById('number')
+assert(!!el && el.max && isFinite(el.max))
+```
+
+يجب أن يكون لديك عنصر `label` مع `id` بقيمة `name-label`.
+
+```js
+const el = document.getElementById('name-label')
+assert(!!el && el.tagName === 'LABEL')
+```
+
+يجب أن يكون لديك عنصر `label` مع `id` بقيمة `email-label`.
+
+```js
+const el = document.getElementById('email-label')
+assert(!!el && el.tagName === 'LABEL')
+```
+
+يجب أن يكون لديك عنصر `label` مع `id` بقيمة `number-label`.
+
+```js
+const el = document.getElementById('number-label')
+assert(!!el && el.tagName === 'LABEL')
+```
+
+يجب أن يحتوي `#name-label` على نص يصف المدخلات.
+
+```js
+const el = document.getElementById('name-label')
+assert(!!el && el.innerText.length > 0)
+```
+
+يجب أن يحتوي `#email-label` على نص يصف المدخلات.
+
+```js
+const el = document.getElementById('email-label')
+assert(!!el && el.innerText.length > 0)
+```
+
+يجب أن يحتوي `#number-label` على نص يصف المدخلات.
+
+```js
+const el = document.getElementById('number-label')
+assert(!!el && el.innerText.length > 0)
+```
+
+يجب أن يكون `#name-label` الخاص بك فرع من `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #name-label')
+assert(!!el)
+```
+
+يجب أن يكون `#email-label` الخاص بك فرع من `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #email-label')
+assert(!!el)
+```
+
+يجب أن يكون `#number-label` الخاص بك فرع من `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #number-label')
+assert(!!el)
+```
+
+يجب أن يكون للـ `#name` سمة وقيمة للـ `placeholder`.
+
+```js
+const el = document.getElementById('name')
+assert(!!el && !!el.placeholder && el.placeholder.length > 0)
+```
+
+يجب أن يكون للـ `#email` سمة وقيمة للـ `placeholder`.
+
+```js
+const el = document.getElementById('email')
+assert(!!el && !!el.placeholder && el.placeholder.length > 0)
+```
+
+يجب أن يكون للـ `#number` سمة وقيمة للـ `placeholder`.
+
+```js
+const el = document.getElementById('number')
+assert(!!el && !!el.placeholder && el.placeholder.length > 0)
+```
+
+يجب أن يكون لديك الحقل `select` مع `id` بقيمة `dropdown`.
+
+```js
+const el = document.getElementById('dropdown')
+assert(!!el && el.tagName === 'SELECT')
+```
+
+يجب أن يحتوي `#dropdown` على عنصرين `option` قابلين للتحديد (غير معطلين).
+
+```js
+const els = document.querySelectorAll('#dropdown option:not([disabled])')
+assert(els.length >= 2)
+```
+
+`#dropdown` الخاص بك يجب أن يكون تابعا لـ `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #dropdown')
+assert(!!el)
+```
+
+يجب أن يكون لديك على الأقل عنصرين `input` من `type` بقيمة `radio` (أزرار الراديو) (radio buttons).
+
+```js
+const els = document.querySelectorAll('input[type="radio"]')
+assert(els.length >= 2)
+```
+
+يجب أن يكون لديك على الأقل زرين راديو تابعين لـ `#survey-form`.
+
+```js
+const els = document.querySelectorAll('#survey-form input[type="radio"]')
+assert(els.length >= 2)
+```
+
+جميع أزرار الراديو الخاصة بك يجب أن يكون لها سمة وقيمة لـ `value`.
+
+```js
+const els1 = document.querySelectorAll('input[type="radio"]')
+const els2 = document.querySelectorAll('input[type="radio"][value=""], input[type="radio"]:not([value])')
+assert(els1.length > 0 && els2.length === 0)
+```
+
+جميع أزرار الراديو الخاصة بك يجب أن يكون لها سمة وقيمة لـ`name`.
+
+```js
+const els1 = document.querySelectorAll('input[type="radio"]')
+const els2 = document.querySelectorAll('input[type="radio"][name=""], input[type="radio"]:not([name])')
+assert(els1.length > 0 && els2.length === 0)
+```
+
+لكل مجموعة أزرار الراديو يجب أن يكون هناك زرين على الأقل.
+
+```js
+const radioButtons = document.querySelectorAll('input[type="radio"]');
+const groups = {}
+
+if (radioButtons) {
+  radioButtons.forEach(el => {
+    if (!groups[el.name]) groups[el.name] = []
+    groups[el.name].push(el)
+  })
+}
+
+const groupKeys = Object.keys(groups)
+
+groupKeys.forEach(key => {
+  if (groups[key].length < 2) assert(false)
+})
+
+assert(groupKeys.length > 0)
+```
+
+يجب أن يكون لديك على الأقل عنصرين `input` مع `type` بقيمة `checkbox` (خانات الاختيار) تابعة لـ `#survey-form`.
+
+```js
+const els = document.querySelectorAll('#survey-form input[type="checkbox"]');
+assert(els.length >= 2)
+```
+
+جميع خانات الاختيار الخاصة بك داخل `#survey-form` يجب أن تحتوي على سمة وقيمة لـ `value`.
+
+```js
+const els1 = document.querySelectorAll('#survey-form input[type="checkbox"]')
+const els2 = document.querySelectorAll('#survey-form input[type="checkbox"][value=""], #survey-form input[type="checkbox"]:not([value])')
+assert(els1.length > 0 && els2.length === 0)
+```
+
+يجب أن يكون لديك عنصر `textarea` واحد على الأقل تابع لـ `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form textarea')
+assert(!!el)
+```
+
+يجب أن يكون لديك عنصر `input` أو `button` مع `id` بقيمة `submit`.
+
+```js
+const el = document.getElementById('submit')
+assert(!!el && (el.tagName === 'INPUT' || el.tagName === 'BUTTON'))
+```
+
+`#submit` الخاص بك يجب أن يكون له `type` بقيمة `submit`.
+
+```js
+const el = document.getElementById('submit')
+assert(!!el && el.type === 'submit')
+```
+
+`#submit` الخاص بك يجب أن يكون تابعا لـ `#survey-form`.
+
+```js
+const el = document.querySelector('#survey-form #submit')
+assert(!!el)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+```css
+
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css" />
+    <title>Survey Form</title>
+  </head>
+  <body>
+    <h1>Survey Form</h1>
+    <p>The card below was built as a sample survey form for freeCodeCamp.</p>
+    <main id="main">
+      <h1 id="title">Join the Togepi Fan Club!</h1>
+      <p id="description">
+        Enter your information here to receive updates about club activities,
+        our monthly newsletter, and other email communications.
+      </p>
+      <form id="survey-form" action="#">
+        <label for="name" id="name-label"
+          ><p>Name:</p>
+          <input type="text" id="name" placeholder="e.g. John Smith" required />
+        </label>
+        <label for="email" id="email-label"
+          ><p>Email:</p>
+          <input
+            type="email"
+            id="email"
+            placeholder="e.g. john.smith@email.com"
+            required
+          />
+        </label>
+        <label for="age" id="number-label"
+          ><p>Age<em>(optional)</em>:</p>
+          <input
+            type="number"
+            id="number"
+            placeholder="e.g. 19"
+            min="18"
+            max="99"
+          />
+        </label>
+        <label for="interest" id="interest-label"
+          ><p>What are you most interested in?</p>
+          <select id="dropdown">
+            <option selected disabled hidden></option>
+            <option id="battles">Battling</option>
+            <option id="breeding">Breeding</option>
+            <option id="catching">Completing my Pokedex</option>
+            <option id="exploring">Exploring new regions</option>
+          </select>
+        </label>
+        <p>Who is your favourite Pokemon?</p>
+        <label for="togepi">
+          <input
+            id="togepi"
+            type="radio"
+            name="favorite"
+            value="togepi"
+          />Togepi!
+        </label>
+        <label for="pikachu">
+          <input
+            id="pikachu"
+            type="radio"
+            name="favorite"
+            value="pikachu"
+          />Pikachu
+        </label>
+        <label for="other">
+          <input id="other" type="radio" name="favorite" value="other" />Other
+        </label>
+        <p>Which communications do you want to receive?</p>
+        <label for="newsletter">
+          <input
+            id="newsletter"
+            type="checkbox"
+            name="communications"
+            value="newsletter"
+          />Newsletter
+        </label>
+        <label for="events">
+          <input
+            id="events"
+            type="checkbox"
+            name="communications"
+            value="events"
+          />Event updates
+        </label>
+        <label for="updates">
+          <input
+            id="updates"
+            type="checkbox"
+            name="communications"
+            value="updates"
+          />Club updates
+        </label>
+        <p>Any other information you would like to share?</p>
+        <textarea id="additional-information" rows="4" cols="50">
+You can provide comments, suggestions, or feedback here.</textarea
+        >
+        <p>
+          <em
+            >Please note: This form is a proof of concept. Submitting the form
+            will not actually transmit your data.</em
+          >
+        </p>
+        <button type="Submit" id="submit">Submit</button>
+      </form>
+    </main>
+  </body>
+  <footer>
+    <a href="../">Return to Project List</a> |
+    <a href="https://www.nhcarrigan.com">Return to HomePage</a>
+  </footer>
+</html>
+```
+
+```css
+main {
+  text-align: center;
+  background-color: #92869c;
+  background-blend-mode: lighten;
+  max-width: 500px;
+  margin: 20px auto;
+  border-radius: 50px;
+  box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
+  color: black;
+}
+body {
+  text-align: center;
+  background: #3a3240;
+  color: white;
+}
+input, textarea, select, button {
+  background: #3a3240;
+  color: white;
+}
+a {
+  color: white;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md
new file mode 100644
index 00000000000..b926d6af759
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-technical-documentation-page-project/build-a-technical-documentation-page.md
@@ -0,0 +1,529 @@
+---
+id: 587d78b0367417b2b2512b05
+title: مشروع بناء صفحة التوثيق التقني
+challengeType: 14
+forumTopicId: 301146
+dashedName: build-a-technical-documentation-page
+---
+
+# --description--
+
+**Objective:** قم ببناء تطبيق يشبه وظيفيا إلى <a href="https://technical-documentation-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://technical-documentation-page.freecodecamp.rocks</a>
+
+**المتطلبات:**
+
+1. يمكنك مشاهدة عنصر `main` مع `id="main-doc"`، والذي يحتوي على المحتوى الرئيسي للصفحة (الوثائق التقنية)
+1. ضمن عنصر `#main-doc` ، يمكنك رؤية عدة عناصر `section`، كل منها مع class بقيمة `main-section`. وينبغي أن يكون هناك خمسة على الأقل
+1. العنصر الأول في كل `.main-section` يجب أن يكون عنصر `header`، والذي يحتوي على نص يصف موضوع ذلك القسم.
+1. كل عنصر من عناصر `section` مع class بقيمة `main-section` يجب أن يكون لديه `id` يتوافق مع نص كل `header` موجود داخله. يجب استبدال أي مسافات بتسطير سفلي (underscore) (على سبيل المثال القسم الذي يحتوي على header "JavaScript and Java" يجب أن يكون لديه `id="JavaScript_and_Java"`)
+1. عناصر `.main-section` يجب أن تحتوي على الأقل على عشرة عناصر `p` إجمالية (ليس لكل واحد)
+1. يجب أن تحتوي عناصر `.main-section` على خمسة عناصر `code` كلية (ليس لكل منها)
+1. يجب أن تحتوي عناصر `.main-section` على خمسة عناصر `li` كلية (ليس لكل منها)
+1. يمكنك رؤية عنصر `nav` مع `id="navbar"`
+1. يجب أن يحتوي عنصر navbar على عنصر `header` يحتوي على نص يصف موضوع الوثائق التقنية
+1. بالإضافة إلى ذلك، يجب أن يحتوي navbar على عناصر للروابط (`a`) مع class بقيمة `nav-link`. يجب أن يكون هناك واحد لكل عنصر `main-section`
+1. عنصر `header` في `#navbar` يجب أن يأتي قبل أي رابط (`a`) في الـ navbar
+1. يجب أن يحتوي كل عنصر من class بقيمة `nav-link` على نص يطابق نص `header` داخل كل `section` (على سبيل المثال ، إذا كان لديك "Hello world" section/header، يجب أن يحتوي الـ navbar الخاص بك على عنصر يحتوي على النص" Hello world ")
+1. عند النقر على عنصر navbar، يجب أن تنتقل الصفحة إلى القسم المقابل من عنصر `#main-doc` (على سبيل المثال. إذا قمت بالنقر على عنصر `.nav-link` الذي يحتوي على النص "Hello world"، الصفحة تنتقل إلى عنصر `section` بهذا الـ id ، وتحتوي على الـ header المقابل)
+1. على الأجهزة العادية الحجم (الحواسيب المحمولة، الحواسيب المكتبية)، يجب أن يظهر العنصر `id="navbar"` على الجانب الأيسر من الشاشة ويجب أن يكون دائماً مرئيًا للمستخدم
+1. الوثائق التقنية الخاصة بك يجب أن تستخدم media query واحد على الأقل
+
+أكمل المطلبيات و قم باجتياز جميع الاختبارات أدناه لإكمال هذا المشروع. أعطيها أسلوبك الشخصي الخاص. برمجة سعيدة!
+
+**ملاحظة:** تأكد من إضافة `<link rel="stylesheet" href="styles.css">` في HTML الخاص بك لربط ورقة الأنماط الخاصة بك وتطبيق CSS
+
+# --hints--
+
+يجب أن يكون لديك عنصر `main` مع `id` بقيمة `main-doc`.
+
+```js
+const el = document.getElementById('main-doc')
+assert(!!el)
+```
+
+يجب أن يكون لديك على الأقل خمسة عناصر `section` مع class بقيمة `main-section`.
+
+```js
+const els = document.querySelectorAll('#main-doc section')
+assert(els.length >= 5)
+```
+
+جميع عناصر `.main-section` يجب أن تكون عناصر `section`.
+
+```js
+const els = document.querySelectorAll('.main-section')
+els.forEach(el => {
+  if (el.tagName !== 'SECTION') assert(false)
+})
+assert(els.length > 0)
+```
+
+يجب أن يكون لديك على الأقل خمسة عناصر `.main-section` تابعة لـ `#main-doc`.
+
+```js
+const els = document.querySelectorAll('#main-doc .main-section')
+assert(els.length >= 5)
+```
+
+أول طفل (child) لكل `.main-section` يجب أن يكون عنصر `header`.
+
+```js
+const els = document.querySelectorAll('.main-section')
+els.forEach(el => {
+  if(el.firstElementChild?.tagName !== 'HEADER') assert(false)
+})
+assert(els.length > 0)
+```
+
+يجب ألا يكون أي عنصر من عناصر `header` فارغاً.
+
+```js
+const els = document.querySelectorAll('header')
+els.forEach(el => {
+  if (el.innerText?.length <= 0) assert(false)
+})
+assert(els.length > 0)
+```
+
+جميع عناصر `.main-section` يجب أن يكون لديها `id`.
+
+```js
+const els = document.querySelectorAll('.main-section')
+els.forEach(el => {
+  if (!el.id || el.id === '') assert(false)
+})
+assert(els.length > 0)
+```
+
+يجب أن يحتوي كل `.main-section` على `id` يطابق نص طفله الأول ، مع استبدال أي مسافات في نص الطفل بالشرطات السفلية (`_`) للـ id's.
+
+```js
+const els = document.querySelectorAll('.main-section')
+els.forEach(el => {
+  const text = el.firstElementChild?.innerText?.replaceAll(' ', '_')
+  if (el.id?.toUpperCase() !== text?.toUpperCase()) assert(false)
+})
+assert(els.length > 0)
+```
+
+يجب أن يكون لديك على الأقل 10 عناصر `p` (إجمالي) داخل عناصر `.main-section`.
+
+```js
+const els = document.querySelectorAll('.main-section p')
+assert(els.length >= 10)
+```
+
+يجب أن يكون لديك على الأقل خمسة عناصر `code` تابعة لـ `.main-section`.
+
+```js
+const els = document.querySelectorAll('.main-section code')
+assert(els.length >= 5)
+```
+
+يجب أن يكون لديك على الأقل خمسة عناصر `li` تابعة لـ `.main-section`.
+
+```js
+const els = document.querySelectorAll('.main-section li')
+assert(els.length >= 5)
+```
+
+يجب أن يكون لديك عنصر `nav` مع `id` بقيمة `navbar`.
+
+```js
+const el = document.getElementById('navbar')
+assert(!!el && el.tagName === 'NAV')
+```
+
+`#navbar` يجب أن يحتوي على عنصر واحد `header` داخله.
+
+```js
+const els = document.querySelectorAll('#navbar header')
+assert(els.length === 1)
+```
+
+يجب أن يكون لديك عنصر `a` واحد على الأقل مع class بقيمة `nav-link`.
+
+```js
+const els = document.querySelectorAll('a.nav-link')
+assert(els.length >= 1)
+```
+
+جميع عناصر `.nav-link` يجب أن تكون روابط (`a`).
+
+```js
+const els = document.querySelectorAll('.nav-link')
+els.forEach(el => {
+  if (el.tagName !== 'A') assert(false)
+})
+assert(els.length > 0)
+```
+
+جميع عناصر `.nav-link` يجب أن تكون في `#navbar`.
+
+```js
+const els1 = document.querySelectorAll('.nav-link')
+const els2 = document.querySelectorAll('#navbar .nav-link')
+assert(els2.length > 0 && els1.length === els2.length)
+```
+
+يجب أن يكون لديك نفس العدد من عناصر `.nav-link` و `.main-section`.
+
+```js
+const els1 = document.querySelectorAll('.main-section')
+const els2 = document.querySelectorAll('.nav-link')
+assert(els1.length > 0 && els2.length > 0 && els1.length === els2.length)
+```
+
+عنصر `header` في `#navbar` يجب أن يأتي قبل أي رابط (`a`) أيضا في `#navbar`.
+
+```js
+const navLinks = document.querySelectorAll('#navbar a.nav-link');
+const header = document.querySelector('#navbar header');
+navLinks.forEach((navLink) => {
+  if (
+    (
+      header.compareDocumentPosition(navLink) &
+      Node.DOCUMENT_POSITION_PRECEDING
+    ) 
+  ) assert(false)
+});
+assert(!!header)
+```
+
+يجب أن يحتوي كل `.nav-link` على نص يتوافق مع نص `header` في الـ `section` ذي الصلة (على سبيل المثال ، إذا كان لديك "Hello world" section/header، يجب أن يحتوي `#navbar` على `.nav-link` الذي يحتوي على النص "Hello world").
+
+```js
+const headerText = Array.from(document.querySelectorAll('.main-section')).map(el =>
+  el.firstElementChild?.innerText?.trim().toUpperCase()
+)
+const linkText = Array.from(document.querySelectorAll('.nav-link')).map(el =>
+  el.innerText?.trim().toUpperCase()
+)
+const remainder = headerText.filter(str => linkText.indexOf(str) === -1)
+assert(headerText.length > 0 && headerText.length > 0 && remainder.length === 0)
+```
+
+يجب أن يكون لكل `.nav-link` سمة `href` التي تربط مع `.main-section` (على سبيل المثال ، إذا نقرت على العنصر `.nav-link` الذي يحتوي على النص "Hello world" ، تنتقل الصفحة إلى عنصر `section` بهذا الـ id).
+
+```js
+const hrefValues = Array.from(document.querySelectorAll('.nav-link')).map(el => el.getAttribute('href'))
+const mainSectionIDs = Array.from(document.querySelectorAll('.main-section')).map(el => el.id)
+const missingHrefValues = mainSectionIDs.filter(str => hrefValues.indexOf('#' + str) === -1)
+assert(hrefValues.length > 0 && mainSectionIDs.length > 0 && missingHrefValues.length === 0)
+```
+
+`#navbar` الخاص بك يجب أن يكون دائماً على الحافة اليسرى للنافذة.
+
+```js
+const el = document.getElementById('navbar')
+const left1 = el?.offsetLeft
+const left2 = el?.offsetLeft
+assert(!!el && left1 >= -15 && left1 <= 15 && left2 >= -15 && left2 <= 15)
+```
+
+مشروع التوثيق التقني الخاص بك يجب أن يستخدم media query واحد على الأقل.
+
+```js
+const htmlSourceAttr = Array.from(document.querySelectorAll('source')).map(el => el.getAttribute('media'))
+const cssCheck = new __helpers.CSSHelp(document).getCSSRules('media')
+assert(cssCheck.length > 0 || htmlSourceAttr.length > 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+```css
+
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css" />
+    <title>Technical Documentation Page</title>
+  </head>
+  <body>
+    <nav id="navbar">
+      <header><br />Algebraic Concepts</header>
+      <hr />
+      <a href="#introduction" class="nav-link">Introduction</a><br />
+      <hr />
+      <a href="#definitions" class="nav-link">Definitions</a><br />
+      <hr />
+      <a href="#examples" class="nav-link">Examples</a><br />
+      <hr />
+      <a href="#solving_equations" class="nav-link">Solving Equations</a><br />
+      <hr />
+      <a href="#solving_equations_ii" class="nav-link">Solving Equations II</a
+      ><br />
+      <hr />
+      <a href="#solving_equations_iii" class="nav-link">Solving Equations III</a
+      ><br />
+      <hr />
+      <a href="#system_of_equations" class="nav-link">System of Equations</a
+      ><br />
+      <hr />
+      <a href="#try_it_yourself!" class="nav-link">Try it Yourself!</a><br />
+      <hr />
+      <a href="#more_information" class="nav-link">More Information</a><br />
+    </nav>
+    <main id="main-doc">
+      <section class="main-section" id="introduction">
+        <header>Introduction</header>
+        <p>
+          Welcome to a basic introduction of algebra. In this tutorial, we will
+          review some of the more common algebraic concepts.
+        </p>
+      </section>
+      <section class="main-section" id="definitions">
+        <header>Definitions</header>
+        <p>
+          To start with, let's define some of the more common terms used in
+          algebra:
+        </p>
+        <ul>
+          <li>
+            <b>Variable:</b> A variable is an unknown value, usually represented
+            by a letter.
+          </li>
+          <li>
+            <b>Expression:</b> Essentially a mathematical object. For the
+            purpose of this tutorial, an expression is one part of an equation.
+          </li>
+          <li>
+            <b>Equation:</b> An equation is a mathematical argument in which two
+            expressions result in the same value.
+          </li>
+        </ul>
+      </section>
+      <section class="main-section" id="examples">
+        <header>Examples</header>
+        <p>
+          Sometimes it is easier to understand the definitions when you have a
+          physical example to look at. Here is an example of the above terms.<br /><br />
+          <code>x + 5 = 12 </code><br /><br />
+          In this above example, we have:
+        </p>
+        <ul>
+          <li><b>Variable:</b> The variable in the example is "x".</li>
+          <li>
+            <b>Expression:</b> There are two expressions in this example. They
+            are "x+5" and "12".
+          </li>
+          <li>
+            <b>Equation:</b> The entire example, "x+5=12", is an equation.
+          </li>
+        </ul>
+      </section>
+      <section class="main-section" id="solving_equations">
+        <header>Solving Equations</header>
+        <p>
+          The primary use for algebra is to determine an unknown value, the
+          "variable", with the information provided. Continuing to use our
+          example from above, we can find the value of the variable "x".<br /><br />
+          <code>x + 5 = 12 </code><br /><br />
+          In an equation, both sides result in the same value. So you can
+          manipulate the two expressions however you need, as long as you
+          perform the same operation (or change) to each side. You do this
+          because the goal when solving an equation is to
+          <b
+            >get the variable into its own expression, or by itself on one side
+            of the = sign.</b
+          ><br />For this example, we want to remove the "+5" so the "x" is
+          alone. To do this, we can <em>subtract 5</em>, because subtraction is
+          the opposite operation to addition. But remember, we have to perform
+          the same operation to both sides of the equation. Now our equation
+          looks like this.<br /><br />
+          <code>x + 5 - 5 = 12 - 5</code><br /><br />
+          The equation looks like a mess right now, because we haven't completed
+          the operations. We can <b>simplify</b> this equation to make it easier
+          to read by performing the operations "5-5" and "12-5". The result
+          is:<br /><br />
+          <code>x = 7</code><br /><br />
+          We now have our solution to this equation!
+        </p>
+      </section>
+      <section class="main-section" id="solving_equations_ii">
+        <header>Solving Equations II</header>
+        <p>
+          Let us look at a slightly more challenging equation.<br /><br />
+          <code>3x + 4 = 13</code><br /><br />
+          Again we can start with subtraction. In this case, we want to subtract
+          4 from each side of the equation. We will also go ahead and simplify
+          with each step. So now we have:<br /><br />
+          <code>3x = 9</code><br /><br />
+          "3x" translates to "3*x", where the "*" symbol indicates
+          multiplication. We use the "*" to avoid confusion, as the "x" is now a
+          variable instead of a multiplication symbol. The opposite operation
+          for multiplication is division, so we need to
+          <b>divide each expression by 3</b>.<br /><br />
+          <code>x = 3</code><br /><br />
+          And now we have our solution!
+        </p>
+      </section>
+      <section class="main-section" id="solving_equations_iii">
+        <header>Solving Equations III</header>
+        <p>
+          Now we are getting in to more complex operations. Here is another
+          equation for us to look at:<br /><br />
+          <code>x^2 - 8 = 8</code><br /><br />
+          Our very first step will be to <b>add</b> 8 to each side. This is
+          different from our previous examples, where we had to subtract. But
+          remember, our goal is to get the variable alone by performing opposite
+          operations.<br /><br />
+          <code>x^2 = 16</code><br /><br />
+          But what does the "^2" mean? The "^" symbol is used to denote
+          exponents in situations where superscript is not available. When
+          superscript <b>is</b> available, you would see it as x<sup>2</sup>.
+          For the sake of this project, however, we will use the "^" symbol.<br />
+          An exponent tells you how many times the base (in our case, "x") is
+          multiplied by itself. So, "x^2" would be the same as "x*x". Now the
+          opposite function of multiplication is division, but we would have to
+          <b>divide both sides by "x"</b>. We do not want to do this, as that
+          would put an "x" on the other side of the equation. So instead, we
+          need to use the root operation! For an exponent of "2", we call this
+          the "square root" and denote it with "√". Our equation is now:
+          <br /><br />
+          <code>x = √9</code><br /><br />
+          Performing a root operation by hand can be a tedious process, so we
+          recommend using a calculator when necessary. However, we are lucky in
+          that "9" is a
+          <a href="https://en.wikipedia.org/wiki/Square_number"
+            >perfect square</a
+          >, so we do not need to calculate anything. Instead, we find our
+          answer to be:<br /><br />
+          <code>x = 3</code>
+        </p>
+      </section>
+      <section class="main-section" id="system_of_equations">
+        <header>System of Equations</header>
+        <p>
+          As you explore your algebra studies further, you may start to run
+          across equations with more than one variable. The first such equations
+          will likely look like:<br /><br />
+          <code>y = 3x</code><br /><br />
+          An equation like this does <b>not have one single solution</b>.
+          Rather, there are a series of values for which the equation is true.
+          For example, if "x=3" and "y=9", the equation is true. These equations
+          are usually used to plot a graph. <br />
+          Getting more complicated, though, you may be given a <b>pair</b> of
+          equations. This is called a "system of equations", and CAN be solved.
+          Let's look at how we do this! Consider the following system of
+          equations:<br /><br />
+          <code>y = 3x | y - 6 = x</code>
+          A system of equations IS solvable, but it is a multi-step process. To
+          get started, we need to chose a variable we are solving for. Let's
+          solve for "x" first. From the second equation, we know that "x" equals
+          "y - 6", but we cannot simplify that further because we do not have a
+          value for "y". Except, thanks to the system of equations, we DO have a
+          value for "y". We know that "y" equals "3x". So, looking at our second
+          equation, we can replace "y" with "3x" because they have the same
+          value. We then get:<br /><br />
+          <code>3x - 6 = x</code><br /><br />
+          Now we can solve for "x"! We start by adding 6 to each side.<br /><br />
+          <code>3x = x + 6</code><br /><br />
+          We still need to get "x" by itself, so we subtract "x" from both sides
+          and get:<br /><br />
+          <code>2x = 6</code><br /><br />
+          If this confuses you, remember that "3x" is the same as "x+x+x".
+          Subtract an "x" from that and you get "x+x", or "2x". Now we divide
+          both sides by 2 and have our value for x!<br /><br />
+          <code>x = 3</code><br /><br />
+          However, our work is not done yet. We still need to find the value for
+          "y". Let's go back to our first equation:<br /><br />
+          <code>y = 3x</code><br /><br />
+          We have a value for "x" now, so let's see what happens if we put that
+          value in.<br /><br />
+          <code>y = 3*3</code><br /><br />
+          We perform the multiplication and discover that "y=9"! Our solution to
+          this system of equations then is:<br /><br />
+          <code>x = 3 and y = 9</code><br /><br />
+        </p>
+      </section>
+      <section class="main-section" id="try_it_yourself!">
+        <header>Try it Yourself!</header>
+        <p>Coming Soon!</p>
+        <p>Keep an eye out for new additions!</p>
+      </section>
+      <section class="main-section" id="more_information">
+        <header>More Information</header>
+        <p>Check out the following links for more information!</p>
+        <ul>
+          <li>
+            <a href="https://www.wolframalpha.com/examples/mathematics/algebra/"
+              >Wolfram Alpha</a
+            >
+            is a great source for multiple mathematic fields.
+          </li>
+          <li>
+            <a href="https://en.wikipedia.org/wiki/Algebra"
+              >Wikipedia's Algebra page</a
+            >
+            for more general information.
+          </li>
+        </ul>
+      </section>
+    </main>
+  </body>
+  <footer>
+    <a href="../">Return to Project List</a> |
+    <a href="https://www.nhcarrigan.com">Return to HomePage</a>
+  </footer>
+</html>
+```
+
+```css
+* {
+  background-color: #3a3240;
+}
+a {
+  color: #92869c;
+}
+a:hover {
+  background-color: #92869c;
+  color: #3a3240;
+}
+#navbar {
+  border-style: solid;
+  border-width: 5px;
+  border-color: #92869c;
+  height: 100%;
+  top: -5px;
+  left: -5px;
+  padding: 5px;
+  text-align: center;
+  color: #92869c
+}
+@media (min-width: 480px) {
+  #navbar {
+    position: fixed;
+  }
+}
+main {
+  margin-left: 220px;
+  color: #92869c
+}
+header {
+  font-size: 20pt;
+}
+code {
+  background-color: #92869c;
+  border-style: dashed;
+  border-width: 2px;
+  border-color: #92869c;
+  padding: 5px;
+  color: black;
+}
+footer {
+  text-align: center;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md
new file mode 100644
index 00000000000..4c99b97f034
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/build-a-tribute-page-project/build-a-tribute-page.md
@@ -0,0 +1,325 @@
+---
+id: bd7158d8c442eddfaeb5bd18
+title: بناء مشروع صفحة الثناء
+challengeType: 14
+forumTopicId: 301147
+dashedName: build-a-tribute-page
+---
+
+# --description--
+
+**Objective:** قم ببناء تطبيق يشبه وظيفيا إلى <a href="https://tribute-page.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://tribute-page.freecodecamp.rocks</a>
+
+**المتطلبات:**
+
+1. يجب أن يكون لصفحة الثناء الخاصة بك عنصر `main` مع `id` بقيمة `main`، والذي يحتوي على جميع العناصر الأخرى
+1. يجب أن ترى عنصرا مع `id` بقيمة `title`، الذي يحتوي على string (اي نص) ،يصف موضوع صفحة الثناء (مثل "الدكتور نورمان بورلاوغ")
+1. يجب أن ترى إما عنصر `figure` أو `div` مع `id` بقيمة `img-div`
+1. داخل عنصر `#img-div` يمكنك رؤية عنصر `img` مع `id="image"`
+1. داخل عنصر `#img-div` ، يجب أن ترى عنصرا مع `id="img-caption"` يحتوي على محتوى نصي يصف الصورة المعروضة في `#img-div`
+1. يجب أن ترى عنصرا مع `id="tribute-info"`، الذي يحتوي على محتوى نصي يصف موضوع صفحة الثناء
+1. يجب أن ترى عنصر `a` مع `id="tribute-link"` مقابل له، والذي يربط بموقع خارجي، والذي يحتوي على معلومات إضافية عن موضوع صفحة الثناء tribute page. تلميح: يجب أن تعطي العنصر الخاص بك سمة `target` بقيمة `_blank` لكي يفتح الرابط الخاص بك في علامة تبويب جديدة
+1. `#image` الخاص بك يجب أن تستخدم خصائص `max-width` و `height` لتغيير الحجم بشكل مستجيب، نسبة إلى عرض العنصر الاب، دون تجاوز حجمه الأصلي
+1. عنصر `img` الخاص بك يجب أن يتمركز داخل العنصر الاب
+
+أكمل المتطلبات و قم باجتياز جميع الاختبارات أدناه لإكمال هذا المشروع. أعطيها أسلوبك الشخصي الخاص. برمجة سعيدة!
+
+**ملاحظة:** تأكد من إضافة `<link rel="stylesheet" href="styles.css">` في HTML الخاص بك لربط ورقة الأنماط (stylesheet) الخاصة بك وتطبيق الـ CSS
+
+# --hints--
+
+يجب أن يكون لديك عنصر `main` مع `id` بقيمة `main`.
+
+```js
+const el = document.getElementById('main')
+assert(!!el && el.tagName === 'MAIN')
+```
+
+`#img-div` و`#image` و `#img-caption` و `#tribute-info` و `#tribute-link` يجب أن تكون كلها تابعة لـ `#main`.
+
+```js
+const el1 = document.querySelector('#main #img-div')
+const el2 = document.querySelector('#main #image')
+const el3 = document.querySelector('#main #img-caption')
+const el4 = document.querySelector('#main #tribute-info')
+const el5 = document.querySelector('#main #tribute-link')
+assert(!!el1 & !!el2 && !!el3 && !!el4 && !!el5)
+```
+
+يجب أن يكون لديك عنصر مع `id` بقيمة `title`.
+
+```js
+const el = document.getElementById('title')
+assert(!!el)
+```
+
+يجب ألا يكون `#title` فارغاً.
+
+```js
+const el = document.getElementById('title')
+assert(!!el && el.innerText.length > 0)
+
+```
+
+يجب أن يكون لديك عنصر `figure` أو `div` مع `id` بقيمة `img-div`.
+
+```js
+const el = document.getElementById('img-div')
+assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGURE'))
+```
+
+يجب أن يكون لديك عنصر `img` مع `id` بقيمة `image`.
+
+```js
+const el = document.getElementById('image')
+assert(!!el && el.tagName === 'IMG')
+```
+
+`#image` الخاص بك يجب أن يكون تابعا لـ `#img-div`.
+
+```js
+const el = document.querySelector('#img-div #image')
+assert(!!el)
+```
+
+يجب أن يكون لديك عنصر `figcaption` أو `div` مع `id` بقيمة `img-caption`.
+
+```js
+const el = document.getElementById('img-caption')
+assert(!!el && (el.tagName === 'DIV' || el.tagName === 'FIGCAPTION'))
+```
+
+`#img-caption` الخاص بك يجب أن يكون تابعا لـ `#img-div`.
+
+```js
+const el = document.querySelector('#img-div #img-caption')
+assert(!!el)
+```
+
+يجب ألا يكون `#img-caption` فارغاً.
+
+```js
+const el = document.getElementById('img-caption')
+assert(!!el && el.innerText.length > 0)
+```
+
+يجب أن يكون لديك عنصر مع `id` بقيمة `tribute-info`.
+
+```js
+const el = document.getElementById('tribute-info')
+assert(!!el)
+```
+
+يجب ألا يكون `#tribute-info` فارغاً.
+
+```js
+const el = document.getElementById('tribute-info')
+assert(!!el && el.innerText.length > 0)
+```
+
+يجب أن يكون لديك عنصر `a` مع `id` بقيمة `tribute-link`.
+
+```js
+const el = document.getElementById('tribute-link')
+assert(!!el && el.tagName === 'A')
+```
+
+`#tribute-link` يجب أن يحتوي على السمة والقيمة لـ `href`.
+
+```js
+const el = document.getElementById('tribute-link')
+assert(!!el && !!el.href && el.href.length > 0)
+```
+
+يجب أن يحتوي عنصر `#tribute-link` على سمة `target` بقيمة `_blank`.
+
+```js
+const el = document.getElementById('tribute-link')
+assert(!!el && el.target === '_blank')
+```
+
+`img` الخاص بك يجب أن يكون له `display` بقيمة `block`.
+
+```js
+const img = document.getElementById('image');
+const imgStyle = window.getComputedStyle(img);
+const style = imgStyle?.getPropertyValue('display')
+assert(style === 'block')
+```
+
+`#image` الخاص بك يجب أن يكون له `max-width` بقيمة `100%`.
+
+```js
+const img = document.getElementById('image');
+const imgStyle = window.getComputedStyle(img);
+const style = imgStyle?.getPropertyValue('max-width')
+assert(style === '100%')
+```
+
+`#image` الخاص بك يجب أن يكون له `height` بقيمة `auto`.
+
+```js
+// taken from the testable-projects repo
+const img = document.getElementById('image');
+const imgStyle = window.getComputedStyle(img);
+const oldDisplayValue = imgStyle.getPropertyValue('display');
+const oldDisplayPriority = imgStyle.getPropertyPriority('display');
+img?.style.setProperty('display', 'none', 'important');
+const heightValue = imgStyle?.getPropertyValue('height')
+img?.style.setProperty('display', oldDisplayValue, oldDisplayPriority);
+assert(heightValue === 'auto')
+```
+
+`#image` الخاص بك يجب أن يتمركز داخل العنصر الاب.
+
+```js
+// taken from the testable-projects repo
+const img = document.getElementById('image'),
+  imgParent = img?.parentElement,
+  imgLeft = img?.getBoundingClientRect().left,
+  imgRight = img?.getBoundingClientRect().right,
+  parentLeft = imgParent?.getBoundingClientRect().left,
+  parentRight = imgParent?.getBoundingClientRect().right,
+  leftMargin = imgLeft - parentLeft,
+  rightMargin = parentRight - imgRight;
+assert(leftMargin - rightMargin < 6 && rightMargin - leftMargin < 6)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+```
+
+```css
+
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Pacifico"
+      rel="stylesheet"
+
+    />
+    <link
+      href="https://fonts.googleapis.com/css?family=Lobster"
+      rel="stylesheet"
+
+    />
+    <link href="styles.css" rel="stylesheet" />
+    <title>Tribute Page</title>
+  </head>
+  <body>
+    <h1>Tribute Page</h1>
+    <p>The below card was designed as a tribute page for freeCodeCamp.</p>
+    <main id="main">
+      <div id="img-div">
+        <img
+          id="image"
+          class="border"
+          src="https://upload.wikimedia.org/wikipedia/en/5/53/Pok%C3%A9mon_Togepi_art.png"
+          alt="An image of Togepi"
+        />
+        <figcaption id="img-caption">Togepi, happy as always.</figcaption>
+      </div>
+      <h2 id="title">Togepi</h2>
+      <hr />
+      <div id="tribute-info">
+        <p>
+          Togepi was first discovered in the Johto region, when Ash Ketchum
+          discovered a mysterious egg. However, when the egg hatched, Togepi saw
+          Ash's friend Misty first and imprinted on her. Like many other
+          creatures, this imprinting process created a bond and Togepi views
+          Misty as his mother.
+        </p>
+        <p>
+          Togepi is a very childlike Pokemon, and is very emotionally
+          expressive. He demonstrates extreme levels of joy and sadness.
+        </p>
+        <hr />
+        <p><u>Battle Information</u></p>
+        <ul style="list-style-type: none">
+          <li>Type: Fairy</li>
+          <li>Evolutions: Togepi -> Togetic -> Togekiss</li>
+          <li>Moves: Growl, Pound, Sweet Kiss, Charm</li>
+          <li>Weaknesses: Poison, Steel</li>
+          <li>Resistances: Dragon</li>
+        </ul>
+        <p>
+          Check out this
+          <a
+            id="tribute-link"
+            href="https://bulbapedia.bulbagarden.net/wiki/Togepi_(Pok%C3%A9mon)"
+            target="_blank"
+            rel="noopener noreferrer"
+            >Bulbapedia article on Togepi</a
+          >
+          for more information on this great Pokemon.
+        </p>
+      </div>
+    </main>
+  </body>
+  <footer>
+    <a href="../">Return to Project List</a> |
+    <a href="https://www.nhcarrigan.com">Return to HomePage</a>
+  </footer>
+</html>
+```
+
+```css
+body {
+  background-color: #3a3240;
+  color: white;
+}
+main {
+  background-color: #92869c;
+  font-family: Lobster;
+  max-width: 500px;
+  margin: 20px auto;
+  color: black;
+  border-radius: 50px;
+  box-shadow: 10px 10px rgba(0, 0, 0, 0.5);
+}
+h2 {
+  text-align: center;
+  font-size: 20pt;
+  font-family: Pacifico;
+}
+body {
+  text-align: center;
+  font-size: 12pt;
+}
+footer {
+  text-align: center;
+  font-size: 10pt;
+}
+.border {
+  border-color: black;
+  border-width: 5px;
+  border-style: solid;
+}
+#image {
+  height: auto;
+  display: block;
+  margin: auto;
+  max-width: 100%;
+  border-radius: 50%;
+}
+#img-caption {
+  font-size: 10pt;
+}
+a:not(#tribute-link) {
+  color: white;
+}
+hr {
+  border-color: black;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md
new file mode 100644
index 00000000000..9e450b924b7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613297a923965e0703b64796.md
@@ -0,0 +1,56 @@
+---
+id: 613297a923965e0703b64796
+title: الخطوة الثانية
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+قد تكون على دراية بالفعل بعنصر `meta`؛ يستخدم لتحديد معلومات حول الصفحة، مثل العنوان، الوصف، الكلمات المفتاحية، والمؤلف.
+
+امنح صفحتك عنصر `meta` بقيمة `charset` مناسبة.
+
+السمة `charset` تحدد ترميز الأحرف للصفحة، وفي هذه الأيام، `UTF-8` هي الترميز الوحيد المدعوم من معظم المتصفحات.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `meta` داخل عنصر `head`.
+
+```js
+assert.exists(document.querySelector('head > meta'));
+```
+
+يجب عليك إعطاء وسم `meta` سمة `charset` بقيمة `UTF-8`.
+
+```js
+assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md
new file mode 100644
index 00000000000..8733579a2d4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329b210dac0b08047fd6ab.md
@@ -0,0 +1,61 @@
+---
+id: 61329b210dac0b08047fd6ab
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+بالمتابعة مع عناصر `meta`، يخبر تعريف `viewport` المتصفح كيفية عرض الصفحة. بما في ذلك تحسين الوصول البصري (visual accessibility) على المحمول، وتحسين _SEO_ كفاءه محرك البحث (seach engine optimization).
+
+قم بإضافة تعريف `viewport` مع سمة `content` مع تفاصيل `width` و `initial-scale` للصفحة.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `meta` أخر داخل عنصر `head`.
+
+```js
+assert.equal(document.querySelectorAll('head > meta')?.length, 2);
+```
+
+يجب أن تعطي `meta` سمة `name` بقيمة `viewport`.
+
+```js
+assert.equal(document.querySelectorAll('head > meta[name="viewport"]')?.length, 1);
+```
+
+يجب أن تعطي `meta` سمة `content` بقيمة `width=device-width, initial-scale=1`.
+
+```js
+assert.equal(document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1.0"]')?.length || document.querySelectorAll('head > meta[content="width=device-width, initial-scale=1"]')?.length, 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md
new file mode 100644
index 00000000000..bc1dda43d5b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61329d52e5010e08d9b9d66b.md
@@ -0,0 +1,68 @@
+---
+id: 61329d52e5010e08d9b9d66b
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+عنصر `meta` آخر مهم للوصول و SEO هو `description`. يتم استخدام قيمة السمة `content` من قبل محركات البحث لتقديم وصف لصفحتك.
+
+قم بإضافة عنصر `meta` مع تعيين السمة `name` إلى `description`، وقم بإعطائه سمة `content` مفيدة.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `meta` جديد داخل عنصر `head`.
+
+```js
+assert.equal(document.querySelectorAll('meta').length, 3);
+```
+
+يجب أن تعطي `meta` سمة `name` بقيمة `description`.
+
+```js
+assert.exists(document.querySelector('meta[name="description"]'));
+```
+
+يجب عليك إعطاء `meta` سمة `content`.
+
+```js
+assert.notEmpty(document.querySelector('meta[name="description"]')?.content);
+```
+
+قيمة السمة `content` يجب ألا تكون أكثر من 165 حرفاً. _هذا هو الحد الأقصى لطول الوصف في جوجل_
+
+```js
+assert.isAtMost(document.querySelector('meta[name="description"]')?.content?.length, 165);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md
new file mode 100644
index 00000000000..6c0554d882d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133acc353338c0bba9cb553.md
@@ -0,0 +1,63 @@
+---
+id: 6133acc353338c0bba9cb553
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+أخيرا في `head`، عنصر `title` مفيد لقراء الشاشة (screen readers) لفهم محتوى الصفحة. علاوة على ذلك، فهو جزء هام من _SEO_.
+
+أعطِ صفحتك `title` وصفياً وموجزاً.
+
+# --hints--
+
+يجب عليك إضافة عنصر `title` إلى `head`.
+
+```js
+assert.exists(document.querySelector('head > title'));
+```
+
+يجب ألا تجعل `title` أطول من 60 حرفاً.
+
+```js
+assert.isAtMost(document.querySelector('head > title')?.textContent?.length, 60);
+```
+
+حاول أن تكون أكثر وصفاً مع عنصر `title` الخاص بك. _تلميح: 15 حرف على الأقل_
+
+```js
+assert.isAtLeast(document.querySelector('head > title')?.textContent?.length, 15);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md
new file mode 100644
index 00000000000..142626b527b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6133d11ef548f51f876149e3.md
@@ -0,0 +1,68 @@
+---
+id: 6133d11ef548f51f876149e3
+title: الخطوة ٦
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+التنقل (Navigation) هو جزء أساسي من إمكانية الوصول (accessibility)، ويعتمد قارئ الشاشة (screen readers) عليك لتوفير بنية الصفحة الخاصة بك. ويتم ذلك باستخدام عناصر semantic HTML.
+
+أضف `header` و `main` إلى صفحتك.
+
+سيتم استخدام عنصر `header` لتقديم الصفحة، بالإضافة إلى توفير قائمة التنقل (navigation menu).
+
+عنصر `main` سوف يحتوي على المحتوى الأساسي لصفحتك.
+
+# --hints--
+
+يجب عليك إضافة عنصر `header` إلى `body`.
+
+```js
+assert.exists(document.querySelector('body > header'));
+```
+
+يجب عليك إضافة عنصر `main` إلى `body`.
+
+```js
+assert.exists(document.querySelector('body > main'));
+```
+
+يجب أن يأتي عنصر `header` قبل عنصر `main`.
+
+```js
+assert.exists(document.querySelector('header + main'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md
new file mode 100644
index 00000000000..96149bec672
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e2546d0594208229ada50.md
@@ -0,0 +1,93 @@
+---
+id: 613e2546d0594208229ada50
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+داخل `header`، قدّم سياق حول الصفحة بواسطة أدخال عنصر `img`, و `h1`, و `nav` واحد.
+
+ينبغي أن يشير `img` إلى `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`، ويحتوي على `id` بقيمة `logo`.
+
+يجب أن يحتوي `h1` على النص `HTML/CSS Quiz`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `img` إلى عنصر `header`.
+
+```js
+assert.exists(document.querySelector('header > img'));
+```
+
+يجب عليك إضافة عنصر `h1` إلى عنصر `header`.
+
+```js
+assert.exists(document.querySelector('header > h1'));
+```
+
+يجب عليك إضافة عنصر `nav` إلى عنصر `header`.
+
+```js
+assert.exists(document.querySelector('header > nav'));
+```
+
+يجب عليك وضع عناصر `img`, و `h1`, و `nav` بهذا الترتيب.
+
+```js
+assert.exists(document.querySelector('img + h1 + nav'));
+```
+
+يجب أن تعطي عنصر `img` سمة `src` بقيمة `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
+
+```js
+assert.equal(document.querySelector('img')?.src, 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
+```
+
+يجب أن تعطي عنصر `img` سمة `id` بقيمة `logo`.
+
+```js
+assert.equal(document.querySelector('img')?.id, 'logo');
+```
+
+يجب عليك إعطاء عنصر `h1` النص `HTML/CSS Quiz`.
+
+```js
+assert.include(document.querySelector('h1')?.innerText?.toLowerCase(), 'html/css quiz');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+--fcc-editable-region--
+    <header>
+
+    </header>
+--fcc-editable-region--
+    <main></main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md
new file mode 100644
index 00000000000..e619ec59bef
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/613e275749ebd008e74bb62e.md
@@ -0,0 +1,66 @@
+---
+id: 613e275749ebd008e74bb62e
+title: الخطوة ٨
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+تعني الخاصية _SVG_ المفيدة (رُسُوم متجهة قابلة للتطوير scalable vector graphics)، هي أنها تحتوي على سمة `path` التي تسمح بتغيير حجم الصورة دون التأثير على دقة الصورة الناتجة من التغيير.
+
+حاليًا، تأخذ `img` حجمها الافتراضي, وهو كبير جدًا. بشكل صحيح، غيّر حجم الصورة باستخدام `id` كمنتقى، وعيّن `width` ألى `max(100px, 18vw)`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `#logo` لاستهداف عنصر `img`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('#logo'));
+```
+
+يجب عليك إعطاء `img` خاصية `width` بقيمة `max(100px, 18vw)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav></nav>
+    </header>
+    <main></main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md
new file mode 100644
index 00000000000..1756bf4e399
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140827cff96e906bd38fc2b.md
@@ -0,0 +1,93 @@
+---
+id: 6140827cff96e906bd38fc2b
+title: الخطوة ٩
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+كما هو موضح في <a href="https://design-style-guide.freecodecamp.org/" target="_blank" rel="noopener noreferrer nofollow">freeCodeCamp Style Guide</a>، يجب أن يحتفظ الشعار بنسبة عرض تبلغ `35 / 4`، وأن يحتوي على padding حول النص.
+
+أولاً، قم بتغيير `background-color` إلى `#0a0a23` حتى تتمكن من رؤية الشعار. ثم استخدم خاصية `aspect-ratio` لتعيين نسبة العرض المطلوبة إلى `35 / 4`. أخيراً، أضف `padding` بقيمة `0.4rem` في جميع الاتجاهات.
+
+# --hints--
+
+يجب عليك إعطاء `#logo` الـ `background-color` بقيمة `#0a0a23`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.backgroundColor, 'rgb(10, 10, 35)');
+```
+
+يجب عليك استخدام خاصية `aspect-ratio`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio);
+```
+
+لا يجب عليك استخدام خاصية `height`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('#logo')?.height);
+```
+
+لا يجب عليك تغيير خاصية `width`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.width, 'max(100px, 18vw)');
+```
+
+يجب عليك إعطاء `img` الـ `aspect-ratio` بقيمة `35 / 4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.aspectRatio, '35 / 4');
+```
+
+يجب عليك إعطاء `img` الـ `padding` بقيمة `0.4rem`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('#logo')?.padding, '0.4rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav></nav>
+    </header>
+    <main></main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+--fcc-editable-region--
+#logo {
+  width: max(100px, 18vw);
+
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md
new file mode 100644
index 00000000000..5b70a2fc6ef
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6140883f74224508174794c0.md
@@ -0,0 +1,89 @@
+---
+id: 6140883f74224508174794c0
+title: الخطوة ١٠
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+اجعل `header` يأخذ العرض الكامل للحاوية الأصلية (parent container)، وتعيين `height` إلى `50px`، وتعيين `background-color` إلى `#1b1b32`. ثم عيّن `display` لاستخدام _Flexbox_.
+
+# --hints--
+
+يجب عليك استخدام منتقي `header`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('header'));
+```
+
+يجب عليك إعطاء `header` خاصية `width` بقيمة `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.width, '100%');
+```
+
+يجب عليك إعطاء `header` خاصية `height` بقيمة `50px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.height, '50px');
+```
+
+يجب عليك إعطاء `header` خاصية `background-color` بقيمة `#1b1b32`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.backgroundColor, 'rgb(27, 27, 50)');
+```
+
+يجب عليك إعطاء `header` خاصية `display` بقيمة `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.display, 'flex');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav></nav>
+    </header>
+    <main></main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md
new file mode 100644
index 00000000000..12e71fb4efb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408e4ae3e35d08feb260eb.md
@@ -0,0 +1,83 @@
+---
+id: 61408e4ae3e35d08feb260eb
+title: الخطوة ١١
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+قم بتغيير لون خط `h1` إلى `#f1be32`، وتعيين حجم الخط (font size) إلى `min(5vw, 1.2em)`.
+
+# --hints--
+
+يجب عليك استخدام منتقي العناصر `h1`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+يجب عليك إعطاء `h1` الـ `color` بقيمة `#f1be32`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.color, 'rgb(241, 190, 50)');
+```
+
+يجب عليك إعطاء `h1` الـ `font-size` بقيمة `min(5vw, 1.2em)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.fontSize, 'min(5vw, 1.2em)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav></nav>
+    </header>
+    <main></main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md
new file mode 100644
index 00000000000..874a5ba78ef
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61408f155e798909b6908712.md
@@ -0,0 +1,112 @@
+---
+id: 61408f155e798909b6908712
+title: الخطوة ١٢
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+لتمكين التنقل على الصفحة، أضف unordered list مع عناصر القائمة (list items) الثلاثة التالية:
+
+- `INFO`
+- `HTML`
+- `CSS`
+
+يجب تغليف نص عناصر القائمة (list items text) في anchor tags.
+
+# --hints--
+
+يجب عليك أن تدمج عنصر `ul` داخل `nav`.
+
+```js
+assert.equal(document.querySelectorAll('nav > ul')?.length, 1);
+```
+
+يجب عليك دمج ثلاثة عناصر `li` داخل عنصر `ul`.
+
+```js
+assert.equal(document.querySelectorAll('nav > ul > li')?.length, 3);
+```
+
+يجب أن تدمج عنصر واحد `a` داخل كل عنصر `li`.
+
+```js
+assert.equal(document.querySelectorAll('nav > ul > li > a')?.length, 3);
+```
+
+يجب أن تعطي العنصر `a` الأول النص `INFO`.
+
+```js
+assert.equal(document.querySelectorAll('nav > ul > li > a')?.[0]?.textContent, 'INFO');
+```
+
+يجب عليك إعطاء ثاني عنصر `a` النص `HTML`.
+
+```js
+assert.equal(document.querySelectorAll('nav > ul > li > a')?.[1]?.textContent, 'HTML');
+```
+
+يجب أن تعطي العنصر `a` الثالث النص `CSS`.
+
+```js
+assert.equal(document.querySelectorAll('nav > ul > li > a')?.[2]?.textContent, 'CSS');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+--fcc-editable-region--
+      <nav>
+
+      </nav>
+--fcc-editable-region--
+    </header>
+    <main></main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md
new file mode 100644
index 00000000000..73854a5a328
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614090d5a22b6f0a5a6b464c.md
@@ -0,0 +1,102 @@
+---
+id: 614090d5a22b6f0a5a6b464c
+title: الخطوة ١٣
+challengeType: 0
+dashedName: step-13
+---
+
+<!-- TODO: I purposefully added the `nav` styles without Camper input -->
+
+# --description--
+
+استهدف عناصر الـ unordered list داخل عناصر `nav`، واستخدم _Flexbox_ لتوزيع المسافات بين الأطفال بشكل متساوٍ.
+
+# --hints--
+
+يجب عليك استخدام منتقي `nav > ul`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('nav > ul'));
+```
+
+يجب عليك إعطاء عناصر `nav > ul` الـ `display` بقيمة `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.display, 'flex');
+```
+
+يجب عليك إعطاء عناصر `nav > ul` الـ `justify-content` بقيمة `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a>INFO</a></li>
+          <li><a>HTML</a></li>
+          <li><a>CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main></main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md
new file mode 100644
index 00000000000..dc9d279f93a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fabd6f75610664e908fd.md
@@ -0,0 +1,125 @@
+---
+id: 6141fabd6f75610664e908fd
+title: الخطوة ١٤
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+بما أن هذا اختبار، ستحتاج إلى نموذج (form) للمستخدمين لتقديم إجابات. يمكنك فصل المحتوى بشكل لغوي (semantically) داخل النموذج (form) باستخدام عناصر `section`.
+
+ضمن عنصر `main`، أنشئ نموذج (form) مع ثلاث عناصر `section` متداخلة. بعد ذلك، قم بإرسال النموذج (submit form) إلى `https://freecodecamp.org/practice-project/accessibility-quiz`، باستخدام الطريقة الصحيحة.
+
+# --hints--
+
+يجب عليك تضمين عنصر `form` داخل عنصر `main`.
+
+```js
+assert.exists(document.querySelector('main > form'));
+```
+
+يجب عليك تضمين ثلاثة عناصر `section` ضمن عنصر `form` الخاص بك.
+
+```js
+assert.equal(document.querySelectorAll('main > form > section')?.length, 3);
+```
+
+يجب أن تعطي عنصر `form` سمة `action`.
+
+```js
+assert.notEmpty(document.querySelector('main > form')?.action);
+```
+
+يجب أن تعطي سمة `action` قيمة `https://freecodecamp.org/practice-project/accessibility-quiz`.
+
+```js
+assert.equal(document.querySelector('main > form')?.action, 'https://freecodecamp.org/practice-project/accessibility-quiz');
+```
+
+يجب أن تعطي عنصر `form` سمة `method`.
+
+```js
+assert.notEmpty(document.querySelector('main > form')?.method);
+```
+
+يجب أن تعطي عنصر `form` سمة `method` بقيمة `post`.
+
+```js
+assert.equal(document.querySelector('main > form')?.method?.toLowerCase(), 'post');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a>INFO</a></li>
+          <li><a>HTML</a></li>
+          <li><a>CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+--fcc-editable-region--
+    <main>
+
+    </main>
+--fcc-editable-region--
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md
new file mode 100644
index 00000000000..8934c556675
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6141fed65b61320743da5894.md
@@ -0,0 +1,111 @@
+---
+id: 6141fed65b61320743da5894
+title: خطوة ١٥
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+لزيادة إمكانية الوصول إلى الصفحة، يمكن استخدام سمة `role` للإشارة إلى الغرض وراء عنصر في الصفحة للتكنولوجيات المساعدة. سمة `role` هي جزء من _Web Accessibility Initiative_ او (WAI)، وتقبل قيم الإعداد المسبق.
+
+اعطي كل عنصر من عناصر `section` الـ role بقيمة `region`.
+
+# --hints--
+
+يجب ان تعطي عنصر `section` الاول role بقيمة `region`.
+
+```js
+assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('role'), 'region');
+```
+
+يجب ان تعطي عنصر `section` الثاني role بقيمة `region`.
+
+```js
+assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('role'), 'region');
+```
+
+يجب ان تعطي عنصر `section` الثالث role بقيمة `region`.
+
+```js
+assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('role'), 'region');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a>INFO</a></li>
+          <li><a>HTML</a></li>
+          <li><a>CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+--fcc-editable-region--
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section></section>
+        <section></section>
+        <section></section>
+      </form>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md
new file mode 100644
index 00000000000..5d973a8a5a9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614202874ca576084fca625f.md
@@ -0,0 +1,171 @@
+---
+id: 614202874ca576084fca625f
+title: الخطوة ١٦
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+يتطلب كل role من `region` تسمية مرئية، والتي يجب الإشارة إليها بواسطة السمة `aria-labelledby`.
+
+إلى عناصر `section` ، أعطي سمات `aria-labelledby` التالية:
+
+- `student-info`
+- `html-questions`
+- `css-questions`
+
+ثم ، داخل كل عنصر `section` ادمج عنصر واحد `h2` مع `id` يطابق السمة `aria-labelledby` المقابلة. قم بإعطاء كل `h2` محتوى نصي مناسب.
+
+# --hints--
+
+يجب أن تعطي عنصر `section` الأول سمة `aria-labelledby` بقيمة `student-info`.
+
+```js
+assert.equal(document.querySelectorAll('section')?.[0]?.getAttribute('aria-labelledby'), 'student-info');
+```
+
+يجب أن تعطي عنصر `section` سمة `aria-labelledby` بقيمة `html-questions`.
+
+```js
+assert.equal(document.querySelectorAll('section')?.[1]?.getAttribute('aria-labelledby'), 'html-questions');
+```
+
+يجب عليك إعطاء ثالث عنصر `section` سمة `aria-labelledby` بقيمة `css-questions`.
+
+```js
+assert.equal(document.querySelectorAll('section')?.[2]?.getAttribute('aria-labelledby'), 'css-questions');
+```
+
+يجب عليك دمج عنصر `h2` واحد داخل اول عنصر `section`.
+
+```js
+assert.equal(document.querySelectorAll('section')?.[0]?.querySelectorAll('h2')?.length, 1);
+```
+
+يجب عليك دمج عنصر `h2` واحد داخل ثاني عنصر `section`.
+
+```js
+assert.equal(document.querySelectorAll('section')?.[1]?.querySelectorAll('h2')?.length, 1);
+```
+
+يجب عليك دمج عنصر `h2` واحد داخل ثالث عنصر `section`.
+
+```js
+assert.equal(document.querySelectorAll('section')?.[2]?.querySelectorAll('h2')?.length, 1);
+```
+
+يجب أن تعطي عنصر `h2` سمة `id` بقيمة `student-info`.
+
+```js
+assert.equal(document.querySelectorAll('h2')?.[0]?.id, 'student-info');
+```
+
+يجب عليك إعطاء ثاني عنصر `h2`الـ `id` بقيمة `html-questions`.
+
+```js
+assert.equal(document.querySelectorAll('h2')?.[1]?.id, 'html-questions');
+```
+
+يجب عليك إعطاء ثالث عنصر `h2` الـ `id` بقيمة `css-questions`.
+
+```js
+assert.equal(document.querySelectorAll('h2')?.[2]?.id, 'css-questions');
+```
+
+يجب عليك إعطاء أول عنصر `h2` محتوى نصي مناسب. _تلميح: كنت ساختار `Student Info`_
+
+```js
+assert.isAtLeast(document.querySelectorAll('h2')?.[0]?.textContent?.length, 1);
+```
+
+يجب عليك إعطاء ثاتي عنصر `h2` محتوى نصي مناسب. _تلميح: كنت ساختار `HTML`_
+
+```js
+assert.isAtLeast(document.querySelectorAll('h2')?.[1]?.textContent?.length, 1);
+```
+
+يجب عليك إعطاء ثالث عنصر `h2` محتوى نصي مناسب. _تلميح: كنت ساختار `CSS`_
+
+```js
+assert.isAtLeast(document.querySelectorAll('h2')?.[2]?.textContent?.length, 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a>INFO</a></li>
+          <li><a>HTML</a></li>
+          <li><a>CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+--fcc-editable-region--
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region"></section>
+        <section role="region"></section>
+        <section role="region"></section>
+      </form>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md
new file mode 100644
index 00000000000..386b4dd83d1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614206033d366c090ca7dd42.md
@@ -0,0 +1,140 @@
+---
+id: 614206033d366c090ca7dd42
+title: الخطوة ١٧
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+يؤدي Typeface دورا هاما في إمكانية الوصول إلى الصفحة. بعض الخطوط أسهل من غيرها، وهذا صحيح بشكل خاص على الشاشات ذات الدقة المنخفضة (low-resolution).
+
+قم بتغيير الخط لعناصر `h1` و `h2` إلى `Verdana`، واستخدم خط ويب آمنًا آخر في مجموعة sans-serif كخط احتياطي.
+
+بالإضافة إلى ذلك، أضف `border-bottom` بقيمة `4px solid #dfdfe2` إلى عناصر `h2` لجعل الأقسام (sections) متميزة.
+
+# --hints--
+
+يجب عليك استخدام منتقي عناصر متعدد (multiple element selector) لاستهداف عناصر `h1` و `h2`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert.exists(gs('h1, h2') || gs('h2, h1'));
+```
+
+يجب عليك تعيين القيمة الأولى لخاصية `font-family` إلى `Verdana`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+const style = gs('h1, h2') || gs('h2, h1');
+assert.include(style?.fontFamily, 'Verdana');
+```
+
+يجب عليك تعيين القيمة الثانية لخاصية `font-family` إلى خط sans-serif آخر آمن للويب. _تلميح: سأختار Tahoma_.
+
+```js
+// Acceptable fonts: Arial, sans-serif, Helvetica, Tahoma, Trebuchet MS.
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+const style = gs('h1, h2') || gs('h2, h1');
+assert.match(style?.fontFamily, /(Tahoma)|(Arial)|(sans-serif)|(Helvetica)|(Trebuchet MS)/);
+```
+
+يجب عليك استخدام منتقي `h2` لاستهداف عناصر `h2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('h2'));
+```
+
+يجب أن تعطي `h2` خاصية `border-bottom` بقيمة `4px solid #dfdfe2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.borderBottom, '4px solid rgb(223, 223, 226)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a>INFO</a></li>
+          <li><a>HTML</a></li>
+          <li><a>CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md
new file mode 100644
index 00000000000..ef109b3ec5f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61435e3c0679a306c20f1acc.md
@@ -0,0 +1,125 @@
+---
+id: 61435e3c0679a306c20f1acc
+title: الخطوة ١٨
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+لتكون قادر على التنقل داخل الصفحة، قم بإعطاء كل عنصر رابط `href` مطابقه من `id` في عناصر `h2`.
+
+# --hints--
+
+يجب عليك إعطاء أول عنصر `a` سمة `href` بقيمة `#student-info`.
+
+```js
+assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('href'), '#student-info');
+```
+
+يجب عليك إعطاء ثاني عنصر `a` سمة `href` بقيمة `#html-questions`.
+
+```js
+assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('href'), '#html-questions');
+```
+
+يجب عليك إعطاء ثالث عنصر `a` سمة `href` بقيمة `#css-questions`.
+
+```js
+assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('href'), '#css-questions');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+--fcc-editable-region--
+        <ul>
+          <li><a>INFO</a></li>
+          <li><a>HTML</a></li>
+          <li><a>CSS</a></li>
+        </ul>
+--fcc-editable-region--
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md
new file mode 100644
index 00000000000..3fc12168741
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143610161323a081b249c19.md
@@ -0,0 +1,173 @@
+---
+id: 6143610161323a081b249c19
+title: الخطوة ١٩
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+خلال ملء محتوى الاختبار القصير، أسفل `#student-info`، أضف ثلاث عناصر `div` مع `class` بقيمة `info`.
+
+ثم داخل كل عنصر `div` قم بدمج عنصر `label` واحد وعنصر `input` واحد.
+
+# --hints--
+
+يجب عليك دمج ثلاثة عناصر `div` تحت عنصر `h2#student-info`.
+
+```js
+assert.equal(document.querySelectorAll('h2#student-info ~ div')?.length, 3);
+```
+
+يجب عليك إعطاء أول عنصر `div` سمة `class` بقيمة `info`.
+
+```js
+assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.className, 'info');
+```
+
+يجب عليك إعطاء ثاني عنصر `div` سمة `class` بقيمة `info`.
+
+```js
+assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.className, 'info');
+```
+
+يجب عليك إعطاء ثالث عنصر `div` سمة `class` بقيمة `info`.
+
+```js
+assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.className, 'info');
+```
+
+يجب عليك دمج عنصر `label` واحد داخل أول عنصر `div`.
+
+```js
+assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('label')?.length, 1);
+```
+
+يجب عليك دمج عنصر `input` واحد داخل أول عنصر `div` بعد `label`.
+
+```js
+assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelectorAll('input')?.length, 1);
+assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[0]?.querySelector('label + input'));
+```
+
+يجب عليك دمج عنصر `label` واحد داخل ثاني عنصر `div`.
+
+```js
+assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('label')?.length, 1);
+```
+
+يجب عليك دمج عنصر `input` واحد داخل ثاني عنصر `div` بعد `label`.
+
+```js
+assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelectorAll('input')?.length, 1);
+assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[1]?.querySelector('label + input'));
+```
+
+يجب عليك دمج عنصر `label` واحد داخل ثالث عنصر `div`.
+
+```js
+assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('label')?.length, 1);
+```
+
+يجب عليك دمج عنصر `input` واحد داخل ثالث عنصر `div` بعد `label`.
+
+```js
+assert.equal(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelectorAll('input')?.length, 1);
+assert.exists(document.querySelectorAll('h2#student-info ~ div')?.[2]?.querySelector('label + input'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+--fcc-editable-region--
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+
+        </section>
+--fcc-editable-region--
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md
new file mode 100644
index 00000000000..7c7811ac594
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143639d5eddc7094161648c.md
@@ -0,0 +1,195 @@
+---
+id: 6143639d5eddc7094161648c
+title: الخطوة ٢٠
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+من المهم ربط كل `input` إلى عنصر `label` المقابل له. وهذا يوفر لمستخدمي التكنولوجيا المساعِدة مرجعا مرئيا للمدخل.
+
+يتم ذلك من خلال إعطاء الـ `label` السمة `for`، والتي تحتوي على `id` بقيمة الـ `input`.
+
+سيأخذ هذا القسم اسم الطالب، وعنوان البريد الإلكتروني، وتاريخ الميلاد. قم بإعطاء عناصر الـ `label` سمات `for` مناسبة، وكذلك محتوى النص. ثم قم بربط عناصر `input` إلى عناصر الـ `label` المقابلة لها.
+
+# --hints--
+
+يجب أن تعطي أول `label` سمة `for` مناسبة.
+
+```js
+assert.isAtLeast(document.querySelectorAll('label')?.[0]?.htmlFor?.length, 1);
+```
+
+يجب أن تعطي ثاني `label` سمة `for` مناسبة.
+
+```js
+assert.isAtLeast(document.querySelectorAll('label')?.[1]?.htmlFor?.length, 1);
+```
+
+يجب أن تعطي ثالث `label` سمة `for` مناسبة.
+
+```js
+assert.isAtLeast(document.querySelectorAll('label')?.[2]?.htmlFor?.length, 1);
+```
+
+يجب عليك إعطاء أول عنصر `label` محتوى نصي مناسب.
+
+```js
+assert.isAtLeast(document.querySelectorAll('label')?.[0]?.textContent?.length, 1);
+```
+
+يجب عليك إعطاء ثاتي عنصر `label` محتوى نصي مناسب.
+
+```js
+assert.isAtLeast(document.querySelectorAll('label')?.[1]?.textContent?.length, 1);
+```
+
+يجب عليك إعطاء ثالث عنصر `label` محتوى نصي مناسب.
+
+```js
+assert.isAtLeast(document.querySelectorAll('label')?.[2]?.textContent?.length, 1);
+```
+
+يجب أن تعطي عنصر `input` الاول، السمة `id` التي تطابق سمة `for` للـ `label` الاول.
+
+```js
+assert.equal(document.querySelectorAll('input')?.[0]?.id, document.querySelectorAll('label')?.[0]?.htmlFor);
+```
+
+يجب أن تعطي عنصر `input` الثاني، السمة `id` التي تطابق سمة `for` للـ `label` الثاني.
+
+```js
+assert.equal(document.querySelectorAll('input')?.[1]?.id, document.querySelectorAll('label')?.[1]?.htmlFor);
+```
+
+يجب أن تعطي عنصر `input` الثالث، السمة `id` التي تطابق سمة `for` للـ `label` الثالث.
+
+```js
+assert.equal(document.querySelectorAll('input')?.[2]?.id, document.querySelectorAll('label')?.[2]?.htmlFor);
+```
+
+يجب ألا تستخدم نفس سمة الـ `id` لأكثر من عنصر `input`.
+
+```js
+const id = (n) => document.querySelectorAll('input')?.[n]?.id;
+assert.notEqual(id(0), id(1));
+assert.notEqual(id(0), id(2));
+assert.notEqual(id(1), id(2));
+```
+
+يجب ألا تستخدم نفس سمة الـ `for` لأكثر من عنصر `label`.
+
+```js
+const htmlFor = (n) => document.querySelectorAll('label')?.[n]?.htmlFor;
+assert.notEqual(htmlFor(0), htmlFor(1));
+assert.notEqual(htmlFor(0), htmlFor(2));
+assert.notEqual(htmlFor(1), htmlFor(2));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+--fcc-editable-region--
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label></label>
+            <input />
+          </div>
+          <div class="info">
+            <label></label>
+            <input />
+          </div>
+          <div class="info">
+            <label></label>
+            <input />
+          </div>
+        </section>
+--fcc-editable-region--
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md
new file mode 100644
index 00000000000..479da772cbf
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143908b6aafb00a659ca189.md
@@ -0,0 +1,161 @@
+---
+id: 6143908b6aafb00a659ca189
+title: الخطوة ٢١
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+قم بمراعاة أفضل الممارسات لمدخلات النموذج (form inputs)، قم بإعطاء كل `input` سمة الـ `type` و `name` المناسبين. ثم أعطي أول `input` السمة `placeholder`.
+
+# --hints--
+
+يجب عليك إعطاء أول عنصر `input`الـ `type` بقيمة `text`.
+
+```js
+assert.equal(document.querySelectorAll('input')?.[0]?.type, 'text');
+```
+
+يجب عليك إعطاء ثاني عنصر `input`الـ `type` بقيمة `email`.
+
+```js
+assert.equal(document.querySelectorAll('input')?.[1]?.type, 'email');
+```
+
+يجب عليك إعطاء ثالث عنصر `input`الـ `type` بقيمة `date`.
+
+```js
+assert.equal(document.querySelectorAll('input')?.[2]?.type, 'date');
+```
+
+يجب أن تعطي أول `input` سمة `name` مناسبة.
+
+```js
+assert.isAtLeast(document.querySelectorAll('input')?.[0]?.name?.length, 1);
+```
+
+يجب أن تعطي ثاني `input` سمة `name` مناسبة.
+
+```js
+assert.isAtLeast(document.querySelectorAll('input')?.[1]?.name?.length, 1);
+```
+
+يجب أن تعطي ثالث `input` سمة `name` مناسبة.
+
+```js
+assert.isAtLeast(document.querySelectorAll('input')?.[2]?.name?.length, 1);
+```
+
+ثم أعطي أول `input` السمة `placeholder`.
+
+```js
+assert.notEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+--fcc-editable-region--
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.:</label>
+            <input id="birth-date" />
+          </div>
+        </section>
+--fcc-editable-region--
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md
new file mode 100644
index 00000000000..660e00ac218
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143920c8eafb00b735746ce.md
@@ -0,0 +1,127 @@
+---
+id: 6143920c8eafb00b735746ce
+title: الخطوة ٢٢
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+مع أنّ أنك أضفت `placeholder` إلى العنصر `input` الأول في الدرس السابق، هذه الممارسة ليست في الواقع أفضل ممارسة لتيسير الوصول؛ في كثير من الأحيان، يخلط المستخدمون بين النص النائب (placeholder text) وقيمة الإدخال الفعلية - و يعتقدون أن هناك قيمة فعلًا في حقل الإدخال.
+
+أزل placeholder text من عنصر `input` الأول، معتمدا على `label` باعتبارها أفضل الممارسات.
+
+# --hints--
+
+يجب عليك إزالة السمة `placeholder` من عنصر `input`.
+
+```js
+assert.isEmpty(document.querySelectorAll('input')?.[0]?.placeholder);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+--fcc-editable-region--
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" placeholder="e.g. Quincy Larson" />
+          </div>
+--fcc-editable-region--
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.:</label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md
new file mode 100644
index 00000000000..b35e4d4bbf8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143931a113bb80c45546287.md
@@ -0,0 +1,139 @@
+---
+id: 6143931a113bb80c45546287
+title: الخطوة ٢٣
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+يمكن القول بأن `D.O.B.` ليس وصفيا بما فيه الكفاية. وينطبق هذا بصفة خاصة على المستخدمين ذوي الإعاقة البصرية. إحدى الطرق لمعالجة هذه المسألة، دون الحاجة إلى إضافة نص مرئي إلى label، هو إضافة نص فقط يمكن قراءة فقط من قارئ الشاشة.
+
+ألحق عنصر `span` مع class بقيمة `sr-only` ألى محتوى النص الحالي لعنصر `label` الثالث.
+
+# --hints--
+
+يجب عليك إضافة عنصر `span` ضمن عنصر `label` الثالث.
+
+```js
+assert.exists(document.querySelector('.info:nth-of-type(3) > label > span'));
+```
+
+يجب أن تعطي العنصر `span` سمة class بقيمة `sr-only`.
+
+```js
+assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.className, 'sr-only');
+```
+
+يجب عليك وضع `span` بعد محتوى النص `D.O.B.`.
+
+```js
+assert.match(document.querySelector('.info:nth-of-type(3) > label')?.innerHTML, /D\.O\.B\.<span/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+--fcc-editable-region--
+          <div class="info">
+            <label for="birth-date">D.O.B.</label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+--fcc-editable-region--
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md
new file mode 100644
index 00000000000..8ae3e5c361b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614394fb41985e0d2012a93e.md
@@ -0,0 +1,125 @@
+---
+id: 614394fb41985e0d2012a93e
+title: الخطوة ٢٤
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+ضمن عنصر `span` ، أضف النص `(Date of Birth)`.
+
+# --hints--
+
+يجب عليك إعطاء عنصر `span` النص `(Date of Birth)`.
+
+```js
+assert.equal(document.querySelector('.info:nth-of-type(3) > label > span')?.textContent, '(Date of Birth)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+--fcc-editable-region--
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only"></span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+--fcc-editable-region--
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md
new file mode 100644
index 00000000000..45ec5b15c3b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143956ed76ed60e012faa51.md
@@ -0,0 +1,197 @@
+---
+id: 6143956ed76ed60e012faa51
+title: خطوة ٢٥
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+لا يزال نص `.sr-only` مرئيًا. هناك نمط شائع لإخفاء النص بصرياً للقراءة فقط من قارئ الشاشات (screen readers).
+
+هذا النمط هو لتعيين خصائص CSS التالية:
+
+```css
+position: absolute;
+width: 1px;
+height: 1px;
+padding: 0;
+margin: -1px;
+overflow: hidden;
+clip: rect(0, 0, 0, 0);
+white-space: nowrap;
+border: 0;
+```
+
+استخدم ما سبق لتعريف class الـ `sr-only`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.sr-only` فقط.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.sr-only'));
+```
+
+يجب أن تعطي `.sr-only` الـ `position` بقيمة `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.position, 'absolute');
+```
+
+يجب أن تعطي `.sr-only` الـ `width` بقيمة `1px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.width, '1px');
+```
+
+يجب أن تعطي `.sr-only` الـ `height` بقيمة `1px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.height, '1px');
+```
+
+يجب أن تعطي `.sr-only` الـ `padding` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.padding, '0px');
+```
+
+يجب أن تعطي `.sr-only` الـ `margin` بقيمة `-1px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.margin, '-1px');
+```
+
+يجب أن تعطي `.sr-only` الـ `overflow` بقيمة `hidden`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.overflow, 'hidden');
+```
+
+يجب أن تعطي `.sr-only` الـ `clip` بقيمة `rect(0, 0, 0, 0)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.clip, 'rect(0px, 0px, 0px, 0px)');
+```
+
+يجب أن تعطي `.sr-only` الـ `white-space` بقيمة `nowrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.whiteSpace, 'nowrap');
+```
+
+يجب أن تعطي `.sr-only` الـ `border` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sr-only')?.borderWidth, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
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
new file mode 100644
index 00000000000..e63aedd46fe
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614396f7ae83f20ea6f9f4b3.md
@@ -0,0 +1,200 @@
+---
+id: 614396f7ae83f20ea6f9f4b3
+title: الخطوة ٢٦
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+داخل عنصر `section` الثاني، قم بإضافة عنصرين `div` يحملين class بقيمة `question-block`.
+
+ثم داخل كل عنصر `div.question-block`، قم بإضافة عنصر `p` مع نص للأرقام المتزايدة، بدءا من `1`، و `fieldset` واحد مع class بقيمة `question`.
+
+# --hints--
+
+يجب أن يكون لديك عنصرين `div` داخل عنصر `section` الثاني.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.length, 2);
+```
+
+يجب عليك إعطاء أول عنصر `div` جديد class بقيمة `question-block`.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[0]?.className, 'question-block');
+```
+
+يجب أن تعطي العنصر `div` الجديد الثاني class بقيمة `question-block`.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div')?.[1]?.className, 'question-block');
+```
+
+يجب عليك دمج عنصر `p` واحد داخل كل عنصر من عناصر `div.question-block`.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.length, 2);
+```
+
+يجب عليك إعطاء أول عنصر `p` النص `1`.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[0]?.textContent, '1');
+```
+
+يجب عليك إعطاء ثاني عنصر `p` النص `2`.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > p')?.[1]?.textContent, '2');
+```
+
+يجب عليك دمج عنصر `fieldset` واحد داخل كل عنصر من عناصر `div.question-block`.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.length, 2);
+```
+
+يجب عليك وضع عنصر `fieldset` الأول بعد عنصر `p` الأول.
+
+```js
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block > p + fieldset'));
+```
+
+يجب عليك وضع عنصر `fieldset` الثاني بعد عنصر `p` الثاني.
+
+```js
+assert.exists(document.querySelector('section:nth-of-type(2) > div.question-block:nth-of-type(2) > p + fieldset'));
+```
+
+يجب عليك إعطاء أول عنصر `fieldset` سمة class بقيمة `question`.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[0]?.className, 'question');
+```
+
+يجب عليك إعطاء ثاني عنصر `fieldset` سمة class بقيمة `question`.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(2) > div.question-block > fieldset')?.[1]?.className, 'question');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+--fcc-editable-region--
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+
+        </section>
+--fcc-editable-region--
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..f8eb1955002
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6143cb26f7edff2dc28f7da5.md
@@ -0,0 +1,177 @@
+---
+id: 6143cb26f7edff2dc28f7da5
+title: خطوة ٢٧
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+كل `fieldset` سوف تحتوي على معدلة true/false.
+
+داخل كل `fieldset`، قم بدمج عنصر `legend` واحد وعنصر `ul` مع خيارين.
+
+# --hints--
+
+يجب عليك دمج عنصر `legend` واحد داخل أول عنصر `fieldset`.
+
+```js
+assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > legend')?.length, 1);
+```
+
+يجب عليك دمج عنصر `ul` واحد داخل أول عنصر `fieldset`.
+
+```js
+assert.equal(document.querySelectorAll('.question-block:nth-of-type(1) > fieldset > ul')?.length, 1);
+```
+
+يجب عليك دمج عنصرين `li` واحد داخل أول عنصر `ul`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.querySelectorAll('li')?.length, 2);
+```
+
+يجب عليك دمج عنصر `legend` واحد داخل ثاني عنصر `fieldset`.
+
+```js
+assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > legend')?.length, 1);
+```
+
+يجب عليك دمج عنصر `ul` واحد داخل ثاني عنصر `fieldset`.
+
+```js
+assert.equal(document.querySelectorAll('.question-block:nth-of-type(2) > fieldset > ul')?.length, 1);
+```
+
+يجب عليك دمج عنصرين `li` واحد داخل ثاني عنصر `ul`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.querySelectorAll('li')?.length, 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+--fcc-editable-region--
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question"></fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question"></fieldset>
+          </div>
+        </section>
+--fcc-editable-region--
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..f798c25ea85
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144e818fd5ea704fe56081d.md
@@ -0,0 +1,195 @@
+---
+id: 6144e818fd5ea704fe56081d
+title: الخطوة ٢٨
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+اعطي كل `fieldset` سمة `name` مناسبة. ثم أعطى كلتا القوائم الغير منظمة (unordered lists) خاصية `class` بقيمة `answers-list`.
+
+أخيرا، استخدم `legend` لشرح محتوى `fieldset` عن طريق وضع معدلة true/false كمحتوى نصي.
+
+# --hints--
+
+يجب أن تعطي أول `fieldset` سمة `name` مناسبة. _تلميح: سأستخدم `html-question-one`_
+
+```js
+assert.notEmpty(document.querySelectorAll('fieldset')?.[0]?.name);
+```
+
+يجب أن تعطي ثاني `fieldset` سمة `name` مناسبة. _تلميح: سأستخدم `html-question-two`_
+
+```js
+assert.notEmpty(document.querySelectorAll('fieldset')?.[1]?.name);
+```
+
+يجب عليك إعطاء أول عنصر `ul` سمة `class` بقيمة `answers-list`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset > ul')?.[0]?.className, 'answers-list');
+```
+
+يجب عليك إعطاء ثاني عنصر `ul` سمة `class` بقيمة `answers-list`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset > ul')?.[1]?.className, 'answers-list');
+```
+
+يجب عليك إعطاء أول عنصر `legend` محتوى نصي.
+
+```js
+assert.notEmpty(document.querySelectorAll('legend')?.[0]?.textContent);
+```
+
+يجب عليك إعطاء ثاني عنصر `legend` محتوى نصي.
+
+```js
+assert.notEmpty(document.querySelectorAll('legend')?.[1]?.textContent);
+```
+
+لا يجب عليك استخدام نفس المحتوى النصي لكلا العنصرين `legend`.
+
+```js
+assert.notEqual(document.querySelectorAll('legend')?.[0]?.textContent, document.querySelectorAll('legend')?.[1]?.textContent);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+--fcc-editable-region--
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question">
+              <legend></legend>
+              <ul>
+                <li></li>
+                <li></li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question">
+              <legend></legend>
+              <ul>
+                <li></li>
+                <li></li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+--fcc-editable-region--
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..3562e1ed1d6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6144f8dc6849e405dd8bb829.md
@@ -0,0 +1,231 @@
+---
+id: 6144f8dc6849e405dd8bb829
+title: الخطوة ٢٩
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+لتوفير وظيفة الأسئلة true/fals، نحن بحاجة إلى مجموعة من المدخلات لا تسمح باختيار كلا الخيارين في نفس الوقت.
+
+داخل كل عنصر من عناصر الـ list، ضع عنصر `label` واحد، و ضمن كل عنصر `label`, ضع عنصر `input` مع الـ `type` المناسب.
+
+# --hints--
+
+يجب عليك دمج عنصرين `label` داخل اول عنصر `li`.
+
+```js
+assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label'));
+```
+
+يجب عليك دمج عنصر `label` واحد داخل ثاني عنصر `li`.
+
+```js
+assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label'));
+```
+
+يجب عليك دمج عنصر `label` واحد داخل ثالث عنصر `li`.
+
+```js
+assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label'));
+```
+
+يجب عليك دمج عنصر `label` واحد داخل رابع عنصر `li`.
+
+```js
+assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label'));
+```
+
+يجب عليك دمج عنصر `input` واحد داخل اول عنصر `label`.
+
+```js
+assert.exists(document.querySelectorAll('ul.answers-list > li')?.[0]?.querySelector('label')?.querySelector('input'));
+```
+
+يجب عليك دمج عنصر `input` واحد داخل ثاني عنصر `label`.
+
+```js
+assert.exists(document.querySelectorAll('ul.answers-list > li')?.[1]?.querySelector('label')?.querySelector('input'));
+```
+
+يجب عليك دمج عنصر `input` واحد داخل ثالث عنصر `label`.
+
+```js
+assert.exists(document.querySelectorAll('ul.answers-list > li')?.[2]?.querySelector('label')?.querySelector('input'));
+```
+
+يجب عليك دمج عنصر `input` واحد داخل رابع عنصر `label`.
+
+```js
+assert.exists(document.querySelectorAll('ul.answers-list > li')?.[3]?.querySelector('label')?.querySelector('input'));
+```
+
+يجب عليك إعطاء أول عنصر `input`الـ `type` بقيمة `radio`.
+
+```js
+assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.type, 'radio');
+```
+
+يجب عليك إعطاء ثاني عنصر `input`الـ `type` بقيمة `radio`.
+
+```js
+assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.type, 'radio');
+```
+
+يجب عليك إعطاء ثالث عنصر `input`الـ `type` بقيمة `radio`.
+
+```js
+assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.type, 'radio');
+```
+
+يجب عليك إعطاء رابع عنصر `input`الـ `type` بقيمة `radio`.
+
+```js
+assert.equal(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.type, 'radio');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+--fcc-editable-region--
+              <ul class="answers-list">
+                <li></li>
+                <li></li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li></li>
+                <li></li>
+              </ul>
+--fcc-editable-region--
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..8bce58f40b2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e6eeaa66c605eb087fe9.md
@@ -0,0 +1,207 @@
+---
+id: 6145e6eeaa66c605eb087fe9
+title: الخطوة ٣٠
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+على الرغم من أنه غير مطلوب لعناصر `label` التي بداخلها `input`، لا يزال من أفضل الممارسات ربط `label` ربطاً صريحاً بعنصر `input` الخاص به.
+
+قم بربط عناصر `label` مع عناصر `input` الخاصه بها.
+
+# --hints--
+
+يجب عليك إعطاء أول `label` سمة `for` التي تطابق الـ `id` لعنصر الـ `input` الخاص به.
+
+```js
+const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[0]?.htmlFor;
+assert.notEmpty(htmlFor);
+assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.id);
+```
+
+يجب عليك إعطاء ثاني `label` سمة `for` التي تطابق الـ `id` لعنصر الـ `input` الخاص به.
+
+```js
+const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[1]?.htmlFor;
+assert.notEmpty(htmlFor);
+assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.id);
+```
+
+يجب عليك إعطاء ثالث `label` سمة `for` التي تطابق الـ `id` لعنصر الـ `input` الخاص به.
+
+```js
+const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[2]?.htmlFor;
+assert.notEmpty(htmlFor);
+assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.id);
+```
+
+يجب عليك إعطاء رابع `label` سمة `for` التي تطابق الـ `id` لعنصر الـ `input` الخاص به.
+
+```js
+const htmlFor = document.querySelectorAll('ul.answers-list > li > label')?.[3]?.htmlFor;
+assert.notEmpty(htmlFor);
+assert.equal(htmlFor, document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.id);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+--fcc-editable-region--
+              <ul class="answers-list">
+                <li>
+                  <label>
+                    <input type="radio" />
+                  </label>
+                </li>
+                <li>
+                  <label>
+                    <input type="radio" />
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label>
+                    <input type="radio" />
+                  </label>
+                </li>
+                <li>
+                  <label>
+                    <input type="radio" />
+                  </label>
+                </li>
+              </ul>
+--fcc-editable-region--
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..97ec83ace33
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145e8b5080a5f06bb0223d0.md
@@ -0,0 +1,287 @@
+---
+id: 6145e8b5080a5f06bb0223d0
+title: الخطوة ٣١
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+اعطي عناصر `label` نص بحيث أن `input` يأتي قبل النص. ثم اعطي عناصر `input` سمة `value` المطابق للنص.
+
+يجب أن يكون النص `True` أو `False`.
+
+# --hints--
+
+يجب عليك إعطاء أول عنصر `label` محتوى نصي.
+
+```js
+assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
+```
+
+يجب عليك إعطاء ثاني عنصر `label` محتوى نصي.
+
+```js
+assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim());
+```
+
+يجب عليك إعطاء ثالث عنصر `label` محتوى نصي.
+
+```js
+assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
+```
+
+يجب عليك إعطاء رابع عنصر `label` محتوى نصي.
+
+```js
+assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim());
+```
+
+يجب عليك وضع المحتوى النصي داخل `label` الأول بعد عنصر `input`.
+
+```js
+assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.innerHTML, />[\s\S]+[a-zA-Z]/);
+```
+
+يجب عليك وضع المحتوى النصي داخل `label` الثاني بعد عنصر `input`.
+
+```js
+assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.innerHTML, />[\s\S]+[a-zA-Z]/);
+```
+
+يجب عليك وضع المحتوى النصي داخل `label` الثالث بعد عنصر `input`.
+
+```js
+assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.innerHTML, />[\s\S]+[a-zA-Z]/);
+```
+
+يجب عليك وضع المحتوى النصي داخل `label` الرابع بعد عنصر `input`.
+
+```js
+assert.match(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.innerHTML, />[\s\S]+[a-zA-Z]/);
+```
+
+يجب عليك إعطاء أول `label` النص `True` أو `False`.
+
+```js
+assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim());
+```
+
+يجب عليك إعطاء ثاني عنصر `label` النص `True`.
+
+```js
+const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
+assert(l(0) === 'False' ? l(1) === 'True' : true);
+```
+
+يجب عليك إعطاء ثاني عنصر `label` النص `False`.
+
+```js
+const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
+assert(l(0) === 'True' ? l(1) === 'False' : true);
+```
+
+يجب عليك ثالث عنصر `label` النص `True` أو `False`.
+
+```js
+assert.include(['True', 'False'], document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim());
+```
+
+يجب عليك إعطاء رابع عنصر `label` النص `True`.
+
+```js
+const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
+assert(l(2) === 'False' ? l(3) === 'True' : true);
+```
+
+يجب عليك إعطاء رابع عنصر `label` النص `False`.
+
+```js
+const l = (n) => document.querySelectorAll('ul.answers-list > li > label')?.[n]?.textContent?.trim();
+assert(l(2) === 'True' ? l(3) === 'False' : true);
+```
+
+يجب عليك إعطاء أول `input` سمة `value` التي تطابق محتوي `label` النصي.
+
+```js
+assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[0]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.value?.toLowerCase());
+```
+
+يجب عليك إعطاء ثاني `input` سمة `value` التي تطابق محتوي `label` النصي.
+
+```js
+assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[1]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.value?.toLowerCase());
+```
+
+يجب عليك إعطاء ثالث `input` سمة `value` التي تطابق محتوي `label` النصي.
+
+```js
+assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[2]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.value?.toLowerCase());
+```
+
+يجب عليك إعطاء رابع `input` سمة `value` التي تطابق محتوي `label` النصي.
+
+```js
+assert.equal(document.querySelectorAll('ul.answers-list > li > label')?.[3]?.textContent?.trim()?.toLowerCase(), document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.value?.toLowerCase());
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+--fcc-editable-region--
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" />
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" />
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" />
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" />
+                  </label>
+                </li>
+              </ul>
+--fcc-editable-region--
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..035fdf3fd6c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145eb5f08a38a0786c7a80c.md
@@ -0,0 +1,224 @@
+---
+id: 6145eb5f08a38a0786c7a80c
+title: الخطوة ٣٢
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+إذا نقرت على مدخلات radio، فقد تلاحظ أنه يمكن تحديد كلا المدخلين true/false في نفس fieldset في نفس الوقت.
+
+قم بتجميع المدخلات ذات الصلة معًا بحيث يمكن تحديد مدخل واحد فقط من الزوج في المرة الواحدة.
+
+# --hints--
+
+يجب أن تعطي أول `input` سمة `name`.
+
+```js
+assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[0]?.name);
+```
+
+يجب أن تعطي ثاني `input` سمة `name`.
+
+```js
+assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[1]?.name);
+```
+
+يجب أن تعطي ثالث `input` سمة `name`.
+
+```js
+assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[2]?.name);
+```
+
+يجب أن تعطي رابع `input` سمة `name`.
+
+```js
+assert.notEmpty(document.querySelectorAll('ul.answers-list > li > label > input')?.[3]?.name);
+```
+
+يجب أن تعطي عنصر `input` الثاني، السمة `name` التي تطابق سمة `name` لعنصر `input` الأول.
+
+```js
+const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
+assert.equal(i(1), i(0));
+```
+
+يجب أن تعطي عنصر `input` الرابع، السمة `name` التي تطابق سمة `name` لعنصر `input` الثالث.
+
+```js
+const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
+assert.equal(i(3), i(2));
+```
+
+يجب عليك إعطاء سمات `name` مختلفة إلى `input` الأول و `input` الثالث.
+
+```js
+const i = (n) => document.querySelectorAll('ul.answers-list > li > label > input')?.[n]?.name;
+assert.notEqual(i(0), i(2));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+--fcc-editable-region--
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+--fcc-editable-region--
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..4c7cc6f3641
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ed1f22caab087630aaad.md
@@ -0,0 +1,191 @@
+---
+id: 6145ed1f22caab087630aaad
+title: الخطوة ٣٣
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+لمنع التكرار غير الضروري، استهدف عنصر زائف `before` لعنصر `p`، وقم بإعطائه خاصية `content` بقيمة `"Question #"`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `p::before`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('p::before'));
+```
+
+يجب عليك إعطاء عنصر زائف `p::before` خاصية `content` بقيمة `"Question #"`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('p::before')?.content, 'Question #');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..202a7fb197c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145ee65e2e1530938cb594d.md
@@ -0,0 +1,232 @@
+---
+id: 6145ee65e2e1530938cb594d
+title: الخطوة ٣٤
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+القسم الأخير من هذا الاختبار سوف يحتوي على dropdown و text box.
+
+ابدأ بدمج `div` مع `class` بقيمة `formrow`، و ادمج اربع عناصر `div` بداخله، بتناوب سمات `class` الخاصة بهم بالقيم `question-block` و `answer`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` واحد داخل `section` الأخير.
+
+```js
+assert.exists(document.querySelector('section:nth-of-type(3) > div'));
+```
+
+يجب عليك إعطاء أول عنصر `div` سمة `class` بقيمة `formrow`.
+
+```js
+assert.equal(document.querySelector('section:nth-of-type(3) > div')?.className, 'formrow');
+```
+
+يجب عليك وضع `div.formrow` بعد عنصر `h2`.
+
+```js
+assert.exists(document.querySelector('section:nth-of-type(3) > h2 + div.formrow'));
+```
+
+يجب عليك دمج أربع عناصر `div` داخل `div.formrow`.
+
+```js
+assert.equal(document.querySelectorAll('section:nth-of-type(3) > div.formrow > div')?.length, 4);
+```
+
+يجب عليك إعطاء أول `div` مدمج `class` بقيمة `question-block`.
+
+```js
+assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(1)')?.className, 'question-block');
+```
+
+يجب عليك إعطاء ثاني `div` مدمج `class` بقيمة `answer`.
+
+```js
+assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(2)')?.className, 'answer');
+```
+
+يجب عليك إعطاء ثالث `div` مدمج `class` بقيمة `question-block`.
+
+```js
+assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(3)')?.className, 'question-block');
+```
+
+يجب عليك إعطاء رابع `div` مدمج `class` بقيمة `answer`.
+
+```js
+assert.equal(document.querySelector('section:nth-of-type(3) > div.formrow > div:nth-of-type(4)')?.className, 'answer');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+--fcc-editable-region--
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+
+        </section>
+--fcc-editable-region--
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..594f3c4807a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f02240ff8f09f7ec913c.md
@@ -0,0 +1,215 @@
+---
+id: 6145f02240ff8f09f7ec913c
+title: الخطوة ٣٥
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+ضمن عناصر `div.question-block`، ادمج عنصر `label` واحد ،وقم بإعطاء عناصر `label` محتوى نصي
+
+# --hints--
+
+يجب عليك دمج عنصر `label` واحد داخل اول عنصر `div.question-block`.
+
+```js
+assert.exists(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label'));
+```
+
+يجب عليك دمج عنصر `label` واحد داخل ثاني عنصر `div.question-block`.
+
+```js
+assert.exists(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label'));
+```
+
+يجب عليك إعطاء أول عنصر `label` محتوى نصي.
+
+```js
+assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[0]?.querySelector('label')?.textContent?.length, 1);
+```
+
+يجب عليك إعطاء ثاني عنصر `label` محتوى نصي.
+
+```js
+assert.isAtLeast(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.textContent?.length, 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+--fcc-editable-region--
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+            </div>
+            <div class="answer">
+            </div>
+            <div class="question-block">
+            </div>
+            <div class="answer">
+            </div>
+          </div>
+        </section>
+--fcc-editable-region--
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..2e497c99ced
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f14f019a4b0adb94b051.md
@@ -0,0 +1,250 @@
+---
+id: 6145f14f019a4b0adb94b051
+title: الخطوة ٣٦
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+ضمن عنصر `div.answer` الأول، ادمج عنصر واحد `select` يكون required مع ثلاثة عناصر `option`.
+
+اعطي العنصر `option` الأول `value` بقيمة `""` والنص `Select an option`. اعطي العنصر `option` الثاني `value` بقيمة `yes` والنص `Yes`. اعطي العنصر `option` الثالث `value` بقيمة `no` والنص `No`.
+
+# --hints--
+
+يجب عليك دمج عنصر `select` واحد داخل أول عنصر `div.answer`.
+
+```js
+assert.exists(document.querySelector('div.answer > select'));
+```
+
+يجب عليك تضمين ثلاثة عناصر `option` ضمن عنصر `select`.
+
+```js
+assert.equal(document.querySelectorAll('div.answer > select > option')?.length, 3);
+```
+
+يجب عليك إعطاء أول عنصر `option` سمة `value` بقيمة `""`.
+
+```js
+assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.value, '');
+```
+
+يجب أن تعطي عنصر `option` الأول المحتوى النصي `Select an option`.
+
+```js
+assert.equal(document.querySelector('div.answer > select > option:nth-child(1)')?.textContent, 'Select an option');
+```
+
+يجب عليك إعطاء ثاني عنصر `option` سمة `value` بقيمة `yes`.
+
+```js
+assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.value, 'yes');
+```
+
+يجب أن تعطي عنصر `option` الثاني المحتوى النصي `Yes`.
+
+```js
+assert.equal(document.querySelector('div.answer > select > option:nth-child(2)')?.textContent, 'Yes');
+```
+
+يجب عليك إعطاء ثالث عنصر `option` سمة `value` بقيمة `no`.
+
+```js
+assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.value, 'no');
+```
+
+يجب أن تعطي عنصر `option` الثالث المحتوى النصي `No`.
+
+```js
+assert.equal(document.querySelector('div.answer > select > option:nth-child(3)')?.textContent, 'No');
+```
+
+يجب أن تعطي `select` سمة `required`.
+
+```js
+assert.isTrue(document.querySelector('div.answer > select')?.required);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label>Are you a frontend developer?</label>
+            </div>
+--fcc-editable-region--
+            <div class="answer">
+
+            </div>
+--fcc-editable-region--
+            <div class="question-block">
+              <label>Do you have any questions:</label>
+            </div>
+            <div class="answer">
+            </div>
+          </div>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..006c13d2382
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f3a5cd9be60b9459cdd6.md
@@ -0,0 +1,222 @@
+---
+id: 6145f3a5cd9be60b9459cdd6
+title: الخطوة ٣٧
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+اربط عنصر `label` الأول بعنصر `select` وقم بإعطاء عنصر `select` سمة `name`.
+
+# --hints--
+
+يجب أن تعطي عنصر `label` سمة `for`.
+
+```js
+assert.notEmpty(document.querySelector('.question-block > label')?.htmlFor);
+```
+
+يجب أن تعطي عنصر `select` سمة `id`.
+
+```js
+assert.notEmpty(document.querySelector('.answer > select')?.id);
+```
+
+يجب أن تعطي عنصر `select`، السمة `id` التي تطابق سمة `for` لعنصر `label`.
+
+```js
+assert.equal(document.querySelector('.answer > select')?.id, document.querySelector('.question-block > label')?.htmlFor);
+```
+
+يجب أن تعطي عنصر `select` سمة `name`.
+
+```js
+assert.notEmpty(document.querySelector('.answer > select')?.name);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+--fcc-editable-region--
+            <div class="question-block">
+              <label>Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+--fcc-editable-region--
+            <div class="question-block">
+              <label>Do you have any questions:</label>
+            </div>
+            <div class="answer">
+            </div>
+          </div>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..9fb9ae300d2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f47393fbe70c4d885f9c.md
@@ -0,0 +1,229 @@
+---
+id: 6145f47393fbe70c4d885f9c
+title: الخطوة ٣٨
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+ادمج عنصر `textarea` واحد ضمن عنصر `div.answer` الثاني، وقم بتعيين عدد الصفوف والأعمدة التي يحتوي عليها.
+
+ثم أعطِ `textarea` نص نائب (placeholder) الذي يصف مثالًا للإجابة.
+
+# --hints--
+
+يجب أن تدمج عنصر `textarea` واحد ضمن عنصر `div.answer` الثاني.
+
+```js
+assert.exists(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea'));
+```
+
+يجب أن تعطي `textarea` سمة `rows` مع عدد.
+
+```js
+const rows = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('rows');
+assert.notEmpty(rows);
+assert.isNotNaN(Number(rows));
+```
+
+يجب أن تعطي `textarea` سمة `cols` مع عدد.
+
+```js
+const cols = document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('cols');
+assert.notEmpty(cols);
+assert.isNotNaN(Number(cols));
+```
+
+يجب أن تعطي `textarea` سمة `placeholder` مع نص يصف مثال لإجابة.
+
+```js
+assert.notEmpty(document.querySelectorAll('div.answer')?.[1]?.querySelector('textarea')?.getAttribute('placeholder'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label>Do you have any questions:</label>
+            </div>
+--fcc-editable-region--
+            <div class="answer">
+
+            </div>
+--fcc-editable-region--
+          </div>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..240411e1184
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f59029474c0d3dc1c8b8.md
@@ -0,0 +1,217 @@
+---
+id: 6145f59029474c0d3dc1c8b8
+title: الخطوة ٣٩
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+كما هو الحال مع العناصر `input` و `label` الأخرى، اربط `textarea` مع `label` المقابلة له، وقم بإعطائه السمة `name`.
+
+# --hints--
+
+يجب أن تعطي عنصر `label` سمة `for`.
+
+```js
+assert.notEmpty(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor);
+```
+
+يجب أن تعطي عنصر `textarea`، السمة `id` التي تطابق سمة `for` لعنصر `label`.
+
+```js
+assert.equal(document.querySelectorAll('.formrow > .question-block')?.[1]?.querySelector('label')?.htmlFor, document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.id);
+```
+
+يجب أن تعطي عنصر `textarea` سمة `name`.
+
+```js
+assert.notEmpty(document.querySelectorAll('.answer')?.[1]?.querySelector('textarea')?.name);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+--fcc-editable-region--
+            <div class="question-block">
+              <label>Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+--fcc-editable-region--
+          </div>
+        </section>
+      </form>
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..625b78c2157
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f685797bd30df9784e8c.md
@@ -0,0 +1,230 @@
+---
+id: 6145f685797bd30df9784e8c
+title: الخطوة ٤٠
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+لا تنس إعطاء `form` زر submit.
+
+# --hints--
+
+يجب عليك إضافة عنصر `button` أو `input`.
+
+```js
+assert.exists(document.querySelector('button') || document.querySelector('main > input') || document.querySelector('form > input'));
+```
+
+يجب عليك وضع submit ضمن عنصر `form`.
+
+```js
+assert.exists(document.querySelector('form > button') || document.querySelector('form > input'));
+```
+
+يجب عليك وضع submitt بعد آخر عنصر `section`.
+
+```js
+assert.exists(document.querySelector('section:last-of-type + button') || document.querySelector('section:last-of-type + input'));
+```
+
+يجب عليك إعطاء submit سمة `type` بقيمة `submit`.
+
+```js
+assert.exists(document.querySelector('button[type="submit"]') || document.querySelector('form > input[type="submit"]'));
+```
+
+يجب أن يعرض submit النص `Submit`.
+
+```js
+assert.equal(document.querySelector('button[type="submit"]')?.textContent ?? document.querySelector('input[type="submit"]')?.value, 'Submit');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+--fcc-editable-region--
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+
+      </form>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..4e7dd14e4dd
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f829ac6a920ebf5797d7.md
@@ -0,0 +1,215 @@
+---
+id: 6145f829ac6a920ebf5797d7
+title: الخطوة ٤١
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+عنصران semantic HTML نهائيان لهذا المشروع هما `footer` و `address`. عنصر `footer` هو حاوية لمجموعة من المحتويات المرتبطة بالصفحة، وعنصر `address` هو حاوية لمعلومات الاتصال لكاتب الصفحة.
+
+بعد عنصر `main`، أضف عنصر `footer` وادمج عنصر `address` واحد داخله.
+
+# --hints--
+
+يجب عليك إضافة عنصر `footer` واحد بعد عنصر `main`.
+
+```js
+assert.exists(document.querySelector('main + footer'));
+```
+
+يجب عليك دمج عنصر `address` واحد داخل عنصر `footer`.
+
+```js
+assert.exists(document.querySelector('footer > address'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..3a690d1f3a7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145f8f8bcd4370f6509078e.md
@@ -0,0 +1,218 @@
+---
+id: 6145f8f8bcd4370f6509078e
+title: الخطوة ٤٢
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+في داخل عنصر `address`، أضف ما يلي:
+
+```html
+freeCodeCamp<br />
+San Francisco<br />
+California<br />
+USA
+```
+
+# --hints--
+
+يجب عليك إضافة النص أعلاه بما في ذلك العلامات ألأتيه `<br />` إلى عنصر `address`.
+
+```js
+assert.equal(document.querySelector('address')?.innerText, 'freeCodeCamp\nSan Francisco\nCalifornia\nUSA');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+--fcc-editable-region--
+    <footer>
+      <address>
+
+      </address>
+    </footer>
+--fcc-editable-region--
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..92f2ef46c62
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fb5018cb5b100cb2a88c.md
@@ -0,0 +1,229 @@
+---
+id: 6145fb5018cb5b100cb2a88c
+title: الخطوة ٤٣
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+عنصر `address` لا يجب أن يحتوي على موقع جغرافي فعلي. ويمكن استخدامه لتوفير رابط لهذا الموضوع.
+
+قم بإلقاء رابط حول النص `freeCodeCamp`، وقم بتعيين موقعه إلى `https://freecodecamp.org`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `a`.
+
+```js
+assert.exists(document.querySelector('address > a'));
+```
+
+يجب أن تعطي عنصر `a` سمة `href` بقيمة `https://freecodecamp.org`.
+
+```js
+assert.equal(document.querySelector('address > a')?.getAttribute('href'), 'https://freecodecamp.org');
+```
+
+يجب عليك تغليف عنصر `a` حول النص الحالي `freeCodeCamp`.
+
+```js
+assert.equal(document.querySelector('address > a')?.innerHTML, 'freeCodeCamp');
+assert.equal(document.querySelector('address')?.innerHTML?.match(/freeCodeCamp/g)?.length, 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+--fcc-editable-region--
+    <footer>
+      <address>
+        freeCodeCamp<br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+--fcc-editable-region--
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..b1d844bc90f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6145fc3707fc3310c277f5c8.md
@@ -0,0 +1,256 @@
+---
+id: 6145fc3707fc3310c277f5c8
+title: الخطوة ٤٤
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+العودة إلى تصميم الصفحة. حدد عناصر القائمة (list) داخل شريط التنقل (navigation bar)، وأعطيه الأساليب (styles) التالية:
+
+```css
+color: #dfdfe2;
+margin: 0 0.2rem;
+padding: 0.2rem;
+display: block;
+```
+
+# --hints--
+
+يجب عليك استخدام منتقي `nav li` او `nav > ul > li`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert.exists(gs('nav li') || gs('nav > ul > li'));
+```
+
+يجب عليك إعطاء عناصر `li` خاصية `color` بقيمة `#dfdfe2`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+const color = gs('nav li')?.color ?? gs('nav > ul > li')?.color;
+assert.equal(color, 'rgb(223, 223, 226)');
+```
+
+يجب عليك إعطاء عناصر `li` خاصية `margin` بقيمة `0 0.2rem`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+const margin = gs('nav li')?.margin ?? gs('nav > ul > li')?.margin;
+assert.equal(margin, '0px 0.2rem');
+```
+
+يجب عليك إعطاء عناصر `li` خاصية `padding` بقيمة `0.2rem`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+const padding = gs('nav li')?.padding ?? gs('nav > ul > li')?.padding;
+assert.equal(padding, '0.2rem');
+```
+
+يجب عليك إعطاء عناصر `li` خاصية `display` بقيمة `block`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+const display = gs('nav li')?.display ?? gs('nav > ul > li')?.display;
+assert.equal(display, 'block');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..62d063b527b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614796cb8086be482d60e0ac.md
@@ -0,0 +1,260 @@
+---
+id: 614796cb8086be482d60e0ac
+title: الخطوة ٤٥
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+وفيما يتعلق بموضوع إمكانية الوصول البصري (visual accessibility,)، فإن التباين (contrast) بين العناصر عامل رئيسي. فعلى سبيل المثال، ينبغي أن يكون التباين بين النص وخلفية العنوان 4.5:1 على الأقل.
+
+غير لون الخط (font color) لجميع عناصر الروابط (anchor elements) داخل عناصر list إلى شيء به نسبة تباين (contrast ratio) لا تقل عن 7:1.
+
+# --hints--
+
+يجب عليك استخدام منتقي `li > a`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('li > a'));
+```
+
+يجب عليك إعطاء عنصر `a` خاصية `color`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('li > a')?.color);
+```
+
+يجب أن تعطي الخاصية `color` تباين مع الخلفية بنسبة 7:1 على الأقل. _تلميح: سأستخدم `#dfdfe2`_
+
+```js
+function luminance(r, g, b) {
+    const a = [r, g, b].map((v) => {
+        v /= 255;
+        return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 );
+    });
+    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+function contrast(rgb1, rgb2) {
+    const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
+    const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
+    const brightest = Math.max(lum1, lum2);
+    const darkest = Math.min(lum1, lum2);
+    return (brightest + 0.05)
+         / (darkest + 0.05);
+}
+const backgroundColour = [27, 27, 50];
+
+for (let elem of document.querySelectorAll('li > a')) {
+  const a = getComputedStyle(elem)?.color;
+  const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/);
+  const aColour = [rgbA[1], rgbA[2], rgbA[3]];
+  assert.isAtLeast(contrast(backgroundColour, aColour), 7);
+}
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..c5b0eb5b121
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6147a14ef5668b5881ef2297.md
@@ -0,0 +1,260 @@
+---
+id: 6147a14ef5668b5881ef2297
+title: الخطوة ٤٦
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+لجعل أزرار التنقل (navigation buttons) تبدو أشبه بالأزرار العادية، قم بإزالة التسطير (underline) من الروابط (anchor tags).
+
+ثم قم بإنشاء منتقي جديد يستهدف عناصر قائمة التنقل (navigation list elements) بحيث عندما يحوم المؤشر فوقها، يتم تبديل لون الخلفية ولون النص، ويصبح المؤشر (cursor) بشكل pointer.
+
+# --hints--
+
+يجب عليك استخدام منتقي `li > a` لتعيين `text-decoration` إلى `none`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('li > a')?.textDecoration, 'none');
+```
+
+يجب عليك استخدام إما المنتقي `nav > ul > li:hover` أو `nav li:hover` لتحديد نمط العناصر عندما يحوم المؤشر عليهم.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert.exists(gs('nav > ul > li:hover') || gs('nav li:hover'));
+```
+
+يجب عليك إعطاء عناصر `li` التي يحام عليها (hovered) الـ `background-color` بقيمة `#dfdfe2`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+const bgColor = gs('nav > ul > li:hover')?.backgroundColor ?? gs('nav li:hover')?.backgroundColor;
+assert.equal(bgColor, 'rgb(223, 223, 226)');
+```
+
+يجب عليك إعطاء عناصر `li` التي يحام عليها (hovered) الـ `color` بقيمة `#1b1b32`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+const color = gs('nav > ul > li:hover')?.color ?? gs('nav li:hover')?.color;
+assert.equal(color, 'rgb(27, 27, 50)');
+```
+
+يجب عليك إعطاء عناصر `li` التي يحام عليها (hovered) الـ `cursor` بقيمة `pointer`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+const cursor = gs('nav > ul > li:hover')?.cursor ?? gs('nav li:hover')?.cursor;
+assert.equal(cursor, 'pointer');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+--fcc-editable-region--
+
+
+li > a {
+  color: inherit;
+}
+--fcc-editable-region--
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..f116c77961a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614878f7a412310647873015.md
@@ -0,0 +1,253 @@
+---
+id: 614878f7a412310647873015
+title: الخطوة ٤٧
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+قم بتنظيف `header` باستخدام _Flexbox_ لوضع مسافة بين الأطفال، وتوسيطهم رأسياً.
+
+ثم قم بتثبيت `header` إلى الجزء العلوي من نافذة العرض (viewport).
+
+# --hints--
+
+يجب عليك إعطاء `header` خاصية `justify-content` بقيمة `space-between`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.justifyContent, 'space-between');
+```
+
+يجب عليك إعطاء `header` خاصية `align-items` بقيمة `center`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.alignItems, 'center');
+```
+
+يجب عليك إعطاء `header` خاصية `position` بقيمة `fixed`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.position, 'fixed');
+```
+
+يجب عليك إعطاء `header` خاصية `top` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('header')?.top, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+--fcc-editable-region--
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+
+}
+--fcc-editable-region--
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..868f637117a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487b77d4a37707073a64e5.md
@@ -0,0 +1,261 @@
+---
+id: 61487b77d4a37707073a64e5
+title: الخطوة ٤٨
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+عندما يكون عرض الشاشة صغيراً، فإن `h1` لا يغلف محتوى نصه كما ينبغي. لتغلفه العنصر كما ينبغي يحاذ (align) كتابة في العنصر `h1` إلى المركز (center).
+
+ثم اعطي `main` خاصية padding بحيث يمكن رؤية section header من `Student Info` بشكل كامل.
+
+# --hints--
+
+يجب عليك إعطاء `h1` خاصية `text-align` بقيمة `center`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign, 'center');
+```
+
+يجب عليك إضافة منتقي `main` لاستهداف عنصر `main`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('main'));
+```
+
+يجب عليك إعطاء `main` خاصية `padding-top` بقيمة `25px` علي الأقل.
+
+```js
+assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('main')?.paddingTop?.replace(/\D+/, '')), 25);
+```
+
+يجب عليك فقط تغيير قيمة `padding-top`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingBottom);
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingLeft);
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('main')?.paddingRight);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+--fcc-editable-region--
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+
+}
+
+
+--fcc-editable-region--
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..cdfc7a0cce2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487da611a65307e78d2c20.md
@@ -0,0 +1,275 @@
+---
+id: 61487da611a65307e78d2c20
+title: الخطوة ٤٩
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+على الشاشات الصغيرة، تتجاوز (overflows) القائمة الغير منظمة (unordered list) في شريط التنقل (navigation bar) الجانب الأيمن من الشاشة العرض.
+
+أصلح هذا باستخدام _Flexbox_ لتغليف محتوى `ul`. بعد ذلك، قم بتعيين خصائص CSS التالية لمحاذاة النص بشكل صحيح:
+
+```css
+align-items: center;
+padding-inline-start: 0;
+margin-block: 0;
+height: 100%;
+```
+
+# --hints--
+
+يجب عليك إعطاء `ul` خاصية `flex-wrap` بقيمة `wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.flexWrap, 'wrap');
+```
+
+يجب عليك إعطاء `ul` خاصية `align-items` بقيمة `center`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.alignItems, 'center');
+```
+
+يجب عليك إعطاء `ul` خاصية `padding-inline-start` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.paddingInlineStart, '0px');
+```
+
+يجب عليك إعطاء `ul` خاصية `margin-block` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.marginBlock, '0px');
+```
+
+يجب عليك إعطاء `ul` خاصية `height` بقيمة `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('nav > ul')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+--fcc-editable-region--
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+
+}
+--fcc-editable-region--
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..917ba09e4d3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61487f703571b60899055cf9.md
@@ -0,0 +1,287 @@
+---
+id: 61487f703571b60899055cf9
+title: الخطوة ٥٠
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+عيّن عرض عناصر `section` إلى `80%` من الحاوية الأساسي (parent container). ثم استخدم margins لتركيز عناصر `section`، بإضافة `10px` إلى bottom margin.
+
+أيضا، تأكد من أن عناصر `section` لا يمكن أن تكون أكبر من width بقيمة `600px`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `section`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('section'));
+```
+
+يجب عليك إعطاء `section` خاصية `width` بقيمة `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.width, '80%');
+```
+
+يجب عليك إعطاء `section` خاصية `margin-top` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginTop, '0px');
+```
+
+يجب عليك إعطاء `section` خاصية `margin-right` بقيمة `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginRight, 'auto');
+```
+
+يجب عليك إعطاء `section` خاصية `margin-bottom` بقيمة `10px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginBottom, '10px');
+```
+
+يجب عليك إعطاء `section` خاصية `margin-left` بقيمة `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.marginLeft, 'auto');
+```
+
+يجب عليك إعطاء `section` خاصية `max-width` بقيمة `600px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('section')?.maxWidth, '600px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..58d36561e33
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614880dc16070e093e29bc56.md
@@ -0,0 +1,259 @@
+---
+id: 614880dc16070e093e29bc56
+title: الخطوة ٥١
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+استبدل الهامش العلوي (top margin) للعناصر `h2` بقيمة `60px` من top padding.
+
+# --hints--
+
+يجب عليك إعطاء `h2` خاصية `margin-top` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.marginTop, '0px');
+```
+
+يجب عليك إعطاء `h2` خاصية `padding-top` بقيمة `60px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('h2')?.paddingTop, '60px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+--fcc-editable-region--
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+
+}
+--fcc-editable-region--
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..78b20504772
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614883b6fa720e09fb167de9.md
@@ -0,0 +1,280 @@
+---
+id: 614883b6fa720e09fb167de9
+title: الخطوة ٥٢
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+قم إضافة padding إلى الجزء العلوي والأيسر من عناصر `.info`، وتعيين القيم الأخرى إلى `0`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.info`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.info'));
+```
+
+يجب عليك إعطاء `.info` خاصية `padding-top` بقيمة `1px`.
+
+```js
+assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingTop?.replace(/\D+/, '')), 1);
+```
+
+يجب عليك إعطاء `.info` خاصية `padding-right` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingRight, '0px');
+```
+
+يجب عليك إعطاء `.info` خاصية `padding-bottom` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.info')?.paddingBottom, '0px');
+```
+
+يجب عليك إعطاء `.info` خاصية `padding-left` بقيمة `1px` علي الأقل.
+
+```js
+assert.isAtLeast(Number(new __helpers.CSSHelp(document).getStyle('.info')?.paddingLeft?.replace(/\D+/, '')), 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..de928394fd0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614884c1f5d6f30ab3d78cde.md
@@ -0,0 +1,364 @@
+---
+id: 614884c1f5d6f30ab3d78cde
+title: الخطوة ٥٣
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+امنح العناصر `.formrow` الخصائص الآتية، top margin و padding left و right. قيم الـ padding الأخرى يجب أن تكون `0`.
+
+ثم قم بزيادة حجم الخط (font size) لجميع عناصر `input`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.formrow` لاستهداف عناصر `.formrow`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.formrow'));
+```
+
+يجب عليك إعطاء `.formrow` الـ `margin-top` بقيمة `1px` علي الاقل.
+
+```js
+const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.marginTop;
+let valInPx = 0;
+if (/^\d+rem$/.test(val)) {
+  valInPx = remToPx(Number(val.replace('rem', '')));
+} else if (/^\d+em$/.test(val)) {
+  valInPx = emToPx(Number(val.replace('em', '')));
+} else {
+  valInPx = Number(val?.replace('px', ''));
+}
+function emToPx(em) {
+  return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize);
+}
+function remToPx(rem) {
+  return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize);
+}
+assert.isAtLeast(valInPx, 1);
+```
+
+يجب عليك إعطاء `.formrow` الـ `padding-top` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingTop, '0px');
+```
+
+يجب عليك إعطاء `.formrow` الـ `padding-right` بقيمة `1px` علي الاقل.
+
+```js
+const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingRight;
+let valInPx = 0;
+if (/^\d+rem$/.test(val)) {
+  valInPx = remToPx(Number(val.replace('rem', '')));
+} else if (/^\d+em$/.test(val)) {
+  valInPx = emToPx(Number(val.replace('em', '')));
+} else {
+  valInPx = Number(val?.replace('px', ''));
+}
+function emToPx(em) {
+  return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize);
+}
+function remToPx(rem) {
+  return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize);
+}
+assert.isAtLeast(valInPx, 1);
+```
+
+يجب عليك إعطاء `.formrow` الـ `padding-bottom` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingBottom, '0px');
+```
+
+يجب عليك إعطاء `.formrow` الـ `padding-left` بقيمة `1px` علي الاقل.
+
+```js
+const val = new __helpers.CSSHelp(document).getStyle('.formrow')?.paddingLeft;
+let valInPx = 0;
+if (/^\d+rem$/.test(val)) {
+  valInPx = remToPx(Number(val.replace('rem', '')));
+} else if (/^\d+em$/.test(val)) {
+  valInPx = emToPx(Number(val.replace('em', '')));
+} else {
+  valInPx = Number(val?.replace('px', ''));
+}
+function emToPx(em) {
+  return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize);
+}
+function remToPx(rem) {
+  return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize);
+}
+assert.isAtLeast(valInPx, 1);
+```
+
+يجب عليك استخدام منتقي `input` لاستهداف عناصر `input`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('input'));
+```
+
+يجب عليك إعطاء `input` الـ `font-size` بقيمة اكبر من `13px`.
+
+```js
+const val = new __helpers.CSSHelp(document).getStyle('input')?.fontSize;
+let valInPx = 0;
+if (/^\d+rem$/.test(val)) {
+  valInPx = remToPx(Number(val.replace('rem', '')));
+} else if (/^\d+em$/.test(val)) {
+  valInPx = emToPx(Number(val.replace('em', '')));
+} else {
+  valInPx = Number(val?.replace('px', ''));
+}
+function emToPx(em) {
+  return em * parseFloat(getComputedStyle(document.querySelector('.formrow'))?.fontSize);
+}
+function remToPx(rem) {
+  return rem * parseFloat(getComputedStyle(document.documentElement)?.fontSize);
+}
+assert.isAtLeast(valInPx, 13);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..5ef51fba861
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/61488ecfd05e290b5712e6da.md
@@ -0,0 +1,286 @@
+---
+id: 61488ecfd05e290b5712e6da
+title: الخطوة ٥٤
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+لجعل القسم (section) الأول يبدو أكثر خطياً (inline)، استهدف فقط عناصر `input` داخل عناصر `.info`، و عيّن `width` إلى `50%` و قم بمحاذاة نصهم على اليسار ( left-align their text).
+
+# --hints--
+
+يجب عليك استخدام منتقي `.info input` أو `.info > input`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert.exists(gs('.info input') || gs('.info > input'));
+```
+
+يجب عليك إعطاء `input` خاصية `width` بقيمة `50%`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width;
+const width = gs('.info input') ?? gs('.info > input');
+assert.equal(width, '50%');
+```
+
+يجب عليك إعطاء `input` خاصية `text-align` بقيمة `left`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign;
+const textAlign = gs('.info input') ?? gs('.info > input');
+assert.equal(textAlign, 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..00b7de4f15a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148d99cdc7acd0c519862cb.md
@@ -0,0 +1,291 @@
+---
+id: 6148d99cdc7acd0c519862cb
+title: الخطوة ٥٥
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+استهدف جميع عناصر `label` داخل عناصر `.info`، وعيّن الـ `width` إلى `10%`, واجعله لا ياخذ أقل من `55px`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.info label` أو `.info > label`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert.exists(gs('.info label') || gs('.info > label'));
+```
+
+يجب عليك إعطاء `label` الـ `width` بقيمة `10%`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.width;
+const width = gs('.info label') || gs('.info > label');
+assert.equal(width, '10%');
+```
+
+يجب عليك إعطاء `label` الـ `min-width` بقيمة `55px`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.minWidth;
+const minWidth = gs('.info label') || gs('.info > label');
+assert.equal(minWidth, '55px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+--fcc-editable-region--
+.info input {
+  width: 50%;
+  text-align: left;
+}
+
+
+--fcc-editable-region--
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..d27d79bd8e9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148da157cc0bd0d06df5c0a.md
@@ -0,0 +1,298 @@
+---
+id: 6148da157cc0bd0d06df5c0a
+title: الخطوة ٥٦
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+لمحاذاة مربعات `input` مع بعضها البعض، قم بتعيين خاصية `display` إلى `inline-block` لجميع عناصر `input` و `label` داخل عناصر `.info`.
+
+أيضًا، بمحاذي (align) نص عنصر `label` إلى اليمين.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.info > label, .info > input` أو `.info label, .info input`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert.exists(gs('.info > label, .info > input') || gs('.info label, .info input') || gs('.info > input, .info > label') || gs('.info input, .info label'));
+```
+
+يجب عليك إعطاء عناصر `input` و `label` خاصية `display` بقيمة `inline-block`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.display;
+const display = gs('.info > label, .info > input') ?? gs('.info label, .info input') ?? gs('.info > input, .info > label') ?? gs('.info input, .info label');
+assert.equal(display, 'inline-block');
+```
+
+يجب عليك إعطاء `label` خاصية `text-align` بقيمة `right`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign;
+const textAlign = gs('.info > label') ?? gs('.info label');
+assert.equal(textAlign, 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+--fcc-editable-region--
+
+
+.info input {
+  width: 50%;
+  text-align: left;
+}
+
+.info label {
+  width: 10%;
+  min-width: 55px;
+}
+--fcc-editable-region--
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..2cb5b906603
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dc095264000dce348bf5.md
@@ -0,0 +1,323 @@
+---
+id: 6148dc095264000dce348bf5
+title: الخطوة ٥٧
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+لرتيب عناصر `.question-block`، قم بتعيين خصائص CSS التالية:
+
+```css
+text-align: left;
+display: block;
+width: 100%;
+margin-top: 20px;
+padding-top: 5px;
+```
+
+# --hints--
+
+يجب عليك استخدام منتقي `.question-block` فقط.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.question-block'));
+```
+
+يجب عليك إعطاء عنصر `.question-block` خاصية `display` بقيمة `block`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.display, 'block');
+```
+
+يجب عليك إعطاء عنصر `.question-block` خاصية `width` بقيمة `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.width, '100%');
+```
+
+يجب عليك إعطاء عنصر `.question-block` خاصية `margin-top` بقيمة `20px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.marginTop, '20px');
+```
+
+يجب عليك إعطاء عنصر `.question-block` خاصية `padding-top` بقيمة `5px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.paddingTop, '5px');
+```
+
+يجب عليك إعطاء عنصر `.question-block` خاصية `text-align` بقيمة `left`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.question-block')?.textAlign, 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+.info label, .info input {
+  display: inline-block;
+}
+
+.info input {
+  width: 50%;
+  text-align: left;
+}
+
+.info label {
+  width: 10%;
+  min-width: 55px;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..4350d505678
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dcaaf2e8750e6cb4501a.md
@@ -0,0 +1,316 @@
+---
+id: 6148dcaaf2e8750e6cb4501a
+title: الخطوة ٥٨
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+اجعل عناصر الفقرة النصية تظهر كأولوية أعلى، مع خصائص CSS التالية:
+
+```css
+margin-top: 5px;
+padding-left: 15px;
+font-size: 20px;
+```
+
+# --hints--
+
+يجب عليك استخدام منتقي العناصر `p`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('p'));
+```
+
+يجب عليك إعطاء عناصر `p` خاصية `margin-top` بقيمة `5px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.marginTop, '5px');
+```
+
+يجب عليك إعطاء عناصر `p` خاصية `padding-left` بقيمة `15px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.paddingLeft, '15px');
+```
+
+يجب عليك إعطاء عناصر `p` خاصية `font-size` بقيمة `20px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('p')?.fontSize, '20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+.info label, .info input {
+  display: inline-block;
+}
+
+.info input {
+  width: 50%;
+  text-align: left;
+}
+
+.info label {
+  width: 10%;
+  min-width: 55px;
+  text-align: right;
+}
+
+.question-block {
+  text-align: left;
+  display: block;
+  width: 100%;
+  margin-top: 20px;
+  padding-top: 5px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+p::before {
+  content: "Question #";
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..5c20c9701b0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dd31d210990f0fb140f8.md
@@ -0,0 +1,312 @@
+---
+id: 6148dd31d210990f0fb140f8
+title: الخطوة ٥٩
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+من المفيد رؤية الحدود الافتراضية حول عناصر `fieldset` أثناء التطوير. ومع ذلك، قد لا يكون هذا هو الأسلوب الذي تريده.
+
+قم بإزالة border و bottom padding من عناصر `.question`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.question`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.question'));
+```
+
+يجب أن تعطي `.question` خاصية `border` بقيمة `none`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.borderStyle, 'none');
+```
+
+يجب عليك إعطاء `.question` خاصية `padding-bottom` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.question')?.paddingBottom, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+.info label, .info input {
+  display: inline-block;
+}
+
+.info input {
+  width: 50%;
+  text-align: left;
+}
+
+.info label {
+  width: 10%;
+  min-width: 55px;
+  text-align: right;
+}
+
+.question-block {
+  text-align: left;
+  display: block;
+  width: 100%;
+  margin-top: 20px;
+  padding-top: 5px;
+}
+
+p {
+  margin-top: 5px;
+  padding-left: 15px;
+  font-size: 20px;
+}
+
+p::before {
+  content: "Question #";
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..bafe4b8248e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148defa9c01520fb9d178a0.md
@@ -0,0 +1,315 @@
+---
+id: 6148defa9c01520fb9d178a0
+title: الخطوة ٦٠
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+قم بإزالة الأسلوب الافتراضي لعناصر القائمة `.answers-list`، وأزال padding من القائمة الغير منظمة (unordered list).
+
+# --hints--
+
+يجب عليك استخدام منتقي `.answers-list`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.answers-list'));
+```
+
+يجب أن تعطي `.answers-list` خاصية `list-style` بقيمة `none`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.listStyle, 'none');
+```
+
+يجب أن تعطي `.answers-list` خاصية `padding` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.answers-list')?.padding, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+.info label, .info input {
+  display: inline-block;
+}
+
+.info input {
+  width: 50%;
+  text-align: left;
+}
+
+.info label {
+  width: 10%;
+  min-width: 55px;
+  text-align: right;
+}
+
+.question-block {
+  text-align: left;
+  display: block;
+  width: 100%;
+  margin-top: 20px;
+  padding-top: 5px;
+}
+
+p {
+  margin-top: 5px;
+  padding-left: 15px;
+  font-size: 20px;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.question {
+  border: none;
+  padding-bottom: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..af4509458d7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148dfab9b54c110577de165.md
@@ -0,0 +1,360 @@
+---
+id: 6148dfab9b54c110577de165
+title: الخطوة ٦١
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+اعطي زر الـ submit تصميم على غرار رمز freeCodeCamp مع خصائص CSS التالية:
+
+```css
+display: block;
+margin: 40px auto;
+width: 40%;
+padding: 15px;
+font-size: 23px;
+background: #d0d0d5;
+border: 3px solid #3b3b4f;
+```
+
+# --hints--
+
+يجب عليك استخدام منتقي العنصر `button`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('button'));
+```
+
+يجب عليك إعطاء `button` الـ `display` بقيمة `block`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.display, 'block');
+```
+
+يجب عليك إعطاء `button` الـ `margin` بقيمة `40px auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.margin, '40px auto');
+```
+
+يجب عليك إعطاء `button` الـ `width` بقيمة `40%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.width, '40%');
+```
+
+يجب عليك إعطاء `button` الـ `padding` بقيمة `15px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.padding, '15px');
+```
+
+يجب عليك إعطاء `button` الـ `font-size` بقيمة `23px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.fontSize, '23px');
+```
+
+يجب عليك إعطاء `button` الـ `background` بقيمة `#d0d0d5`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.backgroundColor, 'rgb(208, 208, 213)');
+```
+
+يجب عليك إعطاء `button` الـ `border` بقيمة `3px solid #3b3b4f`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('button')?.border, '3px solid rgb(59, 59, 79)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+.info label, .info input {
+  display: inline-block;
+}
+
+.info input {
+  width: 50%;
+  text-align: left;
+}
+
+.info label {
+  width: 10%;
+  min-width: 55px;
+  text-align: right;
+}
+
+.question-block {
+  text-align: left;
+  display: block;
+  width: 100%;
+  margin-top: 20px;
+  padding-top: 5px;
+}
+
+p {
+  margin-top: 5px;
+  padding-left: 15px;
+  font-size: 20px;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.question {
+  border: none;
+  padding-bottom: 0;
+}
+
+.answers-list {
+  list-style: none;
+  padding: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..38c2e73467c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e0bcc13efd10f7d7a6a9.md
@@ -0,0 +1,336 @@
+---
+id: 6148e0bcc13efd10f7d7a6a9
+title: الخطوة ٦٢
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+قم بتعيين لون الخلفية (background color) ألى `footer` بقيمة `#2a2a40`, واستخدم _Flexbox_ لتركيز النص أفقيا.
+
+# --hints--
+
+يجب عليك استخدام منتقي العنصر `footer`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('footer'));
+```
+
+يجب عليك إعطاء `footer` خاصية `background-color` بقيمة `#2a2a40`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.backgroundColor, 'rgb(42, 42, 64)');
+```
+
+يجب عليك إعطاء `footer` خاصية `display` بقيمة `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.display, 'flex');
+```
+
+يجب عليك إعطاء `footer` خاصية `justify-content` بقيمة `center`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('footer')?.justifyContent, 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+.info label, .info input {
+  display: inline-block;
+}
+
+.info input {
+  width: 50%;
+  text-align: left;
+}
+
+.info label {
+  width: 10%;
+  min-width: 55px;
+  text-align: right;
+}
+
+.question-block {
+  text-align: left;
+  display: block;
+  width: 100%;
+  margin-top: 20px;
+  padding-top: 5px;
+}
+
+p {
+  margin-top: 5px;
+  padding-left: 15px;
+  font-size: 20px;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.question {
+  border: none;
+  padding-bottom: 0;
+}
+
+.answers-list {
+  list-style: none;
+  padding: 0;
+}
+
+button {
+  display: block;
+  margin: 40px auto;
+  width: 40%;
+  padding: 15px;
+  font-size: 23px;
+  background: #d0d0d5;
+  border: 3px solid #3b3b4f;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..5e5e1f6263d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e161ecec9511941f8833.md
@@ -0,0 +1,356 @@
+---
+id: 6148e161ecec9511941f8833
+title: الخطوة ٦٣
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+والآن، لا يمكننا قراءة النص. استهدف `footer` وعنصر الرابط بالداخل لتعيين لون الخط (font color) إلى لون بنسبة تباين (contrast ratio) مناسبة.
+
+# --hints--
+
+يجب عليك استخدام منتقي `footer, footer a`.
+
+```js
+const gs = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert.exists(gs('footer, footer a') || gs('footer a, footer'));
+```
+
+يجب عليك تعيين `color` إلى قيمة مع نسبة تباين لا تقل عن `7:1`. _تلميح: أقترح `#dfdfe2`_
+
+```js
+function luminance(r, g, b) {
+    const a = [r, g, b].map((v) => {
+        v /= 255;
+        return v <= 0.03928 ? v / 12.92 : Math.pow( (v + 0.055) / 1.055, 2.4 );
+    });
+    return a[0] * 0.2126 + a[1] * 0.7152 + a[2] * 0.0722;
+}
+function contrast(rgb1, rgb2) {
+    const lum1 = luminance(rgb1[0], rgb1[1], rgb1[2]);
+    const lum2 = luminance(rgb2[0], rgb2[1], rgb2[2]);
+    const brightest = Math.max(lum1, lum2);
+    const darkest = Math.min(lum1, lum2);
+    return (brightest + 0.05)
+         / (darkest + 0.05);
+}
+const backgroundColour = [42, 42, 64];
+
+const foot = getComputedStyle(document.querySelector('footer'))?.color;
+const a = getComputedStyle(document.querySelector('footer a'))?.color;
+
+const rgbFoot = foot?.match(/(\d+),\s(\d+),\s(\d+)/);
+const rgbA = a?.match(/(\d+),\s(\d+),\s(\d+)/);
+const footColour = [rgbFoot[1], rgbFoot[2], rgbFoot[3]];
+const aColour = [rgbA[1], rgbA[2], rgbA[3]];
+assert.isAtLeast(contrast(backgroundColour, footColour), 7);
+assert.isAtLeast(contrast(backgroundColour, aColour), 7);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+.info label, .info input {
+  display: inline-block;
+}
+
+.info input {
+  width: 50%;
+  text-align: left;
+}
+
+.info label {
+  width: 10%;
+  min-width: 55px;
+  text-align: right;
+}
+
+.question-block {
+  text-align: left;
+  display: block;
+  width: 100%;
+  margin-top: 20px;
+  padding-top: 5px;
+}
+
+p {
+  margin-top: 5px;
+  padding-left: 15px;
+  font-size: 20px;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.question {
+  border: none;
+  padding-bottom: 0;
+}
+
+.answers-list {
+  list-style: none;
+  padding: 0;
+}
+
+button {
+  display: block;
+  margin: 40px auto;
+  width: 40%;
+  padding: 15px;
+  font-size: 23px;
+  background: #d0d0d5;
+  border: 3px solid #3b3b4f;
+}
+
+footer {
+  background-color: #2a2a40;
+  display: flex;
+  justify-content: center;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..456643e9c56
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e28706b34912340fd042.md
@@ -0,0 +1,359 @@
+---
+id: 6148e28706b34912340fd042
+title: الخطوة ٦٤
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+قم بتوسيط كل النص أفقيًا داخل عنصر `address`، وإضافة بعض من padding.
+
+# --hints--
+
+يجب عليك استخدام منتقي العناصر `address`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('address'));
+```
+
+يجب عليك إعطاء `address` خاصية `text-align` بقيمة `center`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('address')?.textAlign, 'center');
+```
+
+يجب عليك إعطاء `address` خاصية `padding-top` بقيمة `1px`.
+
+```js
+assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-top')?.replace(/\D\D+/, '')), 1);
+```
+
+يجب عليك إعطاء `address` خاصية `padding-right` بقيمة `1px`.
+
+```js
+assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-right')?.replace(/\D\D+/, '')), 1);
+```
+
+يجب عليك إعطاء `address` خاصية `padding-bottom` بقيمة `1px`.
+
+```js
+assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-bottom')?.replace(/\D\D+/, '')), 1);
+```
+
+يجب عليك إعطاء `address` خاصية `padding-left` بقيمة `1px`.
+
+```js
+assert.isAtLeast(Number(window.getComputedStyle(document.querySelector('address'), null)?.getPropertyValue('padding-left')?.replace(/\D\D+/, '')), 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+.info label, .info input {
+  display: inline-block;
+}
+
+.info input {
+  width: 50%;
+  text-align: left;
+}
+
+.info label {
+  width: 10%;
+  min-width: 55px;
+  text-align: right;
+}
+
+.question-block {
+  text-align: left;
+  display: block;
+  width: 100%;
+  margin-top: 20px;
+  padding-top: 5px;
+}
+
+p {
+  margin-top: 5px;
+  padding-left: 15px;
+  font-size: 20px;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.question {
+  border: none;
+  padding-bottom: 0;
+}
+
+.answers-list {
+  list-style: none;
+  padding: 0;
+}
+
+button {
+  display: block;
+  margin: 40px auto;
+  width: 40%;
+  padding: 15px;
+  font-size: 23px;
+  background: #d0d0d5;
+  border: 3px solid #3b3b4f;
+}
+
+footer {
+  background-color: #2a2a40;
+  display: flex;
+  justify-content: center;
+}
+
+footer,
+footer a {
+  color: #dfdfe2;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..f4dc726735c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e335c1edd512d00e4691.md
@@ -0,0 +1,342 @@
+---
+id: 6148e335c1edd512d00e4691
+title: الخطوة ٦٥
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+بالنقر على روابط التنقل (navigation links) يجب أن يقفز نافذة العرض (viewport) إلى القسم ذي الصلة بالرابط. ومع ذلك، يمكن أن يكون هذا القفز مربكًا لبعض المستخدمين.
+
+حدد جميع العناصر، وعيّن `scroll-behavior` ألى `smooth`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `*`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+يجب عليك إعطاء `*` خاصية `scroll-behavior` بقيمة `smooth`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('*')?.scrollBehavior, 'smooth');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+.info label, .info input {
+  display: inline-block;
+}
+
+.info input {
+  width: 50%;
+  text-align: left;
+}
+
+.info label {
+  width: 10%;
+  min-width: 55px;
+  text-align: right;
+}
+
+.question-block {
+  text-align: left;
+  display: block;
+  width: 100%;
+  margin-top: 20px;
+  padding-top: 5px;
+}
+
+p {
+  margin-top: 5px;
+  padding-left: 15px;
+  font-size: 20px;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.question {
+  border: none;
+  padding-bottom: 0;
+}
+
+.answers-list {
+  list-style: none;
+  padding: 0;
+}
+
+button {
+  display: block;
+  margin: 40px auto;
+  width: 40%;
+  padding: 15px;
+  font-size: 23px;
+  background: #d0d0d5;
+  border: 3px solid #3b3b4f;
+}
+
+footer {
+  background-color: #2a2a40;
+  display: flex;
+  justify-content: center;
+}
+
+footer,
+footer a {
+  color: #dfdfe2;
+}
+
+address {
+  text-align: center;
+  padding: 0.3em;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..ec1dc0ec468
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e41c728f65138addf9cc.md
@@ -0,0 +1,360 @@
+---
+id: 6148e41c728f65138addf9cc
+title: الخطوة ٦٦
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+أنواع معينة من الرسوم المتحركة ممكن أن تسبب إزعاجاً لبعض المستخدمين. على وجه الخصوص، الأشخاص الذين يعانون <dfn>ألتهاب عصب الدهليزي</dfn> لديهم حساسية لمشغلات حركة معينة.
+
+يحتوي `@media` على مِيزة وسائط تسمى `prefers-reduced-motion` لتعيين CSS على أساس تفضيلات المستخدم. ويمكن أن تأخذ إحدى القيم التالية:
+
+-   `reduce`
+-   `no-preference`
+
+```CSS
+@media (feature: value) {
+  selector {
+    styles
+  }
+}
+```
+
+---
+
+اغلق قاعدة النمط الذي تحدد `scroll-behavior: smooth` بداخل `@media` على قاعدة مع مِيزة الوسائط `prefers-reduced-motion` مع `no-preference` تعيين القيمة.
+
+# --hints--
+
+يجب أن يكون لديك قاعدة `@media (prefers-reduced-motion: no-preference)` واحده.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)').length, 1);
+```
+
+يجب أن تدخل قاعدة `*` الحالية ضمن قاعدة `@media`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia('(prefers-reduced-motion: no-preference)')?.find(x => x.selectorText === '*')?.style?.scrollBehavior, 'smooth');
+assert.notExists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+--fcc-editable-region--
+* {
+  scroll-behavior: smooth;
+}
+--fcc-editable-region--
+
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+.info label, .info input {
+  display: inline-block;
+}
+
+.info input {
+  width: 50%;
+  text-align: left;
+}
+
+.info label {
+  width: 10%;
+  min-width: 55px;
+  text-align: right;
+}
+
+.question-block {
+  text-align: left;
+  display: block;
+  width: 100%;
+  margin-top: 20px;
+  padding-top: 5px;
+}
+
+p {
+  margin-top: 5px;
+  padding-left: 15px;
+  font-size: 20px;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.question {
+  border: none;
+  padding-bottom: 0;
+}
+
+.answers-list {
+  list-style: none;
+  padding: 0;
+}
+
+button {
+  display: block;
+  margin: 40px auto;
+  width: 40%;
+  padding: 15px;
+  font-size: 23px;
+  background: #d0d0d5;
+  border: 3px solid #3b3b4f;
+}
+
+footer {
+  background-color: #2a2a40;
+  display: flex;
+  justify-content: center;
+}
+
+footer,
+footer a {
+  color: #dfdfe2;
+}
+
+address {
+  text-align: center;
+  padding: 0.3em;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
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
new file mode 100644
index 00000000000..acbfa392fd1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/6148e5aeb102e3142de026a2.md
@@ -0,0 +1,685 @@
+---
+id: 6148e5aeb102e3142de026a2
+title: الخطوة ٦٧
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+أخيرًا ، يمكن تحسين إمكانية استيعاب التنقل (navigation accessibility) عن طريق توفير اختصارات لوحة المفاتيح.
+
+السمة `accesskey` تقبل قائمة مفصولة بمسافة من مفاتيح الوصول (access keys). على سبيل المثال:
+
+```html
+<button type="submit" accesskey="s">Submit</button>
+```
+
+قم بإعطاء كل رابط من روابط التنقل مفتاح وصول من حرف واحد.
+
+_ملاحظة: لا ينصح دائما باستخدام مفاتيح الوصول، ولكن يمكن أن تكون مفيدة_
+
+أحسنت صنعا. لقد أكملت مشروع تدريب _اختبار إمكانية الوصول_.
+
+# --hints--
+
+يجب أن تعطي عنصر `a` الأول `accesskey` من حرف واحد.
+
+```js
+assert.equal(document.querySelectorAll('a')?.[0]?.getAttribute('accesskey')?.length, 1);
+```
+
+يجب أن تعطي عنصر `a` الثاني `accesskey` من حرف واحد.
+
+```js
+assert.equal(document.querySelectorAll('a')?.[1]?.getAttribute('accesskey')?.length, 1);
+```
+
+يجب أن تعطي عنصر `a` الثالث `accesskey` من حرف واحد.
+
+```js
+assert.equal(document.querySelectorAll('a')?.[2]?.getAttribute('accesskey')?.length, 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+    <title>Accessibility Quiz</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <header>
+      <img id="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg">
+      <h1>HTML/CSS Quiz</h1>
+      <nav>
+--fcc-editable-region--
+        <ul>
+          <li><a href="#student-info">INFO</a></li>
+          <li><a href="#html-questions">HTML</a></li>
+          <li><a href="#css-questions">CSS</a></li>
+        </ul>
+--fcc-editable-region--
+      </nav>
+    </header>
+    <main>
+      <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+        <section role="region" aria-labelledby="student-info">
+          <h2 id="student-info">Student Info</h2>
+          <div class="info">
+            <label for="student-name">Name:</label>
+            <input type="text" name="student-name" id="student-name" />
+          </div>
+          <div class="info">
+            <label for="student-email">Email:</label>
+            <input type="email" name="student-email" id="student-email" />
+          </div>
+          <div class="info">
+            <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span></label>
+            <input type="date" name="birth-date" id="birth-date" />
+          </div>
+        </section>
+        <section role="region" aria-labelledby="html-questions">
+          <h2 id="html-questions">HTML</h2>
+          <div class="question-block">
+            <p>1</p>
+            <fieldset class="question" name="html-question-one">
+              <legend>
+                The legend element represents a caption for the content of its
+                parent fieldset element
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q1-a1">
+                    <input type="radio" id="q1-a1" name="q1" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q1-a2">
+                    <input type="radio" id="q1-a2" name="q1" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+          <div class="question-block">
+            <p>2</p>
+            <fieldset class="question" name="html-question-two">
+              <legend>
+                A label element nesting an input element is required to have a
+                for attribute with the same value as the input's id
+              </legend>
+              <ul class="answers-list">
+                <li>
+                  <label for="q2-a1">
+                    <input type="radio" id="q2-a1" name="q2" value="true" />
+                    True
+                  </label>
+                </li>
+                <li>
+                  <label for="q2-a2">
+                    <input type="radio" id="q2-a2" name="q2" value="false" />
+                    False
+                  </label>
+                </li>
+              </ul>
+            </fieldset>
+          </div>
+        </section>
+        <section role="region" aria-labelledby="css-questions">
+          <h2 id="css-questions">CSS</h2>
+          <div class="formrow">
+            <div class="question-block">
+              <label for="customer">Are you a frontend developer?</label>
+            </div>
+            <div class="answer">
+              <select name="customer" id="customer" required>
+                <option value="">Select an option</option>
+                <option value="yes">Yes</option>
+                <option value="no">No</option>
+              </select>
+            </div>
+            <div class="question-block">
+              <label for="css-questions">Do you have any questions:</label>
+            </div>
+            <div class="answer">
+              <textarea id="css-questions" name="css-questions" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+            </div>
+          </div>
+        </section>
+        <button type="submit">Submit</button>
+      </form>
+    </main>
+    <footer>
+      <address>
+        <a href="https://freecodecamp.org">freeCodeCamp</a><br />
+        San Francisco<br />
+        California<br />
+        USA
+      </address>
+    </footer>
+  </body>
+</html>
+
+```
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  * {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  background-color: #1b1b32;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  background-color: #0a0a23;
+  aspect-ratio: 35 / 4;
+  padding: 0.4rem;
+}
+
+h1 {
+  color: #f1be32;
+  font-size: min(5vw, 1.2em);
+  text-align: center;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  justify-content: space-evenly;
+  flex-wrap: wrap;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  color: #dfdfe2;
+  margin: 0 0.2rem;
+  padding: 0.2rem;
+  display: block;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0 auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+.info {
+  padding: 10px 0 0 5px;
+}
+
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+.info label, .info input {
+  display: inline-block;
+}
+
+.info input {
+  width: 50%;
+  text-align: left;
+}
+
+.info label {
+  width: 10%;
+  min-width: 55px;
+  text-align: right;
+}
+
+.question-block {
+  text-align: left;
+  display: block;
+  width: 100%;
+  margin-top: 20px;
+  padding-top: 5px;
+}
+
+p {
+  margin-top: 5px;
+  padding-left: 15px;
+  font-size: 20px;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.question {
+  border: none;
+  padding-bottom: 0;
+}
+
+.answers-list {
+  list-style: none;
+  padding: 0;
+}
+
+button {
+  display: block;
+  margin: 40px auto;
+  width: 40%;
+  padding: 15px;
+  font-size: 23px;
+  background: #d0d0d5;
+  border: 3px solid #3b3b4f;
+}
+
+footer {
+  background-color: #2a2a40;
+  display: flex;
+  justify-content: center;
+}
+
+footer,
+footer a {
+  color: #dfdfe2;
+}
+
+address {
+  text-align: center;
+  padding: 0.3em;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="description" content="freeCodeCamp Accessibility Quiz practice project" />
+  <title>Accessibility Quiz</title>
+  <link rel="stylesheet" href="styles.css" />
+</head>
+
+<body>
+  <header>
+    <img src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" id="logo" alt="freeCodeCamp logo" />
+    <h1>HTML/CSS Quiz</h1>
+    <nav>
+      <ul>
+        <li><a href="#student-info" accesskey="i">INFO</a></li>
+        <li><a href="#html-questions" accesskey="h">HTML</a></li>
+        <li><a href="#css-questions" accesskey="c">CSS</a></li>
+      </ul>
+    </nav>
+  </header>
+  <main>
+    <form method="post" action="https://freecodecamp.org/practice-project/accessibility-quiz">
+      <section role="region" aria-labelledby="student-info">
+        <h2 id="student-info">Student Info</h2>
+
+        <div class="info">
+          <label for="student-name">Name:</label>
+          <input type="text" name="student-name" id="student-name" />
+        </div>
+        <div class="info">
+          <label for="student-email">Email:</label>
+          <input type="email" name="student-email" id="student-email" />
+        </div>
+        <div class="info">
+          <label for="birth-date">D.O.B.<span class="sr-only">(Date of Birth)</span>:</label>
+          <input type="date" id="birth-date" name="birth-date" />
+        </div>
+      </section>
+      <section role="region" aria-labelledby="html-questions">
+        <h2 id="html-questions">HTML</h2>
+        <div class="question-block">
+          <p>1</p>
+          <fieldset class="question" name="html-question-one">
+            <legend>
+              The legend element represents a caption for the content of its
+              parent fieldset element
+            </legend>
+            <ul class="answers-list">
+              <li>
+                <label for="q1-a1">
+                  <input type="radio" id="q1-a1" name="q1" value="true" />
+                  True
+                </label>
+              </li>
+              <li>
+                <label for="q1-a2">
+                  <input type="radio" id="q1-a2" name="q1" value="false" />
+                  False
+                </label>
+              </li>
+            </ul>
+          </fieldset>
+        </div>
+        <div class="question-block">
+          <p>2</p>
+          <fieldset class="question" name="html-question-two">
+            <legend>
+              A label element nesting an input element is required to have a
+              for attribute with the same value as the input's id
+            </legend>
+            <ul class="answers-list">
+              <li>
+                <label for="q2-a1">
+                  <input type="radio" id="q2-a1" name="q2" value="true" />
+                  True
+                </label>
+              </li>
+              <li>
+                <label for="q2-a2">
+                  <input type="radio" id="q2-a2" name="q2" value="false" />
+                  False
+                </label>
+              </li>
+            </ul>
+          </fieldset>
+        </div>
+      </section>
+      <section role="region" aria-labelledby="css-questions">
+        <h2 id="css-questions">CSS</h2>
+        <div class="formrow">
+          <div class="question-block">
+            <label for="customer">Are you an frontend developer?</label>
+          </div>
+          <div class="answer">
+            <select name="customer" id="customer" required>
+              <option value="">Select an option</option>
+              <option value="yes">Yes</option>
+              <option value="no">No</option>
+            </select>
+          </div>
+          <div class="question-block">
+            <label for="css-question">Do you have any questions:</label>
+          </div>
+          <div class="answer">
+            <textarea id="css-question" name="css-question" rows="5" cols="24" placeholder="Who is flexbox..."></textarea>
+          </div>
+        </div>
+      </section>
+      <button type="submit">Submit</button>
+    </form>
+  </main>
+  <footer>
+    <address>
+      <a href="https://www.freecodecamp.org">freeCodeCamp</a><br />
+      San Francisco<br />
+      California<br />
+      USA
+    </address>
+  </footer>
+</body>
+
+</html>
+```
+
+```css
+@media (prefers-reduced-motion: no-preference) {
+  * {
+    scroll-behavior: smooth;
+  }
+}
+
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+
+header {
+  width: 100%;
+  height: 50px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  position: fixed;
+  background-color: #1b1b32;
+  top: 0;
+}
+
+#logo {
+  width: max(100px, 18vw);
+  aspect-ratio: 35 / 4;
+  max-height: 100%;
+  background-color: #0a0a23;
+  padding: 0.4rem;
+}
+
+h1 {
+  text-align: center;
+  font-size: min(5vw, 1.2em);
+  color: #f1be32;
+}
+
+nav {
+  width: 50%;
+  max-width: 300px;
+  height: 50px;
+}
+
+nav > ul {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-evenly;
+  align-items: center;
+  padding-inline-start: 0;
+  margin-block: 0;
+  height: 100%;
+}
+
+nav > ul > li {
+  display: block;
+  margin: 0 0.2rem;
+  color: #dfdfe2;
+  padding: 0.2rem;
+}
+
+nav > ul > li:hover {
+  background-color: #dfdfe2;
+  color: #1b1b32;
+  cursor: pointer;
+}
+
+li > a {
+  color: inherit;
+  text-decoration: none;
+}
+
+main {
+  padding-top: 50px;
+}
+
+section {
+  width: 80%;
+  margin: 0px auto 10px auto;
+  max-width: 600px;
+}
+
+h1,
+h2 {
+  font-family: Verdana, Tahoma;
+}
+
+h2 {
+  border-bottom: 4px solid #dfdfe2;
+  margin-top: 0px;
+  padding-top: 60px;
+}
+
+
+.info {
+  margin: 0 auto;
+  padding: 10px 0 0 5px;
+}
+.formrow {
+  margin-top: 30px;
+  padding: 0px 15px;
+}
+
+input {
+  font-size: 16px;
+}
+
+.info label,
+.info input {
+  display: inline-block;
+}
+
+.info label {
+  width: 10%;
+  min-width: 55px;
+  text-align: right;
+}
+
+.info input {
+  width: 50%;
+  text-align: left;
+}
+
+.question-block {
+  text-align: left;
+  display: block;
+  width: 100%;
+  margin-top: 20px;
+  padding-top: 5px;
+}
+
+p {
+  margin-top: 5px;
+  padding-left: 15px;
+  font-size: 20px;
+}
+
+p::before {
+  content: "Question #";
+}
+
+.question {
+  border: none;
+  padding-bottom: 0;
+}
+
+.answers-list {
+  list-style: none;
+  padding: 0;
+}
+
+button {
+  display: block;
+  margin: 40px auto;
+  width: 40%;
+  padding: 15px;
+  font-size: 23px;
+  background: #d0d0d5;
+  border: 3px solid #3b3b4f;
+}
+
+footer {
+  background-color: #2a2a40;
+  display: flex;
+  justify-content: center;
+}
+
+footer,
+footer a {
+  color: #dfdfe2;
+}
+
+address {
+  text-align: center;
+  padding: 0.3em;
+}
+
+.sr-only {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md
new file mode 100644
index 00000000000..d52293c1972
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-accessibility-by-building-a-quiz/614ccc21ea91ef1736b9b578.md
@@ -0,0 +1,50 @@
+---
+id: 614ccc21ea91ef1736b9b578
+title: الخطوة الأولى
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+مرحبا بكم في الجزء الأول من اختبار إمكانية الوصول (Accessibility Quiz). بما انك تسعي أن تكون متمرسًا في HTML و CSS، فقد بدأنا باستخدام النموذج الأساسي.
+
+ابدأ رحلة الوصول هذه، عن طريق توفير سمة (attribute) تسمي `lang` إلى `html` الخاص بك. هذا سيساعد قارئ الشاشة (screen readers) على تحديد لغة الصفحة.
+
+# --hints--
+
+يجب أن تعطي عنصر `html` سمة `lang`. _تلميح: يمكنك استخدام القيمة `en` للغة الانجليزية_
+
+```js
+assert.match(code, /<html\s+lang=('|")[\w\-]+?\1\s*>/i);
+// TODO: This should/could be fixed in the builder.js
+// assert.notThrow(Intl.getCanonicalLocales(document.querySelector('html').lang));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+--fcc-editable-region--
+<html>
+  <head>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+
+  </body>
+</html>
+--fcc-editable-region--
+
+```
+
+```css
+body {
+  background: #f5f6f7;
+  color: #1b1b32;
+  font-family: Helvetica;
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md
new file mode 100644
index 00000000000..e39691a5964
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33071498eb2472b87ddee4.md
@@ -0,0 +1,43 @@
+---
+id: 5f33071498eb2472b87ddee4
+title: الخطوة الأولى
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+كما تعلمت في الخطوات القليلة الأخيرة من Cat App Photo، هناك بنية أساسية مطلوبة لبدء بناء صفحة الويب الخاصة بك.
+
+قك بإضافة الـ tag الآتي `<!DOCTYPE html>`، وعنصر `html` مع سمة `lang` بقيمة `en`.
+
+# --hints--
+
+يجب أن يكون لديك تعريف `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE html>/i));
+```
+
+يجب أن يكون لديك علامة `<html>` فتح مع سمة `lang` بقيمة `en`.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+يجب أن يكون لديك علامة إغلاق الآتي `<html>`. تذكر أن علامات الإغلاق (closing tags) تحتوي على `/` بعد فتح `<` القوس.
+
+```js
+assert(code.match(/<\/html>/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3313e74582ad9d063e3a38.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3313e74582ad9d063e3a38.md
new file mode 100644
index 00000000000..a194a04a9b2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3313e74582ad9d063e3a38.md
@@ -0,0 +1,61 @@
+---
+id: 5f3313e74582ad9d063e3a38
+title: الخطوة الثانية
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+أضف عنصر `head` ضمن عنصر `html`، حتى تتمكن من إضافة عنصر `title`. نص عنصر `title` يجب أن يكون `Cafe Menu`.
+
+# --hints--
+
+يجب أن يكون لديك العلامة المفتوحة (opening tag) الآتية `<head>`.
+
+```js
+assert(code.match(/<head>/i));
+```
+
+يجب أن يكون لديك العلامة المغلقة (closing tag) الآتية `</head>`.
+
+```js
+assert(code.match(/<head>/i));
+```
+
+يجب أن يكون لديك العلامة المفتوحة (opening tag) الآتية `<title>`.
+
+```js
+assert(code.match(/<title>/i));
+```
+
+يجب أن يكون لديك العلامة المغلقة (closing tag) الآتي `</title>`.
+
+```js
+assert(code.match(/<\/title>/i));
+```
+
+عنصر `title` الخاص بك يجب أن يكون داخل عنصر `head` الخاص بك.
+
+```js
+assert(code.match(/<head>\s*<title>.*<\/title>\s*<\/head>/si));
+```
+
+يجب أن يحتوي العنصر `title` على النص `Cafe Menu`. قد تحتاج إلى التحقق من الإملاء.
+
+```js
+assert.match(document.querySelector('title')?.innerText, /Cafe Menu/i);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+
+--fcc-editable-region--
+</html>
+```
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
new file mode 100644
index 00000000000..92012abe625
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f331e55dfab7a896e53c3a1.md
@@ -0,0 +1,47 @@
+---
+id: 5f331e55dfab7a896e53c3a1
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+يكون `title` واحد من عدة عناصر توفر معلومات إضافية غير مرئية على صفحة الويب، لكنه مفيد لمحركات البحث أو كيف يتم عرض الصفحة.
+
+داخل عنصر `head`، قم بدمج عنصر `meta` مع سمة تسمى `charset` و تعيين قيمتها إلي `utf-8` لإخبار المتصفح كيفية ترميز الأحرف للصفحة. لاحظ أن عناصر `meta` مغلقة ذاتيا (self closing).
+
+# --hints--
+
+يجب أن يكون لديك وسم `meta`.
+
+```js
+assert(code.match(/<meta.*?\/?>/is));
+```
+
+يجب أن يحتوي وسم `meta` الخاص بك علي سمة `charset`.
+
+```js
+assert(code.match(/<meta charset=/i));
+```
+
+يجب أن تحتوي سمة `charset` الخاصة بك على القيمة `utf-8`.
+
+```js
+assert(code.match(/charset=('|")utf-8\1/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <title>Cafe Menu</title>
+  </head>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md
new file mode 100644
index 00000000000..03128c54368
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3326b143638ee1a09ff1e3.md
@@ -0,0 +1,54 @@
+---
+id: 5f3326b143638ee1a09ff1e3
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+للتحضير لإنشاء بعض المحتوى الفعلي، أضف عنصر `body` أسفل عنصر `head`.
+
+# --hints--
+
+يجب أن يكون لديك العلامة المفتوحة (opening tag) الآتية `<body>`.
+
+```js
+assert(code.match(/<body>/i));
+```
+
+يجب أن يكون لديك العلامة المغلقة (closing tag) الآتي `</body>`.
+
+```js
+assert(code.match(/<\/body>/i));
+```
+
+لا يجب عليك تغيير عنصر `head`. تأكد من أنك لم تقم بحذف علامة الإغلاق الخاصة بك.
+
+```js
+assert(code.match(/<head>/i));
+assert(code.match(/<\/head>/i));
+```
+
+عنصر `body` الخاص بك يجب أن يأتي بعد عنصر `head` الخاص بك.
+
+```js
+assert(code.match(/<\/head>[.\n\s]*<body>/im));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="utf-8" />
+    <title>Cafe Menu</title>
+  </head>
+--fcc-editable-region--
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
new file mode 100644
index 00000000000..6d77aa629e8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
@@ -0,0 +1,55 @@
+---
+id: 5f33294a6af5e9188dbdb8f3
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+حان الوقت لإضافة محتوى للقائمة. أضف عنصر `main` داخل عنصر `body` الحالي. سيحتوي في النهاية على معلومات تسعير حول القهوة والحلويات التي يقدمها المقهى.
+
+# --hints--
+
+يجب أن يكون لديك العلامة الأفتاح (opening tag) الآتية `<main>`.
+
+```js
+assert(code.match(/<main>/i));
+```
+
+يجب أن يكون لديك العلامة الإغلاق (closing tag) الآتي `</main>`.
+
+```js
+assert(code.match(/<\/main>/i));
+```
+
+لا يجب عليك تغيير عنصر `body`. تيقن من عدم حذف علامتك إغلاق (closing tag) عن طريق الخطأ.
+
+```js
+assert($('body').length === 1);
+```
+
+يجب أن يأتي وسمك `main` داخل وسمك `body`.
+
+```js
+const main = document.querySelector('main');
+assert(main.parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cafe Menu</title>
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
new file mode 100644
index 00000000000..db52a4e1baa
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
@@ -0,0 +1,63 @@
+---
+id: 5f332a88dc25a0fd25c7687a
+title: الخطوة ٦
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+اسم المقهى هو `CAMPER CAFE`. أضف عنصر `h1` داخل عنصر `main`. أعطيه اسم المقهى بأحرف كبيرة (capitalized) لجعله بارزا.
+
+# --hints--
+
+يجب أن يكون لديك العلامة الأفتاح (opening tag) الآتية `<h1>`.
+
+```js
+assert(code.match(/<h1>/i));
+```
+
+يجب أن يكون لديك العلامة الإغلاق (closing tag) الآتي `</h1>`.
+
+```js
+assert(code.match(/<\/h1>/i));
+```
+
+لا يجب عليك تغيير عنصر `main` الحالي.
+
+```js
+assert($('main').length === 1);
+```
+
+يجب أن يكون عنصرك `h1` داخل عنصرك `main`.
+
+```js
+assert($('h1')[0].parentElement.tagName === "MAIN");
+```
+
+يجب أن يحتوي العنصر `h1` على النص `CAMPER CAFE`.
+
+```js
+assert(code.match(/<h1>CAMPER CAFE<\/h1>/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cafe Menu</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <main>
+    </main>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
new file mode 100644
index 00000000000..15b22a67573
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
@@ -0,0 +1,64 @@
+---
+id: 5f332b23c2045fb843337579
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+لتمكين الزوار من معرفة أن المقهى قد تأسس في عام 2020، قم بإضافة عنصر `p` أسفل عنصر `h1` مع النص `Est. 2020`.
+
+# --hints--
+
+يجب أن يكون لديك العلامة الأفتاح (opening tag) الآتية `<p>`.
+
+```js
+assert(code.match(/<p>/i));
+```
+
+يجب أن يكون لديك العلامة الإغلاق (closing tag) الآتي `</p>`.
+
+```js
+assert(code.match(/<\/p>/i));
+```
+
+لا يجب عليك تغيير عنصر `h1` الحالي. تيقن من أنك لم تقم بحذف علامة الإغلاق (closing tag).
+
+```js
+assert($('h1').length === 1);
+```
+
+يجب أن يكون عنصرك `p` تحت عنصرك `h1`.
+
+```js
+assert($('p')[0].previousElementSibling.tagName === 'H1');
+```
+
+يجب أن يحتوي عنصرك `p` على النص `Est. 2020`.
+
+```js
+assert(document.querySelector("p").innerText === "Est. 2020");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cafe Menu</title>
+  </head>
+  <body>
+    <main>
+--fcc-editable-region--
+      <h1>CAMPER CAFE</h1>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md
new file mode 100644
index 00000000000..1dcb5d9686e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md
@@ -0,0 +1,69 @@
+---
+id: 5f344f9c805cd193c33d829c
+title: الخطوة 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+يمكنك إضافة أسلوب (style) إلى عنصر ما عن طريق تحديده في عنصر `style` ووضع خاصية له مثل:
+
+```css
+element {
+ property: value;
+}
+```
+
+قم بتوسيط عنصر `h1` الخاص بك عن طريق تعيين خاصية `text-align` الخاصة به إلى القيمة `center`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `h1` في عنصر `style` الخاص بك.
+
+```js
+const hasSelector = new __helpers.CSSHelp(document).getStyle('h1');
+assert(hasSelector);
+```
+
+يجب أن تكون خاصية `text-align` الخاصة بك بقيمة `center`.
+
+```js
+const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'center');
+assert(hasTextAlign);
+```
+
+يجب أن يقوم منتقي `h1` الخاص بك بتعيين خاصية `text-align` إلى `center`.
+
+```js
+const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
+assert(h1TextAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cafe Menu</title>
+--fcc-editable-region--
+    <style>
+    </style>
+--fcc-editable-region--
+  </head>
+  <body>
+    <main>
+      <h1>CAMPER CAFE</h1>
+      <p>Est. 2020</p>
+      <section>
+        <h2>Coffee</h2>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
new file mode 100644
index 00000000000..d2614f365ad
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
@@ -0,0 +1,55 @@
+---
+id: 5f344fad8bf01691e71a30eb
+title: الخطوة 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+حتى الآن، كنت مقيدًا فيما يتعلق بالعرض التقديمي وشكل المحتوى الذي تقوم بإنشائه. لبدء التحكم، أضف عنصر `style` داخل العنصر `head`.
+
+# --hints--
+
+يجب أن يكون لديك الـ opening tag الآتي `<style>`.
+
+```js
+assert(code.match(/<style\s*>/i));
+```
+
+يجب أن يكون لديك الـ closing tag الآتي `</style>`.
+
+```js
+assert(code.match(/<\/style\s*>/));
+```
+
+عنصر `style` الخاص بك يجب أن يكون داخل عنصر `head` الخاص بك.
+
+```js
+assert(code.match(/<head\s*>[\w\W\s]*<style\s*>[\w\W\s]*<\/style\s*>[\w\W\s]*<\/head\s*>/i))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="utf-8" />
+    <title>Cafe Menu</title>
+  </head>
+  <body>
+    <main>
+      <h1>CAMPER CAFE</h1>
+      <p>Est. 2020</p>
+      <section>
+        <h2>Coffee</h2>
+      </section>
+    </main>
+  </body>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md
new file mode 100644
index 00000000000..f86073da826
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md
@@ -0,0 +1,68 @@
+---
+id: 5f344fbc22624a2976425065
+title: الخطوة 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+قم بإنشاء عنصر `h2` في عنصر `section` وقم بإعطائه النص `Coffee`.
+
+# --hints--
+
+يجب أن يكون لديك العلامة المفتوحة (opening tag) الآتية `<h2>`.
+
+```js
+assert(code.match(/<h2\s*>/i));
+```
+
+يجب أن يكون لديك العلامة المغلقة (closing tag) الآتي `</h2>`.
+
+```js
+assert(code.match(/<\/h2\s*>/i));
+```
+
+لا يجب عليك تغيير عنصر `section` الحالي. تأكد من أنك لم تقم بحذف علامة الإغلاق (closing tag).
+
+```js
+assert($('section').length === 1);
+```
+
+عنصر `h2` الخاص بك يجب أن يكون داخل عنصر `section` الخاص بك.
+
+```js
+const h2 = document.querySelector('h2');
+assert(h2.parentElement.tagName === 'SECTION');
+```
+
+يجب أن يحتوي عنصر `h2` الخاص بك على النص `Coffee`.
+
+```js
+const h2 = document.querySelector('h2');
+assert(h2.innerText === 'Coffee');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cafe Menu</title>
+  </head>
+  <body>
+    <main>
+      <h1>CAMPER CAFE</h1>
+      <p>Est. 2020</p>
+--fcc-editable-region--
+      <section>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
new file mode 100644
index 00000000000..f4471b07baf
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
@@ -0,0 +1,60 @@
+---
+id: 5f344fc1520b6719f2e35605
+title: الخطوة 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+سيكون هناك قسمان (sections) في القائمة، قسم للقهوة (coffees) وآخر للحلويات (desserts). أضف عنصر `section` ضمن عنصر `main` حتى يكون لديك مكان لوضع جميع القهوة المتاحة.
+
+# --hints--
+
+يجب أن يكون لديك العلامة المفتوحة (opening tag) الآتية `<section>`.
+
+```js
+assert(code.match(/<section\s*>/i));
+```
+
+يجب أن يكون لديك العلامة المغلقة (closing tag) الآتي `</section>`.
+
+```js
+assert(code.match(/<\/section\s*>/i));
+```
+
+لا يجب عليك تغيير عنصر `main` الحالي. تأكد من أنك لم تقم بحذف علامة الإغلاق (closing tag).
+
+```js
+assert($('main').length === 1);
+```
+
+عنصر `section` الخاص بك يجب أن يكون ضمن عنصر `main` الخاص بك.
+
+```js
+const main = document.querySelector('main');
+const section = document.querySelector('section');
+assert(section.parentElement === main);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cafe Menu</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <main>
+      <h1>CAMPER CAFE</h1>
+      <p>Est. 2020</p>
+    </main>
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
new file mode 100644
index 00000000000..344d749bd69
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
@@ -0,0 +1,71 @@
+---
+id: 5f3477ae34c1239cafe128be
+title: الخطوة 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+لديك الآن ثلاثة type selectors بنفس النمط بالضبط. يمكنك إضافة نفس المجموعة من الأنماط إلى العديد من العناصر عن طريق إنشاء قائمة من الـ selectors. يتم فصل كل selector بفواصل مثل هذا:
+
+```css
+selector1, selector2 {
+  property: value;
+}
+```
+
+احذف الـ type selectors الثلاثة الموجودة واستبدلها بـ selector list واحدة تقوم بتركيز النصوص لعناصر `h1` و `h2` و `p`.
+
+# --hints--
+
+يجب عليك استخدام type selector واحد لكل العناصر الثلاثة، `h1, h2, p`. تأكد من استخدام هذا الترتيب.
+
+```js
+const hasSelector = new __helpers.CSSHelp(document).getStyle('h1, h2, p');
+assert(hasSelector);
+```
+
+يجب أن يكون لديك منتقي (selector) واحد فقط في عنصر `style` الخاص بك.
+
+```js
+const selectors = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.selectorText)
+assert(selectors.length === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cafe Menu</title>
+--fcc-editable-region--
+    <style>
+      h1 {
+        text-align: center;
+      }
+      h2 {
+        text-align: center;
+      }
+      p {
+        text-align: center;
+      }
+    </style>
+--fcc-editable-region--
+  </head>
+  <body>
+    <main>
+      <h1>CAMPER CAFE</h1>
+      <p>Est. 2020</p>
+      <section>
+        <h2>Coffee</h2>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
new file mode 100644
index 00000000000..24dfb838073
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
@@ -0,0 +1,65 @@
+---
+id: 5f3477ae8466a9a3d2cc953c
+title: الخطوة 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+الآن بعد أن أصبح لديك CSS في ملف `styles.css`، قم بإزالة عنصر `style` وجميع محتوياته. بمجرد إزالته، سينتقل النص الذي تم توسيطه مرة أخرى إلى اليسار.
+
+# --hints--
+
+يجب ألا يكون لديك أي tag (علامة) `style` في الكود الخاص بك.
+
+```js
+assert(!code.match(/style/i));
+```
+
+يجب ألا يكون لديك أي محددات CSS في مِلَفّ HTML الخاص بك.
+
+```js
+(getUserInput) => {
+  const html = getUserInput('editableContents');
+  assert(!html.includes('style'));
+  assert(!html.includes('text-align'));
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="utf-8" />
+    <title>Cafe Menu</title>
+    <style>
+      h1, h2, p {
+        text-align: center;
+      }
+    </style>
+  </head>
+--fcc-editable-region--
+  <body>
+    <main>
+      <h1>CAMPER CAFE</h1>
+      <p>Est. 2020</p>
+      <section>
+        <h2>Coffee</h2>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+h1, h2, p {
+  text-align: center;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
new file mode 100644
index 00000000000..fd3c192eca9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
@@ -0,0 +1,92 @@
+---
+id: 5f3477ae9675db8bb7655b30
+title: الخطوة 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+في الخطوة السابقة، استخدمت <dfn>type selector</dfn> لتصميم عنصر `h1`. أوضع عناصر `h2` و `p` في المنتصف, عن طريق إضافة منتقي type جديد لكل عنصر في عنصر `style`.
+
+# --hints--
+
+لا يجب عليك تغيير عنصر `h1` الحالي.
+
+```js
+const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
+assert(hasH1);
+```
+
+يجب عليك إلا تضيف علامة `style` جديدة. أضف قواعد CSS الجديدة إلى علامة `style`.
+
+```js
+const hasManyStyleTags = document.querySelectorAll('style').length > 1;
+assert(!hasManyStyleTags);
+```
+
+يجب عليك إضافة منتقي `h2` جديد.
+
+```js
+const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
+assert(hasH2);
+```
+
+يجب عليك إضافة منتقي `p` جديد.
+
+```js
+const hasP = new __helpers.CSSHelp(document).getStyle('p');
+assert(hasP);
+```
+
+يجب أن يحتوي عنصرك `h1` على خاصية `text-align` بقيمة `center`.
+
+```js
+const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
+assert(h1TextAlign === 'center');
+```
+
+يجب أن يحتوي عنصرك `h2` على خاصية `text-align` بقيمة `center`.
+
+```js
+const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align');
+assert(h2TextAlign === 'center');
+```
+
+يجب أن يحتوي عنصرك `p` على خاصية `text-align` بقيمة `center`.
+
+```js
+const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align');
+assert(pTextAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cafe Menu</title>
+--fcc-editable-region--
+    <style>
+      h1 {
+        text-align: center;
+      }
+    </style>
+--fcc-editable-region--
+  </head>
+  <body>
+    <main>
+      <h1>CAMPER CAFE</h1>
+      <p>Est. 2020</p>
+      <section>
+        <h2>Coffee</h2>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
new file mode 100644
index 00000000000..a356caaf3ca
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
@@ -0,0 +1,73 @@
+---
+id: 5f3477aefa51bfc29327200b
+title: الخطوة 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+لقد قمت بتصميم ثلاثة عناصر عن طريق كتابة CSS داخل (tags) علامات `style`. هذا يعمل، ولكن بما أنه سيكون هناك الكثير من الأنماط الأخرى، من الأفضل وضع جميع الأنماط في ملف منفصل وربطها به.
+
+لقد قمنا بإنشاء ملف `styles.css` منفصل لك وقمنا بتغيير طريقة عرض المحرر إلى ذلك الملف. يمكنك التغيير بين الملفات من علامات التبويب في الجزء العلوي من المحرر.
+
+ابدأ بإعادة كتابة الأنماط التي أنشأتها في ملف `styles.css`. تأكد من استبعاد علامات الفتح و الإغلاق للـ `style`.
+
+# --hints--
+
+ملف `styles.css` الخاص بك يجب أن يحتوي على `h1, h2, p` كـ type selectors.
+
+```js
+(getUserInput) => {
+  assert(getUserInput('editableContents').replace(/[\s\n]*/g, "").match(/(h1|h2|p),(h1|h2|p),(h1|h2|p){/));
+}
+```
+
+يجب أن يقوم المنتقي الخاص بك بتعيين خاصية `text-align` إلى `center`.
+
+```js
+(getUserInput) => {
+  assert(getUserInput('editableContents').match(/text-align:\s*center;?/));
+}
+```
+
+يجب ألا يحتوي الكود الخاص بك على وسوم `<style>`.
+
+```js
+  assert.isFalse(/<\/html>(\n|.)*<\/?\s*style\s*>/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <title>Cafe Menu</title>
+    <style>
+      h1, h2, p {
+        text-align: center;
+      }
+    </style>
+  </head>
+  <body>
+    <main>
+      <h1>CAMPER CAFE</h1>
+      <p>Est. 2020</p>
+      <section>
+        <h2>Coffee</h2>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
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
new file mode 100644
index 00000000000..a50cc8af454
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb2e27333b1ab2b955.md
@@ -0,0 +1,86 @@
+---
+id: 5f3477cb2e27333b1ab2b955
+title: الخطوة 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+الآن تحتاج إلى ربط ملف `styles.css` حتى يتم تطبيق الأنماط مرة أخرى. أدخل عنصر `link` ذاتي الأغلاق في عنصر `head`. اعطيها سمة `rel` بقيمة `stylesheet` و `href` بقيمة `styles.css`.
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على عنصر `link`.
+
+```js
+const link = document.querySelector('link');
+assert(link);
+```
+
+لا يجب عليك تغيير عنصر `head` الحالي. تأكد من أنك لم تقم بحذف علامة الإغلاق (closing tag).
+
+```js
+assert($('head').length === 1);
+```
+
+الكود الخاص بك يجب أن يحتوي على عنصر `link` مغلق ذاتيا.
+
+```js
+const link = document.querySelectorAll('link');
+assert(link.length === 1);
+```
+
+يجب أن يكون عنصر `link` الخاص بك داخل عنصر `head` الخاص بك.
+
+```js
+const link = document.querySelector('head > link');
+assert(link);
+```
+
+يجب أن يكون عنصر `link` الخاص بك على سمة `rel` بقيمة `stylesheet`.
+
+```js
+const link = document.querySelector('link')
+const rel = link.getAttribute('rel')
+assert(rel == `stylesheet`)
+```
+
+عنصر `link` الخاص بك يجب أن يحتوي على سمة `href` بقيمة `styles.css`.
+
+```js
+const link = document.querySelector('link')
+assert(link.dataset.href == 'styles.css')
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="utf-8" />
+    <title>Cafe Menu</title>
+  </head>
+--fcc-editable-region--
+  <body>
+    <main>
+      <h1>CAMPER CAFE</h1>
+      <p>Est. 2020</p>
+      <section>
+        <h2>Coffee</h2>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+h1, h2, p {
+  text-align: center;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
new file mode 100644
index 00000000000..6081d1c6969
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
@@ -0,0 +1,68 @@
+---
+id: 5f3477cb303c5cb61b43aa9b
+title: الخطوة 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+يتم توسيط النص مرة أخرى بحيث يعمل الرابط إلى مِلَفّ CSS. أضف تصميم آخر إلى المِلَفّ الذي يغير خاصية `background-color` إلى `brown` لعنصر `body`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `body`.
+
+```js
+const hasBody = new __helpers.CSSHelp(document).getStyle('body');
+assert(hasBody);
+```
+
+يجب عليك تعيين خاصية `background-color` إلى `brown`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown');
+assert(hasBackground);
+```
+
+يجب أن يحتوي عنصر `body` الخاص بك على خلفية `brown`.
+
+```js
+const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
+assert(bodyBackground === 'brown');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <main>
+      <h1>CAMPER CAFE</h1>
+      <p>Est. 2020</p>
+      <section>
+        <h2>Coffee</h2>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+h1, h2, p {
+  text-align: center;
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
new file mode 100644
index 00000000000..c9515cf3164
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
@@ -0,0 +1,70 @@
+---
+id: 5f3477cbcb6ba47918c1da92
+title: الخطوة 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+لكي يبدو تصميم الصفحة مشابه على الهاتف المحمول كما هو الحال على حاسوب مكتبي أو حاسوب محمول، تحتاج إلى إضافة عنصر `meta` مع سمة `content` خاصة.
+
+يضاف ما يلي ضمن عنصر `head`:
+
+```html
+<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+```
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على عنصرين `meta`.
+
+```js
+assert(code.match(/<meta.*?\/?>/g).length === 2);
+```
+
+يجب أن يحتوي عنصر `meta` الخاص بك على سمة `name` بقيمة `viewport`.
+
+```js
+const meta = $('meta');
+assert(meta[0].outerHTML.match(/name=('|")viewport\1/) || meta[1].outerHTML.match(/name=('|")viewport\1/));
+```
+
+يجب أن يحتوي عنصر `meta` الخاص بك على `content` بقيمة `width=device-width, initial-scale=1.0`.
+
+```js
+const meta = $('meta');
+assert(meta[0].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/) || meta[1].outerHTML.match(/content=('|")width=device-width, initial-scale=1.0\1/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="utf-8" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+--fcc-editable-region--
+  <body>
+    <main>
+      <h1>CAMPER CAFE</h1>
+      <p>Est. 2020</p>
+      <section>
+        <h2>Coffee</h2>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+h1, h2, p {
+  text-align: center;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
new file mode 100644
index 00000000000..4fd5550a5e0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
@@ -0,0 +1,62 @@
+---
+id: 5f34a1fd611d003edeafd681
+title: الخطوة 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+هذه الخلفية البنيّة تجعل من الصعب قراءة النص. قم بتغيير لون خلفية العنصر `body` ليكون `burlywood` حتي يكون لديه لون معين ولكن لا يزال بإمكانك قراءة النص.
+
+# --hints--
+
+يجب عليك تعيين خاصية `background-color` إلى `burlywood`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
+assert(hasBackground);
+```
+
+يجب أن يحتوي عنصر `body` الخاص بك على خلفية `burlywood`.
+
+```js
+const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
+assert(bodyBackground === 'burlywood');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <main>
+      <h1>CAMPER CAFE</h1>
+      <p>Est. 2020</p>
+      <section>
+        <h2>Coffee</h2>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background-color: brown;
+}
+--fcc-editable-region--
+h1, h2, p {
+  text-align: center;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
new file mode 100644
index 00000000000..24d79f2c932
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -0,0 +1,72 @@
+---
+id: 5f356ed60785e1f3e9850b6e
+title: الخطوة 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+من السهل الآن ملاحظة أن النص تم توسيطه داخل عنصر `div`. حاليا، يتم تحديد عرض عنصر `div` بالبكسل (`px`). غيّر قيمة الخاصية `width` إلى `80%`، لجعلها 80% من عرض العنصر الحاوي لها (`body`).
+
+# --hints--
+
+يجب عليك تعيين خاصية `width` إلى `80%`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '80%');
+assert(hasWidth);
+```
+
+يجب ألا يكون لديك خاصية `width` بقيمة `300px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
+assert(!hasWidth);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div>
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  /*
+  background-color: burlywood;
+  */
+}
+
+h1, h2, p {
+  text-align: center;
+}
+--fcc-editable-region--
+div {
+  width: 300px;
+  background-color: burlywood;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
new file mode 100644
index 00000000000..5f4153cbb76
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -0,0 +1,77 @@
+---
+id: 5f356ed60a5decd94ab66986
+title: الخطوة 22
+challengeType: 0
+removeComments: false
+dashedName: step-22
+---
+
+# --description--
+
+التعليقات في CSS تبدو هكذا:
+
+```css
+/* comment here */
+```
+
+في الـ style sheet الخاصة بك، علق على السطر الذي يحتوي على الخاصية والقيمة `background-color`، حتى تتمكن من مشاهدة تأثير تغيير نمط (styling) عنصر `div` فقط. هذا سيجعل الخلفية بيضاء مرة أخرى.
+
+# --hints--
+
+يجب عليك تحويل سطر `background-color: burlywood;` ألى تعليق في CSS الخاص بك.
+
+```js
+assert(code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i));
+```
+
+
+يجب أن يكون `body` خلفية بيضاء.
+
+```js
+const bodyCSS = $('body').css('background-color');
+assert(bodyCSS === "rgba(0, 0, 0, 0)")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div>
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+--fcc-editable-region--
+  background-color: burlywood;
+--fcc-editable-region--
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+div {
+  width: 300px;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
new file mode 100644
index 00000000000..955e69fccf8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -0,0 +1,83 @@
+---
+id: 5f356ed6199b0cdef1d2be8f
+title: الخطوة 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+حتى الآن كنت تستخدم محددات النوع (type selectors) لتغيبر أنماط (style) العناصر. <dfn>class selector</dfn> يتم تعريفه باسم مع نقطة مباشرة أمامه، مثل هذا:
+
+```css
+.class-name {
+  styles
+}
+```
+
+قم بتغيير منتقي `div` الحالي إلى class selector عن طريق استبدال `div` بـ class يسمى `menu`.
+
+# --hints--
+
+يجب أن يكون لديك class selector يسمي `.menu`.
+
+```js
+const hasMenu = new __helpers.CSSHelp(document).getStyle('.menu');
+assert(hasMenu);
+```
+
+يجب ألا يكون لديك منتقي `div`.
+
+```js
+const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
+assert(!hasDiv);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div>
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  /*
+  background-color: burlywood;
+  */
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+--fcc-editable-region--
+div {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
new file mode 100644
index 00000000000..467d8f50c86
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -0,0 +1,74 @@
+---
+id: 5f356ed63c7807a4f1e6d054
+title: الخطوة 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+الهدف الآن هو جعل `div` لا يأخذ كامل عرض الصفحة. خاصية `width` في CSS مثالية لهذا. أنشئ منتقي نوع جديد (new type selector) في المِلَفّ الأسلوب الذي تعطي عنصر `div` العرض `300px`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي نوع (type selector) من `div`.
+
+```js
+const hasDiv = new __helpers.CSSHelp(document).getStyle('div');
+assert(hasDiv);
+```
+
+يجب عليك تعيين خاصية `width` إلى `300px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '300px');
+assert(hasWidth);
+```
+
+يجب أن يكون عرض `div` الخاص بك 300px.
+
+```js
+const divWidth = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('width');
+assert(divWidth === '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div>
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background-color: burlywood;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
new file mode 100644
index 00000000000..a17a2cc3292
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
@@ -0,0 +1,72 @@
+---
+id: 5f356ed63e0fa262326eef05
+title: الخطوة 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+الآن استخدم منتقي `div` الحالي لتعيين لون خلفية عنصر `div` ليكون `burlywood`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `background-color` إلى `burlywood`.
+
+```js
+const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'burlywood');
+assert(hasBackgroundColor);
+```
+
+يجب أن يكون `div` خلفية burlywood.
+
+```js
+const divBackground = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('background-color');
+assert(divBackground === 'burlywood');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div>
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  /*
+  background-color: burlywood;
+  */
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+--fcc-editable-region--
+div {
+  width: 300px;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
new file mode 100644
index 00000000000..71824e35726
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
@@ -0,0 +1,81 @@
+---
+id: 5f356ed656a336993abd9f7c
+title: الخطوة 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+بعد ذلك ، تريد توسيط `div` أفقيًا. يمكنك القيام بذلك عن طريق تعيين خواص `margin-left` و `margin-right` إلى `auto`. فكر في الـ margin كمساحة غير مرئية حول عنصر ما. باستخدام خاصيتي الـ margin هاتين ، قم بتوسيط عنصر `div` داخل عنصر `body`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `margin-left` إلى `auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-left'] === 'auto');
+assert(hasMargin);
+```
+
+يجب عليك تعيين خاصية `margin-right` إلى `auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-right'] === 'auto');
+assert(hasMargin);
+```
+
+يجب عليك تعيين خصائص `margin-left` و `margin-right` للـ `div` إلى `auto`.
+
+```js
+const divMarginRight = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-right');
+const divMarginLeft = new __helpers.CSSHelp(document).getStyle('div')?.getPropertyValue('margin-left');
+assert(divMarginRight === 'auto');
+assert(divMarginLeft === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div>
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  /*
+  background-color: burlywood;
+  */
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+--fcc-editable-region--
+div {
+  width: 80%;
+  background-color: burlywood;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
new file mode 100644
index 00000000000..fa1dff96480
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
@@ -0,0 +1,73 @@
+---
+id: 5f356ed69db0a491745e2bb6
+title: الخطوة 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+لتطبيق أسلوب الفئة على العنصر `div`، أضف سمة `class` إلى علامة المفتوحة (opening tag) لعنصر `div` وتعيين قيمته إلى `menu`.
+
+# --hints--
+
+يجب أن يستمر `div` في الظهور. تأكد من أنك لم تقم بتغيير وسم `<div>`.
+
+```js
+assert($('div').length === 1);
+```
+
+يجب أن يحتوي عنصر `div` الجديد على فئة `menu`.
+
+```js
+assert($('div').attr('class').includes('menu'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+--fcc-editable-region--
+    <div>
+--fcc-editable-region--
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  /*
+  background-color: burlywood;
+  */
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
new file mode 100644
index 00000000000..77e2ad30d71
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -0,0 +1,75 @@
+---
+id: 5f356ed6cf6eab5f15f5cfe6
+title: الخطوة 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+يُستخدم عنصر `div` بشكل أساسي لأغراض تخطيط التصميم بخلاف عناصر المحتوى الأخرى التي استخدمتها حتى الآن. أضف عنصر `div` داخل عنصر `body` ثم حرك جميع العناصر الأخرى داخل `div` الجديد.
+
+# --hints--
+
+يجب أن يكون لديك العلامة المفتوحة (opening tag) الآتية `<div>`.
+
+```js
+assert(code.match(/<div>/i));
+```
+
+يجب أن يكون لديك العلامة المغلقة (closing tag) الآتي `</div>`.
+
+```js
+assert(code.match(/<\/div>/i));
+```
+
+لا يجب عليك تغيير عنصر `body` الحالي. تأكد من أنك لم تقم بحذف علامة الإغلاق (closing tag).
+
+```js
+assert($('body').length === 1);
+```
+
+يجب أن تكون علامة `div` الخاصة بك متداخلة في `body`.
+
+```js
+const div = $('div')[0];
+assert(div.parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+--fcc-editable-region--
+  <body>
+    <main>
+      <h1>CAMPER CAFE</h1>
+      <p>Est. 2020</p>
+      <section>
+        <h2>Coffee</h2>
+      </section>
+    </main>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background-color: burlywood;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
new file mode 100644
index 00000000000..fb43ca76fac
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
@@ -0,0 +1,84 @@
+---
+id: 5f35e5c4321f818cdc4bed30
+title: الخطوة 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+يبدو الأمر جيدا. حان الوقت لبدء إضافة بعض عناصر القائمة. قم بإضافة عنصر `article` فارغ تحت عنوان `Coffee`. سوف تحتوي على نكهة (flavor) وسعر (price) لكل قهوة (coffee) تعرضها حالياً.
+
+# --hints--
+
+يجب أن يكون لديك العلامة المفتوحة الآتية `<article>`.
+
+```js
+assert(code.match(/<article>/i));
+```
+
+يجب أن يكون لديك العلامة المغلقة (closing tag) الآتي `</article>`.
+
+```js
+assert(code.match(/<\/article>/i));
+```
+
+لا يجب عليك تغيير عنصر `h2` الحالي.
+
+```js
+assert($('h2').length === 1);
+```
+
+عنصر `article` الخاص بك يجب أن يكون تحت عنصر `h2` الخاص بك.
+
+```js
+const article = $('article')[0];
+assert(article.previousElementSibling.tagName === 'H2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+--fcc-editable-region--
+          <h2>Coffee</h2>
+--fcc-editable-region--
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
new file mode 100644
index 00000000000..7d2221a584f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
@@ -0,0 +1,90 @@
+---
+id: 5f35e5c44359872a137bd98f
+title: الخطوة 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+بما أن المنتج الرئيسي للكافيه للبيع هو القهوة، يمكنك استخدام صورة لحبوب البن على خلفية الصفحة.
+
+احذف التعليق ومحتوياته داخل منتقي `body`. الآن أضف خاصية `background-image` وقم بتعيين قيمتها إلى `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`.
+
+# --hints--
+
+يجب عليك إزالة خاصية `background-color` التي تم تعليقها.
+
+```js
+assert(!code.match(/\/\*\s*background-color:\s*burlywood;?\s*\*\//i))
+```
+
+يجب ألا يكون في منتقي `body` الخاص بك أي تعليقات.
+
+```js
+assert(!code.match(/body\s*{\s*\/\*/i));
+```
+
+يجب عليك تعيين خاصية `background-image` إلى `url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg)`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-image'] === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`)
+assert(hasBackground)
+```
+
+يجب أن يحتوي عنصر `body` على صورة خلفية لحبوب القهوة.
+
+```js
+const bodyBackground = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-image');
+console.log(bodyBackground);
+assert(bodyBackground === `url("https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg")`);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  /*
+  background-color: burlywood;
+  */
+}
+--fcc-editable-region--
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
new file mode 100644
index 00000000000..5a95269381f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
@@ -0,0 +1,105 @@
+---
+id: 5f3c866d0fc037f7311b4ac8
+title: الخطوة 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+هذا اقرب، لكن الثمن لم يبقى على اليمين. هذا لأن عناصر `inline-block` تأخذ فقط عرض محتوياتها. لنشرها، أضف خاصية `width` إلى منتقيات class تسمي `flavor` و `price` التي تبلغ قيمتها `50%` لكل منهم.
+
+# --hints--
+
+يجب عليك تعيين خاصية `width` إلى `50%` في منتقي `.flavor` الخاص بك.
+
+```js
+const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
+assert(flavorWidth === '50%');
+```
+
+يجب عليك تعيين خاصية `width` إلى `50%` في منتقي `.price` الخاص بك.
+
+```js
+const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
+assert(priceWidth === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p>
+            <p class="price">3.00</p>
+          </article>
+          <article>
+            <p>Caramel Macchiato</p>
+            <p>3.75</p>
+          </article>
+          <article>
+            <p>Pumpkin Spice</p>
+            <p>3.50</p>
+          </article>
+          <article>
+            <p>Hazelnut</p>
+            <p>4.00</p>
+          </article>
+          <article>
+            <p>Mocha</p>
+            <p>4.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+--fcc-editable-region--
+.flavor {
+  text-align: left;
+}
+
+.price {
+  text-align: right;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
new file mode 100644
index 00000000000..4a2b6270335
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
@@ -0,0 +1,98 @@
+---
+id: 5f3c866d28d7ad0de6470505
+title: الخطوة 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+يكونا flavors و prices مكدسة بعضَها فوق بعض حاليًا ويتم توسيطها مع عناصر `p` التابعة لها. سيكون من اللطيف لو أن flavor كانت على اليسار و price على اليمين.
+
+أضف فئة (class) تسمى `flavor` لتغير `French Vanilla` في عنصر `p`.
+
+# --hints--
+
+يجب عليك إضافة class باسم `flavor` إلى عنصر `p` الخاص بك.
+
+```js
+assert(code.match(/<p\s*class=('|")flavor\1\s*>/i));
+```
+
+يجب أن يكون لديك عنصر واحد فقط بسمة class باسم `flavor`.
+
+```js
+assert($('.flavor').length === 1);
+```
+
+يجب أن يكون class مسمى `flavor` الخاص بك في عنصر `p` مع النص `French Vanilla`.
+
+```js
+assert($('.flavor')[0].innerText.match(/French Vanilla/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article>
+--fcc-editable-region--
+            <p>French Vanilla</p>
+            <p>3.00</p>
+--fcc-editable-region--
+          </article>
+          <article>
+            <p>Caramel Macchiato</p>
+            <p>3.75</p>
+          </article>
+          <article>
+            <p>Pumpkin Spice</p>
+            <p>3.50</p>
+          </article>
+          <article>
+            <p>Hazelnut</p>
+            <p>4.00</p>
+          </article>
+          <article>
+            <p>Mocha</p>
+            <p>4.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
new file mode 100644
index 00000000000..41e6987e90e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
@@ -0,0 +1,126 @@
+---
+id: 5f3c866d5414453fc2d7b480
+title: الخطوة 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+بدءًا من أسفل زوج coffee/price الحالي، أضف coffee و prices التالية باستخدام عناصر `article` مع عنصرين `p` متداخلين داخل كل منهما. كما كان الحال من قبل، يجب أن يحتوي نص العنصر `p` الأول على coffee flavor ويجب أن يحتوي نص العنصر `p` الثاني على price.
+
+```bash
+Caramel Macchiato 3.75
+Pumpkin Spice 3.50
+Hazelnut 4.00
+Mocha 4.50
+```
+
+# --hints--
+
+يجب أن يكون لديك خمسة عناصر `article`.
+
+```js
+assert($('article').length === 5);
+```
+
+كل عنصر `article` يجب أن يحتوي على عنصرين `p`.
+
+```js
+const articles = $('article');
+assert(articles[0].children.length === 2);
+assert(articles[1].children.length === 2);
+assert(articles[2].children.length === 2);
+assert(articles[3].children.length === 2);
+assert(articles[4].children.length === 2);
+```
+
+يجب أن يحتوي عنصر `article` الأول على عناصر `p` مع النص `French Vanilla` و `3.00`.
+
+```js
+const children = $('article')[0].children;
+assert(children[0].innerText.match(/French Vanilla/i));
+assert(children[1].innerText.match(/3\.00/i));
+```
+
+يجب أن يحتوي عنصر `article` الثاني على عناصر `p` مع النص `Caramel Macchiato` و `3.75`.
+
+```js
+const children = $('article')[1].children;
+assert(children[0].innerText.match(/Caramel Macchiato/i));
+assert(children[1].innerText.match(/3\.75/i));
+```
+
+يجب أن يحتوي عنصر `article` الثالث على عناصر `p` مع النص `Pumpkin Spice` و `3.50`.
+
+```js
+const children = $('article')[2].children;
+assert(children[0].innerText.match(/Pumpkin Spice/i));
+assert(children[1].innerText.match(/3\.50/i));
+```
+
+يجب أن يحتوي عنصر `article` الرابع على عناصر `p` مع النص `Hazelnut` و `4.00`.
+
+```js
+const children = $('article')[3].children;
+assert(children[0].innerText.match(/Hazelnut/i));
+assert(children[1].innerText.match(/4\.00/i));
+```
+
+يجب أن يحتوي عنصر `article` الخامس على عناصر `p` مع النص `Mocha` و `4.50`.
+
+```js
+const children = $('article')[4].children;
+assert(children[0].innerText.match(/Mocha/i));
+assert(children[1].innerText.match(/4\.50/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+--fcc-editable-region--
+          <article>
+            <p>French Vanilla</p>
+            <p>3.00</p>
+          </article>
+--fcc-editable-region--
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
new file mode 100644
index 00000000000..b87d50e92bd
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
@@ -0,0 +1,86 @@
+---
+id: 5f3c866daec9a49519871816
+title: الخطوة 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+عناصر `article` تحتوي عادة على عناصر متعددة تحتوي على معلومات ذات صلة. في هذه الحالة، سوف تحتوي على coffee flavor و price لتلك الـ flavor. ادمج عنصرين `p` داخل عنصر `article` الخاص بك. النص الأول يجب أن يكون `French Vanilla`، والنص الثاني `3.00`.
+
+# --hints--
+
+لا يجب عليك تغيير عنصر `article` الحالي.
+
+```js
+assert($('article').length === 1);
+```
+
+عنصر `article` الخاص بك يجب أن يحتوي على عنصرين `p`.
+
+```js
+assert($('article').children('p').length === 2);
+```
+
+يجب أن يحتوي العنصر `p` الاول على النص `French Vanilla`.
+
+```js
+const firstP = $('article').children('p')[0];
+assert(firstP.innerText.match(/French Vanilla/i));
+```
+
+يجب أن يحتوي العنصر `p` الثاني على النص `3.00`.
+
+```js
+const secondP = $('article').children('p')[1];
+assert(secondP.innerText.match(/3\.00/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+--fcc-editable-region--
+          <article>
+          </article>
+--fcc-editable-region--
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
new file mode 100644
index 00000000000..35ba230ed9b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
@@ -0,0 +1,115 @@
+---
+id: 5f3c866dbf362f99b9a0c6d0
+title: الخطوة 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+العناصر `p` متداخلة في عنصر `article` مع سمة class بقيمة `item`. يمكنك تصميم جميع عناصر `p` المتداخلة في أي مكان في العناصر مع class يسمى `item` مثل هذا:
+
+```css
+.item p { }
+```
+
+باستخدام المنتقي (selector) أعلاه، أضف خاصية `display` بقيمة `inline-block` بحيث تتصرف عناصر `p` مثل العناصر الـ inline.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.item p`.
+
+```js
+const hasItemP = new __helpers.CSSHelp(document).getStyle('.item p');
+assert(hasItemP);
+```
+
+يجب عليك تعيين خاصية `display` إلى `inline-block`.
+
+```js
+const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'inline-block');
+assert(hasDisplay);
+```
+
+يجب أن يقوم منتقي `.item p` بتعيين خاصية `display` إلى `inline-block`.
+
+```js
+const itemPDisplay = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('display');
+assert(itemPDisplay === 'inline-block');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p>
+            <p class="price">3.00</p>
+          </article>
+          <article>
+            <p>Caramel Macchiato</p>
+            <p>3.75</p>
+          </article>
+          <article>
+            <p>Pumpkin Spice</p>
+            <p>3.50</p>
+          </article>
+          <article>
+            <p>Hazelnut</p>
+            <p>4.00</p>
+          </article>
+          <article>
+            <p>Mocha</p>
+            <p>4.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.flavor {
+  text-align: left;
+}
+
+.price {
+  text-align: right;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
new file mode 100644
index 00000000000..f3f1925f8a5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
@@ -0,0 +1,109 @@
+---
+id: 5f3c866dd0d0275f01d4d847
+title: الخطوة 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+حسنا لم ينجح ذلك. صمم عناصر `p` لتكون `inline-block` ووضعها على سطر منفصل في الكود البرمجي يخلق مساحة إضافية ليمين عنصر `p` الأول، مما تسبب في انتقال الثاني إلى السطر التالي. إحدى طرق إصلاح هذا هو جعل عرض كل عنصر `p` أقل قليلاً من `50%`.
+
+قم بتغيير قيمة `width` إلى `49%` لكل class لمعرفة ما يحدث.
+
+# --hints--
+
+يجب عليك تعيين خاصية `width` إلى `49%` في منتقي `.flavor` الخاص بك.
+
+```js
+const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
+assert(flavorWidth === '49%');
+```
+
+يجب عليك تعيين خاصية `width` إلى `49%` في منتقي `.price` الخاص بك.
+
+```js
+const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
+assert(priceWidth === '49%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p>
+            <p class="price">3.00</p>
+          </article>
+          <article>
+            <p>Caramel Macchiato</p>
+            <p>3.75</p>
+          </article>
+          <article>
+            <p>Pumpkin Spice</p>
+            <p>3.50</p>
+          </article>
+          <article>
+            <p>Hazelnut</p>
+            <p>4.00</p>
+          </article>
+          <article>
+            <p>Mocha</p>
+            <p>4.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+--fcc-editable-region--
+.flavor {
+  text-align: left;
+  width: 50%;
+}
+
+.price {
+  text-align: right;
+  width: 50%;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
new file mode 100644
index 00000000000..c307be4357d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
@@ -0,0 +1,106 @@
+---
+id: 5f3c866de7a5b784048f94b1
+title: الخطوة 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+هذا هو نوعا ما مما تريده، ولكن الآن سيكون من الجيد أن تكون flavor و price على نفس السطر. عناصر `p` هي <dfn>block-level</dfn>، لذا فهي تأخذ كامل عرض العنصر الأساسي (parent element).
+
+لجعلهم على نفس السطر، تحتاج إلى تطبيق بعض التصميمات على عناصر `p` ، لكي يتصرفون مثل العناصر الـ <dfn>inline</dfn>. أضف سمة `class` مع قيمة `item` إلى عنصر `article` الأول تحت عنوان `Coffee`.
+
+# --hints--
+
+يجب عليك إضافة class تسمى `item` إلى عنصر `article` الخاص بك.
+
+```js
+assert(code.match(/<article\s*class=('|")item\1\s*>/i))
+```
+
+يجب أن يكون لديك عنصر بسمة class تسمى `item` واحد فقط.
+
+```js
+assert($('.item').length === 1);
+```
+
+يجب أن يحتوي العنصر الأول من `article` على class تسمى `item`.
+
+```js
+assert($('article')[0].className === 'item');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+--fcc-editable-region--
+          <h2>Coffee</h2>
+          <article>
+            <p class="flavor">French Vanilla</p>
+            <p class="price">3.00</p>
+          </article>
+--fcc-editable-region--
+          <article>
+            <p>Caramel Macchiato</p>
+            <p>3.75</p>
+          </article>
+          <article>
+            <p>Pumpkin Spice</p>
+            <p>3.50</p>
+          </article>
+          <article>
+            <p>Hazelnut</p>
+            <p>4.00</p>
+          </article>
+          <article>
+            <p>Mocha</p>
+            <p>4.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.flavor {
+  text-align: left;
+}
+
+.price {
+  text-align: right;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
new file mode 100644
index 00000000000..30395492312
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
@@ -0,0 +1,106 @@
+---
+id: 5f3cade94c6576e7f7b7953f
+title: الخطوة 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+الآن امضي قدما و قم بتغيير عرض class الـ `flavor` و `price` ليصل إلى `50%` مرة أخرى.
+
+# --hints--
+
+يجب عليك تعيين خاصية `width` إلى `50%` في منتقي `.flavor` الخاص بك.
+
+```js
+const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
+assert(flavorWidth === '50%');
+```
+
+يجب عليك تعيين خاصية `width` إلى `50%` في منتقي `.price` الخاص بك.
+
+```js
+const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
+assert(priceWidth === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article>
+            <p>Caramel Macchiato</p>
+            <p>3.75</p>
+          </article>
+          <article>
+            <p>Pumpkin Spice</p>
+            <p>3.50</p>
+          </article>
+          <article>
+            <p>Hazelnut</p>
+            <p>4.00</p>
+          </article>
+          <article>
+            <p>Mocha</p>
+            <p>4.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+--fcc-editable-region--
+.flavor {
+  text-align: left;
+  width: 49%;
+}
+
+.price {
+  text-align: right;
+  width: 49%;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
new file mode 100644
index 00000000000..dc403e37e28
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
@@ -0,0 +1,117 @@
+---
+id: 5f3cade9993019e26313fa8e
+title: الخطوة 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+الآن بعد أن علمت أنها تعمل، يمكنك تغيير العناصر المتبقية من `article` و `p` لتطابق المجموعة الأولى. ابدأ بإضافة class يسمي `item` إلى عناصر `article` الأخرى.
+
+# --hints--
+
+يجب أن يكون لديك خمسة عناصر `article` فقط.
+
+```js
+assert($('article').length === 5);
+```
+
+يجب أن يكون لديك فقط خمسة عناصر `.item`.
+
+```js
+assert($('.item').length === 5);
+```
+
+يجب أن تكون عناصر `.item` الخاصة بك هي عناصر `article`.
+
+
+```js
+const articles = $('article');
+const items = $('.item');
+assert(articles[0] === items[0]);
+assert(articles[1] === items[1]);
+assert(articles[2] === items[2]);
+assert(articles[3] === items[3]);
+assert(articles[4] === items[4]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+--fcc-editable-region--
+          <article>
+            <p>Caramel Macchiato</p>
+            <p>3.75</p>
+          </article>
+          <article>
+            <p>Pumpkin Spice</p>
+            <p>3.50</p>
+          </article>
+          <article>
+            <p>Hazelnut</p>
+            <p>4.00</p>
+          </article>
+          <article>
+            <p>Mocha</p>
+            <p>4.50</p>
+          </article>
+--fcc-editable-region--
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor {
+  text-align: left;
+  width: 50%;
+}
+
+.price {
+  text-align: right;
+  width: 50%;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
new file mode 100644
index 00000000000..2efff9d2d4a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
@@ -0,0 +1,112 @@
+---
+id: 5f3cade99dda4e6071a85dfd
+title: الخطوة 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+سوف تعود إلى تصميم القائمة بعد بضع خطوات، ولكن الآن، أضف عنصر `section` ثان تحت الأول لعرض الحَلْوَيَات (desserts) المقدمة من المقهى (cafe).
+
+# --hints--
+
+يجب أن يكون لديك علامة مفتوحة (opening tag) الآتي `section`.
+
+```js
+assert(code.match(/<section>/ig).length === 2);
+```
+
+يجب أن يكون لديك علامة مغلقة (closing tag) الآتي `section`.
+
+```js
+assert(code.match(/<\/section>/ig).length === 2);
+```
+
+لا يجب عليك تغيير عنصر `main` الحالي.
+
+```js
+assert($('main').length === 1);
+```
+
+عنصر `section` الجديد الخاص بك يجب أن يكون متداخلا في عنصر `main`.
+
+```js
+assert($('main').children('section').length === 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+--fcc-editable-region--
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+--fcc-editable-region--
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
new file mode 100644
index 00000000000..22fe67af236
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
@@ -0,0 +1,101 @@
+---
+id: 5f3cade9fa77275d9f4efe62
+title: الخطوة 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+قد نجح ذلك، ولكن لا يزال هناك مسافة فارغة صغير على يمين price.
+
+يمكنك الاستمرار في تجربة نسب مئوية مختلفة للعرض. وبدلا من ذلك، استخدم مفتاح space على لوحة المفاتيح لنقل عنصر `p` مع الفئة `price` بجانب عنصر `p` مع الفئة `flavor` بحيث تكون على نفس السطر في المحرر. تيقن من عدم وجود مسافة.
+
+# --hints--
+
+يجب ألا يكون للعناصر `p` الخاصة بك أي مساحة بينها.
+
+```js
+assert(code.match(/Vanilla<\/p><p/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+--fcc-editable-region--
+            <p class="flavor">French Vanilla</p>
+            <p class="price">3.00</p>
+--fcc-editable-region--
+          </article>
+          <article>
+            <p>Caramel Macchiato</p>
+            <p>3.75</p>
+          </article>
+          <article>
+            <p>Pumpkin Spice</p>
+            <p>3.50</p>
+          </article>
+          <article>
+            <p>Hazelnut</p>
+            <p>4.00</p>
+          </article>
+          <article>
+            <p>Mocha</p>
+            <p>4.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor {
+  text-align: left;
+  width: 49%;
+}
+
+.price {
+  text-align: right;
+  width: 49%;
+}
+```
+
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
new file mode 100644
index 00000000000..ba2922e9dbc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e01f288a026d709587.md
@@ -0,0 +1,156 @@
+---
+id: 5f3ef6e01f288a026d709587
+title: الخطوة 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+يمكنك استخدام عنصر `hr` لعرض مقطع بين أجزاء من محتوى مختلف.
+
+أولاً، أضف عنصر `hr` بين عنصر `p` مع فئة (class) تسمى `established` و أول عنصر `section`. لاحظ أن عناصر `hr` مغلقة ذاتيا (self closing).
+
+# --hints--
+
+يجب عليك إضافة عنصر `hr`. عناصر `hr` مغلقة ذاتيا.
+
+```js
+assert(code.match(/<hr\s?\/?>/i));
+assert(!code.match(/<\/hr>/i));
+```
+
+لا تغيير عنصرك `p` الموجود مع فئة (class) تسمى `established`.
+
+```js
+assert($('p.established').length === 1);
+```
+
+لا يجب عليك تغيير عنصر `main` الحالي.
+
+```js
+assert($('main').length === 1);
+```
+
+يجب أن يكون عنصرك `hr` بين عنصرك `p` وعنصرك `section`.
+
+```js
+assert($('hr')[0].previousElementSibling.tagName === 'P');
+assert($('hr')[0].nextElementSibling.tagName === 'SECTION');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+--fcc-editable-region--
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+--fcc-editable-region--
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
new file mode 100644
index 00000000000..4bb22c6dc2f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
@@ -0,0 +1,120 @@
+---
+id: 5f3ef6e03d719d5ac4738993
+title: الخطوة 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+العرض الحالي للقائمة سيستغرق دائماً 80% من عرض عنصر `body`. وعلى شاشة عريضة جدا، يبدو coffee و dessert بعيدين عن أسعارهما.
+
+أضف خاصية `max-width` إلى class تسمى `menu` بقيمة `500px` لمنعها من النمو على نطاق واسع.
+
+# --hints--
+
+يجب عليك تعيين خاصية `max-width` إلى `500px`.
+
+```js
+const hasMaxWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['max-width'] === '500px');
+assert(hasMaxWidth);
+```
+
+يجب أن يكون للعنصر `.menu` الخاص بك `max-width` بقيمة `500px`.
+
+```js
+const menuMaxWidth = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('max-width');
+assert(menuMaxWidth === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+--fcc-editable-region--
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+}
+--fcc-editable-region--
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md
new file mode 100644
index 00000000000..13b0d0fd8d1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md
@@ -0,0 +1,145 @@
+---
+id: 5f3ef6e04559b939080db057
+title: الخطوة 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+بما أن جميع الجوانب الأربعة للقائمة لديها نفس المسافات الداخلية، قم بالمضي قدما وحذف الخواص الأربعة واستخدام خاصية `padding` واحدة بالقيمة `20px`.
+
+# --hints--
+
+يجب عليك إزالة خاصية `padding-left`.
+
+```js
+assert(!code.match(/padding-left/i));
+```
+
+يجب عليك إزالة خاصية `padding-right`.
+
+```js
+assert(!code.match(/padding-right/i));
+```
+
+يجب عليك إزالة خاصية `padding-top`.
+
+```js
+assert(!code.match(/padding-top/i));
+```
+
+يجب عليك إزالة خاصية `padding-bottom`.
+
+```js
+assert(!code.match(/padding-bottom/i));
+```
+
+يجب عليك تعيين خاصية `padding` إلى `20px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding'] === '20px');
+assert(hasPadding);
+```
+
+يجب أن يكون للعنصر `.menu` الخاص بك `padding` بقيمة `20px`.
+
+```js
+const menuPadding = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding');
+assert(menuPadding === '20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+--fcc-editable-region--
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 20px;
+  padding-bottom: 20px;
+}
+--fcc-editable-region--
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
new file mode 100644
index 00000000000..b2883954a55
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
@@ -0,0 +1,142 @@
+---
+id: 5f3ef6e050279c7a4a7101d3
+title: الخطوة 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+هذا يبدو أفضل. الآن حاول إضافة `20px` مطابق إلى padding في الجزء العلوي والأسفل من القائمة.
+
+# --hints--
+
+لا يجب عليك إزالة خواص `padding-left` أو `padding-right`.
+
+```js
+const paddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left');
+assert(paddingLeft === '20px');
+const paddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right');
+assert(paddingRight === '20px');
+```
+
+يجب عليك تعيين خاصية `padding-top` إلى `20px`.
+
+```js
+const hasPaddingTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px');
+assert(hasPaddingTop);
+```
+
+يجب عليك تعيين خاصية `padding-bottom` إلى `20px`.
+
+```js
+const hasPaddingBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-top'] === '20px');
+assert(hasPaddingBottom);
+```
+
+يجب أن يكون للعنصر `.menu` الخاص بك `padding-top` بقيمة `20px`.
+
+```js
+const menuPaddingTop = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-top');
+assert(menuPaddingTop === '20px');
+```
+
+يجب أن يكون للعنصر `.menu` الخاص بك `padding-bottom` بقيمة `20px`.
+
+```js
+const menuPaddingBottom = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-bottom');
+assert(menuPaddingBottom === '20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+--fcc-editable-region--
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: 20px;
+  padding-right: 20px;
+}
+--fcc-editable-region--
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md
new file mode 100644
index 00000000000..e9428a35fd4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md
@@ -0,0 +1,119 @@
+---
+id: 5f3ef6e05473f91f948724ab
+title: الخطوة 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+يمكنك تغيير `font-family` للنص، لجعله يبدو مختلفا عن الخط الافتراضي للمتصفح الخاص بك. كل متصفح لديه بعض الخطوط الشائعة المتاحة له.
+
+قم بتغيير كل النصوص في `body`، عن طريق إضافة خاصية `font-family` بقيمة `sans-serif`. هذا خط شائع إلى حد ما ويمكن قراءته بشكل جيد.
+
+# --hints--
+
+يجب عليك تعيين خاصية `font-family` إلى `sans-serif`.
+
+```js
+const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'sans-serif');
+```
+
+`body` يجب أن يحتوي على `font-family` بقيمة `sans-serif`.
+
+```js
+const bodyFontFamily = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family');
+assert(bodyFontFamily === 'sans-serif');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+--fcc-editable-region--
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
new file mode 100644
index 00000000000..62388a25a42
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
@@ -0,0 +1,136 @@
+---
+id: 5f3ef6e056bdde6ae6892ba2
+title: الخطوة 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+من الممل بعض الشيء أن يكون لكل النصوص نفس `font-family`. يزال يمكنك الحصول على أغلبية النص `sans-serif` وجعل العناصر `h1` و `h2` مختلفة باستخدام منتقي (selector) مختلف.
+
+صمم عناصر `h1` و `h2` بحيث يستخدم نص هذه العناصر فقط خط `Impact`.
+
+# --hints--
+
+يجب استخدام منتقي `h1, h2`.
+
+```js
+const h1h2Selector = new __helpers.CSSHelp(document).getStyle('h1, h2');
+assert(h1h2Selector);
+```
+
+يجب عليك تعيين `font-family` إلى `Impact`.
+
+```js
+const hasFontFamily = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-family'] === 'Impact');
+assert(hasFontFamily);
+```
+
+يجب أن يكون للعنصر `h1` الخاص بك `font-family` بقيمة `Impact`.
+
+```js
+assert($('h1').css('font-family').match(/impact/i));
+```
+
+يجب أن يكون للعنصر `h2` الخاص بك `font-family` بقيمة `Impact`.
+
+```js
+assert($('h2').css('font-family').match(/impact/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md
new file mode 100644
index 00000000000..3fc36c63cd9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md
@@ -0,0 +1,133 @@
+---
+id: 5f3ef6e06d34faac0447fc44
+title: الخطوة 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+اجعل النص `Est. 2020` بحروف مائلة (italicized) عن طريق إنشاء منتقي class يسمي `established` وإعطائه خاصية `font-style` بالقيمة `italic`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.established`.
+
+```js
+const hasEstablished = new __helpers.CSSHelp(document).getStyle('.established');
+assert(hasEstablished);
+```
+
+يجب عليك تعيين خاصية `font-style` إلى `italic`.
+
+```js
+const hasFontStyle = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-style'] === 'italic');
+assert(hasFontStyle);
+```
+
+يجب أن يقوم منتقي `.established` الخاص بك بتعيين خاصية `font-style` إلى `italic`.
+
+```js
+const establishedFontStyle = new __helpers.CSSHelp(document).getStyle('.established')?.getPropertyValue('font-style');
+assert(establishedFontStyle === 'italic');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md
new file mode 100644
index 00000000000..51695f822cb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md
@@ -0,0 +1,147 @@
+---
+id: 5f3ef6e07276f782bb46b93d
+title: الخطوة 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+قم بإضافة عنصر `footer` تحت عنصر `main`، حيث يمكنك إضافة بعض المعلومات الإضافية.
+
+# --hints--
+
+يجب أن يكون لديك العلامة المفتوحة (opening tag) الآتي `<footer>`.
+
+```js
+assert(code.match(/<footer>/i));
+```
+
+يجب أن يكون لديك العلامة المغلقة (closing tag) الآتي `</footer>`.
+
+```js
+assert(code.match(/<\/footer>/i));
+```
+
+لا يجب عليك تعديل عنصر `main` الحالي.
+
+```js
+assert($('main').length === 1);
+```
+
+عنصر `footer` الخاص بك يجب أن يكون تحت عنصر `main` الخاص بك.
+
+```js
+const footer = $('footer')[0]
+assert(footer.previousElementSibling.tagName === 'MAIN');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+--fcc-editable-region--
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md
new file mode 100644
index 00000000000..6e2f8c085af
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md
@@ -0,0 +1,109 @@
+---
+id: 5f3ef6e0819d4f23ca7285e6
+title: الخطوة 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+قم بإضافة عنصر `article` فارغ تحت heading الـ `Desserts`. أعطه سمة `class` بقيمة `item`.
+
+# --hints--
+
+لا يجب عليك تغيير عنصر `h2` الحالي.
+
+```js
+assert($('h2').length === 2);
+```
+
+عنصر `article` الخاص بك يجب أن يكون تحت عنصر `h2` الخاص بك.
+
+```js
+assert($('section')[1].children[1].tagName === 'ARTICLE');
+```
+
+يجب أن يحتوي عنصر `article` الجديد على class الـ `item`.
+
+```js
+assert($('section')[1].children[1].className === 'item');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+--fcc-editable-region--
+          <h2>Desserts</h2>
+--fcc-editable-region--
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md
new file mode 100644
index 00000000000..408ef3b7ecd
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md
@@ -0,0 +1,132 @@
+---
+id: 5f3ef6e087d56ed3ffdc36be
+title: الخطوة 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+الآن قم بتطبيق class تسمى `established` على النص `Est. 2020`.
+
+# --hints--
+
+يجب عليك تعيين `class` عنصر `p` إلى `established`.
+
+```js
+assert(code.match(/<p class=('|")established\1>/i));
+```
+
+يجب أن تكون class مسمى `established` الخاص بك في العنصر الذي يحتوي النص `Est. 2020`.
+
+```js
+const established = $('.established');
+assert(established[0].innerText.match(/Est\.\s2020/i));
+```
+
+يجب أن يحتوي عنصر class مسمى `established` على نص مائل (italic).
+
+```js
+assert($('.established').css('font-style') === 'italic');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+--fcc-editable-region--
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+--fcc-editable-region--
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md
new file mode 100644
index 00000000000..7651c8ad5fb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md
@@ -0,0 +1,157 @@
+---
+id: 5f3ef6e0a81099d9a697b550
+title: الخطوة 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+في داخل `footer`، أضف عنصر `p`. بعد ذلك، قم بدمج عنصر الرابط (`a`) في `p` الذي يربط الي `https://www.freecodecamp.org` ولديه النص `Visit our website`.
+
+# --hints--
+
+لا يجب عليك تعديل عنصر `footer` الحالي.
+
+```js
+assert(document.querySelectorAll("footer").length === 1);
+```
+
+عنصرك الجديد `p` يجب أن يكون ملفوفا داخل عنصرك `footer`. يجب أن يكون عندك عنصر `p` واحد بالضبط.
+
+```js
+assert(document.querySelectorAll("footer > p").length === 1);
+assert(document.querySelectorAll("footer p").length === 1);
+```
+
+عنصرك الجديد `a` يجب أن يكون ملفوفا داخل عنصرك `p`. يجب أن يكون عندك عنصر `a` واحد بالضبط.
+
+```js
+assert(document.querySelectorAll("footer > p > a").length === 1);
+assert(document.querySelectorAll("footer a").length === 1);
+```
+
+يجب أن يحتوي عنصر `a` الجديد على نص `Visit our website`.
+
+```js
+assert(document.querySelector("footer > p > a")?.innerText === "Visit our website");
+```
+
+يجب ربط عنصر `a` الجديد الخاص بك بـ `https://www.freecodecamp.org`. تذكر أن عناصر `a` تستخدم خاصية `href` لإنشاء رابط.
+
+```js
+assert(document.querySelector("footer > p > a")?.href === "https://www.freecodecamp.org/");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+--fcc-editable-region--
+      <footer>
+
+      </footer>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md
new file mode 100644
index 00000000000..9d7e2022924
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md
@@ -0,0 +1,139 @@
+---
+id: 5f3ef6e0b431cc215bb16f55
+title: الخطوة 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+أضف عنصرا `p` ثانيا أسفل العنصر الذي يحتوي علي الرابط وأعطيه النص `123 Free Code Camp Drive`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `p` ثان إلى عنصر `footer` الخاص بك.
+
+```js
+assert($('footer').children('p').length === 2);
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على نص `123 Free Code Camp Drive`. تأكد من أن العنصر الجديد يأتي بعد عنصرك الحالي.
+
+```js
+assert($('footer').children('p').last().text().match(/123 Free Code Camp Drive/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <footer>
+--fcc-editable-region--
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+--fcc-editable-region--
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md
new file mode 100644
index 00000000000..35f8a9ee40b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md
@@ -0,0 +1,108 @@
+---
+id: 5f3ef6e0e0c3feaebcf647ad
+title: الخطوة 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+أضف عنصر `h2` في section الجديد وقم بإعطائه نص `Desserts`.
+
+# --hints--
+
+لا يجب عليك تغيير عنصر `section` الحالي.
+
+```js
+assert($('section').length === 2);
+```
+
+يجب عليك دمج عنصر `h2` واحد داخل ثاني عنصر `section`.
+
+```js
+assert($('section')[1].children[0].tagName === 'H2');
+```
+
+يجب أن يحتوي العنصر `h2` الجديد على النص `Desserts`.
+
+```js
+assert($('h2')[1].innerText.match(/Desserts/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+--fcc-editable-region--
+        <section>
+        </section>
+--fcc-editable-region--
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md
new file mode 100644
index 00000000000..d7eea7dda26
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md
@@ -0,0 +1,119 @@
+---
+id: 5f3ef6e0e9629bad967cd71e
+title: الخطوة 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+يمكنك إضافة قيمة <dfn>احتياطية</dfn> لمجموعة الخطوط (font-family) عن طريق إضافة اسم خط آخر مفصولاً بفاصلة. يتم استخدام الخطوط الاحتياطية في الحالات التي لا يتم فيها العثور على الخط الأول أو في حال عدم توافره.
+
+أضف الخط احتياطي `serif` بعد خط `Impact`.
+
+# --hints--
+
+يجب عليك إضافة `serif` كنسخة احتياطية للخط `Impact`.
+
+```js
+const fontFamily = new __helpers.CSSHelp(document).getStyle('h1, h2')?.getPropertyValue('font-family');
+assert(fontFamily === 'Impact, serif');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+--fcc-editable-region--
+h1, h2 {
+  font-family: Impact;
+}
+--fcc-editable-region--
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md
new file mode 100644
index 00000000000..801c301c87b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md
@@ -0,0 +1,133 @@
+---
+id: 5f3ef6e0eaa7da26e3d34d78
+title: الخطوة 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+يمكنك إعطاء قائمتك بعض المساحة بين المحتوى والجانبين مع خصائص `padding` المختلفة.
+
+امنح class تسمى `menu` خاصية `padding-left` و `padding-right` بنفس القيمة `20px`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `padding-left` إلى `20px`.
+
+```js
+const hasPaddingLeft = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-left'] === '20px');
+assert(hasPaddingLeft);
+```
+
+يجب عليك تعيين خاصية `padding-right` إلى `20px`.
+
+```js
+const hasPaddingRight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['padding-right'] === '20px');
+assert(hasPaddingRight);
+```
+
+يجب أن يكون للعنصر `.menu` الخاص بك `padding-left` بقيمة `20px`.
+
+```js
+const menuPaddingLeft = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-left');
+assert(menuPaddingLeft === '20px');
+```
+
+يجب أن يكون للعنصر `.menu` الخاص بك `padding-right` بقيمة `20px`.
+
+```js
+const menuPaddingRight = new __helpers.CSSHelp(document).getStyle('.menu')?.getPropertyValue('padding-right');
+assert(menuPaddingRight === '20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+--fcc-editable-region--
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+--fcc-editable-region--
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
new file mode 100644
index 00000000000..0fa7c6772bf
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
@@ -0,0 +1,145 @@
+---
+id: 5f3ef6e0f8c230bdd2349716
+title: الخطوة 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+يتم تعيين طباعة (typography) عناصر الـ header (على سبيل المثال `h1` و `h2`) بواسطة القيم الافتراضية لمتصفحات المستخدمين.
+
+قم بإضافة نوعين جديدين (`h1` و `h2`). استخدم خاصية `font-size` لكليهما، ولكن استخدم قيمة `40px` لـ `h1` و `30px` لـ `h2`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `h1`.
+
+```js
+const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
+assert(hasH1);
+```
+
+يجب عليك استخدام منتقي `h2`.
+
+```js
+const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
+assert(hasH2);
+```
+
+يجب أن يكون للعنصر `h1` الخاص بك `font-size` بقيمة `40px`.
+
+```js
+const h1FontSize = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('font-size');
+assert(h1FontSize === '40px');
+```
+
+يجب أن يكون للعنصر `h2` الخاص بك `font-size` بقيمة `30px`.
+
+```js
+const h2FontSize = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('font-size');
+assert(h2FontSize === '30px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md
new file mode 100644
index 00000000000..92fdf7732c9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md
@@ -0,0 +1,154 @@
+---
+id: 5f3f26fa39591db45e5cd7a0
+title: الخطوة 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+الخصائص الافتراضية لعنصر `hr` سوف تجعله يظهر كخط رمادي رفيع. يمكنك تغيير ارتفاع الخط بتحديد قيمة لخاصية `height`.
+
+غير ارتفاع عنصر `hr` ليصبح `3px`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `hr`.
+
+```js
+const hasHr = new __helpers.CSSHelp(document).getStyle('hr');
+assert(hasHr);
+```
+
+يجب عليك تعيين خاصية `height` إلى `3px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '3px');
+assert(hasHeight);
+```
+
+يجب أن يكون ارتفاع عنصر `hr` الخاص بك `3px`.
+
+```js
+const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height');
+assert(hrHeight === '3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md
new file mode 100644
index 00000000000..e6807dacde3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md
@@ -0,0 +1,146 @@
+---
+id: 5f459225127805351a6ad057
+title: الخطوة 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+قم بتغيير لون الخلفية لعنصر `hr` إلى `brown` بحيث يتطابق مع لون حبوب القهوة.
+
+# --hints--
+
+يجب عليك تعيين خاصية `background-color` إلى `brown`.
+
+```js
+const hasBackgroundColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'brown');
+```
+
+يجب أن يكون للعنصر `hr` الخاص بك `background-color` بقيمة `brown`.
+
+```js
+const hrBackgroundColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('background-color');
+assert(hrBackgroundColor === 'brown');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+--fcc-editable-region--
+hr {
+  height: 3px;
+}
+--fcc-editable-region--
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md
new file mode 100644
index 00000000000..454a7f51f23
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md
@@ -0,0 +1,150 @@
+---
+id: 5f459a7ceb8b5c446656d88b
+title: الخطوة 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+لاحظ اللون الرمادي على طول حواف الخط. هذه الحواف معروفة باسم <dfn>borders</dfn>. كل جانب من العناصر يمكن أن يكون له لون مختلف أو يمكن أن تكون كلها متماثلة.
+
+اجعل جميع حواف العنصر `hr` نفس اللون كخلفيته باستخدام الخاصية `border-color`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `border-color` إلى `brown`.
+
+```js
+const hasBorderColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-color'] === 'brown');
+assert(hasBorderColor);
+```
+
+يجب أن يكون للعنصر `hr` الخاص بك `border-color` بقيمة `brown`.
+
+```js
+const hrBorderColor = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('border-color');
+assert(hrBorderColor === 'brown');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+--fcc-editable-region--
+hr {
+  height: 3px;
+  background-color: brown;
+}
+--fcc-editable-region--
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md
new file mode 100644
index 00000000000..cab025c109a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md
@@ -0,0 +1,151 @@
+---
+id: 5f459cf202c2a3472fae6a9f
+title: الخطوة 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+لاحظ كيف يبدو سمك الخط كبير؟ القيمة الافتراضية لخاصية اسمها `border-width` هي `1px` لجميع حواف عناصر `hr`. عن طريق تغيير الحدود (borders) إلى نفس لون الخلفية، الارتفاع الإجمالي للخط هو `5px` (زائد عرض `3px` الحدود العلوية وزائد عرض `1px` السفلي).
+
+غيّر خاصية `height` لعنصر `hr` إلى `2px`، بحيث يصبح الارتفاع الكلي له `4px`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `height` إلى `2px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '2px');
+assert(hasHeight);
+```
+
+يجب أن يكون للعنصر `hr` الخاص بك `height` بقيمة `2px`.
+
+```js
+const hrHeight = new __helpers.CSSHelp(document).getStyle('hr')?.getPropertyValue('height');
+assert(hrHeight === '2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+--fcc-editable-region--
+hr {
+  height: 3px;
+  background-color: brown;
+  border-color: brown;
+}
+--fcc-editable-region--
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md
new file mode 100644
index 00000000000..ada13e57864
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md
@@ -0,0 +1,148 @@
+---
+id: 5f459fd48bdc98491ca6d1a3
+title: الخطوة 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+امضي قدماً وأضف عنصر `hr` آخر بين عنصر `main` وعنصر `footer`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `hr` ثانٍ.
+
+```js
+assert($('hr').length === 2);
+```
+
+عنصر `hr` الجديد الخاص بك يجب أن يكون بين عنصر `main` وعنصر `footer`.
+
+```js
+assert($('hr')[1].previousElementSibling.tagName === 'MAIN');
+assert($('hr')[1].nextElementSibling.tagName === 'FOOTER');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+--fcc-editable-region--
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md
new file mode 100644
index 00000000000..0450328943d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md
@@ -0,0 +1,148 @@
+---
+id: 5f45a05977e2fa49d9119437
+title: الخطوة 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+لإنشاء مساحة أكثر قليلا حول القائمة، قم بإضافة `20px` من المساحة في داخل عنصر `body` باستخدام خاصية `padding`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `padding` إلى `20px`.
+
+```js
+assert(code.match(/padding:\s*20px;?/i));
+```
+
+يجب أن يكون للعنصر `body` الخاص بك `padding` بقيمة `20px`.
+
+```js
+const bodyPadding = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('padding');
+assert(bodyPadding === '20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr>
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+}
+--fcc-editable-region--
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md
new file mode 100644
index 00000000000..bd127e190f5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md
@@ -0,0 +1,174 @@
+---
+id: 5f45a276c093334f0f6e9df4
+title: الخطوة 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+بالتركيز على بنود القائمة وأسعارها، هناك فجوة كبيرة نسبيا بين كل سطر.
+
+استهدف جميع عناصر `p` المتداخلة في العناصر بـ `class` يسمي `item` وقم بتعيين top و bottom margin إلى `5px`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `margin-top` إلى `5px`.
+
+```js
+const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '5px');
+assert(hasMarginTop);
+```
+
+يجب عليك تعيين خاصية `margin-bottom` إلى `5px`.
+
+```js
+const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px');
+assert(hasMarginBottom);
+```
+
+يجب عليك استخدام منتقي `.item p` الحالي.
+
+```js
+const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p');
+assert(hasOneSelector.length === 1);
+```
+
+عناصر `p` الخاصة بك المتداخلة في `.item` يجب أن تحتوي على `margin-top` من `5px`.
+
+```js
+const itemPMarginTop = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-top');
+assert(itemPMarginTop === '5px');
+```
+
+عناصر `p` الخاصة بك المتداخلة في `.item` يجب أن تحتوي على `margin-bottom` من `5px`.
+
+```js
+const itemPMarginBottom = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('margin-bottom');
+assert(itemPMarginBottom === '5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr>
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+--fcc-editable-region--
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md
new file mode 100644
index 00000000000..d56c416a62d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md
@@ -0,0 +1,160 @@
+---
+id: 5f45a5a7c49a8251f0bdb527
+title: الخطوة 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+باستخدام منتقي النمط (style selector) نفسه في الخطوة السابقة، اجعل حجم الخط (font size) للعناصر والأسعار أكبر باستخدام قيمة `18px`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `font-size` إلى `18px`.
+
+```js
+const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '18px');
+assert(hasFontSize);
+```
+
+يجب عليك استخدام منتقي `.item p` الحالي.
+
+```js
+const hasOneSelector = new __helpers.CSSHelp(document).getStyleDeclarations('.item p');
+assert(hasOneSelector.length === 1);
+```
+
+عناصر `p` الخاصة بك المتداخلة في `.item` يجب أن تحتوي على `font-size` من `18px`.
+
+```js
+const itemPFontSize = new __helpers.CSSHelp(document).getStyle('.item p')?.getPropertyValue('font-size');
+assert(itemPFontSize === '18px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr>
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+--fcc-editable-region--
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+}
+--fcc-editable-region--
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md
new file mode 100644
index 00000000000..d3b2871229d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md
@@ -0,0 +1,176 @@
+---
+id: 5f45a66d4a2b0453301e5a26
+title: الخطوة 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+بالانتقال للأسفل إلى عنصر `footer` اجعل كل النص له قيمة `14px` لحجم الخط (font size).
+
+# --hints--
+
+يجب أن يكون لديك منتقي `footer`.
+
+```js
+const hasFooter = new __helpers.CSSHelp(document).getStyle('footer');
+assert(hasFooter);
+```
+
+يجب أن يكون منتقي `footer` الخاص بك تحت تعليقك.
+
+```js
+assert(code.match(/\/\*\s*FOOTER\s*\*\/\s*footer/i));
+```
+
+يجب عليك تعيين خاصية `font-size` إلى `14px`.
+
+
+```js
+const hasFontSize = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['font-size'] === '14px');
+assert(hasFontSize);
+```
+
+يجب أن يكون للعنصر `footer` الخاص بك `font-size` بقيمة `14px`.
+
+```js
+const footerFontSize = new __helpers.CSSHelp(document).getStyle('footer')?.getPropertyValue('font-size');
+assert(footerFontSize === '14px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+
+/* FOOTER */
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md
new file mode 100644
index 00000000000..24431418eb4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md
@@ -0,0 +1,173 @@
+---
+id: 5f45b0731d39e15d54df4dfc
+title: الخطوة 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+اللون الافتراضي لرابط لم يتم النقر عليه بعد هو عادة اللون الأزرق. اللون الافتراضي للرابط الذي تمت زيارته بالفعل من صفحة هو عادة بنفسجي.
+
+لجعل روابط `footer` بنفس اللون بغض النظر عما إذا كان الرابط قد تمت زيارته، استخدم منتقي النوع (type selector) لعنصر الرابط (`a`) واستخدم القيمة `black` لخاصية `color`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `a`.
+
+```js
+const hasASelector = new __helpers.CSSHelp(document).getStyle('a');
+assert(hasASelector);
+```
+
+يجب عليك تعيين خاصية `color` إلى `black`.
+
+```js
+const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'black');
+```
+
+يجب أن يكون `a` الخاص بك له `color` بقيمة `black`.
+
+```js
+const aColor = new __helpers.CSSHelp(document).getStyle('a')?.getPropertyValue('color');
+assert(aColor === 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+
+/* FOOTER */
+
+footer {
+  font-size: 14px;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md
new file mode 100644
index 00000000000..2f1a0a22a6e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md
@@ -0,0 +1,180 @@
+---
+id: 5f45b25e7ec2405f166b9de1
+title: الخطوة 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+يمكنك تغيير خصائص الرابط عندما يكون الرابط قد تمت زيارته بالفعل باستخدام <dfn>pseudo-selector</dfn> الذي يبدو مثل `a:visited { propertyName: propertyValue; }`.
+
+قم بتغيير لون footer الصفحة `Visit our website` ليكون `grey` عندما يقوم المستخدم بزيارة الرابط.
+
+# --hints--
+
+يجب عليك استخدام `a:visited` و هو pseudoselecer.
+
+```js
+const hasAVisited = new __helpers.CSSHelp(document).getStyle('a:visited');
+assert(hasAVisited);
+```
+
+يجب عليك تعيين خاصية `color` إلى `grey`.
+
+```js
+const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => (x.style.color === 'grey' || x.style.color === 'gray'));
+assert(hasColor);
+```
+
+يجب أن يكون `a:visited` لديه `color` بقيمة `grey`.
+
+```js
+const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color');
+assert(aVisitedColor === 'grey' || aVisitedColor === 'gray');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+
+/* FOOTER */
+
+footer {
+  font-size: 14px;
+}
+
+a {
+  color: black;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md
new file mode 100644
index 00000000000..78275da8993
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md
@@ -0,0 +1,184 @@
+---
+id: 5f45b3c93c027860d9298dbd
+title: الخطوة 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+يمكنك تغيير خصائص الرابط عندما تتحرك الفأرة فوقه باستخدام <dfn>pseudo-selector</dfn> الذي يبدو مثل `a:hover { propertyName: propertyValue; }`.
+
+قم بتغيير لون نص link الأتي `Visit our website` في footer الصفحة ليكون `brown` عندما تتحرك الفأرة فوقه.
+
+# --hints--
+
+يجب عليك استخدام `a:hover` و هو pseudoselecer.
+
+```js
+const hasAHover = new __helpers.CSSHelp(document).getStyle('a:hover');
+assert(hasAHover);
+```
+
+يجب عليك تعيين خاصية `color` إلى `brown`.
+
+```js
+const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'brown');
+assert(hasColor);
+```
+
+يجب أن يكون `a:hover` لديه `color` بقيمة `brown`.
+
+```js
+const aHoverColor = new __helpers.CSSHelp(document).getStyle('a:hover')?.getPropertyValue('color');
+assert(aHoverColor === 'brown');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+
+/* FOOTER */
+
+footer {
+  font-size: 14px;
+}
+
+a {
+  color: black;
+}
+
+a:visited {
+  color: grey;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md
new file mode 100644
index 00000000000..317f618c09b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md
@@ -0,0 +1,187 @@
+---
+id: 5f45b45d099f3e621fbbb256
+title: الخطوة 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+يمكنك تغيير خصائص الرابط عندما يتم النقر على الرابط باستخدام <dfn>pseudo-selector</dfn> الذي يبدو مثل `a:active { propertyName: propertyValue; }`.
+
+قم بتغيير لون نص link الأتي `Visit our website` في footer الصفحة ليكون `white` عند النقر عليه.
+
+# --hints--
+
+يجب عليك استخدام `a:active` و هو pseudoselecer.
+
+```js
+const hasAActive = new __helpers.CSSHelp(document).getStyle('a:active');
+assert(hasAActive);
+```
+
+يجب عليك تعيين خاصية `color` إلى `white`.
+
+```js
+const hasColor = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.color === 'white');
+assert(hasColor);
+```
+
+يجب أن يكون `a:active` لديه `color` بقيمة `white`.
+
+```js
+const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color');
+assert(aActiveColor === 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+
+/* FOOTER */
+
+footer {
+  font-size: 14px;
+}
+
+a {
+  color: black;
+}
+
+a:visited {
+  color: grey;
+}
+
+a:hover {
+  color: brown;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md
new file mode 100644
index 00000000000..acd5b4dc8d8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md
@@ -0,0 +1,180 @@
+---
+id: 5f45b4c81cea7763550e40df
+title: الخطوة 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+للإبقاء على نفس السمة اللونية التي كنت تستعملها بالفعل (أسود وبني)، قم بتغيير اللون عند زيارة الرابط إلى `black` واستخدم `brown` عند النقر على الرابط.
+
+# --hints--
+
+يجب عليك تعيين خاصية `color` إلى `black` عندما يكون الرابط `visited`.
+
+```js
+const aVisitedColor = new __helpers.CSSHelp(document).getStyle('a:visited')?.getPropertyValue('color');
+assert(aVisitedColor === 'black');
+```
+
+يجب عليك تعيين خاصية `color` إلى `brown` عندما يكون الرابط `active`.
+
+```js
+const aActiveColor = new __helpers.CSSHelp(document).getStyle('a:active')?.getPropertyValue('color');
+assert(aActiveColor === 'brown');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+
+/* FOOTER */
+
+footer {
+  font-size: 14px;
+}
+
+a {
+  color: black;
+}
+
+--fcc-editable-region--
+a:visited {
+  color: grey;
+}
+
+a:hover {
+  color: brown;
+}
+
+a:active {
+  color: white;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md
new file mode 100644
index 00000000000..0a383fdd34c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md
@@ -0,0 +1,182 @@
+---
+id: 5f45b715301bbf667badc04a
+title: الخطوة 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+نص القائمة `CAMPER CAFE` به مسافة مختلفة من الأعلى عن العنوان الموجود أسفل القائمة. هذا بسبب أن المتصفح لديه top margin افتراضي لعنصر `h1`.
+
+قم بتغيير top margin لعنصر `h1` إلى `0` لإزالة كل الـ top margin.
+
+# --hints--
+
+يجب عليك تعيين خاصية `margin-top` إلى `0`.
+
+```js
+const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '0px');
+assert(hasMarginTop);
+```
+
+يجب أن يكون للعنصر `h1` الخاص بك `margin-top` بقيمة `0`.
+
+```js
+const h1MarginTop = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-top');
+assert(h1MarginTop === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-size: 40px;
+}
+--fcc-editable-region--
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+
+/* FOOTER */
+
+footer {
+  font-size: 14px;
+}
+
+a {
+  color: black;
+}
+
+a:visited {
+  color: black;
+}
+
+a:hover {
+  color: brown;
+}
+
+a:active {
+  color: brown;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md
new file mode 100644
index 00000000000..6982d1369d9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md
@@ -0,0 +1,181 @@
+---
+id: 5f46e270702a8456a664f0df
+title: الخطوة 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+لإزالة بعض من المساحة الرأسية بين عنصر `h1` والنص `Est. 2020`، قم بتغيير bottom margin لـ `h1` إلى `15px`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `margin-bottom` إلى `15px`.
+
+```js
+const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '15px');
+assert(hasMarginBottom);
+```
+
+يجب أن يكون للعنصر `h1` الخاص بك `margin-bottom` بقيمة `15px`.
+
+```js
+const h1MarginBottom = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin-bottom');
+assert(h1MarginBottom === '15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-size: 40px;
+  margin-top: 0;
+}
+--fcc-editable-region--
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+
+/* FOOTER */
+
+footer {
+  font-size: 14px;
+}
+
+a {
+  color: black;
+}
+
+a:visited {
+  color: black;
+}
+
+a:hover {
+  color: brown;
+}
+
+a:active {
+  color: brown;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
new file mode 100644
index 00000000000..ff7ca706f3f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
@@ -0,0 +1,193 @@
+---
+id: 5f46e36e745ead58487aabf2
+title: الخطوة 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+الآن تبدو المسافة العلوية جيدة. المساحة أسفل العنوان في أسفل القائمة أكبر قليلا من المساحة في الجزء العلوي من القائمة وعنصر `h1`.
+
+لتقليل مساحة margin الافتراضية تحت عنوان عنصر `p`، قم بإنشاء class selector يسمى `address` واستخدم القيمة `5px` للخاصية `margin-bottom`.
+
+# --hints--
+
+يجب عليك إضافة منتقي `.address`.
+
+```js
+const hasAddress = new __helpers.CSSHelp(document).getStyle('.address');
+assert(hasAddress);
+```
+
+يجب عليك تعيين خاصية `margin-bottom` إلى `5px`.
+
+```js
+const hasMarginBottom = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-bottom'] === '5px');
+assert(hasMarginBottom);
+```
+
+يجب أن يكون لمنتقي `.address` الخاص بك الخاصية `margin-bottom` بقيمة `5px`.
+
+```js
+const addressMarginBottom = new __helpers.CSSHelp(document).getStyle('.address')?.getPropertyValue('margin-bottom');
+assert(addressMarginBottom === '5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+
+/* FOOTER */
+
+footer {
+  font-size: 14px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+a {
+  color: black;
+}
+
+a:visited {
+  color: black;
+}
+
+a:hover {
+  color: brown;
+}
+
+a:active {
+  color: brown;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md
new file mode 100644
index 00000000000..3f64638bc4a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md
@@ -0,0 +1,189 @@
+---
+id: 5f46e7a4750dd05b5a673920
+title: الخطوة 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+الآن قم بتطبيق class الـ `address` على عنصر `p` الذي يحتوي على العنوان.
+
+# --hints--
+
+يجب عليك تطبيق السمة `class="address"`.
+
+```js
+assert(code.match(/class=('|")address\1/i));
+```
+
+عنصر `.address` الخاص بك يجب أن يكون عنصر `p` الخاص بك.
+
+```js
+assert($('.address')[0].tagName === 'P');
+```
+
+يجب أن يحتوي عنصر `.address` الخاص بك على النص `123 Free Code Camp Drive`.
+
+```js
+assert($('.address')[0].innerText.match(/123 Free Code Camp Drive/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+--fcc-editable-region--
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+
+/* FOOTER */
+
+footer {
+  font-size: 14px;
+}
+
+.address {
+  margin-bottom: 5px;
+}
+
+a {
+  color: black;
+}
+
+a:visited {
+  color: black;
+}
+
+a:hover {
+  color: brown;
+}
+
+a:active {
+  color: brown;
+}
+```
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
new file mode 100644
index 00000000000..16ef45749f4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e8284aae155c83015dee.md
@@ -0,0 +1,192 @@
+---
+id: 5f46e8284aae155c83015dee
+title: الخطوة 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+تبدو القائمة جيدة، ولكن بخلاف صورة خلفية حبوب البن، إنها في الأساس مجرد نص.
+
+تحت عنوان `Coffee`، أضف صورة باستخدام الرابط `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`. أعطِ الصورة قيمة `alt` بـ `coffee icon`.
+
+# --hints--
+
+يجب أن يكون لديك وسم `<img>`. تذكر أن عناصر `img` هي self-closing.
+
+```js
+assert($('img').length === 1);
+```
+
+يجب أن يكون لعنصر `img` الخاص بك سمة `src` بقيمة `https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg`.
+
+```js
+assert($('img').attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg');
+```
+
+يجب أن يكون لعنصر `img` الخاص بك سمة `alt` بقيمة `coffee icon`.
+
+```js
+assert($('img').attr('alt').match(/coffee icon/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+--fcc-editable-region--
+          <h2>Coffee</h2>
+--fcc-editable-region--
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p class="address">123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+
+/* FOOTER */
+
+footer {
+  font-size: 14px;
+}
+
+.address {
+  margin-bottom: 5px;
+}
+
+a {
+  color: black;
+}
+
+a:visited {
+  color: black;
+}
+
+a:hover {
+  color: brown;
+}
+
+a:active {
+  color: brown;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md
new file mode 100644
index 00000000000..b3421009141
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md
@@ -0,0 +1,153 @@
+---
+id: 5f46ede1ff8fec5ba656b44c
+title: الخطوة 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+بعد ذلك ستقوم بتصميم (style) عنصر `footer`. للحفاظ على تنظيم CSS، أضف تعليق في نهاية `styles.css` مع النص `FOOTER`.
+
+# --hints--
+
+يجب أن يكون لديك تعليق CSS مع النص `FOOTER`.
+
+```js
+assert(code.match(/\/\*\s*FOOTER\s*\*\//i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;  
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md
new file mode 100644
index 00000000000..a01d71d608c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md
@@ -0,0 +1,165 @@
+---
+id: 5f46fc57528aa1c4b5ea7c2e
+title: الخطوة 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+تغيير `margin-bottom` إلى `5px` يبدو رائعاً. ومع ذلك، الآن المساحة بين عنصر القائمة `Cinnamon Roll` والعنصر الثاني `hr` لا تتطابق مع المساحة بين العنصر العلوي `hr` و `Coffee`.
+
+أضف المزيد من المساحة عن طريق إنشاء class يسمى `bottom-line` باستخدام `25px` لخاصية `margin-top`.
+
+# --hints--
+
+يجب عليك إضافة منتقي `.bottom-line`.
+
+```js
+const hasBottomLine = new __helpers.CSSHelp(document).getStyle('.bottom-line');
+assert(hasBottomLine);
+```
+
+يجب عليك تعيين خاصية `margin-top` إلى `25px`.
+
+```js
+const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '25px');
+assert(hasMarginTop);
+```
+
+يجب أن يكون لمنتقي `.bottom-line` الخاص بك `margin-top` من `25px`.
+
+```js
+const bottomLineMargin = new __helpers.CSSHelp(document).getStyle('.bottom-line')?.getPropertyValue('margin-top');
+assert(bottomLineMargin === '25px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr>
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
new file mode 100644
index 00000000000..d049e861fcf
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
@@ -0,0 +1,155 @@
+---
+id: 5f4701b942c824109626c3d8
+title: الخطوة 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+الآن أضف class تسمى `bottom-line` إلى العنصر `hr` الثاني حتى يتم تطبيق النمط.
+
+# --hints--
+
+يجب عليك إضافة سمة `class` مع القيمة `bottom-line`.
+
+```js
+assert(code.match(/class=('|")bottom-line\1/i));
+```
+
+يجب تطبيق class تسمى `bottom-line` الخاص بك على عنصر `hr` الثاني.
+
+```js
+assert($('hr')[1].className === 'bottom-line');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+--fcc-editable-region--
+      <hr>
+--fcc-editable-region--
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p>123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md
new file mode 100644
index 00000000000..d2746a245e1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md
@@ -0,0 +1,221 @@
+---
+id: 5f475bb508746c16c9431d42
+title: الخطوة 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+الصورة التي أضفتها لم يتم توسيطها أفقيًا مثل عنوان `Coffee` أعلاها. عناصر `img` "مثل" عناصر inline.
+
+لجعل الصورة تتصرف مثل عناصر heading (والتي هي block-level)، أنشئ منتقي `img` واستخدم القيمة `block` لخاصية `display` واستخدم `margin-left` و `margin-right` لتوسيطها أفقيا.
+
+# --hints--
+
+يجب عليك استخدام منتقي `img`.
+
+```js
+const hasImg = new __helpers.CSSHelp(document).getStyle('img');
+assert(hasImg);
+```
+
+يجب عليك تعيين خاصية `display` إلى `block`.
+
+```js
+const hasDisplay = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.display === 'block');
+assert(hasDisplay);
+```
+
+يجب عليك تعيين خاصية `margin-left` إلى `auto`.
+
+```js
+const marginLeftFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-left'] === 'auto');
+assert(marginLeftFilter.length === 2);
+```
+
+يجب عليك تعيين خاصية `margin-right` إلى `auto`.
+
+```js
+const marginRightFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style['margin-right'] === 'auto');
+assert(marginRightFilter.length === 2);
+```
+
+`img` الخاص بك يجب أن يكون له `display` بقيمة `block`.
+
+```js
+const imgDisplay = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('display');
+assert(imgDisplay === 'block');
+```
+
+يجب أن يكون لعنصر `img` الخاص بك `margin-left` و `margin-right` بقيمة `auto`.
+
+```js
+const imgMarginLeft = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-left');
+assert(imgMarginLeft === 'auto');
+const imgMarginRight = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-right');
+assert(imgMarginRight === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p class="address">123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+
+/* FOOTER */
+
+footer {
+  font-size: 14px;
+}
+
+.address {
+  margin-bottom: 5px;
+}
+
+a {
+  color: black;
+}
+
+a:visited {
+  color: black;
+}
+
+a:hover {
+  color: brown;
+}
+
+a:active {
+  color: brown;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md
new file mode 100644
index 00000000000..cd3d69d9b03
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md
@@ -0,0 +1,197 @@
+---
+id: 5f475e1c7f71a61d913836c6
+title: الخطوة 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+أضف صورة أخيرة تحت عنوان `Desserts` باستخدام الرابط `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`. أعطِ الصورة قيمة `alt` ألى `pie icon`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `img` ثانٍ.
+
+```js
+assert($('img').length === 2);
+```
+
+يجب أن يحتوي عنصر `img` الجديد على `src` بقيمة `https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg`.
+
+```js
+assert($('img').last().attr('src') === 'https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg');
+```
+
+يجب أن يحتوي عنصر `img` الجديد على `alt` بقيمة `pie icon`.
+
+```js
+assert($('img').last().attr('alt').match(/pie icon/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+--fcc-editable-region--
+          <h2>Desserts</h2>
+--fcc-editable-region--
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p class="address">123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%;
+}
+
+/* FOOTER */
+
+footer {
+  font-size: 14px;
+}
+
+.address {
+  margin-bottom: 5px;
+}
+
+a {
+  color: black;
+}
+
+a:visited {
+  color: black;
+}
+
+a:hover {
+  color: brown;
+}
+
+a:active {
+  color: brown;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md
new file mode 100644
index 00000000000..d5823828d8b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md
@@ -0,0 +1,104 @@
+---
+id: 5f47633757ae3469f2d33d2e
+title: الخطوة 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+إذا قمت بجعل عرض الصفحة أصغر، فستلاحظ في مرحلة ما أن بعض النصوص الموجود على اليسار تبدأ بالظهور علي السطر التالي. هذا لأن عرض عناصر `p` على الجانب الأيسر يمكن أن يستغرق فقط `50%` من المساحة.
+
+بما أنك تعرف أن الأسعار على اليمين تحتوي على أحرف أقل بكثير، غيّر قيمة `width` لفئة `flavor` لتكون `75%` و قيمة `width` لفئة `price` لتكون `25%`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `width` إلى `75%` في منتقي `.flavor` الخاص بك.
+
+```js
+const flavorWidth = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('width');
+assert(flavorWidth === '75%');
+```
+
+يجب عليك تعيين خاصية `width` إلى `25%` في منتقي `.price` الخاص بك.
+
+```js
+const priceWidth = new __helpers.CSSHelp(document).getStyle('.price')?.getPropertyValue('width');
+assert(priceWidth === '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+--fcc-editable-region--
+.flavor {
+  text-align: left;
+  width: 50%;
+}
+
+.price {
+  text-align: right;
+  width: 50%;
+}
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md
new file mode 100644
index 00000000000..7a9e4350f98
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md
@@ -0,0 +1,359 @@
+---
+id: 5f47fe7e31980053a8d4403b
+title: الخطوة 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+سيكون من اللطيف إذا كانت المساحة الرأسية بين عناصر `h2` والرموز المرتبطة بها أصغر. عناصر `h2` لديها مساحة margin top و bottom افتراضية، حتى تتمكن من تغيير margin bottom لعناصر `h2` لمثلا `0` أو رقم آخر.
+
+هناك طريقة أسهل، ببساطة إضافة margin top سلبي إلى عناصر `img` لسحبها من مواقعها الحالية. يتم إنشاء القيم السلبية باستخدام `-` أمام القيمة. لإكمال هذا المشروع، قم بالمضي قدما واستخدم margin top سالب من `25px` في منتقي `img`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `margin-top` إلى `-25px`.
+
+```js
+const hasMarginTop = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['margin-top'] === '-25px');
+assert(hasMarginTop);
+```
+
+يجب أن تحتوي عناصر `img` الخاصة بك على `margin-top` بقيمة `-25px`.
+
+```js
+const imgMarginTop = new __helpers.CSSHelp(document).getStyle('img')?.getPropertyValue('margin-top');
+assert(imgMarginTop === '-25px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p class="address">123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+--fcc-editable-region--
+img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+}
+--fcc-editable-region--
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%;
+}
+
+/* FOOTER */
+
+footer {
+  font-size: 14px;
+}
+
+.address {
+  margin-bottom: 5px;
+}
+
+a {
+  color: black;
+}
+
+a:visited {
+  color: black;
+}
+
+a:hover {
+  color: brown;
+}
+
+a:active {
+  color: brown;
+}
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p class="established">Est. 2020</p>
+        <hr>
+        <section>
+          <h2>Coffee</h2>
+          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/coffee.jpg" alt="coffee icon"/>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <img src="https://cdn.freecodecamp.org/curriculum/css-cafe/pie.jpg" alt="pie icon"/>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cherry Pie</p><p class="price">2.75</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cheesecake</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="dessert">Cinnamon Roll</p><p class="price">2.50</p>
+          </article>
+        </section>
+      </main>
+      <hr class="bottom-line">
+      <footer>
+        <p>
+          <a href="https://www.freecodecamp.org" target="_blank">Visit our website</a>
+        </p>
+        <p class="address">123 Free Code Camp Drive</p>
+      </footer>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+  font-family: sans-serif;
+  padding: 20px;
+}
+
+h1 {
+  font-size: 40px;
+  margin-top: 0;
+  margin-bottom: 15px;
+}
+
+h2 {
+  font-size: 30px;
+}
+
+.established {
+  font-style: italic;
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+  padding: 20px;
+  max-width: 500px;
+}
+
+img {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-top: -25px;
+}
+
+hr {
+  height: 2px;
+  background-color: brown;
+  border-color: brown;
+}
+
+.bottom-line {
+  margin-top: 25px;
+}
+
+h1, h2 {
+  font-family: Impact, serif;
+}
+
+.item p {
+  display: inline-block;
+  margin-top: 5px;
+  margin-bottom: 5px;
+  font-size: 18px;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%;
+}
+
+/* FOOTER */
+
+footer {
+  font-size: 14px;
+}
+
+.address {
+  margin-bottom: 5px;
+}
+
+a {
+  color: black;
+}
+
+a:visited {
+  color: black;
+}
+
+a:hover {
+  color: brown;
+}
+
+a:active {
+  color: brown;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md
new file mode 100644
index 00000000000..630d26404c3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md
@@ -0,0 +1,117 @@
+---
+id: 5f716ad029ee4053c7027a7a
+title: الخطوة 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+ادمج عنصرين `p` داخل عنصر `article` الخاص بك. نص الأول يجب أن يكون `Donut`والنص الثاني `1.50`. ضع كلاهما على نفس السطر للتأكد من عدم وجود مساحة بينهما.
+
+# --hints--
+
+لا يجب عليك تغيير عنصر `article` الحالي.
+
+```js
+assert($('article').length === 6);
+```
+
+عنصر `article` الجديد يجب أن يحتوي على عنصرين `p`.
+
+```js
+assert($('article').last().children('p').length === 2);
+```
+
+يجب أن يحتوي العنصر `p` الاول على النص `Donut`.
+
+```js
+assert($('article').last().children('p')[0].innerText.match(/Donut/i));
+```
+
+يجب أن يحتوي العنصر `p` الثاني على النص `1.50`.
+
+```js
+assert($('article').last().children('p')[1].innerText.match(/1\.50/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+--fcc-editable-region--
+          <article class="item">
+          </article>
+--fcc-editable-region--
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md
new file mode 100644
index 00000000000..3bdd46438a4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md
@@ -0,0 +1,151 @@
+---
+id: 5f716bee5838c354c728a7c5
+title: الخطوة 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+تحت الحلوى (dessert) التي أضفتها للتو، أضف بقية الحلوى والأسعار باستخدام ثلاثة عناصر `article`، كل منها مع يحتوي علي عنصرين `p`. يجب أن يحتوي كل عنصر على النص الصحيح للحلوى والسعر، ويجب أن يحتوي كل عنصر على classes الصحيحة.
+
+```bash
+Cherry Pie 2.75
+Cheesecake 3.00
+Cinnamon Roll 2.50
+```
+
+# --hints--
+
+يجب أن يكون لديك أربع عناصر `article` في `section` الثاني الخاص بك.
+
+```js
+const secondSection = document.querySelectorAll('section')[1]
+const articles = secondSection.querySelectorAll('article')
+assert(articles.length === 4)
+```
+
+يجب أن يكون لديك أربع عناصر `.dessert`.
+
+```js
+assert($('.dessert').length === 4);
+```
+
+يجب أن يكون لديك أربع عناصر `.price` جديدة.
+
+```js
+assert($('section').last().find('.price').length === 4);
+```
+
+عنصر `section` الخاص بك يجب أن يحتوي على ثماني عناصر `p`.
+
+```js
+assert($('section').last().find('p').length === 8);
+```
+
+يجب أن تحتوي عناصر `.dessert` على النصوص `Donut`, و `Cherry Pie`, و `Cheesecake`, و `Cinnamon Roll`.
+
+```js
+const dessert = $('.dessert');
+assert(dessert[0].innerText.match(/donut/i));
+assert(dessert[1].innerText.match(/cherry pie/i));
+assert(dessert[2].innerText.match(/cheesecake/i));
+assert(dessert[3].innerText.match(/cinnamon roll/i));
+```
+
+يجب أن تحتوي عناصر `.price` الجديدة على النصوص `1.50`, و `2.75`, و `3.00`, و `2.50`.
+
+```js
+const prices = $('section').last().find('.price');
+assert(prices[0].innerText.match(/1\.50/));
+assert(prices[1].innerText.match(/2\.75/));
+assert(prices[2].innerText.match(/3\.00/));
+assert(prices[3].innerText.match(/2\.50/));
+```
+
+يجب ألا يكون لديك أي مسافات بين عناصر `p` الخاصة بك.
+
+```js
+assert(!code.match(/<\/p>\s+<p/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+--fcc-editable-region--
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+--fcc-editable-region--
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor, .dessert {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md
new file mode 100644
index 00000000000..608756cbf1e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md
@@ -0,0 +1,98 @@
+---
+id: 5f7691dafd882520797cd2f0
+title: الخطوة 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+بعد ذلك، ضع العناصر `p` الأخرى لتكون على نفس السطر بدون مسافة بينها.
+
+# --hints--
+
+يجب ألا يكون لديك أي مسافات بين عناصر `p` الخاصة بك.
+
+```js
+assert(!code.match(/<\/p>\s+<p/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+--fcc-editable-region--
+          <article class="item">
+            <p>Caramel Macchiato</p>
+            <p>3.75</p>
+          </article>
+          <article class="item">
+            <p>Pumpkin Spice</p>
+            <p>3.50</p>
+          </article>
+          <article class="item">
+            <p>Hazelnut</p>
+            <p>4.00</p>
+          </article>
+          <article class="item">
+            <p>Mocha</p>
+            <p>4.50</p>
+          </article>
+--fcc-editable-region--
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor {
+  text-align: left;
+  width: 50%;
+}
+
+.price {
+  text-align: right;
+  width: 50%;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md
new file mode 100644
index 00000000000..f1f954e9b73
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md
@@ -0,0 +1,124 @@
+---
+id: 5f7692f7c5b3ce22a57788b6
+title: الخطوة 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+لإكمال التصميم (styling)، أضف أسماء class الآتية `flavor` و `price` إلى جميع عناصر `p` المتبقية.
+
+# --hints--
+
+يجب أن يكون لديك خمسة عناصر `.flavor`.
+
+```js
+assert($('.flavor').length === 5);
+```
+
+يجب أن يكون لديك خمسة عناصر `.price`.
+
+```js
+assert($('.price').length === 5);
+```
+
+يجب أن تكون عناصر `.flavor` الخاصة بك هي عناصر `p` مع النصوص `French Vanilla`, و `Caramel Macchiato`, و `Pumpkin Spice`, و `Hazelnut`, و `Mocha`.
+
+```js
+const p = $('p');
+const flavor = $('.flavor');
+assert(p[1] === flavor[0]);
+assert(p[3] === flavor[1]);
+assert(p[5] === flavor[2]);
+assert(p[7] === flavor[3]);
+assert(p[9] === flavor[4]);
+```
+
+عناصر `.price` الخاصة بك يجب أن تكون عناصر `p` مع النصوص `3.00`, و `3.75`, و `3.50`, و `4.00`, و `4.50`.
+
+```js
+const p = $('p');
+const price = $('.price');
+assert(p[2] === price[0]);
+assert(p[4] === price[1]);
+assert(p[6] === price[2]);
+assert(p[8] === price[3]);
+assert(p[10] === price[4]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+--fcc-editable-region--
+          <article class="item">
+            <p>Caramel Macchiato</p><p>3.75</p>
+          </article>
+          <article class="item">
+            <p>Pumpkin Spice</p><p>3.50</p>
+          </article>
+          <article class="item">
+            <p>Hazelnut</p><p>4.00</p>
+          </article>
+          <article class="item">
+            <p>Mocha</p><p>4.50</p>
+          </article>
+--fcc-editable-region--
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor {
+  text-align: left;
+  width: 50%;
+}
+
+.price {
+  text-align: right;
+  width: 50%;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md
new file mode 100644
index 00000000000..195d6e81376
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md
@@ -0,0 +1,103 @@
+---
+id: 5f769541be494f25449b292f
+title: الخطوة 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+باستخدام class تسمى `flavor` الجديدة كمنتقى، عيّن قيمة خاصية `text-align` إلى `left`.
+
+# --hints--
+
+يجب أن يكون لديك منتقى class يسمي `flavor`.
+
+```js
+const hasFlavor = new __helpers.CSSHelp(document).getStyle('.flavor');
+assert(hasFlavor);
+```
+
+يجب عليك تعيين خاصية `text-align` إلى `left`.
+
+```js
+const hasTextAlign = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['text-align'] === 'left');
+assert(hasTextAlign);
+```
+
+يجب أن يقوم منتقي `flavor` الخاص بك بتعيين خاصية `text-align` إلى `left`.
+
+```js
+const flavorTextAlign = new __helpers.CSSHelp(document).getStyle('.flavor')?.getPropertyValue('text-align');
+assert(flavorTextAlign === 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article>
+            <p class="flavor">French Vanilla</p>
+            <p>3.00</p>
+          </article>
+          <article>
+            <p>Caramel Macchiato</p>
+            <p>3.75</p>
+          </article>
+          <article>
+            <p>Pumpkin Spice</p>
+            <p>3.50</p>
+          </article>
+          <article>
+            <p>Hazelnut</p>
+            <p>4.00</p>
+          </article>
+          <article>
+            <p>Mocha</p>
+            <p>4.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
new file mode 100644
index 00000000000..501fd9d4eac
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
@@ -0,0 +1,100 @@
+---
+id: 5f76967fad478126d6552b0d
+title: الخطوة 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+بعد ذلك، تريد محاذاة السعر إلى اليمين. أضف class تسمى `price` إلى عنصر `p` الخاص بك الذي يحتوي على `3.00` كنص له.
+
+# --hints--
+
+يجب عليك إضافة class تسمى `price` إلى عنصر `p` الخاص بك.
+
+```js
+assert(code.match(/<p\s*class=('|")price\1\s*>/i));
+```
+
+يجب أن يكون لديك عنصر واحد فقط مع class تسمى `price`.
+
+```js
+assert($('.price').length === 1);
+```
+
+يجب أن يكون class مسمى `price` الخاص بك على عنصر `p` مع النص `3.00`.
+
+```js
+assert($('.price')[0].innerText.match(/3\.00/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article>
+            <p class="flavor">French Vanilla</p>
+--fcc-editable-region--
+            <p>3.00</p>
+--fcc-editable-region--
+          </article>
+          <article>
+            <p>Caramel Macchiato</p>
+            <p>3.75</p>
+          </article>
+          <article>
+            <p>Pumpkin Spice</p>
+            <p>3.50</p>
+          </article>
+          <article>
+            <p>Hazelnut</p>
+            <p>4.00</p>
+          </article>
+          <article>
+            <p>Mocha</p>
+            <p>4.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.flavor {
+  text-align: left;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md
new file mode 100644
index 00000000000..447a2bad613
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md
@@ -0,0 +1,104 @@
+---
+id: 5f769702e6e33127d14aa120
+title: الخطوة 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+الآن قم بمحاذاة النص ألى `right` للعناصر التي تحتوي علي class تسمى `price`.
+
+# --hints--
+
+يجب أن يكون لديك منتقى class يسمي `price`.
+
+```js
+assert(code.match(/\.price\s*{/i));
+```
+
+يجب أن يقوم منتقي `price` الخاص بك بتعيين خاصية `text-align` إلى `right`.
+
+```js
+assert(code.match(/\.price\s*{\s*text-align:\s*right;?/i));
+```
+
+يجب محاذاة عنصر `.price` الخاص بك إلى اليمين.
+
+```js
+assert($('.price').css('text-align') === 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article>
+            <p class="flavor">French Vanilla</p>
+            <p class="price">3.00</p>
+          </article>
+          <article>
+            <p>Caramel Macchiato</p>
+            <p>3.75</p>
+          </article>
+          <article>
+            <p>Pumpkin Spice</p>
+            <p>3.50</p>
+          </article>
+          <article>
+            <p>Hazelnut</p>
+            <p>4.00</p>
+          </article>
+          <article>
+            <p>Mocha</p>
+            <p>4.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.flavor {
+  text-align: left;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md
new file mode 100644
index 00000000000..b52ba873147
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md
@@ -0,0 +1,118 @@
+---
+id: 5f7b87422a560036fd03ccff
+title: الخطوة 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+للعنصران `p` الذي أضفتهما للتو، قم بإضافة `dessert` كقيمة لسمة `class` عنصر `p` الأول والقيمة `price` كقيمة لسمة `class` عنصر `p` الثاني.
+
+# --hints--
+
+يجب أن يكون لديك عنصر `p` واحد مع class الـ `dessert`.
+
+```js
+assert($('.dessert').length === 1);
+```
+
+عنصر `p` الخاص بك مع النص `Donut` يجب أن يحتوي على class الـ `dessert`.
+
+```js
+assert($('.dessert')[0].innerText.match(/donut/i));
+```
+
+عنصر `p` الخاص بك مع النص `1.50` يجب أن يحتوي على class الـ `price`.
+
+```js
+assert($('.price').last().text().match(/1\.50/));
+```
+
+يجب ألا يكون لديك أي مسافات بين عناصر `p` الخاصة بك.
+
+```js
+assert(!code.match(/<\/p>\s+<p/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+--fcc-editable-region--
+            <p>Donut</p><p>1.50</p>
+--fcc-editable-region--
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+.flavor {
+  text-align: left;
+  width: 75%;
+}
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md
new file mode 100644
index 00000000000..91066c9cdc7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md
@@ -0,0 +1,102 @@
+---
+id: 5f7b88d37b1f98386f04edc0
+title: الخطوة 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+شيء ما لا يبدو صحيحا. لقد أضفت قيمة سمة `class` الصحيحة إلى عنصر `p` مع `Donut` كنص له، لكنك لم تحدد منتقي (selector) له.
+
+لما كان منتقي class مسمى `flavor` لديه فعلًا الخصائص التي تريدها، أضف class باسم `dessert` إليه.
+
+# --hints--
+
+يجب عليك إضافة منتقي `.dessert` إلى منتقي `.flavor` الخاص بك.
+
+```js
+const selector = new __helpers.CSSHelp(document).getStyle('.flavor, .dessert') || new __helpers.CSSHelp(document).getStyle('.dessert, .flavor');
+assert(selector)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Cafe Menu</title>
+    <link href="styles.css" rel="stylesheet"/>
+  </head>
+  <body>
+    <div class="menu">
+      <main>
+        <h1>CAMPER CAFE</h1>
+        <p>Est. 2020</p>
+        <section>
+          <h2>Coffee</h2>
+          <article class="item">
+            <p class="flavor">French Vanilla</p><p class="price">3.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Caramel Macchiato</p><p class="price">3.75</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Pumpkin Spice</p><p class="price">3.50</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Hazelnut</p><p class="price">4.00</p>
+          </article>
+          <article class="item">
+            <p class="flavor">Mocha</p><p class="price">4.50</p>
+          </article>
+        </section>
+        <section>
+          <h2>Desserts</h2>
+          <article class="item">
+            <p class="dessert">Donut</p><p class="price">1.50</p>
+          </article>
+        </section>
+      </main>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-image: url(https://cdn.freecodecamp.org/curriculum/css-cafe/beans.jpg);
+}
+
+h1, h2, p {
+  text-align: center;
+}
+
+.menu {
+  width: 80%;
+  background-color: burlywood;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.item p {
+  display: inline-block;
+}
+
+--fcc-editable-region--
+.flavor {
+  text-align: left;
+  width: 75%;
+}
+--fcc-editable-region--
+
+.price {
+  text-align: right;
+  width: 25%
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md
new file mode 100644
index 00000000000..f277818f777
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c7e645d8e905819f1dd4.md
@@ -0,0 +1,181 @@
+---
+id: 6140c7e645d8e905819f1dd4
+title: الخطوة 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+ابدأ بالنموذج المعتاد. أضف تعريف `DOCTYPE`، وعنصر `html` مع تعين لغة الصفحة إلى ألانجليزية (en) وعنصر `head`, وعنصر `body`.
+
+أضف عنصر `meta` الخاص بك إلى `charset` الصحيحة، عنصر `title`، وعنصر `link` لمِلَفّ `./styles.css`.
+
+عيّن `title` إلى `Ferris Wheel`.
+
+# --hints--
+
+يجب أن يحتوي الكود الخاص بك على `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE/gi));
+```
+
+يجب عليك تضمين مسافة بعد `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+/gi));
+```
+
+يجب عليك تحديد نوع المستند ليكون `html`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html/gi));
+```
+
+يجب عليك إغلاق تعريف `DOCTYPE` مع `>` بعد إضافة type.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
+```
+
+يجب أن يحتوي عنصر `html` الخاص بك على علامة افتتاحية مع سمة `lang` بقيمة `en`.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+يجب أن يحتوي عنصر `html` الخاص بك على closing tag.
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+يجب أن يكون تعريف `DOCTYPE` في بداية HTML الخاص بك.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
+```
+
+يجب أن يكون لديك العلامة مفتوحة (opening tag) الآتية للعنصر `head`.
+
+```js
+assert(code.match(/<head\s*>/i));
+```
+
+يجب أن يكون لديك العلامة المغلقة (closing tag) الآتية للعنصر `head`.
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+يجب أن يكون لديك العلامة مفتوحة (opening tag) الآتية للعنصر `body`.
+
+```js
+assert(code.match(/<body\s*>/i));
+```
+
+يجب أن يكون لديك العلامة المغلقة (closing tag) الآتية للعنصر `body`.
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+عناصر `head` و `body` يجب أن يكونا أشقاء (siblings).
+
+```js
+assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
+```
+
+عنصر `head` يجب أن يكون داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
+```
+
+عنصر `body` يجب أن يكون داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
+```
+
+الكود الخاص بك يجب أن يحتوي على عنصر `meta`.
+
+```js
+const meta = document.querySelector('meta');
+assert.exists(meta);
+```
+
+يجب أن يحتوي عنصر `meta` الخاص بك على خاصية `charset` مع القيمة `UTF-8`.
+
+```js
+assert.match(code, /<meta[\s\S]+?charset=('|"|`)UTF-8\1/i)
+```
+
+الكود الخاص بك يجب أن يحتوي على عنصر `title`.
+
+```js
+const title = document.querySelector('title');
+assert.exists(title);
+```
+
+يجب أن يكون لمشروعك عنوان `Ferris Wheel`.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim()?.toLowerCase(), 'ferris wheel')
+```
+
+تذكر أن casing، أي حالة الحرف سواء كبير أو صغير (capital or small) والإملاء مهمان للعنوان.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim(), 'Ferris Wheel');
+```
+
+الكود الخاص بك يجب أن يحتوي على عنصر `link`.
+
+```js
+assert.match(code, /<link/)
+```
+
+الكود الخاص بك يجب أن يحتوي على عنصر `link` مغلق ذاتيا.
+
+```js
+assert(document.querySelectorAll('link').length === 1);
+```
+
+عنصر `link` الخاص بك يجب أن يكون داخل عنصر `head` الخاص بك.
+
+```js
+assert.exists(document.querySelector('head > link'));
+```
+
+عنصر `link` الخاص بك يجب أن يحتوي على سمة `rel` بقيمة `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+عنصر `link` الخاص بك يجب أن يحتوي على سمة `href` بقيمة `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c9d35015ae0ba0c250e8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c9d35015ae0ba0c250e8.md
new file mode 100644
index 00000000000..bd70dec0fe7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140c9d35015ae0ba0c250e8.md
@@ -0,0 +1,79 @@
+---
+id: 6140c9d35015ae0ba0c250e8
+title: الخطوة الثانية
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+أضف `div` داخل عنصر `body` وأعطيه `class` يسمي `wheel`.
+
+داخل `div` الجديد، أضف ستة عناصر `span` مع `class` يسمي `line`، وستة عناصر `div` مع `class` يسمي `cabin`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `div` جديد في عنصر `body` الخاص بك.
+
+```js
+const divs = [...document.querySelector('body')?.children].filter(child => child?.localName === 'div');
+assert(divs?.length === 1);
+```
+
+`div` داخل عنصر `body` يجب ان يحتوي علي `class` يسمي `wheel`.
+
+```js
+assert(document.querySelector('body div')?.classList?.contains('wheel'));
+```
+
+عنصر `.wheel` الخاص بك يجب أن يحتوي على ستة عناصر `span`.
+
+```js
+assert(document.querySelectorAll('.wheel span')?.length === 6);
+```
+
+يجب أن تحتوي عناصر `span` الستة الخاصة بك داخل عنصر `.wheel` على `class` يسمي `line`.
+
+```js
+const spans = [...document.querySelectorAll('.wheel span')];
+assert(spans?.every(span => span?.classList?.contains('line')));
+assert(document.querySelectorAll('.line')?.length === 6);
+```
+
+عنصر `.wheel` الخاص بك يجب أن يحتوي على ستة عناصر `div`.
+
+```js
+assert(document.querySelectorAll('.wheel div')?.length === 6);
+```
+
+يجب أن تحتوي عناصر `div` الستة الخاصة بك داخل عنصر `.wheel` على `class` يسمي `cabin`.
+
+```js
+const divs = [...document.querySelectorAll('.wheel div')];
+assert(divs?.every(div => div?.classList?.contains('cabin')));
+assert(document.querySelectorAll('.cabin')?.length === 6);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md
new file mode 100644
index 00000000000..14e196b7a72
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cbeec34e970dfe75e710.md
@@ -0,0 +1,74 @@
+---
+id: 6140cbeec34e970dfe75e710
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+قم بإنشاء منتقي لعنصر `.wheel` الخاص بك. ابدأ بتعيين `border` إلى `2px solid black`، و `border-radius`الي `50%`، و `margin-left` إلى `50px`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.wheel`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel'));
+```
+
+يجب أن يكون لمنتقي `.wheel` الخاص بك خاصية `border` بقيمة `2px solid black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.border === '2px solid black');
+```
+
+يجب أن يكون لمنتقي `.wheel` الخاص بك الخاصية `border-radius` بقيمة `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.borderRadius === '50%');
+```
+
+يجب أن يكون لمنتقي `.wheel` الخاص بك الخاصية `margin-left` بقيمة `50px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.marginLeft === '50px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md
new file mode 100644
index 00000000000..99b602ebc6d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cd32d018ed0f600eefce.md
@@ -0,0 +1,72 @@
+---
+id: 6140cd32d018ed0f600eefce
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+عيين قيمة خاصية `position` في منتقي `.wheel` إلى `absolute`. قم بتعيين `height` و `width` إلى `55vw`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.wheel` الخاص بك الخاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.position === 'absolute');
+```
+
+يجب أن يكون لمنتقي `.wheel` الخاص بك الخاصية `height` بقيمة `55vw`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.height === '55vw');
+```
+
+يجب أن يكون لمنتقي `.wheel` الخاص بك الخاصية `width` بقيمة `55vw`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.width === '55vw');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md
new file mode 100644
index 00000000000..ebf4b2b85ad
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cdebd39d6a101e747529.md
@@ -0,0 +1,85 @@
+---
+id: 6140cdebd39d6a101e747529
+title: الخطوة ٦
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+قم بإنشاء منتقي لعنصر `.line` الخاص بك. ابدأ من خلال تعيين `background-color` إلى `black` و `width` إلى `50%` و `height` إلى `2px`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.line`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line'));
+```
+
+يجب أن يحتوي منتقي `.line` على خاصية `background-color` تم تعيينها إلى `black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.backgroundColor === "black");
+```
+
+يجب أن يكون لمنتقي `.line` الخاص بك الخاصية `width` بقيمة `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.width === "50%");
+```
+
+يجب أن يكون لمنتقي `.line` الخاص بك الخاصية `height` بقيمة `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.height === "2px");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md
new file mode 100644
index 00000000000..f014f342a1a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140cfc08ca9c5128c3e6478.md
@@ -0,0 +1,83 @@
+---
+id: 6140cfc08ca9c5128c3e6478
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+قم بتعيين خاصية `position` لمنتقي `.line` القيمة `absolute` والخاصية `left` القيمة `50%`، والخاصية `top` القيمة `50%`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.line` الخاص بك الخاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.position === 'absolute');
+```
+
+يجب أن يكون لمنتقي `.line` الخاص بك الخاصية `left` بقيمة `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.left === '50%');
+```
+
+يجب أن يكون لمنتقي `.line` الخاص بك الخاصية `top` بقيمة `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line')?.top === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+--fcc-editable-region--
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md
new file mode 100644
index 00000000000..fbc3830e45d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d0069049f5139d78da40.md
@@ -0,0 +1,77 @@
+---
+id: 6140d0069049f5139d78da40
+title: الخطوة ٨
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+يتم استخدام خاصية `transform-origin` لتعيين النقطة التي يتم حولها تطبيق تحويل (transformation) CSS. على سبيل المثال، عند تنفيذ `rotate` (الذي ستفعله لاحقا في هذا المشروع)، يحدد `transform-origin` النقطة التي يتم تدوير العنصر حولها.
+
+قم بإعطاء منتقي `.line` خاصية `transform-origin` بقيمة `0% 0%`. سيؤدي هذا إلى موازنة تعويض (offset) النقطة الأصل من اليسار بقيمة `0%` ومن الأعلى `0%`، مع تعيينها في الزاوية اليسرى العلوية للعنصر.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.line` الخاص بك الخاصية `transform-origin` بقيمة `0% 0%`.
+
+```js
+const transformOrigin = new __helpers.CSSHelp(document).getStyle('.line')?.transformOrigin;
+assert(transformOrigin === '0% 0%' || transformOrigin === '0% 0% 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+--fcc-editable-region--
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md
new file mode 100644
index 00000000000..dd6e3e5b951
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d10d50636e14695013b2.md
@@ -0,0 +1,85 @@
+---
+id: 6140d10d50636e14695013b2
+title: الخطوة ٩
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+قم بإنشاء منتقي لاستهداف عنصر `.line` الثاني. قم بتعيين خاصية `transform` إلى `rotate(60deg)`.
+
+تذكر أن خاصية `transform` تسمح لك بالتلاعب بشكل عنصر ما. في هذه الحالة، باستخدام قيمة `rotate(60deg)` سيتم تدوير العنصر حول نقطة `transform-origin` بمقدار 60 درجة على مدار الساعة (clockwise).
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.line:nth-of-type(2)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)'));
+```
+
+يجب أن يكون لمنتقي `.line:nth-of-type(2)` خاصية `transform` بقيمة `rotate(60deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(2)')?.transform === 'rotate(60deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md
new file mode 100644
index 00000000000..994a47115eb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d1a351e88f159ed54fca.md
@@ -0,0 +1,126 @@
+---
+id: 6140d1a351e88f159ed54fca
+title: الخطوة ١٠
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+باستخدام نفس النمط، قم بإنشاء منتقي منفصل لثالث `.line`، و رابع `.line`، و خامس `.line`، و سادس `.line`.
+
+قم بتعيين خاصية `transform` للـ `.line` الثالث إلى `rotate(120deg)` و الرابع إلى `rotate(180deg)` و الخامس إلى `rotate(240deg)` والسادس إلى `rotate(300deg)`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.line:nth-of-type(3)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)'));
+```
+
+يجب أن يكون لمنتقي `.line:nth-of-type(3)` خاصية `transform` بقيمة `rotate(120deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(3)')?.transform === 'rotate(120deg)');
+```
+
+يجب عليك إنشاء منتقي `.line:nth-of-type(4)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)'));
+```
+
+يجب أن يكون لمنتقي `.line:nth-of-type(4)` خاصية `transform` بقيمة `rotate(180deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(4)')?.transform === 'rotate(180deg)');
+```
+
+يجب عليك إنشاء منتقي `.line:nth-of-type(5)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)'));
+```
+
+يجب أن يكون لمنتقي `.line:nth-of-type(5)` خاصية `transform` بقيمة `rotate(240deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(5)')?.transform === 'rotate(240deg)');
+```
+
+يجب عليك إنشاء منتقي `.line:nth-of-type(6)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)'));
+```
+
+يجب أن يكون لمنتقي `.line:nth-of-type(6)` خاصية `transform` بقيمة `rotate(300deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.line:nth-of-type(6)')?.transform === 'rotate(300deg)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md
new file mode 100644
index 00000000000..68b79cbe1d9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d263016325162fd076fe.md
@@ -0,0 +1,111 @@
+---
+id: 6140d263016325162fd076fe
+title: الخطوة ١١
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+قم بإنشاء منتقي `.cabin`. قم بتعيين `background-color` إلى `red`، و `width` إلى `20%` و `height` إلى `20%`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.cabin`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin'));
+```
+
+يجب أن يكون لمنتقي `.cabin` الخاص بك الخاصية `background-color` بقيمة `red`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.backgroundColor === 'red');
+```
+
+يجب أن يكون لمنتقي `.cabin` الخاص بك الخاصية `width` بقيمة `20%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.width === '20%');
+```
+
+يجب أن يكون لمنتقي `.cabin` الخاص بك الخاصية `height` بقيمة `20%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.height === '20%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d2b687a2cd17bac5730c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d2b687a2cd17bac5730c.md
new file mode 100644
index 00000000000..ea9f1def5d2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d2b687a2cd17bac5730c.md
@@ -0,0 +1,103 @@
+---
+id: 6140d2b687a2cd17bac5730c
+title: الخطوة ١٢
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+قم بأعطاء `.cabin` خاصية `position` بقيمة `absolute`، و خاصية `border` بقيمة `2px solid`.
+
+# --hints--
+
+يجب إن يكون المحدد `.cabin` الخاص بك يحمل خاصية `position`و تكون قيمة الخاصية `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.position === 'absolute');
+```
+
+يجب إن يكون المحدد `.cabin` الخاص بك يحمل خاصية `border`و تكون قيمة الخاصية `2px solid`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.border === '2px solid');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+--fcc-editable-region--
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md
new file mode 100644
index 00000000000..89652b8dc19
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d36b8b747718b50d4b7a.md
@@ -0,0 +1,100 @@
+---
+id: 6140d36b8b747718b50d4b7a
+title: الخطوة ١٣
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+عيّن خاصية `.cabin` ليكون لها `transform-origin` بقيمة `50% 0%`. سيؤدي هذا إلى تعيين إزاحة نقطة الأصل `50%` من اليسار و `0%` من الأعلى، ووضعها في منتصف الحافة العلوية للعنصر.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.cabin` الخاص بك الخاصية `transform-origin` بقيمة `50% 0%`.
+
+```js
+const transformOrigin = new __helpers.CSSHelp(document).getStyle('.cabin')?.transformOrigin;
+assert(transformOrigin === '50% 0%' || transformOrigin === '50% 0% 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+--fcc-editable-region--
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d3dc359b371b1a21d783.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d3dc359b371b1a21d783.md
new file mode 100644
index 00000000000..cda8253875e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d3dc359b371b1a21d783.md
@@ -0,0 +1,117 @@
+---
+id: 6140d3dc359b371b1a21d783
+title: الخطوة ١٤
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+حان الوقت لوضع الكبائن (cabins) حول العجلة (wheel). حدد عنصر `.cabin` الأول. قم بتعيين خاصية `right` إلى `-8.5%` و خاصية `top` إلى `50%`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.cabin:nth-of-type(1)`.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s) 
+assert.exists(def('.cabin:first-of-type') || def('.cabin:nth-of-type(1)'));
+```
+
+يجب أن يكون لمنتقي `.cabin:nth-of-type(1)` خاصية `right` محددة إلى `-8.5%`.
+
+```js
+const right = (s) => new __helpers.CSSHelp(document).getStyle(s)?.right
+assert.equal(right('.cabin:nth-of-type(1)') || right('.cabin:first-of-type'), '-8.5%');
+```
+
+يجب أن يكون لمنتقي `.cabin:nth-of-type(1)` خاصية `top` محددة إلى `50%`.
+
+```js
+const top = (s) => new __helpers.CSSHelp(document).getStyle(s)?.top
+assert.equal(top('.cabin:nth-of-type(1)') || top('.cabin:first-of-type'),'50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d4bc9db3c81c51a09ab7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d4bc9db3c81c51a09ab7.md
new file mode 100644
index 00000000000..2876ff12565
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d4bc9db3c81c51a09ab7.md
@@ -0,0 +1,199 @@
+---
+id: 6140d4bc9db3c81c51a09ab7
+title: خطوة ١٥
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+متابعة للنمط، حدد عناصر `.cabin` التالية و طبق القواعد المحددة عليها:
+
+- ثاني `.cabin` يجب أن يكون لديه الخاصية `right` بقيمة `17%` و الخاصية `top` بقيمة `93.5%`.
+- ثالث `.cabin` يجب أن يكون لديه الخاصية `right` بقيمة `67%` و الخاصية `top` بقيمة `93.5%`.
+- رابع `.cabin` يجب أن يكون لديه الخاصية `left` بقيمة `-8.5%` و الخاصية `top` بقيمة `50%`.
+- خامس `.cabin` يجب أن يكون لديه الخاصية `left` بقيمة `17%` و الخاصية `top` بقيمة `7%`.
+- سادس `.cabin` يجب أن يكون لديه الخاصية `right` بقيمة `17%` و الخاصية `top` بقيمة `7%`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.cabin:nth-of-type(2)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)'));
+```
+
+يجب أن يكون لمنتقي `.cabin:nth-of-type(2)` خاصية `right` محددة إلى `17%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.right === '17%');
+```
+
+يجب أن يكون لمنتقي `.cabin:nth-of-type(2)` خاصية `top` محددة إلى `93.5%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(2)')?.top === '93.5%');
+```
+
+يجب أن يكون لديك منتقي `.cabin:nth-of-type(3)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)'));
+```
+
+يجب أن يكون لمنتقي `.cabin:nth-of-type(3)` خاصية `right` محددة إلى `67%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.right === '67%');
+```
+
+يجب أن يكون لمنتقي `.cabin:nth-of-type(3)` خاصية `top` محددة إلى `93.5%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(3)')?.top === '93.5%');
+```
+
+يجب أن يكون لديك منتقي `.cabin:nth-of-type(4)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)'));
+```
+
+يجب أن يكون لمنتقي `.cabin:nth-of-type(4)` خاصية `left` محددة إلى `-8.5%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.left === '-8.5%');
+```
+
+يجب أن يكون لمنتقي `.cabin:nth-of-type(4)` خاصية `top` محددة إلى `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(4)')?.top === '50%');
+```
+
+يجب أن يكون لديك منتقي `.cabin:nth-of-type(5)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)'));
+```
+
+يجب أن يكون لمنتقي `.cabin:nth-of-type(5)` خاصية `left` محددة إلى `17%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.left === '17%');
+```
+
+يجب أن يكون لمنتقي `.cabin:nth-of-type(5)` خاصية `top` محددة إلى `7%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin:nth-of-type(5)')?.top === '7%');
+```
+
+يجب أن يكون لديك منتقي `.cabin:nth-of-type(6)`.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s)
+assert(def('.cabin:nth-of-type(6)') || def('.cabin:last-of-type'));
+```
+
+يجب أن يكون لمنتقي `.cabin:nth-of-type(6)` خاصية `right` محددة إلى `17%`.
+
+```js
+const right = (s) => new __helpers.CSSHelp(document).getStyle(s)?.right
+assert.equal(right('.cabin:nth-of-type(6)') || right('.cabin:last-of-type'),'17%');
+```
+
+يجب أن يكون لمنتقي `.cabin:nth-of-type(6)` خاصية `top` محددة إلى `7%`.
+
+```js
+const top = (s) => new __helpers.CSSHelp(document).getStyle(s)?.top
+assert.equal(top('.cabin:nth-of-type(6)') || top('.cabin:last-of-type'),'7%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md
new file mode 100644
index 00000000000..cfe308d980e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140d94b5fab7f1d73c9bedb.md
@@ -0,0 +1,137 @@
+---
+id: 6140d94b5fab7f1d73c9bedb
+title: الخطوة ١٦
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+تستخدم القاعدة `@keyframes` لتحديد تدفق الرسوم المتحركة (animation) لـ CSS. ضمن قاعدة `@keyframes`، يمكنك إنشاء selectors لنقاط محددة في سلسلة الرسوم المتحركة (animation sequence)، مثل `0%` أو `25%`، أو استخدام `from` و `to` لتحديد بداية ونهاية التسلسل.
+
+تتطلب قواعد `@keyframes` تعيين اسم لها، والذي تستخدمه في القواعد الأخرى للاشارة إليه. على سبيل المثال، قاعدة `@keyframes freeCodeCamp { }` سيتم تسميتها `freeCodeCamp`.
+
+حان الوقت لبدء الرسوم المتحركة (animating). قم بإنشاء قاعدة `@keyframes` اسمها `wheel`.
+
+# --hints--
+
+يجب أن يكون لديك قاعدة `@keyframes`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 1);
+```
+
+قاعدة `@keyframes` الجديدة الخاصة بك يجب أن تسمى `wheel`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md
new file mode 100644
index 00000000000..b2685c32f84
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dc5e13d0c81e7496f182.md
@@ -0,0 +1,139 @@
+---
+id: 6140dc5e13d0c81e7496f182
+title: الخطوة ١٧
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+تحتاج الآن إلى تحديد كيفية بدء الرسوم المتحركة (animation) الخاصة بك. للقيام بذلك، أنشئ قاعدة `0%` ضمن قاعدة `@keyframes wheel` الخاصة بك. سيتم تطبيق الخصائص التي قمت بتعيينها في هذا المنتقي المدمج (nested selector) في بداية الرسوم المتحركة (animation) الخاصة بك.
+
+كمثال ، ستكون هذه قاعدة `12%`:
+
+```css
+@keyframes freecodecamp {
+  12% {
+    color: green;
+  }
+}
+```
+
+# --hints--
+
+يجب أن تحتوي قاعدة `@keyframes wheel` الخاصة بك على منتقي `0%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.keyText === '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+--fcc-editable-region--
+@keyframes wheel {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md
new file mode 100644
index 00000000000..299057da232
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140dd77e0bc5a1f70bd7466.md
@@ -0,0 +1,131 @@
+---
+id: 6140dd77e0bc5a1f70bd7466
+title: الخطوة ١٨
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+أعطي قاعدة `0%` الخاصية `transform` بقيمة `rotate(0deg)`. هذا سيبدأ الحركة (animation) دون دوران (rotation).
+
+# --hints--
+
+يجب أن يكون لمنتقي `0%` الخاص بك خاصية `transform` بقيمة `rotate(0deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+--fcc-editable-region--
+@keyframes wheel {
+   0% {
+
+   }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md
new file mode 100644
index 00000000000..d119e15543e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140de31b1f5b420410728ff.md
@@ -0,0 +1,146 @@
+---
+id: 6140de31b1f5b420410728ff
+title: الخطوة ١٩
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+الآن أعطى قاعدة `@keyframes wheel` منتقي `100%`. وضمن ذلك، عيّن `transform` إلى `rotate(360deg)`. من خلال القيام بذلك، الرسوم المتحركة الخاصة بك سوف تكمل الآن دوران كامل (full rotation).
+
+# --hints--
+
+يجب أن تحتوي قاعدة `@keyframes wheel` الخاصة بك على منتقي `100%`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules
+assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%');
+```
+
+يجب أن يأتي منتقي `100%` الخاص بك بعد منتقي `0%` الخاص بك.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.keyText === '100%')
+```
+
+يجب أن يكون لمنتقي `100%` الخاص بك خاصية `transform` بقيمة `rotate(360deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.cssRules?.[1]?.style?.transform === 'rotate(360deg)')
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+--fcc-editable-region--
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md
new file mode 100644
index 00000000000..d798555b6ed
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140df547f09402144e40b92.md
@@ -0,0 +1,142 @@
+---
+id: 6140df547f09402144e40b92
+title: الخطوة ٢٠
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+يتم استخدام خاصية `animation-name` لربط قاعدة `@keyframes` بمنتقي CSS. قيمة هذه الخاصية يجب أن تتطابق مع اسم قاعدة `@keyframes`. اعطي منتقي `.wheel` خاصية `animation-name` بقيمة `wheel`.
+
+يتم استخدام خاصية `animation-duration` لتعيين المدة التي يجب أن تكتمل فيها السلسلة المتحركة. يجب تحديد الوقت إما بالثواني (`s`) أو بالمللي ثانية (`ms`). قم بتعيين منتقي `.wheel` خاصية `animation-duration` بقيمة `10s`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.wheel` الخاص بك الخاصية `animation-name` بقيمة `wheel`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationName === 'wheel');
+```
+
+يجب أن يكون لمنتقي `.wheel` الخاص بك الخاصية `animation-duration` بقيمة `10s`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationDuration === '10s');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+}
+--fcc-editable-region--
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md
new file mode 100644
index 00000000000..83048d8d300
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140e0d875ec16262f26432b.md
@@ -0,0 +1,144 @@
+---
+id: 6140e0d875ec16262f26432b
+title: الخطوة ٢١
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+الخاصية `animation-iteration-count` تحدد عدد مرات تكرار الرسم المتحرك. يمكن تعيين هذا إلى عدد، أو إلى `infinite` لتكرار الرسوم المتحركة إلى أجل غير مسمى. لا ينبغي Ferris wheel الخاصة بك أن تتوقف أبدا، لذا عيّن منتقي `.wheel` ليكون لديه `animation-iteration-count` بقيمة `infinite`.
+
+تحدد الخاصية `animation-timing-function` كيفية تقدم الحركة بمرور الوقت. هناك بعض القيم المختلفة لهذه الخاصية، ولكنك تريد تشغيل الرسوم المتحركة إلى Ferris wheel بنفس المعدل من البداية إلى النهاية. قم بتعيين `animation-timing-function` إلى `linear` في منتقي `.wheel` الخاص بك.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.wheel` الخاص بك الخاصية `animation-iteration-count` بقيمة `infinite`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationIterationCount === 'infinite');
+```
+
+يجب أن يكون لمنتقي `.wheel` الخاص بك الخاصية `animation-timing-function` بقيمة `linear`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.animationTimingFunction === 'linear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+}
+--fcc-editable-region--
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md
new file mode 100644
index 00000000000..1fe3396786d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6140f4b5c1555a2960de1e5f.md
@@ -0,0 +1,191 @@
+---
+id: 6140f4b5c1555a2960de1e5f
+title: الخطوة ٢٢
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+قم بإنشاء قاعدة أخرى `@keyframes` باسم `cabins`. استخدم نفس الخصائص كـ `@keyframes wheel`، بنسخ كل من قواعد `0%` و `100%` ولكن مع تعيين خاصية `transform` لمنتقي `100%` إلى `rotate(-360deg)`.
+
+# --hints--
+
+يجب أن يكون لديك قاعدة `@keyframes`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.length === 2);
+```
+
+قاعدة `@keyframes` الجديدة الخاصة بك يجب أن تسمى `cabins`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes');
+assert(rules?.[0]?.name === 'cabins' || rules?.[1]?.name === 'cabins');
+```
+
+قاعدة `@keyframes` الجديدة يجب أن تأتي بعد قاعدة `@keyframes wheel` الخاصة بك.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.name === 'cabins');
+```
+
+لا يجب عليك تغيير اسم قاعدة `@keyframes wheel` الخاصة بك.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name === 'wheel');
+```
+
+يجب أن تحتوي قاعدة `@keyframes cabins` الخاصة بك على منتقي `0%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.keyText === '0%');
+```
+
+يجب أن يكون لمنتقي `0%` الخاص بك خاصية `transform` بقيمة `rotate(0deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.transform === 'rotate(0deg)');
+```
+
+يجب أن تحتوي قاعدة `@keyframes cabins` الخاصة بك على منتقي `100%`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules
+assert(rules?.[0]?.keyText === '100%' || rules?.[1]?.keyText === '100%');
+```
+
+يجب أن يأتي منتقي `100%` الخاص بك بعد منتقي `0%` الخاص بك.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '100%')
+```
+
+يجب أن يكون لمنتقي `100%` الخاص بك خاصية `transform` بقيمة `rotate(-360deg)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.transform === 'rotate(-360deg)')
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md
new file mode 100644
index 00000000000..c0dba7afd7a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/614100d7d335bb2a5ff74f1f.md
@@ -0,0 +1,149 @@
+---
+id: 614100d7d335bb2a5ff74f1f
+title: الخطوة ٢٣
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+مع منتقي `.wheel` الخاص بك، قمت بإنشاء أربع خصائص مختلفة للتحكم في الرسوم المتحركة. من أجل منتقي `.cabin` الخاص بك، يمكنك استخدام خاصية `animation` لتعيين كل هذه الأشياء في وقت واحد.
+
+قم بتعيين خاصية `animation` لقاعدة `.cabin` إلى `cabins 10s linear infinite`. سيؤدي هذا إلى تعيين `animation-name`, و `animation-duration`, و `animation-timing-function`, و `animation-iteration-count` بهذا الترتيب.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.cabin` الخاص بك الخاصية `animation` بقيمة `cabins 10s linear infinite`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s linear 0s infinite normal none running cabins');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+--fcc-editable-region--
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+}
+--fcc-editable-region--
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
new file mode 100644
index 00000000000..655ff16e831
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/61410126fa3a6d2b3cda502e.md
@@ -0,0 +1,151 @@
+---
+id: 61410126fa3a6d2b3cda502e
+title: الخطوة ٢٤
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+لجعل حركة cabin يبدو أشبه بحركة تأرجح طبيعية، يمكنك استخدام وظيفة التوقيت `ease-in-out`. هذا الإعداد سيجعل الرسوم المتحركة تبدأ وتنتهي بوتيرة أبطأ، لكن تتحرك بسرعة أكبر في منتصف الدورة.
+
+استبدل `linear` ألى `ease-in-out` في منتقي `.cabin`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.cabin` الخاص بك الخاصية `animation` بقيمة `cabins 10s ease-in-out infinite`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cabin')?.animation === '10s ease-in-out 0s infinite normal none running cabins');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+--fcc-editable-region--
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s linear infinite;
+}
+--fcc-editable-region--
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md
new file mode 100644
index 00000000000..55bb0ed72cc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141019eadec6d2c6c6f007b.md
@@ -0,0 +1,148 @@
+---
+id: 6141019eadec6d2c6c6f007b
+title: خطوة ٢٥
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+يمكنك استخدام قواعد `@keyframes` للتحكم بأكثر من مجرد تحويل عنصر ما. في منتقي `0%` الخاص بـ `@keyframes cabins`، قم بتعيين `background-color` إلى `yellow`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `0%` على خاصية `background-color` تم تعيينها إلى `yellow`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor === 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+--fcc-editable-region--
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md
new file mode 100644
index 00000000000..f887c68ab7d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6141026ec9882f2d39dcf2b8.md
@@ -0,0 +1,291 @@
+---
+id: 6141026ec9882f2d39dcf2b8
+title: الخطوة ٢٦
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+بين منتقي `0%` و `100%` أضف منتقي `50%`. سيتم تطبيق هذا في منتصف دورة الحركة. قم بتعيين `background-color` إلى `purple`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `50%` جديد في قاعدة `@keyframes cabins` الخاصة بك.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
+assert(rules?.[0]?.keyText === '50%' || rules?.[1]?.keyText === '50%' || rules?.[2]?.keyText === '50%'); 
+```
+
+يجب أن يكون منتقي `50%` بين منتقيات `0%` و `100%` الخاصة بك.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '50%');
+```
+
+يجب أن يكون لمنتقي `50%` الخاص بك خاصية `background-color` بقيمة `purple`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'purple');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+--fcc-editable-region--
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+    background-color: yellow;
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+--fcc-editable-region--
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+    background-color: yellow;
+  }
+  50% {
+    background-color: purple;
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md
new file mode 100644
index 00000000000..51fac1dd383
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169ab1aaeb4cd1174def700.md
@@ -0,0 +1,154 @@
+---
+id: 6169ab1aaeb4cd1174def700
+title: خطوة ٢٧
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+نظرًا لأن الحركة الموجود في حلقة لا نهائية ولون البداية والنهاية غير متماثلتين, فإن الانتقال يظهر متقطعًا عندما يتحول إلى اللون الأصفر من الأحمر.
+
+لإصلاح هذا، قم بإزالة `background-color` من منتقي `0%` الخاص بك.
+
+# --hints--
+
+يجب ألا يكون لمنتقي `0%` الخاص بك خاصية `background-color`.
+
+```js
+assert(!new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[0]?.style?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+--fcc-editable-region--
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+    background-color: yellow;
+  }
+  50% {
+    background-color: purple;
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md
new file mode 100644
index 00000000000..4bb38a01e12
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b1357fcb701bb5efc619.md
@@ -0,0 +1,164 @@
+---
+id: 6169b1357fcb701bb5efc619
+title: الخطوة ٢٨
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+قم بإنشاء منتقي `25%` جديد بين منتقيات `0%` و `50%` الخاصة بك. أعطِ هذا المنتقي الجديد خاصية `background-color` التي تم تعيينها إلى `yellow`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `25%` جديد في قاعدة `@keyframes cabins` الخاصة بك.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
+assert(rules?.[0]?.keyText === '25%' || rules?.[1]?.keyText === '25%' || rules?.[2]?.keyText === '25%' || rules?.[3]?.keyText === '25%');
+```
+
+يجب أن يكون منتقي `25%` بين منتقيات `0%` و `50%` الخاصة بك.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.keyText === '25%');
+```
+
+يجب أن يحتوي منتقي `25%` على خاصية `background-color` تم تعيينها إلى `yellow`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[1]?.style?.backgroundColor === 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+--fcc-editable-region--
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    background-color: purple;
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md
new file mode 100644
index 00000000000..7c67a973db9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/6169b284950e171d8d0bb16a.md
@@ -0,0 +1,304 @@
+---
+id: 6169b284950e171d8d0bb16a
+title: الخطوة ٢٩
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+أخيراً، قم بإنشاء منتقي `75%` جديد بين منتقيات `50%` و `100%` الخاصة بك. أعطِ هذا المنتقي الجديد خاصية `background-color` التي تم تعيينها إلى `yellow`.
+
+وبذلك تكون الرسوم المتحركة الخاصة بك أكثر سلاسة وقد اكتملت الـ Ferris wheel.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `75%` جديد في قاعدة `@keyframes cabins` الخاصة بك.
+
+```js
+const rules = new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules;
+assert(rules?.[0]?.keyText === '75%' || rules?.[1]?.keyText === '75%' || rules?.[2]?.keyText === '75%' || rules?.[3]?.keyText === '75%' || rules?.[4]?.keyText === '75%');
+```
+
+يجب أن يكون منتقي `75%` بين منتقيات `50%` و `100%` الخاصة بك.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.keyText === '75%');
+```
+
+يجب أن يحتوي منتقي `75%` على خاصية `background-color` تم تعيينها إلى `yellow`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[1]?.cssRules?.[3]?.style?.backgroundColor === 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+--fcc-editable-region--
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    background-color: yellow;
+  }
+  50% {
+    background-color: purple;
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+--fcc-editable-region--
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+  max-width: 500px;
+  max-height: 500px;
+  animation-name: wheel;
+  animation-duration: 10s;
+  animation-iteration-count: infinite;
+  animation-timing-function: linear;
+}
+
+.line {
+  background-color: black;
+  width: 50%;
+  height: 2px;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform-origin: 0% 0%;
+}
+
+.line:nth-of-type(2) {
+  transform: rotate(60deg);
+}
+.line:nth-of-type(3) {
+  transform: rotate(120deg);
+}
+.line:nth-of-type(4) {
+  transform: rotate(180deg);
+}
+.line:nth-of-type(5) {
+  transform: rotate(240deg);
+}
+.line:nth-of-type(6) {
+  transform: rotate(300deg);
+}
+
+.cabin {
+  background-color: red;
+  width: 20%;
+  height: 20%;
+  position: absolute;
+  border: 2px solid;
+  transform-origin: 50% 0%;
+  animation: cabins 10s ease-in-out infinite;
+}
+
+.cabin:nth-of-type(1) {
+  right: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(2) {
+  right: 17%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(3) {
+  right: 67%;
+  top: 93.5%;
+}
+.cabin:nth-of-type(4) {
+  left: -8.5%;
+  top: 50%;
+}
+.cabin:nth-of-type(5) {
+  left: 17%;
+  top: 7%;
+}
+.cabin:nth-of-type(6) {
+  right: 17%;
+  top: 7%;
+}
+
+@keyframes wheel {
+   0% {
+     transform: rotate(0deg);
+   }
+   100% {
+     transform: rotate(360deg);
+   }
+}
+
+@keyframes cabins {
+  0% {
+    transform: rotate(0deg);
+  }
+  25% {
+    background-color: yellow;
+  }
+  50% {
+    background-color: purple;
+  }
+  75% {
+    background-color: yellow;
+  }
+  100% {
+    transform: rotate(-360deg);
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md
new file mode 100644
index 00000000000..92bddd80971
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-animation-by-building-a-ferris-wheel/617ace7d831f9c16a569b38a.md
@@ -0,0 +1,69 @@
+---
+id: 617ace7d831f9c16a569b38a
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+قم بإعطاء منتقي `.wheel` الخاص بك `max-height` و `max-width` بقيمة `500px`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.wheel` الخاص بك الخاصية `max-height` بقيمة `500px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxHeight === '500px');
+```
+
+يجب أن يكون لمنتقي `.wheel` الخاص بك الخاصية `max-width` بقيمة `500px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.wheel')?.maxWidth === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Ferris Wheel</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div class="wheel">
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+      <span class="line"></span>
+
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+      <div class="cabin"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+.wheel {
+  border: 2px solid black;
+  border-radius: 50%;
+  margin-left: 50px;
+  position: absolute;
+  height: 55vw;
+  width: 55vw;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md
new file mode 100644
index 00000000000..d56d68066b5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695197ac34f0407e339882.md
@@ -0,0 +1,66 @@
+---
+id: 61695197ac34f0407e339882
+title: الخطوة الأولى
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+كما رأيت في المشاريع السابقة، ينبغي أن تبدأ صفحات الويب بتعريف `DOCTYPE html` ، يليه عنصر `html`.
+
+قم بإضافة تعريف `DOCTYPE html` في الجزء العلوي من الوثيقة، وعنصر `html` بعد ذلك. اعطي عنصر `html` سمة `lang` بقيمة `en`.
+
+# --hints--
+
+يجب أن يحتوي الكود الخاص بك على `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE/gi));
+```
+
+يجب عليك تضمين مسافة بعد `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+/gi));
+```
+
+يجب عليك تحديد نوع المستند ليكون `html`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html/gi));
+```
+
+يجب عليك إغلاق تعريف `DOCTYPE` مع `>` بعد type.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
+```
+
+يجب أن يحتوي عنصر `html` الخاص بك على علامة افتتاحية مع سمة `lang` بقيمة `en`.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+يجب أن يحتوي عنصر `html` الخاص بك على closing tag.
+
+```js
+assert(code.match(/<\/html\s*>/gi));
+```
+
+يجب أن يكون تعريف `DOCTYPE` في بداية HTML الخاص بك.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md
new file mode 100644
index 00000000000..d27cd711e2f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695ab9f6ffe951c16d03dd.md
@@ -0,0 +1,103 @@
+---
+id: 61695ab9f6ffe951c16d03dd
+title: الخطوة الثانية
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+قم بإضافة عنصر `head` ضمن عنصر `html`. بعد عنصر `head` مباشرة، أضف عنصر `body`.
+
+# --hints--
+
+يجب أن يكون لديك الـ opening tag للـ `head`.
+
+```js
+assert(code.match(/<head\s*>/i));
+```
+
+يجب أن يكون لديك الـ closing tag للـ `head`.
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+يجب أن يكون لديك الـ opening tag للـ `body`.
+
+```js
+assert(code.match(/<body\s*>/i));
+```
+
+يجب أن يكون لديك الـ closing tag للـ `body`.
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+يجب أن يكون هناك علامة فتح `head` واحدة فقط.
+
+```js
+assert(code.match(/<head\s*>/ig).length === 1);
+```
+
+يجب أن يكون هناك علامة أغلاق `head` واحدة فقط.
+
+```js
+assert(code.match(/<\/head\s*>/ig).length === 1);
+```
+
+يجب أن يكون هناك علامة فتح `body` واحدة فقط.
+
+```js
+assert(code.match(/<body\s*>/ig).length === 1);
+```
+
+يجب أن يكون هناك علامة أغلاق `body` واحدة فقط.
+
+```js
+assert(code.match(/<\/body\s*>/ig).length === 1);
+```
+
+يجب أن يكون عنصر `head` فارغاً.
+
+```js
+assert(code.match(/<head\s*>\s*<\/head\s*>/i));
+```
+
+يجب أن يكون عنصر `body` فارغاً.
+
+```js
+assert(code.match(/<body\s*>\s*<\/body\s*>/i));
+```
+
+يجب أن يأتي عنصر `body` الخاص بك بعد عنصر `head` الخاص بك.
+
+```js
+assert(code.match(/<\/head\s*>\s*<body\s*>/i));
+```
+
+يجب أن يكون عنصر `head` داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
+```
+
+يجب أن يكون عنصر `body` داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md
new file mode 100644
index 00000000000..cc3675189aa
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695c4aad56f95497c19583.md
@@ -0,0 +1,56 @@
+---
+id: 61695c4aad56f95497c19583
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+تذكر أن عنصر `title` يعطي محركات البحث معلومات إضافية عن الصفحة. كما أنه يخبر المتصفحات ما هو النص الذي سيتم عرضه في شريط العنوان عندما تكون الصفحة مفتوحة، وعلى علامة التبويب للصفحة.
+
+داخل عنصر `head`، قم بدمج عنصر `title` مع النص `Colored Markers`.
+
+# --hints--
+
+يجب أن يكون لديك الـ opening tag للـ `title`.
+
+```js
+assert(code.match(/<title\s*>/i));
+```
+
+يجب أن يكون لديك الـ closing tag للـ `title`.
+
+```js
+assert(code.match(/<\/title\s*>/i));
+```
+
+يجب أن يكون عنوان مشروعك `Colored Markers`.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim()?.toLowerCase(), 'colored markers')
+```
+
+تذكر أن الـ casing، اي حالة الحرف سواء كبير او صغير (capital or small) والإملاء مهمان للعنوان.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim(), 'Colored Markers');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md
new file mode 100644
index 00000000000..8d49e228d9c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61695d1fbc003856628bf561.md
@@ -0,0 +1,52 @@
+---
+id: 61695d1fbc003856628bf561
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+لأخبار المتصفحات عن كيفية ترميز الأحرف ( encode characters) على صفحتك، قم بتعيين `charset` إلى `utf-8`. `utf-8` هي مجموعة أحرف عالمية تتضمن تقريبًا كل حرف من جميع اللغات البشرية.
+
+داخل عنصر `head` قم بدمج عنصر `meta` مع السمة `charset` بقيمة `utf-8`. تذكر أن `meta` عناصر مغلقة ذاتيا، ولا تحتاج إلى علامة إغلاق.
+
+# --hints--
+
+يجب أن يكون لديك عنصر `meta` واحد.
+
+```js
+const meta = document.querySelectorAll('meta');
+assert(meta?.length === 1);
+```
+
+يجب أن يكون عنصر `meta` عنصر مغلق ذاتيا (self-closing element).
+
+```js
+assert(code.match(/<\/meta>/i) === null);
+```
+
+يجب أن يحتوي عنصر `meta` على السمة `charset` بقيمة `utf-8`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
+assert.exists(target);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <title>Colored Markers</title>
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md
new file mode 100644
index 00000000000..936538689c3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md
@@ -0,0 +1,52 @@
+---
+id: 616965351e74d4689eb6de30
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+ضف عنصر `meta` ذاتي الأغلاق داخل `head`. أعطيه سمة `name` بقيمة `viewport` و سمة `content` بقيمة `width=device-width, initial-scale=1.0` حتى تطابق مظهر صحفتك في كل الأجهزة.
+
+# --hints--
+
+يجب أن يكون لديك عنصران `meta`.
+
+```js
+const meta = document.querySelectorAll('meta');
+assert(meta?.length === 2);
+```
+
+يجب أن يكون عنصر `meta` مغلق ذاتيا (self-closing).
+
+```js
+assert(code.match(/<\/meta>/i) === null);
+```
+
+يجب أن يحتوي عنصر `meta` الجديد على السمة `name` بقيمة `viewport`، و السمة `content` بقيمة `width=device-width, initial-scale=1.0`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const reValidContent = /^\s*width\s*=\s*device-width\s*,\s*initial-scale\s*=\s*1(?:\.0)?\s*$/;
+const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && reValidContent.test(m?.getAttribute('content')));
+assert.exists(target);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="utf-8">
+    <title>Colored Markers</title>
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md
new file mode 100644
index 00000000000..bf9278b6593
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616968c2c94c8071b349c146.md
@@ -0,0 +1,72 @@
+---
+id: 616968c2c94c8071b349c146
+title: الخطوة ٦
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+أنت الآن على استعداد لبدء إضافة محتوى إلى الصفحة.
+
+داخل عنصر `body`، قم بدمج عنصر `h1` مع النص `CSS Color Markers`.
+
+# --hints--
+
+يجب أن يحتوي كودك على عنصر `h1`.
+
+```js
+const title = document.querySelector('h1');
+assert.exists(title);
+```
+
+يجب أن يكون لديك سمة مفتوحة (opening tag) الآتية `h1`.
+
+```js
+assert(code.match(/<h1\s*>/i));
+```
+
+يجب أن يكون لديك سمة مغلقة (closing tag) الآتية `h1`.
+
+```js
+assert(code.match(/<\/h1\s*>/i));
+```
+
+يجب أن يكون عنصرك `h1` داخل عنصرك `body`.
+
+```js
+assert(document.querySelector('h1')?.parentElement?.localName === 'body');
+```
+
+يجب أن يحتوي عنصر `h1` على النص `CSS Color Markers`.
+
+```js
+const h1 = document.querySelector('h1');
+assert.equal(h1?.textContent?.trim()?.toLowerCase(), 'css color markers')
+```
+
+تذكر أن الحالة الحرف سواء كبيراً أو صغيراً, والإملاء مهمان للنص بداخل `h1`.
+
+```js
+const h1 = document.querySelector('h1');
+assert.equal(h1?.textContent?.trim(), 'CSS Color Markers');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md
new file mode 100644
index 00000000000..10b848d3403
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61696ef7ac756c829f9e4048.md
@@ -0,0 +1,65 @@
+---
+id: 61696ef7ac756c829f9e4048
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+في هذا المشروع ستعمل مع ملف CSS خارجي لتصميم الصفحة. لقد قمنا بالفعل بإنشاء ملف `styles.css` لك. ولكن قبل أن تتمكن من استخدامه، ستحتاج إلى ربطه بالصفحة.
+
+قم بدمج عنصر `link` داخل `head`. اعطيها سمة `rel` بقيمة `stylesheet` و `href` بقيمة `styles.css`.
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على عنصر `link` مغلق ذاتيا.
+
+```js
+assert(document.querySelectorAll('link').length === 1);
+```
+
+عنصر `link` الخاص بك يجب أن يكون داخل عنصر `head` الخاص بك.
+
+```js
+assert.exists(document.querySelector('head > link'));
+```
+
+عنصر `link` الخاص بك يجب أن يحتوي على سمة `rel` بقيمة `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+عنصر `link` الخاص بك يجب أن يحتوي على سمة `href` بقيمة `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  --fcc-editable-region--
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+  </head>
+  --fcc-editable-region--
+  <body>
+    <h1>CSS Color Markers</h1>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md
new file mode 100644
index 00000000000..696b0bad3c1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616971b3cd990186b66c99a1.md
@@ -0,0 +1,59 @@
+---
+id: 616971b3cd990186b66c99a1
+title: الخطوة ٨
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+الآن بعد إعداد ملف CSS الخارجي الخاص بك، يمكنك البدء في تصميم الصفحة.
+
+كتذكير، إليك كيفية استهداف عنصر paragraph و محاذاته الي اليمين:
+
+```css
+p {
+  text-align: right;
+}
+```
+
+قم بإنشاء قاعدة CSS جديدة تستهدف عنصر `h1` ، وقم بتعيين خاصية `text-align` إلى `center`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `h1`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+قاعدة CSS الخاصة بك لـ `h1` يجب أن تحتوي على خاصية `text-align` بقيمة `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md
new file mode 100644
index 00000000000..fe11cbb7ae3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d3a67ccf800ad94ec89ae.md
@@ -0,0 +1,71 @@
+---
+id: 616d3a67ccf800ad94ec89ae
+title: الخطوة ٩
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+الآن ستضيف بعض العناصر التي ستصممها في نهاية المطاف لتكون لون markers.
+
+أولا، داخل `body`، أضف عنصر `div` وقم بتعيين سمة `class` إلى `container`. تأكد من أن عنصر `div` تحت عنصر `h1`.
+
+# --hints--
+
+يجب أن يكون لديك العلامة مفتوحة (opening tag) الآتية `div`.
+
+```js
+assert(code.match(/<div.*>/i));
+```
+
+يجب أن يكون لديك العلامة المغلقة (closing tag) الآتية `div`.
+
+```js
+assert(code.match(/<\/div\s*>/i));
+```
+
+عنصر `div` الخاص بك يجب أن يكون داخل عنصر `body` الخاص بك.
+
+```js
+assert(document.querySelector('div')?.parentElement?.localName === 'body');
+```
+
+عنصر `div` الخاص بك يجب أن يكون بعد عنصر `h1`.
+
+```js
+assert.exists(document.querySelector('h1 + div'));
+```
+
+عنصر `div` الخاص بك يجب أن يحتوي على سمة `class` بقيمة `container`.
+
+```js
+assert(document.querySelector('div')?.classList?.contains('container'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+--fcc-editable-region--
+  <body>
+    <h1>CSS Color Markers</h1>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md
new file mode 100644
index 00000000000..2e31f3cc8df
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d47bc9eedc4bc7f621bec.md
@@ -0,0 +1,66 @@
+---
+id: 616d47bc9eedc4bc7f621bec
+title: الخطوة ١٠
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+بعد ذلك، ضمن عنصر `div`، أضف عنصر `div` آخر وأعطيه class من `marker`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `div` الجديد على opening tag.
+
+```js
+assert([...code.matchAll(/<div.*?>/gi)][1]);
+```
+
+يجب أن يحتوي العنصر `div` الجديد على closing tag.
+
+```js
+assert([...code.matchAll(/<\/div\s*>/gi)][1]);
+```
+
+يجب عليك دمج عنصر `div` الجديد الخاص بك داخل الـ `div` بـ class الـ `container`.
+
+```js
+assert(document.querySelector('.container')?.children[0]?.localName === 'div');
+```
+
+يجب أن تعطي عنصر `div` الجديد class الـ `marker`.
+
+```js
+const containerChildren = [...document.querySelector('.container')?.children];
+assert(containerChildren.every(child => child.classList?.contains('marker')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+--fcc-editable-region--
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+    </div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md
new file mode 100644
index 00000000000..06284f9f929
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d4a84b756d9c4b8255093.md
@@ -0,0 +1,68 @@
+---
+id: 616d4a84b756d9c4b8255093
+title: الخطوة ١١
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+حان الوقت لإضافة بعض الألوان إلى الصفحة. تذكر أن إحدى الطرق لإضافة لون إلى عنصر ما هي استخدام <dfn>مصطلح اللون بالانجليزية</dfn> مثل `black`, أو `cyan`, أو `yellow`.
+
+كتذكير، إليك كيفية استهداف فئة `freecodecamp`:
+
+```css
+.freecodecamp {
+
+}
+```
+
+أنشئ قاعدة CSS جديدة تستهدف فئة `marker` وتعين خاصية `background-color` إلى `red`.
+
+# --hints--
+
+يجب عليك إنشاء منتقى class لاستهداف فئة `marker`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.marker'));
+```
+
+يجب أن تحتوي قاعدة CSS مسمى `.marker` علي الخاصية `background-color` بقيمة `red`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor === 'red');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md
new file mode 100644
index 00000000000..6436cfd1a3f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d50b93ba424d6282c99cf.md
@@ -0,0 +1,62 @@
+---
+id: 616d50b93ba424d6282c99cf
+title: الخطوة ١٢
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+لاحظ أن marker الخاص بك لا يبدو أن له أي لون. تم بالفعل تطبيق لون الخلفية، ولكن بما أن عنصر `div` للـ marker فارغ، فليس لديه أي ارتفاع افتراضي.
+
+في قاعدة CSS مسمى `.marker` الخاص بك، عيين خاصية `width` إلى `200px` و `height` إلى `25px`.
+
+# --hints--
+
+يجب أن تكون لقاعدة CSS الخاصة بك `.marker` خاصية `width` بقيمة `200px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.marker')?.width === '200px');
+```
+
+يجب أن تكون لقاعدة CSS الخاصة بك `.marker` خاصية `height` بقيمة `25px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.marker')?.height === '25px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+--fcc-editable-region--
+.marker {
+  background-color: red;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md
new file mode 100644
index 00000000000..1f7463e92a4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d525007b8c5d8b3308b1c.md
@@ -0,0 +1,60 @@
+---
+id: 616d525007b8c5d8b3308b1c
+title: الخطوة ١٣
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+سيبدو الـ marker الخاص بك أفضل إذا تم توسيطه على الصفحة. طريقة سهلة للقيام بذلك هي باستخدام الـ <dfn>shorthand property</dfn> للـ `margin`.
+
+في المشروع الأخير، قمت بتعيين منطقة الـ margin للعناصر بشكل منفصل مع خصائص مثل `margin-top` و `margin-left`. خاصية اختصار `margin` تجعل من السهل تعيين مناطق margin متعددة في نفس الوقت.
+
+لتوسيط marker الخاص بك في الصفحة، عيين خاصية `margin` إلى `auto`. هذا يعين `margin-top`, و `margin-right`, و `margin-bottom`, و `margin-left` إلى `auto`.
+
+# --hints--
+
+يجب أن تكون لقاعدة CSS الخاصة بك `.marker` خاصية `margin` بقيمة `auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+--fcc-editable-region--
+.marker {
+  width: 200px;
+  height: 25px;
+  background-color: red;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md
new file mode 100644
index 00000000000..6e4758e8f72
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d55bd160a95e22453a081.md
@@ -0,0 +1,91 @@
+---
+id: 616d55bd160a95e22453a081
+title: الخطوة ١٤
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+الآن بعد أن جعلت marker واحد في المنتصف و ملون ، فقد حان الوقت لإضافة الـ markers الأخرى.
+
+في `container` `div`، قم بإضافة عنصرين آخرين `div` وإعطائهم class يسمي `marker`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `div` الجديد على opening tag.
+
+```js
+assert([...code.matchAll(/<div.*?>/gi)][2]);
+```
+
+يجب أن يحتوي العنصر `div` الجديد على closing tag.
+
+```js
+assert([...code.matchAll(/<\/div\s*>/gi)][2]);
+```
+
+يجب أن يحتوي عنصر `div` الثاني على opening tag.
+
+```js
+assert([...code.matchAll(/<div.*?>/gi)][3]);
+```
+
+يجب أن يحتوي عنصر `div` الثاني على closing tag.
+
+```js
+assert([...code.matchAll(/<\/div\s*>/gi)][3]);
+```
+
+يجب أن تكون عناصر `div` الجديدة الخاصة بك داخل `div` مع class يسمي `container`.
+
+```js
+const containerChildren = [...document.querySelector('.container')?.children];
+assert(containerChildren.every(child => child?.localName === 'div') && containerChildren.length === 3);
+```
+
+يجب أن تحتوي عناصر `div` الجديدة على class يسمي `marker`.
+
+```js
+const containerChildren = [...document.querySelector('.container')?.children];
+assert(containerChildren.every(child => child?.classList?.contains('marker')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+--fcc-editable-region--
+    <div class="container">
+      <div class="marker">
+      </div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  background-color: red;
+  margin: auto;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md
new file mode 100644
index 00000000000..83130466a06
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616d595270d902f0e7086e18.md
@@ -0,0 +1,65 @@
+---
+id: 616d595270d902f0e7086e18
+title: خطوة ١٥
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+مع أنّ لديك ثلاث عناصر `div` منفصلة من marker فإنها تبدو مثل مستطيل كبير واحد. يجب عليك إضافة بعض المساحة بينهم لجعل رؤية كل عنصر أسهل.
+
+عندما تكون الخاصية المختصرة `margin` ذات قيمتين، يعين `margin-top` و `margin-bottom` إلى أول قيمة، و `margin-left` و `margin-right` إلى القيمة الثانية.
+
+في قاعدة CSS الخاصة بك من `.marker`، عيّن الخاصية `margin` إلى `10px auto`.
+
+# --hints--
+
+يجب أن تكون لقاعدة CSS الخاصة بك `.marker` خاصية `margin` بقيمة `10px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.marker')?.margin === '10px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker">
+      </div>
+      <div class="marker">
+      </div>
+      <div class="marker">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+--fcc-editable-region--
+.marker {
+  width: 200px;
+  height: 25px;
+  background-color: red;
+  margin: auto;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md
new file mode 100644
index 00000000000..9e93552caeb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764c602bee6974e7790f35.md
@@ -0,0 +1,76 @@
+---
+id: 61764c602bee6974e7790f35
+title: الخطوة ١٦
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+لإعطاء markers ألوان مختلفة، ستحتاج إلى إضافة فئة فريدة لكل واحدة. يمكن إضافة فئات متعددة إلى عنصر بإدراجها في سمة `class` وفصلها بمسافة. على سبيل المثال، يضيف ما يلي class تسمى `animal` و `dog` إلى عنصر `div`.
+
+```html
+<div class="animal dog">
+```
+
+يجب عليك إضافة class يسمى `one` إلى العنصر `div` الأول ألى marker.
+
+
+# --hints--
+
+يجب عليك إضافة class يسمى `one` إلى العنصر `div` الأول ألى marker.
+
+```js
+const containerFirstChild = [...document.querySelector('.container')?.children][0];
+assert(containerFirstChild?.classList?.contains('one'));
+```
+
+يجب أن يحتوي عنصر الأول `div` من marker على class تسمى `marker` و `one`.
+
+```js
+const containerFirstChild = [...document.querySelector('.container')?.children][0];
+assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+--fcc-editable-region--
+      <div class="marker">
+      </div>
+      <div class="marker">
+      </div>
+      <div class="marker">
+      </div>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  background-color: red;
+  margin: 10px auto;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f23ea21477b76f3b80f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f23ea21477b76f3b80f.md
new file mode 100644
index 00000000000..72068b6187d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f23ea21477b76f3b80f.md
@@ -0,0 +1,61 @@
+---
+id: 61764f23ea21477b76f3b80f
+title: الخطوة ١٧
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+بعد ذلك، قم بإزالة خاصية `background-color` وقيمتها من قاعدة `.marker` في CSS.
+
+# --hints--
+
+يجب ألا يكون لقاعدة CSS الخاصة بك `.marker` خاصية وقيمة `background-color`.
+
+```js
+assert(!code.includes('background-color') && !new __helpers.CSSHelp(document).getStyle('.marker')?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker">
+      </div>
+      <div class="marker">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+--fcc-editable-region--
+.marker {
+  width: 200px;
+  height: 25px;
+  background-color: red;
+  margin: 10px auto;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md
new file mode 100644
index 00000000000..8220e92e37c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764f7e5240eb7ccc7f6a0a.md
@@ -0,0 +1,68 @@
+---
+id: 61764f7e5240eb7ccc7f6a0a
+title: الخطوة ١٨
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+ثم قم بإنشاء قاعدة CSS جديدة تستهدف class الـ `one` وتعين خاصية `background-color` إلى `red`.
+
+# --hints--
+
+يجب عليك استخدام class selector لاستهداف class الـ `one`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.one'));
+```
+
+يجب أن يكون لقاعدة CSS لـ `.one` الخاصية `background-color` بقيمة `red`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'red');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker">
+      </div>
+      <div class="marker">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764fdda535587e1fefb3aa.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764fdda535587e1fefb3aa.md
new file mode 100644
index 00000000000..b0abdc7c9a6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61764fdda535587e1fefb3aa.md
@@ -0,0 +1,86 @@
+---
+id: 61764fdda535587e1fefb3aa
+title: الخطوة ١٩
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+أضف class يسمي `two` إلى marker الـ `div` الثاني، و class الـ `three` إلى marker الـ `div` الثالث.
+
+# --hints--
+
+يجب عليك إضافة class الـ `two` إلى ثاني marker لعنصر `div` في الـ `container` `div`.
+
+```js
+const containerSecondChild = [...document.querySelector('.container')?.children][1];
+assert(containerSecondChild?.classList?.contains('two'));
+```
+
+`div` الـ marker الثاني يجب أن يحتوي على classes الـ `marker` و `two`.
+
+```js
+const containerSecondChild = [...document.querySelector('.container')?.children][1];
+assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild.classList?.contains('two'));
+```
+
+يجب عليك إضافة class الـ `three` إلى ثالث marker لعنصر `div` في الـ `container` `div`.
+
+```js
+const containerThirdChild = [...document.querySelector('.container')?.children][2];
+assert(containerThirdChild?.classList?.contains('three'));
+```
+
+`div` الـ marker الثالث يجب أن يحتوي على classes الـ `marker` و `three`.
+
+```js
+const containerThirdChild = [...document.querySelector('.container')?.children][2];
+assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('three'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+--fcc-editable-region--
+      <div class="marker one">
+      </div>
+      <div class="marker">
+      </div>
+      <div class="marker">
+      </div>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: red;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md
new file mode 100644
index 00000000000..fa78bc99c2b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/6176519636a76b810ab1219a.md
@@ -0,0 +1,86 @@
+---
+id: 6176519636a76b810ab1219a
+title: الخطوة ٢٠
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+أنشئ قاعدة CSS جديدة تستهدف فئة `two` وتعين خاصية `background-color` إلى`green`.
+
+وأنشئ قاعدة CSS أخرة, تستهدف فئة `three` وتعين خاصية `background-color` إلى `blue`.
+
+# --hints--
+
+يجب عليك استخدام مستهدف لفئة لاستهداف فئة `two`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.two'));
+```
+
+يجب أن يكون لقاعدة CSS مسمى `.two` خاصية `background-color` بقيمة `green`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'green');
+```
+
+يجب عليك استخدام مستهدف لفئة لاستهداف فئة `three`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.three'));
+```
+
+يجب أن يكون لقاعدة CSS مسمى `.three` خاصية `background-color` بقيمة `blue`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'blue');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: red;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md
new file mode 100644
index 00000000000..5352a87a70a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b65579ce424bf5f02ca73.md
@@ -0,0 +1,84 @@
+---
+id: 617b65579ce424bf5f02ca73
+title: الخطوة ٢١
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+هذه الأيام، هناك نموذجان رئيسيان من الألوان: نموذج <dfn>المضاف</dfn> RGB (red, green, blue) المستخدم في الأجهزة الإلكترونية، و نموذج <dfn>مطروح</dfn> CMYK (cyan, magenta, yellow, black) المستخدم في الطباعة.
+
+في هذا المشروع ستعمل مع نموذج RGB. وهذا يعني أن الألوان تبدأ بالأسود، وتتغير كمستويات مختلفة من الأحمر والأخضر والأزرق. طريقة سهلة لمشاهدة هذا هو باستخدام وظيفة CSS تسمي `rgb`.
+
+أنشئ قاعدة CSS جديدة تستهدف فئة `container` وتعيين `background-color` للأسود باستخدام `rgb(0, 0, 0)`.
+
+# --hints--
+
+يجب عليك استخدام متقي class لاستهداف فئة `container`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.container'));
+```
+
+يجب أن يكون لقاعدة CSS مسمى `.container` الخاصية `background-color` بقيمة `rgb(0, 0, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: red;
+}
+
+.two {
+  background-color: green;
+}
+
+.three {
+  background-color: blue;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md
new file mode 100644
index 00000000000..7baee0518ba
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8b38f32bf2080a140675.md
@@ -0,0 +1,90 @@
+---
+id: 617b8b38f32bf2080a140675
+title: الخطوة ٢٢
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+الوظيفة (function) هي جزء من الكود البرمجي التي يمكن أن تأخذ مدخلات وتنفذ إجراء محددا. تقوم وظيفة CSS تدعي `rgb` بقبول القيم، أو <dfn>حجج</dfn>، للأحمر والأخضر والأزرق، وتنتج لون:
+
+```css
+rgb(red, green, blue);
+```
+
+كل قيمة حمراء وخضراء وزرقاء هي رقم من `0` إلى `255`. `0` يعني أن هناك 0% من هذا اللون، وهو أسود. `255` يعني أن هناك 100% من هذا اللون.
+
+في قاعدة CSS مسمى `.one` استبدل كلمة اللون `red` بالوظيفة `rgb`. بالنسبة لوظيفة `rgb`، عيين قيمة الأحمر إلى `255`، قيمة اللون الأخضر إلى `0`، والقيمة للأزرق إلى `0`.
+
+# --hints--
+
+لا ينبغي لقاعدة CSS الخاصة بك `.one` أن تستخدم كلمة `red` لتحديد خاصية `background-color`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor !== 'red');
+```
+
+يجب أن يكون لقاعدة CSS مسمى `.one` الخاصية `background-color` بقيمة `rgb(255, 0, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(0, 0, 0);
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.one {
+  background-color: red;
+}
+--fcc-editable-region--
+
+.two {
+  background-color: green;
+}
+
+.three {
+  background-color: blue;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md
new file mode 100644
index 00000000000..a06702a72ac
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b8e0d93a8d10d9a90e720.md
@@ -0,0 +1,98 @@
+---
+id: 617b8e0d93a8d10d9a90e720
+title: الخطوة ٢٣
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+لاحظ أن `background-color` من marker الخاص بك لا يزل أحمر. هذا لأنك عيّنت القيمة الحمراء للوظيفة `rgb` إلى الحد الأقصى `255`، أو 100٪ أحمر، وتعيين القيم الخضراء والزرقاء على حد سواء إلى `0`.
+
+الآن استخدم وظيفة `rgb` لتعيين الألوان الأخرى.
+
+في قاعدة CSS مسمى `.two`، استخدم الوظيفة `rgb` لتعيين `background-color` إلى الحد الأقصى للقيمة الخضراء، و `0` للقيم الأخرى. وفي قاعدة CSS مسمى `.three`، استخدم الوظيفة `rgb` لتعيين `background-color` إلى القيمة القصوى للأزرق، و `0` للقيم الأخرى.
+
+# --hints--
+
+لا ينبغي لقاعدة CSS الخاصة بك `.two` أن تستخدم كلمة `green` لتحديد خاصية `background-color`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor !== 'green');
+```
+
+يجب أن يكون لقاعدة CSS مسمى `.two` الخاصية `background-color` بقيمة `rgb(0, 255, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)');
+```
+
+لا ينبغي لقاعدة CSS الخاصة بك `.three` أن تستخدم كلمة `blue` لتحديد خاصية `background-color`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor !== 'blue');
+```
+
+يجب أن يكون لقاعدة CSS مسمى `.three` الخاصية `background-color` بقيمة `rgb(0, 0, 255)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(0, 0, 0);
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: rgb(255, 0, 0);
+}
+
+--fcc-editable-region--
+.two {
+  background-color: green;
+}
+
+.three {
+  background-color: blue;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md
new file mode 100644
index 00000000000..1e38ad9f889
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b92b9de349513466f6156.md
@@ -0,0 +1,78 @@
+---
+id: 617b92b9de349513466f6156
+title: الخطوة ٢٤
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+بينما تبدو markers الحمراء والزرقاء متماثلة، فإن marker الأخصر أخف بكثير مما كان عليه من قبل. هذا لأن الكلمة `green` هي في الواقع ظل أغمق، وتقع في منتصف المسافة بين الأسود وأقصى قيمة للأخضر.
+
+في قاعدة CSS لـ `.two`، قم بتعيين القيمة الخضراء في دالة `rgb` إلى `127` لتقليل شدتها.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS مسمى `.two` الخاصية `background-color` بقيمة `rgb(0, 127, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(0, 0, 0);
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: rgb(255, 0, 0);
+}
+
+--fcc-editable-region--
+.two {
+  background-color: rgb(0, 255, 0);
+}
+--fcc-editable-region--
+
+.three {
+  background-color: rgb(0, 0, 255);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md
new file mode 100644
index 00000000000..cddc175aaa2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b954d9f4f6217a749380e.md
@@ -0,0 +1,84 @@
+---
+id: 617b954d9f4f6217a749380e
+title: خطوة ٢٥
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+الآن أضف مساحة رأسية بين markers الخاصة بك وحافة عنصر `container` الموجودة فيه.
+
+في قاعدة CSS مسمى `.container`، استخدم الخاصية القصيرة `padding` بقيمة `10px` إلى top padding و bottom padding، وعيّن left padding و right padding إلى `0`. يعمل هذا بشكل مماثل مع خاصية اختصار `margin` الذي استخدمتها من قبل.
+
+# --hints--
+
+لا يجب عليك إزالة خاصية `background-color` وقيمتها من قاعدة CSS مسمى `.container`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(0, 0, 0)');
+```
+
+يجب أن تكون لقاعدة CSS الخاصة بك `.container` خاصية `padding` بقيمة `10px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.container')?.padding === '10px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+--fcc-editable-region--
+.container {
+  background-color: rgb(0, 0, 0);
+}
+--fcc-editable-region--
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: rgb(255, 0, 0);
+}
+
+.two {
+  background-color: rgb(0, 127, 0);
+}
+
+.three {
+  background-color: rgb(0, 0, 255);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md
new file mode 100644
index 00000000000..011e174246b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b97abd9f3f61d1590b815.md
@@ -0,0 +1,79 @@
+---
+id: 617b97abd9f3f61d1590b815
+title: الخطوة ٢٦
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+في نموذج ألوان RGB الأضافية، يكون <dfn>ألوان الأساسية</dfn> هي الألوان التي عند الجمع بينها تنشئ لون ابيض نقي. ولكن لكي يحدث هذا ، يجب أن يكون كل لون بأقصى حد له.
+
+قبل أن تجمع الألوان، عيّن marker الأخضر مرة أخرى إلى اللون الأخضر النقي. بالنسبة لوظيفة `rgb` في قاعدة CSS مسمى `.two`، عيّن الأخضر إلى القيمة القصوى `255`.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS مسمى `.two` الخاصية `background-color` بقيمة `rgb(0, 255, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(0, 0, 0);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: rgb(255, 0, 0);
+}
+
+--fcc-editable-region--
+.two {
+  background-color: rgb(0, 127, 0);
+}
+--fcc-editable-region--
+
+.three {
+  background-color: rgb(0, 0, 255);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md
new file mode 100644
index 00000000000..25c31c6a7f6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617b9ad735109e217284e095.md
@@ -0,0 +1,79 @@
+---
+id: 617b9ad735109e217284e095
+title: خطوة ٢٧
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+الآن بعد أن أصبح لديك ألوان RGB الأساسية، حان الوقت للجمع بينها.
+
+لوظيفة `rgb` في قاعدة `.container`، عيّن القيم الحمراء والخضراء والزرقاء إلى الحد الأقصى وهو `255`.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS مسمى `.container` الخاصية `background-color` بقيمة `rgb(255, 255, 255)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.container')?.backgroundColor === 'rgb(255, 255, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+--fcc-editable-region--
+.container {
+  background-color: rgb(0, 0, 0);
+  padding: 10px 0;
+}
+--fcc-editable-region--
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: rgb(255, 0, 0);
+}
+
+.two {
+  background-color: rgb(0, 255, 0);
+}
+
+.three {
+  background-color: rgb(0, 0, 255);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md
new file mode 100644
index 00000000000..569a4f16f31
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb5624a75e86463b7e638.md
@@ -0,0 +1,79 @@
+---
+id: 617bb5624a75e86463b7e638
+title: الخطوة ٢٨
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+<dfn>الألوان الثانوية</dfn> هي الألوان التي تحصل عليها عند دمج الألوان الأساسية. ربما لاحظت بعض الألوان الثانوية في الخطوة الأخيرة عندما قمت بتغيير القيم الأحمر والأخضر والأزرق.
+
+لإنشاء اللون الثانوي الأول yellow، قم بتحديث وظيفة `rgb` في قاعدة CSS مسمى `.one` للجمع بين الأحمر النقي والأخضر النقي.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS مسمى `.one` الخاصية `background-color` بقيمة `rgb(255, 255, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 255, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.one {
+  background-color: rgb(255, 0, 0);
+}
+--fcc-editable-region--
+
+.two {
+  background-color: rgb(0, 255, 0);
+}
+
+.three {
+  background-color: rgb(0, 0, 255);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md
new file mode 100644
index 00000000000..0bda3da6bf7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb77353188166af43f3ac.md
@@ -0,0 +1,77 @@
+---
+id: 617bb77353188166af43f3ac
+title: الخطوة ٢٩
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+لإنشاء اللون الثانوي التالي السيان، قم بتحديث وظيفة `rgb` في قاعدة CSS مسمى `.two` للجمع بين الأخضر النقي والأزرق النقي.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS مسمى `.two` الخاصية `background-color` بقيمة `rgb(0, 255, 255)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: rgb(255, 255, 0);
+}
+
+--fcc-editable-region--
+.two {
+  background-color: rgb(0, 255, 0);
+}
+--fcc-editable-region--
+
+.three {
+  background-color: rgb(0, 0, 255);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md
new file mode 100644
index 00000000000..236be81f5bb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bb9fdef27bc6aa0470ac2.md
@@ -0,0 +1,77 @@
+---
+id: 617bb9fdef27bc6aa0470ac2
+title: الخطوة ٣٠
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+لإنشاء اللون الثانوي النهائي، Magenta، قم بتحديث دالة `rgb` في قاعدة CSS لـ `.three` للجمع بين الأزرق النقي والأحمر النقي.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS لـ `.three` الخاصية `background-color` بقيمة `rgb(255, 0, 255)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: rgb(255, 255, 0);
+}
+
+.two {
+  background-color: rgb(0, 255, 255);
+}
+
+--fcc-editable-region--
+.three {
+  background-color: rgb(0, 0, 255);
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md
new file mode 100644
index 00000000000..eb19a20b04e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bbb6b97a83f6d1f7d6e38.md
@@ -0,0 +1,79 @@
+---
+id: 617bbb6b97a83f6d1f7d6e38
+title: الخطوة ٣١
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+الآن بعد أن اصبحت على دراية بالألوان الثانوية، ستتعلم كيفية إنشاء <dfn>tertiary colors</dfn> (الألوان الثلاثية). يتم إنشاء الألوان الثلاثية بدمج لون أساسي مع لون ثانوي قريب.
+
+لإنشاء اللون الثالث البرتقالي، قم بتحديث دالة `rgb` في قاعدة CSS لـ `.one` بحيث يكون الاحمر بقيمة الحد الأقصى، و الأخضر بقيمة `127`.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS لـ `.one` الخاصية `background-color` بقيمة `rgb(255, 127, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 127, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.one {
+  background-color: rgb(255, 255, 0);
+}
+--fcc-editable-region--
+
+.two {
+  background-color: rgb(0, 255, 255);
+}
+
+.three {
+  background-color: rgb(255, 0, 255);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md
new file mode 100644
index 00000000000..f9f629e1912
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc3386dc7d07d6469bf20.md
@@ -0,0 +1,79 @@
+---
+id: 617bc3386dc7d07d6469bf20
+title: الخطوة ٣٢
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+لاحظ أنه لإنشاء البرتقالي كان عليك زيادة كثافة اللون الأحمر وتقليل كثافة قيم `rgb` الخضراء. وذلك لأن البرتقالي هو مزيج من اللون الأحمر والأصفر، ويسقط بين اللونين على عجلة الألوان.
+
+لإنشاء ربيع اللون الثالث أخضر، الجمع بين السيان والأخضر. قم بتحديث وظيفة `rgb` في قاعدة CSS مسمى `.two` بحيث تكون قيمة اللون الأخضر بالحد الأقصى، وقيمة اللون الأزرق `127`.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS مسمى `.two` الخاصية `background-color` بقيمة `rgb(0, 255, 127)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 127)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: rgb(255, 127, 0);
+}
+
+--fcc-editable-region--
+.two {
+  background-color: rgb(0, 255, 255);
+}
+--fcc-editable-region--
+
+.three {
+  background-color: rgb(255, 0, 255);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md
new file mode 100644
index 00000000000..20ef4fdcf26
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bc4824e233180553a8069.md
@@ -0,0 +1,77 @@
+---
+id: 617bc4824e233180553a8069
+title: الخطوة 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+ولصنع اللون الثلاثي البنفسجي، تجمع بين magenta والأزرق. قم بتحديث دالة `rgb` في قاعدة CSS لـ `.three` بحيث تكون قيمة اللون الازرق بالحد الأقصى، وقيمة اللون الاحمر `127`.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS لـ `.three` الخاصية `background-color` بقيمة `rgb(127, 0, 255)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(127, 0, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: rgb(255, 127, 0);
+}
+
+.two {
+  background-color: rgb(0, 255, 127);
+}
+
+--fcc-editable-region--
+.three {
+  background-color: rgb(255, 0, 255);
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md
new file mode 100644
index 00000000000..29619ec7a28
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/617bd6ec666b1da2587e4e37.md
@@ -0,0 +1,95 @@
+---
+id: 617bd6ec666b1da2587e4e37
+title: الخطوة ٣٤
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+وهناك ثلاثة ألوان أخرى ثلاثية: chartreuse green (الأخضر + الأصفر)، azure (الأزرق + cyan)، و rose (الأحمر + magenta).
+
+لإنشاء chartreuse green، قم بتحديث دالة `rgb` في قاعدة `.one` بحيث يكون الأحمر بقيمة `127`، و قيمة الأخضر بالحد الأقصى.
+
+لإنشاء azure، قم بتحديث دالة `rgb` في قاعدة `.two` بحيث يكون الاخضر بقيمة `127`، و قيمة الازرق بالحد الأقصى.
+
+ولإنشاء rose، قم بتحديث دالة `rgb` في قاعدة `.three` بحيث يكون الازرق بقيمة `127`، و قيمة الاحمر بالحد الأقصى.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS لـ `.one` الخاصية `background-color` بقيمة `rgb(127, 255, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(127, 255, 0)');
+```
+
+يجب أن يكون لقاعدة CSS لـ `.two` الخاصية `background-color` بقيمة `rgb(0, 127, 255)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 127, 255)');
+```
+
+يجب أن يكون لقاعدة CSS لـ `.three` الخاصية `background-color` بقيمة `rgb(255, 0, 127)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(255, 0, 127)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.one {
+  background-color: rgb(255, 127, 0);
+}
+
+.two {
+  background-color: rgb(0, 255, 127);
+}
+
+.three {
+  background-color: rgb(127, 0, 255);
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md
new file mode 100644
index 00000000000..e4c643458bc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a00ed1ca871a2b3aca0cb.md
@@ -0,0 +1,91 @@
+---
+id: 618a00ed1ca871a2b3aca0cb
+title: الخطوة ٣٥
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+الآن بعد أن مررت بجميع الألوان الابتدائية والثانوية والثلاثية على عجلة الألوان، سيكون من الأسهل فهم مفاهيم نظرية الألوان الأخرى وكيف تؤثر على التصميم.
+
+أولا، في القواعد `.one`و `.two`و `.three`، ضبط القيم في الدالة `rgb` بحيث يتم تعيين `background-color` لكل عنصر إلى اسود نقي. تذكر أن دالة `rgb` تستخدم نموذج اللون المضاف (additive color model)، حيث تبدأ الألوان باللون الأسود وتتغير كقيم اللون الأحمر والأخضر والأزرق.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS لـ `.one` الخاصية `background-color` بقيمة `rgb(0, 0, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)');
+```
+
+يجب أن يكون لقاعدة CSS لـ `.two` الخاصية `background-color` بقيمة `rgb(0, 0, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)');
+```
+
+يجب أن يكون لقاعدة CSS لـ `.three` الخاصية `background-color` بقيمة `rgb(0, 0, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.three')?.backgroundColor === 'rgb(0, 0, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.one {
+  background-color: rgb(127, 255, 0);
+}
+
+.two {
+  background-color: rgb(0, 127, 255);
+}
+
+.three {
+  background-color: rgb(255, 0, 127);
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md
new file mode 100644
index 00000000000..9dfd68fa95b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0927005553b74bfa05ae.md
@@ -0,0 +1,87 @@
+---
+id: 618a0927005553b74bfa05ae
+title: الخطوة ٣٦
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+عجلة الألوان هي دائرة تكون فيها الألوان المتشابهة أو <dfn>hues</dfn> (تدرجات) قريبة من بعضها البعض والألوان المختلفة متباعدة. على سبيل المثال ، يقع اللون الأحمر الخالص بين درجات اللون الوردي والبرتقالي.
+
+يطلق على لونين متقابلين على عجلة الألوان <dfn>complementary colors</dfn> (ألوان تكميلية). وإذا تم الجمع بين لونين متكاملين، فإنهما ينتجان الرمادي. لكن عندما توضع جنبا إلى جنب هذه الألوان تنتج تناقضا بصريا قويا وتبدو أكثر إشراقا.
+
+في دالة `rgb` في قاعدة CSS لـ `.one`، قم بتعيين القيمة الحمراء إلى الحد الأقصى من `255` لإنتاج اللون الأحمر النقي. في دالة `rgb` في قاعدة CSS لـ `.two`، قم بتعيين القيمة الخضراء و الزرقاء إلى الحد الأقصى من `255` لإنتاج اللون cyan.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS لـ `.one` الخاصية `background-color` بقيمة `rgb(255, 0, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(255, 0, 0)');
+```
+
+يجب أن يكون لقاعدة CSS لـ `.two` الخاصية `background-color` بقيمة `rgb(0, 255, 255)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 255, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.one {
+  background-color: rgb(0, 0, 0);
+}
+
+.two {
+  background-color: rgb(0, 0, 0);
+}
+--fcc-editable-region--
+
+.three {
+  background-color: rgb(0, 0, 0);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md
new file mode 100644
index 00000000000..4ee3db8dbac
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a0b2befb143baefab632b.md
@@ -0,0 +1,87 @@
+---
+id: 618a0b2befb143baefab632b
+title: الخطوة ٣٧
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+لاحظ أن اللونين الأحمر و cyan ساطعان جدًا بجوار بعضهما البعض. يمكن أن يؤدي هذا التباين إلى تشتيت الانتباه إذا تم الإفراط في استخدامه على موقع ويب، ويمكن أن يجعل قراءة النص صعبة إذا تم وضعه على خلفية ملونة تكميليا (complementary-colored).
+
+من الأفضل اختيار لون واحد باعتباره اللون السائد، واستخدام لونه التكميلي كلكنة للفت الانتباه إلى محتوى معين على الصفحة.
+
+أولاً، في قاعدة `h1`، استخدم الدالة `rgb` لتعيين لون الخلفية الخاص بها إلى cyan.
+
+# --hints--
+
+لا يجب عليك إزالة أو تعديل خاصية `text-align` أو قيمتها.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
+```
+
+يجب أن يكون لقاعدة CSS لـ `h1` الخاصية `background-color` بقيمة `rgb(0, 255, 255)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor === 'rgb(0, 255, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+h1 {
+  text-align: center;
+}
+--fcc-editable-region--
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: rgb(255, 0, 0);
+}
+
+.two {
+  background-color: rgb(0, 255, 255);
+}
+
+.three {
+  background-color: rgb(0, 0, 0);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md
new file mode 100644
index 00000000000..46606576399
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a1275e873dcc803c2d1aa.md
@@ -0,0 +1,84 @@
+---
+id: 618a1275e873dcc803c2d1aa
+title: الخطوة ٣٨
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+بعد ذلك، في قاعدة `.one` ، استخدم الدالة `rgb` لتعيين `background-color` إلى الأسود. وفي قاعدة `.two` ، استخدم الدالة `rgb` لتعيين `background-color` إلى اللون الأحمر.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS لـ `.one` الخاصية `background-color` بقيمة `rgb(0, 0, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.one')?.backgroundColor === 'rgb(0, 0, 0)');
+```
+
+يجب أن يكون لقاعدة CSS لـ `.two` الخاصية `background-color` بقيمة `rgb(255, 0, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(255, 0, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+  background-color: rgb(0, 255, 255);
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.one {
+  background-color: rgb(255, 0, 0);
+}
+
+.two {
+  background-color: rgb(0, 255, 255);
+}
+--fcc-editable-region--
+
+.three {
+  background-color: rgb(0, 0, 0);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md
new file mode 100644
index 00000000000..2583f36d1ec
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a132676346ac9f7fd59dd.md
@@ -0,0 +1,82 @@
+---
+id: 618a132676346ac9f7fd59dd
+title: الخطوة ٣٩
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+لاحظ كيف أن عينيك تُسحب بشكل طبيعي إلى اللون الأحمر في المركز؟ عند تصميم موقع، يمكنك استخدام هذا التأثير لتوجيه الانتباه إلى عناوين أو أزرار أو روابط هامة.
+
+هناك العديد من مجموعات الألوان الهامة الأخرى خارج الألوان التكميلية (complementary colors)، لكنك ستتعلم هذه في وقت لاحق.
+
+في الوقت الحالي، استخدم دالة `rgb` في قاعدة `.two` لتعيين `background-color` إلى أسود.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS لـ `.two` الخاصية `background-color` بقيمة `rgb(0, 0, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.two')?.backgroundColor === 'rgb(0, 0, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+  background-color: rgb(0, 255, 255);
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: rgb(0, 0, 0);
+}
+
+--fcc-editable-region--
+.two {
+  background-color: rgb(255, 0, 0);
+}
+--fcc-editable-region--
+
+.three {
+  background-color: rgb(0, 0, 0);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md
new file mode 100644
index 00000000000..4506319c9ab
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16873520a8d088ffdf44.md
@@ -0,0 +1,79 @@
+---
+id: 618a16873520a8d088ffdf44
+title: الخطوة ٤٠
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+وفي قاعدة `h1` ، قم بإزالة خاصية `background-color` والقيمة للعودة إلى اللون الأبيض الافتراضي.
+
+# --hints--
+
+قاعدة CSS الخاصة بك `h1` لا ينبغي أن تحتوي على خاصية أو قيمة `background-color`.
+
+```js
+const backgroundColorInstances = code.match(/background-color:.*;/gi);
+assert(backgroundColorInstances.length === 4 && !new __helpers.CSSHelp(document).getStyle('h1')?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+h1 {
+  text-align: center;
+  background-color: rgb(0, 255, 255);
+}
+--fcc-editable-region--
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: rgb(0, 0, 0);
+}
+
+.two {
+  background-color: rgb(0, 0, 0);
+}
+
+.three {
+  background-color: rgb(0, 0, 0);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md
new file mode 100644
index 00000000000..7c6ff725096
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/618a16d21bd3dad1bb3aa8ef.md
@@ -0,0 +1,87 @@
+---
+id: 618a16d21bd3dad1bb3aa8ef
+title: الخطوة ٤١
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+الآن حان الوقت لإضافة تفاصيل أخرى إلى الـ markers، بدءاً بالأول.
+
+في عنصر `div` للـ marker الأول، قم بتغيير class الـ `one` إلى `red`.
+
+# --hints--
+
+`div` الـ marker الأول يجب ألا يحتوي على class الـ `one`.
+
+```js
+const containerFirstChild = [...document.querySelector('.container')?.children][0];
+assert(!containerFirstChild?.classList?.contains('one'));
+```
+
+`div` الـ marker الاول يجب أن تحتوي على classes الـ `marker` و `red`.
+
+```js
+const containerFirstChild = [...document.querySelector('.container')?.children][0];
+assert(containerFirstChild?.classList?.contains('marker') && containerFirstChild?.classList?.contains('red'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      --fcc-editable-region--
+      <div class="marker one">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+      --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.one {
+  background-color: rgb(0, 0, 0);
+}
+
+.two {
+  background-color: rgb(0, 0, 0);
+}
+
+.three {
+  background-color: rgb(0, 0, 0);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md
new file mode 100644
index 00000000000..e7a5180a1c3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b72a0db211f1c29afb906.md
@@ -0,0 +1,89 @@
+---
+id: 619b72a0db211f1c29afb906
+title: الخطوة ٤٢
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+قم بتحديثclass selector الـ `.one` لاستهداف class الـ `red` الجديد.
+
+# --hints--
+
+لم يعد يجب أن يحتوي الكود الخاص بك على class selector الـ `.one`.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.one'));
+```
+
+يجب عليك استخدام class selector لاستهداف class الـ `red`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.red'));
+```
+
+يجب أن يكون لقاعدة CSS لـ `.red` الخاصية `background-color` بقيمة `rgb(0, 0, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(0, 0, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.one {
+  background-color: rgb(0, 0, 0);
+}
+
+.two {
+  background-color: rgb(0, 0, 0);
+}
+
+.three {
+  background-color: rgb(0, 0, 0);
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md
new file mode 100644
index 00000000000..54da9936001
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7396e57b771f903be90d.md
@@ -0,0 +1,77 @@
+---
+id: 619b7396e57b771f903be90d
+title: الخطوة ٤٣
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+و قم بتحديث دالة `rgb` في قاعدة `.red` بحيث تكون القيمة الحمراء عند الحد الأقصى.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS لـ `.red` الخاصية `background-color` بقيمة `rgb(255, 0, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.red')?.backgroundColor === 'rgb(255, 0, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background-color: rgb(0, 0, 0);
+}
+
+.two {
+  background-color: rgb(0, 0, 0);
+}
+
+.three {
+  background-color: rgb(0, 0, 0);
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md
new file mode 100644
index 00000000000..fdf0b807b9c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7424f43ec9215e538afe.md
@@ -0,0 +1,99 @@
+---
+id: 619b7424f43ec9215e538afe
+title: الخطوة ٤٤
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+بعد ذلك، قم بتغيير class الـ `two` إلى `green` في `div` الـ marker الثاني، و class الـ `three` إلى `blue` في `div` الـ marker الثالث.
+
+# --hints--
+
+`div` الـ marker الثاني يجب ألا يحتوي على class الـ `two`.
+
+```js
+const containerSecondChild = [...document.querySelector('.container')?.children][1];
+assert(!containerSecondChild?.classList?.contains('two'));
+```
+
+`div` الـ marker الثاني يجب أن يحتوي على classes الـ `marker` و `green`.
+
+```js
+const containerSecondChild = [...document.querySelector('.container')?.children][1];
+assert(containerSecondChild?.classList?.contains('marker') && containerSecondChild?.classList?.contains('green'));
+```
+
+`div` الـ marker الثالث يجب ألا يحتوي على class الـ `three`.
+
+```js
+const containerThirdChild = [...document.querySelector('.container')?.children][2];
+assert(!containerThirdChild?.classList?.contains('three'));
+```
+
+`div` الـ marker الثالث يجب أن يحتوي على classes الـ `marker` و `blue`.
+
+```js
+const containerThirdChild = [...document.querySelector('.container')?.children][2];
+assert(containerThirdChild?.classList?.contains('marker') && containerThirdChild?.classList?.contains('blue'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      --fcc-editable-region--
+      <div class="marker red">
+      </div>
+      <div class="marker two">
+      </div>
+      <div class="marker three">
+      </div>
+      --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.red {
+  background-color: rgb(255, 0, 0);
+}
+
+.two {
+  background-color: rgb(0, 0, 0);
+}
+
+.three {
+  background-color: rgb(0, 0, 0);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md
new file mode 100644
index 00000000000..04d5dddb660
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b74fa777a2b2473c94f82.md
@@ -0,0 +1,107 @@
+---
+id: 619b74fa777a2b2473c94f82
+title: الخطوة ٤٥
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+قم بتحديث CSS class selector الـ `.two` بحيث أنه يستهدف class الـ `green` الجديد. وقم بتحديث منتقي `.three` بحيث يستهدف class الـ `blue` الجديد.
+
+# --hints--
+
+لم يعد يجب أن يحتوي الكود الخاص بك على class selector الـ `.two`.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.two'));
+```
+
+يجب عليك استخدام class selector لاستهداف class الـ `green`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.green'));
+```
+
+يجب أن يكون لقاعدة CSS لـ `.green` الخاصية `background-color` بقيمة `rgb(0, 0, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 0, 0)');
+```
+
+لم يعد يجب أن يحتوي الكود الخاص بك على class selector الـ `.three`.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.three'));
+```
+
+يجب عليك استخدام class selector لاستهداف class الـ `blue`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.blue'));
+```
+
+يجب أن يكون لقاعدة CSS لـ `.blue` الخاصية `background-color` بقيمة `rgb(0, 0, 0)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background-color: rgb(255, 0, 0);
+}
+
+.two {
+  background-color: rgb(0, 0, 0);
+}
+
+.three {
+  background-color: rgb(0, 0, 0);
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md
new file mode 100644
index 00000000000..69eec30e0b2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b761916dac02643940022.md
@@ -0,0 +1,81 @@
+---
+id: 619b761916dac02643940022
+title: الخطوة ٤٦
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+طريقة شائعة جداً لتطبيق اللون على عنصر باستخدام CSS هي باستخدام <dfn>hexadecimal</dfn> أو قيم hex. بينما تبدو قيم الـ hex معقدة، فهي مجرد شكل آخر من قيم ال RGB.
+
+تبدأ قيم اللون hex برمز `#` وتأخذ ستة رموز من 0-9 و A-F. الزوج الأول من الرموز يمثل الأحمر، والزوج الثاني يمثل الأخضر، والزوج الثالث يمثل الأزرق. على سبيل المثال، `#4B5320`.
+
+في قاعدة CSS لـ `.green`، قم بتعيين خاصية `background-color` إلى رمز لون hex مع القيم `00` للأحمر، `FF` للأخضر و `00` للأزرق.
+
+# --hints--
+
+قاعدة CSS لـ `.green` يجب أن تحتوي علي الخاصية `background-color` بقيمة `#00FF00`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 255, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.red {
+  background-color: rgb(255, 0, 0);
+}
+
+--fcc-editable-region--
+.green {
+  background-color: rgb(0, 0, 0);
+}
+--fcc-editable-region--
+
+.blue {
+  background-color: rgb(0, 0, 0);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md
new file mode 100644
index 00000000000..b1f56ce4f48
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7c3c83de403126b69c1e.md
@@ -0,0 +1,85 @@
+---
+id: 619b7c3c83de403126b69c1e
+title: الخطوة ٤٧
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+قد تكون معتادًا بالفعل على القيم العشرية أو القيم باساس 10 ، والتي تبدأ من 0 إلى 9. القيم السداسية العشرية (Hexadecimal)، أو القيم باساس 16 ، تبدأ من 0 إلى 9، ثم A - F:
+
+```js
+0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F
+```
+
+مع ألوان hex الـ `00` هو 0% من هذا اللون، و `FF` هو 100%. إذن `#00FF00` يترجم إلى 0% أحمر و 100% أخضر و 0% أزرق، و هو نفس `rgb(0, 255, 0)`.
+
+قم بتقليل كثافة اللون الأخضر عن طريق تعيين القيمة الخضراء للون hex إلى `7F`.
+
+# --hints--
+
+قاعدة CSS لـ `.green` يجب أن تحتوي علي الخاصية `background-color` بقيمة `#007F00`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.green')?.backgroundColor === 'rgb(0, 127, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.red {
+  background-color: rgb(255, 0, 0);
+}
+
+--fcc-editable-region--
+.green {
+  background-color: #00FF00;
+}
+--fcc-editable-region--
+
+.blue {
+  background-color: rgb(0, 0, 0);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md
new file mode 100644
index 00000000000..cafdb2a317b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/619b7fd56aa2253778bcf5f7.md
@@ -0,0 +1,87 @@
+---
+id: 619b7fd56aa2253778bcf5f7
+title: الخطوة ٤٨
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+نموذج الألوان <dfn>HSL</dfn> أو hue و saturation و lightness، طريقة أخرى لتمثيل الألوان.
+
+تقبل دالة `hsl` ثلاثة قيم: عدد من 0 إلى 360 للـ hue، نسبة مئوية من 0 إلى 100 للـ saturation، ونسبة مئوية من 0 إلى 100 للـ lightness.
+
+إذا تخيلتم عجلة لون، فاللون الأحمر هو عند الدرجة صفر، والأخضر عند 120 درجة، والأزرق عند 240 درجة.
+
+Saturation (التشبع) هو كثافة اللون من 0%، أو رمادي، إلى 100% للون النقي.
+
+Lightness (الضوء) هي مدى سطوع اللون الذي يظهر، من 0٪ أو أسود بالكامل، إلى 100٪ أبيض بالكامل و 50٪ حيادي.
+
+في قاعدة CSS لـ `.blue`، استخدم دالة `hsl` لتغيير خاصية `background-color` إلى اللون الأزرق النقي. عيّن hue إلى `240`، و saturation إلى `100%`، و lightness إلى `50%`.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS لـ `.blue` الخاصية `background-color` بقيمة `hsl(240, 100%, 50%)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(0, 0, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.red {
+  background-color: rgb(255, 0, 0);
+}
+
+.green {
+  background-color: #007F00;
+}
+
+--fcc-editable-region--
+.blue {
+  background-color: rgb(0, 0, 0);
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md
new file mode 100644
index 00000000000..ced13be966b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a489b8579e87364b2d2cdb.md
@@ -0,0 +1,83 @@
+---
+id: 61a489b8579e87364b2d2cdb
+title: الخطوة ٤٩
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+لقد تعلمت بعض الطرق لتعيين ألوان مسطحة في CSS ولكن يمكنك أيضًا استخدام color transition، أو <dfn>gradient</dfn>، على عنصر ما.
+
+الـ gradient هو عندما ينتقل لون إلى لون آخر. تتيح لك دالة CSS الـ `linear-gradient` التحكم في اتجاه الـ transition على طول خط، والألوان المستخدمة.
+
+شيء واحد يجب تذكره هو أن دالة `linear-gradient` تخلق في الواقع عنصر `image`، وعادة ما تقترن مع خاصية `background` التي يمكن أن تقبل صورة كقيمة.
+
+في قاعدة CSS لـ `.red`، قم بتغيير خاصية `background-color` إلى `background`.
+
+# --hints--
+
+قاعدة CSS لـ `.red` يجب ان يحتوي علي خاصية `background` بالقيمة `rgb(255, 0, 0)`.
+
+```js
+assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:rgb\(255,0,0\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background-color: rgb(255, 0, 0);
+}
+--fcc-editable-region--
+
+.green {
+  background-color: #007F00;
+}
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md
new file mode 100644
index 00000000000..0da73d17591
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a493ead935c148d2b76312.md
@@ -0,0 +1,87 @@
+---
+id: 61a493ead935c148d2b76312
+title: الخطوة ٥٠
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+دالة `linear-gradient` مرنة جدا -- اليك الـ syntax الأساسي الذي سيستخدم في هذا الدرس:
+
+```css
+linear-gradient(gradientDirection, color1, color2, ...);
+```
+
+`gradientDirection` هو اتجاه الخط المستخدم في الـ transition. `color1` و `color2` هي arguments الألوان، التي هي الألوان التي سيتم استخدامها في الـ transition نفسه. هذه يمكن أن تكون أي نوع من الالوان، بما في ذلك الكلمات المفتاحية (keywords) للون، Hex او `rgb`أو `hsl`.
+
+الآن ستطبق معامل تدرج أحمر إلى أخضر على طول خط 90 درجة على الـ marker الأول.
+
+أولاً، في قاعدة CSS لـ `.red` عيّن خاصية `background` إلى `linear-gradient()`، وقم بتمرير القيمة `90deg` كـ `gradientDirection`.
+
+# --hints--
+
+قاعدة CSS لـ `.red` يحب ان تحتوي علي خاصية `background` بالقيمة `linear-gradient(90deg)`.
+
+```js
+assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background: rgb(255, 0, 0);
+}
+--fcc-editable-region--
+
+.green {
+  background-color: #007F00;
+}
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md
new file mode 100644
index 00000000000..018d0d7b66f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a498399534644f59cff05e.md
@@ -0,0 +1,79 @@
+---
+id: 61a498399534644f59cff05e
+title: الخطوة ٥٣
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+كما تري، فإن دالة `linear-gradient` أنتجت معامل تدرج أحمر أخضر سلس (smooth red-green gradient). في حين أن دالة `linear-gradient` تحتاج إلى الحد الأدنى من اثنين arguments للالوان، فإنها يمكن أن تقبل العديد من الـ arguments للالوان.
+
+استخدم دالة `rgb` لإضافة اللون الأزرق النقي كـ argument اللون الثالث إلى دالة `linear-gradient`.
+
+# --hints--
+
+يجب أن تحتوي قاعدة CSS لـ `.red` على خاصية `background` بقيمة `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0));
+}
+--fcc-editable-region--
+
+.green {
+  background-color: #007F00;
+}
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md
new file mode 100644
index 00000000000..3970e4a0031
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a49d15bdbb5e57cc6fd280.md
@@ -0,0 +1,85 @@
+---
+id: 61a49d15bdbb5e57cc6fd280
+title: الخطوة ٥٤
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+تتيح لك التوقفات اللونية (color-stops) ضبط مكان وضع الألوان على طول خط التدرج اللوني. إنها وحدة طول مثل `px` أو النسب المئوية التي تتبع اللون في وظيفة `linear-gradient`.
+
+على سبيل المثال، في معامل التدرج الأحمر الأسود هذا (red-black gradient)، يتم الانتقال من الأحمر إلى الأسود عند نقطة 90 في المائة على طول خط التدرج، لذا الأحمر يأخذ معظم المساحة المتاحة:
+
+```css
+linear-gradient(90deg, red 90%, black);
+```
+
+في وظيفة `linear-gradient`، أضف لون `75%` يتوقف بعد الحجة للون الأحمر الأول. لا تضيف color stops إلى حجج الألوان الأخرى.
+
+# --hints--
+
+يجب أن تحتوي قاعدة CSS مسمى `.red` على خاصية `background` بقيمة `linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0), rgb(0, 0, 255));
+}
+--fcc-editable-region--
+
+.green {
+  background-color: #007F00;
+}
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md
new file mode 100644
index 00000000000..938872ce918
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a53c4459446dc134a1c6.md
@@ -0,0 +1,79 @@
+---
+id: 61a4a53c4459446dc134a1c6
+title: الخطوة ٥٥
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+الآن بعد أن عرفت أساسيات كيفية عمل وظيفة `linear-gradient` و color-stops، يمكنك استخدامهما لجعل markers تبدو أكثر واقعية.
+
+في وظيفة `linear-gradient`، عيّن `gradientDirection` إلى `180deg`.
+
+# --hints--
+
+يجب أن تحتوي قاعدة CSS مسمى `.red` على خاصية `background` بقيمة `linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)75%,rgb(0,255,0),rgb(0,0,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(90deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255));
+}
+--fcc-editable-region--
+
+.green {
+  background-color: #007F00;
+}
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md
new file mode 100644
index 00000000000..d81512925c7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a6e908bc34725b4c25ac.md
@@ -0,0 +1,77 @@
+---
+id: 61a4a6e908bc34725b4c25ac
+title: الخطوة ٥٦
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+بعد ذلك، قم بتعيين color-stop الأحمر إلى `0%`،و color-stop الأخضر إلى `50%`، و color-stop للأزرق إلى `100%`.
+
+# --hints--
+
+يجب أن تحتوي قاعدة CSS مسمى `.red` على خاصية `background` بقيمة `linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`.
+
+```js
+assert.include(['linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(255,0,0)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(180deg, rgb(255, 0, 0) 75%, rgb(0, 255, 0), rgb(0, 0, 255));
+}
+--fcc-editable-region--
+
+.green {
+  background-color: #007F00;
+}
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md
new file mode 100644
index 00000000000..784b82b7f8d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4a7877da33a73a1c1723e.md
@@ -0,0 +1,79 @@
+---
+id: 61a4a7877da33a73a1c1723e
+title: الخطوة ٥٧
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+الآن بعد أن تم تعيين color-stops، ستطبق ظلال مختلفة من اللون الأحمر إلى كل حجة في وظيفة `linear-gradient`. ستكون الظلال الموجودة على الحواف العلوية والسفلية في marker أغمق، بينما ستكون الظلال الموجودة في المنتصف أفتح، كما لو كان هناك ضوء فوقها.
+
+بالنسبة ألى حجة اللون الأول، التي هي حاليًا باللون الأحمر الخالص، حدث وظيفة `rgb` بحيث تكون قيمة الأحمر `122`، وقيمة الأخضر هي `74`، وقيمة الأزرق هي `14`.
+
+# --hints--
+
+يجب أن تحتوي قاعدة CSS مسمى `.red` على خاصية `background` بقيمة `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%)`.
+
+```js
+assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(0,255,0)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(180deg, rgb(255, 0, 0) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
+}
+--fcc-editable-region--
+
+.green {
+  background-color: #007F00;
+}
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md
new file mode 100644
index 00000000000..c72b9f8e0be
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ac092eb21e7dbfe61c33.md
@@ -0,0 +1,79 @@
+---
+id: 61a4ac092eb21e7dbfe61c33
+title: الخطوة ٥٨
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+الآن عدّل حجة اللون الثاني في وظيفة `linear-gradient` التي هي حاليا بلون أخضر خالص.
+
+حدّث وظيفة `rgb` بحيث تكون قيمة الأحمر `245`، قيمة اللون الأخضر هي `62`، وقيمة اللون الأزرق هي `113`.
+
+# --hints--
+
+يجب أن تحتوي قاعدة CSS مسمى `.red` على خاصية `background` بقيمة `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%)`.
+
+```js
+assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(0,0,255)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(0, 255, 0) 50%, rgb(0, 0, 255) 100%);
+}
+--fcc-editable-region--
+
+.green {
+  background-color: #007F00;
+}
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md
new file mode 100644
index 00000000000..1e25b65d9aa
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4acbb5587197f68544d00.md
@@ -0,0 +1,79 @@
+---
+id: 61a4acbb5587197f68544d00
+title: الخطوة ٥٩
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+الآن عدّل حجة color الثالث في وظيفة `linear-gradient` التي هي حاليا بلون ازرق خالص.
+
+حدّث وظيفة `rgb` بحيث تكون قيمة الأحمر `162`، قيمة اللون الأخضر هي `27`، وقيمة اللون الأزرق هي `27`.
+
+# --hints--
+
+يجب أن تحتوي قاعدة CSS مسمى `.red` على خاصية `background` بقيمة `linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%)`.
+
+```js
+assert.include(['linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14)0%,rgb(245,62,113)50%,rgb(162,27,27)100%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(0, 0, 255) 100%);
+}
+--fcc-editable-region--
+
+.green {
+  background-color: #007F00;
+}
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md
new file mode 100644
index 00000000000..9eb24ee8d15
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ada3aabeec822b2975d9.md
@@ -0,0 +1,79 @@
+---
+id: 61a4ada3aabeec822b2975d9
+title: الخطوة ٦٠
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+يبدو marker الأحمر أكثر واقعية. الآن ستفعل الشيء نفسه إلى marker الأخضر، باستخدام مزيج من وظيفة `linear-gradient` وألوان بوحدة hex.
+
+في قاعدة CSS مسمى `.green`، غيّر خاصية `background-color` إلى `background`.
+
+# --hints--
+
+قاعدة CSS مسمى `.green` يجب أن يحتوي علي خاصية `background` بالقيمة `#007F00`.
+
+```js
+assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:#007F00/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.red {
+  background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
+}
+
+--fcc-editable-region--
+.green {
+  background-color: #007F00;
+}
+--fcc-editable-region--
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md
new file mode 100644
index 00000000000..b069754d650
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a4ae5f29eb5584187201c3.md
@@ -0,0 +1,79 @@
+---
+id: 61a4ae5f29eb5584187201c3
+title: الخطوة ٦١
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+لهذا الـ marker، ستستخدم hex color codes لمعامل التدرج (gradient) الخاص بك.
+
+في دالة `linear-gradient`، عيّن `gradientDirection` إلى `180deg`. وللـ color argument الاولي، استخدم hex color code مع القيم `55` للأحمر، `68` الأخضر و `0D` للأزرق.
+
+# --hints--
+
+قاعدة CSS لـ `.green` يحب ان تحتوي علي خاصية `background` بالقيمة `linear-gradient(180deg, #55680D)`.
+
+```js
+assert.match(__helpers.removeWhiteSpace(code), /\.green\{.*?background:linear-gradient\(180deg,#55680D\)/i);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.red {
+  background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
+}
+
+--fcc-editable-region--
+.green {
+  background: #007F00;
+}
+--fcc-editable-region--
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md
new file mode 100644
index 00000000000..3786cd4cd1b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5be9833e7dc178de2af10.md
@@ -0,0 +1,79 @@
+---
+id: 61a5be9833e7dc178de2af10
+title: الخطوة ٦٣
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+يبدو هذا أفضل، لكن يجب أن تكون الحافَة السفلية إلى marker الأخضر أغمق لإضافة بُعد أكثر.
+
+في نفس وظيفة `linear-gradient`، أضف لون من وحدة hex مع القيم `11` للأحمر، `6C` للخضراء، و `31` للأزرق كحجة للون الثالث.
+
+# --hints--
+
+قاعدة CSS لـ `.green` يجب أن تحتوي علي خاصية `background` بالقيمة `linear-gradient(180deg, #55680D, #71F53E, #116C31)`.
+
+```js
+assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.red {
+  background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
+}
+
+--fcc-editable-region--
+.green {
+  background: linear-gradient(180deg, #55680D, #71F53E);
+}
+--fcc-editable-region--
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md
new file mode 100644
index 00000000000..2e5276e8655
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5bfe091060f1d6a629dd0.md
@@ -0,0 +1,81 @@
+---
+id: 61a5bfe091060f1d6a629dd0
+title: الخطوة ٦٤
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+حتى دون color stops، ربما لاحظت أن الألوان transition من marker الأخضر في نفس موقع النُّقَط مثل marker الأحمر. اللون الأول في البداية (0%)، والثاني في الوَسْط (50%)، والأخير في نهاية خط معامل التدرج (100٪).
+
+تقوم وظيفة `linear-gradient` تلقائياً بحساب ذلك القيم لك، وتضع الألوان بشكل متساو على طول خط التدرج (gradient line) بشكل افتراضي.
+
+في قاعدة CSS مسمى `.red`، أزل المحطات الثلاثة (color stops) للألوان من وظيفة `linear-gradient` لتنظيف الكود الخاص بك قليلاً.
+
+# --hints--
+
+يجب أن تحتوي قاعدة CSS مسمى `.red` على خاصية `background` بقيمة `linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`.
+
+```js
+assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
+}
+--fcc-editable-region--
+
+.green {
+  background: linear-gradient(180deg, #55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md
new file mode 100644
index 00000000000..33bbfabecbc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5c906ab73313316e342f0.md
@@ -0,0 +1,91 @@
+---
+id: 61a5c906ab73313316e342f0
+title: الخطوة ٦٥
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+إذا لم يتم تقديم حجة `gradientDirection` إلى وظيفة `linear-gradient`، تقوم الوظيفة بترتيب الألوان من الأعلى إلى الأسفل، أو على طول خط 180 درجة، بشكل افتراضي.
+
+نظف الكود أكثر قليلاً عن طريق إزالة الحجة `gradientDirection` من وظيفة `linear-gradient`.
+
+# --hints--
+
+يجب عليك إزالة حجة `gradientDirection` من وظيفة `linear-gradient` في قواعد CSS مسمى `.red` و `.green`.
+
+```js
+assert(!code.match(/linear-gradient\s*\(\s*180deg/gi));
+```
+
+يجب أن تحتوي قاعدة CSS مسمى `.red` على خاصية `background` بقيمة `linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27))`.
+
+```js
+assert.include(['linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))', 'rgba(0,0,0,0)linear-gradient(rgb(122,74,14),rgb(245,62,113),rgb(162,27,27))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
+```
+
+قاعدة CSS مسمى `.green` يجب أن تحتوي علي خاصية `background` بالقيمة `linear-gradient(#55680D, #71F53E, #116C31)`.
+
+```js
+assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62),rgb(17,108,49))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(180deg, rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(180deg, #55680D, #71F53E, #116C31);
+}
+--fcc-editable-region--
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md
new file mode 100644
index 00000000000..ab166ffb793
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5ca57f50ded36d33eef96.md
@@ -0,0 +1,79 @@
+---
+id: 61a5ca57f50ded36d33eef96
+title: الخطوة ٦٦
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+الآن ستطبق معامل تدرج (gradient) على marker الأزرق، هذا المرة باستخدام وظيفة `hsl` كـحجج للألوان.
+
+في قاعدة CSS مسمى `.blue`، قم بتغيير خاصية `background-color` إلى `background`.
+
+# --hints--
+
+قاعدة CSS مسمى `.blue` يجب أن يحتوي علي خاصية `background` بالقيمة `hsl(240, 100%, 50%)`.
+
+```js
+assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:hsl\(240,100%,50%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+--fcc-editable-region--
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md
new file mode 100644
index 00000000000..a5875379215
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d594b887335228ee6533.md
@@ -0,0 +1,77 @@
+---
+id: 61a5d594b887335228ee6533
+title: الخطوة ٦٧
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+استخدم وظيفة `linear-gradient` و مرر وظيفة `hsl` مع القيم `186` كوحده hue, و `76%` كوحده saturation, و `16%` كوحده lightness كحجج لون أول.
+
+# --hints--
+
+قاعدة CSS مسمى `.blue` يجب أن تحتوي علي خاصية `background` بالقيمة `linear-gradient(hsl(186, 76%, 16%))`.
+
+```js
+assert.match(__helpers.removeWhiteSpace(code), /\.blue\{.*?background:linear-gradient\(hsl\(186,76%,16%\)\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+--fcc-editable-region--
+.blue {
+  background: hsl(240, 100%, 50%);
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md
new file mode 100644
index 00000000000..ac08349002a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d6701ee08953ca375243.md
@@ -0,0 +1,77 @@
+---
+id: 61a5d6701ee08953ca375243
+title: الخطوة ٦٨
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+وكحجة اللون الثاني، مرر وظيفة `hsl` مع القيم `223` كوحده hue, و `90%` كوحده saturation، و `60%` كوحده lightness.
+
+# --hints--
+
+يجب أن تحتوي قاعدة CSS مسمى `.blue` على خاصية `background` بقيمة `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%))`.
+
+```js
+assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+--fcc-editable-region--
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%));
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md
new file mode 100644
index 00000000000..c750b03c893
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d79c858bef560e26c685.md
@@ -0,0 +1,77 @@
+---
+id: 61a5d79c858bef560e26c685
+title: الخطوة ٦٩
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+وكحجة اللون الثالث، مرر وظيفة `hsl` مع القيم `240` كحوده hue, و `56%` كوحده saturation، و `42%` كوحده lightness.
+
+# --hints--
+
+يجب أن تحتوي قاعدة CSS مسمى `.blue` على خاصية `background` بقيمة `linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%))`.
+
+```js
+assert.include(['linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))', 'rgba(0,0,0,0)linear-gradient(rgb(10,66,72),rgb(61,113,245),rgb(47,47,167))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.blue')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+--fcc-editable-region--
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%));
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md
new file mode 100644
index 00000000000..45f03dfaed2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61a5d7ef1cfcf45764df07a2.md
@@ -0,0 +1,87 @@
+---
+id: 61a5d7ef1cfcf45764df07a2
+title: الخطوة ٧٠
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+الآن بعد أن أصبح الألوان markers الصحيحة، حان الوقت لبناء marker sleeves. ابدأ من marker الأحمر.
+
+داخل `div` في marker الأحمر، قم بإنشاء `div` جديد وإعطائه class تسمى `sleeve`.
+
+# --hints--
+
+يجب أن يكون عنصر `div` الجديد الخاص بك داخل عنصر `div` في marker الأحمر.
+
+```js
+const redMarkerChildren = [...document.querySelector('.red')?.children];
+assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 1);
+```
+
+يجب أن تحتوي عناصر `div` الجديدة على class تسمى `sleeve`.
+
+```js
+const redMarkerChild = [...document.querySelector('.red')?.children][0];
+assert(redMarkerChild?.classList?.contains('sleeve'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      --fcc-editable-region--
+      <div class="marker red">
+      </div>
+      --fcc-editable-region--
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md
new file mode 100644
index 00000000000..cc02bbbf705
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc60b69cd4b87739d2174.md
@@ -0,0 +1,92 @@
+---
+id: 61adc60b69cd4b87739d2174
+title: الخطوة ٧١
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+قم بإنشاء قاعدة CSS جديدة تستهدف فئة `sleeve`. قم بتعيين خاصية `width` إلى `110px` و خاصية `height` إلى `25px`.
+
+# --hints--
+
+يجب عليك استخدام منتقي class (.) لاستهداف فئة `sleeve`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sleeve'));
+```
+
+يجب أن تكون لقاعدة CSS الخاصة بك `.sleeve` خاصية `width` بقيمة `110px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.width === '110px');
+```
+
+يجب أن تكون لقاعدة CSS الخاصة بك `.sleeve` خاصية `height` بقيمة `25px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.height === '25px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md
new file mode 100644
index 00000000000..e8516475024
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61adc91467b5d59328b9f781.md
@@ -0,0 +1,98 @@
+---
+id: 61adc91467b5d59328b9f781
+title: الخطوة ٧٩
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+في المشروع الأخير، تعلمت القليل عن الحدود (borders) و الخاصية `border-color`.
+
+جميع عناصر HTML لديها حدود، على الرغم من أنها عادة ما يتم تعيينها إلى `none` بشكل افتراضي. باستخدام CSS، يمكنك التحكم في جميع جوانب حدود العنصر، وتعيين الحدود على جميع الجهات، أو على جانب واحد في كل مرة. لكي تكون الحدود ظاهرة، تحتاج إلى تعيين عرضها (width) ونمطها (style).
+
+في قاعدة CSS لـ `.sleeve`، أضف خاصية `border-left-width` مع القيمة `10px`.
+
+# --hints--
+
+قاعدة CSS لـ `.sleeve`، يجب ان تحتوي علي خاصية `border-left-width` مع القيمة `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftWidth === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+--fcc-editable-region--
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+--fcc-editable-region--
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md
new file mode 100644
index 00000000000..34971e7bcfe
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add79e739a5faee9d96080.md
@@ -0,0 +1,97 @@
+---
+id: 61add79e739a5faee9d96080
+title: الخطوة ٨٠
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+الحدود لديها عدة أنماط للاختيار منها. يمكنك أن تجعل حدودك خطا صلبا (solid line)، ولكن يمكنك أيضا استخدام خط مقطوع (dashed) أو منقط (dotted) إذا أردتم ذلك. وربما تكون الخطوط الحدودية الصلبة (solid border lines) هي الأكثر شيوعا.
+
+في قاعدة CSS مسمى `.sleeve`، أضف خاصية `border-left-style` مع القيمة `solid`.
+
+# --hints--
+
+قاعدة CSS مسمى `.sleeve`، يجب أن تحتوي علي خاصية `border-left-style` مع القيمة `solid`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftStyle === 'solid');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+--fcc-editable-region--
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left-width: 10px;
+}
+--fcc-editable-region--
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md
new file mode 100644
index 00000000000..0aa1d8dadba
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61add929e41980b1edbdba7e.md
@@ -0,0 +1,100 @@
+---
+id: 61add929e41980b1edbdba7e
+title: الخطوة ٨١
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+يجب أن تكون حدودك مرئية الآن. إذا لم يتم تعيين أي لون، يتم استخدام الأسود بشكل افتراضي.
+
+لكن لجعل الكود الخاص بك أكثر قابلية للقراءة، من الأفضل تعيين لون الحدود بنفسك.
+
+في قاعدة CSS مسمى `.sleeve`، أضف خاصية `border-left-color` مع القيمة `black`.
+
+# --hints--
+
+قاعدة CSS مسمى `.sleeve`، يجب أن تحتوي علي خاصية `border-left-color` مع القيمة `black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeftColor === 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+--fcc-editable-region--
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left-width: 10px;
+  border-left-style: solid;
+}
+--fcc-editable-region--
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md
new file mode 100644
index 00000000000..423cbf89787
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61addaf7e83988b59a7d18ff.md
@@ -0,0 +1,123 @@
+---
+id: 61addaf7e83988b59a7d18ff
+title: الخطوة ٨٢
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+خاصية `border-left` المختصرة تتيح لك تعيين عرض الحدود اليسرى وأسلوبها ولونها في نفس الوقت.
+
+إليك بناء الجملة:
+
+```css
+border-left: width style color;
+```
+
+في قاعدة CSS مسمى `.sleeve`، استبدل الخصائص `border-left-width`, و `border-left-style`، و `border-left-color`، بالخاصية القصيرة `border-left`. يجب أن تكون قيم عرض (width) الحدود اليسرى ونمطها (style) ولونها (color) نفس القيم.
+
+# --hints--
+
+لا ينبغي لقاعدة CSS مسمى `.sleeve` الخاصة بك أن تحتوي على خاصية وقيمة `border-left-width`.
+
+```js
+assert(!/border-left-width/g.test(code));
+```
+
+لا ينبغي لقاعدة CSS مسمى `.sleeve` أن تحتوي على خاصية وقيمة `border-left-style`.
+
+```js
+assert(!/border-left-style/g.test(code));
+```
+
+لا ينبغي لقاعدة CSS مسمى `.sleeve` أن تحتوي على خاصية وقيمة `border-left-color`.
+
+```js
+assert(!/border-left-color/g.test(code));
+```
+
+يجب أن تحتوي قاعدة CSS مسمى `.sleeve` علي خاصية `border-left` مع القيمة `10px solid black`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft, '10px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+--fcc-editable-region--
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left-width: 10px;
+  border-left-style: solid;
+  border-left-color: black;
+}
+--fcc-editable-region--
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md
new file mode 100644
index 00000000000..ad3b16563b0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61ade49b2dad60c076cbd32d.md
@@ -0,0 +1,97 @@
+---
+id: 61ade49b2dad60c076cbd32d
+title: الخطوة ٨٣
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+يبدو marker الخاص بك جيد. ولكن لجعله يبدو أكثر واقعية، يمكنك تغيير أسلوب border لمضاعفة solid borders.
+
+بالنسبة لخاصية `border-left`، قم بتغيير قيمة أسلوب border من `solid` إلى `double`.
+
+# --hints--
+
+قاعدة CSS مسمى `.sleeve`، يجب أن تحتوي علي خاصية `border-left` مع القيمة `10px double black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+--fcc-editable-region--
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left: 10px solid black;
+}
+--fcc-editable-region--
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md
new file mode 100644
index 00000000000..3dfef56850a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b092eb9e7fc020b43b1bb2.md
@@ -0,0 +1,85 @@
+---
+id: 61b092eb9e7fc020b43b1bb2
+title: الخطوة ٧٢
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+لجعل marker يبدو أكثر واقعية، اعطي sleeve لون أبيض شفاف.
+
+أولاً، أعطي عنصر sleeve خاصية `background-color` بقيمة `white`.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS مسمى `.sleeve` الخاصية `background-color` بقيمة `white`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.sleeve {
+  width: 110px;
+  height: 25px;
+}
+--fcc-editable-region--
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md
new file mode 100644
index 00000000000..03835517eae
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093179e7fc020b43b1bb3.md
@@ -0,0 +1,88 @@
+---
+id: 61b093179e7fc020b43b1bb3
+title: الخطوة ٧٣
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+تصف <dfn>opacity</dfn> مدى تعتيم شيء ما أو عدم شفافيته. على سبيل المثال ، الجدار الصلب معتم، ولا يمكن للضوء أن يمر من خلاله. لكن كأس الشرب أكثر شفافية، ويمكنك أن ترى من خلال الزجاج إلى الجانب الآخر.
+
+مع خاصية `opacity`، يمكنك التحكم في مدى تعتم العنصر أو شفافيته. مع القيمة `0`، أو 0٪ ، سيكون العنصر شفافا تماما، وعند `1.0`، أو 100٪، سيكون العنصر معتم تماما كما هو، بشكل افتراضي.
+
+في قاعدة `.sleeve`، عيّن خاصية `opacity` إلى `0.5`.
+
+# --hints--
+
+يجب أن تكون لقاعدة CSS الخاصة بك `.sleeve` خاصية `opacity` بقيمة `0.5`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity === '0.5');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: white;
+}
+--fcc-editable-region--
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md
new file mode 100644
index 00000000000..92fb28f99aa
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093219e7fc020b43b1bb4.md
@@ -0,0 +1,89 @@
+---
+id: 61b093219e7fc020b43b1bb4
+title: الخطوة ٧٤
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+طريقة أخرى لتعيين opacity لعنصر ما هي باستخدام <dfn>alpha channel</dfn>. على غرار خاصية `opacity`، تتحكم وحدة alpha في مدى شفافية اللون.
+
+لقد قمت فعلًا بتعيين opacity ألى sleeve مع لون مسمى وخاصية `opacity` ولكن يمكنك إضافة وحدة alpha إلى خصائص ألوان CSS الأخرى.
+
+داخل قاعدة `.sleeve`، قم بإزالة الخاصية والقيمة `opacity`.
+
+# --hints--
+
+لا ينبغي لقاعدة CSS الخاصة بك `.sleeve` أن تحتوي على خاصية وقيمة `opacity`.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.sleeve')?.opacity);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: white;
+  opacity: 0.5;
+}
+--fcc-editable-region--
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md
new file mode 100644
index 00000000000..ae6c36f1867
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093329e7fc020b43b1bb5.md
@@ -0,0 +1,92 @@
+---
+id: 61b093329e7fc020b43b1bb5
+title: الخطوة ٧٥
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+أنت فعلًا على دراية باستخدام وظيفة `rgb` لتعيين الألوان. لإضافة وحدة alpha إلى لون `rgb`، استخدم الوظيفة `rgba`.
+
+تعمل وظيفة `rgba` تماما مثل وظيفة `rgb`، ولكنا تأخذ رقماً آخر من `0` إلى `1.0` من وحدة alpha:
+
+```css
+rgba(redValue, greenValue, blueValue, alphaValue);
+```
+
+في قاعدة `.sleeve`، استخدم وظيفة `rgba` لتعيين خاصية `background-color` للأبيض النقي مع شفافية (opacity) 50%.
+
+# --hints--
+
+يجب أن يكون لقاعدة CSS مسمى `.sleeve` الخاصية `background-color` بقيمة `rgba(255, 255, 255, 0.5)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.backgroundColor === 'rgba(255, 255, 255, 0.5)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: white;
+}
+--fcc-editable-region--
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md
new file mode 100644
index 00000000000..45018bffdee
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b093429e7fc020b43b1bb6.md
@@ -0,0 +1,103 @@
+---
+id: 61b093429e7fc020b43b1bb6
+title: الخطوة ٧٦
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+يبدو sleeve الخاص بك جيدًا، لكنه سيبدو أفضل إذا تم وضعه في اتجاه الجانب الأيمن من marker. وإحدى الطرق لذلك هي إضافة عنصر آخر قبل sleeve لدفعه إلى اليمين.
+
+أضف `div` جديد مع class يسمي `cap` قبل عنصر `div` من sleeve.
+
+# --hints--
+
+يجب أن يكون عنصر `div` الجديد الخاص بك داخل عنصر `div` من marker الأحمر.
+
+```js
+const redMarkerChildren = [...document.querySelector('div.red')?.children];
+assert(redMarkerChildren.every(child => child?.localName === 'div') && redMarkerChildren.length === 2);
+```
+
+يجب أن تحتوي عناصر `div` الجديدة على class يسمي `cap`.
+
+```js
+const redMarkerChildren = [...document.querySelector('div.red')?.children];
+assert(redMarkerChildren.some(child => child?.classList?.contains('cap')));
+```
+
+يجب أن يكون `div` من cap قبل `div` من sleeve.
+
+```js
+const redMarkerChildren = [...document.querySelector('div.red')?.children];
+const cap = document.querySelector('div.cap');
+const sleeve = document.querySelector('div.sleeve');
+assert(redMarkerChildren.indexOf(cap) < redMarkerChildren.indexOf(sleeve));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      --fcc-editable-region--
+      <div class="marker red">
+        <div class="sleeve"></div>
+      </div>
+      --fcc-editable-region--
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md
new file mode 100644
index 00000000000..cd003fa1c06
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0934c9e7fc020b43b1bb7.md
@@ -0,0 +1,99 @@
+---
+id: 61b0934c9e7fc020b43b1bb7
+title: الخطوة ٧٧
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+قم بإنشاء قاعدة CSS جديدة تستهدف فئة `cap`. في القاعدة الجديدة، قم بتعيين خاصية `width` إلى `60px`، و `height` إلى `25px`.
+
+# --hints--
+
+يجب عليك استخدام منتقى class لاستهداف فئة `cap`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cap'));
+```
+
+يجب أن تكون لقاعدة CSS الخاصة بك `.cap` خاصية `width` بقيمة `60px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cap')?.width === '60px');
+```
+
+يجب أن تكون لقاعدة CSS الخاصة بك `.cap` خاصية `height` بقيمة `25px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cap')?.height === '25px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md
new file mode 100644
index 00000000000..e59dde0d03b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0936d9e7fc020b43b1bb8.md
@@ -0,0 +1,104 @@
+---
+id: 61b0936d9e7fc020b43b1bb8
+title: الخطوة ٧٨
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+يبدو أن sleeve قد اختفى، لكن لا تقلق. إنه لا يزال موجود. ما حدث هو أن `div` من cap الجديد يأخذ كامل عرض marker، ويدفع marker إلى أسفل السطر التالي.
+
+هذا لأن الخاصية الافتراضية `display` لعناصر `div` هي `block`. لذا عندما يكون عنصران `block` بالقرب من بعضهما البعض، فإنهما يكدسان مثل الكتل (block) الفعلية. على سبيل المثال، عناصر marker الخاصة بك مكدسة (stacked) بعضَها فوق بعض.
+
+لوضع عنصرين `div` على نفس السطر ، قم بتعيين `display` إلى `inline-block`.
+
+قم بإنشاء قاعدة جديدة لاستهداف كل من فئات `cap` و `sleeve`، وتعيين `display` إلى `inline-block`.
+
+# --hints--
+
+يجب عليك استخدام منتقى الفئة لاستهداف كل من فئات `cap` و `sleeve`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve') || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap'));
+```
+
+يجب أن تحتوي قاعدة CSS الخاصة بك على خاصية `display` بقيمة `inline-block`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.cap, .sleeve')?.display === 'inline-block' || new __helpers.CSSHelp(document).getStyle('.sleeve, .cap')?.display === 'inline-block');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md
new file mode 100644
index 00000000000..531e8d2202b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095989e7fc020b43b1bb9.md
@@ -0,0 +1,79 @@
+---
+id: 61b095989e7fc020b43b1bb9
+title: الخطوة ٥١
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+سوف تستخدم وظيفة `rgb` لألوان هذا gradient.
+
+في الوظيفة `linear-gradient`، استخدم الوظيفة `rgb` لتعيين الحجة اللون الأول ألى الأحمر النقي.
+
+# --hints--
+
+يحب أن تحتوي قاعدة CSS مسمى `.red` علي خاصية `background` بالقيمة `linear-gradient(90deg, rgb(255, 0, 0))`.
+
+```js
+assert.match(__helpers.removeWhiteSpace(code), /\.red\{.*?background:linear-gradient\(90deg,rgb\(255,0,0\)\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(90deg);
+}
+--fcc-editable-region--
+
+.green {
+  background-color: #007F00;
+}
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md
new file mode 100644
index 00000000000..74f9a72bee6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095a79e7fc020b43b1bba.md
@@ -0,0 +1,79 @@
+---
+id: 61b095a79e7fc020b43b1bba
+title: الخطوة ٥٢
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+لن ترى gradient حتى الآن لأن دالة `linear-gradient` تحتاج إلى ٢ arguments على الأقل من الألوان للعمل.
+
+في نفس الدالة `linear-gradient`، استخدم الدالة `rgb` لتعيين الـ argument اللون الثاني الي الاخضر النقي.
+
+# --hints--
+
+يجب أن تحتوي قاعدة CSS لـ `.red` على خاصية `background` بقيمة `linear-gradient(90deg, rgb(255, 0, 0), rgb(0, 255, 0))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(255,0,0),rgb(0,255,0))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.red')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(90deg, rgb(255, 0, 0));
+}
+--fcc-editable-region--
+
+.green {
+  background-color: #007F00;
+}
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md
new file mode 100644
index 00000000000..3d8fd7d095b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b095c79e7fc020b43b1bbb.md
@@ -0,0 +1,77 @@
+---
+id: 61b095c79e7fc020b43b1bbb
+title: الخطوة ٦٢
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+وللـ color argument الثانية، استخدم hex color code مع القيم `71` للأحمر، `F5` للأخضر و `3E` للأزرق.
+
+# --hints--
+
+قاعدة CSS لـ `.green` يجب ان تحتوي علي خاصية `background` بالقيمة `linear-gradient(180deg, #55680D, #71F53E)`.
+
+```js
+assert.include(['linear-gradient(rgb(85,104,13),rgb(113,245,62))', 'rgba(0,0,0,0)linear-gradient(rgb(85,104,13),rgb(113,245,62))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.green')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.red {
+  background: linear-gradient(180deg, rgb(122, 74, 14) 0%, rgb(245, 62, 113) 50%, rgb(162, 27, 27) 100%);
+}
+
+--fcc-editable-region--
+.green {
+  background: linear-gradient(180deg, #55680D);
+}
+--fcc-editable-region--
+
+.blue {
+  background-color: hsl(240, 100%, 50%);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md
new file mode 100644
index 00000000000..9cba9d0d7fb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b09f739aa6572d2064f9b8.md
@@ -0,0 +1,97 @@
+---
+id: 61b09f739aa6572d2064f9b8
+title: الخطوة ٨٤
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+اللون الأسود لحدودك يبدو قاسيا جدا ضد sleeve الأكثر شفافية. يمكنك استخدام alpha channel لتقليل شفافية (opacity) الحدود السوداء.
+
+لخاصية `border-left`، استخدم وظيفة `rgba` لتعيين قيمة اللون إلى الأسود النقي مع شفافية 75%.
+
+# --hints--
+
+قاعدة CSS مسمى `.sleeve`، يجب أن تحتوي علي خاصية `border-left` مع القيمة `10px double rgba(0, 0, 0, 0.75)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sleeve')?.borderLeft === '10px double rgba(0, 0, 0, 0.75)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+--fcc-editable-region--
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left: 10px double black;
+}
+--fcc-editable-region--
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md
new file mode 100644
index 00000000000..87dcc8b2cb3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a1b2af494934b7ec1a72.md
@@ -0,0 +1,123 @@
+---
+id: 61b0a1b2af494934b7ec1a72
+title: الخطوة ٨٥
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+رائع. يبدو marker الأحمر الخاص بك جيد. الآن ما عليك فعله هو إضافة caps و sleeves إلى markers الأخرى الخاصة بك.
+
+أضف cap و sleeve إلى كل من markers الخضراء والزرقاء. يمكنك فقط نسخ عناصر `div` من marker الأحمر ولصقها في markers الأخريين.
+
+# --hints--
+
+يجب أن يحتوي `div` من marker الأخضر على عنصرين `div`.
+
+```js
+const greenMarkerChildren = [...document.querySelector('.green')?.children];
+assert(greenMarkerChildren.every(child => child?.localName === 'div') && greenMarkerChildren.length === 2);
+```
+
+يجب أن يكون عنصر `div` من marker الأخضر قبل عنصر `div` من sleeve.
+
+```js
+const greenMarkerChildren = [...document.querySelector('.green')?.children];
+const greenMarkerCap = document.querySelector('.green .cap');
+const greenMarkerSleeve = document.querySelector('.green .sleeve');
+assert(greenMarkerChildren.indexOf(greenMarkerCap) < greenMarkerChildren.indexOf(greenMarkerSleeve));
+```
+
+يجب أن تحتوي `div` من marker الأزرق على عنصرين `div`.
+
+```js
+const blueMarkerChildren = [...document.querySelector('.blue')?.children];
+assert(blueMarkerChildren.every(child => child?.localName === 'div') && blueMarkerChildren.length === 2);
+```
+
+يجب أن يكون عنصر `div` من marker الأزرق قبل عنصر `div` من sleeve.
+
+```js
+const blueMarkerChildren = [...document.querySelector('.blue')?.children];
+const blueMarkerCap = document.querySelector('.blue .cap');
+const blueMarkerSleeve = document.querySelector('.blue .sleeve');
+assert(blueMarkerChildren.indexOf(blueMarkerCap) < blueMarkerChildren.indexOf(blueMarkerSleeve));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      --fcc-editable-region--
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+      </div>
+      <div class="marker blue">
+      </div>
+      --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left: 10px double rgba(0, 0, 0, 0.75);
+}
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md
new file mode 100644
index 00000000000..d4ab15ae94c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b0a44a6b865738ba49b9fb.md
@@ -0,0 +1,109 @@
+---
+id: 61b0a44a6b865738ba49b9fb
+title: الخطوة ٨٦
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+آخر شيء ستفعله هو إضافة ظلال طفيفة لكل marker لجعلها تبدو أكثر واقعية.
+
+الخاصية `box-shadow` تطبق ظلا أو أكثر حول العنصر. إليك بناء الجملة أولي:
+
+```css
+box-shadow: offsetX offsetY color;
+```
+
+ابدأ بإضافة ظل بسيط إلى marker الأحمر.
+
+في قاعدة CSS مسمى `.red`، قم بإضافة خاصية `box-shadow` مع القيم `5px` ألى `offsetX` و `5px` ألى `offsetY` و `red` ألى `color`.
+
+# --hints--
+
+قاعدة CSS مسمى `.red`، يجب أن تحتوي علي خاصية `box-shadow` مع القيمة `5px 5px red`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 5px 5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker blue">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left: 10px double rgba(0, 0, 0, 0.75);
+}
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+}
+--fcc-editable-region--
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md
new file mode 100644
index 00000000000..86741209c4c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b306305810f1c9040ce5a2.md
@@ -0,0 +1,104 @@
+---
+id: 61b306305810f1c9040ce5a2
+title: خطوة ٨٧
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+كما تري، قد أضفت ظلا احمر بسيط حول الـ marker الخاص بك 5 بكسل لليمين، و 5 بكسل للأسفل.
+
+ولكن ماذا لو أردت أن تضع ظلالك على الجانب المقابل؟ يمكنك فعل ذلك باستخدام القيم السالبة ل `offsetX` و `offsetY`.
+
+قم بتحديث القيم لخاصية `box-shadow` وعيّن `offsetX` إلى `-5px`، و `offsetY` إلى `-5px`.
+
+# --hints--
+
+قاعدة CSS لـ `.red`، يجب ان تحتوي علي خاصية `box-shadow` مع القيمة `-5px -5px red`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red -5px -5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker blue">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left: 10px double rgba(0, 0, 0, 0.75);
+}
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+  box-shadow: 5px 5px red;
+}
+--fcc-editable-region--
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md
new file mode 100644
index 00000000000..4ae9271bac4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30995968123ceb6b76167.md
@@ -0,0 +1,108 @@
+---
+id: 61b30995968123ceb6b76167
+title: الخطوة ٨٨
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+لاحظ أن حواف الظلال حادة. هذا لأن هناك قيمة إختيارية `blurRadius` للخاصية `box-shadow`:
+
+```css
+box-shadow: offsetX offsetY blurRadius color;
+```
+
+إذا لم يتم تضمين قيمة `blurRadius`، فتصبح بشكل افتراضي `0` وتنتج حواف حادة. كلما ارتفعت قيمة `blurRadius`، كلما زاد التأثير الضبابي (blurring effect).
+
+في قاعدة CSS مسمى `.green`، أضف خاصية `box-shadow` مع القيم `5px` ألى `offsetX`, و `5px` ألى `offsetY`, و `5px` ألى `blurRadius`, و `green` ألى `color`.
+
+# --hints--
+
+يجب أن تحتوي قاعدة CSS مسمى `.green` علي خاصية `box-shadow` مع القيمة `5px 5px 5px green`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 5px 5px 5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker blue">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left: 10px double rgba(0, 0, 0, 0.75);
+}
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+  box-shadow: -5px -5px red;
+}
+
+--fcc-editable-region--
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+}
+--fcc-editable-region--
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md
new file mode 100644
index 00000000000..b002bc8f052
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b30a286c228bd0c493c09a.md
@@ -0,0 +1,111 @@
+---
+id: 61b30a286c228bd0c493c09a
+title: الخطوة ٨٩
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+ولكن ماذا لو أردت أن تزيد من الظل؟ يمكنك القيام بذلك باستخدام قيمة `spreadRadius` الاختيارية:
+
+```css
+box-shadow: offsetX offsetY blurRadius spreadRadius color;
+```
+
+مثل `blurRadius`, تصبح `spreadRadius` بقيمة `0` بشكل افتراضي إذا لم يكن مشمولاً.
+
+تدرب بإضافة shadow بقيمة 5px حول marker الأزرق مباشراً.
+
+في قاعدة CSS مسمى `.blue`، أضف خاصية `box-shadow` مع القيم `0` ألى `offsetX` و `0` ألى `offsetY` و `0` ألى `blurRadius` و `5px` ألى `spreadRadius` و `blue` ألى `color`.
+
+# --hints--
+
+قاعدة CSS مسمى `.blue`، يجب أن تحتوي علي خاصية `box-shadow` مع القيمة `0 0 0 5px blue`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 0px 5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker blue">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left: 10px double rgba(0, 0, 0, 0.75);
+}
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+  box-shadow: -5px -5px red;
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+  box-shadow: 5px 5px 5px green;
+}
+
+--fcc-editable-region--
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md
new file mode 100644
index 00000000000..2a25f5b2ec6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31287fb580ae75a486047.md
@@ -0,0 +1,104 @@
+---
+id: 61b31287fb580ae75a486047
+title: الخطوة ٩٠
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+الآن بعد أن أصبحت على دراية بخاصية `box-shadow` يمكنك وضع اللمسات الأخيرة على الظل، بدءاً بالخاصية في marker الأحمر.
+
+في قاعدة CSS مسمى `.red`، قم بتحديث القيم لخاصية `box-shadow` حتي يصبح `offsetX` بقيمة `0` و `offsetY` بقيمة `0` و `blurRadius` بقيمة `20px` و `spreadRadius` بقيمة `0` و `color` بقيمة `red`.
+
+# --hints--
+
+قاعدة CSS مسمى `.red`، يجب أن تحتوي علي خاصية `box-shadow` مع القيمة `0 0 20px 0 red`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'red 0px 0px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker blue">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left: 10px double rgba(0, 0, 0, 0.75);
+}
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+  box-shadow: -5px -5px red;
+}
+--fcc-editable-region--
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+  box-shadow: 5px 5px 5px green;
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+  box-shadow: 0 0 0 5px blue;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md
new file mode 100644
index 00000000000..5bb439e9e9a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b315e76a63b3ecbbb11b75.md
@@ -0,0 +1,104 @@
+---
+id: 61b315e76a63b3ecbbb11b75
+title: الخطوة ٩١
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+بعد ذلك، قم بتحديث قيمة `color` لـ خاصية `box-shadow` ألى marker الأحمر.
+
+استبدل اللون المسمى بوظيفة `rgba`. استخدم القيم `83` للأحمر، `14` للأخضر، `14` للأزرق، و `0.8` للـ alpha channel.
+
+# --hints--
+
+قاعدة CSS مسمى `.red`، يجب أن تحتوي علي خاصية `box-shadow` مع القيمة `0 0 20px 0 rgba(83, 14, 14, 0.8)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.red')?.boxShadow === 'rgba(83, 14, 14, 0.8) 0px 0px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker blue">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left: 10px double rgba(0, 0, 0, 0.75);
+}
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+--fcc-editable-region--
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+  box-shadow: 0 0 20px 0 red;
+}
+--fcc-editable-region--
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+  box-shadow: 5px 5px 5px green;
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+  box-shadow: 0 0 0 5px blue;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md
new file mode 100644
index 00000000000..fa61d12185a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b3183655ec10efd8c0bb07.md
@@ -0,0 +1,110 @@
+---
+id: 61b3183655ec10efd8c0bb07
+title: الخطوة ٩٢
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+الظلال للـ markers الخضراء والزرقاء الخاصة بك ستكون لها نفس الـ position و blur و spread. الفرق الوحيد هو الألوان.
+
+في قاعدة CSS لـ `.green` و `.blue`، قم بتحديث القيم لخاصية `box-shadow` حتي يصبح `offsetX` بقيمة `0` و `offsetY` بقيمة `0` و `blurRadius` بقيمة `20px` و `spreadRadius` بقيمة `0`. اترك الألوان كـ `green` و `blue` الآن.
+
+# --hints--
+
+قاعدة CSS لـ `.green`، يجب ان تحتوي علي خاصية `box-shadow` مع القيمة `0 0 20px 0 green`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'green 0px 0px 20px 0px');
+```
+
+قاعدة CSS لـ `.blue`، يجب ان تحتوي علي خاصية `box-shadow` مع القيمة `0 0 20px 0 blue`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'blue 0px 0px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker blue">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left: 10px double rgba(0, 0, 0, 0.75);
+}
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+  box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
+}
+
+--fcc-editable-region--
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+  box-shadow: 5px 5px 5px green;
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+  box-shadow: 0 0 0 5px blue;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md
new file mode 100644
index 00000000000..fde4d7c8484
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31a451057fff645ec09be.md
@@ -0,0 +1,102 @@
+---
+id: 61b31a451057fff645ec09be
+title: الخطوة ٩٣
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+بالنسبة لخاصية `box-shadow` للـ marker الاخضر، استبدل اللون المسمى برمز لون hex. استخدم القيم `3B` للأحمر، `7E` للأخضر، `20` للأزرق، و `CC` للـ alpha channel.
+
+# --hints--
+
+قاعدة CSS لـ `.green`، يجب ان تحتوي علي خاصية `box-shadow` مع القيمة `0 0 20px 0 #3B7E20CC`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.green')?.boxShadow === 'rgba(59, 126, 32, 0.8) 0px 0px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker blue">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left: 10px double rgba(0, 0, 0, 0.75);
+}
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+  box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
+}
+
+--fcc-editable-region--
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+  box-shadow: 0 0 20px 0 green;
+}
+--fcc-editable-region--
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+  box-shadow: 0 0 20px 0 blue;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md
new file mode 100644
index 00000000000..663331b87d6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/61b31cd7b0c76bfc076b4719.md
@@ -0,0 +1,184 @@
+---
+id: 61b31cd7b0c76bfc076b4719
+title: الخطوة ٩٤
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+أخيرا، بالنسبة لخاصية `box-shadow` ألى marker الأزرق، استبدل اللون المسمى بوظيفة `hsla`. استخدم القيم `223` ألى hue و `59%` ألى saturation و `31%` ألى lightness و `0.8` ألى alpha channel.
+
+وبذلك، اكتملت مجموعتك markers الملونة! أحسنت صنعا.
+
+# --hints--
+
+قاعدة CSS مسمى `.blue`، يجب أن تحتوي علي خاصية `box-shadow` مع القيمة `0 0 20px 0 hsla(223, 59%, 31%, 0.8)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.blue')?.boxShadow === 'rgba(32, 59, 126, 0.8) 0px 0px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker blue">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left: 10px double rgba(0, 0, 0, 0.75);
+}
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+  box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+  box-shadow: 0 0 20px 0 #3B7E20CC;
+}
+
+--fcc-editable-region--
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+  box-shadow: 0 0 20px 0 blue;
+}
+--fcc-editable-region--
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Colored Markers</title>
+    <link rel="stylesheet" href="styles.css">
+  </head>
+  <body>
+    <h1>CSS Color Markers</h1>
+    <div class="container">
+      <div class="marker red">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker green">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+      <div class="marker blue">
+        <div class="cap"></div>
+        <div class="sleeve"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+h1 {
+  text-align: center;
+}
+
+.container {
+  background-color: rgb(255, 255, 255);
+  padding: 10px 0;
+}
+
+.marker {
+  width: 200px;
+  height: 25px;
+  margin: 10px auto;
+}
+
+.cap {
+  width: 60px;
+  height: 25px;
+}
+
+.sleeve {
+  width: 110px;
+  height: 25px;
+  background-color: rgba(255, 255, 255, 0.5);
+  border-left: 10px double rgba(0, 0, 0, 0.75);
+}
+
+.cap, .sleeve {
+  display: inline-block;
+}
+
+.red {
+  background: linear-gradient(rgb(122, 74, 14), rgb(245, 62, 113), rgb(162, 27, 27));
+  box-shadow: 0 0 20px 0 rgba(83, 14, 14, 0.8);
+}
+
+.green {
+  background: linear-gradient(#55680D, #71F53E, #116C31);
+  box-shadow: 0 0 20px 0 #3B7E20CC;
+}
+
+.blue {
+  background: linear-gradient(hsl(186, 76%, 16%), hsl(223, 90%, 60%), hsl(240, 56%, 42%));
+  box-shadow: 0 0 20px 0 hsla(223, 59%, 31%, 0.8);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md
new file mode 100644
index 00000000000..2b343407bd1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537485c4f2a624f18d7794.md
@@ -0,0 +1,118 @@
+---
+id: 61537485c4f2a624f18d7794
+title: الخطوة الأولى
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+ابدأ بنموذج HTML المعتاد الخاص بك. قم بإضافة تعريف `DOCTYPE`، وعنصر `html` و عنصر `head` وعنصر `body`.
+
+أضف خاصية `lang` إلى علامة فتح (opening tag) بشكل `<html>` بقيمة `en`.
+
+# --hints--
+
+يجب أن يحتوي الكود الخاص بك على مرجع `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE/gi));
+```
+
+عليك أن تضيف مسافة بعد مرجع `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+/gi));
+```
+
+ينبغي تعيين `html` نوعا للمستند.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html/gi));
+```
+
+ينبغي إغلاق إعلان `DOCTYPE` بواسطة <code dir="ltr">&gt;</code> بعد تعيين النوع.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
+```
+
+يجب أن يحتوي عنصر `html` على علامة فتح (opening tag).
+
+```js
+assert(code.match(/<html\s*>|<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+يجب أن يحتوي عنصرك `html` على علامة أغلاق (closing tag).
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+يجب أن يحتوي عنصر `<html>` على خاصية `lang` بقيمة `en`.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/));
+```
+
+يجب أن يكون إعلانك `DOCTYPE` في بداية HTML.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
+```
+
+يجب أن يكون لديك علامة فتح (opening tag) الآتية للعنصر `head`.
+
+```js
+assert(code.match(/<head\s*>/i));
+```
+
+يجب أن يكون لديك علامة إغلاق (closing tag) الآتية لعنصر `head`.
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+يجب أن يكون لديك العلامة فتح (opening tag) الآتية للعنصر `body`.
+
+```js
+assert(code.match(/<body\s*>/i));
+```
+
+يجب أن يكون لديك العلامة إغلاق (closing tag) الآتية للعنصر `body`.
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+عناصر `head` و `body` يجب أن يكونا متوازيان (siblings).
+
+```js
+assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
+```
+
+يجب أن يكون عنصر `head` داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
+```
+
+يجب أن يكون عنصر `body` داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md
new file mode 100644
index 00000000000..f8d329b8761
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537a8054753e2f1f2a1574.md
@@ -0,0 +1,58 @@
+---
+id: 61537a8054753e2f1f2a1574
+title: الخطوة الثانية
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+داخل عنصر `head` قم بإضافة وسم `meta` مع `name` تم تعيينه إلى `viewport` و `content` تم تعيينه إلى `width=device-width, initial-scale=1`.
+
+أضف أيضًا وسم `meta` مع `charset` بقيمة `UTF-8`.
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على عنصرين `meta`.
+
+```js
+const meta = document.querySelectorAll('meta');
+assert(meta?.length === 2);
+```
+
+عنصر `meta` واحد يجب أن يحتوي على `name` تم تعيينه إلى `viewport`، و `content` تم تعيينه إلى `width=device-width, initial-scale=1.0`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content').match(/width=device-width,\s?initial-scale=1(.0)?/) && !m?.getAttribute('charset'));
+assert.exists(target);
+```
+
+يجب أن يحتوي عنصر `meta` الآخر على السمة `charset` بقيمة `UTF-8`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
+assert.exists(target);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md
new file mode 100644
index 00000000000..336556b0af4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537bb9b1a29430ac15ad38.md
@@ -0,0 +1,62 @@
+---
+id: 61537bb9b1a29430ac15ad38
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+داخل عنصر `head`، قم بإضافة عنصر `title` مع نص بقيمة `Photo Gallery`، و عنصر `link` لإضافة ملف `styles.css` إلى الصفحة.
+
+# --hints--
+
+يجب أن يحتوي عنصر `link` الخاص بك على خاصية `href` مع القيمة `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+الكود الخاص بك يجب أن يحتوي على عنصر `title`.
+
+```js
+const title = document.querySelector('title');
+assert.exists(title);
+```
+
+يجب أن يكون لمشروعك العنوان `Photo Gallery`.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim()?.toLowerCase(), 'photo gallery')
+```
+
+تذكر أن الـ casing، اي حالة الحرف سواء كبير او صغير (capital or small) والإملاء مهمان للعنوان.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim(), 'Photo Gallery');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md
new file mode 100644
index 00000000000..092b0a753bc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c5f81f0cf325b4a854c.md
@@ -0,0 +1,62 @@
+---
+id: 61537c5f81f0cf325b4a854c
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+أضف عنصر `header` داخل عنصر `body` وعيّن له فئة (class) بقيمة `header`.
+
+داخل `header`، أنشئ `h1` مع نص `css flexbox photo gallery`.
+
+# --hints--
+
+يجب أن يكون لديك عنصر `header` داخل عنصرك `body`.
+
+```js
+assert.exists(document.querySelector('body')?.querySelector('header'));
+```
+
+يجب أن يحتوي عنصرك `header` على `class` يسمى `header`.
+
+```js
+assert(document?.querySelector('body')?.querySelector('header')?.classList?.contains('header'));
+```
+
+يجب أن يحتوي عنصرك `header` على عنصر `h1` داخله.
+
+```js
+assert.exists(document.querySelector('.header')?.querySelector('h1'));
+```
+
+يجب أن يحتوي عنصر `h1` على النص `css flexbox photo gallery`.
+
+```js
+assert(document?.querySelector('.header')?.querySelector('h1')?.innerText === 'css flexbox photo gallery');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html>
+  <head lang="en">
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md
new file mode 100644
index 00000000000..7d84dc3d6a8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537c9eecea6a335db6da79.md
@@ -0,0 +1,65 @@
+---
+id: 61537c9eecea6a335db6da79
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+أسفل عنصرك `.header`، أنشئ عنصر `div` جديد مع `class` يسمى `"gallery"`. سيكون `div` حاوية لصور المَعْرِض.
+
+في عنصر `.gallery`، أنشئ تسع عناصر `img`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `div` في عنصرك `body`.
+
+```js
+assert(document.querySelector('body')?.querySelectorAll('div')?.length >= 1);
+```
+
+يجب أن يحتوي عنصرك `div` على `class` يسمى `gallery`.
+
+```js
+assert(document.querySelector('body')?.querySelector('.gallery'));
+```
+
+يجب أن يأتي عنصرك `div` بعد عنصرك `.header`.
+
+```js
+assert(document.querySelector('header')?.nextElementSibling?.classList?.contains('gallery'));
+```
+
+يجب أن يحتوي عنصر `.gallery` على تسع عناصر `img`.
+
+```js
+assert(document.querySelector('.gallery')?.querySelectorAll('img')?.length === 9);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
new file mode 100644
index 00000000000..8a70e22a815
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61537d86bdc3dd343688fceb.md
@@ -0,0 +1,111 @@
+---
+id: 61537d86bdc3dd343688fceb
+title: الخطوة ٦
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+بعد ذلك، اعطي كل `img` سمة `src` وفقا لترتيبهم في المستند. يجب أن يحتوي عنصر `img` الأول على `src` بقيمة `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg`. يجب أن تكون البقية مثلها، باستثناء استبدل `1` بالرقم ترتيب `img` في المستند.
+
+# --hints--
+
+جميع العناصر التسع من `img` الخاصة بك يجب أن تحتوي على سمة `src`.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('src')));
+```
+
+يجب أن يحتوي العنصر `img` الأول على `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg` قيمة سمة `src`.
+
+```js
+assert(document.querySelectorAll('img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg');
+```
+
+يجب أن يحتوي العنصر `img` الثاني على `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg` قيمة سمة `src`.
+
+```js
+assert(document.querySelectorAll('img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg');
+```
+
+يجب أن يحتوي العنصر `img` الثالث على `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg` قيمة سمة `src`.
+
+```js
+assert(document.querySelectorAll('img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg');
+```
+
+يجب أن يحتوي العنصر `img` الرابع على `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg` قيمة سمة `src`.
+
+```js
+assert(document.querySelectorAll('img')?.[3]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg');
+```
+
+يجب أن يحتوي العنصر `img` الخامس على `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg` قيمة سمة `src`.
+
+```js
+assert(document.querySelectorAll('img')?.[4]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg');
+```
+
+يجب أن يحتوي العنصر `img` السادس على `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg` قيمة سمة `src`.
+
+```js
+assert(document.querySelectorAll('img')?.[5]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg');
+```
+
+يجب أن يحتوي العنصر `img` السابع على `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg` قيمة سمة `src`.
+
+```js
+assert(document.querySelectorAll('img')?.[6]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg');
+```
+
+يجب أن يحتوي العنصر `img` الثامن على `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg` قيمة سمة `src`.
+
+```js
+assert(document.querySelectorAll('img')?.[7]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg');
+```
+
+يجب أن يحتوي العنصر `img` التاسع على `https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg` قيمة سمة `src`.
+
+```js
+assert(document.querySelectorAll('img')?.[8]?.getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+--fcc-editable-region--
+    <div class="gallery">
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+      <img>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md
new file mode 100644
index 00000000000..753d9f485f0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615380dff67172357fcf0425.md
@@ -0,0 +1,62 @@
+---
+id: 615380dff67172357fcf0425
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+سوي نموذجك للصندوق (box model) عن طريق إنشاء منتقي `*` وتعيين خاصية `box-sizing` ألى `border-box`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `*`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+يجب أن يكون لمنتقيك `*` خاصية `box-sizing` بقيمة `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
new file mode 100644
index 00000000000..09a947cf03e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153893900438b4643590367.md
@@ -0,0 +1,87 @@
+---
+id: 6153893900438b4643590367
+title: الخطوة ٩
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+أزل margin من عنصرك `body`، وعيّن `font-family` بقيمة `sans-serif`، وأعطيه `background-color` بقيمة `#f5f6f7`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `body`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+يجب أن يحتوي منتقي `body` على خاصية `margin` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginTop, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginBottom, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginLeft, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.marginRight, '0px');
+```
+
+يجب أن يكون لمنتقاك `body` خاصية `font-family` بقيمة `sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === 'sans-serif');
+```
+
+يجب أن يحتوي منتقى `body` على خاصية `background-color` بقيمة `#f5f6f7`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(245, 246, 247)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
new file mode 100644
index 00000000000..56adf18f9f2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153897c27f6334716ee5abe.md
@@ -0,0 +1,114 @@
+---
+id: 6153897c27f6334716ee5abe
+title: الخطوة ١٠
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+حاذي نصك `.header` في منتصف. أجعل النص كبير باستخدام خاصية `text-transform` مع خاصية بقيمة `uppercase`.
+
+أعطاها padding بقيمة `32px` على جميع الجوانب. عيّن قيم ألوان الخلفية إلى `#0a0a23` والنص إلى `#fff`.
+
+أضف `border-bottom` بقيمة `4px solid #fdb347`.
+
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.header`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.header'));
+```
+
+يجب أن يكون لمنتقي `.header` الخاص بك خاصية `text-align` بقيمة `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.header')?.textAlign === 'center');
+```
+
+يجب أن يكون لمنتقي `.header` الخاص بك خاصية `text-transform` بقيمة `uppercase`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.header')?.textTransform === 'uppercase');
+```
+
+يجب أن يحتوي منتقي `.header` على خاصية `padding` بقيمة `32px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.header')?.padding === '32px');
+```
+
+يجب أن يحتوي منتقى `.header` على خاصية `background-color` بقيمة `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.header')?.backgroundColor === 'rgb(10, 10, 35)');
+```
+
+يجب أن يحتوي منتقي `.header` على خاصية `color` بقيمة `#fff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.header')?.color === 'rgb(255, 255, 255)');
+```
+
+يجب أن يكون لمنتقاك `.header` الخاصية `border-bottom` بقيمة `4px solid #fdb347`.
+
+```js
+console.log(new __helpers.CSSHelp(document).getStyle('.header'))
+assert(new __helpers.CSSHelp(document).getStyle('.header')?.borderBottom === '4px solid rgb(253, 179, 71)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md
new file mode 100644
index 00000000000..8233fa3fbd7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615389bd81347947ea7ba896.md
@@ -0,0 +1,91 @@
+---
+id: 615389bd81347947ea7ba896
+title: الخطوة ١١
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Flexbox هو تخطيط CSS أحادي البعد يمكنه التحكم في الطريقة التي يتم فيها المسافة بين العناصر وتحويلها داخل الحاوية.
+
+لاستخدامه، أعطي عنصر `display` خاصية `flex`. هذا سيجعل العنصر <em>حاوي flex</em>. أي فرع مباشر لحاوي flex تسمى <em>عناصر flex</em>.
+
+أنشئ منتقي `.gallery`, يحتوى على خاصية flex.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.gallery`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery'));
+```
+
+يجب أن يحتوي منتقي `.gallery` على خاصية `display` بقيمة `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.display === 'flex');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md
new file mode 100644
index 00000000000..7eeca65694c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153908a366afb4d57185c8d.md
@@ -0,0 +1,94 @@
+---
+id: 6153908a366afb4d57185c8d
+title: الخطوة ١٢
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+لدى Flexbox محور رئيس وعارض. المحور الرئيس يتم تعريفه بواسطة خاصية `flex-direction` التي لها أربع قيم ممكنة:
+
+- `row` (الافتراضي): محور أفقي مع عناصر flex من اليسار إلى اليمين
+- `row-reverse`: محور أفقي مع عناصر flex من اليمين إلى اليسار
+- `column`: المحور العمودي مع عناصر flex من الأعلى إلى الأسفل
+- `column-reverse`: المحور العمودي مع عناصر flex من الأسفل إلى الأعلى
+
+**تلميح**: المحاور والاتجاهات ستكون مختلفة تبعاً لاتجاه النص. القيم المعروضة هي لاتجاه النص من اليسار إلى اليمين.
+
+حاول أن ترى القيم المختلفة كيف تؤثر على التخطيط.
+
+عند الانتهاء من ذلك، عيّن `flex-direction` بقيمة `row` إلى عنصر `.gallery`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.gallery` على خاصية `flex-direction` بقيمة `row`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexDirection === 'row');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
new file mode 100644
index 00000000000..ed607123d97
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615392916d83fa4f02f7e2cf.md
@@ -0,0 +1,88 @@
+---
+id: 615392916d83fa4f02f7e2cf
+title: الخطوة ١٣
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+
+الخاصية `flex-wrap` تحدد كيف يجب أن تتصرف العناصر flex الخاصة بك عندما تكون الحاوي flex صغيرة جدا. تعيينها إلى `wrap` سيسمح للعناصر أن wrap إلى الصف التالي أو العمود التالي. `nowrap` (الافتراضي) سيمنع عناصرك من wrap و shrink إذا لزم الأمر.
+
+
+اجعلها بذلك wrap عناصرك flex إلى الصف التالي عندما ينفد الفضاء.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.gallery` على خاصية `flex-wrap` بقيمة `wrap`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.flexWrap === 'wrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
new file mode 100644
index 00000000000..9be07b2e2f7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153938dce8b294ff8f5a4e9.md
@@ -0,0 +1,87 @@
+---
+id: 6153938dce8b294ff8f5a4e9
+title: الخطوة ١٤
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+الخاصية `justify-content` تحدد كيفية وضع العناصر داخل الـ flex container على المحور الرئيسي، ويؤثر على موقعهم والمساحة المحيطة بهم.
+
+أعطي منتقي `.gallery` خاصية `justify-content` بقيمة `center`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.gallery` على خاصية `justify-content` بقيمة `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.justifyContent === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md
new file mode 100644
index 00000000000..595b348e04a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153947986535e5117e60615.md
@@ -0,0 +1,88 @@
+---
+id: 6153947986535e5117e60615
+title: خطوة ١٥
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+الخاصية `align-items` تضع الـ flex content على المحور المتقاطع. في هذه الحالة، مع تعيين `flex-direction` إلى `row`، سيكون المحور المتقاطع الخاص بك افقيا.
+
+لتوسيط صورك عموديًا، اعطي منتقي `.gallery` خاصية `align-items` بقيمة `center`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.gallery` على خاصية `align-items` بقيمة `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.alignItems === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md
new file mode 100644
index 00000000000..dd96ed449c8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539e07e7430b528fbffe21.md
@@ -0,0 +1,104 @@
+---
+id: 61539e07e7430b528fbffe21
+title: الخطوة ١٦
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+اعطي منتقي `.gallery` خاصية `padding` بقيمة `20px 10px` لإنشاء بعض المساحة حول الحاوية.
+
+ثم أعطيه `max-width` بقيمة `1400px` وأضف `margin` بقيمة `0 auto` لوضعها بالمنتصف.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.gallery` على خاصية `padding` بقيمة `20px 10px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingTop, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingBottom, '20px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingLeft, '10px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.gallery')?.paddingRight, '10px');
+```
+
+يجب أن يحتوي منتقي `.gallery` على خاصية `max-width` بقيمة `1400px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.maxWidth === '1400px');
+```
+
+يجب وضع عنصرك `.gallery` بالمنتصف بواسطة إضافة `margin` بقيمة `0 auto`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.gallery').cssText, 'margin: 0px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md
new file mode 100644
index 00000000000..19493ce15e6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/61539f32a206bd53ec116465.md
@@ -0,0 +1,92 @@
+---
+id: 61539f32a206bd53ec116465
+title: الخطوة ١٧
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+لاحظ أن بعض صورك قد أصبحت مشوهة. هذا لأن الصور لها نسب أبعاد (aspect ratios) مختلفة. بدلاً من تعيين كل نسبة من الابعاد بشكل فردي، يمكنك استخدام خاصية `object-fit` لتحديد سلوك الصور.
+
+أعطي منتقيك `.gallery img` خاصية `object-fit` بقيمة `cover`. هذا سوف يخبر الصورة بملء حاوية الـ `img` مع الحفاظ على نسبة الابعاد (aspect ratio)، مما يؤدي إلى الاقتصاص (cropping) ليلائم.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.gallery img` على خاصية `object-fit` بقيمة `cover`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.objectFit === 'cover');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+--fcc-editable-region--
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md
new file mode 100644
index 00000000000..2599b204e4f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a04847abee57a3a406ac.md
@@ -0,0 +1,95 @@
+---
+id: 6153a04847abee57a3a406ac
+title: الخطوة ١٨
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+تحتاج صورك إلى بعض المساحة بينها.
+
+تحدد خاصية CSS مختصرة مسمى `gap` ثغرات، كما تعرف أيضا بالجدول، بين الصفوف والأعمدة. توفر خاصية `gap`, و `row-gap`, و `column-gap` هذه الوظيفة للتخطيط flex وgrid وmulti-column layout. يمكنك تطبيق الخاصية على عنصر الحاوي.
+
+يجب أن يحتوي منتقي `.gallery` على خاصية `gap` بقيمة `16px`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.gallery` على خاصية `gap` بقيمة `16px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery')?.gap === '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+--fcc-editable-region--
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+--fcc-editable-region--
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md
new file mode 100644
index 00000000000..a31504c0dba
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3485f0b20591d26d2a1.md
@@ -0,0 +1,92 @@
+---
+id: 6153a3485f0b20591d26d2a1
+title: الخطوة ١٩
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+خفف حدود صورك قليلاً بواسطة إعطاء منتقي `.gallery img` خاصية `border-radius` بقيمة `10px`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.gallery img` على خاصية `border-radius` بقيمة `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+--fcc-editable-region--
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
new file mode 100644
index 00000000000..61777ece2ab
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
@@ -0,0 +1,112 @@
+---
+id: 6153a3952facd25a83fe8083
+title: الخطوة ٢٠
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+ينشئ عنصر زائف `::after` عنصر الذي يكون آخر عنصر فرعي في العنصر المحدد. يمكنك استخدامه لإضافة عنصر فارغ بعد آخر صورة. إذا أعطيته نفس `width` الصور فإنه سيدفع آخر صورة إلى اليسار عندما يكون المَعْرِض مُخطط على هيئة عمودين. الآن، إنها في المركز لأنك عيّن `justify-content: center` على الحاوية المرنة.
+
+مثال:
+
+```CSS
+.container::after {
+  content: "";
+  width: 860px;
+}
+```
+
+إنشاء منتقى جديد باستخدام عنصر زائف (pseudo-element) على هيئة `::after` في عنصر `.gallery`. أضف خاصية `content` بقيمة مقطع فارغ (empty string) يساوي `""` وأضف قيمة `350px` لخاصية `width`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.gallery::after` على مقطع فارغ `""` لخاصية `content`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.content === "\"\"");
+```
+
+يجب أن يحتوي منتقي `.gallery::after` على `350px` لخاصية `width`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery::after')?.width === "350px");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md
new file mode 100644
index 00000000000..5f2f25ff1d7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3ebb4f7f05b8401b716.md
@@ -0,0 +1,181 @@
+---
+id: 6153a3ebb4f7f05b8401b716
+title: الخطوة ٢١
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+
+يجب أن تصف سمة الصورة `alt` محتوى الصورة. ويعلن قراء الشاشة عن النص البديل بدلا من الصور. إذا لم تظهر الصورة، يتم تقديم هذا النص بدلا من الصورة.
+
+لإكمال المشروع، أضف خاصية `alt` إلى جميع صور القط لوصفهم. استخدم قيمة لا تقل عن خمس أحرف لكل منها.
+
+
+# --hints--
+
+يجب أن تحتوي جميع العناصر التسعة من `img` على سمة `alt` مع نص يصف كل صورة، مع كل وصف باستخدام `5` أحرف في الأقل.
+
+```js
+const images = [...document.querySelectorAll('img')];
+assert(images.every(image => image.getAttribute('alt')));
+assert(images.every(image => image.getAttribute('alt').length >= 5));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      --fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+      --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.gallery::after {
+  content: "";
+  width: 350px;
+}
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg" alt="Gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg" alt="Gallery">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: sans-serif;
+  background: #f5f6f7;
+}
+
+.header {
+  text-align: center;
+  text-transform: uppercase;
+  padding: 32px;
+  background-color: #0a0a23;
+  color: #fff;
+  border-bottom: 4px solid #fdb347;
+}
+
+.gallery {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: center;
+  gap: 16px;
+  max-width: 1400px;
+  margin: 0 auto;
+  padding: 20px 10px;
+}
+
+.gallery img {
+  width: 100%;
+  max-width: 350px;
+  height: 300px;
+  object-fit: cover;
+  border-radius: 10px;
+}
+
+.gallery::after {
+  content: "";
+  width: 350px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
new file mode 100644
index 00000000000..26e196d6851
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/615f171d05def3218035dc85.md
@@ -0,0 +1,80 @@
+---
+id: 615f171d05def3218035dc85
+title: الخطوة ٨
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+صورك كبيرة جداً. أنشئ منتقي `.gallery img` لاستهدافهم. اعطيهم جميعا `width` بقيمة `100%` و `max-width` بقيمة `350px` حتى يتقلص حسب الحاجة، لكنهم لا يصبحون أكبر مما ينبغي.
+
+قم أيضا بتعيين خاصية `height` إلى `300px` للحفاظ على حجم موحد للصور.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.gallery img`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.gallery img'));
+```
+
+يجب أن يحتوي منتقي `.gallery img` على خاصية `width` بقيمة `100%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.width === '100%');
+```
+
+يجب أن يحتوي منتقي `.gallery img` على خاصية `max-width` بقيمة `350px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.maxWidth === '350px');
+```
+
+يجب أن يحتوي منتقي `.gallery img` على خاصية `height` بقيمة `300px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.gallery img')?.height === '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Photo Gallery</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <header class="header">
+      <h1>css flexbox photo gallery</h1>
+    </header>
+    <div class="gallery">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/1.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/2.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/3.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/4.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/5.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/6.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/7.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/8.jpg">
+      <img src="https://cdn.freecodecamp.org/curriculum/css-photo-gallery/9.jpg">
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md
new file mode 100644
index 00000000000..e8a007d8e07
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61437d575fb98f57fa8f7f36.md
@@ -0,0 +1,135 @@
+---
+id: 61437d575fb98f57fa8f7f36
+title: الخطوة الأولى
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+ابدأ بمستند HTML المعتاد الخاص بك. أضف تعريف `DOCTYPE`، وعنصر `html` موضحاً لغة صفحة بالإنجليزية و عنصر `head` وعنصر `body`.
+
+قم باضافة وسم `<meta>` مع الـ `charset` المناسبة و وسم `<meta>` للتجاوب مع شاشات المحمول داخل عنصر `head`.
+
+# --hints--
+
+يجب أن يحتوي الكود الخاص بك على `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE/gi));
+```
+
+يجب عليك تضمين مسافة بعد `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+/gi));
+```
+
+يجب عليك تحديد نوع المستند ليكون `html`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html/gi));
+```
+
+يجب عليك إغلاق تعريف `DOCTYPE` مع `>` بعد الـ type.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
+```
+
+يجب أن يكون لديك علامة فتح `<html>`، ويجب أن يحتوي على `lang` بقيمة `en`.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+يجب أن يحتوي عنصر `html` الخاص بك على closing tag.
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+يجب أن يكون تعريف `DOCTYPE` في بداية HTML الخاص بك.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
+```
+
+يجب أن يكون لديك الـ opening tag الآتي `<head>`.
+
+```js
+assert(code.match(/<head\s*>/i));
+```
+
+يجب أن يكون لديك الـ closing tag الآتي `</head>`.
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+يجب أن يكون لديك الـ opening tag الآتي `<body>`.
+
+```js
+assert(code.match(/<body\s*>/i));
+```
+
+يجب أن يكون لديك الـ closing tag الآتي `</body>`.
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+عناصر `head` و `body` يجب أن يكونا أشقاء (siblings).
+
+```js
+assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
+```
+
+عنصر `head` يجب أن يكون داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
+```
+
+عنصر `body` يجب أن يكون داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
+```
+
+يجب أن يكون لديك عنصران `meta`.
+
+```js
+const meta = document.querySelectorAll('meta');
+assert(meta?.length === 2);
+```
+
+احد عناصر `meta` يجب أن يحتوي على `name` تم تعيينه إلى `viewport`، و `content` تم تعيينه إلى `width=device-width, initial-scale=1.0`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset'));
+assert.exists(target);
+```
+
+عنصر `meta` الآخر يجب أن يحتوي على السمة `charset` بقيمة `UTF-8`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
+assert.exists(target);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md
new file mode 100644
index 00000000000..b0e333b236e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614385513d91ae5c251c2052.md
@@ -0,0 +1,96 @@
+---
+id: 614385513d91ae5c251c2052
+title: الخطوة الثانية
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+اضف عنصر `title` يحتوي على النص `Magazine`، وعنصر `link` يحمل خط `https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap` الى ‏‏ورقة الأنماط (stylesheet), ثم `link` يحمل أدوات `https://use.fontawesome.com/releases/v5.8.2/css/all.css` الى ‏‏ورقة الأنماط (stylesheet), وأستخدم `link` يحمل `./styles.css` لربط ورقة الأنماط (stylesheet).
+
+ستحمل ورقة نمط الخط (stylesheet) الخاصة بك ثلاثة خطوط منفصلة: `Anton`, و `Baskervville`, و `Raleway`.
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على ثلاث عناصر `link` مغلقة ذاتيا.
+
+```js
+assert(document.querySelectorAll('link').length === 3);
+```
+
+عنصر `link` الخاص بك يجب أن يكون داخل عنصر `head` الخاص بك.
+
+```js
+assert(document.querySelectorAll('head > link').length === 3);
+```
+
+العناصر `link` الثلاث الخاص بك يجب أن تحتوي على سمة (attribute) الـ `rel` بقيمة `stylesheet`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert(links.every(link => link.getAttribute('rel') === 'stylesheet'));
+```
+
+أحد عناصر الرابط (link) الخاص بك يجب أن يحتوى على `href` محدد إلى `https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert(links.find(link => link.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap'));
+```
+
+واحد من الروابط (link) الخاص بك يجب أن يحتوي على `href` بقيمة `https://use.fontawesome.com/releases/v5.8.2/css/all.css`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert(links.find(link => link.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css'));
+```
+
+يجب أن يحتوي عنصر `link` من العناصر الخاص بك على خاصية `href` مع القيمة `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href\s*=\s*('|"|`)(\.\/)?styles\.css\1/)
+```
+
+الكود الخاص بك يجب أن يحتوي على عنصر `title`.
+
+```js
+const title = document.querySelector('title');
+assert.exists(title);
+```
+
+يجب أن يكون لمشروعك العنوان `Magazine`.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim()?.toLowerCase(), 'magazine')
+```
+
+تذكر أن الـحالة الحرف (casing) سواء كبيرا أو صغيرا (capital or small), والإملاء (spelling) مهمان للعنوان(title).
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim(), 'Magazine');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md
new file mode 100644
index 00000000000..09df5ef923e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143862a5e54455d262c212e.md
@@ -0,0 +1,75 @@
+---
+id: 6143862a5e54455d262c212e
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+داخل `body`، قم بإنشاء عنصر `main`. ثم في هذا العنصر، أنشئ `section` مع `class` بقيمة `heading`.
+
+# --hints--
+
+يجب أن يكون لديك عنصر `main`.
+
+```js
+assert.exists(document.querySelector('main'));
+```
+
+عنصر `main` الخاص بك يجب أن يكون داخل عنصر `body` الخاص بك.
+
+```js
+assert(document.querySelector('main')?.parentElement?.localName === 'body');
+```
+
+يجب عليك إنشاء عنصر `section`.
+
+```js
+assert.exists(document.querySelector('section'));
+```
+
+عنصر `section` الخاص بك يجب أن يكون ضمن عنصر `main` الخاص بك.
+
+```js
+assert(document.querySelector('section')?.parentElement?.localName === 'main');
+```
+
+عنصر `section` الخاص بك يجب أن يحتوي على `class` بقيمة `heading`.
+
+```js
+assert(document.querySelector('section')?.classList?.contains('heading'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md
new file mode 100644
index 00000000000..bec8e5bfbe8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143869bb45bd85e3b1926aa.md
@@ -0,0 +1,109 @@
+---
+id: 6143869bb45bd85e3b1926aa
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+داخل عنصر `.heading` الخاص بك، قم بإنشاء عنصر `header` مع `class` يسمي `hero`.
+
+في هذا العنصر، أنشئ عنصر `img` مع `src` بقيمة `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png` و `alt` تم تعيينه إلى `freecodecamp logo` و `class` تم تعيينه إلى `hero-img`.
+
+السمة `loading` في عنصر `img` يمكن تعيينها إلى `lazy` لإخبار المتصفح بعدم جلب مورد الصورة إلى أن تكون مطلوبة (اي عندما يقوم المستخدم بالتمرير الي الصورة). كميزة إضافية ، لن يتم تحميل العناصر البطيئة التحميل حتى يتم تحميل العناصر غير البطيئة - وهذا يعني أن المستخدمين الذين لديهم اتصالات إنترنت بطيئة يمكنهم عرض محتوى صفحتك دون الحاجة إلى الانتظار حتى يتم تحميل الصور.
+
+أعطِ عنصر `img` الجديد السمة `loading` التي تم تعيينها إلى `lazy`.
+
+# --hints--
+
+يجب إنشاء عنصر `header`.
+
+```js
+assert.exists(document.querySelector('header'));
+```
+
+عنصر `header` الخاص بك يجب أن يكون داخل عنصر `.heading` الخاص بك.
+
+```js
+assert(document.querySelector('header')?.parentElement?.className === 'heading');
+```
+
+عنصر `header` الخاص بك يجب أن يحتوي على `class` يسمي `hero`.
+
+```js
+assert(document.querySelector('header')?.className === 'hero');
+```
+
+يجب إنشاء عنصر `img`.
+
+```js
+assert.exists(document.querySelector('img'));
+```
+
+عنصر `img` الخاص بك يجب أن يكون داخل عنصر `header` الخاص بك.
+
+```js
+assert(document.querySelector('img')?.parentElement?.localName === 'header');
+```
+
+يجب أن يكون لعنصر `img` الخاص بك `src` بقيمة `https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png`.
+
+```js
+assert(document.querySelector('img')?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png');
+```
+
+يجب أن يكون لعنصر `img` الخاص بك السمة `alt` بقيمة `freecodecamp logo`.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt') === 'freecodecamp logo');
+```
+
+يجب أن يحتوي عنصر `img` على السمة `loading` بقيمة `lazy`.
+
+```js
+assert(document.querySelector('img')?.getAttribute('loading') === 'lazy');
+```
+
+يجب أن يحتوي عنصر `img` الخاص بك على `class` بقيمة `hero-img`.
+
+```js
+assert(document.querySelector('img')?.className === 'hero-img');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+--fcc-editable-region--
+    <main>
+      <section class="heading">
+
+      </section>
+    </main>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md
new file mode 100644
index 00000000000..9cff81d9a45
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614387cbefeeba5f3654a291.md
@@ -0,0 +1,152 @@
+---
+id: 614387cbefeeba5f3654a291
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+ضمن عنصر `header` ، أنشئ `div` مع `class` يسمي `author`.
+
+ضمن هذا الـ `div` ، أنشئ عنصر `p` مع `class` بقيمة `author-name` وأعطيه النص `By freeCodeCamp`. قم بتغليف جزء `freeCodeCamp` في عنصر `a` مع تعيين `href` إلى `https://freecodecamp.org`، و `target` إلى `_blank`.
+
+
+أسفل ذلك ، أضف عنصر `p` ثاني بـ class يسمي `publish-date` والنص `March 7, 2019`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` جديد.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+عنصر `div` الخاص بك يجب أن يأتي بعد عنصر `header` الخاص بك.
+
+```js
+assert(document.querySelector('div')?.previousElementSibling?.localName === 'header');
+```
+
+عنصر `div` الخاص بك يجب أن يحتوي على `class` يسمي `author`.
+
+```js
+assert(document.querySelector('div')?.className === 'author');
+```
+
+يجب عليك إضافة عنصرين `p` جديدين.
+
+```js
+assert(document.querySelectorAll('p')?.length === 3);
+```
+
+عناصران `p` الجديدان يجب ان يكوانا داخل عنصر `div`.
+
+```js
+assert.exists(document.querySelector('div')?.querySelectorAll('p')?.length === 2);
+```
+
+يجب أن يكون لعنصر `p` الجديد الخاص بك `class` بقيمة `author-name`.
+
+```js
+assert(document.querySelector('div')?.querySelector('p')?.className === 'author-name');
+```
+
+يجب أن يحتوي العنصر الجديد الأول `p` على النص `By freeCodeCamp`.
+
+```js
+assert(document.querySelector('div')?.querySelector('p')?.innerText === 'By freeCodeCamp');
+```
+
+يجب أن يحتوي عنصر `p` الجديد الثاني على `class` بقيمة `publish-date`.
+
+```js
+assert(document.querySelector('div')?.querySelectorAll('p')?.[1]?.className === 'publish-date');
+```
+
+يجب أن يحتوي العنصر `p` الجديد الثاني على النص `March 7, 2019`.
+
+```js
+assert(document.querySelector('div')?.querySelectorAll('p')?.[1]?.innerText === 'March 7, 2019');
+```
+
+يجب عليك إنشاء عنصر `a` جديد.
+
+```js
+assert.exists(document.querySelector('a'));
+```
+
+يجب أن يكون عنصر `a` الخاص بك ضمن العنصر الأول الجديد `p`.
+
+```js
+assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.localName === 'a');
+```
+
+عنصر `a` الخاص بك يجب أن يحتوي على `href` بقيمة `https://freecodecamp.org`.
+
+```js
+assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('href') === 'https://freecodecamp.org');
+```
+
+عنصر `a` الخاص بك يجب أن يحتوي على `target` بقيمة `_blank`.
+
+```js
+assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('target') === '_blank');
+```
+
+عنصر `a` الخاص بك يجب أن يحيط بالنص `freeCodeCamp`.
+
+```js
+assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.textContent === 'freeCodeCamp');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+--fcc-editable-region--
+
+      </section>
+    </main>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md
new file mode 100644
index 00000000000..308a71812d3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614389f601bb4f611db98563.md
@@ -0,0 +1,134 @@
+---
+id: 614389f601bb4f611db98563
+title: الخطوة ٩
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+أسفل عنصر `.author`، قم بإنشاء عنصر `div` جديد مع class يدعي `social-icons`.
+
+أضف خمسة عناصر `a` ضمن `div` الجديد، وإعطائهم خصائص `href` التالية.
+
+- أول عنصر `a` يجب أن يحتوي علي `href` تم تعيينه إلى `https://www.facebook.com/freecodecamp`.
+- ثاني عنصر `a` يجب أن يحتوي على `href` تم تعيينه إلى `https://twitter.com/freecodecamp`.
+- ثالث عنصر `a` يجب ان يحتوي علي `href` تم تعيينه إلى `https://instagram.com/freecodecamp`.
+- رابع عنصر `a` يجب أن يحتوي على `href` تم تعيينه إلى `https://www.linkedin.com/school/free-code-camp`.
+- خامس عنصر `a` يجب أن يحتوي علي `href` تم تعيينه إلى `https://www.youtube.com/freecodecamp`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `div` جديد.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+عنصر `div` الجديد الخاص بك يجب أن يأتي بعد عنصر `.author` الخاص بك.
+
+```js
+assert(document.querySelector('.author')?.nextElementSibling?.localName === 'div');
+```
+
+يجب أن يحتوي عنصر `div` الجديد على class يدعي `social-icons`.
+
+```js
+assert(document.querySelector('.author')?.nextElementSibling?.classList?.contains('social-icons'));
+```
+
+يجب أن يحتوي عنصر `.social-icons` على خمسة عناصر `a`.
+
+```js
+assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.length === 5);
+```
+
+أول عنصر `a` يجب أن يحتوي علي `href` تم تعيينه إلى `https://www.facebook.com/freecodecamp`.
+
+```js
+assert(document.querySelector('.social-icons')?.querySelectorAll('a')?.[0]?.getAttribute('href')?.includes('https://www.facebook.com/freecodecamp'));
+```
+
+ثاني عنصر `a` يجب أن يحتوي على `href` تم تعيينه إلى `https://twitter.com/freecodecamp`.
+
+```js
+assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[1]?.getAttribute('href'), 'https://twitter.com/freecodecamp');
+```
+
+ثالث عنصر `a` يجب ان يحتوي علي `href` تم تعيينه إلى `https://instagram.com/freecodecamp`.
+
+```js
+assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[2]?.getAttribute('href'), 'https://instagram.com/freecodecamp');
+```
+
+رابع عنصر `a` يجب أن يحتوي على `href` تم تعيينه إلى `https://www.linkedin.com/school/free-code-camp`.
+
+```js
+assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[3]?.getAttribute('href'), 'https://www.linkedin.com/school/free-code-camp');
+```
+
+خامس عنصر `a` يجب أن يحتوي على `href` تم تعيينه إلى `https://www.youtube.com/freecodecamp`.
+
+```js
+assert.include(document.querySelector('.social-icons')?.querySelectorAll('a')?.[4]?.getAttribute('href'), 'https://www.youtube.com/freecodecamp');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md
new file mode 100644
index 00000000000..a0218578b34
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438b5b66d76a6264430f2a.md
@@ -0,0 +1,139 @@
+---
+id: 61438b5b66d76a6264430f2a
+title: الخطوة ١٠
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+داخل كل عنصر من عناصر `a` الجديدة. قم باضافة عنصر `i` و اعطهم الـ classes الآتية:
+
+- عنصر `i` الاول يجب ان يحتوي علي `fab fa-facebook-f` كـ class
+- عنصر `i` الثاني يجب ان يحتوي علي `fab fa-twitter` كـ class
+- عنصر `i` الثالث يجب ان يحتوي علي `fab fa-instagram` كـ class
+- عنصر `i` الرابع يجب ان يحتوي علي `fab fa-linkedin-in` كـ class
+- عنصر `i` الخامس يجب ان يحتوي علي `fab fa-youtube` كـ class
+
+# --hints--
+
+يجب أن يكون لديك خمسة عناصر `i`.
+
+```js
+assert(document.querySelectorAll('i')?.length === 5);
+```
+
+كل عنصر `a` يجب ان يحتوي علي عنصر `i` واحد.
+
+```js
+const aaaaa = [...document.querySelectorAll('.social-icons a')];
+assert(aaaaa?.every(a => a?.children?.length === 1 && a?.children?.[0]?.localName === 'i'));
+```
+
+كل عنصر `i` يجب ان يحتوي علي سمة `class` والتي تتضمن `fab`.
+
+```js
+const iiiii = [...document.querySelectorAll('i')];
+assert(iiiii?.every(i => i?.classList?.contains('fab')));
+```
+
+عنصر `i` الاول يجب ان يحتوي علي سمة `class` تتضمن `fa-facebook-f`.
+
+```js
+assert(document.querySelectorAll('i')?.[0]?.classList?.contains('fa-facebook-f'));
+```
+
+عنصر `i` الثاني يجب ان يحتوي علي سمة `class` تتضمن `fa-twitter`.
+
+```js
+assert(document.querySelectorAll('i')?.[1]?.classList?.contains('fa-twitter'));
+```
+
+عنصر `i` الثالث يجب ان يحتوي علي سمة `class` تتضمن `fa-instagram`.
+
+```js
+assert(document.querySelectorAll('i')?.[2]?.classList?.contains('fa-instagram'));
+```
+
+عنصر `i` الرابع يجب ان يحتوي علي سمة `class` تتضمن `fa-linkedin-in`.
+
+```js
+assert(document.querySelectorAll('i')?.[3]?.classList?.contains('fa-linkedin-in'));
+```
+
+عنصر `i` الخامس يجب ان يحتوي علي سمة `class` تتضمن `fa-youtube`.
+
+```js
+assert(document.querySelectorAll('i')?.[4]?.classList?.contains('fa-youtube'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+--fcc-editable-region--
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+          </a>
+        </div>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md
new file mode 100644
index 00000000000..a8e153b6a2f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61438ec09438696391076d6a.md
@@ -0,0 +1,129 @@
+---
+id: 61438ec09438696391076d6a
+title: الخطوة ١١
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+أسفل عنصر `.heading` الخاص بك، قم بإنشاء عنصر `section` جديد مع `class` يسمي `text`. ضمن ذلك، أنشئ عنصر `p` مع `class` بقيمة `first-paragraph` والنص التالي:
+
+```markup
+Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+```
+
+# --hints--
+
+يجب عليك إنشاء عنصر `section` جديد.
+
+```js
+assert(document.querySelectorAll('section')?.length === 2);
+```
+
+عنصر `section` الجديد الخاص بك يجب أن يأتي بعد عنصر `.heading` الخاص بك.
+
+```js
+assert(document.querySelectorAll('section')?.[1]?.previousElementSibling?.className === 'heading');
+```
+
+عنصر `section` الجديد الخاص بك يجب أن يحتوي على `class` يسمي `text`.
+
+```js
+assert(document.querySelectorAll('section')?.[1]?.className === 'text');
+```
+
+يجب عليك إنشاء عنصر `p` جديد داخل عنصر `.text` الخاص بك.
+
+```js
+assert(document.querySelector('.text')?.querySelectorAll('p')?.length === 1);
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على `class` يسمي `first-paragraph`.
+
+```js
+assert(document.querySelector('.text p')?.className === 'first-paragraph');
+```
+
+يجب أن يحتوي عنصر `p` الجديد على النص المقدم.
+
+```js
+assert(document.querySelector('.first-paragraph')?.innerText === 'Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you\'ll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+--fcc-editable-region--
+
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md
new file mode 100644
index 00000000000..7f55d74835c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dc084fa5f659cf75d7c.md
@@ -0,0 +1,109 @@
+---
+id: 61439dc084fa5f659cf75d7c
+title: الخطوة ١٢
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+قم بإنشاء عنصر `p` آخر تحت عنصر `.first-paragraph` الخاص بك، وقم بإعطائه النص التالي:
+
+```markup
+After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+```
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` ثان ضمن عنصر `.text` الخاص بك.
+
+```js
+assert(document.querySelectorAll('.text p')?.length === 2)
+```
+
+يجب أن يحتوي العنصر `p` الثاني على النص المقدم.
+
+```js
+assert(document.querySelectorAll('.text p')?.[1]?.innerText === 'After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+--fcc-editable-region--
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md
new file mode 100644
index 00000000000..7c9a001eed5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439dfc811e12666b04be6f.md
@@ -0,0 +1,113 @@
+---
+id: 61439dfc811e12666b04be6f
+title: الخطوة ١٣
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+أضف عنصر `p` ثالث في نهاية عنصر `.text` الخاص بك، وقم بإعطائه النص التالي:
+
+```markup
+It wasn't as dramatic as Doc's revelation in Back to the Future. It just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+```
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` ثالث في عنصر `.text` الخاص بك.
+
+```js
+assert(document.querySelectorAll('.text p')?.length === 3);
+```
+
+يجب أن يحتوي عنصر `p` الثالث على النص المقدم.
+
+```js
+assert(document.querySelectorAll('.text p')?.[2]?.innerText === "It wasn't as dramatic as Doc's revelation in Back to the Future. It just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md
new file mode 100644
index 00000000000..d41af0114f2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/61439e33e4fb7967609e0c83.md
@@ -0,0 +1,148 @@
+---
+id: 61439e33e4fb7967609e0c83
+title: الخطوة ١٤
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+بعد العناصر الثلاثة `p` ضمن عنصر `.text` الخاص بك، أنشئ عنصر `blockquote`. ضمن ذلك، أضف عنصر `hr` و عنصر `p` مع `class` تم تعيينه إلى `quote`، و عنصر `hr` ثاني.
+
+اعطي عنصر `.quote` النص `The entire curriculum should be a series of projects`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `blockquote` جديد داخل عنصر `.text` الخاص بك.
+
+```js
+assert.exists(document.querySelector('.text blockquote'));
+```
+
+عنصر `blockquote` الخاص بك يجب أن يأتي بعد العناصر الثلاثة `p` الخاصة بك.
+
+```js
+assert(document.querySelector('.text')?.children?.[3]?.localName === 'blockquote');
+```
+
+يجب أن يحتوي عنصر `blockquote` الخاص بك على عنصرين `hr`.
+
+```js
+assert(document.querySelectorAll('.text blockquote hr')?.length === 2);
+```
+
+يجب أن يحتوي عنصر `blockquote` على عنصر `p`.
+
+```js
+assert.exists(document.querySelector('.text blockquote p'));
+```
+
+يجب أن يكون العناصر الأطفال في `blockquote` بالترتيب الصحيح.
+
+```js
+const children = document.querySelector('.text blockquote')?.children;
+assert(children?.[0]?.localName === 'hr');
+assert(children?.[1]?.localName === 'p');
+assert(children?.[2]?.localName === 'hr');
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على `class` يسمي `quote`.
+
+```js
+assert(document.querySelector('.text blockquote p')?.className === 'quote');
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `The entire curriculum should be a series of projects`.
+
+```js
+assert(document.querySelector('.text blockquote p')?.innerText === 'The entire curriculum should be a series of projects');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md
new file mode 100644
index 00000000000..f2ee7a4bc1c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a1a228f7d068ab16a130.md
@@ -0,0 +1,130 @@
+---
+id: 6143a1a228f7d068ab16a130
+title: خطوة ١٥
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+تحت عنصر `blockquote`، أضف عنصر `p` آخر مع النص التالي:
+
+```markup
+No more walls of explanatory text. No more walls of tests. Just one test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+```
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` رابع بداخل عنصرك `.text`.
+
+```js
+assert(document.querySelectorAll('.text p')?.length === 5);
+```
+
+يجب أن يأتي عنصرك `p` بعد عنصرك `blockquote`.
+
+```js
+assert(document.querySelectorAll('.text p')?.[4]?.previousElementSibling?.localName === 'blockquote');
+```
+
+يجب أن يحتوي عنصر `p` الجديد على النص المقدم.
+
+```js
+assert(document.querySelectorAll('.text p')?.[4]?.innerText === 'No more walls of explanatory text. No more walls of tests. Just one test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there\'s plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md
new file mode 100644
index 00000000000..57cce002df2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a73279ce6369de4b9bcc.md
@@ -0,0 +1,128 @@
+---
+id: 6143a73279ce6369de4b9bcc
+title: الخطوة ١٦
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+أنشئ عنصر `p` خامس في أخر عنصرك `.text`، وقم بإعطائه النص التالي:
+
+```markup
+The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+```
+
+# --hints--
+
+يجب عليك إضافة خامس عنصر `p`.
+
+```js
+assert(document.querySelectorAll('.text p')?.length === 6);
+```
+
+يجب أن يحتوي عنصر `p` الجديد على النص المقدم.
+
+```js
+assert(document.querySelectorAll('.text p')?.[5]?.innerText === 'The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md
new file mode 100644
index 00000000000..59e3cbbe888
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a778bffc206ac6b1dbe3.md
@@ -0,0 +1,135 @@
+---
+id: 6143a778bffc206ac6b1dbe3
+title: الخطوة ١٧
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+أضف أخر عنصر `p` نهاية عنصر `.text` الخاص بك، وقم بإعطائه النص التالي:
+
+```markup
+Instead of a series of coding challenges, people will be in their code
+editor passing one test after another, quickly building up a project.
+People will get into a real flow state, similar to what they
+experience when they build the required projects at the end of each
+certification. They'll get that sense of forward progress right from
+the beginning. And freeCodeCamp will be a much smoother experience.
+```
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` سادس بداخل عنصر `.text`.
+
+```js
+assert(document.querySelectorAll('.text p')?.length === 7)
+```
+
+يجب أن يحتوي العنصر `p` السادس على النص المطلوب.
+
+```js
+assert(document.querySelectorAll('.text p')?.[6]?.innerText === 'Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They\'ll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+--fcc-editable-region--
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md
new file mode 100644
index 00000000000..de15515ec78
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143a83fcc32c26bcfae3efa.md
@@ -0,0 +1,166 @@
+---
+id: 6143a83fcc32c26bcfae3efa
+title: الخطوة ١٨
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+أسفل عنصرك `.text`، أنشئ عنصر `section` جديد مع `class` يسمى `text text-with-images`. ضمن ذلك، أنشئ عنصر `article` مع `class` بقيمة `brief-history`, و إنشاء `aside` مع `class` بقيمة `image-wrapper`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `section` جديد.
+
+```js
+assert(document.querySelectorAll('section')?.length === 3)
+```
+
+يجب أن يأتي عنصرك `section` الجديد بعد عنصرك `.text`.
+
+```js
+assert(document.querySelectorAll('section')?.[2]?.previousElementSibling?.className === 'text')
+```
+
+يجب أن يحتوي عنصرك `section` الجديد على `class` يسمي `text text-with-images`.
+
+```js
+assert(document.querySelectorAll('section')?.[2]?.className === 'text text-with-images')
+```
+
+يجب أن يحمل عنصرك `section` الجديد `article` بداخله.
+
+```js
+assert.exists(document.querySelector('.text-with-images article'));
+```
+
+يجب أن يحمل عنصرك `section` الجديد `aside` بداخله.
+
+```js
+assert.exists(document.querySelector('.text-with-images aside'));
+```
+
+يجب أن يأتي عنصر `article` قبل عنصر `aside`.
+
+```js
+assert(document.querySelector('.text-with-images article')?.nextElementSibling?.localName === 'aside');
+```
+
+يجب أن يحتوي عنصرك `article` على `class` يسمى `brief-history`.
+
+```js
+assert(document.querySelector('.text-with-images article')?.className === 'brief-history');
+```
+
+يجب أن يحتوي عنصرك `aside` على `class` يسمى `image-wrapper`.
+
+```js
+assert(document.querySelector('.text-with-images aside')?.className === 'image-wrapper');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+--fcc-editable-region--
+
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md
new file mode 100644
index 00000000000..1e0d213bfa2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b97c06c3306d23d5da47.md
@@ -0,0 +1,174 @@
+---
+id: 6143b97c06c3306d23d5da47
+title: الخطوة ١٩
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+ضمن العنصر الخاص بك `article`، قم بإنشاء عنصر `h3` مع `class` بقيمة `list-title` والنص `A Brief History`. أسفل ذلك، أنشئ عنصر `p` مع النص `Of the Curriculum`. ثم قم بإنشاء عنصر `ul` مع class يدعي `lists`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `h3` جديد داخل عنصر `article` الخاص بك.
+
+```js
+assert.exists(document.querySelector('article h3'));
+```
+
+يجب عليك إنشاء عنصر `p` جديد داخل عنصر `article` الخاص بك.
+
+```js
+assert.exists(document.querySelector('article p'));
+```
+
+يجب عليك إنشاء عنصر `ul` جديد داخل عنصر `article` الخاص بك.
+
+```js
+assert.exists(document.querySelector('article ul'));
+```
+
+يجب أن تكون عناصرك داخل عنصر `article` بالترتيب الصحيح.
+
+```js
+const children = document.querySelector('article')?.children;
+assert(children?.[0]?.localName === 'h3');
+assert(children?.[1]?.localName === 'p');
+assert(children?.[2]?.localName === 'ul');
+```
+
+عنصر `h3` الجديد الخاص بك يجب أن يحتوي على `class` تم تعيينه إلى `list-title`.
+
+```js
+assert(document.querySelector('article h3')?.className === 'list-title');
+```
+
+يجب أن يحتوي عنصر `h3` الجديد على النص `A Brief History`.
+
+```js
+assert(document.querySelector('article h3')?.innerText === 'A Brief History');
+```
+
+يجب أن يحتوي عنصر `p` الجديد على النص <`Of the Curriculum`.
+
+```js
+assert(document.querySelector('article p')?.innerText === 'Of the Curriculum');
+```
+
+يجب أن يحتوي عنصر `ul` الجديد على `class` تم تعيينه إلى `lists`.
+
+```js
+assert(document.querySelector('article ul')?.className === 'lists');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+--fcc-editable-region--
+        <article class="brief-history">
+
+        </article>
+--fcc-editable-region--
+        <aside class="image-wrapper"></aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md
new file mode 100644
index 00000000000..63b86fc453d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143b9e1f5035c6e5f2a8231.md
@@ -0,0 +1,228 @@
+---
+id: 6143b9e1f5035c6e5f2a8231
+title: الخطوة ٢٠
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+ضمن عنصر `ul` الخاص بك، أنشئ ستة عناصر `li`. قم بإضافة عنصر `h4` مع `class` تم تعيينه إلى `list-subtitle` و عنصر `p` إلى كل من عناصر `li`.
+
+ثم اعطي عناصر `h4` و `p` محتوي النص التالي بالترتيب، مع استخدام `h4` كل من الموجود على الجانب الأيسر من النقطتين، و كل من `p` باستخدام ما هو على اليمين:
+
+- `V1 - 2014`: `We launched freeCodeCamp with a simple list of 15 resources, including Harvard's CS50 and Stanford's Database Class.`
+- `V2 - 2015`: `We added interactive algorithm challenges.`
+- `V3 - 2015`: `We added our own HTML+CSS challenges (before we'd been relying on General Assembly's Dash course for these).`
+- `V4 - 2016`: `We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School.`
+- `V5 - 2017`: `We added the back end and data visualization challenges.`
+- `V6 - 2018`: `We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.`
+
+# --hints--
+
+يجب أن يحتوي عنصر `ul` الخاص بك على ستة عناصر `li`.
+
+```js
+assert(document.querySelectorAll('.lists li')?.length === 6);
+```
+
+يجب أن يحتوي كل عنصر من عناصر `li` الجديدة على عنصر `h4` و `p`.
+
+```js
+const lis = [...document.querySelectorAll('.lists li')];
+assert(lis?.every(li => li?.children?.[0]?.localName === 'h4' && li?.children?.[1]?.localName === 'p'));
+```
+
+يجب أن يحتوي أول `h4` على النص `V1 - 2014`.
+
+```js
+assert(document.querySelectorAll('.lists li h4')?.[0]?.innerText === 'V1 - 2014');
+```
+
+يجب أن يحتوي أول `p` على النص `We launched freeCodeCamp with a simple list of 15 resources, including Harvard's CS50 and Stanford's Database Class.`
+
+```js
+assert(document.querySelectorAll('.lists li p')?.[0]?.innerText === 'We launched freeCodeCamp with a simple list of 15 resources, including Harvard\'s CS50 and Stanford\'s Database Class.');
+```
+
+يجب أن يحتوي `h4` الثاني على النص `V2 - 2015`.
+
+```js
+assert(document.querySelectorAll('.lists li h4')?.[1]?.innerText === 'V2 - 2015');
+```
+
+يجب أن يكون نص `p` الثاني الخاص بك `We added interactive algorithm challenges.`
+
+```js
+assert(document.querySelectorAll('.lists li p')?.[1]?.innerText === 'We added interactive algorithm challenges.');
+```
+
+ثالث `h4` يجب أن يحتوي على النص `V3 - 2015`.
+
+```js
+assert(document.querySelectorAll('.lists li h4')?.[2]?.innerText === 'V3 - 2015');
+```
+
+يجب أن يكون نص `p` الثالث الخاص بك `We added our own HTML+CSS challenges (before we'd been relying on General Assembly's Dash course for these).`
+
+```js
+assert(document.querySelectorAll('.lists li p')?.[2]?.innerText === 'We added our own HTML+CSS challenges (before we\'d been relying on General Assembly\'s Dash course for these).');
+```
+
+رابع `h4` يجب ان يحتوي علي النص `V4 - 2016`.
+
+```js
+assert(document.querySelectorAll('.lists li h4')?.[3]?.innerText === 'V4 - 2016');
+```
+
+أحتواء عنصر `p` الرابع على نص `We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School`.
+
+```js
+assert(document.querySelectorAll('.lists li p')?.[3]?.innerText === 'We expanded the curriculum to 3 certifications, including Front End, Back End, and Data Visualization. They each had 10 required projects, but only the Front End section had its own challenges. For the other certs, we were still using external resources like Node School.');
+```
+
+خامس `h4` يجب ان يحتوي علي النص `V5 - 2017`.
+
+```js
+assert(document.querySelectorAll('.lists li h4')?.[4]?.innerText === 'V5 - 2017');
+```
+
+يجب أن يكون نص `p` الخامس `We added the back end and data visualization challenges.`
+
+```js
+assert(document.querySelectorAll('.lists li p')?.[4]?.innerText === 'We added the back end and data visualization challenges.');
+```
+
+سادس `h4` يجب ان يحتوي علي النص `V6 - 2018`.
+
+```js
+assert(document.querySelectorAll('.lists li h4')?.[5]?.innerText === 'V6 - 2018');
+```
+
+أحتواء عنصر `p` السادس على نص `We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.`
+
+```js
+assert(document.querySelectorAll('.lists li p')?.[5]?.innerText === 'We launched 6 new certifications to replace our old ones. This was the biggest curriculum improvement to date.');
+```
+
+يجب أن تحتوي عناصر `h4` الستة الخاصة بك على class يدعي `list-subtitle`.
+
+```js
+const h4s = [...document.querySelectorAll('.lists li h4')];
+assert(h4s?.every(h4 => h4?.classList?.contains('list-subtitle')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+--fcc-editable-region--
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+
+          </ul>
+        </article>
+--fcc-editable-region--
+        <aside class="image-wrapper"></aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md
new file mode 100644
index 00000000000..163a5a4acd9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143bb50e8e48c6f5ef9d8d5.md
@@ -0,0 +1,195 @@
+---
+id: 6143bb50e8e48c6f5ef9d8d5
+title: الخطوة ٢١
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+ضمن عنصر `aside`، أنشئ عنصرين `img`، و `blockquote`، و عنصر ثالث `img`. اعطي عنصر `blockquote` الـ `class` بقيمة `image-quote`.
+
+# --hints--
+
+يجب عليك إنشاء عناصر `img` ثلاثة جديدة داخل عنصر `aside` الخاص بك.
+
+```js
+assert(document.querySelectorAll('aside img')?.length === 3);
+```
+
+يجب عليك إنشاء عنصر `blockquote` داخل عنصر `aside` الخاص بك.
+
+```js
+assert.exists(document.querySelector('aside blockquote'));
+```
+
+يجب أن يحتوي عنصر `blockquote` الخاص بك على `class` تم تعيينه إلى `image-quote`.
+
+```js
+assert(document.querySelector('aside blockquote')?.classList?.contains('image-quote'));
+```
+
+يجب أن تكون عناصرك الجديدة بالترتيب الصحيح.
+
+```js
+const children = document.querySelector('aside')?.children;
+assert(children?.[0]?.localName === 'img');
+assert(children?.[1]?.localName === 'img');
+assert(children?.[2]?.localName === 'blockquote');
+assert(children?.[3]?.localName === 'img');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+--fcc-editable-region--
+        <aside class="image-wrapper">
+
+        </aside>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md
new file mode 100644
index 00000000000..029df8b78af
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143c2a363865c715f1a3f72.md
@@ -0,0 +1,206 @@
+---
+id: 6143c2a363865c715f1a3f72
+title: الخطوة ٢٢
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+داخل عنصر `.image-wrapper`، أعطى عنصر `img` الاول سمة `src` بقيمة `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png` و `alt` بقيمة `image of the quote machine project` و `class` يدعي `image-1` و سمة `loading` بقيمة `lazy`، و سمة `width` بقيمة `600`، و سمة `height` بقيمة `400`.
+
+# --hints--
+
+يجب أن يكون لعنصر `img` الاول الخاص بك سمة `src` بقيمة `https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png');
+```
+
+يجب أن يكون لعنصر `img` الخاص بك سمة `alt` تم تعيينها إلى `image of the quote machine project`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('alt') === 'image of the quote machine project');
+```
+
+يجب أن يكون لعنصر `img` الاول الخاص بك سمة `class` بقيمة `image-1`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[0]?.classList?.contains('image-1'));
+```
+
+يجب أن يكون لعنصر `img` الاول الخاص بك سمة `loading` بقيمة `lazy`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('loading') === 'lazy');
+```
+
+يجب أن يكون لعنصر `img` الاول الخاص بك سمة `width` بقيمة `600`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('width') === '600');
+```
+
+يجب أن يكون لعنصر `img` الاول الخاص بك سمة `height` بقيمة `400`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[0]?.getAttribute('height') === '400');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+--fcc-editable-region--
+        <aside class="image-wrapper">
+          <img />
+          <img />
+          <blockquote class="image-quote"></blockquote>
+          <img />
+        </aside>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md
new file mode 100644
index 00000000000..fc2b5ec9244
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cd08fe927072ca3a371d.md
@@ -0,0 +1,213 @@
+---
+id: 6143cd08fe927072ca3a371d
+title: الخطوة ٢٣
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+داخل عنصر `.image-wrapper` الثاني، اعطي ثاني عنصر `img` سمة `src` بقيمة `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png` و `alt` بقيمة `image of a calculator project` و سمة `loading` بقيمة `lazy` و سمة `class` بقيمة `image-2`و سمة `width` بقيمة `400`و سمة `height` بقيمة `400`.
+
+# --hints--
+
+يجب أن يكون لعنصر `img` الثاني الخاص بك سمة `src` بقيمة `https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png');
+```
+
+يجب أن يحتوي عنصر `img` الثاني على `alt` تم تعيينه إلى `image of a calculator project`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('alt') === 'image of a calculator project');
+```
+
+يجب أن يكون لعنصر `img` الثاني الخاص بك سمة `loading` بقيمة `lazy`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('loading') === 'lazy');
+```
+
+يجب أن يكون لعنصر `img` الثاني الخاص بك سمة `class` بقيمة `image-2`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[1]?.classList?.contains('image-2'));
+```
+
+يجب أن يكون لعنصر `img` الثاني الخاص بك سمة `width` بقيمة `400`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('width') === '400');
+```
+
+يجب أن يكون لعنصر `img` الثاني الخاص بك سمة `height` بقيمة `400`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[1]?.getAttribute('height') === '400');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+--fcc-editable-region--
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img />
+          <blockquote class="image-quote"></blockquote>
+          <img />
+        </aside>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md
new file mode 100644
index 00000000000..dad749cff56
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143cdf48b634a747de42104.md
@@ -0,0 +1,220 @@
+---
+id: 6143cdf48b634a747de42104
+title: الخطوة ٢٤
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+داخل عنصر `.image-wrapper` الثالث، اعطي ثاني عنصر `img` سمة `src` بقيمة `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg` و `alt` بقيمة `four people working on code` و سمة `loading` بقيمة `lazy` و سمة `class` بقيمة `image-3`و سمة `width` بقيمة `600`و سمة `height` بقيمة `400`.
+
+# --hints--
+
+يجب أن يكون لعنصر `img` الثالث الخاص بك سمة `src` بقيمة `https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('src') === 'https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg');
+```
+
+يجب أن يحتوي عنصر `img` الثالث على `alt` بقيمة `four people working on code`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('alt') === 'four people working on code');
+```
+
+يجب أن يكون لعنصر `img` الثالث الخاص بك سمة `loading` بقيمة `lazy`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('loading') === 'lazy');
+```
+
+يجب أن يكون لعنصر `img` الثالث الخاص بك سمة `class` بقيمة `image-3`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[2]?.classList?.contains('image-3'));
+```
+
+يجب أن يكون لعنصر `img` الثالث الخاص بك سمة `width` بقيمة `600`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('width') === '600');
+```
+
+يجب أن يكون لعنصر `img` الثالث الخاص بك سمة `height` بقيمة `400`.
+
+```js
+assert(document.querySelectorAll('.image-wrapper img')?.[2]?.getAttribute('height') === '400');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote"></blockquote>
+--fcc-editable-region--
+          <img />
+--fcc-editable-region--
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md
new file mode 100644
index 00000000000..42034aab167
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d003ad9e9d76766293ec.md
@@ -0,0 +1,226 @@
+---
+id: 6143d003ad9e9d76766293ec
+title: خطوة ٢٥
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+ضمن عنصر `.image-quote`، قم بدمج عنصر `hr` و عنصر `p` وعنصر `hr` ثانِ. اعطي عنصر `p` الـ `class` بقيمة `quote` والنص `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`.
+
+# --hints--
+
+يجب عليك إضافة عنصرين `hr` إلى عنصر `.image-quote` الخاص بك.
+
+```js
+assert(document.querySelectorAll('.image-quote hr')?.length === 2);
+```
+
+يجب عليك إضافة عنصرين `p` إلى عنصر `.image-quote` الخاص بك.
+
+```js
+assert(document.querySelectorAll('.image-quote p')?.length === 1);
+```
+
+يجب أن يكون العناصر الأطفال في `.image-quote` بالترتيب الصحيح.
+
+```js
+const children = document.querySelector('.image-quote')?.children;
+assert(children?.[0]?.localName === 'hr');
+assert(children?.[1]?.localName === 'p');
+assert(children?.[2]?.localName === 'hr');
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على `class` يسمي `quote`.
+
+```js
+assert(document.querySelector('.image-quote p')?.classList.contains('quote'));
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.`.
+
+```js
+assert(document.querySelector('.image-quote p')?.innerText === 'The millions of people who are learning to code through freeCodeCamp will have an even better resource to help them learn these fundamentals.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+--fcc-editable-region--
+          <blockquote class="image-quote">
+
+          </blockquote>
+--fcc-editable-region--
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md
new file mode 100644
index 00000000000..295ccd87b3e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6143d2842b497779bad947de.md
@@ -0,0 +1,217 @@
+---
+id: 6143d2842b497779bad947de
+title: الخطوة ٢٦
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+لبدء CSS الخاص بك، قم بتطبيع قواعد CSS باستهداف جميع العناصر باستخدام `*`، بما في ذلك pseudo-selecters الـ `::before` و `::after`. عيّن خاصية `padding` والخاصية `margin` إلى `0`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `*, ::before, ::after`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
+```
+
+يجب أن يكون لمنتقي `*, ::before, ::after` الخاص بك الخاصية `padding` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.padding === '0px');
+```
+
+يجب أن يكون لمنتقي `*, ::before, ::after` الخاص بك الخاصية `margin` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.margin === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code
+              through freeCodeCamp will have an even better resource to help
+              them learn these fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md
new file mode 100644
index 00000000000..b1399ed4b85
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d66a5358db0c80628757.md
@@ -0,0 +1,226 @@
+---
+id: 6144d66a5358db0c80628757
+title: خطوة ٢٧
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+قم بإنشاء منتقي `html` وإعطائه الخاصية `font-size` بقيمة `62.5%`. سيؤدي هذا إلى تعيين حجم الخط (font size) الافتراضي لصفحة الويب الخاصة بك إلى 10 بكسل (الافتراضي للمتصفح هو 16 بكسل).
+
+سيسهل ذلك عليك العمل مع وحدات `rem` لاحقًا، حيث سيكون `2rem` هو 20 بكسل.
+
+أيضًا ، قم بتعيين خاصية `box-sizing` إلى `border-box`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `html`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+يجب أن يكون لمنتقي `html` الخاص بك الخاصية `font-size` بقيمة `62.5%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '62.5%');
+```
+
+يجب أن يكون لمنتقي `html` الخاص بك `box-sizing` بقيمة `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code
+              through freeCodeCamp will have an even better resource to help
+              them learn these fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*, ::before, ::after {
+  padding: 0;
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md
new file mode 100644
index 00000000000..8e99155ef44
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144d7dbdd3e580da730ff45.md
@@ -0,0 +1,234 @@
+---
+id: 6144d7dbdd3e580da730ff45
+title: الخطوة ٢٨
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+قم بإنشاء منتقي `body`. قم بتعيين خاصية `font-family` إلى `Baskervville`، مع fallback بقيمة `serif`. قم بتعيين خاصية `color` إلى `linen` و `background-color` إلى `rgb(20, 30, 40)`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `body`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+منتقي `body` يجب أن يكون لديه خاصية `font-family` بقيمة `Baskervville`، مع fallback بقيمة `serif`.
+
+```js
+const fontFamily = new __helpers.CSSHelp(document).getStyle('body')?.fontFamily;
+assert(fontFamily === 'Baskervville, serif' || fontFamily === `"Baskervville", serif`);
+```
+
+يجب أن يكون لمنتقي `body` الخاص بك خاصية `color` بقيمة `linen`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.color === 'linen');
+```
+
+منتقي `body` يجب أن يكون لديه خاصية `background-color` بقيمة `rgb(20, 30, 40)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(20, 30, 40)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code
+              through freeCodeCamp will have an even better resource to help
+              them learn these fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*, ::before, ::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md
new file mode 100644
index 00000000000..16fa8c607bb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144de308591ec10e27d5383.md
@@ -0,0 +1,228 @@
+---
+id: 6144de308591ec10e27d5383
+title: الخطوة ٢٩
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+قم بانشاء منتقي `h1` و تعيين خاصية `font-family` الي `Anton` مع fallback بقيمة `sans-serif`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `h1`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+منتقي `h1` يجب أن يكون لديه خاصية `font-family` بقيمة `Anton`، مع fallback بقيمة `sans-serif`.
+
+```js
+const fontFamily = new __helpers.CSSHelp(document).getStyle('h1')?.fontFamily;
+assert(fontFamily === 'Anton, sans-serif' || fontFamily === `"Anton", sans-serif`);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code
+              through freeCodeCamp will have an even better resource to help
+              them learn these fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*, ::before, ::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md
new file mode 100644
index 00000000000..123e6a27fea
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144e1ba93e435127a7f516d.md
@@ -0,0 +1,232 @@
+---
+id: 6144e1ba93e435127a7f516d
+title: الخطوة ٣٠
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+قم بانشاء منتقي `h2, h3, h4, h5, h6`. قم باعطائه خاصية `font-family` بقيمة `Raleway` مع fallback بقيمة `sans-serif`.
+
+# --hints--
+
+يجب ان يكون لديك منتقي `h2, h3, h4, h5, h6`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6'));
+```
+
+منتقي `h2, h3, h4, h5, h6` الخاص بك يجب أن يكون لديه خاصية `font-family` بقيمة `Raleway`، مع fallback بقيمة `sans-serif`.
+
+```js
+const fontFamily = new __helpers.CSSHelp(document).getStyle('h2, h3, h4, h5, h6')?.fontFamily;
+assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code
+              through freeCodeCamp will have an even better resource to help
+              them learn these fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*, ::before, ::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md
new file mode 100644
index 00000000000..48ecb301f3a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee46a9d6e614c598cc05.md
@@ -0,0 +1,241 @@
+---
+id: 6144ee46a9d6e614c598cc05
+title: الخطوة ٣١
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+قم بإنشاء منتقي `a`، وأعطيه خاصية `text-decoration` بقيمة `none` و خاصية `color` بقيمة `linen`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `a`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('a'));
+```
+
+يجب أن يكون لمنتقي `a` الخاص بك خاصية `text-decoration` بقيمة `none`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('a')?.textDecoration === 'none');
+```
+
+يجب أن يكون لمنتقي `a` الخاص بك خاصية `color` بقيمة `linen`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('a')?.color === 'linen');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code
+              through freeCodeCamp will have an even better resource to help
+              them learn these fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*, ::before, ::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md
new file mode 100644
index 00000000000..48d4f2000af
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144ee790af79815ad15a832.md
@@ -0,0 +1,242 @@
+---
+id: 6144ee790af79815ad15a832
+title: الخطوة ٣٢
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+أنت الآن على استعداد للبدء في بناء الـ grid layout. توفر CSS Grid مخططاً ذا بعدين يستند إلى الشبكة (grid)، مما يسمح لك بتركيز العناصر أفقياً ورأسياً مع الاحتفاظ بالتحكم للقيام بأشياء مثل العناصر المتداخلة (overlap elements).
+
+ابدأ بإنشاء منتقي `main` وإعطائه خاصية `display` بقيمة `grid`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `main`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('main'));
+```
+
+يجب أن يكون لمنتقي `main` الخاص بك الخاصية `display` بقيمة `grid`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('main')?.display === 'grid');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code
+              through freeCodeCamp will have an even better resource to help
+              them learn these fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*, ::before, ::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md
new file mode 100644
index 00000000000..b3e4da37cbc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f1410990ea17187a722b.md
@@ -0,0 +1,238 @@
+---
+id: 6144f1410990ea17187a722b
+title: الخطوة 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+الآن يمكنك تصميم (style) تخطيط الـ grid. CSS Grid شبيهة بـ Flexbox من حيث أنها لديها خاصية خاصة لكل من عناصر ال parent و child.
+
+في هذه الحالة، عنصر parent الخاص بك هو العنصر `main`. عيِّن المحتوى ليكون له تخطيط من ثلاثة أعمدة عن طريق إضافة خاصية `grid-template-columns` بقيمة `1fr 94rem 1fr`. سيؤدي هذا إلى إنشاء ثلاثة أعمدة حيث العمود الأوسط هو `94rem`، والعمودان الأول والأخير كلاهما جزء واحد من المساحة المتبقية في الـ grid container.
+
+# --hints--
+
+يجب أن يحتوي قسم `main` على خاصية `grid-template-columns` تم تعيينها إلى `1fr 94rem 1fr`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('main')?.gridTemplateColumns === '1fr 94rem 1fr');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code
+              through freeCodeCamp will have an even better resource to help
+              them learn these fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*, ::before, ::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+--fcc-editable-region--
+main {
+  display: grid;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md
new file mode 100644
index 00000000000..0cb6e337cdc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f3818bfbc51844152e36.md
@@ -0,0 +1,239 @@
+---
+id: 6144f3818bfbc51844152e36
+title: الخطوة ٣٤
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+استخدم دالة `minmax` لجعل الأعمدة (columns) الخاصة بك مستجيبة (responsive) على أي جهاز. تتطلب دالة `minmax` حجتين اي 2 arguments، الأولى هي الحد الأدنى للقيمة والثانية هي الحد الأقصى. يمكن أن تكون هذه القيم طولا أو نسبة مئوية أو `fr` أو حتى keyword مثل `max-content`.
+
+قم بتفليف كل قيمة من القيم المحددة بالفعل لخاصية `grid-template-columns` في دالة `minmax` ، باستخدام كل قيمة كـ argument ثانية. يجب أن تكون الـ argument الأولى `2rem` و `min-content` و `2rem` على التوالي.
+
+# --hints--
+
+يجب أن يكون لمنتقي `main` الخاص بك خاصية `grid-template-columns` بقيمة `minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('main')?.gridTemplateColumns === 'minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code
+              through freeCodeCamp will have an even better resource to help
+              them learn these fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*, ::before, ::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+--fcc-editable-region--
+main {
+  display: grid;
+  grid-template-columns: 1fr 94rem 1fr;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md
new file mode 100644
index 00000000000..2b988f06ef3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f42204c8c8195f1f3345.md
@@ -0,0 +1,237 @@
+---
+id: 6144f42204c8c8195f1f3345
+title: الخطوة ٣٥
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+لإضافة مساحة بين الصفوف (rows) في grid layout، يمكنك استخدام خاصية `row-gap`. اعطي منتقي `main` خاصية `row-gap` بقيمة `3rem`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `main` الخاص بك الخاصية `row-gap` بقيمة `3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('main')?.rowGap === '3rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code
+              through freeCodeCamp will have an even better resource to help
+              them learn these fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*, ::before, ::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+--fcc-editable-region--
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md
new file mode 100644
index 00000000000..6786a479bb5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6144f47b7c631e1a6f304dd5.md
@@ -0,0 +1,250 @@
+---
+id: 6144f47b7c631e1a6f304dd5
+title: الخطوة ٣٦
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+سوف تحتوي مجلتك على ثلاثة أقسام رئيسية. لقد قمت بالفعل بتعيين التخطيط العام في قاعدة `main`، ولكن يمكنك ضبط الموضع في القواعد الفرعية (child rules).
+
+أحد الخيارات هو خاصية `grid-column`، التي هي اختصار لـ `grid-column-start` و `grid-column-end`. تخبر خاصية `grid-column` عنصر ال grid بالـ grid line الذي يبدأ وينتهي عنده.
+
+قم بإنشاء قاعدة `.heading` وتعيين خاصية `grid-column` إلى `2 / 3`. هذا سيخبر عنصر `.heading` للبدء عند grid line 2 والانتهاء عند grid line 3.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.heading`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.heading'));
+```
+
+يجب أن يكون لمنتقي `.heading` الخاص بك الخاصية `grid-column` بقيمة `2 / 3`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.heading')?.gridColumn === '2 / 3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code
+              through freeCodeCamp will have an even better resource to help
+              them learn these fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*, ::before, ::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md
new file mode 100644
index 00000000000..5a5fe19d67e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b07081759c2c691166a9.md
@@ -0,0 +1,250 @@
+---
+id: 6148b07081759c2c691166a9
+title: الخطوة ٣٧
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+قم بإنشاء منتقي `.text` وإعطائه الخاصية `grid-column` بقيمة `2 / 3`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.text`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.text'));
+```
+
+يجب أن يكون لمنتقي `.text` الخاص بك الخاصية `grid-column` بقيمة `2 / 3`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.text')?.gridColumn === '2 / 3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code
+              through freeCodeCamp will have an even better resource to help
+              them learn these fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*, ::before, ::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+.heading {
+  grid-column: 2 / 3;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md
new file mode 100644
index 00000000000..1fe2db88eed
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b0d764e4192e5712ed92.md
@@ -0,0 +1,248 @@
+---
+id: 6148b0d764e4192e5712ed92
+title: الخطوة ٣٨
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+للحصول على مزيد من التحكم في تخطيط المحتوى الخاص بك، يمكنك انشاء CSS Grid داخل CSS Grid.
+
+قم بتعيين خاصية `display` الخاصة بـ `.heading` الخاص بك إلى `grid`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.heading` الخاص بك الخاصية `display` بقيمة `grid`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.heading')?.display === 'grid');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying
+                on General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This
+                was the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code
+              through freeCodeCamp will have an even better resource to help
+              them learn these fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*, ::before, ::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+--fcc-editable-region--
+.heading {
+  grid-column: 2 / 3;
+}
+--fcc-editable-region--
+
+.text {
+  grid-column: 2 / 3;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md
new file mode 100644
index 00000000000..b9b46cd9395
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b185ef37522f688316b0.md
@@ -0,0 +1,253 @@
+---
+id: 6148b185ef37522f688316b0
+title: الخطوة ٣٩
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+الآن يمكنك تصميم (style) محتوى عنصر `.heading` باستخدام CSS Grid.
+
+تستخدم دالة CSS تدعي `repeat()` لتكرار قيمة، بدلا من كتابتها يدويا، وهي مفيدة لتخطيط الشبكات (grid layouts). على سبيل المثال، سيؤدي تعيين خاصية `grid-template-columns` إلى `repeat(20, 200px)` إلى إنشاء 20 عمود كل منهم بعرض `200px`.
+
+أعطِ عنصر `.heading` الخاص بك الخاصية `grid-template-columns` بقيمة `repeat(2, 1fr)` لإنشاء عمودين متساويين في العرض.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.heading` الخاص بك الخاصية `grid-template-columns` بقيمة `repeat(2, 1fr)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.heading')?.gridTemplateColumns === 'repeat(2, 1fr)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+--fcc-editable-region--
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+}
+--fcc-editable-region--
+
+.text {
+  grid-column: 2 / 3;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md
new file mode 100644
index 00000000000..9e44ebff1e9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b30464daf630848c21d4.md
@@ -0,0 +1,250 @@
+---
+id: 6148b30464daf630848c21d4
+title: الخطوة ٤٠
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+اعطي منتقي `.heading` خاصية `row-gap` بقيمة `1.5rem`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.heading` الخاص بك الخاصية `row-gap` بقيمة `1.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.heading')?.rowGap === '1.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+--fcc-editable-region--
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+}
+--fcc-editable-region--
+
+.text {
+  grid-column: 2 / 3;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md
new file mode 100644
index 00000000000..fd5dd316ada
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b4b150434734143db6f2.md
@@ -0,0 +1,261 @@
+---
+id: 6148b4b150434734143db6f2
+title: الخطوة ٤١
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+تذكر أن خاصية `grid-column` تحدد الأعمدة التي يبدأ و ينتهي العنصر عندها. قد تكون هناك أوقات لا تكون فيها متأكد من عدد الأعمدة التي ستحصل عليها الـ grid الخاصه بك، لكنك تريد أن يتوقف العنصر عند العمود الأخير. للقيام بذلك، يمكنك استخدام `-1` في العمود النهائي.
+
+قم بإنشاء منتقي `.hero` وإعطائه الخاصية `grid-column` بقيمة `1 / -1`. هذا سيخبر العنصر بامتداد العرض الكامل للـ grid.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.hero`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.hero'));
+```
+
+يجب أن يكون لمنتقي `.hero` الخاص بك الخاصية `grid-column` بقيمة `1 / -1`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.hero')?.gridColumn === '1 / -1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md
new file mode 100644
index 00000000000..f87d91705ed
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b5623efa8f369f2c3643.md
@@ -0,0 +1,255 @@
+---
+id: 6148b5623efa8f369f2c3643
+title: الخطوة ٤٢
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+اعطي منتقي `.hero` خاصية `position` بقيمة `relative`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.hero` الخاص بك الخاصية `position` بقيمة `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.hero')?.position === 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+}
+
+--fcc-editable-region--
+.hero {
+  grid-column: 1 / -1;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md
new file mode 100644
index 00000000000..d7d9964fa7f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148b59ef318e03875f35c4a.md
@@ -0,0 +1,271 @@
+---
+id: 6148b59ef318e03875f35c4a
+title: الخطوة ٤٤
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+قم بإنشاء منتقي `img` وإعطائه خاصية `width` بقيمة `100%`، و خاصية `object-fit` تم تعيينها إلى `cover`.
+
+الخاصية `object-fit` تخبر المتصفح كيفية وضع العنصر داخل الحاوية (container). في هذه الحالة ، سيقوم `cover` بتعيين الصورة لملء الحاوية، مع الاقتصاص حسب الحاجة لتجنب تغيير نسبة العرض إلى الارتفاع.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `img`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('img'));
+```
+
+يجب أن يكون لمنتقي `img` الخاص بك الخاصية `width` بقيمة `100%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('img')?.width === '100%');
+```
+
+يجب أن يحتوي منتقي `img` على خاصية `object-fit` بقيمة `cover`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('img')?.objectFit === 'cover');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md
new file mode 100644
index 00000000000..467d6a7ba85
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bd62bbb8c83a5f1fc1b3.md
@@ -0,0 +1,280 @@
+---
+id: 6148bd62bbb8c83a5f1fc1b3
+title: الخطوة ٤٥
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+قم إنشاء منتقي `.hero-title` وإعطائه خاصية `text-align` تم تعيينها إلى `center` و الخاصية `color` التي تم تعيينها إلى `orangered` و خاصية `font-size` تم تعيينها إلى `8rem`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.hero-title`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.hero-title'));
+```
+
+يجب أن يكون لمنتقي `.hero-title` الخاص بك خاصية `text-align` بقيمة `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.textAlign === 'center');
+```
+
+يجب أن يكون لمنتقي `.hero-title` الخاص بك خاصية `color` بقيمة `orangered`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.color === 'orangered');
+```
+
+يجب أن يكون لمنتقي `.hero-title` الخاص بك خاصية `font-size` بقيمة `8rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.hero-title')?.fontSize === '8rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md
new file mode 100644
index 00000000000..331218e131d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be3d605d6b3ca9425d11.md
@@ -0,0 +1,286 @@
+---
+id: 6148be3d605d6b3ca9425d11
+title: الخطوة ٤٦
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+ويحتاج العنوان الفرعي (subtitle) أيضا إلى أن يكون styled. قم إنشاء منتقي `.hero-subtitle` وإعطائه خاصية `font-size` تم تعيينها إلى `2.4rem` و الخاصية `color` التي تم تعيينها إلى `orangered` و خاصية `text-align` تم تعيينها إلى `center`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.hero-subtitle`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle'));
+```
+
+يجب أن يكون لمنتقي `.hero-subtitle` الخاص بك خاصية `font-size` بقيمة `2.4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.fontSize === '2.4rem');
+```
+
+يجب أن يكون لمنتقي `.hero-subtitle` الخاص بك خاصية `color` بقيمة `orangered`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.color === 'orangered');
+```
+
+يجب أن يكون لمنتقي `.hero-subtitle` الخاص بك خاصية `text-align` بقيمة `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.hero-subtitle')?.textAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md
new file mode 100644
index 00000000000..292b0e5088c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148be82ca63c63daa8cca49.md
@@ -0,0 +1,287 @@
+---
+id: 6148be82ca63c63daa8cca49
+title: الخطوة ٤٧
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+قم بإنشاء منتقي `.author` وإعطاءه خاصية `font-size` بقيمة `2rem` و خاصية `font-family` بقيمة `Raleway` مع fallback بقيمة `sans-serif`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.author`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.author'));
+```
+
+يجب أن يكون لمنتقي `.author` الخاص بك خاصية `font-size` بقيمة `2rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.author')?.fontSize === '2rem');
+```
+
+منتقي `.author` يجب أن يكون لديه خاصية `font-family` بقيمة `Raleway`، مع fallback بقيمة `sans-serif`.
+
+```js
+const fontFamily = new __helpers.CSSHelp(document).getStyle('.author')?.fontFamily;
+assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md
new file mode 100644
index 00000000000..05708dd0995
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bf49fcc7913f05dbf9b7.md
@@ -0,0 +1,287 @@
+---
+id: 6148bf49fcc7913f05dbf9b7
+title: الخطوة ٤٨
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+قم بإنشاء منتقي `.author-name a:hover` وإعطائه خاصية `background-color` بقيمة `#306203`.
+
+سيؤدي هذا إلى إنشاء تأثير Hover فقط لعنصر `a` داخل `.author-name`، مع إظهار لون freeCodeCamp الأخضر الأصلي في الخلفية.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.author-name a:hover`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.author-name a:hover'));
+```
+
+منتقي `.author-name a:hover` يجب ان يحتوي علي خاصية `background-color` بقيمة `#306203`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.author-name a:hover')?.backgroundColor === 'rgb(48, 98, 3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md
new file mode 100644
index 00000000000..f5c749dffbe
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148bfc43df3bc40fe0e6405.md
@@ -0,0 +1,289 @@
+---
+id: 6148bfc43df3bc40fe0e6405
+title: الخطوة ٤٩
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+قم بإنشاء منتقي `.publish-date` واعطيه خاصية `color` بقيمة `rgba(255, 255, 255, 0.5)`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.publish-date`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.publish-date'));
+```
+
+يجب أن يحتوي منتقي `.publish-date` على خاصية `color` بقيمة `rgba(255, 255, 255, 0.5)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.publish-date')?.color === 'rgba(255, 255, 255, 0.5)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md
new file mode 100644
index 00000000000..027ce939e58
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c004ffc8434252940dc3.md
@@ -0,0 +1,299 @@
+---
+id: 6148c004ffc8434252940dc3
+title: الخطوة ٥٠
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+قم بإنشاء منتقي `.social-icons`. أعطي المنتقي خاصية `display` بقيمة `grid`، وخاصية `font-size` بقيمة `3rem`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.social-icons`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.social-icons'));
+```
+
+يجب أن يكون لمنتقي `.social-icons` الخاص بك الخاصية `display` بقيمة `grid`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.display === 'grid');
+```
+
+يجب أن يكون لمنتقي `.social-icons` الخاص بك الخاصية `font-size` بقيمة `3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.fontSize === '3rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md
new file mode 100644
index 00000000000..41d02e48573
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c224ecb157439bc5247c.md
@@ -0,0 +1,290 @@
+---
+id: 6148c224ecb157439bc5247c
+title: الخطوة ٥١
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+ستنشئ الإعدادات الافتراضية لـ CSS Grid صفوف (rows) إضافية حسب الحاجة، على عكس Flexbox. قم باعطاء منتقي `.social-icons` الخاصية `grid-template-columns` بقيمة `repeat(5, 1fr)` لترتيب الأيقونات في صف واحد.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.social-icons` على خاصية `grid-template-columns` بقيمة `repeat(5, 1fr)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridTemplateColumns === 'repeat(5, 1fr)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+--fcc-editable-region--
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md
new file mode 100644
index 00000000000..dd10f877f00
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c434bd731d45617a76c6.md
@@ -0,0 +1,295 @@
+---
+id: 6148c434bd731d45617a76c6
+title: الخطوة ٥٢
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+إذا كنت ترغب في إضافة المزيد من أيقونات مواقع التواصل الاجتماعي، ولكن مع ابقائها على نفس الصف، ستحتاج إلى تحديث `grid-template-columns` لإنشاء أعمدة إضافية. كبديل، يمكنك استخدام خاصية `grid-auto-flow`.
+
+هذه الخاصية تأخذ إما `row` أو `column` كقيمة أولى، مع قيمة ثانية اختيارية وهي `dense`. `grid-auto-flow` تستخدم خوارزمية وضع تلقائي لضبط الـ grid layout. تعيينها إلى `column` يخبر الخوارزمية لإنشاء أعمدة جديدة للمحتوى حسب الحاجة. القيمة `dense` تسمح للخوارزمية بالتتبع وملء الثقوب في الـ grid بالعناصر الأصغر حجماً. والذي يمكن أن يؤدي إلى ظهور عناصر غير مرغوب فيها.
+
+بالنسبة لمنتقي `.social-icons`، قم بتعيين خاصية `grid-auto-flow` إلى `column`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.social-icons` الخاص بك الخاصية `grid-auto-flow` بقيمة `column`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridAutoFlow === 'column');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+--fcc-editable-region--
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md
new file mode 100644
index 00000000000..e5e947400c7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c5036ddad94692a66230.md
@@ -0,0 +1,294 @@
+---
+id: 6148c5036ddad94692a66230
+title: الخطوة ٥٣
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+الآن خوارزمية التثبيت التلقائي ستفعل عند إضافة عنصر أيقونة جديد. ومع ذلك ، فإن الخوارزمية تُفترض أن عرض العمود الجديد هو `auto`، وهو ما لن يتطابق مع الأعمدة الحالية.
+
+يمكنك تجاوز هذا مع خاصية `grid-auto-columns`. اعطي منتقي `.social-icons` الخاصية `grid-auto-columns` بقيمة `1fr`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.social-icons` الخاص بك الخاصية `grid-auto-columns` بقيمة `1fr`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.gridAutoColumns === '1fr');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+--fcc-editable-region--
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md
new file mode 100644
index 00000000000..298acdfc8a0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c58bace368497fb11bcf.md
@@ -0,0 +1,295 @@
+---
+id: 6148c58bace368497fb11bcf
+title: الخطوة ٥٤
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+مثل Flexbox، مع CSS Grid يمكنك محاذاة محتوى عناصر الـ grid باستخدام `align-items` و `justify-items`. `align-items` ستعمل على محاذاة العناصر الفرعية (child elements) على طول محور العمود (column)، و `justify-items` ستعمل على محاذاة العناصر الفرعية على طول محور الصف (row).
+
+اعطي منتقي `.social-icons` الخاصية `align-items` بقيمة `center`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.social-icons` الخاص بك الخاصية `align-items` بقيمة `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.social-icons')?.alignItems === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+--fcc-editable-region--
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md
new file mode 100644
index 00000000000..9a3cbc6cb0e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c6aa9981d74af202125e.md
@@ -0,0 +1,300 @@
+---
+id: 6148c6aa9981d74af202125e
+title: الخطوة ٥٥
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+اعطي منتقي `.text` الخاصية `font-size` بقيمة `1.8rem` والخاصية `letter-spacing` بقيمة `0.6px`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.text` الخاص بك خاصية `font-size` بقيمة `1.8rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.text')?.fontSize === '1.8rem');
+```
+
+يجب أن يكون لمنتقي `.text` الخاص بك خاصية `letter-spacing` بقيمة `0.6px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.text')?.letterSpacing === '0.6px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+--fcc-editable-region--
+.text {
+  grid-column: 2 / 3;
+}
+--fcc-editable-region--
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md
new file mode 100644
index 00000000000..168aebe5ce5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148c721e74ecd4c619ae51c.md
@@ -0,0 +1,298 @@
+---
+id: 6148c721e74ecd4c619ae51c
+title: الخطوة ٥٦
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+العنصر `.text` ليس CSS Grid، ولكن يمكنك إنشاء أعمدة داخل عنصر دون استخدام الـ grid باستخدام خاصية <`column-width`.
+
+اعطي منتقي `.text` خاصية `column-width` بقيمة `25rem`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.text` الخاص بك خاصية `column-width` بقيمة `25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.text')?.columnWidth === '25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+--fcc-editable-region--
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+}
+--fcc-editable-region--
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md
new file mode 100644
index 00000000000..9667b148061
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148ceaf5d897d4d8b3554b3.md
@@ -0,0 +1,299 @@
+---
+id: 6148ceaf5d897d4d8b3554b3
+title: الخطوة ٥٧
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+وكثيرا ما تستخدم المجلات نصا justified في محتوياتها المطبوعة لهيكلة تصميمها والتحكم في تدفق محتوياتها. بينما يعمل ذلك في الطباعة، يمكن أن يكون النص الـ justified على مواقع الويب مصدر قلق بشأن إمكانية الوصول، على سبيل المثال، صعوبات للأشخاص الذين يعانون من عسر القراءة.
+
+لجعل مشروعك يبدو وكأنه مجلة مطبوعة، أعط منتقي `.text` خاصية `text-align` بقيمة `justify`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.text` الخاص بك خاصية `text-align` بقيمة `justify`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.text')?.textAlign === 'justify');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+--fcc-editable-region--
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+}
+--fcc-editable-region--
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md
new file mode 100644
index 00000000000..11894494cd4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148cf094b3f2b4e8a032c63.md
@@ -0,0 +1,314 @@
+---
+id: 6148cf094b3f2b4e8a032c63
+title: الخطوة ٥٨
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Pseudo-selector الـ `::first-letter` يسمح لك باستهداف الحرف الأول في محتوى النص لعنصر ما.
+
+قم بإنشاء منتقي `.first-paragraph::first-letter` وتعيين خاصية `font-size` إلى `6rem`. أعطيه أيضا خاصية `color` بقيمة `orangered` لجعله بارزا.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.first-paragraph::first-letter`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter'));
+```
+
+يجب أن يكون لمنتقي `.first-paragraph::first-letter` الخاص بك خاصية `font-size` بقيمة `6rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.fontSize === '6rem');
+```
+
+يجب أن يكون لمنتقي `.first-paragraph::first-letter` الخاص بك خاصية `color` بقيمة `orangered`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.color === 'orangered');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md
new file mode 100644
index 00000000000..ebf82f47468
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d0b863d10d50544ace0e.md
@@ -0,0 +1,309 @@
+---
+id: 6148d0b863d10d50544ace0e
+title: الخطوة ٥٩
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+أما النص الآخر فقد نُقل من مكانه. حركه إلى موضعه عن طريق إعطاء منتقي `.first-paragraph::first-letter` خاصية `float` بقيمة `left` و الخاصية `margin-right`بقيمة `1rem`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.first-paragraph::first-letter` الخاص بك خاصية `float` بقيمة `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.float === 'left');
+```
+
+يجب أن يكون لمنتقي `.first-paragraph::first-letter` الخاص بك خاصية `margin-right` بقيمة `1rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.first-paragraph::first-letter')?.marginRight === '1rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+--fcc-editable-region--
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md
new file mode 100644
index 00000000000..b023dd0bb0c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1bdf39c5b5186f5974b.md
@@ -0,0 +1,313 @@
+---
+id: 6148d1bdf39c5b5186f5974b
+title: الخطوة ٦٠
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+قم بإنشاء منتقي `hr` وإعطائه الخاصية `margin` بقيمة `1.5rem 0`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `hr`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('hr'));
+```
+
+يجب أن يكون لمنتقي `hr` الخاص بك خاصية `margin` بقيمة `1.5rem 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('hr')?.margin === '1.5rem 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md
new file mode 100644
index 00000000000..f33858cbc76
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d1f9eb63c252e1f8acc4.md
@@ -0,0 +1,311 @@
+---
+id: 6148d1f9eb63c252e1f8acc4
+title: الخطوة ٦١
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+لإعطاء `hr` لون، تحتاج إلى ضبط خاصية `border`. اعطي منتقي `hr` الخاصية `border` بقيمة `1px solid rgba(120, 120, 120, 0.6)`.
+
+# --hints--
+
+يجب أن يكون لدي `hr` الخاصية `border` بقيمة `1px solid rgba(120, 120, 120, 0.6)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderWidth, '1px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderStyle, 'solid');
+assert.equal(new __helpers.CSSHelp(document).getStyle('hr')?.borderColor, 'rgba(120, 120, 120, 0.6)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+--fcc-editable-region--
+hr {
+  margin: 1.5rem 0;
+}
+--fcc-editable-region--
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md
new file mode 100644
index 00000000000..547eed11762
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d2444d01ab541e64a1e4.md
@@ -0,0 +1,330 @@
+---
+id: 6148d2444d01ab541e64a1e4
+title: الخطوة ٦٢
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+قم بإنشاء منتقي `.quote`. أعطيه خاصية `color` بقيمة `#00beef` وخاصية `font-size` بقيمة `2.4rem`، وخاصية `text-align` بقيمة `center`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.quote`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.quote'));
+```
+
+يجب أن يكون لمنتقي `.quote` الخاص بك الخاصية `color` بقيمة `#00beef`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.quote')?.color === 'rgb(0, 190, 239)');
+```
+
+يجب أن يكون لمنتقي `.quote` الخاص بك خاصية `font-size` بقيمة `2.4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.quote')?.fontSize === '2.4rem');
+```
+
+يجب أن يكون لمنتقي `.quote` الخاص بك خاصية `text-align` بقيمة `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.quote')?.textAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md
new file mode 100644
index 00000000000..8ba4f141e4d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d33e31fccf558696c745.md
@@ -0,0 +1,317 @@
+---
+id: 6148d33e31fccf558696c745
+title: الخطوة ٦٣
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+لجعل نص الاقتباس يبرز أكثر، أعطي منتقي `.quote` الخاصية `font-family` بقيمة `Raleway` مع fallback بقيمة `sans-serif`.
+
+# --hints--
+
+منتقي `.quote` يجب أن يكون لديه خاصية `font-family` بقيمة `Raleway`، مع fallback بقيمة `sans-serif`.
+
+```js
+const fontFamily = new __helpers.CSSHelp(document).getStyle('.quote')?.fontFamily;
+assert(fontFamily === 'Raleway, sans-serif' || fontFamily === `"Raleway", sans-serif`);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+--fcc-editable-region--
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md
new file mode 100644
index 00000000000..6a88130a0e4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d3fff5186b57123d97e2.md
@@ -0,0 +1,341 @@
+---
+id: 6148d3fff5186b57123d97e2
+title: الخطوة ٦٤
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+الاقتباس (quote) ليس في الحقيقة اقتباسا بدون علامات اقتباس صحيحة. يمكنك إضافة هذه باستخدام CSS pseudo selectors.
+
+قم بإنشاء منتقي `.quote::before` وقم بتعيين خاصية `content` إلى `"` بمسافة تليها.
+
+وأيضا، قم بإنشاء `.quote::after` وقم بتعيين خاصية `content` إلى `"`بمسافة تسبقها.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.quote::before`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.quote::before'));
+```
+
+يجب أن يحتوي منتقي `.quote::before` على خاصية `content` بقيمة `'" '`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.quote::before')?.content?.match(/\\?\"\s/));
+```
+
+يجب أن يكون لديك منتقي `.quote::after`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.quote::after'));
+```
+
+يجب أن يحتوي منتقي `.quote::after` على خاصية `content` بقيمة `' "'`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.quote::after')?.content?.match(/\s\\?\"/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md
new file mode 100644
index 00000000000..af3681daf7e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d4d57b965358c9fa38bf.md
@@ -0,0 +1,335 @@
+---
+id: 6148d4d57b965358c9fa38bf
+title: الخطوة ٦٥
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+الآن لتصميم `section` الثالث. لاحظ أنه يحتوي على قيم `text` و `text-with-images` لسمة `class`، مما يعني أنه يرث بالفعل الأنماط من قاعدة `.text`.
+
+قم بإنشاء منتقي `.text-with-images` وتعيين خاصية `display` إلى `grid`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.text-with-images`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.text-with-images'));
+```
+
+يجب أن يكون لمنتقي `.text-with-images` الخاص بك الخاصية `display` بقيمة `grid`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.display === 'grid');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md
new file mode 100644
index 00000000000..5ca37567a9f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d7720f0db36775db868a.md
@@ -0,0 +1,335 @@
+---
+id: 6148d7720f0db36775db868a
+title: الخطوة ٦٦
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+سوف تحتاج إلى أن يكون لديك عمود للنص وعمود للصور. اعطي منتقي `.text-with-images` الخاصية `grid-template-columns` بقيمة `1fr 2fr`. قم أيضًا بتعيين خاصية `column-gap` إلى `3rem` لتوفير المزيد من المسافات بين الأعمدة.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.text-with-images` على خاصية `grid-template-columns` بقيمة `1fr 2fr`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.gridTemplateColumns === '1fr 2fr');
+```
+
+يجب أن يكون لمنتقي `.text-with-images` الخاص بك الخاصية `column-gap` بقيمة `3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.columnGap === '3rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+--fcc-editable-region--
+.text-with-images {
+  display: grid;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md
new file mode 100644
index 00000000000..bb8f4b3f849
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d94fdf6a5d6899f8ff15.md
@@ -0,0 +1,331 @@
+---
+id: 6148d94fdf6a5d6899f8ff15
+title: الخطوة ٦٧
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+اعطي منتقي `.text-with-images` الخاصية `margin-bottom` بقيمة `3rem`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.text-with-images` الخاص بك الخاصية `margin-bottom` بقيمة `3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.text-with-images')?.marginBottom === '3rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+--fcc-editable-region--
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md
new file mode 100644
index 00000000000..53cbfc706b5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148d9825b50a3698aeee644.md
@@ -0,0 +1,340 @@
+---
+id: 6148d9825b50a3698aeee644
+title: الخطوة ٦٨
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+قم بإنشاء منتقي `.lists` وتعيين خاصية `list-style-type` إلى `none`. هذا سيتخلص من النقاط (bulltet points) في قائمة العناصر.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.lists`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.lists'));
+```
+
+يجب أن يكون لمنتقي `.lists` الخاص بك خاصية `list-style-type` بقيمة `none`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.lists')?.listStyleType === 'none');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md
new file mode 100644
index 00000000000..1fcb33b55d9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e162e255676ae0da6a76.md
@@ -0,0 +1,336 @@
+---
+id: 6148e162e255676ae0da6a76
+title: الخطوة ٦٩
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+اعطي منتقي `.lists` الخاصية `margin-top` بقيمة `2rem`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.lists` الخاص بك خاصية `margin-top` بقيمة `2rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.lists')?.marginTop === '2rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+--fcc-editable-region--
+.lists {
+  list-style-type: none;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md
new file mode 100644
index 00000000000..59da090488f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e19c3e26436be0155690.md
@@ -0,0 +1,345 @@
+---
+id: 6148e19c3e26436be0155690
+title: الخطوة ٧٠
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+قم بإنشاء قاعدة `.lists li` لاستهداف عناصر القائمة ضمن عنصر `.lists` الخاص بك. اعطيها خاصية `margin-bottom` بقيمة `1.5rem`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.lists li`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.lists li'));
+```
+
+يجب أن يكون لمنتقي `.lists li` الخاص بك خاصية `margin-bottom` بقيمة `1.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.lists li')?.marginBottom === '1.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+.lists {
+  list-style-type: none;
+  margin-top: 2rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md
new file mode 100644
index 00000000000..41162c2a0d1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e246146b646cf4255f0c.md
@@ -0,0 +1,349 @@
+---
+id: 6148e246146b646cf4255f0c
+title: الخطوة ٧١
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+قم بإنشاء منتقي `.list-title, .list-subtitle` وتعيين خاصية `color` إلى `#00beef`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.list-title, .list-subtitle`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle'))
+```
+
+يجب أن يكون لمنتقي `.list-title, .list-subtitle` الخاص بك الخاصية `color` بقيمة `#00beef`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.list-title, .list-subtitle')?.color === 'rgb(0, 190, 239)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+.lists {
+  list-style-type: none;
+  margin-top: 2rem;
+}
+
+.lists li {
+  margin-bottom: 1.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md
new file mode 100644
index 00000000000..c22a4237c46
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e2dcdd60306dd77d41cc.md
@@ -0,0 +1,355 @@
+---
+id: 6148e2dcdd60306dd77d41cc
+title: الخطوة ٧٢
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+حان الوقت لتصميم القسم الأخير من المجلة - الصور.
+
+يتم تغليف الصور بعنصر `aside` باستخدام class يدعي `image-wrapper`، لذلك قم بإنشاء منتقي `.image-wrapper`. عيّن خاصية `display` إلى `grid`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.image-wrapper`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper'));
+```
+
+يجب أن يكون لمنتقي `.image-wrapper` الخاص بك خاصية `display` بقيمة `grid`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.display === 'grid');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+.lists {
+  list-style-type: none;
+  margin-top: 2rem;
+}
+
+.lists li {
+  margin-bottom: 1.5rem;
+}
+
+.list-title, .list-subtitle {
+  color: #00beef;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md
new file mode 100644
index 00000000000..aa47ff31b5a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e4d6861a486f60681f36.md
@@ -0,0 +1,357 @@
+---
+id: 6148e4d6861a486f60681f36
+title: الخطوة ٧٣
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+يجب أن تكون الصور ضمن تخطيط من عمودين وثلاثة صفوف.
+
+اعطي منتقي `.image-wrapper` الخاصية `grid-template-columns` بقيمة `2fr 1fr` و خاصية `grid-template-rows` بقيمة `repeat(3, min-content)`. هذا سيعطي الـ grid صفوف تعدل من ارتفاعها بناء علي المحتوى، ولكن أعمدة يظل عرضهاً ثابت بناء علي الحاوية (container).
+
+# --hints--
+
+يجب أن يحتوي منتقي `.image-wrapper` الجديد على خاصية `grid-template-columns` بقيمة `2fr 1fr`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gridTemplateColumns === '2fr 1fr');
+```
+
+يجب أن يكون لمنتقي `.image-wrapper` الخاص بك خاصية `grid-template-rows` بقيمة `repeat(3, min-content)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gridTemplateRows === 'repeat(3, min-content)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+.lists {
+  list-style-type: none;
+  margin-top: 2rem;
+}
+
+.lists li {
+  margin-bottom: 1.5rem;
+}
+
+.list-title, .list-subtitle {
+  color: #00beef;
+}
+
+--fcc-editable-region--
+.image-wrapper {
+  display: grid;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md
new file mode 100644
index 00000000000..8e7eb1d1296
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e5a204d99e70343a63e4.md
@@ -0,0 +1,353 @@
+---
+id: 6148e5a204d99e70343a63e4
+title: الخطوة ٧٤
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+خاصية `gap` هي طريقة مختصرة لتعيين قيمة `column-gap` و `row-gap` في نفس الوقت. إذا أعطيت قيمة واحدة، فإنها تعين `column-gap` و `row-gap` الي هذه القيمة. إذا أعطيت قيمتين، فإنها تعين `row-gap` للقيمة الأولى و `column-gap` للثانية.
+
+اعطي منتقي `.image-wrapper` الخاصية `gap` بقيمة `2rem`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.image-wrapper` الخاص بك خاصية `gap` بقيمة `2rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.gap === '2rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+.lists {
+  list-style-type: none;
+  margin-top: 2rem;
+}
+
+.lists li {
+  margin-bottom: 1.5rem;
+}
+
+.list-title, .list-subtitle {
+  color: #00beef;
+}
+
+--fcc-editable-region--
+.image-wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: repeat(3, min-content);
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md
new file mode 100644
index 00000000000..5471f0affc7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e62a6f768f71c4f04828.md
@@ -0,0 +1,354 @@
+---
+id: 6148e62a6f768f71c4f04828
+title: الخطوة ٧٥
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+يمكن استخدام خاصية `place-items` لتعيين `align-items` و `justify-items` في نفس الوقت. تأخذ خاصية `place-items` قيمة أو قيمتين. إذا تم توفير قيمة واحدة، فإنه يتم استخدامها لكل من خصائص `align-items` و `justify-items`. إذا تم توفير قيمتين، القيمة الأولى تستخدم لخاصية `align-items` والقيمة الثانية تستخدم لـ `justify-items`.
+
+اعطي منتقي `.image-wrapper` الخاصية `place-items` بقيمة `center`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.image-wrapper` على خاصية `place-items` بقيمة `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.image-wrapper')?.placeItems === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+.lists {
+  list-style-type: none;
+  margin-top: 2rem;
+}
+
+.lists li {
+  margin-bottom: 1.5rem;
+}
+
+.list-title, .list-subtitle {
+  color: #00beef;
+}
+
+--fcc-editable-region--
+.image-wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: repeat(3, min-content);
+  gap: 2rem;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md
new file mode 100644
index 00000000000..7cb2452a6f7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148e789329dc9736ce59b85.md
@@ -0,0 +1,361 @@
+---
+id: 6148e789329dc9736ce59b85
+title: الخطوة ٧٦
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+قم بإنشاء قاعدة `.image-1, .image-3` وإعطائها الخاصية `grid-column` بقيمة `1 / -1`. وهذا سيسمح للصورتين الأولى والثالثة بامتداد العرض الكامل للـ grid.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.image-1, .image-3`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.image-1, .image-3'));
+```
+
+يجب أن يكون لمنتقي `.image-1, .image-3` الخاص بك الخاصية `grid-column` بقيمة `1 / -1`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.image-1, .image-3')?.gridColumn === '1 / -1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+.lists {
+  list-style-type: none;
+  margin-top: 2rem;
+}
+
+.lists li {
+  margin-bottom: 1.5rem;
+}
+
+.list-title, .list-subtitle {
+  color: #00beef;
+}
+
+.image-wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: repeat(3, min-content);
+  gap: 2rem;
+  place-items: center;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md
new file mode 100644
index 00000000000..1b44fe2a4c9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f34ebedc2274bceeb99c.md
@@ -0,0 +1,375 @@
+---
+id: 6148f34ebedc2274bceeb99c
+title: الخطوة ٧٧
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+الآن بعد الانتهاء من تصميم المجلة، تحتاج إلى جعلها مستجيبة (responsive).
+
+ابدأ بـ query للـ `@media` لـ `only screen` مع `max-width` من `720px`. في داخلها، قم بإنشاء منتقي `.image-wrapper` وإعطائه خاصية `grid-template-columns` بقيمة `1fr`.
+
+سيؤدي هذا إلى طي الصور الثلاث في عمود واحد على شاشات أصغر.
+
+# --hints--
+
+يجب أن يكون لديك `@media` جديد لـ `only screen and (max-width: 720px)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.media?.mediaText === 'only screen and (max-width: 720px)');
+```
+
+يجب أن تحتوي قاعدة `@media` الجديدة على منتقي `.image-wrapper`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.cssRules?.[0]?.selectorText === '.image-wrapper');
+```
+
+يجب أن يحتوي منتقي `.image-wrapper` الجديد على خاصية `grid-template-columns` بقيمة `1fr`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[0]?.cssRules?.[0]?.style?.gridTemplateColumns === '1fr');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+.lists {
+  list-style-type: none;
+  margin-top: 2rem;
+}
+
+.lists li {
+  margin-bottom: 1.5rem;
+}
+
+.list-title, .list-subtitle {
+  color: #00beef;
+}
+
+.image-wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: repeat(3, min-content);
+  gap: 2rem;
+  place-items: center;
+}
+
+.image-1, .image-3 {
+  grid-column: 1 / -1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md
new file mode 100644
index 00000000000..333e45d589a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f600cde42b7670c2611f.md
@@ -0,0 +1,379 @@
+---
+id: 6148f600cde42b7670c2611f
+title: الخطوة ٧٨
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+قم بإنشاء query اخر `@media` لـ `only screen` مع `max-width` من `600px`. داخلها، قم بإنشاء قاعدة `.text-with-images` وإعطائها خاصية `grid-template-columns` بقيمة `1fr`.
+
+سيؤدي هذا إلى طي منطقة النص السفلية إلى عمود واحد على الشاشات الأصغر.
+
+# --hints--
+
+يجب عليك إنشاء query للـ `@media` جديد لـ `only screen and (max-width: 600px)`. يجب أن يكون هذا تحت query الـ `@media` السابق.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.media?.mediaText === 'only screen and (max-width: 600px)');
+```
+
+يجب أن يحتوي query الـ `@media` الجديد على منتقى `.text-with-images`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.cssRules?.[0]?.selectorText === '.text-with-images');
+```
+
+يجب أن يحتوي منتقي `.text-with-images` على خاصية `grid-template-columns` بقيمة `1fr`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[1]?.cssRules?.[0]?.style?.gridTemplateColumns === '1fr');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+.lists {
+  list-style-type: none;
+  margin-top: 2rem;
+}
+
+.lists li {
+  margin-bottom: 1.5rem;
+}
+
+.list-title, .list-subtitle {
+  color: #00beef;
+}
+
+.image-wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: repeat(3, min-content);
+  gap: 2rem;
+  place-items: center;
+}
+
+.image-1, .image-3 {
+  grid-column: 1 / -1;
+}
+
+@media only screen and (max-width: 720px) {
+  .image-wrapper {
+    grid-template-columns: 1fr;
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md
new file mode 100644
index 00000000000..76fc9e94610
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f693e0728f77c87f3020.md
@@ -0,0 +1,404 @@
+---
+id: 6148f693e0728f77c87f3020
+title: الخطوة ٧٩
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+قم بإنشاء query ثالث للـ `@media` لـ `only screen` مع `max-width` من `550px`. ضمنها، أنشئ منتقي `.hero-title` مع خاصية `font-size` بقيمة `6rem`, ومنتقي `.hero-subtitle, .author, .quote, .list-title` مع خاصية `font-size` بقيمة `1.8rem`, ومنتقي `.social-icons` مع خاصية `font-size` بقيمة `2rem`, ومنتقي `.text` مع خاصية `font-size` بقيمة `1.6rem`.
+
+# --hints--
+
+يجب أن يكون لديك query للـ `@media` جديد لـ `only screen` مع `max-width` من `550px`. يجب أن يأتي هذا بعد الاثنتين السابقتين.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.media?.mediaText === 'only screen and (max-width: 550px)');
+```
+
+يجب أن تحتوي قاعدتك `@media` الجديدة على منتقى `.hero-title` ومنتقى `.hero-subtitle, .author, .quote, .list-title` ومنتقي `.social-icons` ومنتقى `.text`. هذه الـ selectors يجب أن تكون بهذا الترتيب.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.selectorText === '.hero-title');
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.selectorText === '.hero-subtitle, .author, .quote, .list-title');
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.selectorText === '.social-icons');
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.selectorText === '.text');
+```
+
+يجب أن يكون لمنتقي `.hero-title` الخاص بك خاصية `font-size` بقيمة `6rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[0]?.style?.fontSize === '6rem');
+```
+
+يجب أن يكون لدى منتقي `.hero-subtitle, .author, .quote, .list-title` خاصية `font-size` بقيمة `1.8rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[1]?.style?.fontSize === '1.8rem');
+```
+
+يجب أن يكون لمنتقي `.social-icons` الخاص بك الخاصية `font-size` بقيمة `2rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[2]?.style?.fontSize === '2rem');
+```
+
+يجب أن يكون لمنتقي `.text` الخاص بك خاصية `font-size` بقيمة `1.6rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[2]?.cssRules?.[3]?.style?.fontSize === '1.6rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+.lists {
+  list-style-type: none;
+  margin-top: 2rem;
+}
+
+.lists li {
+  margin-bottom: 1.5rem;
+}
+
+.list-title, .list-subtitle {
+  color: #00beef;
+}
+
+.image-wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: repeat(3, min-content);
+  gap: 2rem;
+  place-items: center;
+}
+
+.image-1, .image-3 {
+  grid-column: 1 / -1;
+}
+
+@media only screen and (max-width: 720px) {
+  .image-wrapper {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .text-with-images {
+    grid-template-columns: 1fr;
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md
new file mode 100644
index 00000000000..e7563e47111
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6148f6f7d8914c78e93136ca.md
@@ -0,0 +1,780 @@
+---
+id: 6148f6f7d8914c78e93136ca
+title: الخطوة ٨٠
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+قم بإنشاء query اخير `@media` لـ `only screen` مع `max-width` من `420px`. داخلها، قم بإنشاء منتقي `.hero-title` مع `font-size` تم تعيينه إلى `4.5rem`.
+
+تهانينا! لقد اكتملت مجلتك الآن.
+
+# --hints--
+
+يجب أن يكون لديك `@media` جديد لـ `only screen and (max-width: 420px)`. يجب أن يكون هذا آخر query في قائمة `@media` للـ query.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.media?.mediaText, 'only screen and (max-width: 420px)');
+```
+
+يجب أن يحتوي query الـ `@media` الجديد على منتقى `.hero-title`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.cssRules?.[0]?.selectorText === '.hero-title');
+```
+
+يجب أن يكون لمنتقي `.hero-title` الخاص بك خاصية `font-size` بقيمة `4.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.[3]?.cssRules?.[0]?.style?.fontSize === '4.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+.lists {
+  list-style-type: none;
+  margin-top: 2rem;
+}
+
+.lists li {
+  margin-bottom: 1.5rem;
+}
+
+.list-title, .list-subtitle {
+  color: #00beef;
+}
+
+.image-wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: repeat(3, min-content);
+  gap: 2rem;
+  place-items: center;
+}
+
+.image-1, .image-3 {
+  grid-column: 1 / -1;
+}
+
+@media only screen and (max-width: 720px) {
+  .image-wrapper {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .text-with-images {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media only screen and (max-width: 550px) {
+  .hero-title {
+    font-size: 6rem;
+  }
+
+  .hero-subtitle,
+  .author,
+  .quote,
+  .list-title {
+    font-size: 1.8rem;
+  }
+
+  .social-icons {
+    font-size: 2rem;
+  }
+
+  .text {
+    font-size: 1.6rem;
+  } 
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+img {
+  width: 100%;
+  object-fit: cover;
+}
+
+hr {
+  margin: 1.5rem 0;
+  border: 1px solid rgba(120, 120, 120, 0.6);
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+  font-size: 1.8rem;
+  letter-spacing: 0.6px;
+  column-width: 25rem;
+  text-align: justify;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+
+.hero-title {
+  text-align: center;
+  color: orangered;
+  font-size: 8rem;
+}
+
+.hero-subtitle {
+  font-size: 2.4rem;
+  color: orangered;
+  text-align: center;
+}
+
+.author {
+  font-size: 2rem;
+  font-family: "Raleway", sans-serif;
+}
+
+.author-name a:hover {
+  background-color: #306203;
+}
+
+.publish-date {
+  color: rgba(255, 255, 255, 0.5);
+}
+
+.social-icons {
+  display: grid;
+  font-size: 3rem;
+  grid-template-columns: repeat(5, 1fr);
+  grid-auto-flow: column;
+  grid-auto-columns: 1fr;
+  align-items: center;
+}
+
+.first-paragraph::first-letter {
+  font-size: 6rem;
+  color: orangered;
+  float: left;
+  margin-right: 1rem;
+}
+
+.quote {
+  color: #00beef;
+  font-size: 2.4rem;
+  text-align: center;
+  font-family: "Raleway", sans-serif;
+}
+
+.quote::before {
+  content: '" ';
+}
+
+.quote::after {
+  content: ' "';
+}
+
+.text-with-images {
+  display: grid;
+  grid-template-columns: 1fr 2fr;
+  column-gap: 3rem;
+  margin-bottom: 3rem;
+}
+
+.lists {
+  list-style-type: none;
+  margin-top: 2rem;
+}
+
+.lists li {
+  margin-bottom: 1.5rem;
+}
+
+.list-title, .list-subtitle {
+  color: #00beef;
+}
+
+.image-wrapper {
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  grid-template-rows: repeat(3, min-content);
+  gap: 2rem;
+  place-items: center;
+}
+
+.image-1, .image-3 {
+  grid-column: 1 / -1;
+}
+
+@media only screen and (max-width: 720px) {
+  .image-wrapper {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media only screen and (max-width: 600px) {
+  .text-with-images {
+    grid-template-columns: 1fr;
+  }
+}
+
+@media only screen and (max-width: 550px) {
+  .hero-title {
+    font-size: 6rem;
+  }
+
+  .hero-subtitle,
+  .author,
+  .quote,
+  .list-title {
+    font-size: 1.8rem;
+  }
+
+  .social-icons {
+    font-size: 2rem;
+  }
+
+  .text {
+    font-size: 1.6rem;
+  } 
+}
+
+@media only screen and (max-width: 420px) {
+  .hero-title {
+    font-size: 4.5rem;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md
new file mode 100644
index 00000000000..c23b085c513
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e503b110f76d3ac2ff6.md
@@ -0,0 +1,256 @@
+---
+id: 614e0e503b110f76d3ac2ff6
+title: الخطوة ٤٣
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+يجب عليك إزالة السمة `width` المؤقتة قبل كتابة CSS لـ `.hero-img`.
+
+# --hints--
+
+يجب الا تحتوي `.hero-img` علي سمة `width`.
+
+```js
+assert.isNull(document.querySelector('.hero-img')?.getAttribute('width'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+--fcc-editable-region--
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+--fcc-editable-region--
+        </header>
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank" rel="noreferrer"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+        <div class="social-icons">
+          <a href="https://www.facebook.com/freecodecamp/">
+            <i class="fab fa-facebook-f"></i>
+          </a>
+          <a href="https://twitter.com/freecodecamp/">
+            <i class="fab fa-twitter"></i>
+          </a>
+          <a href="https://instagram.com/freecodecamp">
+            <i class="fab fa-instagram"></i>
+          </a>
+          <a href="https://www.linkedin.com/school/free-code-camp/">
+            <i class="fab fa-linkedin-in"></i>
+          </a>
+          <a href="https://www.youtube.com/freecodecamp">
+            <i class="fab fa-youtube"></i>
+          </a>
+        </div>
+      </section>
+      <section class="text">
+        <p class="first-paragraph">
+          Soon the freeCodeCamp curriculum will be 100% project-driven learning. Instead of a series of coding challenges, you'll learn through building projects - step by step. Before we get into the details, let me emphasize: we are not changing the certifications. All 6 certifications will still have the same 5 required projects. We are only changing the optional coding challenges.
+        </p>
+        <p>
+          After years - years - of pondering these two problems and how to solve them, I slipped, hit my head on the sink, and when I came to I had a revelation! A vision! A picture in my head! A picture of this! This is what makes time travel possible: the flux capacitor!
+        </p>
+        <p>
+          It wasn't as dramatic as Doc's revelation in Back to the Future. It
+          just occurred to me while I was going for a run. The revelation: the entire curriculum should be a series of projects. Instead of individual coding challenges, we'll just have projects, each with their own seamless series of tests. Each test gives you just enough information to figure out how to get it to pass. (And you can view hints if that isn't enough.)
+        </p>
+        <blockquote>
+          <hr />
+          <p class="quote">
+            The entire curriculum should be a series of projects
+          </p>
+          <hr />
+        </blockquote>
+        <p>
+          No more walls of explanatory text. No more walls of tests. Just one
+          test at a time, as you build up a working project. Over the course of passing thousands of tests, you build up projects and your own understanding of coding fundamentals. There is no transition between lessons and projects, because the lessons themselves are baked into projects. And there's plenty of repetition to help you retain everything because - hey - building projects in real life has plenty of repetition.
+        </p>
+        <p>
+          The main design challenge is taking what is currently paragraphs of explanation and instructions and packing them into a single test description text. Each project will involve dozens of tests like this. People will be coding the entire time, rather than switching back and forth from "reading mode" to "coding mode".
+        </p>
+        <p>
+          Instead of a series of coding challenges, people will be in their code editor passing one test after another, quickly building up a project. People will get into a real flow state, similar to what they experience when they build the required projects at the end of each certification. They'll get that sense of forward progress right from the beginning. And freeCodeCamp will be a much smoother experience.
+        </p>
+      </section>
+      <section class="text text-with-images">
+        <article class="brief-history">
+          <h3 class="list-title">A Brief History</h3>
+          <p>Of the Curriculum</p>
+          <ul class="lists">
+            <li>
+              <h4 class="list-subtitle">V1 - 2014</h4>
+              <p>
+                We launched freeCodeCamp with a simple list of 15 resources,
+                including Harvard's CS50 and Stanford's Database Class.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V2 - 2015</h4>
+              <p>We added interactive algorithm challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V3 - 2015</h4>
+              <p>
+                We added our own HTML+CSS challenges (before we'd been relying on
+                General Assembly's Dash course for these).
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V4 - 2016</h4>
+              <p>
+                We expanded the curriculum to 3 certifications, including Front
+                End, Back End, and Data Visualization. They each had 10 required
+                projects, but only the Front End section had its own challenges.
+                For the other certs, we were still using external resources like
+                Node School.
+              </p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V5 - 2017</h4>
+              <p>We added the back end and data visualization challenges.</p>
+            </li>
+            <li>
+              <h4 class="list-subtitle">V6 - 2018</h4>
+              <p>
+                We launched 6 new certifications to replace our old ones. This was
+                the biggest curriculum improvement to date.
+              </p>
+            </li>
+          </ul>
+        </article>
+        <aside class="image-wrapper">
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/random-quote-machine.png"
+            alt="image of the quote machine project"
+            loading="lazy"
+            class="image-1"
+            width="600"
+            height="400"
+          />
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/calc.png"
+            alt="image of a calculator project"
+            loading="lazy"
+            class="image-2"
+            width="400"
+            height="400"
+          />
+          <blockquote class="image-quote">
+            <hr />
+            <p class="quote">
+              The millions of people who are learning to code through freeCodeCamp
+              will have an even better resource to help them learn these
+              fundamentals.
+            </p>
+            <hr />
+          </blockquote>
+          <img
+            src="https://cdn.freecodecamp.org/testable-projects-fcc/images/survey-form-background.jpeg"
+            alt="four people working on code"
+            loading="lazy"
+            class="image-3"
+            width="600"
+            height="400"
+          />
+        </aside>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+*,
+::before,
+::after {
+  padding: 0;
+  margin: 0;
+}
+
+html {
+  font-size: 62.5%;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Baskervville', serif;
+  color: linen;
+  background-color: rgb(20, 30, 40);
+}
+
+h1 {
+  font-family: 'Anton', sans-serif;
+}
+
+h2, h3, h4, h5, h6 {
+  font-family: 'Raleway', sans-serif;
+}
+
+a {
+  text-decoration: none;
+  color: linen;
+}
+
+main {
+  display: grid;
+  grid-template-columns: minmax(2rem, 1fr) minmax(min-content, 94rem) minmax(2rem, 1fr);
+  row-gap: 3rem;
+}
+
+.heading {
+  grid-column: 2 / 3;
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  row-gap: 1.5rem;
+}
+
+.text {
+  grid-column: 2 / 3;
+}
+
+.hero {
+  grid-column: 1 / -1;
+  position: relative;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md
new file mode 100644
index 00000000000..515d99f88f5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/614e0e588f0e8a772a8a81a6.md
@@ -0,0 +1,69 @@
+---
+id: 614e0e588f0e8a772a8a81a6
+title: الخطوة ٦
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+تستحوذ صورتك حاليا على مساحة كبيرة. لرؤية ما تعمل عليه، أضف سمة `width` إلى `img` ، بقيمة `400`.
+
+سوف تقوم بإزالة هذا في وقت لاحق عندما تعمل على CSS.
+
+# --hints--
+
+يجب أن يكون لعنصر `img` الخاص بك سمة `width` بقيمة `400`.
+
+```js
+assert(document.querySelector('img')?.getAttribute('width') === '400');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+--fcc-editable-region--
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+      </section>
+    </main>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md
new file mode 100644
index 00000000000..1d2fa575ddd
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6165d3b702a5d92ad970b30c.md
@@ -0,0 +1,104 @@
+---
+id: 6165d3b702a5d92ad970b30c
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+بعد عنصر `img` الخاص بك، قم بإضافة عنصر `h1` مع `class` تم تعيينه إلى `hero-title` والنص المحدد إلى `OUR NEW CURRICULUM`، يتبعه عنصر `p` مع `class` تم تعيينه إلى `hero-subtitle` والنص المحدد إلى `Our efforts to restructure our curriculum with a more project-based focus`.
+
+# --hints--
+
+يجب إنشاء عنصر `h1`.
+
+```js
+assert.exists(document.querySelector('h1'));
+```
+
+عنصر `h1` الخاص بك يجب أن يأتي بعد عنصر `img` الخاص بك.
+
+```js
+assert(document.querySelector('h1')?.previousElementSibling?.localName === 'img');
+```
+
+يجب أن يحتوي عنصر `h1` الخاص بك على `class` بقيمة `hero-title`.
+
+```js
+assert(document.querySelector('h1')?.className === 'hero-title');
+```
+
+يجب أن يحتوي العنصر `h1` الخاص بك علي النص `OUR NEW CURRICULUM`.
+
+```js
+assert(document.querySelector('h1')?.textContent === 'OUR NEW CURRICULUM');
+```
+
+يجب عليك إنشاء عنصر `p` جديد.
+
+```js
+assert.exists(document.querySelector('p'));
+```
+
+عنصر `p` الخاص بك يجب أن يأتي بعد عنصر `h1` الخاص بك.
+
+```js
+assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1');
+```
+
+يجب أن يحتوي عنصر `p` الخاص بك على `class` بقيمة `hero-subtitle`.
+
+```js
+assert(document.querySelector('p')?.className === 'hero-subtitle');
+```
+
+عنصر `p` الخاص بك يجب أن يحتوي علي النص `Our efforts to restructure our curriculum with a more project-based focus`.
+
+```js
+assert.equal(document.querySelector('p')?.textContent?.trim()?.replace(/\s{2,}/, ' '), 'Our efforts to restructure our curriculum with a more project-based focus');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+--fcc-editable-region--
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+          />
+        </header>
+      </section>
+    </main>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md
new file mode 100644
index 00000000000..dec1637688d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-grid-by-building-a-magazine/6169cd8a558aa8434e0ad7f6.md
@@ -0,0 +1,77 @@
+---
+id: 6169cd8a558aa8434e0ad7f6
+title: الخطوة ٨
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+يحتوي HTTP header يدعي `Referer` على معلومات حول عنوان أو URL لصفحة قد يزورها المستخدم. يمكن استخدام هذه المعلومات في التحليلات لتتبع عدد المستخدمين من صفحتك الذين يزورون موقع freecodecamp.org ، على سبيل المثال. يؤدي تعيين السمة `rel` إلى `noreferrer` إلى حذف هذه المعلومات من HTTP request. أعطِ عنصر `a` السمة `rel` تم تعيينها إلى `noreferrer`.
+
+# --hints--
+
+عنصر `a` الخاص بك يجب أن يحتوي على `rel` بقيمة `noreferrer`.
+
+```js
+assert(document.querySelector('div')?.querySelector('p')?.firstElementChild?.getAttribute('rel') === 'noreferrer');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Magazine</title>
+    <link
+      href="https://fonts.googleapis.com/css?family=Anton%7CBaskervville%7CRaleway&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      rel="stylesheet"
+      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
+    />
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <main>
+      <section class="heading">
+        <header class="hero">
+          <img
+            src="https://cdn.freecodecamp.org/platform/universal/fcc_meta_1920X1080-indigo.png"
+            alt="freecodecamp logo"
+            loading="lazy"
+            class="hero-img"
+            width="400"
+          />
+          <h1 class="hero-title">OUR NEW CURRICULUM</h1>
+          <p class="hero-subtitle">
+            Our efforts to restructure our curriculum with a more project-based
+            focus
+          </p>
+        </header>
+--fcc-editable-region--
+        <div class="author">
+          <p class="author-name">
+            By
+            <a href="https://freecodecamp.org" target="_blank"
+              >freeCodeCamp</a
+            >
+          </p>
+          <p class="publish-date">March 7, 2019</p>
+        </div>
+      </section>
+    </main>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md
new file mode 100644
index 00000000000..d6597fe06d8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619665c9abd72906f3ad30f9.md
@@ -0,0 +1,134 @@
+---
+id: 619665c9abd72906f3ad30f9
+title: الخطوة ١
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+سوف تكوم ببناء Flappy Penguin سعيد، ومواصلة استكشاف تحولات(transition) في CSS والمتحركات (animations) في هذه العملية.
+
+ابدأ بمستند HTML المعتاد الخاص بك. أضف `DOCTYPE`, مع عنصر `html` مع تعين لغة الصفحة إلى الإنجليزية, وأضف `meta` تحمل وسم (tags) المناسبة, و عناصر `head`, و `body`, و `title`. أيضا أربط ورقة أسلوبك (stylesheet) إلى الصفحة.
+
+# --hints--
+
+يجب أن يحتوي الكود على إعلان `<!DOCTYPE html>`.
+
+```js
+assert(code.match(/<!DOCTYPE html>/i));
+```
+
+يجب أن يحتوي كودك على عنصر `html`.
+
+```js
+assert.equal(document.querySelectorAll('html')?.length, 1);
+```
+
+يجب أن يحتوي عنصرك `html` على علامة افتتاحية مع خاصية `lang` من `en`.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+يجب أن يحتوي عنصرك `html` على وسم الأغلاق.
+
+```js
+assert(code.match(/<\/html\s*>/gi));
+```
+
+يجب أن يحتوي كودك على عنصر `head` داخل عنصر `html`.
+
+```js
+assert.equal(document.querySelectorAll('head')?.length, 1);
+```
+
+يجب أن يحتوي كودك على عنصر `body` داخل عنصر `html`.
+
+```js
+assert.equal(document.querySelectorAll('body')?.length, 1);
+```
+
+يجب أن يأتي عنصرك `head` قبل عنصر `body` الخاص بك.
+
+```js
+assert.equal(document.querySelector('body')?.previousElementSibling?.tagName, 'HEAD');
+```
+
+يجب أن يكون لديك عنصران `meta`.
+
+```js
+const meta = document.querySelectorAll('meta');
+assert.equal(meta?.length, 2);
+```
+
+يجب أن يحتوي أحد عناصر `meta` على `name` بقيمة `viewport`، و `content` بقيمة `width=device-width, initial-scale=1.0`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset'));
+assert.exists(target);
+```
+
+يجب أن يحتوي عنصر `meta` الآخر على سمة `charset` بقيمة `UTF-8`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
+assert.exists(target);
+```
+
+يجب أن يحتوي كودك على عنصر `title`.
+
+```js
+const title = document.querySelector('title');
+assert.exists(title);
+```
+
+يجب أحتواء `title` إلى نص.
+
+```js
+const title = document.querySelector('title');
+assert.isAtLeast(title?.textContent?.length, 1);
+```
+
+يجب أن يحتوي كودك على عنصر `link`.
+
+```js
+assert.exists(document.querySelector('link'));
+```
+
+يجب أن يكون عنصرك `link` داخل عنصرك `head`.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i));
+```
+
+يجب أن يحتوي عنصرك `link` على سمة `rel` بقيمة `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+يجب أن يحتوي عنصرك `link` على سمة `href` بقيمة `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md
new file mode 100644
index 00000000000..a08e8ae7d23
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61967e74a8e3690ab6292daa.md
@@ -0,0 +1,56 @@
+---
+id: 61967e74a8e3690ab6292daa
+title: الخطوة 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+أستهدف عنصر `body` وحدد قيمة خاصية `background` ألى التدريج الخطي (linear gradient) بزاوية 45 دراجة (degrees) مع اتجاه عقارب الساعة (clockwise), بَدْء من `rgb(118, 201, 255)` و إنهاء من `rgb(247, 255, 222)`.
+
+# --hints--
+
+يجب عليك استخدام منتقي العنصر `body`.
+
+```js
+assert.match(code, /body\s*\{/);
+```
+
+يجب عليك إضافة `background` داخل منتقي العنصر `body`.
+
+```js
+assert.isTrue(new __helpers.CSSHelp(document).isPropertyUsed('background'));
+```
+
+يجب عليك تعيين `background` إلى`linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222))`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(118,201,255),rgb(247,255,222))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md
new file mode 100644
index 00000000000..b6f6cde46d6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968df2acd5550bf1616c34.md
@@ -0,0 +1,53 @@
+---
+id: 61968df2acd5550bf1616c34
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+قم بضبط قيم الحجم في صفحتك، بواسطة إزالة عناصر `body` الاتية، `margin`، و `padding`.
+
+# --hints--
+
+يجب عليك إعطاء `body` الـ `margin` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+يجب عليك إعطاء `body` الـ `padding` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.padding, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md
new file mode 100644
index 00000000000..c23063af8bc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968e9243a4090cc805531c.md
@@ -0,0 +1,51 @@
+---
+id: 61968e9243a4090cc805531c
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+إزالة كل من شريط التمرير الأفقي والرأسي (horizontal and vertical scrollbars), ومنع التمرير (scrolling) البرنامجي باستخدام خاصية واحدة فقط.
+
+# --hints--
+
+يجب عليك إعطاء `body` خاصية `overflow` بقيمة `clip`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'clip');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md
new file mode 100644
index 00000000000..862cc35faa8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61968f8877c6720d6d61aaf5.md
@@ -0,0 +1,64 @@
+---
+id: 61968f8877c6720d6d61aaf5
+title: الخطوة ٦
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+بداخل عنصر `body`، اضف `div` مع `class` يسمي `ground`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` جديد.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+يجب عليك إعطاء عنصر `div` الـ `class` بقيمة `ground`.
+
+```js
+assert.include(document.querySelector('div')?.className, 'ground');
+```
+
+يجب عليك إضافة `div` داخل `body`.
+
+```js
+assert.exists(document.querySelector('body > div.ground'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md
new file mode 100644
index 00000000000..bb41650473e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619691693bc14b0e528f5a20.md
@@ -0,0 +1,66 @@
+---
+id: 619691693bc14b0e528f5a20
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+استهدف عنصر `.ground`, وتعيين عرض `width` لأخذ العرض الكامل من نافذة العرض (viewport). يجب عليك تعيين خاصية `height` بقيمة `400px`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.ground`.
+
+```js
+assert.match(code, /\.ground\s*\{/);
+```
+
+يجب عليك إعطاء عنصر `.ground` خاصية `width` بقيمة `100vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.width, '100vw');
+```
+
+يجب عليك إعطاء عنصر `.ground` خاصية `height` بقيمة `400px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.height, '400px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md
new file mode 100644
index 00000000000..7bec0dd2379
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196928658b6010f28c39484.md
@@ -0,0 +1,58 @@
+---
+id: 6196928658b6010f28c39484
+title: الخطوة ٨
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+أستهدف عنصر `.ground` و حدد قيمة خاصية `background` ألى التدريج الخطي بزاوية 90 دراجة مع اتجاه عقارب الساعة, بَدْء من `rgb(88, 175, 236)` و إنهاء من `rgb(182, 255, 255)`.
+
+# --hints--
+
+يجب عليك إعطاء `.ground` خاصية `background` من `linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255))`.
+
+```js
+assert.include(['linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))', 'rgba(0,0,0,0)linear-gradient(90deg,rgb(88,175,236),rgb(182,255,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md
new file mode 100644
index 00000000000..eabfba51656
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619692ff79f5770fc6d8c0b4.md
@@ -0,0 +1,73 @@
+---
+id: 619692ff79f5770fc6d8c0b4
+title: الخطوة ١٠
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+على أعلي عنصر `.ground`، ضف `div` مع `class` يسمي `penguin`. هذا `div` سوف يحتوي على بِطْرِيق فلابي.
+
+# --hints--
+
+يجب عليك إضافة `div` جديد داخل `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 2);
+```
+
+يجب عليك إعطاء عنصر `div` الـ `class` بقيمة `penguin`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground)')?.className, 'penguin');
+```
+
+يجب عليك وضع `div.penguin` قبل `div.ground`.
+
+```js
+assert.strictEqual(document.querySelector('.ground')?.previousElementSibling, document.querySelector('.penguin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md
new file mode 100644
index 00000000000..d7ce65ad821
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196990f966e8f10a40094f6.md
@@ -0,0 +1,75 @@
+---
+id: 6196990f966e8f10a40094f6
+title: الخطوة ١١
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+استهدف عنصر `.penguin` وعيّن `width` و `height` إلى `300px`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.penguin`.
+
+```js
+assert.match(code, /\.penguin\s*\{/);
+```
+
+يجب عليك إعطاء `.penguin` الـ `width` بقيمة `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.width, '300px');
+```
+
+يجب عليك إعطاء `.penguin` الـ `height` بقيمة `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.height, '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md
new file mode 100644
index 00000000000..751091101e4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619699c10a0f6e11591d73c4.md
@@ -0,0 +1,74 @@
+---
+id: 619699c10a0f6e11591d73c4
+title: الخطوة ١٢
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+استخدم خاصية `margin` لوضع عنصر `.penguin` في مركز أفقي، وتعيين `margin-top` بقيمة `75px`.
+
+# --hints--
+
+بداخل عنصر `.penguin` يجب أن تكون خاصية `margin` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginRight, 'auto');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginLeft, 'auto');
+```
+
+بداخل عنصر `.penguin` يجب أن تكون خاصية `margin-top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.marginTop, '75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md
new file mode 100644
index 00000000000..300fb13752f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969aa6acef5b12200f672e.md
@@ -0,0 +1,83 @@
+---
+id: 61969aa6acef5b12200f672e
+title: الخطوة 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+لإنشاء شيء من المنظر في الخلفية، ستضيف جبلين.
+
+قبل عنصر `.penguin`، أضف عنصر `div` فيه سمة `class` تساوي `left-mountain`.
+
+# --hints--
+
+ينبغي أن تضيف `div` جديدا داخل `body`. توقّعت رؤية `--fcc-expected--` عناصر `div`، لكن وجدت `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 3);
+```
+
+ينبغي إعطاء `div` سمة `class` تساوي `left-mountain`.
+
+```js
+assert.include(document.querySelector('body > div:not(.ground, .penguin)')?.className, 'left-mountain');
+```
+
+ينبغي أن تجعل `.left-mountain` قبل `.penguin`.
+
+```js
+assert.strictEqual(document.querySelector('.penguin')?.previousElementSibling, document.querySelector('.left-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md
new file mode 100644
index 00000000000..59930e56145
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969c487ced6f12db8fef94.md
@@ -0,0 +1,89 @@
+---
+id: 61969c487ced6f12db8fef94
+title: الخطوة ١٤
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+استهدف عنصر `.left-mountain` وعيّن `width` و `height` إلى `300px`. ثم قم بتعيين `background` إلى متدرج خطي (linear gradient) يبدأ في `rgb(203, 241, 228)` وينتهي في `rgb(80, 183, 255)`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.left-mountain`.
+
+```js
+assert.match(code, /\.left-mountain\s*\{/);
+```
+
+يجب عليك إعطاء `.left-mountain` الـ `width` بقيمة `300px`. توقّعت `--fcc-actual--` أن تكون `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.width, '300px');
+```
+
+يجب عليك إعطاء `.left-mountain` الـ `height` بقيمة `300px`. توقّعت `--fcc-actual--` أن تكون `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.height, '300px');
+```
+
+يجب عليك إعطاء `.left-mountain` خاصية `background` من `linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(80,183,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(80,183,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md
new file mode 100644
index 00000000000..a85558259fc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969d66cfcdba137d021558.md
@@ -0,0 +1,76 @@
+---
+id: 61969d66cfcdba137d021558
+title: خطوة ١٥
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+لمنع الجبل من دفع عنصر `.ground`، أضبط `position` لمنعه من أخذ مساحة في تصميم الصفحة.
+
+# --hints--
+
+يجب أن تعطي `.left-mountain` خاصية `position` بقيمة `absolute`. توقّعت `--fcc-actual--` أن تكون بقيمة `--fcc-expected--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md
new file mode 100644
index 00000000000..32276832136
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61969e7451455614217e901b.md
@@ -0,0 +1,91 @@
+---
+id: 61969e7451455614217e901b
+title: الخطوة ١٦
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+لجعل عناصر الجبال تبدو أشبه بالجبل حقاٌ، يمكنك استخدام خاصية التحويل `skew`، التي تأخذ حجيتين (arguments). الأولى هي زاوية لجزّ (shear) المحور الأفقي (x-axis)، والثانية هي زاوية لجزّ (shear) المحور الرأسي (y-axis).
+
+استخدم خاصية `transform` لجعل الجبل منحرف بـ `0deg` في المحور الأفقي (x-axis)، و `44deg` في المحور الرأسي (y-axis).
+
+# --hints--
+
+يجب عليك إعطاء عنصر `.left-mountain` خاصية الـ `transform`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform);
+```
+
+قم باستخدام `skew` على `transform`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.transform, 'skew');
+```
+
+يجب عليك إعطاء `.left-mountain` خاصية `transform` بقيمة `skew(0deg, 44deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.getPropVal('transform', true), 'skew(0deg,44deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md
new file mode 100644
index 00000000000..f56fb624606
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196adc17f77a714d51485f2.md
@@ -0,0 +1,90 @@
+---
+id: 6196adc17f77a714d51485f2
+title: الخطوة ١٧
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+قم بتعيين مستوى التكديس (stack level) لعنصر الجبال (mountain) بحيث يبقى خلف عنصر `.ground` مباشرة.
+
+# --hints--
+
+يجب عليك استخدام خاصية `z-index` لتغيير مستوي الترتيب.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex);
+```
+
+يجب عليك تعيين خاصية `z-index` إلى `2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+لا يجب عليك تغيير `z-index` لعنصر `.ground`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md
new file mode 100644
index 00000000000..1195ea3a443
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196aead7ac7bf1584b17a7f.md
@@ -0,0 +1,86 @@
+---
+id: 6196aead7ac7bf1584b17a7f
+title: الخطوة ١٨
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+لجعل عنصر الجبل متشابك مع `.ground` عنصر بشكل أفضل، أعط الجبل `margin-top` من `100px`، و `.ground` عنصر `margin-top` من `-58px`.
+
+# --hints--
+
+يجب عليك إعطاء `.left-mountain` خاصية `margin-top` بقيمة `100px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.marginTop, '100px');
+```
+
+يجب عليك إعطاء `.ground` خاصية `margin-top` بقيمة `-58px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.marginTop, '-58px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+--fcc-editable-region--
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md
new file mode 100644
index 00000000000..4812150d220
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196ce0415498d2463989e84.md
@@ -0,0 +1,92 @@
+---
+id: 6196ce0415498d2463989e84
+title: الخطوة ١٩
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+لإعطاء تأثير سلسلة الجبال، أضف جبل آخر، عن طريق إنشاء عنصر `div` جديد بعد `.left-mountain` مباشرةُ، وإعطاء عنصر `div` بحمل `class` من `back-mountain`.
+
+# --hints--
+
+يجب عليك إضافة `div` جديد داخل `body`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 4);
+```
+
+يجب عليك إعطاء عنصر `div` سمة `class` بقيمة `back-mountain`.
+
+```js
+assert.include(document.querySelector('div:not(.left-mountain, .ground, .penguin)')?.className, 'back-mountain');
+```
+
+يجب عليك وضع `.back-mountain` بعد `.left-mountain`.
+
+```js
+assert.strictEqual(document.querySelector('.left-mountain')?.nextElementSibling, document.querySelector('.back-mountain'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md
new file mode 100644
index 00000000000..6b7c33f4682
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196cee94c6da1253809dff9.md
@@ -0,0 +1,100 @@
+---
+id: 6196cee94c6da1253809dff9
+title: الخطوة ٢٠
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+استهدف عنصر `.back-mountain` وعيّن `width` و `height` إلى `300px`. ثم عيّن `background` إلى التدريج الخطي (linear gradient) يبدأ في `rgb(203, 241, 228)`, وينتهي في `rgb(47, 170, 255)`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.back-mountain`.
+
+```js
+assert.match(code, /\.back-mountain\s*\{/);
+```
+
+يجب عليك إعطاء `.back-mountain` خاصية `width` بقيمة `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.width, '300px');
+```
+
+يجب عليك إعطاء `.back-mountain` خاصية `height` بقيمة `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.height, '300px');
+```
+
+يجب عليك إعطاء `.back-mountain` خاصية `background` من `linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255))`.
+
+```js
+assert.include(['linear-gradient(rgb(203,241,228),rgb(47,170,255))', 'rgba(0,0,0,0)linear-gradient(rgb(203,241,228),rgb(47,170,255))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.back-mountain')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md
new file mode 100644
index 00000000000..523725192b0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d00a5d7292262bc02f4c.md
@@ -0,0 +1,87 @@
+---
+id: 6196d00a5d7292262bc02f4c
+title: الخطوة ٢١
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+عيّن خاصية `position` إلى `.back-mountain` لمنعها من أخذ مساحة في تصميم الصفحة.
+
+# --hints--
+
+يجب أن تعطي `.back-mountain` خاصية `position` بقيمة `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md
new file mode 100644
index 00000000000..25bcb1285f3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d0cda039d026f7f78d1e.md
@@ -0,0 +1,100 @@
+---
+id: 6196d0cda039d026f7f78d1e
+title: الخطوة ٢٢
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+قم بتغيير مستوى الترتيب لعنصر `.back-mountain` بحيث يبقى خلف عنصر `.left-mountain`.
+
+# --hints--
+
+يجب عليك استخدام خاصية `z-index` لتغيير مستوي الترتيب.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex);
+```
+
+يجب عليك تعيين خاصية `z-index` إلى `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.zIndex, '1');
+```
+
+لا يجب عليك تغيير `z-index` لعنصر `.left-mountain`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.left-mountain')?.zIndex, '2');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md
new file mode 100644
index 00000000000..18b34a063aa
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d1ac33c68d27dcda5796.md
@@ -0,0 +1,119 @@
+---
+id: 6196d1ac33c68d27dcda5796
+title: الخطوة ٢٣
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+تدوير عنصر `.back-mountain` بقيمة `45deg` على مدار عقارب الساعة. وعيّن خاصية `left` إلى `110px` و خاصية <`top` إلى `225px`.
+
+# --hints--
+
+يجب عليك استخدام خاصية `transform` لدوران العنصر.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform);
+```
+
+يجب أعطاء منقي `.back-mountain` خاصية `transform` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.transform, 'rotate(45deg)');
+```
+
+يجب عليك إعطاء عنصر `.back-mountain` خاصية `left`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left);
+```
+
+يجب أن إعطاء عنصر `.back-mountain` خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.left, '110px');
+```
+
+يجب عليك إعطاء عنصر `.back-mountain` خاصية `top`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top);
+```
+
+يجب عليك إعطاء عنصر `.back-mountain` خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.back-mountain')?.top, '225px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+--fcc-editable-region--
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md
new file mode 100644
index 00000000000..58966c0c3ad
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d213d99f16287bff22ae.md
@@ -0,0 +1,104 @@
+---
+id: 6196d213d99f16287bff22ae
+title: الخطوة ٢٤
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+لإنهاء الخلفية، أضف شمس، بواسطة إنشاء عنصر `div` جديد مباشرةّ بعد عنصر `.back-mountain`، وقم بإعطائه فئة `sun`.
+
+# --hints--
+
+يجب عليك إضافة `div` جديد إلى `body`. متوقع قيمة `--fcc-expected--` داخل عنصر `div`، لكن وجد `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('body > div')?.length, 5);
+```
+
+يجب عليك إعطاء عنصر `div` الـ `class` بقيمة `sun`.
+
+```js
+assert.include(document.querySelector('div:not(.back-mountain, .left-mountain, .penguin, .ground)')?.className, 'sun');
+```
+
+يجب عليك وضع عنصر `div` جديد بعد عنصر `.back-mountain`.
+
+```js
+assert.strictEqual(document.querySelector('div.back-mountain')?.nextElementSibling, document.querySelector('div.sun'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+--fcc-editable-region--
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md
new file mode 100644
index 00000000000..4452435ce6d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d2c0f22ca0293107c048.md
@@ -0,0 +1,112 @@
+---
+id: 6196d2c0f22ca0293107c048
+title: خطوة ٢٥
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+اعطي عنصر `.sun` الخاصية `width` و `height` بقيمتا `200px` وخاصية `background-color` بقيمة `yellow`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.sun`.
+
+```js
+assert.match(code, /\.sun\s*\{/);
+```
+
+يجب عليك إعطاء `.sun` الـ `width` بقيمة `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.width, '200px');
+```
+
+يجب عليك إعطاء `.sun` الـ `height` بقيمة `200px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.height, '200px');
+```
+
+يجب عليك إعطاء `.sun` الـ `background-color` بقيمة `yellow`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.backgroundColor, 'yellow');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md
new file mode 100644
index 00000000000..4abf3daddb7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d32d1340d829f0f6f57d.md
@@ -0,0 +1,105 @@
+---
+id: 6196d32d1340d829f0f6f57d
+title: الخطوة ٢٦
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+عيّن خاصية `position` للشمس لمنعها من أخذ مساحة في تخطيط الصفحة، وتعيين `border-radius` بحيث تكون الشمس دائرة.
+
+# --hints--
+
+يجب أن تعطي `.sun` خاصية `position` بقيمة `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.position, 'absolute');
+```
+
+يجب أن تعطي `.sun` خاصية `border-radius` بقيمة `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md
new file mode 100644
index 00000000000..6c3a2dd11a5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6196d41d40bf9b2aaea5d520.md
@@ -0,0 +1,107 @@
+---
+id: 6196d41d40bf9b2aaea5d520
+title: الخطوة ٢٧
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+ضع الشمس في الزاوية العلوية اليمنى من الشاشة بحيث أن `75px` من حوافها العلوية واليمينية خارج الشاشة.
+
+# --hints--
+
+بداخل عنصر `.sun` يجب أن تكون خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.top, '-75px');
+```
+
+بداخل منتقي `.sun` يجب أن تكون خاصية `right` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.sun')?.right, '-75px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin"></div>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+--fcc-editable-region--
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md
new file mode 100644
index 00000000000..aa4f0ef3392
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197cff995d03905b0cca8ad.md
@@ -0,0 +1,118 @@
+---
+id: 6197cff995d03905b0cca8ad
+title: الخطوة ٢٨
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+سيتألف البِطْرِيق الخاص بك من قسمين رئيسين: الرأس والجسد.
+
+داخل `.penguin`، أضف عنصرين جديدين `div`. الأول عنصر به `class` من `penguin-head`, والثاني عنصر به `class` من `penguin-body`.
+
+# --hints--
+
+يجب عليك إضافة عنصرين `div` إلى `.penguin`. متوقع عدد `--fcc-expected--` من عناصر `.penguin > div`، لكن وجد `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 2);
+```
+
+يجب عليك إعطاء أول عنصر `div` الـ `class` بقيمة `penguin-head`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(1)')?.className, 'penguin-head');
+```
+
+يجب عليك إعطاء ثاني عنصر `div` الـ `class` بقيمة `penguin-body`.
+
+```js
+assert.include(document.querySelector('.penguin > div:nth-of-type(2)')?.className, 'penguin-body');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+--fcc-editable-region--
+    <div class="penguin">
+
+    </div>
+--fcc-editable-region--
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md
new file mode 100644
index 00000000000..9ec9013765f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f40a16afea068c7e60c8.md
@@ -0,0 +1,125 @@
+---
+id: 6197f40a16afea068c7e60c8
+title: الخطوة ٢٩
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+تغيير مستوى الترتيب لعنصر `.penguin` بحيث يظهر أمام `.ground` عنصر، وإعطاؤه `position` بقيمة `relative`.
+
+# --hints--
+
+يجب عليك استخدام خاصية `z-index` لتغيير مستوي الترتيب.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex);
+```
+
+يجب عليك إعطاء `.penguin` خاصية `z-index` بقيمة `4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.zIndex, '4');
+```
+
+يجب عليك إعطاء عنصر `.penguin` خاصية `position`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin')?.position);
+```
+
+يجب أن تعطي `.penguin` خاصية `position` بقيمة `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.position, 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md
new file mode 100644
index 00000000000..f79d7e3cadd
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6197f667297bb30a552ce017.md
@@ -0,0 +1,65 @@
+---
+id: 6197f667297bb30a552ce017
+title: الخطوة ٩
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+بما ان عنصر `.ground` سيكون الثالث في سياق التكدس لمخطط الصفحة (page layout)، عيَن `z-index` بقيمة `3`، و خاصية `position` بقيمة `absolute`.
+
+# --hints--
+
+يجب عليك إعطاء `.ground` الـ `z-index` بقيمة `3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.zIndex, '3');
+```
+
+يجب أن تعطي `.ground` خاصية `position` بقيمة `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.ground')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md
new file mode 100644
index 00000000000..70b8731f06f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993b72e874e709b8dfd666.md
@@ -0,0 +1,128 @@
+---
+id: 61993b72e874e709b8dfd666
+title: الخطوة ٣٠
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+استهدف عنصر `.penguin-head` وعيّن `width` بقيمة نصف قيمة العنصر الحاوي, و `height` إلى `45%`. ثم عيّن `background` إلى متدرج خطي (linear gradient) بدارجة `45deg` يبدأ في `gray` وينتهي في `rgb(239, 240, 228)`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.penguin-head`.
+
+```js
+assert.match(code, /\.penguin-head\s*\{/);
+```
+
+يجب عليك إعطاء `.penguin-head` خاصية `width` بقيمة `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.width, '50%');
+```
+
+يجب عليك إعطاء `.penguin-head` خاصية `height` بقيمة `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.height, '45%');
+```
+
+يجب عليك إعطاء `.penguin-head` خاصية `background` من `linear-gradient(45deg, gray, rgb(239, 240, 228))`.
+
+```js
+assert.include(['linear-gradient(45deg,gray,rgb(239,240,228))', 'rgba(0,0,0,0)linear-gradient(45deg,gray,rgb(239,240,228))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md
new file mode 100644
index 00000000000..1d970f4232a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993cf26a8e0f0a553db223.md
@@ -0,0 +1,122 @@
+---
+id: 61993cf26a8e0f0a553db223
+title: الخطوة ٣١
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+_معظم_ طيور البطّارِيق ليس لديها رأس مربعة.
+
+أعطِ البطْرِيق رأسا بيضوي طفيفا عن طريق تعيين نصف قطر الزاوية العلوية إلى `70%` ونصف قطر الزاوية السفلى إلى `65%`.
+
+# --hints--
+
+يجب أن تعطي `.penguin-head` الـ `border-radius` بقيمة `70% 70% 65% 65%`.
+
+```js
+// Maybe check for individual border-radius properties?
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.borderRadius, '70% 70% 65% 65%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md
new file mode 100644
index 00000000000..a8db9cb182a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993dbb35adf30b10d49e38.md
@@ -0,0 +1,139 @@
+---
+id: 61993dbb35adf30b10d49e38
+title: الخطوة ٣٢
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+استهدف عنصر `.penguin-body` وعيّن `width` بقيمة `53%`, و `height` إلى `45%`. ثم عيّن `background` إلى linear gradient في `45deg`، وللون بقيمة `rgb(134, 133, 133)` يبدأ من `0%`, وللون `rgb(234, 231, 231)` من `25%` و `white` من `67%`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.penguin-body`.
+
+```js
+assert.match(code, /\.penguin-body\s*\{/);
+```
+
+بداخل منتقي `.penguin-body` يجب أن تكون خاصية `width` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.width, '53%');
+```
+
+بداخل منتقي `.penguin-body` يجب أن تكون خاصية `height` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.height, '45%');
+```
+
+يجب عليك إعطاء `.penguin-body` خاصية `background` من `linear-gradient(45deg, rgb(134, 133, 133) 0%, rgb(234, 231, 231) 25%, white 67%)`.
+
+```js
+assert.include(['linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)', 'rgba(0,0,0,0)linear-gradient(45deg,rgb(134,133,133)0%,rgb(234,231,231)25%,white67%)repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md
new file mode 100644
index 00000000000..d8bdf8fdef5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61993e9adc9e9a0bb4d28fff.md
@@ -0,0 +1,133 @@
+---
+id: 61993e9adc9e9a0bb4d28fff
+title: الخطوة 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+وهناك حقيقة أخرى مثيرة للاهتمام بشأن طيور البَطّارِيق وهي أنهم لا تملك أجْسدا مربعا.
+
+استخدام خاصية `border-radius` بقيمة `80% 80% 100% 100%`, لإعطاء البِطْرِيق جسم مستدير قليلاً.
+
+# --hints--
+
+يجب أن تعطي `.penguin-body` خاصية `border-radius` بقيمة `80% 80% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.borderRadius, '80% 80% 100% 100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md
new file mode 100644
index 00000000000..3680544385d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199409834ccaf0d10736596.md
@@ -0,0 +1,139 @@
+---
+id: 6199409834ccaf0d10736596
+title: الخطوة ٣٤
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+أستهدف كل احفاد عنصر `.penguin`، وأعطهم خاصية `position` بقيمة `absolute`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.penguin *`.
+
+```js
+assert.match(code, /\.penguin\s*\*\s*\{/);
+```
+
+يجب أن تعطي `.penguin *` خاصية `position` بقيمة `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin *')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md
new file mode 100644
index 00000000000..4fcbe793769
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199429802b7c10dc79ff871.md
@@ -0,0 +1,154 @@
+---
+id: 6199429802b7c10dc79ff871
+title: الخطوة ٣٥
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+وضع العنصر `.penguin-head` في `10%` من الأعلى, و `25%` من يسار العنصر الحاوي.
+
+# --hints--
+
+يجب عليك إعطاء عنصر `.penguin-head` خاصية `top`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top);
+```
+
+يجب أن تكون بداخل عنصر `.penguin-head` خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.top, '10%');
+```
+
+يجب عليك إعطاء عنصر `.penguin-head` خاصية `left`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left);
+```
+
+يجب أن تكون بداخل عنصر `.penguin-head` خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md
new file mode 100644
index 00000000000..5bea37034bb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943285a41720e6370d985.md
@@ -0,0 +1,156 @@
+---
+id: 619943285a41720e6370d985
+title: الخطوة ٣٦
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+قم بوضع العنصر `.penguin-body` في `40%` من الأعلى(top), و `23.5%` من يسار(left) والده(parent).
+
+# --hints--
+
+يجب عليك إعطاء عنصر `.penguin-body` خاصية الـ `top`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top);
+```
+
+بداخل عنصر `.penguin-body` يجب أن تكون خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.top, '40%');
+```
+
+يجب عليك إعطاء عنصر `.penguin-body` خاصية الـ `left`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left);
+```
+
+بداخل عنصر `.penguin-body` يجب أن تكون خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.left, '23.5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+}
+
+--fcc-editable-region--
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md
new file mode 100644
index 00000000000..0c0c22164f7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619943876b706d0f35c01dbc.md
@@ -0,0 +1,146 @@
+---
+id: 619943876b706d0f35c01dbc
+title: الخطوة ٣٧
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+غير ترتيب مستوي للعناصر `.penguin-head` بحيث تظهر أمام عنصر `.penguin-body`.
+
+# --hints--
+
+يجب عليك استخدام خاصية `z-index` لتغيير مستوي الترتيب.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex);
+```
+
+يجب عليك إعطاء `.penguin-head` خاصية `z-index` بقيمة `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md
new file mode 100644
index 00000000000..a5ace1cb331
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/6199442866286d0ff421a4fc.md
@@ -0,0 +1,148 @@
+---
+id: 6199442866286d0ff421a4fc
+title: الخطوة ٣٨
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+لإعطاء جسم البِطْرِيق صدر, أنشء عنصر زائف (pseudo-element) يكون أول فرع من عنصر `.penguin-body`. حدد قيمة خاصية `content` في العنصر الزائف إلي قيمة المقطع الفارغ (empty string).
+
+# --hints--
+
+يجب عليك استخدام منتقي `.penguin-body::before`.
+
+```js
+assert.match(code, /\.penguin-body::before\s*\{/);
+```
+
+يجب أن تعطي `.penguin-body::before` خاصية `content` بقيمة `""`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.content, '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md
new file mode 100644
index 00000000000..4f0e0859590
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619bcf239fc15905ecd66fce.md
@@ -0,0 +1,145 @@
+---
+id: 619bcf239fc15905ecd66fce
+title: الخطوة ٣٩
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+قم بوضع العنصر الزائف (pseudo-element) بالنسبة (relative) لسلفه الأقرب (positioned ancestor).
+
+# --hints--
+
+يجب أن تعطي `.penguin-body::before` الـ `position` بقيمة `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.position, 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md
new file mode 100644
index 00000000000..ec6313996ea
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be73b3c806006ccc00bb0.md
@@ -0,0 +1,158 @@
+---
+id: 619be73b3c806006ccc00bb0
+title: الخطوة ٤٠
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+اعطي عنصر زائف الخاصية `width` نصف عرض عنصر الحاوي، و`height` بقيمة `45%`، و `background-color` بقيمة `gray`.
+
+# --hints--
+
+يجب أن تعطي `.penguin-body::before` خاصية `width` بقيمة `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.width, '50%');
+```
+
+يجب أن تعطي `.penguin-body::before` خاصية `height` بقيمة `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.height, '45%');
+```
+
+بداخل عنصر الزائف `.penguin-body::before` يجب أن تكون خاصية `background-color` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.backgroundColor, 'gray');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md
new file mode 100644
index 00000000000..46491afc69c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be7af7b0bf60770f5d2a4.md
@@ -0,0 +1,155 @@
+---
+id: 619be7af7b0bf60770f5d2a4
+title: الخطوة ٤١
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+وضع العنصر الزائف في `10%` من الأعلى و `25%` من يسار عنصر يحتويه.
+
+# --hints--
+
+بداخل عنصر الزائف `.penguin-body::before` يجب أن تكون خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.top, '10%');
+```
+
+بداخل عنصر الزائف `.penguin-body::before` يجب أن تكون خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.left, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md
new file mode 100644
index 00000000000..b1b490fe94d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be80062551a080e32c821.md
@@ -0,0 +1,160 @@
+---
+id: 619be80062551a080e32c821
+title: الخطوة ٤٢
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+كم باستدارة صدر البطريق، بواسطة إعطاء العنصر المزيف (pseudo-element) زوايا الجزء السفلي (bottom corners) نصف قطر `100%`، أترك الزوايا العلوية (top corners) بقيمة `0%`.
+
+# --hints--
+
+يجب عليك أستخدام خاصية `border-radius` حتى يستدر الصدر.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderRadius);
+```
+
+يجب أن تعطي `.penguin-body::before` الـ `border-radius` بقيمة `0% 0% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomLeftRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopLeftRadius, '0%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.borderTopRightRadius, '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md
new file mode 100644
index 00000000000..8e93745579d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be8ce4ea49008c5bfbc30.md
@@ -0,0 +1,152 @@
+---
+id: 619be8ce4ea49008c5bfbc30
+title: الخطوة ٤٣
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+قم بزيادة شفافية (transparency) العنصر الزائف (psuedo-element) بنسبة `30%`.
+
+# --hints--
+
+يجب أن تعطي `.penguin-body::before` الـ `opacity` بقيمة `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.opacity, '0.7');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head"></div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+--fcc-editable-region--
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md
new file mode 100644
index 00000000000..89856f4fa57
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619be946958c6009844f1dee.md
@@ -0,0 +1,166 @@
+---
+id: 619be946958c6009844f1dee
+title: الخطوة ٤٤
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+ابدأ وجه البِطْرِيق عن طريق إضافة عنصرين `div` داخل `.penguin-head`، وإعطائهما `class` بقيمة `face`.
+
+# --hints--
+
+يجب عليك إضافة عدد`--fcc-expected--` من عناصر `div` إلى `.penguin-head`، ولكن وجدت `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 2);
+```
+
+بداخل عنصر `div` الأول يجب أن تكون خاصية `class` بقيمة `face`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(1)')?.className, 'face');
+```
+
+بداخل عنصر `div` الثاني يجب أن تكون خاصية `class` بقيمة `face`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.include(document.querySelector('.penguin-head > div:nth-of-type(2)')?.className, 'face');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md
new file mode 100644
index 00000000000..98f0fa3dc90
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c155df0063a0a3fec0e32.md
@@ -0,0 +1,193 @@
+---
+id: 619c155df0063a0a3fec0e32
+title: الخطوة ٤٥
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+اعطي عنصر `.face` خاصية `width` بقيمة `60%`، وخاصية`height` بقيمة `70%`، وخاصية `background-color` بقيمة `white`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.face`.
+
+```js
+assert.match(code, /\.face\s*\{/);
+```
+
+يجب عليك إعطاء عنصر `.face` خاصية `width`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.width);
+```
+
+يجب أن تعطي عنصر `.face` خاصية `width` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.width, '60%');
+```
+
+يجب عليك إعطاء عنصر `.face` خاصية `height`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.height);
+```
+
+يجب أن تعطي عنصر `.face` خاصية `height` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.height, '70%');
+```
+
+يجب عليك إعطاء عنصر `.face` خاصية `background-color`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor);
+```
+
+يجب أن تعطي عنصر `.face` خاصية `background-color` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md
new file mode 100644
index 00000000000..7e65a09dc17
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619c16debd0c270b01c5ce38.md
@@ -0,0 +1,165 @@
+---
+id: 619c16debd0c270b01c5ce38
+title: الخطوة ٤٦
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+أجعل الزوايا العليا من عناصر `.face` لها قطر بقيمة `70%`، والزوايا السفلية لها نصف قطر بقيمة `60%`.
+
+# --hints--
+
+يجب أن تعطي `.face` خاصية `border-radius` بقيمة `70% 70% 60% 60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomLeftRadius, '60%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.borderBottomRightRadius, '60%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md
new file mode 100644
index 00000000000..b44ddacd9ff
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619cfdf2e63ddf05feab86ad.md
@@ -0,0 +1,169 @@
+---
+id: 619cfdf2e63ddf05feab86ad
+title: الخطوة ٤٧
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+ضع عناصر `.face` بحيث تكون `15%` من الأعلى.
+
+# --hints--
+
+يجب عليك إعطاء عنصر `.face` خاصية `top`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face')?.top);
+```
+
+يجب أن تعطي عنصر `.face` خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.top, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md
new file mode 100644
index 00000000000..07e215bd4c4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d019488f98c06acbbb71a.md
@@ -0,0 +1,171 @@
+---
+id: 619d019488f98c06acbbb71a
+title: الخطوة ٤٨
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+حالياً، عنصران `.face` فوق بعضهما البعض.
+
+لإصلاح هذا، أضف `class` من `left` إلى أول عنصر `.face`، و`class` من `right` إلى الثاني عنصر `.face`.
+
+# --hints--
+
+يجب عليك إعطاء `class` من `left` لعنصر `.face` الأول.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(1)').className, 'left');
+```
+
+يجب عليك إعطاء `class` من `right` لعنصر `.face` الثاني.
+
+```js
+assert.include(document.querySelector('.face:nth-of-type(2)').className, 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face"></div>
+        <div class="face"></div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md
new file mode 100644
index 00000000000..ab77791ac4d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d022dc8400c0763829a17.md
@@ -0,0 +1,177 @@
+---
+id: 619d022dc8400c0763829a17
+title: الخطوة ٤٩
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+أستهدف فئة في عنصر `.face` تسمى `left`, وضعه (position) بنسبة `5%` من شمال عنصر الحاوي (left of its parent).
+
+# --hints--
+
+يجب عليك استخدام منتقي `.face.left`.
+
+```js
+assert.match(code, /\.face\.left\s*\{/);
+```
+
+يجب عليك إعطاء عنصر `.face.left` خاصية `left`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.left')?.left);
+```
+
+يجب أن يحتوي عنصر `.face.left` على خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.left')?.left, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md
new file mode 100644
index 00000000000..873a3e2b1b4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d02c7bc95bf0827a5d296.md
@@ -0,0 +1,181 @@
+---
+id: 619d02c7bc95bf0827a5d296
+title: الخطوة 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+أستهدف عنصر `.face` بـ class الـ `right`, وضعه (position) بنسبة `5%` على يمين والده (right of its parent).
+
+# --hints--
+
+يجب عليك استخدام منتقي `.face.right`.
+
+```js
+assert.match(code, /\.face\.right\s*\{/);
+```
+
+يجب عليك إعطاء عنصر `.face.right` خاصية الـ `right`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.face.right')?.right);
+```
+
+بداخل عنصر `.face.right` يجب أن تكون خاصية `right` بقيمة `--fcc-expected--`، ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face.right')?.right, '5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+--fcc-editable-region--
+.face.left {
+  left: 5%;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md
new file mode 100644
index 00000000000..0ff7c1d7960
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d033915012509031f309a.md
@@ -0,0 +1,184 @@
+---
+id: 619d033915012509031f309a
+title: الخطوة ٥١
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+بالأسفل من عنصر `.face.right`، أضف عنصر من `div` به `class` يسمي `chin`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` بداخل `.penguin-head`. متوقع عدد `--fcc-expected--` من عناصر `div`، لكن وجد `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 3);
+```
+
+يجب عليك إعطاء عنصر `div` سمة `class` بقيمة `chin`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.chin'));
+```
+
+يجب عليك وضع عنصر `div` تحت عنصر `.face.right`.
+
+```js
+assert.exists(document.querySelector('.face.right + .chin'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md
new file mode 100644
index 00000000000..76564b49775
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d03dadadb6509a16f4f5f.md
@@ -0,0 +1,210 @@
+---
+id: 619d03dadadb6509a16f4f5f
+title: الخطوة ٥٢
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+اعطي عناصر `.chin` خاصية `width` بقيمة `90%`، وخاصية `height` بقيمة `70%`، وخاصية `background-color` بقيمة `white`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.chin`.
+
+```js
+assert.match(code, /\.chin\s*\{/);
+```
+
+يجب عليك إعطاء عنصر `.chin` خاصية `width`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.width);
+```
+
+يجب أن يحتوي عنصر `.chin` على خاصية `width` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.width, '90%');
+```
+
+يجب عليك إعطاء عنصر `.chin` خاصية `height`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.height);
+```
+
+يجب أن يحتوي عنصر `.chin` على خاصية `height` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.height, '70%');
+```
+
+يجب عليك إعطاء عنصر `.chin` خاصية `background-color`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor);
+```
+
+يجب أن يحتوي عنصر `.chin` على خاصية `background-color` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.backgroundColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md
new file mode 100644
index 00000000000..fef197dee83
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0503e03a790a4179d463.md
@@ -0,0 +1,206 @@
+---
+id: 619d0503e03a790a4179d463
+title: الخطوة ٥٣
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+قم بوضع العنصر `.chin` في `25%` من الأعلى(top), و `5%` من يسار(left) والده(parent). ثم أعطي قطر زوايا القمة `70%`, وقطر زوايا الأسفل `100%`.
+
+# --hints--
+
+يجب عليك إعطاء عنصر `.chin` خاصية الـ `top`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.top);
+```
+
+بداخل عنصر `.chin` يجب أن تكون خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.top, '25%');
+```
+
+يجب عليك إعطاء عنصر `.chin` خاصية الـ `left`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.chin')?.left);
+```
+
+بداخل عنصر `.chin` يجب أن تكون خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.left, '5%');
+```
+
+يجب أن تعطي `.chin` الـ `border-radius` بقيمة `70% 70% 100% 100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopLeftRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderTopRightRadius, '70%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomRightRadius, '100%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.borderBottomLeftRadius, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+--fcc-editable-region--
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md
new file mode 100644
index 00000000000..0c2d8390a6c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d05c54dabca0b10058235.md
@@ -0,0 +1,197 @@
+---
+id: 619d05c54dabca0b10058235
+title: الخطوة ٥٤
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+حتى الآن، تحتوي عناصر `.face` و `.chin` على نفس `background-color`.
+
+أنشئ خاصية CSS مخصصة تسمى `--penguin-face`، وحدد قيمتها إلى `white`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `:root`.
+
+```js
+assert.match(code, /:root\s*\{/);
+```
+
+يجب عليك إعطاء عنصر `:root` خاصية الـ `--penguin-face`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--penguin-face'));
+```
+
+بداخل عنصر `:root` يجب أن تكون خاصية `--penguin-face` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropVal('--penguin-face', true), 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md
new file mode 100644
index 00000000000..e0673e9114f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0882f54bf40bdc4671ed.md
@@ -0,0 +1,197 @@
+---
+id: 619d0882f54bf40bdc4671ed
+title: الخطوة ٥٥
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+حيثما مناسباً، استبدل قيم الخاصيات بالمتغير الخاص بالمتغير `--penguin-face`.
+
+# --hints--
+
+يجب عليك إعطاء `.face` الـ `background-color` بقيمة `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.face')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+يجب عليك إعطاء `.chin` الـ `background-color` بقيمة `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.chin')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+يجب ألا تستخدم `var(--penguin-face)` في منتقي `.penguin-body`.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.penguin-body')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: white;
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: white;
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md
new file mode 100644
index 00000000000..2fab65848d3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d090cd8d6db0c93dc5087.md
@@ -0,0 +1,222 @@
+---
+id: 619d090cd8d6db0c93dc5087
+title: الخطوة ٥٦
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+بالأسفل من عنصر `.chin`، ضف عنصرين من `div` بهما `class` يسمي `eye`. أيضًا، أعط أول عنصر `.eye` سمة `class` بقيمة `left`, وثاني `.eye` عنصر `class` من `right`.
+
+# --hints--
+
+يجب عليك إضافة عنصرين `div` بداخل `.penguin-head`. متوقع قيمة `--fcc-expected--` داخل عنصرين `div`، لكن وجد `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 5);
+```
+
+يجب عليك إعطاء أول عنصر `div` سمة `class` بقيمة `eye`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye'));
+```
+
+يجب عليك إعطاء ثاني عنصر `div` سمة `class` بقيمة `eye`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.eye')?.length, 2);
+```
+
+يجب عليك إعطاء أول عنصر `div` سمة `class` بقيمة `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.left'));
+```
+
+يجب عليك إعطاء ثاني عنصر `div` سمة `class` بقيمة `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.eye.right'));
+```
+
+يجب عليك وضع `div.eye.left` بعد `div.chin`.
+
+```js
+assert.exists(document.querySelector('.chin + .eye.left'));
+```
+
+يجب عليك وضع `div.eye.right` بعد `div.eye.left`.
+
+```js
+assert.exists(document.querySelector('.eye.left + .eye.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md
new file mode 100644
index 00000000000..5b396335d31
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0b51ca42ed0d74582186.md
@@ -0,0 +1,207 @@
+---
+id: 619d0b51ca42ed0d74582186
+title: الخطوة ٥٧
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+اعطي عناصر `.eye` الخاصية `width` بقيمة `15%`، وخاصية `height` بقيمة `17%`، وخاصية `background-color` بقيمة `black`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.eye`.
+
+```js
+assert.match(code, /\.eye\s*\{/);
+```
+
+بداخل عنصر `.eye` يجب أن تكون خاصية `width` بقيمة `--fcc-expected--`، ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.width, '15%');
+```
+
+بداخل عنصر `.eye` يجب أن تكون خاصية `height` بقيمة `--fcc-expected--`، ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.height, '17%');
+```
+
+بداخل عنصر `.eye` يجب أن تكون خاصية `background-color` بقيمة `--fcc-expected--`، ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.backgroundColor, 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md
new file mode 100644
index 00000000000..ed4fd1dd8d0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0bc9cb05360e1bf549c3.md
@@ -0,0 +1,200 @@
+---
+id: 619d0bc9cb05360e1bf549c3
+title: الخطوة ٥٨
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+ضع عناصر `.eye` لتكون `45%` من الأعلى, ثم استدر كل الزاوية لتكون `50%`.
+
+# --hints--
+
+يجب أن تكون بداخل عنصر `.eye` خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.top, '45%');
+```
+
+يجب أن تكون بداخل عنصر `.eye` خاصية `border-radius` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+--fcc-editable-region--
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md
new file mode 100644
index 00000000000..2198939fe52
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0c1594c38c0ebae75878.md
@@ -0,0 +1,215 @@
+---
+id: 619d0c1594c38c0ebae75878
+title: الخطوة ٥٩
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+استهدف فئة عنصر `.eye` تسمى `left`, وضعه بنسبة `25%` من يسار العنصر الحاوي. , ثم أستهدف فئة عنصر `.eye` تسمى `right`, وضعه بنسبة `25%` من يمين العنصر الحاوي.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.eye.left`.
+
+```js
+assert.match(code, /\.eye\.left\s*\{/);
+```
+
+يجب أن تعطي عنصر `.eye.left` خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.left')?.left, '25%');
+```
+
+يجب عليك استخدام منتقي `.eye.right`.
+
+```js
+assert.match(code, /\.eye\.right\s*\{/);
+```
+
+يجب أن تعطي عنصر `.eye.right` خاصية `right` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left"></div>
+        <div class="eye right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md
new file mode 100644
index 00000000000..48211b85079
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0d18ca99870f884a7bff.md
@@ -0,0 +1,225 @@
+---
+id: 619d0d18ca99870f884a7bff
+title: الخطوة ٦٠
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+داخل كل عنصر `.eye` ، أضف `div` مع `class` بقيمة `eye-lid`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` داخل `.eye.left`، ولكن وجد `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.left > div')?.length ?? 0, 1);
+```
+
+يجب عليك إضافة عنصر `div` داخل `.eye.right`، ولكن وجد `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.eye.right > div')?.length ?? 0, 1);
+```
+
+يجب عليك إعطاء أول عنصر `div` الـ `class` بقيمة `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.left > div.eye-lid'));
+```
+
+يجب عليك إعطاء أول عنصر `div` الـ `class` بقيمة `eye-lid`.
+
+```js
+assert.exists(document.querySelector('.eye.right > div.eye-lid'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+--fcc-editable-region--
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+
+        </div>
+        <div class="eye right">
+
+        </div>
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md
new file mode 100644
index 00000000000..f2425f293d0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0daf214542102739b0da.md
@@ -0,0 +1,227 @@
+---
+id: 619d0daf214542102739b0da
+title: الخطوة ٦١
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+اعطي عناصر `.eye-lid` خاصية `width` بقيمة `150%`، وخاصية`height` بقيمة `100%`، وخاصية `background-color` بقيمة `--penguin-face`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.eye-lid`.
+
+```js
+assert.match(code, /\.eye-lid\s*\{/);
+```
+
+يجب أن يحتوي عنصر `.eye-lid` على خاصية `width` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.width, '150%');
+```
+
+يجب أن يحتوي عنصر `.eye-lid` على خاصية `height` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.height, '100%');
+```
+
+يجب عليك إعطاء `.eye-lid` خاصية `background-color` بقيمة `var(--penguin-face)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.getPropVal('background-color', true), 'var(--penguin-face)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md
new file mode 100644
index 00000000000..85fc94cfae2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0e56f9ca9710fcb974e3.md
@@ -0,0 +1,226 @@
+---
+id: 619d0e56f9ca9710fcb974e3
+title: الخطوة ٦٢
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+وضع العنصر `.eye-lid` في `25%` من أعلى (top), و `-23%` من يسار (left) العنصر الحاوي (parent). ثم در كل الزاوية من العنصر بنسبة `50%` باستخدام خاصية القطر (radius).
+
+# --hints--
+
+يجب أن يحتوي عنصر `.eye-lid` على خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.top, '25%');
+```
+
+يجب أن يحتوي عنصر `.eye-lid` على خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.left, '-23%');
+```
+
+يجب أن يحتوي عنصر `.eye-lid` على خاصية `border-radius` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.eye-lid')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+--fcc-editable-region--
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md
new file mode 100644
index 00000000000..a5cd3d9b007
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0eec0ac40611b41e2ccc.md
@@ -0,0 +1,247 @@
+---
+id: 619d0eec0ac40611b41e2ccc
+title: الخطوة ٦٣
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+بأسفل عنصر `.eye.right`، أضف `div` مع `class` يسمي `blush`. أيضًا، أعط أول عنصر `.blush` سمة `class` بقيمة `left`, وثاني `.blush` عنصر `class` من `right`.
+
+# --hints--
+
+يجب عليك إضافة عنصرين `div` بداخل `.penguin-head`. متوقع قيمة `--fcc-expected--` داخل عنصرين `div`، لكن وجد `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 7);
+```
+
+يجب عليك إعطاء أول عنصر `div` سمة `class` بقيمة `blush`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush'));
+```
+
+يجب عليك إعطاء ثاني عنصر `div` سمة `class` بقيمة `blush`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.blush')?.length, 2);
+```
+
+يجب عليك إعطاء أول عنصر `div` سمة `class` بقيمة `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.left'));
+```
+
+يجب عليك إعطاء ثاني عنصر `div` سمة `class` بقيمة `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.blush.right'));
+```
+
+يجب عليك وضع `.blush.right` بعد `.blush.left`.
+
+```js
+assert.exists(document.querySelector('.blush.left + .blush.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md
new file mode 100644
index 00000000000..d94d87b60f4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d0fc9825c271253df28d4.md
@@ -0,0 +1,238 @@
+---
+id: 619d0fc9825c271253df28d4
+title: الخطوة ٦٤
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+اعطي عناصر `.blush` خاصية `width` بقيمة `15%`، وخاصية `height` بقيمة `10%`، وخاصية `background-color` بقيمة `pink`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.blush`.
+
+```js
+assert.match(code, /\.blush\s*\{/);
+```
+
+يجب أن يحتوي عنصر `.blush` على خاصية `width` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.width, '15%');
+```
+
+يجب أن يحتوي عنصر `.blush` على خاصية `height` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.height, '10%');
+```
+
+يجب أن يحتوي عنصر `.blush` على خاصية `background-color` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.backgroundColor, 'pink');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md
new file mode 100644
index 00000000000..4c0aa90576c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d102d786c3d13124c37c6.md
@@ -0,0 +1,231 @@
+---
+id: 619d102d786c3d13124c37c6
+title: الخطوة ٦٥
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+ضع عناصر `.blush` بحيث تكون `65%` من الأعلى (top), ثم كم باستدارة (radius) كل الزاوية (corners) لتكون `50%`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `.blush` على خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.top, '65%');
+```
+
+يجب أن يحتوي عنصر `.blush` على خاصية `border-radius` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md
new file mode 100644
index 00000000000..3b48c38b1d0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d107edf7ddf13cc77106a.md
@@ -0,0 +1,246 @@
+---
+id: 619d107edf7ddf13cc77106a
+title: الخطوة ٦٦
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+أستهدف عنصر `.blush` ليحتوي على سمة `class` بقيمة `left`, وضعه (position) بنسبة `15%` من شمال عنصر الحاوي (left of its parent). وأستهدف عنصر `.blush` الذي يحتوي على سمة `class` بقيمة `right`, وضعه (position) بنسبة `15%` من يمين عنصر الحاوي (right of its parent).
+
+# --hints--
+
+يجب عليك استخدام منتقي `.blush.left`.
+
+```js
+assert.match(code, /\.blush\.left\s*\{/);
+```
+
+يجب أن يحتوي منتقي `.blush.left` على خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.left')?.left, '15%');
+```
+
+يجب عليك استخدام منتقي `.blush.right`.
+
+```js
+assert.match(code, /\.blush\.right\s*\{/);
+```
+
+يجب أن يحتوي منتقي `.blush.right` على خاصية `right` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.blush.right')?.right, '15%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md
new file mode 100644
index 00000000000..aa11ab6201d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d10cc98145f14820399c5.md
@@ -0,0 +1,271 @@
+---
+id: 619d10cc98145f14820399c5
+title: الخطوة ٦٧
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+بالأسفل من عنصر `.blush.right`، أضف عنصرين من `div` بهما `class` يسمي `beak`. أيضًا، أعط أول عنصر `.beak` فئة `class` بقيمة `top`, وثاني عنصر `.beak` فئة `class` من `bottom`.
+
+# --hints--
+
+يجب عليك إضافة عنصرين `div` بداخل `.penguin-head`. متوقع قيمة `--fcc-expected--` داخل عنصرين `div`، لكن وجد `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div')?.length, 9);
+```
+
+يجب عليك إعطاء أول عنصر `div` سمة `class` بقيمة `beak`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak'));
+```
+
+يجب عليك إعطاء ثاني عنصر `div` سمة `class` بقيمة `beak`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-head > div.beak')?.length, 2);
+```
+
+يجب عليك إعطاء أول عنصر `div` سمة `class` بقيمة `top`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.top'));
+```
+
+يجب عليك إعطاء ثاني عنصر `div` سمة `class` بقيمة `bottom`.
+
+```js
+assert.exists(document.querySelector('.penguin-head > div.beak.bottom'));
+```
+
+يجب عليك وضع `div.beak.top` بعد `div.blush.right`.
+
+```js
+assert.exists(document.querySelector('.blush.right + .beak.top'));
+```
+
+يجب عليك وضع `div.beak.bottom` بعد `div.beak.top`.
+
+```js
+assert.exists(document.querySelector('.beak.top + .beak.bottom'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md
new file mode 100644
index 00000000000..a8f556bafba
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d115e2adcd71538e82ebb.md
@@ -0,0 +1,256 @@
+---
+id: 619d115e2adcd71538e82ebb
+title: الخطوة ٦٨
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+استهدف عناصر `.beak`, وأضف خاصية `height` بقيمة `10%`، وخاصية `background-color` بقيمة `orange`، ثم كم باستدارة (radius) كل الزاوية (corners) بحيث تكون `50%`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.beak`.
+
+```js
+assert.match(code, /\.beak\s*\{/);
+```
+
+يجب أن يحتوي عنصر `.beak` على خاصية `height` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.height, '10%');
+```
+
+يجب أن يحتوي عنصر `.beak` على خاصية `background-color` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.backgroundColor, 'orange');
+```
+
+يجب أن يحتوي عنصر `.beak` على خاصية `border-radius` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md
new file mode 100644
index 00000000000..393068fa5b3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d11e6d5ef9515d2a16033.md
@@ -0,0 +1,262 @@
+---
+id: 619d11e6d5ef9515d2a16033
+title: الخطوة ٦٩
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+استهدف عنصر `.beak` مع `class` من `top`، وأعطيه خاصية `width` بقيمة `20%`, وضعه `60%` بالأعلى, وضعه `40%` باليسار من عنصر الحاوي.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.beak.top`.
+
+```js
+assert.match(code, /\.beak\.top\s*\{/);
+```
+
+يجب أن يحتوي منتقي `.beak.top` على خاصية `width` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.width, '20%');
+```
+
+يجب أن يحتوي منقي `.beak.top` على خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.top, '60%');
+```
+
+يجب أن يحتوي منتقي `.beak.top` على خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.top')?.left, '40%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md
new file mode 100644
index 00000000000..9468dc4c0ac
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d129a417d0716a94de913.md
@@ -0,0 +1,267 @@
+---
+id: 619d129a417d0716a94de913
+title: الخطوة ٧٠
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+استهدف عنصر `.beak` مع `class` بقيمة `bottom`, وقم بإعطائه خاصية `width` بنسبة `4%` أصغر من `.beak.top`, أبعد من الأعلى بقيمة `5%` و أبعد بقيمة `2%` من بعد `.beak.top` من يسار العنصر الحاوي.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.beak.bottom`.
+
+```js
+assert.match(code, /\.beak\.bottom\s*\{/);
+```
+
+يجب أن يحتوي منتقي `.beak.bottom` على خاصية `width` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.width, '16%');
+```
+
+يجب أن يحتوي منقي `.beak.bottom` على خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.top, '65%');
+```
+
+يجب أن يحتوي منتقي `.beak.bottom` على خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak.bottom')?.left, '42%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md
new file mode 100644
index 00000000000..fcef0a871dc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1340361095175f4b5115.md
@@ -0,0 +1,267 @@
+---
+id: 619d1340361095175f4b5115
+title: الخطوة ٧١
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+يبدو جسد البطريق عادي بعض الشيء. أجعله أنيق بواسطة إضافة عنصر `div` مع `class` من `shirt`، مباشرةً قبل عنصر `.penguin-body`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` إلى `.penguin`. متوقع عدد `--fcc-expected--` من عناصر `div`، لكن وجد `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin > div')?.length, 3);
+```
+
+يجب عليك إعطاء أول عنصر `div` الـ `class` بقيمة `shirt`.
+
+```js
+assert.exists(document.querySelector('.penguin > div.shirt'));
+```
+
+يجب عليك وضع `div` قبل `.penguin-body`.
+
+```js
+assert.exists(document.querySelector('.shirt + .penguin-body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md
new file mode 100644
index 00000000000..b44944a8ebb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15797b580c1828b05426.md
@@ -0,0 +1,263 @@
+---
+id: 619d15797b580c1828b05426
+title: الخطوة ٧٢
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+ضمن عنصر `.shirt`، أضف `div` مع الرمز التعبيري التالي كمحتوى: 💜
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` إلى `div.shirt`. توقع عنصر `div` بقيمة `--fcc-expected--`, وجدت `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > div')?.length, 1);
+```
+
+يجب عليك إعطاء عنصر `div` محتوي `💜`، ولكن وجدت `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > div')?.textContent, '💜');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md
new file mode 100644
index 00000000000..59992ff4f23
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d15d955d9d418c4487bbc.md
@@ -0,0 +1,264 @@
+---
+id: 619d15d955d9d418c4487bbc
+title: الخطوة ٧٣
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+ضمن `.shirt`, بعد عنصر `div`، أضف عنصر `p` مع المحتوى التالي: `I CSS`
+
+# --hints--
+
+يجب اضافة عنصر `p` بداخل `.shirt`، ولكن وجد `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.shirt > p')?.length, 1);
+```
+
+يجب أن تعطي عنصر `p` المحتوى `I CSS`، ولكن وجد `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelector('.shirt > p')?.textContent, 'I CSS');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+--fcc-editable-region--
+      <div class="shirt">
+        <div>💜</div>
+
+      </div>
+--fcc-editable-region--
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md
new file mode 100644
index 00000000000..9da63373bae
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1629a8adc61960ca8b40.md
@@ -0,0 +1,278 @@
+---
+id: 619d1629a8adc61960ca8b40
+title: الخطوة ٧٤
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+استهدف عنصر `.shirt`، وقم بتعيين `font-size` إلى `25px`, و خاصية `font-family` إلى `Helvetica` مع خط احتياطي `sans-serif`، و `font-weight` إلى `bold`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.shirt`.
+
+```js
+assert.match(code, /\.shirt\s*\{/);
+```
+
+بداخل عنصر `.shirt` يجب أن تكون خاصية `font-size` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontSize, '25px');
+```
+
+بداخل عنصر `.shirt` يجب أن تكون خاصية `font-family` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontFamily, 'Helvetica, sans-serif');
+```
+
+بداخل عنصر `.shirt` يجب أن تكون خاصية `font-weight` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.fontWeight, 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md
new file mode 100644
index 00000000000..133ab685b0a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1c5fc9f8941a400955da.md
@@ -0,0 +1,272 @@
+---
+id: 619d1c5fc9f8941a400955da
+title: الخطوة ٧٥
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+إذا نظرت عن كثب، _heart_ رمز تعبيري مختلف قليلاً. هذا لأن بعض خصائص الشخصية قد تم تجاوزها بواسطة نمط `font-weight` من `bold`.
+
+قم بإصلاح هذا، بواسطة استهداف `div` مع الرموز التعبيرية للقلب، وتعيين `font-weight` لقيمتها الأصلية.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.shirt div` لاستهداف عنصر `div` الذي يحمل رمز تعبيري.
+
+```js
+assert.match(code, /\.shirt div\s*\{/);
+```
+
+يجب عليك إعطاء `.shirt div` خاصية `font-weight` بقيمة `initial` أو `normal`.
+
+```js
+assert.include(['normal', 'initial'], new __helpers.CSSHelp(document).getStyle('.shirt div')?.fontWeight);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md
new file mode 100644
index 00000000000..70148b25c8f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1dab9ff3421ae1976991.md
@@ -0,0 +1,273 @@
+---
+id: 619d1dab9ff3421ae1976991
+title: الخطوة ٧٦
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+وضع العنصر `div` الذي يحمل رمز القلب التعبيري في `22.5px` من الأعلى (top), و `12px` من يسار (left) عنصر الحاوي (parent).
+
+# --hints--
+
+بداخل عنصر `.shirt div` يجب أن تكون خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.top, '22.5px');
+```
+
+بداخل عنصر `.shirt div` يجب أن تكون خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt div')?.left, '12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+}
+
+.shirt div {
+  font-weight: initial;
+
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md
new file mode 100644
index 00000000000..76833916b49
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1deb8b04811b8839ffe4.md
@@ -0,0 +1,281 @@
+---
+id: 619d1deb8b04811b8839ffe4
+title: الخطوة ٧٧
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+قم بوضع العنصر `.shirt` في `165px` من الأعلى(top), و `127.5px` من يسار(left) والده(parent). ثم زد ترتيب التكديس (stacking order) بحيث يظهر فوق عنصر `.penguin-body`.
+
+# --hints--
+
+بداخل عنصر `.shirt` يجب أن تكون خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.top, '165px');
+```
+
+بداخل عنصر `.shirt` يجب أن تكون خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.left, '127.5px');
+```
+
+يجب عليك إعطاء `.shirt` الـ `z-index` بقيمة `1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.zIndex, '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md
new file mode 100644
index 00000000000..8dc29ea14ee
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1e7a8e81a61c5a819dc4.md
@@ -0,0 +1,272 @@
+---
+id: 619d1e7a8e81a61c5a819dc4
+title: الخطوة ٧٨
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+من أجل اللمسة النهائية للقميص، عيين اللون `color` إلى `#6a6969`.
+
+# --hints--
+
+يجب عليك إعطاء `.shirt` خاصية `color` بقيمة `#6a6969`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.shirt')?.color, 'rgb(106, 105, 105)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body"></div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+--fcc-editable-region--
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+--fcc-editable-region--
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md
new file mode 100644
index 00000000000..4e8586393b4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1ed33c9a071cf657a0d6.md
@@ -0,0 +1,306 @@
+---
+id: 619d1ed33c9a071cf657a0d6
+title: الخطوة ٧٩
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+حقيقة ممتعة: البِطْرِيق لا يمكن أن يقف في الأقل دون قدمين.
+
+بداخل من عنصر `.penguin-body`، ضف عنصرين `div` مع `class` يسمي `foot`. أيضًا، أعط أول عنصر `.foot` فئة `class` بقيمة `left`, وثاني `.foot` عنصر `class` من `right`.
+
+# --hints--
+
+يجب عليك إضافة عنصرين `div` بداخل `.penguin-body`. متوقع قيمة `--fcc-expected--` داخل عنصرين `div`، لكن وجد `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 2);
+```
+
+يجب عليك إعطاء أول عنصر `div` خاصية `class` بقيمة `foot`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot'));
+```
+
+يجب عليك إعطاء ثاني عنصر `div` خاصية `class` بقيمة `foot`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.foot')?.length, 2);
+```
+
+يجب عليك إعطاء أول عنصر `div` خاصية `class` بقيمة `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.left'));
+```
+
+يجب عليك إعطاء الثاني عنصر `div` خاصية `class` بقيمة `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.foot.right'));
+```
+
+يجب عليك وضع `.foot.right` بعد `.foot.left`.
+
+```js
+assert.exists(document.querySelector('.foot.left + .foot.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md
new file mode 100644
index 00000000000..7f4c7420044
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d1fb5d244c31db8a7fdb7.md
@@ -0,0 +1,295 @@
+---
+id: 619d1fb5d244c31db8a7fdb7
+title: الخطوة ٨٠
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+اعطي عناصر `.foot` خاصية `width` بقيمة `15%`، وخاصية `height` بقيمة `30%`، وخاصية `background-color` بقيمة `orange`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.foot`.
+
+```js
+assert.match(code, /\.foot\s*\{/);
+```
+
+يجب أن يحتوي عنصر `.foot` على خاصية `width` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.width, '15%');
+```
+
+يجب أن يحتوي عنصر `.foot` على خاصية `height` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.height, '30%');
+```
+
+يجب أن يحتوي عنصر `.foot` على خاصية `background-color` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.backgroundColor, 'orange');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md
new file mode 100644
index 00000000000..f3ad7c97c85
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d204bd73ae51e743b8e94.md
@@ -0,0 +1,288 @@
+---
+id: 619d204bd73ae51e743b8e94
+title: الخطوة ٨١
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+ضع عناصر `.foot` بحيث تكون `85%` من الأعلى (top), ثم كم باستدارة (radius) كل الزاوية (corners) بحيث تكون `50%`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.foot` على خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.top, '85%');
+```
+
+يجب أن يحتوي منتقي `.foot` على خاصية `border-radius` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.borderRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
new file mode 100644
index 00000000000..493e8f29b93
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d20b12996101f430920fb.md
@@ -0,0 +1,304 @@
+---
+id: 619d20b12996101f430920fb
+title: الخطوة ٨٢
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+يشترك منقار البِطْرِيق وقدميه في نفس اللون `color`.
+
+أنشئ متغير CSS مخصص جديد يسمى `--penguin-picorna`، واستبدل جميع قيم الخاصية ذات صلة بهما.
+
+# --hints--
+
+يجب عليك إعطاء عنصر `:root` خاصية `--penguin-picorna`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-picorna'));
+```
+
+يجب أن تكون خاصية `--penguin-picorna` بقيمة `orange`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-picorna', true), 'orange');
+```
+
+يجب أن يحتوي منتقي `.beak` على خاصية `background-color` بقيمة `var(--penguin-picorna)`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.beak')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+يجب أن يحتوي منتقي `.foot` على خاصية `background-color` بقيمة `var(--penguin-picorna)`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.getPropVal('background-color', true), 'var(--penguin-picorna)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: orange;
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: orange;
+  top: 85%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md
new file mode 100644
index 00000000000..19abf852c85
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d21fe6a3f9b2016be9d9d.md
@@ -0,0 +1,304 @@
+---
+id: 619d21fe6a3f9b2016be9d9d
+title: الخطوة ٨٣
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+أستهدف فئة عنصر `.foot` تسمى `class` بقيمة `left`, وضعه (position) بنسبة `25%` من شمال عنصر الحاوي (left of its parent). أستهدف فئة عنصر `.foot` تسمى `class` بقيمة `right`, وضعه (position) بنسبة `25%` من يمين عنصر الحاوي (right of its parent).
+
+# --hints--
+
+يجب عليك استخدام منتقي `.foot.left`.
+
+```js
+assert.match(code, /\.foot\.left\s*\{/);
+```
+
+يجب أن يحتوي منتقي `.foot.left` على خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left')?.left, '25%');
+```
+
+يجب عليك استخدام منتقي `.foot.right`.
+
+```js
+assert.match(code, /\.foot\.right\s*\{/);
+```
+
+يجب أن يحتوي منتقي `.foot.right` على خاصية `right` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right')?.right, '25%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md
new file mode 100644
index 00000000000..3c380a6e565
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d229b0e542520cd91c685.md
@@ -0,0 +1,300 @@
+---
+id: 619d229b0e542520cd91c685
+title: الخطوة ٨٤
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+لجعل أقدام البِطْرِيق تبدو أكثر _penguiny_، تدوير القدم اليسرى ب `80deg`، واليمين ب `-80deg`.
+
+# --hints--
+
+يجب عليك إعطاء `.foot.left` خاصية `transform` بقيمة `rotate(80deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.left').getPropVal('transform', true), 'rotate(80deg)');
+```
+
+يجب عليك إعطاء `.foot.right` خاصية `transform` بقيمة `rotate(-80deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot.right').getPropVal('transform', true), 'rotate(-80deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+.foot.left {
+  left: 25%;
+
+}
+
+.foot.right {
+  right: 25%;
+
+}
+--fcc-editable-region--
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md
new file mode 100644
index 00000000000..bc595518a52
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d23089e787e216a7043d6.md
@@ -0,0 +1,295 @@
+---
+id: 619d23089e787e216a7043d6
+title: الخطوة ٨٥
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+غير ترتيب التكديس للعناصر `.foot` بحيث تظهر تحت عنصر `.penguin-body`.
+
+# --hints--
+
+بداخل عنصر `.foot` يجب أن تكون خاصية `z-index` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foot')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+
+}
+--fcc-editable-region--
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md
new file mode 100644
index 00000000000..7e76a27326b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d237a107c10221ed743fa.md
@@ -0,0 +1,328 @@
+---
+id: 619d237a107c10221ed743fa
+title: الخطوة ٨٦
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+حقيقة ممتعة: البِطْرِيق لا يمكن أن يطير دون أجنحة.
+
+بداخل من عنصر `.penguin-body`، قبل عناصر `.foot`, ضف عنصرين `div` مع `class` يسمي `arm`. أيضًا، أعط أول عنصر `.arm` سمة `class` بقيمة `left`, وثاني عنصر `.arm` سمة `class` من `right`.
+
+# --hints--
+
+يجب عليك إضافة عنصرين `div` بداخل `.penguin-body`. متوقع قيمة `--fcc-expected--` داخل عنصرين `div`، لكن وجد `--fcc-actual--`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div')?.length, 4);
+```
+
+يجب عليك إعطاء أول عنصر `div` سمة `class` بقيمة `arm`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm'));
+```
+
+يجب عليك إعطاء ثاني عنصر `div` سمة `class` بقيمة `arm`.
+
+```js
+assert.equal(document.querySelectorAll('.penguin-body > div.arm')?.length, 2);
+```
+
+يجب عليك إعطاء أول عنصر `div` سمة `class` بقيمة `left`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.left'));
+```
+
+يجب عليك إعطاء الثاني عنصر `div` سمة `class` بقيمة `right`.
+
+```js
+assert.exists(document.querySelector('.penguin-body > div.arm.right'));
+```
+
+يجب عليك وضع `.arm.right` بعد `.arm.left`.
+
+```js
+assert.exists(document.querySelector('.arm.left + .arm.right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+--fcc-editable-region--
+      <div class="penguin-body">
+
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+--fcc-editable-region--
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md
new file mode 100644
index 00000000000..fc915d4df2b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d26b12e651022d80cd017.md
@@ -0,0 +1,317 @@
+---
+id: 619d26b12e651022d80cd017
+title: خطوة ٨٧
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+اعطي عناصر `.arm` الخاصية `width` بقيمة `30%`، وخاصية `height` بقيمة `60%`، وخاصية `background` بها تدرج خطي بدرجة `90deg` مع عقارب الساعة، ويبدء التدريج باللون `gray`, وينتهي باللون `rgb(209, 210, 199)`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.arm`.
+
+```js
+assert.match(code, /\.arm\s*\{/);
+```
+
+بداخل منتقي `.arm` يجب أن تكون خاصية `width` بقيمة `--fcc-expected--`، ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.width, '30%');
+```
+
+بداخل منتقي `.arm` يجب أن تكون خاصية `height` بقيمة `--fcc-expected--`، ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.height, '60%');
+```
+
+يجب عليك إعطاء `.arm` الخاصية `background` بقيمة `linear-gradient(90deg, gray, rgb(209, 210, 199))`.
+
+```js
+assert.include(['linear-gradient(90deg,gray,rgb(209,210,199))', 'rgba(0,0,0,0)linear-gradient(90deg,gray,rgb(209,210,199))repeatscroll0%0%'], new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md
new file mode 100644
index 00000000000..b28d1243e28
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2712853306238f41828e.md
@@ -0,0 +1,332 @@
+---
+id: 619d2712853306238f41828e
+title: الخطوة ٨٨
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+أنشئ متغير CSS مخصص يسمى `--penguin-skin`، وحدد قيمته إلى `gray`. ثم استبدل جميع قيم الخصائص ذات الصلة بها.
+
+# --hints--
+
+يجب عليك إعطاء عنصر `:root` خاصية الـ `--penguin-skin`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root').getPropertyValue('--penguin-skin'));
+```
+
+خاصية `--penguin-skin` يجب أن تحمل قيمة `gray`، ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root').getPropVal('--penguin-skin', true), 'gray');
+```
+
+يجب عليك إعطاء `.penguin-head` خاصية `background` من`linear-gradient(45deg, var(--penguin-skin), rgb(239, 240, 228))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-head')?.getPropVal('background', true), 'linear-gradient(45deg,var(--penguin-skin),rgb(239,240,228))');
+```
+
+يجب أن يحتوي عنصر الزائف `.penguin-body::before` على خاصية `background-color` بقيمة `var(--penguin-skin)`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin-body::before')?.getPropVal('background-color', true), 'var(--penguin-skin)');
+```
+
+يجب عليك إعطاء `.arm` خاصية `background` من`linear-gradient(90deg, var(--penguin-skin), rgb(209, 210, 199))`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.getPropVal('background', true), 'linear-gradient(90deg,var(--penguin-skin),rgb(209,210,199))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    gray,
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: gray;
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    gray,
+    rgb(209, 210, 199)
+  );
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md
new file mode 100644
index 00000000000..245dec8434d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2b7a84e78b246f2d17a2.md
@@ -0,0 +1,340 @@
+---
+id: 619d2b7a84e78b246f2d17a2
+title: الخطوة ٨٩
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+استهدف عنصر `.arm` مع `class` من `left`، وضعه في `35%` من الأعلى، و `5%` من يسار العنصر الحاوي. , واستهدف عنصر `.arm` مع `class` من `right`, وضعه في `0%` من الأعلى، و `-5%` من يمين والده.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.arm.left`.
+
+```js
+assert.match(code, /\.arm\.left\s*\{/);
+```
+
+يجب أن يحتوي عنصر `.arm.left` على خاصية `top` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.top, '35%');
+```
+
+يجب أن يحتوي عنصر `.arm.left` على خاصية `left` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.left, '5%');
+```
+
+يجب عليك استخدام منتقي `.arm.right`.
+
+```js
+assert.match(code, /\.arm\.right\s*\{/);
+```
+
+يجب عليك إعطاء `.arm.right` خاصية `top` بقيمة `0%`.
+
+```js
+assert.include(['0%', '0', '0px'], new __helpers.CSSHelp(document).getStyle('.arm.right')?.top);
+```
+
+يجب أن يحتوي عنصر `.arm.right` على خاصية `right` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.right, '-5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md
new file mode 100644
index 00000000000..961ccebf9ea
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2bd9c1d43c2526e96f1f.md
@@ -0,0 +1,325 @@
+---
+id: 619d2bd9c1d43c2526e96f1f
+title: الخطوة ٩٠
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+داخل منتقي `.arm.left`، غيّر منشأ باستخدام وظيفة `transform` لتكون الزاوية العلوية اليسرى (top left) من العنصر الحاوي (parent).
+
+# --hints--
+
+يجب عليك استخدام خاصية `transform-origin` لعمل ذلك.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+يجب عليك إعطاء `.arm.left` خاصية `transform-origin` بقيمة`0% 0%`, أو قيمة `top left`.
+
+```js
+assert.include(['0% 0%', 'left top', '0% 0% 0px', 'left top 0px'], new __helpers.CSSHelp(document).getStyle('.arm.left')?.transformOrigin);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md
new file mode 100644
index 00000000000..2f60e4d304e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2d4e80400325ff89664a.md
@@ -0,0 +1,320 @@
+---
+id: 619d2d4e80400325ff89664a
+title: الخطوة ٩١
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+لإبقاء معامل التدرج الخطي (linear gradient) على الجانب الصحيح من ذراع البطْرِيق اليسرى، قم أولا بتدويرها بواسطة `130deg`، ثم أقلب محور x.
+
+# --hints--
+
+يجب عليك إعطاء `.arm.left` خاصية `transform` بقيمة `rotate(130deg) scaleX(-1)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left').getPropVal('transform', true), 'rotate(130deg)scaleX(-1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md
new file mode 100644
index 00000000000..a9206442b44
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2ebc81ba81271460850d.md
@@ -0,0 +1,321 @@
+---
+id: 619d2ebc81ba81271460850d
+title: الخطوة ٩٢
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+تدوير الذراع اليمين بقيمة `45deg` معاكس لعقارب الساعة.
+
+# --hints--
+
+يجب عليك إعطاء `.arm.right` خاصية `transform` بقيمة `rotate(-45deg)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.right')?.getPropVal('transform', true), 'rotate(-45deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+--fcc-editable-region--
+.arm.right {
+  top: 0%;
+  right: -5%;
+
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md
new file mode 100644
index 00000000000..ab9b51946b0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2f0e9440bc27caee1cec.md
@@ -0,0 +1,327 @@
+---
+id: 619d2f0e9440bc27caee1cec
+title: الخطوة ٩٣
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+حقيقة ممتعة: معظم الزعانف الأسماك، إن لم يكن كلها، ليست مستطيلة طبيعيا.
+
+اعطي `.arm` عناصر أعلى اليسار (top-left)، وأعلي اليمين (top-right)، والزوايا أسفل اليمين (bottom-right) قطر `30%`، و الزاوية أسفل اليسار (bottom-left) قطر `120%`.
+
+# --hints--
+
+يجب أن تعطي `.arm` الـ `border-radius` بقيمة `30% 30% 30% 120%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopLeftRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderTopRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomRightRadius, '30%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.borderBottomLeftRadius, '120%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md
new file mode 100644
index 00000000000..c0956c00dc8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d2fd3ff4f772882e3d998.md
@@ -0,0 +1,323 @@
+---
+id: 619d2fd3ff4f772882e3d998
+title: الخطوة ٩٤
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+غير ترتيب تكديس العناصر `.arm` بحيث تظهر خلف عنصر `.penguin-body`.
+
+# --hints--
+
+بداخل عنصر `.arm` يجب أن تكون خاصية `z-index` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm')?.zIndex, '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+--fcc-editable-region--
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+
+}
+--fcc-editable-region--
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md
new file mode 100644
index 00000000000..f449bf63610
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d30350883802921bfcccc.md
@@ -0,0 +1,333 @@
+---
+id: 619d30350883802921bfcccc
+title: الخطوة 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+الآن، ستستخدم خاصيات الحركة في CSS لتجعل البِطْرِيق يلوح يده.
+
+أنشئ قاعدة `@keyframes` اسمها `wave`.
+
+# --hints--
+
+حدد قاعدة `@keyframes` جديدة.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getCSSRules('keyframes'));
+```
+
+بداخل قاعدة `@keyframes` يجب أن تكون خاصية `name` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules('keyframes')?.[0]?.name, 'wave');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md
new file mode 100644
index 00000000000..f25bb38a2d3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d324f5915c929f36ae91d.md
@@ -0,0 +1,345 @@
+---
+id: 619d324f5915c929f36ae91d
+title: الخطوة 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+إعطاء `wave` أربع إحداثيات تبدأ من `10%`، وتزداد بنسبة `10%`.
+
+# --hints--
+
+يجب عليك إضافة إحداثية `10%` لموجة `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '10%'));
+```
+
+يجب عليك إضافة إحداثية `20%` لموجة `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '20%'));
+```
+
+يجب عليك إضافة إحداثية `30%` لموجة `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '30%'));
+```
+
+يجب عليك إضافة إحداثية `40%` لموجة `@keyframes wave`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].some(css => css?.keyText === '40%'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md
new file mode 100644
index 00000000000..578b481b8ac
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d32c7fa21f32aaa91d499.md
@@ -0,0 +1,338 @@
+---
+id: 619d32c7fa21f32aaa91d499
+title: الخطوة 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+داخل نقطة الطريق الأولى، در العنصر إلى `110deg`، والحفاظ على حجم الذراع اليسرى.
+
+# --hints--
+
+يجب عليك إعطاء `10%` إلى خاصية `transform` بقيمة `rotate(110deg) scaleX(-1)`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '10%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md
new file mode 100644
index 00000000000..64fcc4b7035
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d333b738e3c2b5d58b095.md
@@ -0,0 +1,338 @@
+---
+id: 619d333b738e3c2b5d58b095
+title: الخطوة 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+داخل أحداثية الثانية، در العنصر إلى `130deg`, والحفاظ على حجم الذراع اليسرى.
+
+# --hints--
+
+يجب عليك إعطاء أحداثية `20%` خاصية `transform` بقيمة `rotate(130deg) scaleX(-1)`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '20%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md
new file mode 100644
index 00000000000..40417442764
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d337765b9f02c10e93722.md
@@ -0,0 +1,344 @@
+---
+id: 619d337765b9f02c10e93722
+title: الخطوة 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+فيما يتعلق بنقطتي الطريق الثالثة والرابعة، كرر نمط `transform` مرة أخرى.
+
+# --hints--
+
+يجب عليك إعطاء نقطة الطريق `30%` خاصية `transform` بقيمة `rotate(110deg) scaleX(-1)`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '30%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(110deg)scaleX(-1)');
+```
+
+يجب عليك إعطاء نقطة الطريق `40%` خاصية `transform` بقيمة `rotate(130deg) scaleX(-1)`.
+
+```js
+assert([...[...new __helpers.CSSHelp(document).getCSSRules('keyframes')].find(rule => rule?.name === 'wave')?.cssRules].find(css => css?.keyText === '40%')?.style?.transform?.replace(/\s+/g, '') === 'rotate(130deg)scaleX(-1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+--fcc-editable-region--
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+
+  }
+  40% {
+
+  }
+}
+--fcc-editable-region--
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md
new file mode 100644
index 00000000000..993cb5683a1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d33c51140292cc5a21742.md
@@ -0,0 +1,357 @@
+---
+id: 619d33c51140292cc5a21742
+title: الخطوة 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+استخدم حركة تلوح اليد `wave` على الذراع اليسرى. أجعل الحركة تدوم إلى `3s`، متكرر بشكل غير نهائي (infinitely iterate)، ولديه عملية توقيت محدد (linear timing function).
+
+# --hints--
+
+بداخل عنصر `.arm.left` يجب أن تكون خاصية `animation-name` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationName, 'wave');
+```
+
+يجب أن يحتوي عنصر `.arm.left` على خاصية `animation-duration` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationDuration, '3s');
+```
+
+يجب أن يحتوي عنصر `.arm.left` على خاصية `animation-iteration-count` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationIterationCount, 'infinite');
+```
+
+يجب أن يحتوي عنصر `.arm.left` على خاصية `animation-timing-function` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.arm.left')?.animationTimingFunction, 'linear');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+--fcc-editable-region--
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+
+}
+--fcc-editable-region--
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md
new file mode 100644
index 00000000000..3fa25ebbd6e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3482f505452d861d0f62.md
@@ -0,0 +1,347 @@
+---
+id: 619d3482f505452d861d0f62
+title: الخطوة 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+استهدف عنصر `.penguin` عندما يكون نشطا، وزيادة حجمه بنسبة `50%` في كلا البعدين.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.penguin:active`.
+
+```js
+assert.match(code, /\.penguin:active\s*\{/);
+```
+
+يجب عليك إعطاء `.penguin:active` خاصية `transform` بقيمة `scale(1.5)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.getPropVal('transform', true), 'scale(1.5)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md
new file mode 100644
index 00000000000..0e4deb9eed3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3561a951bf2e41a24f10.md
@@ -0,0 +1,346 @@
+---
+id: 619d3561a951bf2e41a24f10
+title: الخطوة 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+عند تنشط عنصر `.penguin`، قد يبدو كما لو كنت تستطيع سحبه. وهذا ليس صحيحا.
+
+حدد هذا للمستخدمين، بواسطة إعطاء العنصر نشيطٌ مؤشر `cursor` خاصية `not-allowed`.
+
+# --hints--
+
+يجب عليك إعطاء `.penguin:active` خاصية `cursor` بقيمة `not-allowed`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin:active')?.cursor, 'not-allowed');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+--fcc-editable-region--
+.penguin:active {
+  transform: scale(1.5);
+
+}
+--fcc-editable-region--
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md
new file mode 100644
index 00000000000..bc093edb299
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d36103839c82efa95dd34.md
@@ -0,0 +1,357 @@
+---
+id: 619d36103839c82efa95dd34
+title: الخطوة 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+تغيير `.penguin` عنصر `transition` سلوك خلال التحول إلى يدوم لمدة `1s`، وظيفة توقيت من `ease-in-out`, وتأخير من `0ms`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `.penguin` على خاصية `transition-duration` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDuration, '1s');
+```
+
+يجب أن يحتوي عنصر `.penguin` على خاصية `transition-timing-function` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionTimingFunction, 'ease-in-out');
+```
+
+يجب أن يحتوي عنصر `.penguin` على خاصية `transition-delay` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.penguin')?.transitionDelay, '0ms');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+--fcc-editable-region--
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+
+}
+--fcc-editable-region--
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md
new file mode 100644
index 00000000000..e37cc96b909
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/619d3711d04d623000013e9e.md
@@ -0,0 +1,670 @@
+---
+id: 619d3711d04d623000013e9e
+title: الخطوة 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+وأخيرا، أحسب `height` من عنصر `.ground` أن يكون بقيمة ارتفاع النافذة العرض مطروحاً منه ارتفاع عنصر `.penguin`.
+
+تهانينا! لقد أكملت شهادة تصميم مواقع الويب المتجاوبة.
+
+# --hints--
+
+يجب عليك إعطاء `.ground` خاصية `height` بقيمة `calc(100vh - 300px)`.
+
+```js
+assert.include(['calc(100vh-300px)', 'calc(-300px+100vh)'], new __helpers.CSSHelp(document).getStyle('.ground')?.getPropVal('height', true));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+--fcc-editable-region--
+.ground {
+  width: 100vw;
+  height: 400px;
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+    <div class="left-mountain"></div>
+    <div class="back-mountain"></div>
+    <div class="sun"></div>
+    <div class="penguin">
+      <div class="penguin-head">
+        <div class="face left"></div>
+        <div class="face right"></div>
+        <div class="chin"></div>
+        <div class="eye left">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="eye right">
+          <div class="eye-lid"></div>
+        </div>
+        <div class="blush left"></div>
+        <div class="blush right"></div>
+        <div class="beak top"></div>
+        <div class="beak bottom"></div>
+      </div>
+      <div class="shirt">
+        <div>💜</div>
+        <p>I CSS</p>
+      </div> 
+      <div class="penguin-body">
+        <div class="arm left"></div>
+        <div class="arm right"></div>
+        <div class="foot left"></div>
+        <div class="foot right"></div>
+      </div>
+    </div>
+
+    <div class="ground"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --penguin-face: white;
+  --penguin-picorna: orange;
+  --penguin-skin: gray;
+}
+
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  height: 100vh;
+  overflow: clip;
+}
+
+.left-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(80, 183, 255));
+  position: absolute;
+  transform: skew(0deg, 44deg);
+  z-index: 2;
+  margin-top: 100px;
+}
+
+.back-mountain {
+  width: 300px;
+  height: 300px;
+  background: linear-gradient(rgb(203, 241, 228), rgb(47, 170, 255));
+  position: absolute;
+  z-index: 1;
+  transform: rotate(45deg);
+  left: 110px;
+  top: 225px;
+}
+
+.sun {
+  width: 200px;
+  height: 200px;
+  background-color: yellow;
+  position: absolute;
+  border-radius: 50%;
+  top: -75px;
+  right: -75px;
+}
+
+.penguin {
+  width: 300px;
+  height: 300px;
+  margin: auto;
+  margin-top: 75px;
+  z-index: 4;
+  position: relative;
+  transition: transform 1s ease-in-out 0ms;
+}
+
+.penguin * {
+  position: absolute;
+}
+
+.penguin:active {
+  transform: scale(1.5);
+  cursor: not-allowed;
+}
+
+.penguin-head {
+  width: 50%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    var(--penguin-skin),
+    rgb(239, 240, 228)
+  );
+  border-radius: 70% 70% 65% 65%;
+  top: 10%;
+  left: 25%;
+  z-index: 1;
+}
+
+.face {
+  width: 60%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  border-radius: 70% 70% 60% 60%;
+  top: 15%;
+}
+
+.face.left {
+  left: 5%;
+}
+
+.face.right {
+  right: 5%;
+}
+
+.chin {
+  width: 90%;
+  height: 70%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: 5%;
+  border-radius: 70% 70% 100% 100%;
+}
+
+.eye {
+  width: 15%;
+  height: 17%;
+  background-color: black;
+  top: 45%;
+  border-radius: 50%;
+}
+
+.eye.left {
+  left: 25%;
+}
+
+.eye.right {
+  right: 25%;
+}
+
+.eye-lid {
+  width: 150%;
+  height: 100%;
+  background-color: var(--penguin-face);
+  top: 25%;
+  left: -23%;
+  border-radius: 50%;
+}
+
+.blush {
+  width: 15%;
+  height: 10%;
+  background-color: pink;
+  top: 65%;
+  border-radius: 50%;
+}
+
+.blush.left {
+  left: 15%;
+}
+
+.blush.right {
+  right: 15%;
+}
+
+.beak {
+  height: 10%;
+  background-color: var(--penguin-picorna);
+  border-radius: 50%;
+}
+
+.beak.top {
+  width: 20%;
+  top: 60%;
+  left: 40%;
+}
+
+.beak.bottom {
+  width: 16%;
+  top: 65%;
+  left: 42%;
+}
+
+.shirt {
+  font: bold 25px Helvetica, sans-serif;
+  top: 165px;
+  left: 127.5px;
+  z-index: 1;
+  color: #6a6969;
+}
+
+.shirt div {
+  font-weight:  initial;
+  top: 22.5px;
+  left: 12px;
+}
+
+.penguin-body {
+  width: 53%;
+  height: 45%;
+  background: linear-gradient(
+    45deg,
+    rgb(134, 133, 133) 0%,
+    rgb(234, 231, 231) 25%,
+    white 67%
+  );
+  border-radius: 80% 80% 100% 100%;
+  top: 40%;
+  left: 23.5%;
+}
+
+.penguin-body::before {
+  content: "";
+  position: absolute;
+  width: 50%;
+  height: 45%;
+  background-color: var(--penguin-skin);
+  top: 10%;
+  left: 25%;
+  border-radius: 0% 0% 100% 100%;
+  opacity: 70%;
+}
+
+.arm {
+  width: 30%;
+  height: 60%;
+  background: linear-gradient(
+    90deg,
+    var(--penguin-skin),
+    rgb(209, 210, 199)
+  );
+  border-radius: 30% 30% 30% 120%;
+  z-index: -1;
+}
+
+.arm.left {
+  top: 35%;
+  left: 5%;
+  transform-origin: top left; 
+  transform: rotate(130deg) scaleX(-1);
+  animation: 3s linear infinite wave;
+}
+
+.arm.right {
+  top: 0%;
+  right: -5%;
+  transform: rotate(-45deg);
+}
+
+@keyframes wave {
+  10% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  20% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+  30% {
+    transform: rotate(110deg) scaleX(-1);
+  }
+  40% {
+    transform: rotate(130deg) scaleX(-1);
+  }
+}
+
+.foot {
+  width:  15%;
+  height: 30%;
+  background-color: var(--penguin-picorna);
+  top: 85%;
+  border-radius: 50%;
+  z-index: -1;
+}
+
+.foot.left {
+  left: 25%;
+  transform: rotate(80deg);
+}
+
+.foot.right {
+  right: 25%;
+  transform: rotate(-80deg);
+}
+
+.ground {
+  width: 100vw;
+  height: calc(100vh - 300px);
+  background: linear-gradient(90deg, rgb(88, 175, 236), rgb(182, 255, 255));
+  z-index: 3;
+  position: absolute;
+  margin-top: -58px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md
new file mode 100644
index 00000000000..3c905e8d9bd
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-transforms-by-building-a-penguin/61a8fe15a6a31306e60d1e89.md
@@ -0,0 +1,55 @@
+---
+id: 61a8fe15a6a31306e60d1e89
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+ضبط القيم القاسية في صفحتك, عن طريق ضبط `width` ألى `100%`, و`height` ألى `100vh`.
+
+# --hints--
+
+بداخل عنصر `body` يجب أن تكون خاصية `width` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+بداخل عنصر `body` يجب أن تكون خاصية `height` بقيمة `--fcc-expected--`, ولكن وجدت بقيمة `--fcc-actual--`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="stylesheet" href="./styles.css" />
+    <title>Penguin</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  background: linear-gradient(45deg, rgb(118, 201, 255), rgb(247, 255, 222));
+  margin: 0;
+  padding: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md
new file mode 100644
index 00000000000..5d5ff72e155
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98c9.md
@@ -0,0 +1,53 @@
+---
+id: 5d822fd413a79914d39e98c9
+title: الخطوة ١
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+مرحبا بكم في متغيرات CSS بمشروع Skyline! ابدأ بإضافة تعريف `!DOCTYPE html` في الجزء العلوي من المستند حتى يعرف المتصفح نوع المستند الذي يقرأه.
+
+# --hints--
+
+يجب أن يحتوي كودك على `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE/gi));
+```
+
+يجب عليك تضمين مسافة بعد `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+/gi));
+```
+
+يجب عليك تحديد نوع المستند ليكون `html`.
+
+```js
+assert(code.match(/html/gi));
+```
+
+يجب عليك إغلاق تعريف `DOCTYPE` مع `>` بعد تحديد النوع.
+
+```js
+assert(code.match(/html\s*>/gi));
+```
+
+يجب أن يكون تعريف `DOCTYPE` في بداية HTML الخاص بك.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md
new file mode 100644
index 00000000000..a060f36741f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ca.md
@@ -0,0 +1,54 @@
+---
+id: 5d822fd413a79914d39e98ca
+title: الخطوة 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+اضف علامات فتح وإغلاق `html` أسفل `DOCTYPE` حتى يكون لديك مكان لبدء وضع بعض الكود. تحقق من تعيين اللغة الإنجليزية.
+
+# --hints--
+
+يجب أن يكون تعريف `DOCTYPE` في بداية HTML الخاص بك.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
+```
+
+يجب أن يحتوي عنصر `html` الخاص بك على علامة افتتاحية مع خاصية `lang` من `en`.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+يجب أن يحتوي عنصر `html` الخاص بك على علامة الأغلاق.
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+يجب أن تكون العلامات الخاصة بعنصر `html` في الترتيب الصحيح.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>\s*<\/html\s*>/));
+```
+
+يجب أن يكون لديك عنصر `html` واحد فقط.
+
+```js
+assert(document.querySelectorAll('html').length === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md
new file mode 100644
index 00000000000..c6f0ab38ffb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cb.md
@@ -0,0 +1,69 @@
+---
+id: 5d822fd413a79914d39e98cb
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+بعد ذلك، ضف وسمات فتح وإغلاق `head` و `body` داخل عنصر `html`.
+
+# --hints--
+
+يجب أن يكون لديك وسم فتح للعنصر `head`.
+
+```js
+assert(code.match(/<head\s*>/i));
+```
+
+يجب أن يكون لديك وسم أغلاق للعنصر `head`.
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+يجب أن يكون لديك وسم فتح للعنصر `body`.
+
+```js
+assert(code.match(/<body\s*>/i));
+```
+
+يجب أن يكون لديك وسم أغلاق للعنصر `body`.
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+يجب أن يكون عناصر `head` و `body` متلازمين (siblings).
+
+```js
+assert(document.querySelector('head').nextElementSibling.localName === 'body');
+```
+
+يجب أن يكون عنصر `head` داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html').children].some(x => x.localName === 'head'));
+```
+
+يجب أن يكون عنصر `body` داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html').children].some(x => x.localName === 'body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+--fcc-editable-region--
+<html lang="en">
+
+</html>
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md
new file mode 100644
index 00000000000..282eaa0d345
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cc.md
@@ -0,0 +1,108 @@
+---
+id: 5d822fd413a79914d39e98cc
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+داخل `head`، أدخل عنصر `meta` مع خاصية `charset` بقيمة `UTF-8`، وعنصر `title` بعنوان `City Skyline`، و `link` الذي يربط مِلَفّ `styles.css`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `meta` داخل عنصر `head`.
+
+```js
+assert.exists(document.querySelector('head > meta'));
+```
+
+يجب عليك إعطاء عنصر `meta` خاصية `charset` بقيمة `UTF-8`.
+
+```js
+assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8');
+```
+
+يجب أن يحتوي كودك على عنصر `title`.
+
+```js
+const title = document.querySelector('title');
+assert.exists(title);
+```
+
+يجب أن يكون عنصر `title` داخل عنصر `head`.
+
+```js
+assert.exists(document.querySelector('head > title'));
+```
+
+يجب أن يكون لمشروعك العنوان `City Skyline`.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title.text.toLowerCase(), 'city skyline')
+```
+
+تذكر أن الحالة الحرف سواء كبيرا أو صغيرا, والإملاء مهمان للعنوان.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title.text, 'City Skyline');
+```
+
+يجب أن يحتوي كودك على عنصر `link`.
+
+```js
+assert.match(code, /<link/)
+```
+
+لا يجب عليك تغيير عنصر `head` الحالي. تحقق أنك لم تقم بحذف وسم الإغلاق.
+
+```js
+const heads = document.querySelectorAll('head');
+assert.equal(heads?.length, 1);
+```
+
+يجب أن يحتوي كودك على عنصر `link` مغلق ذاتيا.
+
+```js
+assert(document.querySelectorAll('link').length === 1);
+```
+
+يجب أن يكون عنصرك `link` داخل عنصرك `head`.
+
+```js
+assert.exists(document.querySelector('head > link'));
+```
+
+يجب أن يحتوي عنصرك `link` على سمة `rel` بقيمة `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+يجب أن يحتوي عنصرك `link` على خاصية `href` مع القيمة `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md
new file mode 100644
index 00000000000..6d354d57b5c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cd.md
@@ -0,0 +1,56 @@
+---
+id: 5d822fd413a79914d39e98cd
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+في CSS، يمكنك استهداف كل شيء باستخدام النجمة. قم بإضافة حدود إلى كل شيء باستخدام منتقى `*`، ومنحها `border` بقيمة `1px solid black`. هذه خدعة تساعد على تصور أين العناصر وحجمها. سوف تقوم بإزالة هذا لاحقاً.
+
+# --hints--
+
+يجب عليك استخدام منتقي `*`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+يجب عليك استخدام خاصية `border` لتصميم جميع العناصر.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('border'));
+```
+
+يجب أن يكون لجميع العناصر حدود `1px solid black`.
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles?.border, '1px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md
new file mode 100644
index 00000000000..f2f942c1617
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ce.md
@@ -0,0 +1,61 @@
+---
+id: 5d822fd413a79914d39e98ce
+title: الخطوة ٦
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+إضافة `box-sizing` بقيمة `border-box` إلى كل شيء. هذا سيجعل الحدود لا يتم إضافتها ألى أحجام عناصرك.
+
+# --hints--
+
+يجب عليك استخدام خاصية `box-sizing`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('box-sizing'));
+```
+
+يجب عليك استخدام منتقي `*` الموجود.
+
+```js
+// Two selectors create two CSSStyleRule objects
+assert.equal(new __helpers.CSSHelp(document).getStyleDeclarations('*').length, 1);
+```
+
+يجب أن تحتوي جميع العناصر على `box-sizing` بقيمة `border-box`.
+
+```js
+const astStyles = new __helpers.CSSHelp(document).getStyle('*');
+assert.equal(astStyles.boxSizing, 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+}
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md
new file mode 100644
index 00000000000..e1648e0e911
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98cf.md
@@ -0,0 +1,69 @@
+---
+id: 5d822fd413a79914d39e98cf
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+يمكنك رؤية `body` (هو الصندوق الأكثر داخلاً في صفحتك)؛ والصندوق المحيط به هو عنصر `html`. اجعل `body` يملأ كامل نافذة العرض بواسطة إعطائه `height` بقيمة `100vh`. إزالة `margin` الافتراضي من `body` عن طريق تعيين `margin` إلى `0`. وأخيرا، عيّن خاصية `overflow` إلى `hidden` لإخفاء أي شريط تمرير يظهر عندما يمتد شيء ما إلى ما وراء نافذة العرض.
+
+# --hints--
+
+يجب عليك استخدام منتقي `body`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+`body` الخاص بك يجب أن يكون له `height` بقيمة `100vh`.
+
+```js
+const bodyStyles = new __helpers.CSSHelp(document).getStyle('body');
+assert.equal(bodyStyles?.height, '100vh');
+```
+
+`body` الخاص بك يجب أن يكون له `margin` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+يجب أن يكون عنصر `body` الخاص بك يحمل خاصية `overflow` بقيمة `hidden`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.overflow, 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md
new file mode 100644
index 00000000000..1bbf6ded536
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d0.md
@@ -0,0 +1,65 @@
+---
+id: 5d822fd413a79914d39e98d0
+title: الخطوة ٨
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+أنشئ عنصر `div` في `body` مع فئة `background-buildings`. وستكون هذه الحاوية لمجموعة من المباني.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `div`.
+
+```js
+assert.exists(document.querySelector('div'));
+```
+
+يجب أن يكون عنصرك `div` داخل `body`.
+
+```js
+assert(document.querySelector('div')?.parentElement?.localName === 'body');
+```
+
+يجب أن تحتوي عنصر `div` على فئة تسمي `background-buildings`
+
+```js
+assert([...document.querySelector('div')?.classList]?.includes('background-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md
new file mode 100644
index 00000000000..3136bc80409
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d1.md
@@ -0,0 +1,68 @@
+---
+id: 5d822fd413a79914d39e98d1
+title: الخطوة ٩
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+اعطي عنصر `.background-buildings` خصائص `width` و `height` من `100%` لجعله العرض والارتفاع مطبقان لحاوية `body`.
+
+# --hints--
+
+يجب عليك استخدام فئة `background-buildings` لتحديد العنصر الصحيح.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.background-buildings'));
+```
+
+يجب أن يكون لعنصر `.background-buildings` الخاص بك `width` من `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.width, '100%');
+```
+
+يجب أن يكون لعنصر `.background-buildings` الخاص بك `height` من `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md
new file mode 100644
index 00000000000..fd625c31895
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d2.md
@@ -0,0 +1,83 @@
+---
+id: 5d822fd413a79914d39e98d2
+title: الخطوة ١٠
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+ادخل `div` مع فئة `bb1` في حاوية المباني الخلفية. افتح مِلَفّك `styles.css`، وأعطي `.bb1` خاصية `width` بقيمة `10%`, وخاصية `height` بقيمة `70%`. "bb" هو اختصار إلى "background building"، سيكون هذا أول مبنيك.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` جديد.
+
+```js
+assert.equal(document.querySelectorAll('div').length, 2);
+```
+
+يجب أن تعطي `div` جديد فئة تسمى `bb1`.
+
+```js
+assert.exists(document.querySelector('div.bb1'));
+```
+
+يجب عليك استخدام منتقي الفئة `.bb1` لتصميم العنصر.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1'));
+```
+
+يجب عليك إعطاء عنصر `.bb1` خاصية `width` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.width, '10%');
+```
+
+يجب عليك إعطاء عنصر `.bb1` خاصية `height` بقيمة `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md
new file mode 100644
index 00000000000..4d61fc41c98
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d3.md
@@ -0,0 +1,105 @@
+---
+id: 5d822fd413a79914d39e98d3
+title: الخطوة ١١
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+أدخل أربع عناصر `div` في حاوية `.bb1`. أعطيهم الفئات `bb1a`, و`bb1b`, و`bb1c`, و`bb1d` بهذا الترتيب. سيتكون هذا المبنى من أربع أقسام.
+
+# --hints--
+
+يجب عليك إضافة أربع عناصر `div` جديدة.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 6);
+```
+
+يجب عليك إعطاء واحدة من عناصر `div` الجديدة فئة `bb1a`.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+يجب عليك إعطاء واحدة من عناصر `div` الجديدة فئة `bb1b`.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+يجب عليك إعطاء واحدة من عناصر `div` الجديدة فئة `bb1c`.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+يجب عليك إعطاء واحدة من عناصر `div` الجديدة فئة `bb1d`.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+```
+
+يجب عليك وضع عناصر `div` الجديدة في الترتيب الصحيح.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1a','bb1b') && __t('div.bb1b','bb1c') && __t('div.bb1c','bb1d'));
+```
+
+يجب عليك وضع عناصر `div` الجديدة ضمن عنصر `.bb1`.
+
+```js
+assert.equal(document.querySelectorAll('div.bb1 > div')?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+--fcc-editable-region--
+      <div class="bb1"></div>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md
new file mode 100644
index 00000000000..9742ca36b7a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d4.md
@@ -0,0 +1,138 @@
+---
+id: 5d822fd413a79914d39e98d4
+title: الخطوة ١٢
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+أمنح أجزاء من المبنى الخاص بك خاصتين `width` و `height` مع هذا القيم: `70%` و `10%` إلى فئة `.bb1a` وهذا القيم: `80%` و`10%` إلى فئة `.bb1b`, و هذا القيم: `90%`>و `10%` إلى فئة `.bb1c`, وهذا القيم: `100%` و `70%` إلى فئة `.bb1d`. تذكر أن النسب المئوية تتنسب إلى الوالد و لاحظ أن الارتفاع سوف يصل إلى 100٪ - ملئ الحاوية عمودياً.
+
+# --hints--
+
+يجب عليك استخدام منتقي الفئة لتصميم `.bb1a`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a'));
+```
+
+يجب عليك إعطاء `.bb1a` الـ `width` بقيمة `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width, '70%');
+```
+
+يجب عليك إعطاء `.bb1a` الـ `height` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height, '10%');
+```
+
+يجب عليك استخدام منتقي الفئة لتصميم `.bb1b`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b'));
+```
+
+يجب عليك إعطاء `.bb1b` الـ `width` بقيمة `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.width, '80%');
+```
+
+يجب عليك إعطاء `.bb1b` الـ `height` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height, '10%');
+```
+
+يجب عليك استخدام منتقي الفئة لتصميم `.bb1c`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c'));
+```
+
+يجب عليك إعطاء `.bb1c` الـ `width` بقيمة `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.width, '90%');
+```
+
+يجب عليك إعطاء `.bb1c` الـ `height` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height, '10%');
+```
+
+يجب عليك استخدام منتقي الفئة لتصميم `.bb1d`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d'));
+```
+
+يجب عليك إعطاء `.bb1d`. الـ `width` بقيمة `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.width, '100%');
+```
+
+يجب عليك إعطاء `.bb1d` الـ `height` بقيمة `70%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.height, '70%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
new file mode 100644
index 00000000000..8af55362cd3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
@@ -0,0 +1,112 @@
+---
+id: 5d822fd413a79914d39e98d5
+title: الخطوة ١٣
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Center the parts of your building by turning the `.bb1` element into a flexbox parent. Use the `flex-direction` and `align-items` properties to center the children.
+
+# --hints--
+
+لا يجب عليك تغيير خصائص `.bb1` `width` أو `height`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.width, '10%');
+assert.equal(bb1Style?.height, '70%');
+```
+
+يجب عليك إعطاء عناصر `.bb1` خاصية `display` بقيمة `flex`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.display, 'flex');
+```
+
+يجب عليك إعطاء عناصر `.bb1` خاصية `flex-direction` بقيمة `column`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.flexDirection, 'column');
+```
+
+يجب عليك إعطاء `.bb1` خاصية `align-items` بقيمة `center`.
+
+```js
+const bb1Style = new __helpers.CSSHelp(document).getStyle('.bb1');
+assert.equal(bb1Style?.alignItems, 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
new file mode 100644
index 00000000000..3bcec57163b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d6.md
@@ -0,0 +1,103 @@
+---
+id: 5d822fd413a79914d39e98d6
+title: الخطوة ١٤
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+الآن لديك شيء يشبه المبنى. أنت على استعداد لإنشاء متغيرك الأول. تعريف المتغيرة تبدأ بشرطّين (`-`) وتعطى اسما وقيمة مثل: `--variable-name: value;`. في قاعدة `bb1` أنشئ مُتغير اسمه `--building-color1` وأعطه قيمة `#999`.
+
+# --hints--
+
+يجب عليك إنشاء مُتغير جديد اسمه `--building-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--building-color1'));
+```
+
+يجب عليك تعريف مُتغير `--building-color1` داخل `.bb1`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+```
+
+يجب عليك إعطاء `--building-color1` قيمة `#999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#999');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md
new file mode 100644
index 00000000000..d0031a8431e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d7.md
@@ -0,0 +1,100 @@
+---
+id: 5d822fd413a79914d39e98d7
+title: خطوة ١٥
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+لاستخدام مُتغير، ضع اسم المُتغير بين قوسين مع `var` أمامهم مثل: `var(--variable-name)`. مهما كانت القيمة التي منحتها لمتغير سيتم تطبيقها على أي خاصية تستخدمها فيه.
+
+أضف المتغير `--building-color1` الذي قمت بإنشائه في الخطوة السابقة كقيمة خاصية `background-color` في فئة `.bb1a`.
+
+# --hints--
+
+يجب تعيين `background-color` لعنصر `.bb1a`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor)
+```
+
+يجب عليك استخدام `var(--building-color1)` لتعيين `background-color` لعنصر `.bb1a`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #999;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md
new file mode 100644
index 00000000000..f91125b6abf
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d8.md
@@ -0,0 +1,124 @@
+---
+id: 5d822fd413a79914d39e98d8
+title: الخطوة ١٦
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+استخدم نفس المٌتغير مثل `background-color` في فئات `.bb1b`, و`.bb1c`، و `.bb1d` ملأ بقية المبنى.
+
+# --hints--
+
+يجب تعيين `background-color` لعنصر `.bb1b`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor)
+```
+
+يجب عليك استخدام `var(--building-color1)` لتعيين `background-color` عنصر `.bb1b`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1b')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+يجب تعيين `background-color` لعنصر `.bb1c`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor)
+```
+
+يجب عليك استخدام `var(--building-color1)` لتعيين `background-color` عنصر `.bb1c`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1c')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+يجب تعيين `background-color` لعنصر `.bb1d`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1d')?.backgroundColor)
+```
+
+يجب عليك استخدام `var(--building-color1)` لتعيين `background-color` عنصر `.bb1d`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #999;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md
new file mode 100644
index 00000000000..7da6fb1531a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d9.md
@@ -0,0 +1,99 @@
+---
+id: 5d822fd413a79914d39e98d9
+title: الخطوة ١٧
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+غيّر قيمة المُتغير الخاص بك من `#999` إلى `#aa80ff` ويمكنك أن ترى كيف يتم تطبيقه في كل مكان تستخدم فيه المتغير. وهذه هي المِيزة الرئيسة لاستخدام المتغيرات، أن تكون قادراً على تغيير العديد من القيم بسرعة في ورقة تصميمك بمجرد تغيير قيمة المٌتغير.
+
+# --hints--
+
+يجب عليك تغيير قيمة مُتغير الخاصية `--building-color1` من `#999` إلى `#aa80ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1').trim(),'#aa80ff');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+--fcc-editable-region--
+  --building-color1: #999;
+--fcc-editable-region--
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md
new file mode 100644
index 00000000000..2c390e2b84d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98da.md
@@ -0,0 +1,133 @@
+---
+id: 5d822fd413a79914d39e98da
+title: الخطوة ١٨
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+يبدو المبنى الأول الخاص بك جيداً الآن. أدخل ثلاث عناصر `div` جديدة في `.background-buildings` و اعطيهم classes الآتية `bb2`, و`bb3`, و`bb4` بذلك الترتيب. وستكون هذه ثلاثة مبان أخرى للخلفية.
+
+# --hints--
+
+يجب عليك إنشاء `div` مع فئة `bb2`.
+
+```js
+assert.exists(document.querySelector('div.bb2'));
+```
+
+يجب عليك إنشاء `div` مع فئة `bb3`.
+
+```js
+assert.exists(document.querySelector('div.bb3'));
+```
+
+يجب عليك إنشاء `div` مع فئة `bb4`.
+
+```js
+assert.exists(document.querySelector('div.bb4'));
+```
+
+يجب عليك إنشاء 3 عناصر `div` جديدة.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 9);
+```
+
+يجب عليك وضع عناصر `div` ضمن عنصر `.background-buildings`.
+
+```js
+assert.equal(document.querySelector('div.background-buildings')?.children?.length, 4);
+```
+
+يجب عليك وضع عناصر الجديدة في الترتيب الصحيح.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.bb1','bb2') && __t('div.bb2','bb3') && __t('div.bb3','bb4'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md
new file mode 100644
index 00000000000..49d5aee6e44
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98db.md
@@ -0,0 +1,133 @@
+---
+id: 5d822fd413a79914d39e98db
+title: الخطوة ١٩
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+منح المباني الجديدة خصائص `width` و `height` بقيم: `10%` و `50%` إلى فئة `.bb2`, ثم `10%` و`55%` ألى فئة `.bb3`, انتهاءاً `11%` و `58%` إلى فئة `.bb4`. سوف تستخدم تقريبا كل الوحدات القائمة على النسبة المئوية و بعض المربعات المرنة لهذا المشروع، لذلك كل شيء سيكون مستجيبا تماما.
+
+# --hints--
+
+يجب عليك إعطاء `.bb2` خاصية `width` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.width, '10%');
+```
+
+يجب عليك إعطاء `.bb2` خاصية `height` بقيمة `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.height, '50%');
+```
+
+يجب عليك إعطاء `.bb3` خاصية `width` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.width, '10%');
+```
+
+يجب عليك إعطاء `.bb3` خاصية `height` بقيمة `55%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.height, '55%');
+```
+
+يجب عليك إعطاء `.bb4` خاصية `width` بقيمة `11%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.width, '11%');
+```
+
+يجب عليك إعطاء `.bb4` خاصية `height` بقيمة `58%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.height, '58%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md
new file mode 100644
index 00000000000..c60a23910e2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dc.md
@@ -0,0 +1,127 @@
+---
+id: 5d822fd413a79914d39e98dc
+title: الخطوة ٢٠
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+وهؤلاء المباني مرتبة حاليا بعضَها فوق بعض. أضف الخصائص `display: flex;`, و`align-items: flex-end;`, و `justify-content: space-evenly;` إلى فئة `background-buildings`. سيستخدم flexbox مرة أخرى لتساوي مساحة المباني على قاع العنصر.
+
+# --hints--
+
+يجب عليك إضافة `display` بقيمة `flex` إلى فئة `background-buildings`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.display, 'flex');
+```
+
+يجب عليك إضافة `align-items` بقيمة `flex-end` إلى فئة `background-buildings`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.alignItems, 'flex-end');
+```
+
+يجب عليك إضافة `justify-content` بقيمة `space-evenly` إلى فئة `background-buildings`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.background-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md
new file mode 100644
index 00000000000..ea6062f64f0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98dd.md
@@ -0,0 +1,142 @@
+---
+id: 5d822fd413a79914d39e98dd
+title: الخطوة ٢١
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+المباراة الفاصلة بين المباني. ممرهم معا عن طريق إضافة عنصرين `div` فارغين إلى الجزء العلوي `.background-buildings`، اثنتان أخريان في أسفلها، وواحدة أخرى في ما بين `.bb3` و `.bb4`. وستضاف هذه العناصر إلى المسافات المتكافئة (evenly-space) بين عناصر الحاوية، مما سيجعل المباني أكثر قربا من المركز.
+
+# --hints--
+
+يجب عليك إضافة عنصرين `div` جديدين قبل عنصر `.bb1`.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('bb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('bb1'));
+```
+
+يجب عليك إضافة عنصر `div` جديد واحد بين عنصر `.bb3` و `.bb4`.
+
+```js
+assert(document.querySelector('.bb3')?.nextElementSibling === document.querySelector('.bb4')?.previousElementSibling);
+```
+
+يجب عليك إضافة عنصرين `div` جديدين قبل عنصر `.bb4`.
+
+```js
+const bb4 = document.querySelector('.bb4');
+assert.exists(bb4?.nextElementSibling);
+assert.exists(bb4?.nextElementSibling?.nextElementSibling);
+```
+
+يجب عليك إضافة 5 عناصر `div` جديدة.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 14);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings">
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div class="bb4"></div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md
new file mode 100644
index 00000000000..3f03a524e45
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98de.md
@@ -0,0 +1,140 @@
+---
+id: 5d822fd413a79914d39e98de
+title: الخطوة ٢٢
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+إنشاء مُتغير جديد أسفل المُتغير الآخر يسمى `--building-color2` وإعطائه قيمة `#66cc99`. ثم عيّنها كخاصية `background-color` لعنصر `.bb2`.
+
+# --hints--
+
+يجب عليك تحديد مٌتغير خاصية جديد يسمى `--building-color2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color2'));
+```
+
+يجب عليك إعطاء `--building-color2` قيمة `#66cc99`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2').trim(), '#66cc99');
+```
+
+يجب عليك تعيين `background-color` ألى `.bb2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb2')?.backgroundColor);
+```
+
+يجب عليك تعيين `background-color` باستخدام مٌتغير `--building-color2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md
new file mode 100644
index 00000000000..71becde0946
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98df.md
@@ -0,0 +1,124 @@
+---
+id: 5d822fd413a79914d39e98df
+title: الخطوة ٢٣
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+لم ينجح ذلك. يجب عليك إضافة قيمة احتياطية إلى مٌتغير بوضعه كقيمة ثانية من حيث تستخدم المٌتغير مثل: `var(--variable-name, fallback-value)`. سوف تستخدم الخاصية القيمة الاحتياطية عندما تكون هناك مشكلة مع المٌتغير. إضافة قيمة احتياطية بقيمة `green` إلى `background-color` من `.bb2`.
+
+# --hints--
+
+ضف قيمة احتياطية بقيمة `green` إلى `background-color`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2,green)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md
new file mode 100644
index 00000000000..0d328d36050
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e0.md
@@ -0,0 +1,142 @@
+---
+id: 5d822fd413a79914d39e98e0
+title: الخطوة ٢٤
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+إنشاء مٌتغير جديد أسفل المتغيرات الأخرى باسم `--building-color3` وإعطائه قيمة `#cc6699`. ثم استخدمه في `background-color` من فئة `.bb3` وإعطائه قيمة احتياطية من `pink`.
+
+# --hints--
+
+يجب عليك تحديد مٌتغير خاصية جديد يسمى `--building-color3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color3'));
+```
+
+يجب أن تعطي `--building-color3` قيمة `#cc6699`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+يجب عليك تعيين `background-color` إلى `.bb3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb3')?.backgroundColor);
+```
+
+يجب عليك تعيين `background-color` باستخدام `--building-color3` المٌتغير مع نسخة احتياطية من `pink`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3,pink)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md
new file mode 100644
index 00000000000..673a4954b20
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e1.md
@@ -0,0 +1,155 @@
+---
+id: 5d822fd413a79914d39e98e1
+title: خطوة ٢٥
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+لم يفعل ذلك، المتغيرات التي أعلنتها في `.bb1` لا تتسلسل إلى عنصران متوازيان `.bb2` و `.bb3`. هذه هي طريقة عمل CSS. بسبب هذا، غالباً ما يتم الإعلان عن المتغيرات في منتقي `:root`. هذا هو أعلى مستوى منتقى في CSS؛ وضع المتغيرات هناك سيجعلها قابلة للاستخدام في كل مكان. أضف منتقي `:root` إلى الجزء العلوي من stylesheet، ونقل جميع إعلانات متغيرك إلى هناك.
+
+# --hints--
+
+يجب أن تعلن منتقي `:root` في الجزء العلوي من stylesheet.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root'));
+```
+
+يجب عليك تعريف `--building-color1` بقيمة `#aa80ff` في منتقي `:root`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color1')?.trim(), '#aa80ff');
+```
+
+يجب عليك تعريف `--building-color2` بقيمة `#66cc99` في منتقي `:root`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color2')?.trim(), '#66cc99');
+```
+
+يجب عليك تعريف `--building-color3` بقيمة `#cc6699` في منتقي `:root`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color3')?.trim(), '#cc6699');
+```
+
+يجب عليك إزالة متغيرات الخاصية المخصصة من `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color1'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color2'));
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1')?.getPropertyValue('--building-color3'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3, pink);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md
new file mode 100644
index 00000000000..6c81ffc1a51
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e2.md
@@ -0,0 +1,135 @@
+---
+id: 5d822fd413a79914d39e98e2
+title: الخطوة ٢٦
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+الآن بعد أن تعديل الأخطاء و المباني إلى الألوان الصحيحة، يمكنك إزالة القيم الاحتياطية في المكانين الذين تم استخدامهما. أعمل ذلك.
+
+# --hints--
+
+يجب عليك إزالة القيمة الاحتياطية في `background-color` من `.bb2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+يجب عليك إزالة القيمة الاحتياطية في `background-color` من `.bb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb3')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2, green);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3, pink);
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md
new file mode 100644
index 00000000000..ba6b8ac48c3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e3.md
@@ -0,0 +1,144 @@
+---
+id: 5d822fd413a79914d39e98e3
+title: الخطوة ٢٧
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+أنشئ مٌتغير آخر اسمه `--building-color4` واعطيه قيمة `#538cc6`. تيقن من أنه هذه المرة في منتقي `:root`. ثم استخدمها لملء آخر مبنى.
+
+# --hints--
+
+يجب عليك تحديد مٌتغير خاصية جديد يسمى `--building-color4`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).isPropertyUsed('--building-color4'));
+```
+
+يجب أن تعطي `--building-color4` قيمة `#538cc6` في منتقي `:root`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--building-color4').trim(), '#538cc6');
+```
+
+يجب عليك إضافة `background-color: var(--building-color4)` في منتقي `.bb4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb4')?.getPropVal('background-color', true), 'var(--building-color4)')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md
new file mode 100644
index 00000000000..14c7b929142
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e4.md
@@ -0,0 +1,147 @@
+---
+id: 5d822fd413a79914d39e98e4
+title: الخطوة ٢٨
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+المباني الخلفية بدأت تبدو جيدة جداً. أنشئ `div` جديد تحت عنصر `.background-buildings` وقم بإعطائه فئة من `foreground-buildings`. ستكون هذه حاوية أخرى للمزيد من المباني.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` جديد.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 15);
+```
+
+يجب أن يأتي `div` الجديد بعد عنصر `div.background-buildings`.
+
+```js
+assert.exists(document.querySelector('div.background-buildings + div'));
+```
+
+يجب أن تحتوي عنصر `div` على فئة يسمي `foreground-buildings`.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md
new file mode 100644
index 00000000000..cef2d763b1b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e5.md
@@ -0,0 +1,161 @@
+---
+id: 5d822fd413a79914d39e98e5
+title: الخطوة ٢٩
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+تريد أن تجلس حاوية `.foreground-buildings` فوق عنصر `.background-buildings`. أعطيه `width` و `height` من `100%`, وعيّن `position` بقيمة `absolute`, وضف `top` بقيمة `0`. هذا سيجعلها مساوية لحجم الجسم وسيحرك بدايته إلى الزاوية العلوية اليسرى.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.foreground-buildings`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+يجب عليك إعطاء عنصر `.foreground-buildings` خاصية `width` من `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.width, '100%');
+```
+
+يجب عليك إعطاء عنصر `.foreground-buildings` خاصية `height` من `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.height, '100%');
+```
+
+يجب عليك إعطاء عنصر `.foreground-buildings` خاصية `position` من `absolute`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position, 'absolute');
+```
+
+يجب عليك إعطاء عنصر `.foreground-buildings` خاصية `top` من `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings"></div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md
new file mode 100644
index 00000000000..c062537aafb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e6.md
@@ -0,0 +1,192 @@
+---
+id: 5d822fd413a79914d39e98e6
+title: الخطوة ٣٠
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+لا ست `div` عناصر داخل `.foreground-buildings` ومنحهم فئات `fb1` حتي `fb6` بالترتيب. "fb" تمثل "foreground building". وستكون هذه ستة مبان أخرى في المقدمة.
+
+# --hints--
+
+يجب عليك إنشاء `div` جديد مع class يدعى `fb1`.
+
+```js
+assert.exists(document.querySelector('div.fb1'));
+```
+
+يجب عليك إنشاء `div` جديد مع class يدعى `fb2`.
+
+```js
+assert.exists(document.querySelector('div.fb2'));
+```
+
+يجب عليك إنشاء `div` جديد مع class يدعى `fb3`.
+
+```js
+assert.exists(document.querySelector('div.fb3'));
+```
+
+يجب عليك إنشاء `div` جديد مع class يدعى `fb4`.
+
+```js
+assert.exists(document.querySelector('div.fb4'));
+```
+
+يجب عليك إنشاء `div` جديد مع class يدعى `fb5`.
+
+```js
+assert.exists(document.querySelector('div.fb5'));
+```
+
+يجب عليك إنشاء `div` جديد مع class يدعى `fb6`.
+
+```js
+assert.exists(document.querySelector('div.fb6'));
+```
+
+يجب عليك وضع عناصر `div` الجديدة يحمل عنصر `.foreground-buildings`.
+
+```js
+assert.exists(document.querySelector('div.foreground-buildings > div.fb1'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb2'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb3'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb4'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb5'));
+assert.exists(document.querySelector('div.foreground-buildings > div.fb6'));
+```
+
+يجب عليك وضع عناصر `div` الجديدة في الترتيب الصحيح.
+
+```js
+function __t(a, b) {
+  return [...document.querySelector(a)?.nextElementSibling?.classList]?.includes(b);
+}
+assert(__t('div.fb1','fb2') && __t('div.fb2','fb3') && __t('div.fb3','fb4') && __t('div.fb4', 'fb5') && __t('div.fb5', 'fb6'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+    <div class="foreground-buildings"></div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md
new file mode 100644
index 00000000000..0c41ac0c4e5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e7.md
@@ -0,0 +1,253 @@
+---
+id: 5d822fd413a79914d39e98e7
+title: الخطوة ٣١
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+قم بإعطاء العناصر الستة الجديدة الخصائص `width` و `height` بالقيم: `10%` و `60%` إلى `.fb1`، و`10%` و`40%` إلى `.fb2`, و`10%` و`35%` إلى `.fb3`, و`8%` و`45%` إلى `.fb4`, و`10%` و `33%` إلى `.fb5`, و`9%` و `38%` إلى `.fb6`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.fb1`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb1'));
+```
+
+يجب عليك إعطاء عنصر `.fb1` خاصية `width` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.width, '10%');
+```
+
+يجب عليك إعطاء عنصر `.fb1` خاصية `height` بقيمة `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.height, '60%');
+```
+
+يجب عليك إنشاء منتقي `.fb2`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb2'));
+```
+
+يجب عليك إعطاء عنصر `.fb2` خاصية `width` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.width, '10%');
+```
+
+يجب عليك إعطاء عنصر `.fb2` خاصية `height` بقيمة `40%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.height, '40%');
+```
+
+يجب عليك إنشاء منتقي `.fb3`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb3'));
+```
+
+يجب عليك إعطاء عنصر `.fb3` خاصية `width` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.width, '10%');
+```
+
+يجب عليك إعطاء عنصر `.fb3` خاصية `height` بقيمة `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.height, '35%');
+```
+
+يجب عليك إنشاء منتقي `.fb4`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb4'));
+```
+
+يجب عليك إعطاء عنصر `.fb4` خاصية `width` بقيمة `8%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.width, '8%');
+```
+
+يجب عليك إعطاء عنصر `.fb4` خاصية `height` بقيمة `45%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.height, '45%');
+```
+
+يجب عليك إنشاء منتقي `.fb5`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb5'));
+```
+
+يجب عليك إعطاء عنصر `.fb5` خاصية `width` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.width, '10%');
+```
+
+يجب عليك إعطاء عنصر `.fb5` خاصية `height` بقيمة `33%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.height, '33%');
+```
+
+يجب عليك إنشاء منتقي `.fb6`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.fb6'));
+```
+
+يجب عليك إعطاء عنصر `.fb6` خاصية `width` بقيمة `9%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.width, '9%');
+```
+
+يجب عليك إعطاء عنصر `.fb6` خاصية `height` بقيمة `38%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.height, '38%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md
new file mode 100644
index 00000000000..eaf351db20a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e8.md
@@ -0,0 +1,190 @@
+---
+id: 5d822fd413a79914d39e98e8
+title: الخطوة ٣٢
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+أضف نفس خصائص `display`, و`align-items`، و `justify-content` إلى `.foreground-buildings` التي استخدمتها في `.background-buildings`. ومرة أخرى، هذا سيستخدم Flexbox لتساوي مساحة المباني في قاع حاويتها.
+
+# --hints--
+
+يجب عليك إعطاء `.foreground-buildings` خاصية `display` بقيمة `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.display, 'flex');
+```
+
+يجب عليك إعطاء `.foreground-buildings` خاصية `align-items` بقيمة `flex-end`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.alignItems, 'flex-end');
+```
+
+يجب عليك إعطاء `.foreground-buildings` خاصية `justify-content` بقيمة `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.justifyContent, 'space-evenly');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md
new file mode 100644
index 00000000000..1aa64b3d1a1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98e9.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98e9
+title: الخطوة 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+ينبغي لك تحسين كودك. أنقل خصائص `position` و `top` والقيم من `.foreground-buildings` إلى `.background-buildings`. ثم اختار `.background-buildings` و `.foreground-buildings`، وطبق الأساليب بفعالية على كلا العنصرين. يمكنك استخدام فاصلة (`,`) لفصل المحددات مثل: `selector1, selector2`.
+
+# --hints--
+
+لا يجب عليك إزالة تعريف `.foreground-buildings`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+يجب إزالة خاصية `position` من `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.position);
+```
+
+يجب إزالة خاصية `top` من `.foreground-buildings`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.foreground-buildings')?.top);
+```
+
+يجب عليك إضافة `position` بقيمة `absolute` إلى `.background-buildings, .foreground-buildings`.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.position, 'absolute');
+```
+
+يجب عليك إضافة `top` بقيمة `0` إلى `.background-buildings, .foreground-buildings`.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.equal(eitherOr()?.top, '0px');
+```
+
+استخدام فاصلة لاستعمال كل من `.foreground-buildings` و `.background-buildings` في نفس تعريف.
+
+```js
+function eitherOr() {
+  const a = new __helpers.CSSHelp(document)
+  return a.getStyle('.background-buildings, .foreground-buildings') ?? a.getStyle('.foreground-buildings, .background-buildings');
+}
+assert.exists(eitherOr());
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+--fcc-editable-region--
+.background-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md
new file mode 100644
index 00000000000..488b464a60a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ea.md
@@ -0,0 +1,181 @@
+---
+id: 5d822fd413a79914d39e98ea
+title: الخطوة ٣٤
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+الآن بعد ما فعلت، يمكنك حذف التعريف القديم `.foreground-buildings` وجميع خصائصه لأنها لم تعد مطلوبة بعد الآن.
+
+# --hints--
+
+يجب عليك حذف التعريف `.foreground-buildings` للأسلوب بِرُمَّته.
+
+```js
+assert.notExists(new __helpers.CSSHelp(document).getStyle('.foreground-buildings'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md
new file mode 100644
index 00000000000..dd26acb0040
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98eb.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98eb
+title: الخطوة ٣٥
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+نطحات السحاب تجتمع معا حلياً. قم بملء خاصية `background-color` للمباني الأمامية. استخدم متغير `--building-color1` الخاص بك لملء `.fb3` و`.fb4`, و`--building-color2` إلى `.fb5`، و `--building-color3` إلى `.fb2` و `.fb6`، و `--building-color4` إلى `.fb1`.
+
+# --hints--
+
+يجب عليك إعطاء `.fb1` الـ `background-color` بقيمة `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb1')?.getPropVal('background-color', true), 'var(--building-color4)');
+```
+
+يجب عليك إعطاء `.fb2` الـ `background-color` بقيمة `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb2')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+يجب عليك إعطاء `.fb3` الـ `background-color` بقيمة `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb3')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+يجب عليك إعطاء `.fb4` الـ `background-color` بقيمة `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.getPropVal('background-color', true), 'var(--building-color1)');
+```
+
+يجب عليك إعطاء `.fb5` الـ `background-color` بقيمة `--building-color2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.getPropVal('background-color', true), 'var(--building-color2)');
+```
+
+يجب عليك إعطاء `.fb6` الـ `background-color` بقيمة `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb6')?.getPropVal('background-color', true), 'var(--building-color3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md
new file mode 100644
index 00000000000..e382b078361
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ec.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98ec
+title: الخطوة ٣٦
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+مرر المباني معا مرة أخرى عن طريق إضافة عنصرين فارغين `div` داخل الجزء العلوي والأسفل من `.foreground-buildings` عنصر، وعنصر آخر بين `.fb2` و `.fb3`.
+
+# --hints--
+
+يجب عليك إضافة عنصرين `div` كأول فرع من `.foreground-buildings`.
+
+```js
+const bBuildings = document.querySelector('.background-buildings')?.children;
+assert(![...bBuildings?.[0]?.classList]?.includes('fb1'));
+assert(![...bBuildings?.[1]?.classList]?.includes('fb1'));
+```
+
+يجب عليك إضافة عنصر `div` جديد واحد بين عنصر `.fb2` و `.fb3`.
+
+```js
+assert(document.querySelector('.fb2')?.nextElementSibling === document.querySelector('.fb3')?.previousElementSibling);
+```
+
+
+يجب عليك إضافة عنصرين `div` كأول فرع من `.foreground-buildings`.
+
+```js
+const fb6 = document.querySelector('.fb6');
+assert.exists(fb6?.nextElementSibling);
+assert.exists(fb6?.nextElementSibling?.nextElementSibling);
+```
+
+يجب عليك إضافة 5 عناصر `div` جديدة.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 26);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+    <div class="foreground-buildings">
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md
new file mode 100644
index 00000000000..4e35a1ce35b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ed.md
@@ -0,0 +1,202 @@
+---
+id: 5d822fd413a79914d39e98ed
+title: الخطوة ٣٧
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+نقل موضع `.fb4` نسبة إلى أين هو الآن بإضافة `position` بقيمة `relative` مع `left` بقيمة `10%`. الشيء نفسه إلى `.fb5` ولكن استخدم `right` بدلاً من `left`. وهذا سيغطي المساحة البيضاء المتبقية بين المباني.
+
+# --hints--
+
+يجب أن تعطي `.fb4` خاصية `position` بقيمة `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.position, 'relative');
+```
+
+يجب عليك إعطاء `.fb4` خاصية `left` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb4')?.left, '10%');
+```
+
+يجب أن تعطي `.fb5` خاصية `position` بقيمة `relative`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.position, 'relative');
+```
+
+يجب عليك إعطاء `.fb5` خاصية `right` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.fb5')?.right, '10%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md
new file mode 100644
index 00000000000..504e3687d3c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ee.md
@@ -0,0 +1,196 @@
+---
+id: 5d822fd413a79914d39e98ee
+title: الخطوة ٣٨
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+بدأت التعليمات البرمجية الخاصة بك في الحصول على وقت طويل. قم بإضافة تعليق أعلى class الـ `.fb1` الذي به النص `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` لمساعدة الناس على فهم الكود الخاص بك. فوق class الـ `.bb1` قم بإضافة تعليق آخر يقول `BACKGROUND BUILDINGS - "bb" stands for "background building"`. إذا كنت لا تتذكر، فإن التعليقات في CSS تبدو مثل: `/* Comment here */`.
+
+# --hints--
+
+يجب عليك إضافة التعليق `BACKGROUND BUILDINGS - "bb" stands for "background building"` فوق منتقى `.bb1`.
+
+```js
+assert(/\/\*\s*BACKGROUND BUILDINGS - "bb" stands for "background building"\s*\*\//gi.test(code));
+```
+
+يجب عليك إضافة التعليق `FOREGROUND BUILDINGS - "fb" stands for "foreground building"` فوق منتقى `.fb1`.
+
+```js
+assert(/\/\*\s*FOREGROUND BUILDINGS - "fb" stands for "foreground building"\s*\*\//gi.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md
new file mode 100644
index 00000000000..4d446299da8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ef.md
@@ -0,0 +1,197 @@
+---
+id: 5d822fd413a79914d39e98ef
+title: الخطوة ٣٩
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+إنشاء متغير جديد في `:root` يسمى `--window-color1` وإعطائه قيمة `black`. سيكون هذا لون ثانوي للمباني الأرجوانية.
+
+# --hints--
+
+يجب عليك إنشاء متغير جديد في `:root` يسمى `--window-color1`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed('--window-color1'));
+```
+
+يجب أن تعطي المتغير خاصية `--window-color1` بقيمة `black`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color1').trim(), 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md
new file mode 100644
index 00000000000..f4a974d9e65
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f0.md
@@ -0,0 +1,218 @@
+---
+id: 5d822fd413a79914d39e98f0
+title: الخطوة ٤٠
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+المساحات في CSS هي طريقة للانتقال بين الألوان عبر مسافة العنصر. يتم تطبيقها على خاصية `background` وبناء الجملة يبدو مثل:
+
+```css
+gradient-type(
+  color1,
+  color2
+);
+```
+
+في المثال، `color1` صُلْب في الأعلى، `color2` صُلْب في الأسفل، وفي ما بينها ينتقل بالتساوي من واحد إلى آخر. في `.bb1a`، إضافة عنصر تدرج من نوع `linear-gradient` إلى خاصية `background` مع `--building-color1` كاللون الأول و `--window-color1` كالثاني.
+
+# --hints--
+
+يجب عليك تطبيق `background` على `.bb1a`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+```
+
+يجب عليك إعطاء `background` بنوع `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background, 'linear-gradient');
+```
+
+يجب عليك إعطاء `background` بنوع `linear-gradient` بدءاً من `--building-color1`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1');
+```
+
+يجب عليك إعطاء `background` بنوع `linear-gradient` بدءاً من `--window-color1`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1a')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md
new file mode 100644
index 00000000000..58364967b92
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f1.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e98f1
+title: الخطوة ٤١
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+تريد إضافة نفس معامل التدرج إلى القسمين التاليين. بدلاً من ذلك، أنشئ منتقي لفئة جديدة يسمى `bb1-window`، وانقل الخصائص `height` و `background` وقيمهم من `.bb1a` إلى منتقي الفئة الجديد.
+
+# --hints--
+
+يجب عليك إنشاء منتقي لفئة جديد يسمى `bb1-window`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.bb1-window'));
+```
+
+يجب عليك نقل خاصية `height` والقيمة من `.bb1a` إلى `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.height);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.height, '10%');
+```
+
+يجب عليك نقل خاصية `background` والقيمة من `.bb1a` إلى `.bb1-window`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.background);
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1-window')?.getPropVal('background', true), 'linear-gradient(var(--building-color1),var(--window-color1))');
+```
+
+لا يجب عليك نقل خاصية `background-color` من `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+يجب ألا تحرك خاصية `width` من `.bb1a`.
+
+```js
+assert.notEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.width);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  height: 10%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md
new file mode 100644
index 00000000000..45fbd280641
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f2.md
@@ -0,0 +1,237 @@
+---
+id: 5d822fd413a79914d39e98f2
+title: الخطوة ٤٢
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+إضافة فئة `bb1-window` الجديدة إلى عناصر `.bb1a`، و`.bb1b`، و `.bb1c`. وهذا سيطبق معامل التدرج عليهم.
+
+# --hints--
+
+لا يجب عليك إزالة فئة `bb1a`.
+
+```js
+assert.exists(document.querySelector('div.bb1a'));
+```
+
+يجب عليك إضافة فئة `bb1-window` إلى عنصر `.bb1a`.
+
+```js
+assert.exists(document.querySelector('div.bb1a.bb1-window'));
+```
+
+لا يجب عليك إزالة فئة `bb1b`.
+
+```js
+assert.exists(document.querySelector('div.bb1b'));
+```
+
+يجب عليك إضافة فئة `bb1-window` إلى عنصر `.bb1b`.
+
+```js
+assert.exists(document.querySelector('div.bb1b.bb1-window'));
+```
+
+لا يجب عليك إزالة فئة `bb1c`.
+
+```js
+assert.exists(document.querySelector('div.bb1c'));
+```
+
+يجب عليك إضافة فئة `bb1-window` إلى عنصر `.bb1c`.
+
+```js
+assert.exists(document.querySelector('div.bb1c.bb1-window'));
+```
+
+لا يجب عليك تغيير عنصر `.bb1d`.
+
+```js
+assert.exists(document.querySelector('div.bb1d'));
+assert.notExists(document.querySelector('div.bb1d.bb1-window'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a"></div>
+        <div class="bb1b"></div>
+        <div class="bb1c"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md
new file mode 100644
index 00000000000..5a914ebcfd3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f3.md
@@ -0,0 +1,222 @@
+---
+id: 5d822fd413a79914d39e98f3
+title: الخطوة ٤٣
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+لا تحتاج إلى خصائص `height` أو `background-color` في `.bb1a`، أو`.bb1b`, أو `.bb1c` بعد الآن، لذا إزالهم.
+
+# --hints--
+
+يجب عليك إزالة `background-color` من `.bb1a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1a')?.backgroundColor);
+```
+
+يجب عليك إزالة خاصية `height` من `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.height);
+```
+
+يجب عليك إزالة خاصية `background-color` من `.bb1b`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1b')?.backgroundColor);
+```
+
+يجب عليك إزالة خاصية `height` من `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.height);
+```
+
+يجب عليك إزالة خاصية `background-color` من `.bb1c`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('.bb1c')?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1b {
+  width: 80%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+
+.bb1c {
+  width: 90%;
+  height: 10%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md
new file mode 100644
index 00000000000..39d0d3e6548
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f4.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e98f4
+title: الخطوة ٤٤
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+يمكن للتدريجات استخدام أكبر عدد مما تريد من الألوان مثل:
+
+```css
+gradient-type(
+  color1,
+  color2,
+  color3
+);
+```
+
+أضف `linear-gradient` إلى `.bb1d` مع `orange` كاللون الأول، و`--building-color1` كالثاني و `--window-color1` كثالث. تذكر أن تستخدم معامل التدرج على خاصية `background`.
+
+# --hints--
+
+يجب عليك استخدام `background` على `.bb1d`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background);
+```
+
+يجب أن تعطي الخاصية `background` وظيفة `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'linear-gradient');
+```
+
+يجب عليك استخدام `orange` كاللون الأول في `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange');
+```
+
+يجب عليك استخدام `--building-color1` كاللون الثاني في `linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)');
+```
+
+يجب عليك استخدام `--window-color1` كلون ثالث في `linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1),var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md
new file mode 100644
index 00000000000..08f793e32fb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f5.md
@@ -0,0 +1,198 @@
+---
+id: 5d822fd413a79914d39e98f5
+title: الخطوة ٤٥
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+إنها مخفية بعض الشيء خلف المباني المقدمة، لكن يمكنك أن ترى معامل التدرج الألوان الثلاثة هناك. بما أنك تستخدم ذلك الآن، أزل خاصية `background-color` من `.bb1d`.
+
+# --hints--
+
+يجب عليك إزالة خاصية `background-color` والقيمة من `.bb1d`
+
+```js
+assert.notMatch(code, /\.bb1d\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background-color: var(--building-color1);
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md
new file mode 100644
index 00000000000..6c79a488df7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f6.md
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f6
+title: الخطوة ٤٦
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+يمكنك تحديد المكان الذي تريد أن يكتمل فيه الانتقال ألتتدرج عن طريق إضافته إلى اللون مثل:
+
+```css
+gradient-type(
+  color1,
+  color2 20%,
+  color3
+);
+```
+
+هنا، سوف تنتقل من `color1` إلى `color2` بين `0%` و`20%` من العنصر ثم تنتقل إلى `color3` للبقية. أضف `80%` إلى `--building-color1` من عنصر التدرج `.bb1d` حتى تتمكن من رؤيته في الإجراء.
+
+# --hints--
+
+يجب عليك إضافة قيمة `80%` إلى لون `--building-color1` في `linear-gradient` من `.bb1d`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(orange,var(--building-color1)80%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md
new file mode 100644
index 00000000000..475eba20153
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f7.md
@@ -0,0 +1,203 @@
+---
+id: 5d822fd413a79914d39e98f7
+title: الخطوة ٤٧
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+إزالة `orange` من `.bb1d` وتغيير `80%` إلى `50%`. هذا سيجعل `--building-color1` صلبا للنصف الأعلى، ثم الانتقال إلى `--window-color1` للنصف السفلي.
+
+# --hints--
+
+يجب عليك إزالة `orange` من `linear-gradient`.
+
+```js
+assert.notInclude(new __helpers.CSSHelp(document).getStyle('.bb1d')?.background, 'orange');
+```
+
+يجب عليك تغيير اللون الأول `linear-gradient` إلى الانتقال في `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb1d')?.getPropVal('background', true), 'linear-gradient(var(--building-color1)50%,var(--window-color1))');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2"></div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+--fcc-editable-region--
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      orange,
+      var(--building-color1) 80%,
+      var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md
new file mode 100644
index 00000000000..d792586a6b5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f8.md
@@ -0,0 +1,210 @@
+---
+id: 5d822fd413a79914d39e98f8
+title: الخطوة ٤٨
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+ادمج عنصران `div` جديدان داخل `.bb2`, وأعطيهم الـ classes الاتية `bb2a` و `bb2b`، بهذا الترتيب. وسيكون هذان القسمان (sections) لهذا المبنى.
+
+# --hints--
+
+يجب عليك إضافة عنصرين `div` إلى `.bb2`.
+
+```js
+assert.equal(document.querySelector('div.bb2')?.children?.length, 2);
+```
+
+يجب عليك إعطاء أول `div` الـ class الاتي `bb2a`.
+
+```js
+assert.exists(document.querySelector('div.bb2a'));
+```
+
+يجب عليك إعطاء ثاني `div` الـ class الاتي `bb2b`.
+
+```js
+assert.exists(document.querySelector('div.bb2b'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+--fcc-editable-region--
+      <div class="bb2"></div>
+--fcc-editable-region--
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md
new file mode 100644
index 00000000000..d6128a1f110
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98f9.md
@@ -0,0 +1,207 @@
+---
+id: 5d822fd413a79914d39e98f9
+title: الخطوة ٤٩
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+امنح `.bb2b` خصائص `width` و `height` من `100%` لجعلها تملأ حاوية المبنى. سوف تضيف شيئا في الأعلى بعد قليل.
+
+# --hints--
+
+يجب عليك إعطاء `.bb2b` خاصية `width` بقيمة `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.width, '100%');
+```
+
+يجب عليك إعطاء `.bb2b` خاصية `height` بقيمة `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2b')?.height, '100%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md
new file mode 100644
index 00000000000..586516bd21f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fa.md
@@ -0,0 +1,211 @@
+---
+id: 5d822fd413a79914d39e98fa
+title: الخطوة 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+قم بإنشاء متغير جديد في `:root` يسمى `window-color2` بقيمة `#8cd9b3`. سيتم استخدام هذا اللون كلون ثانوي لهذا المبنى.
+
+# --hints--
+
+يجب عليك إنشاء خاصية متغير جديد يسمى `window-color2` في `:root`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2'));
+```
+
+يجب أن تعطي `window-color2` قيمة `#8cd9b3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(':root')?.getPropertyValue('--window-color2').trim(), '#8cd9b3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/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
new file mode 100644
index 00000000000..a53fe6a57f0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fb.md
@@ -0,0 +1,240 @@
+---
+id: 5d822fd413a79914d39e98fb
+title: الخطوة ٥١
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+غالباً ما تتغير التحولات المتداخلة تدريجياً من لون إلى آخر. يمكنك أن تجعل التغيير خطاً صلباً مثل:
+
+```css
+linear-gradient(
+  var(--first-color) 0%,
+  var(--first-color) 40%,
+  var(--second-color) 40%,
+  var(--second-color) 80%
+);
+```
+
+أضف `linear-gradient` إلى `.bb2b` الذي يستخدم `--building-color2` من `0%` إلى `6%` و `--window-color2` من `6%` إلى `9%`.
+
+# --hints--
+
+يجب عليك إعطاء `.bb2b` خاصية `background`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background);
+```
+
+يجب عليك استخدام `linear-gradient` على `background`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.background, "linear-gradient");
+```
+
+يجب عليك استخدام `--building-color2` من `0%` إلى `6%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /var\(--building-color2\)(0%)?,var\(--building-color2\)6%/);
+```
+
+يجب عليك استخدام `--window-color2` من `6%` إلى `9%`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "var(--window-color2)6%,var(--window-color2)9%");
+```
+
+`.bb2b` يجب أن يكون نقل `linear-gradient` من `--building-color2` يبدء في `0%` ينتهي في `6%`، و`--window-color2` يبدء في `6%` ينتهي في `9%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), /linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)6%,var\(--window-color2\)6%,var\(--window-color2\)9%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md
new file mode 100644
index 00000000000..4466fcd51c4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fc.md
@@ -0,0 +1,211 @@
+---
+id: 5d822fd413a79914d39e98fc
+title: الخطوة ٥٢
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+يمكنك أن ترى تغير اللون الصُّلْب في الجزء العلوي من القسم. تغيير نوع وظيفة التدرج من `linear-gradient` إلى `repeating-linear-gradient` لهذا القسم. هذا سيجعل الألوان الأربعة لمكرر تدرجك حتى يصل إلى أسفل العنصر؛ إعطائك بعض الخطوط، وحفظك من الحاجة إلى إضافة مجموعة من العناصر لإنشائها.
+
+# --hints--
+
+يجب عليك تغيير خاصية `background` قي `.bb2b` من استخدام `linear-gradient` إلى استخدام `repeating-linear-gradient`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(`.bb2b`)?.getPropVal('background', true), "repeating-linear-gradient(var(--building-color2),var(--building-color2)6%,var(--window-color2)6%,var(--window-color2)9%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md
new file mode 100644
index 00000000000..904eae54d66
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fd.md
@@ -0,0 +1,209 @@
+---
+id: 5d822fd413a79914d39e98fd
+title: الخطوة ٥٣
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+في الخطوات القليلة التالية، سوف تستخدم بعض الحيل مع حدود CSS لقلب جزء `.bb2a` إلى مثلث في الجزء العلوي من المبنى. أولاً، أزل `background-color` من `.bb2` لأنك لم تعد بحاجة إليها.
+
+# --hints--
+
+أزل `background-color` من `.bb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2")?.backgroundColor);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+    );
+}
+--fcc-editable-region--
+.bb2 {
+  width: 10%;
+  height: 50%;
+  background-color: var(--building-color2);
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md
new file mode 100644
index 00000000000..6f55bab15c2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98fe.md
@@ -0,0 +1,260 @@
+---
+id: 5d822fd413a79914d39e98fe
+title: الخطوة ٥٤
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+إضافة هذه الخصائص إلى `.bb2a`:
+
+```css
+margin: auto;
+width: 5vw;
+height: 5vw;
+border-top: 1vw solid #000;
+border-bottom: 1vw solid #000;
+border-left: 1vw solid #999;
+border-right: 1vw solid #999;
+```
+
+بعد إضافة هذه, يمكنك أن ترى كيف أن الحدود العنصر السميكة تعطيك بعض الزوايا حيث يلتقي جانبانها. ستستخدم تلك الحدود السفلى كسطح المبنى.
+
+# --hints--
+
+يجب عليك إعطاء `.bb2a` خاصية `margin` من `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.margin, "auto");
+```
+
+يجب عليك إعطاء `.bb2a` خاصية `width` بقيمة `auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.width, "5vw");
+```
+
+يجب عليك إعطاء `.bb2a` خاصية `height` بقيمة `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.height, "5vw");
+```
+
+يجب عليك إعطاء `.bb2a` خاصية `border-top` بقيمة `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderTop, "1vw solid rgb(0, 0, 0)");
+```
+
+يجب عليك إعطاء `.bb2a` خاصية `border-bottom` بقيمة `1vw solid #000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderBottom, "1vw solid rgb(0, 0, 0)");
+```
+
+يجب عليك إعطاء `.bb2a` خاصية `border-left` بقيمة `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderLeft, "1vw solid rgb(153, 153, 153)");
+```
+
+يجب عليك إعطاء `.bb2a` خاصية `border-right` بقيمة `1vw solid #999`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.bb2a')?.borderRight, "1vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md
new file mode 100644
index 00000000000..455d81fb9d6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98ff.md
@@ -0,0 +1,238 @@
+---
+id: 5d822fd413a79914d39e98ff
+title: الخطوة ٥٥
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+بعد ذلك، إزالة `width` و `height` من `.bb2a`، وتغيير `border-left` و `border-right` لاستخدام `5vw` بدلاً من `1vw`. وسيكون حجم العنصر صفر الآن وستجمع الحدود في المنتصف.
+
+# --hints--
+
+يجب عليك إزالة `width` من `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.width);
+```
+
+يجب عليك إزالة `height` من `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.height);
+```
+
+يجب عليك تغيير `border-left` لاستخدام `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid rgb(153, 153, 153)");
+```
+
+يجب عليك تغيير `border-right` لاستخدام `5vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid rgb(153, 153, 153)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  width: 5vw;
+  height: 5vw;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 1vw solid #999;
+  border-right: 1vw solid #999;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md
new file mode 100644
index 00000000000..8facf21d9ee
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9900.md
@@ -0,0 +1,224 @@
+---
+id: 5d822fd413a79914d39e9900
+title: الخطوة ٥٦
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+بعد ذلك، غيّر `#999` من `.bb2a` إلى `transparent`. وهذا سيجعل الحدود اليسرى واليمينية غير مرئية.
+
+# --hints--
+
+يجب عليك تغيير `border-left` لاستخدام `transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderLeft, "5vw solid transparent");
+```
+
+يجب عليك تغيير `border-right` لاستخدام `transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderRight, "5vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid #999;
+  border-right: 5vw solid #999;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md
new file mode 100644
index 00000000000..c49d8a2b711
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9901.md
@@ -0,0 +1,224 @@
+---
+id: 5d822fd413a79914d39e9901
+title: الخطوة ٥٧
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+إزالة خصائص وقيم `margin` و `border-top` من `.bb2a` لتحويله إلى مثلث لسطح المبنى.
+
+# --hints--
+
+يجب عليك إزالة `margin` من `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.margin);
+```
+
+يجب عليك إزالة `border-top` من `.bb2a`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderTop);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  margin: auto;
+  border-top: 1vw solid #000;
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md
new file mode 100644
index 00000000000..5d683f3935d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9902.md
@@ -0,0 +1,227 @@
+---
+id: 5d822fd413a79914d39e9902
+title: الخطوة ٥٨
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+أخيرا، على خاصية `border-bottom` في عنصر `.bb2a`، غيّر `1vw` إلى `5vh` وغيّر لون `#000` إلى متغير `--building-color2`. مبروك، الآن يبدو جيد! في أي وقت طوال هذا المشروع، يمكنك التعليق أو إزالة خاصية `border` التي أضفتها إلى كل شيء في البداية لرؤية ما ستبدو عليه المباني عندما يتم إزالتها في النهاية.
+
+# --hints--
+
+يجب عليك تغيير `border-bottom` لاستخدام `5vh`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom, "5vh");
+```
+
+يجب عليك تغيير `border-bottom` لاستخدام `--building-color2`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "var(--building-color2)");
+```
+
+يجب أن تكون `border-bottom` من `5vh solid var(--building-color2)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb2a")?.borderBottom.trim(), "5vh solid var(--building-color2)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+--fcc-editable-region--
+.bb2a {
+  border-bottom: 1vw solid #000;
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+--fcc-editable-region--
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md
new file mode 100644
index 00000000000..777b73e523c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9903.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e9903
+title: الخطوة ٥٩
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+في المبنى التالي! قم بإنشاء مٌتغير جديد يسمى `--window-color3` في `:root` وإعطائه قيمة `#d98cb3`. سيكون هذا هو اللون الثانوي للمباني الوردية.
+
+# --hints--
+
+يجب عليك تحديد مٌتغير خاصية (property variable) جديد يسمى `--window-color3`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color3"));
+```
+
+يجب أن تعطي `--window-color3` قيمة `#d98cb3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color3")?.trim(), "#d98cb3");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
new file mode 100644
index 00000000000..d608190089d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9904.md
@@ -0,0 +1,245 @@
+---
+id: 5d822fd413a79914d39e9904
+title: الخطوة ٦٠
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+حتى الآن، كل التدّرجات الذي أنشأته قد انتقل من الأعلى إلى الأسفل، هذا هو الاتجاه الافتراضي. يمكنك تحديد اتجاه آخر عن طريق إضافته قبل ألوانك مثل:
+
+```css
+gradient-type(
+  direction,
+  color1,
+  color2
+);
+```
+
+املأ في `.bb3` بعملية `repeating-linear-gradient`. استخدم `90deg` للاتجاه، وأستخدم متغيرات `building-color3` كلونين الأولين، و `window-color3` في `15%` كالون الثالث. عندما لا تحدد مسافة للون، سوف يُستخدم القيم المنطقية. في هذه الحالة، سيكون أول لونين افتراضيين إلى `0%` و `7.5%` لأنها تبدأ عند `0%` و`7.5%` هي نصف `15%`.
+
+# --hints--
+
+داخل `.bb3` غيّر خاصية `background` باستخدام `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.background, "repeating-linear-gradient");
+```
+
+يجب عليك استخدام `90deg` للاتجاه في الحِجَّة الأولى من `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+يجب عليك استخدام `--building-color3` للونين الأولين.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3)");
+```
+
+يجب عليك استخدام `--window-color3` عند `15%` للون الثالث.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb3")?.getPropVal('background', true), "repeating-linear-gradient(90deg,var(--building-color3),var(--building-color3),var(--window-color3)15%)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md
new file mode 100644
index 00000000000..e3804981be4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9905.md
@@ -0,0 +1,223 @@
+---
+id: 5d822fd413a79914d39e9905
+title: الخطوة ٦١
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+إزالة خاصية `background-color` والقيمة من `.bb3` بما أنك تستخدم معامل التدرج كخلفية الآن.
+
+# --hints--
+
+أزل `background-color` من `.bb3`.
+
+```js
+assert.notMatch(code, /\.bb3\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4"></div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+--fcc-editable-region--
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md
new file mode 100644
index 00000000000..6f2d48d79ce
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9906.md
@@ -0,0 +1,249 @@
+---
+id: 5d822fd413a79914d39e9906
+title: الخطوة ٦٢
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+وسيضم المبنى التالي ثلاث أقسام. أدخل ثلاث `div` عناصر داخل `.bb4`. أعطيهم فئات `bb4a` و`bb4b` و`bb4c` في ذلك الترتيب.
+
+# --hints--
+
+يجب عليك إضافة ثلاث عناصر `div` داخل `.bb4`.
+
+```js
+assert.equal(document.querySelector("div.bb4")?.children?.length, 3);
+```
+
+يجب عليك إعطاء أول `div` جديد فئة `bb4a`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+يجب عليك إعطاء ثاني `div` جديد فئة `bb4b`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+يجب أن تعطي الفئة الثالثة `div` الجديدة `bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4 > div.bb4a"));
+```
+
+يجب عليك وضع عناصر `div` الجديدة في هذا الترتيب `.bb4a + .bb4b + .bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4a + div.bb4b"));
+assert.exists(document.querySelector("div.bb4b + div.bb4c"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb4"></div>
+--fcc-editable-region--
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md
new file mode 100644
index 00000000000..032926b677b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9907.md
@@ -0,0 +1,258 @@
+---
+id: 5d822fd413a79914d39e9907
+title: الخطوة ٦٣
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+اعطي العناصر `div` الجديدة هذه `width` و`height` قيمة: `3%` و`10%` إلى `.bb4a`، ثم اعطي `80%` و`5%` إلى `.bb4b`, ثم `100%` و `85%` إلى `.bb4c`.
+
+# --hints--
+
+يجب عليك إعطاء `.bb4a` خاصية `width` بقيمة `3%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.width, "3%");
+```
+
+يجب عليك إعطاء `.bb4a` خاصية `height` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.height, "10%");
+```
+
+يجب عليك إعطاء `.bb4b` خاصية `width` بقيمة `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.width, "80%");
+```
+
+يجب عليك إعطاء `.bb4b` خاصية `height` بقيمة `5%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.height, "5%");
+```
+
+يجب عليك إعطاء `.bb4c` خاصية `width` بقيمة `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.width, "100%");
+```
+
+يجب عليك إعطاء `.bb4c` خاصية `height` بقيمة `85%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.height, "85%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md
new file mode 100644
index 00000000000..64f2a312acc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9908.md
@@ -0,0 +1,258 @@
+---
+id: 5d822fd413a79914d39e9908
+title: الخطوة ٦٤
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+إزالة خاصية `background-color` والقيمة من `.bb4`، وإضافته إلى الأقسام الثلاثة الجديدة `.bb4a`، و`.bb4b`، و `.bb4c`، حتى يتم ملء الأقسام فقط.
+
+# --hints--
+
+أزل `background-color` من `.bb4`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb4")?.backgroundColor);
+```
+
+يجب عليك إعطاء `.bb4a` خاصية `background-color` بقيمة `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4a")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+يجب عليك إعطاء `.bb4b` خاصية `background-color` بقيمة `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4b")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+يجب عليك إعطاء `.bb4c` خاصية `background-color` بقيمة `--building-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4c")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+--fcc-editable-region--
+.bb4 {
+  width: 11%;
+  height: 58%;
+  background-color: var(--building-color4);
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+}
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md
new file mode 100644
index 00000000000..ccbea33179e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9909.md
@@ -0,0 +1,245 @@
+---
+id: 5d822fd413a79914d39e9909
+title: الخطوة ٦٥
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+تريد أن يشارك `.bb4` خصائص `.bb1` هذا يمركز للأقسام. بدلاً من تكرار هذا الكود، أنشئ فئة جديدة فوق تعليق بناء الخلفية (background building) المسمى `building-wrap`. اتركه فارغاً الآن؛ سيتم استخدام هذا الفصل في بضعة أماكن لحفظ بعض البرمجة.
+
+# --hints--
+
+يجب عليك إنشاء منتقي لفئة جديد يسمى `building-wrap`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md
new file mode 100644
index 00000000000..dc07f3e39a1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990a.md
@@ -0,0 +1,277 @@
+---
+id: 5d822fd413a79914d39e990a
+title: الخطوة ٦٦
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+أنقل خصائص `display`، و`flex-direction`، و `align-items` والقيم من `.bb1` إلى الفئة الجديدة `building-wrap`.
+
+# --hints--
+
+يجب عليك إزالة `display` من `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.display);
+```
+
+يجب عليك نقل `display` بقيمة `flex` إلى `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.display, "flex");
+```
+
+يجب عليك إزالة `flex-direction` من `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.flexDirection);
+```
+
+يجب عليك نقل `flex-direction` بقيمة `column` إلى `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.flexDirection, "column");
+```
+
+يجب عليك إزالة `align-items` من `.bb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".bb1")?.alignItems);
+```
+
+يجب عليك نقل `align-items` بقيمة `center` إلى `.building-wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".building-wrap")?.alignItems, "center");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+--fcc-editable-region--
+.building-wrap {
+
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md
new file mode 100644
index 00000000000..3adb4081243
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990b.md
@@ -0,0 +1,254 @@
+---
+id: 5d822fd413a79914d39e990b
+title: الخطوة ٦٧
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+أضف فئة `building-wrap` الجديدة إلى عناصر `.bb1`و `.bb4`. هذا سيطبق خصائص المحطة على المباني الذي تحتاج إليها.
+
+# --hints--
+
+يجب عليك إضافة `building-wrap` إلى عنصر `.bb1`.
+
+```js
+assert.exists(document.querySelector("div.bb1.building-wrap"));
+```
+
+يجب عليك إضافة `building-wrap` إلى عنصر `.bb4`.
+
+```js
+assert.exists(document.querySelector("div.bb4.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="bb1">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4">
+--fcc-editable-region--
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md
new file mode 100644
index 00000000000..928584e65c3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990c.md
@@ -0,0 +1,253 @@
+---
+id: 5d822fd413a79914d39e990c
+title: الخطوة ٦٨
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+إنشاء متغير جديد يسمى `--window-color4` في `:root` وإعطائه قيمة `#8cb3d9`. سيكون هذا هو اللون الثانوي للمبنى الخلفي الأخير.
+
+# --hints--
+
+يجب عليك تحديد مٌتغير خاصية جديد يسمى `--window-color4`.
+
+```js
+assert(new __helpers.CSSHelp(document).isPropertyUsed("--window-color4"));
+```
+
+يجب أن تعطي `--window-color4` قيمة `#8cb3d9`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color4")?.trim(), "#8cb3d9");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c"></div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md
new file mode 100644
index 00000000000..9e8d0626585
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990d.md
@@ -0,0 +1,255 @@
+---
+id: 5d822fd413a79914d39e990d
+title: الخطوة ٦٩
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+لا توجد أربع عناصر `div` جديدة داخل `.bb4c`، أعطيتهم جميع فئة `bb4-window`. هذه ستكون نوافذ لهذا المبنى.
+
+# --hints--
+
+يجب عليك إضافة أربع عناصر `div` إلى `.bb4c`.
+
+```js
+assert.equal(document.querySelector(".bb4c")?.children?.length, 4);
+```
+
+يجب عليك إعطاء كل `div` جديد فئة `bb4-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.bb4c > div.bb4-window")?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+--fcc-editable-region--
+        <div class="bb4c"></div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md
new file mode 100644
index 00000000000..f246ed323d8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990e.md
@@ -0,0 +1,265 @@
+---
+id: 5d822fd413a79914d39e990e
+title: الخطوة ٧٠
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+منح فئة `bb4-window` خاصية `width` بقيمة `18%`، و`height` بقيمة `90%`، وأضف متغير `--window-color4` كمتغير يخص `background-color`.
+
+# --hints--
+
+يجب عليك إعطاء `.bb4-window` خاصية `width` بقيمة `18%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.width, "18%");
+```
+
+يجب عليك إعطاء `.bb4-window` خاصية `height` بقيمة `90%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.height, "90%");
+```
+
+يجب عليك إعطاء `.bb4-window` خاصية `background-color` بقيمة `--window-color4`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".bb4-window")?.backgroundColor.trim(), "var(--window-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md
new file mode 100644
index 00000000000..ccf2a05f845
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e990f.md
@@ -0,0 +1,286 @@
+---
+id: 5d822fd413a79914d39e990f
+title: الخطوة ٧١
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+والنوافذ مرتبة بعضَها فوق بعض في يسار القسم، خلف المبنى الأرجواني. إضافة فئة جديد أسفل `.building-wrap` يسمى `window-wrap`، وإضافة هذه الخصائص إلى:
+
+```css
+display: flex;
+align-items: center;
+justify-content: space-evenly;
+```
+
+سيتم استخدام هذا في عدد قليل من الأماكن لتركيز عناصر النافذة عمودياً، وتساوي بين عناصرها.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.window-wrap`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle(".window-wrap"));
+```
+
+يجب عليك إعطاء `.window-wrap` خاصية `display` بقيمة `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.display, "flex");
+```
+
+يجب عليك إعطاء `.window-wrap` خاصية `align-items` بقيمة `center`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.alignItems, "center");
+```
+
+يجب عليك إعطاء `.window-wrap` خاصية `justify-content` بقيمة `space-evenly`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".window-wrap")?.justifyContent, "space-evenly");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md
new file mode 100644
index 00000000000..323f74eb66a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9910.md
@@ -0,0 +1,266 @@
+---
+id: 5d822fd413a79914d39e9910
+title: الخطوة ٧٢
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+أضف فئة `window-wrap` الجديدة إلى عنصر `.bb4c`.
+
+# --hints--
+
+يجب عليك إضافة فئة من `window-wrap` إلى `.bb4c`.
+
+```js
+assert.exists(document.querySelector("div.bb4c.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+--fcc-editable-region--
+        <div class="bb4c">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1"></div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md
new file mode 100644
index 00000000000..1cbf3f13f34
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9911.md
@@ -0,0 +1,291 @@
+---
+id: 5d822fd413a79914d39e9911
+title: الخطوة ٧٣
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+يبدو جيدة! على المباني الأمامية! تحويل المبنى `.fb1` إلى ثلاث أقسام بواسطة إدخال ثلاث عناصر `div` جديدة داخله. أعطيهم فئات `fb1a` و`fb1b` و`fb1c` في ذلك الترتيب.
+
+# --hints--
+
+يجب عليك إضافة ثلاث عناصر `div` داخل `.fb1`.
+
+```js
+assert.equal(document.querySelector("div.fb1")?.children?.length, 3);
+```
+
+يجب عليك إعطاء أول `div` جديد فئة `fb1a`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1a"));
+```
+
+يجب عليك إعطاء ثاني `div` جديد class الـ `fb1b`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1b"));
+```
+
+يجب أن تعطي الفئة الثالثة `div` الجديدة `fb1c`.
+
+```js
+assert.exists(document.querySelector("div.fb1 > div.fb1c"));
+```
+
+يجب عليك وضع عناصر `div` الجديدة في هذا الترتيب `.fb1a + .fb1b + .fb1c`.
+
+```js
+assert.exists(document.querySelector("div.fb1a + div.fb1b"));
+assert.exists(document.querySelector("div.fb1b + div.fb1c"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb1"></div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md
new file mode 100644
index 00000000000..fb63fed0374
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9912.md
@@ -0,0 +1,287 @@
+---
+id: 5d822fd413a79914d39e9912
+title: الخطوة ٧٤
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+قم بإعطاء `.fb1b` خصائص `width` بقيمة `60%` و `height` بقيمة `10%`، و`.fb1c` خصائص `width` بقيمة `100%` و `height` بقيمة `80%`.
+
+# --hints--
+
+يجب عليك إعطاء `.fb1b` خاصية `width` بقيمة `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.width, "60%");
+```
+
+يجب عليك إعطاء `.fb1b` خاصية `height` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.height, "10%");
+```
+
+يجب عليك إعطاء `.fb1c` خاصية `width` بقيمة `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.width, "100%");
+```
+
+يجب عليك إعطاء `.fb1c` خاصية `height` بقيمة `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1c")?.height, "80%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md
new file mode 100644
index 00000000000..392301807fa
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9913.md
@@ -0,0 +1,280 @@
+---
+id: 5d822fd413a79914d39e9913
+title: الخطوة ٧٥
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+أضف فئة `building-wrap` إلى عنصر `.fb1` لتمركز الأقسام.
+
+# --hints--
+
+يجب عليك إضافة الفئة `building-wrap` إلى `.fb1`.
+
+```js
+assert.exists(document.querySelector("div.fb1.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb1">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md
new file mode 100644
index 00000000000..41451cf1535
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9914.md
@@ -0,0 +1,284 @@
+---
+id: 5d822fd413a79914d39e9914
+title: الخطوة ٧٦
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+يجب عليك نقل خاصية `background-color` والقيمة من `.fb1` إلى `.fb1b`.
+
+# --hints--
+
+أزل `background-color` من `.fb1`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb1")?.backgroundColor);
+```
+
+يجب عليك إضافة `background-color` من `--building-color4` إلى `.fb1b`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1b")?.backgroundColor.trim(), "var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+--fcc-editable-region--
+.fb1 {
+  width: 10%;
+  height: 60%;
+  background-color: var(--building-color4);
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md
new file mode 100644
index 00000000000..a0424117ab4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9915.md
@@ -0,0 +1,391 @@
+---
+id: 5d822fd413a79914d39e9915
+title: الخطوة 106
+challengeType: 0
+dashedName: step-106
+---
+
+# --description--
+
+لا تحتاج إلى `background-color` لهذا المبنى بعد الآن حتى تتمكن من إزالة هذه الخاصية.
+
+# --hints--
+
+يجب عليك إزالة `background-color` من `.fb5`.
+
+```js
+assert.notMatch(code, /\.fb5\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md
new file mode 100644
index 00000000000..7ed341c1af9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9916.md
@@ -0,0 +1,297 @@
+---
+id: 5d822fd413a79914d39e9916
+title: الخطوة ٧٧
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+لا تقلق بشأن المساحة في الأسفل، سيتم نقل كل شيء في وقت لاحق عندما تضيف بعض الارتفاع إلى العنصر الموجود في الجزء العلوي من المبنى.
+
+أضف `repeating-linear-gradient` إلى `.fb1c` بزاوية `90deg`, و`--building-color4` من `0%` إلى `10%` و `transparent` من `10%` إلى `15%`.
+
+# --hints--
+
+يجب أن تعطي `.fb1c` خاصية `background` الوظيفة `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.background, "repeating-linear-gradient");
+```
+
+يجب عليك استخدام اتجاه `90deg`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+يجب عليك استخدام اللون الأول من `--building-color4` يبدأ من `0%` إلى `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+```
+
+يجب عليك استخدام لون ثاني من `transparent` يبدأ من `10%` إلى `15%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(transparent10%,transparent15%\)|transparent10%15%\))$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md
new file mode 100644
index 00000000000..740627e2798
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9917.md
@@ -0,0 +1,307 @@
+---
+id: 5d822fd413a79914d39e9917
+title: الخطوة ٧٨
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+يمكنك إضافة وظائف تدرج متعددة إلى عنصر ما عن طريق فصلها بفاصلة (`,`) مثل:
+
+```css
+gradient1(
+  colors
+),
+gradient2(
+  colors
+);
+```
+
+أضف `repeating-linear-gradient` إلى `.fb1c` أسفل ذلك الموجود هناك؛ استخدم `--building-color4` الخاص بك من `0%` إلى `10%` و`--window-color4` من `10%` و`90%`. هذا سيملأ خلف معامل التدرج الذي أضفته حديثًا.
+
+# --hints--
+
+لا يجب عليك تغيير أول `repeating-linear-gradient`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\)/);
+```
+
+يجب عليك إضافة `repeating-linear-gradient` يحمل لون أولي `--building-color4` من `0%` إلى `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color4\)(0%)?,var\(--building-color4\)10%,transparent10%,transparent15%\),repeating-linear-gradient\(var(\(--building-color4\)(0%)?,var\(--building-color4\)10%|\(--building-color4\)0%10%)/);
+```
+
+يجب عليك استخدام لون ثاني من `--window-color4` يبدأ من `10%` إلى `90%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb1c")?.getPropVal('background', true), /,(var\(--window-color4\)10%,var\(--window-color4\)90%\)|var\(--window-color4\)10%90%\))$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+--fcc-editable-region--
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    )
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md
new file mode 100644
index 00000000000..dc24c4d049f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9918.md
@@ -0,0 +1,298 @@
+---
+id: 5d822fd413a79914d39e9918
+title: الخطوة ٧٩
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+سوف تستخدم المزيد من الحيل الحدودية للقسم العلوي. قم بإضافة `border-bottom` بقيمة `7vh solid var(--building-color4)` إلى `.fb1a`. سيؤدي هذا إلى وضع حدود الارتفاع `7vh` في الأسفل. ولكن عندما يكون حجم العنصر صفر، تظهر فقط كخط عريض 2px من حدود 1px على جميع العناصر.
+
+# --hints--
+
+يجب عليك إعطاء `.fb1a` خاصية `border-bottom`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom);
+```
+
+يجب عليك استخدام `border-bottom` بقيمة `7vh solid var(--building-color4)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderBottom.trim(), "7vh solid var(--building-color4)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md
new file mode 100644
index 00000000000..02bd219c1b1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9919.md
@@ -0,0 +1,301 @@
+---
+id: 5d822fd413a79914d39e9919
+title: الخطوة ٨٠
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+عند زيادة حجم الحدود اليسرى واليمينية، سوف يتسع نطاق الحدود في الأسفل ليصبح عرض الحدود اليسرى واليمينية مجتمعة. أضف `2vw solid transparent` كقيمة خصائص `border-left` و`border-right` إلى عنصر `.fb1a`. ستكون غير مرئية، لكنها ستجعل الحدود على أسفل `4vw` عرضاً.
+
+# --hints--
+
+يجب عليك إعطاء `.fb1a` خاصية `border-left` بقيمة `2vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderLeft, "2vw solid transparent");
+```
+
+يجب عليك إعطاء `.fb1a` خاصية `border-right` بقيمة `2vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb1a")?.borderRight, "2vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2"></div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+--fcc-editable-region--
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+}
+--fcc-editable-region--
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md
new file mode 100644
index 00000000000..3821d8e777c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991a.md
@@ -0,0 +1,312 @@
+---
+id: 5d822fd413a79914d39e991a
+title: الخطوة ٨١
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+في المبنى التالي! أدخل عنصرين `div` ضمن `.fb2` ومنحهم فئات `fb2a` و `fb2b`، بهذا الترتيب.
+
+# --hints--
+
+يجب عليك إضافة عنصرين `div` إلى `.fb2`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2 > div")?.length, 2);
+```
+
+يجب عليك إعطاء أول `div` جديد فئة `fb2a`.
+
+```js
+assert.exists(document.querySelector("div.fb2 > div.fb2a"));
+assert(document.querySelector("div.fb2 > div.fb2a") === document.querySelector("div.fb2")?.firstElementChild);
+```
+
+يجب عليك إعطاء ثاني `div` جديد فئة `fb2b`.
+
+```js
+assert.exists(document.querySelector("div.fb2 > div.fb2b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb2"></div>
+--fcc-editable-region--
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md
new file mode 100644
index 00000000000..d9805803022
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991b.md
@@ -0,0 +1,314 @@
+---
+id: 5d822fd413a79914d39e991b
+title: الخطوة ٨٢
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+أمنح `.fb2a` خاصية `width` بقيمة `100%` و`.fb2b` خصائص `width` بقيمة `100%` و`height` بقيمة `75%`.
+
+# --hints--
+
+يجب عليك إعطاء `.fb2a` خاصية `width` بقيمة `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.width, "100%");
+```
+
+يجب عليك إعطاء `.fb2b` خاصية `width` بقيمة `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.width, "100%");
+```
+
+يجب عليك إعطاء `.fb2b` خاصية `height` بقيمة `75%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.height, "75%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b"></div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md
new file mode 100644
index 00000000000..1a8c726b8ab
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991c.md
@@ -0,0 +1,317 @@
+---
+id: 5d822fd413a79914d39e991c
+title: الخطوة ٨٣
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+أدخل ثلاث عناصر `div` داخل `.fb2b` وأمنحهم فئة `fb2-window`. وستكون هذه نوافذ لهذا القسم من المبنى.
+
+# --hints--
+
+يجب عليك إضافة ثلاث عناصر `div` داخل `.fb2b`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2b > div")?.length, 3);
+```
+
+يجب أن تعطي العناصر الجديدة الثلاث `div` لكل فئة `fb2-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb2-window")?.length, 3);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+--fcc-editable-region--
+        <div class="fb2b"></div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md
new file mode 100644
index 00000000000..2657fd18cc3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991d.md
@@ -0,0 +1,315 @@
+---
+id: 5d822fd413a79914d39e991d
+title: الخطوة ٨٤
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+أضف فئة `window-wrap` الخاص بك إلى `.fb2b` لوضع عناصر النافذة الجديدة.
+
+# --hints--
+
+يجب عليك إضافة الفئة `window-wrap` إلى `.fb2b`.
+
+```js
+assert.exists(document.querySelector("div.fb2b.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+--fcc-editable-region--
+        <div class="fb2b">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+--fcc-editable-region--
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md
new file mode 100644
index 00000000000..184ff46e916
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991e.md
@@ -0,0 +1,326 @@
+---
+id: 5d822fd413a79914d39e991e
+title: الخطوة ٨٥
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+أعطي عناصر `.fb2-window` خصائص `width` بقيمة `22%`، و`height` بقيمة `100%`، و`background-color` من المُتغير `--window-color3`.
+
+# --hints--
+
+يجب عليك إعطاء `.fb2-window` خاصية `width` بقيمة `22%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.width, "22%");
+```
+
+يجب عليك إعطاء `.fb2-window` خاصية `height` بقيمة `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.height, "100%");
+```
+
+يجب عليك إعطاء `.fb2-window` خاصية `background-color` بقيمة `--window-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2-window")?.backgroundColor.trim(), "var(--window-color3)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md
new file mode 100644
index 00000000000..3a51f000580
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e991f.md
@@ -0,0 +1,324 @@
+---
+id: 5d822fd413a79914d39e991f
+title: الخطوة ٨٦
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+أنقل خاصية `background-color` والقيمة من `.fb2` إلى `.fb2b` لتغير لون القسم وبدل من الحاوية.
+
+# --hints--
+
+يجب عليك إزالة خاصية `background-color` من `.fb2`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb2")?.backgroundColor);
+```
+
+يجب عليك إعطاء `.fb2b` خاصية `background-color` بقيمة `--building-color3`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2b")?.backgroundColor.trim(), "var(--building-color3)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+--fcc-editable-region--
+.fb2 {
+  width: 10%;
+  height: 40%;
+  background-color: var(--building-color3);
+}
+
+.fb2a {
+  width: 100%;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+}
+--fcc-editable-region--
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md
new file mode 100644
index 00000000000..4cd104c5e28
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9920.md
@@ -0,0 +1,330 @@
+---
+id: 5d822fd413a79914d39e9920
+title: خطوة ٨٧
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+من أجل `.fb2a`, أضف `border-bottom` بقيمة `10vh solid var(--building-color3)`, و`border-left` و`border-right` بقيمة `1vw solid transparent`. هذه المحولة ستخلق خدعة الحدود صورة هندسية.
+
+# --hints--
+
+يجب عليك إعطاء `.fb2a` خاصية `border-bottom` من `10vh solid var(--building-color3)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderBottom.trim(), "10vh solid var(--building-color3)");
+```
+
+يجب عليك إعطاء `.fb2a` خاصية `border-left` بقيمة `1vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderLeft, "1vw solid transparent");
+```
+
+يجب عليك إعطاء `.fb2a` خاصية `border-right` بقيمة `1vw solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb2a")?.borderRight, "1vw solid transparent");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3"></div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+--fcc-editable-region--
+.fb2a {
+  width: 100%;
+}
+--fcc-editable-region--
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md
new file mode 100644
index 00000000000..74ea35e8057
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9921.md
@@ -0,0 +1,348 @@
+---
+id: 5d822fd413a79914d39e9921
+title: الخطوة ٨٨
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+للمبنى التالي، أدخل أربع عناصر `div` داخل <`.fb3` مع فئات `fb3a`، و `fb3b`، و`fb3a` مرة أخرى، و `fb3b` مرة أخرى، بهذا الترتيب. هذا المبنى سيتكون من أربع أقسام، أما القسمين الأوائل فسيكونون تقريبا نفس القسمين السفليين.
+
+# --hints--
+
+يجب عليك إضافة أربع عناصر `div` داخل `.fb3`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3 > div")?.length, 4);
+```
+
+يجب عليك إعطاء أول `div` جديد فئة `fb3a`.
+
+```js
+assert.equal(document.querySelector("div.fb3").firstElementChild, document.querySelector("div.fb3a"));
+```
+
+يجب عليك إعطاء ثاني `div` جديد فئة `fb3b`.
+
+```js
+assert.equal(document.querySelector("div.fb3 :nth-child(2)"), document.querySelector("div.fb3b"));
+```
+
+يجب أن تعطي الفئة الثالثة `div` الجديدة `fb3a`.
+
+```js
+assert.equal(document.querySelector("div.fb3 :nth-child(3)"), document.querySelector("div.fb3b + div.fb3a"));
+```
+
+يجب عليك إعطاء رابع `div` جديد فئة `fb3b`.
+
+```js
+assert.exists(document.querySelector("div.fb3 :nth-child(4).fb3b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb3"></div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md
new file mode 100644
index 00000000000..94ba3b8f5c1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9922.md
@@ -0,0 +1,347 @@
+---
+id: 5d822fd413a79914d39e9922
+title: الخطوة ٨٩
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+اعطي عنصر `.fb3a` خاصية `width` بقيمة `80%` و `height` بقيمة `15%`. اعطي عنصر `.fb3b` خاصية `width` بقيمة `100%` و `height` بقيمة `35%`.
+
+# --hints--
+
+يجب عليك إعطاء `.fb3a` خاصية `width` بقيمة `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.width, "80%");
+```
+
+يجب عليك إعطاء `.fb3a` خاصية `height` بقيمة `15%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.height, "15%");
+```
+
+يجب عليك إعطاء `.fb3b` خاصية `width` بقيمة `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.width, "100%");
+```
+
+يجب عليك إعطاء `.fb3b` خاصية `height` بقيمة `35%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.height, "35%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--  
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md
new file mode 100644
index 00000000000..d133cbb66b1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9923.md
@@ -0,0 +1,348 @@
+---
+id: 5d822fd413a79914d39e9923
+title: الخطوة ٩٠
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+إزال خاصية `background-color` والقيمة من `.fb3`، وإضافتها إلى `.fb3a` و `.fb3b`.
+
+# --hints--
+
+أزل `background-color` من `.fb3`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb3")?.backgroundColor);
+```
+
+يجب عليك إعطاء `.fb3a` خاصية `background-color` بقيمة `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3a")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+يجب عليك إعطاء `.fb3b` خاصية `background-color` بقيمة `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3b")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+--fcc-editable-region--
+.fb3 {
+  width: 10%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md
new file mode 100644
index 00000000000..c4adce72a96
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9924.md
@@ -0,0 +1,340 @@
+---
+id: 5d822fd413a79914d39e9924
+title: الخطوة ٩١
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+أضف class الـ `building-wrap` الخاص بك إلى عنصر `.fb3` لوضع الأقسام (sections) في المنتصف.
+
+# --hints--
+
+يجب عليك إضافة class الـ `building-wrap` إلى `.fb3`.
+
+```js
+assert.exists(document.querySelector("div.fb3.building-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+--fcc-editable-region--
+      <div class="fb3">
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md
new file mode 100644
index 00000000000..88d332b3690
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9925.md
@@ -0,0 +1,346 @@
+---
+id: 5d822fd413a79914d39e9925
+title: الخطوة ٩٢
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+ضع ثلاث عناصر جديدة `div` في العنصر `.fb3a`. أعط كلهم فئة `fb3-window`. هذه ستكون نوافذ لهذا القسم.
+
+# --hints--
+
+يجب عليك إضافة ثلاث عناصر `div` ضمن العنصر `.fb3a`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3a > div")?.length, 3);
+```
+
+يجب عليك إعطاء كل `div` جديد فئة `fb3-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb3-window")?.length, 3)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+--fcc-editable-region--
+        <div class="fb3a"></div>
+--fcc-editable-region--
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md
new file mode 100644
index 00000000000..7acdd42ef13
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9926.md
@@ -0,0 +1,355 @@
+---
+id: 5d822fd413a79914d39e9926
+title: الخطوة ٩٣
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+اعطي عناصر `.fb3-window` خصائص `width` بقيمة `25%`، و`height` بقيمة `80%`، واستخدام المتغير `--window-color1` كقيمة إلى `background-color`.
+
+# --hints--
+
+يجب عليك إعطاء `.fb3-window` خاصية `width` بقيمة `25%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.width, "25%");
+```
+
+يجب عليك إعطاء `.fb3-window` خاصية `height` بقيمة `80%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.height, "80%");
+```
+
+يجب عليك إعطاء `.fb3-window` خاصية `background-color` بقيمة `--window-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb3-window")?.backgroundColor.trim(), "var(--window-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md
new file mode 100644
index 00000000000..a5d161812b3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9927.md
@@ -0,0 +1,350 @@
+---
+id: 5d822fd413a79914d39e9927
+title: الخطوة ٩٤
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+أضف فئة `window-wrap` الخاص بك إلى عنصر `.fb3a` لوضع مسافات النفاذات في المنتصف.
+
+# --hints--
+
+يجب عليك إعطاء `.fb3a` فئة `window-wrap`.
+
+```js
+assert.exists(document.querySelector("div.fb3a.window-wrap"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+--fcc-editable-region--
+        <div class="fb3a">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+--fcc-editable-region--
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md
new file mode 100644
index 00000000000..be86fe121f9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9928.md
@@ -0,0 +1,349 @@
+---
+id: 5d822fd413a79914d39e9928
+title: الخطوة 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+مع متغيرات CSS يمكنك تغيير القيم دون البحث في كل مكان في صفحة التصميم (stylesheet). غيّر قيمة `--window-color1` إلى `#bb99ff`.
+
+# --hints--
+
+يجب عليك تغيير قيمة `--window-color1` إلى `#bb99ff`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(":root")?.getPropertyValue("--window-color1")?.trim(), "#bb99ff");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4"></div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: black;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md
new file mode 100644
index 00000000000..c0f731b06c5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9929.md
@@ -0,0 +1,362 @@
+---
+id: 5d822fd413a79914d39e9929
+title: الخطوة 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+بقت ثلاث مبان أخرى فقط. أدخل عنصران `div` جديدان داخل عنصر `.fb4` وإعطائهم فئات `fb4a` و `fb4b`، بهذا الترتيب. تذكر أنك نوعا ما قلبت موقع `.fb4` و `.fb5`, لذا فهو أفضل مبنى أرجواني تعمل عليه الآن.
+
+# --hints--
+
+يجب عليك إضافة عنصرين `div` إلى `.fb4`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4 > div")?.length, 2);
+```
+
+يجب عليك إعطاء أول `div` جديد فئة `fb4a`.
+
+```js
+assert.exists(document.querySelector("div.fb4a"));
+```
+
+يجب عليك إعطاء ثاني `div` جديد فئة `fb4b`.
+
+```js
+assert.exists(document.querySelector("div.fb4b"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+--fcc-editable-region--
+      <div class="fb4"></div>
+--fcc-editable-region--
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md
new file mode 100644
index 00000000000..d31a631a3db
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992a.md
@@ -0,0 +1,359 @@
+---
+id: 5d822fd413a79914d39e992a
+title: الخطوة 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+منح `.fb4b` خصائص `width` بقيمة `100%` و `height` بقيمة `89%`.
+
+# --hints--
+
+يجب عليك إعطاء `.fb4b` خاصية `width` بقيمة `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.width, "100%");
+```
+
+يجب عليك إعطاء `.fb4b` خاصية `height` بقيمة `89%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.height, "89%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b"></div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md
new file mode 100644
index 00000000000..dc7471a0006
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992b.md
@@ -0,0 +1,361 @@
+---
+id: 5d822fd413a79914d39e992b
+title: الخطوة 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+أضف متغير `--building-color1` كقيمة لخاصية `background-color` في عنصر `.fb4b`. ثم أزل `background-color` من `.fb4`.
+
+# --hints--
+
+أزل `background-color` من `.fb4`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle(".fb4")?.backgroundColor);
+```
+
+يجب عليك إعطاء `.fb4b` خاصية `background-color` بقيمة `--building-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.backgroundColor.trim(), "var(--building-color1)");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b"></div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+--fcc-editable-region--
+.fb4 {
+  width: 8%;
+  height: 45%;
+  background-color: var(--building-color1);
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md
new file mode 100644
index 00000000000..9a914b80f8c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992c.md
@@ -0,0 +1,364 @@
+---
+id: 5d822fd413a79914d39e992c
+title: الخطوة 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+أدخل ست عناصر `div` داخل `.fb4b` وقم بإعطائهم جميعا class يدعى `fb4-window`.
+
+# --hints--
+
+يجب عليك إضافة عناصر `div` إلى `.fb4b`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4b > div")?.length, 6);
+```
+
+يجب عليك إعطاء كل `div` جديد class يدعى `fb4-window`.
+
+```js
+assert.equal(document.querySelectorAll("div.fb4-window")?.length, 6);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+--fcc-editable-region--
+        <div class="fb4b"></div>
+--fcc-editable-region--
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md
new file mode 100644
index 00000000000..883fb571075
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992d.md
@@ -0,0 +1,377 @@
+---
+id: 5d822fd413a79914d39e992d
+title: الخطوة 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+اعطي عنصر `.fb4-window` خاصية `width` بقيمة `30%`، وخاصية`height` بقيمة `10%`، وخاصية `border-radius` بقيمة `50%`. وستضع هذه البرامج بعض النوافذ الدائرية لهذا المبنى.
+
+# --hints--
+
+يجب عليك إعطاء `.fb4-window` خاصية `width` بقيمة `30%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.width, "30%");
+```
+
+يجب عليك إعطاء `.fb4-window` خاصية `height` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.height, "10%");
+```
+
+يجب أن تعطي `.fb4-window` خاصية `border-radius` بقيمة `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.borderRadius, "50%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md
new file mode 100644
index 00000000000..e1f5740f77d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992e.md
@@ -0,0 +1,374 @@
+---
+id: 5d822fd413a79914d39e992e
+title: الخطوة 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+املأ النوافذ بألوانك الثانوية لهذا المبنى. أضف أيضا `margin` بقيمة `10%` لإعطاء النوافذ بعض المساحة.
+
+# --hints--
+
+يجب عليك إعطاء `.fb4-window` خاصية `background-color` بقيمة `--window-color1`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.backgroundColor.trim(), "var(--window-color1)");
+```
+
+يجب عليك إعطاء `.fb4-window` خاصية `margin` بقيمة `10%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4-window")?.margin, "10%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md
new file mode 100644
index 00000000000..7c756851484
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e992f.md
@@ -0,0 +1,377 @@
+---
+id: 5d822fd413a79914d39e992f
+title: الخطوة 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+إضافة`display: flex` و `flex-wrap: wrap` إلى حاوية للنافذة. سيؤدي هذا إلى وضع نوافذك جنبا إلى جنب، ثم دفعها إلى الأسفل إلى صف جديد عندما لا يكون الحجم مناسب.
+
+# --hints--
+
+يجب عليك إعطاء `.fb4b` خاصية `display` بقيمة `flex`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.display, "flex");
+```
+
+يجب عليك إعطاء `.fb4b` خاصية `flex-wrap` بقيمة `wrap`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4b")?.flexWrap, "wrap");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+}
+--fcc-editable-region--
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md
new file mode 100644
index 00000000000..b4e923ec43b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9930.md
@@ -0,0 +1,381 @@
+---
+id: 5d822fd413a79914d39e9930
+title: الخطوة 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+هذا المبنى سيكون لديه مثلث آخر في السطح. امنح القسم العلوي `border-top` بقيمة `5vh solid transparent`، و`border-left` التي تحمل قيم `8vw`، و`solid`، ويستخدم مُتغير لون المبنى الخاص بك كلونها.
+
+# --hints--
+
+يجب عليك إعطاء `.fb4a` خاصية `border-top` بقيمة `5vh solid transparent`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderTop.trim(), "5vh solid transparent")
+```
+
+يجب عليك إعطاء `.fb4a` خاصية `border-left` بقيمة `8vw solid var(--building-color1)`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle(".fb4a")?.borderLeft.trim(), "8vw solid var(--building-color1)")
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md
new file mode 100644
index 00000000000..e502424ebea
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9931.md
@@ -0,0 +1,404 @@
+---
+id: 5d822fd413a79914d39e9931
+title: الخطوة 109
+challengeType: 0
+dashedName: step-109
+---
+
+# --description--
+
+يمكنك إزالة `background-color` لهذا المبنى الآن، لأنه غير ضروري.
+
+# --hints--
+
+يجب عليك إزالة `background-color` من `.fb6`.
+
+```js
+assert.notMatch(code, /\.fb6\s*\{\s*[^}]*?background-color[^}]*?\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md
new file mode 100644
index 00000000000..a9cd80ff4f6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9932.md
@@ -0,0 +1,396 @@
+---
+id: 5d822fd413a79914d39e9932
+title: الخطوة 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+في المبنى التالي! إنه أخضر في المقدمة. أعطيه وظيفة `repeating-linear-gradient` مع لون بنائك من `0%` إلى `5%`، و `transparent` من `5%` إلى `10%`.
+
+# --hints--
+
+يجب عليك إعطاء `.fb5` خاصية `background`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle(".fb5")?.background);
+```
+
+يجب عليك إعطاء `background` وظيفة `repeating-linear-gradient`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb5")?.background, "repeating-linear-gradient");
+```
+
+يجب عليك إضافة `repeating-linear-gradient` يحمل لون أولي `--building-color2` من `0%` إلى `5%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%/);
+```
+
+يجب أن تعطي `repeating-linear-gradient` لون ثان `transparent` من `5%` إلى `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md
new file mode 100644
index 00000000000..e8d0b564af4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9933.md
@@ -0,0 +1,402 @@
+---
+id: 5d822fd413a79914d39e9933
+title: الخطوة 105
+challengeType: 0
+dashedName: step-105
+---
+
+# --description--
+
+أضف `repeating-linear-gradient` أسفل الذي أضفته للتو. أعطاه أتجاه `90deg`، واستخدم لون بنائك من `0%` إلى `12%` ولون النافذة `12%` إلى `44%`. هذا سيصنع مجموعة من النوافذ المستطيلة.
+
+# --hints--
+
+يجب عليك إعطاء `.fb5` وظيفية `repeating-linear-gradient` ثانية في `background` الخاصية.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient/);
+```
+
+يجب أن تعطي `repeating-linear-gradient` اتجاه `90deg`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg/);
+```
+
+يجب عليك إضافة `repeating-linear-gradient` يحمل لون أولي `--building-color2` من `0%` إلى `12%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%/);
+```
+
+يجب عليك إضافة `repeating-linear-gradient` يحمل لون ثاني `--window-color2` من `12%` إلى `44%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb5")?.getPropVal('background', true), /repeating-linear-gradient\(var\(--building-color2\)(0%)?,var\(--building-color2\)5%,transparent5%,transparent10%\),repeating-linear-gradient\(90deg,var\(--building-color2\)(0%)?,var\(--building-color2\)12%,var\(--window-color2\)12%,var\(--window-color2\)44%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+--fcc-editable-region--
+.fb5 {
+  width: 10%;
+  height: 33%;
+  background-color: var(--building-color2);
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    )
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md
new file mode 100644
index 00000000000..ea89cc3900a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9934.md
@@ -0,0 +1,409 @@
+---
+id: 5d822fd413a79914d39e9934
+title: الخطوة 107
+challengeType: 0
+dashedName: step-107
+---
+
+# --description--
+
+أخيرا! لقد صنعت المبنى الأخير! أضف معامل تدرج متكرر إليه مع اتجاه `90deg`. استخدم لون البناء (building color) من `0%` إلى `10%` و`transparent` من `10%` إلى `30%`.
+
+# --hints--
+
+يجب عليك إضافة `repeating-linear-gradient` إلى `.fb6` في خاصية `background`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.background, "repeating-linear-gradient");
+```
+
+يجب أن تعطي `repeating-linear-gradient` اتجاه `90deg`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), "repeating-linear-gradient(90deg");
+```
+
+يجب عليك إضافة `repeating-linear-gradient` يحمل لون أولي `--building-color3` من `0%` إلى `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
+```
+
+يجب أن تعطي `repeating-linear-gradient` لون ثان `transparent` من `10%` إلى `30%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md
new file mode 100644
index 00000000000..bceec112cc9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9935.md
@@ -0,0 +1,409 @@
+---
+id: 5d822fd413a79914d39e9935
+title: الخطوة 108
+challengeType: 0
+dashedName: step-108
+---
+
+# --description--
+
+إضافة متدرج متكرر آخر إلى هذا المبنى؛ جعله الشيء نفسه الذي أضفته للتو، باستثناء عدم إضافة اتجاه `90deg` واستخدام لون النافذة (window color) بدلاً من لون `transparent`.
+
+# --hints--
+
+يجب عليك إعطاء `.fb6` وظيفية `repeating-linear-gradient` ثانية في خاصية `background`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient/);
+```
+
+يجب عليك إضافة `repeating-linear-gradient` يحمل المتغير الأول `--building-color3` كقيمة للون, يبدأ من `0%` وينتهي في `10%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%/);
+```
+
+يجب عليك إضافة `repeating-linear-gradient` يحمل المتغير الثاني `--window-color3` كقيمة للون, يبدأ من `10%` وينتهي في `30%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".fb6")?.getPropVal('background', true), /repeating-linear-gradient\(90deg,var\(--building-color3\)(0%)?,var\(--building-color3\)10%,transparent10%,transparent30%\),repeating-linear-gradient\(var\(--building-color3\)(0%)?,var\(--building-color3\)10%,var\(--window-color3\)10%,var\(--window-color3\)30%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+--fcc-editable-region--
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background-color: var(--building-color3);
+  background: repeating-linear-gradient(
+    90deg,
+    var(--building-color3),
+    var(--building-color3) 10%,
+    transparent 10%,
+    transparent 30%
+  )
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md
new file mode 100644
index 00000000000..0ba5a88953f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9936.md
@@ -0,0 +1,402 @@
+---
+id: 5d822fd413a79914d39e9936
+title: الخطوة 110
+challengeType: 0
+dashedName: step-110
+---
+
+# --description--
+
+حسناً، المباني قد أُنشأت. عود إلى منتقي `*` وقم بإزالة `border` التي تطبيقها على كل شيء في البداية وسوف تأتي المباني معا.
+
+# --hints--
+
+يجب عليك إزالة `border` من المحدد `*`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle("*")?.border);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+--fcc-editable-region--
+* {
+  border: 1px solid black;
+  box-sizing: border-box;
+}
+--fcc-editable-region--
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md
new file mode 100644
index 00000000000..83e8c3add52
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9937.md
@@ -0,0 +1,403 @@
+---
+id: 5d822fd413a79914d39e9937
+title: الخطوة 111
+challengeType: 0
+dashedName: step-111
+---
+
+# --description--
+
+أضف `sky` كفئة ثانٍ إلى عنصر `.background-buildings`. سوف تصنع خلفية لناطحة السحاب (skyline).
+
+# --hints--
+
+يجب عليك إضافة فئة من `sky` إلى `.background-buildings`.
+
+```js
+assert.exists(document.querySelector("div.background-buildings.sky"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+--fcc-editable-region--
+    <div class="background-buildings">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+--fcc-editable-region--
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md
new file mode 100644
index 00000000000..68ec7c475b7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9938.md
@@ -0,0 +1,421 @@
+---
+id: 5d822fd413a79914d39e9938
+title: الخطوة 112
+challengeType: 0
+dashedName: step-112
+---
+
+# --description--
+
+امنح فئة `sky` وظيفية `radial-gradient`. استخدم `#ffcf33` من `0%` إلى `20%`, و`#ffff66` في `21%` و`#bbeeff` في `100%`. هذا سيضيف معامل تدرج دائري إلى الخلفية التي ستكون شمسك.
+
+# --hints--
+
+يجب أن تعطي `.sky` وظيفية `radial-gradient` في `background`.
+
+```js
+assert.include(new __helpers.CSSHelp(document).getStyle(".sky")?.background, "radial-gradient");
+```
+
+يجب أن تعطي `radial-gradient` اللون الأول من `#ffcf33`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%/);
+```
+
+يجب أن تعطي `radial-gradient` اللون ثانٍ من `#ffff66` في `21%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%/);
+```
+
+يجب أن تعطي `radial-gradient` اللون ثالث من `#bbeeff` في `100%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(rgb\(255, 207, 51\)( 0%)?, rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md
new file mode 100644
index 00000000000..746c55b2667
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e9939.md
@@ -0,0 +1,410 @@
+---
+id: 5d822fd413a79914d39e9939
+title: الخطوة 113
+challengeType: 0
+dashedName: step-113
+---
+
+# --description--
+
+في الجزء العلوي من قائمة لون معامل تدرج السماء، حيث يمكنك وضع اتجاه لمعامل التدرج؛ أضف `circle closest-corner at 15% 15%,`. سيؤدي هذا إلى نقل بداية معامل التدرج إلى `15%` من الأعلى واليسار. سوف يجعله ينتهي عند `closest-corner` وسوف يحافظ على شكل `circle`. هذه بعض الكلمات الرئيسية التي تم بناؤها في التدرج لوصف كيفية سلوكه.
+
+# --hints--
+
+يجب عليك إعطاء `.sky` وظيفية `radial-gradient` اتجاه `circle closest-corner at 15% 15%`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.background, /radial-gradient\(circle closest-corner at 15% 15%, rgb\(255, 207, 51\)|( 0%), rgb\(255, 207, 51\) 20%, rgb\(255, 255, 102\) 21%, rgb\(187, 238, 255\) 100%\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+--fcc-editable-region--
+.sky {
+  background: radial-gradient(
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+--fcc-editable-region--
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md
new file mode 100644
index 00000000000..5c7a0ac371a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993a.md
@@ -0,0 +1,422 @@
+---
+id: 5d822fd413a79914d39e993a
+title: الخطوة 114
+challengeType: 0
+dashedName: step-114
+---
+
+# --description--
+
+يمكن استخدام استعلام إعلامي لتغيير الأساليب بناء على شروط معينة، وهي تبدو هكذا:
+
+```css
+@media (condition) {
+
+}  
+```
+
+إضافة استعلام media query في الجزء السفلي من صفحة الأسلوب الخاصة بك مع التنفيذ المشروط (condition) بقيمة`max-width: 1000px`. الأساليب المضافة هنا ستصبح مؤثرة عندما يكون حجم المستند 1000px واسعا أو أقل.
+
+# --hints--
+
+يجب عليك إضافة استعلام media query مع `max-width: 1000px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getCSSRules("media")?.[0]?.media?.mediaText, '(max-width: 1000px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md
new file mode 100644
index 00000000000..5134693bbff
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993b.md
@@ -0,0 +1,424 @@
+---
+id: 5d822fd413a79914d39e993b
+title: الخطوة 115
+challengeType: 0
+dashedName: step-115
+---
+
+# --description--
+
+انسخ والصق class الـ `sky` برمته مع جميع خصائصه وقيمه في استعلام وسائل (media query). سوف تصنع مخطط ألوان آخر لناطحة السحاب الذي يغيرها من النهار إلى ليل.
+
+ملاحظة: ستحتاج إلى التمرير خارج المنطقة القابلة للتحرير لنسخ الـ class.
+
+# --hints--
+
+لا يجب عليك حذف التعريف `.sky` الحالي.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle(".sky")?.getPropVal('background', true), /radial-gradient\(circleclosest-cornerat15%15%,rgb\(255,207,51\)(0%)?,rgb\(255,207,51\)20%,rgb\(255,255,102\)21%,rgb\(187,238,255\)100%\)/);
+```
+
+يجب عليك نسخ التعريف `.sky` الحالي في استعلام الوسائل(media query).
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s*(0%)?\s*,\s*rgb\(\s*255\s*,\s*207\s*,\s*51\s*\)\s+20%\s*,\s*rgb\(\s*255\s*,\s*255\s*,\s*102\s*\)\s+21%\s*,\s*rgb\(\s*187\s*,\s*238\s*,\s*255\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+--fcc-editable-region--
+@media (max-width: 1000px) {
+
+}
+--fcc-editable-region--
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md
new file mode 100644
index 00000000000..fbe3e190ff1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993c.md
@@ -0,0 +1,437 @@
+---
+id: 5d822fd413a79914d39e993c
+title: الخطوة 116
+challengeType: 0
+dashedName: step-116
+---
+
+# --description--
+
+في فئة `sky` للاستعلام الوسائل (media query)، تغيير قيم الألوان `#ffcf33` إلى `#ccc`، و`#ffff66` إلى `#445`، و`#bbeeff` إلى `#223`. ثم يمكنك تغيير حجم النافذة لرؤية تغير ألوان الخلفية.
+
+# --hints--
+
+يجب عليك تغيير قيم الألوان الأولى من `#ffcf33` إلى `#ccc`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%/);
+```
+
+يجب عليك تغيير قيمة اللون الثاني من `#ffff66` إلى `#445`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%/);
+```
+
+يجب عليك تغيير قيمة اللون الثالث من `#bbeeff` إلى `#223`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x => x.selectorText===".sky")?.style?.background, /radial-gradient\(\s*circle\s+closest-corner\s+at\s+15%\s+15%\s*,\s+rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s*(0%)?\s*,\s*rgb\(\s*204\s*,\s*204\s*,\s*204\s*\)\s+20%\s*,\s*rgb\(\s*68\s*,\s*68\s*,\s*85\s*\)\s+21%\s*,\s*rgb\(\s*34\s*,\s*34\s*,\s*51\s*\)\s+100%\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+closest-corner circle at 15% 15%,
+#ffcf33,
+#ffcf33 20%,
+#ffff66 21%,
+#bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+var(--building-color1) 50%,
+var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+var(--building-color1),
+var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 6%,
+var(--window-color2) 6%,
+var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color3),
+var(--building-color3),
+var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color4),
+var(--building-color4) 10%,
+transparent 10%,
+transparent 15%
+    ),
+    repeating-linear-gradient(
+var(--building-color4),
+var(--building-color4) 10%,
+var(--window-color4) 10%,
+var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+var(--building-color2),
+var(--building-color2) 5%,
+transparent 5%,
+transparent 10%
+    ),
+    repeating-linear-gradient(
+90deg,
+var(--building-color2),
+var(--building-color2) 12%,
+var(--window-color2) 12%,
+var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+90deg,
+var(--building-color3),
+var(--building-color3) 10%,
+transparent 10%,
+transparent 30%
+    ),
+    repeating-linear-gradient(
+var(--building-color3),
+var(--building-color3) 10%,
+var(--window-color3) 10%,
+var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+  closest-corner circle at 15% 15%,
+  #ffcf33,
+  #ffcf33 20%,
+  #ffff66 21%,
+  #bbeeff 100%
+);
+  }
+--fcc-editable-region--
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md
new file mode 100644
index 00000000000..8098030d049
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993d.md
@@ -0,0 +1,450 @@
+---
+id: 5d822fd413a79914d39e993d
+title: الخطوة 117
+challengeType: 0
+dashedName: step-117
+---
+
+# --description--
+
+أضف محدد `:root` إلى الجزء العلوي من استعلام الوسائل (media query) الخاص بك. ثم إعادة تحديد المتغيرات الأربع `--building-color` لاستخدام القيمة `#000` هناك.
+
+# --hints--
+
+يجب عليك إضافة منتقي `:root` إلى media query.
+
+```js
+assert.notDeepEqual(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root"), undefined);
+```
+
+يجب عليك إضافة `--building-color1` بقيمة `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color1")?.trim(), "#000");
+```
+
+يجب عليك إضافة `--building-color2` بقيمة `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color2")?.trim(), "#000");
+```
+
+يجب عليك إضافة `--building-color3` بقيمة `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color3")?.trim(), "#000");
+```
+
+يجب عليك إضافة `--building-color4` بقيمة `#000`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--building-color4")?.trim(), "#000");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md
new file mode 100644
index 00000000000..2ae662984c5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e993e.md
@@ -0,0 +1,862 @@
+---
+id: 5d822fd413a79914d39e993e
+title: الخطوة 118
+challengeType: 0
+dashedName: step-118
+---
+
+# --description--
+
+أخيرا، في منتقي `:root` للاستعلام الوسائل (media query)، إعادة تعريف المتغيرات `--window-color` الأربعة لاستخدامها `#777`. عندما تنتهي، غيّر حجم النافذة وشاهدها تذهب من النهار إلى الليل.
+
+المتغيرات تستخدم في الأساس مع الألوان، وهذه هي الطريقة التي استخدمتها هنا. ولكن يمكن إعطاؤها أي قيمة واستخدامها في أي خصائص. يبدو مشروعك رائعاً!
+
+# --hints--
+
+يجب عليك إضافة `--window-color1` بقيمة `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color1")?.trim(), "#777");
+```
+
+يجب عليك إضافة `--window-color2` بقيمة `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color2")?.trim(), "#777");
+```
+
+يجب عليك إضافة `--window-color3` بقيمة `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color3")?.trim(), "#777");
+```
+
+يجب عليك إضافة `--window-color4` بقيمة `#777`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getRuleListsWithinMedia("(max-width: 1000px)")?.find(x=>x.selectorText === ":root")?.style?.getPropertyValue("--window-color4")?.trim(), "#777");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+--fcc-editable-region--
+  :root {
+    --building-color1: #000;
+    --building-color2: #000;
+    --building-color3: #000;
+    --building-color4: #000;
+  }
+--fcc-editable-region--
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">    
+  <head>
+    <meta charset="UTF-8">
+    <title>City Skyline</title>
+    <link href="styles.css" rel="stylesheet" />   
+  </head>
+
+  <body>
+    <div class="background-buildings sky">
+      <div></div>
+      <div></div>
+      <div class="bb1 building-wrap">
+        <div class="bb1a bb1-window"></div>
+        <div class="bb1b bb1-window"></div>
+        <div class="bb1c bb1-window"></div>
+        <div class="bb1d"></div>
+      </div>
+      <div class="bb2">
+        <div class="bb2a"></div>
+        <div class="bb2b"></div>
+      </div>
+      <div class="bb3"></div>
+      <div></div>
+      <div class="bb4 building-wrap">
+        <div class="bb4a"></div>
+        <div class="bb4b"></div>
+        <div class="bb4c window-wrap">
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+          <div class="bb4-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div></div>
+    </div>
+
+    <div class="foreground-buildings">
+      <div></div>
+      <div></div>
+      <div class="fb1 building-wrap">
+        <div class="fb1a"></div>
+        <div class="fb1b"></div>
+        <div class="fb1c"></div>
+      </div>
+      <div class="fb2">
+        <div class="fb2a"></div>
+        <div class="fb2b window-wrap">
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+          <div class="fb2-window"></div>
+        </div>
+      </div>
+      <div></div>
+      <div class="fb3 building-wrap">
+        <div class="fb3a window-wrap">
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+          <div class="fb3-window"></div>
+        </div>
+        <div class="fb3b"></div>
+        <div class="fb3a"></div>
+        <div class="fb3b"></div>
+      </div>
+      <div class="fb4">
+        <div class="fb4a"></div>
+        <div class="fb4b">
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+          <div class="fb4-window"></div>
+        </div>
+      </div>
+      <div class="fb5"></div>
+      <div class="fb6"></div>
+      <div></div>
+      <div></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+:root {
+  --building-color1: #aa80ff;
+  --building-color2: #66cc99;
+  --building-color3: #cc6699;
+  --building-color4: #538cc6;
+  --window-color1: #bb99ff;
+  --window-color2: #8cd9b3;
+  --window-color3: #d98cb3;
+  --window-color4: #8cb3d9;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  height: 100vh;
+  margin: 0;
+  overflow: hidden;
+}
+
+.background-buildings, .foreground-buildings {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-evenly;
+  position: absolute;
+  top: 0;
+}
+
+.building-wrap {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.window-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: space-evenly;
+}
+
+.sky {
+  background: radial-gradient(
+      closest-corner circle at 15% 15%,
+      #ffcf33,
+      #ffcf33 20%,
+      #ffff66 21%,
+      #bbeeff 100%
+    );
+}
+
+/* BACKGROUND BUILDINGS - "bb" stands for "background building" */
+.bb1 {
+  width: 10%;
+  height: 70%;
+}
+
+.bb1a {
+  width: 70%;
+}
+
+.bb1b {
+  width: 80%;
+}
+
+.bb1c {
+  width: 90%;
+}
+
+.bb1d {
+  width: 100%;
+  height: 70%;
+  background: linear-gradient(
+      var(--building-color1) 50%,
+      var(--window-color1)
+    );
+}
+
+.bb1-window {
+  height: 10%;
+  background: linear-gradient(
+      var(--building-color1),
+      var(--window-color1)
+    );
+}
+
+.bb2 {
+  width: 10%;
+  height: 50%;
+}
+
+.bb2a {
+  border-bottom: 5vh solid var(--building-color2);
+  border-left: 5vw solid transparent;
+  border-right: 5vw solid transparent;
+}
+
+.bb2b {
+  width: 100%;
+  height: 100%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 6%,
+      var(--window-color2) 6%,
+      var(--window-color2) 9%
+    );
+}
+
+.bb3 {
+  width: 10%;
+  height: 55%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3),
+      var(--window-color3) 15%
+    );
+}
+
+.bb4 {
+  width: 11%;
+  height: 58%;
+}
+
+.bb4a {
+  width: 3%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.bb4b {
+  width: 80%;
+  height: 5%;
+  background-color: var(--building-color4);
+}
+
+.bb4c {
+  width: 100%;
+  height: 85%;
+  background-color: var(--building-color4);
+}
+
+.bb4-window {
+  width: 18%;
+  height: 90%;
+  background-color: var(--window-color4);
+}
+
+/* FOREGROUND BUILDINGS - "fb" stands for "foreground building" */
+.fb1 {
+  width: 10%;
+  height: 60%;
+}
+
+.fb1a {
+  border-bottom: 7vh solid var(--building-color4);
+  border-left: 2vw solid transparent;
+  border-right: 2vw solid transparent;
+}
+
+.fb1b {
+  width: 60%;
+  height: 10%;
+  background-color: var(--building-color4);
+}
+
+.fb1c {
+  width: 100%;
+  height: 80%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color4),
+      var(--building-color4) 10%,
+      transparent 10%,
+      transparent 15%
+    ),
+    repeating-linear-gradient(
+      var(--building-color4),
+      var(--building-color4) 10%,
+      var(--window-color4) 10%,
+      var(--window-color4) 90%
+    );
+}
+
+.fb2 {
+  width: 10%;
+  height: 40%;
+}
+
+.fb2a {
+  width: 100%;
+  border-bottom: 10vh solid var(--building-color3);
+  border-left: 1vw solid transparent;
+  border-right: 1vw solid transparent;
+}
+
+.fb2b {
+  width: 100%;
+  height: 75%;
+  background-color: var(--building-color3);
+}
+
+.fb2-window {
+  width: 22%;
+  height: 100%;
+  background-color: var(--window-color3);
+}
+
+.fb3 {
+  width: 10%;
+  height: 35%;
+}
+
+.fb3a {
+  width: 80%;
+  height: 15%;
+  background-color: var(--building-color1);
+}
+
+.fb3b {
+  width: 100%;
+  height: 35%;
+  background-color: var(--building-color1);
+}
+
+.fb3-window {
+  width: 25%;
+  height: 80%;
+  background-color: var(--window-color1);
+}
+
+.fb4 {
+  width: 8%;
+  height: 45%;
+  position: relative;
+  left: 10%;
+}
+
+.fb4a {
+  border-top: 5vh solid transparent;
+  border-left: 8vw solid var(--building-color1);
+}
+
+.fb4b {
+  width: 100%;
+  height: 89%;
+  background-color: var(--building-color1);
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.fb4-window {
+  width: 30%;
+  height: 10%;
+  border-radius: 50%;
+  background-color: var(--window-color1);
+  margin: 10%;
+}
+
+.fb5 {
+  width: 10%;
+  height: 33%;
+  position: relative;
+  right: 10%;
+  background: repeating-linear-gradient(
+      var(--building-color2),
+      var(--building-color2) 5%,
+      transparent 5%,
+      transparent 10%
+    ),
+    repeating-linear-gradient(
+      90deg,
+      var(--building-color2),
+      var(--building-color2) 12%,
+      var(--window-color2) 12%,
+      var(--window-color2) 44%
+    );
+}
+
+.fb6 {
+  width: 9%;
+  height: 38%;
+  background: repeating-linear-gradient(
+      90deg,
+      var(--building-color3),
+      var(--building-color3) 10%,
+      transparent 10%,
+      transparent 30%
+    ),
+    repeating-linear-gradient(
+      var(--building-color3),
+      var(--building-color3) 10%,
+      var(--window-color3) 10%,
+      var(--window-color3) 30%
+    );
+}
+
+@media (max-width: 1000px) {
+  :root {
+    --building-color1: #000;
+    --building-color2: #000;
+    --building-color3: #000;
+    --building-color4: #000;
+    --window-color1: #777;
+    --window-color2: #777;
+    --window-color3: #777;
+    --window-color4: #777;
+  }
+  .sky {
+    background: radial-gradient(
+        closest-corner circle at 15% 15%,
+        #ccc,
+        #ccc 20%,
+        #445 21%,
+        #223 100%
+      );
+  }
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
new file mode 100644
index 00000000000..e5b1d628d8a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc174fcf86c76b9248c6eb2.md
@@ -0,0 +1,63 @@
+---
+id: 5dc174fcf86c76b9248c6eb2
+title: الخطوة الأولى
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+عناصر HTML لديها علامات فتح (opening tags) مثل `<h1>` وإغلاق (closing tags) مثل `</h1>`.
+
+تيقن من أن نص العنصر يقع بين سمات أفتاح (open tag) و أغلاق (closing tag).
+
+ابحث عن عنصر `h1` وغيّر نصه إلى:
+
+`CatPhotoApp`
+
+# --hints--
+
+النص `CatPhotoApp` يجب أن يكون موجوداً في الكود. قد تحتاج إلى التحقق من الإملاء.
+
+```js
+assert(code.match(/catphotoapp/i));
+```
+
+يجب أن يحتوي العنصر `h1` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('h1'));
+```
+
+يجب أن يحتوي العنصر `h1` على closing tag. Closing tags يجب ان تتبع بـ `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/h1\>/));
+```
+
+لديك أكثر من عنصر واحد `h1`. قم بإزالة عنصر `h1` الإضافي.
+
+```js
+assert(document.querySelectorAll('h1').length === 1);
+```
+
+النص في عنصر `h1` يجب أن يكون `CatPhotoApp`. إما أن تكون قد حذفت النص، أو لديك خطأ إملائي، أو أنه ليس بين علامتي فتح وإغلاق العنصر `h1`.
+
+```js
+assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+--fcc-editable-region--
+    <h1>Hello World</h1>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc1798ff86c76b9248c6eb3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc1798ff86c76b9248c6eb3.md
new file mode 100644
index 00000000000..f3097e3c7df
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc1798ff86c76b9248c6eb3.md
@@ -0,0 +1,84 @@
+---
+id: 5dc1798ff86c76b9248c6eb3
+title: الخطوة الثانية
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+يتم استخدام عناصر العنوان heading من `h1` إلى `h6` للدلالة على أهمية المحتوى أدناه. كلما قل العدد، كلما زادت الأهمية، إذاً عناصر `h2` أقل أهمية من عناصر `h1`. استخدم عنصر `h1` واحد في كل صفحة وضع العناوين (headings) الأقل أهمية تحت العناوين ذات الأهمية أعلى.
+
+تحت عنصر `h1` ، أضف عنصر `h2` مع هذا النص:
+
+`Cat Photos`
+
+# --hints--
+
+يجب أن يحتوي العنصر `h1` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('h1'));
+```
+
+يجب أن يحتوي العنصر `h1` على closing tag. Closing tags يجب ان تتبع بـ `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/h1\>/));
+```
+
+يجب أن يكون لديك عنصر `h1` واحد فقط. احذف الزيادة.
+
+```js
+assert(
+  document.querySelector('h1') && document.querySelectorAll('h1').length === 1
+);
+```
+
+النص في عنصر `h1` يجب أن يكون 'CatPhotoApp'. إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+assert(document.querySelector('h1').innerText.toLowerCase() === 'catphotoapp');
+```
+
+يجب أن يحتوي العنصر `h2` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('h2'));
+```
+
+يجب أن يحتوي العنصر `h2` على closing tag. Closing tags يجب ان تتبع بـ `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/h2\>/));
+```
+
+النص في عنصر `h2` يجب أن يكون 'Cat Photos'. ضع النص `Cat Photos` فقط بين علامات الافتتاح والإغلاق لـ `h2`.
+
+```js
+assert(document.querySelector('h2').innerText.toLowerCase() === 'cat photos');
+```
+
+يجب أن يكون عنصر `h2` الخاص بك تحت عنصر `h1`. عنصر `h1` له أهمية أكبر ويجب أن يكون فوق عنصر `h2`.
+
+```js
+const collection = [...document.querySelectorAll('h1,h2')].map(
+  (node) => node.nodeName
+);
+assert(collection.indexOf('H1') < collection.indexOf('H2'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+--fcc-editable-region--
+    <h1>CatPhotoApp</h1>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
new file mode 100644
index 00000000000..2588c94c4c8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17d3bf86c76b9248c6eb4.md
@@ -0,0 +1,60 @@
+---
+id: 5dc17d3bf86c76b9248c6eb4
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+يتم استخدام عنصر `p` لإنشاء فقرة من النصوص على مواقع الويب. قم بإنشاء عنصر `p` تحت عنصر `h2` الخاص بك وقم بإعطائه النص التالي:
+
+`Click here to view more cat photos.`
+
+# --hints--
+
+عنصرك `p` ينبغي أن يكون له علامة أفتاح (opening tag). Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('p'));
+```
+
+يجب أن يحتوي العنصر `p` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/p\>/));
+```
+
+يجب أن يكون نص العنصر الخاص بك `p` هو `Click here to view more cat photos.` إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+const extraSpacesRemoved = document
+  .querySelector('p')
+  .innerText.replace(/\s+/g, ' ');
+assert(extraSpacesRemoved.match(/click here to view more cat photos\.?$/i));
+```
+
+يجب أن يكون عنصر `p` الخاص بك تحت عنصر `h2`. لقد وضعتهم بترتيب خاطئ.
+
+```js
+const collection = [...document.querySelectorAll('h2,p')].map(
+  (node) => node.nodeName
+);
+assert(collection.indexOf('H2') < collection.indexOf('P'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <h1>CatPhotoApp</h1>
+--fcc-editable-region--
+    <h2>Cat Photos</h2>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
new file mode 100644
index 00000000000..a9f7c6c27eb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc17dc8f86c76b9248c6eb5.md
@@ -0,0 +1,70 @@
+---
+id: 5dc17dc8f86c76b9248c6eb5
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+التعليق يسمح لك بترك الرسائل دون التأثير على العرض في المتصفح. كما يسمح لك بجعل الكود غير نشط. يبدأ التعليق في HTML بـ `<!--`، يحتوي على أي عدد من الأسطر ، وينتهي بـ `-->`. على سبيل المثال، التعليق `<!-- TODO: Remove h1 -->` يحتوي على النص `TODO: Remove h1`.
+
+قم إضافة تعليق أعلى عنصر `p` مع هذا النص:
+
+`TODO: Add link to cat photos`
+
+# --hints--
+
+يجب أن يبدأ تعليقك بـ `<!--`. إنك تفتقد واحدًا أو أكثر من الرموز التي تحدد بداية التعليق.
+
+```js
+assert(code.match(/<!--/));
+```
+
+ينبغي أن ينتهي تعليقك بـ `-->`.  إنك تفتقد واحدًا أو أكثر من الرموز التي تحدد نهاية التعليق.
+
+```js
+assert(code.match(/-->/));
+```
+
+لا ينبغي أن يحتوي الكود الخاص بك على رموز opening/closing اضافية للتعليق. لديك `<!--` إضافي أو `-->` معروض في المتصفح.
+
+```js
+const noSpaces = code.replace(/\s/g, '');
+assert(noSpaces.match(/<!--/g).length < 2 && noSpaces.match(/-->/g).length < 2);
+```
+
+يجب أن يحتوي تعليقك على النص `TODO: Add link to cat photos`.
+
+```js
+assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/i));
+```
+
+يجب أن يكون تعليقك فوق عنصر `p`. لقد وضعتهم بترتيب خاطئ.
+
+```js
+assert(
+  code
+    .replace(/\s/g, '')
+    .match(
+      /<!--todo:addlinktocatphotos--><p>clickheretoviewmorecatphotos\.?<\/p>/i
+    )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <h1>CatPhotoApp</h1>
+    <h2>Cat Photos</h2>
+--fcc-editable-region--
+    <p>Click here to view more cat photos.</p>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
new file mode 100644
index 00000000000..9f90284f710
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
@@ -0,0 +1,71 @@
+---
+id: 5dc2385ff86c76b9248c6eb7
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+يحتوي HTML5 على بعض العناصر التي تحدد مناطق المحتوى المختلفة. هذه العناصر تجعل HTML الخاص بك أسهل للقراءة وتساعدة في تحسين محرك البحث (SEO) وإمكانية الوصول (accessibility).
+
+حدد القسم الرئيس من هذه الصفحة بإضافة علامة فتح `<main>` بعد عنصر `h1`، و علامة إغلاق `</main>` بعد عنصر `p`.
+
+# --hints--
+
+يجب أن يحتوي العنصر `main` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('main'));
+```
+
+يجب أن يحتوي العنصر `main` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/main\>/));
+```
+
+يجب أن تكون علامة أفتاح (opening tag) عنصرك `main` تحت عنصر `body`. لقد وضعتهم بترتيب خاطئ.
+
+```js
+const main = document.querySelector('main');
+assert.equal(main?.previousElementSibling, null);
+```
+
+يجب أن تكون علامة أفتاح (opening tag) عنصرك `main` افوق عنصر `h1`. لقد وضعتهم بترتيب خاطئ.
+
+```js
+const collection = [...document.querySelectorAll('main,h1')].map(
+  (node) => node.nodeName
+);
+assert(collection.indexOf('MAIN') < collection.indexOf('H1'));
+```
+
+يجب أن تكون clossing tag عنصر `main` الخاص بك تحت عنصر `p`. لقد وضعتهم بترتيب خاطئ.
+
+```js
+const mainNode = document.querySelector('main');
+const pNode = document.querySelector('p');
+assert(
+  mainNode.contains(pNode) &&
+    pNode.textContent.toLowerCase().match(/click here to view more cat photos/)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+--fcc-editable-region--
+    <h1>CatPhotoApp</h1>
+    <h2>Cat Photos</h2>
+    <!-- TODO: Add link to cat photos -->
+    <p>Click here to view more cat photos.</p>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
new file mode 100644
index 00000000000..c2b952bcb88
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -0,0 +1,103 @@
+---
+id: 5dc23991f86c76b9248c6eb8
+title: الخطوة ٦
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+في الخطوة السابقة، وضعت عناصر `h1`, و `h2`, و comment, و `p` داخل عنصر `main`. هذا يسمى *nesting*. وينبغي وضع العناصر المتداخلة (nested) بعد مسافتين إلى يمين العنصر الذي تتداخل فيه. هذه المسافات تسمى indentation ويستخدم لجعل HTML أسهل للقراءة.
+
+زح (indent) عنصر `h1`, و `h2`, و comment بمسافتين عليهم أكثر من العنصر `main` في الكود أدناه. استخدم زر space على لوحة المفاتيح الخاصة بك لإضافة مسافتين أخريين أمام عنصر `p` بحيث يتم عمل indentation بشكل صحيح أيضا.
+
+# --hints--
+
+يجب أن يحتوي الكود على عنصر `h2` مع نص `Cat Photos`. ربما قمت بحذفه عن طريق الخطأ، او إنه فاقد لكل من العلامتين الافتتاحية والإغلاقية، أو أن النص قد تغير.
+
+```js
+assert(
+  document.querySelector('h2') &&
+    code.match(/<\/h2\>/) &&
+    document.querySelector('h2').innerText.toLowerCase() === 'cat photos'
+);
+```
+
+لا يجب عليك إضافة عناصر `ul` أو `li` من المثال.
+
+```js
+assert(
+  !document.querySelector('ul') && !document.querySelector('li')
+);
+```
+
+لا يجب عليك تغيير بُعد عنصرك `h2` في السطر. وينبغي أن تبعد علامة أفتاح (openning tag) من بداية الخط بست (6) مسافات. يمكنك ضغط على زر إعادة التعيين لاستعادة البعد الأصلي.
+
+```js
+assert(code.toLowerCase().match(/<\/h1\>\s*\n\s{6}<h2>/));
+```
+
+الكود الخاص بك يجب أن يحتوي على تعليق (comment). قمت بحذف التعليق في خطوة سابقة.
+
+```js
+assert(code.match(/<!--.*-->/));
+```
+
+يجب أن يكون نص التعليق `TODO: Add link to cat photos`. لا تقم بتغيير النص أو المسافات في التعليق.
+
+```js
+assert(code.match(/<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\.?\s*-->/i));
+```
+
+لا يجب عليك تغيير بُعد عنصرك comment في السطر. وينبغي أن تبعد علامة أفتاح (openning tag) من بداية الخط بست (6) مسافات. يمكنك ضغط على زر إعادة التعيين لاستعادة البعد الأصلي.
+
+```js
+assert(
+  code
+    .toLowerCase()
+    .match(/<\/h2>\s*\n\s{6}<!--\s*todo:\s+add\s+link\s+to\s+cat\s+photos\s*-->/)
+);
+```
+
+الكود الخاص بك يجب أن يحتوي على عنصر `p`. لقد قمت بإزالة عنصر `p` في خطوة سابقة.
+
+```js
+assert(document.querySelector('p'));
+```
+
+نص عنصر `p` يجب أن يكون `Click here to view more cat photos.` لا تقم بتغيير النص أو المسافات أو علامات الترقيم لعنصر `p`.
+
+```js
+assert(
+  document
+    .querySelector('p')
+    .innerText.toLowerCase()
+    .match(/click\s+here\s+to\s+view\s+more\s+cat\s+photos\.?$/)
+);
+```
+
+يجب أن تكون علامة `p` الافتتاحية مطابقة لعناصرك `h2` وتعليقك. وينبغي أن تبعد علامة أفتاح (openning tag) من بداية الخط بست (6) مسافات.
+
+```js
+assert(code.toLowerCase().match(/-->\s*\n\s{6}<p>/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    --fcc-editable-region--
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+    <p>Click here to view more cat photos.</p>
+    </main>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
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
new file mode 100644
index 00000000000..3c5eb58d5c6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23f9bf86c76b9248c6eba.md
@@ -0,0 +1,61 @@
+---
+id: 5dc23f9bf86c76b9248c6eba
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+يمكنك إضافة صور إلى موقع الويب الخاص بك باستخدام عنصر `img`. `img` عناصر تحتوي على opening tag بدون closing tag. الـ tag لعنصر بدون closing tag معروفة باسم <dfn>self-closing tag</dfn>.
+
+أضف عنصر `img` تحت عنصر `p`. في هذه المرحلة، لن تظهر أي صورة في المتصفح.
+
+# --hints--
+
+يجب أن يحتوي العنصر `img` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('img'));
+```
+
+لا يجب أن يحتوي العنصر `img` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(!code.match(/<\/img\>/));
+```
+
+يجب أن يكون لديك عنصر `img` واحد فقط. قم بإزالة أي زيادات.
+
+```js
+assert(document.querySelectorAll('img').length === 1);
+```
+
+يجب أن يكون عنصر `img` الخاص بك تحت عنصر `p`. لقد وضعتهم بترتيب خاطئ.
+
+```js
+const collection = [...document.querySelectorAll('p,img')].map(
+  (node) => node.nodeName
+);
+assert(collection.indexOf('P') < collection.indexOf('IMG'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Click here to view more cat photos.</p>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
new file mode 100644
index 00000000000..7da0a50e900
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24073f86c76b9248c6ebb.md
@@ -0,0 +1,61 @@
+---
+id: 5dc24073f86c76b9248c6ebb
+title: الخطوة ٨
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+HTML <dfn>attributes</dfn> اي السمات، هي كلمات خاصة تستخدم داخل opening tag لعنصر للتحكم في سلوك العنصر. السمة `src` في عنصر `img` تحدد عنوان URL للصورة (حيث توجد الصورة). مثال على عنصر `img` باستخدام `src` كسمة: `<img src="https://www.example.com/the-image.jpg">`.
+
+داخل عنصر `img` الموجود، أضف خاصية `src` مع هذا الرابط:
+
+`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على عنصر `img`. ربما تكون قد قمت بإزالة عنصر `img` أو لم تحيط قيمة سمة `src` بعلامات الاقتباس.
+
+```js
+assert(document.querySelector('img'));
+```
+
+يجب أن يحتوي عنصر `img` الخاص بك علي سمة `src`. إما أنك حذفت السمة أو لديك خطأ إملائي. تأكد من وجود مسافة بين اسم العنصر واسم السمة.
+
+```js
+assert(document.querySelector('img').src);
+```
+
+يجب تعيين عنصر `img` الخاص بك سمة `src` بقيمة '`https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`'. إما أنك حذفت الـ URL أو لديك خطأ إملائي. حالة (case) عنوان الـ URL مهمة.
+
+```js
+assert(document.querySelector('img').src === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg');
+```
+
+على الرغم من أنك قمت بتعيين عنصر `img` سمة `src` إلى عنوان الـ URL الصحيح، يوصى بأن تحيط دائما قيمة السمة بعلامات اقتباس.
+
+```js
+assert(!/\<img\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/relaxing-cat\.jpg/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Click here to view more cat photos.</p>
+--fcc-editable-region--
+      <img>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
new file mode 100644
index 00000000000..cd16e17039c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24165f86c76b9248c6ebc.md
@@ -0,0 +1,59 @@
+---
+id: 5dc24165f86c76b9248c6ebc
+title: الخطوة ٩
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+يجب أن تحتوي جميع عناصر `img` على سمة `alt`. يتم استخدام نص السمة `alt` لقراء الشاشة (screen readers) لتحسين إمكانية الوصول ويتم عرضه إذا فشل تحميل الصورة. على سبيل المثال، `<img src="cat.jpg" alt="A cat">` يحتوي على سمة `alt` مع النص `A cat`.
+
+داخل عنصر `img` ، أضف سمة `alt` مع هذا النص:
+
+`A cute orange cat lying on its back`
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على عنصر `img`. لقد قمت بإزالة عنصر `img` في خطوة سابقة.
+
+```js
+assert(document.querySelector('img'));
+```
+
+عنصر `img` الخاص بك لا يحتوي على سمة `alt`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+assert(document.querySelector('img').hasAttribute('alt'));
+```
+
+تم تعيين قيمة السمة `alt` للعنصر `img` بقيمة آخري بخلاف 'A cute orange cat lying on its back'. تأكد من أن قيمة السمة `alt` محاطة بعلامات اقتباس.
+
+```js
+const altText = document
+  .querySelector('img')
+  .alt.toLowerCase()
+  .replace(/\s+/g, ' ');
+assert(altText.match(/A cute orange cat lying on its back\.?$/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Click here to view more cat photos.</p>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg">
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
new file mode 100644
index 00000000000..4812a0eda8b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc24614f86c76b9248c6ebd.md
@@ -0,0 +1,79 @@
+---
+id: 5dc24614f86c76b9248c6ebd
+title: الخطوة ١٠
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+يمكنك الربط إلى صفحة أخرى باستخدام عنصر (anchor) الرابط (`a`). على سبيل المثال، `<a href='https://freecodecamp.org'></a>` سيحيل علي `freecodecamp.org`.
+
+قم بإضافة عنصر anchor بعد الفقرة التي تربط بـ `https://freecatphotoapp.com`. في هذه المرحلة، لن يظهر الرابط في المعاينة.
+
+# --hints--
+
+يجب أن يحتوي العنصر (`a`) على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('a'));
+```
+
+يجب أن يحتوي العنصر (`a`) على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/a\>/));
+```
+
+يجب أن يكون عنصر (`a`) الخاص بك تحت عنصر `p`. لقد وضعتهم بترتيب خاطئ.
+
+```js
+const collection = [...document.querySelectorAll('a, p')].map(
+  (node) => node.nodeName
+);
+assert(collection.indexOf('P') < collection.indexOf('A'));
+```
+
+عنصر (`a`) الخاص بك ليس لديه سمة `href`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+assert(document.querySelector('a').hasAttribute('href'));
+```
+
+(`a`) الخاص بك يجب أن يحيل الي `https://freecatphotoapp.com`. إما أنك حذفت الـ URL أو لديك خطأ إملائي.
+
+```js
+assert(
+  document.querySelector('a').getAttribute('href') ===
+    'https://freecatphotoapp.com'
+);
+```
+
+على الرغم من أنك قمت بتعيين سمة الرابط ('a') `href` إلى الرابط الصحيح، يوصى بأن تحيط دائما قيمة السمة بعلامات اقتباس.
+
+```js
+assert(
+  !/\<a\s+href\s*=\s*https:\/\/www.freecodecamp.org\/cat-photos/.test(code)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Click here to view more cat photos.</p>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
new file mode 100644
index 00000000000..8e4ec5deb67
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ddbd81294d8ddc1510a8e56.md
@@ -0,0 +1,57 @@
+---
+id: 5ddbd81294d8ddc1510a8e56
+title: الخطوة ١١
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+يجب وضع نص الرابط بين علامات فتح وإغلاق عنصر الـ (`a`). على سبيل المثال، `<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>` هو رابط مع النص `click here to go to freeCodeCamp.org`.
+
+أضف النص `link to cat pictures` إلى عنصر الرابط. هذا سيصبح نص الرابط.
+
+# --hints--
+
+يجب أن يحتوي العنصر (`a`) على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('a'));
+```
+
+يجب أن يحتوي العنصر (`a`) على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/a\>/));
+```
+
+يجب أن يكون نص عنصرك (`a`) بقيمة `link to cat pictures`. تيقن من وضع نص الرابط بين opening tag و closing tag لعنصر (`a`).
+
+```js
+assert(
+  document.querySelector('a').innerText.toLowerCase().replace(/\s+/g, ' ') ===
+    'link to cat pictures'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Click here to view more cat photos.</p>
+--fcc-editable-region--
+      <a href="https://freecatphotoapp.com"></a>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
new file mode 100644
index 00000000000..1498160ade6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -0,0 +1,71 @@
+---
+id: 5dfa22d1b521be39a3de7be0
+title: الخطوة ١٢
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+في الخطوة السابقة حولت الكلمات `link to cat pictures` إلى رابط عن طريق وضعها بين علامات أفتاح (opening tag) و إغلاق (closing tag) الرابط (`a`). يمكنك فعل الشيء نفسه للكلمات داخل عنصر، مثل عنصر `p`.
+
+في نص عنصرك `p`، تحويل الكلمات `cat photos` إلى رابط إلى `https://freecatphotoapp.com` عن طريق إضافة الكلمات داخل علامات الأفتاح والإغلاق الرابط (`a`) بين تلك الكلمات.
+
+
+# --hints--
+
+يجب عليك أدخال عنصر `a` داخل عنصر `p`.
+
+```js
+assert($('p > a').length);
+```
+
+يجب أن يكون سمة الرابط `href` بقيمة `https://freecatphotoapp.com`. إما أنك حذفت قيمة `href` أو لديك خطأ إملائي.
+
+```js
+const nestedAnchor = $('p > a')[0];
+assert(
+  nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com'
+);
+```
+
+يجب أن يكون نص الرابط `cat photos`. إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+const nestedAnchor = $('p > a')[0];
+assert(
+  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
+);
+```
+
+بعد دمج عنصر الرابط (`a`)، محتوى العنصر `p` الوحيد المرئي في المتصفح يجب أن يكون `Click here to view more cat photos.` تحقق مرتين من النص أو المسافات أو علامات الترقيم لكل من `p` وعنصر الرابط المدمج.
+
+```js
+const pText = document
+  .querySelector('p')
+  .innerText.toLowerCase()
+  .replace(/\s+/g, ' ');
+assert(pText.match(/click here to view more cat photos\.?$/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Click here to view more cat photos.</p>
+      <a href="https://freecatphotoapp.com">link to cat pictures</a>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
new file mode 100644
index 00000000000..14b6b8cc56d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa2407b521be39a3de7be1.md
@@ -0,0 +1,55 @@
+---
+id: 5dfa2407b521be39a3de7be1
+title: الخطوة 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+قم بإضافة سمة `target` مع القيمة `_blank` إلى opening tag العنصر (`a`) حتى يفتح الرابط في علامة تبويب جديدة.
+
+# --hints--
+
+يجب أن يكون للعنصر `p` الخاص بك رابط مدمج (`a`) مع النص `cat photos`. ربما تكون قد حذفته أو لديك خطأ إملائي.
+
+```js
+const anchor = $('p > a');
+assert(
+  anchor.length &&
+    anchor[0].innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
+);
+```
+
+عنصر (`a`) الخاص بك ليس لديه سمة `target`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+assert(document.querySelector('a').hasAttribute('target'));
+```
+
+قيمة السمة `target` يجب أن تكون `_blank`. إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن قيم السمة يجب أن تكون محاطة بعلامات اقتباس.
+
+```js
+assert(document.querySelector('a').getAttribute('target') === '_blank');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Click here to view more <a href="https://freecatphotoapp.com">cat photos</a>.</p>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
new file mode 100644
index 00000000000..738739528b2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa30b9eacea3f48c6300ad.md
@@ -0,0 +1,88 @@
+---
+id: 5dfa30b9eacea3f48c6300ad
+title: الخطوة 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+قم بتحويل الصورة إلى رابط عن طريق احاطتها بـ tags العنصر الضرورية. استخدم `https://freecatphotoapp.com` كقيمة السمة `href`.
+
+# --hints--
+
+يجب أن يكون لديك عنصر `img` بقيمة `src` من `https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg`. ربما قمت بحذفها عن طريق الخطأ.
+
+```js
+assert(
+  document.querySelector('img') &&
+    document.querySelector('img').getAttribute('src') ===
+      'https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg'
+);
+```
+
+يجب أن يحتوي العنصر (`a`) على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelectorAll('a').length >= 2);
+```
+
+يجب عليك إضافة opening tag واحد فقط للـ (`a`). الرجاء إزالة أي زيادات.
+
+```js
+assert(document.querySelectorAll('a').length === 2);
+```
+
+يجب أن يحتوي العنصر (`a`) على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/a>/g).length >= 2);
+```
+
+يجب عليك إضافة closing tag واحد فقط للـ (`a`). الرجاء إزالة أي زيادات.
+
+```js
+assert(code.match(/<\/a>/g).length === 2);
+```
+
+عنصر (`a`) الخاص بك ليس لديه سمة `href`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+assert(document.querySelector('a').hasAttribute('href'));
+```
+
+(`a`) الخاص بك يجب أن يحيل الي `https://freecatphotoapp.com`. إما أنك حذفت الـ URL أو لديك خطأ إملائي.
+
+```js
+assert(
+  document.querySelectorAll('a')[1].getAttribute('href') ===
+    'https://freecatphotoapp.com'
+);
+```
+
+يجب أن يكون عنصر `img` الخاص بك متداخلا داخل عنصر الرابط (`a`). يجب أن يكون عنصر `img` بأكمله داخل الـ opening و الـ closing tags لعنصر الرابط (`a`).
+
+```js
+assert(document.querySelector('img').parentNode.nodeName === 'A');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
new file mode 100644
index 00000000000..77bcc33a6cb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa3589eacea3f48c6300ae.md
@@ -0,0 +1,75 @@
+---
+id: 5dfa3589eacea3f48c6300ae
+title: الخطوة 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+ضمن عنصر `section` الثاني، أضف عنصر `h2` جديد مع النص `Cat Lists`.
+
+# --hints--
+
+يجب أن يحتوي العنصر `section` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(
+  document.querySelectorAll('section').length === 2 &&
+    code.match(/<\/section>/g).length === 2
+);
+```
+
+يجب أن يحتوي العنصر `h2` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelectorAll('h2').length === 2);
+```
+
+يجب أن يحتوي العنصر `h2` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/h2\>/g).length === 2);
+```
+
+عنصر `h2` الثاني الخاص بك يجب أن يكون أعلى closing tag عنصر `section` الثاني. هو ليس في الوضع الصحيح.
+
+```js
+const secondSection = document.querySelectorAll('section')[1];
+assert(secondSection.lastElementChild.nodeName === 'H2');
+```
+
+يجب أن يحتوي العنصر `h2` الثاني على النص `Cat Lists`. إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+assert(
+  document
+    .querySelectorAll('main > section')[1]
+    .lastElementChild.innerText.toLowerCase() === 'cat lists'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+--fcc-editable-region--
+      <section>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
new file mode 100644
index 00000000000..c6cb3ba2330
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa371beacea3f48c6300af.md
@@ -0,0 +1,84 @@
+---
+id: 5dfa371beacea3f48c6300af
+title: الخطوة 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+عند إضافة عنصر heading ذي رتبة منخفضة إلى الصفحة، فهذا يعني أنك تبدأ قسمًا فرعيًا جديدًا.
+
+بعد آخر عنصر `h2` من عنصر `section` الثاني، أضف عنصر `h3` مع هذا النص:
+
+`Things cats love:`
+
+# --hints--
+
+يبدو أن العنصر الثاني من `section` مفقود أو لا يحتوي على كل من علامة الفتح والإغلاق (opening & closing tag).
+
+```js
+assert(
+  document.querySelectorAll('main > section')[1] &&
+    code.match(/\<\/section>/g).length == 2
+);
+```
+
+يجب أن يكون هناك عنصر `h3` أعلى closing tag عنصر `section` الثاني.
+
+```js
+assert(
+  document.querySelectorAll('main > section')[1].lastElementChild.nodeName ===
+    'H3'
+);
+```
+
+يجب أن يحتوي عنصر `h3` فوق closing tag عنصر `section` الثاني على النص `Things cats love:`. تأكد من تضمين النقطتين (:) في نهاية النص.
+
+```js
+assert(
+  document
+    .querySelectorAll('main > section')[1]
+    .lastElementChild.innerText.toLowerCase()
+    .replace(/\s+/g, ' ') === 'things cats love:'
+);
+```
+
+يجب أن يكون هناك عنصر `h2` مع نص `Cat Lists` فوق آخر عنصر `h3` المدمج في العنصر `section` الاخير. ربما قمت بحذف عنصر `h2` عن طريق الخطأ.
+
+```js
+const secondSectionLastElemNode = document.querySelectorAll('main > section')[1]
+  .lastElementChild;
+assert(
+  secondSectionLastElemNode.nodeName === 'H3' &&
+    secondSectionLastElemNode.previousElementSibling.innerText
+      .toLowerCase()
+      .replace(/\s+/g, ' ') === 'cat lists'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+--fcc-editable-region--
+      <section>
+        <h2>Cat Lists</h2>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
new file mode 100644
index 00000000000..f555eaf17a0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa37b9eacea3f48c6300b0.md
@@ -0,0 +1,58 @@
+---
+id: 5dfa37b9eacea3f48c6300b0
+title: الخطوة 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+بعد عنصر `h3` مع نص `Things cats love:`، أضف عنصر قائمة غير مرتبة (`ul`). لاحظ أنه لن يتم عرض أي شيء في هذه المرحلة.
+
+# --hints--
+
+يجب أن يحتوي العنصر `ul` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('ul'));
+```
+
+يجب أن يحتوي العنصر `ul` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/ul>/));
+```
+
+عنصر `ul` الخاص بك يجب أن يكون أعلى closing tag عنصر `section` الثاني.
+
+```js
+const secondSectionLastElemNode = $('main > section')[1].lastElementChild;
+assert(secondSectionLastElemNode.nodeName === 'UL');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+--fcc-editable-region--
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
new file mode 100644
index 00000000000..7f3c2b565b0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb5ecbeacea3f48c6300b1.md
@@ -0,0 +1,79 @@
+---
+id: 5dfb5ecbeacea3f48c6300b1
+title: الخطوة 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+استخدم عناصر القائمة (`li`) لإنشاء عناصر في قائمة. فيما يلي مثال لعناصر القائمة (list items) في قائمة غير منظمة (unordered list):
+
+```html
+<ul>
+  <li>milk</li>
+  <li>cheese</li>
+</ul>
+```
+
+داخل عنصر `ul` قم بدمج ثلاثة عناصر لعرض ثلاثة أشياء تحبها القطط:
+
+`cat nip` `laser pointers` `lasagna`
+
+# --hints--
+
+يجب أن يكون لديك ثلاثة عناصر `li`. يجب أن يكون لكل عنصر `li` علامة فتح وإغلاق (opening & closing tag) خاصة به.
+
+```js
+assert($('li').length === 3 && code.match(/<\/li\>/g).length === 3);
+```
+
+يجب أن يكون لديك ثلاثة عناصر `li` مع النص `cat nip` و `laser pointers` و `lasagna` بأي ترتيب. إما أنك حذفت بعض النصوص أو لديك خطأ إملائي.
+
+```js
+assert.deepStrictEqual(
+  [...document.querySelectorAll('li')]
+    .map((item) => item.innerText.toLowerCase())
+    .sort((a, b) => a.localeCompare(b)),
+  ['cat nip', 'lasagna', 'laser pointers']
+);
+```
+
+عناصر `li` الثلاثة يجب أن تكون بين علامات فتح وإغلاق العنصر `ul`.
+
+```js
+assert(
+  [...document.querySelectorAll('li')].filter(
+    (item) => item.parentNode.nodeName === 'UL'
+  ).length === 3
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+--fcc-editable-region--
+        <ul>
+        </ul>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
new file mode 100644
index 00000000000..1d2c8b60659
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6250eacea3f48c6300b2.md
@@ -0,0 +1,94 @@
+---
+id: 5dfb6250eacea3f48c6300b2
+title: الخطوة 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+بعد unordered list، أضف صورة جديدة مع قيمة السمة `src` المحددة إلى:
+
+`https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`
+
+وقيمة السمة `alt` الخاصة بها إلى:
+
+`A slice of lasagna on a plate.`
+
+# --hints--
+
+يجب أن يكون هناك عنصر `img` مباشرة بعد علامة الإغلاق `</ul>`.
+
+```js
+assert($('section')[1].lastElementChild.nodeName === 'IMG');
+```
+
+الصورة الجديدة لا تحتوي على سمة `alt`. تحقق من وجود مسافة بعد اسم opening tag و/أو أن هناك مسافات قبل جميع أسماء السمات.
+
+```js
+assert($('section')[1].lastElementChild.hasAttribute('alt'));
+```
+
+يجب أن تحتوي الصورة الجديدة على قيمة `alt` من `A slice of lasagna on a plate.` تأكد من أن قيمة السمة `alt` محاطة بعلامات اقتباس.
+
+```js
+assert(
+  $('section')[1]
+    .lastElementChild.getAttribute('alt')
+    .replace(/\s+/g, ' ')
+    .match(/^A slice of lasagna on a plate\.?$/i)
+);
+```
+
+الصورة الجديدة لا تحتوي على سمة `src`. تحقق من وجود مسافة بعد اسم opening tag و/أو أن هناك مسافات قبل جميع أسماء السمات.
+
+```js
+assert($('section')[1].lastElementChild.hasAttribute('src'));
+```
+
+يجب أن يكون للصورة الجديدة `src`بقيمة `https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg`. تأكد من أن قيمة السمة `src` محاطة بعلامات اقتباس.
+
+```js
+assert(
+  $('section')[1].lastElementChild.getAttribute('src') ===
+    'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
+);
+```
+
+مع أنّك عيّنت لسمة `src` في عنصر img العنوان URL الصحيح، يوصى بأن تحيط دائما قيمة السمة بعلامات اقتباس.
+
+```js
+assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/lasagna\.jpg/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+--fcc-editable-region--
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
new file mode 100644
index 00000000000..97519f07b95
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb655eeacea3f48c6300b3.md
@@ -0,0 +1,76 @@
+---
+id: 5dfb655eeacea3f48c6300b3
+title: الخطوة 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+عنصر `figure` يمثل محتوى قائم بذاته وسيسمح لك بربط صورة مع الشرح.
+
+ادمج الصورة التي أضفتها للتو ضمن عنصر `figure`.
+
+# --hints--
+
+يجب أن يحتوي العنصر `figure` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('figure'));
+```
+
+يجب أن يحتوي العنصر `figure` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/figure\>/));
+```
+
+يجب أن يكون هناك عنصر `figure` أعلى closing tag عنصر الثاني `section`.
+
+```js
+assert($('section')[1].lastElementChild.nodeName === 'FIGURE');
+```
+
+عنصر `img` للـ lasagna يجب أن يدمج في عنصر `figure`.
+
+```js
+assert(
+  document.querySelector('figure > img') &&
+    document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
+      'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+--fcc-editable-region--
+        <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+--fcc-editable-region--
+      </section>
+    </main>
+
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
new file mode 100644
index 00000000000..a0b249fe3c1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfb6a35eacea3f48c6300b4.md
@@ -0,0 +1,98 @@
+---
+id: 5dfb6a35eacea3f48c6300b4
+title: الخطوة 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+يتم استخدام عنصر التسمية التوضيحية الشكلية (`figcaption`) لإضافة تسميات توضيحية لوصف الصورة التي بداخل عنصر `figure`. على سبيل المثال، `<figcaption>A cute cat</figcaption>` تضيف الشرح التوضيحي `A cute cat`.
+
+بعد الصورة التي في عنصر `figure` ، أضف عنصر `figcaption` مع تعيين النص إلى:
+
+`Cats love lasagna.`
+
+# --hints--
+
+يجب أن يحتوي العنصر `figcaption` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('figcaption'));
+```
+
+يجب أن يحتوي العنصر `figcaption` على closing tag. Closing tags يجب ان تتبع بـ `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/figcaption\>/));
+```
+
+عنصر `figcaption` يجب أن يدمج في عنصر `figure`.
+
+```js
+assert(
+  document.querySelector('figure > figcaption') &&
+    document.querySelector('figure > figcaption')
+);
+```
+
+عنصر `img` للـ lasagna يجب أن يدمج في عنصر `figure`.
+
+```js
+assert(
+  document.querySelector('figure > img') &&
+    document.querySelector('figure > img').getAttribute('src').toLowerCase() ===
+      'https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg'
+);
+```
+
+يجب أن يكون عنصر `figcaption` المدمج في عنصر `figure` تحت عنصر `img`. لقد وضعتهم بترتيب خاطئ.
+
+```js
+assert(
+  document.querySelector('figcaption').previousElementSibling.nodeName === 'IMG'
+);
+```
+
+يجب أن يكون نص عنصر `figcaption` الخاص بك هو `Cats love lasagna.` إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+assert(
+  document.querySelector('figcaption').innerText.match(/Cats love lasagna.?$/i)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+--fcc-editable-region--
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+        </figure>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
new file mode 100644
index 00000000000..ec673fe8e40
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d0.md
@@ -0,0 +1,85 @@
+---
+id: 5ef9b03c81a63668521804d0
+title: الخطوة 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+قم بتأكيد كلمة `love` في عنصر `figcaption` من خلال تغليفها في عنصر التأكيد (`em`).
+
+# --hints--
+
+يجب أن يحتوي عنصر التأكيد الخاص بك (`em`) علي opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('em'));
+```
+
+يجب أن يحتوي عنصر التأكيد الخاص بك (`em`) علي closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/em\>/));
+```
+
+إما أنك قمت بحذف عنصر `figcaption` أو أنها تفتقد علامة فتح أو إغلاق.
+
+```js
+assert(document.querySelector('figcaption') && code.match(/<\/figcaption\>/));
+```
+
+يجب أن يحيط عنصر التأكيد الخاص بك (`em`) بالنص `love`. إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+assert(
+  document.querySelector('figcaption > em').innerText.toLowerCase() === 'love'
+);
+```
+
+يجب أن يكون نص `figcaption` هو `Cats love lasagna`. تحقق من عدم وجود اي أخطاء إملائية وأن المسافات اللازمة موجودة حول علامات فتح وإغلاق عنصر `em`.
+
+```js
+assert(
+  document
+    .querySelector('figcaption')
+    .innerText.replace(/\s+/gi, ' ')
+    .match(/cats love lasagna\.?/i)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+--fcc-editable-region--
+          <figcaption>Cats love lasagna.</figcaption>
+--fcc-editable-region--
+        </figure>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
new file mode 100644
index 00000000000..e9512b3e3a3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d1.md
@@ -0,0 +1,81 @@
+---
+id: 5ef9b03c81a63668521804d1
+title: الخطوة 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+بعد عنصر `figure`، أضف عنصر `h3` آخر مع النص:
+
+`Top 3 things cats hate:`
+
+# --hints--
+
+يجب أن يكون هناك عنصر `h3` أعلى closing tag عنصر `section` الثاني. تأكد من أن لديه علامة فتح وإغلاق.
+
+```js
+assert(
+  document.querySelectorAll('main > section')[1].lastElementChild.nodeName ===
+    'H3' && code.match(/<\/h3\>/g).length === 2
+);
+```
+
+عنصر `h3` الجديد يجب أن يحتوي على النص `Top 3 things cats hate:`. تأكد من تضمين النقطتين (:) في نهاية النص.
+
+```js
+assert(
+  document
+    .querySelectorAll('main > section')[1]
+    .lastElementChild.innerText.toLowerCase()
+    .replace(/\s+/g, ' ') === 'top 3 things cats hate:'
+);
+```
+
+يجب أن يكون هناك `figure` فوق عنصر `h3` الجديد. ربما قمت بحذف عنصر `figure` عن طريق الخطأ.
+
+```js
+const secondSectionLastElemNode = document.querySelectorAll('main > section')[1]
+  .lastElementChild;
+assert(
+  secondSectionLastElemNode.nodeName === 'H3' &&
+    secondSectionLastElemNode.previousElementSibling.nodeName === 'FIGURE'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+--fcc-editable-region--
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
new file mode 100644
index 00000000000..ce2c2984ba4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d2.md
@@ -0,0 +1,94 @@
+---
+id: 5ef9b03c81a63668521804d2
+title: الخطوة 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+كود القائمة المرتبة (`ol`) مشابه لـ unordered list، لكن قائمة العناصر (list items) في القائمة المطلوبة يتم ترقيمها عند عرضها.
+
+بعد عنصر `h3` الأخير لعنصر `section` الثاني، أضف ordered list مع عناصر القائمة الثلاثة هذه:
+
+`flea treatment` `thunder` `other cats`
+
+# --hints--
+
+يجب أن يحتوي العنصر `ol` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('ol'));
+```
+
+يجب أن يحتوى عنصر `ol` على closing tag. Closing tags يجب ان تتبع بـ `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/ol>/));
+```
+
+عنصر `ol` الخاص بك يجب أن يكون أعلى closing tag عنصر `section` الثاني. لقد وضعتهم بترتيب خاطئ.
+
+```js
+assert($('main > section')[1].lastElementChild.nodeName === 'OL');
+```
+
+عناصر `li` الثلاثة يجب أن تكون مدمجة داخل عنصر `ol`.
+
+```js
+assert(
+  [...document.querySelectorAll('li')].filter(
+    (item) => item.parentNode.nodeName === 'OL'
+  ).length === 3
+);
+```
+
+يجب أن يكون لديك ثلاثة عناصر `li` مع النص `flea treatment` و `thunder` و `other cats` باي ترتيب.
+
+```js
+assert.deepStrictEqual(
+  [...document.querySelectorAll('li')]
+    .filter((item) => item.parentNode.nodeName === 'OL')
+    .map((item) => item.innerText.toLowerCase())
+    .sort((a, b) => a.localeCompare(b)),
+  ['flea treatment', 'other cats', 'thunder']
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+--fcc-editable-region--
+        <h3>Top 3 things cats hate:</h3>
+--fcc-editable-region--
+      </section>
+    </main>
+
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
new file mode 100644
index 00000000000..2f9ca5c6dc0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d3.md
@@ -0,0 +1,72 @@
+---
+id: 5ef9b03c81a63668521804d3
+title: الخطوة 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+بعد الـ ordered list، أضف عنصر `figure` آخر.
+
+# --hints--
+
+يجب أن يحتوي العنصر `figure` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelectorAll('figure').length === 2);
+```
+
+يجب أن يحتوي العنصر `figure` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/figure>/g).length === 2);
+```
+
+يجب أن يكون هناك عنصر `figure` أعلى closing tag عنصر `section` الثاني.
+
+```js
+assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+--fcc-editable-region--
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
new file mode 100644
index 00000000000..4bd76b192a0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d4.md
@@ -0,0 +1,96 @@
+---
+id: 5ef9b03c81a63668521804d4
+title: الخطوة 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+يتم استخدام عنصر `strong` للإشارة إلى أن بعض النصوص ذات أهمية كبيرة أو ملحة.
+
+في `figcaption` الذي قمت بإضافته للتو، أشر إلى أن `hate` تتسم بأهمية كبيرة من خلال تغليفها في عنصر `strong`.
+
+# --hints--
+
+يجب أن يحتوي العنصر `strong` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('strong'));
+```
+
+يجب أن يحتوى عنصر `strong` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/strong\>/));
+```
+
+عنصر `strong` الخاص بك يجب أن يحيط بكلمة `hate` في النص `Cats hate other cats.` إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+assert(
+  document
+    .querySelectorAll('figcaption')[1]
+    .querySelector('strong')
+    .innerText.toLowerCase() === 'hate'
+);
+```
+
+يجب أن يكون نص `figcaption` هو `Cats hate other cats.` تحقق من عدم وجود اي أخطاء إملائية وأن المسافات اللازمة موجودة حول علامات فتح وإغلاق عنصر `strong`.
+
+```js
+const secondFigCaption = document.querySelectorAll('figcaption')[1];
+assert(
+  secondFigCaption &&
+    secondFigCaption.innerText
+      .replace(/\s+/gi, ' ')
+      .trim()
+      .match(/cats hate other cats\.?/i)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+--fcc-editable-region--
+          <figcaption>Cats hate other cats.</figcaption>  
+--fcc-editable-region--
+        </figure>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
new file mode 100644
index 00000000000..e17eeae2228
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d5.md
@@ -0,0 +1,105 @@
+---
+id: 5ef9b03c81a63668521804d5
+title: الخطوة 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+داخل عنصر `section` الثالث، أضف عنصر `h2` مع النص:
+
+`Cat Form`
+
+# --hints--
+
+غير قادر على العثور على عنصر `section` الثالث. ربما قمت بحذفه عن طريق الخطأ أو حذفت علامة الافتتاح أو علامة الإغلاق.
+
+```js
+assert(
+  document.querySelectorAll('section').length === 3 &&
+    code.match(/<\/section>/g).length === 3
+);
+```
+
+يجب أن يكون للعنصر `h2` الخاص بك علامة فتح وعلامة الإغلاق. قد تكون اغفلت احدي الـ tags المطلوبة.
+
+```js
+assert(
+  document.querySelectorAll('h2').length >= 3 &&
+    code.match(/<\/h2>/g).length >= 3
+);
+```
+
+يجب عليك إضافة عنصر `h2` واحد فقط. الرجاء إزالة أي زيادات.
+
+```js
+assert(document.querySelectorAll('h2').length === 3);
+```
+
+يجب أن يكون عنصر `h2` الجديد أعلى closing tag عنصر `section` الثالث.
+
+```js
+const thirdSection = document.querySelectorAll('section')[2];
+assert(thirdSection.lastElementChild.nodeName === 'H2');
+```
+
+النص الخاص بك `h2` يجب أن يكون `Cat Form`.
+
+```js
+const thirdSection = document.querySelectorAll('section')[2];
+assert(
+  thirdSection
+    .querySelector('h2')
+    .innerText.toLowerCase()
+    .replace(/\s+/g, ' ') === 'cat form'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>
+        </figure>
+      </section>
+--fcc-editable-region--
+      <section>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
new file mode 100644
index 00000000000..b68b7dc70fc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d6.md
@@ -0,0 +1,88 @@
+---
+id: 5ef9b03c81a63668521804d6
+title: الخطوة 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+الآن سوف تضيف نموذج ويب لجمع المعلومات من المستخدمين.
+
+بعد عنوان `Cat Form` ، أضف عنصر `form`.
+
+# --hints--
+
+يجب أن يكون للعنصر `form` الخاص بك علامة فتح وعلامة الإغلاق (opening tag and closing tag). قد تكون اغفلت واحدة من العلامات المطلوبة، أو قد تكون اخطأت في ترتيبهم.
+
+```js
+assert(document.querySelector('form') && code.match(/<\/form>/g));
+```
+
+Tags عنصر `form` الخاص بك ليست بالترتيب الصحيح.
+
+```js
+const noSpaces = code.replace(/\s/g, '');
+assert(noSpaces.indexOf('<form>') < noSpaces.indexOf('</form>'));
+```
+
+يجب أن يكون عنصر `form` المدمج في عنصر `section` تحت عنصر `h2`. عنصر `h2` و `form` لديك، بالترتيب الخاطئ.
+
+```js
+assert(document.querySelector('form').previousElementSibling.nodeName === 'H2');
+```
+
+يجب أن لا يحتوي عنصر `form` على محتوى. قم بإزالة أي عناصر HTML أو نصوص بين tags العنصر `form`.
+
+```js
+assert($('form')[0].innerHTML.trim().length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+--fcc-editable-region--
+        <h2>Cat Form</h2>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
new file mode 100644
index 00000000000..c6f1b12adce
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d7.md
@@ -0,0 +1,116 @@
+---
+id: 5ef9b03c81a63668521804d7
+title: الخطوة 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+السمة `action` تشير إلى أين يجب إرسال بيانات النموذج. على سبيل المثال ، `<form action="/submit-url"></form>` يخبر المتصفح بأنه يجب إرسال بيانات النموذج إلى المسار `/submit-url`.
+
+قم بإضافة سمة `action` مع القيمة `https://freecatphotoapp.com/submit-cat-photo` إلى عنصر `form`.
+
+# --hints--
+
+عنصر `form` الخاص بك يجب أن يحتوي على علامة فتح وعلامة إغلاق بالترتيب الصحيح. قد تكون اغفلت واحدة من العلامات المطلوبة، أو قد تكون اخطأت في ترتيبهم.
+
+```js
+const noSpaces = code.replace(/\s/g, '');
+assert(
+  document.querySelector('form') &&
+    code.match(/<\/form>/g) &&
+    noSpaces.indexOf('<form') < noSpaces.indexOf('</form>')
+);
+```
+
+يجب أن يكون عنصر `form` المدمج في عنصر `section` تحت عنصر `h2`. عنصر `h2` و `form` لديك، بالترتيب الخاطئ.
+
+```js
+assert(document.querySelector('form').previousElementSibling.nodeName === 'H2');
+```
+
+يجب أن لا يحتوي عنصر `form` على محتوى. قم بإزالة أي عناصر HTML أو نصوص بين tags العنصر `form`.
+
+```js
+assert($('form')[0].innerHTML.trim().length === 0);
+```
+
+عنصر `form` الخاص بك لا يحتوي على سمة `action`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+const form = document.querySelector('form');
+assert(form.hasAttribute('action'));
+```
+
+عنصر `form` الخاص بك يجب أن يحتوي على سمة `action` بقيمة `https://freecatphotoapp.com/submit-cat-photo`.
+
+```js
+const form = document.querySelector('form');
+assert(
+  form
+    .getAttribute('action')
+    .match(/^https:\/\/freecatphotoapp\.com\/submit-cat-photo$/)
+);
+```
+
+على الرغم من أنك قمت بتعيين سمة `action` إلى عنوان URL الصحيح، يوصى بأن تحيط دائما قيمة السمة بعلامات اقتباس.
+
+```js
+assert(
+  !/\<form\s+action\s*=\s*https:\/\/freecatphotoapp\.com\/submit-cat-photo/.test(
+    code
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+--fcc-editable-region--
+        <form>
+        </form>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
new file mode 100644
index 00000000000..030cf587203
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d8.md
@@ -0,0 +1,109 @@
+---
+id: 5ef9b03c81a63668521804d8
+title: الخطوة 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+عنصر `input` يسمح لك بعدة طرق لجمع البيانات من نموذج الويب. مثل عناصر `img` ،عناصر `input` هي <dfn>self-closing</dfn> ولا تحتاج إلى علامات الإغلاق (closing tags).
+
+ادمج عنصر `input` في عنصر `form`.
+
+# --hints--
+
+عنصر `form` الخاص بك يجب أن يحتوي على علامة فتح وعلامة إغلاق بالترتيب الصحيح. قد تكون اغفلت واحدة من العلامات المطلوبة، أو قد تكون اخطأت في ترتيبهم.
+
+```js
+const noSpaces = code.replace(/\s/g, '');
+assert(
+  document.querySelector('form') &&
+    code.match(/<\/form>/g) &&
+    noSpaces.indexOf('<form') < noSpaces.indexOf('</form>')
+);
+```
+
+يجب أن تحتوي علامة فتح عنصر `form` الخاص بك على سمة `action` فقط. قم بإزالة أي شيء آخر قد تكون كتبته فيها.
+
+```js
+assert([...document.querySelector('form').attributes].length < 2);
+```
+
+يجب عليك إنشاء عنصر `input`. تحقق من بناء الجملة (syntax).
+
+```js
+assert(document.querySelector('input'));
+```
+
+يجب أن يحتوي عنصر `input` الخاص بك على علامة فتح ولكن ليس علامة الإغلاق.
+
+```js
+assert(document.querySelector('input') && !code.match(/<\/input\>/g));
+```
+
+يجب أن يكون عنصر `input` مدمج داخل عنصر `form`.
+
+```js
+assert(document.querySelector('form > input'));
+```
+
+يجب أن يحتوي `form` على عنصر `input` فقط. قم بإزالة أي عناصر HTML أو نصوص بين tags العنصر `form`.
+
+```js
+assert(
+  $('form')[0].children.length === 1 &&
+    $('form')[0].innerText.trim().length === 0
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+--fcc-editable-region--
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+        </form>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
new file mode 100644
index 00000000000..0335e84f731
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804d9.md
@@ -0,0 +1,104 @@
+---
+id: 5ef9b03c81a63668521804d9
+title: الخطوة 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+يستخدم نص Placeholder لإعطاء الناس تلميحا حول نوع المعلومات التي يدخلها في الـ input. على سبيل المثال، `<input type="text" placeholder="Email address">`.
+
+اضف نص الـ placeholder الآتي `cat photo URL` لعنصر `input`.
+
+# --hints--
+
+لقد قمت إما بحذف عنصر `input` الخاص بك أو أن بناء الجملة (syntax) غير صحيح. يجب أن تكون جميع قيم السمات محاطة بعلامات اقتباس.
+
+```js
+assert($('input').length);
+```
+
+يجب أن يحتوي `form` على عنصر `input` فقط. إزالة أي عناصر HTML إضافية أو نص داخل عنصر `form`.
+
+```js
+assert(
+  $('form')[0].children.length === 1 &&
+    $('form')[0].innerText.trim().length === 0
+);
+```
+
+عنصر `input` الخاص بك لا يحتوي على سمة `placeholder`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+assert($('input')[0].hasAttribute('placeholder'));
+```
+
+يجب أن يحتوي عنصر `input` الخاص بك على `placeholder` مع القيمة `cat photo URL`.  إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن قيم السمة يجب أن تكون محاطة بعلامات اقتباس.
+
+```js
+assert(
+  $('input')[0]
+    .getAttribute('placeholder')
+    .replace(/\s+/g, ' ')
+    .match(/^cat photo URL$/i)
+);
+```
+
+على الرغم من أنك قمت بتعيين عنصر `input` سمة `placeholder` إلى `cat photo URL`، يوصى بأن تحيط دائما بقيمة السمة بعلامات اقتباس.
+
+```js
+assert(!/\<\s*input\s+placeholder\s*=\s*cat\s+photo\s+url/i.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <input type="text" name="catphotourl">
+--fcc-editable-region--
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
new file mode 100644
index 00000000000..352d2706281
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804da.md
@@ -0,0 +1,93 @@
+---
+id: 5ef9b03c81a63668521804da
+title: الخطوة 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+استخدم عنصر `button` لإنشاء زر قابل للنقر. على سبيل المثال ، `<button>Click Here</button>` ينشئ زر مع النص `Click Here`.
+
+أضف عنصر `button` مع النص `Submit` أسفل عنصر `input`. السلوك الافتراضي بالنقر على زر النموذج دون أي سمات يرسل النموذج إلى الموقع المحدد في سمة `action` للنموذج.
+
+# --hints--
+
+يجب أن يحتوي العنصر `button` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('button'));
+```
+
+يجب أن يحتوي العنصر `button` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/button\>/));
+```
+
+يجب أن يكون نص عنصر `button` هو `Submit`. إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+assert(document.querySelector('button').innerText.toLowerCase() === 'submit');
+```
+
+يجب أن يكون عنصر `button` الخاص بك تحت عنصر `input`. لقد وضعتهم بترتيب خاطئ.
+
+```js
+const collection = [...document.querySelectorAll('input, button')].map(
+  (node) => node.nodeName
+);
+assert(collection.indexOf('INPUT') < collection.indexOf('BUTTON'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+--fcc-editable-region--
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
new file mode 100644
index 00000000000..91d9c859288
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804db.md
@@ -0,0 +1,91 @@
+---
+id: 5ef9b03c81a63668521804db
+title: الخطوة 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+لمنع المستخدم من إرسال النموذج الخاص بك عندما تكون المعلومات المطلوبة مفقودة، تحتاج إلى إضافة السمة `required` إلى عنصر `input`. لا توجد حاجة إلى تعيين قيمة للسمة `required`. بدلاً من ذلك، أضف كلمة `required` إلى عنصر `input` ، تأكد من وجود مساحة بينها وبين السمات أخرى.
+
+# --hints--
+
+لقد قمت إما بحذف عنصر `input` الخاص بك أو أن بناء الجملة (syntax) غير صحيح. يجب أن تكون جميع قيم السمات محاطة بعلامات اقتباس.
+
+```js
+assert($('input').length);
+```
+
+يجب أن يحتوي `form` على عنصر `input` فقط. قم بإزالة أي عناصر HTML إضافية أو نص داخل عنصر `form`.
+
+```js
+assert(
+  $('form')[0].children.length === 1 &&
+    $('form')[0].innerText.trim().length === 0
+);
+```
+
+يجب أن يحتوي عنصر `input` الخاص بك علي سمة `required`. تذكر، أنت فقط تضيف الكلمة `required` داخل tag العنصر `input`.
+
+```js
+assert($('input')[0].hasAttribute('required'));
+```
+
+يجب عدم إعطاء قيمة إلى السمة `required`.
+
+```js
+assert($('input')[0].getAttribute('required') === '');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <input type="text" name="catphotourl" placeholder="cat photo URL">
+--fcc-editable-region--
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
new file mode 100644
index 00000000000..1240152dffb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dc.md
@@ -0,0 +1,137 @@
+---
+id: 5ef9b03c81a63668521804dc
+title: الخطوة 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+يمكنك استخدام أزرار الراديو (radio buttons) للأسئلة حيث تريد إجابة واحدة فقط من خيارات متعددة.
+
+هذا مثال على زر الراديو مع خيار `cat`: `<input type="radio"> cat`. تذكر أن عناصر `input` هي <dfn>self-closing</dfn>.
+
+قبل الـ text input، أضف زر radio مع الخيار محدد كالتالي:
+
+`Indoor`
+
+# --hints--
+
+يجب عليك إنشاء عنصر `input` لزر الراديو الخاص بك. تحقق من بناء الجملة (syntax).
+
+```js
+assert($('form > input').length >= 2);
+```
+
+يجب أن يحتوي عنصر `input` الخاص بك على علامة فتح ولكن ليس علامة الإغلاق.
+
+```js
+assert($('form > input') && !code.match(/<\/input\>/g));
+```
+
+يجب عليك فقط إضافة عنصر واحد `input` لزر الراديو الخاص بك. قم بإزالة أي زيادات.
+
+```js
+assert($('form > input').length === 2);
+```
+
+عنصر `input` الجديد يجب أن يكون فوق `input` الحالي مع سمة `type` بقيمة `text`. لقد وضعتهم بترتيب خاطئ.
+
+```js
+const existingInputElem = document.querySelector('form > input[type="text"]');
+assert(
+  existingInputElem &&
+    existingInputElem.previousElementSibling.nodeName === 'INPUT'
+);
+```
+
+عنصر `input` الخاص بك لا يحتوي على سمة `type`. تحقق من أن هناك مسافة بعد اسم الـ opening tag.
+
+```js
+assert($('input')[0].hasAttribute('type'));
+```
+
+عنصر `input` الخاص بك يجب أن يحتوي على سمة `type` بقيمة `radio`. إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن قيم السمة يجب أن تكون محاطة بعلامات اقتباس.
+
+```js
+assert(
+  $('input')[0]
+    .getAttribute('type')
+    .match(/^radio$/i)
+);
+```
+
+على الرغم من أنك قمت بتعيين عنصر `input` سمة `type` إلى `radio`، يوصى بأن تحيط دائما قيمة السمة بعلامات اقتباس.
+
+```js
+assert(!/\<\s*input\s+type\s*=\s*radio/i.test(code));
+```
+
+يجب أن يتواجد النص `Indoor` لزر الـ `radio`، بعد الرز وليس قبله.
+
+```js
+const radioInputElem = $('input')[0];
+assert(!radioInputElem.previousSibling.nodeValue.match(/Indoor/i));
+```
+
+النص `Indoor` يجب أن يكون مباشرة على يمين زر الـ `radio`. إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+const radioInputElem = $('input')[0];
+assert(
+  radioInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/\s*Indoor/i)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+--fcc-editable-region--
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
new file mode 100644
index 00000000000..b3516c34492
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804dd.md
@@ -0,0 +1,104 @@
+---
+id: 5ef9b03c81a63668521804dd
+title: الخطوة 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+عناصر `label` تستخدم للمساعدة في ربط النص لعنصر `input` بعنصر الـ `input` نفسه (خاصة للتكنولوجيات المساعدة مثل قارئ الشاشة). على سبيل المثال ،`<label><input type="radio"> cat</label>` يجعلها تجعل النقر على كلمة `cat` يؤدي أيضًا إلى تحديد زر الراديو المقابل.
+
+قم بدمج زر `radio` الخاص بك داخل عنصر `label`.
+
+# --hints--
+
+يجب عليك التأكد من أن زر الراديو لا يزال موجودا.
+
+```js
+assert($('input[type="radio"]')[0]);
+```
+
+النص `Indoor` يجب أن يكون مباشرة على يمين زر الـ `radio`. تأكد من وجود مسافة بين العنصر والنص. إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+const radioInputElem = $('input')[0];
+assert(
+  radioInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Indoor/i)
+);
+```
+
+يجب أن يحتوي العنصر `label` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('label'));
+```
+
+يجب أن يحتوي عنصر `label` الخاص بك على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/label\>/));
+```
+
+زر الراديو الخاص بك ونصه يجب أن يكونا بين علامات الافتتاح والإغلاق الخاصة بعنصر `label`.
+
+```js
+const labelChildNodes = [...$('form > label')[0].childNodes];
+assert(
+  labelChildNodes.filter((childNode) => childNode.nodeName === 'INPUT').length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <input type="radio"> Indoor
+--fcc-editable-region--
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
new file mode 100644
index 00000000000..1eb89d2edaf
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804de.md
@@ -0,0 +1,105 @@
+---
+id: 5ef9b03c81a63668521804de
+title: الخطوة 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+لاحظ أنه يمكن تحديد كلا زري الراديو في نفس الوقت. لجعل اختيار زر راديو معين يؤدي تلقائيًا بإزالة الأخر، يجب أن يكون لكلا الزرين سمة `name` بنفس القيمة.
+
+أضف السمة `name` مع القيمة `indoor-outdoor` لكلا زرين الراديو.
+
+# --hints--
+
+يجب أن يظل كل من أزرار الراديو موجودًا بين opening و closing tags عنصر `label`.
+
+```js
+const labelChildNodes = [...document.querySelectorAll('form > label')].map(
+  (node) => node.childNodes
+);
+assert(
+  labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT')
+    .length === 2
+);
+```
+
+يجب أن يكون لكل من أزرار الراديو السمة `name`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+const radioButtons = [...document.querySelectorAll('input[type="radio"]')];
+assert(radioButtons.every((btn) => btn.hasAttribute('name')));
+```
+
+يجب أن يكون لكل من أزرار الراديو السمة `type`. تحقق من وجود مسافة بعد اسم opening tag و/أو أن هناك مسافات قبل جميع أسماء السمات.
+
+```js
+const radioButtons = [...document.querySelectorAll('input')];
+assert(radioButtons.every((btn) => btn.hasAttribute('type')));
+```
+
+يجب أن يكون لكل من أزرار الراديو سمة `name` مع القيمة `indoor-outdoor`. إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن تحيط قيمة السمة بعلامات اقتباس.
+
+```js
+const radioButtons = [...$('input[type="radio"]')];
+assert(
+  radioButtons.every((btn) =>
+    btn.getAttribute('name').match(/^indoor-outdoor$/)
+  )
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <label><input id="indoor" type="radio"> Indoor</label>
+          <label><input id="outdoor" type="radio"> Outdoor</label>
+--fcc-editable-region--
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
new file mode 100644
index 00000000000..f25319f85a9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804df.md
@@ -0,0 +1,95 @@
+---
+id: 5ef9b03c81a63668521804df
+title: الخطوة 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+يتم استخدام السمة `id` لتحديد عناصر HTML معينة. يجب أن تكون قيمة كل `id` فريدة من كل قيم `id` الأخرى للصفحة بأكملها.
+
+أضف السمة `id` مع القيمة `indoor` لزر الراديو. عندما يكون للعناصر سمات متعددة، لا يهم ترتيب السمات.
+
+# --hints--
+
+زر الراديو الخاص بك يجب أن يظل موجودا بين علامات الافتتاح والإغلاق الخاصة بعنصر `label`.
+
+```js
+const labelChildNodes = [...$('form > label')[0].childNodes];
+assert(
+  labelChildNodes.filter((childNode) => childNode.nodeName === 'INPUT').length
+);
+```
+
+زر الراديو الخاص بك يجب أن يحتوي على السمة `id`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+assert($('input')[0].hasAttribute('id'));
+```
+
+يجب أن يحتوي زرك الراديو على سمة `type`. تحقق من وجود مسافة بعد اسم opening tag و/أو أن هناك مسافات قبل جميع أسماء السمات.
+
+```js
+assert($('input')[0].hasAttribute('type'));
+```
+
+يجب أن يكون لعنصر الراديو سمة `id` مع القيمة `indoor`. إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن تحيط قيمة السمة بعلامات اقتباس.
+
+```js
+assert($('input')[0].id.match(/^indoor$/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <label><input type="radio"> Indoor</label>
+--fcc-editable-region--
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
new file mode 100644
index 00000000000..7780a4a586e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e1.md
@@ -0,0 +1,102 @@
+---
+id: 5ef9b03c81a63668521804e1
+title: الخطوة 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+يتم استخدام عنصر `fieldset` لتجميع المدخلات (inputs) والمسميات (labels) ذات الصلة معا في نموذج ويب. `fieldset` هي <dfn>block-level elements</dfn>، مما يعني أنها تظهر على سطر جديد.
+
+قم بدمج `Indoor` و `Outdoor` داخل عنصر `fieldset` ولا تنسى وضع مسافة بادئة (indent) لأزرار الراديو.
+
+# --hints--
+
+يجب أن يظل كل من أزرار الراديو موجودًا بين opening و closing tags عنصر `label`.
+
+```js
+const labelChildNodes = [...$('label')].map((node) => [...node.childNodes]);
+assert(
+  labelChildNodes.filter(
+    childNodes =>
+      childNodes.filter(node => node.nodeName === 'INPUT').length === 1
+  ).length === 2
+);
+```
+
+يجب أن يحتوي العنصر `fieldset` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('fieldset'));
+```
+
+يجب أن يحتوي العنصر `fieldset` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/fieldset\>/));
+```
+
+كل من زري الراديو و التسميات المرتبطة بهما يجب أن تكونا بين العلامات الافتتاحية و الإغلاق لعنصر `fieldset`.
+
+```js
+const radioButtons = [...$('input[type="radio"]')];
+assert(
+  radioButtons.every((btn) => btn.parentNode.parentNode.nodeName === 'FIELDSET')
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+          <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+--fcc-editable-region--
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
new file mode 100644
index 00000000000..65de79393df
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e2.md
@@ -0,0 +1,130 @@
+---
+id: 5ef9b03c81a63668521804e2
+title: الخطوة 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+تستخدم النماذج عادة خانات اختيار (checkboxes) للأسئلة التي قد تحتوي على أكثر من إجابة واحدة. على سبيل المثال، إليك مربع إختيار (checkbox) مع خيار `tacos`: `<input type="checkbox"> tacos`.
+
+تحت العنصر `legend` الذي أضفته للتو، قم بإضافة `input` مع السمة `type` المحددة إلى `checkbox` وإعطائه الخيار:
+
+`Loving`
+
+# --hints--
+
+عنصر `input` في مربع الاختيار الخاص بك يجب أن يحتوي على علامة opening tag ليس closing tag.
+
+```js
+assert($('fieldset > input') && !code.match(/<\/input\>/g));
+```
+
+يجب عليك إضافة عنصر input واحد فقط إلى مربع الاختيار (checkbox) الخاص بك. قم بإزالة أي زيادات.
+
+```js
+assert($('fieldset > input').length === 1);
+```
+
+عنصر `input` الجديد يجب أن يكون تحت عنصر `legend` مع النص `What's your cat's personality?`. لقد وضعتهم بترتيب خاطئ.
+
+```js
+const existingLegendElem = $('fieldset > legend')[1];
+assert(
+  existingLegendElem &&
+    existingLegendElem.nextElementSibling.nodeName === 'INPUT'
+);
+```
+
+عنصر `input` الخاص بك لا يحتوي على سمة `type`. تحقق من أن هناك مسافة بعد اسم الـ opening tag.
+
+```js
+assert($('fieldset > input')[0].hasAttribute('type'));
+```
+
+عنصر `input` الجديد الخاص بك يجب أن يحتوي على سمة `type` بقيمة `checkbox`. إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن قيم السمة يجب أن تكون محاطة بعلامات اقتباس.
+
+```js
+assert(
+  $('fieldset > input')[0]
+    .getAttribute('type')
+    .match(/^checkbox$/i)
+);
+```
+
+على الرغم من أنك قمت بتعيين عنصر `input` سمة `type` إلى `checkbox`، يوصى بأن تحيط دائما قيمة السمة بعلامات اقتباس.
+
+```js
+assert(!/\<\s*input\s+type\s*=\s*checkbox/i.test(code));
+```
+
+يجب أن يكون النص `Loving` علي يمين خانة الاختيار الخاصة بك مباشرة. تأكد من وجود مسافة بين العنصر والنص. إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+const checkboxInputElem = $('input[type="checkbox"]')[0];
+assert(
+  checkboxInputElem.nextSibling.nodeValue.replace(/\s+/g, ' ').match(/ Loving/i)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+--fcc-editable-region--
+            <legend>What's your cat's personality?</legend>
+--fcc-editable-region--
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
new file mode 100644
index 00000000000..d121beddf9d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e3.md
@@ -0,0 +1,122 @@
+---
+id: 5ef9b03c81a63668521804e3
+title: الخطوة 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+أضف مربع اختيار (checkbox) آخر بعد المربع الذي أضفته للتو. قيمة السمة `id` يجب أن تكون `lazy` و قيمة السمة`name` يجب أن تكون نفس خانة الاختيار الاخيره.
+
+أضف أيضًا عنصر `label` إلى يمين مربع الاختيار الجديد مع النص `Lazy`. تأكد من ربط عنصر `label` مع مربع الاختيار الجديد باستخدام سمة `for`.
+
+# --hints--
+
+تحتاج إلى إضافة مربع اختيار جديد.
+
+```js
+assert($('input[type="checkbox"]').length === 2);
+```
+
+يجب أن يكون لمربع الاختيار الجديد سمة `id` بالقيمة `lazy` و سمة `name` بالقيمة `personality`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+const checkboxes = [...$('input[type="checkbox"]')];
+assert(
+  checkboxes.some(
+    (checkbox) =>
+      checkbox.id === 'lazy' && checkbox.getAttribute('name') === 'personality'
+  )
+);
+```
+
+يجب أن يكون مربع الاختيار الجديد الخاص بك بعد المربع الأول. لقد وضعتهم بترتيب خاطئ.
+
+```js
+const checkboxes = [...$('input[type="checkbox"]')].map(
+  (checkbox) => checkbox.id
+);
+assert(checkboxes.indexOf('loving') < checkboxes.indexOf('lazy'));
+```
+
+على الجانب الأيمن من مربع الاختيار الجديد الخاص بك، يجب أن يكون عنصر `label` مع النص `Lazy`.
+
+```js
+const nextElementSibling = $('input[type="checkbox"]')[1].nextElementSibling;
+assert(
+  nextElementSibling.nodeName === 'LABEL' &&
+    nextElementSibling.innerText.replace(/\s+/g, '').match(/^Lazy$/i)
+);
+```
+
+يجب أن يحتوي `label` على سمة `for` بنفس القيمة كسمة `id` لخانة الاختيار الجديدة. إما أنك حذفت القيمة أو لديك خطأ إملائي.
+
+```js
+assert(
+  $('input[type="checkbox"]')[1].nextElementSibling.getAttribute('for') ===
+    'lazy'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+--fcc-editable-region--
+            <input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
+--fcc-editable-region--
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
new file mode 100644
index 00000000000..95846c2fc3b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e5.md
@@ -0,0 +1,117 @@
+---
+id: 5ef9b03c81a63668521804e5
+title: الخطوة 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+من أجل تحديد خانة اختيار (checkbox) أو تحديد زر راديو (radio button) بشكل افتراضي، تحتاج إلى إضافة السمة `checked` إليها. لا توجد حاجة إلى تعيين قيمة للسمة `checked`. بدلاً من ذلك، أضف كلمة `checked` إلى عنصر `input` ، تأكد من وجود مساحة بينها وبين السمات أخرى.
+
+اجعل زر الراديو الأول و مربع الاختيار الأول محددين بشكل افتراضي.
+
+# --hints--
+
+تأكد من أنه لا يزال هناك زرين راديو وثلاث خانات اختيار مدمجة في عناصر `fieldset` الخاصة بها.
+
+```js
+assert(
+  $('input[type="radio"]').length === 2 &&
+    $('fieldset > input[type="checkbox"]').length === 3
+);
+```
+
+زر الراديو الأول مفتقد لسمة `checked`.
+
+```js
+assert($('input[type="radio"]')[0].hasAttribute('checked'));
+```
+
+زر الراديو الثاني لا يجب أن يحتوي على السمة `checked`.
+
+```js
+assert(!$('input[type="radio"]')[1].hasAttribute('checked'));
+```
+
+خانة الاختيار الأولى مفتقدة لسمة `checked`.
+
+```js
+assert($('input[type="checkbox"]')[0].hasAttribute('checked'));
+```
+
+يجب ألا يحتوي مربع الاختيار الثاني على السمة `checked`.
+
+```js
+assert(!$('input[type="checkbox"]')[1].hasAttribute('checked'));
+```
+
+يجب ألا يحتوي مربع الاختيار الثالث على السمة `checked`.
+
+```js
+assert(!$('input[type="checkbox"]')[2].hasAttribute('checked'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+            <input id="loving" type="checkbox" name="personality" value="loving"> <label for="loving">Loving</label>
+            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
+            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic"> Energetic</label>
+          </fieldset>
+--fcc-editable-region--
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
new file mode 100644
index 00000000000..951df037604
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e7.md
@@ -0,0 +1,102 @@
+---
+id: 5ef9b03c81a63668521804e7
+title: الخطوة 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+الآن سوف تضيف قسم تذييل (footer section) للصفحة.
+
+بعد عنصر `main`، أضف عنصر `footer`.
+
+# --hints--
+
+إما أنك قمت بحذف عنصر `main` أو أنه يفتقد علامة فتح أو إغلاق.
+
+```js
+assert(document.querySelector('main') && code.match(/<\/main>/));
+```
+
+يجب أن يحتوي العنصر `footer` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('footer'));
+```
+
+يجب أن يحتوي العنصر `footer` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/footer\>/));
+```
+
+عنصر `footer` الخاص بك يجب أن يكون تحت عنصر `main` الخاص بك. لقد وضعته في مكان آخر.
+
+```js
+assert(document.querySelector('main').nextElementSibling.nodeName === 'FOOTER');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
+            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
+            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
new file mode 100644
index 00000000000..239cfc5ed47
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e8.md
@@ -0,0 +1,104 @@
+---
+id: 5ef9b03c81a63668521804e8
+title: الخطوة 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+قم بدمج عنصر `p` مع النص `No Copyright - freeCodeCamp.org` داخل عنصر `footer`.
+
+# --hints--
+
+إما أنك قمت بحذف عنصر `footer` أو أنه يفتقد علامة فتح أو إغلاق.
+
+```js
+assert(document.querySelector('footer') && code.match(/<\/footer>/));
+```
+
+عنصر `footer` الخاص بك يجب أن يحتوي على عنصر `p`. تأكد من إضافة علامة فتح وعلامة إغلاق لعنصر `p`.
+
+```js
+assert(document.querySelector('footer > p'));
+```
+
+يجب أن يحتوي العنصر `footer` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+const pElemClosingTags = code.match(/<\/p\>/g);
+assert(pElemClosingTags && pElemClosingTags.length === 2);
+```
+
+يجب أن يكون نص العنصر `p` الخاص بك `No Copyright - freeCodeCamp.org`. إما أن تكون قد حذفت النص، أو لديك خطأ إملائي، أو أنه ليس بين علامتي فتح وإغلاق العنصر `p`.
+
+```js
+const extraSpacesRemoved = $('footer > p')[0].innerText.replace(/\s+/g, ' ');
+assert(extraSpacesRemoved.match(/No Copyright - freeCodeCamp\.org$/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
+            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
+            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+--fcc-editable-region--
+    <footer>
+    </footer>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
new file mode 100644
index 00000000000..12b194ab022
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804e9.md
@@ -0,0 +1,118 @@
+---
+id: 5ef9b03c81a63668521804e9
+title: الخطوة 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+اجعل النص `freeCodeCamp.org` في رابط عن طريق إرفاقه في عنصر رابط (`a`). يجب تعيين سمة `href` إلى `https://www.freecodecamp.org`.
+
+# --hints--
+
+يجب أن يكون عنصر (`a`) الخاص بك داخل عنصر `footer`. تأكد من إضافة علامة فتح وعلامة إغلاق لعنصر `a`.
+
+```js
+assert($('footer > p > a').length);
+```
+
+يجب أن يحتوي العنصر (`a`) على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+const aElemClosingTags = code.match(/<\/a\>/g);
+assert(aElemClosingTags && aElemClosingTags.length === 3);
+```
+
+عنصر (`a`) الخاص بك يجب أن يحتوي على سمة `href` بقيمة `https://www.freecodecamp.org`. ربما تكون قد أغفلت السمة / القيمة، أو لديك طابعة.
+
+```js
+const nestedAnchor = $('footer > p > a')[0];
+assert(nestedAnchor.getAttribute('href').toLowerCase() === 'https://www.freecodecamp.org');
+```
+
+يجب أن يكون نص الرابط `freeCodeCamp.org`. إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+const nestedAnchor = $('footer > p > a')[0];
+assert(
+  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') ===
+    'freecodecamp.org'
+);
+```
+
+بعد دمج عنصر الرابط (`a`)، محتوى العنصر `p` الوحيد المرئي في المتصفح يجب أن يكون `No Copyright - freeCodeCamp.org`. تحقق مرتين من النص أو المسافات أو علامات الترقيم لكلا العنصر `p` وعنصر الرابط الدمج.
+
+```js
+const pText = $('footer > p')[0].innerText.toLowerCase().replace(/\s+/g, ' ');
+assert(pText.match(/^no copyright - freecodecamp.org$/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
+            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
+            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+    <footer>
+      <p>
+--fcc-editable-region--
+        No Copyright - freeCodeCamp.org
+--fcc-editable-region--
+      </p>
+    </footer>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
new file mode 100644
index 00000000000..bf2722476bf
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ea.md
@@ -0,0 +1,108 @@
+---
+id: 5ef9b03c81a63668521804ea
+title: الخطوة 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+لاحظ أن كل ما قمت بإضافته إلى الصفحة حتى الآن هو داخل عنصر `body`. جميع عناصر محتوى الصفحة التي يجب عرضها علي الصفحة تذهب داخل عنصر `body`. ومع ذلك، هناك معلومات هامة أخرى تدخل داخل عنصر `head`.
+
+قم بإضافة عنصر `head` فوق عنصر `body` مباشرة.
+
+# --hints--
+
+إما أنك قمت بحذف عنصر `body` أو أنه يفتقد علامة فتح أو إغلاق.
+
+```js
+assert(document.querySelector('body') && code.match(/<\/body>/));
+```
+
+يجب أن يحتوي العنصر `head` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(code.match(/\<head\>/));
+```
+
+يجب أن يحتوي عنصر `head` الخاص بك على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/\<\/head\>/));
+```
+
+يجب أن يكون عنصر `head` الخاص بك فوق علامة عنصر `body` الافتتاحية. لقد وضعته في مكان آخر.
+
+```js
+const noSpaces = code.replace(/\s/g, '');
+assert(noSpaces.match(/\<\/head\>\<body\>/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+--fcc-editable-region--
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
+            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
+            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+    <footer>
+      <p>
+        No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
+      </p>
+    </footer>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
new file mode 100644
index 00000000000..a6409bf73ba
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804eb.md
@@ -0,0 +1,112 @@
+---
+id: 5ef9b03c81a63668521804eb
+title: الخطوة 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+عنصر `title` يحدد ما تظهره المتصفحات في شريط العنوان أو علامة التبويب للصفحة.
+
+قم بإضافة عنصر `title` داخل عنصر `head` باستخدام النص أدناه:
+
+`CatPhotoApp`
+
+# --hints--
+
+إما أنك قمت بحذف عنصر `head` أو أنه يفتقد علامة فتح أو إغلاق.
+
+```js
+assert(code.match(/\<head\>/) && code.match(/\<\/head\>/));
+```
+
+عنصر `title` الخاص بك يجب أن يكون داخل عنصر `head` الخاص بك. تأكد من إضافة علامة فتح وعلامة إغلاق لعنصر `title`.
+
+```js
+const noSpaces = code.replace(/\s/g, '');
+assert(noSpaces.match(/\<head\>\<title\>.*\<\/title\>\<\/head\>/));
+```
+
+يجب أن يحتوي العنصر `title` على closing tag. Closing tags يجب ان تتبع بـ `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/\<\/title\>/));
+```
+
+النص في عنصر `title` يجب أن يكون `CatPhotoApp`. إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+assert(document.title && document.title.toLowerCase() === 'catphotoapp');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+--fcc-editable-region--
+  <head>
+  </head>
+--fcc-editable-region--
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
+            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
+            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+    <footer>
+      <p>
+        No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
+      </p>
+    </footer>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
new file mode 100644
index 00000000000..a40e314ec0d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ec.md
@@ -0,0 +1,105 @@
+---
+id: 5ef9b03c81a63668521804ec
+title: الخطوة 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+لاحظ أن محتويات الصفحة بأكملها مدمجة داخل عنصر `html`. يجب أن تكون جميع العناصر الأخرى أحفاد العنصر `html`.
+
+أضف السمة `lang` مع القيمة `en` إلى opening tag الـ `html` لتحديد أن لغة الصفحة هي الإنجليزية.
+
+# --hints--
+
+إما أنك قمت بحذف عنصر `html` أو أنه يفتقد علامة فتح أو إغلاق.
+
+```js
+assert(code.match(/\<html.*?\>/) && code.match(/\<\/html\>/));
+```
+
+عنصر `html` الخاص بك يجب أن يحتوي على سمة `lang` بقيمة `en`. ربما تكون قد أغفلت السمة / القيمة، أو لديك خطأ إملائي.
+
+```js
+const extraSpacesRemoved = code.replace(/\s+/g, ' ');
+assert(extraSpacesRemoved.match(/\<html lang\=("|')([a-z]+)\1\>/));
+```
+
+على الرغم من أنك قمت بتعيين عنصر `html` سمة `lang` إلى `en`، يوصى بأن تحيط دائما قيمة السمة بعلامات اقتباس.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<html>
+--fcc-editable-region--
+  <head>
+    <title>CatPhotoApp</title>
+  </head>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
+            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
+            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+    <footer>
+      <p>
+        No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
+      </p>
+    </footer>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
new file mode 100644
index 00000000000..1cecb496dfe
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5ef9b03c81a63668521804ee.md
@@ -0,0 +1,99 @@
+---
+id: 5ef9b03c81a63668521804ee
+title: الخطوة 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+يجب أن تبدأ جميع الصفحات بـ `<!DOCTYPE html>`. تُعرف هذه السلسلة (string) الخاصة باسم <dfn>declaration</dfn> وتضمن أن المتصفح يحاول تلبية المواصفات على مستوى الصناعة.
+
+أضف هذا التعريف كالسطر الأول من الكود.
+
+# --hints--
+
+يجب أن يبدأ الكود الخاص بك بتعريف `<!DOCTYPE html>`. ربما كنت قد أغفلت التعريف، أو لديك خطأ إملائي، أو أنه ليس علي السطر الأول من الكود.
+
+```js
+assert(code.match(/\<\s*!DOCTYPE\s+html\s*\>/));
+```
+
+يجب أن يكون موقع `<!DOCTYPE html>` في الجزء العلوي من المستند (document).
+
+```js
+const noSpaces = code.replace(/\s/g, '');
+assert(noSpaces.match(/^\<\!DOCTYPEhtml\>\<html/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<html lang="en">
+  <head>
+    <title>CatPhotoApp</title>
+  </head>
+--fcc-editable-region--
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
+            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
+            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+    <footer>
+      <p>
+        No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
+      </p>
+    </footer>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
new file mode 100644
index 00000000000..c5077ac74e1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efada803cbd2bbdab94e332.md
@@ -0,0 +1,99 @@
+---
+id: 5efada803cbd2bbdab94e332
+title: الخطوة 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+داخل عنصر `figure` الذي أضفته للتو، ادمج عنصر `img` مع سمة `src` بقيمة `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`.
+
+# --hints--
+
+يجب أن يحتوي العنصر `figure` الثاني على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelectorAll('figure').length >= 2);
+```
+
+يجب أن يحتوي العنصر `figure` الثاني على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/figure>/g).length >= 2);
+```
+
+يجب أن يكون هناك عنصر `figure` ثاني أعلى closing tag عنصر `section` الثاني. لقد وضعتهم بترتيب خاطئ.
+
+```js
+assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE');
+```
+
+يجب أن يكون لديك عنصر `img` ثالث مدمج في عنصر `figure`.
+
+```js
+const catsImg = document.querySelectorAll('figure > img')[1];
+assert(
+  catsImg
+);
+```
+
+يجب أن يكون للصورة الثالثة سمة `src` بقيمة `https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg`.
+
+```js
+const catsImg = document.querySelectorAll('figure > img')[1];
+assert(
+  catsImg &&
+    catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
+);
+```
+
+على الرغم من أنك قمت بتعيين سمة `src` لعنصر img إلى عنوان الـ URL الصحيح، يوصى بأن تحيط دائما قيمة السمة بعلامات اقتباس.
+
+```js
+assert(!/\<img\s+.+\s+src\s*=\s*https:\/\/cdn\.freecodecamp\.org\/curriculum\/cat-photo-app\/cats\.jpg/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+--fcc-editable-region--
+        <figure>
+        </figure>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
new file mode 100644
index 00000000000..d59ec2054c4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae0543cbd2bbdab94e333.md
@@ -0,0 +1,99 @@
+---
+id: 5efae0543cbd2bbdab94e333
+title: الخطوة 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+لتحسين إمكانية الوصول (accessibility) إلى الصورة التي أضفتها للتو، أضف خاصية `alt` مع النص:
+
+`Five cats looking around a field.`
+
+# --hints--
+
+يجب أن يحتوي العنصر `figure` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelectorAll('figure').length === 2);
+```
+
+يجب أن يحتوي العنصر `figure` على closing tag. Closing tags يجب ان تتبع بـ `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/figure>/g).length === 2);
+```
+
+يجب أن يكون هناك عنصر `figure` أعلى closing tag عنصر `section` الاخير.
+
+```js
+assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE');
+```
+
+عنصر `img` للـ Cats يجب أن يدمج في عنصر `figure`.
+
+```js
+const catsImg = document.querySelectorAll('figure > img')[1];
+assert(
+  catsImg &&
+    catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
+);
+```
+
+يجب أن يكون لعنصر `img` للـ Cats سمة `alt` مع القيمة `Five cats looking around a field.`
+
+```js
+const catsImg = document.querySelectorAll('figure > img')[1];
+assert(
+  catsImg
+    .getAttribute('alt')
+    .replace(/\s+/g, ' ')
+    .match(/^Five cats looking around a field\.?$/i)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+--fcc-editable-region--
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg">
+--fcc-editable-region--
+        </figure>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
new file mode 100644
index 00000000000..c773b2c32a6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efae16e3cbd2bbdab94e334.md
@@ -0,0 +1,123 @@
+---
+id: 5efae16e3cbd2bbdab94e334
+title: الخطوة 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+بعد آخر عنصر `img` ، أضف عنصر `figcaption` مع النص `Cats hate other cats.`
+
+# --hints--
+
+يجب أن يحتوي العنصر `figcaption` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelectorAll('figcaption').length === 2);
+```
+
+يجب أن يحتوي العنصر `figcaption` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/figcaption\>/g).length === 2);
+```
+
+يجب أن يكون هناك عنصر `figure` أعلى closing tag عنصر `section` الثاني.
+
+```js
+assert($('main > section')[1].lastElementChild.nodeName === 'FIGURE');
+```
+
+عنصر `img` الاخير يجب أن يدمج في عنصر `figure`.
+
+```js
+const catsImg = document.querySelectorAll('figure > img')[1];
+assert(
+  catsImg &&
+    catsImg.getAttribute('src').toLowerCase() === 'https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg'
+);
+```
+
+يجب أن يحتوي العنصر `figure` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelectorAll('figure').length === 2);
+```
+
+يجب أن يحتوي العنصر `figure` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/figure\>/g).length === 2);
+```
+
+عنصر `figcaption` يجب أن يدمج في عنصر `figure`.
+
+```js
+assert(document.querySelectorAll('figure > figcaption').length === 2);
+```
+
+يجب أن يكون عنصر `figcaption` المدمج في عنصر `figure` تحت عنصر `img`. لديك عنصر `img` وعنصر `figcaption` في ترتيب خاطئ.
+
+```js
+assert(
+  document.querySelectorAll('figcaption')[1].previousElementSibling.nodeName ===
+    'IMG'
+);
+```
+
+يجب أن يحتوي عنصر `figcaption` على النص `Cats hate other cats.` لقد حذفت كلمة أو لديك خطأ إملائي.
+
+```js
+assert(
+  document
+    .querySelectorAll('figcaption')[1]
+    .innerText.toLowerCase()
+    .match(/Cats hate other cats\.?$/i)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+--fcc-editable-region--
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+--fcc-editable-region--
+        </figure>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
new file mode 100644
index 00000000000..82013e9b7c3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb23e70dc218d6c85f89b1.md
@@ -0,0 +1,104 @@
+---
+id: 5efb23e70dc218d6c85f89b1
+title: الخطوة ٣٨
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+هناك العديد من أنواع المدخلات التي يمكنك إنشاؤها باستخدام السمة `type`. يمكنك بسهولة إنشاء حقل كلمة المرور، أو زر إعادة الضبط، أو السماح للمستخدمين بتحديد ملف من جهاز الكمبيوتر.
+
+قم بإنشاء input من نوع نص للحصول على إدخال نصي من المستخدم عن طريق إضافة السمة `type` مع القيمة `text` إلى عنصر `input`.
+
+# --hints--
+
+لقد قمت إما بحذف عنصر `input` الخاص بك أو أن بناء الجملة (syntax) غير صحيح. إذا كنت قد أضفت سمات، تأكد من أن قيمها محاطة بعلامات اقتباس.
+
+```js
+assert($('input').length);
+```
+
+يجب أن يحتوي `form` على عنصر `input` فقط. قم بإزالة أي عناصر HTML أو نصوص بين tags العنصر `form`.
+
+```js
+assert(
+  $('form')[0].children.length === 1 &&
+    $('form')[0].innerText.trim().length === 0
+);
+```
+
+عنصر `input` الخاص بك يجب أن يحتوي على سمة `type` بقيمة `text`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+assert($('input')[0].hasAttribute('type'));
+```
+
+عنصر `input` الخاص بك يجب أن يحتوي على سمة `type` بقيمة `text`. إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن قيم السمة يجب أن تكون محاطة بعلامات اقتباس.
+
+```js
+assert(
+  $('input')[0]
+    .getAttribute('type')
+    .replace(/\s+/g, ' ')
+    .match(/^text$/i)
+);
+```
+
+على الرغم من أنك قمت بتعيين عنصر `input` سمة `type` إلى `text`، يوصى بأن تحيط دائما قيمة السمة بعلامات اقتباس.
+
+```js
+assert(!/\<input\s+type\s*=\s*text/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <input>
+--fcc-editable-region--
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
new file mode 100644
index 00000000000..166ddf0e1ad
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efb2c990dc218d6c85f89b2.md
@@ -0,0 +1,101 @@
+---
+id: 5efb2c990dc218d6c85f89b2
+title: الخطوة 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+على الرغم من أنك أضفت الزر الخاص بك أسفل input النص، فإنها تظهر بجانب بعضها البعض على الصفحة. وذلك لأن عناصر `input` و `button` هي <dfn>inline elements</dfn> والتي لا تظهر على سطور جديدة.
+
+سوف يرسل الزر الذي أضفته النموذج (form) بشكل افتراضي. ومع ذلك، فإن الاعتماد على السلوك الافتراضي قد يسبب أرتباك. أضف السمة `type` مع القيمة `submit` إلى عنصر `button` لتوضيح أنه زر إرسال.
+
+# --hints--
+
+يجب أن يحتوي العنصر `button` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('button'));
+```
+
+يجب أن يحتوي العنصر `button` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/button\>/));
+```
+
+عنصر `button` الخاص بك لا يحتوي على سمة `type`. تحقق من أن هناك مسافة بعد اسم الـ opening tag.
+
+```js
+assert($('button')[0].hasAttribute('type'));
+```
+
+عنصر `button` الخاص بك يجب أن يحتوي على سمة `type` بقيمة `submit`. إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن قيم السمة يجب أن تكون محاطة بعلامات اقتباس.
+
+```js
+assert(
+  $('button')[0]
+    .getAttribute('type')
+    .match(/^submit$/i)
+);
+```
+
+على الرغم من أنك قمت بتعيين عنصر `button` سمة `type` إلى `submit`، يوصى بأن تحيط دائما قيمة السمة بعلامات اقتباس.
+
+```js
+assert(!/\<\s*button\s+type\s*=\s*submit/i.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+--fcc-editable-region--
+          <button>Submit</button>
+--fcc-editable-region--
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
new file mode 100644
index 00000000000..4c3df1173dc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc4f528d6a74d05e68af74.md
@@ -0,0 +1,136 @@
+---
+id: 5efc4f528d6a74d05e68af74
+title: الخطوة 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+هناك طريقة أخرى لربط نص عنصر `input` بالعنصر نفسه. يمكنك دمج النص ضمن عنصر `label` وإضافة سمة `for` بنفس القيمة كسمة `id` لعنصر `input`.
+
+قم بربط النص `Loving` مع مربع الاختيار (checkbox) من خلال إدخال فقط النص `Loving` في عنصر `label` ووضعه على الجانب الأيمن من مربع الاختيار لعنصر `input`.
+
+# --hints--
+
+يجب عليك التأكد من أن خانة الاختيار لا تزال موجودة.
+
+```js
+assert($('input[type="checkbox"]')[0]);
+```
+
+يجب أن يكون لمربع للاختيار الخاص بك سمة `id` مع القيمة `loving`.  توقعت عنصر بقيمة `--fcc-expected--`, لكن وجدت `--fcc-actual--`.
+
+```js
+assert.equal($('input[type="checkbox"]')[0].id, 'loving');
+```
+
+يجب ألا يكون النص `Loving` موجودا مباشرة علي يمين خانة الاختيار الخاصة بك. يجب تغليفه في عنصر `label`. تأكد من وجود مسافة بين العنصرين.
+
+```js
+const checkboxInputElem = $('input[type="checkbox"]')[0];
+assert(
+  !checkboxInputElem.nextSibling.nodeValue
+    .replace(/\s+/g, ' ')
+    .match(/ Loving/i)
+);
+```
+
+سوف تحتاج إلى إضافة عنصر `label` جديد ليتم فيه دمج النص `Loving`. تأكد من أن لديه علامة فتح وإغلاق.
+
+```js
+assert(
+  document.querySelectorAll('label').length === 3 &&
+    code.match(/<\/label\>/g).length === 3
+);
+```
+
+عنصر `label` الجديد يجب أن يكون مباشرة علي يمين خانة الاختيار الخاصة بك. تأكد من وجود مسافة بين العنصرين.
+
+```js
+const checkboxInputElem = $('input[type="checkbox"]')[0];
+assert(checkboxInputElem.nextElementSibling.nodeName === 'LABEL');
+```
+
+عنصر `label` الجديد لا يحتوي على سمة `for`. تحقق من أن هناك مسافة بعد اسم الـ opening tag.
+
+```js
+const labelElem = $('input[type="checkbox"]')[0].nextElementSibling;
+assert(labelElem.hasAttribute('for'));
+```
+
+عنصر `label` الخاص بك يجب أن يحتوي على سمة `for` بقيمة `loving`.  توقعت عنصر بقيمة `--fcc-expected--`, لكن وجدت `--fcc-actual--`.
+
+```js
+const labelElem = $('input[type="checkbox"]')[0].nextElementSibling;
+assert.equal(labelElem.getAttribute('for'), 'loving');
+```
+
+يجب أن يكون النص `Loving` مدمج داخل عنصر `label` الجديد. إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+const labelElem = document.querySelector('label[for="loving"]');
+assert(labelElem.textContent.replace(/\s/g, '').match(/Loving/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+--fcc-editable-region--
+            <input id="loving" type="checkbox"> Loving
+--fcc-editable-region--
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
new file mode 100644
index 00000000000..c2bab9277b3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc518e8d6a74d05e68af75.md
@@ -0,0 +1,98 @@
+---
+id: 5efc518e8d6a74d05e68af75
+title: الخطوة 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+أضف السمة `name` مع القيمة `personality` إلى خانة الاختيار لعنصر `input`.
+
+في حين أنك لن تلاحظ هذا في المتصفح، فإن القيام بذلك يجعل من الأسهل على الخادم (server) معالجة نموذج الويب الخاص بك، خاصة عندما تكون هناك خانات اختيار متعددة.
+
+# --hints--
+
+يجب عليك التأكد من أن خانة الاختيار لا تزال موجودة.
+
+```js
+assert($('input[type="checkbox"]')[0]);
+```
+
+عنصر `input` الخاص بك لا يحتوي على سمة `name`. تحقق من أن هناك مسافة بعد اسم الـ opening tag.
+
+```js
+assert($('input[type="checkbox"]')[0].hasAttribute('name'));
+```
+
+عنصر `input` للـ checkbox الخاص بك يجب أن يحتوي على سمة `name` بقيمة `personality`. إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن قيم السمة يجب أن تكون محاطة بعلامات اقتباس.
+
+```js
+assert(
+  $('input[type="checkbox"]')[0]
+    .getAttribute('name')
+    .match(/^personality$/)
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+--fcc-editable-region--
+            <input id="loving" type="checkbox"> <label for="loving">Loving</label>
+--fcc-editable-region--
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
new file mode 100644
index 00000000000..f5be4e60140
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc54138d6a74d05e68af76.md
@@ -0,0 +1,86 @@
+---
+id: 5efc54138d6a74d05e68af76
+title: الخطوة 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+أضف خاصية `id` مع القيمة `loving` إلى مدخلات مربع الاختيار (checkbox input).
+
+# --hints--
+
+يجب أن يحتوي مربع الاختيار الخاص بك على السمة `id`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+assert($('input[type="checkbox"]')[0].hasAttribute('id'));
+```
+
+يجب أن يكون لمربع للاختيار الخاص بك سمة `id` مع القيمة `loving`. إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن قيم السمة يجب أن تكون محاطة بعلامات اقتباس.
+
+```js
+assert($('input[type="checkbox"]')[0].id.match(/^loving$/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+--fcc-editable-region--
+            <input type="checkbox"> Loving
+--fcc-editable-region--
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
new file mode 100644
index 00000000000..c259edc6e59
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5efc575c8d6a74d05e68af77.md
@@ -0,0 +1,124 @@
+---
+id: 5efc575c8d6a74d05e68af77
+title: الخطوة 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+أضف مربع اختيار (checkbox) نهائي بعد المربع السابق مع سمة `id` بقيمة `energetic`. يجب أن تكون السمة `name` نفس خانة الاختيار السابقة.
+
+أضف أيضًا عنصر `label` إلى يمين مربع الاختيار الجديد مع النص `Energetic`. تأكد من ربط عنصر `label` مع مربع الاختيار الجديد.
+
+# --hints--
+
+تحتاج إلى إضافة مربع اختيار جديد.
+
+```js
+assert($('input[type="checkbox"]').length === 3);
+```
+
+يجب أن يكون لمربع الاختيار الجديد سمة `id` بالقيمة `energetic` و سمة `name` بالقيمة `personality`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+const checkboxes = [...$('input[type="checkbox"]')];
+assert(
+  checkboxes.some(
+    (checkbox) =>
+      checkbox.id === 'energetic' &&
+      checkbox.getAttribute('name') === 'personality'
+  )
+);
+```
+
+يجب أن يكون مربع الاختيار الجديد الخاص بك بعد المربع الثاني. لقد وضعتهم بترتيب خاطئ.
+
+```js
+const checkboxes = [...$('input[type="checkbox"]')].map(
+  (checkbox) => checkbox.id
+);
+assert(checkboxes.indexOf('lazy') < checkboxes.indexOf('energetic'));
+```
+
+على الجانب الأيمن من مربع الاختيار الجديد الخاص بك، يجب أن يكون عنصر `label` مع النص `Energetic`.
+
+```js
+const nextElementSibling = $('input[type="checkbox"]')[2].nextElementSibling;
+assert(
+  nextElementSibling.nodeName === 'LABEL' &&
+    nextElementSibling.innerText.replace(/\s+/g, '').match(/^Energetic$/i)
+);
+```
+
+يجب أن يحتوي `label` الجديد على سمة `for` بنفس القيمة كسمة `id` لخانة الاختيار الجديدة. إما أنك حذفت القيمة أو لديك خطأ إملائي.
+
+```js
+assert(
+  $('input[type="checkbox"]')[2].nextElementSibling.getAttribute('for') ===
+    'energetic'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+--fcc-editable-region--
+            <input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
+            <input id="lazy" type="checkbox" name="personality"> <label for="lazy">Lazy</label>
+--fcc-editable-region--
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
new file mode 100644
index 00000000000..f5d1e146161
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f05a1d8e233dff4a68508d8.md
@@ -0,0 +1,136 @@
+---
+id: 5f05a1d8e233dff4a68508d8
+title: الخطوة 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+إنشاء زر راديو آخر أسفل زر الراديو الأول. أدخله داخل عنصر `label` مع `Outdoor` كنص للعنصر `label`. اعطي زر بسمة radio سمة `id` بقيمة `outdoor`.
+
+# --hints--
+
+يجب أن يحتوي زر الراديو `input` الأصلي فقط, بداخله نص `Indoor`, على `id` بقيمة `indoor`. يمكنك استخدام زر إعادة تعيين الخطوة للحصول على HTML الأصلي إذا لزم الأمر.
+
+```js
+assert(document.querySelectorAll('#indoor').length < 2);
+```
+
+لا يجب عليك إجراء أي تغييرات على زر الراديو `Indoor`. يمكنك استخدام زر إعادة تعيين الخطوة للحصول على HTML الأصلي إذا لزم الأمر.
+
+```js
+const indoorInput = document.querySelectorAll('#indoor');
+assert(
+  indoorInput.length == 1 &&
+  indoorInput[0]?.nodeName?.toUpperCase() === 'INPUT' &&
+  indoorInput[0]?.type === 'radio' &&
+  code.match(/<label\s*>\s*<input [^>]*(id=["']?indoor["']?)[^>]*>\s*Indoor\s*<\/label>/)
+);
+```
+
+يجب عليك أن تضيف عنصر `input` واحد جديد في عنصر `label` الجديد. تحقق من أن علامة `label` تحتوي على علامة أفتاح (opening tag) وإغلاق (closing tag) على حد سواء.
+
+```js
+assert(document.querySelectorAll('label input').length === 2);
+```
+
+لا يجب عليك إضافة أي سمات لعلامة أفتاح (opening tag) في `label`.
+
+```js
+assert(code.match(/<label\s*>/g).length === 2);
+```
+
+يجب أن يحتوي `input` على سمة `id` بقيمة `outdoor`.
+
+```js
+assert(document.querySelector('label input[id="outdoor"]'));
+```
+
+يجب أن يحتوي عنصرك `input` على سمة `type` بقيمة `radio`.
+
+```js
+assert(document.querySelector('label input[id="outdoor"][type="radio"]'));
+```
+
+لا يجب عليك إضافة أي عناصر جديدة غير `input` داخل `label`.
+
+```js
+assert(document.querySelector('label input[id="outdoor"]:only-child'));
+```
+
+يجب ألا يكون هناك نص في يسار من `input` الجديد.
+
+```js
+const outdoorBtn = document.querySelector('label input[id="outdoor"]');
+assert(
+    outdoorBtn?.previousSibling?.nodeName !== '#text' ||
+    outdoorBtn?.previousSibling?.nodeValue?.replace(/\s/g, '') === ''
+);
+```
+
+يجب أن يطابق نص عنصر label في زر radio الجديد `Outdoor`. ويشمل ذلك التشكيل (capitalization).
+
+```js
+assert(document.querySelector('label > input[id="outdoor"]')?.nextSibling?.nodeValue?.replace(/^\s+|\s+$/g, '') === 'Outdoor');
+```
+
+يجب أن تكون عناصر زر radio الجديد و label أسفل مباشرة/بعد عناصر زر radio و label من `Indoor`. وينبغي ألا تكون هناك علامات أخرى بينهما.
+
+```js
+assert(code.match(/<\/label>\s*<label\s*>\s*<input [^>]+>\s*Outdoor/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <label><input id="indoor" type="radio"> Indoor</label>
+--fcc-editable-region--
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
new file mode 100644
index 00000000000..5fafd5a9ce0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
@@ -0,0 +1,71 @@
+---
+id: 5f07be6ef7412fbad0c5626b
+title: الخطوة 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+قبل إضافة أي محتوى جديد، يجب عليك استخدام عنصر `section` لفصل محتوى صور القط عن المحتوى المستقبلي.
+
+خذ عنصر `h2` و التعليق و عنصر `p` و عنصر الرابط (`a`) وأدخلهم في عنصر `section`.
+
+# --hints--
+
+يجب أن يحتوي العنصر `section` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('section'));
+```
+
+يجب أن يحتوي العنصر `section` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/section\>/));
+```
+
+يجب أن يكون عنصر `section` بأكمله بين علامات فتح وإغلاق عنصر `main`.
+
+```js
+assert(document.querySelector('section').parentNode.nodeName === 'MAIN');
+```
+
+عنصر `h2` الموجود و التعليق و عنصر `p` و عنصر الرابط (`a`) ينبغي ان يكونوا بين العلامتين الافتتاحية والإغلاقية لعنصر `section`.
+
+```js
+const childrenOfSection = [...document.querySelector('section').childNodes];
+const foundElements = childrenOfSection.filter((child) => {
+  return ['H2', 'A', 'P'].includes(child.nodeName);
+});
+assert(foundElements.length === 3);
+```
+
+يجب ألّا يكون عنصر `h1` داخل عنصر `section`.
+
+```js
+const childrenOfSection = [...document.querySelector('section').childNodes];
+const includesH1 = childrenOfSection.some((child) => child.nodeName === 'H1');
+assert.isFalse(includesH1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    --fcc-editable-region--
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+      <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+      <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+    </main>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
new file mode 100644
index 00000000000..30adffac6c9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07c98cdb9413cbd4b16750.md
@@ -0,0 +1,81 @@
+---
+id: 5f07c98cdb9413cbd4b16750
+title: الخطوة 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+وقد حان الوقت لإضافة قسم (section) جديد. أضف عنصر `section` الثاني أدني عنصر `section` الحالي.
+
+# --hints--
+
+يجب أن يحتوي العنصر `section` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelectorAll('section').length >= 2);
+```
+
+يجب عليك إضافة opening tag واحد فقط للـ `section`. الرجاء إزالة أي زيادات.
+
+```js
+assert(document.querySelectorAll('section').length === 2);
+```
+
+يجب أن يحتوي العنصر `section` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/section>/g).length >= 2);
+```
+
+يجب عليك إضافة closing tag واحد فقط للـ `section`. الرجاء إزالة أي زيادات.
+
+```js
+assert(code.match(/<\/section>/g).length === 2);
+```
+
+عنصر `section` الثاني يجب أن لا يكون مدمج في عنصر `section` الأول.
+
+```js
+const childrenOf1stSection = [
+  ...document.querySelector('main > section').children
+];
+const foundElems = childrenOf1stSection.filter((child) => {
+  return child.nodeName === 'SECTION';
+});
+assert(foundElems.length === 0);
+```
+
+يجب أن يكون العنصران `section` بين العلامتين الافتتاحية والإغلاقية لعنصر `main`.
+
+```js
+const childrenOfMain = [...document.querySelector('main').children];
+const foundElems = childrenOfMain.filter((child) => {
+  return child.nodeName === 'SECTION';
+});
+assert(foundElems.length === 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+--fcc-editable-region--
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
new file mode 100644
index 00000000000..10ad14278dc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07fb1579dc934717801375.md
@@ -0,0 +1,98 @@
+---
+id: 5f07fb1579dc934717801375
+title: الخطوة 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+وقد حان الوقت لإضافة قسم (section) جديد. أضف عنصر `section` ثالث أدني عنصر `section` الثاني.
+
+# --hints--
+
+يجب أن يحتوي العنصر `section` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelectorAll('section').length >= 3);
+```
+
+يجب عليك إضافة opening tag واحد فقط للـ `section`. الرجاء إزالة أي زيادات.
+
+```js
+assert(document.querySelectorAll('section').length === 3);
+```
+
+يجب أن يحتوي العنصر `section` على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/section>/g).length >= 3);
+```
+
+يجب عليك إضافة closing tag واحد فقط للـ `section`. الرجاء إزالة أي زيادات.
+
+```js
+assert(code.match(/<\/section>/g).length === 3);
+```
+
+يجب أن تكون جميع عناصر `section` بين العلامات الافتتاحية و الإغلاق لعنصر `main`.
+
+```js
+const childrenOfMain = [...document.querySelector('main').children];
+const sectionElemsFound = childrenOfMain.filter((child) => {
+  return child.nodeName === 'SECTION';
+});
+assert(sectionElemsFound.length === 3);
+```
+
+يجب أن لا يحتوي آخر عنصر `section` على محتوى. قم بإزالة أي عناصر HTML أو نص داخل عنصر `section`.
+
+```js
+assert($('main > section')[2].children.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+--fcc-editable-region--
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
new file mode 100644
index 00000000000..8aa2cf296d0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d48e7b435f13ab6550051.md
@@ -0,0 +1,105 @@
+---
+id: 5f0d48e7b435f13ab6550051
+title: الخطوة 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+عنصر `legend` يعمل كشرح للمحتوى في العنصر `fieldset`. وهو يعطي للمستخدمين السياق حول ما ينبغي أن يدخلوا في ذلك الجزء من النموذج.
+
+أضف عنصر `legend` مع النص `Is your cat an indoor or outdoor cat?` فوق زرين الراديو.
+
+# --hints--
+
+يجب أن يحتوي العنصر `legend` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelector('legend'));
+```
+
+يجب أن يحتوي عنصر `legend` الخاص بك على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/legend\>/));
+```
+
+يجب أن يكون عنصر `legend` الخاص بك أول عنصر أسفل opening tag عنصر `fieldset` وقبل opening tag الـ `label` لزر الراديو الأول. هو ليس في المكان الصحيح.
+
+```js
+const fieldsetElem = document.querySelector('fieldset');
+const fieldsetElemChildren = fieldsetElem.children;
+assert(
+  fieldsetElem.firstElementChild.nodeName === 'LEGEND' &&
+    fieldsetElemChildren[1].nodeName === 'LABEL' &&
+    fieldsetElemChildren[1].children[0].nodeName === 'INPUT' &&
+    fieldsetElemChildren[1].children[0].id === 'indoor'
+);
+```
+
+يجب أن يكون نص العنصر `legend` الخاص بك `Is your cat an indoor or outdoor cat?`. إما أن تكون قد حذفت النص، أو لديك خطأ إملائي، أو أنه ليس بين علامتي فتح وإغلاق العنصر `legend`.
+
+```js
+const extraSpacesRemoved = document
+  .querySelector('legend')
+  .innerText.replace(/\s+/g, ' ');
+assert(extraSpacesRemoved.match(/Is your cat an indoor or outdoor cat\??$/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <fieldset>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+--fcc-editable-region--
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
new file mode 100644
index 00000000000..0d6f4a4707c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4ab1b435f13ab6550052.md
@@ -0,0 +1,128 @@
+---
+id: 5f0d4ab1b435f13ab6550052
+title: الخطوة 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+الآن، ستضيف بعض عناصر `input` الجديدة للـ form ، لذلك أضف عنصر `fieldset` آخر تحت عنصر `fieldset` مباشرة.
+
+# --hints--
+
+يجب أن يحتوي العنصر `fieldset` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+assert(document.querySelectorAll('fieldset').length >= 2);
+```
+
+يجب عليك إضافة opening tag واحد فقط للـ `fieldset`. الرجاء إزالة أي زيادات.
+
+```js
+assert(document.querySelectorAll('fieldset').length === 2);
+```
+
+يجب أن يحتوي العنصر `fieldset` الجديد على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/fieldset>/g).length >= 2);
+```
+
+يجب عليك إضافة closing tag واحد فقط للـ `fieldset`. الرجاء إزالة أي زيادات.
+
+```js
+assert(code.match(/<\/fieldset>/g).length === 2);
+```
+
+عنصر `fieldset` الثاني يجب أن لا يكون مدمج في عنصر `fieldset` الأول.
+
+```js
+const childrenOf1stFieldset = [
+  ...document.querySelector('form > fieldset').children
+];
+const foundElems = childrenOf1stFieldset.filter((child) => {
+  return child.nodeName === 'FIELDSET';
+});
+assert(foundElems.length === 0);
+```
+
+يجب أن تكون عناصر `fieldset` فوق عنصر fieldset للنص. هم بترتيب خاطئ.
+
+```js
+const formChildren = $('form')[0].children;
+assert(
+  formChildren[0].nodeName === 'FIELDSET' &&
+    formChildren[1].nodeName === 'FIELDSET' &&
+    formChildren[2] &&
+    formChildren[2].nodeName === 'INPUT' &&
+    formChildren[2].getAttribute('type') === 'text'
+);
+```
+
+يجب أن يكون عنصر `fieldset` الجديد الخاص بك تحت عنصر `fieldset` الموجود. لقد وضعتهم بترتيب خاطئ.
+
+```js
+const fieldsetChildren = [...document.querySelectorAll('fieldset')].map(
+  (elem) => elem.children
+);
+assert(fieldsetChildren[0].length > fieldsetChildren[1].length);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+--fcc-editable-region--
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
new file mode 100644
index 00000000000..f446378e7c1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f0d4d04b435f13ab6550053.md
@@ -0,0 +1,114 @@
+---
+id: 5f0d4d04b435f13ab6550053
+title: الخطوة 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+قم بإضافة عنصر `legend` مع النص `What's your cat's personality?` داخل عنصر `fieldset` الثاني.
+
+# --hints--
+
+لقد قمت إما بحذف العنصر `fieldset` الثاني أو انه يفتقر وجود علامة فتح أو علامة إغلاق.
+
+```js
+assert(
+  document.querySelectorAll('fieldset').length === 2 &&
+    code.match(/<\/fieldset>/g).length === 2
+);
+```
+
+يجب أن يحتوي العنصر `legend` على opening tag. Opening tags تكتب هكذا: `<elementName>`.
+
+```js
+const secondFieldset = $('fieldset')[1];
+assert(
+  secondFieldset &&
+    [...secondFieldset.children].filter((child) => child.nodeName === 'LEGEND')
+      .length
+);
+```
+
+يجب أن يحتوي عنصر `legend` الخاص بك على closing tag. Closing tags لها `/` مباشرة بعد رمز `<`.
+
+```js
+assert(code.match(/<\/legend\>/g).length === 2);
+```
+
+يجب أن يحتوي عنصر `legend` على النص `What's your cat's personality?`. إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+const secondFieldset = $('fieldset')[1];
+assert(
+  secondFieldset &&
+    [...secondFieldset.children].filter((child) => {
+      const extraSpacesRemoved = child.innerText.replace(/\s+/g, ' ');
+      return (
+        child.nodeName === 'LEGEND' &&
+        extraSpacesRemoved.match(/What's your cat's personality\??$/i)
+      );
+    }).length
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+--fcc-editable-region--
+          <fieldset>
+          </fieldset>
+--fcc-editable-region--
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
new file mode 100644
index 00000000000..c1143257512
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a80975fc4bcae0edb3497.md
@@ -0,0 +1,108 @@
+---
+id: 5f1a80975fc4bcae0edb3497
+title: الخطوة 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+إذا قمت بتحديد زر الراديو `Indoor` وإرسلت النموذج، بيانات النموذج الخاصة بالزر مبنية على سمات `name` و `value`. نظرًا لأن أزرار الراديو الخاصة بك لا تحتوي على سمة `value`، ستتضمن بيانات النموذج `indoor-outdoor=on`، وهو غير مفيد عندما يكون لديك أزرار متعددة.
+
+أضف سمة `value` إلى زرين الراديو. لتسهيل الأمر ، قم بتعيين سمة `value` لنفس قيمة السمة `id` الخاصة بها.
+
+# --hints--
+
+يجب أن يظل كل من أزرار الراديو موجودًا بين opening و closing tags عنصر `label`.
+
+```js
+const labelChildNodes = [...document.querySelectorAll('form > label')].map(
+  (node) => node.childNodes
+);
+assert(
+  labelChildNodes.filter((childNode) => childNode[0].nodeName === 'INPUT')
+    .length === 2
+);
+```
+
+يجب أن يكون لكل من أزرار (الراديو) radio السمة `value`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+const radioButtons = [...document.querySelectorAll('input[type="radio"]')];
+assert(radioButtons.every((btn) => btn.hasAttribute('value')));
+```
+
+يجب أحتواء كل من أزرار (الراديو) radio السمة `type`. تحقق من وجود مسافة بعد اسم opening tag و/أو أن هناك مسافات قبل جميع أسماء السمات.
+
+```js
+const radioButtons = [...document.querySelectorAll('input')];
+assert(radioButtons.every((btn) => btn.hasAttribute('type')));
+```
+
+يجب تعيين سمة `value` الخاصة بزر راديو `Indoor` إلى `indoor`. إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن قيم السمة يجب أن تكون محاطة بعلامات اقتباس.
+
+```js
+const indoorRadioButton = document.querySelector('#indoor');
+assert(indoorRadioButton.getAttribute('value').match(/^indoor$/));
+```
+
+يجب تعيين سمة `value` الخاصة بزر راديو `Outdoor` إلى `outdoor`. إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن قيم السمة يجب أن تكون محاطة بعلامات اقتباس.
+
+```js
+const outdoorRadioButton = document.querySelector('#outdoor');
+assert(outdoorRadioButton.getAttribute('value').match(/^outdoor$/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <label><input id="indoor" type="radio" name="indoor-outdoor"> Indoor</label>
+          <label><input id="outdoor" type="radio" name="indoor-outdoor"> Outdoor</label>
+--fcc-editable-region--
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
new file mode 100644
index 00000000000..b8b7f8b362b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f1a89f1190aff21ae42105a.md
@@ -0,0 +1,106 @@
+---
+id: 5f1a89f1190aff21ae42105a
+title: الخطوة 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+مثل أزرار الراديو، بيانات نموذج مربعات الاختيار المحددة هي أزواج السمة `name` / `value`. في حين أن السمة `value` اختيارية، فإنه من الأفضل تضمينها مع أي خانات اختيار أو أزرار راديو على الصفحة.
+
+قم بإضافة سمة `value` إلى كل مربع اختيار. لتسهيل الأمر ، قم بتعيين سمة `value` لكل خانة اختيار لنفس قيمة السمة `id` الخاصة بها.
+
+# --hints--
+
+يجب أن تحتوي خانات الاختيار الثلاثة جميعها على السمة `value`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+const checkboxes = [...document.querySelectorAll('input[type="checkbox"]')];
+assert(checkboxes.every((checkbox) => checkbox.hasAttribute('value')));
+```
+
+يجب تعيين سمة `value` لمربع الاختيار `Loving` إلى `loving`. إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن قيم السمة يجب أن تكون محاطة بعلامات اقتباس.
+
+```js
+const lovingCheckbox = document.querySelector('#loving');
+assert(lovingCheckbox.getAttribute('value').match(/^loving$/));
+```
+
+يجب تعيين سمة `value` لمربع الاختيار `Lazy` إلى `lazy`. إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن قيم السمة يجب أن تكون محاطة بعلامات اقتباس.
+
+```js
+const lazyCheckbox = document.querySelector('#lazy');
+assert(lazyCheckbox.getAttribute('value').match(/^lazy$/));
+```
+
+يجب تعيين سمة `value` لمربع الاختيار `Energetic` إلى `energetic`. إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن قيم السمة يجب أن تكون محاطة بعلامات اقتباس.
+
+```js
+const energeticCheckbox = document.querySelector('#energetic');
+assert(energeticCheckbox.getAttribute('value').match(/^energetic$/));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor"> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+            <input id="loving" type="checkbox" name="personality"> <label for="loving">Loving</label>
+            <input id="lazy" type="checkbox" name="personality"> <label for="lazy">Lazy</label>
+            <input id="energetic" type="checkbox" name="personality"> <label for="energetic"> Energetic</label>
+          </fieldset>
+--fcc-editable-region--
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
new file mode 100644
index 00000000000..0315d97f628
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62bb4009e3458a128ff57d5d.md
@@ -0,0 +1,166 @@
+---
+id: 62bb4009e3458a128ff57d5d
+title: الخطوة 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+شيء واحد آخر. يجب أن تسمح للناس باستخدام لغتهم الأم. أخبر المتصفح بتشفير لغات متعددة عن طريق إضافة عنصر `meta` كأحد عناصر `head`. عيّن سمة `charset` إلى `UTF-8`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `meta` داخل عنصر `head`.
+
+```js
+assert.exists(document.querySelector('head > meta'));
+```
+
+يجب عليك إعطاء وسم `meta` الـ `charset` بقيمة `UTF-8`.
+
+```js
+assert.equal(document.querySelector('head > meta')?.getAttribute('charset')?.toLowerCase(), 'utf-8');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <title>CatPhotoApp</title>
+  </head>
+--fcc-editable-region--
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+            <input id="loving" type="checkbox" name="personality" value="loving" checked> <label for="loving">Loving</label>
+            <input id="lazy" type="checkbox" name="personality" value="lazy"> <label for="lazy">Lazy</label>
+            <input id="energetic" type="checkbox" name="personality" value="energetic"> <label for="energetic">Energetic</label>
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+    <footer>
+      <p>
+        No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
+      </p>
+    </footer>
+  </body>
+</html>
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>CatPhotoApp</title>
+  </head>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+          <fieldset>
+            <legend>Is your cat an indoor or outdoor cat?</legend>
+            <label><input id="indoor" type="radio" name="indoor-outdoor" value="indoor" checked> Indoor</label>
+            <label><input id="outdoor" type="radio" name="indoor-outdoor" value="outdoor"> Outdoor</label>
+          </fieldset>
+          <fieldset>
+            <legend>What's your cat's personality?</legend>
+            <label for="loving"><input id="loving" type="checkbox" name="personality" value="loving" checked> Loving</label>
+            <label for="lazy"><input id="lazy" type="checkbox" name="personality" value="lazy"> Lazy</label>
+            <label for="energetic"><input id="energetic" type="checkbox" name="personality" value="energetic"> Energetic</label>
+          </fieldset>
+          <input type="text" name="catphotourl" placeholder="cat photo URL" required>
+          <button type="submit">Submit</button>
+        </form>
+      </section>
+    </main>
+    <footer>
+      <p>
+        No Copyright - <a href="https://www.freecodecamp.org">freeCodeCamp.org</a>
+      </p>
+    </footer>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md
new file mode 100644
index 00000000000..f406df6c95a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/62dabe2ef403a12d5d295273.md
@@ -0,0 +1,84 @@
+---
+id: 62dabe2ef403a12d5d295273
+title: الخطوة 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+الآن بعد تغيرك نص `cat photos` داخل عنصر `p` إلى رابط، لا تحتاج إلى الرابط الثاني أسفل عنصر `p`. حذف عنصر الرابط (anchor) بِرُمَّته أسفل عنصر `p`.
+
+# --hints--
+
+يجب أن يحتوي كودك فقط على عنصر رابط واحد (`a`).
+
+```js
+assert(document.querySelectorAll('a').length === 1);
+```
+
+يجب أن يظل داخل عنصر `p` على عنصر الرابط (`a`) داخله.
+
+```js
+assert($('p > a').length);
+```
+
+يجب أن يكون سمة الرابط `href` بقيمة `https://freecatphotoapp.com`. إما أنك حذفت قيمة `href` أو لديك خطأ إملائي.
+
+```js
+const nestedAnchor = $('p > a')[0];
+assert(
+  nestedAnchor.getAttribute('href') === 'https://freecatphotoapp.com'
+);
+```
+
+يجب أن يكون نص الرابط `cat photos`. إما أنك حذفت النص أو لديك خطأ إملائي.
+
+```js
+const nestedAnchor = $('p > a')[0];
+assert(
+  nestedAnchor.innerText.toLowerCase().replace(/\s+/g, ' ') === 'cat photos'
+);
+```
+
+يجب أن يكون محتوى عنصر `p` المرئي في المتصفح `Click here to view more cat photos.` تحقق مرتين من النص أو المسافات أو علامات الترقيم لكل من `p` وعنصر الرابط المدمج.
+
+```js
+const pText = document
+  .querySelector('p')
+  .innerText.toLowerCase()
+  .replace(/\s+/g, ' ');
+assert(pText.match(/click here to view more cat photos\.?$/));
+```
+
+لا ينبغي أن يكون هناك `cat photos` نص تحت عنصر `p`.
+
+```js
+const pNextSibling = document.querySelector('p').nextSibling;
+assert(
+  pNextSibling.nodeName === '#text' && !/cat\s*photos/.test(pNextSibling.nodeValue) ||
+  pNextSibling.nodeName === 'IMG'
+);
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <h2>Cat Photos</h2>
+      <!-- TODO: Add link to cat photos -->
+--fcc-editable-region--
+      <p>Click here to view more <a href="https://freecatphotoapp.com">cat photos</a>.</p>
+      <a href="https://freecatphotoapp.com">link to cat pictures</a>
+--fcc-editable-region--
+      <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back.">
+    </main>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
new file mode 100644
index 00000000000..5dbb7fe67f5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/7cf9b03d81a65668421804c3.md
@@ -0,0 +1,103 @@
+---
+id: 7cf9b03d81a65668421804c3
+title: الخطوة 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+من أجل الوصول إلى بيانات النموذج عن طريق الموقع المحدد في سمة `action` ، يجب أن تعطي حقل النص سمة `name` وأن تعيينه قيمة لتمثيل البيانات التي تم إرسالها. على سبيل المثال، يمكنك استخدام الجملة التالية لحقل نص عنوان البريد الإلكتروني: `<input type="text" name="email">`.
+
+أضف السمة `name` مع القيمة `catphotourl` إلى حقل النص الخاص بك.
+
+# --hints--
+
+لقد قمت إما بحذف عنصر `input` الخاص بك أو أن بناء الجملة (syntax) غير صحيح. يجب أن تكون جميع قيم السمات محاطة بعلامات اقتباس.
+
+```js
+assert($('input').length);
+```
+
+يجب أن يحتوي `form` على عنصر `input` فقط. إزالة أي عناصر HTML إضافية أو نص داخل عنصر `form`.
+
+```js
+assert(
+  $('form')[0].children.length === 1 &&
+    $('form')[0].innerText.trim().length === 0
+);
+```
+
+عنصر `input` الخاص بك لا يحتوي على سمة `name`. تحقق من وجود مسافة بعد اسم الـ opening tag و/أو ان هناك مسافات قبل جميع أسماء السمات.
+
+```js
+assert($('input')[0].hasAttribute('name'));
+```
+
+عنصر `input` الخاص بك يجب أن يحتوي على سمة `name` بقيمة `catphotourl`.  إما أنك حذفت القيمة أو لديك خطأ إملائي. تذكر أن قيم السمة يجب أن تكون محاطة بعلامات اقتباس.
+
+```js
+assert(
+  $('input')[0]
+    .getAttribute('name')
+    .match(/^catphotourl$/i)
+);
+```
+
+على الرغم من أنك قمت بتعيين عنصر `input` سمة `name` إلى `catphotourl`، يوصى بأن تحيط دائما بقيمة السمة بعلامات اقتباس.
+
+```js
+assert(!/\<\s*input\s+.*\s*=\s*catphotourl/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<html>
+  <body>
+    <main>
+      <h1>CatPhotoApp</h1>
+      <section>
+        <h2>Cat Photos</h2>
+        <!-- TODO: Add link to cat photos -->
+        <p>Click here to view more <a target="_blank" href="https://freecatphotoapp.com">cat photos</a>.</p>
+        <a href="https://freecatphotoapp.com"><img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
+      </section>
+      <section>
+        <h2>Cat Lists</h2>
+        <h3>Things cats love:</h3>
+        <ul>
+          <li>cat nip</li>
+          <li>laser pointers</li>
+          <li>lasagna</li>
+        </ul>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/lasagna.jpg" alt="A slice of lasagna on a plate.">
+          <figcaption>Cats <em>love</em> lasagna.</figcaption>  
+        </figure>
+        <h3>Top 3 things cats hate:</h3>
+        <ol>
+          <li>flea treatment</li>
+          <li>thunder</li>
+          <li>other cats</li>
+        </ol>
+        <figure>
+          <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/cats.jpg" alt="Five cats looking around a field.">
+          <figcaption>Cats <strong>hate</strong> other cats.</figcaption>  
+        </figure>
+      </section>
+      <section>
+        <h2>Cat Form</h2>
+        <form action="https://freecatphotoapp.com/submit-cat-photo">
+--fcc-editable-region--
+          <input type="text">
+--fcc-editable-region--
+        </form>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md
new file mode 100644
index 00000000000..9be9d8fbdd5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60eebd07ea685b0e777b5583.md
@@ -0,0 +1,52 @@
+---
+id: 60eebd07ea685b0e777b5583
+title: الخطوة الأولى
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+مرحبا بكم في مشروع نموذج التسجيل! ابدأ بإضافة تعريف `!DOCTYPE html` في الجزء العلوي من المستند حتى يعرف المتصفح نوع المستند الذي يقرأه.
+
+# --hints--
+
+يجب أن يحتوي الكود الخاص بك على `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE/gi));
+```
+
+يجب عليك تضمين مسافة بعد `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+/gi));
+```
+
+يجب عليك تحديد نوع المستند ليكون `html`.
+
+```js
+assert(code.match(/html/gi));
+```
+
+يجب عليك إغلاق تعريف `DOCTYPE` مع `>` بعد الـ type.
+
+```js
+assert(code.match(/html\s*>/gi));
+```
+
+يجب أن يكون تعريف `DOCTYPE` في بداية HTML الخاص بك.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md
new file mode 100644
index 00000000000..e480782c799
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027099a15b00485563dd2.md
@@ -0,0 +1,54 @@
+---
+id: 60f027099a15b00485563dd2
+title: الخطوة الثانية
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+أسفل `DOCTYPE`، أضف عنصر `html` مع سمة `lang` بقيمة `en`، حتى يكون لديك مكان لبدء وضع بعض كود.
+
+# --hints--
+
+يجب أن يكون تعريف `DOCTYPE` في بداية HTML الخاص بك.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
+```
+
+يجب أن يحتوي عنصرك `html` على علامة افتتاحية (opening tag) مع خاصية `lang` من `en`.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+يجب أن يحتوي عنصر `html` الخاص بك على closing tag.
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+يجب أن تكون tags الـ `html` في الترتيب الصحيح.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>\s*<\/html\s*>/));
+```
+
+يجب أن يكون لديك عنصر `html` واحد فقط.
+
+```js
+// Possibly a redundant test, as browser fixes this
+assert(document.querySelectorAll('html').length === 1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md
new file mode 100644
index 00000000000..963333a1a1e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f027c87bc98f050395c139.md
@@ -0,0 +1,67 @@
+---
+id: 60f027c87bc98f050395c139
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+بعد ذلك، قم بإضافة علامات فتح وإغلاق `head` و `body` داخل عنصر `html`.
+
+# --hints--
+
+يجب أن يكون لديك الـ opening tag للـ `head`.
+
+```js
+assert(code.match(/<head\s*>/i));
+```
+
+يجب أن يكون لديك الـ closing tag للـ `head`.
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+يجب أن يكون لديك الـ opening tag للـ `body`.
+
+```js
+assert(code.match(/<body\s*>/i));
+```
+
+يجب أن يكون لديك الـ closing tag للـ `body`.
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+عناصر `head` و `body` يجب أن يكونا أشقاء (siblings).
+
+```js
+assert(document.querySelector('head')?.nextElementSibling.localName === 'body');
+```
+
+عنصر `head` يجب أن يكون داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
+```
+
+عنصر `body` يجب أن يكون داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+
+</html>
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md
new file mode 100644
index 00000000000..f755ac5a8b6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f0286404aefb0562a4fdf9.md
@@ -0,0 +1,56 @@
+---
+id: 60f0286404aefb0562a4fdf9
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+أضف عنصر `title` وعنصر `meta` جديد داخل عنصر `head`. أعطِ مشروعك عنوانًا `Registration Form`، وأعط `charset` سمة بقيمة `UTF-8` لعنصرك `meta`.
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على عنصر `title`.
+
+```js
+const title = document.querySelector('title');
+assert.exists(title);
+```
+
+عنصر `title` يجب أن يكون داخل عنصر `head`.
+
+```js
+assert.exists(document.querySelector('head > title'));
+```
+
+يجب أن يحتوي مشروعك على عنوان `Registration Form`.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title.text.toLowerCase(), 'registration form')
+```
+
+تذكر أن الـ casing، اي حالة الحرف سواء كبير او صغير (capital or small) والإملاء مهمان للعنوان.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title.text, 'Registration Form');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  --fcc-editable-region--
+  <head>
+
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md
new file mode 100644
index 00000000000..c524e1fbec9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f02e7361b68405e27b62a5.md
@@ -0,0 +1,44 @@
+---
+id: 60f02e7361b68405e27b62a5
+title: الخطوة 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+ضمن `body` ، قم بتوفير سياق عنوان للمحتوى، عن طريق إضافة `h1` بالنص `Registration Form`.
+
+# --hints--
+
+يجب عليك إضافة `h1` داخل `body`.
+
+```js
+assert.exists(document.querySelector('body > h1'));
+```
+
+يجب عليك إعطاء `h1` النص `Registration Form`.
+
+```js
+assert.equal(document.querySelector('body > h1')?.textContent, 'Registration Form');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+--fcc-editable-region--
+  <body>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md
new file mode 100644
index 00000000000..6cfa1662729
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f030d388cb74067cf291c3.md
@@ -0,0 +1,55 @@
+---
+id: 60f030d388cb74067cf291c3
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+تحت العنوان (heading)، استخدم النص التالي ضمن عنصر paragraph لتشجيع المستخدمين على التسجيل:
+
+```md
+Please fill out this form with the required information
+```
+
+# --hints--
+
+يجب عليك إضافة عنصر `p` إلى `body`.
+
+```js
+assert.exists(document.querySelector('body > p'));
+```
+
+يجب عليك إضافة عنصر `p` أسفل `h1`.
+
+```js
+assert.exists(document.querySelector('h1 + p'));
+```
+
+يجب عليك إعطاء عنصر `p` نص `Please fill out this form with the required information`.
+
+```js
+assert.equal(document.querySelector('p')?.innerText, 'Please fill out this form with the required information');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+--fcc-editable-region--
+  <body>
+    <h1>Registration Form</h1>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md
new file mode 100644
index 00000000000..adb0395678b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md
@@ -0,0 +1,56 @@
+---
+id: 60f1922fcbd2410527b3bd89
+title: الخطوة 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+يكون `vh` وحدة ارتفاع نافذة العرض (viewport)، وتتناسب مع 1٪ من `height` نافذة العرض (viewport).
+
+لقد حان الوقت للبدء المشروع مع بعض CSS. ابدأ بإعطاء `body` خاصية `width` بقيمة `100%` و `height` بقيمة `100vh`.
+
+# --hints--
+
+يجب عليك استخدام منتقي العنصر `body`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+يجب عليك إعطاء `body` خاصية `width` بقيمة `100%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
+```
+
+يجب عليك إعطاء `body` خاصية `height` بقيمة `100vh`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md
new file mode 100644
index 00000000000..0e50d359cc3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a5e2d2c23707a4f9a660.md
@@ -0,0 +1,52 @@
+---
+id: 60f1a5e2d2c23707a4f9a660
+title: الخطوة 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+الآن ، تخلص من شريط التمرير الأفقي (horizontal scroll-bar) ، عن طريق تعيين الـ `margin` الافتراضي للـ `body` الذي تضيفه بعض المتصفحات، إلى `0`.
+
+# --hints--
+
+يجب عليك إضافة `margin` داخل منتقي العنصر `body`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.margin);
+```
+
+يجب أن تعطي `margin` قيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.margin, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  width: 100%;
+  height: 100vh;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md
new file mode 100644
index 00000000000..4b2881e9df0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1a9cbd23023082e149fee.md
@@ -0,0 +1,65 @@
+---
+id: 60f1a9cbd23023082e149fee
+title: الخطوة 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+هذا أفضل. الآن، اجعل الخلفية سهلة على العينين، بتغيير `background-color` للـ `body` إلى `#1b1b32`. ثم لمشاهدة النص، غيّر `color` إلى `#f5f6f7`.
+
+# --hints--
+
+يجب عليك إضافة `background-color` داخل منتقي العنصر `body`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor);
+```
+
+يجب عليك إعطاء `background-color` قيمة `#1b1b32`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor, 'rgb(27, 27, 50)');
+```
+
+يجب عليك إضافة `color` داخل منتقي العنصر `body`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.color);
+```
+
+يجب أن تعطي `color` القيمة `#f5f6f7`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.color, 'rgb(245, 246, 247)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
new file mode 100644
index 00000000000..0f052b2d74f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5c3e399ff1a05629964e4.md
@@ -0,0 +1,63 @@
+---
+id: 60f5c3e399ff1a05629964e4
+title: الخطوة 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+كما اقترح العنوان، فإنك تقوم بإنشاء نموذج (form). لذا، بعد عنصر `p` ، أدخل `form` مع سمة `action` تستهدف `https://register-demo.freecodecamp.org`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `form` مجاور لعنصر `p`.
+
+```js
+assert.exists(document.querySelector('p + form'));
+```
+
+يجب أن تعطي عنصر `form` سمة `action`.
+
+```js
+// Default action points to window location
+assert.notEqual(document.querySelector('form')?.action, window?.location?.href);
+```
+
+يجب أن تعطي `action` قيمة `https://register-demo.freecodecamp.org`.
+
+```js
+assert.equal(document.querySelector('form')?.action, 'https://register-demo.freecodecamp.org/');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+--fcc-editable-region--
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md
new file mode 100644
index 00000000000..20fb334fc97
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5cb8875ab6a0610f05071.md
@@ -0,0 +1,64 @@
+---
+id: 60f5cb8875ab6a0610f05071
+title: الخطوة 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+ما دام الاستبيان (form) سيضمّ ثلاث فقرات (sections)، أضف ثلاثة عناصر `fieldset` داخل عنصر `form`.
+
+# --hints--
+
+يجب عليك إضافة ثلاثة عناصر `fieldset`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset')?.length, 3);
+```
+
+عناصر `fieldset` الثلاثة يجب أن تكون داخل `form`.
+
+```js
+assert.equal(document.querySelectorAll('form > fieldset')?.length, 3);
+```
+
+عناصر `fieldset` الثلاثة يجب أن تكون أشقاء (siblings).
+
+```js
+assert.exists(document.querySelector('fieldset + fieldset + fieldset'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+--fcc-editable-region--
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+
+    </form>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
new file mode 100644
index 00000000000..8b81dab9592
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5d2776c854e069560fbe6.md
@@ -0,0 +1,62 @@
+---
+id: 60f5d2776c854e069560fbe6
+title: الخطوة 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+أول `fieldset` سوف تحتفظ بحقول الاسم والبريد الإلكتروني وكلمة المرور. ابدأ بإضافة أربعة عناصر `label` إلى الـ `fieldset` الأول.
+
+# --hints--
+
+يجب عليك إضافة أربعة عناصر `label`.
+
+```js
+assert.equal(document.querySelectorAll('label')?.length, 4);
+```
+
+يجب عليك إضافة عنصر `label` إلى الـ `fieldset` الاول.
+
+```js
+assert.equal(document.querySelector('fieldset')?.querySelectorAll('label')?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+--fcc-editable-region--
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+
+      </fieldset>
+      <fieldset></fieldset>
+      <fieldset></fieldset>
+    </form>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md
new file mode 100644
index 00000000000..3901b9cddbf
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f5dc35c07ac1078f140916.md
@@ -0,0 +1,82 @@
+---
+id: 60f5dc35c07ac1078f140916
+title: الخطوة 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+أضف النص التالي إلى عناصر `label`:
+
+- `Enter Your First Name:`
+- `Enter Your Last Name:`
+- `Enter Your Email:`
+- `Create a New Password:`
+
+# --hints--
+
+يجب أن يحتوي `label` الأول على النص `Enter Your First Name:`.
+
+```js
+assert.match(document.querySelector('label')?.innerHTML, /Enter Your First Name:/i);
+```
+
+يجب أن يحتوي `label` الثاني على النص `Enter Your Last Name:`.
+
+```js
+assert.match(document.querySelector('fieldset > label:nth-child(2)')?.innerHTML, /Enter Your Last Name:/i);
+```
+
+يجب أن يحتوي `label` الثالث على النص `Enter Your Email:`.
+
+```js
+assert.match(document.querySelector('fieldset > label:nth-child(3)')?.innerHTML, /Enter Your Email:/i);
+```
+
+يجب أن يحتوي `label` الرابع على النص `Create a New Password:`.
+
+```js
+assert.match(document.querySelector('fieldset > label:nth-child(4)')?.innerHTML, /Create a New Password:/i);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+--fcc-editable-region--
+      <fieldset>
+        <label></label>
+        <label></label>
+        <label></label>
+        <label></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset></fieldset>
+      <fieldset></fieldset>
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md
new file mode 100644
index 00000000000..ef38a10463a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md
@@ -0,0 +1,74 @@
+---
+id: 60f803d5241e6a0433a523a1
+title: الخطوة 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+وحدة `rem` تعني مقدار الأصلي من `em`، وهي ترطبت بحجم خط (font size) عنصر `html`.
+
+حيث إن عناصر `label` على مستوى السطر (inline) بشكل افتراضي، وهم جميعا معرضون جنبا إلى جنب على نفس السطر مما يجعل من الصعب قراءة نصهم. لجعلها تظهر على أسطر منفصلة، أضف `display: block` إلى عنصر `label`، أضف `margin` بالقيمة `0.5rem 0`، لفصلهما عن بعضهما البعض.
+
+# --hints--
+
+يجب عليك استخدام منتقي `label`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('label'));
+```
+
+يجب عليك إضافة خاصية `display` بالقيمة `block`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.display, 'block');
+```
+
+يجب عليك إضافة خاصية `margin` بالقيمة `0.5rem 0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.margin, '0.5rem 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label>Enter Your First Name:</label>
+        <label>Enter Your Last Name:</label>
+        <label>Enter Your Email:</label>
+        <label>Create a New Password:</label>
+      </fieldset>
+      <fieldset></fieldset>
+      <fieldset></fieldset>
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
new file mode 100644
index 00000000000..793ca5b0df1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f805f813eaf2049bc2ceea.md
@@ -0,0 +1,95 @@
+---
+id: 60f805f813eaf2049bc2ceea
+title: الخطوة 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+قم بدمج عنصر `input` داخل كل `label`. تأكد من إضافة كل `input` بعد `label` النص، وإدرج مسافة بعد الـ colon (:).
+
+# --hints--
+
+يجب عليك إضافة أربعة عناصر `input` إلى عنصر `fieldset`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset input')?.length, 4);
+```
+
+يجب عليك دمج عناصر `input` داخل عناصر `label`.
+
+```js
+assert.equal(document.querySelectorAll('label input')?.length, 4);
+```
+
+يجب عليك إضافة أول `input` بعد نص الـ `label` الآتي `Enter Your First Name:`,، وقم بإدراج مسافه بعد الـ colon (:).
+
+```js
+assert.equal(document.querySelectorAll('label')?.[0]?.innerHTML.trim(), 'Enter Your First Name: <input>');
+```
+
+يجب عليك إضافة ثاني `input` بعد نص الـ `label` الآتي `Enter Your Last Name:`,، وقم بإدراج مسافه بعد الـ colon (:).
+
+```js
+assert.equal(document.querySelectorAll('label')?.[1]?.innerHTML.trim(), 'Enter Your Last Name: <input>');
+```
+
+يجب عليك إضافة ثالث `input` بعد نص الـ `label` الآتي `Enter Your Email:`,، وقم بإدراج مسافه بعد الـ colon (:).
+
+```js
+assert.equal(document.querySelectorAll('label')?.[2]?.innerHTML.trim(), 'Enter Your Email: <input>');
+```
+
+يجب عليك إضافة رابع `input` بعد نص الـ `label` الآتي `Create a New Password:`، وقم بإدراج مسافه بعد الـ colon (:).
+
+```js
+assert.equal(document.querySelectorAll('label')?.[3]?.innerHTML.trim(), 'Create a New Password: <input>');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+  --fcc-editable-region--
+      <fieldset>
+        <label>Enter Your First Name:</label>
+        <label>Enter Your Last Name:</label>
+        <label>Enter Your Email:</label>
+        <label>Create a New Password:</label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset></fieldset>
+      <fieldset></fieldset>
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md
new file mode 100644
index 00000000000..51fab727277
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f80e0081e0f2052ae5b505.md
@@ -0,0 +1,87 @@
+---
+id: 60f80e0081e0f2052ae5b505
+title: الخطوة 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+إن تحديد سمة `type` لعنصر النموذج (form) أمر مهم للمتصفح لمعرفة نوع البيانات التي ينبغي أن يتوقعها. إذا لم يتم تحديد `type` ، فسيعتبره المتصفح `text` بشكل افتراضي.
+
+قم بإعطاء أول عنصرين `input` سمة `type` بالقيمة `text`، والثالث سمة `type` بقيمة `email`، والرابع سمة `type` بقيمة `password`.
+
+نوع `email` يسمح فقط بالبريد الإلكتروني مع `@` و `.` في النطاق (domain). نوع `password` يحجب الإدخال، ويحذر إذا كان الموقع لا يستخدم HTTPS.
+
+# --hints--
+
+يجب أن تعطي عنصر `input` الاول سمة `type` بقيمة `text`.
+
+```js
+assert.equal(document.querySelector('input')?.type, 'text');
+```
+
+يجب أن تعطي عنصر `input` الثاني سمة `type` بقيمة `text`.
+
+```js
+assert.equal(document.querySelectorAll('input')?.[1]?.type, 'text');
+```
+
+يجب أن تعطي عنصر `input` الثالث سمة `type` بقيمة `email`.
+
+```js
+assert.equal(document.querySelectorAll('input')?.[2]?.type, 'email');
+```
+
+يجب أن تعطي عنصر `input` الرابع سمة `type` بقيمة `password`.
+
+```js
+assert.equal(document.querySelectorAll('input')?.[3]?.type, 'password');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+--fcc-editable-region--
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" /></label>
+        <label for="email">Enter Your Email: <input id="email" /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" /></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset></fieldset>
+      <fieldset></fieldset>
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md
new file mode 100644
index 00000000000..4bbd3d7f096
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81167d0d4910809f88945.md
@@ -0,0 +1,80 @@
+---
+id: 60f81167d0d4910809f88945
+title: الخطوة 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+عنصر `input` الاول الذي هو من `type` بقيمة `submit` يتم تلقائياً تعيينه لإرسال (submit) عنصر `form` في أقرب parent.
+
+للتعامل مع إرسال النموذج (form submission)، بعد آخر عنصر `fieldset` أضف عنصر `input` من السمة `type` المحددة إلى `submit` و السمة `value` المحددة إلى `Submit`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `input` بعد آخر عنصر `fieldset`.
+
+```js
+assert.exists(document.querySelectorAll('fieldset')?.[2]?.nextElementSibling?.tagName, 'input');
+```
+
+يجب أن تعطي عنصر `input` سمة `type` بقيمة `submit`.
+
+```js
+assert.exists(document.querySelector('fieldset + input[type="submit"]'));
+```
+
+يجب أن تعطي عنصر `input` سمة `value` بقيمة `Submit`.
+
+```js
+assert.exists(document.querySelector('fieldset + input[value="Submit"]'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+--fcc-editable-region--
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" /></label>
+      </fieldset>
+      <fieldset></fieldset>
+      <fieldset></fieldset>
+
+--fcc-editable-region--
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md
new file mode 100644
index 00000000000..e8b0fce4063
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f81616cff80508badf9ad5.md
@@ -0,0 +1,94 @@
+---
+id: 60f81616cff80508badf9ad5
+title: الخطوة 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+في هذه المرحلة، يجب أن تكون قادراً على إرسال النموذج (submit the form). ومع ذلك ، قد تلاحظ عدم حدوث الكثير.
+
+لجعل النموذج أكثر تفاعلية، أضف السمة `required` إلى عناصر `input` في أول `fieldset`.
+
+الآن، إذا حاولت إرسال النموذج دون ملء الحقول المطلوبة، سترى رسالة خطأ.
+
+# --hints--
+
+يجب أن تعطي أول عنصر `input` سمة `required`.
+
+```js
+assert.equal(document.querySelector('input')?.required, true);
+```
+
+يجب أن تعطي ثاني `input` سمة `required`.
+
+```js
+assert.equal(document.querySelectorAll('input')?.[1]?.required, true);
+```
+
+يجب أن تعطي ثالث `input` سمة `required`.
+
+```js
+assert.equal(document.querySelectorAll('input')?.[2]?.required, true);
+```
+
+يجب أن تعطي رابع `input` سمة `required`.
+
+```js
+assert.equal(document.querySelectorAll('input')?.[3]?.required, true);
+```
+
+لا يجب أن تعطي `input` الـ `submit` سمة `required`.
+
+```js
+assert.equal(document.querySelector('input[type="submit"]')?.required, false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+--fcc-editable-region--
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" /></label>
+      </fieldset>
+      <fieldset></fieldset>
+      <fieldset></fieldset>
+      <input type="submit" value="Submit" />
+--fcc-editable-region--
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md
new file mode 100644
index 00000000000..da9f60d3ef5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f83e7bfc09900959f41e20.md
@@ -0,0 +1,74 @@
+---
+id: 60f83e7bfc09900959f41e20
+title: الخطوة 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+بعض قيم السمة `type` تأتي مع built-in form validation اي تحقق مدمج في النموذج. على سبيل المثال، `type="email"` يتطلب أن تكون القيمة عنوان بريد إلكتروني صالح.
+
+أضف تحققًا مخصصًا (custom validation) إلى عنصر `input` لكلمة المرور، عن طريق إضافة سمة `minlength` بقيمة `8`. يؤدي القيام بذلك إلى منع إرسال المدخلات التي تقل عن 8 رموز.
+
+# --hints--
+
+يجب أن تعطي عنصر `input` لكلمة المرور السمة `minlength`.
+
+```js
+assert.notEqual(document.querySelector('input[type="password"]')?.minLength, -1);
+```
+
+يجب أن تعطي السمة `minlength` قيمة `8`.
+
+```js
+assert.equal(document.querySelector('input[type="password"]')?.minLength, 8);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+--fcc-editable-region--
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" required /></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset></fieldset>
+      <fieldset></fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md
new file mode 100644
index 00000000000..63f0d0b0586
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f84ec41116b209c280ba91.md
@@ -0,0 +1,82 @@
+---
+id: 60f84ec41116b209c280ba91
+title: الخطوة 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+مع `type="password"` يمكنك استخدام السمة `pattern` لتعريف الـ regular expression الذي يجب أن يطابق كلمة المرور لاعتبارها صحيحة.
+
+قم بإضافة سمة `pattern` إلى عنصر `input` لكلمة المرور لطلب مطابقة الإدخال: `[a-z0-5]{8,}`
+
+ما ورد أعلاه هو regular expression يتطابق مع ثمانية أحرف صغيرة (lowercase) أو أكثر أو الأرقام من `0` إلى `5`. ثم قم بإزالة السمة `minlength` وقم بالتجربة.
+
+# --hints--
+
+يجب أن تعطي عنصر `input` لكلمة المرور السمة `pattern`.
+
+```js
+assert.isNotEmpty(document.querySelector('input[type="password"]')?.pattern);
+```
+
+يجب أن تعطي سمة `pattern` القيمة `[a-z0-5]{8,}`.
+
+```js
+assert.equal(document.querySelector('input[type="password"]')?.pattern, '[a-z0-5]{8,}');
+```
+
+يجب عليك إزالة السمة `minlength` من عنصر `input` لكلمة المرور.
+
+```js
+assert.equal(document.querySelector('input[type="password"]')?.minLength, -1);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+--fcc-editable-region--
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" minlength="8" required /></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset></fieldset>
+      <fieldset></fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md
new file mode 100644
index 00000000000..11e43b4046b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f852f645b5310a8264f555.md
@@ -0,0 +1,76 @@
+---
+id: 60f852f645b5310a8264f555
+title: الخطوة 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+فلنذهب إلى الجزء التالي من نموذج التسجيل. سيطلب هذا القسم نوع الحساب الذي يفتحه المستخدم، وسيؤكد أن المستخدم قد قرأ الأحكام والشروط.
+
+ابدأ بإضافة ثلاثة عناصر `label` إلى الـ `fieldset` الثاني.
+
+# --hints--
+
+يجب عليك إضافة ثلاثة عناصر `label` إلى الـ `fieldset` الثاني.
+
+```js
+assert.equal(document.querySelectorAll('fieldset')?.[1]?.querySelectorAll('label')?.length, 3);
+```
+
+عناصر `label` يجب أن تكون siblings اي تحت parent واحد و علي نفس المستوي.
+
+```js
+assert.exists(document.querySelector('fieldset:nth-child(2)')?.querySelector('label + label + label'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+
+      </fieldset>
+--fcc-editable-region--
+      <fieldset></fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md
new file mode 100644
index 00000000000..37a6f43ed25
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f85a62fb30c80bcea0cedb.md
@@ -0,0 +1,85 @@
+---
+id: 60f85a62fb30c80bcea0cedb
+title: الخطوة 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+سيتم السماح للمستخدمين باختيار `Personal Account` أو `Business Account`.
+
+للقيام بذلك، ضمن كل عنصر من أول عنصرين `label`، أضف عنصر `input` واحد مع `type="radio"`.
+
+# --hints--
+
+يجب عليك إضافة عنصرين `input`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset:nth-child(2) input')?.length, 2);
+```
+
+يجب عليك إضافة عنصر واحد `input` إلى كل عنصر من العنصرين `label` الأولين.
+
+```js
+assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(1) > input'));
+assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(2) > input'));
+```
+
+يجب عليك إعطاء عنصري `input`الاثنين `type` بقيمة `radio`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset:nth-child(2) input[type="radio"]')?.length, 2);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label></label>
+        <label></label>
+        <label></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset></fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md
new file mode 100644
index 00000000000..209819c64af
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8604682407e0d017bbf7f.md
@@ -0,0 +1,82 @@
+---
+id: 60f8604682407e0d017bbf7f
+title: الخطوة ٢٥
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+بالنسبة للأحكام والشروط، أضف `input` فيه `type` يساوي `checkbox` إلى عنصر `label` الثالث. اجعل هذا العنصر `input` مطلوبا `required` لأن المستخدمين لا ينبغي أن يسجلوا الدخول دون قراءة الأحكام والشروط.
+
+# --hints--
+
+يجب عليك إضافة `input` إلى عنصر `label` الثالث.
+
+```js
+assert.exists(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input'));
+```
+
+يجب عليك إضافة سمة `type` بالقيمة `checkbox` إلى عنصر `input`.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.type, 'checkbox');
+```
+
+يجب عليك إضافة سمة `required` إلى عنصر `input`.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input')?.required, true);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label><input type="radio" /></label>
+        <label><input type="radio" /></label>
+        <label></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset></fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md
new file mode 100644
index 00000000000..2f2ae80f426
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f8618d191b940d62038513.md
@@ -0,0 +1,106 @@
+---
+id: 60f8618d191b940d62038513
+title: الخطوة 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+ضمن كل عنصر من عناصر `label` المقابلة، وبعد عنصر `input` مباشرة، أضف مساحة وأضف النص التالي:
+
+```md
+Personal Account
+Business Account
+I accept the terms and conditions
+```
+
+# --hints--
+
+يجب عليك إعطاء أول `label` النص `Personal Account`.
+
+```js
+assert.include(document.querySelector('fieldset:nth-child(2) > label')?.innerText, 'Personal Account');
+```
+
+يجب عليك إعطاء ثاني `label` النص `Business Account`.
+
+```js
+assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText, 'Business Account');
+```
+
+يجب عليك إعطاء ثالث `label` النص `I accept the terms and conditions`.
+
+```js
+assert.include(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText, 'I accept the terms and conditions');
+```
+
+يجب أن تعطي أول نص `label` مسافة واحدة في المقدمة.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(2) > label')?.innerText?.[0], ' ');
+```
+
+يجب أن تعطي ثاني نص `label` مسافة واحدة في المقدمة.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(2)')?.innerText?.[0], ' ');
+```
+
+يجب أن تعطي ثالث نص `label` مسافة واحدة في المقدمة.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3)')?.innerText?.[0], ' ');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label><input type="radio" /></label>
+        <label><input type="radio" /></label>
+        <label><input type="checkbox" required /></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset></fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md
new file mode 100644
index 00000000000..796372cbf29
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab4a123ce4b04526b082b.md
@@ -0,0 +1,84 @@
+---
+id: 60fab4a123ce4b04526b082b
+title: الخطوة 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+تريد فقط radio input واحد قابل للاختيار في كل مرة. ومع ذلك ، فإن النموذج لا يعرف أن مدخلات الراديو (radio inputs) مرتبطة.
+
+لربط مدخلات الراديو، قم بإعطائهم نفس سمة `name` بقيمة `account-type`. الآن، لا يمكن تحديد كلا مدخلات الراديو في نفس الوقت.
+
+# --hints--
+
+يجب أن تعطي أول مدخل راديو السمة `name` بقيمة `account-type`.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(1) input[type="radio"]')?.name, 'account-type');
+```
+
+يجب أن تعطي مدخل الراديوي الثاني سمة `name` بقيمة `account-type`.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(2) label:nth-child(2) input[type="radio"]')?.name, 'account-type');
+```
+
+لا يجب أن تعطي `checkbox` السمة `name`.
+
+```js
+assert.isEmpty(document.querySelector('fieldset:nth-child(2) label:nth-child(3) input[type="checkbox"]')?.name);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label><input type="radio" /> Personal Account</label>
+        <label><input type="radio" /> Business Account</label>
+        <label><input type="checkbox" required /> I accept the terms and conditions</label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset></fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md
new file mode 100644
index 00000000000..346061ea0bd
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab8367d35de04e5cb7929.md
@@ -0,0 +1,86 @@
+---
+id: 60fab8367d35de04e5cb7929
+title: الخطوة 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+لإكمال هذا الـ `fieldset`، اربط النص `terms and conditions` في الـ `label` الثالث إلى الموقع التالي:
+
+```md
+https://www.freecodecamp.org/news/terms-of-service/
+```
+
+# --hints--
+
+يجب عليك استخدام عنصر `a` للربط بالأحكام والشروط.
+
+```js
+assert.exists(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a'));
+```
+
+يجب عليك إعطاء عنصر `a` سمة `href` من `https://www.freecodecamp.org/news/terms-of-service/`.
+
+```js
+assert.match(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.href, /https:\/\/www\.freecodecamp\.org\/news\/terms-of-service\/?/);
+```
+
+يجب عليك فقط تغليف عنصر `a` حول النص `terms and conditions`.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(2) > label:nth-child(3) > input + a')?.textContent, 'terms and conditions');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions"><input id="terms-and-conditions" type="checkbox" required /> I accept the terms and conditions</label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset></fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md
new file mode 100644
index 00000000000..b1f4d9ab032
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fab9f17fa294054b74228c.md
@@ -0,0 +1,88 @@
+---
+id: 60fab9f17fa294054b74228c
+title: الخطوة 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+لننتقل إلى `fieldset` الأخيرة. ماذا لو كنت ترغب في السماح للمستخدم بتحميل صورة الملف الشخصي؟
+
+حسنًا، `input` من نوع `file` يسمح بذلك. قم بإضافة `label` مع النص `Upload a profile picture:`، وإضافة `input` يقبل تحميل الملف.
+
+# --hints--
+
+يجب عليك إضافة `label` مع النص `Upload a profile picture:`.
+
+```js
+assert.match(document.querySelector('fieldset:nth-child(3) > label')?.innerText, /Upload a profile picture:/i);
+```
+
+يجب عليك دمج عنصر `input` واحد داخل عنصر `label`.
+
+```js
+assert.exists(document.querySelector('fieldset:nth-child(3) > label > input'));
+```
+
+يجب عليك إعطاء عنصر `input` من `type` بقيمة `file`.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(3) > label > input')?.type, 'file');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+
+      </fieldset>
+--fcc-editable-region--
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md
new file mode 100644
index 00000000000..f2d83810b6c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fabf0dd4959805dbae09e6.md
@@ -0,0 +1,103 @@
+---
+id: 60fabf0dd4959805dbae09e6
+title: الخطوة 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+أضف `label` اخر بعد الأول، مع النص `Input your age (years):`. بعد ذلك، قم بدمج `input` من `type` بقيمة `number`.
+
+بعد ذلك، أضف سمة `min` إلى `input` بقيمة `13` لأنه لا ينبغي للمستخدمين الذين تقل أعمارهم عن 13 سنة أن يسجلوا. وربما يمكنك أيضا أن تفترض ألا يوجد المستخدمين الذين تجاوزوا سن 120 سنة؛ أضف سمة `max` بقيمة `120`.
+
+الآن، إذا حاول شخص ارسال النموذج (submit the form) بقيم خارج النطاق، سيظهر تحذير، ولن يتم ارسال النموذج. قم بمحاولة ذلك.
+
+# --hints--
+
+يجب عليك إضافة `label` إلى `fieldset` الثالث، بعد الـ `label` الموجود.
+
+```js
+assert.exists(document.querySelector('fieldset:nth-child(3) > label + label'));
+```
+
+يجب عليك إعطاء الـ `label` النص `Input your age (years):`.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2)')?.textContent?.trim(), 'Input your age (years):');
+```
+
+يجب أن تعطي الـ `label` الـ `input` من `type` بقيمة `number`.
+
+```js
+assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]'));
+```
+
+يجب أن تعطي `input` سمة `min` بقيمة `13`.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.min, '13');
+```
+
+يجب أن تعطي `input` سمة `max` بقيمة `120`.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(2) > input[type="number"]')?.max, '120');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label>Upload a profile picture: <input type="file" /></label>
+
+      </fieldset>
+--fcc-editable-region--
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md
new file mode 100644
index 00000000000..9ff19f3cabd
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac4095512d3066053d73c.md
@@ -0,0 +1,84 @@
+---
+id: 60fac4095512d3066053d73c
+title: الخطوة 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+إن إضافة القائمة المنسدلة إلى النموذج أمر سهل مع عنصر `select`. عنصر `select` هو حاوية لمجموعة من عناصر `option`، ويعمل عنصر `option` كتسمية (label) لكل خيار من خيارات القائمة المنسدلة. وكلا العنصرين يتطلبان علامات إغلاق (closing tags).
+
+ابدأ عن طريق إضافة عنصر `select` تحت عنصرين `label`. يجب عليك تضمين خمس عناصر `option` ضمن عنصر `select`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `select` إلى `fieldset` الثالث.
+
+```js
+assert.exists(document.querySelector('fieldset:nth-child(3) > select'));
+```
+
+يجب عليك تضمين خمس عناصر `option` ضمن عنصر `select`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset:nth-child(3) > select > option')?.length, 5);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label>Upload a profile picture: <input type="file" /></label>
+        <label>Input your age (years): <input type="number" min="13" max="120" /></label>
+
+      </fieldset>
+--fcc-editable-region--
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md
new file mode 100644
index 00000000000..9ff9f203e47
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac56271087806def55b33.md
@@ -0,0 +1,100 @@
+---
+id: 60fac56271087806def55b33
+title: الخطوة 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+قم بدمج عنصر `select` (مع عناصر `option` داخله) ضمن عنصر `label` مع النص `How did you hear about us?`. يجب أن يأتي النص قبل عنصر `select`.
+
+# --hints--
+
+يجب عليك أن تدمج فقط عنصر `select` ضمن عنصر `label`.
+
+```js
+assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(3) > select'));
+```
+
+يجب أن تعطي عنصر `label` النص `How did you hear about us?`.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerText?.trim(), 'How did you hear about us?');
+```
+
+يجب عليك وضع النص قبل عنصر `select`.
+
+```js
+assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(3)')?.innerHTML?.trim().replace(/[\t\n]+/g, ''), /^How did you hear about us\?/);
+```
+
+يجب عليك أدخال خمس عناصر `option` ضمن عنصر `select`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset > label > select > option')?.length, 5);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+      </label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label>Upload a profile picture: <input type="file" /></label>
+        <label>Input your age (years): <input type="number" min="13" max="120" /></label>
+        <select>
+          <option></option>
+          <option></option>
+          <option></option>
+          <option></option>
+          <option></option>
+        </select>
+      </fieldset>
+--fcc-editable-region--
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md
new file mode 100644
index 00000000000..77d9c24c767
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fac8d7fdfaee0796934f20.md
@@ -0,0 +1,116 @@
+---
+id: 60fac8d7fdfaee0796934f20
+title: الخطوة 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+خيارات القائمة المنسدلة (dropdown) فارغة حاليا. لمنحهم المحتوى ، أضف النص التالي إلى كل عنصر من عناصر `option` التالية:
+
+```md
+(select one)
+freeCodeCamp News
+freeCodeCamp YouTube Channel
+freeCodeCamp Forum
+Other
+```
+
+# --hints--
+
+يجب أن تعطي عنصر `option` الأول النص `(select one)`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.textContent, '(select one)');
+```
+
+يجب أن تعطي عنصر `option` الثاني النص `freeCodeCamp News`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.textContent, 'freeCodeCamp News');
+```
+
+يجب أن تعطي عنصر `option` الثالث النص `freeCodeCamp YouTube Channel`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.textContent, 'freeCodeCamp YouTube Channel');
+```
+
+يجب أن تعطي عنصر `option` الرابع النص `freeCodeCamp Forum`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.textContent, 'freeCodeCamp Forum');
+```
+
+يجب أن تعطي عنصر `option` الخامس النص `Other`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.textContent, 'Other');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label>Upload a profile picture: <input type="file" /></label>
+        <label>Input your age (years): <input type="number" min="13" max="120" /></label>
+        <label>How did you hear about us?
+          <select>
+            <option></option>
+            <option></option>
+            <option></option>
+            <option></option>
+            <option></option>
+          </select>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md
new file mode 100644
index 00000000000..78f34026676
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60faca286cb48b07f6482970.md
@@ -0,0 +1,110 @@
+---
+id: 60faca286cb48b07f6482970
+title: الخطوة 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+ارسال النموذج (Submitting the form) مع خيار محدد لن يرسل قيمة مفيدة للخادم (server). وعلى هذا النحو، يحتاج كل `option` إلى أن يعطى السمة `value`. بدونها، سيتم إرسال محتوى نص الـ `option` إلى الخادم.
+
+قم بإعطاء الـ `option` الأول `value` بقيمة `""`، و عناصر `option` اللاحقة، سمات `value` بقيم من `1` إلى `4`.
+
+# --hints--
+
+يجب عليك إعطاء أول عنصر `option` الـ `value` بقيمة `""`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[0]?.value, '');
+```
+
+يجب عليك إعطاء ثاني عنصر `option` الـ `value` بقيمة `1`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[1]?.value, '1');
+```
+
+يجب عليك إعطاء ثالث عنصر `option` الـ `value` بقيمة `2`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[2]?.value, '2');
+```
+
+يجب عليك إعطاء رابع عنصر `option` الـ `value` بقيمة `3`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[3]?.value, '3');
+```
+
+يجب عليك إعطاء خامس عنصر `option` الـ `value` بقيمة `4`.
+
+```js
+assert.equal(document.querySelectorAll('fieldset:nth-child(3) > label:nth-child(3) option')?.[4]?.value, '4');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label>Upload a profile picture: <input type="file" /></label>
+        <label>Input your age (years): <input type="number" min="13" max="120" /></label>
+        <label>How did you hear about us?
+          <select>
+            <option>(select one)</option>
+            <option>freeCodeCamp News</option>
+            <option>freeCodeCamp YouTube Channel</option>
+            <option>freeCodeCamp Forum</option>
+            <option>Other</option>
+          </select>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md
new file mode 100644
index 00000000000..0e340114e87
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facde2d0dc61085b41063f.md
@@ -0,0 +1,105 @@
+---
+id: 60facde2d0dc61085b41063f
+title: الخطوة 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+عنصر `textarea` يعمل مثل عنصر `input` من نوع `text`، ولكن يأتي مع فائدة اضافية تتمثل في القدرة على تلقي نص متعدد الأسطر وعدد أولي من صفوف وعواميد النص.
+
+سيتمكن المستخدمون من التسجيل مع كتابة bio. أضف `label` مع النص `Provide a bio:` في نهاية `fieldset`. أضف عنصر `textarea` داخل عنصر `label`. لاحظ أن `textarea` يتطلب علامة إغلاق.
+
+# --hints--
+
+يجب عليك إضافة عنصر `label` ضمن الـ `fieldset` الثالث، بعد عناصر `label` الموجودة.
+
+```js
+assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)'));
+```
+
+يجب أن تعطي `label` النص `Provide a bio:`.
+
+```js
+assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(4)')?.innerText, /Provide a bio/);
+```
+
+يجب عليك وضع عنصر `textarea` ضمن `label`.
+
+```js
+assert.exists(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea'));
+```
+
+يجب أن تعطي عنصر `textarea` علامة فتح وإغلاق.
+
+```js
+assert.match(code, /<textarea\s*>[\s\S]*<\/textarea\s*>/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label>Upload a profile picture: <input type="file" /></label>
+        <label>Input your age (years): <input type="number" min="13" max="120" /></label>
+        <label>How did you hear about us?
+          <select>
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+
+      </fieldset>
+--fcc-editable-region--
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md
new file mode 100644
index 00000000000..70447467d70
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60facf914c7b9b08d7510c2c.md
@@ -0,0 +1,95 @@
+---
+id: 60facf914c7b9b08d7510c2c
+title: الخطوة 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+`textarea` تبدو صغيرة جدا. لإعطائها حجما أوليا، يمكنك إضافة السمات `rows` و `cols`.
+
+قم بإضافة حجم أولي من `3` صفوف (rows) و `30` عمود (columns).
+
+# --hints--
+
+يجب أن تعطي `textarea` سمة `rows` بقيمة `3`.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.rows, 3);
+```
+
+يجب أن تعطي `textarea` سمة `cols` بقيمة `30`.
+
+```js
+assert.equal(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.cols, 30);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio"></textarea>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md
new file mode 100644
index 00000000000..11b631ed6b9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad0a812d9890938524f50.md
@@ -0,0 +1,95 @@
+---
+id: 60fad0a812d9890938524f50
+title: الخطوة 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+لإعطاء الـ campers فكرة عما يضعوه في سيرتهم الشخصية، يتم استخدام السمة `placeholder`. `placeholder` يقبل قيمة نصية، والتي يتم عرضها حتى يبدأ المستخدم في الكتابة.
+
+اعطي `textarea` ال `placeholder` بقيمة `I like coding on the beach...`.
+
+# --hints--
+
+يجب عليك إعطاء `textarea` سمة `placeholder`.
+
+```js
+assert.isNotEmpty(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder);
+```
+
+يجب أن تعطي `placeholder` القيمة `I like coding on the beach...`.
+
+```js
+assert.match(document.querySelector('fieldset:nth-child(3) > label:nth-child(4) > textarea')?.placeholder, /^I like coding on the beach\.{3,4}$/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" rows="3" cols="30"></textarea>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md
new file mode 100644
index 00000000000..1b05eecc62a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad1cafcde010995e15306.md
@@ -0,0 +1,155 @@
+---
+id: 60fad1cafcde010995e15306
+title: الخطوة 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+مع عمليات إرسال النموذج (form submissions)، من المفيد ومن الممارسات الجيدة تزويد كل عنصر قابل للإرسال بسمة `name`. تُستخدم هذه السمة لتحديد العنصر في إرسال النموذج.
+
+قم بإعطاء كل عنصر قابل للإرسال سمة `name` فريدة من اختيارك، باستثناء مدخلات `radio`.
+
+# --hints--
+
+يجب عليك إعطاء `input` توقع الاسم الأول (first name) السمة `name`. _لو كنت مكانك كنت ساختار `first-name`_
+
+```js
+assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(1) > input')?.name);
+```
+
+يجب أن تعطي `input` توقع اسم العائلة (last name) السمة `name`. _لو كنت مكانك كنت ساختار `last-name`_
+
+```js
+assert.isNotEmpty(document.querySelector('fieldset:nth-child(1) > label:nth-child(2) > input')?.name);
+```
+
+يجب عليك إعطاء `email` السمة `name`. _لو كنت مكانك كنت ساختار `email`_
+
+```js
+assert.isNotEmpty(document.querySelector('input[type="email"]')?.name);
+```
+
+يجب عليك إعطاء `password` السمة `name`. _لو كنت مكانك كنت ساختار `password`_
+
+```js
+assert.isNotEmpty(document.querySelector('input[type="password"]')?.name);
+```
+
+يجب عليك إعطاء `checkbox` السمة `name`. _لو كنت مكانك كنت ساختار `terms`_
+
+```js
+assert.isNotEmpty(document.querySelector('input[type="checkbox"]')?.name);
+```
+
+يجب عليك إعطاء `file` السمة `name`. _لو كنت مكانك كنت ساختار `file`_
+
+```js
+assert.isNotEmpty(document.querySelector('input[type="file"]')?.name);
+```
+
+يجب عليك إعطاء `number` السمة `name`. _لو كنت مكانك كنت ساختار `age`_
+
+```js
+assert.isNotEmpty(document.querySelector('input[type="number"]')?.name);
+```
+
+يجب أن تعطي عنصر `select` السمة `name`. _لو كنت مكانك كنت ساختار `referrer`_
+
+```js
+assert.isNotEmpty(document.querySelector('select')?.name);
+```
+
+يجب أن تعطي عنصر `textarea` السمة `name`. _لو كنت مكانك كنت ساختار `bio`_
+
+```js
+assert.isNotEmpty(document.querySelector('textarea')?.name);
+```
+
+لا يجب عليك إعطاء أي من عناصر `option` السمة `name`.
+
+```js
+[...document.querySelectorAll('option')]?.forEach(option => assert.isUndefined(option?.name));
+```
+
+لا يجب عليك إعطاء أي من عناصر `label` السمة `name`.
+
+```js
+[...document.querySelectorAll('label')]?.forEach(label => assert.isUndefined(label?.name));
+```
+
+لا يجب عليك إعطاء أي من عناصر `fieldset` السمة `name`.
+
+```js
+[...document.querySelectorAll('fieldset')]?.forEach(fieldset => assert.isEmpty(fieldset?.name));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+--fcc-editable-region--
+        <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file"/></label>
+        <label for="age">Input your age (years): <input id="age" type="number" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id ="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md
new file mode 100644
index 00000000000..d3a04af31f1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad6dfcc0d930a59becf12.md
@@ -0,0 +1,102 @@
+---
+id: 60fad6dfcc0d930a59becf12
+title: الخطوة 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+تم الانتهاء من HTML نموذج التسجيل. الآن، يمكنك تجميلها قليلاً.
+
+ابدأ بتغيير الخط (font) إلى `Tahoma`، وحجم الخط إلى `16px` في `body`.
+
+# --hints--
+
+يجب عليك استخدام خاصية `font-family` لتغيير الخط.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily);
+```
+
+يجب عليك تعيين خاصية `font-family` إلى `Tahoma`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily, 'Tahoma');
+```
+
+يجب عليك تعيين خاصية `font-size` إلى `16px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.fontSize, '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+
+}
+--fcc-editable-region--
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md
new file mode 100644
index 00000000000..952741362e7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad8e6148f310bba7890b1.md
@@ -0,0 +1,103 @@
+---
+id: 60fad8e6148f310bba7890b1
+title: الخطوة 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+قم بتوسيط العناصر `h1` و `p` بإعطائهم `margin` من `1em auto`. ثم قم بتوسيط نصهم في `center` أيضًا.
+
+# --hints--
+
+يجب عليك استخدام منتقي عناصر مفصول بفواصل لتصميم (style) العناصر `h1` و `p`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('h1, p'));
+```
+
+يجب عليك استخدام `margin` من `1em auto` لتوسيط العناصر `h1` و `p`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.margin, '1em auto');
+```
+
+يجب عليك استخدام `text-align` من `center` لتوسيط نص `h1` و `p`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('h1, p')?.textAlign, 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md
new file mode 100644
index 00000000000..cf3f50511b1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fad99e09f9d30c1657e790.md
@@ -0,0 +1,120 @@
+---
+id: 60fad99e09f9d30c1657e790
+title: الخطوة 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+قم بتوسيط عنصر `form` بإعطائه `margin` من `0 auto`. ثم قم بتعديل حجمه إلى أقصى width بقيمة `500px`، والحد الأدنى من العرض `300px`. في ما بين هذا النطاق، اسمح له بالحصول على `width` بقيمة `60vw`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `form` لتصميم (style) العنصر `form`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('form'));
+```
+
+يجب عليك إعطاء `form` الـ `margin` بقيمة `0 auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.margin, '0px auto');
+```
+
+يجب عليك إعطاء `form` الـ `max-width` بقيمة `500px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.maxWidth, '500px');
+```
+
+يجب عليك إعطاء `form` الـ `min-width` بقيمة `300px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.minWidth, '300px');
+```
+
+يجب عليك إعطاء `form` الـ `width` بقيمة `60vw`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.width, '60vw');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md
new file mode 100644
index 00000000000..a4660f2289a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadb18058e950c73925279.md
@@ -0,0 +1,121 @@
+---
+id: 60fadb18058e950c73925279
+title: الخطوة 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+خلال التطوير، من المفيد رؤية الحدود (borders) الافتراضية للـ `fieldset`. ومع ذلك، فإنها تجعل المحتوى يبدو منفصلاً للغاية.
+
+قم بإزالة `border`، وإضافة `2rem` من الـ padding فقط إلى الأعلى (top) والأسفل (bottom) لكل `fieldset`. تأكد من إزالة `padding` من اليسار واليمين.
+
+# --hints--
+
+يمكنك استخدام قيمة `none` أو `0` لإزالة الـ `border`.
+
+```js
+assert.match(new __helpers.CSSHelp(document).getStyle('fieldset')?.border, /(none)|(0px)/);
+```
+
+يجب عليك إضافة `padding` من `2rem` إلى أعلى وأسفل كل `fieldset`.
+
+```js
+const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset')
+assert.equal(fieldset?.paddingTop, '2rem');
+assert.equal(fieldset?.paddingBottom, '2rem');
+```
+
+يجب عليك إزالة `padding` من اليسار واليمين لكل `fieldset`.
+
+```js
+const fieldset = new __helpers.CSSHelp(document).getStyle('fieldset')
+assert.equal(fieldset?.paddingLeft, '0px');
+assert.equal(fieldset?.paddingRight, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md
new file mode 100644
index 00000000000..919ec64ce5c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadce90f85c50d0bb0dd4f.md
@@ -0,0 +1,106 @@
+---
+id: 60fadce90f85c50d0bb0dd4f
+title: الخطوة 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+لإعطاء عناصر `fieldset` بعض الشيء من الفصل، قم باختيارهم وإعطائهم `border-bottom` بقيمة `3px solid #3b3b4f`.
+
+# --hints--
+
+يجب أن تعطي عناصر `fieldset` الـ `border-bottom` بقيمة `3px solid #3b3b4f`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('fieldset')?.borderBottom, '3px solid rgb(59, 59, 79)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+--fcc-editable-region--
+fieldset {
+  border: none;
+  padding: 2rem 0;
+}
+--fcc-editable-region--
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md
new file mode 100644
index 00000000000..f215404a43e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadd972e6ffe0d6858fa2d.md
@@ -0,0 +1,152 @@
+---
+id: 60fadd972e6ffe0d6858fa2d
+title: الخطوة 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+سيكون من الأفضل أن يظهر نص الـ `label` فوق عناصر النموذج.
+
+حدد كل عناصر الـ `input` و `textarea` و `select` و اجعلها تأخذ العرض الكامل لعناصرها الأصلية (parent elements).
+
+أيضا، أضف `10px` من الـ `margin` إلى الجزء العلوي من العناصر المحددة. عيّن الـ margins الآخري إلى `0`.
+
+# --hints--
+
+يجب عليك استخدام منتقي العناصر مفصولة بفواصل لتحديد عناصر `input` و `textarea` و `select`.
+
+```js
+assert.isTrue(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].some(selector => new __helpers.CSSHelp(document).getStyle(selector)));
+```
+
+يجب عليك تعيين خاصية `width` إلى `100%`.
+
+```js
+const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
+assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.width, '100%');
+```
+
+يجب عليك تعيين خاصية `margin-top` إلى `10px`.
+
+```js
+const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
+assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginTop, '10px');
+```
+
+يجب عليك تعيين خاصية `margin-bottom` إلى `0`.
+
+```js
+const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
+assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginBottom, '0px');
+```
+
+يجب عليك تعيين خاصية `margin-left` إلى `0`.
+
+```js
+const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
+assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginLeft, '0px');
+```
+
+يجب عليك تعيين خاصية `margin-right` إلى `0`.
+
+```js
+const selFunc = (selector) => new __helpers.CSSHelp(document).getStyle(selector);
+assert.equal(selFunc(['input, textarea, select', 'input, select, textarea', 'select, input, textarea', 'select, textarea, input', 'textarea, input, select', 'textarea, select, input'].find(selFunc))?.marginRight, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md
new file mode 100644
index 00000000000..b190843e4f3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fadfa2b540b70dcfa8b771.md
@@ -0,0 +1,132 @@
+---
+id: 60fadfa2b540b70dcfa8b771
+title: الخطوة 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+بالنسبة للـ `fieldset` الثاني، تريد أن يظهر الـ `input` و نص الـ `label` على نفس السطر.
+
+ابدأ، بإعطاء العناصر `input` في `fieldset` الثاني class بقيمة `inline`.
+
+# --hints--
+
+يجب عليك إعطاء أول `input` الـ class بقيمة `inline`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[0]?.classList?.contains('inline'));
+```
+
+يجب عليك إعطاء ثاني `input` الـ class بقيمة `inline`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[1]?.classList?.contains('inline'));
+```
+
+يجب عليك إعطاء ثالث `input` الـ class بقيمة `inline`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-child(2) input')?.[2]?.classList?.contains('inline'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md
new file mode 100644
index 00000000000..88eadf19c90
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc219d333e37046f474a6e.md
@@ -0,0 +1,126 @@
+---
+id: 60fc219d333e37046f474a6e
+title: الخطوة 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+حدد فقط العناصر `.inline`, واعطيهم `width` بقيمة `unset`. سيؤدي هذا إلى إزالة القاعدة السابقة التي تعين جميع عناصر `input` إلى `width: 100%`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.inline`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('.inline'));
+```
+
+يجب عليك إعطاء عناصر `.inline` الـ `width` بقيمة `unset`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.width, 'unset');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md
new file mode 100644
index 00000000000..5eb6a6a7bdb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc22d1e64d1b04cdd4e602.md
@@ -0,0 +1,141 @@
+---
+id: 60fc22d1e64d1b04cdd4e602
+title: الخطوة 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+قم بإضافة بعض المسافات بين عناصر `.inline` و نص `label`، من خلال إعطاء `margin` علي اليمين بقيمة `0.5em`. وأيضا، عيّن كل الـ margins الآخري إلى `0`.
+
+# --hints--
+
+يجب عليك إعطاء عناصر `.inline` الـ `margin-top` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginTop, '0px');
+```
+
+يجب عليك إعطاء عناصر `.inline` الـ `margin-right` بقيمة `0.5em`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginRight, '0.5em');
+```
+
+يجب عليك إعطاء عناصر `.inline` الـ `margin-bottom` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginBottom, '0px');
+```
+
+يجب عليك إعطاء عناصر `.inline` الـ `margin-left` بقيمة `0`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.marginLeft, '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+}
+
+--fcc-editable-region--
+.inline {
+  width: unset;
+
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md
new file mode 100644
index 00000000000..a46c41e7c8d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60fc236dc04532052926fdac.md
@@ -0,0 +1,126 @@
+---
+id: 60fc236dc04532052926fdac
+title: الخطوة 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+إذا نظرت عن قرب بدرجة كافية، ستلاحظ أن عناصر `.inline` مرتفعة جدًا على السطر.
+
+لمكافحة هذا، قم بتعيين خاصية `vertical-align` إلى `middle`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `vertical-align` إلى `middle` لكل عناصر `.inline`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.inline')?.verticalAlign, 'middle');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+}
+
+--fcc-editable-region--
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md
new file mode 100644
index 00000000000..4b16670f374
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe1bc30415f042faea936.md
@@ -0,0 +1,143 @@
+---
+id: 60ffe1bc30415f042faea936
+title: الخطوة 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+لجعل عناصر `input` و `textarea` تنسجم مع سمة الخلفية، قم بتعيين `background-color` إلى `#0a0a23`. ثم أعطيهم `1px` و `solid` للـ border بلون `#0a0a23`.
+
+# --hints--
+
+يجب عليك استخدام منتقي عناصر مفصول بفواصل لتحديد عناصر `input` و `textarea`.
+
+```js
+const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
+assert.isTrue(['input, textarea', 'textarea, input'].some(selFunc));
+```
+
+يجب عليك إعطاء عناصر `input` و `textarea` الـ `background-color` بقيمة `#0a0a23`.
+
+```js
+const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
+assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.backgroundColor, 'rgb(10, 10, 35)');
+```
+
+يجب عليك إعطاء عناصر `input` و `textarea` الـ border بقيمة `1px` و `solid` بلون `#0a0a23`.
+
+```js
+const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
+assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderWidth, '1px');
+assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderStyle, 'solid');
+assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.borderColor, 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md
new file mode 100644
index 00000000000..d2c3cfb2908
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe3936796ac04959285a9.md
@@ -0,0 +1,140 @@
+---
+id: 60ffe3936796ac04959285a9
+title: الخطوة 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+حاليا، إذا قمت بالكتابة في العناصر `input` أو `textarea` لن تتمكن من رؤية النص. كما أن طولها أصغر من أن يكون سهلا للاستخدام.
+
+قم بإصلاح هذا، عن طريق تعيين `color` إلى `#ffffff`، وتعيين `min-height` إلى `2em`.
+
+# --hints--
+
+يجب عليك تعيين `color` إلى `#ffffff`.
+
+```js
+const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
+assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.color, 'rgb(255, 255, 255)');
+```
+
+يجب عليك تعيين `min-height` إلى `2em`.
+
+```js
+const selFunc = selector => new __helpers.CSSHelp(document).getStyle(selector);
+assert.equal(selFunc(['input, textarea', 'textarea, input'].find(selFunc))?.minHeight, '2em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+}
+
+--fcc-editable-region--
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+
+}
+--fcc-editable-region--
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md
new file mode 100644
index 00000000000..6c8119c52d1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe4f4ec18cd04dc470c56.md
@@ -0,0 +1,145 @@
+---
+id: 60ffe4f4ec18cd04dc470c56
+title: الخطوة 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+تريد أن يبقى العنصر `select` بخلفية بيضاء ، ولكن الآن لا يحصل على نفس `min-height` لعناصر `input` و `textarea`.
+
+قم بنقل الخاصية والقيمة `min-height` بحيث يكون لكل أنواع العناصر الثلاثة نفس قيمة `min-height`، ولا يزال العنصر `select` يحتوي على خلفية بيضاء.
+
+# --hints--
+
+يجب عليك نقل خاصية `min-height` والقيمة إلى منتقى `input, textarea, select`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight);
+```
+
+يجب عليك إعطاء منتقي `input, textarea, select` الـ `min-height` بقيمة `2em`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('input, textarea, select')?.minHeight, '2em');
+```
+
+يجب عليك إزالة تعريف `min-height` من منتقي `input, textarea`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input, textarea')?.minHeight);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+  min-height: 2em;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md
new file mode 100644
index 00000000000..ae4b33b1d2f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe69ee377c6055e192a46.md
@@ -0,0 +1,153 @@
+---
+id: 60ffe69ee377c6055e192a46
+title: الخطوة 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+لتصميم زر submit ، يمكنك استخدام منتقي _attribute_ ، الذي يقوم باختيار عنصر مبني على قيمة السمة (attribute) المعطاة. إليك مثال:
+
+```css
+input[name="password"]
+```
+
+يحدد أعلاه عناصر `input` التي تحتوي على السمة `name` بقيمة `password`.
+
+الآن، استخدم منتقي السمة (attribute selector) لتصميم (style) زر submit مع `display` بقيمة `block` و `width` بقيمة `60%`.
+
+# --hints--
+
+يجب عليك استخدام منتقي السمة `input[type="submit"]` لتصميم (style) زر submit.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="submit"]'));
+```
+
+يجب أن تعطي زر submit الـ `display` بقيمة `block`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.display, 'block');
+```
+
+يجب أن تعطي زر submit الـ `width` بقيمة `60%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md
new file mode 100644
index 00000000000..ab74e1cfc45
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe7d8aae62c05bcc9e7eb.md
@@ -0,0 +1,146 @@
+---
+id: 60ffe7d8aae62c05bcc9e7eb
+title: الخطوة 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+مع `display` بقيمة `block` زر submit يجلس على الحافة اليسرى للعنصر الاب (parent element) له.
+
+استخدم نفس التقنية المستخدمة لتوسيط الـ `form` لتوسيط زر submit.
+
+# --hints--
+
+يجب أن تعطي زر submit الـ `margin` بقيمة `0 auto`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '0px auto');
+```
+
+لا يجب أن تعطي زر submit الـ `min-width` أو `max-width`.
+
+```js
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth);
+assert.isEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.maxWidth);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+--fcc-editable-region--
+input[type="submit"] {
+  display: block;
+  width: 60%;
+
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md
new file mode 100644
index 00000000000..7cd541b9600
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe8a5ceb0e90618db06d9.md
@@ -0,0 +1,144 @@
+---
+id: 60ffe8a5ceb0e90618db06d9
+title: الخطوة 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+لجعل زر submit يبدو أكثر اتساقا مع بقية النموذج، أعطيه نفس `height` الحقول الأخرى (`2em`). أيضًا ، قم بزيادة `font-size` إلى `1.1rem`.
+
+# --hints--
+
+يجب أن تعطي زر submit الـ `height` بقيمة `2em`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.height, '2em');
+```
+
+يجب أن تعطي زر submit الـ `font-size` بقيمة `1.1rem`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.fontSize, '1.1rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+--fcc-editable-region--
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 0 auto;
+
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md
new file mode 100644
index 00000000000..52965f2a36c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe947a868ec068f7850f6.md
@@ -0,0 +1,146 @@
+---
+id: 60ffe947a868ec068f7850f6
+title: الخطوة 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+لجعل زر submit يظهر أكثر تمييزا، أعطيه `background-color` بقيمة `#3b3b4f` و `border-color` بقمية `white`.
+
+# --hints--
+
+يجب أن تعطي زر submit الـ `background-color` بقيمة `#3b3b4f`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.backgroundColor, 'rgb(59, 59, 79)');
+```
+
+يجب أن تعطي زر submit الـ `border-color` بقيمة `white`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.borderColor, 'white');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+--fcc-editable-region--
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 0 auto;
+  height: 2em;
+  font-size: 1.1rem;
+
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md
new file mode 100644
index 00000000000..63cda849d70
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffe9cb47809106eda2f2c9.md
@@ -0,0 +1,151 @@
+---
+id: 60ffe9cb47809106eda2f2c9
+title: الخطوة 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+أخيرا، بالنسبة لزر submit، تريد فصله عن الـ `fieldset` أعلاه، وقم بضبط عرضه حتى لا يكون أقل من `300px`.
+
+غيّر خاصية `margin` لتشمل مساحة `1em` في الأعلى والأسفل، وأترك margins اليمنى واليسرى بقيمة `auto`. ثم حدد width كما وصف بالأعلى.
+
+# --hints--
+
+لا يجب عليك تغيير خاصية `width`. استخدم خاصية `min-width`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.width, '60%');
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.minWidth);
+```
+
+يجب عليك استخدام خاصية `margin` الموجودة لتضمينها `1em` في الأعلى والأسفل.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="submit"]')?.margin, '1em auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+--fcc-editable-region--
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 0 auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+
+}
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md
new file mode 100644
index 00000000000..46a1b3f8581
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffec2825da1007509ddd06.md
@@ -0,0 +1,152 @@
+---
+id: 60ffec2825da1007509ddd06
+title: الخطوة 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+تقوم معظم المتصفحات بحقن خصائص وقيم CSS افتراضية خاصة بها لعناصر مختلفة. إذا نظرت عن كثب ، فقد تتمكن من ملاحظة أن الملف `input` أصغر من عناصر النص `input` الأخرى. بشكل افتراضي، يتم إعطاء `padding` بقيمة `1px 2px` إلى عناصر `input` التي يمكن الكتابة فيها.
+
+باستخدام منتقي سمة (attribute selector) آخر، قم بتصميم `input` من `type` بقيمة `file` ليكون بنفس قيمة الـ padding كعناصر `input` الأخرى.
+
+# --hints--
+
+يجب عليك استخدام منتقي السمة (attribute selector) لتصميم (style) عنصر `input`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('input[type="file"]'));
+```
+
+يجب عليك إعطاء `input[type="file"]` الـ `padding` بقيمة `1px 2px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('input[type="file"]')?.padding, '1px 2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md
new file mode 100644
index 00000000000..fc074062a9d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffecefac971607ae73c60f.md
@@ -0,0 +1,153 @@
+---
+id: 60ffecefac971607ae73c60f
+title: الخطوة 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+بالحديث عن `padding`، زر submit يجلس في أسفل عنصر `form`. قم بإضافة `2em` من الـ `padding` فقط، إلى أسفل الـ `form`.
+
+# --hints--
+
+يجب عليك استخدام خاصية `padding-bottom`.
+
+```js
+assert.isNotEmpty(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom);
+```
+
+يجب أن تعطي `padding-bottom` قيمة `2em`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('form')?.paddingBottom, '2em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+--fcc-editable-region--
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+
+}
+--fcc-editable-region--
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
new file mode 100644
index 00000000000..eed756cccf9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60ffefd6479a3d084fb77cbc.md
@@ -0,0 +1,286 @@
+---
+id: 60ffefd6479a3d084fb77cbc
+title: الخطوة 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+أخيرا وليس آخرا، قم بتغيير لون النص `terms and conditions` إلى `#dfdfe2`.
+
+أحسنت صنعا! لقد أكملت الجزء الأخير من مشروع التدريب _Registration Form_.
+
+# --hints--
+
+يجب عليك استخدام منتقي العناصر `a`.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('a'));
+```
+
+يجب عليك إعطاء عناصر `a` الـ `color` بقيمة `#dfdfe2`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('a')?.color, 'rgb(223, 223, 226)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" class="inline" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" name="first-name" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" name="last-name" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" name="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" name="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" class="inline" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" class="inline" /> Business Account</label>
+        <label for="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" name="terms" class="inline" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+  padding-bottom: 2em;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid #3b3b4f;
+}
+
+fieldset:last-of-type {
+  border-bottom: none;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+input,
+textarea,
+select {
+  margin: 10px 0 0 0;
+  width: 100%;
+  min-height: 2em;
+}
+
+input, textarea {
+  background-color: #0a0a23;
+  border: 1px solid #0a0a23;
+  color: #ffffff;
+}
+
+.inline {
+  width: unset;
+  margin: 0 0.5em 0 0;
+  vertical-align: middle;
+}
+
+input[type="submit"] {
+  display: block;
+  width: 60%;
+  margin: 1em auto;
+  height: 2em;
+  font-size: 1.1rem;
+  background-color: #3b3b4f;
+  border-color: white;
+  min-width: 300px;
+}
+
+input[type="file"] {
+  padding: 1px 2px;
+}
+
+a {
+  color: #dfdfe2;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62b30924c5e4ef0daba23b5e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62b30924c5e4ef0daba23b5e.md
new file mode 100644
index 00000000000..41a391d1190
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62b30924c5e4ef0daba23b5e.md
@@ -0,0 +1,122 @@
+---
+id: 62b30924c5e4ef0daba23b5e
+title: الخطوة 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+حدود عنصر `fieldset` الأخير تبدو بعيدة عن مكانها بعض الشيء. يمكنك تحديد العنصر الأخير من نوع معين باستخدام CSS pseudo-classs الـ `last-of-type`، مثل هذا:
+
+```css
+p:last-of-type { }
+```
+
+سيؤدي هذا إلى تحديد آخر عنصر `p`. قم بإنشاء منتقي جديد يستهدف عنصر `fieldset` الأخير وتعيين `border-bottom` إلى `none`.
+
+# --hints--
+
+يمكنك استخدام pseudo-class الـ `:last-of-type` لتحديد العنصر الأخير فقط من نوع معين.
+
+```js
+assert.exists(new __helpers.CSSHelp(document).getStyle('fieldset:last-of-type'));
+```
+
+يجب أن يكون لـ `fieldset:last-of-type` الـ `border-bottom` بقيمة `none`.
+
+```js
+const borderBottom = new __helpers.CSSHelp(document).getStyle('fieldset:last-of-type')?.borderBottom;
+assert(borderBottom === 'none' || borderBottom === 'medium none');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" name="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" name="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" name="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" name="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions" name="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required name="terms-and-conditions" /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+      <fieldset>
+        <label for="profile-picture">Upload a profile picture: <input id="profile-picture" type="file" name="file" /></label>
+        <label for="age">Input your age (years): <input id="age" type="number" name="age" min="13" max="120" /></label>
+        <label for="referrer">How did you hear about us?
+          <select id="referrer" name="referrer">
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label for="bio">Provide a bio:
+          <textarea id="bio" name="bio" rows="3" cols="30" placeholder="I like coding on the beach..."></textarea>
+        </label>
+      </fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+  font-family: Tahoma;
+  font-size: 16px;
+}
+
+h1, p {
+  margin: 1em auto;
+  text-align: center;
+}
+
+form {
+  width: 60vw;
+  max-width: 500px;
+  min-width: 300px;
+  margin: 0 auto;
+}
+
+fieldset {
+  border: none;
+  padding: 2rem 0;
+  border-bottom: 3px solid rgb(59, 59, 79);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62cc5b1779e4d313466f73c5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62cc5b1779e4d313466f73c5.md
new file mode 100644
index 00000000000..520c1b8d4ed
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62cc5b1779e4d313466f73c5.md
@@ -0,0 +1,70 @@
+---
+id: 62cc5b1779e4d313466f73c5
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+أدخل عنصر `link` ذاتي الأغلاق داخل عنصر `head`. اعطيها سمة `rel` بقيمة `stylesheet` و `href` بقيمة `styles.css`.
+
+# --hints--
+
+يجب أن يحتوي كودك على عنصر `link`.
+
+```js
+assert.exists(document.querySelector('link'));
+```
+
+لا يجب عليك تغيير وسوم `head` الموجودة. تيقن من أنك لم تقم بحذف علامة الإغلاق (closing tag).
+
+```js
+const heads = document.querySelectorAll('head');
+assert.equal(heads?.length, 1);
+```
+
+يجب أن يحتوي كودك على عنصر `link` مغلق ذاتيا (self-closing).
+
+```js
+assert(document.querySelectorAll('link').length === 1);
+```
+
+يجب أن يحتوي عنصرك `link` داخل عنصرك `head`.
+
+```js
+assert.exists(document.querySelector('head > link'));
+```
+
+يجب أن يحتوي عنصرك `link` على سمة `rel` بقيمة `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+يجب أن يحتوي عنصرك `link` على سمة `href` بقيمة `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8b9dab5ac88e4d3d43a3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8b9dab5ac88e4d3d43a3.md
new file mode 100644
index 00000000000..0378d8f8adf
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8b9dab5ac88e4d3d43a3.md
@@ -0,0 +1,109 @@
+---
+id: 62ff8b9dab5ac88e4d3d43a3
+title: الخطوة 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+أتباعاً أفضل ممارسات إمكانية الوصول, أربط عناصر `input` و `label` معاً باستعمال سمة `for`.
+
+استخدم `first-name`, و `last-name`, و `email`, و `new-password` كقيم لسمات `id`.
+
+# --hints--
+
+يجب أن يحتوي أول عنصر `input` علي `id` بقيمة `first-name`.
+
+```js
+assert(document.querySelectorAll('input')?.[0]?.matches('#first-name'))
+```
+
+يجب أن يحتوي ثاني عنصر `input` علي `id` بقيمة `last-name`.
+
+```js
+assert(document.querySelectorAll('input')?.[1]?.matches('#last-name'))
+```
+
+يجب أن يحتوي ثالث عنصر `input` علي `id` بقيمة `email`.
+
+```js
+assert(document.querySelectorAll('input')?.[2]?.matches('#email'))
+```
+
+يجب أن يحتوي رابع عنصر `input` علي `id` بقيمة `new-password`.
+
+```js
+assert(document.querySelectorAll('input')?.[3]?.matches('#new-password'))
+```
+
+يجب أن يحتوي عنصرك الأول `label` على سمة `for` بقيمة `first-name`.
+
+```js
+assert(document.querySelectorAll('label')?.[0]?.matches('label[for="first-name"]'))
+```
+
+يجب أن يحتوي عنصرك الثاني `label` على سمة `for` بقيمة `last-name`.
+
+```js
+assert(document.querySelectorAll('label')?.[1]?.matches('label[for="last-name"]'))
+```
+
+يجب أن يحتوي عنصرك الثالث `label` على سمة `for` بقيمة `email`.
+
+```js
+assert(document.querySelectorAll('label')?.[2]?.matches('label[for="email"]'))
+```
+
+يجب أن يحتوي عنصرك الرابع `label` على سمة `for` بقيمة `new-password`.
+
+```js
+assert(document.querySelectorAll('label')?.[3]?.matches('label[for="new-password"]'))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+--fcc-editable-region--
+      <fieldset>
+        <label>Enter Your First Name: <input /></label>
+        <label>Enter Your Last Name: <input /></label>
+        <label>Enter Your Email: <input /></label>
+        <label>Create a New Password: <input /></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset></fieldset>
+      <fieldset></fieldset>
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md
new file mode 100644
index 00000000000..6135cd0a0a0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff8e998d3e7eae14d6ae3b.md
@@ -0,0 +1,102 @@
+---
+id: 62ff8e998d3e7eae14d6ae3b
+title: الخطوة 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+اتبع أفضل ممارسات إمكانية الوصول عن طريق ربط عناصر `input` و `label` في `fieldset` الثاني.
+
+استخدم `personal-account`, و `business-account`, و `terms-and-conditions` كقيم لسمات `id`.
+
+# --hints--
+
+يجب أن يحتوي أول عنصر `input` علي `id` بقيمة `personal-account`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-of-type(2) input')?.[0]?.matches('#personal-account'))
+```
+
+يجب أن يحتوي الثاني عنصر `input` علي `id` بقيمة `business-account`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-of-type(2) input')?.[1]?.matches('#business-account'))
+```
+
+يجب أن يحتوي ثالث عنصر `input` علي `id` بقيمة `terms-and-conditions`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-of-type(2) input')?.[2]?.matches('#terms-and-conditions'))
+```
+
+يجب أن يحتوي عنصرك الأول `label` على سمة `for` بقيمة `personal-account`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-of-type(2) label')?.[0]?.matches('label[for="personal-account"]'))
+```
+
+يجب أن يحتوي عنصرك الثاتي `label` على سمة `for` بقيمة `business-account`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-of-type(2) label')?.[1]?.matches('label[for="business-account"]'))
+```
+
+يجب أن يحتوي عنصرك الثالث `label` على سمة `for` بقيمة `terms-and-conditions`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-of-type(2) label')?.[2]?.matches('label[for="terms-and-conditions"]'))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label><input type="radio" name="account-type" /> Personal Account</label>
+        <label><input type="radio" name="account-type" /> Business Account</label>
+        <label><input type="checkbox" required /> I accept the terms and conditions</label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset></fieldset>
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff919a7b5612c0670923a5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff919a7b5612c0670923a5.md
new file mode 100644
index 00000000000..79a91a18ba6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/62ff919a7b5612c0670923a5.md
@@ -0,0 +1,131 @@
+---
+id: 62ff919a7b5612c0670923a5
+title: الخطوة 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+أربط عناصر النموذج القابلة للتطبيق وعناصرهم `label` معاً.
+
+استخدم `profile-picture`, و `age`, و `referrer`, و `bio` كقيم لسمات `id`.
+
+# --hints--
+
+يجب أن يحتوي أول عنصر `input` علي `id` بقيمة `profile-picture`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-of-type(3) input')?.[0]?.matches('#profile-picture'))
+```
+
+يجب أن يحتوي ثاني عنصر `input` علي `id` بقيمة `age`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-of-type(3) input')?.[1]?.matches('#age'))
+```
+
+يجب أن يحتوي عنصر `select` علي `id` بقيمة `referrer`.
+
+```js
+assert(document.querySelector('fieldset:nth-of-type(3) select')?.matches('#referrer'))
+```
+
+يجب أن يحتوي عنصر `textarea` علي `id` بقيمة `bio`.
+
+```js
+assert(document.querySelector('fieldset:nth-of-type(3) textarea')?.matches('#bio'))
+```
+
+يجب أن يحتوي عنصرك الأول `label` على سمة `for` بقيمة `profile-picture`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[0]?.matches('label[for="profile-picture"]'))
+```
+
+يجب أن يحتوي عنصرك الثاني `label` على سمة `for` بقيمة `age`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[1]?.matches('label[for="age"]'))
+```
+
+يجب أن يحتوي عنصرك الثالث `label` على سمة `for` بقيمة `referrer`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[2]?.matches('label[for="referrer"]'))
+```
+
+يجب أن يحتوي عنصرك الرابع `label` على سمة `for` بقيمة `bio`.
+
+```js
+assert(document.querySelectorAll('fieldset:nth-of-type(3) label')?.[3]?.matches('label[for="bio"]'))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Registration Form</title>
+    <link rel="stylesheet" href="styles.css" />
+  </head>
+  <body>
+    <h1>Registration Form</h1>
+    <p>Please fill out this form with the required information</p>
+    <form action='https://register-demo.freecodecamp.org'>
+      <fieldset>
+        <label for="first-name">Enter Your First Name: <input id="first-name" type="text" required /></label>
+        <label for="last-name">Enter Your Last Name: <input id="last-name" type="text" required /></label>
+        <label for="email">Enter Your Email: <input id="email" type="email" required /></label>
+        <label for="new-password">Create a New Password: <input id="new-password" type="password" pattern="[a-z0-5]{8,}" required /></label>
+      </fieldset>
+      <fieldset>
+        <label for="personal-account"><input id="personal-account" type="radio" name="account-type" /> Personal Account</label>
+        <label for="business-account"><input id="business-account" type="radio" name="account-type" /> Business Account</label>
+        <label for="terms-and-conditions">
+          <input id="terms-and-conditions" type="checkbox" required /> I accept the <a href="https://www.freecodecamp.org/news/terms-of-service/">terms and conditions</a>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <fieldset>
+        <label>Upload a profile picture: <input type="file" /></label>
+        <label>Input your age (years): <input type="number" min="13" max="120" /></label>
+        <label>How did you hear about us?
+          <select>
+            <option value="">(select one)</option>
+            <option value="1">freeCodeCamp News</option>
+            <option value="2">freeCodeCamp YouTube Channel</option>
+            <option value="3">freeCodeCamp Forum</option>
+            <option value="4">Other</option>
+          </select>
+        </label>
+        <label>Provide a bio:
+          <textarea></textarea>
+        </label>
+      </fieldset>
+--fcc-editable-region--
+      <input type="submit" value="Submit" />
+    </form>
+  </body>
+</html>
+```
+
+```css
+body {
+  width: 100%;
+  height: 100vh;
+  margin: 0;
+  background-color: #1b1b32;
+  color: #f5f6f7;
+}
+
+label {
+  display: block;
+  margin: 0.5rem 0;
+}
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md
new file mode 100644
index 00000000000..959077c0c7e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51578.md
@@ -0,0 +1,112 @@
+---
+id: 60b69a66b6ddb80858c51578
+title: الخطوة الأولى
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+ابدأ بإعداد بنية HTML الخاصة بك. قم بإضافة تعريف `<!DOCTYPE>` وعنصر `html` مع سمة `lang` تم تعيينها إلى `en`. ضمن عنصر `html` أضف عنصر `head` وعنصر `body`.
+
+# --hints--
+
+يجب أن يحتوي الكود الخاص بك على `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE/gi));
+```
+
+يجب عليك تضمين مسافة بعد `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+/gi));
+```
+
+يجب عليك تحديد نوع المستند ليكون `html`.
+
+```js
+assert(code.match(/html/gi));
+```
+
+يجب عليك إغلاق تعريف `DOCTYPE` باستخدام `>` بعد تحديد النوع.
+
+```js
+assert(code.match(/html\s*>/gi));
+```
+
+يجب أن يكون تعريف `DOCTYPE` في بداية HTML الخاص بك.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
+```
+
+يجب أن يحتوي عنصر `html` الخاص بك على علامة افتتاحية مع سمة `lang` بقيمة `en`
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+يجب أن يحتوي عنصر `html` الخاص بك على closing tag.
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+يجب أن يكون لديك الـ opening tag للـ `head`.
+
+```js
+assert(code.match(/<head\s*>/i));
+```
+
+يجب أن يكون لديك الـ closing tag للـ `head`.
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+يجب أن يكون لديك الـ opening tag للـ `body`.
+
+```js
+assert(code.match(/<body\s*>/i));
+```
+
+يجب أن يكون لديك الـ closing tag للـ `body`.
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+عناصر `head` و `body` يجب أن يكونا أشقاء (siblings).
+
+```js
+assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
+```
+
+عنصر `head` يجب أن يكون داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
+```
+
+عنصر `body` يجب أن يكون داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md
new file mode 100644
index 00000000000..e96a3ab30ff
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51579.md
@@ -0,0 +1,63 @@
+---
+id: 60b69a66b6ddb80858c51579
+title: الخطوة الثانية
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+ضمن عنصر `head` الخاص بك، أضف وسم `meta` مع سمة `charset` معينة إلى `utf-8`. ايضا قم بإضافة عنصر `title` مع النص `Picasso Painting`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `meta` واحد بالضبط.
+
+```js
+assert(document.querySelectorAll('meta').length === 1);
+```
+
+يجب أن يحتوي وسم `meta` الخاص بك علي سمة `charset`.
+
+```js
+assert(document.querySelector('meta')?.getAttribute('charset'));
+```
+
+يجب تعيين سمة `charset` الخاصة بك إلى `utf-8`.
+
+```js
+assert(document.querySelector('meta')?.getAttribute('charset')?.toLowerCase() === 'utf-8');
+```
+
+يجب عليك إضافة عنصر `title` واحد بالضبط.
+
+```js
+assert(document.querySelectorAll('title').length === 1);
+```
+
+عنصر `title` الخاص بك يجب أن يحتوي على النص `Picasso Painting`. لاحظ أن التهجئة والـ casing مهمان.
+
+```js
+assert(document.querySelector('title')?.innerText === 'Picasso Painting');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+  </head>
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md
new file mode 100644
index 00000000000..0a7344617f7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157a.md
@@ -0,0 +1,56 @@
+---
+id: 60b69a66b6ddb80858c5157a
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+FontAwesome هي مكتبة من الأيقونات التي تعمل بالـ SVG، والعديد منها متاح للاستخدام مجاناً. سوف تستخدم بعض هذه الايقونات في هذا المشروع، لذا سوف تحتاج إلى ربط الـ style sheet الخارجية مع الـ HTML.
+
+قم بإضافة عنصر `link` مع `rel` من `stylesheet` و `href` من `https://use.fontawesome.com/releases/v5.8.2/css/all.css`.
+
+# --hints--
+
+يجب أن يكون لديك عنصران `link`.
+
+```js
+assert(document.querySelectorAll('link').length === 2);
+```
+
+`link` الخاص بك يجب أن يحتوي على `rel` من `stylesheet`.
+
+```js
+assert(document.querySelectorAll('link')?.[1]?.getAttribute('rel') === 'stylesheet');
+```
+
+عنصر `link` الخاص بك يجب أن يحتوي على `href` من `https://use.fontawesome.com/releases/v5.8.2/css/all.css`.
+
+```js
+assert(document.querySelectorAll('link')?.[1]?.getAttribute('href') === 'https://use.fontawesome.com/releases/v5.8.2/css/all.css')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    --fcc-editable-region--
+
+    --fcc-editable-region--
+  </head>
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md
new file mode 100644
index 00000000000..f95d6047751
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157b.md
@@ -0,0 +1,50 @@
+---
+id: 60b69a66b6ddb80858c5157b
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+لبدء لوحتك، أعط عنصر `body` الـ `background-color` من `rgb(184, 132, 46)`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `body`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+يجب أن يكون لعنصر `body` الخاص بك خاصية `background-color` بقيمة `rgb (184, 132, 46)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.backgroundColor === 'rgb(184, 132, 46)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md
new file mode 100644
index 00000000000..d7a1edab299
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157c.md
@@ -0,0 +1,51 @@
+---
+id: 60b69a66b6ddb80858c5157c
+title: الخطوة ٦
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+ضمن body tag الخاص بك، أضف عنصر `div`. أعطيه `id` من `back-wall`.
+
+# --hints--
+
+يجب عليك إضافة عنصر واحد `div` بالضبط.
+
+```js
+assert(document.querySelectorAll('div').length === 1);
+```
+
+يجب أن يكون لعنصر `div` الخاص بك `id` بقيمة `back-wall`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('id') === 'back-wall');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md
new file mode 100644
index 00000000000..cc9d38906ec
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157d.md
@@ -0,0 +1,54 @@
+---
+id: 60b69a66b6ddb80858c5157d
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+استخدم id selector لإعطاء عنصر `back-wall` الـ `background-color` بقيمة `#8B4513`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `#back-wall`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#back-wall'));
+```
+
+يجب أن يكون لمنتقي `#back-wall` الخاص بك `background-color` من `#8B4513`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.backgroundColor === 'rgb(139, 69, 19)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md
new file mode 100644
index 00000000000..c51992614c6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157e.md
@@ -0,0 +1,56 @@
+---
+id: 60b69a66b6ddb80858c5157e
+title: الخطوة ٨
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+اعطي عنصر `back-wall` الـ `width` بقيمة `100%` و `height` بقيمة `60%`.
+
+# --hints--
+
+يجب عليك تعيين `width` الـ `#back-wall` إلى `100%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.width === '100%');
+```
+
+يجب عليك تعيين `height` الـ `#back-wall` إلى `60%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.height === '60%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md
new file mode 100644
index 00000000000..ac91e5f947d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5157f.md
@@ -0,0 +1,69 @@
+---
+id: 60b69a66b6ddb80858c5157f
+title: الخطوة ٩
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+عادةً، يتم تقديم HTML بترتيب من أعلى إلى أسفل. العناصر في الجزء العلوي من التعليمات البرمجية موضوعة في الجزء العلوي من الصفحة. ومع ذلك، قد ترغب مرات عدّة في نقل العناصر إلى مواقف مختلفة. يمكنك الفعل ذلك باستخدام سمة `position`.
+
+تعيين خاصية `position` لعنصر `back-wall` إلى `absolute`. يخرج موضع `absolute` العنصر من ذلك التدفق المستند من أعلى إلى أسفل ويسمح لك بتعديله بالنسبة (relative) إلى الحاوية.
+
+عندما يتم وضع عنصر يدوياً، يمكنك نقل تخطيطه باستخدام `top`, و`left`، و`right`، و`bottom`. عيّن `back-wall` ليكون لديه `top` بقيمة `0`، و `left` بقيمة `0`.
+
+
+# --hints--
+
+يجب يحتوي منتقيك `#back-wall` على `position` محدد على `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.position === 'absolute');
+```
+
+يجب أن يحتوي منتقيك `#back-wall` على خاصية `top` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.top === '0px');
+```
+
+يجب أن يحتوي منتقيك `#back-wall` على خاصية `left` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.left === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md
new file mode 100644
index 00000000000..a6545e3e3a2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51580.md
@@ -0,0 +1,59 @@
+---
+id: 60b69a66b6ddb80858c51580
+title: الخطوة ١٠
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+يتم استخدام خاصية `z-index` لإنشاء "طبقات" (layers) لعناصر HTML الخاصة بك. إذا كنت على دراية بأدوات تحرير الصور، ربما كنت قد عملت مع الطبقات من قبل. هذا مفهوم مشابه.
+
+ستبدو العناصر التي تحتوي على قيمة `z-index` أعلى فوق العناصر التي تحتوي على قيمة `z-index` اقل. يمكن الجمع بين ذلك وبين تحديد المكان (positioning) في الدرس السابق، لإنشاء تأثيرات فريدة.
+
+بما أن عنصر `back-wall` سيحتاج إلى أن يظهر "خلف" العناصر الأخرى التي ستقوم بإنشائها، قم إعطاء عنصر `back-wall` الـ `z-index` بقيمة `-1`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `#back-wall` الخاص بك على خاصية `z-index` بقيمة `-1`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#back-wall')?.zIndex === '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md
new file mode 100644
index 00000000000..34e70180409
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51581.md
@@ -0,0 +1,68 @@
+---
+id: 60b69a66b6ddb80858c51581
+title: الخطوة ١١
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+أسفل عنصر `back-wall` الخاص بك، أنشئ `div` مع `class` بقيمة `characters`. هذا هو المكان الذي ستنشئ فيه شخصيات لوحتك.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` جديد واحد فقط.
+
+```js
+assert(document.querySelectorAll('div').length === 2);
+```
+
+عنصر `div` الجديد الخاص بك يجب أن يأتي بعد عنصر `#back-wall` الخاص بك.
+
+```js
+assert(document.querySelector('#back-wall')?.nextElementSibling?.localName === 'div');
+```
+
+عنصر `div` الجديد الخاص بك يجب أن يحتوي على `class` يسمي `characters`.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('characters'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    --fcc-editable-region--
+
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md
new file mode 100644
index 00000000000..f0728bc617b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51582.md
@@ -0,0 +1,70 @@
+---
+id: 60b69a66b6ddb80858c51582
+title: الخطوة ١٢
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+داخل العنصر `characters` هذا ، قم بإنشاء `div` آخر مع `id` بقيمة `offwhite-character`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `div` إضافي واحد فقط.
+
+```js
+assert(document.querySelectorAll('div').length === 3);
+```
+
+يجب أن يكون عنصر `div` الجديد متداخلا في عنصر `.characters` الخاص بك.
+
+```js
+assert(document.querySelector('.characters div'));
+```
+
+يجب أن يحتوي عنصر `div` الجديد على`id` بقيمة `offwhite-character`.
+
+```js
+assert(document.querySelector('.characters div')?.getAttribute('id') === 'offwhite-character');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      --fcc-editable-region--
+
+      --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md
new file mode 100644
index 00000000000..2717b69e42f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51583.md
@@ -0,0 +1,84 @@
+---
+id: 60b69a66b6ddb80858c51583
+title: الخطوة ١٣
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+قم بإنشاء أربعة عناصر `div` داخل عنصر`offwhite-character` الخاص بك. اعطي تلك العناصر `div` قيم `id` التالية، بالترتيب: `white-hat` و `black-mask` و `gray-instrument` و `tan-table`.
+
+# --hints--
+
+يجب عليك إضافة أربعة عناصر `div` ضمن عنصر `.offwhite-character` الخاص بك.
+
+```js
+assert(document.querySelectorAll('#offwhite-character div').length === 4);
+```
+
+يجب أن يحتوي العنصر `div` الجديد على `id` بقيمة `white-hat`.
+
+```js
+assert(document.querySelectorAll('#offwhite-character div')[0]?.getAttribute('id') === 'white-hat');
+```
+
+يجب أن يحتوي عنصر `div` الجديد الثاني على `id` بقيمة `black-mask`.
+
+```js
+assert(document.querySelectorAll('#offwhite-character div')[1]?.getAttribute('id') === 'black-mask');
+```
+
+عنصر `div` الجديد الثالث الخاص بك يجب أن يحتوي على `id` بقيمة `gray-instrument`.
+
+```js
+assert(document.querySelectorAll('#offwhite-character div')[2]?.getAttribute('id') === 'gray-instrument');
+```
+
+عنصر `div` الجديد الرابع يجب أن يحتوي على `id` بقيمة `tan-table`.
+
+```js
+assert(document.querySelectorAll('#offwhite-character div')[3]?.getAttribute('id') === 'tan-table');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        --fcc-editable-region--
+
+        --fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md
new file mode 100644
index 00000000000..ecabe124dc5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51584.md
@@ -0,0 +1,79 @@
+---
+id: 60b69a66b6ddb80858c51584
+title: الخطوة ١٤
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+هذه الشخصية تحتاج إلى عينين. قم بإنشاء عنصرين `div` في `black-mask` عنصر. اعطيهم الـ classes الآتية `eyes left` و `eyes right`، بذلك الترتيب.
+
+# --hints--
+
+يجب عليك إنشاء عنصرين `div` ضمن عنصر `#black-mask` الخاص بك.
+
+```js
+assert(document.querySelectorAll('#black-mask div').length === 2);
+```
+
+يجب أن تحتوي أول `div` جديدة على `eyes` و `left`.
+
+```js
+assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('eyes'));
+assert(document.querySelectorAll('#black-mask div')[0]?.classList.contains('left'));
+```
+
+يجب أن تحتوي ثاني `div` جديدة على classes تدعي `eyes` و `right`.
+
+```js
+assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('eyes'));
+assert(document.querySelectorAll('#black-mask div')[1]?.classList.contains('right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          --fcc-editable-region--
+
+          --fcc-editable-region--
+        </div>
+        <div id="gray-instrument"></div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md
new file mode 100644
index 00000000000..bc66a35b51f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51585.md
@@ -0,0 +1,74 @@
+---
+id: 60b69a66b6ddb80858c51585
+title: خطوة ١٥
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+قم بإنشاء بعض "النقاط" للجهاز (instrument). أضف خمسة عناصر `div` داخل عنصر `gray-instrument` الخاص بك. قم بتعيين `class` كل منهما إلى `black-dot`.
+
+# --hints--
+
+يجب أن يكون لديك خمسة عناصر `div` جديدة داخل عنصر `#gray-instrument` الخاص بك.
+
+```js
+assert(document.querySelectorAll('#gray-instrument div').length === 5);
+```
+
+يجب أن تحتوي عناصر `div` الخمسة الخاصة بك على الـ classes الآتية `black-dot`.
+
+```js
+assert(document.querySelectorAll('#gray-instrument .black-dot').length === 5);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          --fcc-editable-region--
+
+          --fcc-editable-region--
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md
new file mode 100644
index 00000000000..ce44454d6c3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51586.md
@@ -0,0 +1,93 @@
+---
+id: 60b69a66b6ddb80858c51586
+title: الخطوة ١٦
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+باستخدام منتقي `id` ، قم بإنشاء قاعدة لعنصر `offwhite-character` الخاص بك. أعطيه `width` بقيمة `300px`،و `height` بقيمة `550px`، و `background-color` بقيمة `GhostWhite`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `#offwhite-character`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character'));
+```
+
+يجب أن يكون لـ `#offwhite-character` الخاص بك خاصية `width` بقيمة `300px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.width === '300px');
+```
+
+يجب أن يكون لـ `#offwhite-character` الخاص بك خاصية `height` بقيمة `550px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.height === '550px');
+```
+
+يجب أن يحتوي `#offwhite-character` على خاصية `background-color` تم تعيينها إلى `GhostWhite`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.backgroundColor === 'ghostwhite');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md
new file mode 100644
index 00000000000..bbedbb1a157
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51587.md
@@ -0,0 +1,91 @@
+---
+id: 60b69a66b6ddb80858c51587
+title: الخطوة ١٧
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+قم بنقل `offwhite-character` إلى مكانه من خلال إعطائه `position` بقيمة `absolute` وقيمة `top` من `20%` و قيمة `left` من `17.5%`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#offwhite-character` الخاص بك خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.position === 'absolute');
+```
+
+يجب أن يحتوي منتقي `#offwhite-character` على خاصية `top` بقيمة `20%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.top === '20%');
+```
+
+يجب أن يحتوي منتقي `#offwhite-character` على خاصية `left` بقيمة `17.5%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#offwhite-character')?.left === '17.5%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md
new file mode 100644
index 00000000000..aaaa07bd717
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51588.md
@@ -0,0 +1,102 @@
+---
+id: 60b69a66b6ddb80858c51588
+title: الخطوة ١٨
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+باستخدام منتقي `id` ، قم بتصميم عنصر `white-hat` الخاص بك. أعطيه `width` و `height` بقيمة `0`، و `border-style` بقيمة `solid`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `#white-hat`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-hat'));
+```
+
+يجب أن يكون لمنتقي `#white-hat` الخاص بك الخاصية `width` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.width === '0px');
+```
+
+يجب أن يكون لمنتقي `#white-hat` الخاص بك الخاصية `height` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.height === '0px');
+```
+
+يجب أن يكون لمنتقي `#white-hat` الخاص بك الخاصية `border-style` بقيمة `solid`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderStyle === 'solid');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md
new file mode 100644
index 00000000000..2caf29cc2f8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51589.md
@@ -0,0 +1,88 @@
+---
+id: 60b69a66b6ddb80858c51589
+title: الخطوة ١٩
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+هذا لا يبدو صحيحا. قم بتعيين `border-width` الى `0 120px 140px 180px` لتحديد حجم القبعة (hat) بشكل صحيح.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#white-hat` الخاص بك خاصية `border-width` بقيمة `0 120px 140px 180px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderWidth === '0px 120px 140px 180px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md
new file mode 100644
index 00000000000..9725ae38c4c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158a.md
@@ -0,0 +1,107 @@
+---
+id: 60b69a66b6ddb80858c5158a
+title: الخطوة ٢٠
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+الآن لديك صندوق كبير. إعطائه `border-top-color`, و`border-right-color`, و`border-left-color` من `transparent`. عيّن `border-bottom-color` إلى `GhostWhite`. وهذا سيجعلها تبدو أشبه بالقبعة.
+
+# --hints--
+
+يجب يحمل منتقيك `#white-hat` خاصية `border-top-color` بقيمة `transparent`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderTopColor === 'transparent');
+```
+
+يجب يحمل منتقيك `#white-hat` خاصية `border-right-color` بقيمة `transparent`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderRightColor === 'transparent');
+```
+
+يجب يحمل منتقيك `#white-hat` خاصية `border-left-color` بقيمة `transparent`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderLeftColor === 'transparent');
+```
+
+يجب يحمل منتقيك `#white-hat` خاصية `border-bottom-color` بقيمة `GhostWhite`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.borderBottomColor === 'ghostwhite');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md
new file mode 100644
index 00000000000..75db61c0e50
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158b.md
@@ -0,0 +1,105 @@
+---
+id: 60b69a66b6ddb80858c5158b
+title: الخطوة ٢١
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+أعطي القبعة `position` بقيمة `absolute`، و`top` بقيمة `-140px`، و `left` بقيمة `0`.
+
+# --hints--
+
+يجب أن يحتوي منتقيك `#white-hat` على خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.position === 'absolute');
+```
+
+يجب أن يحتوي منتقيك `#white-hat` الخاصية `top` بقيمة `-140px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.top === '-140px');
+```
+
+يجب يحمل منتقيك `#white-hat` خاصية `left` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-hat')?.left === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md
new file mode 100644
index 00000000000..93fe896a7a5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158c.md
@@ -0,0 +1,116 @@
+---
+id: 60b69a66b6ddb80858c5158c
+title: الخطوة ٢٢
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+باستخدام منتقي `id`، أنشئ قاعدة لعنصرك `black-mask`. أعطيه `width` بقيمة `100%`، و `height` بقيمة `50px`، و `background-color` بقيمة `rgb(45, 31, 19)`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `#black-mask`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-mask'));
+```
+
+يجب أن يحتوي منتقيك `#black-mask` على خاصية `width` بقيمة `100%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.width === '100%');
+```
+
+يجب أن يحتوي منتقيك `#black-mask` على خاصية `height` بقيمة `50px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.height === '50px');
+```
+
+يجب أن يحتوي منتقي `#black-mask` على خاصية `background-color` بقيمة `rgb(45, 31, 19)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.backgroundColor === 'rgb(45, 31, 19)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md
new file mode 100644
index 00000000000..0b48360ea45
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158d.md
@@ -0,0 +1,114 @@
+---
+id: 60b69a66b6ddb80858c5158d
+title: الخطوة ٢٣
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+اعطي قناع `position` بقيمة `absolute`، و`top` و`left` بقيمة `0`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#black-mask` الخاص بك خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.position === 'absolute');
+```
+
+يجب أن يحتوي منتقي `#black-mask` الخاص بك على خاصية `top` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.top === '0px');
+```
+
+يجب أن يحتوي منتقي `#black-mask` الخاص بك على خاصية `left` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.left === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md
new file mode 100644
index 00000000000..16e27c06ebb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158e.md
@@ -0,0 +1,105 @@
+---
+id: 60b69a66b6ddb80858c5158e
+title: الخطوة ٢٤
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+للتأكد من أنك تستطيع رؤية الأقنعة (mask)، قم بإعطائه `z-index` بقيمة `1`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `#black-mask` على خاصية `z-index` بقيمة `1`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-mask')?.zIndex === '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md
new file mode 100644
index 00000000000..28cb4082af6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5158f.md
@@ -0,0 +1,126 @@
+---
+id: 60b69a66b6ddb80858c5158f
+title: خطوة ٢٥
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+باستعمال منتقي `id` اعطي عنصرك `gray-instrument` خاصية `width` بقيمة `15%`، و`height` بقيمة `40%`، و `background-color` بقيمة `rgb(167, 162, 117)`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `#gray-instrument`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument'));
+```
+
+يجب أن يحتوي منتقيك `#gray-instrument` على خاصية `width` بقيمة `15%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.width === '15%');
+```
+
+يجب أن يحتوي منتقيك `#gray-instrument` على خاصية `height` بقيمة `40%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.height === '40%');
+```
+
+يجب أن يحتوي منتقي `#gray-instrument` على خاصية `background-color` بقيمة `rgb(167, 162, 117)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.backgroundColor === 'rgb(167, 162, 117)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md
new file mode 100644
index 00000000000..bfe59713ab2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51590.md
@@ -0,0 +1,124 @@
+---
+id: 60b69a66b6ddb80858c51590
+title: الخطوة ٢٦
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+الآن انقله إلى مكانه باستخدام `position` بقيمة `absolute` و `top` بقيمة `50px` و `left` بقيمة `125px`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#gray-instrument` الخاص بك خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.position === 'absolute');
+```
+
+يجب أن يكون لمنتقي `#gray-instrument` الخاص بك خاصية `top` بقيمة `50px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.top === '50px');
+```
+
+يجب أن يكون لمنتقي `#gray-instrument` الخاص بك خاصية `left` بقيمة `125px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.left === '125px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md
new file mode 100644
index 00000000000..3788fb742d5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51591.md
@@ -0,0 +1,115 @@
+---
+id: 60b69a66b6ddb80858c51591
+title: الخطوة ٢٧
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+عيّن `z-index` إلى `1`.
+
+# --hints--
+
+يجب أن يحتوي منتقيك `#gray-instrument` على خاصية `z-index` بقيمة `1`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-instrument')?.zIndex === '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md
new file mode 100644
index 00000000000..8536287333d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51592.md
@@ -0,0 +1,136 @@
+---
+id: 60b69a66b6ddb80858c51592
+title: الخطوة ٢٨
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+استخدم منتقي الصف لإنشاء قاعدة لعناصر `black-dot`. عيّن `width` بقيمة `10px`, و`height` بقيمة `10px`, و`background-color` بقيمة `rgb(45, 31, 19)`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.black-dot`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.black-dot'));
+```
+
+يجب أن يحتوي منتقي `.black-dot` على خاصية `width` بقيمة `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.width === '10px');
+```
+
+يجب أن يكون لدى منتقي `.black-dot` خاصية `height` تم تعيينها إلى `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.height === '10px');
+```
+
+منتقي `.black-dot` يجب أن يكون لديه خاصية `background-color` بقيمة `rgb(45, 31, 19)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.backgroundColor === 'rgb(45, 31, 19)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md
new file mode 100644
index 00000000000..dfd0765f76b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51593.md
@@ -0,0 +1,125 @@
+---
+id: 60b69a66b6ddb80858c51593
+title: الخطوة ٢٩
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+هذه النِّقَاط هي مجرد مربعا قليلاً. امنح فئة `black-dot` خاصية `border-radius` بقيمة `50%` لتصليحا.
+
+# --hints--
+
+يجب أن يحتوي منتقيك `.black-dot` على خاصية `border-radius` بقيمة `50%`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopLeftRadius, '50%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderTopRightRadius, '50%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomRightRadius, '50%');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.black-dot')?.borderBottomLeftRadius, '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md
new file mode 100644
index 00000000000..48f18bcd2fb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51594.md
@@ -0,0 +1,135 @@
+---
+id: 60b69a66b6ddb80858c51594
+title: الخطوة ٣٠
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+نقل النِّقَاط إلى مكانها عن طريق تحديد `display` بقيمة `block`، و`margin` بقيمة `auto`، و`margin-top` بقيمة `65%`.
+
+# --hints--
+
+يجب أن يحتوي منتقيك `.black-dot` على خاصية `display` بقيمة `block`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.display === 'block');
+```
+
+يجب أن يكون لمنتقيك `.black-dot` خاصية `margin` بقيمة `auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.margin?.includes('auto'));
+```
+
+يجب أن يكون لمنتقيك `.black-dot` خاصية `margin-top` بقيمة `65%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.black-dot')?.marginTop === '65%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md
new file mode 100644
index 00000000000..ab844d1ad99
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51595.md
@@ -0,0 +1,146 @@
+---
+id: 60b69a66b6ddb80858c51595
+title: الخطوة ٣١
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+استخدم منتقي id لتصميم عنصرك `tan-table`. أعطيه `width` بقيمة `450px`، و`height` بقيمة `140px`، و`background-color` بقيمة `#D2691E`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `#tan-table`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#tan-table'));
+```
+
+يجب أن يحتوي لمنتقيك `#tan-table` على خاصية `width` بقيمة `450px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.width === '450px');
+```
+
+يجب أن يحتوي لمنتقيك `#tan-table` على خاصية `height` بقيمة `140px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.height === '140px');
+```
+
+يجب أن يحتوي لمنتقيك `#tan-table` على خاصية `background-color` بقيمة `#D2691E`.
+
+```js
+assert (new __helpers.CSSHelp(document).getStyle('#tan-table')?.backgroundColor === 'rgb(210, 105, 30)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md
new file mode 100644
index 00000000000..632b058c045
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51596.md
@@ -0,0 +1,144 @@
+---
+id: 60b69a66b6ddb80858c51596
+title: الخطوة ٣٢
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+أنقل الجدول (table) إلى مكانه بواسطة إعطائه `position` بقيمة `absolute` وخاصية `top` بقيمة `275px`, وخاصية `left` بقيمة `15px`.
+
+# --hints--
+
+يجب أن يحتوي منتقيك `#tan-table` على خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.position === 'absolute');
+```
+
+يجب أن يحتوي منتقي `#tan-table` على خاصية `top` تم تعيينها إلى `275px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.top === '275px');
+```
+
+يجب أن يحتوي منتقيك `#tan-table` على خاصية `left` تم تعيينها إلى `15px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.left === '15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md
new file mode 100644
index 00000000000..0b55e2e1d9b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51597.md
@@ -0,0 +1,135 @@
+---
+id: 60b69a66b6ddb80858c51597
+title: الخطوة 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+إعطاء الجدول `z-index` بقيمة `1`.
+
+# --hints--
+
+يجب أن يحتوي منتقيك `#tan-table` على خاصية `z-index` بقيمة `1`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#tan-table')?.zIndex === '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md
new file mode 100644
index 00000000000..f439d90daa6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51598.md
@@ -0,0 +1,142 @@
+---
+id: 60b69a66b6ddb80858c51598
+title: الخطوة ٣٤
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+بعد عنصرك `div#offwhite-character`، أضف `div` مع `id` بقيمة `black-character`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` جديد داخل عنصر `.characters`.
+
+```js
+assert(document.querySelectorAll('.characters > div')?.length === 2);
+```
+
+يجب أن يحتوي عنصر `div` الجديد على `id` تم تعينه إلى `black-character`.
+
+```js
+assert(document.querySelectorAll('.characters > div')?.[1]?.getAttribute('id') === 'black-character');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      --fcc-editable-region--
+
+      --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md
new file mode 100644
index 00000000000..4dbc3cf757b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c51599.md
@@ -0,0 +1,156 @@
+---
+id: 60b69a66b6ddb80858c51599
+title: الخطوة ٣٥
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+ضمن عنصر `black-character`، أضف ثلاث عناصر `div` مع قيم `id` التالية، بالترتيب: `black-hat`، و`gray-mask`، و`white-paper`.
+
+# --hints--
+
+يجب أن يكون لديك ثلاث عناصر `div` داخل عنصرك `#black-character`.
+
+```js
+assert(document.querySelectorAll('#black-character > div')?.length === 3);
+```
+
+يجب أن يحتوي أول عنصرك `div` على `id` يسمي `black-hat`.
+
+```js
+assert(document.querySelectorAll('#black-character > div')?.[0]?.getAttribute('id') === 'black-hat');
+```
+
+يجب أن يحتوي ثاني عنصرك `div` على `id` يسمي `gray-mask`.
+
+```js
+assert(document.querySelectorAll('#black-character > div')?.[1]?.getAttribute('id') === 'gray-mask');
+```
+
+يجب أن يحتوي ثالث عنصرك `div` على `id` يسمي `white-paper`.
+
+```js
+assert(document.querySelectorAll('#black-character > div')?.[2]?.getAttribute('id') === 'white-paper');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        --fcc-editable-region--
+
+        --fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md
new file mode 100644
index 00000000000..d44dee76131
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159a.md
@@ -0,0 +1,158 @@
+---
+id: 60b69a66b6ddb80858c5159a
+title: الخطوة ٣٦
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+إن القناع يحتاج إلى عيون. ضمن عنصر `gray-mask`، أضف عنصرين `div`. يجب أن يكون الأول `class` يسمى `eyes left`, وينبغي أن يكون الثاني `class` يسمى `eyes right`.
+
+# --hints--
+
+يجب أن يكون لديك عنصران `div` ضمن عنصرك `#gray-mask`.
+
+```js
+assert(document.querySelectorAll('#gray-mask > div')?.length === 2);
+```
+
+يجب أن يحتوي أول عنصرك `div` على `class` يسمي `eyes left`.
+
+```js
+const first = document.querySelectorAll('#gray-mask > div')?.[0];
+assert(first?.classList?.contains('eyes'));
+assert(first?.classList?.contains('left'));
+```
+
+يجب أن يحتوي ثاني عنصرك `div` على `class` يسمي `eyes right`.
+
+```js
+const second = document.querySelectorAll('#gray-mask > div')?.[1];
+assert(second?.classList?.contains('eyes'));
+assert(second?.classList?.contains('right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          --fcc-editable-region--
+
+          --fcc-editable-region--
+        </div>
+        <div id="white-paper"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md
new file mode 100644
index 00000000000..867d0b41792
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159b.md
@@ -0,0 +1,161 @@
+---
+id: 60b69a66b6ddb80858c5159b
+title: الخطوة ٣٧
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+حان الوقت لاستخدام بعض FontAwesome icons.
+
+يتم استخدام عنصر `i` للنص الاصطلاحي (idiomatic)، أو النص المنفصل عن محتوى النص "العادي". يمكن أن يكون هذا للنص _italic_، مثل المصطلحات العلمية، أو للرموز مثل تلك المقدمة من FontAwesome.
+
+ضمن عنصر `white-paper`، أضف أربع عناصر `i`. أعطيهم جميع `class` بقيمة `fas fa-music`.
+
+تحدد هذه الفئة المميزة كيفية تحميل رمز FontAwesome. يشير `fas` إلى فئة الأيقونات (FontAwesome Solid، هنا)، بينما يختار `fa-music` الرمز المحدد.
+
+# --hints--
+
+يجب أن يكون لديك أربع عناصر `i` جديدة داخل عنصرك `#white-paper`.
+
+```js
+assert(document.querySelectorAll('#white-paper > i')?.length === 4);
+```
+
+يجب أن تحتوي جميع عناصرك `i` على `class` بقيمة `fas fa-music`.
+
+```js
+const icons = document.querySelectorAll('#white-paper > i');
+for (const icon of icons) {
+  assert(icon.classList?.contains('fas'));
+  assert(icon.classList?.contains('fa-music'));
+};
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          --fcc-editable-region--
+
+          --fcc-editable-region--
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md
new file mode 100644
index 00000000000..d806f51083b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159c.md
@@ -0,0 +1,169 @@
+---
+id: 60b69a66b6ddb80858c5159c
+title: الخطوة ٣٨
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+استخدم منتقي `id` لإنشاء قاعدة لعنصرك `black-character`. عيّن `width` بقيمة `300px`, و`height` بقيمة `500px`, و`background-color` بقيمة `rgb(45, 31, 19)`.
+
+# --hints--
+
+يجب عليك استخدام منتقيك `#black-character`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-character'));
+```
+
+يجب أن يحتوي منتقيك `#black-character` على خاصية `width` بقيمة `300px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.width === '300px');
+```
+
+يجب أن يحتوي منتقيك `#black-character` على خاصية `height` بقيمة `500px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.height === '500px');
+```
+
+يجب أن يحتوي منتقيك `#black-character` على خاصية `background-color` بقيمة `rgb(45, 31, 19)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.backgroundColor === 'rgb(45, 31, 19)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md
new file mode 100644
index 00000000000..3831f708302
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159d.md
@@ -0,0 +1,167 @@
+---
+id: 60b69a66b6ddb80858c5159d
+title: الخطوة ٣٩
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+نقل عنصر `black-character` إلى المكان عن طريق تعيين `position` بقيمة `absolute`, و`top` بقيمة `30%`, و`left` بقيمة `59%`.
+
+# --hints--
+
+يجب أن يحتوي منتقيك `#black-character` على خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.position === 'absolute');
+```
+
+يجب أن يحتوي منتقيك `#black-character` على خاصية `top` بقيمة `30%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.top === '30%');
+```
+
+يجب أن يحتوي منتقيك `#black-character` على خاصية `left` بقيمة `59%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-character')?.left === '59%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md
new file mode 100644
index 00000000000..f3ed5752641
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159e.md
@@ -0,0 +1,178 @@
+---
+id: 60b69a66b6ddb80858c5159e
+title: الخطوة ٤٠
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+استخدم منتقي `id` لإنشاء قاعدة لعنصرك `black-hat`. أعطيه `width` قيمة `0`, و`height` قيمة `0`، و`border-style` قيمة `solid`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `#black-hat`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-hat'));
+```
+
+يجب أن يحتوي منتقيك `#black-hat` على خاصية `width` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.width === '0px');
+```
+
+يجب أن يحتوي منتقيك `#black-hat` على خاصية `height` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.height === '0px');
+```
+
+يجب أن يحتوي منتقيك `#black-hat` على خاصية `border-style` بقيمة `solid`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderStyle === 'solid');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md
new file mode 100644
index 00000000000..4a654fa4546
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c5159f.md
@@ -0,0 +1,183 @@
+---
+id: 60b69a66b6ddb80858c5159f
+title: الخطوة ٤٢
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+تماماً مثل `white-hat`، يجب عليك تصميم الحدود (style border) لعنصر `black-hat`. قم باعطائه `border-top-color`، و `border-right-color` و `border-bottom-color` بقيمة `transparent`. عيّن `border-left-color` بقيمة `rgb(45, 31, 19)`.
+
+# --hints--
+
+منتقي `#black-hat` الخاص بك يجب ان يحتوي على خاصية `border-top-color` بقيمة `transparent`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderTopColor === 'transparent');
+```
+
+يجب ان يحمل منتقي `#black-hat` الخاص بك خاصية `border-right-color` بقيمة `transparent`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderRightColor === 'transparent');
+```
+
+يجب ان يحمل منتقي `#black-hat` الخاص بك خاصية `border-bottom-color` بقيمة `transparent`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderBottomColor === 'transparent');
+```
+
+منتقي `#black-hat` يجب أن يكون لديه خاصية `border-left-color` بقيمة `rgb(45, 31, 19)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderLeftColor === 'rgb(45, 31, 19)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md
new file mode 100644
index 00000000000..37631632b6c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a0.md
@@ -0,0 +1,181 @@
+---
+id: 60b69a66b6ddb80858c515a0
+title: الخطوة ٤٣
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+الآن ضع عنصر `black-hat`. أعطيه `position` بقيمة `absolute`، و`top` بقيمة `-150px`، و `left` بقيمة `0`.
+
+# --hints--
+
+يجب أن يكون لمنتقيك `#black-hat` خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.position === 'absolute');
+```
+
+يجب يحمل منتقيك `#black-hat` الخاصية `top` بقيمة `-150px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.top === '-150px');
+```
+
+يجب أن يحتوي منتقيك `#black-hat` على خاصية `left` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.left === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md
new file mode 100644
index 00000000000..5bc1c049da1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a1.md
@@ -0,0 +1,192 @@
+---
+id: 60b69a66b6ddb80858c515a1
+title: الخطوة ٤٤
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+باستخدام منتقي `id`، صمم عنصر`gray-mask`. أعطيه `width` بقيمة `150px`، و `height` بقيمة `150px`، و `background-color` بقيمة `rgb(167, 162, 117)`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `#gray-mask`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-mask'));
+```
+
+يجب أن يحتوي منتقي `#gray-mask` على خاصية `width` بقيمة `150px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px');
+```
+
+يجب أن يحتوي منتقي `#gray-mask` على خاصية `height` بقيمة `150px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.height === '150px')
+```
+
+يجب أن يكون لدي منتقي `#gray-mask` خاصية `background-color` بقيمة `rgb(167, 162, 117)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.backgroundColor === 'rgb(167, 162, 117)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md
new file mode 100644
index 00000000000..115731fd669
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a2.md
@@ -0,0 +1,190 @@
+---
+id: 60b69a66b6ddb80858c515a2
+title: الخطوة ٤٥
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+ضع `gray-mask` عن طريق إعداد `position` بقيمة `absolute`، و`top` بقيمة `-10px`, و`left` بقيمة `70px`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#gray-mask` الخاص بك خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.position === 'absolute');
+```
+
+يجب أن يحتوي منتقي `#gray-mask` على خاصية `top` بقيمة `-10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.top === '-10px');
+```
+
+يجب أن يحتوي منتقي `#gray-mask` على خاصية `left` بقيمة `70px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#gray-mask')?.left === '70px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md
new file mode 100644
index 00000000000..7782647acf3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a3.md
@@ -0,0 +1,201 @@
+---
+id: 60b69a66b6ddb80858c515a3
+title: الخطوة ٤٦
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+باستخدام منتقي `id`، أنشئ قاعدة لعنصرك `white-paper`. عيّن `width` بقيمة `400px`, و`height` بقيمة `100px`, و`background-color` بقيمة `GhostWhite`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `#white-paper`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-paper'));
+```
+
+يجب أن يكون لمنتقيك `#white-paper` الخاصية `width` بقيمة `400px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.width === '400px');
+```
+
+يجب أن يكون لمنتقيك `#white-paper` الخاصية `height` بقيمة `100px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.height === '100px');
+```
+
+يجب يحمل منتقيك `#white-paper` خاصية `background-color` بقيمة `GhostWhite`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.backgroundColor === 'ghostwhite');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md
new file mode 100644
index 00000000000..fa4af4debf8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a4.md
@@ -0,0 +1,199 @@
+---
+id: 60b69a66b6ddb80858c515a4
+title: الخطوة ٤٧
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+اعطي `white-paper` خاصية `position` بقيمة `absolute`، و`top` بقيمة `250px`، و`left` بقيمة `-150px` لنقلها إلى مكانها.
+
+# --hints--
+
+يجب يحمل لمنتقي `#white-paper` الخاص بك خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.position === 'absolute');
+```
+
+يجب أن يكون لمنتقي `#white-paper` الخاص بك الخاصية `top` بقيمة `250px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.top === '250px');
+```
+
+يجب أن يكون لمنتقي `#white-paper` الخاص بك الخاصية `left` بقيمة `-150px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.left === '-150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md
new file mode 100644
index 00000000000..371a5b0d81a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a5.md
@@ -0,0 +1,190 @@
+---
+id: 60b69a66b6ddb80858c515a5
+title: الخطوة ٤٨
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+عيّن `z-index` في `white-paper` بقيمة `1`.
+
+# --hints--
+
+يجب أن يكون لدى منتقي `#white-paper` خاصية `z-index` تم تعيينها إلى `1`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#white-paper')?.zIndex === '1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md
new file mode 100644
index 00000000000..d7d496b5bc6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a6.md
@@ -0,0 +1,211 @@
+---
+id: 60b69a66b6ddb80858c515a6
+title: الخطوة ٤٩
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+يأتوا FrontAwesome icons مع أسلوبهم الخاص لتعريف الأيقونة. ومع ذلك، لا يزال بإمكانك ضبط الأسلوب بنفسك أيضاً، لتغيير أشياء مثل اللون والحجم. في الوقت الحالي، استخدم منتقي `class` لاستهداف أيقوناتك `fa-music`. عيّن `display` بقيمة `inline-block`, و`margin-top` بقيمة `8%`، و`margin-left` بقيمة `13%`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.fa-music`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.fa-music'));
+```
+
+يجب أن يحتوي منتقي `.fa-music` على خاصية `display` بقيمة `inline-block`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.display === 'inline-block');
+```
+
+يجب أن يكون لمنتقيك `.fa-music` خاصية `margin-top` بقيمة `8%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginTop === '8%');
+```
+
+يجب أن يكون لمنتقيك `.fa-music` خاصية `margin-left` بقيمة `13%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.fa-music')?.marginLeft === '13%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md
new file mode 100644
index 00000000000..d08a9830ffc
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a7.md
@@ -0,0 +1,217 @@
+---
+id: 60b69a66b6ddb80858c515a7
+title: الخطوة 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+تحت عنصر `black-character`، أضف `div` جديدين. ستكون هذه هي الوشاح. أعطِ كليهما `class` من `blue`. ثم أعطى الأول `id` قيمته `blue-left`, والثاني هو `id` قيمته `blue-right`.
+
+# --hints--
+
+يجب أن يكون لديك عنصران `div` جديدان ضمن عنصر `.characters` الخاص بك.
+
+```js
+assert(document.querySelectorAll('.characters > div')?.length === 4);
+```
+
+عنصرين `div` الجديدين الخاصين بك يجب أن يحتويا على `class` يسمي `blue`.
+
+```js
+const divs = document.querySelectorAll('.characters > div');
+assert(divs?.[2]?.classList?.contains('blue'))
+assert(divs?.[3]?.classList?.contains('blue'))
+```
+
+يجب أن يحمل أول `div` جديد `id` من `blue-left`.
+
+```js
+assert(document.querySelectorAll('.characters > div')?.[2]?.getAttribute('id') === 'blue-left');
+```
+
+يجب أن يحمل ثاني `div` جديد `id` من `blue-right`.
+
+```js
+assert(document.querySelectorAll('.characters > div')?.[3]?.getAttribute('id') === 'blue-right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      --fcc-editable-region--
+
+      --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md
new file mode 100644
index 00000000000..950585b5166
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a8.md
@@ -0,0 +1,207 @@
+---
+id: 60b69a66b6ddb80858c515a8
+title: الخطوة ٥١
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+استخدم منتقي `class` لاستهداف عناصر `blue` الجديدة. عيّن `background-color` إلى `#1E90FF`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.blue`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.blue'));
+```
+
+يجب أن يحتوي منتقي `.blue` على خاصية `background-color` بقيمة `#1E90FF`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.blue')?.backgroundColor === 'rgb(30, 144, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md
new file mode 100644
index 00000000000..c137889b569
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515a9.md
@@ -0,0 +1,217 @@
+---
+id: 60b69a66b6ddb80858c515a9
+title: الخطوة ٥٢
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+حدد عنصرك `blue-left` مع منتقى `id`. أعطيه `width` قيمته `500px` و`height` قيمته `300px`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `#blue-left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#blue-left'));
+```
+
+يجب أن يكون لمنتقيك `#blue-left` الخاصية `width` بقيمة `500px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.width === '500px');
+```
+
+يجب أن يكون لمنتقيك `#blue-left` الخاصية `height` بقيمة `300px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.height === '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md
new file mode 100644
index 00000000000..a4c22864bb1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515aa.md
@@ -0,0 +1,220 @@
+---
+id: 60b69a66b6ddb80858c515aa
+title: الخطوة ٥٣
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+الآن قم بتعيين `position` إلى `absolute` و `top` إلى `20%`و `left` إلى `20%`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#blue-left` الخاص بك خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.position === 'absolute');
+```
+
+يجب أن يكون لمنتقي `#blue-left` الخاص بك الخاصية `top` بقيمة `20%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.top === '20%');
+```
+
+يجب أن يكون لمنتقي `#blue-left` الخاص بك الخاصية `left` بقيمة `20%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#blue-left')?.left === '20%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md
new file mode 100644
index 00000000000..9c29cbcb420
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ab.md
@@ -0,0 +1,225 @@
+---
+id: 60b69a66b6ddb80858c515ab
+title: الخطوة ٥٤
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+بعد ذلك، استهدف عنصر `blue-right` الخاص بك بمنتقي `id`. تقم بتعيين `width` إلى `400px` و `height` إلى `300px`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `#blue-right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#blue-right'));
+```
+
+يجب أن يكون لمنتقي `#blue-right` الخاص بك الخاصية `width` بقيمة `400px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.width === '400px');
+```
+
+يجب أن يكون لمنتقي `#blue-right` الخاص بك الخاصية `height` بقيمة `300px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.height === '300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md
new file mode 100644
index 00000000000..7fa05a73271
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ac.md
@@ -0,0 +1,228 @@
+---
+id: 60b69a66b6ddb80858c515ac
+title: الخطوة ٥٥
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+اعطي `blue-right` المكان الصحيح مع `position` المحدد إلى `absolute` و `top` تم تعيينه إلى `50%`و `left` تم تعيينه إلى `40%`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#blue-right` الخاص بك خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.position === 'absolute');
+```
+
+يجب أن يكون لمنتقي `#blue-right` الخاص بك الخاصية `top` بقيمة `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.top === '50%');
+```
+
+يجب أن يكون لمنتقي `#blue-right` الخاص بك الخاصية `left` بقيمة `40%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#blue-right')?.left === '40%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md
new file mode 100644
index 00000000000..486227de7b4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ad.md
@@ -0,0 +1,225 @@
+---
+id: 60b69a66b6ddb80858c515ad
+title: الخطوة ٥٦
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+أسفل `blue` العناصر الخاصة بك، أضف `div` آخر. قم باعطائه `id` بقيمة `orange-character`.
+
+# --hints--
+
+يجب أن يكون لديك عنصر `div` جديد داخل عنصر `characters` الخاص بك.
+
+```js
+assert(document.querySelectorAll('.characters > div')?.length === 5);
+```
+
+يجب أن يحتوي عنصر `div` الجديد على `id` تم تعينه إلى `orange-character`.
+
+```js
+assert(document.querySelectorAll('.characters > div')?.[4]?.getAttribute('id') === 'orange-character');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      --fcc-editable-region--
+
+      --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md
new file mode 100644
index 00000000000..b079898238a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ae.md
@@ -0,0 +1,245 @@
+---
+id: 60b69a66b6ddb80858c515ae
+title: الخطوة ٥٧
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+ضمن عنصر `orange-character`، أضف أربع `div` عناصر. اعطي `id` قيم `black-round-hat`، و`eyes-div`, و `triangles`، و `guitar`، بالترتيب.
+
+# --hints--
+
+يجب أن يكون لديك أربع عناصر `div` جديدة داخل عنصرك `orange-character`.
+
+```js
+assert(document.querySelectorAll('#orange-character > div')?.length === 4);
+```
+
+يجب أن يحتوي أول عنصرك `div` على `id` يسمي `black-round-hat`.
+
+```js
+assert(document.querySelectorAll('#orange-character > div')?.[0]?.getAttribute('id') === 'black-round-hat');
+```
+
+يجب أن يحتوي ثاني عنصرك `div` على `id` يسمي `eyes-div`.
+
+```js
+assert(document.querySelectorAll('#orange-character > div')?.[1]?.getAttribute('id') === 'eyes-div');
+```
+
+يجب أن يحتوي ثالث عنصرك `div` على `id` يسمي `triangles`.
+
+```js
+assert(document.querySelectorAll('#orange-character > div')?.[2]?.getAttribute('id') === 'triangles');
+```
+
+يجب أن يحتوي عنصر `div` الجديد الرابع على `id` يسمى `guitar`.
+
+```js
+assert(document.querySelectorAll('#orange-character > div')?.[3]?.getAttribute('id') === 'guitar');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        --fcc-editable-region--
+
+        --fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md
new file mode 100644
index 00000000000..a89db457bdf
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515af.md
@@ -0,0 +1,240 @@
+---
+id: 60b69a66b6ddb80858c515af
+title: الخطوة ٥٨
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+يجب أن يحمل عنصر `eyes-div` ببعض العيون. أضف عنصرين `div` داخلهما. اعطي أول `class` أسم `eyes left`, إعطاء `class` الثانية من `eyes right`.
+
+# --hints--
+
+يجب أن يكون لديك عنصران `div` متداخلان في `eyes-div`.
+
+```js
+assert(document.querySelectorAll('#eyes-div > div')?.length === 2);
+```
+
+يجب أن يحمل أول `div` جديد `class` باسم `eyes left`.
+
+```js
+assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('eyes'));
+assert(document.querySelectorAll('#eyes-div > div')?.[0]?.classList?.contains('left'));
+```
+
+يجب أن يحمل ثاني `div` جديد `class` باسم `eyes right`.
+
+```js
+assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('eyes'));
+assert(document.querySelectorAll('#eyes-div > div')?.[1]?.classList?.contains('right'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          --fcc-editable-region--
+
+          --fcc-editable-region--
+        </div>
+        <div id="triangles"></div>
+        <div id="guitar"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md
new file mode 100644
index 00000000000..442e18b2913
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b0.md
@@ -0,0 +1,238 @@
+---
+id: 60b69a66b6ddb80858c515b0
+title: الخطوة ٥٩
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+ضمن عنصر `triangles`، ستحتاج إلى إضافة العناصر التي ستصبح مثلثاتك. أنشئ ثلاثين عناصر `div` وإعطاء كل منهم فئة `triangle`.
+
+# --hints--
+
+يجب أن يكون لديك 30 عناصر `div` داخل عنصرك `triangles`.
+
+```js
+assert(document.querySelectorAll('#triangles > div')?.length === 30);
+```
+
+يجب أن يكون جميع 30 عناصر `div` الجديد `class` باسم `triangle`.
+
+```js
+const divDivDiv = document.querySelectorAll('#triangles > div');
+for (const div of divDivDiv) {
+  assert(div?.classList?.contains('triangle'));
+}
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          --fcc-editable-region--
+
+          --fcc-editable-region--
+        </div>
+        <div id="guitar"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md
new file mode 100644
index 00000000000..f2434e66a8b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b1.md
@@ -0,0 +1,298 @@
+---
+id: 60b69a66b6ddb80858c515b1
+title: الخطوة ٦٠
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+داخل عنصر `guitar`، أنشئ ثلاث عناصر `div`. اعطي أول اثنين `class` باسم `guitar`. ثم أعطى الأول `id` أسم `guitar-left`, والثاني `id` اسم `guitar-right`. إضافة `id` إلى ثالث `div` باسم `guitar-neck`.
+
+أما الثالث `div` فلا ينبغي أن يحتوي على فئة `guitar`.
+
+# --hints--
+
+يجب أن يكون لديك ثلاث عناصر `div` جديدة داخل عنصرك `guitar`.
+
+```js
+assert(document.querySelectorAll('#guitar > div')?.length === 3);
+```
+
+يجب أن تحتوي أول `div` جديد على `class` باسم `guitar`.
+
+```js
+assert(document.querySelectorAll('#guitar > div')?.[0]?.classList?.contains('guitar'));
+```
+
+يجب أن يحتوي أول `div` جديد على `id` باسم `guitar-left`.
+
+```js
+assert(document.querySelectorAll('#guitar > div')?.[0]?.getAttribute('id') === 'guitar-left');
+```
+
+يجب أن تحتوي ثاني `div` جديد على `class` باسم `guitar`.
+
+```js
+assert(document.querySelectorAll('#guitar > div')?.[1]?.classList?.contains('guitar'));
+```
+
+يجب أن يحتوي ثاني `div` جديد على `id` باسم `guitar-right`.
+
+```js
+assert(document.querySelectorAll('#guitar > div')?.[1]?.getAttribute('id') === 'guitar-right');
+```
+
+يجب أن يحتوي ثالث `div` جديد على `id` باسم `guitar-neck`.
+
+```js
+assert(document.querySelectorAll('#guitar > div')?.[2]?.getAttribute('id') === 'guitar-neck');
+```
+
+لا ينبغي أن تعطي الفئة الجديدة الثالثة `div` يحمل `class` باسم `guitar`.
+
+```js
+assert.notExists(document.querySelector('#guitar > #guitar-neck.guitar'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          --fcc-editable-region--
+
+          --fcc-editable-region--
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md
new file mode 100644
index 00000000000..c0a3a081099
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b2.md
@@ -0,0 +1,281 @@
+---
+id: 60b69a66b6ddb80858c515b2
+title: الخطوة ٦١
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+استخدم أيقونة FontAwesome الأخرى في `guitar` الخاص بك. داخل كل من عنصرين `guitar-left` و`guitar-right`، أضف عنصر `i` وأعطيه `class` باسم `fas fa-bars`.
+
+# --hints--
+
+ضمن عنصرك `guitar-left`، يجب عليك إضافة عنصر `i`.
+
+```js
+assert(document.querySelectorAll('#guitar-left > i')?.length === 1);
+```
+
+داخل عنصرك `guitar-right`، يجب عليك إضافة عنصر `i`.
+
+```js
+assert(document.querySelectorAll('#guitar-right > i')?.length === 1);
+```
+
+يجب أن يحتوي العنصران الجديدان `i` على `class` باسم `fas fa-bars`.
+
+```js
+assert(document.querySelector('#guitar-left > i')?.classList?.contains('fas'));
+assert(document.querySelector('#guitar-left > i')?.classList?.contains('fa-bars'));
+assert(document.querySelector('#guitar-right > i')?.classList?.contains('fas'));
+assert(document.querySelector('#guitar-right > i')?.classList?.contains('fa-bars'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          --fcc-editable-region--
+          <div class="guitar" id="guitar-left">
+
+          </div>
+          <div class="guitar" id="guitar-right">
+
+          </div>
+          --fcc-editable-region--
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md
new file mode 100644
index 00000000000..b854e1feb13
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b3.md
@@ -0,0 +1,287 @@
+---
+id: 60b69a66b6ddb80858c515b3
+title: الخطوة ٦٢
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+حدد عنصرك `orange-character` مع المنتقي `id`. أعطيه `width` بقيمة `250px`، و `height` بقيمة `550px`، و `background-color` بقيمة `rgb(240, 78, 42)`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `#orange-character`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#orange-character'));
+```
+
+يجب أن يحتوي منتقيك `#orange-character` على خاصية `width` بقيمة `250px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.width === '250px');
+```
+
+يجب أن يحتوي منتقي `#orange-character` على خاصية `height` بقيمة `550px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.height === '550px');
+```
+
+يجب أن يكون لدى منتقي `#orange-character` خاصية `background-color` بقيمة `rgb(240, 78, 42)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.backgroundColor === 'rgb(240, 78, 42)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md
new file mode 100644
index 00000000000..6ee623cbe95
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b4.md
@@ -0,0 +1,285 @@
+---
+id: 60b69a66b6ddb80858c515b4
+title: الخطوة ٦٣
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+اعطي `orange-character` خاصية `position` بقيمة `absolute`، و`top` بقيمة `25%`، و`left` بقيمة `40%`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#orange-character` الخاص بك خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.position === 'absolute');
+```
+
+يجب أن يحتوي منتقي `#orange-character` على خاصية `top` بقيمة `25%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.top === '25%');
+```
+
+يجب أن يحتوي منتقي `#orange-character` على خاصية `left` بقيمة `40%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#orange-character')?.left === '40%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md
new file mode 100644
index 00000000000..c3b1f1243ec
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b5.md
@@ -0,0 +1,296 @@
+---
+id: 60b69a66b6ddb80858c515b5
+title: الخطوة ٦٤
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+قم تصميم عنصرك `black-round-hat` باستخدام المنتقي `id`. عيّن `width` بقيمة `180px`, و`height` بقيمة `150px`, و`background-color` بقيمة `rgb(45, 31, 19)`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `#black-round-hat`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat'));
+```
+
+يجب أن يحتوي منتقي `#black-round-hat` على خاصية `width` بقيمة `180px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.width === '180px');
+```
+
+يجب أن يحتوي منتقي `#black-round-hat` على خاصية `height` بقيمة `150px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.height === '150px');
+```
+
+يجب أن يكون لدى منتقي `#black-round-hat` خاصية `background-color` بقيمة `rgb(45, 31, 19)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.backgroundColor === 'rgb(45, 31, 19)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md
new file mode 100644
index 00000000000..7a57f52e6ca
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b6.md
@@ -0,0 +1,282 @@
+---
+id: 60b69a66b6ddb80858c515b6
+title: الخطوة ٦٥
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+يجب أن تكون `black-round-hat` دائرة. أعطيه `border-radius` بقيمة `50%` لإصلاح هذا.
+
+# --hints--
+
+يجب أن يكون لمنتقيك `#black-round-hat` خاصية `border-radius` بقيمة `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.borderRadius === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md
new file mode 100644
index 00000000000..17cee0abc0f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b7.md
@@ -0,0 +1,295 @@
+---
+id: 60b69a66b6ddb80858c515b7
+title: الخطوة ٦٦
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+قم بنقل `black-round-hat` إلى مكانها مع `position` بقيمة `absolute`، و `top` بقيمة `-100px`، و `left` بقيمة `5px`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#black-round-hat` الخاص بك خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.position === 'absolute');
+```
+
+يجب أن يحتوي منتقي `#black-round-hat` على خاصية `top` بقيمة `-100px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.top === '-100px');
+```
+
+يجب أن يحتوي منتقي `#black-round-hat` على خاصية `left` بقيمة `5px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.left === '5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md
new file mode 100644
index 00000000000..425a1b5ea38
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b8.md
@@ -0,0 +1,286 @@
+---
+id: 60b69a66b6ddb80858c515b8
+title: الخطوة ٦٧
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+ضع `black-round-hat` على الطبقة الصحيحة مع `z-index` بقيمة `-1`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `#black-round-hat` على خاصية `z-index` بقيمة `-1`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-round-hat')?.zIndex === '-1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md
new file mode 100644
index 00000000000..dde659870f6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515b9.md
@@ -0,0 +1,301 @@
+---
+id: 60b69a66b6ddb80858c515b9
+title: الخطوة ٦٨
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+استخدم منتقي `id` لإنشاء قاعدة لـ `eyes-div` الخاص بك. عيّن `width` إلى `180px` و `height` إلى `50px`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `#eyes-div`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#eyes-div'));
+```
+
+يجب أن يحتوي منتقي `#eyes-div` على خاصية `width` بقيمة `180px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.width === '180px');
+```
+
+يجب أن يكون لمنتقي `#eyes-div` الخاص بك الخاصية `height` بقيمة `50px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.height === '50px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md
new file mode 100644
index 00000000000..f0d3c08b471
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515ba.md
@@ -0,0 +1,304 @@
+---
+id: 60b69a66b6ddb80858c515ba
+title: الخطوة ٦٩
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+الآن نقل `eyes-div` إلى الموضع `position` بقيمة `absolute`، و`top` بقيمة `-40px`، و `left` بقيمة `20px`.
+
+# --hints--
+
+يجب أن يكون لمنتقيك `#eyes-div` خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.position === 'absolute');
+```
+
+يجب أن يحتوي منتقيك `#eyes-div` على خاصية `top` بقيمة `-40px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.top === '-40px');
+```
+
+يجب أن يكون لمنتقيك `#eyes-div` الخاصية `left` بقيمة `20px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.left === '20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md
new file mode 100644
index 00000000000..b254ea78874
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bc.md
@@ -0,0 +1,295 @@
+---
+id: 60b69a66b6ddb80858c515bc
+title: الخطوة ٧٠
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+اعطي `eyes-div` الـ `z-index` بقيمة `3`.
+
+# --hints--
+
+يجب أن تكون خاصية `z-index` لمنتقي `#eyes-div` الخاص بك بقيمة `3`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#eyes-div')?.zIndex === '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md
new file mode 100644
index 00000000000..aef6cb9cdf1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bd.md
@@ -0,0 +1,348 @@
+---
+id: 60b69a66b6ddb80858c515bd
+title: الخطوة ٧٩
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+الآن استخدم منتقي `class` لاستهداف `guitar`. سيؤدي هذا إلى تصميم "نصفي" جيتارك. قم بتعيين `width` إلى `150px`، و `height` إلى `120px` و `background-color` إلى `Goldenrod` و `border-radius` إلى `50%`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.guitar`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.guitar'));
+```
+
+يجب أن يكون لمنتقي `.guitar` الخاص بك الخاصية `width` بقيمة `150px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.width === '150px');
+```
+
+يجب أن يكون لمنتقي `.guitar` الخاص بك الخاصية `height` بقيمة `120px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.height === '120px');
+```
+
+يجب أن يكون لمنتقي `.guitar` الخاص بك خاصية `background-color` محددة إلى `Goldenrod`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.backgroundColor === 'goldenrod');
+```
+
+يجب أن يكون لمنتقي `.guitar` الخاص بك الخاصية `border-radius` بقيمة `50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.guitar')?.borderRadius === '50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold; /* yellow */
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+#guitar {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 120px;
+  left: 0px;
+  z-index: 3;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md
new file mode 100644
index 00000000000..43d6b3192ef
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515be.md
@@ -0,0 +1,337 @@
+---
+id: 60b69a66b6ddb80858c515be
+title: الخطوة ٨٠
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+قم بتحديد الـ `id` بقيمة `guitar-left`، وتعيين `position` إلى `absolute` و `left` إلى `0px`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `#guitar-left` جديد.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar-left'));
+```
+
+يجب أن يكون لمنتقي `#guitar-left` الخاص بك خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar-left')?.position === 'absolute');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold; /* yellow */
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+#guitar {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 120px;
+  left: 0px;
+  z-index: 3;
+}
+
+.guitar {
+  width: 150px;
+  height: 120px;
+  background-color: Goldenrod;
+  border-radius: 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md
new file mode 100644
index 00000000000..60bf5ad0746
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515bf.md
@@ -0,0 +1,348 @@
+---
+id: 60b69a66b6ddb80858c515bf
+title: الخطوة ٨١
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+فم باختيار الـ `id` بقيمة `guitar-right`، و ايضا حدد `position` إلى `absolute`. هذه المرة، عيّن `left` إلى `100px`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `#guitar-right` جديد.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar-right'));
+```
+
+يجب أن يكون لمنتقي `#guitar-right` الخاص بك خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.position === 'absolute');
+```
+
+يجب أن يكون لدى منتقي `#guitar-right` خاصية `left` تم تعيينها إلى `100px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar-right')?.left === '100px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold; /* yellow */
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+#guitar {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 120px;
+  left: 0px;
+  z-index: 3;
+}
+
+.guitar {
+  width: 150px;
+  height: 120px;
+  background-color: Goldenrod;
+  border-radius: 50%;
+}
+
+#guitar-left {
+  position: absolute;
+  left: 0px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md
new file mode 100644
index 00000000000..8a018833f3e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c0.md
@@ -0,0 +1,359 @@
+---
+id: 60b69a66b6ddb80858c515c0
+title: الخطوة ٨٢
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+الآن تحتاج إلى نقل أيقونات الشريط (bar icons) إلى مكانها. قم بإنشاء منتقي `class` لـ class الـ `fa-bars`. قم بتعيين `display` إلى `block`و `margin-top` إلى `30%`، و `margin-left` إلى `40%`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.fa-bars`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.fa-bars'));
+```
+
+يجب أن يحتوي منتقي `.fa-bars` على خاصية `display` بقيمة `block`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.display === 'block');
+```
+
+يجب أن يكون لمنتقي `.fa-bars` الخاص بك خاصية `margin-top` بقيمة `30%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginTop === '30%');
+```
+
+يجب أن يكون لمنتقي `.fa-bars` الخاص بك خاصية `margin-left` بقيمة `40%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.fa-bars')?.marginLeft === '40%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold; /* yellow */
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+#guitar {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 120px;
+  left: 0px;
+  z-index: 3;
+}
+
+.guitar {
+  width: 150px;
+  height: 120px;
+  background-color: Goldenrod;
+  border-radius: 50%;
+}
+
+#guitar-left {
+  position: absolute;
+  left: 0px;
+}
+
+#guitar-right {
+  position: absolute;
+  left: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md
new file mode 100644
index 00000000000..d5900c0f840
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c1.md
@@ -0,0 +1,365 @@
+---
+id: 60b69a66b6ddb80858c515c1
+title: الخطوة ٨٣
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+استخدم منتقي `id` لإنشاء قاعدة `guitar-neck`. قم بتعيين `width` إلى `200px`، و `height` إلى `30px`، و `background-color` إلى `#D2691E`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `#guitar-neck`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck'));
+```
+
+يجب أن يكون لدى منتقي `#guitar-neck` خاصية `width` تم تعيينها إلى `200px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.width === '200px');
+```
+
+يجب أن يكون لدى منتقي `#guitar-neck` خاصية `height` تم تعيينها إلى `30px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.height === '30px');
+```
+
+يجب أن يكون لمنتقي `#guitar-neck` الخاص بك خاصية `background-color` بقيمة `#D2691E`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.backgroundColor === 'rgb(210, 105, 30)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold; /* yellow */
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+#guitar {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 120px;
+  left: 0px;
+  z-index: 3;
+}
+
+.guitar {
+  width: 150px;
+  height: 120px;
+  background-color: Goldenrod;
+  border-radius: 50%;
+}
+
+#guitar-left {
+  position: absolute;
+  left: 0px;
+}
+
+#guitar-right {
+  position: absolute;
+  left: 100px;
+}
+
+.fa-bars {
+  display: block;
+  margin-top: 30%;
+  margin-left: 40%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md
new file mode 100644
index 00000000000..53d2d0591f9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c2.md
@@ -0,0 +1,363 @@
+---
+id: 60b69a66b6ddb80858c515c2
+title: الخطوة ٨٤
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+الآن انقل `guitar-neck` باستخدام `position` بقيمة `absolute` و `top` بقيمة `45px`، و `left` بقيمة `200px`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#guitar-neck` الخاص بك خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.position === 'absolute');
+```
+
+يجب أن يكون لدى منتقي `#guitar-neck` خاصية `top` تم تعيينها إلى `45px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.top === '45px');
+```
+
+يجب أن يكون لدى منتقي `#guitar-neck` خاصية `left` تم تعيينها إلى `200px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.left === '200px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold; /* yellow */
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+#guitar {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 120px;
+  left: 0px;
+  z-index: 3;
+}
+
+.guitar {
+  width: 150px;
+  height: 120px;
+  background-color: Goldenrod;
+  border-radius: 50%;
+}
+
+#guitar-left {
+  position: absolute;
+  left: 0px;
+}
+
+#guitar-right {
+  position: absolute;
+  left: 100px;
+}
+
+.fa-bars {
+  display: block;
+  margin-top: 30%;
+  margin-left: 40%;
+}
+
+#guitar-neck {
+  width: 200px;
+  height: 30px;
+  background-color: #D2691E;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md
new file mode 100644
index 00000000000..8e2b8d21533
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c3.md
@@ -0,0 +1,354 @@
+---
+id: 60b69a66b6ddb80858c515c3
+title: الخطوة ٨٥
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+اعطي `guitar-neck` الـ `z-index` بقيمة `3`.
+
+# --hints--
+
+يجب أن يكون لدى منتقي `#guitar-neck` خاصية `z-index` تم تعيينها إلى `3`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar-neck')?.zIndex === '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold; /* yellow */
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+#guitar {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 120px;
+  left: 0px;
+  z-index: 3;
+}
+
+.guitar {
+  width: 150px;
+  height: 120px;
+  background-color: Goldenrod;
+  border-radius: 50%;
+}
+
+#guitar-left {
+  position: absolute;
+  left: 0px;
+}
+
+#guitar-right {
+  position: absolute;
+  left: 100px;
+}
+
+.fa-bars {
+  display: block;
+  margin-top: 30%;
+  margin-left: 40%;
+}
+
+#guitar-neck {
+  width: 200px;
+  height: 30px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 45px;
+  left: 200px;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md
new file mode 100644
index 00000000000..5aa85ded4eb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c4.md
@@ -0,0 +1,381 @@
+---
+id: 60b69a66b6ddb80858c515c4
+title: الخطوة ٨٦
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+حان الوقت لتصميم عناصر `eyes` الخاصة بك. استخدم منتقي `class` لتعيين `width` إلى `35px`، و `height` إلى `20px` و `background-color` إلى `#8B4513`، و `border-radius` إلى `20px 50%`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.eyes`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.eyes'));
+```
+
+يجب أن يكون لمنتقي `.eyes` الخاص بك الخاصية `width` بقيمة `35px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.width === '35px');
+```
+
+يجب أن يكون لمنتقي `.eyes` الخاص بك الخاصية `height` بقيمة `20px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.height === '20px');
+```
+
+يجب أن يحتوي منتقي `.eyes` على خاصية `background-color` بقيمة `#8B4513`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.backgroundColor === 'rgb(139, 69, 19)');
+```
+
+يجب أن يكون لمنتقي `.eyes` الخاص بك الخاصية `border-radius` بقيمة `20px 50%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.eyes')?.borderRadius === '20px 50%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold; /* yellow */
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+#guitar {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 120px;
+  left: 0px;
+  z-index: 3;
+}
+
+.guitar {
+  width: 150px;
+  height: 120px;
+  background-color: Goldenrod;
+  border-radius: 50%;
+}
+
+#guitar-left {
+  position: absolute;
+  left: 0px;
+}
+
+#guitar-right {
+  position: absolute;
+  left: 100px;
+}
+
+.fa-bars {
+  display: block;
+  margin-top: 30%;
+  margin-left: 40%;
+}
+
+#guitar-neck {
+  width: 200px;
+  height: 30px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 45px;
+  left: 200px;
+  z-index: 3;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md
new file mode 100644
index 00000000000..8b497f83872
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c5.md
@@ -0,0 +1,382 @@
+---
+id: 60b69a66b6ddb80858c515c5
+title: خطوة ٨٧
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+استهدف الـ `class` بقيمة `right` وعين `position` إلى `absolute` و `top` إلى `15px`و `right` إلى `30px`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.right` جديد.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.right'));
+```
+
+يجب أن يكون لمنتقي `.right` الخاص بك الخاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.right')?.position === 'absolute');
+```
+
+يجب أن يكون لمنتقي `.right` الخاص بك الخاصية `top` بقيمة `15px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.right')?.top === '15px');
+```
+
+يجب أن يكون لمنتقي `.right` الخاص بك الخاصية `right` بقيمة `30px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.right')?.right === '30px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold; /* yellow */
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+#guitar {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 120px;
+  left: 0px;
+  z-index: 3;
+}
+
+.guitar {
+  width: 150px;
+  height: 120px;
+  background-color: Goldenrod;
+  border-radius: 50%;
+}
+
+#guitar-left {
+  position: absolute;
+  left: 0px;
+}
+
+#guitar-right {
+  position: absolute;
+  left: 100px;
+}
+
+.fa-bars {
+  display: block;
+  margin-top: 30%;
+  margin-left: 40%;
+}
+
+#guitar-neck {
+  width: 200px;
+  height: 30px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 45px;
+  left: 200px;
+  z-index: 3;
+}
+
+.eyes {
+  width: 35px;
+  height: 20px;
+  background-color: #8B4513;
+  border-radius: 20px 50%;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md
new file mode 100644
index 00000000000..b8b84e37660
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c6.md
@@ -0,0 +1,388 @@
+---
+id: 60b69a66b6ddb80858c515c6
+title: الخطوة ٨٨
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+للـ `class` بقيمة `left` قم بإنشاء المنتقي وتعيين `position` إلى `absolute` و `top` إلى `15px` و `left` إلى `30px`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.left` جديد.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left'));
+```
+
+يجب أن يكون لمنتقي `.left` الخاص بك الخاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left')?.position === 'absolute');
+```
+
+يجب أن يكون لمنتقي `.left` الخاص بك الخاصية `top` بقيمة `15px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left')?.top === '15px');
+```
+
+يجب أن يكون لمنتقي `.left` الخاص بك الخاصية `left` بقيمة `30px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.left')?.left === '30px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+    width: 250px;
+    height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold; /* yellow */
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+#guitar {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 120px;
+  left: 0px;
+  z-index: 3;
+}
+
+.guitar {
+width: 150px;
+height: 120px;
+background-color: Goldenrod;
+border-radius: 50%;
+}
+
+#guitar-left {
+  position: absolute;
+  left: 0px;
+}
+
+#guitar-right {
+  position: absolute;
+  left: 100px;
+}
+
+.fa-bars {
+  display: block;
+  margin-top: 30%;
+  margin-left: 40%;
+}
+
+#guitar-neck {
+  width: 200px;
+  height: 30px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 45px;
+  left: 200px;
+  z-index: 3;
+}
+
+.eyes {
+  width: 35px;
+  height: 20px;
+  background-color: #8B4513;
+  border-radius: 20px 50%;
+}
+
+.right {
+  position: absolute;
+  top: 15px;
+  right: 30px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md
new file mode 100644
index 00000000000..af2f7317979
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b69a66b6ddb80858c515c7.md
@@ -0,0 +1,739 @@
+---
+id: 60b69a66b6ddb80858c515c7
+title: الخطوة ٨٩
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+خطوة واحدة أخيرة. أيقونات FontAwesome صغيرة جدا. استهدفهم جميعا باستخدام منتقي `class` لـ `fas`، وقم بتعيين `font-size` إلى `30px`.
+
+بهذا اكتمل رسم بيكاسو الخاص بك!
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.fas`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.fas'));
+```
+
+يجب أن يكون لمنتقي `.fas` الخاص بك خاصية `font-size` بقيمة `30px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.fas')?.fontSize === '30px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold; /* yellow */
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+#guitar {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 120px;
+  left: 0px;
+  z-index: 3;
+}
+
+.guitar {
+  width: 150px;
+  height: 120px;
+  background-color: Goldenrod;
+  border-radius: 50%;
+}
+
+#guitar-left {
+  position: absolute;
+  left: 0px;
+}
+
+#guitar-right {
+  position: absolute;
+  left: 100px;
+}
+
+.fa-bars {
+  display: block;
+  margin-top: 30%;
+  margin-left: 40%;
+}
+
+#guitar-neck {
+  width: 200px;
+  height: 30px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 45px;
+  left: 200px;
+  z-index: 3;
+}
+
+.eyes {
+  width: 35px;
+  height: 20px;
+  background-color: #8B4513;
+  border-radius: 20px 50%;
+}
+
+.right {
+  position: absolute;
+  top: 15px;
+  right: 30px;
+}
+
+.left {
+  position: absolute;
+  top: 15px;
+  left: 30px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+        <div class="characters">
+          <div id="offwhite-character">
+            <div id="white-hat"></div>
+            <div id="black-mask">
+              <div class="eyes left"></div>
+              <div class="eyes right"></div>
+            </div>
+            <div id="gray-instrument">
+              <div class="black-dot"></div>
+              <div class="black-dot"></div>
+              <div class="black-dot"></div>
+              <div class="black-dot"></div>
+              <div class="black-dot"></div>
+            </div>
+            <div id="tan-table"></div>
+          </div>
+          <div id="black-character">
+            <div id="black-hat"></div>
+            <div id="gray-mask">
+              <div class="eyes left"></div>
+              <div class="eyes right"></div>
+            </div>
+            <div id="white-paper">
+              <i class="fas fa-music"></i>
+              <i class="fas fa-music"></i>
+              <i class="fas fa-music"></i>
+              <i class="fas fa-music"></i>
+            </div>
+          </div>
+          <div class="blue" id="blue-left"></div>
+          <div class="blue" id="blue-right"></div>
+          <div id="orange-character">
+            <div id="black-round-hat"></div>
+            <div id="eyes-div">
+              <div class="eyes left"></div>
+              <div class="eyes right"></div>
+            </div>
+            <div id="triangles">
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+              <div class="triangle"></div>
+            </div>
+            <div id="guitar">
+              <div class="guitar" id="guitar-left">
+                <i class="fas fa-bars"></i>
+              </div>
+              <div class="guitar" id="guitar-right">
+                <i class="fas fa-bars"></i>
+              </div>
+              <div id="guitar-neck"></div>
+            </div>
+          </div>
+        </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold; /* yellow */
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+#guitar {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 120px;
+  left: 0px;
+  z-index: 3;
+}
+
+.guitar {
+  width: 150px;
+  height: 120px;
+  background-color: Goldenrod;
+  border-radius: 50%;
+}
+
+#guitar-left {
+  position: absolute;
+  left: 0px;
+}
+
+#guitar-right {
+  position: absolute;
+  left: 100px;
+}
+
+.fa-bars {
+  display: block;
+  margin-top: 30%;
+  margin-left: 40%;
+}
+
+#guitar-neck {
+  width: 200px;
+  height: 30px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 45px;
+  left: 200px;
+  z-index: 3;
+}
+
+.eyes {
+  width: 35px;
+  height: 20px;
+  background-color: #8B4513;
+  border-radius: 20px 50%;
+}
+
+.right {
+  position: absolute;
+  top: 15px;
+  right: 30px;
+}
+
+.left {
+  position: absolute;
+  top: 15px;
+  left: 30px;
+}
+
+.fas {
+  font-size: 30px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md
new file mode 100644
index 00000000000..93fcb9e1e91
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60b80da8676fb3227967a731.md
@@ -0,0 +1,71 @@
+---
+id: 60b80da8676fb3227967a731
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+امضي قدما واربط مِلَفّ CSS الخاص بك الآن، حتى وإن لم تكتب أي CSS حتى الآن.
+
+قم بإضافة عنصر `link` مع `rel` من `stylesheet` و `href` من `styles.css`.
+
+# --hints--
+
+
+الكود الخاص بك يجب أن يحتوي على عنصر `link`.
+
+```js
+assert.match(code, /<link/)
+```
+
+الكود الخاص بك يجب أن يحتوي على عنصر `link` مغلق ذاتيا.
+
+```js
+assert(document.querySelectorAll('link').length === 1);
+```
+
+عنصر `link` الخاص بك يجب أن يكون داخل عنصر `head` الخاص بك.
+
+```js
+assert.exists(document.querySelector('head > link'));
+```
+
+عنصر `link` الخاص بك يجب أن يحتوي على سمة `rel` بقيمة `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+عنصر `link` الخاص بك يجب أن يحتوي على سمة `href` بقيمة `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    --fcc-editable-region--
+
+    --fcc-editable-region--
+  </head>
+  <body>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md
new file mode 100644
index 00000000000..472c9816b37
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba890832b4940f24d1936b.md
@@ -0,0 +1,312 @@
+---
+id: 60ba890832b4940f24d1936b
+title: الخطوة ٧٥
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+ضبط تخطيط عناصر `triangle` مع `display` من `inline-block`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.triangle` على خاصية `display` بقيمة `inline-block`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.display === 'inline-block');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md
new file mode 100644
index 00000000000..2476b9b5b2b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89123a445e0f5c9e4022.md
@@ -0,0 +1,326 @@
+---
+id: 60ba89123a445e0f5c9e4022
+title: الخطوة ٧٤
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+أعط العناصر `triangle` اللون الصحيح. عيّن `border-top-color`، و`border-bottom-color`, و`border-left-color` إلى `transparent`. عيّن `border-right-color` إلى `Gold`.
+
+# --hints--
+
+يجب ان يحمل منتقي `.triangle` الخاص بك خاصية `border-top-color` بقيمة `transparent`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderTopColor === 'transparent');
+```
+
+يجب ان يحمل منتقي `.triangle` الخاص بك خاصية `border-bottom-color` بقيمة `transparent`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderBottomColor === 'transparent');
+```
+
+يجب ان يحمل منتقي `.triangle` الخاص بك خاصية `border-left-color` بقيمة `transparent`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderLeftColor === 'transparent');
+```
+
+يجب ان يحمل منتقي `.triangle` الخاص بك خاصية `border-right-color` بقيمة `Gold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderRightColor === 'gold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md
new file mode 100644
index 00000000000..92c5b370bb1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8913f1704c0f7a8906b8.md
@@ -0,0 +1,312 @@
+---
+id: 60ba8913f1704c0f7a8906b8
+title: الخطوة ٧٣
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+صمم حدود عناصرك `triangle`. عيّن `border-style` بقيمة `solid` و`border-width` بقيمة `42px 45px 45px 0`.
+
+# --hints--
+
+يجب أن يحتوي منتقيك `.triangle` على خاصية `border-style` بقيمة `solid`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderStyle === 'solid');
+```
+
+يجب أن يحتوي منتقيك `.triangle` على خاصية `border-width` بقيمة `42px 45px 45px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.borderWidth === '42px 45px 45px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md
new file mode 100644
index 00000000000..a98d8470b0b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba89146b25080f99ab54ad.md
@@ -0,0 +1,315 @@
+---
+id: 60ba89146b25080f99ab54ad
+title: الخطوة ٧٢
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+أنشئ منتقي `class` لعناصر `triangle` الخاصة بك. عيّن `width` إلى `0` و `height` إلى `0`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.triangle` جديد.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.triangle'));
+```
+
+يجب أن يكون لمنتقي `.triangle` الخاص بك الخاصية `width` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.width === '0px');
+```
+
+يجب أن يكون لمنتقي `.triangle` الخاص بك الخاصية `height` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.triangle')?.height === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md
new file mode 100644
index 00000000000..afa89f5c5f3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba8914bab51f0fb8228e9c.md
@@ -0,0 +1,310 @@
+---
+id: 60ba8914bab51f0fb8228e9c
+title: الخطوة ٧١
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+استهدف عنصرك `triangles` بمنتقي `id`. عيّن `width` إلى `250px` و `height` إلى `550px`.
+
+# --hints--
+
+يجب عليك إضافة منتقي `#triangles`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#triangles'));
+```
+
+يجب أن يكون لمنتقيك `#triangles` على خاصية `width` بقيمة `250px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.width === '250px');
+```
+
+يجب أن يكون لمنتقيك `#triangles` على خاصية `height` بقيمة `550px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#triangles')?.height === '550px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md
new file mode 100644
index 00000000000..0100bb8bad4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba929345ab0714a3743655.md
@@ -0,0 +1,327 @@
+---
+id: 60ba929345ab0714a3743655
+title: الخطوة ٧٦
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+الآن استخدم منتقي `id` بقيمة `guitar`. عيّن `width` بقيمة `100%`, و `height` بقيمة `100px`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `#guitar`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar'));
+```
+
+يجب أن يحتوي منتقيك `#guitar` على خاصية `width` بقيمة `100%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.width === '100%');
+```
+
+يجب أن يحتوي منتقيك `#guitar` على خاصية `height` بقيمة `100px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.height === '100px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md
new file mode 100644
index 00000000000..5e09397c32e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba9296d4d6b414c1b10995.md
@@ -0,0 +1,330 @@
+---
+id: 60ba9296d4d6b414c1b10995
+title: الخطوة ٧٧
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+في نفس منتقي `#guitar`، عيّن `position` بقيمة `absolute`, و`top` بقيمة `120px`, و`left` بقيمة `0px`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#guitar` الخاص بك خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.position === 'absolute');
+```
+
+يجب أن يكون لدى منتقي `#guitar` خاصية `top` تم تعيينها إلى `120px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.top === '120px');
+```
+
+يجب أن يكون لدى منتقي `#guitar` خاصية `left` تم تعيينها إلى `0px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.left === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+#guitar {
+  width: 100%;
+  height: 100px;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md
new file mode 100644
index 00000000000..48ab2503e37
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60ba92987c1e4914dfa7a0b9.md
@@ -0,0 +1,321 @@
+---
+id: 60ba92987c1e4914dfa7a0b9
+title: الخطوة ٧٨
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+اعطي معرف `#guitar` خاصية `z-index` بقيمة `3`.
+
+# --hints--
+
+يجب أن يكون لدى منتقي `#guitar` خاصية `z-index` تم تعيينها إلى `3`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#guitar')?.zIndex === '3');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+      <div class="blue" id="blue-left"></div>
+      <div class="blue" id="blue-right"></div>
+      <div id="orange-character">
+        <div id="black-round-hat"></div>
+        <div id="eyes-div">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="triangles">
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+          <div class="triangle"></div>
+        </div>
+        <div id="guitar">
+          <div class="guitar" id="guitar-left">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div class="guitar" id="guitar-right">
+            <i class="fas fa-bars"></i>
+          </div>
+          <div id="guitar-neck"></div>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 150px 0 0 300px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: transparent;
+  border-left-color: rgb(45, 31, 19);
+  position: absolute;
+  top: -150px;
+  left: 0;
+}
+
+#gray-mask {
+  width: 150px;
+  height: 150px;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: -10px;
+  left: 70px;
+}
+
+#white-paper {
+  width: 400px;
+  height: 100px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 250px;
+  left: -150px;
+  z-index: 1;
+}
+
+.fa-music {
+  display: inline-block;
+  margin-top: 8%;
+  margin-left: 13%;
+}
+
+.blue {
+  background-color: #1E90FF;
+}
+
+#blue-left {
+  width: 500px;
+  height: 300px;
+  position: absolute;
+  top: 20%;
+  left: 20%;
+}
+
+#blue-right {
+  width: 400px;
+  height: 300px;
+  position: absolute;
+  top: 50%;
+  left: 40%;
+}
+
+#orange-character {
+  width: 250px;
+  height: 550px;
+  background-color: rgb(240, 78, 42);
+  position: absolute;
+  top: 25%;
+  left: 40%;
+}
+
+#black-round-hat {
+  width: 180px;
+  height: 150px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  position: absolute;
+  top: -100px;
+  left: 5px;
+  z-index: -1;
+}
+
+#eyes-div {
+  width: 180px;
+  height: 50px;
+  position: absolute;
+  top: -40px;
+  left: 20px;
+  z-index: 3;
+}
+
+#triangles {
+  width: 250px;
+  height: 550px;
+}
+
+.triangle {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 42px 45px 45px 0;
+  border-top-color: transparent;
+  border-right-color: Gold;
+  border-bottom-color: transparent;
+  border-left-color: transparent;
+  display: inline-block;
+}
+
+#guitar {
+  width: 100%;
+  height: 100px;
+  position: absolute;
+  top: 120px;
+  left: 0px;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md
new file mode 100644
index 00000000000..8f2d493395d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-intermediate-css-by-building-a-picasso-painting/60bad32219ebcb4a8810ac6a.md
@@ -0,0 +1,164 @@
+---
+id: 60bad32219ebcb4a8810ac6a
+title: الخطوة ٤١
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+عيّن `border-width` في `black-hat` بقيمة `150px 0 0 300px`.
+
+# --hints--
+
+يجب أن يحتوي منتقيك `#black-hat` على خاصية `border-width` بقيمة `150px 0 0 300px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#black-hat')?.borderWidth === '150px 0px 0px 300px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <title>Picasso Painting</title>
+    <link rel="stylesheet" href="./styles.css" />
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
+  </head>
+  <body>
+    <div id="back-wall"></div>
+    <div class="characters">
+      <div id="offwhite-character">
+        <div id="white-hat"></div>
+        <div id="black-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="gray-instrument">
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+          <div class="black-dot"></div>
+        </div>
+        <div id="tan-table"></div>
+      </div>
+      <div id="black-character">
+        <div id="black-hat"></div>
+        <div id="gray-mask">
+          <div class="eyes left"></div>
+          <div class="eyes right"></div>
+        </div>
+        <div id="white-paper">
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+          <i class="fas fa-music"></i>
+        </div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+body {
+  background-color: rgb(184, 132, 46);
+}
+
+#back-wall {
+  background-color: #8B4513;
+  width: 100%;
+  height: 60%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+}
+
+#offwhite-character {
+  width: 300px;
+  height: 550px;
+  background-color: GhostWhite;
+  position: absolute;
+  top: 20%;
+  left: 17.5%;
+}
+
+#white-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 0 120px 140px 180px;
+  border-top-color: transparent;
+  border-right-color: transparent;
+  border-bottom-color: GhostWhite;
+  border-left-color: transparent;
+  position: absolute;
+  top: -140px;
+  left: 0;
+}
+
+#black-mask {
+  width: 100%;
+  height: 50px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
+#gray-instrument {
+  width: 15%;
+  height: 40%;
+  background-color: rgb(167, 162, 117);
+  position: absolute;
+  top: 50px;
+  left: 125px;
+  z-index: 1;
+}
+
+.black-dot {
+  width: 10px;
+  height: 10px;
+  background-color: rgb(45, 31, 19);
+  border-radius: 50%;
+  display: block;
+  margin: auto;
+  margin-top: 65%;
+}
+
+#tan-table {
+  width: 450px;
+  height: 140px;
+  background-color: #D2691E;
+  position: absolute;
+  top: 275px;
+  left: 15px;
+  z-index: 1;
+}
+
+#black-character {
+  width: 300px;
+  height: 500px;
+  background-color: rgb(45, 31, 19);
+  position: absolute;
+  top: 30%;
+  left: 59%;
+}
+
+#black-hat {
+  width: 0;
+  height: 0;
+  border-style: solid;
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md
new file mode 100644
index 00000000000..eef9da4c1eb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd5a93fd62bb35968adeab.md
@@ -0,0 +1,131 @@
+---
+id: 61fd5a93fd62bb35968adeab
+title: الخطوة الأولى
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+حدد نوع HTML الخاص بك باستخدام العناصر الآتية `DOCTYPE`, و `html` لتحديد لغة الصفحة لإنجليزية, و `head`, و `body`.
+
+اعطي عنصر `head` عناصر `meta` المناسبة مثل `charset`, و `viewport`, و عنصر `title` يحتوي على عنوان مناسب، و `link` للـصفحتك للأسلوب (stylesheet).
+
+# --hints--
+
+يجب أن يحتوي الكود على إعلان `<!DOCTYPE html>`.
+
+```js
+assert(code.match(/<!DOCTYPE html>/i));
+```
+
+يجب أن يحتوي كودك على عنصر `html`.
+
+```js
+assert.equal(document.querySelectorAll('html')?.length, 1);
+```
+
+يجب أن يحتوي عنصرك `html` على علامة افتتاحية (opening tag) مع خاصية `lang` من `en`.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+يجب أن يحتوي عنصرك `html` على وسم الأغلاق (closing tag).
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+يجب أن يحتوي كودك على عنصر `head` داخل عنصر `html`.
+
+```js
+assert.equal(document.querySelectorAll('head')?.length, 1);
+```
+
+يجب أن يحتوي كودك على عنصر `body` داخل عنصر `html`.
+
+```js
+assert.equal(document.querySelectorAll('body')?.length, 1);
+```
+
+يجب أن يأتي عنصرك `head` قبل عنصرك `body`.
+
+```js
+assert.equal(document.querySelector('body')?.previousElementSibling?.tagName, 'HEAD');
+```
+
+يجب أن يكون لديك عنصران `meta`.
+
+```js
+const meta = document.querySelectorAll('meta');
+assert.equal(meta?.length, 2);
+```
+
+يجب أن يحتوي أحد عناصر `meta` على `name` بقيمة `viewport`، و `content` بقيمة `width=device-width, initial-scale=1.0`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset'));
+assert.exists(target);
+```
+
+يجب أن يحتوي عنصر `meta` الآخر على سمة `charset` بقيمة `UTF-8`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
+assert.exists(target);
+```
+
+يجب أن يحتوي كودك على عنصر `title`.
+
+```js
+const title = document.querySelector('title');
+assert.exists(title);
+```
+
+يجب أحتواء `title` إلى نص.
+
+```js
+const title = document.querySelector('title');
+assert.isAtLeast(title?.textContent?.length, 1);
+```
+
+يجب أن يحتوي كودك على عنصر `link`.
+
+```js
+assert(/<link/.test(code))
+```
+
+يجب أن يكون عنصرك `link` داخل عنصرك `head`.
+
+```js
+assert(code.match(/<head>[\w\W\s]*<link[\w\W\s]*\/?>[\w\W\s]*<\/head>/i))
+```
+
+يجب أن يحتوي عنصرك `link` على سمة `rel` بقيمة `stylesheet`.
+
+```js
+assert.match(code, /<link[\s\S]*?rel=('|"|`)stylesheet\1/)
+```
+
+يجب أن يحتوي عنصرك `link` على سمة `href` بقيمة `styles.css`.
+
+```js
+assert.match(code, /<link[\s\S]*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6343fb42013d99bcd7f3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6343fb42013d99bcd7f3.md
new file mode 100644
index 00000000000..e5afb0f9cb7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6343fb42013d99bcd7f3.md
@@ -0,0 +1,48 @@
+---
+id: 61fd6343fb42013d99bcd7f3
+title: الخطوة الثانية
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+داخل عنصر `body`، قم بدمج عنصر `section` ضمن عنصر `main`.
+
+# --hints--
+
+العنصر الأول داخل عنصر `body` يجب أن يكون عنصر `main` الخاص بك.
+
+```js
+assert(document.querySelector('body')?.children?.[0]?.localName === 'main');
+```
+
+يجب أن يكون لديك عنصر `section` ضمن عنصر `main` الخاص بك.
+
+```js
+assert(document.querySelector('main')?.children?.[0]?.localName === 'section');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+--fcc-editable-region--
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md
new file mode 100644
index 00000000000..9c0c34a2755
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd66c687e610436494c6f1.md
@@ -0,0 +1,52 @@
+---
+id: 61fd66c687e610436494c6f1
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+ضمن عنصر `section` أضف عنصر `h1` وعنصر `span`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `section` الخاص بك على عنصر `h1`.
+
+```js
+assert(document.querySelector('section')?.children?.[0]?.localName === 'h1');
+```
+
+يجب أن يحتوي عنصر `h1` على عنصر `span`.
+
+```js
+assert(document.querySelector('h1')?.children?.[0]?.localName === 'span');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+--fcc-editable-region--
+      <section>
+      </section>
+--fcc-editable-region--
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md
new file mode 100644
index 00000000000..f2a78795f8c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd67a656743144844941cb.md
@@ -0,0 +1,78 @@
+---
+id: 61fd67a656743144844941cb
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+يعلن قراء الشاشة عناصر HTML استناداً إلى سير المستند. وسوف نريد في نهاية المطاف أن يكون لقائمة الميزانية العامة عنوان "Balance Sheet" وعنوان فرعي "AcmeWidgetCorp". غير أن هذا الأمر لا معنى له إذا أعْلن بواسطة قارئ الشاشة.
+
+اعطي `span` خاصية `class` باسم `flex`، وأضف عنصرين `span` داخلها. أعط أول نص `AcmeWidgetCorp`. أعط النص الثاني `Balance Sheet`. سوف تستخدم CSS لقلب ترتيب النص في الصفحة، لكن ترتيب HTML سيكون أكثر منطقية لقارئ الشاشة.
+
+# --hints--
+
+يجب أن يحتوي عنصر `span` الحالي على سمة `class` بقيمة `flex`.
+
+```js
+assert(document.querySelector('h1')?.children?.[0]?.classList?.contains('flex'));
+```
+
+يجب أن يحتوي عنصر `span` الحالي على عنصرين `span` جديدين داخله.
+
+```js
+assert(document.querySelector('.flex')?.children?.[0]?.localName === 'span');
+assert(document.querySelector('.flex')?.children?.[1]?.localName === 'span');
+```
+
+لا ينبغي أن تحتوي العناصر `span` الجديدة على خاصية `class`.
+
+```js
+assert(!document.querySelector('.flex')?.children?.[0]?.classList?.length);
+assert(!document.querySelector('.flex')?.children?.[1]?.classList?.length);
+```
+
+يجب أن يحتوي العنصر الجديد الأول `span` على النص `AcmeWidgetCorp`.
+
+```js
+assert(document.querySelector('.flex')?.children?.[0]?.textContent === 'AcmeWidgetCorp');
+```
+
+يجب أن يحتوي العنصر `span` الجديد الثاني على النص `Balance Sheet`.
+
+```js
+assert(document.querySelector('.flex')?.children?.[1]?.textContent === 'Balance Sheet');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+--fcc-editable-region--
+          <span>
+          </span>
+--fcc-editable-region--
+        </h1>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md
new file mode 100644
index 00000000000..8b4e67dca32
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6ab779390f49148773bb.md
@@ -0,0 +1,65 @@
+---
+id: 61fd6ab779390f49148773bb
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+أسفل عنصر `h1` الخاص بك، أنشئ عنصر `div`. قم بإعطائه سمة `id` تم تعيينها إلى `years`. أنت تريد إخفاء هذا العنصر بالتحديد من قارئ الشاشة، لذلك امنحه سمة `aria-hidden` التي تم تعيينها إلى `true`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `div` جديد بعد عنصر `h1` الخاص بك.
+
+```js
+assert(document.querySelector('h1')?.nextElementSibling?.localName === 'div');
+```
+
+يجب أن يحتوي عنصر `div` الجديد على السمة `id` بقيمة `years`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('id') === 'years');
+```
+
+يجب أن يحتوي عنصر `div` الجديد على السمة `aria-hidden` بقيمة `true`.
+
+```js
+assert(document.querySelector('div')?.getAttribute('aria-hidden') === 'true');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md
new file mode 100644
index 00000000000..4db21891038
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6b7c83dbf54a08cf0498.md
@@ -0,0 +1,79 @@
+---
+id: 61fd6b7c83dbf54a08cf0498
+title: الخطوة ٦
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+ضمن عنصر `div` الخاص بك، أضف ثلاثة عناصر `span`. اعطي كل منهم سمة `class` تم تعيينها إلى `year`، وأضف النصوص التالية (بالترتيب): `2019`و `2020` و `2021`.
+
+# --hints--
+
+عنصر `div` الخاص بك يجب أن يحتوي على ثلاثة عناصر `span`.
+
+```js
+assert(document.querySelector('div')?.children?.length === 3);
+```
+
+كل عنصر `span` يجب أن يحتوي على `class` تم تعيينه إلى `year`.
+
+```js
+const spans = [...document.querySelector('div')?.children];
+spans.forEach(span => assert(span?.classList?.contains('year')));
+```
+
+يجب أن يحتوي أول `span` على النص `2019`.
+
+```js
+assert(document.querySelector('div')?.children?.[0]?.textContent === '2019');
+```
+
+يجب أن يحتوي ثاني `span` على النص `2020`.
+
+```js
+assert(document.querySelector('div')?.children?.[1]?.textContent === '2020');
+```
+
+يجب أن يحتوي ثالث `span` على النص `2021`.
+
+```js
+assert(document.querySelector('div')?.children?.[2]?.textContent === '2021');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+--fcc-editable-region--
+        <div id="years" aria-hidden="true">
+        </div>
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md
new file mode 100644
index 00000000000..5e5b5ad81a3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd6cc9475a784b7776233e.md
@@ -0,0 +1,80 @@
+---
+id: 61fd6cc9475a784b7776233e
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+تحت عنصر `div` الموجود ، أضف عنصر `div` جديد مع `class` تم تعيينه إلى `table-wrap`. سيكون هذا هو الحاوية (container) للـ tables الخاصة بك.
+
+ضمن ذلك، أضف ثلاثة عناصر `table`. سوف تستخدم CSS لتصميمهم في table واحد، ولكن استخدام tables منفصلة سيساعد قارئ الشاشة (screen readers) على فهم تدفق و تسلسل المستند (document).
+
+# --hints--
+
+يجب عليك إنشاء عنصر `div` جديد.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+عنصر `div` الجديد الخاص بك يجب أن يحتوي على `class` يسمي `table-wrap`.
+
+```js
+assert(document.querySelector('.table-wrap')?.localName === 'div');
+```
+
+عنصر `.table-wrap` الخاص بك يجب أن يأتي بعد الـ `div` الحالي الخاص بك.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('table-wrap'));
+```
+
+عنصر `.table-wrap` الخاص بك يجب أن يحتوي على ثلاثة عناصر `table`.
+
+```js
+const children = [...(document.querySelector('.table-wrap')?.children ?? [])];
+assert(children?.length === 3);
+children.forEach(child => assert(child?.localName === 'table'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd70336ebb3e4f62ee81ba.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd70336ebb3e4f62ee81ba.md
new file mode 100644
index 00000000000..8051ddf0db1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd70336ebb3e4f62ee81ba.md
@@ -0,0 +1,73 @@
+---
+id: 61fd70336ebb3e4f62ee81ba
+title: الخطوة ٨
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+تستخدم HTML tables عنصر `caption` لوصف موضوع الـ table. يجب أن يكون عنصر `caption` دائما أول child لـ `table`، ولكن يمكن أن يتم التحكم بموضعه باستخدام `caption-side` وهي خاصية CSS.
+
+أضف عنصر `caption` إلى أول `table` خاص بك، وأعطيه النص `Assets`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `table` الاول الخاص بك على عنصر `caption`.
+
+```js
+assert(document.querySelector('table')?.children?.[0]?.localName === 'caption');
+```
+
+يجب أن يحتوي عنصر `caption` على النص `Assets`.
+
+```js
+assert(document.querySelector('caption')?.textContent === 'Assets');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md
new file mode 100644
index 00000000000..04a50eb36d0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd719788899952e67692b9.md
@@ -0,0 +1,86 @@
+---
+id: 61fd719788899952e67692b9
+title: الخطوة ٩
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+تستخدم عناصر `thead` و `tbody` للإشارة إلى أي جزء من طاولتك يكون العنوان، والجزء الذي يحتوي على البيانات أو المحتوى الأولي.
+
+أضف `thead` و `tbody` إلى أول `table`، أسفل عنصر `caption`.
+
+# --hints--
+
+يجب أن يحتوي عنصرك `table` الأول على عنصر `thead`.
+
+```js
+assert(document.querySelectorAll('table')?.[0]?.querySelector('thead'));
+```
+
+يجب أن يحتوي عنصرك `table` الأول على عنصر `tbody`.
+
+```js
+assert(document.querySelectorAll('table')?.[0]?.querySelector('tbody'));
+```
+
+يجب أن تضع عنصرك `thead` تحت عنصرك `caption` تماماً.
+
+```js
+assert(document.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+يجب أن تضع عنصرك `tbody` تحت عنصرك `thead` تماماً.
+
+```js
+assert(document.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+--fcc-editable-region--
+          <table>
+            <caption>Assets</caption>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md
new file mode 100644
index 00000000000..d65e1124db2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd71d596e8f253b9408b39.md
@@ -0,0 +1,86 @@
+---
+id: 61fd71d596e8f253b9408b39
+title: الخطوة ١٠
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+يتم استخدام عنصر `tr` للإشارة إلى صف الجدول (table row). اضف عنصر `tr` ضمن عنصر `thead`. في عنصر `tr` الجديد، أضف عنصر `td` يليه ثلاث عناصر `th`.
+
+عنصر `td` يشير إلى خانة بيانات (data cell)، في حين أن عنصر `th` يشير إلى خانة العناوين (header cell).
+
+# --hints--
+
+يجب أن يحتوي عنصر `thead` الخاص بك على عنصر `tr`.
+
+```js
+assert(document.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+عنصر `tr` الخاص بك يجب أن يحتوي على عنصر `td` كالطفل الأول (first child).
+
+```js
+assert(document.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+عنصر `tr` الخاص بك يجب أن يحتوي على ثلاث عناصر `th` بعد عنصر `td`.
+
+```js
+assert(document.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+--fcc-editable-region--
+            <thead>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md
new file mode 100644
index 00000000000..261e136dd6e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd75ea7f663457612dba02.md
@@ -0,0 +1,125 @@
+---
+id: 61fd75ea7f663457612dba02
+title: الخطوة ١١
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+داخل كل عنصر من عناصر `th` الجديدة، أدخل عنصر `span` مع `class` تم تعينه إلى `sr-only year`. أعطيهم النصوص التالية (بالترتيب): `2019`، و `2020`، و `2021`.
+
+اعطي عنصر `th` الثالث، السمة `class` باسم `current`.
+
+اترك عنصر `td` فارغاً. هذا العنصر موجود فقط للتأكد من أن جدولك لديه تخطيط (layout) من أربع أعمدة وربط العناوين مع الأعمدة الصحيحة.
+
+# --hints--
+
+يجب أن يحتوا كل من عناصرك `th` على عنصر `span`.
+
+```js
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+يجب أن يحتوي كل عنصر من عناصر `span` الجديدة على `class` باسم `sr-only year`.
+
+```js
+const ths = [...document.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+  assert(th?.children?.[0]?.classList?.contains('year'));
+});
+```
+
+يجب أن يحتوي العنصر `span` الأول على النص `2019`.
+
+```js
+assert(document.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+يجب أن يحتوي العنصر `span` الثاني على النص `2020`.
+
+```js
+assert(document.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+يجب أن يحتوي العنصر `span` الثالث على النص `2021`.
+
+```js
+assert(document.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+يجب أن يحتوي عنصرك `th` على `class` بقيمة `current`.
+
+```js
+assert(document.querySelector('table')?.querySelectorAll('th')?.[2]?.classList?.contains('current'));
+```
+
+يجب أن يكون عنصر `td` فارغاً.
+
+```js
+assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelector('table')?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+--fcc-editable-region--
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md
new file mode 100644
index 00000000000..f36dc9d2b6e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7648a7ba2e5882436831.md
@@ -0,0 +1,96 @@
+---
+id: 61fd7648a7ba2e5882436831
+title: الخطوة ١٢
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+ضمن عنصر `tbody` ، أضف أربعة عناصر `tr`. أعطِ الثلاث الأولى `class` بقيمة `data`، و الرابع `class` تم تعيينه إلى `total`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `tbody` الخاص بك على أربعة عناصر `tr`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
+```
+
+يجب أن تحتوي العناصر الثلاثة `tr` على سمة `class` بقيمة `data`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
+```
+
+عنصر `tr` الرابع الخاص بك يجب أن يحتوي على سمة `class` بقيمة `total`.
+
+```js
+const children = [...document.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+--fcc-editable-region--
+            <tbody>
+            </tbody>
+--fcc-editable-region--
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md
new file mode 100644
index 00000000000..fab7b5978d5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd778081276b59d59abad6.md
@@ -0,0 +1,134 @@
+---
+id: 61fd778081276b59d59abad6
+title: الخطوة ١٣
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+في أول `tr` خاص بك، أضف عنصر `th` مع النص `Cash This is the cash we currently have on hand.`. غلف كل هذه النصوص باستثناء `Cash` في عنصر `span` مع `class` محدد إلى `description`.
+
+بعد ذلك، أضف ثلاثة عناصر `td` مع النصوص التالية (بالترتيب): `$25` و `$30` و `$28`. اعطي عنصر `td` الثالث السمة `class` التي تم تعيينها إلى `current`.
+
+# --hints--
+
+يجب أن يحتوي أول `tr` على عنصر `th`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+عنصر `th` الخاص بك يجب أن يحتوي على النص `Cash This is the cash we currently have on hand.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Cash This is the cash we currently have on hand.');
+```
+
+يجب أن تغلف النص `This is the cash we currently have on hand.` في عنصر `span`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'This is the cash we currently have on hand.');
+```
+
+يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+يجب أن يكون لديك ثلاثة عناصر `td`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+يجب أن يحتوي العنصر `td` الاول على النص `$25`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$25');
+```
+
+يجب أن يحتوي العنصر `td` الثاني على النص `$30`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$30');
+```
+
+يجب أن يحتوي العنصر `td` الثالث على النص `$28`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$28');
+```
+
+عنصر `td` الثالث الخاص بك يجب أن يحتوي على `class` بقيمة `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
new file mode 100644
index 00000000000..d978e0ce763
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd77f7ad2aeb5ae34d07d6.md
@@ -0,0 +1,138 @@
+---
+id: 61fd77f7ad2aeb5ae34d07d6
+title: الخطوة ١٤
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+في عنصر `tr` الثاني، أضف عنصر `th` مع النص `Checking Our primary transactional account.`. غلف ذلك النص، باستثناء `Checking`، في عنصر `span` مع سمة `class` بقيمة `description`.
+
+بعد ذلك، أضف ثلاث عناصر `td` مع النصوص التالية (بالترتيب): `$54`, و `$56`, و `$53`. اعطي عنصر `td` الثالث سمة `class` تسمى `current`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `tr` الثاني على عنصر `th`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+```
+
+يجب أن يحتوي عنصرك `th` على النص `Checking Our primary transactional account.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Checking Our primary transactional account.');
+```
+
+يجب أن تغلف النص `Our primary transactional account.` في عنصر `span`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Our primary transactional account.');
+```
+
+يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+يجب أن يكون لديك ثلاث عناصر `td`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+```
+
+يجب أن يحتوي العنصر `td` الاول على النص `$54`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$54');
+```
+
+يجب أن يحتوي العنصر `td` الثاني على النص `$56`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$56');
+```
+
+يجب أن يحتوي العنصر `td` الثالث على النص `$53`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$53');
+```
+
+يجب أن يحتوي عنصرك `td` الثالث على `class` بقيمة `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md
new file mode 100644
index 00000000000..ca455a70564
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd78621573aa5e8b512f5e.md
@@ -0,0 +1,142 @@
+---
+id: 61fd78621573aa5e8b512f5e
+title: خطوة ١٥
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+في عنصر `tr` الثالث ، أضف عنصر `th` مع النص `Savings Funds set aside for emergencies.`. غلف ذلك النص، باستثناء `Savings`، في عنصر `span` مع سمة `class`بقيمة `description`.
+
+بعد ذلك، أضف ثلاثة عناصر `td` مع النصوص التالية (بالترتيب): `$500` و `$650` و `$728`. اعطي عنصر `td` الثالث السمة `class` التي تم تعيينها إلى `current`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `tr` الثالث على عنصر `th`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+عنصر `th` الخاص بك يجب أن يحتوي على النص `Savings Funds set aside for emergencies.`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Savings Funds set aside for emergencies.');
+```
+
+يجب أن تغلف النص `Funds set aside for emergencies.` في عنصر `span`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'Funds set aside for emergencies.');
+```
+
+يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `description`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+يجب أن يكون لديك ثلاثة عناصر `td`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+يجب أن يحتوي العنصر `td` الاول على النص `$500`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+يجب أن يحتوي العنصر `td` الثاني على النص `$650`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$650');
+```
+
+يجب أن يحتوي العنصر `td` الثالث على النص `$728`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$728');
+```
+
+عنصر `td` الثالث الخاص بك يجب أن يحتوي على `class` بقيمة `current`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+--fcc-editable-region--
+              <tr class="total">
+              </tr>
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md
new file mode 100644
index 00000000000..a3999a62695
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7a160ed17960e971f28b.md
@@ -0,0 +1,140 @@
+---
+id: 61fd7a160ed17960e971f28b
+title: الخطوة ١٦
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+في عنصر `tr` الرابع ، أضف عنصر `th` مع النص `Total Assets`. قم بتغليف النص `Assets` في `span` مع سمة `class` تم تعيينها إلى `sr-only`.
+
+بعد ذلك، أضف ثلاثة عناصر `td` مع النصوص التالية (بالترتيب): `$579` و `$736` و `$809`. اعطي عنصر `td` الثالث السمة `class` التي تم تعيينها إلى `current`.
+
+# --hints--
+
+يجب أن يحتوي العنصر الرابع `tr` على عنصر `th` الخاص بك.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+```
+
+يجب أن يحتوي عنصر `th` الخاص بك على النص `Total Assets`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Assets');
+```
+
+يجب أن يغلف النص `Assets` في `span`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Assets');
+```
+
+يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `sr-only`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+يجب أن يكون لديك ثلاثة عناصر `td`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+يجب أن يحتوي العنصر `td` الاول على النص `$579`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$579');
+```
+
+يجب أن يحتوي العنصر `td` الثاني على النص `$736`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$736');
+```
+
+يجب أن يحتوي العنصر `td` الثالث على النص `$809`.
+
+```js
+assert(document.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$809');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+--fcc-editable-region--
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md
new file mode 100644
index 00000000000..3a777c785cd
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd7b3fcaa5406257abc5d1.md
@@ -0,0 +1,130 @@
+---
+id: 61fd7b3fcaa5406257abc5d1
+title: الخطوة ١٧
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+حان الوقت للانتقال إلى طاولتك الثانية. ابدأ بإعطائه عنصر `caption` الذي تم تعيينه إلى `Liabilities`. ثم أضف `thead` و `tbody` الخاص بك.
+
+# --hints--
+
+يجب أن يحتوي عنصر `table` الثاني الخاص بك على عنصر `caption`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.children?.[0]?.localName === 'caption');
+```
+
+يجب أن يحتوي عنصر `caption` على النص `Liabilities`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.textContent === 'Liabilities');
+```
+
+يجب أن يحتوي عنصر `table` الثاني على عنصر `thead`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead'));
+```
+
+يجب أن يحتوي عنصر `table` الثاني على عنصر `tbody`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody'));
+```
+
+عنصر `thead` الخاص بك يجب أن يكون تحت عنصر `caption` مباشرة.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+عنصر `tbody` الخاص بك يجب أن يكون تحت عنصر `thead` مباشرة.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md
new file mode 100644
index 00000000000..d972d364767
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8e491324ce717da97ffe.md
@@ -0,0 +1,119 @@
+---
+id: 61fd8e491324ce717da97ffe
+title: الخطوة ١٨
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+ضمن `thead`، أضف `tr`. في داخلها، أضف عنصر `td` و ثلاث عناصر `th`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `thead` الخاص بك على عنصر `tr`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+عنصر `tr` الخاص بك يجب أن يحتوي على عنصر `td` كالطفل الأول.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+عنصر `tr` الخاص بك يجب أن يحتوي على ثلاث عناصر `th` بعد عنصر `td`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md
new file mode 100644
index 00000000000..be754759a1f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd8fd08af43372f02952d0.md
@@ -0,0 +1,149 @@
+---
+id: 61fd8fd08af43372f02952d0
+title: الخطوة ١٩
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+إعطاء لكل عنصر `th` عنصرً `span` مع تعيين الفئة إلى `sr-only` والنص التالي. بالترتيب: `2019`، و`2020`، و `2021`.
+
+# --hints--
+
+يجب أن يحتوا كل من عناصرك `th` على عنصر `span`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+يجب أن يحتوي كل عنصر من عناصر `span` الجديدة على `class` باسم `sr-only`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[1]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
+```
+
+يجب أن يحتوي العنصر `span` الأول على النص `2019`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+يجب أن يحتوي العنصر `span` الثاني على النص `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+يجب أن يحتوي العنصر `span` الثالث على النص `2021`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+يجب أن يكون عنصر `td` فارغاً.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelectorAll('table')?.[1]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th></th>
+                <th></th>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md
new file mode 100644
index 00000000000..0fd57e0df12
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9126aa72a474301fc49f.md
@@ -0,0 +1,131 @@
+---
+id: 61fd9126aa72a474301fc49f
+title: الخطوة ٢٠
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+ضمن عنصر `tbody` ، أضف أربعة عناصر `tr`. أعطِ الثلاث الأولى `class` بقيمة `data`، و الرابع `class` تم تعيينه إلى `total`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `tbody` الخاص بك على أربعة عناصر `tr`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.length === 4);
+children.forEach(child => assert(child?.localName === 'tr'));
+```
+
+يجب أن تحتوي العناصر الثلاثة `tr` على سمة `class` بقيمة `data`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+children.forEach((child, index) => {
+  if (index < 3) {
+    assert(child?.classList?.contains('data'));
+  }
+});
+```
+
+عنصر `tr` الرابع الخاص بك يجب أن يحتوي على سمة `class` بقيمة `total`.
+
+```js
+const children = [...document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.children];
+assert(children?.[3]?.classList?.contains('total'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md
new file mode 100644
index 00000000000..6dc79d9395b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd933ba685de776a94997e.md
@@ -0,0 +1,169 @@
+---
+id: 61fd933ba685de776a94997e
+title: الخطوة ٢١
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+داخل أول `tr`، أضف عنصر `th` مع النص `Loans The outstanding balance on our startup loan.`. غلف ذلك النص، باستثناء `Loans`، ضمن عنصر `span` مع `class` تم تعيينه إلى `description`.
+
+اضف ثلاث عناصر `td` أدناه، مع إعطائهم النصوص التالية، بالترتيب: `$500`, و `$250`, و `$0`. اعطي عنصر `td` الثالث `class` بقيمة `current`.
+
+# --hints--
+
+يجب أن يحتوي أول `tr` على عنصر `th`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+عنصر `th` الخاص بك يجب أن يحتوي على نص `Loans The outstanding balance on our startup loan.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Loans The outstanding balance on our startup loan.');
+```
+
+يجب أن تغلف النص `The outstanding balance on our startup loan.` في عنصر `span`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'The outstanding balance on our startup loan.');
+```
+
+يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+يجب أن يكون لديك ثلاث عناصر `td`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+يجب أن يحتوي العنصر `td` الأول على النص `$500`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$500');
+```
+
+يجب أن يحتوي العنصر `td` الثاني على النص `$250`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$250');
+```
+
+يجب أن يحتوي العنصر `td` الثالث على النص `$0`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$0');
+```
+
+عنصر `td` الثالث الخاص بك يجب أن يحتوي على `class` بقيمة `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md
new file mode 100644
index 00000000000..7efe87ecbc0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd94056e0355785fbba4d3.md
@@ -0,0 +1,173 @@
+---
+id: 61fd94056e0355785fbba4d3
+title: الخطوة ٢٢
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+في `tr` الثاني، قم بإضافة عنصر `th` مع النص `Expenses Annual anticipated expenses, such as payroll.`. غلف ذلك النص، باستثناء `Expenses`، ضمن عنصر `span` مع `class` تم تعيينه إلى `description`.
+
+قم بإضافة ثلاثة عناصر `td` أدناه، مع إعطائهم النصوص التالية ، بالترتيب: `$200` و `$300` و `$400`. اعطي عنصر `td` الثالث `class` بقيمة `current`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `tr` الثاني على عنصر `th`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th'));
+```
+
+يجب أن يحتوي عنصر `th` الخاص بك على النص `Expenses Annual anticipated expenses, such as payroll.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th')?.innerText === 'Expenses Annual anticipated expenses, such as payroll.');
+```
+
+يجب أن يغلف النص `Annual anticipated expenses, such as payroll.` في عنصر `span`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.textContent === 'Annual anticipated expenses, such as payroll.');
+```
+
+يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+يجب أن يكون لديك ثلاثة عناصر `td`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td').length === 3);
+```
+
+يجب أن يحتوي العنصر `td` الاول على النص `$200`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[0]?.textContent === '$200');
+```
+
+يجب أن يحتوي العنصر `td` الثاني على النص `$300`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[1]?.textContent === '$300');
+```
+
+يجب أن يحتوي العنصر `td` الثالث على النص `$400`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.textContent === '$400');
+```
+
+عنصر `td` الثالث الخاص بك يجب أن يحتوي على `class` بقيمة `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[1]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
new file mode 100644
index 00000000000..6bb0c5c0bc5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd986ddbcbd47ba8fbc5ec.md
@@ -0,0 +1,177 @@
+---
+id: 61fd986ddbcbd47ba8fbc5ec
+title: الخطوة ٢٣
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+داخل الجزء الثالث `tr`، أضف عنصر `th` مع النص `Credit The outstanding balance on our credit card.`. غلف ذلك النص، باستثناء `Credit`، ضمن عنصر `span` مع `class` يسمى `description`.
+
+اضف ثلاث عناصر `td` أدناه، مع إعطائهم النصوص التالية، بالترتيب: `$50`, و `$50`, و `$75`. اعطي عنصر `td` الثالث `class` بقيمة `current`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `tr` الثالث على عنصر `th`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th'));
+```
+
+يجب أن تحتوي عنصرك `th` على نص `Credit The outstanding balance on our credit card.`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th')?.innerText === 'Credit The outstanding balance on our credit card.');
+```
+
+يجب أن تغلف النص `The outstanding balance on our credit card.` في عنصر `span`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.textContent === 'The outstanding balance on our credit card.');
+```
+
+يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `description`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelector('th > span')?.classList?.contains('description'));
+```
+
+يجب أن يكون لديك ثلاث عناصر `td`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td').length === 3);
+```
+
+يجب أن يحتوي عنصرك `td` الأول على النص `$50`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '$50');
+```
+
+يجب أن يحتوي عنصرك `td` الثاني على النص `$50`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[1]?.textContent === '$50');
+```
+
+يجب أن يحتوي عنصرك `td` الثالث على النص `$75`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.textContent === '$75');
+```
+
+يجب أن تحتوي عنصرك `td` الثالث على `class` بقيمة `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[2]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
new file mode 100644
index 00000000000..3e94345267c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd990577d8227dd93fbeeb.md
@@ -0,0 +1,181 @@
+---
+id: 61fd990577d8227dd93fbeeb
+title: الخطوة ٢٤
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+في عنصر `tr` الرابع ، أضف عنصر `th` مع النص `Total Liabilities`. قم بتغليف النص `Liabilities` في `span` مع سمة `class` تم تعيينها إلى `sr-only`.
+
+بعد ذلك، أضف ثلاثة عناصر `td` مع النصوص التالية (بالترتيب): `$750` و `$600` و `$475`. اعطي عنصر `td` الثالث السمة `class` التي تم تعيينها إلى `current`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `tr` الرابع الخاص بك على عنصر `th`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th'));
+```
+
+يجب أن يحتوي عنصر `th` الخاص بك على النص `Total Liabilities`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th')?.innerText === 'Total Liabilities');
+```
+
+يجب أن تغلف النص `Liabilities` في عنصر `span`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.textContent === 'Liabilities');
+```
+
+يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `sr-only`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+يجب أن يكون لديك ثلاثة عناصر `td`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td').length === 3);
+```
+
+يجب أن يحتوي العنصر `td` الاول على النص `$750`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[0]?.textContent === '$750');
+```
+
+يجب أن يحتوي العنصر `td` الثاني على النص `$600`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[1]?.textContent === '$600');
+```
+
+يجب أن يحتوي العنصر `td` الثالث على النص `$475`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.textContent === '$475');
+```
+
+عنصر `td` الثالث الخاص بك يجب أن يحتوي على `class` بقيمة `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[1]?.querySelector('tbody')?.querySelectorAll('tr')?.[3]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+--fcc-editable-region--
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+              </tr>
+--fcc-editable-region--
+            </tbody>
+          </table>
+          <table>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
new file mode 100644
index 00000000000..8aa9a1fabd0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9a4ff2fc4481b9157bd7.md
@@ -0,0 +1,165 @@
+---
+id: 61fd9a4ff2fc4481b9157bd7
+title: خطوة ٢٥
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+في جدولك الثالث، أضف `caption` قيمته `Net Worth`, وأعد عنوان (header) الجدول وجسداً (body) الجدول.
+
+# --hints--
+
+يجب أن يحتوي عنصرك `table` الثالث على عنصر `caption`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.children?.[0]?.localName === 'caption');
+```
+
+يجب أن يحتوي عنصرك `caption` على النص `Net Worth`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.textContent === 'Net Worth');
+```
+
+يجب أن يحتوي عنصرك `table` الثالث على عنصر `thead`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead'));
+```
+
+يجب أن يحتوي عنصرك `table` الثالث على عنصر `tbody`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody'));
+```
+
+يجب أن وضع عنصرك `thead` تحت عنصرك `caption` تماماً.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('caption')?.nextElementSibling?.localName === 'thead');
+```
+
+يجب أن وضع عنصرك `tbody` تحت عنصرك `thead` تماماً.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.nextElementSibling?.localName === 'tbody');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md
new file mode 100644
index 00000000000..d3abae45057
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9ad665a4a282c8106be3.md
@@ -0,0 +1,198 @@
+---
+id: 61fd9ad665a4a282c8106be3
+title: الخطوة ٢٦
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+داخل `thead`، أنشئ عنصر `tr`. في داخلها، أضف عنصر `td` و ثلاث عناصر `th`. بداخل كل عناصر `th` ضف عنصر `span` مع تعيين `class` إلى `sr-only` والنص التالي. بالترتيب: `2019`، و`2020`، و `2021`.
+
+# --hints--
+
+يجب أن يحتوي عنصرك `thead` على عنصر `tr`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('thead')?.children?.[0]?.localName === 'tr');
+```
+
+يجب أن يحتوي عنصرك `tr` عنصر `td` كالطفل الأول.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[0]?.localName === 'td');
+```
+
+يجب أن يحتوي عنصرك `tr` على ثلاث عناصر `th` بعد عنصر `td`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[1]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[2]?.localName === 'th');
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tr')?.children?.[3]?.localName === 'th');
+```
+
+يجب أن يحتوا كل من عناصرك `th` على عنصر `span`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.length === 1);
+  assert(th?.children?.[0]?.localName === 'span');
+});
+```
+
+يجب أن يحتوي كل عنصر من عناصر `span` الجديدة على `class` باسم `sr-only`.
+
+```js
+const ths = [...document.querySelectorAll('table')?.[2]?.querySelectorAll('th')];
+ths?.forEach(th => {
+  assert(th?.children?.[0]?.classList?.contains('sr-only'));
+});
+```
+
+يجب أن يحتوي العنصر `span` الأول على النص `2019`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[0]?.children?.[0]?.textContent === '2019');
+```
+
+يجب أن يحتوي العنصر `span` الثاني على النص `2020`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[1]?.children?.[0]?.textContent === '2020');
+```
+
+يجب أن يحتوي العنصر `span` الثالث على النص `2021`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('th')?.[2]?.children?.[0]?.textContent === '2021');
+```
+
+يجب أن يكون عنصر `td` فارغاً.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.textContent === '');
+assert(document.querySelectorAll('table')?.[2]?.querySelectorAll('td')?.[0]?.children?.length === 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md
new file mode 100644
index 00000000000..141129dc097
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9b7285bde783ad5b8aac.md
@@ -0,0 +1,208 @@
+---
+id: 61fd9b7285bde783ad5b8aac
+title: الخطوة ٢٧
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+بداخل عنصر `tbody`، ضف `tr` مع `class` يسمي `total`. في ذلك، أضف `th` مع النص `Total Net Worth`، وغلف `Net Worth` في `span` مع `class` يدعى `sr-only`.
+
+ثم أضف ثلاث عناصر `td`، و اعطي الثالث `class` تم تعيينه إلى `current`، ويعطى كل منهم نص على النحو التالي: `$-171`, و`$136`, و`$334`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `tbody` الخاص بك على عنصر `tr` واحد.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.length === 1);
+```
+
+عنصر `tr` الخاص بك يجب أن يحتوي على `class` يسمي `total`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelector('tr')?.classList?.contains('total'));
+```
+
+يجب أن يحتوي عنصر `tr` على عنصر `th`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th'));
+```
+
+يجب أن يحتوي عنصر `th` الخاص بك على النص `Total Net Worth`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th')?.innerText === 'Total Net Worth');
+```
+
+يجب أن يغلف النص `Net Worth` في `span`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.textContent === 'Net Worth');
+```
+
+يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `sr-only`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelector('th > span')?.classList?.contains('sr-only'));
+```
+
+يجب أن يكون لديك ثلاثة عناصر `td`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td').length === 3);
+```
+
+يجب أن يحتوي العنصر `td` الأول على النص `$-171`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[0]?.textContent === '$-171');
+```
+
+يجب أن يحتوي العنصر `td` الثاني على النص `$136`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[1]?.textContent === '$136');
+```
+
+يجب أن يحتوي العنصر `td` الثالث على النص `$334`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.textContent === '$334');
+```
+
+عنصر `td` الثالث الخاص بك يجب أن يحتوي على `class` بقيمة `current`.
+
+```js
+assert(document.querySelectorAll('table')?.[2]?.querySelector('tbody')?.querySelectorAll('tr')?.[0]?.querySelectorAll('td')?.[2]?.classList?.contains('current'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+--fcc-editable-region--
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+            </tbody>
+          </table>
+--fcc-editable-region--
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md
new file mode 100644
index 00000000000..91c1f140f43
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fd9d9fbdfe078800317055.md
@@ -0,0 +1,158 @@
+---
+id: 61fd9d9fbdfe078800317055
+title: الخطوة ٢٨
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+حان الوقت لتصميم طاولتك. ابدأ بإعادة تعيين نموذج الصندوق. أنشئ منتقي `html` وقم بإعطائه الخاصية `box-sizing` بقيمة `border-box`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `html`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+يجب أن يكون لمنتقي `html` الخاص بك `box-sizing` بقيمة `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.getPropertyValue('box-sizing') === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md
new file mode 100644
index 00000000000..a86abc2225c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda307bde0b091cf7d884a.md
@@ -0,0 +1,168 @@
+---
+id: 61fda307bde0b091cf7d884a
+title: الخطوة ٢٩
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+أنشئ منتقي `body` وإعطائه خاصية `font-family` بقيمة `sans-serif` و `color` بقيمة `#0a0a23`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `body`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+يجب أن يحتوي منتقيك `body` على خاصية `font-family` بقيمة `sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('font-family') === 'sans-serif');
+```
+
+يجب أن يحتوي منتقيك `body` على خاصية `color` بقيمة `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('color') === 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md
new file mode 100644
index 00000000000..1a7e8d3a12e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fda339eadcfd92a6812bed.md
@@ -0,0 +1,171 @@
+---
+id: 61fda339eadcfd92a6812bed
+title: الخطوة ٣٠
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+قبل أن تتقدم من اللازم في تصميمك، يجب عليك استخدام فئة `sr-only`. يمكنك استخدام CSS لجعل العناصر بواسطة الفئة مخفي تماماً من الصفحة البصرية، ولكن لا يزال يتم الإعلان عنها من قبل قراء الشاشة.
+
+CSS الذي توشك في كتابته هو مجموعة شائعة من الخصائص المستخدمة للتأكد من أن العناصر مخفية بصرياً تماماً.
+
+سيحدد منتقي `span[class~="sr-only"]` أي عنصر `span` يحتوي على سمة `class` التي *تتضمن* اسم `sr-only`. أنشئ هذا منتقي، واعطيه خاصية `border` بقيمة `0`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `span[class~="sr-only"]`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]'));
+```
+
+يجب أن يحتوي منتقيك `span[class~="sr-only"]` على خاصية `border` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('border-width') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md
new file mode 100644
index 00000000000..51b3e0c003a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdac1e31692f9a9ad97295.md
@@ -0,0 +1,178 @@
+---
+id: 61fdac1e31692f9a9ad97295
+title: الخطوة ٣١
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+في CSS يتم استخدام خاصية `clip` لتحديد الأجزاء المرئية في العنصر. عيّن منتقي `span[class~="sr-only"]` للحصول على `clip` خاصية `rect(1px, 1px, 1px, 1px)`.
+
+تحدد خاصية `clip-path` الشكل الذي يجب أن تتخذه خاصية `clip`. عيّن كلا من خاصية `clip-path` و `-webkit-clip-path` إلى قيمة `inset(50%)`، لتكوين مسار الخط (clip-path) على هيئة مستطيل داخل العنصر.
+
+# --hints--
+
+يجب أن يكون لمنتقيك `span[class~="sr-only"]` الخاصية `clip` بقيمة `rect(1px, 1px, 1px, 1px)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip') === 'rect(1px, 1px, 1px, 1px)');
+```
+
+يجب أن يكون لمنتقيك `span[class~="sr-only"]` لخاصية `clip-path` بقيمة `inset(50%)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('clip-path') === 'inset(50%)');
+```
+
+يجب أن يكون لمنتقيك `span[class~="sr-only"]` الخاصية `-webkit-clip-path` بقيمة `inset(50%)`.
+
+```js
+assert(/-webkit-clip-path\s*:\s*inset\(\s*50%\s*\)\s*(;|})/.test(code));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md
new file mode 100644
index 00000000000..cdbd5643df4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaea3999cb19d76ce717b.md
@@ -0,0 +1,173 @@
+---
+id: 61fdaea3999cb19d76ce717b
+title: الخطوة 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+الآن تحتاج لتقليل حجم هذه العناصر. اعطي `span[class~="sr-only"]` محدد `width` و `height` خاصية تم تعيينها إلى `1px`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `span[class~="sr-only"]` الخاص بك الخاصية `width` بقيمة `1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('width') === '1px');
+```
+
+يجب أن يكون لمنتقي `span[class~="sr-only"]` الخاص بك الخاصية `height` بقيمة `1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('height') === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
new file mode 100644
index 00000000000..9856d3d32f3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdaf9ff894b6a084ecdc1b.md
@@ -0,0 +1,175 @@
+---
+id: 61fdaf9ff894b6a084ecdc1b
+title: الخطوة 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+لمنع إفراط (overflow) محتوى النص, اعطي منتقيك `span[class~="sr-only"]` خاصية `overflow` بقيمة `hidden` و خاصية `white-space` بقيمة `nowrap`.
+
+# --hints--
+
+يجب أن يحتوي منتقيك `span[class~="sr-only"]` على خاصية `overflow` بقيمة `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('overflow') === 'hidden');
+```
+
+يجب أن يحتوي منتقيك `span[class~="sr-only"]` على خاصية `white-space` بقيمة `nowrap`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('white-space') === 'nowrap');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
new file mode 100644
index 00000000000..aaeceb31d9a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdafe6f07fd7a1c6785bc2.md
@@ -0,0 +1,183 @@
+---
+id: 61fdafe6f07fd7a1c6785bc2
+title: الخطوة ٣٤
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+أخيرا، تحتاج إلى إخراج هذه العناصر المخفية من تدفق المستند. اعطي منتقي `span[class~="sr-only"]` خاصيات `position` بقيمة `absolute`، و`padding` بقيمة `0`، و `margin` بقيمة `-1px`. ومن شأن ذلك أن يضمن عدم ظهورهم فقط, بل عدم وجودهم في نطاق عرض الصفحات أيضا.
+
+# --hints--
+
+يجب أن يحتوي منتقيك `span[class~="sr-only"]` على خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('position') === 'absolute');
+```
+
+يجب أن يحتوي منتقيك `span[class~="sr-only"]` على خاصية `padding` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('padding') === '0px');
+```
+
+يجب أن يحتوي منتقيك `span[class~="sr-only"]` على خاصية `margin` بقيمة `-1px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.getPropertyValue('margin') === '-1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  overflow: hidden;
+  white-space: nowrap;
+
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md
new file mode 100644
index 00000000000..67aae4cf22e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/61fdb04d9939f0a26ca51c2b.md
@@ -0,0 +1,193 @@
+---
+id: 61fdb04d9939f0a26ca51c2b
+title: الخطوة ٣٥
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+حان الوقت لتصميم عنوان طاولتك. أنشئ منتقي `h1`. أعطيه خاصية `max-width` بقيمة `37.25rem` وخاصية `margin` بقيمة `0 auto`، وخاصية `padding` بقيمة `1.5rem 1.25rem`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `h1`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+يجب أن يحتوي منتقيك `h1` على خاصية `max-width` بقيمة `37.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('max-width') === '37.25rem');
+```
+
+يجب أن يحتوي منتقيك `h1` على خاصية `margin` بقيمة `0 auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('margin') === '0px auto');
+```
+
+يجب أن يحتوي منتقيك `h1` على خاصية `padding` بقيمة `1.5rem 1.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('padding') === '1.5rem 1.25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md
new file mode 100644
index 00000000000..6c5241910f0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620159cd5431aa34bc6a4c9c.md
@@ -0,0 +1,199 @@
+---
+id: 620159cd5431aa34bc6a4c9c
+title: الخطوة ٣٦
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+استهدف الـ flex container باستخدام منتقي `h1 .flex`. أعطيه خاصية `display` تم تعيينها إلى `flex` لتمكين الـ flexbox layout. ثم قم بتعيين خاصية `flex-direction` إلى `column-reverse` - هذا سيعرض العناصر المدمجة من الأسفل إلى الأعلى. وأخيرا، قم بتعيين خاصية `gap` إلى `1rem` لإضافة بعض المساحة بين العناصر.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `h1 .flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex'));
+```
+
+يجب أن يحتوي منتقي `h1 .flex` على خاصية `display` بقيمة `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('display') === 'flex');
+```
+
+يجب أن يكون لمنتقي `h1 .flex` الخاص بك `flex-direction` تم تعيينه إلى `column-reverse`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('flex-direction') === 'column-reverse');
+```
+
+يجب أن يحتوي منتقي `h1 .flex` على خاصية `gap` بقيمة `1rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex')?.getPropertyValue('gap') === '1rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md
new file mode 100644
index 00000000000..fada7268891
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015a5da1c95c358f079ebb.md
@@ -0,0 +1,195 @@
+---
+id: 62015a5da1c95c358f079ebb
+title: الخطوة ٣٧
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+يتم استخدام `:first-of-type` وهو pseudo-selector لاستهداف العنصر الأول الذي يتطابق مع المنتقى. قم بانشاء منتقى `h1 .flex span:first-of-type` لاستهداف اول عنصر `span` في container الـ `.flex` الخاص بك. تذكر أن العناصر `span` الخاصة بك معكوسة بصريا، لذلك سيبدو أن هذا هو العنصر الثاني في الصفحة.
+
+اعطي المنتقي الجديد خاصية `font-size` من `0.7em` لجعله يبدو مثل sub-heading.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `h1 .flex span:first-of-type`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type'));
+```
+
+يجب ان يكون لدى منتقي `h1 .flex span:first-of-type` خاصية `font-size` بقيمة `0.7em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:first-of-type')?.getPropertyValue('font-size') === '0.7em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md
new file mode 100644
index 00000000000..1998b8219e4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015cd2654a1139321a89d2.md
@@ -0,0 +1,197 @@
+---
+id: 62015cd2654a1139321a89d2
+title: الخطوة ٣٨
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+يقوم `:last-of-type` و هو pseudo-selector بالعكس تمامًا - فهو يستهدف العنصر الأخير الذي يطابق المنتقى. قم بانشاء `h1 .flex span:last-of-type` لاستهداف اخر `span` في flex container الخاص بك و قم بأعطائه خاصية `font-size` بقيمة `1.2em` لجله يبدو مثل header.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `h1 .flex span:last-of-type`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type'));
+```
+
+يجب ان يكون لدى منتقي `h1 .flex span:last-of-type` خاصية `font-size` بقيمة `1.2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1 .flex span:last-of-type')?.getPropertyValue('font-size') === '1.2em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md
new file mode 100644
index 00000000000..52dc037c011
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62015d8942384c3aed48329e.md
@@ -0,0 +1,213 @@
+---
+id: 62015d8942384c3aed48329e
+title: الخطوة ٣٩
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+لقد غلفت الـ table الخاص بك في عنصر section - الآن يمكنك تصميمه لإعطاء الـ table بعض الـ borders. قم بإنشاء منتقي `section` وإعطائه خاصية `max-width` تم تعيينها إلى `40rem` للتصميم المستجيب (responsive design). عيّن خاصية `margin` إلى `0 auto` لتوسيطها، وعيّن خاصية `border` إلى `2px solid #d0d0d5`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `section`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section'));
+```
+
+يجب أن يكون لمنتقي `section` خاصية `max-width` بقيمة `40rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('max-width') === '40rem');
+```
+
+يجب أن يكون لمنتقي `section` الخاص بك خاصية `margin` بقيمة `0 auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('margin') === '0px auto');
+```
+
+يجب أن يكون لمنتقي `section` الخاص بك خاصية `border` بقمية `2px solid #d0d0d5`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('section')?.getPropertyValue('border') === '2px solid rgb(208, 208, 213)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md
new file mode 100644
index 00000000000..ea95c8513a8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620167374bb8b4455cd11125.md
@@ -0,0 +1,225 @@
+---
+id: 620167374bb8b4455cd11125
+title: الخطوة ٤٠
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+الجزء الأخير من عنوان الجدول هو سنين خاصة بك. إنشاء منتقي `#years` وتمكين flexbox. بدل المحتوى إلى نهاية flex direction، وجعل العنصر sticky. أصلحه في الجزء العلوي من حاويته مع `top: 0`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `#years`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years'));
+```
+
+يجب أن يحتوي منتقي `#years` على خاصية `display` بقيمة `flex`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('display') === 'flex');
+```
+
+يجب أن يكون منتقي `#years` الخاص بك `justify-content` بقيمة `flex-end`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('justify-content') === 'flex-end');
+```
+
+يجب أن يحتوي منتقي `#years` الخاص بك علي خاصية `position` بقيمة `sticky`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('position') === 'sticky');
+```
+
+يجب أن يكون لدى منتقي `#years` خاصية `top` تم تعيينها إلى `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('top') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md
new file mode 100644
index 00000000000..1edae7e8240
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620174ed519dd7506c1a4b61.md
@@ -0,0 +1,213 @@
+---
+id: 620174ed519dd7506c1a4b61
+title: الخطوة ٤١
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+الآن قم بتطبيق بعض الألوان على `#years` الخاص بك. استخدم `#fff` مع النص و `#0a0a23` مع الخلفية.
+
+# --hints--
+
+يجب أن يكون لدى `#years` خاصية `color` تم تعيينها إلى `#fff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('color') === 'rgb(255, 255, 255)');
+```
+
+يجب أن يكون لدى `#years` خاصية `background-color` تم تعيينها إلى `#0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('background-color') === 'rgb(10, 10, 35)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md
new file mode 100644
index 00000000000..801a360a457
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620175b3710a0951cfa86edf.md
@@ -0,0 +1,230 @@
+---
+id: 620175b3710a0951cfa86edf
+title: الخطوة ٤٢
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+دالة `calc()` هي دالة CSS تسمح لك بحساب قيمة استنادا إلى قيم أخرى. على سبيل المثال، يمكنك استخدامه لحساب عرض المنفذ (viewport) مطروحا منه margin العنصر:
+
+```css
+.example {
+  margin: 10px;
+  width: calc(100% - 20px);
+}
+```
+
+تأكد من عدم إخفاء years عن طريق إعداد `z-index` لـ `999`. ثم أعطيه `margin` من `0 -2px`، و `padding` بقيمة `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+
+# --hints--
+
+يجب أن يكون لدى منتقي `#years` خاصية `z-index` تم تعيينها إلى `999`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('z-index') === '999');
+```
+
+يجب أن يكون لمنتقي `#years` الخاص بك خاصية `margin` بقيمة `0 -2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('margin') === '0px -2px');
+```
+
+يجب أن يحتوي منتقي `#years` الخاص بك على خاصية `padding` تم تعيينها إلى `0.5rem calc(1.25rem + 2px) 0.5rem 0`.
+
+```js
+const padding = new __helpers.CSSHelp(document).getStyle('#years')?.getPropertyValue('padding');
+assert(['0.5rem calc(1.25rem + 2px) 0.5rem 0px', '0.5rem calc(2px + 1.25rem) 0.5rem 0px'].includes(padding));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+--fcc-editable-region--
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md
new file mode 100644
index 00000000000..a46d18cca52
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201782cc420715562f36271.md
@@ -0,0 +1,233 @@
+---
+id: 6201782cc420715562f36271
+title: الخطوة ٤٣
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+قم بتهيئة النص داخل عنصر `#years`> الخاص بك عن طريق إنشاء منتقي `#years span[class]`. سوف تستهدف الجملة `span[class]` أي عنصر `span` يحتوي على `class` من الخواص. بغض النظر عن قيمة السمة.
+
+أعطِي المنتقي الجديد خطًا `bold`، وعرض `4.5rem`، والنص متحاذي (aligned) لليمين.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `#years span[class]`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]'));
+```
+
+يجب يحتوي منتقي `#years span[class]` الخاص بك على خاصية `font-weight` بقيمة `bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('font-weight') === 'bold');
+```
+
+يجب يحتوي منتقي `#years span[class]` الخاص بك على خاصية `width` بقيمة `4.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('width') === '4.5rem');
+```
+
+يجب يحتوي منتقي `#years span[class]` الخاص بك على خاصية `text-align` بقيمة `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#years span[class]')?.getPropertyValue('text-align') === 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md
new file mode 100644
index 00000000000..6097710f79b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620179bc0a6a2358c72b90ad.md
@@ -0,0 +1,225 @@
+---
+id: 620179bc0a6a2358c72b90ad
+title: الخطوة ٤٤
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+لقد غلفت الـ tables الخاصة بك في حاوية (container) باستخدام class يدعى `table-wrap`. قم بإنشاء منتقي لذلك الـ class، وقم بإعطائه `padding` بقيمة `0 0.75rem 1.5rem 0.75rem`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.table-wrap`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap'));
+```
+
+يجب أن يكون لمنتقي `.table-wrap` الخاص بك خاصية `padding` محددة إلى `0 0.75rem 1.5rem 0.75rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.table-wrap')?.getPropertyValue('padding') === '0px 0.75rem 1.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md
new file mode 100644
index 00000000000..c846680bcac
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017b6f47454059bf2d3bd1.md
@@ -0,0 +1,231 @@
+---
+id: 62017b6f47454059bf2d3bd1
+title: الخطوة ٤٥
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+قبل أن تبدأ في الغوص في الـ table نفسها، فإن عناصرك `span` مدعومة بالخط الداكن (bolded). قم بإنشاء منتقي `span:not(.sr-only)` وإعطائه خاصية `font-weight` بقيمة `normal`.
+
+يتم استخدام `:not()` وهو عنصر زائف (pseudo-selector) لاستهداف جميع العناصر التي لا تتطابق مع المنتقي - في هذه الحالة أي من عناصرك `span` لا يحتوي على فئة (class) تسمى `sr-only`. هذا يضمن عدم الكتابة فوق القواعد السابقة الخاصة بمنتقي `span[class~="sr-only"]`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `span:not(.sr-only)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)'));
+```
+
+يجب ان يكون لدى منتقى`span:not(.sr-only)` الـ `font-weight` بقيمة `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md
new file mode 100644
index 00000000000..ac9f9937767
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017f47c87be96457c49f46.md
@@ -0,0 +1,299 @@
+---
+id: 62017f47c87be96457c49f46
+title: الخطوة ٤٦
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+بدلاً من أن تضطر إلى التحقق باستمرار أنك لا تستبدل خصائصك السابقة، يمكنك استخدام `!important` لضمان تطبيق هذه الخصائص دائما، بغض النظر عن الترتيب أو الخصوصية (specificity).
+
+اعطي كل خاصية في منتقى `span[class~="sr-only"]` الكلمة `!important`. لا تقم بتغيير أي من القيم.
+
+# --hints--
+
+المنتقى `span[class~="sr-only"]` يجب أن يحتوي على الخاصية `border` بقيمة `0 !important`.
+
+```js
+// log it
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('border: 0px !important;') || text.includes('border: 0px none !important'));
+```
+
+يجب أن يكون لمنتقي `span[class~="sr-only"]` الخاص بك الخاصية `clip` بقيمة `rect(1px, 1px, 1px, 1px) !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip: rect(1px, 1px, 1px, 1px) !important;'));
+```
+
+يجب أن يكون لمنتقي `span[class~="sr-only"]` الخاص بك الخاصية `clip-path` بقيمة `inset(50%) !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('clip-path: inset(50%) !important;'));
+```
+
+يجب أن يكون لمنتقي `span[class~="sr-only"]` الخاص بك الخاصية `-webkit-clip-path` بقيمة `inset(50%) !important`.
+
+```js
+// this one gets removed apparently
+assert(code.includes('-webkit-clip-path: inset(50%) !important;'));
+```
+
+المنتقى `span[class~="sr-only"]` يجب أن يحتوي على الخاصية `height` بقيمة `1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('height: 1px !important;'));
+```
+
+المنتقى `span[class~="sr-only"]` يجب أن يحتوي على الخاصية `width` بقيمة `1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('width: 1px !important;'));
+```
+
+المنتقى `span[class~="sr-only"]` يجب أن يحتوي على الخاصية `position` بقيمة `absolute !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('position: absolute !important;'));
+```
+
+المنتقى `span[class~="sr-only"]` يجب أن يحتوي على الخاصية `overflow` بقيمة `hidden !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('overflow: hidden !important;'));
+```
+
+المنتقى `span[class~="sr-only"]` يجب أن يحتوي على الخاصية `white-space` بقيمة `nowrap !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('white-space: nowrap !important;'));
+```
+
+المنتقى `span[class~="sr-only"]` يجب أن يحتوي على الخاصية `padding` بقيمة `0 !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('padding: 0px !important;'));
+```
+
+المنتقى `span[class~="sr-only"]` يجب أن يحتوي على الخاصية `margin` بقيمة `-1px !important`.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('span[class~="sr-only"]')?.cssText;
+assert(text.includes('margin: -1px !important;'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+span[class~="sr-only"] {
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  -webkit-clip-path: inset(50%);
+  height: 1px;
+  width: 1px;
+  position: absolute;
+  overflow: hidden;
+  white-space: nowrap;
+  padding: 0;
+  margin: -1px;
+}
+--fcc-editable-region--
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span:not(.sr-only) {
+  font-weight: normal;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md
new file mode 100644
index 00000000000..23616daaf28
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62017fa5bbef406580ceb44f.md
@@ -0,0 +1,237 @@
+---
+id: 62017fa5bbef406580ceb44f
+title: الخطوة ٤٧
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+الآن بعد أن أضافت الكلمة `!important` الرئيسة، يمكنك إزالة `:not(.sr-only)` من منتقي `span` الخاص بك.
+
+# --hints--
+
+يجب ألّا يكون لديك منتقي `span:not(.sr-only)`.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span:not(.sr-only)')));
+```
+
+يجب أن يكون لديك منتقي `span`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span'));
+```
+
+لا يجب عليك تغيير `font-weight`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('span')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span:not(.sr-only) {
+  font-weight: normal;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md
new file mode 100644
index 00000000000..2c7a79527fa
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018243f046a368fab8ffb6.md
@@ -0,0 +1,239 @@
+---
+id: 62018243f046a368fab8ffb6
+title: الخطوة ٤٨
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+أنشئ منتقي `table` لاستهداف الجداول الخاصة بك. تعيين خاصية `border-collapse` بقيمة `collapse`، وهذا من شأنه أن يسمح بانهيار حدود الغرفة في حدود واحدة، بدلا من الحدود حول كل غرفة. قم أيضا بتعيين خاصية `border` إلى `0` لإخفاء الحدود نفسها.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `table`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table'));
+```
+
+يجب أن يكون لمنتقي `table` الخاص بك الخاصية `border-collapse` بقيمة `collapse`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-collapse') === 'collapse');
+```
+
+يجب يحتوي لمنتقي `table` الخاص بك على الخاصية `border` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('border-width') === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md
new file mode 100644
index 00000000000..98eb3e745a2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201830cb0c74b69f1b41635.md
@@ -0,0 +1,243 @@
+---
+id: 6201830cb0c74b69f1b41635
+title: الخطوة ٤٩
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+تحقق أن جدولك يملأ حاوية بخاصية `width` بقيمة `100%`، ثم وضعها نسبياً وإعطائها هامشاً (relatively) أعلى من `3rem`.
+
+# --hints--
+
+يجب يحتوي لمنتقي `table` الخاص بك على الخاصية `width` بقيمة `100%`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('width') === '100%');
+```
+
+يجب يحتوي لمنتقي `table` الخاص بك على الخاصية `position` بقيمة `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('position') === 'relative');
+```
+
+يجب يحتوي لمنتقي `table` الخاص بك على خاصية `margin-top` بقيمة `3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table')?.getPropertyValue('margin-top') === '3rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+--fcc-editable-region--
+table {
+  border-collapse: collapse;
+  border: 0;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md
new file mode 100644
index 00000000000..847389e69d6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620186f4b6b8356d2def576b.md
@@ -0,0 +1,253 @@
+---
+id: 620186f4b6b8356d2def576b
+title: الخطوة 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+بعد ذلك تحتاج إلى تصميم عناصر `caption` لكي تبدو أكثر مثل headers. قم بإنشاء منتقي `table caption`. عيّن لون النص ليكون `#356eaf`، ، و بحجم `1.3em`، و سمك خط (font-weight) عادي (normal).
+
+# --hints--
+
+يجب أن يكون لديك منتقي `table caption`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption'));
+```
+
+يجب أن يكون لمنتقي`table caption` الخاص بك خاصية `color` محددة إلى `#356eaf`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('color') === 'rgb(53, 110, 175)');
+```
+
+يجب أن يكون لمنتقي`table caption` الخاص بك خاصية `font-size` بقيمة `1.3em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-size') === '1.3em');
+```
+
+يجب أن يكون لمنتقي`table caption` الخاص بك خاصية `font-weight` بقيمة `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('font-weight') === 'normal');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md
new file mode 100644
index 00000000000..49c1d115a2b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ba1aa263770c953be66.md
@@ -0,0 +1,252 @@
+---
+id: 62018ba1aa263770c953be66
+title: الخطوة ٥١
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+الآن اعطي التسميات التوضيحية موقفا مطلقا (absolute)، و حولها من `-2.25rem` في الأعلى و من `0.5rem` في اليسار.
+
+# --hints--
+
+يجب يحتوي منتقي `table caption` الخاص بك على `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('position') === 'absolute');
+```
+
+يجب يحتوي منتقي `table caption` الخاص بك على `top` بقيمة `-2.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('top') === '-2.25rem');
+```
+
+يجب يحتوي منتقي `table caption` الخاص بك على `left` بقيمة `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('table caption')?.getPropertyValue('left') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+--fcc-editable-region--
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md
new file mode 100644
index 00000000000..533226988aa
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018c3e94434a71af1d5eaa.md
@@ -0,0 +1,262 @@
+---
+id: 62018c3e94434a71af1d5eaa
+title: الخطوة ٥٢
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+أنشئ منتقي لاستهداف عناصر `td` داخل جسم الجدول الخاص بك. أعطيهم عرض (width) لملء طريقة العرض، مع حد أدنى والحد الأقصى `4rem`. ويكفل هذا النهج تحديد العرض، في حين أن إعداد `width` على وجه التحديد سيسمح للعناصر بالانكماش (shrink) إلى الحاوية (لأننا نستخدم flexbox).
+
+# --hints--
+
+يجب أن يكون لديك منتقي `tbody td`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td'));
+```
+
+يجب أن يكون لمنتقي `tbody td` الخاص بك الخاصية `width` بقيمة `100vw`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('width') === '100vw');
+```
+
+يجب أن يكون لمنتقي `tbody td` الخاص بك الخاصية `min-width` بقيمة `4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('min-width') === '4rem');
+```
+
+يجب أن يكون لمنتقي `tbody td` الخاص بك الخاصية `max-width` بقيمة `4rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody td')?.getPropertyValue('max-width') === '4rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md
new file mode 100644
index 00000000000..22ebe348fe0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62018ec29b3ae674f40bef31.md
@@ -0,0 +1,256 @@
+---
+id: 62018ec29b3ae674f40bef31
+title: الخطوة ٥٣
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+الآن استهدف عناصر `th` داخل جسمك الجدول، وأعطاها عرض للحاوية بِرُمَّتها، أقل `12rem`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `tbody th`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody th'));
+```
+
+يجب أن يكون لمنتقي `tbody th` الخاص بك الخاصية `width` بقيمة `calc(100% - 12rem)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tbody th')?.getPropertyValue('width') === 'calc(100% - 12rem)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md
new file mode 100644
index 00000000000..69705df18e0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/62019093fe30e278e797d2f6.md
@@ -0,0 +1,266 @@
+---
+id: 62019093fe30e278e797d2f6
+title: الخطوة ٥٤
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+منتقي `[attribute="value"]` يستهدف أي عنصر له سمة ذات قيمة محددة. أنشئ منتقي `tr[class="total"]` لاستهداف عناصر `tr` الخاصة بك على وجه التحديد مع فئة `total`. أعطاها حدودا أسفل من `4px double #0a0a23` و أصنع الخط الداكن (bold).
+
+# --hints--
+
+يجب أن يكون لديك منتقي `tr[class="total"]`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]'));
+```
+
+يجب يحتوي المنتقي `tr[class="total"]` الخاص بك على خاصية `border-bottom` بقيمة `4px double #0a0a23`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('border-bottom') === '4px double rgb(10, 10, 35)');
+```
+
+يجب يحتوي منتقي `tr[class="total"]` الخاص بك على خاصية `font-weight` بقيمة `bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"]')?.getPropertyValue('font-weight') === 'bold');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md
new file mode 100644
index 00000000000..b5ad9476483
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620191707bc65579ddd3ce15.md
@@ -0,0 +1,271 @@
+---
+id: 620191707bc65579ddd3ce15
+title: الخطوة ٥٥
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+باستخدام نفس صيغة الانتقاء، استهدف عناصر `th` داخل صفوف الجدول حيث `class` باسم `total`. محاذاة النص إلى اليمين، وإعطائه padding من `0.5rem 0 0.25rem 0.5rem`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `tr[class="total"] th`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th'));
+```
+
+يجب يحتوي منتقي `tr[class="total"] th` الخاص بك على خاصية `text-align` بقيمة `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('text-align') === 'left');
+```
+
+يجب أن يكون لمنتقي `tr[class="total"] th` خاصية `padding` بقيمة `0.5rem 0 0.25rem 0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr[class="total"] th')?.getPropertyValue('padding') === '0.5rem 0px 0.25rem 0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md
new file mode 100644
index 00000000000..a7bd2d58ba3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620192a767533a7ad19d96d7.md
@@ -0,0 +1,278 @@
+---
+id: 620192a767533a7ad19d96d7
+title: الخطوة ٥٦
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+الفرق الرئيسي بين `tr[class="total"]` و `tr.total` هو أن الأول سيختار عناصر `tr` حيث classs الـ *only* هو `total`. وسيقوم الثاني باختيار عناصر `tr` حيث *يشمل* الـ class الـ total.
+
+في حالتك `tr.total` سوف يعمل. يمكنك استخدام هذا المنتقى لاستهداف جميع عناصر `td` داخل صفوف `.total`. قم بمحاذاة النص إلى اليمين، وإعطائه padding من `0 0.25rem`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `tr.total td`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td'));
+```
+
+يجب ان يكون لمنتقي `tr.total td` خاصية `text-align` بقيمة `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('text-align') === 'right');
+```
+
+يجب ان يكون لمنتقي `tr.total td` خاصية `padding` بقيمة `0 0.25rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td')?.getPropertyValue('padding') === '0px 0.25rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md
new file mode 100644
index 00000000000..2cd9633564c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201995d9ab88e80f1989dce.md
@@ -0,0 +1,275 @@
+---
+id: 6201995d9ab88e80f1989dce
+title: الخطوة ٥٧
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+`:nth-of-type()` يتم استخدام عناصر ذأفة لاستهداف عناصر محددة بناء على ترتيبها بين الأشقاء من نفس النوع. استخدم هذا المنتقي الزائف لاستهداف العنصر الثالث `td` ضمن `total` صفوف الجدول. أعطاها الحشوة الصحيحة من `0.5rem`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `tr.total td:nth-of-type(3)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)'));
+```
+
+يجب يحتوي لمنتقي `tr.total td:nth-of-type(3)` على خاصية `padding-right` بقيمة `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total td:nth-of-type(3)')?.getPropertyValue('padding-right') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md
new file mode 100644
index 00000000000..b6647bac83a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/620199c7a7a32c81d4db3410.md
@@ -0,0 +1,279 @@
+---
+id: 620199c7a7a32c81d4db3410
+title: الخطوة ٥٨
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+اعطِ عناصر `tr.total` تأثير hover يغير الخلفية إلى `#99c9ff`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `tr.total:hover`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover'));
+```
+
+يجب أن بكون لمنتقي `tr.total:hover`خاصية `background-color` بقيمة `#99c9ff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.total:hover')?.getPropertyValue('background-color') === 'rgb(153, 201, 255)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md
new file mode 100644
index 00000000000..8538abdfcda
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1a7af32c287bd6b8183.md
@@ -0,0 +1,285 @@
+---
+id: 6201a1a7af32c287bd6b8183
+title: الخطوة ٥٩
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+حدد عناصر `td` الخاصة بك مع `class` قيمها `current`، وقم بجعل الخط المائل.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `td.current`.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert(def('td.current') || def('td[class="current"]'));
+```
+
+يجب يحتوي لمنتقي `td.current` على خاصية <`font-style` بقيمة `italic`.
+
+```js
+const font = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('font-style');
+assert((font('td.current') || font('td[class="current"]')) === 'italic');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md
new file mode 100644
index 00000000000..2174cdd5495
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a1cc668a34888f5b2f52.md
@@ -0,0 +1,289 @@
+---
+id: 6201a1cc668a34888f5b2f52
+title: الخطوة ٦٠
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+حدد عناصر `tr` مع `class` بقيمة `data`. إعطائهم صورة خلفية بقيمة `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `tr.data`.
+
+```js
+const def = (s) => new __helpers.CSSHelp(document).getStyle(s);
+assert(def('tr.data') || def('tr[class="data"]'));
+```
+
+يجب يحتوي منتقي `tr.data` الخاص بك على `background-image` بقيمة `linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem)`.
+
+```js
+const bg = (s) => new __helpers.CSSHelp(document).getStyle(s)?.getPropertyValue('background-image');
+assert((bg('tr.data') || bg('tr[class="data"]')) === 'linear-gradient(rgb(223, 223, 226) 1.845rem, white 1.845rem)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md
new file mode 100644
index 00000000000..19f17011901
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a20d742f5c89736c8cfb.md
@@ -0,0 +1,303 @@
+---
+id: 6201a20d742f5c89736c8cfb
+title: الخطوة ٦١
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+حدد عناصر `th` ضمن عناصر `tr.data` الخاصة بك. محاذاة النص إلى اليسار، وإعطائهم حشوة (padding) العلوية من `0.3rem` وحشوة يسارية من `0.5rem`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `tr.data th`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th'));
+```
+
+يجب يحتوي لمنتقي `tr.data th` على خاصية `text-align` بقيمة `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('text-align') === 'left');
+```
+
+يجب أن يكون لمنتقي `tr.data th` خاصية `padding-top` بقيمة `0.3rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-top') === '0.3rem');
+```
+
+يجب أن يكون لمنتقي `tr.data th` خاصية `padding-left` بقيمة `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th')?.getPropertyValue('padding-left') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md
new file mode 100644
index 00000000000..05ea2f9d8c6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a42e39bf3b95b6a33bf3.md
@@ -0,0 +1,321 @@
+---
+id: 6201a42e39bf3b95b6a33bf3
+title: الخطوة ٦٢
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+إنشاء منتقي `tr.data th .description` لاستهداف العناصر مع منتقي `class` بقيمة `description` التي تقع ضمن عناصر `th` في `.data` صفوف الجدول. اعطيهم عرض كتلة، اجعل النص بحروف مائلة بوزن عادي، ووضعهم باستخدام `padding` الذي تم تعيينها إلى `1rem 0 0.75rem` والهامش الأيمن من `-13.5rem`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `tr.data th .description`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description'));
+```
+
+يجب أن يحتوي منتقي `tr.data th .description` على خاصية `display` بقيمة `block`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('display') === 'block');
+```
+
+يجب أن يحتوي منتقي `tr.data th .description` على خاصية `font-style` بقيمة `italic`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-style') === 'italic');
+```
+
+يجب أن يحتوي منتقي `tr.data th .description` على خاصية `font-weight` بقيمة `normal`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('font-weight') === 'normal');
+```
+
+يجب أن يكون لمنتقي `tr.data th .description` خاصية `padding` بقيمة `1rem 0 0.75rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('padding') === '1rem 0px 0.75rem');
+```
+
+يجب أن يكون لمنتقي `tr.data th .description` خاصية `margin-right` بقيمة `-13.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data th .description')?.getPropertyValue('margin-right') === '-13.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+span {
+  font-weight: normal;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md
new file mode 100644
index 00000000000..0fea89329da
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a4adcc6414968b391592.md
@@ -0,0 +1,297 @@
+---
+id: 6201a4adcc6414968b391592
+title: الخطوة ٦٣
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+تحتوي عناصر `span` خاصة بك على أسلوب أكثر تحديداً، مما يعني أنه يمكنك إزالة قاعدة `span` الخاصة بك.
+
+# --hints--
+
+يجب ألّا يكون لديك منتقي `span`.
+
+```js
+assert(!(new __helpers.CSSHelp(document).getStyle('span')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+--fcc-editable-region--
+span {
+  font-weight: normal;
+}
+--fcc-editable-region--
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md
new file mode 100644
index 00000000000..9910b9bae97
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a5258af7b398b030bfaf.md
@@ -0,0 +1,313 @@
+---
+id: 6201a5258af7b398b030bfaf
+title: الخطوة ٦٤
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+المبالغ الدولارية الخاصة بك غير متوائمة حاليا. أنشئ منتقي لاستهداف عناصر `td` ضمن عناصر `tr.data` الخاصة بك. محاذاة النص عمودياً إلى الأعلى، مواءمة النص أفقياً إلى اليمين، وتعيين الحشوة إلى `0.3rem 0.25rem 0`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `tr.data td`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td'));
+```
+
+يجب يحتوي لمنتقي `tr.data td` على خاصية `vertical-align` بقيمة `top`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('vertical-align') === 'top');
+```
+
+يجب يحتوي لمنتقي `tr.data td` على خاصية `text-align` بقيمة `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('text-align') === 'right');
+```
+
+يجب يحتوي لمنتقي `tr.data td` على خاصية `padding` بقيمة `0.3rem 0.25rem 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td')?.getPropertyValue('padding') === '0.3rem 0.25rem 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md
new file mode 100644
index 00000000000..cba5363f08f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-more-about-css-pseudo-selectors-by-building-a-balance-sheet/6201a59be346d399c21d10b1.md
@@ -0,0 +1,591 @@
+---
+id: 6201a59be346d399c21d10b1
+title: الخطوة ٦٥
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+أنشئ منتقي آخر لعناصر `td` داخل عنصر `tr.data` الخاص بك، ولكن على وجه التحديد حدد العنصر الأخير. أعطاها الحشوة الصحيحة من `0.5rem`.
+
+بهذا اكتمل balance sheet الخاصة بك!
+
+# --hints--
+
+يجب أن يكون لديك منتقي `tr.data td:last-of-type`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type'));
+```
+
+يجب يحتوي لمنتقي `tr.data td:last-of-type` على خاصية `padding-right` بقيمة `0.5rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('tr.data td:last-of-type')?.getPropertyValue('padding-right') === '0.5rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Balance Sheet</title>
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <main>
+      <section>
+        <h1>
+          <span class="flex">
+            <span>AcmeWidgetCorp</span>
+            <span>Balance Sheet</span>
+          </span>
+        </h1>
+        <div id="years" aria-hidden="true">
+          <span class="year">2019</span>
+          <span class="year">2020</span>
+          <span class="year">2021</span>
+        </div>
+        <div class="table-wrap">
+          <table>
+            <caption>Assets</caption>
+            <thead>
+              <tr>
+                <td></td>
+                <th><span class="sr-only year">2019</span></th>
+                <th><span class="sr-only year">2020</span></th>
+                <th class="current"><span class="sr-only year">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Cash <span class="description">This is the cash we currently have on hand.</span></th>
+                <td>$25</td>
+                <td>$30</td>
+                <td class="current">$28</td>
+              </tr>
+              <tr class="data">
+                <th>Checking <span class="description">Our primary transactional account.</span></th>
+                <td>$54</td>
+                <td>$56</td>
+                <td class="current">$53</td>
+              </tr>
+              <tr class="data">
+                <th>Savings <span class="description">Funds set aside for emergencies.</span></th>
+                <td>$500</td>
+                <td>$650</td>
+                <td class="current">$728</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Assets</span></th>
+                <td>$579</td>
+                <td>$736</td>
+                <td class="current">$809</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Liabilities</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="data">
+                <th>Loans <span class="description">The outstanding balance on our startup loan.</span></th>
+                <td>$500</td>
+                <td>$250</td>
+                <td class="current">$0</td>
+              </tr>
+              <tr class="data">
+                <th>Expenses <span class="description">Annual anticipated expenses, such as payroll.</span></th>
+                <td>$200</td>
+                <td>$300</td>
+                <td class="current">$400</td>
+              </tr>
+              <tr class="data">
+                <th>Credit <span class="description">The outstanding balance on our credit card.</span></th>
+                <td>$50</td>
+                <td>$50</td>
+                <td class="current">$75</td>
+              </tr>
+              <tr class="total">
+                <th>Total <span class="sr-only">Liabilities</span></th>
+                <td>$750</td>
+                <td>$600</td>
+                <td class="current">$475</td>
+              </tr>
+            </tbody>
+          </table>
+          <table>
+            <caption>Net Worth</caption>
+            <thead>
+              <tr>
+              <td></td>
+              <th><span class="sr-only">2019</span></th>
+              <th><span class="sr-only">2020</span></th>
+              <th><span class="sr-only">2021</span></th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr class="total">
+                <th>Total <span class="sr-only">Net Worth</span></th>
+                <td>$-171</td>
+                <td>$136</td>
+                <td class="current">$334</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      </section>
+    </main>
+  </body>
+</html>
+```
+
+```css
+span[class~="sr-only"] {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  clip-path: inset(50%) !important;
+  -webkit-clip-path: inset(50%) !important;
+  height: 1px !important;
+  width: 1px !important;
+  position: absolute !important;
+  overflow: hidden !important;
+  white-space: nowrap !important;
+  padding: 0 !important;
+  margin: -1px !important;
+}
+
+html {
+  box-sizing: border-box;
+}
+
+body {
+  font-family: sans-serif;
+  color: #0a0a23;
+}
+
+h1 {
+  max-width: 37.25rem;
+  margin: 0 auto;
+  padding: 1.5rem 1.25rem;
+}
+
+h1 .flex {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 1rem;
+}
+
+h1 .flex span:first-of-type {
+  font-size: 0.7em;
+}
+
+h1 .flex span:last-of-type {
+  font-size: 1.2em;
+}
+
+section {
+  max-width: 40rem;
+  margin: 0 auto;
+  border: 2px solid #d0d0d5;
+}
+
+#years {
+  display: flex;
+  justify-content: flex-end;
+  position: sticky;
+  top: 0;
+  background: #0a0a23;
+  color: #fff;
+  z-index: 999;
+  padding: 0.5rem calc(1.25rem + 2px) 0.5rem 0;
+  margin: 0 -2px;
+}
+
+#years span[class] {
+  font-weight: bold;
+  width: 4.5rem;
+  text-align: right;
+}
+
+.table-wrap {
+  padding: 0 0.75rem 1.5rem 0.75rem;
+}
+
+table {
+  border-collapse: collapse;
+  border: 0;
+  width: 100%;
+  position: relative;
+  margin-top: 3rem;
+}
+
+table caption {
+  color: #356eaf;
+  font-size: 1.3em;
+  font-weight: normal;
+  position: absolute;
+  top: -2.25rem;
+  left: 0.5rem;
+}
+
+tbody td {
+  width: 100vw;
+  min-width: 4rem;
+  max-width: 4rem;
+}
+
+tbody th {
+  width: calc(100% - 12rem);
+}
+
+tr[class="total"] {
+  border-bottom: 4px double #0a0a23;
+  font-weight: bold;
+}
+
+tr[class="total"] th {
+  text-align: left;
+  padding: 0.5rem 0 0.25rem 0.5rem;
+}
+
+tr.total td {
+  text-align: right;
+  padding: 0 0.25rem;
+}
+
+tr.total td:nth-of-type(3) {
+  padding-right: 0.5rem;
+}
+
+tr.total:hover {
+  background-color: #99c9ff;
+}
+
+td.current {
+  font-style: italic;
+}
+
+tr.data {
+  background-image: linear-gradient(to bottom, #dfdfe2 1.845rem, white 1.845rem);
+}
+
+tr.data th {
+  text-align: left;
+  padding-top: 0.3rem;
+  padding-left: 0.5rem;
+}
+
+tr.data th .description {
+  display: block;
+  font-weight: normal;
+  font-style: italic;
+  padding: 1rem 0 0.75rem;
+  margin-right: -13.5rem;
+}
+
+tr.data td {
+  vertical-align: top;
+  padding: 0.3rem 0.25rem 0;
+  text-align: right;
+}
+
+tr.data td:last-of-type {
+  padding-right: 0.5rem;
+}
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md
new file mode 100644
index 00000000000..020347640d0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e6afc009b450a437940a1.md
@@ -0,0 +1,133 @@
+---
+id: 612e6afc009b450a437940a1
+title: الخطوة 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+ابدأ ببنية HTML الأساسية. أضف تعريف `DOCTYPE` والعناصر `html`، و`head`، و`body`، و`title`.
+
+اجعل الإنجليزية لغة هذه الصحفة. اجعل العنوان هو `Piano` باستعمال الوسم `title`.
+
+# --hints--
+
+يجب أن يحتوي الكود الخاص بك على مرجع `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE/gi));
+```
+
+عليك أن تضيف مسافة بعد مرجع `DOCTYPE`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+/gi));
+```
+
+عليك أن تعرّف أن نوع مستندك هو `html`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html/gi));
+```
+
+عليك أن تغلق تعريف `DOCTYPE` بواسطة رمز أكبر من <code dir="ltr">&gt;</code> بعد ذكر النوع.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
+```
+
+عنصر `html` الخاص بك يجب أن يكون له opening tag معه سمة `lang` تساوي `en`.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+عنصر `html` الخاص بك يجب أن يكون له closing tag.
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+تعريف `DOCTYPE` الخاص بك يجب أن يكون عند بداية HTML الخاص بك.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
+```
+
+يجب أن يكون لديك الـ opening tag للـ `head`.
+
+```js
+assert(code.match(/<head\s*>/i));
+```
+
+يجب أن يكون لديك الـ closing tag للـ `head`.
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+يجب أن يكون لديك الـ opening tag للـ `body`.
+
+```js
+assert(code.match(/<body\s*>/i));
+```
+
+يجب أن يكون لديك الـ closing tag للـ `body`.
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+يجب أن يكون عناصر `head` و `body` متلازمين (siblings).
+
+```js
+assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
+```
+
+عنصر `head` يجب أن يكون داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
+```
+
+عنصر `body` يجب أن يكون داخل عنصر `html`.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
+```
+
+الكود يجب أن يكون فيه عنصر `title`.
+
+```js
+const title = document.querySelector('title');
+assert.exists(title);
+```
+
+مشروعك يجب أن يكون له العنوان `Piano`.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim()?.toLowerCase(), 'piano')
+```
+
+تذكر، الإملاء وتصغير وتكبير الحروف (casing) مهمان في العنوان.
+
+```js
+const title = document.querySelector('title');
+assert.equal(title?.text?.trim(), 'Piano');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md
new file mode 100644
index 00000000000..5a91e4b03fb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e77aba7ca691f598feb02.md
@@ -0,0 +1,64 @@
+---
+id: 612e77aba7ca691f598feb02
+title: الخطوة الثانية
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+أضف وسمين `meta` واحدة لتحسين صفحتك للأجهزة المحمولة، وواحدة لتحديد `charset` مقبول للصفحة.
+
+# --hints--
+
+يجب عليك إضافة عنصرين `meta` إلى الصفحة الخاصة بك.
+
+```js
+const meta = document.querySelector('meta');
+assert.exists(meta);
+```
+
+يجب أن يكون لديك عنصران `meta`.
+
+```js
+const meta = document.querySelectorAll('meta');
+assert(meta?.length === 2);
+```
+
+عنصر `meta` واحد يجب أن يحتوي على `name` تم تعيينه إلى `viewport`، و `content` تم تعيينه إلى `width=device-width, initial-scale=1.0`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => m?.getAttribute('name') === 'viewport' && m?.getAttribute('content') === 'width=device-width, initial-scale=1.0' && !m?.getAttribute('charset'));
+assert.exists(target);
+```
+
+عنصر `meta` الآخر يجب أن يحتوي على السمة `charset` بقيمة `UTF-8`.
+
+```js
+const meta = [...document.querySelectorAll('meta')];
+const target = meta?.find(m => !m?.getAttribute('name') && !m?.getAttribute('content') && m?.getAttribute('charset')?.toLowerCase() === 'utf-8');
+assert.exists(target);
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <title>Piano</title>
+    --fcc-editable-region--
+
+    --fcc-editable-region--
+  </head>
+  <body></body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md
new file mode 100644
index 00000000000..23b87f499c7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e78af05201622d4bab8aa.md
@@ -0,0 +1,57 @@
+---
+id: 612e78af05201622d4bab8aa
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+حان الوقت لبدء العمل على البيانو. قم بإنشاء عنصر `div` داخل عنصر `body` باستخدام `id` بقيمة `piano`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` جديد.
+
+```js
+const div = document.querySelector('div');
+assert.exists(div);
+```
+
+يجب أن يكون `div` الجديد ضمن عنصر `body` الخاص بك.
+
+```js
+const div = document.querySelector('div');
+assert(div?.parentElement?.localName === 'body');
+```
+
+`div` الخاص بك يجب أن يكون له `id` بقيمة `piano`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.getAttribute('id') === 'piano');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md
new file mode 100644
index 00000000000..f3cc4eb0789
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e7d1c29fb872d6384379c.md
@@ -0,0 +1,60 @@
+---
+id: 612e7d1c29fb872d6384379c
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+قم بدمج `div` ثاني داخل `div` الموجود، وقم بتعيين `class` ليكون `keys`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` ثاني.
+
+```js
+const divDiv = document.querySelectorAll('div');
+assert(divDiv?.length === 2);
+```
+
+يجب أن يكون عنصر `div` الجديد الخاص بك داخل عنصر `div` الحالي.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.length === 1);
+assert(div?.children?.[0]?.localName === 'div');
+```
+
+عنصر `div` الجديد الخاص بك يجب أن يحتوي على `class` يسمي `keys`.
+
+```js
+const div = document.querySelector('div');
+assert(div?.children?.[0]?.className === 'keys');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    <div id="piano">
+  --fcc-editable-region--
+
+  --fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md
new file mode 100644
index 00000000000..8242d0dfcd2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e804c54d5e7308d7ebe56.md
@@ -0,0 +1,60 @@
+---
+id: 612e804c54d5e7308d7ebe56
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+داخل عنصر `.keys` قم باضافة سبع عناصر `div`. اعطهم كلهم class الـ `key`.
+
+# --hints--
+
+يجب عليك إضافة سبع عناصر `div` جديدة.
+
+```js
+const divDivDiv = document.querySelectorAll('div');
+assert(divDivDiv?.length === 9);
+```
+
+العناصر `div` السبعة الجديدة يجب ان تكون داخل عنصر `.keys`.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].length === 7);
+assert([...keys?.children].every(child => child?.tagName === 'DIV'));
+```
+
+عناصر `div` السبع الجديدة يجب ان تحتوي جميعها علي `class` معين الي `key`.
+
+```js
+const keys = document.querySelector('.keys');
+assert([...keys?.children].every(child => child?.classList?.contains('key')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys"></div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md
new file mode 100644
index 00000000000..c2589a91427
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e813b3ba67633222cbe54.md
@@ -0,0 +1,95 @@
+---
+id: 612e813b3ba67633222cbe54
+title: الخطوة ٦
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+تذكر ان سمة `class` ممكن ان تحتوي علي عدة قيم. لفصل المفاتيح البيضاء عن المفاتيح السوداء، ستضيف قيمة `class` بقيمة `black--key`. أضف هذا إلى عناصر `.key` الثانية والثالثة والخامسة والسادسة والسابعة الخاصة بك.
+
+# --hints--
+
+يجب أن يحتوي عنصر `.key` الثاني على `class` من `black--key`.
+
+```js
+const key = document.querySelectorAll('.key')?.[1];
+assert(key?.className?.includes('black--key'));
+```
+
+يجب أن يكون لـ `.key` الثالث الخاص بك `black--key` في `class`.
+
+```js
+const third = document.querySelectorAll('.key')?.[2];
+assert(third?.classList?.contains('black--key'));
+```
+
+يجب أن يكون لـ `.key` الخامس الخاص بك `black--key` في `class`.
+
+```js
+const fifth = document.querySelectorAll('.key')?.[4];
+assert(fifth?.classList?.contains('black--key'));
+```
+
+يجب أن يكون لـ `.key` السادس الخاص بك `black--key` في `class`.
+
+```js
+const sixth = document.querySelectorAll('.key')?.[5];
+assert(sixth?.classList?.contains('black--key'));
+```
+
+يجب أن يكون لـ `.key` السابع الخاص بك `black--key` في `class`.
+
+```js
+const seventh = document.querySelectorAll('.key')?.[6];
+assert(seventh?.classList?.contains('black--key'));
+```
+
+يجب أن يكون لديك 5 عناصر `.black--key`.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 5);
+```
+
+يجب أن يكون لديك 7 عناصر `.key`.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 7);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+        <div class="key"></div>
+      </div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md
new file mode 100644
index 00000000000..27c90761e69
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8279827a28352ce83a72.md
@@ -0,0 +1,74 @@
+---
+id: 612e8279827a28352ce83a72
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+الآن انسخ مجموعة العناصر `.key` السبعة وألصق مجموعتين أخريين في div الـ `.keys`.
+
+# --hints--
+
+يجب أن يكون لديك 21 عنصر `.key`.
+
+```js
+const keys = document.querySelectorAll('.key');
+assert(keys?.length === 21);
+```
+
+يجب أن يكون لديك 15 عنصر `.black--key`.
+
+```js
+const blackKeys = document.querySelectorAll('.black--key');
+assert(blackKeys?.length === 15);
+```
+
+يجب أن تكون جميع عناصر `.key` ضمن عنصر `.keys` الخاص بك.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.key')?.length === 21);
+```
+
+يجب أن تكون جميع عناصر `.black--key` ضمن عنصر `.keys` الخاص بك.
+
+```js
+const keys = document.querySelector('.keys');
+assert(keys?.querySelectorAll('.black--key')?.length === 15);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+    --fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md
new file mode 100644
index 00000000000..cac36452b21
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e83ec2eca1e370f830511.md
@@ -0,0 +1,102 @@
+---
+id: 612e83ec2eca1e370f830511
+title: الخطوة ٨
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+قم بإضافة عنصر `link` ضمن عنصر `head`. لعنصر `link` هذا، قم بتعيين سمة `rel` إلى `stylesheet` و `href` إلى `./styles.css`.
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على عنصر `link`.
+
+```js
+assert.match(code, /<link/)
+```
+
+لا يجب عليك تغيير وسوم `head` الموجودة. تأكد من أنك لم تقم بحذف علامة الإغلاق (closing tag).
+
+```js
+const heads = document.querySelectorAll('head');
+assert.equal(heads?.length, 1);
+```
+
+الكود الخاص بك يجب أن يحتوي على عنصر `link` مغلق ذاتيا.
+
+```js
+assert(document.querySelectorAll('link').length === 1);
+```
+
+عنصر `link` الخاص بك يجب أن يكون داخل عنصر `head` الخاص بك.
+
+```js
+assert.exists(document.querySelector('head > link'));
+```
+
+عنصر `link` الخاص بك يجب أن يحتوي على سمة `rel` بقيمة `stylesheet`.
+
+```js
+const link_element = document.querySelector('link');
+const rel = link_element.getAttribute("rel");
+assert.equal(rel, "stylesheet");
+```
+
+عنصر `link` الخاص بك يجب أن يحتوي على سمة `href` بقيمة `styles.css`.
+
+```js
+const link = document.querySelector('link');
+assert.equal(link.dataset.href, "styles.css");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    --fcc-editable-region--
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    --fcc-editable-region--
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md
new file mode 100644
index 00000000000..fa9dfab64a7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89562043183c86df287c.md
@@ -0,0 +1,77 @@
+---
+id: 612e89562043183c86df287c
+title: الخطوة ٩
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+يمكن للمتصفحات تطبيق الـ margin الافتراضي وقيم الـ padding على عناصر محددة. للتأكد من أن البيانو الخاص بك يبدو صحيحا، تحتاج إلى إعادة تعيين الـ box model.
+
+قم بإضافة منتقي قاعدة `html` إلى ملف CSS الخاص بك، وتعيين خاصية `box-sizing` إلى `border-box`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `html`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+يجب أن يكون لمنتقي `html` الخاص بك `box-sizing` بقيمة `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css" />
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md
new file mode 100644
index 00000000000..c4f408ac66d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e89d254fe5d3df7d6693d.md
@@ -0,0 +1,83 @@
+---
+id: 612e89d254fe5d3df7d6693d
+title: الخطوة ١٠
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+الآن بعد أن قمت بإعادة تعيين box model الـ `html`، تحتاج إلى تمرير ذلك إلى العناصر التي بالداخل أيضًا. للقيام بذلك، يمكنك تعيين خاصية `box-sizing` إلى `inherit`، والذي سيخبر العناصر المستهدفة باستخدام نفس القيمة التي يستخدمها العنصر الأصلي.
+
+سوف تحتاج أيضًا إلى استهداف الـ pseudo-elements، التي هي كلمات مفتاحية خاصة تتبع منتقى. العنصران pseudo-elements اللتان ستستخدمهما هما `::before` و `::after`.
+
+يقوم منتقي `::before` بإنشاء pseudo-element وهو أول child في العنصر المحدد، بينما يقوم منتقي `::after` بإنشاء pseudo-element وهو آخر child في العنصر المحدد. هذه الـ pseudo-elements غالبا ما تستخدم لإنشاء محتوى تجميلي، والذي ستراه لاحقا في هذا المشروع.
+
+في الوقت الحالي، قم بإنشاء منتقي CSS لاستهداف جميع العناصر باستخدام `*`، وقم بتضمين pseudo-elements باستخدام `::before` و `::after`. قم بتعيين خاصية `box-sizing` إلى `inherit`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `*, ::before, ::after`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after'));
+```
+
+يجب أن يكون لمنتقي `*, ::before, ::after` الخاص بك الخاصية `box-sizing` بقيمة `inherit`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*, ::before, ::after')?.boxSizing === 'inherit');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+html {
+  box-sizing: border-box;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md
new file mode 100644
index 00000000000..21997dd44f8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e8eebe3a6dc3fcc33a66f.md
@@ -0,0 +1,95 @@
+---
+id: 612e8eebe3a6dc3fcc33a66f
+title: الخطوة ١١
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+الآن استهدف عنصر `#piano` الخاص بك بمنتقي `id`. قم بتعيين خاصية `background-color` إلى `#00471b` و الخاصية `width` إلى `992px` والخاصية `height` إلى `290px`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `#piano`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano'));
+```
+
+يجب أن يحتوي منتقي `#piano` على خاصية `background-color` بقيمة `#00471b`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.backgroundColor === 'rgb(0, 71, 27)');
+```
+
+يجب أن يكون لمنتقي `#piano` الخاص بك خاصية `width` بقيمة `992px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.width === '992px');
+```
+
+يجب أن يكون لمنتقي `#piano` الخاص بك `height` تم تعيينه إلى `290px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.height === '290px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md
new file mode 100644
index 00000000000..c31451f7b7e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e95ef2e4bdf41f69067f9.md
@@ -0,0 +1,81 @@
+---
+id: 612e95ef2e4bdf41f69067f9
+title: الخطوة ١٢
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+قم بتعيين `margin` الـ `#piano` الي `80px auto`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#piano` الخاص بك خاصية `margin` بقيمة `80px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.margin === '80px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md
new file mode 100644
index 00000000000..7c7c47fab28
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e96fc87fe8e44f69f7ec5.md
@@ -0,0 +1,102 @@
+---
+id: 612e96fc87fe8e44f69f7ec5
+title: الخطوة ١٣
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+حان الوقت لتصميم المفاتيح (style the keys). أسفل قاعدة `#piano`، استهدف عنصر `.keys` باستخدام منتقي `class`. اعطي القاعدة الجديدة خاصية `background-color` بقيمة `#040404` و خاصية `width` بقيمة `949px` و خاصية `height` بقيمة `180px`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.keys`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys'));
+```
+
+يجب أن يحتوي منتقي `.keys` على خاصية `background-color` بقيمة `#040404`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.backgroundColor === 'rgb(4, 4, 4)');
+```
+
+يجب أن يكون لمنتقي `.keys` الخاص بك الخاصية `width` بقيمة `949px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.width === '949px');
+```
+
+يجب أن يكون لمنتقي `.keys` الخاص بك الخاصية `height` بقيمة `180px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.height === '180px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md
new file mode 100644
index 00000000000..d401537f87a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e98f3245c98475e49cfc6.md
@@ -0,0 +1,88 @@
+---
+id: 612e98f3245c98475e49cfc6
+title: الخطوة ١٤
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+اعطي `.keys` الـ `padding-left` بقيمة `2px`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.keys` الخاص بك الخاصية `padding-left` بقيمة `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.paddingLeft === '2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+
+--fcc-editable-region--
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md
new file mode 100644
index 00000000000..42426ca9609
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9a21381a1949327512e6.md
@@ -0,0 +1,89 @@
+---
+id: 612e9a21381a1949327512e6
+title: خطوة ١٥
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+انقل المفاتيح إلى موضعها عن طريق ضبط منتقي `#piano`. قم بتعيين خاصية `padding` إلى `90px 20px 0 20px`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#piano` الخاص بك خاصية `padding` بقيمة `90px 20px 0 20px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.padding === '90px 20px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md
new file mode 100644
index 00000000000..483b912dd6e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9d142affc44a453655db.md
@@ -0,0 +1,117 @@
+---
+id: 612e9d142affc44a453655db
+title: الخطوة ١٦
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+حان الوقت لتصميم (style) المفاتيح (keys) نفسها. قم بإنشاء منتقي `class` لعناصر `.key`. عيّن `background-color` إلى القيمة `#ffffff` و الخاصية `position` إلى `relative`،و الخاصية `width` إلى `41px` و الخاصية `height` إلى `175px`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.key`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key'));
+```
+
+يجب أن يحتوي منتقي `.key` على خاصية `background-color` بقيمة `#ffffff`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.backgroundColor === 'rgb(255, 255, 255)');
+```
+
+يجب أن يكون لمنتقي `.key` الخاص بك الخاصية `position` بقيمة `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.position === 'relative');
+```
+
+يجب أن يكون لمنتقي `.key` الخاص بك الخاصية `width` بقيمة `41px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.width === '41px');
+```
+
+يجب أن يكون لمنتقي `.key` الخاص بك الخاصية `height` بقيمة `175px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.height === '175px');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md
new file mode 100644
index 00000000000..ad54d7287c4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612e9f1e7e5ccd4fa9ada0be.md
@@ -0,0 +1,103 @@
+---
+id: 612e9f1e7e5ccd4fa9ada0be
+title: الخطوة ١٧
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+امنح `.key` الـ `margin` بقيمة `2px` و خاصية `float` بقيمة `left`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.key` الخاص بك خاصية `margin` بقيمة `2px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.margin === '2px');
+```
+
+يجب أن يكون لمنتقي `.key` الخاص بك خاصية `float` بقيمة `left`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.float === 'left');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md
new file mode 100644
index 00000000000..4f04d761cc2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea4c4993aba52ab4aa32e.md
@@ -0,0 +1,119 @@
+---
+id: 612ea4c4993aba52ab4aa32e
+title: الخطوة ١٨
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+لقد حان الوقت الآن لاستخدام pseudo-selectors التي قمت بإعدادها مسبقا. لإنشاء المفاتيح السوداء، أضف منتقى جديد `.key.black--key::after`. هذا سوف يستهدف العناصر بـ class الـ `key black--key`، و حدد اـ pseudo-element بعد هذه العناصر في HTML.
+
+في المنتقي الجديد، عيّن `background-color` إلى `#1d1e22`. قم أيضا بتعيين خاصية `content` إلى `""`. وهذا سيجعل الـ pseudo-elements فارغة.
+
+يتم استخدام خاصية `content` لتعيين أو تجاوز (override) محتوى العنصر. بشكل افتراضي، الـ psuedo-elements التي تم إنشاؤها بواسطة `::before` و `::after` هي فارغة، ولن تعرض (render) هذه العناصر علي الصفحة. سيؤدي تعيين خاصية `content` إلى سلسلة فارغة `""` إلى ضمان عرض العنصر علي الصفحة بينما يظل فارغاً.
+
+إذا كنت ترغب في التجربة، حاول إزالة خاصية `background-color` ووضع قيم مختلفة لخاصية `content`، مثل `"♥"`. تذكر أن تتراجع (undo) عن هذه التغييرات عندما يتم إجراء الاختبارات.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.key.black--key::after`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after'));
+```
+
+يجب أن يحتوي منتقي `.key.black--key::after` على خاصية `background-color` بقيمة `#1d1e22`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.backgroundColor === 'rgb(29, 30, 34)');
+```
+
+يجب أن يحتوي منتقي `.key.black--key::after` على خاصية `content` بقيمة `""`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.content === '""');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md
new file mode 100644
index 00000000000..c1206100fec
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ea97df5742154772f312e.md
@@ -0,0 +1,110 @@
+---
+id: 612ea97df5742154772f312e
+title: الخطوة ١٩
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+قم بإعطاء `.key.black--key::after` خاصية `position` تم تعيينها إلى `absolute` و خاصية `left` تم تعيينها إلى `-18px`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.key.black--key::after` على خاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.position === 'absolute');
+```
+
+يجب أن يحتوي منتقي `.key.black--key::after` على خاصية `left` بقيمة `-18px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.left === '-18px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md
new file mode 100644
index 00000000000..26d821935a7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ead8788d28655ef8db056.md
@@ -0,0 +1,112 @@
+---
+id: 612ead8788d28655ef8db056
+title: الخطوة ٢٠
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+من أجل `.key.black--key::after`، قم بتعيين `width` إلى `32px` و `height` إلى `100px`.
+
+# --hints--
+
+يجب أن يحتوي منتقي `.key.black--key::after` على خاصية `width` بقيمة `32px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.width === '32px');
+```
+
+يجب أن يحتوي منتقي `.key.black--key::after` على خاصية `height` بقيمة `100px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.height === '100px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md
new file mode 100644
index 00000000000..db5ed323d12
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eaf56b7ba3257fdbfb0db.md
@@ -0,0 +1,144 @@
+---
+id: 612eaf56b7ba3257fdbfb0db
+title: الخطوة ٢١
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+البيانو يحتاج شعار freeCodeCamp لجعله رسميا.
+
+أضف عنصر `img` قبل عنصر `.keys` الخاص بك. امنح `img` الـ `class` بقيمة `logo`، وقم بتعيين `src` إلى `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`. أعطيه نص `alt` بقيمة `freeCodeCamp Logo`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `img` جديد.
+
+```js
+assert(document.querySelectorAll('img')?.length === 1);
+```
+
+عنصر `img` الخاص بك يجب أن يأتي قبل عنصر `.key` الخاص بك.
+
+```js
+const img = document.querySelector('img');
+assert(img?.nextElementSibling?.className === 'keys');
+assert(img?.previousElementSibling === null);
+```
+
+يجب ان يكون لعنصر `img` الخاص بك `class` بقيمة `logo`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.className === 'logo');
+```
+
+يجب أن يكون لعنصر `img` الخاص بك `src` بقيمة `https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg`.
+
+```js
+const img = document.querySelector('img');
+assert(img?.getAttribute('src') === 'https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg');
+```
+
+يجب أن يكون لعنصر `img` الخاص بك السمة `alt` بقيمة `freeCodeCamp Logo`.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt')?.toLowerCase() === 'freecodecamp logo');
+```
+
+تذكر أن الـ casing و الاملاء مهمان.
+
+```js
+assert(document.querySelector('img')?.getAttribute('alt') === 'freeCodeCamp Logo');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    --fcc-editable-region--
+    <div id="piano">
+      <div class="keys">
+    --fcc-editable-region--
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md
new file mode 100644
index 00000000000..724a96cbc28
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb4893b63c75bb9251ddf.md
@@ -0,0 +1,129 @@
+---
+id: 612eb4893b63c75bb9251ddf
+title: الخطوة ٢٢
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+ابدأ في تصميم الشعار عن طريق إنشاء منتقي `.logo`. قم تعيين `width` إلى `200px` و `position` الي `absolute` و `top` إلى `23px`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.logo`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo'));
+```
+
+يجب أن يكون لمنتقي `.logo` الخاص بك الخاصية `width` بقيمة `200px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.width === '200px');
+```
+
+يجب أن يكون لمنتقي `.logo` الخاص بك الخاصية `position` بقيمة `absolute`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.position === 'absolute');
+```
+
+يجب أن يكون لمنتقي `.logo` الخاص بك الخاصية `top` بقيمة `23px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.logo')?.top === '23px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md
new file mode 100644
index 00000000000..50bae712866
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb75153591b5e3b1ab65e.md
@@ -0,0 +1,115 @@
+---
+id: 612eb75153591b5e3b1ab65e
+title: الخطوة ٢٣
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+يحتاج عنصر `img` إلى أن يكون للـ parent الخاص به `position` كنقطة مرجعية. عيّن `position` الخاص بـ `#piano` إلى `relative`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#piano` الخاص بك الخاصية `position` بقيمة `relative`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.position === 'relative');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md
new file mode 100644
index 00000000000..526bc0fc415
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb7ca8c275d5f89c73333.md
@@ -0,0 +1,116 @@
+---
+id: 612eb7ca8c275d5f89c73333
+title: الخطوة ٢٤
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+لتنعيم الحواف الحادة للبيانو والمفاتيح ، ابدأ بإعطاء `#piano` الـ `border-radius` بقيمة `10px`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `#piano` الخاص بك الخاصية `border-radius` بقيمة `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('#piano')?.borderRadius === '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+--fcc-editable-region--
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+}
+--fcc-editable-region--
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md
new file mode 100644
index 00000000000..688f08eaebb
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb8e984cd73677a92b7e9.md
@@ -0,0 +1,117 @@
+---
+id: 612eb8e984cd73677a92b7e9
+title: خطوة ٢٥
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+قم بإعطاء منتقي `.key` الـ `border-radius` بقيمة `0 0 3px 3px`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.key` الخاص بك الخاصية `border-radius` بقيمة `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+--fcc-editable-region--
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+}
+--fcc-editable-region--
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md
new file mode 100644
index 00000000000..61e93de19d7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612eb934f64a4d6890a45518.md
@@ -0,0 +1,118 @@
+---
+id: 612eb934f64a4d6890a45518
+title: الخطوة ٢٦
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+قم باعطاء منتقي `.key.black--key::after` الـ `border-radius` بقيمة `0 0 3px 3px` لمطابقة المفاتيح.
+
+# --hints--
+
+يجب أن يكون لمنتقي`.key.black--key::after` الخاص بك الخاصية `border-radius` بقيمة `0 0 3px 3px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.key.black--key::after')?.borderRadius === '0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+--fcc-editable-region--
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+}
+--fcc-editable-region--
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md
new file mode 100644
index 00000000000..dc371fcbce5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebcba99bfa46a15370b11.md
@@ -0,0 +1,139 @@
+---
+id: 612ebcba99bfa46a15370b11
+title: خطوة ٢٧
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+يستخدم قاعدة `@media`، المعروفة أيضًا بوصف media query، لتطبيق CSS بشكل مشروط. تستخدم Media queries بشكل شائع لتطبيق CSS استناداً إلى عرض (width) نافذة العرض (viewport) باستخدام خصائص `max-width` و `min-width`.
+
+في المثال أدناه يتم تطبيق padding على فئة `.card` عندما يكون نافذة عرض (viewport) بحجم `960px` واسعا وأدنى.
+
+```css
+@media (max-width: 960px) {
+  .card {
+    padding: 2rem;
+  }
+}
+```
+
+أضف media query الذي سيتم تطبيقه عندما يكون المشهد `768px` واسعا وأدنى.
+
+# --hints--
+
+يجب عليك إضافة query تسمى `@media` جديدة.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 1);
+```
+
+يجب أن تحتوي query تسمى `@media` الجديدة على `max-width` بقيمة `768px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')[0]?.media?.mediaText === '(max-width: 768px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md
new file mode 100644
index 00000000000..a3e2569c583
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebe7fe6d07e6b76d1cae2.md
@@ -0,0 +1,133 @@
+---
+id: 612ebe7fe6d07e6b76d1cae2
+title: الخطوة ٢٨
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+إضافة منتقي `#piano` جديد ضمن query الـ `@media` الخاص بك، وقم بتعيين `width` إلى `358px`.
+
+# --hints--
+
+قاعدة `@media` الخاصة بك يجب أن تحتوي على منتقى `#piano`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+يجب أن يكون لمنتقي `#piano` الجديد الخاص بك `width` من `358px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '358px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md
new file mode 100644
index 00000000000..0b0399a8611
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebedec97e096c8bf64999.md
@@ -0,0 +1,136 @@
+---
+id: 612ebedec97e096c8bf64999
+title: الخطوة ٢٩
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+ضمن query الـ `@media` ، أضف منتقي `.keys` وقم بتعيين `width` إلى `318px`.
+
+# --hints--
+
+
+قاعدة `@media` الخاصة بك يجب أن تحتوي على منتقى `.keys`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+يجب أن يكون لمنتقي `.keys` الجديد الخاص بك `width` من `318px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '318px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md
new file mode 100644
index 00000000000..d8340d58dd2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ebf9a210f2b6d77001e68.md
@@ -0,0 +1,139 @@
+---
+id: 612ebf9a210f2b6d77001e68
+title: الخطوة ٣٠
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+الآن أضف منتقي `.logo` إلى query الـ `@media`، وعيّن خاصية `width` إلى `150px`.
+
+# --hints--
+
+قاعدة `@media` الخاصة بك يجب أن تحتوي على منتقى `.logo`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo);
+```
+
+يجب أن يكون لمنتقي `.logo` الجديد الخاص بك `width` من `150px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 768px)');
+const logo = rules?.find(rule => rule.selectorText === '.logo');
+assert(logo?.style.width === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+--fcc-editable-region--
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md
new file mode 100644
index 00000000000..7328afbafd7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec0490ae8626e9adf82e4.md
@@ -0,0 +1,133 @@
+---
+id: 612ec0490ae8626e9adf82e4
+title: الخطوة ٣١
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+ربما لاحظت انطواء الـ keys عندما تكون نافذة المتصفح أصغر من `768px`. قم بتعيين `overflow` إلى `hidden` في أول منتقي `.keys` للعناية بهذه المشكلة. هذه الخاصية ستخفي أي عنصر يتم دفعه خارج قيمة `width` الـ `.keys`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.keys` الخاص بك الأصلي خاصية `overflow` بقيمة `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.keys')?.overflow === 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+--fcc-editable-region--
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+}
+--fcc-editable-region--
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md
new file mode 100644
index 00000000000..523ab6c3b46
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec19d5268da7074941f84.md
@@ -0,0 +1,154 @@
+---
+id: 612ec19d5268da7074941f84
+title: الخطوة ٣٢
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+ويمكن استخدام المشغلين المنطقيين (Logical operators) لبناء media queries أكثر تعقيدا. يستخدم المشغل المنطقي `and` للاستعلام عن حالات (conditions) في media.
+
+على سبيل المثال، تستهدف media query عرض ما بين 500px و 1000px سيكون كما يلي:
+
+```css
+@media (min-width: 500px) and (max-width: 1000px){
+
+}
+```
+
+أضف قاعدة أخرى `@media` لتطبيق إذا كانت نافذة المتصفح أعرض من `769px` ولكن أصغر من `1199px`.
+
+# --hints--
+
+يجب عليك إضافة query تسمى `@media` جديدة.
+
+```js
+assert(new __helpers.CSSHelp(document).getCSSRules('media')?.length === 2);
+```
+
+يجب أن يحتوي query تسمى `@media` على `min-width` من `769px` و `max-width` من `1199px`.
+
+```js
+const mediaText = new __helpers.CSSHelp(document).getCSSRules('media')[1]?.media?.mediaText;
+assert(mediaText === '(max-width: 1199px) and (min-width: 769px)' || mediaText === '(min-width: 769px) and (max-width: 1199px)');
+```
+
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md
new file mode 100644
index 00000000000..02886ad7f9a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-responsive-web-design-by-building-a-piano/612ec29c84b9a6718b1f5cec.md
@@ -0,0 +1,288 @@
+---
+id: 612ec29c84b9a6718b1f5cec
+title: الخطوة 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+لقاعدة `@media` الجديدة، قم بتعيين `width` الـ `#piano` إلى `675px` و `width` الـ `.keys` إلى `633px`.
+
+بذلك ، لقد اكتمل البيانو!
+
+# --hints--
+
+قاعدة `@media` الثانية يجب أن تحتوي على منتقي `#piano`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano);
+```
+
+يجب أن يكون لمنتقي `#piano` الجديد الخاص بك `width` من `675px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const piano = rules?.find(rule => rule.selectorText === '#piano');
+assert(piano?.style.width === '675px');
+```
+
+قاعدة `@media` الثانية يجب أن تحتوي على منتقي `.keys`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys);
+```
+
+يجب أن يكون لمنتقي `.keys` الجديد الخاص بك `width` من `633px`.
+
+```js
+const rules = new __helpers.CSSHelp(document).getRuleListsWithinMedia('(max-width: 1199px) and (min-width: 769px)');
+const keys = rules?.find(rule => rule.selectorText === '.keys');
+assert(keys?.style.width === '633px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+--fcc-editable-region--
+@media (max-width: 1199px) and (min-width: 769px) {
+
+}
+--fcc-editable-region--
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Piano</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="stylesheet" href="./styles.css">
+  </head>
+  <body>
+    <div id="piano">
+      <img class="logo" src="https://cdn.freecodecamp.org/platform/universal/fcc_primary.svg" alt="freeCodeCamp Logo" />
+      <div class="keys">
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+        <div class="key black--key"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  box-sizing: border-box;
+}
+
+*, *::before, *::after {
+  box-sizing: inherit;
+}
+
+#piano {
+  background-color: #00471b;
+  width: 992px;
+  height: 290px;
+  margin: 80px auto;
+  padding: 90px 20px 0 20px;
+  position: relative;
+  border-radius: 10px;
+}
+
+.keys {
+  background-color: #040404;
+  width: 949px;
+  height: 180px;
+  padding-left: 2px;
+  overflow: hidden;
+}
+
+.key {
+  background-color: #ffffff;
+  position: relative;
+  width: 41px;
+  height: 175px;
+  margin: 2px;
+  float: left;
+  border-radius: 0 0 3px 3px;
+}
+
+.key.black--key::after {
+  background-color: #1d1e22;
+  content: "";
+  position: absolute;
+  left: -18px;
+  width: 32px;
+  height: 100px;
+  border-radius: 0 0 3px 3px;
+}
+
+.logo {
+  width: 200px;
+  position: absolute;
+  top: 23px;
+}
+
+@media (max-width: 768px) {
+  #piano {
+    width: 358px;
+  }
+
+  .keys {
+    width: 318px;
+  }
+
+  .logo {
+    width: 150px;
+  }
+}
+
+@media (max-width: 1199px) and (min-width: 769px) {
+  #piano {
+    width: 675px;
+  }
+
+  .keys {
+    width: 633px;
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md
new file mode 100644
index 00000000000..8d2078d6679
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996a.md
@@ -0,0 +1,55 @@
+---
+id: 60a3e3396c7b40068ad6996a
+title: الخطوة الأولى
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+في الوقت الحالي، يجب أن تكون على دراية بالعناصر الأساسية التي يجب أن تحتوي عليها صفحة HTML.
+
+عيّن كودك مع تعريف `DOCTYPE` و عنصر `html` يحدد نوع لغة الصفحة بالإنجليزية، وعنصر `head`، وعنصر `body`.
+
+# --hints--
+
+يجب أن يحتوي الكود على إعلان `<!DOCTYPE html>`.
+
+```js
+assert(code.match(/<!DOCTYPE html>/i));
+```
+
+يجب أن يكون لديك علامة `<html>` فتح مع سمة `lang` بقيمة `en`.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+يجب أن يحتوي الكود الخاص بك على عنصر `head` داخل عنصر `html`.
+
+```js
+assert(document.querySelectorAll('head').length === 1);
+```
+
+يجب أن يحتوي الكود الخاص بك على عنصر `body` داخل عنصر `html`.
+
+```js
+assert(document.querySelectorAll('body').length === 1);
+```
+
+عنصر `head` الخاص بك يجب أن يأتي قبل عنصر `body` الخاص بك.
+
+```js
+assert(document.querySelector('body').previousElementSibling.tagName === 'HEAD');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md
new file mode 100644
index 00000000000..ec3a00fde8e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996b.md
@@ -0,0 +1,65 @@
+---
+id: 60a3e3396c7b40068ad6996b
+title: الخطوة الثانية
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+داخل عنصر `head` ، أضف وسم `meta` الذي يعين `charset` إلى `UTF-8`، وعنصر `title` بقيمة `Rothko Painting`.
+
+ضمن عنصر `body` ، أضف عنصر `img` مع `src` من `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
+# --hints--
+
+يجب أن يحتوي الكود الخاص بك علي وسم `meta`.
+
+```js
+assert(document.querySelectorAll('meta').length === 1);
+```
+
+يجب أن يقوم وسم `meta` بتعيين `charset` إلى `UTF-8`.
+
+```js
+assert(document.querySelector('meta').getAttribute('charset')?.toLowerCase() === 'utf-8');
+```
+
+الكود الخاص بك يجب أن يحتوي على عنصر `title`.
+
+```js
+assert(document.querySelectorAll('title').length === 1);
+```
+
+`title` يجب أن يكون `Rothko Painting`.
+
+```js
+assert(document.querySelector('title').innerText === 'Rothko Painting');
+```
+
+الكود الخاص بك يجب أن يحتوي على عنصر `img`.
+
+```js
+assert(document.querySelectorAll('img').length === 1);
+```
+
+يجب أن يحتوي عنصر `img` الجديد على `src` بقيمة `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png`.
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+  <head>
+  </head>
+  <body>
+  </body>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md
new file mode 100644
index 00000000000..563c9f9d96b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996c.md
@@ -0,0 +1,42 @@
+---
+id: 60a3e3396c7b40068ad6996c
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+في CSS box model يتم التعامل مع كل عنصر HTML كصندوق بأربع مناطق.
+
+تخيل أنك تتلقى صندوقاً من بائع التجزئة المفضل لديك على الإنترنت -- المحتوى هو العنصر في الصندوق، أو في حالتنا، header أو paragraph أو عنصر image.
+
+قم بتغيير سمة `src` في `<img>` من `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png` إلى `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`.
+
+# --hints--
+
+يجب أن يحتوي عنصر `img` الجديد على `src` بقيمة `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-1.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
+
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md
new file mode 100644
index 00000000000..7f1097578db
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996d.md
@@ -0,0 +1,41 @@
+---
+id: 60a3e3396c7b40068ad6996d
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+المحتوى محاط بمسافة تسمى padding، على غرار الطريقة التي يفصل بها الـ bubble wrap شئً ما عن الصندوق المحيط به.
+
+فكر في الحدود (border) مثل صندوق الورق المقوى الذي تم شحن الشئ الخاص بك فيه.
+
+قم بتغيير سمة `src` إلى `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+# --hints--
+
+يجب أن يحتوي عنصر `img` الجديد على `src` بقيمة `https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png`
+
+```js
+assert(document.querySelector('img').getAttribute('src') === 'https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-2.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md
new file mode 100644
index 00000000000..1aecf0074d4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996e.md
@@ -0,0 +1,43 @@
+---
+id: 60a3e3396c7b40068ad6996e
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+الـ margin هو المنطقة الواقعة خارج الصندوق، ويمكن استخدامه للتحكم في المساحة بين الصناديق أو العناصر الأخرى.
+
+هنا العنصر السفلي لديه margin top أكبر، يدفعه إلى أسفل الصفحة.
+
+الآن بعد أن فهمت CSS box model، لنبدأ في لوحة Rothko.
+
+قم بإزالة عنصر `<img>`.
+
+# --hints--
+
+يجب ألا يكون لديك عنصر `img` في الكود الخاص بك.
+
+```js
+assert(document.querySelector('img') === null);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+    <img src="https://cdn.freecodecamp.org/curriculum/css-box-model/diagram-3.png">
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md
new file mode 100644
index 00000000000..d1d03aab101
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6996f.md
@@ -0,0 +1,47 @@
+---
+id: 60a3e3396c7b40068ad6996f
+title: الخطوة ٦
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+أضف عنصر `div` في `body`.
+
+عيّن سمة `class` بقيمة `canvas`. على سبيل المثال، `<div class="my-div">`.
+
+هذا سيعمل كـ canvas للوحتك.
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على عنصر `div`.
+
+```js
+assert(document.querySelectorAll('div').length === 1)
+```
+
+يجب أن يحتوي عنصر `div` على `class` مع القيمة `canvas`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('canvas'))
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+  </head>
+  <body>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md
new file mode 100644
index 00000000000..1b2715f6716
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69970.md
@@ -0,0 +1,53 @@
+---
+id: 60a3e3396c7b40068ad69970
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+قبل أن تبدأ في styling (تصميم) `div` التي قمت بإضافتها، تحتاج إلى ربط CSS الخاص بك بـ HTML.
+
+قم بإضافة عنصر `link` لربط ملف `styles.css` الخاص بك. قم بتعيين `href` إلى `./styles.css`، وتذكر تعيين سمة `rel` إلى `stylesheet`.
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على عنصر `link`.
+
+```js
+assert(/<link/.test(code))
+```
+
+عنصر `link` الخاص بك يجب أن يحتوي على سمة `rel` بقيمة `stylesheet`.
+
+```js
+assert.match(code, /<link.*?rel=('|"|`)stylesheet\1/)
+```
+
+عنصر `link` الخاص بك يجب أن يحتوي على سمة `href` بقيمة `styles.css`.
+
+```js
+assert.match(code, /<link.*?href=('|"|`)(\.\/)?styles\.css\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+--fcc-editable-region--
+
+--fcc-editable-region--
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md
new file mode 100644
index 00000000000..08c66b14042
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69971.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69971
+title: الخطوة ٨
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+حان الوقت لـ CSS.
+
+على الرغم من أن `<div>` الخاص بك لا يحتوي على نص، فإنه لا يزال يعامل كمربع يحتوي على محتوى. اكتب قاعدة CSS تستخدم منتقي الصف `.canvas` وتعين `width` إلى 500 بكسل. إليك قاعدة CSS تعين عرض class الـ `card` إلى 300 بكسل:
+
+```css
+.card {
+  width: 300px;
+}
+```
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على منتقي `.canvas`.
+
+```js
+const hasCanvas = new __helpers.CSSHelp(document).getStyle('.canvas');
+assert(hasCanvas)
+```
+
+يجب عليك تعيين خاصية `width` إلى `500px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '500px')
+assert(hasWidth);
+```
+
+يجب أن يكون لعنصر `.canvas` الخاص بك `width` من `500px`.
+
+```js
+const width = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('width');
+assert(width === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md
new file mode 100644
index 00000000000..ae9cf756c1f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69972.md
@@ -0,0 +1,54 @@
+---
+id: 60a3e3396c7b40068ad69972
+title: الخطوة ٩
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+أضف خاصية `height` مع القيمة `600px` إلى قاعدة `.canvas` الخاصة بك.
+
+# --hints--
+
+يجب عليك تعيين خاصية `height` إلى `600px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '600px');
+assert(hasHeight);
+```
+
+يجب أن يكون لعنصر `.canvas` الخاص بك `height` من `600px`.
+
+```js
+const canvasHeight = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('height');
+assert(canvasHeight === '600px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md
new file mode 100644
index 00000000000..babe25409d9
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69973.md
@@ -0,0 +1,55 @@
+---
+id: 60a3e3396c7b40068ad69973
+title: الخطوة ١٠
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+قم بتغيير لون `background-color` للـ canvas إلى `#4d0f00`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `background-color` إلى `#4d0f00`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(77, 15, 0)');
+assert(hasBackground);
+```
+
+يجب أن يحتوي عنصر `.canvas` على `background-color` من `#4d0f00`.
+
+```js
+const canvasBackground = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('background-color');
+assert(canvasBackground === 'rgb(77, 15, 0)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="canvas">
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md
new file mode 100644
index 00000000000..1a504dc3fab
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69974.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69974
+title: الخطوة ١١
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+كل لوحة تحتاج إلى إطار.
+
+قم بتفليف عنصر `.canvas` في `div` آخر. امنح هذا `div` الـ class الآتي `frame`.
+# --hints--
+
+يجب عليك إضافة عنصر `div` جديد.
+
+```js
+assert(document.querySelectorAll('div').length === 2)
+```
+
+عنصر `.canvas` الخاص بك يجب أن يكون متداخلا في عنصر `div` الجديد.
+
+```js
+assert(document.querySelector('.canvas').parentElement.tagName === 'DIV');
+```
+
+يجب أن يحتوي `div` الجديد على `class` بقيمة `frame`.
+
+```js
+assert(document.querySelector('div').className.split(' ').includes('frame'));
+```
+
+يجب أن يكون `div` الجديد ضمن عنصر `body` الخاص بك.
+
+```js
+assert(document.querySelector('div').parentElement.tagName === 'BODY');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+--fcc-editable-region--
+
+    <div class="canvas">
+    </div>
+
+--fcc-editable-region--
+  </body>
+  ```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md
new file mode 100644
index 00000000000..7763e958834
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69975.md
@@ -0,0 +1,67 @@
+---
+id: 60a3e3396c7b40068ad69975
+title: الخطوة ١٢
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+اكتب قاعدة جديدة باستخدام class selector الـ `.frame`.
+
+استخدم التعريف المختصر `border` لإعطاء عنصر `.frame` حدود سوداء صلبة (solid) بعرض `50px`.
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على منتقي `.frame`.
+
+```js
+const hasFrame = new __helpers.CSSHelp(document).getStyle('.frame');
+assert(hasFrame);
+```
+
+يجب عليك تعيين خاصية `border` إلى `50px solid black`.
+
+```js
+const hasBorder = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.border === '50px solid black');
+assert(hasBorder);
+```
+
+يجب أن يكون لعنصر `.frame` الخاص بك `50px solid black` `border`.
+
+```js
+const frameBorder = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('border');
+assert(frameBorder === '50px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md
new file mode 100644
index 00000000000..7b177592c38
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69976.md
@@ -0,0 +1,64 @@
+---
+id: 60a3e3396c7b40068ad69976
+title: الخطوة ١٣
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+الإطار واسع جدا جدا.
+
+في `.frame`، عيّن `width` إلى 500 بكسل.
+
+# --hints--
+
+يجب عليك تعيين خاصية `width` إلى `500px`.
+
+```js
+const widthFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.width === '500px');
+assert(widthFilter.length === 2);
+```
+
+يجب أن يكون لعنصر `.frame` الخاص بك `width` من `500px`.
+
+```js
+const frameWidth = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('width');
+assert(frameWidth === '500px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md
new file mode 100644
index 00000000000..cb710708283
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69977.md
@@ -0,0 +1,65 @@
+---
+id: 60a3e3396c7b40068ad69977
+title: الخطوة ١٤
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+استخدم padding لضبط المسافات داخل عنصر ما.
+
+في `.frame`، استخدم خاصية `padding` لزيادة المساحة بين عناصر `.frame` و `.canvas` بـ `50px`. وسيؤدي padding إلى زيادة المساحة في الأعلى، الأسفل، اليسار، واليمين لحدود العنصر والـ canvas داخله.
+
+# --hints--
+
+يجب عليك تعيين خاصية `padding` إلى `50px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '50px');
+assert(hasPadding);
+```
+
+يجب أن يكون لعنصر `.frame` الخاص بك `padding` من `50px`.
+
+```js
+const framePadding = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('padding');
+assert(framePadding === '50px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md
new file mode 100644
index 00000000000..e2c9fce284d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69978.md
@@ -0,0 +1,66 @@
+---
+id: 60a3e3396c7b40068ad69978
+title: خطوة ١٥
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+قم باستخدام margins لضبط المسافات خارج عنصر ما.
+
+باستخدام خاصية `margin`، أعطى لعنصر `.frame` الـ margin الرأسي بقيمة `20px` و الـ margin الأفقي بقيمة `auto`. هذا سيحرك الـ frame إلى أسفل 20 بكسل وسيركزه أفقياً في الصفحة.
+
+# --hints--
+
+يجب عليك تعيين خاصية `margin` إلى `20px auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '20px auto');
+assert(hasMargin);
+```
+
+يجب أن يكون لعنصر `.frame` الخاص بك `margin` من `20px auto`.
+
+```js
+const frameMargin = new __helpers.CSSHelp(document).getStyle('.frame')?.getPropertyValue('margin');
+assert(frameMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md
new file mode 100644
index 00000000000..e06196b3281
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69979.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad69979
+title: الخطوة ١٦
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+أضف عنصر `div` جديد داخل عنصر `.canvas` الخاص بك.
+
+منح `div` الجديد سمة `class` بقيمة `one`. سيكون هذا المستطيل الأول لك.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` جديد.
+
+```js
+assert(document.querySelectorAll('div').length === 3);
+```
+
+يجب عليك دمج عنصر `div` الجديد داخل عنصر `.canvas` الخاص بك.
+
+```js
+assert(document.querySelector('.canvas').children[0].tagName === 'DIV');
+```
+
+يجب أن يحتوي `div` الجديد على سمة `class` ذات قيمة `one`.
+
+```js
+assert(document.querySelector('.canvas').children[0].className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md
new file mode 100644
index 00000000000..a1ca9b34db1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997a.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997a
+title: الخطوة ١٧
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+اكتب قاعدة جديدة تستهدف `.one` وقم بتعيين `width` إلى 425 بكسل.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.one`.
+
+```js
+const hasOne = new __helpers.CSSHelp(document).getStyle('.one');
+assert(hasOne);
+```
+
+يجب عليك تعيين خاصية `width` إلى `425px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '425px');
+assert(hasWidth);
+```
+
+يجب أن يكون للعنصر `.one` الخاص بك `width` بقيمة `425px`.
+
+```js
+const oneWidth = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('width');
+assert(oneWidth === '425px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md
new file mode 100644
index 00000000000..c69cefb391a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997b.md
@@ -0,0 +1,70 @@
+---
+id: 60a3e3396c7b40068ad6997b
+title: الخطوة ١٨
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+الآن قم بتعيين `height` لـ `.one` إلى 150 بكسل.
+
+# --hints--
+
+يجب عليك تعيين خاصية `height` إلى `150px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '150px');
+assert(hasHeight);
+```
+
+يجب أن يكون للعنصر `.one` الخاص بك `height` بقيمة `150px`.
+
+```js
+const oneHeight = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('height');
+assert(oneHeight === '150px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md
new file mode 100644
index 00000000000..b1d31975ef4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997c.md
@@ -0,0 +1,71 @@
+---
+id: 60a3e3396c7b40068ad6997c
+title: الخطوة ١٩
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+قم بتعيين `background-color` لـ `.one` إلى `#efb762`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `background-color` إلى `#efb762`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(239, 183, 98)');
+assert(hasBackground)
+```
+
+يجب أن يكون للعنصر `.one` الخاص بك `background-color` بقيمة `#efb762`.
+
+```js
+const oneBackground = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('background-color');
+assert(oneBackground === 'rgb(239, 183, 98)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md
new file mode 100644
index 00000000000..503fe2c88e2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997d.md
@@ -0,0 +1,74 @@
+---
+id: 60a3e3396c7b40068ad6997d
+title: الخطوة ٢٠
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+استخدم الـ margins لوضع عنصر `.one` على الـ canvas.
+
+قم بإضافة خاصية `margin` مع margin عمودي بقيمة `20px` و margin أفقي بقيمة `auto`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `margin` إلى `20px auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === '20px auto');
+assert(marginFilter.length === 2);
+```
+
+يجب أن يكون للعنصر `.one` الخاص بك `margin` بقيمة `20px auto`.
+
+```js
+const oneMargin = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('margin');
+assert(oneMargin === '20px auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md
new file mode 100644
index 00000000000..9d5b55a3478
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997e.md
@@ -0,0 +1,75 @@
+---
+id: 60a3e3396c7b40068ad6997e
+title: الخطوة ٢١
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+الآن يتم توسيط `.one` أفقيًا ، لكن الـ margin top يتجاوز الـ canvas وحدود الإطار، مما يؤدي إلى إزاحة الـ canvas بأكمله لأسفل بمقدار 20 بكسل.
+
+قم بإضافة `padding` من `1px` إلى عنصر `.canvas` لإعطاء عنصر `.one` شيئًا صلبًا لدفعه بعيدًا.
+
+# --hints--
+
+يجب عليك تعيين خاصية `padding` إلى `1px`.
+
+```js
+const hasPadding = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.padding === '1px');
+assert(hasPadding);
+```
+
+يجب أن يكون للعنصر `.canvas` الخاص بك `padding` بقيمة `1px`.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('padding');
+assert(canvasPadding === '1px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md
new file mode 100644
index 00000000000..9da8fa7b821
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6997f.md
@@ -0,0 +1,82 @@
+---
+id: 60a3e3396c7b40068ad6997f
+title: الخطوة ٢٢
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+إضافة 1 بكسل من الـ padding إلى الأعلى، الأسفل، اليسار، واليمين للـ canvas، غير أبعاده إلى 502 pixels في 602 pixels.
+
+استبدل خاصية `padding` بـ `overflow` بقيمة `hidden` - مما يعيد الـ canvas مرة أخرى إلى أبعادها الأصلية.
+
+# --hints--
+
+يجب عليك إزالة خاصية `padding` من منتقى `.canvas`.
+
+```js
+const canvasPadding = new __helpers.CSSHelp(document).getStyle('.canvas').getPropertyValue('padding');
+assert(!canvasPadding);
+```
+
+يجب عليك تعيين خاصية `overflow` إلى `hidden`.
+
+```js
+const hasOverflow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.overflow === 'hidden');
+assert(hasOverflow);
+```
+
+يجب أن يكون للعنصر `.canvas` الخاص بك `overflow` بقيمة `hidden`.
+
+```js
+const canvasOverflow = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('overflow');
+assert(canvasOverflow === 'hidden')
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+--fcc-editable-region--
+  padding: 1px;
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md
new file mode 100644
index 00000000000..e6a071b034e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69980.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69980
+title: الخطوة ٢٣
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+أضف `div` آخر مع `class` بقيمة `two` اسفل عنصر `one` الخاص بك. سيكون هذا المستطيل الثاني لك.
+
+# --hints--
+
+لا يجب عليك تغيير عنصر `.one` الحالي.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+```
+
+يجب أن يكون لديك عنصر `div` ثان في عنصر `.canvas` الخاص بك.
+
+```js
+assert(document.querySelector('.canvas').children[1].tagName === 'DIV');
+```
+
+يجب أن يحتوي عنصر `div` الثاني على `class` بقيمة `two`.
+
+```js
+assert(document.querySelector('.canvas').children[1].className.split(' ').includes('two'));
+```
+
+عنصر `.two` الخاص بك يجب أن يأتي بعد عنصر `.one` الخاص بك.
+
+```js
+assert(document.querySelector('.two').previousElementSibling.className.split(' ').includes('one'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md
new file mode 100644
index 00000000000..eb26854d87d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69981.md
@@ -0,0 +1,84 @@
+---
+id: 60a3e3396c7b40068ad69981
+title: الخطوة ٢٤
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+قم بإنشاء قاعدة CSS جديدة باستخدام منتقى `.two` وتعيين `width` إلى 475 بكسل.
+
+# --hints--
+
+يجب أن يكون لديك منتقى `.two`.
+
+```js
+const hasTwo = new __helpers.CSSHelp(document).getStyle('.two');
+assert(hasTwo);
+```
+
+يجب عليك تعيين خاصية `width` إلى `475px`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '475px');
+assert(hasWidth);
+```
+
+يجب أن يكون لعنصر `.two` الخاص بك `width` من `475px`.
+
+```js
+const twoWidth = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('width');
+assert(twoWidth === '475px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md
new file mode 100644
index 00000000000..d98d7b4636d
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69982.md
@@ -0,0 +1,79 @@
+---
+id: 60a3e3396c7b40068ad69982
+title: خطوة ٢٥
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+قم بتعيين `height` لعنصر `.two` إلى 200 بكسل.
+
+# --hints--
+
+يجب عليك تعيين خاصية `height` إلى `200px`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '200px');
+assert(hasHeight);
+```
+
+يجب أن يكون لعنصر `.two` الخاص بك `height` من `200px`.
+
+```js
+const twoHeight = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('height');
+assert(twoHeight === '200px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md
new file mode 100644
index 00000000000..1fc69ab1324
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69983.md
@@ -0,0 +1,80 @@
+---
+id: 60a3e3396c7b40068ad69983
+title: الخطوة ٢٦
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+قم بتعيين `background-color` لعنصر `.two` إلى `#8f0401`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `background-color` إلى `#8f0401`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(143, 4, 1)');
+assert(hasBackground);
+```
+
+يجب أن يكون لعنصر `.two` الخاص بك `background-color` بقيمة `#8f0401`.
+
+```js
+const twoBackground = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('background-color');
+assert(twoBackground === 'rgb(143, 4, 1)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md
new file mode 100644
index 00000000000..dce655d4325
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69984.md
@@ -0,0 +1,81 @@
+---
+id: 60a3e3396c7b40068ad69984
+title: خطوة ٢٧
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+قم بتوسيط عنصر `.two` عن طريق تعيين `margin` إلى `auto`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `margin` إلى `auto`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === 'auto');
+assert(hasMargin);
+```
+
+يجب أن يكون لعنصر `.two` الخاص بك `margin` من `auto`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md
new file mode 100644
index 00000000000..67d9fbbebc7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69986.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad69986
+title: الخطوة ٢٨
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+قم بإنشاء `div` جديد مع `class` بقيمة `three` اسفل عنصر `.two`. سيكون هذا المستطيل الثالث.
+
+# --hints--
+
+يجب عدم تغيير عنصري `.one` و `.two` الحاليين.
+
+```js
+assert(document.querySelectorAll('.one').length === 1);
+assert(document.querySelectorAll('.two').length === 1);
+```
+
+يجب أن يكون `div` الجديد متداخلاً في عنصر `.canvas` الخاص بك.
+
+```js
+assert(document.querySelector('.canvas').children[2].tagName === 'DIV');
+```
+
+يجب أن يأتي `div` الجديد بعد عنصر `.two` الخاص بك.
+
+```js
+assert(document.querySelector('.two').nextElementSibling.tagName === 'DIV');
+```
+
+يجب أن يحتوي عنصر `div` الجديد على `class` بقيمة `three`.
+
+```js
+assert(document.querySelector('.canvas').children[2].className.split(' ').includes('three'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md
new file mode 100644
index 00000000000..9079e8b3230
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69987.md
@@ -0,0 +1,94 @@
+---
+id: 60a3e3396c7b40068ad69987
+title: الخطوة ٢٩
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+ليس عليك دائماً استخدام وحدات البكسل عند تحديد حجم العنصر.
+
+قم بإنشاء قاعدة جديدة، `.three`، وقم بتعيين `width` إلى `91%`.
+
+# --hints--
+
+يجب عليك استخدام منتقي `.three`.
+
+```js
+const hasThree = new __helpers.CSSHelp(document).getStyle('.three');
+assert(hasThree);
+```
+
+يجب عليك تعيين خاصية `width` إلى `91%`.
+
+```js
+const hasWidth = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.width === '91%');
+assert(hasWidth);
+```
+
+يجب أن يكون لعنصر `.three` الخاص بك `width` بقيمة `91%`.
+
+```js
+const threeWidth = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('width');
+assert(threeWidth === '91%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md
new file mode 100644
index 00000000000..6e64b9a4774
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69988.md
@@ -0,0 +1,87 @@
+---
+id: 60a3e3396c7b40068ad69988
+title: الخطوة ٣٠
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+قم بتعيين `height` الـ `.three` إلى `28%`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `height` إلى `28%`.
+
+```js
+const hasHeight = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.height === '28%');
+assert(hasHeight);
+```
+
+يجب أن يكون لعنصر `.three` الخاص بك `height` بقيمة `28%`.
+
+```js
+const threeHeight = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('height');
+assert(threeHeight === '28%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md
new file mode 100644
index 00000000000..13f4edd3648
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69989.md
@@ -0,0 +1,88 @@
+---
+id: 60a3e3396c7b40068ad69989
+title: الخطوة ٣١
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+قم بتغيير `background-color` الـ `.three` إلى `#b20403`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `background-color` إلى `#b20403`.
+
+```js
+const hasBackground = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['background-color'] === 'rgb(178, 4, 3)');
+assert(hasBackground);
+```
+
+يجب أن يكون لعنصر `.three` الخاص بك `background-color` بقيمة `#b20403`.
+
+```js
+const threeBackground = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('background-color');
+assert(threeBackground === 'rgb(178, 4, 3)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md
new file mode 100644
index 00000000000..4dd26020bf1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998a.md
@@ -0,0 +1,89 @@
+---
+id: 60a3e3396c7b40068ad6998a
+title: الخطوة ٣٢
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+قم بتوسيط عنصر `.three` علي الـ canvas عن طريق تعيين `margin` الخاص به إلى `auto`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `margin` إلى `auto`.
+
+```js
+const marginFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.margin === 'auto');
+assert(marginFilter.length === 2);
+```
+
+يجب أن يكون لعنصر `.three` الخاص بك `margin` من `auto`.
+
+```js
+const threeMargin = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('margin');
+assert(threeMargin === 'auto');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: auto;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md
new file mode 100644
index 00000000000..23324faef35
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998b.md
@@ -0,0 +1,93 @@
+---
+id: 60a3e3396c7b40068ad6998b
+title: الخطوة ٣٣
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+من المفيد أن تدفع الـ margins الخاصة بك في اتجاه واحد.
+
+في هذه الحالة، الـ bottom margin لعنصر `.one` يدفع `.two` إلى الأسفل بـ 20 بكسل.
+
+في منتقي `.two` ، استخدم خاصية `margin` لتعيين top margin إلى `0`، و horizontal margin إلى `auto`، و bottom margin إلى `20px`. سيؤدي هذا إلى إزالة الـ top margin، وتوسيط العنصر أفقيًا، وضبط الـ bottom margin الي 20 بكسل.
+
+# --hints--
+
+يجب عليك تعيين خاصية `margin` إلى `0 auto 20px`.
+
+```js
+const hasMargin = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.margin === '0px auto 20px');
+assert(hasMargin);
+```
+
+يجب أن يكون لعنصر `.two` الخاص بك `margin` من `0 auto 20px`.
+
+```js
+const twoMargin = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('margin');
+assert(twoMargin === '0px auto 20px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+--fcc-editable-region--
+  margin: auto;
+--fcc-editable-region--
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md
new file mode 100644
index 00000000000..130d14f6f81
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998c.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad6998c
+title: الخطوة ٣٤
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+الألوان والأشكال من لوحتك حادة جدا بحيث لا يمكن أن تمر كـ Rothko.
+
+استخدم خاصية `filter` من أجل `blur` اللوحة بـ `2px` في عنصر `.canvas`.
+
+إليك مثال على قاعدة تضيف 3px من `blur`:
+
+```css
+p {
+  filter: blur(3px);
+}
+```
+
+# --hints--
+
+يجب عليك تعيين خاصية `filter` بقيمة `blur(2px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(2px)');
+assert(hasFilter);
+```
+
+يجب أن يكون لعنصرك `.canvas` خاصية `filter` بقيمة `blur(2px)`.
+
+```js
+const canvasFilter = new __helpers.CSSHelp(document).getStyle('.canvas')?.getPropertyValue('filter');
+assert(canvasFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md
new file mode 100644
index 00000000000..c79761dd0d1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998d.md
@@ -0,0 +1,108 @@
+---
+id: 60a3e3396c7b40068ad6998d
+title: الخطوة ٣٥
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+قم بإنشاء قاعدة تستهدف `.one` و `.two` وتزيد تأثير `blur` بمقدار 1 بكسل.
+
+# --hints--
+
+يجب أن يكون لديك قائمة من منتقيات `.one, .two`.
+
+```js
+const oneTwo = new __helpers.CSSHelp(document).getStyle('.one, .two');
+assert(oneTwo);
+```
+
+يجب عليك تعيين خاصية `filter` إلى `blur(1px)`.
+
+```js
+const hasFilter = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.filter === 'blur(1px)');
+assert(hasFilter)
+```
+
+يجب أن يكون لعنصرك `.one` خاصية `filter` بقيمة `blur(1px)`.
+
+```js
+const one = document.querySelector('.one');
+const oneFilter = getComputedStyle(one).filter;
+assert(oneFilter === 'blur(1px)');
+```
+
+يجب أن يكون لعنصرك `.two` خاصية `filter` بقيمة `blur(1px)`.
+
+```js
+const two = document.querySelector('.two');
+const twoFilter = getComputedStyle(two).filter;
+assert(twoFilter === 'blur(1px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md
new file mode 100644
index 00000000000..b66cc2c69b0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998e.md
@@ -0,0 +1,95 @@
+---
+id: 60a3e3396c7b40068ad6998e
+title: الخطوة ٣٦
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+قم بزيادة `blur` لـ `.three` بمقدار 2 بكسل.
+
+# --hints--
+
+يجب عليك تعيين خاصية `filter` إلى `blur(2px)`.
+
+```js
+const filterFilter = new __helpers.CSSHelp(document).getCSSRules().filter(x => x.style.filter === 'blur(2px)');
+assert(filterFilter.length === 2);
+```
+
+يجب أن يكون لعنصر `.three` الخاص بك `filter` بقيمة `blur(2px)`.
+
+```js
+const threeFilter = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('filter');
+assert(threeFilter === 'blur(2px)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md
new file mode 100644
index 00000000000..64a049f324c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad6998f.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad6998f
+title: الخطوة ٣٧
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+المستطيلات صغيرة جدًا ولا تتمتع حوافها بالجودة الناعمة للوحة.
+
+قم بزيادة المساحة وتنعيم حواف `.one` عن طريق تعيين `box-shadow` الخاص به إلى `0 0 3px 3px #efb762`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `box-shadow` إلى `0 0 3px 3px #efb762`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+يجب أن يكون لعنصر `.one` الخاص بك `box-shadow` بقيمة `0 0 3px 3px #efb762`.
+
+```js
+const oneShadow = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('box-shadow');
+assert(oneShadow === 'rgb(239, 183, 98) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md
new file mode 100644
index 00000000000..a62055a469b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69990.md
@@ -0,0 +1,97 @@
+---
+id: 60a3e3396c7b40068ad69990
+title: الخطوة ٣٨
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+استخدم نفس تعريف `box-shadow` لـ `.two`، ولكن قم بتغيير اللون من `#efb762` إلى `#8f0401`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `box-shadow` إلى `0 0 3px 3px #8f0401`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+assert(hasBoxShadow);
+```
+
+يجب أن يكون لعنصر `.two` الخاص بك `box-shadow` بقيمة `0 0 3px 3px #8f0401`.
+
+```js
+const twoShadow = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('box-shadow');
+assert(twoShadow === 'rgb(143, 4, 1) 0px 0px 3px 3px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md
new file mode 100644
index 00000000000..ac948e4bad8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69991.md
@@ -0,0 +1,98 @@
+---
+id: 60a3e3396c7b40068ad69991
+title: الخطوة ٣٩
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+قم بإضافة `box-shadow` إلى `.three` مع القيم `0 0 5px 5px #b20403`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `box-shadow` إلى `0 0 5px 5px #b20403`.
+
+```js
+const hasBoxShadow = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['box-shadow'] === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+assert(hasBoxShadow);
+```
+
+يجب أن يكون لعنصر `.three` الخاص بك `box-shadow` بقيمة `0 0 5px 5px #b20403`.
+
+```js
+const threeShadow = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('box-shadow');
+assert(threeShadow === 'rgb(178, 4, 3) 0px 0px 5px 5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md
new file mode 100644
index 00000000000..4eba4fa58c4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69992.md
@@ -0,0 +1,101 @@
+---
+id: 60a3e3396c7b40068ad69992
+title: الخطوة ٤٠
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+لا تزال كل اركان المستطيل حادة جدا.
+
+قم بتدوير كل ركن من أركان العنصر `.one` بمقدار 9 بكسل، باستخدام خاصية `border-radius`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `border-radius` إلى `9px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '9px');
+assert(hasBorderRadius);
+```
+
+يجب أن يكون لعنصر `.one` الخاص بك `border-radius` من `9px`.
+
+```js
+const oneBorderRadius =new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('border-radius');
+assert(oneBorderRadius === '9px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md
new file mode 100644
index 00000000000..d4f1a607423
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69993.md
@@ -0,0 +1,100 @@
+---
+id: 60a3e3396c7b40068ad69993
+title: الخطوة ٤١
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+استخدم خاصية `border-radius` على منتقي `.two`، لتعيين top-left و bottom-right radii إلى `8px`، و top-right و bottom-left radii إلى `10px`.
+
+# --hints--
+
+يجب عليك تعيين خاصية `border-radius` إلى `8px 10px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '8px 10px');
+assert(hasBorderRadius);
+```
+
+يجب أن يكون لعنصر `.two` الخاص بك `border-radius` من `8px 10px`.
+
+```js
+const twoBorderRadius = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('border-radius');
+assert(twoBorderRadius === '8px 10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md
new file mode 100644
index 00000000000..d3799f43301
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69994.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69994
+title: الخطوة ٤٢
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+الخاصية `border-radius` تقبل ما يصل إلى أربع قيم لتدوير الزاويا top-left و top-right bottom-right و bottom-left.
+
+قم بتدوير الزاوية top-left لـ `.three` بـ 30 بكسل، top-right بـ 25 بكسل، bottom-right بـ 60 بكسل، و bottom-left بـ 12 بكسل.
+
+# --hints--
+
+يجب عليك تعيين خاصية `border-radius` إلى `30px 25px 60px 12px`.
+
+```js
+const hasBorderRadius = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style['border-radius'] === '30px 25px 60px 12px');
+assert(hasBorderRadius);
+```
+
+يجب أن يكون لعنصر `.three` الخاص بك `border-radius` من `30px 25px 60px 12px`.
+
+```js
+const threeBorderRadius = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('border-radius');
+assert(threeBorderRadius === '30px 25px 60px 12px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md
new file mode 100644
index 00000000000..bb3e7c1ab18
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69995.md
@@ -0,0 +1,104 @@
+---
+id: 60a3e3396c7b40068ad69995
+title: الخطوة ٤٣
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+قم بتدوير كل مستطيل لمنحهم مظهرًا غير كامل ومرسوم يدويًا.
+
+استخدم خاصية `transform` على منتقى `.one` من اجل (تدويره) `rotate` عكس اتجاه عقارب الساعة بمقدار 0.6 درجة.
+
+# --hints--
+
+يجب عليك تعيين الخاصية `transform` إلى `rotate(-0.6deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.6deg)');
+assert(hasTransform);
+```
+
+يجب أن يكون لعنصر `.one` الخاص بك `transform` بقيمة `rotate(-0.6deg)`.
+
+```js
+const oneTransform = new __helpers.CSSHelp(document).getStyle('.one')?.getPropertyValue('transform');
+assert(oneTransform === 'rotate(-0.6deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md
new file mode 100644
index 00000000000..31e8951bcc1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69996.md
@@ -0,0 +1,103 @@
+---
+id: 60a3e3396c7b40068ad69996
+title: الخطوة ٤٤
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+قم بتدوير العنصر `.two` في اتجاه عقارب الساعة بمقدار 0.4 درجة.
+
+# --hints--
+
+يجب عليك تعيين الخاصية `transform` إلى `rotate(0.4deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(0.4deg)');
+assert(hasTransform);
+```
+
+يجب أن يكون لعنصر `.two` الخاص بك `transform` بقيمة `rotate(0.4deg)`.
+
+```js
+const twoTransform = new __helpers.CSSHelp(document).getStyle('.two')?.getPropertyValue('transform');
+assert(twoTransform === 'rotate(0.4deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md
new file mode 100644
index 00000000000..c99e8476b64
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-the-css-box-model-by-building-a-rothko-painting/60a3e3396c7b40068ad69997.md
@@ -0,0 +1,180 @@
+---
+id: 60a3e3396c7b40068ad69997
+title: الخطوة ٤٥
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+قم بتدوير `.three` عكس اتجاه عقارب الساعة بمقدار 0.2 درجة.
+
+بهذه الخطوة الأخيرة، اكتملت الآن لوحة Rothko الخاصة بك.
+
+# --hints--
+
+يجب عليك تعيين الخاصية `transform` إلى `rotate(-0.2deg)`.
+
+```js
+const hasTransform = new __helpers.CSSHelp(document).getCSSRules().some(x => x.style.transform === 'rotate(-0.2deg)');
+assert(hasTransform);
+```
+
+يجب أن يكون لعنصر `.three` الخاص بك `transform` بقيمة `rotate(-0.2deg)`.
+
+```js
+const threeTransform = new __helpers.CSSHelp(document).getStyle('.three')?.getPropertyValue('transform');
+assert(threeTransform === 'rotate(-0.2deg)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+--fcc-editable-region--
+
+--fcc-editable-region--
+}
+```
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Rothko Painting</title>
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="frame">
+      <div class="canvas">
+        <div class="one"></div>
+        <div class="two"></div>
+        <div class="three"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+.canvas {
+  width: 500px;
+  height: 600px;
+  background-color: #4d0f00;
+  overflow: hidden;
+  filter: blur(2px);
+}
+
+.frame {
+  border: 50px solid black;
+  width: 500px;
+  padding: 50px;
+  margin: 20px auto;
+}
+
+.one {
+  width: 425px;
+  height: 150px;
+  background-color: #efb762;
+  margin: 20px auto;
+  box-shadow: 0 0 3px 3px #efb762;
+  border-radius: 9px;
+  transform: rotate(-0.6deg);
+}
+
+.two {
+  width: 475px;
+  height: 200px;
+  background-color: #8f0401;
+  margin: 0 auto 20px;
+  box-shadow: 0 0 3px 3px #8f0401;
+  border-radius: 8px 10px;
+  transform: rotate(0.4deg);
+}
+
+.one, .two {
+  filter: blur(1px);
+}
+
+.three {
+  width: 91%;
+  height: 28%;
+  background-color: #b20403;
+  margin: auto;
+  filter: blur(2px);
+  box-shadow: 0 0 5px 5px #b20403;
+  border-radius: 30px 25px 60px 12px;
+  transform: rotate(-0.2deg);
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md
new file mode 100644
index 00000000000..005a7368cbe
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2abbe7d18d49a1e0e1c8.md
@@ -0,0 +1,55 @@
+---
+id: 615f2abbe7d18d49a1e0e1c8
+title: الخطوة الأولى
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+لقد قدمنا لك مستند HTML الأساسي.
+
+قم بإنشاء عنصر `h1` داخل عنصر `body` وأعطيه النص `Nutrition Facts`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `h1` جديد.
+
+```js
+assert.exists(document.querySelector('h1'));
+```
+
+عنصر `h1` الخاص بك يجب أن يكون داخل عنصر `body` الخاص بك.
+
+```js
+assert(document.querySelector('h1')?.parentElement?.localName === 'body');
+```
+
+يجب أن يحتوي العنصر `h1` على النص `Nutrition Facts`.
+
+```js
+assert(document.querySelector('h1')?.innerText === 'Nutrition Facts');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+  </head>
+  <body>
+
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md
new file mode 100644
index 00000000000..b4d434881f3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f2d4150fe0d4cbd0f2628.md
@@ -0,0 +1,60 @@
+---
+id: 615f2d4150fe0d4cbd0f2628
+title: الخطوة الثانية
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+تحت عنصر `h1` الخاص بك، أضف عنصر `p` مع النص `8 servings per container`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `p` جديد.
+
+```js
+assert.exists(document.querySelector('p'));
+```
+
+عنصر `p` الخاص بك يجب أن يكون داخل عنصر `body` الخاص بك.
+
+```js
+assert(document.querySelector('p')?.parentElement?.localName === 'body');
+```
+
+عنصر `p` الخاص بك يجب أن يأتي بعد عنصر `h1` الخاص بك.
+
+```js
+assert(document.querySelector('p')?.previousElementSibling?.localName === 'h1');
+```
+
+يجب أن يحتوي عنصر `p` الخاص بك على النص `8 servings per container`.
+
+```js
+assert(document.querySelector('p')?.innerText === '8 servings per container');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+  </head>
+  <body>
+    <h1>Nutrition Facts</h1>
+
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md
new file mode 100644
index 00000000000..a704e56ac52
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34948891834dd77655a6.md
@@ -0,0 +1,61 @@
+---
+id: 615f34948891834dd77655a6
+title: الخطوة ٣
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+قم بإضافة عنصر `p` ثان مع النص `Serving size 2/3 cup (55g)`.
+
+# --hints--
+
+يجب أن يكون لديك عنصر `p` ثان.
+
+```js
+assert(document.querySelectorAll('p')?.length === 2);
+```
+
+عنصر `p` الثاني الخاص بك يجب أن يكون داخل عنصر `body` الخاص بك.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.parentElement?.localName === 'body');
+```
+
+عنصر `p` الثاني الخاص بك يجب أن يأتي بعد عنصر `p` الموجود لديك.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.previousElementSibling?.localName === 'p');
+```
+
+يجب أن يحتوي عنصر `p` الثاني على النص `Serving size 2/3 cup (55g)`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+  </head>
+  <body>
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md
new file mode 100644
index 00000000000..b60cb0e7b20
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f34ecc1091b4fd5a8a484.md
@@ -0,0 +1,68 @@
+---
+id: 615f34ecc1091b4fd5a8a484
+title: الخطوة ٤
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+داخل عنصر `head`، أضف عنصر `link` مع سمة `rel` تم تعيينها إلى `stylesheet` و سمة `href` تم تعيينها إلى `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
+
+سيقوم هذا باستيراد font family الـ `Open Sans`، مع قيم الـ font weight الآتية `400`و `700`و `800`.
+
+ايضا قم بإضافة عنصر `link` لربط ملف `styles.css` الخاص بك.
+
+# --hints--
+
+الكود الخاص بك يجب أن يحتوي على عنصرين `link` مغلقين ذاتيا.
+
+```js
+assert(document.querySelectorAll('link').length === 2);
+```
+
+يجب أن يكون لكل من عناصر `link` الخاصة بك سمة `rel` بقيمة `stylesheet`.
+
+```js
+const links = [...document.querySelectorAll('link')];
+assert(links.every(link => link.getAttribute('rel') === 'stylesheet'));
+```
+
+احدي عناصر `link` يجب أن يحتوي على السمة `href` بقيمة `./styles.css`.
+
+```js
+assert(code.match(/<link[\s\S]*?href\s*=\s*('|"|`)(\.\/)?styles\.css\1/g)?.length === 1);
+```
+
+احدي عناصر `link` يجب أن يحتوي على سمة `href` بقيمة `https://fonts.googleapis.com/css?family=Open+Sans:400,700,800`.
+
+```js
+const links = [...document.querySelectorAll('link')]
+assert(links.find(link => link?.getAttribute('href') === 'https://fonts.googleapis.com/css?family=Open+Sans:400,700,800'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+
+  </head>
+  <body>
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </body>
+</html>
+--fcc-editable-region--
+```
+
+```css
+
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md
new file mode 100644
index 00000000000..c8a4bac71ec
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f357957e370510f21ea16.md
@@ -0,0 +1,53 @@
+---
+id: 615f357957e370510f21ea16
+title: الخطوة ٥
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+قم بإنشاء منتقي `body` وإعطائه `font-family` بقيمة `Open Sans` مع fallback بقيمة `sans-serif`.
+
+تذكر أن الخطوط (fonts) التي تحتوي على مسافات في اسمها، يجب تغليفها في علامات اقتباس (quotes) للـ CSS.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `body`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body'));
+```
+
+يجب أن يكون لمنتقي `body` الخاص بك خاصية `font-family` بقيمة `"Open Sans", sans-serif`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('body')?.fontFamily === '"Open Sans", sans-serif');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md
new file mode 100644
index 00000000000..fc4687f9c4a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f378014c2da526a109c81.md
@@ -0,0 +1,55 @@
+---
+id: 615f378014c2da526a109c81
+title: الخطوة ٦
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+الخط صغير بعض الشيء. قم بإنشاء منتقي `html` وتعيين الخط ليكون حجمه `16px`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `html`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html'));
+```
+
+يجب أن يكون لمنتقي `html` الخاص بك الخاصية `font-size` بقيمة `16px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('html')?.fontSize === '16px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md
new file mode 100644
index 00000000000..64713cae7c6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38279e5c3d53692ea441.md
@@ -0,0 +1,64 @@
+---
+id: 615f38279e5c3d53692ea441
+title: الخطوة ٧
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+قم بتغليف عنصري `h1` و `p` في عنصر `div`. اعطي هذا الـ `div` السمة `class` بقيمة `label`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` جديد.
+
+```js
+assert(document.querySelector('div'));
+```
+
+يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `label`.
+
+```js
+assert(document.querySelector('div')?.classList?.contains('label'));
+```
+
+يجب أن تكون عناصر `h1` و `p` ضمن عنصر `.label` الجديد الخاص بك.
+
+```js
+const children = [...document.querySelectorAll('h1'), ...document.querySelectorAll('p')];
+assert(children?.every(child => child?.parentElement?.classList?.contains('label')));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+--fcc-editable-region--
+  <body>
+    <h1>Nutrition Facts</h1>
+    <p>8 servings per container</p>
+    <p>Serving size 2/3 cup (55g)</p>
+  </body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md
new file mode 100644
index 00000000000..fa2f5a52374
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f38cabc64e3556f98cc1a.md
@@ -0,0 +1,63 @@
+---
+id: 615f38cabc64e3556f98cc1a
+title: الخطوة ٨
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+يمكن استخدام الحدود (borders) لتجميع المحتوى وترتيبه حسب الأولوية.
+
+قم بإنشاء منتقي `.label` وإعطائه `border` تم تعيينه إلى `2px solid black`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.label`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label'));
+```
+
+يجب أن يحتوي منتقي `.label` على خاصية `border` تم تعيينها إلى `2px solid black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.border === '2px solid black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <p>8 servings per container</p>
+      <p>Serving size 2/3 cup (55g)</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md
new file mode 100644
index 00000000000..1401f28b383
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3949f58e12577dcefb00.md
@@ -0,0 +1,59 @@
+---
+id: 615f3949f58e12577dcefb00
+title: الخطوة ٩
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+الاستخدام الجيد للـ whitespace يمكن أن يجلب التركيز إلى العناصر الهامة في صفحتك، ويساعد في توجيه أعين المستخدمين عبر النص الخاص بك.
+
+قم بإعطاء منتقي `.label` خاصية `width` بقيمة `270px`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.label` الخاص بك الخاصية `width` بقيمة `270px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.width === '270px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <p>8 servings per container</p>
+      <p>Serving size 2/3 cup (55g)</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+.label {
+  border: 2px solid black;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md
new file mode 100644
index 00000000000..26d64002178
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f39d7da41b15851fa3fb9.md
@@ -0,0 +1,64 @@
+---
+id: 615f39d7da41b15851fa3fb9
+title: الخطوة ١٠
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+اعطي منتقي `.label` الخاص بك الخاصية `margin` بقيمة `20px auto`، والخاصية `padding` بقيمة `0 7px`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.label` الخاص بك خاصية `margin` بقيمة `20px auto`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.margin === '20px auto');
+```
+
+يجب أن يحتوي منتقي `.label` على خاصية `padding` بقيمة `0 7px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.label')?.padding === '0px 7px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <p>8 servings per container</p>
+      <p>Serving size 2/3 cup (55g)</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+--fcc-editable-region--
+.label {
+  border: 2px solid black;
+  width: 270px;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md
new file mode 100644
index 00000000000..8bf8c2cb49a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3b091162165948e1cb33.md
@@ -0,0 +1,70 @@
+---
+id: 615f3b091162165948e1cb33
+title: الخطوة ١١
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+إذا قمت بفحص عنصر `.label` الخاص بك باستخدام أدوات مطوري المتصفح (developer tools) الخاص بك، قد تلاحظ أنه في الواقع عرضه 288 بكسل بدلا من 270. والسبب في ذلك هو أن المتصفح يتضمن بشكل افتراضي الحدود (border) والـ padding عند تحديد حجم العنصر.
+
+لحل هذه المشكلة، قم بإعادة تعيين الـ box model عن طريق إنشاء منتقي `*` وإعطائه خاصية `box-sizing` بقيمة `border-box`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `*`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*'));
+```
+
+يجب أن يكون لمنتقي `*` الخاص بك `box-sizing` بقيمة `border-box`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('*')?.boxSizing === 'border-box');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <p>8 servings per container</p>
+      <p>Serving size 2/3 cup (55g)</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md
new file mode 100644
index 00000000000..bb1a349b8d8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3cafd794015aa9547a6d.md
@@ -0,0 +1,74 @@
+---
+id: 615f3cafd794015aa9547a6d
+title: الخطوة ١٢
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+تذكر أن استخدام `h1` و `h2` و الـ tags مشابهة تحدد البنية الدلالية (semantic structure) لـ HTML. ومع ذلك، يمكنك ضبط الـ CSS لهذه العناصر للتحكم في التدفق البصري (visual flow) والتسلسل الهرمي (hierarchy).
+
+قم بإنشاء قاعدة `h1` وتعيين خاصية `font-weight` إلى `800`. هذا سيجعل نص `h1` أكثر سمكاً (bolder).
+
+# --hints--
+
+يجب عليك إنشاء منتقي `h1`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+يجب أن يكون لمنتقي `h1` الخاص بك الخاصية `font-weight` بقيمة `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === '800');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <p>8 servings per container</p>
+      <p>Serving size 2/3 cup (55g)</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md
new file mode 100644
index 00000000000..da96ddcb163
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3d9e59db4b5b8e960762.md
@@ -0,0 +1,68 @@
+---
+id: 615f3d9e59db4b5b8e960762
+title: الخطوة ١٣
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+اعطي منتقي `h1` خاصية `text-align` بقيمة `center`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `h1` الخاص بك خاصية `text-align` بقيمة `center`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.textAlign === 'center');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <p>8 servings per container</p>
+      <p>Serving size 2/3 cup (55g)</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md
new file mode 100644
index 00000000000..75c6f98f0d8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e1b7233ee5c7595771f.md
@@ -0,0 +1,69 @@
+---
+id: 615f3e1b7233ee5c7595771f
+title: الخطوة ١٤
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+اضبط موضع `h1` بإعطائه top و bottom margin بقيمة `-4px` و left و right margin بقيمة `0`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `h1` الخاص بك خاصية `margin` بقيمة `-4px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.margin === '-4px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <p>8 servings per container</p>
+      <p>Serving size 2/3 cup (55g)</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md
new file mode 100644
index 00000000000..6c38d77c4e4
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3e4af8008c5d494d3afe.md
@@ -0,0 +1,78 @@
+---
+id: 615f3e4af8008c5d494d3afe
+title: خطوة ١٥
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+قم بإنشاء منتقي `p` وإزالة جميع الـ margins.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `p`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p'));
+```
+
+يجب أن يكون لمنتقي `p` الخاص بك خاصية `margin` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('p')?.margin === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <p>8 servings per container</p>
+      <p>Serving size 2/3 cup (55g)</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md
new file mode 100644
index 00000000000..33e4d10861f
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f3ed16592445e57941aec.md
@@ -0,0 +1,94 @@
+---
+id: 615f3ed16592445e57941aec
+title: الخطوة ١٦
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+يمكن أن تساعد الخطوط (lines) في فصل المحتوى المهم وتجميعه، خاصة عندما تكون المساحة محدودة.
+
+قم بإنشاء `div` جديد أسفل عنصر `h1` وإعطائه سمة `class` بقيمة `divider`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` جديد.
+
+```js
+assert(document.querySelectorAll('div')?.length === 2);
+```
+
+يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider`.
+
+```js
+assert(document.querySelectorAll('div')?.[1]?.classList?.contains('divider'));
+```
+
+عنصر `.divider` الخاص بك يجب أن يكون داخل عنصر `.label` الخاص بك.
+
+```js
+assert(document.querySelector('.label')?.querySelector('.divider'));
+```
+
+عنصر `.divider` الخاص بك يجب أن يأتي بعد عنصر `h1` الخاص بك.
+
+```js
+assert(document.querySelector('.divider')?.previousElementSibling?.localName === 'h1');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+--fcc-editable-region--
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <p>8 servings per container</p>
+      <p>Serving size 2/3 cup (55g)</p>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+p {
+  margin: 0;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md
new file mode 100644
index 00000000000..ebce9722d41
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f405b89a7ec5f8e2d11f4.md
@@ -0,0 +1,89 @@
+---
+id: 615f405b89a7ec5f8e2d11f4
+title: الخطوة ١٧
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+قم بإنشاء منتقي للـ `.divider` الجديد وقم بتعيين خاصية `border-bottom` إلى `1px solid #888989`. أعطيه أيضا top و bottom margin من `2px`. ولا ينبغي أن يكون له أي left او right margin.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.divider`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider'));
+```
+
+يجب أن يكون لمنتقي `.divider` الخاص بك الخاصية `border-bottom` بقيمة `1px solid #888989`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+يجب أن يكون لمنتقي `.divider` الخاص بك الخاصية `margin` بقيمة `2px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.margin === '2px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p>Serving size 2/3 cup (55g)</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+
+p {
+  margin: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md
new file mode 100644
index 00000000000..10fe8cb1f2e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f40b01f680e608d360ed4.md
@@ -0,0 +1,82 @@
+---
+id: 615f40b01f680e608d360ed4
+title: الخطوة ١٨
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+يمكن استخدام خاصية `letter-spacing` لضبط المسافة بين كل حرف من أحرف النص في عنصر.
+
+قم بإعطاء منتقي `h1` الخاص بك الخاصية `letter-spacing` بقيمة `0.15px` لزيادة التباعد قليلاً.
+
+# --hints--
+
+يجب أن يكون لمنتقي `h1` الخاص بك خاصية `letter-spacing` بقيمة `0.15px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.letterSpacing === '0.15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p>Serving size 2/3 cup (55g)</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+}
+--fcc-editable-region--
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md
new file mode 100644
index 00000000000..19142b2fbc6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4172e9eec061d6456221.md
@@ -0,0 +1,89 @@
+---
+id: 615f4172e9eec061d6456221
+title: الخطوة ١٩
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+تحتوي ملصقات التغذية على الكثير من النصوص الـ bold للفت الانتباه إلى المعلومات المهمة. بدلاً من استهداف كل عنصر يحتاج إلى أن يكون bold، من الأكثر كفاءة استخدام class لتطبيق النمط bold على كل عنصر.
+
+أعطِ العنصر `p` الثاني سمة `class` بقيمة `bold`.
+
+# --hints--
+
+يجب أن يحتوي العنصر `p` الثاني على سمة `class` تم تعيينها إلى `bold`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.classList?.contains('bold'));
+```
+
+يجب أن يحتوي عنصر `p` الاول على `class` بقيمة `bold`.
+
+```js
+assert(!document.querySelector('p')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+--fcc-editable-region--
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p>Serving size 2/3 cup (55g)</p>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px;
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md
new file mode 100644
index 00000000000..3ba600adb73
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f41c979787462e76dab90.md
@@ -0,0 +1,102 @@
+---
+id: 615f41c979787462e76dab90
+title: الخطوة ٢٠
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+الـ class الجديد الخاص بك لا يحتوي على أي نمط (style) حتى الآن. قم بإنشاء منتقي `.bold` وإعطائه الخاصية `font-weight` بقيمة `800` لجعل النص bold.
+
+قم بأزالة خاصية `font-weight` من منتقي `h1` الخاص بك أيضًا.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.bold`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bold'));
+```
+
+يجب أن يكون لمنتقي `.bold` الخاص بك الخاصية `font-weight` بقيمة `800`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.bold')?.fontWeight === '800');
+```
+
+يجب ألا يكون لمنتقي `h1` الخاص بك خاصية `font-weight`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1')?.fontWeight === "");
+```
+
+لا يجب عليك إزالة منتقي `h1` الخاص بك.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size 2/3 cup (55g)</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  font-weight: 800;
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px;
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md
new file mode 100644
index 00000000000..dd8ad6a2cd1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f423cf65d5864132a0956.md
@@ -0,0 +1,84 @@
+---
+id: 615f423cf65d5864132a0956
+title: الخطوة ٢١
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+أعطِ عنصر `h1` السمة `class` بقيمة `bold`. وهذا سيجعل النص bold مرة أخرى.
+
+# --hints--
+
+عنصر `h1` الخاص بك يجب أن يحتوي على سمة `class` بقيمة `bold`.
+
+```js
+assert(document.querySelector('h1')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+--fcc-editable-region--
+    <div class="label">
+      <h1>Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size 2/3 cup (55g)</p>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md
new file mode 100644
index 00000000000..c12acb7d241
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f42a021625f656101ef93.md
@@ -0,0 +1,104 @@
+---
+id: 615f42a021625f656101ef93
+title: الخطوة ٢٢
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+المسافة الأفقية بين العناصر ذات الأهمية المتساوية يمكن أن تزيد من سهولة قراءة النص الخاص بك.
+
+قم بتغليف النص `2/3 cup (55g)` في عنصر `span`، وقم بإعطائه سمة `class` بقيمة `right`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `span` جديد.
+
+```js
+assert(document.querySelector('span'));
+```
+
+يجب أن يحتوي عنصر الـ `span` الجديد على سمة `class` بقيمة `right`.
+
+```js
+assert(document.querySelector('span')?.classList?.contains('right'));
+```
+
+يجب أن يحتوي عنصر `span` على النص `2/3 cup (55g)`.
+
+```js
+assert(document.querySelector('span')?.textContent?.trim() === '2/3 cup (55g)');
+```
+
+يجب أن يظل عنصر `p` الخاص بك يحتوي على النص `Serving size 2/3 cup (55g)`.
+
+```js
+assert(document.querySelectorAll('p')?.[1]?.innerText === 'Serving size 2/3 cup (55g)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+--fcc-editable-region--
+    <div class="label">
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size 2/3 cup (55g)</p>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md
new file mode 100644
index 00000000000..96daad2ef71
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4bfb9de4a16703b56eb6.md
@@ -0,0 +1,94 @@
+---
+id: 615f4bfb9de4a16703b56eb6
+title: الخطوة ٢٣
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+تُستخدم الخاصية `float` لوضع عنصر على يسار أو يمين الحاوية (container) الخاصة به، مما يسمح لمحتوى آخر (مثل نص) بالالتفاف حوله.
+
+قم بإنشاء منتقي `.right` جديد وقم بتعيين خاصية `float` بقيمة `right`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.right` جديد.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.right'));
+```
+
+يجب أن يكون لمنتقي `.right` الخاص بك خاصية `float` بقيمة `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.right')?.float === 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md
new file mode 100644
index 00000000000..b2df726b5d6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ce9d877b668417c0c42.md
@@ -0,0 +1,104 @@
+---
+id: 615f4ce9d877b668417c0c42
+title: الخطوة ٢٤
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+قم بتغليف كل شيء داخل عنصر `.label` في عنصر `header` جديد.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `header` جديد.
+
+```js
+assert(document.querySelector('header'));
+```
+
+عنصر `header` الخاص بك يجب أن يكون داخل عنصر `.label` الخاص بك.
+
+```js
+assert(document.querySelector('header')?.parentElement?.classList?.contains('label'));
+```
+
+يجب أن تكون عناصر `h1` و `div` و `p` ضمن عنصر `header` الجديد.
+
+```js
+const children = document.querySelector('header')?.children;
+assert(children?.[0]?.localName === 'h1');
+assert(children?.[1]?.localName === 'div');
+assert(children?.[2]?.localName === 'p');
+assert(children?.[3]?.localName === 'p');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+--fcc-editable-region--
+    <div class="label">
+      <h1 class="bold">Nutrition Facts</h1>
+      <div class="divider"></div>
+      <p>8 servings per container</p>
+      <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+    </div>
+--fcc-editable-region--
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md
new file mode 100644
index 00000000000..43713dd93a2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4dde9d72e3694cb9ee3b.md
@@ -0,0 +1,105 @@
+---
+id: 615f4dde9d72e3694cb9ee3b
+title: خطوة ٢٥
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+الآن قم بتحديث منتقي `h1` الخاص بك ليكون `header h1` ليستهدف على وجه التحديد عنصر `h1` الخاص بك داخل الـ `header` الجديد.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `header h1`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('header h1'));
+```
+
+يجب ألا يكون لديك منتقي `h1`.
+
+```js
+assert.isNull(new __helpers.CSSHelp(document).getStyle('h1'));
+```
+
+لا يجب عليك تغيير أي خصائص في المنتقي.
+
+```js
+const style = new __helpers.CSSHelp(document).getStyle('header h1');
+assert(style?.textAlign === 'center');
+assert(style?.margin === '-4px 0px');
+assert(style?.letterSpacing === '0.15px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+--fcc-editable-region--
+h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+--fcc-editable-region--
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md
new file mode 100644
index 00000000000..b7507356716
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4ec58334106a4170c2a8.md
@@ -0,0 +1,105 @@
+---
+id: 615f4ec58334106a4170c2a8
+title: الخطوة ٢٦
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+قم بإنشاء `div` جديد أسفل عنصر `header` وإعطائه سمة `class` بقيمة `divider lg`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` جديد.
+
+```js
+assert(document.querySelectorAll('div')?.length === 3);
+```
+
+عنصر `div` الجديد الخاص بك يجب أن يأتي بعد عنصر `header` الخاص بك.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
+```
+
+عنصر `div` الجديد الخاص بك يجب أن يحتوي على سمة `class` بقيمة `divider lg`.
+
+```js
+const div = document.querySelector('.label')?.lastElementChild;
+assert(div?.classList?.contains('divider'));
+assert(div?.classList?.contains('lg'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+--fcc-editable-region--
+
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md
new file mode 100644
index 00000000000..0235d30e134
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f4f9e4a40566b776a8f38.md
@@ -0,0 +1,111 @@
+---
+id: 615f4f9e4a40566b776a8f38
+title: الخطوة ٢٧
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+قم بإنشاء منتقي `.lg` جديد وإعطائه خاصية `height` بقيمة `10px`. قم أيضا بإنشاء منتقي `.lg, .md` وتعيين خاصية `background-color` إلى `black`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.lg` جديد.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.lg'));
+```
+
+يجب أن يكون لمنتقي `.lg` الخاص بك خاصية `height` بقيمة `10px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.lg')?.height === '10px');
+```
+
+يجب أن يكون لديك منتقي `.lg, .md` جديد.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.lg, .md'));
+```
+
+يجب أن يكون لمنتقي `.lg, .md` الخاص بك `background-color` تم تعيينه إلى `black`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.backgroundColor === 'black');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md
new file mode 100644
index 00000000000..343bba2d10c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f50473cc0196c6dd3892a.md
@@ -0,0 +1,101 @@
+---
+id: 615f50473cc0196c6dd3892a
+title: الخطوة ٢٨
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+يمكنك ملاحظة أنه لا يزال هناك حدود صغيرة في أسفل عنصر `.lg`. لإعادة تعيين هذا، قم بإعطاء منتقي `.lg, .md` الخاصية `border` بقيمة `0`.
+
+ملاحظة: سيتم استخدام فئة `md`(متوسط) في الخطوة 37 لأشرطة الأرفع في nutrition label.
+
+# --hints--
+
+يجب أن يكون لمنتقيك `.lg, .md` الخاصية `border` بقيمة `0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.lg, .md')?.borderWidth === '0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+--fcc-editable-region--
+.lg, .md {
+  background-color: black;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md
new file mode 100644
index 00000000000..a8bd02c7524
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51257a8a516d80b6c743.md
@@ -0,0 +1,113 @@
+---
+id: 615f51257a8a516d80b6c743
+title: الخطوة ٢٩
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+قم بإنشاء `div` جديد أسفل عنصر `.lg` وإعطائه سمة `class` بقيمة `calories-info`.
+
+# --hints--
+
+يجب عليك إضافة عنصر `div` جديد.
+
+```js
+assert(document.querySelectorAll('div')?.length === 4);
+```
+
+يجب أن يحتوي عنصر `div` الجديد على السمة `class` بقيمة `calories-info`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('calories-info'));
+```
+
+يجب أن يأتي الـ `div` الجديد بعد عنصر `.lg` الخاص بك.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('lg'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md
new file mode 100644
index 00000000000..a0d646fa601
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f51e4e5b24a6e80eccce1.md
@@ -0,0 +1,116 @@
+---
+id: 615f51e4e5b24a6e80eccce1
+title: الخطوة ٣٠
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+ضمن عنصر `.calories-info` الخاص بك، أنشئ عنصر `p`. اعطي عنصر `p` سمة `class` تم تعيينها إلى `bold sm-text`، والنص `Amount per serving`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` جديد داخل عنصر `.calories-info` الخاص بك.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.localName === 'p');
+```
+
+يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `bold sm-text`.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('bold'));
+assert(document.querySelector('.calories-info')?.children?.[0]?.classList.contains('sm-text'));
+```
+
+عنصر `p` الجديد يجب أن يحتوي على النص `Amount per serving`.
+
+```js
+assert(document.querySelector('.calories-info')?.children?.[0]?.innerText === 'Amount per serving');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+--fcc-editable-region--
+      <div class="calories-info">
+
+      </div>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md
new file mode 100644
index 00000000000..9613e16ed7e
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f522dea4f776f64dc3e91.md
@@ -0,0 +1,113 @@
+---
+id: 615f522dea4f776f64dc3e91
+title: الخطوة ٣١
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+وحدة `rem` تعني `root em`، وهي تتعلق بحجم الخط (font size) لعنصر `html`.
+
+قم بإنشاء منتقي `.sm-text` وتعيين `font-size` إلى `0.85rem`، والتي ستحسب على أنها تقريبا `13.6px` (تذكر أنك قمت بتعيين `html` ليكون لديه `font-size` من `16px`).
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.sm-text`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sm-text'));
+```
+
+يجب أن يكون لمنتقي `.sm-text` الخاص بك الخاصية `font-size` بقيمة `0.85rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.sm-text')?.fontSize === '0.85rem');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md
new file mode 100644
index 00000000000..9c45631f4f6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5486b8fd4b71633f69b0.md
@@ -0,0 +1,138 @@
+---
+id: 615f5486b8fd4b71633f69b0
+title: الخطوة ٣٢
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+أسفل عنصر `.sm-text` الخاص بك، قم بإنشاء عنصر `h1` جديد مع النص `Calories 230`. قم بتغليف جزء `230` من النص في عنصر `span` مع `class` بقيمة `right`.
+
+# --hints--
+
+يجب أن يكون لديك عنصر `h1` جديد داخل عنصر `.calories-info` الخاص بك.
+
+```js
+assert(document.querySelector('.calories-info')?.querySelector('h1'))
+```
+
+عنصر `h1` الخاص بك يجب أن يأتي بعد عنصر `.sm-text` الخاص بك.
+
+```js
+assert(document.querySelector('.sm-text')?.nextElementSibling?.localName === 'h1');
+```
+
+يجب أن يحتوي عنصر `h1` الخاص بك على النص `Calories 230`.
+
+```js
+// the float: right property does weird things to the inner text.
+assert(document.querySelector('.calories-info')?.lastElementChild?.innerText.match(/Calories[\s|\n]*230/));
+```
+
+يجب عليك إنشاء عنصر `span` ضمن عنصر `h1` الجديد.
+
+```js
+assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span'));
+```
+
+يجب أن يحتوي عنصر `span` على `class` بقيمة `right`.
+
+```js
+assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')?.classList?.contains('right'));
+```
+
+يجب أن يحتوي عنصر `span` على النص `230`.
+
+```js
+assert(document.querySelector('.calories-info')?.lastElementChild?.querySelector('span')?.innerText === '230');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+--fcc-editable-region--
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+      </div>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md
new file mode 100644
index 00000000000..b8d9c3cc636
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f575b50b91e72af079480.md
@@ -0,0 +1,119 @@
+---
+id: 615f575b50b91e72af079480
+title: الخطوة ٣٣
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+قم بإنشاء منتقي `.calories-info h1` يعين top و margin bottom إلى `-5px`، و left و right margin إلى `-2px`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.calories-info h1` جديد.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1'));
+```
+
+المنتقي الجديد `.calories-info h1` يجب أن يكون لديه خاصية `margin` بقيمة `-5px -2px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginTop, '-5px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginBottom, '-5px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginLeft, '-2px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.marginRight, '-2px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md
new file mode 100644
index 00000000000..e0f95c27096
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5af373a68e744a3c5a76.md
@@ -0,0 +1,120 @@
+---
+id: 615f5af373a68e744a3c5a76
+title: الخطوة ٣٤
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+قم بإنشاء منتقي `.calories-info span` وتعيين `font-size` إلى `1.2em`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.calories-info span`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span'));
+```
+
+يجب أن يكون لمنتقي `.calories-info span` الخاص بك الخاصية `font-size` بقيمة `1.2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.fontSize === '1.2em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md
new file mode 100644
index 00000000000..2e64e4290d7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5c1cb7575c7551ed8a40.md
@@ -0,0 +1,116 @@
+---
+id: 615f5c1cb7575c7551ed8a40
+title: الخطوة ٣٥
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+حجم الخط الكبير للرقم `230` يتسبب في overflow. اعطي `.calories-info h1` خاصية `overflow` بقيمة `hidden` لتجنب هذا.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.calories-info h1` الخاص بك الخاصية `overflow` بقيمة `hidden`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info h1')?.overflow === 'hidden');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+--fcc-editable-region--
+.calories-info h1 {
+  margin: -5px -2px;
+}
+--fcc-editable-region--
+
+.calories-info span {
+  font-size: 1.2em;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md
new file mode 100644
index 00000000000..7529a94f6ef
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f5fd85d0062761f288364.md
@@ -0,0 +1,119 @@
+---
+id: 615f5fd85d0062761f288364
+title: الخطوة ٣٦
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+غالبًا ما تكون الطباعة (Typography) فنًا أكثر منها علمًا. قد تضطر إلى تعديل أشياء مثل المحاذاة حتى تبدو صحيحة.
+
+قم بإعطاء منتقي `.calories-info span` الـ `margin-top` بقيمة `-7px`. سيؤدي هذا إلى تحويل النص الخاص بك `230` إلى موضعه.
+
+# --hints--
+
+منتقي `.calories-info span` يجب ان يحتوي علي `margin-top` بقيمة `-7px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.calories-info span')?.marginTop === '-7px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+--fcc-editable-region--
+.calories-info span {
+  font-size: 1.2em;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md
new file mode 100644
index 00000000000..247e79fc6f2
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f61338c8ca176d6445574.md
@@ -0,0 +1,126 @@
+---
+id: 615f61338c8ca176d6445574
+title: الخطوة ٣٧
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+أسفل عنصر `.calories-info` الخاص بك، أضف `div` مع سمة `class` بقمية `divider md`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `div` جديد في عنصر `.label` الخاص بك.
+
+```js
+assert(document.querySelectorAll('.label > div')?.length === 3)
+```
+
+يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider md`. يجب أن يكون هذا العنصر الأخير في عنصر `.label` الخاص بك.
+
+```js
+const div = document.querySelector('.label')?.lastElementChild;
+assert(div?.classList?.contains('divider') && div?.classList?.contains('md'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md
new file mode 100644
index 00000000000..c51a9fcff32
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f666ac5edea782feb7e75.md
@@ -0,0 +1,127 @@
+---
+id: 615f666ac5edea782feb7e75
+title: الخطوة ٣٨
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+قم بإنشاء منتقي `.md` وإعطائه خاصية `height` بقيمة `5px`.
+
+# --hints--
+
+يجب عليك إنشاء منتقي `.md`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.md'));
+```
+
+يجب أن يكون لمنتقي `.md` الخاص بك الخاصية `height` بقيمة `5px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.md')?.height === '5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md
new file mode 100644
index 00000000000..98951d6bfda
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f671b6d1919792745aa5d.md
@@ -0,0 +1,153 @@
+---
+id: 615f671b6d1919792745aa5d
+title: الخطوة ٣٩
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+قم بإنشاء عنصر `div` جديد تحت عنصر `.md` الخاص بك. قم بإعطائه سمة `class` تم تعيينها إلى `daily-value sm-text`. داخل هذا الـ `div` الجديد، قم بإضافة عنصر `p` مع النص `% Daily Value *`، وتعيين سمة `class` إلى `right bold`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `div` جديد بعد عنصر `.md` الخاص بك.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'div');
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('divider'));
+assert(document.querySelector('.label')?.lastElementChild?.previousElementSibling?.classList?.contains('md'));
+```
+
+يجب أن يحتوي الـ `div` الجديد على سمة `class` بقيمة `daily-value sm-text`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('daily-value'));
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('sm-text'));
+```
+
+يجب أن يحتوي عنصر `div` الجديد على عنصر `p`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.localName === 'p');
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `% Daily Value *`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.textContent === '% Daily Value *');
+```
+
+يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `right bold`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('right'));
+assert(document.querySelector('.label')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md
new file mode 100644
index 00000000000..bc7e1bb68ad
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6823d0815b7a991f2a75.md
@@ -0,0 +1,139 @@
+---
+id: 615f6823d0815b7a991f2a75
+title: الخطوة ٤٠
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+نمط `float` يتسبب في ان عنصر `p` الجديد يصبح خارج حدود الـ label. استخدم عنصر `.divider` الموجود كمثال لإضافة divider جديد بعد عنصر `p`.
+
+# --hints--
+
+يجب عليك إنشاء `div` جديد داخل عنصر `.daily-value.sm-text`.
+
+```js
+assert(document.querySelectorAll('.daily-value.sm-text > div')?.length === 1)
+```
+
+يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text > div')?.classList?.contains('divider'))
+```
+
+يجب أن يأتي `div` الجديد بعد عنصر `p` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text > div')?.previousElementSibling?.localName === 'p');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+--fcc-editable-region--
+      <div class="daily-value sm-text">
+        <p class="right bold">% Daily Value *</p>
+
+      </div>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md
new file mode 100644
index 00000000000..dc03eb4d418
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6a7d4ba8037bc086c2c7.md
@@ -0,0 +1,127 @@
+---
+id: 615f6a7d4ba8037bc086c2c7
+title: الخطوة ٤١
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+قم بإعطاء منتقي `.divider` خاصية `clear` بقيمة `right`. سيؤدي هذا إلى مسح خاصية `float` ، مما سيدفع الـ divider وأي محتوى تالي أسفل نص `float`.
+
+# --hints--
+
+يجب أن يكون لمنتقي `.divider` الخاص بك خاصية `clear` بقيمة `right`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.divider')?.clear === 'right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold">% Daily Value *</p>
+        <div class="divider"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+--fcc-editable-region--
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+}
+--fcc-editable-region--
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md
new file mode 100644
index 00000000000..2f98b501aa3
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6b2d164f81809efd9bdc.md
@@ -0,0 +1,165 @@
+---
+id: 615f6b2d164f81809efd9bdc
+title: الخطوة ٤٢
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+بعد آخر عنصر `.divider`، أنشئ عنصر `p` وأعطيه النص `Total Fat 8g 10%`. قم بتغليف `Total Fat` في `span` مع `class` تم تعيينه إلى `bold`. قم بتغليف `10%` في `span` مع `class` تم تعيينه إلى `bold right`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` جديد في نهاية عنصر `.daily-value` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `Total Fat 8g 10%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Fat 8g[\s|\n]+10%/));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على عنصران `span`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
+```
+
+يجب أن يغلف عنصر `span` الاول النص `Total Fat`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.innerText === 'Total Fat');
+```
+
+يجب أن يحتوي عنصر `span` الاول على `class` بقيمة `bold`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.className === 'bold');
+```
+
+يجب أن يغلف عنصر `span` الثاني النص `10%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.innerText === '10%');
+```
+
+يجب أن يحتوي عنصر `span` الثاني على `class` بقيمة `bold right`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.[1]?.className === 'bold right');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold">% Daily Value *</p>
+        <div class="divider"></div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md
new file mode 100644
index 00000000000..4662b867055
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6cc778f7698258467596.md
@@ -0,0 +1,156 @@
+---
+id: 615f6cc778f7698258467596
+title: الخطوة ٤٣
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+أسفل العنصر مع النص `Total Fat`، قم بإنشاء عنصر `p` جديد مع النص `Saturated Fat 1g 5%`. قم بتغليف `5%` في `span` مع السمة `class` بقيمة `bold right`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` جديد تحت العنصر الخاص بك مع النص `Total Fat`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText.match(/Total Fat 8g\s*10%/));
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `Saturated Fat 1g 5%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText.match(/Saturated Fat 1g\s*5%/));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على عنصر `span`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.localName === 'span');
+```
+
+يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `bold right`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right'));
+```
+
+يجب أن يغلف عنصر `span` النص `5%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === "5%");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+--fcc-editable-region--
+
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md
new file mode 100644
index 00000000000..1b759a85ef0
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f6fddaac1e083502d3e6a.md
@@ -0,0 +1,130 @@
+---
+id: 615f6fddaac1e083502d3e6a
+title: الخطوة ٤٤
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+هذا العنصر `p` الجديد سوف يحتاج إلى أن يكون indented. أعطيه `class` بقيمة `indent`.
+
+# --hints--
+
+عنصر `p` الخاص بك مع النص`Saturated Fat 1g 5%` يجب أن يحتوي على سمة `class` بقيمة `indent`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('indent'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+--fcc-editable-region--
+        <p>Saturated Fat 1g <span class="bold right">5%</span></p>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md
new file mode 100644
index 00000000000..22f1946bea7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f70077a4ff98424236c1e.md
@@ -0,0 +1,138 @@
+---
+id: 615f70077a4ff98424236c1e
+title: الخطوة ٤٥
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+قم بإنشاء منتقي `.indent` وإعطائه الخاصية `margin-left` بقيمة `1em`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.indent` جديد.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.indent'));
+```
+
+يجب أن يكون لمنتقي `.indent` الخاص بك `margin-left` بقمية `1em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.indent')?.marginLeft === '1em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent">Saturated Fat 1g <span class="bold right">5%</span></p>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md
new file mode 100644
index 00000000000..e9918ff38c1
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f72a872354a850d4f533e.md
@@ -0,0 +1,142 @@
+---
+id: 615f72a872354a850d4f533e
+title: الخطوة ٤٦
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+قم بإنشاء منتقي `.daily-value p` لاستهداف جميع عناصر `p` الخاصة بك في قسم `daily-value`. أعطِ هذا المنتقي الجديد `border-bottom` بقيمة `1px solid #888989`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.daily-value p` جديد.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p'));
+```
+
+يجب أن يكون لمنتقي `.daily-value p` الخاص بك خاصية `border-bottom` بقيمة `1px solid #888989`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p')?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent">Saturated Fat 1g <span class="bold right">5%</span></p>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md
new file mode 100644
index 00000000000..a62c8b342aa
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f74a71f1e498619e38ee8.md
@@ -0,0 +1,149 @@
+---
+id: 615f74a71f1e498619e38ee8
+title: الخطوة ٤٧
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+الحدود السفلية (bottom border) تحت عناصر `% Daily Value *` و `Saturated Fat 1g 5%` لا تمتد العرض الكامل للـ label. أضف `no-divider` إلى `class` هذين العنصرين.
+
+# --hints--
+
+عنصر `p` الخاص بك مع النص `% Daily Value *` يجب أن يحتوي علي `no-divider` مضاف إلى السمة `class`. لا تقم بإزالة الـ classes الموجودة.
+
+```js
+const p = document.querySelector('.daily-value.sm-text')?.firstElementChild;
+assert(p?.classList?.contains('no-divider'));
+assert(p?.classList?.contains('bold'));
+assert(p?.classList?.contains('right'));
+```
+
+عنصر `p` الخاص بك مع النص `Saturated Fat 1g 5%` يجب أن يحتوي علي `no-divider` مضاف إلى السمة `class`. لا تقم بإزالة الـ classes الموجودة.
+
+```js
+const p = document.querySelector('.daily-value.sm-text')?.lastElementChild;
+assert(p?.classList?.contains('no-divider'));
+assert(p?.classList?.contains('indent'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+--fcc-editable-region--
+      <div class="daily-value sm-text">
+        <p class="right bold">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent">Saturated Fat 1g <span class="bold right">5%</span></p>
+      </div>
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md
new file mode 100644
index 00000000000..a9a2658a673
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ad94380408d971d14f6.md
@@ -0,0 +1,161 @@
+---
+id: 615f7ad94380408d971d14f6
+title: الخطوة ٤٨
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+Pseudo-selector الـ `:not` يمكن ان يستخدم لتحديد جميع العناصر التي لا تتطابق مع قاعدة الـ CSS المحددة.
+
+```css
+div:not(#example) {
+  color: red;
+}
+```
+
+ما ورد أعلاه يحدد جميع عناصر `div` بدون `id` بقيمة `example`.
+
+قم بتعديل منتقي `.daily-value p` لاستبعاد عناصر `.no-divider`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.daily-value p:not(.no-divider)`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)'));
+```
+
+يجب ألا يكون لديك منتقي `.daily-value p`.
+
+```js
+assert(!new __helpers.CSSHelp(document).getStyle('.daily-value p'));
+```
+
+لا يجب عليك تغيير الخصائص في منتقي `.daily-value p:not(.no-divider)`.
+
+```js
+const style = new __helpers.CSSHelp(document).getStyle('.daily-value p:not(.no-divider)');
+assert(style?.borderBottom === '1px solid rgb(136, 137, 137)');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+.daily-value p {
+  border-bottom: 1px solid #888989;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md
new file mode 100644
index 00000000000..290e900082c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7bc680f7168ea01ebf99.md
@@ -0,0 +1,146 @@
+---
+id: 615f7bc680f7168ea01ebf99
+title: الخطوة ٤٩
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+الآن يجب عليك إضافة dividers منفصلة تحت عناصر `.no-divider` الخاصة بك.
+
+العنصر `.no-divider` الاول الخاص بك يحتوي على `.divider` بعده. قم بإنشاء عنصر آخر `.divider` بعد العنصر `.no-divider` الثاني الخاص بك.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `div` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div');
+```
+
+يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md
new file mode 100644
index 00000000000..f331b02be94
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7c71eab8218f846e4503.md
@@ -0,0 +1,165 @@
+---
+id: 615f7c71eab8218f846e4503
+title: الخطوة 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+بعد آخر `.divider`، قم بإنشاء عنصر `p` آخر مع النص `Trans Fat 0g`. قم باستمالة (Italicize) الكلمة `Trans` عن طريق تغليفها في عنصر `i`. اعطي عنصر `p` الجديد السمة `class` بقيمة `indent no-divider`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `Trans Fat 0g`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText === 'Trans Fat 0g');
+```
+
+يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `indent no-divider`.
+
+```js
+const p = document.querySelector('.daily-value.sm-text')?.lastElementChild;
+assert(p?.classList?.contains('indent'));
+assert(p?.classList?.contains('no-divider'));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على عنصر `i`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'i');
+```
+
+يجب أن يغلف عنصر `i` النص `Trans`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Trans');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md
new file mode 100644
index 00000000000..acc75ffd6ae
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7d489a581590d1350288.md
@@ -0,0 +1,146 @@
+---
+id: 615f7d489a581590d1350288
+title: الخطوة ٥١
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+قم بإنشاء عنصر `.divider` آخر بعد اخر عنصر `p`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `div` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div');
+```
+
+عنصر `div` الجديد الخاص بك يجب أن يحتوي على سمة `class` بقيمة `divider`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md
new file mode 100644
index 00000000000..1df74f9ae0b
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7de4487b64919bb4aa5e.md
@@ -0,0 +1,178 @@
+---
+id: 615f7de4487b64919bb4aa5e
+title: الخطوة ٥٢
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+بعد آخر `.divider`، قم بإنشاء عنصر `p` آخر مع النص `Cholesterol 0mg 0%`. قم بتغليف النص `Cholesterol` في عنصر `span`، واعطي عنصر `span` هذا السمة `class` بقيمة `bold`. قم بتغليف نص `0%` في `span` اخري مع `class` تم تعيينه إلى `bold right`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `Cholesterol 0mg 0%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Cholesterol 0mg[\s|\n]+0%/));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على عنصران `span`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
+```
+
+يجب أن يحتوي عنصر `span` الاول على `class` بقيمة `bold`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+يجب أن يغلف عنصر `span` الاول النص `Cholesterol`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Cholesterol');
+```
+
+يجب أن يحتوي عنصر `span` الثاني على سمة `class` بقيمة `bold right`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right'));
+```
+
+يجب أن يغلف عنصر `span` الثاني النص `0%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '0%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md
new file mode 100644
index 00000000000..1154eda0f50
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7e7281626a92bbd62da8.md
@@ -0,0 +1,179 @@
+---
+id: 615f7e7281626a92bbd62da8
+title: الخطوة ٥٣
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+أسفل العنصر `p` الأخير، قم بإنشاء عنصر `p` آخر مع النص `Sodium 160mg 7%`. قم بتغليف النص `Sodium` في عنصر `span` مع سمة `class` تم تعيينها إلى `bold`. قم بتغليف النص `7%` في `span` اخر مع `class` تم تعيينه إلى `bold right`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على نص `Sodium 160mg 7%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Sodium 160mg[\s|\n]+7%/));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على عنصران `span`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
+```
+
+يجب أن يحتوي عنصر `span` الاول على `class` بقيمة `bold`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+يجب أن يغلف العنصر `span` النص `Sodium`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Sodium');
+```
+
+يجب أن يحتوي عنصر `span` الثاني على سمة `class` بقيمة `bold right`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right'));
+```
+
+يجب أن يغلف عنصر `span` الثاني النص `7%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '7%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md
new file mode 100644
index 00000000000..e426015816a
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7ecb09de9a938ef94756.md
@@ -0,0 +1,180 @@
+---
+id: 615f7ecb09de9a938ef94756
+title: الخطوة ٥٤
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+أضف عنصر `p` آخر مع النص `Total Carbohydrate 37g 13%`. مثل قبل، استخدم عناصر `span` لجعل النص `Total Carbohydrate` يكون bold، والنص `13%` محاذ إلى اليمين و bold.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `Total Carbohydrate 37g 13%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Total Carbohydrate 37g[\s|\n]+13%/));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على عنصران `span`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 2);
+```
+
+يجب أن يحتوي عنصر `span` الاول على `class` بقيمة `bold`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+يجب أن يغلف العنصر `span` النص `Total Carbohydrate`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.innerText === 'Total Carbohydrate');
+```
+
+يجب أن يحتوي عنصر `span` الثاني على سمة `class` بقيمة `bold right`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('bold'));
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.classList?.contains('right'));
+```
+
+يجب أن يغلف عنصر `span` الثاني النص `13%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.lastElementChild?.innerText === '13%');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md
new file mode 100644
index 00000000000..ff488ad0ca8
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f7fa959ab75948f96a0d6.md
@@ -0,0 +1,164 @@
+---
+id: 615f7fa959ab75948f96a0d6
+title: الخطوة ٥٥
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+أسفل عنصر `p` الأخير، أضف عنصر `p` آخر مع النص `Dietary Fiber 4g`. اعطي عنصر `p` الـ `class` اللازم لاضافة indent وإزالة الـ border الفاصل. ثم قم بإنشاء divider اسفل عنصر `p`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` و `div` جديدان في نهاية عنصر `.daily-value.sm-text` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div');
+```
+
+يجب أن يحتوي عنصر `p` الجديد على النص `Dietary Fiber 4g`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Dietary Fiber[\s|\n]+4g/));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent'));
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md
new file mode 100644
index 00000000000..991882861f6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f808d85793195b0f53be9.md
@@ -0,0 +1,166 @@
+---
+id: 615f808d85793195b0f53be9
+title: الخطوة ٥٦
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+قم بإنشاء عنصر آخر `p` بعد آخر `.divider`، وقم بإعطائه النص `Total Sugars 12g`. قم بتعيين عنصر `p` هذا، قيم الـ `class` اللازمة لاضافة indent وإزالة الحدود السفلي (bottom border). ثم قم بإنشاء عنصر `.divider` آخر تحت عنصر `p` الجديد.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` و `div` جديدان في نهاية عنصر `.daily-value.sm-text` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div');
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `Total Sugars 12g`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Total Sugars[\s|\n]+12g/));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على السمة `class` بقيمة `indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('indent'));
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+يجب أن يحتوي عنصر `div` الجديد على السمة `class` بقيمة `divider`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md
new file mode 100644
index 00000000000..d74b60322e7
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f829d07b18f96f6f6684b.md
@@ -0,0 +1,150 @@
+---
+id: 615f829d07b18f96f6f6684b
+title: الخطوة ٥٧
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+الميزة في إنشاء هذه الـ dividers هي أنه يمكنك تطبيق classes محددة لتصميمها بشكل فردي. أضف `dbl-indent` إلى الـ `class` الخاص بأخر `.divider`.
+
+# --hints--
+
+يجب أن يكون أخر عنصر `.divider` لديه `dbl-indent` مضاف إلى الـ `class`. لا تقم بإزالة القيمة الموجودة.
+
+```js
+const last = document.querySelector('.daily-value.sm-text')?.lastElementChild;
+assert(last?.classList?.contains('dbl-indent'));
+assert(last?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider"></div>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md
new file mode 100644
index 00000000000..5afa5841f92
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f83ef928ec9982b785b6a.md
@@ -0,0 +1,156 @@
+---
+id: 615f83ef928ec9982b785b6a
+title: الخطوة ٥٨
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+قم بإنشاء منتقي `.dbl-indent` وإعطائه left margin بقيمة `2em`.
+
+# --hints--
+
+يجب أن يكون لديك منتقي `.dbl-indent` جديد.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent'));
+```
+
+يجب أن يكون لمنتقي `.dbl-indent` الخاص بك `margin-left` بقمية `2em`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.dbl-indent')?.marginLeft === '2em');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md
new file mode 100644
index 00000000000..9378c9a0f19
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f84f246e8ba98e3cd97be.md
@@ -0,0 +1,193 @@
+---
+id: 615f84f246e8ba98e3cd97be
+title: الخطوة ٥٩
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+تحت عنصر `.dbl-indent` الخاص بك، أضف عنصر `p` جديد مع النص `Includes 10g Added Sugars 20%`. يجب أيضا أن يكون العنصر `p` الجديد الخاص بك double indented، وليس له حدود سفلي (bottom border). استخدم `span` لمحاذاة الـ `20%` الي اليمين (right aligned) و جعلها bold.
+
+ثم قم بإنشاء divider آخر بعد عنصر `p` هذا.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` و `div` في نهاية عنصر `.daily-value.sm-text` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div');
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على النص `Includes 10g Added Sugars 20%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Includes 10g Added Sugars[\s|\n]+20%/));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `dbl-indent no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('dbl-indent'));
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على عنصر `span`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.localName === 'span');
+```
+
+يجب أن يحتوي عنصر `span` على سمة `class` بقيمة `bold right`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('bold'));
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.firstElementChild?.classList?.contains('right'));
+```
+
+يجب أن يغلف عنصر `span` النص `20%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type span')?.innerText === '20%');
+```
+
+يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
new file mode 100644
index 00000000000..54b485e96aa
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f887466db4ba14b5342cc.md
@@ -0,0 +1,176 @@
+---
+id: 615f887466db4ba14b5342cc
+title: الخطوة ٦٠
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+بعد آخر divider، قم بإنشاء عنصر `p` آخر بالنص `Protein 3g`. استخدم الـ classes اللازمة لإزالة الحدود السفلية (bottom border)، و `span` لجعل `Protein` يبدو bold.
+
+بعد هذا العنصر، أنشئ divider كبيرا.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` و `div` في نهاية عنصر `.daily-value.sm-text` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'div');
+```
+
+يجب أن يحتوي عنصر `p` الجديد على نص `Protein 3g`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.innerText.match(/Protein[\s|\n]+3g/));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text p:last-of-type')?.classList?.contains('no-divider'));
+```
+
+يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider lg`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('lg'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
new file mode 100644
index 00000000000..ab9320f096c
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f89e055040ba294719d2f.md
@@ -0,0 +1,175 @@
+---
+id: 615f89e055040ba294719d2f
+title: الخطوة ٦١
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+قم بإنشاء عنصر `p` آخر أسفل الـ divider الكبير الخاص بك. اعطي عنصر `p` النص `Vitamin D 2mcg 10%`. استخدم `span` لجعل `10%` محاذاة لليمين، ولكن لا تجعلها bold.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على نص `Vitamin D 2mcg 10%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Vitamin D 2mcg[\s|\n]+10%/));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على عنصر `span`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+يجب أن يحتوي عنصر `span` على `class` بقيمة `right`. تذكر أنه يجب عليك ألا تجعله bold.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right'));
+assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
+        <div class="divider lg"></div>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md
new file mode 100644
index 00000000000..5973030e125
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8bfe0f30a1a3c340356b.md
@@ -0,0 +1,202 @@
+---
+id: 615f8bfe0f30a1a3c340356b
+title: الخطوة ٦٢
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+قم بإنشاء عنصر `p` آخر، وأعطيه النص `Calcium 260mg 20%`. قم بمحاذاة `20%` إلى اليمين. أسفله، قم بإنشاء عنصر `p` بالنص `Iron 8mg 45%`، و محاذاة `45%` الي اليمين.
+
+# --hints--
+
+يجب عليك إنشاء عنصرين `p` جديدين في نهاية عنصر `.daily-value.sm-text` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.localName === 'p');
+```
+
+يجب أن يحتوي العنصر `p` الجديد على النص `Calcium 260mg 20%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.innerText?.match(/Calcium 260mg[\s|\n]+20%/));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على عنصر `span`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.localName === 'span');
+```
+
+يجب أن يحتوي عنصر `span` الجديد على سمة `class` بقيمة `right`. تذكر، لا تجعله bold.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('right'));
+assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.classList?.contains('bold'));
+```
+
+يجب أن يغلف عنصر `span` الاول النص `20%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.previousElementSibling?.firstElementChild?.innerText === '20%');
+```
+
+عنصر `p` الجديد الثاني يجب أن يحتوي على النص `Iron 8mg 45%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Iron 8mg[\s|\n]+45%/));
+```
+
+يجب أن يحتوي عنصر `p` الجديد الثاني على عنصر `span`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.localName === 'span');
+```
+
+يجب أن يحتوي عنصر `span` الثاني على سمة `class` بقيمة `right`. تذكر، لا تجعله bold.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('right'));
+assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.firstElementChild?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
+        <div class="divider lg"></div>
+        <p>Vitamin D 2mcg <span class="right">10%</span></p>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md
new file mode 100644
index 00000000000..d863520a343
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f8f1223601fa546e93f31.md
@@ -0,0 +1,184 @@
+---
+id: 615f8f1223601fa546e93f31
+title: الخطوة ٦٣
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+قم بإنشاء عنصر `p` الأخير لقسمك `.daily-value`. أعطيه النص `Potassium 235mg 6%`. قم بمحاذاة نص `6%` إلى اليمين، وإزالة الحدود السفلي من عنصر `p`.
+
+# --hints--
+
+يجب عليك إنشاء عنصر `p` جديد في نهاية عنصر `.daily-value.sm-text` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.localName === 'p');
+```
+
+يجب أن يحتوي عنصر `p` الجديد على سمة `class` بقيمة `no-divider`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.classList?.contains('no-divider'));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على نص `Potassium 235mg 6%`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.innerText?.match(/Potassium 235mg[\s|\n]+6%/));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على عنصر `span`.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelectorAll('span')?.length === 1);
+```
+
+يجب أن يحتوي عنصر `span` على `class` بقيمة `right`. تذكر أنه يجب عليك ألا تجعله bold.
+
+```js
+assert(document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('right'));
+assert(!document.querySelector('.daily-value.sm-text')?.lastElementChild?.querySelector('span')?.classList?.contains('bold'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+--fcc-editable-region--
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
+        <div class="divider lg"></div>
+        <p>Vitamin D 2mcg <span class="right">10%</span></p>
+        <p>Calcium 260mg <span class="right">20%</span></p>
+        <p>Iron 8mg <span class="right">45%</span></p>
+--fcc-editable-region--
+      </div>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md
new file mode 100644
index 00000000000..242d74f52a5
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f905fbd1017a65ca224eb.md
@@ -0,0 +1,192 @@
+---
+id: 615f905fbd1017a65ca224eb
+title: الخطوة ٦٤
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+أضف divider متوسط بعد عنصر `.daily-value` الخاص بك. أسفل هذا الـ divider الجديد، قم بإنشاء عنصر `p` مع السمة `class` المحددة إلى `note`.
+
+اعطي عنصر `p` النص التالي:
+
+```markup
+* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.
+```
+
+# --hints--
+
+يجب عليك إنشاء `div` جديد بعد عنصر `.daily-value` الخاص بك.
+
+```js
+assert(document.querySelector('.daily-value').nextElementSibling?.localName === 'div');
+```
+
+يجب أن يحتوي عنصر `div` الجديد على سمة `class` بقيمة `divider md`.
+
+```js
+assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('divider'));
+assert(document.querySelector('.daily-value')?.nextElementSibling?.classList?.contains('md'));
+```
+
+يجب عليك إنشاء عنصر `p` بعد عنصر `div` الجديد الخاص بك.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.localName === 'p');
+```
+
+عنصر `p` الجديد الخاص بك يجب أن يحتوي على `class` بقيمة `note`.
+
+```js
+assert(document.querySelector('.label')?.lastElementChild?.classList?.contains('note'));
+```
+
+يجب أن يحتوي عنصر `p` الجديد على النص المقدم.
+
+```js
+assert.equal(document.querySelector('.label')?.lastElementChild?.innerText, '* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g<span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
+        <div class="divider lg"></div>
+        <p>Vitamin D 2mcg <span class="right">10%</span></p>
+        <p>Calcium 260mg <span class="right">20%</span></p>
+        <p>Iron 8mg <span class="right">45%</span></p>
+        <p class="no-divider">Potassium 235mg <span class="right">6%</span></p>
+      </div>
+--fcc-editable-region--
+
+--fcc-editable-region--
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md
new file mode 100644
index 00000000000..372c3083d14
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f94786869e1a7fec54375.md
@@ -0,0 +1,176 @@
+---
+id: 615f94786869e1a7fec54375
+title: الخطوة ٦٥
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+قم بإنشاء محدد (selector) الـ `.note` وعيين حجم الخط (font) إلى `0.6rem`. قم أيضا بتعيين الهوامش العلوية و السفلي (top and bottom margin) إلى `5px`، بإزالة الهوامش اليسرى واليمينية (left and right margin).
+
+# --hints--
+
+يجب أن يكون لديك منتقي (selector) بأسم `.note`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note'));
+```
+
+يجب أن يحتوي منتقي `.note` على خاصية (property) الـ `font-size` بقيمة `0.6rem`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.fontSize === '0.6rem');
+```
+
+يجب أن يحتوي منتقي `.note` على خاصية (property) الـ `margin` بقيمة `5px 0`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.margin === '5px 0px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g <span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
+        <div class="divider lg"></div>
+        <p>Vitamin D 2mcg <span class="right">10%</span></p>
+        <p>Calcium 260mg <span class="right">20%</span></p>
+        <p>Iron 8mg <span class="right">45%</span></p>
+        <p class="no-divider">Potassium 235mg <span class="right">6%</span></p>
+      </div>
+      <div class="divider md"></div>
+      <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md
new file mode 100644
index 00000000000..e039dc00ed6
--- /dev/null
+++ b/curriculum/challenges/arabic/14-responsive-web-design-22/learn-typography-by-building-a-nutrition-label/615f951dff9317a900ef683f.md
@@ -0,0 +1,325 @@
+---
+id: 615f951dff9317a900ef683f
+title: الخطوة ٦٦
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+اعطي منتقي `.note` الـ left و right padding بقيمة `8px`، بإزالة الـ top و bottom padding. أيضا قم بتعيين خاصية `text-indent` إلى `-8px`.
+
+مع هذه التغييرات الأخيرة، اكتمل الـ nutrition label الخاصة بك!
+
+# --hints--
+
+يجب أن يحتوي منتقي `.note` على خاصية `padding` بقيمة `0 8px`.
+
+```js
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingTop, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingBottom, '0px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingLeft, '8px');
+assert.equal(new __helpers.CSSHelp(document).getStyle('.note')?.paddingRight, '8px');
+```
+
+يجب أن يحتوي منتقي `.note` على خاصية الـ `text-indent` بقيمة `-8px`.
+
+```js
+assert(new __helpers.CSSHelp(document).getStyle('.note')?.textIndent === '-8px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g <span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
+        <div class="divider lg"></div>
+        <p>Vitamin D 2mcg <span class="right">10%</span></p>
+        <p>Calcium 260mg <span class="right">20%</span></p>
+        <p>Iron 8mg <span class="right">45%</span></p>
+        <p class="no-divider">Potassium 235mg <span class="right">6%</span></p>
+      </div>
+      <div class="divider md"></div>
+      <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+--fcc-editable-region--
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+}
+--fcc-editable-region--
+```
+
+## --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <title>Nutrition Label</title>
+    <link href="https://fonts.googleapis.com/css?family=Open+Sans:400,700,800" rel="stylesheet">
+    <link href="./styles.css" rel="stylesheet">
+  </head>
+  <body>
+    <div class="label">
+      <header>
+        <h1 class="bold">Nutrition Facts</h1>
+        <div class="divider"></div>
+        <p>8 servings per container</p>
+        <p class="bold">Serving size <span class="right">2/3 cup (55g)</span></p>
+      </header>
+      <div class="divider lg"></div>
+      <div class="calories-info">
+        <p class="bold sm-text">Amount per serving</p>
+        <h1>Calories <span class="right">230</span></h1>
+      </div>
+      <div class="divider md"></div>
+      <div class="daily-value sm-text">
+        <p class="right bold no-divider">% Daily Value *</p>
+        <div class="divider"></div>
+        <p><span class="bold">Total Fat</span> 8g <span class="bold right">10%</span></p>
+        <p class="indent no-divider">Saturated Fat 1g <span class="bold right">5%</span></p>
+        <div class="divider"></div>
+        <p class="indent no-divider"><i>Trans</i> Fat 0g</p>
+        <div class="divider"></div>
+        <p><span class="bold">Cholesterol</span> 0mg <span class="right bold">0%</span></p>
+        <p><span class="bold">Sodium</span> 160mg <span class="right bold">7%</span></p>
+        <p><span class="bold">Total Carbohydrate</span> 37g <span class="right bold">13%</span></p>
+        <p class="indent no-divider">Dietary Fiber 4g</p>
+        <div class="divider"></div>
+        <p class="indent no-divider">Total Sugars 12g</p>
+        <div class="divider dbl-indent"></div>
+        <p class="dbl-indent no-divider">Includes 10g Added Sugars <span class="right bold">20%</span>
+        <div class="divider"></div>
+        <p class="no-divider"><span class="bold">Protein</span> 3g</p>
+        <div class="divider lg"></div>
+        <p>Vitamin D 2mcg <span class="right">10%</span></p>
+        <p>Calcium 260mg <span class="right">20%</span></p>
+        <p>Iron 8mg <span class="right">45%</span></p>
+        <p class="no-divider">Potassium 235mg <span class="right">6%</span></p>
+      </div>
+      <div class="divider md"></div>
+      <p class="note">* The % Daily Value (DV) tells you how much a nutrient in a serving of food contributes to a daily diet. 2,000 calories a day is used for general nutrition advice.</p>
+    </div>
+  </body>
+</html>
+```
+
+```css
+* {
+  box-sizing: border-box;
+}
+
+html {
+  font-size: 16px;
+}
+
+body {
+  font-family: 'Open Sans', sans-serif;
+}
+
+.label {
+  border: 2px solid black;
+  width: 270px;
+  margin: 20px auto;
+  padding: 0 7px;
+}
+
+header h1 {
+  text-align: center;
+  margin: -4px 0;
+  letter-spacing: 0.15px
+}
+
+p {
+  margin: 0;
+}
+
+.divider {
+  border-bottom: 1px solid #888989;
+  margin: 2px 0;
+  clear: right;
+}
+
+.bold {
+  font-weight: 800;
+}
+
+.right {
+  float: right;
+}
+
+.lg {
+  height: 10px;
+}
+
+.lg, .md {
+  background-color: black;
+  border: 0;
+}
+
+.md {
+  height: 5px;
+}
+
+.sm-text {
+  font-size: 0.85rem;
+}
+
+.calories-info h1 {
+  margin: -5px -2px;
+  overflow: hidden;
+}
+
+.calories-info span {
+  font-size: 1.2em;
+  margin-top: -7px;
+}
+
+.indent {
+  margin-left: 1em;
+}
+
+.dbl-indent {
+  margin-left: 2em;
+}
+
+.daily-value p:not(.no-divider) {
+  border-bottom: 1px solid #888989;
+}
+
+.note {
+  font-size: 0.6rem;
+  margin: 5px 0;
+  padding: 0 8px;
+  text-indent: -8px;
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md
new file mode 100644
index 00000000000..46c493ad260
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-caesars-cipher-project/caesars-cipher.md
@@ -0,0 +1,88 @@
+---
+id: 56533eb9ac21ba0edf2244e2
+title: Build a Caesars Cipher
+challengeType: 5
+forumTopicId: 16003
+dashedName: build-a-caesars-cipher
+---
+
+# --description--
+
+One of the simplest and most widely known <dfn>ciphers</dfn> is a <dfn>Caesar cipher</dfn>, also known as a <dfn>shift cipher</dfn>. In a shift cipher the meanings of the letters are shifted by some set amount.
+
+A common modern use is the <a href="https://www.freecodecamp.org/news/how-to-code-the-caesar-cipher-an-introduction-to-basic-encryption-3bf77b4e19f7/" target="_blank" rel="noopener noreferrer nofollow">ROT13</a> cipher, where the values of the letters are shifted by 13 places. Thus `A ↔ N`, `B ↔ O` and so on.
+
+Write a function which takes a <a href="https://www.freecodecamp.org/news/how-to-code-the-caesar-cipher-an-introduction-to-basic-encryption-3bf77b4e19f7/" target="_blank" rel="noopener noreferrer nofollow">ROT13</a> encoded string as input and returns a decoded string.
+
+All letters will be uppercase. Do not transform any non-alphabetic character (i.e. spaces, punctuation), but do pass them on.
+
+# --hints--
+
+`rot13("SERR PBQR PNZC")` should decode to the string `FREE CODE CAMP`
+
+```js
+assert(rot13('SERR PBQR PNZC') === 'FREE CODE CAMP');
+```
+
+`rot13("SERR CVMMN!")` should decode to the string `FREE PIZZA!`
+
+```js
+assert(rot13('SERR CVMMN!') === 'FREE PIZZA!');
+```
+
+`rot13("SERR YBIR?")` should decode to the string `FREE LOVE?`
+
+```js
+assert(rot13('SERR YBIR?') === 'FREE LOVE?');
+```
+
+`rot13("GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.")` should decode to the string `THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.`
+
+```js
+assert(
+  rot13('GUR DHVPX OEBJA SBK WHZCF BIRE GUR YNML QBT.') ===
+    'THE QUICK BROWN FOX JUMPS OVER THE LAZY DOG.'
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function rot13(str) {
+  return str;
+}
+
+rot13("SERR PBQR PNZC");
+```
+
+# --solutions--
+
+```js
+var lookup = {
+  'A': 'N','B': 'O','C': 'P','D': 'Q',
+  'E': 'R','F': 'S','G': 'T','H': 'U',
+  'I': 'V','J': 'W','K': 'X','L': 'Y',
+  'M': 'Z','N': 'A','O': 'B','P': 'C',
+  'Q': 'D','R': 'E','S': 'F','T': 'G',
+  'U': 'H','V': 'I','W': 'J','X': 'K',
+  'Y': 'L','Z': 'M'
+};
+
+function rot13(encodedStr) {
+  var codeArr = encodedStr.split("");  // String to Array
+  var decodedArr = []; // Your Result goes here
+  // Only change code below this line
+
+  decodedArr = codeArr.map(function(letter) {
+    if(lookup.hasOwnProperty(letter)) {
+      letter = lookup[letter];
+    }
+    return letter;
+  });
+
+  // Only change code above this line
+  return decodedArr.join(""); // Array to String
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md
new file mode 100644
index 00000000000..4653f6358b1
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-cash-register-project/cash-register.md
@@ -0,0 +1,252 @@
+---
+id: aa2e6f85cab2ab736c9a9b24
+title: Build A Cash Register
+challengeType: 5
+forumTopicId: 16012
+dashedName: build-a-cash-register
+---
+
+# --description--
+
+Design a cash register drawer function `checkCashRegister()` that accepts purchase price as the first argument (`price`), payment as the second argument (`cash`), and cash-in-drawer (`cid`) as the third argument.
+
+`cid` is a 2D array listing available currency.
+
+The `checkCashRegister()` function should always return an object with a `status` key and a `change` key.
+
+Return `{status: "INSUFFICIENT_FUNDS", change: []}` if cash-in-drawer is less than the change due, or if you cannot return the exact change.
+
+Return `{status: "CLOSED", change: [...]}` with cash-in-drawer as the value for the key `change` if it is equal to the change due.
+
+Otherwise, return `{status: "OPEN", change: [...]}`, with the change due in coins and bills, sorted in highest to lowest order, as the value of the `change` key.
+
+<table class='table table-striped'><tbody><tr><th>Currency Unit</th><th>Amount</th></tr><tr><td>Penny</td><td>$0.01 (PENNY)</td></tr><tr><td>Nickel</td><td>$0.05 (NICKEL)</td></tr><tr><td>Dime</td><td>$0.1 (DIME)</td></tr><tr><td>Quarter</td><td>$0.25 (QUARTER)</td></tr><tr><td>Dollar</td><td>$1 (ONE)</td></tr><tr><td>Five Dollars</td><td>$5 (FIVE)</td></tr><tr><td>Ten Dollars</td><td>$10 (TEN)</td></tr><tr><td>Twenty Dollars</td><td>$20 (TWENTY)</td></tr><tr><td>One-hundred Dollars</td><td>$100 (ONE HUNDRED)</td></tr></tbody></table>
+
+See below for an example of a cash-in-drawer array:
+
+```js
+[
+  ["PENNY", 1.01],
+  ["NICKEL", 2.05],
+  ["DIME", 3.1],
+  ["QUARTER", 4.25],
+  ["ONE", 90],
+  ["FIVE", 55],
+  ["TEN", 20],
+  ["TWENTY", 60],
+  ["ONE HUNDRED", 100]
+]
+```
+
+# --hints--
+
+`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return an object.
+
+```js
+assert.deepEqual(
+  Object.prototype.toString.call(
+    checkCashRegister(19.5, 20, [
+      ['PENNY', 1.01],
+      ['NICKEL', 2.05],
+      ['DIME', 3.1],
+      ['QUARTER', 4.25],
+      ['ONE', 90],
+      ['FIVE', 55],
+      ['TEN', 20],
+      ['TWENTY', 60],
+      ['ONE HUNDRED', 100]
+    ])
+  ),
+  '[object Object]'
+);
+```
+
+`checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return `{status: "OPEN", change: [["QUARTER", 0.5]]}`.
+
+```js
+assert.deepEqual(
+  checkCashRegister(19.5, 20, [
+    ['PENNY', 1.01],
+    ['NICKEL', 2.05],
+    ['DIME', 3.1],
+    ['QUARTER', 4.25],
+    ['ONE', 90],
+    ['FIVE', 55],
+    ['TEN', 20],
+    ['TWENTY', 60],
+    ['ONE HUNDRED', 100]
+  ]),
+  { status: 'OPEN', change: [['QUARTER', 0.5]] }
+);
+```
+
+`checkCashRegister(3.26, 100, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]])` should return `{status: "OPEN", change: [["TWENTY", 60], ["TEN", 20], ["FIVE", 15], ["ONE", 1], ["QUARTER", 0.5], ["DIME", 0.2], ["PENNY", 0.04]]}`.
+
+```js
+assert.deepEqual(
+  checkCashRegister(3.26, 100, [
+    ['PENNY', 1.01],
+    ['NICKEL', 2.05],
+    ['DIME', 3.1],
+    ['QUARTER', 4.25],
+    ['ONE', 90],
+    ['FIVE', 55],
+    ['TEN', 20],
+    ['TWENTY', 60],
+    ['ONE HUNDRED', 100]
+  ]),
+  {
+    status: 'OPEN',
+    change: [
+      ['TWENTY', 60],
+      ['TEN', 20],
+      ['FIVE', 15],
+      ['ONE', 1],
+      ['QUARTER', 0.5],
+      ['DIME', 0.2],
+      ['PENNY', 0.04]
+    ]
+  }
+);
+```
+
+`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "INSUFFICIENT_FUNDS", change: []}`.
+
+```js
+assert.deepEqual(
+  checkCashRegister(19.5, 20, [
+    ['PENNY', 0.01],
+    ['NICKEL', 0],
+    ['DIME', 0],
+    ['QUARTER', 0],
+    ['ONE', 0],
+    ['FIVE', 0],
+    ['TEN', 0],
+    ['TWENTY', 0],
+    ['ONE HUNDRED', 0]
+  ]),
+  { status: 'INSUFFICIENT_FUNDS', change: [] }
+);
+```
+
+`checkCashRegister(19.5, 20, [["PENNY", 0.01], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 1], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "INSUFFICIENT_FUNDS", change: []}`.
+
+```js
+assert.deepEqual(
+  checkCashRegister(19.5, 20, [
+    ['PENNY', 0.01],
+    ['NICKEL', 0],
+    ['DIME', 0],
+    ['QUARTER', 0],
+    ['ONE', 1],
+    ['FIVE', 0],
+    ['TEN', 0],
+    ['TWENTY', 0],
+    ['ONE HUNDRED', 0]
+  ]),
+  { status: 'INSUFFICIENT_FUNDS', change: [] }
+);
+```
+
+`checkCashRegister(19.5, 20, [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]])` should return `{status: "CLOSED", change: [["PENNY", 0.5], ["NICKEL", 0], ["DIME", 0], ["QUARTER", 0], ["ONE", 0], ["FIVE", 0], ["TEN", 0], ["TWENTY", 0], ["ONE HUNDRED", 0]]}`.
+
+```js
+assert.deepEqual(
+  checkCashRegister(19.5, 20, [
+    ['PENNY', 0.5],
+    ['NICKEL', 0],
+    ['DIME', 0],
+    ['QUARTER', 0],
+    ['ONE', 0],
+    ['FIVE', 0],
+    ['TEN', 0],
+    ['TWENTY', 0],
+    ['ONE HUNDRED', 0]
+  ]),
+  {
+    status: 'CLOSED',
+    change: [
+      ['PENNY', 0.5],
+      ['NICKEL', 0],
+      ['DIME', 0],
+      ['QUARTER', 0],
+      ['ONE', 0],
+      ['FIVE', 0],
+      ['TEN', 0],
+      ['TWENTY', 0],
+      ['ONE HUNDRED', 0]
+    ]
+  }
+);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function checkCashRegister(price, cash, cid) {
+  let change;
+  return change;
+}
+
+checkCashRegister(19.5, 20, [["PENNY", 1.01], ["NICKEL", 2.05], ["DIME", 3.1], ["QUARTER", 4.25], ["ONE", 90], ["FIVE", 55], ["TEN", 20], ["TWENTY", 60], ["ONE HUNDRED", 100]]);
+```
+
+# --solutions--
+
+```js
+const denom = [
+  { name: "ONE HUNDRED", val: 100 },
+  { name: "TWENTY", val: 20 },
+  { name: "TEN", val: 10 },
+  { name: "FIVE", val: 5 },
+  { name: "ONE", val: 1 },
+  { name: "QUARTER", val: 0.25 },
+  { name: "DIME", val: 0.1 },
+  { name: "NICKEL", val: 0.05 },
+  { name: "PENNY", val: 0.01 },
+];
+
+function checkCashRegister(price, cash, cid) {
+  const output = { status: null, change: [] };
+  let change = cash - price;
+  const register = cid.reduce(
+    function (acc, curr) {
+      acc.total += curr[1];
+      acc[curr[0]] = curr[1];
+      return acc;
+    },
+    { total: 0 }
+  );
+  if (register.total === change) {
+    output.status = "CLOSED";
+    output.change = cid;
+    return output;
+  }
+  if (register.total < change) {
+    output.status = "INSUFFICIENT_FUNDS";
+    return output;
+  }
+  const change_arr = denom.reduce(function (acc, curr) {
+    let value = 0;
+    while (register[curr.name] > 0 && change >= curr.val) {
+      change -= curr.val;
+      register[curr.name] -= curr.val;
+      value += curr.val;
+      change = Math.round(change * 100) / 100;
+    }
+    if (value > 0) {
+      acc.push([curr.name, value]);
+    }
+    return acc;
+  }, []);
+  if (change_arr.length < 1 || change > 0) {
+    output.status = "INSUFFICIENT_FUNDS";
+    return output;
+  }
+  output.status = "OPEN";
+  output.change = change_arr;
+  return output;
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md
new file mode 100644
index 00000000000..5f7ca896a8c
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-palindrome-checker-project/palindrome-checker.md
@@ -0,0 +1,125 @@
+---
+id: aaa48de84e1ecc7c742e1124
+title: Build A Palindrome Checker
+challengeType: 5
+forumTopicId: 16004
+dashedName: build-a-palindrome-checker
+---
+
+# --description--
+
+Return `true` if the given string is a palindrome. Otherwise, return `false`.
+
+A <dfn>palindrome</dfn> is a word or sentence that's spelled the same way both forward and backward, ignoring punctuation, case, and spacing.
+
+**Note:** You'll need to remove **all non-alphanumeric characters** (punctuation, spaces and symbols) and turn everything into the same case (lower or upper case) in order to check for palindromes.
+
+We'll pass strings with varying formats, such as `racecar`, `RaceCar`, and `race CAR` among others.
+
+We'll also pass strings with special symbols, such as `2A3*3a2`, `2A3 3a2`, and `2_A3*3#A2`.
+
+# --hints--
+
+`palindrome("eye")` should return a boolean.
+
+```js
+assert(typeof palindrome('eye') === 'boolean');
+```
+
+`palindrome("eye")` should return `true`.
+
+```js
+assert(palindrome('eye') === true);
+```
+
+`palindrome("_eye")` should return `true`.
+
+```js
+assert(palindrome('_eye') === true);
+```
+
+`palindrome("race car")` should return `true`.
+
+```js
+assert(palindrome('race car') === true);
+```
+
+`palindrome("not a palindrome")` should return `false`.
+
+```js
+assert(palindrome('not a palindrome') === false);
+```
+
+`palindrome("A man, a plan, a canal. Panama")` should return `true`.
+
+```js
+assert(palindrome('A man, a plan, a canal. Panama') === true);
+```
+
+`palindrome("never odd or even")` should return `true`.
+
+```js
+assert(palindrome('never odd or even') === true);
+```
+
+`palindrome("nope")` should return `false`.
+
+```js
+assert(palindrome('nope') === false);
+```
+
+`palindrome("almostomla")` should return `false`.
+
+```js
+assert(palindrome('almostomla') === false);
+```
+
+`palindrome("My age is 0, 0 si ega ym.")` should return `true`.
+
+```js
+assert(palindrome('My age is 0, 0 si ega ym.') === true);
+```
+
+`palindrome("1 eye for of 1 eye.")` should return `false`.
+
+```js
+assert(palindrome('1 eye for of 1 eye.') === false);
+```
+
+`palindrome("0_0 (: /-\ :) 0-0")` should return `true`.
+
+```js
+assert(palindrome('0_0 (: /- :) 0-0') === true);
+```
+
+`palindrome("five|\_/|four")` should return `false`.
+
+```js
+assert(palindrome('five|_/|four') === false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function palindrome(str) {
+  return true;
+}
+
+palindrome("eye");
+```
+
+# --solutions--
+
+```js
+function palindrome(str) {
+  var string = str.toLowerCase().split(/[^A-Za-z0-9]/gi).join('');
+  var aux = string.split('');
+  if (aux.join('') === aux.reverse().join('')){
+    return true;
+  }
+
+  return false;
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md
new file mode 100644
index 00000000000..06f0c991879
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-roman-numeral-converter-project/roman-numeral-converter.md
@@ -0,0 +1,215 @@
+---
+id: a7f4d8f2483413a6ce226cac
+title: Build A Roman Numeral Converter
+challengeType: 5
+forumTopicId: 16044
+dashedName: build-a-roman-numeral-converter
+---
+
+# --description--
+
+Convert the given number into a roman numeral.
+
+| Roman numerals | Arabic numerals |
+| -------------- | --------------- |
+| M              | 1000            |
+| CM             | 900             |
+| D              | 500             |
+| CD             | 400             |
+| C              | 100             |
+| XC             | 90              |
+| L              | 50              |
+| XL             | 40              |
+| X              | 10              |
+| IX             | 9               |
+| V              | 5               |
+| IV             | 4               |
+| I              | 1               |
+
+All roman numerals answers should be provided in upper-case.
+
+# --hints--
+
+`convertToRoman(2)` should return the string `II`.
+
+```js
+assert.deepEqual(convertToRoman(2), 'II');
+```
+
+`convertToRoman(3)` should return the string `III`.
+
+```js
+assert.deepEqual(convertToRoman(3), 'III');
+```
+
+`convertToRoman(4)` should return the string `IV`.
+
+```js
+assert.deepEqual(convertToRoman(4), 'IV');
+```
+
+`convertToRoman(5)` should return the string `V`.
+
+```js
+assert.deepEqual(convertToRoman(5), 'V');
+```
+
+`convertToRoman(9)` should return the string `IX`.
+
+```js
+assert.deepEqual(convertToRoman(9), 'IX');
+```
+
+`convertToRoman(12)` should return the string `XII`.
+
+```js
+assert.deepEqual(convertToRoman(12), 'XII');
+```
+
+`convertToRoman(16)` should return the string `XVI`.
+
+```js
+assert.deepEqual(convertToRoman(16), 'XVI');
+```
+
+`convertToRoman(29)` should return the string `XXIX`.
+
+```js
+assert.deepEqual(convertToRoman(29), 'XXIX');
+```
+
+`convertToRoman(44)` should return the string `XLIV`.
+
+```js
+assert.deepEqual(convertToRoman(44), 'XLIV');
+```
+
+`convertToRoman(45)` should return the string `XLV`.
+
+```js
+assert.deepEqual(convertToRoman(45), 'XLV');
+```
+
+`convertToRoman(68)` should return the string `LXVIII`
+
+```js
+assert.deepEqual(convertToRoman(68), 'LXVIII');
+```
+
+`convertToRoman(83)` should return the string `LXXXIII`
+
+```js
+assert.deepEqual(convertToRoman(83), 'LXXXIII');
+```
+
+`convertToRoman(97)` should return the string `XCVII`
+
+```js
+assert.deepEqual(convertToRoman(97), 'XCVII');
+```
+
+`convertToRoman(99)` should return the string `XCIX`
+
+```js
+assert.deepEqual(convertToRoman(99), 'XCIX');
+```
+
+`convertToRoman(400)` should return the string `CD`
+
+```js
+assert.deepEqual(convertToRoman(400), 'CD');
+```
+
+`convertToRoman(500)` should return the string `D`
+
+```js
+assert.deepEqual(convertToRoman(500), 'D');
+```
+
+`convertToRoman(501)` should return the string `DI`
+
+```js
+assert.deepEqual(convertToRoman(501), 'DI');
+```
+
+`convertToRoman(649)` should return the string `DCXLIX`
+
+```js
+assert.deepEqual(convertToRoman(649), 'DCXLIX');
+```
+
+`convertToRoman(798)` should return the string `DCCXCVIII`
+
+```js
+assert.deepEqual(convertToRoman(798), 'DCCXCVIII');
+```
+
+`convertToRoman(891)` should return the string `DCCCXCI`
+
+```js
+assert.deepEqual(convertToRoman(891), 'DCCCXCI');
+```
+
+`convertToRoman(1000)` should return the string `M`
+
+```js
+assert.deepEqual(convertToRoman(1000), 'M');
+```
+
+`convertToRoman(1004)` should return the string `MIV`
+
+```js
+assert.deepEqual(convertToRoman(1004), 'MIV');
+```
+
+`convertToRoman(1006)` should return the string `MVI`
+
+```js
+assert.deepEqual(convertToRoman(1006), 'MVI');
+```
+
+`convertToRoman(1023)` should return the string `MXXIII`
+
+```js
+assert.deepEqual(convertToRoman(1023), 'MXXIII');
+```
+
+`convertToRoman(2014)` should return the string `MMXIV`
+
+```js
+assert.deepEqual(convertToRoman(2014), 'MMXIV');
+```
+
+`convertToRoman(3999)` should return the string `MMMCMXCIX`
+
+```js
+assert.deepEqual(convertToRoman(3999), 'MMMCMXCIX');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function convertToRoman(num) {
+ return num;
+}
+
+convertToRoman(36);
+```
+
+# --solutions--
+
+```js
+function convertToRoman(num) {
+  var ref = [['M', 1000], ['CM', 900], ['D', 500], ['CD', 400], ['C', 100], ['XC', 90], ['L', 50], ['XL', 40], ['X', 10], ['IX', 9], ['V', 5], ['IV', 4], ['I', 1]];
+  var res = [];
+  ref.forEach(function(p) {
+    while (num >= p[1]) {
+      res.push(p[0]);
+      num -= p[1];
+    }
+  });
+  return res.join('');
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md
new file mode 100644
index 00000000000..282f77b4be9
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/build-a-telephone-number-validator-project/telephone-number-validator.md
@@ -0,0 +1,217 @@
+---
+id: aff0395860f5d3034dc0bfc9
+title: Build a Telephone Number Validator
+challengeType: 5
+forumTopicId: 16090
+dashedName: build-a-telephone-number-validator
+---
+
+# --description--
+
+Return `true` if the passed string looks like a valid US phone number.
+
+The user may fill out the form field any way they choose as long as it has the format of a valid US number. The following are examples of valid formats for US numbers (refer to the tests below for other variants):
+
+<blockquote>555-555-5555<br>(555)555-5555<br>(555) 555-5555<br>555 555 5555<br>5555555555<br>1 555 555 5555</blockquote>
+
+For this challenge you will be presented with a string such as `800-692-7753` or `8oo-six427676;laskdjf`. Your job is to validate or reject the US phone number based on any combination of the formats provided above. The area code is required. If the country code is provided, you must confirm that the country code is `1`. Return `true` if the string is a valid US phone number; otherwise return `false`.
+
+# --hints--
+
+`telephoneCheck("555-555-5555")` should return a boolean.
+
+```js
+assert(typeof telephoneCheck('555-555-5555') === 'boolean');
+```
+
+`telephoneCheck("1 555-555-5555")` should return `true`.
+
+```js
+assert(telephoneCheck('1 555-555-5555') === true);
+```
+
+`telephoneCheck("1 (555) 555-5555")` should return `true`.
+
+```js
+assert(telephoneCheck('1 (555) 555-5555') === true);
+```
+
+`telephoneCheck("5555555555")` should return `true`.
+
+```js
+assert(telephoneCheck('5555555555') === true);
+```
+
+`telephoneCheck("555-555-5555")` should return `true`.
+
+```js
+assert(telephoneCheck('555-555-5555') === true);
+```
+
+`telephoneCheck("(555)555-5555")` should return `true`.
+
+```js
+assert(telephoneCheck('(555)555-5555') === true);
+```
+
+`telephoneCheck("1(555)555-5555")` should return `true`.
+
+```js
+assert(telephoneCheck('1(555)555-5555') === true);
+```
+
+`telephoneCheck("555-5555")` should return `false`.
+
+```js
+assert(telephoneCheck('555-5555') === false);
+```
+
+`telephoneCheck("5555555")` should return `false`.
+
+```js
+assert(telephoneCheck('5555555') === false);
+```
+
+`telephoneCheck("1 555)555-5555")` should return `false`.
+
+```js
+assert(telephoneCheck('1 555)555-5555') === false);
+```
+
+`telephoneCheck("1 555 555 5555")` should return `true`.
+
+```js
+assert(telephoneCheck('1 555 555 5555') === true);
+```
+
+`telephoneCheck("1 456 789 4444")` should return `true`.
+
+```js
+assert(telephoneCheck('1 456 789 4444') === true);
+```
+
+`telephoneCheck("123**&!!asdf#")` should return `false`.
+
+```js
+assert(telephoneCheck('123**&!!asdf#') === false);
+```
+
+`telephoneCheck("55555555")` should return `false`.
+
+```js
+assert(telephoneCheck('55555555') === false);
+```
+
+`telephoneCheck("(6054756961)")` should return `false`.
+
+```js
+assert(telephoneCheck('(6054756961)') === false);
+```
+
+`telephoneCheck("2 (757) 622-7382")` should return `false`.
+
+```js
+assert(telephoneCheck('2 (757) 622-7382') === false);
+```
+
+`telephoneCheck("0 (757) 622-7382")` should return `false`.
+
+```js
+assert(telephoneCheck('0 (757) 622-7382') === false);
+```
+
+`telephoneCheck("-1 (757) 622-7382")` should return `false`.
+
+```js
+assert(telephoneCheck('-1 (757) 622-7382') === false);
+```
+
+`telephoneCheck("2 757 622-7382")` should return `false`.
+
+```js
+assert(telephoneCheck('2 757 622-7382') === false);
+```
+
+`telephoneCheck("10 (757) 622-7382")` should return `false`.
+
+```js
+assert(telephoneCheck('10 (757) 622-7382') === false);
+```
+
+`telephoneCheck("27576227382")` should return `false`.
+
+```js
+assert(telephoneCheck('27576227382') === false);
+```
+
+`telephoneCheck("(275)76227382")` should return `false`.
+
+```js
+assert(telephoneCheck('(275)76227382') === false);
+```
+
+`telephoneCheck("2(757)6227382")` should return `false`.
+
+```js
+assert(telephoneCheck('2(757)6227382') === false);
+```
+
+`telephoneCheck("2(757)622-7382")` should return `false`.
+
+```js
+assert(telephoneCheck('2(757)622-7382') === false);
+```
+
+`telephoneCheck("555)-555-5555")` should return `false`.
+
+```js
+assert(telephoneCheck('555)-555-5555') === false);
+```
+
+`telephoneCheck("(555-555-5555")` should return `false`.
+
+```js
+assert(telephoneCheck('(555-555-5555') === false);
+```
+
+`telephoneCheck("(555)5(55?)-5555")` should return `false`.
+
+```js
+assert(telephoneCheck('(555)5(55?)-5555') === false);
+```
+
+`telephoneCheck("55 55-55-555-5")` should return `false`.
+
+```js
+assert(telephoneCheck('55 55-55-555-5') === false);
+```
+
+`telephoneCheck("11 555-555-5555")` should return `false`.
+
+```js
+assert(telephoneCheck('11 555-555-5555') === false);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```js
+function telephoneCheck(str) {
+  return true;
+}
+
+telephoneCheck("555-555-5555");
+```
+
+# --solutions--
+
+```js
+var re = /^([+]?1[\s]?)?((?:[(](?:[2-9]1[02-9]|[2-9][02-8][0-9])[)][\s]?)|(?:(?:[2-9]1[02-9]|[2-9][02-8][0-9])[\s.-]?)){1}([2-9]1[02-9]|[2-9][02-9]1|[2-9][02-9]{2}[\s.-]?){1}([0-9]{4}){1}$/;
+
+function telephoneCheck(str) {
+  return re.test(str);
+}
+
+telephoneCheck("555-555-5555");
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md
new file mode 100644
index 00000000000..196d0ac2b8b
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/5d5a813321b9e3db6c106a46.md
@@ -0,0 +1,154 @@
+---
+id: 5d5a813321b9e3db6c106a46
+title: Step 1
+challengeType: 0
+dashedName: step-1
+---
+
+# --description--
+
+JavaScript is a powerful language which allows you to build websites that are interactive. To get started, create your standard HTML boilerplate with a `DOCTYPE`, `html`, `head`, and `body`. Include a `title` element and a `link` for your stylesheet, and your `meta` tag for the `charset`. Then, create a `div` element with the id `game` within your `body`. Use the text `RPG - Dragon Repeller` for your `title` element.
+
+# --hints--
+
+Your code should contain the `DOCTYPE` reference.
+
+```js
+assert(code.match(/<!DOCTYPE/gi));
+```
+
+You should include a space after the `DOCTYPE` reference.
+
+```js
+assert(code.match(/<!DOCTYPE\s+/gi));
+```
+
+You should define the document type to be `html`.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html/gi));
+```
+
+You should close the `DOCTYPE` declaration with a `>` after the type.
+
+```js
+assert(code.match(/<!DOCTYPE\s+html\s*>/gi));
+```
+
+Your `html` element should have an opening tag. Don't forget the `lang` attribute.
+
+```js
+assert(code.match(/<html\s+lang\s*=\s*('|")en\1\s*>/gi));
+```
+
+Your `html` element should have a closing tag.
+
+```js
+assert(code.match(/<\/html\s*>/));
+```
+
+Your `DOCTYPE` declaration should be at the beginning of your HTML.
+
+```js
+assert(__helpers.removeHtmlComments(code).match(/^\s*<!DOCTYPE\s+html\s*>/i));
+```
+
+You should have an opening `head` tag.
+
+```js
+assert(code.match(/<head\s*>/i));
+```
+
+You should have a closing `head` tag.
+
+```js
+assert(code.match(/<\/head\s*>/i));
+```
+
+You should have an opening `body` tag.
+
+```js
+assert(code.match(/<body\s*>/i));
+```
+
+You should have a closing `body` tag.
+
+```js
+assert(code.match(/<\/body\s*>/i));
+```
+
+The `head` and `body` elements should be siblings.
+
+```js
+assert(document.querySelector('head')?.nextElementSibling?.localName === 'body');
+```
+
+The `head` element should be within the `html` element.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'head'));
+```
+
+The `body` element should be within the `html` element.
+
+```js
+assert([...document.querySelector('html')?.children].some(x => x?.localName === 'body'));
+```
+
+Your code should have a `meta` element.
+
+```js
+const meta = document.querySelector('meta');
+assert.exists(meta);
+```
+
+Your `meta` element should have a `charset` attribute with the value `UTF-8`.
+
+```js
+assert.match(code, /<meta[\s\S]+?charset=('|"|`)UTF-8\1/i)
+```
+
+Your code should have a `title` element.
+
+```js
+const title = document.querySelector('title');
+assert.exists(title);
+```
+
+Your code should have a `link` element.
+
+```js
+const link = document.querySelector('head > link');
+assert.exists(link);
+```
+
+You should have a `div` element.
+
+```js
+const div = document.querySelector('div');
+assert.exists(div);
+```
+
+Your `div` element should have an `id` attribute with the value `game`.
+
+```js
+const div = document.querySelector('div');
+assert.equal(div?.id, 'game');
+```
+
+Your `div` element should be within the `body` element.
+
+```js
+const div = document.querySelector('div');
+assert.equal(div?.parentElement?.localName, 'body');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a115879a6d51422652cbfc.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a115879a6d51422652cbfc.md
new file mode 100644
index 00000000000..02a51b6a178
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a115879a6d51422652cbfc.md
@@ -0,0 +1,78 @@
+---
+id: 62a115879a6d51422652cbfc
+title: Step 2
+challengeType: 0
+dashedName: step-2
+---
+
+# --description--
+
+Create four `div` elements within your `#game` element. Give them the following respective `id` values, in order: `stats`, `controls`, `monsterStats`, and `text`.
+
+# --hints--
+
+You should create four new `div` elements.
+
+```js
+assert.equal(document.querySelectorAll('div')?.length, 5);
+```
+
+You should give one of the new `div` elements an `id`  of `stats`.
+
+```js
+assert.exists(document.querySelector('div#stats'));
+```
+
+You should give one of the new `div` elements an `id` of `controls`.
+
+```js
+assert.exists(document.querySelector('div#controls'));
+```
+
+You should give one of the new `div` elements an `id` of `monsterStats`.
+
+```js
+assert.exists(document.querySelector('div#monsterStats'));
+```
+
+You should give one of the new `div` elements an `id` of `text`.
+
+```js
+assert.exists(document.querySelector('div#text'));
+```
+
+You should place the new `div` elements in the correct order.
+
+```js
+function __t(a, b) {
+  return document.querySelector(a)?.nextElementSibling?.getAttribute('id') === b;
+}
+assert(__t('div#stats','controls') && __t('div#controls','monsterStats') && __t('div#monsterStats','text'));
+```
+
+You should place the new `div` elements within the `#game` element.
+
+```js
+assert.equal(document.querySelector('#game')?.children?.length, 4);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+--fcc-editable-region--
+<body>
+  <div id="game">
+  </div>
+</body>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a1166ed9a56d439c0770e7.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a1166ed9a56d439c0770e7.md
new file mode 100644
index 00000000000..32588eccbae
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a1166ed9a56d439c0770e7.md
@@ -0,0 +1,70 @@
+---
+id: 62a1166ed9a56d439c0770e7
+title: Step 3
+challengeType: 0
+dashedName: step-3
+---
+
+# --description--
+
+Create three `span` elements within your `#stats` element. Give each of them the class `stat`. Then give the first one the text `XP: 0`, the second one the text `Health: 100`, and the third one the text `Gold: 50`.
+
+# --hints--
+
+You should have three `span` elements within the `#stats` element.
+
+```js
+const spans = document.querySelectorAll('#stats > span');
+assert.equal(spans?.length, 3);
+```
+
+You should give the new three `span` elements a class of `stat`.
+
+```js
+assert.exists(document.querySelectorAll('#stats > .stat')?.length, 3);
+```
+
+Your first `.stat` element should have the provided text `XP: 0`.
+
+```js
+assert(document.querySelectorAll('#stats > .stat')?.[0]?.innerText === 'XP: 0');
+```
+
+Your second `.stat` element should have the provided text `Health: 100`.
+
+```js
+assert(document.querySelectorAll('#stats > .stat')?.[1]?.innerText === 'Health: 100');
+```
+
+Your third `.stat` element should have the provided text `Gold: 50`.
+
+```js
+assert(document.querySelectorAll('#stats > .stat')?.[2]?.innerText === 'Gold: 50');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+--fcc-editable-region--
+<body>
+    <div id="game">
+        <div id="stats">
+
+        </div>
+        <div id="controls"></div>
+        <div id="monsterStats"></div>
+        <div id="text"></div>
+    </div>
+</body>
+--fcc-editable-region--
+</html>
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md
new file mode 100644
index 00000000000..5c62cdc804a
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23c1d505bfa13747c8a9b.md
@@ -0,0 +1,167 @@
+---
+id: 62a23c1d505bfa13747c8a9b
+title: Step 4
+challengeType: 0
+dashedName: step-4
+---
+
+# --description--
+
+Wrap the numbers `0`, `100`, and `50` in `span` elements, and wrap those new `span` elements in `strong` elements. Then give your new `span` elements `id` values of `xpText`, `healthText`, and `goldText`, respectively.
+
+# --hints--
+
+You should add a `strong` element in your first `.stat` element.
+
+```js
+const stat = document.querySelectorAll('.stat')[0];
+const strong = stat?.querySelector('strong');
+assert.exists(strong);
+```
+
+Your first new `strong` element should have a `span` element.
+
+```js
+const stat = document.querySelectorAll('.stat')[0];
+const strong = stat?.querySelector('strong');
+const span = strong?.querySelector('span');
+assert.exists(span);
+```
+
+Your first nested `span` element should have the `id` of `xpText`.
+
+```js
+const stat = document.querySelectorAll('.stat')[0];
+const strong = stat?.querySelector('strong');
+const span = strong?.querySelector('span');
+assert.equal(span?.id, 'xpText');
+```
+
+Your first `span` element should be wrapped around the text `0`.
+
+```js
+const stat = document.querySelectorAll('.stat')[0];
+const strong = stat?.querySelector('strong');
+const span = strong?.querySelector('span');
+assert.equal(span.innerText, '0');
+```
+
+The text of your first `.stat` element should still be `XP: 0`.
+
+```js
+const stat = document.querySelectorAll('.stat')[0];
+assert.equal(stat.innerText, 'XP: 0');
+```
+
+You should add a `strong` element in your second `.stat` element.
+
+```js
+const stat = document.querySelectorAll('.stat')[1];
+const strong = stat?.querySelector('strong');
+assert.exists(strong);
+```
+
+Your second new `strong` element should have a `span` element.
+
+```js
+const stat = document.querySelectorAll('.stat')[1];
+const strong = stat?.querySelector('strong');
+const span = strong?.querySelector('span');
+assert.exists(span);
+```
+
+Your second nested `span` element should have the `id` of `healthText`.
+
+```js
+const stat = document.querySelectorAll('.stat')[1];
+const strong = stat?.querySelector('strong');
+const span = strong?.querySelector('span');
+assert.equal(span?.id, 'healthText');
+```
+
+Your second `span` element should be wrapped around the text `100`.
+
+```js
+const stat = document.querySelectorAll('.stat')[1];
+const strong = stat?.querySelector('strong');
+const span = strong?.querySelector('span');
+assert.equal(span.innerText, '100');
+```
+
+The text of your second `.stat` element should still be `Health: 100`.
+
+```js
+const stat = document.querySelectorAll('.stat')[1];
+assert.equal(stat.innerText, 'Health: 100');
+```
+
+You should add a `strong` element in your third `.stat` element.
+
+```js
+const stat = document.querySelectorAll('.stat')[2];
+const strong = stat?.querySelector('strong');
+assert.exists(strong);
+```
+
+Your third new `strong` element should have a `span` element.
+
+```js
+const stat = document.querySelectorAll('.stat')[2];
+const strong = stat?.querySelector('strong');
+const span = strong?.querySelector('span');
+assert.exists(span);
+```
+
+Your third nested `span` element should have the `id` of `goldText`.
+
+```js
+const stat = document.querySelectorAll('.stat')[2];
+const strong = stat?.querySelector('strong');
+const span = strong?.querySelector('span');
+assert.equal(span?.id, 'goldText');
+```
+
+Your third `span` element should be wrapped around the text `50`.
+
+```js
+const stat = document.querySelectorAll('.stat')[2];
+const strong = stat?.querySelector('strong');
+const span = strong?.querySelector('span');
+assert.equal(span.innerText, '50');
+```
+
+The text of your third `.stat` element should still be `Gold: 50`.
+
+```js
+const stat = document.querySelectorAll('.stat')[2];
+assert.equal(stat.innerText, 'Gold: 50');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+--fcc-editable-region--
+            <span class="stat">XP: 0</span>
+            <span class="stat">Health: 100</span>
+            <span class="stat">Gold: 50</span>
+--fcc-editable-region--
+        </div>
+        <div id="controls"></div>
+        <div id="monsterStats"></div>
+        <div id="text"></div>
+    </div>
+</body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23cb9bc467a147516b500.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23cb9bc467a147516b500.md
new file mode 100644
index 00000000000..5a36b14c83c
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23cb9bc467a147516b500.md
@@ -0,0 +1,99 @@
+---
+id: 62a23cb9bc467a147516b500
+title: Step 5
+challengeType: 0
+dashedName: step-5
+---
+
+# --description--
+
+For your `#controls` element, create three `button` elements. The first should have the `id` set to `button1`, and the text `Go to store`. The second should have the `id` set to `button2`, and the text `Go to cave`. The third should have the `id` set to `button3`, and the text `Fight dragon`.
+
+# --hints--
+
+You should add three `button` elements to your `#controls` element.
+
+```js
+const buttons = document.querySelectorAll('#controls > button');
+assert.exists(buttons);
+assert.equal(buttons.length, 3);
+```
+
+Your first button should have the `id` set to `button1`.
+
+```js
+const buttons = document.querySelectorAll('#controls > button');
+const button1 = buttons[0];
+assert.equal(button1.id, 'button1');
+```
+
+Your first button should have the text `Go to store`.
+
+```js
+const buttons = document.querySelectorAll('#controls > button');
+const button1 = buttons[0];
+assert.equal(button1.innerText, 'Go to store');
+```
+
+Your second button should have the `id` set to `button2`.
+
+```js
+const buttons = document.querySelectorAll('#controls > button');
+const button2 = buttons[1];
+assert.equal(button2.id, 'button2');
+```
+
+Your second button should have the text `Go to cave`.
+
+```js
+const buttons = document.querySelectorAll('#controls > button');
+const button2 = buttons[1];
+assert.equal(button2.innerText, 'Go to cave');
+```
+
+Your third button should have the `id` set to `button3`.
+
+```js
+const buttons = document.querySelectorAll('#controls > button');
+const button3 = buttons[2];
+assert.equal(button3.id, 'button3');
+```
+
+Your third button should have the text `Fight dragon`.
+
+```js
+const buttons = document.querySelectorAll('#controls > button');
+const button3 = buttons[2];
+assert.equal(button3.innerText, 'Fight dragon');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+--fcc-editable-region--
+        <div id="controls">
+
+        </div>
+--fcc-editable-region--
+        <div id="monsterStats"></div>
+        <div id="text"></div>
+    </div>
+</body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23d1c5f1c93161f3582ae.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23d1c5f1c93161f3582ae.md
new file mode 100644
index 00000000000..7d9867b26c7
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a23d1c5f1c93161f3582ae.md
@@ -0,0 +1,104 @@
+---
+id: 62a23d1c5f1c93161f3582ae
+title: Step 6
+challengeType: 0
+dashedName: step-6
+---
+
+# --description--
+
+Similar to your `#stats` element, your `#monsterStats` element needs two `span` elements. Give them the class `stat` and give the first element the text `Monster Name:` and the second the text `Health:`. After the text in each, add a `strong` element with an empty nested `span` element.
+
+# --hints--
+
+Your `monsterStats` element should have two `span` elements.
+
+```js
+const spans = document.querySelectorAll(`#monsterStats > span`);
+assert.equal(spans.length, 2);
+```
+
+Your new `span` elements should both have a `class` value of `stat`.
+
+```js
+const spans = document.querySelectorAll(`#monsterStats > span`);
+assert.equal(spans[0].className, 'stat');
+assert.equal(spans[1].className, 'stat');
+```
+
+Your first `span` element should have the text `Monster Name:`. Make sure the spacing is correct.
+
+```js
+const spans = document.querySelectorAll(`#monsterStats > span`);
+assert.equal(spans[0].innerText, 'Monster Name: ');
+```
+
+Your second `span` element should have the text `Health:`. Make sure the spacing is correct.
+
+```js
+const spans = document.querySelectorAll(`#monsterStats > span`);
+assert.equal(spans[1].textContent, 'Health: ');
+```
+
+Your first `span` element should have a `strong` element with an empty nested `span` element.
+
+```js
+const spans = document.querySelectorAll(`#monsterStats > span`);
+const strong = spans[0]?.querySelector('strong');
+const span = strong?.querySelector('span');
+assert.exists(strong);
+assert.exists(span);
+```
+
+Your second `span` element should have a `strong` element with an empty nested `span` element.
+
+```js
+const spans = document.querySelectorAll(`#monsterStats > span`);
+const strong = spans[1]?.querySelector('strong');
+const span = strong?.querySelector('span');
+assert.exists(strong);
+assert.exists(span);
+```
+
+Your `strong` and `span` elements should come after the text.
+
+```js
+const spans = document.querySelectorAll(`#monsterStats > span`);
+assert.match(spans[0].innerHTML, /Monster Name: <strong>/);
+assert.match(spans[1].innerHTML, /Health: <strong>/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+--fcc-editable-region--
+        <div id="monsterStats">
+
+        </div>
+--fcc-editable-region--
+        <div id="text"></div>
+    </div>
+</body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md
new file mode 100644
index 00000000000..2ffdc00b64b
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2401b9842721796b72850.md
@@ -0,0 +1,62 @@
+---
+id: 62a2401b9842721796b72850
+title: Step 7
+challengeType: 0
+dashedName: step-7
+---
+
+# --description--
+
+Give your `#text` element the following text:
+
+```markup
+Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. 
+You are in the town square. Where do you want to go? Use the buttons above.
+```
+
+# --hints--
+
+Your `#text` element should have the above quoted text.
+
+```js
+const text = document.querySelector('#text');
+assert.equal(text.innerText, "Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+--fcc-editable-region--
+        <div id="text">
+
+        </div>
+--fcc-editable-region--
+    </div>
+</body>
+</html>
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24068d60b671847d1d4e2.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24068d60b671847d1d4e2.md
new file mode 100644
index 00000000000..4a5a57ad8cf
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24068d60b671847d1d4e2.md
@@ -0,0 +1,68 @@
+---
+id: 62a24068d60b671847d1d4e2
+title: Step 8
+challengeType: 0
+dashedName: step-8
+---
+
+# --description--
+
+Now we need some quick styling. Start by giving the `body` a `background-color` set to `darkblue`.
+
+# --hints--
+
+You should have a `body` selector.
+
+```js
+const body = new __helpers.CSSHelp(document).getStyle('body');
+assert.exists(body);
+```
+
+Your `body` selector should have a `background-color` property set to `darkblue`.
+
+```js
+const background = new __helpers.CSSHelp(document).getStyle('body')?.getPropertyValue('background-color');
+assert.equal(background, 'darkblue');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md
new file mode 100644
index 00000000000..d59d46387be
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2409897ec621942234cf6.md
@@ -0,0 +1,86 @@
+---
+id: 62a2409897ec621942234cf6
+title: Step 9
+challengeType: 0
+dashedName: step-9
+---
+
+# --description--
+
+Give the `#text` element a `background-color` of `black`, a `color` of `white`, and `10px` of padding on all sides.
+
+# --hints--
+
+You should have a `#text` selector.
+
+```js
+const text = new __helpers.CSSHelp(document).getStyle('#text');
+assert.exists(text);
+```
+
+Your `#text` element should have a `background-color` of `black`.
+
+```js
+const background = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('background-color');
+assert.equal(background, 'black');
+```
+
+Your `#text` element should have a `color` of `white`.
+
+```js
+const color = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('color');
+assert.equal(color, 'white');
+```
+
+Your `#text` element should have `10px` of padding on all sides.
+
+```js
+const padding = new __helpers.CSSHelp(document).getStyle('#text')?.getPropertyValue('padding');
+assert.equal(padding, '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a240c67f3dbb1a1e6d95ee.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a240c67f3dbb1a1e6d95ee.md
new file mode 100644
index 00000000000..2a21ac2c341
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a240c67f3dbb1a1e6d95ee.md
@@ -0,0 +1,113 @@
+---
+id: 62a240c67f3dbb1a1e6d95ee
+title: Step 10
+challengeType: 0
+dashedName: step-10
+---
+
+# --description--
+
+Give your `#game` a maximum width of `500px` and a maximum height of `400px`. Set the `background-color` to `lightgray` and the `color` to `white`. Finally, use margins to center it and give it `10px` of padding on all four sides.
+
+# --hints--
+
+You should have a `#game` selector.
+
+```js
+const game = new __helpers.CSSHelp(document).getStyle('#game');
+assert.exists(game);
+```
+
+Your `#game` selector should have a `max-width` of `500px`.
+
+```js
+const maxWidth = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-width');
+assert.equal(maxWidth, '500px');
+```
+
+Your `#game` selector should have a `max-height` of `400px`.
+
+```js
+const maxHeight = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('max-height');
+assert.equal(maxHeight, '400px');
+```
+
+Your `#game` selector should have a `background-color` of `lightgray`.
+
+```js
+const background = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('background-color');
+assert.equal(background, 'lightgray');
+```
+
+Your `#game` selector should have a `color` of `white`.
+
+```js
+const color = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('color');
+assert.equal(color, 'white');
+```
+
+Your `#game` selector should have a `margin` set to `0 auto`.
+
+```js
+const margin = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('margin');
+assert.equal(margin, '0px auto');
+```
+
+Your `#game` selector should have `10px` of padding on all sides.
+
+```js
+const padding = new __helpers.CSSHelp(document).getStyle('#game')?.getPropertyValue('padding');
+assert.equal(padding, '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24128d5e8af1b47ad1aab.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24128d5e8af1b47ad1aab.md
new file mode 100644
index 00000000000..a0a17c0808d
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24128d5e8af1b47ad1aab.md
@@ -0,0 +1,101 @@
+---
+id: 62a24128d5e8af1b47ad1aab
+title: Step 11
+challengeType: 0
+dashedName: step-11
+---
+
+# --description--
+
+Give both your `#controls` and `#stats` elements a `border` of `1px solid black`, a `black` text color, and `5px` of padding.
+
+# --hints--
+
+You should have a `#controls, #stats` selector.
+
+```js
+const selector = new __helpers.CSSHelp(document).getStyle('#controls, #stats');
+assert.exists(selector);
+```
+
+Your `#controls, #stats` selector should have a `border` of `1px solid black`.
+
+```js
+const border = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('border');
+assert.equal(border, '1px solid black');
+```
+
+Your `#controls, #stats` selector should have a `color` of `black`.
+
+```js
+const color = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('color');
+assert.equal(color, 'black');
+```
+
+Your `#controls, #stats` selector should have `5px` of padding.
+
+```js
+const padding = new __helpers.CSSHelp(document).getStyle('#controls, #stats')?.getPropertyValue('padding');
+assert.equal(padding, '5px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24190868ca51c0b6e83c7.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24190868ca51c0b6e83c7.md
new file mode 100644
index 00000000000..deec272509f
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a24190868ca51c0b6e83c7.md
@@ -0,0 +1,127 @@
+---
+id: 62a24190868ca51c0b6e83c7
+title: Step 13
+challengeType: 0
+dashedName: step-13
+---
+
+# --description--
+
+Hide your `#monsterStats` element for now. Do not change any of the other styling.
+
+# --hints--
+
+You should have a `#monsterStats` selector.
+
+```js
+const monsterStats = new __helpers.CSSHelp(document).getStyle('#monsterStats');
+assert.exists(monsterStats);
+```
+
+Your `#monsterStats` selector should have a `display` property of `none`.
+
+```js
+const display = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('display');
+assert.equal(display, 'none');
+```
+
+Your `#monsterStats` selector should have a `border` of `1px solid black`.
+
+```js
+const border = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('border');
+assert.equal(border, '1px solid black');
+```
+
+Your `#monsterStats` selector should have `5px` of padding.
+
+```js
+const padding = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('padding');
+assert.equal(padding, '5px');
+```
+
+Your `#monsterStats` selector should have a `color` of `white`.
+
+```js
+const color = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('color');
+assert.equal(color, 'white');
+```
+
+Your `#monsterStats` selector should have a `background-color` of `red`.
+
+```js
+const background = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('background-color');
+assert.equal(background, 'red');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+--fcc-editable-region--
+#monsterStats {
+
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md
new file mode 100644
index 00000000000..7527ce74825
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a241df03c1f61ce936f5d9.md
@@ -0,0 +1,101 @@
+---
+id: 62a241df03c1f61ce936f5d9
+title: Step 14
+challengeType: 0
+dashedName: step-14
+---
+
+# --description--
+
+Finally, give your `.stat` elements a `padding-right` of `10px`.
+
+# --hints--
+
+You should have a `.stat` selector.
+
+```js
+const stat = new __helpers.CSSHelp(document).getStyle('.stat');
+assert.exists(stat);
+```
+
+Your `.stat` selector should have a `padding-right` of `10px`.
+
+```js
+const paddingRight = new __helpers.CSSHelp(document).getStyle('.stat')?.getPropertyValue('padding-right');
+assert.equal(paddingRight, '10px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2509ba163e020bb9d84ea.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2509ba163e020bb9d84ea.md
new file mode 100644
index 00000000000..c65bb85e38f
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a2509ba163e020bb9d84ea.md
@@ -0,0 +1,108 @@
+---
+id: 62a2509ba163e020bb9d84ea
+title: Step 15
+challengeType: 0
+dashedName: step-15
+---
+
+# --description--
+
+Now you can start writing your JavaScript. Begin by creating a `script` element. This element is used to load JavaScript into your HTML file. You should use an opening `<script>` and closing `</script>` tag.
+
+# --hints--
+
+You should have a `script` element.
+
+```js
+assert.isAtLeast(document.querySelectorAll('script').length, 2);
+```
+
+Your `script` element should have an opening tag.
+
+```js
+assert.match(code, /<script\s*>/i);
+```
+
+Your `script` element should have a closing tag.
+
+```js
+assert.match(code, /<\/script\s*>/i);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+--fcc-editable-region--
+
+--fcc-editable-region--
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a255dae245b52317da824a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a255dae245b52317da824a.md
new file mode 100644
index 00000000000..2515e3330ca
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a255dae245b52317da824a.md
@@ -0,0 +1,108 @@
+---
+id: 62a255dae245b52317da824a
+title: Step 16
+challengeType: 0
+dashedName: step-16
+---
+
+# --description--
+
+One of the most powerful tools is your developer console. Depending on your browser, this might be opened by pressing `F12` or `Ctrl+Shift+I`. You can also click the "Console" button above the preview window to see our built-in console. The developer console will include errors that are produced by your code, but you can also use it to see values of variables in your code, which is helpful for debugging.
+
+Add a `console.log("Hello World");` line between your `script` tags, then click the "Console" button to open our console, and you should see the text `Hello World` in your console.
+
+Note how the line ends with a semi-colon. It is common practice in JavaScript to end your code lines with semi-colons.
+
+# --hints--
+
+You should add a `console.log("Hello World");` line to your code. Don't forget the semi-colon.
+
+```js
+assert.match(code, /console\.log\("Hello World"\);/);
+```
+
+Your `console.log("Hello World");` line should be between your `script` tags.
+
+```js
+assert.match(code, /<script>\s*console\.log\("Hello World"\);\s*<\/script>/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+--fcc-editable-region--
+    <script>
+
+    </script>
+--fcc-editable-region--
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md
new file mode 100644
index 00000000000..12d385f3107
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a257659d0d1e2456f24ba2.md
@@ -0,0 +1,109 @@
+---
+id: 62a257659d0d1e2456f24ba2
+title: Step 17
+challengeType: 0
+dashedName: step-17
+---
+
+# --description--
+
+Before you start writing your project code, you should move it to its own file to keep things organized. Remove your `console.log("Hello World");` line. Then give your now empty `script` element a `src` attribute set to `./script.js`.
+
+# --hints--
+
+You should not have a `console.log("Hello World");` line in your code.
+
+```js
+assert.notMatch(code, /console\.log\("Hello World"\);/);
+```
+
+Your `script` element should have a `src` attribute set to `./script.js`.
+
+```js
+const script = document.querySelector("script[data-src$='script.js']");
+assert.exists(script);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+--fcc-editable-region--
+    <script>
+        console.log("Hello World");
+    </script>
+--fcc-editable-region--
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a39f5a5790eb27c1e5d4bf.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a39f5a5790eb27c1e5d4bf.md
new file mode 100644
index 00000000000..af7153531cf
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a39f5a5790eb27c1e5d4bf.md
@@ -0,0 +1,102 @@
+---
+id: 62a39f5a5790eb27c1e5d4bf
+title: Step 18
+challengeType: 0
+dashedName: step-18
+---
+
+# --description--
+
+Your view has been switched to your new `script.js` file. Remember that you can use the tabs above to switch between files.
+
+Add your `console.log("Hello World");` line to this file, and see it appear in your console.
+
+# --hints--
+
+You should have a `console.log("Hello World");` line in your code.
+
+```js
+assert.match(code, /console\.log\("Hello World"\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md
new file mode 100644
index 00000000000..b40d5f4cc30
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a0a3c0a4b32915d26a6e.md
@@ -0,0 +1,132 @@
+---
+id: 62a3a0a3c0a4b32915d26a6e
+title: Step 19
+challengeType: 0
+dashedName: step-19
+---
+
+# --description--
+
+Remove your `console.log("Hello World");` line to begin writing your project code.
+
+In JavaScript, a <dfn>variable</dfn> is used to hold a value. To use a variable, you must first <dfn>declare</dfn> it. For example, to declare a variable called `camperbot`, you would write:
+
+```js
+var camperbot;
+```
+
+The `var` keyword tells JavaScript you are declaring a variable. Declare a variable called `xp`.
+
+# --hints--
+
+You should not have a `console.log("Hello World");` line in your code.
+
+```js
+assert.notMatch(code, /console\.log\("Hello World"\);/);
+```
+
+You should use the `var` keyword to declare your variable.
+
+```js
+assert.match(code, /var/);
+```
+
+You should declare a variable named `xp`.
+
+```js
+assert.match(code, /xp/);
+```
+
+You should not assign a value to your variable.
+
+```js
+assert.notMatch(code, /var xp =/);
+```
+
+Don't forget the semi-colon at the end of the line.
+
+```js
+assert.match(code, /var xp;/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+--fcc-editable-region--
+console.log("Hello World");
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md
new file mode 100644
index 00000000000..7fb32406762
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a488b24fb32b91155d56.md
@@ -0,0 +1,112 @@
+---
+id: 62a3a488b24fb32b91155d56
+title: Step 20
+challengeType: 0
+dashedName: step-20
+---
+
+# --description--
+
+Variables can be <dfn>assigned</dfn> a value. When you do this while you declare it, this is called <dfn>initialization</dfn>. For example:
+
+```js
+var camperbot = "Bot";
+```
+
+This would initialize the `camperbot` variable with a value of `Bot`. Initialize your `xp` variable to have a value of `0`.
+
+# --hints--
+
+`xp` should have a value of `0`.
+
+```js
+assert.equal(xp, 0);
+```
+
+You should initialize the `xp` variable to `0`. Don't forget the semi-colon at the end of the line.
+
+```js
+assert.match(code, /var\s+xp\s*=\s*0\s*;/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+--fcc-editable-region--
+var xp;
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md
new file mode 100644
index 00000000000..278aa0789fc
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a75d8466a12e009eff76.md
@@ -0,0 +1,136 @@
+---
+id: 62a3a75d8466a12e009eff76
+title: Step 21
+challengeType: 0
+dashedName: step-21
+---
+
+# --description--
+
+Initialize another variable called `health` with a value of `100`, and a variable called `gold` with a value of `50`.
+
+# --hints--
+
+You should use `var` to declare a variable called `health`.
+
+```js
+assert.match(code, /var health/);
+```
+
+You should initialize a variable called `health` with a value of `100`.
+
+```js
+assert.match(code, /var health\s?=\s?100/);
+```
+
+You should use `var` to declare a variable called `gold`.
+
+```js
+assert.match(code, /var gold/);
+```
+
+You should initialize a variable called `gold` with a value of `50`.
+
+```js
+assert.match(code, /var gold\s?=\s?50/);
+```
+
+`health` should have a value of `100`.
+
+```js
+assert.equal(health, 100);
+```
+
+`gold` should have a value of `50`.
+
+```js
+assert.equal(gold, 50);
+```
+
+`xp` should still have a value of `0`.
+
+```js
+assert.equal(xp, 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+--fcc-editable-region--
+var xp = 0;
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md
new file mode 100644
index 00000000000..606fdeb799a
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3a7e4f1060e2fc5ffb34b.md
@@ -0,0 +1,122 @@
+---
+id: 62a3a7e4f1060e2fc5ffb34b
+title: Step 22
+challengeType: 0
+dashedName: step-22
+---
+
+# --description--
+
+Create another variable called `currentWeapon` and set it to 0.
+
+When a variable name has multiple words, the convention in JavaScript is to use what's called <dfn>camelCase</dfn>. The first word is lowercase, and the first letter of every following word is uppercase.
+
+# --hints--
+
+You should use `var` to declare a variable called `currentWeapon`.
+
+```js
+assert.match(code, /var currentweapon/i);
+```
+
+You should use camelCase to name your variable.
+
+```js
+assert.match(code, /currentWeapon/);
+```
+
+Your `currentWeapon` variable should be set to `0`.
+
+```js
+assert.equal(currentWeapon, 0);
+```
+
+You should initialize your variable to `0`.
+
+```js
+assert.match(code, /var currentWeapon\s?=\s?0/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+--fcc-editable-region--
+var xp = 0;
+var health = 100;
+var gold = 50;
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md
new file mode 100644
index 00000000000..63ecefac153
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b365f1cdeb33efc2502e.md
@@ -0,0 +1,138 @@
+---
+id: 62a3b365f1cdeb33efc2502e
+title: Step 23
+challengeType: 0
+dashedName: step-23
+---
+
+# --description--
+
+You have been declaring your variables with the `var` keyword. However, in modern JavaScript it is best practice to use the `let` keyword instead. This fixes several unusual behaviors with `var` that can make your code difficult to debug.
+
+Change all of your `var` keywords to `let`.
+
+# --hints--
+
+You should not have any `var` keywords in your code.
+
+```js
+assert.notMatch(code, /var/);
+```
+
+You should use the `let` keyword to declare your `xp` variable.
+
+```js
+assert.match(code, /let xp/);
+```
+
+You should use the `let` keyword to declare your `health` variable.
+
+```js
+assert.match(code, /let health/);
+```
+
+You should use the `let` keyword to declare your `gold` variable.
+
+```js
+assert.match(code, /let gold/);
+```
+
+You should use the `let` keyword to declare your `currentWeapon` variable.
+
+```js
+assert.match(code, /let currentWeapon/);
+```
+
+You should not change the values of your variables.
+
+```js
+assert.equal(xp, 0);
+assert.equal(health, 100);
+assert.equal(gold, 50);
+assert.equal(currentWeapon, 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+--fcc-editable-region--
+var xp = 0;
+var health = 100;
+var gold = 50;
+var currentWeapon = 0;
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md
new file mode 100644
index 00000000000..f4a27916dea
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b3eab50e193608c19fc6.md
@@ -0,0 +1,115 @@
+---
+id: 62a3b3eab50e193608c19fc6
+title: Step 24
+challengeType: 0
+dashedName: step-24
+---
+
+# --description--
+
+Using the `let` keyword, declare a variable called `fighting` but do not initialize it with a value. Remember to end your line with a semi-colon.
+
+# --hints--
+
+You should use `let` to declare a variable `fighting`.
+
+```js
+assert.match(code, /let fighting/);
+```
+
+Your `fighting` variable should not have a value.
+
+```js
+assert.isUndefined(fighting);
+```
+
+You should not assign a value to your `fighting` variable. Don't forget the semi-colon at the end of the line.
+
+```js
+assert.match(code, /let fighting;/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+--fcc-editable-region--
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md
new file mode 100644
index 00000000000..c679c2cb1fe
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b41c9494f937560640ab.md
@@ -0,0 +1,140 @@
+---
+id: 62a3b41c9494f937560640ab
+title: Step 25
+challengeType: 0
+dashedName: step-25
+---
+
+# --description--
+
+Declare two more variables named `monsterHealth` and `inventory`, but do not initialize them.
+
+# --hints--
+
+You should use `let` to declare your `monsterHealth` variable.
+
+```js
+assert.match(code, /let monsterHealth/i);
+```
+
+You should use camelCase to name your `monsterHealth` variable.
+
+```js
+assert.match(code, /monsterHealth/);
+```
+
+`monsterHealth` should not have a value.
+
+```js
+assert.isUndefined(monsterHealth);
+```
+
+You should not assign a value to your `monsterHealth` variable. Remember your semi-colon.
+
+```js
+assert.match(code, /let monsterHealth;/);
+```
+
+You should use `let` to declare your `inventory` variable.
+
+```js
+assert.match(code, /let inventory/i);
+```
+
+`inventory` should not have a value.
+
+```js
+assert.isUndefined(inventory);
+```
+
+You should not assign a value to your `inventory` variable. Remember your semi-colon.
+
+```js
+assert.match(code, /let inventory;/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+--fcc-editable-region--
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b49686792938718b90d3.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b49686792938718b90d3.md
new file mode 100644
index 00000000000..878b7879e25
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b49686792938718b90d3.md
@@ -0,0 +1,118 @@
+---
+id: 62a3b49686792938718b90d3
+title: Step 26
+challengeType: 0
+dashedName: step-26
+---
+
+# --description--
+
+The variables you have assigned have all had values that are numbers. JavaScript has multiple different data types. The next one you will use is the <dfn>string</dfn>. Strings are used to store things like words or text. Strings are surrounded with double quotes, single quotes, or backticks. Here is an example of declaring a variable with a string:
+
+```js
+let developer = "Naomi";
+```
+
+Assign the `inventory` variable to have the value of `stick`.
+
+# --hints--
+
+You should set `inventory` to the string `stick`.
+
+```js
+assert.equal(inventory, "stick");
+```
+
+You should initialize your `inventory` variable with the string `stick`.
+
+```js
+assert.match(code, /let\s+inventory\s*=\s*('|"|`)stick\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+--fcc-editable-region--
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory;
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b506dbaead396f58a701.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b506dbaead396f58a701.md
new file mode 100644
index 00000000000..bb8a09862a3
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b506dbaead396f58a701.md
@@ -0,0 +1,142 @@
+---
+id: 62a3b506dbaead396f58a701
+title: Step 27
+challengeType: 0
+dashedName: step-27
+---
+
+# --description--
+
+The player's inventory in your game will be able to hold multiple items. You will need to use a data type that can do this. An <dfn>array</dfn> can be used to hold multiple values. For example:
+
+```js
+let order = ["first", "second", "third"];
+```
+
+This is an array which holds three values. Notice how the values are separated by commas. Change your `inventory` variable to be an array with the strings `stick`, `dagger`, and `sword`.
+
+# --hints--
+
+Your `inventory` variable should be an array.
+
+```js
+assert.isArray(inventory);
+```
+
+Your `inventory` variable should have three values.
+
+```js
+assert.lengthOf(inventory, 3);
+```
+
+Your `inventory` variable should include the string `stick`.
+
+```js
+assert.include(inventory, "stick");
+```
+
+Your `inventory` variable should include the string `dagger`.
+
+```js
+assert.include(inventory, "dagger");
+```
+
+Your `inventory` variable should include the string `sword`.
+
+```js
+assert.include(inventory, "sword");
+```
+
+Your `inventory` variable should have the values in the correct order.
+
+```js
+assert.deepEqual(inventory, ["stick", "dagger", "sword"]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+--fcc-editable-region--
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = "stick";
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b5843544ce3a77459c27.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b5843544ce3a77459c27.md
new file mode 100644
index 00000000000..f7a00ecb775
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b5843544ce3a77459c27.md
@@ -0,0 +1,118 @@
+---
+id: 62a3b5843544ce3a77459c27
+title: Step 28
+challengeType: 0
+dashedName: step-28
+---
+
+# --description--
+
+For now, you want the player to start with just the `stick`. Change the `inventory` array to have `stick` as its only value.
+
+# --hints--
+
+Your `inventory` variable should still be an array.
+
+```js
+assert.isArray(inventory);
+```
+
+Your `inventory` variable should only have one value.
+
+```js
+assert.lengthOf(inventory, 1);
+```
+
+Your `inventory` variable should include the string `stick`.
+
+```js
+assert.include(inventory, "stick");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+--fcc-editable-region--
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick", "dagger", "sword"];
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b79d520a7f3d0e25afd6.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b79d520a7f3d0e25afd6.md
new file mode 100644
index 00000000000..af9e9e6bf70
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3b79d520a7f3d0e25afd6.md
@@ -0,0 +1,128 @@
+---
+id: 62a3b79d520a7f3d0e25afd6
+title: Step 29
+challengeType: 0
+dashedName: step-29
+---
+
+# --description--
+
+JavaScript interacts with the HTML using the <dfn>Document Object Model</dfn>, or DOM. The DOM is a tree of objects that represents the HTML. You can access the HTML using the `document` variable, which represents your entire HTML document.
+
+One method for finding specific elements in your HTML is using the `querySelector()` method. The `querySelector()` method takes a CSS selector as an argument and returns the first element that matches that selector. For example, to find the `<h1>` element in your HTML, you would write:
+
+```js
+let h1 = document.querySelector("h1");
+```
+
+Note that `h1` is a string and matches the CSS selector you would use. Create a `button1` variable and use `querySelector()` to assign it your element with the `id` of `button1`. Remember that CSS `id` selectors are prefixed with a `#`.
+
+# --hints--
+
+You should use `let` to declare a `button1` variable.
+
+```js
+assert.match(code, /let button1/);
+```
+
+You should use `document.querySelector()`.
+
+```js
+assert.match(code, /document\.querySelector/);
+```
+
+You should use the `#button1` selector.
+
+```js
+assert.match(code, /querySelector\(('|")#button1\1\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bb9aeefe4b3fc43c6d7b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bb9aeefe4b3fc43c6d7b.md
new file mode 100644
index 00000000000..0e0eaee9ae7
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bb9aeefe4b3fc43c6d7b.md
@@ -0,0 +1,116 @@
+---
+id: 62a3bb9aeefe4b3fc43c6d7b
+title: Step 31
+challengeType: 0
+dashedName: step-31
+---
+
+# --description--
+
+`button1` is a variable that is not going to be reassigned. If you are not going to assign a new value to a variable, it is best practice to use the `const` keyword to declare it instead of the `let` keyword. This will tell JavaScript to throw an error if you accidentally reassign it.
+
+Change your `button1` variable to be declared with the `const` keyword.
+
+# --hints--
+
+Your `button1` variable should be declared with `const`.
+
+```js
+assert.match(code, /const button1/);
+```
+
+Your `button1` variable should still have the value of your `#button1` element.
+
+```js
+assert.deepEqual(button1, document.querySelector("#button1"));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+--fcc-editable-region--
+let button1 = document.querySelector("#button1");
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bec30ea7f941412512dc.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bec30ea7f941412512dc.md
new file mode 100644
index 00000000000..065f7587076
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3bec30ea7f941412512dc.md
@@ -0,0 +1,181 @@
+---
+id: 62a3bec30ea7f941412512dc
+title: Step 33
+challengeType: 0
+dashedName: step-33
+---
+
+# --description--
+
+Just like you did with the buttons, create variables for the following `id`s and use `querySelector()` to give them the element as a value:
+
+`text`, `xpText`, `healthText`, `goldText`, `monsterStats`, and `monsterName`.
+
+Remember to declare these with the `const` keyword, and name the variables to match the `id`s.
+
+# --hints--
+
+You should declare a `text` variable with `const`.
+
+```js
+assert.match(code, /const text/);
+```
+
+Your `text` variable should have the value of your `#text` element.
+
+```js
+assert.deepEqual(text, document.querySelector('#text'));
+```
+
+You should declare a `xpText` variable with `const`.
+
+```js
+assert.match(code, /const xpText/);
+```
+
+Your `xpText` variable should have the value of your `#xpText` element.
+
+```js
+assert.deepEqual(xpText, document.querySelector('#xpText'));
+```
+
+You should declare a `healthText` variable with `const`.
+
+```js
+assert.match(code, /const healthText/);
+```
+
+Your `healthText` variable should have the value of your `#healthText` element.
+
+```js
+assert.deepEqual(healthText, document.querySelector('#healthText'));
+```
+
+You should declare a `goldText` variable with `const`.
+
+```js
+assert.match(code, /const goldText/);
+```
+
+Your `goldText` variable should have the value of your `#goldText` element.
+
+```js
+assert.deepEqual(goldText, document.querySelector('#goldText'));
+```
+
+You should declare a `monsterStats` variable with `const`.
+
+```js
+assert.match(code, /const monsterStats/);
+```
+
+Your `monsterStats` variable should have the value of your `#monsterStats` element.
+
+```js
+assert.deepEqual(monsterStats, document.querySelector('#monsterStats'));
+```
+
+You should declare a `monsterName` variable with `const`.
+
+```js
+assert.match(code, /const monsterName/);
+```
+
+Your `monsterName` variable should have the value of your `#monsterName` element.
+
+```js
+assert.deepEqual(monsterName, document.querySelector('#monsterName'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+--fcc-editable-region--
+const button1 = document.querySelector("#button1");
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c0ab883fd9435cd5c518.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c0ab883fd9435cd5c518.md
new file mode 100644
index 00000000000..ed392fd2cc4
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c0ab883fd9435cd5c518.md
@@ -0,0 +1,134 @@
+---
+id: 62a3c0ab883fd9435cd5c518
+title: Step 35
+challengeType: 0
+dashedName: step-35
+---
+
+# --description--
+
+Comments allow you to add notes to your code. In JavaScript, single-line comments can be written with `//` and multi-line comments can be written with `/*` and `*/`. For example, here are single and multi-line comments that say "Hello World":
+
+```js
+// hello world
+/*
+  hello world
+*/
+```
+
+Add a single-line comment that says `initialize buttons`.
+
+# --hints--
+
+You should use the `//` symbol to start a single-line comment.
+
+```js
+assert.match(code, /\/\//);
+```
+
+Your comment should have the text `initialize buttons`.
+
+```js
+assert.match(code, /\/\/\s*initialize buttons/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c2fccf186146b59c6e96.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c2fccf186146b59c6e96.md
new file mode 100644
index 00000000000..0f2fe813e63
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c2fccf186146b59c6e96.md
@@ -0,0 +1,134 @@
+---
+id: 62a3c2fccf186146b59c6e96
+title: Step 36
+challengeType: 0
+dashedName: step-36
+---
+
+# --description--
+
+`button1` represents your first `button` element. These elements have a special property called `onclick`, which you can use to determine what happens when someone clicks that button. Properties in JavaScript can be accessed in a couple of ways - the first is with <dfn>dot notation</dfn>. Accessing the `onclick` property of a button would look like `button.onclick`.
+
+Use dot notation to set the `onclick` property of your `button1` to the variable `goStore`. This variable will be something you write later. Note that `button1` is already declared, so you do not need to use `let` or `const`.
+
+# --hints--
+
+You should use dot notation to access the `onclick` property of `button1`.
+
+```js
+assert.match(code, /button1\.onclick/);
+```
+
+You should not use `let` or `const`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button1\.onclick/);
+```
+
+You should set the `onclick` property of `button1` to the variable `goStore`.
+
+```js
+assert.match(code, /button1\.onclick\s*=\s*goStore/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+--fcc-editable-region--
+// initialize buttons
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c4a0e52767482c5202d4.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c4a0e52767482c5202d4.md
new file mode 100644
index 00000000000..73d0dc234d9
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c4a0e52767482c5202d4.md
@@ -0,0 +1,151 @@
+---
+id: 62a3c4a0e52767482c5202d4
+title: Step 37
+challengeType: 0
+dashedName: step-37
+---
+
+# --description--
+
+Using the same syntax, set the `onclick` properties of `button2` and `button3` to `goCave` and `fightDragon` respectively.
+
+# --hints--
+
+You should use dot notation to access the `onclick` property of `button2`.
+
+```js
+assert.match(code, /button2\.onclick/);
+```
+
+You should not use `let` or `const` to assign `button2.onclick`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button2\.onclick/);
+```
+
+You should set the `onclick` property of `button2` to the variable `goCave`.
+
+```js
+assert.match(code, /button2\.onclick\s*=\s*goCave/);
+```
+
+You should use dot notation to access the `onclick` property of `button3`.
+
+```js
+assert.match(code, /button3\.onclick/);
+```
+
+You should not use `let` or `const` to assign `button3.onclick`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button3\.onclick/);
+```
+
+You should set the `onclick` property of `button3` to the variable `fightDragon`.
+
+```js
+assert.match(code, /button3\.onclick\s*=\s*fightDragon/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+--fcc-editable-region--
+// initialize buttons
+button1.onclick = goStore;
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md
new file mode 100644
index 00000000000..38a51618160
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c668afc43b4a134cca81.md
@@ -0,0 +1,150 @@
+---
+id: 62a3c668afc43b4a134cca81
+title: Step 38
+challengeType: 0
+dashedName: step-38
+---
+
+# --description--
+
+Functions are special tools that allow you to run sections of code at specific times. You can declare functions using the `function` keyword. Here is an example of a function called `functionName` - note the opening and closing curly braces. These indicate the section of code that is within the function.
+
+```js
+function functionName() {
+
+}
+```
+
+Create an empty function named `goStore`. This will match the `goStore` variable you used earlier.
+
+# --hints--
+
+You should declare `goStore` with the `function` keyword.
+
+```js
+assert.match(code, /function\s*goStore()/);
+```
+
+`goStore` should be defined.
+
+```js
+assert.isDefined(goStore);
+```
+
+`goStore` should be a function.
+
+```js
+assert.isFunction(goStore);
+```
+
+`goStore` should be an empty function.
+
+```js
+assert.equal(goStore.toString(), "function goStore() {}");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md
new file mode 100644
index 00000000000..7bec654ec15
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c8bf3980c14c438d2aed.md
@@ -0,0 +1,138 @@
+---
+id: 62a3c8bf3980c14c438d2aed
+title: Step 39
+challengeType: 0
+dashedName: step-39
+---
+
+# --description--
+
+For now, make your `goStore` function output the message `Going to store.` to the console. For example, here is a function that outputs the message "Hello World".
+
+```js
+function functionName() {
+    console.log("Hello World");
+}
+```
+
+# --hints--
+
+You should have a `console.log("Going to store.");` line in your code. Don't forget the semi-colon.
+
+```js
+assert.match(code, /console\.log\(('|")Going to store\.\1\);/);
+```
+
+Your `console.log("Going to store.");` line should be in your `goStore` function.
+
+```js
+assert.match(goStore.toString(), /console\.log\(('|")Going to store\.\1\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function goStore() {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md
new file mode 100644
index 00000000000..a911182a57c
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3c91a2bab1b4d6fabb726.md
@@ -0,0 +1,146 @@
+---
+id: 62a3c91a2bab1b4d6fabb726
+title: Step 40
+challengeType: 0
+dashedName: step-40
+---
+
+# --description--
+
+Now create a `goCave` function that prints `Going to cave.` to the console.
+
+# --hints--
+
+You should use the `function` keyword to declare `goCave`.
+
+```js
+assert.match(code, /function goCave/);
+```
+
+`goCave` should be a function.
+
+```js
+assert.isFunction(goCave);
+```
+
+You should have a `console.log("Going to cave.");` line in your code.
+
+```js
+assert.match(code, /console.log\(('|")Going to cave\.\1\)/);
+```
+
+Your `console.log("Going to cave.");` line should be inside your `goCave` function.
+
+```js
+assert.match(goCave.toString(), /console.log\(('|")Going to cave\.\1\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function goStore() {
+  console.log("Going to store.");
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md
new file mode 100644
index 00000000000..c14f5a7d858
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cdb11478a34ff4a6470d.md
@@ -0,0 +1,152 @@
+---
+id: 62a3cdb11478a34ff4a6470d
+title: Step 41
+challengeType: 0
+dashedName: step-41
+---
+
+# --description--
+
+Now create a `fightDragon` function that prints `Fighting dragon.` to the console.
+
+Once you have done that, open your console and try clicking the buttons on your project.
+
+# --hints--
+
+You should use the `function` keyword to declare `fightDragon`.
+
+```js
+assert.match(code, /function fightDragon/);
+```
+
+`fightDragon` should be a function.
+
+```js
+assert.isFunction(fightDragon);
+```
+
+You should have a `console.log("Fighting dragon.");` line in your code.
+
+```js
+assert.match(code, /console.log\(('|")Fighting dragon\.\1\)/);
+```
+
+Your `console.log("Fighting dragon.");` line should be inside your `fightDragon` function.
+
+```js
+assert.match(fightDragon.toString(), /console.log\(('|")Fighting dragon\.\1\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function goStore() {
+  console.log("Going to store.");
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md
new file mode 100644
index 00000000000..3cc2e9eb620
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a3cfc8328d3351b95d4f61.md
@@ -0,0 +1,164 @@
+---
+id: 62a3cfc8328d3351b95d4f61
+title: Step 42
+challengeType: 0
+dashedName: step-42
+---
+
+# --description--
+
+The `innerText` property controls the text that appears in an HTML element. For example:
+
+```js
+const info = document.querySelector("#info");
+info.innerText = "Hello World";
+```
+
+This code would change the element assigned to the `div` variable to have the text `Hello World`.
+
+When a player clicks your `Go to store` button, you want to change the buttons and text. Remove the code inside the `goStore` function and add a line that updates the text of `button1` to say `Buy 10 health (10 gold)`.
+
+# --hints--
+
+You should not have a `console.log("Going to store.");` line in your code.
+
+```js
+assert.notMatch(code, /console.log\(('|")Going to store\.\1\)/);
+```
+
+You should use dot notation to access the `innerText` property of `button1`.
+
+```js
+assert.match(code, /button1\.innerText/);
+```
+
+You should not use `let` or `const` to access the `innerText` property of `button1`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button1.innerText/);
+```
+
+You should update the `innerText` property of `button1` to be `Buy 10 health (10 gold)`.
+
+```js
+assert.match(code, /button1\.innerText\s*=\s*('|")Buy 10 health \(10 gold\)\1/);
+```
+
+You should update the `innerText` property within your `goStore` function.
+
+```js
+assert.match(goStore.toString(), /button1\.innerText\s*=\s*('|")Buy 10 health \(10 gold\)\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    border: 1px solid black;
+    padding: 5px;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function goStore() {
+  console.log("Going to store.");
+}
+--fcc-editable-region--
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md
new file mode 100644
index 00000000000..8d5c8d1245f
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7beb1ad61211ac153707f.md
@@ -0,0 +1,176 @@
+---
+id: 62a7beb1ad61211ac153707f
+title: Step 43
+challengeType: 0
+dashedName: step-43
+---
+
+# --description--
+
+Now add a line that updates the text of `button2` to say `Buy weapon (30 gold)` and update the text of `button3` to say `Go to town square`.
+
+# --hints--
+
+You should use dot notation to access the `innerText` property of `button2`.
+
+```js
+assert.match(code, /button2\.innerText/);
+```
+
+You should not use `let` or `const` to access the `innerText` property of `button2`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button2.innerText/);
+```
+
+You should update the `innerText` property of `button2` to be `Buy weapon (30 gold)`.
+
+```js
+assert.match(code, /button2\.innerText\s*=\s*('|")Buy weapon \(30 gold\)\1/);
+```
+
+You should update the `innerText` property within your `goStore` function.
+
+```js
+assert.match(goStore.toString(), /button2\.innerText\s*=\s*('|")Buy weapon \(30 gold\)\1/);
+```
+
+You should use dot notation to access the `innerText` property of `button3`.
+
+```js
+assert.match(code, /button3\.innerText/);
+```
+
+You should not use `let` or `const` to access the `innerText` property of `button3`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button3.innerText/);
+```
+
+You should update the `innerText` property of `button3` to be `Go to town square`.
+
+```js
+assert.match(code, /button3\.innerText\s*=\s*('|")Go to town square\1/);
+```
+
+You should update the `innerText` property within your `goStore` function.
+
+```js
+assert.match(goStore.toString(), /button3\.innerText\s*=\s*('|")Go to town square\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+}
+--fcc-editable-region--
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md
new file mode 100644
index 00000000000..981e39344f7
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bf06d2ad9d1c5024e833.md
@@ -0,0 +1,202 @@
+---
+id: 62a7bf06d2ad9d1c5024e833
+title: Step 44
+challengeType: 0
+dashedName: step-44
+---
+
+# --description--
+
+You will also need to update the functions that run when the buttons are clicked. Update the `onclick` property for each button to run `buyHealth`, `buyWeapon`, and `goTown`, respectively.
+
+# --hints--
+
+You should use dot notation to access the `onclick` property of `button1`.
+
+```js
+assert.match(code, /button1\.onclick/);
+```
+
+You should not use `let` or `const` to access the `onclick` property of `button1`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button1.onclick/);
+```
+
+You should set the `onclick` property of `button1` to be `buyHealth`.
+
+```js
+assert.match(code, /button1\.onclick\s*=\s*buyHealth/);
+```
+
+You should set the `onclick` property of `button1` in your `goStore` function.
+
+```js
+assert.match(goStore.toString(), /button1\.onclick\s*=\s*buyHealth/);
+```
+
+You should use dot notation to access the `onclick` property of `button2`.
+
+```js
+assert.match(code, /button2\.onclick/);
+```
+
+You should not use `let` or `const` to access the `onclick` property of `button2`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button2.onclick/);
+```
+
+You should set the `onclick` property of `button2` to be `buyWeapon`.
+
+```js
+assert.match(code, /button2\.onclick\s*=\s*buyWeapon/);
+```
+
+You should set the `onclick` property of `button2` in your `goStore` function.
+
+```js
+assert.match(goStore.toString(), /button2\.onclick\s*=\s*buyWeapon/);
+```
+
+You should use dot notation to access the `onclick` property of `button3`.
+
+```js
+assert.match(code, /button3\.onclick/);
+```
+
+You should not use `let` or `const` to access the `onclick` property of `button3`.
+
+```js
+assert.notMatch(code, /(let|const)\s+button3.onclick/);
+```
+
+You should set the `onclick` property of `button3` to be `goTown`.
+
+```js
+assert.match(code, /button3\.onclick\s*=\s*goTown/);
+```
+
+You should set the `onclick` property of `button3` in your `goStore` function.
+
+```js
+assert.match(goStore.toString(), /button3\.onclick\s*=\s*goTown/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+}
+--fcc-editable-region--
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md
new file mode 100644
index 00000000000..eed48a208c4
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfabe119461eb13ccbd6.md
@@ -0,0 +1,157 @@
+---
+id: 62a7bfabe119461eb13ccbd6
+title: Step 45
+challengeType: 0
+dashedName: step-45
+---
+
+# --description--
+
+Now you need to modify your display text. Change the `innerText` of the `text` to be `You enter the store.`.
+
+# --hints--
+
+You should use dot notation to access the `innerText` property of `text`.
+
+```js
+assert.match(code, /text\.innerText/);
+```
+
+You should not use `let` or `const` to access the `innerText` property of `text`.
+
+```js
+assert.notMatch(code, /(let|const)\s+text.innerText/);
+```
+
+You should update the `innerText` property of `text` to be `You enter the store.`.
+
+```js
+assert.match(code, /text\.innerText\s*=\s*('|")You enter the store.\1/);
+```
+
+You should update the `innerText` property within your `goStore` function.
+
+```js
+assert.match(goStore.toString(), /text\.innerText\s*=\s*('|")You enter the store.\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+}
+--fcc-editable-region--
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md
new file mode 100644
index 00000000000..ae7d6df92f7
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7bfd9179b7f1f6a15fb1e.md
@@ -0,0 +1,172 @@
+---
+id: 62a7bfd9179b7f1f6a15fb1e
+title: Step 46
+challengeType: 0
+dashedName: step-46
+---
+
+# --description--
+
+Create three new empty functions called `buyHealth`, `buyWeapon`, and `goTown`.
+
+# --hints--
+
+You should declare `buyHealth` with the `function` keyword.
+
+```js
+assert.match(code, /function buyHealth/);
+```
+
+You should declare `buyWeapon` with the `function` keyword.
+
+```js
+assert.match(code, /function buyWeapon/);
+```
+
+You should declare `goTown` with the `function` keyword.
+
+```js
+assert.match(code, /function goTown/);
+```
+
+`buyHealth` should be an empty function.
+
+```js
+assert.equal(buyHealth.toString(), 'function buyHealth() {}');
+```
+
+`buyWeapon` should be an empty function.
+
+```js
+assert.equal(buyWeapon.toString(), 'function buyWeapon() {}');
+```
+
+`goTown` should be an empty function.
+
+```js
+assert.equal(goTown.toString(), 'function goTown() {}');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md
new file mode 100644
index 00000000000..b985f7eded3
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c011eef9fb2084b966db.md
@@ -0,0 +1,162 @@
+---
+id: 62a7c011eef9fb2084b966db
+title: Step 47
+challengeType: 0
+dashedName: step-47
+---
+
+# --description--
+
+Move your `goTown` function above your `goStore` function. Then copy and paste the contents of the `goStore` function into the `goTown` function.
+
+# --hints--
+
+Your `goTown` function should come before your `goStore` function.
+
+```js
+const goTown = code.split(" ").indexOf("goTown()");
+const goStore = code.split(" ").indexOf("goStore()");
+assert.isBelow(goTown, goStore);
+```
+
+Your `goTown` function should have the same contents as your `goStore` function.
+
+```js
+const goTownString = goTown.toString().replace("goTown", "");
+const goStoreString = goStore.toString().replace("goStore", "");
+assert.equal(goTownString, goStoreString);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+--fcc-editable-region--
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+
+function goTown() {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c071219da921758a35bb.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c071219da921758a35bb.md
new file mode 100644
index 00000000000..20ac473611a
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c071219da921758a35bb.md
@@ -0,0 +1,194 @@
+---
+id: 62a7c071219da921758a35bb
+title: Step 48
+challengeType: 0
+dashedName: step-48
+---
+
+# --description--
+
+In your `goTown` function, update your button `innerText` properties to be `Go to store`, `Go to cave`, and `Fight dragon`. Update your `onclick` properties to be `goStore`, `goCave`, and `fightDragon`, respectively. Finally, update your text's `innerText` property to be `You are in the town square. You see a sign that says Store.`.
+
+# --hints--
+
+You should set the `button1.innerText` property to be `Go to store` in your `goTown` function.
+
+```js
+assert.match(goTown.toString(), /button1\.innerText\s*=\s*('|")Go to store\1/);
+```
+
+You should set the `button2.innerText` property to be `Go to cave` in your `goTown` function.
+
+```js
+assert.match(goTown.toString(), /button2\.innerText\s*=\s*('|")Go to cave\1/);
+```
+
+You should set the `button3.innerText` property to be `Fight dragon` in your `goTown` function.
+
+```js
+assert.match(goTown.toString(), /button3\.innerText\s*=\s*('|")Fight dragon\1/);
+```
+
+You should set the `button1.onclick` property to be `goStore` in your `goTown` function.
+
+```js
+assert.match(goTown.toString(), /button1\.onclick\s*=\s*goStore/);
+```
+
+You should set the `button2.onclick` property to be `goCave` in your `goTown` function.
+
+```js
+assert.match(goTown.toString(), /button2\.onclick\s*=\s*goCave/);
+```
+
+You should set the `button3.onclick` property to be `fightDragon` in your `goTown` function.
+
+```js
+assert.match(goTown.toString(), /button3\.onclick\s*=\s*fightDragon/);
+```
+
+You should set the `text.innerText` property to be `You are in the town square. You see a sign that says Store.` in your `goTown` function.
+
+```js
+assert.match(goTown.toString(), /text\.innerText\s*=\s*('|")You are in the town square. You see a sign that says Store\.\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function goTown() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+--fcc-editable-region--
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c23e6b511f22ed71197a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c23e6b511f22ed71197a.md
new file mode 100644
index 00000000000..6b26d69619b
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7c23e6b511f22ed71197a.md
@@ -0,0 +1,164 @@
+---
+id: 62a7c23e6b511f22ed71197a
+title: Step 49
+challengeType: 0
+dashedName: step-49
+---
+
+# --description--
+
+You need to wrap the text `Store` in double quotes. Because your string is already wrapped in double quotes, you'll need to escape the quotes around `Store`. You can escape them with a backslash `\`.  Here is an example:
+
+```js
+const escapedString = "Naomi likes to play \"Zelda\" sometimes.";
+```
+
+Wrap the text `Store` in double quotes within your `text.innerText` line.
+
+# --hints--
+
+You should wrap the text `Store` in double quotes.
+
+```js
+assert.match(goTown.toString(), /text\.innerText\s*=\s*"You are in the town square. You see a sign that says \\"Store\\"."/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function goTown() {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says Store.";
+}
+--fcc-editable-region--
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7cc99577fbf25ee7a7d76.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7cc99577fbf25ee7a7d76.md
new file mode 100644
index 00000000000..82ae722f3d8
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a7cc99577fbf25ee7a7d76.md
@@ -0,0 +1,180 @@
+---
+id: 62a7cc99577fbf25ee7a7d76
+title: Step 50
+challengeType: 0
+dashedName: step-50
+---
+
+# --description--
+
+You have repetition in the `goTown` and `goStore` functions. When you have repetition in your code, this is a sign that you need another function. Functions can take parameters, which are values that are given to the function each time it is run. Here is a function that takes a parameter called `param`:
+
+```js
+function myFunction(param) {
+    console.log(param);
+}
+```
+
+Create an empty `update` function that takes a parameter called `location`.
+
+# --hints--
+
+You should use the `function` keyword to declare `update`.
+
+```js
+assert.match(code, /function\s+update/);
+```
+
+Your `update` function should take a parameter called `location`.
+
+```js
+assert.match(update.toString(), /update\(location\)/);
+```
+
+Your `update` function should be empty.
+
+```js
+assert.equal(update.toString(), function update(location) {});
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+function goTown() {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a929e4260d08093756d2.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a929e4260d08093756d2.md
new file mode 100644
index 00000000000..a36f9b9f86e
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a929e4260d08093756d2.md
@@ -0,0 +1,176 @@
+---
+id: 62a8a929e4260d08093756d2
+title: Step 51
+challengeType: 0
+dashedName: step-51
+---
+
+# --description--
+
+Create a variable called `locations` and set it to an empty array.
+
+# --hints--
+
+You should use `const` to declare `locations`.
+
+```js
+assert.match(code, /const locations/);
+```
+
+`locations` should be an array.
+
+
+```js
+assert.isArray(locations);
+```
+
+`locations` should be empty.
+
+```js
+assert.equal(locations.length, 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+
+}
+
+function goTown() {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a9d876b2580943ba9351.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a9d876b2580943ba9351.md
new file mode 100644
index 00000000000..4f9143c205b
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8a9d876b2580943ba9351.md
@@ -0,0 +1,171 @@
+---
+id: 62a8a9d876b2580943ba9351
+title: Step 52
+challengeType: 0
+dashedName: step-52
+---
+
+# --description--
+
+You previously used an array to store strings. But arrays can store any data type. This time, your array will be storing objects. Objects are similar to arrays, but with a few differences. One difference is that objects use properties, or keys, to access and modify data.
+
+Objects are indicated by curly braces. An empty object would look like `{}`. Add an empty object to your `locations` array.
+
+# --hints--
+
+Your first value of `locations` should be an object.
+
+```js
+assert.isObject(locations[0]);
+```
+
+Your first value of `locations` should be an empty object.
+
+```js
+assert.deepEqual(locations[0], {});
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+--fcc-editable-region--
+const locations = [];
+--fcc-editable-region--
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+
+}
+
+function goTown() {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md
new file mode 100644
index 00000000000..28ff0bb1ad6
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8aa98a8289d0a698eee1d.md
@@ -0,0 +1,187 @@
+---
+id: 62a8aa98a8289d0a698eee1d
+title: Step 53
+challengeType: 0
+dashedName: step-53
+---
+
+# --description--
+
+Object <dfn>properties</dfn> are written as `key: value` pairs, where `key` is the name of the property (or the key), and `value` is the value that property holds. For example, here is an object with a key of `name` set to `Quincy Larson`.
+
+```js
+{
+    name: "Quincy Larson"
+}
+```
+
+Add a `name` property to your empty object and give it a value of `town square`.
+
+# --hints--
+
+Your first value of `locations` should be an object.
+
+```js
+assert.isObject(locations[0]);
+```
+
+Your first value of `locations` should have a `name` property.
+
+```js
+assert.isDefined(locations[0].name);
+```
+
+Your first value of `locations` should have a `name` property with a value of `town square`.
+
+```js
+assert.equal(locations[0].name, "town square");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+--fcc-editable-region--
+const locations = [
+    {
+
+    }
+];
+--fcc-editable-region--
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+
+}
+
+function goTown() {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md
new file mode 100644
index 00000000000..45578691077
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ab0e27cbaf0b54ba8a42.md
@@ -0,0 +1,200 @@
+---
+id: 62a8ab0e27cbaf0b54ba8a42
+title: Step 54
+challengeType: 0
+dashedName: step-54
+---
+
+# --description--
+
+Just like array values, object properties are separated by a comma. Add a comma after your `name` property and add a `button text` property with the value of an empty array. Note that because the property name has more than one word, you'll need to surround it in quotes.
+
+For example:
+
+```js
+{
+    name: "Naomi",
+    "favorite color": "purple"
+}
+```
+
+# --hints--
+
+Your first `locations` value should be an object.
+
+```js
+assert.isObject(locations[0]);
+```
+
+Your first `locations` value should have a `button text` property.
+
+```js
+assert.isDefined(locations[0]["button text"]);
+```
+
+Your first `locations` value should have a `button text` property with a value that is an array.
+
+```js
+assert.isArray(locations[0]["button text"]);
+```
+
+Your first `locations` value should have a `button text` property with a value that is an empty array.
+
+```js
+assert.equal(locations[0]["button text"].length, 0);
+```
+
+You should not remove or change the `name` property.
+
+```js
+assert.equal(locations[0].name, "town square");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+--fcc-editable-region--
+const locations = [
+    {
+        name: "town square"
+    }
+];
+--fcc-editable-region--
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+
+}
+
+function goTown() {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md
new file mode 100644
index 00000000000..5a1412cf312
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ac194679e60cb561b0a8.md
@@ -0,0 +1,194 @@
+---
+id: 62a8ac194679e60cb561b0a8
+title: Step 55
+challengeType: 0
+dashedName: step-55
+---
+
+# --description--
+
+Give your empty `button text` array three string elements. Use the three strings being assigned to the button `innerText` properties in the `goTown` function. Remember that array values are separated by commas.
+
+# --hints--
+
+Your `button text` array should have three elements.
+
+```js
+assert.lengthOf(locations[0]["button text"], 3);
+```
+
+Your `button text` array should have three strings.
+
+```js
+assert.isString(locations[0]["button text"][0]);
+assert.isString(locations[0]["button text"][1]);
+assert.isString(locations[0]["button text"][2]);
+```
+
+The first value in the `button text` array should be "Go to store".
+
+```js
+assert.equal(locations[0]["button text"][0], "Go to store");
+```
+
+The second value in the `button text` array should be "Go to cave".
+
+```js
+assert.equal(locations[0]["button text"][1], "Go to cave");
+```
+
+The third value in the `button text` array should be "Fight dragon".
+
+```js
+assert.equal(locations[0]["button text"][2], "Fight dragon");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+--fcc-editable-region--
+const locations = [
+    {
+        name: "town square",
+        "button text": []
+    }
+];
+--fcc-editable-region--
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+
+}
+
+function goTown() {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md
new file mode 100644
index 00000000000..1229366bb3a
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ad8e01d7cb0deae5ec66.md
@@ -0,0 +1,198 @@
+---
+id: 62a8ad8e01d7cb0deae5ec66
+title: Step 56
+challengeType: 0
+dashedName: step-56
+---
+
+# --description--
+
+Create another property in your object called `button functions`. Give this property an array containing the three functions assigned to the `onclick` properties in the `goTown` function. Remember that these functions are variables, not strings, and should not be wrapped in quotes.
+
+# --hints--
+
+Your first `locations` object should have a `button functions` property.
+
+```js
+assert.isDefined(locations[0]["button functions"]);
+```
+
+Your `button functions` property should be an array.
+
+```js
+assert.isArray(locations[0]["button functions"]);
+```
+
+Your `button functions` property should have three values in it.
+
+```js
+assert.lengthOf(locations[0]["button functions"], 3);
+```
+
+Your first `button functions` array value should be the function `goStore`.
+
+```js
+assert.equal(locations[0]["button functions"][0], goStore);
+```
+
+Your second `button functions` array value should be the function `goCave`.
+
+```js
+assert.equal(locations[0]["button functions"][1], goCave);
+```
+
+Your third `button functions` array value should be the function `fightDragon`.
+
+```js
+assert.equal(locations[0]["button functions"][2], fightDragon);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+--fcc-editable-region--
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"]
+    }
+];
+--fcc-editable-region--
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+
+}
+
+function goTown() {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ade9b2f5b30ef0b606c2.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ade9b2f5b30ef0b606c2.md
new file mode 100644
index 00000000000..7ac20d72a3e
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ade9b2f5b30ef0b606c2.md
@@ -0,0 +1,181 @@
+---
+id: 62a8ade9b2f5b30ef0b606c2
+title: Step 57
+challengeType: 0
+dashedName: step-57
+---
+
+# --description--
+
+Add one final property to the object named `text`. Give this property the final `text.innerText` value from the `goTown` function.
+
+# --hints--
+
+Your first `locations` value should have a `text` property.
+
+```js
+assert.isDefined(locations[0]["text"]);
+```
+
+Your `text` property should be a string.
+
+```js
+assert.isString(locations[0]["text"]);
+```
+
+Your `text` property should have the value `You are in the town square. You see a sign that says \"Store\".`
+
+```js
+assert.equal(locations[0]["text"], "You are in the town square. You see a sign that says \"Store\".");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+--fcc-editable-region--
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon]
+    }
+];
+--fcc-editable-region--
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+
+}
+
+function goTown() {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md
new file mode 100644
index 00000000000..79d6d140e1e
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ae85fcaedc0fddc7ca4f.md
@@ -0,0 +1,235 @@
+---
+id: 62a8ae85fcaedc0fddc7ca4f
+title: Step 58
+challengeType: 0
+dashedName: step-58
+---
+
+# --description--
+
+Add a second object to your `locations` array (remember to separate them with a comma). Following the pattern you used in the first object, create the same properties but use the values from the `goStore` function. Set the `name` property to `store`.
+
+# --hints--
+
+Your `locations` array should have two values.
+
+```js
+assert.lengthOf(locations, 2);
+```
+
+Both `locations` values should be objects.
+
+
+```js
+assert.isObject(locations[0]);
+assert.isObject(locations[1]);
+```
+
+Your second `locations` object should have a `name` property with the value of `store`.
+
+```js
+assert.equal(locations[1].name, "store");
+```
+
+Your second `locations` object should have a `button text` property which is an array.
+
+```js
+assert.isArray(locations[1]["button text"]);
+```
+
+Your `button text` property should have the string values `Buy 10 health (10 gold)`, `Buy weapon (30 gold)`, and `Go to town square`.
+
+```js
+assert.equal(locations[1]["button text"][0], "Buy 10 health (10 gold)");
+assert.equal(locations[1]["button text"][1], "Buy weapon (30 gold)");
+assert.equal(locations[1]["button text"][2], "Go to town square");
+```
+
+Your second `locations` object should have a `button functions` property which is an array.
+
+```js
+assert.isArray(locations[1]["button functions"]);
+```
+
+Your `button functions` property should have the function values `buyHealth`, `buyWeapon`, and `goTown`.
+
+```js
+assert.equal(locations[1]["button functions"][0], buyHealth);
+assert.equal(locations[1]["button functions"][1], buyWeapon);
+assert.equal(locations[1]["button functions"][2], goTown);
+```
+
+Your second `locations` object should have a `text` property which is a string.
+
+```js
+assert.isString(locations[1].text);
+```
+
+Your second `locations` object should have a `text` property with the value of `You enter the store.`.
+
+```js
+assert.equal(locations[1].text, "You enter the store.");
+```
+
+You should not modify the first `locations` object.
+
+```js
+assert.deepEqual(locations[0], {
+  name: "town square",
+  "button text": ["Go to store", "Go to cave", "Fight dragon"],
+  "button functions": [goStore, goCave, fightDragon],
+  text: "You are in the town square. You see a sign that says \"Store\"."
+});
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+--fcc-editable-region--
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    }
+];
+--fcc-editable-region--
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+
+}
+
+function goTown() {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md
new file mode 100644
index 00000000000..c60cf5907da
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b0b5053f16111b0b6b5f.md
@@ -0,0 +1,224 @@
+---
+id: 62a8b0b5053f16111b0b6b5f
+title: Step 59
+challengeType: 0
+dashedName: step-59
+---
+
+# --description--
+
+Now you can consolidate some of your code. Start by copying the code from inside the `goTown` function and paste it into your `update` function. Then, remove all the code from inside the `goTown` and `goStore` functions.
+
+# --hints--
+
+Your `update` function should set `button1.innerText` to `Go to store`.
+
+```js
+assert.match(update.toString(), /button1\.innerText\s*=\s*('|")Go to store\1/);
+```
+
+Your `update` function should set `button2.innerText` to `Go to cave`.
+
+```js
+assert.match(update.toString(), /button2\.innerText\s*=\s*('|")Go to cave\1/);
+```
+
+Your `update` function should set `button3.innerText` to `Fight dragon`.
+
+```js
+assert.match(update.toString(), /button3\.innerText\s*=\s*('|")Fight dragon\1/);
+```
+
+Your `update` function should set `button1.onclick` to `goStore`.
+
+```js
+assert.match(update.toString(), /button1\.onclick\s*=\s*goStore/);
+```
+
+Your `update` function should set `button2.onclick` to `goCave`.
+
+```js
+assert.match(update.toString(), /button2\.onclick\s*=\s*goCave/);
+```
+
+Your `update` function should set `button3.onclick` to `fightDragon`.
+
+```js
+assert.match(update.toString(), /button3\.onclick\s*=\s*fightDragon/);
+```
+
+Your `update` function should set `text.innerText` to `You are in the town square. You see a sign that says "Store".`.
+
+```js
+assert.match(update.toString(), /text\.innerText\s*=\s*"You are in the town square. You see a sign that says \\"Store\\"\."/);
+```
+
+Your `goTown` function should be empty.
+
+```js
+assert.match(goTown.toString(), /function goTown\(\) \{\}/);
+```
+
+Your `goStore` function should be empty.
+
+```js
+assert.match(goStore.toString(), /function goStore\(\) \{\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function update(location) {
+
+}
+
+function goTown() {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+
+function goStore() {
+  button1.innerText = "Buy 10 health (10 gold)";
+  button2.innerText = "Buy weapon (30 gold)";
+  button3.innerText = "Go to town square";
+  button1.onclick = buyHealth;
+  button2.onclick = buyWeapon;
+  button3.onclick = goTown;
+  text.innerText = "You enter the store.";
+}
+--fcc-editable-region--
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md
new file mode 100644
index 00000000000..450bc66c133
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b1762b7775124622e1a3.md
@@ -0,0 +1,176 @@
+---
+id: 62a8b1762b7775124622e1a3
+title: Step 60
+challengeType: 0
+dashedName: step-60
+---
+
+# --description--
+
+Instead of assigning the `innerText` and `onclick` properties to specific strings and functions, the `update` function will use data from the `location` that is passed into it. First, that data needs to be passed. Inside the `goTown` function, call the `update` function. Here is an example of calling a function named `myFunction`: `myFunction();`.
+
+# --hints--
+
+You should call the `update` function in the `goTown` function.
+
+```js
+assert.match(goTown.toString(), /update\(\)/);
+```
+
+Don't forget your ending semi-colon.
+
+```js
+assert.match(goTown.toString(), /update\(\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+
+--fcc-editable-region--
+function goTown() {
+
+}
+--fcc-editable-region--
+
+function goStore() {
+
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md
new file mode 100644
index 00000000000..4d5aa1df9b9
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b3cc436db8139cc5fc09.md
@@ -0,0 +1,170 @@
+---
+id: 62a8b3cc436db8139cc5fc09
+title: Step 61
+challengeType: 0
+dashedName: step-61
+---
+
+# --description--
+
+You now need to pass the `location` argument into the `update` call. You pass arguments by including them within the parentheses of the function call. For example, calling `myFunction` with an `arg` argument would look like: `myFunction(arg)`. Pass your `locations` array into the `update` call.
+
+# --hints--
+
+You should pass the `locations` array into the `update` call.
+
+```js
+assert.match(goTown.toString(), /update\(locations\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+
+--fcc-editable-region--
+function goTown() {
+  update();
+}
+--fcc-editable-region--
+
+function goStore() {
+
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md
new file mode 100644
index 00000000000..a8bef26a706
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b6536156c51500739b41.md
@@ -0,0 +1,190 @@
+---
+id: 62a8b6536156c51500739b41
+title: Step 62
+challengeType: 0
+dashedName: step-62
+---
+
+# --description--
+
+The `locations` array contains two locations: the town square and the store. Currently you are passing that entire array into the update functions. Pass in only the first element of the `locations` array by adding `[0]` at the end of the variable. For example: `myFunction(arg[0]);`.
+
+This is called <dfn>bracket notation</dfn>. Values in an array are accessed by index. Indices are numerical values and start at 0 - this is called zero-based indexing. `arg[0]` would be the first element in the `arg` array.
+
+# --hints--
+
+You should use bracket notation with `locations`.
+
+```js
+assert.match(code, /locations\[/);
+```
+
+You should access the first object in the `locations` array. Remember that arrays are zero-based.
+
+```js
+assert.match(code, /locations\[0\]/);
+```
+
+You should pass the first object in the `locations` array into the `update` function.
+
+```js
+assert.match(code, /update\(locations\[0\]\);/);
+```
+
+This call should still be in your `goTown()` function.
+
+```js
+assert.match(goTown.toString(), /update\(locations\[0\]\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+
+--fcc-editable-region--
+function goTown() {
+  update(locations);
+}
+--fcc-editable-region--
+
+function goStore() {
+
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md
new file mode 100644
index 00000000000..8a6a5c5c67a
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b711ab7a12161c7d9b67.md
@@ -0,0 +1,176 @@
+---
+id: 62a8b711ab7a12161c7d9b67
+title: Step 63
+challengeType: 0
+dashedName: step-63
+---
+
+# --description--
+
+Now your `update` function needs to use the argument you pass into it. Inside the `update` function, change the `button1.innerText` assignment to be `location["button text"]`. That uses bracket notation to get the `button text` property of the `location` object passed into the function.
+
+# --hints--
+
+Your `update` function should use bracket notation to get the `button text` property of the `location` object passed into the function.
+
+```js
+assert.match(update.toString(), /location[('|")button text\1]/);
+```
+
+You should assign the value of the `button text` property of the `location` object to the `innerText` property of `button1`.
+
+```js
+assert.match(update.toString(), /button1\.innerText\s*=\s*location\[('|")button text\1\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function update(location) {
+  button1.innerText = "Go to store";
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+--fcc-editable-region--
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md
new file mode 100644
index 00000000000..ab4856b1c26
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8b9770050d217d2247801.md
@@ -0,0 +1,176 @@
+---
+id: 62a8b9770050d217d2247801
+title: Step 64
+challengeType: 0
+dashedName: step-64
+---
+
+# --description--
+
+`location["button text"]` is an array with three elements. Change the `button1.innerText` assignment to be the first element of that array instead.
+
+# --hints--
+
+You should access the first element of the `button text` property of the `location` argument.
+
+```js
+assert.match(update.toString(), /location\[('|")button text\1\]\[0\]/);
+```
+
+You should set the `button1.innerText` property to be the first element of the `button text` property of the `location` argument.
+
+```js
+assert.match(update.toString(), /button1\.innerText\s*=\s*location\[('|")button text\1\]\[0\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function update(location) {
+  button1.innerText = location["button text"];
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+--fcc-editable-region--
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md
new file mode 100644
index 00000000000..458368c6e11
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c0c8313e891a15ec23e7.md
@@ -0,0 +1,188 @@
+---
+id: 62a8c0c8313e891a15ec23e7
+title: Step 65
+challengeType: 0
+dashedName: step-65
+---
+
+# --description--
+
+Now update `button2.innerText` and `button3.innerText` to be assigned the second and third values of the `button text` array, respectively.
+
+# --hints--
+
+You should access the second element of the `button text` property of the `location` argument.
+
+```js
+assert.match(update.toString(), /location\[('|")button text\1\]\[1\]/);
+```
+
+You should set the `button2.innerText` property to be the second element of the `button text` property of the `location` argument.
+
+```js
+assert.match(update.toString(), /button2\.innerText\s*=\s*location\[('|")button text\1\]\[1\]/);
+```
+
+You should access the third element of the `button text` property of the `location` argument.
+
+```js
+assert.match(update.toString(), /location\[('|")button text\1\]\[2\]/);
+```
+
+You should set the `button3.innerText` property to be the third element of the `button text` property of the `location` argument.
+
+```js
+assert.match(update.toString(), /button3\.innerText\s*=\s*location\[('|")button text\1\]\[2\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = "Go to cave";
+  button3.innerText = "Fight dragon";
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+--fcc-editable-region--
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c1154d3ae11aee80353f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c1154d3ae11aee80353f.md
new file mode 100644
index 00000000000..4731c369e1e
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c1154d3ae11aee80353f.md
@@ -0,0 +1,200 @@
+---
+id: 62a8c1154d3ae11aee80353f
+title: Step 66
+challengeType: 0
+dashedName: step-66
+---
+
+# --description--
+
+Following the same pattern as you did for the button text, update the three buttons' `onclick` assignments to be the first, second, and third values of the `button functions` array.
+
+# --hints--
+
+You should access the first element of the `button functions` property of the `location` argument.
+
+```js
+assert.match(update.toString(), /location\[('|")button functions\1\]\[0\]/);
+```
+
+You should set the `button1.onclick` property to be the second element of the `button functions` property of the `location` argument.
+
+```js
+assert.match(update.toString(), /button1\.onclick\s*=\s*location\[('|")button functions\1\]\[0\]/);
+```
+
+You should access the second element of the `button functions` property of the `location` argument.
+
+```js
+assert.match(update.toString(), /location\[('|")button functions\1\]\[1\]/);
+```
+
+You should set the `button2.onclick` property to be the third element of the `button functions` property of the `location` argument.
+
+```js
+assert.match(update.toString(), /button2\.onclick\s*=\s*location\[('|")button functions\1\]\[1\]/);
+```
+
+You should access the third element of the `button functions` property of the `location` argument.
+
+```js
+assert.match(update.toString(), /location\[('|")button functions\1\]\[2\]/);
+```
+
+You should set the `button3.onclick` property to be the third element of the `button functions` property of the `location` argument.
+
+```js
+assert.match(update.toString(), /button3\.onclick\s*=\s*location\[('|")button functions\1\]\[2\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = goStore;
+  button2.onclick = goCave;
+  button3.onclick = fightDragon;
+  text.innerText = "You are in the town square. You see a sign that says \"Store.\"";
+}
+--fcc-editable-region--
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md
new file mode 100644
index 00000000000..ca8a532ec15
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c151b23bf21bc7c4fcba.md
@@ -0,0 +1,176 @@
+---
+id: 62a8c151b23bf21bc7c4fcba
+title: Step 67
+challengeType: 0
+dashedName: step-67
+---
+
+# --description--
+
+Finally, update the `text.innerText` assignment to equal the `text` from the location object. However, instead of using bracket notation, use <dfn>dot notation</dfn>. Here is an example of accessing the `name` property of an object called `obj`: `obj.name`.
+
+# --hints--
+
+You should use dot notation to access the `text` property of the `location` object.
+
+```js
+assert.match(update.toString(), /location\.text/);
+```
+
+You should set the `text.innerText` property to be the `text` property of the `location` object.
+
+```js
+assert.match(update.toString(), /text\.innerText\s*=\s*location\.text/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = "You are in the town square. You see a sign that says \"Store\".";
+}
+--fcc-editable-region--
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c173949f851c83c64756.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c173949f851c83c64756.md
new file mode 100644
index 00000000000..422ff092c3e
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c173949f851c83c64756.md
@@ -0,0 +1,178 @@
+---
+id: 62a8c173949f851c83c64756
+title: Step 68
+challengeType: 0
+dashedName: step-68
+---
+
+# --description--
+
+Now update your `goStore` function to call the `update` function. Pass the second element of the `locations` array as your argument.
+
+To make sure your refactoring is correct, try clicking your first button again. You should see the same changes to your webpage that you saw earlier.
+
+# --hints--
+
+Your `goStore` function should call the `update` function.
+
+```js
+assert.match(goStore.toString(), /update\(/);
+```
+
+Your `goStore` function should pass the second element of the `locations` array as your argument to `update()`.
+
+```js
+assert.match(goStore.toString(), /update\(locations\[1\]\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+--fcc-editable-region--
+function goStore() {
+
+}
+--fcc-editable-region--
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c242b25a531f2909e5bc.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c242b25a531f2909e5bc.md
new file mode 100644
index 00000000000..d7800eb4dce
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c242b25a531f2909e5bc.md
@@ -0,0 +1,190 @@
+---
+id: 62a8c242b25a531f2909e5bc
+title: Step 69
+challengeType: 0
+dashedName: step-69
+---
+
+# --description--
+
+Create two more empty functions named `fightSlime` and `fightBeast`. These functions will be used in your upcoming `cave` object.
+
+# --hints--
+
+`fightSlime` should be a function.
+
+```js
+assert.isFunction(fightSlime);
+```
+
+`fightBeast` should be a function.
+
+```js
+assert.isFunction(fightBeast);
+```
+
+`fightSlime` should be empty.
+
+```js
+assert.match(fightSlime.toString(), /function fightSlime\(\) \{\}/);
+```
+
+`fightBeast` should be empty.
+
+```js
+assert.match(fightBeast.toString(), /function fightBeast\(\) \{\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c2bbbd8aa82052f47c53.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c2bbbd8aa82052f47c53.md
new file mode 100644
index 00000000000..d96b10aaff6
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c2bbbd8aa82052f47c53.md
@@ -0,0 +1,234 @@
+---
+id: 62a8c2bbbd8aa82052f47c53
+title: Step 70
+challengeType: 0
+dashedName: step-70
+---
+
+# --description--
+
+Add a third object to the `locations` array. Give it the same properties as the other two objects.
+
+Set `name` to `cave`. Set `button text` to an array with the strings `Fight slime`, `Fight fanged beast`, and `Go to town square`. Set the `button functions` to an array with the variables `fightSlime`, `fightBeast`, and `goTown`. Set the `text` property to `You enter the cave. You see some monsters.`.
+
+# --hints--
+
+You should have three values in your `locations` array.
+
+```js
+console.log(locations);
+assert.lengthOf(locations, 3);
+```
+
+Your third `locations` value should be an object.
+
+```js
+assert.isObject(locations[2]);
+```
+
+Your third `locations` object should have a `name` property with the value of `cave`.
+
+```js
+assert.equal(locations[2].name, "cave");
+```
+
+Your third `locations` object should have a `button text` property which is an array.
+
+```js
+assert.isArray(locations[2]["button text"]);
+```
+
+Your `button text` property should have the string values `Fight slime`, `Fight fanged beast`, and `Go to town square`.
+
+```js
+assert.equal(locations[2]["button text"][0], "Fight slime");
+assert.equal(locations[2]["button text"][1], "Fight fanged beast");
+assert.equal(locations[2]["button text"][2], "Go to town square");
+```
+
+Your third `locations` object should have a `button functions` property which is an array.
+
+```js
+assert.isArray(locations[2]["button functions"]);
+```
+
+Your `button functions` property should have the function values `fightSlime`, `fightBeast`, and `goTown`.
+
+```js
+assert.equal(locations[2]["button functions"][0], fightSlime);
+assert.equal(locations[2]["button functions"][1], fightBeast);
+assert.equal(locations[2]["button functions"][2], goTown);
+```
+
+Your third `locations` object should have a `text` property which is a string.
+
+```js
+assert.isString(locations[2].text);
+```
+
+Your third `locations` object should have a `text` property with the value of `You enter the cave. You see some monsters.`.
+
+```js
+assert.equal(locations[2].text, "You enter the cave. You see some monsters.");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+--fcc-editable-region--
+
+--fcc-editable-region--
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  console.log("Going to cave.");
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c31ec0ec78216a1c36a0.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c31ec0ec78216a1c36a0.md
new file mode 100644
index 00000000000..1d663fa1670
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c31ec0ec78216a1c36a0.md
@@ -0,0 +1,204 @@
+---
+id: 62a8c31ec0ec78216a1c36a0
+title: Step 71
+challengeType: 0
+dashedName: step-71
+---
+
+# --description--
+
+Now that you have a `cave` location object, update your `goCave` function to call `update` and pass that new `cave` location. Remember that this is the third element in your `locations` array.
+
+Don't forget to remove your `console.log` call!
+
+# --hints--
+
+You should use bracket notation to access the third element in your `locations` array.
+
+```js
+assert.match(code, /locations\[2\]/);
+```
+
+You should pass the third element in your `locations` array to `update`.
+
+```js
+assert.match(code, /update\(locations\[2\]\)/);
+```
+
+You should call `update` with the third element in your `locations` array in your `goCave` function.
+
+```js
+assert.match(goCave.toString(), /update\(locations\[2\]\)/);
+```
+
+You should not have the `console.log` statement in your `goCave` function.
+
+```js
+assert.notMatch(goCave.toString(), /console\.log/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+--fcc-editable-region--
+function goCave() {
+  console.log("Going to cave.");
+}
+--fcc-editable-region--
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+
+}
+
+function buyWeapon() {
+
+}
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c370ad8c68227137e0bc.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c370ad8c68227137e0bc.md
new file mode 100644
index 00000000000..4d33b655a6b
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c370ad8c68227137e0bc.md
@@ -0,0 +1,194 @@
+---
+id: 62a8c370ad8c68227137e0bc
+title: Step 72
+challengeType: 0
+dashedName: step-72
+---
+
+# --description--
+
+Now that your `store` and `cave` locations are complete, you can code the actions the player takes at those locations. Inside the `buyHealth` function, set `gold` equal to `gold` minus `10`.
+
+For example, here is how you would set `num` equal to `5` less than `num`: `num = num - 5;`.
+
+# --hints--
+
+You should subtract `10` from `gold`.
+
+```js
+assert.match(code, /gold\s*=\s*gold\s*-\s*10/);
+```
+
+Your `buyHealth` function should reduce `gold` by `10`.
+
+```js
+gold = 10;
+buyHealth();
+assert.equal(gold, 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+--fcc-editable-region--
+function buyHealth() {
+
+}
+--fcc-editable-region--
+
+function buyWeapon() {
+
+}
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c3ebc6c35e23785e1a19.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c3ebc6c35e23785e1a19.md
new file mode 100644
index 00000000000..df1d38ffce5
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c3ebc6c35e23785e1a19.md
@@ -0,0 +1,192 @@
+---
+id: 62a8c3ebc6c35e23785e1a19
+title: Step 73
+challengeType: 0
+dashedName: step-73
+---
+
+# --description--
+
+After the `gold` is updated, add a line to set `health` equal to `health` plus `10`.
+
+# --hints--
+
+You should add `10` to `health`.
+
+```js
+assert.match(code, /health\s*=\s*health\s*\+\s*10/);
+```
+
+Your `buyHealth` function should increase `health` by `10`.
+
+```js
+health = 10;
+buyHealth();
+assert.equal(health, 20);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+--fcc-editable-region--
+function buyHealth() {
+  gold = gold - 10;
+}
+--fcc-editable-region--
+
+function buyWeapon() {
+
+}
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c41ecaf1bd24536129b8.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c41ecaf1bd24536129b8.md
new file mode 100644
index 00000000000..a5bb57d211c
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c41ecaf1bd24536129b8.md
@@ -0,0 +1,203 @@
+---
+id: 62a8c41ecaf1bd24536129b8
+title: Step 74
+challengeType: 0
+dashedName: step-74
+---
+
+# --description--
+
+There is a shorthand way to add or subtract from a variable called <dfn>compound assignment</dfn>. For example, changing `num = num + 5` to compound assignment would look like `num += 5`.
+
+Update both lines inside your `buyHealth` function to use compound assignment.
+
+# --hints--
+
+You should change `gold` to use compound assignment.
+
+```js
+assert.notMatch(code, /gold\s*=\s*gold\s*-\s*10/);
+```
+
+You should change `health` to use compound assignment.
+
+```js
+assert.notMatch(code, /health\s*=\s*health\s*\+\s*10/);
+```
+
+Your `buyHealth` function should still update the values.
+
+```js
+gold = 10;
+health = 10;
+buyHealth();
+assert.equal(gold, 0);
+assert.equal(health, 20);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+--fcc-editable-region--
+function buyHealth() {
+  gold = gold - 10;
+  health = health + 10;
+}
+--fcc-editable-region--
+
+function buyWeapon() {
+
+}
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c465fa7b0c252f4a8f0c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c465fa7b0c252f4a8f0c.md
new file mode 100644
index 00000000000..70e928a9bd6
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c465fa7b0c252f4a8f0c.md
@@ -0,0 +1,207 @@
+---
+id: 62a8c465fa7b0c252f4a8f0c
+title: Step 75
+challengeType: 0
+dashedName: step-75
+---
+
+# --description--
+
+Now that you are updating the `gold` and `health` variables, you need to display those new values on the game screen. After your assignment lines, assign the `innerText` property of `goldText` to be the variable `gold`. Use the same pattern to update `healthText` with the `health` variable.
+
+Here is an example:
+
+```js
+let value = 100;
+const total = document.querySelector('#total');
+total.innerText = value;
+```
+
+You can test this by clicking your "Go to store" button, followed by your "Buy Health" button.
+
+# --hints--
+
+Your `buyHealth` function should update the text of `healthText` to be the value of `health`.
+
+```js
+health = 10;
+buyHealth();
+const target = document.querySelector('#healthText');
+assert.equal(target.innerText, '20');
+```
+
+Your `buyHealth` function should update the text of `goldText` to be the value of `gold`.
+
+```js
+gold = 10;
+buyHealth();
+const target = document.querySelector('#goldText');
+assert.equal(target.innerText, '0');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+--fcc-editable-region--
+function buyHealth() {
+  gold -= 10;
+  health += 10;
+}
+--fcc-editable-region--
+
+function buyWeapon() {
+
+}
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c4db0710f3260f867a92.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c4db0710f3260f867a92.md
new file mode 100644
index 00000000000..89161b6c20f
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c4db0710f3260f867a92.md
@@ -0,0 +1,209 @@
+---
+id: 62a8c4db0710f3260f867a92
+title: Step 76
+challengeType: 0
+dashedName: step-76
+---
+
+# --description--
+
+What if the player doesn't have enough gold to buy health? When you want to run code conditionally, you can use the `if` statement. Put all of the code in your `buyHealth` function inside an `if` statement. For example:
+
+```js
+function myFunction() {
+    if ("condition") {
+        console.log("Hello World!");
+    }
+}
+```
+
+For now, follow that pattern to use a string `condition` inside your `if` statement.
+
+# --hints--
+
+Your `buyHealth` function should have an `if` statement.
+
+```js
+assert.match(buyHealth.toString(), /if/);
+```
+
+Your `if` statement should have the string `condition` for the condition.
+
+```js
+assert.match(buyHealth.toString(), /if\s*\(('|")condition\1\)/);
+```
+
+All of your `buyHealth` code should be inside the `if` statement.
+
+```js
+assert.match(buyHealth.toString(), /if\s*\(('|")condition\1\)\s*\{[\s\S]*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+--fcc-editable-region--
+function buyHealth() {
+  gold -= 10;
+  health += 10;
+  goldText.innerText = gold;
+  healthText.innerText = health;
+}
+--fcc-editable-region--
+
+function buyWeapon() {
+
+}
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c56247609626fa4a8d6e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c56247609626fa4a8d6e.md
new file mode 100644
index 00000000000..e68eacaf744
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c56247609626fa4a8d6e.md
@@ -0,0 +1,221 @@
+---
+id: 62a8c56247609626fa4a8d6e
+title: Step 77
+challengeType: 0
+dashedName: step-77
+---
+
+# --description--
+
+The `condition` string is just a placeholder. Change the `if` statement condition to check if `gold` is greater than or equal to `10`.
+
+Here is an `if` statement that checks if `num` is greater than or equal to `5`:
+
+```js
+if (num >= 5) {
+
+}
+```
+
+# --hints--
+
+Your `if` statement should check if `gold` is greater than or equal to `10`.
+
+```js
+assert.match(buyHealth.toString(), /if\s*\(gold\s*>=\s*10\)/);
+```
+
+Your `buyHealth` function should update `health` and `gold` if `gold` is greater than or equal to `10`.
+
+```js
+gold = 10;
+health = 10;
+buyHealth();
+assert.equal(health, 20);
+assert.equal(gold, 0);
+const healthElement = document.getElementById('healthText');
+assert.equal(healthElement.innerText, '20');
+const goldElement = document.getElementById('goldText');
+assert.equal(goldElement.innerText, '0');
+```
+
+Your `buyHealth` function should not update `health` and `gold` if `gold` is less than `10`.
+
+```js
+gold = 5;
+health = 10;
+buyHealth();
+assert.equal(health, 10);
+assert.equal(gold, 5);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+--fcc-editable-region--
+function buyHealth() {
+  if ("condition") {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  }
+}
+--fcc-editable-region--
+
+function buyWeapon() {
+
+}
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c5db7888af27af23f0dd.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c5db7888af27af23f0dd.md
new file mode 100644
index 00000000000..d29d4fa92c7
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c5db7888af27af23f0dd.md
@@ -0,0 +1,206 @@
+---
+id: 62a8c5db7888af27af23f0dd
+title: Step 78
+challengeType: 0
+dashedName: step-78
+---
+
+# --description--
+
+Now when a player tries to buy health it will only work if they have enough money. If they do not, nothing will happen. Add an `else` statement where you can put code to run if a player does not have enough money.
+
+Here is an example of an empty `else` statement:
+
+```js
+if (num >= 5) {
+
+} else {
+
+}
+```
+
+# --hints--
+
+Your `buyHealth` function should have an `else` statement.
+
+```js
+assert.match(buyHealth.toString(), /else/);
+```
+
+Your `else` statement should come after your `if` statement.
+
+```js
+const split = buyHealth.toString().split(/\s/);
+assert.isAbove(split.indexOf('else'), split.indexOf('if'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+--fcc-editable-region--
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  }
+}
+--fcc-editable-region--
+
+function buyWeapon() {
+
+}
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c65b75664c28a8e59c16.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c65b75664c28a8e59c16.md
new file mode 100644
index 00000000000..3ef17db2434
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c65b75664c28a8e59c16.md
@@ -0,0 +1,200 @@
+---
+id: 62a8c65b75664c28a8e59c16
+title: Step 79
+challengeType: 0
+dashedName: step-79
+---
+
+# --description--
+
+Inside the `else` statement, set `text.innerText` to equal `You do not have enough gold to buy health.`.
+
+# --hints--
+
+Your `buyHealth` function should set `text.innerText` to equal `You do not have enough gold to buy health.`.
+
+```js
+assert.match(buyHealth.toString(), /text\.innerText\s*=\s*('|")You do not have enough gold to buy health\.\1/);
+```
+
+Your `buyHealth` function should update `text.innerText` when `gold` is less than `10`.
+
+```js
+gold = 5;
+health = 10;
+buyHealth();
+assert.equal(text.innerText, 'You do not have enough gold to buy health.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+--fcc-editable-region--
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+
+  }
+}
+--fcc-editable-region--
+
+function buyWeapon() {
+
+}
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c6815f5f1a29735efe1b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c6815f5f1a29735efe1b.md
new file mode 100644
index 00000000000..90b8c75c72f
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c6815f5f1a29735efe1b.md
@@ -0,0 +1,204 @@
+---
+id: 62a8c6815f5f1a29735efe1b
+title: Step 80
+challengeType: 0
+dashedName: step-80
+---
+
+# --description--
+
+Use `const` to create a `weapons` variable above your `locations` array. Assign it an empty array.
+
+# --hints--
+
+You should use `const` to declare your `weapons` variable.
+
+```js
+assert.match(code, /const weapons/i);
+```
+
+Your `weapons` variable should be an array.
+
+```js
+assert.isArray(weapons);
+```
+
+Your `weapons` variable should be empty.
+
+```js
+assert.equal(weapons.length, 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+--fcc-editable-region--
+
+--fcc-editable-region--
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+
+}
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7322e42962ad53ad204.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7322e42962ad53ad204.md
new file mode 100644
index 00000000000..bed05c8d88b
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7322e42962ad53ad204.md
@@ -0,0 +1,229 @@
+---
+id: 62a8c7322e42962ad53ad204
+title: Step 81
+challengeType: 0
+dashedName: step-81
+---
+
+# --description--
+
+Just like your `locations` array, your `weapons` array will hold objects. Add four objects to the `weapons` array, each with two properties: `name` and `power`. The first should have the `name` set to `stick` and the `power` set to `5`. The second should be `dagger` and `30`. The third, `claw hammer` and `50`. The fourth, `sword` and `100`.
+
+# --hints--
+
+Your `weapons` array should have four values.
+
+```js
+assert.lengthOf(weapons, 4);
+```
+
+Your `weapons` array should have four objects.
+
+```js
+assert.isObject(weapons[0]);
+assert.isObject(weapons[1]);
+assert.isObject(weapons[2]);
+assert.isObject(weapons[3]);
+```
+
+Your first `weapons` object should have the `name` set to `stick` and the `power` set to `5`.
+
+```js
+assert.equal(weapons[0].name, 'stick');
+assert.equal(weapons[0].power, 5);
+```
+
+Your second `weapons` object should have the `name` set to `dagger` and the `power` set to `30`.
+
+```js
+assert.equal(weapons[1].name, 'dagger');
+assert.equal(weapons[1].power, 30);
+```
+
+Your third `weapons` object should have the `name` set to `claw hammer` and the `power` set to `50`.
+
+```js
+assert.equal(weapons[2].name, 'claw hammer');
+assert.equal(weapons[2].power, 50);
+```
+
+Your fourth `weapons` object should have the `name` set to `sword` and the `power` set to `100`.
+
+```js
+assert.equal(weapons[3].name, 'sword');
+assert.equal(weapons[3].power, 100);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+--fcc-editable-region--
+const weapons = [];
+--fcc-editable-region--
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+
+}
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7a59e72c02bb1c717d2.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7a59e72c02bb1c717d2.md
new file mode 100644
index 00000000000..422e0ad66b5
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c7a59e72c02bb1c717d2.md
@@ -0,0 +1,203 @@
+---
+id: 62a8c7a59e72c02bb1c717d2
+title: Step 82
+challengeType: 0
+dashedName: step-82
+---
+
+# --description--
+
+Inside your `buyWeapon` function, add an `if` statement to check if `gold` is greater than or equal to `30`.
+
+# --hints--
+
+Your `buyWeapon` function should have an `if` statement.
+
+```js
+assert.include(buyWeapon.toString(), 'if');
+```
+
+Your `if` statement should check if `gold` is greater than or equal to `30`.
+
+```js
+assert.match(buyWeapon.toString(), /if\s*\(gold\s*>=\s*30\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md
new file mode 100644
index 00000000000..cded49b4395
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c89e4272512d44fc1c66.md
@@ -0,0 +1,215 @@
+---
+id: 62a8c89e4272512d44fc1c66
+title: Step 83
+challengeType: 0
+dashedName: step-83
+---
+
+# --description--
+
+Similar to your `buyHealth` function, set `gold` equal to 30 less than its current value. Make sure this is inside your `if` statement.
+
+# --hints--
+
+You should use compound assignment to subtract `30` from `gold`.
+
+```js
+assert.match(buyWeapon.toString(), /gold\s*-=\s*30/);
+```
+
+Your `buyWeapon` function should reduce `gold` by `30`.
+
+```js
+gold = 30;
+buyWeapon();
+assert.equal(gold, 0);
+```
+
+Your code should be in your `if` statement.
+
+```js
+gold = 20;
+buyWeapon();
+assert.equal(gold, 20);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (gold >= 30) {
+
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c8cee8e5cf2e001789b4.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c8cee8e5cf2e001789b4.md
new file mode 100644
index 00000000000..7f2575cbb11
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8c8cee8e5cf2e001789b4.md
@@ -0,0 +1,219 @@
+---
+id: 62a8c8cee8e5cf2e001789b4
+title: Step 84
+challengeType: 0
+dashedName: step-84
+---
+
+# --description--
+
+The value of the `currentWeapon` variable corresponds to an index in the `weapons` array. The player starts with a `stick`, since `currentWeapon` starts at `0` and `weapons[0]` is the `stick` weapon.
+
+In the `buyWeapon` function, add one to `currentWeapon` - the user is buying the next weapon in the `weapons` array.
+
+# --hints--
+
+You should use compound assignment to add one to `currentWeapon`.
+
+```js
+assert.match(buyWeapon.toString(), /currentWeapon\s*\+=\s*1/);
+```
+
+Your `buyWeapon` function should increase `currentWeapon` by `1`.
+
+```js
+gold = 30;
+currentWeapon = 0;
+buyWeapon();
+assert.equal(currentWeapon, 1);
+```
+
+Your code should be in your `if` statement.
+
+```js
+gold = 20;
+currentWeapon = 0;
+buyWeapon();
+assert.equal(currentWeapon, 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (gold >= 30) {
+    gold -= 30;
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ca22d29fe62f3952bdf5.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ca22d29fe62f3952bdf5.md
new file mode 100644
index 00000000000..dbd8006158d
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ca22d29fe62f3952bdf5.md
@@ -0,0 +1,208 @@
+---
+id: 62a8ca22d29fe62f3952bdf5
+title: Step 85
+challengeType: 0
+dashedName: step-85
+---
+
+# --description--
+
+Increasing a value by 1, or <dfn>incrementing</dfn>, has a special operator in JavaScript: `++`. If you wanted to increase `num` by 1, you could write `num++`.
+
+Change your `currentWeapon` assignment to use the increment operator.
+
+# --hints--
+
+You should use the increment operator to increase `currentWeapon` by `1`.
+
+```js
+assert.match(buyWeapon.toString(), /currentWeapon\s*\+\s*\+/);
+```
+
+You should not use compound assignment to increase `currentWeapon` by `1`.
+
+```js
+assert.notMatch(buyWeapon.toString(), /currentWeapon\s*\+=\s*1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (gold >= 30) {
+    gold -= 30;
+    currentWeapon += 1;
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cb19bd7f8a304e5427a1.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cb19bd7f8a304e5427a1.md
new file mode 100644
index 00000000000..29c3d761fb0
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cb19bd7f8a304e5427a1.md
@@ -0,0 +1,206 @@
+---
+id: 62a8cb19bd7f8a304e5427a1
+title: Step 86
+challengeType: 0
+dashedName: step-86
+---
+
+# --description--
+
+Now update the `goldText` element to display the new value of `gold`, and update the `text` element to display `You now have a new weapon.`.
+
+# --hints--
+
+You should update the `innerText` property of the `goldText` element to be `gold`.
+
+```js
+assert.match(buyWeapon.toString(), /goldText\.innerText\s*=\s*gold/);
+```
+
+You should update the `innerText` property of the `text` element to be `You now have a new weapon.`.
+
+```js
+assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a new weapon\.\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (gold >= 30) {
+    gold -= 30;
+    currentWeapon++;
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cbd1e3595431d5a2b3f1.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cbd1e3595431d5a2b3f1.md
new file mode 100644
index 00000000000..8f9a534ce96
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cbd1e3595431d5a2b3f1.md
@@ -0,0 +1,222 @@
+---
+id: 62a8cbd1e3595431d5a2b3f1
+title: Step 87
+challengeType: 0
+dashedName: step-87
+---
+
+# --description--
+
+You should tell the player what weapon they bought. In between the two lines you just wrote, use `let` to initialize a new variable called `newWeapon`. Set this to equal `weapons`.
+
+# --hints--
+
+Your `buyWeapon` function should have a variable named `newWeapon`.
+
+```js
+assert.match(buyWeapon.toString(), /newWeapon/);
+```
+
+You should use `let` to declare `newWeapon`.
+
+```js
+assert.match(code, /let\s+newWeapon/);
+```
+
+`newWeapon` should be initialised to have the value of `weapons`. Don't forget your semi-colon.
+
+```js
+assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons;/);
+```
+
+`newWeapon` should be declared before you modify `text`.
+
+```js
+const contents = buyWeapon.toString().split(/\s+/);
+assert.isBelow(contents.indexOf('newWeapon'), contents.indexOf('text.innerText'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyWeapon, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (gold >= 30) {
+    gold -= 30;
+    currentWeapon++;
+    goldText.innerText = gold;
+
+    text.innerText = "You now have a new weapon.";
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cce1b0c32c33017cf2e9.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cce1b0c32c33017cf2e9.md
new file mode 100644
index 00000000000..165962a1920
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cce1b0c32c33017cf2e9.md
@@ -0,0 +1,211 @@
+---
+id: 62a8cce1b0c32c33017cf2e9
+title: Step 88
+challengeType: 0
+dashedName: step-88
+---
+
+# --description--
+
+For your `newWeapon` variable, use bracket notation to use the `currentWeapon` variable to access an object within the `weapons` array.
+
+When you use a variable in bracket notation, you are accessing the property or index by the *value* of that variable.
+
+For example, this code uses the `index` variable to access a value of `array`.
+
+```js
+let value = array[index];
+```
+
+# --hints--
+
+You should update `newWeapon` to have the value of `weapons[currentWeapon]`.
+
+```js
+assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons\[currentWeapon\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (gold >= 30) {
+    gold -= 30;
+    currentWeapon++;
+    goldText.innerText = gold;
+    let newWeapon = weapons;
+    text.innerText = "You now have a new weapon.";
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce1dfc990134162b3bd9.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce1dfc990134162b3bd9.md
new file mode 100644
index 00000000000..7165051ad52
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce1dfc990134162b3bd9.md
@@ -0,0 +1,203 @@
+---
+id: 62a8ce1dfc990134162b3bd9
+title: Step 89
+challengeType: 0
+dashedName: step-89
+---
+
+# --description--
+
+`weapons[currentWeapon]` is an object. Use dot notation to get the `name` property of that object.
+
+# --hints--
+
+You should update `newWeapon` to have the value of `weapons[currentWeapon].name`.
+
+```js
+assert.match(buyWeapon.toString(), /newWeapon\s*=\s*weapons\[currentWeapon\]\.name;/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (gold >= 30) {
+    gold -= 30;
+    currentWeapon++;
+    goldText.innerText = gold;
+    let newWeapon = weapons[currentWeapon];
+    text.innerText = "You now have a new weapon.";
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce73d0dce43468f6689c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce73d0dce43468f6689c.md
new file mode 100644
index 00000000000..95d244d0f28
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ce73d0dce43468f6689c.md
@@ -0,0 +1,222 @@
+---
+id: 62a8ce73d0dce43468f6689c
+title: Step 90
+challengeType: 0
+dashedName: step-90
+---
+
+# --description--
+
+You can insert variables into a string with the <dfn>concatenation operator</dfn> `+`. Update the `You now have a new weapon.` string to say `You now have a` and the name of the new weapon. Remember to end the sentence with a period.
+
+Here is an example that creates the string `Hello, our name is freeCodeCamp.`:
+
+```js
+const ourName = "freeCodeCamp";
+const ourStr = "Hello, our name is " + ourName + ".";
+```
+
+# --hints--
+
+You should update the `text.innerText` assignment to start with the string `You now have a`.
+
+```js
+assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1/);
+```
+
+You should use the concatenation operator to add `newWeapon` to the end of the `text.innerText` string.
+
+```js
+assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1\s*\+\s*newWeapon/);
+```
+
+You should use the concatenation operator to end your `text.innerText` string with a `.`.
+
+```js
+assert.match(buyWeapon.toString(), /text\.innerText\s*=\s*('|")You now have a \1\s*\+\s*newWeapon\s*\+\s*('|")\.\2/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (gold >= 30) {
+    gold -= 30;
+    currentWeapon++;
+    goldText.innerText = gold;
+    let newWeapon = weapons[currentWeapon].name;
+    text.innerText = "You now have a new weapon.";
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cf22272d6d35af80d4ac.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cf22272d6d35af80d4ac.md
new file mode 100644
index 00000000000..0adfafd5584
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8cf22272d6d35af80d4ac.md
@@ -0,0 +1,229 @@
+---
+id: 62a8cf22272d6d35af80d4ac
+title: Step 91
+challengeType: 0
+dashedName: step-91
+---
+
+# --description--
+
+Back at the beginning of this project, you created the `inventory` array. Add the `newWeapon` to the end of the `inventory` array using the `push()` method.
+
+Here is an example:
+
+```js
+const arr = ["first"];
+const next = "second";
+arr.push(next);
+```
+
+`arr` would now have the value `["first", "second"]`.
+
+# --hints--
+
+You should use the `push` method on `inventory`.
+
+```js
+assert.match(buyWeapon.toString(), /inventory\.push/)
+```
+
+You should `push` the value of `newWeapon` to the `inventory` array.
+
+```js
+assert.match(buyWeapon.toString(), /inventory\.push\s*\(\s*newWeapon\s*\)/)
+```
+
+Your `buyWeapon` function should add the value of `newWeapon` to the `inventory` array.
+
+```js
+inventory = [];
+currentWeapon = 0;
+buyWeapon();
+assert.deepEqual(inventory, ["dagger"]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (gold >= 30) {
+    gold -= 30;
+    currentWeapon++;
+    goldText.innerText = gold;
+    let newWeapon = weapons[currentWeapon].name;
+    text.innerText = "You now have a " + newWeapon + ".";
+
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0337d7c67377a4a76c6.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0337d7c67377a4a76c6.md
new file mode 100644
index 00000000000..4037d95c48c
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0337d7c67377a4a76c6.md
@@ -0,0 +1,218 @@
+---
+id: 62a8d0337d7c67377a4a76c6
+title: Step 92
+challengeType: 0
+dashedName: step-92
+---
+
+# --description--
+
+Up until now, any time `text.innerText` was updated the old text was erased. This time, use the `+=` operator to add text to the end of `text.innerText`. Add the string `In your inventory you have:` - include the spaces at the beginning and the end.
+
+# --hints--
+
+You should add a new line with `text.innerText`.
+
+```js
+const matches = buyWeapon.toString().match(/text\.innerText/g);
+assert.lengthOf(matches, 2);
+```
+
+You should use the `+=` operator to add to `text.innerText`.
+
+```js
+assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*/)
+```
+
+You should add the string `In your inventory you have:` to the end of `text.innerText`. Mind the spaces!
+
+```js
+assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (gold >= 30) {
+    gold -= 30;
+    currentWeapon++;
+    goldText.innerText = gold;
+    let newWeapon = weapons[currentWeapon].name;
+    text.innerText = "You now have a " + newWeapon + ".";
+    inventory.push(newWeapon);
+
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d08668fa8b38732486e9.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d08668fa8b38732486e9.md
new file mode 100644
index 00000000000..908c77e836c
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d08668fa8b38732486e9.md
@@ -0,0 +1,211 @@
+---
+id: 62a8d08668fa8b38732486e9
+title: Step 93
+challengeType: 0
+dashedName: step-93
+---
+
+# --description--
+
+At the end of the second `text.innerText` string you just added, use the concatenation operator to add the contents of `inventory` to the string.
+
+# --hints--
+
+You should not change the `In your inventory you have:` string.
+
+```js
+assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1/)
+```
+
+You should use the concatenation operator `+` to add the contents of `inventory` to the string.
+
+```js
+assert.match(buyWeapon.toString(), /text\.innerText\s*\+=\s*('|")\sIn your inventory you have:\s\1\s*\+\s*inventory/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (gold >= 30) {
+    gold -= 30;
+    currentWeapon++;
+    goldText.innerText = gold;
+    let newWeapon = weapons[currentWeapon].name;
+    text.innerText = "You now have a " + newWeapon + ".";
+    inventory.push(newWeapon);
+    text.innerText += " In your inventory you have: ";
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0c4f12c2239b6618582.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0c4f12c2239b6618582.md
new file mode 100644
index 00000000000..3ebebb1edd6
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0c4f12c2239b6618582.md
@@ -0,0 +1,226 @@
+---
+id: 62a8d0c4f12c2239b6618582
+title: Step 94
+challengeType: 0
+dashedName: step-94
+---
+
+# --description--
+
+Add an `else` statement to your `buyWeapon` function. In that statement, set `text.innerText` to equal `You do not have enough gold to buy a weapon.`.
+
+# --hints--
+
+You should add an `else` statement to your `buyWeapon` function.
+
+```js
+assert.match(buyWeapon.toString(), /else/);
+```
+
+Your `else` statement should come after your `if` statement.
+
+```js
+const split = buyWeapon.toString().split(/\s|\n/);
+assert.isAbove(split.indexOf('else'), split.indexOf('if'));
+```
+
+You should set `text.innerText` to `You do not have enough gold to buy a weapon.`.
+
+```js
+assert.match(buyWeapon.toString(), /text.innerText\s*=\s*('|")You do not have enough gold to buy a weapon.\1/);
+```
+
+Your `else` statement should set `text.innerText` to `You do not have enough gold to buy a weapon.`.
+
+```js
+gold = 20;
+buyWeapon();
+assert.equal(text.innerText, 'You do not have enough gold to buy a weapon.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (gold >= 30) {
+    gold -= 30;
+    currentWeapon++;
+    goldText.innerText = gold;
+    let newWeapon = weapons[currentWeapon].name;
+    text.innerText = "You now have a " + newWeapon + ".";
+    inventory.push(newWeapon);
+    text.innerText += " In your inventory you have: " + inventory;
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0fdf2dad83a92883a80.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0fdf2dad83a92883a80.md
new file mode 100644
index 00000000000..1c2b1476e8f
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d0fdf2dad83a92883a80.md
@@ -0,0 +1,225 @@
+---
+id: 62a8d0fdf2dad83a92883a80
+title: Step 95
+challengeType: 0
+dashedName: step-95
+---
+
+# --description--
+
+Once a player has the best weapon, they cannot buy another one. Wrap all of the code in your `buyWeapon` function inside another `if` statement. The condition should check if `currentWeapon` is less than `3` - the index of the last weapon.
+
+# --hints--
+
+You should have a new `if` statement that checks if `currentWeapon` is less than `3`.
+
+```js
+assert.match(buyWeapon.toString(), /currentWeapon\s*\<\s*3/)
+```
+
+Your existing `if` statement should be within your new `if` statement.
+
+```js
+currentWeapon = 5;
+gold = 50;
+buyWeapon();
+assert.equal(gold, 50);
+```
+
+Your existing `else` statement should be within your new `if` statement.
+
+```js
+currentWeapon = 5;
+gold = 10;
+buyWeapon();
+assert.notEqual(text.innerText, "You do not have enough gold to buy a weapon.");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (gold >= 30) {
+    gold -= 30;
+    currentWeapon++;
+    goldText.innerText = gold;
+    let newWeapon = weapons[currentWeapon].name;
+    text.innerText = "You now have a " + newWeapon + ".";
+    inventory.push(newWeapon);
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "You do not have enough gold to buy a weapon.";
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d143f2a58e3b6d6e9c33.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d143f2a58e3b6d6e9c33.md
new file mode 100644
index 00000000000..a705f22a61f
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d143f2a58e3b6d6e9c33.md
@@ -0,0 +1,215 @@
+---
+id: 62a8d143f2a58e3b6d6e9c33
+title: Step 96
+challengeType: 0
+dashedName: step-96
+---
+
+# --description--
+
+Arrays have a `length` property that returns the number of items in the array. You may want to add new values to the `weapons` array in the future. Change your `if` condition to check if `currentWeapon` is less than the length of the `weapons` array. An example of checking the length of an array `myArray` would look like `myArray.length`.
+
+# --hints--
+
+You should use the `length` property on the `weapons` array.
+
+```js
+assert.match(buyWeapon.toString(), /weapons\.length/);
+```
+
+Your `if` statement should check if `currentWeapon` is less than `weapons.length`.
+
+```js
+assert.match(buyWeapon.toString(), /currentWeapon\s*<\s*weapons\.length/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (currentWeapon < 3) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d1c72e8bb13c2074d93c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d1c72e8bb13c2074d93c.md
new file mode 100644
index 00000000000..4db3e483fce
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d1c72e8bb13c2074d93c.md
@@ -0,0 +1,215 @@
+---
+id: 62a8d1c72e8bb13c2074d93c
+title: Step 97
+challengeType: 0
+dashedName: step-97
+---
+
+# --description--
+
+You now have an error to fix. The `currentWeapon` variable is the index of the `weapons` array, but array indexing starts at zero. The index of the last element in an array is one less than the length of the array. Change the `if` condition to check `weapons.length - 1`, instead of `weapons.length`.
+
+# --hints--
+
+You should update the condition to subtract `1` from `weapons.length`.
+
+```js
+assert.match(buyWeapon.toString(), /weapons\.length\s*-\s*1/);
+```
+
+Your condition should check if `currentWeapon` is less than `weapons.length - 1`.
+
+```js
+assert.match(buyWeapon.toString(), /currentWeapon\s*<\s*weapons\.length\s*-\s*1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (currentWeapon < weapons.length) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2146a3e853d0a6e28ca.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2146a3e853d0a6e28ca.md
new file mode 100644
index 00000000000..2061307615c
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2146a3e853d0a6e28ca.md
@@ -0,0 +1,224 @@
+---
+id: 62a8d2146a3e853d0a6e28ca
+title: Step 98
+challengeType: 0
+dashedName: step-98
+---
+
+# --description--
+
+Add an `else` statement for your outer `if` statement. Inside this new `else` statement, set `text.innerText` to `You already have the most powerful weapon!`.
+
+# --hints--
+
+You should have another `else` statement in your `buyWeapon` function.
+
+```js
+const matches = buyWeapon.toString().match(/else/g);
+assert.equal(matches.length, 2);
+```
+
+You should set `text.innerText` to `You already have the most powerful weapon!`.
+
+```js
+assert.match(buyWeapon.toString(), /('|")You already have the most powerful weapon!\1/);
+```
+
+You should modify your `text.innerText` to `You already have the most powerful weapon!` within your outer `else` statement.
+
+```js
+currentWeapon = 5;
+buyWeapon();
+assert.equal(text.innerText, "You already have the most powerful weapon!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d24c97461b3ddb9397c8.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d24c97461b3ddb9397c8.md
new file mode 100644
index 00000000000..cd0c1476164
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d24c97461b3ddb9397c8.md
@@ -0,0 +1,229 @@
+---
+id: 62a8d24c97461b3ddb9397c8
+title: Step 99
+challengeType: 0
+dashedName: step-99
+---
+
+# --description--
+
+Once a player has the most powerful weapon, you can give them the ability to sell their old weapons. In the outer `else` statement, set `button2.innerText` to `Sell weapon for 15 gold`. Also set `button2.onclick` to the function name `sellWeapon`.
+
+# --hints--
+
+You should set the value of `button2.innerText`.
+
+```js
+assert.match(buyWeapon.toString(), /button2\.innerText/);
+```
+
+You should set the value of `button2.innerText` to `Sell weapon for 15 gold`.
+
+```js
+assert.match(buyWeapon.toString(), /button2\.innerText\s*=\s*('|")Sell weapon for 15 gold\1;/);
+```
+
+You should set the value of `button2.onclick`.
+
+```js
+assert.match(buyWeapon.toString(), /button2\.onclick/);
+```
+
+You should set the value of `button2.onclick` to `sellWeapon`.
+
+```js
+assert.match(buyWeapon.toString(), /button2\.onclick\s*=\s*sellWeapon;/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+--fcc-editable-region--
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2e2a073be3edb46116f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2e2a073be3edb46116f.md
new file mode 100644
index 00000000000..a5e28c829e7
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d2e2a073be3edb46116f.md
@@ -0,0 +1,221 @@
+---
+id: 62a8d2e2a073be3edb46116f
+title: Step 100
+challengeType: 0
+dashedName: step-100
+---
+
+# --description--
+
+Create an empty `sellWeapon` function.
+
+# --hints--
+
+You should use the `function` keyword to declare a `sellWeapon` variable.
+
+```js
+assert.isFunction(sellWeapon);
+```
+
+`sellWeapon` should be an empty function.
+
+```js
+assert.match(sellWeapon.toString(), /sellWeapon\(\)\s*\{\s*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d31ebbc10e3fe1b28e03.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d31ebbc10e3fe1b28e03.md
new file mode 100644
index 00000000000..77100cf5462
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d31ebbc10e3fe1b28e03.md
@@ -0,0 +1,223 @@
+---
+id: 62a8d31ebbc10e3fe1b28e03
+title: Step 101
+challengeType: 0
+dashedName: step-101
+---
+
+# --description--
+
+Players should not be able to sell their only weapon. Inside the `sellWeapon` function, add an `if` statement with a condition that checks if the length of the `inventory` array is greater than `1`.
+
+# --hints--
+
+Your `sellWeapon` function should have an `if` statement.
+
+```js
+assert.match(sellWeapon.toString(), /if/);
+```
+
+Your `if` statement should check if `inventory.length` is greater than `1`.
+
+```js
+assert.match(sellWeapon.toString(), /if\s*\(inventory\.length\s*>\s*1\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+--fcc-editable-region--
+function sellWeapon() {
+
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d35660db4040ba292193.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d35660db4040ba292193.md
new file mode 100644
index 00000000000..dbbf432519d
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d35660db4040ba292193.md
@@ -0,0 +1,234 @@
+---
+id: 62a8d35660db4040ba292193
+title: Step 102
+challengeType: 0
+dashedName: step-102
+---
+
+# --description--
+
+Inside the `if` statement, set `gold` equal to `15` more than its current value. Also update `goldText.innerText` to the new value.
+
+# --hints--
+
+You should use compound assignment to increase `gold` by `15`.
+
+```js
+assert.match(sellWeapon.toString(), /gold\s*\+=\s*15/);
+```
+
+You should set `goldText.innerText` to `gold`.
+
+```js
+assert.match(sellWeapon.toString(), /goldText\.innerText\s*=\s*gold/);
+```
+
+Your code should be in your `if` statement.
+
+```js
+inventory = ["Naomi"];
+gold = 0
+sellWeapon();
+assert.equal(gold, 0);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+--fcc-editable-region--
+function sellWeapon() {
+  if (inventory.length > 1) {
+
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d382cd075f4169223e14.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d382cd075f4169223e14.md
new file mode 100644
index 00000000000..8f3764e0ef9
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d382cd075f4169223e14.md
@@ -0,0 +1,223 @@
+---
+id: 62a8d382cd075f4169223e14
+title: Step 103
+challengeType: 0
+dashedName: step-103
+---
+
+# --description--
+
+Use the `let` keyword to create a variable named `currentWeapon`. Don't assign it a value yet.
+
+Notice that you already have a `currentWeapon` variable elsewhere in your code. Since you are using the `let` keyword instead of `var`, the new `currentWeapon` is scoped only to this `if` statement. At the close of the `if` statement, the old `currentWeapon` will be used again.
+
+# --hints--
+
+You should use `let` to declare a `currentWeapon` variable.
+
+```js
+assert.match(sellWeapon.toString(), /currentWeapon/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+--fcc-editable-region--
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d539dc11cb42b5dd7ec8.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d539dc11cb42b5dd7ec8.md
new file mode 100644
index 00000000000..1fb5303efc5
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d539dc11cb42b5dd7ec8.md
@@ -0,0 +1,233 @@
+---
+id: 62a8d539dc11cb42b5dd7ec8
+title: Step 104
+challengeType: 0
+dashedName: step-104
+---
+
+# --description--
+
+The `shift()` method on an array removes the first element in the array and returns it. Use this method to take the first element from the `inventory` array and assign it to your `currentWeapon` variable.
+
+# --hints--
+
+Your `sellWeapon` function should use the `shift()` method.
+
+```js
+assert.match(sellWeapon.toString(), /shift\(\)/);
+```
+
+You should use the `shift()` method on the `inventory` array.
+
+```js
+assert.match(sellWeapon.toString(), /inventory\.shift\(\)/);
+```
+
+You should assign the value of `inventory.shift()` to your `currentWeapon` variable.
+
+```js
+assert.match(sellWeapon.toString(), /currentWeapon\s*=\s*inventory\.shift\(\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+--fcc-editable-region--
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon;
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d61ddfe35744369365b7.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d61ddfe35744369365b7.md
new file mode 100644
index 00000000000..59e7717ce5b
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d61ddfe35744369365b7.md
@@ -0,0 +1,249 @@
+---
+id: 62a8d61ddfe35744369365b7
+title: Step 105
+challengeType: 0
+dashedName: step-105
+---
+
+# --description--
+
+After your `currentWeapon`, use the concatenation operator to set `text.innerText` to the string `You sold a`, then `currentWeapon`, then the string `.`.
+
+# --hints--
+
+You should use the assignment operator with `text.innerText`.
+
+```js
+assert.match(sellWeapon.toString(), /text\.innerText\s*=/);
+```
+
+You should add `You sold a` to `text.innerText`. Spacing is important.
+
+```js
+assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")You sold a \1/);
+```
+
+You should add the value of `currentWeapon` to the `You sold a` string. Use the concatenation operator to do this on the same line.
+
+```js
+assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")You sold a\s\1\s*\+\s*\_currentWeapon/);
+```
+
+You should add the string `.` to the value of `currentWeapon`. Use the concatenation operator to do this on the same line.
+
+```js
+assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")You sold a \1\s*\+\s*\_currentWeapon\s+\+\s+('|")\.\2/);
+```
+
+Your `text.innerText` should update to the proper string.
+
+```js
+inventory = ["first", "second"];
+text.innerText = "Hello";
+sellWeapon();
+assert.equal(text.innerText, "You sold a first.");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+--fcc-editable-region--
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d6c7001ebc45350e3d16.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d6c7001ebc45350e3d16.md
new file mode 100644
index 00000000000..ab3661c3b47
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d6c7001ebc45350e3d16.md
@@ -0,0 +1,243 @@
+---
+id: 62a8d6c7001ebc45350e3d16
+title: Step 106
+challengeType: 0
+dashedName: step-106
+---
+
+# --description--
+
+Now use the `+=` operator to add the string `In your inventory you have:` and the contents of `inventory` to the `text.innerText`. Make sure to include the space at the beginning and end of the `In your inventory you have:` string.
+
+# --hints--
+
+You should add another `text.innerText` line.
+
+```js
+const matches = sellWeapon.toString().match(/text\.innerText/g);
+assert.equal(matches.length, 2);
+```
+
+You should use compound assignment on `text.innerText`.
+
+```js
+const matches = sellWeapon.toString().match(/text\.innerText\s*\+=/g);
+assert.equal(matches.length, 1);
+```
+
+You should add the string `In your inventory you have:` to the second `text.innerText` line. Spacing matters.
+
+```js
+assert.match(sellWeapon.toString(), /text\.innerText\s*\+=\s*('|") In your inventory you have: \1/);
+```
+
+You should use the concatenation operator to add the value of `inventory` to the end of your second `text.innerText` line.
+
+```js
+assert.match(sellWeapon.toString(), /text\.innerText\s*\+=\s*('|") In your inventory you have: \1\s*\+\s*inventory/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+--fcc-editable-region--
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d7b8ab568b4649998954.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d7b8ab568b4649998954.md
new file mode 100644
index 00000000000..3e59ee00a2d
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d7b8ab568b4649998954.md
@@ -0,0 +1,237 @@
+---
+id: 62a8d7b8ab568b4649998954
+title: Step 107
+challengeType: 0
+dashedName: step-107
+---
+
+# --description--
+
+Use an `else` statement to run when the `inventory` length is not more than one. Set the `text.innerText` to say `Don't sell your only weapon!`.
+
+# --hints--
+
+Your `sellWeapon` function should have an `else` statement.
+
+```js
+assert.match(sellWeapon.toString(), /else/);
+```
+
+You should set `text.innerText` to `Don't sell your only weapon!`.
+
+```js
+assert.match(sellWeapon.toString(), /text\.innerText\s*=\s*('|")Don't sell your only weapon!\1/);
+```
+
+Your new `text.innerText` line should be in your `else` statement.
+
+```js
+inventory = ["Naomi"];
+sellWeapon();
+assert.equal(text.innerText, "Don't sell your only weapon!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+--fcc-editable-region--
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  }
+}
+--fcc-editable-region--
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d81f539f004776dd9b1e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d81f539f004776dd9b1e.md
new file mode 100644
index 00000000000..41a4aa00816
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8d81f539f004776dd9b1e.md
@@ -0,0 +1,310 @@
+---
+id: 62a8d81f539f004776dd9b1e
+title: Step 108
+challengeType: 0
+dashedName: step-108
+---
+
+# --description--
+
+Now you can start the code to fight monsters. To keep your code organized, your `fightDragon` function has been moved for you to be near the other `fight` functions.
+
+Below your `weapons` array, define a `monsters` variable and assign it an array. Set that array to have three objects, each with a `name`, `level`, and `health` properties. The first object's values should be `slime`, `2`, and `15`, in order. The second should be `fanged beast`, `8`, and `60`. The third should be `dragon`, `20`, and `300`.
+
+# --hints--
+
+You should use `const` to declare a `monsters` variable.
+
+```js
+assert.match(code, /const\s*monsters/);
+```
+
+Your `monsters` variable should be an array.
+
+```js
+assert.isArray(monsters);
+```
+
+Your `monsters` variable should have 3 values.
+
+```js
+assert.lengthOf(monsters, 3);
+```
+
+Your `monsters` array should have 3 objects.
+
+```js
+assert(monsters.every(val => typeof val === "object"));
+```
+
+The first value in your `monsters` array should be an object with a `name` property set to `slime`.
+
+```js
+assert.equal(monsters[0].name, "slime");
+```
+
+The first value in your `monsters` array should be an object with a `level` property set to `2`.
+
+```js
+assert.equal(monsters[0].level, 2);
+```
+
+The first value in your `monsters` array should be an object with a `health` property set to `15`.
+
+```js
+assert.equal(monsters[0].health, 15);
+```
+
+The second value in your `monsters` array should be an object with a `name` property set to `fanged beast`.
+
+```js
+assert.equal(monsters[1].name, "fanged beast");
+```
+
+The second value in your `monsters` array should be an object with a `level` property set to `8`.
+
+```js
+assert.equal(monsters[1].level, 8);
+```
+
+The second value in your `monsters` array should be an object with a `health` property set to `60`.
+
+```js
+assert.equal(monsters[1].health, 60);
+```
+
+The third value in your `monsters` array should be an object with a `name` property set to `dragon`.
+
+```js
+assert.equal(monsters[2].name, "dragon");
+```
+
+The third value in your `monsters` array should be an object with a `level` property set to `20`.
+
+```js
+assert.equal(monsters[2].level, 20);
+```
+
+The third value in your `monsters` array should be an object with a `health` property set to `300`.
+
+```js
+assert.equal(monsters[2].health, 300);
+```
+
+You should not add any extra properties to your objects.
+
+```js
+assert.deepEqual(monsters, [
+  {name: "slime", level: 2, health: 15},
+  {name: "fanged beast", level: 8, health: 60},
+  {name: "dragon", level: 20, health: 300}
+])
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+--fcc-editable-region--
+
+--fcc-editable-region--
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd468debb449b4454086.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd468debb449b4454086.md
new file mode 100644
index 00000000000..4167fc0a12b
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd468debb449b4454086.md
@@ -0,0 +1,250 @@
+---
+id: 62a8dd468debb449b4454086
+title: Step 109
+challengeType: 0
+dashedName: step-109
+---
+
+# --description--
+
+Fighting each type of monster will use similar logic. Create an empty function called `goFight` to manage this logic.
+
+# --hints--
+
+You should use the `function` keyword to declare `goFight`.
+
+```js
+assert.match(code, /function\s*goFight/);
+```
+
+`goFight` should be an empty function.
+
+```js
+assert.match(goFight.toString(), /goFight\s*\(\s*\)\s*\{\s*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+
+}
+
+function fightBeast() {
+
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd9cdb16324b04cfd958.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd9cdb16324b04cfd958.md
new file mode 100644
index 00000000000..b960134fac7
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dd9cdb16324b04cfd958.md
@@ -0,0 +1,260 @@
+---
+id: 62a8dd9cdb16324b04cfd958
+title: Step 110
+challengeType: 0
+dashedName: step-110
+---
+
+# --description--
+
+In your `fightSlime` function, set `fighting` equal to `0` - the index of `slime` in the `monsters` array. Remember that you already declared `fighting` earlier in your code, so you do not need `let` or `const` here.
+
+On the next line, call the `goFight` function.
+
+# --hints--
+
+You should set `fighting` equal to `0`.
+
+```js
+assert.match(fightSlime.toString(), /fighting\s*=\s*0;/);
+```
+
+You should not use `let` or `const`.
+
+```js
+assert.notMatch(fightSlime.toString(), /let|const|var/);
+```
+
+You should call the `goFight` function.
+
+```js
+assert.match(fightSlime.toString(), /goFight\(\);/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+--fcc-editable-region--
+function fightSlime() {
+
+}
+--fcc-editable-region--
+
+function fightBeast() {
+
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+
+function goFight() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dfcf7fb1044d2f478fd1.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dfcf7fb1044d2f478fd1.md
new file mode 100644
index 00000000000..aa331ca8991
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8dfcf7fb1044d2f478fd1.md
@@ -0,0 +1,259 @@
+---
+id: 62a8dfcf7fb1044d2f478fd1
+title: Step 111
+challengeType: 0
+dashedName: step-111
+---
+
+# --description--
+
+Following the same pattern, use that code in the `fightBeast` and `fightDragon` functions. Remember that `beast` is at index `1` and `dragon` is at index `2`. Also remove the `console.log` call from your `fightDragon` function.
+
+# --hints--
+
+You should set `fighting` to `1` in your `fightBeast` function.
+
+```js
+assert.match(fightBeast.toString(), /fighting\s*=\s*1;/);
+```
+
+You should set `fighting` to `2` in your `fightDragon` function.
+
+```js
+assert.match(fightDragon.toString(), /fighting\s*=\s*2;/);
+```
+
+You should remove the `console.log` from your `fightDragon` function.
+
+```js
+assert.notMatch(fightDragon.toString(), /console\.log/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+--fcc-editable-region--
+function fightBeast() {
+
+}
+
+function fightDragon() {
+  console.log("Fighting dragon.");
+}
+--fcc-editable-region--
+
+function goFight() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e0d1d0110b4ec421489f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e0d1d0110b4ec421489f.md
new file mode 100644
index 00000000000..5eccfafdc9b
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e0d1d0110b4ec421489f.md
@@ -0,0 +1,269 @@
+---
+id: 62a8e0d1d0110b4ec421489f
+title: Step 112
+challengeType: 0
+dashedName: step-112
+---
+
+# --description--
+
+At the end of your code, create two empty functions named `attack` and `dodge`.
+
+# --hints--
+
+You should use the `function` keyword to declare `attack`.
+
+```js
+assert.match(code, /function\s*attack/);
+```
+
+`attack` should be an empty function.
+
+```js
+assert.match(attack.toString(), /attack\s*\(\s*\)\s*\{\s*\}/);
+```
+
+You should use the `function` keyword to declare `dodge`.
+
+```js
+assert.match(code, /function\s*dodge/);
+```
+
+`dodge` should be an empty function.
+
+```js
+assert.match(dodge.toString(), /dodge\s*\(\s*\)\s*\{\s*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e142f7f0bd4fed898de3.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e142f7f0bd4fed898de3.md
new file mode 100644
index 00000000000..70d0725b1d9
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e142f7f0bd4fed898de3.md
@@ -0,0 +1,288 @@
+---
+id: 62a8e142f7f0bd4fed898de3
+title: Step 113
+challengeType: 0
+dashedName: step-113
+---
+
+# --description--
+
+Add a new object to the end of the `locations` array, following the same properties as the rest of the objects. Set `name` to `fight`, `button text` to an array with `Attack`, `Dodge`, and `Run`, `button functions` to an array with `attack`, `dodge`, and `goTown`, and `text` to `You are fighting a monster.`.
+
+# --hints--
+
+Your `locations` array should have 4 values in it.
+
+```js
+console.log(locations);
+assert.lengthOf(locations, 4);
+```
+
+Your new value should be an object.
+
+```js
+assert.isObject(locations[3]);
+```
+
+Your new object should have a `name` property set to `fight`.
+
+```js
+assert.equal(locations[3].name, "fight");
+```
+
+Your new object should have a `button text` property set to an array with the strings `Attack`, `Dodge`, and `Run`.
+
+```js
+assert.deepEqual(locations[3]["button text"], ["Attack", "Dodge", "Run"]);
+```
+
+Your new object should have a `button functions` property set to an array with the variables `attack`, `dodge`, and `goTown`.
+
+```js
+assert.deepEqual(locations[3]["button functions"], [attack, dodge, goTown]);
+```
+
+Your new object should have a `text` property set to `You are fighting a monster.`.
+
+```js
+assert.equal(locations[3].text, "You are fighting a monster.");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+--fcc-editable-region--
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    }
+];
+--fcc-editable-region--
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+
+}
+
+function attack() {
+
+}
+
+function dodge() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e1dc897df55108bcb5e8.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e1dc897df55108bcb5e8.md
new file mode 100644
index 00000000000..d87c8179a6e
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e1dc897df55108bcb5e8.md
@@ -0,0 +1,269 @@
+---
+id: 62a8e1dc897df55108bcb5e8
+title: Step 114
+challengeType: 0
+dashedName: step-114
+---
+
+# --description--
+
+In the `goFight` function, call your `update` function with the fourth object in `locations` as an argument.
+
+# --hints--
+
+You should call `update` in your `goFight` function.
+
+```js
+assert.match(goFight.toString(), /update/);
+```
+
+You should pass the fourth object in your `locations` array to your `update` call.
+
+```js
+assert.match(goFight.toString(), /update\(locations\[3\]\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+--fcc-editable-region--
+function goFight() {
+
+}
+--fcc-editable-region--
+
+function attack() {
+
+}
+
+function dodge() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e21398ad61520edb724f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e21398ad61520edb724f.md
new file mode 100644
index 00000000000..ec221bb2490
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e21398ad61520edb724f.md
@@ -0,0 +1,270 @@
+---
+id: 62a8e21398ad61520edb724f
+title: Step 115
+challengeType: 0
+dashedName: step-115
+---
+
+# --description--
+
+Below your `update` call, set the `monsterHealth` to be the health of the current monster. You can get this value by accessing the `health` property of `monsters[fighting]`.
+
+# --hints--
+
+You should use bracket notation to access the `monsters` array at the `fighting` index.
+
+```js
+assert.match(goFight.toString(), /monsters\[fighting\]/);
+```
+
+You should assign the value of `monsters[fighting]` to the `monsterHealth` variable.
+
+```js
+assert.match(goFight.toString(), /monsterHealth\s*=\s*monsters\[fighting\](\.health|\[('|")health\2\])/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+--fcc-editable-region--
+function goFight() {
+  update(locations[3]);
+
+}
+--fcc-editable-region--
+
+function attack() {
+
+}
+
+function dodge() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md
new file mode 100644
index 00000000000..64379cb2b5d
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e24c673b075317cc0b09.md
@@ -0,0 +1,281 @@
+---
+id: 62a8e24c673b075317cc0b09
+title: Step 116
+challengeType: 0
+dashedName: step-116
+---
+
+# --description--
+
+The HTML element that shows the monster's stats has been hidden with CSS. Display the `monsterStats` element by updating the `display` property of the `style` property to `block`. For example, updating the `first` property of the `name` property of `user` would look like:
+
+```js
+user.name.first = "Naomi";
+```
+
+# --hints--
+
+You should use dot notation to access the `style` property of `monsterStats`.
+
+```js
+assert.match(goFight.toString(), /monsterStats\.style/);
+```
+
+You should use dot notation to access the `display` property of the `style` property.
+
+```js
+assert.match(goFight.toString(), /monsterStats\.style\.display/);
+```
+
+You should set the `display` property to `block`.
+
+```js
+assert.match(goFight.toString(), /monsterStats\.style\.display\s*=\s*('|")block\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+--fcc-editable-region--
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+
+}
+--fcc-editable-region--
+
+function attack() {
+
+}
+
+function dodge() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e271f8e3d1541f9624ad.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e271f8e3d1541f9624ad.md
new file mode 100644
index 00000000000..0ccd9de7c1a
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e271f8e3d1541f9624ad.md
@@ -0,0 +1,284 @@
+---
+id: 62a8e271f8e3d1541f9624ad
+title: Step 117
+challengeType: 0
+dashedName: step-117
+---
+
+# --description--
+
+Now set the `innerText` property of `monsterName` to be the `name` property of the current monster. Do the same for `monsterHealthText` and the `health` property.
+
+# --hints--
+
+You should use dot notation to access the `innerText` property of `monsterName`.
+
+```js
+assert.match(goFight.toString(), /monsterName\.innerText/);
+```
+
+You should set the `innerText` property of `monsterName` to be the `name` value of the current monster. Remember that you can get the current monster with `monsters[fighting]`.
+
+```js
+assert.match(goFight.toString(), /monsterName\.innerText\s*=\s*monsters\[fighting\]\.name/);
+```
+
+You should use dot notation to access the `innerText` property of `monsterHealthText`.
+
+```js
+assert.match(goFight.toString(), /monsterHealthText\.innerText/);
+```
+
+You should set the `innerText` property of `monsterHealthText` to be the `health` value of the current monster. Remember that you assigned this value to a `monsterHealth` variable.
+
+```js
+assert.match(goFight.toString(), /monsterHealthText\.innerText\s*=\s*monsterHealth/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+--fcc-editable-region--
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+
+}
+--fcc-editable-region--
+
+function attack() {
+
+}
+
+function dodge() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e35675c18c56354c08cf.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e35675c18c56354c08cf.md
new file mode 100644
index 00000000000..d332dfa1870
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e35675c18c56354c08cf.md
@@ -0,0 +1,285 @@
+---
+id: 62a8e35675c18c56354c08cf
+title: Step 118
+challengeType: 0
+dashedName: step-118
+---
+
+# --description--
+
+Now you can build the `attack` function. First, update the `text` message to say `The [monster name] attacks.`, replacing `[monster name]` with the name of the monster. Remember you can use the concatenation operator for this.
+
+# --hints--
+
+You should use dot notation to access the `innerText` property of `text`.
+
+```js
+assert.match(attack.toString(), /text\.innerText/);
+```
+
+You should assign the string `The` to `innerText` property of `text`.
+
+```js
+assert.match(attack.toString(), /text\.innerText\s*=\s*('|")The \1/);
+```
+
+You should use the concatenation operator to add the value of `monsters[fighting].name` to the `The` string.
+
+```js
+assert.match(attack.toString(), /text\.innerText\s*=\s*('|")The \1\s*\+\s*monsters\[fighting\]\.name/);
+```
+
+You should use the concatenation operator to add the string `attacks.` to the `monsters[fighting].name` string.
+
+```js
+assert.match(attack.toString(), /text\.innerText\s*=\s*('|")The \1\s*\+\s*monsters\[fighting\]\.name\s*\+\s*('|") attacks\.\2/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+
+}
+--fcc-editable-region--
+
+function dodge() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e41e2f190c58404dd46e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e41e2f190c58404dd46e.md
new file mode 100644
index 00000000000..a96685f85e9
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e41e2f190c58404dd46e.md
@@ -0,0 +1,293 @@
+---
+id: 62a8e41e2f190c58404dd46e
+title: Step 119
+challengeType: 0
+dashedName: step-119
+---
+
+# --description--
+
+On a new line, add the string `You attack it with your [weapon].` to the `text` value, replacing `[weapon]` with the player's current weapon.
+
+# --hints--
+
+You should use dot notation to access the `innerText` property of `text` on a new line.
+
+```js
+const match = attack.toString().match(/text\.innerText/g);
+assert.lengthOf(match, 2);
+```
+
+You should use compound assignment with `text.innerText`.
+
+```js
+assert.match(attack.toString(), /text\.innerText\s*\+=/);
+```
+
+You should add the string `You attack it with your` to the `text.innerText` value. Remember that spacing matters.
+
+```js
+assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|") You attack it with your \1/);
+```
+
+You should use the concatenation operator to add the current weapon to the string. You can get the current weapon with `weapons[currentWeapon].name`.
+
+```js
+assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|") You attack it with your \1\s*\+\s*weapons\[currentWeapon\]\.name/);
+```
+
+You should use the concatenation operator to end your string with `.`.
+
+```js
+assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|") You attack it with your \1\s*\+\s*weapons\[currentWeapon\]\.name\s*\+\s*('|")\.\2/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+
+}
+--fcc-editable-region--
+
+function dodge() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md
new file mode 100644
index 00000000000..7ebd6d5383a
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e45cc600c3591cee671a.md
@@ -0,0 +1,275 @@
+---
+id: 62a8e45cc600c3591cee671a
+title: Step 120
+challengeType: 0
+dashedName: step-120
+---
+
+# --description--
+
+Next, set `health` to equal `health` minus the monster's level. Remember you can get this from the `monsters[fighting].level` property.
+
+# --hints--
+
+You should use compound assignment with `health`.
+
+```js
+assert.match(attack.toString(), /health\s*-=/);
+```
+
+You should subtract the monster's current level from `health`.
+
+```js
+assert.match(attack.toString(), /health\s*-=\s*monsters\[fighting\]\.level/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+
+}
+--fcc-editable-region--
+
+function dodge() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e49f4df7af5ae2d7a616.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e49f4df7af5ae2d7a616.md
new file mode 100644
index 00000000000..687f2f04e57
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e49f4df7af5ae2d7a616.md
@@ -0,0 +1,288 @@
+---
+id: 62a8e49f4df7af5ae2d7a616
+title: Step 121
+challengeType: 0
+dashedName: step-121
+---
+
+# --description--
+
+Set `monsterHealth` to `monsterHealth` minus the power of the player's current weapon. Remember you have the `currentWeapon` variable and the `power` property.
+
+# --hints--
+
+You should use compound assignment to modify the `monsterHealth` variable.
+
+```js
+assert.match(attack.toString(), /monsterHealth\s*-=/);
+```
+
+You should use bracket notation with `currentWeapon` to access `weapons`.
+
+```js
+assert.match(attack.toString(), /weapons\[currentWeapon\]/);
+```
+
+You should use dot notation to access the `power` property of `weapons[currentWeapon]`.
+
+```js
+assert.match(attack.toString(), /weapons\[currentWeapon\]\.power/);
+```
+
+You should subtract the `power` of the current weapon from `monsterHealth`.
+
+```js
+assert.match(attack.toString(), /monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+
+}
+--fcc-editable-region--
+
+function dodge() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e4dc6a60f85bf256a0cb.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e4dc6a60f85bf256a0cb.md
new file mode 100644
index 00000000000..fe85bcd7f75
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8e4dc6a60f85bf256a0cb.md
@@ -0,0 +1,316 @@
+---
+id: 62a8e4dc6a60f85bf256a0cb
+title: Step 122
+challengeType: 0
+dashedName: step-122
+---
+
+# --description--
+
+JavaScript offers the built-in `Math` utility which offers a number of mathematical tools. One of those is `Math.random()`, which generates a random number between 0 and 1. Another is `Math.floor()`, which rounds a given number down to the nearest integer.
+
+Using these, you can generate a random number within a range. For example, this generates a random number between 1 and 5: `Math.floor(Math.random() * 5) + 1;`.
+
+Following this pattern, add a random number between one and the value of `xp` at the end of your `monsterHealth` variable change.
+
+# --hints--
+
+You should use the same `monsterHealth` line you already wrote.
+
+```js
+assert.lengthOf(attack.toString().match(/monsterHealth/g), 1);
+```
+
+You should add to the `weapons[currentWeapon].power` value.
+
+```js
+assert.match(attack.toString(), /monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+/);
+```
+
+You should use `Math.floor()`.
+
+```js
+assert.match(attack.toString(), /Math\.floor/);
+```
+
+You should use `Math.random()`.
+
+```js
+assert.match(attack.toString(), /Math\.random/);
+```
+
+You should multiply `Math.random()` by the value of `xp`.
+
+```js
+assert.match(attack.toString(), /Math\.random\(\)\s*\*\s*xp/);
+```
+
+You should use `Math.floor()` to round the result of `Math.random() * xp` down.
+
+```js
+assert.match(attack.toString(), /Math\.floor\(\s*Math\.random\(\)\s*\*\s*xp\s*\)/);
+```
+
+You should add `1` to the result of `Math.floor()`.
+
+```js
+assert.match(attack.toString(), /Math\.floor\(\s*Math\.random\(\)\s*\*\s*xp\s*\)\s*\+\s*1/);
+```
+
+You should add the result of `Math.floor(Math.random() * xp) + 1` to the result of `weapons[currentWeapon].power`.
+
+```js
+assert.match(attack.toString(), /monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(\s*Math\.random\(\)\s*\*\s*xp\s*\)\s*\+\s*1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power;
+}
+--fcc-editable-region--
+
+function dodge() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ed36d7a7915dfa444ba2.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ed36d7a7915dfa444ba2.md
new file mode 100644
index 00000000000..5e0e6059dff
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ed36d7a7915dfa444ba2.md
@@ -0,0 +1,289 @@
+---
+id: 62a8ed36d7a7915dfa444ba2
+title: Step 123
+challengeType: 0
+dashedName: step-123
+---
+
+# --description--
+
+Update `healthText.innerText` and `monsterHealthText.innerText` to equal `health` and `monsterHealth`.
+
+# --hints--
+
+You should update `healthText.innerText`.
+
+```js
+assert.match(attack.toString(), /healthText\.innerText/);
+```
+
+You should set `healthText.innerText` to `health`.
+
+```js
+assert.match(attack.toString(), /healthText\.innerText\s*=\s*health/);
+```
+
+You should update `monsterHealthText.innerText`.
+
+```js
+assert.match(attack.toString(), /monsterHealthText\.innerText/);
+```
+
+You should set `monsterHealthText.innerText` to `monsterHealth`.
+
+```js
+assert.match(attack.toString(), /monsterHealthText\.innerText\s*=\s*monsterHealth/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+
+}
+--fcc-editable-region--
+
+function dodge() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8edd05e27cc668051686f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8edd05e27cc668051686f.md
new file mode 100644
index 00000000000..055ca35f7fe
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8edd05e27cc668051686f.md
@@ -0,0 +1,285 @@
+---
+id: 62a8edd05e27cc668051686f
+title: Step 124
+challengeType: 0
+dashedName: step-124
+---
+
+# --description--
+
+Add an `if` statement to check if `health` is less than or equal to `0`. If it is, call the `lose` function.
+
+# --hints--
+
+Your `attack` function should have an `if` statement.
+
+```js
+assert.match(attack.toString(), /if/);
+```
+
+Your `if` statement should check if `health` is less than or equal to `0`.
+
+```js
+assert.match(attack.toString(), /if\s*\(health\s*<=\s*0\)/);
+```
+
+Your `if` statement should call the `lose` function.
+
+```js
+assert.match(attack.toString(), /lose\(\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+
+}
+--fcc-editable-region--
+
+function dodge() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee154c8946678775c4a4.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee154c8946678775c4a4.md
new file mode 100644
index 00000000000..ac058ac03bc
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee154c8946678775c4a4.md
@@ -0,0 +1,297 @@
+---
+id: 62a8ee154c8946678775c4a4
+title: Step 125
+challengeType: 0
+dashedName: step-125
+---
+
+# --description--
+
+You can make an `else` statement conditional by using `else if`. At the end of your `if` statement, add an `else if` statement to check if `monsterHealth` is less than or equal to `0`. In your `else if`, call the `defeatMonster` function.
+
+Here's an example:
+
+```js
+if (num > 10) {
+
+} else if (num < 5) {
+
+}
+```
+
+# --hints--
+
+You should have an `else if` statement.
+
+```js
+assert.match(attack.toString(), /else if/);
+```
+
+Your `else if` statement should check if `monsterHealth` is less than or equal to `0`.
+
+```js
+assert.match(attack.toString(), /else\s*if\s*\(\s*monsterHealth\s*<=\s*0\s*\)/);
+```
+
+Your `else if` statement should call the `defeatMonster` function.
+
+```js
+assert.match(attack.toString(), /else\s*if\s*\(\s*monsterHealth\s*<=\s*0\s*\)\s*\{\s*defeatMonster/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  }
+}
+--fcc-editable-region--
+
+function dodge() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee71f018e968a056d369.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee71f018e968a056d369.md
new file mode 100644
index 00000000000..94244500db9
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ee71f018e968a056d369.md
@@ -0,0 +1,297 @@
+---
+id: 62a8ee71f018e968a056d369
+title: Step 126
+challengeType: 0
+dashedName: step-126
+---
+
+# --description--
+
+At the end of your code, create the `defeatMonster` and `lose` functions. Leave them empty for now.
+
+# --hints--
+
+You should use the `function` keyword to declare `defeatMonster`.
+
+```js
+assert.match(code, /function\s+defeatMonster/);
+```
+
+`defeatMonster` should be an empty function.
+
+```js
+assert.match(defeatMonster.toString(), /defeatMonster\s*\(\)\s*\{\s*\}/);
+```
+
+You should use the `function` keyword to declare `lose`.
+
+```js
+assert.match(code, /function\s+lose/);
+```
+
+`lose` should be an empty function.
+
+```js
+assert.match(lose.toString(), /lose\s*\(\)\s*\{\s*\}/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    defeatMonster();
+  }
+}
+
+function dodge() {
+
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
new file mode 100644
index 00000000000..74b7964b09f
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eec45f77bc69e8775294.md
@@ -0,0 +1,291 @@
+---
+id: 62a8eec45f77bc69e8775294
+title: Step 127
+challengeType: 0
+dashedName: step-127
+---
+
+# --description--
+
+Inside the `dodge` function, set `text.innerText` equal to the string `You dodge the attack from the [monster]`. Replace `[monster]` with the name of the monster, using the `name` property.
+
+# --hints--
+
+You should assign the string `You dodge the attack from the` to the `text.innerText` property. Remember that spacing matters.
+
+```js
+assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1/);
+```
+
+You should use the concatenation operator to add the name of the monster to the end of the string. You can get this with `monster[fighting].name`.
+
+```js
+assert.match(dodge.toString(), /text\.innerText\s*=\s*('|")You dodge the attack from the \1\s*\+\s*monsters\[fighting\]\.name/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    defeatMonster();
+  }
+}
+
+--fcc-editable-region--
+function dodge() {
+
+}
+--fcc-editable-region--
+
+function defeatMonster() {
+
+}
+
+function lose() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eefe2e68b66ac563816b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eefe2e68b66ac563816b.md
new file mode 100644
index 00000000000..f67c008aa05
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eefe2e68b66ac563816b.md
@@ -0,0 +1,299 @@
+---
+id: 62a8eefe2e68b66ac563816b
+title: Step 128
+challengeType: 0
+dashedName: step-128
+---
+
+# --description--
+
+In your `defeatMonster` function, set `gold` equal to `gold` plus the monster's level times `6.7`. You can get the monster's level with the `level` property.
+
+Here is an example of setting `num` to `num` plus `5` * `8`: `num += 5 * 8`. Use `Math.floor()` to round the result down.
+
+# --hints--
+
+You should use compound assignment to modify `gold`.
+
+```js
+assert.match(defeatMonster.toString(), /gold\s*\+=/);
+```
+
+You should use `Math.floor()` to round the result of the monster's level times `6.7`.
+
+```js
+assert.match(defeatMonster.toString(), /Math\.floor\(\s*monsters\[fighting\]\.level\s*\*\s*6\.7\s*\)/);
+```
+
+You should add the result of `Math.floor(gold + monsters[fighting].level * 6.7)` to `gold`.
+
+```js
+assert.match(defeatMonster.toString(), /gold\s*\+=\s*Math\.floor\(\s*monsters\[fighting\]\.level\s*\*\s*6\.7\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    defeatMonster();
+  }
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+--fcc-editable-region--
+function defeatMonster() {
+
+}
+--fcc-editable-region--
+
+function lose() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef6a52292f6bdca4f6f8.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef6a52292f6bdca4f6f8.md
new file mode 100644
index 00000000000..678fd1314fc
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef6a52292f6bdca4f6f8.md
@@ -0,0 +1,292 @@
+---
+id: 62a8ef6a52292f6bdca4f6f8
+title: Step 129
+challengeType: 0
+dashedName: step-129
+---
+
+# --description--
+
+Set `xp` to `xp` plus the monster's level.
+
+# --hints--
+
+You should use compound assignment to modify `xp`.
+
+```js
+assert.match(defeatMonster.toString(), /xp\s*\+=/);
+```
+
+You should add the monster's level to `xp`.
+
+```js
+assert.match(defeatMonster.toString(), /xp\s*\+=\s*monsters\[fighting\]\.level/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    defeatMonster();
+  }
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+--fcc-editable-region--
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+
+}
+--fcc-editable-region--
+
+function lose() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef8f0c76a46cd221a68c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef8f0c76a46cd221a68c.md
new file mode 100644
index 00000000000..c2913614de6
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8ef8f0c76a46cd221a68c.md
@@ -0,0 +1,293 @@
+---
+id: 62a8ef8f0c76a46cd221a68c
+title: Step 130
+challengeType: 0
+dashedName: step-130
+---
+
+# --description--
+
+Now update `goldText` and `xpText` to display the updated values.
+
+# --hints--
+
+You should update `goldText.innerText` to the value of `gold`.
+
+```js
+assert.match(defeatMonster.toString(), /goldText\.innerText\s*=\s*gold/);
+```
+
+You should update `xpText.innerText` to the value of `xp`.
+
+```js
+assert.match(defeatMonster.toString(), /xpText\.innerText\s*=\s*xp/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    defeatMonster();
+  }
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+--fcc-editable-region--
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+
+}
+--fcc-editable-region--
+
+function lose() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8efb0e3ce826db8daf80f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8efb0e3ce826db8daf80f.md
new file mode 100644
index 00000000000..0101b5e2285
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8efb0e3ce826db8daf80f.md
@@ -0,0 +1,295 @@
+---
+id: 62a8efb0e3ce826db8daf80f
+title: Step 131
+challengeType: 0
+dashedName: step-131
+---
+
+# --description--
+
+Finish the `defeatMonster` function by calling the `update` function with `locations[4]` as the argument.
+
+# --hints--
+
+You should call the `update` function.
+
+```js
+assert.match(defeatMonster.toString(), /update/);
+```
+
+You should pass `locations[4]` as the argument.
+
+```js
+assert.match(defeatMonster.toString(), /update\(locations\[4\]\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    defeatMonster();
+  }
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+--fcc-editable-region--
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+
+}
+--fcc-editable-region--
+
+function lose() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eff21c0b0f6ebe5b8e38.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eff21c0b0f6ebe5b8e38.md
new file mode 100644
index 00000000000..93d46489227
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8eff21c0b0f6ebe5b8e38.md
@@ -0,0 +1,319 @@
+---
+id: 62a8eff21c0b0f6ebe5b8e38
+title: Step 132
+challengeType: 0
+dashedName: step-132
+---
+
+# --description--
+
+Your `locations` array doesn't have a fifth element, so `locations[4]` doesn't work. Add a new object at the end of the `locations` array, following the same structure as the other objects. Set `name` to `kill monster`, set `button text` to an array with three `Go to town square` strings, set `button functions` to an array with three `goTown` variables, and set `text` to `The monster screams Arg! as it dies. You gain experience points and find gold.`.
+
+# --hints--
+
+Your `locations` array should have five values.
+
+```js
+assert.lengthOf(locations, 5);
+```
+
+Your fifth `locations` value should be an object.
+
+```js
+assert.isObject(locations[4]);
+```
+
+Your fifth `locations` value should have a `name` property with the value `kill monster`.
+
+```js
+assert.equal(locations[4].name, 'kill monster');
+```
+
+Your fifth `locations` value should have a `button text` property with the value an array with three `Go to town square` strings.
+
+```js
+assert.deepEqual(locations[4]["button text"], ['Go to town square', 'Go to town square', 'Go to town square']);
+```
+
+Your fifth `locations` value should have a `button functions` property with the value an array with three `goTown` variables.
+
+```js
+assert.deepEqual(locations[4]["button functions"], [goTown, goTown, goTown]);
+```
+
+Your fifth `locations` value should have a `text` property with the value `The monster screams Arg! as it dies. You gain experience points and find gold.`.
+
+```js
+assert.equal(locations[4].text, 'The monster screams Arg! as it dies. You gain experience points and find gold.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+--fcc-editable-region--
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    }
+];
+--fcc-editable-region--
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    defeatMonster();
+  }
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f06fb318666fef69f91e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f06fb318666fef69f91e.md
new file mode 100644
index 00000000000..ad30c67858d
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f06fb318666fef69f91e.md
@@ -0,0 +1,301 @@
+---
+id: 62a8f06fb318666fef69f91e
+title: Step 133
+challengeType: 0
+dashedName: step-133
+---
+
+# --description--
+
+The word `Arg!` should have quotes around it. Besides escaping quotes, there is another way you can include quotation marks inside a string. Change the double quotes around the string `The monster screams Arg! as it dies. You gain experience points and find gold.` to single quotes `'`, then add double quotes around `Arg!`.
+
+# --hints--
+
+You should use single quotes around the string.
+
+```js
+assert.match(code, /'The monster screams "?Arg!"? as it dies. You gain experience points and find gold.'/);
+```
+
+You should use double quotes around `Arg!`.
+
+```js
+assert.equal(locations[4].text, 'The monster screams "Arg!" as it dies. You gain experience points and find gold.');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+--fcc-editable-region--
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: "The monster screams Arg! as it dies. You gain experience points and find gold."
+    }
+--fcc-editable-region--
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    defeatMonster();
+  }
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f14fe6d1fc72454648c7.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f14fe6d1fc72454648c7.md
new file mode 100644
index 00000000000..ee850581fa7
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f14fe6d1fc72454648c7.md
@@ -0,0 +1,308 @@
+---
+id: 62a8f14fe6d1fc72454648c7
+title: Step 134
+challengeType: 0
+dashedName: step-134
+---
+
+# --description--
+
+After a monster is defeated, the monster's stat box should no longer display. On the first line of the `update` function, use `monsterStats.style.display` to change the `display` value to `none`.
+
+# --hints--
+
+You should use `monsterStats.style.display` in the `update` function.
+
+```js
+assert.match(update.toString(), /monsterStats\.style\.display/);
+```
+
+You should set `monsterStats.style.display` to `none`.
+
+```js
+assert.match(update.toString(), /monsterStats\.style\.display\s*=\s*('|")none\1/);
+```
+
+This should be the first line of the `update` function.
+
+```js
+assert.match(update.toString(), /update\s*\(\s*location\s*\)\s*\{\s*monsterStats\.style\.display\s*=\s*('|")none\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+--fcc-editable-region--
+function update(location) {
+
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+--fcc-editable-region--
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    defeatMonster();
+  }
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f1d5f5ddbf74c07f733b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f1d5f5ddbf74c07f733b.md
new file mode 100644
index 00000000000..de99851e153
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f1d5f5ddbf74c07f733b.md
@@ -0,0 +1,296 @@
+---
+id: 62a8f1d5f5ddbf74c07f733b
+title: Step 135
+challengeType: 0
+dashedName: step-135
+---
+
+# --description--
+
+In the `lose` function, call the `update` function and pass in the sixth object of your `locations` array. Note that you haven't created this object just yet.
+
+# --hints--
+
+Test 1
+
+```js
+
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    defeatMonster();
+  }
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+--fcc-editable-region--
+function lose() {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f20463b324759953edad.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f20463b324759953edad.md
new file mode 100644
index 00000000000..097ae332be3
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f20463b324759953edad.md
@@ -0,0 +1,356 @@
+---
+id: 62a8f20463b324759953edad
+title: Step 136
+challengeType: 0
+dashedName: step-136
+---
+
+# --description--
+
+At the end of your code, create a `restart` function. Inside this function, set `xp` to `0`, `health` to `100`, `gold` to `50`, `currentWeapon` to `0`, and set `inventory` to an array with the string `stick`.
+
+Also update the `innerText` properties of `goldText`, `healthText`, and `xpText` to their current values.
+
+Finally, call the `goTown()` function.
+
+# --hints--
+
+You should use the `function` keyword to declare `restart`.
+
+```js
+assert.match(code, /function\s+restart/);
+```
+
+Your `restart` function should set `xp` to `0`.
+
+```js
+assert.match(restart.toString(), /xp\s*=\s*0/);
+```
+
+Your `restart` function should set `health` to `100`.
+
+```js
+assert.match(restart.toString(), /health\s*=\s*100/);
+```
+
+Your `restart` function should set `gold` to `50`.
+
+```js
+assert.match(restart.toString(), /gold\s*=\s*50/);
+```
+
+Your `restart` function should set `currentWeapon` to `0`.
+
+```js
+assert.match(restart.toString(), /currentWeapon\s*=\s*0/);
+```
+
+Your `restart` function should set `inventory` to an array with the string `stick`.
+
+```js
+assert.match(restart.toString(), /inventory\s*=\s*\[\s*('|")stick\1\s*\]/);
+```
+
+Your `restart` function should call the `goTown()` function.
+
+```js
+assert.match(restart.toString(), /goTown\(\)/);
+```
+
+You should set `goldText.innerText` to the value of `gold`.
+
+```js
+assert.match(restart.toString(), /goldText\.innerText\s*=\s*gold/);
+```
+
+You should set `healthText.innerText` to the value of `health`.
+
+```js
+assert.match(restart.toString(), /healthText\.innerText\s*=\s*health/);
+```
+
+You should set `xpText.innerText` to the value of `xp`.
+
+```js
+assert.match(restart.toString(), /xpText\.innerText\s*=\s*xp/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    defeatMonster();
+  }
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
new file mode 100644
index 00000000000..84ad6a8fbc2
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f256b813a476cae51f49.md
@@ -0,0 +1,353 @@
+---
+id: 62a8f256b813a476cae51f49
+title: Step 138
+challengeType: 0
+dashedName: step-138
+---
+
+# --description--
+
+Back to your `attack` function - inside the `else if` block, create another `if` and `else` statement. If the player is fighting the dragon (`fighting` would be `2`), call the `winGame` function. Move the `defeatMonster()` call to the `else` block.
+
+Here is an example that checks if `num` is equal to `5`:
+
+```js
+if (num === 5) {
+
+} else {
+
+}
+```
+
+# --hints--
+
+You should add a new `if` statement in your `else if` block.
+
+```js
+const block = attack.toString().split("else if");
+assert.include(block[1], "if");
+```
+
+Your new `if` statement should check if `fighting` is equal to `2`.
+
+```js
+const block = attack.toString().split("else if");
+assert.match(block[1], /if\s*\(\s*fighting\s*===\s*2\s*\)/);
+```
+
+You should call the `winGame` function in your `if` block.
+
+```js
+const block = attack.toString().split("else if");
+assert.match(block[1], /if\s*\(\s*fighting\s*===\s*2\s*\)\s*\{\s*winGame\(\)/);
+```
+
+You should add an `else` block.
+
+```js
+const block = attack.toString().split("else if");
+assert.include(block[1], "else");
+```
+
+Your `else` block should call the `defeatMonster` function.
+
+```js
+const block = attack.toString().split("else if");
+assert.match(block[1], /else\s*\{\s*defeatMonster\(\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    defeatMonster();
+  }
+}
+--fcc-editable-region--
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md
new file mode 100644
index 00000000000..cd564871491
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f2bc37675e77d5835235.md
@@ -0,0 +1,355 @@
+---
+id: 62a8f2bc37675e77d5835235
+title: Step 139
+challengeType: 0
+dashedName: step-139
+---
+
+# --description--
+
+JavaScript has a conditional operator called the <dfn>ternary operator</dfn>. This can be used as a one-line `if-else` expression. The syntax is: `condition ? true : false`.
+
+Here is an example of an `if-else` expression changed to a ternary:
+
+```js
+if (num > 5) {
+  bigger()
+} else {
+  smaller()
+}
+
+num > 5 ? bigger() : smaller();
+```
+
+Change your new `if-else` expression to a ternary.
+
+# --hints--
+
+You should remove the `if` and `else` from your `else if` block.
+
+```js
+const block = attack.toString().split("else if");
+assert.notMatch(block[1], /if/);
+assert.notMatch(block[1], /else/);
+```
+
+You should check if `fighting` is equal to `2`.
+
+```js
+const block = attack.toString().split("else if");
+assert.match(block[1], /fighting\s*===\s*2/);
+```
+
+Using the ternary syntax, you should call `winGame` if `fighting` is equal to `2`.
+
+```js
+const block = attack.toString().split("else if");
+assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)/);
+```
+
+Using the ternary syntax, you should call `defeatMonster` if `fighting` is not equal to `2`.
+
+```js
+const block = attack.toString().split("else if");
+assert.match(block[1], /fighting\s*===\s*2\s*\?\s*winGame\(\)\s*\:\s*defeatMonster\(\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    if (fighting === 2) {
+      winGame();
+    } else {
+      defeatMonster();
+    }
+  }
+}
+--fcc-editable-region--
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f35bde1750791f58773f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f35bde1750791f58773f.md
new file mode 100644
index 00000000000..6cf34e927c5
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a8f35bde1750791f58773f.md
@@ -0,0 +1,322 @@
+---
+id: 62a8f35bde1750791f58773f
+title: Step 140
+challengeType: 0
+dashedName: step-140
+---
+
+# --description--
+
+After the `lose` function, create a function called `winGame`. Inside the `winGame` function, call the `update` function and pass in `locations[6]`.
+
+# --hints--
+
+You should use the `function` keyword to declare `winGame`.
+
+```js
+assert.match(code, /function\s+winGame/);
+```
+
+Your `winGame` function should call the `update` function and pass in `locations[6]`.
+
+```js
+assert.match(winGame.toString(), /update\s*\(\s*locations\[6\]\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a94114ce0b8918b487390f.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a94114ce0b8918b487390f.md
new file mode 100644
index 00000000000..8522ebd7445
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62a94114ce0b8918b487390f.md
@@ -0,0 +1,348 @@
+---
+id: 62a94114ce0b8918b487390f
+title: Step 141
+challengeType: 0
+dashedName: step-141
+---
+
+# --description--
+
+Add another object in the `locations` array. Everything should be the same as the `lose` object, except the `name` should be `win` and the `text` should be `You defeat the dragon! YOU WIN THE GAME! 🎉`.
+
+# --hints--
+
+You should have seven values in the `locations` array.
+
+```js
+assert.lengthOf(locations, 7);
+```
+
+Your seventh `locations` value should be an object.
+
+```js
+assert.isObject(locations[6]);
+```
+
+Your seventh `locations` value should have a `name` property with the value `win`.
+
+```js
+assert.equal(locations[6].name, 'win');
+```
+
+Your seventh `locations` value should have a `button text` property with the value an array with three `REPLAY?` strings.
+
+```js
+assert.deepEqual(locations[6]["button text"], ['REPLAY?', 'REPLAY?', 'REPLAY?']);
+```
+
+Your seventh `locations` value should have a `button functions` property with the value an array with three `restart` variables.
+
+```js
+assert.deepEqual(locations[6]["button functions"], [restart, restart, restart]);
+```
+
+Your seventh `locations` value should have a `text` property with the value `You defeat the dragon! YOU WIN THE GAME! 🎉`.
+
+```js
+assert.equal(locations[6].text, 'You defeat the dragon! YOU WIN THE GAME! 🎉');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+--fcc-editable-region--
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    }
+--fcc-editable-region--
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1cea594f152ba626b872.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1cea594f152ba626b872.md
new file mode 100644
index 00000000000..d38e7a2c1e2
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1cea594f152ba626b872.md
@@ -0,0 +1,326 @@
+---
+id: 62aa1cea594f152ba626b872
+title: Step 142
+challengeType: 0
+dashedName: step-142
+---
+
+# --description--
+
+Your game could be complete now, but you can also make it more interesting.
+
+Inside your `attack` function, change your `health -= monsters[fighting].level;` line to `health -= getMonsterAttackValue(monsters[fighting].level);`. This sets `health` equal to `health` minus the return value of the `getMonsterAttackValue` function, and passes the `level` of the monster as an argument.
+
+# --hints--
+
+You should update your `health` line to be `health -= getMonsterAttackValue(monsters[fighting].level);`.
+
+```js
+assert.match(attack.toString(), /health\s*-=\s*getMonsterAttackValue\(monsters\[fighting\].level\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+}
+--fcc-editable-region--
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d6736ba262cfa74344b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d6736ba262cfa74344b.md
new file mode 100644
index 00000000000..1dd06a164f4
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d6736ba262cfa74344b.md
@@ -0,0 +1,332 @@
+---
+id: 62aa1d6736ba262cfa74344b
+title: Step 143
+challengeType: 0
+dashedName: step-143
+---
+
+# --description--
+
+Below your `attack` function, create an empty function named `getMonsterAttackValue`. It should take `level` as a parameter.
+
+# --hints--
+
+You should use the `function` keyword to declare `getMonsterAttackValue`.
+
+```js
+assert.match(code, /function\s+getMonsterAttackValue/);
+```
+
+Your `getMonsterAttackValue` should take `level` as a parameter.
+
+```js
+assert.match(code, /getMonsterAttackValue\(\s*level\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d9f535e102e4663e7a6.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d9f535e102e4663e7a6.md
new file mode 100644
index 00000000000..62f2bd62862
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1d9f535e102e4663e7a6.md
@@ -0,0 +1,342 @@
+---
+id: 62aa1d9f535e102e4663e7a6
+title: Step 144
+challengeType: 0
+dashedName: step-144
+---
+
+# --description--
+
+The attack of the monster will be based on the monster's `level` and the player's `xp`. In the `getMonsterAttackValue` function, use `const` to create a variable called `hit`. Assign it the equation `(level * 5) - (Math.floor(Math.random() * xp));`.
+
+This will set the monster's attack to five times their `level` minus a random number between 0 and the player's `xp`.
+
+# --hints--
+
+You should use `const` to declare the variable `hit`.
+
+```js
+assert.match(code, /const\s*hit/);
+```
+
+You should use the equation `(level * 5) - (Math.floor(Math.random() * xp))`.
+
+```js
+assert.match(getMonsterAttackValue, /(level\s*\*\s*5)\s*-\s*(Math.floor\(Math.random\(\)\s*\*\s*xp\))/);
+```
+
+You should set `hit` to the value of `(level * 5) - (Math.floor(Math.random() * xp))`.
+
+```js
+assert.match(code, /hit\s*=\s*\(level\s*\*\s*5\)\s*-\s*\(Math.floor\(Math.random\(\)\s*\*\s*xp\)\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+}
+
+--fcc-editable-region--
+function getMonsterAttackValue(level) {
+
+}
+--fcc-editable-region--
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e3c7c3d552fb04f0f18.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e3c7c3d552fb04f0f18.md
new file mode 100644
index 00000000000..0e1f69267c5
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e3c7c3d552fb04f0f18.md
@@ -0,0 +1,328 @@
+---
+id: 62aa1e3c7c3d552fb04f0f18
+title: Step 145
+challengeType: 0
+dashedName: step-145
+---
+
+# --description--
+
+Log the value of `hit` to the console to use in debugging. Remember that you can do this with `console.log()`.
+
+# --hints--
+
+You should use the `console.log()` function to log the value of `hit`.
+
+```js
+assert.match(getMonsterAttackValue.toString(), /console\.log\(\s*hit\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+}
+
+--fcc-editable-region--
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+}
+--fcc-editable-region--
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e8ccd579330e097ce44.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e8ccd579330e097ce44.md
new file mode 100644
index 00000000000..bcc2b14ee5a
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1e8ccd579330e097ce44.md
@@ -0,0 +1,338 @@
+---
+id: 62aa1e8ccd579330e097ce44
+title: Step 146
+challengeType: 0
+dashedName: step-146
+---
+
+# --description--
+
+Functions run specific blocks of code when they are called, but they can also <dfn>return</dfn> a value. This value can be assigned to a variable and used elsewhere in your code.
+
+Use the `return` keyword to return the value of `hit` at the end of the function.
+
+# --hints--
+
+You should use the `return` keyword to return the value of `hit`.
+
+```js
+assert.match(getMonsterAttackValue, /return\s*hit/);
+```
+
+Your function should return the expected value.
+
+```js
+xp = 0;
+assert.equal(getMonsterAttackValue(1), 5);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+}
+
+--fcc-editable-region--
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+}
+--fcc-editable-region--
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1eec891ed731db227a36.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1eec891ed731db227a36.md
new file mode 100644
index 00000000000..725aa7e720a
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1eec891ed731db227a36.md
@@ -0,0 +1,350 @@
+---
+id: 62aa1eec891ed731db227a36
+title: Step 147
+challengeType: 0
+dashedName: step-147
+---
+
+# --description--
+
+If you play the game in its current state you might notice a bug. If your `xp` is high enough, the `getMonsterAttackValue` function will return a negative number, which will actually add to your total health when fighting a monster!
+
+In `getMonsterAttackValue`, change `return hit` to a ternary operator that returns `hit` if `hit` is greater than `0`, or returns `0` if it is not.
+
+Here is an example of returning a value based on `condition` with a ternary:
+
+```js
+return condition ? true : false;
+```
+
+# --hints--
+
+You should use a ternary to change the `return` value if `hit` is greater than `0`.
+
+```js
+assert.match(getMonsterAttackValue.toString(), /return\s+hit\s*>\s*0/);
+```
+
+You should use a ternary to return `hit` if `hit` is greater than `0`
+
+```js
+assert.match(getMonsterAttackValue.toString(), /return\s+hit\s*>\s*0\s*\?\s*hit/);
+```
+
+You should use a ternary to return `0` if `hit` is not greater than `0`.
+
+```js
+assert.match(getMonsterAttackValue.toString(), /return\s+hit\s*>\s*0\s*\?\s*hit\s*:\s*0/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+}
+
+--fcc-editable-region--
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit;
+}
+--fcc-editable-region--
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1fed3d4e873366ff3131.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1fed3d4e873366ff3131.md
new file mode 100644
index 00000000000..97ce39a4821
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa1fed3d4e873366ff3131.md
@@ -0,0 +1,331 @@
+---
+id: 62aa1fed3d4e873366ff3131
+title: Step 148
+challengeType: 0
+dashedName: step-148
+---
+
+# --description--
+
+In your `attack` function, below the `health` variable create an `if` statement. Set the condition to call the `isMonsterHit` function.
+
+# --hints--
+
+You should add an `if` statement which calls `isMonsterHit` in the condition.
+
+```js
+assert.match(attack.toString(), /if\s*\(\s*isMonsterHit\s*\(\s*\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+}
+--fcc-editable-region--
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa204c1e1d33348ff09944.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa204c1e1d33348ff09944.md
new file mode 100644
index 00000000000..6b3bc12e219
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa204c1e1d33348ff09944.md
@@ -0,0 +1,333 @@
+---
+id: 62aa204c1e1d33348ff09944
+title: Step 149
+challengeType: 0
+dashedName: step-149
+---
+
+# --description--
+
+Move your `monsterHealth` assignment into your `if` block.
+
+# --hints--
+
+You should move your `monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1` into your `if` block.
+
+```js
+assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+
+  }
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+}
+--fcc-editable-region--
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
new file mode 100644
index 00000000000..8bf8c85ac0e
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa20e9cf1be9358f5aceae.md
@@ -0,0 +1,338 @@
+---
+id: 62aa20e9cf1be9358f5aceae
+title: Step 150
+challengeType: 0
+dashedName: step-150
+---
+
+# --description--
+
+Add an `else` statement to your `if` statement. In the `else` statement, use the `+=` operator to add the text `You miss.` to the end of `text.innerText`.
+
+# --hints--
+
+You should add an `else` block after your `if (isMonsterHit())` block.
+
+```js
+assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else/)
+```
+
+You should add the text `You miss.` to the end of `text.innerText`. Remember to use compound assignment.
+
+```js
+assert.match(attack.toString(), /if\s*\(isMonsterHit\(\)\s*\)\s*\{\s*monsterHealth\s*-=\s*weapons\[currentWeapon\]\.power\s*\+\s*Math\.floor\(Math\.random\(\)\s*\*\s*xp\)\s*\+\s*1;\s*\}\s*else\s*\{\s*text\.innerText\s*\+=\s*('|")\sYou miss\.\1/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+}
+--fcc-editable-region--
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2136fc49b836dfedb959.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2136fc49b836dfedb959.md
new file mode 100644
index 00000000000..7a5d427b22f
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2136fc49b836dfedb959.md
@@ -0,0 +1,342 @@
+---
+id: 62aa2136fc49b836dfedb959
+title: Step 151
+challengeType: 0
+dashedName: step-151
+---
+
+# --description--
+
+Now create the `isMonsterHit` function. This will return a <dfn>boolean</dfn> value (true or false) to be used in your `if` statement. Return the result of the comparison `Math.random() > .2`.
+
+# --hints--
+
+You should use the `function` keyword to declare `isMonsterHit`.
+
+```js
+assert.match(code, /function\s+isMonsterHit/);
+```
+
+Your `isMonsterHit` function should return the result of the comparison `Math.random() > .2`.
+
+```js
+assert.match(isMonsterHit.toString(), /return\s*Math\.random\(\)\s*>\s*0?\.2/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21971e3b743844849985.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21971e3b743844849985.md
new file mode 100644
index 00000000000..2db80762083
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21971e3b743844849985.md
@@ -0,0 +1,354 @@
+---
+id: 62aa21971e3b743844849985
+title: Step 152
+challengeType: 0
+dashedName: step-152
+---
+
+# --description--
+
+The player should hit if either `Math.random() > .2` **or** if the player's health is less than 20. At the end of your `return` statement, use the <dfn>logical or</dfn> operator `||` and check if `health` is less than `20`.
+
+The logical or operator will use the first value if it is truthy, otherwise it will use the second value.
+
+For example: `num < 10 || num > 20`.
+
+# --hints--
+
+Your `isMonsterHit` function should use the logical or operator.
+
+```js
+assert.match(isMonsterHit.toString(), /\|\|/);
+```
+
+Your logical or operator should use `health < 20` as the fallback value.
+
+```js
+assert.match(isMonsterHit.toString(), /\|\|\s*health\s*<\s*20/);
+```
+
+Your function should return the result of the comparison `Math.random() > .2` **or** `health < 20`.
+
+```js
+assert.match(isMonsterHit.toString(), /return\s*Math\.random\(\)\s*>\s*0?\.2\s*\|\|\s*health\s*<\s*20/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+--fcc-editable-region--
+function isMonsterHit() {
+  return Math.random() > .2;
+}
+--fcc-editable-region--
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21ea8d9d9f396b95dd87.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21ea8d9d9f396b95dd87.md
new file mode 100644
index 00000000000..34820846dd6
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa21ea8d9d9f396b95dd87.md
@@ -0,0 +1,346 @@
+---
+id: 62aa21ea8d9d9f396b95dd87
+title: Step 153
+challengeType: 0
+dashedName: step-153
+---
+
+# --description--
+
+On every attack, there should be a chance that the player's weapon breaks. At the end of the `attack` function, add an empty `if` expression with the condition `Math.random() <= .1`.
+
+# --hints--
+
+You should add an `if` statement to your `attack` function.
+
+```js
+const ifs = attack.toString().match(/if/g);
+assert.lengthOf(ifs, 4);
+```
+
+Your new `if` statement should check `Math.random() <= .1`.
+
+```js
+assert.match(attack.toString(), /if\s*\(\s*Math\.random\(\)\s*<=\s*0?\.1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+
+}
+--fcc-editable-region--
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa226207f33d3ad4c6f546.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa226207f33d3ad4c6f546.md
new file mode 100644
index 00000000000..02ffeb838f6
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa226207f33d3ad4c6f546.md
@@ -0,0 +1,367 @@
+---
+id: 62aa226207f33d3ad4c6f546
+title: Step 154
+challengeType: 0
+dashedName: step-154
+---
+
+# --description--
+
+Use the `+=` operator to add `Your [weapon] breaks.` to the end of `text.innerText`, replacing `weapon` with the last item in the `inventory` array. You can get this last item by using `inventory.pop()`, which will remove the last item in the array AND return it so it appears in your string.
+
+# --hints--
+
+You should use the compound assignment operator to modify `text.innerText`.
+
+```js
+const concat = attack.toString().match(/\+=/g);
+assert.lengthOf(concat, 3);
+```
+
+You should use the `pop` method on the `inventory` array.
+
+```js
+assert.match(attack.toString(), /inventory\.pop\(\)/);
+```
+
+You should add the string " Your " to `text.innerText`. Remember that spacing matters.
+
+```js
+assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|")\sYour\s\1/);
+```
+
+You should add the return value of `inventory.pop()` to the `Your` string.
+
+```js
+console.log(attack.toString());
+assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|")\sYour\s\1\s*\+\s*inventory\.pop\(\)/);
+```
+
+You should add `breaks.` to the `"Your " + inventory.pop()` string.
+
+```js
+assert.match(attack.toString(), /text\.innerText\s*\+=\s*('|")\sYour\s\1\s*\+\s*inventory\.pop\(\)\s*\+\s*('|")\sbreaks\.\2/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1) {
+
+  }
+}
+--fcc-editable-region--
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa22aba186563bcbf2c395.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa22aba186563bcbf2c395.md
new file mode 100644
index 00000000000..44980b592f0
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa22aba186563bcbf2c395.md
@@ -0,0 +1,350 @@
+---
+id: 62aa22aba186563bcbf2c395
+title: Step 155
+challengeType: 0
+dashedName: step-155
+---
+
+# --description--
+
+Remember that the increment operator `++` can be used to increase a variable's value by 1. There is also a <dfn>decrement operator</dfn> `--` that can be used to decrease a variable's value by 1.
+
+Decrement the value of `currentWeapon` in your `if` statement, after you update the text.
+
+# --hints--
+
+You should use the decrement operator.
+
+```js
+assert.match(attack.toString(), /--/);
+```
+
+You should decrement `currentWeapon` in your `if` statement.
+
+```js
+assert.match(attack.toString(), /currentWeapon\s*--/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+
+  }
+}
+--fcc-editable-region--
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa234322d4ad3e8bce42cc.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa234322d4ad3e8bce42cc.md
new file mode 100644
index 00000000000..c801177ae2d
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa234322d4ad3e8bce42cc.md
@@ -0,0 +1,364 @@
+---
+id: 62aa234322d4ad3e8bce42cc
+title: Step 156
+challengeType: 0
+dashedName: step-156
+---
+
+# --description--
+
+We don't want a player's only weapon to break. The logical AND operator checks if two statements are true.
+
+Use the <dfn>logical AND</dfn> operator `&&` to add a second condition to your `if` statement. The player's weapon should only break if `inventory.length` does not equal (`!==`) one.
+
+Here is an example of an `if` statement with two conditions:
+
+```js
+if (firstName === "Quincy" && lastName === "Larson") {
+
+}
+```
+
+# --hints--
+
+You should not modify your existing `if` statement.
+
+```js
+assert.match(attack.toString(), /if\s*\(Math\.random\(\)\s*\<=\s*\.1/);
+```
+
+You should use the logical AND operator `&&`.
+
+```js
+assert.match(attack.toString(), /if\s*\(Math\.random\(\)\s*\<=\s*\.1\s*&&/);
+```
+
+You should use the logical AND operator to check if `inventory.length` does not equal `1`.
+
+```js
+assert.match(attack.toString(), /if\s*\(Math\.random\(\)\s*\<=\s*\.1\s*&&\s*inventory\.length\s*\!\=\=\s*1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+--fcc-editable-region--
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+--fcc-editable-region--
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2469c77b363fdb4f0e06.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2469c77b363fdb4f0e06.md
new file mode 100644
index 00000000000..10cb8603022
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2469c77b363fdb4f0e06.md
@@ -0,0 +1,358 @@
+---
+id: 62aa2469c77b363fdb4f0e06
+title: Step 157
+challengeType: 0
+dashedName: step-157
+---
+
+# --description--
+
+Now you can add a small easter egg (hidden feature) to your game.
+
+Create a new function called `easterEgg` which calls the `update` function with `locations[7]` as the argument.
+
+# --hints--
+
+You should use the `function` keyword to declare `easterEgg`.
+
+```js
+assert.match(code, /function\s+easterEgg\s*/);
+```
+
+`easterEgg` should call the `update` function.
+
+```js
+assert.match(easterEgg.toString(), /update\(/);
+```
+
+`easterEgg` should call the `update` function with `locations[7]` as the argument.
+
+```js
+assert.match(easterEgg.toString(), /update\(\s*locations\[7\]\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa252c3b1073415ba2b898.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa252c3b1073415ba2b898.md
new file mode 100644
index 00000000000..a502101c334
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa252c3b1073415ba2b898.md
@@ -0,0 +1,355 @@
+---
+id: 62aa252c3b1073415ba2b898
+title: Step 158
+challengeType: 0
+dashedName: step-158
+---
+
+# --description--
+
+Create an empty `pick` function with a parameter named `guess`.
+
+# --hints--
+
+You should use the `function` keyword to declare `pick`.
+
+```js
+assert.match(code, /function\s+pick\s*/);
+```
+
+`pick` should take a parameter named `guess`.
+
+```js
+assert.match(pick.toString(), /pick\s*\(\s*guess\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa258da314ef42ba0a1858.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa258da314ef42ba0a1858.md
new file mode 100644
index 00000000000..5f657de3877
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa258da314ef42ba0a1858.md
@@ -0,0 +1,384 @@
+---
+id: 62aa258da314ef42ba0a1858
+title: Step 159
+challengeType: 0
+dashedName: step-159
+---
+
+# --description--
+
+Create two new functions named `pickTwo` and `pickEight`.
+
+Inside each of those, call the `pick()` function and pass either `2` or `8` as the argument depending on the function name.
+
+# --hints--
+
+You should use the `function` keyword to declare `pickTwo`.
+
+```js
+assert.match(code, /function\s+pickTwo\s*/);
+```
+
+You should use the `function` keyword to declare `pickEight`.
+
+```js
+assert.match(code, /function\s+pickEight\s*/);
+```
+
+`pickTwo` should call the `pick` function.
+
+```js
+assert.match(pickTwo.toString(), /pick\(/);
+```
+
+`pickTwo` should call the `pick` function with `2` as the argument.
+
+```js
+assert.match(pickTwo.toString(), /pick\(\s*2\s*\)/);
+```
+
+`pickEight` should call the `pick` function.
+
+```js
+assert.match(pickEight.toString(), /pick\(/);
+```
+
+`pickEight` should call the `pick` function with `8` as the argument.
+
+```js
+assert.match(pickEight.toString(), /pick\(\s*8\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+
+function pick(guess) {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
new file mode 100644
index 00000000000..01f3692b24e
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa25fcb5837d43b4d9873d.md
@@ -0,0 +1,389 @@
+---
+id: 62aa25fcb5837d43b4d9873d
+title: Step 160
+challengeType: 0
+dashedName: step-160
+---
+
+# --description--
+
+Add another object to your `locations` array. Set `name` to `easter egg`, set `button text` to an array with the strings `2`, `8`, and `Go to town square?`, set `button functions` to an array with the variables `pickTwo`, `pickEight`, and `goTown`, and `text` to `You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!`.
+
+# --hints--
+
+Your `locations` array should have 8 values.
+
+```js
+assert.lengthOf(locations, 8);
+```
+
+Your eighth `locations` value should be an object.
+
+```js
+assert.isObject(locations[7]);
+```
+
+Your eighth `locations` value should have a `name` property with the value `easter egg`.
+
+```js
+assert.equal(locations[7].name, "easter egg");
+```
+
+Your eighth `locations` value should have a `button text` property with the value an array with the strings `2`, `8`, and `Go to town square?`.
+
+```js
+assert.deepEqual(locations[7]["button text"], ["2", "8", "Go to town square?"]);
+```
+
+Your eighth `locations` value should have a `button functions` property with the value an array with the variables `pickTwo`, `pickEight`, and `goTown`.
+
+```js
+assert.deepEqual(locations[7]["button functions"], [pickTwo, pickEight, goTown]);
+```
+
+Your eighth `locations` value should have a `text` property with the value `You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!`.
+
+```js
+assert.equal(locations[7].text, "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+--fcc-editable-region--
+    }
+
+--fcc-editable-region--
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+function pick(guess) {
+
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
new file mode 100644
index 00000000000..c335f2d7bc9
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2626c3c10244b94c787b.md
@@ -0,0 +1,364 @@
+---
+id: 62aa2626c3c10244b94c787b
+title: Step 161
+challengeType: 0
+dashedName: step-161
+---
+
+# --description--
+
+Inside `pick`, use `let` to initialize a variable named `numbers` and set it to an empty array.
+
+# --hints--
+
+Your `pick` function should initalize `numbers` to an empty array `[]`.
+
+```js
+assert.match(pick.toString(), /numbers\s*=\s*\[\]/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+--fcc-editable-region--
+function pick(guess) {
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa264d23cdaa45a20efada.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa264d23cdaa45a20efada.md
new file mode 100644
index 00000000000..bb3a88b2824
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa264d23cdaa45a20efada.md
@@ -0,0 +1,381 @@
+---
+id: 62aa264d23cdaa45a20efada
+title: Step 162
+challengeType: 0
+dashedName: step-162
+---
+
+# --description--
+
+After your `numbers` array, create a `while` loop. A <dfn>while</dfn> loop accepts a condition, and will run the code in the block until the condition is no longer true.
+
+Your `while` loop should run while `numbers.length` is less than `10`.
+
+Here is an example of a `while` loop that runs while `i` is less than five.
+
+```js
+while (i < 5) {
+
+}
+```
+
+# --hints--
+
+Your `pick` function should have a `while` loop.
+
+```js
+assert.match(pick.toString(), /while\s*\(/);
+```
+
+Your `while` loop should run while `numbers.length < 10`.
+
+```js
+assert.match(pick.toString(), /while\s*\(\s*numbers.length\s*<\s*10\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+--fcc-editable-region--
+function pick(guess) {
+  let numbers = [];
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa26cca3cd3d46c431e73b.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa26cca3cd3d46c431e73b.md
new file mode 100644
index 00000000000..beace6c6228
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa26cca3cd3d46c431e73b.md
@@ -0,0 +1,379 @@
+---
+id: 62aa26cca3cd3d46c431e73b
+title: Step 163
+challengeType: 0
+dashedName: step-163
+---
+
+# --description--
+
+Inside your `while` loop, push a random number between 0 and 10 to the end of the `numbers` array. You can create this random number with `Math.floor(Math.random() * 11)`.
+
+# --hints--
+
+You should use the `push` method to add a random number to the end of the `numbers` array.
+
+```js
+assert.match(pick.toString(), /numbers\.push\(/);
+```
+
+You should use `Math.floor(Math.random() * 11)` to create the random number.
+
+```js
+assert.match(pick.toString(), /Math\.floor\(Math\.random\(\)\s*\*\s*11\s*\)/);
+```
+
+You should `push` the result of `Math.floor(Math.random() * 11)` to the end of the `numbers` array.
+
+```js
+assert.match(pick.toString(), /numbers\.push\(\s*Math\.floor\(Math\.random\(\)\s*\*\s*11\s*\)\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+--fcc-editable-region--
+function pick(guess) {
+  let numbers = [];
+  while (numbers.length < 10) {
+
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27227399d647e1c37a3c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27227399d647e1c37a3c.md
new file mode 100644
index 00000000000..c0e732491ac
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27227399d647e1c37a3c.md
@@ -0,0 +1,380 @@
+---
+id: 62aa27227399d647e1c37a3c
+title: Step 164
+challengeType: 0
+dashedName: step-164
+---
+
+# --description--
+
+After the `while` loop, set `text.innerText` to equal `You picked [guess]. Here are the random numbers:`. Replace `guess` with the player's guess.
+
+# --hints--
+
+You should set `text.innerText` to the string `You picked`. Remember that spacing matters.
+
+```js
+assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1/);
+```
+
+You should use the concatenation operator to add the value of the `guess` parameter to your `You picked` string.
+
+```js
+assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1\s*\+\s*guess/);
+```
+
+You should use the concatenation operator to add the string `. Here are the random numbers:` to your `"You picked " + guess` string.
+
+```js
+assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1\s*\+\s*guess\s*\+\s*('|")\.\sHere are the random numbers:\2/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+--fcc-editable-region--
+function pick(guess) {
+  let numbers = [];
+  while (numbers.length < 10) {
+    numbers.push(Math.floor(Math.random() * 11));
+  }
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
new file mode 100644
index 00000000000..7b34447692f
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27560def7048d7b4a095.md
@@ -0,0 +1,368 @@
+---
+id: 62aa27560def7048d7b4a095
+title: Step 165
+challengeType: 0
+dashedName: step-165
+---
+
+# --description--
+
+Before the final quote in that string you added, insert the new line escape character `\n`. This will cause the next part you add to `text.innerText` to appear on a new line.
+
+# --hints--
+
+You should add the new line escape character `\n` to your `. Here are the random numbers:` string.
+
+```js
+assert.match(pick.toString(), /text\.innerText\s*=\s*('|")You picked \1\s*\+\s*guess\s*\+\s*('|")\.\sHere are the random numbers:\\n\2/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+--fcc-editable-region--
+function pick(guess) {
+  let numbers = [];
+  while (numbers.length < 10) {
+    numbers.push(Math.floor(Math.random() * 11));
+  }
+  text.innerText = "You picked " + guess + ". Here are the random numbers:";
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27c40ca6f04ab8be5fac.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27c40ca6f04ab8be5fac.md
new file mode 100644
index 00000000000..c57f4d75914
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa27c40ca6f04ab8be5fac.md
@@ -0,0 +1,375 @@
+---
+id: 62aa27c40ca6f04ab8be5fac
+title: Step 166
+challengeType: 0
+dashedName: step-166
+---
+
+# --description--
+
+A `for` loop runs for a specific number of times. We will break down how a `for` loop runs in the next several steps. For now, copy this loop below and paste it at the end of your `pick` function.
+
+```js
+for (let x = 1; x < 5; x++) {
+
+}
+```
+
+# --hints--
+
+You should copy the above loop into your `pick` function.
+
+```js
+assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*x\s*=\s*1\s*;\s*x\s*<\s*5\s*;\s*x\s*\+\+\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+--fcc-editable-region--
+function pick(guess) {
+  let numbers = [];
+  while (numbers.length < 10) {
+    numbers.push(Math.floor(Math.random() * 11));
+  }
+  text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28032d863d4bd8058799.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28032d863d4bd8058799.md
new file mode 100644
index 00000000000..4b4af2f8669
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28032d863d4bd8058799.md
@@ -0,0 +1,375 @@
+---
+id: 62aa28032d863d4bd8058799
+title: Step 167
+challengeType: 0
+dashedName: step-167
+---
+
+# --description--
+
+`for` loops are declared with three expressions separated by semicolons. `for (a; b; c)`, where `a` is the initialization expression, `b` is the condition, and `c` is the final expression.
+
+The initialization expression is executed only once, before the loop starts, and is often used to define and set up the loop variable. Think of it like declaring a counter to use in your loop.
+
+Many `for` loops use `i` as the counter and start from 0, so change `let x = 1;` to `let i = 0;`.
+
+# --hints--
+
+You should change your initialization in the `for` loop to be `let i = 0;`.
+
+```js
+assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*i\s*=\s*0\s*;/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+--fcc-editable-region--
+function pick(guess) {
+  let numbers = [];
+  while (numbers.length < 10) {
+    numbers.push(Math.floor(Math.random() * 11));
+  }
+  text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
+  for (let x = 1; x < 5; x++) {
+
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa287434dc284cea01157c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa287434dc284cea01157c.md
new file mode 100644
index 00000000000..7067e31d3f3
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa287434dc284cea01157c.md
@@ -0,0 +1,373 @@
+---
+id: 62aa287434dc284cea01157c
+title: Step 168
+challengeType: 0
+dashedName: step-168
+---
+
+# --description--
+
+The second statement in a `for` loop, the condition statement, is evaluated at the beginning of every loop iteration. The loop will continue as long as the condition evaluates to be true.
+
+We want the loop to run 10 times, so change `x < 5` to `i < 10`.
+
+# --hints--
+
+You should update your condition statement to be `i < 10`.
+
+```js
+assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*i\s*=\s*0\s*;\s*i\s*<\s*10\s*;/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+--fcc-editable-region--
+function pick(guess) {
+  let numbers = [];
+  while (numbers.length < 10) {
+    numbers.push(Math.floor(Math.random() * 11));
+  }
+  text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
+  for (let i = 0; x < 5; x++) {
+
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28bbd6323e4dfb3ac43e.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28bbd6323e4dfb3ac43e.md
new file mode 100644
index 00000000000..72bbc1f15f8
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28bbd6323e4dfb3ac43e.md
@@ -0,0 +1,373 @@
+---
+id: 62aa28bbd6323e4dfb3ac43e
+title: Step 169
+challengeType: 0
+dashedName: step-169
+---
+
+# --description--
+
+The last statement in a `for` loop, the final expression, is executed at the end of each loop iteration.
+
+Since we changed the initialization statement to use `i` instead of `x`, change `x++` to `i++`. This will increment the initializer `i` by 1 after each loop.
+
+# --hints--
+
+You should change your final expression to `i++`.
+
+```js
+assert.match(pick.toString(), /for\s*\(\s*(let|var)\s*i\s*=\s*0\s*;\s*i\s*<\s*10\s*;\s*i\+\+\s*\)/)
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+--fcc-editable-region--
+function pick(guess) {
+  let numbers = [];
+  while (numbers.length < 10) {
+    numbers.push(Math.floor(Math.random() * 11));
+  }
+  text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
+  for (let i = 0; i < 10; x++) {
+
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28fb651bf14efa2dbb16.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28fb651bf14efa2dbb16.md
new file mode 100644
index 00000000000..94da3ef415e
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa28fb651bf14efa2dbb16.md
@@ -0,0 +1,390 @@
+---
+id: 62aa28fb651bf14efa2dbb16
+title: Step 170
+challengeType: 0
+dashedName: step-170
+---
+
+# --description--
+
+Now you can write the logic to run in the loop. Inside your `for` loop, use the `+=` operator to add to the end of `text.innerText`. Add the number at index `i` of the `numbers` array, using `numbers[i]`. Then add a new line, using the escape sequence you used earlier.
+
+# --hints--
+
+You should use compound assignment to add to the end of `text.innerText`.
+
+```js
+assert.match(pick.toString(), /text\.innerText\s*\+=/);
+```
+
+You should use bracket notation to access `numbers[i]`.
+
+```js
+assert.match(pick.toString(), /numbers\[i\]/);
+```
+
+You should add `numbers[i]` to your `text.innerText` value.
+
+```js
+assert.match(pick.toString(), /text\.innerText\s*\+=\s*numbers\[i\]/);
+```
+
+You should add a new-line character after the `numbers[i]` value. Remember that you can do this with `\n`.
+
+```js
+console.log(pick.toString());
+assert.match(pick.toString(), /text\.innerText\s*\+=\s*numbers\[i\]\s*\+\s*('|")\\n\1/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+--fcc-editable-region--
+function pick(guess) {
+  let numbers = [];
+  while (numbers.length < 10) {
+    numbers.push(Math.floor(Math.random() * 11));
+  }
+  text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
+  for (let i = 0; i < 10; i++) {
+
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2943669c9d5026af6985.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2943669c9d5026af6985.md
new file mode 100644
index 00000000000..b1540f1ac41
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2943669c9d5026af6985.md
@@ -0,0 +1,387 @@
+---
+id: 62aa2943669c9d5026af6985
+title: Step 171
+challengeType: 0
+dashedName: step-171
+---
+
+# --description--
+
+The `indexOf()` array method returns the first index at which a given element can be found in the array, or `-1` if the element is not present.
+
+After your `for` loop, add an `if` expression to check if the `guess` is in the `numbers` array. You can check if `indexOf` is not equal (`!==`) to `-1`.
+
+Here is an example of the `indexOf` syntax:
+
+```js
+const numbers = [1, 2, 3];
+numbers.indexOf(2) // 1
+```
+
+# --hints--
+
+Your `pick` function should have an `if` statement.
+
+```js
+assert.match(pick.toString(), /if/);
+```
+
+Your `if` statement should check if the `guess` is in the `numbers` array. You can check if `indexOf` is not equal (`!==`) to `-1`.
+
+```js
+assert.match(pick.toString(), /if\s*\(numbers\.indexOf\(\s*guess\s*\)\s*!==\s*-1\s*\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+--fcc-editable-region--
+function pick(guess) {
+  let numbers = [];
+  while (numbers.length < 10) {
+    numbers.push(Math.floor(Math.random() * 11));
+  }
+  text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
+  for (let i = 0; i < 10; i++) {
+    text.innerText += numbers[i] + "\n";
+  }
+
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2999ec27ec516655eba6.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2999ec27ec516655eba6.md
new file mode 100644
index 00000000000..aa044de71f3
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2999ec27ec516655eba6.md
@@ -0,0 +1,386 @@
+---
+id: 62aa2999ec27ec516655eba6
+title: Step 172
+challengeType: 0
+dashedName: step-172
+---
+
+# --description--
+
+Inside the `if` expression, add the string `Right! You win 20 gold!` to the end of `text.innerText`. Also, add `20` to the value of `gold` and update the `goldText.innerText`.
+
+# --hints--
+
+You should use compound assignment to add the string `Right! You win 20 gold!` to the end of `text.innerText`.
+
+```js
+assert.match(pick.toString(), /text\.innerText\s*\+=\s*('|")Right! You win 20 gold!\1/);
+```
+
+You should use compound assignment add `20` to the value of `gold`.
+
+```js
+assert.match(pick.toString(), /gold\s*\+=\s*20/);
+```
+
+You should update the `goldText.innerText` to reflect the new value of `gold`.
+
+```js
+assert.match(pick.toString(), /goldText\.innerText\s*\=\s*gold/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+--fcc-editable-region--
+function pick(guess) {
+  let numbers = [];
+  while (numbers.length < 10) {
+    numbers.push(Math.floor(Math.random() * 11));
+  }
+  text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
+  for (let i = 0; i < 10; i++) {
+    text.innerText += numbers[i] + "\n";
+  }
+  if (numbers.indexOf(guess) !== -1) {
+
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa29d8f8f88152c91350ca.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa29d8f8f88152c91350ca.md
new file mode 100644
index 00000000000..13ed8152080
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa29d8f8f88152c91350ca.md
@@ -0,0 +1,394 @@
+---
+id: 62aa29d8f8f88152c91350ca
+title: Step 173
+challengeType: 0
+dashedName: step-173
+---
+
+# --description--
+
+Now add an `else` expression. Inside, add `Wrong! You lose 10 health!` to the end of `text.innerText`. Subtract `10` from `health` and update `healthText.innerText`.
+
+# --hints--
+
+You should add an `else` block.
+
+```js
+assert.match(pick.toString(), /else\s*\{/);
+```
+
+Your `else` block should use compound assignment to add `Wrong! You lose 10 health!` to the end of `text.innerText`.
+
+```js
+assert.match(pick.toString(), /text\.innerText\s*\+=\s*('|")Wrong! You lose 10 health!\1/);
+```
+
+Your `else` block should use compound assignment to subtract `10` from `health`.
+
+```js
+assert.match(pick.toString(), /health\s*-=\s*10/);
+```
+
+Your `else` block should update the `healthText.innerText` to reflect the new value of `health`.
+
+```js
+assert.match(pick.toString(), /healthText\.innerText\s*=\s*health/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+--fcc-editable-region--
+function pick(guess) {
+  let numbers = [];
+  while (numbers.length < 10) {
+    numbers.push(Math.floor(Math.random() * 11));
+  }
+  text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
+  for (let i = 0; i < 10; i++) {
+    text.innerText += numbers[i] + "\n";
+  }
+  if (numbers.indexOf(guess) !== -1) {
+    text.innerText += "Right! You win 20 gold!";
+    gold += 20;
+    goldText.innerText = gold;
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2aec2f09d454253aad6c.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2aec2f09d454253aad6c.md
new file mode 100644
index 00000000000..17491c06783
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2aec2f09d454253aad6c.md
@@ -0,0 +1,394 @@
+---
+id: 62aa2aec2f09d454253aad6c
+title: Step 174
+challengeType: 0
+dashedName: step-174
+---
+
+# --description--
+
+Since you subtracted health from the player, you need to check if the player's `health` is less than or equal to `0`. If it is, call the `lose` function.
+
+# --hints--
+
+Your `pick` function should have a second `if` statement.
+
+```js
+const match = pick.toString().match(/if/g);
+assert.isAtLeast(match.length, 2);
+```
+
+Your `if` statement should check if the player's `health` is less than or equal to `0`.
+
+```js
+assert.match(pick.toString(), /if\s*\(\s*health\s*<=\s*0\s*\)/);
+```
+
+Your `if` statement should call the `lose` function.
+
+```js
+assert.match(pick.toString(), /lose\(\)/);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+--fcc-editable-region--
+function pick(guess) {
+  let numbers = [];
+  while (numbers.length < 10) {
+    numbers.push(Math.floor(Math.random() * 11));
+  }
+  text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
+  for (let i = 0; i < 10; i++) {
+    text.innerText += numbers[i] + "\n";
+  }
+  if (numbers.indexOf(guess) !== -1) {
+    text.innerText += "Right! You win 20 gold!";
+    gold += 20;
+    goldText.innerText = gold;
+  } else {
+    text.innerText += "Wrong! You lose 10 health!";
+    health -= 10;
+    healthText.innerText = health;
+
+  }
+}
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2ba9cd881355a6f0a5a8.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2ba9cd881355a6f0a5a8.md
new file mode 100644
index 00000000000..f9bcbbb6387
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62aa2ba9cd881355a6f0a5a8.md
@@ -0,0 +1,746 @@
+---
+id: 62aa2ba9cd881355a6f0a5a8
+title: Step 175
+challengeType: 0
+dashedName: step-175
+---
+
+# --description--
+
+Looking at your `kill monster` object, `button functions` currently has three `goTown` variables. Replace the third one with `easterEgg` - this is how a player will access the hidden feature of the game. Do not change the `button text`.
+
+With this, your RPG game is complete! You can now play around - can you defeat the dragon?
+
+# --hints--
+
+You should update your fifth `locations` object to have a `button functions` property of `[goTown, goTown, easterEgg]`.
+
+```js
+assert.deepEqual(locations[4]["button functions"], [goTown, goTown, easterEgg]);
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+--fcc-editable-region--
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+--fcc-editable-region--
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+function pick(guess) {
+  let numbers = [];
+  while (numbers.length < 10) {
+    numbers.push(Math.floor(Math.random() * 11));
+  }
+  text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
+  for (let i = 0; i < 10; i++) {
+    text.innerText += numbers[i] + "\n";
+  }
+  if (numbers.indexOf(guess) !== -1) {
+    text.innerText += "Right! You win 20 gold!";
+    gold += 20;
+    goldText.innerText = gold;
+  } else {
+    text.innerText += "Wrong! You lose 10 health!";
+    health -= 10;
+    healthText.innerText = health;
+    if (health <= 0) {
+      lose();
+    }
+  }
+}
+```
+
+# --solutions--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, easterEgg],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+    {
+        name: "lose",
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"],
+        "button functions": [restart, restart, restart],
+        text: "You die. ☠️"
+    },
+    { 
+        name: "win", 
+        "button text": ["REPLAY?", "REPLAY?", "REPLAY?"], 
+        "button functions": [restart, restart, restart], 
+        text: "You defeat the dragon! YOU WIN THE GAME! 🎉" 
+    },
+    {
+        name: "easter egg",
+        "button text": ["2", "8", "Go to town square?"],
+        "button functions": [pickTwo, pickEight, goTown],
+        text: "You find a secret game. Pick a number above. Ten numbers will be randomly chosen between 0 and 10. If the number you choose matches one of the random numbers, you win!"
+    }
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= getMonsterAttackValue(monsters[fighting].level);
+  if (isMonsterHit()) {
+    monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;    
+  } else {
+    text.innerText += " You miss.";
+  }
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    fighting === 2 ? winGame() : defeatMonster();
+  }
+  if (Math.random() <= .1 && inventory.length !== 1) {
+    text.innerText += " Your " + inventory.pop() + " breaks.";
+    currentWeapon--;
+  }
+}
+
+function getMonsterAttackValue(level) {
+  const hit = (level * 5) - (Math.floor(Math.random() * xp));
+  console.log(hit);
+  return hit > 0 ? hit : 0;
+}
+
+function isMonsterHit() {
+  return Math.random() > .2 || health < 20;
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function winGame() {
+  update(locations[6]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+
+function easterEgg() {
+  update(locations[7]);
+}
+
+function pickTwo() {
+  pick(2);
+}
+
+function pickEight() {
+  pick(8);
+}
+
+function pick(guess) {
+  let numbers = [];
+  while (numbers.length < 10) {
+    numbers.push(Math.floor(Math.random() * 11));
+  }
+  text.innerText = "You picked " + guess + ". Here are the random numbers:\n";
+  for (let i = 0; i < 10; i++) {
+    text.innerText += numbers[i] + "\n";
+  }
+  if (numbers.indexOf(guess) !== -1) {
+    text.innerText += "Right! You win 20 gold!";
+    gold += 20;
+    goldText.innerText = gold;
+  } else {
+    text.innerText += "Wrong! You lose 10 health!";
+    health -= 10;
+    healthText.innerText = health;
+    if (health <= 0) {
+      lose();
+    }
+  }
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md
new file mode 100644
index 00000000000..d98f9e81298
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62b46e3a8d4be31be5af793d.md
@@ -0,0 +1,121 @@
+---
+id: 62b46e3a8d4be31be5af793d
+title: Step 30
+challengeType: 0
+dashedName: step-30
+---
+
+# --description--
+
+We have run in to a slight problem. You are trying to query your page for a button element, but your `script` tag is in the `head` of your HTML. This means your code runs before the browser has finished reading the HTML, and your `document.querySelector()` will not see the button - because the browser hasn't processed it yet.
+
+To fix this, move your `script` element out of the `head` element, and place it at the end of your `body` element (just before the closing `</body>` tag.)
+
+# --hints--
+
+Your `script` element should not be in your `head` element.
+
+```js
+const script = document.querySelector('script[data-src$="script.js"]');
+assert.notEqual(script.parentElement.tagName, "HEAD");
+```
+
+Your `script` element should come at the end of your `body` element.
+
+```js
+const script = document.querySelector('script[data-src$="script.js"]');
+assert.equal(script.previousElementSibling.tagName, "DIV");
+assert.isNull(script.nextElementSibling);
+assert.equal(script.parentElement.tagName, "BODY");
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+--fcc-editable-region--
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+    <script src="./script.js"></script>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+
+</body>
+--fcc-editable-region--
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+let button1 = document.querySelector("#button1");
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62ba17beef16c563069a65d8.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62ba17beef16c563069a65d8.md
new file mode 100644
index 00000000000..e5d8098b79a
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62ba17beef16c563069a65d8.md
@@ -0,0 +1,339 @@
+---
+id: 62ba17beef16c563069a65d8
+title: Step 137
+challengeType: 0
+dashedName: step-137
+---
+
+# --description--
+
+In the `locations` array, add another object at the end. Set the `name` property to `lose`, set `button text` to an array with three `REPLAY?` strings, set `button functions` to an array with three `restart` variables, and set `text` to `You die. ☠️`. You can copy that text to use the emote.
+
+# --hints--
+
+You should have six values in the `locations` array.
+
+```js
+assert.lengthOf(locations, 6);
+```
+
+Your sixth `locations` value should be an object.
+
+```js
+assert.isObject(locations[5]);
+```
+
+Your sixth `locations` value should have a `name` property with the value `lose`.
+
+```js
+assert.equal(locations[5].name, 'lose');
+```
+
+Your sixth `locations` value should have a `button text` property with the value an array with three `REPLAY?` strings.
+
+```js
+assert.deepEqual(locations[5]["button text"], ['REPLAY?', 'REPLAY?', 'REPLAY?']);
+```
+
+Your sixth `locations` value should have a `button functions` property with the value an array with three `restart` variables.
+
+```js
+assert.deepEqual(locations[5]["button functions"], [restart, restart, restart]);
+```
+
+Your sixth `locations` value should have a `text` property with the value `You die. ☠️`.
+
+```js
+assert.equal(locations[5].text, 'You die. ☠️');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+const button1 = document.querySelector('#button1');
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+const monsterHealthText =document.querySelector("#monsterHealth");
+const weapons = [
+  { name: 'stick', power: 5 },
+  { name: 'dagger', power: 30 },
+  { name: 'claw hammer', power: 50 },
+  { name: 'sword', power: 100 }
+];
+const monsters = [
+  {
+    name: "slime",
+    level: 2,
+    health: 15
+  },
+  {
+    name: "fanged beast",
+    level: 8,
+    health: 60
+  },
+  {
+    name: "dragon",
+    level: 20,
+    health: 300
+  }
+]
+const locations = [
+    {
+        name: "town square",
+        "button text": ["Go to store", "Go to cave", "Fight dragon"],
+        "button functions": [goStore, goCave, fightDragon],
+        text: "You are in the town square. You see a sign that says \"Store\"."
+    },
+    {
+        name: "store",
+        "button text": ["Buy 10 health (10 gold)", "Buy weapon (30 gold)", "Go to town square"],
+        "button functions": [buyHealth, buyWeapon, goTown],
+        text: "You enter the store."
+    },
+    {
+        name: "cave",
+        "button text": ["Fight slime", "Fight fanged beast", "Go to town square"],
+        "button functions": [fightSlime, fightBeast, goTown],
+        text: "You enter the cave. You see some monsters."
+    },
+    {
+        name: "fight",
+        "button text": ["Attack", "Dodge", "Run"],
+        "button functions": [attack, dodge, goTown],
+        text: "You are fighting a monster."
+    },
+    {
+        name: "kill monster",
+        "button text": ["Go to town square", "Go to town square", "Go to town square"],
+        "button functions": [goTown, goTown, goTown],
+        text: 'The monster screams "Arg!" as it dies. You gain experience points and find gold.'
+    },
+--fcc-editable-region--
+
+--fcc-editable-region--
+];
+
+// initialize buttons
+button1.onclick = goStore;
+button2.onclick = goCave;
+button3.onclick = fightDragon;
+
+function update(location) {
+  monsterStats.style.display = "none";
+  button1.innerText = location["button text"][0];
+  button2.innerText = location["button text"][1];
+  button3.innerText = location["button text"][2];
+  button1.onclick = location["button functions"][0];
+  button2.onclick = location["button functions"][1];
+  button3.onclick = location["button functions"][2];
+  text.innerText = location.text;
+}
+
+function goTown() {
+  update(locations[0]);
+}
+
+function goStore() {
+  update(locations[1]);
+}
+
+function goCave() {
+  update(locations[2]);
+}
+
+function buyHealth() {
+  if (gold >= 10) {
+    gold -= 10;
+    health += 10;
+    goldText.innerText = gold;
+    healthText.innerText = health;
+  } else {
+    text.innerText = "You do not have enough gold to buy health.";
+  }
+}
+
+function buyWeapon() {
+  if (currentWeapon < weapons.length - 1) {
+    if (gold >= 30) {
+      gold -= 30;
+      currentWeapon++;
+      goldText.innerText = gold;
+      let newWeapon = weapons[currentWeapon].name;
+      text.innerText = "You now have a " + newWeapon + ".";
+      inventory.push(newWeapon);
+      text.innerText += " In your inventory you have: " + inventory;
+    } else {
+      text.innerText = "You do not have enough gold to buy a weapon.";
+    }
+  } else {
+    text.innerText = "You already have the most powerful weapon!";
+    button2.innerText = "Sell weapon for 15 gold";
+    button2.onclick = sellWeapon;
+  }
+}
+
+function sellWeapon() {
+  if (inventory.length > 1) {
+    gold += 15;
+    goldText.innerText = gold;
+    let currentWeapon = inventory.shift();
+    text.innerText = "You sold a " + currentWeapon + ".";
+    text.innerText += " In your inventory you have: " + inventory;
+  } else {
+    text.innerText = "Don't sell your only weapon!";
+  }
+}
+
+function fightSlime() {
+  fighting = 0;
+  goFight();
+}
+
+function fightBeast() {
+  fighting = 1;
+  goFight();
+}
+
+function fightDragon() {
+  fighting = 2;
+  goFight();
+}
+
+function goFight() {
+  update(locations[3]);
+  monsterHealth = monsters[fighting].health;
+  monsterStats.style.display = "block";
+  monsterName.innerText = monsters[fighting].name;
+  monsterHealthText.innerText = monsterHealth;
+}
+
+function attack() {
+  text.innerText = "The " + monsters[fighting].name + " attacks.";
+  text.innerText += " You attack it with your " + weapons[currentWeapon].name + ".";
+  health -= monsters[fighting].level;
+  monsterHealth -= weapons[currentWeapon].power + Math.floor(Math.random() * xp) + 1;
+  healthText.innerText = health;
+  monsterHealthText.innerText = monsterHealth;
+  if (health <= 0) {
+    lose();
+  } else if (monsterHealth <= 0) {
+    defeatMonster();
+  }
+}
+
+function dodge() {
+  text.innerText = "You dodge the attack from the " + monsters[fighting].name;
+}
+
+function defeatMonster() {
+  gold += Math.floor(monsters[fighting].level * 6.7);
+  xp += monsters[fighting].level;
+  goldText.innerText = gold;
+  xpText.innerText = xp;
+  update(locations[4]);
+}
+
+function lose() {
+  update(locations[5]);
+}
+
+function restart() {
+  xp = 0;
+  health = 100;
+  gold = 50;
+  currentWeapon = 0;
+  inventory = ["stick"];
+  goldText.innerText = gold;
+  healthText.innerText = health;
+  xpText.innerText = xp;
+  goTown();
+}
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc1ee0c5a89717d4785729.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc1ee0c5a89717d4785729.md
new file mode 100644
index 00000000000..50b06ed7911
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc1ee0c5a89717d4785729.md
@@ -0,0 +1,114 @@
+---
+id: 62fc1ee0c5a89717d4785729
+title: Step 12
+challengeType: 0
+dashedName: step-12
+---
+
+# --description--
+
+Give your `#monsterStats` element the same `border` and `padding` as your `#stats` element. Set its color to `white` and give it a `red` background.
+
+# --hints--
+
+You should have a `#monsterStats` selector.
+
+```js
+const monsterStats = new __helpers.CSSHelp(document).getStyle('#monsterStats');
+assert.exists(monsterStats);
+```
+
+Your `#monsterStats` selector should have a `border` of `1px solid black`.
+
+```js
+const border = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('border');
+assert.equal(border, '1px solid black');
+```
+
+Your `#monsterStats` selector should have `5px` of padding.
+
+```js
+const padding = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('padding');
+assert.equal(padding, '5px');
+```
+
+Your `#monsterStats` selector should have a `color` of `white`.
+
+```js
+const color = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('color');
+assert.equal(color, 'white');
+```
+
+Your `#monsterStats` selector should have a `background-color` of `red`.
+
+```js
+const background = new __helpers.CSSHelp(document).getStyle('#monsterStats')?.getPropertyValue('background-color');
+assert.equal(background, 'red');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+--fcc-editable-region--
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc20387ef88d1d1998aac5.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc20387ef88d1d1998aac5.md
new file mode 100644
index 00000000000..1b122cb50c8
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc20387ef88d1d1998aac5.md
@@ -0,0 +1,127 @@
+---
+id: 62fc20387ef88d1d1998aac5
+title: Step 32
+challengeType: 0
+dashedName: step-32
+---
+
+# --description--
+
+Use `querySelector()` to get the other two button elements, using their `#button2` and `#button3` `id`s. Store them in variables called `button2` and `button3`. Remember to use `const`.
+
+# --hints--
+
+You should declare a `button2` variable with `const`.
+
+```js
+assert.match(code, /const button2/);
+```
+
+Your `button2` variable should have the value of your `#button2` element.
+
+```js
+assert.deepEqual(button2, document.querySelector('#button2'));
+```
+
+You should declare a `button3` variable with `const`.
+
+```js
+assert.match(code, /const button3/);
+```
+
+Your `button3` variable should have the value of your `#button3` element.
+
+```js
+assert.deepEqual(button3, document.querySelector('#button3'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+--fcc-editable-region--
+const button1 = document.querySelector("#button1");
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc211760bfc220f4734800.md b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc211760bfc220f4734800.md
new file mode 100644
index 00000000000..5dd815b61c0
--- /dev/null
+++ b/curriculum/challenges/arabic/15-javascript-algorithms-and-data-structures-22/learn-basic-javascript-by-building-a-role-playing-game/62fc211760bfc220f4734800.md
@@ -0,0 +1,123 @@
+---
+id: 62fc211760bfc220f4734800
+title: Step 34
+challengeType: 0
+dashedName: step-34
+---
+
+# --description--
+
+Finally, use `querySelector()` to get the `#monsterHealth` element. Because you have already declared a `monsterHealth` variable earlier, you need to use a different variable name for this element. Declare a new variable with the `const` keyword and name it `monsterHealthText`.
+
+# --hints--
+
+You should declare a `monsterHealthText` variable with `const`.
+
+```js
+assert.match(code, /const monsterHealthText/);
+```
+
+Your `monsterHealthText` variable should have the value of your `#monsterHealth` element.
+
+```js
+assert.deepEqual(monsterHealthText, document.querySelector('#monsterHealth'));
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="utf-8">
+    <link rel="stylesheet" href="./styles.css">
+    <title>RPG - Dragon Repeller</title>
+</head>
+<body>
+    <div id="game">
+        <div id="stats">
+            <span class="stat">XP: <strong><span id="xpText">0</span></strong></span>
+            <span class="stat">Health: <strong><span id="healthText">100</span></strong></span>
+            <span class="stat">Gold: <strong><span id="goldText">50</span></strong></span>
+        </div>
+        <div id="controls">
+            <button id="button1">Go to store</button>
+            <button id="button2">Go to cave</button>
+            <button id="button3">Fight dragon</button>
+        </div>
+        <div id="monsterStats">
+            <span class="stat">Monster Name: <strong><span id="monsterName"></span></strong></span>
+            <span class="stat">Health: <strong><span id="monsterHealth"></span></strong></span>
+        </div>
+        <div id="text">
+            Welcome to Dragon Repeller. You must defeat the dragon that is preventing people from leaving the town. You are in the town square. Where do you want to go? Use the buttons above.
+        </div>
+    </div>
+    <script src="./script.js"></script>
+</body>
+</html>
+```
+
+```css
+body {
+    background-color: darkblue;
+}
+
+#text {
+    background-color: black;
+    color: white;
+    padding: 10px;
+}
+
+#game {
+    max-width: 500px;
+    max-height: 400px;
+    background-color: lightgray;
+    color: white;
+    margin: 0 auto;
+    padding: 10px;
+}
+
+#controls, #stats {
+    border: 1px solid black;
+    padding: 5px;
+    color: black;
+}
+
+#monsterStats {
+    display: none;
+    border: 1px solid black;
+    padding: 5px;
+    color: white;
+    background-color: red;
+}
+
+.stat {
+    padding-right: 10px;
+}
+```
+
+```js
+let xp = 0;
+let health = 100;
+let gold = 50;
+let currentWeapon = 0;
+let fighting;
+let monsterHealth;
+let inventory = ["stick"];
+
+--fcc-editable-region--
+const button1 = document.querySelector("#button1");
+const button2 = document.querySelector("#button2");
+const button3 = document.querySelector("#button3");
+const text = document.querySelector("#text");
+const xpText = document.querySelector("#xpText");
+const healthText = document.querySelector("#healthText");
+const goldText = document.querySelector("#goldText");
+const monsterStats = document.querySelector("#monsterStats");
+const monsterName = document.querySelector("#monsterName");
+
+--fcc-editable-region--
+```
diff --git a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
index 4ffdba5ea38..a8bb0cf51a9 100644
--- a/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
+++ b/curriculum/challenges/chinese-traditional/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
@@ -91,7 +91,7 @@ const el = document.getElementById('name')
 assert(!!el && el.required)
 ```
 
-Your `#name` should be a descendant of `#survey-form`.
+你的 `#name` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #name')
@@ -119,7 +119,7 @@ const el = document.getElementById('email')
 assert(!!el && el.required)
 ```
 
-Your `#email` should be a descendant of `#survey-form`
+你的 `#email` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #email')
@@ -133,7 +133,7 @@ const el = document.getElementById('number')
 assert(!!el && el.tagName === 'INPUT')
 ```
 
-Your `#number` should be a descendant of `#survey-form`.
+你的 `#number` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #number')
@@ -203,21 +203,21 @@ const el = document.getElementById('number-label')
 assert(!!el && el.innerText.length > 0)
 ```
 
-Your `#name-label` should be a descendant of `#survey-form`.
+你的 `#name-label` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #name-label')
 assert(!!el)
 ```
 
-Your `#email-label` should be a descendant of `#survey-form`.
+你的 `#email-label` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #email-label')
 assert(!!el)
 ```
 
-Your `#number-label` should be a descendant of `#survey-form`.
+你的 `#number-label` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #number-label')
diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md
index b76bb842d4c..e2ae4e74a02 100644
--- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md
+++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md
@@ -8,7 +8,7 @@ dashedName: falsy-bouncer
 
 # --description--
 
-Remove all falsy values from an array. Return a new array; do not mutate the original array.
+從數組中移除所有假值（falsy values）。 返回一個新數組；不要改變原始數組。
 
 JavaScript 中的假值有 `false`、`null`、`0`、`""`、`undefined`、`NaN`。
 
@@ -40,7 +40,7 @@ assert.deepEqual(bouncer([false, null, 0, NaN, undefined, '']), []);
 assert.deepEqual(bouncer([null, NaN, 1, 2, undefined]), [1, 2]);
 ```
 
-You should not mutate `arr`.
+你不應該改變 `arr`。
 
 ```js
 const arr = ['a', false, 0, 'Naomi'];
diff --git a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md
index 78735a1467f..71672cd4913 100644
--- a/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md
+++ b/curriculum/challenges/chinese-traditional/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md
@@ -10,20 +10,20 @@ dashedName: add-elements-to-the-end-of-an-array-using-concat-instead-of-push
 
 函數式編程就是創建和使用具有不變性的函數。
 
-The last challenge introduced the `concat` method as a way to merge arrays into a new array without mutating the original arrays. 將 `concat` 方法與 `push` 方法做比較。 `push` adds items to the end of the same array it is called on, which mutates that array. 舉個例子：
+上一個挑戰介紹了 `concat` 方法，這是一種在不改變原始數組的前提下，將數組組合成一個新數組的方法。 將 `concat` 方法與 `push` 方法做比較。 `push` 將一個元素添加到調用它的數組的末尾，這樣會改變該數組。 舉個例子：
 
 ```js
 const arr = [1, 2, 3];
 arr.push(4, 5, 6);
 ```
 
-`arr` would have a modified value of `[1, 2, 3, 4, 5, 6]`, which is not the functional programming way.
+`arr` 的值被修改爲 `[1, 2, 3, 4, 5, 6]`，這不是函數編程方式。
 
-`concat` offers a way to merge new items to the end of an array without any mutating side effects.
+`concat` 方法可以將新項目添加到數組末尾，而不附帶改變數組。
 
 # --instructions--
 
-Change the `nonMutatingPush` function so it uses `concat` to merge `newItem` to the end of `original` without mutating `original` or `newItem` arrays. 該函數應返回一個數組。
+修改 `nonMutatingPush` 函數，用 `concat` 將 `newItem` 添加到 `original` 末尾，而不改變 `original` 或 `newItem` 數組。 該函數應返回一個數組。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md b/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md
index 01b1d522cc7..b6fea832121 100644
--- a/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md
+++ b/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-bar-chart
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to this: <a href="https://bar-chart.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://bar-chart.freecodecamp.rocks</a>.
+**目標：** 構建一個應用，功能和 <a href="https://bar-chart.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://bar-chart.freecodecamp.rocks</a> 類似。
 
 完成以下需求，並且通過所有測試。 使用你需要的任何庫或 API。 賦予它你自己的個人風格。
 
diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md b/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md
index 26d8a6e9973..9e5a06c4916 100644
--- a/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md
+++ b/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-choropleth-map
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to this: <a href="https://choropleth-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://choropleth-map.freecodecamp.rocks</a>.
+**目標：** 構建一個應用，功能和 <a href="https://choropleth-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://choropleth-map.freecodecamp.rocks</a> 類似。
 
 完成以下需求，並且通過所有測試。 你可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。
 
diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md b/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md
index 408c09d3712..25d22346358 100644
--- a/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md
+++ b/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-heat-map
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to this: <a href="https://heat-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://heat-map.freecodecamp.rocks</a>.
+**目標：** 構建一個應用，功能和 <a href="https://heat-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://heat-map.freecodecamp.rocks</a> 類似。
 
 完成以下需求，並且通過所有測試。 你可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。
 
diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md b/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md
index 7948ab49d5d..91fb0da2f22 100644
--- a/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md
+++ b/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-scatterplot-graph
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to this: <a href="https://scatterplot-graph.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://scatterplot-graph.freecodecamp.rocks</a>.
+**目標：** 構建一個應用，功能和 <a href="https://scatterplot-graph.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://scatterplot-graph.freecodecamp.rocks</a> 類似。
 
 完成以下需求，並且通過所有測試。 你可以使用你需要的任何庫或 API。 賦予它你自己的個人風格。
 
diff --git a/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md b/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md
index 9bc8283a0f2..5d451c44938 100644
--- a/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md
+++ b/curriculum/challenges/chinese-traditional/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-treemap-diagram
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to this: <a href="https://treemap-diagram.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://treemap-diagram.freecodecamp.rocks</a>.
+**目標：** 構建一個應用，功能和 <a href="https://treemap-diagram.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://treemap-diagram.freecodecamp.rocks</a> 類似。
 
 完成以下需求，並且通過所有測試。 使用你需要的任何庫或 API。 賦予它你自己的個人風格。
 
diff --git a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md
index dcbbb361036..b3a70649b04 100644
--- a/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md
+++ b/curriculum/challenges/chinese-traditional/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md
@@ -10,9 +10,9 @@ dashedName: create-a-model
 
 **C** RUD 第一小節——CREATE
 
-First of all, we need a Schema. 每一個 Schema 都對應一個 MongoDB 的 collection， 並且在相應的 collection 裏定義 documents 的“樣子”。 Schemas are building blocks for Models. They can be nested to create complex models, but in this case, we'll keep things simple. 我們可以根據模型創建實例，模型實例化後的對象稱爲 documents。
+首先，我們需要一個 Schema。 每一個 Schema 都對應一個 MongoDB 的 collection， 並且在相應的 collection 裏定義 documents 的“樣子”。 Schema 用於組成模型（Model）。 我們甚至可以通過嵌套 Schema 來創建複雜的模型。目前我們先從簡。 我們可以根據模型創建實例，模型實例化後的對象稱爲 documents。
 
-Replit is a real server, and in real servers, the interactions with the database happen in handler functions. 這些函數會在特定事件（比如有人調用了我們的服務器 API）發生時執行。 接下來的挑戰題目即是以此爲基礎。 `done()` 是一個回調函數，它的作用是在一個異步操作（比如對數據庫進行插入、查詢、更新或刪除）執行完成時，通知我們可以繼續執行後續的其它代碼。 這與 Node.js 中的處理方式十分類似，在 Node.js 中，我們會在（異步操作）成功時調用 `done(null, data)`，在失敗時調用 `done(err)`。
+Replit 是一個真實的服務器，在其中，通過 handler 函數和數據庫交互。 這些函數會在特定事件（比如有人調用了我們的服務器 API）發生時執行。 接下來的挑戰題目即是以此爲基礎。 `done()` 是一個回調函數，它的作用是在一個異步操作（比如對數據庫進行插入、查詢、更新或刪除）執行完成時，通知我們可以繼續執行後續的其它代碼。 這與 Node.js 中的處理方式十分類似，在 Node.js 中，我們會在（異步操作）成功時調用 `done(null, data)`，在失敗時調用 `done(err)`。
 
 注意：與遠程服務器進行交互時，我們需要考慮到發生錯誤的可能！
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md
index 0b07afe3d2f..0c08112f6d7 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md
@@ -14,7 +14,7 @@ dashedName: build-your-own-functions
 
 更多資源
 
-\- <a href="https://www.youtube.com/watch?v=ksvGhDsjtpw" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+\- <a href="https://www.youtube.com/watch?v=ksvGhDsjtpw" target="_blank" rel="noopener noreferrer nofollow">練習</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md
index 8e2e171ac25..6b089118bf9 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md
@@ -14,7 +14,7 @@ dashedName: comparing-and-sorting-tuples
 
 更多資源：
 
-\- <a href="https://www.youtube.com/watch?v=EhQxwzyT16E" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+\- <a href="https://www.youtube.com/watch?v=EhQxwzyT16E" target="_blank" rel="noopener noreferrer nofollow">練習</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md
index da1898ddba0..3ea3e730f49 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md
@@ -18,15 +18,15 @@ dashedName: data-visualization-mailing-lists
 
 \- <a href="https://www.youtube.com/watch?v=wSpl1-7afAk" target="_blank" rel="noopener noreferrer nofollow">練習：Gmane 模型</a>
 
-\- <a href="https://www.youtube.com/watch?v=H3w4lOFBUOI" target="_blank" rel="noopener noreferrer nofollow">Exercise: Gmane Spider</a>
+\- <a href="https://www.youtube.com/watch?v=H3w4lOFBUOI" target="_blank" rel="noopener noreferrer nofollow">練習：Gmane Spider</a>
 
-\- <a href="https://www.youtube.com/watch?v=LRqVPMEXByw" target="_blank" rel="noopener noreferrer nofollow">Exercise: Gmane Viz</a>
+\- <a href="https://www.youtube.com/watch?v=LRqVPMEXByw" target="_blank" rel="noopener noreferrer nofollow">練習：Gmane Viz</a>
 
-\- <a href="https://www.youtube.com/watch?v=yFRAZBkBDBs" target="_blank" rel="noopener noreferrer nofollow">Exercise: Page Rank</a>
+\- <a href="https://www.youtube.com/watch?v=yFRAZBkBDBs" target="_blank" rel="noopener noreferrer nofollow">練習：Page Rank</a>
 
-\- <a href="https://www.youtube.com/watch?v=sXedPQ_AnWA" target="_blank" rel="noopener noreferrer nofollow">Exercise: Page Spider</a>
+\- <a href="https://www.youtube.com/watch?v=sXedPQ_AnWA" target="_blank" rel="noopener noreferrer nofollow">練習：Page Spider</a>
 
-\- <a href="https://www.youtube.com/watch?v=Fm0hpkxsZoo" target="_blank" rel="noopener noreferrer nofollow">Exercise: Page Viz</a>
+\- <a href="https://www.youtube.com/watch?v=Fm0hpkxsZoo" target="_blank" rel="noopener noreferrer nofollow">練習：Page Viz</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md
index a095df2bf0a..719d6d3a5a2 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md
@@ -14,7 +14,7 @@ dashedName: dictionaries-and-loops
 
 更多資源：
 
-\- <a href="https://www.youtube.com/watch?v=PrhZ9qwBDD8" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+\- <a href="https://www.youtube.com/watch?v=PrhZ9qwBDD8" target="_blank" rel="noopener noreferrer nofollow">練習</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md
index 8c409de6303..a5b88cb0fff 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md
@@ -14,7 +14,7 @@ dashedName: intermediate-strings
 
 更多資料：
 
-\- <a href="https://www.youtube.com/watch?v=1bSqHot-KwE" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+\- <a href="https://www.youtube.com/watch?v=1bSqHot-KwE" target="_blank" rel="noopener noreferrer nofollow">練習</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md
index 82f39b31fed..22897a73072 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md
@@ -14,9 +14,9 @@ dashedName: more-conditional-structures
 
 更多資源：
 
-\- <a href="https://www.youtube.com/watch?v=crLerB4ZxMI" target="_blank" rel="noopener noreferrer nofollow">Exercise 1</a>
+\- <a href="https://www.youtube.com/watch?v=crLerB4ZxMI" target="_blank" rel="noopener noreferrer nofollow">練習 1</a>
 
-\- <a href="https://www.youtube.com/watch?v=KJN3-7HH6yk" target="_blank" rel="noopener noreferrer nofollow">Exercise 2</a>
+\- <a href="https://www.youtube.com/watch?v=KJN3-7HH6yk" target="_blank" rel="noopener noreferrer nofollow">練習 2</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md
index 64628790865..feaa6c97803 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md
@@ -12,9 +12,9 @@ dashedName: relational-databases-and-sqlite
 
 # --description--
 
-<a href="https://www.sqlite.org/download.html" target="_blank" rel="noopener noreferrer nofollow">Download SQLite</a>  
-<a href="https://sqlitebrowser.org/dl/" target="_blank" rel="noopener noreferrer nofollow">Download DB Browser for SQLite</a>  
-<a href="https://www.sqlite.org/famous.html" target="_blank" rel="noopener noreferrer nofollow">SQLite usage</a>
+<a href="https://www.sqlite.org/download.html" target="_blank" rel="noopener noreferrer nofollow">下載 SQLite</a>  
+<a href="https://sqlitebrowser.org/dl/" target="_blank" rel="noopener noreferrer nofollow">下載 DB Browser for SQLite</a>  
+<a href="https://www.sqlite.org/famous.html" target="_blank" rel="noopener noreferrer nofollow">使用 SQLite</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md
index ea20d6bdc0c..4de8b607355 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md
@@ -14,15 +14,15 @@ dashedName: relational-databases-many-to-many-relationships
 
 更多資料：
 
-\- <a href="https://www.youtube.com/watch?v=uQ3Qv1z_Vao" target="_blank" rel="noopener noreferrer nofollow">Exercise: Email</a>
+\- <a href="https://www.youtube.com/watch?v=uQ3Qv1z_Vao" target="_blank" rel="noopener noreferrer nofollow">練習：Email</a>
 
-\- <a href="https://www.youtube.com/watch?v=qEkUEAz8j3o" target="_blank" rel="noopener noreferrer nofollow">Exercise: Roster</a>
+\- <a href="https://www.youtube.com/watch?v=qEkUEAz8j3o" target="_blank" rel="noopener noreferrer nofollow">練習：Roster</a>
 
-\- <a href="https://www.youtube.com/watch?v=I-E7avcPeSE" target="_blank" rel="noopener noreferrer nofollow">Exercise: Tracks</a>
+\- <a href="https://www.youtube.com/watch?v=I-E7avcPeSE" target="_blank" rel="noopener noreferrer nofollow">練習：Tracks</a>
 
-\- <a href="https://www.youtube.com/watch?v=RZRAoBFIH6A" target="_blank" rel="noopener noreferrer nofollow">Exercise: Twfriends</a>
+\- <a href="https://www.youtube.com/watch?v=RZRAoBFIH6A" target="_blank" rel="noopener noreferrer nofollow">練習：Twfriends</a>
 
-\- <a href="https://www.youtube.com/watch?v=xBaJddvJL4A" target="_blank" rel="noopener noreferrer nofollow">Exercise: Twspider</a>
+\- <a href="https://www.youtube.com/watch?v=xBaJddvJL4A" target="_blank" rel="noopener noreferrer nofollow">練習：Twspider</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md
index b715d5a3576..01fb3e462ea 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md
@@ -14,7 +14,7 @@ dashedName: strings-and-lists
 
 更多資源：
 
-\- <a href="https://www.youtube.com/watch?v=-9TfJF2dwHI" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+\- <a href="https://www.youtube.com/watch?v=-9TfJF2dwHI" target="_blank" rel="noopener noreferrer nofollow">練習</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md
index c178df44c11..96ced63d988 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md
@@ -14,13 +14,13 @@ dashedName: web-services-api-rate-limiting-and-security
 
 更多資料：
 
-\- <a href="https://www.youtube.com/watch?v=TJGJN0T8tak" target="_blank" rel="noopener noreferrer nofollow">Exercise: GeoJSON</a>
+\- <a href="https://www.youtube.com/watch?v=TJGJN0T8tak" target="_blank" rel="noopener noreferrer nofollow">練習：GeoJSON</a>
 
-\- <a href="https://www.youtube.com/watch?v=vTmw5RtfGMY" target="_blank" rel="noopener noreferrer nofollow">Exercise: JSON</a>
+\- <a href="https://www.youtube.com/watch?v=vTmw5RtfGMY" target="_blank" rel="noopener noreferrer nofollow">練習：JSON</a>
 
-\- <a href="https://www.youtube.com/watch?v=2c7YwhvpCro" target="_blank" rel="noopener noreferrer nofollow">Exercise: Twitter</a>
+\- <a href="https://www.youtube.com/watch?v=2c7YwhvpCro" target="_blank" rel="noopener noreferrer nofollow">練習：Twitter</a>
 
-\- <a href="https://www.youtube.com/watch?v=AopYOlDa-vY" target="_blank" rel="noopener noreferrer nofollow">Exercise: XML</a>
+\- <a href="https://www.youtube.com/watch?v=AopYOlDa-vY" target="_blank" rel="noopener noreferrer nofollow">練習：XML</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
index 78ac98c42ea..ce24ab2540a 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
@@ -8,7 +8,7 @@ dashedName: arithmetic-formatter
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-arithmetic-formatter" target="_blank" rel="noopener noreferrer nofollow"> working on this project with our Replit starter code</a>.
+你將使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-arithmetic-formatter" target="_blank" rel="noopener noreferrer nofollow">我們在 Replit 的初始化項目</a>來完成這個項目。
 
 # --instructions--
 
@@ -64,7 +64,7 @@ arithmetic_arranger(["32 + 8", "1 - 3801", "9999 + 9999", "523 - 49"], True)
   - 每個數字（操作數）應該只包含數字。 否則，該函數將返回： `Error: Numbers must only contain digits.`
   - 每個操作數（也就是運算符兩側的數字）的寬度最多爲四位。 否則，返回的錯誤字符串將爲： `Error: Numbers cannot be more than four digits.`
 - 如果用戶提供了正確格式的問題，返回的轉換將遵循以下規則：
-  - There should be a single space between the operator and the longest of the two operands, the operator will be on the same line as the second operand, both operands will be in the same order as provided (the first will be the top one and the second will be the bottom).
+  - 操作符和兩個操作數中最長的一個之間應該有一個空格，操作符將與第二個操作數在同一行，兩個操作數的順序與提供的相同（第一個是上面的，第二個是下面的）。
   - 數字應該右對齊。
   - 每個問題之間應該有四個空格。
   - 每個問題的底部都應該有破折號。 破折號應該單獨沿着每個問題的整個長度延伸。 （上面的例子展示了這應該是什麼樣子。）
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md
index 83fad56fbb1..718a8008ba7 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md
@@ -8,7 +8,7 @@ dashedName: budget-app
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-budget-app" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你將使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-budget-app" target="_blank" rel="noopener noreferrer nofollow">我們在 Replit 的初始化項目</a>來完成這個項目。
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md
index 18a6b19442a..09fdae69ada 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md
@@ -8,7 +8,7 @@ dashedName: polygon-area-calculator
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-polygon-area-calculator" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你將使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-polygon-area-calculator" target="_blank" rel="noopener noreferrer nofollow">我們在 Replit 的初始化項目</a>來完成這個項目。
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
index fb4d8bb7beb..e8800b266c4 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
@@ -8,7 +8,7 @@ dashedName: probability-calculator
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-probability-calculator" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你將使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-probability-calculator" target="_blank" rel="noopener noreferrer nofollow">我們在 Replit 的初始化項目</a>來完成這個項目。
 
 # --instructions--
 
@@ -37,7 +37,7 @@ hat3 = Hat(red=5, orange=4, black=1, blue=0, pink=2, striped=9)
 
 `experiment` 函數應該返回一個概率。
 
-For example, if you want to determine the probability of getting at least two red balls and one green ball when you draw five balls from a hat containing six black, four red, and three green. To do this, you will perform `N` experiments, count how many times `M` you get at least two red balls and one green ball, and estimate the probability as `M/N`. Each experiment consists of starting with a hat containing the specified balls, drawing several balls, and checking if you got the balls you were attempting to draw.
+例如，如果你想確定當你從一個包含 6 個黑球、4 個紅球和 3 個綠球的帽子中抽出 5 個球時，至少得到 2 個紅球和 1 個綠球的概率， 你將進行 `N` 次實驗，記錄其中你至少得到 2 個紅球和 1 個綠球的次數 `M`，並估計概率爲 `M/N`。 每個實驗都包括從一個裝有指定球的帽子開始，抽出幾個球，並檢查你是否抽到了你試圖抽出的球。
 
 以下是基於上面的示例調用 `experiment` 函數的方法，其中包含 2000 個實驗：
 
diff --git a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md
index ae63f756dba..90998d38f5f 100644
--- a/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md
+++ b/curriculum/challenges/chinese-traditional/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md
@@ -8,7 +8,7 @@ dashedName: time-calculator
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-time-calculator" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你將使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-time-calculator" target="_blank" rel="noopener noreferrer nofollow">我們在 Replit 的初始化項目</a>來完成這個項目。
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md b/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md
index 7465c2437f5..aa3082c127a 100644
--- a/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md
+++ b/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md
@@ -8,13 +8,13 @@ dashedName: demographic-data-analyzer
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-demographic-data-analyzer" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你將使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-demographic-data-analyzer" target="_blank" rel="noopener noreferrer nofollow">我們在 Replit 的初始化項目</a>來完成這個項目。
 
 我們仍在開發 Python 課程的交互式教學部分。 目前，你可以在 YouTube 上通過 freeCodeCamp.org 上傳的一些視頻學習這個項目相關的知識。
 
-- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a> (14 hours)
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">給所有人的 Python 課程</a>（14 小時）
 
-- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">如何使用 Python Pandas 分析數據</a>（10 小時）
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md b/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md
index 847b3078441..3776a18fadc 100644
--- a/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md
+++ b/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md
@@ -8,13 +8,13 @@ dashedName: mean-variance-standard-deviation-calculator
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-mean-variance-standard-deviation-calculator" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你將使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-mean-variance-standard-deviation-calculator" target="_blank" rel="noopener noreferrer nofollow">我們在 Replit 的初始化項目</a>來完成這個項目。
 
 我們仍在開發 Python 課程的交互式教學部分。 目前，你可以在 YouTube 上通過 freeCodeCamp.org 上傳的一些視頻學習這個項目相關的知識。
 
-- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a>(14 hours)
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">給所有人的 Python 課程</a>（14 小時）
 
-- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">如何使用 Python Pandas 分析數據</a>（10 小時）
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md b/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
index 8120ddc059f..eae3881ae5c 100644
--- a/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
+++ b/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
@@ -8,13 +8,13 @@ dashedName: medical-data-visualizer
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-medical-data-visualizer" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你將使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-medical-data-visualizer" target="_blank" rel="noopener noreferrer nofollow">我們在 Replit 的初始化項目</a>來完成這個項目。
 
 我們仍在開發 Python 課程的交互式教學部分。 目前，你可以在 YouTube 上通過 freeCodeCamp.org 上傳的一些視頻學習這個項目相關的知識。
 
-- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a>(14 hours)
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">給所有人的 Python 課程</a>（14 小時）
 
-- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">如何使用 Python Pandas 分析數據</a>（10 小時）
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md b/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md
index 61881d16f42..792d5d9a03d 100644
--- a/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md
+++ b/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md
@@ -8,13 +8,13 @@ dashedName: page-view-time-series-visualizer
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-page-view-time-series-visualizer" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你將使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-page-view-time-series-visualizer" target="_blank" rel="noopener noreferrer nofollow">我們在 Replit 的初始化項目</a>來完成這個項目。
 
 我們仍在開發 Python 課程的交互式教學部分。 目前，你可以在 freeCodeCamp.org 的 YouTube 頻道中通過視頻學習到這個項目相關的所有知識
 
-- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a>(14 hours)
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">給所有人的 Python 課程</a>（14 小時）
 
-- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">如何使用 Python Pandas 分析數據</a>（10 小時）
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md b/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
index d6c5df5b66d..376bc31d1c7 100644
--- a/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
+++ b/curriculum/challenges/chinese-traditional/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
@@ -8,13 +8,13 @@ dashedName: sea-level-predictor
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-sea-level-predictor" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你將使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-sea-level-predictor" target="_blank" rel="noopener noreferrer nofollow">我們在 Replit 的初始化項目</a>來完成這個項目。
 
 我們仍在開發 Python 課程的交互式教學部分。 目前，你可以在 YouTube 上通過 freeCodeCamp.org 上傳的一些視頻學習這個項目相關的知識。
 
-- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a>(14 hours)
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">給所有人的 Python 課程</a>（14 小時）
 
-- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">如何使用 Python Pandas 分析數據</a>（10 小時）
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/anonymous-message-board.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/anonymous-message-board.md
index 187204881cc..efe87b11446 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/anonymous-message-board.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/anonymous-message-board.md
@@ -8,12 +8,12 @@ dashedName: anonymous-message-board
 
 # --description--
 
-Build a full stack JavaScript app that is functionally similar to this: <a href="https://anonymous-message-board.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://anonymous-message-board.freecodecamp.rocks/</a>.
+構建一個 JavaScript 的全棧應用，在功能上與這個應用相似：<a href="https://anonymous-message-board.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://anonymous-message-board.freecodecamp.rocks/</a>。
 
 在這個項目中，你將使用以下方法之一編寫你的代碼：
 
--   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-messageboard/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
--   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-messageboard" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   克隆<a href="https://github.com/freeCodeCamp/boilerplate-project-messageboard/" target="_blank" rel="noopener noreferrer nofollow">這個 GitHub 倉庫</a>，並在本地完成你的項目。
+-   使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-project-messageboard" target="_blank" rel="noopener noreferrer nofollow">我們在 Replit 上的初始化項目</a>來完成你的項目。
 -   使用一個你喜歡的站點生成器來完成項目。 需要確定包含了我們 GitHub 倉庫的所有文件。
 
 完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後將 URL 提交到 `Solution Link` 中。 此外，還可以提交一個指向項目源碼的 `GitHub Link`。
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/port-scanner.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/port-scanner.md
index 971c95b5463..b274d77835b 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/port-scanner.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/port-scanner.md
@@ -9,15 +9,15 @@ dashedName: port-scanner
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-port-scanner" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你將使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-port-scanner" target="_blank" rel="noopener noreferrer nofollow">我們在 Replit 的初始化項目</a>來完成這個項目。
 
 我們仍在開發 Python 課程的交互式教學部分。 目前，你可以在 YouTube 上通過 freeCodeCamp.org 上傳的一些視頻學習這個項目相關的知識。
 
-- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a> (14 hours)
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">給所有人的 Python 課程</a>（14 小時）
 
-- <a href="https://www.freecodecamp.org/news/learn-python-basics-in-depth-video-course/" target="_blank" rel="noopener noreferrer nofollow">Learn Python Basics in Depth</a> (4 hours)
+- <a href="https://www.freecodecamp.org/news/learn-python-basics-in-depth-video-course/" target="_blank" rel="noopener noreferrer nofollow">深入學習 Python 基礎知識</a>（4 小時）
 
-- <a href="https://www.freecodecamp.org/news/intermediate-python-course/" target="_blank" rel="noopener noreferrer nofollow">Intermediate Python Course</a> (6 hours)
+- <a href="https://www.freecodecamp.org/news/intermediate-python-course/" target="_blank" rel="noopener noreferrer nofollow">Python 中級課程</a>（6 小時）
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/sha-1-password-cracker.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/sha-1-password-cracker.md
index 678ed3f2636..94aa53e511d 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/sha-1-password-cracker.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/sha-1-password-cracker.md
@@ -9,15 +9,15 @@ dashedName: sha-1-password-cracker
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-SHA-1-password-cracker" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你將使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-SHA-1-password-cracker" target="_blank" rel="noopener noreferrer nofollow">我們在 Replit 的初始化項目</a>來完成這個項目。
 
 我們仍在開發 Python 課程的交互式教學部分。 目前，你可以在 YouTube 上通過 freeCodeCamp.org 上傳的一些視頻學習這個項目相關的知識。
 
-- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a> (14 hours)
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">給所有人的 Python 課程</a>（14 小時）
 
-- <a href="https://www.freecodecamp.org/news/learn-python-basics-in-depth-video-course/" target="_blank" rel="noopener noreferrer nofollow">Learn Python Basics in Depth</a> (4 hours)
+- <a href="https://www.freecodecamp.org/news/learn-python-basics-in-depth-video-course/" target="_blank" rel="noopener noreferrer nofollow">深入學習 Python 基礎知識</a>（4 小時）
 
-- <a href="https://www.freecodecamp.org/news/intermediate-python-course/" target="_blank" rel="noopener noreferrer nofollow">Intermediate Python Course</a> (6 hours)
+- <a href="https://www.freecodecamp.org/news/intermediate-python-course/" target="_blank" rel="noopener noreferrer nofollow">Python 中級課程</a>（6 小時）
 
 # --instructions--
 
@@ -43,7 +43,7 @@ You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-SHA-1-pa
 - `da5a4e8cf89539e66097acd2f8af128acae2f8ae` 應該返回 “q1w2e3r4t5”
 - `ea3f62d498e3b98557f9f9cd0d905028b3b019e1` 應該返回 “bubbles1”
 
-`hashlib` 庫已經爲你導入。 You should consider using it in your code. <a href="https://docs.python.org/3/library/hashlib.html" target="_blank" rel="noopener noreferrer nofollow">Learn more about "hashlib" here</a>.
+`hashlib` 庫已經爲你導入。 你應該在你的代碼中使用它。 <a href="https://docs.python.org/3/library/hashlib.html" target="_blank" rel="noopener noreferrer nofollow">在此瞭解更多關於 “hashlib” 的信息</a>。
 
 ## 開發
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md
index 59dbc2b278b..bb3c478d3ea 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-projects/stock-price-checker.md
@@ -8,14 +8,14 @@ dashedName: stock-price-checker
 
 # --description--
 
-Build a full stack JavaScript app that is functionally similar to this: <a href="https://stock-price-checker.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://stock-price-checker.freecodecamp.rocks/</a>.
+構建一個 JavaScript 的全棧應用，在功能上與這個應用相似：<a href="https://stock-price-checker.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://stock-price-checker.freecodecamp.rocks/</a>。
 
-由於所有可靠的股票價格 API 都需要一個 API 密鑰，我們已經建立了一個解決方案。 Use <a href="https://stock-price-checker-proxy.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://stock-price-checker-proxy.freecodecamp.rocks/</a> to get up-to-date stock price information without needing to sign up for your own key.
+由於所有可靠的股票價格 API 都需要一個 API 密鑰，我們已經建立了一個解決方案。 使用 <a href="https://stock-price-checker-proxy.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://stock-price-checker-proxy.freecodecamp.rocks/</a> 獲取最新的股票價格信息，而無需註冊你自己的密鑰。
 
 可以採用下面的任意一種方式完成這個挑戰：
 
--   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-stockchecker/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
--   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-stockchecker" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   克隆<a href="https://github.com/freeCodeCamp/boilerplate-project-stockchecker/" target="_blank" rel="noopener noreferrer nofollow">這個 GitHub 倉庫</a>，並在本地完成你的項目。
+-   使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-project-stockchecker" target="_blank" rel="noopener noreferrer nofollow">我們在 Replit 上的初始化項目</a>來完成你的項目。
 -   使用你選擇的網站生成器來完成項目。 需要包含我們 GitHub 倉庫的所有文件。
 
 完成本項目後，請將一個正常運行的 demo（項目演示）託管在可以公開訪問的平臺。 然後將 URL 提交到 `Solution Link` 中。 此外，還可以將項目的源碼提交到 `GitHub Link` 中。
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md
index c17d40e14f2..167b76ff110 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md
@@ -8,7 +8,7 @@ dashedName: ask-browsers-to-access-your-site-via-https-only-with-helmet-hsts
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+請注意，本項目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化項目的基礎上進行開發，你也可以從 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 HTTP 嚴格傳輸安全（HSTS）是一種網絡安全策略，有助於保護網站免受協議降級攻擊和 cookie 劫持。 如果你的網站可以通過 HTTPS 訪問，你可以要求用戶的瀏覽器避免使用不安全的 HTTP。 通過設置標頭 Strict-Transport-Security，你告訴瀏覽器在指定時間內對未來的請求使用 HTTPS。 這將對初始請求之後的請求起作用。
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md
index 736ebfffb22..d571f58afd7 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md
@@ -8,7 +8,7 @@ dashedName: avoid-inferring-the-response-mime-type-with-helmet-nosniff
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>. 瀏覽器可以使用內容或 MIME 嗅探來覆蓋響應的 `Content-Type` 頭，猜測並使用隱含的內容類型來處理數據。 雖然這在某些情況下可能很方便，但也可能導致一些危險的攻擊。 該中間件將 X-Content-Type-Options 頭設置爲 `nosniff`，指示瀏覽器不要繞過所提供的 `Content-Type`。
+請注意，本項目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化項目的基礎上進行開發，你也可以從 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。 瀏覽器可以使用內容或 MIME 嗅探來覆蓋響應的 `Content-Type` 頭，猜測並使用隱含的內容類型來處理數據。 雖然這在某些情況下可能很方便，但也可能導致一些危險的攻擊。 該中間件將 X-Content-Type-Options 頭設置爲 `nosniff`，指示瀏覽器不要繞過所提供的 `Content-Type`。
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md
index f651618a89f..a27420ed86b 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md
@@ -8,7 +8,7 @@ dashedName: configure-helmet-using-the-parent-helmet-middleware
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+請注意，本項目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化項目的基礎上進行開發，你也可以從 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 `app.use(helmet())` 將自動包括上面介紹的所有中間件，除了 `noCache()` 和 `contentSecurityPolicy()`，但如果有必要，這些可以被啓用。 你也可以使用配置對象，單獨禁用或配置任何其他中間件。
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md
index dfb80f98d11..935b3da284f 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md
@@ -8,7 +8,7 @@ dashedName: disable-client-side-caching-with-helmet-nocache
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+請注意，本項目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化項目的基礎上進行開發，你也可以從 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 如果你正在爲你的網站發佈更新，而你希望用戶總是下載較新的版本，你可以（嘗試）在客戶的瀏覽器上禁用緩存。 它在開發中也很有用。 緩存具有性能優勢，你將失去這些優勢，因此只有在真正需要時才使用此選項。
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md
index d5e63354248..70ce6a6f205 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md
@@ -8,7 +8,7 @@ dashedName: disable-dns-prefetching-with-helmet-dnsprefetchcontrol
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+請注意，本項目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化項目的基礎上進行開發，你也可以從 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 爲了提高性能，大部分瀏覽器都會爲頁面上的鏈接預先加載 DNS 記錄。 這樣當用戶點擊一個鏈接的時候瀏覽器已經知道其 IP 地址了。 但這也會造成 DNS 服務的過度使用（如果你有一個百萬用戶數量級的大型網站）、隱私問題（竊聽者可以藉此推測出你在訪問哪個頁面）、頁面統計數據準確性（有些沒訪問過的鏈接會被標記成已訪問）。 如果你對安全性要求比較高，你應該禁用 DNS 預加載。 當然，這樣做會讓你損失一些性能。
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md
index 93e3da005da..9809aa6c054 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md
@@ -8,7 +8,7 @@ dashedName: hash-and-compare-passwords-asynchronously
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+請注意，本項目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化項目的基礎上進行開發，你也可以從 <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 由於哈希運算會佔用很大計算機資源，並且會耗費比較多時間，因此比較推薦的做法是異步調用哈希算法，這樣就不會因此阻止其它連接或請求了。 異步調用哈希方法非常簡單，只需要：
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md
index 570d37bdc05..8dcc44e92db 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md
@@ -8,7 +8,7 @@ dashedName: hash-and-compare-passwords-synchronously
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+請注意，本項目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化項目的基礎上進行開發，你也可以從 <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 同步執行哈希運算是非常簡單的，但這會在哈希計算量大並且次數多的情況下造成延遲。 用這個方法哈希就像調用函數一樣簡單。
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md
index 5e881c25e58..ead0e87c370 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md
@@ -8,7 +8,7 @@ dashedName: hide-potentially-dangerous-information-using-helmet-hidepoweredby
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+請注意，本項目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化項目的基礎上進行開發，你也可以從 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 如果黑客發現你的網站是用 Express 搭建的，那麼他們就可以利用 Express 或 Node 現存的漏洞來攻擊你的網站。 `X-Powered-By: Express` 默認在來自 Express 的每個請求中被髮送。 使用 `helmet.hidePoweredBy()` 中間件來移除 X-Powered-By 頭。
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md
index 18c18a4a9ff..67ae8c4ea3e 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md
@@ -8,7 +8,7 @@ dashedName: mitigate-the-risk-of-clickjacking-with-helmet-frameguard
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+請注意，本項目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化項目的基礎上進行開發，你也可以從 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 你的網頁可能在未經你同意的情況下被放在 `<frame>` 或 `<iframe>` 中。 這可能會導致點擊劫持攻擊等情況。 點擊劫持是一種欺騙用戶的技術，使其與用戶認爲不同的頁面進行互動。 這可以通過使用 iframe 的方式，在一個惡意的環境中執行你的頁面而獲得。 在這種情況下，黑客可以在你的頁面上設置一個隱藏層。 隱藏的按鈕可以被用來運行壞的腳本。 該中間件設置 X-Frame-Options 頭。 它限制了誰可以把你的網站放在一個框架裏。 它有三種模式：DENY、SAMEORIGIN 和 ALLOW-FROM。
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md
index c0fada043e2..8ddbfe6a727 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md
@@ -9,7 +9,7 @@ dashedName: mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet-xs
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+請注意，本項目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化項目的基礎上進行開發，你也可以從 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 跨站腳本（XSS）是一種常見的攻擊類型，惡意腳本被注入到易受攻擊的頁面，目的是竊取敏感數據，如會話 cookies 或密碼。
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md
index fd357d5be03..9fb96079a69 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md
@@ -8,7 +8,7 @@ dashedName: prevent-ie-from-opening-untrusted-html-with-helmet-ienoopen
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+請注意，本項目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化項目的基礎上進行開發，你也可以從 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 有些網站會下載不安全的 HTML 文件。 某些版本的 IE 默認情況下還會在你網站的作用域下打開這些 HTML 文件。 換句話說，這些不安全的 HTML 頁面可以在你的網站做惡意行爲。 我們可以通過中間件來設置 header 中的 X-Download-Options 字段，讓它的值爲 noopen。 這樣就可以防止 IE 在不信任的網站下執行下載的文件。
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md
index 6abd3a2dbac..78d8bf13391 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md
@@ -8,7 +8,7 @@ dashedName: set-a-content-security-policy-with-helmet-contentsecuritypolicy
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+請注意，本項目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化項目的基礎上進行開發，你也可以從 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 在這個挑戰中，我們要重點討論現代瀏覽器中一種能有效減輕安全風險和防禦很多種類型常見攻擊的安全防護。 通過設置和配置內容安全策略，你可以防止在頁面中無意中注入任何內容。 這會讓你的應用遠離 XSS 漏洞、惡意追蹤、惡意 frames 和很多其他攻擊。 CSP 通過配置資源白名單來避免這些問題。 你可以給任何一種類型的頁面資源（腳本、樣式文件、字體、frames、媒體文件等）做這個配置。 它支持很多指令，所以網站管理員可以做細緻的控制。 更多詳情請參考 HTML 5 Rocks 和 KeyCDN。 不幸的是，一些舊的瀏覽器不支持 CSP。
 
diff --git a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md
index f0a8b7d77d6..ea9c1f41eeb 100644
--- a/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md
+++ b/curriculum/challenges/chinese-traditional/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md
@@ -8,17 +8,17 @@ dashedName: understand-bcrypt-hashes
 
 # --description--
 
-在下面的挑戰中，你將啓動一個新的項目，這個項目與之前的項目不同。 You can find the new starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or clone it from <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+在下面的挑戰中，你將啓動一個新的項目，這個項目與之前的項目不同。 你可以在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上找到新的啓動項目，或者從 <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆它。
 
 BCrypt 哈希值是非常安全的。 哈希值基本上是原始數據的指紋，總是唯一的。 這是通過將原始數據輸入一個算法並返回一個固定長度的結果來實現的。 爲了使這一過程更加複雜和安全，你還可以向你的哈希值 *加鹽*。 對你的哈希加鹽處理包含了在哈希過程之前向原始數據添加隨機數據，這使得破解哈希更加困難。
 
-BCrypt hashes will always look like `$2a$13$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8QO.uUUtcbqloU0yvzavOm` which does have a structure. 第一小節 `$2a` 說明了該哈希採用什麼算法。 接下來的部分 `$13` 定義了 *成本*。 成本是指計算哈希值需要多少能量。 它在 2^cost 的對數尺度上，決定了數據要通過哈希算法計算多少次。 For example, at a cost of 10 you are able to hash 10 passwords a second on an average computer, however at a cost of 15 it takes 3 seconds per hash... and to take it further, at a cost of 31 it would take multiple days to complete a hash. 通常 cost 爲 12 的哈希運算就已經足夠安全。 哈希結果的最後一部分 `$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8QO.uUUtcbqloU0yvzavOm` 看起來像是由隨機數字、點和字母組成的字符串，但實際上它有兩部分內容。 前面 22 個字符是加入的鹽，剩下的就是加密過的密碼！
+BCrypt 哈希值類似 `$2a$13$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8QO.uUUtcbqloU0yvzavOm`，有一個結構。 第一小節 `$2a` 說明了該哈希採用什麼算法。 接下來的部分 `$13` 定義了 *成本*。 成本是指計算哈希值需要多少能量。 它在 2^cost 的對數尺度上，決定了數據要通過哈希算法計算多少次。 例如，當成本爲 10 時，你能夠在普通計算機上每秒哈希計算 10 個密碼，然而當成本爲 15 時，每次哈希計算需要 3 秒......再進一步說，當成本爲 31 時，完成一次哈希需要好幾天。 通常 cost 爲 12 的哈希運算就已經足夠安全。 哈希結果的最後一部分 `$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8QO.uUUtcbqloU0yvzavOm` 看起來像是由隨機數字、點和字母組成的字符串，但實際上它有兩部分內容。 前面 22 個字符是加入的鹽，剩下的就是加密過的密碼！
 
 # --instructions--
 
-Add all your code for these lessons in the `server.js` file between the code we have started you off with. Do not change or delete the code we have added for you.
+在 `server.js` 文件中加入這些課程的所有代碼，放在我們開始的代碼之間。 不要改變或刪除我們爲你添加的代碼。
 
-BCrypt has already been added as a dependency, so require it as `bcrypt` in your server.
+BCrypt 已經被添加爲一個依賴項，所以在你的服務器中請求它爲 `bcrypt`。
 
 請在完成挑戰後提交你的頁面。
 
diff --git a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
index 9e26dfa108e..eb499c13931 100644
--- a/curriculum/challenges/chinese-traditional/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
+++ b/curriculum/challenges/chinese-traditional/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
@@ -12,14 +12,27 @@ The palindromic number 595 is interesting because it can be written as the sum o
 
 There are exactly eleven palindromes below one-thousand that can be written as consecutive square sums, and the sum of these palindromes is 4164. Note that $1 = 0^2 + 1^2$ has not been included as this problem is concerned with the squares of positive integers.
 
-Find the sum of all the numbers less than $10^8$ that are both palindromic and can be written as the sum of consecutive squares.
+Find the sum of all the numbers less than the  `limit`  that are both palindromic and can be written as the sum of consecutive squares.
 
 # --hints--
-
-`palindromicSums()` should return `2906969179`.
+`palindromicSums(100000000)` should return `2906969179`.
 
 ```js
-assert.strictEqual(palindromicSums(), 2906969179);
+
+assert.strictEqual(palindromicSums(100000000), 2906969179);
+
+```
+
+`palindromicSums(100)` should return `137`.
+
+```js
+assert.strictEqual(palindromicSums(100), 137);
+```
+
+`palindromicSums(1000)` should return `4164`.
+
+```js
+assert.strictEqual(palindromicSums(1000),4164);
 ```
 
 # --seed--
@@ -27,16 +40,40 @@ assert.strictEqual(palindromicSums(), 2906969179);
 ## --seed-contents--
 
 ```js
-function palindromicSums() {
+function palindromicSums(limit) {
 
   return true;
 }
 
-palindromicSums();
+palindromicSums(100);
 ```
 
 # --solutions--
 
 ```js
-// solution required
+function isPalindrome(num) {
+  return num
+    .toString()
+    .split('')
+    .every((digit, i, arr) => digit === arr[arr.length - 1 - i]);
+}
+
+function palindromicSums(limit) {
+  let sumOfPalindromes = 0;
+  const sqrtLimit = Math.sqrt(limit);
+  const list = new Set();
+
+  for (let i = 1; i <= sqrtLimit; i++) {
+    let sumOfSquares = i * i;
+    for (let j = i + 1; j <= sqrtLimit; j++) {
+      sumOfSquares += j * j;
+      if (sumOfSquares > limit) break;
+      if (isPalindrome(sumOfSquares) && !list.has(sumOfSquares)) {
+        sumOfPalindromes += sumOfSquares;
+        list.add(sumOfSquares);
+      }
+    }
+  }
+  return sumOfPalindromes;
+}
 ```
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
index 4ffdba5ea38..a8bb0cf51a9 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
@@ -91,7 +91,7 @@ const el = document.getElementById('name')
 assert(!!el && el.required)
 ```
 
-Your `#name` should be a descendant of `#survey-form`.
+你的 `#name` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #name')
@@ -119,7 +119,7 @@ const el = document.getElementById('email')
 assert(!!el && el.required)
 ```
 
-Your `#email` should be a descendant of `#survey-form`
+你的 `#email` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #email')
@@ -133,7 +133,7 @@ const el = document.getElementById('number')
 assert(!!el && el.tagName === 'INPUT')
 ```
 
-Your `#number` should be a descendant of `#survey-form`.
+你的 `#number` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #number')
@@ -203,21 +203,21 @@ const el = document.getElementById('number-label')
 assert(!!el && el.innerText.length > 0)
 ```
 
-Your `#name-label` should be a descendant of `#survey-form`.
+你的 `#name-label` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #name-label')
 assert(!!el)
 ```
 
-Your `#email-label` should be a descendant of `#survey-form`.
+你的 `#email-label` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #email-label')
 assert(!!el)
 ```
 
-Your `#number-label` should be a descendant of `#survey-form`.
+你的 `#number-label` 元素應該是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #number-label')
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 4c6347c1bdf..43aa3663df6 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
@@ -9,7 +9,7 @@ dashedName: step-56
 
 要使 `input` 框彼此對齊，請將所有 `.info` 元素內 `input` 和 `label` 元素的 `display` 屬性設置爲 `inline-block`。
 
-Also, align the `label` element's text to the right.
+另外，將 `label` 元素的文本向右對齊。
 
 # --hints--
 
@@ -28,7 +28,7 @@ const display = gs('.info > label, .info > input') ?? gs('.info label, .info inp
 assert.equal(display, 'inline-block');
 ```
 
-You should give the `label` element a `text-align` of `right`.
+你應該設置 `label` 元素的 `text-align` 值爲 `right`。
 
 ```js
 const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign;
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
index d978485e917..be5d0c6ad90 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
@@ -7,29 +7,29 @@ dashedName: step-5
 
 # --description--
 
-It's time to add some menu content. Add a `main` element within the existing `body` element. It will eventually contain pricing information about coffee and desserts offered by the cafe.
+是時候添加一些菜單內容。 在現有的 `body` 元素裏面添加一個 `main` 元素。 它最終將包含有關咖啡館提供的咖啡和甜點的價格信息。
 
 # --hints--
 
-Your code should have an opening `<main>` tag.
+你的代碼應該有一個 `<main>` 開始標籤。
 
 ```js
 assert(code.match(/<main>/i));
 ```
 
-Your code should have a closing `</main>` tag.
+你的代碼應該有一個 `</main>` 結束標籤。
 
 ```js
 assert(code.match(/<\/main>/i));
 ```
 
-You should not change your `body` element. Make sure you don't accidentally delete your closing tag.
+你不應該改變你的 `body` 元素。 確認你沒有不小心刪除結束標籤。
 
 ```js
 assert($('body').length === 1);
 ```
 
-Your `main` tag should be within your `body` tag.
+你的 `main` 元素應該在你的 `body` 元素之後。
 
 ```js
 const main = document.querySelector('main');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
index 820b11358f7..bb8f4af2343 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
@@ -7,35 +7,35 @@ dashedName: step-6
 
 # --description--
 
-The name of the cafe is `CAMPER CAFE`. Add an `h1` element within your `main` element. Give it the name of the cafe in capitalized letters to make it stand out.
+咖啡廳的名稱是 `CAMPER CAFE`。 在 `main` 元素中添加一個 `h1` 元素。 給它命名爲 “cafe”，用大寫字母，使其突出顯示。
 
 # --hints--
 
-You should have an opening `<h1>` tag.
+你應該有一個 `<h1>` 開始標籤。
 
 ```js
 assert(code.match(/<h1>/i));
 ```
 
-You should have a closing `</h1>` tag.
+你應該有一個 `</h1>` 結束標籤。
 
 ```js
 assert(code.match(/<\/h1>/i));
 ```
 
-You should not change your existing `main` element.
+你不應該改變你現有的 `main` 元素。
 
 ```js
 assert($('main').length === 1);
 ```
 
-Your `h1` element should be nested in your `main` element.
+你的 `h1` 元素應該嵌套在你的 `main` 元素中。
 
 ```js
 assert($('h1')[0].parentElement.tagName === "MAIN");
 ```
 
-Your `h1` element should have the text `CAMPER CAFE`.
+你的 `h1` 元素應該有文字 `CAMPER CAFE`。
 
 ```js
 assert(code.match(/<h1>CAMPER CAFE<\/h1>/));
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
index 93fab4bf209..dd079308bab 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
@@ -7,35 +7,35 @@ dashedName: step-7
 
 # --description--
 
-To let visitors know the cafe was founded in 2020, add a `p` element below the `h1` element with the text `Est. 2020`.
+爲了讓訪客知道這家咖啡館成立於 2020 年，在 `h1` 元素下面添加一個 `p`元素，文字爲 `Est. 2020`。
 
 # --hints--
 
-You should have an opening `<p>` tag.
+你應該有一個 `<p>` 開始標籤。
 
 ```js
 assert(code.match(/<p>/i));
 ```
 
-You should have a closing `</p>` tag.
+你應該有一個 `</p>` 結束標籤。
 
 ```js
 assert(code.match(/<\/p>/i));
 ```
 
-You should not change your existing `h1` element. Make sure you did not delete the closing tag.
+你不應該改變你現有的 `h1` 元素。 確認你沒有刪除結束標籤。
 
 ```js
 assert($('h1').length === 1);
 ```
 
-Your `p` element should be below your `h1` element.
+你的 `p` 元素應該在 `h1` 元素的下面。
 
 ```js
 assert($('p')[0].previousElementSibling.tagName === 'H1');
 ```
 
-Your `p` element should have the text `Est. 2020`.
+你的 `p` 元素應該有文本 `Est. 2020`。
 
 ```js
 assert(document.querySelector("p").innerText === "Est. 2020");
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md
index 7e196433574..6aa491ddd8a 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md
@@ -1,6 +1,6 @@
 ---
 id: 5f344f9c805cd193c33d829c
-title: Step 11
+title: 步驟 11
 challengeType: 0
 dashedName: step-11
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
index 185b6de104d..92a9d1997b7 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
@@ -1,6 +1,6 @@
 ---
 id: 5f344fad8bf01691e71a30eb
-title: Step 10
+title: 步驟 10
 challengeType: 0
 dashedName: step-10
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md
index c3cfba4627b..53c32357f4b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md
@@ -1,6 +1,6 @@
 ---
 id: 5f344fbc22624a2976425065
-title: Step 9
+title: 步驟 9
 challengeType: 0
 dashedName: step-9
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
index 2866c9f4443..db1a9645e59 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
@@ -1,6 +1,6 @@
 ---
 id: 5f344fc1520b6719f2e35605
-title: Step 8
+title: 步驟 8
 challengeType: 0
 dashedName: step-8
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
index 7f42422f56f..285193a8b11 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3477ae34c1239cafe128be
-title: Step 13
+title: 步驟 13
 challengeType: 0
 dashedName: step-13
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
index 0a374004c96..e55b00e63e4 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3477ae8466a9a3d2cc953c
-title: Step 15
+title: 步驟 15
 challengeType: 0
 dashedName: step-15
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
index 36b2d0703ad..997f11dfd11 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
@@ -1,13 +1,13 @@
 ---
 id: 5f3477ae9675db8bb7655b30
-title: Step 12
+title: 步驟 12
 challengeType: 0
 dashedName: step-12
 ---
 
 # --description--
 
-在上一步中，你使用 <dfn>類型選擇器</dfn> 來設置 `h1` 元素的樣式。 Center the `h2` and `p` elements by adding a new type selector for each one to the existing `style` element.
+在上一步中，你使用 <dfn>類型選擇器</dfn> 來設置 `h1` 元素的樣式。 將 `h2` 和 `p` 元素居中，通過在現有的 `style` 元素中給它們添加一個新的選擇器來實現。
 
 # --hints--
 
@@ -18,42 +18,42 @@ const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
 assert(hasH1);
 ```
 
-You should not add a new `style` tag. Add the new CSS rules to the existing `style` tag.
+你不應該添加一個新的 `style` 標籤。 將新的 CSS 規則添加到現有的 `style` 標籤中。
 
 ```js
 const hasManyStyleTags = document.querySelectorAll('style').length > 1;
 assert(!hasManyStyleTags);
 ```
 
-You should add a new `h2` selector.
+你應該添加一個新的 `h2` 選擇器。
 
 ```js
 const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
 assert(hasH2);
 ```
 
-You should add a new `p` selector.
+你應該添加一個新的 `p` 選擇器。
 
 ```js
 const hasP = new __helpers.CSSHelp(document).getStyle('p');
 assert(hasP);
 ```
 
-Your `h1` element should have a `text-align` of `center`.
+你的 `h1` 元素應該有一個 `text-align` 值爲 `center`。
 
 ```js
 const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
 assert(h1TextAlign === 'center');
 ```
 
-Your `h2` element should have a `text-align` of `center`.
+你的 `h2` 元素應該有一個 `text-align` 值爲 `center`。
 
 ```js
 const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align');
 assert(h2TextAlign === 'center');
 ```
 
-Your `p` element should have a `text-align` of `center`.
+你的 `p` 元素應該有一個 `text-align` 值爲 `center`。
 
 ```js
 const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
index 257a8d7b004..0fb90a8b3e2 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3477aefa51bfc29327200b
-title: Step 14
+title: 步驟 14
 challengeType: 0
 dashedName: step-14
 ---
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 07bdfd0fc45..a5c3c1ea1b4 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
@@ -1,6 +1,6 @@
 ---
 id: 5f3477cb2e27333b1ab2b955
-title: Step 16
+title: 步驟 16
 challengeType: 0
 dashedName: step-16
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
index 3dfcead55fe..9c2cbbc6827 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3477cb303c5cb61b43aa9b
-title: Step 18
+title: 步驟 18
 challengeType: 0
 dashedName: step-18
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
index 1c614fb469d..7465045a362 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3477cbcb6ba47918c1da92
-title: Step 17
+title: 步驟 17
 challengeType: 0
 dashedName: step-17
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
index f9cfc61d01b..862ffa4516f 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
@@ -1,6 +1,6 @@
 ---
 id: 5f34a1fd611d003edeafd681
-title: Step 19
+title: 步驟 19
 challengeType: 0
 dashedName: step-19
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
index da8e2e03b82..b1d044df50c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed60785e1f3e9850b6e
-title: Step 24
+title: 步驟 24
 challengeType: 0
 dashedName: step-24
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
index 99ed6d7329f..bba6d4e1cdb 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed60a5decd94ab66986
-title: Step 22
+title: 步驟 22
 challengeType: 0
 removeComments: false
 dashedName: step-22
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
index de7771f41f3..97e4b42917a 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed6199b0cdef1d2be8f
-title: Step 26
+title: 步驟 26
 challengeType: 0
 dashedName: step-26
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
index a78bfb1b29c..34742eb09bf 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed63c7807a4f1e6d054
-title: Step 21
+title: 步驟 21
 challengeType: 0
 dashedName: step-21
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
index 26bdbd79227..5867bd7a225 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed63e0fa262326eef05
-title: Step 23
+title: 步驟 23
 challengeType: 0
 dashedName: step-23
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
index 9271da5b26a..d67f2fcbfbd 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed656a336993abd9f7c
-title: Step 25
+title: 步驟 25
 challengeType: 0
 dashedName: step-25
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
index 926f6aae26c..b73aa618309 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed69db0a491745e2bb6
-title: Step 27
+title: 步驟 27
 challengeType: 0
 dashedName: step-27
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
index 9d7aaed358a..5990515bc9d 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed6cf6eab5f15f5cfe6
-title: Step 20
+title: 步驟 20
 challengeType: 0
 dashedName: step-20
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
index c7f15a0eead..f018c03df24 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
@@ -1,6 +1,6 @@
 ---
 id: 5f35e5c4321f818cdc4bed30
-title: Step 29
+title: 步驟 29
 challengeType: 0
 dashedName: step-29
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
index 3b72cd70fde..4c4f6418788 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
@@ -1,6 +1,6 @@
 ---
 id: 5f35e5c44359872a137bd98f
-title: Step 28
+title: 步驟 28
 challengeType: 0
 dashedName: step-28
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
index 2ed935cd80b..32714deaea8 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3c866d0fc037f7311b4ac8
-title: Step 38
+title: 步驟 38
 challengeType: 0
 dashedName: step-38
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
index d365499a060..9fdcbccf280 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3c866d28d7ad0de6470505
-title: Step 32
+title: 步驟 32
 challengeType: 0
 dashedName: step-32
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
index ed5f86e4cab..cdf6849c47e 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3c866d5414453fc2d7b480
-title: Step 31
+title: 步驟 31
 challengeType: 0
 dashedName: step-31
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
index e29e364832f..87a7d13b143 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3c866daec9a49519871816
-title: Step 30
+title: 步驟 30
 challengeType: 0
 dashedName: step-30
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
index 0982b4d0b3b..bde853b3dee 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3c866dbf362f99b9a0c6d0
-title: Step 37
+title: 步驟 37
 challengeType: 0
 dashedName: step-37
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
index 7ef112a8a33..4d7ca4ff486 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3c866dd0d0275f01d4d847
-title: Step 39
+title: 步驟 39
 challengeType: 0
 dashedName: step-39
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
index 8d3a5323c47..2630a303007 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3c866de7a5b784048f94b1
-title: Step 36
+title: 步驟 36
 challengeType: 0
 dashedName: step-36
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
index 2e8d8bc5d42..999a3915c3c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3cade94c6576e7f7b7953f
-title: Step 41
+title: 步驟 41
 challengeType: 0
 dashedName: step-41
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
index 7d902eeeb5c..8cd3f8e27c1 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3cade9993019e26313fa8e
-title: Step 42
+title: 步驟 42
 challengeType: 0
 dashedName: step-42
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
index 772c4fc8df6..9a470055397 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3cade99dda4e6071a85dfd
-title: Step 46
+title: 步驟 46
 challengeType: 0
 dashedName: step-46
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
index 7dd2f90fca6..62895ca218c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3cade9fa77275d9f4efe62
-title: Step 40
+title: 步驟 40
 challengeType: 0
 dashedName: step-40
 ---
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 280305c0e26..2d3af8d4630 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
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e01f288a026d709587
-title: Step 66
+title: 步驟 66
 challengeType: 0
 dashedName: step-66
 ---
@@ -9,7 +9,7 @@ dashedName: step-66
 
 你可以使用 `hr` 元素在不同內容的部分之間顯示一個分隔符。
 
-First, add an `hr` element between the `p` element with the class `established` and the first `section` element. 注意：`hr` 元素是沒有結束標籤的。
+首先，在具有 `established` 類的 `p` 元素和第一個 `section` 之間添加一個 `hr` 元素。 注意：`hr` 元素是沒有結束標籤的。
 
 # --hints--
 
@@ -20,7 +20,7 @@ assert(code.match(/<hr\s?\/?>/i));
 assert(!code.match(/<\/hr>/i));
 ```
 
-You should not change your existing `p` element with the class `established`.
+你不應更改你現有的具有類 `established` 的 `p` 元素。
 
 ```js
 assert($('p.established').length === 1);
@@ -32,7 +32,7 @@ assert($('p.established').length === 1);
 assert($('main').length === 1);
 ```
 
-Your `hr` element should be between your `p` element and your `section` element.
+你的 `hr` 元素應該在你的 `p` 元素和 `section` 元素之間。
 
 ```js
 assert($('hr')[0].previousElementSibling.tagName === 'P');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
index e634a1ef8af..9a3926ea526 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e03d719d5ac4738993
-title: Step 56
+title: 步驟 56
 challengeType: 0
 dashedName: step-56
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md
index f92cef23c78..523742b0157 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e04559b939080db057
-title: Step 55
+title: 步驟 55
 challengeType: 0
 dashedName: step-55
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
index 2317f224b71..cbb99001fb7 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e050279c7a4a7101d3
-title: Step 54
+title: 步驟 54
 challengeType: 0
 dashedName: step-54
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md
index 881de3e0990..619448980dc 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e05473f91f948724ab
-title: Step 57
+title: 步驟 57
 challengeType: 0
 dashedName: step-57
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
index e40058e7e9b..a585c770ee6 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e056bdde6ae6892ba2
-title: Step 58
+title: 步驟 58
 challengeType: 0
 dashedName: step-58
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md
index e62195e2035..81f1d9776ac 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e06d34faac0447fc44
-title: Step 60
+title: 步驟 60
 challengeType: 0
 dashedName: step-60
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md
index 884c1b3034c..eebb3c28f15 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e07276f782bb46b93d
-title: Step 63
+title: 步驟 63
 challengeType: 0
 dashedName: step-63
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md
index fb141fa8883..66f6adea381 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e0819d4f23ca7285e6
-title: Step 48
+title: 步驟 48
 challengeType: 0
 dashedName: step-48
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md
index bb35aa9d834..c44da666b24 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e087d56ed3ffdc36be
-title: Step 61
+title: 步驟 61
 challengeType: 0
 dashedName: step-61
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md
index 149cb190b8f..8acf942f13e 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e0a81099d9a697b550
-title: Step 64
+title: 步驟 64
 challengeType: 0
 dashedName: step-64
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md
index 74812aed0f5..17aee0231eb 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e0b431cc215bb16f55
-title: Step 65
+title: 步驟 65
 challengeType: 0
 dashedName: step-65
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md
index 8e522b2eb7a..29cc9374394 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e0e0c3feaebcf647ad
-title: Step 47
+title: 步驟 47
 challengeType: 0
 dashedName: step-47
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md
index 38d3d0a854a..04ec61b65a8 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e0e9629bad967cd71e
-title: Step 59
+title: 步驟 59
 challengeType: 0
 dashedName: step-59
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md
index b2c8448b803..7a877066d68 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e0eaa7da26e3d34d78
-title: Step 53
+title: 步驟 53
 challengeType: 0
 dashedName: step-53
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
index 7bb595ac86a..f5ce25b61f1 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e0f8c230bdd2349716
-title: Step 62
+title: 步驟 62
 challengeType: 0
 dashedName: step-62
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md
index 1afc761d7cb..6445da4462f 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3f26fa39591db45e5cd7a0
-title: Step 67
+title: 步驟 67
 challengeType: 0
 dashedName: step-67
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md
index c079ef58d4a..04784dfd3a3 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md
@@ -1,6 +1,6 @@
 ---
 id: 5f459225127805351a6ad057
-title: Step 68
+title: 步驟 68
 challengeType: 0
 dashedName: step-68
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md
index c4e53c162e6..09ab416802a 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md
@@ -1,6 +1,6 @@
 ---
 id: 5f459a7ceb8b5c446656d88b
-title: Step 69
+title: 步驟 69
 challengeType: 0
 dashedName: step-69
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md
index ee6b2afa670..bd072fb6521 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md
@@ -1,6 +1,6 @@
 ---
 id: 5f459cf202c2a3472fae6a9f
-title: Step 70
+title: 步驟 70
 challengeType: 0
 dashedName: step-70
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md
index 4fc83f49b4a..e781b37af56 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md
@@ -1,6 +1,6 @@
 ---
 id: 5f459fd48bdc98491ca6d1a3
-title: Step 71
+title: 步驟 71
 challengeType: 0
 dashedName: step-71
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md
index 733715c9112..c4a70d90d3c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45a05977e2fa49d9119437
-title: Step 72
+title: 步驟 72
 challengeType: 0
 dashedName: step-72
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md
index 45473a8667f..757d53ef99f 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45a276c093334f0f6e9df4
-title: Step 73
+title: 步驟 73
 challengeType: 0
 dashedName: step-73
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md
index ba246f6e9e7..27d188c3d2c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45a5a7c49a8251f0bdb527
-title: Step 74
+title: 步驟 74
 challengeType: 0
 dashedName: step-74
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md
index 873ee72f333..cbc384e5310 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45a66d4a2b0453301e5a26
-title: Step 78
+title: 步驟 78
 challengeType: 0
 dashedName: step-78
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md
index efbe45df273..5eaa8514870 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45b0731d39e15d54df4dfc
-title: Step 79
+title: 步驟 79
 challengeType: 0
 dashedName: step-79
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md
index 6dc7f2e3f63..9c9dd7e5e8b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45b25e7ec2405f166b9de1
-title: Step 80
+title: 步驟 80
 challengeType: 0
 dashedName: step-80
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md
index 932aa6a6c61..1ce1ef2653c 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45b3c93c027860d9298dbd
-title: Step 81
+title: 步驟 81
 challengeType: 0
 dashedName: step-81
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md
index 2ba5802bade..97395e396a0 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45b45d099f3e621fbbb256
-title: Step 82
+title: 步驟 82
 challengeType: 0
 dashedName: step-82
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md
index d980f0baa29..fbf9152eeee 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45b4c81cea7763550e40df
-title: Step 83
+title: 步驟 83
 challengeType: 0
 dashedName: step-83
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md
index 94a447ef182..740ae11e768 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45b715301bbf667badc04a
-title: Step 84
+title: 步驟 84
 challengeType: 0
 dashedName: step-84
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md
index 51492875b41..ba48c1e3232 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md
@@ -1,6 +1,6 @@
 ---
 id: 5f46e270702a8456a664f0df
-title: Step 85
+title: 步驟 85
 challengeType: 0
 dashedName: step-85
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
index 5ce783392dc..0b40dc1f737 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
@@ -1,6 +1,6 @@
 ---
 id: 5f46e36e745ead58487aabf2
-title: Step 86
+title: 步驟 86
 challengeType: 0
 dashedName: step-86
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md
index 3d97f1fa776..5649a25e456 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md
@@ -1,6 +1,6 @@
 ---
 id: 5f46e7a4750dd05b5a673920
-title: Step 87
+title: 步驟 87
 challengeType: 0
 dashedName: step-87
 ---
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 8e600de6847..703455930c9 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
@@ -1,6 +1,6 @@
 ---
 id: 5f46e8284aae155c83015dee
-title: Step 88
+title: 步驟 88
 challengeType: 0
 dashedName: step-88
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md
index dccee1f122e..cf3e79306aa 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md
@@ -1,6 +1,6 @@
 ---
 id: 5f46ede1ff8fec5ba656b44c
-title: Step 77
+title: 步驟 77
 challengeType: 0
 dashedName: step-77
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md
index d7ed8b8cf77..46272a07d18 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md
@@ -1,6 +1,6 @@
 ---
 id: 5f46fc57528aa1c4b5ea7c2e
-title: Step 75
+title: 步驟 75
 challengeType: 0
 dashedName: step-75
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
index db6b88c2afa..8c79b34eadb 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
@@ -1,6 +1,6 @@
 ---
 id: 5f4701b942c824109626c3d8
-title: Step 76
+title: 步驟 76
 challengeType: 0
 dashedName: step-76
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md
index 17d4b3dee80..a1111e3f950 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md
@@ -1,6 +1,6 @@
 ---
 id: 5f475bb508746c16c9431d42
-title: Step 89
+title: 步驟 89
 challengeType: 0
 dashedName: step-89
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md
index fcb391c882d..ab1b5849d7d 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md
@@ -1,6 +1,6 @@
 ---
 id: 5f475e1c7f71a61d913836c6
-title: Step 90
+title: 步驟 90
 challengeType: 0
 dashedName: step-90
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md
index 670e9f32d46..c75d965e163 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md
@@ -1,6 +1,6 @@
 ---
 id: 5f47633757ae3469f2d33d2e
-title: Step 45
+title: 步驟 45
 challengeType: 0
 dashedName: step-45
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md
index a428f4410df..507421a02a8 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md
@@ -1,6 +1,6 @@
 ---
 id: 5f47fe7e31980053a8d4403b
-title: Step 91
+title: 步驟 91
 challengeType: 0
 dashedName: step-91
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md
index 9192cdf1226..f292ae12304 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md
@@ -1,6 +1,6 @@
 ---
 id: 5f716ad029ee4053c7027a7a
-title: Step 49
+title: 步驟 49
 challengeType: 0
 dashedName: step-49
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md
index 4d5d1b8e03c..f5ce511c13b 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md
@@ -1,6 +1,6 @@
 ---
 id: 5f716bee5838c354c728a7c5
-title: Step 52
+title: 步驟 52
 challengeType: 0
 dashedName: step-52
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md
index 480ec3d45c5..576050649e0 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md
@@ -1,6 +1,6 @@
 ---
 id: 5f7691dafd882520797cd2f0
-title: Step 43
+title: 步驟 43
 challengeType: 0
 dashedName: step-43
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md
index 3ff125662ad..80107779173 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md
@@ -1,6 +1,6 @@
 ---
 id: 5f7692f7c5b3ce22a57788b6
-title: Step 44
+title: 步驟 44
 challengeType: 0
 dashedName: step-44
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md
index 26590032080..a34c8bd9cb7 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md
@@ -1,6 +1,6 @@
 ---
 id: 5f769541be494f25449b292f
-title: Step 33
+title: 步驟 33
 challengeType: 0
 dashedName: step-33
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
index 1e39f4950af..daf350046d9 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
@@ -1,6 +1,6 @@
 ---
 id: 5f76967fad478126d6552b0d
-title: Step 34
+title: 步驟 34
 challengeType: 0
 dashedName: step-34
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md
index ee4d5ca34a6..ffd0cee7bbb 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md
@@ -1,6 +1,6 @@
 ---
 id: 5f769702e6e33127d14aa120
-title: Step 35
+title: 步驟 35
 challengeType: 0
 dashedName: step-35
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md
index 41dcda4548a..f844e3c39e6 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md
@@ -1,6 +1,6 @@
 ---
 id: 5f7b87422a560036fd03ccff
-title: Step 50
+title: 步驟 50
 challengeType: 0
 dashedName: step-50
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md
index d73081b14ac..b7d9ef821cc 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md
@@ -1,6 +1,6 @@
 ---
 id: 5f7b88d37b1f98386f04edc0
-title: Step 51
+title: 步驟 51
 challengeType: 0
 dashedName: step-51
 ---
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md
index 7448eb6775b..74fb6bca21e 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md
@@ -7,24 +7,24 @@ dashedName: step-5
 
 # --description--
 
-Add another self-closing `meta` element within the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0` so your page looks the same on all devices.
+在 `head` 中添加另一個自閉合的 `meta` 元素。 給它一個 `name` 屬性值爲 `viewport`，和一個 `content` 屬性值爲 `width=device-width, initial-scale=1.0`，這樣你的頁面在各種設備上看起來是一樣的。
 
 # --hints--
 
-You should have two `meta` elements.
+你應該有兩個 `meta` 元素。
 
 ```js
 const meta = document.querySelectorAll('meta');
 assert(meta?.length === 2);
 ```
 
-Your new `meta` element should be a self-closing element.
+你的新 `meta` 元素應該是一個自閉合元素。
 
 ```js
 assert(code.match(/<\/meta>/i) === null);
 ```
 
-Your new `meta` element should have a `name` attribute set to `viewport`, and a `content` attribute set to `width=device-width, initial-scale=1.0`.
+你的新 `meta` 元素應將 `name` 屬性設置爲 `viewport`，並將 `content` 屬性設置爲 `width=device-width, initial-scale=1.0`。
 
 ```js
 const meta = [...document.querySelectorAll('meta')];
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
index abe05cb0cc4..7593626cb39 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
@@ -7,7 +7,7 @@ dashedName: step-20
 
 # --description--
 
-`::after` 用來創建一個僞元素，作爲已選中元素的最後一個子元素。 You can use it to add an empty element after the last image. If you give it the same `width` as the images it will push the last image to the left when the gallery is in a two-column layout. Right now, it is in the center because you set `justify-content: center` on the flex container.
+`::after` 用來創建一個僞元素，作爲已選中元素的最後一個子元素。 你可以用它在最後一個圖像後添加一個空元素。 如果你設置其 `width` 爲和圖像相同，如果是兩列布局，它會將最後一張圖像擠到左邊。 現在它居中顯示，因爲你在 flex 容器上設置了 `justify-content: center`。
 
 例如：
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
index 01e995c8100..800128148e4 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
@@ -7,7 +7,7 @@ dashedName: step-13
 
 # --description--
 
-Center the parts of your building by turning the `.bb1` element into a flexbox parent. Use the `flex-direction` and `align-items` properties to center the children.
+將 `.bb1` 元素轉換成彈性盒子（flexbox）父元素來居中你建築物。 使用 `flex-direction` 和 `align-items` 屬性來居中子項。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
index 0793acafb67..b0e617762d7 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
@@ -9,7 +9,7 @@ dashedName: step-5
 
 HTML5 有些元素能夠指明不同的內容區域。 這些元素能讓你的 HTML 易於閱讀，並有助於搜索引擎優化（SEO）和無障礙訪問。
 
-Identify the main section of this page by adding a `<main>` opening tag before the `h1` element, and a `</main>` closing tag after the `p` element.
+通過在 `h1` 元素之前添加 `<main>` 開始標籤和在 `p` 元素之後添加 `</main>` 結束標籤來標識此頁面的主要部分。
 
 # --hints--
 
@@ -25,14 +25,14 @@ assert(document.querySelector('main'));
 assert(code.match(/<\/main\>/));
 ```
 
-Your `main` element's opening tag should be below the `body` element. 你把順序寫錯了。
+你的 `main` 元素的開始標籤應該在 `body` 元素的下方。 你把順序寫錯了。
 
 ```js
 const main = document.querySelector('main');
 assert.equal(main?.previousElementSibling, null);
 ```
 
-Your `main` element's opening tag should be above the `h1` element. 你把順序寫錯了。
+你的 `main` 元素的開始標籤應該在 `h1` 元素上方。 你把順序寫錯了。
 
 ```js
 const collection = [...document.querySelectorAll('main,h1')].map(
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
index 7acfbe7ce19..4a4e5cbf3fd 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -7,9 +7,9 @@ dashedName: step-6
 
 # --description--
 
-In the previous step, you put the `h1`, `h2`, comment, and `p` elements inside the `main` element. 這叫作 *嵌套*。 嵌套的元素（子元素）的位置應該放在被他們嵌套的元素（父元素）中新的一行並且右側保留兩個空格的間距的後面。 這個間距被稱爲縮進，它被用來使 HTML 更容易讀。
+在上一步中，你將 `h1` 元素、`h2` 元素、註釋和 `p` 元素嵌套在 `main` 元素中。 這叫作 *嵌套*。 嵌套的元素（子元素）的位置應該放在被他們嵌套的元素（父元素）中新的一行並且右側保留兩個空格的間距的後面。 這個間距被稱爲縮進，它被用來使 HTML 更容易讀。
 
-The `h1` element, `h2` element and the comment are indented two spaces more than the `main` element in the code below. 使用鍵盤上的空格鍵在 `p` 元素前面再添加兩個空格，使其縮進得當。
+`h1` 元素、`h2` 元素和註釋比下面代碼中的 `main` 元素多縮進了兩個空格。 使用鍵盤上的空格鍵在 `p` 元素前面再添加兩個空格，使其縮進得當。
 
 # --hints--
 
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 40744dba057..2945647bcc1 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
@@ -9,7 +9,7 @@ dashedName: step-11
 
 鏈接的文本必須放置在錨點元素（`a`）的起始和閉合標籤之間。 例如，`<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>` 就是一個包含着文本 `click here to go to freeCodeCamp.org` 的鏈接。
 
-Add the anchor text `link to cat pictures` to the anchor element. 這將成爲鏈接的文本。
+將錨點文本 `link to cat pictures` 添加到錨點元素中。 這將成爲鏈接的文本。
 
 # --hints--
 
@@ -25,7 +25,7 @@ assert(document.querySelector('a'));
 assert(code.match(/<\/a\>/));
 ```
 
-Your anchor (`a`) element's text should be `link to cat pictures`. 確保將鏈接的文本放置在錨點元素（`a`）的起始和閉合標籤之間。
+你的錨點元素（`a`）中的文本應該是 `link to cat pictures`。 確保將鏈接的文本放置在錨點元素（`a`）的起始和閉合標籤之間。
 
 ```js
 assert(
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index fdb6855b46d..cb0c5d456c5 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -7,9 +7,9 @@ dashedName: step-12
 
 # --description--
 
-In the previous step you turned the words `link to cat pictures` into a link by placing them between opening and closing anchor (`a`) tags. You can do the same to words inside of an element, such as a `p` element.
+在前一步驟中，你將單詞 `link to cat pictures` 轉換爲一個鏈接，將它們放置在開始和結束錨點（`a`）標籤之間。 你可以對元素內的單詞做同樣的操作，例如 `p` 元素。
 
-In the text of your `p` element, turn the words `cat photos` into a link to `https://freecatphotoapp.com` by adding opening and closing anchor (`a`) tags around these words.
+在你的 `p` 元素的文本中，將單詞 `cat photos` 轉換爲指向 `https://freecatphotoapp.com` 的鏈接，通過把這些單詞放到開始和結束錨點標籤（`a`）內來實現。
 
 
 # --hints--
@@ -20,7 +20,7 @@ In the text of your `p` element, turn the words `cat photos` into a link to `htt
 assert($('p > a').length);
 ```
 
-The link's `href` value should be `https://freecatphotoapp.com`. You have either omitted the `href` value or have a typo.
+鏈接的 `href` 值應爲 `https://freecatphotoapp.com`。 你可能落下了 `href` 值或者有拼寫有誤。
 
 ```js
 const nestedAnchor = $('p > a')[0];
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
index e2fa2c04b23..53ba308fdb5 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
@@ -9,7 +9,7 @@ dashedName: step-16
 
 在添加任何新內容之前，你應該使用 `section` 元素將貓咪照片內容與未來的內容分開。
 
-Take your `h2`, comment, `p`, and anchor (`a`) elements and nest them in a `section` element.
+將你的 `h2` 元素、註釋、`p` 元素和錨點（`a`）元素嵌套在一個 `section` 元素中。
 
 # --hints--
 
@@ -41,7 +41,7 @@ const foundElements = childrenOfSection.filter((child) => {
 assert(foundElements.length === 3);
 ```
 
-The `h1` element should not be nested in the `section` element.
+`h1` 元素不應該被嵌套在 `section` 元素中。
 
 ```js
 const childrenOfSection = [...document.querySelector('section').childNodes];
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md
index 4fb3975bb6b..f4c294ef7da 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md
@@ -6,25 +6,25 @@ dashedName: step-8
 ---
 
 # --description--
-The `vh` unit stands for viewport height, and is relative to 1% of the `height` of the viewport.
+`vh` 單位代表視口高度（viewport height），相當於視口 `height` 高度的 1%。
 
-It is time to spruce the project up with some CSS. Begin by giving the `body` a `width` of `100%`, and a `height` of `100vh`.
+現在是時候用 CSS 來裝飾項目了。 首先設置 `body` 的 `width` 爲 `100%`，`height` 爲 `100vh`。
 
 # --hints--
 
-You should use the `body` element selector.
+你應該使用 `body` 元素選擇器。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
 ```
 
-You should give the `body` a `width` of `100%`.
+你應該把 `body` 元素的 `width` 屬性值設置爲 `100%`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
 ```
 
-You should give the `body` a `height` of `100vh`.
+你應該把 `body` 的 `height` 設置爲 `100vh`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
diff --git a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md
index 995e63d1d3f..4acc8970554 100644
--- a/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md
+++ b/curriculum/challenges/chinese-traditional/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md
@@ -6,25 +6,25 @@ dashedName: step-15
 ---
 
 # --description--
-The `rem` unit stands for root `em`, and is relative to the font size of the `html` element.
+`rem` 單位代表根 `em`，與 `html` 元素的字體大小有關。
 
-As `label` elements are inline by default, they are all displayed side by side on the same line, making their text hard to read. To make them appear on separate lines, add `display: block` to the `label` element, and add a `margin` of `0.5rem 0`, to separate them from each other.
+由於 `label` 元素默認是行內元素，它們出現在其標籤文本的同一行，使得文本難以閱讀。 給 `label` 元素添加 `display: block`，並設置其 `margin` 爲 `0.5rem 0`，來使其顯示在不同的行，並且行之間有一定的距離。
 
 # --hints--
 
-You should use the `label` selector.
+你應該使用 `label` 選擇器。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('label'));
 ```
 
-You should add a `display` property of value `block`.
+你應該將 `display` 屬性設置爲 `block`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.display, 'block');
 ```
 
-You should add a `margin` property of value `0.5rem 0`.
+你應該添加 `margin` 屬性，值爲 `0.5rem 0`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.margin, '0.5rem 0px');
diff --git a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
index 6f444d2befd..d70515df0e7 100644
--- a/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
+++ b/curriculum/challenges/chinese/01-responsive-web-design/responsive-web-design-projects/build-a-survey-form.md
@@ -91,7 +91,7 @@ const el = document.getElementById('name')
 assert(!!el && el.required)
 ```
 
-Your `#name` should be a descendant of `#survey-form`.
+你的 `#name` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #name')
@@ -119,7 +119,7 @@ const el = document.getElementById('email')
 assert(!!el && el.required)
 ```
 
-Your `#email` should be a descendant of `#survey-form`
+你的 `#email` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #email')
@@ -133,7 +133,7 @@ const el = document.getElementById('number')
 assert(!!el && el.tagName === 'INPUT')
 ```
 
-Your `#number` should be a descendant of `#survey-form`.
+你的 `#number` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #number')
@@ -203,21 +203,21 @@ const el = document.getElementById('number-label')
 assert(!!el && el.innerText.length > 0)
 ```
 
-Your `#name-label` should be a descendant of `#survey-form`.
+你的 `#name-label` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #name-label')
 assert(!!el)
 ```
 
-Your `#email-label` should be a descendant of `#survey-form`.
+你的 `#email-label` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #email-label')
 assert(!!el)
 ```
 
-Your `#number-label` should be a descendant of `#survey-form`.
+你的 `#number-label` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #number-label')
diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md
index d4805808af1..67a1a6ae82c 100644
--- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md
+++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/basic-algorithm-scripting/falsy-bouncer.md
@@ -8,7 +8,7 @@ dashedName: falsy-bouncer
 
 # --description--
 
-Remove all falsy values from an array. Return a new array; do not mutate the original array.
+从数组中移除所有假值（falsy values）。 返回一个新数组；不要改变原始数组。
 
 JavaScript 中的假值有 `false`、`null`、`0`、`""`、`undefined`、`NaN`。
 
@@ -40,7 +40,7 @@ assert.deepEqual(bouncer([false, null, 0, NaN, undefined, '']), []);
 assert.deepEqual(bouncer([null, NaN, 1, 2, undefined]), [1, 2]);
 ```
 
-You should not mutate `arr`.
+你不应该改变 `arr`。
 
 ```js
 const arr = ['a', false, 0, 'Naomi'];
diff --git a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md
index 06e79d7cabf..ab7fcc3ca8c 100644
--- a/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md
+++ b/curriculum/challenges/chinese/02-javascript-algorithms-and-data-structures/functional-programming/add-elements-to-the-end-of-an-array-using-concat-instead-of-push.md
@@ -10,20 +10,20 @@ dashedName: add-elements-to-the-end-of-an-array-using-concat-instead-of-push
 
 函数式编程就是创建和使用具有不变性的函数。
 
-The last challenge introduced the `concat` method as a way to merge arrays into a new array without mutating the original arrays. 将 `concat` 方法与 `push` 方法做比较。 `push` adds items to the end of the same array it is called on, which mutates that array. 举个例子：
+上一个挑战介绍了 `concat` 方法，这是一种在不改变原始数组的前提下，将数组组合成一个新数组的方法。 将 `concat` 方法与 `push` 方法做比较。 `push` 将一个元素添加到调用它的数组的末尾，这样会改变该数组。 举个例子：
 
 ```js
 const arr = [1, 2, 3];
 arr.push(4, 5, 6);
 ```
 
-`arr` would have a modified value of `[1, 2, 3, 4, 5, 6]`, which is not the functional programming way.
+`arr` 的值被修改为 `[1, 2, 3, 4, 5, 6]`，这不是函数编程方式。
 
-`concat` offers a way to merge new items to the end of an array without any mutating side effects.
+`concat` 方法可以将新项目添加到数组末尾，而不附带改变数组。
 
 # --instructions--
 
-Change the `nonMutatingPush` function so it uses `concat` to merge `newItem` to the end of `original` without mutating `original` or `newItem` arrays. 该函数应返回一个数组。
+修改 `nonMutatingPush` 函数，用 `concat` 将 `newItem` 添加到 `original` 末尾，而不改变 `original` 或 `newItem` 数组。 该函数应返回一个数组。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md
index 356c343b7d1..3d65c42a65f 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-bar-chart
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to this: <a href="https://bar-chart.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://bar-chart.freecodecamp.rocks</a>.
+**目标：** 构建一个应用，功能和 <a href="https://bar-chart.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://bar-chart.freecodecamp.rocks</a> 类似。
 
 完成以下需求，并且通过所有测试。 使用你需要的任何库或 API。 赋予它你自己的个人风格。
 
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md
index 901a1d8dce3..5dda4b7d2e2 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-choropleth-map
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to this: <a href="https://choropleth-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://choropleth-map.freecodecamp.rocks</a>.
+**目标：** 构建一个应用，功能和 <a href="https://choropleth-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://choropleth-map.freecodecamp.rocks</a> 类似。
 
 完成以下需求，并且通过所有测试。 你可以使用你需要的任何库或 API。 赋予它你自己的个人风格。
 
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md
index accae2145bb..93429be07a2 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-heat-map
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to this: <a href="https://heat-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://heat-map.freecodecamp.rocks</a>.
+**目标：** 构建一个应用，功能和 <a href="https://heat-map.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://heat-map.freecodecamp.rocks</a> 类似。
 
 完成以下需求，并且通过所有测试。 你可以使用你需要的任何库或 API。 赋予它你自己的个人风格。
 
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md
index 8b6e0ed3e65..300e1782074 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-scatterplot-graph
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to this: <a href="https://scatterplot-graph.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://scatterplot-graph.freecodecamp.rocks</a>.
+**目标：** 构建一个应用，功能和 <a href="https://scatterplot-graph.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://scatterplot-graph.freecodecamp.rocks</a> 类似。
 
 完成以下需求，并且通过所有测试。 你可以使用你需要的任何库或 API。 赋予它你自己的个人风格。
 
diff --git a/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md b/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md
index 6e15203525b..1aae715d8ba 100644
--- a/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md
+++ b/curriculum/challenges/chinese/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md
@@ -8,7 +8,7 @@ dashedName: visualize-data-with-a-treemap-diagram
 
 # --description--
 
-**Objective:** Build an app that is functionally similar to this: <a href="https://treemap-diagram.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://treemap-diagram.freecodecamp.rocks</a>.
+**目标：** 构建一个应用，功能和 <a href="https://treemap-diagram.freecodecamp.rocks" target="_blank" rel="noopener noreferrer nofollow">https://treemap-diagram.freecodecamp.rocks</a> 类似。
 
 完成以下需求，并且通过所有测试。 使用你需要的任何库或 API。 赋予它你自己的个人风格。
 
diff --git a/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md b/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md
index 90897cbf5e1..f0406d58827 100644
--- a/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md
+++ b/curriculum/challenges/chinese/05-back-end-development-and-apis/mongodb-and-mongoose/create-a-model.md
@@ -10,9 +10,9 @@ dashedName: create-a-model
 
 **C** RUD 第一小节——CREATE
 
-First of all, we need a Schema. 每一个 Schema 都对应一个 MongoDB 的 collection， 并且在相应的 collection 里定义 documents 的“样子”。 Schemas are building blocks for Models. They can be nested to create complex models, but in this case, we'll keep things simple. 我们可以根据模型创建实例，模型实例化后的对象称为 documents。
+首先，我们需要一个 Schema。 每一个 Schema 都对应一个 MongoDB 的 collection， 并且在相应的 collection 里定义 documents 的“样子”。 Schema 用于组成模型（Model）。 我们甚至可以通过嵌套 Schema 来创建复杂的模型。目前我们先从简。 我们可以根据模型创建实例，模型实例化后的对象称为 documents。
 
-Replit is a real server, and in real servers, the interactions with the database happen in handler functions. 这些函数会在特定事件（比如有人调用了我们的服务器 API）发生时执行。 接下来的挑战题目即是以此为基础。 `done()` 是一个回调函数，它的作用是在一个异步操作（比如对数据库进行插入、查询、更新或删除）执行完成时，通知我们可以继续执行后续的其它代码。 这与 Node.js 中的处理方式十分类似，在 Node.js 中，我们会在（异步操作）成功时调用 `done(null, data)`，在失败时调用 `done(err)`。
+Replit 是一个真实的服务器，在其中，通过 handler 函数和数据库交互。 这些函数会在特定事件（比如有人调用了我们的服务器 API）发生时执行。 接下来的挑战题目即是以此为基础。 `done()` 是一个回调函数，它的作用是在一个异步操作（比如对数据库进行插入、查询、更新或删除）执行完成时，通知我们可以继续执行后续的其它代码。 这与 Node.js 中的处理方式十分类似，在 Node.js 中，我们会在（异步操作）成功时调用 `done(null, data)`，在失败时调用 `done(err)`。
 
 注意：与远程服务器进行交互时，我们需要考虑到发生错误的可能！
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md
index f6b5c1a9940..eb5314b4f61 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/build-your-own-functions.md
@@ -14,7 +14,7 @@ dashedName: build-your-own-functions
 
 更多资源
 
-\- <a href="https://www.youtube.com/watch?v=ksvGhDsjtpw" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+\- <a href="https://www.youtube.com/watch?v=ksvGhDsjtpw" target="_blank" rel="noopener noreferrer nofollow">练习</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md
index 941c4f6f5cd..d06cbe06bfe 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/comparing-and-sorting-tuples.md
@@ -14,7 +14,7 @@ dashedName: comparing-and-sorting-tuples
 
 更多资源：
 
-\- <a href="https://www.youtube.com/watch?v=EhQxwzyT16E" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+\- <a href="https://www.youtube.com/watch?v=EhQxwzyT16E" target="_blank" rel="noopener noreferrer nofollow">练习</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md
index a17bad4ed03..206b6ae76d8 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/data-visualization-mailing-lists.md
@@ -18,15 +18,15 @@ dashedName: data-visualization-mailing-lists
 
 \- <a href="https://www.youtube.com/watch?v=wSpl1-7afAk" target="_blank" rel="noopener noreferrer nofollow">练习：Gmane 模型</a>
 
-\- <a href="https://www.youtube.com/watch?v=H3w4lOFBUOI" target="_blank" rel="noopener noreferrer nofollow">Exercise: Gmane Spider</a>
+\- <a href="https://www.youtube.com/watch?v=H3w4lOFBUOI" target="_blank" rel="noopener noreferrer nofollow">练习：Gmane Spider</a>
 
-\- <a href="https://www.youtube.com/watch?v=LRqVPMEXByw" target="_blank" rel="noopener noreferrer nofollow">Exercise: Gmane Viz</a>
+\- <a href="https://www.youtube.com/watch?v=LRqVPMEXByw" target="_blank" rel="noopener noreferrer nofollow">练习：Gmane Viz</a>
 
-\- <a href="https://www.youtube.com/watch?v=yFRAZBkBDBs" target="_blank" rel="noopener noreferrer nofollow">Exercise: Page Rank</a>
+\- <a href="https://www.youtube.com/watch?v=yFRAZBkBDBs" target="_blank" rel="noopener noreferrer nofollow">练习：Page Rank</a>
 
-\- <a href="https://www.youtube.com/watch?v=sXedPQ_AnWA" target="_blank" rel="noopener noreferrer nofollow">Exercise: Page Spider</a>
+\- <a href="https://www.youtube.com/watch?v=sXedPQ_AnWA" target="_blank" rel="noopener noreferrer nofollow">练习：Page Spider</a>
 
-\- <a href="https://www.youtube.com/watch?v=Fm0hpkxsZoo" target="_blank" rel="noopener noreferrer nofollow">Exercise: Page Viz</a>
+\- <a href="https://www.youtube.com/watch?v=Fm0hpkxsZoo" target="_blank" rel="noopener noreferrer nofollow">练习：Page Viz</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md
index 48549537107..84d6620d24a 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/dictionaries-and-loops.md
@@ -14,7 +14,7 @@ dashedName: dictionaries-and-loops
 
 更多资源：
 
-\- <a href="https://www.youtube.com/watch?v=PrhZ9qwBDD8" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+\- <a href="https://www.youtube.com/watch?v=PrhZ9qwBDD8" target="_blank" rel="noopener noreferrer nofollow">练习</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md
index 731b081d1d4..b1988202b94 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/intermediate-strings.md
@@ -14,7 +14,7 @@ dashedName: intermediate-strings
 
 更多资料：
 
-\- <a href="https://www.youtube.com/watch?v=1bSqHot-KwE" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+\- <a href="https://www.youtube.com/watch?v=1bSqHot-KwE" target="_blank" rel="noopener noreferrer nofollow">练习</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md
index a180160faaa..aa147498e8c 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/more-conditional-structures.md
@@ -14,9 +14,9 @@ dashedName: more-conditional-structures
 
 更多资源：
 
-\- <a href="https://www.youtube.com/watch?v=crLerB4ZxMI" target="_blank" rel="noopener noreferrer nofollow">Exercise 1</a>
+\- <a href="https://www.youtube.com/watch?v=crLerB4ZxMI" target="_blank" rel="noopener noreferrer nofollow">练习 1</a>
 
-\- <a href="https://www.youtube.com/watch?v=KJN3-7HH6yk" target="_blank" rel="noopener noreferrer nofollow">Exercise 2</a>
+\- <a href="https://www.youtube.com/watch?v=KJN3-7HH6yk" target="_blank" rel="noopener noreferrer nofollow">练习 2</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md
index aed0cf30df7..bf452ad9d44 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-and-sqlite.md
@@ -12,9 +12,9 @@ dashedName: relational-databases-and-sqlite
 
 # --description--
 
-<a href="https://www.sqlite.org/download.html" target="_blank" rel="noopener noreferrer nofollow">Download SQLite</a>  
-<a href="https://sqlitebrowser.org/dl/" target="_blank" rel="noopener noreferrer nofollow">Download DB Browser for SQLite</a>  
-<a href="https://www.sqlite.org/famous.html" target="_blank" rel="noopener noreferrer nofollow">SQLite usage</a>
+<a href="https://www.sqlite.org/download.html" target="_blank" rel="noopener noreferrer nofollow">下载 SQLite</a>  
+<a href="https://sqlitebrowser.org/dl/" target="_blank" rel="noopener noreferrer nofollow">下载 DB Browser for SQLite</a>  
+<a href="https://www.sqlite.org/famous.html" target="_blank" rel="noopener noreferrer nofollow">使用 SQLite</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md
index ef2419a56fc..47f0a68975e 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/relational-databases-many-to-many-relationships.md
@@ -14,15 +14,15 @@ dashedName: relational-databases-many-to-many-relationships
 
 更多资料：
 
-\- <a href="https://www.youtube.com/watch?v=uQ3Qv1z_Vao" target="_blank" rel="noopener noreferrer nofollow">Exercise: Email</a>
+\- <a href="https://www.youtube.com/watch?v=uQ3Qv1z_Vao" target="_blank" rel="noopener noreferrer nofollow">练习：Email</a>
 
-\- <a href="https://www.youtube.com/watch?v=qEkUEAz8j3o" target="_blank" rel="noopener noreferrer nofollow">Exercise: Roster</a>
+\- <a href="https://www.youtube.com/watch?v=qEkUEAz8j3o" target="_blank" rel="noopener noreferrer nofollow">练习：Roster</a>
 
-\- <a href="https://www.youtube.com/watch?v=I-E7avcPeSE" target="_blank" rel="noopener noreferrer nofollow">Exercise: Tracks</a>
+\- <a href="https://www.youtube.com/watch?v=I-E7avcPeSE" target="_blank" rel="noopener noreferrer nofollow">练习：Tracks</a>
 
-\- <a href="https://www.youtube.com/watch?v=RZRAoBFIH6A" target="_blank" rel="noopener noreferrer nofollow">Exercise: Twfriends</a>
+\- <a href="https://www.youtube.com/watch?v=RZRAoBFIH6A" target="_blank" rel="noopener noreferrer nofollow">练习：Twfriends</a>
 
-\- <a href="https://www.youtube.com/watch?v=xBaJddvJL4A" target="_blank" rel="noopener noreferrer nofollow">Exercise: Twspider</a>
+\- <a href="https://www.youtube.com/watch?v=xBaJddvJL4A" target="_blank" rel="noopener noreferrer nofollow">练习：Twspider</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md
index 2bf953abe5d..5f7fd007941 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/strings-and-lists.md
@@ -14,7 +14,7 @@ dashedName: strings-and-lists
 
 更多资源：
 
-\- <a href="https://www.youtube.com/watch?v=-9TfJF2dwHI" target="_blank" rel="noopener noreferrer nofollow">Exercise</a>
+\- <a href="https://www.youtube.com/watch?v=-9TfJF2dwHI" target="_blank" rel="noopener noreferrer nofollow">练习</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md
index 0c37836f7ae..c31c4be7f1b 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/python-for-everybody/web-services-api-rate-limiting-and-security.md
@@ -14,13 +14,13 @@ dashedName: web-services-api-rate-limiting-and-security
 
 更多资料：
 
-\- <a href="https://www.youtube.com/watch?v=TJGJN0T8tak" target="_blank" rel="noopener noreferrer nofollow">Exercise: GeoJSON</a>
+\- <a href="https://www.youtube.com/watch?v=TJGJN0T8tak" target="_blank" rel="noopener noreferrer nofollow">练习：GeoJSON</a>
 
-\- <a href="https://www.youtube.com/watch?v=vTmw5RtfGMY" target="_blank" rel="noopener noreferrer nofollow">Exercise: JSON</a>
+\- <a href="https://www.youtube.com/watch?v=vTmw5RtfGMY" target="_blank" rel="noopener noreferrer nofollow">练习：JSON</a>
 
-\- <a href="https://www.youtube.com/watch?v=2c7YwhvpCro" target="_blank" rel="noopener noreferrer nofollow">Exercise: Twitter</a>
+\- <a href="https://www.youtube.com/watch?v=2c7YwhvpCro" target="_blank" rel="noopener noreferrer nofollow">练习：Twitter</a>
 
-\- <a href="https://www.youtube.com/watch?v=AopYOlDa-vY" target="_blank" rel="noopener noreferrer nofollow">Exercise: XML</a>
+\- <a href="https://www.youtube.com/watch?v=AopYOlDa-vY" target="_blank" rel="noopener noreferrer nofollow">练习：XML</a>
 
 # --question--
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
index 74036e36a0b..543ca0d904c 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/arithmetic-formatter.md
@@ -8,7 +8,7 @@ dashedName: arithmetic-formatter
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-arithmetic-formatter" target="_blank" rel="noopener noreferrer nofollow"> working on this project with our Replit starter code</a>.
+你将使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-arithmetic-formatter" target="_blank" rel="noopener noreferrer nofollow">我们在 Replit 的初始化项目</a>来完成这个项目。
 
 # --instructions--
 
@@ -64,7 +64,7 @@ arithmetic_arranger(["32 + 8", "1 - 3801", "9999 + 9999", "523 - 49"], True)
   - 每个数字（操作数）应该只包含数字。 否则，该函数将返回： `Error: Numbers must only contain digits.`
   - 每个操作数（也就是运算符两侧的数字）的宽度最多为四位。 否则，返回的错误字符串将为： `Error: Numbers cannot be more than four digits.`
 - 如果用户提供了正确格式的问题，返回的转换将遵循以下规则：
-  - There should be a single space between the operator and the longest of the two operands, the operator will be on the same line as the second operand, both operands will be in the same order as provided (the first will be the top one and the second will be the bottom).
+  - 操作符和两个操作数中最长的一个之间应该有一个空格，操作符将与第二个操作数在同一行，两个操作数的顺序与提供的相同（第一个是上面的，第二个是下面的）。
   - 数字应该右对齐。
   - 每个问题之间应该有四个空格。
   - 每个问题的底部都应该有破折号。 破折号应该单独沿着每个问题的整个长度延伸。 （上面的例子展示了这应该是什么样子。）
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md
index c7d73db0b83..3189cb8619f 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/budget-app.md
@@ -8,7 +8,7 @@ dashedName: budget-app
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-budget-app" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你将使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-budget-app" target="_blank" rel="noopener noreferrer nofollow">我们在 Replit 的初始化项目</a>来完成这个项目。
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md
index a390bd20934..f3b349d9760 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/polygon-area-calculator.md
@@ -8,7 +8,7 @@ dashedName: polygon-area-calculator
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-polygon-area-calculator" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你将使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-polygon-area-calculator" target="_blank" rel="noopener noreferrer nofollow">我们在 Replit 的初始化项目</a>来完成这个项目。
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
index 448d5f568ba..518435d4bb7 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/probability-calculator.md
@@ -8,7 +8,7 @@ dashedName: probability-calculator
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-probability-calculator" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你将使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-probability-calculator" target="_blank" rel="noopener noreferrer nofollow">我们在 Replit 的初始化项目</a>来完成这个项目。
 
 # --instructions--
 
@@ -37,7 +37,7 @@ hat3 = Hat(red=5, orange=4, black=1, blue=0, pink=2, striped=9)
 
 `experiment` 函数应该返回一个概率。
 
-For example, if you want to determine the probability of getting at least two red balls and one green ball when you draw five balls from a hat containing six black, four red, and three green. To do this, you will perform `N` experiments, count how many times `M` you get at least two red balls and one green ball, and estimate the probability as `M/N`. Each experiment consists of starting with a hat containing the specified balls, drawing several balls, and checking if you got the balls you were attempting to draw.
+例如，如果你想确定当你从一个包含 6 个黑球、4 个红球和 3 个绿球的帽子中抽出 5 个球时，至少得到 2 个红球和 1 个绿球的概率， 你将进行 `N` 次实验，记录其中你至少得到 2 个红球和 1 个绿球的次数 `M`，并估计概率为 `M/N`。 每个实验都包括从一个装有指定球的帽子开始，抽出几个球，并检查你是否抽到了你试图抽出的球。
 
 以下是基于上面的示例调用 `experiment` 函数的方法，其中包含 2000 个实验：
 
diff --git a/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md b/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md
index 2002afbb6dd..34e0e1873db 100644
--- a/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md
+++ b/curriculum/challenges/chinese/07-scientific-computing-with-python/scientific-computing-with-python-projects/time-calculator.md
@@ -8,7 +8,7 @@ dashedName: time-calculator
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-time-calculator" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你将使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-time-calculator" target="_blank" rel="noopener noreferrer nofollow">我们在 Replit 的初始化项目</a>来完成这个项目。
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md b/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md
index 11f62cab08b..f4bff00418a 100644
--- a/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md
+++ b/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/demographic-data-analyzer.md
@@ -8,13 +8,13 @@ dashedName: demographic-data-analyzer
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-demographic-data-analyzer" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你将使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-demographic-data-analyzer" target="_blank" rel="noopener noreferrer nofollow">我们在 Replit 的初始化项目</a>来完成这个项目。
 
 我们仍在开发 Python 课程的交互式教学部分。 目前，你可以在 YouTube 上通过 freeCodeCamp.org 上传的一些视频学习这个项目相关的知识。
 
-- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a> (14 hours)
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">给所有人的 Python 课程</a>（14 小时）
 
-- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">如何使用 Python Pandas 分析数据</a>（10 小时）
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md b/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md
index 1e4ab7a67c0..50e6294659f 100644
--- a/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md
+++ b/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/mean-variance-standard-deviation-calculator.md
@@ -8,13 +8,13 @@ dashedName: mean-variance-standard-deviation-calculator
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-mean-variance-standard-deviation-calculator" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你将使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-mean-variance-standard-deviation-calculator" target="_blank" rel="noopener noreferrer nofollow">我们在 Replit 的初始化项目</a>来完成这个项目。
 
 我们仍在开发 Python 课程的交互式教学部分。 目前，你可以在 YouTube 上通过 freeCodeCamp.org 上传的一些视频学习这个项目相关的知识。
 
-- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a>(14 hours)
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">给所有人的 Python 课程</a>（14 小时）
 
-- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">如何使用 Python Pandas 分析数据</a>（10 小时）
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md b/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
index ebe71d95a7d..e44707b2fab 100644
--- a/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
+++ b/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/medical-data-visualizer.md
@@ -8,13 +8,13 @@ dashedName: medical-data-visualizer
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-medical-data-visualizer" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你将使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-medical-data-visualizer" target="_blank" rel="noopener noreferrer nofollow">我们在 Replit 的初始化项目</a>来完成这个项目。
 
 我们仍在开发 Python 课程的交互式教学部分。 目前，你可以在 YouTube 上通过 freeCodeCamp.org 上传的一些视频学习这个项目相关的知识。
 
-- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a>(14 hours)
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">给所有人的 Python 课程</a>（14 小时）
 
-- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">如何使用 Python Pandas 分析数据</a>（10 小时）
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md b/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md
index 5e188cdaf73..44c6f8bb428 100644
--- a/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md
+++ b/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/page-view-time-series-visualizer.md
@@ -8,13 +8,13 @@ dashedName: page-view-time-series-visualizer
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-page-view-time-series-visualizer" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你将使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-page-view-time-series-visualizer" target="_blank" rel="noopener noreferrer nofollow">我们在 Replit 的初始化项目</a>来完成这个项目。
 
 我们仍在开发 Python 课程的交互式教学部分。 目前，你可以在 freeCodeCamp.org 的 YouTube 频道中通过视频学习到这个项目相关的所有知识
 
-- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a>(14 hours)
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">给所有人的 Python 课程</a>（14 小时）
 
-- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">如何使用 Python Pandas 分析数据</a>（10 小时）
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md b/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
index 65f416b727a..6828dabb92e 100644
--- a/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
+++ b/curriculum/challenges/chinese/08-data-analysis-with-python/data-analysis-with-python-projects/sea-level-predictor.md
@@ -8,13 +8,13 @@ dashedName: sea-level-predictor
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-sea-level-predictor" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你将使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-sea-level-predictor" target="_blank" rel="noopener noreferrer nofollow">我们在 Replit 的初始化项目</a>来完成这个项目。
 
 我们仍在开发 Python 课程的交互式教学部分。 目前，你可以在 YouTube 上通过 freeCodeCamp.org 上传的一些视频学习这个项目相关的知识。
 
-- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a>(14 hours)
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">给所有人的 Python 课程</a>（14 小时）
 
-- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">How to Analyze Data with Python Pandas</a> (10 hours)
+- <a href="https://www.freecodecamp.org/news/how-to-analyze-data-with-python-pandas/" target="_blank" rel="noopener noreferrer nofollow">如何使用 Python Pandas 分析数据</a>（10 小时）
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-projects/anonymous-message-board.md b/curriculum/challenges/chinese/09-information-security/information-security-projects/anonymous-message-board.md
index ec2e6714efb..22c0ffb6522 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-projects/anonymous-message-board.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-projects/anonymous-message-board.md
@@ -8,12 +8,12 @@ dashedName: anonymous-message-board
 
 # --description--
 
-Build a full stack JavaScript app that is functionally similar to this: <a href="https://anonymous-message-board.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://anonymous-message-board.freecodecamp.rocks/</a>.
+构建一个 JavaScript 的全栈应用，在功能上与这个应用相似：<a href="https://anonymous-message-board.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://anonymous-message-board.freecodecamp.rocks/</a>。
 
 在这个项目中，你将使用以下方法之一编写你的代码：
 
--   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-messageboard/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
--   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-messageboard" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   克隆<a href="https://github.com/freeCodeCamp/boilerplate-project-messageboard/" target="_blank" rel="noopener noreferrer nofollow">这个 GitHub 仓库</a>，并在本地完成你的项目。
+-   使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-project-messageboard" target="_blank" rel="noopener noreferrer nofollow">我们在 Replit 上的初始化项目</a>来完成你的项目。
 -   使用一个你喜欢的站点生成器来完成项目。 需要确定包含了我们 GitHub 仓库的所有文件。
 
 完成本项目后，请将一个正常运行的 demo（项目演示）托管在可以公开访问的平台。 然后将 URL 提交到 `Solution Link` 中。 此外，还可以提交一个指向项目源码的 `GitHub Link`。
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-projects/port-scanner.md b/curriculum/challenges/chinese/09-information-security/information-security-projects/port-scanner.md
index cb0c9515339..0ebeaa37c63 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-projects/port-scanner.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-projects/port-scanner.md
@@ -9,15 +9,15 @@ dashedName: port-scanner
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-port-scanner" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你将使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-port-scanner" target="_blank" rel="noopener noreferrer nofollow">我们在 Replit 的初始化项目</a>来完成这个项目。
 
 我们仍在开发 Python 课程的交互式教学部分。 目前，你可以在 YouTube 上通过 freeCodeCamp.org 上传的一些视频学习这个项目相关的知识。
 
-- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a> (14 hours)
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">给所有人的 Python 课程</a>（14 小时）
 
-- <a href="https://www.freecodecamp.org/news/learn-python-basics-in-depth-video-course/" target="_blank" rel="noopener noreferrer nofollow">Learn Python Basics in Depth</a> (4 hours)
+- <a href="https://www.freecodecamp.org/news/learn-python-basics-in-depth-video-course/" target="_blank" rel="noopener noreferrer nofollow">深入学习 Python 基础知识</a>（4 小时）
 
-- <a href="https://www.freecodecamp.org/news/intermediate-python-course/" target="_blank" rel="noopener noreferrer nofollow">Intermediate Python Course</a> (6 hours)
+- <a href="https://www.freecodecamp.org/news/intermediate-python-course/" target="_blank" rel="noopener noreferrer nofollow">Python 中级课程</a>（6 小时）
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-projects/sha-1-password-cracker.md b/curriculum/challenges/chinese/09-information-security/information-security-projects/sha-1-password-cracker.md
index f5ed76bfb17..124ca9e8cd0 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-projects/sha-1-password-cracker.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-projects/sha-1-password-cracker.md
@@ -9,15 +9,15 @@ dashedName: sha-1-password-cracker
 
 # --description--
 
-You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-SHA-1-password-cracker" target="_blank" rel="noopener noreferrer nofollow">working on this project with our Replit starter code</a>.
+你将使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-SHA-1-password-cracker" target="_blank" rel="noopener noreferrer nofollow">我们在 Replit 的初始化项目</a>来完成这个项目。
 
 我们仍在开发 Python 课程的交互式教学部分。 目前，你可以在 YouTube 上通过 freeCodeCamp.org 上传的一些视频学习这个项目相关的知识。
 
-- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">Python for Everybody Video Course</a> (14 hours)
+- <a href="https://www.freecodecamp.org/news/python-for-everybody/" target="_blank" rel="noopener noreferrer nofollow">给所有人的 Python 课程</a>（14 小时）
 
-- <a href="https://www.freecodecamp.org/news/learn-python-basics-in-depth-video-course/" target="_blank" rel="noopener noreferrer nofollow">Learn Python Basics in Depth</a> (4 hours)
+- <a href="https://www.freecodecamp.org/news/learn-python-basics-in-depth-video-course/" target="_blank" rel="noopener noreferrer nofollow">深入学习 Python 基础知识</a>（4 小时）
 
-- <a href="https://www.freecodecamp.org/news/intermediate-python-course/" target="_blank" rel="noopener noreferrer nofollow">Intermediate Python Course</a> (6 hours)
+- <a href="https://www.freecodecamp.org/news/intermediate-python-course/" target="_blank" rel="noopener noreferrer nofollow">Python 中级课程</a>（6 小时）
 
 # --instructions--
 
@@ -43,7 +43,7 @@ You will be <a href="https://replit.com/github/freeCodeCamp/boilerplate-SHA-1-pa
 - `da5a4e8cf89539e66097acd2f8af128acae2f8ae` 应该返回 “q1w2e3r4t5”
 - `ea3f62d498e3b98557f9f9cd0d905028b3b019e1` 应该返回 “bubbles1”
 
-`hashlib` 库已经为你导入。 You should consider using it in your code. <a href="https://docs.python.org/3/library/hashlib.html" target="_blank" rel="noopener noreferrer nofollow">Learn more about "hashlib" here</a>.
+`hashlib` 库已经为你导入。 你应该在你的代码中使用它。 <a href="https://docs.python.org/3/library/hashlib.html" target="_blank" rel="noopener noreferrer nofollow">在此了解更多关于 “hashlib” 的信息</a>。
 
 ## 开发
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md b/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md
index aa8bcbbe6ad..9c7f4503342 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-projects/stock-price-checker.md
@@ -8,14 +8,14 @@ dashedName: stock-price-checker
 
 # --description--
 
-Build a full stack JavaScript app that is functionally similar to this: <a href="https://stock-price-checker.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://stock-price-checker.freecodecamp.rocks/</a>.
+构建一个 JavaScript 的全栈应用，在功能上与这个应用相似：<a href="https://stock-price-checker.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://stock-price-checker.freecodecamp.rocks/</a>。
 
-由于所有可靠的股票价格 API 都需要一个 API 密钥，我们已经建立了一个解决方案。 Use <a href="https://stock-price-checker-proxy.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://stock-price-checker-proxy.freecodecamp.rocks/</a> to get up-to-date stock price information without needing to sign up for your own key.
+由于所有可靠的股票价格 API 都需要一个 API 密钥，我们已经建立了一个解决方案。 使用 <a href="https://stock-price-checker-proxy.freecodecamp.rocks/" target="_blank" rel="noopener noreferrer nofollow">https://stock-price-checker-proxy.freecodecamp.rocks/</a> 获取最新的股票价格信息，而无需注册你自己的密钥。
 
 可以采用下面的任意一种方式完成这个挑战：
 
--   Clone <a href="https://github.com/freeCodeCamp/boilerplate-project-stockchecker/" target="_blank" rel="noopener noreferrer nofollow">this GitHub repo</a> and complete your project locally.
--   Use <a href="https://replit.com/github/freeCodeCamp/boilerplate-project-stockchecker" target="_blank" rel="noopener noreferrer nofollow">our Replit starter project</a> to complete your project.
+-   克隆<a href="https://github.com/freeCodeCamp/boilerplate-project-stockchecker/" target="_blank" rel="noopener noreferrer nofollow">这个 GitHub 仓库</a>，并在本地完成你的项目。
+-   使用<a href="https://replit.com/github/freeCodeCamp/boilerplate-project-stockchecker" target="_blank" rel="noopener noreferrer nofollow">我们在 Replit 上的初始化项目</a>来完成你的项目。
 -   使用你选择的网站生成器来完成项目。 需要包含我们 GitHub 仓库的所有文件。
 
 完成本项目后，请将一个正常运行的 demo（项目演示）托管在可以公开访问的平台。 然后将 URL 提交到 `Solution Link` 中。 此外，还可以将项目的源码提交到 `GitHub Link` 中。
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md
index ea545510673..135ac0b239a 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/ask-browsers-to-access-your-site-via-https-only-with-helmet.hsts.md
@@ -8,7 +8,7 @@ dashedName: ask-browsers-to-access-your-site-via-https-only-with-helmet-hsts
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+请注意，本项目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化项目的基础上进行开发，你也可以从 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 HTTP 严格传输安全（HSTS）是一种网络安全策略，有助于保护网站免受协议降级攻击和 cookie 劫持。 如果你的网站可以通过 HTTPS 访问，你可以要求用户的浏览器避免使用不安全的 HTTP。 通过设置标头 Strict-Transport-Security，你告诉浏览器在指定时间内对未来的请求使用 HTTPS。 这将对初始请求之后的请求起作用。
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md
index 23a88b980e3..e51c0faa5d7 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/avoid-inferring-the-response-mime-type-with-helmet.nosniff.md
@@ -8,7 +8,7 @@ dashedName: avoid-inferring-the-response-mime-type-with-helmet-nosniff
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>. 浏览器可以使用内容或 MIME 嗅探来覆盖响应的 `Content-Type` 头，猜测并使用隐含的内容类型来处理数据。 虽然这在某些情况下可能很方便，但也可能导致一些危险的攻击。 该中间件将 X-Content-Type-Options 头设置为 `nosniff`，指示浏览器不要绕过所提供的 `Content-Type`。
+请注意，本项目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化项目的基础上进行开发，你也可以从 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。 浏览器可以使用内容或 MIME 嗅探来覆盖响应的 `Content-Type` 头，猜测并使用隐含的内容类型来处理数据。 虽然这在某些情况下可能很方便，但也可能导致一些危险的攻击。 该中间件将 X-Content-Type-Options 头设置为 `nosniff`，指示浏览器不要绕过所提供的 `Content-Type`。
 
 # --instructions--
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md
index e91d402c5f1..01c92378a4a 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/configure-helmet-using-the-parent-helmet-middleware.md
@@ -8,7 +8,7 @@ dashedName: configure-helmet-using-the-parent-helmet-middleware
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+请注意，本项目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化项目的基础上进行开发，你也可以从 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 `app.use(helmet())` 将自动包括上面介绍的所有中间件，除了 `noCache()` 和 `contentSecurityPolicy()`，但如果有必要，这些可以被启用。 你也可以使用配置对象，单独禁用或配置任何其他中间件。
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md
index 81fa669aa79..31961a60695 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/disable-client-side-caching-with-helmet.nocache.md
@@ -8,7 +8,7 @@ dashedName: disable-client-side-caching-with-helmet-nocache
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+请注意，本项目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化项目的基础上进行开发，你也可以从 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 如果你正在为你的网站发布更新，而你希望用户总是下载较新的版本，你可以（尝试）在客户的浏览器上禁用缓存。 它在开发中也很有用。 缓存具有性能优势，你将失去这些优势，因此只有在真正需要时才使用此选项。
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md
index a1877b9595b..14c6ab69298 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/disable-dns-prefetching-with-helmet.dnsprefetchcontrol.md
@@ -8,7 +8,7 @@ dashedName: disable-dns-prefetching-with-helmet-dnsprefetchcontrol
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+请注意，本项目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化项目的基础上进行开发，你也可以从 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 为了提高性能，大部分浏览器都会为页面上的链接预先加载 DNS 记录。 这样当用户点击一个链接的时候浏览器已经知道其 IP 地址了。 但这也会造成 DNS 服务的过度使用（如果你有一个百万用户数量级的大型网站）、隐私问题（窃听者可以借此推测出你在访问哪个页面）、页面统计数据准确性（有些没访问过的链接会被标记成已访问）。 如果你对安全性要求比较高，你应该禁用 DNS 预加载。 当然，这样做会让你损失一些性能。
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md
index 261d880bc4f..76ee44f0686 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-asynchronously.md
@@ -8,7 +8,7 @@ dashedName: hash-and-compare-passwords-asynchronously
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+请注意，本项目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化项目的基础上进行开发，你也可以从 <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 由于哈希运算会占用很大计算机资源，并且会耗费比较多时间，因此比较推荐的做法是异步调用哈希算法，这样就不会因此阻止其它连接或请求了。 异步调用哈希方法非常简单，只需要：
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md
index f4dd1b3899e..088c597be92 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hash-and-compare-passwords-synchronously.md
@@ -8,7 +8,7 @@ dashedName: hash-and-compare-passwords-synchronously
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+请注意，本项目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化项目的基础上进行开发，你也可以从 <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 同步执行哈希运算是非常简单的，但这会在哈希计算量大并且次数多的情况下造成延迟。 用这个方法哈希就像调用函数一样简单。
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md
index 694b9c21633..19c99986a6b 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/hide-potentially-dangerous-information-using-helmet.hidepoweredby.md
@@ -8,7 +8,7 @@ dashedName: hide-potentially-dangerous-information-using-helmet-hidepoweredby
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+请注意，本项目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化项目的基础上进行开发，你也可以从 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 如果黑客发现你的网站是用 Express 搭建的，那么他们就可以利用 Express 或 Node 现存的漏洞来攻击你的网站。 `X-Powered-By: Express` 默认在来自 Express 的每个请求中被发送。 使用 `helmet.hidePoweredBy()` 中间件来移除 X-Powered-By 头。
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md
index c961402af91..b1c9bd47c45 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-clickjacking-with-helmet.frameguard.md
@@ -8,7 +8,7 @@ dashedName: mitigate-the-risk-of-clickjacking-with-helmet-frameguard
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+请注意，本项目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化项目的基础上进行开发，你也可以从 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 你的网页可能在未经你同意的情况下被放在 `<frame>` 或 `<iframe>` 中。 这可能会导致点击劫持攻击等情况。 点击劫持是一种欺骗用户的技术，使其与用户认为不同的页面进行互动。 这可以通过使用 iframe 的方式，在一个恶意的环境中执行你的页面而获得。 在这种情况下，黑客可以在你的页面上设置一个隐藏层。 隐藏的按钮可以被用来运行坏的脚本。 该中间件设置 X-Frame-Options 头。 它限制了谁可以把你的网站放在一个框架里。 它有三种模式：DENY、SAMEORIGIN 和 ALLOW-FROM。
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md
index 4d800b316fd..39fb1e6bb80 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet.xssfilter.md
@@ -9,7 +9,7 @@ dashedName: mitigate-the-risk-of-cross-site-scripting-xss-attacks-with-helmet-xs
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+请注意，本项目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化项目的基础上进行开发，你也可以从 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 跨站脚本（XSS）是一种常见的攻击类型，恶意脚本被注入到易受攻击的页面，目的是窃取敏感数据，如会话 cookies 或密码。
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md
index c27db326e73..a645f10d689 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/prevent-ie-from-opening-untrusted-html-with-helmet.ienoopen.md
@@ -8,7 +8,7 @@ dashedName: prevent-ie-from-opening-untrusted-html-with-helmet-ienoopen
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+请注意，本项目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化项目的基础上进行开发，你也可以从 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 有些网站会下载不安全的 HTML 文件。 某些版本的 IE 默认情况下还会在你网站的作用域下打开这些 HTML 文件。 换句话说，这些不安全的 HTML 页面可以在你的网站做恶意行为。 我们可以通过中间件来设置 header 中的 X-Download-Options 字段，让它的值为 noopen。 这样就可以防止 IE 在不信任的网站下执行下载的文件。
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md
index b4fe072b3ec..bc5fc68f1bd 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/set-a-content-security-policy-with-helmet.contentsecuritypolicy.md
@@ -8,7 +8,7 @@ dashedName: set-a-content-security-policy-with-helmet-contentsecuritypolicy
 
 # --description--
 
-As a reminder, this project is being built upon the following starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or cloned from <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+请注意，本项目是在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-infosec" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上的初始化项目的基础上进行开发，你也可以从 <a href="https://github.com/freeCodeCamp/boilerplate-infosec/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆。
 
 在这个挑战中，我们要重点讨论现代浏览器中一种能有效减轻安全风险和防御很多种类型常见攻击的安全防护。 通过设置和配置内容安全策略，你可以防止在页面中无意中注入任何内容。 这会让你的应用远离 XSS 漏洞、恶意追踪、恶意 frames 和很多其他攻击。 CSP 通过配置资源白名单来避免这些问题。 你可以给任何一种类型的页面资源（脚本、样式文件、字体、frames、媒体文件等）做这个配置。 它支持很多指令，所以网站管理员可以做细致的控制。 更多详情请参考 HTML 5 Rocks 和 KeyCDN。 不幸的是，一些旧的浏览器不支持 CSP。
 
diff --git a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md
index 320a666ff6d..8bda0969e6f 100644
--- a/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md
+++ b/curriculum/challenges/chinese/09-information-security/information-security-with-helmetjs/understand-bcrypt-hashes.md
@@ -8,17 +8,17 @@ dashedName: understand-bcrypt-hashes
 
 # --description--
 
-在下面的挑战中，你将启动一个新的项目，这个项目与之前的项目不同。 You can find the new starter project on <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a>, or clone it from <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a>.
+在下面的挑战中，你将启动一个新的项目，这个项目与之前的项目不同。 你可以在 <a href="https://replit.com/github/freeCodeCamp/boilerplate-bcrypt" target="_blank" rel="noopener noreferrer nofollow">Replit</a> 上找到新的启动项目，或者从 <a href="https://github.com/freeCodeCamp/boilerplate-bcrypt/" target="_blank" rel="noopener noreferrer nofollow">GitHub</a> 上克隆它。
 
 BCrypt 哈希值是非常安全的。 哈希值基本上是原始数据的指纹，总是唯一的。 这是通过将原始数据输入一个算法并返回一个固定长度的结果来实现的。 为了使这一过程更加复杂和安全，你还可以向你的哈希值 *加盐*。 对你的哈希加盐处理包含了在哈希过程之前向原始数据添加随机数据，这使得破解哈希更加困难。
 
-BCrypt hashes will always look like `$2a$13$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8QO.uUUtcbqloU0yvzavOm` which does have a structure. 第一小节 `$2a` 说明了该哈希采用什么算法。 接下来的部分 `$13` 定义了 *成本*。 成本是指计算哈希值需要多少能量。 它在 2^cost 的对数尺度上，决定了数据要通过哈希算法计算多少次。 For example, at a cost of 10 you are able to hash 10 passwords a second on an average computer, however at a cost of 15 it takes 3 seconds per hash... and to take it further, at a cost of 31 it would take multiple days to complete a hash. 通常 cost 为 12 的哈希运算就已经足够安全。 哈希结果的最后一部分 `$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8QO.uUUtcbqloU0yvzavOm` 看起来像是由随机数字、点和字母组成的字符串，但实际上它有两部分内容。 前面 22 个字符是加入的盐，剩下的就是加密过的密码！
+BCrypt 哈希值类似 `$2a$13$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8QO.uUUtcbqloU0yvzavOm`，有一个结构。 第一小节 `$2a` 说明了该哈希采用什么算法。 接下来的部分 `$13` 定义了 *成本*。 成本是指计算哈希值需要多少能量。 它在 2^cost 的对数尺度上，决定了数据要通过哈希算法计算多少次。 例如，当成本为 10 时，你能够在普通计算机上每秒哈希计算 10 个密码，然而当成本为 15 时，每次哈希计算需要 3 秒......再进一步说，当成本为 31 时，完成一次哈希需要好几天。 通常 cost 为 12 的哈希运算就已经足够安全。 哈希结果的最后一部分 `$ZyprE5MRw2Q3WpNOGZWGbeG7ADUre1Q8QO.uUUtcbqloU0yvzavOm` 看起来像是由随机数字、点和字母组成的字符串，但实际上它有两部分内容。 前面 22 个字符是加入的盐，剩下的就是加密过的密码！
 
 # --instructions--
 
-Add all your code for these lessons in the `server.js` file between the code we have started you off with. Do not change or delete the code we have added for you.
+在 `server.js` 文件中加入这些课程的所有代码，放在我们开始的代码之间。 不要改变或删除我们为你添加的代码。
 
-BCrypt has already been added as a dependency, so require it as `bcrypt` in your server.
+BCrypt 已经被添加为一个依赖项，所以在你的服务器中请求它为 `bcrypt`。
 
 请在完成挑战后提交你的页面。
 
diff --git a/curriculum/challenges/chinese/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md b/curriculum/challenges/chinese/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
index 9e26dfa108e..eb499c13931 100644
--- a/curriculum/challenges/chinese/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
+++ b/curriculum/challenges/chinese/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
@@ -12,14 +12,27 @@ The palindromic number 595 is interesting because it can be written as the sum o
 
 There are exactly eleven palindromes below one-thousand that can be written as consecutive square sums, and the sum of these palindromes is 4164. Note that $1 = 0^2 + 1^2$ has not been included as this problem is concerned with the squares of positive integers.
 
-Find the sum of all the numbers less than $10^8$ that are both palindromic and can be written as the sum of consecutive squares.
+Find the sum of all the numbers less than the  `limit`  that are both palindromic and can be written as the sum of consecutive squares.
 
 # --hints--
-
-`palindromicSums()` should return `2906969179`.
+`palindromicSums(100000000)` should return `2906969179`.
 
 ```js
-assert.strictEqual(palindromicSums(), 2906969179);
+
+assert.strictEqual(palindromicSums(100000000), 2906969179);
+
+```
+
+`palindromicSums(100)` should return `137`.
+
+```js
+assert.strictEqual(palindromicSums(100), 137);
+```
+
+`palindromicSums(1000)` should return `4164`.
+
+```js
+assert.strictEqual(palindromicSums(1000),4164);
 ```
 
 # --seed--
@@ -27,16 +40,40 @@ assert.strictEqual(palindromicSums(), 2906969179);
 ## --seed-contents--
 
 ```js
-function palindromicSums() {
+function palindromicSums(limit) {
 
   return true;
 }
 
-palindromicSums();
+palindromicSums(100);
 ```
 
 # --solutions--
 
 ```js
-// solution required
+function isPalindrome(num) {
+  return num
+    .toString()
+    .split('')
+    .every((digit, i, arr) => digit === arr[arr.length - 1 - i]);
+}
+
+function palindromicSums(limit) {
+  let sumOfPalindromes = 0;
+  const sqrtLimit = Math.sqrt(limit);
+  const list = new Set();
+
+  for (let i = 1; i <= sqrtLimit; i++) {
+    let sumOfSquares = i * i;
+    for (let j = i + 1; j <= sqrtLimit; j++) {
+      sumOfSquares += j * j;
+      if (sumOfSquares > limit) break;
+      if (isPalindrome(sumOfSquares) && !list.has(sumOfSquares)) {
+        sumOfPalindromes += sumOfSquares;
+        list.add(sumOfSquares);
+      }
+    }
+  }
+  return sumOfPalindromes;
+}
 ```
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md b/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
index 6f444d2befd..d70515df0e7 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/build-a-survey-form-project/build-a-survey-form.md
@@ -91,7 +91,7 @@ const el = document.getElementById('name')
 assert(!!el && el.required)
 ```
 
-Your `#name` should be a descendant of `#survey-form`.
+你的 `#name` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #name')
@@ -119,7 +119,7 @@ const el = document.getElementById('email')
 assert(!!el && el.required)
 ```
 
-Your `#email` should be a descendant of `#survey-form`
+你的 `#email` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #email')
@@ -133,7 +133,7 @@ const el = document.getElementById('number')
 assert(!!el && el.tagName === 'INPUT')
 ```
 
-Your `#number` should be a descendant of `#survey-form`.
+你的 `#number` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #number')
@@ -203,21 +203,21 @@ const el = document.getElementById('number-label')
 assert(!!el && el.innerText.length > 0)
 ```
 
-Your `#name-label` should be a descendant of `#survey-form`.
+你的 `#name-label` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #name-label')
 assert(!!el)
 ```
 
-Your `#email-label` should be a descendant of `#survey-form`.
+你的 `#email-label` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #email-label')
 assert(!!el)
 ```
 
-Your `#number-label` should be a descendant of `#survey-form`.
+你的 `#number-label` 元素应该是 `#survey-form` 元素的子元素。
 
 ```js
 const el = document.querySelector('#survey-form #number-label')
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 a7061f6177b..01810c410f2 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
@@ -9,7 +9,7 @@ dashedName: step-56
 
 要使 `input` 框彼此对齐，请将所有 `.info` 元素内 `input` 和 `label` 元素的 `display` 属性设置为 `inline-block`。
 
-Also, align the `label` element's text to the right.
+另外，将 `label` 元素的文本向右对齐。
 
 # --hints--
 
@@ -28,7 +28,7 @@ const display = gs('.info > label, .info > input') ?? gs('.info label, .info inp
 assert.equal(display, 'inline-block');
 ```
 
-You should give the `label` element a `text-align` of `right`.
+你应该设置 `label` 元素的 `text-align` 值为 `right`。
 
 ```js
 const gs = (s) => new __helpers.CSSHelp(document).getStyle(s)?.textAlign;
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
index c7f71944c70..52080d8c743 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f33294a6af5e9188dbdb8f3.md
@@ -7,29 +7,29 @@ dashedName: step-5
 
 # --description--
 
-It's time to add some menu content. Add a `main` element within the existing `body` element. It will eventually contain pricing information about coffee and desserts offered by the cafe.
+是时候添加一些菜单内容。 在现有的 `body` 元素里面添加一个 `main` 元素。 它最终将包含有关咖啡馆提供的咖啡和甜点的价格信息。
 
 # --hints--
 
-Your code should have an opening `<main>` tag.
+你的代码应该有一个 `<main>` 开始标签。
 
 ```js
 assert(code.match(/<main>/i));
 ```
 
-Your code should have a closing `</main>` tag.
+你的代码应该有一个 `</main>` 结束标签。
 
 ```js
 assert(code.match(/<\/main>/i));
 ```
 
-You should not change your `body` element. Make sure you don't accidentally delete your closing tag.
+你不应该改变你的 `body` 元素。 确认你没有不小心删除结束标签。
 
 ```js
 assert($('body').length === 1);
 ```
 
-Your `main` tag should be within your `body` tag.
+你的 `main` 元素应该在你的 `body` 元素之后。
 
 ```js
 const main = document.querySelector('main');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
index 559de728d5c..3284850014d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332a88dc25a0fd25c7687a.md
@@ -7,35 +7,35 @@ dashedName: step-6
 
 # --description--
 
-The name of the cafe is `CAMPER CAFE`. Add an `h1` element within your `main` element. Give it the name of the cafe in capitalized letters to make it stand out.
+咖啡厅的名称是 `CAMPER CAFE`。 在 `main` 元素中添加一个 `h1` 元素。 给它命名为 “cafe”，用大写字母，使其突出显示。
 
 # --hints--
 
-You should have an opening `<h1>` tag.
+你应该有一个 `<h1>` 开始标签。
 
 ```js
 assert(code.match(/<h1>/i));
 ```
 
-You should have a closing `</h1>` tag.
+你应该有一个 `</h1>` 结束标签。
 
 ```js
 assert(code.match(/<\/h1>/i));
 ```
 
-You should not change your existing `main` element.
+你不应该改变你现有的 `main` 元素。
 
 ```js
 assert($('main').length === 1);
 ```
 
-Your `h1` element should be nested in your `main` element.
+你的 `h1` 元素应该嵌套在你的 `main` 元素中。
 
 ```js
 assert($('h1')[0].parentElement.tagName === "MAIN");
 ```
 
-Your `h1` element should have the text `CAMPER CAFE`.
+你的 `h1` 元素应该有文字 `CAMPER CAFE`。
 
 ```js
 assert(code.match(/<h1>CAMPER CAFE<\/h1>/));
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
index 5306d129ab5..d99c702be7b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f332b23c2045fb843337579.md
@@ -7,35 +7,35 @@ dashedName: step-7
 
 # --description--
 
-To let visitors know the cafe was founded in 2020, add a `p` element below the `h1` element with the text `Est. 2020`.
+为了让访客知道这家咖啡馆成立于 2020 年，在 `h1` 元素下面添加一个 `p`元素，文字为 `Est. 2020`。
 
 # --hints--
 
-You should have an opening `<p>` tag.
+你应该有一个 `<p>` 开始标签。
 
 ```js
 assert(code.match(/<p>/i));
 ```
 
-You should have a closing `</p>` tag.
+你应该有一个 `</p>` 结束标签。
 
 ```js
 assert(code.match(/<\/p>/i));
 ```
 
-You should not change your existing `h1` element. Make sure you did not delete the closing tag.
+你不应该改变你现有的 `h1` 元素。 确认你没有删除结束标签。
 
 ```js
 assert($('h1').length === 1);
 ```
 
-Your `p` element should be below your `h1` element.
+你的 `p` 元素应该在 `h1` 元素的下面。
 
 ```js
 assert($('p')[0].previousElementSibling.tagName === 'H1');
 ```
 
-Your `p` element should have the text `Est. 2020`.
+你的 `p` 元素应该有文本 `Est. 2020`。
 
 ```js
 assert(document.querySelector("p").innerText === "Est. 2020");
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md
index 6ccb88d8bce..4206b5d3a89 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344f9c805cd193c33d829c.md
@@ -1,6 +1,6 @@
 ---
 id: 5f344f9c805cd193c33d829c
-title: Step 11
+title: 步骤 11
 challengeType: 0
 dashedName: step-11
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
index 40e5db656e9..8c92bf49739 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fad8bf01691e71a30eb.md
@@ -1,6 +1,6 @@
 ---
 id: 5f344fad8bf01691e71a30eb
-title: Step 10
+title: 步骤 10
 challengeType: 0
 dashedName: step-10
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md
index a20dce463a4..65467721b22 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fbc22624a2976425065.md
@@ -1,6 +1,6 @@
 ---
 id: 5f344fbc22624a2976425065
-title: Step 9
+title: 步骤 9
 challengeType: 0
 dashedName: step-9
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
index bc75a53eb33..f2440213119 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f344fc1520b6719f2e35605.md
@@ -1,6 +1,6 @@
 ---
 id: 5f344fc1520b6719f2e35605
-title: Step 8
+title: 步骤 8
 challengeType: 0
 dashedName: step-8
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
index 88d1d60ab99..04af92e1a07 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae34c1239cafe128be.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3477ae34c1239cafe128be
-title: Step 13
+title: 步骤 13
 challengeType: 0
 dashedName: step-13
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
index ce8f7af504a..2e92b9aa5ad 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae8466a9a3d2cc953c.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3477ae8466a9a3d2cc953c
-title: Step 15
+title: 步骤 15
 challengeType: 0
 dashedName: step-15
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
index dc180014f91..ea8ab64c72e 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477ae9675db8bb7655b30.md
@@ -1,13 +1,13 @@
 ---
 id: 5f3477ae9675db8bb7655b30
-title: Step 12
+title: 步骤 12
 challengeType: 0
 dashedName: step-12
 ---
 
 # --description--
 
-在上一步中，你使用 <dfn>类型选择器</dfn> 来设置 `h1` 元素的样式。 Center the `h2` and `p` elements by adding a new type selector for each one to the existing `style` element.
+在上一步中，你使用 <dfn>类型选择器</dfn> 来设置 `h1` 元素的样式。 将 `h2` 和 `p` 元素居中，通过在现有的 `style` 元素中给它们添加一个新的选择器来实现。
 
 # --hints--
 
@@ -18,42 +18,42 @@ const hasH1 = new __helpers.CSSHelp(document).getStyle('h1');
 assert(hasH1);
 ```
 
-You should not add a new `style` tag. Add the new CSS rules to the existing `style` tag.
+你不应该添加一个新的 `style` 标签。 将新的 CSS 规则添加到现有的 `style` 标签中。
 
 ```js
 const hasManyStyleTags = document.querySelectorAll('style').length > 1;
 assert(!hasManyStyleTags);
 ```
 
-You should add a new `h2` selector.
+你应该添加一个新的 `h2` 选择器。
 
 ```js
 const hasH2 = new __helpers.CSSHelp(document).getStyle('h2');
 assert(hasH2);
 ```
 
-You should add a new `p` selector.
+你应该添加一个新的 `p` 选择器。
 
 ```js
 const hasP = new __helpers.CSSHelp(document).getStyle('p');
 assert(hasP);
 ```
 
-Your `h1` element should have a `text-align` of `center`.
+你的 `h1` 元素应该有一个 `text-align` 值为 `center`。
 
 ```js
 const h1TextAlign = new __helpers.CSSHelp(document).getStyle('h1')?.getPropertyValue('text-align');
 assert(h1TextAlign === 'center');
 ```
 
-Your `h2` element should have a `text-align` of `center`.
+你的 `h2` 元素应该有一个 `text-align` 值为 `center`。
 
 ```js
 const h2TextAlign = new __helpers.CSSHelp(document).getStyle('h2')?.getPropertyValue('text-align');
 assert(h2TextAlign === 'center');
 ```
 
-Your `p` element should have a `text-align` of `center`.
+你的 `p` 元素应该有一个 `text-align` 值为 `center`。
 
 ```js
 const pTextAlign = new __helpers.CSSHelp(document).getStyle('p')?.getPropertyValue('text-align');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
index 01ff82d0dd3..a6f16b2e27b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477aefa51bfc29327200b.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3477aefa51bfc29327200b
-title: Step 14
+title: 步骤 14
 challengeType: 0
 dashedName: step-14
 ---
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 5c68a234fff..09911569de8 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
@@ -1,6 +1,6 @@
 ---
 id: 5f3477cb2e27333b1ab2b955
-title: Step 16
+title: 步骤 16
 challengeType: 0
 dashedName: step-16
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
index da7fcf084de..26905024a16 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cb303c5cb61b43aa9b.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3477cb303c5cb61b43aa9b
-title: Step 18
+title: 步骤 18
 challengeType: 0
 dashedName: step-18
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
index 5584480e0a2..dae434d7382 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3477cbcb6ba47918c1da92.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3477cbcb6ba47918c1da92
-title: Step 17
+title: 步骤 17
 challengeType: 0
 dashedName: step-17
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
index 2ec0e66fe42..f59c11440f7 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f34a1fd611d003edeafd681.md
@@ -1,6 +1,6 @@
 ---
 id: 5f34a1fd611d003edeafd681
-title: Step 19
+title: 步骤 19
 challengeType: 0
 dashedName: step-19
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
index 8a66938f221..a1fc24a55f3 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60785e1f3e9850b6e.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed60785e1f3e9850b6e
-title: Step 24
+title: 步骤 24
 challengeType: 0
 dashedName: step-24
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
index 5df2cadaecc..0d9f1ece471 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed60a5decd94ab66986.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed60a5decd94ab66986
-title: Step 22
+title: 步骤 22
 challengeType: 0
 removeComments: false
 dashedName: step-22
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
index 7cc873ef8ee..b1135fd581d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6199b0cdef1d2be8f.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed6199b0cdef1d2be8f
-title: Step 26
+title: 步骤 26
 challengeType: 0
 dashedName: step-26
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
index 5e82ca38370..9d92b7cc6f2 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63c7807a4f1e6d054.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed63c7807a4f1e6d054
-title: Step 21
+title: 步骤 21
 challengeType: 0
 dashedName: step-21
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
index 1fe5144c632..b0d4c8e1f07 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed63e0fa262326eef05.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed63e0fa262326eef05
-title: Step 23
+title: 步骤 23
 challengeType: 0
 dashedName: step-23
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
index 91a5cff6dfa..af83ff51b3f 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed656a336993abd9f7c.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed656a336993abd9f7c
-title: Step 25
+title: 步骤 25
 challengeType: 0
 dashedName: step-25
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
index 144470b825a..25b9747c328 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed69db0a491745e2bb6.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed69db0a491745e2bb6
-title: Step 27
+title: 步骤 27
 challengeType: 0
 dashedName: step-27
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
index d576bfe6e0d..94cc0e4425f 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f356ed6cf6eab5f15f5cfe6.md
@@ -1,6 +1,6 @@
 ---
 id: 5f356ed6cf6eab5f15f5cfe6
-title: Step 20
+title: 步骤 20
 challengeType: 0
 dashedName: step-20
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
index 48e66c6101d..a8a7eabbe8d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c4321f818cdc4bed30.md
@@ -1,6 +1,6 @@
 ---
 id: 5f35e5c4321f818cdc4bed30
-title: Step 29
+title: 步骤 29
 challengeType: 0
 dashedName: step-29
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
index 94dc8c4a42e..512f5316caf 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f35e5c44359872a137bd98f.md
@@ -1,6 +1,6 @@
 ---
 id: 5f35e5c44359872a137bd98f
-title: Step 28
+title: 步骤 28
 challengeType: 0
 dashedName: step-28
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
index 77ab902fc89..d20cce87439 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d0fc037f7311b4ac8.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3c866d0fc037f7311b4ac8
-title: Step 38
+title: 步骤 38
 challengeType: 0
 dashedName: step-38
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
index b505952ba5c..84cfa91cdd2 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d28d7ad0de6470505.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3c866d28d7ad0de6470505
-title: Step 32
+title: 步骤 32
 challengeType: 0
 dashedName: step-32
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
index 1f9653b97bb..87002be5358 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866d5414453fc2d7b480.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3c866d5414453fc2d7b480
-title: Step 31
+title: 步骤 31
 challengeType: 0
 dashedName: step-31
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
index 48b879290c3..0f929ffc565 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866daec9a49519871816.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3c866daec9a49519871816
-title: Step 30
+title: 步骤 30
 challengeType: 0
 dashedName: step-30
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
index 4e615eac382..09e703bca59 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dbf362f99b9a0c6d0.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3c866dbf362f99b9a0c6d0
-title: Step 37
+title: 步骤 37
 challengeType: 0
 dashedName: step-37
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
index 020e0a9a80b..b39d9914eb5 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866dd0d0275f01d4d847.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3c866dd0d0275f01d4d847
-title: Step 39
+title: 步骤 39
 challengeType: 0
 dashedName: step-39
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
index 3066be22182..ad873d962e7 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3c866de7a5b784048f94b1.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3c866de7a5b784048f94b1
-title: Step 36
+title: 步骤 36
 challengeType: 0
 dashedName: step-36
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
index 93a404fcf6f..2e923ff8ed2 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade94c6576e7f7b7953f.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3cade94c6576e7f7b7953f
-title: Step 41
+title: 步骤 41
 challengeType: 0
 dashedName: step-41
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
index d813897467d..a19a43cce7a 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9993019e26313fa8e.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3cade9993019e26313fa8e
-title: Step 42
+title: 步骤 42
 challengeType: 0
 dashedName: step-42
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
index 7144e52081d..7be291b77f8 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade99dda4e6071a85dfd.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3cade99dda4e6071a85dfd
-title: Step 46
+title: 步骤 46
 challengeType: 0
 dashedName: step-46
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
index bb43b47111a..d769f854042 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3cade9fa77275d9f4efe62.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3cade9fa77275d9f4efe62
-title: Step 40
+title: 步骤 40
 challengeType: 0
 dashedName: step-40
 ---
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 7082746acca..ca5071f5fc8 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
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e01f288a026d709587
-title: Step 66
+title: 步骤 66
 challengeType: 0
 dashedName: step-66
 ---
@@ -9,7 +9,7 @@ dashedName: step-66
 
 你可以使用 `hr` 元素在不同内容的部分之间显示一个分隔符。
 
-First, add an `hr` element between the `p` element with the class `established` and the first `section` element. 注意：`hr` 元素是没有结束标签的。
+首先，在具有 `established` 类的 `p` 元素和第一个 `section` 之间添加一个 `hr` 元素。 注意：`hr` 元素是没有结束标签的。
 
 # --hints--
 
@@ -20,7 +20,7 @@ assert(code.match(/<hr\s?\/?>/i));
 assert(!code.match(/<\/hr>/i));
 ```
 
-You should not change your existing `p` element with the class `established`.
+你不应更改你现有的具有类 `established` 的 `p` 元素。
 
 ```js
 assert($('p.established').length === 1);
@@ -32,7 +32,7 @@ assert($('p.established').length === 1);
 assert($('main').length === 1);
 ```
 
-Your `hr` element should be between your `p` element and your `section` element.
+你的 `hr` 元素应该在你的 `p` 元素和 `section` 元素之间。
 
 ```js
 assert($('hr')[0].previousElementSibling.tagName === 'P');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
index 1e31958c007..afcb63533f2 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e03d719d5ac4738993.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e03d719d5ac4738993
-title: Step 56
+title: 步骤 56
 challengeType: 0
 dashedName: step-56
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md
index 93e511a2d8a..36078ddd9cd 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e04559b939080db057.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e04559b939080db057
-title: Step 55
+title: 步骤 55
 challengeType: 0
 dashedName: step-55
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
index 3783999b048..6fdc6bdbef9 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e050279c7a4a7101d3.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e050279c7a4a7101d3
-title: Step 54
+title: 步骤 54
 challengeType: 0
 dashedName: step-54
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md
index f6cfef39c9e..8d4e46af537 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e05473f91f948724ab.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e05473f91f948724ab
-title: Step 57
+title: 步骤 57
 challengeType: 0
 dashedName: step-57
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
index fced1d04276..04482a8edc0 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e056bdde6ae6892ba2.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e056bdde6ae6892ba2
-title: Step 58
+title: 步骤 58
 challengeType: 0
 dashedName: step-58
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md
index a8db0264446..0c10cc54236 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e06d34faac0447fc44.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e06d34faac0447fc44
-title: Step 60
+title: 步骤 60
 challengeType: 0
 dashedName: step-60
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md
index 9695891e9e9..decf17bf831 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e07276f782bb46b93d.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e07276f782bb46b93d
-title: Step 63
+title: 步骤 63
 challengeType: 0
 dashedName: step-63
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md
index e4e8b2bd6bb..2cd44e90b78 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0819d4f23ca7285e6.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e0819d4f23ca7285e6
-title: Step 48
+title: 步骤 48
 challengeType: 0
 dashedName: step-48
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md
index ea1f409fa20..cfbd345be8b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e087d56ed3ffdc36be.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e087d56ed3ffdc36be
-title: Step 61
+title: 步骤 61
 challengeType: 0
 dashedName: step-61
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md
index 1685f75b9ca..e56eff5b069 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0a81099d9a697b550.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e0a81099d9a697b550
-title: Step 64
+title: 步骤 64
 challengeType: 0
 dashedName: step-64
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md
index 1a2a2d575cc..f5dd868e6fb 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0b431cc215bb16f55.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e0b431cc215bb16f55
-title: Step 65
+title: 步骤 65
 challengeType: 0
 dashedName: step-65
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md
index 4721d11cf0c..820107b5dd1 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e0c3feaebcf647ad.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e0e0c3feaebcf647ad
-title: Step 47
+title: 步骤 47
 challengeType: 0
 dashedName: step-47
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md
index 77fe57aee04..bebbcc8d753 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0e9629bad967cd71e.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e0e9629bad967cd71e
-title: Step 59
+title: 步骤 59
 challengeType: 0
 dashedName: step-59
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md
index b2467df5dde..f314f7b0629 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0eaa7da26e3d34d78.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e0eaa7da26e3d34d78
-title: Step 53
+title: 步骤 53
 challengeType: 0
 dashedName: step-53
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
index adb7cf19a03..62ade62b5f6 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3ef6e0f8c230bdd2349716.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3ef6e0f8c230bdd2349716
-title: Step 62
+title: 步骤 62
 challengeType: 0
 dashedName: step-62
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md
index b1012c1405e..8d230138878 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f3f26fa39591db45e5cd7a0.md
@@ -1,6 +1,6 @@
 ---
 id: 5f3f26fa39591db45e5cd7a0
-title: Step 67
+title: 步骤 67
 challengeType: 0
 dashedName: step-67
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md
index 0428d654e88..67b0b2629aa 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459225127805351a6ad057.md
@@ -1,6 +1,6 @@
 ---
 id: 5f459225127805351a6ad057
-title: Step 68
+title: 步骤 68
 challengeType: 0
 dashedName: step-68
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md
index fe5c8f022e0..720f99cf4b6 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459a7ceb8b5c446656d88b.md
@@ -1,6 +1,6 @@
 ---
 id: 5f459a7ceb8b5c446656d88b
-title: Step 69
+title: 步骤 69
 challengeType: 0
 dashedName: step-69
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md
index c43ab5aa234..37bf1957e91 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459cf202c2a3472fae6a9f.md
@@ -1,6 +1,6 @@
 ---
 id: 5f459cf202c2a3472fae6a9f
-title: Step 70
+title: 步骤 70
 challengeType: 0
 dashedName: step-70
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md
index 4afb8693a39..ea53afa591c 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f459fd48bdc98491ca6d1a3.md
@@ -1,6 +1,6 @@
 ---
 id: 5f459fd48bdc98491ca6d1a3
-title: Step 71
+title: 步骤 71
 challengeType: 0
 dashedName: step-71
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md
index 77952bed49d..6ec437e1caf 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a05977e2fa49d9119437.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45a05977e2fa49d9119437
-title: Step 72
+title: 步骤 72
 challengeType: 0
 dashedName: step-72
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md
index 79459ee8497..7d16da59a5e 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a276c093334f0f6e9df4.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45a276c093334f0f6e9df4
-title: Step 73
+title: 步骤 73
 challengeType: 0
 dashedName: step-73
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md
index 0d61e36476c..6e546f20551 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a5a7c49a8251f0bdb527.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45a5a7c49a8251f0bdb527
-title: Step 74
+title: 步骤 74
 challengeType: 0
 dashedName: step-74
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md
index b39df045bd5..5276c7b7191 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45a66d4a2b0453301e5a26.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45a66d4a2b0453301e5a26
-title: Step 78
+title: 步骤 78
 challengeType: 0
 dashedName: step-78
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md
index 227f8c8d809..b61b240fe9a 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b0731d39e15d54df4dfc.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45b0731d39e15d54df4dfc
-title: Step 79
+title: 步骤 79
 challengeType: 0
 dashedName: step-79
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md
index 875f956ec60..43131e2a050 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b25e7ec2405f166b9de1.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45b25e7ec2405f166b9de1
-title: Step 80
+title: 步骤 80
 challengeType: 0
 dashedName: step-80
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md
index f75345fe582..516048558cb 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b3c93c027860d9298dbd.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45b3c93c027860d9298dbd
-title: Step 81
+title: 步骤 81
 challengeType: 0
 dashedName: step-81
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md
index 6360bd1a978..0b8c58e2d22 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b45d099f3e621fbbb256.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45b45d099f3e621fbbb256
-title: Step 82
+title: 步骤 82
 challengeType: 0
 dashedName: step-82
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md
index 539aceffc46..b0575ef9686 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b4c81cea7763550e40df.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45b4c81cea7763550e40df
-title: Step 83
+title: 步骤 83
 challengeType: 0
 dashedName: step-83
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md
index 54baa411a7f..57bebbc4f31 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f45b715301bbf667badc04a.md
@@ -1,6 +1,6 @@
 ---
 id: 5f45b715301bbf667badc04a
-title: Step 84
+title: 步骤 84
 challengeType: 0
 dashedName: step-84
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md
index ca094fe89d5..4bd2ebb3766 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e270702a8456a664f0df.md
@@ -1,6 +1,6 @@
 ---
 id: 5f46e270702a8456a664f0df
-title: Step 85
+title: 步骤 85
 challengeType: 0
 dashedName: step-85
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
index 60a1ce8d8eb..6c2960c552f 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e36e745ead58487aabf2.md
@@ -1,6 +1,6 @@
 ---
 id: 5f46e36e745ead58487aabf2
-title: Step 86
+title: 步骤 86
 challengeType: 0
 dashedName: step-86
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md
index 0014ea4aa10..98c1d593935 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46e7a4750dd05b5a673920.md
@@ -1,6 +1,6 @@
 ---
 id: 5f46e7a4750dd05b5a673920
-title: Step 87
+title: 步骤 87
 challengeType: 0
 dashedName: step-87
 ---
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 75314c44693..6e3956407ca 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
@@ -1,6 +1,6 @@
 ---
 id: 5f46e8284aae155c83015dee
-title: Step 88
+title: 步骤 88
 challengeType: 0
 dashedName: step-88
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md
index 2e83eedb61b..23555133c6d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46ede1ff8fec5ba656b44c.md
@@ -1,6 +1,6 @@
 ---
 id: 5f46ede1ff8fec5ba656b44c
-title: Step 77
+title: 步骤 77
 challengeType: 0
 dashedName: step-77
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md
index 8e32bc31f1f..c4515f6785f 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f46fc57528aa1c4b5ea7c2e.md
@@ -1,6 +1,6 @@
 ---
 id: 5f46fc57528aa1c4b5ea7c2e
-title: Step 75
+title: 步骤 75
 challengeType: 0
 dashedName: step-75
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
index 2925ab5c5c5..b5afcd60962 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f4701b942c824109626c3d8.md
@@ -1,6 +1,6 @@
 ---
 id: 5f4701b942c824109626c3d8
-title: Step 76
+title: 步骤 76
 challengeType: 0
 dashedName: step-76
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md
index a63c8fcb373..477340a7871 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475bb508746c16c9431d42.md
@@ -1,6 +1,6 @@
 ---
 id: 5f475bb508746c16c9431d42
-title: Step 89
+title: 步骤 89
 challengeType: 0
 dashedName: step-89
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md
index 8e925900623..c41d69cfd12 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f475e1c7f71a61d913836c6.md
@@ -1,6 +1,6 @@
 ---
 id: 5f475e1c7f71a61d913836c6
-title: Step 90
+title: 步骤 90
 challengeType: 0
 dashedName: step-90
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md
index 227d2c2b86d..6eb3248aab1 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47633757ae3469f2d33d2e.md
@@ -1,6 +1,6 @@
 ---
 id: 5f47633757ae3469f2d33d2e
-title: Step 45
+title: 步骤 45
 challengeType: 0
 dashedName: step-45
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md
index bddcc1fbb0b..b45d81d4a7b 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f47fe7e31980053a8d4403b.md
@@ -1,6 +1,6 @@
 ---
 id: 5f47fe7e31980053a8d4403b
-title: Step 91
+title: 步骤 91
 challengeType: 0
 dashedName: step-91
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md
index 81e2d09e1c2..055bed4b215 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716ad029ee4053c7027a7a.md
@@ -1,6 +1,6 @@
 ---
 id: 5f716ad029ee4053c7027a7a
-title: Step 49
+title: 步骤 49
 challengeType: 0
 dashedName: step-49
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md
index 4873004b3c5..60832e9be23 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f716bee5838c354c728a7c5.md
@@ -1,6 +1,6 @@
 ---
 id: 5f716bee5838c354c728a7c5
-title: Step 52
+title: 步骤 52
 challengeType: 0
 dashedName: step-52
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md
index 609fddfd7d4..c8d13f5379c 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7691dafd882520797cd2f0.md
@@ -1,6 +1,6 @@
 ---
 id: 5f7691dafd882520797cd2f0
-title: Step 43
+title: 步骤 43
 challengeType: 0
 dashedName: step-43
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md
index 372d331c9f1..bedfbf4d531 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7692f7c5b3ce22a57788b6.md
@@ -1,6 +1,6 @@
 ---
 id: 5f7692f7c5b3ce22a57788b6
-title: Step 44
+title: 步骤 44
 challengeType: 0
 dashedName: step-44
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md
index 3d087ad56dc..e5fc10327f5 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769541be494f25449b292f.md
@@ -1,6 +1,6 @@
 ---
 id: 5f769541be494f25449b292f
-title: Step 33
+title: 步骤 33
 challengeType: 0
 dashedName: step-33
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
index ae024446b69..1de1854cd09 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f76967fad478126d6552b0d.md
@@ -1,6 +1,6 @@
 ---
 id: 5f76967fad478126d6552b0d
-title: Step 34
+title: 步骤 34
 challengeType: 0
 dashedName: step-34
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md
index 4e29f6ad304..518a7b18f55 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f769702e6e33127d14aa120.md
@@ -1,6 +1,6 @@
 ---
 id: 5f769702e6e33127d14aa120
-title: Step 35
+title: 步骤 35
 challengeType: 0
 dashedName: step-35
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md
index deb5088a187..fe47df48449 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b87422a560036fd03ccff.md
@@ -1,6 +1,6 @@
 ---
 id: 5f7b87422a560036fd03ccff
-title: Step 50
+title: 步骤 50
 challengeType: 0
 dashedName: step-50
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md
index 609a183d8b2..810a7a4a87e 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-basic-css-by-building-a-cafe-menu/5f7b88d37b1f98386f04edc0.md
@@ -1,6 +1,6 @@
 ---
 id: 5f7b88d37b1f98386f04edc0
-title: Step 51
+title: 步骤 51
 challengeType: 0
 dashedName: step-51
 ---
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md
index f975da55a79..f64a2191cb2 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-colors-by-building-a-set-of-colored-markers/616965351e74d4689eb6de30.md
@@ -7,24 +7,24 @@ dashedName: step-5
 
 # --description--
 
-Add another self-closing `meta` element within the `head`. Give it a `name` attribute set to `viewport` and a `content` attribute set to `width=device-width, initial-scale=1.0` so your page looks the same on all devices.
+在 `head` 中添加另一个自闭合的 `meta` 元素。 给它一个 `name` 属性值为 `viewport`，和一个 `content` 属性值为 `width=device-width, initial-scale=1.0`，这样你的页面在各种设备上看起来是一样的。
 
 # --hints--
 
-You should have two `meta` elements.
+你应该有两个 `meta` 元素。
 
 ```js
 const meta = document.querySelectorAll('meta');
 assert(meta?.length === 2);
 ```
 
-Your new `meta` element should be a self-closing element.
+你的新 `meta` 元素应该是一个自闭合元素。
 
 ```js
 assert(code.match(/<\/meta>/i) === null);
 ```
 
-Your new `meta` element should have a `name` attribute set to `viewport`, and a `content` attribute set to `width=device-width, initial-scale=1.0`.
+你的新 `meta` 元素应将 `name` 属性设置为 `viewport`，并将 `content` 属性设置为 `width=device-width, initial-scale=1.0`。
 
 ```js
 const meta = [...document.querySelectorAll('meta')];
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
index cbc22d99d4d..a749cca73f3 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-flexbox-by-building-a-photo-gallery/6153a3952facd25a83fe8083.md
@@ -7,7 +7,7 @@ dashedName: step-20
 
 # --description--
 
-`::after` 用来创建一个伪元素，作为已选中元素的最后一个子元素。 You can use it to add an empty element after the last image. If you give it the same `width` as the images it will push the last image to the left when the gallery is in a two-column layout. Right now, it is in the center because you set `justify-content: center` on the flex container.
+`::after` 用来创建一个伪元素，作为已选中元素的最后一个子元素。 你可以用它在最后一个图像后添加一个空元素。 如果你设置其 `width` 为和图像相同，如果是两列布局，它会将最后一张图像挤到左边。 现在它居中显示，因为你在 flex 容器上设置了 `justify-content: center`。
 
 例如：
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
index 690dbf02297..ac18f9d5647 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
@@ -7,7 +7,7 @@ dashedName: step-13
 
 # --description--
 
-Center the parts of your building by turning the `.bb1` element into a flexbox parent. Use the `flex-direction` and `align-items` properties to center the children.
+将 `.bb1` 元素转换成弹性盒子（flexbox）父元素来居中你建筑物。 使用 `flex-direction` 和 `align-items` 属性来居中子项。
 
 # --hints--
 
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
index b1a097cfaf0..73595df383c 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc2385ff86c76b9248c6eb7.md
@@ -9,7 +9,7 @@ dashedName: step-5
 
 HTML5 有些元素能够指明不同的内容区域。 这些元素能让你的 HTML 易于阅读，并有助于搜索引擎优化（SEO）和无障碍访问。
 
-Identify the main section of this page by adding a `<main>` opening tag before the `h1` element, and a `</main>` closing tag after the `p` element.
+通过在 `h1` 元素之前添加 `<main>` 开始标签和在 `p` 元素之后添加 `</main>` 结束标签来标识此页面的主要部分。
 
 # --hints--
 
@@ -25,14 +25,14 @@ assert(document.querySelector('main'));
 assert(code.match(/<\/main\>/));
 ```
 
-Your `main` element's opening tag should be below the `body` element. 你把顺序写错了。
+你的 `main` 元素的开始标签应该在 `body` 元素的下方。 你把顺序写错了。
 
 ```js
 const main = document.querySelector('main');
 assert.equal(main?.previousElementSibling, null);
 ```
 
-Your `main` element's opening tag should be above the `h1` element. 你把顺序写错了。
+你的 `main` 元素的开始标签应该在 `h1` 元素上方。 你把顺序写错了。
 
 ```js
 const collection = [...document.querySelectorAll('main,h1')].map(
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
index 16357f8cd0f..57cb61c7947 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dc23991f86c76b9248c6eb8.md
@@ -7,9 +7,9 @@ dashedName: step-6
 
 # --description--
 
-In the previous step, you put the `h1`, `h2`, comment, and `p` elements inside the `main` element. 这叫作 *嵌套*。 嵌套的元素（子元素）的位置应该放在被他们嵌套的元素（父元素）中新的一行并且右侧保留两个空格的间距的后面。 这个间距被称为缩进，它被用来使 HTML 更容易读。
+在上一步中，你将 `h1` 元素、`h2` 元素、注释和 `p` 元素嵌套在 `main` 元素中。 这叫作 *嵌套*。 嵌套的元素（子元素）的位置应该放在被他们嵌套的元素（父元素）中新的一行并且右侧保留两个空格的间距的后面。 这个间距被称为缩进，它被用来使 HTML 更容易读。
 
-The `h1` element, `h2` element and the comment are indented two spaces more than the `main` element in the code below. 使用键盘上的空格键在 `p` 元素前面再添加两个空格，使其缩进得当。
+`h1` 元素、`h2` 元素和注释比下面代码中的 `main` 元素多缩进了两个空格。 使用键盘上的空格键在 `p` 元素前面再添加两个空格，使其缩进得当。
 
 # --hints--
 
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 b4051cf13e4..63c395b1482 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
@@ -9,7 +9,7 @@ dashedName: step-11
 
 链接的文本必须放置在锚点元素（`a`）的起始和闭合标签之间。 例如，`<a href="https://www.freecodecamp.org">click here to go to freeCodeCamp.org</a>` 就是一个包含着文本 `click here to go to freeCodeCamp.org` 的链接。
 
-Add the anchor text `link to cat pictures` to the anchor element. 这将成为链接的文本。
+将锚点文本 `link to cat pictures` 添加到锚点元素中。 这将成为链接的文本。
 
 # --hints--
 
@@ -25,7 +25,7 @@ assert(document.querySelector('a'));
 assert(code.match(/<\/a\>/));
 ```
 
-Your anchor (`a`) element's text should be `link to cat pictures`. 确保将链接的文本放置在锚点元素（`a`）的起始和闭合标签之间。
+你的锚点元素（`a`）中的文本应该是 `link to cat pictures`。 确保将链接的文本放置在锚点元素（`a`）的起始和闭合标签之间。
 
 ```js
 assert(
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
index 95acd2d3254..131a0002f62 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5dfa22d1b521be39a3de7be0.md
@@ -7,9 +7,9 @@ dashedName: step-12
 
 # --description--
 
-In the previous step you turned the words `link to cat pictures` into a link by placing them between opening and closing anchor (`a`) tags. You can do the same to words inside of an element, such as a `p` element.
+在前一步骤中，你将单词 `link to cat pictures` 转换为一个链接，将它们放置在开始和结束锚点（`a`）标签之间。 你可以对元素内的单词做同样的操作，例如 `p` 元素。
 
-In the text of your `p` element, turn the words `cat photos` into a link to `https://freecatphotoapp.com` by adding opening and closing anchor (`a`) tags around these words.
+在你的 `p` 元素的文本中，将单词 `cat photos` 转换为指向 `https://freecatphotoapp.com` 的链接，通过把这些单词放到开始和结束锚点标签（`a`）内来实现。
 
 
 # --hints--
@@ -20,7 +20,7 @@ In the text of your `p` element, turn the words `cat photos` into a link to `htt
 assert($('p > a').length);
 ```
 
-The link's `href` value should be `https://freecatphotoapp.com`. You have either omitted the `href` value or have a typo.
+链接的 `href` 值应为 `https://freecatphotoapp.com`。 你可能落下了 `href` 值或者有拼写有误。
 
 ```js
 const nestedAnchor = $('p > a')[0];
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
index 673a8376563..7bed17251d9 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-by-building-a-cat-photo-app/5f07be6ef7412fbad0c5626b.md
@@ -9,7 +9,7 @@ dashedName: step-16
 
 在添加任何新内容之前，你应该使用 `section` 元素将猫咪照片内容与未来的内容分开。
 
-Take your `h2`, comment, `p`, and anchor (`a`) elements and nest them in a `section` element.
+将你的 `h2` 元素、注释、`p` 元素和锚点（`a`）元素嵌套在一个 `section` 元素中。
 
 # --hints--
 
@@ -41,7 +41,7 @@ const foundElements = childrenOfSection.filter((child) => {
 assert(foundElements.length === 3);
 ```
 
-The `h1` element should not be nested in the `section` element.
+`h1` 元素不应该被嵌套在 `section` 元素中。
 
 ```js
 const childrenOfSection = [...document.querySelector('section').childNodes];
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md
index 8607ffb11a8..9df898bf450 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f1922fcbd2410527b3bd89.md
@@ -6,25 +6,25 @@ dashedName: step-8
 ---
 
 # --description--
-The `vh` unit stands for viewport height, and is relative to 1% of the `height` of the viewport.
+`vh` 单位代表视口高度（viewport height），相当于视口 `height` 高度的 1%。
 
-It is time to spruce the project up with some CSS. Begin by giving the `body` a `width` of `100%`, and a `height` of `100vh`.
+现在是时候用 CSS 来装饰项目了。 首先设置 `body` 的 `width` 为 `100%`，`height` 为 `100vh`。
 
 # --hints--
 
-You should use the `body` element selector.
+你应该使用 `body` 元素选择器。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('body'));
 ```
 
-You should give the `body` a `width` of `100%`.
+你应该把 `body` 元素的 `width` 属性值设置为 `100%`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.width, '100%');
 ```
 
-You should give the `body` a `height` of `100vh`.
+你应该把 `body` 的 `height` 设置为 `100vh`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('body')?.height, '100vh');
diff --git a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md
index 1241245cda1..d5b881cb86d 100644
--- a/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md
+++ b/curriculum/challenges/chinese/14-responsive-web-design-22/learn-html-forms-by-building-a-registration-form/60f803d5241e6a0433a523a1.md
@@ -6,25 +6,25 @@ dashedName: step-15
 ---
 
 # --description--
-The `rem` unit stands for root `em`, and is relative to the font size of the `html` element.
+`rem` 单位代表根 `em`，与 `html` 元素的字体大小有关。
 
-As `label` elements are inline by default, they are all displayed side by side on the same line, making their text hard to read. To make them appear on separate lines, add `display: block` to the `label` element, and add a `margin` of `0.5rem 0`, to separate them from each other.
+由于 `label` 元素默认是行内元素，它们出现在其标签文本的同一行，使得文本难以阅读。 给 `label` 元素添加 `display: block`，并设置其 `margin` 为 `0.5rem 0`，来使其显示在不同的行，并且行之间有一定的距离。
 
 # --hints--
 
-You should use the `label` selector.
+你应该使用 `label` 选择器。
 
 ```js
 assert.exists(new __helpers.CSSHelp(document).getStyle('label'));
 ```
 
-You should add a `display` property of value `block`.
+你应该将 `display` 属性设置为 `block`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.display, 'block');
 ```
 
-You should add a `margin` property of value `0.5rem 0`.
+你应该添加 `margin` 属性，值为 `0.5rem 0`。
 
 ```js
 assert.equal(new __helpers.CSSHelp(document).getStyle('label')?.margin, '0.5rem 0px');
diff --git a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
index 8ab9f3f702b..f27b29c7c8d 100644
--- a/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
+++ b/curriculum/challenges/espanol/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
@@ -12,14 +12,27 @@ El número palindromico 595 es interesante, pues puede escribirse como la suma d
 
 Hay exactamente once palindromes por debajo de un millar que se pueden escribir como sumas cuadradas consecutivas, y la suma de estos palindromes es 4164. Tenga en cuenta que $1 = 0^2 + 1^2$ no ha sido incluido ya que este problema se refiere a los cuadrados de enteros positivos.
 
-Encuentre la suma de todos los números menores a $10^8$ que son palindromicos y pueden ser escritos como la suma de cuadrados consecutivos.
+Find the sum of all the numbers less than the  `limit`  that are both palindromic and can be written as the sum of consecutive squares.
 
 # --hints--
-
-`palindromicSums()` debe devolver `2906969179`.
+`palindromicSums(100000000)` should return `2906969179`.
 
 ```js
-assert.strictEqual(palindromicSums(), 2906969179);
+
+assert.strictEqual(palindromicSums(100000000), 2906969179);
+
+```
+
+`palindromicSums(100)` should return `137`.
+
+```js
+assert.strictEqual(palindromicSums(100), 137);
+```
+
+`palindromicSums(1000)` should return `4164`.
+
+```js
+assert.strictEqual(palindromicSums(1000),4164);
 ```
 
 # --seed--
@@ -27,16 +40,40 @@ assert.strictEqual(palindromicSums(), 2906969179);
 ## --seed-contents--
 
 ```js
-function palindromicSums() {
+function palindromicSums(limit) {
 
   return true;
 }
 
-palindromicSums();
+palindromicSums(100);
 ```
 
 # --solutions--
 
 ```js
-// solution required
+function isPalindrome(num) {
+  return num
+    .toString()
+    .split('')
+    .every((digit, i, arr) => digit === arr[arr.length - 1 - i]);
+}
+
+function palindromicSums(limit) {
+  let sumOfPalindromes = 0;
+  const sqrtLimit = Math.sqrt(limit);
+  const list = new Set();
+
+  for (let i = 1; i <= sqrtLimit; i++) {
+    let sumOfSquares = i * i;
+    for (let j = i + 1; j <= sqrtLimit; j++) {
+      sumOfSquares += j * j;
+      if (sumOfSquares > limit) break;
+      if (isPalindrome(sumOfSquares) && !list.has(sumOfSquares)) {
+        sumOfPalindromes += sumOfSquares;
+        list.add(sumOfSquares);
+      }
+    }
+  }
+  return sumOfPalindromes;
+}
 ```
diff --git a/curriculum/challenges/german/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md b/curriculum/challenges/german/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
index 9e26dfa108e..eb499c13931 100644
--- a/curriculum/challenges/german/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
+++ b/curriculum/challenges/german/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
@@ -12,14 +12,27 @@ The palindromic number 595 is interesting because it can be written as the sum o
 
 There are exactly eleven palindromes below one-thousand that can be written as consecutive square sums, and the sum of these palindromes is 4164. Note that $1 = 0^2 + 1^2$ has not been included as this problem is concerned with the squares of positive integers.
 
-Find the sum of all the numbers less than $10^8$ that are both palindromic and can be written as the sum of consecutive squares.
+Find the sum of all the numbers less than the  `limit`  that are both palindromic and can be written as the sum of consecutive squares.
 
 # --hints--
-
-`palindromicSums()` should return `2906969179`.
+`palindromicSums(100000000)` should return `2906969179`.
 
 ```js
-assert.strictEqual(palindromicSums(), 2906969179);
+
+assert.strictEqual(palindromicSums(100000000), 2906969179);
+
+```
+
+`palindromicSums(100)` should return `137`.
+
+```js
+assert.strictEqual(palindromicSums(100), 137);
+```
+
+`palindromicSums(1000)` should return `4164`.
+
+```js
+assert.strictEqual(palindromicSums(1000),4164);
 ```
 
 # --seed--
@@ -27,16 +40,40 @@ assert.strictEqual(palindromicSums(), 2906969179);
 ## --seed-contents--
 
 ```js
-function palindromicSums() {
+function palindromicSums(limit) {
 
   return true;
 }
 
-palindromicSums();
+palindromicSums(100);
 ```
 
 # --solutions--
 
 ```js
-// solution required
+function isPalindrome(num) {
+  return num
+    .toString()
+    .split('')
+    .every((digit, i, arr) => digit === arr[arr.length - 1 - i]);
+}
+
+function palindromicSums(limit) {
+  let sumOfPalindromes = 0;
+  const sqrtLimit = Math.sqrt(limit);
+  const list = new Set();
+
+  for (let i = 1; i <= sqrtLimit; i++) {
+    let sumOfSquares = i * i;
+    for (let j = i + 1; j <= sqrtLimit; j++) {
+      sumOfSquares += j * j;
+      if (sumOfSquares > limit) break;
+      if (isPalindrome(sumOfSquares) && !list.has(sumOfSquares)) {
+        sumOfPalindromes += sumOfSquares;
+        list.add(sumOfSquares);
+      }
+    }
+  }
+  return sumOfPalindromes;
+}
 ```
diff --git a/curriculum/challenges/italian/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md b/curriculum/challenges/italian/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
index a62855f235c..67eda16947c 100644
--- a/curriculum/challenges/italian/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
+++ b/curriculum/challenges/italian/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
@@ -12,14 +12,27 @@ Il numero palindromo 595 è interessante perché può essere scritto come la som
 
 Ci sono esattamente undici palindromi sotto il mille che possono essere scritti come somma di quadrati consecutivi, e la somma di questi palindromi è 4164. Nota che $1 = 0^2 + 1^2$ non è stato incluso in quanto questo problema riguarda i quadrati degli interi positivi.
 
-Trova la somma di tutti i numeri inferiori a $10^8$ che sono entrambi palindromi e possono essere scritti come la somma di quadrati consecutivi.
+Find the sum of all the numbers less than the  `limit`  that are both palindromic and can be written as the sum of consecutive squares.
 
 # --hints--
-
-`palindromicSums()` dovrebbe restituire `2906969179`.
+`palindromicSums(100000000)` should return `2906969179`.
 
 ```js
-assert.strictEqual(palindromicSums(), 2906969179);
+
+assert.strictEqual(palindromicSums(100000000), 2906969179);
+
+```
+
+`palindromicSums(100)` should return `137`.
+
+```js
+assert.strictEqual(palindromicSums(100), 137);
+```
+
+`palindromicSums(1000)` should return `4164`.
+
+```js
+assert.strictEqual(palindromicSums(1000),4164);
 ```
 
 # --seed--
@@ -27,16 +40,40 @@ assert.strictEqual(palindromicSums(), 2906969179);
 ## --seed-contents--
 
 ```js
-function palindromicSums() {
+function palindromicSums(limit) {
 
   return true;
 }
 
-palindromicSums();
+palindromicSums(100);
 ```
 
 # --solutions--
 
 ```js
-// solution required
+function isPalindrome(num) {
+  return num
+    .toString()
+    .split('')
+    .every((digit, i, arr) => digit === arr[arr.length - 1 - i]);
+}
+
+function palindromicSums(limit) {
+  let sumOfPalindromes = 0;
+  const sqrtLimit = Math.sqrt(limit);
+  const list = new Set();
+
+  for (let i = 1; i <= sqrtLimit; i++) {
+    let sumOfSquares = i * i;
+    for (let j = i + 1; j <= sqrtLimit; j++) {
+      sumOfSquares += j * j;
+      if (sumOfSquares > limit) break;
+      if (isPalindrome(sumOfSquares) && !list.has(sumOfSquares)) {
+        sumOfPalindromes += sumOfSquares;
+        list.add(sumOfSquares);
+      }
+    }
+  }
+  return sumOfPalindromes;
+}
 ```
diff --git a/curriculum/challenges/japanese/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md b/curriculum/challenges/japanese/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
index 734ab8c5112..aabd08d6301 100644
--- a/curriculum/challenges/japanese/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
+++ b/curriculum/challenges/japanese/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
@@ -12,14 +12,27 @@ dashedName: problem-125-palindromic-sums
 
 連続した平方数の和で表せる 1,000 未満の回文数はちょうど 11 個あり、それらの回文数の和は 4164 です。 なお、この問題では正の整数の平方数のみを扱うので、$1 = 0^2 + 1^2$ は含まれません。
 
-回文数であり、かつ、連続する平方数の和として表すことができる、$10^8$ 未満の数の総和を求めなさい。
+Find the sum of all the numbers less than the  `limit`  that are both palindromic and can be written as the sum of consecutive squares.
 
 # --hints--
-
-`palindromicSums()` は `2906969179` を返す必要があります。
+`palindromicSums(100000000)` should return `2906969179`.
 
 ```js
-assert.strictEqual(palindromicSums(), 2906969179);
+
+assert.strictEqual(palindromicSums(100000000), 2906969179);
+
+```
+
+`palindromicSums(100)` should return `137`.
+
+```js
+assert.strictEqual(palindromicSums(100), 137);
+```
+
+`palindromicSums(1000)` should return `4164`.
+
+```js
+assert.strictEqual(palindromicSums(1000),4164);
 ```
 
 # --seed--
@@ -27,16 +40,40 @@ assert.strictEqual(palindromicSums(), 2906969179);
 ## --seed-contents--
 
 ```js
-function palindromicSums() {
+function palindromicSums(limit) {
 
   return true;
 }
 
-palindromicSums();
+palindromicSums(100);
 ```
 
 # --solutions--
 
 ```js
-// solution required
+function isPalindrome(num) {
+  return num
+    .toString()
+    .split('')
+    .every((digit, i, arr) => digit === arr[arr.length - 1 - i]);
+}
+
+function palindromicSums(limit) {
+  let sumOfPalindromes = 0;
+  const sqrtLimit = Math.sqrt(limit);
+  const list = new Set();
+
+  for (let i = 1; i <= sqrtLimit; i++) {
+    let sumOfSquares = i * i;
+    for (let j = i + 1; j <= sqrtLimit; j++) {
+      sumOfSquares += j * j;
+      if (sumOfSquares > limit) break;
+      if (isPalindrome(sumOfSquares) && !list.has(sumOfSquares)) {
+        sumOfPalindromes += sumOfSquares;
+        list.add(sumOfSquares);
+      }
+    }
+  }
+  return sumOfPalindromes;
+}
 ```
diff --git a/curriculum/challenges/portuguese/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md b/curriculum/challenges/portuguese/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
index 395ce1febc3..dd12fdd0fad 100644
--- a/curriculum/challenges/portuguese/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
+++ b/curriculum/challenges/portuguese/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
@@ -12,14 +12,27 @@ O número palíndromo 595 é interessante, porque ele pode ser escrito como a so
 
 Existem exatamente onze palíndromos abaixo de mil que podem ser escritos como somas quadradas consecutivas. A soma destes palíndromos é 4164. Observe que $1 = 0^2 + 1^2$ não foi incluído pois este problema está interessado nos quadrados de inteiros positivos.
 
-Calcule a soma de todos os números menores que $10^8$ que são palíndromos e podem ser escritos como a soma de quadrados consecutivos.
+Find the sum of all the numbers less than the  `limit`  that are both palindromic and can be written as the sum of consecutive squares.
 
 # --hints--
-
-`palindromicSums()` deve retornar `2906969179`.
+`palindromicSums(100000000)` should return `2906969179`.
 
 ```js
-assert.strictEqual(palindromicSums(), 2906969179);
+
+assert.strictEqual(palindromicSums(100000000), 2906969179);
+
+```
+
+`palindromicSums(100)` should return `137`.
+
+```js
+assert.strictEqual(palindromicSums(100), 137);
+```
+
+`palindromicSums(1000)` should return `4164`.
+
+```js
+assert.strictEqual(palindromicSums(1000),4164);
 ```
 
 # --seed--
@@ -27,16 +40,40 @@ assert.strictEqual(palindromicSums(), 2906969179);
 ## --seed-contents--
 
 ```js
-function palindromicSums() {
+function palindromicSums(limit) {
 
   return true;
 }
 
-palindromicSums();
+palindromicSums(100);
 ```
 
 # --solutions--
 
 ```js
-// solution required
+function isPalindrome(num) {
+  return num
+    .toString()
+    .split('')
+    .every((digit, i, arr) => digit === arr[arr.length - 1 - i]);
+}
+
+function palindromicSums(limit) {
+  let sumOfPalindromes = 0;
+  const sqrtLimit = Math.sqrt(limit);
+  const list = new Set();
+
+  for (let i = 1; i <= sqrtLimit; i++) {
+    let sumOfSquares = i * i;
+    for (let j = i + 1; j <= sqrtLimit; j++) {
+      sumOfSquares += j * j;
+      if (sumOfSquares > limit) break;
+      if (isPalindrome(sumOfSquares) && !list.has(sumOfSquares)) {
+        sumOfPalindromes += sumOfSquares;
+        list.add(sumOfSquares);
+      }
+    }
+  }
+  return sumOfPalindromes;
+}
 ```
diff --git a/curriculum/challenges/ukrainian/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md b/curriculum/challenges/ukrainian/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
index 7df8b62475c..f42889962f1 100644
--- a/curriculum/challenges/ukrainian/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
+++ b/curriculum/challenges/ukrainian/10-coding-interview-prep/project-euler/problem-125-palindromic-sums.md
@@ -12,14 +12,27 @@ dashedName: problem-125-palindromic-sums
 
 Існує рівно одинадцять паліндромів менших за одну тисячу, які можна записати як послідовність суми квадратів, і сума цифр цих паліндромів дорівнює 4164. Зауважте, що число $1 = 0^2 + 1^2$ не було враховане, оскільки ця задача стосується квадратів лише натуральних чисел.
 
-Знайдіть суму всіх чисел, менших ніж $10^8$, які є одночасно паліндромами і можуть бути записані як сума послідовних квадратів.
+Find the sum of all the numbers less than the  `limit`  that are both palindromic and can be written as the sum of consecutive squares.
 
 # --hints--
-
-`palindromicSums()` має повернути `2906969179`.
+`palindromicSums(100000000)` should return `2906969179`.
 
 ```js
-assert.strictEqual(palindromicSums(), 2906969179);
+
+assert.strictEqual(palindromicSums(100000000), 2906969179);
+
+```
+
+`palindromicSums(100)` should return `137`.
+
+```js
+assert.strictEqual(palindromicSums(100), 137);
+```
+
+`palindromicSums(1000)` should return `4164`.
+
+```js
+assert.strictEqual(palindromicSums(1000),4164);
 ```
 
 # --seed--
@@ -27,16 +40,40 @@ assert.strictEqual(palindromicSums(), 2906969179);
 ## --seed-contents--
 
 ```js
-function palindromicSums() {
+function palindromicSums(limit) {
 
   return true;
 }
 
-palindromicSums();
+palindromicSums(100);
 ```
 
 # --solutions--
 
 ```js
-// solution required
+function isPalindrome(num) {
+  return num
+    .toString()
+    .split('')
+    .every((digit, i, arr) => digit === arr[arr.length - 1 - i]);
+}
+
+function palindromicSums(limit) {
+  let sumOfPalindromes = 0;
+  const sqrtLimit = Math.sqrt(limit);
+  const list = new Set();
+
+  for (let i = 1; i <= sqrtLimit; i++) {
+    let sumOfSquares = i * i;
+    for (let j = i + 1; j <= sqrtLimit; j++) {
+      sumOfSquares += j * j;
+      if (sumOfSquares > limit) break;
+      if (isPalindrome(sumOfSquares) && !list.has(sumOfSquares)) {
+        sumOfPalindromes += sumOfSquares;
+        list.add(sumOfSquares);
+      }
+    }
+  }
+  return sumOfPalindromes;
+}
 ```
diff --git a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
index ce49c9c02a0..ab95951beac 100644
--- a/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
+++ b/curriculum/challenges/ukrainian/14-responsive-web-design-22/learn-css-variables-by-building-a-city-skyline/5d822fd413a79914d39e98d5.md
@@ -7,7 +7,7 @@ dashedName: step-13
 
 # --description--
 
-Center the parts of your building by turning the `.bb1` element into a flexbox parent. Use the `flex-direction` and `align-items` properties to center the children.
+Відцентруйте частини будівлі, перетворивши елемент `.bb1` у flexbox-батька. Використайте властивості `flex-direction` та `align-items`, щоб відцентрувати дочірній елемент.
 
 # --hints--
 
diff --git a/curriculum/dictionaries/arabic/comments.json b/curriculum/dictionaries/arabic/comments.json
new file mode 100644
index 00000000000..42b1753551a
--- /dev/null
+++ b/curriculum/dictionaries/arabic/comments.json
@@ -0,0 +1,111 @@
+{
+  "hyek8f": "24.44 in Celsius",
+  "rscjup": "26 in Celsius",
+  "am2xch": "A list of strings representing tasks to do:",
+  "6rztdg": "Add a record here",
+  "to1vwe": "Add handleChange() and submitMessage() methods here",
+  "31b7ey": "Add your code above this line",
+  "c24by8": "Add your code below this line",
+  "jbrt8k": "Adds the m-th row into newArray",
+  "zkh12d": "After passing the challenge experiment with myString and see how the grouping works",
+  "mobihi": "Assign 5 to oopsGlobal Here",
+  "v3ups9": "Call scale with an argument here",
+  "iw4a3a": "Case 1: Target has no children",
+  "463xp8": "Case 2: Target has one child",
+  "u3inrm": "Case 3: Target has two children",
+  "axnbgg": "Change code above this line",
+  "i2kck7": "Change code below this line",
+  "dlbobn": "Change this line",
+  "v127zb": "Check the two consoles to see the difference. The freeCodeCamp console should have printed the variable twice, once for each test of this challenge. The browser console should only print the variable once because you cleared it first.",
+  "ejm0ql": "Close third tab in video window, and join",
+  "iwch6t": "Complete the method below and implement the others similarly",
+  "hihhyz": "Complete the return statement:",
+  "sdxti5": "Count the children of the target to delete",
+  "wfw6sc": "Create an x and y scale",
+  "sjw6f4": "Create the scale here",
+  "nupsh2": "Creates a 2-D array with m rows and n columns of zeroes",
+  "xfjb3s": "Declare the myGlobal variable below this line",
+  "htpjk7": "Define a constant for decrement action types",
+  "tfzdsp": "Define a constant for increment action types",
+  "zh20mi": "Define ADD, addMessage(), messageReducer(), and store here:",
+  "43qs4c": "Define an action creator for decrementing",
+  "nen3qo": "Define an action creator for incrementing",
+  "0cwyam": "Define an action creator here:",
+  "fq0wsg": "Define an action here:",
+  "tegkqa": "Define the Container component here:",
+  "b5oihn": "Define the counter reducer which will increment or decrement the state based on the action it receives",
+  "91y4pd": "Define the Redux store here, passing in your reducers",
+  "eie1vk": "Define the root reducer here",
+  "5s7nnl": "Define the store here:",
+  "34qe2q": "Dictionary will hold the items of our set",
+  "2c1wra": "Dispatch received data action here",
+  "923cpg": "Dispatch request action here",
+  "picsyf": "Dispatch the action here:",
+  "ysjr1s": "Display code",
+  "kjd1am": "Don't mutate state here or the tests will fail",
+  "5tx4ow": "Entertainment sites",
+  "9yu58b": "Example inventory lists",
+  "ciddtb": "Find the target value and its parent",
+  "ixx548": "Fix the code below so that it evaluates to true",
+  "6mbhjj": "For example: Redux.createStore()",
+  "jshtzq": "Function that returns a string representing a cup of black tea",
+  "cw1ghf": "Function that returns a string representing a cup of green tea",
+  "iuccln": "Generate a randomly filled array",
+  "bm2mop": "Get the tabs after the tab",
+  "kchz5k": "Get the tabs before the tab",
+  "bfd23c": "Given a function (representing the tea type) and number of cups needed, the\nfollowing function returns an array of strings (each representing a cup of\na specific type of tea).",
+  "ead98i": "Global count variable:",
+  "7zf0i2": "Join them together",
+  "5j2l88": "Let's create three browser windows",
+  "e843r9": "Let's open a new tab for now",
+  "5fvehh": "myVar is not defined outside of myLocalScope",
+  "qn720a": "Now, add console.clear() before your console.log() to clear the browser console, and pass the tests.",
+  "j86mef": "Now perform the tab opening, closing, and other operations",
+  "mk7rvy": "Now remove the console log line to pass the test",
+  "n7vm1s": "Only change code above this line",
+  "cvh4x7": "Only change code below this line",
+  "lvmnm7": "Open a new tab for cat memes",
+  "avpx79": "Open your browser console.",
+  "0b5ps6": "Padding between the SVG canvas boundary and the plot",
+  "uemoej": "Pushes n zeroes into the current row to create the columns",
+  "lm86nf": "Pushes the current row, which now has n zeroes in it, to the array",
+  "qscelx": "Redux methods are available from a Redux object",
+  "atqiig": "Render an input, button, and ul below this line",
+  "yq81wg": "Render the Provider below this line",
+  "kxio9j": "responseFromServer is set to false to represent an unsuccessful response from a server",
+  "alh6pw": "responseFromServer is set to true to represent a successful response from a server",
+  "1cfidd": "responseFromServer represents a response from a server",
+  "96tntk": "Returns 30",
+  "58a5g7": "Run and check the console",
+  "71bus9": "Run the tests to see the difference between the two consoles.",
+  "7wp46n": "Setting in Fahrenheit scale",
+  "oefvg5": "Setup",
+  "mnt4d3": "Should display 'carrot'",
+  "fhe9m4": "Social sites",
+  "za434b": "Stacked bar chart of weekly training",
+  "7c1fv9": "Stacked bar chart will go here",
+  "r44ovx": "tabs is an array of titles of each site open within the window",
+  "cl8peb": "test array:",
+  "1xi3cv": "The global variable",
+  "3gc01a": "The main.scss file",
+  "14kfog": "This is our intersection method",
+  "d1shtt": "This is our union method",
+  "pqq6sy": "This method will add an element to the set",
+  "nd2oxy": "This method will check for the presence of an element and return true or false",
+  "ocm81t": "This method will remove an element from a set",
+  "or9p5p": "This method will return all the values in the set",
+  "g1608f": "This method will return the size of the set",
+  "bheu99": "This will hold the set",
+  "x1djjr": "Use console.clear() on the next line to clear the browser console.",
+  "22ta95": "Use console.log() to print the output variable.",
+  "w43c7l": "Using s = [2, 5, 7] would be invalid",
+  "pgckoj": "Variable assignments",
+  "2xiqvv": "Variable declarations",
+  "2sx8zg": "We keep a record of the array inside the object",
+  "xmjfd8": "When you close a tab",
+  "es69h6": "When you join two windows into one window",
+  "fho5t5": "When you open a new tab at the end",
+  "00kcrm": "yields true",
+  "sxpg2a": "Your mailbox, drive, and other work sites",
+  "4143lf": "initialize buttons"
+}